@nizivo/react 0.0.0-stage → 0.1.0

package/dist/dialog/dialog.contract.d.ts

@@ -0,0 +1,97 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.js";
+import "../_internal/engine-part.js";
+import { ReturnFocusTarget } from "../_internal/overlay.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/dialog/dialog.contract.d.ts
+/** Figma Modal `Type`: Default → `dialog`, Destructive → `alertdialog`. */
+export type DialogRole = "dialog" | "alertdialog";
+/** `md` is Figma's only Modal width (480 px); `sm` (400) and `lg` (640) are provisional. */
+export type DialogSize = "sm" | "md" | "lg";
+export type DialogTitleLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Strings the Dialog renders (§9.3 rule 7, §16.4). `close` is the accessible name of the default
+ * `Dialog.Close` (an IconButton showing the close glyph), set through that part's `labels`.
+ * Engine-owned with React Aria (not overridable): `dismiss`, the visually hidden "Dismiss" button
+ * rendered inside a dismissable dialog.
+ */
+export interface DialogLabels {
+  /** @default 'Close' */
+  close: string;
+  dismiss: string;
+}
+export interface DialogRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /**
+   * Where focus goes when the dialog closes (§12.2 Focus return). `true` returns it to the trigger
+   * (the element that opened the dialog), else to the trigger of the overlay it was opened from (a
+   * Menu button, after a Menu item opened it), else it stays on `<body>` and development builds warn.
+   * An element ref, or a function returning an element, goes first while that element is on the page;
+   * `false` leaves focus where the browser puts it, for an app that moves it itself.
+   * @default true
+   */
+  returnFocus?: ReturnFocusTarget;
+  children: ReactNode;
+}
+export interface DialogTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DialogPopupState {
+  entering: boolean;
+  exiting: boolean;
+}
+export interface DialogCloseState {
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DialogTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /** Must render a `<button>`, for example `render={<Button variant="critical">Delete</Button>}`. */
+  render?: RenderProp<DialogTriggerState>;
+  children?: ReactNode;
+}
+export interface DialogPopupProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
+  /** `alertdialog` disables outside-press dismissal. @default 'dialog' */
+  role?: DialogRole;
+  /** @default 'md' */
+  size?: DialogSize;
+  /** The scrim element. Defaults to on for the root modal and off for nested modals. */
+  backdrop?: boolean;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  children: ReactNode;
+}
+export interface DialogTitleProps extends Omit<ComponentPropsWithRef<"h2">, "id"> {
+  /** @default 2 */
+  level?: DialogTitleLevel;
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogBodyProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogFooterProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogCloseProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Must render a `<button>`, for example `render={<Button>Cancel</Button>}`. With neither `render`
+   * nor `children`, the part is an IconButton showing the close glyph, named by `labels.close`, which
+   * sits in the popup's top corner when it is a direct child of `Dialog.Popup` (§12.3).
+   */
+  render?: RenderProp<DialogCloseState>;
+  /** Text content, rendered in a plain `<button>`; leave it out for the default IconButton. */
+  children?: ReactNode;
+  /** The default IconButton's accessible name; an `aria-label` you pass wins. */
+  labels?: Partial<Pick<DialogLabels, "close">>;
+}
+//#endregion
+export type { OpenReason };

package/dist/dialog/dialog.parts.d.ts

@@ -0,0 +1,6 @@
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+declare namespace dialog_parts_d_exports {
+  export { DialogBody as Body, DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger };
+}
+//#endregion
+export { DialogBody as Body, DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, dialog_parts_d_exports };

package/dist/dialog/dialog.parts.js

@@ -0,0 +1,15 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+//#region src/dialog/dialog.parts.ts
+var dialog_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => DialogBody,
+	Close: () => DialogClose,
+	Description: () => DialogDescription,
+	Footer: () => DialogFooter,
+	Popup: () => DialogPopup,
+	Root: () => DialogRoot,
+	Title: () => DialogTitle,
+	Trigger: () => DialogTrigger
+});
+//#endregion
+export { DialogBody as Body, DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, dialog_parts_exports };

package/dist/dialog/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { DialogBodyProps, DialogCloseProps, DialogCloseState, DialogDescriptionProps, DialogFooterProps, DialogLabels, DialogPopupProps, DialogPopupState, DialogRole, DialogRootProps, DialogSize, DialogTitleLevel, DialogTitleProps, DialogTriggerProps, DialogTriggerState } from "./dialog.contract.js";
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+import { dialog_parts_d_exports } from "./dialog.parts.js";
+export { dialog_parts_d_exports as Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, type DialogCloseState, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, type DialogLabels, DialogPopup, type DialogPopupProps, type DialogPopupState, type DialogRole, DialogRoot, type DialogRootProps, type DialogSize, DialogTitle, type DialogTitleLevel, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, type DialogTriggerState, type OpenReason };

package/dist/dialog/index.js

@@ -0,0 +1,3 @@
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+import { dialog_parts_exports } from "./dialog.parts.js";
+export { dialog_parts_exports as Dialog, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger };

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

@@ -0,0 +1,18 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/empty-state/empty-state.d.ts
+export type EmptyStateTitleLevel = 2 | 3 | 4 | 5 | 6;
+export interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "title" | "children"> {
+  /** The headline. Its look is Heading/H3 at every `level`. */
+  title: ReactNode;
+  /** @default 2 */
+  level?: EmptyStateTitleLevel;
+  /** A render or illustration above the title, for example `<Image … />`. */
+  media?: ReactNode;
+  /** One action, for example `<Button variant="primary">Share your store</Button>`. */
+  actions?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+/** Figma: "A render, a headline, one action. No paragraphs." */
+export declare function EmptyState({ title, level, media, actions, render, className, ...rest }: EmptyStateProps): ReactElement;
+//#endregion

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,205 @@
+"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: 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 error = presented(anatomy.error) ? anatomy.error : 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, 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