@algorithm-shift/design-system 1.2.961 → 1.2.963

package/dist/index.d.mts

@@ -137,6 +137,8 @@ interface TabsProps extends ElementProps {
   menuNameKey?: string;
   menuUrlKey?: string;
   loading?: boolean;
+  bgActiveColor?: string;
+  textActiveColor?: string;
 }
 
 interface StagesProps extends ElementProps {
@@ -382,7 +384,7 @@ declare const Table: ({ columns, data, rowActions, className, style, pagination,
 
 declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVisiblePages, perPage, }: CustomPaginationProps) => react_jsx_runtime.JSX.Element;
 
-declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading }: TabsProps) => react_jsx_runtime.JSX.Element;
+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 }: StagesProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -137,6 +137,8 @@ interface TabsProps extends ElementProps {
   menuNameKey?: string;
   menuUrlKey?: string;
   loading?: boolean;
+  bgActiveColor?: string;
+  textActiveColor?: string;
 }
 
 interface StagesProps extends ElementProps {
@@ -382,7 +384,7 @@ declare const Table: ({ columns, data, rowActions, className, style, pagination,
 
 declare const CustomPagination: ({ totalPages, currentPage, onPageChange, maxVisiblePages, perPage, }: CustomPaginationProps) => react_jsx_runtime.JSX.Element;
 
-declare const Tabs: ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder, source, parentKey, menuNameKey, menuUrlKey, loading }: TabsProps) => react_jsx_runtime.JSX.Element;
+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 }: StagesProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -29436,7 +29436,7 @@ function DataTable({
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "overflow-hidden rounded-md w-full", children: [
     !loading && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex justify-between p-2 bg-gray-50", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-4 w-full", children: [
-        totalRecords && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "text-sm font-medium", children: [
+        !!totalRecords && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "text-sm font-medium", children: [
           "Total Records : ",
           totalRecords.toLocaleString("en-IN") || 0
         ] }),
@@ -30099,9 +30099,46 @@ function DialogDescription({
   );
 }
 
+// src/components/ui/sonner-toast.tsx
+var import_sonner = require("sonner");
+function showSonnerToast({
+  title,
+  description,
+  variant = "default",
+  duration = 3e3,
+  actionLabel,
+  onAction
+}) {
+  const options = {
+    description,
+    duration,
+    action: actionLabel ? {
+      label: actionLabel,
+      onClick: onAction || (() => {
+      })
+    } : void 0
+  };
+  switch (variant) {
+    case "success":
+      import_sonner.toast.success(title, options);
+      break;
+    case "error":
+      import_sonner.toast.error(title, options);
+      break;
+    case "info":
+      import_sonner.toast.info(title, options);
+      break;
+    case "warning":
+      import_sonner.toast.warning(title, options);
+      break;
+    default:
+      (0, import_sonner.toast)(title, options);
+  }
+}
+
 // src/components/Navigation/Tabs/Tabs.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading }) => {
+var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }) => {
   const [openIndex, setOpenIndex] = (0, import_react31.useState)(null);
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
@@ -30141,11 +30178,28 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     return groupMenus(tabs);
   }, [tabs, source, parentKey, menuNameKey, menuUrlKey]);
   const baseClasses = "text-foreground p-2 text-center rounded-md transition-colors";
-  const activeClasses = "bg-white/10 text-white";
-  const hoverClasses = "hover:bg-white/5";
+  const bgActiveColorFinal = bgActiveColor ? `bg-[${bgActiveColor}]` : "bg-white/10";
+  const textActiveColorFinal = textActiveColor ? `text-[${textActiveColor}]` : "text-white";
+  const activeClasses = `${bgActiveColorFinal} ${textActiveColorFinal}`;
+  const hoverClasses = `${bgActiveColorFinal ? bgActiveColorFinal.replace("bg-", "hover:bg-") : "hover:bg-white/5"} ${textActiveColorFinal ? textActiveColorFinal.replace("text-", "hover:text-") : "hover:text-white"}`;
   const isActive = (path) => {
     if (!path) return false;
-    return pathname === path || path !== "/" && pathname?.startsWith(path);
+    const clean = (p) => {
+      while (p.endsWith("/")) p = p.slice(0, -1);
+      return p;
+    };
+    const current = clean(pathname || "");
+    const target = clean(path);
+    if (!current || !target) return false;
+    if (current === target) return true;
+    if (current.startsWith(target) || target.startsWith(current)) return true;
+    const currentLast = current.split("/").pop();
+    const targetLast = target.split("/").pop();
+    return !!currentLast && !!targetLast && currentLast === targetLast;
+  };
+  const isParentActive = (tab) => {
+    if (!Array.isArray(tab.children)) return false;
+    return tab.children.some((child) => isActive(child.url));
   };
   const router = (0, import_navigation3.useRouter)();
   const [showExitDialog, setShowExitDialog] = (0, import_react31.useState)(false);
@@ -30155,7 +30209,11 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
       if (isBuilder) {
         e.preventDefault();
         setPendingUrl(url);
-        setShowExitDialog(true);
+        showSonnerToast({
+          variant: "success",
+          title: "Navigation Alert",
+          description: `You will be redirected to ${url} in the built application.`
+        });
       }
     },
     [isBuilder]
@@ -30168,7 +30226,13 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   };
   let timeout;
   const renderDesktopTab = (tab, index) => {
-    const finalClasses = [baseClasses, isActive(tab.url) ? activeClasses : hoverClasses, tab.className || ""].join(" ");
+    const active = isActive(tab.url) || isParentActive(tab);
+    const finalClasses = [baseClasses, active ? activeClasses : hoverClasses, tab.className || ""].join(" ");
+    const finalStyle = {
+      ...tab.style,
+      backgroundColor: active && bgActiveColor ? bgActiveColor : void 0,
+      color: active && textActiveColor ? textActiveColor : void 0
+    };
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
       return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         DropdownMenu,
@@ -30187,6 +30251,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 onMouseLeave: () => {
                   timeout = setTimeout(() => setOpenIndex(null), 150);
                 },
+                style: finalStyle,
                 children: [
                   tab.header,
                   /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronDown, { className: "h-4 w-4 opacity-80" })
@@ -30236,12 +30301,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
         href: tab.url,
         target: tab.opens_in_new_tab ? "_blank" : "_self",
         className: finalClasses,
-        style: tab.style,
+        style: finalStyle,
         onClick: (e) => handleBuilderExit(e, tab.url || "#"),
         children: tab.header
       },
       index
-    ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
+    ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: finalClasses, style: finalStyle, role: "button", tabIndex: 0, children: tab.header }, index);
   };
   const renderMobileMenu = () => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [
@@ -30840,43 +30905,6 @@ function EmailComposer({ className, style, to, setTo, showCc, setShowCc, showBcc
   ] }) });
 }
 
-// src/components/ui/sonner-toast.tsx
-var import_sonner = require("sonner");
-function showSonnerToast({
-  title,
-  description,
-  variant = "default",
-  duration = 3e3,
-  actionLabel,
-  onAction
-}) {
-  const options = {
-    description,
-    duration,
-    action: actionLabel ? {
-      label: actionLabel,
-      onClick: onAction || (() => {
-      })
-    } : void 0
-  };
-  switch (variant) {
-    case "success":
-      import_sonner.toast.success(title, options);
-      break;
-    case "error":
-      import_sonner.toast.error(title, options);
-      break;
-    case "info":
-      import_sonner.toast.info(title, options);
-      break;
-    case "warning":
-      import_sonner.toast.warning(title, options);
-      break;
-    default:
-      (0, import_sonner.toast)(title, options);
-  }
-}
-
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner2 = require("sonner");