@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260919092040 → 0.8.1-dev.20260919110110

package/dist/{DataBindingControls-BJLDJL7F.mjs → DataBindingControls-KJJLT3V6.mjs}

@@ -13,7 +13,7 @@ import { useRouter } from "next/navigation";
 
 // src/components/controls/edit/InputControl.tsx
 import dynamic from "next/dynamic";
-var InputControl = dynamic(() => import("./InputControlClient-UK7BUVZP.mjs"), {
+var InputControl = dynamic(() => import("./InputControlClient-KQPQC6LK.mjs"), {
   ssr: false
 });
 var InputControl_default = InputControl;

package/dist/{DataBindingControls-MBHEIZVZ.mjs → DataBindingControls-ZUBNGEMX.mjs}

@@ -3,7 +3,7 @@
 "use client";
 import {
   InputControl_default
-} from "./chunk-6DLRMMX3.mjs";
+} from "./chunk-5NI44TXC.mjs";
 import {
   Button_default
 } from "./chunk-LSKD5U3S.mjs";

package/dist/{InputControlClient-DZXYU5UB.mjs → InputControlClient-AKEKO6LT.mjs}

@@ -18,7 +18,7 @@ import {
   SelectWithSearchInput_default,
   Select_default,
   TimeInput_default
-} from "./chunk-ACHYBM3S.mjs";
+} from "./chunk-WQ7BAR74.mjs";
 import {
   Hyperlink,
   Icon_default

package/dist/{InputControlClient-UK7BUVZP.mjs → InputControlClient-KQPQC6LK.mjs}

@@ -140,7 +140,7 @@ var MoneyInput = (props) => {
     event.preventDefault();
     event.target.blur();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
@@ -149,8 +149,8 @@ var MoneyInput = (props) => {
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx3(React3.Fragment, { children: /* @__PURE__ */ jsxs3("label", { className: "block mb-1", children: [
-    /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+  return /* @__PURE__ */ jsx3(React3.Fragment, { children: /* @__PURE__ */ jsxs3("label", { className: "block", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx3("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx3("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx3(
@@ -162,6 +162,8 @@ var MoneyInput = (props) => {
         value,
         min: 0,
         onChange: textChangeHandler,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         onWheel: handleWheel,
         onKeyDown: preventNegative,
         required: props?.attributes?.required,
@@ -170,7 +172,9 @@ var MoneyInput = (props) => {
         pattern: props?.attributes?.pattern,
         disabled: props?.attributes?.readOnly,
         minLength: props?.attributes?.minLength,
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx3("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -322,7 +326,7 @@ var PercentageInput = (props) => {
     event.preventDefault();
     event.target.blur();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
@@ -331,8 +335,8 @@ var PercentageInput = (props) => {
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx5(React5.Fragment, { children: /* @__PURE__ */ jsxs5("label", { className: "block mb-1", children: [
-    /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium ", children: props?.attributes?.label ? props?.attributes?.label + " %" : "" }),
+  return /* @__PURE__ */ jsx5(React5.Fragment, { children: /* @__PURE__ */ jsxs5("label", { className: "block", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx5("span", { className: "text-sm inline-block pb-1 font-medium ", children: props.attributes.label + " %" }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx5("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx5(
@@ -344,6 +348,8 @@ var PercentageInput = (props) => {
         value,
         min: 0,
         onChange: textChangeHandler,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         onKeyDown: preventNegative,
         onWheel: handleWheel,
         required: props?.attributes?.required,
@@ -351,7 +357,9 @@ var PercentageInput = (props) => {
         pattern: props?.attributes?.pattern,
         disabled: props?.attributes?.readOnly,
         max: "100",
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx5("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -416,21 +424,19 @@ var NumberInput = (props) => {
   const textChangeHandler = (event) => {
     const text = event.target.value;
     if (props.callback !== void 0) {
-      props.callback(
-        {
-          name: props.name,
-          value: text,
-          index: props.index,
-          groupKey: props.groupKey
-        }
-      );
+      props.callback({
+        name: props.name,
+        value: text,
+        index: props.index,
+        groupKey: props.groupKey
+      });
     }
   };
   const handleWheel = (event) => {
     event.preventDefault();
     event.target.blur();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
@@ -447,14 +453,17 @@ var NumberInput = (props) => {
         value,
         onChange: textChangeHandler,
         onWheel: handleWheel,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         required: props?.attributes?.required,
         placeholder: props?.attributes?.placeholder,
-        onBlur: props?.onBlur,
         pattern: props?.attributes?.pattern,
         disabled: props?.attributes?.readOnly,
         max: props?.attributes?.maxValue,
         min: props?.attributes?.minValue,
-        className: "peer py-1.5 block w-full rounded shadow-sm number-input input\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n                     "
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx7("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -483,6 +492,7 @@ var CheckboxInput = (props) => {
   if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
     value = true;
   }
+  const customClasses = (props?.inputClasses || "").split(/\s+/).filter((c) => !/^(w-|h-|block|inline-block|py-|px-|p-)/.test(c)).join(" ");
   return /* @__PURE__ */ jsx8(React8.Fragment, { children: /* @__PURE__ */ jsxs8("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
     props?.attributes?.label && /* @__PURE__ */ jsxs8(Fragment, { children: [
       /* @__PURE__ */ jsx8(
@@ -494,7 +504,7 @@ var CheckboxInput = (props) => {
         }
       ),
       " ",
-      props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak !bg-transparent", children: "*" })
+      props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak", children: "*" })
     ] }),
     /* @__PURE__ */ jsx8(
       "input",
@@ -520,7 +530,7 @@ var CheckboxInput = (props) => {
           }
         },
         minLength: props?.attributes?.minLength,
-        className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
+        className: `peer mt-1 h-4 w-4 shrink-0 rounded shadow-sm transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${customClasses}`
       }
     ),
     /* @__PURE__ */ jsx8("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -535,25 +545,23 @@ var OtpInput = (props) => {
   const textChangeHandler = (event) => {
     const text = event.target.value;
     if (props.callback !== void 0) {
-      props.callback(
-        {
-          name: props.name,
-          value: text,
-          index: props.index,
-          groupKey: props.groupKey
-        }
-      );
+      props.callback({
+        name: props.name,
+        value: text,
+        index: props.index,
+        groupKey: props.groupKey
+      });
     }
   };
   const handleWheel = (event) => {
     event.preventDefault();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
-  return /* @__PURE__ */ jsx9(React9.Fragment, { children: /* @__PURE__ */ jsxs9("label", { htmlFor: props.name, className: "block mb-1 w-full", children: [
-    /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+  return /* @__PURE__ */ jsx9(React9.Fragment, { children: /* @__PURE__ */ jsxs9("label", { htmlFor: props.name, className: "block w-full", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx9("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx9("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx9(
@@ -564,6 +572,7 @@ var OtpInput = (props) => {
         id: props.name,
         value,
         onChange: textChangeHandler,
+        onBlur: props?.onBlur,
         autoComplete: "off",
         required: props?.attributes?.required,
         placeholder: props?.attributes?.placeholder,
@@ -573,7 +582,9 @@ var OtpInput = (props) => {
         minLength: props?.attributes?.minLength,
         autoFocus: props?.attributes?.autoFocus,
         onWheel: handleWheel,
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx9("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -1252,8 +1263,8 @@ var TimeInput = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ jsx15(React15.Fragment, { children: /* @__PURE__ */ jsxs15("label", { className: "block mb-1", children: [
-    /* @__PURE__ */ jsx15("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
+  return /* @__PURE__ */ jsx15(React15.Fragment, { children: /* @__PURE__ */ jsxs15("label", { className: "block", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx15("span", { className: "text-sm inline-block pb-1 font-medium", children: props?.attributes?.label }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx15("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx15(
@@ -1264,9 +1275,13 @@ var TimeInput = (props) => {
         id: props.name,
         value: typeof props.value === "boolean" ? "" : props.value ?? "",
         onChange: timeChangeHandler,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         required: props?.attributes?.required,
         disabled: props?.attributes?.readOnly,
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
+                       ${props?.inputClasses ? props.inputClasses : ``}
+                       `
       }
     ) }),
     /* @__PURE__ */ jsx15("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ?? "" })

package/dist/{chunk-6DLRMMX3.mjs → chunk-5NI44TXC.mjs}

@@ -3,7 +3,7 @@
 
 // src/components/controls/edit/InputControl.tsx
 import dynamic from "next/dynamic";
-var InputControl = dynamic(() => import("./InputControlClient-DZXYU5UB.mjs"), {
+var InputControl = dynamic(() => import("./InputControlClient-AKEKO6LT.mjs"), {
   ssr: false
 });
 var InputControl_default = InputControl;

package/dist/{chunk-ACHYBM3S.mjs → chunk-WQ7BAR74.mjs}

@@ -124,7 +124,7 @@ var MoneyInput = (props) => {
     event.preventDefault();
     event.target.blur();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
@@ -133,8 +133,8 @@ var MoneyInput = (props) => {
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx3(React3.Fragment, { children: /* @__PURE__ */ jsxs3("label", { className: "block mb-1", children: [
-    /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+  return /* @__PURE__ */ jsx3(React3.Fragment, { children: /* @__PURE__ */ jsxs3("label", { className: "block", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx3("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx3("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx3(
@@ -146,6 +146,8 @@ var MoneyInput = (props) => {
         value,
         min: 0,
         onChange: textChangeHandler,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         onWheel: handleWheel,
         onKeyDown: preventNegative,
         required: props?.attributes?.required,
@@ -154,7 +156,9 @@ var MoneyInput = (props) => {
         pattern: props?.attributes?.pattern,
         disabled: props?.attributes?.readOnly,
         minLength: props?.attributes?.minLength,
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx3("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -306,7 +310,7 @@ var PercentageInput = (props) => {
     event.preventDefault();
     event.target.blur();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
@@ -315,8 +319,8 @@ var PercentageInput = (props) => {
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ jsx5(React5.Fragment, { children: /* @__PURE__ */ jsxs5("label", { className: "block mb-1", children: [
-    /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium ", children: props?.attributes?.label ? props?.attributes?.label + " %" : "" }),
+  return /* @__PURE__ */ jsx5(React5.Fragment, { children: /* @__PURE__ */ jsxs5("label", { className: "block", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx5("span", { className: "text-sm inline-block pb-1 font-medium ", children: props.attributes.label + " %" }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx5("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx5(
@@ -328,6 +332,8 @@ var PercentageInput = (props) => {
         value,
         min: 0,
         onChange: textChangeHandler,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         onKeyDown: preventNegative,
         onWheel: handleWheel,
         required: props?.attributes?.required,
@@ -335,7 +341,9 @@ var PercentageInput = (props) => {
         pattern: props?.attributes?.pattern,
         disabled: props?.attributes?.readOnly,
         max: "100",
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx5("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -400,21 +408,19 @@ var NumberInput = (props) => {
   const textChangeHandler = (event) => {
     const text = event.target.value;
     if (props.callback !== void 0) {
-      props.callback(
-        {
-          name: props.name,
-          value: text,
-          index: props.index,
-          groupKey: props.groupKey
-        }
-      );
+      props.callback({
+        name: props.name,
+        value: text,
+        index: props.index,
+        groupKey: props.groupKey
+      });
     }
   };
   const handleWheel = (event) => {
     event.preventDefault();
     event.target.blur();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
@@ -431,14 +437,17 @@ var NumberInput = (props) => {
         value,
         onChange: textChangeHandler,
         onWheel: handleWheel,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         required: props?.attributes?.required,
         placeholder: props?.attributes?.placeholder,
-        onBlur: props?.onBlur,
         pattern: props?.attributes?.pattern,
         disabled: props?.attributes?.readOnly,
         max: props?.attributes?.maxValue,
         min: props?.attributes?.minValue,
-        className: "peer py-1.5 block w-full rounded shadow-sm number-input input\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n                     "
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx7("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -467,6 +476,7 @@ var CheckboxInput = (props) => {
   if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
     value = true;
   }
+  const customClasses = (props?.inputClasses || "").split(/\s+/).filter((c) => !/^(w-|h-|block|inline-block|py-|px-|p-)/.test(c)).join(" ");
   return /* @__PURE__ */ jsx8(React8.Fragment, { children: /* @__PURE__ */ jsxs8("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
     props?.attributes?.label && /* @__PURE__ */ jsxs8(Fragment, { children: [
       /* @__PURE__ */ jsx8(
@@ -478,7 +488,7 @@ var CheckboxInput = (props) => {
         }
       ),
       " ",
-      props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak !bg-transparent", children: "*" })
+      props?.attributes?.required && /* @__PURE__ */ jsx8("span", { className: "bg-error-weak", children: "*" })
     ] }),
     /* @__PURE__ */ jsx8(
       "input",
@@ -504,7 +514,7 @@ var CheckboxInput = (props) => {
           }
         },
         minLength: props?.attributes?.minLength,
-        className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
+        className: `peer mt-1 h-4 w-4 shrink-0 rounded shadow-sm transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${customClasses}`
       }
     ),
     /* @__PURE__ */ jsx8("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -519,25 +529,23 @@ var OtpInput = (props) => {
   const textChangeHandler = (event) => {
     const text = event.target.value;
     if (props.callback !== void 0) {
-      props.callback(
-        {
-          name: props.name,
-          value: text,
-          index: props.index,
-          groupKey: props.groupKey
-        }
-      );
+      props.callback({
+        name: props.name,
+        value: text,
+        index: props.index,
+        groupKey: props.groupKey
+      });
     }
   };
   const handleWheel = (event) => {
     event.preventDefault();
   };
-  let value;
+  let value = "";
   if (props.value !== void 0 && props.value !== null) {
     value = props.value;
   }
-  return /* @__PURE__ */ jsx9(React9.Fragment, { children: /* @__PURE__ */ jsxs9("label", { htmlFor: props.name, className: "block mb-1 w-full", children: [
-    /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+  return /* @__PURE__ */ jsx9(React9.Fragment, { children: /* @__PURE__ */ jsxs9("label", { htmlFor: props.name, className: "block w-full", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx9("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx9("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx9(
@@ -548,6 +556,7 @@ var OtpInput = (props) => {
         id: props.name,
         value,
         onChange: textChangeHandler,
+        onBlur: props?.onBlur,
         autoComplete: "off",
         required: props?.attributes?.required,
         placeholder: props?.attributes?.placeholder,
@@ -557,7 +566,9 @@ var OtpInput = (props) => {
         minLength: props?.attributes?.minLength,
         autoFocus: props?.attributes?.autoFocus,
         onWheel: handleWheel,
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
       }
     ),
     /* @__PURE__ */ jsx9("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -984,8 +995,8 @@ var TimeInput = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ jsx14(React14.Fragment, { children: /* @__PURE__ */ jsxs14("label", { className: "block mb-1", children: [
-    /* @__PURE__ */ jsx14("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
+  return /* @__PURE__ */ jsx14(React14.Fragment, { children: /* @__PURE__ */ jsxs14("label", { className: "block", children: [
+    props?.attributes?.label && /* @__PURE__ */ jsx14("span", { className: "text-sm inline-block pb-1 font-medium", children: props?.attributes?.label }),
     " ",
     props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ jsx14("span", { className: "bg-error-weak", children: "*" }),
     /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx14(
@@ -996,9 +1007,13 @@ var TimeInput = (props) => {
         id: props.name,
         value: typeof props.value === "boolean" ? "" : props.value ?? "",
         onChange: timeChangeHandler,
+        onBlur: props?.onBlur,
+        autoFocus: props?.attributes?.autoFocus,
         required: props?.attributes?.required,
         disabled: props?.attributes?.readOnly,
-        className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
+        className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
+                       ${props?.inputClasses ? props.inputClasses : ``}
+                       `
       }
     ) }),
     /* @__PURE__ */ jsx14("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ?? "" })

package/dist/index.js

@@ -2293,7 +2293,7 @@ var init_MoneyInput = __esm({
         event.preventDefault();
         event.target.blur();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
@@ -2302,8 +2302,8 @@ var init_MoneyInput = __esm({
           e.preventDefault();
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react25.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react25.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -2315,6 +2315,8 @@ var init_MoneyInput = __esm({
             value,
             min: 0,
             onChange: textChangeHandler,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             onWheel: handleWheel,
             onKeyDown: preventNegative,
             required: props?.attributes?.required,
@@ -2323,7 +2325,9 @@ var init_MoneyInput = __esm({
             pattern: props?.attributes?.pattern,
             disabled: props?.attributes?.readOnly,
             minLength: props?.attributes?.minLength,
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -2522,7 +2526,7 @@ var init_PercentageInput = __esm({
         event.preventDefault();
         event.target.blur();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
@@ -2531,8 +2535,8 @@ var init_PercentageInput = __esm({
           e.preventDefault();
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react27.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label ? props?.attributes?.label + " %" : "" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react27.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props.attributes.label + " %" }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -2544,6 +2548,8 @@ var init_PercentageInput = __esm({
             value,
             min: 0,
             onChange: textChangeHandler,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             onKeyDown: preventNegative,
             onWheel: handleWheel,
             required: props?.attributes?.required,
@@ -2551,7 +2557,9 @@ var init_PercentageInput = __esm({
             pattern: props?.attributes?.pattern,
             disabled: props?.attributes?.readOnly,
             max: "100",
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -2628,21 +2636,19 @@ var init_NumberInput = __esm({
       const textChangeHandler = (event) => {
         const text = event.target.value;
         if (props.callback !== void 0) {
-          props.callback(
-            {
-              name: props.name,
-              value: text,
-              index: props.index,
-              groupKey: props.groupKey
-            }
-          );
+          props.callback({
+            name: props.name,
+            value: text,
+            index: props.index,
+            groupKey: props.groupKey
+          });
         }
       };
       const handleWheel = (event) => {
         event.preventDefault();
         event.target.blur();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
@@ -2659,14 +2665,17 @@ var init_NumberInput = __esm({
             value,
             onChange: textChangeHandler,
             onWheel: handleWheel,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             required: props?.attributes?.required,
             placeholder: props?.attributes?.placeholder,
-            onBlur: props?.onBlur,
             pattern: props?.attributes?.pattern,
             disabled: props?.attributes?.readOnly,
             max: props?.attributes?.maxValue,
             min: props?.attributes?.minValue,
-            className: "peer py-1.5 block w-full rounded shadow-sm number-input input\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n                     "
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -2701,6 +2710,7 @@ var init_CheckboxInput = __esm({
       if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
         value = true;
       }
+      const customClasses = (props?.inputClasses || "").split(/\s+/).filter((c) => !/^(w-|h-|block|inline-block|py-|px-|p-)/.test(c)).join(" ");
       return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react30.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
         props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -2712,7 +2722,7 @@ var init_CheckboxInput = __esm({
             }
           ),
           " ",
-          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" })
+          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "bg-error-weak", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "input",
@@ -2738,7 +2748,7 @@ var init_CheckboxInput = __esm({
               }
             },
             minLength: props?.attributes?.minLength,
-            className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
+            className: `peer mt-1 h-4 w-4 shrink-0 rounded shadow-sm transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${customClasses}`
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -2759,25 +2769,23 @@ var init_OtpInput = __esm({
       const textChangeHandler = (event) => {
         const text = event.target.value;
         if (props.callback !== void 0) {
-          props.callback(
-            {
-              name: props.name,
-              value: text,
-              index: props.index,
-              groupKey: props.groupKey
-            }
-          );
+          props.callback({
+            name: props.name,
+            value: text,
+            index: props.index,
+            groupKey: props.groupKey
+          });
         }
       };
       const handleWheel = (event) => {
         event.preventDefault();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react31.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("label", { htmlFor: props.name, className: "block mb-1 w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react31.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("label", { htmlFor: props.name, className: "block w-full", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -2788,6 +2796,7 @@ var init_OtpInput = __esm({
             id: props.name,
             value,
             onChange: textChangeHandler,
+            onBlur: props?.onBlur,
             autoComplete: "off",
             required: props?.attributes?.required,
             placeholder: props?.attributes?.placeholder,
@@ -2797,7 +2806,9 @@ var init_OtpInput = __esm({
             minLength: props?.attributes?.minLength,
             autoFocus: props?.attributes?.autoFocus,
             onWheel: handleWheel,
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -3806,8 +3817,8 @@ var init_TimeInput = __esm({
           });
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react40.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react40.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm inline-block pb-1 font-medium", children: props?.attributes?.label }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -3818,9 +3829,13 @@ var init_TimeInput = __esm({
             id: props.name,
             value: typeof props.value === "boolean" ? "" : props.value ?? "",
             onChange: timeChangeHandler,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             required: props?.attributes?.required,
             disabled: props?.attributes?.readOnly,
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
+                       ${props?.inputClasses ? props.inputClasses : ``}
+                       `
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ?? "" })

package/dist/index.mjs

@@ -8,7 +8,7 @@ import {
 } from "./chunk-SNDGEYWZ.mjs";
 import {
   InputControl_default
-} from "./chunk-6DLRMMX3.mjs";
+} from "./chunk-5NI44TXC.mjs";
 import "./chunk-JDX47MFV.mjs";
 import {
   CheckboxInput_default,
@@ -27,7 +27,7 @@ import {
   SelectWithSearchInput_default,
   Select_default,
   TimeInput_default
-} from "./chunk-ACHYBM3S.mjs";
+} from "./chunk-WQ7BAR74.mjs";
 import {
   Hyperlink,
   Icon_default
@@ -2391,7 +2391,7 @@ var GoogleMapNode_default = GoogleMapNode;
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var Pagination = dynamic13(() => import("./Pagination-BDWRNSFB.mjs"), { ssr: true });
-var DataBindingControls = dynamic13(() => import("./DataBindingControls-MBHEIZVZ.mjs"), {
+var DataBindingControls = dynamic13(() => import("./DataBindingControls-ZUBNGEMX.mjs"), {
   ssr: true
 });
 var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {

package/dist/server.js

@@ -3807,7 +3807,7 @@ var init_MoneyInput = __esm({
         event.preventDefault();
         event.target.blur();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
@@ -3816,8 +3816,8 @@ var init_MoneyInput = __esm({
           e.preventDefault();
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react41.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react41.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -3829,6 +3829,8 @@ var init_MoneyInput = __esm({
             value,
             min: 0,
             onChange: textChangeHandler,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             onWheel: handleWheel,
             onKeyDown: preventNegative,
             required: props?.attributes?.required,
@@ -3837,7 +3839,9 @@ var init_MoneyInput = __esm({
             pattern: props?.attributes?.pattern,
             disabled: props?.attributes?.readOnly,
             minLength: props?.attributes?.minLength,
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -4001,7 +4005,7 @@ var init_PercentageInput = __esm({
         event.preventDefault();
         event.target.blur();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
@@ -4010,8 +4014,8 @@ var init_PercentageInput = __esm({
           e.preventDefault();
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react43.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label ? props?.attributes?.label + " %" : "" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react43.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props.attributes.label + " %" }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -4023,6 +4027,8 @@ var init_PercentageInput = __esm({
             value,
             min: 0,
             onChange: textChangeHandler,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             onKeyDown: preventNegative,
             onWheel: handleWheel,
             required: props?.attributes?.required,
@@ -4030,7 +4036,9 @@ var init_PercentageInput = __esm({
             pattern: props?.attributes?.pattern,
             disabled: props?.attributes?.readOnly,
             max: "100",
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm number-input"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -4107,21 +4115,19 @@ var init_NumberInput = __esm({
       const textChangeHandler = (event) => {
         const text = event.target.value;
         if (props.callback !== void 0) {
-          props.callback(
-            {
-              name: props.name,
-              value: text,
-              index: props.index,
-              groupKey: props.groupKey
-            }
-          );
+          props.callback({
+            name: props.name,
+            value: text,
+            index: props.index,
+            groupKey: props.groupKey
+          });
         }
       };
       const handleWheel = (event) => {
         event.preventDefault();
         event.target.blur();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
@@ -4138,14 +4144,17 @@ var init_NumberInput = __esm({
             value,
             onChange: textChangeHandler,
             onWheel: handleWheel,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             required: props?.attributes?.required,
             placeholder: props?.attributes?.placeholder,
-            onBlur: props?.onBlur,
             pattern: props?.attributes?.pattern,
             disabled: props?.attributes?.readOnly,
             max: props?.attributes?.maxValue,
             min: props?.attributes?.minValue,
-            className: "peer py-1.5 block w-full rounded shadow-sm number-input input\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n                     "
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm number-input transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -4180,6 +4189,7 @@ var init_CheckboxInput = __esm({
       if (props.value !== void 0 && props.value !== null && props.value !== "" && (props.value === true || props.value === "true" || props.value.toString().toLowerCase() === "true" || props.value === 1 || props.value === "1")) {
         value = true;
       }
+      const customClasses = (props?.inputClasses || "").split(/\s+/).filter((c) => !/^(w-|h-|block|inline-block|py-|px-|p-)/.test(c)).join(" ");
       return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react46.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: `mb-1 ${isReadOnly ? "cursor-not-allowed" : ""}`, children: [
         props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
@@ -4191,7 +4201,7 @@ var init_CheckboxInput = __esm({
             }
           ),
           " ",
-          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "bg-error-weak !bg-transparent", children: "*" })
+          props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "bg-error-weak", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "input",
@@ -4217,7 +4227,7 @@ var init_CheckboxInput = __esm({
               }
             },
             minLength: props?.attributes?.minLength,
-            className: `peer mt-1 block rounded shadow-sm h-4 w-4 transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${props?.inputClasses ? props.inputClasses : ""}`
+            className: `peer mt-1 h-4 w-4 shrink-0 rounded shadow-sm transition-all duration-200 ${isReadOnly ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"} ${customClasses}`
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage || "" })
@@ -4238,25 +4248,23 @@ var init_OtpInput = __esm({
       const textChangeHandler = (event) => {
         const text = event.target.value;
         if (props.callback !== void 0) {
-          props.callback(
-            {
-              name: props.name,
-              value: text,
-              index: props.index,
-              groupKey: props.groupKey
-            }
-          );
+          props.callback({
+            name: props.name,
+            value: text,
+            index: props.index,
+            groupKey: props.groupKey
+          });
         }
       };
       const handleWheel = (event) => {
         event.preventDefault();
       };
-      let value;
+      let value = "";
       if (props.value !== void 0 && props.value !== null) {
         value = props.value;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react47.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("label", { htmlFor: props.name, className: "block mb-1 w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-sm font-medium ", children: props?.attributes?.label }),
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react47.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("label", { htmlFor: props.name, className: "block w-full", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-sm inline-block pb-1 font-medium ", children: props?.attributes?.label }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
@@ -4267,6 +4275,7 @@ var init_OtpInput = __esm({
             id: props.name,
             value,
             onChange: textChangeHandler,
+            onBlur: props?.onBlur,
             autoComplete: "off",
             required: props?.attributes?.required,
             placeholder: props?.attributes?.placeholder,
@@ -4276,7 +4285,9 @@ var init_OtpInput = __esm({
             minLength: props?.attributes?.minLength,
             autoFocus: props?.attributes?.autoFocus,
             onWheel: handleWheel,
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm tracking-[1.25em] text-center transition-all duration-500 ease-in-out
+                     ${props?.inputClasses ? props.inputClasses : ``}
+                     `
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
@@ -4990,8 +5001,8 @@ var init_TimeInput = __esm({
           });
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react53.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("label", { className: "block mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-sm font-medium", children: props?.attributes?.label }),
+      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react53.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("label", { className: "block", children: [
+        props?.attributes?.label && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-sm inline-block pb-1 font-medium", children: props?.attributes?.label }),
         " ",
         props?.attributes?.label && props?.attributes?.required && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "bg-error-weak", children: "*" }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -5002,9 +5013,13 @@ var init_TimeInput = __esm({
             id: props.name,
             value: typeof props.value === "boolean" ? "" : props.value ?? "",
             onChange: timeChangeHandler,
+            onBlur: props?.onBlur,
+            autoFocus: props?.attributes?.autoFocus,
             required: props?.attributes?.required,
             disabled: props?.attributes?.readOnly,
-            className: "peer mt-1 py-1.5 block w-full rounded shadow-sm\n                     disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
+            className: `peer input mt-1 py-1.5 block w-full rounded shadow-sm transition-all duration-500 ease-in-out
+                       ${props?.inputClasses ? props.inputClasses : ``}
+                       `
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ?? "" })

package/dist/server.mjs

@@ -2359,7 +2359,7 @@ var GoogleMapNode_default = GoogleMapNode;
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var Pagination = dynamic13(() => import("./Pagination-OSLUL7SF.mjs"), { ssr: true });
-var DataBindingControls = dynamic13(() => import("./DataBindingControls-BJLDJL7F.mjs"), {
+var DataBindingControls = dynamic13(() => import("./DataBindingControls-KJJLT3V6.mjs"), {
   ssr: true
 });
 var Slider = dynamic13(() => import("./Slider-QIGKP6AE.mjs"), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clyrex-digital/clyrex-controls-dev",
-  "version": "0.8.1-dev.20260919092040",
+  "version": "0.8.1-dev.20260919110110",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",