@igne-agency/react-web-ui 0.3.1 → 0.4.0

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

@@ -1,34 +1,34 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1px3l_3 {
+  ._root_oql8l_3 {
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--checkbox-gap, var(--sys-unit-8));
   }
-  ._label_1px3l_9 {
+  ._label_oql8l_9 {
     cursor: pointer;
   }
-  ._label_1px3l_9:hover ._control_1px3l_12 {
+  ._label_oql8l_9:hover ._control_oql8l_12 {
     border-color: var(--sys-color-primary);
   }
-  :where([data-readonly], [data-disabled]) ._label_1px3l_9 {
+  :where([data-readonly], [data-disabled]) ._label_oql8l_9 {
     cursor: default;
   }
-  :where([data-readonly], [data-disabled]) ._label_1px3l_9:hover ._control_1px3l_12:not([data-checked]) {
+  :where([data-readonly], [data-disabled]) ._label_oql8l_9:hover ._control_oql8l_12:not([data-checked]) {
     border-color: var(--box-border, var(--sys-color-border));
   }
-  ._label_1px3l_9 {
+  ._label_oql8l_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_1px3l_9:has(> [data-optional-suffix]) {
+  ._label_oql8l_9:has(> [data-optional-suffix]) {
     grid-template-areas: "control text" "control optional";
   }
-  ._control_1px3l_12 {
+  ._control_oql8l_12 {
     --box-border: var(--sys-color-border);
     --box-bg: var(--sys-color-surface);
     --box-fg: var(--sys-color-on-primary);
@@ -45,84 +45,76 @@
     color: var(--box-fg);
   }
   @media not (prefers-reduced-motion) {
-    ._control_1px3l_12 {
+    ._control_oql8l_12 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._control_1px3l_12:focus-visible {
+  ._control_oql8l_12:focus-visible {
     border-color: var(--sys-color-primary);
   }
-  ._control_1px3l_12 {
+  ._control_oql8l_12 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._control_1px3l_12[data-focus-visible] {
+  ._control_oql8l_12[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._control_1px3l_12 {
+  ._control_oql8l_12 {
     position: relative;
     grid-area: control;
     align-self: center;
     justify-self: center;
   }
-  ._control_1px3l_12[data-invalid], ._control_1px3l_12[aria-invalid=true] {
+  ._control_oql8l_12[data-invalid], ._control_oql8l_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_1px3l_12[data-readonly] {
+  ._control_oql8l_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_1px3l_12[data-checked], ._control_1px3l_12[data-indeterminate] {
+  ._control_oql8l_12[data-checked], ._control_oql8l_12[data-indeterminate] {
     --box-border: var(--box-checked-bg);
     --box-bg: var(--box-checked-bg);
   }
-  ._control_1px3l_12[data-disabled], ._control_1px3l_12:has(~ :disabled) {
+  ._control_oql8l_12[data-disabled], ._control_oql8l_12:has(~ :disabled) {
     --box-bg: var(--sys-color-disabled-bg);
     --box-checked-bg: var(--sys-color-disabled-bg);
     --box-fg: var(--sys-color-disabled-fg);
     cursor: not-allowed;
   }
-  ._indicator_1px3l_91 {
+  ._indicator_oql8l_91 {
     display: grid;
     place-items: center;
   }
-  ._indicator_1px3l_91 svg {
+  ._indicator_oql8l_91 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_1px3l_91 {
+  ._indicator_oql8l_91 {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1px3l_91 {
+    ._indicator_oql8l_91 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._indicator_1px3l_91[data-checked], ._indicator_1px3l_91[data-indeterminate] {
+  ._indicator_oql8l_91 {
+    font-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  }
+  ._indicator_oql8l_91[data-checked], ._indicator_oql8l_91[data-indeterminate] {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_1px3l_91[data-checked], ._indicator_1px3l_91[data-indeterminate] {
+    ._indicator_oql8l_91[data-checked], ._indicator_oql8l_91[data-indeterminate] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }
-  ._glyph_1px3l_117 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_1px3l_117 path {
-      transition: d var(--sys-motion-short) var(--sys-motion-emphasized);
-    }
-  }
-  ._indicator_1px3l_91[data-indeterminate] ._glyph_1px3l_117 path {
-    d: path("M12 11L20 11L20 13L12 13L4 13L4 11L12 11Z");
-  }
 }

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

@@ -1,14 +1,57 @@
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Field as BaseField } from "@base-ui/react/field";
 import type { ReactNode } from "react";
-export type CheckboxProps = BaseCheckbox.Root.Props;
+import { Field, type FieldProps, type FieldRootProps } from "../field/index.ts";
+export type CheckboxRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    /** The box is checked. */
+    filled?: boolean;
+    readOnly?: boolean;
+}>;
+/** The field around one checkbox, which projects its state as `data-*` attributes. */
+declare const CheckboxRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, className, ...props }: CheckboxRootProps) => ReactNode;
+/** The label beside the box, which wraps the control and its text so the two share one hit area. */
+declare const CheckboxLabel: ({ className, ...props }: BaseField.Label.Props) => ReactNode;
+export type CheckboxControlProps = Omit<BaseCheckbox.Root.Props, "checked" | "defaultChecked" | "onCheckedChange" | "indeterminate" | "disabled"> & Readonly<{
+    /** Whether the box is checked, when controlled. */
+    checked?: boolean;
+    /** Whether the box starts checked, when uncontrolled. */
+    defaultChecked?: boolean;
+    /** Called with the new checked state when the box is toggled. */
+    onCheckedChange?: BaseCheckbox.Root.Props["onCheckedChange"];
+    /** The box shows neither checked nor unchecked, for a parent over a mixed set. */
+    indeterminate?: boolean;
+    /** Whether the box ignores input. A busy form disables it too. @default false */
+    disabled?: boolean;
+}>;
+/** The box itself, which takes a `Checkbox.Indicator` as its child. */
+declare const CheckboxControl: ({ className, disabled, ...props }: CheckboxControlProps) => ReactNode;
+export type CheckboxIndicatorProps = BaseCheckbox.Indicator.Props;
+/** The mark inside the box, which pops in while it is checked or indeterminate. Its children are the mark. */
+declare const CheckboxIndicator: ({ className, keepMounted, ...props }: CheckboxIndicatorProps) => ReactNode;
+/** The parts of a checkbox. */
+export type CheckboxParts = Readonly<{
+    Root: typeof CheckboxRoot;
+    Label: typeof CheckboxLabel;
+    Control: typeof CheckboxControl;
+    Indicator: typeof CheckboxIndicator;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+}>;
 /**
- * The checkbox control over base-ui's, drawing a tick, or a dash when
- * `indeterminate`. Name it with a wrapping label, or use `CheckboxField`.
+ * The styled parts of a base-ui Checkbox: a box that fills when checked, with
+ * the mark the app passes to `Indicator`. `Label` wraps the control and its
+ * text, so the two share one hit area. For the ordinary case, use
+ * `CheckboxField`.
  *
  * @example
- * <label>
- * 	<Checkbox checked={agreed} onCheckedChange={setAgreed} />
- * 	I agree to the terms
- * </label>
+ * <Checkbox.Root filled={agreed}>
+ * 	<Checkbox.Label>
+ * 		<Checkbox.Control checked={agreed} onCheckedChange={setAgreed}>
+ * 			<Checkbox.Indicator><CheckIcon /></Checkbox.Indicator>
+ * 		</Checkbox.Control>
+ * 		I agree to the terms
+ * 	</Checkbox.Label>
+ * </Checkbox.Root>
  */
-export declare const Checkbox: ({ className, indeterminate, disabled, ...props }: CheckboxProps) => ReactNode;
+export declare const Checkbox: CheckboxParts;
+export {};

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

@@ -1,91 +1,255 @@
+import { Field as Field$1 } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { useFieldFocus } from "../field/use-field-focus.js";
+import { useFieldState } from "../field/use-field-state.js";
 import { useFormDisabled } from "../form/form-context.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 { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
+import { Field } from "@base-ui/react/field";
 // 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(19);
+/** The field around one checkbox, which projects its state as `data-*` attributes. */
+var CheckboxRoot = (t0) => {
+	const $ = c(32);
 	let className;
-	let indeterminate;
+	let dirty;
+	let disabled;
+	let errors;
+	let filled;
+	let pending;
 	let props;
+	let readOnly;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = dirty;
+		$[3] = disabled;
+		$[4] = errors;
+		$[5] = filled;
+		$[6] = pending;
+		$[7] = props;
+		$[8] = readOnly;
+		$[9] = requiredness;
+		$[10] = touched;
+	} else {
+		className = $[1];
+		dirty = $[2];
+		disabled = $[3];
+		errors = $[4];
+		filled = $[5];
+		pending = $[6];
+		props = $[7];
+		readOnly = $[8];
+		requiredness = $[9];
+		touched = $[10];
+	}
 	let t1;
+	if ($[11] !== dirty || $[12] !== disabled || $[13] !== errors || $[14] !== filled || $[15] !== pending || $[16] !== readOnly || $[17] !== requiredness || $[18] !== touched) {
+		t1 = {
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			disabled,
+			readOnly,
+			filled
+		};
+		$[11] = dirty;
+		$[12] = disabled;
+		$[13] = errors;
+		$[14] = filled;
+		$[15] = pending;
+		$[16] = readOnly;
+		$[17] = requiredness;
+		$[18] = touched;
+		$[19] = t1;
+	} else t1 = $[19];
+	const field = useFieldState(t1);
+	let t2;
+	if ($[20] !== className) {
+		t2 = clsx(checkbox_module_default.root, className);
+		$[20] = className;
+		$[21] = t2;
+	} else t2 = $[21];
+	const t3 = field.disabled;
+	const t4 = field.invalid;
+	let t5;
+	if ($[22] !== field.state) {
+		t5 = fieldStateAttributes(field.state);
+		$[22] = field.state;
+		$[23] = t5;
+	} else t5 = $[23];
+	let t6;
+	if ($[24] !== dirty || $[25] !== field.disabled || $[26] !== field.invalid || $[27] !== props || $[28] !== t2 || $[29] !== t5 || $[30] !== touched) {
+		t6 = /* @__PURE__ */ jsx(Field$1.Root, {
+			className: t2,
+			disabled: t3,
+			invalid: t4,
+			dirty,
+			touched,
+			...t5,
+			...props
+		});
+		$[24] = dirty;
+		$[25] = field.disabled;
+		$[26] = field.invalid;
+		$[27] = props;
+		$[28] = t2;
+		$[29] = t5;
+		$[30] = touched;
+		$[31] = t6;
+	} else t6 = $[31];
+	return t6;
+};
+/** The label beside the box, which wraps the control and its text so the two share one hit area. */
+var CheckboxLabel = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
 	if ($[0] !== t0) {
-		({className, indeterminate, disabled: t1, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = indeterminate;
-		$[3] = props;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(checkbox_module_default.label, className);
+		$[3] = className;
 		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Field.Label, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The box itself, which takes a `Checkbox.Indicator` as its child. */
+var CheckboxControl = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, disabled: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
 	} else {
 		className = $[1];
-		indeterminate = $[2];
-		props = $[3];
-		t1 = $[4];
+		props = $[2];
+		t1 = $[3];
 	}
 	const disabled = t1 === void 0 ? false : t1;
 	const focus = useFieldFocus(props);
 	const formDisabled = useFormDisabled();
 	let t2;
-	if ($[5] !== className) {
+	if ($[4] !== className) {
 		t2 = clsx(checkbox_module_default.control, className);
-		$[5] = className;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
 	const t3 = disabled || formDisabled;
 	let t4;
-	if ($[7] !== focus) {
+	if ($[6] !== focus) {
 		t4 = fieldStateAttributes(focus);
-		$[7] = focus;
-		$[8] = t4;
-	} else t4 = $[8];
+		$[6] = focus;
+		$[7] = t4;
+	} else t4 = $[7];
 	let t5;
-	if ($[9] !== indeterminate) {
-		t5 = /* @__PURE__ */ jsx(Checkbox.Indicator, {
-			keepMounted: true,
-			className: checkbox_module_default.indicator,
-			children: /* @__PURE__ */ jsx(CheckboxGlyph, {
-				indeterminate,
-				className: checkbox_module_default.glyph
-			})
-		});
-		$[9] = indeterminate;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== focus.props || $[12] !== indeterminate || $[13] !== props || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Checkbox.Root, {
+	if ($[8] !== focus.props || $[9] !== props || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Checkbox.Root, {
 			className: t2,
-			indeterminate,
 			disabled: t3,
 			...t4,
 			...props,
-			...focus.props,
-			children: t5
+			...focus.props
 		});
-		$[11] = focus.props;
-		$[12] = indeterminate;
-		$[13] = props;
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t4;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	return t6;
+		$[8] = focus.props;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+};
+/** The mark inside the box, which pops in while it is checked or indeterminate. Its children are the mark. */
+var CheckboxIndicator = (t0) => {
+	const $ = c(10);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, keepMounted: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const keepMounted = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[4] !== className) {
+		t2 = clsx(checkbox_module_default.indicator, className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== keepMounted || $[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			keepMounted,
+			className: t2,
+			...props
+		});
+		$[6] = keepMounted;
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+/**
+* The styled parts of a base-ui Checkbox: a box that fills when checked, with
+* the mark the app passes to `Indicator`. `Label` wraps the control and its
+* text, so the two share one hit area. For the ordinary case, use
+* `CheckboxField`.
+*
+* @example
+* <Checkbox.Root filled={agreed}>
+* 	<Checkbox.Label>
+* 		<Checkbox.Control checked={agreed} onCheckedChange={setAgreed}>
+* 			<Checkbox.Indicator><CheckIcon /></Checkbox.Indicator>
+* 		</Checkbox.Control>
+* 		I agree to the terms
+* 	</Checkbox.Label>
+* </Checkbox.Root>
+*/
+var Checkbox$1 = {
+	Root: CheckboxRoot,
+	Label: CheckboxLabel,
+	Control: CheckboxControl,
+	Indicator: CheckboxIndicator,
+	Description: Field$1.Description,
+	Error: Field$1.Error
 };
 export { Checkbox$1 as Checkbox };

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

@@ -1,14 +1,12 @@
 import './checkbox.css';// src/components/checkbox-field/checkbox.module.scss
-var root = "_root_1px3l_3";
-var label = "_label_1px3l_9";
-var control = "_control_1px3l_12";
-var indicator = "_indicator_1px3l_91";
-var glyph = "_glyph_1px3l_117";
+var root = "_root_oql8l_3";
+var label = "_label_oql8l_9";
+var control = "_control_oql8l_12";
+var indicator = "_indicator_oql8l_91";
 var checkbox_module_default = {
 	root,
 	label,
 	control,
-	indicator,
-	glyph
+	indicator
 };
-export { control, checkbox_module_default as default, glyph, indicator, label, root };
+export { control, checkbox_module_default as default, indicator, label, root };

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

@@ -1,4 +1,3 @@
 export * from "./checkbox.tsx";
 export * from "./checkbox-field.tsx";
-export * from "./checkbox-glyph.tsx";
 export * from "./tsf-checkbox-field.tsx";

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

@@ -1,5 +1,4 @@
 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 };
+export { Checkbox, CheckboxField, TSFCheckboxField };

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

@@ -1,7 +1,7 @@
 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">;
+import { type CheckboxFieldBaseProps, type CheckboxFieldIndeterminateProps } from "./checkbox-field.tsx";
+export type TSFCheckboxFieldProps = Omit<CheckboxFieldBaseProps, keyof ConnectedFieldProps | "checked" | "defaultChecked" | "onCheckedChange"> & CheckboxFieldIndeterminateProps;
 /**
  * `CheckboxField` bound to the TanStack Form field it renders in, whose value
  * is a boolean. Reach it as `field.CheckboxField` inside `form.AppField`.

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

@@ -9,6 +9,8 @@ export type CheckboxGroupItem = Readonly<{
 export type CheckboxGroupFieldProps = FieldProps & Pick<BaseCheckboxGroup.Props, "value" | "defaultValue" | "onValueChange" | "disabled"> & Readonly<{
     /** The boxes, in the order they read. */
     items: readonly CheckboxGroupItem[];
+    /** The mark a ticked box shows, such as a tick. */
+    checkIcon: ReactNode;
     readOnly?: boolean;
     /** Prefixes each box's id, so ids stay stable across renders. */
     name?: string;
@@ -26,8 +28,9 @@ export type CheckboxGroupFieldProps = FieldProps & Pick<BaseCheckboxGroup.Props,
  * 	label="Statuses"
  * 	optionalLabel="optional"
  * 	items={[{ label: "Open", value: "open" }]}
+ * 	checkIcon={<CheckIcon />}
  * 	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;
+export declare const CheckboxGroupField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, items, checkIcon, readOnly, name, onBlur, className, value, defaultValue, onValueChange, disabled, }: CheckboxGroupFieldProps) => ReactNode;