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

A design system with individually importable components

"use client";
var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_sidebar={};__export(exports_sidebar,{useSidebar:()=>useSidebar,SidebarTrigger:()=>SidebarTrigger,SidebarSeparator:()=>SidebarSeparator,SidebarRail:()=>SidebarRail,SidebarProvider:()=>SidebarProvider,SidebarMenuSkeleton:()=>SidebarMenuSkeleton,SidebarMenuItem:()=>SidebarMenuItem,SidebarMenuButton:()=>SidebarMenuButton,SidebarMenu:()=>SidebarMenu,SidebarInset:()=>SidebarInset,SidebarHeader:()=>SidebarHeader,SidebarFooter:()=>SidebarFooter,SidebarContent:()=>SidebarContent,Sidebar:()=>Sidebar,SIDEBAR_WIDTH:()=>SIDEBAR_WIDTH});module.exports=__toCommonJS(exports_sidebar);var import_button=require("@loke/design-system/button"),import_cn2=require("@loke/design-system/cn"),import_separator=require("@loke/design-system/separator"),import_sheet=require("@loke/design-system/sheet"),import_skeleton=require("@loke/design-system/skeleton"),import_tooltip=require("@loke/design-system/tooltip"),import_use_mobile=require("@loke/design-system/use-mobile"),import_icons=require("@loke/icons"),import_slot=require("@loke/ui/slot"),import_class_variance_authority=require("class-variance-authority"),import_react=require("react");var import_cn=require("@loke/design-system/cn"),AvatarPrimitive=__toESM(require("@loke/ui/avatar")),jsx_runtime=require("react/jsx-runtime");function Avatar({className,size="default",...props}){return jsx_runtime.jsx(AvatarPrimitive.Root,{className:import_cn.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_runtime.jsx(AvatarPrimitive.Image,{className:import_cn.cn("!m-0 aspect-square size-full overflow-hidden rounded-full",className),"data-slot":"avatar-image",...props})}function AvatarFallback({className,...props}){return jsx_runtime.jsx(AvatarPrimitive.Fallback,{className:import_cn.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})}var jsx_runtime2=require("react/jsx-runtime"),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=import_react.createContext(null);function useSidebar(){let context=import_react.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=import_use_mobile.useIsMobile(),[openMobile,setOpenMobile]=import_react.useState(!1),[_open,_setOpen]=import_react.useState(defaultOpen),open=openProp??_open,setOpen=import_react.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=import_react.useCallback(()=>{return isMobile?setOpenMobile((o)=>!o):setOpen((o)=>!o)},[isMobile,setOpen]);import_react.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=import_react.useMemo(()=>({isMobile,open,openMobile,setOpen,setOpenMobile,state,toggleSidebar}),[state,open,setOpen,isMobile,openMobile,toggleSidebar]);return jsx_runtime2.jsx(SidebarContext.Provider,{value:contextValue,children:jsx_runtime2.jsx(import_tooltip.TooltipProvider,{delayDuration:0,children:jsx_runtime2.jsx("div",{className:import_cn2.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,...style},...props,children})})})}function Sidebar({side="left",variant="sidebar",collapsible="offcanvas",className,children,...props}){let{isMobile,state,openMobile,setOpenMobile}=useSidebar();if(collapsible==="none")return jsx_runtime2.jsx("div",{className:import_cn2.cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",className),"data-slot":"sidebar",...props,children});if(isMobile)return jsx_runtime2.jsx(import_sheet.Sheet,{onOpenChange:setOpenMobile,open:openMobile,...props,children:jsx_runtime2.jsxs(import_sheet.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:[jsx_runtime2.jsxs(import_sheet.SheetHeader,{className:"sr-only opacity-0",children:[jsx_runtime2.jsx(import_sheet.SheetTitle,{children:"Sidebar"}),jsx_runtime2.jsx(import_sheet.SheetDescription,{children:"Displays the mobile sidebar."})]}),jsx_runtime2.jsx("div",{className:"flex h-full min-h-0 w-full flex-col overflow-hidden",children})]})});return jsx_runtime2.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:[jsx_runtime2.jsx("div",{className:import_cn2.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",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"}),jsx_runtime2.jsx("div",{className:import_cn2.cn("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:jsx_runtime2.jsx("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 jsx_runtime2.jsxs(import_button.Button,{className:import_cn2.cn("size-7",className),"data-sidebar":"trigger","data-slot":"sidebar-trigger",onClick:(event)=>{onClick?.(event),toggleSidebar()},size:"icon",variant:"ghost",...props,children:[jsx_runtime2.jsx(import_icons.Menu,{}),jsx_runtime2.jsx("span",{className:"sr-only",children:"Toggle Sidebar"})]})}function SidebarRail({className,...props}){let{toggleSidebar}=useSidebar();return jsx_runtime2.jsx("button",{"aria-label":"Toggle Sidebar",className:import_cn2.cn("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 jsx_runtime2.jsx("main",{className:import_cn2.cn("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 jsx_runtime2.jsx("div",{className:import_cn2.cn("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 jsx_runtime2.jsx("div",{className:import_cn2.cn("flex flex-col gap-2 p-2",className),"data-sidebar":"footer","data-slot":"sidebar-footer",...props,children:jsx_runtime2.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:[jsx_runtime2.jsxs(Avatar,{className:"h-8 w-8 shrink-0",children:[jsx_runtime2.jsx(AvatarImage,{alt:currentUser.name,src:currentUser.avatar}),jsx_runtime2.jsx(AvatarFallback,{children:currentUser.name.split(" ").map((n)=>n[0]).slice(0,2).join("")})]}),state==="expanded"&&jsx_runtime2.jsxs("div",{className:"flex min-w-0 flex-col",children:[jsx_runtime2.jsx("span",{className:"truncate font-medium text-sidebar-foreground text-sm",children:currentUser.name}),jsx_runtime2.jsx("span",{className:"truncate text-sidebar-foreground/70 text-xs",children:currentUser.email})]})]})})}function SidebarSeparator({className,...props}){return jsx_runtime2.jsx(import_separator.Separator,{className:import_cn2.cn("mx-2 w-auto bg-sidebar-border",className),"data-sidebar":"separator","data-slot":"sidebar-separator",...props})}function SidebarContent({className,...props}){let{state}=useSidebar();return jsx_runtime2.jsx("div",{className:import_cn2.cn("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 jsx_runtime2.jsx("ul",{className:import_cn2.cn("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 jsx_runtime2.jsx("li",{className:import_cn2.cn("group/menu-item relative",className),"data-sidebar":"menu-item","data-slot":"sidebar-menu-item",...props})}var sidebarMenuButtonVariants=import_class_variance_authority.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?import_slot.Slot:"button",{isMobile,state}=useSidebar(),button=jsx_runtime2.jsx(Comp,{className:import_cn2.cn(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 jsx_runtime2.jsxs(import_tooltip.Tooltip,{children:[jsx_runtime2.jsx(import_tooltip.TooltipTrigger,{asChild:!0,children:button}),jsx_runtime2.jsx(import_tooltip.TooltipContent,{align:"center",hidden:state!=="collapsed"||isMobile,side:"right",...tooltip})]})}function SidebarMenuSkeleton({className,showIcon=!1,...props}){let width=import_react.useMemo(()=>{return`${Math.floor(Math.random()*40)+50}%`},[]);return jsx_runtime2.jsxs("div",{className:import_cn2.cn("flex h-8 items-center gap-2 rounded-md px-2",className),"data-sidebar":"menu-skeleton","data-slot":"sidebar-menu-skeleton",...props,children:[showIcon&&jsx_runtime2.jsx(import_skeleton.Skeleton,{className:"size-4 rounded-md","data-sidebar":"menu-skeleton-icon"}),jsx_runtime2.jsx(import_skeleton.Skeleton,{className:"h-4 max-w-(--skeleton-width) flex-1","data-sidebar":"menu-skeleton-text",style:{"--skeleton-width":width}})]})}