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

package/dist/components/field/options-load.d.ts

@@ -0,0 +1,54 @@
+/**
+ * How far the options of a select or combobox have loaded. A failure that
+ * trying again can clear carries a `retry`.
+ */
+export type OptionsLoad = Readonly<{
+    status: "pending" | "success";
+}> | Readonly<{
+    status: "error";
+    retry?: () => void;
+}>;
+/** The copy a select's or combobox's popup shows about its options. */
+export type OptionsLoadLabels = Readonly<{
+    /** Said while the options load, such as "Loading options…". */
+    loadingLabel: string;
+    /** Said when the options failed to load and a retry can help. */
+    loadFailedLabel: string;
+    /** Said when the options failed to load and trying again won't help. */
+    loadBrokenLabel: string;
+    /** The retry button's text, such as "Try again". */
+    retryLabel: string;
+    /** Said when there are no options at all. */
+    noOptionsLabel: string;
+}>;
+/**
+ * What a popup says about a load that is pending or failed; nothing once the
+ * options are there.
+ *
+ * @example
+ * optionsLoadMessage({ status: "pending" }, labels); // labels.loadingLabel
+ */
+export declare const optionsLoadMessage: (load: OptionsLoad, labels: OptionsLoadLabels) => string | undefined;
+/**
+ * The load of options that are all there from the start.
+ *
+ * @example
+ * const load = source ?? itemsLoad ?? OPTIONS_LOADED;
+ */
+export declare const OPTIONS_LOADED: OptionsLoad;
+/** The part of a query `optionsLoad` reads, such as a TanStack Query result. */
+export type OptionsQuery = Readonly<{
+    data: unknown;
+    error: unknown;
+    isFetching: boolean;
+    refetch: () => Promise<unknown>;
+}>;
+/**
+ * The options load of a query: loaded once it holds data, pending while it
+ * fetches without any, failed otherwise. A failure offers a retry when
+ * `retryable` says trying again can help, which by default is always.
+ *
+ * @example
+ * <SelectField options={options} load={optionsLoad(query, isRetryable)} … />
+ */
+export declare const optionsLoad: (query: OptionsQuery, retryable?: (error: unknown) => boolean) => OptionsLoad;

package/dist/components/field/options-load.js

@@ -0,0 +1,38 @@
+// src/components/field/options-load.ts
+/**
+* What a popup says about a load that is pending or failed; nothing once the
+* options are there.
+*
+* @example
+* optionsLoadMessage({ status: "pending" }, labels); // labels.loadingLabel
+*/
+var optionsLoadMessage = (load, labels) => {
+	if (load.status === "pending") return labels.loadingLabel;
+	if (load.status === "error") return load.retry === void 0 ? labels.loadBrokenLabel : labels.loadFailedLabel;
+};
+/**
+* The load of options that are all there from the start.
+*
+* @example
+* const load = source ?? itemsLoad ?? OPTIONS_LOADED;
+*/
+var OPTIONS_LOADED = { status: "success" };
+/**
+* The options load of a query: loaded once it holds data, pending while it
+* fetches without any, failed otherwise. A failure offers a retry when
+* `retryable` says trying again can help, which by default is always.
+*
+* @example
+* <SelectField options={options} load={optionsLoad(query, isRetryable)} … />
+*/
+var optionsLoad = (query, retryable = () => true) => {
+	if (query.data !== void 0) return { status: "success" };
+	if (query.isFetching || query.error === null) return { status: "pending" };
+	return retryable(query.error) ? {
+		status: "error",
+		retry: () => {
+			query.refetch();
+		}
+	} : { status: "error" };
+};
+export { OPTIONS_LOADED, optionsLoad, optionsLoadMessage };

package/dist/components/field/rim-focus.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent } from "react";
+/**
+ * Focuses a field group's control when the press lands on the group's own box —
+ * its padding, or an inlay that takes no pointer events. Presses that reach the
+ * control, an `inlay-action` or any other interactive part are left alone.
+ *
+ * @example
+ * <div className={style.group} onMouseDown={focusControlOnRim} />
+ */
+export declare const focusControlOnRim: (event: MouseEvent<HTMLElement>) => void;

package/dist/components/field/rim-focus.js

@@ -0,0 +1,23 @@
+// src/components/field/rim-focus.ts
+var CONTROL_SELECTOR = [
+	"input:not([type=\"hidden\"])",
+	"textarea",
+	"[role=\"spinbutton\"]",
+	"[contenteditable=\"true\"]"
+].join(",");
+/**
+* Focuses a field group's control when the press lands on the group's own box —
+* its padding, or an inlay that takes no pointer events. Presses that reach the
+* control, an `inlay-action` or any other interactive part are left alone.
+*
+* @example
+* <div className={style.group} onMouseDown={focusControlOnRim} />
+*/
+var focusControlOnRim = (event) => {
+	if (event.target !== event.currentTarget) return;
+	const control = event.currentTarget.querySelector(CONTROL_SELECTOR);
+	if (control === null || control.matches(":disabled")) return;
+	event.preventDefault();
+	control.focus();
+};
+export { focusControlOnRim };

package/dist/components/field/use-field-focus.d.ts

@@ -0,0 +1,37 @@
+import { type FocusEvent } from "react";
+import type { FieldState } from "./field-state.ts";
+export type FieldFocusHandlers<TEvent extends FocusEvent<HTMLElement>> = Readonly<{
+    onFocus?: (event: TEvent) => void;
+    onBlur?: (event: TEvent) => void;
+}>;
+export type FieldFocus<TEvent extends FocusEvent<HTMLElement> = FocusEvent<HTMLElement>> = Readonly<{
+    /** Focus is on this element or inside it, however it got there. */
+    focused: boolean;
+    /** That focus is the keyboard's, so it has earned a ring. */
+    focusVisible: boolean;
+    /** Spread onto the element whose focus is being tracked, after its own props. */
+    props: Readonly<{
+        onFocus: (event: TEvent) => void;
+        onBlur: (event: TEvent) => void;
+    }>;
+}>;
+/**
+ * Live focus laid over a projected field state. A caller can add focus that
+ * lands elsewhere in the field, such as a popup this element does not contain;
+ * the ring stays the element's own.
+ *
+ * @example
+ * fieldStateAttributes(withFieldFocus(state, useFieldFocus(props)));
+ */
+export declare const withFieldFocus: (state: FieldState, focus: Pick<FieldFocus, "focused" | "focusVisible">) => FieldState;
+/**
+ * Tracks focus for a control that has to publish it as `data-focused` and
+ * `data-focus-visible` rather than leave it to a selector. React's focus events
+ * bubble, so this reads focus inside a group as well as on a bare control. The
+ * handlers passed in still run, so `props` is spread last.
+ *
+ * @example
+ * const focus = useFieldFocus(props);
+ * <div {...props} {...focus.props} />
+ */
+export declare const useFieldFocus: <TEvent extends FocusEvent<HTMLElement> = FocusEvent<HTMLElement>>(handlers?: FieldFocusHandlers<TEvent>) => FieldFocus<TEvent>;

package/dist/components/field/use-field-focus.js

@@ -0,0 +1,71 @@
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+// src/components/field/use-field-focus.ts
+/**
+* Live focus laid over a projected field state. A caller can add focus that
+* lands elsewhere in the field, such as a popup this element does not contain;
+* the ring stays the element's own.
+*
+* @example
+* fieldStateAttributes(withFieldFocus(state, useFieldFocus(props)));
+*/
+var withFieldFocus = (state, focus) => ({
+	...state,
+	focused: state.focused === true || focus.focused,
+	focusVisible: focus.focusVisible
+});
+/**
+* Tracks focus for a control that has to publish it as `data-focused` and
+* `data-focus-visible` rather than leave it to a selector. React's focus events
+* bubble, so this reads focus inside a group as well as on a bare control. The
+* handlers passed in still run, so `props` is spread last.
+*
+* @example
+* const focus = useFieldFocus(props);
+* <div {...props} {...focus.props} />
+*/
+var useFieldFocus = (handlers) => {
+	const $ = c(6);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			focused: false,
+			focusVisible: false
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [focus, setFocus] = useState(t0);
+	let t1;
+	if ($[1] !== handlers) {
+		t1 = {
+			onFocus: (event) => {
+				setFocus({
+					focused: true,
+					focusVisible: event.target.matches(":focus-visible")
+				});
+				handlers?.onFocus?.(event);
+			},
+			onBlur: (event_0) => {
+				if (!(event_0.relatedTarget instanceof Node && event_0.currentTarget.contains(event_0.relatedTarget))) setFocus({
+					focused: false,
+					focusVisible: false
+				});
+				handlers?.onBlur?.(event_0);
+			}
+		};
+		$[1] = handlers;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== focus || $[4] !== t1) {
+		t2 = {
+			...focus,
+			props: t1
+		};
+		$[3] = focus;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { useFieldFocus, withFieldFocus };

package/dist/components/field/use-field-state.d.ts

@@ -0,0 +1,32 @@
+import { type BusyPhase } from "../../lib/hooks/use-busy-phase.ts";
+import type { FieldProps } from "./field.tsx";
+import type { FieldState } from "./field-state.ts";
+/** What `useFieldState` reads a field's states from. */
+export type FieldStateOptions = Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** The control holds a value. */
+    filled?: boolean;
+    /** States no option here owns, projected over the ones that do. */
+    state?: FieldState;
+}>;
+/** A field's states, read from their owners. */
+export type FieldStateProjection = Readonly<{
+    /** Every state the field projects, for `fieldStateAttributes` and its parts. */
+    state: FieldState;
+    /** The field has an error to show. */
+    invalid: boolean;
+    /** Disabled by its own prop or by a busy `Form.Root`. */
+    disabled: boolean;
+    /** How long `pending` has lasted; a `Pending` part mounts once it leaves `fresh`. */
+    phase: BusyPhase;
+}>;
+/**
+ * A field's states, each from its owner: invalid from its errors, disabled
+ * by its own prop or a busy `Form.Root`, and pending once the wait has lasted
+ * long enough to show.
+ *
+ * @example
+ * const { state, invalid, disabled, phase } = useFieldState({ errors, pending, disabled, filled: value !== "" });
+ */
+export declare const useFieldState: ({ errors, requiredness, dirty, touched, pending, disabled: ownDisabled, readOnly, filled, state, }: FieldStateOptions) => FieldStateProjection;

package/dist/components/field/use-field-state.js

@@ -0,0 +1,77 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { useFormDisabled } from "../form/form-context.js";
+import { c } from "react/compiler-runtime";
+// src/components/field/use-field-state.ts
+/**
+* A field's states, each from its owner: invalid from its errors, disabled
+* by its own prop or a busy `Form.Root`, and pending once the wait has lasted
+* long enough to show.
+*
+* @example
+* const { state, invalid, disabled, phase } = useFieldState({ errors, pending, disabled, filled: value !== "" });
+*/
+var useFieldState = (t0) => {
+	const $ = c(19);
+	const { errors, requiredness, dirty, touched, pending: t1, disabled: t2, readOnly, filled, state } = t0;
+	const pending = t1 === void 0 ? false : t1;
+	const ownDisabled = t2 === void 0 ? false : t2;
+	const formDisabled = useFormDisabled();
+	let t3;
+	if ($[0] !== pending) {
+		t3 = { busy: pending };
+		$[0] = pending;
+		$[1] = t3;
+	} else t3 = $[1];
+	const phase = useBusyPhase(t3);
+	let t4;
+	if ($[2] !== errors) {
+		t4 = normalizeFieldErrors(errors);
+		$[2] = errors;
+		$[3] = t4;
+	} else t4 = $[3];
+	const invalid = t4.length > 0;
+	const disabled = ownDisabled || formDisabled;
+	const t5 = invalid ? "invalid" : void 0;
+	const t6 = phase !== "fresh";
+	let t7;
+	if ($[4] !== dirty || $[5] !== disabled || $[6] !== filled || $[7] !== readOnly || $[8] !== requiredness || $[9] !== state || $[10] !== t5 || $[11] !== t6 || $[12] !== touched) {
+		t7 = {
+			disabled,
+			readonly: readOnly,
+			requiredness,
+			validity: t5,
+			dirty,
+			touched,
+			filled,
+			pending: t6,
+			...state
+		};
+		$[4] = dirty;
+		$[5] = disabled;
+		$[6] = filled;
+		$[7] = readOnly;
+		$[8] = requiredness;
+		$[9] = state;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = touched;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== disabled || $[15] !== invalid || $[16] !== phase || $[17] !== t7) {
+		t8 = {
+			state: t7,
+			invalid,
+			disabled,
+			phase
+		};
+		$[14] = disabled;
+		$[15] = invalid;
+		$[16] = phase;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+};
+export { useFieldState };

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

@@ -0,0 +1,22 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._placeholder_ayddm_3 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, var(--sys-unit-4));
+    inline-size: 100%;
+  }
+  ._label_ayddm_9 {
+    inline-size: var(--field-placeholder-label-size, var(--sys-unit-56));
+    block-size: 1lh;
+  }
+  ._controls_ayddm_13 {
+    display: flex;
+    gap: var(--sys-unit-4);
+    inline-size: 100%;
+  }
+  ._control_ayddm_13 {
+    flex: 1;
+    block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+  }
+}

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

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/**
+ * A field-shaped placeholder, standing in for a control whose code is still on
+ * its way. Holds the label and control heights so the form does not jump when
+ * the real field arrives.
+ *
+ * @example
+ * <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
+ */
+export declare const FieldPlaceholder: () => ReactNode;

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

@@ -0,0 +1,54 @@
+import { Skeleton } from "../skeleton/skeleton.js";
+import field_placeholder_module_default from "./field-placeholder.module.js";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/field-placeholder/field-placeholder.tsx
+var SHAPES = ["single", "split"];
+var shapeIndex = (seed, count) => {
+	let hash = 0;
+	for (const character of seed) hash = (hash * 31 + character.charCodeAt(0)) % 1000003;
+	return hash % count;
+};
+/**
+* A field-shaped placeholder, standing in for a control whose code is still on
+* its way. Holds the label and control heights so the form does not jump when
+* the real field arrives.
+*
+* @example
+* <Suspense fallback={<FieldPlaceholder />}>{field}</Suspense>
+*/
+var FieldPlaceholder = () => {
+	const $ = c(6);
+	const shape = SHAPES[shapeIndex(useId(), SHAPES.length)] ?? "single";
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.label });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== shape) {
+		t2 = shape === "split" && /* @__PURE__ */ jsx(Skeleton, { className: field_placeholder_module_default.control });
+		$[2] = shape;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: field_placeholder_module_default.placeholder,
+			children: [t0, /* @__PURE__ */ jsxs("div", {
+				className: field_placeholder_module_default.controls,
+				children: [t1, t2]
+			})]
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+export { FieldPlaceholder };

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

@@ -0,0 +1,12 @@
+import './field-placeholder.css';// src/components/field-placeholder/field-placeholder.module.scss
+var placeholder = "_placeholder_ayddm_3";
+var label = "_label_ayddm_9";
+var controls = "_controls_ayddm_13";
+var control = "_control_ayddm_13";
+var field_placeholder_module_default = {
+	placeholder,
+	label,
+	controls,
+	control
+};
+export { control, controls, field_placeholder_module_default as default, label, placeholder };

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

@@ -0,0 +1 @@
+export * from "./field-placeholder.tsx";

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

@@ -0,0 +1 @@
+export { FieldPlaceholder } from "./field-placeholder.js";

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import type { FieldProps } from "../field/index.ts";
+import type { FieldsetErrorFormat, FieldsetMember } from "./fieldset-root.tsx";
+export type FieldGroupProps = Pick<FieldProps, "requiredness" | "optionalLabel"> & Readonly<{
+    /** The visible name of the group, such as "Address". */
+    legend: string;
+    /** Help about the group as a whole, under its legend. */
+    description?: ReactNode;
+    /** Errors about the group as a whole, such as a failed address lookup, in any shape `normalizeFieldErrors` accepts. */
+    errors?: unknown;
+    /** The fields whose errors the group shows in its own error instead of under each field. */
+    members?: readonly FieldsetMember[];
+    /** Turns a member's message into its line. Left out, the line is the message. */
+    formatError?: FieldsetErrorFormat;
+    className?: string;
+    /** The fields, laid out side by side. */
+    children: ReactNode;
+}>;
+/**
+ * Related fields side by side under one legend, with one error for all of
+ * them: the lines of its `members`, each tied to its field's control, then its
+ * own `errors`. Every field's label, control, description and error line up
+ * with its neighbours'. The `--field-group-columns` knob sets the columns.
+ *
+ * @example
+ * <FieldGroup legend="Address" optionalLabel="optional" members={members}>
+ * 	<TextField label="Postal code" … />
+ * 	<TextField label="House number" … />
+ * </FieldGroup>
+ */
+export declare const FieldGroup: ({ legend, description, errors, requiredness, optionalLabel, members, formatError, className, children, }: FieldGroupProps) => ReactNode;

package/dist/components/fieldset/field-group.js

@@ -0,0 +1,102 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { Fieldset } from "./fieldset.js";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/fieldset/field-group.tsx
+/**
+* Related fields side by side under one legend, with one error for all of
+* them: the lines of its `members`, each tied to its field's control, then its
+* own `errors`. Every field's label, control, description and error line up
+* with its neighbours'. The `--field-group-columns` knob sets the columns.
+*
+* @example
+* <FieldGroup legend="Address" optionalLabel="optional" members={members}>
+* 	<TextField label="Postal code" … />
+* 	<TextField label="House number" … />
+* </FieldGroup>
+*/
+var FieldGroup = (t0) => {
+	const $ = c(27);
+	const { legend, description, errors, requiredness, optionalLabel, members, formatError, className, children } = t0;
+	const id = useId();
+	const descriptionId = `${id}description`;
+	const errorId = `${id}error`;
+	let t1;
+	if ($[0] !== description || $[1] !== descriptionId || $[2] !== errorId || $[3] !== errors) {
+		t1 = [description === void 0 ? "" : descriptionId, normalizeFieldErrors(errors).length === 0 ? "" : errorId].filter(_temp).join(" ") || void 0;
+		$[0] = description;
+		$[1] = descriptionId;
+		$[2] = errorId;
+		$[3] = errors;
+		$[4] = t1;
+	} else t1 = $[4];
+	const describedBy = t1;
+	let t2;
+	if ($[5] !== legend || $[6] !== optionalLabel || $[7] !== requiredness) {
+		t2 = /* @__PURE__ */ jsx(Fieldset.Legend, {
+			requiredness,
+			optionalLabel,
+			children: legend
+		});
+		$[5] = legend;
+		$[6] = optionalLabel;
+		$[7] = requiredness;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== description || $[10] !== descriptionId) {
+		t3 = /* @__PURE__ */ jsx(Fieldset.Description, {
+			id: descriptionId,
+			children: description
+		});
+		$[9] = description;
+		$[10] = descriptionId;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== children) {
+		t4 = /* @__PURE__ */ jsx(Fieldset.Fields, { children });
+		$[12] = children;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== errorId) {
+		t5 = /* @__PURE__ */ jsx(Fieldset.Error, { id: errorId });
+		$[14] = errorId;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== className || $[17] !== describedBy || $[18] !== errors || $[19] !== formatError || $[20] !== members || $[21] !== requiredness || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fieldset.Root, {
+			errors,
+			requiredness,
+			members,
+			formatError,
+			"aria-describedby": describedBy,
+			className,
+			children: [
+				t2,
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[16] = className;
+		$[17] = describedBy;
+		$[18] = errors;
+		$[19] = formatError;
+		$[20] = members;
+		$[21] = requiredness;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t6;
+	} else t6 = $[26];
+	return t6;
+};
+function _temp(part) {
+	return part !== "";
+}
+export { FieldGroup };

package/dist/components/fieldset/fieldset-root.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+import { type FieldLabelProps, type FieldProps, type FieldRootProps } from "../field/field.tsx";
+/** A field whose errors a fieldset collects, by the name of the TanStack Form field it renders in. */
+export type FieldsetMember = Readonly<{
+    name: string;
+    /** Errors in any shape `normalizeFieldErrors` accepts. */
+    errors: unknown;
+}>;
+/** The field a collected line belongs to, as `formatError` receives it. */
+export type FieldsetMemberField = Readonly<{
+    name: string;
+    /** The field's label, once the field has told the group. */
+    label: string | undefined;
+}>;
+/** Turns one of a member's messages into the line the group shows for it. */
+export type FieldsetErrorFormat = (field: FieldsetMemberField, message: string) => ReactNode;
+/** One line of a fieldset's error. */
+export type FieldsetLine = Readonly<{
+    id: string;
+    /** The member the line belongs to, or `undefined` for a line about the group. */
+    name: string | undefined;
+    content: ReactNode;
+}>;
+/** What a fieldset's root hands its parts. */
+export type FieldsetContextValue = Readonly<{
+    /** The members' lines in member order, then the group's own. */
+    lines: readonly FieldsetLine[];
+}>;
+/**
+ * The lines of the surrounding fieldset's error.
+ *
+ * @example
+ * const { lines } = useFieldsetContext();
+ */
+export declare const useFieldsetContext: () => FieldsetContextValue;
+/** What the root of a fieldset takes, for a group of choices or a group of fields. */
+export type FieldsetRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    /** A choice is made. */
+    filled?: boolean;
+    readOnly?: boolean;
+    /** The fields whose errors the group shows in its own error instead of under each field. */
+    members?: readonly FieldsetMember[];
+    /** Turns a member's message into its line. Left out, the line is the message. */
+    formatError?: FieldsetErrorFormat;
+}>;
+/**
+ * A field rendered as a fieldset, named by its legend: a group of choices, or a
+ * group of fields that shows the errors of its `members` in one place.
+ *
+ * @example
+ * <FieldsetRoot filled={kind !== null}>…</FieldsetRoot>
+ */
+export declare const FieldsetRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, members, formatError, children, ...props }: FieldsetRootProps) => ReactNode;
+/**
+ * The legend that names a {@link FieldsetRoot}.
+ *
+ * @example
+ * <FieldsetLegend optionalLabel="optional">Kind</FieldsetLegend>
+ */
+export declare const FieldsetLegend: (props: FieldLabelProps) => ReactNode;