@codefast/ui 0.3.10 → 0.3.11-canary.1

package/dist/components/sheet.js

@@ -5,16 +5,16 @@ import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } fr
 import { XIcon } from "lucide-react";
 import { buttonVariants } from "./button.js";
 const sheetContentVariants = tv({
-    base: 'bg-background ease-ui data-[state=open]:animate-in data-[state=open]:animation-duration-500 data-[state=closed]:animate-out data-[state=closed]:animation-duration-500 fixed z-50 flex flex-col overflow-auto shadow-lg',
+    base: "fixed z-50 flex flex-col overflow-auto bg-background shadow-lg ease-ui data-[state=closed]:animate-out data-[state=closed]:animation-duration-500 data-[state=open]:animate-in data-[state=open]:animation-duration-500",
     defaultVariants: {
-        side: 'right'
+        side: "right"
     },
     variants: {
         side: {
-            bottom: 'data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 max-h-[80vh] border-t',
-            left: 'data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-            right: 'data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-            top: 'data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 max-h-[80vh] border-b'
+            bottom: "inset-x-0 bottom-0 max-h-[80vh] border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            top: "inset-x-0 top-0 max-h-[80vh] border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"
         }
     }
 });
@@ -31,11 +31,11 @@ function SheetTrigger({ ...props }) {
         ...props
     });
 }
-function SheetContent({ children, className, classNames, side = 'right', ...props }) {
+function SheetContent({ children, className, classNames, side = "right", ...props }) {
     return /*#__PURE__*/ jsxs(Portal, {
         children: [
             /*#__PURE__*/ jsx(Overlay, {
-                className: cn('data-[state=open]:fade-in-0 ease-ui data-[state=open]:animate-in data-[state=open]:animation-duration-500 data-[state=closed]:fade-out-0 data-[state=closed]:animate-out data-[state=closed]:animation-duration-500 fixed inset-0 z-50 bg-black/50', classNames?.overlay),
+                className: cn("fixed inset-0 z-50 bg-black/50 ease-ui data-[state=closed]:animate-out data-[state=closed]:animation-duration-500 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:animation-duration-500 data-[state=open]:fade-in-0", classNames?.overlay),
                 "data-slot": "sheet-overlay"
             }),
             /*#__PURE__*/ jsxs(Content, {
@@ -53,11 +53,11 @@ function SheetContent({ children, className, classNames, side = 'right', ...prop
                     /*#__PURE__*/ jsxs(Close, {
                         className: buttonVariants({
                             className: [
-                                'absolute top-4 right-4 size-7',
+                                "absolute top-4 right-4 size-7",
                                 classNames?.close
                             ],
-                            size: 'icon',
-                            variant: 'ghost'
+                            size: "icon",
+                            variant: "ghost"
                         }),
                         "data-slot": "sheet-close",
                         children: [
@@ -77,40 +77,40 @@ function SheetContent({ children, className, classNames, side = 'right', ...prop
 }
 function SheetHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("header", {
-        className: cn('flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center sm:text-left', className),
+        className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center sm:text-left", className),
         "data-slot": "sheet-header",
         ...props
     });
 }
 function SheetBody({ className, ...props }) {
     return /*#__PURE__*/ jsx("main", {
-        className: cn('px-6 py-2', className),
+        className: cn("px-6 py-2", className),
         "data-slot": "sheet-body",
         ...props
     });
 }
 function SheetFooter({ className, ...props }) {
     return /*#__PURE__*/ jsx("footer", {
-        className: cn('flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6 sm:flex-row sm:justify-end', className),
+        className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6 sm:flex-row sm:justify-end", className),
         "data-slot": "sheet-footer",
         ...props
     });
 }
 function SheetTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx(Title, {
-        className: cn('text-foreground text-lg font-semibold', className),
+        className: cn("text-lg font-semibold text-foreground", className),
         "data-slot": "sheet-title",
         ...props
     });
 }
 function SheetDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx(Description, {
-        className: cn('text-muted-foreground text-sm', className),
+        className: cn("text-sm text-muted-foreground", className),
         "data-slot": "sheet-description",
         ...props
     });
 }
-function SheetClose({ className, size, variant = 'outline', ...props }) {
+function SheetClose({ className, size, variant = "outline", ...props }) {
     return /*#__PURE__*/ jsx(Close, {
         className: buttonVariants({
             className,

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 };

package/dist/components/sidebar.js

@@ -13,30 +13,30 @@ import { Skeleton } from "./skeleton.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 import { useIsMobile } from "../hooks/use-is-mobile.js";
 const sidebarMenuButtonVariants = 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] = createContext(SIDEBAR_PROVIDER_NAME);
 function SidebarProvider({ children, className, defaultOpen = true, onOpenChange: setOpenProperty, open: openProperty, style, ...props }) {
     const isMobile = useIsMobile();
@@ -44,7 +44,7 @@ function SidebarProvider({ children, className, defaultOpen = true, onOpenChange
     const [isOpen, setIsOpen] = useState(defaultOpen);
     const open = openProperty ?? isOpen;
     const setOpen = 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()}`;
@@ -66,14 +66,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__*/ jsx(SidebarContextProvider, {
         isMobile: isMobile,
         open: open,
@@ -85,11 +85,11 @@ function SidebarProvider({ children, className, defaultOpen = true, onOpenChange
         children: /*#__PURE__*/ jsx(TooltipProvider, {
             delayDuration: 0,
             children: /*#__PURE__*/ jsx("div", {
-                className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className),
+                className: 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,
@@ -98,11 +98,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__*/ jsx("div", {
-        className: cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className),
+    if ("none" === collapsible) return /*#__PURE__*/ jsx("div", {
+        className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
         "data-slot": "sidebar",
         ...props,
         children: children
@@ -112,13 +112,13 @@ function Sidebar({ children, className, collapsible = 'offcanvas', side = 'left'
         onOpenChange: setOpenMobile,
         ...props,
         children: /*#__PURE__*/ jsxs(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__*/ jsxs(SheetHeader, {
@@ -140,23 +140,23 @@ function Sidebar({ children, className, collapsible = 'offcanvas', side = 'left'
         })
     });
     return /*#__PURE__*/ jsxs("div", {
-        className: cn('text-sidebar-foreground group peer hidden md:block', className),
-        "data-collapsible": 'collapsed' === state ? collapsible : '',
+        className: 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__*/ jsx("div", {
-                className: 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: 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__*/ jsx("div", {
-                className: 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: 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__*/ 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
@@ -165,11 +165,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__*/ jsxs(Button, {
-        className: cn('size-7', className),
+        className: cn("size-7", className),
         "data-sidebar": "trigger",
         "data-slot": "sidebar-trigger",
         size: "icon",
@@ -188,11 +188,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__*/ jsx("button", {
-        className: 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: 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",
@@ -203,14 +203,14 @@ function SidebarRail({ className, ...props }) {
 }
 function SidebarInset({ className, ...props }) {
     return /*#__PURE__*/ jsx("main", {
-        className: 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: 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__*/ jsx(Input, {
-        className: cn('bg-background h-8 w-full shadow-none', className),
+        className: cn("h-8 w-full bg-background shadow-none", className),
         "data-sidebar": "input",
         "data-slot": "sidebar-input",
         ...props
@@ -218,7 +218,7 @@ function SidebarInput({ className, ...props }) {
 }
 function SidebarHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-col gap-2 p-2', className),
+        className: cn("flex flex-col gap-2 p-2", className),
         "data-sidebar": "header",
         "data-slot": "sidebar-header",
         ...props
@@ -226,7 +226,7 @@ function SidebarHeader({ className, ...props }) {
 }
 function SidebarFooter({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-col gap-2 p-2', className),
+        className: cn("flex flex-col gap-2 p-2", className),
         "data-sidebar": "footer",
         "data-slot": "sidebar-footer",
         ...props
@@ -234,7 +234,7 @@ function SidebarFooter({ className, ...props }) {
 }
 function SidebarSeparator({ className, ...props }) {
     return /*#__PURE__*/ jsx(Separator, {
-        className: cn('bg-sidebar-border mx-2 w-auto', className),
+        className: cn("mx-2 w-auto bg-sidebar-border", className),
         "data-sidebar": "separator",
         "data-slot": "sidebar-separator",
         ...props
@@ -242,7 +242,7 @@ function SidebarSeparator({ className, ...props }) {
 }
 function SidebarContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className),
+        className: 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
@@ -250,25 +250,25 @@ function SidebarContent({ className, ...props }) {
 }
 function SidebarGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('relative flex w-full min-w-0 flex-col p-2', className),
+        className: 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 ? Slot : 'div';
+    const Component = asChild ? Slot : "div";
     return /*#__PURE__*/ jsx(Component, {
-        className: 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: 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 ? Slot : 'button';
+    const Component = asChild ? Slot : "button";
     return /*#__PURE__*/ jsx(Component, {
-        className: 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: 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
@@ -276,7 +276,7 @@ function SidebarGroupAction({ asChild = false, className, ...props }) {
 }
 function SidebarGroupContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('w-full text-sm', className),
+        className: cn("w-full text-sm", className),
         "data-sidebar": "group-content",
         "data-slot": "sidebar-group-content",
         ...props
@@ -284,7 +284,7 @@ function SidebarGroupContent({ className, ...props }) {
 }
 function SidebarMenu({ className, ...props }) {
     return /*#__PURE__*/ jsx("ul", {
-        className: cn('flex w-full min-w-0 flex-col gap-1', className),
+        className: cn("flex w-full min-w-0 flex-col gap-1", className),
         "data-sidebar": "menu",
         "data-slot": "sidebar-menu",
         ...props
@@ -292,15 +292,15 @@ function SidebarMenu({ className, ...props }) {
 }
 function SidebarMenuItem({ className, ...props }) {
     return /*#__PURE__*/ jsx("li", {
-        className: cn('group/menu-item relative', className),
+        className: 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 ? Slot : 'button';
+const SIDEBAR_MENU_BUTTON_NAME = "SidebarMenuButton";
+function SidebarMenuButton({ asChild = false, className, isActive = false, size = "md", tooltip, variant = "default", ...props }) {
+    const Component = asChild ? Slot : "button";
     const { isMobile, state } = useSidebar(SIDEBAR_MENU_BUTTON_NAME);
     const button = /*#__PURE__*/ jsx(Component, {
         className: cn(sidebarMenuButtonVariants({
@@ -314,7 +314,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__*/ jsxs(Tooltip, {
@@ -325,7 +325,7 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
             }),
             /*#__PURE__*/ jsx(TooltipContent, {
                 align: "center",
-                hidden: 'collapsed' !== state || isMobile,
+                hidden: "collapsed" !== state || isMobile,
                 side: "right",
                 ...tooltip
             })
@@ -333,9 +333,9 @@ function SidebarMenuButton({ asChild = false, className, isActive = false, size
     });
 }
 function SidebarMenuAction({ asChild = false, className, showOnHover = false, ...props }) {
-    const Component = asChild ? Slot : 'button';
+    const Component = asChild ? Slot : "button";
     return /*#__PURE__*/ jsx(Component, {
-        className: 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: 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
@@ -343,7 +343,7 @@ function SidebarMenuAction({ asChild = false, className, showOnHover = false, ..
 }
 function SidebarMenuBadge({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: 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: 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
@@ -352,7 +352,7 @@ function SidebarMenuBadge({ className, ...props }) {
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
     const [width] = useState(()=>`${String(Math.floor(40 * Math.random()) + 50)}%`);
     return /*#__PURE__*/ jsxs("div", {
-        className: cn('flex h-8 items-center gap-2 rounded-md px-2', className),
+        className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
         "data-sidebar": "menu-skeleton",
         "data-slot": "sidebar-menu-skeleton",
         ...props,
@@ -365,7 +365,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
                 }
             })
         ]
@@ -373,7 +373,7 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
 }
 function SidebarMenuSub({ className, ...props }) {
     return /*#__PURE__*/ jsx("ul", {
-        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 group-data-[collapsible=icon]:hidden', className),
+        className: 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
@@ -381,16 +381,16 @@ function SidebarMenuSub({ className, ...props }) {
 }
 function SidebarMenuSubItem({ className, ...props }) {
     return /*#__PURE__*/ jsx("li", {
-        className: cn('group/menu-sub-item relative', className),
+        className: 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 ? Slot : 'a';
+function SidebarMenuSubButton({ asChild = false, className, isActive = false, size = "md", ...props }) {
+    const Component = asChild ? Slot : "a";
     return /*#__PURE__*/ jsx(Component, {
-        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 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: 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,