admin-ui-starter-kit 0.1.0

package/dist/showcase/assets/kanban-BgW23a7P.js

@@ -0,0 +1,175 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{Sr as n,cr as r,gr as i,hr as a,lr as o,sr as s,t as c,vr as l}from"./example-DPfw-R7_.js";import{t as u}from"./arrow-up-BYQ4F9L1.js";import{t as d}from"./ellipsis-CgqPlt6Z.js";import{t as f}from"./eye-BQU3UqWi.js";import{t as p}from"./trash-2-B0_GprQM.js";import{D as m,a as h,k as g,r as _}from"./index-B-Z7p0So.js";import{t as v}from"./props-table-BzUnIcv-.js";import{t as y}from"./smart-card-50WN9sCI.js";import{a as b,c as ee,d as x,f as S,i as te,o as C,p as w,r as T,t as ne,u as E}from"./sortable.esm-C_l8_Iqt.js";import{t as D}from"./PreviewLayout-BHemtKEf.js";import{t as O}from"./popover-menu-DVGBuFpL.js";var k=_(`pen-line`,[[`path`,{d:`M13 21h8`,key:`1jsn5i`}],[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}]]),A=t(g(),1);function j({value:e,onValueChange:t,getItemValue:n,onItemMove:r}){let i=(0,A.useCallback)(t=>{for(let[r,i]of Object.entries(e)){let e=i.findIndex(e=>n(e)===t);if(e>=0)return{columnId:r,index:e,item:i[e]}}},[e,n]),a=(0,A.useCallback)(({itemId:n,toColumnId:a,toIndex:o})=>{let s=i(n);if(!s||!Object.prototype.hasOwnProperty.call(e,a))return;let{columnId:c,index:l,item:u}=s,d=e[a],f=o===void 0?d.length:Math.max(0,Math.min(o,d.length));if(c===a&&l===f)return;let p={...e},m=[...p[c]];m.splice(l,1),p[c]=m;let h=[...c===a?m:p[a]],g=f;c===a&&l<f&&(g=Math.max(0,f-1)),h.splice(g,0,u),p[a]=h,t(p),r?.({item:u,itemId:n,from:{columnId:c,index:l},to:{columnId:a,index:g}})},[e,i,t,r]);return(0,A.useMemo)(()=>({findItem:i,move:a}),[i,a])}var M=(0,A.createContext)(null),N=M.Provider;function P(){let e=(0,A.useContext)(M);if(!e)throw Error(`Kanban subcomponents must be rendered inside a <Kanban> root.`);return e}var F=(0,A.createContext)(null),I=F.Provider;function L(){let e=(0,A.useContext)(F);if(!e)throw Error(`<KanbanItemHandle> / <KanbanItemActions> must be rendered inside a <KanbanItem>.`);return e}var R={announceDragStart:`Picked up item {name}.`,announceDragMove:`Moving {name} from {from} to {to}.`,announceDragEnd:`Dropped {name} into {to}.`,announceDragCancel:`Cancelled drag of {name}.`,dragHandleAria:`Drag handle`,boardAria:`Kanban board`,itemActionsAria:`Item actions`},z=h();function B({value:e,onValueChange:t,getItemValue:n,onItemMove:r,itemActions:i,onItemClick:a,strings:o,className:s,children:c}){let u=m(R,o),{findItem:d,move:f}=j({value:e,onValueChange:t,getItemValue:n,onItemMove:r}),[p,h]=(0,A.useState)(null),g=S(x(ee,{activationConstraint:{distance:6}})),_=(0,A.useMemo)(()=>p?d(p)?.item??null:null,[p,d]),v=(0,A.useCallback)(e=>{h(String(e.active.id))},[]),y=(0,A.useCallback)(t=>{h(null);let{active:n,over:r}=t;if(!r)return;n.data.current;let i=r.data.current,a=String(r.id),o=i?.columnId??(Object.prototype.hasOwnProperty.call(e,a)?a:void 0);if(!o)return;let s=i?.columnId===void 0?e[o].length:i.index;f({itemId:String(n.id),toColumnId:o,toIndex:s})},[f,e]);return(0,z.jsx)(N,{value:(0,A.useMemo)(()=>({value:e,onValueChange:t,getItemValue:n,activeId:p,activeItem:_,findItem:d,itemActions:i,onItemClick:a}),[e,t,n,p,_,d,i,a]),children:(0,z.jsx)(b,{sensors:g,onDragStart:v,onDragEnd:y,onDragCancel:()=>h(null),accessibility:{announcements:{onDragStart({active:e}){return u.announceDragStart.replace(`{name}`,String(e.id))},onDragOver({active:e,over:t}){if(t)return u.announceDragMove.replace(`{name}`,String(e.id)).replace(`{from}`,``).replace(`{to}`,String(t.id))},onDragEnd({active:e,over:t}){return u.announceDragEnd.replace(`{name}`,String(e.id)).replace(`{to}`,t?String(t.id):``)},onDragCancel({active:e}){return u.announceDragCancel.replace(`{name}`,String(e.id))}}},children:(0,z.jsx)(`div`,{role:`application`,"aria-label":u.boardAria,className:l(`kanban--component`,`w-full`,s),children:c})})})}B.displayName=`Kanban`;function V({className:e,style:t,children:n}){return(0,z.jsx)(`div`,{className:l(`grid w-full gap-3`,e),style:t,children:n})}V.displayName=`KanbanBoard`;function H({value:e,className:t,children:n}){let{setNodeRef:r,isOver:i}=E({id:e});return(0,z.jsx)(`div`,{ref:r,"data-slot":`kanban-column`,"data-column-id":e,"data-over":i?`true`:void 0,className:l(`flex min-w-0 flex-col`,t),children:n})}H.displayName=`KanbanColumn`;function U({value:e,className:t,children:n}){let r=P();return(0,z.jsx)(ne,{items:(r.value[e]??[]).map(e=>r.getItemValue(e)),strategy:te,children:(0,z.jsx)(`div`,{"data-slot":`kanban-column-content`,className:l(`flex flex-col gap-2`,t),children:n})})}U.displayName=`KanbanColumnContent`;function W({value:e,className:t,disabled:n=!1,onClick:r,children:i}){let a=P(),o=a.findItem(e),{attributes:s,listeners:c,setNodeRef:u,setActivatorNodeRef:d,transform:f,transition:p,isDragging:m}=T({id:e,disabled:n,data:{columnId:o?.columnId,index:o?.index}}),h={transform:w.Transform.toString(f),transition:p,opacity:m?.4:void 0},g=(0,A.useMemo)(()=>({listeners:c,attributes:s,setActivatorNodeRef:d,itemId:e,item:o?.item??null}),[c,s,d,e,o?.item]),_=a.onItemClick,v=(0,A.useCallback)(e=>{if(!e.target?.closest(`[data-stop-item-click]`)){if(r){r();return}_&&o?.item!==void 0&&_(o.item)}},[r,_,o?.item]),y=!!(r||_);return(0,z.jsx)(I,{value:g,children:(0,z.jsx)(`div`,{ref:u,style:h,"data-slot":`kanban-item`,"data-dragging":m?`true`:void 0,className:l(`touch-none select-none`,y&&`cursor-pointer`,t),onClick:y?v:void 0,...s,...c,children:i})})}W.displayName=`KanbanItem`;var G=(0,A.forwardRef)(function({className:e,children:t},n){let{setActivatorNodeRef:r,listeners:i,attributes:a}=L();return(0,z.jsx)(`button`,{type:`button`,ref:(0,A.useCallback)(e=>{r(e),typeof n==`function`?n(e):n&&(n.current=e)},[r,n]),"data-slot":`kanban-item-handle`,"data-stop-item-click":!0,onClick:e=>e.stopPropagation(),className:l(`inline-flex cursor-grab items-center justify-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 active:cursor-grabbing`,e),...a,...i,children:t})});G.displayName=`KanbanItemHandle`;function K({className:e,icon:t,ariaLabel:n}){let[r,a]=(0,A.useState)(!1),o=P(),s=L(),c=m(R,void 0),u=s.item,f=o.itemActions,p=(0,A.useMemo)(()=>!f||u==null?[]:(typeof f==`function`?f(u):f).filter(e=>e.isVisible?e.isVisible(u):!0),[f,u]);return p.length===0?null:(0,z.jsx)(O,{open:r,onOpenChange:a,search:!1,contentClassName:`w-44`,trigger:(0,z.jsx)(`button`,{type:`button`,"data-slot":`kanban-item-actions-trigger`,"data-stop-item-click":!0,"aria-label":n??c.itemActionsAria,onClick:e=>e.stopPropagation(),onPointerDown:e=>e.stopPropagation(),className:l(`inline-flex size-7 items-center justify-center rounded-md`,`text-muted-foreground/70 hover:bg-muted hover:text-foreground`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50`,`transition-colors`,e),children:t??(0,z.jsx)(d,{className:`size-4`,"aria-hidden":`true`})}),items:p.map(e=>({value:e.id,label:e.label,icon:e.icon,disabled:e.isDisabled?.(u)??!1,data:e})),renderItem:e=>{let t=e.data,n=t.variant===`destructive`;return(0,z.jsxs)(z.Fragment,{children:[!!t.icon&&(0,z.jsx)(`span`,{className:l(`shrink-0`,n?`text-destructive`:`text-muted-foreground`),children:t.icon}),(0,z.jsx)(i,{tag:`span`,size:`xs`,className:l(`truncate`,n&&`text-destructive`),children:t.label})]})},onSelect:e=>{e.data?.onSelect(u),a(!1)}})}K.displayName=`KanbanItemActions`;function q({className:e,render:t}){let{activeItem:n,activeId:r,findItem:a}=P();return(0,z.jsx)(C,{children:r?t?t({item:n,columnId:a(r)?.columnId??null}):(0,z.jsx)(`div`,{className:l(`pointer-events-none rounded-md border-2 border-dashed border-primary/40 bg-primary/5 p-3 shadow-lg`,e),children:(0,z.jsx)(i,{tag:`span`,size:`xs`,weight:`medium`,className:`text-primary/80`,children:r})}):null})}q.displayName=`KanbanOverlay`;var J=e({RoadmapBoardWithActionsOnItemClick:()=>Z}),Y={planned:{title:`Planned`,tone:`bg-info`},building:{title:`Building`,tone:`bg-warning`},testing:{title:`Testing`,tone:`bg-primary`},shipped:{title:`Shipped`,tone:`bg-success`}},X={planned:[{id:`f1`,title:`AI-powered search`,description:`Natural language search across all content`,progress:0,votes:142},{id:`f2`,title:`Custom webhooks`,description:`User-configurable webhook endpoints`,progress:0,votes:98}],building:[{id:`f3`,title:`Real-time collaboration`,description:`Multi-user editing with presence indicators`,progress:65,votes:234},{id:`f4`,title:`API v2 migration`,description:`RESTful API with OpenAPI 3.0 spec`,progress:40,votes:176}],testing:[{id:`f5`,title:`Two-factor auth`,description:`TOTP + WebAuthn support`,progress:90,votes:312}],shipped:[{id:`f6`,title:`Dark mode`,description:`System-aware theme with manual override`,progress:100,votes:456},{id:`f7`,title:`Export to CSV`,description:`Bulk data export with custom fields`,progress:100,votes:189}]};function re({feature:e}){return(0,z.jsxs)(y,{padding:`sm`,className:`gap-2`,children:[(0,z.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,z.jsx)(i,{weight:`semibold`,tag:`div`,className:`text-sm flex-1 min-w-0`,children:e.title}),(0,z.jsx)(K,{})]}),(0,z.jsx)(i,{size:`xs`,type:`secondary`,className:`line-clamp-2`,children:e.description}),(0,z.jsx)(`div`,{className:`mt-1 h-1.5 overflow-hidden rounded-full bg-muted`,children:(0,z.jsx)(`div`,{className:`h-full bg-primary transition-[width] duration-150`,style:{width:`${e.progress}%`}})}),(0,z.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,z.jsxs)(i,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:[e.progress,`% complete`]}),(0,z.jsxs)(`div`,{className:`inline-flex items-center gap-1 text-muted-foreground`,children:[(0,z.jsx)(u,{className:`size-3`}),(0,z.jsx)(i,{tag:`span`,size:`xs`,type:`secondary`,className:`tabular-nums`,children:e.votes})]})]})]})}function Z(){let[e,t]=(0,A.useState)(X),[r,i]=(0,A.useState)(`—`),s=(0,A.useCallback)(e=>{t(t=>{let n={};for(let[r,i]of Object.entries(t))n[r]=i.filter(t=>t.id!==e.id);return n}),i(`Deleted "${e.title}"`)},[]),c=(0,A.useCallback)(e=>[{id:`view`,label:`View details`,icon:(0,z.jsx)(f,{className:`size-3.5`}),onSelect:e=>i(`Viewed "${e.title}"`)},{id:`edit`,label:`Edit`,icon:(0,z.jsx)(k,{className:`size-3.5`}),onSelect:e=>i(`Edited "${e.title}"`)},{id:`duplicate`,label:`Duplicate`,icon:(0,z.jsx)(n,{className:`size-3.5`}),isDisabled:e=>e.progress===100,onSelect:e=>i(`Duplicated "${e.title}"`)},{id:`delete`,label:`Delete`,icon:(0,z.jsx)(p,{className:`size-3.5`}),variant:`destructive`,isVisible:e=>e.progress<100,onSelect:s}],[s]);return(0,z.jsx)(z.Fragment,{children:(0,z.jsxs)(D,{children:[(0,z.jsxs)(`div`,{className:`rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground`,children:[`Last event: `,(0,z.jsx)(`span`,{className:`font-medium text-foreground`,children:r})]}),(0,z.jsxs)(B,{value:e,onValueChange:t,getItemValue:e=>e.id,onItemClick:e=>i(`Clicked "${e.title}"`),itemActions:c,children:[(0,z.jsx)(V,{className:`grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4`,children:Object.entries(e).map(([e,t])=>{let n=Y[e];return(0,z.jsxs)(H,{value:e,className:`rounded-md border border-border bg-muted/20 p-2`,children:[(0,z.jsxs)(`div`,{className:`mb-2 flex items-center gap-2 px-1`,children:[(0,z.jsx)(`span`,{className:l(`size-2 rounded-full`,n.tone),"aria-hidden":!0}),(0,z.jsx)(a,{tag:`h4`,className:`border-0 pb-0 text-sm font-semibold`,children:n.title}),(0,z.jsx)(o,{variant:`secondary`,className:`ml-auto`,children:t.length})]}),(0,z.jsx)(U,{value:e,className:`min-h-[40px]`,children:t.map(e=>(0,z.jsx)(W,{value:e.id,children:(0,z.jsx)(re,{feature:e})},e.id))})]},e)})}),(0,z.jsx)(q,{})]})]})})}var ie=`import { ArrowUp, Copy, Edit3, Eye, Trash2 } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { Badge } from '@/components/base/badge';
+import { SmartCard } from '@/components/base/cards';
+import {
+	Kanban,
+	KanbanBoard,
+	KanbanColumn,
+	KanbanColumnContent,
+	KanbanItem,
+	KanbanItemActions,
+	KanbanOverlay,
+	type KanbanItemAction,
+	type KanbanValue,
+} from '@/components/features/kanban';
+import { Heading, Text } from '@/components/typography';
+import { cn } from '@/lib/utils';
+import { Col } from '../../PreviewLayout';
+
+interface Feature {
+	id: string;
+	title: string;
+	description: string;
+	progress: number;
+	votes: number;
+}
+
+const COLUMN_META: Record<string, { title: string; tone: string }> = {
+	planned: { title: 'Planned', tone: 'bg-info' },
+	building: { title: 'Building', tone: 'bg-warning' },
+	testing: { title: 'Testing', tone: 'bg-primary' },
+	shipped: { title: 'Shipped', tone: 'bg-success' },
+};
+
+const INITIAL: KanbanValue<Feature> = {
+	planned: [
+		{ id: 'f1', title: 'AI-powered search', description: 'Natural language search across all content', progress: 0, votes: 142 },
+		{ id: 'f2', title: 'Custom webhooks', description: 'User-configurable webhook endpoints', progress: 0, votes: 98 },
+	],
+	building: [
+		{ id: 'f3', title: 'Real-time collaboration', description: 'Multi-user editing with presence indicators', progress: 65, votes: 234 },
+		{ id: 'f4', title: 'API v2 migration', description: 'RESTful API with OpenAPI 3.0 spec', progress: 40, votes: 176 },
+	],
+	testing: [
+		{ id: 'f5', title: 'Two-factor auth', description: 'TOTP + WebAuthn support', progress: 90, votes: 312 },
+	],
+	shipped: [
+		{ id: 'f6', title: 'Dark mode', description: 'System-aware theme with manual override', progress: 100, votes: 456 },
+		{ id: 'f7', title: 'Export to CSV', description: 'Bulk data export with custom fields', progress: 100, votes: 189 },
+	],
+};
+
+function FeatureCard({ feature }: { feature: Feature }) {
+	return (
+		<SmartCard padding="sm" className="gap-2">
+			<div className="flex items-start gap-2">
+				<Text weight="semibold" tag="div" className="text-sm flex-1 min-w-0">
+					{feature.title}
+				</Text>
+				<KanbanItemActions />
+			</div>
+			<Text size="xs" type="secondary" className="line-clamp-2">
+				{feature.description}
+			</Text>
+			<div className="mt-1 h-1.5 overflow-hidden rounded-full bg-muted">
+				<div
+					className="h-full bg-primary transition-[width] duration-150"
+					style={{ width: \`\${feature.progress}%\` }}
+				/>
+			</div>
+			<div className="flex items-center justify-between">
+				<Text size="xxs" type="secondary" className="tabular-nums">
+					{feature.progress}% complete
+				</Text>
+				<div className="inline-flex items-center gap-1 text-muted-foreground">
+					<ArrowUp className="size-3" />
+					<Text tag="span" size="xs" type="secondary" className="tabular-nums">
+						{feature.votes}
+					</Text>
+				</div>
+			</div>
+		</SmartCard>
+	);
+}
+
+export function RoadmapBoardWithActionsOnItemClick() {
+	const [columns, setColumns] = useState(INITIAL);
+	const [lastEvent, setLastEvent] = useState<string>('—');
+	const removeFeature = useCallback((target: Feature) => {
+		setColumns((current) => {
+			const next: KanbanValue<Feature> = {};
+			for (const [col, items] of Object.entries(current)) {
+				next[col] = items.filter((f) => f.id !== target.id);
+			}
+			return next;
+		});
+		setLastEvent(\`Deleted "\${target.title}"\`);
+	}, []);
+	const itemActions = useCallback(
+			(_feature: Feature): KanbanItemAction<Feature>[] => [
+				{
+					id: 'view',
+					label: 'View details',
+					icon: <Eye className="size-3.5" />,
+					onSelect: (f) => setLastEvent(\`Viewed "\${f.title}"\`),
+				},
+				{
+					id: 'edit',
+					label: 'Edit',
+					icon: <Edit3 className="size-3.5" />,
+					onSelect: (f) => setLastEvent(\`Edited "\${f.title}"\`),
+				},
+				{
+					id: 'duplicate',
+					label: 'Duplicate',
+					icon: <Copy className="size-3.5" />,
+					isDisabled: (f) => f.progress === 100,
+					onSelect: (f) => setLastEvent(\`Duplicated "\${f.title}"\`),
+				},
+				{
+					id: 'delete',
+					label: 'Delete',
+					icon: <Trash2 className="size-3.5" />,
+					variant: 'destructive',
+					isVisible: (f) => f.progress < 100,
+					onSelect: removeFeature,
+				},
+			],
+			[removeFeature],
+		);
+	return (
+		<>
+			<Col>
+								<div className="rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+									Last event: <span className="font-medium text-foreground">{lastEvent}</span>
+								</div>
+								<Kanban<Feature>
+									value={columns}
+									onValueChange={setColumns}
+									getItemValue={(f) => f.id}
+									onItemClick={(f) => setLastEvent(\`Clicked "\${f.title}"\`)}
+									itemActions={itemActions}
+								>
+									<KanbanBoard className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+										{Object.entries(columns).map(([colId, features]) => {
+											const meta = COLUMN_META[colId];
+											return (
+												<KanbanColumn key={colId} value={colId} className="rounded-md border border-border bg-muted/20 p-2">
+													<div className="mb-2 flex items-center gap-2 px-1">
+														<span className={cn('size-2 rounded-full', meta.tone)} aria-hidden />
+														<Heading tag="h4" className="border-0 pb-0 text-sm font-semibold">
+															{meta.title}
+														</Heading>
+														<Badge variant="secondary" className="ml-auto">
+															{features.length}
+														</Badge>
+													</div>
+													<KanbanColumnContent value={colId} className="min-h-[40px]">
+														{features.map((feature) => (
+															<KanbanItem key={feature.id} value={feature.id}>
+																<FeatureCard feature={feature} />
+															</KanbanItem>
+														))}
+													</KanbanColumnContent>
+												</KanbanColumn>
+											);
+										})}
+									</KanbanBoard>
+									<KanbanOverlay />
+								</Kanban>
+							</Col>
+		</>
+	);
+}
+`;function Q(e){let t={h4:`h4`,...e.components};return J||$(`Examples`,!1),Z||$(`Examples.RoadmapBoardWithActionsOnItemClick`,!0),(0,z.jsxs)(r,{title:`Features · Kanban`,description:"Drag-and-drop board, generic in T. Pass `itemActions` (static array or per-item factory) for the ⋮ menu, `onItemClick` for whole-card click. Headless via `useKanban`; slots: KanbanBoard / KanbanColumn / KanbanColumnContent / KanbanItem / KanbanItemHandle / KanbanItemActions / KanbanOverlay.",layer:`features`,status:`ready`,children:[(0,z.jsx)(s,{title:`Examples`,id:`examples`,children:(0,z.jsx)(c,{name:`RoadmapBoardWithActionsOnItemClick`,source:ie,children:(0,z.jsx)(Z,{})})}),(0,z.jsxs)(s,{title:`API`,id:`api`,children:[(0,z.jsx)(t.h4,{children:`Kanban`}),(0,z.jsx)(v,{component:`Kanban`}),(0,z.jsx)(t.h4,{children:`KanbanBoard`}),(0,z.jsx)(v,{component:`KanbanBoard`}),(0,z.jsx)(t.h4,{children:`KanbanColumn`}),(0,z.jsx)(v,{component:`KanbanColumn`}),(0,z.jsx)(t.h4,{children:`KanbanColumnContent`}),(0,z.jsx)(v,{component:`KanbanColumnContent`}),(0,z.jsx)(t.h4,{children:`KanbanItem`}),(0,z.jsx)(v,{component:`KanbanItem`}),(0,z.jsx)(t.h4,{children:`KanbanItemActions`}),(0,z.jsx)(v,{component:`KanbanItemActions`}),(0,z.jsx)(t.h4,{children:`KanbanOverlay`}),(0,z.jsx)(v,{component:`KanbanOverlay`})]})]})}function ae(e={}){let{wrapper:t}=e.components||{};return t?(0,z.jsx)(t,{...e,children:(0,z.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{ae as default};

package/dist/showcase/assets/label-MdV7pglj.js

@@ -0,0 +1 @@
+import{kr as e,vr as t}from"./example-DPfw-R7_.js";import{a as n}from"./index-B-Z7p0So.js";var r=n(),i={xs:`text-xs`,sm:`text-sm`,base:`text-base`};function a(e,t){return e??t??`sm`}function o({content:n,className:o=``,children:s,size:c,...l}){let{defaultLabelSize:u}=e(),d=a(c,u);return(0,r.jsx)(`label`,{...l,"data-typography":`label`,className:t(`font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50`,i[d],o),children:s||n})}o.displayName=`Label`;export{o as t};

package/dist/showcase/assets/layout-containers-nKVReEJB.js

@@ -0,0 +1,96 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{cr as t,gr as n,lr as r,sr as i,t as a,vr as o}from"./example-DPfw-R7_.js";import{a as s}from"./index-B-Z7p0So.js";import{t as c}from"./smart-card-50WN9sCI.js";import{t as l}from"./content-container-D3Phw6h8.js";var u=s(),d={tight:`space-y-3`,default:`space-y-5`,loose:`space-y-8`};function f({children:e,as:t=`section`,density:n=`default`,className:r,...i}){return(0,u.jsx)(t,{className:o(d[n],r),...i,children:e})}var p=e({BareContainer:()=>v,NarrowContainer:()=>g,SectionRhythm:()=>y,WideContainer:()=>_});function m({title:e,detail:t}){return(0,u.jsx)(c,{padding:`sm`,className:`border-dashed`,children:(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(n,{weight:`semibold`,children:e}),(0,u.jsx)(n,{size:`xs`,type:`secondary`,children:t})]})})}function h({children:e,height:t=320}){return(0,u.jsx)(`div`,{className:`layout-demo-viewport relative w-full overflow-auto rounded-md border border-dashed border-border bg-background`,style:{height:t},children:e})}function g(){return(0,u.jsx)(h,{children:(0,u.jsxs)(l,{as:`section`,width:`narrow`,padding:`sm`,innerClassName:`gap-3`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,u.jsx)(n,{weight:`semibold`,children:`Narrow container`}),(0,u.jsx)(r,{variant:`info`,children:`padding sm`})]}),(0,u.jsx)(m,{title:`Centered content`,detail:`Useful for forms, setup flows, and readable single-column pages.`}),(0,u.jsx)(m,{title:`Comfortable reading width`,detail:"`max-w-7xl` keeps line lengths sensible at desktop sizes."})]})})}function _(){return(0,u.jsx)(h,{children:(0,u.jsxs)(l,{as:`section`,width:`wide`,padding:`default`,innerClassName:`grid gap-3 md:grid-cols-3`,children:[(0,u.jsx)(m,{title:`Card A`,detail:`Dashboard pages can keep cards aligned inside a max-width shell.`}),(0,u.jsx)(m,{title:`Card B`,detail:"`innerClassName` controls the inner column without breaking the outer wrapper."}),(0,u.jsx)(m,{title:`Card C`,detail:"Use `as` to render the right semantic element for the surface."})]})})}function v(){return(0,u.jsx)(h,{height:260,children:(0,u.jsxs)(l,{width:`full`,bare:!0,className:`bg-card`,children:[(0,u.jsx)(`div`,{className:`grid grid-cols-4 border-b border-border px-3 py-2`,children:[`Name`,`Owner`,`Status`,`Updated`].map(e=>(0,u.jsx)(n,{size:`xxs`,weight:`semibold`,type:`secondary`,className:`uppercase tracking-wider`,children:e},e))}),[`Billing portal`,`Customer records`,`Sync monitor`].map((e,t)=>(0,u.jsxs)(`div`,{className:`grid grid-cols-4 px-3 py-2`,children:[(0,u.jsx)(n,{weight:`medium`,children:e}),(0,u.jsx)(n,{type:`secondary`,children:`Operations`}),(0,u.jsx)(r,{variant:t===2?`warning`:`success`,children:t===2?`Review`:`Healthy`}),(0,u.jsx)(n,{size:`xs`,type:`secondary`,children:`Today`})]},e))]})})}function y(){return(0,u.jsx)(`div`,{className:`grid gap-5 md:grid-cols-3`,children:[`tight`,`default`,`loose`].map(e=>(0,u.jsxs)(f,{density:e,className:`rounded-md border border-dashed border-border p-4`,children:[(0,u.jsx)(n,{weight:`semibold`,className:`capitalize`,children:e}),(0,u.jsx)(m,{title:`Block one`,detail:`Section controls vertical rhythm only.`}),(0,u.jsx)(m,{title:`Block two`,detail:`Cards and headings remain separate composition concerns.`})]},e))})}var b=`import type { ReactNode } from 'react';
+import { Container, Section } from '@/components/layout/containers';
+import { SmartCard } from '@/components/base/cards';
+import { Text } from '@/components/typography';
+import { Badge } from '@/components/base/badge';
+
+function SampleCard({ title, detail }: { title: string; detail: string }) {
+	return (
+		<SmartCard padding="sm" className="border-dashed">
+			<div className="space-y-1">
+				<Text weight="semibold">{title}</Text>
+				<Text size="xs" type="secondary">{detail}</Text>
+			</div>
+		</SmartCard>
+	);
+}
+
+/**
+ * Layout primitives expect to live inside a real page shell with bounded
+ * height. The docs preview pane is unbounded, so we wrap demos in a fixed
+ * viewport so \`width\` clamps and section rhythm read as intended.
+ */
+function DemoViewport({ children, height = 320 }: { children: ReactNode; height?: number }) {
+	return (
+		<div
+			className="layout-demo-viewport relative w-full overflow-auto rounded-md border border-dashed border-border bg-background"
+			style={{ height }}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function NarrowContainer() {
+	return (
+		<DemoViewport>
+			<Container as="section" width="narrow" padding="sm" innerClassName="gap-3">
+				<div className="flex items-center justify-between gap-3">
+					<Text weight="semibold">Narrow container</Text>
+					<Badge variant="info">padding sm</Badge>
+				</div>
+				<SampleCard title="Centered content" detail="Useful for forms, setup flows, and readable single-column pages." />
+				<SampleCard title="Comfortable reading width" detail="\`max-w-7xl\` keeps line lengths sensible at desktop sizes." />
+			</Container>
+		</DemoViewport>
+	);
+}
+
+export function WideContainer() {
+	return (
+		<DemoViewport>
+			<Container as="section" width="wide" padding="default" innerClassName="grid gap-3 md:grid-cols-3">
+				<SampleCard title="Card A" detail="Dashboard pages can keep cards aligned inside a max-width shell." />
+				<SampleCard title="Card B" detail="\`innerClassName\` controls the inner column without breaking the outer wrapper." />
+				<SampleCard title="Card C" detail="Use \`as\` to render the right semantic element for the surface." />
+			</Container>
+		</DemoViewport>
+	);
+}
+
+export function BareContainer() {
+	return (
+		<DemoViewport height={260}>
+			<Container width="full" bare className="bg-card">
+				<div className="grid grid-cols-4 border-b border-border px-3 py-2">
+					{['Name', 'Owner', 'Status', 'Updated'].map((h) => (
+						<Text key={h} size="xxs" weight="semibold" type="secondary" className="uppercase tracking-wider">{h}</Text>
+					))}
+				</div>
+				{['Billing portal', 'Customer records', 'Sync monitor'].map((name, index) => (
+					<div key={name} className="grid grid-cols-4 px-3 py-2">
+						<Text weight="medium">{name}</Text>
+						<Text type="secondary">Operations</Text>
+						<Badge variant={index === 2 ? 'warning' : 'success'}>{index === 2 ? 'Review' : 'Healthy'}</Badge>
+						<Text size="xs" type="secondary">Today</Text>
+					</div>
+				))}
+			</Container>
+		</DemoViewport>
+	);
+}
+
+export function SectionRhythm() {
+	return (
+		<div className="grid gap-5 md:grid-cols-3">
+			{(['tight', 'default', 'loose'] as const).map((density) => (
+				<Section key={density} density={density} className="rounded-md border border-dashed border-border p-4">
+					<Text weight="semibold" className="capitalize">{density}</Text>
+					<SampleCard title="Block one" detail="Section controls vertical rhythm only." />
+					<SampleCard title="Block two" detail="Cards and headings remain separate composition concerns." />
+				</Section>
+			))}
+		</div>
+	);
+}
+`;function x(e){return p||C(`Examples`,!1),v||C(`Examples.BareContainer`,!0),g||C(`Examples.NarrowContainer`,!0),y||C(`Examples.SectionRhythm`,!0),_||C(`Examples.WideContainer`,!0),(0,u.jsx)(t,{title:`Layout · Containers`,description:`Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.`,layer:`layout`,status:`ready`,children:(0,u.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,u.jsx)(a,{name:`NarrowContainer`,source:b,children:(0,u.jsx)(g,{})}),(0,u.jsx)(a,{name:`WideContainer`,source:b,children:(0,u.jsx)(_,{})}),(0,u.jsx)(a,{name:`BareContainer`,source:b,children:(0,u.jsx)(v,{})}),(0,u.jsx)(a,{name:`SectionRhythm`,source:b,children:(0,u.jsx)(y,{})})]})})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,u.jsx)(t,{...e,children:(0,u.jsx)(x,{...e})}):x(e)}function C(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{S as default};

package/dist/showcase/assets/layout-header-CKyxHHPC.js

@@ -0,0 +1,170 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{cr as t,gr as n,lr as r,r as i,sr as a,t as o}from"./example-DPfw-R7_.js";import{t as s}from"./bell-BTX2D-ES.js";import{t as c}from"./circle-alert-DfQp_X3_.js";import{t as l}from"./circle-check-BkqQe1tv.js";import{i as u,n as d,r as f,t as p}from"./header-notifications-BWla1yhM.js";import{r as m,t as h}from"./sidebar.context-CXTHS3vn.js";import{t as g}from"./settings-Duj7gAZe.js";import{a as _}from"./index-B-Z7p0So.js";import{t as v}from"./smart-card-50WN9sCI.js";import{t as y}from"./separator-CZ_sPWQj.js";import{t as b}from"./page-header-Cwf9DuhD.js";var x=e({AppHeaderComposition:()=>E,CustomNotificationRenderer:()=>O,HeaderPartials:()=>D}),S=_(),C={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`},w=[{id:`sync`,title:`Catalog sync completed`,description:`248 products updated across two markets.`,time:`2 min ago`,tone:`success`,href:`#/features/activities`,read:!1},{id:`risk`,title:`Payment risk changed`,description:`Three invoices moved to manual review.`,time:`18 min ago`,tone:`warning`,read:!1}];function T({href:e,children:t,className:n,target:r,rel:i}){return(0,S.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function E(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(h,{className:`min-h-0`,children:(0,S.jsx)(`div`,{className:`w-full overflow-hidden rounded-2xl border border-border bg-background p-3`,children:(0,S.jsxs)(`div`,{className:`overflow-hidden rounded-xl border border-border bg-background shadow-sm`,children:[(0,S.jsx)(f,{renderLink:T,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`w-[32rem] max-w-[40vw]`,slots:{center:(0,S.jsx)(d,{className:`w-full`,onOpen:()=>{}}),right:(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(p,{notifications:w,unreadCount:2,viewAllHref:`#/features/activities`,renderLink:T}),(0,S.jsx)(y,{orientation:`vertical`,className:`h-7`}),(0,S.jsx)(m,{user:C,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,S.jsxs)(`div`,{className:`space-y-5 p-5`,children:[(0,S.jsx)(b,{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,S.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[[`Manual review`,`8`],[`Awaiting stock`,`12`],[`Ready to fulfill`,`36`]].map(([e,t,r])=>(0,S.jsxs)(v,{padding:`sm`,className:`shadow-sm`,children:[(0,S.jsx)(n,{size:`xs`,type:`secondary`,children:e}),(0,S.jsx)(n,{weight:`semibold`,children:t}),!!r&&(0,S.jsx)(n,{size:`xs`,type:`secondary`,children:r})]},e))})]})]})})})})}function D(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(h,{className:`min-h-0`,children:(0,S.jsxs)(`div`,{className:`grid w-full gap-4 lg:grid-cols-2`,children:[(0,S.jsxs)(v,{padding:`sm`,children:[(0,S.jsx)(n,{weight:`semibold`,className:`mb-3`,children:`Breadcrumbs`}),(0,S.jsx)(`div`,{className:`h-10 rounded-lg border border-border bg-background px-3`,children:(0,S.jsx)(u,{showSidebarTrigger:!0,homeBreadcrumb:{label:`Admin`,href:`#/admin`},renderLink:T,breadcrumbs:[{label:`Customers`,href:`#/customers`},{label:`Sarah Smitha`}]})})]}),(0,S.jsxs)(v,{padding:`sm`,children:[(0,S.jsx)(n,{weight:`semibold`,className:`mb-3`,children:`Search`}),(0,S.jsx)(d,{className:`w-full`,strings:{placeholder:`Search customers, invoices, comments...`}})]}),(0,S.jsxs)(v,{padding:`sm`,children:[(0,S.jsx)(n,{weight:`semibold`,className:`mb-3`,children:`Notifications`}),(0,S.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,S.jsx)(p,{notifications:w,unreadCount:2,renderLink:T}),(0,S.jsx)(r,{variant:`warning`,children:`Unread state`})]})]}),(0,S.jsxs)(v,{padding:`sm`,children:[(0,S.jsx)(n,{weight:`semibold`,className:`mb-3`,children:`Right action cluster`}),(0,S.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,S.jsx)(p,{notifications:w,unreadCount:2,renderLink:T}),(0,S.jsx)(m,{user:C,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})]})]})})})}function O(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 rounded-xl border border-border bg-background p-4 shadow-sm`,children:[(0,S.jsx)(p,{notifications:w,unreadCount:2,renderNotification:e=>(0,S.jsxs)(`div`,{className:`flex items-start gap-3 rounded-md px-3 py-2`,children:[e.tone===`success`?(0,S.jsx)(l,{className:`mt-0.5 size-4 text-success`}):(0,S.jsx)(c,{className:`mt-0.5 size-4 text-warning`}),(0,S.jsxs)(`div`,{className:`min-w-0`,children:[(0,S.jsx)(n,{weight:`medium`,children:e.title}),(0,S.jsx)(n,{size:`xs`,type:`secondary`,children:e.description})]})]})}),(0,S.jsx)(i,{variant:`secondary`,icon:s,children:`Open bell`}),(0,S.jsx)(i,{variant:`secondary`,icon:g,children:`Settings`})]})})}var k=`import { Bell, CheckCircle2, CircleAlert, Settings } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Separator } from '@/components/base/display/separator';
+import { SmartCard } from '@/components/base/cards';
+import { Text } from '@/components/typography';
+import {
+	Header,
+	HeaderBreadcrumbs,
+	HeaderNotifications,
+	HeaderSearch,
+	HeaderUserMenu,
+	type HeaderNotification,
+} from '@/components/layout/header';
+import { PageHeader } from '@/components/layout/page';
+import type { LayoutLinkRenderProps, LayoutUser } from '@/components/layout';
+import { SidebarProvider } from '@/components/layout/sidebar';
+
+const user: LayoutUser = {
+	name: 'Nicolas Vlachos',
+	email: 'nicolas@example.com',
+	avatar: 'https://i.pravatar.cc/96?img=11',
+};
+
+const notifications: HeaderNotification[] = [
+	{
+		id: 'sync',
+		title: 'Catalog sync completed',
+		description: '248 products updated across two markets.',
+		time: '2 min ago',
+		tone: 'success',
+		href: '#/features/activities',
+		read: false,
+	},
+	{
+		id: 'risk',
+		title: 'Payment risk changed',
+		description: 'Three invoices moved to manual review.',
+		time: '18 min ago',
+		tone: 'warning',
+		read: false,
+	},
+];
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+export function AppHeaderComposition() {
+	return (
+		<>
+			<SidebarProvider className="min-h-0">
+								<div className="w-full overflow-hidden rounded-2xl border border-border bg-background p-3">
+									<div className="overflow-hidden rounded-xl border border-border bg-background shadow-sm">
+										<Header
+											renderLink={renderPreviewLink}
+											breadcrumbs={[{ label: 'Operations', href: '#/features/activities' }, { label: 'Orders' }]}
+											centerClassName="w-[32rem] max-w-[40vw]"
+											slots={{
+												center: <HeaderSearch className="w-full" onOpen={() => {}} />,
+												right: (
+													<>
+														<HeaderNotifications notifications={notifications} unreadCount={2} viewAllHref="#/features/activities" renderLink={renderPreviewLink} />
+														<Separator orientation="vertical" className="h-7" />
+														<HeaderUserMenu
+															user={user}
+															showEmail={false}
+															onProfile={() => {}}
+															onSettings={() => {}}
+															onLogout={() => {}}
+														/>
+													</>
+												),
+											}}
+										/>
+										<div className="space-y-5 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', '8'],
+													['Awaiting stock', '12'],
+													['Ready to fulfill', '36'],
+												].map(([label, value, detail]) => (
+													<SmartCard key={label} padding="sm" className="shadow-sm">
+														<Text size="xs" type="secondary">{label}</Text>
+														<Text weight="semibold">{value}</Text>
+														{!!detail && <Text size="xs" type="secondary">{detail}</Text>}
+													</SmartCard>
+												))}
+											</div>
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function HeaderPartials() {
+	return (
+		<>
+			<SidebarProvider className="min-h-0">
+								<div className="grid w-full gap-4 lg:grid-cols-2">
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Breadcrumbs</Text>
+										<div className="h-10 rounded-lg border border-border bg-background px-3">
+											<HeaderBreadcrumbs
+												showSidebarTrigger
+												homeBreadcrumb={{ label: 'Admin', href: '#/admin' }}
+												renderLink={renderPreviewLink}
+												breadcrumbs={[{ label: 'Customers', href: '#/customers' }, { label: 'Sarah Smitha' }]}
+											/>
+										</div>
+									</SmartCard>
+
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Search</Text>
+										<HeaderSearch className="w-full" strings={{ placeholder: 'Search customers, invoices, comments...' }} />
+									</SmartCard>
+
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Notifications</Text>
+										<div className="flex items-center gap-3">
+											<HeaderNotifications notifications={notifications} unreadCount={2} renderLink={renderPreviewLink} />
+											<Badge variant="warning">Unread state</Badge>
+										</div>
+									</SmartCard>
+
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Right action cluster</Text>
+										<div className="flex items-center gap-2">
+											<HeaderNotifications notifications={notifications} unreadCount={2} renderLink={renderPreviewLink} />
+											<HeaderUserMenu user={user} showEmail={false} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+										</div>
+									</SmartCard>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function CustomNotificationRenderer() {
+	return (
+		<>
+			<div className="flex flex-wrap items-center gap-3 rounded-xl border border-border bg-background p-4 shadow-sm">
+								<HeaderNotifications
+									notifications={notifications}
+									unreadCount={2}
+									renderNotification={(item) => (
+										<div className="flex items-start gap-3 rounded-md px-3 py-2">
+											{item.tone === 'success' ? <CheckCircle2 className="mt-0.5 size-4 text-success" /> : <CircleAlert className="mt-0.5 size-4 text-warning" />}
+											<div className="min-w-0">
+												<Text weight="medium">{item.title}</Text>
+												<Text size="xs" type="secondary">{item.description}</Text>
+											</div>
+										</div>
+									)}
+								/>
+								<Button variant="secondary" icon={Bell}>Open bell</Button>
+								<Button variant="secondary" icon={Settings}>Settings</Button>
+							</div>
+		</>
+	);
+}
+`;function A(e){return x||M(`Examples`,!1),E||M(`Examples.AppHeaderComposition`,!0),O||M(`Examples.CustomNotificationRenderer`,!0),D||M(`Examples.HeaderPartials`,!0),(0,S.jsx)(t,{title:`Layout · Header`,description:`Topbar, breadcrumbs, command search, notifications, and action slots in a realistic app-shell canvas.`,layer:`layout`,status:`ready`,children:(0,S.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,S.jsx)(o,{name:`AppHeaderComposition`,source:k,children:(0,S.jsx)(E,{})}),(0,S.jsx)(o,{name:`HeaderPartials`,source:k,children:(0,S.jsx)(D,{})}),(0,S.jsx)(o,{name:`CustomNotificationRenderer`,source:k,children:(0,S.jsx)(O,{})})]})})}function j(e={}){let{wrapper:t}=e.components||{};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(A,{...e})}):A(e)}function M(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-page-ClD2yMnK.js

@@ -0,0 +1,122 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{cr as n,gr as r,lr as i,r as a,sr as o,t as s,vr as c}from"./example-DPfw-R7_.js";import{t as l}from"./ellipsis-CgqPlt6Z.js";import{t as u}from"./plus-BDSCn8ol.js";import{t as d}from"./refresh-cw-Csl2LQ4l.js";import{t as f}from"./trash-2-B0_GprQM.js";import{D as p,a as m,k as h}from"./index-B-Z7p0So.js";import{t as g}from"./page-action-button-C5NiQHnP.js";import{t as _}from"./smart-card-50WN9sCI.js";import{a as v,s as y}from"./dropdown-menu-Cqv6D7Sb.js";import{t as b}from"./separator-CZ_sPWQj.js";import{t as x}from"./action-menu-CyA2e9TF.js";import{t as S}from"./content-container-D3Phw6h8.js";import{n as C,t as w}from"./page-header-Cwf9DuhD.js";var T=m();function E({header:e,width:t=`narrow`,children:n,className:r,bodyClassName:i,renderLink:a,LinkComponent:o}){return(0,T.jsxs)(S,{width:t,className:r,children:[!!e&&(0,T.jsx)(w,{...e,renderLink:e.renderLink??a,LinkComponent:e.LinkComponent??o}),!!n&&(0,T.jsx)(`div`,{className:c(`relative block w-full`,i),children:n})]})}var D={sm:`max-w-screen-sm`,md:`max-w-screen-md`,lg:`max-w-screen-lg`,xl:`max-w-screen-xl`,"2xl":`max-w-screen-2xl`,full:`max-w-full`};function O({noPadding:e=!1,maxWidth:t,className:n,children:r,...i}){return(0,T.jsx)(`main`,{className:c(`flex-1`,!e&&`p-4 md:p-6`,t&&c(`mx-auto w-full`,D[t]),n),...i,children:r})}var k={menuLabel:`Page actions`},A=t(h(),1),j=e=>e===`destructive`?`error`:e===`primary`||e===`success`||e===`warning`?`primary`:`secondary`,M=`max-h-[80vh] overflow-y-auto overscroll-contain`,N=4;function P(e,t,n){if(e.visible===!1)return null;if(e.element)return(0,T.jsx)(`div`,{children:e.element},e.id??t.index);if(n)return n(e,t);let r=e.id??t.index,i=!!e.disabled||!!e.loading,a=e.icon,o=(0,T.jsxs)(g,{variant:j(e.variant),onClick:e.onClick,disabled:i,children:[!!a&&(0,T.jsx)(a,{className:`size-3.5`,"aria-hidden":`true`}),e.label]},r);return e.href&&!e.onClick?t.renderLink({href:e.href,children:o,className:`inline-flex`,target:e.target,rel:e.rel,external:e.external,disabled:i}):o}function F(e,t,n){let i=[],a=null;return e.forEach(({action:e,index:o})=>{let s={...t,index:o,isInline:!1},l=e.group??null,u=l!==a;if(i.length>0&&u&&i.push((0,T.jsx)(b,{className:`my-1`},`sep-${a??`root`}-${l??`root`}-${e.id??o}`)),u&&(a=l,l&&i.push((0,T.jsx)(`div`,{className:`px-2 pt-1`,children:(0,T.jsx)(r,{size:`xxs`,weight:`semibold`,type:`secondary`,className:`uppercase tracking-wider`,children:l})},`group-${l}-${e.id??o}`))),e.element){i.push((0,T.jsx)(`div`,{children:e.element},e.id??o));return}if(n){i.push((0,T.jsx)(`div`,{children:n(e,s)},e.id??o));return}let d=e.icon,f=!!e.disabled||!!e.loading,p=(0,T.jsxs)(T.Fragment,{children:[!!d&&(0,T.jsx)(d,{className:`size-3.5`,"aria-hidden":`true`}),typeof e.label==`string`?(0,T.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:e.label}):e.label]}),m=c(`gap-1.5 px-2 py-1.5 text-xs`,e.variant===`destructive`&&`text-destructive focus-visible:text-destructive`);if(e.href&&!e.onClick&&!f){i.push((0,T.jsx)(y,{href:e.href,className:m,render:t=>s.renderLink({...t,href:e.href,children:t.children,target:e.target,rel:e.rel,external:e.external}),children:p},e.id??o));return}i.push((0,T.jsx)(v,{disabled:f,onClick:e.onClick,className:m,children:p},e.id??o))}),i}function I({actions:e,display:t=`dropdown`,breakpoint:n=1040,maxInlineActions:r=N,renderLink:i,LinkComponent:a,strings:o,className:s,inlineClassName:u,menuClassName:d,renderAction:f}){let m=p(k,o),h=C({renderLink:i,LinkComponent:a}),g=(0,A.useMemo)(()=>(e??[]).map((e,t)=>({action:e,index:t})).filter(({action:e})=>e.visible!==!1),[e]),[_,v]=(0,A.useState)(!1);if((0,A.useEffect)(()=>{if(t!==`auto`||typeof window>`u`)return;let e=()=>v(window.innerWidth<=n);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[t,n]),g.length===0)return null;let y={renderLink:h},b=c(`flex items-center gap-2`,u,s),S=c(M,d);if(t===`dropdown`||t===`auto`&&_)return(0,T.jsx)(x,{icon:l,srText:m.menuLabel,align:`end`,closeOnSelect:!0,contentClassName:S,children:F(g,y,f)});let w=Math.max(0,r),E=g.filter(({action:e})=>(e.placement??`auto`)!==`menu`),D=E.slice(0,w),O=[...E.slice(w),...g.filter(({action:e})=>(e.placement??`auto`)===`menu`)];return(0,T.jsxs)(`div`,{className:b,children:[D.map(e=>(0,T.jsx)(A.Fragment,{children:P(e.action,{...y,index:e.index,isInline:!0},f)},e.action.id??e.index)),O.length>0&&(0,T.jsx)(x,{icon:l,srText:m.menuLabel,align:`end`,closeOnSelect:!0,contentClassName:S,children:F(O,y,f)})]})}var L=e({ComposablePartials:()=>W,ProductionPageShell:()=>U}),R=[{id:`new`,label:`New customer`,icon:u,variant:`primary`,href:`#/customers/new`,placement:`inline`},{id:`sync`,label:`Sync records`,icon:d,group:`Data`,placement:`menu`},{id:`delete`,label:`Delete saved view`,icon:f,variant:`destructive`,group:`Danger`,placement:`menu`}],z=[{label:`Open invoices`,value:`24`,detail:`8 need manual review`},{label:`Active customers`,value:`1,284`,detail:`+4.8% this month`},{label:`Draft contracts`,value:`16`,detail:`3 waiting on finance`}];function B({href:e,children:t,className:n,target:r,rel:i}){return(0,T.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function V({children:e,height:t=560}){return(0,T.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})}function H(){return(0,T.jsxs)(`div`,{className:`space-y-4`,children:[(0,T.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:z.map(e=>(0,T.jsx)(_,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,T.jsxs)(`div`,{className:`space-y-1`,children:[(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:e.label}),(0,T.jsx)(r,{weight:`semibold`,children:e.value}),(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:e.detail})]})},e.label))}),(0,T.jsx)(_,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,T.jsxs)(`div`,{className:`flex flex-col gap-4 md:flex-row md:items-center md:justify-between`,children:[(0,T.jsxs)(`div`,{className:`space-y-1`,children:[(0,T.jsx)(r,{weight:`semibold`,children:`Review queue`}),(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:`A compact body area that stays owned by the consuming app.`})]}),(0,T.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,T.jsx)(i,{variant:`warning`,children:`8 urgent`}),(0,T.jsx)(i,{variant:`info`,children:`12 assigned`}),(0,T.jsx)(a,{variant:`secondary`,children:`Open queue`})]})]})})]})}function U(){return(0,T.jsx)(V,{children:(0,T.jsx)(E,{width:`full`,renderLink:B,bodyClassName:`space-y-4`,header:{title:`Customers`,description:`Manage accounts, contacts, lifecycle state, and billing risk from one focused workspace.`,headingTag:`h2`,backHref:`#/base/navigation`,titleBadges:[{label:`Live`,variant:`success`}],actions:(0,T.jsx)(I,{actions:R,display:`auto`,renderLink:B}),actionsClassName:`pt-1`},children:(0,T.jsx)(H,{})})})}function W(){return(0,T.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[1.3fr_0.7fr]`,children:[(0,T.jsx)(`div`,{className:`rounded-md border border-border bg-background p-5`,children:(0,T.jsx)(w,{title:`Invoice review`,description:`Use PageHeader directly when an app already owns the surrounding shell.`,headingTag:`h4`,titleBadges:[{label:`42 queued`,variant:`info`},{label:`3 overdue`,variant:`warning`}],actions:(0,T.jsx)(I,{actions:R,display:`flat`,renderLink:B}),renderLink:B})}),(0,T.jsx)(O,{maxWidth:`full`,className:`rounded-md border border-border bg-background p-5`,children:(0,T.jsxs)(`div`,{className:`space-y-2`,children:[(0,T.jsx)(r,{weight:`semibold`,children:`Standalone main region`}),(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:`PageContent supplies body padding and width clamps when Header and Sidebar are composed manually.`}),(0,T.jsx)(a,{variant:`secondary`,children:`Open content`})]})})]})}var G=`import type { ReactNode } from 'react';
+import { Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { Text } from '@/components/typography';
+import { Page, PageActions, PageContent, PageHeader, type PageAction } from '@/components/layout/page';
+import type { LayoutLinkRenderProps } from '@/components/layout';
+
+const actions: PageAction[] = [
+	{ id: 'new', label: 'New customer', icon: Plus, variant: 'primary', href: '#/customers/new', placement: 'inline' },
+	{ id: 'sync', label: 'Sync records', icon: RefreshCw, group: 'Data', placement: 'menu' },
+	{ id: 'delete', label: 'Delete saved view', icon: Trash2, variant: 'destructive', group: 'Danger', placement: 'menu' },
+];
+
+const queue = [
+	{ label: 'Open invoices', value: '24', detail: '8 need manual review' },
+	{ label: 'Active customers', value: '1,284', detail: '+4.8% this month' },
+	{ label: 'Draft contracts', value: '16', detail: '3 waiting on finance' },
+];
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+/**
+ * Layout shells (\`<Page>\`, \`<Sidebar>\`, \`<Header>\`) expect to live inside a
+ * full-height app frame. The docs preview pane is unbounded vertically, so we
+ * give them a fixed-height demo viewport so their internal \`flex-1\` / \`h-full\`
+ * resolve sensibly and the demo reads as intended.
+ */
+function DemoViewport({ children, height = 560 }: { 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>
+	);
+}
+
+function CustomerOverview() {
+	return (
+		<div className="space-y-4">
+			<div className="grid gap-3 md:grid-cols-3">
+				{queue.map((item) => (
+					<SmartCard key={item.label} padding="sm" className="border-border/80 shadow-sm">
+						<div className="space-y-1">
+							<Text size="xs" type="secondary">{item.label}</Text>
+							<Text weight="semibold">{item.value}</Text>
+							<Text size="xs" type="secondary">{item.detail}</Text>
+						</div>
+					</SmartCard>
+				))}
+			</div>
+
+			<SmartCard padding="sm" className="border-border/80 shadow-sm">
+				<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+					<div className="space-y-1">
+						<Text weight="semibold">Review queue</Text>
+						<Text size="xs" type="secondary">A compact body area that stays owned by the consuming app.</Text>
+					</div>
+					<div className="flex flex-wrap items-center gap-2">
+						<Badge variant="warning">8 urgent</Badge>
+						<Badge variant="info">12 assigned</Badge>
+						<Button variant="secondary">Open queue</Button>
+					</div>
+				</div>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function ProductionPageShell() {
+	return (
+		<DemoViewport>
+			<Page
+				width="full"
+				renderLink={renderPreviewLink}
+				bodyClassName="space-y-4"
+				header={{
+					title: 'Customers',
+					description: 'Manage accounts, contacts, lifecycle state, and billing risk from one focused workspace.',
+					headingTag: 'h2',
+					backHref: '#/base/navigation',
+					titleBadges: [{ label: 'Live', variant: 'success' }],
+					actions: <PageActions actions={actions} display="auto" renderLink={renderPreviewLink} />,
+					actionsClassName: 'pt-1',
+				}}
+			>
+				<CustomerOverview />
+			</Page>
+		</DemoViewport>
+	);
+}
+
+export function ComposablePartials() {
+	return (
+		<div className="grid gap-4 lg:grid-cols-[1.3fr_0.7fr]">
+			<div className="rounded-md border border-border bg-background p-5">
+				<PageHeader
+					title="Invoice review"
+					description="Use PageHeader directly when an app already owns the surrounding shell."
+					headingTag="h4"
+					titleBadges={[{ label: '42 queued', variant: 'info' }, { label: '3 overdue', variant: 'warning' }]}
+					actions={<PageActions actions={actions} display="flat" renderLink={renderPreviewLink} />}
+					renderLink={renderPreviewLink}
+				/>
+			</div>
+
+			<PageContent maxWidth="full" className="rounded-md border border-border bg-background p-5">
+				<div className="space-y-2">
+					<Text weight="semibold">Standalone main region</Text>
+					<Text size="xs" type="secondary">PageContent supplies body padding and width clamps when Header and Sidebar are composed manually.</Text>
+					<Button variant="secondary">Open content</Button>
+				</div>
+			</PageContent>
+		</div>
+	);
+}
+`;function K(e){return L||J(`Examples`,!1),W||J(`Examples.ComposablePartials`,!0),U||J(`Examples.ProductionPageShell`,!0),(0,T.jsx)(n,{title:`Layout · Page`,description:`Page shell, header partials, actions, and content regions with framework-neutral links.`,layer:`layout`,status:`ready`,children:(0,T.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,T.jsx)(s,{name:`ProductionPageShell`,source:G,children:(0,T.jsx)(U,{})}),(0,T.jsx)(s,{name:`ComposablePartials`,source:G,children:(0,T.jsx)(W,{})})]})})}function q(e={}){let{wrapper:t}=e.components||{};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(K,{...e})}):K(e)}function J(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{q as default};