@kubetail/ui 3.0.0-rc2 → 3.0.0-rc3

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.
Files changed (5) hide show
  1. package/dist/elements/sidebar.cjs +1 -1
  2. package/dist/elements/sidebar.cjs.map +1 -1
  3. package/dist/elements/sidebar.js +3 -3
  4. package/dist/elements/sidebar.js.map +1 -1
  5. package/package.json +1 -1
package/dist/elements/sidebar.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../lib/utils.cjs`),n=require(`./tooltip.cjs`),r=require(`./skeleton.cjs`),i=require(`./button.cjs`),a=require(`./input.cjs`),o=require(`./separator.cjs`),s=require(`./sheet.cjs`),c=require(`../hooks/use-mobile.cjs`);let l=require(`react/jsx-runtime`),u=require(`class-variance-authority`),d=require(`react`);d=e.__toESM(d,1);let f=require(`@base-ui/react/merge-props`),p=require(`@base-ui/react/use-render`),m=require(`lucide-react`);var h=`sidebar_state`,g=3600*24*7,_=`16rem`,v=`18rem`,y=`3rem`,b=`b`,x=d.createContext(null);function S(){let e=d.useContext(x);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function C({defaultOpen:e=!0,open:n,onOpenChange:r,className:i,style:a,children:o,...s}){let u=c.useIsMobile(),[f,p]=d.useState(!1),[m,v]=d.useState(e),S=n??m,C=d.useCallback(e=>{let t=typeof e==`function`?e(S):e;r?r(t):v(t),document.cookie=`${h}=${t}; path=/; max-age=${g}`},[r,S]),w=d.useCallback(()=>u?p(e=>!e):C(e=>!e),[u,C,p]);d.useEffect(()=>{let e=e=>{e.key===b&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),w())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[w]);let T=S?`expanded`:`collapsed`,E=d.useMemo(()=>({state:T,open:S,setOpen:C,isMobile:u,openMobile:f,setOpenMobile:p,toggleSidebar:w}),[T,S,C,u,f,p,w]);return(0,l.jsx)(x.Provider,{value:E,children:(0,l.jsx)(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":_,"--sidebar-width-icon":y,...a},className:t.cn(`group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar`,i),...s,children:o})})}function w({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,dir:o,...c}){let{isMobile:u,state:d,openMobile:f,setOpenMobile:p}=S();return r===`none`?(0,l.jsx)(`div`,{"data-slot":`sidebar`,className:t.cn(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...c,children:a}):u?(0,l.jsx)(s.Sheet,{open:f,onOpenChange:p,...c,children:(0,l.jsxs)(s.SheetContent,{dir:o,"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden`,style:{"--sidebar-width":v},side:e,children:[(0,l.jsxs)(s.SheetHeader,{className:`sr-only`,children:[(0,l.jsx)(s.SheetTitle,{children:`Sidebar`}),(0,l.jsx)(s.SheetDescription,{children:`Displays the mobile sidebar.`})]}),(0,l.jsx)(`div`,{className:`flex h-full w-full flex-col`,children:a})]})}):(0,l.jsxs)(`div`,{className:`group peer hidden text-sidebar-foreground md:block`,"data-state":d,"data-collapsible":d===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[(0,l.jsx)(`div`,{"data-slot":`sidebar-gap`,className:t.cn(`relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear`,`group-data-[collapsible=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)}),(0,l.jsx)(`div`,{"data-slot":`sidebar-container`,"data-side":e,className:t.cn(`fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex`,n===`floating`||n===`inset`?`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l`,i),...c,children:(0,l.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border`,children:a})})]})}function T({className:e,onClick:n,...r}){let{toggleSidebar:a}=S();return(0,l.jsxs)(i.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,size:`icon-sm`,className:t.cn(e),onClick:e=>{n?.(e),a()},...r,children:[(0,l.jsx)(m.PanelLeftIcon,{className:`cn-rtl-flip`}),(0,l.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]})}function E({className:e,...n}){let{toggleSidebar:r}=S();return(0,l.jsx)(`button`,{type:`button`,"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:r,title:`Toggle Sidebar`,className:t.cn(`absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,`group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar`,`[[data-side=left][data-collapsible=offcanvas]_&]:-right-2`,`[[data-side=right][data-collapsible=offcanvas]_&]:-left-2`,e),...n})}function D({className:e,...n}){return(0,l.jsx)(`main`,{"data-slot":`sidebar-inset`,className:t.cn(`relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2`,e),...n})}function O({className:e,...n}){return(0,l.jsx)(a.Input,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:t.cn(`h-8 w-full bg-background shadow-none`,e),...n})}function k({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:t.cn(`flex flex-col gap-2 p-2`,e),...n})}function A({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:t.cn(`flex flex-col gap-2 p-2`,e),...n})}function j({className:e,...n}){return(0,l.jsx)(o.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:t.cn(`mx-2 w-auto bg-sidebar-border`,e),...n})}function M({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:t.cn(`no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...n})}function N({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:t.cn(`relative flex w-full min-w-0 flex-col p-2`,e),...n})}function P({className:e,render:n,...r}){return(0,p.useRender)({defaultTagName:`div`,props:(0,f.mergeProps)({className:t.cn(`flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,e)},r),render:n,state:{slot:`sidebar-group-label`,sidebar:`group-label`}})}function F({className:e,render:n,...r}){return(0,p.useRender)({defaultTagName:`button`,props:(0,f.mergeProps)({className:t.cn(`absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0`,e)},r),render:n,state:{slot:`sidebar-group-action`,sidebar:`group-action`}})}function I({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:t.cn(`w-full text-sm`,e),...n})}function L({className:e,...n}){return(0,l.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:t.cn(`flex w-full min-w-0 flex-col gap-0`,e),...n})}function R({className:e,...n}){return(0,l.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:t.cn(`group/menu-item relative`,e),...n})}var z=(0,u.cva)(`peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate`,{variants:{variant:{default:`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]`},size:{default:`h-8 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}});function B({render:e,isActive:r=!1,variant:i=`default`,size:a=`default`,tooltip:o,className:s,...c}){let{isMobile:u,state:d}=S(),m=(0,p.useRender)({defaultTagName:`button`,props:(0,f.mergeProps)({className:t.cn(z({variant:i,size:a}),s)},c),render:o?(0,l.jsx)(n.TooltipTrigger,{render:e}):e,state:{slot:`sidebar-menu-button`,sidebar:`menu-button`,size:a,active:r}});return o?(0,l.jsxs)(n.Tooltip,{children:[m,(0,l.jsx)(n.TooltipContent,{side:`right`,align:`center`,hidden:d!==`collapsed`||u,...typeof o==`string`?{children:o}:o})]}):m}function V({className:e,render:n,showOnHover:r=!1,...i}){return(0,p.useRender)({defaultTagName:`button`,props:(0,f.mergeProps)({className:t.cn(`absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0`,r&&`group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0`,e)},i),render:n,state:{slot:`sidebar-menu-action`,sidebar:`menu-action`}})}function H({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:t.cn(`pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground`,e),...n})}function U({className:e,showIcon:n=!1,...i}){let[a]=d.useState(()=>`${Math.floor(Math.random()*40)+50}%`);return(0,l.jsxs)(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:t.cn(`flex h-8 items-center gap-2 rounded-md px-2`,e),...i,children:[n&&(0,l.jsx)(r.Skeleton,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),(0,l.jsx)(r.Skeleton,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":a}})]})}function W({className:e,...n}){return(0,l.jsx)(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:t.cn(`mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden`,e),...n})}function G({className:e,...n}){return(0,l.jsx)(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:t.cn(`group/menu-sub-item relative`,e),...n})}function K({render:e,size:n=`md`,isActive:r=!1,className:i,...a}){return(0,p.useRender)({defaultTagName:`a`,props:(0,f.mergeProps)({className:t.cn(`flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground`,i)},a),render:e,state:{slot:`sidebar-menu-sub-button`,sidebar:`menu-sub-button`,size:n,active:r}})}exports.Sidebar=w,exports.SidebarContent=M,exports.SidebarFooter=A,exports.SidebarGroup=N,exports.SidebarGroupAction=F,exports.SidebarGroupContent=I,exports.SidebarGroupLabel=P,exports.SidebarHeader=k,exports.SidebarInput=O,exports.SidebarInset=D,exports.SidebarMenu=L,exports.SidebarMenuAction=V,exports.SidebarMenuBadge=H,exports.SidebarMenuButton=B,exports.SidebarMenuItem=R,exports.SidebarMenuSkeleton=U,exports.SidebarMenuSub=W,exports.SidebarMenuSubButton=K,exports.SidebarMenuSubItem=G,exports.SidebarProvider=C,exports.SidebarRail=E,exports.SidebarSeparator=j,exports.SidebarTrigger=T,exports.useSidebar=S;
1
+ "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.cjs`),t=require(`../lib/utils.cjs`),n=require(`./tooltip.cjs`),r=require(`./skeleton.cjs`),i=require(`./button.cjs`),a=require(`./input.cjs`),o=require(`./separator.cjs`),s=require(`./sheet.cjs`),c=require(`../hooks/use-mobile.cjs`);let l=require(`react/jsx-runtime`),u=require(`class-variance-authority`),d=require(`react`);d=e.__toESM(d,1);let f=require(`@base-ui/react/merge-props`),p=require(`@base-ui/react/use-render`),m=require(`lucide-react`);var h=`sidebar_state`,g=3600*24*7,_=`16rem`,v=`18rem`,y=`3rem`,b=`b`,x=d.createContext(null);function S(){let e=d.useContext(x);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function C({defaultOpen:e=!0,open:n,onOpenChange:r,className:i,style:a,children:o,...s}){let u=c.useIsMobile(),[f,p]=d.useState(!1),[m,v]=d.useState(e),S=n??m,C=d.useCallback(e=>{let t=typeof e==`function`?e(S):e;r?r(t):v(t),document.cookie=`${h}=${t}; path=/; max-age=${g}`},[r,S]),w=d.useCallback(()=>u?p(e=>!e):C(e=>!e),[u,C,p]);d.useEffect(()=>{let e=e=>{e.key===b&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),w())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[w]);let T=S?`expanded`:`collapsed`,E=d.useMemo(()=>({state:T,open:S,setOpen:C,isMobile:u,openMobile:f,setOpenMobile:p,toggleSidebar:w}),[T,S,C,u,f,p,w]);return(0,l.jsx)(x.Provider,{value:E,children:(0,l.jsx)(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":_,"--sidebar-width-icon":y,...a},className:t.cn(`group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar`,i),...s,children:o})})}function w({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,dir:o,...c}){let{isMobile:u,state:d,openMobile:f,setOpenMobile:p}=S();return r===`none`?(0,l.jsx)(`div`,{"data-slot":`sidebar`,className:t.cn(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...c,children:a}):u?(0,l.jsx)(s.Sheet,{open:f,onOpenChange:p,...c,children:(0,l.jsxs)(s.SheetContent,{dir:o,"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden`,style:{"--sidebar-width":v},side:e,children:[(0,l.jsxs)(s.SheetHeader,{className:`sr-only`,children:[(0,l.jsx)(s.SheetTitle,{children:`Sidebar`}),(0,l.jsx)(s.SheetDescription,{children:`Displays the mobile sidebar.`})]}),(0,l.jsx)(`div`,{className:`flex h-full w-full flex-col`,children:a})]})}):(0,l.jsxs)(`div`,{className:`group peer hidden text-sidebar-foreground md:block`,"data-state":d,"data-collapsible":d===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[(0,l.jsx)(`div`,{"data-slot":`sidebar-gap`,className:t.cn(`relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear`,`group-data-[collapsible=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)}),(0,l.jsx)(`div`,{"data-slot":`sidebar-container`,"data-side":e,className:t.cn(`fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex`,n===`floating`||n===`inset`?`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l`,i),...c,children:(0,l.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border`,children:a})})]})}function T({className:e,onClick:n,...r}){let{toggleSidebar:a}=S();return(0,l.jsxs)(i.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,size:`icon-sm`,className:t.cn(`hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground`,e),onClick:e=>{n?.(e),a()},...r,children:[(0,l.jsx)(m.PanelLeftIcon,{className:`cn-rtl-flip`}),(0,l.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]})}function E({className:e,...n}){let{toggleSidebar:r}=S();return(0,l.jsx)(`button`,{type:`button`,"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:r,title:`Toggle Sidebar`,className:t.cn(`absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,`group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar`,`[[data-side=left][data-collapsible=offcanvas]_&]:-right-2`,`[[data-side=right][data-collapsible=offcanvas]_&]:-left-2`,e),...n})}function D({className:e,...n}){return(0,l.jsx)(`main`,{"data-slot":`sidebar-inset`,className:t.cn(`relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2`,e),...n})}function O({className:e,...n}){return(0,l.jsx)(a.Input,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:t.cn(`h-8 w-full bg-background shadow-none`,e),...n})}function k({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:t.cn(`flex flex-col gap-2 p-2`,e),...n})}function A({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:t.cn(`flex flex-col gap-2 p-2`,e),...n})}function j({className:e,...n}){return(0,l.jsx)(o.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:t.cn(`mx-2 w-auto bg-sidebar-border`,e),...n})}function M({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:t.cn(`no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...n})}function N({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:t.cn(`relative flex w-full min-w-0 flex-col p-2`,e),...n})}function P({className:e,render:n,...r}){return(0,p.useRender)({defaultTagName:`div`,props:(0,f.mergeProps)({className:t.cn(`flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,e)},r),render:n,state:{slot:`sidebar-group-label`,sidebar:`group-label`}})}function F({className:e,render:n,...r}){return(0,p.useRender)({defaultTagName:`button`,props:(0,f.mergeProps)({className:t.cn(`absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0`,e)},r),render:n,state:{slot:`sidebar-group-action`,sidebar:`group-action`}})}function I({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:t.cn(`w-full text-sm`,e),...n})}function L({className:e,...n}){return(0,l.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:t.cn(`flex w-full min-w-0 flex-col gap-1`,e),...n})}function R({className:e,...n}){return(0,l.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:t.cn(`group/menu-item relative`,e),...n})}var z=(0,u.cva)(`peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate`,{variants:{variant:{default:`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]`},size:{default:`h-8 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}});function B({render:e,isActive:r=!1,variant:i=`default`,size:a=`default`,tooltip:o,className:s,...c}){let{isMobile:u,state:d}=S(),m=(0,p.useRender)({defaultTagName:`button`,props:(0,f.mergeProps)({className:t.cn(z({variant:i,size:a}),s)},c),render:o?(0,l.jsx)(n.TooltipTrigger,{render:e}):e,state:{slot:`sidebar-menu-button`,sidebar:`menu-button`,size:a,active:r}});return o?(0,l.jsxs)(n.Tooltip,{children:[m,(0,l.jsx)(n.TooltipContent,{side:`right`,align:`center`,hidden:d!==`collapsed`||u,...typeof o==`string`?{children:o}:o})]}):m}function V({className:e,render:n,showOnHover:r=!1,...i}){return(0,p.useRender)({defaultTagName:`button`,props:(0,f.mergeProps)({className:t.cn(`absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0`,r&&`group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0`,e)},i),render:n,state:{slot:`sidebar-menu-action`,sidebar:`menu-action`}})}function H({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:t.cn(`pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground`,e),...n})}function U({className:e,showIcon:n=!1,...i}){let[a]=d.useState(()=>`${Math.floor(Math.random()*40)+50}%`);return(0,l.jsxs)(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:t.cn(`flex h-8 items-center gap-2 rounded-md px-2`,e),...i,children:[n&&(0,l.jsx)(r.Skeleton,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),(0,l.jsx)(r.Skeleton,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":a}})]})}function W({className:e,...n}){return(0,l.jsx)(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:t.cn(`mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden`,e),...n})}function G({className:e,...n}){return(0,l.jsx)(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:t.cn(`group/menu-sub-item relative`,e),...n})}function K({render:e,size:n=`md`,isActive:r=!1,className:i,...a}){return(0,p.useRender)({defaultTagName:`a`,props:(0,f.mergeProps)({className:t.cn(`flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground`,i)},a),render:e,state:{slot:`sidebar-menu-sub-button`,sidebar:`menu-sub-button`,size:n,active:r}})}exports.Sidebar=w,exports.SidebarContent=M,exports.SidebarFooter=A,exports.SidebarGroup=N,exports.SidebarGroupAction=F,exports.SidebarGroupContent=I,exports.SidebarGroupLabel=P,exports.SidebarHeader=k,exports.SidebarInput=O,exports.SidebarInset=D,exports.SidebarMenu=L,exports.SidebarMenuAction=V,exports.SidebarMenuBadge=H,exports.SidebarMenuButton=B,exports.SidebarMenuItem=R,exports.SidebarMenuSkeleton=U,exports.SidebarMenuSub=W,exports.SidebarMenuSubButton=K,exports.SidebarMenuSubItem=G,exports.SidebarProvider=C,exports.SidebarRail=E,exports.SidebarSeparator=j,exports.SidebarTrigger=T,exports.useSidebar=S;
2
2
  //# sourceMappingURL=sidebar.cjs.map
package/dist/elements/sidebar.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar.cjs","names":[],"sources":["../../src/elements/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/elements/tooltip';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\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\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction 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] = React.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 [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const open = openProp ?? internalOpen;\n const setOpen = React.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 setInternalOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(\n () => (isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.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 = React.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 data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className)}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n dir={dir}\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\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 data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n data-side={side}\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--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 data-slot=\"sidebar-inner\"\n className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon className=\"cn-rtl-flip\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('h-8 w-full bg-background shadow-none', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('mx-2 w-auto bg-sidebar-border', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {\n return useRender({\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-label',\n sidebar: 'group-label',\n },\n });\n}\n\nfunction SidebarGroupAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-action',\n sidebar: 'group-action',\n },\n });\n}\n\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-0', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction SidebarMenuButton({\n render,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n } & VariantProps<typeof sidebarMenuButtonVariants>) {\n const { isMobile, state } = useSidebar();\n const comp = useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props,\n ),\n render: !tooltip ? render : <TooltipTrigger render={render} />,\n state: {\n slot: 'sidebar-menu-button',\n sidebar: 'menu-button',\n size,\n active: isActive,\n },\n });\n\n if (!tooltip) {\n return comp;\n }\n\n const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n showOnHover?: boolean;\n }) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-action',\n sidebar: 'menu-action',\n },\n });\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const [width] = React.useState(() => `${Math.floor(Math.random() * 40) + 50}%`);\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n render,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<'a'> &\n React.ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n }) {\n return useRender({\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-sub-button',\n sidebar: 'menu-sub-button',\n size,\n active: isActive,\n },\n });\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"sidebar.cjs","names":[],"sources":["../../src/elements/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/elements/tooltip';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\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\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction 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] = React.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 [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const open = openProp ?? internalOpen;\n const setOpen = React.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 setInternalOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(\n () => (isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.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 = React.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 data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className)}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n dir={dir}\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\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 data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n data-side={side}\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--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 data-slot=\"sidebar-inner\"\n className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n className={cn('hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground', className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon className=\"cn-rtl-flip\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('h-8 w-full bg-background shadow-none', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('mx-2 w-auto bg-sidebar-border', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'no-scrollbar 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\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {\n return useRender({\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-label',\n sidebar: 'group-label',\n },\n });\n}\n\nfunction SidebarGroupAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-action',\n sidebar: 'group-action',\n },\n });\n}\n\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction SidebarMenuButton({\n render,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n } & VariantProps<typeof sidebarMenuButtonVariants>) {\n const { isMobile, state } = useSidebar();\n const comp = useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props,\n ),\n render: !tooltip ? render : <TooltipTrigger render={render} />,\n state: {\n slot: 'sidebar-menu-button',\n sidebar: 'menu-button',\n size,\n active: isActive,\n },\n });\n\n if (!tooltip) {\n return comp;\n }\n\n const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n showOnHover?: boolean;\n }) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-action',\n sidebar: 'menu-action',\n },\n });\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const [width] = React.useState(() => `${Math.floor(Math.random() * 40) + 50}%`);\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n render,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<'a'> &\n React.ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n }) {\n return useRender({\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-sub-button',\n sidebar: 'menu-sub-button',\n size,\n active: isActive,\n },\n });\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n};\n"],"mappings":"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"}
package/dist/elements/sidebar.js CHANGED
@@ -125,7 +125,7 @@ function j({ className: t, onClick: n, ...r }) {
125
125
  "data-slot": "sidebar-trigger",
126
126
  variant: "ghost",
127
127
  size: "icon-sm",
128
- className: e(t),
128
+ className: e("hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground", t),
129
129
  onClick: (e) => {
130
130
  n?.(e), i();
131
131
  },
@@ -193,7 +193,7 @@ function R({ className: t, ...n }) {
193
193
  return /* @__PURE__ */ m("div", {
194
194
  "data-slot": "sidebar-content",
195
195
  "data-sidebar": "content",
196
- className: e("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", t),
196
+ className: e("no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", t),
197
197
  ...n
198
198
  });
199
199
  }
@@ -239,7 +239,7 @@ function U({ className: t, ...n }) {
239
239
  return /* @__PURE__ */ m("ul", {
240
240
  "data-slot": "sidebar-menu",
241
241
  "data-sidebar": "menu",
242
- className: e("flex w-full min-w-0 flex-col gap-0", t),
242
+ className: e("flex w-full min-w-0 flex-col gap-1", t),
243
243
  ...n
244
244
  });
245
245
  }
package/dist/elements/sidebar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar.js","names":[],"sources":["../../src/elements/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/elements/tooltip';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\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\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction 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] = React.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 [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const open = openProp ?? internalOpen;\n const setOpen = React.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 setInternalOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(\n () => (isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.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 = React.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 data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className)}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n dir={dir}\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\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 data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n data-side={side}\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--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 data-slot=\"sidebar-inner\"\n className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon className=\"cn-rtl-flip\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('h-8 w-full bg-background shadow-none', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('mx-2 w-auto bg-sidebar-border', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {\n return useRender({\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-label',\n sidebar: 'group-label',\n },\n });\n}\n\nfunction SidebarGroupAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-action',\n sidebar: 'group-action',\n },\n });\n}\n\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-0', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction SidebarMenuButton({\n render,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n } & VariantProps<typeof sidebarMenuButtonVariants>) {\n const { isMobile, state } = useSidebar();\n const comp = useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props,\n ),\n render: !tooltip ? render : <TooltipTrigger render={render} />,\n state: {\n slot: 'sidebar-menu-button',\n sidebar: 'menu-button',\n size,\n active: isActive,\n },\n });\n\n if (!tooltip) {\n return comp;\n }\n\n const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n showOnHover?: boolean;\n }) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-action',\n sidebar: 'menu-action',\n },\n });\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const [width] = React.useState(() => `${Math.floor(Math.random() * 40) + 50}%`);\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n render,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<'a'> &\n React.ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n }) {\n return useRender({\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-sub-button',\n sidebar: 'menu-sub-button',\n size,\n active: isActive,\n },\n });\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"sidebar.js","names":[],"sources":["../../src/elements/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/elements/tooltip';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\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\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction 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] = React.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 [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const open = openProp ?? internalOpen;\n const setOpen = React.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 setInternalOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(\n () => (isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.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 = React.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 data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className)}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n dir={dir}\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\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 data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n data-side={side}\n className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--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 data-slot=\"sidebar-inner\"\n className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n className={cn('hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground', className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon className=\"cn-rtl-flip\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n 'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n data-sidebar=\"input\"\n className={cn('h-8 w-full bg-background shadow-none', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-header\"\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-2 p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n data-sidebar=\"separator\"\n className={cn('mx-2 w-auto bg-sidebar-border', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn(\n 'no-scrollbar 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\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group\"\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {\n return useRender({\n defaultTagName: 'div',\n props: mergeProps<'div'>(\n {\n className: cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-label',\n sidebar: 'group-label',\n },\n });\n}\n\nfunction SidebarGroupAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-group-action',\n sidebar: 'group-action',\n },\n });\n}\n\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n data-sidebar=\"group-content\"\n className={cn('w-full text-sm', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-1', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n );\n}\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',\n },\n size: {\n default: 'h-8 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction SidebarMenuButton({\n render,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n } & VariantProps<typeof sidebarMenuButtonVariants>) {\n const { isMobile, state } = useSidebar();\n const comp = useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props,\n ),\n render: !tooltip ? render : <TooltipTrigger render={render} />,\n state: {\n slot: 'sidebar-menu-button',\n sidebar: 'menu-button',\n size,\n active: isActive,\n },\n });\n\n if (!tooltip) {\n return comp;\n }\n\n const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<'button'> &\n React.ComponentProps<'button'> & {\n showOnHover?: boolean;\n }) {\n return useRender({\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-action',\n sidebar: 'menu-action',\n },\n });\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const [width] = React.useState(() => `${Math.floor(Math.random() * 40) + 50}%`);\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n {...props}\n >\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n data-sidebar=\"menu-sub-item\"\n className={cn('group/menu-sub-item relative', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubButton({\n render,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<'a'> &\n React.ComponentProps<'a'> & {\n size?: 'sm' | 'md';\n isActive?: boolean;\n }) {\n return useRender({\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n className,\n ),\n },\n props,\n ),\n render,\n state: {\n slot: 'sidebar-menu-sub-button',\n sidebar: 'menu-sub-button',\n size,\n active: isActive,\n },\n });\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n};\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kubetail/ui",
3
- "version": "v3.0.0-rc2",
3
+ "version": "v3.0.0-rc3",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/kubetail-org/kubetail-ui"