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

package/dist/components/field/field.js

@@ -0,0 +1,434 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { ErrorText } from "../error-text/error-text.js";
+import { Spinner } from "../spinner/spinner.js";
+import field_module_default from "./field.module.js";
+import { c } from "react/compiler-runtime";
+import { 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.
+*
+* @example
+* <Field.Root name="email" invalid={invalid}>…</Field.Root>
+*/
+var FieldRoot = (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.field, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Field.Root, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* 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;
+};
+/**
+* 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.
+*
+* @example
+* <Field.Error>{errors}</Field.Error>
+*/
+var FieldError = (t0) => {
+	const $ = c(8);
+	let errors;
+	let props;
+	if ($[0] !== t0) {
+		({children: errors, ...props} = t0);
+		$[0] = t0;
+		$[1] = errors;
+		$[2] = props;
+	} else {
+		errors = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[3] = errors;
+		$[4] = t1;
+	} else t1 = $[4];
+	const messages = t1;
+	let t2;
+	if ($[5] !== messages || $[6] !== props) {
+		t2 = messages.length === 0 ? null : /* @__PURE__ */ jsx(Field.Error, {
+			match: true,
+			...props,
+			render: (renderProps) => /* @__PURE__ */ jsx(ErrorText, {
+				el: "span",
+				role: "alert",
+				...renderProps,
+				children: messages
+			})
+		});
+		$[5] = messages;
+		$[6] = props;
+		$[7] = t2;
+	} else t2 = $[7];
+	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(9);
+	const id = useId();
+	const descriptionId = `${id}description`;
+	const errorId = `${id}error`;
+	const t0 = `${id}label`;
+	const t1 = `${id}control`;
+	let t2;
+	if ($[0] !== descriptionId || $[1] !== errorId) {
+		t2 = (hasDescription, invalid) => [hasDescription ? descriptionId : "", invalid ? errorId : ""].filter(_temp).join(" ") || void 0;
+		$[0] = descriptionId;
+		$[1] = errorId;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== descriptionId || $[4] !== errorId || $[5] !== t0 || $[6] !== t1 || $[7] !== t2) {
+		t3 = {
+			labelId: t0,
+			descriptionId,
+			errorId,
+			controlId: t1,
+			describedBy: t2
+		};
+		$[3] = descriptionId;
+		$[4] = errorId;
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	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(part) {
+	return part !== "";
+}
+export { Field$1 as Field, useFieldIds };

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

@@ -0,0 +1,20 @@
+import './field.css';// src/components/field/field.module.scss
+var field = "_field_14ydh_3";
+var label = "_label_14ydh_9";
+var optional = "_optional_14ydh_14";
+var inlineText = "_inlineText_14ydh_20";
+var inlineOptional = "_inlineOptional_14ydh_23";
+var required = "_required_14ydh_26";
+var description = "_description_14ydh_35";
+var pending = "_pending_14ydh_39";
+var field_module_default = {
+	field,
+	label,
+	optional,
+	inlineText,
+	inlineOptional,
+	required,
+	description,
+	pending
+};
+export { field_module_default as default, description, field, inlineOptional, inlineText, label, optional, pending, required };

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { type FieldLabelProps, type FieldProps, type FieldRootProps } from "./field.tsx";
+/** What the fieldset root of a group of choices takes. */
+export type FieldsetRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    /** A choice is made. */
+    filled?: boolean;
+    readOnly?: boolean;
+}>;
+/**
+ * A field rendered as a fieldset, for a group of choices named by its legend.
+ *
+ * @example
+ * <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
+ */
+export declare const FieldsetRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, ...props }: FieldsetRootProps) => ReactNode;
+/**
+ * The legend that names a {@link FieldsetRoot}.
+ *
+ * @example
+ * <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+ */
+export declare const FieldsetLegend: (props: FieldLabelProps) => ReactNode;

package/dist/components/field/fieldset.js

@@ -0,0 +1,130 @@
+import { Field } from "./field.js";
+import { fieldStateAttributes } from "./field-state.js";
+import { useFieldState } from "./use-field-state.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+// src/components/field/fieldset.tsx
+/**
+* A field rendered as a fieldset, for a group of choices named by its legend.
+*
+* @example
+* <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
+*/
+var FieldsetRoot = (t0) => {
+	const $ = c(29);
+	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, ...props} = t0);
+		$[0] = t0;
+		$[1] = dirty;
+		$[2] = disabled;
+		$[3] = errors;
+		$[4] = filled;
+		$[5] = pending;
+		$[6] = props;
+		$[7] = readOnly;
+		$[8] = requiredness;
+		$[9] = touched;
+	} else {
+		dirty = $[1];
+		disabled = $[2];
+		errors = $[3];
+		filled = $[4];
+		pending = $[5];
+		props = $[6];
+		readOnly = $[7];
+		requiredness = $[8];
+		touched = $[9];
+	}
+	let t1;
+	if ($[10] !== dirty || $[11] !== disabled || $[12] !== errors || $[13] !== filled || $[14] !== pending || $[15] !== readOnly || $[16] !== requiredness || $[17] !== touched) {
+		t1 = {
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			disabled,
+			readOnly,
+			filled
+		};
+		$[10] = dirty;
+		$[11] = disabled;
+		$[12] = errors;
+		$[13] = filled;
+		$[14] = pending;
+		$[15] = readOnly;
+		$[16] = requiredness;
+		$[17] = touched;
+		$[18] = t1;
+	} else t1 = $[18];
+	const field = useFieldState(t1);
+	let t2;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Fieldset.Root, {});
+		$[19] = t2;
+	} else t2 = $[19];
+	const t3 = field.disabled;
+	const t4 = field.invalid;
+	let t5;
+	if ($[20] !== field.state) {
+		t5 = fieldStateAttributes(field.state);
+		$[20] = field.state;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== dirty || $[23] !== field.disabled || $[24] !== field.invalid || $[25] !== props || $[26] !== t5 || $[27] !== touched) {
+		t6 = /* @__PURE__ */ jsx(Field.Root, {
+			render: t2,
+			disabled: t3,
+			invalid: t4,
+			dirty,
+			touched,
+			...t5,
+			...props
+		});
+		$[22] = dirty;
+		$[23] = field.disabled;
+		$[24] = field.invalid;
+		$[25] = props;
+		$[26] = t5;
+		$[27] = touched;
+		$[28] = t6;
+	} else t6 = $[28];
+	return t6;
+};
+/**
+* The legend that names a {@link FieldsetRoot}.
+*
+* @example
+* <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+*/
+var FieldsetLegend = (props) => {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Fieldset.Legend, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, {
+			nativeLabel: false,
+			render: t0,
+			...props
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+export { FieldsetLegend, FieldsetRoot };

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;