@agentero/design-system 0.27.1 → 0.28.0

package/src/alert/alert.js

@@ -3,8 +3,8 @@ import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../button/button.js";
 import { IconCheckCircle as n, IconClose as r, IconErrorOutline as i, IconInfoOutline as a, IconStar as o, IconWarning as s } from "./icons.js";
 import { tv as c } from "tailwind-variants";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Children as d, createContext as f, isValidElement as p, use as m, useId as h } from "react";
+import { Children as l, createContext as u, isValidElement as d, use as f, useId as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/alert/alert.tsx
 var g = c({
 	slots: {
@@ -193,8 +193,8 @@ var g = c({
 		size: "sm",
 		ghost: !1
 	}
-}), _ = f(null), v = () => {
-	let e = m(_);
+}), _ = u(null), v = () => {
+	let e = f(_);
 	if (!e) throw Error("useAlert must be used within an Alert");
 	return e;
 }, y = {
@@ -208,7 +208,7 @@ var g = c({
 	playful: a
 }, b = ({ className: t, children: n, ...r }) => {
 	let { slotsStyles: i, titleId: a } = v();
-	return /* @__PURE__ */ l("h3", {
+	return /* @__PURE__ */ m("h3", {
 		id: a,
 		"data-slot": "alert-title",
 		...r,
@@ -217,7 +217,7 @@ var g = c({
 	});
 }, x = ({ className: t, children: n, ...r }) => {
 	let { slotsStyles: i } = v();
-	return /* @__PURE__ */ l("p", {
+	return /* @__PURE__ */ m("p", {
 		"data-slot": "alert-paragraph",
 		...r,
 		className: e(i.paragraph(), t),
@@ -225,7 +225,7 @@ var g = c({
 	});
 }, S = ({ html: t, className: n, ...r }) => {
 	let { slotsStyles: i } = v();
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ m("div", {
 		"data-slot": "alert-paragraph",
 		...r,
 		className: e(i.paragraph(), n),
@@ -233,71 +233,71 @@ var g = c({
 	});
 }, C = ({ className: t, children: n, ...r }) => {
 	let { slotsStyles: i } = v();
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ m("div", {
 		"data-slot": "alert-content",
 		...r,
 		className: e(i.content(), t),
 		children: n
 	});
-}, w = ({ className: t, children: n, ...r }) => /* @__PURE__ */ l("div", {
+}, w = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("div", {
 	"data-slot": "alert-actions",
 	...r,
 	className: e("ml-auto flex flex-col items-center justify-center gap-2", t),
 	children: n
-}), T = ({ className: t, children: n, ...r }) => /* @__PURE__ */ l("div", {
+}), T = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("div", {
 	...r,
 	className: e("[&_svg]:h-16! [&_svg]:w-16!", t),
 	children: n
-}), E = ({ className: n, ...r }) => /* @__PURE__ */ l(t, {
+}), E = ({ className: n, ...r }) => /* @__PURE__ */ m(t, {
 	variant: "link",
 	className: e("text-current", n),
 	...r
-}), D = (e, t) => d.toArray(e).some((e) => {
-	if (!p(e)) return !1;
+}), D = (e, t) => l.toArray(e).some((e) => {
+	if (!d(e)) return !1;
 	if (e.type === t) return !0;
 	let n = e.props.children;
 	return n ? D(n, t) : !1;
-}), O = ({ children: n, onDismiss: i, hasIcon: a = !0, icon: o, color: s = "neutral", size: c = "sm", ghost: d = !1, className: f, ...p }) => {
-	let m = g({
+}), O = ({ children: n, onDismiss: i, hasIcon: a = !0, icon: o, color: s = "neutral", size: c = "sm", ghost: l = !1, className: u, ...d }) => {
+	let f = g({
 		color: s,
 		size: c,
-		ghost: d
-	}), v = h(), C = `${v}-title`, w = `${v}-desc`, T = D(n, b), E = D(n, x) || D(n, S), O = o ?? y[s], k = o ? !0 : a;
-	return /* @__PURE__ */ l(_, {
+		ghost: l
+	}), v = p(), C = `${v}-title`, w = `${v}-desc`, T = D(n, b), E = D(n, x) || D(n, S), O = o ?? y[s], k = o ? !0 : a;
+	return /* @__PURE__ */ m(_, {
 		value: {
 			size: c,
-			slotsStyles: m,
+			slotsStyles: f,
 			titleId: C,
 			descId: w
 		},
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ h("div", {
 			role: "alert",
 			"aria-labelledby": T ? C : void 0,
 			"aria-describedby": E ? w : void 0,
 			"data-slot": "alert-root",
-			...p,
-			className: e(m.root(), f),
+			...d,
+			className: e(f.root(), u),
 			children: [
-				i && /* @__PURE__ */ l("div", {
+				i && /* @__PURE__ */ m("div", {
 					className: e("order-last ml-auto self-center", {
 						"pl-2.5": c === "sm",
 						"pl-0.5": c === "md"
 					}),
-					children: /* @__PURE__ */ l(t, {
+					children: /* @__PURE__ */ m(t, {
 						variant: "ghost",
 						size: c,
 						iconOnly: !0,
 						"aria-label": "Dismiss",
 						className: "text-current",
 						onClick: i,
-						children: /* @__PURE__ */ l(r, { className: "[&_path]:fill-current" })
+						children: /* @__PURE__ */ m(r, { className: "[&_path]:fill-current" })
 					})
 				}),
-				k && /* @__PURE__ */ l(O, {
-					className: m.icon(),
+				k && /* @__PURE__ */ m(O, {
+					className: f.icon(),
 					"data-slot": "alert-icon"
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ m("div", {
 					id: w,
 					className: "flex w-full items-center gap-10",
 					children: n

package/src/avatar/avatar.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { createContext as i, use as a } from "react";
+import { createContext as n, use as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-avatar";
 //#region src/avatar/avatar.tsx
 var s = t({
@@ -126,43 +126,43 @@ var s = t({
 		variant: "circle",
 		type: "photo"
 	}
-}), c = i(null), l = () => {
-	let e = a(c);
+}), c = n(null), l = () => {
+	let e = r(c);
 	if (!e) throw Error("useAvatar must be used within an AvatarProvider");
 	return e;
-}, u = ({ size: t, variant: r, type: i, ...a }) => {
+}, u = ({ size: t, variant: n, type: r, ...a }) => {
 	let l = s({
 		size: t,
-		variant: r,
-		type: i
+		variant: n,
+		type: r
 	});
-	return /* @__PURE__ */ n(c, {
+	return /* @__PURE__ */ i(c, {
 		value: {
 			size: t,
-			variant: r,
-			type: i,
+			variant: n,
+			type: r,
 			slotsStyles: l
 		},
-		children: /* @__PURE__ */ n(o.Root, {
+		children: /* @__PURE__ */ i(o.Root, {
 			...a,
 			className: e(l.root(), a.className)
 		})
 	});
 }, d = (t) => {
-	let { slotsStyles: r } = l();
-	return /* @__PURE__ */ n(o.Image, {
+	let { slotsStyles: n } = l();
+	return /* @__PURE__ */ i(o.Image, {
 		...t,
-		className: e(r.image(), t.className)
+		className: e(n.image(), t.className)
 	});
 }, f = (t) => {
-	let { slotsStyles: r } = l();
-	return /* @__PURE__ */ n(o.Fallback, {
+	let { slotsStyles: n } = l();
+	return /* @__PURE__ */ i(o.Fallback, {
 		...t,
-		className: e(r.fallback(), t.className)
+		className: e(n.fallback(), t.className)
 	});
-}, p = ({ alt: e, src: t, fallback: i, colorize: a, size: o, variant: s, type: c, ref: l, ...p }) => {
-	let m = a ? g(a) : void 0;
-	return /* @__PURE__ */ r(u, {
+}, p = ({ alt: e, src: t, fallback: n, colorize: r, size: o, variant: s, type: c, ref: l, ...p }) => {
+	let m = r ? g(r) : void 0;
+	return /* @__PURE__ */ a(u, {
 		...p,
 		ref: l,
 		size: o,
@@ -172,10 +172,10 @@ var s = t({
 			...m,
 			...p.style
 		},
-		children: [/* @__PURE__ */ n(d, {
+		children: [/* @__PURE__ */ i(d, {
 			alt: e,
 			src: t
-		}), /* @__PURE__ */ n(f, { children: i })]
+		}), /* @__PURE__ */ i(f, { children: n })]
 	});
 }, m = [
 	{

package/src/avatar-group/avatar-group.js

@@ -1,8 +1,8 @@
 import { cn as e } from "../../lib/utils.js";
 import { Avatar as t } from "../avatar/avatar.js";
 import { tv as n } from "tailwind-variants";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Children as a, cloneElement as o, isValidElement as s } from "react";
+import { Children as r, cloneElement as i, isValidElement as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/avatar-group/avatar-group.tsx
 var c = n({
 	slots: {
@@ -21,17 +21,17 @@ var c = n({
 	} },
 	defaultVariants: { size: "md" }
 }), l = ({ children: n, max: l = 3, size: u = "md", variant: d, className: f, ref: p, ...m }) => {
-	let h = c({ size: u }), g = h.item(), _ = a.toArray(n).filter(s), v = _.slice(0, Math.max(0, l)), y = _.length - v.length;
-	return /* @__PURE__ */ i("div", {
+	let h = c({ size: u }), g = h.item(), _ = r.toArray(n).filter(a), v = _.slice(0, Math.max(0, l)), y = _.length - v.length;
+	return /* @__PURE__ */ s("div", {
 		ref: p,
 		"data-slot": "avatar-group",
 		...m,
 		className: e(h.root(), f),
-		children: [v.map((t) => o(t, {
+		children: [v.map((t) => i(t, {
 			size: u,
 			variant: d,
 			className: e(g, t.props.className)
-		})), y > 0 && /* @__PURE__ */ r(t, {
+		})), y > 0 && /* @__PURE__ */ o(t, {
 			"data-slot": "avatar-group-overflow",
 			size: u,
 			variant: d,

package/src/button/button.js

@@ -1,7 +1,7 @@
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i, isValidElement as a } from "react";
+import { Children as n, isValidElement as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { Slot as o, Slottable as s } from "@radix-ui/react-slot";
 //#region src/button/button.tsx
 var c = t({
@@ -242,13 +242,13 @@ var c = t({
 		size: "sm",
 		align: "center"
 	}
-}), l = () => /* @__PURE__ */ n("span", {
+}), l = () => /* @__PURE__ */ i("span", {
 	"aria-label": "loading",
 	role: "status",
 	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
 }), u = ({ children: t, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, disabled: v, iconOnly: y, ref: b, className: x, ...S }) => {
-	let C = u ? !!y : i.toArray(t).every((e) => a(e)), w = v || m;
-	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && a(t) && i.toArray(t.props.children).some((e) => !a(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
+	let C = u ? !!y : n.toArray(t).every((e) => r(e)), w = v || m;
+	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && r(t) && n.toArray(t.props.children).some((e) => !r(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
 	let T = e(c({
 		variant: d,
 		size: f,
@@ -259,7 +259,7 @@ var c = t({
 		align: g,
 		fitContent: _
 	}), x);
-	return /* @__PURE__ */ r(u ? o : "button", {
+	return /* @__PURE__ */ a(u ? o : "button", {
 		"data-slot": "button",
 		...u ? {
 			"aria-disabled": w || void 0,
@@ -268,7 +268,7 @@ var c = t({
 		...S,
 		className: T,
 		ref: b,
-		children: [m && /* @__PURE__ */ n(l, {}), u ? /* @__PURE__ */ n(s, { children: t }) : t]
+		children: [m && /* @__PURE__ */ i(l, {}), u ? /* @__PURE__ */ i(s, { children: t }) : t]
 	});
 };
 //#endregion

package/src/data-table/data-table.js

@@ -4,34 +4,34 @@ import { Pagination as t } from "../pagination/pagination.js";
 import { Table as n } from "../table/index.js";
 import { IconArrowUpward as r, IconSwapVert as i } from "./icons.js";
 import { tv as a } from "tailwind-variants";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Fragment as l, createContext as u, use as d, useRef as f } from "react";
+import { Fragment as o, createContext as s, use as c, useRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { flexRender as p, getCoreRowModel as m, useReactTable as h } from "@tanstack/react-table";
 //#region src/data-table/data-table.tsx
-var g = u(null), _ = () => {
-	let e = d(g);
+var g = s(null), _ = () => {
+	let e = c(g);
 	if (!e) throw Error("useDataTable must be used within a DataTable.Root");
 	return e;
-}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ s(g, {
+}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ d(g, {
 	value: {
 		table: h({
 			...a,
 			getCoreRowModel: m()
 		}),
 		isLoading: t,
-		scrollRef: f(null),
+		scrollRef: l(null),
 		onRowClick: n,
 		rowHref: r,
 		linkComponent: i
 	},
-	children: /* @__PURE__ */ s("div", {
+	children: /* @__PURE__ */ d("div", {
 		"data-slot": "data-table-root",
 		className: "flex min-h-0 flex-1 flex-col",
 		children: e
 	})
 });
 v.displayName = "DataTable.Root";
-var y = ({ children: e }) => /* @__PURE__ */ s("div", {
+var y = ({ children: e }) => /* @__PURE__ */ d("div", {
 	"data-slot": "data-table-toolbar",
 	role: "toolbar",
 	className: "flex gap-2 border-b border-border-default-base-primary px-4 py-3",
@@ -57,54 +57,54 @@ var b = a({
 			left: "justify-start"
 		}
 	}
-}), S = (e) => !!e.closest("a, button, [role=\"menu\"]"), C = ({ children: t = /* @__PURE__ */ s(w, {}), size: a = "md", sticky: u = "header", embed: d = !0, enclosed: f = !1 }) => {
+}), S = (e) => !!e.closest("a, button, [role=\"menu\"]"), C = ({ children: t = /* @__PURE__ */ d(w, {}), size: a = "md", sticky: s = "header", embed: c = !0, enclosed: l = !1 }) => {
 	let { table: m, isLoading: h, scrollRef: g, onRowClick: v, rowHref: y, linkComponent: C } = _(), T = m.getAllColumns().length;
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ d("div", {
 		"data-slot": "data-table-loading-overlay",
 		className: e("flex min-h-0 flex-1 flex-col transition-opacity duration-150", h && "opacity-50"),
-		children: /* @__PURE__ */ c(n.Root, {
+		children: /* @__PURE__ */ f(n.Root, {
 			size: a,
-			sticky: u,
-			embed: d,
-			enclosed: f,
+			sticky: s,
+			embed: c,
+			enclosed: l,
 			ref: g,
-			children: [/* @__PURE__ */ s(n.Head, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ s(n.Row, { children: e.headers.map((e) => {
-				let t = e.column.columnDef.meta, a = e.column.getCanSort(), l = e.column.getIsSorted(), u = t?.style?.textAlign === "right" || t?.className?.includes("text-right") ? "right" : "left", d = e.isPlaceholder ? null : /* @__PURE__ */ c(o, { children: [p(e.column.columnDef.header, e.getContext()), a && /* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ d(n.Head, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ d(n.Row, { children: e.headers.map((e) => {
+				let t = e.column.columnDef.meta, a = e.column.getCanSort(), o = e.column.getIsSorted(), s = t?.style?.textAlign === "right" || t?.className?.includes("text-right") ? "right" : "left", c = e.isPlaceholder ? null : /* @__PURE__ */ f(u, { children: [p(e.column.columnDef.header, e.getContext()), a && /* @__PURE__ */ d("span", {
 					className: "size-4",
-					children: l ? /* @__PURE__ */ s(r, { className: b({ direction: l }) }) : /* @__PURE__ */ s(i, { className: "size-4" })
+					children: o ? /* @__PURE__ */ d(r, { className: b({ direction: o }) }) : /* @__PURE__ */ d(i, { className: "size-4" })
 				})] });
-				return /* @__PURE__ */ s(n.Header, {
+				return /* @__PURE__ */ d(n.Header, {
 					...t,
-					"aria-sort": a ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
-					children: a ? /* @__PURE__ */ s("button", {
+					"aria-sort": a ? o === "asc" ? "ascending" : o === "desc" ? "descending" : "none" : void 0,
+					children: a ? /* @__PURE__ */ d("button", {
 						type: "button",
 						className: x({
 							canSort: !0,
-							align: u
+							align: s
 						}),
 						onClick: e.column.getToggleSortingHandler(),
 						title: e.column.getNextSortingOrder() === "asc" ? "Sort ascending" : e.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort",
-						children: d
-					}) : /* @__PURE__ */ s("div", {
+						children: c
+					}) : /* @__PURE__ */ d("div", {
 						className: x({
 							canSort: !1,
-							align: u
+							align: s
 						}),
-						children: d
+						children: c
 					})
 				}, e.id);
-			}) }, e.id)) }), /* @__PURE__ */ s(n.Body, { children: m.getRowModel().rows.length ? m.getRowModel().rows.map((t) => {
+			}) }, e.id)) }), /* @__PURE__ */ d(n.Body, { children: m.getRowModel().rows.length ? m.getRowModel().rows.map((t) => {
 				let r = y?.(t.original), i = !!v || !!r;
-				return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(n.Row, {
+				return /* @__PURE__ */ d(o, { children: /* @__PURE__ */ d(n.Row, {
 					className: e("has-aria-expanded:bg-bg-default-base-secondary", i && "cursor-pointer"),
 					onClick: i ? (e) => {
 						S(e.target) || !e.currentTarget.contains(e.target) || (v ? v(t.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
 					} : void 0,
 					children: t.getVisibleCells().map((e, t) => {
 						let i = e.column.columnDef.meta;
-						return /* @__PURE__ */ c(n.Cell, {
+						return /* @__PURE__ */ f(n.Cell, {
 							...i,
-							children: [t === 0 && r && /* @__PURE__ */ s(C, {
+							children: [t === 0 && r && /* @__PURE__ */ d(C, {
 								href: r,
 								"data-row-link": !0,
 								className: "hidden",
@@ -114,9 +114,9 @@ var b = a({
 						}, e.id);
 					})
 				}) }, t.id);
-			}) : h ? null : /* @__PURE__ */ s(n.Row, { children: /* @__PURE__ */ s(n.Cell, {
+			}) : h ? null : /* @__PURE__ */ d(n.Row, { children: /* @__PURE__ */ d(n.Cell, {
 				colSpan: T,
-				children: /* @__PURE__ */ s("div", {
+				children: /* @__PURE__ */ d("div", {
 					"data-slot": "table-empty-state",
 					className: "whitespace-normal",
 					children: t
@@ -126,13 +126,13 @@ var b = a({
 	});
 };
 C.displayName = "DataTable.Table";
-var w = () => /* @__PURE__ */ s("div", {
+var w = () => /* @__PURE__ */ d("div", {
 	className: "mb-6 flex flex-col items-center gap-4",
-	children: /* @__PURE__ */ s("div", {
+	children: /* @__PURE__ */ d("div", {
 		className: "text-lg",
-		children: /* @__PURE__ */ s("b", { children: "No results." })
+		children: /* @__PURE__ */ d("b", { children: "No results." })
 	})
-}), T = ({ children: e }) => /* @__PURE__ */ s("div", {
+}), T = ({ children: e }) => /* @__PURE__ */ d("div", {
 	"data-slot": "data-table-pagination",
 	className: "flex justify-end border-t border-border-default-base-primary px-6 py-3",
 	children: e
@@ -140,7 +140,7 @@ var w = () => /* @__PURE__ */ s("div", {
 T.displayName = "DataTable.Footer";
 var E = (e) => {
 	let { scrollRef: n } = _();
-	return /* @__PURE__ */ s(t, {
+	return /* @__PURE__ */ d(t, {
 		...e,
 		onPageChange: (t) => {
 			n.current?.scrollTo({ top: 0 }), e.onPageChange(t);

package/src/field/context.d.ts

@@ -0,0 +1,62 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+/** A validation error. Structurally matches a react-hook-form `FieldError`. */
+export type FieldErrorLike = {
+    message?: string;
+} | undefined;
+/**
+ * State of the surrounding `Field.Root`, shared with the Field family
+ * (`Field.Description`, `Field.Error`) and with controls that have no context
+ * of their own and connect themselves by hand.
+ */
+export type FieldContextValue = {
+    /** `id` the control must carry so the label points at it. */
+    controlId: string;
+    /** `id` the `Field.Description` takes by default. One description per field. */
+    descriptionId: string;
+    /** `id` the `Field.Error` takes by default. One error element per field. */
+    errorId: string;
+    /**
+     * Ids of the messages currently rendered, ready for the control's
+     * `aria-describedby`. `undefined` while there is none, so the attribute is
+     * not rendered and never points at an element that does not exist.
+     */
+    describedBy: string | undefined;
+    /**
+     * Adds a message element to `describedBy` and returns the function that
+     * removes it. `Field.Description` and `Field.Error` call it from a layout
+     * effect; a custom message element can do the same.
+     */
+    registerMessage: (id: string) => () => void;
+    invalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    /**
+     * Errors a bare `<Field.Error />` renders. `Field.Root` leaves it unset; a
+     * form adapter re-provides the context with the field's validation errors.
+     */
+    errors?: FieldErrorLike[];
+};
+export declare const FieldContext: import('react').Context<FieldContextValue | null>;
+/**
+ * Reads the surrounding `Field.Root`. Returns `null` outside a field, so a part
+ * or a control can read it and still work standalone. Reach for it in a control
+ * that has no context of its own; the design system's controls read theirs.
+ *
+ * @example
+ * const field = useFieldContext();
+ * <input id={field?.controlId} aria-describedby={field?.describedBy} aria-invalid={field?.invalid || undefined} />
+ */
+export declare const useFieldContext: () => FieldContextValue | null;
+/** Props of `Field.Description`: a `<p>`. One per field. */
+export type FieldDescriptionProps = ComponentPropsWithRef<'p'>;
+export type FieldErrorProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    /** Message to render. Takes precedence over `errors`. */
+    children?: ReactNode;
+    /**
+     * Errors to render, de-duplicated by message: one line for a single error, a
+     * bulleted list for several. Shaped to take a form library's error objects as
+     * they come. Falls back to the `errors` in `FieldContext`.
+     */
+    errors?: FieldErrorLike[];
+};

package/src/field/context.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext as e, use as t } from "react";
+//#region src/field/context.ts
+var n = e(null), r = () => t(n);
+//#endregion
+export { n as FieldContext, r as useFieldContext };