@softize/opus 18.5.0 → 20.0.0

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

@@ -2,11 +2,26 @@ 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,
 } from "./close-button.tsx";
-import { overlayClasses } from "./dialog.tsx";
+import { overlayClasses, preventDismissWhen } from "./dialog.tsx";
 
 interface DrawerContentContextValue {
   showCloseButton: boolean;
@@ -78,19 +93,29 @@ function DrawerContent({
   showCloseButton = true,
   closeDisabled = false,
   closeSize = "sm",
+  layout = "sectioned",
   "aria-describedby": ariaDescribedBy,
+  onEscapeKeyDown,
+  onInteractOutside,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
+  /**
+   * Bloqueia o fechamento enquanto a superfície está ocupada: desabilita a ação “Fechar”, que
+   * continua visível, e cancela Esc e clique ou foco fora depois dos handlers do consumidor.
+   */
   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" &&
@@ -104,13 +129,17 @@ function DrawerContent({
           className,
         )}
         aria-describedby={ariaDescribedBy}
+        onEscapeKeyDown={preventDismissWhen(closeDisabled, onEscapeKeyDown)}
+        onInteractOutside={preventDismissWhen(closeDisabled, onInteractOutside)}
         {...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 +150,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 +227,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 +246,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

@@ -69,7 +69,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+function EmptyDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-description"

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

@@ -46,7 +46,7 @@ import {
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
-import { focusRing } from './control.ts'
+import { controlHeight, focusRing } from './control.ts'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command.tsx'
 import { Popover, PopoverContent, PopoverTrigger } from './popover.tsx'
 
@@ -142,8 +142,12 @@ export function IconPicker({
           aria-describedby={ariaDescribedBy}
           data-slot="icon-picker"
           className={cn(
-            'flex h-10 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',
+            // 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',
+            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',
             className,
           )}
         >

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

@@ -41,6 +41,13 @@ export interface IconTileProps
   extends React.ComponentProps<'span'>,
     IconTileStyleOptions {}
 
+/**
+ * Preenche os padrões de `context`, `variant` e `size` (`neutral`, `subtle`, `default`).
+ *
+ * @deprecated Não há decisão a tomar com os valores resolvidos fora do próprio IconTile. Para a
+ * moldura, renderize `IconTile`; para aplicá-la a outro elemento, use `iconTileVariants`, que já
+ * aplica os mesmos padrões. Sai do pacote numa próxima versão major.
+ */
 export function resolveIconTileStyle({
   context,
   variant,

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

@@ -37,7 +37,12 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-0.3125rem)] [&>svg:not([class*='size-'])]:size-4",
+  [
+    "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-0.3125rem)] [&>svg:not([class*='size-'])]:size-4",
+    // O addon acompanha o controle desabilitado sem depender do `data-disabled` manual. Só o
+    // controle conta: um InputGroupButton desabilitado não apaga o grupo inteiro.
+    "group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50",
+  ],
   {
     variants: {
       align: {
@@ -72,7 +77,9 @@ function InputGroupAddon({
         if ((e.target as HTMLElement).closest("button")) {
           return
         }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
+        e.currentTarget.parentElement
+          ?.querySelector<HTMLElement>("input, textarea")
+          ?.focus()
       }}
       {...props}
     />

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

@@ -49,7 +49,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-context-danger data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[0.1875rem] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-context-danger data-[active=true]:aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-context-danger/40",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input bg-muted/30 text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-context-danger data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[0.1875rem] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-context-danger data-[active=true]:aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-context-danger/40",
         className
       )}
       {...props}

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

@@ -15,7 +15,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
   )
 }
 
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
     <kbd
       data-slot="kbd-group"

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

@@ -12,6 +12,9 @@ function Label({
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        // O Field declara o grupo nomeado `group/field`: sem o sufixo, o Label não enxerga o
+        // `data-disabled` dele e continua aceso ao lado de um controle desabilitado.
+        "group-data-[disabled=true]/field:pointer-events-none group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}

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

@@ -12,6 +12,11 @@ function Menu({
   return <MenuPrimitive.Root data-slot="menu" {...props} />
 }
 
+/**
+ * @deprecated `MenuContent` já renderiza o painel num portal próprio, então envolvê-lo com
+ * `MenuPortal` não muda onde o painel aparece. Use `MenuContent` diretamente. Sai do pacote numa
+ * próxima versão major.
+ */
 function MenuPortal({
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Portal>) {

package/src/ui/components/primitives/metric-card.tsx

@@ -42,7 +42,25 @@ interface MetricCardBaseProps extends Omit<React.ComponentProps<typeof Card>, 'c
   secondaryMetric?: MetricCardSecondaryMetric
 }
 
+type MetricCardActivationProps =
+  | {
+      /** Indica se a medida controla o recorte atualmente aplicado. */
+      active: boolean
+      /** Ativa a medida como recorte ou seleção. */
+      onActivate: () => void
+      /** Nome acessível da ativação, como “Filtrar por Agendados”. */
+      activationLabel: string
+      /** Use `onActivate`; o clique genérico conflita com os controles internos do card. */
+      onClick?: never
+    }
+  | {
+      active?: never
+      onActivate?: never
+      activationLabel?: never
+    }
+
 export type MetricCardProps = MetricCardBaseProps &
+  MetricCardActivationProps &
   (
     | {
         /** Nome curto da medida apresentada. */
@@ -75,6 +93,9 @@ export function MetricCard({
   tone,
   action,
   secondaryMetric,
+  active,
+  onActivate,
+  activationLabel,
   loading = false,
   className,
   ...props
@@ -84,6 +105,7 @@ export function MetricCard({
   }
   const hasIcon = icon !== undefined && icon !== null
   const resolvedContext = context ?? (tone === 'warning' ? 'warning' : 'neutral')
+  const interactive = onActivate !== undefined
 
   const primaryCard = (
     <Card
@@ -92,9 +114,9 @@ export function MetricCard({
       className={cn(
         'min-w-0 p-4',
         secondaryMetric !== undefined && 'relative z-10',
-        secondaryMetric === undefined && className,
+        secondaryMetric === undefined && !interactive && className,
       )}
-      {...(secondaryMetric === undefined ? props : {})}
+      {...(secondaryMetric === undefined && !interactive ? props : {})}
     >
       {loading ? (
         <div className="space-y-3">
@@ -106,7 +128,10 @@ export function MetricCard({
         <>
           <div className="flex items-start justify-between gap-3">
             <div className="flex min-w-0 items-center gap-1.5">
-              <div data-slot="metric-card-label" className="min-w-0 truncate text-sm font-medium text-muted-foreground">
+              <div
+                data-slot="metric-card-label"
+                className="min-w-0 truncate text-sm font-medium text-muted-foreground"
+              >
                 {label}
               </div>
               {labelAction !== undefined && (
@@ -129,7 +154,10 @@ export function MetricCard({
               </span>
             )}
           </div>
-          <div data-slot="metric-card-value" className="mt-3 text-2xl font-semibold tracking-tight tabular-nums">
+          <div
+            data-slot="metric-card-value"
+            className="mt-3 text-2xl font-semibold tracking-tight tabular-nums"
+          >
             {value}
           </div>
           {description !== undefined && (
@@ -147,46 +175,77 @@ export function MetricCard({
     </Card>
   )
 
-  if (secondaryMetric === undefined) return primaryCard
-
-  return (
-    <div
-      {...props}
-      data-slot="metric-card-stack"
-      aria-busy={loading || undefined}
-      className={cn('relative isolate min-w-0', className)}
-    >
-      {primaryCard}
-      <Card
-        data-slot="metric-card-secondary"
-        className="relative z-0 -mt-8 flex w-full min-w-0 items-center gap-1.5 bg-[color-mix(in_oklab,var(--card)_88%,black)] px-4 pt-9 pb-1"
+  const metric =
+    secondaryMetric === undefined ? (
+      primaryCard
+    ) : (
+      <div
+        {...(!interactive ? props : {})}
+        data-slot="metric-card-stack"
+        aria-busy={loading || undefined}
+        className={cn('relative isolate min-w-0', !interactive && className)}
       >
-        {loading ? (
-          <Skeleton className="h-5 w-full" />
-        ) : (
-          <>
-            <div
-              data-slot="metric-card-secondary-value"
-              className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums"
-            >
-              {secondaryMetric.value}
-            </div>
-            <div className="flex min-w-0 items-center gap-1.5">
+        {primaryCard}
+        <Card
+          data-slot="metric-card-secondary"
+          className="relative z-0 -mt-8 flex w-full min-w-0 items-center gap-1.5 bg-[color-mix(in_oklab,var(--card)_88%,black)] px-4 pt-9 pb-1"
+        >
+          {loading ? (
+            <Skeleton className="h-5 w-full" />
+          ) : (
+            <>
               <div
-                data-slot="metric-card-secondary-label"
-                className="min-w-0 truncate text-xs font-medium text-muted-foreground"
+                data-slot="metric-card-secondary-value"
+                className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums"
               >
-                {secondaryMetric.label}
+                {secondaryMetric.value}
               </div>
-              {secondaryMetric.labelAction !== undefined && (
-                <div data-slot="metric-card-secondary-label-action" className="shrink-0">
-                  {secondaryMetric.labelAction}
+              <div className="flex min-w-0 items-center gap-1.5">
+                <div
+                  data-slot="metric-card-secondary-label"
+                  className="min-w-0 truncate text-xs font-medium text-muted-foreground"
+                >
+                  {secondaryMetric.label}
                 </div>
-              )}
-            </div>
-          </>
-        )}
-      </Card>
+                {secondaryMetric.labelAction !== undefined && (
+                  <div data-slot="metric-card-secondary-label-action" className="shrink-0">
+                    {secondaryMetric.labelAction}
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </Card>
+      </div>
+    )
+
+  if (!interactive) return metric
+
+  return (
+    <div
+      {...props}
+      data-slot="metric-card-activation"
+      data-active={active}
+      className={cn(
+        // Ativa = a borda na cor primária, e só. Anel somaria uma segunda linha de
+        // outra cor à borda e, pintado para fora, sumiria no primeiro ancestral com
+        // `overflow-hidden`.
+        'relative isolate min-w-0 data-[active=true]:[&_[data-slot=metric-card]]:border-primary',
+        className,
+      )}
+    >
+      <button
+        type="button"
+        data-slot="metric-card-activation-control"
+        className="peer absolute inset-0 z-0 cursor-pointer rounded-xl outline-none"
+        aria-label={activationLabel}
+        aria-pressed={active}
+        disabled={loading}
+        onClick={onActivate}
+      />
+      <div className="pointer-events-none relative z-10 h-full [&>[data-slot=metric-card]]:h-full [&_[data-slot=metric-card]]:transition-colors [&_[data-slot=metric-card-action]]:pointer-events-auto [&_[data-slot=metric-card-label-action]]:pointer-events-auto [&_[data-slot=metric-card-secondary-label-action]]:pointer-events-auto peer-hover:[&_[data-slot=metric-card]]:border-foreground/40 peer-focus-visible:[&_[data-slot=metric-card]]:ring-2 peer-focus-visible:[&_[data-slot=metric-card]]:ring-inset peer-focus-visible:[&_[data-slot=metric-card]]:ring-ring">
+        {metric}
+      </div>
     </div>
   )
 }

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

@@ -59,7 +59,7 @@ function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+function PopoverTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="popover-title"

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

@@ -32,13 +32,21 @@ export interface ProgressProps extends React.ComponentProps<typeof ProgressPrimi
 function Progress({
   className,
   value,
+  max = 100,
   context = 'primary',
   ...props
 }: ProgressProps) {
+  // A largura é a fração de `max`, não de 100: `value={3} max={4}` enche três quartos. Um `max`
+  // não positivo cai em 100, como o Radix faz no Root.
+  const scale = max > 0 ? max : 100
+  const percent = ((value ?? 0) / scale) * 100
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
       data-context={context}
+      // O Root precisa do `value` para anunciar o andamento (aria-valuenow, data-state).
+      value={value}
+      max={max}
       className={cn(
         "relative h-2 w-full overflow-hidden rounded-full",
         trackClasses[context],
@@ -49,7 +57,7 @@ function Progress({
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
         className={cn("h-full w-full flex-1 transition-all", indicatorClasses[context])}
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        style={{ transform: `translateX(-${100 - percent}%)` }}
       />
     </ProgressPrimitive.Root>
   )