@algorithm-shift/design-system 1.2.87 → 1.2.89

package/dist/index.d.mts

@@ -143,6 +143,9 @@ interface StagesProps extends ElementProps {
   buttonText?: string;
   onStageChange?: (stageId: string) => void;
   currentStage?: string;
+  dataKey?: string;
+  dataLabel?: string;
+  loading?: boolean;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -375,7 +378,7 @@ declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVis
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage }: StagesProps) => 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 Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -143,6 +143,9 @@ interface StagesProps extends ElementProps {
   buttonText?: string;
   onStageChange?: (stageId: string) => void;
   currentStage?: string;
+  dataKey?: string;
+  dataLabel?: string;
+  loading?: boolean;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -375,7 +378,7 @@ declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVis
 
 declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage }: StagesProps) => 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 Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -30128,27 +30128,51 @@ var Tabs_default = Tabs;
 // src/components/Navigation/Stages/Stages.tsx
 var import_react30 = __toESM(require("react"));
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage }) => {
+var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey = "key", dataLabel = "header", loading }) => {
+  const [activeStage, setActiveStage] = (0, import_react30.useState)(currentStage || (stages && stages.length > 0 ? stages[0].key : null));
+  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]);
+    }
+  };
+  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);
+  };
+  const isAllStagesCompleted = activeStage === lastStage;
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => {
-      const currentIndex = stages.findIndex((s) => s.key === currentStage);
-      const isAllCompleted = currentStage === "completed";
-      const isCompleted = isAllCompleted || index < currentIndex;
-      const isActive = !isAllCompleted && index === currentIndex;
+    /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)(
+      "button",
+      {
+        className: `
+                  min-w-[80px] min-h-[35px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap
+                  text-gray-700 hover:bg-gray-100 border border-gray-200 bg-gray-100 animate-pulse`,
+        disabled: true
+      },
+      index
+    )) : stages?.length > 0 && stages?.map((stage, index) => {
+      const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
+      const isCompleted = isAllStagesCompleted || index < currentIndex;
+      const isActive = !isAllStagesCompleted && index === currentIndex;
       return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react30.default.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "button",
           {
             className: `
-                  min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap
-                  ${isActive ? "bg-[#034486] text-white shadow-md" : isCompleted ? "bg-[#e0f2fe] text-[#034486] border border-[#034486]" : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}`,
+                  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"}`,
             onClick: () => {
-              if (onStageChange) {
-                onStageChange(stage.key);
-              }
+              if (isAllStagesCompleted) return;
+              onStageClick(stage[dataKey]);
             },
-            children: stage.header
+            children: stage[dataLabel]
           }
         ),
         index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
@@ -30157,9 +30181,9 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
     isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "button",
       {
-        className: "bg-[#034486] 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",
         onClick: () => {
-          onStageChange?.("completed");
+          nextStage();
         },
         children: buttonText
       }