@algorithm-shift/design-system 1.3.124 → 1.3.125

package/dist/index.d.mts

@@ -174,6 +174,7 @@ interface StagesProps extends ElementProps {
   saving?: boolean;
   canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   primaryColor?: string
+  [key: string]: any;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -365,7 +366,10 @@ declare const ImageControl: ({ className, style, imageUrl, altText, apiUrl, ...p
 
 declare const Shape: ({ children, className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 
-declare const Typography: ({ className, style, tagName, textContent, onClick, }: TypographyProps) => React$1.DetailedReactHTMLElement<{
+type TypographyWrapperProps = TypographyProps & {
+    format?: string;
+};
+declare const Typography: ({ className, style, tagName, textContent, onClick, format, }: TypographyWrapperProps) => React$1.DetailedReactHTMLElement<{
     style: React$1.CSSProperties | undefined;
     className: string;
     onClick: ((e: React$1.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;

package/dist/index.d.ts

@@ -174,6 +174,7 @@ interface StagesProps extends ElementProps {
   saving?: boolean;
   canvasMode?: 'desktop' | 'tablet' | 'mobile' | 'app';
   primaryColor?: string
+  [key: string]: any;
 }
 
 type ButtonProps = ElementProps & React.ComponentProps<"button"> & {
@@ -365,7 +366,10 @@ declare const ImageControl: ({ className, style, imageUrl, altText, apiUrl, ...p
 
 declare const Shape: ({ children, className, style }: ElementProps) => react_jsx_runtime.JSX.Element;
 
-declare const Typography: ({ className, style, tagName, textContent, onClick, }: TypographyProps) => React$1.DetailedReactHTMLElement<{
+type TypographyWrapperProps = TypographyProps & {
+    format?: string;
+};
+declare const Typography: ({ className, style, tagName, textContent, onClick, format, }: TypographyWrapperProps) => React$1.DetailedReactHTMLElement<{
     style: React$1.CSSProperties | undefined;
     className: string;
     onClick: ((e: React$1.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;

package/dist/index.js

@@ -618,14 +618,64 @@ var Shape_default = Shape;
 
 // src/components/Basic/Typography/Typography.tsx
 var import_react7 = __toESM(require("react"));
+
+// src/lib/dayjs-setup.ts
+var import_dayjs = __toESM(require("dayjs"));
+var import_utc = __toESM(require("dayjs/plugin/utc"));
+import_dayjs.default.extend(import_utc.default);
+var dayjs_setup_default = import_dayjs.default;
+
+// 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 import_react7.default.createElement(
     Tag,
     {
@@ -637,7 +687,7 @@ var Typography = ({
       import_react7.default.createElement("span", {
         key: "html",
         className: "pointer-events-none",
-        dangerouslySetInnerHTML: { __html: textContent || "--" }
+        dangerouslySetInnerHTML: { __html: formattedContent || "--" }
       })
     ]
   );
@@ -2328,6 +2378,7 @@ function LazySelectDropdown({
 }) {
   const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
   const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react22.useState)(-1);
   const dropdownRef = (0, import_react22.useRef)(null);
   const observerTarget = (0, import_react22.useRef)(null);
   const {
@@ -2352,11 +2403,19 @@ function LazySelectDropdown({
     enforceStrictQueryParams
   });
   const selectedOption = (0, import_react22.useMemo)(() => lazyOptions.find((opt) => opt.value === value), [lazyOptions, value]);
+  (0, import_react22.useEffect)(() => {
+    if (!isOpen) {
+      setHighlightedIndex(-1);
+    } else if (lazyOptions.length > 0 && highlightedIndex === -1) {
+      setHighlightedIndex(0);
+    }
+  }, [isOpen, lazyOptions.length, highlightedIndex]);
   (0, import_react22.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
         setSearchTerm("");
+        setHighlightedIndex(-1);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
@@ -2376,24 +2435,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("");
   };
@@ -2403,9 +2468,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__ */ (0, import_jsx_runtime36.jsxs)("div", { ref: dropdownRef, className: "relative w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "input",
@@ -2423,6 +2529,7 @@ function LazySelectDropdown({
         value: isOpen ? searchTerm : selectedOption?.label || "",
         onFocus: handleFocus,
         onChange: handleSearchChange,
+        onKeyDown: handleKeyDown,
         readOnly: !isOpen || readOnly,
         disabled,
         autoComplete: "off"
@@ -2460,10 +2567,18 @@ function LazySelectDropdown({
           lazyOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "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}`
@@ -2484,9 +2599,7 @@ function LazySelectDropdown({
           enableAddNewOption && searchTerm && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "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}"`
             }
@@ -3237,7 +3350,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(() => {
@@ -3844,54 +3957,6 @@ var import_react31 = __toESM(require("react"));
 var LucideIcons2 = __toESM(require("lucide-react"));
 var import_lucide_react11 = require("lucide-react");
 var import_image = __toESM(require("next/image"));
-
-// src/lib/dayjs-setup.ts
-var import_dayjs = __toESM(require("dayjs"));
-var import_utc = __toESM(require("dayjs/plugin/utc"));
-import_dayjs.default.extend(import_utc.default);
-var dayjs_setup_default = import_dayjs.default;
-
-// 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
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var getContrastColor = (bg) => {
   let c = bg.trim().toUpperCase();
@@ -4710,7 +4775,7 @@ function DataTable({
         return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           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,
@@ -5785,6 +5850,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);
     }
@@ -5857,51 +5925,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__ */ (0, import_jsx_runtime61.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-                  "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__ */ (0, import_jsx_runtime61.jsx)(import_react34.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Tooltip, { delayDuration: 500, disableHoverableContent: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                    "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
-                  }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipContent, { side: "top", sideOffset: 6, hideArrow: true, 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);
-            })
+                      onClick: () => {
+                        if (isAllStagesCompleted) return;
+                        onStageClick(stage[dataKey]);
+                      },
+                      style: stageStyle,
+                      children: stageLabel
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TooltipContent, { side: "top", sideOffset: 6, hideArrow: true, children: stageLabel }),
+                  !isMobile && index < safeStages.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);
+              });
+            })()
           }
         ),
         isShowBtn && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(