@sikka/hawa 0.48.1-next → 0.49.0-next

package/dist/layout/index.mjs

@@ -3,7 +3,7 @@ import {
   Sheet,
   SheetContent,
   SheetTrigger
-} from "../chunk-WUMDFBEK.mjs";
+} from "../chunk-3CHFVHTW.mjs";
 import {
   Button,
   Card,
@@ -16,11 +16,11 @@ import {
   Skeleton,
   Tooltip,
   cn
-} from "../chunk-6SJUUJOV.mjs";
+} from "../chunk-KDGJZPWK.mjs";
 import {
   useBreakpoint,
   useClickOutside
-} from "../chunk-2LUXOXAL.mjs";
+} from "../chunk-5SQBJRWE.mjs";
 
 // layout/stats/Stats.tsx
 import React from "react";
@@ -62,28 +62,19 @@ var Accordion = AccordionPrimitive.Root;
 var triggerStyles = "hawa-flex hawa-flex-1 hawa-items-center hawa-duration-75 hawa-select-none hawa-cursor-pointer  hawa-rounded hawa-justify-between hawa-p-2 hawa-px-3 hawa-font-medium hawa-transition-all  [&[data-state=open]>svg]:hawa--rotate-90";
 var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React2.createElement(
-  AccordionPrimitive.Trigger,
+var AccordionTrigger = React2.forwardRef(({ className, showArrow, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React2.createElement(AccordionPrimitive.Trigger, { ref, className: cn(triggerStyles, className), ...props }, children, showArrow && /* @__PURE__ */ React2.createElement(
+  "svg",
   {
-    ref,
-    className: cn(triggerStyles, className),
-    ...props
+    "aria-label": "Chevron Right Icon",
+    stroke: "currentColor",
+    fill: "currentColor",
+    viewBox: "0 0 16 16",
+    height: "1em",
+    width: "1em",
+    className: "hawa-icon hawa-shrink-0 hawa-rotate-90 hawa-transition-transform hawa-duration-200"
   },
-  children,
-  showArrow && /* @__PURE__ */ React2.createElement(
-    "svg",
-    {
-      "aria-label": "Chevron Right Icon",
-      stroke: "currentColor",
-      fill: "currentColor",
-      viewBox: "0 0 16 16",
-      height: "1em",
-      width: "1em",
-      className: "hawa-icon hawa-shrink-0 hawa-rotate-90 hawa-transition-transform hawa-duration-200"
-    },
-    /* @__PURE__ */ React2.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
-  )
-)));
+  /* @__PURE__ */ React2.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+))));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React2.createElement(
   AccordionPrimitive.Content,
@@ -137,111 +128,78 @@ var SidebarGroup = ({
     ))
   )));
 };
-var SidebarItem = ({
-  item,
-  onItemClick,
-  onSubItemClick,
-  direction,
-  isOpen = true,
-  LinkComponent,
-  ...props
-}) => {
+var SidebarItem = ({ item, onItemClick, onSubItemClick, direction, isOpen = true, LinkComponent, ...props }) => {
   const getSelectedStyle = (value) => {
     return props.selectedItem === value ? "hawa-bg-primary/90 hawa-text-primary-foreground  hawa-cursor-default" : "hover:hawa-bg-primary/10";
   };
   if (item.subitems) {
-    return /* @__PURE__ */ React2.createElement(
-      AccordionItem,
+    return /* @__PURE__ */ React2.createElement(AccordionItem, { value: item.value, className: "hawa-overflow-x-clip", dir: direction }, /* @__PURE__ */ React2.createElement(
+      AccordionTrigger,
       {
-        value: item.value,
-        className: "hawa-overflow-x-clip",
-        dir: direction
+        className: cn(
+          "hawa-w-full hawa-overflow-x-clip",
+          props.selectedItem === item.value ? "hawa-cursor-default hawa-bg-primary hawa-text-primary-foreground" : "hawa-h-10 hover:hawa-bg-primary/10",
+          item.subitems && item.subitems.some((subitem) => props.selectedItem === subitem.value) ? "hawa-bg-primary/80 hawa-text-primary-foreground hover:hawa-bg-primary/80" : ""
+        ),
+        showArrow: isOpen
       },
       /* @__PURE__ */ React2.createElement(
-        AccordionTrigger,
+        "div",
         {
           className: cn(
-            "hawa-w-full hawa-overflow-x-clip",
-            props.selectedItem === item.value ? "hawa-cursor-default hawa-bg-primary hawa-text-primary-foreground" : "hawa-h-10 hover:hawa-bg-primary/10",
-            item.subitems && item.subitems.some(
-              (subitem) => props.selectedItem === subitem.value
-            ) ? "hawa-bg-primary/80 hawa-text-primary-foreground hover:hawa-bg-primary/80" : ""
-          ),
-          showArrow: isOpen
+            "hawa-flex hawa-h-fit hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2"
+          )
         },
+        item.icon && item.icon,
         /* @__PURE__ */ React2.createElement(
-          "div",
+          "span",
           {
             className: cn(
-              "hawa-flex hawa-h-fit hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2"
+              "hawa-transition-all hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-whitespace-nowrap",
+              isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
             )
           },
-          item.icon && item.icon,
-          /* @__PURE__ */ React2.createElement(
-            "span",
-            {
-              className: cn(
-                "hawa-transition-all hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-whitespace-nowrap",
-                isOpen ? "hawa-opacity-100" : "hawa-opacity-0"
-              )
-            },
-            item.label,
-            item.badge && /* @__PURE__ */ React2.createElement(
-              Chip,
-              {
-                label: item.badge.label,
-                color: item.badge.color,
-                size: "small"
-              }
-            )
-          )
+          item.label,
+          item.badge && /* @__PURE__ */ React2.createElement(Chip, { label: item.badge.label, color: item.badge.color, size: "small" })
         )
-      ),
-      item.subitems && /* @__PURE__ */ React2.createElement(AccordionContent, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React2.createElement(
-        "div",
+      )
+    ), item.subitems && /* @__PURE__ */ React2.createElement(AccordionContent, { className: "hawa-mt-1 hawa-h-full hawa-rounded" }, /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-flex hawa-h-full hawa-flex-col hawa-gap-2 hawa-bg-foreground/5 hawa-p-1"
+        )
+      },
+      item.subitems.map((subitem, idx) => /* @__PURE__ */ React2.createElement(
+        LinkComponent,
         {
-          className: cn(
-            "hawa-flex hawa-h-full hawa-flex-col hawa-gap-2 hawa-bg-foreground/5 hawa-p-1"
-          )
-        },
-        item.subitems.map((subitem, idx) => /* @__PURE__ */ React2.createElement(
-          LinkComponent,
-          {
-            href: subitem.slug,
-            key: idx,
-            onMouseDown: (e) => {
-              if (subitem.onMouseDown) {
-                subitem.onMouseDown(e);
-              }
-            },
-            onClick: (e) => {
-              e.stopPropagation();
-              if (subitem.onClick) {
-                subitem.onClick(e);
-              }
-              if (onSubItemClick) {
-                onSubItemClick([item.value, subitem.value]);
-              }
-            },
-            className: cn(
-              "hawa-flex hawa-h-full hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-2 hawa-overflow-x-clip hawa-whitespace-nowrap hawa-rounded hawa-p-2 hawa-transition-all",
-              // bg-foreground/10
-              getSelectedStyle(subitem.value)
-            )
+          href: subitem.slug,
+          key: idx,
+          onMouseDown: (e) => {
+            if (subitem.onMouseDown) {
+              subitem.onMouseDown(e);
+            }
           },
-          subitem.icon && subitem.icon,
-          subitem.label,
-          subitem.badge && /* @__PURE__ */ React2.createElement(
-            Chip,
-            {
-              label: subitem.badge.label,
-              color: subitem.badge.color,
-              size: "small"
+          onClick: (e) => {
+            e.stopPropagation();
+            if (subitem.onClick) {
+              subitem.onClick(e);
+            }
+            if (onSubItemClick) {
+              onSubItemClick([item.value, subitem.value]);
             }
+          },
+          className: cn(
+            "hawa-flex hawa-h-full hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-2 hawa-overflow-x-clip hawa-whitespace-nowrap hawa-rounded hawa-p-2 hawa-transition-all",
+            // bg-foreground/10
+            getSelectedStyle(subitem.value)
           )
-        ))
+        },
+        subitem.icon && subitem.icon,
+        subitem.label,
+        subitem.badge && /* @__PURE__ */ React2.createElement(Chip, { label: subitem.badge.label, color: subitem.badge.color, size: "small" })
       ))
-    );
+    )));
   } else {
     return /* @__PURE__ */ React2.createElement(
       LinkComponent,
@@ -261,11 +219,7 @@ var SidebarItem = ({
             onItemClick([item.value]);
           }
         },
-        className: cn(
-          triggerStyles,
-          getSelectedStyle(item.value),
-          "hawa-overflow-x-clip"
-        )
+        className: cn(triggerStyles, getSelectedStyle(item.value), "hawa-overflow-x-clip")
       },
       /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, item.icon && item.icon, /* @__PURE__ */ React2.createElement(
         "span",
@@ -277,14 +231,7 @@ var SidebarItem = ({
         },
         item.label,
         " ",
-        item.badge && /* @__PURE__ */ React2.createElement(
-          Chip,
-          {
-            label: item.badge.label,
-            color: item.badge.color,
-            size: "small"
-          }
-        )
+        item.badge && /* @__PURE__ */ React2.createElement(Chip, { label: item.badge.label, color: item.badge.color, size: "small" })
       ))
     );
   }
@@ -379,10 +326,7 @@ var Navbar = ({
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: cn(
-            "hawa-h-6 hawa-w-6",
-            !isOpen ? "hawa-invisible" : "hawa-visible"
-          )
+          className: cn("hawa-h-6 hawa-w-6", !isOpen ? "hawa-invisible" : "hawa-visible")
         },
         /* @__PURE__ */ React4.createElement("path", { d: "M18 6 6 18" }),
         /* @__PURE__ */ React4.createElement("path", { d: "m6 6 12 12" })
@@ -422,7 +366,9 @@ import * as Dialog from "@radix-ui/react-dialog";
 var LOCAL_STORAGE_KEY = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
   profileMenuWidth = "default",
+  userInfoPosition = "next_to_avatar",
   DrawerFooterActions,
+  profileMenuItems,
   classNames,
   bordered = true,
   design = "default",
@@ -455,9 +401,7 @@ var AppLayout = ({
   };
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = useState2("");
-  const [size, setSize] = useState2(
-    typeof window !== "undefined" && window.innerWidth || 1200
-  );
+  const [size, setSize] = useState2(typeof window !== "undefined" && window.innerWidth || 1200);
   const [openSideMenu, setOpenSideMenu] = useState2(() => {
     const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
     return savedState ? JSON.parse(savedState) : false;
@@ -512,6 +456,18 @@ var AppLayout = ({
     }
   }, [size, keepDrawerOpen]);
   const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] : 0;
+  let finalProfileMenuItems = profileMenuItems;
+  if (userInfoPosition === "in_dropdown") {
+    if (profileMenuItems && profileMenuItems.length > 0) {
+      finalProfileMenuItems = [
+        {
+          content: /* @__PURE__ */ React5.createElement("div", { className: "hawa-text-end hawa-p-2 hawa-text-xs hawa-flex hawa-flex-col hawa-justify-center hawa-items-start" }, /* @__PURE__ */ React5.createElement("div", { className: "hawa-font-bold" }, props.username), /* @__PURE__ */ React5.createElement("div", null, props.email)),
+          itemType: "custom"
+        },
+        ...profileMenuItems
+      ];
+    }
+  }
   return /* @__PURE__ */ React5.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ React5.createElement(
     "div",
     {
@@ -524,10 +480,7 @@ var AppLayout = ({
     size > 600 ? /* @__PURE__ */ React5.createElement(
       "div",
       {
-        className: cn(
-          "dark:hawa-text-white",
-          size > 600 ? "hawa-ms-14" : "hawa-ms-2"
-        ),
+        className: cn("dark:hawa-text-white", size > 600 ? "hawa-ms-14" : "hawa-ms-2"),
         style: {
           marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
         }
@@ -552,7 +505,7 @@ var AppLayout = ({
         props.pageTitle ? /* @__PURE__ */ React5.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ React5.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React5.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ React5.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ React5.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ React5.createElement("div", null, props.email)) : null, /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React5.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 && userInfoPosition === "next_to_avatar" ? /* @__PURE__ */ React5.createElement("div", { className: "hawa-text-end hawa-text-xs hawa-flex hawa-flex-col hawa-justify-center" }, /* @__PURE__ */ React5.createElement("div", { className: "hawa-font-bold" }, props.username), /* @__PURE__ */ React5.createElement("div", null, props.email)) : null, /* @__PURE__ */ React5.createElement(
       DropdownMenu,
       {
         LinkComponent: MenuLinkComponent,
@@ -562,7 +515,7 @@ var AppLayout = ({
         sideOffset: 10,
         width: profileMenuWidth,
         direction,
-        items: props.profileMenuItems || [],
+        items: finalProfileMenuItems || [],
         onItemSelect: (e) => console.log("selecting item ", e),
         trigger: /* @__PURE__ */ React5.createElement(
           "div",
@@ -713,10 +666,7 @@ var AppLayout = ({
             size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
-              localStorage.setItem(
-                LOCAL_STORAGE_KEY,
-                JSON.stringify(newKeepOpenState)
-              );
+              localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newKeepOpenState));
               setKeepDrawerOpen(newKeepOpenState);
             }
           },
@@ -742,14 +692,7 @@ var AppLayout = ({
         )
       ) : null
     )
-  )), /* @__PURE__ */ React5.createElement(
-    Dialog.Root,
-    {
-      open: size < 600 && openSideMenu,
-      onOpenChange: setOpenSideMenu
-    },
-    /* @__PURE__ */ React5.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React5.createElement(Dialog.Overlay, { className: "hawa-fixed hawa-inset-0 hawa-bg-foreground/20 hawa-backdrop-blur-[2px] data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10 data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))
-  ), /* @__PURE__ */ React5.createElement(
+  )), /* @__PURE__ */ React5.createElement(Dialog.Root, { open: size < 600 && openSideMenu, onOpenChange: setOpenSideMenu }, /* @__PURE__ */ React5.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React5.createElement(Dialog.Overlay, { className: "hawa-fixed hawa-inset-0 hawa-bg-foreground/20 hawa-backdrop-blur-[2px] data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10 data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))), /* @__PURE__ */ React5.createElement(
     "div",
     {
       className: "hawa-fixed hawa-overflow-y-auto hawa-transition-all hawa-z-0",
@@ -831,15 +774,7 @@ var AppTopbar = ({ ...props }) => {
           isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
         )
       },
-      size > 600 ? /* @__PURE__ */ React6.createElement(
-        "div",
-        {
-          className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
-        },
-        /* @__PURE__ */ React6.createElement("div", { className: "hawa-font-bold" }, props.username),
-        " ",
-        /* @__PURE__ */ React6.createElement("div", null, props.email)
-      ) : null,
+      size > 600 ? /* @__PURE__ */ React6.createElement("div", { className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs" }, /* @__PURE__ */ React6.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ React6.createElement("div", null, props.email)) : null,
       /* @__PURE__ */ React6.createElement(
         DropdownMenu,
         {
@@ -949,22 +884,20 @@ var MenubarSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React7.forwardRef(
-  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ React7.createElement(MenubarPrimitive.Portal, null, /* @__PURE__ */ React7.createElement(
-    MenubarPrimitive.Content,
-    {
-      ref,
-      align,
-      alignOffset,
-      sideOffset,
-      className: cn(
-        "hawa-z-50 hawa-min-w-[12rem] hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
-        className
-      ),
-      ...props
-    }
-  ))
-);
+var MenubarContent = React7.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ React7.createElement(MenubarPrimitive.Portal, null, /* @__PURE__ */ React7.createElement(
+  MenubarPrimitive.Content,
+  {
+    ref,
+    align,
+    alignOffset,
+    sideOffset,
+    className: cn(
+      "hawa-z-50 hawa-min-w-[12rem] hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-p-1 hawa-text-popover-foreground hawa-shadow-md data-[state=open]:hawa-animate-in data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+)));
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 var MenubarItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React7.createElement(
   MenubarPrimitive.Item,
@@ -1060,10 +993,7 @@ var MenubarSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
-var MenubarShortcut = ({
-  className,
-  ...props
-}) => {
+var MenubarShortcut = ({ className, ...props }) => {
   return /* @__PURE__ */ React7.createElement(
     "span",
     {
@@ -1081,44 +1011,35 @@ MenubarShortcut.displayname = "MenubarShortcut";
 import React8, { useState as useState3 } from "react";
 var AppTabs = ({ tabs, className }) => {
   const [selectedIndex, setSelectedIndex] = useState3(0);
-  return /* @__PURE__ */ React8.createElement(
-    "div",
-    {
-      className: cn(
-        "hawa-w-full hawa-border-b hawa-bg-card hawa-p-6 hawa-pb-0",
-        className
-      )
-    },
-    /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center" }, tabs.map((tab, index) => {
-      const selected = index === selectedIndex;
-      return /* @__PURE__ */ React8.createElement(
-        "a",
-        {
-          href: tab.path,
-          key: index,
-          onMouseDown: (e) => {
-            if (tab.onMouseDown) {
-              tab.onMouseDown(e);
-            }
-          },
-          onClick: (e) => {
-            if (tab.onClick) {
-              tab.onClick(e);
-            }
-            setSelectedIndex(index);
-          },
-          className: cn(
-            "hawa-z-10 hawa-flex hawa-items-center hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all",
-            "hawa-border",
-            // Always have a border but make it transparent
-            selected ? "hawa-border hawa-border-b-transparent hawa-bg-background" : "hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-card-foreground/5"
-          )
+  return /* @__PURE__ */ React8.createElement("div", { className: cn("hawa-w-full hawa-border-b hawa-bg-card hawa-p-6 hawa-pb-0", className) }, /* @__PURE__ */ React8.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center" }, tabs.map((tab, index) => {
+    const selected = index === selectedIndex;
+    return /* @__PURE__ */ React8.createElement(
+      "a",
+      {
+        href: tab.path,
+        key: index,
+        onMouseDown: (e) => {
+          if (tab.onMouseDown) {
+            tab.onMouseDown(e);
+          }
         },
-        tab.icon && tab.icon,
-        tab.label
-      );
-    }))
-  );
+        onClick: (e) => {
+          if (tab.onClick) {
+            tab.onClick(e);
+          }
+          setSelectedIndex(index);
+        },
+        className: cn(
+          "hawa-z-10 hawa-flex hawa-items-center hawa-translate-y-[1.1px] hawa-select-none hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-4 hawa-py-2 hawa-text-sm hawa-transition-all",
+          "hawa-border",
+          // Always have a border but make it transparent
+          selected ? "hawa-border hawa-border-b-transparent hawa-bg-background" : "hawa-cursor-pointer hawa-border-transparent hover:hawa-bg-card-foreground/5"
+        )
+      },
+      tab.icon && tab.icon,
+      tab.label
+    );
+  })));
 };
 
 // layout/docsLayout/DocsLayout.tsx
@@ -1166,25 +1087,18 @@ var DocsSidebar = ({
     rtl: "hawa-border-r-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200",
     ltr: "hawa-border-l-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200"
   };
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-flex-col hawa-overflow-x-clip", dir: direction }, pages.map((page, index) => /* @__PURE__ */ React9.createElement(
     "div",
     {
-      className: "hawa-flex hawa-flex-col hawa-overflow-x-clip",
-      dir: direction
+      key: index,
+      className: cn(
+        "hawa-cursor-pointer hawa-whitespace-nowrap hawa-px-3 hawa-py-1 hawa-text-xs hawa-transition-all hover:hawa-bg-gray-100",
+        (propCurrentPage || activePage) === page ? selectedStyles[direction || "rtl"] : ""
+      ),
+      onClick: (event) => handlePageClick(page, event)
     },
-    pages.map((page, index) => /* @__PURE__ */ React9.createElement(
-      "div",
-      {
-        key: index,
-        className: cn(
-          "hawa-cursor-pointer hawa-whitespace-nowrap hawa-px-3 hawa-py-1 hawa-text-xs hawa-transition-all hover:hawa-bg-gray-100",
-          (propCurrentPage || activePage) === page ? selectedStyles[direction || "rtl"] : ""
-        ),
-        onClick: (event) => handlePageClick(page, event)
-      },
-      page
-    ))
-  );
+    page
+  )));
 };
 
 // layout/docsLayout/DocsLayout.tsx
@@ -1319,14 +1233,7 @@ var DocsLayout = ({
               }
             )
           )
-        )), /* @__PURE__ */ React10.createElement(
-          SheetContent,
-          {
-            side: isRTL ? "right" : "left",
-            className: "hawa-pt-10"
-          },
-          /* @__PURE__ */ React10.createElement(DocsSidebar, { direction, pages: pages || [] })
-        ))
+        )), /* @__PURE__ */ React10.createElement(SheetContent, { side: isRTL ? "right" : "left", className: "hawa-pt-10" }, /* @__PURE__ */ React10.createElement(DocsSidebar, { direction, pages: pages || [] })))
       )
     ),
     /* @__PURE__ */ React10.createElement(
@@ -1362,14 +1269,7 @@ var DocsLayout = ({
       },
       ref
     },
-    /* @__PURE__ */ React10.createElement(
-      DocsSidebar,
-      {
-        direction,
-        pages: pages || [],
-        currentPage
-      }
-    )
+    /* @__PURE__ */ React10.createElement(DocsSidebar, { direction, pages: pages || [], currentPage })
   ), /* @__PURE__ */ React10.createElement(
     "div",
     {