@algorithm-shift/design-system 1.2.964 → 1.2.966

package/dist/index.d.mts

@@ -77,8 +77,15 @@ interface RadioInputProps extends ElementProps, InputSourceProperties, InputProp
   onChange?: (value: string, name: string) => void;
 }
 interface MultiCheckboxInputProps extends ElementProps, InputSourceProperties, InputProperties {
-  value?: Record<string, boolean> | any;
-  onChange?: (value: Record<string, boolean>, name: string) => void;
+  apiUrl?: string;
+  axiosInstance?: typeof axios;
+  pageSize?: number;
+  outputFormat?: 'array' | 'comma' | 'semicolon';
+  source?: 'api' | 'options' | 'json' | 'state';
+  loading?: boolean;
+  value?: string[] | string;
+  onUncheckItems?: (value: string[] | string, name: string) => void;
+  onChange?: (value: string[] | string, name: string) => void;
 }
 interface RichTextInputProps extends ElementProps, InputProperties {
   value?: string | any;
@@ -150,6 +157,8 @@ interface StagesProps extends ElementProps {
   dataKey?: string;
   dataLabel?: string;
   loading?: boolean;
+  triggerOnClick?: boolean;
+  saving?: boolean;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -302,7 +311,7 @@ declare const CheckboxInput: ({ className, style, ...props }: CheckboxInputProps
 
 declare const RadioInput: ({ className, style, defaultValue, onChange, data, dataKey, dataLabel, ...props }: RadioInputProps) => react_jsx_runtime.JSX.Element;
 
-declare const MultiCheckbox: ({ className, style, data, dataKey, dataLabel, value: propValue, onChange, isEditable, isDisabled, ...props }: MultiCheckboxInputProps) => react_jsx_runtime.JSX.Element;
+declare function MultiCheckbox({ apiUrl, axiosInstance, data, dataKey, dataLabel, pageSize, value, onChange, outputFormat, className, style, source, loading, onUncheckItems, ...props }: MultiCheckboxInputProps): react_jsx_runtime.JSX.Element;
 
 declare function RichText({ className, style, ...props }: RichTextInputProps): react_jsx_runtime.JSX.Element;
 
@@ -386,7 +395,7 @@ declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVis
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -77,8 +77,15 @@ interface RadioInputProps extends ElementProps, InputSourceProperties, InputProp
   onChange?: (value: string, name: string) => void;
 }
 interface MultiCheckboxInputProps extends ElementProps, InputSourceProperties, InputProperties {
-  value?: Record<string, boolean> | any;
-  onChange?: (value: Record<string, boolean>, name: string) => void;
+  apiUrl?: string;
+  axiosInstance?: typeof axios;
+  pageSize?: number;
+  outputFormat?: 'array' | 'comma' | 'semicolon';
+  source?: 'api' | 'options' | 'json' | 'state';
+  loading?: boolean;
+  value?: string[] | string;
+  onUncheckItems?: (value: string[] | string, name: string) => void;
+  onChange?: (value: string[] | string, name: string) => void;
 }
 interface RichTextInputProps extends ElementProps, InputProperties {
   value?: string | any;
@@ -150,6 +157,8 @@ interface StagesProps extends ElementProps {
   dataKey?: string;
   dataLabel?: string;
   loading?: boolean;
+  triggerOnClick?: boolean;
+  saving?: boolean;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -302,7 +311,7 @@ declare const CheckboxInput: ({ className, style, ...props }: CheckboxInputProps
 
 declare const RadioInput: ({ className, style, defaultValue, onChange, data, dataKey, dataLabel, ...props }: RadioInputProps) => react_jsx_runtime.JSX.Element;
 
-declare const MultiCheckbox: ({ className, style, data, dataKey, dataLabel, value: propValue, onChange, isEditable, isDisabled, ...props }: MultiCheckboxInputProps) => react_jsx_runtime.JSX.Element;
+declare function MultiCheckbox({ apiUrl, axiosInstance, data, dataKey, dataLabel, pageSize, value, onChange, outputFormat, className, style, source, loading, onUncheckItems, ...props }: MultiCheckboxInputProps): react_jsx_runtime.JSX.Element;
 
 declare function RichText({ className, style, ...props }: RichTextInputProps): react_jsx_runtime.JSX.Element;
 
@@ -386,7 +395,7 @@ declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVis
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -50,7 +50,7 @@ __export(src_exports, {
   Icon: () => Icon_default,
   Image: () => Image_default,
   Modal: () => Modal,
-  MultiCheckbox: () => MultiCheckbox_default,
+  MultiCheckbox: () => MultiCheckbox,
   MultiSelect: () => LazyMultiSelectDropdown,
   Navbar: () => Navbar,
   NumberInput: () => NumberInput_default,
@@ -27455,63 +27455,160 @@ var RadioInput_default = RadioInput;
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
 var import_react16 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var MultiCheckbox = ({
-  className,
-  style,
+function MultiCheckbox({
+  apiUrl,
+  axiosInstance,
   data = [],
-  dataKey = "value",
-  dataLabel = "label",
-  value: propValue = {},
+  dataKey = "id",
+  dataLabel = "name",
+  pageSize = 20,
+  value,
   onChange,
-  isEditable = true,
-  isDisabled = false,
+  outputFormat = "array",
+  className,
+  style,
+  source,
+  loading,
+  onUncheckItems,
   ...props
-}) => {
-  const list = Array.isArray(data) ? data : [];
-  const [value, setValue] = (0, import_react16.useState)(propValue);
-  const options = (list || []).map((item) => ({
-    value: item[dataKey || "value"],
-    label: item[dataLabel || "label"]
-  }));
-  (0, import_react16.useEffect)(() => {
-    if (propValue !== void 0) {
-      onChange?.(propValue, props?.name || "");
+}) {
+  const [options, setOptions] = (0, import_react16.useState)([]);
+  const [page, setPage] = (0, import_react16.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react16.useState)(true);
+  const [pageLoading, setPageLoading] = (0, import_react16.useState)(false);
+  const loadMoreRef = (0, import_react16.useRef)(null);
+  const normalizeInput = (val) => {
+    if (!val) return [];
+    if (Array.isArray(val)) return val;
+    if (typeof val === "string") {
+      if (val.includes(";")) return val.split(";").map((s) => s.trim());
+      if (val.includes(",")) return val.split(",").map((s) => s.trim());
+      return [val.trim()];
     }
-  }, []);
-  const handleChange = (0, import_react16.useCallback)(
-    (key, checked) => {
-      setValue((prev) => {
-        const newValue = { ...prev, [key]: checked };
-        onChange?.(newValue, props?.name || "");
-        return newValue;
-      });
+    return [];
+  };
+  const selected = normalizeInput(value);
+  const convertOutput = (arr) => {
+    switch (outputFormat) {
+      case "comma":
+        return arr.join(",");
+      case "semicolon":
+        return arr.join(";");
+      default:
+        return arr;
+    }
+  };
+  const fetchApiPage = (0, import_react16.useCallback)(async () => {
+    if (!apiUrl) return [];
+    const client = axiosInstance || (await import("axios")).default;
+    const res = await client.get(apiUrl, {
+      params: { page, limit: pageSize },
+      withCredentials: true
+    });
+    if (res.data?.success && Array.isArray(res.data.data)) {
+      return res.data.data;
+    }
+    return Array.isArray(res.data) ? res.data : [];
+  }, [apiUrl, axiosInstance, page, pageSize]);
+  const mapData = (0, import_react16.useCallback)(
+    (items) => {
+      if (Array.isArray(items) === false) return [];
+      return (items || []).map((item) => ({
+        value: item[dataKey],
+        label: item[dataLabel]
+      }));
     },
-    [onChange]
+    [dataKey, dataLabel]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    "div",
-    {
-      className: cn("flex flex-col gap-3", className),
-      style,
-      children: [
-        options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-gray-500", children: "No options available." }),
-        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            Checkbox,
-            {
-              id: opt.value,
-              checked: !!value[opt.value],
-              onCheckedChange: (checked) => handleChange(opt.value, checked === true),
-              disabled: !isEditable || isDisabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Label2, { htmlFor: opt.value, children: opt.label })
-        ] }, opt.value))
-      ]
+  const loadPage = (0, import_react16.useCallback)(async () => {
+    if (source !== "api") return;
+    if (pageLoading) return;
+    setPageLoading(true);
+    try {
+      const pageData = await fetchApiPage();
+      const mapped = mapData(pageData);
+      setOptions((prev) => [...prev, ...mapped]);
+      if (pageData.length < pageSize) {
+        setHasMore(false);
+      }
+    } finally {
+      setPageLoading(false);
     }
-  );
-};
-var MultiCheckbox_default = MultiCheckbox;
+  }, [source, pageLoading, fetchApiPage, mapData, pageSize]);
+  (0, import_react16.useEffect)(() => {
+    if (source === "api") {
+      setOptions([]);
+      setPage(1);
+      setHasMore(true);
+    } else {
+      setOptions(mapData(data));
+      setHasMore(false);
+    }
+  }, [source, JSON.stringify(data)]);
+  (0, import_react16.useEffect)(() => {
+    if (source === "api") loadPage();
+  }, [page, source]);
+  (0, import_react16.useEffect)(() => {
+    if (source !== "api") return;
+    if (!hasMore || pageLoading) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        setPage((prev) => prev + 1);
+      }
+    });
+    if (loadMoreRef.current) observer.observe(loadMoreRef.current);
+    return () => observer.disconnect();
+  }, [source, hasMore, pageLoading]);
+  const toggle = (val) => {
+    if (props.isDisabled || props.isReadonly) return;
+    const updated = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+    onChange?.(convertOutput(updated), props.name || "");
+    onUncheckItems?.(convertOutput(
+      options.filter((opt) => !updated.includes(opt.value)).map((opt) => opt.value)
+    ), props.name || "");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex flex-col gap-2 max-h-64 overflow-auto", className), style, children: [
+    options.length === 0 && !pageLoading && !loading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-center py-2 text-gray-500 text-sm", children: "No options available." }),
+    options.map((opt, index) => {
+      const hasError = !!props.errorMessage;
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex items-center space-x-2 p-1 rounded",
+            hasError && "bg-red-50"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              Checkbox,
+              {
+                id: props.name ? `${props.name}-${opt.value}` : opt.value,
+                checked: selected.includes(opt.value),
+                onCheckedChange: () => toggle(opt.value),
+                disabled: props.isDisabled || props.isReadonly,
+                className: cn(
+                  hasError && "border-red-500 data-[state=checked]:bg-red-500"
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              Label2,
+              {
+                id: props.name ? `${props.name}-${opt.value}` : opt.value,
+                className: cn(hasError && "text-red-600"),
+                children: opt.label
+              }
+            )
+          ]
+        },
+        `${index}-${opt.value}`
+      );
+    }),
+    source === "api" && hasMore && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: loadMoreRef, className: "h-4" }),
+    (pageLoading || loading) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-center py-2 text-gray-500 text-sm", children: "Loading\u2026" }),
+    props.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+  ] });
+}
 
 // src/components/Inputs/RichText/RichText.tsx
 var import_react18 = require("react");
@@ -30374,24 +30471,38 @@ var Tabs_default = Tabs;
 // src/components/Navigation/Stages/Stages.tsx
 var import_react32 = __toESM(require("react"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading }) => {
+var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading, saving, triggerOnClick = false }) => {
   const [activeStage, setActiveStage] = (0, import_react32.useState)(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
+  const [isCompleted, setIsCompleted] = (0, import_react32.useState)(false);
+  const updateStage = (stageKey) => {
+    setActiveStage(stageKey);
+    onStageChange?.(stageKey);
+  };
   const nextStage = () => {
     if (!stages || stages.length === 0) return;
     const currentIndex = stages.findIndex((stage) => stage[dataKey] === activeStage);
-    if (currentIndex < stages.length - 1) {
-      const newStage = stages[currentIndex + 1];
-      setActiveStage(newStage[dataKey]);
-      onStageChange?.(newStage[dataKey]);
+    if (currentIndex + 1 === stages.length) {
+      const currentStage2 = stages[currentIndex];
+      updateStage(currentStage2[dataKey]);
+      setIsCompleted(true);
+      return;
+    }
+    if (currentIndex < stages.length) {
+      const currentStage2 = stages[currentIndex];
+      updateStage(currentStage2[dataKey]);
+      return;
     }
   };
   const lastStage = stages && stages.length > 0 ? stages[stages.length - 1][dataKey] : null;
   const onStageClick = (stageKey) => {
     if (!stageKey || stageKey === activeStage || activeStage === lastStage) return;
     setActiveStage(stageKey);
-    onStageChange?.(stageKey);
+    if (triggerOnClick) {
+      onStageChange?.(stageKey);
+    }
   };
-  const isAllStagesCompleted = activeStage === lastStage;
+  const isAllStagesCompleted = isCompleted || currentStage === lastStage;
+  const disabled = isAllStagesCompleted || loading || saving;
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
@@ -30405,7 +30516,7 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
       index
     )) : stages?.length > 0 && stages?.map((stage, index) => {
       const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
-      const isCompleted = isAllStagesCompleted || index < currentIndex;
+      const isCompleted2 = isAllStagesCompleted || index < currentIndex;
       const isActive = !isAllStagesCompleted && index === currentIndex;
       return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react32.default.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
@@ -30413,7 +30524,7 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
           {
             className: `
                   min-w-[80px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap
-                  ${isActive ? "bg-green-700 text-white shadow-md" : isCompleted ? "bg-green-50 text-green-700 border border-green-700" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
+                  ${isActive ? "bg-green-700 text-white shadow-md" : isCompleted2 ? "bg-green-50 text-green-700 border border-green-700" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
             onClick: () => {
               if (isAllStagesCompleted) return;
               onStageClick(stage[dataKey]);
@@ -30427,11 +30538,12 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
     isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "button",
       {
-        className: "bg-green-700 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm",
+        className: `bg-green-700 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
         onClick: () => {
           nextStage();
         },
-        children: buttonText
+        disabled,
+        children: saving ? "Updating..." : buttonText
       }
     ) })
   ] }) });