@algorithm-shift/design-system 1.2.87 → 1.2.89

package/dist/index.mjs

@@ -30035,29 +30035,53 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React10 from "react";
+import React10, { useState as useState9 } from "react";
 import { jsx as jsx58, jsxs as jsxs35 } from "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] = useState9(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__ */ jsx58("div", { className, style, children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ jsx58("div", { className: "flex items-center", children: /* @__PURE__ */ jsx58("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx58("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx58("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__ */ jsx58("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: loading ? Array(6).fill(null).map((_, index) => /* @__PURE__ */ jsx58(
+      "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__ */ jsxs35(React10.Fragment, { children: [
         /* @__PURE__ */ jsx58(
           "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__ */ jsx58("div", { className: "flex-shrink-0 w-3 h-px bg-gray-300" })
@@ -30066,9 +30090,9 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
     isShowBtn && /* @__PURE__ */ jsx58("div", { className: "flex items-center", children: /* @__PURE__ */ jsx58(
       "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
       }
@@ -30136,7 +30160,7 @@ import Link6 from "next/link";
 import Image4 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback4, useMemo as useMemo5, useState as useState9 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5, useState as useState10 } from "react";
 import { Fragment as Fragment22, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
 function Navbar({
   style,
@@ -30157,8 +30181,8 @@ function Navbar({
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
   const router = useRouter2();
-  const [showExitDialog, setShowExitDialog] = useState9(false);
-  const [pendingUrl, setPendingUrl] = useState9(null);
+  const [showExitDialog, setShowExitDialog] = useState10(false);
+  const [pendingUrl, setPendingUrl] = useState10(null);
   const handleBuilderExit = useCallback4(
     (e, url) => {
       if (isBuilder) {
@@ -30353,7 +30377,7 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
 var BarChart_default = React12.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React13, { useEffect as useEffect25, useMemo as useMemo6, useState as useState10 } from "react";
+import React13, { useEffect as useEffect25, useMemo as useMemo6, useState as useState11 } from "react";
 import {
   PieChart,
   Pie,
@@ -30388,7 +30412,7 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   }, [props.data]);
   const total = useMemo6(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
-  const [mounted, setMounted] = useState10(false);
+  const [mounted, setMounted] = useState11(false);
   useEffect25(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);