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

package/dist/components/field/field.js

@@ -1,107 +1,130 @@
 import { normalizeFieldErrors } from "../../lib/forms/errors.js";
 import { ErrorText } from "../error-text/error-text.js";
-import { Spinner } from "../spinner/spinner.js";
 import { FieldRowContext, useFieldGroupLineIds } from "./field-group-context.js";
 import field_module_default from "./field.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
 import { Field } from "@base-ui/react/field";
 // src/components/field/field.tsx
 var isEmpty = (children) => children === void 0 || children === null || children === false || children === "";
+var RequirednessContext = createContext(void 0);
 /**
 * The mark a label carries when its field is required. Decoration only: the
 * control's own `required` tells assistive tech.
 *
 * @example
-* <Field.RequiredMark requiredness="required" />
+* <Field.Label>Email <Field.RequiredMark /></Field.Label>
 */
 var RequiredMark = (t0) => {
-	const $ = c(2);
+	const $ = c(3);
 	const { requiredness } = t0;
+	const fieldRequiredness = useContext(RequirednessContext);
 	let t1;
-	if ($[0] !== requiredness) {
-		t1 = requiredness === "required" ? /* @__PURE__ */ jsx("span", {
+	if ($[0] !== fieldRequiredness || $[1] !== requiredness) {
+		t1 = (requiredness ?? fieldRequiredness) === "required" ? /* @__PURE__ */ jsx("span", {
 			className: field_module_default.required,
 			"aria-hidden": "true"
 		}) : null;
-		$[0] = requiredness;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[0] = fieldRequiredness;
+		$[1] = requiredness;
+		$[2] = t1;
+	} else t1 = $[2];
 	return t1;
 };
 /**
 * The suffix a label trails: the required mark, or the optional word.
 *
 * @example
-* <Field.Requiredness requiredness="optional" optionalLabel="optional" />
+* <Field.Label>Notes <Field.Requiredness optionalLabel="optional" /></Field.Label>
 */
 var FieldRequiredness = (t0) => {
 	const $ = c(3);
 	const { requiredness, optionalLabel } = t0;
+	const fieldRequiredness = useContext(RequirednessContext);
+	const asserted = requiredness ?? fieldRequiredness;
 	let t1;
-	if ($[0] !== optionalLabel || $[1] !== requiredness) {
-		t1 = requiredness === "optional" ? /* @__PURE__ */ jsx("span", {
+	if ($[0] !== asserted || $[1] !== optionalLabel) {
+		t1 = asserted === "optional" ? /* @__PURE__ */ jsx("span", {
 			className: field_module_default.optional,
 			children: optionalLabel
-		}) : /* @__PURE__ */ jsx(RequiredMark, { requiredness });
-		$[0] = optionalLabel;
-		$[1] = requiredness;
+		}) : /* @__PURE__ */ jsx(RequiredMark, { requiredness: asserted });
+		$[0] = asserted;
+		$[1] = optionalLabel;
 		$[2] = t1;
 	} else t1 = $[2];
 	return t1;
 };
 /**
-* The text beside a control that shares its label, carrying the suffix a
-* `fieldLabel` above the row would otherwise carry.
+* The optional word of a label beside its control, on a row of its own under
+* the label's text. Renders nothing unless the field is optional.
 *
 * @example
 * <Checkbox.Label>
-* 	<Checkbox.Control><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox.Control>
-* 	<Field.InlineLabelText label={label} requiredness="optional" optionalLabel="optional" />
+* 	<Checkbox.Control>…</Checkbox.Control>
+* 	<Field.InlineLabelText>Send me a copy <Field.RequiredMark /></Field.InlineLabelText>
+* 	<Field.InlineOptional optionalLabel="optional" />
 * </Checkbox.Label>
 */
-var InlineLabelText = (t0) => {
-	const $ = c(13);
-	const { label, fieldLabel, requiredness, optionalLabel } = t0;
+var InlineOptional = (t0) => {
+	const $ = c(4);
+	const { requiredness, optionalLabel } = t0;
+	const fieldRequiredness = useContext(RequirednessContext);
 	let t1;
-	if ($[0] !== fieldLabel || $[1] !== requiredness) {
-		t1 = fieldLabel === void 0 && requiredness === "required" && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(RequiredMark, { requiredness })] });
-		$[0] = fieldLabel;
-		$[1] = requiredness;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== label || $[4] !== t1) {
-		t2 = /* @__PURE__ */ jsxs("span", {
-			className: field_module_default.inlineText,
-			children: [label, t1]
-		});
-		$[3] = label;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[6] !== fieldLabel || $[7] !== optionalLabel || $[8] !== requiredness) {
-		t3 = requiredness === "optional" && fieldLabel === void 0 && /* @__PURE__ */ jsx("span", {
+	if ($[0] !== fieldRequiredness || $[1] !== optionalLabel || $[2] !== requiredness) {
+		t1 = (requiredness ?? fieldRequiredness) === "optional" ? /* @__PURE__ */ jsx("span", {
 			"data-optional-suffix": "",
 			className: clsx(field_module_default.optional, field_module_default.inlineOptional),
 			children: optionalLabel
+		}) : null;
+		$[0] = fieldRequiredness;
+		$[1] = optionalLabel;
+		$[2] = requiredness;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+};
+/**
+* The text of a label beside its control, such as a lone checkbox's.
+*
+* @example
+* <Checkbox.Label>
+* 	<Checkbox.Control><Checkbox.Indicator><CheckIcon /></Checkbox.Indicator></Checkbox.Control>
+* 	<Field.InlineLabelText>I agree to the terms <Field.RequiredMark /></Field.InlineLabelText>
+* </Checkbox.Label>
+*/
+var InlineLabelText = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(field_module_default.inlineText, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			...props
 		});
-		$[6] = fieldLabel;
-		$[7] = optionalLabel;
-		$[8] = requiredness;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] !== t2 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] });
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /**
 * The field frame: label, control, description and error stacked full width.
@@ -111,104 +134,95 @@ var InlineLabelText = (t0) => {
 * <Field.Root name="email" invalid={invalid}>…</Field.Root>
 */
 var FieldRoot = (t0) => {
-	const $ = c(13);
+	const $ = c(15);
 	let children;
 	let className;
 	let props;
+	let requiredness;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({className, requiredness, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = props;
+		$[4] = requiredness;
 	} else {
 		children = $[1];
 		className = $[2];
 		props = $[3];
+		requiredness = $[4];
 	}
 	const inRow = useContext(FieldRowContext);
 	let t1;
-	if ($[4] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(field_module_default.field, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	const t2 = inRow ? "" : void 0;
 	let t3;
-	if ($[6] !== children) {
+	if ($[7] !== children || $[8] !== requiredness) {
 		t3 = /* @__PURE__ */ jsx(FieldRowContext, {
 			value: false,
-			children
+			children: /* @__PURE__ */ jsx(RequirednessContext, {
+				value: requiredness,
+				children
+			})
 		});
-		$[6] = children;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[7] = children;
+		$[8] = requiredness;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[8] !== props || $[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
+	if ($[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
 		t4 = /* @__PURE__ */ jsx(Field.Root, {
 			className: t1,
 			"data-field-group-member": t2,
 			...props,
 			children: t3
 		});
-		$[8] = props;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
 	return t4;
 };
 /**
-* The label above a control, trailing its requiredness. Renders nothing without
-* children.
+* The label above a control. Renders nothing without children.
 *
 * @example
-* <Field.Label requiredness="optional" optionalLabel="optional">Notes</Field.Label>
+* <Field.Label>Notes <Field.Requiredness optionalLabel="optional" /></Field.Label>
 */
 var FieldLabel = (t0) => {
-	const $ = c(12);
+	const $ = c(8);
 	let children;
 	let className;
-	let optionalLabel;
 	let props;
-	let requiredness;
 	if ($[0] !== t0) {
-		({children, requiredness, optionalLabel, className, ...props} = t0);
+		({children, className, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = optionalLabel;
-		$[4] = props;
-		$[5] = requiredness;
+		$[3] = props;
 	} else {
 		children = $[1];
 		className = $[2];
-		optionalLabel = $[3];
-		props = $[4];
-		requiredness = $[5];
+		props = $[3];
 	}
 	let t1;
-	if ($[6] !== children || $[7] !== className || $[8] !== optionalLabel || $[9] !== props || $[10] !== requiredness) {
-		t1 = isEmpty(children) ? null : /* @__PURE__ */ jsxs(Field.Label, {
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = isEmpty(children) ? null : /* @__PURE__ */ jsx(Field.Label, {
 			className: clsx(field_module_default.label, className),
 			...props,
-			children: [
-				children,
-				" ",
-				/* @__PURE__ */ jsx(FieldRequiredness, {
-					requiredness,
-					optionalLabel
-				})
-			]
+			children
 		});
-		$[6] = children;
-		$[7] = className;
-		$[8] = optionalLabel;
-		$[9] = props;
-		$[10] = requiredness;
-		$[11] = t1;
-	} else t1 = $[11];
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
 	return t1;
 };
 /**
@@ -217,51 +231,36 @@ var FieldLabel = (t0) => {
 * a control that already carries its own name. To name something, use `Label`.
 *
 * @example
-* <Field.Caption optionalLabel="optional">Theme</Field.Caption>
+* <Field.Caption>Theme <Field.Requiredness requiredness="optional" optionalLabel="optional" /></Field.Caption>
 */
 var FieldCaption = (t0) => {
-	const $ = c(12);
+	const $ = c(8);
 	let children;
 	let className;
-	let optionalLabel;
 	let props;
-	let requiredness;
 	if ($[0] !== t0) {
-		({children, requiredness, optionalLabel, className, ...props} = t0);
+		({children, className, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = optionalLabel;
-		$[4] = props;
-		$[5] = requiredness;
+		$[3] = props;
 	} else {
 		children = $[1];
 		className = $[2];
-		optionalLabel = $[3];
-		props = $[4];
-		requiredness = $[5];
+		props = $[3];
 	}
 	let t1;
-	if ($[6] !== children || $[7] !== className || $[8] !== optionalLabel || $[9] !== props || $[10] !== requiredness) {
-		t1 = isEmpty(children) ? null : /* @__PURE__ */ jsxs("p", {
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = isEmpty(children) ? null : /* @__PURE__ */ jsx("p", {
 			className: clsx(field_module_default.label, className),
 			...props,
-			children: [
-				children,
-				" ",
-				/* @__PURE__ */ jsx(FieldRequiredness, {
-					requiredness,
-					optionalLabel
-				})
-			]
+			children
 		});
-		$[6] = children;
-		$[7] = className;
-		$[8] = optionalLabel;
-		$[9] = props;
-		$[10] = requiredness;
-		$[11] = t1;
-	} else t1 = $[11];
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
 	return t1;
 };
 /**
@@ -362,38 +361,122 @@ var FieldError = (t0) => {
 	return t2;
 };
 /**
-* The spinner a field shows while background work is in flight, sized to sit
-* in the box beside the control. The control decides when it is mounted, once
-* the wait is worth showing. It is decoration: the wait reaches assistive tech
-* as the `aria-busy` that `fieldStateAttributes` projects.
+* The box beside the control that a field's wait shows in, holding what it is
+* given, such as a spinner. The control decides when it is mounted, once the
+* wait is worth showing. It is decoration: the wait reaches assistive tech as
+* the `aria-busy` that `fieldStateAttributes` projects.
 *
 * @example
-* {phase !== "fresh" && <Field.Pending />}
+* {phase !== "fresh" && <Field.Pending><Spinner size={1} /></Field.Pending>}
 */
 var FieldPending = (t0) => {
-	const $ = c(5);
-	const { className } = t0;
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(field_module_default.pending, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Spinner, { size: 1 });
-		$[2] = t2;
-	} else t2 = $[2];
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[3] !== t1) {
-		t3 = /* @__PURE__ */ jsx("span", {
-			className: t1,
-			children: t2
-		});
-		$[3] = t1;
-		$[4] = t3;
-	} else t3 = $[4];
-	return t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* A row holding a field's label and what sits beside it, such as a link or a
+* counter, in place of the bare label.
+*
+* @example
+* <Field.LabelRow>
+* 	<TextInput.Label>Password</TextInput.Label>
+* 	<Link href="/reset">Forgot password?</Link>
+* </Field.LabelRow>
+*/
+var FieldLabelRow = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(field_module_default.labelRow, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 /**
 * Stable ids for a field's label, description and error, for controls that
@@ -442,8 +525,8 @@ var useFieldIds = () => {
 * before `Error`, the field's only live region.
 *
 * @example
-* <Field.Root name="email" invalid={invalid}>
-* 	<Field.Label requiredness="required" optionalLabel="optional">Email</Field.Label>
+* <Field.Root name="email" invalid={invalid} requiredness="required">
+* 	<Field.Label>Email <Field.Requiredness optionalLabel="optional" /></Field.Label>
 * 	<Field.Control />
 * 	<Field.Description>We send the receipt here.</Field.Description>
 * 	<Field.Error>{errors}</Field.Error>
@@ -452,6 +535,7 @@ var useFieldIds = () => {
 var Field$1 = {
 	Root: FieldRoot,
 	Label: FieldLabel,
+	LabelRow: FieldLabelRow,
 	Caption: FieldCaption,
 	Control: Field.Control,
 	Description: FieldDescription,
@@ -462,6 +546,7 @@ var Field$1 = {
 	Requiredness: FieldRequiredness,
 	RequiredMark,
 	InlineLabelText,
+	InlineOptional,
 	useIds: useFieldIds
 };
 function _temp(lineId) {

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

@@ -1,16 +1,18 @@
 import './field.css';// src/components/field/field.module.scss
-var field = "_field_dzutr_3";
-var label = "_label_dzutr_13";
-var description = "_description_dzutr_22";
-var error = "_error_dzutr_25";
-var optional = "_optional_dzutr_33";
-var inlineText = "_inlineText_dzutr_39";
-var inlineOptional = "_inlineOptional_dzutr_42";
-var required = "_required_dzutr_45";
-var pending = "_pending_dzutr_58";
+var field = "_field_160cj_3";
+var label = "_label_160cj_16";
+var labelRow = "_labelRow_160cj_16";
+var description = "_description_160cj_25";
+var error = "_error_160cj_28";
+var optional = "_optional_160cj_43";
+var inlineText = "_inlineText_160cj_49";
+var inlineOptional = "_inlineOptional_160cj_52";
+var required = "_required_160cj_55";
+var pending = "_pending_160cj_68";
 var field_module_default = {
 	field,
 	label,
+	labelRow,
 	description,
 	error,
 	optional,
@@ -19,4 +21,4 @@ var field_module_default = {
 	required,
 	pending
 };
-export { field_module_default as default, description, error, field, inlineOptional, inlineText, label, optional, pending, required };
+export { field_module_default as default, description, error, field, inlineOptional, inlineText, label, labelRow, optional, pending, required };

package/dist/components/field/input-parts.d.ts

@@ -1,6 +1,6 @@
 import { type Context, type ReactNode } from "react";
 import type { BusyPhase } from "../../lib/hooks/use-busy-phase.ts";
-import { type FieldErrorProps, type FieldLabelProps } from "./field.tsx";
+import { type FieldErrorProps, type FieldLabelProps, type FieldPendingProps } from "./field.tsx";
 import type { FieldState } from "./field-state.ts";
 /** What a raw input's `Root` hands its label, pending and error parts. */
 export type InputPartsContextValue = Readonly<{
@@ -8,8 +8,6 @@ export type InputPartsContextValue = Readonly<{
     state: FieldState;
     /** The errors `Root` was given, which `Error` renders. */
     errors: unknown;
-    /** The word an optional field's label trails. */
-    optionalLabel: string;
     phase: BusyPhase;
 }>;
 /** The context a raw input's `Root` provides its shared parts. */
@@ -21,24 +19,24 @@ export declare const InputPartsContext: Context<InputPartsContextValue | null>;
  * const { state } = useInputPartsContext();
  */
 export declare const useInputPartsContext: () => InputPartsContextValue;
-export type InputLabelProps = Omit<FieldLabelProps, "requiredness" | "optionalLabel">;
+export type InputLabelProps = FieldLabelProps;
 /**
- * The label above a raw input, trailing the requiredness its `Root` was given.
+ * The label above a raw input. Add `Field.Requiredness` to trail the
+ * requiredness its `Root` was given.
  *
  * @example
- * <TextInput.Label>Email</TextInput.Label>
+ * <TextInput.Label>Email <Field.Requiredness optionalLabel="optional" /></TextInput.Label>
  */
-export declare const InputLabel: ({ children, ...props }: InputLabelProps) => ReactNode;
-export type InputPendingProps = Readonly<{
-    className?: string;
-}>;
+export declare const InputLabel: (props: InputLabelProps) => ReactNode;
+export type InputPendingProps = FieldPendingProps;
 /**
- * The spinner a raw input shows once its `Root`'s wait is worth showing.
+ * The box a raw input's wait shows in, holding what it is given, such as a
+ * spinner. It renders once its `Root`'s wait is worth showing.
  *
  * @example
- * <TextInput.Pending />
+ * <TextInput.Pending><Spinner size={1} /></TextInput.Pending>
  */
-export declare const InputPending: ({ className, }: InputPendingProps) => ReactNode;
+export declare const InputPending: (props: InputPendingProps) => ReactNode;
 export type InputErrorProps = Omit<FieldErrorProps, "children">;
 /**
  * The errors a raw input's `Root` was given.