{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "b-select",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["@base-ui/react", "motion", "lucide-react"],
  "devDependencies": [],
  "files": [
    {
      "path": "b-select.tsx",
      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst controlCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]\";\n\nconst controlCornerInheritClassName =\n  \"rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]\";\n\nconst selectThemeClassName =\n  \"[--sel-surface:#ffffff] [--sel-foreground:#111111] [--sel-border:#d5dae0] [--sel-ring:rgba(17,17,17,0.16)] [--sel-muted-foreground:#6d7480] [--sel-accent:#e9edf2] dark:[--sel-surface:#111111] dark:[--sel-foreground:#f6f3ec] dark:[--sel-border:#3a3834] dark:[--sel-ring:rgba(246,243,236,0.18)] dark:[--sel-muted-foreground:#9a958a] dark:[--sel-accent:#1e1e1c] [--color-accent:var(--sel-accent)] [--color-accent-foreground:var(--sel-foreground)]\";\n\nconst selectTriggerClassName = cn(\n  controlCornerClassName,\n  \"flex min-h-11 w-full touch-manipulation items-center justify-between gap-2 border border-[color:var(--sel-border)] bg-[color:var(--sel-surface)] px-4 py-3 text-left font-medium text-[color:var(--sel-foreground)] text-sm transition-[background-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] hover:bg-accent/72 focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--sel-ring),transparent_50%)] disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-[color:var(--sel-muted-foreground)]\"\n);\n\nconst selectPanelChromeClassName = cn(\n  controlCornerClassName,\n  \"z-[300] overflow-hidden border border-[color:color-mix(in_oklch,var(--sel-border,#d5dae0),transparent_40%)] bg-[var(--sel-surface,#ffffff)] text-[var(--sel-foreground,#111111)] shadow-none dark:border-[color:color-mix(in_oklch,var(--sel-border,#3a3834),transparent_40%)] dark:bg-[var(--sel-surface,#111111)] dark:text-[var(--sel-foreground,#f6f3ec)]\"\n);\n\nconst selectItemClassName = cn(\n  controlCornerClassName,\n  \"group relative isolate flex min-h-11 cursor-pointer touch-manipulation select-none items-center gap-3 py-2.5 pr-8 pl-3 text-[color:var(--sel-foreground)] text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:text-[color:var(--sel-muted-foreground)] data-[disabled]:opacity-50\"\n);\n\nconst selectItemHighlightClassName = cn(\n  controlCornerInheritClassName,\n  \"absolute inset-0 -z-10 bg-accent/68\"\n);\n\nconst MAX_MENU_HEIGHT = 320;\nconst INSTANT_CLOSE_TRANSITION = { duration: 0 } as const;\n\nconst selectListScrollbarClassName =\n  \"z-10 my-1.5 mr-0.5 w-1 shrink-0 touch-none select-none opacity-0 transition-opacity duration-150 before:absolute before:left-1/2 before:h-full before:w-5 before:-translate-x-1/2 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0\";\n\nconst selectListThumbClassName =\n  \"relative rounded-full bg-muted-foreground/50 bg-[color:color-mix(in_oklch,var(--sel-muted-foreground),transparent_35%)]\";\n\nconst SOFT_EASE = [0.22, 1, 0.36, 1] as const;\nconst EXIT_EASE = [0.55, 0.06, 0.68, 0.19] as const;\nconst FLUID_EASE = [0.16, 1, 0.3, 1] as const;\nconst POPUP_EXIT_EASE = [0.4, 0, 0.6, 1] as const;\nconst POPUP_SPRING = {\n  type: \"spring\" as const,\n  stiffness: 260,\n  damping: 32,\n  mass: 0.95,\n};\nconst CHECK_SPRING = {\n  type: \"spring\",\n  stiffness: 520,\n  damping: 28,\n  mass: 0.55,\n} as const;\nconst PRESS_SPRING = {\n  type: \"spring\",\n  stiffness: 560,\n  damping: 32,\n  mass: 0.48,\n} as const;\n\ntype SelectRootProps = SelectPrimitive.Root.Props<string>;\n\ntype SelectProps = Omit<\n  SelectRootProps,\n  | \"children\"\n  | \"defaultOpen\"\n  | \"defaultValue\"\n  | \"onOpenChange\"\n  | \"onValueChange\"\n  | \"open\"\n  | \"value\"\n> & {\n  children?: React.ReactNode;\n  defaultOpen?: SelectRootProps[\"defaultOpen\"];\n  defaultValue?: SelectRootProps[\"defaultValue\"];\n  onOpenChange?: SelectRootProps[\"onOpenChange\"];\n  onValueChange?: SelectRootProps[\"onValueChange\"];\n  open?: SelectRootProps[\"open\"];\n  value?: SelectRootProps[\"value\"];\n};\n\ntype SelectContextValue = {\n  actionsRef: React.RefObject<SelectPrimitive.Root.Actions | null>;\n  activeHighlightId: string;\n  activeValue?: string;\n  getItemIndex: () => number;\n  itemVariants: typeof itemVariants;\n  open: boolean;\n  selectedValue: SelectRootProps[\"value\"];\n  setActiveValue: React.Dispatch<React.SetStateAction<string | undefined>>;\n  skipExitAnimationRef: React.MutableRefObject<boolean>;\n};\n\nconst RESIZE_OBSERVER_LOOP_ERROR =\n  /ResizeObserver loop(?:\\s+\\w+)*|ResizeObserver loop limit exceeded/i;\n\nlet resizeObserverPatchCount = 0;\nlet nativeResizeObserver: typeof ResizeObserver | undefined;\n\nfunction isResizeObserverLoopError(message: string) {\n  return RESIZE_OBSERVER_LOOP_ERROR.test(message);\n}\n\nfunction patchResizeObserverLoop() {\n  if (typeof ResizeObserver === \"undefined\") {\n    return;\n  }\n\n  if (resizeObserverPatchCount === 0) {\n    nativeResizeObserver = window.ResizeObserver;\n    window.ResizeObserver = class PatchedResizeObserver extends (\n      nativeResizeObserver\n    ) {\n      constructor(callback: ResizeObserverCallback) {\n        super((entries, observer) => {\n          requestAnimationFrame(() => {\n            callback(entries, observer);\n          });\n        });\n      }\n    };\n  }\n\n  resizeObserverPatchCount += 1;\n}\n\nfunction restoreResizeObserverLoopPatch() {\n  if (resizeObserverPatchCount === 0) {\n    return;\n  }\n\n  resizeObserverPatchCount -= 1;\n\n  if (resizeObserverPatchCount === 0 && nativeResizeObserver) {\n    window.ResizeObserver = nativeResizeObserver;\n    nativeResizeObserver = undefined;\n  }\n}\n\nfunction useSuppressResizeObserverLoopError() {\n  React.useEffect(() => {\n    const onError = (event: ErrorEvent) => {\n      if (!isResizeObserverLoopError(event.message)) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    };\n\n    const onUnhandledRejection = (event: PromiseRejectionEvent) => {\n      const message =\n        event.reason instanceof Error\n          ? event.reason.message\n          : String(event.reason ?? \"\");\n\n      if (!isResizeObserverLoopError(message)) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    };\n\n    patchResizeObserverLoop();\n    window.addEventListener(\"error\", onError, true);\n    window.addEventListener(\"unhandledrejection\", onUnhandledRejection, true);\n\n    return () => {\n      restoreResizeObserverLoopPatch();\n      window.removeEventListener(\"error\", onError, true);\n      window.removeEventListener(\n        \"unhandledrejection\",\n        onUnhandledRejection,\n        true\n      );\n    };\n  }, []);\n}\n\ntype TriggerRenderProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children?: React.ReactNode;\n  className?: string;\n  ref?: React.Ref<HTMLButtonElement>;\n  style?: React.CSSProperties;\n};\n\ntype ListRenderProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  className?: string;\n  ref?: React.Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n};\n\ntype PopupRenderProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  className?: string;\n  ref?: React.Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n};\n\ntype ItemRenderProps = React.HTMLAttributes<HTMLElement> & {\n  children?: React.ReactNode;\n  className?: string;\n  ref?: React.Ref<HTMLElement>;\n  style?: React.CSSProperties;\n};\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelectContext(componentName: string) {\n  const context = React.useContext(SelectContext);\n\n  if (!context) {\n    throw new Error(`${componentName} must be used inside Select`);\n  }\n\n  return context;\n}\n\nconst itemVariants = {\n  exit: (index: number) => ({\n    opacity: 0,\n    y: -2,\n    transition: {\n      delay: Math.min(index, 4) * 0.01,\n      duration: 0.12,\n      ease: EXIT_EASE,\n    },\n  }),\n  hidden: {\n    opacity: 0,\n    y: -4,\n  },\n  visible: (index: number) => ({\n    opacity: 1,\n    y: 0,\n    transition: {\n      delay: Math.min(index, 4) * 0.02,\n      duration: 0.18,\n      ease: SOFT_EASE,\n    },\n  }),\n};\n\nconst popupMotion = {\n  animate: { opacity: 1, scale: 1, y: 0 },\n  closed: { opacity: 0, scale: 0.985, y: -5 },\n  initial: { opacity: 0, scale: 0.985, y: -5 },\n  openTransition: {\n    opacity: { duration: 0.34, ease: FLUID_EASE },\n    scale: POPUP_SPRING,\n    y: POPUP_SPRING,\n  },\n  closedTransition: {\n    opacity: { duration: 0.22, ease: POPUP_EXIT_EASE },\n    scale: { duration: 0.22, ease: POPUP_EXIT_EASE },\n    y: { duration: 0.22, ease: POPUP_EXIT_EASE },\n  },\n};\n\nconst chevronTransition = {\n  type: \"spring\" as const,\n  stiffness: 360,\n  damping: 32,\n  mass: 0.82,\n};\n\nconst HIGHLIGHT_SPRING = {\n  type: \"spring\" as const,\n  stiffness: 380,\n  damping: 41,\n  mass: 0.82,\n};\n\nfunction setRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (typeof ref === \"function\") {\n    ref(value);\n    return;\n  }\n\n  if (ref) {\n    (ref as React.MutableRefObject<T | null>).current = value;\n  }\n}\n\nfunction resolveStateClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n) {\n  return typeof className === \"function\" ? className(state) : className;\n}\n\nfunction resolveTriggerProps(triggerProps: TriggerRenderProps) {\n  const {\n    children: _children,\n    className: triggerClassName,\n    onAnimationEnd: _onAnimationEnd,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragEnd: _onDragEnd,\n    onDragEnter: _onDragEnter,\n    onDragExit: _onDragExit,\n    onDragLeave: _onDragLeave,\n    onDragOver: _onDragOver,\n    onDragStart: _onDragStart,\n    onDrop: _onDrop,\n    ref: triggerRef,\n    style: triggerStyle,\n    ...resolvedTriggerProps\n  } = triggerProps;\n\n  return {\n    resolvedTriggerProps,\n    triggerClassName,\n    triggerRef,\n    triggerStyle,\n  };\n}\n\nfunction resolvePopupProps(popupProps: PopupRenderProps) {\n  const {\n    children: _children,\n    className: popupClassName,\n    onAnimationEnd: _onAnimationEnd,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragEnd: _onDragEnd,\n    onDragEnter: _onDragEnter,\n    onDragExit: _onDragExit,\n    onDragLeave: _onDragLeave,\n    onDragOver: _onDragOver,\n    onDragStart: _onDragStart,\n    onDrop: _onDrop,\n    ref: popupRef,\n    style: popupStyle,\n    ...resolvedPopupProps\n  } = popupProps;\n\n  return {\n    popupClassName,\n    popupRef,\n    popupStyle,\n    resolvedPopupProps,\n  };\n}\n\nfunction resolveItemProps(itemProps: ItemRenderProps) {\n  const {\n    children: _children,\n    className: itemClassName,\n    onAnimationEnd: _onAnimationEnd,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragEnd: _onDragEnd,\n    onDragEnter: _onDragEnter,\n    onDragExit: _onDragExit,\n    onDragLeave: _onDragLeave,\n    onDragOver: _onDragOver,\n    onDragStart: _onDragStart,\n    onDrop: _onDrop,\n    ref: itemRef,\n    style: itemStyle,\n    ...resolvedItemProps\n  } = itemProps;\n\n  return {\n    itemClassName,\n    itemRef,\n    itemStyle,\n    resolvedItemProps,\n  };\n}\n\nfunction composeEventHandlers<Event extends React.SyntheticEvent>(\n  originalEventHandler: ((event: Event) => void) | undefined,\n  eventHandler: (event: Event) => void\n) {\n  return (event: Event) => {\n    originalEventHandler?.(event);\n    eventHandler(event);\n  };\n}\n\nfunction isEmptySelectValue(\n  value: SelectRootProps[\"value\"] | undefined | null\n) {\n  return value == null || value === \"\";\n}\n\nfunction toPrimitiveSelectValue(value: SelectRootProps[\"value\"] | undefined) {\n  return isEmptySelectValue(value) ? null : value;\n}\n\nconst selectValueClassName =\n  \"flex min-w-0 flex-1 items-center gap-2 truncate text-left [&_svg]:shrink-0\";\n\nfunction resolveItemContent({\n  children,\n  icon,\n}: {\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n}) {\n  if (!icon) {\n    return children;\n  }\n\n  return (\n    <>\n      {icon}\n      {children}\n    </>\n  );\n}\n\nfunction resolveItemText({\n  children,\n  label,\n  textValue,\n  value,\n}: {\n  children?: React.ReactNode;\n  label?: string;\n  textValue?: string;\n  value: string;\n}) {\n  return (\n    label ??\n    textValue ??\n    (typeof children === \"string\" ? children : undefined) ??\n    value\n  );\n}\n\nfunction Select(allProps: SelectProps) {\n  const {\n    children,\n    defaultOpen = false,\n    defaultValue,\n    onOpenChange,\n    onValueChange,\n    open: openProp,\n    value: valueProp,\n    ...props\n  } = allProps;\n  const internalActionsRef = React.useRef<SelectPrimitive.Root.Actions | null>(\n    null\n  );\n  const actionsRef = internalActionsRef;\n  const skipExitAnimationRef = React.useRef(false);\n  const isOpenControlled = openProp !== undefined;\n  const isValueControlled = Object.hasOwn(allProps, \"value\");\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n  const [uncontrolledValue, setUncontrolledValue] =\n    React.useState<SelectRootProps[\"value\"]>(defaultValue);\n  const [activeValue, setActiveValue] = React.useState<string | undefined>();\n  const nextItemIndexRef = React.useRef(0);\n  const openStateRef = React.useRef(false);\n  const open = isOpenControlled ? openProp : uncontrolledOpen;\n  const selectedValue = isValueControlled ? valueProp : uncontrolledValue;\n  const activeHighlightId = React.useId();\n\n  if (open && !openStateRef.current) {\n    nextItemIndexRef.current = 0;\n  }\n  openStateRef.current = open;\n\n  useSuppressResizeObserverLoopError();\n\n  const handleOpenChange = React.useCallback<\n    NonNullable<SelectRootProps[\"onOpenChange\"]>\n  >(\n    (nextOpen, eventDetails) => {\n      if (!nextOpen && eventDetails.reason === \"item-press\") {\n        skipExitAnimationRef.current = true;\n      } else if (nextOpen) {\n        skipExitAnimationRef.current = false;\n      }\n\n      if (!isOpenControlled) {\n        setUncontrolledOpen(nextOpen);\n      }\n\n      if (!nextOpen) {\n        setActiveValue(undefined);\n      }\n\n      onOpenChange?.(nextOpen, eventDetails);\n    },\n    [isOpenControlled, onOpenChange]\n  );\n\n  const handleValueChange = React.useCallback<\n    NonNullable<SelectRootProps[\"onValueChange\"]>\n  >(\n    (nextValue, eventDetails) => {\n      if (!isValueControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue, eventDetails);\n    },\n    [isValueControlled, onValueChange]\n  );\n\n  const getItemIndex = React.useCallback(() => {\n    const itemIndex = nextItemIndexRef.current;\n    nextItemIndexRef.current += 1;\n    return itemIndex;\n  }, []);\n\n  const contextValue = React.useMemo<SelectContextValue>(\n    () => ({\n      actionsRef,\n      activeHighlightId,\n      activeValue,\n      getItemIndex,\n      itemVariants,\n      open,\n      selectedValue,\n      setActiveValue,\n      skipExitAnimationRef,\n    }),\n    [\n      actionsRef,\n      activeHighlightId,\n      activeValue,\n      getItemIndex,\n      open,\n      selectedValue,\n    ]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectPrimitive.Root\n        {...props}\n        actionsRef={actionsRef}\n        defaultValue={isValueControlled ? undefined : defaultValue}\n        onOpenChange={handleOpenChange}\n        onValueChange={handleValueChange}\n        open={open}\n        {...(isValueControlled\n          ? { value: toPrimitiveSelectValue(valueProp) }\n          : {})}\n      >\n        {children}\n      </SelectPrimitive.Root>\n    </SelectContext.Provider>\n  );\n}\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      className={cn(\"space-y-1 pt-2 first:pt-0\", className)}\n      data-slot=\"select-group\"\n      {...props}\n    />\n  );\n}\n\ntype SelectValueProps = Omit<SelectPrimitive.Value.Props, \"children\"> & {\n  children?: React.ReactNode | ((value: string | undefined) => React.ReactNode);\n};\n\nfunction SelectValue({\n  children,\n  className,\n  placeholder,\n  style,\n  ...props\n}: SelectValueProps) {\n  const { selectedValue } = useSelectContext(\"SelectValue\");\n  const hasValue = !isEmptySelectValue(selectedValue);\n  const resolvedValue =\n    hasValue && typeof selectedValue === \"string\" ? selectedValue : undefined;\n  const resolvedChildren =\n    typeof children === \"function\" ? children(resolvedValue) : children;\n  const { render: _render, ...valueProps } = props;\n  const valueClassName =\n    typeof className === \"function\" ? undefined : className;\n  const valueStyle = typeof style === \"function\" ? undefined : style;\n\n  if (!hasValue) {\n    return (\n      <span\n        className={cn(\n          selectValueClassName,\n          \"text-[color:var(--sel-muted-foreground)]\",\n          valueClassName\n        )}\n        data-placeholder=\"\"\n        data-slot=\"select-value\"\n        style={valueStyle}\n        {...valueProps}\n      >\n        {placeholder}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(selectValueClassName, valueClassName)}\n      data-slot=\"select-value\"\n      style={valueStyle}\n      {...valueProps}\n    >\n      {resolvedChildren ?? resolvedValue}\n    </span>\n  );\n}\n\nfunction SelectFieldChrome({\n  children,\n  className,\n  description,\n  descriptionClassName,\n  descriptionId,\n  label,\n  labelClassName,\n  triggerId,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  description?: React.ReactNode;\n  descriptionClassName?: string;\n  descriptionId?: string;\n  label?: React.ReactNode;\n  labelClassName?: string;\n  triggerId: string;\n}) {\n  if (!(label || description)) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-col gap-2\",\n        typeof className === \"string\" ? className : undefined\n      )}\n    >\n      {label ? (\n        <label\n          className={cn(\"font-medium text-foreground text-sm\", labelClassName)}\n          htmlFor={triggerId}\n        >\n          {label}\n        </label>\n      ) : null}\n      {description ? (\n        <p\n          className={cn(\n            \"text-pretty text-muted-foreground text-xs leading-snug tracking-tight\",\n            descriptionClassName\n          )}\n          id={descriptionId}\n        >\n          {description}\n        </p>\n      ) : null}\n      {children}\n    </div>\n  );\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  description,\n  descriptionClassName,\n  id: idProp,\n  label,\n  labelClassName,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  description?: React.ReactNode;\n  descriptionClassName?: string;\n  label?: React.ReactNode;\n  labelClassName?: string;\n  size?: \"sm\" | \"default\";\n}) {\n  const { open } = useSelectContext(\"SelectTrigger\");\n  const generatedId = React.useId();\n  const triggerId = idProp ?? generatedId;\n  const descriptionId = description ? `${triggerId}-description` : undefined;\n  const hasFieldChrome = Boolean(label || description);\n\n  return (\n    <SelectFieldChrome\n      className={\n        hasFieldChrome && typeof className === \"string\" ? className : undefined\n      }\n      description={description}\n      descriptionClassName={descriptionClassName}\n      descriptionId={descriptionId}\n      label={label}\n      labelClassName={labelClassName}\n      triggerId={triggerId}\n    >\n      <SelectPrimitive.Trigger\n        {...props}\n        render={(triggerProps, triggerState) => {\n          const {\n            resolvedTriggerProps,\n            triggerClassName,\n            triggerRef,\n            triggerStyle,\n          } = resolveTriggerProps(triggerProps as TriggerRenderProps);\n          const describedBy = [\n            resolvedTriggerProps[\"aria-describedby\"],\n            descriptionId,\n          ]\n            .filter(Boolean)\n            .join(\" \");\n\n          return (\n            <button\n              {...resolvedTriggerProps}\n              aria-describedby={describedBy || undefined}\n              className={cn(\n                selectThemeClassName,\n                selectTriggerClassName,\n                triggerClassName,\n                hasFieldChrome\n                  ? undefined\n                  : resolveStateClassName(className, triggerState)\n              )}\n              data-size={size}\n              data-slot=\"select-trigger\"\n              id={triggerId}\n              ref={(node) => {\n                setRef(triggerRef, node);\n              }}\n              style={triggerStyle}\n              type=\"button\"\n            >\n              {children}\n              <SelectPrimitive.Icon\n                render={\n                  <motion.span\n                    animate={{ rotate: open ? 180 : 0 }}\n                    className=\"shrink-0\"\n                    transition={chevronTransition}\n                  >\n                    <ChevronDownIcon className=\"h-4 w-4 text-[color:var(--sel-muted-foreground)]\" />\n                  </motion.span>\n                }\n              />\n            </button>\n          );\n        }}\n      />\n    </SelectFieldChrome>\n  );\n}\n\nfunction SelectContentPanel({\n  children,\n  className,\n  popupClassName,\n  popupRef,\n  popupState,\n  popupStyle,\n  resolvedPopupProps,\n}: {\n  children: React.ReactNode;\n  className?:\n    | string\n    | ((state: SelectPrimitive.Popup.State) => string | undefined);\n  popupClassName?: string;\n  popupRef?: React.Ref<HTMLDivElement>;\n  popupState: SelectPrimitive.Popup.State;\n  popupStyle?: React.CSSProperties;\n  resolvedPopupProps: Omit<\n    PopupRenderProps,\n    \"children\" | \"className\" | \"ref\" | \"style\"\n  >;\n}) {\n  const { actionsRef, skipExitAnimationRef } =\n    useSelectContext(\"SelectContentPanel\");\n  const skipExitAnimation = !popupState.open && skipExitAnimationRef.current;\n\n  return (\n    <div\n      {...resolvedPopupProps}\n      ref={(node) => {\n        setRef(popupRef, node);\n      }}\n      role=\"presentation\"\n      style={{\n        ...popupStyle,\n        transformOrigin: \"var(--transform-origin)\",\n        width: \"var(--anchor-width)\",\n      }}\n    >\n      <motion.div\n        animate={popupState.open ? popupMotion.animate : popupMotion.closed}\n        className={cn(\n          selectThemeClassName,\n          selectPanelChromeClassName,\n          \"flex transform-gpu flex-col\",\n          popupClassName,\n          resolveStateClassName(className, popupState)\n        )}\n        data-slot=\"select-content\"\n        initial={\n          popupState.transitionStatus === \"starting\"\n            ? popupMotion.initial\n            : false\n        }\n        onAnimationComplete={() => {\n          if (!popupState.open) {\n            skipExitAnimationRef.current = false;\n            actionsRef.current?.unmount();\n          }\n        }}\n        style={{\n          pointerEvents: popupState.open ? undefined : \"none\",\n          transformOrigin: \"var(--transform-origin)\",\n        }}\n        transition={\n          popupState.open\n            ? popupMotion.openTransition\n            : skipExitAnimation\n              ? INSTANT_CLOSE_TRANSITION\n              : popupMotion.closedTransition\n        }\n      >\n        {children}\n      </motion.div>\n    </div>\n  );\n}\n\nfunction SelectContent({\n  align = \"start\",\n  alignItemWithTrigger = false,\n  alignOffset = 0,\n  children,\n  className,\n  collisionAvoidance = {\n    align: \"shift\",\n    fallbackAxisSide: \"none\",\n    side: \"none\",\n  },\n  collisionPadding = 12,\n  side = \"bottom\",\n  sideOffset = 8,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    | \"align\"\n    | \"alignItemWithTrigger\"\n    | \"alignOffset\"\n    | \"collisionAvoidance\"\n    | \"collisionPadding\"\n    | \"side\"\n    | \"sideOffset\"\n  >) {\n  const { setActiveValue } = useSelectContext(\"SelectContent\");\n\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        className=\"isolate z-[300]\"\n        collisionAvoidance={collisionAvoidance}\n        collisionPadding={collisionPadding}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          {...props}\n          render={(popupProps, popupState) => {\n            const { popupClassName, popupRef, popupStyle, resolvedPopupProps } =\n              resolvePopupProps(popupProps as PopupRenderProps);\n\n            return (\n              <SelectContentPanel\n                className={className}\n                popupClassName={popupClassName}\n                popupRef={popupRef}\n                popupState={popupState}\n                popupStyle={popupStyle}\n                resolvedPopupProps={resolvedPopupProps}\n              >\n                <SelectScrollUpButton />\n                <motion.div className=\"relative min-h-0 flex-1\" layoutRoot>\n                  <ScrollAreaPrimitive.Root\n                    className=\"relative flex min-h-0 flex-1 flex-col overflow-hidden\"\n                    style={{\n                      maxHeight: `min(var(--available-height), ${MAX_MENU_HEIGHT}px)`,\n                    }}\n                  >\n                    <SelectPrimitive.List\n                      className=\"min-h-0 flex-1 p-1.5 outline-none\"\n                      onPointerLeave={() => {\n                        setActiveValue(undefined);\n                      }}\n                      render={(listProps) => {\n                        const {\n                          children: listChildren,\n                          className: listClassName,\n                          ref: listRef,\n                          style: listStyle,\n                          ...resolvedListProps\n                        } = listProps as ListRenderProps;\n\n                        return (\n                          <ScrollAreaPrimitive.Viewport\n                            {...resolvedListProps}\n                            className={cn(\n                              \"min-h-0 flex-1 overscroll-contain outline-none\",\n                              listClassName\n                            )}\n                            ref={(node) => {\n                              setRef(listRef, node);\n                            }}\n                            style={listStyle}\n                          >\n                            {listChildren}\n                          </ScrollAreaPrimitive.Viewport>\n                        );\n                      }}\n                    >\n                      {children}\n                    </SelectPrimitive.List>\n                    <ScrollAreaPrimitive.Scrollbar\n                      className={selectListScrollbarClassName}\n                      orientation=\"vertical\"\n                    >\n                      <ScrollAreaPrimitive.Thumb\n                        className={selectListThumbClassName}\n                      />\n                    </ScrollAreaPrimitive.Scrollbar>\n                  </ScrollAreaPrimitive.Root>\n                </motion.div>\n                <SelectScrollDownButton />\n              </SelectContentPanel>\n            );\n          }}\n        />\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className={cn(\n        \"px-3 pb-1.5 font-medium text-[10px] text-[color:var(--sel-muted-foreground)] uppercase tracking-[0.16em]\",\n        className\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  children,\n  className,\n  icon,\n  label,\n  textValue,\n  value,\n  ...props\n}: SelectPrimitive.Item.Props & {\n  icon?: React.ReactNode;\n  label?: string;\n  textValue?: string;\n}) {\n  const {\n    activeHighlightId,\n    activeValue,\n    getItemIndex,\n    itemVariants,\n    selectedValue,\n    setActiveValue,\n  } = useSelectContext(\"SelectItem\");\n  const itemValue = typeof value === \"string\" ? value : undefined;\n  const resolvedText = itemValue\n    ? resolveItemText({\n        children,\n        label: typeof label === \"string\" ? label : undefined,\n        textValue,\n        value: itemValue,\n      })\n    : undefined;\n  const itemContent = resolveItemContent({\n    children: children ?? resolvedText,\n    icon,\n  });\n  const itemIndexRef = React.useRef<number | null>(null);\n\n  if (itemIndexRef.current === null) {\n    itemIndexRef.current = getItemIndex();\n  }\n\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      label={resolvedText}\n      value={value}\n      {...props}\n      render={(itemProps, itemState) => {\n        const { itemClassName, itemRef, itemStyle, resolvedItemProps } =\n          resolveItemProps(itemProps as ItemRenderProps);\n        const isDisabled = itemState.disabled;\n        const isActive =\n          !isDisabled && itemValue !== undefined && itemValue === activeValue;\n        const isSelected =\n          itemState.selected ||\n          (itemValue !== undefined && Object.is(itemValue, selectedValue));\n\n        return (\n          <motion.div\n            {...resolvedItemProps}\n            animate=\"visible\"\n            className={cn(\n              \"transform-gpu\",\n              selectItemClassName,\n              isDisabled &&\n                \"pointer-events-none cursor-not-allowed text-[color:var(--sel-muted-foreground)] opacity-50\",\n              itemClassName,\n              resolveStateClassName(className, itemState)\n            )}\n            custom={itemIndexRef.current}\n            data-disabled={isDisabled ? \"\" : undefined}\n            exit=\"exit\"\n            initial=\"hidden\"\n            layout={false}\n            onMouseEnter={composeEventHandlers(\n              resolvedItemProps.onMouseEnter,\n              () => {\n                if (!isDisabled) {\n                  setActiveValue(itemValue);\n                }\n              }\n            )}\n            onPointerMove={composeEventHandlers(\n              resolvedItemProps.onPointerMove,\n              () => {\n                if (!isDisabled) {\n                  setActiveValue(itemValue);\n                }\n              }\n            )}\n            ref={(node) => {\n              setRef(itemRef, node);\n            }}\n            style={itemStyle}\n            transition={PRESS_SPRING}\n            variants={itemVariants}\n            whileTap={isDisabled ? undefined : { scale: 0.96 }}\n          >\n            {isActive ? (\n              <motion.span\n                className={selectItemHighlightClassName}\n                initial={false}\n                layoutId={activeHighlightId}\n                transition={HIGHLIGHT_SPRING}\n              />\n            ) : null}\n            <SelectPrimitive.ItemText className=\"relative z-10 flex min-w-0 flex-1 items-center gap-2 truncate text-left [&_svg]:shrink-0\">\n              {itemContent}\n            </SelectPrimitive.ItemText>\n            <span className=\"pointer-events-none absolute right-3 z-10 flex h-4 w-4 items-center justify-center\">\n              <AnimatePresence>\n                {isSelected ? (\n                  <motion.span\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    className=\"text-[color:var(--sel-foreground)]\"\n                    exit={{ opacity: 0, scale: 0.8, y: 1 }}\n                    initial={{ opacity: 0, scale: 0.8, y: 1 }}\n                    transition={CHECK_SPRING}\n                  >\n                    <CheckIcon className=\"h-4 w-4\" />\n                  </motion.span>\n                ) : null}\n              </AnimatePresence>\n            </span>\n          </motion.div>\n        );\n      }}\n    />\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-[color:var(--sel-surface)] py-1 text-[color:var(--sel-muted-foreground)] [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"select-scroll-up-button\"\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-[color:var(--sel-surface)] py-1 text-[color:var(--sel-muted-foreground)] [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"select-scroll-down-button\"\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n",
      "type": "registry:ui"
    }
  ],
  "title": "Select (Base UI)",
  "description": "Compound Select parts layered over Base UI primitives, preserving the original trigger press, chevron rotation, grouped rows, and panel motion."
}