@algorithm-shift/design-system 1.3.123 → 1.3.125

package/dist/index.mjs

@@ -520,14 +520,64 @@ var Shape_default = Shape;
 
 // src/components/Basic/Typography/Typography.tsx
 import React4 from "react";
+
+// src/lib/dayjs-setup.ts
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+dayjs.extend(utc);
+var dayjs_setup_default = dayjs;
+
+// src/lib/table/valueFormatter.ts
+var valueFormatter = (value, format3, customFormatters = {}) => {
+  if (!format3) return value;
+  if (value == null || value === "" || value === void 0) return "-";
+  if (format3.startsWith("custom:")) {
+    const key = format3.replace("custom:", "");
+    return customFormatters[key] ? customFormatters[key](value) : value;
+  }
+  const [type, arg] = format3.split(":");
+  switch (type) {
+    case "date":
+      return dayjs_setup_default(value).format(arg || "YYYY-MM-DD");
+    case "datetimenumber":
+      return dayjs_setup_default(value).format("YYYY-MM-DD hh:mm");
+    case "datetime":
+      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":
+      return `${dayjs_setup_default().diff(dayjs_setup_default(value), "month")} months`;
+    case "years":
+      return `${dayjs_setup_default().diff(dayjs_setup_default(value), "year")} years`;
+    case "time":
+      return dayjs_setup_default(value).format("HH:mm");
+    case "number":
+      return Number(value).toFixed(parseInt(arg || "2"));
+    case "currency":
+      return new Intl.NumberFormat("en-IN", {
+        style: "currency",
+        currency: arg || "INR"
+      }).format(Number(value));
+    case "uppercase":
+      return String(value).toUpperCase();
+    case "lowercase":
+      return String(value).toLowerCase();
+    default:
+      return value;
+  }
+};
+
+// src/components/Basic/Typography/Typography.tsx
 var Typography = ({
   className,
   style,
   tagName,
   textContent,
-  onClick
+  onClick,
+  format: format3
 }) => {
   const Tag = tagName || "h1";
+  const formattedContent = format3 != null && format3 !== "" ? valueFormatter(textContent, format3) : textContent;
   return React4.createElement(
     Tag,
     {
@@ -539,7 +589,7 @@ var Typography = ({
       React4.createElement("span", {
         key: "html",
         className: "pointer-events-none",
-        dangerouslySetInnerHTML: { __html: textContent || "--" }
+        dangerouslySetInnerHTML: { __html: formattedContent || "--" }
       })
     ]
   );
@@ -2230,6 +2280,7 @@ function LazySelectDropdown({
 }) {
   const [isOpen, setIsOpen] = useState8(false);
   const [searchTerm, setSearchTerm] = useState8("");
+  const [highlightedIndex, setHighlightedIndex] = useState8(-1);
   const dropdownRef = useRef5(null);
   const observerTarget = useRef5(null);
   const {
@@ -2254,11 +2305,19 @@ function LazySelectDropdown({
     enforceStrictQueryParams
   });
   const selectedOption = useMemo4(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
+  useEffect15(() => {
+    if (!isOpen) {
+      setHighlightedIndex(-1);
+    } else if (lazyOptions.length > 0 && highlightedIndex === -1) {
+      setHighlightedIndex(0);
+    }
+  }, [isOpen, lazyOptions.length, highlightedIndex]);
   useEffect15(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
         setSearchTerm("");
+        setHighlightedIndex(-1);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
@@ -2278,24 +2337,30 @@ function LazySelectDropdown({
   const handleSearchChange = (e) => {
     const term = e.target.value;
     setSearchTerm(term);
+    setHighlightedIndex(-1);
     search(term);
   };
   const handleSelect = (optValue) => {
     onChange?.(optValue, id || "");
     setIsOpen(false);
     setSearchTerm("");
+    setHighlightedIndex(-1);
     reset();
   };
   const handleFocus = () => {
-    if (!disabled) setIsOpen(true);
-    if (lazyOptions.length === 0)
-      loadPage(1, "");
+    if (!disabled) {
+      setIsOpen(true);
+      if (lazyOptions.length === 0) {
+        loadPage(1, "");
+      }
+    }
   };
   const handleRemoveSelection = (e) => {
     e.preventDefault();
     e.stopPropagation();
     onChange?.("", id || "");
     setSearchTerm("");
+    setHighlightedIndex(-1);
     reset();
     search("");
   };
@@ -2305,9 +2370,50 @@ function LazySelectDropdown({
       onChange?.(option.value, id || "");
       setIsOpen(false);
       setSearchTerm("");
+      setHighlightedIndex(-1);
       reset();
     }
   };
+  const handleKeyDown = (e) => {
+    if (disabled || readOnly) return;
+    if (!isOpen) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        setIsOpen(true);
+        if (lazyOptions.length > 0) {
+          setHighlightedIndex(0);
+        }
+        return;
+      }
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setHighlightedIndex(
+          (prev) => prev < lazyOptions.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex(
+          (prev) => prev > 0 ? prev - 1 : lazyOptions.length - 1
+        );
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (highlightedIndex >= 0 && highlightedIndex < lazyOptions.length) {
+          handleSelect(lazyOptions[highlightedIndex].value);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        setSearchTerm("");
+        setHighlightedIndex(-1);
+        reset();
+        break;
+    }
+  };
   return /* @__PURE__ */ jsxs19("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ jsx36(
       "input",
@@ -2325,6 +2431,7 @@ function LazySelectDropdown({
         value: isOpen ? searchTerm : selectedOption?.label || "",
         onFocus: handleFocus,
         onChange: handleSearchChange,
+        onKeyDown: handleKeyDown,
         readOnly: !isOpen || readOnly,
         disabled,
         autoComplete: "off"
@@ -2362,10 +2469,18 @@ function LazySelectDropdown({
           lazyOptions.map((option, index) => /* @__PURE__ */ jsx36(
             "div",
             {
-              onClick: () => {
-                handleSelect(option.value);
+              tabIndex: 0,
+              className: cn(
+                "px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm focus:outline-none",
+                option.value === value ? "bg-blue-100" : "",
+                index === highlightedIndex ? "bg-blue-200" : ""
+              ),
+              onClick: () => handleSelect(option.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  handleSelect(option.value);
+                }
               },
-              className: `px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm ${option.value === value ? "bg-blue-100" : ""}`,
               children: option.label
             },
             `${option.value}-${index}`
@@ -2386,9 +2501,7 @@ function LazySelectDropdown({
           enableAddNewOption && searchTerm && /* @__PURE__ */ jsx36(
             "div",
             {
-              onClick: () => {
-                handleAddNewOption(searchTerm);
-              },
+              onClick: () => handleAddNewOption(searchTerm),
               className: "mt-2 px-3 py-2 bg-green-50 hover:bg-green-100 cursor-pointer text-green-700 rounded text-sm",
               children: `Add "${searchTerm}"`
             }
@@ -3143,7 +3256,7 @@ function DateTimePicker({
   };
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const yearOptions = [];
-  for (let y = currentYear - 50; y <= currentYear + 10; y++) {
+  for (let y = currentYear - 90; y <= currentYear; y++) {
     yearOptions.push(y);
   }
   const displayValue = React8.useMemo(() => {
@@ -3756,54 +3869,6 @@ import React10 from "react";
 import * as LucideIcons2 from "lucide-react";
 import { Star as Star2 } from "lucide-react";
 import Image from "next/image";
-
-// src/lib/dayjs-setup.ts
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-dayjs.extend(utc);
-var dayjs_setup_default = dayjs;
-
-// src/lib/table/valueFormatter.ts
-var valueFormatter = (value, format3, customFormatters = {}) => {
-  if (!format3) return value;
-  if (value == null || value === "" || value === void 0) return "-";
-  if (format3.startsWith("custom:")) {
-    const key = format3.replace("custom:", "");
-    return customFormatters[key] ? customFormatters[key](value) : value;
-  }
-  const [type, arg] = format3.split(":");
-  switch (type) {
-    case "date":
-      return dayjs_setup_default(value).format(arg || "YYYY-MM-DD");
-    case "datetimenumber":
-      return dayjs_setup_default(value).format("YYYY-MM-DD hh:mm");
-    case "datetime":
-      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":
-      return `${dayjs_setup_default().diff(dayjs_setup_default(value), "month")} months`;
-    case "years":
-      return `${dayjs_setup_default().diff(dayjs_setup_default(value), "year")} years`;
-    case "time":
-      return dayjs_setup_default(value).format("HH:mm");
-    case "number":
-      return Number(value).toFixed(parseInt(arg || "2"));
-    case "currency":
-      return new Intl.NumberFormat("en-IN", {
-        style: "currency",
-        currency: arg || "INR"
-      }).format(Number(value));
-    case "uppercase":
-      return String(value).toUpperCase();
-    case "lowercase":
-      return String(value).toLowerCase();
-    default:
-      return value;
-  }
-};
-
-// src/lib/table/cellRendererFactory.tsx
 import { Fragment as Fragment20, jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 var getContrastColor = (bg) => {
   let c = bg.trim().toUpperCase();
@@ -4622,7 +4687,7 @@ function DataTable({
         return /* @__PURE__ */ jsxs30(
           TableCell,
           {
-            className: `break-words whitespace-normal align-top ${meta2?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2 `,
+            className: `break-words whitespace-normal align-top ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2 ${meta2?.cellClass ?? ""}`,
             style: {
               width: cell.column.getSize(),
               minWidth: cell.column.columnDef.minSize,
@@ -5620,6 +5685,30 @@ function TooltipTrigger({
 }) {
   return /* @__PURE__ */ jsx60(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  hideArrow,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx60(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs37(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground 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,
+        !hideArrow && /* @__PURE__ */ jsx60(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
 
 // src/components/Navigation/Stages/Stages.tsx
 import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -5677,6 +5766,9 @@ var StagesComponent = ({
   const onStageClick = (stageKey) => {
     if (!stageKey || stageKey === activeStage) return;
     setActiveStage(stageKey);
+    const { activeRoot, activeChild } = findStageContext(stages, stageKey);
+    setActiveRootStage(activeRoot);
+    setActiveChildStage(activeChild);
     if (triggerOnClick) {
       onStageChange?.(stageKey);
     }
@@ -5749,50 +5841,71 @@ var StagesComponent = ({
                 disabled: true
               },
               index
-            )) : (stages || [])?.length > 0 && stages?.map((stage, index) => {
-              const currentIndex = stages.findIndex((s) => s[dataKey] === activeStage);
-              const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
-              const isActive = !isAllStagesCompleted && index === currentIndex;
-              const isLastStageWhenCompleted = isAllStagesCompleted && index === stages.length - 1;
-              const showAsActive = isActive || isLastStageWhenCompleted;
-              let stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
-              let stageStyle = { borderColor: primaryColor, color: showAsActive ? "white" : primaryColor, backgroundColor: showAsActive ? primaryColor : "transparent" };
-              if (stage.hasOwnProperty("isSuccess") && stage.isSuccess === false) {
-                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 = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
-                if (activeChildStage.hasOwnProperty("isSuccess") && activeChildStage.isSuccess === false) {
+            )) : (stages || [])?.length > 0 && (() => {
+              const safeStages = stages ?? [];
+              const activeRootKey = activeRootStage?.[dataKey];
+              const isActiveStageTopLevel = safeStages.some((s) => s?.[dataKey] === activeStage);
+              const activeIndexKey = isActiveStageTopLevel ? activeStage : activeRootKey ?? activeStage;
+              const currentIndex = safeStages.findIndex((s) => s?.[dataKey] === activeIndexKey);
+              const isOutcomeWon = activeChildStage?.is_won === true;
+              const isOutcomeLost = activeChildStage?.is_won === false;
+              const hasOutcome = isOutcomeWon || isOutcomeLost;
+              const activeOutcomeClass = isOutcomeWon ? "bg-green-600 text-white shadow-md" : isOutcomeLost ? "bg-red-600 text-white shadow-md" : "";
+              return safeStages.map((stage, index) => {
+                const isCompletedStage = isAllStagesCompleted || index <= currentIndex;
+                const showAsActive = isAllStagesCompleted ? index === safeStages.length - 1 : index === currentIndex;
+                const isCurrentRootStage = activeRootStage?.[dataKey] === stage[dataKey];
+                const stageHasChildren = Array.isArray(stage?.children) && stage.children.length > 0;
+                const isCurrentChildStage = activeChildStage?.[dataKey] === activeStage;
+                const showOutcomeForCurrentStage = showAsActive && hasOutcome && stageHasChildren && isCurrentRootStage && isCurrentChildStage;
+                let stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
+                let stageStyle = {
+                  borderColor: primaryColor,
+                  color: showAsActive ? "white" : primaryColor,
+                  backgroundColor: showAsActive ? primaryColor : "transparent"
+                };
+                if (stage.hasOwnProperty("isSuccess") && stage.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]);
-              return /* @__PURE__ */ jsx61(React12.Fragment, { children: /* @__PURE__ */ jsxs38(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
-                /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
-                  "button",
-                  {
-                    className: `
+                if (showOutcomeForCurrentStage) {
+                  stageColor = isOutcomeWon ? "bg-green-600 text-white border-2 border-green-600" : "bg-red-600 text-white border-2 border-red-600";
+                  stageStyle = isOutcomeWon ? { borderColor: "#16a34a", color: "white", backgroundColor: "#16a34a" } : { borderColor: "#dc2626", color: "white", backgroundColor: "#dc2626" };
+                }
+                let stageLabel = stage[dataLabel];
+                if (stage[dataKey] !== activeChildStage?.[dataKey] && activeRootStage?.[dataKey] === stage[dataKey]) {
+                  stageLabel = activeChildStage?.[dataLabel] || stageLabel;
+                  stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
+                  if (showOutcomeForCurrentStage) {
+                    stageColor = isOutcomeWon ? "bg-green-600 text-white border-2 border-green-600" : "bg-red-600 text-white border-2 border-red-600";
+                    stageStyle = isOutcomeWon ? { borderColor: "#16a34a", color: "white", backgroundColor: "#16a34a" } : { borderColor: "#dc2626", color: "white", backgroundColor: "#dc2626" };
+                  }
+                }
+                const stageKey = typeof stage[dataKey] === "string" ? stage[dataKey] : JSON.stringify(stage[dataKey]);
+                return /* @__PURE__ */ jsx61(React12.Fragment, { children: /* @__PURE__ */ jsxs38(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
+                  /* @__PURE__ */ jsx61(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx61(
+                    "button",
+                    {
+                      className: `
                     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
-                    ${showAsActive ? `bg-[${primaryColor}] text-white shadow-md` : isCompletedStage ? stageColor : "bg-white border border-gray-200"}
+                    ${showAsActive ? showOutcomeForCurrentStage ? activeOutcomeClass : `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
-                  }
-                ) }),
-                !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);
-            })
+                      onClick: () => {
+                        if (isAllStagesCompleted) return;
+                        onStageClick(stage[dataKey]);
+                      },
+                      style: stageStyle,
+                      children: stageLabel
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx61(TooltipContent, { side: "top", sideOffset: 6, hideArrow: true, children: stageLabel }),
+                  !isMobile && index < safeStages.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);
+              });
+            })()
           }
         ),
         isShowBtn && /* @__PURE__ */ jsx61(