admin-ui-starter-kit 0.1.2 → 0.1.4

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

@@ -1,224 +0,0 @@
-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-6phCHGsN.js";import{t as l}from"./brain-Cy3o-12l.js";import{t as u}from"./chart-column-BpQkEi1H.js";import{t as d}from"./chevrons-up-down-SdRARzoq.js";import{n as f,r as p,t as m}from"./header-notifications-_aZCpE5A.js";import{t as h}from"./credit-card-BQK3KKb2.js";import{t as g}from"./external-link-BuVHkCy0.js";import{t as _}from"./house-BlGXAcMH.js";import{t as v}from"./inbox-qdSnP4UV.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-BAp_pBEB.js";import{t as ae}from"./package-BJMP-Fcr.js";import{t as oe}from"./settings-Cb2MsAmN.js";import{t as se}from"./shield-DwLjF5ch.js";import{t as ce}from"./users-B7G4yTCR.js";import{D as le,a as ue,k as de,r as A}from"./index-B4ubXfly.js";import{t as fe}from"./smart-card-BisUbLPt.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-1CJgYn0S.js";import{t as be}from"./separator-DWv-twD-.js";import{t as j}from"./skeleton-CeNPp4hr.js";import{t as xe}from"./scroll-area-0rT06pXZ.js";import{n as M,t as Se}from"./page-header-B_rqHJhe.js";import{a as Ce,i as we,n as Te,r as Ee,t as De}from"./sheet-Dn1-MYus.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-DtbZduBG.js

@@ -1,104 +0,0 @@
-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-6phCHGsN.js";import{t as s}from"./chevrons-up-down-SdRARzoq.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-BAp_pBEB.js";import{t as h}from"./settings-Cb2MsAmN.js";import{t as g}from"./user-plus-F_TfagnP.js";import{t as _}from"./user-Bgc2t2_e.js";import{D as v,a as y}from"./index-B4ubXfly.js";import{a as b,c as x,l as S,r as C,t as w}from"./dropdown-menu-1CJgYn0S.js";import{a as T,i as E,n as D,o as O,r as k,t as A}from"./avatar-LPmQqZQv.js";import{n as j}from"./PreviewLayout-z6vpJJGt.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};