@softize/opus 8.6.6

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

@@ -0,0 +1,479 @@
+/**
+ * <Select /> — O seletor da casa: UM componente pra escolher valor(es) de uma lista.
+ *
+ * Antes eram QUATRO (NativeSelect, Select-Radix, Combobox, ComposerSelect) com TRÊS
+ * motores diferentes — e a escolha entre eles era uma decisão que ninguém acertava
+ * (o episódio real: uma tela de filtros saiu com `<select>` cru porque "qual usar?"
+ * custava mais que copiar classes). Aqui a decisão virou PROP:
+ *
+ *   <Select native … />                  → o <select> do sistema (picker do SO no
+ *                                          celular, form nativo, sem portal)
+ *   <Select … />                         → custom (cmdk + Popover)
+ *   <Select searchable … />              → com busca (o antigo Combobox)
+ *   <Select multiple … />                → chips removíveis
+ *   <Select variant="ghost" … />         → discreto, pra barra de composer
+ *
+ * O TIPO impede o componente de mentir: `native` é uma união discriminada, então
+ * `searchable`/`multiple`/`variant` nem compilam junto dele — o menu é do sistema
+ * operacional e não aceita busca, chip nem estilo. Erro de compilação > bug silencioso.
+ *
+ * Régua de escolha (achabilidade, não performance): lista curta e conhecida → `native`;
+ * lista longa ou que cresce → `searchable`; item que precisa de JSX → `content`.
+ */
+import * as React from 'react'
+import { Check, ChevronDownIcon, X } from 'lucide-react'
+import { Command as CommandPrimitive } from 'cmdk'
+
+import { cn } from '../../lib/cn.ts'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from './command.tsx'
+import { Popover, PopoverAnchor, PopoverContent } from './popover.tsx'
+
+export interface SelectOption {
+  value: string
+  /** Texto da opção — é o que a BUSCA casa, o que o gatilho mostra e o que o leitor de
+   *  tela anuncia. Sempre string (JSX rico vai em `content`). */
+  label: string
+  /** Render rico do item NO MENU (ícone, avatar, duas linhas). Default: o `label`.
+   *  Só no modo custom — o menu nativo do SO aceita texto puro. */
+  content?: React.ReactNode
+  /** Detalhe discreto à direita do item (ex.: a chave da task). */
+  hint?: string
+  /** O que o GATILHO mostra quando esta é a escolhida (default: `label`) — pra quando o
+   *  nome completo não cabe na barra e só a chave curta serve. */
+  triggerLabel?: React.ReactNode
+  /** Agrupa as opções sob um rótulo (o `<optgroup>` do nativo, o grupo do menu custom). */
+  group?: string
+  disabled?: boolean
+}
+
+interface SelectBaseProps {
+  options: SelectOption[]
+  /** Texto do campo vazio. */
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  id?: string
+  /** Ícone LEADING dentro do campo — identifica o filtro sem jogar o ícone ao lado. */
+  icon?: React.ReactNode
+  /** Altura: `default` (h-9, a do Input/Button) ou `sm` (h-8) pra toolbar densa. */
+  size?: 'sm' | 'default'
+  'aria-label'?: string
+}
+
+/** Só o que o menu do SISTEMA suporta — nada de busca, chip ou variante visual. */
+interface SelectNativeProps extends SelectBaseProps {
+  native: true
+  value: string
+  onChange: (value: string) => void
+  searchable?: never
+  multiple?: never
+  variant?: never
+  onSearch?: never
+  loading?: never
+  clearable?: never
+}
+
+interface SelectCustomBase extends SelectBaseProps {
+  native?: false
+  /** Liga a busca no próprio campo (lista longa/que cresce). */
+  searchable?: boolean
+  /** Busca SERVER-SIDE (debounced): quando definida, o filtro local desliga e o pai
+   *  atualiza `options`. Implica `searchable`. */
+  onSearch?: (query: string) => void
+  /** "Buscando…" enquanto o fetch corre (use com `onSearch`). */
+  loading?: boolean
+  /** X no campo quando há seleção — limpa num clique. Bom em filtro. */
+  clearable?: boolean
+  /** `ghost`: sem borda nem fundo, discreto — o seletor da barra do composer. */
+  variant?: 'default' | 'ghost'
+  /** Placeholder enquanto se digita a busca (cai pro `placeholder`). */
+  searchPlaceholder?: string
+  emptyText?: string
+  /** Ação custom no FIM do campo, dentro do controle (antes do chevron) — ex.: um botão que
+   *  age sobre o valor escolhido. O clique NÃO abre a lista (o slot para a propagação). */
+  trailing?: React.ReactNode
+}
+
+export type SelectProps =
+  | SelectNativeProps
+  | (SelectCustomBase & { multiple?: false; value: string; onChange: (value: string) => void })
+  | (SelectCustomBase & { multiple: true; value: string[]; onChange: (value: string[]) => void })
+
+/** Ordena preservando a ordem de aparição dos grupos (sem grupo primeiro). */
+function byGroup(options: SelectOption[]): Array<[string | undefined, SelectOption[]]> {
+  const out: Array<[string | undefined, SelectOption[]]> = []
+  for (const o of options) {
+    const found = out.find(([g]) => g === o.group)
+    if (found) found[1].push(o)
+    else out.push([o.group, [o]])
+  }
+  return out
+}
+
+export function Select(props: SelectProps): React.ReactElement {
+  return props.native === true ? <NativeSelect {...props} /> : <CustomSelect {...props} />
+}
+
+// ── Nativo: o <select> do sistema ───────────────────────────────────────────────────
+function NativeSelect({
+  options,
+  placeholder,
+  disabled,
+  className,
+  id,
+  icon,
+  size = 'default',
+  value,
+  onChange,
+  ...rest
+}: SelectNativeProps): React.ReactElement {
+  const groups = byGroup(options)
+  return (
+    <div className="group/select relative w-full min-w-0 has-[select:disabled]:opacity-50" data-slot="select-wrapper">
+      {icon ? (
+        <span
+          className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground select-none [&_svg]:size-4"
+          aria-hidden="true"
+          data-slot="select-leading"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <select
+        data-slot="select"
+        data-size={size}
+        id={id}
+        disabled={disabled}
+        value={value}
+        aria-label={rest['aria-label']}
+        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 dark:bg-input/30 dark:hover:bg-input/50",
+          'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+          'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+          icon ? 'pl-9' : '',
+          className,
+        )}
+      >
+        {placeholder !== undefined && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {groups.map(([group, items]) =>
+          group === undefined ? (
+            items.map((o) => (
+              <option key={o.value} value={o.value} disabled={o.disabled} className="bg-[Canvas] text-[CanvasText]">
+                {o.label}
+              </option>
+            ))
+          ) : (
+            <optgroup key={group} label={group} className="bg-[Canvas] text-[CanvasText]">
+              {items.map((o) => (
+                <option key={o.value} value={o.value} disabled={o.disabled} className="bg-[Canvas] text-[CanvasText]">
+                  {o.label}
+                </option>
+              ))}
+            </optgroup>
+          ),
+        )}
+      </select>
+      <ChevronDownIcon
+        className="pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none"
+        aria-hidden="true"
+        data-slot="select-icon"
+      />
+    </div>
+  )
+}
+
+// ── Custom: cmdk + Popover (busca, multi, item rico, ghost) ─────────────────────────
+function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.ReactElement {
+  const {
+    options,
+    placeholder = 'Selecione…',
+    searchPlaceholder,
+    emptyText = 'Nada encontrado.',
+    disabled,
+    className,
+    id,
+    icon,
+    size = 'default',
+    searchable = false,
+    onSearch,
+    loading,
+    clearable,
+    trailing,
+    variant = 'default',
+  } = props
+  // Busca server-side implica campo buscável (o pai filtra).
+  const canSearch = searchable || onSearch !== undefined
+  const selectedValues = props.multiple ? props.value : props.value ? [props.value] : []
+  const singleValue = props.multiple ? undefined : props.value
+
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const rootRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const selectedOption = options.find((o) => o.value === singleValue)
+  // Single: fechado, o campo mostra o rótulo escolhido (sincroniza com value/options).
+  React.useEffect(() => {
+    if (singleValue === undefined || open) return
+    setQuery(selectedOption?.label ?? '')
+  }, [singleValue, selectedOption, open])
+
+  // O cmdk carimba o id DELE no input (a11y interna) e descarta o nosso — reaplicamos por
+  // ref, senão o `htmlFor` do Label não acha campo nenhum (clicar no rótulo não focaria).
+  React.useEffect(() => {
+    if (id !== undefined && inputRef.current !== null) inputRef.current.id = id
+  }, [id])
+
+  const onSearchRef = React.useRef(onSearch)
+  onSearchRef.current = onSearch
+  React.useEffect(() => {
+    if (onSearchRef.current === undefined || !open) return
+    const t = setTimeout(() => onSearchRef.current?.(query.trim()), 200)
+    return () => clearTimeout(t)
+  }, [query, open])
+
+  const onSelectOption = (o: SelectOption): void => {
+    if (o.disabled === true) return
+    if (props.multiple) {
+      props.onChange(props.value.includes(o.value) ? props.value.filter((v) => v !== o.value) : [...props.value, o.value])
+      setQuery('')
+      inputRef.current?.focus()
+    } else {
+      props.onChange(o.value)
+      setQuery(o.label)
+      setOpen(false)
+      inputRef.current?.blur()
+    }
+  }
+  const removeValue = (v: string): void => {
+    if (props.multiple) props.onChange(props.value.filter((x) => x !== v))
+  }
+
+  const allSelected = options.length > 0 && options.every((o) => selectedValues.includes(o.value))
+  const showToggleAll = props.multiple === true && options.length > 1 && onSearch === undefined && query.trim() === ''
+  const toggleAll = (): void => {
+    if (!props.multiple) return
+    props.onChange(allSelected ? [] : options.map((o) => o.value))
+    inputRef.current?.focus()
+  }
+
+  const ghost = variant === 'ghost'
+  // Não-buscável: o campo é só gatilho — readOnly (sem caret, sem digitar), o clique abre.
+  // Um render só pros dois modos; o que muda é poder digitar.
+  const triggerText = !props.multiple && !open && selectedOption?.triggerLabel !== undefined ? undefined : query
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <div ref={rootRef} data-slot="select" className={cn(ghost ? 'min-w-0' : 'min-w-40', className)}>
+        <CommandPrimitive data-slot="select-command" shouldFilter={canSearch && onSearch === undefined} className="overflow-visible">
+          <PopoverAnchor asChild>
+            <div
+              data-slot="select-control"
+              data-size={size}
+              data-variant={variant}
+              onClick={() => {
+                if (disabled !== true) {
+                  setOpen(true)
+                  inputRef.current?.focus()
+                }
+              }}
+              className={cn(
+                'flex items-center gap-1.5 rounded-md outline-none transition-[color,box-shadow]',
+                ghost
+                  ? 'min-h-7 px-1.5 py-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-within:ring-2 focus-within:ring-ring/50'
+                  : "min-h-9 flex-wrap 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",
+                "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                canSearch ? '' : 'cursor-pointer',
+                disabled === true && 'cursor-not-allowed opacity-50',
+              )}
+            >
+              {icon ? (
+                <span data-slot="select-leading" className="text-muted-foreground">
+                  {icon}
+                </span>
+              ) : null}
+              {props.multiple &&
+                selectedValues.map((v) => {
+                  const o = options.find((x) => x.value === v)
+                  return (
+                    <span key={v} data-slot="select-chip" className="inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground">
+                      {o?.label ?? v}
+                      <button
+                        type="button"
+                        data-slot="select-chip-remove"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          removeValue(v)
+                        }}
+                        className="text-muted-foreground hover:text-foreground"
+                        aria-label={`Remover ${o?.label ?? v}`}
+                      >
+                        <X className="size-3" />
+                      </button>
+                    </span>
+                  )
+                })}
+              {/* triggerLabel: o gatilho mostra o rótulo CURTO da opção (o input fica
+                  escondido atrás dele até focar) — o caso da barra do composer. */}
+              {triggerText === undefined && (
+                <span data-slot="select-trigger-label" className="min-w-0 truncate text-sm">
+                  {selectedOption?.triggerLabel}
+                </span>
+              )}
+              <CommandPrimitive.Input
+                ref={inputRef}
+                data-slot="select-input"
+                id={id}
+                disabled={disabled}
+                readOnly={!canSearch}
+                aria-label={props['aria-label']}
+                value={triggerText ?? ''}
+                onValueChange={(v) => {
+                  if (!canSearch) return
+                  setQuery(v)
+                  setOpen(true)
+                }}
+                onFocus={() => {
+                  setOpen(true)
+                  if (!props.multiple && canSearch) inputRef.current?.select()
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape' && open) {
+                    e.stopPropagation()
+                    setOpen(false)
+                  }
+                }}
+                placeholder={props.multiple && selectedValues.length > 0 ? '' : (canSearch ? (searchPlaceholder ?? placeholder) : placeholder)}
+                className={cn(
+                  'min-w-0 flex-1 bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed',
+                  canSearch ? '' : 'cursor-pointer caret-transparent',
+                  triggerText === undefined && 'sr-only',
+                )}
+              />
+              {clearable === true && selectedValues.length > 0 && disabled !== true && (
+                <button
+                  type="button"
+                  data-slot="select-clear"
+                  aria-label="Limpar seleção"
+                  onPointerDown={(e) => e.preventDefault()}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (props.multiple) props.onChange([])
+                    else {
+                      props.onChange('')
+                      setQuery('')
+                    }
+                  }}
+                  className="flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <X className="size-3.5" />
+                </button>
+              )}
+              {/* Ação custom (ex.: botão que age sobre o valor) — o clique NÃO abre a lista:
+                  o slot para a propagação pro controle. */}
+              {trailing !== undefined && (
+                <span
+                  data-slot="select-trailing"
+                  // Ação no fim do campo é SECUNDÁRIA: o tom muted mora no slot (o botão
+                  // ghost herda), pra não sprinklar `text-muted-foreground` em cada call
+                  // site. O hover acende via o próprio `hover:text-accent-foreground` do ghost.
+                  // Botão trailing na BORDA (buscável, sem chevron): puxa ~6px pra o inset
+                  // direito casar com o vertical (botão quadrado no canto), como o InputGroup.
+                  // Com chevron, NÃO puxa — senão cola no chevron (o `gap-1.5` do control).
+                  className={cn('flex shrink-0 items-center text-muted-foreground', canSearch && 'has-[button]:-mr-1.5')}
+                  onClick={(e) => e.stopPropagation()}
+                  onPointerDown={(e) => e.stopPropagation()}
+                >
+                  {trailing}
+                </span>
+              )}
+              {/* Chevron: a affordance de "abre uma lista". Sempre no não-buscável; no
+                  buscável some (ali quem manda o sinal é o cursor de texto). */}
+              {!canSearch && (
+                <ChevronDownIcon data-slot="select-icon" className={cn('size-4 shrink-0 opacity-50', ghost ? 'h-3.5 w-3.5 opacity-60' : '')} aria-hidden="true" />
+              )}
+            </div>
+          </PopoverAnchor>
+          <PopoverContent
+            align="start"
+            // No campo de form a lista acompanha a largura do controle; no ghost, NÃO — o
+            // gatilho é do tamanho do rótulo (uma chave curta), e a lista precisa caber o
+            // título inteiro.
+            className={cn(
+              'pointer-events-auto overflow-hidden p-0',
+              ghost ? 'w-auto min-w-56 max-w-80' : 'w-(--radix-popover-trigger-width) min-w-40',
+            )}
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            onCloseAutoFocus={(e) => e.preventDefault()}
+            onInteractOutside={(e) => {
+              const target = e.target as HTMLElement
+              if (rootRef.current?.contains(target)) return e.preventDefault()
+              const label = target.closest('label')
+              if (id !== undefined && label !== null && label.htmlFor === id) e.preventDefault()
+            }}
+            onWheel={(e) => e.stopPropagation()}
+            onTouchMove={(e) => e.stopPropagation()}
+          >
+            {showToggleAll && (
+              <div className="border-b p-1">
+                <button
+                  type="button"
+                  data-slot="select-toggle-all"
+                  onClick={toggleAll}
+                  className="flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                >
+                  {allSelected ? 'Limpar seleção' : `Selecionar tudo (${options.length})`}
+                </button>
+              </div>
+            )}
+            <CommandList data-slot="select-list" className="max-h-60 overflow-auto">
+              {loading === true ? (
+                <div data-slot="select-loading" className="py-6 text-center text-sm text-muted-foreground">
+                  Buscando…
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>{emptyText}</CommandEmpty>
+                  {byGroup(options).map(([group, items]) => (
+                    <CommandGroup key={group ?? '—'} heading={group}>
+                      {items.map((o) => {
+                        const hasHint = o.hint !== undefined && o.hint.length > 0
+                        return (
+                          <CommandItem
+                            key={o.value}
+                            data-slot="select-item"
+                            disabled={o.disabled}
+                            value={`${o.label} ${o.hint ?? ''} ${o.value}`}
+                            onSelect={() => onSelectOption(o)}
+                          >
+                            <span data-slot="select-item-label" className="min-w-0 truncate">
+                              {o.content ?? o.label}
+                            </span>
+                            {hasHint && (
+                              <span data-slot="select-item-hint" className="ml-auto shrink-0 text-xs text-muted-foreground">
+                                {o.hint}
+                              </span>
+                            )}
+                            <Check
+                              data-slot="select-item-check"
+                              className={cn('size-4 shrink-0', !hasHint && 'ml-auto', selectedValues.includes(o.value) ? 'opacity-100' : 'opacity-0')}
+                            />
+                          </CommandItem>
+                        )
+                      })}
+                    </CommandGroup>
+                  ))}
+                </>
+              )}
+            </CommandList>
+          </PopoverContent>
+        </CommandPrimitive>
+      </div>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from '../../lib/cn.ts'
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

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

@@ -0,0 +1,13 @@
+import { cn } from '../../lib/cn.ts'
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

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

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from '../../lib/cn.ts'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <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"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

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

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from 'lucide-react'
+import { Toaster as Sonner, toast, type ToasterProps } from 'sonner'
+
+/**
+ * Toaster temático (sonner) — monte 1x no root do app. Os toasts saem estilizados
+ * com os tokens do Opus via CSS vars (popover/border/radius) + ícones lucide por
+ * tipo. Dispare com `toast.success/error(...)`.
+ *
+ * Divergência da casa: o shadcn lê o tema com `next-themes` (useTheme); aqui não
+ * usamos next-themes — passe `theme` por prop se precisar forçar (default 'system').
+ * Elevação dark preservada: `--normal-bg` aponta pro popover (não pro background).
+ */
+export function Toaster({ ...props }: ToasterProps): React.ReactElement {
+  return (
+    <Sonner
+      data-slot="toaster"
+      theme="system"
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { toast }

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

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Loader2Icon } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/cn.ts'
+
+/** Tamanhos do spinner — divergência da casa (o shadcn atual só tem `size-4` fixo).
+ *  Mantido aditivo pra cobrir botão (sm) e estados maiores (lg). */
+const spinnerVariants = cva('animate-spin', {
+  variants: {
+    size: { sm: 'size-3', default: 'size-4', lg: 'size-6' },
+  },
+  defaultVariants: { size: 'default' },
+})
+
+export interface SpinnerProps extends React.ComponentProps<'svg'>, VariantProps<typeof spinnerVariants> {}
+
+/** Indicador de carregamento (Loader2Icon girando) — substitui o `<Loader2Icon className="animate-spin"/>`
+ *  inline repetido. Tamanhos sm/default/lg. Pra placeholder de conteúdo, use Skeleton. */
+export function Spinner({ className, size, ...props }: SpinnerProps): React.ReactElement {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Carregando"
+      className={cn(spinnerVariants({ size }), className)}
+      {...props}
+    />
+  )
+}