@json-render/shadcn 0.9.0 → 0.10.0

package/dist/index.js

@@ -2086,10 +2086,11 @@ var shadcnComponents = {
     const isBound = !!bindings?.value;
     const value = isBound ? boundValue ?? "" : localValue;
     const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "blur";
     const hasValidation = !!(bindings?.value && props.checks?.length);
     const { errors, validate } = (0, import_react2.useFieldValidation)(
       bindings?.value ?? "",
-      hasValidation ? { checks: props.checks ?? [] } : void 0
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
     );
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
       props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, children: props.label }),
@@ -2101,13 +2102,16 @@ var shadcnComponents = {
           type: props.type ?? "text",
           placeholder: props.placeholder ?? "",
           value,
-          onChange: (e) => setValue(e.target.value),
+          onChange: (e) => {
+            setValue(e.target.value);
+            if (hasValidation && validateOn === "change") validate();
+          },
           onKeyDown: (e) => {
             if (e.key === "Enter") emit("submit");
           },
           onFocus: () => emit("focus"),
           onBlur: () => {
-            if (hasValidation) validate();
+            if (hasValidation && validateOn === "blur") validate();
             emit("blur");
           }
         }
@@ -2127,10 +2131,11 @@ var shadcnComponents = {
     const isBound = !!bindings?.value;
     const value = isBound ? boundValue ?? "" : localValue;
     const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "blur";
     const hasValidation = !!(bindings?.value && props.checks?.length);
     const { errors, validate } = (0, import_react2.useFieldValidation)(
       bindings?.value ?? "",
-      hasValidation ? { checks: props.checks ?? [] } : void 0
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
     );
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
       props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, children: props.label }),
@@ -2142,9 +2147,12 @@ var shadcnComponents = {
           placeholder: props.placeholder ?? "",
           rows: props.rows ?? 3,
           value,
-          onChange: (e) => setValue(e.target.value),
+          onChange: (e) => {
+            setValue(e.target.value);
+            if (hasValidation && validateOn === "change") validate();
+          },
           onBlur: () => {
-            if (hasValidation) validate();
+            if (hasValidation && validateOn === "blur") validate();
           }
         }
       ),
@@ -2168,10 +2176,11 @@ var shadcnComponents = {
     const options = rawOptions.map(
       (opt) => typeof opt === "string" ? opt : String(opt ?? "")
     );
+    const validateOn = props.validateOn ?? "change";
     const hasValidation = !!(bindings?.value && props.checks?.length);
     const { errors, validate } = (0, import_react2.useFieldValidation)(
       bindings?.value ?? "",
-      hasValidation ? { checks: props.checks ?? [] } : void 0
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
     );
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { children: props.label }),
@@ -2181,7 +2190,7 @@ var shadcnComponents = {
           value,
           onValueChange: (v) => {
             setValue(v);
-            if (hasValidation) validate();
+            if (hasValidation && validateOn === "change") validate();
             emit("change");
           },
           children: [
@@ -2206,19 +2215,29 @@ var shadcnComponents = {
     const isBound = !!bindings?.checked;
     const checked = isBound ? boundChecked ?? false : localChecked;
     const setChecked = isBound ? setBoundChecked : setLocalChecked;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        Checkbox,
-        {
-          id: props.name ?? void 0,
-          checked,
-          onCheckedChange: (c) => {
-            setChecked(c === true);
-            emit("change");
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.checked && props.checks?.length);
+    const { errors, validate } = (0, import_react2.useFieldValidation)(
+      bindings?.checked ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          Checkbox,
+          {
+            id: props.name ?? void 0,
+            checked,
+            onCheckedChange: (c) => {
+              setChecked(c === true);
+              if (hasValidation && validateOn === "change") validate();
+              emit("change");
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label })
+      ] }),
+      errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive", children: errors[0] })
     ] });
   },
   Radio: ({
@@ -2238,6 +2257,12 @@ var shadcnComponents = {
     const isBound = !!bindings?.value;
     const value = isBound ? boundValue ?? "" : localValue;
     const setValue = isBound ? setBoundValue : setLocalValue;
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = (0, import_react2.useFieldValidation)(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
       props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { children: props.label }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -2246,6 +2271,7 @@ var shadcnComponents = {
           value,
           onValueChange: (v) => {
             setValue(v);
+            if (hasValidation && validateOn === "change") validate();
             emit("change");
           },
           children: options.map((opt, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center space-x-2", children: [
@@ -2266,7 +2292,8 @@ var shadcnComponents = {
             )
           ] }, `${idx}-${opt}`))
         }
-      )
+      ),
+      errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive", children: errors[0] })
     ] });
   },
   Switch: ({
@@ -2282,19 +2309,29 @@ var shadcnComponents = {
     const isBound = !!bindings?.checked;
     const checked = isBound ? boundChecked ?? false : localChecked;
     const setChecked = isBound ? setBoundChecked : setLocalChecked;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between space-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        Switch,
-        {
-          id: props.name ?? void 0,
-          checked,
-          onCheckedChange: (c) => {
-            setChecked(c);
-            emit("change");
+    const validateOn = props.validateOn ?? "change";
+    const hasValidation = !!(bindings?.checked && props.checks?.length);
+    const { errors, validate } = (0, import_react2.useFieldValidation)(
+      bindings?.checked ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          Switch,
+          {
+            id: props.name ?? void 0,
+            checked,
+            onCheckedChange: (c) => {
+              setChecked(c);
+              if (hasValidation && validateOn === "change") validate();
+              emit("change");
+            }
           }
-        }
-      )
+        )
+      ] }),
+      errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive", children: errors[0] })
     ] });
   },
   Slider: ({
@@ -2541,6 +2578,14 @@ var shadcnComponents = {
 
 // src/catalog.ts
 var import_zod = require("zod");
+var validationCheckSchema = import_zod.z.array(
+  import_zod.z.object({
+    type: import_zod.z.string(),
+    message: import_zod.z.string(),
+    args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
+  })
+).nullable();
+var validateOnSchema = import_zod.z.enum(["change", "blur", "submit"]).nullable();
 var shadcnComponentDefinitions = {
   // ==========================================================================
   // Layout Components
@@ -2767,16 +2812,11 @@ var shadcnComponentDefinitions = {
       type: import_zod.z.enum(["text", "email", "password", "number"]).nullable(),
       placeholder: import_zod.z.string().nullable(),
       value: import_zod.z.string().nullable(),
-      checks: import_zod.z.array(
-        import_zod.z.object({
-          type: import_zod.z.string(),
-          message: import_zod.z.string(),
-          args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
-        })
-      ).nullable()
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
     }),
     events: ["submit", "focus", "blur"],
-    description: "Text input field. Use { $bindState } on value for two-way binding. Use checks for validation (e.g. required, email, minLength).",
+    description: "Text input field. Use { $bindState } on value for two-way binding. Use checks for validation (e.g. required, email, minLength). validateOn controls timing (default: blur).",
     example: {
       label: "Email",
       name: "email",
@@ -2791,15 +2831,10 @@ var shadcnComponentDefinitions = {
       placeholder: import_zod.z.string().nullable(),
       rows: import_zod.z.number().nullable(),
       value: import_zod.z.string().nullable(),
-      checks: import_zod.z.array(
-        import_zod.z.object({
-          type: import_zod.z.string(),
-          message: import_zod.z.string(),
-          args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
-        })
-      ).nullable()
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
     }),
-    description: "Multi-line text input. Use { $bindState } on value for binding. Use checks for validation."
+    description: "Multi-line text input. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: blur)."
   },
   Select: {
     props: import_zod.z.object({
@@ -2808,44 +2843,45 @@ var shadcnComponentDefinitions = {
       options: import_zod.z.array(import_zod.z.string()),
       placeholder: import_zod.z.string().nullable(),
       value: import_zod.z.string().nullable(),
-      checks: import_zod.z.array(
-        import_zod.z.object({
-          type: import_zod.z.string(),
-          message: import_zod.z.string(),
-          args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
-        })
-      ).nullable()
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
     }),
     events: ["change"],
-    description: "Dropdown select input. Use { $bindState } on value for binding. Use checks for validation."
+    description: "Dropdown select input. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: change)."
   },
   Checkbox: {
     props: import_zod.z.object({
       label: import_zod.z.string(),
       name: import_zod.z.string(),
-      checked: import_zod.z.boolean().nullable()
+      checked: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
     }),
     events: ["change"],
-    description: "Checkbox input. Use { $bindState } on checked for binding."
+    description: "Checkbox input. Use { $bindState } on checked for binding. Use checks for validation. validateOn controls timing (default: change)."
   },
   Radio: {
     props: import_zod.z.object({
       label: import_zod.z.string(),
       name: import_zod.z.string(),
       options: import_zod.z.array(import_zod.z.string()),
-      value: import_zod.z.string().nullable()
+      value: import_zod.z.string().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
     }),
     events: ["change"],
-    description: "Radio button group. Use { $bindState } on value for binding."
+    description: "Radio button group. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: change)."
   },
   Switch: {
     props: import_zod.z.object({
       label: import_zod.z.string(),
       name: import_zod.z.string(),
-      checked: import_zod.z.boolean().nullable()
+      checked: import_zod.z.boolean().nullable(),
+      checks: validationCheckSchema,
+      validateOn: validateOnSchema
     }),
     events: ["change"],
-    description: "Toggle switch. Use { $bindState } on checked for binding."
+    description: "Toggle switch. Use { $bindState } on checked for binding. Use checks for validation. validateOn controls timing (default: change)."
   },
   Slider: {
     props: import_zod.z.object({