schema-components 1.28.2 → 2.0.0

package/dist/themes/mantine.mjs

@@ -1,161 +1,216 @@
 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 { FieldShell } from "../react/fieldShell.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/themes/mantine.tsx
 function getLabel(props) {
 	if (typeof props.meta.description === "string") return props.meta.description;
 }
-let MantineTextInput = (props) => /* @__PURE__ */ jsx("input", { ...props });
-let MantineNumberInput = (props) => /* @__PURE__ */ jsx("input", {
-	type: "number",
-	...props
-});
-let MantineSwitch = (props) => /* @__PURE__ */ jsx("input", {
-	type: "checkbox",
-	...props
-});
-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.
-*
-* `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.
-*/
-function registerMantineComponents(components) {
-	MantineTextInput = components.TextInput;
-	MantineNumberInput = components.NumberInput;
-	MantineSwitch = components.Switch;
-	MantineSelect = components.Select;
-	MantineFieldset = components.Fieldset;
-	MantineText = components.Text;
-}
-function renderStringInput(props) {
-	const strValue = typeof props.value === "string" ? props.value : "";
-	const label = getLabel(props);
-	const id = inputId(props.path);
-	if (props.readOnly) return /* @__PURE__ */ jsx(MantineText, {
-		id,
-		children: strValue || "—"
-	});
-	return /* @__PURE__ */ jsx(MantineTextInput, {
-		id,
-		label,
-		value: props.writeOnly ? "" : strValue,
-		onChange: (e) => {
-			props.onChange(e.target.value);
-		}
-	});
-}
-function renderNumberInput(props) {
-	const label = getLabel(props);
-	const id = inputId(props.path);
-	if (props.readOnly) {
-		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(MantineText, {
+function makeRenderStringInput(components) {
+	const { TextInput, Text } = components;
+	return function renderStringInput(props) {
+		const strValue = typeof props.value === "string" ? props.value : "";
+		const label = getLabel(props);
+		const id = inputId(props.path);
+		if (props.readOnly) return /* @__PURE__ */ jsx(Text, {
 			id,
-			children: "—"
+			children: strValue || "—"
 		});
-		return /* @__PURE__ */ jsx(MantineText, {
-			id,
-			children: props.value.toLocaleString()
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsx(TextInput, {
+				id,
+				label,
+				value: props.writeOnly ? "" : strValue,
+				onChange: (e) => {
+					props.onChange(e.target.value);
+				},
+				...aria
+			})
 		});
-	}
-	return /* @__PURE__ */ jsx(MantineNumberInput, {
-		id,
-		label,
-		value: props.writeOnly ? void 0 : typeof props.value === "number" ? props.value : void 0,
-		onChange: (v) => {
-			if (typeof v === "number") props.onChange(v);
+	};
+}
+function makeRenderNumberInput(components) {
+	const { NumberInput, Text } = components;
+	return function renderNumberInput(props) {
+		const label = getLabel(props);
+		const id = inputId(props.path);
+		if (props.readOnly) {
+			if (typeof props.value !== "number") return /* @__PURE__ */ jsx(Text, {
+				id,
+				children: "—"
+			});
+			return /* @__PURE__ */ jsx(Text, {
+				id,
+				children: props.value.toLocaleString()
+			});
 		}
-	});
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsx(NumberInput, {
+				id,
+				label,
+				value: props.writeOnly ? void 0 : typeof props.value === "number" ? props.value : void 0,
+				onChange: (v) => {
+					if (typeof v === "number") props.onChange(v);
+				},
+				...aria
+			})
+		});
+	};
 }
-function renderBooleanInput(props) {
-	const label = getLabel(props);
-	const id = inputId(props.path);
-	if (props.readOnly) {
-		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(MantineText, {
-			id,
-			children: "—"
+function makeRenderBooleanInput(components) {
+	const { Switch, Text } = components;
+	return function renderBooleanInput(props) {
+		const label = getLabel(props);
+		const id = inputId(props.path);
+		if (props.readOnly) {
+			if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(Text, {
+				id,
+				children: "—"
+			});
+			return /* @__PURE__ */ jsx(Text, {
+				id,
+				children: props.value ? "Yes" : "No"
+			});
+		}
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsx(Switch, {
+				id,
+				label,
+				checked: props.writeOnly ? false : props.value === true,
+				onChange: (e) => {
+					props.onChange(e.target.checked);
+				},
+				...aria
+			})
 		});
-		return /* @__PURE__ */ jsx(MantineText, {
+	};
+}
+function makeRenderEnumInput(components) {
+	const { Select, Text } = components;
+	return function renderEnumInput(props) {
+		const enumValue = typeof props.value === "string" ? props.value : "";
+		const label = getLabel(props);
+		const id = inputId(props.path);
+		if (props.readOnly) return /* @__PURE__ */ jsx(Text, {
 			id,
-			children: props.value ? "Yes" : "No"
+			children: enumValue || "—"
 		});
-	}
-	return /* @__PURE__ */ jsx(MantineSwitch, {
-		id,
-		label,
-		checked: props.writeOnly ? false : props.value === true,
-		onChange: (e) => {
-			props.onChange(e.target.checked);
-		}
-	});
-}
-function renderEnumInput(props) {
-	const enumValue = typeof props.value === "string" ? props.value : "";
-	const label = getLabel(props);
-	const id = inputId(props.path);
-	if (props.readOnly) return /* @__PURE__ */ jsx(MantineText, {
-		id,
-		children: enumValue || "—"
-	});
-	const enumValues = props.tree.type === "enum" ? props.tree.enumValues : [];
-	return /* @__PURE__ */ jsx(MantineSelect, {
-		id,
-		label,
-		value: props.writeOnly ? null : enumValue || null,
-		onChange: (v) => {
-			if (typeof v === "string") props.onChange(v);
-		},
-		data: enumValues.map((v) => ({
-			value: v,
-			label: v
-		}))
-	});
+		const enumValues = props.tree.type === "enum" ? props.tree.enumValues : [];
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsx(Select, {
+				id,
+				label,
+				value: props.writeOnly ? null : enumValue || null,
+				onChange: (v) => {
+					if (typeof v === "string") props.onChange(v);
+				},
+				data: enumValues.map((v) => ({
+					value: v,
+					label: v
+				})),
+				...aria
+			})
+		});
+	};
 }
-function renderObjectContainer(props) {
-	if (props.tree.type !== "object") return null;
-	const fields = props.tree.fields;
-	const obj = isObject(props.value) ? props.value : {};
-	return /* @__PURE__ */ jsx(MantineFieldset, {
-		legend: getLabel(props),
-		children: sortFieldsByOrder(fields).filter(([, field]) => field.meta.visible !== false).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", {
-				style: { marginBottom: "0.5rem" },
-				children: toReactNode(props.renderChild(field, childValue, childOnChange, key))
-			}, key);
-		})
-	});
+function makeRenderObjectContainer(components) {
+	const { Fieldset } = 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__ */ jsx(Fieldset, {
+			legend: getLabel(props),
+			children: sortFieldsByOrder(fields).filter(([, field]) => field.meta.visible !== false).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", {
+					style: { marginBottom: "0.5rem" },
+					children: toReactNode(props.renderChild(field, childValue, childOnChange, key))
+				}, key);
+			})
+		});
+	};
 }
-function buildResolver() {
-	const resolver = {
-		string: renderStringInput,
-		number: renderNumberInput,
-		boolean: renderBooleanInput,
-		enum: renderEnumInput,
-		object: renderObjectContainer
+const STUB_COMPONENTS = {
+	TextInput: (props) => /* @__PURE__ */ jsx("input", { ...props }),
+	NumberInput: (props) => /* @__PURE__ */ jsx("input", {
+		type: "number",
+		...props
+	}),
+	Switch: (props) => /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		...props
+	}),
+	Select: (props) => /* @__PURE__ */ jsx("select", { ...props }),
+	Fieldset: (props) => /* @__PURE__ */ jsx("fieldset", { ...props }),
+	Text: (props) => /* @__PURE__ */ jsx("span", { ...props })
+};
+/**
+* Build a Mantine-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
+*/
+function createMantineResolver(components) {
+	return {
+		string: makeRenderStringInput(components),
+		number: makeRenderNumberInput(components),
+		boolean: makeRenderBooleanInput(components),
+		enum: makeRenderEnumInput(components),
+		object: makeRenderObjectContainer(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.array !== void 0) resolver.array = headlessResolver.array;
-	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 mantineResolver = buildResolver();
+/**
+* Component resolver mapping schema field types to Mantine primitives —
+* `TextInput`, `NumberInput`, `Switch`, `Select`, `Fieldset`, `Text`.
+*
+* Built against minimal HTML stubs so the resolver is usable without
+* wiring up `@mantine/core` first — production usage should call
+* {@link createMantineResolver} with real Mantine element types.
+*
+* @group Themes
+* @example
+* ```tsx
+* import { TextInput, NumberInput, Switch, Select, Fieldset, Text } from "@mantine/core";
+* import { createMantineResolver } from "schema-components/themes/mantine";
+*
+* const mantineResolver = createMantineResolver({
+*   TextInput, NumberInput, Switch, Select, Fieldset, Text,
+* });
+*
+* <SchemaProvider resolver={mantineResolver}>
+*   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+* </SchemaProvider>
+* ```
+*/
+const mantineResolver = createMantineResolver(STUB_COMPONENTS);
 //#endregion
-export { mantineResolver, registerMantineComponents };
+export { createMantineResolver, mantineResolver };

package/dist/themes/mui.d.mts

@@ -1,17 +1,70 @@
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { ComponentResolver } from "../core/renderer.mjs";
+import { ElementType } from "react";
 
 //#region src/themes/mui.d.ts
 /**
- * Register real MUI components. Call once at app startup.
+ * Element types the MUI resolver renders into. Every slot is the MUI
+ * component the corresponding render function expects to find at the
+ * call site; consumers wire these in once via `createMuiResolver` so
+ * the resolver can be used in SSR and multi-tenant contexts where two
+ * callers might inject different element types.
+ */
+interface MuiComponents {
+  TextField: ElementType;
+  Checkbox: ElementType;
+  Typography: ElementType;
+  Box: ElementType;
+  MenuItem: ElementType;
+  FormControlLabel: ElementType;
+}
+/**
+ * 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
+ */
+declare function createMuiResolver(components: MuiComponents): ComponentResolver;
+/**
+ * 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>
+ * ```
  */
-declare function registerMuiComponents(components: {
-  TextField: React.ElementType;
-  Checkbox: React.ElementType;
-  Typography: React.ElementType;
-  Box: React.ElementType;
-  MenuItem: React.ElementType;
-  FormControlLabel: React.ElementType;
-}): void;
 declare const muiResolver: ComponentResolver;
 //#endregion
-export { muiResolver, registerMuiComponents };
+export { MuiComponents, createMuiResolver, muiResolver };