@algorithm-shift/design-system 1.2.88 → 1.2.89

package/dist/index.mjs

@@ -30037,7 +30037,7 @@ var Tabs_default = Tabs;
 // src/components/Navigation/Stages/Stages.tsx
 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, dataKey = "key", dataLabel = "header" }) => {
+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;
@@ -30057,7 +30057,16 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
   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) => {
+    /* @__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;
@@ -30066,7 +30075,7 @@ var StagesComponent = ({ stages, isShowBtn, buttonText, className, style, onStag
           "button",
           {
             className: `
-                  min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap
+                  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 (isAllStagesCompleted) return;