schema-components 1.28.2 → 2.0.0

package/dist/themes/radix.mjs

@@ -1,7 +1,7 @@
 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/themes/radix.tsx
 function getLabel(props) {
@@ -12,185 +12,250 @@ function stripChildren(props) {
 	if ("children" in rest) delete rest.children;
 	return rest;
 }
-let RadixBox = (props) => /* @__PURE__ */ jsx("div", { ...props });
-let RadixCheckbox = (props) => /* @__PURE__ */ jsx("input", {
-	type: "checkbox",
-	...stripChildren(props)
-});
-let RadixFlex = (props) => /* @__PURE__ */ jsx("div", { ...props });
-let RadixSelectRoot = (props) => /* @__PURE__ */ jsx("select", { ...props });
-let RadixSelectTrigger = (props) => /* @__PURE__ */ jsx("span", { ...props });
-let RadixSelectContent = (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children });
-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.
-*/
-function registerRadixComponents(components) {
-	RadixBox = components.Box;
-	RadixCheckbox = components.Checkbox;
-	RadixFlex = components.Flex;
-	RadixSelectRoot = components.SelectRoot;
-	RadixSelectTrigger = components.SelectTrigger;
-	RadixSelectContent = components.SelectContent;
-	RadixSelectItem = components.SelectItem;
-	RadixText = components.Text;
-	RadixTextField = components.TextField;
-}
-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(RadixText, {
-		id,
-		children: strValue || "—"
-	});
-	return /* @__PURE__ */ jsxs(RadixBox, { children: [label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
-		as: "label",
-		size: "2",
-		weight: "medium",
-		htmlFor: id,
-		children: label
-	}), /* @__PURE__ */ jsx(RadixTextField, {
-		id,
-		type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
-		value: props.writeOnly ? "" : strValue,
-		onChange: (e) => {
-			props.onChange(e.target.value);
-		},
-		mt: "1"
-	})] });
-}
-function renderNumberInput(props) {
-	const label = getLabel(props);
-	const id = inputId(props.path);
-	if (props.readOnly) {
-		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(RadixText, {
+function makeRenderStringInput(components) {
+	const { Box, Text, TextField } = 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(RadixText, {
-			id,
-			children: props.value.toLocaleString()
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsxs(Box, { children: [label !== void 0 && /* @__PURE__ */ jsx(Text, {
+				as: "label",
+				size: "2",
+				weight: "medium",
+				htmlFor: id,
+				children: label
+			}), /* @__PURE__ */ jsx(TextField, {
+				id,
+				type: props.constraints.format === "email" ? "email" : props.constraints.format === "uri" ? "url" : "text",
+				value: props.writeOnly ? "" : strValue,
+				onChange: (e) => {
+					props.onChange(e.target.value);
+				},
+				mt: "1",
+				...aria
+			})] })
 		});
-	}
-	return /* @__PURE__ */ jsxs(RadixBox, { children: [label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
-		as: "label",
-		size: "2",
-		weight: "medium",
-		htmlFor: id,
-		children: label
-	}), /* @__PURE__ */ jsx(RadixTextField, {
-		id,
-		type: "number",
-		value: props.writeOnly ? "" : typeof props.value === "number" ? props.value : "",
-		onChange: (e) => {
-			props.onChange(Number(e.target.value));
-		},
-		mt: "1"
-	})] });
+	};
 }
-function renderBooleanInput(props) {
-	const label = getLabel(props);
-	const id = inputId(props.path);
-	if (props.readOnly) {
-		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(RadixText, {
-			id,
-			children: "—"
+function makeRenderNumberInput(components) {
+	const { Box, Text, TextField } = 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__ */ jsxs(Box, { children: [label !== void 0 && /* @__PURE__ */ jsx(Text, {
+				as: "label",
+				size: "2",
+				weight: "medium",
+				htmlFor: id,
+				children: label
+			}), /* @__PURE__ */ jsx(TextField, {
+				id,
+				type: "number",
+				value: props.writeOnly ? "" : typeof props.value === "number" ? props.value : "",
+				onChange: (e) => {
+					props.onChange(Number(e.target.value));
+				},
+				mt: "1",
+				...aria
+			})] })
 		});
-		return /* @__PURE__ */ jsx(RadixText, {
-			id,
-			children: props.value ? "Yes" : "No"
+	};
+}
+function makeRenderBooleanInput(components) {
+	const { Checkbox, Flex, 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__ */ jsxs(Flex, {
+				align: "center",
+				gap: "2",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id,
+					checked: props.writeOnly ? false : props.value === true,
+					onCheckedChange: (checked) => {
+						if (typeof checked === "boolean") props.onChange(checked);
+					},
+					...aria
+				}), label !== void 0 && /* @__PURE__ */ jsx(Text, {
+					as: "label",
+					htmlFor: id,
+					children: label
+				})]
+			})
 		});
-	}
-	return /* @__PURE__ */ jsxs(RadixFlex, {
-		align: "center",
-		gap: "2",
-		children: [/* @__PURE__ */ jsx(RadixCheckbox, {
-			id,
-			checked: props.writeOnly ? false : props.value === true,
-			onCheckedChange: (checked) => {
-				if (typeof checked === "boolean") props.onChange(checked);
-			}
-		}), label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
-			as: "label",
-			htmlFor: id,
-			children: label
-		})]
-	});
+	};
 }
-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(RadixText, {
-		id,
-		children: enumValue || "—"
-	});
-	return /* @__PURE__ */ jsxs(RadixBox, { children: [label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
-		as: "label",
-		size: "2",
-		weight: "medium",
-		htmlFor: id,
-		children: label
-	}), /* @__PURE__ */ jsxs(RadixSelectRoot, {
-		value: props.writeOnly ? "" : enumValue,
-		onValueChange: (value) => {
-			props.onChange(value);
-		},
-		children: [/* @__PURE__ */ jsx(RadixSelectTrigger, {
+function makeRenderEnumInput(components) {
+	const { Box, Text, SelectRoot, SelectTrigger, SelectContent, SelectItem } = 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,
-			mt: "1"
-		}), /* @__PURE__ */ jsx(RadixSelectContent, { children: (props.tree.type === "enum" ? props.tree.enumValues : []).map((value) => /* @__PURE__ */ jsx(RadixSelectItem, {
-			value,
-			children: value
-		}, value)) })]
-	})] });
+			children: enumValue || "—"
+		});
+		return /* @__PURE__ */ jsx(FieldShell, {
+			props,
+			inputId: id,
+			hideLabel: true,
+			children: (aria) => /* @__PURE__ */ jsxs(Box, { children: [label !== void 0 && /* @__PURE__ */ jsx(Text, {
+				as: "label",
+				size: "2",
+				weight: "medium",
+				htmlFor: id,
+				children: label
+			}), /* @__PURE__ */ jsxs(SelectRoot, {
+				value: props.writeOnly ? "" : enumValue,
+				onValueChange: (value) => {
+					props.onChange(value);
+				},
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					id,
+					mt: "1",
+					...aria
+				}), /* @__PURE__ */ jsx(SelectContent, { children: (props.tree.type === "enum" ? props.tree.enumValues : []).map((value) => /* @__PURE__ */ jsx(SelectItem, {
+					value,
+					children: value
+				}, value)) })]
+			})] })
+		});
+	};
 }
-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(RadixBox, { children: [typeof props.meta.description === "string" && /* @__PURE__ */ jsx(RadixText, {
-		as: "div",
-		size: "4",
-		weight: "bold",
-		mb: "3",
-		children: props.meta.description
-	}), /* @__PURE__ */ jsx(RadixFlex, {
-		direction: "column",
-		gap: "3",
-		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(RadixBox, { children: toReactNode(props.renderChild(field, childValue, childOnChange, key)) }, key);
-		})
-	})] });
+function makeRenderObjectContainer(components) {
+	const { Box, Flex, Text } = 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, { children: [typeof props.meta.description === "string" && /* @__PURE__ */ jsx(Text, {
+			as: "div",
+			size: "4",
+			weight: "bold",
+			mb: "3",
+			children: props.meta.description
+		}), /* @__PURE__ */ jsx(Flex, {
+			direction: "column",
+			gap: "3",
+			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(Box, { 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 = {
+	Box: (props) => /* @__PURE__ */ jsx("div", { ...props }),
+	Checkbox: (props) => /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		...stripChildren(props)
+	}),
+	Flex: (props) => /* @__PURE__ */ jsx("div", { ...props }),
+	SelectRoot: (props) => /* @__PURE__ */ jsx("select", { ...props }),
+	SelectTrigger: (props) => /* @__PURE__ */ jsx("span", { ...props }),
+	SelectContent: (props) => /* @__PURE__ */ jsx(Fragment, { children: props.children }),
+	SelectItem: (props) => /* @__PURE__ */ jsx("option", { ...props }),
+	Text: (props) => /* @__PURE__ */ jsx("span", { ...props }),
+	TextField: (props) => /* @__PURE__ */ jsx("input", { ...stripChildren(props) })
+};
+/**
+* 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
+*/
+function createRadixResolver(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 radixResolver = buildResolver();
+/**
+* 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>
+* ```
+*/
+const radixResolver = createRadixResolver(STUB_COMPONENTS);
 //#endregion
-export { radixResolver, registerRadixComponents };
+export { createRadixResolver, radixResolver };

package/dist/themes/shadcn.d.mts

@@ -1,6 +1,30 @@
-import { r as ComponentResolver } from "../renderer-Ul9taFYp.mjs";
+import { ComponentResolver } from "../core/renderer.mjs";
 
 //#region src/themes/shadcn.d.ts
+/**
+ * Component resolver mapping schema field types to shadcn/ui components.
+ *
+ * Pass to `SchemaProvider` to render every `<SchemaComponent>` /
+ * `<SchemaView>` in the subtree with shadcn/ui inputs, selects, and
+ * cards. Returns only the keys this theme overrides — the runtime
+ * `mergeResolvers` call inside `<SchemaComponent>` / `<SchemaView>`
+ * fills unset keys from `headlessResolver`, so variants like literal,
+ * union, discriminatedUnion, record, file, and unknown still render via
+ * the headless fallback.
+ *
+ * Requires `shadcn/ui` components installed in the consuming project.
+ *
+ * @group Themes
+ * @example
+ * ```tsx
+ * import { SchemaProvider } from "schema-components/react/SchemaComponent";
+ * import { shadcnResolver } from "schema-components/themes/shadcn";
+ *
+ * <SchemaProvider resolver={shadcnResolver}>
+ *   <SchemaComponent schema={userSchema} value={user} onChange={setUser} />
+ * </SchemaProvider>
+ * ```
+ */
 declare const shadcnResolver: ComponentResolver;
 //#endregion
 export { shadcnResolver };