@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/field/field.js

@@ -0,0 +1,477 @@
+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 { useContext, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Field } from "@base-ui/react/field";
+// src/components/field/field.tsx
+var isEmpty = (children) => children === void 0 || children === null || children === false || children === "";
+/**
+* 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" />
+*/
+var RequiredMark = (t0) => {
+	const $ = c(2);
+	const { requiredness } = t0;
+	let t1;
+	if ($[0] !== requiredness) {
+		t1 = requiredness === "required" ? /* @__PURE__ */ jsx("span", {
+			className: field_module_default.required,
+			"aria-hidden": "true"
+		}) : null;
+		$[0] = requiredness;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+/**
+* The suffix a label trails: the required mark, or the optional word.
+*
+* @example
+* <Field.Requiredness requiredness="optional" optionalLabel="optional" />
+*/
+var FieldRequiredness = (t0) => {
+	const $ = c(3);
+	const { requiredness, optionalLabel } = t0;
+	let t1;
+	if ($[0] !== optionalLabel || $[1] !== requiredness) {
+		t1 = requiredness === "optional" ? /* @__PURE__ */ jsx("span", {
+			className: field_module_default.optional,
+			children: optionalLabel
+		}) : /* @__PURE__ */ jsx(RequiredMark, { requiredness });
+		$[0] = optionalLabel;
+		$[1] = requiredness;
+		$[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.
+*
+* @example
+* <BaseField.Label>
+* 	<Checkbox />
+* 	<Field.InlineLabelText label={label} requiredness="optional" optionalLabel="optional" />
+* </BaseField.Label>
+*/
+var InlineLabelText = (t0) => {
+	const $ = c(13);
+	const { label, fieldLabel, requiredness, optionalLabel } = t0;
+	let t1;
+	if ($[0] !== fieldLabel || $[1] !== requiredness) {
+		t1 = fieldLabel === void 0 && requiredness === "required" && /* @__PURE__ */ jsxs(Fragment$1, { 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", {
+			"data-optional-suffix": "",
+			className: clsx(field_module_default.optional, field_module_default.inlineOptional),
+			children: optionalLabel
+		});
+		$[6] = fieldLabel;
+		$[7] = optionalLabel;
+		$[8] = requiredness;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t3] });
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+/**
+* The field frame: label, control, description and error stacked full width.
+* In a field group's row its parts share the row's tracks with its neighbours.
+*
+* @example
+* <Field.Root name="email" invalid={invalid}>…</Field.Root>
+*/
+var FieldRoot = (t0) => {
+	const $ = c(13);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	const inRow = useContext(FieldRowContext);
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(field_module_default.field, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	const t2 = inRow ? "" : void 0;
+	let t3;
+	if ($[6] !== children) {
+		t3 = /* @__PURE__ */ jsx(FieldRowContext, {
+			value: false,
+			children
+		});
+		$[6] = children;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2 || $[11] !== 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];
+	return t4;
+};
+/**
+* The label above a control, trailing its requiredness. Renders nothing without
+* children.
+*
+* @example
+* <Field.Label requiredness="optional" optionalLabel="optional">Notes</Field.Label>
+*/
+var FieldLabel = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let optionalLabel;
+	let props;
+	let requiredness;
+	if ($[0] !== t0) {
+		({children, requiredness, optionalLabel, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = optionalLabel;
+		$[4] = props;
+		$[5] = requiredness;
+	} else {
+		children = $[1];
+		className = $[2];
+		optionalLabel = $[3];
+		props = $[4];
+		requiredness = $[5];
+	}
+	let t1;
+	if ($[6] !== children || $[7] !== className || $[8] !== optionalLabel || $[9] !== props || $[10] !== requiredness) {
+		t1 = isEmpty(children) ? null : /* @__PURE__ */ jsxs(Field.Label, {
+			className: clsx(field_module_default.label, className),
+			...props,
+			children: [
+				children,
+				" ",
+				/* @__PURE__ */ jsx(FieldRequiredness, {
+					requiredness,
+					optionalLabel
+				})
+			]
+		});
+		$[6] = children;
+		$[7] = className;
+		$[8] = optionalLabel;
+		$[9] = props;
+		$[10] = requiredness;
+		$[11] = t1;
+	} else t1 = $[11];
+	return t1;
+};
+/**
+* A caption styled like a field label, which names nothing: a paragraph, with
+* no `for` and no `aria-labelledby` of its own. Use it for standing text above
+* a control that already carries its own name. To name something, use `Label`.
+*
+* @example
+* <Field.Caption optionalLabel="optional">Theme</Field.Caption>
+*/
+var FieldCaption = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let optionalLabel;
+	let props;
+	let requiredness;
+	if ($[0] !== t0) {
+		({children, requiredness, optionalLabel, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = optionalLabel;
+		$[4] = props;
+		$[5] = requiredness;
+	} else {
+		children = $[1];
+		className = $[2];
+		optionalLabel = $[3];
+		props = $[4];
+		requiredness = $[5];
+	}
+	let t1;
+	if ($[6] !== children || $[7] !== className || $[8] !== optionalLabel || $[9] !== props || $[10] !== requiredness) {
+		t1 = isEmpty(children) ? null : /* @__PURE__ */ jsxs("p", {
+			className: clsx(field_module_default.label, className),
+			...props,
+			children: [
+				children,
+				" ",
+				/* @__PURE__ */ jsx(FieldRequiredness, {
+					requiredness,
+					optionalLabel
+				})
+			]
+		});
+		$[6] = children;
+		$[7] = className;
+		$[8] = optionalLabel;
+		$[9] = props;
+		$[10] = requiredness;
+		$[11] = t1;
+	} else t1 = $[11];
+	return t1;
+};
+/**
+* The help under a control. Renders nothing without children.
+*
+* @example
+* <Field.Description>We only use it to send the receipt.</Field.Description>
+*/
+var FieldDescription = (t0) => {
+	const $ = c(8);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({children, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== children || $[5] !== className || $[6] !== props) {
+		t1 = isEmpty(children) ? null : /* @__PURE__ */ jsx(Field.Description, {
+			className: clsx(field_module_default.description, className),
+			...props,
+			children
+		});
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+var Unrendered = () => null;
+/**
+* The one error part every control renders, after the description. Normalises
+* its errors to lines with `normalizeFieldErrors` and renders nothing when
+* there are none. It is the field's only live region, so a control must not
+* announce the same message a second time. In a field group that collects
+* the field, the group's error shows the lines instead, and the control is
+* described by them.
+*
+* @example
+* <Field.Error>{errors}</Field.Error>
+*/
+var FieldError = (t0) => {
+	const $ = c(10);
+	let errors;
+	let props;
+	if ($[0] !== t0) {
+		({children: errors, ...props} = t0);
+		$[0] = t0;
+		$[1] = errors;
+		$[2] = props;
+	} else {
+		errors = $[1];
+		props = $[2];
+	}
+	const groupLineIds = useFieldGroupLineIds();
+	if (groupLineIds !== void 0) {
+		let t1;
+		if ($[3] !== groupLineIds) {
+			t1 = groupLineIds.map(_temp);
+			$[3] = groupLineIds;
+			$[4] = t1;
+		} else t1 = $[4];
+		return t1;
+	}
+	let t1;
+	if ($[5] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[5] = errors;
+		$[6] = t1;
+	} else t1 = $[6];
+	const messages = t1;
+	let t2;
+	if ($[7] !== messages || $[8] !== props) {
+		t2 = messages.length === 0 ? null : /* @__PURE__ */ jsx(Field.Error, {
+			match: true,
+			...props,
+			render: (renderProps) => /* @__PURE__ */ jsx(ErrorText, {
+				el: "span",
+				role: "alert",
+				...renderProps,
+				className: clsx(field_module_default.error, renderProps.className),
+				children: messages
+			})
+		});
+		$[7] = messages;
+		$[8] = props;
+		$[9] = t2;
+	} else t2 = $[9];
+	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.
+*
+* @example
+* {phase !== "fresh" && <Field.Pending />}
+*/
+var FieldPending = (t0) => {
+	const $ = c(5);
+	const { className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(field_module_default.pending, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Spinner, { size: 1 });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t1) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			children: t2
+		});
+		$[3] = t1;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+};
+/**
+* Stable ids for a field's label, description and error, for controls that
+* wire `aria-labelledby` and `aria-describedby` themselves.
+*
+* @example
+* const { labelId, errorId } = useFieldIds();
+*/
+var useFieldIds = () => {
+	const $ = c(10);
+	const id = useId();
+	const groupLineIds = useFieldGroupLineIds();
+	const descriptionId = `${id}description`;
+	const errorId = `${id}error`;
+	const t0 = `${id}label`;
+	const t1 = `${id}control`;
+	let t2;
+	if ($[0] !== descriptionId || $[1] !== errorId || $[2] !== groupLineIds) {
+		t2 = (hasDescription, invalid) => [hasDescription ? descriptionId : "", ...groupLineIds ?? [invalid ? errorId : ""]].filter(_temp2).join(" ") || void 0;
+		$[0] = descriptionId;
+		$[1] = errorId;
+		$[2] = groupLineIds;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== descriptionId || $[5] !== errorId || $[6] !== t0 || $[7] !== t1 || $[8] !== t2) {
+		t3 = {
+			labelId: t0,
+			descriptionId,
+			errorId,
+			controlId: t1,
+			describedBy: t2
+		};
+		$[4] = descriptionId;
+		$[5] = errorId;
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+/**
+* The field frame and its parts, over base-ui's `Field`. A control's raw tier
+* renders inside `Root` and names itself through `Label`; `Description` comes
+* 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.Control />
+* 	<Field.Description>We send the receipt here.</Field.Description>
+* 	<Field.Error>{errors}</Field.Error>
+* </Field.Root>
+*/
+var Field$1 = {
+	Root: FieldRoot,
+	Label: FieldLabel,
+	Caption: FieldCaption,
+	Control: Field.Control,
+	Description: FieldDescription,
+	Error: FieldError,
+	Pending: FieldPending,
+	Item: Field.Item,
+	Validity: Field.Validity,
+	Requiredness: FieldRequiredness,
+	RequiredMark,
+	InlineLabelText,
+	useIds: useFieldIds
+};
+function _temp(lineId) {
+	return /* @__PURE__ */ jsx(Field.Error, {
+		match: true,
+		id: lineId,
+		render: /* @__PURE__ */ jsx(Unrendered, {})
+	}, lineId);
+}
+function _temp2(part) {
+	return part !== "";
+}
+export { Field$1 as Field, useFieldIds };

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

@@ -0,0 +1,22 @@
+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_module_default = {
+	field,
+	label,
+	description,
+	error,
+	optional,
+	inlineText,
+	inlineOptional,
+	required,
+	pending
+};
+export { field_module_default as default, description, error, field, inlineOptional, inlineText, label, optional, pending, required };

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

@@ -0,0 +1,8 @@
+/**
+ * Detaches a headless library's hidden form input from any enclosing `<form>`,
+ * so the value it carries is never submitted natively.
+ *
+ * @example
+ * <Select.Root inputRef={detachHiddenInput} />
+ */
+export declare const detachHiddenInput: (node: HTMLInputElement | null) => void;

package/dist/components/field/hidden-input.js

@@ -0,0 +1,12 @@
+// src/components/field/hidden-input.ts
+/**
+* Detaches a headless library's hidden form input from any enclosing `<form>`,
+* so the value it carries is never submitted natively.
+*
+* @example
+* <Select.Root inputRef={detachHiddenInput} />
+*/
+var detachHiddenInput = (node) => {
+	node?.setAttribute("form", "");
+};
+export { detachHiddenInput };

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

@@ -0,0 +1,6 @@
+export * from "./choice-option.ts";
+export * from "./field.tsx";
+export * from "./field-state.ts";
+export { type OptionsLoad, type OptionsLoadLabels, type OptionsQuery, optionsLoad, } from "./options-load.ts";
+export { type FieldFocus, type FieldFocusHandlers, useFieldFocus, } from "./use-field-focus.ts";
+export * from "./use-field-state.ts";

package/dist/components/field/index.js

@@ -0,0 +1,6 @@
+import { Field, useFieldIds } from "./field.js";
+import { fieldStateAttributes } from "./field-state.js";
+import { optionsLoad } from "./options-load.js";
+import { useFieldFocus } from "./use-field-focus.js";
+import { useFieldState } from "./use-field-state.js";
+export { Field, fieldStateAttributes, optionsLoad, useFieldFocus, useFieldIds, useFieldState };

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

@@ -0,0 +1,49 @@
+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 { FieldState } from "./field-state.ts";
+/** What a raw input's `Root` hands its label, pending and error parts. */
+export type InputPartsContextValue = Readonly<{
+    /** Projected by `Root`; every part reads it, none of them own it. */
+    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. */
+export declare const InputPartsContext: Context<InputPartsContextValue | null>;
+/**
+ * The surrounding raw input's projected state, errors and busy phase.
+ *
+ * @example
+ * const { state } = useInputPartsContext();
+ */
+export declare const useInputPartsContext: () => InputPartsContextValue;
+export type InputLabelProps = Omit<FieldLabelProps, "requiredness" | "optionalLabel">;
+/**
+ * The label above a raw input, trailing the requiredness its `Root` was given.
+ *
+ * @example
+ * <TextInput.Label>Email</TextInput.Label>
+ */
+export declare const InputLabel: ({ children, ...props }: InputLabelProps) => ReactNode;
+export type InputPendingProps = Readonly<{
+    className?: string;
+}>;
+/**
+ * The spinner a raw input shows once its `Root`'s wait is worth showing.
+ *
+ * @example
+ * <TextInput.Pending />
+ */
+export declare const InputPending: ({ className, }: InputPendingProps) => ReactNode;
+export type InputErrorProps = Omit<FieldErrorProps, "children">;
+/**
+ * The errors a raw input's `Root` was given.
+ *
+ * @example
+ * <TextInput.Error />
+ */
+export declare const InputError: (props: InputErrorProps) => ReactNode;

package/dist/components/field/input-parts.js

@@ -0,0 +1,94 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { Field } from "./field.js";
+import { c } from "react/compiler-runtime";
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/field/input-parts.tsx
+/** The context a raw input's `Root` provides its shared parts. */
+var InputPartsContext = createContext(null);
+/**
+* The surrounding raw input's projected state, errors and busy phase.
+*
+* @example
+* const { state } = useInputPartsContext();
+*/
+var useInputPartsContext = () => {
+	return useRequiredContext(InputPartsContext, "Input parts must be rendered within their input's <Root>.");
+};
+/**
+* The label above a raw input, trailing the requiredness its `Root` was given.
+*
+* @example
+* <TextInput.Label>Email</TextInput.Label>
+*/
+var InputLabel = (t0) => {
+	const $ = c(8);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	const { state, optionalLabel } = useInputPartsContext();
+	let t1;
+	if ($[3] !== children || $[4] !== optionalLabel || $[5] !== props || $[6] !== state.requiredness) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, {
+			requiredness: state.requiredness,
+			optionalLabel,
+			...props,
+			children
+		});
+		$[3] = children;
+		$[4] = optionalLabel;
+		$[5] = props;
+		$[6] = state.requiredness;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+/**
+* The spinner a raw input shows once its `Root`'s wait is worth showing.
+*
+* @example
+* <TextInput.Pending />
+*/
+var InputPending = (t0) => {
+	const $ = c(2);
+	const { className } = t0;
+	const { phase } = useInputPartsContext();
+	if (phase === "fresh") return null;
+	let t1;
+	if ($[0] !== className) {
+		t1 = /* @__PURE__ */ jsx(Field.Pending, { className });
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+/**
+* The errors a raw input's `Root` was given.
+*
+* @example
+* <TextInput.Error />
+*/
+var InputError = (props) => {
+	const $ = c(3);
+	const { errors } = useInputPartsContext();
+	let t0;
+	if ($[0] !== errors || $[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(Field.Error, {
+			...props,
+			children: errors
+		});
+		$[0] = errors;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+};
+export { InputError, InputLabel, InputPartsContext, InputPending, useInputPartsContext };