@softize/opus 27.0.0 → 28.0.0

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

@@ -38,25 +38,30 @@ mostrar somente o ícone, declare `aria-label` para preservar seu nome acessíve
 </Tabs>
 ```
 
+A barra e o painel ficam separados por `1rem`. O painel organiza seus blocos diretos com
+o mesmo intervalo. Sem moldura, não há padding inferior: o hospedeiro fornece o recuo externo.
+Não adicione margem ou padding para repetir esses intervalos.
+
 ## Emoldurar abas e painéis
 
 Use `framed` quando a navegação e seus painéis precisarem formar um único bloco. A propriedade
 reúne borda, raio e recorte no próprio `Tabs`, mas não aplica fundo: o bloco herda a
 superfície em que foi composto. Por isso, não envolva `Tabs` em um `Surface` somente para obter essa
-moldura.
+moldura. O painel horizontal recebe `1rem` nas laterais e embaixo; o intervalo da barra
+fornece o espaço superior. Na orientação vertical, a moldura recebe `1rem` ao redor da composição.
 
 ```tsx preview col
-<Tabs defaultValue="overview" framed className="gap-0">
+<Tabs defaultValue="overview" framed>
   <TabsList>
     <TabsListItem value="overview">Visão geral</TabsListItem>
     <TabsListItem value="history">Histórico</TabsListItem>
   </TabsList>
-  <TabsPanel value="overview" className="p-4">
+  <TabsPanel value="overview">
     <p className="text-sm text-muted-foreground">
       Resumo do workspace Empresa X.
     </p>
   </TabsPanel>
-  <TabsPanel value="history" className="p-4">
+  <TabsPanel value="history">
     <p className="text-sm text-muted-foreground">
       Alterações recentes do workspace.
     </p>
@@ -196,3 +201,6 @@ do gatilho.
 | ------------ | -------- | ------ | ----------------------------------------------------------------------- |
 | `value`      | `string` |        | Identificador do painel, igual ao `value` do `TabsListItem` que o abre. |
 | `forceMount` | `true`   |        | Mantém o painel montado mesmo quando outra aba está ativa.              |
+
+Painéis com `forceMount` continuam montados quando inativos, mas ficam ocultos. Isso preserva
+o estado de editores sem exibir simultaneamente o conteúdo de abas diferentes.

package/src/ui/docs/types.ts

@@ -25,4 +25,6 @@ export interface DocGroup {
 export interface DocSection {
   label: string
   groups: DocGroup[]
+  /** False exclui a seção da leitura anterior/próxima, sem retirá-la da navegação ou busca. */
+  readingSequence?: boolean
 }

package/src/ui/meta.ts

@@ -406,7 +406,7 @@ export const componentMeta = {
     name: "page",
     ancestry: "opus",
     whenToUse:
-      "Estruture uma página com cabeçalho, estado e conteúdo na mesma anatomia. Page renderiza o `<main>` com um container centralizado de até 80rem (`max-w-7xl`); PageHeader reúne navegação contextual opcional, título e ações, enquanto PageBody recebe o conteúdo. PageShell pode fornecer navegação e ações conhecidas pela aplicação sem criar uma barra visual. Uma região interna pode fornecer o heading principal com `Surface level={1}`. PageActionsTarget fica restrito a workspaces imersivos. PageState substitui o header e o conteúdo durante carregamento, falha ou ausência, por isso informações indispensáveis entram no corpo, como Alert ou texto. Para uma falha parcial, mantenha o estado na seção com DataState; para uma região disponível para criação ou vínculo, use Empty.",
+      "Estruture uma página com cabeçalho, estado e conteúdo na mesma anatomia. Page renderiza o `<main>` com header e viewport em largura total e conteúdo centralizado de até 80rem; surfaceLayout escolhe sectioned (padrão) ou continuous, independente de layout flow/fill; PageHeader reúne navegação e ações da superfície; PageIntro abre PageBody com título e orientação. A composição compacta mantém o título no header, sem intro. PageShell pode fornecer navegação e ações conhecidas pela aplicação sem criar uma barra visual. Uma região interna pode fornecer o heading principal com `Surface level={1}`. PageActionsTarget fica restrito a workspaces imersivos. PageState substitui o header e o conteúdo durante carregamento, falha ou ausência, por isso informações indispensáveis entram no corpo, como Alert ou texto. Para uma falha parcial, mantenha o estado na seção com DataState; para uma região disponível para criação ou vínculo, use Empty.",
   },
   presentation: {
     name: "presentation",

package/src/ui/react.tsx

@@ -88,9 +88,15 @@ export { Copyable } from "./components/primitives/copyable.tsx";
 export type { CopyableProps } from "./components/primitives/copyable.tsx";
 export {
   IconPicker,
+  IconCatalogProvider,
+  iconPickerSearch,
   iconPickerIcons,
 } from "./components/primitives/icon-picker.tsx";
-export type { IconPickerProps } from "./components/primitives/icon-picker.tsx";
+export type {
+  IconPickerProps,
+  IconCatalog,
+  IconCatalogEntry,
+} from "./components/primitives/icon-picker.tsx";
 
 export {
   Command,
@@ -509,6 +515,8 @@ export {
   PageShell,
   Page,
   PageHeader,
+  PageIntro,
+  PageIntroActions,
   PageNavigation,
   PageBack,
   PageTitle,