schema-components 1.9.1 → 1.10.0

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.1",
+    "version": "1.10.0",
     "description": "React components that render UI from Zod schemas, JSON Schema, and OpenAPI documents",
     "type": "module",
     "main": "./dist/index.mjs",