admin-ui-starter-kit 0.1.0

package/dist/showcase/assets/textarea-D1kG3a9B.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-CilyBKbf.js";import{gr as t,kr as n,vr as r,xr as i}from"./example-DPfw-R7_.js";import{t as a}from"./circle-x-CMzwDsaf.js";import{D as o,a as s,k as c}from"./index-B-Z7p0So.js";import{a as l,i as u,r as d}from"./form-sizing-CfbZF8Ja.js";var f=e(c(),1),p=s(),m={clear:`Clear textarea`},h=f.forwardRef(({className:e,maxLength:s,showCharacterCount:c,clearable:h,onClear:g,isLoading:_,invalid:v,size:y,autoResize:b=!1,minRows:x=2,maxRows:S,onChange:C,value:w,defaultValue:T,id:E,strings:D,...O},k)=>{let A=(0,f.useRef)(null),j=o(m,D),{defaultControlSize:M}=n(),N=u(y,M),{id:P,value:F,isReactHookForm:I,characterCount:L,hasCharacterLimit:R,showCount:z,hasValue:B,updateValue:V,clearValue:H,wouldExceedLimit:U}=l({controlledValue:w,defaultValue:T,maxLength:s,showCharacterCount:c,providedId:E,idPrefix:`textarea`,hasOnChange:C!==void 0}),W=!!v,G=(0,f.useRef)(0),K=(0,f.useCallback)(()=>{if(!b||!A.current)return;let e=A.current;G.current===0&&(G.current=parseInt(getComputedStyle(e).lineHeight)||20),e.style.height=`auto`;let t=G.current,n=t*x,r=S?t*S:1/0,i=Math.min(Math.max(e.scrollHeight,n),r);e.style.height=`${i}px`},[b,S,x]);(0,f.useEffect)(()=>{K()},[F,b,K]);let q=(0,f.useCallback)(e=>{let t=e.target.value;U(t)||(V(t),C?.(e),b&&setTimeout(K,0))},[C,V,U,b,K]),J=(0,f.useCallback)(()=>{H(),C?.({target:{value:``},currentTarget:{value:``}}),g?.(),A.current?.focus(),b&&setTimeout(K,0)},[H,C,g,b,K]),Y=h&&B&&!_;return(0,p.jsxs)(`div`,{className:r(`textarea--component`,`relative w-full`),children:[(0,p.jsx)(`textarea`,{ref:e=>{typeof k==`function`?k(e):k&&(k.current=e),A.current=e},id:P,...!I&&{value:F},onChange:q,maxLength:s,"aria-invalid":W||void 0,disabled:O.disabled||_,rows:x,style:{resize:b?`none`:O.style?.resize,overflow:b&&S?`auto`:`visible`,...O.style},className:r(`placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground`,`border-input flex w-full rounded-md border bg-transparent px-3 py-2`,`transition-[color,box-shadow] outline-none`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,d[N],`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`,Y&&`pr-10`,z&&`pr-16`,e),...O}),!!z&&(0,p.jsx)(`div`,{className:r(`pointer-events-none absolute top-2 right-3 text-xs tabular-nums`,O.disabled&&`opacity-50`,W?`text-destructive`:`text-muted-foreground`),"aria-live":`polite`,role:`status`,children:(0,p.jsxs)(t,{tag:`span`,size:`xs`,type:W?`error`:`secondary`,children:[L,R?`/${s}`:``]})}),!!_&&!z&&(0,p.jsx)(`div`,{className:r(`pointer-events-none absolute top-2 right-3`,W?`text-destructive`:`text-muted-foreground/80`),children:(0,p.jsx)(i,{size:16,className:`animate-spin`,"aria-hidden":`true`})}),!!Y&&!z&&(0,p.jsx)(`button`,{type:`button`,className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":j.clear,onClick:J,disabled:_,children:(0,p.jsx)(a,{size:14,"aria-hidden":`true`})})]})});h.displayName=`Textarea`;export{h as t};

package/dist/showcase/assets/timelines-DF3tNgyG.js

@@ -0,0 +1,186 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{Cr as t,br as n,cr as r,gr as i,lr as a,sr as o,t as s,vr as c,xr as ee}from"./example-DPfw-R7_.js";import{n as l,t as te}from"./flag-hAuZbHU1.js";import{t as ne}from"./circle-check-big-BXxHUhuc.js";import{t as u}from"./circle-C0Yd1DDS.js";import{t as re}from"./clock-ynCzs_rR.js";import{t as d}from"./credit-card--5vg7bQy.js";import{t as f}from"./file-text-DokBif5V.js";import{t as ie}from"./heart-DfZtXfIP.js";import{t as ae}from"./mail-DmOBTX4I.js";import{t as oe}from"./minus-D-jmUi0G.js";import{t as se}from"./plus-BDSCn8ol.js";import{t as ce}from"./receipt-D3ilhl9U.js";import{t as p}from"./shopping-bag-Cd09Ga6D.js";import{t as m}from"./wrench-Duh91tnW.js";import{t as h}from"./x-t42iKYpL.js";import{D as g,a as le,r as ue}from"./index-B-Z7p0So.js";import{t as _}from"./props-table-BzUnIcv-.js";import{t as v}from"./smart-card-50WN9sCI.js";var y=ue(`git-commit-horizontal`,[[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}],[`line`,{x1:`3`,x2:`9`,y1:`12`,y2:`12`,key:`1dyftd`}],[`line`,{x1:`15`,x2:`21`,y1:`12`,y2:`12`,key:`oup4p8`}]]),b=le(),x={completed:{dot:`bg-success text-success-foreground`,line:`bg-success`,title:`text-foreground`,Icon:t},current:{dot:`bg-primary text-white ring-4 ring-primary/20`,line:`bg-border`,title:`text-foreground`,Icon:ee},upcoming:{dot:`bg-muted text-muted-foreground`,line:`bg-border`,title:`text-muted-foreground`,Icon:u}};function de({status:e}){let{dot:t,Icon:n}=x[e],r=e===`current`;return(0,b.jsx)(`div`,{className:c(`steps-card--component`,`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-all`,t),children:(0,b.jsx)(n,{className:c(`h-4 w-4`,r&&`animate-spin`)})})}function S({title:e,description:t,steps:n,footerText:r,className:o}){return(0,b.jsx)(v,{title:e,description:t,footerText:r,className:o,children:(0,b.jsx)(`div`,{className:`relative`,children:n.map((e,t)=>{let r=t===n.length-1,{line:o,title:s}=x[e.status];return(0,b.jsxs)(`div`,{className:`relative flex gap-4`,children:[(0,b.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,b.jsx)(de,{status:e.status}),!r&&(0,b.jsx)(`div`,{className:c(`w-0.5 flex-1 min-h-6`,o)})]}),(0,b.jsxs)(`div`,{className:c(`flex-1 pb-6`,r&&`pb-0`),children:[(0,b.jsxs)(`div`,{className:`flex items-center gap-2 pt-1`,children:[(0,b.jsx)(i,{weight:`semibold`,className:s,children:e.title}),!!e.badge&&(0,b.jsx)(a,{variant:e.badgeVariant??`secondary`,children:e.badge})]}),!!e.description&&(0,b.jsx)(i,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:e.description}),!!e.timestamp&&(0,b.jsx)(i,{size:`xxs`,type:`discrete`,className:`mt-1`,children:e.timestamp}),!!e.content&&(0,b.jsx)(`div`,{className:`mt-2`,children:e.content})]})]},e.id)})})})}S.displayName=`StepsCard`;function fe({status:e,stepNumber:n}){return e===`completed`?(0,b.jsx)(`div`,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-success text-success-foreground`,children:(0,b.jsx)(t,{className:`h-4 w-4`})}):e===`current`?(0,b.jsx)(`div`,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-white`,children:(0,b.jsx)(i,{weight:`bold`,className:`text-white`,children:n})}):(0,b.jsx)(`div`,{className:`relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-2 border-muted text-muted-foreground`,children:(0,b.jsx)(i,{weight:`medium`,className:`text-muted-foreground`,children:n})})}function C({title:e,description:t,steps:n,footerText:r,className:a}){return(0,b.jsx)(v,{title:e,description:t,footerText:r,className:a,children:(0,b.jsx)(`div`,{className:`overflow-x-auto -mx-1 px-1`,children:(0,b.jsx)(`div`,{className:`flex min-w-fit items-start`,children:n.map((e,t)=>{let r=t===n.length-1,a=e.status===`completed`?`bg-success`:`bg-border`;return(0,b.jsx)(`div`,{className:`flex min-w-[110px] flex-1 items-start`,children:(0,b.jsxs)(`div`,{className:`flex w-full flex-col items-center`,children:[(0,b.jsxs)(`div`,{className:`flex w-full items-center`,children:[t>0&&(0,b.jsx)(`div`,{className:c(`h-0.5 flex-1`,n[t-1].status===`completed`?`bg-success`:`bg-border`)}),t===0&&(0,b.jsx)(`div`,{className:`flex-1`}),(0,b.jsx)(fe,{status:e.status,stepNumber:t+1}),!r&&(0,b.jsx)(`div`,{className:c(`h-0.5 flex-1`,a)}),!!r&&(0,b.jsx)(`div`,{className:`flex-1`})]}),(0,b.jsxs)(`div`,{className:`mt-2 flex w-full flex-col items-center px-1 text-center`,children:[(0,b.jsx)(i,{size:`xs`,weight:`semibold`,className:c(`leading-snug line-clamp-2`,e.status===`upcoming`?`text-muted-foreground`:`text-foreground`),children:e.title}),!!e.description&&(0,b.jsx)(i,{size:`xxs`,type:`secondary`,className:`mt-0.5 leading-snug line-clamp-2`,children:e.description})]})]})},e.id)})})})})}C.displayName=`StepsHorizontal`;var w={completed:`bg-success`,current:`bg-primary ring-3 ring-primary/20`,pending:`bg-muted`};function T({title:e,description:t,events:n,footerText:r,className:a}){return(0,b.jsx)(v,{title:e,description:t,footerText:r,className:c(`order-timeline--component`,a),children:(0,b.jsx)(`div`,{className:`relative space-y-0`,children:n.map((e,t)=>(0,b.jsxs)(`div`,{className:`relative flex gap-3 pb-4 last:pb-0`,children:[t!==n.length-1&&(0,b.jsx)(`div`,{className:`absolute left-[5px] top-[14px] h-[calc(100%-6px)] w-px bg-border`}),(0,b.jsx)(`div`,{className:`relative z-10 mt-[5px] flex-shrink-0`,children:(0,b.jsx)(`div`,{className:c(`h-[11px] w-[11px] rounded-full`,w[e.status])})}),(0,b.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,b.jsxs)(`div`,{className:`flex items-baseline justify-between gap-2`,children:[(0,b.jsx)(i,{weight:`medium`,className:`truncate`,children:e.title}),(0,b.jsx)(i,{size:`xxs`,type:`secondary`,className:`flex-shrink-0 font-mono tabular-nums`,children:e.timestamp})]}),!!e.description&&(0,b.jsx)(i,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:e.description})]})]},e.id))})})}function E({events:e,className:t}){return(0,b.jsx)(v,{title:`Payment Timeline`,className:c(`payment-timeline--component`,t),children:(0,b.jsx)(`div`,{className:`mt-5 space-y-0`,children:e.map((t,n)=>{let r=t.icon;return(0,b.jsxs)(`div`,{className:`flex gap-4`,children:[(0,b.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,b.jsx)(`div`,{className:c(`flex size-8 items-center justify-center rounded-full`,t.done?`bg-success/20`:`bg-muted`),children:(0,b.jsx)(r,{className:c(`size-3.5`,t.done?`text-success`:`text-muted-foreground`)})}),n<e.length-1&&(0,b.jsx)(`div`,{className:c(`mt-1 h-8 w-px`,t.done?`bg-success/30`:`bg-border`)})]}),(0,b.jsxs)(`div`,{className:`pb-6`,children:[(0,b.jsx)(i,{weight:`medium`,children:t.label}),(0,b.jsx)(i,{size:`xs`,type:`secondary`,children:t.date}),!!t.amount&&(0,b.jsx)(i,{size:`xs`,weight:`medium`,className:`mt-0.5 tabular-nums text-success`,children:t.amount})]})]},t.label)})})})}var D={title:`Activity`,empty:`No activity yet`},O={primary:`bg-primary/10 text-primary`,secondary:`bg-secondary text-secondary-foreground`,success:`bg-success/15 text-success`,info:`bg-info/15 text-info`,warning:`bg-warning/30 text-warning-foreground`,error:`bg-destructive/15 text-destructive`};function k({items:e,className:t,strings:n}){let r=g(D,n);return e.length===0?(0,b.jsx)(v,{icon:(0,b.jsx)(l,{className:`size-4`}),title:r.title,className:c(`activity-stream--component`,t),children:(0,b.jsx)(i,{type:`secondary`,align:`center`,className:`py-6`,children:r.empty})}):(0,b.jsx)(v,{icon:(0,b.jsx)(l,{className:`size-4`}),title:r.title,className:t,children:(0,b.jsx)(`ul`,{className:`space-y-3`,children:e.map((t,n)=>{let r=t.icon??u,a=n===e.length-1;return(0,b.jsxs)(`li`,{className:`relative flex gap-3`,children:[(0,b.jsxs)(`div`,{className:`relative flex flex-col items-center`,children:[(0,b.jsx)(`div`,{className:c(`flex size-7 items-center justify-center rounded-full`,O[t.iconVariant??`primary`]),children:(0,b.jsx)(r,{className:`size-3.5`})}),!a&&(0,b.jsx)(`div`,{className:`mt-1 w-px flex-1 bg-border`})]}),(0,b.jsxs)(`div`,{className:`min-w-0 flex-1 pb-3`,children:[(0,b.jsxs)(`div`,{className:`flex flex-wrap items-baseline gap-x-1.5`,children:[!!t.actor&&(0,b.jsx)(i,{tag:`span`,weight:`semibold`,children:t.actor}),(0,b.jsx)(i,{tag:`span`,type:`secondary`,children:t.action}),!!t.target&&(0,b.jsx)(i,{tag:`span`,weight:`medium`,children:t.target})]}),!!t.metadata&&t.metadata.length>0&&(0,b.jsx)(`div`,{className:`mt-1 flex flex-wrap gap-x-3 gap-y-0.5`,children:t.metadata.map(e=>(0,b.jsxs)(i,{size:`xs`,type:`secondary`,children:[(0,b.jsxs)(i,{tag:`span`,size:`xs`,type:`discrete`,children:[e.label,`: `]}),e.value]},e.label))}),(0,b.jsx)(i,{size:`xxs`,type:`discrete`,className:`mt-0.5 tabular-nums`,children:t.timestamp})]})]},t.id)})})})}k.displayName=`ActivityStreamCard`;var A={sm:`size-2.5`,base:`size-3.5`,lg:`size-5`},j={sm:`size-2`,base:`size-2.5`,lg:`size-3`},M={completed:{bg:`bg-success`,text:`text-success-foreground`,ring:`ring-success/20`,line:`bg-success/40`},current:{bg:`bg-primary`,text:`text-primary-foreground`,ring:`ring-primary/30`,line:`bg-primary/40`},pending:{bg:`bg-muted`,text:`text-muted-foreground`,ring:`ring-border`,line:`bg-border`},success:{bg:`bg-success`,text:`text-success-foreground`,ring:`ring-success/20`,line:`bg-success/40`},warning:{bg:`bg-warning`,text:`text-warning-foreground`,ring:`ring-warning/30`,line:`bg-warning/40`},error:{bg:`bg-destructive`,text:`text-destructive-foreground`,ring:`ring-destructive/30`,line:`bg-destructive/40`},neutral:{bg:`bg-card`,text:`text-foreground`,ring:`ring-border`,line:`bg-border`}};function N({items:e,dotSize:t=`base`,className:n}){return(0,b.jsx)(`ol`,{className:c(`timeline--component`,`relative space-y-4`,n),children:e.map((n,r)=>{let a=M[n.status??`neutral`],o=n.icon;return(0,b.jsxs)(`li`,{className:`relative flex gap-3`,children:[r!==e.length-1&&(0,b.jsx)(`span`,{"aria-hidden":`true`,className:c(`absolute left-[7px] top-4 bottom-[-1rem] w-px`,a.line,t===`lg`&&`left-[10px]`,t===`sm`&&`left-[5px]`)}),(0,b.jsx)(`div`,{className:`relative z-[1] mt-0.5 flex shrink-0 items-start`,children:(0,b.jsx)(`span`,{className:c(`inline-flex items-center justify-center rounded-full ring-2`,a.bg,a.text,a.ring,A[t]),children:!!o&&(0,b.jsx)(o,{className:j[t]})})}),(0,b.jsxs)(`div`,{className:`min-w-0 flex-1 pb-2`,children:[(0,b.jsxs)(`div`,{className:`flex items-baseline justify-between gap-2`,children:[(0,b.jsx)(i,{weight:`medium`,className:`leading-tight`,children:n.title}),!!n.timestamp&&(0,b.jsx)(i,{size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:n.timestamp})]}),!!n.description&&(0,b.jsx)(i,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:n.description}),!!n.children&&(0,b.jsx)(`div`,{className:`mt-2`,children:n.children})]})]},n.id)})})}N.displayName=`Timeline`;var P={title:`Changelog`,added:`Added`,removed:`Removed`,modified:`Modified`,fixed:`Fixed`},F={added:`success`,removed:`error`,modified:`warning`,fixed:`current`},I={added:`success`,removed:`error`,modified:`warning`,fixed:`info`},L={added:se,removed:oe,modified:m,fixed:y};function R({entries:e,className:t,strings:n}){let r=g(P,n),o={added:r.added,removed:r.removed,modified:r.modified,fixed:r.fixed},s=e.map(e=>({id:e.id,title:(0,b.jsxs)(`span`,{className:`inline-flex flex-wrap items-center gap-1.5`,children:[(0,b.jsx)(a,{variant:I[e.kind],children:o[e.kind]}),(0,b.jsx)(`span`,{children:e.title}),!!e.version&&(0,b.jsx)(i,{tag:`span`,size:`xxs`,type:`secondary`,className:`font-mono`,children:e.version})]}),description:e.author?(0,b.jsxs)(b.Fragment,{children:[e.description,(0,b.jsxs)(i,{tag:`span`,size:`xxs`,type:`discrete`,className:`ml-2`,children:[`— `,e.author]})]}):e.description,timestamp:e.timestamp,icon:L[e.kind],status:F[e.kind]}));return(0,b.jsx)(v,{icon:(0,b.jsx)(y,{className:`size-4`}),title:r.title,className:c(`changelog-timeline--component`,t),children:(0,b.jsx)(N,{items:s,dotSize:`base`})})}R.displayName=`ChangelogTimelineCard`;var z={title:`Milestones`,completed:`Completed`,in_progress:`In progress`,upcoming:`Upcoming`,blocked:`Blocked`,dueOn:`Due`},B={completed:`completed`,in_progress:`current`,upcoming:`pending`,blocked:`error`},V={completed:t,in_progress:re,upcoming:u,blocked:h},pe={completed:`success`,in_progress:`primary`,upcoming:`secondary`,blocked:`error`};function H({milestones:e,className:t,strings:n}){let r=g(z,n),o={completed:r.completed,in_progress:r.in_progress,upcoming:r.upcoming,blocked:r.blocked},s=e.map(e=>({id:e.id,title:(0,b.jsxs)(`span`,{className:`inline-flex flex-wrap items-center gap-1.5`,children:[(0,b.jsx)(`span`,{children:e.title}),(0,b.jsx)(a,{variant:pe[e.status],children:o[e.status]})]}),description:e.description,timestamp:e.dueDate?`${r.dueOn} ${e.dueDate}`:void 0,icon:V[e.status],status:B[e.status],children:e.status===`in_progress`&&typeof e.progress==`number`?(0,b.jsxs)(`div`,{className:`space-y-1`,children:[(0,b.jsx)(`div`,{className:`h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,b.jsx)(`div`,{className:c(`h-full rounded-full bg-primary transition-[width] duration-300`),style:{width:`${Math.max(0,Math.min(100,e.progress))}%`}})}),(0,b.jsxs)(i,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:[Math.round(e.progress),`%`]})]}):void 0}));return(0,b.jsx)(v,{icon:(0,b.jsx)(te,{className:`size-4`}),title:r.title,className:c(`milestones-timeline--component`,t),children:(0,b.jsx)(N,{items:s,dotSize:`base`})})}H.displayName=`MilestonesTimelineCard`;var me=e({ActivityStreamReadOnlyTracking:()=>J,Changelog:()=>Y,Milestones:()=>X,OrderTimeline:()=>K,PaymentTimeline:()=>q,StepsHorizontalExample:()=>G,StepsVertical:()=>W}),U=[{id:`1`,title:`Order Placed`,description:`Customer completed checkout`,status:`completed`,timestamp:`Mar 24`},{id:`2`,title:`Payment Confirmed`,status:`completed`,timestamp:`Mar 24`,badge:`Verified`,badgeVariant:`success`},{id:`3`,title:`Preparing Vouchers`,description:`Generating codes`,status:`current`},{id:`4`,title:`Ready for Delivery`,status:`upcoming`},{id:`5`,title:`Delivered`,status:`upcoming`}];function W(){return(0,b.jsx)(b.Fragment,{children:(0,b.jsx)(S,{title:`Order Processing`,description:`Order #ORD-2026-0412`,steps:U})})}function G(){return(0,b.jsx)(b.Fragment,{children:(0,b.jsx)(C,{title:`Delivery Pipeline`,steps:U})})}function K(){return(0,b.jsx)(b.Fragment,{children:(0,b.jsx)(T,{title:`Order #ORD-2026-0415`,description:`Sarah Smitha — 2,450 USD`,events:[{id:`1`,title:`Order placed`,timestamp:`10:24 AM`,status:`completed`},{id:`2`,title:`Payment received`,description:`2,450 USD`,timestamp:`10:26 AM`,status:`completed`},{id:`3`,title:`Vouchers generated`,timestamp:`10:27 AM`,status:`completed`},{id:`4`,title:`Email sent`,timestamp:`10:28 AM`,status:`current`},{id:`5`,title:`Delivery scheduled`,timestamp:`—`,status:`pending`}],footerText:`Last updated 2 minutes ago`})})}function q(){return(0,b.jsx)(b.Fragment,{children:(0,b.jsx)(E,{events:[{label:`Invoice sent`,date:`Mar 20`,amount:`2,480 USD`,done:!0,icon:f},{label:`Reminder sent`,date:`Apr 5`,done:!0,icon:ae},{label:`Payment received`,date:`Apr 12`,amount:`2,480 USD`,done:!0,icon:d},{label:`Receipt generated`,date:`Apr 12`,done:!1,icon:ce}]})})}function J(){return(0,b.jsx)(b.Fragment,{children:(0,b.jsx)(k,{items:[{id:`1`,icon:ne,iconVariant:`success`,actor:`Sarah Smitha`,action:`paid invoice`,target:`#INV-2026-0392`,timestamp:`2 minutes ago`},{id:`2`,icon:p,iconVariant:`primary`,actor:`Daniel Smith`,action:`placed order`,target:`#ORD-2026-0413`,timestamp:`15 minutes ago`,metadata:[{label:`Items`,value:`3`},{label:`Total`,value:`370 USD`}]},{id:`3`,icon:ie,iconVariant:`warning`,actor:`Emma Garcia`,action:`favorited`,target:`Hot Air Balloon`,timestamp:`1 hour ago`},{id:`4`,icon:n,iconVariant:`error`,action:`Webhook failure on`,target:`shopify.payments.captured`,timestamp:`3 hours ago`}]})})}function Y(){return(0,b.jsx)(b.Fragment,{children:(0,b.jsx)(R,{entries:[{id:`c1`,kind:`added`,title:`Voucher entry component`,version:`v2.4.0`,timestamp:`Apr 20`,author:`mp`,description:`New gift-card redemption surface; companion to coupon input.`},{id:`c2`,kind:`fixed`,title:`Booking row dark-on-dark contrast`,version:`v2.3.4`,timestamp:`Apr 18`,author:`sp`,description:`Day numbers were invisible on the primary chip.`},{id:`c3`,kind:`modified`,title:`InlineMetric typography rebalanced`,version:`v2.3.3`,timestamp:`Apr 16`,author:`em`},{id:`c4`,kind:`removed`,title:`Legacy giftcardStatusMap`,version:`v2.3.0`,timestamp:`Apr 14`,author:`id`,description:`Use defaultGiftcardStrings.status + giftcardStatusVariant.`}]})})}function X(){return(0,b.jsx)(b.Fragment,{children:(0,b.jsx)(H,{milestones:[{id:`m1`,title:`Phase A — cross-cutting infra`,description:`Strings helper, typography scale, conventions doc.`,dueDate:`Apr 28`,status:`completed`},{id:`m2`,title:`Phase B — base primitives`,description:`Display, currency, forms, table, navigation, calendar.`,dueDate:`Apr 30`,status:`completed`},{id:`m3`,title:`Phase C — composed redesign`,description:`Cards, charts, commerce, navigation, timelines, AI.`,dueDate:`May 4`,status:`in_progress`,progress:72},{id:`m4`,title:`Phase D — upload subsystem`,description:`Dropzone, AvatarUpload, MediaGallery, UploadProgressList.`,dueDate:`May 8`,status:`upcoming`},{id:`m5`,title:`Public release v3.0`,description:`Tagged release, migration guide, codemod scripts.`,dueDate:`May 20`,status:`blocked`}]})})}var Z=`import {
+	AlertTriangle,
+	CheckCircle,
+	CreditCard,
+	FileText,
+	Heart,
+	Mail,
+	Receipt,
+	ShoppingBag,
+} from 'lucide-react';
+import {
+	ActivityStreamCard,
+	ChangelogTimelineCard,
+	MilestonesTimelineCard,
+	OrderTimelineCard,
+	PaymentTimelineCard,
+	StepsCard,
+	StepsHorizontal,
+} from '@/components/composed/timelines';
+
+const steps = [
+	{ id: '1', title: 'Order Placed', description: 'Customer completed checkout', status: 'completed' as const, timestamp: 'Mar 24' },
+	{ id: '2', title: 'Payment Confirmed', status: 'completed' as const, timestamp: 'Mar 24', badge: 'Verified', badgeVariant: 'success' as const },
+	{ id: '3', title: 'Preparing Vouchers', description: 'Generating codes', status: 'current' as const },
+	{ id: '4', title: 'Ready for Delivery', status: 'upcoming' as const },
+	{ id: '5', title: 'Delivered', status: 'upcoming' as const },
+];
+
+export function StepsVertical() {
+	return (
+		<>
+			<StepsCard title="Order Processing" description="Order #ORD-2026-0412" steps={steps} />
+		</>
+	);
+}
+
+export function StepsHorizontalExample() {
+	return (
+		<>
+			<StepsHorizontal title="Delivery Pipeline" steps={steps} />
+		</>
+	);
+}
+
+export function OrderTimeline() {
+	return (
+		<>
+			<OrderTimelineCard
+								title="Order #ORD-2026-0415"
+								description="Sarah Smitha — 2,450 USD"
+								events={[
+									{ id: '1', title: 'Order placed', timestamp: '10:24 AM', status: 'completed' },
+									{ id: '2', title: 'Payment received', description: '2,450 USD', timestamp: '10:26 AM', status: 'completed' },
+									{ id: '3', title: 'Vouchers generated', timestamp: '10:27 AM', status: 'completed' },
+									{ id: '4', title: 'Email sent', timestamp: '10:28 AM', status: 'current' },
+									{ id: '5', title: 'Delivery scheduled', timestamp: '—', status: 'pending' },
+								]}
+								footerText="Last updated 2 minutes ago"
+							/>
+		</>
+	);
+}
+
+export function PaymentTimeline() {
+	return (
+		<>
+			<PaymentTimelineCard
+								events={[
+									{ label: 'Invoice sent', date: 'Mar 20', amount: '2,480 USD', done: true, icon: FileText },
+									{ label: 'Reminder sent', date: 'Apr 5', done: true, icon: Mail },
+									{ label: 'Payment received', date: 'Apr 12', amount: '2,480 USD', done: true, icon: CreditCard },
+									{ label: 'Receipt generated', date: 'Apr 12', done: false, icon: Receipt },
+								]}
+							/>
+		</>
+	);
+}
+
+export function ActivityStreamReadOnlyTracking() {
+	return (
+		<>
+			<ActivityStreamCard
+								items={[
+									{ id: '1', icon: CheckCircle, iconVariant: 'success', actor: 'Sarah Smitha', action: 'paid invoice', target: '#INV-2026-0392', timestamp: '2 minutes ago' },
+									{ id: '2', icon: ShoppingBag, iconVariant: 'primary', actor: 'Daniel Smith', action: 'placed order', target: '#ORD-2026-0413', timestamp: '15 minutes ago', metadata: [{ label: 'Items', value: '3' }, { label: 'Total', value: '370 USD' }] },
+									{ id: '3', icon: Heart, iconVariant: 'warning', actor: 'Emma Garcia', action: 'favorited', target: 'Hot Air Balloon', timestamp: '1 hour ago' },
+									{ id: '4', icon: AlertTriangle, iconVariant: 'error', action: 'Webhook failure on', target: 'shopify.payments.captured', timestamp: '3 hours ago' },
+								]}
+							/>
+		</>
+	);
+}
+
+export function Changelog() {
+	return (
+		<>
+			<ChangelogTimelineCard
+								entries={[
+									{
+										id: 'c1',
+										kind: 'added',
+										title: 'Voucher entry component',
+										version: 'v2.4.0',
+										timestamp: 'Apr 20',
+										author: 'mp',
+										description: 'New gift-card redemption surface; companion to coupon input.',
+									},
+									{
+										id: 'c2',
+										kind: 'fixed',
+										title: 'Booking row dark-on-dark contrast',
+										version: 'v2.3.4',
+										timestamp: 'Apr 18',
+										author: 'sp',
+										description: 'Day numbers were invisible on the primary chip.',
+									},
+									{
+										id: 'c3',
+										kind: 'modified',
+										title: 'InlineMetric typography rebalanced',
+										version: 'v2.3.3',
+										timestamp: 'Apr 16',
+										author: 'em',
+									},
+									{
+										id: 'c4',
+										kind: 'removed',
+										title: 'Legacy giftcardStatusMap',
+										version: 'v2.3.0',
+										timestamp: 'Apr 14',
+										author: 'id',
+										description: 'Use defaultGiftcardStrings.status + giftcardStatusVariant.',
+									},
+								]}
+							/>
+		</>
+	);
+}
+
+export function Milestones() {
+	return (
+		<>
+			<MilestonesTimelineCard
+								milestones={[
+									{
+										id: 'm1',
+										title: 'Phase A — cross-cutting infra',
+										description: 'Strings helper, typography scale, conventions doc.',
+										dueDate: 'Apr 28',
+										status: 'completed',
+									},
+									{
+										id: 'm2',
+										title: 'Phase B — base primitives',
+										description: 'Display, currency, forms, table, navigation, calendar.',
+										dueDate: 'Apr 30',
+										status: 'completed',
+									},
+									{
+										id: 'm3',
+										title: 'Phase C — composed redesign',
+										description: 'Cards, charts, commerce, navigation, timelines, AI.',
+										dueDate: 'May 4',
+										status: 'in_progress',
+										progress: 72,
+									},
+									{
+										id: 'm4',
+										title: 'Phase D — upload subsystem',
+										description: 'Dropzone, AvatarUpload, MediaGallery, UploadProgressList.',
+										dueDate: 'May 8',
+										status: 'upcoming',
+									},
+									{
+										id: 'm5',
+										title: 'Public release v3.0',
+										description: 'Tagged release, migration guide, codemod scripts.',
+										dueDate: 'May 20',
+										status: 'blocked',
+									},
+								]}
+							/>
+		</>
+	);
+}
+`;function Q(e){let t={h4:`h4`,...e.components};return me||$(`Examples`,!1),J||$(`Examples.ActivityStreamReadOnlyTracking`,!0),Y||$(`Examples.Changelog`,!0),X||$(`Examples.Milestones`,!0),K||$(`Examples.OrderTimeline`,!0),q||$(`Examples.PaymentTimeline`,!0),G||$(`Examples.StepsHorizontalExample`,!0),W||$(`Examples.StepsVertical`,!0),(0,b.jsxs)(r,{title:`Composed · Timelines`,description:`Read-only tracking timelines — steps, order, payment, activity stream, release changelog, project milestones. For interactive activity (segments, mass-config, resource registry, callbacks) see Features → Activity feed.`,layer:`composed`,status:`ready`,children:[(0,b.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,b.jsx)(s,{name:`StepsVertical`,source:Z,children:(0,b.jsx)(W,{})}),(0,b.jsx)(s,{name:`StepsHorizontalExample`,source:Z,children:(0,b.jsx)(G,{})}),(0,b.jsx)(s,{name:`OrderTimeline`,source:Z,children:(0,b.jsx)(K,{})}),(0,b.jsx)(s,{name:`PaymentTimeline`,source:Z,children:(0,b.jsx)(q,{})}),(0,b.jsx)(s,{name:`ActivityStreamReadOnlyTracking`,source:Z,children:(0,b.jsx)(J,{})}),(0,b.jsx)(s,{name:`Changelog`,source:Z,children:(0,b.jsx)(Y,{})}),(0,b.jsx)(s,{name:`Milestones`,source:Z,children:(0,b.jsx)(X,{})})]}),(0,b.jsxs)(o,{title:`API`,id:`api`,children:[(0,b.jsx)(t.h4,{children:`ActivityStreamCard`}),(0,b.jsx)(_,{component:`ActivityStreamCard`}),(0,b.jsx)(t.h4,{children:`ChangelogTimelineCard`}),(0,b.jsx)(_,{component:`ChangelogTimelineCard`}),(0,b.jsx)(t.h4,{children:`MilestonesTimelineCard`}),(0,b.jsx)(_,{component:`MilestonesTimelineCard`}),(0,b.jsx)(t.h4,{children:`OrderTimelineCard`}),(0,b.jsx)(_,{component:`OrderTimelineCard`}),(0,b.jsx)(t.h4,{children:`PaymentTimelineCard`}),(0,b.jsx)(_,{component:`PaymentTimelineCard`}),(0,b.jsx)(t.h4,{children:`StepsCard`}),(0,b.jsx)(_,{component:`StepsCard`}),(0,b.jsx)(t.h4,{children:`StepsHorizontal`}),(0,b.jsx)(_,{component:`StepsHorizontal`})]})]})}function he(e={}){let{wrapper:t}=e.components||{};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{he as default};

package/dist/showcase/assets/toggle-group-CfxuWsv9.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-CilyBKbf.js";import{Gn as t,Jn as n,Yt as r,Zn as i,dn as a,dr as o,g as s,vr as c,zn as l}from"./example-DPfw-R7_.js";import{a as u,k as d}from"./index-B-Z7p0So.js";import{t as f}from"./useControlled-C6q3nmcf.js";import{t as p}from"./ToolbarRootContext-iF4ctnIz.js";import{t as m}from"./CompositeItem-DHNLgEeV.js";import{t as h}from"./CompositeRoot-xq_0ZFev.js";var g=e(d()),_=g.createContext(void 0);function v(e=!0){let t=g.useContext(_);if(t===void 0&&!e)throw Error(n(7));return t}var y=u(),b=g.forwardRef(function(e,n){let{className:o,defaultPressed:c=!1,disabled:u=!1,form:d,onPressedChange:p,pressed:h,render:g,type:_,value:b,nativeButton:x=!0,style:S,...C}=e,w=s(b||void 0),T=v(),E=T?.value??[],D=T?void 0:c,O=(u||T?.disabled)??!1,[k,A]=f({controlled:T?w!==void 0&&E.indexOf(w)>-1:h,default:D,name:`Toggle`,state:`pressed`}),j=i((e,t)=>{w&&T?.setGroupValue?.(w,e,t),p?.(e,t)}),{getButtonProps:M,buttonRef:N}=t({disabled:O,native:x}),P={disabled:O,pressed:k},F=[N,n],I=[{"aria-pressed":k,onClick(e){let t=!k,n=r(a,e.nativeEvent);j(t,n),!n.isCanceled&&A(t)}},C,M],L=l(`button`,e,{enabled:!T,state:P,ref:F,props:I});return T?(0,y.jsx)(m,{tag:`button`,render:g,className:o,style:S,state:P,refs:F,props:I}):L}),x=function(e){return e.disabled=`data-disabled`,e.orientation=`data-orientation`,e.multiple=`data-multiple`,e}({}),S={multiple(e){return e?{[x.multiple]:``}:null}},C=g.forwardRef(function(e,t){let{defaultValue:n,disabled:r=!1,loopFocus:a=!0,onValueChange:o,orientation:s=`horizontal`,multiple:c=!1,value:u,className:d,render:m,style:v,...b}=e,x=p(!0),C=g.useMemo(()=>{if(u===void 0)return n??[]},[u,n]),w=g.useMemo(()=>u!==void 0||n!==void 0,[u,n]),T=(x?.disabled??!1)||r,[E,D]=f({controlled:u,default:C,name:`ToggleGroup`,state:`value`}),O=i((e,t,n)=>{let r;if(c?(r=E.slice(),t?r.push(e):r.splice(E.indexOf(e),1)):r=t?[e]:[],Array.isArray(r)){if(o?.(r,n),n.isCanceled)return;D(r)}}),k={disabled:T,multiple:c,orientation:s},A=g.useMemo(()=>({disabled:T,orientation:s,setGroupValue:O,value:E,isValueInitialized:w}),[T,s,O,E,w]),j={role:`group`},M=l(`div`,e,{enabled:!!x,state:k,ref:t,props:[j,b],stateAttributesMapping:S});return(0,y.jsx)(_.Provider,{value:A,children:x?M:(0,y.jsx)(h,{render:m,className:d,style:v,state:k,refs:[t],props:[j,b],stateAttributesMapping:S,loopFocus:a,enableHomeAndEndKeys:!0,orientation:s})})}),w=o(`hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,{variants:{variant:{default:`bg-transparent`,outline:`border-input hover:bg-muted border bg-transparent shadow-xs`},size:{default:`h-9 min-w-9 px-2`,sm:`h-8 min-w-8 px-1.5`,lg:`h-10 min-w-10 px-2.5`}},defaultVariants:{variant:`default`,size:`default`}});function T({className:e,variant:t=`default`,size:n=`default`,...r}){return(0,y.jsx)(b,{"data-slot":`toggle`,className:c(w({variant:t,size:n,className:e})),...r})}var E=g.createContext({size:`default`,variant:`default`,spacing:0,orientation:`horizontal`});function D({className:e,variant:t,size:n,spacing:r=0,orientation:i=`horizontal`,children:a,...o}){return(0,y.jsx)(C,{"data-slot":`toggle-group`,"data-variant":t,"data-size":n,"data-spacing":r,"data-orientation":i,style:{"--gap":r},className:c(`rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch`,e),...o,children:(0,y.jsx)(E.Provider,{value:{variant:t,size:n,spacing:r,orientation:i},children:a})})}function O({className:e,children:t,variant:n=`default`,size:r=`default`,...i}){let a=g.useContext(E);return(0,y.jsx)(b,{"data-slot":`toggle-group-item`,"data-variant":a.variant||n,"data-size":a.size||r,"data-spacing":a.spacing,className:c(`data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t`,w({variant:a.variant||n,size:a.size||r}),e),...i,children:t})}export{O as n,T as r,D as t};

package/dist/showcase/assets/toggles-CacdBPlV.js

@@ -0,0 +1,71 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{cr as n,sr as r,t as i,vr as a}from"./example-DPfw-R7_.js";import{t as o}from"./circle-C0Yd1DDS.js";import{a as s,k as c}from"./index-B-Z7p0So.js";import{a as l,i as u,n as d,r as f,t as p}from"./RadioGroup-DXAt4VZN.js";import{t as m}from"./switch-D3LrIrTQ.js";import{n as h,t as g}from"./PreviewLayout-BHemtKEf.js";var _=t(c(),1),v=s();function y({className:e,...t}){return(0,v.jsx)(p,{"data-slot":`radio-group`,className:a(`grid gap-3 w-full`,e),...t})}function b({className:e,...t}){return(0,v.jsx)(f,{"data-slot":`radio-group-item`,className:a(`border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50`,e),...t,children:(0,v.jsx)(d,{"data-slot":`radio-group-indicator`,className:`group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center`,children:(0,v.jsx)(o,{className:`absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current`})})})}var x=e({CheckboxExample:()=>S,RadioGroupExample:()=>w,SliderExample:()=>T,SwitchExample:()=>C});function S(){let[e,t]=(0,_.useState)(!1);return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(h,{children:[(0,v.jsxs)(`label`,{className:`inline-flex items-center gap-2 text-sm`,children:[(0,v.jsx)(l,{checked:e,onCheckedChange:e=>t(e===!0)}),` I agree`]}),(0,v.jsxs)(`label`,{className:`inline-flex items-center gap-2 text-sm opacity-50`,children:[(0,v.jsx)(l,{disabled:!0}),` Disabled`]}),(0,v.jsxs)(`label`,{className:`inline-flex items-center gap-2 text-sm`,children:[(0,v.jsx)(l,{indeterminate:!0}),` Indeterminate`]})]})})}function C(){let[e,t]=(0,_.useState)(!0);return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(h,{children:[(0,v.jsxs)(`label`,{className:`inline-flex items-center gap-2 text-sm`,children:[(0,v.jsx)(m,{checked:e,onCheckedChange:t}),e?`On`:`Off`]}),(0,v.jsxs)(`label`,{className:`inline-flex items-center gap-2 text-sm`,children:[(0,v.jsx)(m,{size:`sm`,defaultChecked:!0}),`sm`]})]})})}function w(){let[e,t]=(0,_.useState)(`md`);return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(y,{value:e,onValueChange:t,children:(0,v.jsx)(g,{children:[`sm`,`md`,`lg`].map(e=>(0,v.jsxs)(`label`,{className:`inline-flex items-center gap-2 text-sm`,children:[(0,v.jsx)(b,{value:e}),` `,e.toUpperCase()]},e))})})})}function T(){let[e,t]=(0,_.useState)(40);return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(u,{value:[e],onValueChange:e=>t(Array.isArray(e)?e[0]:e)}),(0,v.jsxs)(`div`,{className:`mt-2 text-xs text-muted-foreground`,children:[`value: `,e]})]})}var E=`import { useState } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Slider } from '@/components/ui/slider';
+import { Row, Col } from '../../PreviewLayout';
+
+export function CheckboxExample() {
+	const [agreed, setAgreed] = useState(false);
+	return (
+		<>
+			<Row>
+								<label className="inline-flex items-center gap-2 text-sm">
+									<Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} /> I agree
+								</label>
+								<label className="inline-flex items-center gap-2 text-sm opacity-50">
+									<Checkbox disabled /> Disabled
+								</label>
+								<label className="inline-flex items-center gap-2 text-sm">
+									<Checkbox indeterminate /> Indeterminate
+								</label>
+							</Row>
+		</>
+	);
+}
+
+export function SwitchExample() {
+	const [enabled, setEnabled] = useState(true);
+	return (
+		<>
+			<Row>
+								<label className="inline-flex items-center gap-2 text-sm">
+									<Switch checked={enabled} onCheckedChange={setEnabled} />
+									{enabled ? 'On' : 'Off'}
+								</label>
+								<label className="inline-flex items-center gap-2 text-sm">
+									<Switch size="sm" defaultChecked />
+									sm
+								</label>
+							</Row>
+		</>
+	);
+}
+
+export function RadioGroupExample() {
+	const [size, setSize] = useState('md');
+	return (
+		<>
+			<RadioGroup value={size} onValueChange={setSize}>
+								<Col>
+									{['sm', 'md', 'lg'].map((s) => (
+										<label key={s} className="inline-flex items-center gap-2 text-sm">
+											<RadioGroupItem value={s} /> {s.toUpperCase()}
+										</label>
+									))}
+								</Col>
+							</RadioGroup>
+		</>
+	);
+}
+
+export function SliderExample() {
+	const [vol, setVol] = useState<number>(40);
+	return (
+		<>
+			<Slider value={[vol]} onValueChange={(v) => setVol(Array.isArray(v) ? v[0] : v)} />
+							<div className="mt-2 text-xs text-muted-foreground">value: {vol}</div>
+		</>
+	);
+}
+`;function D(e){return x||k(`Examples`,!1),S||k(`Examples.CheckboxExample`,!0),w||k(`Examples.RadioGroupExample`,!0),T||k(`Examples.SliderExample`,!0),C||k(`Examples.SwitchExample`,!0),(0,v.jsx)(n,{title:`UI · Toggles`,description:`Checkbox, Switch, RadioGroup, Slider primitives.`,layer:`ui`,status:`ready`,children:(0,v.jsxs)(r,{title:`Examples`,id:`examples`,children:[(0,v.jsx)(i,{name:`CheckboxExample`,source:E,children:(0,v.jsx)(S,{})}),(0,v.jsx)(i,{name:`SwitchExample`,source:E,children:(0,v.jsx)(C,{})}),(0,v.jsx)(i,{name:`RadioGroupExample`,source:E,children:(0,v.jsx)(w,{})}),(0,v.jsx)(i,{name:`SliderExample`,source:E,children:(0,v.jsx)(T,{})})]})})}function O(e={}){let{wrapper:t}=e.components||{};return t?(0,v.jsx)(t,{...e,children:(0,v.jsx)(D,{...e})}):D(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{O as default};

package/dist/showcase/assets/toggles-group-CRhgTGmL.js

@@ -0,0 +1,32 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{cr as n,sr as r,t as i}from"./example-DPfw-R7_.js";import{n as a,t as o}from"./italic-B02a4PdD.js";import{a as s,k as c,r as l}from"./index-B-Z7p0So.js";import{n as u,r as d,t as f}from"./toggle-group-CfxuWsv9.js";var p=l(`text-align-center`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M17 12H7`,key:`16if0g`}],[`path`,{d:`M19 19H5`,key:`vjpgq2`}]]),m=l(`text-align-end`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M21 12H9`,key:`dn1m92`}],[`path`,{d:`M21 19H7`,key:`4cu937`}]]),h=l(`text-align-start`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M15 12H3`,key:`6jk70r`}],[`path`,{d:`M17 19H3`,key:`z6ezky`}]]),g=l(`underline`,[[`path`,{d:`M6 4v6a6 6 0 0 0 12 0V4`,key:`9kb039`}],[`line`,{x1:`4`,x2:`20`,y1:`20`,y2:`20`,key:`nun2al`}]]),_=e({MultipleSelectGroup:()=>x,SingleToggle:()=>b}),v=t(c(),1),y=s();function b(){let[e,t]=(0,v.useState)(!1);return(0,y.jsx)(y.Fragment,{children:(0,y.jsx)(d,{pressed:e,onPressedChange:t,children:(0,y.jsx)(a,{})})})}function x(){let[e,t]=(0,v.useState)([`bold`]);return(0,y.jsx)(y.Fragment,{children:(0,y.jsxs)(f,{value:e,onValueChange:t,children:[(0,y.jsx)(u,{value:`bold`,children:(0,y.jsx)(a,{})}),(0,y.jsx)(u,{value:`italic`,children:(0,y.jsx)(o,{})}),(0,y.jsx)(u,{value:`underline`,children:(0,y.jsx)(g,{})}),(0,y.jsx)(u,{value:`left`,children:(0,y.jsx)(h,{})}),(0,y.jsx)(u,{value:`center`,children:(0,y.jsx)(p,{})}),(0,y.jsx)(u,{value:`right`,children:(0,y.jsx)(m,{})})]})})}var S=`import { useState } from 'react';
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
+import { Toggle } from '@/components/ui/toggle';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+
+export function SingleToggle() {
+	const [pressed, setPressed] = useState(false);
+	return (
+		<>
+			<Toggle pressed={pressed} onPressedChange={setPressed}>
+								<Bold />
+							</Toggle>
+		</>
+	);
+}
+
+export function MultipleSelectGroup() {
+	const [marks, setMarks] = useState<string[]>(['bold']);
+	return (
+		<>
+			<ToggleGroup value={marks} onValueChange={setMarks}>
+								<ToggleGroupItem value="bold"><Bold /></ToggleGroupItem>
+								<ToggleGroupItem value="italic"><Italic /></ToggleGroupItem>
+								<ToggleGroupItem value="underline"><Underline /></ToggleGroupItem>
+								<ToggleGroupItem value="left"><AlignLeft /></ToggleGroupItem>
+								<ToggleGroupItem value="center"><AlignCenter /></ToggleGroupItem>
+								<ToggleGroupItem value="right"><AlignRight /></ToggleGroupItem>
+							</ToggleGroup>
+		</>
+	);
+}
+`;function C(e){return _||T(`Examples`,!1),x||T(`Examples.MultipleSelectGroup`,!0),b||T(`Examples.SingleToggle`,!0),(0,y.jsx)(n,{title:`UI · Toggle + ToggleGroup`,description:`Single toggle + radio/multiple group.`,layer:`ui`,status:`ready`,children:(0,y.jsxs)(r,{title:`Examples`,id:`examples`,children:[(0,y.jsx)(i,{name:`SingleToggle`,source:S,children:(0,y.jsx)(b,{})}),(0,y.jsx)(i,{name:`MultipleSelectGroup`,source:S,children:(0,y.jsx)(x,{})})]})})}function w(e={}){let{wrapper:t}=e.components||{};return t?(0,y.jsx)(t,{...e,children:(0,y.jsx)(C,{...e})}):C(e)}function T(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{w as default};

package/dist/showcase/assets/trash-2-B0_GprQM.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B-Z7p0So.js";var t=e(`trash-2`,[[`path`,{d:`M10 11v6`,key:`nco0om`}],[`path`,{d:`M14 11v6`,key:`outv1u`}],[`path`,{d:`M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6`,key:`miytrc`}],[`path`,{d:`M3 6h18`,key:`d0wm0j`}],[`path`,{d:`M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2`,key:`e791ji`}]]);export{t};

package/dist/showcase/assets/trending-up-B202l1b6.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B-Z7p0So.js";var t=e(`trending-up`,[[`path`,{d:`M16 7h6v6`,key:`box55l`}],[`path`,{d:`m22 7-8.5 8.5-5-5L2 17`,key:`1t1m79`}]]);export{t};

package/dist/showcase/assets/truck-Bl1pNrHi.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B-Z7p0So.js";var t=e(`truck`,[[`path`,{d:`M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2`,key:`wrbu53`}],[`path`,{d:`M15 18H9`,key:`1lyqi6`}],[`path`,{d:`M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14`,key:`lysw3i`}],[`circle`,{cx:`17`,cy:`18`,r:`2`,key:`332jqn`}],[`circle`,{cx:`7`,cy:`18`,r:`2`,key:`19iecd`}]]);export{t};

package/dist/showcase/assets/typography-DEtOxBlR.js

@@ -0,0 +1,214 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{_r as t,cr as n,gr as r,hr as i,sr as a,t as o,vr as s}from"./example-DPfw-R7_.js";import{a as c}from"./index-B-Z7p0So.js";import{t as l}from"./props-table-BzUnIcv-.js";import{t as u}from"./label-MdV7pglj.js";import{t as d}from"./text-link--EyGasJN.js";var f=c(),p={primary:`bg-primary text-primary-foreground`,success:`bg-success text-success-foreground`,error:`bg-destructive text-destructive-foreground`,warning:`bg-warning text-warning-foreground`},m={primary:`decoration-primary`,success:`decoration-success`,error:`decoration-destructive`,warning:`decoration-warning`};function h({content:e,variant:t=`primary`}){return(0,f.jsx)(`span`,{className:s(`px-1.5 py-0.5 rounded-sm`,p[t]),children:e})}function g({content:e,variant:t=`primary`}){return(0,f.jsx)(`span`,{className:s(`underline underline-offset-4 decoration-2`,m[t]),children:e})}function _({children:e,...n}){return(0,f.jsx)(`p`,{className:`__html_content`,dangerouslySetInnerHTML:{__html:t(typeof e==`string`?e:``)},...n})}var v=e({DangerousHTMLExample:()=>L,HeadingTags:()=>C,HeadingWithSubHeading:()=>w,HighLightExample:()=>F,LabelExample:()=>M,RealisticArticle:()=>R,TextAlignment:()=>k,TextContentAndHTML:()=>A,TextLineHeights:()=>O,TextLinkSizes:()=>P,TextLinkVariants:()=>N,TextSizes:()=>T,TextTags:()=>j,TextTypes:()=>E,TextWeights:()=>D,UnderlineExample:()=>I}),y=[`xxs`,`xs`,`sm`,`base`,`lg`,`xl`],b=[`main`,`inverse`,`secondary`,`discrete`,`error`,`success`,`primary`],x=[`regular`,`medium`,`semibold`,`bold`],S=[`none`,`tight`,`snug`,`normal`,`relaxed`,`loose`];function C(){return(0,f.jsx)(`div`,{className:`flex flex-col gap-3 w-full`,children:[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`].map(e=>(0,f.jsxs)(i,{tag:e,children:[e.toUpperCase(),` — The quick brown fox`]},e))})}function w(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-6 w-full`,children:[(0,f.jsx)(i,{tag:`h2`,subHeading:`A short supporting line beneath the heading.`,children:`Section title`}),(0,f.jsx)(i,{tag:`h3`,subHeading:`Centered subheading.`,align:`center`,children:`Centered`}),(0,f.jsx)(i,{tag:`h3`,subHeading:`Right-aligned subheading.`,align:`right`,children:`Right`})]})}function T(){return(0,f.jsx)(`div`,{className:`flex flex-col gap-2 w-full`,children:y.map(e=>(0,f.jsxs)(r,{size:e,children:[e,`: The quick brown fox jumps over the lazy dog.`]},e))})}function E(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-2 w-full`,children:[b.filter(e=>e!==`inverse`).map(e=>(0,f.jsxs)(r,{type:e,children:[`type="`,e,`" — sample text`]},e)),(0,f.jsx)(`div`,{className:`rounded-md bg-foreground p-3`,children:(0,f.jsx)(r,{type:`inverse`,children:`type="inverse" — on dark background`})})]})}function D(){return(0,f.jsx)(`div`,{className:`flex flex-col gap-2 w-full`,children:x.map(e=>(0,f.jsxs)(r,{weight:e,children:[`weight=`,e,` — sample text`]},e))})}function O(){return(0,f.jsx)(`div`,{className:`flex flex-col gap-3 w-full`,children:S.map(e=>(0,f.jsx)(`div`,{className:`rounded border border-dashed border-border p-2`,children:(0,f.jsxs)(r,{lineHeight:e,children:[`lineHeight="`,e,`" — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`]})},e))})}function k(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-2 w-full`,children:[(0,f.jsx)(r,{align:`left`,children:`Left aligned text`}),(0,f.jsx)(r,{align:`center`,children:`Center aligned text`}),(0,f.jsx)(r,{align:`right`,children:`Right aligned text`})]})}function A(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-2 w-full`,children:[(0,f.jsx)(r,{content:`Rendered via the content prop`}),(0,f.jsx)(r,{asHTML:!0,content:`<strong>Sanitised</strong> HTML — <script>alert(1)<\/script> is stripped.`})]})}function j(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-2 w-full`,children:[(0,f.jsx)(r,{tag:`p`,children:`tag="p" (default)`}),(0,f.jsx)(r,{tag:`div`,children:`tag="div"`}),(0,f.jsx)(r,{tag:`span`,children:`tag="span" — flows inline`})]})}function M(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-3 w-full max-w-sm`,children:[(0,f.jsxs)(`div`,{className:`space-y-1`,children:[(0,f.jsx)(u,{children:`Email address`}),(0,f.jsx)(`input`,{className:`w-full rounded border border-border bg-background px-2 py-1.5 text-sm`,placeholder:`you@example.com`})]}),(0,f.jsxs)(`div`,{className:`space-y-1`,children:[(0,f.jsx)(u,{className:`text-primary`,children:`Custom-coloured label`}),(0,f.jsx)(`input`,{className:`w-full rounded border border-border bg-background px-2 py-1.5 text-sm`})]})]})}function N(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-2 w-full`,children:[(0,f.jsx)(d,{href:`#`,children:`Default link`}),(0,f.jsx)(d,{href:`#`,underline:!1,children:`Without underline`}),(0,f.jsx)(d,{href:`#`,type:`primary`,weight:`semibold`,children:`Primary semibold`}),(0,f.jsx)(d,{href:`#`,type:`error`,children:`Destructive link`}),(0,f.jsx)(d,{href:`#`,type:`success`,children:`Success link`})]})}function P(){return(0,f.jsxs)(`div`,{className:`flex flex-wrap items-baseline gap-4 w-full`,children:[(0,f.jsx)(d,{href:`#`,size:`xs`,children:`xs`}),(0,f.jsx)(d,{href:`#`,size:`sm`,children:`sm`}),(0,f.jsx)(d,{href:`#`,size:`base`,children:`base`}),(0,f.jsx)(d,{href:`#`,size:`lg`,children:`lg`}),(0,f.jsx)(d,{href:`#`,size:`xl`,children:`xl`})]})}function F(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,f.jsxs)(r,{children:[`Default `,(0,f.jsx)(h,{content:`primary`}),` highlighted text`]}),(0,f.jsxs)(r,{children:[`Variant `,(0,f.jsx)(h,{content:`success`,variant:`success`}),` highlight`]}),(0,f.jsxs)(r,{children:[`Variant `,(0,f.jsx)(h,{content:`warning`,variant:`warning`}),` highlight`]}),(0,f.jsxs)(r,{children:[`Variant `,(0,f.jsx)(h,{content:`error`,variant:`error`}),` highlight`]})]})}function I(){return(0,f.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,f.jsx)(r,{children:(0,f.jsx)(g,{content:`primary underline`})}),(0,f.jsx)(r,{children:(0,f.jsx)(g,{content:`success underline`,variant:`success`})}),(0,f.jsx)(r,{children:(0,f.jsx)(g,{content:`warning underline`,variant:`warning`})}),(0,f.jsx)(r,{children:(0,f.jsx)(g,{content:`error underline`,variant:`error`})})]})}function L(){return(0,f.jsx)(`div`,{className:`w-full max-w-md`,children:(0,f.jsx)(_,{children:`<strong>Sanitised</strong> HTML — &lt;script&gt;alert(1)&lt;/script&gt; tags are stripped before render.`})})}function R(){return(0,f.jsxs)(`article`,{className:`w-full max-w-2xl space-y-4`,children:[(0,f.jsx)(i,{tag:`h1`,subHeading:`Published 3 May 2026 by Sarah Smitha`,children:`Designing for clarity at scale`}),(0,f.jsx)(r,{size:`base`,lineHeight:`relaxed`,children:`When the product surface grows past a single screen, every label, every caption, and every empty state has to pull double duty. Hierarchy stops being a nice-to-have — it becomes the whole point.`}),(0,f.jsx)(i,{tag:`h2`,children:`The three rules`}),(0,f.jsxs)(r,{lineHeight:`relaxed`,children:[`One typeface. One scale. One weight per role.`,(0,f.jsx)(d,{href:`#`,type:`primary`,className:`ml-1`,children:`Read the full essay`}),`.`]})]})}var z=`import Heading from '@/components/typography/heading';
+import { Text } from '@/components/typography/text';
+import Label from '@/components/typography/label';
+import TextLink from '@/components/typography/text-link';
+import { HighLight, Underline, DangerousHTML } from '@/components/typography/typography';
+
+const SIZES = ['xxs', 'xs', 'sm', 'base', 'lg', 'xl'] as const;
+const TYPES = ['main', 'inverse', 'secondary', 'discrete', 'error', 'success', 'primary'] as const;
+const WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const;
+const LINE_HEIGHTS = ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'] as const;
+
+export function HeadingTags() {
+	return (
+		<div className="flex flex-col gap-3 w-full">
+			{(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).map((tag) => (
+				<Heading key={tag} tag={tag}>{tag.toUpperCase()} — The quick brown fox</Heading>
+			))}
+		</div>
+	);
+}
+
+export function HeadingWithSubHeading() {
+	return (
+		<div className="flex flex-col gap-6 w-full">
+			<Heading tag="h2" subHeading="A short supporting line beneath the heading.">
+				Section title
+			</Heading>
+			<Heading tag="h3" subHeading="Centered subheading." align="center">
+				Centered
+			</Heading>
+			<Heading tag="h3" subHeading="Right-aligned subheading." align="right">
+				Right
+			</Heading>
+		</div>
+	);
+}
+
+export function TextSizes() {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			{SIZES.map((size) => (
+				<Text key={size} size={size}>
+					{size}: The quick brown fox jumps over the lazy dog.
+				</Text>
+			))}
+		</div>
+	);
+}
+
+export function TextTypes() {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			{TYPES.filter((t) => t !== 'inverse').map((type) => (
+				<Text key={type} type={type}>
+					type=&quot;{type}&quot; — sample text
+				</Text>
+			))}
+			<div className="rounded-md bg-foreground p-3">
+				<Text type="inverse">type=&quot;inverse&quot; — on dark background</Text>
+			</div>
+		</div>
+	);
+}
+
+export function TextWeights() {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			{WEIGHTS.map((w) => (
+				<Text key={w} weight={w}>weight={w} — sample text</Text>
+			))}
+		</div>
+	);
+}
+
+export function TextLineHeights() {
+	return (
+		<div className="flex flex-col gap-3 w-full">
+			{LINE_HEIGHTS.map((lh) => (
+				<div key={lh} className="rounded border border-dashed border-border p-2">
+					<Text lineHeight={lh}>
+						lineHeight=&quot;{lh}&quot; — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+						Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+					</Text>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function TextAlignment() {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			<Text align="left">Left aligned text</Text>
+			<Text align="center">Center aligned text</Text>
+			<Text align="right">Right aligned text</Text>
+		</div>
+	);
+}
+
+export function TextContentAndHTML() {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			<Text content="Rendered via the content prop" />
+			<Text asHTML content="<strong>Sanitised</strong> HTML — &lt;script&gt;alert(1)&lt;/script&gt; is stripped." />
+		</div>
+	);
+}
+
+export function TextTags() {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			<Text tag="p">tag=&quot;p&quot; (default)</Text>
+			<Text tag="div">tag=&quot;div&quot;</Text>
+			<Text tag="span">tag=&quot;span&quot; — flows inline</Text>
+		</div>
+	);
+}
+
+export function LabelExample() {
+	return (
+		<div className="flex flex-col gap-3 w-full max-w-sm">
+			<div className="space-y-1">
+				<Label>Email address</Label>
+				<input className="w-full rounded border border-border bg-background px-2 py-1.5 text-sm" placeholder="you@example.com" />
+			</div>
+			<div className="space-y-1">
+				<Label className="text-primary">Custom-coloured label</Label>
+				<input className="w-full rounded border border-border bg-background px-2 py-1.5 text-sm" />
+			</div>
+		</div>
+	);
+}
+
+export function TextLinkVariants() {
+	return (
+		<div className="flex flex-col gap-2 w-full">
+			<TextLink href="#">Default link</TextLink>
+			<TextLink href="#" underline={false}>Without underline</TextLink>
+			<TextLink href="#" type="primary" weight="semibold">Primary semibold</TextLink>
+			<TextLink href="#" type="error">Destructive link</TextLink>
+			<TextLink href="#" type="success">Success link</TextLink>
+		</div>
+	);
+}
+
+export function TextLinkSizes() {
+	return (
+		<div className="flex flex-wrap items-baseline gap-4 w-full">
+			<TextLink href="#" size="xs">xs</TextLink>
+			<TextLink href="#" size="sm">sm</TextLink>
+			<TextLink href="#" size="base">base</TextLink>
+			<TextLink href="#" size="lg">lg</TextLink>
+			<TextLink href="#" size="xl">xl</TextLink>
+		</div>
+	);
+}
+
+export function HighLightExample() {
+	return (
+		<div className="flex flex-col gap-2">
+			<Text>Default <HighLight content="primary" /> highlighted text</Text>
+			<Text>Variant <HighLight content="success" variant="success" /> highlight</Text>
+			<Text>Variant <HighLight content="warning" variant="warning" /> highlight</Text>
+			<Text>Variant <HighLight content="error" variant="error" /> highlight</Text>
+		</div>
+	);
+}
+
+export function UnderlineExample() {
+	return (
+		<div className="flex flex-col gap-2">
+			<Text><Underline content="primary underline" /></Text>
+			<Text><Underline content="success underline" variant="success" /></Text>
+			<Text><Underline content="warning underline" variant="warning" /></Text>
+			<Text><Underline content="error underline" variant="error" /></Text>
+		</div>
+	);
+}
+
+export function DangerousHTMLExample() {
+	return (
+		<div className="w-full max-w-md">
+			<DangerousHTML>{'<strong>Sanitised</strong> HTML — &lt;script&gt;alert(1)&lt;/script&gt; tags are stripped before render.'}</DangerousHTML>
+		</div>
+	);
+}
+
+export function RealisticArticle() {
+	return (
+		<article className="w-full max-w-2xl space-y-4">
+			<Heading tag="h1" subHeading="Published 3 May 2026 by Sarah Smitha">
+				Designing for clarity at scale
+			</Heading>
+			<Text size="base" lineHeight="relaxed">
+				When the product surface grows past a single screen, every label, every
+				caption, and every empty state has to pull double duty. Hierarchy stops
+				being a nice-to-have — it becomes the whole point.
+			</Text>
+			<Heading tag="h2">The three rules</Heading>
+			<Text lineHeight="relaxed">
+				One typeface. One scale. One weight per role.
+				<TextLink href="#" type="primary" className="ml-1">Read the full essay</TextLink>.
+			</Text>
+		</article>
+	);
+}
+`;function B(e){let t={code:`code`,p:`p`,...e.components};return v||H(`Examples`,!1),L||H(`Examples.DangerousHTMLExample`,!0),C||H(`Examples.HeadingTags`,!0),w||H(`Examples.HeadingWithSubHeading`,!0),F||H(`Examples.HighLightExample`,!0),M||H(`Examples.LabelExample`,!0),R||H(`Examples.RealisticArticle`,!0),k||H(`Examples.TextAlignment`,!0),A||H(`Examples.TextContentAndHTML`,!0),O||H(`Examples.TextLineHeights`,!0),P||H(`Examples.TextLinkSizes`,!0),N||H(`Examples.TextLinkVariants`,!0),T||H(`Examples.TextSizes`,!0),j||H(`Examples.TextTags`,!0),E||H(`Examples.TextTypes`,!0),D||H(`Examples.TextWeights`,!0),I||H(`Examples.UnderlineExample`,!0),(0,f.jsxs)(n,{title:`Typography`,description:`Heading, Text, Label, and TextLink — the four typography primitives every higher layer composes from.`,layer:`base`,status:`ready`,sourcePath:`src/components/typography`,children:[(0,f.jsx)(a,{title:`Overview`,id:`overview`,children:(0,f.jsxs)(t.p,{children:[`The typography layer is intentionally tiny. `,(0,f.jsx)(t.code,{children:`Heading`}),` (h1–h6, optional
+`,(0,f.jsx)(t.code,{children:`subHeading`}),`), `,(0,f.jsx)(t.code,{children:`Text`}),` (six sizes, seven types, four weights, optional `,(0,f.jsx)(t.code,{children:`asHTML`}),`),
+`,(0,f.jsx)(t.code,{children:`Label`}),` (form captions), and `,(0,f.jsx)(t.code,{children:`TextLink`}),` (anchor sibling of `,(0,f.jsx)(t.code,{children:`Text`}),`) cover every
+typographic decision in the library. Anything outside the `,(0,f.jsx)(t.code,{children:`typography/`}),` folder
+that reaches for a font-size class is doing it wrong.`]})}),(0,f.jsxs)(a,{title:`Heading`,id:`heading`,children:[(0,f.jsx)(o,{name:`HeadingTags`,source:z,children:(0,f.jsx)(C,{})}),(0,f.jsx)(o,{name:`HeadingWithSubHeading`,source:z,children:(0,f.jsx)(w,{})})]}),(0,f.jsx)(a,{title:`Text — sizes`,id:`text-sizes`,children:(0,f.jsx)(o,{name:`TextSizes`,source:z,children:(0,f.jsx)(T,{})})}),(0,f.jsxs)(a,{title:`Text — types & weights`,id:`text-types`,children:[(0,f.jsx)(o,{name:`TextTypes`,source:z,children:(0,f.jsx)(E,{})}),(0,f.jsx)(o,{name:`TextWeights`,source:z,children:(0,f.jsx)(D,{})})]}),(0,f.jsxs)(a,{title:`Text — layout`,id:`text-layout`,children:[(0,f.jsx)(o,{name:`TextLineHeights`,source:z,children:(0,f.jsx)(O,{})}),(0,f.jsx)(o,{name:`TextAlignment`,source:z,children:(0,f.jsx)(k,{})}),(0,f.jsx)(o,{name:`TextTags`,source:z,children:(0,f.jsx)(j,{})})]}),(0,f.jsx)(a,{title:`Text — content prop & HTML`,id:`text-html`,children:(0,f.jsx)(o,{name:`TextContentAndHTML`,source:z,children:(0,f.jsx)(A,{})})}),(0,f.jsx)(a,{title:`Label`,id:`label`,children:(0,f.jsx)(o,{name:`LabelExample`,source:z,children:(0,f.jsx)(M,{})})}),(0,f.jsxs)(a,{title:`TextLink`,id:`text-link`,children:[(0,f.jsx)(o,{name:`TextLinkVariants`,source:z,children:(0,f.jsx)(N,{})}),(0,f.jsx)(o,{name:`TextLinkSizes`,source:z,children:(0,f.jsx)(P,{})})]}),(0,f.jsxs)(a,{title:`Inline helpers — HighLight & Underline`,id:`inline-helpers`,children:[(0,f.jsxs)(t.p,{children:[`The `,(0,f.jsx)(t.code,{children:`HighLight`}),` and `,(0,f.jsx)(t.code,{children:`Underline`}),` helpers (from `,(0,f.jsx)(t.code,{children:`@/components/typography/typography`}),`)
+render small inline accents in four variants — `,(0,f.jsx)(t.code,{children:`primary`}),`, `,(0,f.jsx)(t.code,{children:`success`}),`,
+`,(0,f.jsx)(t.code,{children:`warning`}),`, `,(0,f.jsx)(t.code,{children:`error`}),`. `,(0,f.jsx)(t.code,{children:`DangerousHTML`}),` is the sanitised escape-hatch when you
+must render server-trusted HTML.`]}),(0,f.jsx)(o,{name:`HighLightExample`,source:z,children:(0,f.jsx)(F,{})}),(0,f.jsx)(o,{name:`UnderlineExample`,source:z,children:(0,f.jsx)(I,{})}),(0,f.jsx)(o,{name:`DangerousHTMLExample`,source:z,children:(0,f.jsx)(L,{})})]}),(0,f.jsx)(a,{title:`Realistic usage`,id:`realistic`,children:(0,f.jsx)(o,{name:`RealisticArticle`,source:z,children:(0,f.jsx)(R,{})})}),(0,f.jsxs)(a,{title:`API`,id:`api`,children:[(0,f.jsx)(l,{component:`Heading`}),(0,f.jsx)(l,{component:`Text`}),(0,f.jsx)(l,{component:`Label`}),(0,f.jsx)(l,{component:`TextLink`})]})]})}function V(e={}){let{wrapper:t}=e.components||{};return t?(0,f.jsx)(t,{...e,children:(0,f.jsx)(B,{...e})}):B(e)}function H(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/ui-badge-n4RA0J5b.js

@@ -0,0 +1,28 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{cr as t,sr as n,t as r,ur as i}from"./example-DPfw-R7_.js";import{a}from"./index-B-Z7p0So.js";import{n as o}from"./PreviewLayout-BHemtKEf.js";var s=e({InContext:()=>u,Variants:()=>l}),c=a();function l(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsxs)(o,{children:[(0,c.jsx)(i,{children:`default`}),(0,c.jsx)(i,{variant:`secondary`,children:`secondary`}),(0,c.jsx)(i,{variant:`destructive`,children:`destructive`}),(0,c.jsx)(i,{variant:`outline`,children:`outline`})]})})}function u(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsxs)(o,{children:[(0,c.jsxs)(`span`,{className:`text-sm`,children:[`Status: `,(0,c.jsx)(i,{variant:`secondary`,children:`draft`})]}),(0,c.jsxs)(`span`,{className:`text-sm`,children:[`Status: `,(0,c.jsx)(i,{children:`live`})]}),(0,c.jsxs)(`span`,{className:`text-sm`,children:[`Status: `,(0,c.jsx)(i,{variant:`destructive`,children:`expired`})]})]})})}var d=`import { Badge } from '@/components/ui/badge';
+import { Row } from '../../PreviewLayout';
+
+export function Variants() {
+	return (
+		<>
+			<Row>
+								<Badge>default</Badge>
+								<Badge variant="secondary">secondary</Badge>
+								<Badge variant="destructive">destructive</Badge>
+								<Badge variant="outline">outline</Badge>
+							</Row>
+		</>
+	);
+}
+
+export function InContext() {
+	return (
+		<>
+			<Row>
+								<span className="text-sm">Status: <Badge variant="secondary">draft</Badge></span>
+								<span className="text-sm">Status: <Badge>live</Badge></span>
+								<span className="text-sm">Status: <Badge variant="destructive">expired</Badge></span>
+							</Row>
+		</>
+	);
+}
+`;function f(e){return s||m(`Examples`,!1),u||m(`Examples.InContext`,!0),l||m(`Examples.Variants`,!0),(0,c.jsx)(t,{title:`UI · Badge`,description:`shadcn badge primitive (no theming wrapper).`,layer:`ui`,status:`ready`,children:(0,c.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,c.jsx)(r,{name:`Variants`,source:d,children:(0,c.jsx)(l,{})}),(0,c.jsx)(r,{name:`InContext`,source:d,children:(0,c.jsx)(u,{})})]})})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(f,{...e})}):f(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{p as default};