{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "description": "Animated select menu with collision-aware positioning, typeahead, proximity hover, spring-animated popover, and animated checkmark. Base UI flavor.",
  "dependencies": [
    "@base-ui/react",
    "framer-motion",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils",
    "https://zeron-ui.vercel.app/r/springs.json",
    "https://zeron-ui.vercel.app/r/shape-context.json",
    "https://zeron-ui.vercel.app/r/surface-context.json",
    "https://zeron-ui.vercel.app/r/surface-classes.json",
    "https://zeron-ui.vercel.app/r/icon-context.json",
    "https://zeron-ui.vercel.app/r/use-proximity-hover.json",
    "https://zeron-ui.vercel.app/r/elevated.json",
    "https://zeron-ui.vercel.app/r/portal-container-context.json"
  ],
  "files": [
    {
      "path": "src/components/ui/select.tsx",
      "content": "\"use client\";\n\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useRef,\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  createContext,\n  useContext,\n  type ReactNode,\n  type HTMLAttributes,\n  type ComponentProps,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport type { IconComponent } from \"@/lib/icon-context\";\nimport { cn } from \"@/lib/utils\";\nimport { spring, exitFallbackMs } from \"@/lib/springs\";\nimport { useProximityHover } from \"@/hooks/use-proximity-hover\";\nimport { useShape } from \"@/lib/shape-context\";\nimport { Elevated } from \"@/lib/elevated\";\nimport { usePortalContainer } from \"@/lib/portal-container-context\";\n\n// ---------------------------------------------------------------------------\n// Select context\n//\n// Built on Base UI's Select primitive, which owns positioning (collision\n// flipping, anchor tracking), dismissal (outside press, focus-out, Escape\n// nesting inside dialogs), list keyboard navigation + typeahead, combobox\n// ARIA, and the hidden form input. This layer keeps the\n// proximity-hover overlays, the spring open/close animation (via actionsRef\n// deferred unmount), and the animated checkmark.\n// ---------------------------------------------------------------------------\n\n// How long a selection holds the popup open before closing, so the\n// acknowledgment — the checkmark drawing in and the selected background\n// springing to the picked row — is visible instead of being cut off by the\n// ~60ms close fade. Escape and outside presses still close immediately.\nconst selectionAckMs = 300;\n\ninterface SelectContextValue {\n  value: string;\n  open: boolean;\n  actionsRef: React.RefObject<{ unmount: () => void } | null>;\n}\n\nconst SelectContext = createContext<SelectContextValue | null>(null);\n\nfunction useSelectContext() {\n  const ctx = useContext(SelectContext);\n  if (!ctx) throw new Error(\"Select compound components must be inside <Select>\");\n  return ctx;\n}\n\n// Content context for proximity hover\ninterface SelectContentContextValue {\n  registerItem: (index: number, element: HTMLElement | null) => void;\n  activeIndex: number | null;\n  checkedIndex?: number;\n}\n\nconst SelectContentContext =\n  createContext<SelectContentContextValue | null>(null);\n\n// ---------------------------------------------------------------------------\n// Select (root)\n// ---------------------------------------------------------------------------\n\ninterface SelectProps {\n  children: ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  name?: string;\n  required?: boolean;\n}\n\n/**\n * Walk the children tree collecting `{ value, label }` pairs from SelectItem\n * elements. Passed to Base UI's `items` prop so the trigger can resolve the\n * label of an initial value before the popup has ever mounted (items only\n * render while open). Non-string labels fall back to the raw value, matching\n * the previous labelMap behaviour.\n */\nfunction collectSelectItems(\n  node: ReactNode,\n  out: { value: string; label: ReactNode }[] = []\n) {\n  Children.forEach(node, (child) => {\n    if (!isValidElement(child)) return;\n    const props = child.props as { value?: unknown; children?: ReactNode };\n    if (typeof props.value === \"string\") {\n      out.push({\n        value: props.value,\n        label:\n          typeof props.children === \"string\" ? props.children : props.value,\n      });\n    } else if (props.children) {\n      collectSelectItems(props.children, out);\n    }\n  });\n  return out;\n}\n\nfunction Select({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  name,\n  required,\n}: SelectProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue ?? \"\");\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = openProp !== undefined ? openProp : internalOpen;\n  const actionsRef = useRef<{ unmount: () => void } | null>(null);\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const items = useMemo(() => collectSelectItems(children), [children]);\n\n  const handleValueChange = useCallback(\n    (next: string | null) => {\n      const v = next ?? \"\";\n      if (value === undefined) setInternalValue(v);\n      onValueChange?.(v);\n    },\n    [value, onValueChange]\n  );\n\n  const ackTimeoutRef = useRef<number | null>(null);\n  const cancelAckClose = useCallback(() => {\n    if (ackTimeoutRef.current !== null) {\n      clearTimeout(ackTimeoutRef.current);\n      ackTimeoutRef.current = null;\n    }\n  }, []);\n  useEffect(() => cancelAckClose, [cancelAckClose]);\n\n  const commitOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (openProp === undefined) setInternalOpen(nextOpen);\n      onOpenChange?.(nextOpen);\n    },\n    [openProp, onOpenChange]\n  );\n\n  // Picking an item acknowledges before closing: the close is deferred by\n  // selectionAckMs so the checkmark draw and the selected background's spring\n  // to the picked row are seen. Every other close reason (Escape, outside\n  // press, trigger toggle, focus-out) closes immediately and cancels any\n  // pending acknowledgment; re-picking within the window restarts it.\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean, eventDetails: { reason: string }) => {\n      if (!nextOpen && eventDetails.reason === \"item-press\") {\n        cancelAckClose();\n        ackTimeoutRef.current = window.setTimeout(() => {\n          ackTimeoutRef.current = null;\n          commitOpenChange(false);\n        }, selectionAckMs);\n        return;\n      }\n      cancelAckClose();\n      commitOpenChange(nextOpen);\n    },\n    [cancelAckClose, commitOpenChange]\n  );\n\n  const ctx = useMemo(\n    () => ({ value: currentValue, open, actionsRef }),\n    [currentValue, open]\n  );\n\n  return (\n    <SelectContext.Provider value={ctx}>\n      <SelectPrimitive.Root\n        // Always controlled; \"\" (no selection) maps to Base UI's null.\n        value={currentValue === \"\" ? null : currentValue}\n        onValueChange={handleValueChange}\n        open={open}\n        onOpenChange={handleOpenChange}\n        actionsRef={actionsRef}\n        items={items}\n        disabled={disabled}\n        name={name}\n        required={required}\n        // Non-modal: the page keeps scrolling and the Positioner tracks the\n        // anchor, so the popup follows its trigger instead of detaching.\n        modal={false}\n      >\n        {children}\n      </SelectPrimitive.Root>\n    </SelectContext.Provider>\n  );\n}\n\nSelect.displayName = \"Select\";\n\n// ---------------------------------------------------------------------------\n// SelectTrigger\n// ---------------------------------------------------------------------------\n\nconst triggerVariants = cva(\n  [\n    \"group inline-flex min-w-[160px] items-center justify-between outline-none cursor-pointer\",\n    \"transition-all duration-fast\",\n    \"disabled:opacity-50 disabled:pointer-events-none\",\n    \"focus-visible:ring-1 focus-visible:ring-focus-ring\",\n  ],\n  {\n    variants: {\n      variant: {\n        bordered:\n          \"border border-input bg-transparent text-fg-default shadow-control hover:border-input-hover hover:bg-hover\",\n        borderless:\n          \"border border-transparent bg-transparent text-fg-default hover:bg-hover\",\n      },\n      size: {\n        sm: \"h-control-xs gap-1.5 px-2.5 text-label\",\n        md: \"h-control-sm gap-2 px-3 text-body\",\n        lg: \"h-control-md gap-2 px-3.5 text-body\",\n      },\n    },\n    defaultVariants: {\n      variant: \"bordered\",\n      size: \"md\",\n    },\n  }\n);\n\ninterface SelectTriggerProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, \"children\">,\n    VariantProps<typeof triggerVariants> {\n  icon?: IconComponent;\n  placeholder?: string;\n  error?: string;\n  wrapperClassName?: string;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      className,\n      variant,\n      size = \"md\",\n      icon: Icon,\n      placeholder = \"Select…\",\n      error,\n      wrapperClassName,\n      ...props\n    },\n    ref\n  ) => {\n    const shape = useShape();\n    const iconSize = size === \"sm\" ? 14 : size === \"lg\" ? 20 : 16;\n\n    return (\n      <div className={cn(\"flex flex-col gap-1\", wrapperClassName)}>\n        <SelectPrimitive.Trigger\n          ref={ref}\n          aria-invalid={!!error || undefined}\n          data-size={size}\n          data-slot=\"select-trigger\"\n          data-variant={variant ?? \"bordered\"}\n          className={cn(\n            triggerVariants({ variant, size }),\n            shape.input,\n            error && \"border-danger-border hover:border-danger-border\",\n            className\n          )}\n          {...props}\n        >\n          <span className=\"flex min-w-0 flex-1 items-center gap-[inherit]\">\n            {Icon && (\n              <Icon\n                size={iconSize}\n                strokeWidth={1.5}\n                className=\"shrink-0 text-fg-subtle transition-[color,stroke-width] duration-fast group-hover:text-fg-default group-hover:stroke-[2]\"\n              />\n            )}\n            <SelectPrimitive.Value\n              placeholder={placeholder}\n              className=\"min-w-0 flex-1 text-left truncate data-[placeholder]:text-fg-subtle\"\n            />\n          </span>\n\n          <svg\n            width={iconSize}\n            height={iconSize}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"shrink-0 text-fg-subtle transition-colors duration-fast group-hover:text-fg-default\"\n          >\n            <path d=\"M6 9l6 6 6-6\" />\n          </svg>\n        </SelectPrimitive.Trigger>\n        {error && (\n          <span className=\"text-label text-fg-danger pl-3\">{error}</span>\n        )}\n      </div>\n    );\n  }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n\n// ---------------------------------------------------------------------------\n// SelectContent\n// ---------------------------------------------------------------------------\n\ntype SelectPositionerProps = ComponentProps<typeof SelectPrimitive.Positioner>;\n\ninterface SelectContentProps\n  extends Omit<\n    ComponentProps<typeof SelectPrimitive.Popup>,\n    \"children\" | \"className\" | \"render\"\n  > {\n  className?: string;\n  children: ReactNode;\n  side?: SelectPositionerProps[\"side\"];\n  align?: SelectPositionerProps[\"align\"];\n  sideOffset?: number;\n  alignOffset?: number;\n  alignItemWithTrigger?: boolean;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      className,\n      children,\n      side = \"bottom\",\n      align = \"start\",\n      sideOffset = 6,\n      alignOffset = 0,\n      alignItemWithTrigger = false,\n      ...popupProps\n    },\n    ref\n  ) => {\n    const portalContainer = usePortalContainer();\n    const { open, value, actionsRef } = useSelectContext();\n    const shape = useShape();\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const {\n      activeIndex,\n      setActiveIndex,\n      itemRects,\n      isMeasured,\n      sessionRef,\n      handlers,\n      registerItem,\n      remeasure,\n    } = useProximityHover(containerRef);\n\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [checkedIndex, setCheckedIndex] = useState<number | undefined>(\n      undefined\n    );\n\n    // Release Base UI's deferred unmount once the exit tween has played.\n    // onAnimationComplete on the motion.div is the primary signal; this\n    // timeout is a fallback for throttled/background tabs where rAF-driven\n    // animation callbacks can stall. The popup exits with spring.fast, so the\n    // fallback tracks that tier's exit duration plus a safety buffer.\n    useEffect(() => {\n      if (open) return;\n      const id = setTimeout(\n        () => actionsRef.current?.unmount(),\n        exitFallbackMs(spring.fast)\n      );\n      return () => clearTimeout(id);\n    }, [open, actionsRef]);\n\n    // Fresh rects once per open. Measuring is the hook's job — it owns the\n    // one coalesced pass that item registration and container resizes both\n    // feed into, and a second pass from elsewhere is what used to land a\n    // corrected rect on an already-mounted overlay. The popup keeps its items\n    // registered while it sits hidden between opens, so registration alone\n    // would never trigger a fresh pass on reopen.\n    useEffect(() => {\n      if (!open) return;\n      remeasure();\n    }, [open, remeasure]);\n\n    // Detect the checked row. Deliberately does NOT remeasure on a value\n    // change while open: the rows haven't moved, so the published rects stay\n    // trustworthy and only checkedIndex switches — which lets the selected\n    // marker spring from the old row to the picked one (the selection\n    // acknowledgment) instead of unmounting and snapping.\n    useEffect(() => {\n      if (!open) return;\n      // Double rAF: first waits for React commit, second for layout\n      let inner: number;\n      const outer = requestAnimationFrame(() => {\n        inner = requestAnimationFrame(() => {\n          const container = containerRef.current;\n          if (container) {\n            const items = Array.from(\n              container.querySelectorAll(\"[data-proximity-index]\")\n            ) as HTMLElement[];\n            const idx = items.findIndex(\n              (el) => el.getAttribute(\"data-value\") === value\n            );\n            setCheckedIndex(idx !== -1 ? idx : undefined);\n          }\n        });\n      });\n      return () => {\n        cancelAnimationFrame(outer);\n        cancelAnimationFrame(inner);\n      };\n    }, [open, value]);\n\n    // Reset every overlay index as the close begins. checkedIndex otherwise\n    // lags one open behind value (picking an item closes the popup before the\n    // effect above re-syncs it), and a leftover activeIndex is worse: Base UI\n    // keeps the popup mounted through the exit tween, so on reopen the hover\n    // pill would still be sitting on the previously active row and spring from\n    // there to the row that auto-focus lands on.\n    useEffect(() => {\n      if (open) return;\n      setCheckedIndex(undefined);\n      setActiveIndex(null);\n      setFocusedIndex(null);\n    }, [open, setActiveIndex]);\n\n    // Overlays read rects only once the hook reports the item set fully\n    // measured. Positioning one from an incomplete pass mounts it at the wrong\n    // row, and the correcting pass then springs it across the list.\n    const activeRect =\n      isMeasured && activeIndex !== null ? itemRects[activeIndex] : null;\n    const checkedRect =\n      isMeasured && checkedIndex != null ? itemRects[checkedIndex] : null;\n    const focusRect =\n      isMeasured && focusedIndex !== null ? itemRects[focusedIndex] : null;\n\n    const contentCtx = useMemo(\n      () => ({ registerItem, activeIndex, checkedIndex }),\n      [registerItem, activeIndex, checkedIndex]\n    );\n\n    return (\n      <SelectPrimitive.Portal container={portalContainer ?? undefined}>\n        <SelectPrimitive.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          alignOffset={alignOffset}\n          alignItemWithTrigger={alignItemWithTrigger}\n          className=\"z-popover outline-none\"\n        >\n          <motion.div\n            initial={{ opacity: 0, y: -4, scaleY: 0.96 }}\n            animate={\n              open\n                ? { opacity: 1, y: 0, scaleY: 1 }\n                : { opacity: 0, y: -4, scaleY: 0.96 }\n            }\n            transition={open ? spring.fast : spring.fast.exit}\n            style={{ transformOrigin: \"top center\" }}\n            // Base UI defers unmount while actionsRef is set; release it once\n            // the exit spring has finished so the close animation fully plays.\n            onAnimationComplete={() => {\n              if (!open) actionsRef.current?.unmount();\n            }}\n          >\n            <SelectContentContext.Provider value={contentCtx}>\n              <SelectPrimitive.Popup\n                {...popupProps}\n                render={\n                  <Elevated\n                    surface=\"floating\"\n                    shadow=\"floating\"\n                    ref={(node: HTMLDivElement | null) => {\n                      (\n                        containerRef as React.MutableRefObject<HTMLDivElement | null>\n                      ).current = node;\n                      if (typeof ref === \"function\") ref(node);\n                      else if (ref)\n                        (\n                          ref as React.MutableRefObject<HTMLDivElement | null>\n                        ).current = node;\n                    }}\n                  />\n                }\n                onMouseEnter={(event) => {\n                  popupProps.onMouseEnter?.(event);\n                  if (event.defaultPrevented) return;\n                  handlers.onMouseEnter();\n                  setFocusedIndex(null);\n                }}\n                onMouseMove={(event) => {\n                  popupProps.onMouseMove?.(event);\n                  if (!event.defaultPrevented) handlers.onMouseMove(event);\n                }}\n                onMouseLeave={(event) => {\n                  popupProps.onMouseLeave?.(event);\n                  if (!event.defaultPrevented) handlers.onMouseLeave();\n                }}\n                onFocus={(e) => {\n                  popupProps.onFocus?.(e);\n                  if (e.defaultPrevented) return;\n                  const indexAttr = (e.target as HTMLElement)\n                    .closest(\"[data-proximity-index]\")\n                    ?.getAttribute(\"data-proximity-index\");\n                  if (indexAttr != null) {\n                    const idx = Number(indexAttr);\n                    setActiveIndex(idx);\n                    setFocusedIndex(\n                      (e.target as HTMLElement).matches(\":focus-visible\")\n                        ? idx\n                        : null\n                    );\n                  }\n                }}\n                onBlur={(e) => {\n                  popupProps.onBlur?.(e);\n                  if (e.defaultPrevented) return;\n                  if (containerRef.current?.contains(e.relatedTarget as Node))\n                    return;\n                  setFocusedIndex(null);\n                  setActiveIndex(null);\n                }}\n                className={cn(\n                  // min-w tracks the trigger via the Positioner's --anchor-width\n                  // var, matching the pre-migration minWidth: triggerRect.width.\n                  `relative flex flex-col gap-0.5 min-w-[var(--anchor-width)] max-h-[min(300px,var(--available-height))] overflow-y-auto ${shape.container} p-1 select-none outline-none`,\n                  className\n                )}\n              >\n                {/* The three overlays are torn down as the close begins rather\n                    than exit-animated, because an overlay still mounted when the\n                    popup reopens is one AnimatePresence re-adopts under its old\n                    key: `initial` never runs again, so it keeps the position of the\n                    row it had before and animates from there to the new one. The\n                    popup's own fade covers their disappearance. */}\n                {/* Selected background */}\n                {open && (\n                  <AnimatePresence>\n                    {checkedRect && (\n                      <motion.div\n                        className={`absolute ${shape.bg} bg-selection pointer-events-none`}\n                        // Position lives in `animate` so an in-session value\n                        // change springs the marker to the picked row (the\n                        // selection acknowledgment). Safe against the reopen\n                        // slide: the `open &&` teardown means no marker\n                        // survives a close, and a fresh mount with\n                        // initial={false} renders snapped at these values.\n                        initial={false}\n                        animate={{\n                          top: checkedRect.top,\n                          left: checkedRect.left,\n                          width: checkedRect.width,\n                          height: checkedRect.height,\n                          opacity: 1,\n                        }}\n                        exit={{ opacity: 0, transition: spring.moderate.exit }}\n                        transition={{\n                          ...spring.moderate,\n                          opacity: { duration: spring.fast.duration },\n                        }}\n                      />\n                    )}\n                  </AnimatePresence>\n                )}\n\n                {/* Hover background */}\n                {open && (\n                  <AnimatePresence>\n                    {activeRect && (\n                      <motion.div\n                        key={sessionRef.current}\n                        className={`absolute ${shape.bg} bg-hover pointer-events-none`}\n                        initial={{\n                          opacity: 0,\n                          top: activeRect.top,\n                          left: activeRect.left,\n                          width: activeRect.width,\n                          height: activeRect.height,\n                        }}\n                        animate={{\n                          opacity: 1,\n                          top: activeRect.top,\n                          left: activeRect.left,\n                          width: activeRect.width,\n                          height: activeRect.height,\n                        }}\n                        exit={{ opacity: 0, transition: spring.fast.exit }}\n                        transition={{\n                          ...spring.fast,\n                          opacity: { duration: spring.fast.duration },\n                        }}\n                      />\n                    )}\n                  </AnimatePresence>\n                )}\n\n                {/* Focus ring */}\n                {open && (\n                  <AnimatePresence>\n                    {focusRect && (\n                      <motion.div\n                        className={`absolute ${shape.focusRing} pointer-events-none z-raised border border-focus-ring`}\n                        initial={false}\n                        animate={{\n                          left: focusRect.left - 2,\n                          top: focusRect.top - 2,\n                          width: focusRect.width + 4,\n                          height: focusRect.height + 4,\n                        }}\n                        exit={{ opacity: 0, transition: spring.fast.exit }}\n                        transition={{\n                          ...spring.fast,\n                          opacity: { duration: spring.fast.duration },\n                        }}\n                      />\n                    )}\n                  </AnimatePresence>\n                )}\n\n                {children}\n              </SelectPrimitive.Popup>\n            </SelectContentContext.Provider>\n          </motion.div>\n        </SelectPrimitive.Positioner>\n      </SelectPrimitive.Portal>\n    );\n  }\n);\n\nSelectContent.displayName = \"SelectContent\";\n\n// ---------------------------------------------------------------------------\n// SelectItem\n// ---------------------------------------------------------------------------\n\nconst selectItemClassName =\n  \"relative z-content flex h-control-md shrink-0 items-center gap-2 px-2 text-body cursor-pointer outline-none select-none transition-[color] duration-fast\";\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconComponent;\n  index: number;\n  value: string;\n  disabled?: boolean;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      icon: Icon,\n      value,\n      index,\n      disabled = false,\n      ...props\n    },\n    ref\n  ) => {\n    const selectCtx = useSelectContext();\n    const contentCtx = useContext(SelectContentContext);\n    const internalRef = useRef<HTMLDivElement>(null);\n    const shape = useShape();\n    const hasMounted = useRef(false);\n\n    useEffect(() => {\n      hasMounted.current = true;\n    }, []);\n\n    // Register with proximity hover. Depends on the (stable) registerItem\n    // rather than the content context, which is rebuilt on every activeIndex\n    // change: keying the effect to the whole context re-ran it per mousemove,\n    // unregistering and re-registering every row and so keeping the hook's\n    // measurement permanently unsettled while the pointer moved.\n    const registerItem = contentCtx?.registerItem;\n    useEffect(() => {\n      if (!registerItem) return;\n      registerItem(index, internalRef.current);\n      return () => registerItem(index, null);\n    }, [index, registerItem]);\n\n    const isActive = contentCtx?.activeIndex === index;\n    const isChecked = selectCtx.value === value;\n    const skipAnimation = !hasMounted.current;\n\n    return (\n      <SelectPrimitive.Item\n        value={value}\n        disabled={disabled}\n        label={typeof children === \"string\" ? children : undefined}\n        render={\n          <div\n            ref={(node: HTMLDivElement | null) => {\n              (\n                internalRef as React.MutableRefObject<HTMLDivElement | null>\n              ).current = node;\n              if (typeof ref === \"function\") ref(node);\n              else if (ref)\n                (ref as React.MutableRefObject<HTMLDivElement | null>).current =\n                  node;\n            }}\n            data-proximity-index={index}\n            data-value={value}\n            className={cn(\n              // Fixed height (was py-2 around a 19.5px line box ≈ 35.5px) so\n              // Keep rows consistent while long popups scroll.\n              // shrink-0: the popup is a max-height flex column, so without it\n              // a long list compresses rows to fit instead of scrolling.\n              selectItemClassName,\n              shape.item,\n              isActive || isChecked\n                ? \"text-fg-default\"\n                : \"text-fg-muted\",\n              disabled && \"opacity-50 pointer-events-none\",\n              className\n            )}\n            {...props}\n          />\n        }\n      >\n        {Icon && (\n          <Icon\n            size={16}\n            strokeWidth={isActive || isChecked ? 2 : 1.5}\n            className=\"shrink-0 transition-[color,stroke-width] duration-fast\"\n          />\n        )}\n\n        <SelectPrimitive.ItemText\n          render={<span className=\"flex-1 min-w-0 truncate\" />}\n        >\n          {children}\n        </SelectPrimitive.ItemText>\n\n        {/* Always-rendered fixed slot so the check appearing/disappearing\n            never changes the row's intrinsic width — without it the whole\n            popup resizes when a selection lands. */}\n        <span aria-hidden className=\"shrink-0 w-4 h-4\">\n          <AnimatePresence>\n            {isChecked && (\n              <motion.svg\n                key=\"check\"\n                width={16}\n                height={16}\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"text-fg-brand\"\n                initial={{ opacity: 1 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 1 }}\n              >\n                <motion.path\n                  d=\"M4 12L9 17L20 6\"\n                  initial={{ pathLength: skipAnimation ? 1 : 0 }}\n                  animate={{\n                    pathLength: 1,\n                    transition: { duration: spring.fast.duration, ease: \"easeOut\" },\n                  }}\n                  exit={{\n                    pathLength: 0,\n                    transition: { duration: 0.04, ease: \"easeIn\" },\n                  }}\n                />\n              </motion.svg>\n            )}\n          </AnimatePresence>\n        </span>\n      </SelectPrimitive.Item>\n    );\n  }\n);\n\nSelectItem.displayName = \"SelectItem\";\n\n// ---------------------------------------------------------------------------\n// SelectGroup + SelectLabel + SelectSeparator\n// ---------------------------------------------------------------------------\n\nfunction SelectGroup({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div role=\"group\" className={className} {...props}>\n      {children}\n    </div>\n  );\n}\n\nSelectGroup.displayName = \"SelectGroup\";\n\nconst SelectLabel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"px-2 py-1.5 shrink-0 text-label text-fg-subtle\",\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nSelectLabel.displayName = \"SelectLabel\";\n\nconst SelectSeparator = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    className={cn(\"my-1 -mx-1 h-px shrink-0 bg-border-subtle\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n\n// ---------------------------------------------------------------------------\n// Exports\n// ---------------------------------------------------------------------------\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectGroup,\n  SelectLabel,\n  SelectSeparator,\n  selectItemClassName,\n  triggerVariants,\n};\n\nexport type { SelectProps, SelectTriggerProps, SelectContentProps, SelectItemProps };\n",
      "type": "registry:ui",
      "target": "components/ui/select.tsx"
    }
  ],
  "type": "registry:ui"
}