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[544296,["/_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"],"ItemStyles"] 4e:I[34002,["/_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"],"CodeEditor"] 4f: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"] 50:T28c2,"use client"; import { ScrollAreaList } from "@/components/ui/scroll-area"; import * as React from "react"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Command as Primitive } from "cmdk"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { InputWrapper, InputControl } from "@/components/ui/input"; import { AnimatedIcon } from "@/components/ui/animated-icon"; import { Icon, Disk } from "@/components/ui/icon"; import { useCommandResultsMotion } from "@/components/ui/command"; import { useFlowAppearance, useFlowGroup, } from "@/lib/cojeev-motion/use-flow"; import { ItemAdornment, itemText, menuAdornment, type ItemAdornmentItemProps, type ItemAdornmentValue } from "@/components/ui/item-adornment"; export type ComboboxOption = { value: string; label: string; disabled?: boolean; adornment?: ItemAdornmentValue; }; type ComboboxState = { open: boolean; setOpen: (open: boolean) => void; selected: string; select: (value: string, label: string) => void; query: string; setQuery: (value: string) => void; listId: string; }; const ComboboxContext = React.createContext(null); const ComboboxInputRefContext = React.createContext< React.RefCallback | undefined >(undefined); function useCombobox() { const context = React.useContext(ComboboxContext); if (!context) throw new Error("Combobox parts must be inside Combobox"); return context; } export const comboboxVariants = cva("v-combo [position:relative]"); export type ComboboxProps = Omit< React.ComponentProps, "value" | "defaultValue" | "onValueChange" > & { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; options?: ComboboxOption[]; placeholder?: string; emptyText?: string; "aria-label"?: string; }; export function Combobox({ className, children, value, defaultValue = "", onValueChange, open, defaultOpen = false, onOpenChange, options, placeholder, emptyText = "No matches", ...props }: ComboboxProps) { const [internalValue, setInternalValue] = React.useState(defaultValue); const [internalOpen, setInternalOpen] = React.useState(defaultOpen); const selected = value ?? internalValue; const selectedLabel = options?.find((option) => option.value === selected)?.label ?? selected; const selectionKey = JSON.stringify([selected, selectedLabel]); const [search, setSearch] = React.useState({ selection: selectionKey, query: selectedLabel, }); const query = search.selection === selectionKey ? search.query : selectedLabel; const setQuery = (next: string) => setSearch({ selection: selectionKey, query: next }); const listId = React.useId(); const inputRef = React.useRef(null); const registerInput = React.useCallback((node: HTMLInputElement | null) => { inputRef.current = node; }, []); const isOpen = open ?? internalOpen; const setOpen = (next: boolean) => { setInternalOpen(next); onOpenChange?.(next); }; const select = (next: string, label: string) => { setInternalValue(next); onValueChange?.(next); setSearch({ selection: JSON.stringify([ next, options?.find((option) => option.value === next)?.label ?? next, ]), query: label, }); setOpen(false); inputRef.current?.focus(); }; return ( {children ?? ( <> {emptyText} {options?.map((option) => ( {option.label} ))} )} ); } export type ComboboxInputProps = React.ComponentProps< typeof Primitive.Input > & { wrapperProps?: React.ComponentProps; leading?: React.ReactNode; }; export function ComboboxInput({ className, wrapperProps, leading, onValueChange, onFocus, onKeyDown, ...props }: ComboboxInputProps) { const state = useCombobox(); const inputRef = React.useContext(ComboboxInputRefContext); return ( {leading ?? ( )} { state.setQuery(next); state.setOpen(true); onValueChange?.(next); }} > ) => { state.setOpen(true); onFocus?.(event); }} onKeyDown={(event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented) return; if (event.key === "Escape") { event.preventDefault(); state.setOpen(false); } else if (event.key === "ArrowDown" || event.key === "ArrowUp") state.setOpen(true); }} {...props} /> ); } export type ComboboxContentProps = React.ComponentProps; export function ComboboxContent({ className, children, ref, style, ...props }: ComboboxContentProps) { const morphRef = useMorph("surfaces"); const state = useCombobox(); const groupRef = useFlowGroup(morphRef, { itemSelector: ".v-menu__item", activeSelector: "[aria-selected=true]", }); const flowRef = useFlowAppearance( state.open, groupRef, "grow", ); const resultsRef = useCommandResultsMotion(ref); return ( event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()} onInteractOutside={(event) => { if ( event.target instanceof Element && event.target.closest('[data-slot="combobox"]') ) event.preventDefault(); }} > {children} ); } export const ComboboxList = ComboboxContent; export type ComboboxItemProps = React.ComponentProps & { label?: string; showIndicator?: boolean; } & ItemAdornmentItemProps; export function ComboboxItem({ showIndicator = false, className, adornment, adornmentId, children, onSelect, label, value, ref, ...props }: ComboboxItemProps) { const morphRef = useMorph("nav", ref); const state = useCombobox(); return ( { state.select( value ?? next, label ?? (typeof children === "string" ? children : next), ); onSelect?.(next); }} {...props} > {children} {showIndicator && state.selected === value && } ); } export type ComboboxEmptyProps = React.ComponentProps; export function ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) { return ( ); } export type ComboboxGroupProps = React.ComponentProps; export function ComboboxGroup(props: ComboboxGroupProps) { return ( ); } 51:T1f6d,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-menu:where([data-slot="combobox"], [data-slot^="combobox-"]) { background: var(--popover); border-radius: var(--r-card-sm); padding: var(--s-2); min-width: 200px; box-shadow: var(--shadow-float); border: 1px solid var(--v-border); display: grid; gap: 2px; } .v-menu__item:where([data-slot="combobox"], [data-slot^="combobox-"]) { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-md); font-size: var(--fs-control); width: 100%; text-align: left; white-space: nowrap; } .v-menu__item:where([data-slot="combobox"], [data-slot^="combobox-"]):hover, .v-menu__item:where( [data-slot="combobox"], [data-slot^="combobox-"] )[aria-selected="true"] { background: var(--v-beige); } .v-menu__item:where([data-slot="combobox"], [data-slot^="combobox-"]).-danger { color: var(--v-danger-ink); } .v-menu__sep:where([data-slot="combobox"], [data-slot^="combobox-"]) { height: 1px; background: var(--v-border); margin: 4px 0; } .v-menu__group:where([data-slot="combobox"], [data-slot^="combobox-"]) { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); padding: 8px 12px 4px; } [data-slot="combobox-content"] { z-index: var(--z-dialog); max-height: none; overflow: visible; } [data-slot="combobox-item"] mark { background: var(--v-yellow); border-radius: 3px; padding: 0 1px; } [data-slot="combobox-item"] { display: block; line-height: 40px; padding: 0 var(--s-3); } [data-slot="combobox-item"] mark { background: var(--v-yellow); color: var(--v-on-accent); border-radius: 3px; padding: 0 1px; } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input { height: var(--ctl-lg); padding: 0 16px 0 8px; gap: 12px; background: var(--input); box-shadow: inset 0 0 0 1px var(--v-edge); } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input > .v-disk { width: 32px; height: 32px; margin: 0; background: var(--v-canvas); color: var(--v-text-2); box-shadow: inset 0 0 0 1px var(--v-border); } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input > .v-disk .v-icon { width: 16px; height: 16px; stroke-width: 2; } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input:focus-within { background: var(--v-pink-soft); box-shadow: inset 0 0 0 2px var(--v-brand); } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input:focus-within > .v-disk { color: var(--v-text); } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input input { font-size: var(--fs-body); color: var(--v-text); } [data-slot="combobox-content"] { padding: 6px; border-radius: 16px; } .v-menu:where([data-slot="combobox"], [data-slot^="combobox-"]) { scrollbar-gutter: stable; } .v-menu:where( [data-slot="combobox"], [data-slot^="combobox-"] )::-webkit-scrollbar { width: 12px; height: 12px; } .v-menu:where( [data-slot="combobox"], [data-slot^="combobox-"] )::-webkit-scrollbar-track { background: transparent; border-radius: 999px; } .v-menu:where( [data-slot="combobox"], [data-slot^="combobox-"] )::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--v-ink) 34%, transparent); border-radius: 999px; border: 4px solid transparent; background-clip: content-box; min-height: 36px; } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input > .v-disk { border-radius: 46% 54% 50% 50%/50% 46% 54% 50%; background: var(--v-pink); color: var(--v-on-accent); box-shadow: none; } .v-combo:where([data-slot="combobox"], [data-slot^="combobox-"]) .v-input:focus-within > .v-disk { background: var(--v-ink); color: var(--v-on-ink); } [data-slot="combobox-content"] { display: grid; gap: 2px; padding: 6px; border-radius: 18px; box-shadow: var(--shadow-float), inset 0 0 0 1px var(--v-border); border: 0; } [data-slot="combobox-item"] { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; line-height: 1.3; padding: 0 10px 0 8px; border-radius: 12px; white-space: normal; } [data-slot="combobox-item"] > span:not(.v-disk,.v-item-adornment), [data-slot="combobox-item"] .v-combo__label { grid-column: 2; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } [data-slot="combobox-item"] mark { display: inline; } /* cmdk's current candidate owns the moving well. data-selected-option records the committed value, not a second persistent selection background. */ [data-slot="combobox-item"]:hover, [data-slot="combobox-item"][aria-selected="true"] { background: var(--v-pink-soft); color: var(--v-text); } [data-slot="combobox-item"] mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--v-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 2px; padding: 0; border-radius: 0; } .v-menu:where([data-slot="combobox"], [data-slot^="combobox-"]) { scrollbar-gutter: stable; } .v-menu:where([data-slot="combobox"], [data-slot^="combobox-"]) { scrollbar-gutter: stable; } :root[data-mode="dark"] [data-slot="combobox-content"] { background: var(--v-beige); } @media (prefers-reduced-motion: reduce) { [data-slot="combobox"], [data-slot^="combobox-"], [data-slot="combobox"]::before, [data-slot="combobox"]::after, [data-slot^="combobox-"]::before, [data-slot^="combobox-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot="combobox-content"] { width: var(--radix-popover-trigger-width); max-width: calc(100vw - 24px); } [data-slot="combobox-content"] > [cmdk-list-sizer], [data-slot="combobox-content"] [cmdk-group-items] { display: contents; } [data-slot="combobox-content"] [cmdk-group][hidden] { display: none; } [data-slot="combobox-item"][data-disabled="true"] { color: var(--v-disabled-ink); cursor: not-allowed; } /* Portalled list keeps its own surface, bounds, and wrapping contract. */ [data-slot="combobox-content"] { min-width: 0; max-height: min(280px, var(--radix-popover-content-available-height)); overscroll-behavior: contain; } [data-slot="combobox-item"] { padding-block: 8px; text-align: start; } [data-slot="combobox-item"] .v-combo__label { overflow-wrap: anywhere; } [data-slot="combobox-item"][data-disabled="true"] { background: transparent; color: var(--v-disabled-ink); } [data-slot="combobox-item"][data-disabled="true"]::before { background: var(--v-disabled-fill); } /* Nested menus live above dialog surfaces as well as the document. */ [data-slot="combobox-content"] { z-index: var(--z-popover); } /* cmdk's contents-only sizer has no stacking box: each option sits above the moving selection paint. */ [data-flow-owned][data-slot="combobox-content"] [data-slot="combobox-item"] { position: relative; z-index: 1; } [data-slot="combobox-item"] { grid-template-columns:30px minmax(0,1fr) auto; min-height:46px; } [data-slot="combobox-item"] > .v-item-adornment { grid-column:1; display:inline-grid; overflow:visible; } [data-slot="combobox-item"]:not(:has(.v-item-adornment)) { grid-template-columns:minmax(0,1fr) auto; } [data-slot="combobox-item"]:not(:has(.v-item-adornment)) > .v-combo__label { grid-column:1; } [data-slot="combobox-item"]:active:not([data-disabled="true"]) { background:var(--v-pink-soft); color:var(--v-text); } [data-slot="combobox-item"] > .v-combo__selected { grid-column:-2; margin-inline-start: auto; display: inline-flex; flex: none; padding-inline-start: 8px; } [data-slot="combobox-item"] > .v-combo__selected .v-icon { width: 16px; height: 16px; } } 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","cmdk",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cmdk","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":"cmdk"}]]}]}],["$","li","@radix-ui/react-popover",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","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-popover"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/scroll-area.json","https://000h.cojeev.com/r/input.json","https://000h.cojeev.com/r/animated-icon.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/command.json","https://000h.cojeev.com/r/item-adornment.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/combobox.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/combobox.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/combobox.css","content":"$51","type":"registry:file","target":"styles/cojeev/combobox.css"}],"className":"h-[70svh] min-h-80"}]]}]