@algorithm-shift/design-system 1.2.41 → 1.2.43

package/dist/index.mjs

@@ -598,9 +598,6 @@ function SplitButton({ style, textContent, className, list = [], LinkComponent }
   ] });
 }
 
-// src/components/Inputs/TextInput/TextInput.tsx
-import * as React2 from "react";
-
 // src/components/ui/input.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
@@ -628,11 +625,6 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React2.useState(null);
-  React2.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -642,10 +634,10 @@ var TextInput = ({ className, style, ...props }) => {
       {
         type: "text",
         name: props.name,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         value: props.value,
         autoComplete: isAutocomplete ? "on" : "off",
@@ -655,14 +647,12 @@ var TextInput = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ),
-    error && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx13("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
-import * as React3 from "react";
-import { useEffect as useEffect2 } from "react";
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -670,11 +660,6 @@ var NumberInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React3.useState(null);
-  useEffect2(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -688,10 +673,10 @@ var NumberInput = ({ className, style, ...props }) => {
           id: props.name || "number-field",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -701,13 +686,12 @@ var NumberInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx14("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
-import * as React4 from "react";
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -715,11 +699,6 @@ var EmailInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React4.useState(null);
-  React4.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -732,10 +711,10 @@ var EmailInput = ({ className, style, ...props }) => {
           type: "email",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -745,13 +724,12 @@ var EmailInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx15("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx15("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-import * as React5 from "react";
 import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -759,11 +737,6 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React5.useState(null);
-  React5.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -777,10 +750,10 @@ var PasswordInput = ({ className, style, ...props }) => {
           id: props.name || "password-field",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -790,14 +763,11 @@ var PasswordInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx16("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx16("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var PasswordInput_default = PasswordInput;
 
-// src/components/Inputs/Textarea/Textarea.tsx
-import * as React6 from "react";
-
 // src/components/ui/textarea.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
@@ -822,11 +792,6 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React6.useState(null);
-  React6.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -837,10 +802,10 @@ var Textarea2 = ({ className, style, ...props }) => {
         id: "textarea-field",
         name: props.name,
         value: props.value,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         autoComplete: isAutocomplete ? "on" : "off",
         placeholder,
@@ -849,13 +814,12 @@ var Textarea2 = ({ className, style, ...props }) => {
         readOnly: isReadonly
       }
     ),
-    error && /* @__PURE__ */ jsx18("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx18("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
-import * as React7 from "react";
 import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -863,11 +827,6 @@ var UrlInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React7.useState(null);
-  React7.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -881,10 +840,10 @@ var UrlInput = ({ className, style, ...props }) => {
           type: "url",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -894,14 +853,11 @@ var UrlInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var UrlInput_default = UrlInput;
 
-// src/components/Inputs/Checkbox/Checkbox.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
-
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -956,11 +912,6 @@ var CheckboxInput = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
-  const [error, setError] = useState7(null);
-  useEffect7(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -977,14 +928,11 @@ var CheckboxInput = ({ className, style, ...props }) => {
       ),
       /* @__PURE__ */ jsx22(Label2, { htmlFor: props.name || "checkbox", children: text })
     ] }) }),
-    error && /* @__PURE__ */ jsx22("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx22("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Checkbox_default = CheckboxInput;
 
-// src/components/Inputs/RadioInput/RadioInput.tsx
-import { useEffect as useEffect8, useState as useState8 } from "react";
-
 // src/components/ui/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -1038,11 +986,6 @@ var RadioInput = ({
   dataLabel,
   ...props
 }) => {
-  const [error, setError] = useState8(null);
-  useEffect8(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const options = (data || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
@@ -1066,13 +1009,13 @@ var RadioInput = ({
         ]
       }
     ) }),
-    error && /* @__PURE__ */ jsx24("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx24("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-import { useCallback, useState as useState9 } from "react";
+import { useCallback, useState } from "react";
 import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var MultiCheckbox = ({
   className,
@@ -1085,7 +1028,7 @@ var MultiCheckbox = ({
   isEditable = true,
   isDisabled = false
 }) => {
-  const [value, setValue] = useState9(propValue);
+  const [value, setValue] = useState(propValue);
   const options = (data || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
@@ -1125,9 +1068,6 @@ var MultiCheckbox = ({
 };
 var MultiCheckbox_default = MultiCheckbox;
 
-// src/components/Inputs/RichText/RichText.tsx
-import { useEffect as useEffect9, useState as useState10 } from "react";
-
 // src/components/Global/TinyMceEditor.tsx
 import { useMemo, useRef } from "react";
 import { Editor } from "@tinymce/tinymce-react";
@@ -1202,30 +1142,22 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function RichText({ className, style, ...props }) {
-  const [error, setError] = useState10(null);
-  useEffect9(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   return /* @__PURE__ */ jsxs14(
     "div",
     {
-      className: cn(className, error ? "border-red-500" : ""),
+      className: cn(className, props.errorMessage ? "border-red-500" : ""),
       style: {
         ...style,
-        borderColor: error ? "#f87171" : style?.borderColor
+        borderColor: props.errorMessage ? "#f87171" : style?.borderColor
       },
       children: [
         /* @__PURE__ */ jsx27(MyEditor, { onChange: (content) => props.onChange?.(content), value: props.value, isDefault: true }),
-        error && /* @__PURE__ */ jsx27("p", { className: "mt-1 text-xs text-red-500", children: error })
+        props.errorMessage && /* @__PURE__ */ jsx27("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
       ]
     }
   );
 }
 
-// src/components/Inputs/Dropdown/Dropdown.tsx
-import * as React8 from "react";
-
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1360,11 +1292,6 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  const [error, setError] = React8.useState(null);
-  React8.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -1380,10 +1307,10 @@ var Dropdown = ({ className, style, ...props }) => {
         SelectTrigger,
         {
           id: props.name || "select-field",
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           "aria-readonly": isReadonly,
           children: /* @__PURE__ */ jsx29(SelectValue, { placeholder })
@@ -1391,14 +1318,11 @@ var Dropdown = ({ className, style, ...props }) => {
       ),
       /* @__PURE__ */ jsx29(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx29(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
     ] }),
-    error && /* @__PURE__ */ jsx29("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx29("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var Dropdown_default = Dropdown;
 
-// src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-import { useEffect as useEffect11, useState as useState12 } from "react";
-
 // src/components/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { jsx as jsx30 } from "react/jsx-runtime";
@@ -1433,11 +1357,6 @@ import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  const [error, setError] = useState12(null);
-  useEffect11(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -1454,13 +1373,12 @@ var SwitchToggle = ({ className, style, ...props }) => {
       ),
       /* @__PURE__ */ jsx31(Label2, { htmlFor: props.name || "switch", children: props.text })
     ] }) }),
-    error && /* @__PURE__ */ jsx31("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx31("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-import * as React9 from "react";
 import { PhoneInput as PhoneInputField } from "react-international-phone";
 import "react-international-phone/style.css";
 import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -1468,11 +1386,6 @@ var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  const [error, setError] = React9.useState(null);
-  React9.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (val) => {
     props.onChange?.(val);
   };
@@ -1483,10 +1396,10 @@ var PhoneInput = ({ className, style, ...props }) => {
         defaultCountry: "in",
         name: props.name,
         value: props.value,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         onChange: (phone) => handleChange(phone),
         inputProps: {
@@ -1496,13 +1409,12 @@ var PhoneInput = ({ className, style, ...props }) => {
         disabled: isDisabled || !isEditable
       }
     ),
-    error && /* @__PURE__ */ jsx32("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx32("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-import * as React10 from "react";
 import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1510,11 +1422,6 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React10.useState(null);
-  React10.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -1528,10 +1435,10 @@ var SearchInput = ({ className, style, ...props }) => {
           id: props.name || "text-field",
           name: props.name,
           value: props.value,
-          className: cn(className, error ? "border-red-500" : ""),
+          className: cn(className, props.errorMessage ? "border-red-500" : ""),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
@@ -1541,21 +1448,15 @@ var SearchInput = ({ className, style, ...props }) => {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx33("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx33("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-import { useEffect as useEffect14, useState as useState15 } from "react";
 import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  const [error, setError] = useState15(null);
-  useEffect14(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   return /* @__PURE__ */ jsxs20("div", { className: "d-flex items-center relative align-middle", children: [
     /* @__PURE__ */ jsx34(
       Input,
@@ -1564,10 +1465,10 @@ var FileInput = ({ className, style, ...props }) => {
         id: "file",
         name: props.name,
         value: props.value,
-        className: cn(className, error ? "border-red-500" : ""),
+        className: cn(className, props.errorMessage ? "border-red-500" : ""),
         style: {
           ...style,
-          borderColor: error ? "#f87171" : style?.borderColor
+          borderColor: props.errorMessage ? "#f87171" : style?.borderColor
         },
         autoComplete: "off",
         placeholder,
@@ -1576,13 +1477,12 @@ var FileInput = ({ className, style, ...props }) => {
         }
       }
     ),
-    error && /* @__PURE__ */ jsx34("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx34("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import React11, { useEffect as useEffect15 } from "react";
 import { Fragment as Fragment13, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1594,7 +1494,6 @@ function DatePicker({ className, style, ...props }) {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React11.useState(null);
   const resolveDate = (option, customOption) => {
     if (!option) return void 0;
     switch (option) {
@@ -1609,10 +1508,6 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  useEffect15(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -1631,12 +1526,12 @@ function DatePicker({ className, style, ...props }) {
           value: props.value,
           className: cn(
             className,
-            error ? "border-red-500" : "",
+            props.errorMessage ? "border-red-500" : "",
             "appearance-auto"
           ),
           style: {
             ...style,
-            borderColor: error ? "#f87171" : style?.borderColor
+            borderColor: props.errorMessage ? "#f87171" : style?.borderColor
           },
           readOnly: isReadonly,
           placeholder,
@@ -1645,16 +1540,16 @@ function DatePicker({ className, style, ...props }) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx35("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx35("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import * as React13 from "react";
+import * as React3 from "react";
 import { addDays, format } from "date-fns";
 
 // src/components/ui/calendar.tsx
-import * as React12 from "react";
+import * as React2 from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function Calendar2({
@@ -1809,8 +1704,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React12.useRef(null);
-  React12.useEffect(() => {
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx36(
@@ -1871,18 +1766,13 @@ function PopoverContent({
 // src/components/Inputs/DateRange/DateRange.tsx
 import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var DateRange = ({ className, style, ...props }) => {
-  const [error, setError] = React13.useState(null);
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React13.useState(
+  const [date, setDate] = React3.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: addDays(/* @__PURE__ */ new Date(), 7)
     }
   );
-  React13.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (value) => {
     setDate(value);
     if (value) {
@@ -1919,13 +1809,12 @@ var DateRange = ({ className, style, ...props }) => {
         }
       ) })
     ] }) }),
-    error && /* @__PURE__ */ jsx38("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx38("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-import * as React14 from "react";
 import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1933,11 +1822,6 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [error, setError] = React14.useState(null);
-  React14.useEffect(() => {
-    if (!props.validateOnMount) return;
-    setError(props.errorMessage || null);
-  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -1949,7 +1833,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
           "flex justify-start items-center relative border border-input rounded-md bg-transparent focus-within:ring-2 focus-within:ring-ring focus-within:border-primary",
           className,
           "p-0 m-0",
-          error ? "border-red-500" : ""
+          props.errorMessage ? "border-red-500" : ""
         ),
         children: [
           prepend && /* @__PURE__ */ jsx39("div", { className: "px-3 flex items-center bg-gray-500 text-white h-10 rounded-l-md", children: prepend }),
@@ -1966,7 +1850,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
               ),
               style: {
                 ...style,
-                borderColor: error ? "#f87171" : style?.borderColor
+                borderColor: props.errorMessage ? "#f87171" : style?.borderColor
               },
               autoComplete: isAutocomplete ? "on" : "off",
               placeholder,
@@ -1979,7 +1863,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx39("p", { className: "mt-1 text-xs text-red-500", children: error })
+    props.errorMessage && /* @__PURE__ */ jsx39("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
   ] });
 };
 var TextInputGroup_default = TextInputGroup;
@@ -2322,7 +2206,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-import { useState as useState18 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var Table2 = ({
   columns,
@@ -2339,7 +2223,7 @@ var Table2 = ({
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const [currentPage, setCurrentPage] = useState18(1);
+  const [currentPage, setCurrentPage] = useState3(1);
   const enablePagination = pagination && rawData.length > itemsPerPage;
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -2460,12 +2344,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, LinkComponent, pathname, can
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React15 from "react";
+import React4 from "react";
 import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ jsx46("div", { className, style, children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between bg-gray-50 p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ jsx46("div", { className: "flex items-center", children: /* @__PURE__ */ jsx46("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx46("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx46("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx46("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs29(React15.Fragment, { children: [
+    /* @__PURE__ */ jsx46("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs29(React4.Fragment, { children: [
       /* @__PURE__ */ jsx46(
         "button",
         {
@@ -2498,10 +2382,10 @@ import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
 import { jsx as jsx50 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
-import * as React16 from "react";
+import * as React5 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx51 } from "react/jsx-runtime";
-var Avatar = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
+var Avatar = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   AvatarPrimitive.Root,
   {
     ref,
@@ -2513,7 +2397,7 @@ var Avatar = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
+var AvatarImage = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   AvatarPrimitive.Image,
   {
     ref,
@@ -2522,7 +2406,7 @@ var AvatarImage = React16.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
+var AvatarFallback = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -2909,8 +2793,8 @@ function useAppState() {
   return useContext(StateContext);
 }
 
-// src/components/Form/Wrapper.tsx
-import React18, { useMemo as useMemo2 } from "react";
+// src/components/Form/Form.tsx
+import React7, { useMemo as useMemo2 } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
@@ -2983,7 +2867,7 @@ function generateZodSchema(data) {
   }, {});
   return z.object(fields);
 }
-var FormWrapper = ({
+var Form = ({
   validation,
   defaultValues,
   children,
@@ -3018,9 +2902,9 @@ var FormWrapper = ({
       className: cn(
         "space-y-4 min-h-[100px] h-auto flex justify-between flex-col"
       ),
-      children: /* @__PURE__ */ jsx57("div", { className: "min-h-[50px]", children: React18.Children.map(children, (child) => {
+      children: /* @__PURE__ */ jsx57("div", { className: "min-h-[50px]", children: React7.Children.map(children, (child) => {
         const processChild = (child2) => {
-          if (React18.isValidElement(child2)) {
+          if (React7.isValidElement(child2)) {
             const node = child2.props?.node;
             if (node?.category === "Form Controls") {
               const name = node.properties?.name || "unnamed";
@@ -3031,7 +2915,7 @@ var FormWrapper = ({
                   control,
                   render: ({ field: controllerField }) => {
                     const childElement = child2;
-                    return React18.cloneElement(childElement, {
+                    return React7.cloneElement(childElement, {
                       input: {
                         ...controllerField,
                         value: controllerField.value || "",
@@ -3047,11 +2931,11 @@ var FormWrapper = ({
             }
             if (child2.props?.children) {
               const childElement = child2;
-              return React18.cloneElement(childElement, {
-                children: React18.Children.map(childElement.props.children, processChild)
+              return React7.cloneElement(childElement, {
+                children: React7.Children.map(childElement.props.children, processChild)
               });
             }
-            return React18.cloneElement(child2);
+            return React7.cloneElement(child2);
           }
           return child2;
         };
@@ -3060,6 +2944,116 @@ var FormWrapper = ({
     }
   );
 };
+var Form_default = Form;
+
+// src/components/Form/Wrapper.tsx
+import { useMemo as useMemo3 } from "react";
+import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
+import { useForm as useForm2 } from "react-hook-form";
+import { z as z2 } from "zod";
+import { jsx as jsx58 } from "react/jsx-runtime";
+function generateZodSchema2(data) {
+  const fields = data.reduce((acc, f) => {
+    const name = f.name || "unnamed";
+    const message = f.message || `${name} is invalid`;
+    const passwordLen = f.passwordLength;
+    let fieldSchema = z2.string({ message });
+    switch (f.type) {
+      case "Text":
+      case "Search":
+        fieldSchema = z2.string({ message });
+        if (f?.min && f?.min !== "") fieldSchema = fieldSchema.min(f.min);
+        else if (f.isRequired) fieldSchema = fieldSchema.min(1, { message: `${message}. Cannot be empty` });
+        if (f?.max && f?.max !== "") fieldSchema = fieldSchema.max(f.max);
+        if (f?.email) fieldSchema = fieldSchema.email();
+        if (f?.url) fieldSchema = fieldSchema.url();
+        if (f?.regex) fieldSchema = fieldSchema.regex(new RegExp(f.regex));
+        break;
+      case "Email":
+        fieldSchema = z2.email({ message });
+        break;
+      case "Password":
+        fieldSchema = z2.string({ message }).min(passwordLen, { message: `Password must be at least ${passwordLen} characters long` });
+        break;
+      case "Phone":
+        fieldSchema = z2.string().transform((val) => val.replace(/\D/g, "")).transform((val) => val.slice(-10)).refine((val) => {
+          return val.length === 10;
+        }, {
+          message: "Phone number must be 10 digits long"
+        });
+        break;
+      case "DatePicker":
+        fieldSchema = z2.iso.date({ message });
+        break;
+      case "FileInput":
+        fieldSchema = z2.instanceof(File, { message: "Please select a file" });
+        if (f?.maxSize) {
+          fieldSchema = fieldSchema.refine(
+            (file) => file.size <= f.maxSize,
+            { message: `File size must be less than ${f.maxSize / 1024 / 1024}MB` }
+          );
+        }
+        if (f?.acceptedTypes) {
+          fieldSchema = fieldSchema.refine(
+            (file) => f.acceptedTypes.includes(file.type),
+            { message: `File type must be one of: ${f.acceptedTypes.join(", ")}` }
+          );
+        }
+        break;
+      case "Checkbox":
+        fieldSchema = z2.boolean({ message });
+        break;
+      case "Dropdown":
+        fieldSchema = z2.string({ message });
+        break;
+      case "NumberInput":
+        fieldSchema = z2.number({ message });
+        if (f?.min !== void 0) fieldSchema = fieldSchema.min(f.min);
+        if (f?.max !== void 0) fieldSchema = fieldSchema.max(f.max);
+        break;
+      default:
+        fieldSchema = z2.any();
+    }
+    if (!f.isRequired) fieldSchema = fieldSchema.optional();
+    acc[name] = fieldSchema;
+    return acc;
+  }, {});
+  return z2.object(fields);
+}
+var FormWrapper = ({
+  validation,
+  defaultValues,
+  children,
+  onSubmit,
+  onReset
+}) => {
+  const schema = useMemo3(() => {
+    if (!validation || validation.length === 0) return null;
+    return generateZodSchema2(validation);
+  }, [validation]);
+  const form = useForm2({
+    resolver: schema ? zodResolver2(schema) : void 0,
+    defaultValues
+  });
+  const formSubmit = (data) => {
+    if (onSubmit) onSubmit(data);
+  };
+  const handleReset = () => {
+    form.reset();
+    if (onReset) onReset();
+  };
+  return /* @__PURE__ */ jsx58(
+    "form",
+    {
+      onSubmit: form.handleSubmit(formSubmit),
+      onReset: handleReset,
+      className: cn(
+        "space-y-4 min-h-[100px] h-auto flex justify-between flex-col"
+      ),
+      children: /* @__PURE__ */ jsx58("div", { className: "min-h-[50px]", children: typeof children === "function" ? children(form) : children })
+    }
+  );
+};
 var Wrapper_default = FormWrapper;
 export {
   BarChart_default as BarChart,
@@ -3075,7 +3069,8 @@ export {
   EmailComposer,
   FileInput_default as FileInput,
   Flex_default as FlexLayout,
-  Wrapper_default as Form,
+  Form_default as Form,
+  Wrapper_default as FormWrapper,
   Grid_default as GridLayout,
   Image_default as Image,
   Modal_default as Modal,