@algorithm-shift/design-system 1.2.25 → 1.2.27

package/dist/index.d.ts

@@ -20,6 +20,8 @@ interface ImageProps extends ElementProps {
 }
 
 type InputProperties = {
+  name?: string;
+  value?: string;
   placeholder?: string;
   regexPattern?: string;
   errorMessage?: string;
@@ -31,6 +33,9 @@ type InputProperties = {
   isAutocomplete?: boolean;
   label?: string;
   text?: string;
+  hasFormContainer?: boolean;
+  validateOnMount?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | string) => void;
 };
 
 interface TextInputProps extends ElementProps, InputProperties { }
@@ -40,11 +45,11 @@ interface NumberInputProps extends ElementProps, InputProperties { }
 interface TextAreaProps extends ElementProps, InputProperties { }
 interface UrlInputProps extends ElementProps, InputProperties { }
 interface SearchInputProps extends ElementProps, InputProperties { }
-interface FileInputProps extends ElementProps, Pick<InputProperties, 'placeholder'> { }
+interface FileInputProps extends ElementProps, InputProperties { }
 interface CheckboxInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
 interface RadioInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
 interface MultiCheckboxInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
-interface RichTextInputProps extends ElementProps { }
+interface RichTextInputProps extends ElementProps, InputProperties { }
 interface SelectDropdownInputProps extends ElementProps, InputProperties { }
 interface SwitchToggleInputProps extends ElementProps, Pick<InputProperties, 'text'> { }
 interface PhoneInputProps extends ElementProps, InputProperties { }
@@ -96,6 +101,7 @@ interface LogoProps extends ElementProps {
 
 interface ButtonProps extends ElementProps {
   textContent?: string;
+  type?: 'button' | 'submit';
 }
 
 interface PieChartProps extends ElementProps {
@@ -157,7 +163,7 @@ declare const Grid: ({ children, className, style }: ElementProps) => react_jsx_
 
 declare const Container: ({ children, className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 
-declare const ButtonComponent: ({ className, style, textContent, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ButtonComponent: ({ className, style, textContent, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const ImageControl: ({ className, style, imageUrl, imageUrlExternal, altText, }: ImageProps) => react_jsx_runtime.JSX.Element;
 
@@ -186,7 +192,7 @@ declare const RadioInput: ({ className, style, ...props }: RadioInputProps) => r
 
 declare const MultiCheckbox: ({ className, style, ...props }: MultiCheckboxInputProps) => react_jsx_runtime.JSX.Element;
 
-declare function RichText({ className, style }: RichTextInputProps): react_jsx_runtime.JSX.Element;
+declare function RichText({ className, style, ...props }: RichTextInputProps): react_jsx_runtime.JSX.Element;
 
 declare const Dropdown: ({ className, style, ...props }: SelectDropdownInputProps) => react_jsx_runtime.JSX.Element;
 
@@ -234,4 +240,4 @@ declare function EmailComposer({ className, style, to, setTo, showCc, setShowCc,
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ChartComponent as BarChart, ButtonComponent as Button, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailComposer, EmailInput, FileInput, Flex as FlexLayout, Grid as GridLayout, ImageControl as Image, Logo, Modal, MultiCheckbox, Navbar, Notification, NumberInput, CustomPagination as Pagination, PasswordInput, PhoneInput, DonutChart as PieChart, Profile, RadioInput, RichText, SearchInput, Shape, Spacer, StagesComponent as Stages, SwitchToggle, Table, Tabs, TextInput, Textarea, Typography, UrlInput, cn };
+export { ChartComponent as BarChart, ButtonComponent as Button, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, ImageControl as Image, Logo, Modal, MultiCheckbox, Navbar, Notification, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, Profile, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Spacer, StagesComponent as Stages, SwitchToggle, Table, Tabs, TextInput as Text, Textarea, Typography, UrlInput as URL, cn };

package/dist/index.js

@@ -37,8 +37,8 @@ __export(index_exports, {
   DatePicker: () => DatePicker,
   DateRange: () => DateRange_default,
   Dropdown: () => Dropdown_default,
+  Email: () => EmailInput_default,
   EmailComposer: () => EmailComposer,
-  EmailInput: () => EmailInput_default,
   FileInput: () => FileInput_default,
   FlexLayout: () => Flex_default,
   GridLayout: () => Grid_default,
@@ -50,23 +50,23 @@ __export(index_exports, {
   Notification: () => Notification_default,
   NumberInput: () => NumberInput_default,
   Pagination: () => Pagination_default,
-  PasswordInput: () => PasswordInput_default,
-  PhoneInput: () => PhoneInput_default,
+  Password: () => PasswordInput_default,
+  Phone: () => PhoneInput_default,
   PieChart: () => PieChart_default,
   Profile: () => Profile_default,
-  RadioInput: () => RadioInput_default,
+  RadioGroup: () => RadioInput_default,
   RichText: () => RichText,
-  SearchInput: () => SearchInput_default,
+  Search: () => SearchInput_default,
   Shape: () => Shape_default,
   Spacer: () => Spacer_default,
   Stages: () => Stages_default,
   SwitchToggle: () => SwitchToggle_default,
   Table: () => Table_default,
   Tabs: () => Tabs_default,
-  TextInput: () => TextInput_default,
+  Text: () => TextInput_default,
   Textarea: () => Textarea_default,
   Typography: () => Typography_default,
-  UrlInput: () => UrlInput_default,
+  URL: () => UrlInput_default,
   cn: () => cn
 });
 module.exports = __toCommonJS(index_exports);
@@ -192,18 +192,16 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var ButtonComponent = ({
   className,
   style,
-  textContent = "Button"
+  textContent = "Button",
+  type = "button",
+  ...props
 }) => {
-  const classNames = cn(
-    "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
-    "bg-[#000000] text-white transition-colors disabled:opacity-50",
-    className
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Button,
     {
-      type: "button",
-      className: classNames,
+      ...props,
+      type,
+      className,
       style,
       children: textContent
     }
@@ -312,7 +310,15 @@ var TextInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React2.useState("");
   const [error, setError] = React2.useState(null);
+  React2.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -329,9 +335,13 @@ var TextInput = ({ className, style, ...props }) => {
       Input,
       {
         type: "text",
-        className,
-        style,
-        value,
+        name: props.name,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
+        value: props.value || value,
         autoComplete: isAutocomplete ? "on" : "off",
         placeholder,
         onChange: handleChange,
@@ -548,6 +558,7 @@ var __iconNode14 = [
 var Search = createLucideIcon("search", __iconNode14);
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
+var import_react4 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -561,7 +572,15 @@ var NumberInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React3.useState("");
   const [error, setError] = React3.useState(null);
+  (0, import_react4.useEffect)(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -581,9 +600,13 @@ var NumberInput = ({ className, style, ...props }) => {
         {
           type: "number",
           id: "number-field",
-          value,
-          className,
-          style,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -615,7 +638,15 @@ var EmailInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React4.useState("");
   const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -634,9 +665,13 @@ var EmailInput = ({ className, style, ...props }) => {
         Input,
         {
           type: "email",
-          value,
-          className,
-          style,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -668,7 +703,15 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React5.useState("");
   const [error, setError] = React5.useState(null);
+  React5.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -688,9 +731,13 @@ var PasswordInput = ({ className, style, ...props }) => {
         {
           type: "password",
           id: "password-field",
-          className,
-          style,
-          value,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -740,7 +787,15 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React6.useState("");
   const [error, setError] = React6.useState(null);
+  React6.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -757,9 +812,13 @@ var Textarea2 = ({ className, style, ...props }) => {
       Textarea,
       {
         id: "textarea-field",
-        className,
-        style,
-        value,
+        name: props.name,
+        value: props.value || value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         autoComplete: isAutocomplete ? "on" : "off",
         placeholder,
         onChange: handleChange,
@@ -789,7 +848,15 @@ var UrlInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React7.useState("");
   const [error, setError] = React7.useState(null);
+  React7.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -807,11 +874,15 @@ var UrlInput = ({ className, style, ...props }) => {
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Input,
         {
-          type: "url",
-          className,
-          style,
           id: "url-field",
-          value,
+          type: "url",
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -958,8 +1029,11 @@ var MultiCheckbox = ({ className, style, ...props }) => {
 };
 var MultiCheckbox_default = MultiCheckbox;
 
+// src/components/Inputs/RichText/RichText.tsx
+var import_react6 = require("react");
+
 // src/components/Global/TinyMceEditor.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_tinymce_react = require("@tinymce/tinymce-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function MyEditor({
@@ -967,7 +1041,7 @@ function MyEditor({
   onChange,
   isDefault
 }) {
-  const editorRef = (0, import_react4.useRef)(null);
+  const editorRef = (0, import_react5.useRef)(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -979,7 +1053,7 @@ function MyEditor({
     }
     return trimmedHtml;
   }
-  const isDefaultToolbar = (0, import_react4.useMemo)(() => {
+  const isDefaultToolbar = (0, import_react5.useMemo)(() => {
     let toolbar = "undo redo | formatselect | bold italic forecolor";
     if (isDefault) {
       toolbar = "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help";
@@ -1031,8 +1105,26 @@ function MyEditor({
 
 // src/components/Inputs/RichText/RichText.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-function RichText({ className, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MyEditor, { isDefault: true }) });
+function RichText({ className, style, ...props }) {
+  const [error, setError] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      className: cn(className, error ? "border-red-500" : ""),
+      style: {
+        ...style,
+        borderColor: error ? "#f87171" : style?.borderColor
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MyEditor, { onChange: (content) => props.onChange?.(content), value: props.value, isDefault: true }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
+      ]
+    }
+  );
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
@@ -1175,9 +1267,10 @@ function SelectDropdown({
   id,
   disabled,
   readOnly,
-  style
+  style,
+  name
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Select, { value, onValueChange: onChange, disabled, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Select, { name, value, onValueChange: onChange, disabled, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SelectTrigger,
       {
@@ -1210,7 +1303,15 @@ var Dropdown = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React8.useState("");
   const [error, setError] = React8.useState(null);
+  React8.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (val) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(val);
+      return;
+    }
     setValue(val);
     if (isRequired && val.trim() === "") {
       setError(errorMessage);
@@ -1227,9 +1328,13 @@ var Dropdown = ({ className, style, ...props }) => {
         options: formatList,
         placeholder,
         id: "select-field",
-        value,
-        className,
-        style,
+        name: props.name,
+        value: props.value || value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         autoComplete: isAutocomplete ? "on" : "off",
         onChange: handleChange,
         disabled: isDisabled || !isEditable,
@@ -1298,7 +1403,15 @@ var PhoneInput = ({ className, style, ...props }) => {
   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) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(val);
+      return;
+    }
     if (val.length > noOfCharacters) return;
     setValue(val);
     if (isRequired && val.trim() === "") {
@@ -1314,7 +1427,13 @@ var PhoneInput = ({ className, style, ...props }) => {
       import_react_international_phone.PhoneInput,
       {
         defaultCountry: "in",
-        value,
+        name: props.name,
+        value: props.value || value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         onChange: (phone) => handleChange(phone),
         inputProps: {
           id: "phone-field",
@@ -1322,9 +1441,7 @@ var PhoneInput = ({ className, style, ...props }) => {
         },
         placeholder,
         disabled: isDisabled || !isEditable,
-        required: isRequired,
-        className,
-        style
+        required: isRequired
       }
     ),
     error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
@@ -1347,7 +1464,15 @@ var SearchInput = ({ className, style, ...props }) => {
   const isAutocomplete = props.isAutocomplete ?? false;
   const [value, setValue] = React10.useState("");
   const [error, setError] = React10.useState(null);
+  React10.useEffect(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     if (val.length > noOfCharacters) return;
     setValue(val);
@@ -1367,9 +1492,13 @@ var SearchInput = ({ className, style, ...props }) => {
         {
           type: "text",
           id: "text-field",
-          className,
-          style,
-          value,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           autoComplete: isAutocomplete ? "on" : "off",
           placeholder,
           onChange: handleChange,
@@ -1387,28 +1516,45 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
+var import_react7 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var FileInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
+  const [error, setError] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "d-flex items-center relative align-middle", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "bg-[#E9E9E9] absolute px-10 text-center top-1/2 h-full justify-center items-center flex w-10 -translate-y-1/2 text-[#383838] font-[500] text-[11px]", children: "Browse" }),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Input,
       {
         type: "file",
         id: "file",
+        name: props.name,
+        value: props.value,
+        className: cn(className, error ? "border-red-500" : ""),
+        style: {
+          ...style,
+          borderColor: error ? "#f87171" : style?.borderColor
+        },
         autoComplete: "off",
         placeholder,
-        className,
-        style
+        onChange: (e) => {
+          if (props.hasFormContainer) {
+            props.onChange?.(e);
+            return;
+          }
+        }
       }
-    )
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 text-xs text-red-500", children: error })
   ] });
 };
 var FileInput_default = FileInput;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-var import_react5 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -1422,8 +1568,8 @@ function DatePicker({ className, style, ...props }) {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  const [value, setValue] = import_react5.default.useState("");
-  const [error, setError] = import_react5.default.useState(null);
+  const [value, setValue] = import_react8.default.useState("");
+  const [error, setError] = import_react8.default.useState(null);
   const resolveDate = (option, customOption) => {
     if (!option) return void 0;
     switch (option) {
@@ -1438,7 +1584,15 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
+  (0, import_react8.useEffect)(() => {
+    if (!props.validateOnMount) return;
+    setError(props.errorMessage || null);
+  }, [props.errorMessage, props.validateOnMount]);
   const handleChange = (e) => {
+    if (props.hasFormContainer) {
+      props.onChange?.(e);
+      return;
+    }
     const val = e.target.value;
     setValue(val);
     if (isRequired && val.trim() === "") {
@@ -1458,14 +1612,18 @@ function DatePicker({ className, style, ...props }) {
           autoComplete: isAutocomplete ? "on" : "off",
           onChange: handleChange,
           disabled: isDisabled || !isEditable,
-          value,
+          name: props.name,
+          value: props.value || value,
+          className: cn(className, error ? "border-red-500" : ""),
+          style: {
+            ...style,
+            borderColor: error ? "#f87171" : style?.borderColor
+          },
           readOnly: isReadonly,
           required: isRequired,
           placeholder,
           min: minDate,
-          max: maxDate,
-          className,
-          style
+          max: maxDate
         }
       )
     ] }),
@@ -2065,13 +2223,13 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/DataDisplay/Table/Table.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var Table2 = ({ columns, data, rowActions, className, style, pagination = false, itemsPerPage = 10, onPageChange }) => {
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
-  const [currentPage, setCurrentPage] = (0, import_react6.useState)(1);
+  const [currentPage, setCurrentPage] = (0, import_react9.useState)(1);
   const enablePagination = pagination && rawData.length > itemsPerPage;
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -2236,12 +2394,12 @@ var Tabs = ({ tabs, className, style, pathname, LinkComponent }) => {
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-var import_react7 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between bg-gray-50 p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react7.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center flex-1 px-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react10.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
@@ -2669,8 +2827,8 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
   DatePicker,
   DateRange,
   Dropdown,
+  Email,
   EmailComposer,
-  EmailInput,
   FileInput,
   FlexLayout,
   GridLayout,
@@ -2682,23 +2840,23 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
   Notification,
   NumberInput,
   Pagination,
-  PasswordInput,
-  PhoneInput,
+  Password,
+  Phone,
   PieChart,
   Profile,
-  RadioInput,
+  RadioGroup,
   RichText,
-  SearchInput,
+  Search,
   Shape,
   Spacer,
   Stages,
   SwitchToggle,
   Table,
   Tabs,
-  TextInput,
+  Text,
   Textarea,
   Typography,
-  UrlInput,
+  URL,
   cn
 });
 /*! Bundled license information: