@softize/opus 18.4.0 → 19.0.0

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

@@ -54,9 +54,7 @@ function DetailGroup({
           columnClasses[columns],
           variant === 'plain' && !dividers && 'gap-x-6 gap-y-4',
           dividers && 'gap-px overflow-hidden',
-          (variant === 'framed' || dividers) &&
-            !splitHorizontalField &&
-            '[&>[data-slot=detail-field]]:p-3',
+          (variant === 'framed' || dividers) && !splitHorizontalField && '[&>[data-slot=detail-field]]:p-3',
           variant === 'framed' &&
             'overflow-hidden rounded-lg border border-border bg-transparent text-foreground',
           // Default da coluna de rótulos como CLASSE, antes do `className`: assim uma classe do
@@ -74,10 +72,7 @@ function DetailGroup({
   )
 }
 
-export interface DetailFieldProps extends Omit<
-  React.ComponentProps<'div'>,
-  'children'
-> {
+export interface DetailFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {
   label: React.ReactNode
   /** `null`, `undefined`, string vazia ou só com espaços renderizam a ausência
    *  como travessão; “Não informado” ou `empty` preservam o significado para
@@ -99,11 +94,13 @@ function DetailField({
   ...props
 }: DetailFieldProps): React.ReactElement {
   const { splitHorizontalField } = React.useContext(DetailGroupLayoutContext)
-  const content = !isAbsentValue(value)
-    ? value
-    : empty === undefined || typeof empty === 'string'
-      ? <EmptyValue compact {...(empty !== undefined ? { label: empty } : {})} />
-      : empty
+  const content = !isAbsentValue(value) ? (
+    value
+  ) : empty === undefined || typeof empty === 'string' ? (
+    <EmptyValue compact {...(empty !== undefined ? { label: empty } : {})} />
+  ) : (
+    empty
+  )
   return (
     <div
       data-slot="detail-field"
@@ -131,7 +128,7 @@ function DetailField({
       <dt
         data-slot="detail-field-label"
         className={cn(
-          'flex items-center gap-2.5 text-xs leading-snug font-medium text-muted-foreground group-data-[orientation=horizontal]/detail-group:text-sm',
+          'flex items-center gap-1.5 text-sm leading-snug font-medium text-muted-foreground',
           splitHorizontalField && 'bg-muted/30 p-3 dark:bg-input/30',
         )}
       >

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

@@ -2,6 +2,21 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { cn } from "../../lib/cn.ts";
+import {
+  SurfaceLayoutProvider,
+  surfaceActionsClasses,
+  surfaceHeaderRowClasses,
+  surfaceRegionClasses,
+  surfaceTitleClasses,
+  useSurfaceLayout,
+  type SurfaceLayout,
+} from "../patterns/surface-anatomy.ts";
+import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
+import { SurfaceHeader } from "../patterns/surface-header.tsx";
+import {
+  SurfaceMedia,
+  type SurfaceMediaProps,
+} from "../patterns/surface-media.tsx";
 import {
   CloseButton,
   type CloseButtonSize,
@@ -175,6 +190,7 @@ export function DialogContent({
   showCloseButton,
   closeDisabled = false,
   closeSize = "sm",
+  layout = "sectioned",
   "aria-describedby": ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
@@ -184,6 +200,8 @@ 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 } = useDialogContext();
   const showClose = showCloseButton ?? mode !== "alert";
@@ -221,6 +239,7 @@ export function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         data-mode="default"
+        data-layout={layout}
         className={cn(
           contentClasses,
           "flex max-h-[85vh] max-w-lg flex-col",
@@ -229,11 +248,13 @@ export function DialogContent({
         aria-describedby={ariaDescribedBy}
         {...props}
       >
-        <DialogContentContext.Provider
-          value={{ showCloseButton: showClose, closeDisabled, closeSize }}
-        >
-          {children}
-        </DialogContentContext.Provider>
+        <SurfaceLayoutProvider value={layout}>
+          <DialogContentContext.Provider
+            value={{ showCloseButton: showClose, closeDisabled, closeSize }}
+          >
+            {children}
+          </DialogContentContext.Provider>
+        </SurfaceLayoutProvider>
       </DialogPrimitive.Content>
     </DialogPortal>
   );
@@ -245,40 +266,99 @@ export function DialogHeader({
   ...props
 }: React.ComponentProps<"div">) {
   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") {
+    return (
+      <div
+        data-slot="dialog-header"
+        className={cn(
+          "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=dialog-media]:grid-rows-[auto_auto_1fr]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
   return (
-    <div
-      data-slot="dialog-header"
+    <SurfaceHeader
+      name="DialogHeader"
+      slot="dialog"
+      slots={{
+        leading: DialogNavigation,
+        media: DialogMedia,
+        title: DialogTitle,
+        actions: DialogActions,
+      }}
+      leadingPlacement="inline"
+      titleRequired={false}
+      rowClassName={surfaceHeaderRowClasses("dialog")}
       className={cn(
-        mode === "alert"
-          ? "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=dialog-media]:grid-rows-[auto_auto_1fr]"
-          : "flex shrink-0 items-center gap-4 border-b p-4 text-left [&:has(+[data-slot=dialog-footer])]:border-b-0",
+        "text-left",
+        surfaceRegionClasses("dialog", layout, "header"),
         className,
       )}
+      trailing={
+        showCloseButton ? (
+          <DialogCloseButton disabled={closeDisabled} size={closeSize} />
+        ) : undefined
+      }
       {...props}
     >
       {children}
-      {mode !== "alert" && showCloseButton && (
-        <DialogCloseButton disabled={closeDisabled} size={closeSize} />
-      )}
-    </div>
+    </SurfaceHeader>
+  );
+}
+
+/** Região introdutória do header — o voltar de um fluxo modal encadeado. */
+export function DialogNavigation({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-navigation-content"
+      className={cn("flex min-w-0 shrink-0 items-center", className)}
+      {...props}
+    />
   );
 }
 
-export function DialogMedia({
+/** Ações da tela no header, antes do botão de fechar. */
+export function DialogActions({
   className,
   ...props
 }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="dialog-media"
+      data-slot="dialog-actions"
+      className={cn(surfaceActionsClasses, className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogMedia({ className, ...props }: SurfaceMediaProps) {
+  const { mode } = useDialogContext();
+  // No alerta a mídia é o elemento de reconhecimento da resposta e ocupa a moldura
+  // maior — exceção declarada da ADR 0023, coberta por teste. Fora dele, a mesma
+  // moldura das demais famílias.
+  return mode === "alert" ? (
+    <SurfaceMedia
+      slot="dialog-media"
+      size="lg"
       className={cn(
-        'mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted *:[svg:not([class*="size-"])]:size-8',
+        'mb-2 size-16 *:[svg:not([class*="size-"])]:size-8',
         className,
       )}
       {...props}
     />
+  ) : (
+    <SurfaceMedia slot="dialog-media" {...props} className={className} />
   );
 }
 
@@ -288,11 +368,17 @@ export function DialogBody({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
+  const layout = useSurfaceLayout("dialog");
   return (
     <div
       data-slot="dialog-body"
       className={cn(
-        mode === "alert" ? "min-w-0" : "min-h-0 flex-1 overflow-y-auto p-4",
+        mode === "alert"
+          ? "min-w-0"
+          : cn(
+              "min-h-0 flex-1 overflow-y-auto",
+              surfaceRegionClasses("dialog", layout, "body"),
+            ),
         className,
       )}
       style={
@@ -310,13 +396,17 @@ export function DialogFooter({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
+  const layout = useSurfaceLayout("dialog");
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
         mode === "alert"
           ? "w-full"
-          : "flex shrink-0 flex-row justify-end gap-2 border-t bg-muted/20 p-4 dark:bg-input/20",
+          : cn(
+              "flex shrink-0 flex-row justify-end gap-2",
+              surfaceRegionClasses("dialog", layout, "footer"),
+            ),
         className,
       )}
       {...props}
@@ -326,23 +416,36 @@ export function DialogFooter({
 
 export function DialogTitle({
   className,
+  level,
+  children,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<typeof DialogPrimitive.Title> & {
+  /** Hierarquia do documento. Sem ele vale o `h2` que a primitiva emite. */
+  level?: HeadingLevel;
+}) {
   const { mode } = useDialogContext();
-  return mode === "alert" ? (
-    <AlertDialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  ) : (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn(
-        "min-w-0 flex-1 text-lg font-semibold leading-none",
-        className,
-      )}
-      {...props}
-    />
+  const layout = useSurfaceLayout("dialog");
+  const Title = mode === "alert" ? AlertDialogPrimitive.Title : DialogPrimitive.Title;
+  const classes = cn(
+    mode === "alert" ? undefined : "min-w-0 truncate",
+    surfaceTitleClasses("dialog", layout),
+    className,
+  );
+  // O nível troca a TAG do mesmo nó, via `asChild` — nunca aninha um heading dentro
+  // de outro, e a escala continua vindo do layout (ADR 0023).
+  if (level === undefined) {
+    return (
+      <Title data-slot="dialog-title" className={classes} {...props}>
+        {children}
+      </Title>
+    );
+  }
+  const Heading = headingTags[level];
+  return (
+    <Title asChild {...props}>
+      <Heading data-slot="dialog-title" className={classes}>
+        {children}
+      </Heading>
+    </Title>
   );
 }

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

@@ -2,6 +2,21 @@ import * as React from "react";
 import { Dialog as DrawerPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
+import {
+  SurfaceLayoutProvider,
+  surfaceActionsClasses,
+  surfaceHeaderRowClasses,
+  surfaceRegionClasses,
+  surfaceTitleClasses,
+  useSurfaceLayout,
+  type SurfaceLayout,
+} from "../patterns/surface-anatomy.ts";
+import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
+import { SurfaceHeader } from "../patterns/surface-header.tsx";
+import {
+  SurfaceMedia,
+  type SurfaceMediaProps,
+} from "../patterns/surface-media.tsx";
 import {
   CloseButton,
   type CloseButtonSize,
@@ -78,6 +93,7 @@ function DrawerContent({
   showCloseButton = true,
   closeDisabled = false,
   closeSize = "sm",
+  layout = "sectioned",
   "aria-describedby": ariaDescribedBy,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
@@ -85,12 +101,15 @@ function DrawerContent({
   showCloseButton?: boolean;
   closeDisabled?: boolean;
   closeSize?: CloseButtonSize;
+  /** Anatomia da superfície: `sectioned` (default) ou `continuous` — ADR 0023. */
+  layout?: SurfaceLayout;
 }) {
   return (
     <DrawerPortal>
       <DrawerOverlay />
       <DrawerPrimitive.Content
         data-slot="drawer-content"
+        data-layout={layout}
         className={cn(
           "fixed z-50 flex flex-col bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" &&
@@ -106,11 +125,13 @@ function DrawerContent({
         aria-describedby={ariaDescribedBy}
         {...props}
       >
-        <DrawerContentContext.Provider
-          value={{ showCloseButton, closeDisabled, closeSize }}
-        >
-          {children}
-        </DrawerContentContext.Provider>
+        <SurfaceLayoutProvider value={layout}>
+          <DrawerContentContext.Provider
+            value={{ showCloseButton, closeDisabled, closeSize }}
+          >
+            {children}
+          </DrawerContentContext.Provider>
+        </SurfaceLayoutProvider>
       </DrawerPrimitive.Content>
     </DrawerPortal>
   );
@@ -121,27 +142,76 @@ function DrawerHeader({
   children,
   ...props
 }: React.ComponentProps<"div">) {
+  const layout = useSurfaceLayout("drawer");
   const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DrawerContentContext);
   return (
-    <div
-      data-slot="drawer-header"
-      className={cn("flex shrink-0 items-center gap-4 border-b p-4", className)}
+    <SurfaceHeader
+      name="DrawerHeader"
+      slot="drawer"
+      slots={{
+        leading: DrawerNavigation,
+        media: DrawerMedia,
+        title: DrawerTitle,
+        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}
-      {showCloseButton && (
-        <DrawerCloseButton disabled={closeDisabled} size={closeSize} />
-      )}
-    </div>
+    </SurfaceHeader>
+  );
+}
+
+/** Moldura de ícone ou imagem que abre a linha do header. */
+function DrawerMedia(props: SurfaceMediaProps) {
+  return <SurfaceMedia slot="drawer-media" {...props} />;
+}
+
+/** Região introdutória do header — o voltar de um fluxo modal encadeado. */
+function DrawerNavigation({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-navigation-content"
+      className={cn("flex min-w-0 shrink-0 items-center", className)}
+      {...props}
+    />
+  );
+}
+
+/** Ações da tela no header, antes do botão de fechar. */
+function DrawerActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-actions"
+      className={cn(surfaceActionsClasses, className)}
+      {...props}
+    />
   );
 }
 
 function DrawerBody({ className, style, ...props }: React.ComponentProps<"div">) {
+  const layout = useSurfaceLayout("drawer");
   return (
     <div
       data-slot="drawer-body"
-      className={cn("min-h-0 flex-1 overflow-y-auto p-4", className)}
+      className={cn(
+        "min-h-0 flex-1 overflow-y-auto",
+        surfaceRegionClasses("drawer", layout, "body"),
+        className,
+      )}
       style={{ "--opus-inline-gutter": "1rem", ...style } as React.CSSProperties}
       {...props}
     />
@@ -149,11 +219,16 @@ function DrawerBody({ className, style, ...props }: React.ComponentProps<"div">)
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  const layout = useSurfaceLayout("drawer");
   return (
     <div
       data-slot="drawer-footer"
       className={cn(
-        "mt-auto flex shrink-0 flex-row justify-end gap-2 border-t p-4",
+        // `mt-auto` é a divergência declarada do Drawer: o conteúdo lateral quase nunca
+        // 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"),
         className,
       )}
       {...props}
@@ -163,21 +238,45 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
 
 function DrawerTitle({
   className,
+  level,
+  children,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+}: React.ComponentProps<typeof DrawerPrimitive.Title> & {
+  /** Hierarquia do documento. Sem ele vale o `h2` que a primitiva emite. */
+  level?: HeadingLevel;
+}) {
+  const layout = useSurfaceLayout("drawer");
+  const classes = cn(
+    "min-w-0 truncate",
+    surfaceTitleClasses("drawer", layout),
+    className,
+  );
+  // O nível troca a TAG do mesmo nó, via `asChild` — a escala continua vindo do layout.
+  if (level === undefined) {
+    return (
+      <DrawerPrimitive.Title
+        data-slot="drawer-title"
+        className={classes}
+        {...props}
+      >
+        {children}
+      </DrawerPrimitive.Title>
+    );
+  }
+  const Heading = headingTags[level];
   return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn(
-        "min-w-0 flex-1 text-lg font-semibold leading-none text-foreground",
-        className,
-      )}
-      {...props}
-    />
+    <DrawerPrimitive.Title asChild {...props}>
+      <Heading data-slot="drawer-title" className={classes}>
+        {children}
+      </Heading>
+    </DrawerPrimitive.Title>
   );
 }
 
 export {
+  DrawerActions,
+  DrawerMedia,
+  DrawerNavigation,
   Drawer,
   DrawerTrigger,
   DrawerClose,

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

@@ -1,6 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from '../../lib/cn.ts'
+import { iconTileVariants } from './icon-tile.tsx'
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -34,7 +35,7 @@ const emptyMediaVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+        icon: iconTileVariants({ size: "lg", variant: "subtle" }),
       },
     },
     defaultVariants: {

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

@@ -1,21 +1,41 @@
-import { useMemo } from "react"
+import { createContext, useContext, useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from '../../lib/cn.ts'
 import { Label } from './label.tsx'
 import { Separator } from './separator.tsx'
 
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+export type FieldSetVariant = "plain" | "framed"
+
+export interface FieldSetProps extends React.ComponentProps<"fieldset"> {
+  /** `framed` envolve o conjunto com a moldura canônica e integra a legenda à borda. */
+  variant?: FieldSetVariant
+}
+
+const FieldSetVariantContext = createContext<FieldSetVariant>("plain")
+
+function FieldSet({
+  className,
+  children,
+  variant = "plain",
+  ...props
+}: FieldSetProps) {
   return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
+    <FieldSetVariantContext.Provider value={variant}>
+      <fieldset
+        data-slot="field-set"
+        data-variant={variant}
+        className={cn(
+          "flex flex-col gap-6",
+          "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+          variant === "framed" && "rounded-lg border border-border px-4 pb-4",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </fieldset>
+    </FieldSetVariantContext.Provider>
   )
 }
 
@@ -29,6 +49,8 @@ function FieldLegend({
   variant?: "legend" | "label" | "section"
   icon?: React.ReactNode
 }) {
+  const fieldSetVariant = useContext(FieldSetVariantContext)
+
   return (
     <legend
       data-slot="field-legend"
@@ -38,7 +60,10 @@ function FieldLegend({
         icon !== undefined && "flex items-center gap-2",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
-        "data-[variant=section]:w-full data-[variant=section]:border-b data-[variant=section]:border-border/70 data-[variant=section]:pb-2 data-[variant=section]:text-sm data-[variant=section]:font-semibold",
+        fieldSetVariant === "plain" &&
+          "data-[variant=section]:w-full data-[variant=section]:border-b data-[variant=section]:border-border/70 data-[variant=section]:pb-2",
+        "data-[variant=section]:text-sm data-[variant=section]:font-semibold",
+        fieldSetVariant === "framed" && "-ml-2 w-auto px-2",
         className
       )}
       {...props}
@@ -47,10 +72,7 @@ function FieldLegend({
         <span
           data-slot="field-legend-icon"
           aria-hidden="true"
-          className={cn(
-            "inline-flex shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4",
-            variant === "section" && "size-7 rounded-md bg-muted",
-          )}
+          className="inline-flex shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4"
         >
           {icon}
         </span>