@algorithm-shift/design-system 1.2.962 → 1.2.964

package/dist/index.mjs

@@ -29894,7 +29894,7 @@ var Pagination_default = CustomPagination;
 // src/components/Navigation/Tabs/Tabs.tsx
 import { useCallback as useCallback3, useMemo as useMemo6, useState as useState8 } from "react";
 import Link5 from "next/link";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -30051,6 +30051,7 @@ function showSonnerToast({
 import { Fragment as Fragment22, jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuilder = false, source, parentKey, menuNameKey, menuUrlKey, loading, bgActiveColor, textActiveColor }) => {
   const [openIndex, setOpenIndex] = useState8(null);
+  const currentPathname = usePathname();
   function groupMenus(menus = []) {
     const menuMap = /* @__PURE__ */ new Map();
     menus.forEach((menu) => {
@@ -30089,12 +30090,17 @@ 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 = `${bgActiveColor ?? "bg-white/10"} ${textActiveColor ?? "text-white"}`;
-  const hoverClasses = `${bgActiveColor ? bgActiveColor.replace("bg-", "hover:bg-") : "hover:bg-white/5"} ${textActiveColor ? textActiveColor.replace("text-", "hover:text-") : "hover:text-white"}`;
+  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;
-    const clean = (p) => p.replace(/\/+$/, "");
-    const current = clean(pathname || "");
+    const clean = (p) => {
+      while (p.endsWith("/")) p = p.slice(0, -1);
+      return p;
+    };
+    const current = clean(pathname ?? currentPathname ?? "");
     const target = clean(path);
     if (!current || !target) return false;
     if (current === target) return true;
@@ -30134,6 +30140,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
   const renderDesktopTab = (tab, index) => {
     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,
+      border: active && textActiveColor ? `1px solid ${textActiveColor}` : void 0
+    };
     if (Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown) {
       return /* @__PURE__ */ jsxs33(
         DropdownMenu,
@@ -30152,6 +30164,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
                 onMouseLeave: () => {
                   timeout = setTimeout(() => setOpenIndex(null), 150);
                 },
+                style: finalStyle,
                 children: [
                   tab.header,
                   /* @__PURE__ */ jsx56(ChevronDown, { className: "h-4 w-4 opacity-80" })
@@ -30201,12 +30214,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__ */ jsx56("div", { className: finalClasses, style: tab.style, role: "button", tabIndex: 0, children: tab.header }, index);
+    ) : /* @__PURE__ */ jsx56("div", { className: finalClasses, style: finalStyle, role: "button", tabIndex: 0, children: tab.header }, index);
   };
   const renderMobileMenu = () => /* @__PURE__ */ jsxs33(DropdownMenu, { children: [
     /* @__PURE__ */ jsxs33(DropdownMenuTrigger, { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-white/10 text-white text-sm", children: [