@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/checkbox-field/checkbox-field.js

@@ -0,0 +1,180 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { Field as Field$1 } from "../field/field.js";
+import { detachHiddenInput } from "../field/hidden-input.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { Checkbox } from "./checkbox.js";
+import checkbox_module_default from "./checkbox.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Field } from "@base-ui/react/field";
+// src/components/checkbox-field/checkbox-field.tsx
+/**
+* The assembled checkbox: the label beside the box, which also toggles it, then
+* the description and the error.
+*
+* @example
+* <CheckboxField
+* 	label="I agree to the terms"
+* 	optionalLabel="optional"
+* 	checked={agreed}
+* 	onCheckedChange={setAgreed}
+* />
+*/
+var CheckboxField = (t0) => {
+	const $ = c(51);
+	let className;
+	let description;
+	let dirty;
+	let errors;
+	let label;
+	let name;
+	let optionalLabel;
+	let pending;
+	let props;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = description;
+		$[3] = dirty;
+		$[4] = errors;
+		$[5] = label;
+		$[6] = name;
+		$[7] = optionalLabel;
+		$[8] = pending;
+		$[9] = props;
+		$[10] = requiredness;
+		$[11] = touched;
+	} else {
+		className = $[1];
+		description = $[2];
+		dirty = $[3];
+		errors = $[4];
+		label = $[5];
+		name = $[6];
+		optionalLabel = $[7];
+		pending = $[8];
+		props = $[9];
+		requiredness = $[10];
+		touched = $[11];
+	}
+	const ids = Field$1.useIds();
+	let t1;
+	if ($[12] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[12] = errors;
+		$[13] = t1;
+	} else t1 = $[13];
+	const invalid = t1.length > 0;
+	let t2;
+	if ($[14] !== className) {
+		t2 = clsx(checkbox_module_default.root, className);
+		$[14] = className;
+		$[15] = t2;
+	} else t2 = $[15];
+	const t3 = props.disabled;
+	const t4 = props.checked === true;
+	let t5;
+	if ($[16] !== dirty || $[17] !== invalid || $[18] !== pending || $[19] !== props.disabled || $[20] !== props.readOnly || $[21] !== requiredness || $[22] !== t4 || $[23] !== touched) {
+		t5 = fieldStateAttributes({
+			disabled: props.disabled,
+			readonly: props.readOnly,
+			requiredness,
+			invalid,
+			dirty,
+			touched,
+			pending,
+			filled: t4
+		});
+		$[16] = dirty;
+		$[17] = invalid;
+		$[18] = pending;
+		$[19] = props.disabled;
+		$[20] = props.readOnly;
+		$[21] = requiredness;
+		$[22] = t4;
+		$[23] = touched;
+		$[24] = t5;
+	} else t5 = $[24];
+	const t6 = requiredness === "required";
+	let t7;
+	if ($[25] !== ids.controlId || $[26] !== props || $[27] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Checkbox, {
+			name: ids.controlId,
+			inputRef: detachHiddenInput,
+			required: t6,
+			...props
+		});
+		$[25] = ids.controlId;
+		$[26] = props;
+		$[27] = t6;
+		$[28] = t7;
+	} else t7 = $[28];
+	let t8;
+	if ($[29] !== label || $[30] !== optionalLabel || $[31] !== requiredness) {
+		t8 = /* @__PURE__ */ jsx(Field$1.InlineLabelText, {
+			label,
+			requiredness,
+			optionalLabel
+		});
+		$[29] = label;
+		$[30] = optionalLabel;
+		$[31] = requiredness;
+		$[32] = t8;
+	} else t8 = $[32];
+	let t9;
+	if ($[33] !== t7 || $[34] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Field.Label, {
+			className: checkbox_module_default.label,
+			children: [t7, t8]
+		});
+		$[33] = t7;
+		$[34] = t8;
+		$[35] = t9;
+	} else t9 = $[35];
+	let t10;
+	if ($[36] !== description) {
+		t10 = /* @__PURE__ */ jsx(Field$1.Description, { children: description });
+		$[36] = description;
+		$[37] = t10;
+	} else t10 = $[37];
+	let t11;
+	if ($[38] !== errors) {
+		t11 = /* @__PURE__ */ jsx(Field$1.Error, { children: errors });
+		$[38] = errors;
+		$[39] = t11;
+	} else t11 = $[39];
+	let t12;
+	if ($[40] !== dirty || $[41] !== invalid || $[42] !== name || $[43] !== props.disabled || $[44] !== t10 || $[45] !== t11 || $[46] !== t2 || $[47] !== t5 || $[48] !== t9 || $[49] !== touched) {
+		t12 = /* @__PURE__ */ jsxs(Field$1.Root, {
+			name,
+			className: t2,
+			disabled: t3,
+			invalid,
+			dirty,
+			touched,
+			...t5,
+			children: [
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[40] = dirty;
+		$[41] = invalid;
+		$[42] = name;
+		$[43] = props.disabled;
+		$[44] = t10;
+		$[45] = t11;
+		$[46] = t2;
+		$[47] = t5;
+		$[48] = t9;
+		$[49] = touched;
+		$[50] = t12;
+	} else t12 = $[50];
+	return t12;
+};
+export { CheckboxField };

package/dist/components/checkbox-field/checkbox-glyph.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+/**
+ * The tick a checkbox draws, as one path so it can morph. The indeterminate bar
+ * traces the same six points with the bend flattened out.
+ *
+ * @example
+ * <CheckboxGlyph indeterminate={isMixed} className={style.glyph} />
+ */
+export declare const CheckboxGlyph: ({ indeterminate, className, }: Readonly<{
+    indeterminate?: boolean;
+    className?: string;
+}>) => ReactNode;
+//# sourceMappingURL=checkbox-glyph.d.ts.map

package/dist/components/checkbox-field/checkbox-glyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-glyph.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-field/checkbox-glyph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,kCAGvB,QAAQ,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,KAAG,SAUJ,CAAC"}

package/dist/components/checkbox-field/checkbox-glyph.js

@@ -0,0 +1,38 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/checkbox-field/checkbox-glyph.tsx
+var CHECK_PATH = "M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z";
+var DASH_PATH = "M12 11L20 11L20 13L12 13L4 13L4 11L12 11Z";
+/**
+* The tick a checkbox draws, as one path so it can morph. The indeterminate bar
+* traces the same six points with the bend flattened out.
+*
+* @example
+* <CheckboxGlyph indeterminate={isMixed} className={style.glyph} />
+*/
+var CheckboxGlyph = (t0) => {
+	const $ = c(5);
+	const { indeterminate, className } = t0;
+	const t1 = indeterminate === true ? DASH_PATH : CHECK_PATH;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = /* @__PURE__ */ jsx("path", { d: t1 });
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== className || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			className,
+			children: t2
+		});
+		$[2] = className;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+};
+export { CheckboxGlyph };

package/dist/components/checkbox-field/checkbox.css

@@ -0,0 +1,126 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1lfti_3 {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--checkbox-gap, var(--sys-unit-8));
+  }
+  ._label_1lfti_9 {
+    cursor: pointer;
+  }
+  ._label_1lfti_9:hover ._control_1lfti_12 {
+    border-color: var(--sys-color-primary);
+  }
+  :where([data-readonly], [data-disabled]) ._label_1lfti_9 {
+    cursor: default;
+  }
+  :where([data-readonly], [data-disabled]) ._label_1lfti_9:hover ._control_1lfti_12:not([data-checked]) {
+    border-color: var(--box-border, var(--sys-color-border));
+  }
+  ._label_1lfti_9 {
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "control text";
+    align-items: center;
+    gap: var(--sys-unit-1) var(--sys-unit-6);
+  }
+  ._label_1lfti_9:has(> [data-optional-suffix]) {
+    grid-template-areas: "control text" "control optional";
+  }
+  ._control_1lfti_12 {
+    --box-border: var(--sys-color-border);
+    --box-bg: var(--sys-color-surface);
+    --box-fg: var(--sys-color-on-primary);
+    --box-checked-bg: var(--sys-color-primary);
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    box-sizing: border-box;
+    inline-size: var(--checkbox-size, var(--sys-unit-16));
+    block-size: var(--checkbox-size, var(--sys-unit-16));
+    border: 1px solid var(--box-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--box-bg);
+    color: var(--box-fg);
+  }
+  @media not (prefers-reduced-motion) {
+    ._control_1lfti_12 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._control_1lfti_12:focus-visible {
+    border-color: var(--sys-color-primary);
+  }
+  ._control_1lfti_12 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._control_1lfti_12[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._control_1lfti_12 {
+    position: relative;
+    grid-area: control;
+    align-self: center;
+    justify-self: center;
+  }
+  ._control_1lfti_12[data-invalid], ._control_1lfti_12[aria-invalid=true] {
+    --box-border: var(--sys-color-error-fg);
+    --box-bg: var(--sys-color-error-bg);
+    --box-checked-bg: var(--sys-color-error-fg);
+    --box-fg: var(--sys-color-error-bg);
+  }
+  ._control_1lfti_12[data-readonly] {
+    --box-border: var(--sys-color-outline);
+    --box-bg: var(--sys-color-surface-high);
+    --box-checked-bg: var(--sys-color-primary-container);
+    --box-fg: var(--sys-color-on-primary-container);
+    border-style: dashed;
+  }
+  ._control_1lfti_12[data-checked], ._control_1lfti_12[data-indeterminate] {
+    --box-border: var(--box-checked-bg);
+    --box-bg: var(--box-checked-bg);
+  }
+  ._control_1lfti_12[data-disabled], ._control_1lfti_12:has(~ :disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._indicator_1lfti_89 {
+    display: grid;
+    place-items: center;
+  }
+  ._indicator_1lfti_89 svg {
+    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  }
+  ._indicator_1lfti_89 {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_1lfti_89 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_1lfti_89[data-checked], ._indicator_1lfti_89[data-indeterminate] {
+    opacity: 1;
+    scale: 1;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_1lfti_89[data-checked], ._indicator_1lfti_89[data-indeterminate] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+  ._glyph_1lfti_115 path {
+    d: path("M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z");
+  }
+  @media not (prefers-reduced-motion) {
+    ._glyph_1lfti_115 path {
+      transition: d var(--sys-motion-short) var(--sys-motion-emphasized);
+    }
+  }
+  ._indicator_1lfti_89[data-indeterminate] ._glyph_1lfti_115 path {
+    d: path("M12 11L20 11L20 13L12 13L4 13L4 11L12 11Z");
+  }
+}

package/dist/components/checkbox-field/checkbox.d.ts

@@ -0,0 +1,15 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import type { ReactNode } from "react";
+export type CheckboxProps = BaseCheckbox.Root.Props;
+/**
+ * The checkbox control over base-ui's, drawing a tick, or a dash when
+ * `indeterminate`. Name it with a wrapping label, or use `CheckboxField`.
+ *
+ * @example
+ * <label>
+ * 	<Checkbox checked={agreed} onCheckedChange={setAgreed} />
+ * 	I agree to the terms
+ * </label>
+ */
+export declare const Checkbox: ({ className, indeterminate, ...props }: CheckboxProps) => ReactNode;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox-field/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-field/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,2CAIlB,aAAa,KAAG,SAmBlB,CAAC"}

package/dist/components/checkbox-field/checkbox.js

@@ -0,0 +1,82 @@
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus } from "../field/use-field-focus.js";
+import { CheckboxGlyph } from "./checkbox-glyph.js";
+import checkbox_module_default from "./checkbox.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Checkbox } from "@base-ui/react/checkbox";
+// src/components/checkbox-field/checkbox.tsx
+/**
+* The checkbox control over base-ui's, drawing a tick, or a dash when
+* `indeterminate`. Name it with a wrapping label, or use `CheckboxField`.
+*
+* @example
+* <label>
+* 	<Checkbox checked={agreed} onCheckedChange={setAgreed} />
+* 	I agree to the terms
+* </label>
+*/
+var Checkbox$1 = (t0) => {
+	const $ = c(17);
+	let className;
+	let indeterminate;
+	let props;
+	if ($[0] !== t0) {
+		({className, indeterminate, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = indeterminate;
+		$[3] = props;
+	} else {
+		className = $[1];
+		indeterminate = $[2];
+		props = $[3];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(checkbox_module_default.control, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== focus) {
+		t2 = fieldStateAttributes(focus);
+		$[6] = focus;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== indeterminate) {
+		t3 = /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			keepMounted: true,
+			className: checkbox_module_default.indicator,
+			children: /* @__PURE__ */ jsx(CheckboxGlyph, {
+				indeterminate,
+				className: checkbox_module_default.glyph
+			})
+		});
+		$[8] = indeterminate;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== focus.props || $[11] !== indeterminate || $[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Checkbox.Root, {
+			className: t1,
+			indeterminate,
+			...t2,
+			...props,
+			...focus.props,
+			children: t3
+		});
+		$[10] = focus.props;
+		$[11] = indeterminate;
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+};
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox-field/checkbox.module.js

@@ -0,0 +1,14 @@
+import './checkbox.css';// src/components/checkbox-field/checkbox.module.scss
+var root = "_root_1lfti_3";
+var label = "_label_1lfti_9";
+var control = "_control_1lfti_12";
+var indicator = "_indicator_1lfti_89";
+var glyph = "_glyph_1lfti_115";
+var checkbox_module_default = {
+	root,
+	label,
+	control,
+	indicator,
+	glyph
+};
+export { control, checkbox_module_default as default, glyph, indicator, label, root };

package/dist/components/checkbox-field/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./checkbox.tsx";
+export * from "./checkbox-field.tsx";
+export * from "./checkbox-glyph.tsx";
+export * from "./tsf-checkbox-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC"}

package/dist/components/checkbox-field/index.js

@@ -0,0 +1,5 @@
+import { Checkbox } from "./checkbox.js";
+import { CheckboxField } from "./checkbox-field.js";
+import { CheckboxGlyph } from "./checkbox-glyph.js";
+import { TSFCheckboxField } from "./tsf-checkbox-field.js";
+export { Checkbox, CheckboxField, CheckboxGlyph, TSFCheckboxField };

package/dist/components/checkbox-field/tsf-checkbox-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type CheckboxFieldProps } from "./checkbox-field.tsx";
+export type TSFCheckboxFieldProps = Omit<CheckboxFieldProps, keyof ConnectedFieldProps | "checked" | "defaultChecked" | "onCheckedChange">;
+/**
+ * `CheckboxField` bound to the TanStack Form field it renders in, whose value
+ * is a boolean. Reach it as `field.CheckboxField` inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="terms">
+ * 	{field => <field.CheckboxField label="I agree to the terms" requiredness="required" optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFCheckboxField: (props: TSFCheckboxFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-checkbox-field.d.ts.map

package/dist/components/checkbox-field/tsf-checkbox-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-checkbox-field.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-field/tsf-checkbox-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,kBAAkB,EAChB,MAAM,mBAAmB,GACzB,SAAS,GACT,gBAAgB,GAChB,iBAAiB,CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,UACrB,qBAAqB,KAC1B,SAcF,CAAC"}

package/dist/components/checkbox-field/tsf-checkbox-field.js

@@ -0,0 +1,40 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { CheckboxField } from "./checkbox-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/checkbox-field/tsf-checkbox-field.tsx
+/**
+* `CheckboxField` bound to the TanStack Form field it renders in, whose value
+* is a boolean. Reach it as `field.CheckboxField` inside `form.AppField`.
+*
+* @example
+* <form.AppField name="terms">
+* 	{field => <field.CheckboxField label="I agree to the terms" requiredness="required" optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFCheckboxField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (checked) => field.handleChange(checked);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(CheckboxField, {
+			...props,
+			...connected,
+			checked: field.state.value,
+			onCheckedChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFCheckboxField };

package/dist/components/checkbox-group-field/checkbox-group-field.d.ts

@@ -0,0 +1,35 @@
+import type { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import type { ReactNode } from "react";
+import type { CheckboxProps } from "../checkbox-field/index.ts";
+import { type FieldProps } from "../field/index.ts";
+/** One box of a checkbox group. */
+export type CheckboxGroupItem = Readonly<{
+    label: string;
+    value: string;
+}>;
+export type CheckboxGroupFieldProps = FieldProps & Pick<BaseCheckboxGroup.Props, "value" | "defaultValue" | "onValueChange" | "disabled"> & Readonly<{
+    /** The boxes, in the order they read. */
+    items: readonly CheckboxGroupItem[];
+    readOnly?: boolean;
+    /** Prefixes each box's id, so ids stay stable across renders. */
+    name?: string;
+    onBlur?: CheckboxProps["onBlur"];
+    /** Applied to the fieldset, so callers can place the group. */
+    className?: string;
+}>;
+/**
+ * The assembled checkbox group: a fieldset named by its label, holding one box
+ * per item, whose value is the array of ticked values; then the description
+ * and the error.
+ *
+ * @example
+ * <CheckboxGroupField
+ * 	label="Statuses"
+ * 	optionalLabel="optional"
+ * 	items={[{ label: "Open", value: "open" }]}
+ * 	value={statuses}
+ * 	onValueChange={setStatuses}
+ * />
+ */
+export declare const CheckboxGroupField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, items, readOnly, name, onBlur, className, value, defaultValue, onValueChange, disabled, }: CheckboxGroupFieldProps) => ReactNode;
+//# sourceMappingURL=checkbox-group-field.d.ts.map

package/dist/components/checkbox-group-field/checkbox-group-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-field.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox-group-field/checkbox-group-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACxF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EACN,KAAK,UAAU,EAEf,MAAM,mBAAmB,CAAC;AAG3B,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAC/C,IAAI,CACH,iBAAiB,CAAC,KAAK,EACvB,OAAO,GAAG,cAAc,GAAG,eAAe,GAAG,UAAU,CACvD,GACD,QAAQ,CAAC;IACR,yCAAyC;IACzC,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,kLAkB5B,uBAAuB,KAAG,SAgD5B,CAAC"}