@bysages/solid 0.2.1 → 0.2.3

package/dist/components/calendar/index.mjs

@@ -0,0 +1,197 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, memo, mergeProps, spread, style, template } from "solid-js/web";
+import { For, Show, splitProps } from "solid-js";
+import { DatePicker } from "@ark-ui/solid/date-picker";
+//#region src/components/calendar/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 aria-hidden=true><path d="m9 5 7 7-7 7">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-scope=calendar data-part=header>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div>`);
+function chevron(dir) {
+	return (() => {
+		var _el$ = _tmpl$();
+		effect((_$p) => style(_el$, dir === "left" ? { transform: "rotate(180deg)" } : void 0, _$p));
+		return _el$;
+	})();
+}
+/** 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(props) {
+	injectComponentStyle("calendar");
+	injectComponentStyle("date-picker");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"min",
+		"max",
+		"onValueChange"
+	]);
+	const title = (dp) => {
+		const api = dp();
+		const d = api.focusedValue;
+		if (!d) return "";
+		if (api.view === "day") return api.format(d, {
+			month: "long",
+			year: "numeric"
+		});
+		if (api.view === "month") return api.format(d, { year: "numeric" });
+		const decade = Math.floor(d.year / 10) * 10;
+		return `${decade} - ${decade + 9}`;
+	};
+	const header = () => (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, createComponent(DatePicker.ViewControl, { get children() {
+			return [
+				createComponent(DatePicker.PrevTrigger, { get children() {
+					return chevron("left");
+				} }),
+				createComponent(DatePicker.Context, { children: (dp) => createComponent(DatePicker.ViewTrigger, { get children() {
+					return title(dp);
+				} }) }),
+				createComponent(DatePicker.NextTrigger, { get children() {
+					return chevron("right");
+				} })
+			];
+		} }));
+		return _el$2;
+	})();
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps(rest, {
+			"data-scope": "calendar",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$3, createComponent(DatePicker.Root, mergeProps({
+			open: true,
+			closeOnSelect: true,
+			inline: true
+		}, () => own.value !== void 0 ? { value: own.value } : {}, () => own.min !== void 0 ? { min: own.min } : {}, () => own.max !== void 0 ? { max: own.max } : {}, {
+			onValueChange: (details) => own.onValueChange?.(details.value),
+			get children() {
+				return [
+					createComponent(DatePicker.View, {
+						view: "day",
+						get children() {
+							return [memo(() => header()), createComponent(DatePicker.Table, { get children() {
+								return [createComponent(DatePicker.TableHead, { get children() {
+									return createComponent(DatePicker.TableRow, { get children() {
+										return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
+											get each() {
+												return dp().weekDays;
+											},
+											children: (day) => createComponent(DatePicker.TableHeader, {
+												get ["aria-label"]() {
+													return day.long;
+												},
+												get children() {
+													return day.narrow;
+												}
+											})
+										}) });
+									} });
+								} }), createComponent(DatePicker.TableBody, { get children() {
+									return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
+										get each() {
+											return dp().weeks;
+										},
+										children: (week) => createComponent(DatePicker.TableRow, { get children() {
+											return createComponent(For, {
+												each: week,
+												children: (day) => createComponent(DatePicker.TableCell, {
+													value: day,
+													get children() {
+														return createComponent(DatePicker.TableCellTrigger, { get children() {
+															return day.day;
+														} });
+													}
+												})
+											});
+										} })
+									}) });
+								} })];
+							} })];
+						}
+					}),
+					createComponent(DatePicker.View, {
+						view: "month",
+						get children() {
+							return [memo(() => header()), createComponent(DatePicker.Table, {
+								columns: 3,
+								get children() {
+									return createComponent(DatePicker.TableBody, { get children() {
+										return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
+											get each() {
+												return dp().getMonthsGrid({ columns: 3 });
+											},
+											children: (months) => createComponent(DatePicker.TableRow, { get children() {
+												return createComponent(For, {
+													each: months,
+													children: (month) => createComponent(DatePicker.TableCell, {
+														get value() {
+															return month.value;
+														},
+														columns: 3,
+														get children() {
+															return createComponent(DatePicker.TableCellTrigger, { get children() {
+																return month.label;
+															} });
+														}
+													})
+												});
+											} })
+										}) });
+									} });
+								}
+							})];
+						}
+					}),
+					createComponent(DatePicker.View, {
+						view: "year",
+						get children() {
+							return [memo(() => header()), createComponent(DatePicker.Table, {
+								columns: 3,
+								get children() {
+									return createComponent(DatePicker.TableBody, { get children() {
+										return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
+											get each() {
+												return dp().getYearsGrid({ columns: 3 });
+											},
+											children: (years) => createComponent(DatePicker.TableRow, { get children() {
+												return createComponent(For, {
+													each: years,
+													children: (year) => createComponent(DatePicker.TableCell, {
+														get value() {
+															return year.value;
+														},
+														columns: 3,
+														get children() {
+															return createComponent(DatePicker.TableCellTrigger, { get children() {
+																return year.label;
+															} });
+														}
+													})
+												});
+											} })
+										}) });
+									} });
+								}
+							})];
+						}
+					})
+				];
+			}
+		})), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return rest.children;
+			},
+			get children() {
+				return rest.children;
+			}
+		}), null);
+		return _el$3;
+	})();
+}
+//#endregion
+export { Calendar };

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

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+//#region src/components/card/index.d.ts
+export declare const Card: Component<Record<string, unknown>> & {
+  Root: Component<Record<string, unknown>>;
+  Header: Component<Record<string, unknown>>;
+  Title: Component<Record<string, unknown>>;
+  Description: Component<Record<string, unknown>>;
+  Content: Component<Record<string, unknown>>;
+  Footer: Component<Record<string, unknown>>;
+};
+//#endregion

package/dist/components/card/index.mjs

@@ -0,0 +1,33 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js/web";
+//#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) {
+	return ((props) => {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "card",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
+	});
+}
+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/solid/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/solid/carousel";
+//#region src/components/carousel/index.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. */
+const Carousel = Carousel$1;
+injectComponentStyle("carousel");
+//#endregion
+export { Carousel };

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

@@ -0,0 +1,31 @@
+import { JSX } from "solid-js";
+//#region src/components/cascade-select/index.d.ts
+export interface CascadeSelectNode {
+  label: string;
+  value: string;
+  children?: CascadeSelectNode[];
+  disabled?: boolean;
+}
+export interface CascadeSelectProps extends JSX.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;
+}
+/**
+ * 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 declare function CascadeSelect(props: CascadeSelectProps): JSX.Element;
+//#endregion

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

@@ -0,0 +1,265 @@
+import { Input } from "../input/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { Portal, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { For, Show, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps } from "solid-js";
+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-part=branch-indicator aria-hidden=true>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<li><span></span><span>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div data-part=search>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div><div><div data-part=corridor>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<div><div><button><span></span><span>`);
+var _tmpl$0 = /*#__PURE__*/ template(`<p data-part=empty>Nothing matches`);
+var _tmpl$1 = /*#__PURE__*/ template(`<button type=button 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);
+		const list = (() => {
+			var _el$4 = _tmpl$4();
+			spread(_el$4, mergeProps(() => mergeProps$1(() => api().getListProps(nodeProps))), false, 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);
+					return (() => {
+						var _el$5 = _tmpl$6(), _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
+						spread(_el$5, mergeProps(() => mergeProps$1(() => api().getItemProps(itemProps))), false, true);
+						spread(_el$6, mergeProps(() => mergeProps$1(() => api().getItemTextProps(itemProps))), false, true);
+						insert(_el$6, () => 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, mergeProps(() => mergeProps$1(() => api().getItemIndicatorProps(itemProps))), false, true);
+						insert(_el$8, checkGlyph);
+						return _el$5;
+					})();
+				}
+			}));
+			return _el$4;
+		})();
+		const next = nodeState().highlightedChild;
+		return [list, next != null && collection().isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState().highlightedIndex], [...valuePath, collection().getNodeValue(next)]) : null];
+	}
+	return (() => {
+		var _el$9 = _tmpl$9(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+		spread(_el$9, mergeProps(rest, () => mergeProps$1(() => api().getRootProps()), { get ["data-size"]() {
+			return own.size ?? "md";
+		} }), false, true);
+		spread(_el$0, mergeProps(() => mergeProps$1(() => api().getControlProps())), false, true);
+		spread(_el$1, mergeProps(() => mergeProps$1(() => api().getTriggerProps(), {
+			get disabled() {
+				return own.disabled || void 0;
+			},
+			onclick(event) {
+				api().getTriggerProps().onclick?.(event);
+				setQuery("");
+			}
+		})), false, true);
+		spread(_el$10, mergeProps(() => mergeProps$1(() => api().getValueTextProps())), false, true);
+		insert(_el$10, () => display() ?? own.placeholder ?? "Select…");
+		spread(_el$11, mergeProps(() => mergeProps$1(() => api().getIndicatorProps())), false, true);
+		insert(_el$11, chevronDown);
+		insert(_el$9, createComponent(Portal, { get children() {
+			var _el$12 = _tmpl$8(), _el$13 = _el$12.firstChild, _el$15 = _el$13.firstChild;
+			spread(_el$12, mergeProps(() => mergeProps$1(() => api().getPositionerProps())), false, true);
+			spread(_el$13, mergeProps(() => mergeProps$1(() => api().getContentProps()), { get ["data-size"]() {
+				return own.size ?? "md";
+			} }), false, true);
+			insert(_el$13, createComponent(Show, {
+				get when() {
+					return own.filterable;
+				},
+				get children() {
+					var _el$14 = _tmpl$7();
+					insert(_el$14, createComponent(Input, {
+						size: "sm",
+						get value() {
+							return query();
+						},
+						onValueChange: setQuery,
+						placeholder: "Filter…",
+						"aria-label": "Filter options"
+					}));
+					return _el$14;
+				}
+			}), _el$15);
+			insert(_el$15, createComponent(Show, {
+				get when() {
+					return !filtering();
+				},
+				get fallback() {
+					return createComponent(Show, {
+						get when() {
+							return matchPaths().length > 0;
+						},
+						get fallback() {
+							return _tmpl$0();
+						},
+						get children() {
+							return createComponent(For, {
+								get each() {
+									return matchPaths();
+								},
+								children: (hit) => (() => {
+									var _el$17 = _tmpl$1();
+									_el$17.$$click = () => pickMatch(hit.path);
+									insert(_el$17, () => hit.labels.join(" / "));
+									effect(() => setAttribute(_el$17, "data-selected", isSelected(hit.path) || void 0));
+									return _el$17;
+								})()
+							});
+						}
+					});
+				},
+				get children() {
+					return renderColumn(collection().rootNode, [], []);
+				}
+			}));
+			effect(() => setAttribute(_el$15, "data-flow", filtering() ? "flat" : "columns"));
+			return _el$12;
+		} }), 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 "solid-js/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