admin-ui-starter-kit 0.4.3 → 0.4.4

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

@@ -0,0 +1,224 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,jr as o,t as s}from"./example-CTJ8AdNR.js";import{t as c}from"./brain-DdKBE4Bh.js";import{t as l}from"./chart-column-CpTxRLEH.js";import{n as u,t as d}from"./header-notifications-B9XMBsK_.js";import{t as f}from"./credit-card-BYMQj03s.js";import{t as p}from"./external-link-D0gqSa1q.js";import{t as ee}from"./house-B504aFIP.js";import{t as m}from"./inbox-BWKQMLMx.js";import{c as h,f as te,m as g,r as ne,t as _,u as v}from"./sidebar.context-CdH_DH9M.js";import{t as y}from"./package-BCXIwEPz.js";import{t as b}from"./settings-IANZGo2i.js";import{t as x}from"./shield-CDZhhvFW.js";import{t as re}from"./sliders-horizontal-C3JH5WQu.js";import{t as ie}from"./users-BUb7CmVp.js";import{a as S,n as C,s as ae}from"./index-DaYVSqKu.js";import{t as oe}from"./smart-card-CHouYi8U.js";import{t as se}from"./separator-4IC9ED7s.js";import{t as ce}from"./sidebar-Cds60-PS.js";import{t as le}from"./use-layout-link-CGBQHZon.js";import{a as ue,c as w,d as de,f as T,i as E,l as D,n as O,o as k,p as A,r as j,s as M,t as N,u as P}from"./app-sidebar-CxTRNC5L.js";import{t as F}from"./header-CiNgDop3.js";import{t as I}from"./page-header-B_b7SqW8.js";var L=S(`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`}]]),R=S(`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`}]]),z=t(n(),1),B=ae();function fe({item:e}){return(0,B.jsx)(a,{tag:`span`,className:`truncate text-inherit`,children:D(e)})}function V({items:e,label:t=`Platform`,currentUrl:n=`/`,iconMap:r={},liveBadges:i,renderLink:a,LinkComponent:o,renderItem:s,className:c}){let l=le({renderLink:a,LinkComponent:o});return(0,B.jsxs)(h,{className:C(`px-2 py-0`,c),children:[!!t&&(0,B.jsx)(v,{children:t}),(0,B.jsx)(te,{className:`gap-0.5`,children:e.map((e,t)=>{let a=!!e.href&&P(n,A(e.href)),o=T(e.handle,e.badge,i),c={depth:0,active:a,expanded:!1,badge:o,renderLink:l},u=D(e);if(s)return(0,B.jsx)(z.Fragment,{children:s(e,c)},w(e,t));let d=(0,B.jsxs)(B.Fragment,{children:[!!e.icon&&(0,B.jsx)(k,{icon:e.icon,iconMap:r,className:`size-4`,"aria-hidden":`true`}),(0,B.jsx)(fe,{item:e}),!!o&&(0,B.jsx)(M,{value:o})]});return(0,B.jsx)(g,{children:(0,B.jsx)(ce,{isActive:a,render:e.href&&!e.disabled?de(l,e,d,void 0,a):void 0,tooltip:{children:u},disabled:e.disabled,className:C(`h-8 font-medium`,a&&`bg-sidebar-accent text-sidebar-accent-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:d})},w(e,t))})})]})}var pe=e({AppSidebarShell:()=>J,CustomRowRenderer:()=>X,NavigationPartials:()=>Y}),H={Platform:[{label:`Dashboard`,href:`#/layout/sidebar`,icon:ee,handle:`dashboard`},{label:`Customers`,href:`#/customers`,icon:ie,handle:`customers`,badge:24},{label:`Orders`,href:`#/orders`,icon:y,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:f,handle:`invoices`,badge:12},{label:`Reports`,href:`#/reports`,icon:l,handle:`reports`}]},U=[{label:`Support`,href:`#/support`,icon:L,handle:`support`},{label:`Security`,href:`#/security`,icon:x,handle:`security`},{label:`External docs`,href:`https://example.com`,icon:p,handle:`docs`,external:!0}],W=[{label:`Settings`,href:`#/settings`,icon:re,handle:`settings`},{label:`AI`,href:`#/ai`,icon:c,handle:`ai`}],G={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`};function K({href:e,children:t,className:n,target:r,rel:i}){return(0,B.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function q(){return(0,B.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,B.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,B.jsx)(R,{className:`size-4`,"aria-hidden":`true`})}),(0,B.jsxs)(`div`,{className:`min-w-0`,children:[(0,B.jsx)(a,{weight:`semibold`,className:`truncate text-inherit`,children:`Atlas Admin`}),(0,B.jsx)(a,{size:`xxs`,type:`secondary`,className:`truncate`,children:`Production`})]})]})}function me(){return(0,B.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,B.jsx)(R,{className:`size-4`,"aria-hidden":`true`})})}function J(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,B.jsx)(`div`,{className:`flex h-[42rem] w-full min-w-[56rem] overflow-hidden rounded-lg border border-border bg-background p-3`,children:(0,B.jsxs)(`div`,{className:`flex min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background shadow-sm`,children:[(0,B.jsx)(N,{className:`h-full p-0`,surfaceClassName:`bg-background`,headerClassName:`px-4 pb-3 pt-4`,logoClassName:`px-0`,logo:(0,B.jsx)(q,{}),collapsedLogo:(0,B.jsx)(me,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:R,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:R,external:!1}],workspaceStrings:{label:`Workspace`,select:`Switch workspace`},navigationGroups:H,footerNavItems:W,currentUrl:`#/orders/pending`,liveBadges:{customers:31,invoices:14},renderLink:K,slots:{afterNavigation:(0,B.jsx)(j,{items:U,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K})}}),(0,B.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,B.jsx)(F,{renderLink:K,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`justify-start`,slots:{center:(0,B.jsx)(u,{className:`w-full max-w-sm`}),right:(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(d,{unreadCount:2,notifications:[]}),(0,B.jsx)(se,{orientation:`vertical`,className:`h-7`}),(0,B.jsx)(ne,{user:G,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,B.jsxs)(`main`,{className:`min-w-0 flex-1 space-y-4 p-5`,children:[(0,B.jsx)(I,{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,B.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[`Manual review`,`Awaiting stock`,`Ready to fulfill`].map((e,t)=>(0,B.jsxs)(oe,{padding:`sm`,className:`shadow-sm`,children:[(0,B.jsx)(a,{size:`xs`,type:`secondary`,children:e}),(0,B.jsx)(a,{weight:`semibold`,children:[8,12,36][t]})]},e))})]})]})]})})})})}function Y(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,B.jsxs)(`div`,{className:`grid w-full gap-5 md:grid-cols-2`,children:[(0,B.jsx)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm`,children:(0,B.jsxs)(ue,{collapsible:`none`,className:`w-full`,surfaceClassName:`bg-background`,children:[(0,B.jsx)(O,{logo:(0,B.jsx)(q,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:R,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:R,external:!1}],renderLink:K}),(0,B.jsx)(E,{navigationByGroups:H,currentUrl:`#/customers`,liveBadges:{customers:9},renderLink:K})]})}),(0,B.jsxs)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm`,children:[(0,B.jsx)(V,{label:`Flat navigation`,items:[{label:`Inbox`,href:`#/inbox`,icon:m,badge:6},{label:`Settings`,href:`#/settings`,icon:b},{label:`Disabled item`,href:`#/disabled`,icon:x,disabled:!0}],currentUrl:`#/inbox`,renderLink:K}),(0,B.jsxs)(`div`,{className:`mt-4 border-t border-sidebar-border pt-3`,children:[(0,B.jsx)(j,{items:U,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K}),(0,B.jsx)(j,{items:W,currentUrl:`#/orders/pending`,renderLink:K})]})]})]})})})}function X(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,B.jsx)(`div`,{className:`rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm`,children:(0,B.jsx)(V,{label:`Custom renderItem`,items:[{label:`Priority inbox`,href:`#/priority`,icon:m,badge:3},{label:`Billing review`,href:`#/billing`,icon:f,badge:11}],renderLink:K,renderItem:(e,t)=>(0,B.jsx)(g,{children:(0,B.jsxs)(`div`,{className:`flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent`,children:[(0,B.jsxs)(`div`,{children:[(0,B.jsx)(a,{weight:`medium`,className:`text-inherit`,children:e.label}),(0,B.jsxs)(a,{size:`xxs`,type:`secondary`,children:[`active: `,String(t.active)]})]}),!!t.badge&&(0,B.jsx)(o,{variant:`primary`,children:t.badge})]})})})})})})}var Z=`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 min-w-[56rem] overflow-hidden rounded-lg border border-border bg-background p-3">
+									<div className="flex min-w-0 flex-1 overflow-hidden rounded-lg 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 Q(e){return pe||$(`Examples`,!1),J||$(`Examples.AppSidebarShell`,!0),X||$(`Examples.CustomRowRenderer`,!0),Y||$(`Examples.NavigationPartials`,!0),(0,B.jsx)(r,{title:`Layout · Sidebar`,description:`Full app sidebar assembly plus reusable navigation, workspace, and footer item partials.`,layer:`layout`,status:`ready`,children:(0,B.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,B.jsx)(s,{name:`AppSidebarShell`,source:Z,children:(0,B.jsx)(J,{})}),(0,B.jsx)(s,{name:`NavigationPartials`,source:Z,children:(0,B.jsx)(Y,{})}),(0,B.jsx)(s,{name:`CustomRowRenderer`,source:Z,children:(0,B.jsx)(X,{})})]})})}function he(e={}){let{wrapper:t}=e.components||{};return t?(0,B.jsx)(t,{...e,children:(0,B.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{he as default};

package/dist/showcase/assets/layout-users-Cypq-42s.js

@@ -0,0 +1,117 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Dr as t,Er as n,Rr as r,jr as i,r as a,t as o}from"./example-CTJ8AdNR.js";import{t as s}from"./chevrons-up-down-ZUo0Do59.js";import{b as c,f as l,m as u,n as d,r as f,t as p}from"./sidebar.context-CdH_DH9M.js";import{t as m}from"./settings-IANZGo2i.js";import{t as h}from"./user-plus-DbOuTfr7.js";import{t as g}from"./user-u65Fo7k7.js";import{k as _,n as v,s as y}from"./index-DaYVSqKu.js";import{a as b,c as x,l as S,r as C,t as w}from"./dropdown-menu-DXT3BZLa.js";import{a as T,i as E,n as D,o as O,r as k,t as A}from"./avatar-n1nywTlx.js";import{n as j}from"./PreviewLayout-nADJqRlP.js";import{t as M}from"./sidebar-Cds60-PS.js";var N=y(),P={sm:{avatar:`size-7`,gap:`gap-2`,nameSize:`sm`,subtitleSize:`xs`},base:{avatar:`size-9`,gap:`gap-3`,nameSize:`sm`,subtitleSize:`xs`},lg:{avatar:`size-11`,gap:`gap-3`,nameSize:`base`,subtitleSize:`sm`}};function F({name:e,subtitle:t,avatarUrl:n,avatarAlt:i,initials:a,avatar:o,trailing:s,size:c=`base`,className:l}){let u=P[c],d=o??(0,N.jsxs)(A,{className:u.avatar,children:[!!n&&(0,N.jsx)(O,{src:n,alt:i??(typeof e==`string`?e:void 0)}),!!a&&(0,N.jsx)(k,{children:a})]});return(0,N.jsxs)(`div`,{className:v(`user-cell--component`,`flex items-center`,u.gap,l),children:[d,(0,N.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,N.jsx)(r,{size:u.nameSize,weight:`semibold`,className:`truncate`,children:e}),!!t&&(0,N.jsx)(r,{size:u.subtitleSize,type:`secondary`,className:`truncate`,children:t})]}),!!s&&(0,N.jsx)(`div`,{className:`shrink-0`,children:s})]})}F.displayName=`UserCell`;var I={profile:`Profile`,settings:`Settings`,logout:`Log out`};function L(e){return e.split(` `).map(e=>e[0]).filter(Boolean).slice(0,2).join(``).toUpperCase()}function R({user:e,customContent:t,onProfile:n,onSettings:i,onLogout:a,strings:o,renderTrigger:f}){let p=_(I,o),{state:h,isMobile:v}=d(),y=v||h!==`collapsed`?`bottom`:`right`,T=L(e.name),E=(0,N.jsxs)(N.Fragment,{children:[!!n&&(0,N.jsxs)(b,{onClick:n,children:[(0,N.jsx)(g,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,N.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:p.profile})]}),!!i&&(0,N.jsxs)(b,{onClick:i,children:[(0,N.jsx)(m,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,N.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:p.settings})]}),!!(n||i)&&!!a&&(0,N.jsx)(x,{}),!!a&&(0,N.jsxs)(b,{onClick:a,children:[(0,N.jsx)(c,{className:`mr-2 size-4`,"aria-hidden":`true`}),(0,N.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:p.logout})]})]});return(0,N.jsx)(l,{children:(0,N.jsx)(u,{children:(0,N.jsxs)(w,{children:[(0,N.jsx)(S,{render:(0,N.jsx)(M,{size:`lg`,className:`group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent`}),children:f?.(e)??(0,N.jsxs)(N.Fragment,{children:[(0,N.jsxs)(`div`,{className:`flex min-w-0 flex-1 items-center gap-2`,children:[(0,N.jsxs)(A,{className:`size-8 rounded-full`,children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{className:`bg-sidebar-accent text-xs text-sidebar-accent-foreground`,children:T})]}),(0,N.jsxs)(`div`,{className:`flex flex-1 flex-col items-start justify-center overflow-hidden`,children:[(0,N.jsx)(r,{weight:`medium`,className:`w-full truncate`,children:e.name}),!!e.email&&(0,N.jsx)(r,{size:`xs`,type:`secondary`,className:`w-full truncate`,children:e.email})]})]}),(0,N.jsx)(s,{className:`ml-auto size-4 shrink-0`,"aria-hidden":`true`})]})}),(0,N.jsx)(C,{className:`w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg`,align:`end`,side:y,sideOffset:4,children:t??E})]})})})}var z=e({AvatarStates:()=>H,CustomTriggerCustomContent:()=>G,HeaderUserMenuExample:()=>U,SidebarUserMenu:()=>W}),B=[{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 V(e){return e.split(` `).map(e=>e[0]).join(``).slice(0,2).toUpperCase()}function H(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(j,{children:[B.map((e,t)=>(0,N.jsxs)(A,{size:t===0?`lg`:`default`,children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{children:V(e.name)}),(0,N.jsx)(D,{className:t===1?`bg-warning`:`bg-success`})]},e.name)),(0,N.jsxs)(E,{children:[B.map(e=>(0,N.jsxs)(A,{children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{children:V(e.name)})]},e.name)),(0,N.jsx)(T,{children:`+8`})]})]})})}function U(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`flex flex-col gap-4 rounded-xl border border-border p-4 sm:flex-row sm:items-center sm:justify-between`,children:[(0,N.jsxs)(`div`,{className:`min-w-0`,children:[(0,N.jsx)(r,{weight:`semibold`,children:`Account switcher surface`}),(0,N.jsx)(r,{size:`xs`,type:`secondary`,children:`Default trigger renders avatar, name, email, and dropdown actions.`})]}),(0,N.jsx)(f,{user:B[0],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})})}function W(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsx)(p,{className:`min-h-0`,children:(0,N.jsx)(`div`,{className:`max-w-sm rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground`,children:(0,N.jsx)(R,{user:B[1],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})})})})}function G(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(14rem,0.85fr)] md:items-start`,children:[(0,N.jsx)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:(0,N.jsx)(f,{user:B[2],renderTrigger:e=>(0,N.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:`outline`,className:`h-auto w-full justify-start rounded-md px-2.5 py-2`,children:(0,N.jsx)(F,{size:`sm`,name:e.name,initials:V(e.name),trailing:(0,N.jsx)(i,{variant:`info`,children:`Admin`})})}),customContent:(0,N.jsxs)(`div`,{className:`space-y-1`,children:[(0,N.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,icon:g,className:`w-full justify-start`,children:`Profile`}),(0,N.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,icon:m,className:`w-full justify-start`,children:`Preferences`}),(0,N.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,icon:c,className:`w-full justify-start`,children:`Sign out`})]})})}),(0,N.jsx)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:(0,N.jsxs)(`div`,{className:`space-y-2`,children:[(0,N.jsx)(a,{variant:`primary`,icon:h,children:`Invite user`}),(0,N.jsx)(r,{size:`xs`,type:`secondary`,children:`Pair user menus with base buttons and badges for app-specific account controls.`})]})})]})})}var K=`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 { UserCell } from '@/components/base/display/user-cell';
+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 flex-col gap-4 rounded-xl border border-border p-4 sm:flex-row sm:items-center sm:justify-between">
+				<div className="min-w-0">
+					<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 className="min-h-0">
+				<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-3 md:grid-cols-[minmax(0,1fr)_minmax(14rem,0.85fr)] md:items-start">
+				<div className="rounded-lg border border-border bg-card p-3">
+					<HeaderUserMenu
+						user={users[2]}
+						renderTrigger={(user) => (
+							<Button
+								type="button"
+								variant="secondary"
+								buttonStyle="outline"
+								className="h-auto w-full justify-start rounded-md px-2.5 py-2"
+							>
+								<UserCell
+									size="sm"
+									name={user.name}
+									initials={initials(user.name)}
+									trailing={<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>
+
+				<div className="rounded-lg border border-border bg-card p-3">
+					<div className="space-y-2">
+						<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>
+			</div>
+		</>
+	);
+}
+`;function q(e){return z||Y(`Examples`,!1),H||Y(`Examples.AvatarStates`,!0),G||Y(`Examples.CustomTriggerCustomContent`,!0),U||Y(`Examples.HeaderUserMenuExample`,!0),W||Y(`Examples.SidebarUserMenu`,!0),(0,N.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,N.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,N.jsx)(o,{name:`AvatarStates`,source:K,children:(0,N.jsx)(H,{})}),(0,N.jsx)(o,{name:`HeaderUserMenuExample`,source:K,children:(0,N.jsx)(U,{})}),(0,N.jsx)(o,{name:`SidebarUserMenu`,source:K,children:(0,N.jsx)(W,{})}),(0,N.jsx)(o,{name:`CustomTriggerCustomContent`,source:K,children:(0,N.jsx)(G,{})})]})})}function J(e={}){let{wrapper:t}=e.components||{};return t?(0,N.jsx)(t,{...e,children:(0,N.jsx)(q,{...e})}):q(e)}function Y(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{J as default};

package/dist/showcase/assets/layout-workspace-DiRR8vDv.js

@@ -0,0 +1,183 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Lr as a,Rr as o,Ur as s,jr as c,r as l,t as u}from"./example-CTJ8AdNR.js";import{t as d}from"./box-z4O8t_K5.js";import{t as f}from"./circle-alert-CXCt6zxc.js";import{t as p}from"./circle-BL52dLr9.js";import{n as m,t as h}from"./languages-BofyvcCF.js";import{t as g}from"./earth-7-Z3Gv2v.js";import{t as _}from"./image-C3DaMxmn.js";import{t as ee}from"./package-check-Ol-Cw3j-.js";import{t as v}from"./shield-check-CaO2dhVS.js";import{t as y}from"./sliders-horizontal-C3JH5WQu.js";import{k as b,n as x,s as S}from"./index-DaYVSqKu.js";import{t as C}from"./props-table-C8la6vcG.js";import{t as w}from"./smart-card-CHouYi8U.js";import{t as T}from"./inline-stat-BYu-tiUU.js";import{t as E}from"./progress-C61sf-qt.js";import{c as D,i as O,n as k,o as A,r as j,t as M,u as te}from"./item-C4Xk3DC1.js";import{t as ne}from"./use-layout-link-CGBQHZon.js";var re={metadataLabel:`Record metadata`,actionsLabel:`Record actions`,secondaryActionsLabel:`Secondary actions`},ie={ariaLabel:`Workspace navigation`,completionLabel:e=>`${e}% complete`,currentLabel:`Current`},ae={ariaLabel:`Workspace locales`,activeLabel:`Active`,completionLabel:e=>`${e}% complete`},N=t(n(),1),P=S(),F={default:`[--workspace-content-max-width:58rem]`,wide:`[--workspace-content-max-width:86rem]`,full:`[--workspace-content-max-width:none]`},I={complete:s,current:p,attention:f,disabled:p,idle:p},L={complete:`text-success`,current:`text-primary`,attention:`text-warning`,disabled:`text-muted-foreground/40`,idle:`text-muted-foreground`};function R(e){return Number.isFinite(e)?Math.min(100,Math.max(0,Math.round(e))):0}function z({icon:e,className:t}){return e?N.isValidElement(e)?N.cloneElement(e,{className:x(t,e.props.className)}):typeof e==`function`?(0,P.jsx)(e,{className:t,"aria-hidden":`true`}):null:null}function B(e,t){return e.disabled?`disabled`:e.status?e.status:e.warning?`attention`:t?`current`:e.completion!==void 0&&R(e.completion)>=100?`complete`:`idle`}var V=N.forwardRef(function({header:e,sidebar:t,rail:n,children:r,contentWidth:i=`wide`,className:a,headerClassName:o,bodyClassName:s,sidebarClassName:c,mainClassName:l,contentClassName:u,railClassName:d,ariaLabel:f,style:p,...m},h){let g=!!t,_=!!n;return(0,P.jsxs)(`div`,{ref:h,"aria-label":f,className:x(`workspace-layout--component flex h-full min-h-0 w-full flex-col overflow-hidden rounded-md border border-border bg-background text-foreground`,`[--workspace-sidebar-width:16rem] [--workspace-rail-width:20rem]`,F[i],a),style:p,...m,children:[!!e&&(0,P.jsx)(`header`,{className:x(`workspace-layout--header shrink-0 border-b border-border bg-background`,o),children:e}),(0,P.jsxs)(`div`,{className:x(`workspace-layout--body grid min-h-0 flex-1 grid-cols-1 bg-muted/20`,g&&!_&&`min-[80rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]`,g&&_&&`min-[80rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)] min-[96rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)_var(--workspace-rail-width)]`,!g&&_&&`min-[96rem]:grid-cols-[minmax(0,1fr)_var(--workspace-rail-width)]`,s),children:[!!g&&(0,P.jsx)(`aside`,{className:x(`workspace-layout--sidebar hidden min-h-0 border-r border-border bg-background min-[80rem]:block`,c),children:(0,P.jsx)(`div`,{className:`h-full overflow-y-auto overscroll-contain p-3`,children:t})}),(0,P.jsx)(`main`,{className:x(`workspace-layout--main min-h-0 min-w-0 overflow-y-auto overscroll-contain`,l),children:(0,P.jsx)(`div`,{className:x(`workspace-layout--content mx-auto flex min-h-full w-full max-w-[var(--workspace-content-max-width)] flex-col gap-4 p-4 min-[64rem]:p-5`,i===`full`&&`max-w-none`,u),children:r})}),!!_&&(0,P.jsx)(`aside`,{className:x(`workspace-layout--rail hidden min-h-0 border-l border-border bg-background min-[96rem]:block`,d),children:(0,P.jsx)(`div`,{className:`h-full overflow-y-auto overscroll-contain p-3`,children:n})})]})]})});V.displayName=`WorkspaceLayout`;var H=N.forwardRef(function({title:e,description:t,badges:n,metadata:r,actions:i,secondaryActions:s,status:c,media:l,headerEnd:u,titleSlot:d,className:f,strings:p,...m},h){let g=b(re,p),_=!!r?.length;return(0,P.jsxs)(`div`,{ref:h,className:x(`workspace-record-header--component flex flex-col gap-4 px-4 py-4 min-[64rem]:flex-row min-[64rem]:items-start min-[64rem]:justify-between min-[64rem]:px-5`,f),...m,children:[(0,P.jsxs)(`div`,{className:`workspace-record-header--identity flex min-w-0 flex-1 gap-3`,children:[!!l&&(0,P.jsx)(`div`,{className:`workspace-record-header--media flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-muted/40`,children:l}),(0,P.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-2`,children:[(0,P.jsxs)(`div`,{className:`workspace-record-header--title-row flex min-w-0 flex-wrap items-center gap-2`,children:[d??(0,P.jsx)(a,{tag:`h4`,className:`leading-tight`,children:e}),!!n&&(0,P.jsx)(`div`,{className:`workspace-record-header--badges flex flex-wrap items-center gap-1.5`,children:n}),!!c&&(0,P.jsx)(`div`,{className:`workspace-record-header--status`,children:c})]}),!!t&&(0,P.jsx)(o,{size:`xs`,type:`secondary`,className:`workspace-record-header--description max-w-4xl leading-relaxed`,children:t}),!!_&&(0,P.jsx)(`div`,{"aria-label":g.metadataLabel,className:`workspace-record-header--metadata flex flex-wrap items-center gap-x-4 gap-y-1`,children:r.map((e,t)=>(0,P.jsxs)(`div`,{className:`flex items-baseline gap-1.5`,children:[(0,P.jsx)(o,{tag:`span`,size:`xxs`,type:`secondary`,className:`uppercase`,children:e.label}),(0,P.jsx)(o,{tag:`span`,size:`xs`,weight:`medium`,className:`tabular-nums`,children:e.value})]},e.id??t))})]})]}),!!(i||s||u)&&(0,P.jsxs)(`div`,{className:`workspace-record-header--actions flex shrink-0 flex-wrap items-center gap-2 min-[64rem]:justify-end`,children:[!!s&&(0,P.jsx)(`div`,{"aria-label":g.secondaryActionsLabel,className:`flex flex-wrap items-center gap-1.5`,children:s}),!!i&&(0,P.jsx)(`div`,{"aria-label":g.actionsLabel,className:`flex flex-wrap items-center gap-1.5`,children:i}),!!u&&(0,P.jsx)(`div`,{className:`workspace-record-header--end`,children:u})]})]})});H.displayName=`WorkspaceRecordHeader`;var U=N.forwardRef(function({groups:e,activeId:t,onSelect:n,renderItem:r,footerSlot:i,renderLink:a,LinkComponent:s,className:c,strings:l,...u},d){let f=b(ie,l),p=ne({renderLink:a,LinkComponent:s});return(0,P.jsxs)(`nav`,{ref:d,"aria-label":u[`aria-label`]??f.ariaLabel,className:x(`workspace-nav--component flex h-full flex-col gap-4`,c),...u,children:[(0,P.jsx)(`div`,{className:`workspace-nav--groups flex min-h-0 flex-1 flex-col gap-4`,children:e.map(e=>(0,P.jsxs)(`div`,{className:`workspace-nav--group space-y-2`,children:[!!e.label&&(0,P.jsxs)(`div`,{className:`workspace-nav--group-header px-1`,children:[(0,P.jsx)(o,{size:`xxs`,weight:`semibold`,type:`secondary`,className:`uppercase tracking-wide`,children:e.label}),!!e.description&&(0,P.jsx)(o,{size:`xxs`,type:`secondary`,className:`mt-0.5 leading-snug`,children:e.description})]}),(0,P.jsx)(A,{className:`workspace-nav--items gap-1`,children:e.items.map((i,a)=>{let s=i.id===t,c=B(i,s),l=I[c],u=i.completion===void 0?void 0:R(i.completion),d=e=>{if(i.disabled){e.preventDefault();return}n?.(i)},m={active:s,group:e,index:a,onSelect:d};if(r)return(0,P.jsx)(N.Fragment,{children:r(i,m)},i.id);let h=(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(D,{variant:`icon`,className:x(s&&`bg-primary/10 text-primary`),children:i.icon?(0,P.jsx)(z,{icon:i.icon,className:`size-4`}):(0,P.jsx)(l,{className:x(`size-3.5`,L[c]),"aria-hidden":`true`})}),(0,P.jsxs)(j,{children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,P.jsx)(te,{children:i.label}),s&&(0,P.jsx)(`span`,{className:`sr-only`,children:f.currentLabel})]}),!!i.description&&(0,P.jsx)(O,{clamp:2,children:i.description}),u!==void 0&&(0,P.jsxs)(`div`,{className:`mt-1.5 flex items-center gap-2`,children:[(0,P.jsx)(E,{value:u,className:`h-1.5 flex-1`}),(0,P.jsx)(o,{tag:`span`,size:`xxs`,type:`secondary`,className:`tabular-nums`,children:f.completionLabel(u)})]})]}),!!i.badge&&(0,P.jsx)(k,{children:i.badge})]}),g=x(`workspace-nav--item w-full border border-transparent px-2 py-2 text-left transition-colors`,s&&`border-primary/20 bg-primary/5`,i.warning&&!s&&`border-warning/30 bg-warning/5`,i.disabled&&`pointer-events-none opacity-50`);return i.href?(0,P.jsx)(M,{size:`sm`,render:p({href:i.href,children:h,className:`block`,active:s,disabled:i.disabled,external:i.external,target:i.target,rel:i.rel,onClick:d}),className:g,children:h},i.id):(0,P.jsx)(M,{size:`sm`,render:(0,P.jsx)(`button`,{type:`button`,onClick:d,disabled:i.disabled}),className:g,children:h},i.id)})})]},e.id))}),!!i&&(0,P.jsx)(`div`,{className:`workspace-nav--footer shrink-0 border-t border-border pt-3`,children:i})]})});U.displayName=`WorkspaceNav`;var W=N.forwardRef(function({locales:e,activeLocale:t,onLocaleChange:n,actions:r,status:i,className:a,strings:o,...s},u){let d=b(ae,o),f=e=>{e.disabled||n?.(e)};return(0,P.jsxs)(`div`,{ref:u,className:x(`workspace-locale-strip--component flex flex-col gap-3 border-t border-border bg-muted/20 px-4 py-3 min-[64rem]:flex-row min-[64rem]:items-center min-[64rem]:justify-between min-[64rem]:px-5`,a),...s,children:[(0,P.jsx)(`div`,{className:`workspace-locale-strip--locales flex min-w-0 flex-wrap items-center gap-2`,role:`list`,"aria-label":d.ariaLabel,children:e.map(e=>{let n=e.id===t,r=e.completion===void 0?void 0:R(e.completion);return(0,P.jsx)(l,{type:`button`,variant:n?`primary`:`secondary`,buttonStyle:n?`solid`:`ghost`,onClick:()=>f(e),disabled:e.disabled,"aria-pressed":n,className:x(`workspace-locale-strip--item h-auto min-h-8 justify-start px-2.5 py-1.5`),children:(0,P.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,P.jsx)(`span`,{className:`truncate`,children:e.label}),n&&(0,P.jsx)(`span`,{className:`sr-only`,children:d.activeLabel}),r!==void 0&&(0,P.jsx)(c,{variant:r>=100?`success`:`secondary`,className:`shrink-0`,children:d.completionLabel(r)}),!!e.status&&(0,P.jsx)(`span`,{className:`shrink-0`,children:e.status})]})},e.id)})}),!!(i||r)&&(0,P.jsxs)(`div`,{className:`workspace-locale-strip--actions flex shrink-0 flex-wrap items-center gap-2`,children:[!!i&&(0,P.jsx)(`div`,{className:`workspace-locale-strip--status`,children:i}),!!r&&(0,P.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:r})]})]})});W.displayName=`WorkspaceLocaleStrip`;var G=e({ProductRecordWorkspaceShell:()=>Y,WorkspaceWithoutRail:()=>X});function K({href:e,children:t,className:n,onClick:r,target:i,rel:a}){return(0,P.jsx)(`a`,{href:e??`#`,className:n,onClick:r,target:i,rel:a,children:t})}function q({children:e,height:t=640}){return(0,P.jsx)(`div`,{className:`layout-demo-viewport relative w-full overflow-hidden rounded-md border border-dashed border-border bg-background`,style:{height:t},children:e})}var J=[{id:`content`,label:`Content`,description:`Public catalogue fields`,items:[{id:`basics`,label:`Basics`,description:`Name, handle, summary`,href:`#/products/1/basics`,icon:d,completion:100},{id:`media`,label:`Media`,description:`Cover and gallery`,href:`#/products/1/media`,icon:_,completion:80},{id:`taxonomy`,label:`Taxonomy`,description:`Categories and tags`,href:`#/products/1/taxonomy`,icon:y,completion:70}]},{id:`operations`,label:`Operations`,description:`Fulfilment controls`,items:[{id:`availability`,label:`Availability`,description:`Calendar and capacity`,href:`#/products/1/availability`,icon:ee,completion:55,warning:!0},{id:`policies`,label:`Policies`,description:`Booking and cancellation`,href:`#/products/1/policies`,icon:v,completion:100},{id:`translations`,label:`Translations`,description:`Locale readiness`,href:`#/products/1/translations`,icon:h,completion:42}]}];function oe(){return(0,P.jsxs)(`div`,{className:`space-y-4`,children:[(0,P.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,P.jsx)(w,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,P.jsx)(T,{label:`Readiness`,value:`82%`,layout:`stacked`,mono:!0,valueClassName:`font-semibold`})}),(0,P.jsx)(w,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,P.jsx)(T,{label:`Variants`,value:`6`,layout:`stacked`,mono:!0,valueClassName:`font-semibold`})}),(0,P.jsx)(w,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,P.jsx)(T,{label:`Locales`,value:`2 / 4`,layout:`stacked`,mono:!0,valueClassName:`font-semibold`})})]}),(0,P.jsx)(w,{title:`Workspace body`,description:`Consumers mount composed product cards, feature surfaces, or their own forms here.`,padding:`sm`,headerDivider:!0,children:(0,P.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:[`Identity`,`Media`,`Booking rules`,`Policies`].map(e=>(0,P.jsxs)(`div`,{className:`rounded-md border border-border bg-background px-3 py-2.5`,children:[(0,P.jsx)(o,{weight:`semibold`,children:e}),(0,P.jsx)(o,{size:`xs`,type:`secondary`,className:`mt-1`,children:`Section content keeps a compact admin rhythm inside the scrollable main region.`})]},e))})})]})}function se(){return(0,P.jsxs)(`div`,{className:`space-y-3`,children:[(0,P.jsx)(w,{icon:(0,P.jsx)(m,{className:`size-4`}),title:`Review`,description:`Right rail stays fixed to the workspace column on wide screens.`,padding:`sm`,children:(0,P.jsxs)(`div`,{className:`space-y-2`,children:[(0,P.jsx)(T,{label:`Blocked checks`,value:`2`,mono:!0}),(0,P.jsx)(T,{label:`Last review`,value:`Today`}),(0,P.jsx)(T,{label:`Owner`,value:`Catalogue`})]})}),(0,P.jsx)(w,{title:`Publishing`,padding:`sm`,children:(0,P.jsx)(o,{size:`xs`,type:`secondary`,children:`Rail cards are consumer-owned content. The layout only controls the column and scroll.`})})]})}function Y(){return(0,P.jsx)(q,{children:(0,P.jsx)(V,{header:(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(H,{title:`Balsamic tasting set`,description:`Reusable record header with badges, metadata, actions, and media. Navigation remains framework-neutral through renderLink.`,media:(0,P.jsx)(g,{className:`size-5 text-muted-foreground`}),badges:(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(c,{variant:`success`,children:`Live`}),(0,P.jsx)(c,{variant:`info`,children:`Catalogue`})]}),metadata:[{label:`SKU`,value:`BAL-TASTE-01`},{label:`Owner`,value:`Catalogue`},{label:`Updated`,value:`Today`}],secondaryActions:(0,P.jsx)(l,{variant:`secondary`,buttonStyle:`ghost`,children:`Preview`}),actions:(0,P.jsx)(l,{children:`Save draft`})}),(0,P.jsx)(W,{activeLocale:`en`,locales:[{id:`en`,label:`EN`,completion:100},{id:`el`,label:`EL`,completion:62},{id:`de`,label:`DE`,completion:20}],status:(0,P.jsx)(c,{variant:`warning`,children:`2 checks`}),actions:(0,P.jsx)(l,{variant:`secondary`,buttonStyle:`ghost`,children:`Translate`})})]}),sidebar:(0,P.jsx)(U,{activeId:`basics`,groups:J,renderLink:K}),rail:(0,P.jsx)(se,{}),children:(0,P.jsx)(oe,{})})})}function X(){return(0,P.jsx)(q,{height:520,children:(0,P.jsx)(V,{contentWidth:`default`,header:(0,P.jsx)(H,{title:`Translation workspace`,description:`The shell also works without a right rail. The main content keeps a readable width clamp.`,badges:(0,P.jsx)(c,{variant:`secondary`,children:`Draft`}),actions:(0,P.jsx)(l,{children:`Publish`})}),sidebar:(0,P.jsx)(U,{activeId:`translations`,groups:J.slice(1),renderLink:K}),children:(0,P.jsx)(w,{title:`Focused editor`,description:`A narrower workspace for dense forms or translation review.`,padding:`sm`,children:(0,P.jsx)(`div`,{className:`space-y-3`,children:[`Headline`,`Summary`,`Customer instructions`].map(e=>(0,P.jsxs)(`div`,{className:`rounded-md border border-border bg-background px-3 py-2.5`,children:[(0,P.jsx)(o,{weight:`semibold`,children:e}),(0,P.jsx)(o,{size:`xs`,type:`secondary`,className:`mt-1`,children:`Consumer-owned content inside the workspace body.`})]},e))})})})})}var Z=`import type { ReactNode } from 'react';
+import { Box, ClipboardCheck, Globe2, Image, Languages, PackageCheck, ShieldCheck, SlidersHorizontal } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { InlineStat } from '@/components/base/display';
+import {
+	WorkspaceLayout,
+	WorkspaceLocaleStrip,
+	WorkspaceNav,
+	WorkspaceRecordHeader,
+	type WorkspaceNavGroup,
+} from '@/components/layout/workspace';
+import { Text } from '@/components/typography';
+import type { LayoutLinkRenderProps } from '@/components/layout';
+
+function renderPreviewLink({ href, children, className, onClick, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} onClick={onClick} target={target} rel={rel}>{children}</a>;
+}
+
+function DemoViewport({ children, height = 640 }: { children: ReactNode; height?: number }) {
+	return (
+		<div
+			className="layout-demo-viewport relative w-full overflow-hidden rounded-md border border-dashed border-border bg-background"
+			style={{ height }}
+		>
+			{children}
+		</div>
+	);
+}
+
+const navGroups: WorkspaceNavGroup[] = [
+	{
+		id: 'content',
+		label: 'Content',
+		description: 'Public catalogue fields',
+		items: [
+			{ id: 'basics', label: 'Basics', description: 'Name, handle, summary', href: '#/products/1/basics', icon: Box, completion: 100 },
+			{ id: 'media', label: 'Media', description: 'Cover and gallery', href: '#/products/1/media', icon: Image, completion: 80 },
+			{ id: 'taxonomy', label: 'Taxonomy', description: 'Categories and tags', href: '#/products/1/taxonomy', icon: SlidersHorizontal, completion: 70 },
+		],
+	},
+	{
+		id: 'operations',
+		label: 'Operations',
+		description: 'Fulfilment controls',
+		items: [
+			{ id: 'availability', label: 'Availability', description: 'Calendar and capacity', href: '#/products/1/availability', icon: PackageCheck, completion: 55, warning: true },
+			{ id: 'policies', label: 'Policies', description: 'Booking and cancellation', href: '#/products/1/policies', icon: ShieldCheck, completion: 100 },
+			{ id: 'translations', label: 'Translations', description: 'Locale readiness', href: '#/products/1/translations', icon: Languages, completion: 42 },
+		],
+	},
+];
+
+function MainWorkspaceContent() {
+	return (
+		<div className="space-y-4">
+			<div className="grid gap-3 md:grid-cols-3">
+				<SmartCard padding="sm" className="border-border/80 shadow-sm">
+					<InlineStat label="Readiness" value="82%" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+				<SmartCard padding="sm" className="border-border/80 shadow-sm">
+					<InlineStat label="Variants" value="6" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+				<SmartCard padding="sm" className="border-border/80 shadow-sm">
+					<InlineStat label="Locales" value="2 / 4" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+			</div>
+
+			<SmartCard
+				title="Workspace body"
+				description="Consumers mount composed product cards, feature surfaces, or their own forms here."
+				padding="sm"
+				headerDivider
+			>
+				<div className="grid gap-3 md:grid-cols-2">
+					{['Identity', 'Media', 'Booking rules', 'Policies'].map((label) => (
+						<div key={label} className="rounded-md border border-border bg-background px-3 py-2.5">
+							<Text weight="semibold">{label}</Text>
+							<Text size="xs" type="secondary" className="mt-1">
+								Section content keeps a compact admin rhythm inside the scrollable main region.
+							</Text>
+						</div>
+					))}
+				</div>
+			</SmartCard>
+		</div>
+	);
+}
+
+function WorkspaceRail() {
+	return (
+		<div className="space-y-3">
+			<SmartCard
+				icon={<ClipboardCheck className="size-4" />}
+				title="Review"
+				description="Right rail stays fixed to the workspace column on wide screens."
+				padding="sm"
+			>
+				<div className="space-y-2">
+					<InlineStat label="Blocked checks" value="2" mono />
+					<InlineStat label="Last review" value="Today" />
+					<InlineStat label="Owner" value="Catalogue" />
+				</div>
+			</SmartCard>
+			<SmartCard title="Publishing" padding="sm">
+				<Text size="xs" type="secondary">Rail cards are consumer-owned content. The layout only controls the column and scroll.</Text>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function ProductRecordWorkspaceShell() {
+	return (
+		<DemoViewport>
+			<WorkspaceLayout
+				header={(
+					<>
+						<WorkspaceRecordHeader
+							title="Balsamic tasting set"
+							description="Reusable record header with badges, metadata, actions, and media. Navigation remains framework-neutral through renderLink."
+							media={<Globe2 className="size-5 text-muted-foreground" />}
+							badges={<><Badge variant="success">Live</Badge><Badge variant="info">Catalogue</Badge></>}
+							metadata={[
+								{ label: 'SKU', value: 'BAL-TASTE-01' },
+								{ label: 'Owner', value: 'Catalogue' },
+								{ label: 'Updated', value: 'Today' },
+							]}
+							secondaryActions={<Button variant="secondary" buttonStyle="ghost">Preview</Button>}
+							actions={<Button>Save draft</Button>}
+						/>
+						<WorkspaceLocaleStrip
+							activeLocale="en"
+							locales={[
+								{ id: 'en', label: 'EN', completion: 100 },
+								{ id: 'el', label: 'EL', completion: 62 },
+								{ id: 'de', label: 'DE', completion: 20 },
+							]}
+							status={<Badge variant="warning">2 checks</Badge>}
+							actions={<Button variant="secondary" buttonStyle="ghost">Translate</Button>}
+						/>
+					</>
+				)}
+				sidebar={<WorkspaceNav activeId="basics" groups={navGroups} renderLink={renderPreviewLink} />}
+				rail={<WorkspaceRail />}
+			>
+				<MainWorkspaceContent />
+			</WorkspaceLayout>
+		</DemoViewport>
+	);
+}
+
+export function WorkspaceWithoutRail() {
+	return (
+		<DemoViewport height={520}>
+			<WorkspaceLayout
+				contentWidth="default"
+				header={(
+					<WorkspaceRecordHeader
+						title="Translation workspace"
+						description="The shell also works without a right rail. The main content keeps a readable width clamp."
+						badges={<Badge variant="secondary">Draft</Badge>}
+						actions={<Button>Publish</Button>}
+					/>
+				)}
+				sidebar={<WorkspaceNav activeId="translations" groups={navGroups.slice(1)} renderLink={renderPreviewLink} />}
+			>
+				<SmartCard title="Focused editor" description="A narrower workspace for dense forms or translation review." padding="sm">
+					<div className="space-y-3">
+						{['Headline', 'Summary', 'Customer instructions'].map((label) => (
+							<div key={label} className="rounded-md border border-border bg-background px-3 py-2.5">
+								<Text weight="semibold">{label}</Text>
+								<Text size="xs" type="secondary" className="mt-1">Consumer-owned content inside the workspace body.</Text>
+							</div>
+						))}
+					</div>
+				</SmartCard>
+			</WorkspaceLayout>
+		</DemoViewport>
+	);
+}
+`;function Q(e){let t={h4:`h4`,...e.components};return G||$(`Examples`,!1),Y||$(`Examples.ProductRecordWorkspaceShell`,!0),X||$(`Examples.WorkspaceWithoutRail`,!0),(0,P.jsxs)(r,{title:`Layout · Workspace`,description:`Nested record workspace shell with header, workflow navigation, scroll-owned body, and optional right rail.`,layer:`layout`,status:`ready`,sourcePath:`src/components/layout/workspace`,children:[(0,P.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,P.jsx)(u,{name:`ProductRecordWorkspaceShell`,source:Z,children:(0,P.jsx)(Y,{})}),(0,P.jsx)(u,{name:`WorkspaceWithoutRail`,source:Z,children:(0,P.jsx)(X,{})})]}),(0,P.jsxs)(i,{title:`API`,id:`api`,children:[(0,P.jsx)(t.h4,{children:`WorkspaceLayout`}),(0,P.jsx)(C,{component:`WorkspaceLayout`}),(0,P.jsx)(t.h4,{children:`WorkspaceRecordHeader`}),(0,P.jsx)(C,{component:`WorkspaceRecordHeader`}),(0,P.jsx)(t.h4,{children:`WorkspaceNav`}),(0,P.jsx)(C,{component:`WorkspaceNav`}),(0,P.jsx)(t.h4,{children:`WorkspaceLocaleStrip`}),(0,P.jsx)(C,{component:`WorkspaceLocaleStrip`})]})]})}function ce(e={}){let{wrapper:t}=e.components||{};return t?(0,P.jsx)(t,{...e,children:(0,P.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{ce as default};

package/dist/showcase/assets/lock-DXmvLEEx.js

@@ -0,0 +1 @@
+import{a as e}from"./index-DaYVSqKu.js";var t=e(`lock`,[[`rect`,{width:`18`,height:`11`,x:`3`,y:`11`,rx:`2`,ry:`2`,key:`1w4ew1`}],[`path`,{d:`M7 11V7a5 5 0 0 1 10 0v4`,key:`fwvmzm`}]]);export{t};

package/dist/showcase/assets/lock-keyhole-Cu6M-jjE.js

@@ -0,0 +1 @@
+import{a as e}from"./index-DaYVSqKu.js";var t=e(`lock-keyhole`,[[`circle`,{cx:`12`,cy:`16`,r:`1`,key:`1au0dj`}],[`rect`,{x:`3`,y:`10`,width:`18`,height:`12`,rx:`2`,key:`6s8ecr`}],[`path`,{d:`M7 10V7a5 5 0 0 1 10 0v3`,key:`1pqi11`}]]);export{t};

package/dist/showcase/assets/mail-CXVFHkzh.js

@@ -0,0 +1 @@
+import{a as e}from"./index-DaYVSqKu.js";var t=e(`mail`,[[`path`,{d:`m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7`,key:`132q7q`}],[`rect`,{x:`2`,y:`4`,width:`20`,height:`16`,rx:`2`,key:`izxlao`}]]);export{t};

package/dist/showcase/assets/mail-check-BNEu3j2a.js

@@ -0,0 +1 @@
+import{a as e}from"./index-DaYVSqKu.js";var t=e(`mail-check`,[[`path`,{d:`M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8`,key:`12jkf8`}],[`path`,{d:`m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7`,key:`1ocrg3`}],[`path`,{d:`m16 19 2 2 4-4`,key:`1b14m6`}]]);export{t};