@strategicos/ui 0.7.0 → 0.9.0

package/dist/components/select.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as SelectPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
 import { useFieldControl } from "./field.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
@@ -13,8 +14,29 @@ function SelectGroup({ className, ...props }) {
 function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
+/**
+ * Visual do gatilho de seleção: borda, foco, aberto, desabilitado, erro e
+ * tamanhos. É o mesmo do SelectTrigger, exportado para os gatilhos que não são
+ * o Select do Radix (MultiSelect, Combobox, DatePicker ou um Popover próprio)
+ * não precisarem copiar as classes — cópia que fica para trás quando o kit
+ * muda.
+ *
+ * Placeholder: marque o gatilho com `data-placeholder` enquanto estiver vazio,
+ * como o Radix faz.
+ *
+ *   <button className={cn(selectTriggerVariants({ size }), "w-full")} …>
+ */
+const selectTriggerVariants = cva("flex items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent pr-2.5 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring data-[state=open]:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        size: {
+            default: "h-9",
+            sm: "h-7.5 rounded-[min(var(--radius-md),10px)]",
+        },
+    },
+    defaultVariants: { size: "default" },
+});
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2.5 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring data-[state=open]:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-7.5 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...useFieldControl(props, { withRequired: false }), children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 opacity-70" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(selectTriggerVariants({ size }), "w-fit py-2 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...useFieldControl(props, { withRequired: false }), children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 opacity-70" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", align = "start", ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: cn("p-1 data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
@@ -34,5 +56,5 @@ function SelectScrollUpButton({ className, ...props }) {
 function SelectScrollDownButton({ className, ...props }) {
     return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
 }
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants, };
 //# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"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"}

package/dist/components/time-input.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type InputProps } from "./input.js";
+/**
+ * Hora, como o TimeInput do Mantine: o <input type="time"> do navegador, no
+ * visual do Input. O valor é "HH:mm" (ou "HH:mm:ss" com `withSeconds`).
+ *
+ *   <Field label="Horário"><TimeInput value={hora} onChange={e => setHora(e.target.value)} /></Field>
+ *
+ * O formato de 12 ou 24 horas segue o sistema do usuário — no Brasil, 24 horas.
+ * O relógio à direita é o do navegador (abre a lista de horas no Chrome).
+ */
+declare function TimeInput({ withSeconds, className, ...props }: Omit<InputProps, "type"> & {
+    withSeconds?: boolean;
+}): React.JSX.Element;
+export { TimeInput };
+//# sourceMappingURL=time-input.d.ts.map

package/dist/components/time-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../src/components/time-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAEnD;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAC,EACjB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,qBASA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/time-input.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Input } from "./input.js";
+/**
+ * Hora, como o TimeInput do Mantine: o <input type="time"> do navegador, no
+ * visual do Input. O valor é "HH:mm" (ou "HH:mm:ss" com `withSeconds`).
+ *
+ *   <Field label="Horário"><TimeInput value={hora} onChange={e => setHora(e.target.value)} /></Field>
+ *
+ * O formato de 12 ou 24 horas segue o sistema do usuário — no Brasil, 24 horas.
+ * O relógio à direita é o do navegador (abre a lista de horas no Chrome).
+ */
+function TimeInput({ withSeconds = false, className, ...props }) {
+    return (_jsx(Input, { type: "time", step: withSeconds ? 1 : 60, className: cn("tabular-nums", className), ...props }));
+}
+export { TimeInput };
+//# sourceMappingURL=time-input.js.map

package/dist/components/time-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.js","sourceRoot":"","sources":["../../src/components/time-input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAY,CAAA;AAEnD;;;;;;;;GAQG;AACH,SAAS,SAAS,CAAC,EACjB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,GAAG,KAAK,EAGT;IACC,OAAO,CACL,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,KACpC,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strategicos/ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Componentes React da Strategicos (shadcn + Radix + Tailwind v4).",
   "license": "UNLICENSED",
   "repository": {
@@ -43,6 +43,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.12.0",
     "radix-ui": "^1.4.3",
+    "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   },

package/src/components/calendar.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+// Derivado do Calendar do Tremor (Apache-2.0) e modificado pela Strategicos.
+// Ver THIRD_PARTY_NOTICES.md.
+
+import * as React from "react"
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+import { DayPicker, type DayButtonProps } from "react-day-picker"
+import { ptBR } from "react-day-picker/locale"
+
+import { cn } from "../lib/utils.js"
+import { buttonVariants } from "./button.js"
+
+/**
+ * Calendário (react-day-picker), com o desenho do Calendar do Tremor nos tokens
+ * do kit. É a peça de dentro do DatePicker; use solto quando o calendário fica
+ * aberto na tela.
+ *
+ *   <Calendar mode="single" selected={dia} onSelect={setDia} />
+ *
+ * Padrões: português do Brasil (semana começando no domingo) e dias de fora do
+ * mês visíveis. `captionLayout="dropdown"` troca o título por seletores de mês
+ * e ano — útil para datas distantes, como nascimento. Aceita todas as props do
+ * DayPicker.
+ */
+function Calendar({
+  className,
+  classNames,
+  captionLayout = "label",
+  showOutsideDays = true,
+  locale = ptBR,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      data-slot="calendar"
+      locale={locale}
+      showOutsideDays={showOutsideDays}
+      captionLayout={captionLayout}
+      className={cn("w-fit p-3", className)}
+      classNames={{
+        months: "relative flex flex-col gap-4 sm:flex-row",
+        month: "flex w-full flex-col gap-3",
+        nav: "absolute inset-x-0 top-0 flex items-center justify-between",
+        button_previous: cn(buttonVariants({ variant: "ghost", size: "icon-sm" }), "aria-disabled:pointer-events-none aria-disabled:opacity-40"),
+        button_next: cn(buttonVariants({ variant: "ghost", size: "icon-sm" }), "aria-disabled:pointer-events-none aria-disabled:opacity-40"),
+        month_caption: "flex h-7.5 items-center justify-center px-8",
+        // Os meses vêm em minúscula no pt-BR ("outubro 2026"): só a primeira
+        // letra sobe — `capitalize` faria "Outubro De 2026" em outros formatos.
+        caption_label: cn(
+          "text-sm font-semibold select-none first-letter:uppercase",
+          captionLayout !== "label" && "flex h-7.5 items-center gap-1 rounded-md pr-1 pl-2 font-medium [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+        ),
+        dropdowns: "flex items-center gap-1.5 text-sm",
+        dropdown_root: "relative rounded-md border border-input transition-colors has-focus-visible:border-ring",
+        dropdown: "absolute inset-0 cursor-pointer opacity-0",
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "w-9 pb-1 text-xs font-medium text-muted-foreground select-none",
+        week: "mt-0.5 flex w-full",
+        day: "relative size-9 p-0 text-center select-none",
+        // Faixa do intervalo: o fundo fica na célula, para os dias do meio
+        // emendarem; as pontas arredondam do lado de fora.
+        range_start: "rounded-l-md bg-accent",
+        range_middle: "bg-accent",
+        range_end: "rounded-r-md bg-accent",
+        today: "",
+        outside: "text-muted-foreground aria-selected:text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className, orientation, ...rest }) => {
+          const Icon = orientation === "left" ? ChevronLeftIcon : orientation === "right" ? ChevronRightIcon : ChevronDownIcon
+          return <Icon className={cn("size-4", className)} {...rest} />
+        },
+        DayButton: CalendarDayButton,
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+/** Dia do calendário. Os estados viram data-* para o estilo, e "hoje" ganha o
+ *  traço embaixo do número, como no Tremor.
+ *
+ *  O dia escolhido é `data-picked`, e não `data-selected-*`: o styles.css
+ *  registra a variante `data-selected`, e o Tailwind lê `data-selected-x:` como
+ *  essa variante com um valor — a classe é descartada sem aviso. */
+function CalendarDayButton({ className, day, modifiers, children, ...props }: DayButtonProps) {
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  const single = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-picked={single || undefined}
+      data-range-start={modifiers.range_start || undefined}
+      data-range-end={modifiers.range_end || undefined}
+      data-range-middle={modifiers.range_middle || undefined}
+      data-today={modifiers.today || undefined}
+      className={cn(
+        "relative flex size-9 cursor-pointer items-center justify-center rounded-md text-sm tabular-nums outline-none transition-colors",
+        "hover:bg-accent hover:text-accent-foreground focus-visible:z-10 focus-visible:ring-3 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none",
+        "data-today:font-semibold",
+        // Dourado só como preenchimento, com o texto escuro do primary-foreground.
+        "data-picked:bg-primary data-picked:text-primary-foreground data-picked:hover:bg-primary-hover",
+        "data-range-start:bg-primary data-range-start:text-primary-foreground data-range-start:hover:bg-primary-hover",
+        "data-range-end:bg-primary data-range-end:text-primary-foreground data-range-end:hover:bg-primary-hover",
+        "data-range-middle:rounded-none data-range-middle:hover:bg-transparent data-range-middle:hover:underline",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {modifiers.today && (
+        <span
+          aria-hidden
+          className={cn(
+            "absolute bottom-1.5 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full",
+            // primary-strong: o dourado claro não chega a 3:1 sobre o branco.
+            single || modifiers.range_start || modifiers.range_end ? "bg-primary-foreground" : "bg-primary-strong"
+          )}
+        />
+      )}
+    </button>
+  )
+}
+
+export { Calendar, CalendarDayButton }

package/src/components/combobox.tsx

@@ -0,0 +1,390 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, Loader2Icon, PlusIcon, SearchIcon, XIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+import { Button } from "./button.js"
+import { useFieldControl } from "./field.js"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js"
+import { selectTriggerVariants } from "./select.js"
+
+export type ComboboxOption = {
+  value: string
+  label: string
+  /** Texto secundário (ex.: e-mail), só na lista. */
+  description?: string
+  /** Agrupa as opções sob um título. */
+  group?: string
+  /** Bolinha de cor antes do rótulo. */
+  color?: string
+  disabled?: boolean
+}
+
+type Entry = { kind: "option"; option: ComboboxOption } | { kind: "create" }
+
+function errorMessage(err: unknown, fallback: string) {
+  return err instanceof Error && err.message ? err.message : fallback
+}
+
+/**
+ * Seleção de um item com busca, como o Select `searchable` do Mantine. Use no
+ * lugar do Select quando a lista é longa ou quando a tela precisa criar ou
+ * excluir opções ali mesmo.
+ *
+ *   <Combobox
+ *     options={setores.map(s => ({ value: s.id, label: s.name }))}
+ *     value={setorId}
+ *     onValueChange={setSetorId}
+ *     clearable
+ *     onCreate={async nome => (await criarSetor(nome)).id}
+ *   />
+ *
+ * - `clearable`: um X no gatilho volta o valor para `null`.
+ * - `onCreate`: com texto na busca que não bate com nenhuma opção, aparece
+ *   "Criar “texto”". Se a função devolver um valor, ele fica selecionado.
+ * - `onRemove`: cada opção ganha um X que pede confirmação na própria linha.
+ *   Se a opção excluída era a selecionada, o valor volta para `null`.
+ *
+ * Erros de `onCreate`/`onRemove` (promessa rejeitada) aparecem no rodapé da
+ * lista, com a mensagem do erro.
+ *
+ * Teclado: digite para filtrar, ↑/↓ para andar, Enter para escolher, Delete
+ * (com a busca vazia) para excluir a opção ativa, Esc para fechar. Dentro de
+ * um <Field>, o gatilho recebe o id e os aria-*.
+ */
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Selecione",
+  searchPlaceholder = "Buscar…",
+  emptyText = "Nada encontrado.",
+  searchable = true,
+  clearable = false,
+  onCreate,
+  createLabel = q => <>Criar &ldquo;{q}&rdquo;</>,
+  onRemove,
+  removeLabel = o => `Excluir ${o.label}`,
+  removeConfirmLabel = o => <>Excluir &ldquo;{o.label}&rdquo;?</>,
+  size = "default",
+  disabled = false,
+  className,
+  wrapperClassName,
+  contentClassName,
+  onOpenChange,
+  ...props
+}: {
+  options: ComboboxOption[]
+  value: string | null
+  onValueChange: (value: string | null) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  searchable?: boolean
+  clearable?: boolean
+  /** Cria uma opção com o texto da busca. Devolva o valor dela para
+   *  selecioná-la. */
+  onCreate?: (label: string) => string | void | Promise<string | void>
+  createLabel?: (query: string) => React.ReactNode
+  /** Exclui a opção (o X na linha, depois de confirmar). */
+  onRemove?: (option: ComboboxOption) => void | Promise<void>
+  /** Rótulo acessível do X de cada opção. */
+  removeLabel?: (option: ComboboxOption) => string
+  /** Pergunta mostrada na linha ao confirmar a exclusão. */
+  removeConfirmLabel?: (option: ComboboxOption) => React.ReactNode
+  size?: "sm" | "default"
+  disabled?: boolean
+  /** Classes do gatilho. */
+  className?: string
+  /** Classes do invólucro, que só existe com `clearable`. Use para largura e
+   *  posição no layout. */
+  wrapperClassName?: string
+  contentClassName?: string
+  onOpenChange?: (open: boolean) => void
+  id?: string
+  "aria-label"?: string
+  "aria-describedby"?: string
+  "aria-invalid"?: React.AriaAttributes["aria-invalid"]
+}) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+  const [active, setActive] = React.useState(0)
+  const [creating, setCreating] = React.useState(false)
+  const [confirming, setConfirming] = React.useState<string | null>(null)
+  const [removing, setRemoving] = React.useState<string | null>(null)
+  const [error, setError] = React.useState<string | null>(null)
+  const listId = React.useId()
+  const searchRef = React.useRef<HTMLInputElement>(null)
+
+  const selected = options.find(o => o.value === value)
+  const q = query.trim().toLowerCase()
+  const filtered = q ? options.filter(o => o.label.toLowerCase().includes(q)) : options
+  const canCreate = !!onCreate && !!q && !options.some(o => o.label.trim().toLowerCase() === q)
+
+  // Ordem do teclado: as opções habilitadas e, por último, o "Criar".
+  const entries: Entry[] = filtered.filter(o => !o.disabled).map(option => ({ kind: "option" as const, option }))
+  if (canCreate) entries.push({ kind: "create" })
+  const activeIndex = Math.min(active, entries.length - 1)
+  const entryId = (i: number) => `${listId}-${i}`
+
+  // Grupos na ordem em que aparecem nas opções.
+  const groups: { name: string | undefined; items: ComboboxOption[] }[] = []
+  for (const o of filtered) {
+    const g = groups.find(x => x.name === o.group)
+    if (g) g.items.push(o)
+    else groups.push({ name: o.group, items: [o] })
+  }
+
+  // Mantém a opção ativa à vista ao andar com as setas.
+  React.useEffect(() => {
+    if (!open || activeIndex < 0) return
+    document.getElementById(entryId(activeIndex))?.scrollIntoView({ block: "nearest" })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, activeIndex])
+
+  function handleOpenChange(o: boolean) {
+    setOpen(o)
+    if (!o) {
+      setQuery("")
+      setActive(0)
+      setConfirming(null)
+      setError(null)
+    } else {
+      // Abre com a opção selecionada ativa.
+      const i = entries.findIndex(e => e.kind === "option" && e.option.value === value)
+      setActive(Math.max(i, 0))
+    }
+    onOpenChange?.(o)
+  }
+
+  function choose(v: string) {
+    onValueChange(v)
+    handleOpenChange(false)
+  }
+
+  async function create() {
+    if (!onCreate || creating) return
+    setCreating(true)
+    setError(null)
+    try {
+      const created = await onCreate(query.trim())
+      if (typeof created === "string") onValueChange(created)
+      handleOpenChange(false)
+    } catch (err) {
+      setError(errorMessage(err, "Não foi possível criar."))
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  async function remove(option: ComboboxOption) {
+    if (!onRemove) return
+    setRemoving(option.value)
+    setError(null)
+    try {
+      await onRemove(option)
+      if (option.value === value) onValueChange(null)
+    } catch (err) {
+      setError(errorMessage(err, "Não foi possível excluir."))
+    } finally {
+      setRemoving(null)
+      setConfirming(null)
+      searchRef.current?.focus()
+    }
+  }
+
+  function cancelConfirm() {
+    setConfirming(null)
+    searchRef.current?.focus()
+  }
+
+  function activate(entry: Entry | undefined) {
+    if (!entry) return
+    if (entry.kind === "create") void create()
+    else choose(entry.option.value)
+  }
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    // Na confirmação, o teclado é dos botões Excluir/Cancelar.
+    if (confirming) return
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive(Math.min(activeIndex + 1, entries.length - 1)) }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive(Math.max(activeIndex - 1, 0)) }
+    else if (e.key === "Enter") { e.preventDefault(); activate(entries[activeIndex]) }
+    else if (e.key === "Delete" && onRemove && !query) {
+      const entry = entries[activeIndex]
+      if (entry?.kind === "option") { e.preventDefault(); setConfirming(entry.option.value) }
+    }
+  }
+
+  const showClear = clearable && !!selected && !disabled
+
+  const trigger = (
+    <PopoverTrigger asChild disabled={disabled}>
+      <button
+        type="button"
+        role="combobox"
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-haspopup="listbox"
+        data-slot="combobox-trigger"
+        data-size={size}
+        data-placeholder={selected ? undefined : ""}
+        {...controlProps}
+        className={cn(
+          selectTriggerVariants({ size }),
+          "w-full min-w-0 cursor-pointer text-left",
+          showClear && "pr-9",
+          className
+        )}
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          {selected?.color && <span className="size-2 shrink-0 rounded-full" style={{ background: selected.color }} />}
+          <span className="truncate">{selected?.label ?? placeholder}</span>
+        </span>
+        {!showClear && <ChevronDownIcon className="size-4 shrink-0 opacity-70" />}
+      </button>
+    </PopoverTrigger>
+  )
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      {clearable ? (
+        <div data-slot="combobox-wrapper" className={cn("relative w-full min-w-0", wrapperClassName)}>
+          {trigger}
+          {showClear && (
+            // Irmão do gatilho, não filho: botão dentro de botão não é HTML válido.
+            <button
+              type="button"
+              onClick={() => onValueChange(null)}
+              aria-label="Limpar"
+              className="absolute inset-y-0 right-1.5 my-auto flex size-6 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
+            >
+              <XIcon className="size-4" />
+            </button>
+          )}
+        </div>
+      ) : trigger}
+
+      <PopoverContent
+        className={cn("w-(--radix-popover-trigger-width) min-w-60 p-0", contentClassName)}
+        onKeyDown={onKeyDown}
+        onEscapeKeyDown={e => { if (confirming) { e.preventDefault(); cancelConfirm() } }}
+      >
+        {searchable && (
+          <div className="flex items-center gap-2 border-b border-border px-3">
+            <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+            <input
+              ref={searchRef}
+              autoFocus
+              value={query}
+              onChange={e => { setQuery(e.target.value); setActive(0); setError(null) }}
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
+              aria-controls={listId}
+              aria-activedescendant={activeIndex >= 0 && !confirming ? entryId(activeIndex) : undefined}
+              aria-autocomplete="list"
+              className="h-9 w-full bg-transparent text-base outline-none placeholder:text-muted-foreground md:text-sm"
+            />
+          </div>
+        )}
+
+        <div id={listId} role="listbox" className="max-h-64 overflow-y-auto overscroll-contain p-1">
+          {filtered.length === 0 && !canCreate && (
+            <p className="px-2.5 py-6 text-center text-sm text-muted-foreground">{emptyText}</p>
+          )}
+
+          {groups.map(g => (
+            <div key={g.name ?? "_"} role="group" aria-label={g.name}>
+              {g.name && <p className="px-2.5 pt-2 pb-1 text-xs font-medium text-muted-foreground">{g.name}</p>}
+              {g.items.map(o => {
+                const index = entries.findIndex(e => e.kind === "option" && e.option.value === o.value)
+                const isSelected = o.value === value
+                const isActive = index === activeIndex
+
+                if (confirming === o.value) return (
+                  <div key={o.value} role="alert" className="flex items-center gap-1.5 rounded-md bg-destructive/10 py-1 pr-1 pl-2.5 text-sm">
+                    <span className="min-w-0 flex-1 truncate">{removeConfirmLabel(o)}</span>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="destructive"
+                      autoFocus
+                      disabled={removing === o.value}
+                      onClick={() => remove(o)}
+                    >
+                      {removing === o.value ? <Loader2Icon className="animate-spin" /> : "Excluir"}
+                    </Button>
+                    <Button type="button" size="sm" variant="ghost" disabled={removing === o.value} onClick={cancelConfirm}>
+                      Cancelar
+                    </Button>
+                  </div>
+                )
+
+                return (
+                  <div
+                    key={o.value}
+                    id={index >= 0 ? entryId(index) : undefined}
+                    role="option"
+                    aria-selected={isSelected}
+                    aria-disabled={o.disabled || undefined}
+                    data-active={isActive || undefined}
+                    onMouseEnter={() => { if (index >= 0) setActive(index) }}
+                    onClick={() => { if (!o.disabled) choose(o.value) }}
+                    className="group/option flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-2.5 text-sm select-none data-active:bg-accent data-active:text-accent-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+                  >
+                    {o.color && <span className="size-2 shrink-0 rounded-full" style={{ background: o.color }} />}
+                    <span className="flex min-w-0 flex-1 flex-col">
+                      <span className="truncate">{o.label}</span>
+                      {o.description && <span className="truncate text-[11px] text-muted-foreground">{o.description}</span>}
+                    </span>
+                    {isSelected && <CheckIcon className="size-4 shrink-0" />}
+                    {onRemove && !o.disabled && (
+                      // Fora da ordem do Tab (a lista anda pelas setas); no
+                      // teclado, a exclusão é o Delete na opção ativa.
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label={removeLabel(o)}
+                        title={removeLabel(o)}
+                        onClick={e => { e.stopPropagation(); setConfirming(o.value) }}
+                        className="-m-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground opacity-60 outline-none hover:text-destructive hover:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/option:opacity-60 [@media(hover:hover)]:group-data-[active]/option:opacity-60"
+                      >
+                        <XIcon className="size-3.5" />
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+
+          {canCreate && (() => {
+            const index = entries.length - 1
+            return (
+              <div
+                id={entryId(index)}
+                role="option"
+                aria-selected={false}
+                data-active={index === activeIndex || undefined}
+                onMouseEnter={() => setActive(index)}
+                onClick={() => void create()}
+                className="flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-2.5 text-sm font-medium text-primary-strong select-none data-active:bg-primary/10"
+              >
+                {creating ? <Loader2Icon className="size-4 shrink-0 animate-spin" /> : <PlusIcon className="size-4 shrink-0" />}
+                <span className="truncate">{createLabel(query.trim())}</span>
+              </div>
+            )
+          })()}
+        </div>
+
+        {error && (
+          <p role="alert" className="border-t border-border px-3 py-2 text-xs text-destructive">{error}</p>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { Combobox }