@bysages/react 0.2.2 → 0.3.0

package/dist/components/calendar/index.mjs

@@ -0,0 +1,96 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DatePicker } from "@ark-ui/react/date-picker";
+//#region src/components/calendar/index.tsx
+function chevron(dir) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		"aria-hidden": true,
+		style: dir === "left" ? { transform: "rotate(180deg)" } : void 0,
+		children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" })
+	});
+}
+/** The date-picker's month grid, standing on the page without its
+* popup: always open, the trigger gone, the vessel a quiet card. The
+* title zooms out through month and year grids; the grids themselves
+* are the shared machinery — value, range selection, and focus ride
+* Ark's own contract. */
+function Calendar({ value, min, max, onValueChange, children, ...rest }) {
+	injectComponentStyle("calendar");
+	injectComponentStyle("date-picker");
+	const title = (dp) => {
+		const d = dp.focusedValue;
+		if (!d) return "";
+		if (dp.view === "day") return dp.format(d, {
+			month: "long",
+			year: "numeric"
+		});
+		if (dp.view === "month") return dp.format(d, { year: "numeric" });
+		const decade = Math.floor(d.year / 10) * 10;
+		return `${decade} - ${decade + 9}`;
+	};
+	const header = /* @__PURE__ */ jsx("div", {
+		"data-scope": "calendar",
+		"data-part": "header",
+		children: /* @__PURE__ */ jsxs(DatePicker.ViewControl, { children: [
+			/* @__PURE__ */ jsx(DatePicker.PrevTrigger, { children: chevron("left") }),
+			/* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => /* @__PURE__ */ jsx(DatePicker.ViewTrigger, { children: title(dp) }) }),
+			/* @__PURE__ */ jsx(DatePicker.NextTrigger, { children: chevron("right") })
+		] })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "calendar",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsxs(DatePicker.Root, {
+			open: true,
+			closeOnSelect: true,
+			inline: true,
+			...value !== void 0 ? { value } : {},
+			...min !== void 0 ? { min } : {},
+			...max !== void 0 ? { max } : {},
+			onValueChange: (details) => onValueChange?.(details.value),
+			children: [
+				/* @__PURE__ */ jsxs(DatePicker.View, {
+					view: "day",
+					children: [header, /* @__PURE__ */ jsxs(DatePicker.Table, { children: [/* @__PURE__ */ jsx(DatePicker.TableHead, { children: /* @__PURE__ */ jsx(DatePicker.TableRow, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.weekDays.map((day, id) => /* @__PURE__ */ jsx(DatePicker.TableHeader, {
+						"aria-label": day.long,
+						children: day.narrow
+					}, id)) }) }) }), /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.weeks.map((week, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+						value: day,
+						children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: day.day })
+					}, id2)) }, id)) }) })] })]
+				}),
+				/* @__PURE__ */ jsxs(DatePicker.View, {
+					view: "month",
+					children: [header, /* @__PURE__ */ jsx(DatePicker.Table, {
+						columns: 3,
+						children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.getMonthsGrid({ columns: 3 }).map((months, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+							value: month.value,
+							columns: 3,
+							children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: month.label })
+						}, id2)) }, id)) }) })
+					})]
+				}),
+				/* @__PURE__ */ jsxs(DatePicker.View, {
+					view: "year",
+					children: [header, /* @__PURE__ */ jsx(DatePicker.Table, {
+						columns: 3,
+						children: /* @__PURE__ */ jsx(DatePicker.TableBody, { children: /* @__PURE__ */ jsx(DatePicker.Context, { children: (dp) => dp.getYearsGrid({ columns: 3 }).map((years, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePicker.TableCell, {
+							value: year.value,
+							columns: 3,
+							children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: year.label })
+						}, id2)) }, id)) }) })
+					})]
+				})
+			]
+		}), children]
+	});
+}
+//#endregion
+export { Calendar };

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

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from "react";
+//#region src/components/card/index.d.ts
+export declare const Card: {
+  ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+    asChild?: boolean;
+  }): import("react").JSX.Element | null;
+  displayName: string;
+} & {
+  Root: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Header: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Title: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Description: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Content: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+  Footer: {
+    ({ asChild, children, ...rest }: HTMLAttributes<HTMLElement> & {
+      asChild?: boolean;
+    }): import("react").JSX.Element | null;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/card/index.mjs

@@ -0,0 +1,44 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/components/card/index.tsx
+/** A vessel: round, resting at the first elevation, one hairline for its
+* edge. Root, Header, Title, Description, Content, Footer — sections
+* carry their own whitespace, so any subset composes. */
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ asChild, children, ...rest }) => {
+		const partProps = {
+			...rest,
+			"data-scope": "card",
+			"data-part": name.toLowerCase()
+		};
+		if (asChild) {
+			const child = Children.only(children);
+			return isValidElement(child) ? cloneElement(child, partProps) : null;
+		}
+		return /* @__PURE__ */ jsx(Tag, {
+			...partProps,
+			children
+		});
+	};
+	Component.displayName = "Card" + name;
+	return Component;
+}
+const Root = part("Root", "section");
+const Header = part("Header", "header");
+const Title = part("Title", "h3");
+const Description = part("Description", "p");
+const Content = part("Content", "div");
+const Footer = part("Footer", "footer");
+const Card = Object.assign(Root, {
+	Root,
+	Header,
+	Title,
+	Description,
+	Content,
+	Footer
+});
+injectComponentStyle("card");
+//#endregion
+export { Card };

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

@@ -0,0 +1,9 @@
+import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
+//#region src/components/carousel/index.d.ts
+/** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
+ * hairline-clipped lane, the triggers are quiet outline controls, and the
+ * current indicator alone carries the ink. The API is Ark's own — Root,
+ * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
+ * Indicator, AutoplayTrigger, ProgressText. */
+export declare const Carousel: typeof Carousel$1;
+//#endregion

package/dist/components/carousel/index.mjs

@@ -0,0 +1,12 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
+//#region src/components/carousel/index.tsx
+/** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
+* hairline-clipped lane, the triggers are quiet outline controls, and the
+* current indicator alone carries the ink. The API is Ark's own — Root,
+* Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
+* Indicator, AutoplayTrigger, ProgressText. */
+const Carousel = Carousel$1;
+injectComponentStyle("carousel");
+//#endregion
+export { Carousel };

package/dist/components/cascade-select/index.d.mts

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from "react";
+//#region src/components/cascade-select/index.d.ts
+export interface CascadeSelectNode {
+  label: string;
+  value: string;
+  children?: CascadeSelectNode[];
+  disabled?: boolean;
+}
+/**
+ * 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.
+ */
+export interface CascadeSelectProps extends HTMLAttributes<HTMLDivElement> {
+  value?: string[][];
+  data: CascadeSelectNode[];
+  placeholder?: string;
+  highlightTrigger?: "click" | "hover";
+  filterable?: boolean;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[][]) => void;
+}
+export declare function CascadeSelect({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,229 @@
+import { t as Input } from "../../input-2oezH-dY.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Fragment, 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-scope": "cascade-select",
+							"data-part": "branch-indicator",
+							"aria-hidden": "true",
+							children: chevronRight
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							...api.getItemIndicatorProps(itemProps),
+							children: checkGlyph
+						})
+					]
+				}, itemValue);
+			})
+		});
+		const next = nodeState.highlightedChild;
+		const child = next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [list, child] });
+	}
+	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-scope": "cascade-select",
+					"data-part": "search",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: query,
+						onValueChange: setQuery,
+						placeholder: "Filter…",
+						"aria-label": "Filter options"
+					})
+				}) : null, /* @__PURE__ */ jsx("div", {
+					"data-scope": "cascade-select",
+					"data-part": "corridor",
+					"data-flow": filtering ? "flat" : "columns",
+					children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+						"data-scope": "cascade-select",
+						"data-part": "empty",
+						children: "Nothing matches"
+					}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-scope": "cascade-select",
+						"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