schema-components 1.9.0 → 1.10.0

package/dist/themes/mantine.d.mts

@@ -6,11 +6,11 @@ import { b as ComponentResolver } from "../types-BJzEgJdX.mjs";
  * Call once at app startup before rendering.
  */
 declare function registerMantineComponents(components: {
-  TextInput: unknown;
-  NumberInput: unknown;
-  Switch: unknown;
-  Select: unknown;
-  Fieldset: unknown;
+  TextInput: React.ElementType;
+  NumberInput: React.ElementType;
+  Switch: React.ElementType;
+  Select: React.ElementType;
+  Fieldset: React.ElementType;
 }): void;
 declare const mantineResolver: ComponentResolver;
 //#endregion

package/dist/themes/mantine.mjs

@@ -16,21 +16,16 @@ let MantineSwitch = (props) => /* @__PURE__ */ jsx("input", {
 });
 let MantineSelect = (props) => /* @__PURE__ */ jsx("select", { ...props });
 let MantineFieldset = (props) => /* @__PURE__ */ jsx("fieldset", { ...props });
-function toComponent(value) {
-	if (typeof value === "function") return value;
-	if (typeof value === "object" && value !== null && "render" in value) return value;
-	throw new Error(`Expected a React component, got ${typeof value}`);
-}
 /**
 * Register real Mantine components for the resolver to use.
 * Call once at app startup before rendering.
 */
 function registerMantineComponents(components) {
-	MantineTextInput = toComponent(components.TextInput);
-	MantineNumberInput = toComponent(components.NumberInput);
-	MantineSwitch = toComponent(components.Switch);
-	MantineSelect = toComponent(components.Select);
-	MantineFieldset = toComponent(components.Fieldset);
+	MantineTextInput = components.TextInput;
+	MantineNumberInput = components.NumberInput;
+	MantineSwitch = components.Switch;
+	MantineSelect = components.Select;
+	MantineFieldset = components.Fieldset;
 }
 function renderStringInput(props) {
 	const strValue = typeof props.value === "string" ? props.value : "";

package/dist/themes/mui.d.mts

@@ -1,13 +1,16 @@
 import { b as ComponentResolver } from "../types-BJzEgJdX.mjs";
 
 //#region src/themes/mui.d.ts
+/**
+ * Register real MUI components. Call once at app startup.
+ */
 declare function registerMuiComponents(components: {
-  TextField: unknown;
-  Checkbox: unknown;
-  Typography: unknown;
-  Box: unknown;
-  MenuItem: unknown;
-  FormControlLabel: unknown;
+  TextField: React.ElementType;
+  Checkbox: React.ElementType;
+  Typography: React.ElementType;
+  Box: React.ElementType;
+  MenuItem: React.ElementType;
+  FormControlLabel: React.ElementType;
 }): void;
 declare const muiResolver: ComponentResolver;
 //#endregion

package/dist/themes/mui.mjs

@@ -197,18 +197,13 @@ let MuiFormControlLabel = (props) => {
 /**
 * Register real MUI components. Call once at app startup.
 */
-function toComponent(value) {
-	if (typeof value === "function") return value;
-	if (typeof value === "object" && value !== null && "render" in value) return value;
-	throw new Error(`Expected a React component, got ${typeof value}`);
-}
 function registerMuiComponents(components) {
-	MuiTextField = toComponent(components.TextField);
-	MuiCheckbox = toComponent(components.Checkbox);
-	MuiTypography = toComponent(components.Typography);
-	MuiBox = toComponent(components.Box);
-	MuiMenuItem = toComponent(components.MenuItem);
-	MuiFormControlLabel = toComponent(components.FormControlLabel);
+	MuiTextField = components.TextField;
+	MuiCheckbox = components.Checkbox;
+	MuiTypography = components.Typography;
+	MuiBox = components.Box;
+	MuiMenuItem = components.MenuItem;
+	MuiFormControlLabel = components.FormControlLabel;
 }
 function buildResolver() {
 	const resolver = {

package/dist/themes/radix.d.mts

@@ -0,0 +1,21 @@
+import { b as ComponentResolver } from "../types-BJzEgJdX.mjs";
+
+//#region src/themes/radix.d.ts
+/**
+ * Register real Radix Themes components for the resolver to use.
+ * Call once at app startup before rendering.
+ */
+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 };

package/dist/themes/radix.mjs

@@ -0,0 +1,162 @@
+import { isObject } from "../core/guards.mjs";
+import { headlessResolver, toReactNode } from "../react/headless.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/themes/radix.tsx
+function getLabel(props) {
+	if (typeof props.meta.description === "string") return props.meta.description;
+}
+function stripChildren(props) {
+	const rest = { ...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);
+	if (props.readOnly) return /* @__PURE__ */ jsx(RadixText, { children: strValue || "—" });
+	return /* @__PURE__ */ jsxs(RadixBox, { children: [label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
+		as: "label",
+		size: "2",
+		weight: "medium",
+		children: label
+	}), /* @__PURE__ */ jsx(RadixTextField, {
+		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);
+	if (props.readOnly) {
+		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(RadixText, { children: "—" });
+		return /* @__PURE__ */ jsx(RadixText, { children: props.value.toLocaleString() });
+	}
+	return /* @__PURE__ */ jsxs(RadixBox, { children: [label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
+		as: "label",
+		size: "2",
+		weight: "medium",
+		children: label
+	}), /* @__PURE__ */ jsx(RadixTextField, {
+		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);
+	if (props.readOnly) {
+		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(RadixText, { children: "—" });
+		return /* @__PURE__ */ jsx(RadixText, { children: props.value ? "Yes" : "No" });
+	}
+	return /* @__PURE__ */ jsxs(RadixFlex, {
+		align: "center",
+		gap: "2",
+		children: [/* @__PURE__ */ jsx(RadixCheckbox, {
+			checked: props.writeOnly ? false : props.value === true,
+			onCheckedChange: (checked) => {
+				if (typeof checked === "boolean") props.onChange(checked);
+			}
+		}), label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
+			as: "label",
+			children: label
+		})]
+	});
+}
+function renderEnumInput(props) {
+	const enumValue = typeof props.value === "string" ? props.value : "";
+	const label = getLabel(props);
+	if (props.readOnly) return /* @__PURE__ */ jsx(RadixText, { children: enumValue || "—" });
+	return /* @__PURE__ */ jsxs(RadixBox, { children: [label !== void 0 && /* @__PURE__ */ jsx(RadixText, {
+		as: "label",
+		size: "2",
+		weight: "medium",
+		children: label
+	}), /* @__PURE__ */ jsxs(RadixSelectRoot, {
+		value: props.writeOnly ? "" : enumValue,
+		onValueChange: (value) => {
+			props.onChange(value);
+		},
+		children: [/* @__PURE__ */ jsx(RadixSelectTrigger, { mt: "1" }), /* @__PURE__ */ jsx(RadixSelectContent, { children: (props.enumValues ?? []).map((value) => /* @__PURE__ */ jsx(RadixSelectItem, {
+			value,
+			children: value
+		}, value)) })]
+	})] });
+}
+function renderObjectContainer(props) {
+	const fields = props.fields;
+	if (fields === void 0) return null;
+	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: Object.entries(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);
+		})
+	})] });
+}
+function buildResolver() {
+	const resolver = {
+		string: renderStringInput,
+		number: renderNumberInput,
+		boolean: renderBooleanInput,
+		enum: renderEnumInput,
+		object: renderObjectContainer
+	};
+	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();
+//#endregion
+export { radixResolver, registerRadixComponents };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "schema-components",
-    "version": "1.9.0",
+    "version": "1.10.0",
     "description": "React components that render UI from Zod schemas, JSON Schema, and OpenAPI documents",
     "type": "module",
     "main": "./dist/index.mjs",