@softize/opus 12.11.0 → 13.1.0

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

@@ -4,6 +4,7 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
 } from "lucide-react";
+import { ptBR } from "date-fns/locale";
 import {
   DayPicker,
   getDefaultClassNames,
@@ -13,12 +14,34 @@ import {
 import { cn } from "../../lib/cn.ts";
 import { Button, buttonVariants } from "./button.tsx";
 
+/** Rótulos acessíveis da navegação em pt-BR — o react-day-picker só traduz nomes de mês e
+ *  dia pelo `locale`; os aria-labels dos controles continuariam em inglês. */
+const LABELS_PT_BR: NonNullable<React.ComponentProps<typeof DayPicker>["labels"]> = {
+  labelPrevious: () => "Mês anterior",
+  labelNext: () => "Próximo mês",
+  labelMonthDropdown: () => "Escolher o mês",
+  labelYearDropdown: () => "Escolher o ano",
+  labelDayButton: (date, modifiers, options) => {
+    const day = date.toLocaleDateString(options?.locale?.code ?? "pt-BR", {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    });
+    const prefix = modifiers.today ? "Hoje, " : "";
+    const suffix = modifiers.selected ? ", selecionado" : "";
+    return `${prefix}${day}${suffix}`;
+  },
+};
+
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   captionLayout = "label",
   buttonVariant = "ghost",
+  locale = ptBR,
+  labels,
   formatters,
   components,
   ...props
@@ -30,6 +53,8 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
+      locale={locale}
+      labels={{ ...LABELS_PT_BR, ...labels }}
       className={cn(
         "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-body]_&]:bg-transparent [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
@@ -38,8 +63,9 @@ function Calendar({
       )}
       captionLayout={captionLayout}
       formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
+        // O dateLib já carrega o `locale` em vigor: o dropdown fala a mesma língua da legenda.
+        formatMonthDropdown: (date, dateLib) =>
+          dateLib?.format(date, "LLL") ?? date.toLocaleString("pt-BR", { month: "short" }),
         ...formatters,
       }}
       classNames={{

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

@@ -120,7 +120,7 @@ function Carousel({
         onKeyDownCapture={handleKeyDown}
         className={cn("relative", className)}
         role="region"
-        aria-roledescription="carousel"
+        aria-roledescription="carrossel"
         data-slot="carousel"
         {...props}
       >
@@ -194,7 +194,7 @@ function CarouselPrevious({
       {...props}
     >
       <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
+      <span className="sr-only">Slide anterior</span>
     </Button>
   )
 }
@@ -224,7 +224,7 @@ function CarouselNext({
       {...props}
     >
       <ArrowRight />
-      <span className="sr-only">Next slide</span>
+      <span className="sr-only">Próximo slide</span>
     </Button>
   )
 }

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

@@ -193,7 +193,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
               return (
                 <div
                   key={i}
-                  className="max-w-[88%] self-start rounded-xl border border-destructive/30 bg-destructive/10 px-3.5 py-2.5 text-sm text-destructive"
+                  className="max-w-[88%] self-start rounded-xl border border-context-danger-border bg-context-danger-subtle px-3.5 py-2.5 text-sm text-context-danger-emphasis"
                 >
                   {item.content}
                 </div>

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

@@ -12,7 +12,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer size-4 shrink-0 rounded-[0.25rem] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        "peer size-4 shrink-0 rounded-[0.25rem] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-context-danger/40 dark:data-[state=checked]:bg-primary",
         className
       )}
       {...props}

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

@@ -28,8 +28,8 @@ function Command({
 }
 
 function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
+  title = "Paleta de comandos",
+  description = "Busque um comando para executar…",
   children,
   className,
   showCloseButton = true,

package/src/ui/components/primitives/control.ts

@@ -1,2 +1,14 @@
 /** Geometria compartilhada pelos controles inline da casa. */
 export type ControlShape = 'default' | 'pill'
+
+/**
+ * Anel de foco da casa: fino (0.1875rem), translúcido e encostado na borda — sem offset.
+ * Todo controle focável usa esta constante; espessuras próprias (`ring-2`, `ring-4`) ou
+ * `ring-offset-*` quebram a leitura de "foco" que o tema calibrou (ver theme.css, `--ring`).
+ */
+export const focusRing =
+  'focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50'
+
+/** O mesmo anel, disparado por um descendente focado (grupos que envolvem um campo). */
+export const focusRingWithin =
+  'focus-within:border-ring focus-within:ring-[0.1875rem] focus-within:ring-ring/50'

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

@@ -44,7 +44,7 @@ export function Copyable({
       {...props}
     >
       {children}
-      {copied ? <CheckIcon className="size-3.5 text-emerald-500" /> : <CopyIcon className="size-3.5" />}
+      {copied ? <CheckIcon className="size-3.5 text-context-success-emphasis" /> : <CopyIcon className="size-3.5" />}
     </button>
   )
 }

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

@@ -1,35 +1,136 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
 import { XIcon } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
+import { focusRing } from './control.ts'
 
-export function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+export type DialogMode = 'default' | 'alert'
+
+interface DialogContextValue {
+  mode: DialogMode
+  onResult?: (result: string) => void
+}
+
+const DialogContext = React.createContext<DialogContextValue>({ mode: 'default' })
+
+function useDialogContext(): DialogContextValue {
+  return React.useContext(DialogContext)
+}
+
+export interface DialogProps
+  extends React.ComponentProps<typeof DialogPrimitive.Root> {
+  /** `alert` exige uma resposta explícita e deriva `role="alertdialog"`. */
+  mode?: DialogMode
+  /** Recebe o `result` do `DialogClose` acionado. */
+  onResult?: (result: string) => void
+}
+
+export function Dialog({
+  mode = 'default',
+  onResult,
+  modal,
+  ...props
+}: DialogProps) {
+  const context = React.useMemo(() => ({ mode, onResult }), [mode, onResult])
+
+  return (
+    <DialogContext.Provider value={context}>
+      {mode === 'alert' ? (
+        <AlertDialogPrimitive.Root data-slot="dialog" {...props} />
+      ) : (
+        <DialogPrimitive.Root data-slot="dialog" modal={modal} {...props} />
+      )}
+    </DialogContext.Provider>
+  )
+}
+
+export function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  ) : (
+    <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  )
 }
 
-export function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+export function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  ) : (
+    <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  )
 }
 
-export function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+export interface DialogCloseProps
+  extends React.ComponentProps<typeof DialogPrimitive.Close> {
+  /** No modo `alert`, registra este controle como destino inicial seguro do foco. */
+  initialFocus?: boolean
+  /** Resposta entregue a `Dialog.onResult` antes do fechamento. */
+  result?: string
 }
 
-export function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+export function DialogClose({
+  initialFocus = false,
+  result,
+  onClick,
+  ...props
+}: DialogCloseProps) {
+  const root = useDialogContext()
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    onClick?.(event)
+    if (!event.defaultPrevented && result !== undefined) root.onResult?.(result)
+  }
+
+  if (root.mode === 'alert') {
+    const ClosePrimitive = initialFocus
+      ? AlertDialogPrimitive.Cancel
+      : AlertDialogPrimitive.Action
+    return (
+      <ClosePrimitive
+        data-slot="dialog-close"
+        data-initial-focus={initialFocus || undefined}
+        onClick={handleClick}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <DialogPrimitive.Close
+      data-slot="dialog-close"
+      data-initial-focus={initialFocus || undefined}
+      onClick={handleClick}
+      {...props}
+    />
+  )
 }
 
+/** Véu compartilhado por Dialog e Drawer: mesmo escurecimento, desfoque e animação. */
+export const overlayClasses =
+  'fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0'
+
 export function DialogOverlay({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
+  const { mode } = useDialogContext()
+  const overlay = cn(overlayClasses, className)
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={overlay}
+      {...props}
+    />
+  ) : (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      className={cn(
-        'fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
-        className,
-      )}
+      className={overlay}
       {...props}
     />
   )
@@ -38,32 +139,54 @@ export function DialogOverlay({
 export function DialogContent({
   className,
   children,
-  showCloseButton = true,
+  showCloseButton,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  /** Mostra o "X" de fechar no canto. Desligue pra um modal que exige ação explícita. */
+  /** Mostra o “X” no modo padrão. O modo `alert` exige uma resposta identificável. */
   showCloseButton?: boolean
 }) {
+  const { mode } = useDialogContext()
+  const showClose = showCloseButton ?? mode !== 'alert'
+  const contentClasses =
+    'fixed left-[50%] top-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-clip rounded-xl border border-border bg-background text-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95'
+
+  if (mode === 'alert') {
+    return (
+      <DialogPortal>
+        <DialogOverlay />
+        <AlertDialogPrimitive.Content
+          data-slot="dialog-content"
+          data-mode="alert"
+          className={cn(contentClasses, 'grid max-w-xs gap-4 p-6', className)}
+          {...props}
+        >
+          {children}
+        </AlertDialogPrimitive.Content>
+      </DialogPortal>
+    )
+  }
+
   return (
     <DialogPortal>
       <DialogOverlay />
-      {/* Superfície elevada: mantemos bg-card (divergência da casa; o shadcn usa bg-background). */}
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        data-mode="default"
         className={cn(
-          // Superfície PURA: só a casca (bg/raio/sombra) + coluna flex com teto de
-          // altura. O padding mora nos SLOTS (Header/Body/Footer), não aqui — assim ninguém
-          // precisa negar margem pra escapar de um p-6 embutido.
-          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-clip rounded-xl bg-card text-card-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          contentClasses,
+          'flex max-h-[85vh] flex-col sm:max-w-lg',
           className,
         )}
         {...props}
       >
         {children}
-        {showCloseButton && (
+        {showClose && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className={cn(
+              "absolute right-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              focusRing,
+            )}
           >
             <XIcon />
             <span className="sr-only">Fechar</span>
@@ -74,17 +197,18 @@ export function DialogContent({
   )
 }
 
-export function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-header"
-      // Fixo (shrink-0), com divisor embaixo (border-b). p-5: padding igual nos quatro
-      // lados, casando com o body. O :has tira o divisor quando o header é seguido
-      // DIRETO pelo footer (confirm sem body) — senão o border-b dele encostaria no
-      // A compensação coincide com a soma das hairlines; o divisor fica no footer.
       className={cn(
-        'flex shrink-0 flex-col gap-2 border-b p-5 text-center sm:text-left',
-        '[&:has(+[data-slot=dialog-footer])]:border-b-0',
+        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 flex-col gap-2 border-b p-5 text-center sm:text-left [&:has(+[data-slot=dialog-footer])]:border-b-0',
         className,
       )}
       {...props}
@@ -92,27 +216,51 @@ export function DialogHeader({ className, ...props }: React.ComponentProps<'div'
   )
 }
 
-export function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-media"
+      className={cn(
+        'mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted *:[svg:not([class*="size-"])]:size-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DialogBody({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-body"
-      // O miolo que ROLA: cresce, scrolla e padda a si mesmo. Pra corpo edge-to-edge
-      // (cmdk, iframe de lente) passe `className` zerando o padding.
-      className={cn('min-h-0 flex-1 overflow-y-auto p-5', className)}
+      className={cn(
+        mode === 'alert' ? 'min-w-0' : 'min-h-0 flex-1 overflow-y-auto p-5',
+        className,
+      )}
       {...props}
     />
   )
 }
 
-export function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-footer"
-      // Faixa destacada (divergência da casa, ao estilo do site do shadcn): borda em cima
-      // + fundo muted. Sangra até as bordas sozinha — o content não tem padding, então não
-      // há -mx pra compensar; o recorte do content arredonda o canto de baixo.
       className={cn(
-        'flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end',
+        mode === 'alert'
+          ? 'grid grid-cols-2 gap-2 [&>*:only-child]:col-span-full'
+          : 'flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}
@@ -124,7 +272,14 @@ export function DialogTitle({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
+  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('text-lg font-semibold leading-none', className)}
@@ -137,7 +292,14 @@ export function DialogDescription({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  ) : (
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn('text-sm text-muted-foreground', className)}

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

@@ -5,6 +5,11 @@ import { cn } from '../../lib/cn.ts'
 
 export type DotContext = UiContext
 export type DotVariant = 'solid' | 'outline'
+/**
+ * @deprecated Aliases de migração: `default` → `context="primary"`, `secondary` →
+ * `context="neutral"`, `destructive` → `context="danger"`; `success`, `warning` e `info` → o
+ * `context` homônimo. Declare `context` + `variant`.
+ */
 export type LegacyDotVariant =
   | 'default'
   | 'secondary'

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

@@ -3,6 +3,8 @@ import { XIcon } from "lucide-react";
 import { Dialog as DrawerPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
+import { focusRing } from "./control.ts";
+import { overlayClasses } from "./dialog.tsx";
 
 function Drawer({
   ...props
@@ -36,7 +38,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        overlayClasses,
         className,
       )}
       {...props}
@@ -60,7 +62,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "fixed z-50 flex flex-col gap-4 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",
+          "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" &&
             "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           side === "left" &&
@@ -75,9 +77,14 @@ function DrawerContent({
       >
         {children}
         {showCloseButton && (
-          <DrawerPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <DrawerPrimitive.Close
+            className={cn(
+              "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary",
+              focusRing,
+            )}
+          >
             <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
+            <span className="sr-only">Fechar</span>
           </DrawerPrimitive.Close>
         )}
       </DrawerPrimitive.Content>
@@ -89,7 +96,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
+      className={cn("flex shrink-0 flex-col gap-2 border-b p-5", className)}
       {...props}
     />
   );
@@ -99,7 +106,7 @@ function DrawerBody({ className, ...props }: React.ComponentProps<"div">) {
   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 p-5", className)}
       {...props}
     />
   );
@@ -109,7 +116,10 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      className={cn(
+        "mt-auto flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end",
+        className,
+      )}
       {...props}
     />
   );
@@ -122,7 +132,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("font-semibold text-foreground", className)}
+      className={cn("text-lg font-semibold leading-none text-foreground", className)}
       {...props}
     />
   );

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

@@ -81,10 +81,10 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
   )
 }
 
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+function EmptyActions({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="empty-content"
+      data-slot="empty-actions"
       className={cn(
         "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
         className
@@ -99,6 +99,6 @@ export {
   EmptyHeader,
   EmptyTitle,
   EmptyDescription,
-  EmptyContent,
+  EmptyActions,
   EmptyMedia,
 }

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

@@ -53,7 +53,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const fieldVariants = cva(
-  "group/field flex w-full data-[invalid=true]:text-destructive",
+  "group/field flex w-full data-[invalid=true]:text-context-danger-emphasis",
   {
     variants: {
       orientation: {
@@ -113,7 +113,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 text-xs leading-snug font-medium text-muted-foreground group-data-[invalid=true]/field:text-destructive group-data-[disabled=true]/field:opacity-50",
+        "group/field-label peer/field-label flex w-fit gap-2 text-xs leading-snug font-medium text-muted-foreground group-data-[invalid=true]/field:text-context-danger-emphasis group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-[>[data-slot=field]]:has-data-[state=checked]:border-primary has-[>[data-slot=field]]:has-data-[state=checked]:bg-primary/5 dark:has-[>[data-slot=field]]:has-data-[state=checked]:bg-primary/10",
         className
@@ -224,7 +224,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-sm font-normal text-destructive", className)}
+      className={cn("text-sm font-normal text-context-danger-emphasis", className)}
       {...props}
     >
       {content}

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

@@ -46,6 +46,7 @@ import {
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
+import { focusRing } from './control.ts'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command.tsx'
 import { Popover, PopoverContent, PopoverTrigger } from './popover.tsx'
 
@@ -141,7 +142,8 @@ 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-transparent px-3 text-sm outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+            'flex h-10 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+            focusRing,
             className,
           )}
         >

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

@@ -27,7 +27,7 @@ function InputGroup({ className, shape = 'default', ...props }: React.ComponentP
         "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[0.1875rem] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
 
         // Error state.
-        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        "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
       )}

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-destructive 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-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        "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",
         className
       )}
       {...props}