admin-ui-starter-kit 0.5.0 → 0.6.1

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

@@ -0,0 +1,224 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-D-N8Ze16.js";import{t as s}from"./brain-CNapE0CP.js";import{t as c}from"./chart-column-Dbekq8cy.js";import{t as l}from"./example-PsbgbESI.js";import{n as u,t as d}from"./header-notifications-B2v1Mdri.js";import{t as f}from"./credit-card-CFq0S1Ma.js";import{t as p}from"./external-link-CgB9zfWz.js";import{t as m}from"./house-opqNxOmP.js";import{t as h}from"./inbox-WrbeTKEw.js";import{c as ee,f as te,m as g,r as ne,t as _,u as re}from"./sidebar.context-BWMPnGn6.js";import{t as v}from"./package-DLn6nx-u.js";import{t as y}from"./settings-DkTHc0Ob.js";import{t as b}from"./shield-Cme7_JJR.js";import{t as x}from"./users-DAlxvktS.js";import{d as S,i as ie,l as C,n as w}from"./index-QESvAJrb.js";import{t as T}from"./smart-card-C6-idFYI.js";import{t as ae}from"./separator-Ha9YxI2x.js";import{t as oe}from"./use-layout-link-DIUWH-oo.js";import{a as se,c as E,d as ce,f as le,i as ue,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-Co0LUSvz.js";import{t as F}from"./page-header-BGqE9hzO.js";import{t as I}from"./sidebar-bz_FzvjM.js";import{t as L}from"./header-CgApizpk.js";var R=C(`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`}]]),z=C(`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`}]]),B=t(n(),1),V=S();function de({item:e}){return(0,V.jsx)(a,{tag:`span`,weight:`medium`,className:`truncate text-inherit`,children:D(e)})}function H({items:e,label:t=`Platform`,currentUrl:n=`/`,iconMap:r={},liveBadges:i,renderLink:a,LinkComponent:o,renderItem:s,className:c}){let l=oe({renderLink:a,LinkComponent:o});return(0,V.jsxs)(ee,{className:w(`px-2 py-0`,c),children:[!!t&&(0,V.jsx)(re,{children:t}),(0,V.jsx)(te,{className:`gap-0.5`,children:e.map((e,t)=>{let a=!!e.href&&P(n,A(e.href)),o=le(e.handle,e.badge,i),c={depth:0,active:a,expanded:!1,badge:o,renderLink:l},u=D(e);if(s)return(0,V.jsx)(B.Fragment,{children:s(e,c)},E(e,t));let d=(0,V.jsxs)(V.Fragment,{children:[!!e.icon&&(0,V.jsx)(k,{icon:e.icon,iconMap:r,className:`size-4`,"aria-hidden":`true`}),(0,V.jsx)(de,{item:e}),!!o&&(0,V.jsx)(M,{value:o})]});return(0,V.jsx)(g,{children:(0,V.jsx)(I,{isActive:a,render:e.href&&!e.disabled?ce(l,e,d,void 0,a):void 0,tooltip:{children:u},disabled:e.disabled,className:w(`h-8 font-medium`,a&&`bg-sidebar-accent text-sidebar-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:d})},E(e,t))})})]})}var fe=e({AppSidebarShell:()=>J,CustomRowRenderer:()=>X,NavigationPartials:()=>Y}),U={Platform:[{label:`Dashboard`,href:`#/layout/sidebar`,icon:m,handle:`dashboard`},{label:`Customers`,href:`#/customers`,icon:x,handle:`customers`,badge:24},{label:`Orders`,href:`#/orders`,icon:v,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:c,handle:`reports`}]},W=[{label:`Support`,href:`#/support`,icon:R,handle:`support`},{label:`Security`,href:`#/security`,icon:b,handle:`security`},{label:`External docs`,href:`https://example.com`,icon:p,handle:`docs`,external:!0}],G=[{label:`Settings`,href:`#/settings`,icon:ie,handle:`settings`},{label:`AI`,href:`#/ai`,icon:s,handle:`ai`}],pe={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,V.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function q(){return(0,V.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,V.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,V.jsx)(z,{className:`size-4`,"aria-hidden":`true`})}),(0,V.jsxs)(`div`,{className:`min-w-0`,children:[(0,V.jsx)(a,{weight:`semibold`,className:`truncate text-inherit`,children:`Atlas Admin`}),(0,V.jsx)(a,{size:`xxs`,type:`secondary`,className:`truncate`,children:`Production`})]})]})}function me(){return(0,V.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,V.jsx)(z,{className:`size-4`,"aria-hidden":`true`})})}function J(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,V.jsx)(`div`,{className:`flex h-168 w-full min-w-224 overflow-hidden rounded-lg border border-border bg-background p-3`,children:(0,V.jsxs)(`div`,{className:`flex min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background shadow-sm`,children:[(0,V.jsx)(N,{className:`h-full p-0`,surfaceClassName:`bg-background`,headerClassName:`px-4 pb-3 pt-4`,logoClassName:`px-0`,logo:(0,V.jsx)(q,{}),collapsedLogo:(0,V.jsx)(me,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:z,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:z,external:!1}],workspaceStrings:{label:`Workspace`,select:`Switch workspace`},navigationGroups:U,footerNavItems:G,currentUrl:`#/orders/pending`,liveBadges:{customers:31,invoices:14},renderLink:K,slots:{afterNavigation:(0,V.jsx)(j,{items:W,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K})}}),(0,V.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,V.jsx)(L,{renderLink:K,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`justify-start`,slots:{center:(0,V.jsx)(u,{className:`w-full max-w-sm`}),right:(0,V.jsxs)(V.Fragment,{children:[(0,V.jsx)(d,{unreadCount:2,notifications:[]}),(0,V.jsx)(ae,{orientation:`vertical`,className:`h-7`}),(0,V.jsx)(ne,{user:pe,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,V.jsxs)(`main`,{className:`min-w-0 flex-1 space-y-4 p-5`,children:[(0,V.jsx)(F,{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,V.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[`Manual review`,`Awaiting stock`,`Ready to fulfill`].map((e,t)=>(0,V.jsxs)(T,{padding:`default`,className:`shadow-sm`,children:[(0,V.jsx)(a,{size:`xs`,type:`secondary`,children:e}),(0,V.jsx)(a,{weight:`semibold`,children:[8,12,36][t]})]},e))})]})]})]})})})})}function Y(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,V.jsxs)(`div`,{className:`grid w-full gap-5 md:grid-cols-2`,children:[(0,V.jsx)(`div`,{className:`h-120 overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm`,children:(0,V.jsxs)(se,{collapsible:`none`,className:`w-full`,surfaceClassName:`bg-background`,children:[(0,V.jsx)(O,{logo:(0,V.jsx)(q,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:z,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:z,external:!1}],renderLink:K}),(0,V.jsx)(ue,{navigationByGroups:U,currentUrl:`#/customers`,liveBadges:{customers:9},renderLink:K})]})}),(0,V.jsxs)(`div`,{className:`h-120 overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm`,children:[(0,V.jsx)(H,{label:`Flat navigation`,items:[{label:`Inbox`,href:`#/inbox`,icon:h,badge:6},{label:`Settings`,href:`#/settings`,icon:y},{label:`Disabled item`,href:`#/disabled`,icon:b,disabled:!0}],currentUrl:`#/inbox`,renderLink:K}),(0,V.jsxs)(`div`,{className:`mt-4 border-t border-sidebar-border pt-3`,children:[(0,V.jsx)(j,{items:W,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K}),(0,V.jsx)(j,{items:G,currentUrl:`#/orders/pending`,renderLink:K})]})]})]})})})}function X(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsx)(_,{defaultOpen:!0,className:`min-h-0`,children:(0,V.jsx)(`div`,{className:`rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm`,children:(0,V.jsx)(H,{label:`Custom renderItem`,items:[{label:`Priority inbox`,href:`#/priority`,icon:h,badge:3},{label:`Billing review`,href:`#/billing`,icon:f,badge:11}],renderLink:K,renderItem:(e,t)=>(0,V.jsx)(g,{children:(0,V.jsxs)(`div`,{className:`flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent`,children:[(0,V.jsxs)(`div`,{children:[(0,V.jsx)(a,{weight:`medium`,className:`text-inherit`,children:e.label}),(0,V.jsxs)(a,{size:`xxs`,type:`secondary`,children:[`active: `,String(t.active)]})]}),!!t.badge&&(0,V.jsx)(i,{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-168 w-full min-w-224 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="default" 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-120 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-120 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 fe||$(`Examples`,!1),J||$(`Examples.AppSidebarShell`,!0),X||$(`Examples.CustomRowRenderer`,!0),Y||$(`Examples.NavigationPartials`,!0),(0,V.jsx)(r,{title:`Layout · Sidebar`,description:`Full app sidebar assembly plus reusable navigation, workspace, and footer item partials.`,layer:`layout`,status:`ready`,children:(0,V.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,V.jsx)(l,{name:`AppSidebarShell`,source:Z,children:(0,V.jsx)(J,{})}),(0,V.jsx)(l,{name:`NavigationPartials`,source:Z,children:(0,V.jsx)(Y,{})}),(0,V.jsx)(l,{name:`CustomRowRenderer`,source:Z,children:(0,V.jsx)(X,{})})]})})}function he(e={}){let{wrapper:t}=e.components||{};return t?(0,V.jsx)(t,{...e,children:(0,V.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-DHUNAnFA.js

@@ -0,0 +1,117 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-D-N8Ze16.js";import{r as a,t as o}from"./example-PsbgbESI.js";import{t as s}from"./chevrons-up-down-DZB44PVY.js";import{b as c,f as l,m as u,n as d,r as f,t as p}from"./sidebar.context-BWMPnGn6.js";import{t as m}from"./settings-DkTHc0Ob.js";import{t as h}from"./user-plus-B1Pi7SNv.js";import{t as g}from"./user-DLuRcjl0.js";import{N as _,d as v,n as y}from"./index-QESvAJrb.js";import{a as b,c as x,l as S,r as C,t as w}from"./dropdown-menu-DZ47rJaE.js";import{a as T,i as E,n as D,o as O,r as k,t as A}from"./avatar-D3kvVy00.js";import{n as j}from"./PreviewLayout-wYGhlcJt.js";import{t as M}from"./sidebar-bz_FzvjM.js";var N=v(),P={small:{avatar:`size-avatar-sm`,gap:`gap-space-sm`,nameClass:`text-xs`,subtitleClass:`text-xxs`},default:{avatar:`size-avatar`,gap:`gap-space-md`,nameClass:`text-sm`,subtitleClass:`text-xs`}};function F(e){return e===`small`||e==="default"?e:e===`xs`||e===`sm`?`small`:`default`}function I({name:e,subtitle:t,avatarUrl:n,avatarAlt:i,initials:a,avatar:o,trailing:s,size:c=`default`,className:l}){let u=P[F(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:y(`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:`inherit`,weight:`semibold`,className:y(`truncate leading-snug`,u.nameClass),children:e}),!!t&&(0,N.jsx)(r,{size:`inherit`,type:`secondary`,className:y(`truncate leading-tight`,u.subtitleClass),children:t})]}),!!s&&(0,N.jsx)(`div`,{className:`shrink-0`,children:s})]})}I.displayName=`UserCell`;var L={profile:`Profile`,settings:`Settings`,logout:`Log out`};function R(e){return e.split(` `).map(e=>e[0]).filter(Boolean).slice(0,2).join(``).toUpperCase()}function z({user:e,customContent:t,onProfile:n,onSettings:i,onLogout:a,strings:o,renderTrigger:f}){let p=_(L,o),{state:h,isMobile:v}=d(),y=v||h!==`collapsed`?`bottom`:`right`,T=R(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-avatar 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 B=e({AvatarStates:()=>U,CustomTriggerCustomContent:()=>K,HeaderUserMenuExample:()=>W,SidebarUserMenu:()=>G}),V=[{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 H(e){return e.split(` `).map(e=>e[0]).join(``).slice(0,2).toUpperCase()}function U(){return(0,N.jsx)(N.Fragment,{children:(0,N.jsxs)(j,{children:[V.map((e,t)=>(0,N.jsxs)(A,{className:t===0?`size-avatar-lg`:void 0,children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{children:H(e.name)}),(0,N.jsx)(D,{className:t===1?`bg-warning`:`bg-success`})]},e.name)),(0,N.jsxs)(E,{children:[V.map(e=>(0,N.jsxs)(A,{children:[!!e.avatar&&(0,N.jsx)(O,{src:e.avatar,alt:e.name}),(0,N.jsx)(k,{children:H(e.name)})]},e.name)),(0,N.jsx)(T,{children:`+8`})]})]})})}function W(){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:V[0],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})})}function G(){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)(z,{user:V[1],onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})})})})}function K(){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:V[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)(I,{size:`small`,name:e.name,initials:H(e.name),trailing:(0,N.jsx)(n,{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 q=`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/composed/data-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} className={index === 0 ? 'size-avatar-lg' : undefined}>
+										{!!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="small"
+									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 J(e){return B||X(`Examples`,!1),U||X(`Examples.AvatarStates`,!0),K||X(`Examples.CustomTriggerCustomContent`,!0),W||X(`Examples.HeaderUserMenuExample`,!0),G||X(`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)(i,{title:`Examples`,id:`examples`,children:[(0,N.jsx)(o,{name:`AvatarStates`,source:q,children:(0,N.jsx)(U,{})}),(0,N.jsx)(o,{name:`HeaderUserMenuExample`,source:q,children:(0,N.jsx)(W,{})}),(0,N.jsx)(o,{name:`SidebarUserMenu`,source:q,children:(0,N.jsx)(G,{})}),(0,N.jsx)(o,{name:`CustomTriggerCustomContent`,source:q,children:(0,N.jsx)(K,{})})]})})}function Y(e={}){let{wrapper:t}=e.components||{};return t?(0,N.jsx)(t,{...e,children:(0,N.jsx)(J,{...e})}):J(e)}function X(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Y as default};

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

@@ -0,0 +1,191 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{f as r,n as i,o as a,p as o,t as s}from"./section-D-N8Ze16.js";import{t as c}from"./box-Bfv5RQBf.js";import{Or as l,r as u,t as d}from"./example-PsbgbESI.js";import{t as f}from"./circle-alert-9j29FrsT.js";import{t as p}from"./circle-CY0DkTje.js";import{t as m}from"./earth-BuXqXHh6.js";import{t as h}from"./image-apDSlTAx.js";import{t as g}from"./languages-CGYZVmbV.js";import{t as _}from"./package-check-B0wyBUSU.js";import{t as ee}from"./shield-check-BW_7p6Xf.js";import{N as v,d as y,i as te,n as b,s as ne}from"./index-QESvAJrb.js";import{t as x}from"./props-table-CCcohuyT.js";import{t as S}from"./smart-card-C6-idFYI.js";import{c as C,i as w,n as T,o as E,r as D,t as O,u as k}from"./item-BMSdEK3V.js";import{t as A}from"./progress-jIJ_EIKE.js";import{t as j}from"./use-layout-link-DIUWH-oo.js";import{t as M}from"./inline-stat-CO01t7SJ.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=y(),F={default:`[--workspace-content-max-width:58rem]`,wide:`[--workspace-content-max-width:86rem]`,full:`[--workspace-content-max-width:none]`},I={complete:l,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:b(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:b(`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:b(`workspace-layout--header shrink-0 border-b border-border bg-background`,o),children:e}),(0,P.jsxs)(`div`,{className:b(`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:b(`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:b(`workspace-layout--main min-h-0 min-w-0 overflow-y-auto overscroll-contain`,l),children:(0,P.jsx)(`div`,{className:b(`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:b(`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:i,actions:a,secondaryActions:s,status:c,media:l,headerEnd:u,titleSlot:d,className:f,strings:p,...m},h){let g=v(re,p),_=!!i?.length;return(0,P.jsxs)(`div`,{ref:h,className:b(`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)(r,{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:i.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))})]})]}),!!(a||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}),!!a&&(0,P.jsx)(`div`,{"aria-label":g.actionsLabel,className:`flex flex-wrap items-center gap-1.5`,children:a}),!!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=v(ie,l),p=j({renderLink:a,LinkComponent:s});return(0,P.jsxs)(`nav`,{ref:d,"aria-label":u[`aria-label`]??f.ariaLabel,className:b(`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)(E,{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)(C,{variant:`icon`,className:b(s&&`bg-primary/10 text-primary`),children:i.icon?(0,P.jsx)(z,{icon:i.icon,className:`size-4`}):(0,P.jsx)(l,{className:b(`size-3.5`,L[c]),"aria-hidden":`true`})}),(0,P.jsxs)(D,{children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,P.jsx)(k,{children:i.label}),s&&(0,P.jsx)(`span`,{className:`sr-only`,children:f.currentLabel})]}),!!i.description&&(0,P.jsx)(w,{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)(A,{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)(T,{children:i.badge})]}),g=b(`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)(O,{size:`default`,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)(O,{size:`default`,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:o,strings:s,...c},l){let d=v(ae,s),f=e=>{e.disabled||n?.(e)};return(0,P.jsxs)(`div`,{ref:l,className:b(`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`,o),...c,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)(u,{type:`button`,variant:n?`primary`:`secondary`,buttonStyle:n?`solid`:`ghost`,onClick:()=>f(e),disabled:e.disabled,"aria-pressed":n,className:b(`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)(a,{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:c,completion:100},{id:`media`,label:`Media`,description:`Cover and gallery`,href:`#/products/1/media`,icon:h,completion:80},{id:`taxonomy`,label:`Taxonomy`,description:`Categories and tags`,href:`#/products/1/taxonomy`,icon:te,completion:70}]},{id:`operations`,label:`Operations`,description:`Fulfilment controls`,items:[{id:`availability`,label:`Availability`,description:`Calendar and capacity`,href:`#/products/1/availability`,icon:_,completion:55,warning:!0},{id:`policies`,label:`Policies`,description:`Booking and cancellation`,href:`#/products/1/policies`,icon:ee,completion:100},{id:`translations`,label:`Translations`,description:`Locale readiness`,href:`#/products/1/translations`,icon:g,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)(S,{padding:`default`,className:`border-border/80 shadow-sm`,children:(0,P.jsx)(M,{label:`Readiness`,value:`82%`,layout:`stacked`,mono:!0,valueClassName:`font-semibold`})}),(0,P.jsx)(S,{padding:`default`,className:`border-border/80 shadow-sm`,children:(0,P.jsx)(M,{label:`Variants`,value:`6`,layout:`stacked`,mono:!0,valueClassName:`font-semibold`})}),(0,P.jsx)(S,{padding:`default`,className:`border-border/80 shadow-sm`,children:(0,P.jsx)(M,{label:`Locales`,value:`2 / 4`,layout:`stacked`,mono:!0,valueClassName:`font-semibold`})})]}),(0,P.jsx)(S,{title:`Workspace body`,description:`Consumers mount composed product cards, feature surfaces, or their own forms here.`,padding:`default`,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)(S,{icon:(0,P.jsx)(ne,{className:`size-4`}),title:`Review`,description:`Right rail stays fixed to the workspace column on wide screens.`,padding:`default`,children:(0,P.jsxs)(`div`,{className:`space-y-2`,children:[(0,P.jsx)(M,{label:`Blocked checks`,value:`2`,mono:!0}),(0,P.jsx)(M,{label:`Last review`,value:`Today`}),(0,P.jsx)(M,{label:`Owner`,value:`Catalogue`})]})}),(0,P.jsx)(S,{title:`Publishing`,padding:`default`,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)(m,{className:`size-5 text-muted-foreground`}),badges:(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(a,{variant:`success`,children:`Live`}),(0,P.jsx)(a,{variant:`info`,children:`Catalogue`})]}),metadata:[{label:`SKU`,value:`BAL-TASTE-01`},{label:`Owner`,value:`Catalogue`},{label:`Updated`,value:`Today`}],secondaryActions:(0,P.jsx)(u,{variant:`secondary`,buttonStyle:`ghost`,children:`Preview`}),actions:(0,P.jsx)(u,{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)(a,{variant:`warning`,children:`2 checks`}),actions:(0,P.jsx)(u,{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)(a,{variant:`secondary`,children:`Draft`}),actions:(0,P.jsx)(u,{children:`Publish`})}),sidebar:(0,P.jsx)(U,{activeId:`translations`,groups:J.slice(1),renderLink:K}),children:(0,P.jsx)(S,{title:`Focused editor`,description:`A narrower workspace for dense forms or translation review.`,padding:`default`,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/composed/data-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="default" className="border-border/80 shadow-sm">
+					<InlineStat label="Readiness" value="82%" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+				<SmartCard padding="default" className="border-border/80 shadow-sm">
+					<InlineStat label="Variants" value="6" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+				<SmartCard padding="default" 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="default"
+				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="default"
+			>
+				<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="default">
+				<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="default">
+					<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)(i,{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)(s,{title:`Examples`,id:`examples`,children:[(0,P.jsx)(d,{name:`ProductRecordWorkspaceShell`,source:Z,children:(0,P.jsx)(Y,{})}),(0,P.jsx)(d,{name:`WorkspaceWithoutRail`,source:Z,children:(0,P.jsx)(X,{})})]}),(0,P.jsxs)(s,{title:`API`,id:`api`,children:[(0,P.jsx)(t.h4,{children:`WorkspaceLayout`}),(0,P.jsx)(x,{component:`WorkspaceLayout`}),(0,P.jsx)(t.h4,{children:`WorkspaceRecordHeader`}),(0,P.jsx)(x,{component:`WorkspaceRecordHeader`}),(0,P.jsx)(t.h4,{children:`WorkspaceNav`}),(0,P.jsx)(x,{component:`WorkspaceNav`}),(0,P.jsx)(t.h4,{children:`WorkspaceLocaleStrip`}),(0,P.jsx)(x,{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/lib-g_kR7X9Z.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{P as n}from"./index-QESvAJrb.js";import{t as r}from"./leaflet-src-S_KZeH2q.js";import{a as i,c as a,d as o,f as s,h as c,i as l,l as u,m as d,n as f,o as p,p as m,r as h,s as g,t as _,u as v}from"./generic-DlyFJDj6.js";function y(e,t,n){t.center!==n.center&&e.setLatLng(t.center),t.radius!=null&&t.radius!==n.radius&&e.setRadius(t.radius)}var b=e(r(),1);function x(e){return e.split(` `).filter(Boolean)}function S(e,t){for(let n of x(t))b.DomUtil.addClass(e,n)}function C(e,t,n){let{opacity:r,zIndex:i}=t;r!=null&&r!==n.opacity&&e.setOpacity(r),i!=null&&i!==n.zIndex&&e.setZIndex(i)}function w(e,t,n){t.bounds instanceof b.LatLngBounds&&t.bounds!==n.bounds&&e.setBounds(t.bounds),t.opacity!=null&&t.opacity!==n.opacity&&e.setOpacity(t.opacity),t.zIndex!=null&&t.zIndex!==n.zIndex&&e.setZIndex(t.zIndex)}var T=e(t(),1);function E(){return c().map}function D(e,t){let n=E();return(0,T.useEffect)(function(){return n.on(e,t),function(){n.off(e,t)}},[n,e,t]),n}function O(e){let t=E();return(0,T.useEffect)(function(){return t.on(e),function(){t.off(e)}},[t,e]),t}var k=_(function(e){return new b.Control.Attribution(e)}),A=l(function({center:e,children:t,...n},r){let i=new b.Circle(e,n);return a(i,d(r,{overlayContainer:i}))},y),j=l(function({center:e,children:t,...n},r){let i=new b.CircleMarker(e,n);return a(i,d(r,{overlayContainer:i}))},y),M=l(function({children:e,...t},n){let r=new b.FeatureGroup([],t);return a(r,d(n,{layerContainer:r,overlayContainer:r}))}),N=l(function({data:e,...t},n){let r=new b.GeoJSON(e,t);return a(r,d(n,{overlayContainer:r}))},function(e,t,n){t.style!==n.style&&(t.style==null?e.resetStyle():e.setStyle(t.style))}),P=f(function({bounds:e,url:t,...n},r){let i=new b.ImageOverlay(t,e,n);return a(i,d(r,{overlayContainer:i}))},function(e,t,n){if(w(e,t,n),t.bounds!==n.bounds){let n=t.bounds instanceof b.LatLngBounds?t.bounds:new b.LatLngBounds(t.bounds);e.setBounds(n)}t.url!==n.url&&e.setUrl(t.url)}),F=f(function({children:e,...t},n){let r=new b.LayerGroup([],t);return a(r,d(n,{layerContainer:r}))}),I=o(v(g(function({children:e,...t},n){let r=new b.Control.Layers(void 0,void 0,t);return a(r,d(n,{layersControl:r}))},function(e,t,n){t.collapsed!==n.collapsed&&(t.collapsed===!0?e.collapse():e.expand())})));function L(e){return function(t){let n=c(),r=(0,T.useRef)(t),[i,a]=(0,T.useState)(null),{layersControl:o,map:l}=n,u=(0,T.useCallback)(t=>{o!=null&&(r.current.checked&&l.addLayer(t),e(o,t,r.current.name),a(t))},[e,o,l]),f=(0,T.useCallback)(e=>{o?.removeLayer(e),a(null)},[o]),p=(0,T.useMemo)(()=>d(n,{layerContainer:{addLayer:u,removeLayer:f}}),[n,u,f]);return(0,T.useEffect)(()=>{i!==null&&r.current!==t&&(t.checked===!0&&(r.current.checked==null||r.current.checked===!1)?l.addLayer(i):r.current.checked===!0&&(t.checked==null||t.checked===!1)&&l.removeLayer(i),r.current=t)}),t.children?T.createElement(s,{value:p},t.children):null}}I.BaseLayer=L(function(e,t,n){e.addBaseLayer(t,n)}),I.Overlay=L(function(e,t,n){e.addOverlay(t,n)});function R({bounds:e,boundsOptions:t,center:n,children:r,className:i,id:a,placeholder:o,style:c,whenReady:l,zoom:u,...d},f){let[p]=(0,T.useState)({className:i,id:a,style:c}),[h,g]=(0,T.useState)(null),_=(0,T.useRef)(void 0);(0,T.useImperativeHandle)(f,()=>h?.map??null,[h]);let v=(0,T.useCallback)(r=>{if(r!==null&&!_.current){let i=new b.Map(r,d);_.current=i,n!=null&&u!=null?i.setView(n,u):e!=null&&i.fitBounds(e,t),l!=null&&i.whenReady(l),g(m(i))}},[]);(0,T.useEffect)(()=>()=>{h?.map.remove()},[h]);let y=h?T.createElement(s,{value:h},r):o??null;return T.createElement(`div`,{...p,ref:v},y)}var z=(0,T.forwardRef)(R),B=f(function({position:e,...t},n){let r=new b.Marker(e,t);return a(r,d(n,{overlayContainer:r}))},function(e,t,n){t.position!==n.position&&e.setLatLng(t.position),t.icon!=null&&t.icon!==n.icon&&e.setIcon(t.icon),t.zIndexOffset!=null&&t.zIndexOffset!==n.zIndexOffset&&e.setZIndexOffset(t.zIndexOffset),t.opacity!=null&&t.opacity!==n.opacity&&e.setOpacity(t.opacity),e.dragging!=null&&t.draggable!==n.draggable&&(t.draggable===!0?e.dragging.enable():e.dragging.disable())}),V=e(n(),1),H=[`mapPane`,`markerPane`,`overlayPane`,`popupPane`,`shadowPane`,`tilePane`,`tooltipPane`];function U(e,t){let{[t]:n,...r}=e;return r}function W(e,t,n){if(H.indexOf(e)!==-1)throw Error(`You must use a unique name for a pane that is not a default Leaflet pane: ${e}`);if(n.map.getPane(e)!=null)throw Error(`A pane with this name already exists: ${e}`);let r=t.pane??n.pane,i=r?n.map.getPane(r):void 0,a=n.map.createPane(e,i);if(t.className!=null&&S(a,t.className),t.style!=null)for(let e of Object.keys(t.style))a.style[e]=t.style[e];return a}function G(e,t){let[n]=(0,T.useState)(e.name),[r,i]=(0,T.useState)(null);(0,T.useImperativeHandle)(t,()=>r,[r]);let a=c(),o=(0,T.useMemo)(()=>({...a,pane:n}),[a]);return(0,T.useEffect)(()=>(i(W(n,e,a)),function(){a.map.getPane(n)?.remove?.(),a.map._panes!=null&&(a.map._panes=U(a.map._panes,n),a.map._paneRenderers=U(a.map._paneRenderers,n))}),[]),e.children!=null&&r!=null?(0,V.createPortal)(T.createElement(s,{value:o},e.children),r):null}var K=(0,T.forwardRef)(G),q=l(function({positions:e,...t},n){let r=new b.Polygon(e,t);return a(r,d(n,{overlayContainer:r}))},function(e,t,n){t.positions!==n.positions&&e.setLatLngs(t.positions)}),J=l(function({positions:e,...t},n){let r=new b.Polyline(e,t);return a(r,d(n,{overlayContainer:r}))},function(e,t,n){t.positions!==n.positions&&e.setLatLngs(t.positions)}),Y=h(function(e,t){return a(new b.Popup(e,t.overlayContainer),t)},function(e,t,{position:n},r){(0,T.useEffect)(function(){let{instance:i}=e;function a(e){e.popup===i&&(i.update(),r(!0))}function o(e){e.popup===i&&r(!1)}return t.map.on({popupopen:a,popupclose:o}),t.overlayContainer==null?(n!=null&&i.setLatLng(n),i.openOn(t.map)):t.overlayContainer.bindPopup(i),function(){t.map.off({popupopen:a,popupclose:o}),t.overlayContainer?.unbindPopup(),t.map.removeLayer(i)}},[e,t,r,n])}),X=l(function({bounds:e,...t},n){let r=new b.Rectangle(e,t);return a(r,d(n,{overlayContainer:r}))},function(e,t,n){t.bounds!==n.bounds&&e.setBounds(t.bounds)}),Z=_(function(e){return new b.Control.Scale(e)}),Q=p(g(function(e,t){let{attributes:n,bounds:r,...i}=e,o=document.createElementNS(`http://www.w3.org/2000/svg`,`svg`);if(o.setAttribute(`xmlns`,`http://www.w3.org/2000/svg`),n!=null)for(let e of Object.keys(n))o.setAttribute(e,n[e]);return a(new b.SVGOverlay(o,r,i),t,o)},w));function $({children:e,...t},n){let{instance:r,container:i}=Q(t).current;return(0,T.useImperativeHandle)(n,()=>r),i==null||e==null?null:(0,V.createPortal)(e,i)}var ee=(0,T.forwardRef)($),te=i(function({url:e,...t},n){return a(new b.TileLayer(e,u(t,n)),n)},function(e,t,n){C(e,t,n);let{url:r}=t;r!=null&&r!==n.url&&e.setUrl(r)}),ne=h(function(e,t){return a(new b.Tooltip(e,t.overlayContainer),t)},function(e,t,{position:n},r){(0,T.useEffect)(function(){let i=t.overlayContainer;if(i==null)return;let{instance:a}=e,o=e=>{e.tooltip===a&&(n!=null&&a.setLatLng(n),a.update(),r(!0))},s=e=>{e.tooltip===a&&r(!1)};return i.on({tooltipopen:o,tooltipclose:s}),i.bindTooltip(a),function(){i.off({tooltipopen:o,tooltipclose:s}),i._map!=null&&i.unbindTooltip()}},[e,t,r,n])}),re=f(function({bounds:e,url:t,...n},r){let i=new b.VideoOverlay(t,e,n);return n.play===!0&&i.getElement()?.play(),a(i,d(r,{overlayContainer:i}))},function(e,t,n){w(e,t,n),typeof t.url==`string`&&t.url!==n.url&&e.setUrl(t.url);let r=e.getElement();r!=null&&(t.play===!0&&!n.play?r.play():!t.play&&n.play===!0&&r.pause())}),ie=i(function({eventHandlers:e,params:t={},url:n,...r},i){return a(new b.TileLayer.WMS(n,{...t,...u(r,i)}),i)},function(e,t,n){C(e,t,n),t.params!=null&&t.params!==n.params&&e.setParams(t.params)}),ae=_(function(e){return new b.Control.Zoom(e)});export{k as AttributionControl,A as Circle,j as CircleMarker,M as FeatureGroup,N as GeoJSON,P as ImageOverlay,F as LayerGroup,I as LayersControl,z as MapContainer,B as Marker,K as Pane,q as Polygon,J as Polyline,Y as Popup,X as Rectangle,ee as SVGOverlay,Z as ScaleControl,te as TileLayer,ne as Tooltip,re as VideoOverlay,ie as WMSTileLayer,ae as ZoomControl,E as useMap,D as useMapEvent,O as useMapEvents};

package/dist/showcase/assets/list-checks-CXt8visd.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.js";var t=e(`list-checks`,[[`path`,{d:`M13 5h8`,key:`a7qcls`}],[`path`,{d:`M13 12h8`,key:`h98zly`}],[`path`,{d:`M13 19h8`,key:`c3s6r1`}],[`path`,{d:`m3 17 2 2 4-4`,key:`1jhpwq`}],[`path`,{d:`m3 7 2 2 4-4`,key:`1obspn`}]]);export{t};

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

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.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-Cy2raRO6.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.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-Cj6uT4TA.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.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-Di70bdf6.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.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};