@agentero/design-system 0.27.1 → 0.28.0

package/src/field/field.d.ts

@@ -0,0 +1,214 @@
+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.
+ *
+ * @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,129 @@
+"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 = ({ 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((e) => e?.message || []))], 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;
+};
+x.displayName = "Field.Error";
+//#endregion
+export { v as Content, b as Description, x 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/input/context.d.ts

@@ -0,0 +1,17 @@
+import { InputProps } from './input';
+/**
+ * Props a container hands to every `Input` rendered inside it: the wiring
+ * (`id`, `aria-describedby`, `aria-invalid`, `required`, `disabled`,
+ * `readOnly`) and, from a form adapter, `name`, `value`, `onChange`, `onBlur`
+ * and `ref`. An `Input` with no provider above it reads `null` and uses only
+ * its own props.
+ */
+export declare const InputContext: import('react').Context<Partial<InputProps> | null>;
+/**
+ * Merges the surrounding `InputContext`, if any, under the input's own props.
+ * Own props win; handlers present on both sides are chained and
+ * `aria-describedby` ids are concatenated. In development it warns when the
+ * input carries an `id` that differs from the one the container provides,
+ * since the label would then point elsewhere.
+ */
+export declare const useInputContext: (props: InputProps) => InputProps;

package/src/input/context.js

@@ -0,0 +1,10 @@
+"use client";
+import { useMergeProps as e } from "../../lib/merge-props.js";
+import { createContext as t, use as n } from "react";
+//#region src/input/context.ts
+var r = t(null), i = (t) => {
+	let i = n(r);
+	return process.env.NODE_ENV !== "production" && i?.id && t.id && i.id !== t.id && console.warn(`Input: its id "${t.id}" differs from the one its field provides ("${i.id}"), so the label and messages point elsewhere. Set \`controlId\` on the container instead.`), e(i, t);
+};
+//#endregion
+export { r as InputContext, i as useInputContext };

package/src/input/index.d.ts

@@ -1,2 +1,3 @@
+export { InputContext, useInputContext } from './context';
 export { Input, inputRecipe } from './input';
 export type { InputProps, InputSize, InputVariants } from './input';

package/src/input/index.js

@@ -1,2 +1,3 @@
-import { Input as e, inputRecipe as t } from "./input.js";
-export { e as Input, t as inputRecipe };
+import { InputContext as e, useInputContext as t } from "./context.js";
+import { Input as n, inputRecipe as r } from "./input.js";
+export { n as Input, e as InputContext, r as inputRecipe, t as useInputContext };

package/src/input/input.d.ts

@@ -82,18 +82,18 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
  * [Label](?path=/docs/components-label--docs) so the control has an accessible
  * name.
  *
- * It is deliberately self-contained: it renders the props it is given and
- * knows nothing about form fields, form libraries, or surrounding layout.
- * Wiring (`id`, `aria-invalid`, `aria-describedby`) arrives as plain props, so
- * a field wrapper can inject them and standalone usage can set them by hand.
- * There is no `status` prop — mark the control `aria-invalid` and the
+ * When a container provides `InputContext`, the input takes its wiring (`id`,
+ * `aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from
+ * it with nothing passed by hand; `FieldText` is one such container. Standalone it
+ * renders exactly the props it is given, and its own props always win over the
+ * context. There is no `status` prop — mark the control `aria-invalid` and the
  * destructive border follows.
  *
  * Do not use Input for multi-line text; that is TextArea's job. It also has no
  * slots for leading or trailing addons — an input with a currency prefix or a
  * unit suffix belongs in an input group, not here.
  *
- * @summary Base single-line text control, unaware of fields and form libraries
+ * @summary Base single-line text control that takes its wiring from InputContext
  *
  * @example
  * <Label htmlFor="email">Email</Label>
@@ -104,6 +104,6 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
  * <span id="email-error">Enter a valid email address.</span>
  */
 export declare const Input: {
-    ({ className, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    (props: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/input/input.js

@@ -1,8 +1,10 @@
+"use client";
 import { cn as e } from "../../lib/utils.js";
-import { tv as t } from "tailwind-variants";
-import { jsx as n } from "react/jsx-runtime";
+import { useInputContext as t } from "./context.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/input/input.tsx
-var r = t({
+var i = n({
 	base: [
 		"box-border w-full min-w-0 appearance-none rounded-md px-4 shadow-sm",
 		"border border-solid border-border-input-default bg-bg-input-normal text-text-input-normal",
@@ -24,12 +26,15 @@ var r = t({
 		lg: "h-12 rounded-lg text-base"
 	} },
 	defaultVariants: { size: "md" }
-}), i = ({ className: t, size: i, ...a }) => /* @__PURE__ */ n("input", {
-	"data-slot": "input",
-	"data-size": i,
-	className: e(r({ size: i }), t),
-	...a
-});
-i.displayName = "Input";
+}), a = (n) => {
+	let { className: a, size: o, ...s } = t(n);
+	return /* @__PURE__ */ r("input", {
+		"data-slot": "input",
+		"data-size": o,
+		className: e(i({ size: o }), a),
+		...s
+	});
+};
+a.displayName = "Input";
 //#endregion
-export { i as Input, r as inputRecipe };
+export { a as Input, i as inputRecipe };

package/src/label/context.d.ts

@@ -0,0 +1,13 @@
+import { LabelProps } from './label';
+/**
+ * Props a container hands to every `Label` rendered inside it, typically
+ * `htmlFor` (the control's id) and `required`. A `Label` with no provider above
+ * it reads `null` and uses only its own props.
+ */
+export declare const LabelContext: import('react').Context<Partial<LabelProps> | null>;
+/**
+ * Merges the surrounding `LabelContext`, if any, under the label's own props.
+ * Own props win, so an explicit `htmlFor` or `required={false}` overrides
+ * whatever the container provides.
+ */
+export declare const useLabelContext: (props: LabelProps) => LabelProps;

package/src/label/context.js

@@ -0,0 +1,7 @@
+"use client";
+import { useMergeProps as e } from "../../lib/merge-props.js";
+import { createContext as t, use as n } from "react";
+//#region src/label/context.ts
+var r = t(null), i = (t) => e(n(r), t);
+//#endregion
+export { r as LabelContext, i as useLabelContext };

package/src/label/index.d.ts

@@ -1,2 +1,3 @@
+export { LabelContext, useLabelContext } from './context';
 export { Label, labelRecipe } from './label';
 export type { LabelProps, LabelVariants } from './label';

package/src/label/index.js

@@ -1,2 +1,3 @@
-import { Label as e, labelRecipe as t } from "./label.js";
-export { e as Label, t as labelRecipe };
+import { LabelContext as e, useLabelContext as t } from "./context.js";
+import { Label as n, labelRecipe as r } from "./label.js";
+export { n as Label, e as LabelContext, r as labelRecipe, t as useLabelContext };

package/src/label/label.d.ts

@@ -49,6 +49,11 @@ export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root> & Lab
  * button) inside a `<label>` gives that element the label's accessible name and
  * makes a click focus the control — render it as a sibling instead.
  *
+ * When a container provides `LabelContext`, the label takes `htmlFor` and
+ * `required` from it and associates itself with the control without an explicit
+ * `htmlFor`; `Field.Root` is one such container. Standalone it behaves as a
+ * plain label. Its own props always win over the context.
+ *
  * @summary Accessible caption for a form control
  *
  * @example
@@ -56,6 +61,6 @@ export type LabelProps = ComponentPropsWithRef<typeof LabelPrimitive.Root> & Lab
  * <Input id="phone" type="tel" />
  */
 export declare const Label: {
-    ({ className, children, optional, required, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    (props: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };