@softize/opus 21.0.1 → 22.1.0

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

@@ -4,11 +4,11 @@ Use `Content` para dar título e estrutura a uma região dentro de `PageBody`, `
 `DialogBody` ou outra superfície. Ele renderiza uma `section` ligada ao próprio título e mantém o
 espaçamento entre header e body. `ContentHeader` pertence sempre a essa estrutura; não o use solto.
 
-O `Content` é contínuo por definição e não expõe `layout`: ele é uma região nomeada dentro de outra
-superfície, e a escolha entre regiões seccionadas e contínuas pertence a quem a hospeda — o
-[`Card`](/ui/card), o [`Dialog`](/ui/dialog), o [`Drawer`](/ui/drawer) ou o [`Pane`](/ui/pane).
-Quando a própria região precisar de uma fronteira visível, use `framed`, descrito adiante. Pelo
-mesmo motivo o `Content` não tem rodapé: um rodapé pertence à superfície que a hospeda.
+O `Content` é uma região nomeada dentro de outra superfície. Sem moldura, ele mantém a anatomia
+contínua. Com `framed`, pode permanecer contínuo ou separar header e body com
+`layout="sectioned"`. O layout organiza as regiões internas; não transforma `Content` em
+[`Card`](/ui/card), [`Dialog`](/ui/dialog), [`Drawer`](/ui/drawer) ou [`Pane`](/ui/pane). Pelo mesmo
+motivo o `Content` não tem rodapé: um rodapé pertence à superfície que o hospeda.
 
 No caso comum, prefira o shorthand. `count` mostra o total de itens ao lado do título:
 
@@ -36,11 +36,7 @@ do recuo da região.
 
 ```tsx preview col
 render(
-  <Content
-    framed
-    title="Cliente"
-    media={<UserRound aria-hidden="true" />}
-  >
+  <Content framed title="Cliente" media={<UserRound aria-hidden="true" />}>
     <DetailGroup columns={2}>
       <DetailField label="Nome" value="Carla Souza" />
       <DetailField label="Telefone" value="+55 11 97333-4455" />
@@ -93,6 +89,34 @@ render(
 );
 ```
 
+## Header e body seccionados
+
+Use `layout="sectioned"` quando o filho do body já controlar o recuo de suas células, linhas ou
+itens. O header recebe `p-3` e divisor inferior; o body fica sem padding para que a estrutura interna
+alcance a moldura. Esse layout exige `framed`.
+
+```tsx preview col
+render(
+  <Content
+    framed
+    layout="sectioned"
+    title="Veículo"
+    media={<CarFront aria-hidden="true" />}
+  >
+    <DetailGroup dividers columns={2} orientation="horizontal">
+      <DetailField label="Marca" value="Toyota" />
+      <DetailField label="Modelo" value="Yaris XLS" />
+      <DetailField label="Ano/modelo" value="2021" />
+      <DetailField label="Placa" value="EVT0012" />
+    </DetailGroup>
+  </Content>,
+);
+```
+
+Conteúdo livre que não possui recuo próprio continua no layout `continuous`. Não combine
+`layout="sectioned"` com `frameVariant="legend"`: `sectioned` coloca o header dentro da moldura;
+`legend` integra o header ao traço externo.
+
 ## Grupo de campos
 
 Quando a região nomear um conjunto de campos relacionados, use `as="fieldset"`. O `Content`
@@ -129,12 +153,7 @@ decisão semântica, e não uma forma de obter esse desenho.
 
 ```tsx preview col
 render(
-  <Content
-    as="fieldset"
-    framed
-    frameVariant="legend"
-    title="Dados do veículo"
-  >
+  <Content as="fieldset" framed frameVariant="legend" title="Dados do veículo">
     <FieldGroup>
       <Field>
         <FieldLabel htmlFor="vehicle-plate">Placa</FieldLabel>
@@ -192,7 +211,12 @@ extremo oposto ao título, como em qualquer variante.
 
 ```tsx preview col
 render(
-  <Content level={1} variant="page" title="Clientes" actions={<Button>Criar cliente</Button>}>
+  <Content
+    level={1}
+    variant="page"
+    title="Clientes"
+    actions={<Button>Criar cliente</Button>}
+  >
     <div className="rounded-lg border border-border p-4 text-sm text-muted-foreground">
       A lista de clientes ocupa o corpo.
     </div>
@@ -211,19 +235,20 @@ classes adicionais; um `Content` irmão, sem lista, mantém a altura do próprio
 
 ## Propriedades de Content
 
-| Propriedade    | Tipo                         | Padrão      | Descrição                                                                                                               |
-| -------------- | ---------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `title`        | `ReactNode`                  |             | Forma curta: título da região (vira o heading ligado à `section`).                                                      |
-| `media`        | `ReactNode`                  |             | Forma curta: ícone ou imagem que identifica a região antes do título.                                                   |
-| `count`        | `number`                     |             | Forma curta: total de itens ao lado do título da região.                                                                |
-| `description`  | `ReactNode`                  |             | Forma curta: frase de apoio sob o título.                                                                               |
-| `actions`      | `ReactNode`                  |             | Forma curta: ações sobre a região inteira, no extremo oposto ao título.                                                 |
-| `level`        | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2`         | Nível semântico do heading, independente do destaque visual.                                                            |
-| `variant`      | `'page' \| 'section'`        | `'section'` | Hierarquia visual: `page` reproduz o cabeçalho de `Page`; `section` é a região dentro de uma superfície.                |
-| `as`           | `'section' \| 'fieldset'`    | `'section'` | Usa uma região com heading ou um grupo de campos cujo título é a legenda nativa.                                        |
-| `framed`       | `boolean`                    | `false`     | Envolve o header e o body com a moldura estrutural da região.                                                           |
-| `frameVariant` | `'default' \| 'legend'`      | `'default'` | Mantém a borda contínua ou integra visualmente o header à moldura. Não altera o elemento nem sua semântica.             |
-| `children`     | `ReactNode`                  |             | Corpo da região na forma curta, ou `ContentHeader` e `ContentBody` na composição explícita.                             |
+| Propriedade    | Tipo                          | Padrão         | Descrição                                                                                                         |
+| -------------- | ----------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `title`        | `ReactNode`                   |                | Forma curta: título da região (vira o heading ligado à `section`).                                                |
+| `media`        | `ReactNode`                   |                | Forma curta: ícone ou imagem que identifica a região antes do título.                                             |
+| `count`        | `number`                      |                | Forma curta: total de itens ao lado do título da região.                                                          |
+| `description`  | `ReactNode`                   |                | Forma curta: frase de apoio sob o título.                                                                         |
+| `actions`      | `ReactNode`                   |                | Forma curta: ações sobre a região inteira, no extremo oposto ao título.                                           |
+| `level`        | `1 \| 2 \| 3 \| 4 \| 5 \| 6`  | `2`            | Nível semântico do heading, independente do destaque visual.                                                      |
+| `variant`      | `'page' \| 'section'`         | `'section'`    | Hierarquia visual: `page` reproduz o cabeçalho de `Page`; `section` é a região dentro de uma superfície.          |
+| `as`           | `'section' \| 'fieldset'`     | `'section'`    | Usa uma região com heading ou um grupo de campos cujo título é a legenda nativa.                                  |
+| `framed`       | `boolean`                     | `false`        | Envolve o header e o body com a moldura estrutural da região.                                                     |
+| `layout`       | `'continuous' \| 'sectioned'` | `'continuous'` | Mantém header e body contínuos ou os separa com divisor e body sem recuo. `sectioned` exige `framed`.             |
+| `frameVariant` | `'default' \| 'legend'`       | `'default'`    | Mantém a borda contínua ou integra visualmente o header à moldura. `legend` não combina com `layout="sectioned"`. |
+| `children`     | `ReactNode`                   |                | Corpo da região na forma curta, ou `ContentHeader` e `ContentBody` na composição explícita.                       |
 
 As demais propriedades são as nativas de `section` ou, com `as="fieldset"`, de `fieldset`.
 
@@ -235,12 +260,12 @@ hierarquia é declarada em `Content`. `ContentHeader` não existe fora de `Conte
 
 ## Propriedades de ContentMedia
 
-| Propriedade | Tipo                                                                     | Padrão      | Descrição                                                                                                                   |
-| ----------- | ------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `size`      | `'xs' \| 'sm' \| 'default' \| 'lg'`                                      | `'xs'`      | Tamanho da moldura e do glifo na escala compartilhada dos controles.                                                        |
-| `context`   | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor.                                                                                               |
-| `variant`   | `'subtle' \| 'outline'`                                                   | `'subtle'`  | Usa preenchimento tonal ou acrescenta borda.                                                                                |
-| `className` | `string`                                                                 |             | Ajusta a moldura sem substituir a escala.                                                                                   |
+| Propriedade | Tipo                                                                     | Padrão      | Descrição                                                                                                                  |
+| ----------- | ------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `size`      | `'xs' \| 'sm' \| 'default' \| 'lg'`                                      | `'xs'`      | Tamanho da moldura e do glifo na escala compartilhada dos controles.                                                       |
+| `context`   | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor.                                                                                              |
+| `variant`   | `'subtle' \| 'outline'`                                                  | `'subtle'`  | Usa preenchimento tonal ou acrescenta borda.                                                                               |
+| `className` | `string`                                                                 |             | Ajusta a moldura sem substituir a escala.                                                                                  |
 | `asChild`   | `boolean`                                                                | `false`     | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
 
 `ContentMedia` já é a moldura. Passe só o glifo e escolha `size`, `context` e `variant` no slot. Um

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

@@ -9,7 +9,14 @@ validação, use [`Field`](/ui/field).
     label="Estágio"
     value={
       <DictionaryValue
-        dict={{ keys: ['prospect', 'customer'], entries: { prospect: { label: 'Prospecto' }, customer: { label: 'Cliente', context: 'success' } }, presentation: 'stage' }}
+        dict={{
+          keys: ["prospect", "customer"],
+          entries: {
+            prospect: { label: "Prospecto" },
+            customer: { label: "Cliente", context: "success" },
+          },
+          presentation: "stage",
+        }}
         value="prospect"
       />
     }
@@ -39,12 +46,14 @@ React substitui a apresentação. `0` e `false` seguem como valores. A regra é
 
 ## Moldura e divisórias internas
 
-`variant="framed"` adiciona a borda externa sem preencher o fundo; na orientação horizontal, só a
-coluna de rótulos recebe um fundo sutil. `dividers` desenha apenas as
-divisórias internas; as duas opções são independentes e podem ser combinadas. `orientation`
-define se a chave fica sobre o valor ou ao lado dele. Na orientação horizontal, todos os valores
-começam depois da mesma coluna de rótulo, com largura padrão de `7rem` em grupos simples e
-`8.5rem` na moldura horizontal. Quando a superfície exigir mais espaço para os rótulos, ajuste a variável no grupo, por exemplo com
+`variant="framed"` adiciona somente a borda externa, sem preencher o fundo. `dividers` desenha as
+divisórias internas; na orientação horizontal, também forma a grade tabular com fundo sutil e
+padding próprio na coluna de rótulos. As duas opções são independentes e podem ser combinadas.
+`orientation` define se a chave fica sobre o valor ou ao lado dele.
+
+Na orientação horizontal, todos os valores começam depois da mesma coluna de rótulo, com largura
+padrão de `7rem` em grupos simples e `8.5rem` quando `dividers` está ativo. Quando a superfície
+exigir mais espaço para os rótulos, ajuste a variável no grupo, por exemplo com
 `className="[--detail-label-width:9rem]"`.
 
 ```tsx preview col
@@ -62,24 +71,24 @@ começam depois da mesma coluna de rótulo, com largura padrão de `7rem` em gru
 
 ## Propriedades de DetailGroup
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `variant` | `'plain' \| 'framed'` | `'plain'` | `framed` aplica a moldura canônica ao conjunto, com fundo transparente; na orientação horizontal, a coluna de rótulos recebe fundo sutil. |
-| `dividers` | `boolean` | `false` | Linhas finas somente entre os campos, sem exigir moldura externa. |
-| `columns` | `1 \| 2 \| 3 \| 4 \| 'auto'` | `1` | Número fixo de colunas ou distribuição automática por largura mínima. |
-| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Chave sobre o valor ou ao lado dele em cada campo. |
+| Propriedade   | Tipo                         | Padrão       | Descrição                                                                                                 |
+| ------------- | ---------------------------- | ------------ | --------------------------------------------------------------------------------------------------------- |
+| `variant`     | `'plain' \| 'framed'`        | `'plain'`    | `framed` aplica somente a moldura canônica ao conjunto, com fundo transparente.                           |
+| `dividers`    | `boolean`                    | `false`      | Linhas finas entre os campos; na orientação horizontal, aplica fundo sutil e padding próprio aos rótulos. |
+| `columns`     | `1 \| 2 \| 3 \| 4 \| 'auto'` | `1`          | Número fixo de colunas ou distribuição automática por largura mínima.                                     |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Chave sobre o valor ou ao lado dele em cada campo.                                                        |
 
 O grupo renderiza uma lista de definições (`<dl>`); os demais atributos, como `className`, vão para
 ela.
 
 ## Propriedades de DetailField
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `label` | `ReactNode` | obrigatório | A chave do par. |
-| `value` | `ReactNode` | obrigatório | O valor; `null`, `undefined` e string vazia renderizam a ausência, `0` e `false` seguem como valores. |
-| `icon` | `ReactNode` | | Ícone decorativo antes do par chave/valor. |
-| `empty` | `ReactNode` | `“Não informado”` | Uma string dá significado acessível ao travessão; um nó próprio substitui a apresentação. |
+| Propriedade | Tipo        | Padrão            | Descrição                                                                                             |
+| ----------- | ----------- | ----------------- | ----------------------------------------------------------------------------------------------------- |
+| `label`     | `ReactNode` | obrigatório       | A chave do par.                                                                                       |
+| `value`     | `ReactNode` | obrigatório       | O valor; `null`, `undefined` e string vazia renderizam a ausência, `0` e `false` seguem como valores. |
+| `icon`      | `ReactNode` |                   | Ícone decorativo antes do par chave/valor.                                                            |
+| `empty`     | `ReactNode` | `“Não informado”` | Uma string dá significado acessível ao travessão; um nó próprio substitui a apresentação.             |
 
 Os demais atributos, como `className`, vão para o contêiner do par. `DetailField` não aceita
 `children`: o conteúdo entra por `value`.

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

@@ -5,6 +5,10 @@ tela ao fundo. Para conteúdo curto e centralizado, prefira [`Dialog`](/ui/dialo
 `side="right"`, o painel entra pela direita e pode ser fechado por Esc, pelo overlay ou pelo botão
 de fechamento.
 
+A moldura fica `0.25rem` afastada da viewport e usa borda completa, fundo base e raio `xl`, o mesmo
+tratamento das superfícies estruturais do shell. O recorte mantém as faixas internas dentro dos
+cantos, em qualquer valor de `side`.
+
 ```tsx preview
 <Drawer>
   <DrawerTrigger asChild>
@@ -125,7 +129,9 @@ em que o painel permanece aberto e troca de etapa.
       </DrawerActions>
     </DrawerHeader>
     <DrawerBody>
-      <p className="text-sm text-muted-foreground">Histórico de passagens na oficina.</p>
+      <p className="text-sm text-muted-foreground">
+        Histórico de passagens na oficina.
+      </p>
     </DrawerBody>
   </DrawerContent>
 </Drawer>
@@ -162,12 +168,12 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 
 ## Propriedades de Drawer
 
-| Propriedade    | Tipo                      | Padrão  | Descrição                                                                    |
-| -------------- | ------------------------- | ------- | ---------------------------------------------------------------------------- |
-| `open`         | `boolean`                 |         | Estado no modo controlado.                                                   |
-| `defaultOpen`  | `boolean`                 | `false` | Abertura inicial no modo não controlado.                                     |
-| `onOpenChange` | `(open: boolean) => void` |         | Recebe as mudanças de abertura, inclusive Esc, overlay e botão de fechar.    |
-| `modal`        | `boolean`                 | `true`  | Mantém foco e interação restritos ao painel aberto e exibe o overlay.        |
+| Propriedade    | Tipo                      | Padrão  | Descrição                                                                 |
+| -------------- | ------------------------- | ------- | ------------------------------------------------------------------------- |
+| `open`         | `boolean`                 |         | Estado no modo controlado.                                                |
+| `defaultOpen`  | `boolean`                 | `false` | Abertura inicial no modo não controlado.                                  |
+| `onOpenChange` | `(open: boolean) => void` |         | Recebe as mudanças de abertura, inclusive Esc, overlay e botão de fechar. |
+| `modal`        | `boolean`                 | `true`  | Mantém foco e interação restritos ao painel aberto e exibe o overlay.     |
 
 ## Propriedades de DrawerTrigger
 
@@ -178,61 +184,61 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 
 ## Propriedades de DrawerClose
 
-| Propriedade | Tipo        | Padrão  | Descrição                                                   |
-| ----------- | ----------- | ------- | ----------------------------------------------------------- |
-| `asChild`   | `boolean`   | `false` | Aplica o fechamento ao filho; use com `Button`.             |
-| `children`  | `ReactNode` |         | Controle que fecha o painel, como o `Cancelar` do rodapé.   |
+| Propriedade | Tipo        | Padrão  | Descrição                                                 |
+| ----------- | ----------- | ------- | --------------------------------------------------------- |
+| `asChild`   | `boolean`   | `false` | Aplica o fechamento ao filho; use com `Button`.           |
+| `children`  | `ReactNode` |         | Controle que fecha o painel, como o `Cancelar` do rodapé. |
 
 ## Propriedades de DrawerContent
 
-| Propriedade       | Tipo                                     | Padrão    | Descrição                                                                                  |
-| ----------------- | ---------------------------------------- | --------- | ------------------------------------------------------------------------------------------ |
-| `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Borda de onde o painel aparece.                                                            |
-| `layout`          | `'continuous' \| 'sectioned'`            | `'sectioned'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem.              |
-| `showCloseButton` | `boolean`                                | `true`    | Inclui o botão de fechar no cabeçalho. Sem ele, Esc e o overlay continuam fechando o painel. |
-| `closeDisabled`   | `boolean`                                | `false`   | Mantém o botão de fechar visível e desabilitado e impede que Esc e o clique no overlay fechem o painel. |
-| `closeSize`       | `"xs" \| "sm"`                           | `"sm"`    | Define o tamanho da ação circular de fechar.                                               |
-| `className`       | `string`                                 |           | Ajusta o painel, como a largura.                                                           |
-| `children`        | `ReactNode`                              |           | Cabeçalho, corpo e rodapé.                                                                 |
+| Propriedade       | Tipo                                     | Padrão        | Descrição                                                                                               |
+| ----------------- | ---------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
+| `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'`     | Borda de onde o painel aparece.                                                                         |
+| `layout`          | `'continuous' \| 'sectioned'`            | `'sectioned'` | Anatomia da superfície inteira; os slots leem esse valor e não o recebem.                               |
+| `showCloseButton` | `boolean`                                | `true`        | Inclui o botão de fechar no cabeçalho. Sem ele, Esc e o overlay continuam fechando o painel.            |
+| `closeDisabled`   | `boolean`                                | `false`       | Mantém o botão de fechar visível e desabilitado e impede que Esc e o clique no overlay fechem o painel. |
+| `closeSize`       | `"xs" \| "sm"`                           | `"sm"`        | Define o tamanho da ação circular de fechar.                                                            |
+| `className`       | `string`                                 |               | Ajusta o painel, como a largura.                                                                        |
+| `children`        | `ReactNode`                              |               | Cabeçalho, corpo e rodapé.                                                                              |
 
 ## Propriedades de DrawerHeader
 
-| Propriedade | Tipo        | Padrão | Descrição                                                                                  |
-| ----------- | ----------- | ------ | ------------------------------------------------------------------------------------------ |
-| `className` | `string`    |        | Ajusta a faixa superior sobre o recuo do layout.                                           |
+| Propriedade | Tipo        | Padrão | Descrição                                                                                                                                 |
+| ----------- | ----------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta a faixa superior sobre o recuo do layout.                                                                                          |
 | `children`  | `ReactNode` |        | Somente `DrawerNavigation`, `DrawerMedia`, `DrawerTitle` e `DrawerActions`, no máximo um de cada; o fechamento padrão entra depois deles. |
 
 ## Propriedades de DrawerMedia
 
-| Propriedade | Tipo                                                                     | Padrão      | Descrição                                                     |
-| ----------- | ------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------- |
-| `size`      | `'xs' \| 'sm' \| 'default' \| 'lg'`                                      | `'sm'`      | Tamanho da moldura e do glifo na escala compartilhada.        |
-| `context`   | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor.                                 |
-| `variant`   | `'subtle' \| 'outline'`                                                  | `'subtle'`  | Usa preenchimento tonal ou acrescenta borda.                  |
-| `className` | `string`                                                                 |             | Ajusta a moldura sem substituir a escala.                     |
-| `asChild` | `boolean` | `false` | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
+| Propriedade | Tipo                                                                     | Padrão      | Descrição                                                                                                                  |
+| ----------- | ------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `size`      | `'xs' \| 'sm' \| 'default' \| 'lg'`                                      | `'sm'`      | Tamanho da moldura e do glifo na escala compartilhada.                                                                     |
+| `context`   | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Declara o significado da cor.                                                                                              |
+| `variant`   | `'subtle' \| 'outline'`                                                  | `'subtle'`  | Usa preenchimento tonal ou acrescenta borda.                                                                               |
+| `className` | `string`                                                                 |             | Ajusta a moldura sem substituir a escala.                                                                                  |
+| `asChild`   | `boolean`                                                                | `false`     | Cede o elemento para uma marca com visual próprio — um orbe, um logotipo — que ocupa o slot sem ganhar a moldura por cima. |
 
 ## Propriedades de DrawerNavigation
 
-| Propriedade | Tipo        | Padrão | Descrição                                             |
-| ----------- | ----------- | ------ | ----------------------------------------------------- |
-| `className` | `string`    |        | Ajusta a região introdutória da linha.                |
-| `children`  | `ReactNode` |        | Retorno de um fluxo encadeado, antes do título.       |
+| Propriedade | Tipo        | Padrão | Descrição                                       |
+| ----------- | ----------- | ------ | ----------------------------------------------- |
+| `className` | `string`    |        | Ajusta a região introdutória da linha.          |
+| `children`  | `ReactNode` |        | Retorno de um fluxo encadeado, antes do título. |
 
 ## Propriedades de DrawerActions
 
-| Propriedade | Tipo        | Padrão | Descrição                                                |
-| ----------- | ----------- | ------ | -------------------------------------------------------- |
-| `className` | `string`    |        | Ajusta o agrupamento das ações.                          |
-| `children`  | `ReactNode` |        | Ações da tela no cabeçalho, antes do botão de fechar.    |
+| Propriedade | Tipo        | Padrão | Descrição                                             |
+| ----------- | ----------- | ------ | ----------------------------------------------------- |
+| `className` | `string`    |        | Ajusta o agrupamento das ações.                       |
+| `children`  | `ReactNode` |        | Ações da tela no cabeçalho, antes do botão de fechar. |
 
 ## Propriedades de DrawerTitle
 
-| Propriedade | Tipo        | Padrão | Descrição                                                           |
-| ----------- | ----------- | ------ | ------------------------------------------------------------------- |
-| `level`     | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `h2` da primitiva | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível. |
-| `className` | `string`    |        | Ajusta o título, que trunca quando não cabe na linha.               |
-| `children`  | `ReactNode` |        | Nome do recurso ou da tarefa; nomeia a superfície para leitores de tela. |
+| Propriedade | Tipo                         | Padrão            | Descrição                                                                |
+| ----------- | ---------------------------- | ----------------- | ------------------------------------------------------------------------ |
+| `level`     | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `h2` da primitiva | Hierarquia do documento. O tamanho vem do `layout`, nunca do nível.      |
+| `className` | `string`                     |                   | Ajusta o título, que trunca quando não cabe na linha.                    |
+| `children`  | `ReactNode`                  |                   | Nome do recurso ou da tarefa; nomeia a superfície para leitores de tela. |
 
 ## Propriedades de DrawerBody
 
@@ -242,7 +248,7 @@ do corpo como texto ou `Alert`.
 
 ## Propriedades de DrawerFooter
 
-| Propriedade | Tipo        | Padrão | Descrição                                                              |
-| ----------- | ----------- | ------ | ---------------------------------------------------------------------- |
-| `className` | `string`    |        | Ajusta a faixa do rodapé, inclusive a distribuição das ações.          |
-| `children`  | `ReactNode` |        | Ações persistentes, normalmente dentro de um `ButtonGroup`.            |
+| Propriedade | Tipo        | Padrão | Descrição                                                     |
+| ----------- | ----------- | ------ | ------------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta a faixa do rodapé, inclusive a distribuição das ações. |
+| `children`  | `ReactNode` |        | Ações persistentes, normalmente dentro de um `ButtonGroup`.   |

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

@@ -28,7 +28,7 @@ senha. Diferentemente de `icon`, essa região pode ser interativa.
 
 ```tsx preview col md
 function Demo() {
-  const [q, setQ] = useState('preview pipeline')
+  const [q, setQ] = useState("preview pipeline");
   return (
     <Input
       icon={<Search />}
@@ -36,15 +36,20 @@ function Demo() {
       onChange={(e) => setQ(e.target.value)}
       trailing={
         q ? (
-          <Button variant="ghost" size="icon-xs" aria-label="Limpar busca" onClick={() => setQ('')}>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            aria-label="Limpar busca"
+            onClick={() => setQ("")}
+          >
             <X />
           </Button>
         ) : undefined
       }
     />
-  )
+  );
 }
-render(<Demo />)
+render(<Demo />);
 ```
 
 Para combinar mais de um adorno, use `InputGroup`.
@@ -85,11 +90,11 @@ aplica o tratamento visual correspondente.
 
 Além das props abaixo, `Input` aceita os atributos nativos de `<input>`.
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `icon` | `ReactNode` | | Ícone decorativo no início do campo. |
-| `trailing` | `ReactNode` | | Ação interativa no fim do campo. |
-| `type` | `string` | | Tipo nativo do campo, como `text`, `email`, `password` ou `number`. |
+| Propriedade | Tipo        | Padrão | Descrição                                                           |
+| ----------- | ----------- | ------ | ------------------------------------------------------------------- |
+| `icon`      | `ReactNode` |        | Ícone decorativo no início do campo.                                |
+| `trailing`  | `ReactNode` |        | Ação interativa no fim do campo.                                    |
+| `type`      | `string`    |        | Tipo nativo do campo, como `text`, `email`, `password` ou `number`. |
 
 ## InputGroup
 
@@ -104,10 +109,14 @@ dos botões, transfere o foco para o campo, seja `InputGroupInput` ou `InputGrou
 
 ```tsx preview col
 <InputGroup>
-  <InputGroupAddon><Search /></InputGroupAddon>
+  <InputGroupAddon>
+    <Search />
+  </InputGroupAddon>
   <InputGroupInput placeholder="Buscar agente" defaultValue="reviewer" />
   <InputGroupAddon align="inline-end">
-    <InputGroupButton size="icon-xs" aria-label="Limpar filtro"><X /></InputGroupButton>
+    <InputGroupButton size="icon-xs" aria-label="Limpar filtro">
+      <X />
+    </InputGroupButton>
   </InputGroupAddon>
 </InputGroup>
 ```
@@ -123,7 +132,9 @@ dos botões, transfere o foco para o campo, seja `InputGroupInput` ou `InputGrou
     <InputGroupText>github.com/softize/</InputGroupText>
   </InputGroupAddon>
   <InputGroupInput placeholder="empresa-x-api" />
-  <InputGroupAddon align="inline-end"><InputGroupText>.git</InputGroupText></InputGroupAddon>
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>.git</InputGroupText>
+  </InputGroupAddon>
 </InputGroup>
 ```
 
@@ -133,9 +144,14 @@ Com `InputGroupTextarea`, um addon em `block-end` forma uma região de ações a
 
 ```tsx preview col
 <InputGroup>
-  <InputGroupTextarea placeholder="Descreva a tarefa para o agente developer" rows={3} />
+  <InputGroupTextarea
+    placeholder="Descreva a tarefa para o agente developer"
+    rows={3}
+  />
   <InputGroupAddon align="block-end">
-    <InputGroupText><Sparkles /> Título gerado pela IA</InputGroupText>
+    <InputGroupText>
+      <Sparkles /> Título gerado pela IA
+    </InputGroupText>
     <InputGroupButton
       size="sm"
       context="primary"
@@ -169,39 +185,39 @@ controle ativo, declare `data-disabled="true"` no `InputGroup`.
 
 ### Propriedades de InputGroup
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `shape` | `'default' \| 'pill'` | `'default'` | Geometria da moldura compartilhada. |
-| `data-disabled` | `'true' \| 'false'` | | Com `true`, esmaece os addons mesmo com o controle ativo. Com o controle desabilitado, os addons já esmaecem sem ele. |
+| Propriedade     | Tipo                  | Padrão      | Descrição                                                                                                             |
+| --------------- | --------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
+| `shape`         | `'default' \| 'pill'` | `'default'` | Geometria da moldura compartilhada.                                                                                   |
+| `data-disabled` | `'true' \| 'false'`   |             | Com `true`, esmaece os addons mesmo com o controle ativo. Com o controle desabilitado, os addons já esmaecem sem ele. |
 
 ### Propriedades de InputGroupAddon
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `align` | `'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'` | `'inline-start'` | Posição do addon nas laterais ou acima/abaixo do controle. |
+| Propriedade | Tipo                                                             | Padrão           | Descrição                                                  |
+| ----------- | ---------------------------------------------------------------- | ---------------- | ---------------------------------------------------------- |
+| `align`     | `'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'` | `'inline-start'` | Posição do addon nas laterais ou acima/abaixo do controle. |
 
 ### Propriedades de InputGroupButton
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `size` | `'xs' \| 'sm' \| 'icon-xs' \| 'icon-sm'` | `'xs'` | O subconjunto da escala única que cabe em um campo (1.5 · 2 · 1.5 · 1.75rem); os `icon-*` são quadrados. |
-| `context` | `'neutral' \| 'primary' \| 'danger'` | `'neutral'` | Contexto semântico herdado de Button. Com `variant` `solid` ou `subtle` sem contexto declarado, o padrão passa a `'primary'`. |
-| `variant` | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `'ghost'` | Tratamento visual; use `solid` quando a ação precisar de ênfase. |
+| Propriedade | Tipo                                                    | Padrão      | Descrição                                                                                                                     |
+| ----------- | ------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `size`      | `'xs' \| 'sm' \| 'icon-xs' \| 'icon-sm'`                | `'xs'`      | O subconjunto da escala única que cabe em um campo (1.5 · 2 · 1.5 · 1.75rem); os `icon-*` são quadrados.                      |
+| `context`   | `'neutral' \| 'primary' \| 'warning' \| 'danger'`       | `'neutral'` | Contexto semântico herdado de Button. Com `variant` `solid` ou `subtle` sem contexto declarado, o padrão passa a `'primary'`. |
+| `variant`   | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `'ghost'`   | Tratamento visual; use `solid` quando a ação precisar de ênfase.                                                              |
 
 ### Propriedades de InputGroupInput
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `value` / `defaultValue` | `string` | | Valor controlado ou inicial do `<input>`. |
-| `placeholder` | `string` | | Exemplo ou formato esperado quando o campo está vazio. |
+| Propriedade              | Tipo     | Padrão | Descrição                                              |
+| ------------------------ | -------- | ------ | ------------------------------------------------------ |
+| `value` / `defaultValue` | `string` |        | Valor controlado ou inicial do `<input>`.              |
+| `placeholder`            | `string` |        | Exemplo ou formato esperado quando o campo está vazio. |
 
 ### Propriedades de InputGroupTextarea
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `value` / `defaultValue` | `string` | | Valor controlado ou inicial do `<textarea>`. |
-| `placeholder` | `string` | | Exemplo ou orientação exibida quando o campo está vazio. |
-| `rows` | `number` | | Número inicial de linhas visíveis. |
+| Propriedade              | Tipo     | Padrão | Descrição                                                |
+| ------------------------ | -------- | ------ | -------------------------------------------------------- |
+| `value` / `defaultValue` | `string` |        | Valor controlado ou inicial do `<textarea>`.             |
+| `placeholder`            | `string` |        | Exemplo ou orientação exibida quando o campo está vazio. |
+| `rows`                   | `number` |        | Número inicial de linhas visíveis.                       |
 
 ### Propriedades de InputGroupText