themelia-ui 2.0.1 → 3.1.0

package/dist/layout/workspace.js

@@ -1,20 +1,20 @@
 "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 "#core.css";
+import { a as e, o as t, s as n } from "../typography-DmeR05Er.js";
+import { t as r } from "../cx--CBrhWH0.js";
+import { H as i } from "../primitives-BskKlf35.js";
+import { t as a } from "../badge-VlJVZjdm.js";
+import { s as o } from "../feedback-D4qVsKlD.js";
+import { d as s, n as c } from "../display-BGN834xV.js";
+import { c as l, i as u, o as d, r as f, t as p, u as m } from "../item-CuUJyETl.js";
+import { o as h } from "../navigation-BTX5Ti0Z.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";
 import { mergeProps as w } from "@base-ui/react/merge-props";
 import { useRender as T } from "@base-ui/react/use-render";
+import "#css/workspace.css";
 //#region src/components/layout/workspace/workspace.strings.ts
 var E = {
 	label: "Workspace navigation",
@@ -57,29 +57,29 @@ var E = {
 };
 //#endregion
 //#region src/components/layout/workspace/workspace.tsx
-function A({ title: n, description: i, media: a, badges: s, status: c, metadata: l, actions: u, strings: d, secondaryActions: f, headingLevel: p = 1, className: m, children: g, ..._ }) {
+function A({ title: e, description: i, media: a, badges: o, status: s, metadata: l, actions: u, strings: d, secondaryActions: f, headingLevel: p = 1, className: m, children: g, ..._ }) {
 	let v = {
 		...O,
 		...d
-	}, y = s != null || c != null;
+	}, y = o != null || s != null;
 	return /* @__PURE__ */ C(h, {
 		..._,
 		"data-slot": "workspace-record-header",
-		className: e("workspace-record-header--component", k.recordHeader, m),
+		className: r("workspace-record-header--component", k.recordHeader, m),
 		title: /* @__PURE__ */ S(t, {
 			level: p,
 			size: "xl",
 			truncate: !0,
-			children: n
+			children: e
 		}),
-		description: i == null ? void 0 : /* @__PURE__ */ S(r, {
+		description: i == null ? void 0 : /* @__PURE__ */ S(n, {
 			type: "secondary",
 			children: i
 		}),
 		leading: a,
 		titleSuffix: y ? /* @__PURE__ */ C("span", {
 			className: k.titleSuffix,
-			children: [s, c]
+			children: [o, s]
 		}) : void 0,
 		actions: u ? /* @__PURE__ */ S("div", {
 			role: "group",
@@ -87,9 +87,9 @@ function A({ title: n, description: i, media: a, badges: s, status: c, metadata:
 			className: k.actions,
 			children: u
 		}) : void 0,
-		afterDescription: l?.length ? /* @__PURE__ */ S(o, {
+		afterDescription: l?.length ? /* @__PURE__ */ S(c, {
 			layout: "inline",
-			density: "compact",
+			size: "sm",
 			itemSeparator: !0,
 			"aria-label": v.metadata,
 			className: k.metadata,
@@ -107,46 +107,46 @@ function A({ title: n, description: i, media: a, badges: s, status: c, metadata:
 }
 //#endregion
 //#region src/components/layout/workspace/workspace-layout.tsx
-function j({ header: t, sidebar: n, rail: r, children: i, contentWidth: a = "wide", label: o, sidebarWidth: s, railWidth: c, className: l, headerClassName: u, bodyClassName: d, sidebarClassName: f, contentClassName: p, contentRender: m, railClassName: h, style: g, ..._ }) {
+function j({ header: e, sidebar: t, rail: n, children: i, contentWidth: a = "wide", label: o, sidebarWidth: s, railWidth: c, className: l, headerClassName: u, bodyClassName: d, sidebarClassName: f, contentClassName: p, contentRender: m, railClassName: h, style: g, ..._ }) {
 	return /* @__PURE__ */ C("div", {
 		"data-slot": "workspace-layout",
 		"data-content-width": a,
-		"data-has-sidebar": !!n || void 0,
-		"data-has-rail": !!r || void 0,
+		"data-has-sidebar": !!t || void 0,
+		"data-has-rail": !!n || void 0,
 		"aria-label": o,
-		className: e("workspace-layout--component", k.layout, l),
+		className: r("workspace-layout--component", k.layout, l),
 		style: {
 			...s ? { "--sidebar-width": s } : null,
-			...c ? { "--workspace-rail-w": c } : null,
+			...c ? { "--_workspace-rail-w": c } : null,
 			...g
 		},
 		..._,
-		children: [!!t && /* @__PURE__ */ S("div", {
+		children: [!!e && /* @__PURE__ */ S("div", {
 			"data-slot": "workspace-header",
-			className: e(k.layoutHeader, u),
-			children: t
+			className: r(k.layoutHeader, u),
+			children: e
 		}), /* @__PURE__ */ C("div", {
 			"data-slot": "workspace-body",
-			className: e(k.layoutBody, d),
+			className: r(k.layoutBody, d),
 			children: [
-				!!n && /* @__PURE__ */ S("div", {
+				!!t && /* @__PURE__ */ S("div", {
 					"data-slot": "workspace-sidebar",
-					className: e(k.layoutSidebar, f),
-					children: n
+					className: r(k.layoutSidebar, f),
+					children: t
 				}),
 				/* @__PURE__ */ S(M, {
 					"data-slot": "workspace-content",
-					className: e(k.layoutContent, p),
+					className: r(k.layoutContent, p),
 					render: m,
 					children: /* @__PURE__ */ S("div", {
 						className: k.layoutMeasure,
 						children: i
 					})
 				}),
-				!!r && /* @__PURE__ */ S("aside", {
+				!!n && /* @__PURE__ */ S("aside", {
 					"data-slot": "workspace-rail",
-					className: e(k.layoutRail, h),
-					children: r
+					className: r(k.layoutRail, h),
+					children: n
 				})
 			]
 		})]
@@ -175,56 +175,56 @@ function P(e) {
 function F(e, t) {
 	return e.disabled ? "disabled" : e.status ? e.status : e.warning ? "attention" : t ? "current" : e.completion !== void 0 && P(e.completion) >= 100 ? "complete" : "idle";
 }
-function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _, footerSlot: v, strings: y, className: w, ...T }) {
+function I({ groups: t, activeId: a, onSelect: c, renderItem: h, renderLink: _, footerSlot: v, strings: y, className: w, ...T }) {
 	let D = {
 		...E,
 		...y
-	}, O = g({ renderLink: _ });
+	}, O = g(_);
 	return /* @__PURE__ */ C("nav", {
 		"data-slot": "workspace-nav",
 		"aria-label": T["aria-label"] ?? D.label,
-		className: e("workspace-nav--component", k.nav, w),
+		className: r("workspace-nav--component", k.nav, w),
 		...T,
 		children: [/* @__PURE__ */ S("div", {
 			className: k.navGroups,
-			children: t.map((e) => /* @__PURE__ */ C("div", {
+			children: t.map((t) => /* @__PURE__ */ C("div", {
 				className: k.navGroup,
-				children: [!!e.label && /* @__PURE__ */ C("div", {
+				children: [!!t.label && /* @__PURE__ */ C("div", {
 					className: k.navGroupHead,
-					children: [/* @__PURE__ */ S(n, { children: e.label }), !!e.description && /* @__PURE__ */ S(r, {
+					children: [/* @__PURE__ */ S(e, { children: t.label }), !!t.description && /* @__PURE__ */ S(n, {
 						size: "xs",
 						type: "secondary",
-						children: e.description
+						children: t.description
 					})]
 				}), /* @__PURE__ */ S(d, {
 					className: k.navItems,
-					children: e.items.map((t, n) => {
-						let r = t.id === o, d = F(t, r), g = d === "disabled", _ = N[d], v = t.icon, y = t.completion === void 0 ? void 0 : P(t.completion);
-						if (h) return /* @__PURE__ */ S(b, { children: h(t, {
+					children: t.items.map((e, n) => {
+						let r = e.id === a, d = F(e, r), g = d === "disabled", _ = N[d], v = e.icon, y = e.completion === void 0 ? void 0 : P(e.completion);
+						if (h) return /* @__PURE__ */ S(b, { children: h(e, {
 							active: r,
-							group: e,
+							group: t,
 							index: n
-						}) }, t.id);
+						}) }, e.id);
 						let w = /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(l, {
 							variant: "icon",
 							children: v ? /* @__PURE__ */ S(v, {}) : /* @__PURE__ */ S(_, { className: k.navStatusIcon })
 						}), /* @__PURE__ */ C(f, { children: [
-							/* @__PURE__ */ C(m, { children: [t.label, r && /* @__PURE__ */ S(a, { children: D.current })] }),
-							!!t.description && /* @__PURE__ */ S(u, { children: t.description }),
+							/* @__PURE__ */ C(m, { children: [e.label, r && /* @__PURE__ */ S(s, { children: D.current })] }),
+							!!e.description && /* @__PURE__ */ S(u, { children: e.description }),
 							y !== void 0 && /* @__PURE__ */ C("div", {
 								className: k.navProgress,
-								children: [/* @__PURE__ */ S(i, {
+								children: [/* @__PURE__ */ S(o, {
 									value: y,
 									label: D.completion(y)
-								}), /* @__PURE__ */ S(s, {
+								}), /* @__PURE__ */ S(i, {
 									size: "xs",
 									children: D.completion(y)
 								})]
 							})
 						] })] });
 						return /* @__PURE__ */ S(p, {
-							render: g ? void 0 : t.href ? O({
-								href: t.href,
+							render: g ? void 0 : e.href ? O({
+								href: e.href,
 								active: r,
 								children: w
 							}) : c ? /* @__PURE__ */ S("button", { type: "button" }) : void 0,
@@ -232,13 +232,13 @@ function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _,
 							"aria-disabled": g || void 0,
 							"data-active": r || void 0,
 							"data-status": d,
-							onClick: !g && c ? () => c(t) : void 0,
+							onClick: !g && c ? () => c(e) : void 0,
 							className: k.navItem,
 							children: w
-						}, t.id);
+						}, e.id);
 					})
 				})]
-			}, e.id))
+			}, t.id))
 		}), !!v && /* @__PURE__ */ S("div", {
 			className: k.navFooter,
 			children: v
@@ -247,63 +247,63 @@ function I({ groups: t, activeId: o, onSelect: c, renderItem: h, renderLink: _,
 }
 //#endregion
 //#region src/components/layout/workspace/workspace-locale-strip.tsx
-function L({ locales: t, activeLocale: n, onLocaleChange: a, actions: o, strings: s, className: l, ...u }) {
+function L({ locales: e, activeLocale: t, onLocaleChange: i, actions: s, strings: c, className: l, ...u }) {
 	let d = {
 		...D,
-		...s
+		...c
 	};
 	return /* @__PURE__ */ C("div", {
 		"data-slot": "workspace-locale-strip",
 		role: "group",
 		"aria-label": d.label,
-		className: e("workspace-locale-strip--component", k.strip, l),
+		className: r("workspace-locale-strip--component", k.strip, l),
 		...u,
 		children: [/* @__PURE__ */ S("div", {
 			className: k.stripList,
-			children: t.map((e) => {
-				let t = e.id === n, o = e.completion === void 0 ? void 0 : Math.min(100, Math.max(0, Math.round(e.completion)));
+			children: e.map((e) => {
+				let r = e.id === t, s = e.completion === void 0 ? void 0 : Math.min(100, Math.max(0, Math.round(e.completion)));
 				return /* @__PURE__ */ C("button", {
 					type: "button",
-					"aria-pressed": t,
+					"aria-pressed": r,
 					disabled: e.disabled,
-					onClick: () => a?.(e),
-					"data-active": t || void 0,
+					onClick: () => i?.(e),
+					"data-active": r || void 0,
 					className: k.stripItem,
 					children: [
 						/* @__PURE__ */ C("span", {
 							className: k.stripHead,
 							children: [
-								/* @__PURE__ */ S(r, {
+								/* @__PURE__ */ S(n, {
 									tag: "span",
 									weight: "medium",
 									children: e.label
 								}),
-								t && /* @__PURE__ */ S(c, {
+								r && /* @__PURE__ */ S(a, {
 									tone: "primary",
 									children: d.active
 								}),
-								!!e.status && /* @__PURE__ */ S(c, {
+								!!e.status && /* @__PURE__ */ S(a, {
 									tone: "neutral",
 									children: e.status
 								})
 							]
 						}),
-						!!e.description && /* @__PURE__ */ S(r, {
+						!!e.description && /* @__PURE__ */ S(n, {
 							tag: "span",
 							size: "xs",
 							type: "secondary",
 							children: e.description
 						}),
-						o !== void 0 && /* @__PURE__ */ S(i, {
-							value: o,
-							label: d.completion(o)
+						s !== void 0 && /* @__PURE__ */ S(o, {
+							value: s,
+							label: d.completion(s)
 						})
 					]
 				}, e.id);
 			})
-		}), !!o && /* @__PURE__ */ S("div", {
+		}), !!s && /* @__PURE__ */ S("div", {
 			className: k.stripActions,
-			children: o
+			children: s
 		})]
 	});
 }

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

@@ -1,16 +1,16 @@
 import { SemanticTone } from './component-vocabulary.js';
 /** The button treatments an action may take. */
-export declare const ACTION_BUTTON_STYLES: readonly ["solid", "outline", "ghost", "link"];
-export type ActionButtonStyle = (typeof ACTION_BUTTON_STYLES)[number];
+export declare const ACTION_APPEARANCES: readonly ["solid", "outline", "ghost", "link"];
+export type ActionAppearance = (typeof ACTION_APPEARANCES)[number];
 /**
  * The presentation an action carries wherever it is rendered (ActionMenu, ActionButtons,
  * 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;
+    appearance?: ActionAppearance;
     /** Set false to omit the action entirely. */
     visible?: boolean;
     /** Prevents activation while keeping the action visible. */

package/dist/lib/component-vocabulary.d.ts

@@ -1,5 +1,5 @@
-/** Canonical three-step scale for package-owned component recipes. */
-export declare const COMPONENT_SCALES: readonly ["sm", "md", "lg"];
+/** Canonical two-step scale for package-owned component recipes: the default and a smaller one. */
+export declare const COMPONENT_SCALES: readonly ["default", "sm"];
 export type ComponentScale = (typeof COMPONENT_SCALES)[number];
 /** Canonical semantic colour intent for package-owned presentation. */
 export declare const SEMANTIC_TONES: readonly ["neutral", "primary", "secondary", "info", "success", "warning", "destructive"];

package/dist/lib/css-length.d.ts

@@ -0,0 +1,2 @@
+/** A CSS length: a number with a unit or a percentage, or a math or `var()` expression. */
+export type CssLength = `${number}${"px" | "rem" | "em" | "ch" | "%" | "vw" | "vh" | "dvw" | "dvh" | "svw" | "svh" | "lvw" | "lvh"}` | `${"calc" | "min" | "max" | "clamp" | "var"}(${string})`;

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/responsive.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
 export declare const BREAKPOINTS: Breakpoint[];
 /**
- * Each `--bp-*` min-width from styles/theming/breakpoints.css in px (rem × 16), for the
+ * Each `--bp-*` min-width from styles/breakpoints.css in px (rem × 16), for the
  * JavaScript that cannot read a custom media query. responsive.test.ts holds them in step.
  */
 export declare const BREAKPOINT_MIN_WIDTH: Record<Exclude<Breakpoint, "base">, number>;

package/dist/lib/theming/index.d.ts

@@ -2,3 +2,4 @@ export { deriveThemeElevation, deriveThemePalette, deriveThemeTypeScale } from '
 export type { ThemeElevationRecipe, ThemePaletteRecipe, ThemeTypeScaleRecipe } from './recipes.js';
 export { INK, PAPER, readableForeground, type ForegroundChoice } from './contrast.js';
 export type { ThemeMode, ThemeOverrides, ThemeVariableName } from './types.js';
+export { themes, type ThemeName, type ThemePreset } from './themes/index.js';

package/dist/lib/theming/recipes.d.ts

@@ -17,7 +17,7 @@ export interface ThemeElevationRecipe {
 export declare function deriveThemePalette({ primary, mode }: ThemePaletteRecipe): ThemeOverrides;
 export declare function deriveThemeTypeScale({ baseSize, ratio, }: ThemeTypeScaleRecipe): ThemeOverrides;
 /**
- * The whole shadow ladder from one intensity: the default theme's geometry and
- * `--shadow-ink`, with every layer's ink scaled so 0.8 reproduces it exactly.
+ * The two shadows from one intensity: the default theme's geometry, with every layer's ink
+ * scaled so 0.8 reproduces it exactly.
  */
 export declare function deriveThemeElevation({ intensity }: ThemeElevationRecipe): ThemeOverrides;

package/dist/lib/theming/themes/dense.d.ts

@@ -0,0 +1,3 @@
+import { ThemePreset } from './types.js';
+/** Dense: blue on cool neutrals, compact spacing, small corners and bordered cards, for screens full of data. */
+export declare const dense: ThemePreset;

package/dist/lib/theming/themes/editorial.d.ts

@@ -0,0 +1,3 @@
+import { ThemePreset } from './types.js';
+/** Editorial: terracotta on warm paper, serif headings, a step larger type and generous spacing, for reading. */
+export declare const editorial: ThemePreset;

package/dist/lib/theming/themes/index.d.ts

@@ -0,0 +1,8 @@
+export declare const themes: {
+    soft: import('./types.js').ThemePreset;
+    sharp: import('./types.js').ThemePreset;
+    dense: import('./types.js').ThemePreset;
+    editorial: import('./types.js').ThemePreset;
+};
+export type ThemeName = keyof typeof themes;
+export type { ThemePreset } from './types.js';

package/dist/lib/theming/themes/pair.d.ts

@@ -0,0 +1,7 @@
+/** A colour for both modes: the half each element's `color-scheme` picks. */
+export declare const pair: (light: string, dark: string) => string;
+/**
+ * No shadow, written as one. A popup lists `--shadow-lg` after its hairline, and `none` cannot
+ * stand in a list: the whole declaration would drop, taking the hairline with it.
+ */
+export declare const NO_SHADOW = "0 0 transparent";

package/dist/lib/theming/themes/sharp.d.ts

@@ -0,0 +1,3 @@
+import { ThemePreset } from './types.js';
+/** Sharp: monochrome ink, square corners, hairlines instead of shadows, and quick motion. Links keep the kit's blue, so a link still reads as one without its underline. */
+export declare const sharp: ThemePreset;

package/dist/lib/theming/themes/soft.d.ts

@@ -0,0 +1,3 @@
+import { ThemePreset } from './types.js';
+/** Soft: violet on rosy neutrals, large corners, diffuse shadows, comfortable spacing and gentler motion. */
+export declare const soft: ThemePreset;

package/dist/lib/theming/themes/types.d.ts

@@ -0,0 +1,12 @@
+import { UIConfig } from '../../ui-provider/index.js';
+/**
+ * A ready-made theme: the name a picker shows, one line on what it is for, and the provider
+ * config it sets. The config reaches past colour: radii, shadows and border weight (`theme`),
+ * spacing (`density`), type (`typography`), motion, and how components draw themselves
+ * (`defaults`). Pass `config` to `UIProvider`, or spread it under settings of your own.
+ */
+export interface ThemePreset {
+    label: string;
+    description: string;
+    config: UIConfig;
+}

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;