50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T627b,"use client" /** * Composable animated select (gradient rim, frosted fill, staggered label, trailing * chevron / check / spinner). API mirrors `components/ui/select.tsx`: `HaloSelect` * (root), `HaloSelectTrigger`, `HaloSelectValue`, `HaloSelectContent`, * `HaloSelectItem`, plus group/label/scroll/separator aliases. */ import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, type ComponentProps, type ReactNode, } from "react" import { Select as SelectPrimitive, type SelectRoot, } from "@base-ui/react/select" import { Check, ChevronDown } from "lucide-react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" import { Select, SelectGroup, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectContent as UiSelectContent, } from "@/registry/default/ui/base-select" const LABEL_STAGGER_SEC = 0.018 const LABEL_CHAR_DURATION_SEC = 0.16 const TRAILING_ACTION_DURATION_SEC = 0.2 const LIST_STAGGER_STEP_SEC = 0.055 const LIST_STAGGER_CAP = 9 const SELECTION_FLASH_MS = 560 interface BorderGlowConfig { opacityIdle: number primaryBg: string secondaryBg: string tertiaryBg: string primaryLeft: string[] secondaryLeft: string[] tertiaryLeft: string[] durationMain: number durationSec: number durationTer: number } export interface PolishedSelectItem { value: string label: string disabled?: boolean } type SelectValueChangeDetails = Parameters< NonNullable["onValueChange"]> >[1] interface HaloSelectContextValue { translucent: boolean isLoading: boolean showSelectionFlash: boolean reduceMotion: boolean open: boolean setOpen: (open: boolean) => void isFocused: boolean setIsFocused: (focused: boolean) => void listBurst: number labelStagger: { key: number; text: string } showStaggerOverlay: boolean placeholder: string borderGlow: BorderGlowConfig trailingMode: "spinner" | "check" | "chevron" fieldId: string } const HaloSelectContext = createContext(null) function useHaloSelect() { const ctx = useContext(HaloSelectContext) if (!ctx) { throw new Error( "Animated select components must be used within ." ) } return ctx } function SelectStaggeredGlyphLine({ text, animateKey, reduceMotion, className, }: { text: string animateKey: number reduceMotion: boolean className?: string }) { const chars = useMemo(() => { const counts = new Map() return Array.from(text, (char) => { const count = counts.get(char) ?? 0 counts.set(char, count + 1) return { char, key: `${char}-${count}` } }) }, [text]) return ( {chars.map((glyph) => ( {glyph.char} ))} ) } function TrailingSpinner({ className, reduceMotion, }: { className?: string reduceMotion: boolean }) { return ( ) } const trailingMotionTransition = (reduceMotion: boolean) => ({ duration: reduceMotion ? 0 : TRAILING_ACTION_DURATION_SEC, ease: "easeOut" as const, }) const trailingCrossfade = (reduceMotion: boolean) => ({ exit: { opacity: reduceMotion ? 1 : 0, scale: reduceMotion ? 1 : 0.25, filter: reduceMotion ? "none" : "blur(4px)", }, initial: { opacity: reduceMotion ? 1 : 0, scale: reduceMotion ? 1 : 0.25, filter: reduceMotion ? "none" : "blur(4px)", }, }) const trailingEnter = (reduceMotion: boolean) => ({ opacity: 1, scale: 1, filter: reduceMotion ? "none" : "blur(0px)", }) /** Raised “thumb” surface — radius = trigger inner (~10px) − inset so corners don’t crowd the rim */ const trailingThumbSurface = cn( "rounded-[6px] bg-background", "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)]", "ring-1 ring-black/8 dark:ring-white/12", "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)]", "fine-hover:group-hover/select:ring-2 fine-hover:group-hover/select:ring-ring/20" ) function resolveTrailingMode( isLoading: boolean, selectionFlash: boolean, showSelectionFlash: boolean, reduceMotion: boolean ): "spinner" | "check" | "chevron" { if (isLoading) { return "spinner" } if (selectionFlash && showSelectionFlash && !reduceMotion) { return "check" } return "chevron" } /** Inset 1px inside `rounded-xl` shell → inner radius 12px − 1px = 11px (concentric with trigger). */ function SelectGradientUnderlay({ borderGlow, translucent, reduceMotion, }: { borderGlow: BorderGlowConfig translucent: boolean reduceMotion: boolean }) { return (

{translucent ? (

) : null}

) } export type HaloSelectProps = Omit< ComponentProps, "children" | "onValueChange" > & { children: ReactNode /** Frosted glass style on the trigger track */ translucent?: boolean isLoading?: boolean showSelectionFlash?: boolean /** Shown when no value is selected; also forwarded to `HaloSelectValue` via context */ placeholder?: string className?: string onValueChange?: ( value: unknown, eventDetails: SelectValueChangeDetails ) => void } function staggerDurationMs(text: string, reduceMotion: boolean): number { if (reduceMotion || text.length === 0) { return 0 } const n = text.length const runSec = (n - 1) * LABEL_STAGGER_SEC + LABEL_CHAR_DURATION_SEC return runSec * 1000 + 80 } /** * Root: Base UI `Select` plus internal context for stagger, rim, and trailing indicator. * Compose with `HaloSelectTrigger`, `HaloSelectContent`, and items — same idea as * [`Select`](components/ui/select.tsx) + `SelectTrigger` + `SelectContent`. */ export function HaloSelect({ children, translucent = false, isLoading = false, showSelectionFlash = true, placeholder = "Select an option", className, value: valueProp, defaultValue, onValueChange, onOpenChange: onOpenChangeUser, ...selectProps }: HaloSelectProps) { const reduceMotion = useReducedMotion() ?? false const generatedId = useId() const fieldId = selectProps.id ?? generatedId const [open, setOpen] = useState(false) const [isFocused, setIsFocused] = useState(false) const [listBurst, setListBurst] = useState(0) const [labelStagger, setLabelStagger] = useState({ key: 0, text: "" }) const [isStaggering, setIsStaggering] = useState(false) const [selectionFlash, setSelectionFlash] = useState(false) const flashTimerRef = useRef(null) const isControlled = valueProp !== undefined const isActive = isFocused || open const showBlobTranslucent = translucent const borderGlow = useMemo((): BorderGlowConfig => { let idleOpacity: number if (showBlobTranslucent) { idleOpacity = isActive ? 0.92 : 0.76 } else { idleOpacity = isActive ? 0.82 : 0.58 } return { opacityIdle: idleOpacity, primaryBg: "linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)", secondaryBg: "linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)", tertiaryBg: "linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)", primaryLeft: ["-5%", "75%", "-5%"], secondaryLeft: ["65%", "10%", "65%"], tertiaryLeft: ["25%", "55%", "25%"], durationMain: 6, durationSec: 5, durationTer: 4, } }, [showBlobTranslucent, isActive]) useEffect(() => { if (open) { setListBurst((b) => b + 1) } }, [open]) useEffect(() => { return () => { if (flashTimerRef.current) { window.clearTimeout(flashTimerRef.current) } } }, []) useEffect(() => { const text = labelStagger.text if (reduceMotion || !text || open) { setIsStaggering(false) return } setIsStaggering(true) const ms = staggerDurationMs(text, reduceMotion) const t = window.setTimeout(() => setIsStaggering(false), ms) return () => window.clearTimeout(t) }, [labelStagger, open, reduceMotion]) const handleValueChange = useCallback( (next: unknown, eventDetails: SelectValueChangeDetails) => { onValueChange?.(next, eventDetails) if ( next && typeof next === "object" && "label" in next && typeof (next as PolishedSelectItem).label === "string" ) { setLabelStagger((s) => ({ key: s.key + 1, text: (next as PolishedSelectItem).label, })) if (showSelectionFlash && !reduceMotion) { if (flashTimerRef.current) { window.clearTimeout(flashTimerRef.current) } setSelectionFlash(true) flashTimerRef.current = window.setTimeout(() => { setSelectionFlash(false) flashTimerRef.current = null }, SELECTION_FLASH_MS) } } else { setLabelStagger({ key: 0, text: "" }) } }, [onValueChange, reduceMotion, showSelectionFlash] ) const showStaggerOverlay = Boolean(labelStagger.text) && isStaggering && !open && !reduceMotion const trailingMode = resolveTrailingMode( isLoading, selectionFlash, showSelectionFlash, reduceMotion ) const contextValue = useMemo( (): HaloSelectContextValue => ({ translucent: showBlobTranslucent, isLoading, showSelectionFlash, reduceMotion, open, setOpen, isFocused, setIsFocused, listBurst, labelStagger, showStaggerOverlay, placeholder, borderGlow, trailingMode, fieldId, }), [ showBlobTranslucent, isLoading, showSelectionFlash, reduceMotion, open, isFocused, listBurst, labelStagger, showStaggerOverlay, placeholder, borderGlow, trailingMode, fieldId, ] ) return (

) } export type HaloSelectTriggerProps = SelectPrimitive.Trigger.Props /** * Gradient rim + pill trigger shell. Place `HaloSelectValue` and * `HaloSelectTrailingIndicator` inside (same role as `SelectTrigger` + value + icon). */ export function HaloSelectTrigger({ className, children, onBlur, onFocus, ...props }: HaloSelectTriggerProps) { const { translucent, isLoading, open, reduceMotion, isFocused, setIsFocused, borderGlow, fieldId, } = useHaloSelect() const ringActive = isFocused || open return (

{ setIsFocused(false) onBlur?.(e) }} onFocus={(e) => { setIsFocused(true) onFocus?.(e) }} style={{ background: translucent ? "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%)" : "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%)", ...props.style, }} {...props} type="button" > {children}

) } export function HaloSelectValue({ className, placeholder: placeholderProp, ...props }: SelectPrimitive.Value.Props) { const { placeholder: contextPlaceholder, showStaggerOverlay, labelStagger, reduceMotion, } = useHaloSelect() return (

{showStaggerOverlay && ( )}

) } /** Chevron / check / spinner aligned with the trigger (like `SelectPrimitive.Icon` usage). */ export function HaloSelectTrailingIndicator({ className, }: { className?: string }) { const { trailingMode, reduceMotion, open } = useHaloSelect() const cross = trailingCrossfade(reduceMotion) const transition = trailingMotionTransition(reduceMotion) return (

{/* Thumb shell stays static; only the glyph crossfades (enter/exit). `initial` must not be false on animated children so the first paint is not stuck invisible. */}

{trailingMode === "spinner" && ( )} {trailingMode === "check" && ( )} {trailingMode === "chevron" && ( )}

) } export function HaloSelectContent({ className, side = "bottom", sideOffset = 6, align = "start", ...props }: ComponentProps) { return ( ) } export function HaloSelectItem({ className, children, index = 0, label, value, ...props }: SelectPrimitive.Item.Props & { index?: number }) { const { listBurst, reduceMotion } = useHaloSelect() const capped = Math.min(index, LIST_STAGGER_CAP) const delay = reduceMotion ? 0 : capped * LIST_STAGGER_STEP_SEC const valueKey = value !== undefined && value !== null && typeof value === "object" && "value" in (value as PolishedSelectItem) ? (value as PolishedSelectItem).value : String(value) return ( {children} ) } export const HaloSelectGroup = SelectGroup export const HaloSelectLabel = SelectLabel export const HaloSelectScrollUpButton = SelectScrollUpButton export const HaloSelectScrollDownButton = SelectScrollDownButton export const HaloSelectSeparator = SelectSeparator 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":["https://cult-ui.com/r/base-select.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/halo-select.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]