@softize/opus 18.0.0 → 18.1.0

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>

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

@@ -53,7 +53,7 @@ família oferece sólido, foreground, superfície sutil, ênfase e borda. Use as
 ```tsx preview
 const CONTEXTS = ['neutral', 'primary', 'info', 'success', 'warning', 'danger']
 render(
-  <div className="grid w-full gap-2 sm:grid-cols-2 lg:grid-cols-3">
+  <div className="grid w-full grid-cols-3 gap-2">
     {CONTEXTS.map((context) => (
       <div
         key={context}
@@ -79,7 +79,7 @@ render(
 ```tsx preview
 const LINES = [
   ['border', 'Bordas de contêineres (cards, tabelas, separadores).'],
-  ['input', 'Borda de campos de formulário.'],
+  ['input', 'Borda e fundo sutil de campos de formulário.'],
   ['ring', 'O anel de foco (focus-visible).'],
 ]
 render(
@@ -135,6 +135,49 @@ render(
 > aplicação continuam responsáveis pela densidade. Uma aplicação pode ajustar `font-size` em
 > `html`; texto, espaçamento, radius, foco e elevação acompanham a mesma decisão.
 
+## Tipografia produtiva
+
+Interfaces operacionais precisam acomodar controles, dados e ações sem transformar o corpo comum
+em texto secundário. Use `text-sm` (`0.875rem`) como corpo produtivo: descrições curtas, valores,
+rótulos e texto de componentes. Reserve `text-base` (`1rem`) para leitura mais confortável, como
+prosa longa, conteúdo editorial ou uma ênfase que dependa de tamanho.
+
+O tema não reduz o texto do `body`. Componentes e regiões produtivas declaram `text-sm`
+explicitamente em uma raiz controlada, enquanto o texto geral do documento permanece em `1rem`.
+Assim, escolher o corpo da interface não recalibra tipografia, espaçamento ou dimensões globais.
+
+`base` nomeia o degrau de `1rem` da escala técnica; não significa que todo produto precisa usá-lo
+como corpo predominante. Preserve a fonte raiz usual do documento para que `1rem` continue sendo a
+referência do navegador e para que espaçamentos e controles em `rem` não mudem quando a intenção for
+somente escolher um papel tipográfico.
+
+A herança continua fazendo parte da composição. Declare `text-sm` na raiz de um componente ou de
+uma região produtiva e omita a classe apenas nos filhos que herdam dessa raiz controlada. Um
+elemento também declara `text-sm` quando precisa restaurar o corpo produtivo dentro de um contexto
+com outro tamanho. Não crie um alias como `text-body`: ele esconderia o mesmo degrau sem eliminar
+a necessidade de declarar o papel tipográfico.
+
+```tsx preview
+render(
+  <div className="space-y-3 text-sm">
+    <p>Corpo produtivo para a interface.</p>
+    <p className="text-base leading-relaxed">
+      Corpo ampliado para um trecho que pede leitura mais confortável.
+    </p>
+    <div className="text-xs text-muted-foreground">
+      Metadado compacto.
+      <p className="mt-1 text-sm text-foreground">
+        Corpo produtivo restaurado dentro do contexto compacto.
+      </p>
+    </div>
+  </div>,
+)
+```
+
+Alterar `font-size` em `html` permanece válido quando a aplicação quer recalibrar **toda** a
+interface. Essa decisão escala tipografia, espaços, controles, radius e elevação em conjunto; não é
+o mecanismo para fazer `text-sm` se chamar `text-base`.
+
 ## Radius
 
 > A escala mapeada no `@theme inline` preserva o sentido pré-v4 dos utilitários `rounded-*`

package/src/ui/react.tsx

@@ -388,6 +388,7 @@ export {
 export type {
   ActionFilterBarProps,
   ActionFilterState,
+  AdvancedFiltersLayout,
   ActionListProps,
   ActionListColumn,
   ActionListState,

package/src/ui/theme.css

@@ -333,6 +333,9 @@
  * do Sonner, independentemente da ordem em que a biblioteca injeta seus estilos. */
 .opus-toast {
   gap: 0.75rem;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .opus-toast .opus-toast-icon {