@bysages/react 0.2.1 → 0.2.3

package/dist/components/cascade-select/index.mjs

@@ -0,0 +1,223 @@
+import { Input } from "../input/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { useEnvironmentContext } from "@ark-ui/react/environment";
+import { useFilter, useLocaleContext } from "@ark-ui/react/locale";
+import * as cascade from "@zag-js/cascade-select";
+import { normalizeProps, useMachine } from "@zag-js/react";
+//#region src/components/cascade-select/index.tsx
+const chevronDown = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+const chevronRight = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const checkGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
+});
+function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
+	injectComponentStyle("cascade-select");
+	const id = useId();
+	const locale = useLocaleContext();
+	const env = useEnvironmentContext();
+	const collection = cascade.collection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		nodeToChildren: (node) => node.children ?? [],
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: data
+		}
+	});
+	const service = useMachine(cascade.machine, {
+		id,
+		collection,
+		dir: locale.dir,
+		getRootNode: env.getRootNode.bind(env),
+		disabled: disabled || void 0,
+		multiple: multiple || void 0,
+		...value !== void 0 ? { value } : {},
+		...highlightTrigger != null ? { highlightTrigger } : {},
+		onValueChange(details) {
+			onValueChange?.(details.value);
+		}
+	});
+	const api = cascade.connect(service, normalizeProps);
+	const [query, setQuery] = useState("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const filtering = filterable && query.trim().length > 0;
+	/** The corridor's answer to a query: every leaf whose route matches —
+	* the query may land on any hop, and the whole route still shows. */
+	const matchPaths = useMemo(() => {
+		if (!filtering) return [];
+		const q = query.trim();
+		const hits = [];
+		const walk = (nodes, path, labels, matched) => {
+			for (const node of nodes ?? []) {
+				const hit = matched || filterFns.contains(node.label, q);
+				const nextPath = [...path, node.value];
+				const nextLabels = [...labels, node.label];
+				if (node.children?.length) walk(node.children, nextPath, nextLabels, hit);
+				else if (hit) hits.push({
+					path: nextPath,
+					labels: nextLabels
+				});
+			}
+		};
+		walk(data, [], [], false);
+		return hits;
+	}, [
+		filtering,
+		query,
+		filterFns,
+		data
+	]);
+	const isSelected = (path) => (value ?? []).some((p) => p.join("/") === path.join("/"));
+	function pickMatch(path) {
+		if (multiple) {
+			const current = value ?? [];
+			const key = path.join("/");
+			const next = current.some((p) => p.join("/") === key) ? current.filter((p) => p.join("/") !== key) : [...current, path];
+			api.setValue(next);
+		} else {
+			api.selectValue(path);
+			api.setOpen(false);
+		}
+	}
+	/** The machine's `valueAsString` only updates through its select
+	* event, so an externally-set `value` would render the placeholder
+	* forever — resolve the labels from the data instead. */
+	function labelsFor(path) {
+		const out = [];
+		let nodes = data;
+		for (const entry of path) {
+			const node = nodes?.find((n) => n.value === entry);
+			if (!node) return null;
+			out.push(node.label);
+			nodes = node.children;
+		}
+		return out;
+	}
+	const display = (value ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null).join(", ");
+	/** One column per walk of the highlighted path — the list binds to
+	* the node, the next column hangs off its highlighted child. */
+	function renderColumn(node, indexPath, valuePath) {
+		const nodeProps = {
+			item: node,
+			indexPath,
+			value: valuePath
+		};
+		const nodeState = api.getItemState(nodeProps);
+		const children = collection.getNodeChildren(node);
+		const list = /* @__PURE__ */ jsx("ul", {
+			...api.getListProps(nodeProps),
+			children: children.map((item, index) => {
+				const itemValue = collection.getNodeValue(item);
+				const itemProps = {
+					item,
+					indexPath: [...indexPath, index],
+					value: [...valuePath, itemValue]
+				};
+				const itemState = api.getItemState(itemProps);
+				return /* @__PURE__ */ jsxs("li", {
+					...api.getItemProps(itemProps),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							...api.getItemTextProps(itemProps),
+							children: item.label
+						}),
+						itemState.hasChildren ? /* @__PURE__ */ jsx("span", {
+							"data-part": "branch-indicator",
+							"aria-hidden": "true",
+							children: chevronRight
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							...api.getItemIndicatorProps(itemProps),
+							children: checkGlyph
+						})
+					]
+				}, itemValue);
+			})
+		});
+		const next = nodeState.highlightedChild;
+		return [list, next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null];
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		...api.getRootProps(),
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("div", {
+			...api.getControlProps(),
+			children: /* @__PURE__ */ jsxs("button", {
+				...api.getTriggerProps(),
+				onClick: (event) => {
+					api.getTriggerProps().onClick?.(event);
+					setQuery("");
+				},
+				disabled: disabled || void 0,
+				children: [/* @__PURE__ */ jsx("span", {
+					...api.getValueTextProps(),
+					children: display || placeholder
+				}), /* @__PURE__ */ jsx("span", {
+					...api.getIndicatorProps(),
+					children: chevronDown
+				})]
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+			...api.getPositionerProps(),
+			children: /* @__PURE__ */ jsxs("div", {
+				...api.getContentProps(),
+				"data-size": size,
+				children: [filterable ? /* @__PURE__ */ jsx("div", {
+					"data-part": "search",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: query,
+						onValueChange: setQuery,
+						placeholder: "Filter…",
+						"aria-label": "Filter options"
+					})
+				}) : null, /* @__PURE__ */ jsx("div", {
+					"data-part": "corridor",
+					"data-flow": filtering ? "flat" : "columns",
+					children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+						"data-part": "empty",
+						children: "Nothing matches"
+					}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-part": "match",
+						"data-selected": isSelected(hit.path) || void 0,
+						onClick: () => pickMatch(hit.path),
+						children: hit.labels.join(" / ")
+					}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])
+				})]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { CascadeSelect };

package/dist/components/checkbox/index.d.mts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
+//#region src/components/checkbox/index.d.ts
+type CheckboxRootProps = ComponentProps<typeof Checkbox$1.Root> & {
+  /** One rung for the control's box: the tick scales with it. */
+  size?: "sm" | "md" | "lg";
+};
+declare function CheckboxRoot({ size, ...rest }: CheckboxRootProps): import("react").JSX.Element;
+/** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
+ * that fills flat with primary ink when ticked, the mark springing into
+ * place. The API is Ark's own — Root, Label, Control, Indicator,
+ * HiddenInput. */
+export declare const Checkbox: Omit<typeof Checkbox$1, "Root"> & {
+  Root: typeof CheckboxRoot;
+};
+//#endregion

package/dist/components/checkbox/index.mjs

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
+//#region src/components/checkbox/index.tsx
+function CheckboxRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
+* that fills flat with primary ink when ticked, the mark springing into
+* place. The API is Ark's own — Root, Label, Control, Indicator,
+* HiddenInput. */
+const Checkbox = {
+	...Checkbox$1,
+	Root: CheckboxRoot
+};
+injectComponentStyle("checkbox");
+//#endregion
+export { Checkbox };

package/dist/components/checkbox-group/index.d.mts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from "react";
+//#region src/components/checkbox-group/index.d.ts
+export interface CheckboxOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
+  value?: string[];
+  options: CheckboxOption[];
+  layout?: "vertical" | "horizontal";
+  /** One register for every box: falls onto each root's data-size for
+   * the stylesheet to retune. */
+  size?: "sm" | "md" | "lg";
+  invalid?: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: string[]) => void;
+}
+/**
+ * One question, many answers: a labelled stack (or row) of the seal-cut
+ * checkboxes bound to a single array. Toggling a box adds or removes its
+ * value; the group itself is semantics (`role="group"`), the boxes stay
+ * the machine-driven originals. Inside a `Field.Root` the group picks up
+ * the field context, so the invalid and disabled states a Form routes to
+ * its name dress every box at once.
+ */
+export declare function CheckboxGroup({ value, options, layout, size, invalid, disabled, onValueChange, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
+//#endregion

package/dist/components/checkbox-group/index.mjs

@@ -0,0 +1,65 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useFieldContext } from "@ark-ui/react/field";
+import { Checkbox } from "@ark-ui/react/checkbox";
+//#region src/components/checkbox-group/index.tsx
+const checkGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
+});
+/**
+* One question, many answers: a labelled stack (or row) of the seal-cut
+* checkboxes bound to a single array. Toggling a box adds or removes its
+* value; the group itself is semantics (`role="group"`), the boxes stay
+* the machine-driven originals. Inside a `Field.Root` the group picks up
+* the field context, so the invalid and disabled states a Form routes to
+* its name dress every box at once.
+*/
+function CheckboxGroup({ value = [], options, layout = "vertical", size = "md", invalid = false, disabled = false, onValueChange, ...rest }) {
+	injectComponentStyle("checkbox-group");
+	injectComponentStyle("checkbox");
+	const field = useFieldContext();
+	const uid = useId();
+	const selected = new Set(value);
+	const isInvalid = invalid || field?.invalid === true;
+	const isDisabled = disabled || field?.disabled === true;
+	function toggle(option) {
+		const next = new Set(selected);
+		if (next.has(option)) next.delete(option);
+		else next.add(option);
+		onValueChange?.([...next]);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "group",
+		"data-scope": "checkbox-group",
+		"data-part": "root",
+		"data-layout": layout,
+		"data-invalid": isInvalid ? "" : void 0,
+		children: options.map((option) => /* @__PURE__ */ jsxs(Checkbox.Root, {
+			ids: {
+				label: `${uid}:${option.value}:label`,
+				hiddenInput: `${uid}:${option.value}:input`
+			},
+			"data-size": size,
+			checked: selected.has(option.value),
+			invalid: isInvalid,
+			disabled: isDisabled || option.disabled === true,
+			onCheckedChange: () => toggle(option.value),
+			children: [
+				/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkGlyph }) }),
+				/* @__PURE__ */ jsx(Checkbox.Label, { children: option.label }),
+				/* @__PURE__ */ jsx(Checkbox.HiddenInput, {})
+			]
+		}, option.value))
+	});
+}
+//#endregion
+export { CheckboxGroup };

package/dist/components/chip/index.d.mts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+//#region src/components/chip/index.d.ts
+/** A counting coin: the numeric value, capped at `max` with an ellipsis
+ * of the remainder ("99+"). */
+export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+  value: number;
+  max?: number;
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  variant?: "solid" | "subtle" | "outline";
+}
+export declare function Chip({ value, max, tone, variant, ...rest }: ChipProps): import("react").JSX.Element;
+//#endregion

package/dist/components/chip/index.mjs

@@ -0,0 +1,17 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/chip/index.tsx
+function Chip({ value, max, tone = "ink", variant = "solid", ...rest }) {
+	injectComponentStyle("chip");
+	const text = max != null && value > max ? `${max}+` : String(value);
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		"data-scope": "chip",
+		"data-part": "root",
+		"data-tone": tone,
+		"data-variant": variant,
+		children: text
+	});
+}
+//#endregion
+export { Chip };

package/dist/components/client-only/index.d.mts

@@ -0,0 +1,2 @@
+import { ClientOnly, ClientOnlyProps } from "@ark-ui/react/client-only";
+export { ClientOnly, type ClientOnlyProps };

package/dist/components/client-only/index.mjs

@@ -0,0 +1,2 @@
+import { ClientOnly } from "@ark-ui/react/client-only";
+export { ClientOnly };

package/dist/components/clipboard/index.d.mts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
+//#region src/components/clipboard/index.d.ts
+/** Ark's Clipboard, dressed in the paper-and-ink system: a hairline value
+ * field beside an icon-sized copy trigger whose ink turns bamboo while the
+ * copy is confirmed. The API is Ark's own — Root, Label, Control, Input,
+ * Trigger, Indicator, Context, HiddenInput. */
+type ClipboardRootProps = ComponentProps<typeof Clipboard$1.Root> & {
+  /** One rung of the control-height ladder for the value field and
+   * its copy seal. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ClipboardRoot({ size, ...rest }: ClipboardRootProps): import("react").JSX.Element;
+export declare const Clipboard: Omit<typeof Clipboard$1, "Root"> & {
+  Root: typeof ClipboardRoot;
+};
+//#endregion

package/dist/components/clipboard/index.mjs

@@ -0,0 +1,17 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
+//#region src/components/clipboard/index.tsx
+function ClipboardRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Clipboard$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Clipboard = {
+	...Clipboard$1,
+	Root: ClipboardRoot
+};
+injectComponentStyle("clipboard");
+//#endregion
+export { Clipboard };

package/dist/components/collapsible/index.d.mts

@@ -0,0 +1,7 @@
+import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
+//#region src/components/collapsible/index.d.ts
+/** Ark's Collapsible, dressed in the paper-and-ink system: one control on
+ * the paper, its panel dissolving open to the machine's measured height.
+ * The API is Ark's own — Root, Trigger, Content, Indicator. */
+export declare const Collapsible: typeof Collapsible$1;
+//#endregion

package/dist/components/collapsible/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
+//#region src/components/collapsible/index.tsx
+/** Ark's Collapsible, dressed in the paper-and-ink system: one control on
+* the paper, its panel dissolving open to the machine's measured height.
+* The API is Ark's own — Root, Trigger, Content, Indicator. */
+const Collapsible = Collapsible$1;
+injectComponentStyle("collapsible");
+//#endregion
+export { Collapsible };

package/dist/components/collection/index.d.mts

@@ -0,0 +1,2 @@
+import { CollectionItem, CollectionOptions, FilePathTreeNode, FlatTreeNode, GridCollection, GridCollectionOptions, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode, UseAsyncListProps, UseAsyncListReturn, UseListCollectionProps, UseListCollectionReturn, UseListSelectionProps, UseListSelectionReturn, createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/react/collection";
+export { type CollectionItem, type CollectionOptions, type FilePathTreeNode, type FlatTreeNode, type GridCollection, type GridCollectionOptions, type ListCollection, type TreeCollection, type TreeCollectionOptions, type TreeNode, type UseAsyncListProps, type UseAsyncListReturn, type UseListCollectionProps, type UseListCollectionReturn, type UseListSelectionProps, type UseListSelectionReturn, createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };

package/dist/components/collection/index.mjs

@@ -0,0 +1,2 @@
+import { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/react/collection";
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };

package/dist/components/color-picker/index.d.mts

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+import { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
+//#region src/components/color-picker/index.d.ts
+type ColorPickerRootProps = ComponentProps<typeof ColorPicker$1.Root> & {
+  /** One rung of the control-height ladder for the swatch seal. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ColorPickerRoot({ size, ...rest }: ColorPickerRootProps): import("react").JSX.Element;
+/** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
+ * on the paper, opening into an area and channel sliders where pigment is
+ * picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
+ * Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch,
+ * ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb,
+ * ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
+ * SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
+ * FormatSelect, HiddenInput, Context. */
+export declare const ColorPicker: Omit<typeof ColorPicker$1, "Root"> & {
+  Root: typeof ColorPickerRoot;
+};
+//#endregion

package/dist/components/color-picker/index.mjs

@@ -0,0 +1,25 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
+//#region src/components/color-picker/index.tsx
+function ColorPickerRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(ColorPicker$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
+* on the paper, opening into an area and channel sliders where pigment is
+* picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
+* Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch,
+* ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb,
+* ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
+* SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
+* FormatSelect, HiddenInput, Context. */
+const ColorPicker = {
+	...ColorPicker$1,
+	Root: ColorPickerRoot
+};
+injectComponentStyle("color-picker");
+//#endregion
+export { ColorPicker };

package/dist/components/combobox/index.d.mts

@@ -0,0 +1,17 @@
+import { CollectionItem } from "@ark-ui/react/collection";
+import { Combobox as Combobox$1, ComboboxRootComponentProps } from "@ark-ui/react/combobox";
+//#region src/components/combobox/index.d.ts
+/** Ark's Combobox, dressed in the paper-and-ink system: the field carries
+ * the control recipe and its matches dissolve open as a paper vessel, the
+ * checked row taking the flat ink fill. The API is Ark's own — Root, Label,
+ * Control, Input, Trigger, ClearTrigger, Positioner, Content, List, Empty,
+ * Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
+type ComboboxOwnProps = {
+  /** One rung of the control-height ladder for the field row. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ComboboxRoot<T extends CollectionItem>(props: ComboboxRootComponentProps<T, ComboboxOwnProps>): import("react").JSX.Element;
+export declare const Combobox: Omit<typeof Combobox$1, "Root"> & {
+  Root: typeof ComboboxRoot;
+};
+//#endregion

package/dist/components/combobox/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
+//#region src/components/combobox/index.tsx
+function ComboboxRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Combobox$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Combobox = {
+	...Combobox$1,
+	Root: ComboboxRoot
+};
+injectComponentStyle("combobox");
+//#endregion
+export { Combobox };

package/dist/components/command/index.d.mts

@@ -0,0 +1,43 @@
+//#region src/components/command/index.d.ts
+export interface CommandEntry {
+  label: string;
+  value: string;
+  /** Entries sharing a group are listed under one heading. */
+  group?: string;
+  /** A short affordance note, set as a keycap at the row's end. */
+  hint?: string;
+}
+/**
+ * The command palette: a modal sheet at the top of the page carrying a
+ * search field over the caller's commands, grouped as a ledger with a
+ * keycap hint at each row. The shell is the dialog machinery — scrim,
+ * focus trap, Escape — and the searching is the combobox machinery
+ * driving our own list: the vessel and the list live inside the sheet,
+ * so the combobox renders no separate popup and the machine's content
+ * grafts onto the sheet's list.
+ */
+export interface CommandProps {
+  /** The commands on offer, grouped as they arrive. */
+  items?: CommandEntry[];
+  placeholder?: string;
+  /** Whether the palette is up. Supply it to control the palette;
+   * changes are reported via `onOpenChange`. */
+  open?: boolean;
+  /** Whether the shell narrows `items` as the reader types. Turn it off
+   * when the caller owns the searching — a ranked engine or a remote
+   * source — and hands down the already-narrowed list. */
+  autoFilter?: boolean;
+  /** The field's text under the caller's control; changes are reported
+   * via `onInputValueChange`. */
+  inputValue?: string;
+  /** What the list whispers when nothing matches. */
+  emptyText?: string;
+  /** Called with the chosen entry's `value`; the palette closes after. */
+  onSelect?: (value: string) => void;
+  /** Reports the palette's next state. */
+  onOpenChange?: (open: boolean) => void;
+  /** Reports the field's live text. */
+  onInputValueChange?: (value: string) => void;
+}
+export declare function Command({ items, placeholder, open, autoFilter, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange }: CommandProps): import("react").JSX.Element;
+//#endregion