@softize/opus 22.2.0 → 24.0.0

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

@@ -20,105 +20,129 @@
  * 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, SearchIcon, X } from 'lucide-react'
-import { Command as CommandPrimitive } from 'cmdk'
+import * as React from "react";
+import { Check, ChevronDownIcon, SearchIcon, X } from "lucide-react";
+import { Command as CommandPrimitive } from "cmdk";
 
-import { cn } from '../../lib/cn.ts'
-import { focusRing, focusRingWithin, type ControlShape, type ControlSize } from './control.ts'
-import { CommandEmpty, CommandGroup, CommandItem, CommandList } from './command.tsx'
-import { InputGroupButton } from './input-group.tsx'
-import { Popover, PopoverAnchor, PopoverContent } from './popover.tsx'
+import { cn } from "../../lib/cn.ts";
+import {
+  focusRing,
+  focusRingWithin,
+  type ControlShape,
+  type ControlSize,
+} from "./control.ts";
+import {
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "./command.tsx";
+import { InputGroupButton } from "./input-group.tsx";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover.tsx";
 
 export interface SelectOption {
-  value: string
+  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
+  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
+  content?: React.ReactNode;
   /** Detalhe discreto à direita do item (ex.: a chave da task). */
-  hint?: string
+  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
+  triggerLabel?: React.ReactNode;
   /** Agrupa as opções sob um rótulo (o `<optgroup>` do nativo, o grupo do menu custom). */
-  group?: string
-  disabled?: boolean
+  group?: string;
+  disabled?: boolean;
 }
 
 interface SelectBaseProps {
-  options: SelectOption[]
+  options: SelectOption[];
   /** Texto do campo vazio. */
-  placeholder?: string
-  disabled?: boolean
+  placeholder?: string;
+  disabled?: boolean;
   /** Classes da raiz do controle, incluindo campo, ícones e ações. */
-  className?: string
-  id?: string
+  className?: string;
+  id?: string;
   /** Ícone LEADING dentro do campo — identifica o filtro sem jogar o ícone ao lado. */
-  icon?: React.ReactNode
-  'aria-invalid'?: boolean
-  'aria-describedby'?: string
+  icon?: React.ReactNode;
+  "aria-invalid"?: boolean;
+  "aria-describedby"?: string;
   /** Altura: `default` (h-9, a do Input/Button) ou `sm` (h-8) pra toolbar densa. */
-  size?: Extract<ControlSize, 'sm' | 'default'>
+  size?: Extract<ControlSize, "sm" | "default">;
   /** Geometria do controle; `pill` preserva a variante visual escolhida. */
-  shape?: ControlShape
-  'aria-label'?: string
+  shape?: ControlShape;
+  "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
+  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
+  native?: false;
   /** Liga a busca no próprio campo (lista longa/que cresce). */
-  searchable?: boolean
+  searchable?: boolean;
   /** Busca SERVER-SIDE (debounced): quando definida, o filtro local desliga e o pai
    *  atualiza `options`. Implica `searchable`. */
-  onSearch?: (query: string) => void
+  onSearch?: (query: string) => void;
   /** "Buscando…" enquanto o fetch corre (use com `onSearch`). */
-  loading?: boolean
+  loading?: boolean;
   /** X no campo quando há seleção — limpa num clique. Bom em filtro. */
-  clearable?: boolean
+  clearable?: boolean;
   /** `outline`: compacto com borda; `ghost`: compacto sem borda nem fundo. */
-  variant?: 'default' | 'outline' | 'ghost'
+  variant?: "default" | "outline" | "ghost";
   /** Placeholder da linha de busca dentro da lista. Default: `'Buscar…'`. */
-  searchPlaceholder?: string
-  emptyText?: string
+  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
+  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 })
+  | (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[]]> = []
+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]])
+    const found = out.find(([g]) => g === o.group);
+    if (found) found[1].push(o);
+    else out.push([o.group, [o]]);
   }
-  return out
+  return out;
 }
 
 export function Select(props: SelectProps): React.ReactElement {
-  return props.native === true ? <NativeSelect {...props} /> : <CustomSelect {...props} />
+  return props.native === true ? (
+    <NativeSelect {...props} />
+  ) : (
+    <CustomSelect {...props} />
+  );
 }
 
 // ── Nativo: o <select> do sistema ───────────────────────────────────────────────────
@@ -129,16 +153,19 @@ function NativeSelect({
   className,
   id,
   icon,
-  size = 'default',
-  shape = 'default',
+  size = "default",
+  shape = "default",
   value,
   onChange,
   ...rest
 }: SelectNativeProps): React.ReactElement {
-  const groups = byGroup(options)
+  const groups = byGroup(options);
   return (
     <div
-      className={cn('group/select relative w-full min-w-0 has-[select:disabled]:opacity-50', className)}
+      className={cn(
+        "group/select relative w-full min-w-0 has-[select:disabled]:opacity-50",
+        className,
+      )}
       data-slot="select-wrapper"
     >
       {icon ? (
@@ -157,15 +184,15 @@ function NativeSelect({
         id={id}
         disabled={disabled}
         value={value}
-        aria-label={rest['aria-label']}
-        aria-invalid={rest['aria-invalid']}
-        aria-describedby={rest['aria-describedby']}
+        aria-label={rest["aria-label"]}
+        aria-invalid={rest["aria-invalid"]}
+        aria-describedby={rest["aria-describedby"]}
         onChange={(e) => onChange(e.target.value)}
         className={cn(
-          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-muted/30 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",
+          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-control px-3 py-2 pr-9 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground hover:bg-interaction-hover disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 data-[shape=pill]:rounded-full",
           focusRing,
-          'aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40',
-          icon ? 'pl-9' : '',
+          "aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40",
+          icon ? "pl-9" : "",
         )}
       >
         {placeholder !== undefined && (
@@ -176,14 +203,28 @@ function NativeSelect({
         {groups.map(([group, items]) =>
           group === undefined ? (
             items.map((o) => (
-              <option key={o.value} value={o.value} disabled={o.disabled} className="bg-[Canvas] text-[CanvasText]">
+              <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]">
+            <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]">
+                <option
+                  key={o.value}
+                  value={o.value}
+                  disabled={o.disabled}
+                  className="bg-[Canvas] text-[CanvasText]"
+                >
                   {o.label}
                 </option>
               ))}
@@ -197,43 +238,49 @@ function NativeSelect({
         data-slot="select-icon"
       />
     </div>
-  )
+  );
 }
 
 // ── Custom: cmdk + Popover (busca, multi, item rico, ghost) ─────────────────────────
-function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.ReactElement {
+function CustomSelect(
+  props: Exclude<SelectProps, SelectNativeProps>,
+): React.ReactElement {
   const {
     options,
-    placeholder = 'Selecione…',
+    placeholder = "Selecione…",
     searchPlaceholder,
-    emptyText = 'Nada encontrado.',
+    emptyText = "Nada encontrado.",
     disabled,
     className,
     id,
     icon,
-    size = 'default',
-    shape = 'default',
+    size = "default",
+    shape = "default",
     searchable = false,
     onSearch,
     loading,
     clearable,
     trailing,
-    variant = 'default',
-  } = props
+    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 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 [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
   /** Fechando por Esc: o foco volta pro gatilho, e focar abre. Marca pra ignorar UM foco. */
-  const closingRef = React.useRef(false)
-  const searchRef = React.useRef<HTMLInputElement>(null)
+  const closingRef = React.useRef(false);
+  const searchRef = React.useRef<HTMLInputElement>(null);
 
-  const selectedOption = options.find((o) => o.value === singleValue)
+  const selectedOption = options.find((o) => o.value === singleValue);
 
   /**
    * Abrir com busca FOCA a caixa — abrir e já poder digitar é o ponto do padrão.
@@ -244,10 +291,10 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
    * depois deste efeito.
    */
   React.useEffect(() => {
-    if (!open || !canSearch) return
-    const r = requestAnimationFrame(() => searchRef.current?.focus())
-    return () => cancelAnimationFrame(r)
-  }, [open, canSearch])
+    if (!open || !canSearch) return;
+    const r = requestAnimationFrame(() => searchRef.current?.focus());
+    return () => cancelAnimationFrame(r);
+  }, [open, canSearch]);
 
   /**
    * O termo de busca zera ao FECHAR.
@@ -256,51 +303,61 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
    * reabrir filtrada por algo que a pessoa procurou minutos antes e já esqueceu.
    */
   React.useEffect(() => {
-    if (!open) setQuery('')
-  }, [open])
+    if (!open) setQuery("");
+  }, [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])
+    if (id !== undefined && inputRef.current !== null) inputRef.current.id = id;
+  }, [id]);
 
-  const onSearchRef = React.useRef(onSearch)
-  onSearchRef.current = onSearch
+  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])
+    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 (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()
+      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()
+      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))
-  }
+    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 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()
-  }
+    if (!props.multiple) return;
+    props.onChange(allSelected ? [] : options.map((o) => o.value));
+    inputRef.current?.focus();
+  };
 
-  const ghost = variant === 'ghost'
-  const outline = variant === 'outline'
-  const compact = ghost || outline
+  const ghost = variant === "ghost";
+  const outline = variant === "outline";
+  const compact = ghost || outline;
 
   /**
    * O GATILHO nunca é caixa de busca — em nenhum modo.
@@ -320,7 +377,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
    * anterior — digitar no próprio campo — é de quem digita um VALOR (endereço, cidade),
    * onde não existe seleção persistente pra exibir.
    */
-  const triggerText = selectedOption?.label ?? ''
+  const triggerText = selectedOption?.label ?? "";
 
   return (
     <Popover
@@ -334,58 +391,85 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
         // armada pra sempre e engoliria a PRÓXIMA abertura por teclado — trocando um
         // defeito visível por um que só aparece pra quem navega por Tab.
         if (!v) {
-          closingRef.current = true
+          closingRef.current = true;
           requestAnimationFrame(() => {
-            closingRef.current = false
-          })
+            closingRef.current = false;
+          });
         }
-        setOpen(v)
+        setOpen(v);
       }}
     >
-      <div ref={rootRef} data-slot="select" data-shape={shape} className={cn(compact ? 'w-fit max-w-full min-w-0' : 'min-w-40', shape === 'pill' && 'rounded-full', className)}>
-        <CommandPrimitive data-slot="select-command" shouldFilter={canSearch && onSearch === undefined} className="overflow-visible">
+      <div
+        ref={rootRef}
+        data-slot="select"
+        data-shape={shape}
+        className={cn(
+          compact ? "w-fit max-w-full min-w-0" : "min-w-40",
+          shape === "pill" && "rounded-full",
+          className,
+        )}
+      >
+        <CommandPrimitive
+          data-slot="select-command"
+          shouldFilter={canSearch && onSearch === undefined}
+          className="overflow-visible"
+        >
           <PopoverAnchor asChild>
             <div
               data-slot="select-control"
               data-size={size}
               data-shape={shape}
               data-variant={variant}
-              aria-invalid={props['aria-invalid']}
+              aria-invalid={props["aria-invalid"]}
               onClick={() => {
                 if (disabled !== true) {
-                  setOpen(true)
-                  inputRef.current?.focus()
+                  setOpen(true);
+                  inputRef.current?.focus();
                 }
               }}
               className={cn(
-                'flex items-center gap-1.5 rounded-md outline-none transition-[color,box-shadow] data-[shape=pill]:rounded-full',
+                "flex items-center gap-1.5 rounded-md outline-none transition-[color,box-shadow] data-[shape=pill]:rounded-full",
                 ghost
-                  ? 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-muted/30 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',
+                  ? cn(
+                      "min-h-9 px-3 py-1 text-muted-foreground hover:bg-interaction-hover hover:text-foreground data-[size=sm]:min-h-8 data-[size=sm]:px-2",
+                      focusRingWithin,
+                    )
+                  : cn(
+                      "min-h-9 border border-input bg-control 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:aria-invalid:ring-context-danger/40",
+                      focusRingWithin,
+                    ),
+                variant === "default" && "flex-wrap",
+                outline &&
+                  "hover:bg-interaction-hover hover:text-accent-foreground",
                 "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-                canSearch ? '' : 'cursor-pointer',
-                disabled === true && 'cursor-not-allowed opacity-50',
+                canSearch ? "" : "cursor-pointer",
+                disabled === true && "cursor-not-allowed opacity-50",
               )}
             >
               {icon ? (
-                <span data-slot="select-leading" className="text-muted-foreground">
+                <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)
+                  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">
+                    <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)
+                          e.stopPropagation();
+                          removeValue(v);
                         }}
                         className="text-muted-foreground hover:text-foreground"
                         aria-label={`Remover ${o?.label ?? v}`}
@@ -393,7 +477,7 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                         <X className="size-3" />
                       </button>
                     </span>
-                  )
+                  );
                 })}
               {/* O rótulo é SEMPRE um `<span>`. Quando ele morava no `value` de um input,
                   o texto rolava pro fim ao ganhar foco (o browser leva o cursor pro final)
@@ -406,12 +490,16 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                 <span
                   data-slot="select-trigger-label"
                   className={cn(
-                    'min-w-0 truncate text-left text-sm',
-                    compact ? 'flex-initial' : 'flex-1',
-                    selectedOption === undefined && 'text-muted-foreground',
+                    "min-w-0 truncate text-left text-sm",
+                    compact ? "flex-initial" : "flex-1",
+                    selectedOption === undefined && "text-muted-foreground",
                   )}
                 >
-                  {props.multiple ? placeholder : (selectedOption?.triggerLabel ?? selectedOption?.label ?? placeholder)}
+                  {props.multiple
+                    ? placeholder
+                    : (selectedOption?.triggerLabel ??
+                      selectedOption?.label ??
+                      placeholder)}
                 </span>
               )}
               <input
@@ -422,34 +510,41 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                 readOnly
                 role="combobox"
                 aria-expanded={open}
-                aria-label={props['aria-label']}
-                aria-invalid={props['aria-invalid']}
-                aria-describedby={props['aria-describedby']}
-                value={props.multiple ? '' : triggerText}
+                aria-label={props["aria-label"]}
+                aria-invalid={props["aria-invalid"]}
+                aria-describedby={props["aria-describedby"]}
+                value={props.multiple ? "" : triggerText}
                 onChange={() => {}}
                 onFocus={() => {
                   // Fechar por Esc devolve o foco pra cá — e focar abre. Sem esta guarda,
                   // Esc REABRE a lista e o seletor fica impossível de fechar pelo teclado.
                   if (closingRef.current) {
-                    closingRef.current = false
-                    return
+                    closingRef.current = false;
+                    return;
                   }
-                  setOpen(true)
+                  setOpen(true);
                 }}
                 onKeyDown={(e) => {
-                  if (e.key === 'Escape' && open) {
-                    e.stopPropagation()
-                    setOpen(false)
-                    return
+                  if (e.key === "Escape" && open) {
+                    e.stopPropagation();
+                    setOpen(false);
+                    return;
                   }
                   // Teclado abre a lista como o clique abre: sem isto, quem navega por Tab
                   // chega no campo e não tem como escolher nada.
-                  if (!open && (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown')) {
-                    e.preventDefault()
-                    setOpen(true)
+                  if (
+                    !open &&
+                    (e.key === "Enter" ||
+                      e.key === " " ||
+                      e.key === "ArrowDown")
+                  ) {
+                    e.preventDefault();
+                    setOpen(true);
                   }
                 }}
-                placeholder={props.multiple && selectedValues.length > 0 ? '' : placeholder}
+                placeholder={
+                  props.multiple && selectedValues.length > 0 ? "" : placeholder
+                }
                 className="sr-only"
               />
               {/* Ação custom (ex.: botão que age sobre o valor) — o clique NÃO abre a lista:
@@ -463,7 +558,10 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   // Botão trailing na borda: aproxima 0.375rem para equilibrar 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')}
+                  className={cn(
+                    "flex shrink-0 items-center text-muted-foreground",
+                    canSearch && "has-[button]:-mr-1.5",
+                  )}
                   onClick={(e) => e.stopPropagation()}
                   onPointerDown={(e) => e.stopPropagation()}
                 >
@@ -473,27 +571,36 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
               {/* Chevron SEMPRE: o gatilho agora abre uma lista nos dois modos, e essa é a
                   affordance que diz isso. Antes ele sumia no buscável, porque ali o sinal
                   era o cursor de texto — que não existe mais no campo. */}
-              <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" />
-              {clearable === true && selectedValues.length > 0 && disabled !== true && (
-                <InputGroupButton
-                  type="button"
-                  size="icon-xs"
-                  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="-ml-1 -mr-1.5 text-muted-foreground hover:text-foreground"
-                >
-                  <X className="size-3.5" />
-                </InputGroupButton>
-              )}
+              <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"
+              />
+              {clearable === true &&
+                selectedValues.length > 0 &&
+                disabled !== true && (
+                  <InputGroupButton
+                    type="button"
+                    size="icon-xs"
+                    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="-ml-1 -mr-1.5 text-muted-foreground hover:text-foreground"
+                  >
+                    <X className="size-3.5" />
+                  </InputGroupButton>
+                )}
             </div>
           </PopoverAnchor>
           <PopoverContent
@@ -502,10 +609,10 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
             // preservar rótulos maiores sem alargar o gatilho. No ghost, o gatilho já abraça
             // o conteúdo e a lista mantém sua faixa compacta própria.
             className={cn(
-              'pointer-events-auto overflow-hidden p-0',
+              "pointer-events-auto overflow-hidden p-0",
               compact
-                ? 'w-auto min-w-56 max-w-80'
-                : 'w-max min-w-(--radix-popover-trigger-width) max-w-lg',
+                ? "w-auto min-w-56 max-w-80"
+                : "w-max min-w-(--radix-popover-trigger-width) max-w-lg",
             )}
             /*
              * O foco ao abrir é SEMPRE nosso — o Radix nunca mexe.
@@ -519,10 +626,11 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
             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()
+              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()}
@@ -530,21 +638,27 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
             {/* A busca mora AQUI, e não no gatilho. Nasce vazia porque é um campo
                 próprio — não há rótulo pra herdar. */}
             {canSearch && (
-              <div data-slot="select-search-row" className="flex items-center gap-2 border-b px-3">
-                <SearchIcon className="size-4 shrink-0 opacity-50" aria-hidden="true" />
+              <div
+                data-slot="select-search-row"
+                className="flex items-center gap-2 border-b px-3"
+              >
+                <SearchIcon
+                  className="size-4 shrink-0 opacity-50"
+                  aria-hidden="true"
+                />
                 <CommandPrimitive.Input
                   ref={searchRef}
                   data-slot="select-search"
                   value={query}
                   onValueChange={setQuery}
-                  placeholder={searchPlaceholder ?? 'Buscar…'}
+                  placeholder={searchPlaceholder ?? "Buscar…"}
                   className="flex-1 bg-transparent py-2.5 text-sm outline-hidden placeholder:text-muted-foreground"
                   onKeyDown={(e) => {
-                    if (e.key === 'Escape') {
-                      e.stopPropagation()
-                      closingRef.current = true
-                      setOpen(false)
-                      inputRef.current?.focus() // devolve o foco ao gatilho, senão ele se perde
+                    if (e.key === "Escape") {
+                      e.stopPropagation();
+                      closingRef.current = true;
+                      setOpen(false);
+                      inputRef.current?.focus(); // devolve o foco ao gatilho, senão ele se perde
                     }
                   }}
                 />
@@ -556,46 +670,67 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
                   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"
+                  className="flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-interaction-hover hover:text-accent-foreground"
                 >
-                  {allSelected ? 'Limpar seleção' : `Selecionar tudo (${options.length})`}
+                  {allSelected
+                    ? "Limpar seleção"
+                    : `Selecionar tudo (${options.length})`}
                 </button>
               </div>
             )}
-            <CommandList data-slot="select-list" className="max-h-60 overflow-auto">
+            <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">
+                <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}>
+                    <CommandGroup key={group ?? "—"} heading={group}>
                       {items.map((o) => {
-                        const hasHint = o.hint !== undefined && o.hint.length > 0
+                        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}`}
+                            value={`${o.label} ${o.hint ?? ""} ${o.value}`}
                             onSelect={() => onSelectOption(o)}
                           >
-                            <span data-slot="select-item-label" className="min-w-0 truncate">
+                            <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">
+                              <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')}
+                              className={cn(
+                                "size-4 shrink-0",
+                                !hasHint && "ml-auto",
+                                selectedValues.includes(o.value)
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
                             />
                           </CommandItem>
-                        )
+                        );
                       })}
                     </CommandGroup>
                   ))}
@@ -606,5 +741,5 @@ function CustomSelect(props: Exclude<SelectProps, SelectNativeProps>): React.Rea
         </CommandPrimitive>
       </div>
     </Popover>
-  )
+  );
 }