@mesob/ui 0.1.1 → 0.2.1

package/dist/components/sidebar.js

@@ -10,18 +10,18 @@ function cn(...inputs) {
 // src/components/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
+import { jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default: "bg-primary text-primary-foreground hover:bg-primary-600 dark:hover:bg-primary-400",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-600 dark:hover:bg-secondary-400",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:text-primary-600 dark:hover:text-primary-400 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -43,23 +43,31 @@ function Button({
   variant,
   size,
   asChild = false,
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Comp,
     {
       "data-slot": "button",
       className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      ...props,
+      children: [
+        leftIcon,
+        children,
+        rightIcon
+      ]
     }
   );
 }
 
 // src/components/input.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "input",
     {
       type,
@@ -77,14 +85,14 @@ function Input({ className, type, ...props }) {
 
 // src/components/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Separator({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -102,25 +110,25 @@ function Separator({
 // src/components/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { IconX } from "@tabler/icons-react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx4(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:opacity-100 fixed inset-0 z-50 bg-[var(--overlay,oklch(0_0_0/0.5))]",
         className
       ),
       ...props
@@ -133,14 +141,14 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx4(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
+    /* @__PURE__ */ jsx3(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs2(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background text-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:opacity-100 fixed z-[51] flex min-w-0 flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
           side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
@@ -150,9 +158,9 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ jsx4(IconX, { className: "size-4" }),
-            /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Close" })
+          /* @__PURE__ */ jsxs2(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ jsx3(IconX, { className: "size-4" }),
+            /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -160,7 +168,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       "data-slot": "sheet-header",
@@ -173,7 +181,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -186,7 +194,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -197,9 +205,9 @@ function SheetDescription({
 }
 
 // src/components/skeleton.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "skeleton",
@@ -211,12 +219,12 @@ function Skeleton({ className, ...props }) {
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -226,14 +234,15 @@ function TooltipProvider({
   );
 }
 function Tooltip({
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(TooltipProvider, { children: /* @__PURE__ */ jsx6(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -241,7 +250,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -253,7 +262,7 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx6(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        /* @__PURE__ */ jsx5(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
       ]
     }
   ) });
@@ -283,13 +292,30 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { IconMenu2 } from "@tabler/icons-react";
 import { cva as cva2 } from "class-variance-authority";
 import * as React2 from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_WIDTH_COOKIE = "sidebar_width";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH_DEFAULT = 256;
+var SIDEBAR_WIDTH_MIN = 200;
+var SIDEBAR_WIDTH_MAX = 480;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+function getWidthFromCookie() {
+  if (typeof document === "undefined") {
+    return SIDEBAR_WIDTH_DEFAULT;
+  }
+  const m = document.cookie.match(
+    new RegExp(`(?:^|; )${SIDEBAR_WIDTH_COOKIE}=([^;]*)`)
+  );
+  const n = m ? Number(m[1]) : Number.NaN;
+  return Number.isFinite(n) && n >= SIDEBAR_WIDTH_MIN && n <= SIDEBAR_WIDTH_MAX ? n : SIDEBAR_WIDTH_DEFAULT;
+}
+function setWidthCookie(width) {
+  document.cookie = `${SIDEBAR_WIDTH_COOKIE}=${width}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
 var SidebarContext = React2.createContext(null);
 function useSidebar() {
   const context = React2.useContext(SidebarContext);
@@ -309,6 +335,12 @@ function SidebarProvider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React2.useState(false);
+  const [width, setWidthState] = React2.useState(getWidthFromCookie);
+  const setWidth = React2.useCallback((w) => {
+    const clamped = Math.max(SIDEBAR_WIDTH_MIN, Math.min(SIDEBAR_WIDTH_MAX, w));
+    setWidthState(clamped);
+    setWidthCookie(clamped);
+  }, []);
   const [_open, _setOpen] = React2.useState(defaultOpen);
   const open = openProp ?? _open;
   const setOpen = React2.useCallback(
@@ -344,14 +376,19 @@ function SidebarProvider({
     isMobile,
     openMobile,
     setOpenMobile,
-    toggleSidebar
+    toggleSidebar,
+    width,
+    setWidth,
+    minWidth: SIDEBAR_WIDTH_MIN,
+    maxWidth: SIDEBAR_WIDTH_MAX
   };
-  return /* @__PURE__ */ jsx7(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx7(
+  const sidebarWidthValue = open ? `${width}px` : SIDEBAR_WIDTH;
+  return /* @__PURE__ */ jsx6(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-wrapper",
       style: {
-        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width": sidebarWidthValue,
         "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
         ...style
       },
@@ -374,7 +411,7 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         "data-slot": "sidebar",
@@ -388,7 +425,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx7(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsx6(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs4(
       SheetContent,
       {
         "data-sidebar": "sidebar",
@@ -400,16 +437,16 @@ function Sidebar({
         },
         side,
         children: [
-          /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx7(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ jsx7(SheetDescription, { children: "Displays the mobile sidebar." })
+          /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx6(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx6(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsx6("div", { className: "flex h-full w-full flex-col", children })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "group peer text-sidebar-foreground hidden md:block",
@@ -419,7 +456,7 @@ function Sidebar({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -431,7 +468,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -443,7 +480,7 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx6(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -464,7 +501,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     Button,
     {
       "data-sidebar": "trigger",
@@ -478,15 +515,15 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx7(IconMenu2, {}),
-        /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx6(IconMenu2, {}),
+        /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 }
 function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       "data-sidebar": "rail",
@@ -509,7 +546,7 @@ function SidebarRail({ className, ...props }) {
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "main",
     {
       "data-slot": "sidebar-inset",
@@ -526,7 +563,7 @@ function SidebarInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Input,
     {
       "data-slot": "sidebar-input",
@@ -537,7 +574,7 @@ function SidebarInput({
   );
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-header",
@@ -548,7 +585,7 @@ function SidebarHeader({ className, ...props }) {
   );
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-footer",
@@ -562,7 +599,7 @@ function SidebarSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Separator,
     {
       "data-slot": "sidebar-separator",
@@ -573,7 +610,7 @@ function SidebarSeparator({
   );
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-content",
@@ -587,7 +624,7 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-group",
@@ -603,7 +640,7 @@ function SidebarGroupLabel({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-group-label",
@@ -623,7 +660,7 @@ function SidebarGroupAction({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "button";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-group-action",
@@ -643,7 +680,7 @@ function SidebarGroupContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-group-content",
@@ -654,7 +691,7 @@ function SidebarGroupContent({
   );
 }
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "ul",
     {
       "data-slot": "sidebar-menu",
@@ -665,7 +702,7 @@ function SidebarMenu({ className, ...props }) {
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -676,11 +713,11 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 var sidebarMenuButtonVariants = cva2(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-active focus-visible:ring-2 active:bg-sidebar-active disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:font-medium data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[""] data-[state=open]:hover:bg-sidebar-active group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 min-w-0',
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: "hover:bg-sidebar-active",
         outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
       },
       size: {
@@ -706,7 +743,7 @@ function SidebarMenuButton({
 }) {
   const Comp = asChild ? Slot2 : "button";
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx7(
+  const button = /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-menu-button",
@@ -725,9 +762,9 @@ function SidebarMenuButton({
       children: tooltip
     };
   }
-  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
-    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs4(Tooltip, { children: [
+    /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx6(
       TooltipContent,
       {
         side: "right",
@@ -745,7 +782,7 @@ function SidebarMenuAction({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "button";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-menu-action",
@@ -769,7 +806,7 @@ function SidebarMenuBadge({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "sidebar-menu-badge",
@@ -795,7 +832,7 @@ function SidebarMenuSkeleton({
   const [width] = React2.useState(
     () => `${Math.floor(Math.random() * 40) + 50}%`
   );
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-slot": "sidebar-menu-skeleton",
@@ -803,14 +840,14 @@ function SidebarMenuSkeleton({
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx7(
+        showIcon && /* @__PURE__ */ jsx6(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Skeleton,
           {
             className: "h-4 max-w-(--skeleton-width) flex-1",
@@ -825,13 +862,13 @@ function SidebarMenuSkeleton({
   );
 }
 function SidebarMenuSub({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "ul",
     {
       "data-slot": "sidebar-menu-sub",
       "data-sidebar": "menu-sub",
       className: cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "border-sidebar-border relative mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
         "group-data-[collapsible=icon]:hidden",
         className
       ),
@@ -843,7 +880,7 @@ function SidebarMenuSubItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "li",
     {
       "data-slot": "sidebar-menu-sub-item",
@@ -861,7 +898,7 @@ function SidebarMenuSubButton({
   ...props
 }) {
   const Comp = asChild ? Slot2 : "a";
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "sidebar-menu-sub-button",
@@ -869,8 +906,8 @@ function SidebarMenuSubButton({
       "data-size": size,
       "data-active": isActive,
       className: cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-active active:bg-sidebar-active [&>svg]:text-sidebar-primary flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        'data-[active=true]:relative data-[active=true]:bg-sidebar-active data-[active=true]:pl-3 data-[active=true]:text-sidebar-primary data-[active=true]:before:absolute data-[active=true]:before:left-1 data-[active=true]:before:top-[6px] data-[active=true]:before:bottom-[6px] data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary data-[active=true]:before:content-[""]',
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",