@algorithm-shift/design-system 1.2.60 → 1.2.61

package/dist/index.mjs

@@ -239,6 +239,8 @@ var ButtonWrapper = ({
   className,
   style,
   textContent = "Button",
+  loadingText = "Loading...",
+  loading = false,
   ...props
 }) => {
   return /* @__PURE__ */ jsx11(
@@ -247,7 +249,8 @@ var ButtonWrapper = ({
       ...props,
       className,
       style,
-      children: textContent
+      disabled: props.disabled || loading,
+      children: loading ? loadingText : textContent
     }
   );
 };
@@ -26816,6 +26819,9 @@ var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize
 };
 var Icon_default = Icon2;
 
+// src/components/Inputs/TextInput/TextInput.tsx
+import { useEffect as useEffect2 } from "react";
+
 // src/components/ui/input.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
@@ -26843,6 +26849,12 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect2(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -26871,6 +26883,7 @@ var TextInput = ({ className, style, ...props }) => {
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
+import { useEffect as useEffect3 } from "react";
 import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26878,6 +26891,12 @@ var NumberInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect3(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -26910,6 +26929,7 @@ var NumberInput = ({ className, style, ...props }) => {
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
+import { useEffect as useEffect4 } from "react";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26917,6 +26937,12 @@ var EmailInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect4(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -26948,6 +26974,7 @@ var EmailInput = ({ className, style, ...props }) => {
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
+import { useEffect as useEffect5 } from "react";
 import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26955,6 +26982,12 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect5(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -26986,6 +27019,9 @@ var PasswordInput = ({ className, style, ...props }) => {
 };
 var PasswordInput_default = PasswordInput;
 
+// src/components/Inputs/Textarea/Textarea.tsx
+import { useEffect as useEffect6 } from "react";
+
 // src/components/ui/textarea.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
@@ -27010,6 +27046,12 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect6(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27038,6 +27080,7 @@ var Textarea2 = ({ className, style, ...props }) => {
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
+import { useEffect as useEffect7 } from "react";
 import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27045,6 +27088,12 @@ var UrlInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect7(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27076,6 +27125,9 @@ var UrlInput = ({ className, style, ...props }) => {
 };
 var UrlInput_default = UrlInput;
 
+// src/components/Inputs/Checkbox/Checkbox.tsx
+import { useEffect as useEffect8 } from "react";
+
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -27130,6 +27182,11 @@ var CheckboxInput = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
+  useEffect8(() => {
+    if (props.value) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -27151,6 +27208,9 @@ var CheckboxInput = ({ className, style, ...props }) => {
 };
 var Checkbox_default = CheckboxInput;
 
+// src/components/Inputs/RadioInput/RadioInput.tsx
+import { useEffect as useEffect9 } from "react";
+
 // src/components/ui/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -27209,6 +27269,11 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
+  useEffect9(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     onChange?.(value);
   };
@@ -27234,7 +27299,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-import { useCallback, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect10, useState as useState2 } from "react";
 import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 var MultiCheckbox = ({
   className,
@@ -27253,6 +27318,11 @@ var MultiCheckbox = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
+  useEffect10(() => {
+    if (propValue !== void 0) {
+      onChange?.(propValue);
+    }
+  }, []);
   const handleChange = useCallback(
     (key, checked) => {
       setValue((prev) => {
@@ -27288,6 +27358,9 @@ var MultiCheckbox = ({
 };
 var MultiCheckbox_default = MultiCheckbox;
 
+// src/components/Inputs/RichText/RichText.tsx
+import { useEffect as useEffect11 } from "react";
+
 // src/components/Global/TinyMceEditor.tsx
 import { useMemo as useMemo2, useRef } from "react";
 import { Editor } from "@tinymce/tinymce-react";
@@ -27362,6 +27435,14 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 function RichText({ className, style, ...props }) {
+  useEffect11(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
+  const handleChange = (content) => {
+    props.onChange?.(content);
+  };
   return /* @__PURE__ */ jsxs16(
     "div",
     {
@@ -27371,13 +27452,16 @@ function RichText({ className, style, ...props }) {
         borderColor: props.errorMessage ? "#f87171" : style?.borderColor
       },
       children: [
-        /* @__PURE__ */ jsx33(MyEditor, { onChange: (content) => props.onChange?.(content), value: props.value || "", isDefault: true }),
+        /* @__PURE__ */ jsx33(MyEditor, { onChange: handleChange, value: props.value || "", isDefault: true }),
         props.errorMessage && /* @__PURE__ */ jsx33("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
       ]
     }
   );
 }
 
+// src/components/Inputs/Dropdown/Dropdown.tsx
+import { useEffect as useEffect12 } from "react";
+
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -27512,6 +27596,11 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
+  useEffect12(() => {
+    if (props.value !== void 0) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -27547,6 +27636,9 @@ var Dropdown = ({ className, style, ...props }) => {
 };
 var Dropdown_default = Dropdown;
 
+// src/components/Inputs/SwitchToggle/SwitchToggle.tsx
+import { useEffect as useEffect13 } from "react";
+
 // src/components/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { jsx as jsx36 } from "react/jsx-runtime";
@@ -27581,6 +27673,11 @@ import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
+  useEffect13(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     props.onChange?.(value);
   };
@@ -27603,6 +27700,7 @@ var SwitchToggle = ({ className, style, ...props }) => {
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
+import { useEffect as useEffect14 } from "react";
 import { PhoneInput as PhoneInputField } from "react-international-phone";
 import "react-international-phone/style.css";
 import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -27610,6 +27708,11 @@ var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
+  useEffect14(() => {
+    if (props.value !== void 0) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (val) => {
     props.onChange?.(val);
   };
@@ -27644,6 +27747,7 @@ var PhoneInput = ({ className, style, ...props }) => {
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
+import { useEffect as useEffect15 } from "react";
 import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27651,6 +27755,12 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect15(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27683,9 +27793,19 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
+import { useEffect as useEffect16 } from "react";
 import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 var FileInput2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
+  useEffect16(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
+  const handleChange = (e) => {
+    props.onChange?.(e);
+  };
   return /* @__PURE__ */ jsxs22("div", { className: "d-flex items-center relative align-middle", children: [
     /* @__PURE__ */ jsx40(
       Input,
@@ -27701,9 +27821,7 @@ var FileInput2 = ({ className, style, ...props }) => {
         },
         autoComplete: "off",
         placeholder,
-        onChange: (e) => {
-          props.onChange?.(e);
-        }
+        onChange: handleChange
       }
     ),
     props.errorMessage && /* @__PURE__ */ jsx40("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
@@ -27712,6 +27830,7 @@ var FileInput2 = ({ className, style, ...props }) => {
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
+import { useEffect as useEffect17 } from "react";
 import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27737,6 +27856,11 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
+  useEffect17(() => {
+    if (props.value !== void 0) {
+      handleChange(props.value);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -27774,11 +27898,11 @@ function DatePicker({ className, style, ...props }) {
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import * as React4 from "react";
+import React5, { useEffect as useEffect19 } from "react";
 import { addDays, format } from "date-fns";
 
 // src/components/ui/calendar.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { jsx as jsx42 } from "react/jsx-runtime";
 function Calendar2({
@@ -27933,8 +28057,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React3.useRef(null);
-  React3.useEffect(() => {
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx42(
@@ -27996,12 +28120,17 @@ function PopoverContent({
 import { Fragment as Fragment15, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React4.useState(
+  const [date, setDate] = React5.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: addDays(/* @__PURE__ */ new Date(), 7)
     }
   );
+  useEffect19(() => {
+    if (props.value && isDateRange(props.value)) {
+      handleChange?.(props.value);
+    }
+  }, []);
   const handleChange = (value) => {
     setDate(value);
     if (value) {
@@ -28044,6 +28173,7 @@ var DateRange = ({ className, style, ...props }) => {
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
+import { useEffect as useEffect20 } from "react";
 import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -28051,6 +28181,12 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
+  useEffect20(() => {
+    if (props.value !== void 0) {
+      const e = { target: { value: props.value } };
+      handleChange?.(e);
+    }
+  }, []);
   const handleChange = (e) => {
     props.onChange?.(e);
   };
@@ -28098,7 +28234,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/DataDisplay/Table/Table.tsx
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useState as useState3, useEffect as useEffect21 } from "react";
 
 // src/components/ui/data-table.tsx
 import {
@@ -28485,9 +28621,9 @@ var Table4 = ({
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
   const isControlled = typeof page === "number";
-  const [internalPage, setInternalPage] = useState4(1);
+  const [internalPage, setInternalPage] = useState3(1);
   const currentPage = isControlled ? page : internalPage;
-  useEffect3(() => {
+  useEffect21(() => {
     if (isControlled) return;
     if (currentPage > 1 && !pagination) setInternalPage(1);
   }, [pagination, isControlled]);
@@ -28628,12 +28764,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React5 from "react";
+import React6 from "react";
 import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ jsx52("div", { className, style, children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ jsx52("div", { className: "flex items-center", children: /* @__PURE__ */ jsx52("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx52("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx52("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs31(React5.Fragment, { children: [
+    /* @__PURE__ */ jsx52("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs31(React6.Fragment, { children: [
       /* @__PURE__ */ jsx52(
         "button",
         {
@@ -28665,10 +28801,10 @@ import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx56 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx57 } from "react/jsx-runtime";
-var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Root,
   {
     ref,
@@ -28680,7 +28816,7 @@ var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Image,
   {
     ref,
@@ -28689,7 +28825,7 @@ var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Fallback,
   {
     ref,