@softize/opus 13.0.0 → 14.0.0

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

@@ -3,31 +3,44 @@ import { Slot } from '@radix-ui/react-slot'
 
 import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
-import type { ControlShape } from './control.ts'
+import {
+  controlBase,
+  controlGlyphClass,
+  controlHeight,
+  controlSquare,
+  focusRing,
+  type ControlScale,
+  type ControlShape,
+} from './control.ts'
 import { Spinner } from './spinner.tsx'
 
 export type ButtonContext = Extract<UiContext, 'neutral' | 'primary' | 'danger'>
 export type ButtonVariant = 'solid' | 'subtle' | 'outline' | 'ghost' | 'link'
-export type LegacyButtonVariant = 'default' | 'secondary' | 'destructive'
-export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-xs'
+/** A escala completa de control.ts: alturas de linha e quadrados só-ícone. */
+export type ButtonSize = ControlScale
 
 export interface ButtonStyleOptions {
+  /** Sem `context`, `solid`/`subtle` assumem `primary`; `outline`/`ghost`/`link` assumem `neutral`. */
   context?: ButtonContext | null
-  variant?: ButtonVariant | LegacyButtonVariant | null
+  /** Tratamento visual. */
+  variant?: ButtonVariant | null
   size?: ButtonSize | null
   shape?: ControlShape | null
 }
 
 const baseClasses =
-  'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 active:brightness-90 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'
+  'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 active:brightness-90 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 [&_svg]:pointer-events-none [&_svg]:shrink-0'
 
+/** Padding e ritmo por tamanho; altura e quadrado vêm da escala compartilhada. */
 const sizeClasses: Record<ButtonSize, string> = {
-  default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-  sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
-  lg: 'h-10 px-6 has-[>svg]:px-4',
-  icon: 'size-9',
-  'icon-sm': 'size-8',
-  'icon-xs': 'size-6',
+  xs: `${controlHeight.xs} gap-1 px-2 text-xs has-[>svg]:px-1.5`,
+  sm: `${controlHeight.sm} gap-1.5 px-3 has-[>svg]:px-2.5`,
+  default: `${controlHeight.default} px-4 py-2 has-[>svg]:px-3`,
+  lg: `${controlHeight.lg} px-6 has-[>svg]:px-4`,
+  'icon-xs': controlSquare['icon-xs'],
+  'icon-sm': controlSquare['icon-sm'],
+  icon: controlSquare.icon,
+  'icon-lg': controlSquare['icon-lg'],
 }
 
 const solidClasses: Record<ButtonContext, string> = {
@@ -64,19 +77,17 @@ export function resolveButtonStyle({ context, variant }: ButtonStyleOptions = {}
   context: ButtonContext
   variant: ButtonVariant
 } {
-  const legacy = variant === 'default' || variant === 'secondary' || variant === 'destructive'
-  if (context != null && legacy) {
-    throw new Error('Button não permite combinar context com uma variante semântica legada.')
-  }
-  if (variant === 'default') return { context: 'primary', variant: 'solid' }
-  if (variant === 'secondary') return { context: 'neutral', variant: 'solid' }
-  if (variant === 'destructive') return { context: 'danger', variant: 'solid' }
-  return { context: context ?? 'primary', variant: variant ?? 'solid' }
+  const resolvedVariant: ButtonVariant = variant ?? 'solid'
+  // Tratamentos de superfície (solid/subtle) pedem destaque; os leves (outline/ghost/link)
+  // são o chrome discreto da casa e só ganham cor quando o contexto é declarado.
+  const defaultContext: ButtonContext =
+    resolvedVariant === 'solid' || resolvedVariant === 'subtle' ? 'primary' : 'neutral'
+  return { context: context ?? defaultContext, variant: resolvedVariant }
 }
 
 /**
- * Classes do Button. `context` seleciona a família semântica e `variant` seleciona
- * o tratamento visual. `default`, `secondary` e `destructive` são aliases temporários.
+ * Classes do Button. `context` seleciona a família semântica, `variant` o tratamento visual e
+ * `size` a medida na escala compartilhada de control.ts.
  */
 export function buttonVariants(options: ButtonStyleOptions = {}): string {
   const resolved = resolveButtonStyle(options)
@@ -92,8 +103,10 @@ export function buttonVariants(options: ButtonStyleOptions = {}): string {
             : linkClasses[resolved.context]
   return cn(
     baseClasses,
+    focusRing,
     variantClasses,
     sizeClasses[options.size ?? 'default'],
+    controlGlyphClass(options.size),
     options.shape === 'pill' && 'rounded-full',
   )
 }
@@ -103,8 +116,9 @@ export interface ButtonProps extends React.ComponentProps<'button'>, ButtonStyle
   asChild?: boolean
   /** Estado de ação em andamento; mostra Spinner e desabilita o controle. */
   busy?: boolean
-  /** Ícone à esquerda. No `busy`, o Spinner ocupa o mesmo espaço. */
-  icon?: React.ElementType
+  /** Ícone à esquerda, como nó (`icon={<Plus />}`); o tamanho do glifo vem do `size`. No
+   *  `busy`, o Spinner ocupa o mesmo espaço. */
+  icon?: React.ReactNode
 }
 
 export function Button({
@@ -115,14 +129,13 @@ export function Button({
   shape,
   asChild = false,
   busy = false,
-  icon: Icon,
+  icon,
   disabled,
   children,
   ...props
 }: ButtonProps): React.ReactElement {
   const Comp = asChild ? Slot : 'button'
   const resolved = resolveButtonStyle({ context, variant })
-  const iconSize = size === 'sm' ? 'size-3' : 'size-4'
   return (
     <Comp
       data-slot="button"
@@ -136,11 +149,7 @@ export function Button({
         children
       ) : (
         <>
-          {busy ? (
-            <Spinner size={size === 'sm' ? 'sm' : 'default'} />
-          ) : Icon ? (
-            <Icon className={iconSize} />
-          ) : null}
+          {busy ? <Spinner size={controlBase(size)} /> : icon}
           {children}
         </>
       )}

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,74 @@
 /** Geometria compartilhada pelos controles inline da casa. */
 export type ControlShape = 'default' | 'pill'
+
+/**
+ * A escala única de `size` dos controles (14.0.0). Um nome, uma medida — em qualquer
+ * componente que aceite `size`, `sm` é a mesma altura de linha e `icon-sm` é o mesmo quadrado.
+ * Cada componente aceita o subconjunto coerente com seu papel, nunca um nome com outra medida.
+ *
+ * - Altura de linha (`xs` · `sm` · `default` · `lg`): 1.5 · 2 · 2.25 · 2.5rem.
+ * - Quadrado só-ícone (`icon-xs` · `icon-sm` · `icon` · `icon-lg`): 1.5 · 1.75 · 2.25 · 2.5rem.
+ *   `icon-sm` é 1.75rem de propósito: é o degrau da ação que mora dentro de uma linha densa
+ *   (o que os consumidores forçavam com `size-7`), menor que o botão de texto `sm` ao lado.
+ * - Glifo (o svg dentro do controle daquele tamanho): 0.875 · 0.875 · 1 · 1.25rem. O Spinner
+ *   usa esta medida, por isso `busy` substitui o ícone sem mexer na largura do botão.
+ */
+export type ControlSize = 'xs' | 'sm' | 'default' | 'lg'
+export type ControlIconSize = 'icon-xs' | 'icon-sm' | 'icon' | 'icon-lg'
+export type ControlScale = ControlSize | ControlIconSize
+
+export const controlHeight: Record<ControlSize, string> = {
+  xs: 'h-6',
+  sm: 'h-8',
+  default: 'h-9',
+  lg: 'h-10',
+}
+
+export const controlSquare: Record<ControlIconSize, string> = {
+  'icon-xs': 'size-6',
+  'icon-sm': 'size-7',
+  icon: 'size-9',
+  'icon-lg': 'size-10',
+}
+
+export const controlGlyph: Record<ControlSize, string> = {
+  xs: 'size-3.5',
+  sm: 'size-3.5',
+  default: 'size-4',
+  lg: 'size-5',
+}
+
+/** A altura de linha por trás de um tamanho da escala (`icon-sm` → `sm`). */
+export function controlBase(size: ControlScale | null | undefined): ControlSize {
+  switch (size) {
+    case 'icon-xs':
+      return 'xs'
+    case 'icon-sm':
+      return 'sm'
+    case 'icon-lg':
+      return 'lg'
+    case 'icon':
+    case null:
+    case undefined:
+      return 'default'
+    default:
+      return size
+  }
+}
+
+/** Fallback de tamanho do svg descendente, respeitando um `size-*` explícito no próprio ícone. */
+export function controlGlyphClass(size: ControlScale | null | undefined): string {
+  return `[&_svg:not([class*=size-])]:${controlGlyph[controlBase(size)]}`
+}
+
+/**
+ * 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

@@ -3,6 +3,7 @@ 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 type DialogMode = 'default' | 'alert'
 
@@ -110,25 +111,26 @@ export function DialogClose({
   )
 }
 
+/** 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>) {
   const { mode } = useDialogContext()
-  const overlayClasses = 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,
-  )
+  const overlay = cn(overlayClasses, className)
   return mode === 'alert' ? (
     <AlertDialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      className={overlayClasses}
+      className={overlay}
       {...props}
     />
   ) : (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      className={overlayClasses}
+      className={overlay}
       {...props}
     />
   )
@@ -181,7 +183,10 @@ export function DialogContent({
         {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>

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

@@ -5,17 +5,9 @@ import { cn } from '../../lib/cn.ts'
 
 export type DotContext = UiContext
 export type DotVariant = 'solid' | 'outline'
-export type LegacyDotVariant =
-  | 'default'
-  | 'secondary'
-  | 'destructive'
-  | 'success'
-  | 'warning'
-  | 'info'
-
 interface DotStyleOptions {
   context?: DotContext | null
-  variant?: DotVariant | LegacyDotVariant | null
+  variant?: DotVariant | null
 }
 
 const solidClasses: Record<DotContext, string> = {
@@ -40,22 +32,6 @@ export function resolveDotStyle({ context, variant }: DotStyleOptions = {}): {
   context: DotContext
   variant: DotVariant
 } {
-  const legacy =
-    variant === 'default' ||
-    variant === 'secondary' ||
-    variant === 'destructive' ||
-    variant === 'success' ||
-    variant === 'warning' ||
-    variant === 'info'
-  if (context != null && legacy) {
-    throw new Error('Dot não permite combinar context com uma variante semântica legada.')
-  }
-  if (variant === 'default') return { context: 'primary', variant: 'solid' }
-  if (variant === 'secondary') return { context: 'neutral', variant: 'solid' }
-  if (variant === 'destructive') return { context: 'danger', variant: 'solid' }
-  if (variant === 'success' || variant === 'warning' || variant === 'info') {
-    return { context: variant, variant: 'solid' }
-  }
   return { context: context ?? 'neutral', variant: variant ?? 'solid' }
 }
 

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}
@@ -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>

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

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from '../../lib/cn.ts'
 import type { ControlShape } from './control.ts'
-import { Button } from './button.tsx'
+import { Button, type ButtonProps } from './button.tsx'
 import { Input } from './input.tsx'
 import { Textarea } from './textarea.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
       )}
@@ -79,16 +79,16 @@ function InputGroupAddon({
   )
 }
 
+/** Só o acabamento por tamanho: altura, quadrado e glifo vêm da escala de control.ts via Button. */
 const inputGroupButtonVariants = cva(
   "flex items-center gap-2 text-sm shadow-none",
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-0.3125rem)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-0.3125rem)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+        xs: "rounded-[calc(var(--radius)-0.3125rem)] has-[>svg]:px-2",
+        sm: "rounded-md",
+        "icon-xs": "rounded-[calc(var(--radius)-0.3125rem)] p-0 has-[>svg]:p-0",
+        "icon-sm": "p-0 has-[>svg]:p-0",
       },
     },
     defaultVariants: {
@@ -97,19 +97,22 @@ const inputGroupButtonVariants = cva(
   }
 )
 
+/** 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'>
+
 function InputGroupButton({
   className,
   type = "button",
   variant = "ghost",
   size = "xs",
   ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
+}: Omit<ButtonProps, 'size'> & { size?: InputGroupButtonSize }) {
   return (
     <Button
       type={type}
       data-size={size}
       variant={variant}
+      size={size}
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...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-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}

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

@@ -14,7 +14,7 @@ export interface InputProps extends React.ComponentProps<"input"> {
 
 // O <input> CRU (sem adorno): ELE é o campo — borda, foco, ref e className moram nele.
 const bareInput =
-  "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+  "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40"
 
 function Input({ className, type, icon, trailing, ...props }: InputProps) {
   // Sem adorno: o <input> cru de sempre — retrocompatível (refs, forms, InputGroupInput).
@@ -33,7 +33,7 @@ function Input({ className, type, icon, trailing, ...props }: InputProps) {
       className={cn(
         "flex h-9 w-full min-w-0 items-center gap-1.5 rounded-md border border-input bg-transparent px-3 text-base transition-[color,box-shadow] outline-none md:text-sm dark:bg-input/30",
         "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[0.1875rem] has-[input:focus-visible]:ring-ring/50",
-        "has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/20 dark:has-[input[aria-invalid=true]]:ring-destructive/40",
+        "has-[input[aria-invalid=true]]:border-context-danger has-[input[aria-invalid=true]]:ring-context-danger/20 dark:has-[input[aria-invalid=true]]:ring-context-danger/40",
         "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50",
         className,
       )}

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

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
+import type { ControlSize } from "./control.ts";
 import { Separator } from "./separator.tsx";
 
 const itemGroupVariants = cva(
@@ -72,10 +73,11 @@ const itemVariants = cva(
         outline: "border-border",
         muted: "bg-muted/50",
       },
+      // Nomes da escala de control.ts; a linha não tem altura fixa, `sm` aperta o respiro.
       size: {
         default: "gap-4 p-4",
         sm: "gap-2.5 px-4 py-3",
-      },
+      } satisfies Partial<Record<ControlSize, string>>,
     },
     defaultVariants: { variant: "default", size: "default" },
   },