{"name":"select","type":"registry:ui","files":[{"path":"select.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive,\n} from \"@base-ui/react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { ChevronDown as ChevronDownIcon } from \"honestui/icons\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { cn } from \"@/lib/utils\"\n\ntype ItemType = {\n  leadingIcon?: React.ReactNode\n  children: React.ReactNode\n  value: string\n}\n\ntype ValueType = Omit<ItemType, \"children\"> & {\n  children: React.ReactNode\n}\n\ntype CommonProps = {\n  autocomplete?: boolean\n  autocompleteMode?: \"auto\" | \"manual\"\n  searchValue?: string\n  onSearch?: (value: string) => void\n  defaultSearchValue?: string\n}\n\ntype PrimitiveRootProps = Omit<\n  SelectPrimitive.Root.Props<string, false>,\n  | \"children\"\n  | \"defaultValue\"\n  | \"items\"\n  | \"multiple\"\n  | \"onValueChange\"\n  | \"value\"\n>\n\ntype BaseSelectProps = PrimitiveRootProps &\n  CommonProps & {\n    children?: React.ReactNode\n    items?: unknown\n  }\n\ntype SingleSelectProps = BaseSelectProps & {\n  multiple?: false\n  value?: string | null\n  onValueChange?: (value: string | null) => void\n  defaultValue?: string | null\n}\n\ntype MultipleSelectProps = BaseSelectProps & {\n  multiple: true\n  value?: string[]\n  onValueChange?: (value: string[]) => void\n  defaultValue?: string[]\n}\n\ntype SelectRootProps = SingleSelectProps | MultipleSelectProps\n\ntype SelectContextValue = CommonProps & {\n  value?: string | string[] | null\n  registerItem: (item: ItemType) => void\n  unregisterItem: (value: string) => void\n  multiple: boolean\n  items: Record<string, ItemType>\n  hasItems: boolean\n}\n\ntype UseSelectContext = SelectContextValue & {\n  shouldFilter: boolean\n}\n\nconst SelectContext = React.createContext<SelectContextValue | undefined>(\n  undefined\n)\n\nfunction useSelectContext(): UseSelectContext {\n  const context = React.useContext(SelectContext)\n\n  if (!context) {\n    throw new Error(\"Select components must be used within Select\")\n  }\n\n  return {\n    ...context,\n    shouldFilter: Boolean(\n      context.autocomplete &&\n        context.autocompleteMode === \"auto\" &&\n        context.searchValue?.length\n    ),\n  }\n}\n\nfunction normalizeItems(items: unknown): Record<string, ItemType> {\n  const normalized: Record<string, ItemType> = {}\n\n  function addItems(value: unknown) {\n    if (Array.isArray(value)) {\n      value.forEach(addItems)\n      return\n    }\n\n    if (typeof value === \"string\") {\n      normalized[value] = { children: value, value }\n      return\n    }\n\n    if (!value || typeof value !== \"object\" || React.isValidElement(value)) {\n      return\n    }\n\n    const record = value as Record<string, unknown>\n\n    if (\"items\" in record && Array.isArray(record.items)) {\n      addItems(record.items)\n      return\n    }\n\n    if (\"value\" in record) {\n      const itemValue = record.value == null ? \"\" : String(record.value)\n      normalized[itemValue] = {\n        children:\n          (record.label as React.ReactNode) ??\n          (record.children as React.ReactNode) ??\n          itemValue,\n        leadingIcon: record.leadingIcon as React.ReactNode,\n        value: itemValue,\n      }\n      return\n    }\n\n    Object.entries(record).forEach(([itemValue, label]) => {\n      normalized[itemValue] = {\n        children: label as React.ReactNode,\n        value: itemValue,\n      }\n    })\n  }\n\n  addItems(items)\n  return normalized\n}\n\nfunction SelectRoot(props: SelectRootProps) {\n  const {\n    children,\n    value: providedValue,\n    onValueChange,\n    defaultValue,\n    autocomplete,\n    autocompleteMode = \"auto\",\n    searchValue: providedSearchValue,\n    onSearch,\n    defaultSearchValue = \"\",\n    open: providedOpen,\n    defaultOpen = false,\n    onOpenChange,\n    multiple = false,\n    items: itemsProp,\n    ...rootProps\n  } = props\n\n  const [internalValue, setInternalValue] = React.useState<\n    string | string[] | null | undefined\n  >(defaultValue)\n  const [internalSearchValue, setInternalSearchValue] =\n    React.useState(defaultSearchValue)\n  const [registeredItems, setRegisteredItems] = React.useState<\n    Record<string, ItemType>\n  >({})\n\n  const computedValue =\n    providedValue === undefined ? internalValue : providedValue\n  const searchValue =\n    providedSearchValue === undefined\n      ? internalSearchValue\n      : providedSearchValue\n\n  const handleValueChange = React.useCallback(\n    (nextValue: string | string[] | null) => {\n      if (providedValue === undefined) {\n        setInternalValue(nextValue)\n      }\n\n      if (multiple) {\n        ;(onValueChange as MultipleSelectProps[\"onValueChange\"])?.(\n          nextValue as string[]\n        )\n      } else {\n        ;(onValueChange as SingleSelectProps[\"onValueChange\"])?.(\n          nextValue as string | null\n        )\n      }\n    },\n    [multiple, onValueChange, providedValue]\n  )\n\n  const handleSearchValueChange = React.useCallback(\n    (nextValue: string) => {\n      if (providedSearchValue === undefined) {\n        setInternalSearchValue(nextValue)\n      }\n      onSearch?.(nextValue)\n    },\n    [onSearch, providedSearchValue]\n  )\n\n  const registerItem = React.useCallback((item: ItemType) => {\n    setRegisteredItems((currentItems) => ({\n      ...currentItems,\n      [item.value]: item,\n    }))\n  }, [])\n\n  const unregisterItem = React.useCallback((value: string) => {\n    setRegisteredItems((currentItems) => {\n      const nextItems = { ...currentItems }\n      delete nextItems[value]\n      return nextItems\n    })\n  }, [])\n\n  const normalizedItems = React.useMemo(\n    () => normalizeItems(itemsProp),\n    [itemsProp]\n  )\n  const items = React.useMemo(\n    () => ({ ...normalizedItems, ...registeredItems }),\n    [normalizedItems, registeredItems]\n  )\n\n  const contextValue = React.useMemo<SelectContextValue>(\n    () => ({\n      value: computedValue,\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      autocompleteMode,\n      searchValue,\n      onSearch,\n      defaultSearchValue,\n      multiple,\n      items,\n      hasItems: itemsProp !== undefined,\n    }),\n    [\n      autocomplete,\n      autocompleteMode,\n      computedValue,\n      defaultSearchValue,\n      items,\n      itemsProp,\n      multiple,\n      onSearch,\n      registerItem,\n      searchValue,\n      unregisterItem,\n    ]\n  )\n\n  if (autocomplete) {\n    const comboboxProps = {\n      ...rootProps,\n      value: providedValue,\n      defaultValue,\n      onValueChange: handleValueChange,\n      inputValue: providedSearchValue,\n      defaultInputValue: defaultSearchValue,\n      onInputValueChange: handleSearchValueChange,\n      open: providedOpen,\n      defaultOpen,\n      onOpenChange,\n      multiple,\n      modal: true,\n      filter: itemsProp === undefined ? null : undefined,\n      items: itemsProp,\n      loopFocus: false,\n      autoHighlight: true,\n    } as ComboboxPrimitive.Root.Props<string, boolean>\n\n    return (\n      <SelectContext.Provider value={contextValue}>\n        <ComboboxPrimitive.Root<string, boolean> {...comboboxProps}>\n          {children}\n        </ComboboxPrimitive.Root>\n      </SelectContext.Provider>\n    )\n  }\n\n  const selectProps = {\n    ...rootProps,\n    value: providedValue,\n    defaultValue,\n    onValueChange: handleValueChange,\n    open: providedOpen,\n    defaultOpen,\n    onOpenChange,\n    multiple,\n    modal: true,\n  } as SelectPrimitive.Root.Props<string, boolean>\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectPrimitive.Root<string, boolean> {...selectProps}>\n        {children}\n      </SelectPrimitive.Root>\n    </SelectContext.Provider>\n  )\n}\n\nSelectRoot.displayName = \"Select\"\n\nconst selectTriggerVariants = cva(\n  \"flex items-center justify-between rounded-[var(--hui-radius-2)] bg-[var(--hui-color-background-base-primary)] text-[var(--hui-color-foreground-base-primary)] outline-none select-none [font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] motion-safe:[transition:var(--hui-transition-interactive)] not-data-disabled:hover:cursor-pointer not-data-disabled:hover:bg-[var(--hui-color-background-base-primary-hover)] not-data-disabled:active:bg-[var(--hui-color-background-neutral-secondary)] focus:not-focus-visible:outline-none focus-visible:[outline:var(--hui-focus-ring)] data-disabled:pointer-events-none data-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50 data-[multiselectable=true]:py-[var(--hui-space-2)]\",\n  {\n    variants: {\n      size: {\n        small:\n          \"min-h-[var(--hui-space-7)] overflow-hidden p-[var(--hui-space-2)]\",\n        medium:\n          \"min-h-[var(--hui-space-9)] overflow-hidden p-[var(--hui-space-3)]\",\n      },\n      variant: {\n        outline:\n          \"border-[0.5px] border-[var(--hui-color-border-base-tertiary)]\",\n        text: \"border-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"medium\",\n      variant: \"outline\",\n    },\n  }\n)\n\ntype SelectTriggerProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"size\"\n> &\n  Omit<VariantProps<typeof selectTriggerVariants>, \"size\"> & {\n    size?: \"sm\" | \"default\" | \"lg\" | \"small\" | \"medium\"\n    nativeButton?: boolean\n  }\n\nfunction SelectTrigger({\n  ref,\n  size = \"medium\",\n  variant,\n  className,\n  children,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SelectTriggerProps) {\n  const { multiple, autocomplete } = useSelectContext()\n  const resolvedSize = size === \"sm\" || size === \"small\" ? \"small\" : \"medium\"\n  const TriggerPrimitive = autocomplete\n    ? ComboboxPrimitive.Trigger\n    : SelectPrimitive.Trigger\n\n  return (\n    <TriggerPrimitive\n      ref={ref}\n      data-multiselectable={multiple ? true : undefined}\n      data-size={resolvedSize}\n      data-slot=\"select-trigger\"\n      data-variant={variant ?? \"outline\"}\n      className={cn(\n        selectTriggerVariants({ size: resolvedSize, variant }),\n        className\n      )}\n      aria-label={ariaLabel || \"Select option\"}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"flex flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap [font-style:normal] [font-weight:var(--hui-font-weight-medium)]\",\n          resolvedSize === \"small\"\n            ? \"gap-[var(--hui-space-1)] [font-size:var(--hui-font-size-mini)] [letter-spacing:var(--hui-letter-spacing-mini)] [line-height:var(--hui-line-height-mini)]\"\n            : \"gap-[var(--hui-space-2)] [font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]\"\n        )}\n        data-slot=\"select-trigger-content\"\n      >\n        {children}\n      </span>\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className={cn(\n          \"shrink-0 text-[var(--hui-color-foreground-base-secondary)]\",\n          resolvedSize === \"small\"\n            ? \"ms-[var(--hui-space-2)] size-[var(--hui-space-4)]\"\n            : \"ms-[var(--hui-space-3)] size-[var(--hui-space-5)]\"\n        )}\n        data-slot=\"select-trigger-icon\"\n      />\n    </TriggerPrimitive>\n  )\n}\n\nSelectTrigger.displayName = \"Select.Trigger\"\n\ntype SelectValueProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  placeholder?: string\n  children?:\n    | ((value?: ValueType | ValueType[]) => React.ReactNode)\n    | React.ReactNode\n}\n\nfunction SelectValue({\n  children,\n  placeholder,\n  className,\n  ...props\n}: SelectValueProps) {\n  const { value, items, multiple } = useSelectContext()\n  const placeholderContent = placeholder ?? items[\"\"]?.children\n  const hasValue = multiple\n    ? Array.isArray(value) && value.length > 0\n    : value !== undefined && value !== null && value !== \"\"\n\n  const item = React.useMemo(() => {\n    if (!hasValue) return undefined\n\n    if (multiple && Array.isArray(value)) {\n      return value.map(\n        (itemValue) =>\n          items[itemValue] ?? {\n            children: itemValue,\n            value: itemValue,\n          }\n      )\n    }\n\n    const itemValue = String(value)\n    return (\n      items[itemValue] ?? {\n        children: itemValue,\n        value: itemValue,\n      }\n    )\n  }, [hasValue, items, multiple, value])\n\n  if (!hasValue) {\n    return (\n      <span\n        data-placeholder=\"\"\n        data-slot=\"select-value\"\n        className={cn(\n          \"text-[var(--hui-color-foreground-base-tertiary)]\",\n          className\n        )}\n        {...props}\n      >\n        {placeholderContent}\n      </span>\n    )\n  }\n\n  if (typeof children === \"function\") {\n    return (\n      <span data-slot=\"select-value\" className={className} {...props}>\n        {children(item)}\n      </span>\n    )\n  }\n\n  if (children) {\n    return (\n      <span data-slot=\"select-value\" className={className} {...props}>\n        {children}\n      </span>\n    )\n  }\n\n  if (Array.isArray(item)) {\n    return <SelectMultipleValue data={item} />\n  }\n\n  return (\n    <span data-slot=\"select-value\" className={className} {...props}>\n      <span\n        className=\"flex h-full max-w-full flex-1 items-center gap-[var(--hui-space-3)] overflow-hidden text-ellipsis whitespace-nowrap in-data-[size=small]:gap-[var(--hui-space-2)]\"\n        data-slot=\"select-value-content\"\n      >\n        {typeof item?.children === \"string\" && item.leadingIcon && (\n          <span\n            className=\"flex shrink-0 items-center justify-center [&_svg]:size-[var(--hui-space-5)] in-data-[size=small]:[&_svg]:size-[var(--hui-space-4)]\"\n            data-slot=\"select-value-icon\"\n          >\n            {item.leadingIcon}\n          </span>\n        )}\n        {item?.children ?? String(value)}\n      </span>\n    </span>\n  )\n}\n\nSelectValue.displayName = \"Select.Value\"\n\nfunction calculateTextWidth(text: string, fontSize = 11) {\n  return text.length * fontSize * 0.6\n}\n\nfunction SelectMultipleValue({ data = [] }: { data: ItemType[] }) {\n  const containerRef = React.useRef<HTMLSpanElement>(null)\n  const [visibleCount, setVisibleCount] = React.useState(data.length)\n  const [containerWidth, setContainerWidth] = React.useState(0)\n\n  React.useLayoutEffect(() => {\n    const container = containerRef.current\n    if (!container || typeof ResizeObserver === \"undefined\") return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        setContainerWidth(Math.max(0, entry.contentRect.width - 70))\n      })\n    })\n\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  React.useLayoutEffect(() => {\n    if (!containerRef.current || data.length === 0 || containerWidth === 0) {\n      return\n    }\n\n    const chipWidths = data.map((item) => {\n      const text =\n        typeof item.children === \"string\" ? item.children : item.value\n      const iconWidth = item.leadingIcon ? 16 : 0\n      return calculateTextWidth(text) + 8 + iconWidth\n    })\n\n    let totalWidth = chipWidths[0] ?? 0\n    let count = data.length > 0 ? 1 : 0\n\n    for (let index = 1; index < data.length; index += 1) {\n      const newWidth = totalWidth + (chipWidths[index] ?? 0)\n      if (newWidth > containerWidth) break\n      count += 1\n      totalWidth = newWidth\n    }\n\n    setVisibleCount(count)\n  }, [containerWidth, data])\n\n  return (\n    <span\n      ref={containerRef}\n      className=\"flex h-full max-w-full flex-1 items-center gap-[var(--hui-space-2)] overflow-hidden whitespace-nowrap\"\n      data-slot=\"select-value\"\n    >\n      {data.slice(0, visibleCount).map((item) => (\n        <span\n          key={item.value}\n          className=\"inline-flex min-w-0 shrink-0 items-center gap-[var(--hui-space-1)] rounded-[var(--hui-radius-1)] bg-[var(--hui-color-background-neutral-secondary)] px-[var(--hui-space-2)] py-[var(--hui-space-1)] [font-size:var(--hui-font-size-mini)] [line-height:var(--hui-line-height-mini)]\"\n          data-slot=\"select-value-chip\"\n        >\n          {item.leadingIcon && (\n            <span className=\"flex size-[var(--hui-space-4)] items-center justify-center [&_svg]:size-full\">\n              {item.leadingIcon}\n            </span>\n          )}\n          {typeof item.children === \"string\" ? item.children : item.value}\n        </span>\n      ))}\n      {data.length > visibleCount && (\n        <span\n          className=\"shrink-0 text-[var(--hui-color-foreground-base-primary)] [font-size:var(--hui-font-size-small)]\"\n          data-slot=\"select-value-overflow\"\n        >\n          +{data.length - visibleCount}\n        </span>\n      )}\n    </span>\n  )\n}\n\ntype SelectContentProps = SelectPrimitive.Popup.Props & {\n  searchPlaceholder?: string\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"]\n  side?: SelectPrimitive.Positioner.Props[\"side\"]\n  align?: SelectPrimitive.Positioner.Props[\"align\"]\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"]\n}\n\nfunction SelectContent({\n  className,\n  children,\n  searchPlaceholder = \"Search...\",\n  sideOffset = 4,\n  side = \"bottom\",\n  align = \"start\",\n  alignItemWithTrigger = false,\n  ...props\n}: SelectContentProps) {\n  const { autocomplete, multiple } = useSelectContext()\n  const contentClassName = cn(\n    \"relative box-border max-h-[320px] min-w-(--anchor-width) origin-(--transform-origin) overflow-auto rounded-[var(--hui-radius-2)] border-[0.5px] border-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-primary)] shadow-[var(--hui-shadow-soft)] [--apsara-select-padding:var(--hui-space-2)] [font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] [transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:[transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out),transform_var(--hui-duration-fast)_var(--hui-ease-out)] motion-safe:data-ending-style:scale-[0.97] motion-safe:data-starting-style:scale-[0.97] has-[[data-slot=select-list]:empty]:[&_[data-slot=select-search]]:border-b-0 has-[[data-slot=select-list]:not(:has([data-slot=select-item]:not([data-hidden=true])))]:[&_[data-slot=select-search]]:border-b-0\",\n    className\n  )\n\n  if (autocomplete) {\n    return (\n      <ComboboxPrimitive.Portal keepMounted>\n        <ComboboxPrimitive.Positioner\n          sideOffset={sideOffset}\n          side={side}\n          align={align}\n          className=\"z-[var(--hui-z-index-portal)]\"\n          data-slot=\"select-positioner\"\n        >\n          <ComboboxPrimitive.Popup\n            className={contentClassName}\n            data-multiselectable={multiple ? true : undefined}\n            data-slot=\"select-content\"\n            {...props}\n          >\n            <ComboboxPrimitive.Input\n              placeholder={searchPlaceholder}\n              className=\"sticky top-0 z-2 w-full rounded-t-[var(--hui-radius-2)] border-0 border-b-[0.5px] border-b-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-primary)] px-[var(--hui-space-4)] py-[var(--hui-space-3)] text-[var(--hui-color-foreground-base-primary)] outline-none [font-size:var(--hui-font-size-small)] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]\"\n              size={12}\n              data-slot=\"select-search\"\n            />\n            <ComboboxPrimitive.List\n              className=\"p-[var(--apsara-select-padding)] empty:p-0 [&:not(:has([data-slot=select-item]:not([data-hidden=true])))]:p-0\"\n              data-slot=\"select-list\"\n            >\n              {children}\n            </ComboboxPrimitive.List>\n          </ComboboxPrimitive.Popup>\n        </ComboboxPrimitive.Positioner>\n      </ComboboxPrimitive.Portal>\n    )\n  }\n\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        side={side}\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"z-[var(--hui-z-index-portal)]\"\n        data-slot=\"select-positioner\"\n      >\n        <SelectPrimitive.Popup\n          className={contentClassName}\n          data-multiselectable={multiple ? true : undefined}\n          data-slot=\"select-content\"\n          {...props}\n        >\n          <SelectPrimitive.List\n            className=\"p-[var(--apsara-select-padding)]\"\n            data-slot=\"select-list\"\n          >\n            {children}\n          </SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nSelectContent.displayName = \"Select.Content\"\n\nfunction getTextContent(node: React.ReactNode): string {\n  return React.Children.toArray(node)\n    .map((child) => {\n      if (typeof child === \"string\" || typeof child === \"number\") {\n        return String(child)\n      }\n      if (React.isValidElement<{ children?: React.ReactNode }>(child)) {\n        return getTextContent(child.props.children)\n      }\n      return \"\"\n    })\n    .join(\" \")\n}\n\ntype SelectItemProps = SelectPrimitive.Item.Props & {\n  leadingIcon?: React.ReactNode\n}\n\nfunction SelectItem({\n  className,\n  children,\n  value: providedValue,\n  leadingIcon,\n  disabled,\n  ...props\n}: SelectItemProps) {\n  const value = providedValue == null ? \"\" : String(providedValue)\n  const primitiveValue = providedValue == null ? null : value\n  const {\n    registerItem,\n    unregisterItem,\n    autocomplete,\n    searchValue,\n    value: selectValue,\n    shouldFilter,\n    hasItems,\n    multiple,\n  } = useSelectContext()\n\n  const isSelected = multiple\n    ? Array.isArray(selectValue) && selectValue.includes(value)\n    : value === selectValue\n  const searchableText = `${value} ${getTextContent(children)}`.toLowerCase()\n  const isMatched = searchableText.includes((searchValue ?? \"\").toLowerCase())\n  const isHidden = shouldFilter && !hasItems && isSelected && !isMatched\n\n  React.useLayoutEffect(() => {\n    registerItem({ leadingIcon, children, value })\n    return () => unregisterItem(value)\n  }, [children, leadingIcon, registerItem, unregisterItem, value])\n\n  if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n    return null\n  }\n\n  const element =\n    typeof children === \"string\" ? (\n      <>\n        {leadingIcon && (\n          <span\n            className=\"flex shrink-0 items-center justify-center [&_svg]:size-[var(--hui-space-5)]\"\n            data-slot=\"select-item-icon\"\n          >\n            {leadingIcon}\n          </span>\n        )}\n        <span data-slot=\"select-item-text\">{children}</span>\n      </>\n    ) : (\n      children\n    )\n\n  const itemClassName = cn(\n    \"relative flex items-center gap-[var(--hui-space-3)] rounded-[var(--hui-radius-2)] p-[var(--hui-space-3)] text-[var(--hui-color-foreground-base-primary)] whitespace-normal outline-none [word-break:break-word] data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:cursor-pointer data-highlighted:bg-[var(--hui-color-background-base-primary-hover)] data-[hidden=true]:hidden\",\n    className\n  )\n  const renderItem = (\n    renderProps: React.HTMLAttributes<HTMLDivElement>,\n    state: { selected: boolean }\n  ) => (\n    <div {...renderProps}>\n      {multiple && (\n        <Checkbox\n          checked={state.selected}\n          readOnly\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none\"\n        />\n      )}\n      {element}\n    </div>\n  )\n\n  if (autocomplete) {\n    return (\n      <ComboboxPrimitive.Item\n        value={primitiveValue}\n        className={itemClassName}\n        data-hidden={isHidden || undefined}\n        data-slot=\"select-item\"\n        disabled={disabled || isHidden}\n        {...props}\n        render={renderItem}\n      />\n    )\n  }\n\n  return (\n    <SelectPrimitive.Item\n      value={primitiveValue}\n      className={itemClassName}\n      data-hidden={isHidden || undefined}\n      data-slot=\"select-item\"\n      disabled={disabled || isHidden}\n      {...props}\n      render={renderItem}\n    />\n  )\n}\n\nSelectItem.displayName = \"Select.Item\"\n\ntype SelectGroupProps = SelectPrimitive.Group.Props\n\nfunction SelectGroup({ className, children, ...props }: SelectGroupProps) {\n  const { shouldFilter, autocomplete } = useSelectContext()\n\n  if (shouldFilter) return <>{children}</>\n\n  const GroupPrimitive = autocomplete\n    ? ComboboxPrimitive.Group\n    : SelectPrimitive.Group\n\n  return (\n    <GroupPrimitive\n      className={className}\n      data-slot=\"select-group\"\n      {...props}\n    >\n      {children}\n    </GroupPrimitive>\n  )\n}\n\nSelectGroup.displayName = \"Select.Group\"\n\ntype SelectLabelProps = SelectPrimitive.GroupLabel.Props\n\nfunction SelectLabel({ className, ...props }: SelectLabelProps) {\n  const { shouldFilter, autocomplete } = useSelectContext()\n\n  if (shouldFilter) return null\n\n  const LabelPrimitive = autocomplete\n    ? ComboboxPrimitive.GroupLabel\n    : SelectPrimitive.GroupLabel\n\n  return (\n    <LabelPrimitive\n      className={cn(\n        \"px-[var(--hui-space-3)] py-[var(--hui-space-2)] [font-size:var(--hui-font-size-mini)] [font-weight:var(--hui-font-weight-medium)]\",\n        className\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  )\n}\n\nSelectLabel.displayName = \"Select.Label\"\n\ntype SelectSeparatorProps = SelectPrimitive.Separator.Props\n\nfunction SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n  const { shouldFilter, autocomplete } = useSelectContext()\n\n  if (shouldFilter) return null\n\n  const SeparatorPrimitive = autocomplete\n    ? ComboboxPrimitive.Separator\n    : SelectPrimitive.Separator\n\n  return (\n    <SeparatorPrimitive\n      className={cn(\n        \"my-[var(--hui-space-2)] h-px bg-[var(--hui-color-border-base-primary)] [margin-inline:calc(var(--hui-space-3)*-1)]\",\n        className\n      )}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  )\n}\n\nSelectSeparator.displayName = \"Select.Separator\"\n\nconst Select = Object.assign(SelectRoot, {\n  Group: SelectGroup,\n  Value: SelectValue,\n  ScrollUpArrow: SelectPrimitive.ScrollUpArrow,\n  ScrollDownArrow: SelectPrimitive.ScrollDownArrow,\n  List: SelectPrimitive.List,\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Item: SelectItem,\n  Separator: SelectSeparator,\n  Label: SelectLabel,\n})\n\nconst SelectPopup = SelectContent\nconst SelectGroupLabel = SelectLabel\n\nexport {\n  Select,\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectPopup,\n  SelectItem,\n  SelectGroup,\n  SelectLabel,\n  SelectGroupLabel,\n  SelectSeparator,\n  type ItemType,\n  type SelectContentProps,\n  type SelectItemProps,\n  type SelectRootProps,\n  type SelectTriggerProps,\n  type SelectValueProps,\n}\n","target":"components/ui/select.tsx"}],"dependencies":["@base-ui/react","class-variance-authority","honestui"],"registryDependencies":["https://www.honestui.com/r/checkbox.json"]}