admin-ui-starter-kit 0.1.2 → 0.1.4

package/dist/showcase/assets/metrics-stat-cards-Cilh-A5D.js

@@ -0,0 +1,54 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{hr as t,mr as n,t as r}from"./example-C6-_Sy6B.js";import{a as i}from"./index-B8DVXCmf.js";import{t as a}from"./props-table-CM_1cocj.js";import{t as o}from"./metric-BWGrmyD6.js";var s=e({MetricAccent:()=>m,MetricColored:()=>h}),c=i(),l=[12,18,15,25,22,30,28,35,32,40,38,45],u=[40,38,35,30,28,25,22,20,18,15,12,10],d={id:`sales`,label:`Total Sales`,value:`52,340 USD`,change:{value:`8.2%`,direction:`up`},subtitle:`vs. last month`,sparkline:l},f={id:`refunds`,label:`Refunds`,value:`1,230 USD`,change:{value:`15.4%`,direction:`down`},subtitle:`3 refunds`,sparkline:u,trend:`negative`},p=[{data:{id:`rev`,label:`Revenue`,value:`124.5K`,subtitle:`Projects`,change:{value:`12.5%`,direction:`up`}},scheme:`primary`,progress:75},{data:{id:`done`,label:`Completed`,value:`892`,subtitle:`Tasks`,change:{value:`5.3%`,direction:`up`}},scheme:`success`,progress:88},{data:{id:`pend`,label:`Pending`,value:`34`,subtitle:`Reviews`,change:{value:`0%`,direction:`neutral`}},scheme:`warning`,progress:42},{data:{id:`visits`,label:`Visits`,value:`18.4K`,subtitle:`This week`,change:{value:`2.1%`,direction:`down`}},scheme:`info`,progress:60}];function m(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-2`,children:[(0,c.jsx)(o,{data:d,variant:`accent`}),(0,c.jsx)(o,{data:f,variant:`accent`})]})})}function h(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(`div`,{className:`grid gap-4 md:grid-cols-2 lg:grid-cols-4`,children:p.map(({data:e,scheme:t,progress:n})=>(0,c.jsx)(o,{data:e,variant:`colored`,colorScheme:t,progress:n},e.id))})})}var g=`import { Metric, type MetricData } from '@/components/composed/analytics';
+
+const UP = [12, 18, 15, 25, 22, 30, 28, 35, 32, 40, 38, 45];
+const DOWN = [40, 38, 35, 30, 28, 25, 22, 20, 18, 15, 12, 10];
+
+const sales: MetricData = {
+	id: 'sales',
+	label: 'Total Sales',
+	value: '52,340 USD',
+	change: { value: '8.2%', direction: 'up' },
+	subtitle: 'vs. last month',
+	sparkline: UP,
+};
+
+const refunds: MetricData = {
+	id: 'refunds',
+	label: 'Refunds',
+	value: '1,230 USD',
+	change: { value: '15.4%', direction: 'down' },
+	subtitle: '3 refunds',
+	sparkline: DOWN,
+	trend: 'negative',
+};
+
+const COLORED: { data: MetricData; scheme: 'primary' | 'success' | 'warning' | 'info'; progress: number }[] = [
+	{ data: { id: 'rev', label: 'Revenue', value: '124.5K', subtitle: 'Projects', change: { value: '12.5%', direction: 'up' } }, scheme: 'primary', progress: 75 },
+	{ data: { id: 'done', label: 'Completed', value: '892', subtitle: 'Tasks', change: { value: '5.3%', direction: 'up' } }, scheme: 'success', progress: 88 },
+	{ data: { id: 'pend', label: 'Pending', value: '34', subtitle: 'Reviews', change: { value: '0%', direction: 'neutral' } }, scheme: 'warning', progress: 42 },
+	{ data: { id: 'visits', label: 'Visits', value: '18.4K', subtitle: 'This week', change: { value: '2.1%', direction: 'down' } }, scheme: 'info', progress: 60 },
+];
+
+export function MetricAccent() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2">
+								<Metric data={sales} variant="accent" />
+								<Metric data={refunds} variant="accent" />
+							</div>
+		</>
+	);
+}
+
+export function MetricColored() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+								{COLORED.map(({ data, scheme, progress }) => (
+									<Metric key={data.id} data={data} variant="colored" colorScheme={scheme} progress={progress} />
+								))}
+							</div>
+		</>
+	);
+}
+`;function _(e){let i={h4:`h4`,...e.components};return s||y(`Examples`,!1),m||y(`Examples.MetricAccent`,!0),h||y(`Examples.MetricColored`,!0),(0,c.jsxs)(t,{title:`Features · Metrics · Stat cards`,description:"Two stat tile flavors built from the unified `Metric` component — `accent` (dark surface + sparkline) and `colored` (segmented progress bar).",layer:`features`,status:`ready`,children:[(0,c.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,c.jsx)(r,{name:`MetricAccent`,source:g,children:(0,c.jsx)(m,{})}),(0,c.jsx)(r,{name:`MetricColored`,source:g,children:(0,c.jsx)(h,{})})]}),(0,c.jsxs)(n,{title:`API`,id:`api`,children:[(0,c.jsx)(i.h4,{children:`Metric`}),(0,c.jsx)(a,{component:`Metric`})]})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(_,{...e})}):_(e)}function y(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{v as default};

package/dist/showcase/assets/minus-DvrDGcTv.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B8DVXCmf.js";var t=e(`minus`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}]]);export{t};

package/dist/showcase/assets/money-display-0egZ_O76.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Cr as n,Tr as r,Ur as i,zr as a}from"./example-C6-_Sy6B.js";import{a as o}from"./index-B8DVXCmf.js";var s=e(t(),1);function c(e){let t=a(),{defaultCurrency:n,displayCurrency:r,locale:i,dualPricingEnabled:o,displayMode:c,dualPricingDisplay:l,formatMode:u}=(0,s.useMemo)(()=>{let n={...t,...e},r=n.defaultCurrency??`USD`;return{defaultCurrency:r,displayCurrency:n.displayCurrency??r,locale:n.locale,dualPricingEnabled:n.dualPricingEnabled??!1,displayMode:n.displayMode??`default_only`,dualPricingDisplay:n.dualPricingDisplay??`lines`,formatMode:n.formatMode??`with_code`}},[t,e]);return{defaultCurrency:n,displayCurrency:r,dualPricingEnabled:o,displayMode:c,dualPricingDisplay:l,formatMode:u,shouldShowDualPricing:()=>o?c===`dual`:!1,formatAmount:(e,t,n)=>{let r=typeof e==`string`?parseFloat(e):e;if(!Number.isFinite(r))return t?`${String(e)} ${t}`.trim():String(e);let a=new Intl.NumberFormat(i,{minimumFractionDigits:2,maximumFractionDigits:2}).format(r);switch(u){case`decimal`:return a;case`with_code`:return t?`${a} ${t}`:a;case`with_symbol`:return n?`${n}${a}`:t?`${a} ${t}`:a;case`locale_aware`:if(!t)return a;try{return new Intl.NumberFormat(i,{style:`currency`,currency:t}).format(r)}catch{return`${a} ${t}`}default:return t?`${a} ${t}`:a}},getCurrencySymbol:e=>({BGN:`лв`,EUR:`€`,USD:`$`,GBP:`£`,JPY:`¥`})[e]??e}}var l=o(),u=e=>{if(e==null)return null;let t=typeof e==`number`?e:Number.parseFloat(String(e).trim());return Number.isFinite(t)?t:null},d=e=>{let t=u(e?.value);return t===null?null:{value:t,currency:e?.currency?String(e.currency):null,symbol:e?.symbol?String(e.symbol):null}},f=e=>{let t=u(e?.amount);return t===null?null:{value:t,currency:e?.currency?String(e.currency):null,symbol:null}},p=e=>{let t=u(e?.amount);return t===null?null:{value:t,currency:e?.currency?String(e.currency):null,symbol:null}};function m({money:e,moneyPair:t,amount:a,pair:o,showPair:s=!1,dualPricingDisplay:u,alignment:m,emptyLabel:h=`—`,variant:g=`default`,secondaryEmphasis:_=`discrete`,className:v,size:y,align:b=`right`,weight:x=`medium`,tag:S=`span`,...C}){let{defaultTextSize:w}=i(),T=y??w??`sm`,{displayCurrency:E,dualPricingDisplay:D,shouldShowDualPricing:O,formatAmount:k,getCurrencySymbol:A}=c(),j=u??D??`lines`,M=(O()||s)&&t?.primary?f(t.primary):null,N=f(e),P=d(a),F=M??N??P??null,I=F?.currency??E??null,L=(s||O())&&!!(t??o??e?.pair),R=g===`minimal`||_===`hidden`?null:(()=>{if(!L)return null;if(t?.primary&&t?.secondary)return f(t.secondary);if(e?.pair)return p(e.pair);if(o?.source||o?.target){let e=d(o?.source??null),t=d(o?.target??null);if(!e&&!t)return null;let n=e?.currency??null,r=t?.currency??null;return I&&r===I?e:I&&n===I?t:E&&r===E?e:E&&n===E?t:t??e}return null})(),z=m??b,B=z===`left`?`text-left`:z===`center`?`text-center`:`text-right`,V=z===`left`?`justify-start`:z===`center`?`justify-center`:`justify-end`;if(!F)return(0,l.jsx)(n,{tag:S,size:T,type:`secondary`,align:z,className:r(`money-display--component`,`money--display inline-flex flex-col tabular-nums`,B,v),...C,children:h});let H=k(F.value,I??``,F.symbol??(I?A(I):void 0)),U=R?k(R.value,R.currency??``,R.symbol??(R.currency?A(R.currency):void 0)):null,W=_===`match`?T:_===`muted`?`xs`:`xxs`,G=_===`match`?void 0:_===`muted`?`secondary`:`discrete`;return j===`inline`&&U?(0,l.jsxs)(`span`,{className:r(`money--display inline-flex items-baseline gap-1.5 tabular-nums whitespace-nowrap`,V,v),...C,children:[(0,l.jsx)(n,{tag:`span`,size:T,weight:x,children:H}),(0,l.jsx)(n,{tag:`span`,size:`xxs`,type:`discrete`,"aria-hidden":`true`,children:`·`}),(0,l.jsx)(n,{tag:`span`,size:W,type:G,weight:`regular`,children:U})]}):(0,l.jsxs)(n,{tag:S,size:T,align:z,className:r(`money--display inline-flex flex-col tabular-nums leading-tight`,B,v),...C,children:[(0,l.jsx)(n,{tag:`span`,size:T,weight:x,children:H}),!!U&&(0,l.jsx)(n,{tag:`span`,size:W,align:z,type:G,className:`block whitespace-nowrap font-normal leading-tight`,children:U})]})}m.displayName=`MoneyDisplay`;export{c as n,m as t};

package/dist/showcase/assets/month-year-picker-2cWfwnmP.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{t as n}from"./format-BG4laCmp.js";import{Cr as r,Tr as i,r as a}from"./example-C6-_Sy6B.js";import{t as o}from"./calendar-oKaDsUIy.js";import{D as s,a as c,c as ee}from"./index-B8DVXCmf.js";import{a as l,i as u,n as d,o as f,t as p}from"./select-CF3cKjCo.js";import{t as m}from"./label-BmKD22pm.js";import{r as h,t as g}from"./popover-T85aV4zW.js";import{t as _}from"./popover-DtnuOBgr.js";import{a as v,n as y,o as b,r as x}from"./date-picker-BHbZa4ML.js";var S=e(t(),1),C=c();function w({value:e,defaultValue:t,onChange:c,format:w=`yyyy-MM`,readableFormat:T=`MMMM yyyy`,placeholder:E,label:D,hint:O,error:k,disabled:A=!1,className:j,closeOnSelect:M=!0,translations:N,strings:P,locale:F,header:I,footer:L,fromYear:R,toYear:z}){let B=new Date().getFullYear(),[V,H]=S.useState(!1),[U,W]=S.useState(e??t),G=F??ee,K=s(x,P??N),q=S.useId(),J=S.useMemo(()=>{let e=R??2017,t=z??2035;return Array.from({length:t-e+1},(t,n)=>e+n)},[R,z]),Y=S.useMemo(()=>Array.from({length:12},(e,t)=>n(new Date(2e3,t,1),`MMMM`,{locale:G})),[G]);S.useEffect(()=>{e!==void 0&&W(e)},[e]);let X=S.useCallback((e,t)=>{let r=new Date(t,e,1);return{month:e,year:t,formatted:n(r,w),readable:n(r,T,{locale:G}),date:r}},[w,T,G]),Z=S.useCallback(e=>{W({month:parseInt(String(e),10),year:U?.year??B})},[U?.year,B]),Q=S.useCallback(e=>{let t=parseInt(String(e),10);W({month:U?.month??0,year:t})},[U?.month]),te=S.useCallback(()=>{U&&(c?.(X(U.month,U.year)),M&&H(!1))},[U,c,X,M]),$=S.useMemo(()=>U?n(new Date(U.year,U.month,1),T,{locale:G}):E??K.selectMonthYear,[U,T,G,E,K.selectMonthYear]);return(0,C.jsxs)(`div`,{className:i(`month-year-picker--component`,`flex flex-col gap-2`,j),children:[!!D&&(0,C.jsx)(m,{htmlFor:q,className:i(k&&`text-destructive`),children:D}),(0,C.jsxs)(g,{open:V,onOpenChange:H,children:[(0,C.jsx)(h,{render:e=>(0,C.jsxs)(a,{...e,id:q,variant:`secondary`,buttonStyle:`outline`,"aria-invalid":!!k,className:i(`w-full justify-start text-left font-normal`,y,!U&&`text-muted-foreground`,e.className),disabled:A,children:[(0,C.jsx)(o,{className:`mr-2 h-4 w-4`}),$]})}),(0,C.jsxs)(_,{className:`w-80 p-0`,align:`start`,children:[!!I&&(0,C.jsx)(v,{config:I}),(0,C.jsxs)(`div`,{className:`p-4 space-y-4`,children:[(0,C.jsxs)(`div`,{className:`space-y-2`,children:[(0,C.jsx)(m,{htmlFor:`month-select`,children:K.month}),(0,C.jsxs)(p,{value:U?.month?.toString(),onValueChange:Z,disabled:A,children:[(0,C.jsx)(l,{id:`month-select`,className:`w-full`,children:(0,C.jsx)(f,{placeholder:K.month})}),(0,C.jsx)(d,{children:Y.map((e,t)=>(0,C.jsx)(u,{value:t.toString(),children:e},e))})]})]}),(0,C.jsxs)(`div`,{className:`space-y-2`,children:[(0,C.jsx)(m,{htmlFor:`year-select`,children:K.year}),(0,C.jsxs)(p,{value:U?.year?.toString(),onValueChange:Q,disabled:A,children:[(0,C.jsx)(l,{id:`year-select`,className:`w-full`,children:(0,C.jsx)(f,{placeholder:K.year})}),(0,C.jsx)(d,{children:J.map(e=>(0,C.jsx)(u,{value:e.toString(),children:e},e))})]})]})]}),(0,C.jsx)(`div`,{className:`p-4 pt-0`,children:(0,C.jsx)(a,{className:`w-full`,onClick:te,disabled:A||!U,children:K.confirm})}),!!L&&!!U&&(0,C.jsx)(b,{config:L,output:X(U.month,U.year),hasSelection:!!U,autoSummary:$})]})]}),!!k&&(0,C.jsx)(r,{type:`error`,children:k}),!!O&&!k&&(0,C.jsx)(r,{type:`secondary`,children:O})]})}w.displayName=`MonthYearPicker`;export{w as t};

package/dist/showcase/assets/navigation-BnYme-Wj.js

@@ -0,0 +1,90 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Tr as i,gr as a,hr as o,mr as s,r as c,t as l}from"./example-C6-_Sy6B.js";import{t as u}from"./heart-DjKkkUsX.js";import{t as d}from"./plus-C9kwz7rW.js";import{t as f}from"./sparkles-BEa1AgNq.js";import{t as p}from"./star-Dbtxr60S.js";import{t as m}from"./zap-se3n2YVD.js";import{D as h,a as g}from"./index-B8DVXCmf.js";import{t as _}from"./props-table-CM_1cocj.js";import{t as v}from"./smart-card-7szg_qSt.js";import{c as y,i as b,l as x,o as S,r as C,t as w,u as T}from"./item-CMRbW6s-.js";var E=g();function D({columns:e,className:t}){return(0,E.jsx)(v,{title:`Pipeline Overview`,titleSuffix:(0,E.jsxs)(a,{variant:`secondary`,children:[e.reduce((e,t)=>e+t.items.length,0),` items`]}),className:i(`kanban-board--component`,t),children:(0,E.jsx)(`div`,{className:`grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4`,children:e.map((e,t)=>(0,E.jsxs)(`div`,{className:i(`rounded-md border border-border/60 p-2`,t%2==0?`bg-muted/40`:`bg-muted/20`),children:[(0,E.jsxs)(`div`,{className:`mb-2 flex items-center justify-between gap-2`,children:[(0,E.jsx)(r,{size:`xs`,weight:`semibold`,className:`truncate`,children:e.title}),(0,E.jsx)(a,{variant:`secondary`,children:e.items.length})]}),(0,E.jsx)(`div`,{className:`space-y-1.5`,children:e.items.map((t,n)=>(0,E.jsxs)(`div`,{className:`flex min-h-8 items-center gap-2 rounded-md border border-border/50 bg-card px-2 py-1.5 shadow-sm`,children:[(0,E.jsx)(`div`,{className:`h-1.5 w-1.5 flex-shrink-0 rounded-full`,style:{backgroundColor:`var(--color-${t.color})`}}),(0,E.jsx)(r,{size:`xs`,className:`truncate`,children:t.title})]},`${e.title}-${n}`))})]},e.title))})})}D.displayName=`KanbanMicroBoard`;var O=t(n(),1);function k({title:e,tabs:t,defaultTab:n,className:a}){let o=Object.keys(t),[s,l]=(0,O.useState)(n??o[0]??``);return(0,E.jsxs)(v,{title:e,className:i(`tab-switcher--component`,`bg-gradient-to-b from-muted/30 to-card`,a),children:[(0,E.jsx)(`div`,{className:`mt-4 flex gap-1 rounded-full bg-muted/50 p-1`,children:o.map(e=>(0,E.jsx)(c,{variant:s===e?`light`:`secondary`,buttonStyle:s===e?`solid`:`ghost`,onClick:()=>l(e),className:i(`flex-1 rounded-full capitalize`,s===e?`shadow-sm`:``),children:e},e))}),(0,E.jsx)(`div`,{className:`mt-4 space-y-2`,children:t[s]?.map(e=>(0,E.jsxs)(`div`,{className:`flex items-center gap-3 rounded-xl px-2 py-2 transition-colors hover:bg-muted/20`,children:[!!e.icon&&(0,E.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-full bg-primary/10`,children:(0,E.jsx)(e.icon,{className:`size-4 text-primary`})}),(0,E.jsx)(r,{className:`flex-1`,children:e.name}),(0,E.jsx)(r,{weight:`bold`,children:e.value})]},e.name))})]})}k.displayName=`TabSwitcherCard`;var A={legendNone:`None`,legendLow:`Low`,legendMedium:`Medium`,legendHigh:`High`,legendNow:`Now`,formatHourTitle:(e,t)=>`${e}:00 - ${t} bookings`};function j({hours:e,currentHour:t,className:n,strings:a}){let o=h(A,a),s=Math.max(...e,1),c=e.indexOf(Math.max(...e));function l(e){if(e===0)return`bg-muted`;let t=e/s;return t<.33?`bg-primary/25`:t<.66?`bg-primary/55`:`bg-primary`}return(0,E.jsxs)(`div`,{className:i(`time-ruler--component`,`space-y-1.5`,n),children:[(0,E.jsx)(`div`,{className:`relative flex h-8 gap-[1px] rounded-md overflow-hidden`,children:e.map((e,t)=>(0,E.jsx)(`div`,{className:i(`relative flex-1 transition-colors duration-200`,l(e),t===c&&`ring-1 ring-primary ring-inset`),title:o.formatHourTitle(String(t).padStart(2,`0`),e)},t))}),(0,E.jsx)(`div`,{className:`relative flex`,children:e.map((e,t)=>(0,E.jsx)(`div`,{className:`flex-1 text-center`,children:t%4==0&&(0,E.jsx)(r,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:String(t).padStart(2,`0`)})},t))}),t!==void 0&&t>=0&&t<24&&(0,E.jsx)(`div`,{className:`relative h-0`,children:(0,E.jsx)(`div`,{className:`absolute -top-[42px] flex flex-col items-center`,style:{left:`${t/24*100}%`,transform:`translateX(-50%)`},children:(0,E.jsx)(`div`,{className:`h-0 w-0 border-x-[4px] border-b-[5px] border-x-transparent border-b-destructive`})})}),(0,E.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-muted`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:o.legendNone})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary/25`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:o.legendLow})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary/55`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:o.legendMedium})]}),(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-2 w-3 rounded-sm bg-primary`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:o.legendHigh})]}),t!==void 0&&(0,E.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,E.jsx)(`div`,{className:`h-0 w-0 border-x-[3px] border-b-[4px] border-x-transparent border-b-destructive`}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:o.legendNow})]})]})]})}j.displayName=`TimeDistributionRuler`;function M({rating:e,maxRating:t=5}){return(0,E.jsx)(`div`,{className:i(`vendor-performance--component`,`flex items-center gap-0.5`),children:Array.from({length:t},(t,n)=>(0,E.jsx)(`svg`,{className:i(`h-3.5 w-3.5`,n<e?`text-warning`:`text-muted`),viewBox:`0 0 24 24`,fill:`currentColor`,stroke:`none`,children:(0,E.jsx)(`path`,{d:`M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z`})},`star-${String(n)}`))})}function N(e){return e>=80?`bg-success`:e>=50?`bg-warning`:`bg-destructive`}function P({vendorName:e,rating:t,maxRating:n=5,metrics:a,performanceScore:o,lastActive:s,joinedDate:c,className:l}){return(0,E.jsx)(v,{title:e,className:l,footerText:(0,E.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,E.jsxs)(r,{size:`xxs`,type:`secondary`,children:[`Last active: `,s]}),(0,E.jsxs)(r,{size:`xxs`,type:`secondary`,children:[`Joined: `,c]})]}),children:(0,E.jsxs)(`div`,{className:`space-y-4`,children:[(0,E.jsx)(M,{rating:t,maxRating:n}),(0,E.jsx)(`div`,{className:`grid grid-cols-2 gap-2`,children:[{label:`Bookings`,value:String(a.bookings)},{label:`Revenue`,value:a.revenue},{label:`Avg Rating`,value:String(a.avgRating)},{label:`Response`,value:a.responseTime}].map(e=>(0,E.jsxs)(`div`,{className:`rounded-lg bg-muted/50 p-3 text-center`,children:[(0,E.jsx)(r,{size:`lg`,weight:`bold`,className:`tabular-nums`,children:e.value}),(0,E.jsx)(r,{size:`xxs`,type:`secondary`,children:e.label})]},e.label))}),(0,E.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,E.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,E.jsx)(r,{children:`Performance`}),(0,E.jsxs)(r,{weight:`semibold`,className:`tabular-nums`,children:[o,`%`]})]}),(0,E.jsx)(`div`,{className:`h-2 w-full overflow-hidden rounded-full bg-muted`,children:(0,E.jsx)(`div`,{className:i(`h-full rounded-full transition-all duration-500`,N(o)),style:{width:`${String(o)}%`}})})]})]})})}P.displayName=`VendorPerformanceCard`;var F={description:`Experiences completed this week`,addActionLabel:`Add activity`};function I({completed:e,total:t,activities:n,onAdd:a,strings:o,className:s}){let l=h(F,o);return(0,E.jsx)(v,{title:`${e} out of ${t}`,description:l.description,headerEnd:!!a&&(0,E.jsx)(c,{variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":l.addActionLabel,onClick:a,children:(0,E.jsx)(d,{className:`size-4`})}),className:i(`experience-activity--component`,s),children:(0,E.jsx)(S,{children:n.map((e,t)=>(0,E.jsxs)(`div`,{children:[t>0&&(0,E.jsx)(x,{}),(0,E.jsxs)(w,{size:`xs`,className:`px-0 items-start`,children:[(0,E.jsx)(y,{children:(0,E.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-md bg-primary/10 text-primary`,children:(0,E.jsx)(e.icon,{className:`size-4`})})}),(0,E.jsxs)(C,{children:[(0,E.jsx)(T,{children:e.title}),(0,E.jsx)(b,{clamp:1,children:e.time}),(0,E.jsx)(`div`,{className:`mt-2 grid grid-cols-2 gap-1.5`,children:e.metrics.map(e=>(0,E.jsxs)(`div`,{className:`rounded-md border border-border/50 bg-muted/25 px-2.5 py-1.5`,children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,children:e.label}),(0,E.jsx)(r,{size:`xs`,weight:`semibold`,children:e.value})]},e.label))})]})]})]},e.title))})})}I.displayName=`ExperienceActivityCard`;var L=e({ExperienceActivity:()=>H,KanbanMicroBoardExample:()=>R,TabSwitcherCardExample:()=>z,TimeDistributionRulerExample:()=>B,VendorPerformance:()=>V});function R(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(`div`,{className:`w-full max-w-4xl`,children:(0,E.jsx)(D,{columns:[{title:`Draft`,items:[{title:`Spa Package v2`,color:`chart-4`},{title:`Wine Tour`,color:`chart-3`}]},{title:`Active`,items:[{title:`Cooking Class`,color:`chart-1`},{title:`Paragliding`,color:`chart-1`}]},{title:`Review`,items:[{title:`Horse Riding`,color:`chart-3`}]},{title:`Done`,items:[{title:`Balloon Ride`,color:`chart-1`},{title:`Photo Tour`,color:`chart-1`}]}]})})})}function z(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(k,{title:`Gift Cards`,tabs:{recent:[{name:`Luxury Spa Voucher`,value:`150 USD`,icon:u},{name:`Adventure Day Pass`,value:`85 USD`,icon:m}],popular:[{name:`Wine Tasting for Two`,value:`95 USD`,icon:p},{name:`Hot Air Balloon`,value:`280 USD`,icon:f}]}})})}function B(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(v,{title:`Booking Density Today`,children:(0,E.jsx)(j,{hours:[0,0,0,0,0,0,1,3,8,12,15,10,14,11,16,18,12,8,5,3,2,1,0,0],currentHour:14})})})}function V(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(P,{vendorName:`Spa Retreat New York`,rating:5,metrics:{bookings:342,revenue:`89,200 USD`,avgRating:4.8,responseTime:`1.2 hrs`},performanceScore:94,lastActive:`2 hours ago`,joinedDate:`Jan 2023`})})}function H(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,E.jsx)(I,{completed:2,total:5,activities:[{icon:u,title:`Couples Spa Day`,time:`Mar 25, 14:00`,metrics:[{label:`Duration`,value:`3h`},{label:`Value`,value:`180 USD`},{label:`Bookings`,value:`12`},{label:`Score`,value:`9.4`}]},{icon:p,title:`Wine & Dine Tour`,time:`Mar 24, 18:30`,metrics:[{label:`Duration`,value:`4h`},{label:`Value`,value:`220 USD`}]}],onAdd:()=>{}})})})}var U=`import { Heart, Star, Sparkles, Zap } from 'lucide-react';
+import {
+	KanbanMicroBoard,
+	TabSwitcherCard,
+	TimeDistributionRuler,
+	VendorPerformanceCard,
+	ExperienceActivityCard,
+} from '@/components/composed/navigation';
+import { SmartCard } from '@/components/base/cards';
+
+export function KanbanMicroBoardExample() {
+	return (
+		<>
+			<div className="w-full max-w-4xl">
+				<KanbanMicroBoard
+								columns={[
+									{ title: 'Draft', items: [{ title: 'Spa Package v2', color: 'chart-4' }, { title: 'Wine Tour', color: 'chart-3' }] },
+									{ title: 'Active', items: [{ title: 'Cooking Class', color: 'chart-1' }, { title: 'Paragliding', color: 'chart-1' }] },
+									{ title: 'Review', items: [{ title: 'Horse Riding', color: 'chart-3' }] },
+									{ title: 'Done', items: [{ title: 'Balloon Ride', color: 'chart-1' }, { title: 'Photo Tour', color: 'chart-1' }] },
+								]}
+							/>
+			</div>
+		</>
+	);
+}
+
+export function TabSwitcherCardExample() {
+	return (
+		<>
+			<TabSwitcherCard
+								title="Gift Cards"
+								tabs={{
+									recent: [
+										{ name: 'Luxury Spa Voucher', value: '150 USD', icon: Heart },
+										{ name: 'Adventure Day Pass', value: '85 USD', icon: Zap },
+									],
+									popular: [
+										{ name: 'Wine Tasting for Two', value: '95 USD', icon: Star },
+										{ name: 'Hot Air Balloon', value: '280 USD', icon: Sparkles },
+									],
+								}}
+							/>
+		</>
+	);
+}
+
+export function TimeDistributionRulerExample() {
+	return (
+		<>
+			<SmartCard title="Booking Density Today">
+								<TimeDistributionRuler hours={[0, 0, 0, 0, 0, 0, 1, 3, 8, 12, 15, 10, 14, 11, 16, 18, 12, 8, 5, 3, 2, 1, 0, 0]} currentHour={14} />
+							</SmartCard>
+		</>
+	);
+}
+
+export function VendorPerformance() {
+	return (
+		<>
+			<VendorPerformanceCard
+								vendorName="Spa Retreat New York"
+								rating={5}
+								metrics={{ bookings: 342, revenue: '89,200 USD', avgRating: 4.8, responseTime: '1.2 hrs' }}
+								performanceScore={94}
+								lastActive="2 hours ago"
+								joinedDate="Jan 2023"
+							/>
+		</>
+	);
+}
+
+export function ExperienceActivity() {
+	return (
+		<>
+			<div className="w-full max-w-2xl">
+				<ExperienceActivityCard
+								completed={2}
+								total={5}
+								activities={[
+									{ icon: Heart, title: 'Couples Spa Day', time: 'Mar 25, 14:00', metrics: [{ label: 'Duration', value: '3h' }, { label: 'Value', value: '180 USD' }, { label: 'Bookings', value: '12' }, { label: 'Score', value: '9.4' }] },
+									{ icon: Star, title: 'Wine & Dine Tour', time: 'Mar 24, 18:30', metrics: [{ label: 'Duration', value: '4h' }, { label: 'Value', value: '220 USD' }] },
+								]}
+								onAdd={() => {}}
+							/>
+			</div>
+		</>
+	);
+}
+`;function W(e){let t={h4:`h4`,...e.components};return L||K(`Examples`,!1),H||K(`Examples.ExperienceActivity`,!0),R||K(`Examples.KanbanMicroBoardExample`,!0),z||K(`Examples.TabSwitcherCardExample`,!0),B||K(`Examples.TimeDistributionRulerExample`,!0),V||K(`Examples.VendorPerformance`,!0),(0,E.jsxs)(o,{title:`Composed · Navigation & boards`,description:`Kanban, tab switcher, time ruler, vendor performance, experience activity.`,layer:`composed`,status:`ready`,children:[(0,E.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(l,{name:`KanbanMicroBoardExample`,source:U,children:(0,E.jsx)(R,{})}),(0,E.jsx)(l,{name:`TabSwitcherCardExample`,source:U,children:(0,E.jsx)(z,{})}),(0,E.jsx)(l,{name:`TimeDistributionRulerExample`,source:U,children:(0,E.jsx)(B,{})}),(0,E.jsx)(l,{name:`VendorPerformance`,source:U,children:(0,E.jsx)(V,{})}),(0,E.jsx)(l,{name:`ExperienceActivity`,source:U,children:(0,E.jsx)(H,{})})]}),(0,E.jsxs)(s,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`KanbanMicroBoard`}),(0,E.jsx)(_,{component:`KanbanMicroBoard`}),(0,E.jsx)(t.h4,{children:`TabSwitcherCard`}),(0,E.jsx)(_,{component:`TabSwitcherCard`}),(0,E.jsx)(t.h4,{children:`TimeDistributionRuler`}),(0,E.jsx)(_,{component:`TimeDistributionRuler`}),(0,E.jsx)(t.h4,{children:`VendorPerformanceCard`}),(0,E.jsx)(_,{component:`VendorPerformanceCard`}),(0,E.jsx)(t.h4,{children:`ExperienceActivityCard`}),(0,E.jsx)(_,{component:`ExperienceActivityCard`})]})]})}function G(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(W,{...e})}):W(e)}function K(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{G as default};

package/dist/showcase/assets/navigation-CLQWl32A.js

@@ -0,0 +1,230 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Hn as i,Sr as a,Tr as o,gr as s,hr as c,mr as l,r as u,t as d}from"./example-C6-_Sy6B.js";import{t as f}from"./bell-CVEeEWw4.js";import{t as p}from"./chart-column-6Tn3WAT9.js";import{t as m}from"./chevron-down-x7TQsvYY.js";import{t as h}from"./credit-card-BoDfW0R8.js";import{t as g}from"./database-DeGR0hed.js";import{t as _}from"./ellipsis-Bn-XgoA7.js";import{t as v}from"./file-text-BIi71mZ1.js";import{t as y}from"./folder-open-zMXBpVNs.js";import{t as ee}from"./globe-47T22W56.js";import{t as b}from"./house-DKxCiHyB.js";import{t as te}from"./inbox-ZxSy1pgX.js";import{t as ne}from"./message-square-DGTAjNJG.js";import{t as re}from"./plus-C9kwz7rW.js";import{t as x}from"./settings-DlKX-bZT.js";import{t as ie}from"./shield-BD0Y8Jj3.js";import{t as ae}from"./square-pen-N0mq-vPu.js";import{t as oe}from"./star-Dbtxr60S.js";import{t as se}from"./trash-2-_xF5j-Ya.js";import{t as S}from"./users-DzgXeZbf.js";import{D as ce,a as le}from"./index-B8DVXCmf.js";import{t as C}from"./props-table-CM_1cocj.js";import{a as ue,l as de,r as fe,t as pe}from"./dropdown-menu-Q1BV3wPP.js";import{t as w}from"./separator-DUKleOvU.js";import{t as me}from"./breadcrumbs-DGZMpIoQ.js";import{n as T,t as he}from"./action-menu-mlWlGE5P.js";var E=t(n(),1),D=le();function O({locales:e,onRenderLabel:t,variant:n=`buttons`,onSelect:r}){let i=(0,E.useCallback)((e,t)=>{t||r?.(e)},[r]);return e.length===0?null:n===`inline`?(0,D.jsxs)(`div`,{className:o(`language-switcher--component`,`flex items-center justify-center gap-2.5`),children:[(0,D.jsx)(ee,{className:`size-4 text-muted-foreground/70`,"aria-hidden":`true`}),(0,D.jsx)(`div`,{className:`flex items-center justify-center gap-2.5`,children:e.map((n,r)=>{let a=t?t(n):n.nativeLabel;return(0,D.jsxs)(E.Fragment,{children:[(0,D.jsx)(`button`,{type:`button`,onClick:()=>i(n.value,n.active),className:o(`text-xs transition-colors`,n.active?`text-primary font-medium`:`text-muted-foreground hover:text-foreground`),children:a}),r<e.length-1&&(0,D.jsx)(`span`,{"aria-hidden":`true`,className:`size-1 rounded-full bg-border`})]},n.value)})})]}):(0,D.jsx)(`div`,{className:`flex flex-wrap items-center justify-center gap-2`,children:e.map(e=>{let n=t?t(e):e.nativeLabel;return(0,D.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:e.active?`solid`:`ghost`,onClick:()=>i(e.value,e.active),className:o(`min-w-[4.5rem] justify-center transition-colors`,e.active?`font-semibold text-primary`:`text-muted-foreground`),children:n},e.value)})})}O.displayName=`LanguageSwitcher`;function k(e){if(e.length===0)return`/`;try{let t=typeof window<`u`?window.location.origin:`http://localhost`,n=new URL(e,t).pathname.replace(/\/+$/,``);return n.length>0?n:`/`}catch{let t=(e.split(`?`)[0]??e).replace(/\/+$/,``);return t.length>0?t:`/`}}function A({items:e,currentPath:t,activeClassName:n,itemClassName:r}){let a=k(t??(typeof window<`u`?window.location.pathname:``)),s=typeof n==`string`&&n.length>0?n:`bg-muted`,c=e.map(e=>({item:e,normalizedPath:k(e.href)})),l=c.filter(({normalizedPath:e})=>a===e||a.startsWith(`${e}/`)).sort((e,t)=>t.normalizedPath.length-e.normalizedPath.length)[0]?.normalizedPath??null;return(0,D.jsx)(`nav`,{className:o(`aside-navigation-menu--component`,`flex flex-col space-y-1 space-x-0`),children:c.map(({item:e,normalizedPath:t})=>(0,D.jsx)(i,{variant:`secondary`,buttonStyle:`ghost`,size:`sm`,fullWidth:!0,className:o(`justify-start`,r,t===l?s:null),nativeButton:!1,render:t=>(0,D.jsx)(`a`,{...t,href:e.href}),children:e.title},e.href))})}A.displayName=`AsideNavigationMenu`;function j({items:e,currentPath:t,className:n,ariaLabel:r=`Tab navigation`}){let i=t??(typeof window<`u`?window.location.pathname:``),a=(0,E.useMemo)(()=>e.map(e=>{let t=i===e.href,n=null;if(typeof e.icon==`string`)n=(0,D.jsx)(`span`,{className:`text-inherit`,children:e.icon});else if(e.icon){let t=e.icon;n=(0,D.jsx)(t,{className:`h-4 w-4`})}return{key:e.href,item:e,isActive:t,iconNode:n,ariaCurrent:t?`page`:void 0}}),[i,e]);return(0,D.jsx)(`div`,{className:o(`tab-navigation-menu--component`,`w-full`,n),children:(0,D.jsx)(`nav`,{className:`inline-flex bg-muted rounded-full items-center gap-1 p-1`,"aria-label":r,children:a.map(({key:e,item:t,isActive:n,iconNode:r,ariaCurrent:i})=>(0,D.jsxs)(`a`,{href:t.href,className:o(`whitespace-nowrap flex items-center gap-2`,`rounded-full px-4 py-2`,`text-sm font-medium`,`transition-all duration-200`,`focus-visible:outline-none focus-visible:ring-2`,`focus-visible:ring-ring focus-visible:ring-offset-2`,{"bg-background text-foreground shadow-sm":n,"text-muted-foreground hover:text-foreground hover:bg-background/50":!n}),"aria-current":i,children:[!!r&&(0,D.jsx)(`span`,{className:`text-inherit`,children:r}),t.title,!!t.badge&&(0,D.jsx)(`span`,{className:o(`ml-1.5 rounded-full px-2 py-0.5 text-xs font-medium`,n?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:t.badge})]},e))})})}j.displayName=`TabNavigationMenu`;var M={tabsAria:`Tabs`};function N({items:e,currentUrl:t,strings:n}){let r=ce(M,n),i=t??(typeof window<`u`?window.location.pathname:`/`),a=e=>{try{return new URL(e,window.location.origin).pathname.replace(/\/+$/,``)}catch{return e.replace(/\/+$/,``).split(`?`)[0]}},s=a(i);return(0,D.jsx)(`div`,{className:o(`navigation-tabs--component`,`navigation-tabs-container w-full my-5`),children:(0,D.jsx)(`nav`,{className:`inline-flex bg-muted rounded-4xl items-center gap-3 p-3`,"aria-label":r.tabsAria,children:e.map(e=>{let t=s===a(e.url);return(0,D.jsx)(`a`,{href:e.url,className:o(`whitespace-nowrap flex items-center gap-1 leading-tight rounded-full border border-transparent px-4 py-1.5 text-sm bg-background text-foreground hover:text-background hover:bg-primary transition-all duration-150`,{"!bg-primary !text-background font-semibold":t}),children:e.label},e.url)})})})}N.displayName=`NavigationTabs`;function P({eyebrow:e,title:t,description:n,badge:i,breadcrumbs:c,actions:l,children:u,className:d,withSeparator:f=!0}){return(0,D.jsxs)(`header`,{className:o(`page-header--component`,`w-full`,d),children:[!!c&&(0,D.jsx)(`div`,{className:`mb-3`,children:c}),(0,D.jsxs)(`div`,{className:`flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,children:[(0,D.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[!!e&&(0,D.jsx)(r,{size:`xxs`,type:`secondary`,weight:`semibold`,className:`mb-1 uppercase tracking-wider`,children:e}),(0,D.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,D.jsx)(a,{tag:`h2`,className:`text-2xl border-0 pb-0`,children:t}),!!i&&(0,D.jsx)(s,{variant:i.variant??`secondary`,children:i.label})]}),!!n&&(0,D.jsx)(r,{type:`secondary`,className:`mt-1 max-w-2xl`,children:n})]}),!!l&&(0,D.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:l})]}),!!u&&(0,D.jsx)(`div`,{className:`mt-4`,children:u}),!!f&&(0,D.jsx)(w,{className:`mt-4`})]})}P.displayName=`PageHeader`;function F({items:e,rootMargin:t=`-40% 0px -50% 0px`,className:n,onSelect:i}){let[a,s]=(0,E.useState)(e[0]?.id??null);return(0,E.useEffect)(()=>{let n=new IntersectionObserver(e=>{let t=e.find(e=>e.isIntersecting);t?.target.id&&s(t.target.id)},{rootMargin:t,threshold:0});return e.forEach(e=>{let t=document.getElementById(e.id);t&&n.observe(t)}),()=>n.disconnect()},[e,t]),(0,D.jsx)(`nav`,{className:o(`section-nav--component`,`flex flex-col gap-0.5`,n),"aria-label":`Section navigation`,children:e.map(e=>{let t=e.icon,n=a===e.id;return(0,D.jsxs)(`a`,{href:`#${e.id}`,onClick:t=>{t.preventDefault(),document.getElementById(e.id)?.scrollIntoView({behavior:`smooth`,block:`start`}),s(e.id),i?.(e.id)},className:o(`flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors`,n?`bg-primary/10 text-primary`:`text-muted-foreground hover:bg-muted/50 hover:text-foreground`),children:[!!t&&(0,D.jsx)(t,{className:`size-3.5 shrink-0`}),(0,D.jsx)(r,{tag:`span`,weight:n?`semibold`:`medium`,children:e.label})]},e.id)})})}F.displayName=`SectionNav`;function I(e){if(e.length===0)return`/`;try{let t=typeof window<`u`?window.location.origin:`http://localhost`,n=new URL(e,t).pathname.replace(/\/+$/,``);return n.length>0?n:`/`}catch{let t=(e.split(`?`)[0]??e).replace(/\/+$/,``);return t.length>0?t:`/`}}function L({groups:e,currentPath:t,className:n,itemClassName:i,activeItemClassName:a,ariaLabel:c=`Side navigation`}){let l=I(t??(typeof window<`u`?window.location.pathname:``)),u=(0,E.useMemo)(()=>e.flatMap(e=>e.items.map(t=>({groupId:e.id,normalizedPath:I(t.href)}))),[e]).filter(({normalizedPath:e})=>l===e||l.startsWith(`${e}/`)).sort((e,t)=>t.normalizedPath.length-e.normalizedPath.length)[0]?.normalizedPath??null,[d,f]=(0,E.useState)(()=>Object.fromEntries(e.map(e=>[e.id,!!e.defaultCollapsed]))),p=e=>f(t=>({...t,[e]:!t[e]})),h=a&&a.length>0?a:`bg-primary/5 text-primary`;return(0,D.jsx)(`nav`,{className:o(`side-nav--component`,`flex flex-col gap-4`,n),"aria-label":c,children:e.map(e=>{let t=e.collapsible!==!1&&d[e.id],n=!!e.label,a=!t;return(0,D.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[!!n&&(e.collapsible===!1?(0,D.jsx)(r,{tag:`div`,size:`xs`,type:`secondary`,weight:`medium`,className:`px-3 py-1.5 uppercase tracking-wider`,children:e.label}):(0,D.jsxs)(`button`,{type:`button`,onClick:()=>p(e.id),className:o(`flex w-full items-center justify-between px-3 py-1.5 rounded-md`,`text-xs font-medium uppercase tracking-wider text-muted-foreground`,`hover:text-foreground transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),"aria-expanded":!t,children:[(0,D.jsx)(`span`,{children:e.label}),(0,D.jsx)(m,{className:o(`size-3.5 transition-transform`,t&&`-rotate-90`),"aria-hidden":`true`})]})),!!a&&(0,D.jsx)(`div`,{className:`flex flex-col gap-0.5`,children:e.items.map(e=>{let t=e.icon,n=I(e.href)===u;return(0,D.jsxs)(`a`,{href:e.disabled?void 0:e.href,"aria-current":n?`page`:void 0,"aria-disabled":e.disabled||void 0,className:o(`group flex items-center gap-2.5 rounded-md px-3 py-1.5`,`text-sm transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,`hover:bg-muted/60`,e.disabled&&`pointer-events-none opacity-50`,n&&h,i),children:[!!t&&(0,D.jsx)(t,{className:o(`size-4 shrink-0`,n?`text-primary`:`text-muted-foreground`)}),(0,D.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.label}),!!e.badge&&(0,D.jsx)(s,{variant:n?`primary`:`secondary`,className:`shrink-0`,children:e.badge})]},e.href)})})]},e.id)})})}L.displayName=`SideNav`;var R=`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`;function z({items:e,value:t,onChange:n,className:r,tabClassName:i,activeTabClassName:a,moreLabel:s=`More`,ariaLabel:c=`Tab navigation`}){let l=(0,E.useRef)(null),u=(0,E.useRef)(null),[d,f]=(0,E.useState)(e.length);(0,E.useLayoutEffect)(()=>{if(!l.current||!u.current)return;let e=l.current,t=u.current,n=()=>{let n=e.clientWidth,r=Array.from(t.querySelectorAll(`[data-tab-id]`)),i=0,a=0;for(let e of r){let t=e.offsetWidth+4;if(i+t+72<=n)i+=t,a+=1;else break}f(a===r.length?a:Math.max(1,a))};n();let r=new ResizeObserver(n);return r.observe(e),()=>r.disconnect()},[e]);let p=(0,E.useMemo)(()=>{if(!t)return e;let n=e.findIndex(e=>e.id===t);if(n<0||n<d)return e;let r=[...e],i=Math.max(0,d-1);return[r[n],r[i]]=[r[i],r[n]],r},[e,t,d]),m=p.slice(0,d),h=p.slice(d),g=e=>{n?.(e.id),e.onClick?.()},v=(e,t)=>{let n=e.icon,r=o(R,t?o(`bg-card text-foreground shadow-sm`,a):`text-muted-foreground hover:bg-muted/60`,i),s=(0,D.jsxs)(D.Fragment,{children:[!!n&&(0,D.jsx)(n,{className:`size-3.5`}),(0,D.jsx)(`span`,{children:e.label}),!!e.badge&&(0,D.jsx)(`span`,{className:o(`ml-1 inline-flex items-center rounded-full px-1.5 py-0.5 text-xxs font-semibold`,t?`bg-primary/10 text-primary`:`bg-muted-foreground/10 text-muted-foreground`),children:e.badge})]});return e.href?(0,D.jsx)(`a`,{href:e.href,"data-tab-id":e.id,"aria-current":t?`page`:void 0,onClick:()=>g(e),className:o(`overflow-tab-bar--component`,r),children:s},e.id):(0,D.jsx)(`button`,{type:`button`,"data-tab-id":e.id,"aria-pressed":t,onClick:()=>g(e),className:r,children:s},e.id)};return(0,D.jsxs)(D.Fragment,{children:[(0,D.jsx)(`div`,{ref:u,"aria-hidden":`true`,className:`absolute -top-[9999px] left-0 inline-flex items-center gap-1 invisible`,children:e.map(e=>v(e,!1))}),(0,D.jsxs)(`div`,{ref:l,role:`tablist`,"aria-label":c,className:o(`relative inline-flex items-center gap-1 rounded-lg bg-muted/40 p-1`,r),children:[m.map(e=>v(e,e.id===t)),h.length>0&&(0,D.jsxs)(pe,{children:[(0,D.jsxs)(de,{type:`button`,"aria-label":s,className:o(R,`text-muted-foreground hover:bg-muted/60`),children:[(0,D.jsx)(_,{className:`size-3.5`}),(0,D.jsx)(`span`,{children:s})]}),(0,D.jsx)(fe,{align:`end`,className:`min-w-[160px]`,children:h.map(e=>{let n=e.icon;return(0,D.jsxs)(ue,{onClick:()=>g(e),className:o(`text-xs gap-1.5 px-2 py-1.5`,e.id===t&&`bg-primary/5 text-primary`),children:[!!n&&(0,D.jsx)(n,{className:`size-3.5`}),(0,D.jsx)(`span`,{children:e.label})]},e.id)})})]})]})]})}z.displayName=`OverflowTabBar`;var ge=e({ActionMenuExample:()=>U,AsideNavigationMenuExample:()=>K,BreadcrumbsSizes:()=>H,LanguageSwitcherButtons:()=>W,LanguageSwitcherInline:()=>G,NavigationTabsRound:()=>J,OverflowTabBarResponsiveWithMoreMenu:()=>X,PageHeaderExample:()=>B,SectionNavSticky:()=>V,SideNavCollapsibleGroups:()=>Y,TabNavigationMenuExample:()=>q});function B(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(P,{eyebrow:`Settings`,title:`Team & Permissions`,description:`Invite teammates, set roles, and audit recent activity.`,badge:{label:`Beta`,variant:`info`},actions:(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(u,{icon:re,children:`Invite`})})})})}function V(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsxs)(`div`,{className:`grid gap-6 md:grid-cols-[200px_1fr]`,children:[(0,D.jsx)(`aside`,{className:`md:sticky md:top-24 md:self-start`,children:(0,D.jsx)(F,{items:[{id:`nav-overview`,label:`Overview`,icon:b},{id:`nav-orders`,label:`Orders`,icon:y},{id:`nav-team`,label:`Team`,icon:S},{id:`nav-preferences`,label:`Preferences`,icon:x}]})}),(0,D.jsxs)(`div`,{className:`space-y-6`,children:[(0,D.jsxs)(`section`,{id:`nav-overview`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,D.jsx)(`strong`,{children:`Overview`}),` — section anchor target.`]}),(0,D.jsxs)(`section`,{id:`nav-orders`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,D.jsx)(`strong`,{children:`Orders`}),` — section anchor target.`]}),(0,D.jsxs)(`section`,{id:`nav-team`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,D.jsx)(`strong`,{children:`Team`}),` — section anchor target.`]}),(0,D.jsxs)(`section`,{id:`nav-preferences`,className:`rounded-md border border-border p-4 min-h-[140px]`,children:[(0,D.jsx)(`strong`,{children:`Preferences`}),` — section anchor target.`]})]})]})})}function H(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(`div`,{className:`space-y-2`,children:[`xs`,`sm`,`md`].map(e=>(0,D.jsx)(me,{size:e,breadcrumbs:[{label:`Dashboard`,href:`#/`},{label:`Orders`,href:`#/orders`},{label:`INV-2026-0392`}]},e))})})}function U(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsxs)(he,{align:`end`,children:[(0,D.jsx)(T,{icon:ae,label:`Edit`,onClick:()=>{}}),(0,D.jsx)(T,{icon:_,label:`Duplicate`,onClick:()=>{}}),(0,D.jsx)(T,{icon:se,label:`Delete`,variant:`error`,onClick:()=>{}})]})})}function W(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(O,{locales:[{value:`en`,label:`English`,nativeLabel:`English`,active:!0},{value:`bg`,label:`USAn`,nativeLabel:`Български`,active:!1}],onSelect:()=>{}})})}function G(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(O,{variant:`inline`,locales:[{value:`en`,label:`English`,nativeLabel:`EN`,active:!0},{value:`bg`,label:`USAn`,nativeLabel:`БГ`,active:!1},{value:`de`,label:`German`,nativeLabel:`DE`,active:!1}],onSelect:()=>{}})})}function K(){let[e]=(0,E.useState)(`/dashboard/orders`);return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(`div`,{className:`max-w-xs rounded-md border border-border bg-card p-2`,children:(0,D.jsx)(A,{currentPath:e,items:[{title:`Home`,href:`#/`,icon:b},{title:`Orders`,href:`#/dashboard/orders`,icon:y},{title:`Customers`,href:`#/customers`,icon:S},{title:`Settings`,href:`#/settings`,icon:x}]})})})}function q(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(j,{currentPath:`#/orders`,items:[{title:`Overview`,href:`#/overview`},{title:`Orders`,href:`#/orders`,badge:`12`},{title:`Invoices`,href:`#/invoices`}]})})}function J(){return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(N,{currentUrl:`#/orders`,items:[{url:`#/overview`,label:`Overview`,active:!1},{url:`#/orders`,label:`Orders`,active:!0},{url:`#/invoices`,label:`Invoices`,active:!1}]})})}function Y(){let[e]=(0,E.useState)(`/dashboard/orders`);return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(`div`,{className:`max-w-xs rounded-md border border-border bg-card p-3`,children:(0,D.jsx)(L,{currentPath:e,groups:[{id:`main`,label:`Main`,items:[{label:`Inbox`,href:`#/inbox`,icon:te,badge:`12`},{label:`Orders`,href:`#/dashboard/orders`,icon:y,badge:`3`},{label:`Customers`,href:`#/customers`,icon:S},{label:`Reviews`,href:`#/reviews`,icon:oe}]},{id:`admin`,label:`Admin`,items:[{label:`Permissions`,href:`#/admin/permissions`,icon:ie},{label:`Reports`,href:`#/admin/reports`,icon:p},{label:`Settings`,href:`#/admin/settings`,icon:x,disabled:!0}]}]})})})}function X(){let[e,t]=(0,E.useState)(`overview`);return(0,D.jsx)(D.Fragment,{children:(0,D.jsx)(z,{value:e,onChange:t,items:[{id:`overview`,label:`Overview`,icon:b},{id:`orders`,label:`Orders`,icon:y,badge:`12`},{id:`invoices`,label:`Invoices`,icon:v},{id:`customers`,label:`Customers`,icon:S},{id:`messages`,label:`Messages`,icon:ne,badge:`4`},{id:`alerts`,label:`Alerts`,icon:f},{id:`billing`,label:`Billing`,icon:h},{id:`data`,label:`Data`,icon:g}]})})}var Z=`import { useState } from 'react';
+import {
+	Home, FolderOpen, Settings, Users, Edit, Trash2, MoreHorizontal, Plus,
+	Inbox, Star, Shield, BarChart3, MessageSquare, Bell, CreditCard, Database, FileText,
+} from 'lucide-react';
+import { Breadcrumbs } from '@/components/base/navigation/breadcrumbs';
+import { ActionMenu, MenuAction } from '@/components/base/navigation/action-menu';
+import { LanguageSwitcher } from '@/components/base/navigation/language-switcher';
+import AsideNavigationMenu from '@/components/base/navigation/aside-navigation-menu';
+import TabNavigationMenu from '@/components/base/navigation/tab-navigation-menu';
+import NavigationTabs from '@/components/base/navigation/navigation-tabs';
+import { PageHeader } from '@/components/base/navigation/page-header';
+import { SectionNav } from '@/components/base/navigation/section-nav';
+import { SideNav } from '@/components/base/navigation/side-nav';
+import { OverflowTabBar } from '@/components/base/navigation/overflow-tab-bar';
+import { Button } from '@/components/base/buttons';
+
+export function PageHeaderExample() {
+	return (
+		<>
+			<PageHeader
+								eyebrow="Settings"
+								title="Team & Permissions"
+								description="Invite teammates, set roles, and audit recent activity."
+								badge={{ label: 'Beta', variant: 'info' }}
+								actions={(
+									<>
+										<Button icon={Plus}>Invite</Button>
+									</>
+								)}
+							/>
+		</>
+	);
+}
+
+export function SectionNavSticky() {
+	return (
+		<>
+			<div className="grid gap-6 md:grid-cols-[200px_1fr]">
+								<aside className="md:sticky md:top-24 md:self-start">
+									<SectionNav
+										items={[
+											{ id: 'nav-overview', label: 'Overview', icon: Home },
+											{ id: 'nav-orders', label: 'Orders', icon: FolderOpen },
+											{ id: 'nav-team', label: 'Team', icon: Users },
+											{ id: 'nav-preferences', label: 'Preferences', icon: Settings },
+										]}
+									/>
+								</aside>
+								<div className="space-y-6">
+									<section id="nav-overview" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Overview</strong> — section anchor target.</section>
+									<section id="nav-orders" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Orders</strong> — section anchor target.</section>
+									<section id="nav-team" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Team</strong> — section anchor target.</section>
+									<section id="nav-preferences" className="rounded-md border border-border p-4 min-h-[140px]"><strong>Preferences</strong> — section anchor target.</section>
+								</div>
+							</div>
+		</>
+	);
+}
+
+export function BreadcrumbsSizes() {
+	return (
+		<>
+			<div className="space-y-2">
+								{(['xs', 'sm', 'md'] as const).map((s) => (
+									<Breadcrumbs
+										key={s}
+										size={s}
+										breadcrumbs={[
+											{ label: 'Dashboard', href: '#/' },
+											{ label: 'Orders', href: '#/orders' },
+											{ label: 'INV-2026-0392' },
+										]}
+									/>
+								))}
+							</div>
+		</>
+	);
+}
+
+export function ActionMenuExample() {
+	return (
+		<>
+			<ActionMenu align="end">
+								<MenuAction icon={Edit} label="Edit" onClick={() => {}} />
+								<MenuAction icon={MoreHorizontal} label="Duplicate" onClick={() => {}} />
+								<MenuAction icon={Trash2} label="Delete" variant="error" onClick={() => {}} />
+							</ActionMenu>
+		</>
+	);
+}
+
+export function LanguageSwitcherButtons() {
+	return (
+		<>
+			<LanguageSwitcher
+								locales={[
+									{ value: 'en', label: 'English', nativeLabel: 'English', active: true },
+									{ value: 'bg', label: 'USAn', nativeLabel: 'Български', active: false },
+								]}
+								onSelect={() => {}}
+							/>
+		</>
+	);
+}
+
+export function LanguageSwitcherInline() {
+	return (
+		<>
+			<LanguageSwitcher
+								variant="inline"
+								locales={[
+									{ value: 'en', label: 'English', nativeLabel: 'EN', active: true },
+									{ value: 'bg', label: 'USAn', nativeLabel: 'БГ', active: false },
+									{ value: 'de', label: 'German', nativeLabel: 'DE', active: false },
+								]}
+								onSelect={() => {}}
+							/>
+		</>
+	);
+}
+
+export function AsideNavigationMenuExample() {
+	const [path] = useState('/dashboard/orders');
+	return (
+		<>
+			<div className="max-w-xs rounded-md border border-border bg-card p-2">
+								<AsideNavigationMenu
+									currentPath={path}
+									items={[
+										{ title: 'Home', href: '#/', icon: Home },
+										{ title: 'Orders', href: '#/dashboard/orders', icon: FolderOpen },
+										{ title: 'Customers', href: '#/customers', icon: Users },
+										{ title: 'Settings', href: '#/settings', icon: Settings },
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function TabNavigationMenuExample() {
+	return (
+		<>
+			<TabNavigationMenu
+								currentPath="#/orders"
+								items={[
+									{ title: 'Overview', href: '#/overview' },
+									{ title: 'Orders', href: '#/orders', badge: '12' },
+									{ title: 'Invoices', href: '#/invoices' },
+								]}
+							/>
+		</>
+	);
+}
+
+export function NavigationTabsRound() {
+	return (
+		<>
+			<NavigationTabs
+								currentUrl="#/orders"
+								items={[
+									{ url: '#/overview', label: 'Overview', active: false },
+									{ url: '#/orders', label: 'Orders', active: true },
+									{ url: '#/invoices', label: 'Invoices', active: false },
+								]}
+							/>
+		</>
+	);
+}
+
+export function SideNavCollapsibleGroups() {
+	const [path] = useState('/dashboard/orders');
+	return (
+		<>
+			<div className="max-w-xs rounded-md border border-border bg-card p-3">
+								<SideNav
+									currentPath={path}
+									groups={[
+										{
+											id: 'main',
+											label: 'Main',
+											items: [
+												{ label: 'Inbox', href: '#/inbox', icon: Inbox, badge: '12' },
+												{ label: 'Orders', href: '#/dashboard/orders', icon: FolderOpen, badge: '3' },
+												{ label: 'Customers', href: '#/customers', icon: Users },
+												{ label: 'Reviews', href: '#/reviews', icon: Star },
+											],
+										},
+										{
+											id: 'admin',
+											label: 'Admin',
+											items: [
+												{ label: 'Permissions', href: '#/admin/permissions', icon: Shield },
+												{ label: 'Reports', href: '#/admin/reports', icon: BarChart3 },
+												{ label: 'Settings', href: '#/admin/settings', icon: Settings, disabled: true },
+											],
+										},
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function OverflowTabBarResponsiveWithMoreMenu() {
+	const [tab, setTab] = useState('overview');
+	return (
+		<>
+			<OverflowTabBar
+								value={tab}
+								onChange={setTab}
+								items={[
+									{ id: 'overview', label: 'Overview', icon: Home },
+									{ id: 'orders', label: 'Orders', icon: FolderOpen, badge: '12' },
+									{ id: 'invoices', label: 'Invoices', icon: FileText },
+									{ id: 'customers', label: 'Customers', icon: Users },
+									{ id: 'messages', label: 'Messages', icon: MessageSquare, badge: '4' },
+									{ id: 'alerts', label: 'Alerts', icon: Bell },
+									{ id: 'billing', label: 'Billing', icon: CreditCard },
+									{ id: 'data', label: 'Data', icon: Database },
+								]}
+							/>
+		</>
+	);
+}
+`;function Q(e){let t={code:`code`,p:`p`,...e.components};return ge||$(`Examples`,!1),U||$(`Examples.ActionMenuExample`,!0),K||$(`Examples.AsideNavigationMenuExample`,!0),H||$(`Examples.BreadcrumbsSizes`,!0),W||$(`Examples.LanguageSwitcherButtons`,!0),G||$(`Examples.LanguageSwitcherInline`,!0),J||$(`Examples.NavigationTabsRound`,!0),X||$(`Examples.OverflowTabBarResponsiveWithMoreMenu`,!0),B||$(`Examples.PageHeaderExample`,!0),V||$(`Examples.SectionNavSticky`,!0),Y||$(`Examples.SideNavCollapsibleGroups`,!0),q||$(`Examples.TabNavigationMenuExample`,!0),(0,D.jsxs)(c,{title:`Navigation`,description:`The navigation primitives — PageHeader, Breadcrumbs, ActionMenu, LanguageSwitcher, SectionNav, SideNav, AsideNavigationMenu, TabNavigationMenu, NavigationTabs, OverflowTabBar.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/navigation`,children:[(0,D.jsx)(l,{title:`Overview`,id:`overview`,children:(0,D.jsxs)(t.p,{children:[`The `,(0,D.jsx)(t.code,{children:`navigation/`}),` folder bundles every cross-cutting nav surface — page
+headers, breadcrumb trails, side rails, tab bars, action menus, and the
+language switcher. All components are framework-agnostic — pass `,(0,D.jsx)(t.code,{children:`href`}),`s and
+let the consumer wire routing.`]})}),(0,D.jsx)(l,{title:`Page header`,id:`page-header`,children:(0,D.jsx)(d,{name:`PageHeaderExample`,source:Z,children:(0,D.jsx)(B,{})})}),(0,D.jsx)(l,{title:`Breadcrumbs`,id:`breadcrumbs`,children:(0,D.jsx)(d,{name:`BreadcrumbsSizes`,source:Z,children:(0,D.jsx)(H,{})})}),(0,D.jsxs)(l,{title:`Tabs`,id:`tabs`,children:[(0,D.jsx)(d,{name:`TabNavigationMenuExample`,source:Z,children:(0,D.jsx)(q,{})}),(0,D.jsx)(d,{name:`NavigationTabsRound`,source:Z,children:(0,D.jsx)(J,{})}),(0,D.jsx)(d,{name:`OverflowTabBarResponsiveWithMoreMenu`,source:Z,children:(0,D.jsx)(X,{})})]}),(0,D.jsxs)(l,{title:`Side nav & section nav`,id:`side-nav`,children:[(0,D.jsx)(d,{name:`AsideNavigationMenuExample`,source:Z,children:(0,D.jsx)(K,{})}),(0,D.jsx)(d,{name:`SideNavCollapsibleGroups`,source:Z,children:(0,D.jsx)(Y,{})}),(0,D.jsx)(d,{name:`SectionNavSticky`,source:Z,children:(0,D.jsx)(V,{})})]}),(0,D.jsx)(l,{title:`Action menu`,id:`action-menu`,children:(0,D.jsx)(d,{name:`ActionMenuExample`,source:Z,children:(0,D.jsx)(U,{})})}),(0,D.jsxs)(l,{title:`Language switcher`,id:`language-switcher`,children:[(0,D.jsx)(d,{name:`LanguageSwitcherButtons`,source:Z,children:(0,D.jsx)(W,{})}),(0,D.jsx)(d,{name:`LanguageSwitcherInline`,source:Z,children:(0,D.jsx)(G,{})})]}),(0,D.jsxs)(l,{title:`API`,id:`api`,children:[(0,D.jsx)(C,{component:`PageHeader`}),(0,D.jsx)(C,{component:`Breadcrumbs`}),(0,D.jsx)(C,{component:`ActionMenu`}),(0,D.jsx)(C,{component:`SectionNav`}),(0,D.jsx)(C,{component:`SideNav`}),(0,D.jsx)(C,{component:`OverflowTabBar`}),(0,D.jsx)(C,{component:`LanguageSwitcher`})]})]})}function _e(e={}){let{wrapper:t}=e.components||{};return t?(0,D.jsx)(t,{...e,children:(0,D.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{_e as default};

package/dist/showcase/assets/navigation-extras-BPDoAdXF.js

@@ -0,0 +1,43 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Ar as r,Cr as i,Tr as a,gr as o,hr as s,mr as c,t as l}from"./example-C6-_Sy6B.js";import{t as u}from"./chevron-right-CDDMIkYP.js";import{t as d}from"./heart-DjKkkUsX.js";import{t as f}from"./inbox-ZxSy1pgX.js";import{t as p}from"./shopping-bag-EDVpxI9n.js";import{t as m}from"./sparkles-BEa1AgNq.js";import{t as h}from"./users-DzgXeZbf.js";import{D as g,a as _}from"./index-B8DVXCmf.js";import{t as v}from"./props-table-CM_1cocj.js";import{t as y}from"./smart-card-7szg_qSt.js";import{c as b,i as x,n as S,o as C,r as w,t as T,u as E}from"./item-CMRbW6s-.js";var D={stepLabel:`Step`,ofLabel:`of`},O=_();function k({steps:e,currentIndex:t,onStepClick:n,className:o,strings:s}){let c=g(D,s);return(0,O.jsxs)(`div`,{className:a(`breadcrumb-progress--component`,`w-full`,o),children:[(0,O.jsxs)(`div`,{className:`flex items-center justify-between mb-2`,children:[(0,O.jsxs)(i,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:[c.stepLabel,` `,t+1,` `,c.ofLabel,` `,e.length]}),(0,O.jsxs)(i,{tag:`span`,size:`xs`,weight:`semibold`,className:`tabular-nums`,children:[Math.round((t+1)/e.length*100),`%`]})]}),(0,O.jsx)(`ol`,{className:`flex items-center gap-2`,children:e.map((o,s)=>{let c=s<t,l=s===t,u=n&&(c||l);return(0,O.jsxs)(`li`,{className:`flex flex-1 items-center gap-2`,children:[(0,O.jsxs)(`button`,{type:`button`,onClick:()=>u&&n?.(o.id,s),disabled:!u,className:a(`flex items-center gap-2 rounded-md px-2 py-1 text-left transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1`,u&&`hover:bg-muted/40`,!u&&`cursor-default`),children:[(0,O.jsx)(`span`,{className:a(`flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums`,c&&`bg-success text-success-foreground`,l&&`bg-primary text-primary-foreground ring-4 ring-primary/15`,!c&&!l&&`bg-muted text-muted-foreground`),children:c?(0,O.jsx)(r,{className:`size-3.5`}):s+1}),(0,O.jsxs)(`div`,{className:`hidden sm:block min-w-0`,children:[(0,O.jsx)(i,{size:`xs`,weight:`semibold`,className:a(!l&&!c&&`text-muted-foreground`),children:o.label}),!!o.hint&&(0,O.jsx)(i,{size:`xxs`,type:`discrete`,className:`truncate`,children:o.hint})]})]}),s<e.length-1&&(0,O.jsx)(`div`,{className:a(`h-px flex-1`,c?`bg-success`:`bg-border`)})]},o.id)})})]})}k.displayName=`BreadcrumbProgress`;function A({title:e,items:t,activeId:n,onSelect:r,className:i}){return(0,O.jsx)(y,{title:e,padding:`sm`,className:a(`category-nav--component`,i),children:(0,O.jsx)(C,{children:t.map(e=>{let t=e.icon,i=e.id===n;return(0,O.jsxs)(T,{size:`xs`,onClick:()=>r?.(e.id),"data-state":i?`active`:`inactive`,className:a(`cursor-pointer transition-colors`,i?`bg-primary/10 text-primary`:`hover:bg-muted/50`),children:[!!t&&(0,O.jsx)(b,{variant:`icon`,className:a(i?`text-primary`:`text-muted-foreground`),children:(0,O.jsx)(t,{})}),(0,O.jsxs)(w,{children:[(0,O.jsx)(E,{bold:i,children:e.label}),!!e.hint&&(0,O.jsx)(x,{clamp:1,children:e.hint})]}),(0,O.jsxs)(S,{children:[typeof e.count==`number`&&(0,O.jsx)(o,{variant:i?`primary`:`secondary`,className:`tabular-nums`,children:e.count}),(0,O.jsx)(u,{className:a(`size-4 shrink-0 text-muted-foreground/60`,i&&`text-primary`)})]})]},e.id)})})})}A.displayName=`CategoryNavCard`;var j=e({BreadcrumbProgressExample:()=>N,CategoryNavCardExample:()=>P}),M=t(n(),1);function N(){let[e,t]=(0,M.useState)(2);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(k,{steps:[{id:`cart`,label:`Cart`,hint:`Review items`},{id:`shipping`,label:`Shipping`,hint:`Address`},{id:`payment`,label:`Payment`,hint:`Card / wallet`},{id:`review`,label:`Review`,hint:`Confirm order`},{id:`done`,label:`Done`,hint:`Receipt`}],currentIndex:e,onStepClick:(e,n)=>t(n)})})}function P(){let[e,t]=(0,M.useState)(`orders`);return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(A,{title:`Inbox`,activeId:e,onSelect:t,items:[{id:`all`,label:`All`,icon:f,count:142},{id:`orders`,label:`Orders`,icon:p,count:24,hint:`Pending review`},{id:`reviews`,label:`Reviews`,icon:d,count:8},{id:`team`,label:`Team`,icon:h,count:3},{id:`ai`,label:`AI suggestions`,icon:m,hint:`Auto-generated`}]})})}var F=`import { useState } from 'react';
+import { Inbox, Heart, ShoppingBag, Sparkles, Users } from 'lucide-react';
+import { BreadcrumbProgress, CategoryNavCard } from '@/components/composed/navigation';
+
+export function BreadcrumbProgressExample() {
+	const [step, setStep] = useState(2);
+	return (
+		<>
+			<BreadcrumbProgress
+								steps={[
+									{ id: 'cart', label: 'Cart', hint: 'Review items' },
+									{ id: 'shipping', label: 'Shipping', hint: 'Address' },
+									{ id: 'payment', label: 'Payment', hint: 'Card / wallet' },
+									{ id: 'review', label: 'Review', hint: 'Confirm order' },
+									{ id: 'done', label: 'Done', hint: 'Receipt' },
+								]}
+								currentIndex={step}
+								onStepClick={(_, idx) => setStep(idx)}
+							/>
+		</>
+	);
+}
+
+export function CategoryNavCardExample() {
+	const [activeCategory, setActiveCategory] = useState('orders');
+	return (
+		<>
+			<CategoryNavCard
+								title="Inbox"
+								activeId={activeCategory}
+								onSelect={setActiveCategory}
+								items={[
+									{ id: 'all', label: 'All', icon: Inbox, count: 142 },
+									{ id: 'orders', label: 'Orders', icon: ShoppingBag, count: 24, hint: 'Pending review' },
+									{ id: 'reviews', label: 'Reviews', icon: Heart, count: 8 },
+									{ id: 'team', label: 'Team', icon: Users, count: 3 },
+									{ id: 'ai', label: 'AI suggestions', icon: Sparkles, hint: 'Auto-generated' },
+								]}
+							/>
+		</>
+	);
+}
+`;function I(e){let t={h4:`h4`,...e.components};return j||R(`Examples`,!1),N||R(`Examples.BreadcrumbProgressExample`,!0),P||R(`Examples.CategoryNavCardExample`,!0),(0,O.jsxs)(s,{title:`Composed · Navigation (extras)`,description:`BreadcrumbProgress wizard + CategoryNavCard sidebar.`,layer:`composed`,status:`ready`,children:[(0,O.jsxs)(c,{title:`Examples`,id:`examples`,children:[(0,O.jsx)(l,{name:`BreadcrumbProgressExample`,source:F,children:(0,O.jsx)(N,{})}),(0,O.jsx)(l,{name:`CategoryNavCardExample`,source:F,children:(0,O.jsx)(P,{})})]}),(0,O.jsxs)(c,{title:`API`,id:`api`,children:[(0,O.jsx)(t.h4,{children:`BreadcrumbProgress`}),(0,O.jsx)(v,{component:`BreadcrumbProgress`}),(0,O.jsx)(t.h4,{children:`CategoryNavCard`}),(0,O.jsx)(v,{component:`CategoryNavCard`})]})]})}function L(e={}){let{wrapper:t}=e.components||{};return t?(0,O.jsx)(t,{...e,children:(0,O.jsx)(I,{...e})}):I(e)}function R(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{L as default};