{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "r-select",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "@radix-ui/react-scroll-area",
    "@radix-ui/react-select",
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "files": [
    {
      "path": "r-select.tsx",
      "content": "\"use client\";\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as SelectPrimitive from \"@radix-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 selectListScrollbarClassName =\n  \"z-10 flex w-2 shrink-0 touch-none select-none bg-transparent p-px opacity-0 transition-opacity duration-150 data-[state=visible]:pointer-events-auto data-[state=visible]:opacity-100\";\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 MAX_MENU_HEIGHT = 320;\nconst INSTANT_CLOSE_TRANSITION = { duration: 0 } as const;\nconst POPUP_TRANSFORM_ORIGIN = \"top center\";\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 = React.ComponentPropsWithoutRef<\n  typeof SelectPrimitive.Root\n>;\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  activeHighlightId: string;\n  activeValue?: string;\n  getItemIndex: () => number;\n  itemVariants: typeof itemVariants;\n  open: boolean;\n  selectedValue?: string;\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\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 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(value: string | undefined | null) {\n  return value == null || value === \"\";\n}\n\nfunction toPrimitiveSelectValue(value: string | undefined | null) {\n  return isEmptySelectValue(value) ? undefined : 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 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) => {\n      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);\n    },\n    [isOpenControlled, onOpenChange]\n  );\n\n  const handleValueChange = React.useCallback<\n    NonNullable<SelectRootProps[\"onValueChange\"]>\n  >(\n    (nextValue) => {\n      if (!isValueControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue);\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      activeHighlightId,\n      activeValue,\n      getItemIndex,\n      itemVariants,\n      open,\n      selectedValue,\n      setActiveValue,\n      skipExitAnimationRef,\n    }),\n    [activeHighlightId, activeValue, getItemIndex, open, selectedValue]\n  );\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectPrimitive.Root\n        {...props}\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({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>) {\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<\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>,\n  \"children\"\n> & {\n  children?: React.ReactNode | ((value: string | undefined) => React.ReactNode);\n};\n\nfunction SelectValue({\n  children,\n  className,\n  placeholder,\n  ...props\n}: SelectValueProps) {\n  const { selectedValue } = useSelectContext(\"SelectValue\");\n  const hasValue = !isEmptySelectValue(selectedValue);\n  const { asChild: _asChild, ...valueProps } = props;\n  const resolvedValue =\n    hasValue && typeof selectedValue === \"string\" ? selectedValue : undefined;\n  const resolvedChildren =\n    typeof children === \"function\" ? children(resolvedValue) : children;\n\n  if (!hasValue) {\n    return (\n      <span\n        className={cn(\n          selectValueClassName,\n          \"text-[color:var(--sel-muted-foreground)]\",\n          className\n        )}\n        data-placeholder=\"\"\n        data-slot=\"select-value\"\n        {...valueProps}\n      >\n        {placeholder}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(selectValueClassName, className)}\n      data-slot=\"select-value\"\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 className={cn(\"flex w-full flex-col gap-2\", className)}>\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  children,\n  className,\n  description,\n  descriptionClassName,\n  id: idProp,\n  label,\n  labelClassName,\n  size = \"default\",\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\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  const describedBy = [props[\"aria-describedby\"], descriptionId]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <SelectFieldChrome\n      className={hasFieldChrome ? className : undefined}\n      description={description}\n      descriptionClassName={descriptionClassName}\n      descriptionId={descriptionId}\n      label={label}\n      labelClassName={labelClassName}\n      triggerId={triggerId}\n    >\n      <SelectPrimitive.Trigger asChild {...props}>\n        <button\n          aria-describedby={describedBy || undefined}\n          className={cn(\n            selectThemeClassName,\n            selectTriggerClassName,\n            hasFieldChrome ? undefined : className\n          )}\n          data-size={size}\n          data-slot=\"select-trigger\"\n          id={triggerId}\n          type=\"button\"\n        >\n          {children}\n          <SelectPrimitive.Icon asChild>\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          </SelectPrimitive.Icon>\n        </button>\n      </SelectPrimitive.Trigger>\n    </SelectFieldChrome>\n  );\n}\n\nfunction SelectContent({\n  align = \"start\",\n  avoidCollisions = false,\n  children,\n  className,\n  collisionPadding = 12,\n  position = \"popper\",\n  side = \"bottom\",\n  sideOffset = 8,\n  style,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>) {\n  const { open, setActiveValue, skipExitAnimationRef } =\n    useSelectContext(\"SelectContent\");\n  const panelVariants = {\n    closed: {\n      ...popupMotion.closed,\n      transition: popupMotion.closedTransition,\n    },\n    closedInstant: {\n      opacity: popupMotion.closed.opacity,\n      scale: popupMotion.closed.scale,\n      y: popupMotion.closed.y,\n      transition: INSTANT_CLOSE_TRANSITION,\n    },\n    open: {\n      ...popupMotion.animate,\n      transition: popupMotion.openTransition,\n    },\n  };\n\n  return (\n    <AnimatePresence\n      custom={skipExitAnimationRef}\n      onExitComplete={() => {\n        skipExitAnimationRef.current = false;\n      }}\n    >\n      {open ? (\n        <SelectPrimitive.Portal>\n          <SelectPrimitive.Content\n            {...({\n              align,\n              asChild: true,\n              avoidCollisions,\n              collisionPadding,\n              position,\n              side,\n              sideOffset,\n              ...props,\n            } as React.ComponentPropsWithoutRef<\n              typeof SelectPrimitive.Content\n            >)}\n          >\n            <div\n              style={{\n                width: \"var(--radix-select-trigger-width)\",\n                ...style,\n              }}\n            >\n              <motion.div\n                animate=\"open\"\n                className={cn(\n                  selectThemeClassName,\n                  selectPanelChromeClassName,\n                  \"flex transform-gpu flex-col\",\n                  className\n                )}\n                custom={skipExitAnimationRef}\n                data-slot=\"select-content\"\n                exit={\n                  ((\n                    custom: React.MutableRefObject<boolean>\n                  ): \"closed\" | \"closedInstant\" =>\n                    custom.current ? \"closedInstant\" : \"closed\") as never\n                }\n                initial=\"closed\"\n                style={{ transformOrigin: POPUP_TRANSFORM_ORIGIN }}\n                variants={panelVariants}\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\"\n                    scrollHideDelay={100}\n                    style={{\n                      maxHeight: `min(var(--radix-select-content-available-height), ${MAX_MENU_HEIGHT}px)`,\n                    }}\n                    type=\"hover\"\n                  >\n                    <ScrollAreaPrimitive.Viewport className=\"min-h-0 flex-1 overscroll-contain outline-none\">\n                      <SelectPrimitive.Viewport\n                        className=\"p-1.5\"\n                        onPointerLeave={() => {\n                          setActiveValue(undefined);\n                        }}\n                      >\n                        {children}\n                      </SelectPrimitive.Viewport>\n                    </ScrollAreaPrimitive.Viewport>\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              </motion.div>\n            </div>\n          </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n      ) : null}\n    </AnimatePresence>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\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  disabled = false,\n  icon,\n  label,\n  textValue,\n  value,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\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    skipExitAnimationRef,\n  } = useSelectContext(\"SelectItem\");\n  const resolvedText = resolveItemText({ children, label, textValue, value });\n  const itemContent = resolveItemContent({\n    children: children ?? resolvedText,\n    icon,\n  });\n  const isActive = !disabled && value === activeValue;\n  const isSelected = value === selectedValue;\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      asChild\n      disabled={disabled}\n      onSelect={() => {\n        skipExitAnimationRef.current = true;\n      }}\n      textValue={resolvedText}\n      value={value}\n      {...props}\n    >\n      <motion.div\n        animate=\"visible\"\n        aria-disabled={disabled || undefined}\n        className={cn(\n          \"transform-gpu\",\n          selectItemClassName,\n          disabled &&\n            \"pointer-events-none cursor-not-allowed text-[color:var(--sel-muted-foreground)] opacity-50\",\n          className\n        )}\n        custom={itemIndexRef.current}\n        data-disabled={disabled ? \"\" : undefined}\n        exit=\"exit\"\n        initial=\"hidden\"\n        layout={false}\n        onMouseEnter={composeEventHandlers(props.onMouseEnter, () => {\n          if (!disabled) {\n            setActiveValue(value);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, () => {\n          if (!disabled) {\n            setActiveValue(value);\n          }\n        })}\n        transition={PRESS_SPRING}\n        variants={itemVariants}\n        whileTap={disabled ? 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 asChild>\n          <span className=\"relative z-10 flex min-w-0 flex-1 items-center gap-2 truncate text-left [&_svg]:shrink-0\">\n            {itemContent}\n          </span>\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    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\n        \"pointer-events-none -mx-1 my-1 h-px bg-[color:color-mix(in_oklch,var(--sel-border),transparent_40%)]\",\n        className\n      )}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\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.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\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.ScrollDownButton>\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 (Radix UI)",
  "description": "Compound Select parts layered over Radix UI primitives, preserving the original trigger press, chevron rotation, grouped rows, and panel motion."
}