@codefast/ui 0.3.10 → 0.3.11-canary.0

package/dist/components/sidebar.cjs

@@ -65,30 +65,30 @@ const external_skeleton_cjs_namespaceObject = require("./skeleton.cjs");
 const external_tooltip_cjs_namespaceObject = require("./tooltip.cjs");
 const use_is_mobile_cjs_namespaceObject = require("../hooks/use-is-mobile.cjs");
 const sidebarMenuButtonVariants = (0, tailwind_variants_namespaceObject.tv)({
-    base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent 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! focus-visible:ring-3 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
     defaultVariants: {
-        size: 'md',
-        variant: 'default'
+        size: "md",
+        variant: "default"
     },
     variants: {
         size: {
-            sm: 'h-7 text-xs',
-            md: 'h-8 text-sm',
-            lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm'
+            sm: "h-7 text-xs",
+            md: "h-8 text-sm",
+            lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
         },
         variant: {
-            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-            outline: 'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+            default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            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))]"
         }
     }
 });
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
-const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3.0625rem';
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-const SIDEBAR_PROVIDER_NAME = 'SidebarProvider';
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3.0625rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_PROVIDER_NAME = "SidebarProvider";
 const [SidebarContextProvider, useSidebar] = (0, react_context_namespaceObject.createContext)(SIDEBAR_PROVIDER_NAME);
 function SidebarProvider({ children, className, defaultOpen = true, onOpenChange: setOpenProperty, open: openProperty, style, ...props }) {
     const isMobile = (0, use_is_mobile_cjs_namespaceObject.useIsMobile)();
@@ -96,7 +96,7 @@ function SidebarProvider({ children, className, defaultOpen = true, onOpenChange
     const [isOpen, setIsOpen] = (0, external_react_namespaceObject.useState)(defaultOpen);
     const open = openProperty ?? isOpen;
     const setOpen = (0, external_react_namespaceObject.useCallback)((value)=>{
-        const openState = 'function' == typeof value ? value(open) : value;
+        const openState = "function" == typeof value ? value(open) : value;
         if (setOpenProperty) setOpenProperty(openState);
         else setIsOpen(openState);
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState.toString()}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE.toString()}`;
@@ -118,14 +118,14 @@ function SidebarProvider({ children, className, defaultOpen = true, onOpenChange
                 toggleSidebar();
             }
         };
-        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener("keydown", handleKeyDown);
         return ()=>{
-            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener("keydown", handleKeyDown);
         };
     }, [
         toggleSidebar
     ]);
-    const state = open ? 'expanded' : 'collapsed';
+    const state = open ? "expanded" : "collapsed";
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SidebarContextProvider, {
         isMobile: isMobile,
         open: open,
@@ -137,11 +137,11 @@ function SidebarProvider({ children, className, defaultOpen = true, onOpenChange
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
             delayDuration: 0,
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: (0, tailwind_variants_namespaceObject.cn)('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className),
+                className: (0, tailwind_variants_namespaceObject.cn)("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
                 "data-slot": "sidebar-wrapper",
                 style: {
-                    '--sidebar-width': SIDEBAR_WIDTH,
-                    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                    "--sidebar-width": SIDEBAR_WIDTH,
+                    "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                     ...style
                 },
                 ...props,
@@ -150,11 +150,11 @@ function SidebarProvider({ children, className, defaultOpen = true, onOpenChange
         })
     });
 }
-const SIDEBAR_NAME = 'Sidebar';
-function Sidebar({ children, className, collapsible = 'offcanvas', side = 'left', variant = 'sidebar', ...props }) {
+const SIDEBAR_NAME = "Sidebar";
+function Sidebar({ children, className, collapsible = "offcanvas", side = "left", variant = "sidebar", ...props }) {
     const { isMobile, openMobile, setOpenMobile, state } = useSidebar(SIDEBAR_NAME);
-    if ('none' === collapsible) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className),
+    if ("none" === collapsible) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, tailwind_variants_namespaceObject.cn)("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
         "data-slot": "sidebar",
         ...props,
         children: children
@@ -164,13 +164,13 @@ function Sidebar({ children, className, collapsible = 'offcanvas', side = 'left'
         onOpenChange: setOpenMobile,
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_sheet_cjs_namespaceObject.SheetContent, {
-            className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+            className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
             "data-mobile": "true",
             "data-sidebar": "sidebar",
             "data-slot": "sidebar",
             side: side,
             style: {
-                '--sidebar-width': SIDEBAR_WIDTH_MOBILE
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE
             },
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_sheet_cjs_namespaceObject.SheetHeader, {
@@ -192,23 +192,23 @@ function Sidebar({ children, className, collapsible = 'offcanvas', side = 'left'
         })
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-sidebar-foreground group peer hidden md:block', className),
-        "data-collapsible": 'collapsed' === state ? collapsible : '',
+        className: (0, tailwind_variants_namespaceObject.cn)("group peer hidden text-sidebar-foreground md:block", className),
+        "data-collapsible": "collapsed" === state ? collapsible : "",
         "data-side": side,
         "data-slot": "sidebar",
         "data-state": state,
         "data-variant": variant,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: (0, tailwind_variants_namespaceObject.cn)('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180', 'floating' === variant || 'inset' === variant ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'),
+                className: (0, tailwind_variants_namespaceObject.cn)("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180", "floating" === variant || "inset" === variant ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
                 "data-slot": "sidebar-gap"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: (0, tailwind_variants_namespaceObject.cn)('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', 'left' === side ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 'floating' === variant || 'inset' === variant ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className),
+                className: (0, tailwind_variants_namespaceObject.cn)("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", "left" === side ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", "floating" === variant || "inset" === variant ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
                 "data-slot": "sidebar-container",
                 ...props,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+                    className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
                     "data-sidebar": "sidebar",
                     "data-slot": "sidebar-inner",
                     children: children
@@ -217,11 +217,11 @@ function Sidebar({ children, className, collapsible = 'offcanvas', side = 'left'
         ]
     });
 }
-const SIDEBAR_TRIGGER_NAME = 'SidebarTrigger';
+const SIDEBAR_TRIGGER_NAME = "SidebarTrigger";
 function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar(SIDEBAR_TRIGGER_NAME);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
-        className: (0, tailwind_variants_namespaceObject.cn)('size-7', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("size-7", className),
         "data-sidebar": "trigger",
         "data-slot": "sidebar-trigger",
         size: "icon",
@@ -240,11 +240,11 @@ function SidebarTrigger({ className, onClick, ...props }) {
         ]
     });
 }
-const SIDEBAR_RAIL_NAME = 'SidebarRail';
+const SIDEBAR_RAIL_NAME = "SidebarRail";
 function SidebarRail({ className, ...props }) {
     const { toggleSidebar } = useSidebar(SIDEBAR_RAIL_NAME);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-        className: (0, tailwind_variants_namespaceObject.cn)('hover:after:bg-sidebar-border hover:group-data-[collapsible=offcanvas]:bg-sidebar absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[collapsible=offcanvas]:translate-x-0 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize sm:flex [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[collapsible=offcanvas]:translate-x-0 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize sm:flex [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", className),
         "data-sidebar": "rail",
         "data-slot": "sidebar-rail",
         title: "Toggle Sidebar",
@@ -255,14 +255,14 @@ function SidebarRail({ className, ...props }) {
 }
 function SidebarInset({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
-        className: (0, tailwind_variants_namespaceObject.cn)('bg-background relative flex w-full min-w-0 flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("relative flex w-full min-w-0 flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
         "data-slot": "sidebar-inset",
         ...props
     });
 }
 function SidebarInput({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
-        className: (0, tailwind_variants_namespaceObject.cn)('bg-background h-8 w-full shadow-none', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("h-8 w-full bg-background shadow-none", className),
         "data-sidebar": "input",
         "data-slot": "sidebar-input",
         ...props
@@ -270,7 +270,7 @@ function SidebarInput({ className, ...props }) {
 }
 function SidebarHeader({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex flex-col gap-2 p-2', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex flex-col gap-2 p-2", className),
         "data-sidebar": "header",
         "data-slot": "sidebar-header",
         ...props
@@ -278,7 +278,7 @@ function SidebarHeader({ className, ...props }) {
 }
 function SidebarFooter({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex flex-col gap-2 p-2', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex flex-col gap-2 p-2", className),
         "data-sidebar": "footer",
         "data-slot": "sidebar-footer",
         ...props
@@ -286,7 +286,7 @@ function SidebarFooter({ className, ...props }) {
 }
 function SidebarSeparator({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_separator_cjs_namespaceObject.Separator, {
-        className: (0, tailwind_variants_namespaceObject.cn)('bg-sidebar-border mx-2 w-auto', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("mx-2 w-auto bg-sidebar-border", className),
         "data-sidebar": "separator",
         "data-slot": "sidebar-separator",
         ...props
@@ -294,7 +294,7 @@ function SidebarSeparator({ className, ...props }) {
 }
 function SidebarContent({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
         "data-sidebar": "content",
         "data-slot": "sidebar-content",
         ...props
@@ -302,25 +302,25 @@ function SidebarContent({ className, ...props }) {
 }
 function SidebarGroup({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('relative flex w-full min-w-0 flex-col p-2', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("relative flex w-full min-w-0 flex-col p-2", className),
         "data-sidebar": "group",
         "data-slot": "sidebar-group",
         ...props
     });
 }
 function SidebarGroupLabel({ asChild = false, className, ...props }) {
-    const Component = asChild ? react_slot_namespaceObject.Slot : 'div';
+    const Component = asChild ? react_slot_namespaceObject.Slot : "div";
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center truncate rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-3 [&>svg]:size-4 [&>svg]:shrink-0', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex h-8 shrink-0 items-center truncate rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-3 [&>svg]:size-4 [&>svg]:shrink-0", className),
         "data-sidebar": "group-label",
         "data-slot": "sidebar-group-label",
         ...props
     });
 }
 function SidebarGroupAction({ asChild = false, className, ...props }) {
-    const Component = asChild ? react_slot_namespaceObject.Slot : 'button';
+    const Component = asChild ? react_slot_namespaceObject.Slot : "button";
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
         "data-sidebar": "group-action",
         "data-slot": "sidebar-group-action",
         ...props
@@ -328,7 +328,7 @@ function SidebarGroupAction({ asChild = false, className, ...props }) {
 }
 function SidebarGroupContent({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('w-full text-sm', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("w-full text-sm", className),
         "data-sidebar": "group-content",
         "data-slot": "sidebar-group-content",
         ...props
@@ -336,7 +336,7 @@ function SidebarGroupContent({ className, ...props }) {
 }
 function SidebarMenu({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex w-full min-w-0 flex-col gap-1', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex w-full min-w-0 flex-col gap-1", className),
         "data-sidebar": "menu",
         "data-slot": "sidebar-menu",
         ...props
@@ -344,15 +344,15 @@ function SidebarMenu({ className, ...props }) {
 }
 function SidebarMenuItem({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
-        className: (0, tailwind_variants_namespaceObject.cn)('group/menu-item relative', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("group/menu-item relative", className),
         "data-sidebar": "menu-item",
         "data-slot": "sidebar-menu-item",
         ...props
     });
 }
-const SIDEBAR_MENU_BUTTON_NAME = 'SidebarMenuButton';
-function SidebarMenuButton({ asChild = false, className, isActive = false, size = 'md', tooltip, variant = 'default', ...props }) {
-    const Component = asChild ? react_slot_namespaceObject.Slot : 'button';
+const SIDEBAR_MENU_BUTTON_NAME = "SidebarMenuButton";
+function SidebarMenuButton({ asChild = false, className, isActive = false, size = "md", tooltip, variant = "default", ...props }) {
+    const Component = asChild ? react_slot_namespaceObject.Slot : "button";
     const { isMobile, state } = useSidebar(SIDEBAR_MENU_BUTTON_NAME);
     const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
         className: (0, tailwind_variants_namespaceObject.cn)(sidebarMenuButtonVariants({
@@ -366,7 +366,7 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
         ...props
     });
     if (!tooltip) return button;
-    if ('string' == typeof tooltip) tooltip = {
+    if ("string" == typeof tooltip) tooltip = {
         children: tooltip
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
@@ -377,7 +377,7 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
                 align: "center",
-                hidden: 'collapsed' !== state || isMobile,
+                hidden: "collapsed" !== state || isMobile,
                 side: "right",
                 ...tooltip
             })
@@ -385,9 +385,9 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
     });
 }
 function SidebarMenuAction({ asChild = false, className, showOnHover = false, ...props }) {
-    const Component = asChild ? react_slot_namespaceObject.Slot : 'button';
+    const Component = asChild ? react_slot_namespaceObject.Slot : "button";
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0', showOnHover && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0", className),
         "data-sidebar": "menu-action",
         "data-slot": "sidebar-menu-action",
         ...props
@@ -395,7 +395,7 @@ function SidebarMenuAction({ asChild = false, className, showOnHover = false, ..
 }
 function SidebarMenuBadge({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1", className),
         "data-sidebar": "menu-badge",
         "data-slot": "sidebar-menu-badge",
         ...props
@@ -404,7 +404,7 @@ function SidebarMenuBadge({ className, ...props }) {
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
     const [width] = (0, external_react_namespaceObject.useState)(()=>`${String(Math.floor(40 * Math.random()) + 50)}%`);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex h-8 items-center gap-2 rounded-md px-2', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex h-8 items-center gap-2 rounded-md px-2", className),
         "data-sidebar": "menu-skeleton",
         "data-slot": "sidebar-menu-skeleton",
         ...props,
@@ -417,7 +417,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
                 className: "h-4 max-w-(--skeleton-width) flex-1",
                 "data-sidebar": "menu-skeleton-text",
                 style: {
-                    '--skeleton-width': width
+                    "--skeleton-width": width
                 }
             })
         ]
@@ -425,7 +425,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 }
 function SidebarMenuSub({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
-        className: (0, tailwind_variants_namespaceObject.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 group-data-[collapsible=icon]:hidden', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
         "data-sidebar": "menu-sub",
         "data-slot": "sidebar-menu-sub",
         ...props
@@ -433,16 +433,16 @@ function SidebarMenuSub({ className, ...props }) {
 }
 function SidebarMenuSubItem({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
-        className: (0, tailwind_variants_namespaceObject.cn)('group/menu-sub-item relative', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("group/menu-sub-item relative", className),
         "data-sidebar": "menu-sub-item",
         "data-slot": "sidebar-menu-sub-item",
         ...props
     });
 }
-function SidebarMenuSubButton({ asChild = false, className, isActive = false, size = 'md', ...props }) {
-    const Component = asChild ? react_slot_namespaceObject.Slot : 'a';
+function SidebarMenuSubButton({ asChild = false, className, isActive = false, size = "md", ...props }) {
+    const Component = asChild ? react_slot_namespaceObject.Slot : "a";
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
-        className: (0, tailwind_variants_namespaceObject.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 data-[active=true]:bg-sidebar-accent data-[active=true]: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-3 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', 'sm' === size && 'text-xs', 'md' === size && 'text-sm', 'group-data-[collapsible=icon]:hidden', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-3 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "sm" === size && "text-xs", "md" === size && "text-sm", "group-data-[collapsible=icon]:hidden", className),
         "data-active": isActive,
         "data-sidebar": "menu-sub-button",
         "data-size": size,

package/dist/components/sidebar.d.ts

@@ -1,9 +1,9 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, Dispatch, JSX, SetStateAction } from 'react';
-import { Button } from './button';
-import { Input } from './input';
-import { Separator } from './separator';
-import { TooltipContent } from './tooltip';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, Dispatch, JSX, SetStateAction } from "react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import { TooltipContent } from "./tooltip";
 declare const sidebarMenuButtonVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     size: {
         sm: string;
@@ -21,79 +21,79 @@ interface SidebarContextValue {
     openMobile: boolean;
     setOpen: (open: boolean) => void;
     setOpenMobile: Dispatch<SetStateAction<boolean>>;
-    state: 'collapsed' | 'expanded';
+    state: "collapsed" | "expanded";
     toggleSidebar: () => void;
 }
 declare const useSidebar: (consumerName: string) => SidebarContextValue;
-interface SidebarProviderProps extends ComponentProps<'div'> {
+interface SidebarProviderProps extends ComponentProps<"div"> {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
 }
 declare function SidebarProvider({ children, className, defaultOpen, onOpenChange: setOpenProperty, open: openProperty, style, ...props }: SidebarProviderProps): JSX.Element;
-interface SidebarProps extends ComponentProps<'div'> {
-    collapsible?: 'icon' | 'none' | 'offcanvas';
-    side?: 'left' | 'right';
-    variant?: 'floating' | 'inset' | 'sidebar';
+interface SidebarProps extends ComponentProps<"div"> {
+    collapsible?: "icon" | "none" | "offcanvas";
+    side?: "left" | "right";
+    variant?: "floating" | "inset" | "sidebar";
 }
 declare function Sidebar({ children, className, collapsible, side, variant, ...props }: SidebarProps): JSX.Element;
 type SidebarTriggerProps = ComponentProps<typeof Button>;
 declare function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps): JSX.Element;
-type SidebarRailProps = ComponentProps<'button'>;
+type SidebarRailProps = ComponentProps<"button">;
 declare function SidebarRail({ className, ...props }: SidebarRailProps): JSX.Element;
-type SidebarInsetProps = ComponentProps<'main'>;
+type SidebarInsetProps = ComponentProps<"main">;
 declare function SidebarInset({ className, ...props }: SidebarInsetProps): JSX.Element;
 type SidebarInputProps = ComponentProps<typeof Input>;
 declare function SidebarInput({ className, ...props }: SidebarInputProps): JSX.Element;
-type SidebarHeaderProps = ComponentProps<'div'>;
+type SidebarHeaderProps = ComponentProps<"div">;
 declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): JSX.Element;
-type SidebarFooterProps = ComponentProps<'div'>;
+type SidebarFooterProps = ComponentProps<"div">;
 declare function SidebarFooter({ className, ...props }: SidebarFooterProps): JSX.Element;
 type SidebarSeparatorProps = ComponentProps<typeof Separator>;
 declare function SidebarSeparator({ className, ...props }: SidebarSeparatorProps): JSX.Element;
-type SidebarContentProps = ComponentProps<'div'>;
+type SidebarContentProps = ComponentProps<"div">;
 declare function SidebarContent({ className, ...props }: SidebarContentProps): JSX.Element;
-type SidebarGroupProps = ComponentProps<'div'>;
+type SidebarGroupProps = ComponentProps<"div">;
 declare function SidebarGroup({ className, ...props }: SidebarGroupProps): JSX.Element;
-interface SidebarGroupLabelProps extends ComponentProps<'div'> {
+interface SidebarGroupLabelProps extends ComponentProps<"div"> {
     asChild?: boolean;
 }
 declare function SidebarGroupLabel({ asChild, className, ...props }: SidebarGroupLabelProps): JSX.Element;
-interface SidebarGroupActionProps extends ComponentProps<'button'> {
+interface SidebarGroupActionProps extends ComponentProps<"button"> {
     asChild?: boolean;
 }
 declare function SidebarGroupAction({ asChild, className, ...props }: SidebarGroupActionProps): JSX.Element;
-type SidebarGroupContentProps = ComponentProps<'div'>;
+type SidebarGroupContentProps = ComponentProps<"div">;
 declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): JSX.Element;
-type SidebarMenuProps = ComponentProps<'ul'>;
+type SidebarMenuProps = ComponentProps<"ul">;
 declare function SidebarMenu({ className, ...props }: SidebarMenuProps): JSX.Element;
-type SidebarMenuItemProps = ComponentProps<'li'>;
+type SidebarMenuItemProps = ComponentProps<"li">;
 declare function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps): JSX.Element;
-interface SidebarMenuButtonProps extends ComponentProps<'button'>, VariantProps<typeof sidebarMenuButtonVariants> {
+interface SidebarMenuButtonProps extends ComponentProps<"button">, VariantProps<typeof sidebarMenuButtonVariants> {
     asChild?: boolean;
     isActive?: boolean;
     tooltip?: ComponentProps<typeof TooltipContent> | string;
 }
 declare function SidebarMenuButton({ asChild, className, isActive, size, tooltip, variant, ...props }: SidebarMenuButtonProps): JSX.Element;
-interface SidebarMenuActionProps extends ComponentProps<'button'> {
+interface SidebarMenuActionProps extends ComponentProps<"button"> {
     asChild?: boolean;
     showOnHover?: boolean;
 }
 declare function SidebarMenuAction({ asChild, className, showOnHover, ...props }: SidebarMenuActionProps): JSX.Element;
-type SidebarMenuBadgeProps = ComponentProps<'div'>;
+type SidebarMenuBadgeProps = ComponentProps<"div">;
 declare function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): JSX.Element;
-interface SidebarMenuSkeletonProps extends ComponentProps<'div'> {
+interface SidebarMenuSkeletonProps extends ComponentProps<"div"> {
     showIcon?: boolean;
 }
 declare function SidebarMenuSkeleton({ className, showIcon, ...props }: SidebarMenuSkeletonProps): JSX.Element;
-type SidebarMenuSubProps = ComponentProps<'ul'>;
+type SidebarMenuSubProps = ComponentProps<"ul">;
 declare function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps): JSX.Element;
-type SidebarMenuSubItemProps = ComponentProps<'li'>;
+type SidebarMenuSubItemProps = ComponentProps<"li">;
 declare function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemProps): JSX.Element;
-interface SidebarMenuSubButtonProps extends ComponentProps<'a'> {
+interface SidebarMenuSubButtonProps extends ComponentProps<"a"> {
     asChild?: boolean;
     isActive?: boolean;
-    size?: 'md' | 'sm';
+    size?: "md" | "sm";
 }
 declare function SidebarMenuSubButton({ asChild, className, isActive, size, ...props }: SidebarMenuSubButtonProps): JSX.Element;
 export { sidebarMenuButtonVariants };