@noxickon/onyx 5.0.2 → 6.0.0

package/dist/components/Combobox/Combobox.types.d.ts

@@ -0,0 +1,64 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComboboxChipProps as BaseComboboxChipProps, ComboboxChipsProps as BaseComboboxChipsProps, ComboboxClearProps as BaseComboboxClearProps, ComboboxCollectionProps as BaseComboboxCollectionProps, ComboboxEmptyProps as BaseComboboxEmptyProps, ComboboxGroupLabelProps as BaseComboboxGroupLabelProps, ComboboxGroupProps as BaseComboboxGroupProps, ComboboxInputGroupProps as BaseComboboxInputGroupProps, ComboboxInputProps as BaseComboboxInputProps, ComboboxItemProps as BaseComboboxItemProps, ComboboxListProps as BaseComboboxListProps, ComboboxPopupProps as BaseComboboxPopupProps, ComboboxPositionerProps as BaseComboboxPositionerProps, ComboboxRootProps as BaseComboboxRootProps, ComboboxTriggerProps as BaseComboboxTriggerProps, ComboboxValueProps as BaseComboboxValueProps } from '@base-ui/react/combobox';
+import { SeparatorProps as BaseSeparatorProps } from '@base-ui/react/separator';
+import { AddonVariant, InlineAddonAlign } from '../../internal/styles/addonStyles';
+interface OxComboboxProps<Value = string, Multiple extends boolean | undefined = false> extends Omit<BaseComboboxRootProps<Value, Multiple>, 'className'> {
+    className?: string;
+    clearable?: boolean;
+}
+interface OxComboboxInputGroupProps extends Omit<BaseComboboxInputGroupProps, 'className'> {
+    className?: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+}
+interface OxComboboxInputProps extends Omit<BaseComboboxInputProps, 'className' | 'size'> {
+    className?: string;
+}
+interface OxComboboxTriggerProps extends Omit<BaseComboboxTriggerProps, 'className'> {
+    className?: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+}
+interface OxComboboxClearProps extends Omit<BaseComboboxClearProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxContentProps extends Omit<BaseComboboxPositionerProps, 'className' | 'render'> {
+    className?: string;
+    render?: BaseComboboxPopupProps['render'];
+}
+interface OxComboboxListProps extends Omit<BaseComboboxListProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxItemProps extends Omit<BaseComboboxItemProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxEmptyProps extends Omit<BaseComboboxEmptyProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxGroupProps extends Omit<BaseComboboxGroupProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxGroupLabelProps extends Omit<BaseComboboxGroupLabelProps, 'className'> {
+    className?: string;
+}
+type OxComboboxCollectionProps = BaseComboboxCollectionProps;
+interface OxComboboxSeparatorProps extends Omit<BaseSeparatorProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxChipsProps extends Omit<BaseComboboxChipsProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxValueProps extends Omit<BaseComboboxValueProps, 'className'> {
+    className?: string;
+}
+interface OxComboboxChipProps extends Omit<BaseComboboxChipProps, 'className'> {
+    className?: string;
+    removable?: boolean;
+    removeLabel?: string;
+}
+interface OxComboboxAddonProps extends Omit<ComponentPropsWithoutRef<'span'>, 'className'> {
+    align?: InlineAddonAlign;
+    className?: string;
+    variant?: AddonVariant;
+}
+export type { OxComboboxAddonProps, OxComboboxChipProps, OxComboboxChipsProps, OxComboboxClearProps, OxComboboxCollectionProps, OxComboboxContentProps, OxComboboxEmptyProps, OxComboboxGroupLabelProps, OxComboboxGroupProps, OxComboboxInputGroupProps, OxComboboxInputProps, OxComboboxItemProps, OxComboboxListProps, OxComboboxProps, OxComboboxSeparatorProps, OxComboboxTriggerProps, OxComboboxValueProps, };

package/dist/components/Combobox/index.d.ts

@@ -0,0 +1,24 @@
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+import { OxComboboxAddon, OxComboboxChip, OxComboboxChips, OxComboboxClear, OxComboboxCollection, OxComboboxContent, OxComboboxEmpty, OxComboboxGroup, OxComboboxGroupLabel, OxComboboxInput, OxComboboxInputGroup, OxComboboxItem, OxComboboxList, OxComboboxRoot, OxComboboxSeparator, OxComboboxTrigger, OxComboboxValue } from './Combobox';
+declare const OxCombobox: typeof OxComboboxRoot & {
+    InputGroup: typeof OxComboboxInputGroup;
+    Input: typeof OxComboboxInput;
+    Addon: typeof OxComboboxAddon;
+    Trigger: typeof OxComboboxTrigger;
+    Value: typeof OxComboboxValue;
+    Clear: typeof OxComboboxClear;
+    Content: typeof OxComboboxContent;
+    List: typeof OxComboboxList;
+    Item: typeof OxComboboxItem;
+    Empty: typeof OxComboboxEmpty;
+    Group: typeof OxComboboxGroup;
+    GroupLabel: typeof OxComboboxGroupLabel;
+    Collection: typeof OxComboboxCollection;
+    Separator: typeof OxComboboxSeparator;
+    Chips: typeof OxComboboxChips;
+    Chip: typeof OxComboboxChip;
+};
+declare const useOxComboboxFilter: typeof BaseCombobox.useFilter;
+declare const useOxComboboxFilteredItems: typeof BaseCombobox.useFilteredItems;
+export { OxCombobox, useOxComboboxFilter, useOxComboboxFilteredItems };
+export type { OxComboboxAddonProps, OxComboboxChipProps, OxComboboxChipsProps, OxComboboxClearProps, OxComboboxCollectionProps, OxComboboxContentProps, OxComboboxEmptyProps, OxComboboxGroupLabelProps, OxComboboxGroupProps, OxComboboxInputGroupProps, OxComboboxInputProps, OxComboboxItemProps, OxComboboxListProps, OxComboboxProps, OxComboboxSeparatorProps, OxComboboxTriggerProps, OxComboboxValueProps, } from './Combobox.types';

package/dist/components/Combobox/index.js

@@ -0,0 +1,24 @@
+import { useComboboxFilter as e } from "../../node_modules/@base-ui/react/combobox/root/utils/useFilter.js";
+import { useFilteredItems as t } from "../../node_modules/@base-ui/react/combobox/root/utils/useFilteredItems.js";
+import { OxComboboxAddon as n, OxComboboxChip as r, OxComboboxChips as i, OxComboboxClear as a, OxComboboxCollection as o, OxComboboxContent as s, OxComboboxEmpty as c, OxComboboxGroup as l, OxComboboxGroupLabel as u, OxComboboxInput as d, OxComboboxInputGroup as f, OxComboboxItem as p, OxComboboxList as m, OxComboboxRoot as h, OxComboboxSeparator as g, OxComboboxTrigger as _, OxComboboxValue as v } from "./Combobox.js";
+//#region src/components/Combobox/index.ts
+var y = Object.assign(h, {
+	InputGroup: f,
+	Input: d,
+	Addon: n,
+	Trigger: _,
+	Value: v,
+	Clear: a,
+	Content: s,
+	List: m,
+	Item: p,
+	Empty: c,
+	Group: l,
+	GroupLabel: u,
+	Collection: o,
+	Separator: g,
+	Chips: i,
+	Chip: r
+}), b = e, x = t;
+//#endregion
+export { y as OxCombobox, b as useOxComboboxFilter, x as useOxComboboxFilteredItems };

package/dist/components/Command/Command.d.ts

@@ -0,0 +1,14 @@
+import { OxCommandDialogProps, OxCommandEmptyProps, OxCommandFooterProps, OxCommandGroupLabelProps, OxCommandGroupProps, OxCommandInputProps, OxCommandItemProps, OxCommandListProps, OxCommandLoadingProps, OxCommandProps, OxCommandSeparatorProps, OxCommandShortcutProps } from './Command.types';
+declare function OxCommandRoot<Value = string>({ children, className, filter, items, onInputValueChange, onValueChange, shouldFilter, surface, ...props }: OxCommandProps<Value>): import("react").JSX.Element;
+declare function OxCommandInput({ className, icon, ...props }: OxCommandInputProps): import("react").JSX.Element;
+declare function OxCommandList({ className, ...props }: OxCommandListProps): import("react").JSX.Element;
+declare function OxCommandItem({ children, className, destructive, onSelect, ...props }: OxCommandItemProps): import("react").JSX.Element;
+declare function OxCommandEmpty({ className, ...props }: OxCommandEmptyProps): import("react").JSX.Element;
+declare function OxCommandGroup({ className, ...props }: OxCommandGroupProps): import("react").JSX.Element;
+declare function OxCommandGroupLabel({ className, ...props }: OxCommandGroupLabelProps): import("react").JSX.Element;
+declare function OxCommandSeparator({ className, ...props }: OxCommandSeparatorProps): import("react").JSX.Element;
+declare function OxCommandShortcut({ className, render, ...props }: OxCommandShortcutProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCommandLoading({ children, className, label, render, ...props }: OxCommandLoadingProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCommandFooter({ children, className, render, ...props }: OxCommandFooterProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare function OxCommandDialog<Value = string>({ children, className, closeOnSelect, defaultOpen, modal, onOpenChange, onValueChange, open, title, ...commandProps }: OxCommandDialogProps<Value>): import("react").JSX.Element;
+export { OxCommandDialog, OxCommandEmpty, OxCommandFooter, OxCommandGroup, OxCommandGroupLabel, OxCommandInput, OxCommandItem, OxCommandList, OxCommandLoading, OxCommandRoot, OxCommandSeparator, OxCommandShortcut, };

package/dist/components/Command/Command.js

@@ -0,0 +1,356 @@
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { createCompoundContext as t } from "../../internal/context/createCompoundContext/createCompoundContext.js";
+import { useRender as n } from "../../node_modules/@base-ui/react/use-render/useRender.js";
+import { DialogBackdrop as r } from "../../node_modules/@base-ui/react/dialog/backdrop/DialogBackdrop.js";
+import { DialogPopup as i } from "../../node_modules/@base-ui/react/dialog/popup/DialogPopup.js";
+import { DialogPortal as a } from "../../node_modules/@base-ui/react/dialog/portal/DialogPortal.js";
+import { DialogTitle as o } from "../../node_modules/@base-ui/react/dialog/title/DialogTitle.js";
+import { DialogViewport as s } from "../../node_modules/@base-ui/react/dialog/viewport/DialogViewport.js";
+import { PortalContainerContext as c } from "../../internal/context/PortalContainerContext/PortalContainerContext.js";
+import { ComboboxInput as l } from "../../node_modules/@base-ui/react/combobox/input/ComboboxInput.js";
+import { ComboboxList as u } from "../../node_modules/@base-ui/react/combobox/list/ComboboxList.js";
+import { ComboboxGroup as d } from "../../node_modules/@base-ui/react/combobox/group/ComboboxGroup.js";
+import { ComboboxGroupLabel as f } from "../../node_modules/@base-ui/react/combobox/group-label/ComboboxGroupLabel.js";
+import { ComboboxItem as p } from "../../node_modules/@base-ui/react/combobox/item/ComboboxItem.js";
+import { ComboboxEmpty as m } from "../../node_modules/@base-ui/react/combobox/empty/ComboboxEmpty.js";
+import { Separator as h } from "../../node_modules/@base-ui/react/separator/Separator.js";
+import { OxSpinner as g } from "../Spinner/Spinner.js";
+import { ComboboxRoot as _ } from "../../node_modules/@base-ui/react/combobox/root/ComboboxRoot.js";
+import { DialogRoot as v } from "../../node_modules/@base-ui/react/dialog/root/DialogRoot.js";
+import { dialogVariants as y } from "../Dialog/Dialog.styles.js";
+import { commandDialogBackdropMotion as b, commandDialogPopup as x, commandDialogPopupMotion as S, commandDialogViewport as C, commandVariants as w } from "./Command.styles.js";
+import { commandScore as T } from "./commandScore.js";
+import { dispatchCommandSelection as E } from "./commandSelection.js";
+import { useEffect as D, useId as O, useRef as k, useState as ee } from "react";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+//#region src/components/Command/Command.tsx
+var N = e(), P = w(), { Provider: F, useRequiredContext: I } = t("OxCommand"), { Provider: L, useOptionalContext: R } = t("OxCommand");
+function z(e) {
+	if (typeof e == "string") return e;
+	if (e && typeof e == "object") {
+		let t = e;
+		if (typeof t.label == "string") return t.label;
+		if (typeof t.value == "string") return t.value;
+	}
+	return e == null ? "" : String(e);
+}
+function B(e) {
+	if (e && typeof e == "object") {
+		let t = e.keywords;
+		if (Array.isArray(t)) return t.filter((e) => typeof e == "string");
+	}
+}
+function V(e, t, n, r) {
+	if (!e) return;
+	if (!n) return e;
+	let i = t.trim();
+	if (!i) return e;
+	let a = [];
+	for (let t of e) {
+		let e = z(t), n = B(t), o = r ? r(e, i, n) : T(e, i, n ?? []);
+		o > 0 && a.push({
+			item: t,
+			score: o
+		});
+	}
+	return a.sort((e, t) => t.score - e.score), a.map((e) => e.item);
+}
+function H(e) {
+	let t = (0, N.c)(38), n, r, i, a, o, s, c, l, u;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3], a = t[4], o = t[5], s = t[6], c = t[7], l = t[8], u = t[9]) : ({children: n, className: r, filter: i, items: a, onInputValueChange: o, onValueChange: s, shouldFilter: l, surface: u, ...c} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i, t[4] = a, t[5] = o, t[6] = s, t[7] = c, t[8] = l, t[9] = u);
+	let d = l === void 0 ? !0 : l, f = u === void 0 ? "panel" : u, [p, m] = ee(""), h;
+	t[10] === Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ new Map(), t[10] = h) : h = t[10];
+	let g = k(h), v = O(), y;
+	t[11] === o ? y = t[12] : (y = (e, t) => {
+		m(e), o?.(e, t);
+	}, t[11] = o, t[12] = y);
+	let b = y, x;
+	t[13] === s ? x = t[14] : (x = (e, t) => {
+		E(g.current, e), s?.(e, t);
+	}, t[13] = s, t[14] = x);
+	let S = x, C;
+	t[15] !== i || t[16] !== a || t[17] !== p || t[18] !== d ? (C = V(a, p, d, i), t[15] = i, t[16] = a, t[17] = p, t[18] = d, t[19] = C) : C = t[19];
+	let T = C, D;
+	t[20] === v ? D = t[21] : (D = {
+		listId: v,
+		registryRef: g
+	}, t[20] = v, t[21] = D);
+	let A = D, M;
+	t[22] !== r || t[23] !== f ? (M = w({ surface: f }).root({ class: r }), t[22] = r, t[23] = f, t[24] = M) : M = t[24];
+	let P;
+	t[25] !== n || t[26] !== M ? (P = /* @__PURE__ */ j("div", {
+		className: M,
+		"data-ox-slot": "command",
+		children: n
+	}), t[25] = n, t[26] = M, t[27] = P) : P = t[27];
+	let I;
+	t[28] !== T || t[29] !== b || t[30] !== S || t[31] !== a || t[32] !== c || t[33] !== P ? (I = /* @__PURE__ */ j(_, {
+		...c,
+		autoHighlight: !0,
+		filter: null,
+		filteredItems: T,
+		inline: !0,
+		items: a,
+		onInputValueChange: b,
+		onValueChange: S,
+		children: P
+	}), t[28] = T, t[29] = b, t[30] = S, t[31] = a, t[32] = c, t[33] = P, t[34] = I) : I = t[34];
+	let L;
+	return t[35] !== A || t[36] !== I ? (L = /* @__PURE__ */ j(F, {
+		value: A,
+		children: I
+	}), t[35] = A, t[36] = I, t[37] = L) : L = t[37], L;
+}
+function U(e) {
+	let t = (0, N.c)(19), n, r, i;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3]) : ({className: n, icon: r, ...i} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i);
+	let a = R(), { listId: o } = I("OxCommand.Input"), s = i["aria-label"] != null || i["aria-labelledby"] != null, c = i["aria-labelledby"] ?? a?.labelledBy, u = s || a?.labelledBy ? i["aria-label"] : "Search commands", d;
+	t[4] === Symbol.for("react.memo_cache_sentinel") ? (d = P.inputWrapper(), t[4] = d) : d = t[4];
+	let f;
+	t[5] === r ? f = t[6] : (f = r != null && /* @__PURE__ */ j("span", {
+		"aria-hidden": !0,
+		className: P.inputIcon(),
+		children: r
+	}), t[5] = r, t[6] = f);
+	let p;
+	t[7] === n ? p = t[8] : (p = P.input({ class: n }), t[7] = n, t[8] = p);
+	let m = a?.inputRef ?? void 0, h;
+	t[9] !== u || t[10] !== c || t[11] !== o || t[12] !== i || t[13] !== p || t[14] !== m ? (h = /* @__PURE__ */ j(l, {
+		"aria-controls": o,
+		"aria-expanded": !0,
+		"aria-label": u,
+		"aria-labelledby": c,
+		...i,
+		className: p,
+		ref: m
+	}), t[9] = u, t[10] = c, t[11] = o, t[12] = i, t[13] = p, t[14] = m, t[15] = h) : h = t[15];
+	let g;
+	return t[16] !== f || t[17] !== h ? (g = /* @__PURE__ */ M("div", {
+		className: d,
+		"data-ox-slot": "command-input",
+		children: [f, h]
+	}), t[16] = f, t[17] = h, t[18] = g) : g = t[18], g;
+}
+function W(e) {
+	let t = (0, N.c)(9), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let { listId: i } = I("OxCommand.List"), a;
+	t[3] === n ? a = t[4] : (a = P.list({ class: n }), t[3] = n, t[4] = a);
+	let o;
+	return t[5] !== i || t[6] !== r || t[7] !== a ? (o = /* @__PURE__ */ j(u, {
+		id: i,
+		"aria-label": "Commands",
+		...r,
+		className: a,
+		"data-ox-slot": "command-list"
+	}), t[5] = i, t[6] = r, t[7] = a, t[8] = o) : o = t[8], o;
+}
+function G(e) {
+	let t = (0, N.c)(19), n, r, i, a, o;
+	t[0] === e ? (n = t[1], r = t[2], i = t[3], a = t[4], o = t[5]) : ({children: n, className: r, destructive: i, onSelect: a, ...o} = e, t[0] = e, t[1] = n, t[2] = r, t[3] = i, t[4] = a, t[5] = o);
+	let { registryRef: s } = I("OxCommand.Item"), c = k(a), l = o.value, u;
+	t[6] === a ? u = t[7] : (u = () => {
+		c.current = a;
+	}, t[6] = a, t[7] = u), D(u);
+	let d, f;
+	t[8] !== l || t[9] !== s ? (d = () => {
+		if (l === void 0) return;
+		let e = s.current;
+		return e.set(l, (e) => c.current?.(e)), () => {
+			e.delete(l);
+		};
+	}, f = [s, l], t[8] = l, t[9] = s, t[10] = d, t[11] = f) : (d = t[10], f = t[11]), D(d, f);
+	let m;
+	t[12] === r ? m = t[13] : (m = P.item({ class: r }), t[12] = r, t[13] = m);
+	let h = i ? "" : void 0, g;
+	return t[14] !== n || t[15] !== o || t[16] !== m || t[17] !== h ? (g = /* @__PURE__ */ j(p, {
+		...o,
+		className: m,
+		"data-destructive": h,
+		"data-ox-slot": "command-item",
+		children: n
+	}), t[14] = n, t[15] = o, t[16] = m, t[17] = h, t[18] = g) : g = t[18], g;
+}
+function K(e) {
+	let t = (0, N.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let i;
+	t[3] === n ? i = t[4] : (i = P.empty({ class: n }), t[3] = n, t[4] = i);
+	let a;
+	return t[5] !== r || t[6] !== i ? (a = /* @__PURE__ */ j(m, {
+		...r,
+		className: i,
+		"data-ox-slot": "command-empty"
+	}), t[5] = r, t[6] = i, t[7] = a) : a = t[7], a;
+}
+function q(e) {
+	let t = (0, N.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let i;
+	t[3] === n ? i = t[4] : (i = P.group({ class: n }), t[3] = n, t[4] = i);
+	let a;
+	return t[5] !== r || t[6] !== i ? (a = /* @__PURE__ */ j(d, {
+		...r,
+		className: i,
+		"data-ox-slot": "command-group"
+	}), t[5] = r, t[6] = i, t[7] = a) : a = t[7], a;
+}
+function J(e) {
+	let t = (0, N.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let i;
+	t[3] === n ? i = t[4] : (i = P.groupLabel({ class: n }), t[3] = n, t[4] = i);
+	let a;
+	return t[5] !== r || t[6] !== i ? (a = /* @__PURE__ */ j(f, {
+		...r,
+		className: i,
+		"data-ox-slot": "command-group-label"
+	}), t[5] = r, t[6] = i, t[7] = a) : a = t[7], a;
+}
+function Y(e) {
+	let t = (0, N.c)(8), n, r;
+	t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
+	let i;
+	t[3] === n ? i = t[4] : (i = P.separator({ class: n }), t[3] = n, t[4] = i);
+	let a;
+	return t[5] !== r || t[6] !== i ? (a = /* @__PURE__ */ j(h, {
+		...r,
+		className: i,
+		"data-ox-slot": "command-separator"
+	}), t[5] = r, t[6] = i, t[7] = a) : a = t[7], a;
+}
+function X(e) {
+	let t = (0, N.c)(14), r, i, a;
+	t[0] === e ? (r = t[1], i = t[2], a = t[3]) : ({className: r, render: a, ...i} = e, t[0] = e, t[1] = r, t[2] = i, t[3] = a);
+	let o;
+	t[4] === a ? o = t[5] : (o = a ?? /* @__PURE__ */ j("span", {}), t[4] = a, t[5] = o);
+	let s;
+	t[6] === r ? s = t[7] : (s = P.shortcut({ class: r }), t[6] = r, t[7] = s);
+	let c;
+	t[8] !== i || t[9] !== s ? (c = {
+		...i,
+		className: s,
+		"data-ox-slot": "command-shortcut"
+	}, t[8] = i, t[9] = s, t[10] = c) : c = t[10];
+	let l;
+	return t[11] !== o || t[12] !== c ? (l = {
+		render: o,
+		props: c
+	}, t[11] = o, t[12] = c, t[13] = l) : l = t[13], n(l);
+}
+function Z(e) {
+	let t = (0, N.c)(20), r, i, a, o, s;
+	t[0] === e ? (r = t[1], i = t[2], a = t[3], o = t[4], s = t[5]) : ({children: r, className: i, label: a, render: s, ...o} = e, t[0] = e, t[1] = r, t[2] = i, t[3] = a, t[4] = o, t[5] = s);
+	let c;
+	t[6] === s ? c = t[7] : (c = s ?? /* @__PURE__ */ j("div", {}), t[6] = s, t[7] = c);
+	let l;
+	t[8] === i ? l = t[9] : (l = P.loading({ class: i }), t[8] = i, t[9] = l);
+	let u;
+	t[10] === Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ j(g, {}), t[10] = u) : u = t[10];
+	let d = a ?? r, f;
+	t[11] === d ? f = t[12] : (f = /* @__PURE__ */ M(A, { children: [u, d] }), t[11] = d, t[12] = f);
+	let p;
+	t[13] !== o || t[14] !== l || t[15] !== f ? (p = {
+		...o,
+		"aria-live": "polite",
+		role: "status",
+		className: l,
+		"data-ox-slot": "command-loading",
+		children: f
+	}, t[13] = o, t[14] = l, t[15] = f, t[16] = p) : p = t[16];
+	let m;
+	return t[17] !== c || t[18] !== p ? (m = {
+		render: c,
+		props: p
+	}, t[17] = c, t[18] = p, t[19] = m) : m = t[19], n(m);
+}
+function Q(e) {
+	let t = (0, N.c)(16), r, i, a, o;
+	t[0] === e ? (r = t[1], i = t[2], a = t[3], o = t[4]) : ({children: r, className: i, render: o, ...a} = e, t[0] = e, t[1] = r, t[2] = i, t[3] = a, t[4] = o);
+	let s;
+	t[5] === o ? s = t[6] : (s = o ?? /* @__PURE__ */ j("div", {}), t[5] = o, t[6] = s);
+	let c;
+	t[7] === i ? c = t[8] : (c = P.footer({ class: i }), t[7] = i, t[8] = c);
+	let l;
+	t[9] !== r || t[10] !== a || t[11] !== c ? (l = {
+		...a,
+		className: c,
+		"data-ox-slot": "command-footer",
+		children: r
+	}, t[9] = r, t[10] = a, t[11] = c, t[12] = l) : l = t[12];
+	let u;
+	return t[13] !== s || t[14] !== l ? (u = {
+		render: s,
+		props: l
+	}, t[13] = s, t[14] = l, t[15] = u) : u = t[15], n(u);
+}
+function $(e) {
+	let t = (0, N.c)(44), n, l, u, d, f, p, m, h, g, _;
+	t[0] === e ? (n = t[1], l = t[2], u = t[3], d = t[4], f = t[5], p = t[6], m = t[7], h = t[8], g = t[9], _ = t[10]) : ({children: n, className: l, closeOnSelect: h, defaultOpen: d, modal: g, onOpenChange: f, onValueChange: p, open: m, title: _, ...u} = e, t[0] = e, t[1] = n, t[2] = l, t[3] = u, t[4] = d, t[5] = f, t[6] = p, t[7] = m, t[8] = h, t[9] = g, t[10] = _);
+	let w = h === void 0 ? !0 : h, T = g === void 0 ? !0 : g, E = _ === void 0 ? "Command menu" : _, [D, A] = ee(null), P = k(null), F = k(null), I = O(), R;
+	t[11] !== w || t[12] !== p ? (R = (e, t) => {
+		p?.(e, t), w && F.current?.close();
+	}, t[11] = w, t[12] = p, t[13] = R) : R = t[13];
+	let z = R, B;
+	t[14] === I ? B = t[15] : (B = {
+		inputRef: P,
+		labelledBy: I
+	}, t[14] = I, t[15] = B);
+	let V = B, U;
+	t[16] === Symbol.for("react.memo_cache_sentinel") ? (U = /* @__PURE__ */ j(r, {
+		className: y().backdrop({ class: b }),
+		"data-ox-slot": "dialog-backdrop"
+	}), t[16] = U) : U = t[16];
+	let W;
+	t[17] === Symbol.for("react.memo_cache_sentinel") ? (W = y().viewport({ class: C }), t[17] = W) : W = t[17];
+	let G;
+	t[18] === l ? G = t[19] : (G = y().content({ class: `${x} ${S} ${l ?? ""}` }), t[18] = l, t[19] = G);
+	let K;
+	t[20] === Symbol.for("react.memo_cache_sentinel") ? (K = (e) => A(e), t[20] = K) : K = t[20];
+	let q;
+	t[21] !== E || t[22] !== I ? (q = /* @__PURE__ */ j(o, {
+		id: I,
+		className: "sr-only",
+		children: E
+	}), t[21] = E, t[22] = I, t[23] = q) : q = t[23];
+	let J = u, Y;
+	t[24] !== n || t[25] !== z || t[26] !== J ? (Y = /* @__PURE__ */ j(H, {
+		...J,
+		surface: "bare",
+		onValueChange: z,
+		children: n
+	}), t[24] = n, t[25] = z, t[26] = J, t[27] = Y) : Y = t[27];
+	let X;
+	t[28] !== V || t[29] !== Y ? (X = /* @__PURE__ */ j(L, {
+		value: V,
+		children: Y
+	}), t[28] = V, t[29] = Y, t[30] = X) : X = t[30];
+	let Z;
+	t[31] !== D || t[32] !== X ? (Z = /* @__PURE__ */ j(c, {
+		value: D,
+		children: X
+	}), t[31] = D, t[32] = X, t[33] = Z) : Z = t[33];
+	let Q;
+	t[34] !== q || t[35] !== Z || t[36] !== G ? (Q = /* @__PURE__ */ M(a, { children: [U, /* @__PURE__ */ j(s, {
+		className: W,
+		"data-ox-slot": "dialog-viewport",
+		children: /* @__PURE__ */ M(i, {
+			className: G,
+			"data-ox-slot": "command-dialog",
+			initialFocus: P,
+			ref: K,
+			children: [q, Z]
+		})
+	})] }), t[34] = q, t[35] = Z, t[36] = G, t[37] = Q) : Q = t[37];
+	let $;
+	return t[38] !== d || t[39] !== T || t[40] !== f || t[41] !== m || t[42] !== Q ? ($ = /* @__PURE__ */ j(v, {
+		actionsRef: F,
+		defaultOpen: d,
+		modal: T,
+		open: m,
+		onOpenChange: f,
+		children: Q
+	}), t[38] = d, t[39] = T, t[40] = f, t[41] = m, t[42] = Q, t[43] = $) : $ = t[43], $;
+}
+//#endregion
+export { $ as OxCommandDialog, K as OxCommandEmpty, Q as OxCommandFooter, q as OxCommandGroup, J as OxCommandGroupLabel, U as OxCommandInput, G as OxCommandItem, W as OxCommandList, Z as OxCommandLoading, H as OxCommandRoot, Y as OxCommandSeparator, X as OxCommandShortcut };

package/dist/components/Command/Command.styles.d.ts

@@ -0,0 +1,76 @@
+import { VariantProps } from '../../internal/tv';
+export declare const commandVariants: import('tailwind-variants').TVReturnType<{
+    surface: {
+        panel: {
+            root: string;
+        };
+        bare: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    inputWrapper: string[];
+    inputIcon: string;
+    input: string[];
+    list: string;
+    item: string[];
+    empty: string;
+    group: string;
+    groupLabel: string[];
+    separator: string[];
+    shortcut: string;
+    loading: string;
+    footer: string[];
+}, undefined, {
+    surface: {
+        panel: {
+            root: string;
+        };
+        bare: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    inputWrapper: string[];
+    inputIcon: string;
+    input: string[];
+    list: string;
+    item: string[];
+    empty: string;
+    group: string;
+    groupLabel: string[];
+    separator: string[];
+    shortcut: string;
+    loading: string;
+    footer: string[];
+}, import('tailwind-variants').TVReturnType<{
+    surface: {
+        panel: {
+            root: string;
+        };
+        bare: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    inputWrapper: string[];
+    inputIcon: string;
+    input: string[];
+    list: string;
+    item: string[];
+    empty: string;
+    group: string;
+    groupLabel: string[];
+    separator: string[];
+    shortcut: string;
+    loading: string;
+    footer: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type CommandVariants = VariantProps<typeof commandVariants>;
+export declare const commandDialogViewport = "items-start p-4 pt-[16vh] overflow-y-auto";
+export declare const commandDialogPopup: string;
+export declare const commandDialogBackdropMotion: string;
+export declare const commandDialogPopupMotion: string;

package/dist/components/Command/Command.styles.js

@@ -0,0 +1,56 @@
+import { tv as e } from "../../internal/tv.js";
+import { menuGroupLabel as t, menuSeparator as n } from "../../internal/styles/menuSurfaceStyles.js";
+//#region src/components/Command/Command.styles.ts
+var r = e({
+	slots: {
+		root: "flex w-full flex-col overflow-hidden text-fg",
+		inputWrapper: ["flex h-13.5 items-center gap-2.5 px-control", "border-b border-line"],
+		inputIcon: "flex shrink-0 text-fg-subtle [&_svg]:size-icon",
+		input: [
+			"h-full min-w-0 flex-1 bg-transparent outline-none",
+			"text-control text-fg placeholder:text-fg-subtle",
+			"ox-disabled:cursor-not-allowed"
+		],
+		list: "max-h-[min(20rem,60vh)] overflow-y-auto overflow-x-hidden p-1.5",
+		item: [
+			"relative flex min-w-0 items-center gap-2.5",
+			"rounded-sm px-2.5 py-2 text-body text-fg-muted",
+			"pointer-coarse:min-h-10 pointer-coarse:px-2.25 pointer-coarse:py-2.5 pointer-coarse:text-sm",
+			"pointer-coarse:[&>svg]:size-4.25",
+			"cursor-pointer select-none outline-none transition-colors",
+			"data-[highlighted]:bg-surface-high data-[highlighted]:text-fg",
+			"data-[destructive]:text-danger-ink",
+			"data-[destructive]:data-[highlighted]:bg-[var(--err-fill)]",
+			"data-[destructive]:data-[highlighted]:text-[var(--err-strong)]",
+			"ox-disabled:pointer-events-none ox-disabled:opacity-50",
+			"[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-80",
+			"data-[highlighted]:[&>svg]:opacity-100"
+		],
+		empty: "empty:hidden px-3 py-7 text-center text-body text-fg-subtle",
+		group: "",
+		groupLabel: t,
+		separator: [n, "mx-1"],
+		shortcut: "ms-auto inline-flex shrink-0 items-center gap-1 text-2xs text-fg-subtle",
+		loading: "flex items-center justify-center gap-2 px-3 py-5 text-body text-fg-subtle",
+		footer: [
+			"flex shrink-0 items-center justify-between gap-3.5 px-3 py-2",
+			"border-t border-line bg-surface text-2xs text-fg-subtle",
+			"[&_svg]:size-4"
+		]
+	},
+	variants: { surface: {
+		panel: { root: "rounded-md border border-line bg-card" },
+		bare: { root: "bg-transparent" }
+	} },
+	defaultVariants: { surface: "panel" }
+}), i = "items-start p-4 pt-[16vh] overflow-y-auto", a = ["w-full max-w-xl overflow-hidden p-0", "rounded-md border-line-overlay bg-popover shadow-[var(--shadow-pop)]"].join(" "), o = [
+	"transition-none",
+	"ox-starting:opacity-100 ox-ending:opacity-100",
+	"ox-starting:backdrop-blur-xs ox-ending:backdrop-blur-xs"
+].join(" "), s = [
+	"transition-none",
+	"ox-starting:opacity-100 ox-starting:translate-y-0 ox-starting:scale-100",
+	"ox-ending:opacity-100 ox-ending:translate-y-0 ox-ending:scale-100"
+].join(" ");
+//#endregion
+export { o as commandDialogBackdropMotion, a as commandDialogPopup, s as commandDialogPopupMotion, i as commandDialogViewport, r as commandVariants };

package/dist/components/Command/Command.types.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { ComboboxEmptyProps as BaseComboboxEmptyProps, ComboboxGroupLabelProps as BaseComboboxGroupLabelProps, ComboboxGroupProps as BaseComboboxGroupProps, ComboboxInputProps as BaseComboboxInputProps, ComboboxItemProps as BaseComboboxItemProps, ComboboxListProps as BaseComboboxListProps, ComboboxRootProps as BaseComboboxRootProps } from '@base-ui/react/combobox';
+import { DialogRootProps as BaseDialogRootProps } from '@base-ui/react/dialog';
+import { SeparatorProps as BaseSeparatorProps } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
+export type OxCommandFilter = (value: string, search: string, keywords?: string[]) => number;
+interface OxCommandProps<Value = string> extends Omit<BaseComboboxRootProps<Value, false>, 'className' | 'filter' | 'filteredItems' | 'inline' | 'items' | 'multiple'> {
+    className?: string;
+    filter?: OxCommandFilter;
+    items?: readonly Value[];
+    shouldFilter?: boolean;
+    surface?: 'panel' | 'bare';
+}
+interface OxCommandInputProps extends Omit<BaseComboboxInputProps, 'className' | 'size'> {
+    className?: string;
+    icon?: ReactNode;
+}
+interface OxCommandListProps extends Omit<BaseComboboxListProps, 'className'> {
+    className?: string;
+}
+interface OxCommandItemProps extends Omit<BaseComboboxItemProps, 'className'> {
+    className?: string;
+    destructive?: boolean;
+    onSelect?: (value: unknown) => void;
+}
+interface OxCommandEmptyProps extends Omit<BaseComboboxEmptyProps, 'className'> {
+    className?: string;
+}
+interface OxCommandGroupProps extends Omit<BaseComboboxGroupProps, 'className'> {
+    className?: string;
+}
+interface OxCommandGroupLabelProps extends Omit<BaseComboboxGroupLabelProps, 'className'> {
+    className?: string;
+}
+interface OxCommandSeparatorProps extends Omit<BaseSeparatorProps, 'className'> {
+    className?: string;
+}
+type OxCommandShortcutProps = useRender.ComponentProps<'span'>;
+type OxCommandFooterProps = useRender.ComponentProps<'div'>;
+interface OxCommandLoadingProps extends useRender.ComponentProps<'div'> {
+    label?: ReactNode;
+}
+type OxCommandDialogProps<Value = string> = Pick<BaseDialogRootProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'modal'> & OxCommandProps<Value> & {
+    closeOnSelect?: boolean;
+    title?: ReactNode;
+};
+export type { OxCommandDialogProps, OxCommandEmptyProps, OxCommandFooterProps, OxCommandGroupLabelProps, OxCommandGroupProps, OxCommandInputProps, OxCommandItemProps, OxCommandListProps, OxCommandLoadingProps, OxCommandProps, OxCommandSeparatorProps, OxCommandShortcutProps, };

package/dist/components/Command/commandScore.d.ts

@@ -0,0 +1 @@
+export declare function commandScore(string: string, abbreviation: string, aliases?: string[]): number;