@algorithm-shift/design-system 1.3.108 → 1.3.110

package/dist/index.d.mts

@@ -168,6 +168,7 @@ interface StagesProps extends ElementProps {
   triggerOnClick?: boolean;
   saving?: boolean;
   canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
+  primaryColor?: string
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -494,7 +495,7 @@ declare const HistoryTimeline: ({ title, className, loading, titleKey, descripti
 
 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, saving, triggerOnClick, canvasMode }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick, canvasMode, ...props }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -168,6 +168,7 @@ interface StagesProps extends ElementProps {
   triggerOnClick?: boolean;
   saving?: boolean;
   canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
+  primaryColor?: string
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -494,7 +495,7 @@ declare const HistoryTimeline: ({ title, className, loading, titleKey, descripti
 
 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, saving, triggerOnClick, canvasMode }: StagesProps) => react_jsx_runtime.JSX.Element;
+declare const StagesComponent: ({ stages, isShowBtn, buttonText, className, style, onStageChange, currentStage, dataKey, dataLabel, loading, saving, triggerOnClick, canvasMode, ...props }: StagesProps) => react_jsx_runtime.JSX.Element;
 
 declare const Spacer: ({ className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3781,11 +3781,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":
@@ -5629,29 +5627,6 @@ function TooltipTrigger({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-    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__ */ (0, import_jsx_runtime60.jsx)(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
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -5668,7 +5643,8 @@ var StagesComponent = ({
   loading,
   saving,
   triggerOnClick = false,
-  canvasMode = "desktop"
+  canvasMode = "desktop",
+  ...props
 }) => {
   const [activeStage, setActiveStage] = (0, import_react34.useState)("");
   const [isCompleted, setIsCompleted] = (0, import_react34.useState)(false);
@@ -5746,6 +5722,7 @@ var StagesComponent = ({
   }, [currentStage, stages]);
   const isAllStagesCompleted = isCompleted || activeRootStage?.[dataKey] === lastStage;
   const disabled = isAllStagesCompleted || loading || saving;
+  const primaryColor = props.primaryColor || "#12715b";
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
@@ -5783,16 +5760,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]);
@@ -5804,17 +5784,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__ */ (0, import_jsx_runtime61.jsx)(TooltipContent, { className: "max-w-[400px] p-3 text-xs text-muted-foreground space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("b", { children: stageLabel }) }) }),
                 !isMobile && index < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "hidden sm:flex sm:flex-shrink-0 w-3 h-px bg-gray-300 sm:w-4" })
               ] }, stageKey) }, stageKey);
             })
@@ -5831,12 +5811,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
               }
             )