@softize/opus 13.0.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

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

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

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/progress.tsx

@@ -1,25 +1,54 @@
 import * as React from "react"
 import { Progress as ProgressPrimitive } from "radix-ui"
 
+import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
 
+export type ProgressContext = UiContext
+
+const trackClasses: Record<ProgressContext, string> = {
+  neutral: 'bg-context-neutral-subtle',
+  primary: 'bg-context-primary/20',
+  info: 'bg-context-info/20',
+  success: 'bg-context-success/20',
+  warning: 'bg-context-warning/20',
+  danger: 'bg-context-danger/20',
+}
+
+const indicatorClasses: Record<ProgressContext, string> = {
+  neutral: 'bg-context-neutral-emphasis',
+  primary: 'bg-context-primary',
+  info: 'bg-context-info',
+  success: 'bg-context-success',
+  warning: 'bg-context-warning',
+  danger: 'bg-context-danger',
+}
+
+export interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {
+  /** O que o andamento comunica: `success` para meta atingida, `warning`/`danger` para atenção. */
+  context?: ProgressContext
+}
+
 function Progress({
   className,
   value,
+  context = 'primary',
   ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: ProgressProps) {
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
+      data-context={context}
       className={cn(
-        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        "relative h-2 w-full overflow-hidden rounded-full",
+        trackClasses[context],
         className
       )}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="h-full w-full flex-1 bg-primary transition-all"
+        className={cn("h-full w-full flex-1 transition-all", indicatorClasses[context])}
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>

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

@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-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 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-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 dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
         className
       )}
       {...props}

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

@@ -2,6 +2,7 @@ import { GripVerticalIcon } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from '../../lib/cn.ts'
+import { focusRing } from './control.ts'
 
 function ResizablePanelGroup({
   className,
@@ -34,7 +35,8 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        focusRing,
         className
       )}
       {...props}

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

@@ -25,7 +25,7 @@ import { Check, ChevronDownIcon, SearchIcon, X } from 'lucide-react'
 import { Command as CommandPrimitive } from 'cmdk'
 
 import { cn } from '../../lib/cn.ts'
-import type { ControlShape } from './control.ts'
+import { focusRing, focusRingWithin, type ControlShape } from './control.ts'
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from './command.tsx'
 import { Popover, PopoverAnchor, PopoverContent } from './popover.tsx'
 
@@ -162,8 +162,8 @@ function NativeSelect({
         onChange={(e) => onChange(e.target.value)}
         className={cn(
           "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 data-[shape=pill]:rounded-full dark:bg-input/30 dark:hover:bg-input/50",
-          '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',
+          focusRing,
+          'aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40',
           icon ? 'pl-9' : '',
         )}
       >
@@ -359,8 +359,8 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
               className={cn(
                 'flex items-center gap-1.5 rounded-md outline-none transition-[color,box-shadow] data-[shape=pill]:rounded-full',
                 ghost
-                  ? 'min-h-9 px-3 py-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-within:ring-2 focus-within:ring-ring/50 data-[size=sm]:min-h-8 data-[size=sm]:px-2'
-                  : "min-h-9 border border-input bg-transparent px-3 py-1 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=sm]:min-h-8 data-[size=sm]:py-0.5 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+                  ? cn('min-h-9 px-3 py-1 text-muted-foreground hover:bg-muted hover:text-foreground data-[size=sm]:min-h-8 data-[size=sm]:px-2', focusRingWithin)
+                  : cn('min-h-9 border border-input bg-transparent px-3 py-1 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[size=sm]:min-h-8 data-[size=sm]:py-0.5 dark:bg-input/30 dark:aria-invalid:ring-context-danger/40', focusRingWithin),
                 variant === 'default' && 'flex-wrap',
                 outline && 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-input/50',
                 "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

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

@@ -2,6 +2,7 @@ import * as React from "react"
 import { Slider as SliderPrimitive } from "radix-ui"
 
 import { cn } from '../../lib/cn.ts'
+import { focusRing } from './control.ts'
 
 function Slider({
   className,
@@ -51,7 +52,10 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          className={cn(
+            "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[color,box-shadow] hover:ring-[0.1875rem] hover:ring-ring/50 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+            focusRing,
+          )}
         />
       ))}
     </SliderPrimitive.Root>

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

@@ -170,6 +170,9 @@ export function Toaster({
     <Sonner
       data-slot="toaster"
       theme="system"
+      // O sonner 1.x só expõe o rótulo da região; o do botão de fechar ("Close toast") vem
+      // com o 2.x (`closeButtonAriaLabel`).
+      containerAriaLabel="Notificações"
       className={cn('toaster group', className)}
       icons={{
         success: (

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

@@ -22,6 +22,7 @@ function Switch({
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
+        // px: o percurso do thumb desconta a borda (um pixel de cada lado) no calc do translate.
         className={cn(
           "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
         )}

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

@@ -77,6 +77,7 @@ function TabsTrigger({
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
+      // px: altura e indicador compensam a hairline do contêiner (um pixel físico, não escala).
       className={cn(
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",

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

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
         className
       )}
       {...props}

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

@@ -5,7 +5,7 @@ import { Toggle as TogglePrimitive } from "radix-ui"
 import { cn } from '../../lib/cn.ts'
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-context-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {

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

@@ -46,6 +46,7 @@ function TooltipContent({
         {...props}
       >
         {children}
+        {/* px: a seta sobe dois pixels para encaixar na borda do conteúdo, independente da fonte. */}
         <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[0.125rem] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>

package/src/ui/docs/changelog.tsx

@@ -54,7 +54,7 @@ export function ChangelogView({ source }: { source: string }): React.ReactElemen
             <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
               <h2 className="text-xl font-semibold tracking-tight">{v.version}</h2>
               {v.date !== undefined && <span className="text-sm text-muted-foreground">{v.date}</span>}
-              {v.breaking !== undefined && <Badge context="danger" variant="solid">Breaking</Badge>}
+              {v.breaking !== undefined && <Badge context="danger" variant="solid">Incompatível</Badge>}
             </div>
             {v.body.length > 0 && (
               <div className="mt-3">

package/src/ui/docs/content/action-form.md

@@ -55,12 +55,19 @@ Monte os providers de consulta e execução uma vez na raiz do aplicativo:
 ```tsx
 /* main.tsx do app. */
 <QueryClientProvider client={queryClient}>
-  <TbdlibProvider client={apiClient}>
+  <OpusProvider client={apiClient}>
     <App />
-  </TbdlibProvider>
+  </OpusProvider>
 </QueryClientProvider>
 ```
 
+## useFormAction
+
+`ActionForm` é uma composição sobre `useFormAction(action, { defaultValues, onSuccess, onError })`,
+que devolve o `form` do react-hook-form já com o resolver Zod em pt-BR, `submit`, `isLoading`,
+`error`, `isSuccess` e `reset`. Use o hook direto quando o formulário precisar de um layout ou de um
+ciclo de vida que o pattern não cobre; validação e execução continuam iguais.
+
 ## Propriedades de ActionForm
 
 | Propriedade | Tipo | Padrão | Descrição |
@@ -85,7 +92,7 @@ Monte os providers de consulta e execução uma vez na raiz do aplicativo:
 
 As opções seguem esta precedência: `options` no campo, `fieldOptions` no formulário, `options` no
 `FieldSpec`, metadata de `t.dict` no schema e, por último, as chaves de `z.enum`. Uma fonte mais
-específica substitui as seguintes. Dicionários registrados no `TbdlibProvider` resolvem rótulos por
+específica substitui as seguintes. Dicionários registrados no `OpusProvider` resolvem rótulos por
 referência; itens estáticos permanecem como declarados no contrato.
 
 ## Widgets declarativos

package/src/ui/docs/content/action-list.md

@@ -97,6 +97,7 @@ periods: [
   { value: 'thisMonth', label: 'Este mês' },
 ]
 // Presets computáveis: today · yesterday · last7 · last30 · thisMonth · lastMonth.
+// presetRange('last7') → { from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' } — o mesmo cálculo do pattern.
 ```
 
 ## Paginação e carregamento
@@ -171,7 +172,7 @@ render(
 - **`depends: ['outroFiltro']`:** desabilita o filtro até que suas dependências tenham valor e o
   limpa quando uma delas muda.
 - **`options: { kind: 'dictionary', ref: 'sessionStatus' }`:** resolve opções e rótulos por um
-  dicionário registrado no `TbdlibProvider`. `filterOptions` substitui essa fonte quando informado.
+  dicionário registrado no `OpusProvider`. `filterOptions` substitui essa fonte quando informado.
 - **`options: { kind: 'lookup', source: 'x.lookup' }`:** consulta uma action com `{ q }` e os valores
   das dependências. A resposta segue o formato `{ value, label }`.
 
@@ -244,6 +245,14 @@ render(
 | `sort` | `{ fields, default }` — ordenação inicial; header ordenável escreve `sort: 'chave:dir'`. |
 | `periods` | `{ value, label }[]` — o controle de período (presets + Personalizado com calendário); materializa em `from`/`to` no input. |
 
+## useListAction
+
+Quando o layout não cabe no `ActionList`, `useListAction(action, input)` entrega o mesmo fetch
+declarativo (`items`, `total`, `error`, `isLoading`, `isFetching`, `refetch`) sob o
+`QueryClientProvider`, e `presetRange(preset)` materializa os presets de período (`today`, `last7`,
+`thisMonth`…) em `{ from, to }` no formato `YYYY-MM-DD` — o mesmo cálculo que o pattern faz antes de
+chamar a action.
+
 ## Propriedades de ActionList
 
 | Propriedade | Tipo | Padrão | Descrição |