@softize/opus 8.6.6

package/src/ui/docs/content/switch.md

@@ -0,0 +1,69 @@
+## Básico
+
+Sempre em par com Label (htmlFor↔id) — clicar no texto alterna a chave. defaultChecked pro modo não controlado.
+
+```tsx preview
+<div className="flex items-center gap-2">
+  <Switch id="boot-preview" defaultChecked />
+  <Label htmlFor="boot-preview">Subir o preview ao abrir a sessão</Label>
+</div>
+```
+
+## Controlado
+
+onCheckedChange recebe um boolean — pareie com checked pra guardar o estado no componente que decide.
+
+```tsx preview
+const [autoReview, setAutoReview] = useState(true)
+
+render(
+  <div className="flex items-center gap-2">
+    <Switch
+      id="auto-review"
+      checked={autoReview}
+      onCheckedChange={setAutoReview}
+    />
+    <Label htmlFor="auto-review">Acionar o revisor ao abrir o handoff</Label>
+  </div>,
+)
+```
+
+## Tamanho sm
+
+size=sm encolhe a chave — pra densidade em linha de lista, como cada repositório do workspace.
+
+```tsx preview col-start
+<div className="flex items-center gap-2">
+  <Switch id="sync-empresa-x-api" size="sm" defaultChecked />
+  <Label htmlFor="sync-empresa-x-api">empresa-x-api</Label>
+</div>
+<div className="flex items-center gap-2">
+  <Switch id="sync-empresa-x-web" size="sm" />
+  <Label htmlFor="sync-empresa-x-web">empresa-x-web</Label>
+</div>
+```
+
+## Desabilitado
+
+disabled esmaece e bloqueia a chave — ligada ou desligada — e o rótulo em par esmaece junto (peer-disabled).
+
+```tsx preview col-start
+<div className="flex items-center gap-2">
+  <Switch id="sync-multica" disabled />
+  <Label htmlFor="sync-multica">Sincronizar com o Multica</Label>
+</div>
+<div className="flex items-center gap-2">
+  <Switch id="opus" disabled defaultChecked />
+  <Label htmlFor="opus">Opus inicializado</Label>
+</div>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `checked` | `boolean` | | O estado, no modo controlado — parear com onCheckedChange. |
+| `onCheckedChange` | `(checked: boolean) => void` | | Chamado a cada alternância, com o novo estado. |
+| `defaultChecked` | `boolean` | `false` | Estado inicial no modo não controlado. |
+| `size` | `'sm' \| 'default'` | `'default'` | Tamanho da chave — sm pra densidade em linha de lista. |
+| `disabled` | `boolean` | `false` | Esmaece e bloqueia — o Label em par esmaece junto (peer-disabled). |

package/src/ui/docs/content/table.md

@@ -0,0 +1,102 @@
+## Tabela de domínio
+
+A Table vem SEM borda externa — só as divisórias de linha (a última o TableBody zera). Coluna numérica alinha à direita (text-right no TableHead E no TableCell). A TableCaption fica embaixo (caption-bottom) e descreve a tabela.
+
+```tsx preview col
+<Table>
+  <TableCaption>Sessões recentes do workspace Empresa X.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Sessão</TableHead>
+      <TableHead>Agente</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead className="text-right">Duração</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">Importar pedidos da transportadora</TableCell>
+      <TableCell>developer</TableCell>
+      <TableCell><Badge variant="info">Em sessão</Badge></TableCell>
+      <TableCell className="text-right">42 min</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell className="font-medium">Revisar contrato de rastreio</TableCell>
+      <TableCell>reviewer</TableCell>
+      <TableCell><Badge variant="warning">Aguardando revisor</Badge></TableCell>
+      <TableCell className="text-right">18 min</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell className="font-medium">Ajustar microcopy do painel</TableCell>
+      <TableCell>designer</TableCell>
+      <TableCell><Badge variant="success">Concluída</Badge></TableCell>
+      <TableCell className="text-right">7 min</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Moldura (o datagrid da casa)
+
+A borda externa NÃO é do componente: é um wrapper `overflow-hidden rounded-lg border border-border` por fora — o estilo padrão de datagrid do back-office. O `overflow-hidden` recorta os cantos e contém o scroll horizontal; a última linha já vem sem divisória, então o quadro fecha limpo. O ActionList aplica a moldura sozinho na tabela derivada; em tabela montada à mão, é você quem embrulha.
+
+```tsx preview col
+<div className="w-full overflow-hidden rounded-lg border border-border">
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Sessão</TableHead>
+        <TableHead>Agente</TableHead>
+        <TableHead className="text-right">Duração</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell className="font-medium">Importar pedidos da transportadora</TableCell>
+        <TableCell>developer</TableCell>
+        <TableCell className="text-right">42 min</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell className="font-medium">Revisar contrato de rastreio</TableCell>
+        <TableCell>reviewer</TableCell>
+        <TableCell className="text-right">18 min</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</div>
+```
+
+## Com rodapé (TableFooter)
+
+TableFooter fecha a tabela com a linha de agregação — fundo muted e peso de fonte já vêm prontos.
+
+```tsx preview col
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Agente</TableHead>
+      <TableHead className="text-right">Skills vinculadas</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">developer</TableCell>
+      <TableCell className="text-right">6</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell className="font-medium">reviewer</TableCell>
+      <TableCell className="text-right">4</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell className="font-medium">designer</TableCell>
+      <TableCell className="text-right">3</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell>Total</TableCell>
+      <TableCell className="text-right">13</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+```

package/src/ui/docs/content/tabs.md

@@ -0,0 +1,94 @@
+## Padrão (pill)
+
+O value do TabsTrigger pareia com o do TabsContent. defaultValue deixa o estado com o componente; pra controlar, use value + onValueChange.
+
+```tsx preview col
+<Tabs defaultValue="sessions">
+  <TabsList>
+    <TabsTrigger value="overview">Visão geral</TabsTrigger>
+    <TabsTrigger value="sessions">Sessões</TabsTrigger>
+    <TabsTrigger value="skills">Skills</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">
+    <p className="text-sm text-muted-foreground">Resumo do workspace Empresa X.</p>
+  </TabsContent>
+  <TabsContent value="sessions">
+    <p className="text-sm text-muted-foreground">3 sessões nesta semana, 1 em andamento.</p>
+  </TabsContent>
+  <TabsContent value="skills">
+    <p className="text-sm text-muted-foreground">6 skills vinculadas aos agentes do workspace.</p>
+  </TabsContent>
+</Tabs>
+```
+
+## Variante line
+
+variant=line na TabsList: fundo transparente, o ativo é marcado pelo traço embaixo — bom pra cabeçalho de página, onde o pill pesaria.
+
+```tsx preview col
+<Tabs defaultValue="agents">
+  <TabsList variant="line">
+    <TabsTrigger value="agents">Agentes</TabsTrigger>
+    <TabsTrigger value="repos">Repositórios</TabsTrigger>
+    <TabsTrigger value="settings">Configurações</TabsTrigger>
+  </TabsList>
+  <TabsContent value="agents">
+    <p className="text-sm text-muted-foreground">developer, reviewer e designer ativos.</p>
+  </TabsContent>
+  <TabsContent value="repos">
+    <p className="text-sm text-muted-foreground">empresa-x-api e empresa-x-web vinculados.</p>
+  </TabsContent>
+  <TabsContent value="settings">
+    <p className="text-sm text-muted-foreground">Preferências do workspace.</p>
+  </TabsContent>
+</Tabs>
+```
+
+## Vertical
+
+orientation=vertical no Tabs: a lista vira coluna e o traço da variante line migra pra lateral direita do trigger.
+
+```tsx preview col
+<Tabs defaultValue="prompt" orientation="vertical">
+  <TabsList>
+    <TabsTrigger value="prompt">Prompt</TabsTrigger>
+    <TabsTrigger value="skills">Skills</TabsTrigger>
+    <TabsTrigger value="history">Histórico</TabsTrigger>
+  </TabsList>
+  <TabsContent value="prompt">
+    <p className="text-sm text-muted-foreground">O prompt do agente developer.</p>
+  </TabsContent>
+  <TabsContent value="skills">
+    <p className="text-sm text-muted-foreground">Skills vinculadas a este agente.</p>
+  </TabsContent>
+  <TabsContent value="history">
+    <p className="text-sm text-muted-foreground">Sessões anteriores deste agente.</p>
+  </TabsContent>
+</Tabs>
+```
+
+## Densidade (size)
+
+`size="sm"` no `Tabs` baixa a lista de h-9 (36px) pra h-8 (32px) — o par do `sm` que Button e Select já têm, pra uma fileira densa (toolbar, header) onde o segmento não pode ficar mais alto que os irmãos.
+
+```tsx preview col
+<Tabs defaultValue="preview" size="sm">
+  <TabsList>
+    <TabsTrigger value="preview" className="text-xs">Preview</TabsTrigger>
+    <TabsTrigger value="code" className="text-xs">Código</TabsTrigger>
+    <TabsTrigger value="ai" className="text-xs">IA</TabsTrigger>
+  </TabsList>
+</Tabs>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `defaultValue (Tabs)` | `string` | | A aba inicial no modo não-controlado. |
+| `value (Tabs)` | `string` | | A aba ativa no modo controlado — pareie com onValueChange. |
+| `onValueChange (Tabs)` | `(value: string) => void` | | Chamado quando o usuário troca de aba. |
+| `size (Tabs)` | `'default' \| 'sm'` | `'default'` | Altura da lista: default (h-9) ou sm (h-8), o par do sm de Button/Select. Flui pra TabsList por contexto. |
+| `orientation (Tabs)` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção da lista de abas — vertical vira coluna lateral. |
+| `variant (TabsList)` | `'default' \| 'line'` | `'default'` | default é o pill (fundo muted); line é a barra sublinhada, sem fundo. |
+| `value (TabsTrigger/TabsContent)` | `string` | | Identificador que pareia o trigger com o painel correspondente. |

package/src/ui/docs/content/testing.md

@@ -0,0 +1,89 @@
+---
+title: Testes de action
+---
+
+# Testes de action
+
+A unidade natural de teste no Opus é a **action** — o contrato: input → output/erro,
+bordas do schema, autorização fail-closed. `@softize/opus/testing` roda esse contrato
+em unidade, sem montar runtime nem mockar contexto à mão.
+
+## runAction — o contrato em unidade
+
+O harness executa o **mesmo pipeline do runtime**: valida o input → cobra o gate
+`public` → avalia o `authorize` (string DSL ou closure, semântica idêntica) → roda o
+handler → valida o output. Falha estoura o mesmo `ActionError` tipado do runtime
+(`validation.invalid_input`, `auth.unauthenticated`, `auth.forbidden`…).
+
+```ts
+import { runAction } from '@softize/opus/testing'
+import { taskList } from './list.ts'
+
+it('lista as fixtures com o shape do contrato', async () => {
+  const { output } = await runAction(taskList, {}, { user: { id: 'u1' } })
+  expect(output.total).toBe(2)
+})
+
+it('sem usuário, barra: a action não é pública', async () => {
+  await expect(runAction(taskList, {})).rejects.toMatchObject({ code: 'auth.unauthenticated' })
+})
+```
+
+O terceiro argumento configura o contexto e substitui os loaders (que não rodam em
+unidade): `{ user, tenantId, can, db, storage, ai, loaded, meta }`. O `authorize` vê
+o `loaded` como no runtime:
+
+```ts
+it('só a dona edita', async () => {
+  const opts = { loaded: { task: { ownerId: 'u1' } } }
+  await runAction(taskUpdate, { id: '1' }, { ...opts, user: { id: 'u1' } }) // passa
+  await expect(
+    runAction(taskUpdate, { id: '1' }, { ...opts, user: { id: 'u2' } }),
+  ).rejects.toMatchObject({ code: 'auth.forbidden' })
+})
+```
+
+## Contexto observável
+
+`runAction` (e `testContext`, pra quem quer só o ctx) devolve os efeitos capturados —
+o teste afirma o que importa:
+
+```ts
+const { output, emitted, logged } = await runAction(taskDone, { id: '1' }, { user })
+expect(emitted).toEqual([{ event: 'task.done', data: { id: '1' } }])
+```
+
+## memStorage
+
+`StorageAdapter` em memória com a mesma régua de key dos drivers reais — pra handler
+que anexa arquivo:
+
+```ts
+import { memStorage, runAction } from '@softize/opus/testing'
+
+const storage = memStorage()
+await runAction(notaAnexar, { id: '9' }, { user, storage })
+expect(storage.keys()).toEqual(['notas/9.pdf'])
+```
+
+## fake — fixtures do schema
+
+`fake(schema)` / `fakeMany(schema, n)` geram dado sintético **determinístico** que satisfaz o
+schema zod — matéria-prima do `mockHandler` (modo design) e de fixtures de teste. Semeado
+(mesma `seed` → mesma saída, sem `Math.random`), com heurística por check do zod (email, uuid,
+url, datetime) e por nome de campo (email, id, `*At`→data, telefone, cpf/cnpj, nome…), sabor pt-BR.
+
+```ts
+import { fake, fakeMany } from '@softize/opus/testing'
+
+const one = fake(EventEntity.zod()) // 1 evento válido (safeParse passa)
+const many = fakeMany(EventEntity.zod(), 20) // 20, estáveis entre execuções
+fake(schema, { seed: 7 }) // seed própria
+```
+
+## O que fica de fora
+
+De propósito — é harness de **unidade**: loaders reais (passe `loaded` pronto), audit,
+reactions em cadeia e o servidor. Fluxo completo é teste de integração com o runtime.
+`requires` é declarativo no protocolo (o runtime não o executa) — no harness idem;
+handler que chama `ctx.can` responde ao `can` das options.

package/src/ui/docs/content/textarea.md

@@ -0,0 +1,30 @@
+## Básico
+
+Cresce com o conteúdo a partir da altura mínima (field-sizing-content) — digite e veja.
+
+```tsx preview col md
+<Textarea placeholder="Descreva o que o agente deve fazer nesta sessão." />
+```
+
+## Com Label
+
+O mesmo par htmlFor↔id dos outros campos — o overview do handoff é o caso típico.
+
+```tsx preview col md
+<div className="grid gap-2">
+  <Label htmlFor="overview">Overview da task</Label>
+  <Textarea
+    id="overview"
+    defaultValue="Ajustar a microcopy do handoff: frases com maiúscula e ponto, labels curtos sem ponto."
+  />
+</div>
+```
+
+## Estados
+
+aria-invalid pinta borda e anel destructive; disabled esmaece e bloqueia a edição.
+
+```tsx preview col md
+<Textarea aria-invalid placeholder="Conte o contexto da mudança." />
+<Textarea disabled defaultValue="Sessão encerrada — o brief não pode mais ser editado." />
+```

package/src/ui/docs/content/toast.md

@@ -0,0 +1,67 @@
+## Tipos
+
+Cada tipo já vem com o ícone lucide do Opus. O título é label (sem ponto); a description, frase (com ponto).
+
+```tsx preview
+<Button variant="outline" onClick={() => toast.success('Workspace criado')}>Sucesso</Button>
+<Button
+  variant="outline"
+  onClick={() => toast.error('Falha no push', { description: 'O Multica não respondeu — tente de novo.' })}
+>
+  Erro
+</Button>
+<Button variant="outline" onClick={() => toast.info('Base atualizada')}>Info</Button>
+<Button
+  variant="outline"
+  onClick={() => toast.warning('Preview parado', { description: 'Inicie o ambiente pra ver a sessão.' })}
+>
+  Aviso
+</Button>
+```
+
+## Ação e progresso
+
+action põe um botão no toast (ex.: desfazer); toast.promise acompanha uma operação — loading vira sucesso ou erro sozinho.
+
+```tsx preview
+<Button
+  variant="outline"
+  onClick={() =>
+    toast('Sessão arquivada', {
+      action: { label: 'Desfazer', onClick: () => toast.success('Sessão restaurada') },
+    })
+  }
+>
+  Com ação
+</Button>
+<Button
+  variant="outline"
+  onClick={() =>
+    toast.promise(new Promise((resolve) => setTimeout(resolve, 1800)), {
+      loading: 'Publicando no Multica…',
+      success: 'Agentes publicados',
+      error: 'Falha ao publicar',
+    })
+  }
+>
+  Promise
+</Button>
+```
+
+## Toaster no root
+
+Monte uma vez, fora do App. Divergência declarada: sem next-themes — o tema vem por prop (default 'system'); a elevação dark usa bg-popover.
+
+```tsx
+/* main.tsx do app — uma vez. */
+<App />
+<Toaster />
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `Toaster.theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Força o tema dos toasts — sem next-themes, a escolha é do app. |
+| `Toaster.position` | `'bottom-right' \| 'top-center' \| …` | `'bottom-right'` | Canto onde os toasts aparecem (sonner). |
+| `toast(title, opts)` | `{ description?, action?, duration?, … }` | | A API de disparo (sonner): descrição, botão de ação e duração por toast. |

package/src/ui/docs/content/toggle-group.md

@@ -0,0 +1,81 @@
+## Escolha única
+
+type=single deixa um item ativo por vez; value é uma string. Controlado por value + onValueChange — bom pra alternar a visão de um workspace.
+
+```tsx preview
+const [view, setView] = useState('sessions')
+
+render(
+  <ToggleGroup type="single" value={view} onValueChange={(v) => v && setView(v)}>
+    <ToggleGroupItem value="overview">Visão geral</ToggleGroupItem>
+    <ToggleGroupItem value="sessions">Sessões</ToggleGroupItem>
+    <ToggleGroupItem value="skills">Skills</ToggleGroupItem>
+  </ToggleGroup>,
+)
+```
+
+## Escolha múltipla
+
+type=multiple permite vários ativos ao mesmo tempo; value é um array de strings. O padrão pra uma barra de formatação.
+
+```tsx preview
+const [marks, setMarks] = useState(['bold'])
+
+render(
+  <ToggleGroup type="multiple" value={marks} onValueChange={setMarks}>
+    <ToggleGroupItem value="bold" aria-label="Negrito">
+      <Bold />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="italic" aria-label="Itálico">
+      <Italic />
+    </ToggleGroupItem>
+    <ToggleGroupItem value="underline" aria-label="Sublinhado">
+      <Underline />
+    </ToggleGroupItem>
+  </ToggleGroup>,
+)
+```
+
+## Variante outline
+
+variant=outline emoldura o grupo com borda; size e o variant definidos no ToggleGroup descem pra cada ToggleGroupItem via contexto.
+
+```tsx preview
+<ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="Alinhamento">
+  <ToggleGroupItem value="left" aria-label="Esquerda">
+    <AlignLeft />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="center" aria-label="Centro">
+    <AlignCenter />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="right" aria-label="Direita">
+    <AlignRight />
+  </ToggleGroupItem>
+</ToggleGroup>
+```
+
+## Com espaçamento
+
+spacing afasta os itens (em unidades de spacing do tema) — sem ele os botões ficam colados num bloco único.
+
+```tsx preview
+<ToggleGroup type="single" variant="outline" spacing={2} defaultValue="developer">
+  <ToggleGroupItem value="developer">developer</ToggleGroupItem>
+  <ToggleGroupItem value="reviewer">reviewer</ToggleGroupItem>
+  <ToggleGroupItem value="designer">designer</ToggleGroupItem>
+</ToggleGroup>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `type (ToggleGroup)` | `'single' \| 'multiple'` | | single mantém um item ativo (value: string); multiple permite vários (value: string[]). |
+| `value (ToggleGroup)` | `string \| string[]` | | O(s) item(ns) ativo(s) no modo controlado — pareie com onValueChange. O tipo segue o type. |
+| `onValueChange (ToggleGroup)` | `(value: string \| string[]) => void` | | Chamado quando a seleção muda. No single, vem string vazia ao desmarcar o ativo. |
+| `defaultValue (ToggleGroup)` | `string \| string[]` | | A seleção inicial no modo não controlado. |
+| `variant (ToggleGroup)` | `'default' \| 'outline'` | `'default'` | default é sem moldura; outline emoldura o grupo com borda. Desce pros itens via contexto. |
+| `size (ToggleGroup)` | `'default' \| 'sm' \| 'lg'` | `'default'` | Altura e respiro dos itens. Desce pros itens via contexto. |
+| `spacing (ToggleGroup)` | `number` | `0` | Distância entre os itens (unidades de spacing). 0 cola tudo num bloco único. |
+| `value (ToggleGroupItem)` | `string` | | Identificador do item — é o que entra no value do grupo quando ativado. |
+| `disabled (ToggleGroupItem)` | `boolean` | `false` | Esmaece e bloqueia um item específico do grupo. |

package/src/ui/docs/content/toggle.md

@@ -0,0 +1,72 @@
+## Básico
+
+Um botão que lembra se está ligado. defaultPressed deixa o estado com o componente; o filho costuma ser um ícone.
+
+```tsx preview
+<Toggle defaultPressed aria-label="Negrito">
+  <Bold />
+</Toggle>
+```
+
+## Controlado
+
+pressed + onPressedChange tiram o estado do componente — o booleano fica no seu store. Bom pra alternar o modo somente-leitura de uma sessão.
+
+```tsx preview
+const [readOnly, setReadOnly] = useState(true)
+
+render(
+  <Toggle
+    variant="outline"
+    pressed={readOnly}
+    onPressedChange={setReadOnly}
+  >
+    <Eye />
+    Somente leitura
+  </Toggle>,
+)
+```
+
+## Variantes e tamanhos
+
+variant default não tem borda (o fundo só aparece ativo); outline carrega a borda. size sm/default/lg ajusta a altura.
+
+```tsx preview
+<Toggle aria-label="Quebra de linha">
+  <WrapText />
+</Toggle>
+<Toggle variant="outline" aria-label="Quebra de linha">
+  <WrapText />
+</Toggle>
+<Toggle variant="outline" size="sm" defaultPressed>
+  Compacto
+</Toggle>
+<Toggle variant="outline" size="lg" defaultPressed>
+  Confortável
+</Toggle>
+```
+
+## Desabilitado
+
+disabled esmaece e bloqueia o clique — o estado pressed permanece visível.
+
+```tsx preview
+<Toggle disabled aria-label="Negrito">
+  <Bold />
+</Toggle>
+<Toggle disabled defaultPressed variant="outline">
+  <Eye />
+  Somente leitura
+</Toggle>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `pressed` | `boolean` | | O estado ligado/desligado no modo controlado — parear com onPressedChange. |
+| `onPressedChange` | `(pressed: boolean) => void` | | Chamado a cada alternância, com o novo estado. |
+| `defaultPressed` | `boolean` | `false` | Estado inicial no modo não controlado. |
+| `variant` | `'default' \| 'outline'` | `'default'` | default não tem borda (fundo só quando ativo); outline carrega a borda. |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | Altura do botão — sm pra toolbar densa, lg pra alvo mais confortável. |
+| `disabled` | `boolean` | `false` | Esmaece e bloqueia o clique, preservando o estado visual. |