@softize/opus 30.0.0 → 31.1.0

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

@@ -3,22 +3,17 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { cn } from "../../lib/cn.ts";
 import {
-  SurfaceLayoutProvider,
   surfaceActionsClasses,
   surfaceDescriptionClasses,
   surfaceHeaderRowClasses,
   surfaceRegionClasses,
   surfaceTitleClasses,
-  useSurfaceLayout,
-  type SurfaceLayout,
 } from "../patterns/surface-anatomy.ts";
 import { FillBoundary } from "../patterns/fill-region.ts";
 import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
 import {
   StructuralHeader,
   structuralMetaClasses,
-  structuralHeaderClasses,
-  validateSurfaceIntro,
 } from "../patterns/structural-header.tsx";
 import {
   StructuralMedia,
@@ -65,11 +60,10 @@ interface DialogContentContextValue {
 const DialogContentContext = React.createContext<DialogContentContextValue>({
   showCloseButton: false,
   closeDisabled: false,
-  closeSize: "sm",
+  closeSize: "xs",
 });
 
 const DialogMetaContext = React.createContext(false);
-const DialogIntroContext = React.createContext(false);
 
 /**
  * Compõe o handler de dispensa do consumidor com o bloqueio de `closeDisabled`: o handler dele
@@ -417,8 +411,7 @@ export function DialogContent({
   children,
   showCloseButton,
   closeDisabled = false,
-  closeSize = "sm",
-  layout = "sectioned",
+  closeSize = "xs",
   "aria-describedby": ariaDescribedBy,
   onEscapeKeyDown,
   onPointerDownOutside,
@@ -438,8 +431,6 @@ export function DialogContent({
   closeDisabled?: boolean;
   /** Tamanho da ação circular de fechar no cabeçalho. */
   closeSize?: CloseButtonSize;
-  /** Anatomia da superfície: `sectioned` (default) ou `continuous` — ADR 0023. */
-  layout?: SurfaceLayout;
 }) {
   const { mode, open, modal } = useDialogContext();
   const layer = useLayerPortal();
@@ -529,7 +520,6 @@ export function DialogContent({
         ref={composedRef}
         data-slot="dialog-content"
         data-mode="default"
-        data-layout={layout}
         {...{ [LAYER_MODAL_ATTRIBUTE]: internal || undefined }}
         className={cn(
           contentClasses,
@@ -550,13 +540,13 @@ export function DialogContent({
         {...props}
       >
         <LayerPortalProvider value={nestedPortal}>
-          <SurfaceLayoutProvider value={layout}>
+          <FillBoundary>
             <DialogContentContext.Provider
               value={{ showCloseButton: showClose, closeDisabled, closeSize }}
             >
               {children}
             </DialogContentContext.Provider>
-          </SurfaceLayoutProvider>
+          </FillBoundary>
         </LayerPortalProvider>
       </DialogPrimitive.Content>
     </DialogPortal>
@@ -566,16 +556,21 @@ export function DialogContent({
 export function DialogHeader({
   className,
   children,
+  tabs,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<"div"> & {
+  tabs?: React.ReactNode;
+}) {
   const { mode } = useDialogContext();
-  const layout = useSurfaceLayout("dialog");
   const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DialogContentContext);
 
   // O modo de alerta é a exceção declarada da ADR 0023: a resposta obrigatória empilha
   // mídia, título e corpo centralizados, e o padding mora na raiz do conteúdo.
   if (mode === "alert") {
+    if (tabs !== undefined && tabs !== null && tabs !== false) {
+      throw new Error("DialogHeader de alerta não aceita abas.");
+    }
     return (
       <div
         data-slot="dialog-header"
@@ -593,6 +588,7 @@ export function DialogHeader({
   return (
     <DialogMetaContext.Provider value>
       <StructuralHeader
+        tabs={tabs}
         name="DialogHeader"
         slot="dialog"
         slots={{
@@ -604,11 +600,11 @@ export function DialogHeader({
           actions: DialogActions,
         }}
         leadingPlacement="inline"
-        titleRequired={false}
+        titleRequired
         rowClassName={surfaceHeaderRowClasses("dialog")}
         className={cn(
           "text-left",
-          surfaceRegionClasses("dialog", layout, "header"),
+          surfaceRegionClasses("dialog", "header"),
           className,
         )}
         trailing={
@@ -652,36 +648,6 @@ export function DialogActions({
   );
 }
 
-/** Título e ações da composição principal, como primeiro bloco de DialogBody. */
-export function DialogIntro({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <DialogIntroContext.Provider value>
-      <DialogMetaContext.Provider value>
-        <StructuralHeader
-          name="DialogIntro"
-          slot="dialog-intro"
-          slots={{
-            title: DialogTitle,
-            description: DialogDescription,
-            meta: DialogMeta,
-            actions: DialogIntroActions,
-          }}
-          leadingPlacement="inline"
-          titleRequired
-          className={cn("text-left", className)}
-          {...props}
-        >
-          {children}
-        </StructuralHeader>
-      </DialogMetaContext.Provider>
-    </DialogIntroContext.Provider>
-  );
-}
-
 /** Badges, datas e autoria abaixo do título e da orientação. */
 export function DialogMeta({
   className,
@@ -693,10 +659,7 @@ export function DialogMeta({
     throw new Error(
       'DialogMeta não está disponível em Dialog com mode="alert"; coloque as informações no corpo do alerta.',
     );
-  if (!inside)
-    throw new Error(
-      "DialogMeta deve estar dentro de DialogHeader ou DialogIntro.",
-    );
+  if (!inside) throw new Error("DialogMeta deve estar dentro de DialogHeader.");
   return (
     <div
       data-slot="dialog-meta"
@@ -706,20 +669,6 @@ export function DialogMeta({
   );
 }
 
-/** Ações relacionadas ao título do conteúdo, separadas das ações de chrome do header. */
-export function DialogIntroActions({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-intro-actions"
-      className={cn(surfaceActionsClasses, className)}
-      {...props}
-    />
-  );
-}
-
 export function DialogMedia({ className, ...props }: StructuralMediaProps) {
   return (
     <StructuralMedia slot="dialog-media" {...props} className={className} />
@@ -733,8 +682,6 @@ export function DialogBody({
   ...props
 }: React.ComponentProps<"div"> & { flush?: boolean }) {
   const { mode } = useDialogContext();
-  const layout = useSurfaceLayout("dialog");
-  validateSurfaceIntro(props.children, DialogIntro, "DialogBody");
   return (
     <div
       data-slot="dialog-body"
@@ -743,7 +690,7 @@ export function DialogBody({
           ? "flex min-w-0 flex-col gap-6"
           : cn(
               "min-h-0 flex-1 overflow-y-auto",
-              surfaceRegionClasses("dialog", layout, "body", { flush }),
+              surfaceRegionClasses("dialog", "body", { flush }),
             ),
         className,
       )}
@@ -759,7 +706,6 @@ export function DialogFooter({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
-  const layout = useSurfaceLayout("dialog");
   return (
     <div
       data-slot="dialog-footer"
@@ -768,7 +714,7 @@ export function DialogFooter({
           ? "w-full"
           : cn(
               "flex shrink-0 flex-row justify-end gap-2",
-              surfaceRegionClasses("dialog", layout, "footer"),
+              surfaceRegionClasses("dialog", "footer"),
             ),
         className,
       )}
@@ -787,19 +733,11 @@ export function DialogTitle({
   level?: HeadingLevel;
 }) {
   const { mode } = useDialogContext();
-  const intro = React.useContext(DialogIntroContext);
-  const layout = useSurfaceLayout("dialog");
   const Title =
     mode === "alert" ? AlertDialogPrimitive.Title : DialogPrimitive.Title;
   const classes = cn(
-    mode === "alert"
-      ? undefined
-      : intro
-        ? "min-w-0 whitespace-normal"
-        : "min-w-0 truncate",
-    intro
-      ? structuralHeaderClasses.page.title
-      : surfaceTitleClasses("dialog", layout),
+    mode === "alert" ? undefined : "min-w-0 truncate",
+    surfaceTitleClasses("dialog"),
     className,
   );
   // O nível troca a TAG do mesmo nó, via `asChild` — nunca aninha um heading dentro

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

@@ -3,21 +3,17 @@ import { Dialog as DrawerPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
 import {
-  SurfaceLayoutProvider,
   surfaceActionsClasses,
   surfaceDescriptionClasses,
   surfaceHeaderRowClasses,
   surfaceRegionClasses,
   surfaceTitleClasses,
-  useSurfaceLayout,
-  type SurfaceLayout,
 } from "../patterns/surface-anatomy.ts";
+import { FillBoundary } from "../patterns/fill-region.ts";
 import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
 import {
   StructuralHeader,
   structuralMetaClasses,
-  structuralHeaderClasses,
-  validateSurfaceIntro,
 } from "../patterns/structural-header.tsx";
 import {
   StructuralMedia,
@@ -48,11 +44,10 @@ interface DrawerContentContextValue {
 const DrawerContentContext = React.createContext<DrawerContentContextValue>({
   showCloseButton: false,
   closeDisabled: false,
-  closeSize: "sm",
+  closeSize: "xs",
 });
 
 const DrawerMetaContext = React.createContext(false);
-const DrawerIntroContext = React.createContext(false);
 
 /** Estado de aberto que a pilha de modais da camada flutuante acompanha (ADR 0052). */
 const DrawerStateContext = React.createContext({ open: false, modal: true });
@@ -150,8 +145,7 @@ function DrawerContent({
   side = "right",
   showCloseButton = true,
   closeDisabled = false,
-  closeSize = "sm",
-  layout = "sectioned",
+  closeSize = "xs",
   "aria-describedby": ariaDescribedBy,
   onEscapeKeyDown,
   onPointerDownOutside,
@@ -170,8 +164,6 @@ function DrawerContent({
    */
   closeDisabled?: boolean;
   closeSize?: CloseButtonSize;
-  /** Anatomia da superfície: `sectioned` (default) ou `continuous` — ADR 0023. */
-  layout?: SurfaceLayout;
 }) {
   const { open, modal } = React.useContext(DrawerStateContext);
   const layer = useLayerPortal();
@@ -209,7 +201,6 @@ function DrawerContent({
       <DrawerPrimitive.Content
         ref={composedRef}
         data-slot="drawer-content"
-        data-layout={layout}
         {...{ [LAYER_MODAL_ATTRIBUTE]: internal || undefined }}
         className={cn(
           "fixed z-50 flex flex-col overflow-hidden rounded-xl border bg-background shadow-lg transition ease-in-out [--surface-background:var(--background)] data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
@@ -237,13 +228,13 @@ function DrawerContent({
         {...props}
       >
         <LayerPortalProvider value={nestedPortal}>
-          <SurfaceLayoutProvider value={layout}>
+          <FillBoundary>
             <DrawerContentContext.Provider
               value={{ showCloseButton, closeDisabled, closeSize }}
             >
               {children}
             </DrawerContentContext.Provider>
-          </SurfaceLayoutProvider>
+          </FillBoundary>
         </LayerPortalProvider>
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -253,14 +244,17 @@ function DrawerContent({
 function DrawerHeader({
   className,
   children,
+  tabs,
   ...props
-}: React.ComponentProps<"div">) {
-  const layout = useSurfaceLayout("drawer");
+}: React.ComponentProps<"div"> & {
+  tabs?: React.ReactNode;
+}) {
   const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DrawerContentContext);
   return (
     <DrawerMetaContext.Provider value>
       <StructuralHeader
+        tabs={tabs}
         name="DrawerHeader"
         slot="drawer"
         slots={{
@@ -272,11 +266,11 @@ function DrawerHeader({
           actions: DrawerActions,
         }}
         leadingPlacement="inline"
-        titleRequired={false}
+        titleRequired
         rowClassName={surfaceHeaderRowClasses("drawer")}
         className={cn(
           "text-left",
-          surfaceRegionClasses("drawer", layout, "header"),
+          surfaceRegionClasses("drawer", "header"),
           className,
         )}
         trailing={
@@ -322,46 +316,13 @@ function DrawerActions({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-/** Título e ações da composição principal, como primeiro bloco de DrawerBody. */
-function DrawerIntro({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <DrawerIntroContext.Provider value>
-      <DrawerMetaContext.Provider value>
-        <StructuralHeader
-          name="DrawerIntro"
-          slot="drawer-intro"
-          slots={{
-            title: DrawerTitle,
-            description: DrawerDescription,
-            meta: DrawerMeta,
-            actions: DrawerIntroActions,
-          }}
-          leadingPlacement="inline"
-          titleRequired
-          className={cn("text-left", className)}
-          {...props}
-        >
-          {children}
-        </StructuralHeader>
-      </DrawerMetaContext.Provider>
-    </DrawerIntroContext.Provider>
-  );
-}
-
 /** Badges, datas e autoria abaixo do título e da orientação. */
 export function DrawerMeta({
   className,
   ...props
 }: React.ComponentProps<"div">) {
   const inside = React.useContext(DrawerMetaContext);
-  if (!inside)
-    throw new Error(
-      "DrawerMeta deve estar dentro de DrawerHeader ou DrawerIntro.",
-    );
+  if (!inside) throw new Error("DrawerMeta deve estar dentro de DrawerHeader.");
   return (
     <div
       data-slot="drawer-meta"
@@ -371,34 +332,18 @@ export function DrawerMeta({
   );
 }
 
-/** Ações relacionadas ao título do conteúdo, separadas das ações de chrome do header. */
-function DrawerIntroActions({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-intro-actions"
-      className={cn(surfaceActionsClasses, className)}
-      {...props}
-    />
-  );
-}
-
 function DrawerBody({
   flush = false,
   className,
   style,
   ...props
 }: React.ComponentProps<"div"> & { flush?: boolean }) {
-  const layout = useSurfaceLayout("drawer");
-  validateSurfaceIntro(props.children, DrawerIntro, "DrawerBody");
   return (
     <div
       data-slot="drawer-body"
       className={cn(
         "min-h-0 flex-1 overflow-y-auto",
-        surfaceRegionClasses("drawer", layout, "body", { flush }),
+        surfaceRegionClasses("drawer", "body", { flush }),
         className,
       )}
       style={style}
@@ -409,7 +354,6 @@ function DrawerBody({
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  const layout = useSurfaceLayout("drawer");
   return (
     <div
       data-slot="drawer-footer"
@@ -418,7 +362,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
         // preenche a altura da janela, e sem isso o rodapé subiria atrás do corpo. No
         // Dialog a altura é do conteúdo, então ele não precisa (ADR 0023).
         "mt-auto flex shrink-0 flex-row justify-end gap-2",
-        surfaceRegionClasses("drawer", layout, "footer"),
+        surfaceRegionClasses("drawer", "footer"),
         className,
       )}
       {...props}
@@ -435,13 +379,9 @@ function DrawerTitle({
   /** Hierarquia do documento. Sem ele vale o `h2` que a primitiva emite. */
   level?: HeadingLevel;
 }) {
-  const intro = React.useContext(DrawerIntroContext);
-  const layout = useSurfaceLayout("drawer");
   const classes = cn(
-    intro ? "min-w-0 whitespace-normal" : "min-w-0 truncate",
-    intro
-      ? structuralHeaderClasses.page.title
-      : surfaceTitleClasses("drawer", layout),
+    "min-w-0 truncate",
+    surfaceTitleClasses("drawer"),
     className,
   );
   // O nível troca a TAG do mesmo nó, via `asChild` — a escala continua vindo do layout.
@@ -468,8 +408,6 @@ function DrawerTitle({
 
 export {
   DrawerActions,
-  DrawerIntro,
-  DrawerIntroActions,
   DrawerMedia,
   DrawerNavigation,
   Drawer,

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

@@ -184,7 +184,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-xs leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className

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

@@ -32,7 +32,7 @@ function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
 }
 
 export interface PaginationLinkProps extends Omit<React.ComponentProps<'a'>, 'children'> {
-  /** Página atual: vira `outline` e ganha `aria-current="page"`. */
+  /** Página atual: usa fundo `subtle` e ganha `aria-current="page"`. */
   isActive?: boolean
   /** A escala de control.ts, via Button. `default` (números: altura fixa, largura mínima
    *  quadrada que cresce com os dígitos) ou um `icon*` (setas quadradas, sem padding). */
@@ -59,7 +59,8 @@ function PaginationLink({ className, isActive, page, disabled, href, size = 'def
     'data-slot': 'pagination-link',
     'data-active': isActive,
     className: cn(
-      buttonVariants({ variant: isActive ? 'outline' : 'ghost', size }),
+      buttonVariants({ context: 'neutral', variant: isActive ? 'subtle' : 'ghost', size }),
+      isActive && 'font-semibold',
       // Número: a largura mínima é quadrada e o conteúdo manda no resto. Escala `icon*`
       // fica quadrada de verdade (sem `has-[>svg]:px-*` do `default`).
       !square && cn('w-auto px-2 tabular-nums', minWidth),

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

@@ -95,7 +95,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-3 text-left align-middle font-medium whitespace-normal text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
+        "h-10 px-3 py-2 text-left align-middle font-medium whitespace-normal text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
         className,
       )}
       {...props}

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

@@ -7,6 +7,7 @@ import {
   structuralRegionGap,
 } from "../patterns/surface-anatomy.ts";
 import { controlHeight, type ControlSize } from "./control.ts";
+import { useFillRegion, fillRegionClassName } from "../patterns/fill-region.ts";
 
 // Divergência da casa (ejetado): o Tabs ganhou `size` — Button e Select têm `sm`, o Tabs
 // não tinha, e uma fileira densa ficava com as abas 0.25rem mais altas
@@ -18,6 +19,9 @@ const TabsSizeContext = React.createContext<TabsSize>("default");
 const TabsDistributionContext =
   React.createContext<TabsDistribution>("content");
 const TabsFramedContext = React.createContext(false);
+
+/** Uso interno: o header estrutural fornece o divisor da faixa de abas. */
+export const TabsHeaderContext = React.createContext(false);
 type TabsOrientation = "horizontal" | "vertical";
 const TabsOrientationContext =
   React.createContext<TabsOrientation>("horizontal");
@@ -70,6 +74,7 @@ function TabsList({
   style,
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  const inHeader = React.useContext(TabsHeaderContext);
   // O size vem do <Tabs> (contexto) — a altura mora aqui, na list.
   const size = React.useContext(TabsSizeContext);
   const orientation = React.useContext(TabsOrientationContext);
@@ -101,7 +106,7 @@ function TabsList({
       }}
       {...props}
     >
-      {hasHorizontalLine && (
+      {hasHorizontalLine && !inHeader && (
         <span
           aria-hidden="true"
           data-slot="tabs-line"
@@ -196,21 +201,27 @@ function TabsListItem({
 
 function TabsPanel({
   className,
+  children,
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   const framed = React.useContext(TabsFramedContext);
   const orientation = React.useContext(TabsOrientationContext);
+  const fill = useFillRegion();
   return (
     <TabsPrimitive.Content
       data-slot="tabs-panel"
+      {...fill.attributes}
       className={cn(
         "flex-1 outline-none data-[state=inactive]:hidden",
         structuralBodyRhythm,
+        fill.filling && fillRegionClassName,
         framed && orientation === "horizontal" && "px-4 pb-4",
         className,
       )}
       {...props}
-    />
+    >
+      {fill.provide(children)}
+    </TabsPrimitive.Content>
   );
 }
 

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

@@ -122,7 +122,12 @@ referência; itens estáticos permanecem como declarados no contrato.
 
 ## Widgets declarativos
 
-`FieldSpec.widget` aceita `textarea`, `code`, `lines`, `refItems`, `icon` e `toggle-group`.
+`FieldSpec.widget` aceita `date`, `password`, `textarea`, `code`, `lines`, `refItems`, `icon` e `toggle-group`.
+Para uma data civil, declare `widget: 'date'` e use uma string `YYYY-MM-DD` no schema e no
+valor inicial. O formulário usa o [`DateInput`](/ui/date-input), com digitação em `DD/MM/AAAA`
+e calendário em pt-BR. O valor válido enviado continua sendo a data civil, sem conversão para UTC.
+Texto incompleto ou inválido chega ao schema para validação; use um schema de data civil.
+`password` usa um input de senha com `autocomplete="new-password"`, adequado a cadastro e redefinição.
 O literal canônico do grupo de escolhas é sempre kebab-case: `widget: 'toggle-group'`. Em enum ele
 renderiza seleção única; em array de enum, seleção múltipla. As opções seguem a mesma precedência e
 o mesmo `SelectOption` rico dos selects. Use esse widget quando cada opção funcionar como uma