@softize/opus 29.0.0 → 31.0.0

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

@@ -3,20 +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,
-  structuralHeaderClasses,
-  validateSurfaceIntro,
+  structuralMetaClasses,
 } from "../patterns/structural-header.tsx";
 import {
   StructuralMedia,
@@ -47,10 +44,10 @@ interface DrawerContentContextValue {
 const DrawerContentContext = React.createContext<DrawerContentContextValue>({
   showCloseButton: false,
   closeDisabled: false,
-  closeSize: "sm",
+  closeSize: "xs",
 });
 
-const DrawerIntroContext = React.createContext(false);
+const DrawerMetaContext = 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 });
@@ -148,8 +145,7 @@ function DrawerContent({
   side = "right",
   showCloseButton = true,
   closeDisabled = false,
-  closeSize = "sm",
-  layout = "sectioned",
+  closeSize = "xs",
   "aria-describedby": ariaDescribedBy,
   onEscapeKeyDown,
   onPointerDownOutside,
@@ -168,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();
@@ -207,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",
@@ -235,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>
@@ -251,39 +244,45 @@ 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 (
-    <StructuralHeader
-      name="DrawerHeader"
-      slot="drawer"
-      slots={{
-        leading: DrawerNavigation,
-        media: DrawerMedia,
-        title: DrawerTitle,
-        description: DrawerDescription,
-        actions: DrawerActions,
-      }}
-      leadingPlacement="inline"
-      titleRequired={false}
-      rowClassName={surfaceHeaderRowClasses("drawer")}
-      className={cn(
-        "text-left",
-        surfaceRegionClasses("drawer", layout, "header"),
-        className,
-      )}
-      trailing={
-        showCloseButton ? (
-          <DrawerCloseButton disabled={closeDisabled} size={closeSize} />
-        ) : undefined
-      }
-      {...props}
-    >
-      {children}
-    </StructuralHeader>
+    <DrawerMetaContext.Provider value>
+      <StructuralHeader
+        tabs={tabs}
+        name="DrawerHeader"
+        slot="drawer"
+        slots={{
+          leading: DrawerNavigation,
+          media: DrawerMedia,
+          title: DrawerTitle,
+          description: DrawerDescription,
+          meta: DrawerMeta,
+          actions: DrawerActions,
+        }}
+        leadingPlacement="inline"
+        titleRequired
+        rowClassName={surfaceHeaderRowClasses("drawer")}
+        className={cn(
+          "text-left",
+          surfaceRegionClasses("drawer", "header"),
+          className,
+        )}
+        trailing={
+          showCloseButton ? (
+            <DrawerCloseButton disabled={closeDisabled} size={closeSize} />
+          ) : undefined
+        }
+        {...props}
+      >
+        {children}
+      </StructuralHeader>
+    </DrawerMetaContext.Provider>
   );
 }
 
@@ -317,42 +316,17 @@ 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>
-      <StructuralHeader
-        name="DrawerIntro"
-        slot="drawer-intro"
-        slots={{
-          title: DrawerTitle,
-          description: DrawerDescription,
-          actions: DrawerIntroActions,
-        }}
-        leadingPlacement="inline"
-        titleRequired
-        className={cn("text-left", className)}
-        {...props}
-      >
-        {children}
-      </StructuralHeader>
-    </DrawerIntroContext.Provider>
-  );
-}
-
-/** Ações relacionadas ao título do conteúdo, separadas das ações de chrome do header. */
-function DrawerIntroActions({
+/** 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.");
   return (
     <div
-      data-slot="drawer-intro-actions"
-      className={cn(surfaceActionsClasses, className)}
+      data-slot="drawer-meta"
+      className={cn(structuralMetaClasses, className)}
       {...props}
     />
   );
@@ -364,14 +338,12 @@ function DrawerBody({
   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}
@@ -382,7 +354,6 @@ function DrawerBody({
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  const layout = useSurfaceLayout("drawer");
   return (
     <div
       data-slot="drawer-footer"
@@ -391,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}
@@ -408,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.
@@ -441,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

@@ -24,7 +24,7 @@ function Table({
         data-slot="table-container"
         data-variant={variant}
         className={cn(
-          "relative w-full overflow-x-auto",
+          "relative w-full min-w-0 max-w-full overflow-x-auto",
           variant === "framed" && "rounded-lg border border-border",
           containerClassName,
         )}
@@ -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-nowrap 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}
@@ -108,7 +108,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
+        "px-3 py-2 align-middle whitespace-normal wrap-break-word [&: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,8 @@ 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 `password`, `textarea`, `code`, `lines`, `refItems`, `icon` e `toggle-group`.
+`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