@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10-alpha.0

package/dist/components/TabNavigation/TabNavigation.js

@@ -1,51 +1,51 @@
-import { jsxs as B, jsx as n } from "react/jsx-runtime";
-import { useState as N, useEffect as T } from "react";
-import { GradientButton as y } from "../GradientButton/GradientButton.js";
-import { Button as k } from "../Button/Button.js";
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useState as B, useEffect as N } from "react";
+import { GradientButton as T } from "../GradientButton/GradientButton.js";
+import { Button as y } from "../Button/Button.js";
 import '../../assets/TabNavigation.css';const r = {
   "tab-navigation__list": "_tab-navigation__list_146qs_6",
   "tab-navigation__right-side": "_tab-navigation__right-side_146qs_16"
 };
-function w({
+function $({
   tabs: i = [],
   onTabChanged: l = () => !0,
   rightSideContent: a
 }) {
-  const [e, j] = N(i[0]), u = (t) => {
+  const [e, j] = B(i[0]), u = (t) => {
     const o = document.querySelector("basic-grid-module");
     o == null || o.setAttribute("first-entry", "true"), o == null || o.setAttribute("data-state", "entering"), !(!t.button || !e.button) && t.button.label !== e.button.label && j(t);
   };
-  return T(() => {
+  return N(() => {
     l(e);
-  }, [e, l]), /* @__PURE__ */ B("tab-navigation", { children: [
-    /* @__PURE__ */ n("ul", { className: [r["tab-navigation__list"], "tab-navigation__list"].join(" "), children: i.length > 0 && i.map((t) => {
-      var o, b, s, _, g, c, d, m, v, C, f, h, p, x, H;
-      return ((o = e.button) == null ? void 0 : o.label) === ((b = t.button) == null ? void 0 : b.label) ? /* @__PURE__ */ n(
+  }, [e, l]), /* @__PURE__ */ x("tab-navigation", { children: [
+    /* @__PURE__ */ n("ul", { className: [r["tab-navigation__list"], "tab-navigation__list"].join(" "), children: i.length > 0 && i.map((t, o) => {
+      var b, s, _, g, c, d, m, v, C, f, h, p, H;
+      return ((b = e.button) == null ? void 0 : b.label) === ((s = t.button) == null ? void 0 : s.label) ? /* @__PURE__ */ n(
         "li",
         {
           className: [r["tab-navigation__item"], "tab-navigation__item"].join(" "),
           style: {
-            "--gradient-start-color": (s = t.button) == null ? void 0 : s.gradientStartColor,
-            "--gradient-end-color": (_ = t.button) == null ? void 0 : _.gradientEndColor
+            "--gradient-start-color": (_ = t.button) == null ? void 0 : _.gradientStartColor,
+            "--gradient-end-color": (g = t.button) == null ? void 0 : g.gradientEndColor
           },
           children: /* @__PURE__ */ n(
-            y,
+            T,
             {
               disabled: !0,
-              label: (g = t.button) == null ? void 0 : g.label,
+              label: (c = t.button) == null ? void 0 : c.label,
               onClick: () => {
                 u(t);
               }
             }
           )
         },
-        `tab-item-${(c = t.button) == null ? void 0 : c.label}`
+        `tab-item-${o}`
       ) : /* @__PURE__ */ n(
         "li",
         {
           className: [r["tab-navigation__item"], "tab-navigation__item"].join(" "),
           children: /* @__PURE__ */ n(
-            k,
+            y,
             {
               customColors: {
                 bgColor: (d = t.button) == null ? void 0 : d.buttonBgColor,
@@ -55,20 +55,20 @@ function w({
                 borderColor: (f = t.button) == null ? void 0 : f.buttonTextColor,
                 borderHoverColor: ((h = t.button) == null ? void 0 : h.borderHoverColor) ?? ((p = t.button) == null ? void 0 : p.buttonHoverBgColor)
               },
-              label: (x = t.button) == null ? void 0 : x.label,
+              label: (H = t.button) == null ? void 0 : H.label,
               onClick: () => {
                 u(t);
               }
             }
           )
         },
-        `tab-item-${(H = t.button) == null ? void 0 : H.label}`
+        `tab-item-${o}`
       );
     }) }),
     /* @__PURE__ */ n("div", { className: r["tab-navigation__right-side"], children: a !== void 0 && a })
   ] });
 }
 export {
-  w as TabNavigation,
-  w as default
+  $ as TabNavigation,
+  $ as default
 };

package/dist/components/TabNavigation/TabNavigation.test.js

@@ -0,0 +1,535 @@
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { v as C, d as h, b as y, i as l, r, g as o, s as i, f as u } from "../../react.esm-DLSrfVwM.mjs";
+import { TabNavigation as b } from "./TabNavigation.js";
+C.mock("../GradientButton", () => ({
+  default: ({ label: t, onClick: s, disabled: c }) => /* @__PURE__ */ f(
+    "button",
+    {
+      "data-disabled": c,
+      "data-label": t,
+      "data-testid": "gradient-button",
+      onClick: s,
+      children: [
+        "GradientButton: ",
+        t
+      ]
+    }
+  )
+}));
+C.mock("../Button", () => ({
+  default: ({ label: t, onClick: s, customColors: c }) => /* @__PURE__ */ f(
+    "button",
+    {
+      "data-bg-color": c == null ? void 0 : c.bgColor,
+      "data-bg-hover-color": c == null ? void 0 : c.bgHoverColor,
+      "data-border-color": c == null ? void 0 : c.borderColor,
+      "data-border-hover-color": c == null ? void 0 : c.borderHoverColor,
+      "data-color": c == null ? void 0 : c.color,
+      "data-hover-color": c == null ? void 0 : c.hoverColor,
+      "data-label": t,
+      "data-testid": "button",
+      onClick: s,
+      children: [
+        "Button: ",
+        t
+      ]
+    }
+  )
+}));
+C.mock("./TabNavigation.module.scss", () => ({
+  default: {
+    "tab-navigation__list": "tab-navigation__list",
+    "tab-navigation__item": "tab-navigation__item",
+    "tab-navigation__right-side": "tab-navigation__right-side"
+  }
+}));
+h("TabNavigation Component", () => {
+  const t = (e) => ({
+    title: "Test Tab",
+    content: /* @__PURE__ */ a("div", { children: "Test Content" }),
+    button: {
+      label: "Test Button",
+      gradientStartColor: "#ff0000",
+      gradientEndColor: "#00ff00",
+      buttonBgColor: "#ffffff",
+      buttonHoverBgColor: "#eeeeee",
+      buttonTextColor: "#000000",
+      buttonHoverTextColor: "#333333"
+    },
+    ...e
+  });
+  let s, c, T;
+  y(() => {
+    s = C.fn(), T = C.fn(), c = C.fn(), global.document.querySelector = c, c.mockReturnValue({
+      setAttribute: T
+    });
+  }), h("Basic Rendering", () => {
+    l("renders tab-navigation custom element", () => {
+      const e = [t()], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e }));
+      o(n.querySelector("tab-navigation")).toBeInTheDocument();
+    }), l("renders ul with correct classes", () => {
+      const e = [t()], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelector("ul");
+      o(d).toHaveClass("tab-navigation__list");
+    }), l("renders li items for each tab", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Tab 1" } }),
+        t({ button: { ...t().button, label: "Tab 2" } }),
+        t({ button: { ...t().button, label: "Tab 3" } })
+      ], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelectorAll(".tab-navigation__item");
+      o(d.length).toBe(3);
+    }), l("renders right-side content div", () => {
+      const e = [t()], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelector(".tab-navigation__right-side");
+      o(d).toBeInTheDocument();
+    }), l("renders nothing when tabs array is empty", () => {
+      const { container: e } = r(/* @__PURE__ */ a(b, { tabs: [] })), n = e.querySelectorAll(".tab-navigation__item");
+      o(n.length).toBe(0);
+    });
+  }), h("Initial State", () => {
+    l("sets first tab as current tab initially", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("gradient-button");
+      o(n).toHaveAttribute("data-label", "First");
+    }), l("renders first tab as disabled GradientButton", () => {
+      const e = [t({ button: { ...t().button, label: "Tab 1" } })];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("gradient-button");
+      o(n).toHaveAttribute("data-disabled", "true");
+    }), l("renders non-current tabs as regular Button", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getAllByTestId("button");
+      o(n.length).toBe(1), o(n[0]).toHaveAttribute("data-label", "Second");
+    }), l("calls onTabChanged with first tab on mount", () => {
+      const e = [t({ button: { ...t().button, label: "First" } })];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), o(s).toHaveBeenCalledWith(e[0]);
+    });
+  }), h("Tab Switching", () => {
+    l("switches to new tab when different tab button clicked", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ], { rerender: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = i.getByTestId("button");
+      u.click(d), n(/* @__PURE__ */ a(b, { tabs: e }));
+      const g = i.getByTestId("gradient-button");
+      o(g).toHaveAttribute("data-label", "Second");
+    }), l("does not switch when clicking current tab", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), s.mockClear();
+      const n = i.getByTestId("gradient-button");
+      u.click(n), o(s).not.toHaveBeenCalled();
+    }), l("calls onTabChanged when tab switches", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), s.mockClear();
+      const n = i.getByTestId("button");
+      u.click(n), o(s).toHaveBeenCalledWith(e[1]);
+    }), l("switches between multiple tabs correctly", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Tab 1" } }),
+        t({ button: { ...t().button, label: "Tab 2" } }),
+        t({ button: { ...t().button, label: "Tab 3" } })
+      ], { rerender: n } = r(/* @__PURE__ */ a(b, { tabs: e }));
+      let d = i.getAllByTestId("button");
+      u.click(d[0]), n(/* @__PURE__ */ a(b, { tabs: e }));
+      let g = i.getByTestId("gradient-button");
+      o(g).toHaveAttribute("data-label", "Tab 2"), d = i.getAllByTestId("button");
+      const B = d.find((v) => v.getAttribute("data-label") === "Tab 3");
+      u.click(B), n(/* @__PURE__ */ a(b, { tabs: e })), g = i.getByTestId("gradient-button"), o(g).toHaveAttribute("data-label", "Tab 3");
+    });
+  }), h("DOM Manipulation - basic-grid-module", () => {
+    l("queries for basic-grid-module element on tab click", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e })), c.mockClear();
+      const n = i.getByTestId("button");
+      u.click(n), o(c).toHaveBeenCalledWith("basic-grid-module");
+    }), l("sets first-entry attribute to true on tab switch", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e })), T.mockClear();
+      const n = i.getByTestId("button");
+      u.click(n), o(T).toHaveBeenCalledWith("first-entry", "true");
+    }), l("sets data-state attribute to entering on tab switch", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e })), T.mockClear();
+      const n = i.getByTestId("button");
+      u.click(n), o(T).toHaveBeenCalledWith("data-state", "entering");
+    }), l("handles missing basic-grid-module element gracefully", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      c.mockReturnValue(null), r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("button");
+      o(() => u.click(n)).not.toThrow();
+    }), l("sets both attributes in correct order", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e })), T.mockClear();
+      const n = i.getByTestId("button");
+      u.click(n), o(T).toHaveBeenNthCalledWith(1, "first-entry", "true"), o(T).toHaveBeenNthCalledWith(2, "data-state", "entering");
+    });
+  }), h("Current Tab Rendering", () => {
+    l("renders current tab with GradientButton component", () => {
+      const e = [t({ button: { ...t().button, label: "Current" } })];
+      r(/* @__PURE__ */ a(b, { tabs: e })), o(i.getByTestId("gradient-button")).toBeInTheDocument(), o(i.queryByTestId("button")).not.toBeInTheDocument();
+    }), l("passes label to GradientButton", () => {
+      const e = [t({ button: { ...t().button, label: "My Tab" } })];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("gradient-button");
+      o(n).toHaveAttribute("data-label", "My Tab");
+    }), l("sets GradientButton as disabled", () => {
+      const e = [t({ button: { ...t().button, label: "Tab" } })];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("gradient-button");
+      o(n).toHaveAttribute("data-disabled", "true");
+    }), l("applies CSS custom properties for gradient colors", () => {
+      const e = [t({
+        button: {
+          label: "Tab",
+          gradientStartColor: "#ff0000",
+          gradientEndColor: "#00ff00",
+          buttonBgColor: "#ffffff",
+          buttonHoverBgColor: "#eeeeee",
+          buttonTextColor: "#000000",
+          buttonHoverTextColor: "#333333"
+        }
+      })], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelector(".tab-navigation__item");
+      o(d).toHaveStyle({
+        "--gradient-start-color": "#ff0000",
+        "--gradient-end-color": "#00ff00"
+      });
+    }), l("generates correct key for current tab list item", () => {
+      const e = [t({ button: { ...t().button, label: "My Tab" } })], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelector('li[class*="tab-navigation__item"]');
+      o(d).toBeInTheDocument();
+    });
+  }), h("Non-Current Tab Rendering", () => {
+    l("renders non-current tabs with Button component", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e })), o(i.getByTestId("button")).toBeInTheDocument();
+    }), l("passes label to Button", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("button");
+      o(n).toHaveAttribute("data-label", "Second");
+    }), l("passes customColors to Button", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({
+          button: {
+            label: "Second",
+            gradientStartColor: "#aaaaaa",
+            gradientEndColor: "#bbbbbb",
+            buttonBgColor: "#cccccc",
+            buttonHoverBgColor: "#dddddd",
+            buttonTextColor: "#eeeeee",
+            buttonHoverTextColor: "#ffffff"
+          }
+        })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("button");
+      o(n).toHaveAttribute("data-bg-color", "#cccccc"), o(n).toHaveAttribute("data-bg-hover-color", "#dddddd"), o(n).toHaveAttribute("data-color", "#eeeeee"), o(n).toHaveAttribute("data-hover-color", "#ffffff"), o(n).toHaveAttribute("data-border-color", "#eeeeee");
+    }), l("uses borderHoverColor when provided", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({
+          button: {
+            label: "Second",
+            gradientStartColor: "#aaaaaa",
+            gradientEndColor: "#bbbbbb",
+            buttonBgColor: "#cccccc",
+            buttonHoverBgColor: "#dddddd",
+            buttonTextColor: "#eeeeee",
+            buttonHoverTextColor: "#ffffff",
+            borderHoverColor: "#123456"
+          }
+        })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("button");
+      o(n).toHaveAttribute("data-border-hover-color", "#123456");
+    }), l("falls back to buttonHoverBgColor for borderHoverColor when not provided", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({
+          button: {
+            label: "Second",
+            gradientStartColor: "#aaaaaa",
+            gradientEndColor: "#bbbbbb",
+            buttonBgColor: "#cccccc",
+            buttonHoverBgColor: "#dddddd",
+            buttonTextColor: "#eeeeee",
+            buttonHoverTextColor: "#ffffff"
+          }
+        })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("button");
+      o(n).toHaveAttribute("data-border-hover-color", "#dddddd");
+    }), l("does not apply CSS custom properties to non-current tabs", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), g = n.querySelectorAll(".tab-navigation__item")[1];
+      o(g).not.toHaveStyle({
+        "--gradient-start-color": o.anything()
+      });
+    }), l("generates correct key for non-current tab list items", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelectorAll('li[class*="tab-navigation__item"]');
+      o(d.length).toBe(2);
+    });
+  }), h("Right Side Content", () => {
+    l("renders rightSideContent when provided", () => {
+      const e = [t()];
+      r(/* @__PURE__ */ a(b, { rightSideContent: /* @__PURE__ */ a("div", { "data-testid": "right-content", children: "Right Side" }), tabs: e })), o(i.getByTestId("right-content")).toBeInTheDocument();
+    }), l("does not render content when rightSideContent is undefined", () => {
+      const e = [t()], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelector(".tab-navigation__right-side");
+      o(d == null ? void 0 : d.textContent).toBe("");
+    }), l("renders complex JSX as rightSideContent", () => {
+      const e = [t()];
+      r(/* @__PURE__ */ a(b, { rightSideContent: /* @__PURE__ */ f("div", { "data-testid": "complex-content", children: [
+        /* @__PURE__ */ a("span", { children: "Nested" }),
+        /* @__PURE__ */ a("button", { children: "Click" })
+      ] }), tabs: e })), o(i.getByTestId("complex-content")).toBeInTheDocument(), o(i.getByText("Nested")).toBeInTheDocument(), o(i.getByText("Click")).toBeInTheDocument();
+    }), l("renders string as rightSideContent", () => {
+      const e = [t()], { container: n } = r(/* @__PURE__ */ a(b, { rightSideContent: "Text Content", tabs: e })), d = n.querySelector(".tab-navigation__right-side");
+      o(d == null ? void 0 : d.textContent).toBe("Text Content");
+    }), l("renders number as rightSideContent", () => {
+      const e = [t()], { container: n } = r(/* @__PURE__ */ a(b, { rightSideContent: 42, tabs: e })), d = n.querySelector(".tab-navigation__right-side");
+      o(d == null ? void 0 : d.textContent).toBe("42");
+    });
+  }), h("HandleClick Edge Cases", () => {
+    l("does not change tab when button is undefined", () => {
+      const e = [
+        t({ button: void 0 }),
+        t({ button: void 0 })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), s.mockClear(), o(s).not.toHaveBeenCalled();
+    }), l("compares button labels correctly", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Tab A" } }),
+        t({ button: { ...t().button, label: "Tab B" } })
+      ], { rerender: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = i.getByTestId("button");
+      u.click(d), n(/* @__PURE__ */ a(b, { tabs: e }));
+      const g = i.getByTestId("gradient-button");
+      o(g).toHaveAttribute("data-label", "Tab B");
+    }), l("does not change when labels are identical", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Same" } }),
+        t({ button: { ...t().button, label: "Same" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), s.mockClear();
+      const n = i.getAllByTestId("gradient-button");
+      o(n.length).toBe(2), u.click(n[0]), o(s).not.toHaveBeenCalled();
+    });
+  }), h("onTabChanged Callback", () => {
+    l("uses default no-op function when onTabChanged not provided", () => {
+      const e = [t()];
+      o(() => r(/* @__PURE__ */ a(b, { tabs: e }))).not.toThrow();
+    }), l("calls onTabChanged on initial render", () => {
+      const e = [t()];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), o(s).toHaveBeenCalledTimes(1), o(s).toHaveBeenCalledWith(e[0]);
+    }), l("calls onTabChanged when currentTab changes", () => {
+      const e = [
+        t({ button: { ...t().button, label: "First" } }),
+        t({ button: { ...t().button, label: "Second" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), s.mockClear();
+      const n = i.getByTestId("button");
+      u.click(n), o(s).toHaveBeenCalledWith(e[1]);
+    }), l("does not call onTabChanged when clicking current tab", () => {
+      const e = [t({ button: { ...t().button, label: "Tab" } })];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), s.mockClear();
+      const n = i.getByTestId("gradient-button");
+      u.click(n), o(s).not.toHaveBeenCalled();
+    }), l("calls onTabChanged multiple times during tab navigation", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Tab 1" } }),
+        t({ button: { ...t().button, label: "Tab 2" } }),
+        t({ button: { ...t().button, label: "Tab 3" } })
+      ], { rerender: n } = r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s }));
+      o(s).toHaveBeenCalledWith(e[0]), s.mockClear();
+      let d = i.getAllByTestId("button");
+      u.click(d[0]), n(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), o(s).toHaveBeenCalledWith(e[1]), s.mockClear(), d = i.getAllByTestId("button");
+      const g = d.find((B) => B.getAttribute("data-label") === "Tab 3");
+      u.click(g), n(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), o(s).toHaveBeenCalledWith(e[2]);
+    });
+  }), h("Edge Cases", () => {
+    l("handles empty tabs array", () => {
+      const { container: e } = r(/* @__PURE__ */ a(b, { tabs: [] })), n = e.querySelectorAll(".tab-navigation__item");
+      o(n.length).toBe(0);
+    }), l("handles single tab", () => {
+      const e = [t({ button: { ...t().button, label: "Only" } })];
+      r(/* @__PURE__ */ a(b, { tabs: e })), o(i.getByTestId("gradient-button")).toBeInTheDocument(), o(i.queryByTestId("button")).not.toBeInTheDocument();
+    }), l("handles many tabs", () => {
+      const e = Array.from(
+        { length: 10 },
+        (g, B) => t({ button: { ...t().button, label: `Tab ${B + 1}` } })
+      ), { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelectorAll(".tab-navigation__item");
+      o(d.length).toBe(10);
+    }), l("handles tabs with special characters in labels", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Tab & More" } }),
+        t({ button: { ...t().button, label: "Tab <1>" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e }));
+      const n = i.getByTestId("gradient-button");
+      o(n).toHaveAttribute("data-label", "Tab & More");
+    }), l("handles tabs with very long labels", () => {
+      const e = "A".repeat(100), n = [t({ button: { ...t().button, label: e } })];
+      r(/* @__PURE__ */ a(b, { tabs: n }));
+      const d = i.getByTestId("gradient-button");
+      o(d).toHaveAttribute("data-label", e);
+    }), l("handles tabs without button property gracefully", () => {
+      const e = [
+        t({ button: void 0 }),
+        t({ button: { ...t().button, label: "Valid" } })
+      ];
+      o(() => r(/* @__PURE__ */ a(b, { tabs: e }))).not.toThrow();
+    });
+  }), h("Type Safety", () => {
+    l("accepts valid Tab array", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Tab 1" } }),
+        t({ button: { ...t().button, label: "Tab 2" } })
+      ];
+      o(() => r(/* @__PURE__ */ a(b, { tabs: e }))).not.toThrow();
+    }), l("accepts onTabChanged callback", () => {
+      const e = [t()];
+      r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: (d) => {
+        o(d).toBeDefined();
+      } }));
+    }), l("accepts ReactNode as rightSideContent", () => {
+      const e = [t()], n = /* @__PURE__ */ a("div", { children: "Content" });
+      o(() => r(/* @__PURE__ */ a(b, { rightSideContent: n, tabs: e }))).not.toThrow();
+    }), l("handles Tab with all button properties", () => {
+      const e = {
+        title: "Test",
+        content: /* @__PURE__ */ a("div", { children: "Content" }),
+        button: {
+          label: "Label",
+          gradientStartColor: "#000000",
+          gradientEndColor: "#ffffff",
+          buttonBgColor: "#cccccc",
+          buttonHoverBgColor: "#dddddd",
+          buttonTextColor: "#111111",
+          buttonHoverTextColor: "#222222",
+          borderHoverColor: "#333333"
+        }
+      };
+      o(() => r(/* @__PURE__ */ a(b, { tabs: [e] }))).not.toThrow();
+    }), l("handles Tab with optional classname", () => {
+      const e = {
+        title: "Test",
+        content: /* @__PURE__ */ a("div", { children: "Content" }),
+        classname: "custom-class",
+        button: t().button
+      };
+      o(() => r(/* @__PURE__ */ a(b, { tabs: [e] }))).not.toThrow();
+    });
+  }), h("Integration Tests", () => {
+    l("handles complete tab navigation flow", () => {
+      const e = [
+        t({
+          title: "Videos",
+          button: { ...t().button, label: "Videos" }
+        }),
+        t({
+          title: "Photos",
+          button: { ...t().button, label: "Photos" }
+        }),
+        t({
+          title: "About",
+          button: { ...t().button, label: "About" }
+        })
+      ], { rerender: n } = r(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s }));
+      o(i.getByTestId("gradient-button")).toHaveAttribute("data-label", "Videos");
+      let d = i.getAllByTestId("button");
+      const g = d.find((v) => v.getAttribute("data-label") === "Photos");
+      u.click(g), n(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), o(i.getByTestId("gradient-button")).toHaveAttribute("data-label", "Photos"), d = i.getAllByTestId("button");
+      const B = d.find((v) => v.getAttribute("data-label") === "About");
+      u.click(B), n(/* @__PURE__ */ a(b, { tabs: e, onTabChanged: s })), o(i.getByTestId("gradient-button")).toHaveAttribute("data-label", "About"), o(s).toHaveBeenCalledWith(e[0]), o(s).toHaveBeenCalledWith(e[1]), o(s).toHaveBeenCalledWith(e[2]);
+    }), l("coordinates with basic-grid-module during navigation", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Grid 1" } }),
+        t({ button: { ...t().button, label: "Grid 2" } })
+      ];
+      r(/* @__PURE__ */ a(b, { tabs: e })), c.mockClear(), T.mockClear();
+      const n = i.getByTestId("button");
+      u.click(n), o(c).toHaveBeenCalledWith("basic-grid-module"), o(T).toHaveBeenCalledWith("first-entry", "true"), o(T).toHaveBeenCalledWith("data-state", "entering");
+    }), l("renders with rightSideContent and handles navigation", () => {
+      const e = [
+        t({ button: { ...t().button, label: "Tab 1" } }),
+        t({ button: { ...t().button, label: "Tab 2" } })
+      ], n = /* @__PURE__ */ a("button", { "data-testid": "action-button", children: "Action" }), { rerender: d } = r(
+        /* @__PURE__ */ a(b, { rightSideContent: n, tabs: e })
+      );
+      o(i.getByTestId("action-button")).toBeInTheDocument();
+      const g = i.getByTestId("button");
+      u.click(g), d(/* @__PURE__ */ a(b, { rightSideContent: n, tabs: e })), o(i.getByTestId("action-button")).toBeInTheDocument(), o(i.getByTestId("gradient-button")).toHaveAttribute("data-label", "Tab 2");
+    }), l("handles all custom colors correctly", () => {
+      const e = [
+        t({
+          button: {
+            label: "Current",
+            gradientStartColor: "#ff0000",
+            gradientEndColor: "#00ff00",
+            buttonBgColor: "#aaaaaa",
+            buttonHoverBgColor: "#bbbbbb",
+            buttonTextColor: "#cccccc",
+            buttonHoverTextColor: "#dddddd",
+            borderHoverColor: "#eeeeee"
+          }
+        }),
+        t({
+          button: {
+            label: "Other",
+            gradientStartColor: "#111111",
+            gradientEndColor: "#222222",
+            buttonBgColor: "#333333",
+            buttonHoverBgColor: "#444444",
+            buttonTextColor: "#555555",
+            buttonHoverTextColor: "#666666"
+          }
+        })
+      ], { container: n } = r(/* @__PURE__ */ a(b, { tabs: e })), d = n.querySelectorAll(".tab-navigation__item")[0];
+      o(d).toHaveStyle({
+        "--gradient-start-color": "#ff0000",
+        "--gradient-end-color": "#00ff00"
+      });
+      const g = i.getByTestId("button");
+      o(g).toHaveAttribute("data-bg-color", "#333333"), o(g).toHaveAttribute("data-border-hover-color", "#444444");
+    });
+  });
+});