@cryptlex/web-components 6.6.41 → 6.6.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as t,Fragment as _,jsxs as h}from"react/jsx-runtime";import{createContext as D,useState as x,useCallback as S,useEffect as j,useMemo as z,use as B}from"react";import{Button as N}from"./button.js";import{DialogTrigger as I,DialogOverlay as T,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as H}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as K}from"../utilities/use-mobile.js";import{IcMoreHorizontal as L,IcLeft as R,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";const F="/",M=D(null);function v(){const e=B(M);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function ie({defaultOpen:e=!0,open:a,onOpenChange:n,className:o,style:r,children:s,...d}){const u=K(),[f,b]=x(!1),[C,O]=x(e),p=a??C,m=S(l=>{const c=typeof l=="function"?l(p):l;n?n(c):O(c)},[n,p]),g=S(()=>u?b(l=>!l):m(l=>!l),[u,m,b]);j(()=>{const l=c=>{c.key===F&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",l),()=>window.removeEventListener("keydown",l)},[g]);const w=p?"expanded":"collapsed",k=z(()=>({state:w,open:p,setOpen:m,isMobile:u,openMobile:f,setOpenMobile:b,toggleSidebar:g}),[w,p,m,u,f,b,g]);return t(M.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",o),...d,children:s})})}function ne({side:e="left",variant:a="sidebar",collapsible:n="icon",className:o,children:r,...s}){const{isMobile:d,state:u,openMobile:f,setOpenMobile:b}=v();return n==="none"?t("div",{className:i("flex h-full w-(--sidebar-width) flex-col bg-elevation-1 text-foreground",o),...s,children:r}):d?t(I,{isOpen:f,onOpenChange:b,...s,children:t(T,{children:t(E,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-(--sidebar-width) max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(_,{children:r})})})}):h("div",{className:"group peer hidden text-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":a,"data-side":e,children:[t("div",{className:i("relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear","group-data-[collapsible=offcanvas]:w-0","group-data-[side=right]:rotate-180",a==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon)")}),t("div",{className:i("absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",e==="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)]",a==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]":"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",o),...s,children:t("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:r})})]})}function P({className:e,onClick:a,...n}){const{toggleSidebar:o,open:r,isMobile:s}=v();return t(N,{"data-sidebar":"trigger",variant:"neutral",size:"icon-sm",className:i(e,"!rounded-full"),onClick:d=>{a?.(d),o()},...n,children:s?t(L,{}):r?t(R,{}):t(A,{})})}function oe({className:e,...a}){return t("div",{"data-sidebar":"content",className:i("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",e),...a})}function re({className:e,...a}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2",e),...a})}function le({className:e,...a}){return t("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center overflow-hidden px-2 text-xs select-none font-medium uppercase text-muted-foreground outline-none ring-ring transition-[height,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:!h-0 group-data-[collapsible=icon]:min-h-0 group-data-[collapsible=icon]:opacity-0",e),...a})}function se({className:e,...a}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...a})}function de({className:e,...a}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...a})}function ue({className:e,...a}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden",e),...a})}function ce({className:e,...a}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",e),...a})}function be({className:e,number:a,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums","group-data-[collapsible=icon]:hidden",e),...n,children:new Intl.NumberFormat(navigator.language,{useGrouping:!0}).format(a)})}function pe({className:e,...a}){return t("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col","group-data-[collapsible=icon]:hidden",e),...a})}function fe({className:e,...a}){return t("li",{className:i("list-none ms-0",e),...a})}const y="btn-selected rounded-none border-0 justify-start w-full group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:justify-center";function me({isActive:e=!1,className:a,children:n,icon:o,...r}){const{isMobile:s,state:d}=v();return h(G,{isDisabled:s||d!=="collapsed",children:[h(N,{size:d==="collapsed"?"icon":void 0,"data-sidebar":"menu-button",...e&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input",y,a),...r,children:[o&&t(o,{}),d!=="collapsed"&&n]}),t(H,{placement:"right",children:t("span",{className:"flex items-center gap-2",children:n})})]})}function ge({isActive:e,className:a,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i(y,a),...n})}function he({className:e,logo:a,children:n,showTrigger:o=!0,...r}){return h("div",{"data-sidebar":"header",className:i("flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0",e),...r,children:[a&&t("div",{className:"flex items-center justify-center size-input shrink-0",children:a}),n&&t("div",{className:"flex-1 min-w-0 group-data-[collapsible=icon]:hidden",children:n}),o&&t(P,{className:"hidden bg-elevation-1 lg:flex lg:absolute lg:-right-4 lg:z-50"})]})}function ve({className:e,...a}){return t("div",{className:i(e,"flex flex-col flex-1 overflow-auto"),...a})}function we({className:e,...a}){return t("div",{className:i(e,"flex-1 overflow-auto"),...a})}function xe({className:e,...a}){return t("nav",{className:i("flex items-center h-header bg-elevation-1 p-2 border-b",e),...a})}export{ne as Sidebar,oe as SidebarContent,M as SidebarContext,re as SidebarGroup,se as SidebarGroupContent,le as SidebarGroupLabel,he as SidebarHeader,de as SidebarMenu,ce as SidebarMenuAction,be as SidebarMenuBadge,me as SidebarMenuButton,ue as SidebarMenuItem,pe as SidebarMenuSub,ge as SidebarMenuSubButton,fe as SidebarMenuSubItem,ve as SidebarOutlet,we as SidebarOutletContent,xe as SidebarOutletHeader,ie as SidebarProvider,P as SidebarTrigger,y as sidebarMenuButtonClasses,v as useSidebar};
|
|
2
2
|
//# sourceMappingURL=sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, IcRight, type CtxIcon } from './icons';\n\nconst SIDEBAR_KEYBOARD_SHORTCUT = '/';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\n */\nexport function useSidebar() {\n const context = use(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n * <Sidebar>...</Sidebar>\n * <SidebarOutlet>\n * <main>Your app content</main>\n * </SidebarOutlet>\n * </SidebarProvider>\n */\nexport function SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Initial open state. Defaults to true */\n defaultOpen?: boolean;\n /** Control the open state yourself */\n open?: boolean;\n /** Callback when sidebar opens/closes */\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n className={classNames(\n 'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'icon',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Where to dock the sidebar. Default: left */\n side?: 'left' | 'right';\n /** Style variant. Default: sidebar */\n variant?: 'sidebar' | 'floating';\n /** How it collapses. Default: offcanvas */\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n className={classNames(\n 'flex h-full w-(--sidebar-width) flex-col bg-elevation-1 text-foreground',\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <DialogTrigger isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\n <DialogOverlay>\n <DialogContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) max-h-svh overflow-auto p-0 [&>button]:hidden\"\n side=\"left\"\n >\n {() => <>{children}</>}\n </DialogContent>\n </DialogOverlay>\n </DialogTrigger>\n );\n }\n\n return (\n <div\n className=\"group peer hidden text-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n className={classNames(\n 'relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n className={classNames(\n 'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating variant.\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n className=\"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar, open, isMobile } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n variant=\"neutral\"\n size=\"icon-sm\"\n className={classNames(className, '!rounded-full')}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n {/* Use transition to rotate a single icon */}\n {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n </Button>\n );\n}\n\n/**\n * Scrollable container for sidebar content\n */\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"content\"\n className={classNames(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Groups related menu items together\n */\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group\"\n className={classNames(\n 'relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Label for a group.\n */\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group-label\"\n className={classNames(\n 'flex h-input shrink-0 items-center px-2 text-xs select-none font-medium uppercase text-muted-foreground outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Content wrapper for a group\n */\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\n/**\n * Container for menu items\n */\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\n/**\n * Single menu item wrapper\n */\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-sidebar=\"menu-item\"\n className={classNames(\n 'group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Only show on hover */\n showOnHover?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-action\"\n className={classNames(\n 'absolute top-0 right-0 btn btn-ghost h-input',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n className,\n number,\n ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n /** The count to display */\n number: number | bigint;\n}) {\n return (\n <div\n data-sidebar=\"menu-badge\"\n className={classNames(\n 'absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n >\n {/* Format the number */}\n {new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(number)}\n </div>\n );\n}\n\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-sidebar=\"menu-sub\"\n className={classNames('ms-2 flex min-w-0 flex-col', 'group-data-[collapsible=icon]:hidden', className)}\n {...props}\n />\n );\n}\n\n/**\n * Submenu item wrapper\n */\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\nexport const sidebarMenuButtonClasses =\n 'btn-selected rounded-none border-0 justify-start w-full group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:justify-center';\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n isActive = false,\n className,\n children,\n icon: Icon,\n ...props\n}: Omit<React.ComponentProps<typeof Button>, 'children'> & {\n /** Mark as currently active page */\n icon?: CtxIcon;\n isActive?: boolean;\n children?: React.ReactNode;\n}) {\n const { isMobile, state } = useSidebar();\n\n return (\n <TooltipTrigger isDisabled={isMobile || state !== 'collapsed'}>\n <Button\n size={state === 'collapsed' ? 'icon' : undefined}\n data-sidebar=\"menu-button\"\n {...(isActive && { 'data-selected': true })}\n className={classNames(\n 'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input',\n sidebarMenuButtonClasses,\n className\n )}\n {...props}\n >\n {Icon && <Icon />}\n {state !== 'collapsed' && children}\n </Button>\n <Tooltip placement=\"right\">\n <span className=\"flex items-center gap-2\">{children}</span>\n </Tooltip>\n </TooltipTrigger>\n );\n}\n\n/**\n * Button for submenu items\n */\nexport function SidebarMenuSubButton({\n isActive,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n isActive?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-sub-button\"\n data-active={isActive}\n className={classNames(sidebarMenuButtonClasses, className)}\n {...props}\n />\n );\n}\n\n/**\n * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.\n */\nexport function SidebarHeader({\n className,\n logo,\n children,\n showTrigger = true,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Square logo/icon to display */\n logo?: React.ReactNode;\n showTrigger?: boolean;\n}) {\n return (\n <div\n data-sidebar=\"header\"\n className={classNames(\n 'flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',\n className\n )}\n {...props}\n >\n {logo && <div className=\"flex items-center justify-center size-input shrink-0\">{logo}</div>}\n {children && <div className=\"flex-1 min-w-0 group-data-[collapsible=icon]:hidden\">{children}</div>}\n {showTrigger && (\n <SidebarTrigger className={'hidden bg-elevation-1 lg:flex lg:absolute lg:-right-4 lg:z-50'} />\n )}\n </div>\n );\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n * <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * <SidebarOutletContent><Outlet/></SidebarOutletContent>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'flex flex-col flex-1 overflow-auto')} {...props} />;\n}\n\nexport function SidebarOutletContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'flex-1 overflow-auto')} {...props} />;\n}\n\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav className={classNames('flex items-center h-header bg-elevation-1 p-2 border-b', className)} {...props} />\n );\n}\n"],"names":["SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","sidebarMenuButtonClasses","SidebarMenuButton","isActive","Icon","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarHeader","logo","showTrigger","SidebarOutlet","SidebarOutletContent","SidebarOutletHeader"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sidebar.js","sources":["../../lib/components/sidebar.tsx"],"sourcesContent":["'use client';\nimport { createContext, use, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../components/button';\nimport { DialogContent, DialogOverlay, DialogTrigger } from '../components/dialog';\nimport { Tooltip, TooltipTrigger } from '../components/tooltip';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcLeft, IcMoreHorizontal, IcRight, type CtxIcon } from './icons';\n\nconst SIDEBAR_KEYBOARD_SHORTCUT = '/';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nexport const SidebarContext = createContext<SidebarContextProps | null>(null);\n\n/**\n * Get the current sidebar state and controls. Must be inside SidebarProvider.\n * @throws When used outside of SidebarProvider\n */\nexport function useSidebar() {\n const context = use(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\n/**\n * Wraps your app layout and manages sidebar state. Handles keyboard shortcuts (Cmd/Ctrl + /)\n * and mobile vs desktop behavior.\n *\n * @example\n * <SidebarProvider>\n * <Sidebar>...</Sidebar>\n * <SidebarOutlet>\n * <main>Your app content</main>\n * </SidebarOutlet>\n * </SidebarProvider>\n */\nexport function SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Initial open state. Defaults to true */\n defaultOpen?: boolean;\n /** Control the open state yourself */\n open?: boolean;\n /** Callback when sidebar opens/closes */\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n className={classNames(\n 'group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\n/**\n * The actual sidebar panel. On mobile it becomes a modal dialog.\n */\nexport function Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'icon',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Where to dock the sidebar. Default: left */\n side?: 'left' | 'right';\n /** Style variant. Default: sidebar */\n variant?: 'sidebar' | 'floating';\n /** How it collapses. Default: offcanvas */\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n className={classNames(\n 'flex h-full w-(--sidebar-width) flex-col bg-elevation-1 text-foreground',\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <DialogTrigger isOpen={openMobile} onOpenChange={setOpenMobile} {...props}>\n <DialogOverlay>\n <DialogContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) max-h-svh overflow-auto p-0 [&>button]:hidden\"\n side=\"left\"\n >\n {() => <>{children}</>}\n </DialogContent>\n </DialogOverlay>\n </DialogTrigger>\n );\n }\n\n return (\n <div\n className=\"group peer hidden text-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n className={classNames(\n 'relative w-(--sidebar-width) bg-elevation-1 transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n className={classNames(\n 'absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating variant.\n variant === 'floating'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n className=\"flex h-full w-full flex-col bg-elevation-1 group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\n/**\n * Button that toggles the sidebar. Shows arrow icons.\n */\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar, open, isMobile } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n variant=\"neutral\"\n size=\"icon-sm\"\n className={classNames(className, '!rounded-full')}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n {/* Use transition to rotate a single icon */}\n {isMobile ? <IcMoreHorizontal /> : open ? <IcLeft /> : <IcRight />}\n </Button>\n );\n}\n\n/**\n * Scrollable container for sidebar content\n */\nexport function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"content\"\n className={classNames(\n 'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Groups related menu items together\n */\nexport function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group\"\n className={classNames(\n 'relative flex w-full min-w-0 flex-col group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-2',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Label for a group.\n */\nexport function SidebarGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-sidebar=\"group-label\"\n className={classNames(\n 'flex h-input shrink-0 items-center overflow-hidden px-2 text-xs select-none font-medium uppercase text-muted-foreground outline-none ring-ring transition-[height,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:!h-0 group-data-[collapsible=icon]:min-h-0 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Content wrapper for a group\n */\nexport function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-sidebar=\"group-content\" className={classNames('w-full body-sm', className)} {...props} />;\n}\n\n/**\n * Container for menu items\n */\nexport function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return <ul data-sidebar=\"menu\" className={classNames('flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\n/**\n * Single menu item wrapper\n */\nexport function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-sidebar=\"menu-item\"\n className={classNames(\n 'group/menu-item relative list-none group-data-[collapsible=icon]:[&>*:not([data-sidebar=menu-button])]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Extra action button that appears on the right side of menu items\n */\nexport function SidebarMenuAction({\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Only show on hover */\n showOnHover?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-action\"\n className={classNames(\n 'absolute top-0 right-0 btn btn-ghost h-input',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\n/**\n * Shows a number badge on menu items. Auto-formats large numbers.\n */\nexport function SidebarMenuBadge({\n className,\n number,\n ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n /** The count to display */\n number: number | bigint;\n}) {\n return (\n <div\n data-sidebar=\"menu-badge\"\n className={classNames(\n 'absolute pointer-events-none top-0 right-0 font-light h-input select-none flex items-center justify-center body-sm tabular-nums',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n >\n {/* Format the number */}\n {new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(number)}\n </div>\n );\n}\n\n/**\n * Nested submenu container\n */\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-sidebar=\"menu-sub\"\n className={classNames('ms-2 flex min-w-0 flex-col', 'group-data-[collapsible=icon]:hidden', className)}\n {...props}\n />\n );\n}\n\n/**\n * Submenu item wrapper\n */\nexport function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li className={classNames('list-none ms-0', className)} {...props} />;\n}\n\nexport const sidebarMenuButtonClasses =\n 'btn-selected rounded-none border-0 justify-start w-full group-data-[collapsible=icon]:!rounded-md group-data-[collapsible=icon]:justify-center';\n\n// Common interaction logic for SidebarMenuButton and SidebarMenuSubButton\n/**\n * Main menu button. Pass isActive for current page.\n */\nexport function SidebarMenuButton({\n isActive = false,\n className,\n children,\n icon: Icon,\n ...props\n}: Omit<React.ComponentProps<typeof Button>, 'children'> & {\n /** Mark as currently active page */\n icon?: CtxIcon;\n isActive?: boolean;\n children?: React.ReactNode;\n}) {\n const { isMobile, state } = useSidebar();\n\n return (\n <TooltipTrigger isDisabled={isMobile || state !== 'collapsed'}>\n <Button\n size={state === 'collapsed' ? 'icon' : undefined}\n data-sidebar=\"menu-button\"\n {...(isActive && { 'data-selected': true })}\n className={classNames(\n 'peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input',\n sidebarMenuButtonClasses,\n className\n )}\n {...props}\n >\n {Icon && <Icon />}\n {state !== 'collapsed' && children}\n </Button>\n <Tooltip placement=\"right\">\n <span className=\"flex items-center gap-2\">{children}</span>\n </Tooltip>\n </TooltipTrigger>\n );\n}\n\n/**\n * Button for submenu items\n */\nexport function SidebarMenuSubButton({\n isActive,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n isActive?: boolean;\n}) {\n return (\n <button\n data-sidebar=\"menu-sub-button\"\n data-active={isActive}\n className={classNames(sidebarMenuButtonClasses, className)}\n {...props}\n />\n );\n}\n\n/**\n * Sticky header at the top of the sidebar. Displays a square logo slot aligned with the outlet header.\n */\nexport function SidebarHeader({\n className,\n logo,\n children,\n showTrigger = true,\n ...props\n}: React.ComponentProps<'div'> & {\n /** Square logo/icon to display */\n logo?: React.ReactNode;\n showTrigger?: boolean;\n}) {\n return (\n <div\n data-sidebar=\"header\"\n className={classNames(\n 'flex items-center h-header select-none shrink-0 border-b px-2 gap-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',\n className\n )}\n {...props}\n >\n {logo && <div className=\"flex items-center justify-center size-input shrink-0\">{logo}</div>}\n {children && <div className=\"flex-1 min-w-0 group-data-[collapsible=icon]:hidden\">{children}</div>}\n {showTrigger && (\n <SidebarTrigger className={'hidden bg-elevation-1 lg:flex lg:absolute lg:-right-4 lg:z-50'} />\n )}\n </div>\n );\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n * <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * <SidebarOutletContent><Outlet/></SidebarOutletContent>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'flex flex-col flex-1 overflow-auto')} {...props} />;\n}\n\nexport function SidebarOutletContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'flex-1 overflow-auto')} {...props} />;\n}\n\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav className={classNames('flex items-center h-header bg-elevation-1 p-2 border-b', className)} {...props} />\n );\n}\n"],"names":["SIDEBAR_KEYBOARD_SHORTCUT","SidebarContext","createContext","useSidebar","context","use","SidebarProvider","defaultOpen","openProp","setOpenProp","className","style","children","props","isMobile","useIsMobile","openMobile","setOpenMobile","useState","_open","_setOpen","open","setOpen","useCallback","value","openState","toggleSidebar","useEffect","handleKeyDown","event","state","contextValue","useMemo","jsx","classNames","Sidebar","side","variant","collapsible","DialogTrigger","DialogOverlay","DialogContent","jsxs","SidebarTrigger","onClick","Button","IcMoreHorizontal","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","sidebarMenuButtonClasses","SidebarMenuButton","isActive","Icon","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarHeader","logo","showTrigger","SidebarOutlet","SidebarOutletContent","SidebarOutletHeader"],"mappings":"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"}
|