@algorithm-shift/design-system 1.3.108 → 1.3.109

package/dist/index.mjs

@@ -3693,11 +3693,9 @@ var valueFormatter = (value, format3, customFormatters = {}) => {
     case "date":
       return dayjs_setup_default(value).format(arg || "YYYY-MM-DD");
     case "datetimenumber":
-      const parsed = dayjs_setup_default(value).isValid() ? dayjs_setup_default(value).utc() : dayjs_setup_default(value);
-      return parsed.format("YYYY-MM-DD hh:mm");
+      return dayjs_setup_default(value).format("YYYY-MM-DD hh:mm");
     case "datetime":
-      const formated = dayjs_setup_default(value).isValid() ? dayjs_setup_default(value).utc() : dayjs_setup_default(value);
-      return formated.format("DD MMM YYYY hh:mm A");
+      return dayjs_setup_default(value).format("DD MMM YYYY hh:mm A");
     case "days":
       return `${dayjs_setup_default().diff(dayjs_setup_default(value), "day")} days`;
     case "months":
@@ -5545,29 +5543,6 @@ function TooltipTrigger({
 }) {
   return /* @__PURE__ */ jsx60(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx60(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs37(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx60(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
 
 // src/components/Navigation/Stages/Stages.tsx
 import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -5584,7 +5559,8 @@ var StagesComponent = ({
   loading,
   saving,
   triggerOnClick = false,
-  canvasMode = "desktop"
+  canvasMode = "desktop",
+  ...props
 }) => {
   const [activeStage, setActiveStage] = useState13("");
   const [isCompleted, setIsCompleted] = useState13(false);
@@ -5662,6 +5638,7 @@ var StagesComponent = ({
   }, [currentStage, stages]);
   const isAllStagesCompleted = isCompleted || activeRootStage?.[dataKey] === lastStage;
   const disabled = isAllStagesCompleted || loading || saving;
+  const primaryColor = props.primaryColor || "#12715b";
   return /* @__PURE__ */ jsx61("div", { className, style, children: /* @__PURE__ */ jsxs38(
     "div",
     {
@@ -5699,16 +5676,19 @@ var StagesComponent = ({
               const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
               const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
               const isActive = !isAllStagesCompleted && index === currentIndex;
-              let stageColor = "bg-green-50 text-green-700 border-2 border-green-700";
+              let stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
+              let stageStyle = { borderColor: primaryColor, color: isActive ? "white" : primaryColor, backgroundColor: isActive ? primaryColor : "transparent" };
               if (stage.hasOwnProperty("isSuccess") && stage.isSuccess === false) {
-                stageColor = "bg-red-50 text-red-700 border-2 border-red-700";
+                stageColor = `bg-red-50 text-red-700 border-2 border-red-700`;
+                stageStyle = { borderColor: "red", color: "red", backgroundColor: "transparent" };
               }
               let stageLabel = stage[dataLabel];
               if (stage[dataKey] !== activeChildStage?.[dataKey] && activeRootStage?.[dataKey] === stage[dataKey]) {
                 stageLabel = activeChildStage?.[dataLabel] || stageLabel;
-                stageColor = "bg-green-50 text-green-700 border-2 border-green-700";
+                stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
                 if (activeChildStage.hasOwnProperty("isSuccess") && activeChildStage.isSuccess === false) {
                   stageColor = "bg-red-50 text-red-700 border-2 border-red-700";
+                  stageStyle = { borderColor: "red", color: "red", backgroundColor: "transparent" };
                 }
               }
               const stageKey = typeof stage[dataKey] === "string" ? stage[dataKey] : JSON.stringify(stage[dataKey]);
@@ -5720,17 +5700,17 @@ var StagesComponent = ({
                     min-w-[70px] sm:min-w-[80px] w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 
                     rounded-full text-xs sm:text-sm font-medium transition-colors duration-200 
                     whitespace-normal sm:whitespace-nowrap flex-shrink-0 max-w-[150px] text-ellipsis overflow-hidden
-                    ${isActive ? "bg-green-700 text-white shadow-md" : isCompletedStage ? stageColor : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-200"}
+                    ${isActive ? `bg-[${primaryColor}] text-white shadow-md` : isCompletedStage ? stageColor : "bg-white border border-gray-200"}
                     ${isMobile ? "flex-1 text-center py-2.5" : ""}
                   `,
                     onClick: () => {
                       if (isAllStagesCompleted) return;
                       onStageClick(stage[dataKey]);
                     },
+                    style: stageStyle,
                     children: stageLabel
                   }
                 ) }),
-                /* @__PURE__ */ jsx61(TooltipContent, { className: "max-w-[400px] p-3 text-xs text-muted-foreground space-y-2", children: /* @__PURE__ */ jsx61("span", { children: /* @__PURE__ */ jsx61("b", { children: stageLabel }) }) }),
                 !isMobile && index < stages.length - 1 && /* @__PURE__ */ jsx61("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
               ] }, stageKey) }, stageKey);
             })
@@ -5747,12 +5727,13 @@ var StagesComponent = ({
               "button",
               {
                 className: `
-                w-full lg:w-auto bg-green-700 text-white px-4 lg:px-6 py-2.5 
+                w-full lg:w-auto text-white px-4 lg:px-6 py-2.5 
                 rounded-lg text-sm font-medium transition-colors duration-200 
                 shadow-sm ${disabled ? "opacity-50 cursor-not-allowed" : "hover:shadow-md"}
               `,
                 onClick: nextStage,
                 disabled,
+                style: { backgroundColor: primaryColor },
                 children: saving ? "Updating..." : buttonText
               }
             )