@softize/opus 23.0.0 → 24.0.1

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

@@ -13,11 +13,11 @@ import {
 } from "../patterns/surface-anatomy.ts";
 import { FillBoundary } from "../patterns/fill-region.ts";
 import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
-import { SurfaceHeader } from "../patterns/surface-header.tsx";
+import { StructuralHeader } from "../patterns/structural-header.tsx";
 import {
-  SurfaceMedia,
-  type SurfaceMediaProps,
-} from "../patterns/surface-media.tsx";
+  StructuralMedia,
+  type StructuralMediaProps,
+} from "../patterns/structural-media.tsx";
 import { CloseButton, type CloseButtonSize } from "./close-button.tsx";
 
 export type DialogMode = "default" | "alert";
@@ -43,6 +43,8 @@ const DialogContentContext = React.createContext<DialogContentContextValue>({
   closeSize: "sm",
 });
 
+const DialogIntroContext = React.createContext(false);
+
 /**
  * Compõe o handler de dispensa do consumidor com o bloqueio de `closeDisabled`: o handler dele
  * roda primeiro e, com a superfície bloqueada, o evento é cancelado para que Esc, clique fora ou
@@ -316,7 +318,7 @@ export function DialogHeader({
   }
 
   return (
-    <SurfaceHeader
+    <StructuralHeader
       name="DialogHeader"
       slot="dialog"
       slots={{
@@ -341,7 +343,7 @@ export function DialogHeader({
       {...props}
     >
       {children}
-    </SurfaceHeader>
+    </StructuralHeader>
   );
 }
 
@@ -373,31 +375,55 @@ export function DialogActions({
   );
 }
 
-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 size-16 *:[svg:not([class*="size-"])]:size-8',
-        className,
-      )}
+/** 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>
+      <StructuralHeader
+        name="DialogIntro"
+        slot="dialog-intro"
+        slots={{ title: DialogTitle, actions: DialogIntroActions }}
+        leadingPlacement="inline"
+        titleRequired
+        className={cn("text-left", className)}
+        {...props}
+      >
+        {children}
+      </StructuralHeader>
+    </DialogIntroContext.Provider>
+  );
+}
+
+/** 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}
     />
-  ) : (
-    <SurfaceMedia slot="dialog-media" {...props} className={className} />
+  );
+}
+
+export function DialogMedia({ className, ...props }: StructuralMediaProps) {
+  return (
+    <StructuralMedia slot="dialog-media" {...props} className={className} />
   );
 }
 
 export function DialogBody({
+  flush = false,
   className,
   style,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<"div"> & { flush?: boolean }) {
   const { mode } = useDialogContext();
   const layout = useSurfaceLayout("dialog");
   return (
@@ -405,14 +431,15 @@ export function DialogBody({
       data-slot="dialog-body"
       className={cn(
         mode === "alert"
-          ? "min-w-0"
+          ? "flex min-w-0 flex-col gap-6"
           : cn(
               "min-h-0 flex-1 overflow-y-auto",
-              surfaceRegionClasses("dialog", layout, "body"),
+              surfaceRegionClasses("dialog", layout, "body", { flush }),
             ),
         className,
       )}
       style={style}
+      data-flush={flush ? "true" : undefined}
       {...props}
     />
   );
@@ -451,12 +478,19 @@ 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 : "min-w-0 truncate",
-    surfaceTitleClasses("dialog", layout),
+    mode === "alert"
+      ? undefined
+      : intro
+        ? "min-w-0 whitespace-normal"
+        : "min-w-0 truncate",
+    intro
+      ? "text-xl font-semibold leading-tight tracking-tight"
+      : surfaceTitleClasses("dialog", layout),
     className,
   );
   // O nível troca a TAG do mesmo nó, via `asChild` — nunca aninha um heading dentro

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

@@ -12,11 +12,11 @@ import {
   type SurfaceLayout,
 } from "../patterns/surface-anatomy.ts";
 import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
-import { SurfaceHeader } from "../patterns/surface-header.tsx";
+import { StructuralHeader } from "../patterns/structural-header.tsx";
 import {
-  SurfaceMedia,
-  type SurfaceMediaProps,
-} from "../patterns/surface-media.tsx";
+  StructuralMedia,
+  type StructuralMediaProps,
+} from "../patterns/structural-media.tsx";
 import { CloseButton, type CloseButtonSize } from "./close-button.tsx";
 import { overlayClasses, preventDismissWhen } from "./dialog.tsx";
 
@@ -32,6 +32,8 @@ const DrawerContentContext = React.createContext<DrawerContentContextValue>({
   closeSize: "sm",
 });
 
+const DrawerIntroContext = React.createContext(false);
+
 function Drawer({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
@@ -151,7 +153,7 @@ function DrawerHeader({
   const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DrawerContentContext);
   return (
-    <SurfaceHeader
+    <StructuralHeader
       name="DrawerHeader"
       slot="drawer"
       slots={{
@@ -176,13 +178,13 @@ function DrawerHeader({
       {...props}
     >
       {children}
-    </SurfaceHeader>
+    </StructuralHeader>
   );
 }
 
 /** Moldura de ícone ou imagem que abre a linha do header. */
-function DrawerMedia(props: SurfaceMediaProps) {
-  return <SurfaceMedia slot="drawer-media" {...props} />;
+function DrawerMedia(props: StructuralMediaProps) {
+  return <StructuralMedia slot="drawer-media" {...props} />;
 }
 
 /** Região introdutória do header — o voltar de um fluxo modal encadeado. */
@@ -210,21 +212,60 @@ 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, 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({
+  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">) {
+}: React.ComponentProps<"div"> & { flush?: boolean }) {
   const layout = useSurfaceLayout("drawer");
   return (
     <div
       data-slot="drawer-body"
       className={cn(
         "min-h-0 flex-1 overflow-y-auto",
-        surfaceRegionClasses("drawer", layout, "body"),
+        surfaceRegionClasses("drawer", layout, "body", { flush }),
         className,
       )}
       style={style}
+      data-flush={flush ? "true" : undefined}
       {...props}
     />
   );
@@ -257,10 +298,13 @@ 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(
-    "min-w-0 truncate",
-    surfaceTitleClasses("drawer", layout),
+    intro ? "min-w-0 whitespace-normal" : "min-w-0 truncate",
+    intro
+      ? "text-xl font-semibold leading-tight tracking-tight"
+      : surfaceTitleClasses("drawer", layout),
     className,
   );
   // O nível troca a TAG do mesmo nó, via `asChild` — a escala continua vindo do layout.
@@ -287,6 +331,8 @@ function DrawerTitle({
 
 export {
   DrawerActions,
+  DrawerIntro,
+  DrawerIntroActions,
   DrawerMedia,
   DrawerNavigation,
   Drawer,

package/src/ui/components/primitives/icon-picker.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import * as React from "react";
 import {
   Activity,
   Banknote,
@@ -47,74 +47,81 @@ import {
   Wrench,
   Zap,
   type LucideIcon,
-} from 'lucide-react'
-import { cn } from '../../lib/cn.ts'
-import { controlHeight, focusRing } from './control.ts'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command.tsx'
-import { Popover, PopoverContent, PopoverTrigger } from './popover.tsx'
+} from "lucide-react";
+import { cn } from "../../lib/cn.ts";
+import { controlHeight, focusRing } from "./control.ts";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command.tsx";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.tsx";
 
 /** Paleta default (curada): nomes kebab-case estáveis → componente lucide. Curta de
  *  propósito — cada ícone importado entra no bundle; pra outro vocabulário, passe
  *  `icons` (o value salvo continua sendo só o nome). */
 export const iconPickerIcons: Record<string, LucideIcon> = {
-  'activity': Activity,
-  'banknote': Banknote,
-  'bell': Bell,
-  'box': Box,
-  'briefcase': Briefcase,
-  'building': Building2,
-  'calendar': Calendar,
-  'chart-bar': ChartBar,
-  'chart-line': ChartLine,
-  'chart-pie': ChartPie,
-  'clipboard-list': ClipboardList,
-  'clock': Clock,
-  'credit-card': CreditCard,
-  'database': Database,
-  'file-text': FileText,
-  'flag': Flag,
-  'folder': Folder,
-  'gauge': Gauge,
-  'globe': Globe,
-  'heart': Heart,
-  'layers': Layers,
-  'layout-grid': LayoutGrid,
-  'lightbulb': Lightbulb,
-  'mail': Mail,
-  'map-pin': MapPin,
-  'message-circle': MessageCircle,
-  'message-square': MessageSquare,
-  'package': Package,
-  'phone': Phone,
-  'rocket': Rocket,
-  'settings': Settings,
-  'shopping-cart': ShoppingCart,
-  'star': Star,
-  'store': Store,
-  'table': Table,
-  'target': Target,
-  'trending-down': TrendingDown,
-  'trending-up': TrendingUp,
-  'truck': Truck,
-  'user': UserRound,
-  'users': UsersRound,
-  'wallet': Wallet,
-  'wrench': Wrench,
-  'zap': Zap,
-}
+  activity: Activity,
+  banknote: Banknote,
+  bell: Bell,
+  box: Box,
+  briefcase: Briefcase,
+  building: Building2,
+  calendar: Calendar,
+  "chart-bar": ChartBar,
+  "chart-line": ChartLine,
+  "chart-pie": ChartPie,
+  "clipboard-list": ClipboardList,
+  clock: Clock,
+  "credit-card": CreditCard,
+  database: Database,
+  "file-text": FileText,
+  flag: Flag,
+  folder: Folder,
+  gauge: Gauge,
+  globe: Globe,
+  heart: Heart,
+  layers: Layers,
+  "layout-grid": LayoutGrid,
+  lightbulb: Lightbulb,
+  mail: Mail,
+  "map-pin": MapPin,
+  "message-circle": MessageCircle,
+  "message-square": MessageSquare,
+  package: Package,
+  phone: Phone,
+  rocket: Rocket,
+  settings: Settings,
+  "shopping-cart": ShoppingCart,
+  star: Star,
+  store: Store,
+  table: Table,
+  target: Target,
+  "trending-down": TrendingDown,
+  "trending-up": TrendingUp,
+  truck: Truck,
+  user: UserRound,
+  users: UsersRound,
+  wallet: Wallet,
+  wrench: Wrench,
+  zap: Zap,
+};
 
 export interface IconPickerProps {
   /** Nome do ícone selecionado (chave da paleta) — '' = nenhum. */
-  value: string
-  onChange: (name: string) => void
+  value: string;
+  onChange: (name: string) => void;
   /** Paleta nome → componente. Default: `iconPickerIcons` (curada). */
-  icons?: Record<string, LucideIcon>
-  placeholder?: string
-  disabled?: boolean
-  className?: string
-  id?: string
-  'aria-invalid'?: boolean
-  'aria-describedby'?: string
+  icons?: Record<string, LucideIcon>;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  "aria-invalid"?: boolean;
+  "aria-describedby"?: string;
 }
 
 /**
@@ -127,15 +134,15 @@ export function IconPicker({
   value,
   onChange,
   icons = iconPickerIcons,
-  placeholder = 'Selecione um ícone…',
+  placeholder = "Selecione um ícone…",
   disabled,
   className,
   id,
-  'aria-invalid': ariaInvalid,
-  'aria-describedby': ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
 }: IconPickerProps): React.ReactElement {
-  const [open, setOpen] = React.useState(false)
-  const Current = value !== '' ? icons[value] : undefined
+  const [open, setOpen] = React.useState(false);
+  const Current = value !== "" ? icons[value] : undefined;
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -149,18 +156,20 @@ export function IconPicker({
           data-slot="icon-picker"
           className={cn(
             // Mesma altura do Input e do Select no tamanho default: lado a lado num form, alinham.
-            'flex w-full items-center gap-2 rounded-md border border-input bg-muted/30 px-3 text-sm outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+            "flex w-full items-center gap-2 rounded-md border border-input bg-control px-3 text-sm outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
             controlHeight.default,
             focusRing,
             // As mesmas classes de inválido do Input e do Select: o erro aparece na moldura.
-            'aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40',
+            "aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40",
             className,
           )}
         >
           {Current !== undefined ? (
             <>
               <Current className="size-4 shrink-0" />
-              <span data-slot="icon-picker-value" className="truncate">{value}</span>
+              <span data-slot="icon-picker-value" className="truncate">
+                {value}
+              </span>
             </>
           ) : (
             <span className="text-muted-foreground">{placeholder}</span>
@@ -168,7 +177,10 @@ export function IconPicker({
           <ChevronsUpDown className="ml-auto size-4 shrink-0 opacity-50" />
         </button>
       </PopoverTrigger>
-      <PopoverContent align="start" className="pointer-events-auto w-(--radix-popover-trigger-width) p-0">
+      <PopoverContent
+        align="start"
+        className="pointer-events-auto w-(--radix-popover-trigger-width) p-0"
+      >
         <Command>
           <CommandInput placeholder="Buscar ícone…" />
           <CommandList data-slot="icon-picker-list" className="max-h-60">
@@ -180,13 +192,18 @@ export function IconPicker({
                   data-slot="icon-picker-item"
                   value={name}
                   onSelect={() => {
-                    onChange(name === value ? '' : name)
-                    setOpen(false)
+                    onChange(name === value ? "" : name);
+                    setOpen(false);
                   }}
                 >
                   <Icon className="size-4" />
                   <span className="truncate">{name}</span>
-                  <Check className={cn('ml-auto size-4 shrink-0', value === name ? 'opacity-100' : 'opacity-0')} />
+                  <Check
+                    className={cn(
+                      "ml-auto size-4 shrink-0",
+                      value === name ? "opacity-100" : "opacity-0",
+                    )}
+                  />
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -194,5 +211,5 @@ export function IconPicker({
         </Command>
       </PopoverContent>
     </Popover>
-  )
+  );
 }

package/src/ui/components/primitives/input-group.tsx

@@ -1,20 +1,24 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '../../lib/cn.ts'
-import type { ControlShape } from './control.ts'
-import { Button, type ButtonProps } from './button.tsx'
-import { Input } from './input.tsx'
-import { Textarea } from './textarea.tsx'
+import { cn } from "../../lib/cn.ts";
+import type { ControlShape } from "./control.ts";
+import { Button, type ButtonProps } from "./button.tsx";
+import { Input } from "./input.tsx";
+import { Textarea } from "./textarea.tsx";
 
-function InputGroup({ className, shape = 'default', ...props }: React.ComponentProps<"div"> & { shape?: ControlShape }) {
+function InputGroup({
+  className,
+  shape = "default",
+  ...props
+}: React.ComponentProps<"div"> & { shape?: ControlShape }) {
   return (
     <div
       data-slot="input-group"
       data-shape={shape}
       role="group"
       className={cn(
-        "group/input-group relative flex w-full items-center rounded-md border border-input bg-muted/30 transition-[color,box-shadow] outline-none data-[shape=pill]:rounded-full dark:bg-input/30",
+        "group/input-group relative flex w-full items-center rounded-md border border-input bg-control transition-[color,box-shadow] outline-none data-[shape=pill]:rounded-full",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
@@ -29,11 +33,11 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:border-context-danger has-[[data-slot][aria-invalid=true]]:ring-context-danger/20 dark:has-[[data-slot][aria-invalid=true]]:ring-context-danger/40",
 
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -59,8 +63,8 @@ const inputGroupAddonVariants = cva(
     defaultVariants: {
       align: "inline-start",
     },
-  }
-)
+  },
+);
 
 function InputGroupAddon({
   className,
@@ -75,15 +79,15 @@ function InputGroupAddon({
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
         if ((e.target as HTMLElement).closest("button")) {
-          return
+          return;
         }
         e.currentTarget.parentElement
           ?.querySelector<HTMLElement>("input, textarea")
-          ?.focus()
+          ?.focus();
       }}
       {...props}
     />
-  )
+  );
 }
 
 /** Só o acabamento por tamanho: altura, quadrado e glifo vêm da escala de control.ts via Button. */
@@ -101,11 +105,14 @@ const inputGroupButtonVariants = cva(
     defaultVariants: {
       size: "xs",
     },
-  }
-)
+  },
+);
 
 /** Subconjunto da escala que cabe dentro de um campo: `xs`, `sm`, `icon-xs` e `icon-sm`. */
-type InputGroupButtonSize = Extract<NonNullable<ButtonProps['size']>, 'xs' | 'sm' | 'icon-xs' | 'icon-sm'>
+type InputGroupButtonSize = Extract<
+  NonNullable<ButtonProps["size"]>,
+  "xs" | "sm" | "icon-xs" | "icon-sm"
+>;
 
 function InputGroupButton({
   className,
@@ -113,7 +120,7 @@ function InputGroupButton({
   variant = "ghost",
   size = "xs",
   ...props
-}: Omit<ButtonProps, 'size'> & { size?: InputGroupButtonSize }) {
+}: Omit<ButtonProps, "size"> & { size?: InputGroupButtonSize }) {
   return (
     <Button
       type={type}
@@ -123,7 +130,7 @@ function InputGroupButton({
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
@@ -131,11 +138,11 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
     <span
       className={cn(
         "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupInput({
@@ -147,11 +154,11 @@ function InputGroupInput({
       data-slot="input-group-control"
       className={cn(
         "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupTextarea({
@@ -163,11 +170,11 @@ function InputGroupTextarea({
       data-slot="input-group-control"
       className={cn(
         "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -177,4 +184,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};