@nizivo/react 0.0.0-stage → 0.2.0

package/dist/empty-state/empty-state.js

@@ -0,0 +1,32 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/empty-state/empty-state.tsx
+/** Figma: "A render, a headline, one action. No paragraphs." */
+function EmptyState({ title, level = 2, media, actions, render, className, ...rest }) {
+	const Title = `h${level}`;
+	return renderElement("div", render, {}, {
+		"data-slot": "empty-state",
+		...rest,
+		className: cx("nz-empty-state", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			media != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-empty-state-media",
+				"data-slot": "empty-state-media",
+				children: media
+			}),
+			/* @__PURE__ */ jsx(Title, {
+				className: "nz-empty-state-title",
+				"data-slot": "empty-state-title",
+				children: title
+			}),
+			actions != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-empty-state-actions",
+				"data-slot": "empty-state-actions",
+				children: actions
+			})
+		] })
+	});
+}
+//#endregion
+export { EmptyState };

package/dist/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+import { EmptyState, EmptyStateProps, EmptyStateTitleLevel } from "./empty-state.js";
+export { EmptyState, type EmptyStateProps, type EmptyStateTitleLevel };

package/dist/empty-state/index.js

@@ -0,0 +1 @@
+export { EmptyState } from "./empty-state.js";

package/dist/field/field-scope.client.d.ts

@@ -0,0 +1,50 @@
+import { FieldControlProps } from "./field-static.js";
+import { FocusEvent, ReactElement, ReactNode, SyntheticEvent } from "react";
+//#region src/field/field-scope.client.d.ts
+/** A native element that takes part in constraint validation. */
+export type FieldValidatable = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+/** What a control passes in: its own props, which win over the Field's (FIELD-CONTRACT.md). */
+export interface FieldControlOptions {
+  id?: string | undefined;
+  name?: string | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  invalid?: boolean | undefined;
+  /** Joined after the Field's description and error ids, for example a text affix or a count. */
+  "aria-describedby"?: string | undefined;
+  /**
+   * `'focus'`: a click on the Field label focuses the control and does nothing else. For button
+   * controls (Select, third-party pickers): a `<label for>` a button presses it, which would open its
+   * popup. Omitted, the label keeps the browser's behaviour.
+   */
+  labelBehavior?: "focus" | undefined;
+}
+/** `controlProps`: the attributes plus the Field's validation handlers, inside a Field. */
+export type FieldControlElementProps = FieldControlProps & {
+  onInvalid?: ((event: SyntheticEvent<FieldValidatable>) => void) | undefined;
+  onInput?: ((event: SyntheticEvent<FieldValidatable>) => void) | undefined;
+  onBlur?: ((event: FocusEvent<FieldValidatable>) => void) | undefined;
+};
+export interface FieldControl {
+  /** A Field is around the control. */
+  inField: boolean;
+  id: string | undefined;
+  /** The Field label's id, for a control named by `aria-labelledby` (button or group controls). */
+  labelledBy: string | undefined;
+  describedBy: string | undefined;
+  name: string | undefined;
+  required: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  /** An error message is presented (`data-invalid` semantics, §8.3). */
+  invalid: boolean;
+  /** Spread on the native element, merged with the consumer's props through `mergeProps`. */
+  controlProps: FieldControlElementProps;
+}
+/**
+ * Field wiring for a control (FIELD-CONTRACT.md). The control's own props win; `aria-describedby`
+ * is joined. With no Field around the control, everything comes from `options`.
+ */
+export declare function useFieldControl(options?: FieldControlOptions): FieldControl;
+//#endregion

package/dist/field/field-scope.client.js

@@ -0,0 +1,212 @@
+"use client";
+import { renderElement } from "../contracts/render.js";
+import { joinIds, presented } from "../_internal/field.js";
+import { describedBy, fieldControlProps, fieldRootProps, fieldState } from "./field-static.js";
+import { createContext, use, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/field/field-scope.client.tsx
+const FieldContext = createContext(null);
+/**
+* Internal: what `Form` (form/form.client.tsx) provides, its presented errors by Field `name` (one
+* message each). It lives here, not in the form folder, so the Field's module graph gains no client
+* module; the form leaf imports it.
+*/
+const FormScope = createContext(null);
+/** Internal: rendered only by `Field`. Every prop is serialisable. */
+function FieldScope({ anatomy, name, messages, children }) {
+	const [native, setNative] = useState(null);
+	const [toFocus, setToFocus] = useState(null);
+	const { ids, label, description, required, disabled, readOnly, validateOn } = anatomy;
+	const formError = name === void 0 ? void 0 : use(FormScope)?.get(name);
+	const error = presented(anatomy.error) ? anatomy.error : formError ?? native;
+	const invalid = presented(error);
+	const region = useRef(null);
+	const [said, say] = useState("");
+	const last = useRef(null);
+	const asked = useRef(false);
+	const handlers = useMemo(() => {
+		const current = (element) => element.validity.valid ? null : messageOf(element, messages);
+		return {
+			onInvalid(event) {
+				event.preventDefault();
+				const element = event.currentTarget;
+				const first = element.form === null || firstInvalid(element.form) === element;
+				if (first) arm(region, asked, last);
+				setNative(messageOf(element, messages));
+				if (first && element.form !== null) setToFocus({ element });
+			},
+			onInput(event) {
+				asked.current = false;
+				const next = current(event.currentTarget);
+				setNative((shown) => shown === null ? null : next);
+			},
+			...validateOn === "blur" && { onBlur(event) {
+				setNative(current(event.currentTarget));
+			} }
+		};
+	}, [messages, validateOn]);
+	const [labelFocus, setLabelFocus] = useState(false);
+	useLayoutEffect(() => {
+		const text = invalid && region.current?.previousSibling?.lastChild?.textContent || "";
+		if (text !== last.current) {
+			last.current = text;
+			say(asked.current && text !== "" && inside(region.current) ? text : "");
+			if (text !== "") asked.current = false;
+		}
+	}, [
+		error,
+		invalid,
+		toFocus
+	]);
+	useLayoutEffect(() => {
+		const element = toFocus?.element;
+		if (element?.form != null && firstInvalid(element.form) === element) element.focus();
+	}, [toFocus]);
+	useEffect(() => {
+		const doc = region.current?.ownerDocument;
+		const onSubmit = () => arm(region, asked);
+		doc?.addEventListener("submit", onSubmit, true);
+		return () => doc?.removeEventListener("submit", onSubmit, true);
+	}, []);
+	useEffect(() => {
+		if (said === "") return void 0;
+		const timer = setTimeout(say, 7e3, "");
+		return () => clearTimeout(timer);
+	}, [said]);
+	const scope = useMemo(() => ({
+		id: ids.control,
+		labelledBy: presented(label) ? ids.label : void 0,
+		describedBy: describedBy(ids, description, invalid),
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid,
+		handlers,
+		setLabelFocus
+	}), [
+		ids,
+		label,
+		description,
+		invalid,
+		name,
+		required,
+		disabled,
+		readOnly,
+		handlers
+	]);
+	const field = {
+		...anatomy,
+		error,
+		onLabelClick: labelFocus ? focusControl : void 0,
+		announcer: /* @__PURE__ */ jsx("span", {
+			ref: region,
+			className: "nz-visually-hidden",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: said
+		}),
+		children
+	};
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value: scope,
+		children: renderElement("div", anatomy.render, fieldState(field), fieldRootProps(field))
+	});
+}
+/**
+* Field wiring for a control (FIELD-CONTRACT.md). The control's own props win; `aria-describedby`
+* is joined. With no Field around the control, everything comes from `options`.
+*/
+function useFieldControl(options = {}) {
+	const scope = use(FieldContext);
+	const id = options.id ?? scope?.id;
+	const name = options.name ?? scope?.name;
+	const required = options.required ?? scope?.required ?? false;
+	const disabled = options.disabled ?? scope?.disabled ?? false;
+	const readOnly = options.readOnly ?? scope?.readOnly ?? false;
+	const invalid = options.invalid ?? scope?.invalid ?? false;
+	const described = joinIds(scope?.describedBy, options["aria-describedby"]);
+	const setLabelFocus = options.labelBehavior === "focus" ? scope?.setLabelFocus : void 0;
+	useEffect(() => {
+		if (setLabelFocus === void 0) return void 0;
+		setLabelFocus(true);
+		return () => setLabelFocus(false);
+	}, [setLabelFocus]);
+	return {
+		inField: scope !== null,
+		id,
+		labelledBy: scope?.labelledBy,
+		describedBy: described,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid,
+		controlProps: {
+			...fieldControlProps({
+				id,
+				name,
+				required,
+				disabled,
+				readOnly,
+				invalid,
+				describedBy: described
+			}),
+			...scope?.handlers
+		}
+	};
+}
+/**
+* `labelBehavior: 'focus'`: a `<label for>` a button presses it, which would open its popup. Cancel
+* that and focus the control, with the ring showing where focus went, as React Aria's own Select
+* label does. A disabled control takes no focus.
+*/
+function focusControl(event) {
+	event.preventDefault();
+	event.currentTarget.control?.focus({ focusVisible: true });
+}
+const VALIDITY_KEYS = [
+	"valueMissing",
+	"typeMismatch",
+	"patternMismatch",
+	"tooLong",
+	"tooShort",
+	"rangeUnderflow",
+	"rangeOverflow",
+	"stepMismatch",
+	"badInput",
+	"customError"
+];
+/** The Field's message for the first failing validity flag, else the browser's own text. */
+function messageOf(element, messages) {
+	const key = VALIDITY_KEYS.find((flag) => element.validity[flag]);
+	return (key === void 0 ? void 0 : messages?.[key]) ?? element.validationMessage;
+}
+/**
+* The form's first control that fails validation, in tree order. Not `querySelector(':invalid')`:
+* `fieldset:invalid` matches the ancestor first.
+*/
+function firstInvalid(form) {
+	for (const element of form.elements) if (isValidatable(element) && element.willValidate && !element.validity.valid) return element;
+}
+/**
+* A validation request: with focus in the Field, the next error text that commits is spoken. With
+* `last` (native validation, which answers in the same commit) the current text also counts as not
+* yet seen. A submit passes none: its reply comes later, and the re-renders before it (a pending
+* state, an `error` node rebuilt) keep the old text, which must not count as new.
+*/
+function arm(region, asked, last) {
+	if (inside(region.current)) {
+		asked.current = true;
+		if (last) last.current = null;
+	}
+}
+/** Focus is in the Field root that holds the announcer (a group control's radios included). */
+function inside(region) {
+	return region?.parentNode?.contains(region.ownerDocument.activeElement) === true;
+}
+function isValidatable(element) {
+	return "validity" in element && "willValidate" in element;
+}
+//#endregion
+export { FieldScope, FormScope, useFieldControl };

package/dist/field/field-static.d.ts

@@ -0,0 +1,122 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/field/field-static.d.ts
+/** When native validation messages are presented. */
+export type FieldValidateOn = "submit" | "blur";
+/** The `ValidityState` flags a `messages` entry can replace. */
+export type FieldValidityKey = "valueMissing" | "typeMismatch" | "patternMismatch" | "tooLong" | "tooShort" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput" | "customError";
+/** Ids a Field generates; each one given here replaces the generated one (Conform, tests). */
+export interface FieldIds {
+  control?: string | undefined;
+  label?: string | undefined;
+  description?: string | undefined;
+  error?: string | undefined;
+}
+export interface FieldState {
+  /** An error message is presented. */
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+  readOnly: boolean;
+}
+/**
+ * Attributes for the native element of a control: what a function child receives, and the base of
+ * `useFieldControl().controlProps`. Serialisable; flags are `true` or `undefined`, never `false`.
+ */
+export type FieldControlProps = {
+  id?: string | undefined;
+  name?: string | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  "aria-describedby"?: string | undefined;
+  "aria-invalid"?: boolean | undefined;
+};
+export interface FieldProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The visible name, a `<label for>` the control. */
+  label?: ReactNode;
+  /** Help text under the control, joined to its `aria-describedby`. */
+  description?: ReactNode;
+  /**
+   * The error message, rendered through InlineError with an icon (never colour alone). Its presence
+   * is what "invalid" means (§8.3): `aria-invalid` on the control and `data-invalid` on the Field.
+   * It is not a live region; around a client control, the Field's one announcer speaks a new error
+   * while focus is already in the Field (§16.5's one exception, FIELD-CONTRACT.md). `null`, `false`
+   * and `''` present no error.
+   */
+  error?: ReactNode;
+  /** Replaces the internal error mark (`circle-x`). Decorative. */
+  errorIcon?: ReactNode;
+  /**
+   * The control is a group of native controls under one root (SegmentedControl, a third-party
+   * picker), not one labelable element: the label then has no `for`, and names the group through
+   * the `aria-labelledby` the control puts on its root (FIELD-CONTRACT.md). @default false
+   */
+  group?: boolean;
+  /** Passed to the control. */
+  name?: string;
+  /** The control is required: native `required`, and an `aria-hidden` mark after the label. @default false */
+  required?: boolean;
+  /** @default false */
+  disabled?: boolean;
+  /** @default false */
+  readOnly?: boolean;
+  ids?: FieldIds;
+  /** Messages for native validation, by validity flag, instead of the browser's own text. */
+  messages?: Partial<Record<FieldValidityKey, string>>;
+  /** Native messages appear on submit, or also when the control loses focus. @default 'submit' */
+  validateOn?: FieldValidateOn;
+  /** Composition of the root `<div>`. */
+  render?: RenderProp<FieldState>;
+  /**
+   * The control. A function receives ready-made control attributes and renders with no client code
+   * at all (zero-JS mode, for Server-Component forms and plain elements); its second argument,
+   * `field`, carries the ids for anything else, as on `FieldStatic`. A NativeSelect placed directly
+   * inside is wired the same way, with no function. Client controls (Input, Checkbox, …) read the
+   * wiring through `useFieldControl`.
+   */
+  children?: ReactNode | ((control: FieldControlProps, field: FieldStaticWiring) => ReactNode);
+}
+/**
+ * What a FieldStatic function child receives as its second argument: the wiring FieldStatic does
+ * not do for you, since it provides no context. Use it for a control that is not one labelable
+ * element (`aria-labelledby` on a group root or a button) or to point other elements at the parts.
+ */
+export interface FieldStaticWiring extends FieldState {
+  /** Every id the Field renders, generated or taken from `ids`. */
+  ids: {
+    control: string;
+    label: string;
+    description: string;
+    error: string;
+  };
+  /** The label's id while a label renders, for `aria-labelledby`; `undefined` without a label. */
+  labelledBy: string | undefined;
+  /** The description and error ids that render, in that order; the control's `aria-describedby`. */
+  describedBy: string | undefined;
+}
+export interface FieldStaticProps extends Omit<FieldProps, "children" | "messages" | "validateOn"> {
+  /**
+   * Not on FieldStatic: nothing intercepts native validation, so the browser shows its own bubble.
+   * For inline native messages use `Field`.
+   */
+  messages?: never;
+  /** Not on FieldStatic: see `messages`. */
+  validateOn?: never;
+  /**
+   * The control, always a function: FieldStatic provides no context, so a Nizivo client control
+   * placed directly inside (`<Input />`) would not be wired, and that is a type error here (use
+   * `Field`). Spread `control` on the element that holds the value (`<input {...control} />`,
+   * `<NativeSelect {...control}>`); `field` carries the ids for anything else.
+   */
+  children: (control: FieldControlProps, field: FieldStaticWiring) => ReactNode;
+}
+/**
+ * The Field anatomy with no client code: label, control, description and error, the same HTML and
+ * ids as `Field` with a function child (M31). Server-safe, and its module imports no client leaf,
+ * so a page that renders only FieldStatic ships no Field JavaScript in any bundler. It provides no
+ * context and no announcer, and native validation shows the browser's own bubble; the function
+ * child wires the control (FIELD-CONTRACT.md "FieldStatic").
+ */
+export declare function FieldStatic({ label, description, error, errorIcon, group, name, required, disabled, readOnly, ids, render, children, messages: _messages, validateOn: _validateOn, ...root }: FieldStaticProps): ReactElement;
+//#endregion

package/dist/field/field-static.js

@@ -0,0 +1,159 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { CircleXGlyph } from "../_internal/glyphs.js";
+import { stateAttrs } from "../contracts/state.js";
+import { joinIds, presented } from "../_internal/field.js";
+import { InlineError } from "../inline-error/inline-error.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/field/field-static.tsx
+/**
+* The Field anatomy with no client code: label, control, description and error, the same HTML and
+* ids as `Field` with a function child (M31). Server-safe, and its module imports no client leaf,
+* so a page that renders only FieldStatic ships no Field JavaScript in any bundler. It provides no
+* context and no announcer, and native validation shows the browser's own bubble; the function
+* child wires the control (FIELD-CONTRACT.md "FieldStatic").
+*/
+function FieldStatic({ label, description, error, errorIcon, group = false, name, required = false, disabled = false, readOnly = false, ids, render, children, messages: _messages, validateOn: _validateOn, ...root }) {
+	const anatomy = {
+		ids: resolveIds(useId(), ids, void 0),
+		label,
+		group,
+		description,
+		error,
+		errorIcon,
+		required,
+		disabled,
+		readOnly,
+		render,
+		root
+	};
+	if (typeof children !== "function") throw new TypeError("FieldStatic: children must be a function; put an element in a Field");
+	return staticField(anatomy, name, children);
+}
+/** The ids of one Field: a directly placed control's own id, else `ids`, else generated. */
+function resolveIds(base, ids, ownId) {
+	return {
+		control: ownId ?? ids?.control ?? `${base}-control`,
+		label: ids?.label ?? `${base}-label`,
+		description: ids?.description ?? `${base}-description`,
+		error: ids?.error ?? `${base}-error`
+	};
+}
+/**
+* The zero-JS render, shared by FieldStatic and Field's function child: the control attributes and
+* the wiring go to `control`, and the anatomy renders around what it returns, with no
+* `data-validate-on` and no announcer.
+*/
+function staticField(anatomy, name, control) {
+	const { ids, label, description, required, disabled, readOnly } = anatomy;
+	const invalid = presented(anatomy.error);
+	const described = describedBy(ids, description, invalid);
+	const attributes = fieldControlProps({
+		id: ids.control,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid,
+		describedBy: described
+	});
+	const wiring = {
+		ids,
+		labelledBy: presented(label) ? ids.label : void 0,
+		describedBy: described,
+		invalid,
+		required,
+		disabled,
+		readOnly
+	};
+	const field = {
+		...anatomy,
+		validateOn: void 0,
+		children: control(attributes, wiring)
+	};
+	return renderElement("div", anatomy.render, fieldState(field), {
+		...fieldRootProps(field),
+		"data-slot": "field",
+		className: cx("nz-field", anatomy.root.className)
+	});
+}
+/** The state a Field's `render` function receives. */
+function fieldState(anatomy) {
+	const { required, disabled, readOnly } = anatomy;
+	return {
+		invalid: presented(anatomy.error),
+		disabled,
+		required,
+		readOnly
+	};
+}
+/**
+* The root props of the one DOM shape of a Field: label, control, description, error (§10.6).
+* Every path renders it: FieldStatic and Field's function child (zero JS) and FieldScope (with its
+* native message and announcer).
+*/
+function fieldRootProps(anatomy) {
+	const { ids, label, description, error, required, disabled, readOnly, validateOn } = anatomy;
+	const invalid = presented(error);
+	return {
+		"data-slot": "field",
+		...stateAttrs({
+			invalid,
+			disabled,
+			required,
+			readOnly
+		}),
+		"data-validate-on": validateOn,
+		...anatomy.root,
+		className: cx("nz-field", anatomy.root.className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			presented(label) && /* @__PURE__ */ jsxs("label", {
+				className: "nz-field-label",
+				"data-slot": "field-label",
+				id: ids.label,
+				htmlFor: anatomy.group ? void 0 : ids.control,
+				onClick: anatomy.onLabelClick,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "nz-field-required",
+					"data-slot": "field-required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			anatomy.children,
+			presented(description) && /* @__PURE__ */ jsx("div", {
+				className: "nz-field-description",
+				"data-slot": "field-description",
+				id: ids.description,
+				children: description
+			}),
+			invalid && /* @__PURE__ */ jsx(InlineError, {
+				className: "nz-field-error",
+				"data-slot": "field-error",
+				id: ids.error,
+				icon: anatomy.errorIcon ?? /* @__PURE__ */ jsx(CircleXGlyph, {}),
+				children: error
+			}),
+			anatomy.announcer
+		] })
+	};
+}
+/** `aria-describedby` of the control: description, then error (§16.1). */
+function describedBy(ids, description, invalid) {
+	return joinIds(presented(description) && ids.description, invalid && ids.error);
+}
+/** Control attributes; `false` flags and unknown values are left out, never set to `undefined`. */
+function fieldControlProps(state) {
+	return {
+		...state.id !== void 0 && { id: state.id },
+		...state.name !== void 0 && { name: state.name },
+		...state.required && { required: true },
+		...state.disabled && { disabled: true },
+		...state.readOnly && { readOnly: true },
+		...state.describedBy !== void 0 && { "aria-describedby": state.describedBy },
+		...state.invalid && { "aria-invalid": true }
+	};
+}
+//#endregion
+export { FieldStatic, describedBy, fieldControlProps, fieldRootProps, fieldState, resolveIds, staticField };

package/dist/field/field.d.ts

@@ -0,0 +1,5 @@
+import { FieldControlProps, FieldIds, FieldProps, FieldState, FieldValidateOn, FieldValidityKey } from "./field-static.js";
+import { ReactElement } from "react";
+//#region src/field/field.d.ts
+export declare function Field({ label, description, error, errorIcon, group, name, required, disabled, readOnly, ids, messages, validateOn, render, children, ...root }: FieldProps): ReactElement;
+//#endregion

package/dist/field/field.js

@@ -0,0 +1,53 @@
+import { FIELD_CONTROL, joinIds } from "../_internal/field.js";
+import { resolveIds, staticField } from "./field-static.js";
+import { FieldScope } from "./field-scope.client.js";
+import { cloneElement, isValidElement, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/field/field.tsx
+function Field({ label, description, error, errorIcon, group = false, name, required = false, disabled = false, readOnly = false, ids, messages, validateOn = "submit", render, children, ...root }) {
+	const base = useId();
+	const wired = staticControl(children) ? children : void 0;
+	const ownId = wired?.props["id"];
+	const anatomy = {
+		ids: resolveIds(base, ids, typeof ownId === "string" ? ownId : void 0),
+		label,
+		group,
+		description,
+		error,
+		errorIcon,
+		required,
+		disabled,
+		readOnly,
+		render,
+		root
+	};
+	if (typeof children === "function") return staticField(anatomy, name, children);
+	if (wired !== void 0) return staticField(anatomy, name, (control) => cloneElement(wired, fill(control, wired.props)));
+	return /* @__PURE__ */ jsx(FieldScope, {
+		anatomy: {
+			...anatomy,
+			validateOn
+		},
+		name,
+		messages,
+		children
+	});
+}
+/** A server-safe control (NativeSelect) that takes the zero-JS wiring as plain props. */
+function staticControl(children) {
+	return isValidElement(children) && typeof children.type === "function" && Object.hasOwn(children.type, FIELD_CONTROL);
+}
+/**
+* The Field's attributes a directly placed control did not set itself: the control's own props win
+* (an explicit `false` included), and `aria-describedby` is joined after the Field's ids.
+*/
+function fill(control, own) {
+	const out = {};
+	for (const [key, value] of Object.entries(control)) if (own[key] === void 0) out[key] = value;
+	const ownDescribedBy = own["aria-describedby"];
+	const described = joinIds(control["aria-describedby"], typeof ownDescribedBy === "string" ? ownDescribedBy : void 0);
+	if (described !== void 0) out["aria-describedby"] = described;
+	return out;
+}
+//#endregion
+export { Field };

package/dist/field/index.d.ts

@@ -0,0 +1,4 @@
+import { FieldControlProps, FieldIds, FieldProps, FieldState, FieldStatic, FieldStaticProps, FieldStaticWiring, FieldValidateOn, FieldValidityKey } from "./field-static.js";
+import { Field } from "./field.js";
+import { FieldControl, FieldControlElementProps, FieldControlOptions, FieldValidatable, useFieldControl } from "./field-scope.client.js";
+export { Field, type FieldControl, type FieldControlElementProps, type FieldControlOptions, type FieldControlProps, type FieldIds, type FieldProps, type FieldState, FieldStatic, type FieldStaticProps, type FieldStaticWiring, type FieldValidatable, type FieldValidateOn, type FieldValidityKey, useFieldControl };

package/dist/field/index.js

@@ -0,0 +1,4 @@
+import { FieldStatic } from "./field-static.js";
+import { useFieldControl } from "./field-scope.client.js";
+import { Field } from "./field.js";
+export { Field, FieldStatic, useFieldControl };