4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T411c,"use client"; import { type CollectionItem, type ComboboxInputValueChangeDetails, Combobox as ComboboxPrimitive, type ListCollection, type UseComboboxContext, useComboboxContext, useListCollection, } from "@ark-ui/react/combobox"; import { useFilter } from "@ark-ui/react/locale"; import { Portal } from "@ark-ui/react/portal"; import { CheckIcon, ChevronsUpDownIcon, XIcon } from "lucide-react"; import { type ComponentProps, Fragment, type ReactNode, useCallback, useEffect, useMemo, } from "react"; import { Button } from "@/components/ui/button"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; /** Default item shape when you omit an explicit generic on list helpers. */ export type DefaultComboboxItem = { label: string; value: string }; /** * Narrows `collection` from context. Prefer passing `collection` from * `Combobox`’s `renderChildren` so `T` is inferred from `ListCollection`. */ export const useComboboxListCollection = < T extends CollectionItem = CollectionItem, >() => { const { collection } = useComboboxContext(); return collection as ListCollection; }; export type ComboboxProps = Omit< ComboboxPrimitive.RootProps, "collection" | "children" > & { children: ReactNode | ((api: UseComboboxContext) => ReactNode) } & ( | { items: readonly T[]; groupBy?: (item: T, index: number) => string; groupSort?: | string[] | "asc" | "desc" | ((a: string, b: string) => number); limit?: number; itemToString?: (item: T) => string; itemToValue?: (item: T) => string; isItemDisabled?: (item: T) => boolean; filterType?: "contains" | "endsWith" | "startsWith"; } | { collection: ListCollection } ); /** Optional keys for `items`/`collection` branches; used only to destructure off `ComboboxPrimitive.Root` props. */ type ComboboxListCollectionKeys = { items?: readonly T[]; groupBy?: (item: T, index: number) => string; groupSort?: string[] | "asc" | "desc" | ((a: string, b: string) => number); limit?: number; itemToString?: (item: T) => string; itemToValue?: (item: T) => string; isItemDisabled?: (item: T) => boolean; filterType?: "contains" | "endsWith" | "startsWith"; collection?: ListCollection; }; export const Combobox = ( props: ComboboxProps, ) => { const { onInputValueChange, positioning, children, items: itemsFromProps, groupBy, groupSort, limit, itemToString, itemToValue, isItemDisabled, filterType = "contains", collection: collectionFromProps, ...rootProps } = props as ComboboxProps & ComboboxListCollectionKeys; const items = useMemo( () => (itemsFromProps !== undefined ? itemsFromProps : []), [itemsFromProps], ); const { contains, endsWith, startsWith } = useFilter({ sensitivity: "base" }); const { collection: defaultCollection, filter, set, } = useListCollection({ initialItems: items, filter: filterType === "contains" ? contains : filterType === "endsWith" ? endsWith : startsWith, groupBy, groupSort, limit, itemToString, itemToValue, isItemDisabled, }); const itemsKey = useMemo( () => items .map((item: T) => String( itemToValue?.(item) ?? (item as { value?: string }).value ?? "", ), ) .join("\uffff"), [items, itemToValue], ); useEffect(() => { set([...items]); }, [itemsKey]); const handleInputValueChange = useCallback( (details: ComboboxInputValueChangeDetails) => { filter(details.inputValue); onInputValueChange?.(details); }, [filter, onInputValueChange], ); return ( {(api) => { return typeof children === "function" ? // Render-prop `api` is typed wider than our generic `T`; safe at runtime when `items`/`collection` match `T`. children(api as UseComboboxContext) : children; }} ); }; export const ComboboxControl = ({ ...props }: ComboboxPrimitive.ControlProps) => { return ; }; export type ComboboxInputProps = Omit< ComboboxPrimitive.InputProps, "size" | "asChild" > & { size?: "default" | "lg" | "sm"; startAddon?: ReactNode; endAddon?: ReactNode; showClear?: boolean; showIndicator?: boolean; }; export const ComboboxInput = ({ startAddon, endAddon, showClear = true, showIndicator = true, size = "default", ...props }: ComboboxInputProps) => { return ( {startAddon && ( {startAddon} )} {(endAddon || showClear || showIndicator) && ( {endAddon} {showClear && ( )} {showIndicator && ( )} )} ); }; export const ComboboxPopup = ({ className, disablePortal, ...props }: ComboboxPrimitive.ContentProps & { disablePortal?: boolean }) => { const inner = ( ); return disablePortal ? ( inner ) : ( {inner} ); }; export type ComboboxListProps = { className?: string; items: readonly T[]; children: (item: T) => ReactNode; }; export const ComboboxList = ({ items, className, children, }: ComboboxListProps) => { const { collection } = useComboboxContext(); return ( {collection.items.map((item: (typeof items)[number]) => { const key = collection.getItemValue(item) ?? ""; return {children(item)}; })} ); }; export type ComboboxGroupedListProps< T extends CollectionItem = CollectionItem, > = { className?: string; items: readonly T[]; children: (group: readonly [string, T[]]) => ReactNode; }; export const ComboboxGroupedList = ({ items, className, children, }: ComboboxGroupedListProps) => { const { collection } = useComboboxContext(); const groups = collection.group(); return (

{groups.map((tuple: readonly [string, (typeof items)[number][]]) => ( {children(tuple)} ))}

); }; export const ComboboxEmpty = ({ className, ...props }: ComboboxPrimitive.EmptyProps) => ( ); export const ComboboxItem = ({ className, ...props }: ComboboxPrimitive.ItemProps) => ( ); export const ComboboxItemText = ({ className, ...props }: ComboboxPrimitive.ItemTextProps) => ( ); export const ComboboxItemIndicator = ({ className, children, ...props }: ComboboxPrimitive.ItemIndicatorProps) => ( {children ?? } ); export const ComboboxItemGroup = ({ className, ...props }: ComboboxPrimitive.ItemGroupProps) => ( ); export const ComboboxItemGroupLabel = ({ className, ...props }: ComboboxPrimitive.ItemGroupLabelProps) => ( ); export const ComboboxSeparator = ({ className, ...props }: ComponentProps<"div">) => (

); export const ComboboxLabel = ({ className, ...props }: ComboboxPrimitive.LabelProps) => ( ); export const ComboboxTrigger = ({ ...props }: ComboboxPrimitive.TriggerProps) => ( ); export const ComboboxClearTrigger = ({ ...props }: ComboboxPrimitive.ClearTriggerProps) => ( ); export const ComboboxValue = ({ children, placeholder, className, }: { children?: (api: ComboboxPrimitive.ContextProps) => ReactNode; placeholder?: string; className?: string; }) => ( {(api) => { if (children) { return ( <> {/* `Context` callback api vs `ContextProps` differ in Ark's types; double assertion is intentional. */} {children( api as unknown as ComboboxPrimitive.ContextProps, )} ); } const text = api.valueAsString?.trim() ? api.valueAsString : api.collection.stringifyItems(api.selectedItems, ", "); return ( {text || placeholder} ); }} ); export const ComboboxChips = ({ className, startAddon, endAddon, children, ...props }: ComboboxPrimitive.ControlProps & { className?: string; startAddon?: ReactNode; children?: ReactNode; endAddon?: ReactNode; }) => { return ( {startAddon && ( )} {children} {endAddon && ( )} ); }; export type ComboboxChipsInputProps = Omit< ComponentProps, "size" >; export const ComboboxChipsInput = ({ className, ...props }: ComboboxChipsInputProps) => ( ); export const ComboboxChip = ({ className, value, children, removeProps, "aria-label": ariaLabel, }: { className?: string; value: string; children: ReactNode; removeProps?: ComponentProps<"button">; "aria-label"?: string; }) => { const { clearValue, disabled } = useComboboxContext(); return ( {children} {!disabled && ( )} ); }; export const ComboboxProvider = ({ ...props }: ComboboxPrimitive.RootProviderProps) => { return ; }; export const ComboboxContext = ComboboxPrimitive.Context; 4b:["$","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","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-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":"@ark-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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@ark-cn","registryDependencies":["button","input-group"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/combobox.tsx","content":"$4e","type":"registry:ui","target":"src/components/ui/combobox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]