@nswds/app 1.58.0 → 1.59.0

package/dist/index.cjs

@@ -8,7 +8,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var Headless4 = require('@headlessui/react');
 var React4 = require('react');
-var Link11 = require('next/link');
+var Link12 = require('next/link');
 var react = require('@remixicon/react');
 var RechartsPrimitive = require('recharts');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
@@ -86,7 +86,7 @@ var clsx12__default = /*#__PURE__*/_interopDefault(clsx12);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var Headless4__namespace = /*#__PURE__*/_interopNamespace(Headless4);
 var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
-var Link11__default = /*#__PURE__*/_interopDefault(Link11);
+var Link12__default = /*#__PURE__*/_interopDefault(Link12);
 var RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespace(RechartsPrimitive);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
@@ -397,7 +397,7 @@ function AlertDescription({ className, ...props }) {
   );
 }
 var Link = React4.forwardRef(function Link2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Headless4__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(Link11__default.default, { ...props, ref }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Headless4__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(Link12__default.default, { ...props, ref }) });
 });
 var styles = {
   base: [
@@ -3649,7 +3649,7 @@ function Breadcrumbs({
   const shouldCollapse = breadcrumbItems.length > maxItems;
   if (!shouldCollapse) {
     return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "-ml-1", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link11__default.default, { href: item.path, children: item.label }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link12__default.default, { href: item.path, children: item.label }) }) }),
       index < breadcrumbItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path)) }) });
   }
@@ -3660,7 +3660,7 @@ function Breadcrumbs({
   const collapsedItems = breadcrumbItems.slice(startItems, breadcrumbItems.length - endItems);
   return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
     itemsAtStart.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link11__default.default, { href: item.path, children: item.label }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link12__default.default, { href: item.path, children: item.label }) }) }),
       index < itemsAtStart.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path)),
     itemsAtStart.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
@@ -3669,11 +3669,11 @@ function Breadcrumbs({
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbEllipsis, { className: "h-4 w-4" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: collapsedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link11__default.default, { href: item.path, children: item.label }) }, item.path)) })
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: collapsedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link12__default.default, { href: item.path, children: item.label }) }, item.path)) })
     ] }) }),
     itemsAtEnd.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
     itemsAtEnd.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link11__default.default, { href: item.path, children: item.label }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link12__default.default, { href: item.path, children: item.label }) }) }),
       index < itemsAtEnd.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path))
   ] }) });
@@ -11727,7 +11727,7 @@ function FooterLegalLinks({ legalLinks }) {
       "aria-label": "Footer",
       className: "flex flex-wrap justify-center gap-x-4 gap-y-3 py-4 text-sm lg:justify-start",
       children: legalLinks?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-        Link11__default.default,
+        Link12__default.default,
         {
           href: item.href,
           className: "-m-1 rounded p-1 text-grey-600 underline underline-offset-4 hover:bg-primary-800/10 hover:text-grey-600 hover:decoration-2",
@@ -12003,7 +12003,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.57.0"};
+  version: "1.58.0"};
 function Heading({
   className,
   trim = "normal",
@@ -12209,7 +12209,7 @@ function Header2({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex grow basis-0 items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Link11__default.default, { href: "/", "aria-label": "Home page", className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Link12__default.default, { href: "/", "aria-label": "Home page", className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Logo, { className: "h-12 w-auto lg:h-14" }),
             /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 2, size: 6, className: "ml-6", children: sitename })
           ] }),
@@ -13255,7 +13255,7 @@ function MainNavigation({ navigation }) {
 }
 function TopLevel({ title, href }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Link11__default.default,
+    Link12__default.default,
     {
       href,
       className: cn(
@@ -13309,7 +13309,7 @@ function MegaMenu({ title, href, links }) {
         className: "absolute inset-x-0 top-0 -z-10 pt-14 shadow transition data-[closed]:-translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[enter]:ease-out data-[leave]:duration-150 data-[leave]:ease-in",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid bg-white", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href,
               className: "group flex items-center px-8 py-8 text-xl font-bold text-primary-800 hover:bg-primary-800/10",
@@ -13332,7 +13332,7 @@ function MegaMenu({ title, href, links }) {
                 "focus-within:rounded-sm focus-within:outline focus-within:outline-inherit"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-grey-900", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                Link11__default.default,
+                Link12__default.default,
                 {
                   href: item.href,
                   className: cn(
@@ -13717,24 +13717,14 @@ function MultiLevelPushMenu({
     const isCurrentLevel = index === navigationHistory.length - 1;
     let translateX = 0;
     if (animationState === "sliding-forward") {
-      if (isCurrentLevel) {
-        translateX = isAnimationStarted ? 0 : 100;
-      } else {
-        translateX = 0;
-      }
+      translateX = isCurrentLevel ? isAnimationStarted ? 0 : 100 : 0;
     } else if (animationState === "sliding-backward") {
-      if (isCurrentLevel) {
-        translateX = 100;
-      } else {
-        translateX = 0;
-      }
-    } else {
-      translateX = 0;
+      translateX = isCurrentLevel ? 100 : 0;
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `absolute inset-0 h-full w-full will-change-transform`,
+        className: "absolute inset-0 h-full w-full will-change-transform",
         style: {
           transform: `translateX(${translateX}%)`,
           transition: animationState === "sliding-forward" && isAnimationStarted ? "transform 300ms ease-out" : animationState === "sliding-backward" ? "transform 300ms ease-out" : "none",
@@ -13763,11 +13753,22 @@ function MultiLevelPushMenu({
             "div",
             {
               className: "divide-y divide-grey-200 overflow-hidden bg-white ring-1 ring-grey-200",
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
+              children: item.href && !item.links?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+                Link12__default.default,
+                {
+                  href: item.href,
+                  onClick: (e) => handleItemClick(item, e),
+                  className: clsx12__default.default(
+                    "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
+                    pathname === item.href ? "border-primary-800 bg-primary-800/10 font-semibold text-primary-800" : "border-transparent text-grey-800",
+                    isAnimating && "pointer-events-none"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.title }) }) })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
-                  ...item.href && !item.links?.length ? { href: item.href } : {},
-                  onClick: (event) => handleItemClick(item, event),
+                  onClick: (e) => handleItemClick(item, e),
                   disabled: isAnimating,
                   className: clsx12__default.default(
                     "relative flex w-full cursor-pointer items-center justify-between gap-x-6 border-l p-4 transition-colors hover:border-primary-800 hover:bg-primary-800/10",
@@ -13806,7 +13807,7 @@ function MultiLevelPushMenu({
                 Array.from({ length: Math.min(level.depth, 10) }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: `h-1 w-2 rounded-full bg-primary-800 transition-colors duration-300`
+                    className: "h-1 w-2 rounded-full bg-primary-800 transition-colors duration-300"
                   },
                   i
                 )),
@@ -13914,7 +13915,7 @@ function MobileHeader({
             /* @__PURE__ */ jsxRuntime.jsx(Icons.menu, { "aria-hidden": "true" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: "/",
               "aria-label": "Home page",
@@ -21790,7 +21791,7 @@ function NavigationLink({
 }) {
   const pathname = navigation.usePathname();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Link11__default.default,
+    Link12__default.default,
     {
       href,
       onClick,
@@ -21960,8 +21961,8 @@ function PageHeading({
   heading,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: "nsw:border-b nsw:border-grey-300 nsw:bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
-    heading && /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 1, size: 2, className: "nsw:font-semibold", children: heading }),
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: "border-b border-grey-300 bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 1, size: 2, className: "font-semibold", children: heading }),
     children
   ] }) });
 }
@@ -22080,7 +22081,7 @@ function PrevNextLinksPageLink({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "font-display text-sm font-medium text-slate-900 dark:text-white", children: dir === "next" ? "Next" : "Previous" }),
     /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Link11__default.default,
+      Link12__default.default,
       {
         href,
         className: clsx12__default.default(
@@ -23208,7 +23209,7 @@ function SidebarLink({ link, pathname, onLinkClick, depth }) {
       },
       childLink.href
     )) }) })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Link11__default.default, { href: link.href, onClick: onLinkClick, className: baseLinkClasses, children: link.title }) });
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Link12__default.default, { href: link.href, onClick: onLinkClick, className: baseLinkClasses, children: link.title }) });
 }
 function Slider({
   className,
@@ -23577,7 +23578,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -23606,7 +23607,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               "aria-current": "step",
@@ -23630,7 +23631,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -23653,7 +23654,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -23676,7 +23677,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -23699,7 +23700,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -23722,7 +23723,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -23745,7 +23746,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -23768,7 +23769,7 @@ var StepIndicator = React4__namespace.forwardRef(
             }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: step.href,
               className: "group relative flex items-center",
@@ -24035,7 +24036,7 @@ function TableOfContents({ tableOfContents }) {
         ),
         children: tableOfContents.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: `#${section.id}`,
               className: clsx12__default.default(
@@ -24047,7 +24048,7 @@ function TableOfContents({ tableOfContents }) {
             }
           ),
           section.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ol", { role: "list", className: "mt-3 flex flex-col gap-2", children: section.children.map((subSection) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Link11__default.default,
+            Link12__default.default,
             {
               href: `#${subSection.id}`,
               className: clsx12__default.default(
@@ -24063,6 +24064,151 @@ function TableOfContents({ tableOfContents }) {
     )
   ] }) });
 }
+function getSubtree(options, content) {
+  const { asChild, children } = options;
+  if (!asChild) return typeof content === "function" ? content(children) : content;
+  const firstChild = React4__namespace.default.Children.only(children);
+  return React4__namespace.default.cloneElement(firstChild, {
+    ...firstChild.props,
+    children: typeof content === "function" ? content(firstChild.props.children) : content
+  });
+}
+var TabNavigationContext = React4.createContext({
+  hoveredTab: null,
+  setHoveredTab: () => {
+  },
+  activeTab: null,
+  setActiveTab: () => {
+  },
+  tabRefs: /* @__PURE__ */ new Map(),
+  registerTab: () => {
+  }
+});
+var TabNavigation = React4__namespace.default.forwardRef(({ className, children, ...props }, forwardedRef) => {
+  const [hoveredTab, setHoveredTab] = React4.useState(null);
+  const [activeTab, setActiveTab] = React4.useState(null);
+  const [tabRefs] = React4.useState(/* @__PURE__ */ new Map());
+  const registerTab = (id3, element) => {
+    tabRefs.set(id3, element);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabNavigationContext.Provider,
+    {
+      value: {
+        hoveredTab,
+        setHoveredTab,
+        activeTab,
+        setActiveTab,
+        tabRefs,
+        registerTab
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuPrimitive__namespace.Root, { ref: forwardedRef, ...props, asChild: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        NavigationMenuPrimitive__namespace.List,
+        {
+          className: cn(
+            // base
+            "relative flex cursor-pointer items-center justify-start border-b whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            // border color
+            "border-grey-200 dark:border-grey-800",
+            className
+          ),
+          children: [
+            hoveredTab && /* @__PURE__ */ jsxRuntime.jsx(
+              motion.div,
+              {
+                layoutId: "hoverBackground",
+                className: "absolute top-2 bottom-2 transform rounded-md border border-grey-100 bg-grey-150 transition-all duration-200 ease-out dark:border-grey-700 dark:bg-grey-800",
+                transition: {
+                  type: "spring",
+                  stiffness: 500,
+                  damping: 30
+                },
+                style: {
+                  left: (tabRefs.get(hoveredTab)?.offsetLeft || 0) + 6,
+                  width: (tabRefs.get(hoveredTab)?.offsetWidth || 0) - 12
+                }
+              }
+            ),
+            children
+          ]
+        }
+      ) })
+    }
+  );
+});
+TabNavigation.displayName = "TabNavigation";
+var TabNavigationLink = React4__namespace.default.forwardRef(({ asChild, disabled, className, children, tabId, ...props }, forwardedRef) => {
+  const { setHoveredTab, activeTab, setActiveTab, registerTab } = React4.useContext(TabNavigationContext);
+  const linkRef = React4__namespace.default.useRef(null);
+  const id3 = tabId || "unique-id";
+  React4__namespace.default.useEffect(() => {
+    if (linkRef.current) {
+      registerTab(id3, linkRef.current);
+    }
+  }, [id3, registerTab]);
+  const handleMouseEnter = () => {
+    if (!disabled) {
+      setHoveredTab(id3);
+    }
+  };
+  const handleMouseLeave = () => {
+    setHoveredTab(null);
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      setActiveTab(id3);
+    }
+  };
+  const isActive = activeTab === id3;
+  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuPrimitive__namespace.Item, { className: "flex", "aria-disabled": disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenuPrimitive__namespace.Link,
+    {
+      ref: React4__namespace.default.useMemo(() => {
+        return (node) => {
+          linkRef.current = node;
+          if (typeof forwardedRef === "function") {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        };
+      }, [forwardedRef]),
+      "aria-disabled": disabled,
+      className: cn(
+        "group relative flex shrink-0 items-center justify-center select-none",
+        disabled ? "pointer-events-none" : ""
+      ),
+      onSelect: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      asChild,
+      "data-active": isActive ? "" : void 0,
+      ...props,
+      children: getSubtree({ asChild, children }, (children2) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            // base
+            "relative z-10 -mb-px flex items-center justify-center border-b-2 border-transparent p-4 text-sm font-medium whitespace-nowrap transition-all",
+            // text color
+            "text-grey-800 dark:text-grey-500",
+            // hover
+            "group-hover:text-grey-900 dark:group-hover:text-grey-400",
+            // selected
+            isActive && "border-primary-800 font-semibold text-primary-800",
+            isActive && "dark:border-primary-600 dark:text-primary-600",
+            // disabled
+            disabled ? "pointer-events-none text-grey-300 dark:text-grey-700" : "",
+            focusRing,
+            className
+          ),
+          children: children2
+        }
+      ))
+    }
+  ) });
+});
+TabNavigationLink.displayName = "TabNavigationLink";
 var Tabs2 = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitives__namespace.Root, { "tremor-id": "tremor-raw", ...props });
 };
@@ -24947,6 +25093,8 @@ exports.Strong = Strong;
 exports.Switch = Switch2;
 exports.SwitchField = SwitchField;
 exports.SwitchGroup = SwitchGroup;
+exports.TabNavigation = TabNavigation;
+exports.TabNavigationLink = TabNavigationLink;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;