schema-components 1.28.2 → 2.0.0

package/dist/themes/mui.mjs

@@ -1,244 +1,308 @@
 import { isObject } from "../core/guards.mjs";
 import { sortFieldsByOrder } from "../core/fieldOrder.mjs";
+import { isFieldRequired } from "../react/a11y.mjs";
 import { inputId, toReactNode } from "../react/headlessRenderers.mjs";
-import { headlessResolver } from "../react/headless.mjs";
-import { isValidElement } from "react";
+import { FieldShell } from "../react/fieldShell.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
 //#region src/themes/mui.tsx
-function ariaRequired(tree) {
-	return { required: tree.isOptional === false };
-}
-function renderStringInput(props) {
-	const strValue = typeof props.value === "string" ? props.value : "";
-	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
-	const id = inputId(props.path);
-	if (props.readOnly) return /* @__PURE__ */ jsx(MuiTypography, {
-		id,
-		variant: "body2",
-		children: strValue || "—"
-	});
-	return /* @__PURE__ */ jsx(MuiTextField, {
-		id,
-		label,
-		type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
-		value: props.writeOnly ? "" : strValue,
-		onChange: (e) => {
-			props.onChange(e.target.value);
-		},
-		fullWidth: true,
-		size: "small",
-		variant: "outlined",
-		inputProps: {
-			minLength: props.constraints.minLength,
-			maxLength: props.constraints.maxLength
-		},
-		...ariaRequired(props.tree)
-	});
+/**
+* MUI's TextField / Checkbox use the `required` prop to surface the
+* native asterisk and `aria-required` together. Mirror it from the
+* walked field so callers do not need a second check.
+*/
+function muiRequired(props) {
+	return { required: isFieldRequired(props.tree) };
 }
-function renderNumberInput(props) {
-	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
-	const id = inputId(props.path);
-	if (props.readOnly) {
-		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(MuiTypography, {
+function makeRenderStringInput(components) {
+	const { TextField, Typography } = components;
+	return function renderStringInput(props) {
+		const strValue = typeof props.value === "string" ? props.value : "";
+		const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+		const id = inputId(props.path);
+		if (props.readOnly) return /* @__PURE__ */ jsx(Typography, {
 			id,
 			variant: "body2",
-			children: "—"
+			children: strValue || "—"
 		});
-		return /* @__PURE__ */ jsx(MuiTypography, {
-			id,
-			variant: "body2",
-			children: props.value.toLocaleString()
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsx(TextField, {
+				id,
+				label,
+				type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
+				value: props.writeOnly ? "" : strValue,
+				onChange: (e) => {
+					props.onChange(e.target.value);
+				},
+				fullWidth: true,
+				size: "small",
+				variant: "outlined",
+				inputProps: {
+					minLength: props.constraints.minLength,
+					maxLength: props.constraints.maxLength,
+					...aria
+				},
+				...muiRequired(props)
+			})
 		});
-	}
-	return /* @__PURE__ */ jsx(MuiTextField, {
-		id,
-		label,
-		type: "number",
-		value: props.writeOnly ? "" : typeof props.value === "number" ? props.value : "",
-		onChange: (e) => {
-			props.onChange(Number(e.target.value));
-		},
-		fullWidth: true,
-		size: "small",
-		variant: "outlined",
-		inputProps: {
-			min: props.constraints.minimum,
-			max: props.constraints.maximum
-		},
-		...ariaRequired(props.tree)
-	});
+	};
 }
-function renderBooleanInput(props) {
-	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
-	const id = inputId(props.path);
-	if (props.readOnly) {
-		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(MuiTypography, {
-			id,
-			variant: "body2",
-			children: "—"
+function makeRenderNumberInput(components) {
+	const { TextField, Typography } = components;
+	return function renderNumberInput(props) {
+		const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+		const id = inputId(props.path);
+		if (props.readOnly) {
+			if (typeof props.value !== "number") return /* @__PURE__ */ jsx(Typography, {
+				id,
+				variant: "body2",
+				children: "—"
+			});
+			return /* @__PURE__ */ jsx(Typography, {
+				id,
+				variant: "body2",
+				children: props.value.toLocaleString()
+			});
+		}
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsx(TextField, {
+				id,
+				label,
+				type: "number",
+				value: props.writeOnly ? "" : typeof props.value === "number" ? props.value : "",
+				onChange: (e) => {
+					props.onChange(Number(e.target.value));
+				},
+				fullWidth: true,
+				size: "small",
+				variant: "outlined",
+				inputProps: {
+					min: props.constraints.minimum,
+					max: props.constraints.maximum,
+					...aria
+				},
+				...muiRequired(props)
+			})
 		});
-		return /* @__PURE__ */ jsx(MuiTypography, {
+	};
+}
+function makeRenderBooleanInput(components) {
+	const { Checkbox, Typography, FormControlLabel } = components;
+	return function renderBooleanInput(props) {
+		const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+		const id = inputId(props.path);
+		if (props.readOnly) {
+			if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(Typography, {
+				id,
+				variant: "body2",
+				children: "—"
+			});
+			return /* @__PURE__ */ jsx(Typography, {
+				id,
+				variant: "body2",
+				children: props.value ? "Yes" : "No"
+			});
+		}
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsx(FormControlLabel, {
+				control: /* @__PURE__ */ jsx(Checkbox, {
+					id,
+					checked: props.writeOnly ? false : props.value === true,
+					onChange: (e) => {
+						props.onChange(e.target.checked);
+					},
+					...aria
+				}),
+				label
+			})
+		});
+	};
+}
+function makeRenderEnumInput(components) {
+	const { TextField, Typography, MenuItem } = components;
+	return function renderEnumInput(props) {
+		const enumValue = typeof props.value === "string" ? props.value : "";
+		const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
+		const id = inputId(props.path);
+		if (props.readOnly) return /* @__PURE__ */ jsx(Typography, {
 			id,
 			variant: "body2",
-			children: props.value ? "Yes" : "No"
+			children: enumValue || "—"
 		});
-	}
-	return /* @__PURE__ */ jsx(MuiFormControlLabel, {
-		control: /* @__PURE__ */ jsx(MuiCheckbox, {
-			id,
-			checked: props.writeOnly ? false : props.value === true,
-			onChange: (e) => {
-				props.onChange(e.target.checked);
-			}
-		}),
-		label
-	});
-}
-function renderEnumInput(props) {
-	const enumValue = typeof props.value === "string" ? props.value : "";
-	const label = typeof props.meta.description === "string" ? props.meta.description : void 0;
-	const id = inputId(props.path);
-	if (props.readOnly) return /* @__PURE__ */ jsx(MuiTypography, {
-		id,
-		variant: "body2",
-		children: enumValue || "—"
-	});
-	return /* @__PURE__ */ jsxs(MuiTextField, {
-		id,
-		select: true,
-		label,
-		value: props.writeOnly ? "" : enumValue,
-		onChange: (e) => {
-			props.onChange(e.target.value);
-		},
-		fullWidth: true,
-		size: "small",
-		variant: "outlined",
-		...ariaRequired(props.tree),
-		children: [/* @__PURE__ */ jsxs(MuiMenuItem, {
-			value: "",
-			children: ["Select", "…"]
-		}), (props.tree.type === "enum" ? props.tree.enumValues : []).map((v) => /* @__PURE__ */ jsx(MuiMenuItem, {
-			value: v,
-			children: v
-		}, v))]
-	});
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsxs(TextField, {
+				id,
+				select: true,
+				label,
+				value: props.writeOnly ? "" : enumValue,
+				onChange: (e) => {
+					props.onChange(e.target.value);
+				},
+				fullWidth: true,
+				size: "small",
+				variant: "outlined",
+				inputProps: aria,
+				...muiRequired(props),
+				children: [/* @__PURE__ */ jsxs(MenuItem, {
+					value: "",
+					children: ["Select", "…"]
+				}), (props.tree.type === "enum" ? props.tree.enumValues : []).map((v) => /* @__PURE__ */ jsx(MenuItem, {
+					value: v,
+					children: v
+				}, v))]
+			})
+		});
+	};
 }
-function renderObjectContainer(props) {
-	if (props.tree.type !== "object") return null;
-	const fields = props.tree.fields;
-	const obj = isObject(props.value) ? props.value : {};
-	return /* @__PURE__ */ jsxs(MuiBox, {
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: 2
-		},
-		children: [typeof props.meta.description === "string" && /* @__PURE__ */ jsx(MuiTypography, {
-			variant: "h6",
-			children: props.meta.description
-		}), sortFieldsByOrder(fields).map(([key, field]) => {
-			const childValue = obj[key];
-			const childOnChange = (v) => {
-				const updated = {};
-				for (const [k, val] of Object.entries(obj)) updated[k] = val;
-				updated[key] = v;
-				props.onChange(updated);
-			};
-			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(field, childValue, childOnChange, key)) }, key);
-		})]
-	});
+function makeRenderObjectContainer(components) {
+	const { Box, Typography } = components;
+	return function renderObjectContainer(props) {
+		if (props.tree.type !== "object") return null;
+		const fields = props.tree.fields;
+		const obj = isObject(props.value) ? props.value : {};
+		return /* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 2
+			},
+			children: [typeof props.meta.description === "string" && /* @__PURE__ */ jsx(Typography, {
+				variant: "h6",
+				children: props.meta.description
+			}), sortFieldsByOrder(fields).map(([key, field]) => {
+				const childValue = obj[key];
+				const childOnChange = (v) => {
+					const updated = {};
+					for (const [k, val] of Object.entries(obj)) updated[k] = val;
+					updated[key] = v;
+					props.onChange(updated);
+				};
+				return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(field, childValue, childOnChange, key)) }, key);
+			})]
+		});
+	};
 }
-function renderArrayContainer(props) {
-	const arr = Array.isArray(props.value) ? props.value : [];
-	if (props.tree.type !== "array") return null;
-	const element = props.tree.element;
-	if (element === void 0) return null;
-	return /* @__PURE__ */ jsx(MuiBox, {
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: 1
-		},
-		children: arr.map((item, i) => {
-			const childOnChange = (v) => {
-				const next = arr.slice();
-				next[i] = v;
-				props.onChange(next);
-			};
-			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange, `[${String(i)}]`)) }, String(i));
-		})
-	});
+function makeRenderArrayContainer(components) {
+	const { Box } = components;
+	return function renderArrayContainer(props) {
+		const arr = Array.isArray(props.value) ? props.value : [];
+		if (props.tree.type !== "array") return null;
+		const element = props.tree.element;
+		if (element === void 0) return null;
+		return /* @__PURE__ */ jsx(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 1
+			},
+			children: arr.map((item, i) => {
+				const childOnChange = (v) => {
+					const next = arr.slice();
+					next[i] = v;
+					props.onChange(next);
+				};
+				return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange, `[${String(i)}]`)) }, String(i));
+			})
+		});
+	};
 }
 /**
-* MUI components are not bundled with this adapter.
-* Instead, the resolver uses thin wrapper components that delegate to
-* the consuming project's MUI installation.
-*
-* This avoids a hard dependency on @mui/material while providing
-* type-safe rendering. If MUI is not installed, these wrappers
-* render basic HTML elements as fallback.
-*
-* To use real MUI components, wrap your app with MuiProvider:
-*   import { MuiProvider } from "schema-components/themes/mui";
-*   import { TextField, Checkbox, ... } from "@mui/material";
-*
-*   <MuiProvider
-*     TextField={TextField}
-*     Checkbox={Checkbox}
-*     ...
-*   >
-*     <SchemaComponent ... />
-*   </MuiProvider>
+* The default `muiResolver` export below is built against these plain
+* HTML stubs so consumers can pull `muiResolver` into a story or test
+* without first wiring up `@mui/material`. Production usage should call
+* `createMuiResolver(...)` directly with the real MUI element types.
 */
 function stripChildren(props) {
 	const rest = { ...props };
 	if ("children" in rest) delete rest.children;
 	return rest;
 }
-let MuiTextField = (props) => /* @__PURE__ */ jsx("input", { ...stripChildren(props) });
-let MuiCheckbox = (props) => /* @__PURE__ */ jsx("input", {
-	type: "checkbox",
-	...stripChildren(props)
-});
-let MuiTypography = (props) => /* @__PURE__ */ jsx("span", { ...props });
-let MuiBox = (props) => /* @__PURE__ */ jsx("div", { ...props });
-let MuiMenuItem = (props) => /* @__PURE__ */ jsx("option", { ...props });
-let MuiFormControlLabel = (props) => {
-	const { control, label, ...rest } = props;
-	return /* @__PURE__ */ jsxs("label", {
-		...rest,
-		children: [isValidElement(control) ? control : null, typeof label === "string" ? label : null]
-	});
+const STUB_COMPONENTS = {
+	TextField: (props) => /* @__PURE__ */ jsx("input", { ...stripChildren(props) }),
+	Checkbox: (props) => /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		...stripChildren(props)
+	}),
+	Typography: (props) => /* @__PURE__ */ jsx("span", { ...props }),
+	Box: (props) => /* @__PURE__ */ jsx("div", { ...props }),
+	MenuItem: (props) => /* @__PURE__ */ jsx("option", { ...props }),
+	FormControlLabel: (props) => {
+		const { control, label, ...rest } = props;
+		return /* @__PURE__ */ jsxs("label", {
+			...rest,
+			children: [isValidElement(control) ? control : null, typeof label === "string" ? label : null]
+		});
+	}
 };
 /**
-* Register real MUI components. Call once at app startup.
+* Build a MUI-flavoured {@link ComponentResolver} bound to the supplied
+* element types. Each render function captures the supplied components
+* in a closure so two consumers can build different resolvers from the
+* same package without leaking element types through module-level
+* mutable state — making the adapter safe to use in SSR and multi-tenant
+* environments.
+*
+* Returns only the keys this theme actually overrides. The runtime
+* `mergeResolvers` call inside `<SchemaComponent>` / `<SchemaView>`
+* fills any unset keys from `headlessResolver`, so consumers never see
+* an unhandled field type even though this resolver leaves variants
+* like `union`, `discriminatedUnion`, `record`, `file`, and `unknown`
+* unset on purpose.
+*
+* @group Themes
 */
-function registerMuiComponents(components) {
-	MuiTextField = components.TextField;
-	MuiCheckbox = components.Checkbox;
-	MuiTypography = components.Typography;
-	MuiBox = components.Box;
-	MuiMenuItem = components.MenuItem;
-	MuiFormControlLabel = components.FormControlLabel;
-}
-function buildResolver() {
-	const resolver = {
-		string: renderStringInput,
-		number: renderNumberInput,
-		boolean: renderBooleanInput,
-		enum: renderEnumInput,
-		object: renderObjectContainer,
-		array: renderArrayContainer
+function createMuiResolver(components) {
+	return {
+		string: makeRenderStringInput(components),
+		number: makeRenderNumberInput(components),
+		boolean: makeRenderBooleanInput(components),
+		enum: makeRenderEnumInput(components),
+		object: makeRenderObjectContainer(components),
+		array: makeRenderArrayContainer(components)
 	};
-	if (headlessResolver.literal !== void 0) resolver.literal = headlessResolver.literal;
-	if (headlessResolver.union !== void 0) resolver.union = headlessResolver.union;
-	if (headlessResolver.discriminatedUnion !== void 0) resolver.discriminatedUnion = headlessResolver.discriminatedUnion;
-	if (headlessResolver.record !== void 0) resolver.record = headlessResolver.record;
-	if (headlessResolver.file !== void 0) resolver.file = headlessResolver.file;
-	if (headlessResolver.unknown !== void 0) resolver.unknown = headlessResolver.unknown;
-	return resolver;
 }
-const muiResolver = buildResolver();
+/**
+* Component resolver mapping schema field types to MUI (Material UI)
+* primitives — `TextField`, `Checkbox`, `Typography`, etc.
+*
+* This default export is built against minimal HTML stubs so it is
+* usable without wiring up `@mui/material` first — handy for tests,
+* stories, and tree-shaken bundles that want the resolver shape
+* without the runtime dependency. For production usage call
+* {@link createMuiResolver} with the real MUI element types.
+*
+* @group Themes
+* @example
+* ```tsx
+* import TextField from "@mui/material/TextField";
+* import Checkbox from "@mui/material/Checkbox";
+* import Typography from "@mui/material/Typography";
+* import Box from "@mui/material/Box";
+* import MenuItem from "@mui/material/MenuItem";
+* import FormControlLabel from "@mui/material/FormControlLabel";
+* import { createMuiResolver } from "schema-components/themes/mui";
+*
+* const muiResolver = createMuiResolver({
+*   TextField, Checkbox, Typography, Box, MenuItem, FormControlLabel,
+* });
+*
+* <SchemaProvider resolver={muiResolver}>
+*   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+* </SchemaProvider>
+* ```
+*/
+const muiResolver = createMuiResolver(STUB_COMPONENTS);
 //#endregion
-export { muiResolver, registerMuiComponents };
+export { createMuiResolver, muiResolver };

package/dist/themes/radix.d.mts

@@ -1,21 +1,73 @@
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { ComponentResolver } from "../core/renderer.mjs";
+import { ElementType } from "react";
 
 //#region src/themes/radix.d.ts
 /**
- * Register real Radix Themes components for the resolver to use.
- * Call once at app startup before rendering.
+ * Element types the Radix resolver renders into. Each Select.* slot is
+ * passed in separately because Radix exposes those parts as nested
+ * properties on the `Select` namespace; flattening them into the
+ * dependency bag lets the resolver pass them straight to JSX without
+ * touching `Select.Root`-style member expressions at render time.
+ */
+interface RadixComponents {
+  Box: ElementType;
+  Checkbox: ElementType;
+  Flex: ElementType;
+  SelectRoot: ElementType;
+  SelectTrigger: ElementType;
+  SelectContent: ElementType;
+  SelectItem: ElementType;
+  Text: ElementType;
+  TextField: ElementType;
+}
+/**
+ * Build a Radix-flavoured {@link ComponentResolver} bound to the
+ * supplied element types. Each render function captures the supplied
+ * components in a closure so two consumers can build different
+ * resolvers from the same package without leaking element types
+ * through module-level mutable state.
+ *
+ * Returns only the keys this theme actually overrides. The runtime
+ * `mergeResolvers` call inside `<SchemaComponent>` / `<SchemaView>`
+ * fills unset keys from `headlessResolver`, so variants this adapter
+ * leaves unset (literal, union, discriminatedUnion, array, record,
+ * file, unknown, …) still render via the headless fallback.
+ *
+ * @group Themes
+ */
+declare function createRadixResolver(components: RadixComponents): ComponentResolver;
+/**
+ * Component resolver mapping schema field types to Radix Themes
+ * primitives — `Box`, `Checkbox`, `Flex`, `Select.*`, `Text`,
+ * `TextField`.
+ *
+ * Built against minimal HTML stubs so the resolver is usable without
+ * wiring up `@radix-ui/themes` first — production usage should call
+ * {@link createRadixResolver} with real Radix element types.
+ *
+ * @group Themes
+ * @example
+ * ```tsx
+ * import * as Radix from "@radix-ui/themes";
+ * import { createRadixResolver } from "schema-components/themes/radix";
+ *
+ * const radixResolver = createRadixResolver({
+ *   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 function registerRadixComponents(components: {
-  Box: React.ElementType;
-  Checkbox: React.ElementType;
-  Flex: React.ElementType;
-  SelectRoot: React.ElementType;
-  SelectTrigger: React.ElementType;
-  SelectContent: React.ElementType;
-  SelectItem: React.ElementType;
-  Text: React.ElementType;
-  TextField: React.ElementType;
-}): void;
 declare const radixResolver: ComponentResolver;
 //#endregion
-export { radixResolver, registerRadixComponents };
+export { RadixComponents, createRadixResolver, radixResolver };