@softize/opus 22.2.0 → 24.0.0

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,
@@ -25,9 +25,12 @@ import {
   Layers,
   LayoutGrid,
   Lightbulb,
+  Mail,
   MapPin,
+  MessageCircle,
   MessageSquare,
   Package,
+  Phone,
   Rocket,
   Settings,
   ShoppingCart,
@@ -44,71 +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,
-  'map-pin': MapPin,
-  'message-square': MessageSquare,
-  'package': Package,
-  '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;
 }
 
 /**
@@ -121,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}>
@@ -143,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>
@@ -162,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">
@@ -174,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>
@@ -188,5 +211,5 @@ export function IconPicker({
         </Command>
       </PopoverContent>
     </Popover>
-  )
+  );
 }