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

package/dist/components/button/button.js

@@ -1,9 +1,8 @@
-import { Icon } from "../icon/icon.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { buttonAttributes } from "./button-attributes.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/button/button.tsx
 var ButtonElement = (t0) => {
 	const $ = c(6);
@@ -41,7 +40,7 @@ var ButtonElement = (t0) => {
 * <Button variant="primary" size="md" onClick={apply}>Apply</Button>
 */
 var Button = (props) => {
-	const $ = c(49);
+	const $ = c(45);
 	if (props.iconOnly) {
 		let className;
 		let icon;
@@ -90,44 +89,35 @@ var Button = (props) => {
 			$[14] = t0;
 		} else t0 = $[14];
 		let t1;
-		if ($[15] !== icon) {
-			t1 = /* @__PURE__ */ jsx(Icon, {
-				svg: icon,
-				label: ""
-			});
-			$[15] = icon;
-			$[16] = t1;
-		} else t1 = $[16];
-		let t2;
-		if ($[17] !== iconOnly || $[18] !== label || $[19] !== nativeProps || $[20] !== render || $[21] !== t0 || $[22] !== t1) {
-			t2 = /* @__PURE__ */ jsx(ButtonElement, {
+		if ($[15] !== icon || $[16] !== iconOnly || $[17] !== label || $[18] !== nativeProps || $[19] !== render || $[20] !== t0) {
+			t1 = /* @__PURE__ */ jsx(ButtonElement, {
 				render,
 				type: "button",
 				"aria-label": label,
 				...t0,
 				"data-icon-only": iconOnly,
 				...nativeProps,
-				children: t1
+				children: icon
 			});
-			$[17] = iconOnly;
-			$[18] = label;
-			$[19] = nativeProps;
-			$[20] = render;
-			$[21] = t0;
-			$[22] = t1;
-			$[23] = t2;
-		} else t2 = $[23];
-		let t3;
-		if ($[24] !== label || $[25] !== t2) {
-			t3 = /* @__PURE__ */ jsx(Tooltip, {
+			$[15] = icon;
+			$[16] = iconOnly;
+			$[17] = label;
+			$[18] = nativeProps;
+			$[19] = render;
+			$[20] = t0;
+			$[21] = t1;
+		} else t1 = $[21];
+		let t2;
+		if ($[22] !== label || $[23] !== t1) {
+			t2 = /* @__PURE__ */ jsx(Tooltip, {
 				content: label,
-				children: t2
+				children: t1
 			});
-			$[24] = label;
-			$[25] = t2;
-			$[26] = t3;
-		} else t3 = $[26];
-		return t3;
+			$[22] = label;
+			$[23] = t1;
+			$[24] = t2;
+		} else t2 = $[24];
+		return t2;
 	}
 	let children;
 	let className_0;
@@ -137,7 +127,7 @@ var Button = (props) => {
 	let size_0;
 	let tone_0;
 	let variant_0;
-	if ($[27] !== props) {
+	if ($[25] !== props) {
 		const { variant: t0, size: t1, tone: t2, className: t3, iconOnly: _iconOnly, icon: t4, children: t5, render: t6, ...t7 } = props;
 		variant_0 = t0;
 		size_0 = t1;
@@ -147,64 +137,55 @@ var Button = (props) => {
 		children = t5;
 		render_0 = t6;
 		nativeProps_0 = t7;
-		$[27] = props;
-		$[28] = children;
-		$[29] = className_0;
-		$[30] = icon_0;
-		$[31] = nativeProps_0;
-		$[32] = render_0;
-		$[33] = size_0;
-		$[34] = tone_0;
-		$[35] = variant_0;
+		$[25] = props;
+		$[26] = children;
+		$[27] = className_0;
+		$[28] = icon_0;
+		$[29] = nativeProps_0;
+		$[30] = render_0;
+		$[31] = size_0;
+		$[32] = tone_0;
+		$[33] = variant_0;
 	} else {
-		children = $[28];
-		className_0 = $[29];
-		icon_0 = $[30];
-		nativeProps_0 = $[31];
-		render_0 = $[32];
-		size_0 = $[33];
-		tone_0 = $[34];
-		variant_0 = $[35];
+		children = $[26];
+		className_0 = $[27];
+		icon_0 = $[28];
+		nativeProps_0 = $[29];
+		render_0 = $[30];
+		size_0 = $[31];
+		tone_0 = $[32];
+		variant_0 = $[33];
 	}
 	let t0;
-	if ($[36] !== className_0 || $[37] !== size_0 || $[38] !== tone_0 || $[39] !== variant_0) {
+	if ($[34] !== className_0 || $[35] !== size_0 || $[36] !== tone_0 || $[37] !== variant_0) {
 		t0 = buttonAttributes({
 			variant: variant_0,
 			size: size_0,
 			tone: tone_0,
 			className: className_0
 		});
-		$[36] = className_0;
-		$[37] = size_0;
-		$[38] = tone_0;
-		$[39] = variant_0;
-		$[40] = t0;
-	} else t0 = $[40];
+		$[34] = className_0;
+		$[35] = size_0;
+		$[36] = tone_0;
+		$[37] = variant_0;
+		$[38] = t0;
+	} else t0 = $[38];
 	let t1;
-	if ($[41] !== icon_0) {
-		t1 = icon_0 ? /* @__PURE__ */ jsx(Icon, {
-			svg: icon_0,
-			label: ""
-		}) : null;
-		$[41] = icon_0;
-		$[42] = t1;
-	} else t1 = $[42];
-	let t2;
-	if ($[43] !== children || $[44] !== nativeProps_0 || $[45] !== render_0 || $[46] !== t0 || $[47] !== t1) {
-		t2 = /* @__PURE__ */ jsxs(ButtonElement, {
+	if ($[39] !== children || $[40] !== icon_0 || $[41] !== nativeProps_0 || $[42] !== render_0 || $[43] !== t0) {
+		t1 = /* @__PURE__ */ jsxs(ButtonElement, {
 			render: render_0,
 			type: "button",
 			...t0,
 			...nativeProps_0,
-			children: [t1, children]
+			children: [icon_0, children]
 		});
-		$[43] = children;
-		$[44] = nativeProps_0;
-		$[45] = render_0;
-		$[46] = t0;
-		$[47] = t1;
-		$[48] = t2;
-	} else t2 = $[48];
-	return t2;
+		$[39] = children;
+		$[40] = icon_0;
+		$[41] = nativeProps_0;
+		$[42] = render_0;
+		$[43] = t0;
+		$[44] = t1;
+	} else t1 = $[44];
+	return t1;
 };
 export { Button };

package/dist/components/button/close-button.d.ts

@@ -2,6 +2,8 @@ import type { ReactElement, ReactNode } from "react";
 export type CloseButtonProps = Readonly<{
     /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
     closeLabel: string;
+    /** The app's close glyph, drawn in `currentColor` at `1em`. */
+    icon: ReactNode;
     /** The library part that closes, such as `<BaseDialog.Close />`. */
     render: ReactElement;
 }>;
@@ -9,6 +11,6 @@ export type CloseButtonProps = Readonly<{
  * The icon-only way out of an overlay, rendered as the overlay's own close part.
  *
  * @example
- * <CloseButton closeLabel="Close" render={<BaseDialog.Close />} />
+ * <CloseButton closeLabel="Close" icon={<CloseIcon />} render={<BaseDialog.Close />} />
  */
-export declare const CloseButton: ({ closeLabel, render, }: CloseButtonProps) => ReactNode;
+export declare const CloseButton: ({ closeLabel, icon, render, }: CloseButtonProps) => ReactNode;

package/dist/components/button/close-button.js

@@ -1,4 +1,3 @@
-import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
 import { Button } from "./button.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -7,24 +6,25 @@ import { jsx } from "react/jsx-runtime";
 * The icon-only way out of an overlay, rendered as the overlay's own close part.
 *
 * @example
-* <CloseButton closeLabel="Close" render={<BaseDialog.Close />} />
+* <CloseButton closeLabel="Close" icon={<CloseIcon />} render={<BaseDialog.Close />} />
 */
 var CloseButton = (t0) => {
-	const $ = c(3);
-	const { closeLabel, render } = t0;
+	const $ = c(4);
+	const { closeLabel, icon, render } = t0;
 	let t1;
-	if ($[0] !== closeLabel || $[1] !== render) {
+	if ($[0] !== closeLabel || $[1] !== icon || $[2] !== render) {
 		t1 = /* @__PURE__ */ jsx(Button, {
 			variant: "tertiary",
 			iconOnly: true,
-			icon: SvgClose,
+			icon,
 			label: closeLabel,
 			render
 		});
 		$[0] = closeLabel;
-		$[1] = render;
-		$[2] = t1;
-	} else t1 = $[2];
+		$[1] = icon;
+		$[2] = render;
+		$[3] = t1;
+	} else t1 = $[3];
 	return t1;
 };
 export { CloseButton };

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

@@ -1,11 +1,24 @@
 import type { ReactNode } from "react";
 import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
-import { type CheckboxProps } from "./checkbox.tsx";
-export type CheckboxFieldProps = FieldProps & Omit<CheckboxProps, "className" | "onBlur"> & Readonly<{
+import { type CheckboxControlProps } from "./checkbox.tsx";
+export type CheckboxFieldBaseProps = FieldProps & Omit<CheckboxControlProps, "className" | "onBlur" | "children" | "indeterminate"> & Readonly<{
     onBlur?: FieldBlurHandler;
+    /** The mark the box shows while checked, such as a tick. */
+    checkIcon: ReactNode;
     /** Applied to the field wrapper, so callers can place the row. */
     className?: string;
 }>;
+/** The indeterminate state, with the mark it needs only when it is used. */
+export type CheckboxFieldIndeterminateProps = Readonly<{
+    /** The box shows neither checked nor unchecked, for a parent over a mixed set. */
+    indeterminate: boolean;
+    /** The mark the box shows while indeterminate, such as a dash. */
+    indeterminateIcon: ReactNode;
+}> | Readonly<{
+    indeterminate?: undefined;
+    indeterminateIcon?: undefined;
+}>;
+export type CheckboxFieldProps = CheckboxFieldBaseProps & CheckboxFieldIndeterminateProps;
 /**
  * The assembled checkbox: the label beside the box, which also toggles it, then
  * the description and the error.
@@ -14,8 +27,9 @@ export type CheckboxFieldProps = FieldProps & Omit<CheckboxProps, "className" |
  * <CheckboxField
  * 	label="I agree to the terms"
  * 	optionalLabel="optional"
+ * 	checkIcon={<CheckIcon />}
  * 	checked={agreed}
  * 	onCheckedChange={setAgreed}
  * />
  */
-export declare const CheckboxField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, ...props }: CheckboxFieldProps) => ReactNode;
+export declare const CheckboxField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, checkIcon, indeterminateIcon, ...props }: CheckboxFieldProps) => ReactNode;

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

@@ -1,13 +1,8 @@
-import { Field as Field$1 } from "../field/field.js";
-import { fieldStateAttributes } from "../field/field-state.js";
-import { useFieldState } from "../field/use-field-state.js";
+import { Field } from "../field/field.js";
 import { detachHiddenInput } from "../field/hidden-input.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
@@ -17,16 +12,19 @@ import { Field } from "@base-ui/react/field";
 * <CheckboxField
 * 	label="I agree to the terms"
 * 	optionalLabel="optional"
+* 	checkIcon={<CheckIcon />}
 * 	checked={agreed}
 * 	onCheckedChange={setAgreed}
 * />
 */
 var CheckboxField = (t0) => {
-	const $ = c(51);
+	const $ = c(46);
+	let checkIcon;
 	let className;
 	let description;
 	let dirty;
 	let errors;
+	let indeterminateIcon;
 	let label;
 	let name;
 	let optionalLabel;
@@ -35,147 +33,126 @@ var CheckboxField = (t0) => {
 	let requiredness;
 	let touched;
 	if ($[0] !== t0) {
-		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, ...props} = t0);
+		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, checkIcon, indeterminateIcon, ...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;
+		$[1] = checkIcon;
+		$[2] = className;
+		$[3] = description;
+		$[4] = dirty;
+		$[5] = errors;
+		$[6] = indeterminateIcon;
+		$[7] = label;
+		$[8] = name;
+		$[9] = optionalLabel;
+		$[10] = pending;
+		$[11] = props;
+		$[12] = requiredness;
+		$[13] = touched;
 	} else {
-		className = $[1];
-		description = $[2];
-		dirty = $[3];
-		errors = $[4];
-		label = $[5];
-		name = $[6];
-		optionalLabel = $[7];
-		pending = $[8];
-		props = $[9];
-		requiredness = $[10];
-		touched = $[11];
+		checkIcon = $[1];
+		className = $[2];
+		description = $[3];
+		dirty = $[4];
+		errors = $[5];
+		indeterminateIcon = $[6];
+		label = $[7];
+		name = $[8];
+		optionalLabel = $[9];
+		pending = $[10];
+		props = $[11];
+		requiredness = $[12];
+		touched = $[13];
 	}
-	const ids = Field$1.useIds();
+	const ids = Field.useIds();
 	const t1 = props.checked === true;
-	let t2;
-	if ($[12] !== dirty || $[13] !== errors || $[14] !== pending || $[15] !== props.disabled || $[16] !== props.readOnly || $[17] !== requiredness || $[18] !== t1 || $[19] !== touched) {
-		t2 = {
-			errors,
-			requiredness,
-			dirty,
-			touched,
-			pending,
-			disabled: props.disabled,
-			readOnly: props.readOnly,
-			filled: t1
-		};
-		$[12] = dirty;
-		$[13] = errors;
-		$[14] = pending;
-		$[15] = props.disabled;
-		$[16] = props.readOnly;
-		$[17] = requiredness;
-		$[18] = t1;
-		$[19] = touched;
-		$[20] = t2;
-	} else t2 = $[20];
-	const field = useFieldState(t2);
-	let t3;
-	if ($[21] !== className) {
-		t3 = clsx(checkbox_module_default.root, className);
-		$[21] = className;
-		$[22] = t3;
-	} else t3 = $[22];
-	const t4 = field.disabled;
-	const t5 = field.invalid;
-	let t6;
-	if ($[23] !== field.state) {
-		t6 = fieldStateAttributes(field.state);
-		$[23] = field.state;
-		$[24] = t6;
-	} else t6 = $[24];
-	const t7 = requiredness === "required";
-	let t8;
-	if ($[25] !== ids.controlId || $[26] !== props || $[27] !== t7) {
-		t8 = /* @__PURE__ */ jsx(Checkbox, {
+	const t2 = requiredness === "required";
+	const t3 = props.indeterminate === true ? indeterminateIcon : checkIcon;
+	let t4;
+	if ($[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Checkbox.Indicator, { children: t3 });
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== ids.controlId || $[17] !== props || $[18] !== t2 || $[19] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Checkbox.Control, {
 			name: ids.controlId,
 			inputRef: detachHiddenInput,
-			required: t7,
-			...props
+			required: t2,
+			...props,
+			children: t4
 		});
-		$[25] = ids.controlId;
-		$[26] = props;
-		$[27] = t7;
-		$[28] = t8;
-	} else t8 = $[28];
-	let t9;
-	if ($[29] !== label || $[30] !== optionalLabel || $[31] !== requiredness) {
-		t9 = /* @__PURE__ */ jsx(Field$1.InlineLabelText, {
+		$[16] = ids.controlId;
+		$[17] = props;
+		$[18] = t2;
+		$[19] = t4;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== label || $[22] !== optionalLabel || $[23] !== requiredness) {
+		t6 = /* @__PURE__ */ jsx(Field.InlineLabelText, {
 			label,
 			requiredness,
 			optionalLabel
 		});
-		$[29] = label;
-		$[30] = optionalLabel;
-		$[31] = requiredness;
-		$[32] = t9;
-	} else t9 = $[32];
+		$[21] = label;
+		$[22] = optionalLabel;
+		$[23] = requiredness;
+		$[24] = t6;
+	} else t6 = $[24];
+	let t7;
+	if ($[25] !== t5 || $[26] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Checkbox.Label, { children: [t5, t6] });
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== description) {
+		t8 = /* @__PURE__ */ jsx(Checkbox.Description, { children: description });
+		$[28] = description;
+		$[29] = t8;
+	} else t8 = $[29];
+	let t9;
+	if ($[30] !== errors) {
+		t9 = /* @__PURE__ */ jsx(Checkbox.Error, { children: errors });
+		$[30] = errors;
+		$[31] = t9;
+	} else t9 = $[31];
 	let t10;
-	if ($[33] !== t8 || $[34] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(Field.Label, {
-			className: checkbox_module_default.label,
-			children: [t8, t9]
-		});
-		$[33] = t8;
-		$[34] = t9;
-		$[35] = t10;
-	} else t10 = $[35];
-	let t11;
-	if ($[36] !== description) {
-		t11 = /* @__PURE__ */ jsx(Field$1.Description, { children: description });
-		$[36] = description;
-		$[37] = t11;
-	} else t11 = $[37];
-	let t12;
-	if ($[38] !== errors) {
-		t12 = /* @__PURE__ */ jsx(Field$1.Error, { children: errors });
-		$[38] = errors;
-		$[39] = t12;
-	} else t12 = $[39];
-	let t13;
-	if ($[40] !== dirty || $[41] !== field.disabled || $[42] !== field.invalid || $[43] !== name || $[44] !== t10 || $[45] !== t11 || $[46] !== t12 || $[47] !== t3 || $[48] !== t6 || $[49] !== touched) {
-		t13 = /* @__PURE__ */ jsxs(Field$1.Root, {
+	if ($[32] !== className || $[33] !== dirty || $[34] !== errors || $[35] !== name || $[36] !== pending || $[37] !== props.disabled || $[38] !== props.readOnly || $[39] !== requiredness || $[40] !== t1 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9 || $[44] !== touched) {
+		t10 = /* @__PURE__ */ jsxs(Checkbox.Root, {
 			name,
-			className: t3,
-			disabled: t4,
-			invalid: t5,
+			className,
+			disabled: props.disabled,
+			readOnly: props.readOnly,
+			errors,
+			requiredness,
 			dirty,
 			touched,
-			...t6,
+			pending,
+			filled: t1,
 			children: [
-				t10,
-				t11,
-				t12
+				t7,
+				t8,
+				t9
 			]
 		});
-		$[40] = dirty;
-		$[41] = field.disabled;
-		$[42] = field.invalid;
-		$[43] = name;
-		$[44] = t10;
-		$[45] = t11;
-		$[46] = t12;
-		$[47] = t3;
-		$[48] = t6;
-		$[49] = touched;
-		$[50] = t13;
-	} else t13 = $[50];
-	return t13;
+		$[32] = className;
+		$[33] = dirty;
+		$[34] = errors;
+		$[35] = name;
+		$[36] = pending;
+		$[37] = props.disabled;
+		$[38] = props.readOnly;
+		$[39] = requiredness;
+		$[40] = t1;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
+		$[44] = touched;
+		$[45] = t10;
+	} else t10 = $[45];
+	return t10;
 };
 export { CheckboxField };