53: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"] 54: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"] 55:T5130,'use client' import React, { createContext, useContext, useState, useRef, useCallback, useEffect, type ReactNode } from 'react' import { createPortal } from 'react-dom' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { CircleXIcon, SearchIcon } from 'lucide-react' // -- Types -- interface ItemMeta { value: string label: string disabled?: boolean } interface AutocompleteCtx { open: boolean setOpen: (v: boolean) => void inputValue: string setInputValue: (v: string) => void selectedValue: string | null selectedLabel: string | null highlightedValue: string | null setHighlightedValue: (v: string | null) => void disabled: boolean inputWrapperRef: React.RefObject inputRef: React.RefObject popupRef: React.RefObject itemsRef: React.MutableRefObject registerItem: (item: ItemMeta) => void unregisterItem: (value: string) => void selectItem: (value: string, label: string) => void clearSelection: () => void highlightNext: () => void highlightPrev: () => void selectHighlighted: () => void onValueChange?: (v: string | null) => void } const AutocompleteCtx = createContext(null) const useAc = (): AutocompleteCtx => { const ctx = useContext(AutocompleteCtx) if (!ctx) throw new Error('Must be used inside ') return ctx } // -- Root -- interface AutocompleteProps { children: ReactNode defaultValue?: string value?: string | null onValueChange?: (v: string | null) => void defaultInputValue?: string onInputValueChange?: (v: string) => void defaultOpen?: boolean open?: boolean onOpenChange?: (v: boolean) => void disabled?: boolean } const Autocomplete = ({ children, defaultValue, value: valueProp, onValueChange, defaultInputValue = '', onInputValueChange, defaultOpen = false, open: openProp, onOpenChange, disabled = false }: AutocompleteProps) => { const [openState, setOpenState] = useState(defaultOpen) const [inputValue, setInputValueState] = useState(defaultInputValue) const [selectedValue, setSelectedValue] = useState(defaultValue ?? null) const [selectedLabel, setSelectedLabel] = useState(null) const [highlightedValue, setHighlightedValue] = useState(null) const itemsRef = useRef([]) const inputWrapperRef = useRef(null) const inputRef = useRef(null) const popupRef = useRef(null) const isOpen = openProp !== undefined ? openProp : openState const resolvedValue = valueProp !== undefined ? valueProp : selectedValue const setOpen = useCallback( (v: boolean) => { if (openProp === undefined) setOpenState(v) onOpenChange?.(v) }, [openProp, onOpenChange] ) const setInputValue = useCallback( (v: string) => { setInputValueState(v) onInputValueChange?.(v) }, [onInputValueChange] ) const registerItem = useCallback((item: ItemMeta) => { if (!itemsRef.current.some(i => i.value === item.value)) { itemsRef.current = [...itemsRef.current, item] } }, []) const unregisterItem = useCallback((value: string) => { itemsRef.current = itemsRef.current.filter(i => i.value !== value) }, []) const selectItem = useCallback( (value: string, label: string) => { if (valueProp === undefined) setSelectedValue(value) setSelectedLabel(label) setInputValue(label) setOpen(false) setHighlightedValue(null) onValueChange?.(value) }, [valueProp, setInputValue, setOpen, onValueChange] ) const clearSelection = useCallback(() => { if (valueProp === undefined) setSelectedValue(null) setSelectedLabel(null) setInputValue('') onValueChange?.(null) inputRef.current?.focus() }, [valueProp, setInputValue, onValueChange]) const highlightNext = useCallback(() => { const items = itemsRef.current.filter(i => !i.disabled) if (!items.length) return const idx = items.findIndex(i => i.value === highlightedValue) setHighlightedValue(items[(idx + 1) % items.length].value) }, [highlightedValue]) const highlightPrev = useCallback(() => { const items = itemsRef.current.filter(i => !i.disabled) if (!items.length) return const idx = items.findIndex(i => i.value === highlightedValue) setHighlightedValue(items[(idx - 1 + items.length) % items.length].value) }, [highlightedValue]) const selectHighlighted = useCallback(() => { if (!highlightedValue) return const item = itemsRef.current.find(i => i.value === highlightedValue) if (item && !item.disabled) selectItem(item.value, item.label) }, [highlightedValue, selectItem]) useEffect(() => { if (!isOpen) return const handler = (e: MouseEvent) => { const t = e.target as Node if (!popupRef.current?.contains(t) && !inputWrapperRef.current?.contains(t)) { setOpen(false) } } document.addEventListener('mousedown', handler) return () => document.removeEventListener('mousedown', handler) }, [isOpen, setOpen]) return ( {children} ) } // -- Value -- const AutocompleteValue = ({ className, ...props }: React.HTMLAttributes) => { const { selectedLabel } = useAc() return ( {selectedLabel} ) } // -- Input -- const inputVariants = cva( 'text-foreground placeholder:text-muted-foreground [[readonly]]:bg-muted/80 border-input focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:bg-input/30 focus-visible:ring-ring/50 flex w-full rounded-lg border bg-transparent text-sm transition-colors outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 [[readonly]]:cursor-not-allowed', { variants: { size: { sm: 'h-7 px-2 [&~[data-slot=autocomplete-clear]]:right-1.5 [&~[data-slot=autocomplete-trigger]]:right-1.5', default: 'h-8 px-2.5 [&~[data-slot=autocomplete-clear]]:right-1.75 [&~[data-slot=autocomplete-trigger]]:right-1.75', lg: 'h-9 px-2.5 [&~[data-slot=autocomplete-clear]]:right-2 [&~[data-slot=autocomplete-trigger]]:right-2' } }, defaultVariants: { size: 'default' } } ) interface AutocompleteInputProps extends Omit, 'size' | 'value' | 'onChange'>, VariantProps { showClear?: boolean showTrigger?: boolean } const AutocompleteInput = ({ className, size = 'default', showClear = false, showTrigger = false, onFocus, onKeyDown, ...props }: AutocompleteInputProps) => { const { open, setOpen, inputValue, setInputValue, inputWrapperRef, inputRef, disabled, highlightNext, highlightPrev, selectHighlighted } = useAc() const handleKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case 'ArrowDown': e.preventDefault() if (!open) setOpen(true) highlightNext() break case 'ArrowUp': e.preventDefault() if (!open) setOpen(true) highlightPrev() break case 'Enter': e.preventDefault() if (open) selectHighlighted() break case 'Escape': e.preventDefault() setOpen(false) break case 'Tab': setOpen(false) break } onKeyDown?.(e) } return (

{ setInputValue(e.target.value) if (!open) setOpen(true) }} onFocus={e => { onFocus?.(e) }} onKeyDown={handleKeyDown} className={cn(inputVariants({ size }), className)} {...props} /> {showTrigger && } {showClear && }

) } // -- Status -- const AutocompleteStatus = ({ className, ...props }: React.HTMLAttributes) => { return (

) } // -- Portal -- interface AutocompletePortalProps { children: ReactNode container?: HTMLElement | null } const AutocompletePortal = ({ children, container }: AutocompletePortalProps) => { const [mounted, setMounted] = useState(false) useEffect(() => setMounted(true), []) if (!mounted) return null return createPortal(children, container ?? document.body) } // -- Backdrop -- const AutocompleteBackdrop = ({ className, ...props }: React.HTMLAttributes) => { return (

) } // -- Positioner -- interface AutocompletePositionerProps extends React.HTMLAttributes { align?: 'start' | 'end' | 'center' sideOffset?: number alignOffset?: number side?: 'top' | 'bottom' anchor?: React.RefObject } const AutocompletePositioner = ({ className, children, align = 'start', sideOffset = 4, alignOffset = 0, side = 'bottom', anchor: anchorProp, style: styleProp, ...props }: AutocompletePositionerProps) => { const { inputWrapperRef, open } = useAc() const [posStyle, setPosStyle] = useState({}) const anchorRef = anchorProp ?? inputWrapperRef const updatePosition = useCallback(() => { const el = anchorRef.current if (!el) return const rect = el.getBoundingClientRect() const s: React.CSSProperties = { position: 'fixed', width: rect.width } if (side === 'bottom') { s.top = rect.bottom + sideOffset } else { s.bottom = window.innerHeight - rect.top + sideOffset } if (align === 'start') { s.left = rect.left + alignOffset } else if (align === 'end') { s.right = window.innerWidth - rect.right + alignOffset } else { s.left = rect.left + rect.width / 2 + alignOffset s.transform = 'translateX(-50%)' } setPosStyle(s) }, [anchorRef, side, sideOffset, align, alignOffset]) useEffect(() => { if (!open) return updatePosition() window.addEventListener('resize', updatePosition) window.addEventListener('scroll', updatePosition, true) return () => { window.removeEventListener('resize', updatePosition) window.removeEventListener('scroll', updatePosition, true) } }, [open, updatePosition]) return (

{children}

) } // -- Content -- export interface AutocompleteContentProps extends React.HTMLAttributes { align?: AutocompletePositionerProps['align'] sideOffset?: AutocompletePositionerProps['sideOffset'] alignOffset?: AutocompletePositionerProps['alignOffset'] side?: AutocompletePositionerProps['side'] anchor?: AutocompletePositionerProps['anchor'] showBackdrop?: boolean } const AutocompleteContent = ({ className, children, showBackdrop = false, align = 'start', sideOffset = 4, alignOffset = 0, side = 'bottom', anchor, ...props }: AutocompleteContentProps) => { const { open, popupRef } = useAc() if (!open) return null return (

{showBackdrop && }

{children}

) } // -- List -- interface AutocompleteListProps extends React.HTMLAttributes {} const AutocompleteList = ({ className, ...props }: AutocompleteListProps) => { return (