@kubetail/ui 2.0.6 → 2.2.0
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.
- package/dist/elements/button.cjs +1 -1
- package/dist/elements/button.cjs.map +1 -1
- package/dist/elements/button.js +12 -10
- package/dist/elements/button.js.map +1 -1
- package/dist/elements/calendar.cjs +1 -1
- package/dist/elements/calendar.cjs.map +1 -1
- package/dist/elements/calendar.js +10 -8
- package/dist/elements/calendar.js.map +1 -1
- package/dist/elements/card.cjs +1 -1
- package/dist/elements/card.cjs.map +1 -1
- package/dist/elements/card.js +33 -31
- package/dist/elements/card.js.map +1 -1
- package/dist/elements/checkbox.cjs +1 -1
- package/dist/elements/checkbox.cjs.map +1 -1
- package/dist/elements/checkbox.js +12 -10
- package/dist/elements/checkbox.js.map +1 -1
- package/dist/elements/dialog.cjs +1 -1
- package/dist/elements/dialog.cjs.map +1 -1
- package/dist/elements/dialog.js +42 -40
- package/dist/elements/dialog.js.map +1 -1
- package/dist/elements/dropdown-menu.cjs +1 -1
- package/dist/elements/dropdown-menu.cjs.map +1 -1
- package/dist/elements/dropdown-menu.js +74 -72
- package/dist/elements/dropdown-menu.js.map +1 -1
- package/dist/elements/form.cjs +1 -1
- package/dist/elements/form.cjs.map +1 -1
- package/dist/elements/form.js +55 -53
- package/dist/elements/form.js.map +1 -1
- package/dist/elements/input.cjs +1 -1
- package/dist/elements/input.cjs.map +1 -1
- package/dist/elements/input.js +8 -6
- package/dist/elements/input.js.map +1 -1
- package/dist/elements/label.cjs +1 -1
- package/dist/elements/label.cjs.map +1 -1
- package/dist/elements/label.js +9 -7
- package/dist/elements/label.js.map +1 -1
- package/dist/elements/link.cjs +2 -0
- package/dist/elements/link.cjs.map +1 -0
- package/dist/elements/link.d.ts +47 -0
- package/dist/elements/link.js +51 -0
- package/dist/elements/link.js.map +1 -0
- package/dist/elements/link.stories.d.ts +25 -0
- package/dist/elements/link.test.d.ts +1 -0
- package/dist/elements/pagination.cjs +1 -1
- package/dist/elements/pagination.cjs.map +1 -1
- package/dist/elements/pagination.js +43 -41
- package/dist/elements/pagination.js.map +1 -1
- package/dist/elements/popover.cjs +1 -1
- package/dist/elements/popover.cjs.map +1 -1
- package/dist/elements/popover.js +19 -17
- package/dist/elements/popover.js.map +1 -1
- package/dist/elements/search-box.cjs +1 -1
- package/dist/elements/search-box.cjs.map +1 -1
- package/dist/elements/search-box.js +16 -14
- package/dist/elements/search-box.js.map +1 -1
- package/dist/elements/select.cjs +1 -1
- package/dist/elements/select.cjs.map +1 -1
- package/dist/elements/select.js +58 -56
- package/dist/elements/select.js.map +1 -1
- package/dist/elements/separator.cjs +1 -1
- package/dist/elements/separator.cjs.map +1 -1
- package/dist/elements/separator.js +9 -7
- package/dist/elements/separator.js.map +1 -1
- package/dist/elements/sheet.cjs +1 -1
- package/dist/elements/sheet.cjs.map +1 -1
- package/dist/elements/sheet.js +41 -39
- package/dist/elements/sheet.js.map +1 -1
- package/dist/elements/sidebar.cjs +1 -1
- package/dist/elements/sidebar.cjs.map +1 -1
- package/dist/elements/sidebar.js +196 -194
- package/dist/elements/sidebar.js.map +1 -1
- package/dist/elements/skeleton.cjs +1 -1
- package/dist/elements/skeleton.cjs.map +1 -1
- package/dist/elements/skeleton.js +8 -6
- package/dist/elements/skeleton.js.map +1 -1
- package/dist/elements/spinner.cjs +1 -1
- package/dist/elements/spinner.cjs.map +1 -1
- package/dist/elements/spinner.js +12 -11
- package/dist/elements/spinner.js.map +1 -1
- package/dist/elements/switch.cjs +2 -0
- package/dist/elements/switch.cjs.map +1 -0
- package/dist/elements/switch.d.ts +3 -0
- package/dist/elements/switch.js +20 -0
- package/dist/elements/switch.js.map +1 -0
- package/dist/elements/switch.stories.d.ts +15 -0
- package/dist/elements/switch.test.d.ts +0 -0
- package/dist/elements/table.cjs +1 -1
- package/dist/elements/table.cjs.map +1 -1
- package/dist/elements/table.js +39 -37
- package/dist/elements/table.js.map +1 -1
- package/dist/elements/tabs.cjs +1 -1
- package/dist/elements/tabs.cjs.map +1 -1
- package/dist/elements/tabs.js +22 -20
- package/dist/elements/tabs.js.map +1 -1
- package/dist/elements/tooltip.cjs +1 -1
- package/dist/elements/tooltip.cjs.map +1 -1
- package/dist/elements/tooltip.js +16 -14
- package/dist/elements/tooltip.js.map +1 -1
- package/dist/hooks/use-mobile.cjs +1 -1
- package/dist/hooks/use-mobile.cjs.map +1 -1
- package/dist/hooks/use-mobile.js +11 -9
- package/dist/hooks/use-mobile.js.map +1 -1
- package/dist/lib/utils.cjs +1 -1
- package/dist/lib/utils.cjs.map +1 -1
- package/dist/lib/utils.js +7 -5
- package/dist/lib/utils.js.map +1 -1
- package/package.json +42 -29
- /package/dist/_virtual/{rolldown:runtime.cjs → _rolldown/runtime.cjs} +0 -0
|
@@ -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(`../hooks/use-mobile.cjs`),s=require(`./separator.cjs`),c=require(`./sheet.cjs`);let l=require(`react/jsx-runtime`),u=require(`@radix-ui/react-slot`),d=require(`class-variance-authority`),f=require(`lucide-react`),p=require(`react`);var m=`sidebar_state`,h=3600*24*7,g=`16rem`,_=`18rem`,v=`3rem`,y=`b`,b=(0,p.createContext)(null);function x(){let e=(0,p.useContext)(b);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function S({defaultOpen:e=!0,open:r,onOpenChange:i,className:a,style:s,children:c,...u}){let d=o.useIsMobile(),[f,_]=(0,p.useState)(!1),[x,S]=(0,p.useState)(e),C=r??x,w=(0,p.useCallback)(e=>{let t=typeof e==`function`?e(C):e;i?i(t):S(t),document.cookie=`${m}=${t}; path=/; max-age=${h}`},[i,C]),T=(0,p.useCallback)(()=>d?_(e=>!e):w(e=>!e),[d,w,_]);(0,p.useEffect)(()=>{let e=e=>{e.key===y&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),T())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[T]);let E=C?`expanded`:`collapsed`,D=(0,p.useMemo)(()=>({state:E,open:C,setOpen:w,isMobile:d,openMobile:f,setOpenMobile:_,toggleSidebar:T}),[E,C,w,d,f,_,T]);return(0,l.jsx)(b.Provider,{value:D,children:(0,l.jsx)(n.TooltipProvider,{delayDuration:0,children:(0,l.jsx)(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":g,"--sidebar-width-icon":v,...s},className:t.cn(`group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full`,a),...u,children:c})})})}function C({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o}){let{isMobile:s,state:u,openMobile:d,setOpenMobile:f}=x();return r===`none`?(0,l.jsx)(`div`,{"data-slot":`sidebar`,className:t.cn(`bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col`,i),...o,children:a}):s?(0,l.jsx)(c.Sheet,{open:d,onOpenChange:f,...o,children:(0,l.jsxs)(c.SheetContent,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden`,style:{"--sidebar-width":_},side:e,children:[(0,l.jsxs)(c.SheetHeader,{className:`sr-only`,children:[(0,l.jsx)(c.SheetTitle,{children:`Sidebar`}),(0,l.jsx)(c.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 text-sidebar-foreground hidden md:block`,"data-state":u,"data-collapsible":u===`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`,className:t.cn(`fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex`,e===`left`?`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`:`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,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),...o,children:(0,l.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm`,children:a})})]})}function w({className:e,onClick:n,...r}){let{toggleSidebar:a}=x();return(0,l.jsxs)(i.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,size:`icon`,className:t.cn(`size-7`,e),onClick:e=>{n?.(e),a()},...r,children:[(0,l.jsx)(f.PanelLeftIcon,{}),(0,l.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]})}function T({className:e,...n}){let{toggleSidebar:r}=x();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(`hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,`hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full`,`[[data-side=left][data-collapsible=offcanvas]_&]:-right-2`,`[[data-side=right][data-collapsible=offcanvas]_&]:-left-2`,e),...n})}function E({className:e,...n}){return(0,l.jsx)(`main`,{"data-slot":`sidebar-inset`,className:t.cn(`bg-background relative flex w-full flex-1 flex-col`,`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 D({className:e,...n}){return(0,l.jsx)(a.Input,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:t.cn(`bg-background h-8 w-full shadow-none`,e),...n})}function O({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 k({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 A({className:e,...n}){return(0,l.jsx)(s.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:t.cn(`bg-sidebar-border mx-2 w-auto`,e),...n})}function j({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:t.cn(`flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...n})}function M({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 N({className:e,asChild:n=!1,...r}){return(0,l.jsx)(n?u.Slot:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:t.cn(`text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,e),...r})}function P({className:e,asChild:n=!1,...r}){return(0,l.jsx)(n?u.Slot:`button`,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:t.cn(`text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`group-data-[collapsible=icon]:hidden`,e),...r})}function F({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 I({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 L({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 R=(0,d.cva)(`peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0`,{variants:{variant:{default:`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},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 z({asChild:e=!1,isActive:r=!1,variant:i=`default`,size:a=`default`,tooltip:o,className:s,...c}){let d=e?u.Slot:`button`,{isMobile:f,state:p}=x(),m=(0,l.jsx)(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":a,"data-active":r,className:t.cn(R({variant:i,size:a}),s),...c});return o?(0,l.jsxs)(n.Tooltip,{children:[(0,l.jsx)(n.TooltipTrigger,{asChild:!0,children:m}),(0,l.jsx)(n.TooltipContent,{side:`right`,align:`center`,hidden:p!==`collapsed`||f,...typeof o==`string`?{children:o}:o})]}):m}function B({className:e,asChild:n=!1,showOnHover:r=!1,...i}){return(0,l.jsx)(n?u.Slot:`button`,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:t.cn(`text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,r&&`peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0`,e),...i})}function V({className:e,...n}){return(0,l.jsx)(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:t.cn(`text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none`,`peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,e),...n})}function H({className:e,showIcon:n=!1,...i}){let a=(0,p.useMemo)(()=>`${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 U({className:e,...n}){return(0,l.jsx)(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:t.cn(`border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5`,`group-data-[collapsible=icon]:hidden`,e),...n})}function W({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 G({asChild:e=!1,size:n=`md`,isActive:r=!1,className:i,...a}){return(0,l.jsx)(e?u.Slot:`a`,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":n,"data-active":r,className:t.cn(`text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0`,`data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground`,n===`sm`&&`text-xs`,n===`md`&&`text-sm`,`group-data-[collapsible=icon]:hidden`,i),...a})}exports.Sidebar=C,exports.SidebarContent=j,exports.SidebarFooter=k,exports.SidebarGroup=M,exports.SidebarGroupAction=P,exports.SidebarGroupContent=F,exports.SidebarGroupLabel=N,exports.SidebarHeader=O,exports.SidebarInput=D,exports.SidebarInset=E,exports.SidebarMenu=I,exports.SidebarMenuAction=B,exports.SidebarMenuBadge=V,exports.SidebarMenuButton=z,exports.SidebarMenuItem=L,exports.SidebarMenuSkeleton=H,exports.SidebarMenuSub=U,exports.SidebarMenuSubButton=G,exports.SidebarMenuSubItem=W,exports.SidebarProvider=S,exports.SidebarRail=T,exports.SidebarSeparator=A,exports.SidebarTrigger=w,exports.useSidebar=x;
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../_virtual/_rolldown/runtime.cjs`);const e=require(`../lib/utils.cjs`),t=require(`./tooltip.cjs`),n=require(`./skeleton.cjs`),r=require(`./button.cjs`),i=require(`./input.cjs`),a=require(`../hooks/use-mobile.cjs`),o=require(`./separator.cjs`),s=require(`./sheet.cjs`);let c=require(`react/jsx-runtime`),l=require(`@radix-ui/react-slot`),u=require(`class-variance-authority`),d=require(`lucide-react`),f=require(`react`);var p=`sidebar_state`,m=3600*24*7,h=`16rem`,g=`18rem`,_=`3rem`,v=`b`,y=(0,f.createContext)(null);function b(){let e=(0,f.useContext)(y);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function x({defaultOpen:n=!0,open:r,onOpenChange:i,className:o,style:s,children:l,...u}){let d=a.useIsMobile(),[g,b]=(0,f.useState)(!1),[x,S]=(0,f.useState)(n),C=r??x,w=(0,f.useCallback)(e=>{let t=typeof e==`function`?e(C):e;i?i(t):S(t),document.cookie=`${p}=${t}; path=/; max-age=${m}`},[i,C]),T=(0,f.useCallback)(()=>d?b(e=>!e):w(e=>!e),[d,w,b]);(0,f.useEffect)(()=>{let e=e=>{e.key===v&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),T())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[T]);let E=C?`expanded`:`collapsed`,D=(0,f.useMemo)(()=>({state:E,open:C,setOpen:w,isMobile:d,openMobile:g,setOpenMobile:b,toggleSidebar:T}),[E,C,w,d,g,b,T]);return(0,c.jsx)(y.Provider,{value:D,children:(0,c.jsx)(t.TooltipProvider,{delayDuration:0,children:(0,c.jsx)(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":h,"--sidebar-width-icon":_,...s},className:e.cn(`group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full`,o),...u,children:l})})})}function S({side:t=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o}){let{isMobile:l,state:u,openMobile:d,setOpenMobile:f}=b();return r===`none`?(0,c.jsx)(`div`,{"data-slot":`sidebar`,className:e.cn(`bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col`,i),...o,children:a}):l?(0,c.jsx)(s.Sheet,{open:d,onOpenChange:f,...o,children:(0,c.jsxs)(s.SheetContent,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden`,style:{"--sidebar-width":g},side:t,children:[(0,c.jsxs)(s.SheetHeader,{className:`sr-only`,children:[(0,c.jsx)(s.SheetTitle,{children:`Sidebar`}),(0,c.jsx)(s.SheetDescription,{children:`Displays the mobile sidebar.`})]}),(0,c.jsx)(`div`,{className:`flex h-full w-full flex-col`,children:a})]})}):(0,c.jsxs)(`div`,{className:`group peer text-sidebar-foreground hidden md:block`,"data-state":u,"data-collapsible":u===`collapsed`?r:``,"data-variant":n,"data-side":t,"data-slot":`sidebar`,children:[(0,c.jsx)(`div`,{"data-slot":`sidebar-gap`,className:e.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,c.jsx)(`div`,{"data-slot":`sidebar-container`,className:e.cn(`fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex`,t===`left`?`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`:`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,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),...o,children:(0,c.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm`,children:a})})]})}function C({className:t,onClick:n,...i}){let{toggleSidebar:a}=b();return(0,c.jsxs)(r.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,size:`icon`,className:e.cn(`size-7`,t),onClick:e=>{n?.(e),a()},...i,children:[(0,c.jsx)(d.PanelLeftIcon,{}),(0,c.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]})}function w({className:t,...n}){let{toggleSidebar:r}=b();return(0,c.jsx)(`button`,{type:`button`,"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:r,title:`Toggle Sidebar`,className:e.cn(`hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,`hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full`,`[[data-side=left][data-collapsible=offcanvas]_&]:-right-2`,`[[data-side=right][data-collapsible=offcanvas]_&]:-left-2`,t),...n})}function T({className:t,...n}){return(0,c.jsx)(`main`,{"data-slot":`sidebar-inset`,className:e.cn(`bg-background relative flex w-full flex-1 flex-col`,`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`,t),...n})}function E({className:t,...n}){return(0,c.jsx)(i.Input,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:e.cn(`bg-background h-8 w-full shadow-none`,t),...n})}function D({className:t,...n}){return(0,c.jsx)(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:e.cn(`flex flex-col gap-2 p-2`,t),...n})}function O({className:t,...n}){return(0,c.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:e.cn(`flex flex-col gap-2 p-2`,t),...n})}function k({className:t,...n}){return(0,c.jsx)(o.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:e.cn(`bg-sidebar-border mx-2 w-auto`,t),...n})}function A({className:t,...n}){return(0,c.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:e.cn(`flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,t),...n})}function j({className:t,...n}){return(0,c.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:e.cn(`relative flex w-full min-w-0 flex-col p-2`,t),...n})}function M({className:t,asChild:n=!1,...r}){return(0,c.jsx)(n?l.Slot:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:e.cn(`text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r})}function N({className:t,asChild:n=!1,...r}){return(0,c.jsx)(n?l.Slot:`button`,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:e.cn(`text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`group-data-[collapsible=icon]:hidden`,t),...r})}function P({className:t,...n}){return(0,c.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:e.cn(`w-full text-sm`,t),...n})}function F({className:t,...n}){return(0,c.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:e.cn(`flex w-full min-w-0 flex-col gap-1`,t),...n})}function I({className:t,...n}){return(0,c.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:e.cn(`group/menu-item relative`,t),...n})}var L=(0,u.cva)(`peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0`,{variants:{variant:{default:`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},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 R({asChild:n=!1,isActive:r=!1,variant:i=`default`,size:a=`default`,tooltip:o,className:s,...u}){let d=n?l.Slot:`button`,{isMobile:f,state:p}=b(),m=(0,c.jsx)(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":a,"data-active":r,className:e.cn(L({variant:i,size:a}),s),...u});return o?(0,c.jsxs)(t.Tooltip,{children:[(0,c.jsx)(t.TooltipTrigger,{asChild:!0,children:m}),(0,c.jsx)(t.TooltipContent,{side:`right`,align:`center`,hidden:p!==`collapsed`||f,...typeof o==`string`?{children:o}:o})]}):m}function z({className:t,asChild:n=!1,showOnHover:r=!1,...i}){return(0,c.jsx)(n?l.Slot:`button`,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:e.cn(`text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,r&&`peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0`,t),...i})}function B({className:t,...n}){return(0,c.jsx)(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:e.cn(`text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none`,`peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,t),...n})}function V({className:t,showIcon:r=!1,...i}){let a=(0,f.useMemo)(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return(0,c.jsxs)(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:e.cn(`flex h-8 items-center gap-2 rounded-md px-2`,t),...i,children:[r&&(0,c.jsx)(n.Skeleton,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),(0,c.jsx)(n.Skeleton,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":a}})]})}function H({className:t,...n}){return(0,c.jsx)(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:e.cn(`border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5`,`group-data-[collapsible=icon]:hidden`,t),...n})}function U({className:t,...n}){return(0,c.jsx)(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:e.cn(`group/menu-sub-item relative`,t),...n})}function W({asChild:t=!1,size:n=`md`,isActive:r=!1,className:i,...a}){return(0,c.jsx)(t?l.Slot:`a`,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":n,"data-active":r,className:e.cn(`text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0`,`data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground`,n===`sm`&&`text-xs`,n===`md`&&`text-sm`,`group-data-[collapsible=icon]:hidden`,i),...a})}exports.Sidebar=S,exports.SidebarContent=A,exports.SidebarFooter=O,exports.SidebarGroup=j,exports.SidebarGroupAction=N,exports.SidebarGroupContent=P,exports.SidebarGroupLabel=M,exports.SidebarHeader=D,exports.SidebarInput=E,exports.SidebarInset=T,exports.SidebarMenu=F,exports.SidebarMenuAction=z,exports.SidebarMenuBadge=B,exports.SidebarMenuButton=R,exports.SidebarMenuItem=I,exports.SidebarMenuSkeleton=V,exports.SidebarMenuSub=H,exports.SidebarMenuSubButton=W,exports.SidebarMenuSubItem=U,exports.SidebarProvider=x,exports.SidebarRail=w,exports.SidebarSeparator=k,exports.SidebarTrigger=C,exports.useSidebar=b;
|
|
2
2
|
//# sourceMappingURL=sidebar.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.cjs","names":[],"sources":["../../src/elements/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/elements/tooltip';\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 = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = 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] = 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 // eslint-disable-next-line\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // 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 = useCallback(\n () => (isMobile ? setOpenMobile((val) => !val) : setOpen((val) => !val)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\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 has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | '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('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', 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 data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>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 text-sidebar-foreground hidden 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 className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating 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=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\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\"\n className={cn('size-7', className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\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 'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\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 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\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 'bg-background relative flex w-full flex-1 flex-col',\n '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('bg-background h-8 w-full 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('bg-sidebar-border mx-2 w-auto', 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 '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 asChild = false,\n ...props\n}: React.ComponentProps<'div'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupAction({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\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 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\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_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(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 asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n const tooltipProps =\n typeof tooltip === 'string'\n ? {\n children: tooltip,\n }\n : tooltip;\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n className,\n )}\n {...props}\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 'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\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 = useMemo(() => `${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 'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n '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 asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\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 { Slot } from '@radix-ui/react-slot';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { Button } from '@/elements/button';\nimport { Input } from '@/elements/input';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport { cn } from '@/lib/utils';\nimport { Separator } from '@/elements/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/elements/sheet';\nimport { Skeleton } from '@/elements/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/elements/tooltip';\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 = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = 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] = 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 // eslint-disable-next-line\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // 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 = useCallback(\n () => (isMobile ? setOpenMobile((val) => !val) : setOpen((val) => !val)),\n [isMobile, setOpen, setOpenMobile],\n );\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\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 has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | '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('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', 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 data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>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 text-sidebar-foreground hidden 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 className={cn(\n 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating 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=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\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\"\n className={cn('size-7', className)}\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\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 'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',\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 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\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 'bg-background relative flex w-full flex-1 flex-col',\n '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('bg-background h-8 w-full 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('bg-sidebar-border mx-2 w-auto', 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 '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 asChild = false,\n ...props\n}: React.ComponentProps<'div'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupAction({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\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 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\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_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(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 asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n const tooltipProps =\n typeof tooltip === 'string'\n ? {\n children: tooltip,\n }\n : tooltip;\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n className,\n )}\n {...props}\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 'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\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 = useMemo(() => `${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 'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',\n '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 asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\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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"}
|