@softize/opus 23.0.0 → 24.0.0

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

@@ -18,9 +18,11 @@ cantos, em qualquer valor de `side`.
     <DrawerHeader>
       <DrawerTitle>ABC-1D23</DrawerTitle>
     </DrawerHeader>
-    <DrawerBody className="space-y-1 text-sm text-muted-foreground">
-      <p>Corolla XEi 2022 · 38.400 km</p>
-      <p>Última revisão em 12 de maio.</p>
+    <DrawerBody className="text-sm text-muted-foreground">
+      <div className="space-y-1">
+        <p>Corolla XEi 2022 · 38.400 km</p>
+        <p>Última revisão em 12 de maio.</p>
+      </div>
     </DrawerBody>
   </DrawerContent>
 </Drawer>
@@ -42,9 +44,11 @@ neutra e sutil; `closeSize` escolhe entre `xs` e `sm`, com `sm` como padrão.
     <DrawerHeader>
       <DrawerTitle>Editar veículo</DrawerTitle>
     </DrawerHeader>
-    <DrawerBody className="space-y-2">
-      <Label htmlFor="vehicle-owner">Responsável</Label>
-      <Input id="vehicle-owner" defaultValue="Marina Alves" />
+    <DrawerBody>
+      <div className="space-y-2">
+        <Label htmlFor="vehicle-owner">Responsável</Label>
+        <Input id="vehicle-owner" defaultValue="Marina Alves" />
+      </div>
     </DrawerBody>
     <DrawerFooter>
       <ButtonGroup mode="spaced">
@@ -102,9 +106,9 @@ título ocupa a folga, as ações vão para o extremo oposto e o botão de fecha
 nó que não seja um desses slots interrompe a renderização com um erro; contexto e conteúdo
 pertencem ao `DrawerBody`.
 
-`DrawerMedia` é a moldura de ícone do Opus — o mesmo [`IconTile`](/ui/icon-tile) —, útil para
-identificar o tipo do recurso aberto. `DrawerNavigation` carrega o retorno de um fluxo encadeado,
-em que o painel permanece aberto e troca de etapa.
+`DrawerMedia` reserva o espaço que identifica o tipo do recurso aberto, sem acrescentar moldura.
+Componha [`IconTile`](/ui/icon-tile) quando ela ajudar na hierarquia. `DrawerNavigation` carrega o
+retorno de um fluxo encadeado, em que o painel permanece aberto e troca de etapa.
 
 ```tsx preview
 <Drawer>
@@ -118,8 +122,10 @@ em que o painel permanece aberto e troca de etapa.
           <ArrowLeft />
         </Button>
       </DrawerNavigation>
-      <DrawerMedia context="primary">
-        <CarFront />
+      <DrawerMedia>
+        <IconTile size="sm" context="primary">
+          <CarFront />
+        </IconTile>
       </DrawerMedia>
       <DrawerTitle>ABC-1D23</DrawerTitle>
       <DrawerActions>
@@ -210,13 +216,10 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 
 ## 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                                                               |
+| ----------- | ----------- | ------ | ----------------------------------------------------------------------- |
+| `className` | `string`    |        | Ajusta o alinhamento do slot.                                           |
+| `children`  | `ReactNode` |        | `IconTile`, marca, imagem ou glifo. O slot não acrescenta apresentação. |
 
 ## Propriedades de DrawerNavigation
 
@@ -244,7 +247,14 @@ de continuar, use [`Dialog mode="alert"`](/ui/dialog), que não fecha pelo cliqu
 
 `DrawerBody` aceita os atributos de `HTMLDivElement` e ocupa a região flexível e rolável entre
 `DrawerHeader` e `DrawerFooter`. O cabeçalho nomeia o painel; contexto relevante entra no começo
-do corpo como texto ou `Alert`.
+do corpo como texto ou `Alert`. Seus filhos diretos recebem o ritmo estrutural; use `flush` quando
+o conteúdo controlar o próprio inset e um wrapper filho para relações internas mais compactas.
+
+| Propriedade | Tipo        | Padrão  | Descrição                                                  |
+| ----------- | ----------- | ------- | ---------------------------------------------------------- |
+| `flush`     | `boolean`   | `false` | Remove o inset para conteúdo que controla o próprio recuo. |
+| `className` | `string`    |         | Ajusta ocupação, overflow, alinhamento ou tipografia.      |
+| `children`  | `ReactNode` |         | Blocos principais do painel.                               |
 
 ## Propriedades de DrawerFooter
 
@@ -252,3 +262,37 @@ do corpo como texto ou `Alert`.
 | ----------- | ----------- | ------ | ------------------------------------------------------------- |
 | `className` | `string`    |        | Ajusta a faixa do rodapé, inclusive a distribuição das ações. |
 | `children`  | `ReactNode` |        | Ações persistentes, normalmente dentro de um `ButtonGroup`.   |
+
+## Intro separada do chrome
+
+Quando o header contém apenas o recolhimento, ações globais e o fechamento, use `DrawerIntro`
+como primeiro bloco de `DrawerBody`. Ele exige um `DrawerTitle` e aceita `DrawerIntroActions`.
+Assim o título acompanha o conteúdo rolável enquanto o chrome permanece estável.
+
+```tsx
+<Drawer>
+  <DrawerContent showCloseButton={false}>
+    <DrawerHeader>
+      <DrawerNavigation>
+        <DrawerClose asChild>
+          <Button>Recolher</Button>
+        </DrawerClose>
+      </DrawerNavigation>
+      <DrawerActions>
+        <Button variant="ghost">Conversa</Button>
+      </DrawerActions>
+    </DrawerHeader>
+    <DrawerBody>
+      <DrawerIntro>
+        <DrawerTitle>Editar evento</DrawerTitle>
+        <DrawerIntroActions>
+          <Button variant="outline">Revisar</Button>
+        </DrawerIntroActions>
+      </DrawerIntro>
+      <form>…</form>
+    </DrawerBody>
+  </DrawerContent>
+</Drawer>
+```
+
+No formato compacto, mantenha `DrawerTitle` e `DrawerActions` no próprio `DrawerHeader`.

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

@@ -37,14 +37,14 @@ vincula ao controle, ligue-o ao controle por `aria-labelledby` para manter o nom
 
 ## Conjunto com legenda e erro
 
-Use [`Content`](/ui/content) com `as="fieldset"` para nomear um conjunto de campos relacionados. O título vira a legenda
+Use [`Surface`](/ui/surface) com `as="fieldset"` para nomear um conjunto de campos relacionados. O título vira a legenda
 nativa, enquanto `FieldGroup` define o espaçamento e `FieldSeparator` marca uma divisão.
 `FieldError` aparece somente quando existe mensagem de erro. Declare `data-invalid="true"` no
 `Field` para que o rótulo acompanhe o contexto de erro; `aria-invalid` marca apenas o controle. O
 `ActionForm` define os dois atributos sozinho.
 
 ```tsx preview col md
-<Content as="fieldset" title="Novo agente">
+<Surface as="fieldset" title="Novo agente">
   <FieldGroup>
     <Field data-invalid="true">
       <FieldLabel htmlFor="agent-name">Nome</FieldLabel>
@@ -69,7 +69,7 @@ nativa, enquanto `FieldGroup` define o espaçamento e `FieldSeparator` marca uma
       />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Campo desabilitado
@@ -86,15 +86,14 @@ declare também `data-disabled="true"` no `Field`: `FieldLabel` e `FieldTitle` e
 
 ## Conjunto com moldura
 
-Use a moldura para distinguir grupos vizinhos que continuem pertencendo ao mesmo formulário. O
-título permanece uma legenda semântica. A moldura é contínua por padrão; quando o agrupamento pedir
-o acabamento compacto com a legenda integrada à borda, declare `frameVariant="legend"`.
+Use a moldura para distinguir grupos vizinhos que continuem pertencendo ao mesmo formulário.
+Declare `as="fieldset"`: a `Surface` transforma o header em `legend` nativa e preserva o título
+como legenda semântica.
 
 ```tsx preview col md
-<Content
+<Surface
   as="fieldset"
   framed
-  frameVariant="legend"
   title={
     <span className="flex items-center gap-2">
       <IconTile size="xs">
@@ -110,13 +109,13 @@ o acabamento compacto com a legenda integrada à borda, declare `frameVariant="l
       <Input id="vehicle-plate" defaultValue="GBR1A03" />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Compatibilidade de FieldSet
 
 `FieldSet` e `FieldLegend` continuam disponíveis para composições existentes. Em código novo,
-prefira `Content as="fieldset"`: ele reúne legenda, corpo e moldura na mesma anatomia usada pelas
+prefira `Surface as="fieldset"`: ele reúne legenda, corpo e moldura na mesma anatomia usada pelas
 demais regiões nomeadas. A migração pode ser gradual porque os controles e o `FieldGroup` não mudam.
 
 ## Propriedades de FieldSet
@@ -127,11 +126,11 @@ demais regiões nomeadas. A migração pode ser gradual porque os controles e o
 
 ## Propriedades de Field
 
-| Propriedade    | Tipo                                         | Padrão       | Descrição                                                                                             |
-| -------------- | -------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
-| `orientation`  | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção fixa do campo. `responsive` permanece como alias compatível de `horizontal`.                  |
-| `data-invalid` | `boolean \| 'true' \| 'false'`               |              | Com `true`, aplica o contexto de erro ao campo e ao rótulo. O `ActionForm` define o atributo sozinho. |
-| `data-disabled` | `'true' \| 'false'`                         |              | Com `true`, esmaece `FieldLabel` e `FieldTitle`. Declare `disabled` também no controle. |
+| Propriedade     | Tipo                                         | Padrão       | Descrição                                                                                             |
+| --------------- | -------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
+| `orientation`   | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Direção fixa do campo. `responsive` permanece como alias compatível de `horizontal`.                  |
+| `data-invalid`  | `boolean \| 'true' \| 'false'`               |              | Com `true`, aplica o contexto de erro ao campo e ao rótulo. O `ActionForm` define o atributo sozinho. |
+| `data-disabled` | `'true' \| 'false'`                          |              | Com `true`, esmaece `FieldLabel` e `FieldTitle`. Declare `disabled` também no controle.               |
 
 ## Propriedades de FieldLegend
 

package/src/ui/docs/content/icon-tile.md

@@ -18,19 +18,20 @@ uma classe `size-*` preserva a própria medida.
 Slots genéricos de ícone, como `FieldLegend.icon`, não criam a moldura: passe o glifo quando quiser
 só o ícone e componha `IconTile` quando a moldura reforçar a hierarquia.
 
-Os slots de mídia das superfícies já são um `IconTile`: `CardMedia`, `ContentMedia`, `DialogMedia`,
-`DrawerMedia` e `PaneMedia` desenham a moldura sozinhos. Passe só o glifo e escolha `size`,
-`context` e `variant` no próprio slot. Em [`Content`](/ui/content), um `IconTile` passado em
-`media` é adotado pelo slot, que herda o que ele declara, em vez de desenhar uma moldura dentro da
-outra.
+Os slots de mídia estruturais não criam decoração. `SurfaceMedia`, `DialogMedia` e `DrawerMedia`
+reservam posição e alinhamento, mas preservam o nó recebido. Passe o glifo diretamente
+quando ele deve ficar solto; componha `IconTile` de forma explícita quando quiser moldura.
 
 ```tsx preview col md
-<Content
+<Surface
   as="fieldset"
   framed
-  frameVariant="legend"
   title="Veículo"
-  media={<CarFront aria-hidden="true" />}
+  media={
+    <IconTile size="xs">
+      <CarFront aria-hidden="true" />
+    </IconTile>
+  }
 >
   <FieldGroup>
     <Field>
@@ -38,7 +39,7 @@ outra.
       <Input id="icon-tile-plate" />
     </Field>
   </FieldGroup>
-</Content>
+</Surface>
 ```
 
 ## Propriedades de IconTile
@@ -59,10 +60,10 @@ não é renderizado pelo `IconTile`. Os padrões são os mesmos do componente: `
 
 ```ts
 function iconTileVariants(options?: {
-  context?: IconTileContext | null
-  variant?: IconTileVariant | null
-  size?: IconTileSize | null
-}): string
+  context?: IconTileContext | null;
+  variant?: IconTileVariant | null;
+  size?: IconTileSize | null;
+}): string;
 ```
 
 `resolveIconTileStyle` continua exportado, mas está depreciado e sai em uma próxima versão maior. Ele

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

@@ -6,13 +6,13 @@ centralizado e ocupa a largura disponível até `80rem` (`max-w-7xl`). Use `clas
 a composição pedir outro teto ou largura total.
 
 A forma curta é o padrão para páginas comuns e cria `PageHeader` e `PageBody`. A forma explícita
-exige exatamente um heading principal. Use `PageTitle` no header, `Content level={1}` no body, ou
+exige exatamente um heading principal. Use `PageTitle` no header, `Surface level={1}` no body, ou
 deixe um `PageState` ativo assumir esse papel. O header pode ser omitido quando o próprio conteúdo
 nomeia a página. Contadores e outros indicadores pertencem ao conteúdo que os explica.
 
 A `Page` é contínua por definição e não há divisores entre suas regiões. O `layout` da `Page` não
 é a anatomia de superfície de
-[`Card`](/ui/card), [`Dialog`](/ui/dialog), [`Drawer`](/ui/drawer) e [`Pane`](/ui/pane) — aqui ele
+[`Surface`](/ui/surface), [`Dialog`](/ui/dialog), [`Drawer`](/ui/drawer) e [`Pane`](/ui/pane) — aqui ele
 decide a ocupação de altura. `flow`, o padrão, deixa a página crescer e a rolagem acontecer na
 janela; `fill` limita a página à altura do shell para que uma região interna, como uma tabela longa
 ou um split, assuma a rolagem.
@@ -85,7 +85,7 @@ ocupa a mesma posição introdutória sem transformar a trilha em ação.
 ## Contexto conhecido pelo shell
 
 Use `PageShell` quando o shell conhece o breadcrumb e a rota conhece ações globais ou uma
-introdução. Não crie um `PaneHeader` paralelo nem esconda slots de `Page` com CSS. O Opus compõe a
+introdução. Não crie um cabeçalho paralelo no layout nem esconda slots de `Page` com CSS. O Opus compõe a
 navegação e as ações do shell no `PageHeader` rolável da página ativa.
 
 ```tsx preview col
@@ -158,9 +158,9 @@ render(
 );
 ```
 
-Em uma página de listagem, [`Content`](/ui/content) pode fornecer o título e as ações da coleção,
+Em uma página de listagem, [`Surface`](/ui/surface) pode fornecer o título e as ações da coleção,
 deixando `Page` apenas com `PageBody`. Se `PageShell` fornecer navegação ou ações nesse caso, `Page`
-materializa somente o `PageHeader` necessário para recebê-las, sem duplicar o heading de `Content`.
+materializa somente o `PageHeader` necessário para recebê-las, sem duplicar o heading de `Surface`.
 
 ## Ações de etapa no rodapé
 
@@ -197,20 +197,25 @@ render(
       <PageHeader>
         <PageTitle>Ordens de serviço</PageTitle>
       </PageHeader>
-      <PageBody className="min-h-0 flex-1 space-y-2 overflow-y-auto">
-        {[
-          "OS-1842",
-          "OS-1839",
-          "OS-1835",
-          "OS-1830",
-          "OS-1827",
-          "OS-1821",
-          "OS-1818",
-        ].map((id) => (
-          <div key={id} className="rounded-md border border-border p-3 text-sm">
-            {id}
-          </div>
-        ))}
+      <PageBody className="min-h-0 flex-1 overflow-y-auto">
+        <div className="space-y-2">
+          {[
+            "OS-1842",
+            "OS-1839",
+            "OS-1835",
+            "OS-1830",
+            "OS-1827",
+            "OS-1821",
+            "OS-1818",
+          ].map((id) => (
+            <div
+              key={id}
+              className="rounded-md border border-border p-3 text-sm"
+            >
+              {id}
+            </div>
+          ))}
+        </div>
       </PageBody>
     </Page>
   </div>,
@@ -218,8 +223,8 @@ render(
 ```
 
 Uma [`ActionList`](/ui/action-list) não precisa dessas classes. Filha de `PageBody`, ou de um
-[`Content`](/ui/content) dentro dele, ela recebe a altura da página e assume `layout="fill"`
-sozinha: `PageBody`, `Content` e `ContentBody` passam a repassar a altura até ela, o cabeçalho da
+[`Surface`](/ui/surface) dentro dele, ela recebe a altura da página e assume `layout="fill"`
+sozinha: `PageBody`, `Surface` e `SurfaceBody` passam a repassar a altura até ela, o cabeçalho da
 tabela fica fixo e só os resultados rolam. As demais seções do `PageBody` mantêm a altura do
 próprio conteúdo, e uma página `fill` sem lista não muda.
 
@@ -373,11 +378,14 @@ estado na própria seção com [`DataState`](/ui/data-state), [`ActionView`](/ui
 
 ## Propriedades de PageBody
 
-| Propriedade | Tipo                          | Descrição                                  |
-| ----------- | ----------------------------- | ------------------------------------------ |
-| `children`  | `ReactNode`                   | Conteúdo principal da página.              |
-| `className` | `string`                      | Classes adicionais da região principal.    |
-| demais      | Atributos de `HTMLDivElement` | Atributos nativos repassados ao container. |
+`PageBody` separa seus blocos diretos por `1.5rem`; o inset da página continua pertencendo a
+`Page`. Uma grade, lista compacta ou linha horizontal fica dentro de um wrapper próprio.
+
+| Propriedade | Tipo                          | Descrição                                                 |
+| ----------- | ----------------------------- | --------------------------------------------------------- |
+| `children`  | `ReactNode`                   | Blocos principais, separados pelo ritmo estrutural.       |
+| `className` | `string`                      | Classes de ocupação, overflow, alinhamento ou tipografia. |
+| demais      | Atributos de `HTMLDivElement` | Atributos nativos repassados ao container.                |
 
 Em uma `Page` com `layout="fill"`, o `PageBody` vira coluna flexível sozinho quando contém uma `ActionList` que
 ocupa a altura.