admin-ui-starter-kit 0.1.0

package/dist/showcase/assets/layout-sidebar-jdQnYDiT.js

@@ -0,0 +1,224 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{cr as n,dr as r,gr as i,lr as a,sr as o,t as s,vr as c}from"./example-DPfw-R7_.js";import{t as l}from"./brain-dD_ppLUa.js";import{t as u}from"./chart-column-6l5wIZ0h.js";import{t as d}from"./chevrons-up-down-Be6eciau.js";import{n as f,r as p,t as m}from"./header-notifications-BWla1yhM.js";import{t as h}from"./credit-card--5vg7bQy.js";import{t as g}from"./external-link-DJNGkjZ0.js";import{t as _}from"./house-DhIReDt8.js";import{t as v}from"./inbox-5sFkO7gC.js";import{_ as y,c as b,d as ee,f as x,g as S,h as C,l as w,m as T,n as E,o as te,p as D,r as ne,s as re,t as O,u as k,v as ie}from"./sidebar.context-CXTHS3vn.js";import{t as ae}from"./package-BIa1hPVQ.js";import{t as oe}from"./settings-Duj7gAZe.js";import{t as se}from"./shield-C22sWOf4.js";import{t as ce}from"./users-CxKZ7gt8.js";import{D as le,a as ue,k as de,r as A}from"./index-B-Z7p0So.js";import{t as fe}from"./smart-card-50WN9sCI.js";import{a as pe,c as me,i as he,l as ge,o as _e,r as ve,t as ye}from"./dropdown-menu-Cqv6D7Sb.js";import{t as be}from"./separator-CZ_sPWQj.js";import{t as j}from"./skeleton-Dmp4eC1A.js";import{t as xe}from"./scroll-area-BTVLd58j.js";import{n as M,t as Se}from"./page-header-Cwf9DuhD.js";import{a as Ce,i as we,n as Te,r as Ee,t as De}from"./sheet-BMabZ_Gj.js";var Oe=A(`life-buoy`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m4.93 4.93 4.24 4.24`,key:`1ymg45`}],[`path`,{d:`m14.83 9.17 4.24-4.24`,key:`1cb5xl`}],[`path`,{d:`m14.83 14.83 4.24 4.24`,key:`q42g0n`}],[`path`,{d:`m9.17 14.83-4.24 4.24`,key:`bqpfvv`}],[`circle`,{cx:`12`,cy:`12`,r:`4`,key:`4exip2`}]]),ke=A(`sliders-horizontal`,[[`path`,{d:`M10 5H3`,key:`1qgfaw`}],[`path`,{d:`M12 19H3`,key:`yhmn1j`}],[`path`,{d:`M14 3v4`,key:`1sua03`}],[`path`,{d:`M16 17v4`,key:`1q0r14`}],[`path`,{d:`M21 12h-9`,key:`1o4lsq`}],[`path`,{d:`M21 19h-5`,key:`1rlt1p`}],[`path`,{d:`M21 5h-7`,key:`1oszz2`}],[`path`,{d:`M8 10v4`,key:`tgpxqk`}],[`path`,{d:`M8 12H3`,key:`a7s4jb`}]]),N=A(`store`,[[`path`,{d:`M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5`,key:`slp6dd`}],[`path`,{d:`M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244`,key:`o0xfot`}],[`path`,{d:`M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05`,key:`wn3emo`}]]),P=t(de(),1),F=ue();function I(e){if(e.startsWith(`#/`))return e.slice(1).split(`?`)[0]?.split(`#`)[0]||`/`;try{return new URL(e,`http://local.invalid`).pathname}catch{return e}}function L(e,t){let n=I(e);return n===t||n.startsWith(t+`/`)||n.startsWith(t+`?`)}function R(e){return e.label??e.title??``}function z(e,t){let n=R(e);return e.handle??e.href??(typeof n==`string`||typeof n==`number`?n:`nav-${t??0}`)}function B({value:e,size:t=`default`}){return(0,F.jsx)(a,{variant:`secondary`,className:c(`ml-auto rounded-full tabular-nums text-sidebar-foreground`,t===`small`?`h-4 min-w-4 px-1.5`:`h-5 min-w-5 px-1.5`),children:e})}function V(e,t,n){return e&&n&&n[e]!=null?n[e]:t}function H({icon:e,iconMap:t={},size:n=20,className:r=`size-4`,...i}){if(!e)return null;if(typeof e==`string`){let n=t[e];return n?(0,F.jsx)(n,{className:r}):null}return P.isValidElement(e)?P.cloneElement(e,{className:c(r,e.props.className),...i}):typeof e==`function`||typeof e==`object`&&e&&`$$typeof`in e?(0,F.jsx)(e,{className:r,width:n,height:n,...i}):null}function U(e,t,n,r,i){return e({href:t.href,children:n,className:r,active:i,disabled:t.disabled||!t.href,external:t.external})}var Ae=`18rem`;r(`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`}});var je={mobileTitle:`Sidebar`,mobileDescription:`Displays the mobile sidebar.`};function W({side:e=`left`,variant:t=`sidebar`,collapsible:n=`offcanvas`,className:r,surfaceClassName:i,children:a,strings:o,...s}){let{isMobile:l,state:u,openMobile:d,setOpenMobile:f}=E(),p=le(je,o);return n===`none`?(0,F.jsx)(`div`,{"data-slot":`sidebar`,className:c(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i,r),...s,children:a}):l?(0,F.jsx)(De,{open:d,onOpenChange:f,...s,children:(0,F.jsxs)(Te,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:c(`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden`,i),style:{"--sidebar-width":Ae},side:e,children:[(0,F.jsxs)(we,{className:`sr-only`,children:[(0,F.jsx)(Ce,{children:p.mobileTitle}),(0,F.jsx)(Ee,{children:p.mobileDescription})]}),(0,F.jsx)(`div`,{className:`flex h-full w-full flex-col`,children:a})]})}):(0,F.jsx)(`div`,{className:`group peer sticky top-0 hidden h-full border-r border-solid border-border text-sidebar-foreground md:block`,"data-state":u,"data-collapsible":u===`collapsed`?n:``,"data-variant":t,"data-side":e,"data-slot":`sidebar`,children:(0,F.jsx)(`div`,{className:c(`inset-y-0 z-10 hidden h-full w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex`,e===`left`?`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`:`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,t===`floating`||t===`inset`?`px-2 py-3 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`,r),...s,children:(0,F.jsx)(`div`,{"data-sidebar":`sidebar`,className:c(`sidebar flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm`,i),children:a})})})}function G({item:e}){return(0,F.jsx)(i,{tag:`span`,className:`truncate text-inherit`,children:R(e)})}function K({navigationByGroups:e,currentUrl:t=`/`,iconMap:n={},liveBadges:r,renderLink:a,LinkComponent:o,emptySlot:s,renderItem:l,className:u}){let d=M({renderLink:a,LinkComponent:o}),f=e=>!!e&&L(t,I(e)),p=e=>{let n=-1,r=-1;for(let i=0;i<e.length;i+=1){let a=e[i],o=a?.href?I(a.href):``;o&&L(t,o)&&o.length>r&&(r=o.length,n=i)}return n},m=e=>!!e?.some(e=>f(e.href)||m(e.children)),h=(e,t=0,a=0)=>{let o=!!e.children?.length,s=f(e.href),u=o?m(e.children):!1,h=s||u,g=V(e.handle,e.badge,r),_=R(e),v={depth:t,active:s,expanded:h,badge:g,renderLink:d};if(l)return(0,F.jsx)(P.Fragment,{children:l(e,v)},z(e,a));if(o){let t=p(e.children??[]),o=(0,F.jsxs)(F.Fragment,{children:[!!e.icon&&(0,F.jsx)(H,{icon:e.icon,iconMap:n,className:`size-4`,"aria-hidden":`true`}),(0,F.jsx)(G,{item:e}),!!g&&(0,F.jsx)(B,{value:g})]});return(0,F.jsxs)(T,{children:[(0,F.jsx)(D,{isActive:h,render:e.href&&!e.disabled?U(d,e,o,void 0,h):void 0,tooltip:{children:_},disabled:e.disabled,className:c(`h-7 font-medium`,s&&`bg-sidebar-accent text-sidebar-foreground`,!s&&u&&`bg-sidebar-accent/45 text-sidebar-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:o}),!!h&&(0,F.jsx)(C,{className:`gap-0.5`,children:e.children?.map((e,n)=>{let a=n===t||f(e.href),o=V(e.handle,e.badge,r),s=R(e),l=(0,F.jsxs)(F.Fragment,{children:[typeof s==`string`||typeof s==`number`?(0,F.jsx)(i,{tag:`span`,className:`min-w-0 flex-1 truncate text-inherit`,children:s}):s,!!o&&(0,F.jsx)(B,{value:o,size:`small`})]});return(0,F.jsx)(y,{children:(0,F.jsx)(S,{render:e.href&&!e.disabled?U(d,e,l,void 0,a):void 0,className:c(`w-full`,a&&`font-semibold text-sidebar-foreground`),children:l})},z(e,n))})})]},z(e,a))}let b=(0,F.jsxs)(F.Fragment,{children:[!!e.icon&&(0,F.jsx)(H,{icon:e.icon,iconMap:n,className:`size-4`,"aria-hidden":`true`}),(0,F.jsx)(G,{item:e}),!!g&&(0,F.jsx)(B,{value:g})]});return(0,F.jsx)(T,{children:(0,F.jsx)(D,{isActive:s,render:e.href&&!e.disabled?U(d,e,b,void 0,s):void 0,tooltip:{children:_},disabled:e.disabled,className:c(`h-7 font-medium`,s&&`bg-sidebar-accent text-sidebar-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:b})},z(e,a))},g=Object.entries(e).filter(([,e])=>e.length>0);return g.length===0?s??null:(0,F.jsx)(`div`,{className:u,children:g.map(([e,t],n)=>(0,F.jsxs)(P.Fragment,{children:[(0,F.jsxs)(b,{className:`px-2 py-0`,children:[!e.startsWith(`_`)&&(0,F.jsx)(k,{children:e}),(0,F.jsx)(x,{className:`gap-0.5`,children:t.map((e,t)=>h(e,0,t))})]}),n<g.length-1&&(0,F.jsx)(ie,{className:`!mx-auto !my-1.5 !w-11/12 overflow-hidden px-4`})]},e))})}function Me({logo:e,collapsedLogo:t=null,className:n}){let{state:r}=E(),i=r===`collapsed`?t:e;return i?(0,F.jsx)(`div`,{className:c(`min-w-0`,n),children:i}):null}function q({items:e,label:t,currentUrl:n=`/`,iconMap:r={},liveBadges:a,renderLink:o,LinkComponent:s,className:l}){let u=M({renderLink:o,LinkComponent:s});return(0,F.jsxs)(b,{className:c(`group-data-[collapsible=icon]:p-0`,l),children:[!!t&&(0,F.jsx)(k,{children:t}),(0,F.jsx)(w,{children:(0,F.jsx)(x,{className:`gap-0.5`,children:e.map((e,t)=>{let o=!!e.href&&L(n,I(e.href)),s=V(e.handle,e.badge,a),l=R(e),d=(0,F.jsxs)(F.Fragment,{children:[!!e.icon&&(0,F.jsx)(H,{icon:e.icon,iconMap:r,className:`size-4`,"aria-hidden":`true`}),typeof l==`string`||typeof l==`number`?(0,F.jsx)(i,{tag:`span`,className:`truncate text-inherit`,children:l}):l,!!s&&(0,F.jsx)(B,{value:s}),!!e.external&&(0,F.jsx)(g,{className:`ml-auto size-3 opacity-50`,"aria-hidden":`true`})]});return(0,F.jsx)(T,{children:(0,F.jsx)(D,{isActive:o,render:e.href&&!e.disabled?U(u,e,d,void 0,o):void 0,className:c(`h-7 font-medium text-sidebar-foreground/70 hover:text-sidebar-foreground`,o&&`bg-sidebar-accent text-sidebar-foreground`),tooltip:{children:l},disabled:e.disabled,children:d})},z(e,t))})})})]})}var Ne={label:`Workspace`,select:`Select workspace`};function Pe({logo:e,collapsedLogo:t,workspaceLinks:n,renderLink:r,LinkComponent:a,strings:o,contentClassName:s}){let l=le(Ne,o),u=M({renderLink:r,LinkComponent:a}),{state:f}=E(),p=f===`collapsed`;return(0,F.jsx)(x,{children:(0,F.jsx)(T,{children:(0,F.jsxs)(ye,{children:[(0,F.jsxs)(ge,{render:(0,F.jsx)(D,{size:`lg`,className:`data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground`}),children:[(0,F.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:[p?t??e:e,!p&&(0,F.jsx)(i,{tag:`span`,size:`xs`,className:`sr-only`,children:l.select})]}),!p&&(0,F.jsx)(d,{className:`ml-auto size-4 shrink-0`,"aria-hidden":`true`})]}),(0,F.jsx)(ve,{className:c(`min-w-56`,s),align:`start`,side:`right`,sideOffset:8,children:(0,F.jsxs)(he,{children:[(0,F.jsx)(_e,{children:(0,F.jsx)(i,{weight:`semibold`,children:l.label})}),(0,F.jsx)(me,{}),n.map(e=>{let t=(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)(e.icon??g,{className:`size-4 shrink-0`,"aria-hidden":`true`}),(0,F.jsx)(i,{tag:`span`,size:`xs`,className:`text-inherit`,children:e.label})]});return(0,F.jsx)(pe,{render:u({href:e.url,external:e.external??!0,children:null,className:`flex items-center gap-2`}),children:t},e.url)})]})})]})})})}function Fe({navigationGroups:e,footerNavItems:t=[],footerLabel:n,logo:r,collapsedLogo:i,workspaceLinks:a=[],workspaceStrings:o,workspaceContentClassName:s,headerClassName:l,logoClassName:u,iconMap:d,currentUrl:f=`/`,liveBadges:p,renderLink:m,LinkComponent:h,loading:g,collapsible:_=`icon`,variant:v=`sidebar`,side:y=`left`,className:b,surfaceClassName:x,contentClassName:S,slots:C,renderItem:w}){let T=t.length>0||!!C?.footer,E=g||!e,D=a.length>0;return(0,F.jsxs)(W,{collapsible:_,variant:v,side:y,className:c(`h-svh`,b),surfaceClassName:x,children:[C?.header??(!!r&&(0,F.jsx)(ee,{className:l,children:D?(0,F.jsx)(Pe,{logo:r,collapsedLogo:i,workspaceLinks:a,strings:o,contentClassName:s,renderLink:m,LinkComponent:h}):(0,F.jsx)(Me,{logo:r,collapsedLogo:i,className:u})})),(0,F.jsx)(te,{className:S,children:(0,F.jsxs)(xe,{className:`h-full pr-1.5 pt-4`,children:[C?.beforeNavigation,E?C?.loading??(0,F.jsx)(Ie,{}):(0,F.jsx)(K,{navigationByGroups:e,currentUrl:f,iconMap:d,liveBadges:p,renderLink:m,LinkComponent:h,emptySlot:C?.empty,renderItem:w}),C?.afterNavigation]})}),T&&(0,F.jsx)(re,{children:C?.footer??(0,F.jsx)(q,{items:t,label:n,currentUrl:f,iconMap:d,liveBadges:p,renderLink:m,LinkComponent:h})})]})}function Ie(){let e=[9,3,4,2,1];return(0,F.jsx)(F.Fragment,{children:e.map((t,n)=>(0,F.jsxs)(P.Fragment,{children:[(0,F.jsx)(b,{className:`px-2 py-0`,children:(0,F.jsx)(x,{className:`gap-0.5`,children:Array.from({length:t},(e,t)=>(0,F.jsx)(T,{children:(0,F.jsxs)(`div`,{className:`flex h-8 items-center gap-2 px-2`,children:[(0,F.jsx)(j,{className:`h-4 w-4 shrink-0 rounded`}),(0,F.jsx)(j,{className:`h-3.5 rounded`,style:{width:`${60+(n*7+t*13)%40}px`}})]})},t))})}),n<e.length-1&&(0,F.jsx)(ie,{className:`!mx-auto !my-1 !w-11/12 overflow-hidden px-4`})]},n))})}function Le({item:e}){return(0,F.jsx)(i,{tag:`span`,className:`truncate text-inherit`,children:R(e)})}function Re({items:e,label:t=`Platform`,currentUrl:n=`/`,iconMap:r={},liveBadges:i,renderLink:a,LinkComponent:o,renderItem:s,className:l}){let u=M({renderLink:a,LinkComponent:o});return(0,F.jsxs)(b,{className:c(`px-2 py-0`,l),children:[!!t&&(0,F.jsx)(k,{children:t}),(0,F.jsx)(x,{className:`gap-0.5`,children:e.map((e,t)=>{let a=!!e.href&&L(n,I(e.href)),o=V(e.handle,e.badge,i),l={depth:0,active:a,expanded:!1,badge:o,renderLink:u},d=R(e);if(s)return(0,F.jsx)(P.Fragment,{children:s(e,l)},z(e,t));let f=(0,F.jsxs)(F.Fragment,{children:[!!e.icon&&(0,F.jsx)(H,{icon:e.icon,iconMap:r,className:`size-4`,"aria-hidden":`true`}),(0,F.jsx)(Le,{item:e}),!!o&&(0,F.jsx)(B,{value:o})]});return(0,F.jsx)(T,{children:(0,F.jsx)(D,{isActive:a,render:e.href&&!e.disabled?U(u,e,f,void 0,a):void 0,tooltip:{children:d},disabled:e.disabled,className:c(`h-7 font-medium`,a&&`bg-sidebar-accent text-sidebar-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:f})},z(e,t))})})]})}var ze=e({AppSidebarShell:()=>Y,CustomRowRenderer:()=>Z,NavigationPartials:()=>X}),Be={Platform:[{label:`Dashboard`,href:`#/layout/sidebar`,icon:_,handle:`dashboard`},{label:`Customers`,href:`#/customers`,icon:ce,handle:`customers`,badge:24},{label:`Orders`,href:`#/orders`,icon:ae,handle:`orders`,children:[{label:`Pending`,href:`#/orders/pending`,handle:`orders-pending`,badge:8},{label:`Fulfilled`,href:`#/orders/fulfilled`,handle:`orders-fulfilled`}]}],Finance:[{label:`Invoices`,href:`#/invoices`,icon:h,handle:`invoices`,badge:12},{label:`Reports`,href:`#/reports`,icon:u,handle:`reports`}]},Ve=[{label:`Support`,href:`#/support`,icon:Oe,handle:`support`},{label:`Security`,href:`#/security`,icon:se,handle:`security`},{label:`External docs`,href:`https://example.com`,icon:g,handle:`docs`,external:!0}],He=[{label:`Settings`,href:`#/settings`,icon:ke,handle:`settings`},{label:`AI`,href:`#/ai`,icon:l,handle:`ai`}],Ue={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`};function J({href:e,children:t,className:n,target:r,rel:i}){return(0,F.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function We(){return(0,F.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,F.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,F.jsx)(N,{className:`size-4`,"aria-hidden":`true`})}),(0,F.jsxs)(`div`,{className:`min-w-0`,children:[(0,F.jsx)(i,{weight:`semibold`,className:`truncate text-inherit`,children:`Atlas Admin`}),(0,F.jsx)(i,{size:`xxs`,type:`secondary`,className:`truncate`,children:`Production`})]})]})}function Ge(){return(0,F.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,F.jsx)(N,{className:`size-4`,"aria-hidden":`true`})})}function Y(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(O,{defaultOpen:!0,className:`min-h-0`,children:(0,F.jsx)(`div`,{className:`flex h-[42rem] w-full overflow-hidden rounded-2xl border border-border bg-background p-3`,children:(0,F.jsxs)(`div`,{className:`flex min-w-0 flex-1 overflow-hidden rounded-xl border border-border bg-background shadow-sm`,children:[(0,F.jsx)(Fe,{className:`h-full p-0`,surfaceClassName:`bg-background`,headerClassName:`px-4 pb-3 pt-4`,logoClassName:`px-0`,logo:(0,F.jsx)(We,{}),collapsedLogo:(0,F.jsx)(Ge,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:N,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:N,external:!1}],workspaceStrings:{label:`Workspace`,select:`Switch workspace`},navigationGroups:Be,footerNavItems:He,currentUrl:`#/orders/pending`,liveBadges:{customers:31,invoices:14},renderLink:J,slots:{afterNavigation:(0,F.jsx)(q,{items:Ve,label:`Help`,currentUrl:`#/orders/pending`,renderLink:J})}}),(0,F.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,F.jsx)(p,{renderLink:J,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`justify-start`,slots:{center:(0,F.jsx)(f,{className:`w-full max-w-sm`}),right:(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)(m,{unreadCount:2,notifications:[]}),(0,F.jsx)(be,{orientation:`vertical`,className:`h-7`}),(0,F.jsx)(ne,{user:Ue,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,F.jsxs)(`main`,{className:`min-w-0 flex-1 space-y-4 p-5`,children:[(0,F.jsx)(Se,{title:`Pending orders`,description:`The sidebar controls navigation only; the app owns routing and page content.`,headingTag:`h3`,titleBadges:[{label:`8 pending`,variant:`warning`}]}),(0,F.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[`Manual review`,`Awaiting stock`,`Ready to fulfill`].map((e,t)=>(0,F.jsxs)(fe,{padding:`sm`,className:`shadow-sm`,children:[(0,F.jsx)(i,{size:`xs`,type:`secondary`,children:e}),(0,F.jsx)(i,{weight:`semibold`,children:[8,12,36][t]})]},e))})]})]})]})})})})}function X(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(O,{defaultOpen:!0,className:`min-h-0`,children:(0,F.jsxs)(`div`,{className:`grid w-full gap-5 md:grid-cols-2`,children:[(0,F.jsx)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm`,children:(0,F.jsxs)(W,{collapsible:`none`,className:`w-full`,surfaceClassName:`bg-background`,children:[(0,F.jsx)(Pe,{logo:(0,F.jsx)(We,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:N,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:N,external:!1}],renderLink:J}),(0,F.jsx)(K,{navigationByGroups:Be,currentUrl:`#/customers`,liveBadges:{customers:9},renderLink:J})]})}),(0,F.jsxs)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm`,children:[(0,F.jsx)(Re,{label:`Flat navigation`,items:[{label:`Inbox`,href:`#/inbox`,icon:v,badge:6},{label:`Settings`,href:`#/settings`,icon:oe},{label:`Disabled item`,href:`#/disabled`,icon:se,disabled:!0}],currentUrl:`#/inbox`,renderLink:J}),(0,F.jsxs)(`div`,{className:`mt-4 border-t border-sidebar-border pt-3`,children:[(0,F.jsx)(q,{items:Ve,label:`Help`,currentUrl:`#/orders/pending`,renderLink:J}),(0,F.jsx)(q,{items:He,currentUrl:`#/orders/pending`,renderLink:J})]})]})]})})})}function Z(){return(0,F.jsx)(F.Fragment,{children:(0,F.jsx)(O,{defaultOpen:!0,className:`min-h-0`,children:(0,F.jsx)(`div`,{className:`rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm`,children:(0,F.jsx)(Re,{label:`Custom renderItem`,items:[{label:`Priority inbox`,href:`#/priority`,icon:v,badge:3},{label:`Billing review`,href:`#/billing`,icon:h,badge:11}],renderLink:J,renderItem:(e,t)=>(0,F.jsx)(T,{children:(0,F.jsxs)(`div`,{className:`flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent`,children:[(0,F.jsxs)(`div`,{children:[(0,F.jsx)(i,{weight:`medium`,className:`text-inherit`,children:e.label}),(0,F.jsxs)(i,{size:`xxs`,type:`secondary`,children:[`active: `,String(t.active)]})]}),!!t.badge&&(0,F.jsx)(a,{variant:`primary`,children:t.badge})]})})})})})})}var Q=`import { BarChart3, Brain, CreditCard, ExternalLink, Home, Inbox, LifeBuoy, Package, Settings, Shield, SlidersHorizontal, Store, Users } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { SmartCard } from '@/components/base/cards';
+import { Separator } from '@/components/base/display/separator';
+import { Text } from '@/components/typography';
+import type { LayoutLinkRenderProps, LayoutUser } from '@/components/layout';
+import { Header, HeaderSearch, HeaderNotifications, HeaderUserMenu } from '@/components/layout/header';
+import { PageHeader } from '@/components/layout/page';
+import {
+	AppSidebar,
+	Sidebar,
+	SidebarGroupedNavigation,
+	SidebarNavigation,
+	SidebarNavigationFooter,
+	SidebarProvider,
+	SidebarWorkspaceDropdown,
+	type SidebarNavItem,
+} from '@/components/layout/sidebar';
+import { SidebarMenuItem } from '@/components/base/sidebar';
+
+const groups: Record<string, SidebarNavItem[]> = {
+	Platform: [
+		{ label: 'Dashboard', href: '#/layout/sidebar', icon: Home, handle: 'dashboard' },
+		{ label: 'Customers', href: '#/customers', icon: Users, handle: 'customers', badge: 24 },
+		{ label: 'Orders', href: '#/orders', icon: Package, handle: 'orders', children: [
+			{ label: 'Pending', href: '#/orders/pending', handle: 'orders-pending', badge: 8 },
+			{ label: 'Fulfilled', href: '#/orders/fulfilled', handle: 'orders-fulfilled' },
+		] },
+	],
+	Finance: [
+		{ label: 'Invoices', href: '#/invoices', icon: CreditCard, handle: 'invoices', badge: 12 },
+		{ label: 'Reports', href: '#/reports', icon: BarChart3, handle: 'reports' },
+	],
+};
+
+const footerItems = [
+	{ label: 'Support', href: '#/support', icon: LifeBuoy, handle: 'support' },
+	{ label: 'Security', href: '#/security', icon: Shield, handle: 'security' },
+	{ label: 'External docs', href: 'https://example.com', icon: ExternalLink, handle: 'docs', external: true },
+];
+
+const utilityItems = [
+	{ label: 'Settings', href: '#/settings', icon: SlidersHorizontal, handle: 'settings' },
+	{ label: 'AI', href: '#/ai', icon: Brain, handle: 'ai' },
+];
+
+const user: LayoutUser = {
+	name: 'Nicolas Vlachos',
+	email: 'nicolas@example.com',
+	avatar: 'https://i.pravatar.cc/96?img=11',
+};
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+function Brand() {
+	return (
+		<div className="flex min-w-0 items-center gap-2">
+			<div className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+				<Store className="size-4" aria-hidden="true" />
+			</div>
+			<div className="min-w-0">
+				<Text weight="semibold" className="truncate text-inherit">Atlas Admin</Text>
+				<Text size="xxs" type="secondary" className="truncate">Production</Text>
+			</div>
+		</div>
+	);
+}
+
+function CollapsedBrand() {
+	return (
+		<div className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+			<Store className="size-4" aria-hidden="true" />
+		</div>
+	);
+}
+
+export function AppSidebarShell() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="flex h-[42rem] w-full overflow-hidden rounded-2xl border border-border bg-background p-3">
+									<div className="flex min-w-0 flex-1 overflow-hidden rounded-xl border border-border bg-background shadow-sm">
+										<AppSidebar
+											className="h-full p-0"
+											surfaceClassName="bg-background"
+											headerClassName="px-4 pb-3 pt-4"
+											logoClassName="px-0"
+											logo={<Brand />}
+											collapsedLogo={<CollapsedBrand />}
+											workspaceLinks={[
+												{ label: 'Production store', url: '#/workspaces/production', icon: Store, external: false },
+												{ label: 'Sandbox', url: '#/workspaces/sandbox', icon: Store, external: false },
+											]}
+											workspaceStrings={{ label: 'Workspace', select: 'Switch workspace' }}
+											navigationGroups={groups}
+											footerNavItems={utilityItems}
+											currentUrl="#/orders/pending"
+											liveBadges={{ customers: 31, invoices: 14 }}
+											renderLink={renderPreviewLink}
+											slots={{
+												afterNavigation: (
+													<SidebarNavigationFooter items={footerItems} label="Help" currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+												),
+											}}
+										/>
+										<div className="flex min-w-0 flex-1 flex-col">
+											<Header
+												renderLink={renderPreviewLink}
+												breadcrumbs={[{ label: 'Operations', href: '#/features/activities' }, { label: 'Orders' }]}
+												centerClassName="justify-start"
+												slots={{
+													center: <HeaderSearch className="w-full max-w-sm" />,
+													right: (
+														<>
+															<HeaderNotifications unreadCount={2} notifications={[]} />
+															<Separator orientation="vertical" className="h-7" />
+															<HeaderUserMenu
+																user={user}
+																showEmail={false}
+																onProfile={() => {}}
+																onSettings={() => {}}
+																onLogout={() => {}}
+															/>
+														</>
+													),
+												}}
+											/>
+											<main className="min-w-0 flex-1 space-y-4 p-5">
+												<PageHeader
+													title="Pending orders"
+													description="The sidebar controls navigation only; the app owns routing and page content."
+													headingTag="h3"
+													titleBadges={[{ label: '8 pending', variant: 'warning' }]}
+												/>
+												<div className="grid gap-3 md:grid-cols-3">
+													{['Manual review', 'Awaiting stock', 'Ready to fulfill'].map((label, index) => (
+														<SmartCard key={label} padding="sm" className="shadow-sm">
+															<Text size="xs" type="secondary">{label}</Text>
+															<Text weight="semibold">{[8, 12, 36][index]}</Text>
+														</SmartCard>
+													))}
+												</div>
+											</main>
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function NavigationPartials() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="grid w-full gap-5 md:grid-cols-2">
+									<div className="h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm">
+										<Sidebar collapsible="none" className="w-full" surfaceClassName="bg-background">
+											<SidebarWorkspaceDropdown
+												logo={<Brand />}
+												workspaceLinks={[
+													{ label: 'Production store', url: '#/workspaces/production', icon: Store, external: false },
+													{ label: 'Sandbox', url: '#/workspaces/sandbox', icon: Store, external: false },
+												]}
+												renderLink={renderPreviewLink}
+											/>
+											<SidebarGroupedNavigation navigationByGroups={groups} currentUrl="#/customers" liveBadges={{ customers: 9 }} renderLink={renderPreviewLink} />
+										</Sidebar>
+									</div>
+
+									<div className="h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm">
+										<SidebarNavigation
+											label="Flat navigation"
+											items={[
+												{ label: 'Inbox', href: '#/inbox', icon: Inbox, badge: 6 },
+												{ label: 'Settings', href: '#/settings', icon: Settings },
+												{ label: 'Disabled item', href: '#/disabled', icon: Shield, disabled: true },
+											]}
+											currentUrl="#/inbox"
+											renderLink={renderPreviewLink}
+										/>
+										<div className="mt-4 border-t border-sidebar-border pt-3">
+											<SidebarNavigationFooter items={footerItems} label="Help" currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+											<SidebarNavigationFooter items={utilityItems} currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function CustomRowRenderer() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm">
+									<SidebarNavigation
+										label="Custom renderItem"
+										items={[
+											{ label: 'Priority inbox', href: '#/priority', icon: Inbox, badge: 3 },
+											{ label: 'Billing review', href: '#/billing', icon: CreditCard, badge: 11 },
+										]}
+										renderLink={renderPreviewLink}
+										renderItem={(item, context) => (
+											<SidebarMenuItem>
+												<div className="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent">
+													<div>
+														<Text weight="medium" className="text-inherit">{item.label}</Text>
+														<Text size="xxs" type="secondary">active: {String(context.active)}</Text>
+													</div>
+													{!!context.badge && <Badge variant="primary">{context.badge}</Badge>}
+												</div>
+											</SidebarMenuItem>
+										)}
+									/>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+`;function Ke(e){return ze||$(`Examples`,!1),Y||$(`Examples.AppSidebarShell`,!0),Z||$(`Examples.CustomRowRenderer`,!0),X||$(`Examples.NavigationPartials`,!0),(0,F.jsx)(n,{title:`Layout · Sidebar`,description:`Full app sidebar assembly plus reusable navigation, workspace, and footer item partials.`,layer:`layout`,status:`ready`,children:(0,F.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,F.jsx)(s,{name:`AppSidebarShell`,source:Q,children:(0,F.jsx)(Y,{})}),(0,F.jsx)(s,{name:`NavigationPartials`,source:Q,children:(0,F.jsx)(X,{})}),(0,F.jsx)(s,{name:`CustomRowRenderer`,source:Q,children:(0,F.jsx)(Z,{})})]})})}function qe(e={}){let{wrapper:t}=e.components||{};return t?(0,F.jsx)(t,{...e,children:(0,F.jsx)(Ke,{...e})}):Ke(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{qe as default};

package/dist/showcase/assets/layout-users-Cv849xnU.js

@@ -0,0 +1,104 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{cr as t,gr as n,lr as r,r as i,sr as a,t as o}from"./example-DPfw-R7_.js";import{t as s}from"./chevrons-up-down-Be6eciau.js";import{b as c,f as l,m as u,n as d,p as f,r as p,t as m}from"./sidebar.context-CXTHS3vn.js";import{t as h}from"./settings-Duj7gAZe.js";import{t as g}from"./user-plus-9WRYjS04.js";import{t as _}from"./user-3L762Mec.js";import{D as v,a as y}from"./index-B-Z7p0So.js";import{a as b,c as x,l as S,r as C,t as w}from"./dropdown-menu-Cqv6D7Sb.js";import{a as T,i as E,n as D,o as O,r as k,t as A}from"./avatar-DR2mqPpY.js";import{n as j}from"./PreviewLayout-BHemtKEf.js";var M=y(),N={profile:`Profile`,settings:`Settings`,logout:`Log out`};function P(e){return e.split(` `).map(e=>e[0]).filter(Boolean).slice(0,2).join(``).toUpperCase()}function F({user:e,customContent:t,onProfile:r,onSettings:i,onLogout:a,strings:o,renderTrigger:p}){let m=v(N,o),{state:g,isMobile:y}=d(),T=y||g!==`collapsed`?`bottom`:`right`,E=P(e.name),D=(0,M.jsxs)(M.Fragment,{children:[!!r&&(0,M.jsxs)(b,{onClick:r,children:[(0,M.jsx)(_,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,M.jsx)(n,{tag:`span`,size:`xs`,className:`text-inherit`,children:m.profile})]}),!!i&&(0,M.jsxs)(b,{onClick:i,children:[(0,M.jsx)(h,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,M.jsx)(n,{tag:`span`,size:`xs`,className:`text-inherit`,children:m.settings})]}),!!(r||i)&&!!a&&(0,M.jsx)(x,{}),!!a&&(0,M.jsxs)(b,{onClick:a,children:[(0,M.jsx)(c,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,M.jsx)(n,{tag:`span`,size:`xs`,className:`text-inherit`,children:m.logout})]})]});return(0,M.jsx)(l,{children:(0,M.jsx)(u,{children:(0,M.jsxs)(w,{children:[(0,M.jsx)(S,{render:(0,M.jsx)(f,{size:`lg`,className:`group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent`}),children:p?.(e)??(0,M.jsxs)(M.Fragment,{children:[(0,M.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:[(0,M.jsxs)(A,{className:`size-8 rounded-full`,children:[!!e.avatar&&(0,M.jsx)(O,{src:e.avatar,alt:e.name}),(0,M.jsx)(k,{className:`bg-sidebar-accent text-xs text-sidebar-accent-foreground`,children:E})]}),(0,M.jsxs)(`div`,{className:`flex flex-1 flex-col items-start justify-center overflow-hidden`,children:[(0,M.jsx)(n,{weight:`medium`,className:`w-full truncate`,children:e.name}),!!e.email&&(0,M.jsx)(n,{size:`xs`,type:`secondary`,className:`w-full truncate`,children:e.email})]})]}),(0,M.jsx)(s,{className:`ml-auto size-4 shrink-0`,"aria-hidden":`true`})]})}),(0,M.jsx)(C,{className:`w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg`,align:`end`,side:T,sideOffset:4,children:t??D})]})})})}var I=e({AvatarStates:()=>z,CustomTriggerCustomContent:()=>H,HeaderUserMenuExample:()=>B,SidebarUserMenu:()=>V}),L=[{name:`Sarah Smitha`,email:`maria@example.com`,avatar:`https://i.pravatar.cc/96?img=5`},{name:`Daniel Kowalski`,email:`stefan@example.com`,avatar:`https://i.pravatar.cc/96?img=12`},{name:`Emma Markova`,email:`elena@example.com`}];function R(e){return e.split(` `).map(e=>e[0]).join(``).slice(0,2).toUpperCase()}function z(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsxs)(j,{children:[L.map((e,t)=>(0,M.jsxs)(A,{size:t===0?`lg`:`default`,children:[!!e.avatar&&(0,M.jsx)(O,{src:e.avatar,alt:e.name}),(0,M.jsx)(k,{children:R(e.name)}),(0,M.jsx)(D,{className:t===1?`bg-warning`:`bg-success`})]},e.name)),(0,M.jsxs)(E,{children:[L.map(e=>(0,M.jsxs)(A,{children:[!!e.avatar&&(0,M.jsx)(O,{src:e.avatar,alt:e.name}),(0,M.jsx)(k,{children:R(e.name)})]},e.name)),(0,M.jsx)(T,{children:`+8`})]})]})})}function B(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsxs)(`div`,{className:`flex items-center justify-between gap-4 rounded-xl border border-border p-4`,children:[(0,M.jsxs)(`div`,{children:[(0,M.jsx)(n,{weight:`semibold`,children:`Account switcher surface`}),(0,M.jsx)(n,{size:`xs`,type:`secondary`,children:`Default trigger renders avatar, name, email, and dropdown actions.`})]}),(0,M.jsx)(p,{user:L[0],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})})}function V(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsx)(m,{children:(0,M.jsx)(`div`,{className:`max-w-sm rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground`,children:(0,M.jsx)(F,{user:L[1],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})})})})}function H(){return(0,M.jsx)(M.Fragment,{children:(0,M.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-2`,children:[(0,M.jsx)(p,{user:L[2],renderTrigger:e=>(0,M.jsxs)(i,{type:`button`,variant:`secondary`,buttonStyle:`outline`,className:`h-auto gap-3 rounded-full px-3 py-2`,children:[(0,M.jsx)(A,{size:`sm`,children:(0,M.jsx)(k,{children:R(e.name)})}),(0,M.jsx)(n,{tag:`span`,size:`xs`,weight:`medium`,children:e.name}),(0,M.jsx)(r,{variant:`info`,children:`Admin`})]}),customContent:(0,M.jsxs)(`div`,{className:`space-y-1`,children:[(0,M.jsx)(i,{variant:`secondary`,buttonStyle:`ghost`,icon:_,className:`w-full justify-start`,children:`Profile`}),(0,M.jsx)(i,{variant:`secondary`,buttonStyle:`ghost`,icon:h,className:`w-full justify-start`,children:`Preferences`}),(0,M.jsx)(i,{variant:`secondary`,buttonStyle:`ghost`,icon:c,className:`w-full justify-start`,children:`Sign out`})]})}),(0,M.jsxs)(`div`,{className:`flex items-center gap-3 rounded-xl border border-border p-4`,children:[(0,M.jsx)(i,{variant:`primary`,icon:g,children:`Invite user`}),(0,M.jsx)(n,{size:`xs`,type:`secondary`,children:`Pair user menus with base buttons and badges for app-specific account controls.`})]})]})})}var U=`import { LogOut, Settings, User, UserPlus } from 'lucide-react';
+import { Button } from '@/components/base/buttons';
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '@/components/base/display/avatar';
+import { Text } from '@/components/typography';
+import { Badge } from '@/components/base/badge';
+import { HeaderUserMenu } from '@/components/layout/header';
+import { SidebarNavigationUser, SidebarProvider } from '@/components/layout/sidebar';
+import type { LayoutUser } from '@/components/layout';
+import { Row } from '../../PreviewLayout';
+
+const users: LayoutUser[] = [
+	{ name: 'Sarah Smitha', email: 'maria@example.com', avatar: 'https://i.pravatar.cc/96?img=5' },
+	{ name: 'Daniel Kowalski', email: 'stefan@example.com', avatar: 'https://i.pravatar.cc/96?img=12' },
+	{ name: 'Emma Markova', email: 'elena@example.com' },
+];
+
+function initials(name: string) {
+	return name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
+}
+
+export function AvatarStates() {
+	return (
+		<>
+			<Row>
+								{users.map((user, index) => (
+									<Avatar key={user.name} size={index === 0 ? 'lg' : 'default'}>
+										{!!user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+										<AvatarFallback>{initials(user.name)}</AvatarFallback>
+										<AvatarBadge className={index === 1 ? 'bg-warning' : 'bg-success'} />
+									</Avatar>
+								))}
+								<AvatarGroup>
+									{users.map((user) => (
+										<Avatar key={user.name}>
+											{!!user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+											<AvatarFallback>{initials(user.name)}</AvatarFallback>
+										</Avatar>
+									))}
+									<AvatarGroupCount>+8</AvatarGroupCount>
+								</AvatarGroup>
+							</Row>
+		</>
+	);
+}
+
+export function HeaderUserMenuExample() {
+	return (
+		<>
+			<div className="flex items-center justify-between gap-4 rounded-xl border border-border p-4">
+								<div>
+									<Text weight="semibold">Account switcher surface</Text>
+									<Text size="xs" type="secondary">Default trigger renders avatar, name, email, and dropdown actions.</Text>
+								</div>
+								<HeaderUserMenu user={users[0]} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+							</div>
+		</>
+	);
+}
+
+export function SidebarUserMenu() {
+	return (
+		<>
+			<SidebarProvider>
+								<div className="max-w-sm rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground">
+									<SidebarNavigationUser user={users[1]} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function CustomTriggerCustomContent() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2">
+								<HeaderUserMenu
+									user={users[2]}
+									renderTrigger={(user) => (
+										<Button type="button" variant="secondary" buttonStyle="outline" className="h-auto gap-3 rounded-full px-3 py-2">
+											<Avatar size="sm">
+												<AvatarFallback>{initials(user.name)}</AvatarFallback>
+											</Avatar>
+											<Text tag="span" size="xs" weight="medium">{user.name}</Text>
+											<Badge variant="info">Admin</Badge>
+										</Button>
+									)}
+									customContent={(
+										<div className="space-y-1">
+											<Button variant="secondary" buttonStyle="ghost" icon={User} className="w-full justify-start">Profile</Button>
+											<Button variant="secondary" buttonStyle="ghost" icon={Settings} className="w-full justify-start">Preferences</Button>
+											<Button variant="secondary" buttonStyle="ghost" icon={LogOut} className="w-full justify-start">Sign out</Button>
+										</div>
+									)}
+								/>
+
+								<div className="flex items-center gap-3 rounded-xl border border-border p-4">
+									<Button variant="primary" icon={UserPlus}>Invite user</Button>
+									<Text size="xs" type="secondary">Pair user menus with base buttons and badges for app-specific account controls.</Text>
+								</div>
+							</div>
+		</>
+	);
+}
+`;function W(e){return I||K(`Examples`,!1),z||K(`Examples.AvatarStates`,!0),H||K(`Examples.CustomTriggerCustomContent`,!0),B||K(`Examples.HeaderUserMenuExample`,!0),V||K(`Examples.SidebarUserMenu`,!0),(0,M.jsx)(t,{title:`Layout · Users & avatars`,description:`User identity surfaces used by layout headers, sidebars, menus, avatar groups, and status badges.`,layer:`layout`,status:`ready`,children:(0,M.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,M.jsx)(o,{name:`AvatarStates`,source:U,children:(0,M.jsx)(z,{})}),(0,M.jsx)(o,{name:`HeaderUserMenuExample`,source:U,children:(0,M.jsx)(B,{})}),(0,M.jsx)(o,{name:`SidebarUserMenu`,source:U,children:(0,M.jsx)(V,{})}),(0,M.jsx)(o,{name:`CustomTriggerCustomContent`,source:U,children:(0,M.jsx)(H,{})})]})})}function G(e={}){let{wrapper:t}=e.components||{};return t?(0,M.jsx)(t,{...e,children:(0,M.jsx)(W,{...e})}):W(e)}function K(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{G as default};