themelia-ui 2.0.1 → 3.0.0

package/dist/layout/sidebar.js

@@ -1,20 +1,17 @@
 "use client";
-import "../core.css";
-import "../css/sidebar.css";
 import { t as e } from "../cx--CBrhWH0.js";
 import { o as t } from "../typography-BkxEiwQ1.js";
-import { g as n, r, t as i } from "../dropdown-menu-BdgB__AC.js";
-import { n as a } from "../action-menu-BrMchcyt.js";
-import { d as o } from "../display-Dehpw83R.js";
-import { I as s } from "../primitives-BnXNg-Kr.js";
-import { a as c, c as l, r as u } from "../avatar-C30TNJoy.js";
-import { n as d, r as f, t as p } from "../navigation-Db1UQSIU.js";
-import { E as m, _ as h, b as g, c as _, d as v, g as y, h as b, i as x, m as S, n as C, o as w, p as T, r as E, s as ee, t as te, v as ne, y as re } from "../sidebar-BMgoyRxy.js";
-import { t as D } from "../layout.types-CTDrZCGP.js";
-import { ChevronRightIcon as ie, ChevronsUpDownIcon as O, ExternalLinkIcon as k, LogOutIcon as A, SettingsIcon as j, UserIcon as M } from "lucide-react";
-import { isValidElement as N, useMemo as P, useState as ae } from "react";
-import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
-var R = {
+import { g as n, r, t as i } from "../dropdown-menu-TyNLCLML.js";
+import { n as a } from "../action-menu-BNLURfMK.js";
+import { d as o } from "../display-B3Q17h5z.js";
+import { I as s } from "../primitives-D0bdDozz.js";
+import { a as c, c as l, r as u } from "../avatar-CS7zow2q.js";
+import { i as d, n as f, r as p, t as m } from "../navigation-B4eUU9E8.js";
+import { E as h, _ as g, b as _, c as v, d as y, g as b, h as x, i as S, m as C, n as w, o as T, p as E, r as ee, s as te, t as ne, v as re, y as ie } from "../sidebar-D0N6ckJL.js";
+import { ChevronRightIcon as ae, ChevronsUpDownIcon as D, ExternalLinkIcon as O, LogOutIcon as k, SettingsIcon as A, UserIcon as j } from "lucide-react";
+import { isValidElement as M, useMemo as N, useState as oe } from "react";
+import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
+var L = {
 	disclosure: "layout-sidebar__disclosure___Nl8Bw",
 	logo: "layout-sidebar__logo___Ft6h3",
 	workspaceTrigger: "layout-sidebar__workspaceTrigger___wcqoM",
@@ -26,20 +23,20 @@ var R = {
 };
 //#endregion
 //#region src/components/layout/sidebar/partials/sidebar-logo.tsx
-function z({ logo: t, collapsedLogo: n = null, className: r }) {
-	let { state: i } = m(), a = i === "collapsed" ? n : t;
-	return a ? /* @__PURE__ */ I("div", {
+function R({ logo: t, collapsedLogo: n = null, className: r }) {
+	let { state: i } = h(), a = i === "collapsed" ? n : t;
+	return a ? /* @__PURE__ */ F("div", {
 		"data-slot": "sidebar-logo",
-		className: e("sidebar-logo--component", R.logo, r),
+		className: e("sidebar-logo--component", L.logo, r),
 		children: a
 	}) : null;
 }
 //#endregion
 //#region src/components/layout/sidebar/sidebar.strings.ts
-var B = {
+var z = {
 	select: "Switch workspace",
 	label: "Workspaces"
-}, V = {
+}, B = {
 	profile: "Profile",
 	settings: "Settings",
 	logout: "Log out",
@@ -47,93 +44,93 @@ var B = {
 };
 //#endregion
 //#region src/components/layout/sidebar/partials/sidebar-user.tsx
-function H({ user: e, customContent: o, onProfile: d, onSettings: f, onLogout: p, strings: h, renderTrigger: g }) {
+function V({ user: e, customContent: o, onProfile: d, onSettings: f, onLogout: p, strings: m, renderTrigger: g }) {
 	let _ = {
-		...V,
-		...h
-	}, { state: y, isMobile: x } = m(), C = x || y !== "collapsed" ? "top" : "right", w = s(e.name, { strategy: "first-words" }), T = [
+		...B,
+		...m
+	}, { state: v, isMobile: b } = h(), S = b || v !== "collapsed" ? "top" : "right", w = s(e.name, { strategy: "first-words" }), T = [
 		...d ? [{
 			id: "profile",
 			label: _.profile,
-			icon: M,
+			icon: j,
 			onClick: d
 		}] : [],
 		...f ? [{
 			id: "settings",
 			label: _.settings,
-			icon: j,
+			icon: A,
 			onClick: f
 		}] : [],
 		...p ? [{
 			id: "logout",
 			label: _.logout,
-			icon: A,
+			icon: k,
 			onClick: p,
 			...d || f ? { group: !0 } : null
 		}] : []
-	], E = /* @__PURE__ */ I(S, {
+	], E = /* @__PURE__ */ F(C, {
 		size: "lg",
-		className: R.userTrigger,
-		"aria-label": y === "collapsed" ? `${_.trigger}, ${e.name}` : void 0,
-		children: g?.(e) ?? /* @__PURE__ */ L(F, { children: [
-			/* @__PURE__ */ L(u, {
+		className: L.userTrigger,
+		"aria-label": v === "collapsed" ? `${_.trigger}, ${e.name}` : void 0,
+		children: g?.(e) ?? /* @__PURE__ */ I(P, { children: [
+			/* @__PURE__ */ I(u, {
 				size: "sm",
-				children: [!!e.avatar && /* @__PURE__ */ I(l, {
+				children: [!!e.avatar && /* @__PURE__ */ F(l, {
 					src: e.avatar,
 					alt: ""
-				}), /* @__PURE__ */ I(c, { children: w })]
+				}), /* @__PURE__ */ F(c, { children: w })]
 			}),
-			/* @__PURE__ */ L("span", {
-				className: R.userIdentity,
-				children: [/* @__PURE__ */ I(t, {
+			/* @__PURE__ */ I("span", {
+				className: L.userIdentity,
+				children: [/* @__PURE__ */ F(t, {
 					tag: "span",
 					weight: "medium",
 					children: e.name
-				}), !!e.email && /* @__PURE__ */ I(t, {
+				}), !!e.email && /* @__PURE__ */ F(t, {
 					tag: "span",
 					size: "xs",
 					type: "secondary",
 					children: e.email
 				})]
 			}),
-			/* @__PURE__ */ I(O, {
+			/* @__PURE__ */ F(D, {
 				"aria-hidden": !0,
-				className: R.userChevron
+				className: L.userChevron
 			})
 		] })
 	});
-	return /* @__PURE__ */ I(v, {
+	return /* @__PURE__ */ F(y, {
 		className: "sidebar-user--component",
-		children: /* @__PURE__ */ I(b, { children: o ? /* @__PURE__ */ L(i, { children: [/* @__PURE__ */ I(n, { render: E }), /* @__PURE__ */ I(r, {
+		children: /* @__PURE__ */ F(x, { children: o ? /* @__PURE__ */ I(i, { children: [/* @__PURE__ */ F(n, { render: E }), /* @__PURE__ */ F(r, {
 			align: "end",
-			side: C,
+			side: S,
 			children: o
-		})] }) : /* @__PURE__ */ I(a, {
+		})] }) : /* @__PURE__ */ F(a, {
 			actions: T,
 			align: "end",
-			side: C,
+			side: S,
 			renderTrigger: E
 		}) })
 	});
 }
 //#endregion
 //#region src/components/layout/sidebar/partials/sidebar-workspace.tsx
-function U({ logo: e, collapsedLogo: t, workspaceLinks: n, renderLink: r, strings: i, contentClassName: s }) {
+function H({ logo: e, collapsedLogo: t, workspaceLinks: n, renderLink: r, strings: i, contentClassName: s }) {
 	let c = {
-		...B,
+		...z,
 		...i
-	}, l = D({ renderLink: r }), { state: u } = m(), d = u === "collapsed", f = d ? t ?? e : e, p = n.map((e, t) => ({
+	}, l = p(r), { state: u } = h(), d = u === "collapsed", f = d ? t ?? e : e, m = n.map((e, t) => ({
 		id: e.url || String(t),
 		label: e.label,
-		icon: e.icon ?? k,
+		icon: e.icon ?? O,
 		href: e.url,
 		external: e.external ?? !0,
 		group: c.label
 	}));
-	return /* @__PURE__ */ I(v, {
+	return /* @__PURE__ */ F(y, {
 		className: "sidebar-workspace--component",
-		children: /* @__PURE__ */ I(b, { children: /* @__PURE__ */ I(a, {
-			actions: p,
+		children: /* @__PURE__ */ F(x, { children: /* @__PURE__ */ F(a, {
+			actions: m,
 			align: "start",
 			side: "right",
 			contentClassName: s,
@@ -142,18 +139,18 @@ function U({ logo: e, collapsedLogo: t, workspaceLinks: n, renderLink: r, string
 				...t,
 				children: e ?? null
 			}),
-			renderTrigger: /* @__PURE__ */ L(S, {
+			renderTrigger: /* @__PURE__ */ I(C, {
 				size: "lg",
-				className: R.workspaceTrigger,
+				className: L.workspaceTrigger,
 				children: [
-					/* @__PURE__ */ I("span", {
-						className: R.workspaceMark,
+					/* @__PURE__ */ F("span", {
+						className: L.workspaceMark,
 						children: f
 					}),
-					/* @__PURE__ */ I(o, { children: c.select }),
-					!d && /* @__PURE__ */ I(O, {
+					/* @__PURE__ */ F(o, { children: c.select }),
+					!d && /* @__PURE__ */ F(D, {
 						"aria-hidden": !0,
-						className: R.workspaceChevron
+						className: L.workspaceChevron
 					})
 				]
 			})
@@ -162,29 +159,29 @@ function U({ logo: e, collapsedLogo: t, workspaceLinks: n, renderLink: r, string
 }
 //#endregion
 //#region src/components/layout/sidebar/app-sidebar.tsx
-function oe({ icon: e, iconMap: t }) {
+function U({ icon: e, iconMap: t }) {
 	if (!e) return null;
 	if (typeof e == "string") {
 		let n = t?.[e];
-		return n ? /* @__PURE__ */ I(n, {}) : null;
+		return n ? /* @__PURE__ */ F(n, {}) : null;
 	}
-	return N(e) ? e : /* @__PURE__ */ I(e, { "aria-hidden": !0 });
+	return M(e) ? e : /* @__PURE__ */ F(e, { "aria-hidden": !0 });
 }
 function W(e, t) {
 	return e.handle ? e.handle : e.href ? e.href : typeof e.label == "string" ? e.label : `nav-${t}`;
 }
-function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "/", iconMap: i, liveBadges: a, loading: o = !1, loadingRows: s = 5, logo: c, collapsedLogo: l, workspaceLinks: u, workspaceStrings: m, header: O, user: k, onProfile: A, onSettings: j, onLogout: M, userStrings: N, footer: B, empty: V, collapsible: G = "icon", variant: se = "sidebar", side: ce = "left", className: le, surfaceClassName: ue, renderItem: K, renderLink: q }) {
-	let J = D({ renderLink: q }), Y = P(() => {
+function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "/", iconMap: i, liveBadges: a, loading: o = !1, loadingRows: s = 5, logo: c, collapsedLogo: l, workspaceLinks: u, workspaceStrings: h, header: D, user: O, onProfile: k, onSettings: A, onLogout: j, userStrings: M, footer: z, empty: B, collapsible: G = "icon", variant: se = "sidebar", side: ce = "left", className: le, surfaceClassName: ue, renderItem: K, renderLink: q }) {
+	let J = p(q), Y = N(() => {
 		let e = [], i = (t) => {
 			for (let n of t) e.push(n.href), n.children?.length && i(n.children);
 		};
 		for (let e of Object.values(t)) i(e);
-		return i(n), d(r, e);
+		return i(n), f(r, e);
 	}, [
 		r,
 		n,
 		t
-	]), X = (e) => !!e && !!Y && f(e) === f(Y), Z = (e) => !!e && !!Y && p(Y, f(e)), de = (e) => e.handle && a?.[e.handle] != null ? a[e.handle] : e.badge, fe = P(() => Object.entries(t), [t]), [Q, pe] = ae({ open: {} }), me = Q.url === r ? Q.open : {}, $ = (e, t, n = 0) => {
+	]), X = (e) => !!e && !!Y && d(e) === d(Y), Z = (e) => !!e && !!Y && m(Y, d(e)), de = (e) => e.handle && a?.[e.handle] != null ? a[e.handle] : e.badge, fe = N(() => Object.entries(t), [t]), [Q, pe] = oe({ open: {} }), me = Q.url === r ? Q.open : {}, $ = (e, t, n = 0) => {
 		let a = !!e.children?.length, o = W(e, t), s = X(e.href) || a && Z(e.href), c = de(e), l = a && (Z(e.href) || e.children.some((e) => X(e.href))), u = me[o] ?? l, d = () => {
 			a && pe((e) => ({
 				url: r,
@@ -194,7 +191,7 @@ function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "
 				}
 			}));
 		};
-		if (K) return /* @__PURE__ */ I(b, { children: K(e, {
+		if (K) return /* @__PURE__ */ F(x, { children: K(e, {
 			depth: n,
 			active: s,
 			expanded: u,
@@ -202,12 +199,12 @@ function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "
 			renderLink: J,
 			toggle: d
 		}) }, o);
-		let f = /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I(oe, {
+		let f = /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(U, {
 			icon: e.icon,
 			iconMap: i
-		}), /* @__PURE__ */ I("span", { children: e.label })] });
-		return /* @__PURE__ */ L(b, { children: [
-			e.href ? /* @__PURE__ */ I(S, {
+		}), /* @__PURE__ */ F("span", { children: e.label })] });
+		return /* @__PURE__ */ I(x, { children: [
+			e.href ? /* @__PURE__ */ F(C, {
 				render: J({
 					href: e.href,
 					children: null,
@@ -218,20 +215,20 @@ function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "
 				active: s,
 				"aria-disabled": e.disabled || void 0,
 				children: f
-			}) : /* @__PURE__ */ L(S, {
+			}) : /* @__PURE__ */ I(C, {
 				active: s,
 				disabled: e.disabled,
 				closeOnSelectMobile: !a,
 				"aria-expanded": a ? u : void 0,
 				onClick: a ? d : void 0,
-				children: [f, a && /* @__PURE__ */ I(ie, {
+				children: [f, a && /* @__PURE__ */ F(ae, {
 					"aria-hidden": !0,
-					className: R.disclosure,
+					className: L.disclosure,
 					"data-expanded": u || void 0
 				})]
 			}),
-			c != null && /* @__PURE__ */ I(T, { children: c }),
-			a && u && /* @__PURE__ */ I(h, { children: e.children.map((e, t) => /* @__PURE__ */ I(re, { children: /* @__PURE__ */ I(ne, {
+			c != null && /* @__PURE__ */ F(E, { children: c }),
+			a && u && /* @__PURE__ */ F(g, { children: e.children.map((e, t) => /* @__PURE__ */ F(ie, { children: /* @__PURE__ */ F(re, {
 				render: J({
 					href: e.href,
 					children: null,
@@ -240,38 +237,38 @@ function G({ navigationGroups: t = {}, footerNavItems: n = [], currentUrl: r = "
 					external: e.external
 				}),
 				active: X(e.href),
-				children: /* @__PURE__ */ I("span", { children: e.label })
+				children: /* @__PURE__ */ F("span", { children: e.label })
 			}) }, W(e, t))) })
 		] }, o);
 	};
-	return /* @__PURE__ */ L(te, {
+	return /* @__PURE__ */ I(ne, {
 		collapsible: G,
 		variant: se,
 		side: ce,
 		className: e("app-sidebar--component", le),
 		surfaceClassName: ue,
 		children: [
-			(O != null || !!c) && /* @__PURE__ */ I(_, { children: O ?? (u && u.length > 0 ? /* @__PURE__ */ I(U, {
+			(D != null || !!c) && /* @__PURE__ */ F(v, { children: D ?? (u && u.length > 0 ? /* @__PURE__ */ F(H, {
 				logo: c,
 				collapsedLogo: l,
 				workspaceLinks: u,
-				strings: m,
+				strings: h,
 				renderLink: q
-			}) : /* @__PURE__ */ I(z, {
+			}) : /* @__PURE__ */ F(R, {
 				logo: c,
 				collapsedLogo: l
 			})) }),
-			/* @__PURE__ */ I(C, { children: o ? Array.from({ length: s }, (e, t) => /* @__PURE__ */ I(x, { children: /* @__PURE__ */ I(v, { children: /* @__PURE__ */ I(b, { children: /* @__PURE__ */ I(y, { showIcon: !0 }) }) }) }, `skeleton-${t}`)) : fe.map(([e, t]) => /* @__PURE__ */ L(x, { children: [!!e && /* @__PURE__ */ I(ee, { children: e }), /* @__PURE__ */ I(w, { children: t.length === 0 && V != null ? V : /* @__PURE__ */ I(v, { children: t.map((e, t) => $(e, t)) }) })] }, e || "ungrouped")) }),
-			(n.length > 0 || B != null || !!k) && /* @__PURE__ */ L(E, { children: [n.length > 0 && /* @__PURE__ */ I(v, { children: n.map((e, t) => $(e, t)) }), B ?? (!!k && /* @__PURE__ */ I(H, {
-				user: k,
-				onProfile: A,
-				onSettings: j,
-				onLogout: M,
-				strings: N
+			/* @__PURE__ */ F(w, { children: o ? Array.from({ length: s }, (e, t) => /* @__PURE__ */ F(S, { children: /* @__PURE__ */ F(y, { children: /* @__PURE__ */ F(x, { children: /* @__PURE__ */ F(b, { showIcon: !0 }) }) }) }, `skeleton-${t}`)) : fe.map(([e, t]) => /* @__PURE__ */ I(S, { children: [!!e && /* @__PURE__ */ F(te, { children: e }), /* @__PURE__ */ F(T, { children: t.length === 0 && B != null ? B : /* @__PURE__ */ F(y, { children: t.map((e, t) => $(e, t)) }) })] }, e || "ungrouped")) }),
+			(n.length > 0 || z != null || !!O) && /* @__PURE__ */ I(ee, { children: [n.length > 0 && /* @__PURE__ */ F(y, { children: n.map((e, t) => $(e, t)) }), z ?? (!!O && /* @__PURE__ */ F(V, {
+				user: O,
+				onProfile: k,
+				onSettings: A,
+				onLogout: j,
+				strings: M
 			}))] }),
-			/* @__PURE__ */ I(g, {})
+			/* @__PURE__ */ F(_, {})
 		]
 	});
 }
 //#endregion
-export { G as AppSidebar, oe as SidebarIcon, z as SidebarLogo, H as SidebarUser, U as SidebarWorkspace, V as defaultSidebarUserStrings, B as defaultSidebarWorkspaceStrings, p as isPathMatch, d as resolveActiveHref, f as toPath };
+export { G as AppSidebar, U as SidebarIcon, R as SidebarLogo, V as SidebarUser, H as SidebarWorkspace, B as defaultSidebarUserStrings, z as defaultSidebarWorkspaceStrings, m as isPathMatch, f as resolveActiveHref, d as toPath };

package/dist/layout/workspace.js

@@ -1,15 +1,13 @@
 "use client";
-import "../core.css";
-import "../css/workspace.css";
 import { t as e } from "../cx--CBrhWH0.js";
 import { a as t, i as n, o as r } from "../typography-BkxEiwQ1.js";
-import { s as i } from "../feedback-C8QtkdHc.js";
-import { d as a, n as o } from "../display-Dehpw83R.js";
-import { H as s } from "../primitives-BnXNg-Kr.js";
-import { t as c } from "../badge-D34FkKLD.js";
-import { c as l, i as u, o as d, r as f, t as p, u as m } from "../item-C7Wfarcx.js";
-import { o as h } from "../navigation-COnv0B1H.js";
-import { t as g } from "../layout.types-CTDrZCGP.js";
+import { s as i } from "../feedback-DRerHGuV.js";
+import { d as a, n as o } from "../display-B3Q17h5z.js";
+import { H as s } from "../primitives-D0bdDozz.js";
+import { t as c } from "../badge-CxOuTfVr.js";
+import { c as l, i as u, o as d, r as f, t as p, u as m } from "../item-B3yQ26as.js";
+import { o as h } from "../navigation-CsqTA16F.js";
+import { r as g } from "../navigation-B4eUU9E8.js";
 import { CheckIcon as _, CircleAlertIcon as v, CircleIcon as y } from "lucide-react";
 import { Fragment as b } from "react";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
@@ -179,7 +177,7 @@ function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _,
 	let D = {
 		...E,
 		...y
-	}, O = g({ renderLink: _ });
+	}, O = g(_);
 	return /* @__PURE__ */ C("nav", {
 		"data-slot": "workspace-nav",
 		"aria-label": T["aria-label"] ?? D.label,

package/dist/lib/action-presentation.d.ts

@@ -7,7 +7,7 @@ export type ActionButtonStyle = (typeof ACTION_BUTTON_STYLES)[number];
  * page header, table row, command palette), so one definition looks the same everywhere.
  */
 export interface ActionPresentation {
-    /** Semantic colour intent. `tone`, never `variant` — see docs/maintainers/guidelines.md. */
+    /** Semantic colour intent. Colour is always `tone`, never `variant`. */
     tone?: SemanticTone;
     /** Button treatment, independent of the colour. */
     buttonStyle?: ActionButtonStyle;

package/dist/lib/forms/field-binding.d.ts

@@ -1,4 +1,7 @@
-/** What a bound field hands to a control. */
+/**
+ * What a bound field hands to a control: what `useFormFieldBinding` returns, spreadable onto
+ * the control.
+ */
 export interface FieldBinding<TValue> {
     name: string;
     value: TValue;
@@ -9,7 +12,10 @@ export interface FieldBinding<TValue> {
     error?: string;
     disabled?: boolean;
 }
-/** One field's state, as an adapter reports it. */
+/**
+ * One field's state, as an adapter reports it. Everything past `value` and `setValue` is
+ * optional.
+ */
 export interface FieldState<TValue> {
     value: TValue;
     setValue: (value: TValue) => void;
@@ -18,19 +24,27 @@ export interface FieldState<TValue> {
     disabled?: boolean;
 }
 /**
- * The adapter contract. `useField` is a hook, called once per bound field during render,
- * so an RHF adapter can delegate to `useController`.
+ * The adapter contract: the one-method interface a form library satisfies to work with the
+ * kit's fields. `useField` is a hook, called once per bound field during render, so an RHF
+ * adapter can delegate to `useController`.
  */
 export interface FormControl<TValues = Record<string, unknown>> {
     useField: <TValue>(name: Extract<keyof TValues, string> | string) => FieldState<TValue>;
 }
-/** Binds one field. The only API a component needs to be form-library agnostic. */
+/**
+ * Binds one field: turns a control and a field name into the exact props a kit control
+ * takes — value, onValueChange, onBlur, invalid, error, disabled. The only API a component
+ * needs to be form-library agnostic.
+ */
 export declare function useFormFieldBinding<TValue, TValues = Record<string, unknown>>({ name, control, disabled, }: {
     name: Extract<keyof TValues, string> | string;
     control: FormControl<TValues>;
     disabled?: boolean;
 }): FieldBinding<TValue>;
-/** A `FormControl` over plain React state — the zero-dependency default. */
+/**
+ * A `FormControl` over plain React state — the zero-dependency default. Also exposes the
+ * current values and a reset, which a library-backed control owns itself.
+ */
 export declare function useStateFormControl<TValues extends Record<string, unknown>>(initialValues: TValues, options?: {
     errors?: Partial<Record<keyof TValues, string>>;
 }): FormControl<TValues> & {

package/dist/lib/forms-rhf/index.d.ts

@@ -1,7 +1,8 @@
 import { Control, FieldValues } from 'react-hook-form';
 import { FormControl } from '../forms/index.js';
 /**
- * Wraps an RHF `control` in the kit's headless contract. `useField` delegates to
- * `useController`, so registration, validation and dirty tracking keep working.
+ * Wraps a react-hook-form `control` in the kit's headless contract. `useField` delegates to
+ * `useController`, so registration, validation and dirty tracking keep working. Imported
+ * from `themelia-ui/forms-rhf`, never from `themelia-ui/forms`, which stays dependency-free.
  */
 export declare function rhfFormControl<TValues extends FieldValues>(control: Control<TValues>): FormControl<TValues>;

package/dist/lib/navigation.d.ts

@@ -1,5 +1,6 @@
-import { MouseEvent, ReactNode } from 'react';
-export interface LayoutLinkRenderProps {
+import { AriaAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
+/** What a component hands its link renderer. Spread everything but `active`, `disabled` and `external` onto the element. */
+export interface LinkRenderProps {
     /** Destination. When absent, render non-interactive content. */
     href?: string;
     children: ReactNode;
@@ -8,21 +9,33 @@ export interface LayoutLinkRenderProps {
     rel?: string;
     onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     "aria-label"?: string;
-    /** Hint for active styling. A renderer may ignore it — the shell styles the row itself. */
+    /** Set on the link to the current page or step. */
+    "aria-current"?: AriaAttributes["aria-current"];
+    /** Set on an entry that is disabled; it styles and announces the state. */
+    "aria-disabled"?: AriaAttributes["aria-disabled"];
+    /** Hint for active styling. A renderer may ignore it — the component styles the row itself. */
     active?: boolean;
+    /** The entry goes nowhere: render non-interactive content. */
     disabled?: boolean;
+    /** Opens elsewhere: the default renderer adds `target="_blank"` and `rel="noopener noreferrer"`. */
     external?: boolean;
 }
 /**
- * The navigation seam.
+ * How a component renders a link: through the application's router. Every component that
+ * navigates takes one as `renderLink`, and without one renders a plain anchor. Return one
+ * element: the component may merge its own props into it, such as a menu item's role or a
+ * button's styling.
  *
  * ```tsx
- * <AppSidebar renderLink={({ href, children, ...rest }) => (
- *   <Link to={href ?? "#"} {...rest}>{children}</Link>
- * )} />
+ * const renderLink: LinkRenderer = ({ href, children, active, disabled, external, ...rest }) =>
+ *   disabled || !href ? <span {...rest}>{children}</span> : <Link to={href} {...rest}>{children}</Link>
  * ```
  */
-export type LayoutLinkRenderer = (props: LayoutLinkRenderProps) => ReactNode;
+export type LinkRenderer = (props: LinkRenderProps) => ReactElement;
+/** A native anchor, and non-interactive content for a disabled or hrefless entry. */
+export declare const defaultRenderLink: LinkRenderer;
+/** The caller's renderer, or the native anchor. */
+export declare const resolveLinkRenderer: (renderLink?: LinkRenderer) => LinkRenderer;
 /** Reduces an href to a comparable path. Handles hash routing, queries, and fragments. */
 export declare function toPath(href: string): string;
 /**

package/dist/lib/ui-provider/context.d.ts

@@ -1,10 +1,21 @@
 import { ResolvedUIConfig, UIConfig } from './types.js';
+/**
+ * The context itself. Exported for a consumer building a provider of their own; the hooks
+ * are the supported way in.
+ */
 export declare const UIConfigContext: import('react').Context<ResolvedUIConfig>;
 /**
  * Whether a root or scope is above this point. `UIProvider` uses it to decide between
- * owning the document (outermost) and scoping its own subtree (nested).
+ * owning the document (outermost) and scoping its own subtree (nested), which is how nested
+ * providers avoid fighting over the document.
  */
 export declare const UINestedContext: import('react').Context<boolean>;
+/**
+ * The custom properties enclosing scopes wrote from their config. Semantic colours and type
+ * sizes are declared again at every `[data-ui-scope]`, so a nested scope restates these
+ * before its own; inheritance alone would lose them. Internal: not exported from the entry.
+ */
+export declare const UIScopeVarsContext: import('react').Context<Record<string, string>>;
 /**
  * Where a popup should render so it keeps its scope. Theme and density inherit down the
  * DOM, so popups portal into an element inside the scope rather than `document.body`.

package/dist/lib/ui-provider/csp-provider.d.ts

@@ -7,4 +7,9 @@ import { CSPProviderProps as BaseCSPProviderProps } from '@base-ui/react/csp-pro
  */
 export interface CSPProviderProps extends Pick<BaseCSPProviderProps, "children" | "nonce" | "disableStyleElements"> {
 }
+/**
+ * Passes the request nonce and inline-style policy to every Base UI-backed primitive below
+ * it. Place it once around the React root during SSR; `disableStyleElements` is for
+ * consumers that provide the equivalent positioning CSS themselves.
+ */
 export declare function CSPProvider(props: CSPProviderProps): import("react").JSX.Element;

package/dist/lib/ui-provider/hooks.d.ts

@@ -1,33 +1,59 @@
 import { UIPortalContainer } from './context.js';
 import { ComponentDefaults, ResolvedUIConfig } from './types.js';
-/** The whole resolved config for this scope. Prefer a narrower hook below. */
+/**
+ * The whole resolved configuration at this point in the tree. Prefer a narrower hook, which
+ * says what a component depends on.
+ */
 export declare function useUIConfig(): ResolvedUIConfig;
-/** The scope's locale. Money and dates read it through their own hooks as well. */
+/**
+ * The scope's locale, shared by the primitives' number formatting. Money and dates read it
+ * through their own hooks as well.
+ */
 export declare function useFormatting(): Required<import('./index.js').FormattingConfig>;
-/** Currency policy — the default code, the display code, and how a pair is rendered. */
+/**
+ * Currency policy — the default code, the display code, how an amount is written and how a
+ * pair is rendered: what Money reads when a prop is absent.
+ */
 export declare function useMoneyConfig(): Required<Omit<import('./index.js').MoneyConfig, "displayCurrency">> & Pick<import('./index.js').MoneyConfig, "displayCurrency">;
-/** Week start, the fallback pattern, the date-fns locale, and the relative-time hook. */
+/**
+ * Date and time presentation defaults, read by the date primitives and pickers: week start,
+ * the fallback pattern, the date-fns locale, and the relative-time hook.
+ */
 export declare function useDatesConfig(): Required<Omit<import('./index.js').DatesConfig, "locale" | "formatRelativeTime">> & Pick<import('./index.js').DatesConfig, "locale" | "formatRelativeTime">;
-/** Overlay policy — whether menus render dark, and the modal scrim's blur. */
+/**
+ * Overlay policy — whether dropdown and context menus render dark (by default they do),
+ * and the modal scrim's blur.
+ */
 export declare function useOverlayConfig(): import('./index.js').OverlayConfig & {
     darkMenus: boolean;
 };
+/** Typographic defaults, such as the size components fall back to when they set none. */
 export declare function useTypographyConfig(): import('./index.js').TypographyConfig & {
     defaultTextSize: import('./index.js').TextSize;
 };
+/**
+ * The resolved density, with the scale factor beside it. The visual effect comes from the
+ * `data-density` attribute; this is for logic that must branch on it.
+ */
 export declare function useDensity(): {
     density: import('./index.js').Density;
     scale: number;
 };
-/** The scope's geometry factor. Components read tokens, not this — it is for callers. */
+/**
+ * The resolved `--scale` factor as a number, for a measurement JavaScript has to compute
+ * rather than let CSS derive. Components read tokens, not this — it is for callers.
+ */
 export declare function useScale(): number;
 /**
- * Per-component prop defaults for one family: the component passes its own defaults and
- * the scope's overrides merge on top, so defaults stay beside their component.
+ * Per-component prop defaults for one family. The component passes its OWN defaults and
+ * the scope's overrides merge over them, which keeps the values beside the component, makes
+ * the call order-independent, and lets an unused module tree-shake away.
  */
 export declare function useDefaults<K extends keyof ComponentDefaults>(family: K, fallback: ComponentDefaults[K]): ComponentDefaults[K];
 /**
  * The container a portal in this subtree should use: the caller's `explicit` value, else
  * the nearest `UIPortalHost`, else `undefined` so the primitive keeps its own default.
+ * `undefined` rather than `document.body` on purpose: the primitive's default is the thing
+ * that knows about shadow roots, SSR and nested portals.
  */
 export declare function useUIPortalContainer(explicit?: UIPortalContainer): UIPortalContainer | undefined;

package/dist/lib/ui-provider/index.d.ts

@@ -2,7 +2,7 @@ export { UIProvider, type UIProviderProps } from './provider.js';
 export { CSPProvider, type CSPProviderProps } from './csp-provider.js';
 export { UIRoot, type UIRootProps, type UIDocumentTarget } from './root.js';
 export { UIScope, type UIScopeProps } from './ui-scope.js';
-export { Scope } from './scope.js';
+export { Scope, type ScopeProps } from './scope.js';
 export { UIPortalHost, type UIPortalHostProps } from './portal-host.js';
 export { UIConfigContext, UINestedContext, mergeUIConfig, type UIPortalContainer } from './context.js';
 export { DEFAULT_UI_CONFIG } from './defaults.js';