4e: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"] 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/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"] 50:T14b0,"use client"; import { Combobox } from "@base-ui/react/combobox"; import { Check, ChevronsUpDown, X } from "lucide-react"; import type React from "react"; import { cn } from "../../../lib/utils"; import { Input } from "../input/input"; import styles from "./combobox.module.css"; function ComboboxRoot( props: React.ComponentProps> ) { return {...props} />; } function ComboboxTrigger({ className, children, ...props }: Combobox.Trigger.Props) { return ( {children} ); } function ComboboxInput({ className, ...props }: Combobox.Input.Props) { return ( } {...props} /> ); } function ComboboxClear({ className, children, ...props }: Combobox.Clear.Props) { return ( {children || } ); } const ComboboxPortal = Combobox.Portal; function ComboboxPositioner({ className, ...props }: Combobox.Positioner.Props) { return ( ); } function ComboboxPopup({ className, children, ...props }: Combobox.Popup.Props) { return ( {children} ); } function ComboboxSpacer() { return

; } function ComboboxList({ className, ...props }: Combobox.List.Props) { return ; } function ComboboxEmpty({ className, children, ...props }: Combobox.Empty.Props) { return ( {children || "No items found"} ); } function ComboboxItem({ className, children, indicatorPosition = "left", ...props }: Combobox.Item.Props & { indicatorPosition?: "left" | "right"; }) { return ( {indicatorPosition === "left" && ( )} {children} {indicatorPosition === "right" && ( )} ); } function ComboboxItemIndicator({ className, children, ...props }: Combobox.ItemIndicator.Props) { return ( {children || } ); } function ComboboxGroup({ className, ...props }: Combobox.Group.Props) { return ; } function ComboboxGroupLabel({ className, ...props }: Combobox.GroupLabel.Props) { return ( ); } function ComboboxArrow({ className, ...props }: Combobox.Arrow.Props) { return ; } function ComboboxNoItems({ className, children, ...props }: React.ComponentProps<"div">) { return (

{children || "No items found"}

); } function ComboboxChips({ className, ref, ...props }: Combobox.Chips.Props & { ref?: React.Ref }) { return ; } function ComboboxChip({ className, ...props }: Combobox.Chip.Props) { return ; } function ComboboxChipRemove({ className, children, ...props }: Combobox.ChipRemove.Props) { return ( {children || } ); } function ComboboxChipsInput({ className, ...props }: Combobox.Input.Props) { return ; } const ComboboxValue = Combobox.Value; export { ComboboxRoot as Combobox, ComboboxArrow, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxNoItems, ComboboxPopup, ComboboxPortal, ComboboxPositioner, ComboboxSpacer, ComboboxTrigger, ComboboxValue, }; 51:T1613,.input { @media (max-width: 640px) { font-size: 0.9375rem; &::placeholder { font-size: 0.9375rem; } } } .trigger { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; padding: 0.25rem; border: none; background: transparent; cursor: pointer; &:focus-visible { outline: none; } &[data-disabled] { opacity: 0.5; cursor: not-allowed; } } .clear { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; color: var(--muted-foreground); transition: all 150ms ease; &:hover { color: var(--foreground); background: var(--accent); } } .icon { margin-left: 0.5rem; height: 1rem; width: 1rem; flex-shrink: 0; color: var(--muted-foreground); } .positioner { position: absolute; top: 100%; left: 0; z-index: 150; width: var(--anchor-width); } .popup { box-sizing: border-box; display: flex; flex-direction: column; max-height: min(var(--available-height), 20rem); width: var(--anchor-width); max-width: var(--available-width); overflow-y: auto; scroll-padding-block: 0.5rem; overscroll-behavior: contain; background: var(--popover); border: none; border-radius: var(--radius); box-shadow: 0 0 0 0.5px oklch(from var(--border) l c h / 0.8), var(--shadow-border-stack); outline: none; transform-origin: var(--transform-origin); transition: transform 250ms var(--ease-out-expo), opacity 250ms var(--ease-out-expo); &[data-starting-style] { opacity: 0; transform: scale(0.95); } &[data-ending-style] { transition: none; } @media (max-width: 640px) { max-width: calc(100vw - 2rem); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } .itemIndicator { display: flex; align-items: center; justify-content: center; height: 1rem; width: 1rem; opacity: 0; transition: opacity 150ms ease; } .item { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; padding-inline: 8px 6px; margin-inline: 4px; min-height: 32px; font-size: 0.875rem; font-weight: 400; line-height: 1.2; color: var(--foreground); cursor: pointer; user-select: none; background-color: transparent; position: relative; isolation: isolate; &::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius) - 4px); background-color: transparent; z-index: -1; } &[data-highlighted]::before, &:hover::before, &:focus::before { background-color: var(--accent); } &:focus, &:focus-visible { outline: none; } &[data-disabled] { opacity: 0.5; cursor: not-allowed; &:hover::before { background: transparent; } } &[data-selected] { .itemIndicator { opacity: 1; margin: 4px; } } @media (max-width: 640px) { padding: 0.625rem 0.75rem; font-size: 0.9375rem; gap: 0.75rem; min-height: 2.75rem; } } .list { display: flex; flex-direction: column; gap: 1px; outline: none; } .itemText { flex: 1; } .group { padding: 0.25rem 0; } .groupLabel { padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); } .arrow { position: absolute; top: -0.25rem; left: 1rem; width: 0.5rem; height: 0.5rem; background: var(--card); border-top: 1px solid var(--border); border-left: 1px solid var(--border); transform: rotate(45deg); } .noItems, .empty:not(:empty) { padding: 2rem 1rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); @media (max-width: 640px) { padding: 1.5rem 1rem; font-size: 0.9375rem; } } .chips { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; border-radius: var(--radius); padding: 0.25rem 0.375rem; width: 100%; background-color: var(--popover); box-shadow: 0 0 0 1px oklch(from var(--border) l c h / 0.5); &:focus-within { box-shadow: 0 0 0 1px var(--ring), 0 0 0 3px oklch(from var(--ring) l c h / 0.2); } } .chip { display: flex; align-items: center; background-color: var(--secondary); color: var(--foreground); border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; padding: 0.125rem 0.125rem 0.125rem 0.5rem; overflow: hidden; gap: 0.25rem; outline: 0; cursor: default; &:focus-within, &[data-highlighted] { background-color: var(--primary); color: var(--primary-foreground); } @media (max-width: 640px) { font-size: 0.9375rem; } } .chipRemove { border: none; background: none; padding: 0.25rem; display: flex; align-items: center; justify-content: center; color: inherit; border-radius: calc(var(--radius) - 4px); cursor: pointer; &:hover { background-color: oklch(from var(--foreground) l c h / 0.1); } } .chipsInput { flex: 1; box-sizing: border-box; padding-left: 0.5rem; margin: 0; border: none; height: 2rem; border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; background-color: transparent; color: var(--foreground); min-width: 3rem; &::placeholder { color: var(--muted-foreground); } &:focus { outline: none; } @media (max-width: 640px) { font-size: 0.9375rem; } } 4d:["$","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@1.5.0",{"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@1.5.0"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@roiui","registryDependencies":["https://roiui.com/r/input.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/brook/ui/combobox/combobox.tsx","content":"$50","type":"registry:file","target":"~/components/ui/combobox/combobox.tsx"},{"path":"registry/brook/ui/combobox/combobox.module.css","content":"$51","type":"registry:file","target":"~/components/ui/combobox/combobox.module.css"}],"className":"h-[70svh] min-h-80"}]]}]