Collapsible

Collapsible é a primitiva mais leve para mostrar e esconder conteúdo. Diferente de Accordion, que coordena uma lista de itens, Collapsible controla um único bloco — útil para "ver mais", detalhes opcionais ou configurações avançadas.

'use client';

import {
  Button,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@uranus-workspace/design-system';
import { ChevronsUpDown } from 'lucide-react';
import { useState } from 'react';

export default function CollapsibleDefault() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible open={open} onOpenChange={setOpen} className="w-[340px] space-y-2">
      <div className="flex items-center justify-between rounded-md border px-4 py-2">
        <h4 className="text-sm font-medium">Integrações conectadas</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" aria-label="Alternar integrações">
            <ChevronsUpDown className="h-4 w-4" />
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 text-sm">GitHub</div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-2 text-sm">Linear</div>
        <div className="rounded-md border px-4 py-2 text-sm">Figma</div>
      </CollapsibleContent>
    </Collapsible>
  );
}

Anatomia

• Collapsible — raiz controlada ou não-controlada. Aceita open / onOpenChange ou defaultOpen.
• CollapsibleTrigger — elemento que alterna o estado. Use asChild para delegar a um Button próprio.
• CollapsibleContent — o bloco que é revelado. Recebe hidden automaticamente quando fechado.

Uso

'use client';

import { useState } from 'react';
import {
  Button,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@uranus-workspace/design-system';

const [open, setOpen] = useState(false);

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger asChild>
    <Button variant="outline">Opções avançadas</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Campos adicionais que a maioria dos usuários não precisa.
  </CollapsibleContent>
</Collapsible>

Faça

• Use para conteúdo opcional que só interessa a alguns usuários.
• Combine com asChild no CollapsibleTrigger para manter o estilo do seu Button.
• Mantenha sempre ao menos uma linha de conteúdo visível antes do collapsible, para ancorar o trigger.

Não faça

• Não use para uma lista de itens coordenados — esse é o papel do Accordion.
• Não esconda conteúdo crítico ou campos obrigatórios de formulários.
• Não anime manualmente o CollapsibleContent — o Radix já cuida do estado para você.

Acessibilidade

• Construído sobre Radix Collapsible: o trigger recebe aria-expanded e aria-controls automaticamente.
• Teclado: Enter ou Espaço sobre o trigger alterna o estado.
• Quando fechado, o conteúdo é hidden de verdade — leitores de tela e navegação por tab pulam ele.