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:T3feb,"use client"; import { Combobox as ComboboxPrimitive } from "@base-ui/react"; import { CheckIcon, ChevronDownIcon, CrossSmallIcon, XIcon } from "blode-icons-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; const Combobox = ComboboxPrimitive.Root; const ComboboxValue = ({ ...props }: ComboboxPrimitive.Value.Props) => ( ); const ComboboxTrigger = ({ className, children, render, ...props }: ComboboxPrimitive.Trigger.Props) => ( } {...props} > {children ?? } ); const ComboboxClear = ({ className, ...props }: ComboboxPrimitive.Clear.Props) => ( } {...props} > ); const ComboboxInput = ({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }: ComboboxPrimitive.Input.Props & { showTrigger?: boolean; showClear?: boolean; }) => ( } > } {...props} /> {showTrigger && ( )} {showClear && } {children} ); const ComboboxContent = ({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick< ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor" >) => ( ); interface ComboboxHighlightRect { height: number; left: number; top: number; width: number; } interface ComboboxHighlightState { /** The last row the highlight was told about; kept while it fades out. */ rect: ComboboxHighlightRect | null; /** False makes the next move a jump rather than a slide. */ travels: boolean; visible: boolean; } const HIGHLIGHT_HIDDEN: ComboboxHighlightState = { rect: null, travels: false, visible: false, }; /** * Offsets, not client rects: the list is the items' `offsetParent`, so these * are already scroll-inclusive and the highlight rides the scroll without a * scroll listener. */ const sameHighlightRect = (a: ComboboxHighlightRect, b: ComboboxHighlightRect) => a.height === b.height && a.left === b.left && a.top === b.top && a.width === b.width; const readHighlightRect = (list: HTMLElement): ComboboxHighlightRect | null => { const item = list.querySelector('[data-slot="combobox-item"][data-highlighted]'); if (!item) { return null; } return { height: item.offsetHeight, left: item.offsetLeft, top: item.offsetTop, width: item.offsetWidth, }; }; /** * One bar that slides between rows, rather than a background that blinks off * and on in every gap. Base UI writes `data-highlighted` for the pointer and * the arrow keys alike, so a single observer drives both. * * The travel is a transform on one element, so a move costs no layout. Rows * appearing or disappearing under a filter make the bar jump instead of slide, * because sliding to a row that just moved reads as a glitch. The global * reduced-motion stylesheet overrides the inline duration with `!important`. * * The resize observer is not optional: on open the popup paints at its content * width for a frame before `--anchor-width` lands, and a bar measured in that * frame would keep the narrow width forever, since widening the row mutates * neither `data-highlighted` nor the child list. */ const ComboboxList = ({ className, ...props }: ComboboxPrimitive.List.Props) => { const listRef = React.useRef(null); const [highlight, setHighlight] = React.useState(HIGHLIGHT_HIDDEN); React.useEffect(() => { const list = listRef.current; if (!list) { return; } const sync = (jump: boolean) => { const rect = readHighlightRect(list); setHighlight((previous) => { if (!rect) { return previous.visible ? { ...previous, travels: false, visible: false } : previous; } if (previous.visible && previous.rect && sameHighlightRect(previous.rect, rect)) { return previous; } return { rect, travels: !jump && previous.visible, visible: true }; }); }; sync(true); const observer = new MutationObserver((records) => { sync(records.some((record) => record.type === "childList")); }); observer.observe(list, { attributeFilter: ["data-highlighted"], attributes: true, childList: true, subtree: true, }); const resizeObserver = new ResizeObserver(() => sync(true)); resizeObserver.observe(list); return () => { observer.disconnect(); resizeObserver.disconnect(); }; }, []); const { rect, travels, visible } = highlight; return ( (

{rect && ( )} {...props} /> ); }; const ComboboxItem = ({ className, children, ...props }: ComboboxPrimitive.Item.Props) => ( {children} } > ); const ComboboxGroup = ({ className, ...props }: ComboboxPrimitive.Group.Props) => ( ); const ComboboxLabel = ({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) => ( ); const ComboboxCollection = ({ ...props }: ComboboxPrimitive.Collection.Props) => ( ); const ComboboxEmpty = ({ className, ...props }: ComboboxPrimitive.Empty.Props) => ( ); const ComboboxSeparator = ({ className, ...props }: ComboboxPrimitive.Separator.Props) => ( ); const ComboboxChipsInput = ({ className, ...props }: ComboboxPrimitive.Input.Props) => ( ); /** * The fast tier of the motion scale `ask-user-questions` already keeps: a chip * is a small thing, so it moves quickly, and it leaves a step quicker than it * arrives, so a removal reads as final rather than as the entrance in reverse. */ const CHIP_SPRING = { bounce: 0, duration: 0.08, type: "spring" as const }; const CHIP_EXIT = { duration: 0.06 }; const NO_MOTION = { duration: 0 }; type ComboboxChipsProps = Omit & { /** * Renders one keyed `ComboboxChip` per selected value. The array, not a * fragment: `AnimatePresence` only tracks children it can see. */ children: (value: Value) => React.ReactElement[]; placeholder?: string; }; /** * The chips and the input are rendered here rather than by the consumer for * two reasons: an exit animation needs `AnimatePresence` to be the chips' * direct parent, and the placeholder has to know whether anything is selected. * * `mode="popLayout"` lifts a leaving chip out of the flow at once, so the row * closes the gap while it fades instead of after it, and `layout` on each * wrapper slides the survivors into their new slots. The motion wrapper sits * outside `ComboboxChip` so that the elements `AnimatePresence` measures are * motion components it can take a ref to. * * The horizontal padding stays `--field-padding-x` in both states. Tightening * it once a chip exists moves the row's leading edge, so the placeholder and * the first chip start at different offsets and the field shifts under the * cursor as the last chip goes. */ const ComboboxChips = ({ className, children, placeholder, ...props }: ComboboxChipsProps) => { const reduceMotion = useReducedMotion(); return ( {(value: Value) => ( <> {children(value).map((chip) => ( {chip} ))} 0 ? undefined : placeholder} /> )} ); }; /** * The chip carries no animation of its own: `ComboboxChips` wraps each one in * the motion element that enters, leaves, and slides between slots. */ const ComboboxChip = ({ className, children, showRemove = true, ...props }: ComboboxPrimitive.Chip.Props & { showRemove?: boolean; }) => ( {children} {showRemove && ( } > )} ); const useComboboxAnchor = () => React.useRef(null); export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, }; 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","blode-icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/blode-icons-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":"blode-icons-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":"@blode","registryDependencies":["button","input-group"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/combobox.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]