@cryptlex/web-components 6.6.6-alpha01 → 6.6.6-alpha03

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 t,Fragment as C,jsxs as S}from"react/jsx-runtime";import{createContext as O,use as _,useState as v,useCallback as x,useEffect as D,useMemo as I}from"react";import{Button as T}from"./button.js";import{DialogTrigger as B,DialogOverlay as E,DialogContent as z}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{IcLeft as R,IcRight as j}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";const A="/",N=O(null);function h(){const e=_(N);if(!e)throw new Error("useSidebar must be used within a SidebarProvider.");return e}function $({defaultOpen:e=!0,open:a,onOpenChange:n,className:l,style:d,children:o,...c}){const s=L(),[f,b]=v(!1),[M,y]=v(e),p=a??M,m=x(r=>{const u=typeof r=="function"?r(p):r;n?n(u):y(u)},[n,p]),g=x(()=>s?b(r=>!r):m(r=>!r),[s,m,b]);D(()=>{const r=u=>{u.key===A&&(u.metaKey||u.ctrlKey)&&(u.preventDefault(),g())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[g]);const w=p?"expanded":"collapsed",k=I(()=>({state:w,open:p,setOpen:m,isMobile:s,openMobile:f,setOpenMobile:b,toggleSidebar:g}),[w,p,m,s,f,b,g]);return t(N.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",l),...c,children:o})})}function ee({side:e="left",variant:a="sidebar",collapsible:n="offcanvas",className:l,children:d,...o}){const{isMobile:c,state:s,openMobile:f,setOpenMobile:b}=h();return n==="none"?t("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",l),...o,children:d}):c?t(B,{isOpen:f,onOpenChange:b,...o,children:t(E,{children:t(z,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(C,{children:d})})})}):S("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":s,"data-collapsible":s==="collapsed"?n:"","data-variant":a,"data-side":e,children:[t("div",{className:i("relative w-(--sidebar-width) bg-sidebar-background 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"?"p-2 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),...o,children:t("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:d})})]})}function ae({className:e,onClick:a,...n}){const{toggleSidebar:l,open:d}=h();return t(T,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"rounded-full",onClick:o=>{a?.(o),l()},...n,children:d?t(R,{}):t(j,{})})}function te({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 ie({className:e,...a}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col p-2",e),...a})}function ne({className:e,...a}){return t("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),...a})}function re({className:e,...a}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...a})}function oe({className:e,...a}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...a})}function le({className:e,...a}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none",e),...a})}function de({className:e,...a}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input px-1","group-data-[collapsible=icon]:hidden",e),...a})}function se({className:e,number:a,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-300 h-input select-none px-2 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 ue({className:e,...a}){return t("ul",{"data-sidebar":"menu-sub",className:i("mx-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",e),...a})}function ce({className:e,...a}){return t("li",{className:i("list-none ms-0",e),...a})}function be({isActive:e=!1,tooltip:a,className:n,...l}){const{isMobile:d,state:o}=h(),c=t("button",{"data-sidebar":"menu-button","data-selected":e,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 w-full",n),...l});return a?S(G,{children:[c,t(K,{hidden:o!=="collapsed"||d,...a})]}):c}function pe({isActive:e,className:a,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i("-translate-x-px [&>svg]:text-accent-foreground","group-data-[collapsible=icon]:hidden","btn-tab w-full",a),...n})}function fe({className:e,...a}){return t("div",{className:i(e,"w-full overflow-auto"),...a})}export{ee as Sidebar,te as SidebarContent,N as SidebarContext,ie as SidebarGroup,re as SidebarGroupContent,ne as SidebarGroupLabel,oe as SidebarMenu,de as SidebarMenuAction,se as SidebarMenuBadge,be as SidebarMenuButton,le as SidebarMenuItem,ue as SidebarMenuSub,pe as SidebarMenuSubButton,ce as SidebarMenuSubItem,fe as SidebarOutlet,$ as SidebarProvider,ae as SidebarTrigger,h as useSidebar};
1
+ "use client";import{jsx as t,Fragment as C,jsxs as S}from"react/jsx-runtime";import{createContext as O,use as _,useState as v,useCallback as x,useEffect as D,useMemo as I}from"react";import{Button as T}from"./button.js";import{DialogTrigger as B,DialogOverlay as E,DialogContent as z}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{IcLeft as R,IcRight as j}from"./icons.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"./popover.js";const A="/",N=O(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:a,onOpenChange:n,className:l,style:d,children:o,...c}){const s=L(),[f,b]=v(!1),[M,y]=v(e),p=a??M,m=x(r=>{const u=typeof r=="function"?r(p):r;n?n(u):y(u)},[n,p]),g=x(()=>s?b(r=>!r):m(r=>!r),[s,m,b]);D(()=>{const r=u=>{u.key===A&&(u.metaKey||u.ctrlKey)&&(u.preventDefault(),g())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[g]);const w=p?"expanded":"collapsed",k=I(()=>({state:w,open:p,setOpen:m,isMobile:s,openMobile:f,setOpenMobile:b,toggleSidebar:g}),[w,p,m,s,f,b,g]);return t(N.Provider,{value:k,children:t("div",{className:i("group/sidebar-wrapper flex w-full has-[[data-variant=inset]]:bg-sidebar-background",l),...c,children:o})})}function ae({side:e="left",variant:a="sidebar",collapsible:n="offcanvas",className:l,children:d,...o}){const{isMobile:c,state:s,openMobile:f,setOpenMobile:b}=h();return n==="none"?t("div",{className:i("flex h-full w-[--sidebar-width] flex-col bg-sidebar-background text-sidebar-foreground",l),...o,children:d}):c?t(B,{isOpen:f,onOpenChange:b,...o,children:t(E,{children:t(z,{"data-sidebar":"sidebar","data-mobile":"true",className:"w-[--sidebar-width] max-h-svh overflow-auto p-0 [&>button]:hidden",side:"left",children:()=>t(C,{children:d})})})}):S("div",{className:"group peer hidden text-sidebar-foreground md:block","data-state":s,"data-collapsible":s==="collapsed"?n:"","data-variant":a,"data-side":e,children:[t("div",{className:i("relative w-(--sidebar-width) bg-sidebar-background 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"?"p-2 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),...o,children:t("div",{"data-sidebar":"sidebar",className:"flex h-full w-full flex-col bg-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border",children:d})})]})}function te({className:e,onClick:a,...n}){const{toggleSidebar:l,open:d}=h();return t(T,{"data-sidebar":"trigger",variant:"neutral",size:"icon",className:"rounded-full",onClick:o=>{a?.(o),l()},...n,children:d?t(R,{}):t(j,{})})}function ie({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 ne({className:e,...a}){return t("div",{"data-sidebar":"group",className:i("relative flex w-full min-w-0 flex-col p-2",e),...a})}function re({className:e,...a}){return t("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),...a})}function oe({className:e,...a}){return t("div",{"data-sidebar":"group-content",className:i("w-full body-sm",e),...a})}function le({className:e,...a}){return t("ul",{"data-sidebar":"menu",className:i("flex w-full min-w-0 flex-col",e),...a})}function de({className:e,...a}){return t("li",{"data-sidebar":"menu-item",className:i("group/menu-item relative list-none",e),...a})}function se({className:e,...a}){return t("button",{"data-sidebar":"menu-action",className:i("absolute top-0 right-0 btn btn-ghost h-input px-1","group-data-[collapsible=icon]:hidden",e),...a})}function ue({className:e,number:a,...n}){return t("div",{"data-sidebar":"menu-badge",className:i("absolute pointer-events-none top-0 right-0 font-300 h-input select-none px-2 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 ce({className:e,...a}){return t("ul",{"data-sidebar":"menu-sub",className:i("mx-2 flex min-w-0 flex-col border-l border-border","group-data-[collapsible=icon]:hidden",e),...a})}function be({className:e,...a}){return t("li",{className:i("list-none ms-0",e),...a})}function pe({isActive:e=!1,tooltip:a,className:n,...l}){const{isMobile:d,state:o}=h(),c=t("button",{"data-sidebar":"menu-button","data-selected":e,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 w-full",n),...l});return a?S(G,{children:[c,t(K,{hidden:o!=="collapsed"||d,...a})]}):c}function fe({isActive:e,className:a,...n}){return t("button",{"data-sidebar":"menu-sub-button","data-active":e,className:i("-translate-x-px [&>svg]:text-accent-foreground","group-data-[collapsible=icon]:hidden","btn-tab w-full",a),...n})}function me({className:e,...a}){return t("div",{className:i(e,"w-full overflow-auto"),...a})}export{ae as Sidebar,ie as SidebarContent,N as SidebarContext,ne as SidebarGroup,oe as SidebarGroupContent,re as SidebarGroupLabel,le as SidebarMenu,se as SidebarMenuAction,ue as SidebarMenuBadge,pe as SidebarMenuButton,de as SidebarMenuItem,ce as SidebarMenuSub,fe as SidebarMenuSubButton,be as SidebarMenuSubItem,me as SidebarOutlet,ee as SidebarProvider,te 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, 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\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\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 defaultOpen?: boolean;\n open?: boolean;\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-sidebar-background',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nexport function Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating';\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-sidebar-background text-sidebar-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-sidebar-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-sidebar-background 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 ? 'p-2 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-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar, open } = 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 {open ? <IcLeft /> : <IcRight />}\n </Button>\n );\n}\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\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 p-2', className)}\n {...props}\n />\n );\n}\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\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\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\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\nexport function SidebarMenuAction({\n className,\n ...props\n}: React.ComponentProps<'button'> & {\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 px-1',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function SidebarMenuBadge({\n className,\n number,\n ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\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-300 h-input select-none px-2 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\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-sidebar=\"menu-sub\"\n className={classNames(\n 'mx-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\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\nexport function SidebarMenuButton({\n isActive = false,\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n const { isMobile, state } = useSidebar();\n\n const button = (\n <button\n data-sidebar=\"menu-button\"\n data-selected={isActive}\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 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\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(\n '-translate-x-px [&>svg]:text-accent-foreground',\n 'group-data-[collapsible=icon]:hidden',\n 'btn-tab w-full',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\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","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet"],"mappings":"smBASA,MAAMA,EAA4B,IAYrBC,EAAiBC,EAA0C,IAAI,EAErE,SAASC,GAAa,CACzB,MAAMC,EAAUC,EAAIJ,CAAc,EAClC,GAAI,CAACG,EACD,MAAM,IAAI,MAAM,mDAAmD,EAGvE,OAAOA,CACX,CAEO,SAASE,EAAgB,CAC5B,YAAAC,EAAc,GACd,KAAMC,EACN,aAAcC,EACd,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACP,EAIG,CACC,MAAMC,EAAWC,EAAA,EACX,CAACC,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAI5C,CAACC,EAAOC,CAAQ,EAAIF,EAASX,CAAW,EACxCc,EAAOb,GAAYW,EACnBG,EAAUC,EACXC,GAAmD,CAChD,MAAMC,EAAY,OAAOD,GAAU,WAAaA,EAAMH,CAAI,EAAIG,EAC1Df,EACAA,EAAYgB,CAAS,EAErBL,EAASK,CAAS,CAE1B,EACA,CAAChB,EAAaY,CAAI,CAAA,EAIhBK,EAAgBH,EAAY,IACvBT,EAAWG,EAAcI,GAAQ,CAACA,CAAI,EAAIC,EAAQD,GAAQ,CAACA,CAAI,EACvE,CAACP,EAAUQ,EAASL,CAAa,CAAC,EAGrCU,EAAU,IAAM,CACZ,MAAMC,EAAiBC,GAAyB,CACxCA,EAAM,MAAQ7B,IAA8B6B,EAAM,SAAWA,EAAM,WACnEA,EAAM,eAAA,EACNH,EAAA,EAER,EAEA,cAAO,iBAAiB,UAAWE,CAAa,EACzC,IAAM,OAAO,oBAAoB,UAAWA,CAAa,CACpE,EAAG,CAACF,CAAa,CAAC,EAIlB,MAAMI,EAAQT,EAAO,WAAa,YAE5BU,EAAeC,EACjB,KAAO,CACH,MAAAF,EACA,KAAAT,EACA,QAAAC,EACA,SAAAR,EACA,WAAAE,EACA,cAAAC,EACA,cAAAS,CAAA,GAEJ,CAACI,EAAOT,EAAMC,EAASR,EAAUE,EAAYC,EAAeS,CAAa,CAAA,EAG7E,OACIO,EAAChC,EAAe,SAAf,CAAwB,MAAO8B,EAC5B,SAAAE,EAAC,MAAA,CACG,UAAWC,EACP,qFACAxB,CAAA,EAEH,GAAGG,EAEH,SAAAD,CAAA,CAAA,EAET,CAER,CAEO,SAASuB,GAAQ,CACpB,KAAAC,EAAO,OACP,QAAAC,EAAU,UACV,YAAAC,EAAc,YACd,UAAA5B,EACA,SAAAE,EACA,GAAGC,CACP,EAIG,CACC,KAAM,CAAE,SAAAC,EAAU,MAAAgB,EAAO,WAAAd,EAAY,cAAAC,CAAA,EAAkBd,EAAA,EAEvD,OAAImC,IAAgB,OAEZL,EAAC,MAAA,CACG,UAAWC,EACP,yFACAxB,CAAA,EAEH,GAAGG,EAEH,SAAAD,CAAA,CAAA,EAKTE,EAEImB,EAACM,GAAc,OAAQvB,EAAY,aAAcC,EAAgB,GAAGJ,EAChE,SAAAoB,EAACO,EAAA,CACG,SAAAP,EAACQ,EAAA,CACG,eAAa,UACb,cAAY,OACZ,UAAU,oEACV,KAAK,OAEJ,SAAA,SAAS,SAAA7B,CAAA,CAAS,CAAA,CAAA,EAE3B,CAAA,CACJ,EAKJ8B,EAAC,MAAA,CACG,UAAU,qDACV,aAAYZ,EACZ,mBAAkBA,IAAU,YAAcQ,EAAc,GACxD,eAAcD,EACd,YAAWD,EAGX,SAAA,CAAAH,EAAC,MAAA,CACG,UAAWC,EACP,iGACA,yCACA,qCACAG,IAAY,WACN,uFACA,wDAAA,CACV,CAAA,EAEJJ,EAAC,MAAA,CACG,UAAWC,EACP,0GACAE,IAAS,OACH,iFACA,mFAENC,IAAY,WACN,gGACA,0HACN3B,CAAA,EAEH,GAAGG,EAEJ,SAAAoB,EAAC,MAAA,CACG,eAAa,UACb,UAAU,qIAET,SAAArB,CAAA,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAAS+B,GAAe,CAAE,UAAAjC,EAAW,QAAAkC,EAAS,GAAG/B,GAA8C,CAClG,KAAM,CAAE,cAAAa,EAAe,KAAAL,CAAA,EAASlB,EAAA,EAEhC,OACI8B,EAACY,EAAA,CACG,eAAa,UACb,QAAQ,UACR,KAAK,OACL,UAAW,eACX,QAAShB,GAAS,CACde,IAAUf,CAAK,EACfH,EAAA,CACJ,EACC,GAAGb,EAGH,SAAAQ,EAAOY,EAACa,EAAA,CAAA,CAAO,IAAMC,EAAA,CAAA,CAAQ,CAAA,CAAA,CAG1C,CAEO,SAASC,GAAe,CAAE,UAAAtC,EAAW,GAAGG,GAAsC,CACjF,OACIoB,EAAC,MAAA,CACG,eAAa,UACb,UAAWC,EACP,iGACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASoC,GAAa,CAAE,UAAAvC,EAAW,GAAGG,GAAsC,CAC/E,OACIoB,EAAC,MAAA,CACG,eAAa,QACb,UAAWC,EAAW,4CAA6CxB,CAAS,EAC3E,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASqC,GAAkB,CAAE,UAAAxC,EAAW,GAAGG,GAAsC,CACpF,OACIoB,EAAC,MAAA,CACG,eAAa,cACb,UAAWC,EACP,6NACA,kFACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASsC,GAAoB,CAAE,UAAAzC,EAAW,GAAGG,GAAsC,CACtF,OAAOoB,EAAC,MAAA,CAAI,eAAa,gBAAgB,UAAWC,EAAW,iBAAkBxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAC5G,CAEO,SAASuC,GAAY,CAAE,UAAA1C,EAAW,GAAGG,GAAqC,CAC7E,OAAOoB,EAAC,KAAA,CAAG,eAAa,OAAO,UAAWC,EAAW,+BAAgCxB,CAAS,EAAI,GAAGG,CAAA,CAAO,CAChH,CAEO,SAASwC,GAAgB,CAAE,UAAA3C,EAAW,GAAGG,GAAqC,CACjF,OACIoB,EAAC,KAAA,CACG,eAAa,YACb,UAAWC,EAAW,qCAAsCxB,CAAS,EACpE,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASyC,GAAkB,CAC9B,UAAA5C,EACA,GAAGG,CACP,EAEG,CACC,OACIoB,EAAC,SAAA,CACG,eAAa,cACb,UAAWC,EACP,oDACA,uCACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAAS0C,GAAiB,CAC7B,UAAA7C,EACA,OAAA8C,EACA,GAAG3C,CACP,EAEG,CACC,OACIoB,EAAC,MAAA,CACG,eAAa,aACb,UAAWC,EACP,qIACA,uCACAxB,CAAA,EAEH,GAAGG,EAGH,SAAA,IAAI,KAAK,aAAa,UAAU,SAAU,CAAE,YAAa,EAAA,CAAM,EAAE,OAAO2C,CAAM,CAAA,CAAA,CAG3F,CAEO,SAASC,GAAe,CAAE,UAAA/C,EAAW,GAAGG,GAAqC,CAChF,OACIoB,EAAC,KAAA,CACG,eAAa,WACb,UAAWC,EACP,oDACA,uCACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAAS6C,GAAmB,CAAE,UAAAhD,EAAW,GAAGG,GAAqC,CACpF,OAAOoB,EAAC,MAAG,UAAWC,EAAW,iBAAkBxB,CAAS,EAAI,GAAGG,EAAO,CAC9E,CAGO,SAAS8C,GAAkB,CAC9B,SAAAC,EAAW,GACX,QAAAC,EACA,UAAAnD,EACA,GAAGG,CACP,EAGG,CACC,KAAM,CAAE,SAAAC,EAAU,MAAAgB,CAAA,EAAU3B,EAAA,EAEtB2D,EACF7B,EAAC,SAAA,CACG,eAAa,cACb,gBAAe2B,EACf,UAAW1B,EACP,0JACA,iBACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,EAIZ,OAAKgD,IAKAE,EAAA,CACI,SAAA,CAAAD,IACAE,EAAA,CAAQ,OAAQlC,IAAU,aAAehB,EAAW,GAAG+C,CAAA,CAAS,CAAA,EACrE,EAPOC,CASf,CAEO,SAASG,GAAqB,CACjC,SAAAL,EACA,UAAAlD,EACA,GAAGG,CACP,EAEG,CACC,OACIoB,EAAC,SAAA,CACG,eAAa,kBACb,cAAa2B,EACb,UAAW1B,EACP,iDACA,uCACA,iBACAxB,CAAA,EAEH,GAAGG,CAAA,CAAA,CAGhB,CAEO,SAASqD,GAAc,CAAE,UAAAxD,EAAW,GAAGG,GAAsC,CAChF,OAAOoB,EAAC,OAAI,UAAWC,EAAWxB,EAAW,sBAAsB,EAAI,GAAGG,EAAO,CACrF"}
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, 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\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\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 defaultOpen?: boolean;\n open?: boolean;\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-sidebar-background',\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nexport function Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating';\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-sidebar-background text-sidebar-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-sidebar-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-sidebar-background 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 ? 'p-2 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-sidebar-background group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nexport function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar, open } = 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 {open ? <IcLeft /> : <IcRight />}\n </Button>\n );\n}\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\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 p-2', className)}\n {...props}\n />\n );\n}\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\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\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\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\nexport function SidebarMenuAction({\n className,\n ...props\n}: React.ComponentProps<'button'> & {\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 px-1',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function SidebarMenuBadge({\n className,\n number,\n ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\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-300 h-input select-none px-2 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\nexport function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-sidebar=\"menu-sub\"\n className={classNames(\n 'mx-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\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\nexport function SidebarMenuButton({\n isActive = false,\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: React.ComponentProps<typeof Tooltip>;\n}) {\n const { isMobile, state } = useSidebar();\n\n const button = (\n <button\n data-sidebar=\"menu-button\"\n data-selected={isActive}\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 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\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(\n '-translate-x-px [&>svg]:text-accent-foreground',\n 'group-data-[collapsible=icon]:hidden',\n 'btn-tab w-full',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function SidebarOutlet({ className, ...props }: React.ComponentProps<'div'>) {\n return <div className={classNames(className, 'w-full overflow-auto')} {...props} />;\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","IcLeft","IcRight","SidebarContent","SidebarGroup","SidebarGroupLabel","SidebarGroupContent","SidebarMenu","SidebarMenuItem","SidebarMenuAction","SidebarMenuBadge","number","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuButton","isActive","tooltip","button","TooltipTrigger","Tooltip","SidebarMenuSubButton","SidebarOutlet"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import { TooltipTrigger as AriaTooltipTrigger, TooltipProps as AriaTooltipProps } from 'react-aria-components';
2
- declare const TooltipTrigger: typeof AriaTooltipTrigger;
3
- declare const Tooltip: ({ className, offset, ...props }: AriaTooltipProps) => import("react/jsx-runtime").JSX.Element;
1
+ import { Popover } from './popover';
2
+ declare const TooltipTrigger: typeof import('react-aria-components').DialogTrigger;
3
+ declare function Tooltip({ className, offset, ...props }: React.ComponentProps<typeof Popover>): import("react/jsx-runtime").JSX.Element;
4
4
  export { Tooltip, TooltipTrigger };
@@ -1,2 +1,2 @@
1
- import{jsx as a}from"react/jsx-runtime";import{TooltipTrigger as r,Tooltip as m,composeRenderProps as p}from"react-aria-components";import{classNames as n}from"../utilities/theme.js";import"clsx";const f=r,c=({className:o,offset:t=4,...e})=>a(m,{offset:t,className:p(o,i=>n("z-50 overflow-hidden border bg-popover px-3 py-1.5 body-sm text-popover-foreground animate-in 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",i)),...e});export{c as Tooltip,f as TooltipTrigger};
1
+ import{jsx as e}from"react/jsx-runtime";import{composeRenderProps as t}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{PopoverTrigger as s,Popover as c}from"./popover.js";import"clsx";const T=s;function x({className:o,offset:r=4,...p}){return e(c,{offset:r,className:t(o,m=>i("px-3 py-1.5 body-sm",m)),...p})}export{x as Tooltip,T as TooltipTrigger};
2
2
  //# sourceMappingURL=tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../lib/components/tooltip.tsx"],"sourcesContent":["import {\n Tooltip as AriaTooltip,\n TooltipTrigger as AriaTooltipTrigger,\n composeRenderProps,\n type TooltipProps as AriaTooltipProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nconst TooltipTrigger = AriaTooltipTrigger;\nconst Tooltip = ({ className, offset = 4, ...props }: AriaTooltipProps) => (\n <AriaTooltip\n offset={offset}\n className={composeRenderProps(className, className =>\n classNames(\n 'z-50 overflow-hidden border bg-popover px-3 py-1.5 body-sm text-popover-foreground animate-in fade-in-0',\n /* Entering */\n '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 className\n )\n )}\n {...props}\n />\n);\n\nexport { Tooltip, TooltipTrigger };\n"],"names":["TooltipTrigger","AriaTooltipTrigger","Tooltip","className","offset","props","jsx","AriaTooltip","composeRenderProps","classNames"],"mappings":"oMASA,MAAMA,EAAiBC,EACjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KACzCC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,0GAEA,6BAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../lib/components/tooltip.tsx"],"sourcesContent":["import { composeRenderProps } from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { Popover, PopoverTrigger } from './popover';\n\nconst TooltipTrigger = PopoverTrigger;\nfunction Tooltip({ className, offset = 4, ...props }: React.ComponentProps<typeof Popover>) {\n return (\n <Popover\n offset={offset}\n className={composeRenderProps(className, className => classNames('px-3 py-1.5 body-sm', className))}\n {...props}\n />\n );\n}\n\nexport { Tooltip, TooltipTrigger };\n"],"names":["TooltipTrigger","PopoverTrigger","Tooltip","className","offset","props","jsx","Popover","composeRenderProps","classNames"],"mappings":"8NAKA,MAAMA,EAAiBC,EACvB,SAASC,EAAQ,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,GAA+C,CACxF,OACIC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GAAaM,EAAW,sBAAuBN,CAAS,CAAC,EACjG,GAAGE,CAAA,CAAA,CAGhB"}
@@ -1 +1,5 @@
1
1
  export declare function formatNumber(num: number | bigint): string;
2
+ /**
3
+ * @returns A formatted string for the number of bytes
4
+ */
5
+ export declare function formatFilesize(bytes: number): string;
@@ -1,2 +1,2 @@
1
- function t(r){return Intl.NumberFormat().format(r)}export{t as formatNumber};
1
+ function e(r){return Intl.NumberFormat(navigator.language).format(r)}function n(r){return r<1024?`${r} B`:r<1024*1024?`${(r/1024).toFixed(1)} KB`:r<1024*1024*1024?`${(r/(1024*1024)).toFixed(2)} MB`:`${(r/(1024*1024*1024)).toFixed(2)} GB`}export{n as formatFilesize,e as formatNumber};
2
2
  //# sourceMappingURL=numbers.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"numbers.js","sources":["../../lib/utilities/numbers.ts"],"sourcesContent":["export function formatNumber(num: number | bigint) {\n return Intl.NumberFormat().format(num);\n}\n"],"names":["formatNumber","num"],"mappings":"AAAO,SAASA,EAAaC,EAAsB,CAC/C,OAAO,KAAK,eAAe,OAAOA,CAAG,CACzC"}
1
+ {"version":3,"file":"numbers.js","sources":["../../lib/utilities/numbers.ts"],"sourcesContent":["export function formatNumber(num: number | bigint) {\n return Intl.NumberFormat(navigator.language).format(num);\n}\n\n/**\n * @returns A formatted string for the number of bytes\n */\nexport function formatFilesize(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`;\n } else if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(1)} KB`;\n } else if (bytes < 1024 * 1024 * 1024) {\n return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;\n } else {\n return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;\n }\n}\n"],"names":["formatNumber","num","formatFilesize","bytes"],"mappings":"AAAO,SAASA,EAAaC,EAAsB,CAC/C,OAAO,KAAK,aAAa,UAAU,QAAQ,EAAE,OAAOA,CAAG,CAC3D,CAKO,SAASC,EAAeC,EAAuB,CAClD,OAAIA,EAAQ,KACD,GAAGA,CAAK,KACRA,EAAQ,KAAO,KACf,IAAIA,EAAQ,MAAM,QAAQ,CAAC,CAAC,MAC5BA,EAAQ,KAAO,KAAO,KACtB,IAAIA,GAAS,KAAO,OAAO,QAAQ,CAAC,CAAC,MAErC,IAAIA,GAAS,KAAO,KAAO,OAAO,QAAQ,CAAC,CAAC,KAE3D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cryptlex/web-components",
3
- "version": "6.6.6-alpha01",
3
+ "version": "6.6.6-alpha03",
4
4
  "description": "React component library for Cryptlex web applications",
5
5
  "author": "Cryptlex",
6
6
  "type": "module",