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:T642f,"use client"; import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; import * as SelectPrimitive from "@radix-ui/react-select"; import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; const controlCornerClassName = "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]"; const controlCornerInheritClassName = "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]"; const selectThemeClassName = "[--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)]"; const selectTriggerClassName = cn( controlCornerClassName, "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)]" ); const selectPanelChromeClassName = cn( controlCornerClassName, "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)]" ); const selectItemClassName = cn( controlCornerClassName, "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" ); const selectItemHighlightClassName = cn( controlCornerInheritClassName, "absolute inset-0 -z-10 bg-accent/68" ); const selectListScrollbarClassName = "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"; const selectListThumbClassName = "relative rounded-full bg-muted-foreground/50 bg-[color:color-mix(in_oklch,var(--sel-muted-foreground),transparent_35%)]"; const MAX_MENU_HEIGHT = 320; const INSTANT_CLOSE_TRANSITION = { duration: 0 } as const; const POPUP_TRANSFORM_ORIGIN = "top center"; const SOFT_EASE = [0.22, 1, 0.36, 1] as const; const EXIT_EASE = [0.55, 0.06, 0.68, 0.19] as const; const FLUID_EASE = [0.16, 1, 0.3, 1] as const; const POPUP_EXIT_EASE = [0.4, 0, 0.6, 1] as const; const POPUP_SPRING = { type: "spring" as const, stiffness: 260, damping: 32, mass: 0.95, }; const CHECK_SPRING = { type: "spring", stiffness: 520, damping: 28, mass: 0.55, } as const; const PRESS_SPRING = { type: "spring", stiffness: 560, damping: 32, mass: 0.48, } as const; type SelectRootProps = React.ComponentPropsWithoutRef< typeof SelectPrimitive.Root >; type SelectProps = Omit< SelectRootProps, | "children" | "defaultOpen" | "defaultValue" | "onOpenChange" | "onValueChange" | "open" | "value" > & { children?: React.ReactNode; defaultOpen?: SelectRootProps["defaultOpen"]; defaultValue?: SelectRootProps["defaultValue"]; onOpenChange?: SelectRootProps["onOpenChange"]; onValueChange?: SelectRootProps["onValueChange"]; open?: SelectRootProps["open"]; value?: SelectRootProps["value"]; }; type SelectContextValue = { activeHighlightId: string; activeValue?: string; getItemIndex: () => number; itemVariants: typeof itemVariants; open: boolean; selectedValue?: string; setActiveValue: React.Dispatch>; skipExitAnimationRef: React.MutableRefObject; }; const RESIZE_OBSERVER_LOOP_ERROR = /ResizeObserver loop(?:\s+\w+)*|ResizeObserver loop limit exceeded/i; let resizeObserverPatchCount = 0; let nativeResizeObserver: typeof ResizeObserver | undefined; function isResizeObserverLoopError(message: string) { return RESIZE_OBSERVER_LOOP_ERROR.test(message); } function patchResizeObserverLoop() { if (typeof ResizeObserver === "undefined") { return; } if (resizeObserverPatchCount === 0) { nativeResizeObserver = window.ResizeObserver; window.ResizeObserver = class PatchedResizeObserver extends ( nativeResizeObserver ) { constructor(callback: ResizeObserverCallback) { super((entries, observer) => { requestAnimationFrame(() => { callback(entries, observer); }); }); } }; } resizeObserverPatchCount += 1; } function restoreResizeObserverLoopPatch() { if (resizeObserverPatchCount === 0) { return; } resizeObserverPatchCount -= 1; if (resizeObserverPatchCount === 0 && nativeResizeObserver) { window.ResizeObserver = nativeResizeObserver; nativeResizeObserver = undefined; } } function useSuppressResizeObserverLoopError() { React.useEffect(() => { const onError = (event: ErrorEvent) => { if (!isResizeObserverLoopError(event.message)) { return; } event.preventDefault(); event.stopImmediatePropagation(); }; const onUnhandledRejection = (event: PromiseRejectionEvent) => { const message = event.reason instanceof Error ? event.reason.message : String(event.reason ?? ""); if (!isResizeObserverLoopError(message)) { return; } event.preventDefault(); event.stopImmediatePropagation(); }; patchResizeObserverLoop(); window.addEventListener("error", onError, true); window.addEventListener("unhandledrejection", onUnhandledRejection, true); return () => { restoreResizeObserverLoopPatch(); window.removeEventListener("error", onError, true); window.removeEventListener( "unhandledrejection", onUnhandledRejection, true ); }; }, []); } const SelectContext = React.createContext(null); function useSelectContext(componentName: string) { const context = React.useContext(SelectContext); if (!context) { throw new Error(`${componentName} must be used inside Select`); } return context; } const itemVariants = { exit: (index: number) => ({ opacity: 0, y: -2, transition: { delay: Math.min(index, 4) * 0.01, duration: 0.12, ease: EXIT_EASE, }, }), hidden: { opacity: 0, y: -4, }, visible: (index: number) => ({ opacity: 1, y: 0, transition: { delay: Math.min(index, 4) * 0.02, duration: 0.18, ease: SOFT_EASE, }, }), }; const popupMotion = { animate: { opacity: 1, scale: 1, y: 0 }, closed: { opacity: 0, scale: 0.985, y: -5 }, initial: { opacity: 0, scale: 0.985, y: -5 }, openTransition: { opacity: { duration: 0.34, ease: FLUID_EASE }, scale: POPUP_SPRING, y: POPUP_SPRING, }, closedTransition: { opacity: { duration: 0.22, ease: POPUP_EXIT_EASE }, scale: { duration: 0.22, ease: POPUP_EXIT_EASE }, y: { duration: 0.22, ease: POPUP_EXIT_EASE }, }, }; const chevronTransition = { type: "spring" as const, stiffness: 360, damping: 32, mass: 0.82, }; const HIGHLIGHT_SPRING = { type: "spring" as const, stiffness: 380, damping: 41, mass: 0.82, }; function composeEventHandlers( originalEventHandler: ((event: Event) => void) | undefined, eventHandler: (event: Event) => void ) { return (event: Event) => { originalEventHandler?.(event); eventHandler(event); }; } function isEmptySelectValue(value: string | undefined | null) { return value == null || value === ""; } function toPrimitiveSelectValue(value: string | undefined | null) { return isEmptySelectValue(value) ? undefined : value; } const selectValueClassName = "flex min-w-0 flex-1 items-center gap-2 truncate text-left [&_svg]:shrink-0"; function resolveItemContent({ children, icon, }: { children: React.ReactNode; icon?: React.ReactNode; }) { if (!icon) { return children; } return ( <> {icon} {children} ); } function resolveItemText({ children, label, textValue, value, }: { children?: React.ReactNode; label?: string; textValue?: string; value: string; }) { return ( label ?? textValue ?? (typeof children === "string" ? children : undefined) ?? value ); } function Select(allProps: SelectProps) { const { children, defaultOpen = false, defaultValue, onOpenChange, onValueChange, open: openProp, value: valueProp, ...props } = allProps; const skipExitAnimationRef = React.useRef(false); const isOpenControlled = openProp !== undefined; const isValueControlled = Object.hasOwn(allProps, "value"); const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue); const [activeValue, setActiveValue] = React.useState(); const nextItemIndexRef = React.useRef(0); const openStateRef = React.useRef(false); const open = isOpenControlled ? openProp : uncontrolledOpen; const selectedValue = isValueControlled ? valueProp : uncontrolledValue; const activeHighlightId = React.useId(); if (open && !openStateRef.current) { nextItemIndexRef.current = 0; } openStateRef.current = open; useSuppressResizeObserverLoopError(); const handleOpenChange = React.useCallback< NonNullable >( (nextOpen) => { if (nextOpen) { skipExitAnimationRef.current = false; } if (!isOpenControlled) { setUncontrolledOpen(nextOpen); } if (!nextOpen) { setActiveValue(undefined); } onOpenChange?.(nextOpen); }, [isOpenControlled, onOpenChange] ); const handleValueChange = React.useCallback< NonNullable >( (nextValue) => { if (!isValueControlled) { setUncontrolledValue(nextValue); } onValueChange?.(nextValue); }, [isValueControlled, onValueChange] ); const getItemIndex = React.useCallback(() => { const itemIndex = nextItemIndexRef.current; nextItemIndexRef.current += 1; return itemIndex; }, []); const contextValue = React.useMemo( () => ({ activeHighlightId, activeValue, getItemIndex, itemVariants, open, selectedValue, setActiveValue, skipExitAnimationRef, }), [activeHighlightId, activeValue, getItemIndex, open, selectedValue] ); return ( {children} ); } function SelectGroup({ className, ...props }: React.ComponentPropsWithoutRef) { return ( ); } type SelectValueProps = Omit< React.ComponentPropsWithoutRef, "children" > & { children?: React.ReactNode | ((value: string | undefined) => React.ReactNode); }; function SelectValue({ children, className, placeholder, ...props }: SelectValueProps) { const { selectedValue } = useSelectContext("SelectValue"); const hasValue = !isEmptySelectValue(selectedValue); const { asChild: _asChild, ...valueProps } = props; const resolvedValue = hasValue && typeof selectedValue === "string" ? selectedValue : undefined; const resolvedChildren = typeof children === "function" ? children(resolvedValue) : children; if (!hasValue) { return ( {placeholder} ); } return ( {resolvedChildren ?? resolvedValue} ); } function SelectFieldChrome({ children, className, description, descriptionClassName, descriptionId, label, labelClassName, triggerId, }: { children: React.ReactNode; className?: string; description?: React.ReactNode; descriptionClassName?: string; descriptionId?: string; label?: React.ReactNode; labelClassName?: string; triggerId: string; }) { if (!(label || description)) { return <>{children}; } return (

{label ? ( {label} ) : null} {description ? (

{description}

) : null} {children}

); } function SelectTrigger({ children, className, description, descriptionClassName, id: idProp, label, labelClassName, size = "default", ...props }: React.ComponentPropsWithoutRef & { description?: React.ReactNode; descriptionClassName?: string; label?: React.ReactNode; labelClassName?: string; size?: "sm" | "default"; }) { const { open } = useSelectContext("SelectTrigger"); const generatedId = React.useId(); const triggerId = idProp ?? generatedId; const descriptionId = description ? `${triggerId}-description` : undefined; const hasFieldChrome = Boolean(label || description); const describedBy = [props["aria-describedby"], descriptionId] .filter(Boolean) .join(" "); return ( ); } function SelectContent({ align = "start", avoidCollisions = false, children, className, collisionPadding = 12, position = "popper", side = "bottom", sideOffset = 8, style, ...props }: React.ComponentPropsWithoutRef) { const { open, setActiveValue, skipExitAnimationRef } = useSelectContext("SelectContent"); const panelVariants = { closed: { ...popupMotion.closed, transition: popupMotion.closedTransition, }, closedInstant: { opacity: popupMotion.closed.opacity, scale: popupMotion.closed.scale, y: popupMotion.closed.y, transition: INSTANT_CLOSE_TRANSITION, }, open: { ...popupMotion.animate, transition: popupMotion.openTransition, }, }; return ( { skipExitAnimationRef.current = false; }} > {open ? ( )} >

): "closed" | "closedInstant" => custom.current ? "closedInstant" : "closed") as never } initial="closed" style={{ transformOrigin: POPUP_TRANSFORM_ORIGIN }} variants={panelVariants} > { setActiveValue(undefined); }} > {children}

) : null} ); } function SelectLabel({ className, ...props }: React.ComponentPropsWithoutRef) { return ( ); } function SelectItem({ children, className, disabled = false, icon, label, textValue, value, ...props }: React.ComponentPropsWithoutRef & { icon?: React.ReactNode; label?: string; textValue?: string; }) { const { activeHighlightId, activeValue, getItemIndex, itemVariants, selectedValue, setActiveValue, skipExitAnimationRef, } = useSelectContext("SelectItem"); const resolvedText = resolveItemText({ children, label, textValue, value }); const itemContent = resolveItemContent({ children: children ?? resolvedText, icon, }); const isActive = !disabled && value === activeValue; const isSelected = value === selectedValue; const itemIndexRef = React.useRef(null); if (itemIndexRef.current === null) { itemIndexRef.current = getItemIndex(); } return ( { skipExitAnimationRef.current = true; }} textValue={resolvedText} value={value} {...props} > { if (!disabled) { setActiveValue(value); } })} onPointerMove={composeEventHandlers(props.onPointerMove, () => { if (!disabled) { setActiveValue(value); } })} transition={PRESS_SPRING} variants={itemVariants} whileTap={disabled ? undefined : { scale: 0.96 }} > {isActive ? ( ) : null} {itemContent} {isSelected ? ( ) : null} ); } function SelectSeparator({ className, ...props }: React.ComponentPropsWithoutRef) { return ( ); } function SelectScrollUpButton({ className, ...props }: React.ComponentPropsWithoutRef) { return ( ); } function SelectScrollDownButton({ className, ...props }: React.ComponentPropsWithoutRef) { return ( ); } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, }; 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","@radix-ui/react-scroll-area",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-scroll-area","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":"@radix-ui/react-scroll-area"}]]}]}],["$","li","@radix-ui/react-select",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-select","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":"@radix-ui/react-select"}]]}]}],["$","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"r-select.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]