banhaten 0.1.0

package/registry/components/select.tsx

@@ -0,0 +1,871 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import {
+  getDefaultSelectItemMedia,
+  SelectIcon,
+  SelectItemAvatar,
+  SelectItemCompanyLogo,
+  SelectItemFlag,
+  SelectItemPaymentIcon,
+  SelectItemStatusDot,
+  type SelectItemType,
+  type SelectStatusTone,
+} from "./select-content"
+
+type SelectSize = "lg" | "md"
+type SelectVisualState = "default" | "filled" | "error" | "disabled"
+type SelectVariant = "default" | "soft"
+type SelectSelectionType = "default" | "checkbox"
+
+const selectRoot = cva(
+  "relative grid w-[var(--bh-select-width)] max-w-full gap-[var(--bh-select-field-gap)]"
+)
+
+const selectTrigger = cva(
+  [
+    "group/select-trigger relative flex w-full items-center gap-[var(--bh-select-trigger-gap)] rounded-[var(--bh-select-trigger-radius)]",
+    "px-[var(--bh-select-trigger-padding-x)] text-start outline-none",
+    "transition-[background-color,box-shadow]",
+    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--shadow-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--shadow-component-default)]",
+    "focus-visible:shadow-[var(--shadow-select-focus-ring)]",
+    "aria-invalid:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)]",
+    "disabled:pointer-events-none disabled:bg-[var(--bh-select-trigger-bg-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      size: {
+        lg: "py-[var(--bh-select-trigger-padding-y-lg)]",
+        md: "py-[var(--bh-select-trigger-padding-y-md)]",
+      },
+      variant: {
+        default:
+          "bg-[var(--bh-select-trigger-bg)] shadow-[var(--shadow-select-trigger)]",
+        soft:
+          "bg-[var(--bh-select-trigger-bg-soft)] shadow-none",
+      },
+      state: {
+        default: "",
+        filled: "",
+        error:
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-visible:shadow-[var(--shadow-select-danger-focus-ring)]",
+        disabled:
+          "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      variant: "default",
+      state: "default",
+    },
+  }
+)
+
+const selectMenu = cva(
+  [
+    "w-[var(--radix-popper-anchor-width,var(--bh-select-menu-width))] max-w-[var(--radix-popper-available-width,100vw)] overflow-hidden rounded-[var(--bh-select-menu-radius)]",
+    "bg-[var(--bh-select-menu-bg)] py-[var(--bh-select-menu-padding-y)]",
+    "shadow-[var(--shadow-select-menu)]",
+  ].join(" ")
+)
+
+const selectMenuList = cva(
+  "flex w-full flex-col gap-[var(--bh-select-menu-list-gap)]"
+)
+
+const selectMenuItem = cva(
+  [
+    "group/select-menu-item relative flex min-h-[var(--bh-select-item-min-height)] w-full items-center bg-transparent",
+    "px-[var(--bh-select-item-padding-x)] text-start outline-none",
+    "disabled:pointer-events-none data-[disabled=true]:pointer-events-none",
+    "focus-visible:[&>[data-slot=select-menu-item-content]]:bg-[var(--bh-select-item-hover-bg)]",
+  ],
+  {
+    variants: {
+      state: {
+        default: "",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
+
+const selectMenuItemContent = cva(
+  [
+    "relative flex min-w-0 flex-1 items-center gap-[var(--bh-select-item-gap)] rounded-[var(--bh-select-item-radius)]",
+    "p-[var(--bh-select-item-content-padding)] transition-colors",
+    "group-hover/select-menu-item:bg-[var(--bh-select-item-hover-bg)] group-data-[disabled=true]/select-menu-item:bg-transparent",
+  ],
+  {
+    variants: {
+      selected: {
+        true: "pe-[var(--bh-select-item-selected-padding-end)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  }
+)
+
+const SelectRadixItemContext = React.createContext(false)
+
+type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
+  children?: React.ReactNode
+  defaultSelectValue?: string
+  dir?: "ltr" | "rtl" | "auto"
+  errorMessage?: React.ReactNode
+  expandIcon?: React.ReactNode | false
+  hasHelperIcon?: boolean
+  hasHelperText?: boolean
+  hasInformationIcon?: boolean
+  hasLabel?: boolean
+  hasLeadingIcon?: boolean
+  hasTrailingIcon?: boolean
+  helperText?: React.ReactNode
+  isOptional?: boolean
+  isRequired?: boolean
+  label?: React.ReactNode
+  leadingIcon?: React.ReactNode
+  onOpenChange?: (open: boolean) => void
+  onTriggerClick?: React.MouseEventHandler<HTMLButtonElement>
+  onValueChange?: (value: string) => void
+  open?: boolean
+  optionalText?: React.ReactNode
+  placeholder?: React.ReactNode
+  selectValue?: string
+  size?: SelectSize
+  state?: SelectVisualState
+  triggerClassName?: string
+  triggerId?: string
+  triggerProps?: Omit<
+    SelectTriggerProps,
+    | "children"
+    | "className"
+    | "expandIcon"
+    | "leadingIcon"
+    | "placeholder"
+    | "size"
+    | "state"
+    | "trailingIcon"
+    | "value"
+    | "variant"
+  >
+  trailingIcon?: React.ReactNode
+  value?: React.ReactNode
+  variant?: SelectVariant
+}
+
+const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
+  children,
+  className,
+  defaultSelectValue,
+  dir,
+  errorMessage,
+  expandIcon,
+  hasHelperIcon = false,
+  hasHelperText,
+  hasInformationIcon = false,
+  hasLabel,
+  hasLeadingIcon = true,
+  hasTrailingIcon = true,
+  helperText,
+  isOptional = false,
+  isRequired = false,
+  label,
+  leadingIcon,
+  onOpenChange,
+  onTriggerClick,
+  onValueChange,
+  open,
+  optionalText,
+  placeholder,
+  selectValue,
+  size = "lg",
+  state = "default",
+  triggerClassName,
+  triggerId,
+  triggerProps,
+  trailingIcon,
+  value,
+  variant = "default",
+  ...props
+}, ref) {
+  const generatedId = React.useId()
+  const resolvedDir = dir
+  const triggerVisualState = triggerProps?.disabled ? "disabled" : state
+  const isError = triggerVisualState === "error"
+  const selectedValue = value
+  const selectedPlaceholder = placeholder
+  const selectedLabel = label
+  const selectedOptional = optionalText
+  const selectedHelper = isError ? errorMessage : helperText
+  const shouldRenderLabel = hasLabel ?? hasRenderableContent(selectedLabel)
+  const shouldRenderHelperText =
+    hasHelperText ?? hasRenderableContent(selectedHelper)
+  const shouldRenderMenu = React.Children.count(children) > 0
+  const selectId = triggerId || generatedId
+  const helperId = `${selectId}-helper`
+  const rootOpenProps =
+    open === undefined ? { onOpenChange } : { open, onOpenChange }
+
+  return (
+    <SelectPrimitive.Root
+      defaultValue={defaultSelectValue}
+      dir={resolvedDir === "auto" ? undefined : resolvedDir}
+      disabled={triggerVisualState === "disabled"}
+      onValueChange={onValueChange}
+      value={selectValue}
+      {...rootOpenProps}
+    >
+      <SelectRoot
+        data-state={triggerVisualState}
+        data-variant={variant}
+        dir={resolvedDir}
+        ref={ref}
+        className={className}
+        {...props}
+      >
+        {shouldRenderLabel ? (
+          <SelectLabel
+            hasInformationIcon={hasInformationIcon}
+            htmlFor={selectId}
+            isOptional={isOptional}
+            isRequired={isRequired}
+            optionalText={selectedOptional}
+          >
+            {selectedLabel}
+          </SelectLabel>
+        ) : null}
+
+        <div data-slot="select-control" className="relative w-full">
+          <SelectPrimitive.Trigger asChild>
+            <SelectTrigger
+              aria-describedby={shouldRenderHelperText ? helperId : undefined}
+              aria-expanded={open || undefined}
+              aria-haspopup="listbox"
+              aria-invalid={isError || undefined}
+              expandIcon={expandIcon}
+              id={selectId}
+              leadingIcon={hasLeadingIcon ? leadingIcon : false}
+              onClick={onTriggerClick}
+              placeholder={selectedPlaceholder}
+              size={size}
+              state={triggerVisualState}
+              trailingIcon={hasTrailingIcon ? trailingIcon : false}
+              value={selectedValue}
+              variant={variant}
+              className={triggerClassName}
+              {...triggerProps}
+            />
+          </SelectPrimitive.Trigger>
+
+          {shouldRenderMenu ? (
+            <RadixSelectMenuContent forceMount={open === true || undefined}>
+              {children}
+            </RadixSelectMenuContent>
+          ) : null}
+        </div>
+
+        {shouldRenderHelperText ? (
+          <SelectHelperText
+            hasIcon={hasHelperIcon}
+            id={helperId}
+            type={isError ? "error" : "default"}
+          >
+            {selectedHelper}
+          </SelectHelperText>
+        ) : null}
+      </SelectRoot>
+    </SelectPrimitive.Root>
+  )
+})
+
+type RadixSelectMenuContentProps = React.ComponentProps<typeof SelectPrimitive.Content>
+// Radix sideOffset requires a number; this mirrors --bh-select-menu-offset.
+const SELECT_MENU_SIDE_OFFSET_PX = 4
+
+function RadixSelectMenuContent({
+  children,
+  className,
+  position = "popper",
+  sideOffset = SELECT_MENU_SIDE_OFFSET_PX,
+  ...props
+}: RadixSelectMenuContentProps) {
+  return (
+    <SelectPrimitive.Content
+      asChild
+      position={position}
+      sideOffset={sideOffset}
+      {...props}
+    >
+      <div
+        data-slot="select-menu"
+        className={cn(
+          selectMenu(),
+          "absolute start-0 top-[calc(100%+var(--bh-select-menu-offset))] z-[var(--bh-z-popover)]",
+          className
+        )}
+      >
+        <SelectPrimitive.Viewport asChild>
+          <div data-slot="select-menu-list" className={selectMenuList()}>
+            <SelectRadixItemContext.Provider value>
+              {children}
+            </SelectRadixItemContext.Provider>
+          </div>
+        </SelectPrimitive.Viewport>
+      </div>
+    </SelectPrimitive.Content>
+  )
+}
+
+type SelectRootProps = React.ComponentProps<"div">
+
+const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(function SelectRoot(
+  { className, ...props },
+  ref
+) {
+  return (
+    <div
+      data-slot="select-root"
+      ref={ref}
+      className={cn(selectRoot(), className)}
+      {...props}
+    />
+  )
+})
+
+type SelectLabelProps = React.ComponentProps<"label"> & {
+  hasInformationIcon?: boolean
+  isOptional?: boolean
+  isRequired?: boolean
+  optionalText?: React.ReactNode
+}
+
+function SelectLabel({
+  children,
+  className,
+  hasInformationIcon = false,
+  isOptional = false,
+  isRequired = false,
+  optionalText,
+  ...props
+}: SelectLabelProps) {
+  return (
+    <label
+      data-slot="select-label"
+      className={cn(
+        "flex w-full items-center gap-[var(--bh-select-label-gap)] text-start",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-label-text"
+        dir="auto"
+        className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] rtl:text-[length:var(--bh-text-body-xs-medium-font-size)] rtl:font-[var(--bh-text-body-xs-medium-font-weight)] rtl:leading-[var(--bh-text-body-xs-medium-line-height)] rtl:tracking-[var(--bh-text-body-xs-medium-letter-spacing)]"
+      >
+        {children}
+      </span>
+      {isRequired ? (
+        <span
+          aria-hidden="true"
+          data-slot="select-label-required"
+          className="shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-danger-default)]"
+        >
+          *
+        </span>
+      ) : null}
+      {isOptional && hasRenderableContent(optionalText) ? (
+        <span
+          data-slot="select-label-optional"
+          dir="auto"
+          className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+        >
+          {optionalText}
+        </span>
+      ) : null}
+      {hasInformationIcon ? (
+        <SelectIcon
+          name="info"
+          className="text-[var(--bh-select-trigger-icon-color)]"
+        />
+      ) : null}
+    </label>
+  )
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+type SelectHelperTextProps = React.ComponentProps<"p"> & {
+  hasIcon?: boolean
+  type?: "default" | "error"
+}
+
+function SelectHelperText({
+  children,
+  className,
+  hasIcon = false,
+  type = "default",
+  ...props
+}: SelectHelperTextProps) {
+  const isError = type === "error"
+
+  return (
+    <p
+      data-slot="select-helper-text"
+      data-type={type}
+      className={cn(
+        "flex w-full items-center gap-[var(--bh-select-label-gap)] text-start text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
+        isError
+          ? "text-[var(--bh-content-danger-default)]"
+          : "text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    >
+      {hasIcon ? (
+        <SelectIcon
+          name={isError ? "error" : "info"}
+          className={
+            isError
+              ? "text-[var(--bh-content-danger-default)]"
+              : "text-[var(--bh-select-trigger-icon-color)]"
+          }
+        />
+      ) : null}
+      <span data-slot="select-helper-label" dir="auto" className="min-w-0 flex-1">
+        {children}
+      </span>
+    </p>
+  )
+}
+
+type SelectTriggerProps = Omit<
+  React.ComponentProps<"button">,
+  "children" | "value"
+> &
+  VariantProps<typeof selectTrigger> & {
+    expandIcon?: React.ReactNode | false
+    leadingIcon?: React.ReactNode | false
+    placeholder?: React.ReactNode
+    trailingIcon?: React.ReactNode | false
+    value?: React.ReactNode
+  }
+
+const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  (
+    {
+      className,
+      disabled,
+      expandIcon,
+      leadingIcon,
+      placeholder,
+      size = "lg",
+      state,
+      trailingIcon,
+      type = "button",
+      value,
+      variant = "default",
+      ...props
+    },
+    ref
+  ) => {
+    const hasValue = value !== undefined && value !== null && value !== ""
+    const visualState = disabled ? "disabled" : state ?? (hasValue ? "filled" : "default")
+    const isDisabled = visualState === "disabled"
+
+    return (
+      <button
+        data-size={size}
+        data-slot="select-trigger"
+        data-state={visualState}
+        data-variant={variant}
+        disabled={isDisabled}
+        ref={ref}
+        type={type}
+        className={cn(
+          selectTrigger({ size, state: visualState, variant }),
+          className
+        )}
+        {...props}
+      >
+        <span
+          data-slot="select-trigger-main"
+          className="flex min-w-0 flex-1 items-center gap-[var(--bh-select-content-gap)]"
+        >
+          {leadingIcon !== false ? (
+            <span
+              data-slot="select-leading-icon"
+              className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
+            >
+              {leadingIcon ?? <SelectIcon name="user" />}
+            </span>
+          ) : null}
+
+          <span
+            data-slot="select-value-wrap"
+            className="flex min-w-0 flex-1 items-center ps-[var(--bh-select-value-padding-inline)]"
+          >
+            <span
+              data-slot="select-value"
+              dir="auto"
+              className={cn(
+                "min-w-0 flex-1 truncate text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
+                hasValue || visualState === "filled"
+                  ? "text-[var(--bh-content-default)]"
+                  : "text-[var(--bh-content-subtle)]",
+                isDisabled && "text-[var(--bh-content-disabled)]"
+              )}
+            >
+              {hasValue ? value : placeholder}
+            </span>
+          </span>
+        </span>
+
+        {trailingIcon !== false ? (
+          <span
+            data-slot="select-trailing-icon"
+            className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
+          >
+            {trailingIcon ?? <SelectIcon name="info" />}
+          </span>
+        ) : null}
+
+        {expandIcon !== false ? (
+          <span
+            data-slot="select-expand-icon"
+            className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-select-trigger-icon-color)] group-data-[state=disabled]/select-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-size)]"
+          >
+            {expandIcon ?? <SelectIcon name="chevron-down" />}
+          </span>
+        ) : null}
+      </button>
+    )
+  }
+)
+SelectTrigger.displayName = "SelectTrigger"
+
+type SelectMenuProps = React.ComponentProps<"div">
+
+const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function SelectMenu(
+  { children, className, onKeyDown, role, ...props },
+  ref
+) {
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(event)
+      if (event.defaultPrevented) return
+
+      if (event.key === "Escape") {
+        event.currentTarget.blur()
+        return
+      }
+
+      if (
+        event.key !== "ArrowDown" &&
+        event.key !== "ArrowUp" &&
+        event.key !== "Home" &&
+        event.key !== "End"
+      ) {
+        return
+      }
+
+      const items = getFocusableSelectItems(event.currentTarget)
+      if (items.length === 0) return
+
+      event.preventDefault()
+
+      const activeItem = event.currentTarget.ownerDocument.activeElement
+      const currentIndex =
+        activeItem instanceof HTMLElement ? items.indexOf(activeItem) : -1
+      let nextIndex = currentIndex
+
+      if (event.key === "Home") nextIndex = 0
+      if (event.key === "End") nextIndex = items.length - 1
+      if (event.key === "ArrowDown") nextIndex = (currentIndex + 1) % items.length
+      if (event.key === "ArrowUp") {
+        nextIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1
+      }
+
+      items[nextIndex]?.focus()
+    },
+    [onKeyDown]
+  )
+
+  return (
+    <div
+      data-slot="select-menu"
+      onKeyDown={handleKeyDown}
+      ref={ref}
+      role={role || "listbox"}
+      className={cn(selectMenu(), className)}
+      {...props}
+    >
+      <div data-slot="select-menu-list" className={selectMenuList()}>
+        {children}
+      </div>
+    </div>
+  )
+})
+
+type SelectMenuItemBaseProps = Omit<
+  React.ComponentProps<"button">,
+  "children" | "type" | "value"
+> & {
+  addonText?: React.ReactNode
+  children?: React.ReactNode
+  label?: React.ReactNode
+  type?: "button" | "submit" | "reset"
+  value?: string
+}
+
+type SelectMenuItemMediaProps =
+  | { itemType?: "default"; media?: React.ReactNode | false }
+  | {
+      itemType: Exclude<SelectItemType, "default">
+      media?: React.ReactNode | false
+    }
+
+type SelectMenuItemSelectionProps =
+  | { selected?: boolean; selectionType?: "default" }
+  | { selected?: boolean; selectionType: "checkbox" }
+
+type SelectMenuItemDynamicProps = {
+  itemType?: SelectItemType
+  media?: React.ReactNode | false
+  selected?: boolean
+  selectionType?: SelectSelectionType
+}
+
+type SelectMenuItemProps = SelectMenuItemBaseProps &
+  (
+    | (SelectMenuItemMediaProps & SelectMenuItemSelectionProps)
+    | SelectMenuItemDynamicProps
+  )
+
+const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(function SelectMenuItem({
+  addonText,
+  children,
+  className,
+  disabled,
+  itemType = "default",
+  label,
+  media,
+  role,
+  selected = false,
+  selectionType = "default",
+  type = "button",
+  value,
+  ...props
+}, ref) {
+  const inRadixSelect = React.useContext(SelectRadixItemContext)
+  const generatedValue = React.useId()
+  const isDisabled = disabled
+  const selectedWithEndCheck = selected && selectionType === "default"
+  const resolvedRole =
+    role || (selectionType === "checkbox" ? "menuitemcheckbox" : "option")
+  const selectedMedia =
+    media === false ? null : media ?? getDefaultSelectItemMedia(itemType)
+  const content = label ?? children
+  const itemValue =
+    value ??
+    (typeof content === "string" || typeof content === "number"
+      ? String(content)
+      : generatedValue)
+  const itemTextValue =
+    typeof content === "string" || typeof content === "number"
+      ? String(content)
+      : undefined
+
+  const item = (
+    <button
+      aria-checked={
+        selectionType === "checkbox" ? Boolean(selected) : undefined
+      }
+      aria-disabled={isDisabled || undefined}
+      aria-selected={
+        selectionType === "default" ? Boolean(selected) : undefined
+      }
+      data-disabled={isDisabled ? "true" : undefined}
+      data-item-type={itemType}
+      data-selected={selected ? "true" : "false"}
+      data-selection-type={selectionType}
+      data-slot="select-menu-item"
+      disabled={isDisabled}
+      ref={ref}
+      role={resolvedRole}
+      type={type}
+      className={cn(selectMenuItem(), className)}
+      {...props}
+    >
+      <span
+        data-slot="select-menu-item-content"
+        className={selectMenuItemContent({
+          selected: selectedWithEndCheck,
+        })}
+      >
+        {selectionType === "checkbox" ? (
+          <span
+            data-slot="select-menu-item-checkbox-wrap"
+            className="flex size-[var(--bh-select-icon-slot-size)] shrink-0 items-center justify-center"
+          >
+            <SelectCheckboxIndicator checked={selected} disabled={isDisabled} />
+          </span>
+        ) : null}
+
+        {selectedMedia ? (
+          <span
+            data-slot="select-menu-item-media"
+            className="flex shrink-0 items-center ps-[var(--bh-select-media-inset)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/select-menu-item:text-[var(--bh-content-disabled)] group-data-[disabled=true]/select-menu-item:opacity-[var(--bh-opacity-60)] [&_svg:not([class*='size-'])]:size-[var(--bh-select-icon-slot-size)]"
+          >
+            {selectedMedia}
+          </span>
+        ) : null}
+
+        <span
+          data-slot="select-menu-item-value"
+          className="flex min-w-0 items-center px-[var(--bh-select-item-value-padding-x)]"
+        >
+          <span
+            data-slot="select-menu-item-label"
+            dir="auto"
+            className="min-w-0 truncate text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] group-data-[disabled=true]/select-menu-item:text-[var(--bh-content-disabled)]"
+          >
+            {content}
+          </span>
+        </span>
+
+        {addonText !== undefined && addonText !== null ? (
+          <span
+            data-slot="select-menu-item-addon"
+            dir="auto"
+            className="min-w-0 shrink-0 truncate text-start text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-muted)] group-hover/select-menu-item:text-[var(--bh-content-subtle)] group-focus-visible/select-menu-item:text-[var(--bh-content-subtle)] group-data-[disabled=true]/select-menu-item:text-[var(--bh-content-disabled)]"
+          >
+            {addonText}
+          </span>
+        ) : null}
+      </span>
+
+      {selectedWithEndCheck ? (
+        <span
+          aria-hidden="true"
+          data-slot="select-menu-item-check"
+          className="pointer-events-none absolute end-[var(--bh-select-item-check-offset)] top-1/2 flex size-[var(--bh-select-icon-slot-size)] -translate-y-1/2 items-center justify-center text-[var(--bh-select-check-color)]"
+        >
+          <SelectIcon name="check-line" />
+        </span>
+      ) : null}
+    </button>
+  )
+
+  if (!inRadixSelect) return item
+
+  return (
+    <SelectPrimitive.Item
+      asChild
+      disabled={isDisabled}
+      textValue={itemTextValue}
+      value={itemValue}
+    >
+      {item}
+    </SelectPrimitive.Item>
+  )
+})
+
+function getFocusableSelectItems(root: HTMLElement) {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(
+      '[role="option"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"])'
+    )
+  ).filter((item) => !item.hasAttribute("disabled"))
+}
+
+type SelectCheckboxIndicatorProps = {
+  checked?: boolean
+  className?: string
+  disabled?: boolean
+}
+
+function SelectCheckboxIndicator({
+  checked = false,
+  className,
+  disabled = false,
+}: SelectCheckboxIndicatorProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-checked={checked ? "true" : "false"}
+      data-disabled={disabled ? "true" : undefined}
+      data-slot="select-checkbox"
+      className={cn(
+        "relative size-[var(--bh-select-icon-slot-size)] shrink-0 overflow-hidden",
+        className
+      )}
+    >
+      <span
+        data-slot="select-checkbox-control"
+        className={cn(
+          "pointer-events-none absolute start-1/2 top-1/2 size-[var(--bh-select-checkbox-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-select-checkbox-radius)] shadow-[var(--shadow-select-checkbox)] [--bh-select-checkbox-border:var(--bh-border-input)] [--shadow-select-checkbox:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-checkbox-border,var(--bh-border-input)),var(--shadow-component-default)]",
+          checked
+            ? "bg-[var(--bh-interactive-checkbox-default)] [--bh-select-checkbox-border:transparent]"
+            : "bg-[var(--bh-bg-default)]",
+          disabled &&
+            "bg-[var(--bh-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
+        )}
+      />
+      {checked ? (
+        <span className="absolute start-1/2 top-1/2 flex size-[var(--bh-select-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-content-on-color)]">
+          <SelectIcon name="check-fill" />
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+export {
+  Select,
+  SelectCheckboxIndicator,
+  SelectHelperText,
+  SelectItemAvatar,
+  SelectItemCompanyLogo,
+  SelectItemFlag,
+  SelectItemPaymentIcon,
+  SelectItemStatusDot,
+  SelectLabel,
+  SelectMenu,
+  SelectMenuItem,
+  SelectRoot,
+  SelectTrigger,
+  selectMenu,
+  selectMenuItem,
+  selectRoot,
+  selectTrigger,
+}
+export type {
+  SelectItemType,
+  SelectMenuItemProps,
+  SelectProps,
+  SelectRootProps,
+  SelectSelectionType,
+  SelectSize,
+  SelectStatusTone,
+  SelectTriggerProps,
+  SelectVariant,
+  SelectVisualState,
+}