@loke/design-system/dist/components/sidebar/index.mjs

A design system with individually importable components

"use client";
import{Button}from"@loke/design-system/button";import{cn as cn2}from"@loke/design-system/cn";import{Separator}from"@loke/design-system/separator";import{Sheet,SheetContent,SheetDescription,SheetHeader,SheetTitle}from"@loke/design-system/sheet";import{Skeleton}from"@loke/design-system/skeleton";import{Tooltip,TooltipContent,TooltipProvider,TooltipTrigger}from"@loke/design-system/tooltip";import{useIsMobile}from"@loke/design-system/use-mobile";import{Menu}from"@loke/icons";import{Slot}from"@loke/ui/slot";import{cva}from"class-variance-authority";import{createContext,useCallback,useContext,useEffect,useMemo,useState}from"react";import{cn}from"@loke/design-system/cn";import*as AvatarPrimitive from"@loke/ui/avatar";import{jsx}from"react/jsx-runtime";function Avatar({className,size="default",...props}){return jsx(AvatarPrimitive.Root,{className:cn("group/avatar relative flex size-8 shrink-0 select-none rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6",className),"data-size":size,"data-slot":"avatar",...props})}function AvatarImage({className,...props}){return jsx(AvatarPrimitive.Image,{className:cn("!m-0 aspect-square size-full overflow-hidden rounded-full",className),"data-slot":"avatar-image",...props})}function AvatarFallback({className,...props}){return jsx(AvatarPrimitive.Fallback,{className:cn("flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",className),"data-slot":"avatar-fallback",...props})}import{jsx as jsx2,jsxs}from"react/jsx-runtime";var SIDEBAR_COOKIE_NAME="sidebar_state",SIDEBAR_COOKIE_MAX_AGE=604800,SIDEBAR_WIDTH="16rem",SIDEBAR_WIDTH_MOBILE="18rem",SIDEBAR_WIDTH_ICON="3rem",SIDEBAR_KEYBOARD_SHORTCUT="b",SidebarContext=createContext(null);function useSidebar(){let context=useContext(SidebarContext);if(!context)throw Error("useSidebar must be used within a SidebarProvider.");return context}function SidebarProvider({defaultOpen=!0,open:openProp,onOpenChange:setOpenProp,className,style,children,...props}){let isMobile=useIsMobile(),[openMobile,setOpenMobile]=useState(!1),[_open,_setOpen]=useState(defaultOpen),open=openProp??_open,setOpen=useCallback((value)=>{let openState=typeof value==="function"?value(open):value;if(setOpenProp)setOpenProp(openState);else _setOpen(openState);document.cookie=`${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`},[setOpenProp,open]),toggleSidebar=useCallback(()=>{return isMobile?setOpenMobile((o)=>!o):setOpen((o)=>!o)},[isMobile,setOpen]);useEffect(()=>{let handleKeyDown=(event)=>{if(event.key===SIDEBAR_KEYBOARD_SHORTCUT&&(event.metaKey||event.ctrlKey))event.preventDefault(),toggleSidebar()};return window.addEventListener("keydown",handleKeyDown),()=>window.removeEventListener("keydown",handleKeyDown)},[toggleSidebar]);let state=open?"expanded":"collapsed",contextValue=useMemo(()=>({isMobile,open,openMobile,setOpen,setOpenMobile,state,toggleSidebar}),[state,open,setOpen,isMobile,openMobile,toggleSidebar]);return jsx2(SidebarContext.Provider,{value:contextValue,children:jsx2(TooltipProvider,{delayDuration:0,children:jsx2("div",{className:cn2("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,...style},...props,children})})})}function Sidebar({side="left",variant="sidebar",collapsible="offcanvas",className,children,...props}){let{isMobile,state,openMobile,setOpenMobile}=useSidebar();if(collapsible==="none")return jsx2("div",{className:cn2("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",className),"data-slot":"sidebar",...props,children});if(isMobile)return jsx2(Sheet,{onOpenChange:setOpenMobile,open:openMobile,...props,children:jsxs(SheetContent,{className:"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden [&>div]:px-0","data-mobile":"true","data-sidebar":"sidebar","data-slot":"sidebar",side,style:{"--sidebar-width":SIDEBAR_WIDTH_MOBILE},children:[jsxs(SheetHeader,{className:"sr-only opacity-0",children:[jsx2(SheetTitle,{children:"Sidebar"}),jsx2(SheetDescription,{children:"Displays the mobile sidebar."})]}),jsx2("div",{className:"flex h-full min-h-0 w-full flex-col overflow-hidden",children})]})});return jsxs("div",{className:"group peer hidden text-sidebar-foreground md:block","data-collapsible":state==="collapsed"?collapsible:"","data-side":side,"data-slot":"sidebar","data-state":state,"data-variant":variant,children:[jsx2("div",{className:cn2("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",variant==="floating"||variant==="inset"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),"data-slot":"sidebar-gap"}),jsx2("div",{className:cn2("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",side==="left"?"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]":"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",variant==="floating"||variant==="inset"?"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:jsx2("div",{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})})]})}function SidebarTrigger({className,onClick,...props}){let{toggleSidebar}=useSidebar();return jsxs(Button,{className:cn2("size-7",className),"data-sidebar":"trigger","data-slot":"sidebar-trigger",onClick:(event)=>{onClick?.(event),toggleSidebar()},size:"icon",variant:"ghost",...props,children:[jsx2(Menu,{}),jsx2("span",{className:"sr-only",children:"Toggle Sidebar"})]})}function SidebarRail({className,...props}){let{toggleSidebar}=useSidebar();return jsx2("button",{"aria-label":"Toggle Sidebar",className:cn2("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex","in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize","[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize","group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full","[[data-side=left][data-collapsible=offcanvas]_&]:-right-2","[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",className),"data-sidebar":"rail","data-slot":"sidebar-rail",onClick:toggleSidebar,tabIndex:-1,title:"Toggle Sidebar",...props})}function SidebarInset({className,...props}){return jsx2("main",{className:cn2("relative flex w-full min-w-0 flex-1 flex-col bg-background","md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 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",className),"data-slot":"sidebar-inset",...props})}function SidebarHeader({className,...props}){return jsx2("div",{className:cn2("flex flex-col gap-2 p-2",className),"data-sidebar":"header","data-slot":"sidebar-header",...props})}function SidebarFooter({className,currentUser,...props}){let{state}=useSidebar();return jsx2("div",{className:cn2("flex flex-col gap-2 p-2",className),"data-sidebar":"footer","data-slot":"sidebar-footer",...props,children:jsxs("div",{className:`flex items-center gap-3 rounded-md p-2 hover:cursor-pointer hover:bg-sidebar-accent ${state==="collapsed"?"justify-center":"mx-1"}`,children:[jsxs(Avatar,{className:"h-8 w-8 shrink-0",children:[jsx2(AvatarImage,{alt:currentUser.name,src:currentUser.avatar}),jsx2(AvatarFallback,{children:currentUser.name.split(" ").map((n)=>n[0]).slice(0,2).join("")})]}),state==="expanded"&&jsxs("div",{className:"flex min-w-0 flex-col",children:[jsx2("span",{className:"truncate font-medium text-sidebar-foreground text-sm",children:currentUser.name}),jsx2("span",{className:"truncate text-sidebar-foreground/70 text-xs",children:currentUser.email})]})]})})}function SidebarSeparator({className,...props}){return jsx2(Separator,{className:cn2("mx-2 w-auto bg-sidebar-border",className),"data-sidebar":"separator","data-slot":"sidebar-separator",...props})}function SidebarContent({className,...props}){let{state}=useSidebar();return jsx2("div",{className:cn2("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",state!=="collapsed"&&"p-2",className),"data-sidebar":"content","data-slot":"sidebar-content",...props})}function SidebarMenu({className,...props}){let{state}=useSidebar();return jsx2("ul",{className:cn2("flex w-full min-w-0 flex-col gap-1",state==="collapsed"&&"items-center",className),"data-sidebar":"menu","data-slot":"sidebar-menu",...props})}function SidebarMenuItem({className,...props}){return jsx2("li",{className:cn2("group/menu-item relative",className),"data-sidebar":"menu-item","data-slot":"sidebar-menu-item",...props})}var sidebarMenuButtonVariants=cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md text-muted dark:text-muted-foreground 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-7! group-data-[collapsible=icon]:p-px! [&>span:last-child]:truncate [&>svg]:size-6 [&>svg]:shrink-0",{defaultVariants:{size:"default",variant:"default"},variants:{size:{default:"h-12 text-sm",lg:"h-16 text-sm group-data-[collapsible=icon]:p-0!",sm:"h-7 text-xs"},variant:{default:"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",outline:"bg-transparent 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))]"}}});function SidebarMenuButton({asChild=!1,isActive=!1,variant="default",size="default",tooltip,className,...props}){let Comp=asChild?Slot:"button",{isMobile,state}=useSidebar(),button=jsx2(Comp,{className:cn2(sidebarMenuButtonVariants({size,variant}),className),"data-active":isActive,"data-sidebar":"menu-button","data-size":size,"data-slot":"sidebar-menu-button",...props});if(!tooltip)return button;if(typeof tooltip==="string")tooltip={children:tooltip};return jsxs(Tooltip,{children:[jsx2(TooltipTrigger,{asChild:!0,children:button}),jsx2(TooltipContent,{align:"center",hidden:state!=="collapsed"||isMobile,side:"right",...tooltip})]})}function SidebarMenuSkeleton({className,showIcon=!1,...props}){let width=useMemo(()=>{return`${Math.floor(Math.random()*40)+50}%`},[]);return jsxs("div",{className:cn2("flex h-8 items-center gap-2 rounded-md px-2",className),"data-sidebar":"menu-skeleton","data-slot":"sidebar-menu-skeleton",...props,children:[showIcon&&jsx2(Skeleton,{className:"size-4 rounded-md","data-sidebar":"menu-skeleton-icon"}),jsx2(Skeleton,{className:"h-4 max-w-(--skeleton-width) flex-1","data-sidebar":"menu-skeleton-text",style:{"--skeleton-width":width}})]})}export{useSidebar,SidebarTrigger,SidebarSeparator,SidebarRail,SidebarProvider,SidebarMenuSkeleton,SidebarMenuItem,SidebarMenuButton,SidebarMenu,SidebarInset,SidebarHeader,SidebarFooter,SidebarContent,Sidebar,SIDEBAR_WIDTH};