schema-components 1.28.2 → 1.29.0

package/dist/react/SchemaErrorBoundary.mjs

@@ -23,10 +23,22 @@ import { Component } from "react";
 * - Errors in server-side rendering
 */
 /**
-* React error boundary that catches schema rendering errors.
+* React error boundary that catches rendering errors from
+* `SchemaComponent`, theme adapters, and any descendant.
 *
 * Provides a `reset` callback that clears the error state, allowing
 * the children to re-render (e.g. after fixing a bad schema prop).
+* Does not catch errors thrown from event handlers, async work, or
+* server-side rendering — those paths must be handled by the host
+* application.
+*
+* @group Components
+* @example
+* ```tsx
+* <SchemaErrorBoundary fallback={(error) => <p>{error.message}</p>}>
+*   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+* </SchemaErrorBoundary>
+* ```
 */
 var SchemaErrorBoundary = class extends Component {
 	state = { error: void 0 };

package/dist/react/SchemaView.d.mts

@@ -1,12 +1,21 @@
-import { w as SchemaMeta } from "../types-BTB73MB8.mjs";
-import { t as Diagnostic } from "../diagnostics-Cbwak-ZX.mjs";
-import { i as SchemaIoSide } from "../adapter-DqlAnZ_w.mjs";
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { w as SchemaMeta } from "../types-C2Ay1FEh.mjs";
+import { t as Diagnostic } from "../diagnostics-ByEzkjrA.mjs";
+import { i as SchemaIoSide } from "../adapter-DcWi4XXn.mjs";
+import { r as ComponentResolver } from "../renderer-OaOz-n6-.mjs";
 import { RejectUnrepresentableZod } from "../core/typeInference.mjs";
 import { InferredValue, WidgetMap } from "./SchemaComponent.mjs";
 import { ReactNode } from "react";
 
 //#region src/react/SchemaView.d.ts
+/**
+ * Props accepted by {@link SchemaView}.
+ *
+ * Mirrors `SchemaComponentProps` for the read-only / RSC path — no
+ * `onChange`, no `validate`, and the theme is supplied via the
+ * `resolver` prop because Server Components cannot read React context.
+ *
+ * @group Components
+ */
 interface SchemaViewProps<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output"> {
   /**
    * Zod schema, JSON Schema object, or OpenAPI document.
@@ -61,11 +70,26 @@ interface SchemaViewProps<T = unknown, Ref extends string | undefined = undefine
   idPrefix?: string;
 }
 /**
- * Server-safe schema renderer — no context and no state. The only hook
- * called is `useId()`, which is RSC-safe.
+ * Read-only schema renderer that is safe to use inside a React Server
+ * Component.
+ *
+ * Uses no context, state, or effects — the only hook called is
+ * `useId()`, which is RSC-safe. Always renders read-only; pair with
+ * `SchemaComponent` (which requires `"use client"`) when an editable
+ * form is required. Because Server Components cannot read React
+ * context, the theme adapter is passed via the `resolver` prop rather
+ * than `SchemaProvider`.
+ *
+ * @group Components
+ * @example
+ * ```tsx
+ * import { SchemaView } from "schema-components/react/SchemaView";
  *
- * Always renders in read-only mode. For editable forms, use
- * `<SchemaComponent>` with `"use client"`.
+ * export default async function Page() {
+ *   const user = await getUser();
+ *   return <SchemaView schema={userSchema} value={user} />;
+ * }
+ * ```
  */
 declare function SchemaView<T = unknown, Ref extends string | undefined = undefined, Mode extends SchemaIoSide = "output">({
   schema: schemaInput,

package/dist/react/SchemaView.mjs

@@ -5,8 +5,8 @@ import { buildRenderProps, getRenderFunction, mergeResolvers } from "../core/ren
 import { walk } from "../core/walker.mjs";
 import { headlessResolver } from "./headless.mjs";
 import { joinPath, sanitisePrefix } from "./SchemaComponent.mjs";
-import { createElement, isValidElement, useId } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createElement, isValidElement, useId } from "react";
 //#region src/react/SchemaView.tsx
 /**
 * React Server Component for read-only schema rendering.
@@ -36,11 +36,26 @@ import { jsx } from "react/jsx-runtime";
 * is passed explicitly.
 */
 /**
-* Server-safe schema renderer — no context and no state. The only hook
-* called is `useId()`, which is RSC-safe.
+* Read-only schema renderer that is safe to use inside a React Server
+* Component.
+*
+* Uses no context, state, or effects — the only hook called is
+* `useId()`, which is RSC-safe. Always renders read-only; pair with
+* `SchemaComponent` (which requires `"use client"`) when an editable
+* form is required. Because Server Components cannot read React
+* context, the theme adapter is passed via the `resolver` prop rather
+* than `SchemaProvider`.
+*
+* @group Components
+* @example
+* ```tsx
+* import { SchemaView } from "schema-components/react/SchemaView";
 *
-* Always renders in read-only mode. For editable forms, use
-* `<SchemaComponent>` with `"use client"`.
+* export default async function Page() {
+*   const user = await getUser();
+*   return <SchemaView schema={userSchema} value={user} />;
+* }
+* ```
 */
 function SchemaView({ schema: schemaInput, ref: refInput, io, value, fields, meta: componentMeta, description, resolver, widgets, onDiagnostic, strict, idPrefix }) {
 	const generatedId = useId();

package/dist/react/a11y.d.mts

@@ -1,4 +1,4 @@
-import { j as WalkedField } from "../types-BTB73MB8.mjs";
+import { j as WalkedField } from "../types-C2Ay1FEh.mjs";
 
 //#region src/react/a11y.d.ts
 /**

package/dist/react/fieldPath.d.mts

@@ -1,4 +1,4 @@
-import { j as WalkedField } from "../types-BTB73MB8.mjs";
+import { j as WalkedField } from "../types-C2Ay1FEh.mjs";
 
 //#region src/react/fieldPath.d.ts
 /**

package/dist/react/headless.d.mts

@@ -1,4 +1,4 @@
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { r as ComponentResolver } from "../renderer-OaOz-n6-.mjs";
 
 //#region src/react/headless.d.ts
 /**

package/dist/react/headlessRenderers.d.mts

@@ -1,5 +1,5 @@
-import { j as WalkedField } from "../types-BTB73MB8.mjs";
-import { l as RenderProps } from "../renderer-Ul9taFYp.mjs";
+import { j as WalkedField } from "../types-C2Ay1FEh.mjs";
+import { l as RenderProps } from "../renderer-OaOz-n6-.mjs";
 import { ReactNode } from "react";
 
 //#region src/react/headlessRenderers.d.ts
@@ -20,10 +20,15 @@ declare function toReactNode(value: unknown): ReactNode;
  * Throws on an empty path; see `fieldDomId` for the rationale.
  */
 declare function inputId(path: string): string;
+/** Headless renderer for `StringField` — plain `<input>` / `<span>`. */
 declare function renderString(props: RenderProps): ReactNode;
+/** Headless renderer for `NumberField` — plain `<input type="number">`. */
 declare function renderNumber(props: RenderProps): ReactNode;
+/** Headless renderer for `BooleanField` — plain `<input type="checkbox">`. */
 declare function renderBoolean(props: RenderProps): ReactNode;
+/** Headless renderer for `EnumField` — plain `<select>` listing each option. */
 declare function renderEnum(props: RenderProps): ReactNode;
+/** Headless renderer for `ObjectField` — `<fieldset>` per object with one child per property. */
 declare function renderObject(props: RenderProps): ReactNode;
 /**
  * Compute the default value for a freshly added record entry based on the
@@ -42,9 +47,13 @@ declare function nextRecordKey(existing: readonly string[], base?: string): stri
  * or when newKey collides with an existing key.
  */
 declare function renameRecordKey(obj: Record<string, unknown>, oldKey: string, newKey: string): Record<string, unknown>;
+/** Headless renderer for `RecordField` — editable key/value rows with add/remove controls. */
 declare function renderRecord(props: RenderProps): ReactNode;
+/** Headless renderer for `ArrayField` — ordered list with add/remove controls. */
 declare function renderArray(props: RenderProps): ReactNode;
+/** Headless renderer for plain `UnionField` — picks the matching option and renders it. */
 declare function renderUnion(props: RenderProps): ReactNode;
+/** Headless renderer for `DiscriminatedUnionField` — tabbed UI driven by the discriminator. */
 declare function renderDiscriminatedUnion(props: RenderProps): ReactNode;
 /**
  * Pure helper: convert a tab index into the new value the discriminated
@@ -54,6 +63,7 @@ declare function renderDiscriminatedUnion(props: RenderProps): ReactNode;
  * without rendering the tabs component (which relies on React hooks).
  */
 declare function discriminatedUnionValueForTab(optionLabels: readonly string[], discKey: string, newIndex: number): Record<string, string> | undefined;
+/** Headless renderer for `FileField` — plain `<input type="file">`. */
 declare function renderFile(props: RenderProps): ReactNode;
 /**
  * Render a literal field — `z.literal("a")` or `{ const: 5 }`.
@@ -106,6 +116,7 @@ declare function renderConditional(props: RenderProps): ReactNode;
  * beneath an explanatory preamble.
  */
 declare function renderNegation(props: RenderProps): ReactNode;
+/** Headless renderer for `UnknownField` — JSON-encoded fallback for unconstrained values. */
 declare function renderUnknown(props: RenderProps): ReactNode;
 //#endregion
 export { defaultRecordValue, discriminatedUnionValueForTab, inputId, nextRecordKey, renameRecordKey, renderArray, renderBoolean, renderConditional, renderDiscriminatedUnion, renderEnum, renderFile, renderLiteral, renderNegation, renderNever, renderNull, renderNumber, renderObject, renderRecord, renderString, renderTuple, renderUnion, renderUnknown, toReactNode };

package/dist/react/headlessRenderers.mjs

@@ -7,8 +7,8 @@ import { fieldDomId, panelIdFor, tabIdFor } from "../core/idPath.mjs";
 import { matchUnionOption, resolveDiscriminatedActive } from "../core/unionMatch.mjs";
 import { displayJsonValue } from "../core/walkBuilders.mjs";
 import { buildAriaAttrs } from "./a11y.mjs";
-import { isValidElement, useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement, useCallback, useEffect, useRef } from "react";
 //#region src/react/headlessRenderers.tsx
 /**
 * Headless renderer functions — one per schema type.
@@ -61,6 +61,7 @@ function formatTime(value) {
 function inputId(path) {
 	return fieldDomId(path);
 }
+/** Headless renderer for `StringField` — plain `<input>` / `<span>`. */
 function renderString(props) {
 	const id = inputId(props.path);
 	if (props.readOnly) {
@@ -150,6 +151,7 @@ function renderString(props) {
 		...ariaAttrs
 	});
 }
+/** Headless renderer for `NumberField` — plain `<input type="number">`. */
 function renderNumber(props) {
 	const id = inputId(props.path);
 	if (props.readOnly) {
@@ -178,6 +180,7 @@ function renderNumber(props) {
 		...ariaAttrs
 	});
 }
+/** Headless renderer for `BooleanField` — plain `<input type="checkbox">`. */
 function renderBoolean(props) {
 	const id = inputId(props.path);
 	if (props.readOnly) {
@@ -203,6 +206,7 @@ function renderBoolean(props) {
 		...ariaAttrs
 	});
 }
+/** Headless renderer for `EnumField` — plain `<select>` listing each option. */
 function renderEnum(props) {
 	const id = inputId(props.path);
 	const enumValue = typeof props.value === "string" ? props.value : "";
@@ -232,6 +236,7 @@ function renderEnum(props) {
 		})]
 	});
 }
+/** Headless renderer for `ObjectField` — `<fieldset>` per object with one child per property. */
 function renderObject(props) {
 	if (props.tree.type !== "object") return null;
 	const obj = isObject(props.value) ? props.value : {};
@@ -297,6 +302,7 @@ function renameRecordKey(obj, oldKey, newKey) {
 	for (const [k, v] of Object.entries(obj)) renamed[k === oldKey ? newKey : k] = v;
 	return renamed;
 }
+/** Headless renderer for `RecordField` — editable key/value rows with add/remove controls. */
 function renderRecord(props) {
 	if (props.tree.type !== "record") return null;
 	const obj = isObject(props.value) ? props.value : {};
@@ -377,6 +383,7 @@ function renderRecord(props) {
 		})]
 	});
 }
+/** Headless renderer for `ArrayField` — ordered list with add/remove controls. */
 function renderArray(props) {
 	if (props.tree.type !== "array") return null;
 	const arr = Array.isArray(props.value) ? props.value : [];
@@ -396,6 +403,7 @@ function renderArray(props) {
 		})
 	});
 }
+/** Headless renderer for plain `UnionField` — picks the matching option and renders it. */
 function renderUnion(props) {
 	const options = props.tree.type === "union" || props.tree.type === "discriminatedUnion" ? props.tree.options : void 0;
 	if (options === void 0 || options.length === 0) {
@@ -408,6 +416,7 @@ function renderUnion(props) {
 	if (firstOption !== void 0) return toReactNode(props.renderChild(firstOption, props.value, props.onChange));
 	return /* @__PURE__ */ jsx("span", { children: "—" });
 }
+/** Headless renderer for `DiscriminatedUnionField` — tabbed UI driven by the discriminator. */
 function renderDiscriminatedUnion(props) {
 	if (props.tree.type !== "discriminatedUnion") {
 		if (props.value === void 0 || props.value === null) return /* @__PURE__ */ jsx("span", { children: "—" });
@@ -533,6 +542,7 @@ function DiscriminatedUnionTabs({ options, optionLabels, activeIndex, path, disc
 		children: activeOption !== void 0 && toReactNode(props.renderChild(activeOption, props.value, props.onChange))
 	})] });
 }
+/** Headless renderer for `FileField` — plain `<input type="file">`. */
 function renderFile(props) {
 	const id = inputId(props.path);
 	const accept = props.constraints.mimeTypes?.join(",");
@@ -701,6 +711,7 @@ function renderNegation(props) {
 		]
 	});
 }
+/** Headless renderer for `UnknownField` — JSON-encoded fallback for unconstrained values. */
 function renderUnknown(props) {
 	const id = inputId(props.path);
 	if (props.readOnly) {

package/dist/{ref-TdeMfaV_.d.mts → ref-CPh8rKQ3.d.mts}

@@ -1,4 +1,4 @@
-import { i as DiagnosticsOptions } from "./diagnostics-Cbwak-ZX.mjs";
+import { i as DiagnosticsOptions } from "./diagnostics-ByEzkjrA.mjs";
 
 //#region src/core/ref.d.ts
 /**

package/dist/{renderer-Ul9taFYp.d.mts → renderer-OaOz-n6-.d.mts}

@@ -1,4 +1,4 @@
-import { E as StringConstraints, f as FileConstraints, j as WalkedField, t as ArrayConstraints, w as SchemaMeta, x as ObjectConstraints, y as NumberConstraints } from "./types-BTB73MB8.mjs";
+import { E as StringConstraints, f as FileConstraints, j as WalkedField, t as ArrayConstraints, w as SchemaMeta, x as ObjectConstraints, y as NumberConstraints } from "./types-C2Ay1FEh.mjs";
 
 //#region src/core/renderer.d.ts
 /**
@@ -93,7 +93,18 @@ interface HtmlRenderProps extends BaseFieldProps {
  * from `tree.editability`.
  */
 declare function buildRenderProps(tree: WalkedField, value: unknown, onChange: ((next: unknown) => void) | undefined, renderChild: RenderProps["renderChild"], path: string): RenderProps;
+/**
+ * Signature for a React render function attached to a
+ * {@link ComponentResolver}. Receives the per-field {@link RenderProps}
+ * built by the walker and returns any ReactNode-compatible value.
+ */
 type RenderFunction = (props: RenderProps) => unknown;
+/**
+ * Theme adapter — maps every schema field type to its React renderer.
+ * Unset keys fall back to the headless resolver. Pass to
+ * `SchemaProvider` (or `SchemaView.resolver`) to drive every
+ * schema-driven render with a specific theme.
+ */
 interface ComponentResolver {
   string?: RenderFunction;
   number?: RenderFunction;
@@ -140,6 +151,11 @@ interface HtmlResolver {
   never?: HtmlRenderFunction;
   unknown?: HtmlRenderFunction;
 }
+/**
+ * Canonical list of resolver keys, one per {@link WalkedField} variant.
+ * Iterated by the resolver merge helpers so adding a new key here is the
+ * single point of change when a new field variant is introduced.
+ */
 declare const RESOLVER_KEYS: readonly ["string", "number", "boolean", "null", "enum", "object", "array", "tuple", "record", "union", "discriminatedUnion", "conditional", "negation", "literal", "file", "never", "unknown"];
 type ResolverKey = (typeof RESOLVER_KEYS)[number];
 /**

package/dist/themes/mantine.d.mts

@@ -1,13 +1,17 @@
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { r as ComponentResolver } from "../renderer-OaOz-n6-.mjs";
 
 //#region src/themes/mantine.d.ts
 /**
- * Register real Mantine components for the resolver to use.
- * Call once at app startup before rendering.
+ * Inject real Mantine element types into the resolver. Call once at
+ * application startup before rendering any schema-driven component so
+ * that {@link mantineResolver}'s renderers delegate to the supplied
+ * Mantine primitives.
  *
  * `Text` is required so read-only scalars render as a styled Mantine
  * `<Text>` element instead of a bare `<span>`, matching the visual
  * weight of the editable variants.
+ *
+ * @group Themes
  */
 declare function registerMantineComponents(components: {
   TextInput: React.ElementType;
@@ -17,6 +21,28 @@ declare function registerMantineComponents(components: {
   Fieldset: React.ElementType;
   Text: React.ElementType;
 }): void;
+/**
+ * Component resolver mapping schema field types to Mantine primitives —
+ * `TextInput`, `NumberInput`, `Switch`, `Select`, `Fieldset`, `Text`.
+ *
+ * Pass to `SchemaProvider` to render schema-driven UI through Mantine.
+ * Requires `@mantine/core` installed in the consuming project and a
+ * one-time call to {@link registerMantineComponents} to inject the
+ * actual Mantine element types.
+ *
+ * @group Themes
+ * @example
+ * ```tsx
+ * import { TextInput, NumberInput, Switch, Select, Fieldset, Text } from "@mantine/core";
+ * import { mantineResolver, registerMantineComponents } from "schema-components/themes/mantine";
+ *
+ * registerMantineComponents({ TextInput, NumberInput, Switch, Select, Fieldset, Text });
+ *
+ * <SchemaProvider resolver={mantineResolver}>
+ *   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+ * </SchemaProvider>
+ * ```
+ */
 declare const mantineResolver: ComponentResolver;
 //#endregion
 export { mantineResolver, registerMantineComponents };

package/dist/themes/mantine.mjs

@@ -20,12 +20,16 @@ let MantineSelect = (props) => /* @__PURE__ */ jsx("select", { ...props });
 let MantineFieldset = (props) => /* @__PURE__ */ jsx("fieldset", { ...props });
 let MantineText = (props) => /* @__PURE__ */ jsx("span", { ...props });
 /**
-* Register real Mantine components for the resolver to use.
-* Call once at app startup before rendering.
+* Inject real Mantine element types into the resolver. Call once at
+* application startup before rendering any schema-driven component so
+* that {@link mantineResolver}'s renderers delegate to the supplied
+* Mantine primitives.
 *
 * `Text` is required so read-only scalars render as a styled Mantine
 * `<Text>` element instead of a bare `<span>`, matching the visual
 * weight of the editable variants.
+*
+* @group Themes
 */
 function registerMantineComponents(components) {
 	MantineTextInput = components.TextInput;
@@ -156,6 +160,28 @@ function buildResolver() {
 	if (headlessResolver.unknown !== void 0) resolver.unknown = headlessResolver.unknown;
 	return resolver;
 }
+/**
+* Component resolver mapping schema field types to Mantine primitives —
+* `TextInput`, `NumberInput`, `Switch`, `Select`, `Fieldset`, `Text`.
+*
+* Pass to `SchemaProvider` to render schema-driven UI through Mantine.
+* Requires `@mantine/core` installed in the consuming project and a
+* one-time call to {@link registerMantineComponents} to inject the
+* actual Mantine element types.
+*
+* @group Themes
+* @example
+* ```tsx
+* import { TextInput, NumberInput, Switch, Select, Fieldset, Text } from "@mantine/core";
+* import { mantineResolver, registerMantineComponents } from "schema-components/themes/mantine";
+*
+* registerMantineComponents({ TextInput, NumberInput, Switch, Select, Fieldset, Text });
+*
+* <SchemaProvider resolver={mantineResolver}>
+*   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+* </SchemaProvider>
+* ```
+*/
 const mantineResolver = buildResolver();
 //#endregion
 export { mantineResolver, registerMantineComponents };

package/dist/themes/mui.d.mts

@@ -1,8 +1,13 @@
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { r as ComponentResolver } from "../renderer-OaOz-n6-.mjs";
 
 //#region src/themes/mui.d.ts
 /**
- * Register real MUI components. Call once at app startup.
+ * Inject real MUI element types into the resolver. Call once at
+ * application startup before rendering any schema-driven component so
+ * that {@link muiResolver}'s renderers delegate to the supplied MUI
+ * primitives.
+ *
+ * @group Themes
  */
 declare function registerMuiComponents(components: {
   TextField: React.ElementType;
@@ -12,6 +17,28 @@ declare function registerMuiComponents(components: {
   MenuItem: React.ElementType;
   FormControlLabel: React.ElementType;
 }): void;
+/**
+ * Component resolver mapping schema field types to MUI (Material UI)
+ * primitives — `TextField`, `Checkbox`, `Typography`, etc.
+ *
+ * Pass to `SchemaProvider` to render schema-driven UI through MUI.
+ * Requires `@mui/material` installed in the consuming project and a
+ * one-time call to {@link registerMuiComponents} to inject the actual
+ * MUI element types.
+ *
+ * @group Themes
+ * @example
+ * ```tsx
+ * import { TextField, Checkbox, Typography, Box, MenuItem, FormControlLabel } from "@mui/material";
+ * import { muiResolver, registerMuiComponents } from "schema-components/themes/mui";
+ *
+ * registerMuiComponents({ TextField, Checkbox, Typography, Box, MenuItem, FormControlLabel });
+ *
+ * <SchemaProvider resolver={muiResolver}>
+ *   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+ * </SchemaProvider>
+ * ```
+ */
 declare const muiResolver: ComponentResolver;
 //#endregion
 export { muiResolver, registerMuiComponents };

package/dist/themes/mui.mjs

@@ -2,8 +2,8 @@ import { isObject } from "../core/guards.mjs";
 import { sortFieldsByOrder } from "../core/fieldOrder.mjs";
 import { inputId, toReactNode } from "../react/headlessRenderers.mjs";
 import { headlessResolver } from "../react/headless.mjs";
-import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
 //#region src/themes/mui.tsx
 function ariaRequired(tree) {
 	return { required: tree.isOptional === false };
@@ -212,7 +212,12 @@ let MuiFormControlLabel = (props) => {
 	});
 };
 /**
-* Register real MUI components. Call once at app startup.
+* Inject real MUI element types into the resolver. Call once at
+* application startup before rendering any schema-driven component so
+* that {@link muiResolver}'s renderers delegate to the supplied MUI
+* primitives.
+*
+* @group Themes
 */
 function registerMuiComponents(components) {
 	MuiTextField = components.TextField;
@@ -239,6 +244,28 @@ function buildResolver() {
 	if (headlessResolver.unknown !== void 0) resolver.unknown = headlessResolver.unknown;
 	return resolver;
 }
+/**
+* Component resolver mapping schema field types to MUI (Material UI)
+* primitives — `TextField`, `Checkbox`, `Typography`, etc.
+*
+* Pass to `SchemaProvider` to render schema-driven UI through MUI.
+* Requires `@mui/material` installed in the consuming project and a
+* one-time call to {@link registerMuiComponents} to inject the actual
+* MUI element types.
+*
+* @group Themes
+* @example
+* ```tsx
+* import { TextField, Checkbox, Typography, Box, MenuItem, FormControlLabel } from "@mui/material";
+* import { muiResolver, registerMuiComponents } from "schema-components/themes/mui";
+*
+* registerMuiComponents({ TextField, Checkbox, Typography, Box, MenuItem, FormControlLabel });
+*
+* <SchemaProvider resolver={muiResolver}>
+*   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+* </SchemaProvider>
+* ```
+*/
 const muiResolver = buildResolver();
 //#endregion
 export { muiResolver, registerMuiComponents };

package/dist/themes/radix.d.mts

@@ -1,9 +1,13 @@
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { r as ComponentResolver } from "../renderer-OaOz-n6-.mjs";
 
 //#region src/themes/radix.d.ts
 /**
- * Register real Radix Themes components for the resolver to use.
- * Call once at app startup before rendering.
+ * Inject real Radix Themes element types into the resolver. Call once
+ * at application startup before rendering any schema-driven component
+ * so that {@link radixResolver}'s renderers delegate to the supplied
+ * Radix primitives.
+ *
+ * @group Themes
  */
 declare function registerRadixComponents(components: {
   Box: React.ElementType;
@@ -16,6 +20,39 @@ declare function registerRadixComponents(components: {
   Text: React.ElementType;
   TextField: React.ElementType;
 }): void;
+/**
+ * Component resolver mapping schema field types to Radix Themes
+ * primitives — `Box`, `Checkbox`, `Flex`, `Select.*`, `Text`,
+ * `TextField`.
+ *
+ * Pass to `SchemaProvider` to render schema-driven UI through Radix
+ * Themes. Requires `@radix-ui/themes` installed in the consuming
+ * project and a one-time call to {@link registerRadixComponents} to
+ * inject the actual Radix element types.
+ *
+ * @group Themes
+ * @example
+ * ```tsx
+ * import * as Radix from "@radix-ui/themes";
+ * import { radixResolver, registerRadixComponents } from "schema-components/themes/radix";
+ *
+ * registerRadixComponents({
+ *   Box: Radix.Box,
+ *   Checkbox: Radix.Checkbox,
+ *   Flex: Radix.Flex,
+ *   SelectRoot: Radix.Select.Root,
+ *   SelectTrigger: Radix.Select.Trigger,
+ *   SelectContent: Radix.Select.Content,
+ *   SelectItem: Radix.Select.Item,
+ *   Text: Radix.Text,
+ *   TextField: Radix.TextField.Root,
+ * });
+ *
+ * <SchemaProvider resolver={radixResolver}>
+ *   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+ * </SchemaProvider>
+ * ```
+ */
 declare const radixResolver: ComponentResolver;
 //#endregion
 export { radixResolver, registerRadixComponents };

package/dist/themes/radix.mjs

@@ -25,8 +25,12 @@ let RadixSelectItem = (props) => /* @__PURE__ */ jsx("option", { ...props });
 let RadixText = (props) => /* @__PURE__ */ jsx("span", { ...props });
 let RadixTextField = (props) => /* @__PURE__ */ jsx("input", { ...stripChildren(props) });
 /**
-* Register real Radix Themes components for the resolver to use.
-* Call once at app startup before rendering.
+* Inject real Radix Themes element types into the resolver. Call once
+* at application startup before rendering any schema-driven component
+* so that {@link radixResolver}'s renderers delegate to the supplied
+* Radix primitives.
+*
+* @group Themes
 */
 function registerRadixComponents(components) {
 	RadixBox = components.Box;
@@ -191,6 +195,39 @@ function buildResolver() {
 	if (headlessResolver.unknown !== void 0) resolver.unknown = headlessResolver.unknown;
 	return resolver;
 }
+/**
+* Component resolver mapping schema field types to Radix Themes
+* primitives — `Box`, `Checkbox`, `Flex`, `Select.*`, `Text`,
+* `TextField`.
+*
+* Pass to `SchemaProvider` to render schema-driven UI through Radix
+* Themes. Requires `@radix-ui/themes` installed in the consuming
+* project and a one-time call to {@link registerRadixComponents} to
+* inject the actual Radix element types.
+*
+* @group Themes
+* @example
+* ```tsx
+* import * as Radix from "@radix-ui/themes";
+* import { radixResolver, registerRadixComponents } from "schema-components/themes/radix";
+*
+* registerRadixComponents({
+*   Box: Radix.Box,
+*   Checkbox: Radix.Checkbox,
+*   Flex: Radix.Flex,
+*   SelectRoot: Radix.Select.Root,
+*   SelectTrigger: Radix.Select.Trigger,
+*   SelectContent: Radix.Select.Content,
+*   SelectItem: Radix.Select.Item,
+*   Text: Radix.Text,
+*   TextField: Radix.TextField.Root,
+* });
+*
+* <SchemaProvider resolver={radixResolver}>
+*   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+* </SchemaProvider>
+* ```
+*/
 const radixResolver = buildResolver();
 //#endregion
 export { radixResolver, registerRadixComponents };