schema-components 1.16.2 → 1.17.0

package/dist/themes/radix.mjs

@@ -1,5 +1,5 @@
 import { isObject } from "../core/guards.mjs";
-import { toReactNode } from "../react/headlessRenderers.mjs";
+import { inputId, toReactNode } from "../react/headlessRenderers.mjs";
 import { headlessResolver } from "../react/headless.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/themes/radix.tsx
@@ -41,13 +41,19 @@ function registerRadixComponents(components) {
 function renderStringInput(props) {
 	const strValue = typeof props.value === "string" ? props.value : "";
 	const label = getLabel(props);
-	if (props.readOnly) return /* @__PURE__ */ jsx(RadixText, { children: strValue || "—" });
+	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) => {
@@ -58,16 +64,25 @@ function renderStringInput(props) {
 }
 function renderNumberInput(props) {
 	const label = getLabel(props);
+	const id = inputId(props.path);
 	if (props.readOnly) {
-		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(RadixText, { children: "—" });
-		return /* @__PURE__ */ jsx(RadixText, { children: props.value.toLocaleString() });
+		if (typeof props.value !== "number") return /* @__PURE__ */ jsx(RadixText, {
+			id,
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx(RadixText, {
+			id,
+			children: props.value.toLocaleString()
+		});
 	}
 	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) => {
@@ -78,20 +93,29 @@ function renderNumberInput(props) {
 }
 function renderBooleanInput(props) {
 	const label = getLabel(props);
+	const id = inputId(props.path);
 	if (props.readOnly) {
-		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(RadixText, { children: "—" });
-		return /* @__PURE__ */ jsx(RadixText, { children: props.value ? "Yes" : "No" });
+		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx(RadixText, {
+			id,
+			children: "—"
+		});
+		return /* @__PURE__ */ jsx(RadixText, {
+			id,
+			children: props.value ? "Yes" : "No"
+		});
 	}
 	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
 		})]
 	});
@@ -99,18 +123,26 @@ function renderBooleanInput(props) {
 function renderEnumInput(props) {
 	const enumValue = typeof props.value === "string" ? props.value : "";
 	const label = getLabel(props);
-	if (props.readOnly) return /* @__PURE__ */ jsx(RadixText, { children: enumValue || "—" });
+	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, { mt: "1" }), /* @__PURE__ */ jsx(RadixSelectContent, { children: (props.enumValues ?? []).map((value) => /* @__PURE__ */ jsx(RadixSelectItem, {
+		children: [/* @__PURE__ */ jsx(RadixSelectTrigger, {
+			id,
+			mt: "1"
+		}), /* @__PURE__ */ jsx(RadixSelectContent, { children: (props.enumValues ?? []).map((value) => /* @__PURE__ */ jsx(RadixSelectItem, {
 			value,
 			children: value
 		}, value)) })]
@@ -137,7 +169,7 @@ function renderObjectContainer(props) {
 				updated[key] = v;
 				props.onChange(updated);
 			};
-			return /* @__PURE__ */ jsx(RadixBox, { children: toReactNode(props.renderChild(field, childValue, childOnChange)) }, key);
+			return /* @__PURE__ */ jsx(RadixBox, { children: toReactNode(props.renderChild(field, childValue, childOnChange, key)) }, key);
 		})
 	})] });
 }

package/dist/themes/shadcn.d.mts

@@ -1,4 +1,4 @@
-import { r as ComponentResolver } from "../renderer-BdSqllx5.mjs";
+import { r as ComponentResolver } from "../renderer-B3s8o2B8.mjs";
 
 //#region src/themes/shadcn.d.ts
 declare const shadcnResolver: ComponentResolver;

package/dist/themes/shadcn.mjs

@@ -1,5 +1,5 @@
 import { toRecord } from "../core/guards.mjs";
-import { toReactNode } from "../react/headlessRenderers.mjs";
+import { inputId, toReactNode } from "../react/headlessRenderers.mjs";
 import { headlessResolver } from "../react/headless.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/themes/shadcn.tsx
@@ -11,12 +11,15 @@ function buildClassNames(...classes) {
 }
 function renderStringInput(props) {
 	const strValue = typeof props.value === "string" ? props.value : "";
+	const id = inputId(props.path);
 	const className = buildClassNames("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors", "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50");
 	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
+		id,
 		className: "text-sm",
 		children: strValue || "—"
 	});
 	if (props.writeOnly) return /* @__PURE__ */ jsx("input", {
+		id,
 		type: props.constraints.format === "email" ? "email" : "text",
 		className,
 		placeholder: typeof props.meta.description === "string" ? props.meta.description : void 0,
@@ -26,6 +29,7 @@ function renderStringInput(props) {
 		}
 	});
 	return /* @__PURE__ */ jsx("input", {
+		id,
 		type: props.constraints.format === "email" ? "email" : "text",
 		className,
 		value: strValue,
@@ -38,18 +42,22 @@ function renderStringInput(props) {
 	});
 }
 function renderNumberInput(props) {
+	const id = inputId(props.path);
 	const className = buildClassNames("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50");
 	if (props.readOnly) {
 		if (typeof props.value !== "number") return /* @__PURE__ */ jsx("span", {
+			id,
 			className: "text-sm",
 			children: "—"
 		});
 		return /* @__PURE__ */ jsx("span", {
+			id,
 			className: "text-sm",
 			children: props.value.toLocaleString()
 		});
 	}
 	return /* @__PURE__ */ jsx("input", {
+		id,
 		type: "number",
 		className,
 		value: props.writeOnly ? "" : typeof props.value === "number" ? props.value : "",
@@ -61,18 +69,22 @@ function renderNumberInput(props) {
 	});
 }
 function renderBooleanInput(props) {
+	const id = inputId(props.path);
 	const className = buildClassNames("h-4 w-4 rounded border border-primary shadow", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50");
 	if (props.readOnly) {
 		if (typeof props.value !== "boolean") return /* @__PURE__ */ jsx("span", {
+			id,
 			className: "text-sm",
 			children: "—"
 		});
 		return /* @__PURE__ */ jsx("span", {
+			id,
 			className: "text-sm",
 			children: props.value ? "Yes" : "No"
 		});
 	}
 	return /* @__PURE__ */ jsx("input", {
+		id,
 		type: "checkbox",
 		className,
 		checked: props.writeOnly ? false : props.value === true,
@@ -92,6 +104,7 @@ function renderObjectContainer(props) {
 			children: props.meta.description
 		}), Object.entries(fields).map(([key, field]) => {
 			const childValue = toRecord(obj)[key];
+			const childId = inputId(`${props.path}.${key}`);
 			const childOnChange = (v) => {
 				const updated = {};
 				for (const [k, val] of Object.entries(obj)) updated[k] = val;
@@ -101,9 +114,10 @@ function renderObjectContainer(props) {
 			return /* @__PURE__ */ jsxs("div", {
 				className: "space-y-1",
 				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: childId,
 					className: "text-sm font-medium leading-none",
 					children: field.meta.description ?? key
-				}), toReactNode(props.renderChild(field, childValue, childOnChange))]
+				}), toReactNode(props.renderChild(field, childValue, childOnChange, key))]
 			}, key);
 		})]
 	});
@@ -120,26 +134,29 @@ function renderArrayContainer(props) {
 				next[i] = v;
 				props.onChange(next);
 			};
-			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange)) }, String(i));
+			return /* @__PURE__ */ jsx("div", { children: toReactNode(props.renderChild(element, item, childOnChange, `[${String(i)}]`)) }, String(i));
 		})
 	});
 }
 function renderEnumInput(props) {
+	const id = inputId(props.path);
 	const className = buildClassNames("flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm", "focus:outline-none focus:ring-1 focus:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50");
 	const enumValue = typeof props.value === "string" ? props.value : "";
 	if (props.readOnly) return /* @__PURE__ */ jsx("span", {
+		id,
 		className: "text-sm",
 		children: enumValue || "—"
 	});
 	return /* @__PURE__ */ jsxs("select", {
+		id,
 		className,
 		value: props.writeOnly ? "" : enumValue,
 		onChange: (e) => {
 			props.onChange(e.target.value);
 		},
-		children: [/* @__PURE__ */ jsx("option", {
+		children: [/* @__PURE__ */ jsxs("option", {
 			value: "",
-			children: "Select\\u2026"
+			children: ["Select", "…"]
 		}), props.enumValues?.map((v) => {
 			const display = v === null ? "null" : typeof v === "string" ? v : String(v);
 			return /* @__PURE__ */ jsx("option", {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "schema-components",
-    "version": "1.16.2",
+    "version": "1.17.0",
     "description": "React components that render UI from Zod schemas, JSON Schema, and OpenAPI documents",
     "type": "module",
     "main": "./dist/index.mjs",
@@ -78,13 +78,16 @@
     },
     "devDependencies": {
         "@eslint/js": "10.0.1",
-        "@types/node": "25.6.0",
+        "@testing-library/react": "16.3.2",
+        "@testing-library/user-event": "14.6.1",
+        "@types/node": "25.6.2",
         "@types/react": "19.2.14",
         "@types/react-dom": "19.2.3",
         "@vitest/coverage-v8": "4.1.5",
         "eslint": "10.3.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-prettier": "5.5.5",
+        "happy-dom": "20.9.0",
         "prettier": "3.8.3",
         "react": "19.2.6",
         "react-dom": "19.2.6",