@softize/opus 18.0.1 → 18.1.0

package/src/ui/components/primitives/table.tsx

@@ -2,36 +2,45 @@ import * as React from "react"
 
 import { cn } from '../../lib/cn.ts'
 
+type TableVariant = 'plain' | 'framed'
+const TableVariantContext = React.createContext<TableVariant>('plain')
+
 export interface TableProps extends React.ComponentProps<"table"> {
   /** `framed` aplica a moldura canônica de datagrid no contêiner da tabela. */
-  variant?: 'plain' | 'framed'
+  variant?: TableVariant
 }
 
 function Table({ className, variant = 'plain', ...props }: TableProps) {
   return (
-    <div
-      data-slot="table-container"
-      data-variant={variant}
-      className={cn(
-        "relative w-full overflow-x-auto",
-        variant === 'framed' &&
-          'rounded-lg border border-border [&_[data-slot=table-header]]:bg-muted/20',
-      )}
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
+    <TableVariantContext.Provider value={variant}>
+      <div
+        data-slot="table-container"
+        data-variant={variant}
+        className={cn(
+          "relative w-full overflow-x-auto",
+          variant === 'framed' && 'rounded-lg border border-border',
+        )}
+      >
+        <table
+          data-slot="table"
+          className={cn("w-full caption-bottom text-sm", className)}
+          {...props}
+        />
+      </div>
+    </TableVariantContext.Provider>
   )
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  const variant = React.useContext(TableVariantContext)
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn(
+        "[&_tr]:border-b",
+        variant === 'framed' && 'bg-muted/30 dark:bg-input/30',
+        className,
+      )}
       {...props}
     />
   )

package/src/ui/components/primitives/tabs.tsx

@@ -11,6 +11,9 @@ import { controlHeight, type ControlSize } from './control.ts'
 // da escala de control.ts.
 type TabsSize = Extract<ControlSize, "default" | "sm">
 const TabsSizeContext = React.createContext<TabsSize>("default")
+type TabsOrientation = "horizontal" | "vertical"
+const TabsOrientationContext = React.createContext<TabsOrientation>("horizontal")
+const TabsListVariantContext = React.createContext<"default" | "line">("default")
 
 function Tabs({
   className,
@@ -19,19 +22,21 @@ function Tabs({
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Root> & { size?: TabsSize }) {
   return (
-    <TabsSizeContext.Provider value={size}>
-      <TabsPrimitive.Root
-        data-slot="tabs"
-        data-orientation={orientation}
-        data-size={size}
-        orientation={orientation}
-        className={cn(
-          "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
-          className
-        )}
-        {...props}
-      />
-    </TabsSizeContext.Provider>
+    <TabsOrientationContext.Provider value={orientation}>
+      <TabsSizeContext.Provider value={size}>
+        <TabsPrimitive.Root
+          data-slot="tabs"
+          data-orientation={orientation}
+          data-size={size}
+          orientation={orientation}
+          className={cn(
+            "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+            className
+          )}
+          {...props}
+        />
+      </TabsSizeContext.Provider>
+    </TabsOrientationContext.Provider>
   )
 }
 
@@ -44,7 +49,7 @@ const tabsListVariants = cva(
     variants: {
       variant: {
         default: "bg-muted",
-        line: "gap-1 bg-transparent",
+        line: "gap-5 bg-transparent",
       },
     },
     defaultVariants: {
@@ -55,27 +60,66 @@ const tabsListVariants = cva(
 
 function TabsList({
   className,
+  children,
+  style,
   variant = "default",
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.List> &
   VariantProps<typeof tabsListVariants>) {
   // O size vem do <Tabs> (contexto) — a altura mora aqui, na list.
   const size = React.useContext(TabsSizeContext)
+  const orientation = React.useContext(TabsOrientationContext)
+  const normalizedVariant = variant ?? "default"
+  const hasHorizontalLine = normalizedVariant === "line" && orientation === "horizontal"
   return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      data-size={size}
-      className={cn(tabsListVariants({ variant }), controlHeight[size], className)}
-      {...props}
-    />
+    <TabsListVariantContext.Provider value={normalizedVariant}>
+      <TabsPrimitive.List
+        data-slot="tabs-list"
+        data-variant={normalizedVariant}
+        data-size={size}
+        className={cn(tabsListVariants({ variant: normalizedVariant }), controlHeight[size], className)}
+        style={{
+          ...(hasHorizontalLine
+            ? { position: "relative", width: "100%", height: "auto", justifyContent: "flex-start" }
+            : {}),
+          ...style,
+        }}
+        {...props}
+      >
+        {hasHorizontalLine && (
+          <span
+            aria-hidden="true"
+            data-slot="tabs-line"
+            style={{
+              position: "absolute",
+              insetInline: "calc(var(--opus-inline-gutter, 0rem) * -1)",
+              bottom: 0,
+              borderBottomWidth: "0.0625rem",
+              borderBottomStyle: "solid",
+              borderBottomColor: "var(--border)",
+              pointerEvents: "none",
+            }}
+          />
+        )}
+        {children}
+      </TabsPrimitive.List>
+    </TabsListVariantContext.Provider>
   )
 }
 
 function TabsTrigger({
   className,
+  style,
+  icon,
+  children,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+  /** Ícone decorativo antes do rótulo. Em uma aba sem texto, declare também `aria-label`. */
+  icon?: React.ReactNode
+}) {
+  const variant = React.useContext(TabsListVariantContext)
+  const orientation = React.useContext(TabsOrientationContext)
+  const hasHorizontalLine = variant === "line" && orientation === "horizontal"
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
@@ -85,10 +129,23 @@ function TabsTrigger({
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        hasHorizontalLine && "px-0 py-3",
         className
       )}
+      style={{ ...(hasHorizontalLine ? { flex: "none", height: "auto" } : {}), ...style }}
       {...props}
-    />
+    >
+      {icon !== undefined && (
+        <span
+          data-slot="tabs-trigger-icon"
+          aria-hidden="true"
+          className="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4"
+        >
+          {icon}
+        </span>
+      )}
+      {children}
+    </TabsPrimitive.Trigger>
   )
 }
 

package/src/ui/components/primitives/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-muted/30 px-3 py-2 text-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
         className
       )}
       {...props}

package/src/ui/components/primitives/toggle-group.tsx

@@ -18,6 +18,12 @@ const ToggleGroupContext = React.createContext<
   shape: "default",
 })
 
+type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants> & {
+    'data-slot'?: string
+    'data-state'?: string
+  }
+
 function ToggleGroup({
   className,
   variant,
@@ -58,9 +64,10 @@ function ToggleGroupItem({
   variant,
   size,
   shape,
+  'data-slot': _composedSlot,
+  'data-state': _composedState,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
+}: ToggleGroupItemProps) {
   const context = React.useContext(ToggleGroupContext)
 
   return (

package/src/ui/docs/content/action-form.md

@@ -48,6 +48,13 @@ invalidação continuam sob responsabilidade de `ActionForm`.
 </DocBrowserActionProvider>
 ```
 
+## Formulário modal
+
+`ActionFormDialog` acrescenta a moldura, o corpo rolável e o footer ao formulário. Por padrão, as
+ações ficam alinhadas no fim da faixa e preservam a largura do conteúdo; `Cancelar` usa `ghost`.
+Use `footerDistribution="equal"` somente quando as duas decisões precisarem do mesmo peso visual.
+Nesse caso, o cancelamento muda para `outline`, salvo escolha explícita em `cancelVariant`.
+
 ## Pré-requisitos
 
 Monte os providers de consulta e execução uma vez na raiz do aplicativo:
@@ -88,6 +95,18 @@ ciclo de vida que o pattern não cobre; validação e execução continuam iguai
 | `options`   | `SelectOption[]` | Opções por id de runtime — sobrepõe o fieldOptions do form e o z.enum.         |
 | `className` | `string`         | Classes do invólucro (ex.: `col-span-2` em uma grid).                          |
 
+## Propriedades de ActionFormDialog
+
+Além das propriedades de `ActionForm`, o wrapper modal aceita:
+
+| Propriedade | Tipo | Padrão | Descrição |
+|---|---|---|---|
+| `open` | `boolean` | | Estado visível do diálogo. |
+| `onOpenChange` | `(open: boolean) => void` | | Recebe abertura e fechamento. |
+| `title` | `string` | | Nomeia a tarefa modal. |
+| `intro` | `ReactNode` | | Contexto relevante apresentado antes dos campos. |
+| `footerDistribution` | `'content' \| 'equal'` | `'content'` | Mantém a largura das ações pelo conteúdo ou divide a faixa igualmente. |
+
 ## Ajuda na label
 
 `FieldSpec.help` aparece como um ícone junto à label, com o texto num tooltip. Escreva ali o

package/src/ui/docs/content/action-list-dialog.md

@@ -75,4 +75,4 @@ corpo do modal.
 | `empty`                                    | `(items) => boolean`                | `items.length === 0` | Sobrepõe o vazio derivado.                                                                        |
 | `loading`                                  | `boolean`                           |                      | Carga extra agregada à do fetch (query irmã).                                                     |
 | `emptyMessage / errorMessage / retryLabel` | `string`                            |                      | Textos dos estados; `retryLabel` nomeia a ação somente com ícone e seu tooltip.                   |
-| `className`                                | `string`                            | `sm:max-w-3xl`       | Largura do DialogContent.                                                                         |
+| `className`                                | `string`                            | `max-w-3xl`          | Largura do DialogContent.                                                                         |

package/src/ui/docs/content/action-list.md

@@ -88,6 +88,10 @@ Renderer customizado reutiliza `EmptyValue`.
 
 Use `cells` somente quando uma coluna precisar de apresentação própria, como link, composição ou
 ação. A chave corresponde à `key` da coluna. Valores de dicionário não precisam desse override.
+O valor principal preserva o `text-sm` e o foreground da tabela; use
+`text-xs text-muted-foreground` apenas em metadado subordinado a outro valor na mesma célula.
+Cabeçalhos e `EmptyValue` continuam muted. O fato de uma coluna ser técnica, temporal ou menos
+destacada não reduz nem atenua seu valor principal.
 
 ```tsx preview col
 render(
@@ -291,6 +295,7 @@ render(
 | `state`         | `ActionFilterState`                                  |         | Estado atual da barra.                                                             |
 | `onStateChange` | `(next) => void`                                     |         | Recebe o estado completo depois de cada alteração.                                 |
 | `filterOptions` | `Record<string, SelectOption[]>`                     |         | Fornece opções de runtime para filtros select e lookup.                            |
+| `advancedFilters` | `{ columns?: 1 \| 2 \| 3 }`                       | `{ columns: 1 }` | Define as colunas do diálogo de filtros avançados; o Opus deriva a largura correspondente. |
 | `onRefresh`     | `() => Promise<void> \| void`                        |         | Exibe a ação de recarregar e executa a consulta do consumidor.                     |
 | `refreshing`    | `boolean`                                            | `false` | Desabilita e anima a ação de recarregar durante a consulta.                        |
 | `controls`      | `ReactNode`                                          |         | Controles auxiliares agrupados com recarregar em um `ButtonGroup` espaçado.        |
@@ -301,7 +306,7 @@ render(
 | Chave     | O que declara                                                                                                                                                                                                                                      |
 | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `columns` | `{ key, label, type?, sortable?, fit?, hidden?, dateFormat?, dictionary?, empty? }` — a tabela. `hidden` fica fora (base do futuro column picker); `dictionary` nomeia o dicionário do provider; `empty` dá o significado da ausência.             |
-| `filters` | `{ [nome]: { label, type, options?, multiple?, advanced?, depends?, … } }` — a toolbar. `advanced` vai para o modal; `depends` desabilita/cascateia; options `kind: 'lookup'` busca em uma action. Valor aplicado entra no input com o mesmo nome. |
+| `filters` | `{ [nome]: { label, type, options?, multiple?, placement?, section?, depends?, … } }` — a toolbar. `placement` classifica o controle como `inline`, `advanced` ou `external`; filtros avançados com `section` são agrupados no diálogo; `external` mantém estado e input, mas delega a apresentação ao consumidor. `depends` desabilita/cascateia; options `kind: 'lookup'` busca em uma action. Valor aplicado entra no input com o mesmo nome. |
 | `text`    | `{ fields }` — liga a busca; convenção: param `q` no input. Com período/filtros no contrato ela fica à direita; sendo a ÚNICA forma de recorte, abre a linha.                                                                                      |
 | `sort`    | `{ fields, default }` — ordenação inicial; header ordenável escreve `sort: 'chave:dir'`.                                                                                                                                                           |
 | `periods` | `{ value, label }[]` — o controle de período (presets + Personalizado com calendário); materializa em `from`/`to` no input.                                                                                                                        |
@@ -322,6 +327,7 @@ chamar a action.
 | `input`                 | `TInput`                              |                                | O ESCOPO BASE (ex.: { workspaceId }) — a toolbar soma por cima, nunca sobrescreve.                                                                                           |
 | `cells`                 | `Record<string, (item) => ReactNode>` |                                | Células custom por cima das colunas do contrato (chave = column.key).                                                                                                        |
 | `filterOptions`         | `Record<string, SelectOption[]>`      |                                | Opções de runtime para os filtros select/lookup (chave = nome do filtro).                                                                                                    |
+| `advancedFilters`       | `{ columns?: 1 \| 2 \| 3 }`         | `{ columns: 1 }`               | Define as colunas dos grupos de filtros avançados; o Opus deriva a largura correspondente do diálogo.                                                                       |
 | `columns`               | `ActionListColumn<TItem>[]`           |                                | Tabela EXPLÍCITA — sobrepõe as colunas do contrato (escape hatch).                                                                                                           |
 | `children`              | `(items, refetch) => ReactNode`       |                                | Modo composição: layout livre; a toolbar segue. Tem precedência sobre columns.                                                                                               |
 | `batch`                 | `ActionListBatchAction[]`             |                                | Ações em lote: `{ label, can?, run, confirm?, destructive? }` — liga a multi-seleção.                                                                                        |

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

@@ -29,6 +29,8 @@ Use a forma curta quando o aviso tiver ícone, título e uma frase. Declare `tit
 
 Título é opcional — o aviso de uma linha dispensa. O contexto continua visível por superfície,
 borda e texto; o conteúdo comunica o significado sem depender somente da cor.
+O Alert usa o corpo produtivo e `0.75rem` de padding; não reduza cada uso localmente para obter a
+densidade comum.
 
 ```tsx preview col
 <Alert description="Nenhuma sessão aberta neste repositório." />

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

@@ -2,7 +2,8 @@
 
 `context` declara a hierarquia ou o risco da ação; `variant` escolhe o tratamento visual. Use
 `primary` para a ação principal, `neutral` para ações de apoio e `danger` quando a ação tiver uma
-consequência perigosa.
+consequência perigosa. A variante `outline` mantém o fundo transparente em repouso e usa uma
+superfície apenas no hover, preservando o fundo da região onde o botão está inserido.
 
 ```tsx preview
 <Button>Criar workspace</Button>

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

@@ -33,6 +33,16 @@ Quando o produto precisa de outra densidade, declare essa escolha no CSS do app.
 `html { font-size: 93.75%; }` conserva a proporção que uma raiz de 15 teria sobre a base usual
 de 16, sem transformar esse valor em uma regra da biblioteca.
 
+## Layout desktop
+
+O Opus oferece suporte a partir de `64rem` e não muda a composição conforme a largura da viewport.
+Classes de tamanho, como `size="sm"`, escolhem a densidade do componente; não representam
+breakpoints. Overflow e limites contra a janela continuam protegendo o conteúdo.
+
+Não adicione uma adaptação isolada por viewport ou container em `className`. Uma futura
+responsividade precisa começar pelo shell e formar um contrato comum para navegação, splits,
+tabelas e componentes.
+
 ## 2 · className em tudo
 
 > Todo componente termina em `cn(base, className)` com tailwind-merge: o utilitário do consumidor
@@ -41,7 +51,7 @@ de 16, sem transformar esse valor em uma regra da biblioteca.
 ```tsx
 <Button className="w-full">Continuar</Button>
 <Card className="max-w-sm" />
-<DialogContent className="sm:max-w-2xl" />
+<DialogContent className="max-w-2xl" />
 ```
 
 ## 3 · Recomposição estrutural

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

@@ -15,7 +15,7 @@ validação, use `Field`.
     }
   />
   <DetailField
-    className="sm:col-span-2"
+    className="col-span-2"
     label="E-mail"
     value="joao.silva@example.com"
     icon={<Mail />}
@@ -25,8 +25,9 @@ validação, use `Field`.
 
 ## Valor ausente
 
-`null`, `undefined`, string vazia ou só com espaços mostram “Não informado”; `empty` troca o
-significado no domínio. `0` e `false` seguem como valores. Ver `EmptyValue`.
+`null`, `undefined`, string vazia ou só com espaços mostram um travessão; a leitura assistiva
+recebe “Não informado”. Uma string em `empty` troca esse significado no domínio, enquanto um nó
+React substitui a apresentação. `0` e `false` seguem como valores. Ver `EmptyValue`.
 
 ```tsx preview col
 <DetailGroup columns={2}>
@@ -40,8 +41,8 @@ significado no domínio. `0` e `false` seguem como valores. Ver `EmptyValue`.
 `variant="framed"` adiciona a superfície e a borda externa. `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`. Quando a superfície exigir
-mais espaço para os rótulos, ajuste a variável no grupo, por exemplo com
+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
 `className="[--detail-label-width:9rem]"`.
 
 ```tsx preview col
@@ -49,7 +50,7 @@ mais espaço para os rótulos, ajuste a variável no grupo, por exemplo com
   <DetailField label="Documento" value="Sem documento" />
   <DetailField label="Fontes" value="NBS e Followize" />
   <DetailField
-    className="sm:col-span-2"
+    className="col-span-2"
     label="E-mail"
     value="cliente@example.com"
     icon={<Mail />}
@@ -63,7 +64,7 @@ mais espaço para os rótulos, ajuste a variável no grupo, por exemplo com
 |---|---|---|---|
 | `variant` | `'plain' \| 'framed'` | `'plain'` | `framed` aplica a superfície e a moldura canônicas ao conjunto. |
 | `dividers` | `boolean` | `false` | Hairlines somente entre os campos, sem exigir moldura externa. |
-| `columns` | `1 \| 2 \| 3 \| 4 \| 'auto'` | `1` | Colunas responsivas ou distribuição automática por largura mínima. |
+| `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. |
 
 ## Propriedades de DetailField
@@ -73,4 +74,4 @@ mais espaço para os rótulos, ajuste a variável no grupo, por exemplo com
 | `label` | `ReactNode` | | A chave do par. |
 | `value` | `ReactNode` | | 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”` | O que a ausência significa neste campo: um rótulo ou um nó próprio. |
+| `empty` | `ReactNode` | `“Não informado”` | Uma string dá significado acessível ao travessão; um nó próprio substitui a apresentação. |

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

@@ -16,7 +16,8 @@ Para conteúdo ancorado e não modal, use `Popover`. Para uma lista de ações,
 
 `DialogContent` delimita a superfície. `DialogHeader`, `DialogBody` e `DialogFooter` organizam
 título, conteúdo rolável e ações com o espaçamento da família. A superfície usa o fundo base,
-borda semântica, raio `xl` e elevação para permanecer distinta da página.
+borda transparente no tema claro, borda sutil no escuro, raio `xl` e elevação para permanecer
+distinta da página.
 
 ```tsx preview
 <Dialog>
@@ -32,9 +33,9 @@ borda semântica, raio `xl` e elevação para permanecer distinta da página.
       <Input id="workspace-name" placeholder="Ex.: Empresa X" />
     </DialogBody>
     <DialogFooter>
-      <ButtonGroup mode="spaced" distribution="equal">
+      <ButtonGroup mode="spaced">
         <DialogClose asChild>
-          <Button variant="outline">Cancelar</Button>
+          <Button variant="ghost">Cancelar</Button>
         </DialogClose>
         <Button>Criar workspace</Button>
       </ButtonGroup>
@@ -44,8 +45,12 @@ borda semântica, raio `xl` e elevação para permanecer distinta da página.
 ```
 
 O corpo cresce até o limite da janela e passa a rolar; cabeçalho e rodapé permanecem visíveis.
-O `ButtonGroup` divide o espaço entre decisões equivalentes no rodapé. O `DialogFooter` organiza
-a faixa, mas não decide a distribuição nem a aparência dos botões.
+O backdrop escurece a página sem aplicar desfoque.
+O fechamento do cabeçalho usa uma ação circular neutra e sutil. `closeSize` escolhe entre `xs` e
+`sm`; o padrão é `sm`.
+O `ButtonGroup` preserva a largura natural das ações por padrão. Use `distribution="equal"`
+somente para decisões deliberadamente equivalentes. O `DialogFooter` organiza a faixa, mas não
+decide a distribuição nem a aparência dos botões.
 `DialogClose` encerra o modal sem exigir estado controlado. Use `open` e `onOpenChange` quando outra
 parte da interface também precisar controlar a abertura.
 
@@ -273,6 +278,8 @@ botão. O texto informa o efeito real, como `Excluir`, `Revogar acesso` ou `Ence
 | Propriedade       | Tipo        | Padrão | Descrição                                                                                                 |
 | ----------------- | ----------- | ------ | --------------------------------------------------------------------------------------------------------- |
 | `showCloseButton` | `boolean`   | `true` | No modo padrão, inclui a ação de fechamento no header; o modo de alerta exige uma resposta identificável. |
+| `closeDisabled`   | `boolean`   | `false` | Mantém a ação visível e impede o fechamento enquanto a tarefa está bloqueada.                            |
+| `closeSize`       | `"xs" \| "sm"` | `"sm"` | Define o tamanho da ação circular de fechar.                                                  |
 | `className`       | `string`    |        | Ajusta a superfície.                                                                                      |
 | `children`        | `ReactNode` |        | Cabeçalho, corpo, rodapé ou conteúdo próprio.                                                             |
 

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

@@ -26,7 +26,8 @@ entra pela direita e pode ser fechado por Esc, pelo overlay ou pelo botão de fe
 `side` aceita `top`, `right`, `bottom` e `left`. `DrawerFooter` mantém as ações no rodapé;
 `DrawerClose` fecha o painel sem exigir controle manual de estado. Como no `Dialog`, o cabeçalho
 recebe um divisor inferior e o rodapé usa um divisor superior. O corpo preserva o mesmo alinhamento
-horizontal entre título, conteúdo e ações.
+horizontal entre título, conteúdo e ações. O fechamento do cabeçalho usa uma ação circular neutra
+e sutil; `closeSize` escolhe entre `xs` e `sm`, com `sm` como padrão.
 
 ```tsx preview
 <Drawer>
@@ -42,9 +43,9 @@ horizontal entre título, conteúdo e ações.
       <Input id="ws-nome" defaultValue="Empresa X" />
     </DrawerBody>
     <DrawerFooter>
-      <ButtonGroup mode="spaced" distribution="equal">
+      <ButtonGroup mode="spaced">
         <DrawerClose asChild>
-          <Button variant="outline">Cancelar</Button>
+          <Button variant="ghost">Cancelar</Button>
         </DrawerClose>
         <Button>Salvar</Button>
       </ButtonGroup>
@@ -66,6 +67,8 @@ horizontal entre título, conteúdo e ações.
 | ----------------- | ---------------------------------------- | --------- | ------------------------------------------------------------------------------------------ |
 | `side`            | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Borda de onde o painel aparece.                                                            |
 | `showCloseButton` | `boolean`                                | `true`    | Inclui a ação de fechamento no header. Desative quando o painel exigir uma ação explícita. |
+| `closeDisabled`   | `boolean`                                | `false`   | Mantém a ação visível e impede fechar enquanto o painel está bloqueado.                    |
+| `closeSize`       | `"xs" \| "sm"`                         | `"sm"`   | Define o tamanho da ação circular de fechar.                                               |
 
 ## Propriedades de DrawerBody
 

package/src/ui/docs/content/empty-value.md

@@ -1,7 +1,7 @@
-Valor ausente tem uma representação padrão. Em célula compacta de tabela aparece o travessão,
-e a leitura assistiva recebe “Não informado”; em texto corrido, como no `DetailField`, aparece o
-próprio rótulo. As colunas de `ActionList` e o `DetailField` já fazem isso sozinhos; um renderer
-customizado reutiliza a primitiva em vez de repetir a condicional.
+Valor ausente tem uma representação padrão. Nas células de tabela e nos pares de `DetailField`
+aparece o travessão, enquanto a leitura assistiva recebe “Não informado”. As colunas de
+`ActionList` e o `DetailField` já fazem isso sozinhos; um renderer customizado reutiliza a
+primitiva em vez de repetir a condicional.
 
 ```tsx preview
 <div className="flex items-center gap-6 text-sm">

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

@@ -55,7 +55,7 @@ descrição; `FieldTitle` nomeia o campo quando o texto não puder ser um `<labe
 
 | Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `orientation` | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção do campo; `responsive` se torna horizontal a partir do container médio. |
+| `orientation` | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção fixa do campo. `responsive` permanece como alias compatível de `horizontal`. |
 
 ## Propriedades de FieldLegend
 

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

@@ -3,6 +3,8 @@
 A composição completa usa `ItemMedia` à esquerda, `ItemHeader` (`ItemTitle` +
 `ItemDescription`) no meio e `ItemActions` à direita. Ícone e imagem mantêm uma moldura quadrada
 alinhada ao topo, mesmo quando a descrição ocupa mais linhas. `variant="outline"` desenha a borda.
+O tamanho padrão usa corpo produtivo, `0.75rem` de padding e `0.75rem` entre regiões. `size="sm"`
+mantém o alinhamento horizontal e reduz o padding vertical para `0.5rem` em listas densas.
 
 ```tsx preview col
 <Item variant="outline">

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

@@ -185,7 +185,7 @@ estado na própria seção com `DataState`, `ActionView`, `ActionList` ou `Alert
 | Propriedade | Tipo        | Padrão      | Descrição                                                                                       |
 | ----------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------- |
 | `title`     | `ReactNode` |             | O h1 da página.                                                                                 |
-| `actions`   | `ReactNode` |             | Ações contextuais no extremo oposto do cabeçalho; em telas estreitas, ficam abaixo do contexto. |
+| `actions`   | `ReactNode` |             | Ações contextuais no extremo oposto do cabeçalho. |
 | `className` | `string`    | `max-w-7xl` | Classes do container para substituir o teto padrão de `80rem`.                                  |
 | `children`  | `ReactNode` |             | O body da página — espaçamento e diagramação são seus.                                          |
 

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

@@ -5,8 +5,8 @@ cabeçalho, body e rodapé.
 Dialog e Drawer mantêm no cabeçalho a ordem horizontal de navegação ou retorno, título e ações.
 O retorno aparece em uma surface modal somente
 quando ela foi aberta sobre outro Dialog ou Drawer; a Page ao fundo sustenta o modal, mas não cria
-uma etapa de navegação. Formulários modais encerram o footer dividido igualmente entre `Cancelar`
-em `outline` e a ação principal.
+uma etapa de navegação. Formulários modais dimensionam o footer pelo conteúdo, com `Cancelar` em
+`ghost` e a ação principal sólida.
 Em Page hospedada por `PageShell`, a barra concentra navegação e ações globais. Uma Presentation
 de listagem materializa título e comandos de header no `Content` que envolve o `ActionList`; assim
 a criação permanece próxima da coleção. Esses comandos usam `default`. Nas demais Presentations, o

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

@@ -4,12 +4,15 @@ Use `Tabs` para alternar painéis relacionados no mesmo contexto. O `value` de c
 corresponde ao `TabsContent` que ele abre. `defaultValue` define a aba inicial no modo não
 controlado.
 
+`icon` posiciona um ícone decorativo antes do rótulo e normaliza SVGs para `1rem`. Quando a aba
+mostrar somente o ícone, declare `aria-label` para preservar seu nome acessível.
+
 ```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>
+    <TabsTrigger value="overview" icon={<LayoutDashboard />}>Visão geral</TabsTrigger>
+    <TabsTrigger value="sessions" icon={<History />}>Sessões</TabsTrigger>
+    <TabsTrigger value="skills" icon={<Settings />}>Skills</TabsTrigger>
   </TabsList>
   <TabsContent value="overview">
     <p className="text-sm text-muted-foreground">Resumo do workspace Empresa X.</p>
@@ -25,8 +28,14 @@ controlado.
 
 ## Variante line
 
-Use `variant="line"` em `TabsList` quando a lista precisar se integrar a uma borda, como em um
-cabeçalho. A aba ativa é marcada por uma linha em vez de uma superfície preenchida.
+Use `variant="line"` em `TabsList` quando a navegação precisar de uma linha-base, como em um
+cabeçalho. Na orientação horizontal, a lista ocupa toda a largura disponível e a aba ativa é
+marcada sobre essa linha, em vez de usar uma superfície preenchida. Dentro de `DrawerBody`, a
+linha atravessa o gutter até as bordas do drawer sem deslocar os rótulos. O mesmo comportamento
+vale para `DialogBody`.
+Os itens removem o padding horizontal, usam `0.75rem` de padding vertical e preservam `1.25rem`
+de espaço entre si. Nessa orientação, a altura é definida pelo conteúdo para que o padding
+vertical amplie a área interativa.
 
 ```tsx preview col
 <Tabs defaultValue="agents">
@@ -99,10 +108,11 @@ lateral do gatilho.
 
 | Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
-| `variant` | `'default' \| 'line'` | `'default'` | `default` usa uma superfície preenchida; `line` marca a aba ativa junto à borda. |
+| `variant` | `'default' \| 'line'` | `'default'` | `default` usa uma superfície preenchida; `line` cria uma linha-base horizontal de largura total e marca nela a aba ativa. |
 
 ## Propriedades de TabsTrigger e TabsContent
 
 | Propriedade | Tipo | Padrão | Descrição |
 |---|---|---|---|
 | `value` | `string` | | Identificador que associa o gatilho ao painel correspondente. |
+| `icon` | `ReactNode` | | Ícone decorativo antes do rótulo; SVGs usam `1rem`. |

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

@@ -3,7 +3,8 @@
 Use `toast` para informar o resultado temporário de uma ação sem interromper o fluxo. Cada tipo usa o
 ícone correspondente do Opus. Escreva o título como rótulo, sem ponto final, e a descrição como uma
 frase. A moldura do ícone permanece quadrada e alinhada à primeira linha mesmo quando a descrição
-ocupa várias linhas.
+ocupa várias linhas. Corpo e padding seguem os mesmos `0.875rem` e `0.75rem` do Alert; os defaults
+internos do Sonner não definem a densidade da casa.
 
 ```tsx preview
 <Button variant="outline" onClick={() => toast.success('Workspace criado')}>Sucesso</Button>