{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-select",
  "type": "registry:ui",
  "description": "Composable animated select with gradient rim, frosted fill, and staggered label",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://cult-ui.com/r/base-select.json"
  ],
  "files": [
    {
      "path": "registry/default/ui/halo-select.tsx",
      "content": "\"use client\"\n\n/**\n * Composable animated select (gradient rim, frosted fill, staggered label, trailing\n * chevron / check / spinner). API mirrors `components/ui/select.tsx`: `HaloSelect`\n * (root), `HaloSelectTrigger`, `HaloSelectValue`, `HaloSelectContent`,\n * `HaloSelectItem`, plus group/label/scroll/separator aliases.\n */\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\"\nimport {\n  Select as SelectPrimitive,\n  type SelectRoot,\n} from \"@base-ui/react/select\"\nimport { Check, ChevronDown } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Select,\n  SelectGroup,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectContent as UiSelectContent,\n} from \"@/registry/default/ui/base-select\"\n\nconst LABEL_STAGGER_SEC = 0.018\nconst LABEL_CHAR_DURATION_SEC = 0.16\nconst TRAILING_ACTION_DURATION_SEC = 0.2\nconst LIST_STAGGER_STEP_SEC = 0.055\nconst LIST_STAGGER_CAP = 9\nconst SELECTION_FLASH_MS = 560\n\ninterface BorderGlowConfig {\n  opacityIdle: number\n  primaryBg: string\n  secondaryBg: string\n  tertiaryBg: string\n  primaryLeft: string[]\n  secondaryLeft: string[]\n  tertiaryLeft: string[]\n  durationMain: number\n  durationSec: number\n  durationTer: number\n}\n\nexport interface PolishedSelectItem {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\ntype SelectValueChangeDetails = Parameters<\n  NonNullable<SelectRoot.Props<PolishedSelectItem>[\"onValueChange\"]>\n>[1]\n\ninterface HaloSelectContextValue {\n  translucent: boolean\n  isLoading: boolean\n  showSelectionFlash: boolean\n  reduceMotion: boolean\n  open: boolean\n  setOpen: (open: boolean) => void\n  isFocused: boolean\n  setIsFocused: (focused: boolean) => void\n  listBurst: number\n  labelStagger: { key: number; text: string }\n  showStaggerOverlay: boolean\n  placeholder: string\n  borderGlow: BorderGlowConfig\n  trailingMode: \"spinner\" | \"check\" | \"chevron\"\n  fieldId: string\n}\n\nconst HaloSelectContext = createContext<HaloSelectContextValue | null>(null)\n\nfunction useHaloSelect() {\n  const ctx = useContext(HaloSelectContext)\n  if (!ctx) {\n    throw new Error(\n      \"Animated select components must be used within <HaloSelect>.\"\n    )\n  }\n  return ctx\n}\n\nfunction SelectStaggeredGlyphLine({\n  text,\n  animateKey,\n  reduceMotion,\n  className,\n}: {\n  text: string\n  animateKey: number\n  reduceMotion: boolean\n  className?: string\n}) {\n  const chars = useMemo(() => {\n    const counts = new Map<string, number>()\n    return Array.from(text, (char) => {\n      const count = counts.get(char) ?? 0\n      counts.set(char, count + 1)\n      return { char, key: `${char}-${count}` }\n    })\n  }, [text])\n\n  return (\n    <motion.span\n      animate=\"visible\"\n      className={className}\n      initial=\"hidden\"\n      key={animateKey}\n      variants={{\n        hidden: {},\n        visible: {\n          transition: {\n            staggerChildren: reduceMotion ? 0 : LABEL_STAGGER_SEC,\n          },\n        },\n      }}\n    >\n      {chars.map((glyph) => (\n        <motion.span\n          className=\"inline-block whitespace-pre\"\n          key={glyph.key}\n          transition={{\n            duration: reduceMotion ? 0 : LABEL_CHAR_DURATION_SEC,\n            ease: \"easeOut\",\n          }}\n          variants={{\n            hidden: { opacity: reduceMotion ? 1 : 0 },\n            visible: { opacity: 1 },\n          }}\n        >\n          {glyph.char}\n        </motion.span>\n      ))}\n    </motion.span>\n  )\n}\n\nfunction TrailingSpinner({\n  className,\n  reduceMotion,\n}: {\n  className?: string\n  reduceMotion: boolean\n}) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex origin-center text-muted-foreground\",\n        !reduceMotion && \"animate-spin\",\n        className\n      )}\n    >\n      <svg\n        aria-hidden=\"true\"\n        className=\"h-3.5 w-3.5\"\n        focusable=\"false\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle\n          className=\"opacity-[0.22]\"\n          cx=\"12\"\n          cy=\"12\"\n          fill=\"none\"\n          r=\"9\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.25\"\n        />\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          fill=\"none\"\n          r=\"9\"\n          stroke=\"currentColor\"\n          strokeDasharray=\"14 42\"\n          strokeLinecap=\"round\"\n          strokeWidth=\"2.25\"\n        />\n      </svg>\n    </span>\n  )\n}\n\nconst trailingMotionTransition = (reduceMotion: boolean) => ({\n  duration: reduceMotion ? 0 : TRAILING_ACTION_DURATION_SEC,\n  ease: \"easeOut\" as const,\n})\n\nconst trailingCrossfade = (reduceMotion: boolean) => ({\n  exit: {\n    opacity: reduceMotion ? 1 : 0,\n    scale: reduceMotion ? 1 : 0.25,\n    filter: reduceMotion ? \"none\" : \"blur(4px)\",\n  },\n  initial: {\n    opacity: reduceMotion ? 1 : 0,\n    scale: reduceMotion ? 1 : 0.25,\n    filter: reduceMotion ? \"none\" : \"blur(4px)\",\n  },\n})\n\nconst trailingEnter = (reduceMotion: boolean) => ({\n  opacity: 1,\n  scale: 1,\n  filter: reduceMotion ? \"none\" : \"blur(0px)\",\n})\n\n/** Raised “thumb” surface — radius = trigger inner (~10px) − inset so corners don’t crowd the rim */\nconst trailingThumbSurface = cn(\n  \"rounded-[6px] bg-background\",\n  \"shadow-[0_1px_0_rgba(255,255,255,0.85)_inset,0_1px_2px_rgba(0,0,0,0.07),0_2px_10px_rgba(0,0,0,0.05)]\",\n  \"ring-1 ring-black/8 dark:ring-white/12\",\n  \"dark:shadow-[0_1px_0_rgba(255,255,255,0.12)_inset,0_1px_3px_rgba(0,0,0,0.45),0_2px_12px_rgba(0,0,0,0.35)]\",\n  \"fine-hover:group-hover/select:ring-2 fine-hover:group-hover/select:ring-ring/20\"\n)\n\nfunction resolveTrailingMode(\n  isLoading: boolean,\n  selectionFlash: boolean,\n  showSelectionFlash: boolean,\n  reduceMotion: boolean\n): \"spinner\" | \"check\" | \"chevron\" {\n  if (isLoading) {\n    return \"spinner\"\n  }\n  if (selectionFlash && showSelectionFlash && !reduceMotion) {\n    return \"check\"\n  }\n  return \"chevron\"\n}\n\n/** Inset 1px inside `rounded-xl` shell → inner radius 12px − 1px = 11px (concentric with trigger). */\nfunction SelectGradientUnderlay({\n  borderGlow,\n  translucent,\n  reduceMotion,\n}: {\n  borderGlow: BorderGlowConfig\n  translucent: boolean\n  reduceMotion: boolean\n}) {\n  return (\n    <div className=\"pointer-events-none absolute inset-0 overflow-hidden rounded-[11px]\">\n      {translucent ? (\n        <div\n          className={cn(\n            \"absolute inset-0\",\n            reduceMotion ? \"opacity-[0.38]\" : \"opacity-50\"\n          )}\n        >\n          <div\n            className=\"absolute inset-0 blur-2xl\"\n            style={{\n              background:\n                \"radial-gradient(90% 70% at 50% 100%, rgba(255,0,128,0.28), rgba(121,40,202,0.12) 48%, transparent 62%)\",\n            }}\n          />\n          <div\n            className=\"absolute inset-0 opacity-70 blur-xl dark:opacity-50\"\n            style={{\n              background:\n                \"radial-gradient(70% 55% at 30% 0%, rgba(0,212,255,0.22), rgba(0,112,243,0.08) 45%, transparent 58%)\",\n            }}\n          />\n        </div>\n      ) : null}\n      <motion.div\n        animate={{\n          opacity: borderGlow.opacityIdle * (translucent ? 0.72 : 1),\n        }}\n        className=\"absolute inset-x-0 bottom-0 h-1/2\"\n        transition={{ duration: 0.25, ease: \"easeOut\" }}\n      >\n        <motion.div\n          animate={{\n            left: borderGlow.primaryLeft,\n          }}\n          className=\"-bottom-4 absolute h-16 w-48 blur-xl\"\n          style={{\n            background: borderGlow.primaryBg,\n          }}\n          transition={{\n            duration: borderGlow.durationMain,\n            repeat: Number.POSITIVE_INFINITY,\n            ease: \"easeInOut\",\n          }}\n        />\n        <motion.div\n          animate={{\n            left: borderGlow.secondaryLeft,\n          }}\n          className=\"-bottom-3 absolute h-12 w-32 blur-lg\"\n          style={{\n            background: borderGlow.secondaryBg,\n          }}\n          transition={{\n            duration: borderGlow.durationSec,\n            repeat: Number.POSITIVE_INFINITY,\n            ease: \"easeInOut\",\n          }}\n        />\n        <motion.div\n          animate={{\n            left: borderGlow.tertiaryLeft,\n          }}\n          className=\"-bottom-2 absolute h-10 w-24 blur-lg\"\n          style={{\n            background: borderGlow.tertiaryBg,\n          }}\n          transition={{\n            duration: borderGlow.durationTer,\n            repeat: Number.POSITIVE_INFINITY,\n            ease: \"easeInOut\",\n          }}\n        />\n      </motion.div>\n    </div>\n  )\n}\n\nexport type HaloSelectProps = Omit<\n  ComponentProps<typeof Select>,\n  \"children\" | \"onValueChange\"\n> & {\n  children: ReactNode\n  /** Frosted glass style on the trigger track */\n  translucent?: boolean\n  isLoading?: boolean\n  showSelectionFlash?: boolean\n  /** Shown when no value is selected; also forwarded to `HaloSelectValue` via context */\n  placeholder?: string\n  className?: string\n  onValueChange?: (\n    value: unknown,\n    eventDetails: SelectValueChangeDetails\n  ) => void\n}\n\nfunction staggerDurationMs(text: string, reduceMotion: boolean): number {\n  if (reduceMotion || text.length === 0) {\n    return 0\n  }\n  const n = text.length\n  const runSec = (n - 1) * LABEL_STAGGER_SEC + LABEL_CHAR_DURATION_SEC\n  return runSec * 1000 + 80\n}\n\n/**\n * Root: Base UI `Select` plus internal context for stagger, rim, and trailing indicator.\n * Compose with `HaloSelectTrigger`, `HaloSelectContent`, and items — same idea as\n * [`Select`](components/ui/select.tsx) + `SelectTrigger` + `SelectContent`.\n */\nexport function HaloSelect({\n  children,\n  translucent = false,\n  isLoading = false,\n  showSelectionFlash = true,\n  placeholder = \"Select an option\",\n  className,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onOpenChange: onOpenChangeUser,\n  ...selectProps\n}: HaloSelectProps) {\n  const reduceMotion = useReducedMotion() ?? false\n  const generatedId = useId()\n  const fieldId = selectProps.id ?? generatedId\n  const [open, setOpen] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n  const [listBurst, setListBurst] = useState(0)\n  const [labelStagger, setLabelStagger] = useState({ key: 0, text: \"\" })\n  const [isStaggering, setIsStaggering] = useState(false)\n  const [selectionFlash, setSelectionFlash] = useState(false)\n  const flashTimerRef = useRef<number | null>(null)\n\n  const isControlled = valueProp !== undefined\n  const isActive = isFocused || open\n  const showBlobTranslucent = translucent\n\n  const borderGlow = useMemo((): BorderGlowConfig => {\n    let idleOpacity: number\n    if (showBlobTranslucent) {\n      idleOpacity = isActive ? 0.92 : 0.76\n    } else {\n      idleOpacity = isActive ? 0.82 : 0.58\n    }\n    return {\n      opacityIdle: idleOpacity,\n      primaryBg: \"linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)\",\n      secondaryBg: \"linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)\",\n      tertiaryBg: \"linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)\",\n      primaryLeft: [\"-5%\", \"75%\", \"-5%\"],\n      secondaryLeft: [\"65%\", \"10%\", \"65%\"],\n      tertiaryLeft: [\"25%\", \"55%\", \"25%\"],\n      durationMain: 6,\n      durationSec: 5,\n      durationTer: 4,\n    }\n  }, [showBlobTranslucent, isActive])\n\n  useEffect(() => {\n    if (open) {\n      setListBurst((b) => b + 1)\n    }\n  }, [open])\n\n  useEffect(() => {\n    return () => {\n      if (flashTimerRef.current) {\n        window.clearTimeout(flashTimerRef.current)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    const text = labelStagger.text\n    if (reduceMotion || !text || open) {\n      setIsStaggering(false)\n      return\n    }\n    setIsStaggering(true)\n    const ms = staggerDurationMs(text, reduceMotion)\n    const t = window.setTimeout(() => setIsStaggering(false), ms)\n    return () => window.clearTimeout(t)\n  }, [labelStagger, open, reduceMotion])\n\n  const handleValueChange = useCallback(\n    (next: unknown, eventDetails: SelectValueChangeDetails) => {\n      onValueChange?.(next, eventDetails)\n      if (\n        next &&\n        typeof next === \"object\" &&\n        \"label\" in next &&\n        typeof (next as PolishedSelectItem).label === \"string\"\n      ) {\n        setLabelStagger((s) => ({\n          key: s.key + 1,\n          text: (next as PolishedSelectItem).label,\n        }))\n        if (showSelectionFlash && !reduceMotion) {\n          if (flashTimerRef.current) {\n            window.clearTimeout(flashTimerRef.current)\n          }\n          setSelectionFlash(true)\n          flashTimerRef.current = window.setTimeout(() => {\n            setSelectionFlash(false)\n            flashTimerRef.current = null\n          }, SELECTION_FLASH_MS)\n        }\n      } else {\n        setLabelStagger({ key: 0, text: \"\" })\n      }\n    },\n    [onValueChange, reduceMotion, showSelectionFlash]\n  )\n\n  const showStaggerOverlay =\n    Boolean(labelStagger.text) && isStaggering && !open && !reduceMotion\n\n  const trailingMode = resolveTrailingMode(\n    isLoading,\n    selectionFlash,\n    showSelectionFlash,\n    reduceMotion\n  )\n\n  const contextValue = useMemo(\n    (): HaloSelectContextValue => ({\n      translucent: showBlobTranslucent,\n      isLoading,\n      showSelectionFlash,\n      reduceMotion,\n      open,\n      setOpen,\n      isFocused,\n      setIsFocused,\n      listBurst,\n      labelStagger,\n      showStaggerOverlay,\n      placeholder,\n      borderGlow,\n      trailingMode,\n      fieldId,\n    }),\n    [\n      showBlobTranslucent,\n      isLoading,\n      showSelectionFlash,\n      reduceMotion,\n      open,\n      isFocused,\n      listBurst,\n      labelStagger,\n      showStaggerOverlay,\n      placeholder,\n      borderGlow,\n      trailingMode,\n      fieldId,\n    ]\n  )\n\n  return (\n    <HaloSelectContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"relative inline-block w-max min-w-0 max-w-full\",\n          className\n        )}\n      >\n        <Select\n          {...selectProps}\n          defaultValue={\n            isControlled\n              ? undefined\n              : (defaultValue as PolishedSelectItem | undefined)\n          }\n          disabled={selectProps.disabled || isLoading}\n          onOpenChange={(nextOpen, eventDetails) => {\n            setOpen(nextOpen)\n            onOpenChangeUser?.(nextOpen, eventDetails)\n          }}\n          onValueChange={handleValueChange}\n          open={open}\n          value={isControlled ? (valueProp ?? null) : undefined}\n        >\n          {children}\n        </Select>\n      </div>\n    </HaloSelectContext.Provider>\n  )\n}\n\nexport type HaloSelectTriggerProps = SelectPrimitive.Trigger.Props\n\n/**\n * Gradient rim + pill trigger shell. Place `HaloSelectValue` and\n * `HaloSelectTrailingIndicator` inside (same role as `SelectTrigger` + value + icon).\n */\nexport function HaloSelectTrigger({\n  className,\n  children,\n  onBlur,\n  onFocus,\n  ...props\n}: HaloSelectTriggerProps) {\n  const {\n    translucent,\n    isLoading,\n    open,\n    reduceMotion,\n    isFocused,\n    setIsFocused,\n    borderGlow,\n    fieldId,\n  } = useHaloSelect()\n\n  const ringActive = isFocused || open\n\n  return (\n    <div className=\"relative w-fit max-w-full rounded-xl p-px\">\n      <SelectGradientUnderlay\n        borderGlow={borderGlow}\n        reduceMotion={reduceMotion}\n        translucent={translucent}\n      />\n      <SelectPrimitive.Trigger\n        aria-busy={isLoading || props[\"aria-busy\"]}\n        className={cn(\n          \"relative inline-flex min-h-11 min-w-34 max-w-[min(100%,20rem)] items-center gap-2 rounded-[11px] py-2 pr-2 pl-3 text-left\",\n          \"whitespace-nowrap antialiased\",\n          \"border border-[color-mix(in_oklch,var(--border)_72%,oklch(0.88_0.06_300))] bg-transparent\",\n          /* Shell stack: top inset highlight + contact shadow + soft lift — aligned with HaloSwitch / HaloBadge */\n          \"shadow-[0_1px_0_rgba(255,255,255,0.55)_inset,0_1px_2px_rgba(0,0,0,0.03),0_6px_18px_rgba(0,0,0,0.04)]\",\n          \"dark:border-border/80 dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_1px_2px_rgba(0,0,0,0.28),0_6px_22px_rgba(0,0,0,0.32)]\",\n          \"group/select outline-none transition-[background-color,backdrop-filter,border-color,box-shadow] duration-200 ease-out\",\n          \"fine-hover:hover:border-ring/50 fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_1px_3px_rgba(0,0,0,0.05),0_8px_22px_rgba(0,0,0,0.06)]\",\n          \"dark:fine-hover:hover:border-zinc-500/60 dark:fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.08)_inset,0_2px_4px_rgba(0,0,0,0.38),0_10px_28px_rgba(0,0,0,0.42)]\",\n          \"focus-visible:border-ring/80 focus-visible:ring-2 focus-visible:ring-ring/30\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"data-placeholder:text-muted-foreground\",\n          ringActive &&\n            \"border-ring/70 shadow-[0_1px_0_rgba(255,255,255,0.14)_inset,0_1px_2px_rgba(0,0,0,0.09),0_4px_14px_rgba(0,0,0,0.11)] dark:border-zinc-500/55 dark:shadow-[0_1px_0_rgba(255,255,255,0.08)_inset,0_1px_2px_rgba(0,0,0,0.42),0_4px_20px_rgba(0,0,0,0.48)]\",\n          translucent && \"backdrop-blur-xl backdrop-saturate-150\",\n          className\n        )}\n        data-slot=\"halo-select-trigger\"\n        disabled={props.disabled ?? isLoading}\n        id={props.id ?? fieldId}\n        onBlur={(e) => {\n          setIsFocused(false)\n          onBlur?.(e)\n        }}\n        onFocus={(e) => {\n          setIsFocused(true)\n          onFocus?.(e)\n        }}\n        style={{\n          background: translucent\n            ? \"linear-gradient(to bottom, color-mix(in oklch, var(--card) 82%, oklch(0.92 0.04 330)) 0%, color-mix(in oklch, var(--card) 78%, oklch(0.88 0.06 285)) 50%, color-mix(in oklch, var(--card) 76%, oklch(0.9 0.05 245)) 100%)\"\n            : \"linear-gradient(to bottom, color-mix(in oklch, var(--card) 95%, oklch(0.97 0.02 315)) 0%, color-mix(in oklch, var(--card) 93%, oklch(0.96 0.025 280)) 100%)\",\n          ...props.style,\n        }}\n        {...props}\n        type=\"button\"\n      >\n        {children}\n      </SelectPrimitive.Trigger>\n    </div>\n  )\n}\n\nexport function HaloSelectValue({\n  className,\n  placeholder: placeholderProp,\n  ...props\n}: SelectPrimitive.Value.Props) {\n  const {\n    placeholder: contextPlaceholder,\n    showStaggerOverlay,\n    labelStagger,\n    reduceMotion,\n  } = useHaloSelect()\n\n  return (\n    <div className=\"relative min-w-0 flex-1 text-sm/relaxed\">\n      <SelectPrimitive.Value\n        className={cn(\n          \"block min-w-0 flex-1 truncate bg-transparent text-foreground text-sm/relaxed\",\n          showStaggerOverlay && \"text-transparent\",\n          className\n        )}\n        data-slot=\"halo-select-value\"\n        placeholder={placeholderProp ?? contextPlaceholder}\n        {...props}\n      />\n      {showStaggerOverlay && (\n        <SelectStaggeredGlyphLine\n          animateKey={labelStagger.key}\n          className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center text-foreground\"\n          reduceMotion={reduceMotion}\n          text={labelStagger.text}\n        />\n      )}\n    </div>\n  )\n}\n\n/** Chevron / check / spinner aligned with the trigger (like `SelectPrimitive.Icon` usage). */\nexport function HaloSelectTrailingIndicator({\n  className,\n}: {\n  className?: string\n}) {\n  const { trailingMode, reduceMotion, open } = useHaloSelect()\n  const cross = trailingCrossfade(reduceMotion)\n  const transition = trailingMotionTransition(reduceMotion)\n\n  return (\n    <div className={cn(\"relative size-8 shrink-0\", className)}>\n      {/*\n        Thumb shell stays static; only the glyph crossfades (enter/exit). `initial` must\n        not be false on animated children so the first paint is not stuck invisible.\n      */}\n      <div\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute inset-0 flex items-center justify-center\",\n          trailingThumbSurface\n        )}\n      />\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <AnimatePresence mode=\"sync\">\n          {trailingMode === \"spinner\" && (\n            <motion.span\n              animate={trailingEnter(reduceMotion)}\n              aria-hidden\n              className=\"absolute inset-0 flex items-center justify-center text-muted-foreground\"\n              exit={cross.exit}\n              initial={cross.initial}\n              key=\"trail-spin\"\n              transition={transition}\n            >\n              <TrailingSpinner reduceMotion={reduceMotion} />\n            </motion.span>\n          )}\n          {trailingMode === \"check\" && (\n            <motion.span\n              animate={trailingEnter(reduceMotion)}\n              aria-hidden\n              className=\"absolute inset-0 flex items-center justify-center text-emerald-600 dark:text-emerald-400\"\n              exit={cross.exit}\n              initial={cross.initial}\n              key=\"trail-check\"\n              transition={transition}\n            >\n              <Check className=\"h-3.5 w-3.5\" strokeWidth={2.5} />\n            </motion.span>\n          )}\n          {trailingMode === \"chevron\" && (\n            <motion.span\n              animate={trailingEnter(reduceMotion)}\n              aria-hidden\n              className=\"absolute inset-0 flex items-center justify-center text-muted-foreground\"\n              exit={cross.exit}\n              initial={cross.initial}\n              key=\"trail-chevron\"\n              transition={transition}\n            >\n              <motion.span\n                animate={{\n                  rotate: !reduceMotion && open ? 180 : 0,\n                }}\n                className=\"inline-flex\"\n                transition={transition}\n              >\n                <ChevronDown className=\"h-3.5 w-3.5\" />\n              </motion.span>\n            </motion.span>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  )\n}\n\nexport function HaloSelectContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  ...props\n}: ComponentProps<typeof UiSelectContent>) {\n  return (\n    <UiSelectContent\n      {...props}\n      align={align}\n      alignItemWithTrigger={true}\n      className={cn(\n        \"max-h-72 w-(--anchor-width) min-w-(--anchor-width) rounded-xl border border-[color-mix(in_oklch,var(--border)_72%,oklch(0.88_0.06_300))] bg-popover/95\",\n        \"shadow-[0_1px_0_rgba(255,255,255,0.1)_inset,0_1px_2px_rgba(0,0,0,0.04),0_4px_14px_rgba(0,0,0,0.05)]\",\n        \"dark:border-border/80 dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_1px_2px_rgba(0,0,0,0.35),0_4px_20px_rgba(0,0,0,0.35)]\",\n        \"ring-1 ring-black/8 backdrop-blur-xl backdrop-saturate-150 dark:ring-white/12\",\n        \"data-closed:fade-out-0 data-open:fade-in-0 data-closed:animate-out data-open:animate-in\",\n        \"data-closed:zoom-out-95 data-open:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2\",\n        \"duration-150 ease-out\",\n        className\n      )}\n      side={side}\n      sideOffset={sideOffset}\n    />\n  )\n}\n\nexport function HaloSelectItem({\n  className,\n  children,\n  index = 0,\n  label,\n  value,\n  ...props\n}: SelectPrimitive.Item.Props & { index?: number }) {\n  const { listBurst, reduceMotion } = useHaloSelect()\n  const capped = Math.min(index, LIST_STAGGER_CAP)\n  const delay = reduceMotion ? 0 : capped * LIST_STAGGER_STEP_SEC\n  const valueKey =\n    value !== undefined &&\n    value !== null &&\n    typeof value === \"object\" &&\n    \"value\" in (value as PolishedSelectItem)\n      ? (value as PolishedSelectItem).value\n      : String(value)\n\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"relative flex min-h-11 w-full cursor-default select-none items-center gap-2 rounded-lg px-2.5 py-2.5\",\n        \"text-foreground text-sm antialiased outline-none\",\n        \"transition-[background-color,color,box-shadow] duration-150 ease-out\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        \"data-highlighted:shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] dark:data-highlighted:shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]\",\n        className\n      )}\n      data-slot=\"halo-select-item\"\n      label={label}\n      value={value}\n      {...props}\n    >\n      <motion.div\n        animate={{ filter: \"blur(0px)\", opacity: 1, y: 0 }}\n        className=\"flex w-full min-w-0 items-center gap-2\"\n        initial={\n          reduceMotion ? false : { filter: \"blur(4px)\", opacity: 0, y: 4 }\n        }\n        key={`${listBurst}-${valueKey}`}\n        transition={{\n          delay,\n          duration: 0.22,\n          ease: [0.2, 0, 0, 1],\n        }}\n      >\n        <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate text-pretty\">\n          {children}\n        </SelectPrimitive.ItemText>\n        <SelectPrimitive.ItemIndicator className=\"flex shrink-0 text-foreground\">\n          <Check\n            aria-hidden\n            className=\"h-3.5 w-3.5 opacity-90\"\n            strokeWidth={2.5}\n          />\n        </SelectPrimitive.ItemIndicator>\n      </motion.div>\n    </SelectPrimitive.Item>\n  )\n}\n\nexport const HaloSelectGroup = SelectGroup\nexport const HaloSelectLabel = SelectLabel\nexport const HaloSelectScrollUpButton = SelectScrollUpButton\nexport const HaloSelectScrollDownButton = SelectScrollDownButton\nexport const HaloSelectSeparator = SelectSeparator\n",
      "type": "registry:ui"
    }
  ]
}