@ucdjs-internal/shared-ui 0.1.2 → 0.1.5

package/dist/ui/badge.d.mts

@@ -5,7 +5,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/ui/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+  variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Badge({
   className,

package/dist/ui/button.d.mts

@@ -5,8 +5,8 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/ui/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | "default" | "lg" | "icon" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Button({
   className,

package/dist/ui/command.d.mts

@@ -1,13 +1,13 @@
 import { Dialog } from "./dialog.mjs";
+import { pkg } from "../vendor/cmdk/index.mjs";
 import * as React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { Command as Command$1 } from "cmdk";
 
 //#region src/ui/command.d.ts
 declare function Command({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof pkg>): react_jsx_runtime0.JSX.Element;
 declare function CommandDialog({
   title,
   description,
@@ -25,28 +25,28 @@ declare function CommandDialog({
 declare function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Input>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof pkg.Input>): react_jsx_runtime0.JSX.Element;
 declare function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.List>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof pkg.List>): react_jsx_runtime0.JSX.Element;
 declare function CommandEmpty({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof pkg.Empty>): react_jsx_runtime0.JSX.Element;
 declare function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Group>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof pkg.Group>): react_jsx_runtime0.JSX.Element;
 declare function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof pkg.Separator>): react_jsx_runtime0.JSX.Element;
 declare function CommandItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof Command$1.Item>): react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof pkg.Item>): react_jsx_runtime0.JSX.Element;
 declare function CommandShortcut({
   className,
   ...props

package/dist/ui/command.mjs

@@ -1,11 +1,11 @@
 import { cn } from "../lib/utils.mjs";
 import { InputGroup, InputGroupAddon } from "./input-group.mjs";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.mjs";
+import { pkg } from "../vendor/cmdk/index.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { CheckIcon, SearchIcon } from "lucide-react";
-import { Command as Command$1 } from "cmdk";
 
 //#region src/ui/command.tsx
 function Command(t0) {
@@ -29,7 +29,7 @@ function Command(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Command$1, {
+		t2 = /* @__PURE__ */ jsx(pkg, {
 			"data-slot": "command",
 			className: t1,
 			...props
@@ -142,7 +142,7 @@ function CommandInput(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Command$1.Input, {
+		t2 = /* @__PURE__ */ jsx(pkg.Input, {
 			"data-slot": "command-input",
 			className: t1,
 			...props
@@ -192,7 +192,7 @@ function CommandList(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Command$1.List, {
+		t2 = /* @__PURE__ */ jsx(pkg.List, {
 			"data-slot": "command-list",
 			className: t1,
 			...props
@@ -224,7 +224,7 @@ function CommandEmpty(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Command$1.Empty, {
+		t2 = /* @__PURE__ */ jsx(pkg.Empty, {
 			"data-slot": "command-empty",
 			className: t1,
 			...props
@@ -256,7 +256,7 @@ function CommandGroup(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Command$1.Group, {
+		t2 = /* @__PURE__ */ jsx(pkg.Group, {
 			"data-slot": "command-group",
 			className: t1,
 			...props
@@ -288,7 +288,7 @@ function CommandSeparator(t0) {
 	} else t1 = $[4];
 	let t2;
 	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Command$1.Separator, {
+		t2 = /* @__PURE__ */ jsx(pkg.Separator, {
 			"data-slot": "command-separator",
 			className: t1,
 			...props
@@ -328,7 +328,7 @@ function CommandItem(t0) {
 	} else t2 = $[6];
 	let t3;
 	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
-		t3 = /* @__PURE__ */ jsxs(Command$1.Item, {
+		t3 = /* @__PURE__ */ jsxs(pkg.Item, {
 			"data-slot": "command-item",
 			className: t1,
 			...props,

package/dist/ui/field.d.mts

@@ -20,7 +20,7 @@ declare function FieldGroup({
   ...props
 }: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
 declare const fieldVariants: (props?: ({
-  orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Field({
   className,

package/dist/ui/sidebar.d.mts

@@ -105,7 +105,7 @@ declare function SidebarMenuItem({
 }: React.ComponentProps<"li">): react_jsx_runtime0.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | "lg" | null | undefined;
+  size?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function SidebarMenuButton({
   render,

package/dist/vendor/cmdk/command-score.mjs

@@ -0,0 +1,62 @@
+//#region src/vendor/cmdk/command-score.ts
+const SCORE_CONTINUE_MATCH = 1;
+const SCORE_SPACE_WORD_JUMP = .9;
+const SCORE_NON_SPACE_WORD_JUMP = .8;
+const SCORE_CHARACTER_JUMP = .17;
+const SCORE_TRANSPOSITION = .1;
+const PENALTY_SKIPPED = .999;
+const PENALTY_CASE_MISMATCH = .9999;
+const PENALTY_NOT_COMPLETE = .99;
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/;
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g;
+const IS_SPACE_REGEXP = /[\s-]/;
+const COUNT_SPACE_REGEXP = /[\s-]/g;
+function commandScoreInner(value, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoizedResults) {
+	if (abbreviationIndex === abbreviation.length) {
+		if (stringIndex === value.length) return SCORE_CONTINUE_MATCH;
+		return PENALTY_NOT_COMPLETE;
+	}
+	const memoizeKey = `${stringIndex},${abbreviationIndex}`;
+	if (memoizedResults[memoizeKey] !== void 0) return memoizedResults[memoizeKey];
+	const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+	let index = lowerString.indexOf(abbreviationChar, stringIndex);
+	let highScore = 0;
+	let score, transposedScore, wordBreaks, spaceBreaks;
+	while (index >= 0) {
+		score = commandScoreInner(value, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 1, memoizedResults);
+		if (score > highScore) {
+			if (index === stringIndex) score *= SCORE_CONTINUE_MATCH;
+			else if (IS_GAP_REGEXP.test(value.charAt(index - 1))) {
+				score *= SCORE_NON_SPACE_WORD_JUMP;
+				wordBreaks = value.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);
+				if (wordBreaks && stringIndex > 0) score *= PENALTY_SKIPPED ** wordBreaks.length;
+			} else if (IS_SPACE_REGEXP.test(value.charAt(index - 1))) {
+				score *= SCORE_SPACE_WORD_JUMP;
+				spaceBreaks = value.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);
+				if (spaceBreaks && stringIndex > 0) score *= PENALTY_SKIPPED ** spaceBreaks.length;
+			} else {
+				score *= SCORE_CHARACTER_JUMP;
+				if (stringIndex > 0) score *= PENALTY_SKIPPED ** (index - stringIndex);
+			}
+			if (value.charAt(index) !== abbreviation.charAt(abbreviationIndex)) score *= PENALTY_CASE_MISMATCH;
+		}
+		if (score < SCORE_TRANSPOSITION && lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1) || lowerAbbreviation.charAt(abbreviationIndex + 1) === lowerAbbreviation.charAt(abbreviationIndex) && lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex)) {
+			transposedScore = commandScoreInner(value, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 2, memoizedResults);
+			if (transposedScore * SCORE_TRANSPOSITION > score) score = transposedScore * SCORE_TRANSPOSITION;
+		}
+		if (score > highScore) highScore = score;
+		index = lowerString.indexOf(abbreviationChar, index + 1);
+	}
+	memoizedResults[memoizeKey] = highScore;
+	return highScore;
+}
+function formatInput(value) {
+	return value.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
+}
+function commandScore(string, abbreviation, aliases) {
+	string = aliases && aliases.length > 0 ? `${`${string} ${aliases.join(" ")}`}` : string;
+	return commandScoreInner(string, abbreviation, formatInput(string), formatInput(abbreviation), 0, 0, {});
+}
+
+//#endregion
+export { commandScore };

package/dist/vendor/cmdk/index.d.mts

@@ -0,0 +1,181 @@
+import * as React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react";
+
+//#region src/vendor/cmdk/index.d.ts
+interface Children {
+  children?: React.ReactNode;
+}
+type DivProps = React.ComponentPropsWithoutRef<"div">;
+interface RefProp<T> {
+  ref?: React.Ref<T>;
+}
+type LoadingProps = Children & DivProps & {
+  /** Estimated progress of loading asynchronous options. */progress?: number;
+  /**
+   * Accessible label for this loading progressbar. Not shown visibly.
+   */
+  label?: string;
+};
+type EmptyProps = Children & DivProps & {};
+type SeparatorProps = DivProps & {
+  /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */alwaysRender?: boolean;
+};
+type DialogProps = Dialog.Root.Props & CommandProps & {
+  /** Provide a className to the Dialog overlay. */overlayClassName?: string; /** Provide a className to the Dialog content. */
+  contentClassName?: string; /** Provide a custom element the Dialog should portal into. */
+  container?: HTMLElement;
+};
+type ListProps = Children & DivProps & {
+  /**
+   * Accessible label for this List of suggestions. Not shown visibly.
+   */
+  label?: string;
+};
+type ItemProps = Children & Omit<DivProps, "disabled" | "onSelect" | "value"> & {
+  /** Whether this item is currently disabled. */disabled?: boolean; /** Event handler for when this item is selected, either via click or keyboard selection. */
+  onSelect?: (value: string) => void;
+  /**
+   * A unique value for this item.
+   * If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
+   */
+  value?: string; /** Optional keywords to match against when filtering. */
+  keywords?: string[]; /** Whether this item is forcibly rendered regardless of filtering. */
+  forceMount?: boolean;
+};
+type GroupProps = Children & Omit<DivProps, "heading" | "value"> & {
+  /** Optional heading to render for this group. */heading?: React.ReactNode; /** If no heading is provided, you must provide a value that is unique for this group. */
+  value?: string; /** Whether this group is forcibly rendered regardless of filtering. */
+  forceMount?: boolean;
+};
+type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "value" | "onChange" | "type"> & {
+  /**
+   * Optional controlled state for the value of the search input.
+   */
+  value?: string;
+  /**
+   * Event handler called when the search value changes.
+   */
+  onValueChange?: (search: string) => void;
+};
+type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
+type CommandProps = Children & DivProps & {
+  /**
+   * Accessible label for this command menu. Not shown visibly.
+   */
+  label?: string;
+  /**
+   * Optionally set to `false` to turn off the automatic filtering and sorting.
+   * If `false`, you must conditionally render valid items based on the search query yourself.
+   */
+  shouldFilter?: boolean;
+  /**
+   * Custom filter function for whether each command menu item should matches the given search query.
+   * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+   * By default, uses the `command-score` library.
+   */
+  filter?: CommandFilter;
+  /**
+   * Optional default item value when it is initially rendered.
+   */
+  defaultValue?: string;
+  /**
+   * Optional controlled state of the selected command menu item.
+   */
+  value?: string;
+  /**
+   * Event handler called when the selected item of the menu changes.
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * Optionally set to `true` to turn on looping around when using the arrow keys.
+   */
+  loop?: boolean;
+  /**
+   * Optionally set to `true` to disable selection via pointer events.
+   */
+  disablePointerSelection?: boolean;
+  /**
+   * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+   */
+  vimBindings?: boolean;
+};
+declare function Command({
+  ref: forwardedRef,
+  ...props
+}: CommandProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
+/**
+ * Command menu item. Becomes active on pointer enter or through keyboard navigation.
+ * Preferably pass a `value`, otherwise the value will be inferred from `children` or
+ * the rendered item's `textContent`.
+ */
+declare function Item({
+  ref: forwardedRef,
+  ...props
+}: ItemProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element | null;
+/**
+ * Group command menu items together with a heading.
+ * Grouped items are always shown together.
+ */
+declare function Group({
+  ref: forwardedRef,
+  ...props
+}: GroupProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
+/**
+ * A visual and semantic separator between items or groups.
+ * Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.
+ */
+declare function Separator({
+  ref: forwardedRef,
+  ...props
+}: SeparatorProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element | null;
+/**
+ * Command menu input.
+ * All props are forwarded to the underyling `input` element.
+ */
+declare function Input({
+  ref: forwardedRef,
+  ...props
+}: InputProps & RefProp<HTMLInputElement>): react_jsx_runtime0.JSX.Element;
+/**
+ * Contains `Item`, `Group`, and `Separator`.
+ * Use the `--cmdk-list-height` CSS variable to animate height based on the number of results.
+ */
+declare function List({
+  ref: forwardedRef,
+  ...props
+}: ListProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
+/**
+ * Renders the command menu in a Base UI Dialog.
+ */
+declare function Dialog$1({
+  ref: forwardedRef,
+  ...props
+}: DialogProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
+/**
+ * Automatically renders when there are no results for the search query.
+ */
+declare function Empty({
+  ref: forwardedRef,
+  ...props
+}: EmptyProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element | null;
+/**
+ * You should conditionally render this with `progress` while loading asynchronous items.
+ */
+declare function Loading({
+  ref: forwardedRef,
+  ...props
+}: LoadingProps & RefProp<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
+declare const pkg: typeof Command & {
+  List: typeof List;
+  Item: typeof Item;
+  Input: typeof Input;
+  Group: typeof Group;
+  Separator: typeof Separator;
+  Dialog: typeof Dialog$1;
+  Empty: typeof Empty;
+  Loading: typeof Loading;
+};
+/** Run a selector against the store state. */
+//#endregion
+export { pkg };

package/dist/vendor/cmdk/index.mjs

@@ -0,0 +1,713 @@
+import { commandScore } from "./command-score.mjs";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react";
+import { useId } from "@base-ui/utils/useId";
+
+//#region src/vendor/cmdk/index.tsx
+const GROUP_SELECTOR = `[cmdk-group=""]`;
+const GROUP_ITEMS_SELECTOR = `[cmdk-group-items=""]`;
+const GROUP_HEADING_SELECTOR = `[cmdk-group-heading=""]`;
+const ITEM_SELECTOR = `[cmdk-item=""]`;
+const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
+const SELECT_EVENT = `cmdk-item-select`;
+const VALUE_ATTR = `data-value`;
+const defaultFilter = (value, search, keywords = []) => commandScore(value, search, keywords);
+const useLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+const srOnlyStyles = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: "0",
+	margin: "-1px",
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	borderWidth: "0"
+};
+const CommandContext = React.createContext(void 0);
+const useCommand = () => React.use(CommandContext);
+const StoreContext = React.createContext(void 0);
+const useStore = () => React.use(StoreContext);
+const GroupContext = React.createContext(void 0);
+function Command({ ref: forwardedRef, ...props }) {
+	const state = useLazyRef(() => ({
+		search: "",
+		value: props.value ?? props.defaultValue ?? "",
+		selectedItemId: void 0,
+		filtered: {
+			count: 0,
+			items: /* @__PURE__ */ new Map(),
+			groups: /* @__PURE__ */ new Set()
+		}
+	}));
+	const allItems = useLazyRef(() => /* @__PURE__ */ new Set());
+	const allGroups = useLazyRef(() => /* @__PURE__ */ new Map());
+	const ids = useLazyRef(() => /* @__PURE__ */ new Map());
+	const listeners = useLazyRef(() => /* @__PURE__ */ new Set());
+	const propsRef = useAsRef(props);
+	const { label, children: _children, value, onValueChange: _onValueChange, filter: _filter, shouldFilter: _shouldFilter, loop: _loop, disablePointerSelection: _disablePointerSelection = false, vimBindings = true, ...etc } = props;
+	const listId = useId();
+	const labelId = useId();
+	const inputId = useId();
+	const listInnerRef = React.useRef(null);
+	const schedule = useScheduleLayoutEffect();
+	const store = React.useMemo(() => {
+		return {
+			subscribe: (cb) => {
+				listeners.current.add(cb);
+				return () => listeners.current.delete(cb);
+			},
+			snapshot: () => {
+				return state.current;
+			},
+			setState: (key, value, opts) => {
+				if (Object.is(state.current[key], value)) return;
+				state.current[key] = value;
+				if (key === "search") {
+					filterItems();
+					sort();
+					schedule(1, selectFirstItem);
+				} else if (key === "value") {
+					const activeElement = document.activeElement;
+					if (activeElement && (activeElement.hasAttribute("cmdk-input") || activeElement.hasAttribute("cmdk-root"))) {
+						const input = inputId ? document.getElementById(inputId) : null;
+						if (input) input.focus();
+						else if (listId) document.getElementById(listId)?.focus();
+					}
+					schedule(7, () => {
+						state.current.selectedItemId = getSelectedItem()?.id;
+						store.emit();
+					});
+					if (!opts) schedule(5, scrollSelectedIntoView);
+					if (propsRef.current?.value !== void 0) {
+						const newValue = value ?? "";
+						propsRef.current.onValueChange?.(newValue);
+						return;
+					}
+				}
+				store.emit();
+			},
+			emit: () => {
+				listeners.current.forEach((l) => l());
+			}
+		};
+	}, []);
+	const context = React.useMemo(() => ({
+		value: (id, value, keywords) => {
+			if (value !== ids.current.get(id)?.value) {
+				ids.current.set(id, {
+					value,
+					keywords
+				});
+				state.current.filtered.items.set(id, score(value, keywords));
+				schedule(2, () => {
+					sort();
+					store.emit();
+				});
+			}
+		},
+		item: (id, groupId) => {
+			allItems.current.add(id);
+			if (groupId) if (!allGroups.current.has(groupId)) allGroups.current.set(groupId, new Set([id]));
+			else {
+				const group = allGroups.current.get(groupId);
+				if (group) group.add(id);
+			}
+			schedule(3, () => {
+				filterItems();
+				sort();
+				if (!state.current.value) selectFirstItem();
+				store.emit();
+			});
+			return () => {
+				ids.current.delete(id);
+				allItems.current.delete(id);
+				state.current.filtered.items.delete(id);
+				const selectedItem = getSelectedItem();
+				schedule(4, () => {
+					filterItems();
+					if (selectedItem?.getAttribute("id") === id) selectFirstItem();
+					store.emit();
+				});
+			};
+		},
+		group: (id) => {
+			if (!allGroups.current.has(id)) allGroups.current.set(id, /* @__PURE__ */ new Set());
+			return () => {
+				ids.current.delete(id);
+				allGroups.current.delete(id);
+			};
+		},
+		filter: () => {
+			return propsRef.current.shouldFilter ?? true;
+		},
+		label: label || props["aria-label"] || "",
+		getDisablePointerSelection: () => {
+			return propsRef.current.disablePointerSelection ?? false;
+		},
+		listId,
+		inputId,
+		labelId,
+		listInnerRef
+	}), []);
+	/** Controlled mode `value` handling. */
+	useLayoutEffect(() => {
+		if (value !== void 0) {
+			const v = value.trim();
+			state.current.value = v;
+			store.emit();
+		}
+	}, [store, value]);
+	useLayoutEffect(() => {
+		schedule(6, scrollSelectedIntoView);
+	}, [schedule]);
+	function score(value, keywords) {
+		const filter = propsRef.current?.filter ?? defaultFilter;
+		return value ? filter(value, state.current.search, keywords) : 0;
+	}
+	/** Sorts items by score, and groups by highest item score. */
+	function sort() {
+		if (!state.current.search || propsRef.current.shouldFilter === false) return;
+		const scores = state.current.filtered.items;
+		const groups = [];
+		state.current.filtered.groups.forEach((value) => {
+			const items = allGroups.current.get(value);
+			let max = 0;
+			if (items) items.forEach((item) => {
+				const score = scores.get(item) ?? 0;
+				max = Math.max(score, max);
+			});
+			groups.push([value, max]);
+		});
+		const listInsertionElement = listInnerRef.current;
+		getValidItems().sort((a, b) => {
+			const valueA = a.getAttribute("id") ?? "";
+			const valueB = b.getAttribute("id") ?? "";
+			return (scores.get(valueB) ?? 0) - (scores.get(valueA) ?? 0);
+		}).forEach((item) => {
+			const group = item.closest(GROUP_ITEMS_SELECTOR);
+			if (group) {
+				const target = item.parentElement === group ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
+				if (target) group.appendChild(target);
+			} else if (listInsertionElement) {
+				const target = item.parentElement === listInsertionElement ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
+				if (target) listInsertionElement.appendChild(target);
+			}
+		});
+		groups.sort((a, b) => b[1] - a[1]).forEach((group) => {
+			const element = listInnerRef.current?.querySelector(`${GROUP_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(group[0])}"]`);
+			if (element && element.parentElement) element.parentElement.appendChild(element);
+		});
+	}
+	function selectFirstItem() {
+		const value = getValidItems().find((item) => item.getAttribute("aria-disabled") !== "true")?.getAttribute(VALUE_ATTR);
+		store.setState("value", value ?? "");
+	}
+	/** Filters the current items. */
+	function filterItems() {
+		if (!state.current.search || propsRef.current.shouldFilter === false) {
+			state.current.filtered.count = allItems.current.size;
+			return;
+		}
+		state.current.filtered.groups = /* @__PURE__ */ new Set();
+		let itemCount = 0;
+		for (const id of allItems.current) {
+			const rank = score(ids.current.get(id)?.value ?? "", ids.current.get(id)?.keywords ?? []);
+			state.current.filtered.items.set(id, rank);
+			if (rank > 0) itemCount++;
+		}
+		for (const [groupId, group] of allGroups.current) for (const itemId of group) if ((state.current.filtered.items.get(itemId) ?? 0) > 0) {
+			state.current.filtered.groups.add(groupId);
+			break;
+		}
+		state.current.filtered.count = itemCount;
+	}
+	function scrollSelectedIntoView() {
+		requestAnimationFrame(() => {
+			const item = getSelectedItem();
+			if (item) {
+				if (item.parentElement?.firstChild === item) item.closest(GROUP_SELECTOR)?.querySelector(GROUP_HEADING_SELECTOR)?.scrollIntoView({ block: "nearest" });
+				item.scrollIntoView({ block: "nearest" });
+			}
+		});
+	}
+	/** Getters */
+	function getSelectedItem() {
+		return listInnerRef.current?.querySelector(`${ITEM_SELECTOR}[aria-selected="true"]`);
+	}
+	function getValidItems() {
+		return Array.from(listInnerRef.current?.querySelectorAll(VALID_ITEM_SELECTOR) || []);
+	}
+	/** Setters */
+	function updateSelectedToIndex(index) {
+		const item = getValidItems()[index];
+		if (item) store.setState("value", item.getAttribute(VALUE_ATTR) ?? "");
+	}
+	function updateSelectedByItem(change) {
+		const selected = getSelectedItem();
+		const items = getValidItems();
+		const index = items.findIndex((item) => item === selected);
+		let newSelected = items[index + change];
+		if (propsRef.current?.loop) newSelected = index + change < 0 ? items[items.length - 1] : index + change === items.length ? items[0] : items[index + change];
+		if (newSelected) store.setState("value", newSelected.getAttribute(VALUE_ATTR) ?? "");
+	}
+	function updateSelectedByGroup(change) {
+		let group = getSelectedItem()?.closest(GROUP_SELECTOR);
+		let item;
+		while (group && !item) {
+			group = change > 0 ? findNextSibling(group, GROUP_SELECTOR) : findPreviousSibling(group, GROUP_SELECTOR);
+			item = group?.querySelector(VALID_ITEM_SELECTOR) ?? void 0;
+		}
+		if (item) store.setState("value", item.getAttribute(VALUE_ATTR) ?? "");
+		else updateSelectedByItem(change);
+	}
+	const last = () => updateSelectedToIndex(getValidItems().length - 1);
+	const next = (e) => {
+		e.preventDefault();
+		if (e.metaKey) last();
+		else if (e.altKey) updateSelectedByGroup(1);
+		else updateSelectedByItem(1);
+	};
+	const prev = (e) => {
+		e.preventDefault();
+		if (e.metaKey) updateSelectedToIndex(0);
+		else if (e.altKey) updateSelectedByGroup(-1);
+		else updateSelectedByItem(-1);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardedRef,
+		tabIndex: -1,
+		...etc,
+		"cmdk-root": "",
+		onKeyDown: (e) => {
+			etc.onKeyDown?.(e);
+			const isComposing = e.nativeEvent.isComposing || e.keyCode === 229;
+			if (e.defaultPrevented || isComposing) return;
+			switch (e.key) {
+				case "n":
+				case "j":
+					if (vimBindings && e.ctrlKey) next(e);
+					break;
+				case "ArrowDown":
+					next(e);
+					break;
+				case "p":
+				case "k":
+					if (vimBindings && e.ctrlKey) prev(e);
+					break;
+				case "ArrowUp":
+					prev(e);
+					break;
+				case "Home":
+					e.preventDefault();
+					updateSelectedToIndex(0);
+					break;
+				case "End":
+					e.preventDefault();
+					last();
+					break;
+				case "Enter": {
+					e.preventDefault();
+					const item = getSelectedItem();
+					if (item) {
+						const event = new Event(SELECT_EVENT);
+						item.dispatchEvent(event);
+					}
+				}
+			}
+		},
+		children: [/* @__PURE__ */ jsx("label", {
+			"cmdk-label": "",
+			htmlFor: context.inputId,
+			id: context.labelId,
+			style: srOnlyStyles,
+			children: label
+		}), SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx(StoreContext, {
+			value: store,
+			children: /* @__PURE__ */ jsx(CommandContext, {
+				value: context,
+				children: child
+			})
+		}))]
+	});
+}
+/**
+* Command menu item. Becomes active on pointer enter or through keyboard navigation.
+* Preferably pass a `value`, otherwise the value will be inferred from `children` or
+* the rendered item's `textContent`.
+*/
+function Item({ ref: forwardedRef, ...props }) {
+	const id = useId();
+	const ref = React.useRef(null);
+	const groupContext = React.use(GroupContext);
+	const context = useCommand();
+	const propsRef = useAsRef(props);
+	const forceMount = propsRef.current?.forceMount ?? groupContext?.forceMount;
+	useLayoutEffect(() => {
+		if (!forceMount) return context.item(id, groupContext?.id ?? "");
+	}, [
+		context,
+		forceMount,
+		groupContext?.id,
+		id
+	]);
+	const value = useValue(id, ref, [
+		props.value,
+		props.children,
+		ref
+	], props.keywords);
+	const store = useStore();
+	const selected = useCmdk((state) => state.value && state.value === value.current);
+	const render = useCmdk((state) => forceMount ? true : context.filter() === false ? true : !state.search ? true : (state.filtered.items.get(id) ?? 0) > 0);
+	const select = React.useCallback(() => {
+		store.setState("value", value.current ?? "", true);
+	}, [store, value]);
+	const onSelect = React.useCallback(() => {
+		select();
+		propsRef.current.onSelect?.(value.current ?? "");
+	}, [
+		propsRef,
+		select,
+		value
+	]);
+	React.useEffect(() => {
+		const element = ref.current;
+		if (!element || props.disabled) return;
+		element.addEventListener(SELECT_EVENT, onSelect);
+		return () => element.removeEventListener(SELECT_EVENT, onSelect);
+	}, [
+		onSelect,
+		props.disabled,
+		render
+	]);
+	if (!render) return null;
+	const { disabled, value: _, onSelect: __, forceMount: ___, keywords: ____, ...etc } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs([ref, forwardedRef]),
+		...etc,
+		id,
+		"cmdk-item": "",
+		role: "option",
+		"aria-disabled": Boolean(disabled),
+		"aria-selected": Boolean(selected),
+		"data-disabled": Boolean(disabled),
+		"data-selected": Boolean(selected),
+		onPointerMove: disabled || context.getDisablePointerSelection() ? void 0 : select,
+		onClick: disabled ? void 0 : onSelect,
+		children: props.children
+	});
+}
+/**
+* Group command menu items together with a heading.
+* Grouped items are always shown together.
+*/
+function Group({ ref: forwardedRef, ...props }) {
+	const { heading, children: _children, forceMount, ...etc } = props;
+	const id = useId();
+	const ref = React.useRef(null);
+	const headingRef = React.useRef(null);
+	const headingId = useId();
+	const context = useCommand();
+	const render = useCmdk((state) => forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id));
+	useLayoutEffect(() => {
+		return context.group(id);
+	}, [context, id]);
+	useValue(id, ref, [
+		props.value,
+		props.heading,
+		headingRef
+	]);
+	const contextValue = React.useMemo(() => ({
+		id,
+		forceMount
+	}), [forceMount, id]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs([ref, forwardedRef]),
+		...etc,
+		"cmdk-group": "",
+		role: "presentation",
+		hidden: render ? void 0 : true,
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			ref: headingRef,
+			"cmdk-group-heading": "",
+			"aria-hidden": true,
+			id: headingId,
+			children: heading
+		}), SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx("div", {
+			"cmdk-group-items": "",
+			role: "group",
+			"aria-labelledby": heading ? headingId : void 0,
+			children: /* @__PURE__ */ jsx(GroupContext, {
+				value: contextValue,
+				children: child
+			})
+		}))]
+	});
+}
+/**
+* A visual and semantic separator between items or groups.
+* Visible when the search query is empty or `alwaysRender` is true, hidden otherwise.
+*/
+function Separator({ ref: forwardedRef, ...props }) {
+	const { alwaysRender, ...etc } = props;
+	const ref = React.useRef(null);
+	const render = useCmdk((state) => !state.search);
+	if (!alwaysRender && !render) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs([ref, forwardedRef]),
+		...etc,
+		"cmdk-separator": "",
+		role: "separator"
+	});
+}
+/**
+* Command menu input.
+* All props are forwarded to the underyling `input` element.
+*/
+function Input({ ref: forwardedRef, ...props }) {
+	const { onValueChange, ...etc } = props;
+	const isControlled = props.value != null;
+	const store = useStore();
+	const search = useCmdk((state) => state.search);
+	const selectedItemId = useCmdk((state) => state.selectedItemId);
+	const context = useCommand();
+	React.useEffect(() => {
+		if (props.value != null) store.setState("search", props.value);
+	}, [props.value, store]);
+	return /* @__PURE__ */ jsx("input", {
+		ref: forwardedRef,
+		...etc,
+		"cmdk-input": "",
+		autoComplete: "off",
+		autoCorrect: "off",
+		spellCheck: false,
+		"aria-autocomplete": "list",
+		role: "combobox",
+		"aria-expanded": true,
+		"aria-controls": context.listId,
+		"aria-labelledby": context.labelId,
+		"aria-activedescendant": selectedItemId,
+		id: context.inputId,
+		type: "text",
+		value: isControlled ? props.value : search,
+		onChange: (e) => {
+			if (!isControlled) store.setState("search", e.target.value);
+			onValueChange?.(e.target.value);
+		}
+	});
+}
+/**
+* Contains `Item`, `Group`, and `Separator`.
+* Use the `--cmdk-list-height` CSS variable to animate height based on the number of results.
+*/
+function List({ ref: forwardedRef, ...props }) {
+	const { children: _children, label = "Suggestions", ...etc } = props;
+	const ref = React.useRef(null);
+	const heightRef = React.useRef(null);
+	const selectedItemId = useCmdk((state) => state.selectedItemId);
+	const context = useCommand();
+	React.useEffect(() => {
+		if (heightRef.current && ref.current) {
+			const el = heightRef.current;
+			const wrapper = ref.current;
+			let animationFrame;
+			const observer = new ResizeObserver(() => {
+				animationFrame = requestAnimationFrame(() => {
+					const height = el.offsetHeight;
+					wrapper.style.setProperty(`--cmdk-list-height`, `${height.toFixed(1)}px`);
+				});
+			});
+			observer.observe(el);
+			return () => {
+				if (animationFrame !== void 0) cancelAnimationFrame(animationFrame);
+				observer.disconnect();
+			};
+		}
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs([ref, forwardedRef]),
+		...etc,
+		"cmdk-list": "",
+		role: "listbox",
+		tabIndex: -1,
+		"aria-activedescendant": selectedItemId,
+		"aria-label": label,
+		id: context.listId,
+		children: SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs([heightRef, context.listInnerRef]),
+			"cmdk-list-sizer": "",
+			children: child
+		}))
+	});
+}
+/**
+* Renders the command menu in a Base UI Dialog.
+*/
+function Dialog$1({ ref: forwardedRef, ...props }) {
+	const { open, onOpenChange, overlayClassName, contentClassName, container, ...etc } = props;
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				"cmdk-overlay": "",
+				className: overlayClassName
+			}), /* @__PURE__ */ jsx(Dialog.Popup, {
+				"aria-label": props.label,
+				"cmdk-dialog": "",
+				className: contentClassName,
+				children: /* @__PURE__ */ jsx(Command, {
+					ref: forwardedRef,
+					...etc
+				})
+			})]
+		})
+	});
+}
+/**
+* Automatically renders when there are no results for the search query.
+*/
+function Empty({ ref: forwardedRef, ...props }) {
+	if (!useCmdk((state) => state.filtered.count === 0)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardedRef,
+		...props,
+		"cmdk-empty": "",
+		role: "presentation"
+	});
+}
+/**
+* You should conditionally render this with `progress` while loading asynchronous items.
+*/
+function Loading({ ref: forwardedRef, ...props }) {
+	const { progress, children: _children, label = "Loading...", ...etc } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardedRef,
+		...etc,
+		"cmdk-loading": "",
+		role: "progressbar",
+		"aria-valuenow": progress,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-label": label,
+		children: SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			children: child
+		}))
+	});
+}
+const pkg = Object.assign(Command, {
+	List,
+	Item,
+	Input,
+	Group,
+	Separator,
+	Dialog: Dialog$1,
+	Empty,
+	Loading
+});
+/**
+*
+*
+* Helpers
+*
+*
+*/
+function findNextSibling(el, selector) {
+	let sibling = el.nextElementSibling;
+	while (sibling) {
+		if (sibling.matches(selector)) return sibling;
+		sibling = sibling.nextElementSibling;
+	}
+}
+function findPreviousSibling(el, selector) {
+	let sibling = el.previousElementSibling;
+	while (sibling) {
+		if (sibling.matches(selector)) return sibling;
+		sibling = sibling.previousElementSibling;
+	}
+}
+function useAsRef(data) {
+	const ref = React.useRef(data);
+	useLayoutEffect(() => {
+		ref.current = data;
+	});
+	return ref;
+}
+function useLazyRef(fn) {
+	const ref = React.useRef(void 0);
+	if (ref.current === void 0) ref.current = fn();
+	return ref;
+}
+/** Run a selector against the store state. */
+function useCmdk(selector) {
+	const store = useStore();
+	const cb = () => selector(store.snapshot());
+	return React.useSyncExternalStore(store.subscribe, cb, cb);
+}
+function useValue(id, ref, deps, aliases = []) {
+	const valueRef = React.useRef(void 0);
+	const context = useCommand();
+	useLayoutEffect(() => {
+		const value = (() => {
+			for (const part of deps) {
+				if (typeof part === "string") return part.trim();
+				if (typeof part === "object" && part !== null && "current" in part) {
+					if (part.current) return part.current.textContent?.trim();
+					return valueRef.current;
+				}
+			}
+		})();
+		const keywords = aliases.map((alias) => alias.trim());
+		if (value) {
+			context.value(id, value, keywords);
+			ref.current?.setAttribute(VALUE_ATTR, value);
+			valueRef.current = value;
+		}
+	});
+	return valueRef;
+}
+/** Imperatively run a function on the next layout effect cycle. */
+function useScheduleLayoutEffect() {
+	const [state, setState] = React.useState(null);
+	const fnsRef = useLazyRef(() => /* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		fnsRef.current.forEach((f) => f());
+		fnsRef.current.clear();
+	}, [fnsRef, state]);
+	return (id, cb) => {
+		fnsRef.current.set(id, cb);
+		setState({});
+	};
+}
+function renderChildren(children) {
+	const childrenType = children.type;
+	if (typeof childrenType === "function") return childrenType(children.props);
+	else if ("render" in childrenType) return childrenType.render(children.props);
+	else return children;
+}
+function SlottableWithNestedChildren({ asChild, children }, render) {
+	if (asChild && React.isValidElement(children)) {
+		const child = children;
+		const renderedChild = renderChildren(child);
+		if (!React.isValidElement(renderedChild)) return render(child.props.children);
+		return React.createElement(renderedChild.type, {
+			...renderedChild.props,
+			ref: child.ref
+		}, render(child.props.children));
+	}
+	return render(children);
+}
+function mergeRefs(refs) {
+	return (value) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") ref(value);
+			else if (ref != null) ref.current = value;
+		});
+	};
+}
+
+//#endregion
+export { pkg };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucdjs-internal/shared-ui",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "type": "module",
   "author": {
     "name": "Lucas Nørgård",
@@ -21,7 +21,8 @@
     "#components/*": "./src/components/*.tsx",
     "#ui/*": "./src/ui/*.tsx",
     "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
+    "#hooks/*": "./src/hooks/*.ts",
+    "#vendor/cmdk": "./src/vendor/cmdk/index.tsx"
   },
   "exports": {
     ".": "./dist/index.mjs",
@@ -64,25 +65,25 @@
     "dist"
   ],
   "engines": {
-    "node": ">=22.18"
+    "node": ">=24.13"
   },
   "dependencies": {
-    "@base-ui/react": "1.1.0",
+    "@base-ui/react": "1.2.0",
+    "@base-ui/utils": "0.2.5",
     "@fontsource-variable/inter": "5.2.8",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "cmdk": "1.1.1",
-    "lucide-react": "0.563.0",
+    "lucide-react": "0.574.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shiki": "3.22.0",
-    "tailwind-merge": "3.4.0",
-    "tailwindcss": "4.1.18",
+    "tailwind-merge": "3.4.1",
+    "tailwindcss": "4.2.0",
     "tw-animate-css": "1.4.0",
     "zod": "4.3.6"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "2.12.4",
+    "@eslint-react/eslint-plugin": "2.13.0",
     "@luxass/eslint-config": "7.2.0",
     "@rollup/plugin-babel": "6.1.0",
     "@types/react": "19.2.14",