@traky-app/ui 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traky-app/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Componentes Traky UI para importar desde @traky-app/ui, más el registro copy-paste.",
   "license": "MIT",
   "type": "module",

package/registry/traky/json/option-combobox.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "option-combobox",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "command",
+    "popover"
+  ],
+  "files": [
+    {
+      "path": "ui/option-combobox.tsx",
+      "content": "\"use client\"\n\nimport { useState, type ComponentType } from \"react\"\nimport { IconCheck, IconSelector } from \"@tabler/icons-react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn, commandFilterAccentInsensitive } from \"@/lib/utils\"\n\nexport type OptionComboboxOption = {\n  value: string\n  label: string\n  icon?: ComponentType<{ className?: string; stroke?: number }>\n  iconClassName?: string\n  /** Pastilla de color, por ejemplo una etiqueta. */\n  color?: string\n  /** Sangría para una opción hija. */\n  indented?: boolean\n}\n\nfunction OptionGlyph({\n  icon: Icon,\n  className,\n}: {\n  icon?: OptionComboboxOption[\"icon\"]\n  className?: string\n}) {\n  if (!Icon) return null\n  return <Icon className={cn(\"size-4 shrink-0\", className)} stroke={1.75} />\n}\n\nfunction OptionFace({ option }: { option: OptionComboboxOption }) {\n  if (option.color) {\n    return (\n      <span\n        className=\"inline-flex max-w-full items-center truncate rounded-full border px-2 py-0.5 text-xs font-medium\"\n        style={{\n          color: option.color,\n          borderColor: option.color,\n          backgroundColor: `${option.color}1A`,\n        }}\n      >\n        {option.label}\n      </span>\n    )\n  }\n  return (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      <OptionGlyph icon={option.icon} className={option.iconClassName} />\n      <span className=\"truncate\">{option.label}</span>\n    </span>\n  )\n}\n\nexport function OptionCombobox({\n  value = \"\",\n  options,\n  onChange,\n  placeholder = \"Seleccionar…\",\n  searchPlaceholder = \"Buscar…\",\n  emptyLabel = \"No se encontraron resultados.\",\n  groupHeading,\n  allowEmpty = false,\n  emptyValueLabel,\n  emptyValueIcon,\n  clearLabel,\n  clearOption,\n  allOption,\n  groups,\n  multiple = false,\n  values = [],\n  onValuesChange,\n  className,\n  disabled = false,\n  modal = false,\n  title,\n}: {\n  value?: string\n  options: OptionComboboxOption[]\n  onChange?: (value: string) => void\n  /** Varias opciones a la vez. El menú no se cierra al marcar. */\n  multiple?: boolean\n  values?: string[]\n  onValuesChange?: (values: string[]) => void\n  placeholder?: string\n  searchPlaceholder?: string\n  emptyLabel?: string\n  groupHeading?: string\n  /** Si es true, la primera fila deja el valor vacío y no pertenece a `options`. */\n  allowEmpty?: boolean\n  /** Texto de esa fila vacía. Si no se indica, usa `placeholder`. */\n  emptyValueLabel?: string\n  emptyValueIcon?: OptionComboboxOption[\"icon\"]\n  /** Opción para vaciar el valor. El botón sigue mostrando `placeholder`. */\n  clearLabel?: string\n  /** Opción para vaciar el valor, visible también en el botón. */\n  clearOption?: OptionComboboxOption\n  /** Opción extra al inicio. Si no hay valor, el botón la muestra. */\n  allOption?: OptionComboboxOption\n  /** Varios grupos, por ejemplo persona y empresa. */\n  groups?: { heading?: string; options: OptionComboboxOption[] }[]\n  className?: string\n  disabled?: boolean\n  modal?: boolean\n  title?: string\n}) {\n  const [open, setOpen] = useState(false)\n  const blankLabel = emptyValueLabel || placeholder\n  const realOptions = allowEmpty\n    ? options.filter((option) => option.value !== \"\")\n    : options\n  const grouped = (groups ?? []).filter((group) => group.options.length > 0)\n  const catalog = grouped.length\n    ? grouped.flatMap((group) => group.options)\n    : realOptions\n  const listOptions = allOption ? [allOption, ...catalog] : catalog\n  const emptyChoice: OptionComboboxOption = {\n    value: \"\",\n    label: blankLabel,\n    icon: emptyValueIcon,\n  }\n  const selected = allowEmpty && value === \"\"\n    ? emptyChoice\n    : clearOption && value === \"\"\n      ? clearOption\n      : listOptions.find((option) => option.value === value)\n        ?? (!value ? allOption : undefined)\n  const selectedMany = multiple\n    ? values.flatMap((id) => {\n        const option = listOptions.find((item) => item.value === id)\n        return option ? [option] : []\n      })\n    : []\n\n  const chosen = (optionValue: string) =>\n    multiple ? values.includes(optionValue) : value === optionValue\n\n  const choose = (next: string) => {\n    if (multiple) {\n      onValuesChange?.(\n        values.includes(next)\n          ? values.filter((item) => item !== next)\n          : [...values, next],\n      )\n      return\n    }\n    onChange?.(next)\n    setOpen(false)\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={disabled ? undefined : setOpen}\n      modal={modal}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          title={title}\n          className={cn(\n            \"w-full justify-between font-normal\",\n            multiple && \"h-auto py-2\",\n            className,\n          )}\n        >\n          {multiple ? (\n            <span className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {selectedMany.length ? (\n                selectedMany.map((option) => (\n                  <OptionFace key={option.value} option={option} />\n                ))\n              ) : (\n                <span className=\"truncate text-muted-foreground\">\n                  {placeholder}\n                </span>\n              )}\n            </span>\n          ) : selected ? (\n            <OptionFace option={selected} />\n          ) : (\n            <span className=\"truncate text-muted-foreground\">{placeholder}</span>\n          )}\n          <IconSelector className=\"size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      {disabled ? null : (\n        <PopoverContent\n          align=\"start\"\n          className=\"z-[60] w-[var(--radix-popover-trigger-width)] min-w-56 p-0\"\n        >\n          <Command filter={commandFilterAccentInsensitive}>\n            <CommandInput placeholder={searchPlaceholder} />\n            <CommandList>\n              <CommandEmpty>{emptyLabel}</CommandEmpty>\n              {grouped.length ? (\n                grouped.map((group) => (\n                  <CommandGroup\n                    key={group.heading ?? group.options[0]?.value}\n                    heading={group.heading}\n                  >\n                    {group.options.map((option) => (\n                      <CommandItem\n                        key={option.value || option.label}\n                        value={`${option.label} ${option.value}`}\n                        className={option.indented ? \"pl-6\" : undefined}\n                        onSelect={() => choose(option.value)}\n                      >\n                        <OptionFace option={option} />\n                        <IconCheck\n                          className={cn(\n                            \"ml-auto size-4\",\n                            chosen(option.value) ? \"opacity-100\" : \"opacity-0\",\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                ))\n              ) : (\n                <CommandGroup heading={groupHeading}>\n                  {allowEmpty ? (\n                    <CommandItem\n                      value={`__empty__ ${blankLabel}`}\n                      onSelect={() => choose(\"\")}\n                    >\n                      <OptionGlyph icon={emptyValueIcon} />\n                      {blankLabel}\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          value ? \"opacity-0\" : \"opacity-100\",\n                        )}\n                      />\n                    </CommandItem>\n                  ) : null}\n                  {clearOption ? (\n                    <CommandItem\n                      value={`__clear__ ${clearOption.label}`}\n                      onSelect={() => choose(\"\")}\n                    >\n                      <OptionGlyph\n                        icon={clearOption.icon}\n                        className={clearOption.iconClassName}\n                      />\n                      {clearOption.label}\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          value ? \"opacity-0\" : \"opacity-100\",\n                        )}\n                      />\n                    </CommandItem>\n                  ) : clearLabel ? (\n                    <CommandItem\n                      value={`__clear__ ${clearLabel}`}\n                      onSelect={() => choose(\"\")}\n                    >\n                      {clearLabel}\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          value ? \"opacity-0\" : \"opacity-100\",\n                        )}\n                      />\n                    </CommandItem>\n                  ) : null}\n                  {listOptions.map((option) => (\n                    <CommandItem\n                      key={option.value || option.label}\n                      value={`${option.label} ${option.value}`}\n                      className={option.indented ? \"pl-6\" : undefined}\n                      onSelect={() => choose(option.value)}\n                    >\n                      <OptionFace option={option} />\n                      <IconCheck\n                        className={cn(\n                          \"ml-auto size-4\",\n                          chosen(option.value) ? \"opacity-100\" : \"opacity-0\",\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      )}\n    </Popover>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/registry.json

@@ -463,6 +463,16 @@
         }
       ]
     },
+    {
+      "name": "option-combobox",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/option-combobox.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "pagination",
       "type": "registry:ui",

package/registry/traky/ui/option-combobox.tsx

@@ -0,0 +1,307 @@
+"use client"
+
+import { useState, type ComponentType } from "react"
+import { IconCheck, IconSelector } from "@tabler/icons-react"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn, commandFilterAccentInsensitive } from "@/lib/utils"
+
+export type OptionComboboxOption = {
+  value: string
+  label: string
+  icon?: ComponentType<{ className?: string; stroke?: number }>
+  iconClassName?: string
+  /** Pastilla de color, por ejemplo una etiqueta. */
+  color?: string
+  /** Sangría para una opción hija. */
+  indented?: boolean
+}
+
+function OptionGlyph({
+  icon: Icon,
+  className,
+}: {
+  icon?: OptionComboboxOption["icon"]
+  className?: string
+}) {
+  if (!Icon) return null
+  return <Icon className={cn("size-4 shrink-0", className)} stroke={1.75} />
+}
+
+function OptionFace({ option }: { option: OptionComboboxOption }) {
+  if (option.color) {
+    return (
+      <span
+        className="inline-flex max-w-full items-center truncate rounded-full border px-2 py-0.5 text-xs font-medium"
+        style={{
+          color: option.color,
+          borderColor: option.color,
+          backgroundColor: `${option.color}1A`,
+        }}
+      >
+        {option.label}
+      </span>
+    )
+  }
+  return (
+    <span className="flex min-w-0 items-center gap-2">
+      <OptionGlyph icon={option.icon} className={option.iconClassName} />
+      <span className="truncate">{option.label}</span>
+    </span>
+  )
+}
+
+export function OptionCombobox({
+  value = "",
+  options,
+  onChange,
+  placeholder = "Seleccionar…",
+  searchPlaceholder = "Buscar…",
+  emptyLabel = "No se encontraron resultados.",
+  groupHeading,
+  allowEmpty = false,
+  emptyValueLabel,
+  emptyValueIcon,
+  clearLabel,
+  clearOption,
+  allOption,
+  groups,
+  multiple = false,
+  values = [],
+  onValuesChange,
+  className,
+  disabled = false,
+  modal = false,
+  title,
+}: {
+  value?: string
+  options: OptionComboboxOption[]
+  onChange?: (value: string) => void
+  /** Varias opciones a la vez. El menú no se cierra al marcar. */
+  multiple?: boolean
+  values?: string[]
+  onValuesChange?: (values: string[]) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: string
+  groupHeading?: string
+  /** Si es true, la primera fila deja el valor vacío y no pertenece a `options`. */
+  allowEmpty?: boolean
+  /** Texto de esa fila vacía. Si no se indica, usa `placeholder`. */
+  emptyValueLabel?: string
+  emptyValueIcon?: OptionComboboxOption["icon"]
+  /** Opción para vaciar el valor. El botón sigue mostrando `placeholder`. */
+  clearLabel?: string
+  /** Opción para vaciar el valor, visible también en el botón. */
+  clearOption?: OptionComboboxOption
+  /** Opción extra al inicio. Si no hay valor, el botón la muestra. */
+  allOption?: OptionComboboxOption
+  /** Varios grupos, por ejemplo persona y empresa. */
+  groups?: { heading?: string; options: OptionComboboxOption[] }[]
+  className?: string
+  disabled?: boolean
+  modal?: boolean
+  title?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const blankLabel = emptyValueLabel || placeholder
+  const realOptions = allowEmpty
+    ? options.filter((option) => option.value !== "")
+    : options
+  const grouped = (groups ?? []).filter((group) => group.options.length > 0)
+  const catalog = grouped.length
+    ? grouped.flatMap((group) => group.options)
+    : realOptions
+  const listOptions = allOption ? [allOption, ...catalog] : catalog
+  const emptyChoice: OptionComboboxOption = {
+    value: "",
+    label: blankLabel,
+    icon: emptyValueIcon,
+  }
+  const selected = allowEmpty && value === ""
+    ? emptyChoice
+    : clearOption && value === ""
+      ? clearOption
+      : listOptions.find((option) => option.value === value)
+        ?? (!value ? allOption : undefined)
+  const selectedMany = multiple
+    ? values.flatMap((id) => {
+        const option = listOptions.find((item) => item.value === id)
+        return option ? [option] : []
+      })
+    : []
+
+  const chosen = (optionValue: string) =>
+    multiple ? values.includes(optionValue) : value === optionValue
+
+  const choose = (next: string) => {
+    if (multiple) {
+      onValuesChange?.(
+        values.includes(next)
+          ? values.filter((item) => item !== next)
+          : [...values, next],
+      )
+      return
+    }
+    onChange?.(next)
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={disabled ? undefined : setOpen}
+      modal={modal}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          title={title}
+          className={cn(
+            "w-full justify-between font-normal",
+            multiple && "h-auto py-2",
+            className,
+          )}
+        >
+          {multiple ? (
+            <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+              {selectedMany.length ? (
+                selectedMany.map((option) => (
+                  <OptionFace key={option.value} option={option} />
+                ))
+              ) : (
+                <span className="truncate text-muted-foreground">
+                  {placeholder}
+                </span>
+              )}
+            </span>
+          ) : selected ? (
+            <OptionFace option={selected} />
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      {disabled ? null : (
+        <PopoverContent
+          align="start"
+          className="z-[60] w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
+        >
+          <Command filter={commandFilterAccentInsensitive}>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyLabel}</CommandEmpty>
+              {grouped.length ? (
+                grouped.map((group) => (
+                  <CommandGroup
+                    key={group.heading ?? group.options[0]?.value}
+                    heading={group.heading}
+                  >
+                    {group.options.map((option) => (
+                      <CommandItem
+                        key={option.value || option.label}
+                        value={`${option.label} ${option.value}`}
+                        className={option.indented ? "pl-6" : undefined}
+                        onSelect={() => choose(option.value)}
+                      >
+                        <OptionFace option={option} />
+                        <IconCheck
+                          className={cn(
+                            "ml-auto size-4",
+                            chosen(option.value) ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ))
+              ) : (
+                <CommandGroup heading={groupHeading}>
+                  {allowEmpty ? (
+                    <CommandItem
+                      value={`__empty__ ${blankLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph icon={emptyValueIcon} />
+                      {blankLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {clearOption ? (
+                    <CommandItem
+                      value={`__clear__ ${clearOption.label}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph
+                        icon={clearOption.icon}
+                        className={clearOption.iconClassName}
+                      />
+                      {clearOption.label}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : clearLabel ? (
+                    <CommandItem
+                      value={`__clear__ ${clearLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      {clearLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {listOptions.map((option) => (
+                    <CommandItem
+                      key={option.value || option.label}
+                      value={`${option.label} ${option.value}`}
+                      className={option.indented ? "pl-6" : undefined}
+                      onSelect={() => choose(option.value)}
+                    >
+                      <OptionFace option={option} />
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          chosen(option.value) ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  )
+}

package/src/ui/option-combobox.tsx

@@ -0,0 +1,307 @@
+"use client"
+
+import { useState, type ComponentType } from "react"
+import { IconCheck, IconSelector } from "@tabler/icons-react"
+import { Button } from "./button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover"
+import { cn, commandFilterAccentInsensitive } from "../lib/utils"
+
+export type OptionComboboxOption = {
+  value: string
+  label: string
+  icon?: ComponentType<{ className?: string; stroke?: number }>
+  iconClassName?: string
+  /** Pastilla de color, por ejemplo una etiqueta. */
+  color?: string
+  /** Sangría para una opción hija. */
+  indented?: boolean
+}
+
+function OptionGlyph({
+  icon: Icon,
+  className,
+}: {
+  icon?: OptionComboboxOption["icon"]
+  className?: string
+}) {
+  if (!Icon) return null
+  return <Icon className={cn("size-4 shrink-0", className)} stroke={1.75} />
+}
+
+function OptionFace({ option }: { option: OptionComboboxOption }) {
+  if (option.color) {
+    return (
+      <span
+        className="inline-flex max-w-full items-center truncate rounded-full border px-2 py-0.5 text-xs font-medium"
+        style={{
+          color: option.color,
+          borderColor: option.color,
+          backgroundColor: `${option.color}1A`,
+        }}
+      >
+        {option.label}
+      </span>
+    )
+  }
+  return (
+    <span className="flex min-w-0 items-center gap-2">
+      <OptionGlyph icon={option.icon} className={option.iconClassName} />
+      <span className="truncate">{option.label}</span>
+    </span>
+  )
+}
+
+export function OptionCombobox({
+  value = "",
+  options,
+  onChange,
+  placeholder = "Seleccionar…",
+  searchPlaceholder = "Buscar…",
+  emptyLabel = "No se encontraron resultados.",
+  groupHeading,
+  allowEmpty = false,
+  emptyValueLabel,
+  emptyValueIcon,
+  clearLabel,
+  clearOption,
+  allOption,
+  groups,
+  multiple = false,
+  values = [],
+  onValuesChange,
+  className,
+  disabled = false,
+  modal = false,
+  title,
+}: {
+  value?: string
+  options: OptionComboboxOption[]
+  onChange?: (value: string) => void
+  /** Varias opciones a la vez. El menú no se cierra al marcar. */
+  multiple?: boolean
+  values?: string[]
+  onValuesChange?: (values: string[]) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: string
+  groupHeading?: string
+  /** Si es true, la primera fila deja el valor vacío y no pertenece a `options`. */
+  allowEmpty?: boolean
+  /** Texto de esa fila vacía. Si no se indica, usa `placeholder`. */
+  emptyValueLabel?: string
+  emptyValueIcon?: OptionComboboxOption["icon"]
+  /** Opción para vaciar el valor. El botón sigue mostrando `placeholder`. */
+  clearLabel?: string
+  /** Opción para vaciar el valor, visible también en el botón. */
+  clearOption?: OptionComboboxOption
+  /** Opción extra al inicio. Si no hay valor, el botón la muestra. */
+  allOption?: OptionComboboxOption
+  /** Varios grupos, por ejemplo persona y empresa. */
+  groups?: { heading?: string; options: OptionComboboxOption[] }[]
+  className?: string
+  disabled?: boolean
+  modal?: boolean
+  title?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const blankLabel = emptyValueLabel || placeholder
+  const realOptions = allowEmpty
+    ? options.filter((option) => option.value !== "")
+    : options
+  const grouped = (groups ?? []).filter((group) => group.options.length > 0)
+  const catalog = grouped.length
+    ? grouped.flatMap((group) => group.options)
+    : realOptions
+  const listOptions = allOption ? [allOption, ...catalog] : catalog
+  const emptyChoice: OptionComboboxOption = {
+    value: "",
+    label: blankLabel,
+    icon: emptyValueIcon,
+  }
+  const selected = allowEmpty && value === ""
+    ? emptyChoice
+    : clearOption && value === ""
+      ? clearOption
+      : listOptions.find((option) => option.value === value)
+        ?? (!value ? allOption : undefined)
+  const selectedMany = multiple
+    ? values.flatMap((id) => {
+        const option = listOptions.find((item) => item.value === id)
+        return option ? [option] : []
+      })
+    : []
+
+  const chosen = (optionValue: string) =>
+    multiple ? values.includes(optionValue) : value === optionValue
+
+  const choose = (next: string) => {
+    if (multiple) {
+      onValuesChange?.(
+        values.includes(next)
+          ? values.filter((item) => item !== next)
+          : [...values, next],
+      )
+      return
+    }
+    onChange?.(next)
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={disabled ? undefined : setOpen}
+      modal={modal}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          title={title}
+          className={cn(
+            "w-full justify-between font-normal",
+            multiple && "h-auto py-2",
+            className,
+          )}
+        >
+          {multiple ? (
+            <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+              {selectedMany.length ? (
+                selectedMany.map((option) => (
+                  <OptionFace key={option.value} option={option} />
+                ))
+              ) : (
+                <span className="truncate text-muted-foreground">
+                  {placeholder}
+                </span>
+              )}
+            </span>
+          ) : selected ? (
+            <OptionFace option={selected} />
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      {disabled ? null : (
+        <PopoverContent
+          align="start"
+          className="z-[60] w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
+        >
+          <Command filter={commandFilterAccentInsensitive}>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyLabel}</CommandEmpty>
+              {grouped.length ? (
+                grouped.map((group) => (
+                  <CommandGroup
+                    key={group.heading ?? group.options[0]?.value}
+                    heading={group.heading}
+                  >
+                    {group.options.map((option) => (
+                      <CommandItem
+                        key={option.value || option.label}
+                        value={`${option.label} ${option.value}`}
+                        className={option.indented ? "pl-6" : undefined}
+                        onSelect={() => choose(option.value)}
+                      >
+                        <OptionFace option={option} />
+                        <IconCheck
+                          className={cn(
+                            "ml-auto size-4",
+                            chosen(option.value) ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ))
+              ) : (
+                <CommandGroup heading={groupHeading}>
+                  {allowEmpty ? (
+                    <CommandItem
+                      value={`__empty__ ${blankLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph icon={emptyValueIcon} />
+                      {blankLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {clearOption ? (
+                    <CommandItem
+                      value={`__clear__ ${clearOption.label}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph
+                        icon={clearOption.icon}
+                        className={clearOption.iconClassName}
+                      />
+                      {clearOption.label}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : clearLabel ? (
+                    <CommandItem
+                      value={`__clear__ ${clearLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      {clearLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {listOptions.map((option) => (
+                    <CommandItem
+                      key={option.value || option.label}
+                      value={`${option.label} ${option.value}`}
+                      className={option.indented ? "pl-6" : undefined}
+                      onSelect={() => choose(option.value)}
+                    >
+                      <OptionFace option={option} />
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          chosen(option.value) ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  )
+}