@json-render/shadcn 0.9.1 → 0.10.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   shadcnComponentDefinitions
-} from "./chunk-VZQBPEYT.mjs";
+} from "./chunk-F5LRX6LB.mjs";
 
 // src/components.tsx
 import { useState as useState2 } from "react";
@@ -2061,10 +2061,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 } = useFieldValidation(
       bindings?.value ?? "",
-      hasValidation ? { checks: props.checks ?? [] } : void 0
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
     );
     return /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
       props.label && /* @__PURE__ */ jsx30(Label, { htmlFor: props.name ?? void 0, children: props.label }),
@@ -2076,13 +2077,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");
           }
         }
@@ -2102,10 +2106,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 } = useFieldValidation(
       bindings?.value ?? "",
-      hasValidation ? { checks: props.checks ?? [] } : void 0
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
     );
     return /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
       props.label && /* @__PURE__ */ jsx30(Label, { htmlFor: props.name ?? void 0, children: props.label }),
@@ -2117,9 +2122,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();
           }
         }
       ),
@@ -2143,10 +2151,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 } = useFieldValidation(
       bindings?.value ?? "",
-      hasValidation ? { checks: props.checks ?? [] } : void 0
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
     );
     return /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx30(Label, { children: props.label }),
@@ -2156,7 +2165,7 @@ var shadcnComponents = {
           value,
           onValueChange: (v) => {
             setValue(v);
-            if (hasValidation) validate();
+            if (hasValidation && validateOn === "change") validate();
             emit("change");
           },
           children: [
@@ -2181,19 +2190,29 @@ var shadcnComponents = {
     const isBound = !!bindings?.checked;
     const checked = isBound ? boundChecked ?? false : localChecked;
     const setChecked = isBound ? setBoundChecked : setLocalChecked;
-    return /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-2", children: [
-      /* @__PURE__ */ jsx30(
-        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 } = useFieldValidation(
+      bindings?.checked ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    return /* @__PURE__ */ jsxs10("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx30(
+          Checkbox,
+          {
+            id: props.name ?? void 0,
+            checked,
+            onCheckedChange: (c) => {
+              setChecked(c === true);
+              if (hasValidation && validateOn === "change") validate();
+              emit("change");
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ jsx30(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label })
+        ),
+        /* @__PURE__ */ jsx30(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label })
+      ] }),
+      errors.length > 0 && /* @__PURE__ */ jsx30("p", { className: "text-sm text-destructive", children: errors[0] })
     ] });
   },
   Radio: ({
@@ -2213,6 +2232,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 } = useFieldValidation(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
     return /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
       props.label && /* @__PURE__ */ jsx30(Label, { children: props.label }),
       /* @__PURE__ */ jsx30(
@@ -2221,6 +2246,7 @@ var shadcnComponents = {
           value,
           onValueChange: (v) => {
             setValue(v);
+            if (hasValidation && validateOn === "change") validate();
             emit("change");
           },
           children: options.map((opt, idx) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-2", children: [
@@ -2241,7 +2267,8 @@ var shadcnComponents = {
             )
           ] }, `${idx}-${opt}`))
         }
-      )
+      ),
+      errors.length > 0 && /* @__PURE__ */ jsx30("p", { className: "text-sm text-destructive", children: errors[0] })
     ] });
   },
   Switch: ({
@@ -2257,19 +2284,29 @@ var shadcnComponents = {
     const isBound = !!bindings?.checked;
     const checked = isBound ? boundChecked ?? false : localChecked;
     const setChecked = isBound ? setBoundChecked : setLocalChecked;
-    return /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between space-x-2", children: [
-      /* @__PURE__ */ jsx30(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label }),
-      /* @__PURE__ */ jsx30(
-        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 } = useFieldValidation(
+      bindings?.checked ?? "",
+      hasValidation ? { checks: props.checks ?? [], validateOn } : void 0
+    );
+    return /* @__PURE__ */ jsxs10("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between space-x-2", children: [
+        /* @__PURE__ */ jsx30(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label }),
+        /* @__PURE__ */ jsx30(
+          Switch,
+          {
+            id: props.name ?? void 0,
+            checked,
+            onCheckedChange: (c) => {
+              setChecked(c);
+              if (hasValidation && validateOn === "change") validate();
+              emit("change");
+            }
           }
-        }
-      )
+        )
+      ] }),
+      errors.length > 0 && /* @__PURE__ */ jsx30("p", { className: "text-sm text-destructive", children: errors[0] })
     ] });
   },
   Slider: ({