{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Integrated Select",
  "description": "Flat-props Select covering dropdown, searchable, multi-select, and remote-loading modes in a single component. Built on shadcn's Combobox primitive.",
  "registryDependencies": [
    "combobox",
    "button",
    "input-group",
    "@easy-shadcn/use-select-items",
    "@easy-shadcn/use-select-loader"
  ],
  "files": [
    {
      "path": "registry/ui/select.tsx",
      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport {\n  ArrowDown01Icon,\n  Cancel01Icon,\n  SearchList01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ClassValue } from \"clsx\";\nimport type { AriaAttributes, FocusEvent, ReactNode } from \"react\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/components/ui/combobox\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { cn } from \"@/lib/utils\";\nimport type { SelectItem } from \"@/registry/hooks/use-select-items\";\nimport { useSelectItems } from \"@/registry/hooks/use-select-items\";\nimport type { SelectItemsLoader } from \"@/registry/hooks/use-select-loader\";\nimport { useSelectLoader } from \"@/registry/hooks/use-select-loader\";\n\nexport type { SelectItem } from \"@/registry/hooks/use-select-items\";\nexport type { SelectItemsLoader } from \"@/registry/hooks/use-select-loader\";\n\ninterface SelectBaseProps {\n  /** Forwarded to the focusable control for screen-reader descriptions. */\n  \"aria-describedby\"?: string;\n  /** Forwarded to the focusable control for invalid-state semantics. */\n  \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n  /** Chip className for `multiple` mode. */\n  chipClassName?: ClassValue;\n  /** Root wrapper className. */\n  className?: ClassValue;\n  /**\n   * Show an inline clear button when the field has a value and the user hovers\n   * the right-side icon area. Works in all three modes.\n   */\n  clearable?: boolean;\n  /** Popover content className. */\n  contentClassName?: ClassValue;\n  /**\n   * Debounce for `loadItems` calls when `serverSideFilter` is true, in milliseconds.\n   * Ignored when `serverSideFilter` is false.\n   * @default 250\n   */\n  debounceMs?: number;\n  /** Uncontrolled initial open state. */\n  defaultOpen?: boolean;\n  /** Disable all interaction. */\n  disabled?: boolean;\n  /** `<ComboboxEmpty />` className. */\n  emptyClassName?: ClassValue;\n  /** Content rendered when no items match the query. @default \"No results\" */\n  emptyMessage?: ReactNode;\n  /**\n   * Message shown when `loadItems` rejects.\n   * - `ReactNode`: static content.\n   * - `(error) => ReactNode`: receives the rejected value.\n   *\n   * The default formatter extracts `error.message` or `error.error` from the rejected value,\n   * falling back to `\"Failed to load options\"`.\n   */\n  errorMessage?: ReactNode | ((error: unknown) => ReactNode);\n  /**\n   * Custom filter predicate. Applies only in static / eager-async modes.\n   * Ignored when `serverSideFilter` is `true` (the server is the filter).\n   * @default case-insensitive `contains` against `label`\n   */\n  filter?: (item: SelectItem, query: string) => boolean;\n  /**\n   * Id applied to the focusable control (trigger button or input), so a\n   * `<label htmlFor>` / the Field component can associate with it.\n   */\n  id?: string;\n  /** `<ComboboxInput />` className. Used in `searchable` and `multiple` modes. */\n  inputClassName?: ClassValue;\n  /** Default item className. Merged with each `item.itemClassName`. */\n  itemClassName?: ClassValue;\n  /**\n   * Static option list. Use either this or `loadItems`. When `loadItems` is provided\n   * the `items` prop is ignored.\n   */\n  items?: SelectItem[];\n  /**\n   * Async loader. Receives the current query string and an `AbortSignal` for\n   * race-condition cleanup. Resolves to the next option list.\n   *\n   * Behavior depends on `serverSideFilter`:\n   * - `false` (default): called once with `query === \"\"`. Timing controlled by `loadOn`.\n   *   Subsequent typing is filtered locally via `filter`.\n   * - `true`: called on popup open (`query === \"\"`) and on every input change\n   *   (debounced by `debounceMs`). The client-side filter is disabled —\n   *   the server is the filter. Already-selected items are merged back into the result\n   *   so chips / triggers continue to render their labels.\n   */\n  loadItems?: SelectItemsLoader;\n  /** Content shown in the popup while a fetch is pending. @default \"Loading…\" */\n  loadingMessage?: ReactNode;\n  /**\n   * When the first eager fetch fires. Applies only when `loadItems` is provided\n   * and `serverSideFilter` is false.\n   * - `\"mount\"` (default): fire immediately on mount.\n   * - `\"open\"`: fire the first time the popup opens.\n   */\n  loadOn?: \"mount\" | \"open\";\n  /**\n   * Max selectable count in `multiple` mode. When the limit is reached every\n   * unselected item is rendered as `disabled` so the user cannot exceed it.\n   * Already-selected items stay clickable for deselection. Ignored in single mode.\n   */\n  maxCount?: number;\n  /** Form field name for native form submission. */\n  name?: string;\n  /** Called when the popover open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Controlled popover open state. */\n  open?: boolean;\n  /** Placeholder shown when no value is selected. @default \"Pick an option\" */\n  placeholder?: string;\n  /** Render an input that filters the list. Ignored (treated as `true`) when `multiple` is true. */\n  searchable?: boolean;\n  /**\n   * Use server-side filtering: every input change re-invokes `loadItems(query)`\n   * (debounced by `debounceMs`) and the client-side filter is disabled.\n   * Implicitly enables an input (searchable/multiple) — a plain dropdown without\n   * an input cannot drive a search query.\n   * @default false\n   */\n  serverSideFilter?: boolean;\n  /** Trigger / input / chips-container className depending on mode. */\n  triggerClassName?: ClassValue;\n}\n\nexport type SelectSingleProps = SelectBaseProps & {\n  /** Uncontrolled initial value. */\n  defaultValue?: string;\n  /** Single-select mode. */\n  multiple?: false;\n  /**\n   * Called when the selection changes.\n   * `undefined` represents no selection.\n   */\n  onValueChange?: (value: string | undefined) => void;\n  /** Controlled value. */\n  value?: string;\n};\n\nexport type SelectMultipleProps = SelectBaseProps & {\n  /** Uncontrolled initial values. */\n  defaultValue?: string[];\n  /** Enable multi-select with chips. */\n  multiple: true;\n  /**\n   * Called when the selection changes.\n   * An empty array represents no selection.\n   */\n  onValueChange?: (value: string[]) => void;\n  /** Controlled values. */\n  value?: string[];\n};\n\nexport type SelectProps = SelectSingleProps | SelectMultipleProps;\n\n// The query state only drives the async loader, so it should track explicit\n// input edits — not programmatic refills (e.g. base-ui restoring the selected\n// label on close, reason \"none\").\nconst QUERY_UPDATE_REASONS = new Set([\n  \"input-change\",\n  \"input-clear\",\n  \"input-paste\",\n  \"clear-press\",\n]);\n\nfunction defaultErrorRenderer(error: unknown): ReactNode {\n  if (error instanceof Error && error.message) {\n    return error.message;\n  }\n  if (typeof error === \"object\" && error !== null) {\n    const obj = error as Record<string, unknown>;\n    if (typeof obj.error === \"string\") {\n      return obj.error;\n    }\n    if (typeof obj.message === \"string\") {\n      return obj.message;\n    }\n  }\n  return \"Failed to load options\";\n}\n\nfunction renderSelectError(\n  errorMessage: ReactNode | ((error: unknown) => ReactNode) | undefined,\n  error: unknown\n): ReactNode {\n  if (errorMessage === undefined) {\n    return defaultErrorRenderer(error);\n  }\n  if (typeof errorMessage === \"function\") {\n    return errorMessage(error);\n  }\n  return errorMessage;\n}\n\nfunction useAdornmentState() {\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n\n  const handleMouseEnter = useCallback(() => setHovered(true), []);\n  const handleMouseLeave = useCallback(() => setHovered(false), []);\n  const handleBlurCapture = useCallback((e: FocusEvent<HTMLElement>) => {\n    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n      setFocused(false);\n    }\n  }, []);\n  const handleFocusCapture = useCallback(() => setFocused(true), []);\n\n  const hoverHandlers = useMemo(\n    () => ({\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n    }),\n    [handleMouseEnter, handleMouseLeave]\n  );\n  const focusHandlers = useMemo(\n    () => ({\n      onBlurCapture: handleBlurCapture,\n      onFocusCapture: handleFocusCapture,\n    }),\n    [handleBlurCapture, handleFocusCapture]\n  );\n\n  return { focusHandlers, focused, hoverHandlers, hovered };\n}\n\ntype AdornmentKind = \"clear\" | \"search\" | \"down\";\ntype SelectValue = string | string[] | undefined;\ntype SelectOnValueChange =\n  | SelectSingleProps[\"onValueChange\"]\n  | SelectMultipleProps[\"onValueChange\"];\n\nfunction areStringArraysEqual(a: string[], b: string[]): boolean {\n  if (a.length !== b.length) {\n    return false;\n  }\n  for (let index = 0; index < a.length; index++) {\n    if (a[index] !== b[index]) {\n      return false;\n    }\n  }\n  return true;\n}\n\nfunction areSelectValuesEqual(a: SelectValue, b: SelectValue): boolean {\n  if (Array.isArray(a) && Array.isArray(b)) {\n    return areStringArraysEqual(a, b);\n  }\n  return a === b;\n}\n\nfunction notifyValueChange({\n  multiple,\n  onValueChange,\n  value,\n}: {\n  multiple: boolean;\n  onValueChange?: SelectOnValueChange;\n  value: SelectValue;\n}) {\n  if (multiple) {\n    (onValueChange as SelectMultipleProps[\"onValueChange\"] | undefined)?.(\n      value as string[]\n    );\n    return;\n  }\n  (onValueChange as SelectSingleProps[\"onValueChange\"] | undefined)?.(\n    value as string | undefined\n  );\n}\n\nfunction useSelectOpen({\n  defaultOpen,\n  onOpenChange,\n  open,\n}: {\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n}) {\n  const [internalOpen, setInternalOpen] = useState<boolean>(\n    defaultOpen ?? false\n  );\n  const isOpenControlled = open !== undefined;\n  const currentOpen = isOpenControlled ? open : internalOpen;\n\n  const handleOpenChange = useCallback(\n    (next: boolean) => {\n      if (!isOpenControlled) {\n        setInternalOpen(next);\n      }\n      onOpenChange?.(next);\n    },\n    [isOpenControlled, onOpenChange]\n  );\n\n  return { currentOpen, handleOpenChange, isOpenControlled };\n}\n\nfunction useSelectValue({\n  defaultValue,\n  isValueControlled,\n  multiple,\n  onValueChange,\n  value,\n}: {\n  defaultValue?: SelectValue;\n  isValueControlled: boolean;\n  multiple: boolean;\n  onValueChange?: SelectOnValueChange;\n  value?: SelectValue;\n}) {\n  const [internalValue, setInternalValue] = useState<SelectValue>(defaultValue);\n  const currentValue = isValueControlled ? value : internalValue;\n\n  const handleValueChange = useCallback(\n    (next: string | string[] | null | undefined) => {\n      const normalized = normalizeValue(next, multiple);\n      if (!isValueControlled) {\n        setInternalValue((current) => {\n          if (areSelectValuesEqual(current, normalized)) {\n            return current;\n          }\n          return normalized;\n        });\n      }\n      notifyValueChange({ multiple, onValueChange, value: normalized });\n    },\n    [isValueControlled, multiple, onValueChange]\n  );\n\n  return { currentValue, handleValueChange };\n}\n\nfunction normalizeValue(\n  next: string | string[] | null | undefined,\n  multiple: boolean\n): SelectValue {\n  if (multiple) {\n    return Array.isArray(next) ? next : [];\n  }\n  if (typeof next === \"string\") {\n    return next;\n  }\n  return;\n}\n\nfunction getUncontrolledDefaultValue<T>(\n  defaultValue: T | undefined,\n  isValueControlled: boolean\n): T | undefined {\n  if (isValueControlled) {\n    return;\n  }\n  return defaultValue;\n}\n\nfunction resolveAdornment({\n  canSearch,\n  clearable,\n  focused,\n  hasValue,\n  hovered,\n}: {\n  canSearch: boolean;\n  clearable: boolean;\n  focused: boolean;\n  hasValue: boolean;\n  hovered: boolean;\n}): AdornmentKind {\n  if (clearable && hasValue && (hovered || focused)) {\n    return \"clear\";\n  }\n  if (canSearch && focused) {\n    return \"search\";\n  }\n  return \"down\";\n}\n\nfunction Spinner() {\n  return (\n    <span\n      aria-hidden\n      className=\"inline-block size-4 animate-spin rounded-full border-2 border-current border-r-transparent text-muted-foreground\"\n    />\n  );\n}\n\nfunction SelectStatus({\n  error,\n  errorMessage,\n  loading,\n  loadingMessage,\n  refresh,\n}: {\n  error: unknown;\n  errorMessage?: ReactNode | ((error: unknown) => ReactNode);\n  loading: boolean;\n  loadingMessage: ReactNode;\n  refresh: () => void;\n}) {\n  if (loading) {\n    return (\n      <div\n        className=\"flex items-center justify-center gap-2 px-2 py-3 text-muted-foreground text-sm\"\n        data-slot=\"combobox-status\"\n      >\n        <Spinner />\n        <span>{loadingMessage}</span>\n      </div>\n    );\n  }\n  if (error) {\n    return (\n      <div\n        className=\"flex flex-col items-center justify-center gap-2 px-2 py-3 text-destructive text-sm\"\n        data-slot=\"combobox-status\"\n      >\n        <span className=\"text-center\">\n          {renderSelectError(errorMessage, error)}\n        </span>\n        <Button\n          className=\"h-7 px-2 text-xs\"\n          onClick={refresh}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"outline\"\n        >\n          Retry\n        </Button>\n      </div>\n    );\n  }\n  return null;\n}\n\nfunction SelectList({\n  findItem,\n  itemClassName,\n  selectedSet,\n}: {\n  findItem: (value: string) => SelectItem | undefined;\n  itemClassName?: ClassValue;\n  selectedSet: Set<string> | null;\n}) {\n  return (\n    <ComboboxList>\n      {(itemValue: string) => {\n        const item = findItem(itemValue);\n        if (!item) {\n          return null;\n        }\n        const disabledByMax =\n          selectedSet !== null && !selectedSet.has(itemValue);\n        return (\n          <ComboboxItem\n            className={cn(itemClassName, item.itemClassName)}\n            disabled={item.disabled || disabledByMax}\n            key={itemValue}\n            value={itemValue}\n          >\n            {item.label}\n          </ComboboxItem>\n        );\n      }}\n    </ComboboxList>\n  );\n}\n\nfunction StaticIcon({ icon }: { icon: typeof ArrowDown01Icon }) {\n  return (\n    <HugeiconsIcon\n      aria-hidden\n      className=\"pointer-events-none size-4 text-muted-foreground\"\n      icon={icon}\n      strokeWidth={2}\n    />\n  );\n}\n\nfunction ClearButton({ className }: { className?: ClassValue }) {\n  return (\n    <ComboboxPrimitive.Clear\n      aria-label=\"Clear\"\n      className={cn(\n        \"inline-flex size-6 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className\n      )}\n      data-slot=\"combobox-clear\"\n      render={<button type=\"button\" />}\n    >\n      <HugeiconsIcon\n        aria-hidden\n        className=\"size-4\"\n        icon={Cancel01Icon}\n        strokeWidth={2}\n      />\n    </ComboboxPrimitive.Clear>\n  );\n}\n\nfunction Adornment({ kind }: { kind: AdornmentKind }) {\n  let child: ReactNode;\n  if (kind === \"clear\") {\n    child = <ClearButton className=\"pointer-events-auto\" />;\n  } else if (kind === \"search\") {\n    child = <StaticIcon icon={SearchList01Icon} />;\n  } else {\n    child = <StaticIcon icon={ArrowDown01Icon} />;\n  }\n  return (\n    <span\n      className=\"inline-flex size-6 items-center justify-center\"\n      data-select-adornment-frame\n    >\n      {child}\n    </span>\n  );\n}\n\nexport const Select = (props: SelectProps) => {\n  const {\n    items,\n    loadItems,\n    loadOn = \"mount\",\n    serverSideFilter = false,\n    debounceMs = 250,\n    loadingMessage = \"Loading…\",\n    errorMessage,\n    value,\n    defaultValue,\n    onValueChange,\n    multiple = false,\n    searchable = false,\n    clearable = false,\n    maxCount,\n    placeholder = \"Pick an option\",\n    emptyMessage = \"No results\",\n    disabled,\n    open,\n    defaultOpen,\n    onOpenChange,\n    filter,\n    name,\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    className,\n    triggerClassName,\n    inputClassName,\n    contentClassName,\n    itemClassName,\n    chipClassName,\n    emptyClassName,\n  } = props;\n  const isAsync = Boolean(loadItems);\n  const effectiveSearchable = searchable || (isAsync && serverSideFilter);\n  const hasInput = multiple || effectiveSearchable;\n\n  const { currentOpen, handleOpenChange, isOpenControlled } = useSelectOpen({\n    defaultOpen,\n    onOpenChange,\n    open,\n  });\n  const isValueControlled = \"value\" in props;\n  const { currentValue, handleValueChange } = useSelectValue({\n    defaultValue,\n    isValueControlled,\n    multiple,\n    onValueChange,\n    value,\n  });\n\n  const [query, setQuery] = useState<string>(\"\");\n\n  // Drop the residual search query on close so reopening loads/filters the\n  // default list instead of replaying the stale query.\n  const handleOpenChangeWithReset = useCallback(\n    (next: boolean) => {\n      if (!next) {\n        setQuery(\"\");\n      }\n      handleOpenChange(next);\n    },\n    [handleOpenChange]\n  );\n\n  const handleInputValueChange = useCallback(\n    (next: string, details: { reason: string }) => {\n      if (QUERY_UPDATE_REASONS.has(details.reason)) {\n        setQuery((current) => {\n          if (current === next) {\n            return current;\n          }\n          return next;\n        });\n      }\n    },\n    []\n  );\n\n  const {\n    items: asyncItems,\n    loading: asyncLoading,\n    error: asyncError,\n    enabled: asyncEnabled,\n    refresh,\n  } = useSelectLoader({\n    debounceMs,\n    loadItems,\n    loadOn,\n    open: currentOpen,\n    query,\n    serverSideFilter,\n    value: currentValue,\n  });\n\n  const resolvedItems = asyncEnabled ? asyncItems : (items ?? []);\n\n  const { stringItems, findItem, itemToStringLabel, filterFn } = useSelectItems(\n    {\n      filter,\n      items: resolvedItems,\n    }\n  );\n\n  const anchorRef = useComboboxAnchor();\n  const {\n    hovered: adornmentHovered,\n    focused,\n    hoverHandlers: adornmentHoverHandlers,\n    focusHandlers,\n  } = useAdornmentState();\n\n  const valueArr = useMemo(() => {\n    if (currentValue === undefined) {\n      return [];\n    }\n    return Array.isArray(currentValue) ? currentValue : [currentValue];\n  }, [currentValue]);\n\n  const hasValue = valueArr.length > 0;\n  const adornmentKind = resolveAdornment({\n    canSearch: hasInput,\n    clearable,\n    focused,\n    hasValue,\n    hovered: adornmentHovered,\n  });\n\n  // multi-only: when at limit, mark every unselected item as disabled.\n  const maxReached =\n    multiple &&\n    typeof maxCount === \"number\" &&\n    maxCount > 0 &&\n    valueArr.length >= maxCount;\n  const selectedSet = useMemo(\n    () => (maxReached ? new Set(valueArr) : null),\n    [maxReached, valueArr]\n  );\n\n  const empty = (\n    <ComboboxEmpty className={cn(emptyClassName)}>{emptyMessage}</ComboboxEmpty>\n  );\n\n  // Keep list mounted across loading/error so base-ui keeps collection state.\n  const showEmpty = !(asyncLoading || asyncError);\n  const popupBody = (\n    <>\n      <SelectStatus\n        error={asyncError}\n        errorMessage={errorMessage}\n        loading={asyncLoading}\n        loadingMessage={loadingMessage}\n        refresh={refresh}\n      />\n      <SelectList\n        findItem={findItem}\n        itemClassName={itemClassName}\n        selectedSet={selectedSet}\n      />\n      {showEmpty && empty}\n    </>\n  );\n\n  const sharedRootProps = {\n    defaultOpen: isOpenControlled ? undefined : defaultOpen,\n    disabled,\n    filter: serverSideFilter ? null : filterFn,\n    items: stringItems,\n    itemToStringLabel,\n    name,\n    onInputValueChange: handleInputValueChange,\n    onOpenChange: handleOpenChangeWithReset,\n    open,\n  } as const;\n\n  const controlProps = {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    id,\n  } as const;\n\n  if (multiple) {\n    const multipleValue = isValueControlled\n      ? ((value as string[] | undefined) ?? [])\n      : undefined;\n    return (\n      <Combobox<string, true>\n        {...sharedRootProps}\n        defaultValue={getUncontrolledDefaultValue(\n          defaultValue as string[] | undefined,\n          isValueControlled\n        )}\n        multiple\n        onValueChange={handleValueChange}\n        value={multipleValue}\n      >\n        <ComboboxChips\n          {...focusHandlers}\n          className={cn(triggerClassName, className)}\n          ref={anchorRef}\n        >\n          <ComboboxValue>\n            {(values: string[]) => (\n              <>\n                {values.map((v) => {\n                  const item = findItem(v);\n                  return (\n                    <ComboboxChip className={cn(chipClassName)} key={v}>\n                      <span className=\"truncate\">{item?.label ?? v}</span>\n                    </ComboboxChip>\n                  );\n                })}\n                <ComboboxChipsInput\n                  {...controlProps}\n                  className={cn(\"flex-1\", inputClassName)}\n                  placeholder={values.length === 0 ? placeholder : undefined}\n                />\n              </>\n            )}\n          </ComboboxValue>\n          <span\n            {...adornmentHoverHandlers}\n            className=\"ml-auto inline-flex size-6 shrink-0 items-center justify-center\"\n            data-select-adornment\n          >\n            <Adornment kind={adornmentKind} />\n          </span>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchorRef} className={cn(contentClassName)}>\n          {popupBody}\n        </ComboboxContent>\n      </Combobox>\n    );\n  }\n\n  const singleValue = isValueControlled\n    ? ((value as string | undefined) ?? null)\n    : undefined;\n\n  if (effectiveSearchable) {\n    return (\n      <Combobox<string, false>\n        {...sharedRootProps}\n        defaultValue={getUncontrolledDefaultValue(\n          defaultValue as string | undefined,\n          isValueControlled\n        )}\n        onValueChange={handleValueChange}\n        value={singleValue}\n      >\n        <InputGroup\n          {...focusHandlers}\n          className={cn(\"w-auto\", triggerClassName, className)}\n        >\n          <ComboboxPrimitive.Input\n            {...controlProps}\n            className={cn(inputClassName)}\n            disabled={disabled}\n            placeholder={placeholder}\n            render={<InputGroupInput />}\n          />\n          <InputGroupAddon\n            {...adornmentHoverHandlers}\n            align=\"inline-end\"\n            className=\"w-8 shrink-0 px-1\"\n            data-select-adornment\n          >\n            <Adornment kind={adornmentKind} />\n          </InputGroupAddon>\n        </InputGroup>\n        <ComboboxContent className={cn(contentClassName)}>\n          {popupBody}\n        </ComboboxContent>\n      </Combobox>\n    );\n  }\n\n  // Trigger is a <button>; nesting another <button> (clear) is invalid HTML,\n  // so the clear button rides above as an absolute-positioned sibling.\n  return (\n    <Combobox<string, false>\n      {...sharedRootProps}\n      defaultValue={getUncontrolledDefaultValue(\n        defaultValue as string | undefined,\n        isValueControlled\n      )}\n      onValueChange={handleValueChange}\n      value={singleValue}\n    >\n      <div {...focusHandlers} className={cn(\"relative\", className)}>\n        <ComboboxPrimitive.Trigger\n          {...controlProps}\n          className={cn(\n            \"w-full justify-between pr-10 [&_svg:not([class*='size-'])]:size-4\",\n            triggerClassName\n          )}\n          data-slot=\"combobox-trigger\"\n          disabled={disabled}\n          render={<Button variant=\"outline\" />}\n        >\n          <ComboboxValue placeholder={placeholder}>\n            {(selected: string | null) => {\n              if (selected === null) {\n                return (\n                  <span className=\"text-muted-foreground\">{placeholder}</span>\n                );\n              }\n              const item = findItem(selected);\n              return (\n                <span className=\"truncate\">{item?.label ?? selected}</span>\n              );\n            }}\n          </ComboboxValue>\n        </ComboboxPrimitive.Trigger>\n        <span\n          {...adornmentHoverHandlers}\n          className={cn(\n            \"absolute top-1/2 right-1 inline-flex size-8 -translate-y-1/2 items-center justify-center\",\n            clearable && hasValue\n              ? \"pointer-events-auto\"\n              : \"pointer-events-none\"\n          )}\n          data-select-adornment\n        >\n          <Adornment kind={adornmentKind} />\n        </span>\n      </div>\n      <ComboboxContent className={cn(contentClassName)}>\n        {popupBody}\n      </ComboboxContent>\n    </Combobox>\n  );\n};\n\nexport default Select;\n",
      "type": "registry:component",
      "target": "components/easy/select.tsx"
    }
  ],
  "type": "registry:component"
}