@cryptlex/web-components 6.6.17 → 6.6.19
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 a,Fragment as O,jsxs as S}from"react/jsx-runtime";import{createContext as k,use as _,useState as v,useCallback as x,useEffect as I,useMemo as D}from"react";import{Button as T}from"./button.js";import{DialogTrigger as z,DialogOverlay as B,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as K}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as L}from"../utilities/use-mobile.js";import{IcMoreHorizontal as R,IcLeft as j,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";
|
|
1
|
+
"use client";import{jsx as a,Fragment as O,jsxs as S}from"react/jsx-runtime";import{createContext as k,use as _,useState as v,useCallback as x,useEffect as I,useMemo as D}from"react";import{Button as T}from"./button.js";import{DialogTrigger as z,DialogOverlay as B,DialogContent as E}from"./dialog.js";import{TooltipTrigger as G,Tooltip as K}from"./tooltip.js";import{classNames as i}from"../utilities/theme.js";import{useIsMobile as L}from"../utilities/use-mobile.js";import{IcMoreHorizontal as R,IcLeft as j,IcRight as A}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const H="/",N=k(null);function h(){const e=_(N);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function ee({defaultOpen:e=!0,open:t,onOpenChange:n,className:l,style:d,children:r,...s}){const u=L(),[p,b]=v(!1),[M,y]=v(e),f=t??M,m=x(o=>{const c=typeof o=="function"?o(f):o;n?n(c):y(c)},[n,f]),g=x(()=>u?b(o=>!o):m(o=>!o),[u,m,b]);I(()=>{const o=c=>{c.key===H&&(c.metaKey||c.ctrlKey)&&(c.preventDefault(),g())};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[g]);const w=f?"expanded":"collapsed",C=D(()=>({state:w,open:f,setOpen:m,isMobile:u,openMobile:p,setOpenMobile:b,toggleSidebar:g}),[w,f,m,u,p,b,g]);return a(N.Provider,{value:C,children:a("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-elevation-1",l),...s,children:r})})}function te({side:e="left",variant:t="sidebar",collapsible:n="offcanvas",className:l,children:d,...r}){const{isMobile:s,state:u,openMobile:p,setOpenMobile:b}=h();return n==="none"?a("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-elevation-1 text-foreground",l),...r,children:d}):s?a(z,{isOpen:p,onOpenChange:b,...r,children:a(B,{children:a(E,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>a(O,{children:d})})})}):S("div",{className:"group peer hidden text-foreground md:block","data-state":u,"data-collapsible":u==="collapsed"?n:"","data-variant":t,"data-side":e,children:[a("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",t==="floating"?"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]":"group-data-[collapsible=icon]:w-[--sidebar-width-icon]")}),a("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)]",t==="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",l),...r,children:a("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:d})})]})}function ae({className:e,onClick:t,...n}){const{toggleSidebar:l,open:d,isMobile:r}=h();return a(T,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"rounded-full",onClick:s=>{t?.(s),l()},...n,children:r?a(R,{}):d?a(j,{}):a(A,{})})}function ie({className:e,...t}){return a("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),...t})}function ne({className:e,...t}){return a("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col",e),...t})}function oe({className:e,...t}){return a("div",{"data-sidebar":"group-label",className:i("flex h-input shrink-0 items-center px-2 body-sm font-medium text-sidebar-foreground/70 outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-icon [&>svg]:shrink-0","group-data-[collapsible=icon]:-mt-input group-data-[collapsible=icon]:opacity-0",e),...t})}function re({className:e,...t}){return a("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...t})}function le({className:e,...t}){return a("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...t})}function de({className:e,...t}){return a("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none",e),...t})}function se({className:e,...t}){return a("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input","group-data-[collapsible=icon]:hidden",e),...t})}function ue({className:e,number:t,...n}){return a("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(t)})}function ce({className:e,...t}){return a("ul",{"data-sidebar":"menu-sub",className:i("ms-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",e),...t})}function be({className:e,...t}){return a("li",{className:i("list-none ms-0",e),...t})}function fe({isActive:e=!1,tooltip:t,className:n,...l}){const{isMobile:d,state:r}=h(),s=a("button",{"data-sidebar":"menu-button",...e&&{"data-selected":!0},className:i("peer/menu-button group-has-[[data-sidebar=menu-action]]/menu-item:pr-input group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ","btn-tab rounded-none w-full",n),...l});return t?S(G,{children:[s,a(K,{hidden:r!=="collapsed"||d,...t})]}):s}function pe({isActive:e,className:t,...n}){return a("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i("group-data-[collapsible=icon]:hidden","btn-tab rounded-none w-full",t),...n})}function me({className:e,...t}){return a("div",{className:i(e,"w-full overflow-auto"),...t})}function ge({className:e,...t}){return a("nav",{className:i("flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b",e),...t})}export{te as Sidebar,ie as SidebarContent,N as SidebarContext,ne as SidebarGroup,re as SidebarGroupContent,oe as SidebarGroupLabel,le as SidebarMenu,se as SidebarMenuAction,ue as SidebarMenuBadge,fe as SidebarMenuButton,de as SidebarMenuItem,ce as SidebarMenuSub,pe as SidebarMenuSubButton,be as SidebarMenuSubItem,me as SidebarOutlet,ge as SidebarOutletHeader,ee as SidebarProvider,ae as SidebarTrigger,h 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 } 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 = 'offcanvas',\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\"\n 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('relative flex w-full min-w-0 flex-col', className)}\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 body-sm font-medium text-sidebar-foreground/70 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('group/menu-item relative list-none', className)}\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(\n 'ms-2 flex min-w-0 flex-col border-l border-border',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\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\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 tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Mark as currently active page */\n isActive?: boolean;\n /** Tooltip when sidebar is collapsed */\n tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n const { isMobile, state } = useSidebar();\n\n const button = (\n <button\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 group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ',\n 'btn-tab rounded-none w-full',\n className\n )}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n return (\n <TooltipTrigger>\n {button}\n <Tooltip hidden={state !== 'collapsed' || isMobile} {...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('group-data-[collapsible=icon]:hidden', 'btn-tab rounded-none w-full', className)}\n {...props}\n />\n );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n * <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav\n className={classNames(\n 'flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b',\n className\n )}\n {...props}\n />\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","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet","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 } 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 = 'offcanvas',\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\"\n 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('relative flex w-full min-w-0 flex-col', className)}\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 body-sm font-medium text-sidebar-foreground/70 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('group/menu-item relative list-none', className)}\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(\n 'ms-2 flex min-w-0 flex-col border-l border-border',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\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\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 tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n /** Mark as currently active page */\n isActive?: boolean;\n /** Tooltip when sidebar is collapsed */\n tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n const { isMobile, state } = useSidebar();\n\n const button = (\n <button\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 group-data-[collapsible=icon]:!size-icon group-data-[collapsible=icon]:!p-2 ',\n 'btn-tab rounded-none w-full',\n className\n )}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n return (\n <TooltipTrigger>\n {button}\n <Tooltip hidden={state !== 'collapsed' || isMobile} {...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('group-data-[collapsible=icon]:hidden', 'btn-tab rounded-none w-full', className)}\n {...props}\n />\n );\n}\n\n/**\n * The main content area next to the sidebar\n */\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\n}\n\n/**\n *\n * @example Basic usage\n * ```tsx\n * <SidebarOutlet>\n * <SidebarOutletHeader><SidebarTrigger/></SidebarOutletHeader>\n * </SidebarOutlet>\n * ```\n */\nexport function SidebarOutletHeader({ className, ...props }: React.ComponentProps<'nav'>) {\n return (\n <nav\n className={classNames(\n 'flex items-center h-header bg-elevation-1 sticky top-0 z-50 p-2 border-b',\n className\n )}\n {...props}\n />\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","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet","SidebarOutletHeader"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare
|
|
3
|
-
declare function Tooltip({ className, offset, ...props }: React.ComponentProps<typeof
|
|
1
|
+
import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from 'react-aria-components';
|
|
2
|
+
declare function TooltipTrigger({ delay, closeDelay, ...props }: React.ComponentProps<typeof AriaTooltipTrigger>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function Tooltip({ className, offset, ...props }: React.ComponentProps<typeof AriaTooltip>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export { Tooltip, TooltipTrigger };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{Tooltip as n,composeRenderProps as r,TooltipTrigger as m}from"react-aria-components";import{classNames as d}from"../utilities/theme.js";import"clsx";function f({delay:t=0,closeDelay:o=0,...e}){return i(m,{delay:t,closeDelay:o,...e})}function u({className:t,offset:o=4,...e}){return i(n,{offset:o,className:r(t,a=>d("z-50 border bg-elevation-1 text-foreground outline-none max-w-lg rounded-md","data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2","px-3 py-1.5 body-sm",a)),...e})}export{u as Tooltip,f as TooltipTrigger};
|
|
2
2
|
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../../lib/components/tooltip.tsx"],"sourcesContent":["import { composeRenderProps
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../../lib/components/tooltip.tsx"],"sourcesContent":["import {\n Tooltip as AriaTooltip,\n TooltipTrigger as AriaTooltipTrigger,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nfunction TooltipTrigger({ delay = 0, closeDelay = 0, ...props }: React.ComponentProps<typeof AriaTooltipTrigger>) {\n return <AriaTooltipTrigger delay={delay} closeDelay={closeDelay} {...props} />;\n}\n\nfunction Tooltip({ className, offset = 4, ...props }: React.ComponentProps<typeof AriaTooltip>) {\n return (\n <AriaTooltip\n offset={offset}\n className={composeRenderProps(className, className =>\n classNames(\n 'z-50 border bg-elevation-1 text-foreground outline-none max-w-lg rounded-md',\n /* Entering */\n 'data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95',\n // /* Exiting */\n 'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n /* Placement */\n 'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n 'px-3 py-1.5 body-sm',\n className\n )\n )}\n {...props}\n />\n );\n}\n\nexport { Tooltip, TooltipTrigger };\n"],"names":["TooltipTrigger","delay","closeDelay","props","jsx","AriaTooltipTrigger","Tooltip","className","offset","AriaTooltip","composeRenderProps","classNames"],"mappings":"oMAQA,SAASA,EAAe,CAAE,MAAAC,EAAQ,EAAG,WAAAC,EAAa,EAAG,GAAGC,GAA0D,CAC9G,OAAOC,EAACC,EAAA,CAAmB,MAAAJ,EAAc,WAAAC,EAAyB,GAAGC,EAAO,CAChF,CAEA,SAASG,EAAQ,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGL,GAAmD,CAC5F,OACIC,EAACK,EAAA,CACG,OAAAD,EACA,UAAWE,EAAmBH,EAAWA,GACrCI,EACI,8EAEA,kFAEA,kFAEA,kLACA,sBACAJ,CAAA,CACJ,EAEH,GAAGJ,CAAA,CAAA,CAGhB"}
|