@agentero/design-system 0.27.1 → 0.29.0

package/src/field/field.d.ts

@@ -0,0 +1,216 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { LabelProps } from '../label';
+import { TooltipProps } from '../tooltip';
+import { FieldDescriptionProps, FieldErrorProps } from './context';
+/**
+ * Style recipe for Field. Slots: `group`, `root`, `content`, `label`,
+ * `labelTooltip`, `description`, `error`. The `orientation` variant applies to
+ * `root`.
+ *
+ * @summary tailwind-variants recipe backing the Field parts
+ */
+export declare const fieldRecipe: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string[];
+        };
+        responsive: {
+            root: string[];
+        };
+    };
+}, {
+    group: string;
+    root: string;
+    content: string[];
+    label: string;
+    labelTooltip: string[];
+    description: string[];
+    error: string[];
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string[];
+        };
+        responsive: {
+            root: string[];
+        };
+    };
+}, {
+    group: string;
+    root: string;
+    content: string[];
+    label: string;
+    labelTooltip: string[];
+    description: string[];
+    error: string[];
+}, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+        };
+        horizontal: {
+            root: string[];
+        };
+        responsive: {
+            root: string[];
+        };
+    };
+}, {
+    group: string;
+    root: string;
+    content: string[];
+    label: string;
+    labelTooltip: string[];
+    description: string[];
+    error: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type FieldVariants = VariantProps<typeof fieldRecipe>;
+export type FieldGroupProps = ComponentPropsWithRef<'div'>;
+/**
+ * Stacks sibling fields and owns the space between them. The gap lives here
+ * rather than as a margin on each field, so a field never carries spacing it
+ * cannot control. Nest a `Field.Group` to tighten a sub-set of fields.
+ *
+ * @summary Stacks sibling fields and owns the space between them
+ */
+export declare const Group: {
+    ({ className, ...props }: FieldGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type FieldRootProps = ComponentPropsWithRef<'div'> & {
+    /**
+     * Layout of the field. `vertical` (default) stacks label, control and
+     * messages. `horizontal` is one row at every width: the first child fills it
+     * and the rest keep their natural width, aligned to the right, so the
+     * controls of stacked fields line up. `responsive` stacks below `28rem` and
+     * behaves like `horizontal` from there, measured on the field itself, so it
+     * needs no particular wrapper. In both, `Field.Content` groups a control with
+     * its messages, or a label with its description.
+     */
+    orientation?: FieldVariants['orientation'];
+    /**
+     * Marks the field as failing validation: sets `data-invalid` on the root and
+     * `aria-invalid` on the control through its context, which drives the
+     * control's destructive border. The label keeps its color by design.
+     */
+    invalid?: boolean;
+    /** Disables the control through its context and sets `data-disabled` on the root. */
+    disabled?: boolean;
+    /**
+     * Makes the control read-only through its context (focusable and copyable,
+     * not editable, still submitted) and sets `data-readonly` on the root.
+     */
+    readOnly?: boolean;
+    /**
+     * Single source of truth for a required field: the `Label` shows its
+     * asterisk and the control receives `required`, both through context.
+     */
+    required?: boolean;
+    /**
+     * `id` for the control. Generated when omitted. Set it here, not on the
+     * control, so the label and the messages keep pointing at the right element.
+     */
+    controlId?: string;
+};
+/**
+ * Wraps one label, control, description and error into a single field and
+ * wires the accessibility relationships between them. It generates the ids
+ * and shares them through context: `Label` reads `LabelContext`,
+ * `Field.Description` and `Field.Error` read `FieldContext` and register
+ * themselves so the control's `aria-describedby` lists exactly the messages on
+ * screen, and a `Field<X>` such as `FieldText` provides the control's context so
+ * the control associates itself too. Nobody passes an `id` by hand.
+ *
+ * Presentational and form-library agnostic: pass `invalid` and the error
+ * messages from whatever validates the form. Deliberately not a `role="group"`:
+ * one field is not a set of related controls, and an unnamed group only adds
+ * screen-reader verbosity. Real groupings belong to a fieldset with a legend.
+ *
+ * @summary Wraps a label, control, description and error into one field
+ *
+ * @example
+ * <Field.Root invalid={!!error} required>
+ *   <Field.Label>Email</Field.Label>
+ *   <Input type="email" />
+ *   <Field.Description>We only use this for policy documents.</Field.Description>
+ *   <Field.Error errors={[error]} />
+ * </Field.Root>
+ */
+export declare const Root: {
+    ({ className, orientation, invalid, disabled, readOnly, required, controlId: controlIdProp, ...props }: FieldRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type FieldContentProps = ComponentPropsWithRef<'div'>;
+/**
+ * Stacks parts vertically inside a `horizontal` or `responsive` field: a label
+ * with its description on the left, or a control with its messages on the
+ * right. Takes its natural width unless it comes first; give it a width, or
+ * `flex-1` to grow.
+ *
+ * @summary Stacks control, description and error beside the label
+ */
+export declare const Content: {
+    ({ className, ...props }: FieldContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type FieldLabelProps = LabelProps & {
+    /**
+     * Hint revealed on hover or focus from an info icon beside the caption. The
+     * icon is a sibling of the `<label>`, never inside it, so it keeps its own
+     * accessible name and clicking it does not focus the control.
+     */
+    tooltip?: ReactNode;
+    /** Preferred side of the tooltip. Defaults to `'top'`. */
+    tooltipSide?: TooltipProps['side'];
+};
+/**
+ * The field's caption row: a `Label` and, when `tooltip` is given, an info
+ * button beside it. The `Label` associates itself with the control through the
+ * field's context, so no `htmlFor` is passed by hand. A bare `Label` inside a
+ * field works too; use `Field.Label` when you need the tooltip.
+ *
+ * @summary The field's caption, with an optional tooltip beside it
+ *
+ * @example
+ * <Field.Label required tooltip="Issued by the IRS">Tax ID</Field.Label>
+ */
+export declare const Label: {
+    ({ tooltip, tooltipSide, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Helper text explaining what the field expects, announced through the
+ * control's `aria-describedby`. One per field: it takes the field's single
+ * description id, so put several hints in one `Field.Description`. For
+ * validation feedback use `Field.Error`.
+ *
+ * @summary Helper text explaining what the field expects
+ */
+export declare const Description: {
+    ({ className, id: idProp, ...props }: FieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Validation feedback for the field, announced as an alert when it appears.
+ * Renders nothing without a message, so it can stay mounted unconditionally;
+ * set `invalid` on `Field.Root` alongside it. Takes `children` or an `errors`
+ * array, and a form adapter can supply `errors` through `FieldContext` so a
+ * bare `<Field.Error />` renders them. One per field: it takes the field's
+ * single error id, and several errors render as one list — several, here,
+ * meaning either several entries or one entry whose `types` lists every rule
+ * that failed.
+ *
+ * @summary Validation feedback for the field, announced as an alert
+ */
+declare const FieldError: {
+    ({ className, children, errors: errorsProp, id: idProp, ...props }: FieldErrorProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { FieldError as Error };

package/src/field/field.js

@@ -0,0 +1,132 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { LabelContext as t } from "../label/context.js";
+import { Label as n } from "../label/label.js";
+import { Tooltip as r } from "../tooltip/tooltip.js";
+import { FieldContext as i, useFieldContext as a } from "./context.js";
+import { IconInfoOutline as o } from "./icons.js";
+import { tv as s } from "tailwind-variants";
+import { useCallback as c, useId as l, useLayoutEffect as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/field/field.tsx
+var m = s({
+	slots: {
+		group: "flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4",
+		root: "group/field flex w-full gap-2",
+		content: ["flex flex-col gap-2 leading-snug", "[&>:is([data-slot=label],[data-slot=field-label])+[data-slot=field-description]]:-mt-1.5"],
+		label: "flex flex-wrap items-center gap-1",
+		labelTooltip: [
+			"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm",
+			"text-icon-default-base-secondary [&_svg]:size-5 [&_path]:fill-current",
+			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary"
+		],
+		description: [
+			"text-sm leading-normal font-normal text-text-input-placeholder",
+			"group-data-[orientation=horizontal]/field:text-balance @md/field:text-balance",
+			"[&>a]:underline [&>a]:underline-offset-4"
+		],
+		error: ["text-sm font-normal text-text-input-destructive", "[&>ul]:ml-4 [&>ul]:flex [&>ul]:list-disc [&>ul]:flex-col [&>ul]:gap-1"]
+	},
+	variants: { orientation: {
+		vertical: { root: "flex-col [&>*]:w-full [&>.sr-only]:w-auto" },
+		horizontal: { root: ["flex-row items-center [&>:first-child]:flex-1", "has-[>[data-slot=field-content]]:items-start"] },
+		responsive: { root: [
+			"@container/field flex-row flex-wrap items-start",
+			"@max-md/field:[&>*]:w-full @max-md/field:[&>.sr-only]:w-auto",
+			"@md/field:[&>*]:self-center @md/field:[&>:first-child]:flex-1",
+			"@md/field:has-[>[data-slot=field-content]]:[&>*]:self-start"
+		] }
+	} },
+	defaultVariants: { orientation: "vertical" }
+}), h = m(), g = ({ className: t, ...n }) => /* @__PURE__ */ f("div", {
+	"data-slot": "field-group",
+	className: e(h.group(), t),
+	...n
+});
+g.displayName = "Field.Group";
+var _ = ({ className: n, orientation: r = "vertical", invalid: a = !1, disabled: o = !1, readOnly: s = !1, required: u = !1, controlId: p, ...m }) => {
+	let g = l(), _ = p ?? `${g}-control`, v = `${g}-description`, y = `${g}-error`, [b, x] = d([]), S = c((e) => (x((t) => t.includes(e) ? t : [...t, e]), () => x((t) => t.filter((t) => t !== e))), []);
+	return /* @__PURE__ */ f(i, {
+		value: {
+			controlId: _,
+			descriptionId: v,
+			errorId: y,
+			describedBy: [...[v, y].filter((e) => b.includes(e)), ...b.filter((e) => e !== v && e !== y)].join(" ") || void 0,
+			registerMessage: S,
+			invalid: a,
+			disabled: o,
+			readOnly: s,
+			required: u
+		},
+		children: /* @__PURE__ */ f(t, {
+			value: {
+				htmlFor: _,
+				required: u || void 0
+			},
+			children: /* @__PURE__ */ f("div", {
+				"data-slot": "field",
+				"data-orientation": r,
+				"data-invalid": a || void 0,
+				"data-disabled": o || void 0,
+				"data-readonly": s || void 0,
+				className: e(h.root({ orientation: r }), n),
+				...m
+			})
+		})
+	});
+};
+_.displayName = "Field.Root";
+var v = ({ className: t, ...n }) => /* @__PURE__ */ f("div", {
+	"data-slot": "field-content",
+	className: e(h.content(), t),
+	...n
+});
+v.displayName = "Field.Content";
+var y = ({ tooltip: e, tooltipSide: t, ...i }) => /* @__PURE__ */ p("div", {
+	"data-slot": "field-label",
+	className: h.label(),
+	children: [/* @__PURE__ */ f(n, { ...i }), e && /* @__PURE__ */ f(r, {
+		content: e,
+		side: t,
+		asChild: !0,
+		children: /* @__PURE__ */ f("button", {
+			type: "button",
+			"data-slot": "field-label-tooltip",
+			"aria-label": "More information",
+			className: h.labelTooltip(),
+			children: /* @__PURE__ */ f(o, {})
+		})
+	})]
+});
+y.displayName = "Field.Label";
+var b = ({ className: t, id: n, ...r }) => {
+	let i = a(), o = n ?? i?.descriptionId, s = i?.registerMessage;
+	return u(() => o ? s?.(o) : void 0, [s, o]), /* @__PURE__ */ f("p", {
+		"data-slot": "field-description",
+		id: o,
+		className: e(h.description(), t),
+		...r
+	});
+};
+b.displayName = "Field.Description";
+var x = (e) => {
+	let t = Object.values(e?.types ?? {}).flat().filter((e) => typeof e == "string" && e.length > 0);
+	return t.length ? t : e?.message ? [e.message] : [];
+}, S = ({ className: t, children: n, errors: r, id: i, ...o }) => {
+	let s = a(), c = i ?? s?.errorId, l = r ?? s?.errors, d = s?.registerMessage, p = [...new Set(l?.flatMap(x))], m = n ?? (p.length > 1 ? /* @__PURE__ */ f("ul", { children: p.map((e) => /* @__PURE__ */ f("li", { children: e }, e)) }) : p[0]), g = !!m;
+	return u(() => g && c ? d?.(c) : void 0, [
+		d,
+		g,
+		c
+	]), m ? /* @__PURE__ */ f("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		id: c,
+		className: e(h.error(), t),
+		...o,
+		children: m
+	}) : null;
+};
+S.displayName = "Field.Error";
+//#endregion
+export { v as Content, b as Description, S as FieldError, g as Group, y as Label, _ as Root, m as fieldRecipe };

package/src/field/icons.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * Outlined info icon for the `Field.Label` tooltip trigger. Inherits color from
+ * the surrounding text via `currentColor` when paired with `fill-current` on
+ * the `<path>`.
+ *
+ * @summary 24px outlined info icon for the field tooltip trigger
+ */
+export declare const IconInfoOutline: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/field/icons.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/field/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": !0,
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5346 16.5344C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3594 12.5343 11.2156C12.3904 11.0719 12.2122 11 11.9997 11C11.7871 11 11.609 11.0719 11.4654 11.2156C11.3218 11.3594 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4657 16.5344C11.6095 16.6781 11.7877 16.75 12.0003 16.75ZM12 9.28848C12.2288 9.28848 12.4207 9.21108 12.5755 9.05628C12.7303 8.90148 12.8077 8.70966 12.8077 8.48081C12.8077 8.25197 12.7303 8.06015 12.5755 7.90533C12.4207 7.75053 12.2288 7.67313 12 7.67313C11.7711 7.67313 11.5793 7.75053 11.4245 7.90533C11.2697 8.06015 11.1923 8.25197 11.1923 8.48081C11.1923 8.70966 11.2697 8.90148 11.4245 9.05628C11.5793 9.21108 11.7711 9.28848 12 9.28848ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29658C3.74667 7.14043 4.42342 6.13475 5.27825 5.27953C6.1331 4.4243 7.13834 3.74724 8.29398 3.24836C9.44959 2.74947 10.6844 2.50003 11.9983 2.50003C13.3122 2.50003 14.5473 2.74936 15.7034 3.24803C16.8596 3.7467 17.8652 4.42345 18.7205 5.27828C19.5757 6.13313 20.2527 7.13837 20.7516 8.29401C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7517C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.87501 17.675 6.32501C16.125 4.77501 14.2333 4.00001 12 4.00001C9.76664 4.00001 7.87498 4.77501 6.32498 6.32501C4.77498 7.87501 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+});
+//#endregion
+export { t as IconInfoOutline };

package/src/field/index.d.ts

@@ -0,0 +1,30 @@
+export { fieldRecipe } from './field';
+export { FieldContext, useFieldContext } from './context';
+export type { FieldContentProps, FieldGroupProps, FieldLabelProps, FieldRootProps, FieldVariants } from './field';
+export type { FieldContextValue, FieldDescriptionProps, FieldErrorLike, FieldErrorProps } from './context';
+export declare const Field: {
+    Root: {
+        ({ className, orientation, invalid, disabled, readOnly, required, controlId: controlIdProp, ...props }: import('./field').FieldRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ className, ...props }: import('./field').FieldGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, ...props }: import('./field').FieldContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Label: {
+        ({ tooltip, tooltipSide, ...props }: import('./field').FieldLabelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ className, id: idProp, ...props }: import('./context').FieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Error: {
+        ({ className, children, errors: errorsProp, id: idProp, ...props }: import('./context').FieldErrorProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+};

package/src/field/index.js

@@ -0,0 +1,13 @@
+import { FieldContext as e, useFieldContext as t } from "./context.js";
+import { Content as n, Description as r, FieldError as i, Group as a, Label as o, Root as s, fieldRecipe as c } from "./field.js";
+//#region src/field/index.ts
+var l = {
+	Root: s,
+	Group: a,
+	Content: n,
+	Label: o,
+	Description: r,
+	Error: i
+};
+//#endregion
+export { l as Field, e as FieldContext, c as fieldRecipe, t as useFieldContext };

package/src/field-text/field-text.d.ts

@@ -0,0 +1,28 @@
+import { FieldRootProps } from '../field';
+export type FieldTextProps = FieldRootProps;
+/**
+ * A `Field.Root` for a single-line text control: it provides `InputContext`,
+ * so the `Input` inside associates itself with the label and the messages and
+ * takes `invalid`, `required`, `disabled` and `readOnly` from the field. Every
+ * other part (`Label`, `Field.Description`, `Field.Error`) works as in any
+ * field.
+ *
+ * Form-library agnostic, and its contexts compose: a provider nested inside it
+ * can extend `InputContext` with `name`, `value`, `onChange`, `onBlur` and
+ * `ref` to control the `Input`, and `FieldContext` with the errors, on top of
+ * the wiring `FieldText` already set.
+ *
+ * @summary Field for a single-line text control, wiring the Input inside it
+ *
+ * @example
+ * <FieldText invalid={!!error} required>
+ *   <Label>Email</Label>
+ *   <Input type="email" />
+ *   <Field.Description>We only use this for policy documents.</Field.Description>
+ *   <Field.Error errors={[error]} />
+ * </FieldText>
+ */
+export declare const FieldText: {
+    ({ children, ...props }: FieldTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/field-text/field-text.js

@@ -0,0 +1,26 @@
+"use client";
+import { useFieldContext as e } from "../field/context.js";
+import { Field as t } from "../field/index.js";
+import { InputContext as n } from "../input/context.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/field-text/field-text.tsx
+var i = ({ children: t }) => {
+	let i = e();
+	return /* @__PURE__ */ r(n, {
+		value: i && {
+			id: i.controlId,
+			"aria-describedby": i.describedBy,
+			"aria-invalid": i.invalid || void 0,
+			required: i.required || void 0,
+			disabled: i.disabled || void 0,
+			readOnly: i.readOnly || void 0
+		},
+		children: t
+	});
+}, a = ({ children: e, ...n }) => /* @__PURE__ */ r(t.Root, {
+	...n,
+	children: /* @__PURE__ */ r(i, { children: e })
+});
+a.displayName = "FieldText";
+//#endregion
+export { a as FieldText };

package/src/field-text/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldText } from './field-text';
+export type { FieldTextProps } from './field-text';

package/src/field-text/index.js

@@ -0,0 +1,2 @@
+import { FieldText as e } from "./field-text.js";
+export { e as FieldText };

package/src/form/form.d.ts

@@ -0,0 +1,60 @@
+import { ComponentPropsWithRef } from 'react';
+import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
+export type FormRootProps<TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues> = Omit<ComponentPropsWithRef<'form'>, 'onSubmit' | 'noValidate'> & {
+    /**
+     * The object `useForm()` returns. `Form.Root` hands it to every form field
+     * inside through react-hook-form's `FormProvider`, so a `FormText` needs only
+     * its `name`. Create it in the component that owns the form and pass
+     * `defaultValues`: a field whose value is `undefined` on the first render
+     * starts uncontrolled. A form whose resolver transforms the values
+     * (`useForm<Input, Context, Output>`) is accepted as is.
+     */
+    methods: UseFormReturn<TFieldValues, any, TTransformedValues>;
+    /**
+     * Called with the validated values once validation passes: the resolver's
+     * output when it transforms them, the form's values otherwise. Wrapped in
+     * `methods.handleSubmit`, which prevents the native submit and focuses the
+     * first invalid field; when it is omitted the form validates and does nothing
+     * else.
+     */
+    onSubmit?: SubmitHandler<TTransformedValues>;
+    /**
+     * Accessible name of the form. A `<form>` only becomes a landmark when it is
+     * named, and screen readers list landmarks by name, so it is required.
+     */
+    'aria-label': string;
+};
+/**
+ * The `<form>` element of a react-hook-form form: it provides the `useForm()`
+ * instance to the form fields inside it (`FormText` and the other `Form<X>`
+ * components) and routes the submit through `handleSubmit`. It always renders
+ * `noValidate`, so the `required` attribute a field sets reaches assistive
+ * technology without the browser's own validation bubble getting in the way:
+ * validation is react-hook-form's, from `rules` or a resolver.
+ *
+ * Use it around any form built with the `Form<X>` fields. Without
+ * react-hook-form, render a plain `<form>` with the presentational primitives
+ * ([FieldText](?path=/docs/components-fieldtext--docs)) instead — this
+ * component is only the binding.
+ *
+ * `react-hook-form` is an optional peer dependency: the design system never
+ * bundles its own copy, because `FormProvider` and the fields must share one
+ * React context. Two copies in an app (a nested version under a workspace,
+ * say) make every field throw from `useController`; `yarn why react-hook-form`
+ * should list a single instance.
+ *
+ * @summary Form element bound to a react-hook-form instance, shared with its fields
+ *
+ * @example
+ * const methods = useForm<Values>({ defaultValues: { agencyName: '', email: '' } });
+ *
+ * <Form.Root methods={methods} onSubmit={saveAgency} aria-label="Agency profile">
+ *   <FormText name="agencyName" label="Agency name" required rules={{ required: 'Enter the agency name.' }} />
+ *   <FormText name="email" label="Email" inputProps={{ type: 'email' }} />
+ *   <Button type="submit">Save</Button>
+ * </Form.Root>
+ */
+export declare const Root: {
+    <TFieldValues extends FieldValues = FieldValues, TTransformedValues = TFieldValues>({ methods, onSubmit, ...props }: FormRootProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/form/form.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { FormProvider as t } from "react-hook-form";
+//#region src/form/form.tsx
+var n = () => {}, r = ({ methods: r, onSubmit: i, ...a }) => /* @__PURE__ */ e(t, {
+	...r,
+	children: /* @__PURE__ */ e("form", {
+		"data-slot": "form",
+		onSubmit: r.handleSubmit(i ?? n),
+		...a,
+		noValidate: !0
+	})
+});
+r.displayName = "Form.Root";
+//#endregion
+export { r as Root };

package/src/form/index.d.ts

@@ -0,0 +1,7 @@
+export type { FormRootProps } from './form';
+export declare const Form: {
+    Root: {
+        <TFieldValues extends import('react-hook-form').FieldValues = import('react-hook-form').FieldValues, TTransformedValues = TFieldValues>({ methods, onSubmit, ...props }: import('./form').FormRootProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/form/index.js

@@ -0,0 +1,5 @@
+import { Root as e } from "./form.js";
+//#region src/form/index.ts
+var t = { Root: e };
+//#endregion
+export { t as Form };