@bysages/solid 0.2.2 → 0.3.0

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

@@ -0,0 +1,304 @@
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { For, Show, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import { useEnvironmentContext } from "@ark-ui/solid/environment";
+import { useFilter, useLocaleContext } from "@ark-ui/solid/locale";
+import * as cascade from "@zag-js/cascade-select";
+import { normalizeProps, useMachine } from "@zag-js/solid";
+//#region src/components/cascade-select/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span data-scope=cascade-select data-part=branch-indicator aria-hidden=true>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<li><span></span><span>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div data-scope=cascade-select data-part=search>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div><div><div data-scope=cascade-select data-part=corridor>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div><div><button><span></span><span>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<p data-scope=cascade-select data-part=empty>Nothing matches`);
+var _tmpl$11 = /* @__PURE__ */ template(`<button type=button data-scope=cascade-select data-part=match>`);
+function chevronDown() {
+	return _tmpl$();
+}
+function chevronRight() {
+	return _tmpl$2();
+}
+function checkGlyph() {
+	return _tmpl$3();
+}
+/**
+* A corridor of linked columns: pick a branch and the next column
+* dissolves open beside it, until a leaf click settles the whole path.
+* `value` is the selected path (or paths, when `multiple`) — the
+* joined labels ride the trigger. `highlightTrigger: "hover"` turns the
+* classic cascading menu: pointing is enough to unfold. `filterable`
+* swaps the corridor for a flat list of matching paths while a query
+* runs — each hit still reads as its full route.
+*/
+function CascadeSelect(props) {
+	injectComponentStyle("cascade-select");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"data",
+		"placeholder",
+		"highlightTrigger",
+		"filterable",
+		"multiple",
+		"disabled",
+		"size",
+		"onValueChange"
+	]);
+	const id = createUniqueId();
+	const locale = useLocaleContext();
+	const env = useEnvironmentContext();
+	const collection = createMemo(() => cascade.collection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		nodeToChildren: (node) => node.children ?? [],
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: own.data
+		}
+	}));
+	const service = useMachine(cascade.machine, () => ({
+		id,
+		collection: collection(),
+		dir: locale().dir,
+		getRootNode: env().getRootNode.bind(env()),
+		disabled: own.disabled || void 0,
+		multiple: own.multiple || void 0,
+		...own.value !== void 0 ? { value: own.value } : {},
+		...own.highlightTrigger != null ? { highlightTrigger: own.highlightTrigger } : {},
+		onValueChange(details) {
+			own.onValueChange?.(details.value);
+		}
+	}));
+	const api = createMemo(() => cascade.connect(service, normalizeProps));
+	const [query, setQuery] = createSignal("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const filtering = () => own.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 = createMemo(() => {
+		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(own.data, [], [], false);
+		return hits;
+	});
+	const isSelected = (path) => (own.value ?? []).some((p) => p.join("/") === path.join("/"));
+	function pickMatch(path) {
+		if (own.multiple) {
+			const current = own.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 = own.data;
+		for (const value of path) {
+			const node = nodes?.find((n) => n.value === value);
+			if (!node) return null;
+			out.push(node.label);
+			nodes = node.children;
+		}
+		return out;
+	}
+	const display = () => {
+		const parts = (own.value ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null);
+		return parts.length > 0 ? parts.join(", ") : null;
+	};
+	/** 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);
+		var _el$4 = _tmpl$4();
+		spread(_el$4, () => {
+			return mergeProps$1(() => api().getListProps(nodeProps));
+		}, true);
+		insert(_el$4, createComponent(For, {
+			each: children,
+			children: (item, index) => {
+				const itemValue = collection().getNodeValue(item);
+				const itemProps = {
+					item,
+					indexPath: [...indexPath, index()],
+					value: [...valuePath, itemValue]
+				};
+				const itemState = () => api().getItemState(itemProps);
+				var _el$5 = _tmpl$6();
+				var _el$6 = _el$5.firstChild;
+				var _el$8 = _el$6.nextSibling;
+				spread(_el$5, () => {
+					return mergeProps$1(() => api().getItemProps(itemProps));
+				}, true);
+				spread(_el$6, () => {
+					return mergeProps$1(() => api().getItemTextProps(itemProps));
+				}, true);
+				insert(_el$6, () => {
+					return item.label;
+				});
+				insert(_el$5, createComponent(Show, {
+					get when() {
+						return itemState().hasChildren;
+					},
+					get children() {
+						var _el$7 = _tmpl$5();
+						insert(_el$7, chevronRight);
+						return _el$7;
+					}
+				}), _el$8);
+				spread(_el$8, () => {
+					return mergeProps$1(() => api().getItemIndicatorProps(itemProps));
+				}, true);
+				insert(_el$8, checkGlyph);
+				return _el$5;
+			}
+		}));
+		const list = _el$4;
+		const next = nodeState().highlightedChild;
+		return [list, next != null && collection().isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState().highlightedIndex], [...valuePath, collection().getNodeValue(next)]) : null];
+	}
+	var _el$9 = _tmpl$9();
+	var _el$10 = _el$9.firstChild;
+	var _el$11 = _el$10.firstChild;
+	var _el$12 = _el$11.firstChild;
+	var _el$13 = _el$12.nextSibling;
+	spread(_el$9, [
+		rest,
+		() => {
+			return mergeProps$1(() => api().getRootProps());
+		},
+		{ get "data-size"() {
+			return own.size ?? "md";
+		} }
+	], true);
+	spread(_el$10, () => {
+		return mergeProps$1(() => api().getControlProps());
+	}, true);
+	spread(_el$11, () => {
+		return mergeProps$1(() => api().getTriggerProps(), {
+			get disabled() {
+				return own.disabled || void 0;
+			},
+			onclick(event) {
+				api().getTriggerProps().onclick?.(event);
+				setQuery("");
+			}
+		});
+	}, true);
+	spread(_el$12, () => {
+		return mergeProps$1(() => api().getValueTextProps());
+	}, true);
+	insert(_el$12, () => {
+		return display() ?? own.placeholder ?? "Select…";
+	});
+	spread(_el$13, () => {
+		return mergeProps$1(() => api().getIndicatorProps());
+	}, true);
+	insert(_el$13, chevronDown);
+	insert(_el$9, createComponent(Portal, { get children() {
+		var _el$14 = _tmpl$8();
+		var _el$15 = _el$14.firstChild;
+		var _el$17 = _el$15.firstChild;
+		spread(_el$14, () => {
+			return mergeProps$1(() => api().getPositionerProps());
+		}, true);
+		spread(_el$15, [() => {
+			return mergeProps$1(() => api().getContentProps());
+		}, { get "data-size"() {
+			return own.size ?? "md";
+		} }], true);
+		insert(_el$15, createComponent(Show, {
+			get when() {
+				return own.filterable;
+			},
+			get children() {
+				var _el$16 = _tmpl$7();
+				insert(_el$16, createComponent(Input, {
+					size: "sm",
+					get value() {
+						return query();
+					},
+					onValueChange: setQuery,
+					placeholder: "Filter…",
+					"aria-label": "Filter options"
+				}));
+				return _el$16;
+			}
+		}), _el$17);
+		insert(_el$17, createComponent(Show, {
+			get when() {
+				return !filtering();
+			},
+			get fallback() {
+				return createComponent(Show, {
+					get when() {
+						return matchPaths().length > 0;
+					},
+					get fallback() {
+						return _tmpl$10();
+					},
+					get children() {
+						return createComponent(For, {
+							get each() {
+								return matchPaths();
+							},
+							children: (hit) => (() => {
+								var _el$19 = _tmpl$11();
+								_el$19._$$click = () => pickMatch(hit.path);
+								insert(_el$19, () => {
+									return hit.labels.join(" / ");
+								});
+								effect(() => isSelected(hit.path) || void 0, (_v$) => {
+									setAttribute(_el$19, "data-selected", _v$);
+								});
+								return _el$19;
+							})()
+						});
+					}
+				});
+			},
+			get children() {
+				return renderColumn(collection().rootNode, [], []);
+			}
+		}));
+		effect(() => filtering() ? "flat" : "columns", (_v$) => {
+			setAttribute(_el$17, "data-flow", _v$);
+		});
+		return _el$14;
+	} }), null);
+	return _el$9;
+}
+delegateEvents(["click"]);
+//#endregion
+export { CascadeSelect };

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

@@ -0,0 +1,15 @@
+import { Checkbox as Checkbox$1, CheckboxRootProps } from "@ark-ui/solid/checkbox";
+//#region src/components/checkbox/index.d.ts
+/** 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. */
+type CheckboxOwnProps = {
+  /** One rung for the control's box: the tick scales with it. */
+  size?: "sm" | "md" | "lg";
+};
+declare function CheckboxRoot(props: CheckboxRootProps & CheckboxOwnProps): import("solid-js").JSX.Element;
+export declare const Checkbox: Omit<typeof Checkbox$1, "Root"> & {
+  Root: typeof CheckboxRoot;
+};
+//#endregion

package/dist/components/checkbox/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { Checkbox as Checkbox$1 } from "@ark-ui/solid/checkbox";
+//#region src/components/checkbox/index.tsx
+function CheckboxRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Checkbox$1.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const Checkbox = {
+	...Checkbox$1,
+	Root: CheckboxRoot
+};
+injectComponentStyle("checkbox");
+//#endregion
+export { Checkbox };

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

@@ -0,0 +1,28 @@
+import { JSX } from "solid-js";
+//#region src/components/checkbox-group/index.d.ts
+export interface CheckboxOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+export interface CheckboxGroupProps extends JSX.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(props: CheckboxGroupProps): JSX.Element;
+//#endregion

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

@@ -0,0 +1,97 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, spread, template } from "@solidjs/web";
+import { For, createUniqueId, splitProps } from "solid-js";
+import { useFieldContext } from "@ark-ui/solid/field";
+import { Checkbox } from "@ark-ui/solid/checkbox";
+//#region src/components/checkbox-group/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function checkGlyph() {
+	return _tmpl$();
+}
+/**
+* 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(props) {
+	injectComponentStyle("checkbox-group");
+	injectComponentStyle("checkbox");
+	const field = useFieldContext();
+	const uid = createUniqueId();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"options",
+		"layout",
+		"size",
+		"invalid",
+		"disabled",
+		"onValueChange"
+	]);
+	const selected = () => new Set(own.value ?? []);
+	const isInvalid = () => own.invalid || field?.().invalid === true;
+	const isDisabled = () => own.disabled || field?.().disabled === true;
+	function toggle(value) {
+		const next = new Set(selected());
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		own.onValueChange?.([...next]);
+	}
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [rest, {
+		role: "group",
+		"data-scope": "checkbox-group",
+		"data-part": "root",
+		get "data-layout"() {
+			return own.layout ?? "vertical";
+		},
+		get "data-invalid"() {
+			return isInvalid() ? "" : void 0;
+		}
+	}], true);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return own.options;
+		},
+		children: (option) => createComponent(Checkbox.Root, {
+			get ids() {
+				return {
+					label: `${uid}:${option.value}:label`,
+					hiddenInput: `${uid}:${option.value}:input`
+				};
+			},
+			get checked() {
+				return selected().has(option.value);
+			},
+			get "data-size"() {
+				return own.size ?? "md";
+			},
+			get invalid() {
+				return isInvalid();
+			},
+			get disabled() {
+				return isDisabled() || option.disabled === true;
+			},
+			onCheckedChange: () => toggle(option.value),
+			get children() {
+				return [
+					createComponent(Checkbox.Control, { get children() {
+						return createComponent(Checkbox.Indicator, { get children() {
+							return checkGlyph();
+						} });
+					} }),
+					createComponent(Checkbox.Label, { get children() {
+						return option.label;
+					} }),
+					createComponent(Checkbox.HiddenInput, {})
+				];
+			}
+		})
+	}));
+	return _el$2;
+}
+//#endregion
+export { CheckboxGroup };

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

@@ -0,0 +1,12 @@
+import { JSX } from "solid-js";
+//#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 JSX.HTMLAttributes<HTMLSpanElement> {
+  value: number;
+  max?: number;
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  variant?: "solid" | "subtle" | "outline";
+}
+export declare function Chip(props: ChipProps): JSX.Element;
+//#endregion

package/dist/components/chip/index.mjs

@@ -0,0 +1,36 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, memo, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/chip/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+function Chip(props) {
+	injectComponentStyle("chip");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"max",
+		"tone",
+		"variant"
+	]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "chip",
+		"data-part": "root",
+		get "data-tone"() {
+			return own.tone ?? "ink";
+		},
+		get "data-variant"() {
+			return own.variant ?? "solid";
+		}
+	}], true);
+	insert(_el$, (() => {
+		var _c$ = memo(() => {
+			return !!(own.max != null && own.value > own.max);
+		});
+		return () => {
+			return _c$() ? `${own.max}+` : String(own.value);
+		};
+	})());
+	return _el$;
+}
+//#endregion
+export { Chip };

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { Clipboard as Clipboard$1, ClipboardRootProps } from "@ark-ui/solid/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 ClipboardOwnProps = {
+  /** One rung of the control-height ladder for the value field and
+   * its copy seal. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ClipboardRoot(props: ClipboardRootProps & ClipboardOwnProps): import("solid-js").JSX.Element;
+export declare const Clipboard: Omit<typeof Clipboard$1, "Root"> & {
+  Root: typeof ClipboardRoot;
+};
+//#endregion

package/dist/components/clipboard/index.mjs

@@ -0,0 +1,19 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { Clipboard as Clipboard$1 } from "@ark-ui/solid/clipboard";
+//#region src/components/clipboard/index.tsx
+const ArkRoot = Clipboard$1.Root;
+function ClipboardRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+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/solid/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/solid/collapsible";
+//#region src/components/collapsible/index.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. */
+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/solid/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/solid/collection";
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };

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

@@ -0,0 +1,19 @@
+import { ColorPicker as ColorPicker$1, ColorPickerRootProps } from "@ark-ui/solid/color-picker";
+//#region src/components/color-picker/index.d.ts
+/** 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. */
+type ColorPickerOwnProps = {
+  /** One rung of the control-height ladder for the swatch seal. */
+  size?: "sm" | "md" | "lg";
+};
+declare function ColorPickerRoot(props: ColorPickerRootProps & ColorPickerOwnProps): import("solid-js").JSX.Element;
+export declare const ColorPicker: Omit<typeof ColorPicker$1, "Root"> & {
+  Root: typeof ColorPickerRoot;
+};
+//#endregion

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

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { ColorPicker as ColorPicker$1 } from "@ark-ui/solid/color-picker";
+//#region src/components/color-picker/index.tsx
+function ColorPickerRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ColorPicker$1.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+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/solid/collection";
+import { Combobox as Combobox$1, ComboboxRootProps } from "@ark-ui/solid/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: ComboboxRootProps<T> & ComboboxOwnProps): import("solid-js").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 { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { Combobox as Combobox$1 } from "@ark-ui/solid/combobox";
+//#region src/components/combobox/index.tsx
+function ComboboxRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Combobox$1.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const Combobox = {
+	...Combobox$1,
+	Root: ComboboxRoot
+};
+injectComponentStyle("combobox");
+//#endregion
+export { Combobox };