admin-ui-starter-kit 0.4.4 → 0.5.0

package/dist/showcase/assets/commerce-extras-CVVnDyB5.js

@@ -0,0 +1,189 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Lr as a,Rr as o,Ur as s,jr as c,r as l,t as u}from"./example-CbMg22fx.js";import{t as d}from"./calendar-BcfonDWf.js";import{t as f}from"./chevron-right-0nQcAzMY.js";import{t as p}from"./circle-DswWOvJq.js";import{t as m}from"./credit-card-CoIW8_5L.js";import{t as h}from"./gift-DBIsZsVg.js";import{t as g}from"./map-pin-Cf_uffQY.js";import{t as _}from"./package-C9EnWNEP.js";import{t as v}from"./receipt-CxNJvyC5.js";import{t as ee}from"./rotate-ccw-ZkWMrEMJ.js";import{t as y}from"./shopping-bag-oxYbVKoz.js";import{t as b}from"./sparkles-bMR7rbuC.js";import{t as te}from"./star-0BUJBDj_.js";import{t as ne}from"./trash-2-xwHdvAn6.js";import{t as re}from"./x-BpAEmld2.js";import{t as ie}from"./zap-E8G3kjwh.js";import{a as x,k as S,n as C,s as ae}from"./index-DNH0y0r-.js";import{t as w}from"./props-table-DSdjPLVr.js";import{t as T}from"./icon-badge-IP9B3lQm.js";import{t as E}from"./smart-card-DpvRHqI9.js";import{t as oe}from"./input-DcQuALxy.js";import{t as D}from"./separator-kwh2KDqD.js";import{n as se}from"./form-field-Dtn_NArM.js";import{t as O}from"./inline-stat-B2s_ozrX.js";import{a as k,c as A,i as j,n as M,o as ce,r as N,t as P,u as F}from"./item-CdgzxWcL.js";var le=x(`calendar-clock`,[[`path`,{d:`M16 14v2.2l1.6 1`,key:`fo4ql5`}],[`path`,{d:`M16 2v4`,key:`4m81vk`}],[`path`,{d:`M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5`,key:`1osxxc`}],[`path`,{d:`M3 10h5`,key:`r794hk`}],[`path`,{d:`M8 2v4`,key:`1cmpym`}],[`circle`,{cx:`16`,cy:`16`,r:`6`,key:`qoo3c4`}]]),ue=x(`pen`,[[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}]]),de=x(`repeat`,[[`path`,{d:`m17 2 4 4-4 4`,key:`nntrym`}],[`path`,{d:`M3 11v-1a4 4 0 0 1 4-4h14`,key:`84bu3i`}],[`path`,{d:`m7 22-4-4 4-4`,key:`1wqhfi`}],[`path`,{d:`M21 13v1a4 4 0 0 1-4 4H3`,key:`1rx37r`}]]),fe=x(`ticket-percent`,[[`path`,{d:`M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z`,key:`1l48ns`}],[`path`,{d:`M9 9h.01`,key:`1q5me6`}],[`path`,{d:`m15 9-6 6`,key:`1uzhvr`}],[`path`,{d:`M15 15h.01`,key:`lqbp3k`}]]),pe={title:`Tax Breakdown`,subtotal:`Subtotal`,totalTax:`Total Tax`,total:`Total`},I=ae();function me({subtotal:e,taxes:t,totalTax:n,total:r,className:i,strings:a}){let s=S(pe,a);return(0,I.jsxs)(E,{icon:(0,I.jsx)(v,{className:`size-4`}),title:s.title,className:C(`tax-breakdown--component w-full`,i),children:[(0,I.jsx)(O,{label:s.subtotal,value:e,mono:!0,labelClassName:`text-sm`,valueClassName:`text-sm font-medium`}),(0,I.jsxs)(`div`,{className:`mt-3 space-y-1.5 rounded-lg border border-border/50 bg-muted/30 px-3 py-2.5`,children:[t.map((e,t)=>(0,I.jsxs)(`div`,{className:`flex items-baseline justify-between gap-3`,children:[(0,I.jsxs)(`div`,{className:`flex items-baseline gap-1.5 min-w-0`,children:[(0,I.jsx)(o,{size:`xs`,className:`truncate`,children:e.label}),!!e.rate&&(0,I.jsx)(o,{tag:`span`,size:`xxs`,type:`discrete`,className:`shrink-0`,children:e.rate})]}),(0,I.jsx)(o,{tag:`span`,size:`xs`,weight:`medium`,className:`tabular-nums shrink-0`,children:e.amount})]},e.id??`${e.label}-${t}`)),!!n&&t.length>1&&(0,I.jsx)(O,{label:s.totalTax,value:n,mono:!0,className:`border-t border-border/50 pt-1.5 mt-0.5`,labelClassName:`text-xs font-medium`,valueClassName:`text-xs font-semibold`})]}),(0,I.jsx)(D,{className:`my-3`}),(0,I.jsx)(O,{label:s.total,value:r,mono:!0,labelClassName:`text-sm font-semibold`,valueClassName:`text-lg font-bold`})]})}me.displayName=`TaxBreakdownCard`;var he={title:`Subscription`,plan:`Plan`,nextBilling:`Next billing`,perks:`Included`,manage:`Manage`,upgrade:`Upgrade`};function L({planName:e,priceLabel:t,cycleLabel:n,nextBillingDate:r,statusLabel:i,perks:u=[],onManage:p,onUpgrade:m,className:h,strings:g}){let _=S(he,g);return(0,I.jsxs)(E,{icon:(0,I.jsx)(de,{className:`size-4`}),title:_.title,headerEnd:i?(0,I.jsx)(c,{variant:`success`,children:i}):null,className:C(`subscription-summary--component w-full`,h),children:[(0,I.jsxs)(`div`,{className:`rounded-lg border border-border/60 bg-muted/30 p-4`,children:[(0,I.jsx)(o,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:_.plan}),(0,I.jsx)(a,{tag:`h3`,className:`mt-1 text-xl font-semibold tracking-tight border-none pb-0`,children:e}),(0,I.jsxs)(`div`,{className:`mt-1 flex items-baseline gap-1`,children:[(0,I.jsx)(o,{tag:`span`,size:`xl`,weight:`bold`,className:`tabular-nums`,children:t}),(0,I.jsx)(o,{type:`secondary`,children:n})]})]}),(0,I.jsxs)(`div`,{className:`mt-3 flex items-center justify-between rounded-md bg-card px-1`,children:[(0,I.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,I.jsx)(d,{className:`size-3.5 text-muted-foreground`}),(0,I.jsx)(o,{size:`xs`,type:`secondary`,children:_.nextBilling})]}),(0,I.jsx)(o,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:r})]}),u.length>0&&(0,I.jsxs)(`div`,{className:`mt-4 space-y-2`,children:[(0,I.jsx)(o,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:_.perks}),(0,I.jsx)(ce,{children:u.map((e,t)=>(0,I.jsxs)(P,{size:`xs`,className:`px-0`,children:[(0,I.jsx)(A,{children:(0,I.jsx)(T,{icon:e.icon??s,tone:`success`,size:`xs`})}),(0,I.jsx)(N,{children:(0,I.jsx)(F,{bold:!1,children:e.label})})]},`${e.label}-${t}`))})]}),(p||m)&&(0,I.jsxs)(`div`,{className:`mt-4 flex items-center gap-2`,children:[!!p&&(0,I.jsx)(l,{variant:`secondary`,buttonStyle:`outline`,onClick:p,className:`flex-1`,children:_.manage}),!!m&&(0,I.jsxs)(l,{variant:`primary`,onClick:m,className:`flex-1`,children:[_.upgrade,(0,I.jsx)(f,{className:`ml-1 size-3.5`})]})]})]})}L.displayName=`SubscriptionSummaryCard`;var ge={title:`Refund Status`,requested:`Requested`,approved:`Approved`,processing:`Processing`,completed:`Completed`,amount:`Refund amount`,reason:`Reason`,eta:`Expected by`,method:`Refund to`},R=[`requested`,`approved`,`processing`,`completed`];function _e({stage:e,amount:t,reason:n,method:r,eta:i,requestedAt:c,className:l,strings:u}){let d=S(ge,u),f=R.indexOf(e);return(0,I.jsxs)(E,{icon:(0,I.jsx)(ee,{className:`size-4`}),title:d.title,className:C(`refund-status--component w-full`,l),children:[(0,I.jsxs)(`div`,{className:`rounded-lg bg-muted/40 px-4 py-3`,children:[(0,I.jsx)(o,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:d.amount}),(0,I.jsx)(a,{tag:`h3`,className:`text-3xl tabular-nums tracking-tight`,children:t}),!!c&&(0,I.jsxs)(o,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:[d.requested,`: `,c]})]}),(0,I.jsx)(`div`,{className:`mt-4 flex items-center justify-between`,children:R.map((e,t)=>{let n=t<=f,r=t===f;return(0,I.jsxs)(`div`,{className:`flex flex-1 flex-col items-center gap-1.5`,children:[(0,I.jsxs)(`div`,{className:`flex w-full items-center`,children:[(0,I.jsx)(`div`,{className:C(`relative flex size-5 shrink-0 items-center justify-center rounded-full`,n?`bg-success text-success-foreground`:`border border-border bg-card text-muted-foreground`,r&&`ring-2 ring-success/30 ring-offset-2 ring-offset-background`),children:n?(0,I.jsx)(s,{className:`size-3`}):(0,I.jsx)(o,{tag:`span`,size:`xxs`,weight:`medium`,className:`tabular-nums`,children:t+1})}),t<R.length-1&&(0,I.jsx)(`div`,{className:C(`h-0.5 flex-1`,t<f?`bg-success`:`bg-border`)})]}),(0,I.jsx)(o,{size:`xxs`,weight:r?`semibold`:`medium`,type:n?`main`:`secondary`,className:`text-center leading-tight`,children:d[e]})]},e)})}),(n||r||i)&&(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(D,{className:`my-4`}),(0,I.jsxs)(`div`,{className:`space-y-2`,children:[!!n&&(0,I.jsx)(O,{label:d.reason,value:n,className:`items-start`,valueClassName:`text-sm font-medium text-right`}),!!r&&(0,I.jsx)(O,{label:d.method,value:r,valueClassName:`text-sm font-medium`}),!!i&&(0,I.jsx)(O,{label:d.eta,value:i,mono:!0,valueClassName:`text-sm font-medium`})]})]})]})}_e.displayName=`RefundStatusCard`;var ve={defaultBadge:`Default`,edit:`Edit`,remove:`Remove`,makeDefault:`Make default`,shipping:`Shipping address`,billing:`Billing address`,pickup:`Pickup address`};function z({kind:e=`shipping`,name:t,line1:n,line2:r,city:i,region:a,postalCode:s,country:l,phone:u,isDefault:d=!1,onEdit:f,onRemove:p,onMakeDefault:m,className:h,strings:_}){let v=S(ve,_),ee={shipping:v.shipping,billing:v.billing,pickup:v.pickup},y=[i,a,s].filter(Boolean).join(`, `),b=[];return f&&b.push({id:`edit`,label:v.edit,icon:(0,I.jsx)(ue,{className:`size-3.5`}),onClick:f}),m&&!d&&b.push({id:`make-default`,label:v.makeDefault,icon:(0,I.jsx)(te,{className:`size-3.5`}),onClick:m}),p&&b.push({id:`remove`,label:v.remove,icon:(0,I.jsx)(ne,{className:`size-3.5`}),onClick:p}),(0,I.jsx)(E,{icon:(0,I.jsx)(g,{className:`size-4`}),title:ee[e],titleSuffix:d?(0,I.jsx)(c,{variant:`primary`,children:v.defaultBadge}):null,actions:b.length>0?b:void 0,className:C(`address-card--component w-full`,h),children:(0,I.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,I.jsx)(o,{weight:`semibold`,children:t}),(0,I.jsx)(o,{children:n}),!!r&&(0,I.jsx)(o,{children:r}),!!y&&(0,I.jsx)(o,{children:y}),(0,I.jsx)(o,{type:`secondary`,children:l}),!!u&&(0,I.jsx)(o,{size:`xs`,type:`secondary`,className:`mt-1.5 tabular-nums`,children:u})]})})}z.displayName=`AddressCard`;var ye={title:`Redeem a gift card`,inputLabel:`Gift card code`,placeholder:`Enter gift card code`,helperText:`Apply one gift card or voucher to this order.`,check:`Check balance`,remove:`Remove`,balance:`Available balance`,applied:`Applied`,notFound:`That gift card code is not valid.`},B=t(n(),1),be=e=>e.toUpperCase();function V({appliedCode:e,balance:t,error:n,loading:r,onCheck:i,onRemove:a,className:u,strings:d}){let f=S(ye,d),p=(0,B.useId)(),[m,g]=(0,B.useState)(``),_=m.trim();return e?(0,I.jsx)(E,{icon:(0,I.jsx)(h,{className:`size-4`}),title:f.title,className:C(`voucher-entry--component w-full`,u),children:(0,I.jsxs)(P,{size:`xs`,variant:`outline`,className:`items-center gap-x-2.5 gap-y-1.5 border-success/30 bg-success/5 px-2.5 py-2`,children:[(0,I.jsx)(A,{children:(0,I.jsx)(T,{icon:s,tone:`success`,size:`sm`,className:`ring-1 ring-success/20`})}),(0,I.jsxs)(N,{className:`min-w-0`,children:[(0,I.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,I.jsx)(F,{className:`max-w-full font-mono tracking-wider`,children:e}),(0,I.jsx)(c,{variant:`success`,size:`xs`,children:f.applied})]}),(0,I.jsx)(j,{clamp:1,children:f.balance})]}),(0,I.jsxs)(k,{className:`border-t border-success/15 pt-1`,children:[(0,I.jsx)(`span`,{}),(0,I.jsxs)(M,{className:`shrink-0 gap-1.5`,children:[!!t&&(0,I.jsx)(o,{tag:`span`,size:`xs`,weight:`semibold`,type:`success`,className:`tabular-nums shrink-0`,children:t}),!!a&&(0,I.jsx)(l,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`icon-xs`,onClick:a,"aria-label":f.remove,className:`size-7 shrink-0 text-muted-foreground hover:text-destructive`,children:(0,I.jsx)(re,{className:`size-3.5`})})]})]})]})}):(0,I.jsx)(E,{icon:(0,I.jsx)(h,{className:`size-4`}),title:f.title,className:C(`voucher-entry--component w-full`,u),children:(0,I.jsx)(`form`,{onSubmit:e=>{e.preventDefault(),_&&i?.(_)},children:(0,I.jsx)(se,{label:f.inputLabel,htmlFor:p,error:n,hint:n?void 0:f.helperText,children:(0,I.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,I.jsx)(`div`,{className:`min-w-[12rem] flex-1`,children:(0,I.jsx)(oe,{id:p,value:m,onChange:e=>g(be(e.target.value)),placeholder:f.placeholder,startIcon:h,autoCapitalize:`characters`,spellCheck:!1,className:`font-mono`,invalid:!!n})}),(0,I.jsx)(l,{type:`submit`,loading:r,disabled:!_,className:`shrink-0`,children:f.check})]})})})})}V.displayName=`VoucherEntryCard`;var xe={title:`Cart`,subtotal:`Subtotal`,tax:`Tax`,shipping:`Shipping`,discount:`Discount`,total:`Total`,checkout:`Checkout`},Se=e=>e.replace(/^[\s−-]+/,``),Ce=e=>[e.productTitle,e.title,e.name].find(e=>!!e?.trim())??e.id,we=e=>[e.imageUrl,e.imageSrc,e.src,e.url].find(e=>!!e?.trim()),Te=e=>e.trim().split(/\s+/).map(e=>e[0]).join(``).slice(0,2).toUpperCase()||e.trim().slice(0,2).toUpperCase();function Ee({title:e}){return(0,I.jsx)(`div`,{"aria-hidden":`true`,className:`flex size-full items-center justify-center rounded-[inherit] bg-muted text-[length:var(--text-xxs)] font-semibold text-muted-foreground ring-1 ring-border/60`,children:Te(e)})}function De({items:e,subtotal:t,tax:n,shipping:r,discount:i,total:a,onCheckout:s,className:c,strings:u}){let d=S(xe,u),f=!!(t||n||r||i);return(0,I.jsxs)(E,{icon:(0,I.jsx)(y,{className:`size-4`}),title:d.title,className:C(`cart-summary--component w-full`,c),children:[(0,I.jsx)(ce,{children:e.map(e=>{let t=Ce(e),n=we(e);return(0,I.jsxs)(P,{className:`cart-summary--item px-0`,children:[(0,I.jsx)(A,{variant:`image`,className:`cart-summary--item-media`,children:n?(0,I.jsx)(`img`,{src:n,alt:e.imageAlt??t}):(0,I.jsx)(Ee,{title:t})}),(0,I.jsxs)(N,{className:`cart-summary--item-content`,children:[(0,I.jsx)(F,{children:t}),!!e.variantTitle&&(0,I.jsx)(j,{clamp:1,children:e.variantTitle})]}),(0,I.jsx)(M,{className:`cart-summary--item-actions`,children:(0,I.jsxs)(`div`,{className:`flex shrink-0 flex-col items-end gap-0.5`,children:[(0,I.jsxs)(o,{tag:`span`,size:`xs`,type:`secondary`,className:`tabular-nums`,children:[`x`,e.qty]}),(0,I.jsx)(o,{tag:`span`,weight:`semibold`,className:`tabular-nums`,children:e.price})]})})]},e.id)})}),!!f&&(0,I.jsxs)(`div`,{className:`mt-3 space-y-1.5 rounded-lg bg-muted/30 px-3 py-2.5`,children:[!!t&&(0,I.jsx)(O,{label:d.subtotal,value:t,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!n&&(0,I.jsx)(O,{label:d.tax,value:n,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!r&&(0,I.jsx)(O,{label:d.shipping,value:r,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!i&&(0,I.jsx)(O,{label:d.discount,value:`−${Se(i)}`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold text-success`})]}),(0,I.jsx)(D,{className:`my-3`}),(0,I.jsx)(O,{label:d.total,value:a,mono:!0,labelClassName:`text-sm font-semibold`,valueClassName:`text-lg font-bold`}),!!s&&(0,I.jsx)(l,{onClick:s,fullWidth:!0,className:`mt-4`,children:d.checkout})]})}De.displayName=`CartSummaryCard`;var Oe={title:`Have a code?`,placeholder:`Enter coupon code`,apply:`Apply`,remove:`Remove`,applied:`Applied`,invalid:`That code is not valid`},ke=e=>e.replace(/^[\s−-]+/,``),Ae=e=>e.toUpperCase();function H({appliedCode:e,appliedDiscount:t,error:n,onApply:r,onRemove:i,loading:a,className:c,strings:u}){let d=S(Oe,u),[f,p]=(0,B.useState)(``),m=f.trim();return e?(0,I.jsx)(E,{icon:(0,I.jsx)(fe,{className:`size-4`}),title:d.title,className:C(`coupon-input--component w-full`,c),children:(0,I.jsxs)(P,{size:`xs`,variant:`muted`,className:`items-center gap-x-2.5 gap-y-1.5 border border-success/30 bg-success/8 px-2.5 py-2`,children:[(0,I.jsx)(A,{children:(0,I.jsx)(T,{icon:s,tone:`success`,size:`sm`,className:`ring-1 ring-success/20`})}),(0,I.jsxs)(N,{className:`min-w-0`,children:[(0,I.jsx)(F,{className:`max-w-full font-mono tracking-wider`,children:e}),(0,I.jsx)(j,{className:`uppercase tracking-wide`,clamp:1,children:d.applied})]}),(0,I.jsxs)(k,{className:`border-t border-success/15 pt-1`,children:[(0,I.jsx)(`span`,{}),(0,I.jsxs)(M,{className:`shrink-0 gap-1.5`,children:[!!t&&(0,I.jsxs)(o,{tag:`span`,size:`xs`,weight:`semibold`,type:`success`,className:`tabular-nums shrink-0`,children:[`−`,ke(t)]}),!!i&&(0,I.jsx)(l,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`icon-xs`,onClick:i,"aria-label":d.remove,className:`size-7 shrink-0 text-muted-foreground hover:text-destructive`,children:(0,I.jsx)(re,{className:`size-3.5`})})]})]})]})}):(0,I.jsx)(E,{icon:(0,I.jsx)(fe,{className:`size-4`}),title:d.title,className:C(`coupon-input--component w-full`,c),children:(0,I.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,I.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,I.jsx)(`div`,{className:`min-w-[11rem] flex-1`,children:(0,I.jsx)(oe,{value:f,onChange:e=>p(Ae(e.target.value)),placeholder:d.placeholder,startIcon:b,autoCapitalize:`characters`,spellCheck:!1,className:`font-mono`,invalid:!!n})}),(0,I.jsx)(l,{size:`default`,onClick:()=>r?.(m),loading:a,disabled:!m,className:`shrink-0`,children:d.apply})]}),!!n&&(0,I.jsx)(o,{size:`xs`,type:`error`,children:n||d.invalid})]})})}H.displayName=`CouponInputCard`;var je={title:`Order status`,statusLabel:`Current status`,eta:`ETA`,latestEvent:`Latest event`,currentStep:`Current step`},Me={pending:`warning`,paid:`info`,fulfilled:`info`,shipped:`primary`,delivered:`success`,cancelled:`error`};function Ne({orderNumber:e,status:t,statusVariant:n,events:r,currentEta:i,className:a,strings:l}){let u=S(je,l),d=n??Me[t],f=r.reduce((e,t,n)=>t.complete?n:e,-1),m=r[f]??r[0],h=r.find(e=>!e.complete);return(0,I.jsxs)(E,{icon:(0,I.jsx)(_,{className:`size-4`}),title:u.title,titleSuffix:(0,I.jsx)(c,{variant:d,className:`capitalize`,children:t}),description:`#${e}`,className:C(`order-status--component w-full`,a),children:[(0,I.jsx)(`div`,{className:`rounded-lg border border-border bg-muted/20 p-3`,children:(0,I.jsxs)(`div`,{className:`grid gap-3 sm:grid-cols-3`,children:[(0,I.jsxs)(`div`,{children:[(0,I.jsx)(o,{size:`xxs`,type:`secondary`,className:`uppercase tracking-wide`,children:u.statusLabel}),(0,I.jsx)(o,{weight:`semibold`,className:`mt-0.5 capitalize`,children:t})]}),!!m&&(0,I.jsxs)(`div`,{children:[(0,I.jsx)(o,{size:`xxs`,type:`secondary`,className:`uppercase tracking-wide`,children:m.complete?u.latestEvent:u.currentStep}),(0,I.jsx)(o,{weight:`semibold`,className:`mt-0.5`,children:m.label})]}),!!i&&(0,I.jsxs)(`div`,{children:[(0,I.jsx)(o,{size:`xxs`,type:`secondary`,className:`uppercase tracking-wide`,children:u.eta}),(0,I.jsx)(o,{weight:`semibold`,className:`mt-0.5 tabular-nums`,children:i})]})]})}),r.length>0&&(0,I.jsx)(`ol`,{className:`mt-4`,children:r.map((e,t)=>{let n=t===r.length-1,i=h?e===h:t===f;return(0,I.jsxs)(`li`,{className:`relative flex gap-3`,children:[(0,I.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,I.jsx)(`span`,{className:C(`flex size-6 shrink-0 items-center justify-center rounded-full border`,e.complete?`border-success bg-success text-success-foreground`:`border-border bg-card text-muted-foreground`,i&&!e.complete&&`border-primary text-primary ring-4 ring-primary/10`),children:e.complete?(0,I.jsx)(s,{className:`size-3.5`,strokeWidth:2.5}):i?(0,I.jsx)(le,{className:`size-3.5`}):(0,I.jsx)(p,{className:`size-3`})}),!n&&(0,I.jsx)(`span`,{"aria-hidden":`true`,className:C(`min-h-6 w-px flex-1`,t<f?`bg-success`:`bg-border`)})]}),(0,I.jsxs)(`div`,{className:C(`min-w-0 flex-1 pb-4`,n&&`pb-0`),children:[(0,I.jsx)(o,{weight:e.complete||i?`semibold`:`medium`,className:C(!e.complete&&!i&&`text-muted-foreground`),children:e.label}),!!e.timestamp&&(0,I.jsx)(o,{size:`xs`,type:`secondary`,className:`mt-0.5 tabular-nums`,children:e.timestamp})]})]},`${e.label}-${t}`)})})]})}Ne.displayName=`OrderStatusCard`;var Pe={title:`Payment method`,default:`Default`,cardHolder:`Card holder`,expires:`Expires`,change:`Change`},Fe={visa:`VISA`,mastercard:`MasterCard`,amex:`AMEX`,paypal:`PayPal`,applepay:`Apple Pay`,googlepay:`Google Pay`,unknown:`Card`},Ie={visa:`from-info via-primary to-info`,mastercard:`from-warning via-destructive to-destructive`,amex:`from-info via-primary to-info`,paypal:`from-info via-primary to-info`,applepay:`from-foreground via-muted-foreground to-foreground`,googlepay:`from-success via-primary to-success`,unknown:`from-foreground via-muted-foreground to-foreground`};function Le({brand:e,last4:t,expiry:n,holderName:r,isDefault:i,onChange:a,className:s,strings:u}){let d=S(Pe,u),f=Fe[e],p=Ie[e];return(0,I.jsx)(E,{icon:(0,I.jsx)(m,{className:`size-4`}),title:d.title,titleSuffix:i?(0,I.jsx)(c,{variant:`primary`,children:d.default}):null,headerAction:a?(0,I.jsx)(l,{buttonStyle:`ghost`,variant:`secondary`,onClick:a,children:d.change}):void 0,className:C(`payment-method--component w-full`,s),children:(0,I.jsxs)(`div`,{className:C(`relative mx-auto flex aspect-[85.6/53.98] w-full max-w-[22rem] flex-col justify-between overflow-hidden rounded-lg bg-gradient-to-br p-3.5 text-inverse-foreground shadow-sm ring-1 ring-inverse-border`,p),children:[(0,I.jsxs)(`div`,{className:`relative flex items-start justify-between`,children:[(0,I.jsx)(`div`,{className:`flex size-7 items-center justify-center rounded-md bg-gradient-to-br from-warning/80 to-warning shadow-sm`,children:(0,I.jsx)(`div`,{className:`size-4 rounded-sm border border-warning-foreground/25 bg-warning-foreground/15`})}),(0,I.jsx)(o,{tag:`span`,weight:`bold`,className:`rounded bg-inverse-surface px-2 py-0.5 tracking-[0.15em] text-inverse-foreground backdrop-blur-sm`,children:f})]}),(0,I.jsx)(`div`,{className:`relative`,children:(0,I.jsxs)(o,{tag:`span`,size:`base`,weight:`semibold`,className:`block font-mono tracking-[0.25em] text-inverse-foreground`,children:[`•••• •••• •••• `,t]})}),(0,I.jsxs)(`div`,{className:`relative flex items-end justify-between gap-3`,children:[(0,I.jsx)(`div`,{className:`min-w-0`,children:!!r&&(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(o,{size:`xxs`,className:`block uppercase tracking-wider text-inverse-subtle`,children:d.cardHolder}),(0,I.jsx)(o,{weight:`semibold`,className:`truncate text-inverse-foreground`,children:r})]})}),!!n&&(0,I.jsxs)(`div`,{className:`text-right shrink-0`,children:[(0,I.jsx)(o,{size:`xxs`,className:`block uppercase tracking-wider text-inverse-subtle`,children:d.expires}),(0,I.jsx)(o,{tag:`span`,weight:`semibold`,className:`tabular-nums text-inverse-foreground`,children:n})]})]})]})})}Le.displayName=`PaymentMethodCard`;var Re=e({AddressCardExample:()=>X,CartSummaryCardExample:()=>U,CouponInputCardEmptyApplied:()=>W,OrderStatusCardExample:()=>G,PaymentMethodCardExample:()=>K,RefundStatusCardExample:()=>Y,SubscriptionSummaryCardExample:()=>J,TaxBreakdownCardExample:()=>q,VoucherEntryCardExample:()=>Z}),ze=`data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%0A%09%3Crect%20width%3D%2296%22%20height%3D%2296%22%20rx%3D%2218%22%20fill%3D%22%23edf1e9%22%2F%3E%0A%09%3Crect%20x%3D%2234%22%20y%3D%2220%22%20width%3D%2228%22%20height%3D%2258%22%20rx%3D%229%22%20fill%3D%22%2353624d%22%2F%3E%0A%09%3Crect%20x%3D%2239%22%20y%3D%2212%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%224%22%20fill%3D%22%23303b2e%22%2F%3E%0A%09%3Crect%20x%3D%2239%22%20y%3D%2239%22%20width%3D%2218%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22%23f7f0d7%22%2F%3E%0A%3C%2Fsvg%3E%0A`,Be=`data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%0A%09%3Crect%20width%3D%2296%22%20height%3D%2296%22%20rx%3D%2218%22%20fill%3D%22%23eef1f5%22%2F%3E%0A%09%3Cellipse%20cx%3D%2249%22%20cy%3D%2273%22%20rx%3D%2229%22%20ry%3D%227%22%20fill%3D%22%23d6dde6%22%2F%3E%0A%09%3Crect%20x%3D%2224%22%20y%3D%2238%22%20width%3D%2232%22%20height%3D%2230%22%20rx%3D%228%22%20fill%3D%22%23ffffff%22%2F%3E%0A%09%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2232%22%20height%3D%2230%22%20rx%3D%228%22%20fill%3D%22%23dfe6ef%22%2F%3E%0A%09%3Crect%20x%3D%2255%22%20y%3D%2224%22%20width%3D%2214%22%20height%3D%2244%22%20rx%3D%227%22%20fill%3D%22%23697586%22%2F%3E%0A%09%3Crect%20x%3D%2258%22%20y%3D%2217%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%223%22%20fill%3D%22%23485467%22%2F%3E%0A%09%3Ccircle%20cx%3D%2235%22%20cy%3D%2266%22%20r%3D%229%22%20fill%3D%22%23cad6df%22%2F%3E%0A%3C%2Fsvg%3E%0A`;function U(){return(0,I.jsx)(`div`,{className:`w-full max-w-md`,children:(0,I.jsx)(De,{items:[{id:`1`,name:`Estate olive oil`,variantTitle:`500 ml bottle`,qty:2,price:`48 USD`,src:ze},{id:`2`,productTitle:`Spa day voucher`,variantTitle:`Weekend package`,qty:1,price:`180 USD`,url:Be},{id:`3`,name:`Gift wrap`,variantTitle:`Matte white box`,qty:1,price:`15 USD`}],subtotal:`243 USD`,tax:`48.60 USD`,shipping:`0 USD`,discount:`25 USD`,total:`266.60 USD`,onCheckout:()=>{}})})}function W(){return(0,I.jsxs)(`div`,{className:`grid w-full max-w-4xl gap-4 md:grid-cols-2`,children:[(0,I.jsx)(H,{onApply:()=>{}}),(0,I.jsx)(H,{appliedCode:`SPRING2026`,appliedDiscount:`88.40 USD`,onRemove:()=>{}})]})}function G(){return(0,I.jsx)(`div`,{className:`w-full max-w-md`,children:(0,I.jsx)(Ne,{orderNumber:`ORD-2026-0412`,status:`shipped`,currentEta:`Mar 29, 2026`,events:[{label:`Placed`,timestamp:`Mar 24`,complete:!0},{label:`Paid`,timestamp:`Mar 24`,complete:!0},{label:`Fulfilled`,timestamp:`Mar 25`,complete:!0},{label:`Shipped`,timestamp:`Mar 26`,complete:!0},{label:`Delivered`,complete:!1}]})})}function K(){return(0,I.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,I.jsx)(Le,{brand:`visa`,last4:`4242`,expiry:`04/27`,holderName:`Sarah Smitha`,isDefault:!0,onChange:()=>{}})})}function q(){return(0,I.jsx)(`div`,{className:`w-full max-w-md`,children:(0,I.jsx)(me,{subtotal:`565.00 USD`,taxes:[{label:`VAT (standard)`,rate:`20%`,amount:`94.20 USD`},{label:`Tourist tax`,rate:`€1.50/night`,amount:`4.50 USD`},{label:`Service charge`,rate:`5%`,amount:`14.30 USD`}],totalTax:`113.00 USD`,total:`678.00 USD`})})}function J(){return(0,I.jsx)(`div`,{className:`w-full max-w-lg`,children:(0,I.jsx)(L,{planName:`Pro Annual`,priceLabel:`€29`,cycleLabel:`/ month`,nextBillingDate:`May 12, 2026`,statusLabel:`Active`,perks:[{icon:b,label:`AI assist included`},{icon:te,label:`Priority support`},{icon:ie,label:`Unlimited bookings`}],onManage:()=>{},onUpgrade:()=>{}})})}function Y(){return(0,I.jsx)(`div`,{className:`w-full max-w-md`,children:(0,I.jsx)(_e,{stage:`processing`,amount:`180.00 USD`,reason:`Customer cancelled within 48h window`,method:`Visa ending 4242`,eta:`Apr 14, 2026`,requestedAt:`Apr 8, 2026`})})}function X(){return(0,I.jsxs)(`div`,{className:`grid w-full max-w-3xl gap-3 md:grid-cols-2`,children:[(0,I.jsx)(z,{kind:`shipping`,name:`Sarah Smitha`,line1:`ul. Vitosha 24, ap. 5`,city:`New York`,postalCode:`1000`,country:`USA`,phone:`+1 888 123 456`,isDefault:!0,onEdit:()=>{},onRemove:()=>{}}),(0,I.jsx)(z,{kind:`billing`,name:`Daniel Smith`,line1:`ul. Slavyanska 9`,line2:`floor 3`,city:`Los Angeles`,postalCode:`4000`,country:`USA`,onEdit:()=>{},onRemove:()=>{},onMakeDefault:()=>{}})]})}function Z(){let[e,t]=(0,B.useState)(!1);return(0,I.jsx)(`div`,{className:`w-full max-w-md`,children:(0,I.jsx)(V,{onCheck:()=>t(!0),...e?{appliedCode:`GCT-2026-PETROV`,balance:`120.00 USD`,onRemove:()=>t(!1)}:{}})})}var Q=`import { useState } from 'react';
+import { Sparkles, Star, Zap } from 'lucide-react';
+import {
+	AddressCard,
+	CartSummaryCard,
+	CouponInputCard,
+	OrderStatusCard,
+	PaymentMethodCard,
+	RefundStatusCard,
+	SubscriptionSummaryCard,
+	TaxBreakdownCard,
+	VoucherEntryCard,
+} from '@/components/composed/commerce';
+
+const bottleThumb = \`data:image/svg+xml;utf8,\${encodeURIComponent(\`
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+	<rect width="96" height="96" rx="18" fill="#edf1e9"/>
+	<rect x="34" y="20" width="28" height="58" rx="9" fill="#53624d"/>
+	<rect x="39" y="12" width="18" height="13" rx="4" fill="#303b2e"/>
+	<rect x="39" y="39" width="18" height="22" rx="4" fill="#f7f0d7"/>
+</svg>
+\`)}\`;
+
+const voucherThumb = \`data:image/svg+xml;utf8,\${encodeURIComponent(\`
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+	<rect width="96" height="96" rx="18" fill="#eef1f5"/>
+	<ellipse cx="49" cy="73" rx="29" ry="7" fill="#d6dde6"/>
+	<rect x="24" y="38" width="32" height="30" rx="8" fill="#ffffff"/>
+	<rect x="30" y="30" width="32" height="30" rx="8" fill="#dfe6ef"/>
+	<rect x="55" y="24" width="14" height="44" rx="7" fill="#697586"/>
+	<rect x="58" y="17" width="8" height="9" rx="3" fill="#485467"/>
+	<circle cx="35" cy="66" r="9" fill="#cad6df"/>
+</svg>
+\`)}\`;
+
+export function CartSummaryCardExample() {
+	return (
+		<div className="w-full max-w-md">
+			<CartSummaryCard
+				items={[
+					{ id: '1', name: 'Estate olive oil', variantTitle: '500 ml bottle', qty: 2, price: '48 USD', src: bottleThumb },
+					{ id: '2', productTitle: 'Spa day voucher', variantTitle: 'Weekend package', qty: 1, price: '180 USD', url: voucherThumb },
+					{ id: '3', name: 'Gift wrap', variantTitle: 'Matte white box', qty: 1, price: '15 USD' },
+				]}
+				subtotal="243 USD"
+				tax="48.60 USD"
+				shipping="0 USD"
+				discount="25 USD"
+				total="266.60 USD"
+				onCheckout={() => {}}
+			/>
+		</div>
+	);
+}
+
+export function CouponInputCardEmptyApplied() {
+	return (
+		<div className="grid w-full max-w-4xl gap-4 md:grid-cols-2">
+			<CouponInputCard onApply={() => {}} />
+			<CouponInputCard appliedCode="SPRING2026" appliedDiscount="88.40 USD" onRemove={() => {}} />
+		</div>
+	);
+}
+
+export function OrderStatusCardExample() {
+	return (
+		<div className="w-full max-w-md">
+			<OrderStatusCard
+				orderNumber="ORD-2026-0412"
+				status="shipped"
+				currentEta="Mar 29, 2026"
+				events={[
+					{ label: 'Placed', timestamp: 'Mar 24', complete: true },
+					{ label: 'Paid', timestamp: 'Mar 24', complete: true },
+					{ label: 'Fulfilled', timestamp: 'Mar 25', complete: true },
+					{ label: 'Shipped', timestamp: 'Mar 26', complete: true },
+					{ label: 'Delivered', complete: false },
+				]}
+			/>
+		</div>
+	);
+}
+
+export function PaymentMethodCardExample() {
+	return (
+		<div className="w-full max-w-sm">
+			<PaymentMethodCard brand="visa" last4="4242" expiry="04/27" holderName="Sarah Smitha" isDefault onChange={() => {}} />
+		</div>
+	);
+}
+
+export function TaxBreakdownCardExample() {
+	return (
+		<div className="w-full max-w-md">
+			<TaxBreakdownCard
+				subtotal="565.00 USD"
+				taxes={[
+					{ label: 'VAT (standard)', rate: '20%', amount: '94.20 USD' },
+					{ label: 'Tourist tax', rate: '€1.50/night', amount: '4.50 USD' },
+					{ label: 'Service charge', rate: '5%', amount: '14.30 USD' },
+				]}
+				totalTax="113.00 USD"
+				total="678.00 USD"
+			/>
+		</div>
+	);
+}
+
+export function SubscriptionSummaryCardExample() {
+	return (
+		<div className="w-full max-w-lg">
+			<SubscriptionSummaryCard
+				planName="Pro Annual"
+				priceLabel="€29"
+				cycleLabel="/ month"
+				nextBillingDate="May 12, 2026"
+				statusLabel="Active"
+				perks={[
+					{ icon: Sparkles, label: 'AI assist included' },
+					{ icon: Star, label: 'Priority support' },
+					{ icon: Zap, label: 'Unlimited bookings' },
+				]}
+				onManage={() => {}}
+				onUpgrade={() => {}}
+			/>
+		</div>
+	);
+}
+
+export function RefundStatusCardExample() {
+	return (
+		<div className="w-full max-w-md">
+			<RefundStatusCard
+				stage="processing"
+				amount="180.00 USD"
+				reason="Customer cancelled within 48h window"
+				method="Visa ending 4242"
+				eta="Apr 14, 2026"
+				requestedAt="Apr 8, 2026"
+			/>
+		</div>
+	);
+}
+
+export function AddressCardExample() {
+	return (
+		<div className="grid w-full max-w-3xl gap-3 md:grid-cols-2">
+			<AddressCard
+				kind="shipping"
+				name="Sarah Smitha"
+				line1="ul. Vitosha 24, ap. 5"
+				city="New York"
+				postalCode="1000"
+				country="USA"
+				phone="+1 888 123 456"
+				isDefault
+				onEdit={() => {}}
+				onRemove={() => {}}
+			/>
+			<AddressCard
+				kind="billing"
+				name="Daniel Smith"
+				line1="ul. Slavyanska 9"
+				line2="floor 3"
+				city="Los Angeles"
+				postalCode="4000"
+				country="USA"
+				onEdit={() => {}}
+				onRemove={() => {}}
+				onMakeDefault={() => {}}
+			/>
+		</div>
+	);
+}
+
+export function VoucherEntryCardExample() {
+	const [voucherApplied, setVoucherApplied] = useState(false);
+	return (
+		<div className="w-full max-w-md">
+			<VoucherEntryCard
+				onCheck={() => setVoucherApplied(true)}
+				{...(voucherApplied
+					? { appliedCode: 'GCT-2026-PETROV', balance: '120.00 USD', onRemove: () => setVoucherApplied(false) }
+					: {})}
+			/>
+		</div>
+	);
+}
+`;function Ve(e){let t={h4:`h4`,...e.components};return Re||$(`Examples`,!1),X||$(`Examples.AddressCardExample`,!0),U||$(`Examples.CartSummaryCardExample`,!0),W||$(`Examples.CouponInputCardEmptyApplied`,!0),G||$(`Examples.OrderStatusCardExample`,!0),K||$(`Examples.PaymentMethodCardExample`,!0),Y||$(`Examples.RefundStatusCardExample`,!0),J||$(`Examples.SubscriptionSummaryCardExample`,!0),q||$(`Examples.TaxBreakdownCardExample`,!0),Z||$(`Examples.VoucherEntryCardExample`,!0),(0,I.jsxs)(r,{title:`Composed · Commerce (extras)`,description:`Cart, coupon, order status, payment, tax breakdown, subscription, refund, address, voucher.`,layer:`composed`,status:`ready`,children:[(0,I.jsx)(i,{title:`Cart`,id:`cart`,children:(0,I.jsx)(u,{name:`CartSummaryCardExample`,source:Q,children:(0,I.jsx)(U,{})})}),(0,I.jsxs)(i,{title:`Promotions`,id:`promotions`,children:[(0,I.jsx)(u,{name:`CouponInputCardEmptyApplied`,source:Q,children:(0,I.jsx)(W,{})}),(0,I.jsx)(u,{name:`VoucherEntryCardExample`,source:Q,children:(0,I.jsx)(Z,{})})]}),(0,I.jsx)(i,{title:`Fulfillment`,id:`fulfillment`,children:(0,I.jsx)(u,{name:`OrderStatusCardExample`,source:Q,children:(0,I.jsx)(G,{})})}),(0,I.jsxs)(i,{title:`Billing`,id:`billing`,children:[(0,I.jsx)(u,{name:`PaymentMethodCardExample`,source:Q,children:(0,I.jsx)(K,{})}),(0,I.jsx)(u,{name:`TaxBreakdownCardExample`,source:Q,children:(0,I.jsx)(q,{})})]}),(0,I.jsxs)(i,{title:`Subscription and refund`,id:`subscription-refund`,children:[(0,I.jsx)(u,{name:`SubscriptionSummaryCardExample`,source:Q,children:(0,I.jsx)(J,{})}),(0,I.jsx)(u,{name:`RefundStatusCardExample`,source:Q,children:(0,I.jsx)(Y,{})})]}),(0,I.jsx)(i,{title:`Customer details`,id:`customer-details`,children:(0,I.jsx)(u,{name:`AddressCardExample`,source:Q,children:(0,I.jsx)(X,{})})}),(0,I.jsxs)(i,{title:`API`,id:`api`,children:[(0,I.jsx)(t.h4,{children:`AddressCard`}),(0,I.jsx)(w,{component:`AddressCard`}),(0,I.jsx)(t.h4,{children:`CartSummaryCard`}),(0,I.jsx)(w,{component:`CartSummaryCard`}),(0,I.jsx)(t.h4,{children:`CouponInputCard`}),(0,I.jsx)(w,{component:`CouponInputCard`}),(0,I.jsx)(t.h4,{children:`OrderStatusCard`}),(0,I.jsx)(w,{component:`OrderStatusCard`}),(0,I.jsx)(t.h4,{children:`PaymentMethodCard`}),(0,I.jsx)(w,{component:`PaymentMethodCard`}),(0,I.jsx)(t.h4,{children:`RefundStatusCard`}),(0,I.jsx)(w,{component:`RefundStatusCard`}),(0,I.jsx)(t.h4,{children:`SubscriptionSummaryCard`}),(0,I.jsx)(w,{component:`SubscriptionSummaryCard`}),(0,I.jsx)(t.h4,{children:`TaxBreakdownCard`}),(0,I.jsx)(w,{component:`TaxBreakdownCard`}),(0,I.jsx)(t.h4,{children:`VoucherEntryCard`}),(0,I.jsx)(w,{component:`VoucherEntryCard`})]})]})}function He(e={}){let{wrapper:t}=e.components||{};return t?(0,I.jsx)(t,{...e,children:(0,I.jsx)(Ve,{...e})}):Ve(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/composite-BW91WkOo.js

@@ -0,0 +1 @@
+import{Sr as e}from"./example-CbMg22fx.js";var t=`ArrowUp`,n=`ArrowDown`,r=`ArrowLeft`,i=`ArrowRight`,a=`Home`,o=`PageUp`,s=`PageDown`,c=new Set([r,i]),l=new Set([r,i,a,`End`]),u=new Set([t,n]),d=new Set([t,n,a,`End`]),f=new Set([...c,...u]),p=new Set([...f,a,`End`]),m=`Shift`,h=new Set([m,`Control`,`Alt`,`Meta`]);function g(t){return e(t)&&t.tagName===`INPUT`}function _(t){return!!(g(t)&&t.selectionStart!=null||e(t)&&t.tagName===`TEXTAREA`)}function v(e,t,n,r){if(!e||!t||!t.scrollTo)return;let i=e.scrollLeft,a=e.scrollTop,o=e.clientWidth<e.scrollWidth,s=e.clientHeight<e.scrollHeight;if(o&&r!==`vertical`){let r=y(e,t,`left`),a=b(e),o=b(t);n===`ltr`&&(r+t.offsetWidth+o.scrollMarginRight>e.scrollLeft+e.clientWidth-a.scrollPaddingRight?i=r+t.offsetWidth+o.scrollMarginRight-e.clientWidth+a.scrollPaddingRight:r-o.scrollMarginLeft<e.scrollLeft+a.scrollPaddingLeft&&(i=r-o.scrollMarginLeft-a.scrollPaddingLeft)),n===`rtl`&&(r-o.scrollMarginRight<e.scrollLeft+a.scrollPaddingLeft?i=r-o.scrollMarginLeft-a.scrollPaddingLeft:r+t.offsetWidth+o.scrollMarginRight>e.scrollLeft+e.clientWidth-a.scrollPaddingRight&&(i=r+t.offsetWidth+o.scrollMarginRight-e.clientWidth+a.scrollPaddingRight))}if(s&&r!==`horizontal`){let n=y(e,t,`top`),r=b(e),i=b(t);n-i.scrollMarginTop<e.scrollTop+r.scrollPaddingTop?a=n-i.scrollMarginTop-r.scrollPaddingTop:n+t.offsetHeight+i.scrollMarginBottom>e.scrollTop+e.clientHeight-r.scrollPaddingBottom&&(a=n+t.offsetHeight+i.scrollMarginBottom-e.clientHeight+r.scrollPaddingBottom)}e.scrollTo({left:i,top:a,behavior:`auto`})}function y(e,t,n){let r=n===`left`?`offsetLeft`:`offsetTop`,i=0;for(;t.offsetParent&&(i+=t[r],t.offsetParent!==e);)t=t.offsetParent;return i}function b(e){let t=getComputedStyle(e);return{scrollMarginTop:parseFloat(t.scrollMarginTop)||0,scrollMarginRight:parseFloat(t.scrollMarginRight)||0,scrollMarginBottom:parseFloat(t.scrollMarginBottom)||0,scrollMarginLeft:parseFloat(t.scrollMarginLeft)||0,scrollPaddingTop:parseFloat(t.scrollPaddingTop)||0,scrollPaddingRight:parseFloat(t.scrollPaddingRight)||0,scrollPaddingBottom:parseFloat(t.scrollPaddingBottom)||0,scrollPaddingLeft:parseFloat(t.scrollPaddingLeft)||0}}export{v as _,t as a,c,s as d,o as f,_ as g,d as h,i,l,u as m,f as n,p as o,m as p,r,a as s,n as t,h as u};

package/dist/showcase/assets/contact-card-CE82BDxj.js

@@ -0,0 +1,65 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Dr as t,Er as n,Rr as r,jr as i,r as a,t as o}from"./example-CbMg22fx.js";import{t as s}from"./external-link-C4QW5KPr.js";import{t as c}from"./mail-DAa8myka.js";import{t as l}from"./map-pin-Cf_uffQY.js";import{t as u}from"./phone-CLDh9lYU.js";import{k as d,n as f,s as p}from"./index-DNH0y0r-.js";import{t as m}from"./props-table-DSdjPLVr.js";import{o as h,r as g,t as _}from"./avatar-Dk78XyHT.js";import{c as v,o as y,r as b,t as x,u as S}from"./item-CdgzxWcL.js";import{t as C}from"./PreviewLayout-DQIZaXaO.js";var w={contact:`Contact`,profile:`Profile`},T=p();function E(e,t){return t||e.split(` `).map(e=>e[0]).slice(0,2).join(``).toUpperCase()}function D({name:e,role:t,email:n,phone:o,location:p,avatarUrl:m,initials:C,badge:D,badgeVariant:O=`success`,onContact:k,onViewProfile:A,className:j,strings:M}){let N=d(w,M);return(0,T.jsxs)(`div`,{className:f(`contact-card--component`,`overflow-hidden rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm sm:p-5`,j),children:[(0,T.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,T.jsxs)(_,{className:`size-12 shrink-0 border border-border`,children:[!!m&&(0,T.jsx)(h,{src:m,alt:e}),(0,T.jsx)(g,{className:`text-sm font-semibold`,children:E(e,C)})]}),(0,T.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,T.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,T.jsx)(r,{weight:`semibold`,className:`truncate`,children:e}),!!D&&(0,T.jsx)(i,{variant:O,children:D})]}),!!t&&(0,T.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:t})]})]}),!!(n||o||p)&&(0,T.jsxs)(y,{className:`mt-4 gap-0`,children:[!!n&&(0,T.jsxs)(x,{size:`xs`,className:`px-0 py-1.5`,children:[(0,T.jsx)(v,{variant:`icon`,className:`text-muted-foreground`,children:(0,T.jsx)(c,{})}),(0,T.jsx)(b,{children:(0,T.jsx)(S,{bold:!1,children:n})})]}),!!o&&(0,T.jsxs)(x,{size:`xs`,className:`px-0 py-1.5`,children:[(0,T.jsx)(v,{variant:`icon`,className:`text-muted-foreground`,children:(0,T.jsx)(u,{})}),(0,T.jsx)(b,{children:(0,T.jsx)(S,{bold:!1,children:o})})]}),!!p&&(0,T.jsxs)(x,{size:`xs`,className:`px-0 py-1.5`,children:[(0,T.jsx)(v,{variant:`icon`,className:`text-muted-foreground`,children:(0,T.jsx)(l,{})}),(0,T.jsx)(b,{children:(0,T.jsx)(S,{bold:!1,children:p})})]})]}),!!(k||A)&&(0,T.jsxs)(`div`,{className:`mt-4 flex items-center gap-2`,children:[!!k&&(0,T.jsx)(a,{variant:`primary`,buttonStyle:`solid`,icon:c,onClick:k,children:N.contact}),!!A&&(0,T.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,icon:s,onClick:A,children:N.profile})]})]})}D.displayName=`ContactCard`;var O=e({DifferentBadgeVariants:()=>M,Minimal:()=>j,WithAllFields:()=>k,WithInitialsOnly:()=>A});function k(){return(0,T.jsx)(T.Fragment,{children:(0,T.jsx)(D,{name:`Sarah Smitha`,role:`Account Manager`,email:`maria@giftcometrue.com`,phone:`+1 888 123 456`,location:`New York, NY`,badge:`Online`,badgeVariant:`success`,onContact:()=>{},onViewProfile:()=>{}})})}function A(){return(0,T.jsx)(T.Fragment,{children:(0,T.jsx)(D,{name:`Georgi Johnson`,role:`Head of Operations`,email:`georgi@giftcometrue.com`,initials:`GI`,badge:`Away`,badgeVariant:`warning`,onContact:()=>{},onViewProfile:()=>{}})})}function j(){return(0,T.jsx)(T.Fragment,{children:(0,T.jsx)(D,{name:`Emma Williamsa`})})}function M(){return(0,T.jsx)(T.Fragment,{children:(0,T.jsx)(C,{children:[`primary`,`secondary`,`success`,`info`,`warning`,`error`].map(e=>(0,T.jsx)(D,{name:`Variant: ${e}`,role:`Demo`,email:`demo@example.com`,badge:e,badgeVariant:e},e))})})}var N=`import { ContactCard } from '@/components/composed/cards/contact-card';
+import { Col } from '../../PreviewLayout';
+
+export function WithAllFields() {
+	return (
+		<>
+			<ContactCard
+								name="Sarah Smitha"
+								role="Account Manager"
+								email="maria@giftcometrue.com"
+								phone="+1 888 123 456"
+								location="New York, NY"
+								badge="Online"
+								badgeVariant="success"
+								onContact={() => {}}
+								onViewProfile={() => {}}
+							/>
+		</>
+	);
+}
+
+export function WithInitialsOnly() {
+	return (
+		<>
+			<ContactCard
+								name="Georgi Johnson"
+								role="Head of Operations"
+								email="georgi@giftcometrue.com"
+								initials="GI"
+								badge="Away"
+								badgeVariant="warning"
+								onContact={() => {}}
+								onViewProfile={() => {}}
+							/>
+		</>
+	);
+}
+
+export function Minimal() {
+	return (
+		<>
+			<ContactCard name="Emma Williamsa" />
+		</>
+	);
+}
+
+export function DifferentBadgeVariants() {
+	return (
+		<>
+			<Col>
+								{(['primary', 'secondary', 'success', 'info', 'warning', 'error'] as const).map((v) => (
+									<ContactCard
+										key={v}
+										name={\`Variant: \${v}\`}
+										role="Demo"
+										email="demo@example.com"
+										badge={v}
+										badgeVariant={v}
+									/>
+								))}
+							</Col>
+		</>
+	);
+}
+`;function P(e){let r={h4:`h4`,...e.components};return O||I(`Examples`,!1),M||I(`Examples.DifferentBadgeVariants`,!0),j||I(`Examples.Minimal`,!0),k||I(`Examples.WithAllFields`,!0),A||I(`Examples.WithInitialsOnly`,!0),(0,T.jsxs)(t,{title:`Composed · Contact card`,description:`ContactCard — name, role, email, phone, location, badge.`,layer:`composed`,status:`ready`,children:[(0,T.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,T.jsx)(o,{name:`WithAllFields`,source:N,children:(0,T.jsx)(k,{})}),(0,T.jsx)(o,{name:`WithInitialsOnly`,source:N,children:(0,T.jsx)(A,{})}),(0,T.jsx)(o,{name:`Minimal`,source:N,children:(0,T.jsx)(j,{})}),(0,T.jsx)(o,{name:`DifferentBadgeVariants`,source:N,children:(0,T.jsx)(M,{})})]}),(0,T.jsxs)(n,{title:`API`,id:`api`,children:[(0,T.jsx)(r.h4,{children:`ContactCard`}),(0,T.jsx)(m,{component:`ContactCard`})]})]})}function F(e={}){let{wrapper:t}=e.components||{};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(P,{...e})}):P(e)}function I(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{F as default};

package/dist/showcase/assets/content-container-Cc8Vv5Wp.js

@@ -0,0 +1 @@
+import{n as e,s as t}from"./index-DNH0y0r-.js";var n=t(),r={narrow:`max-w-7xl mx-auto`,default:``,wide:`max-w-screen-2xl mx-auto`,full:``},i={none:`p-0`,sm:`p-4 md:p-5`,default:`p-5 md:p-7`,lg:`p-6 md:p-8`};function a({children:t,as:a=`div`,width:o=`default`,padding:s=`default`,bare:c=!1,className:l,innerClassName:u,...d}){let f=r[o],p=i[s];return c?(0,n.jsx)(a,{className:e(`w-full flex-1 relative overflow-hidden @container/main h-full`,f,l),...d,children:t}):(0,n.jsx)(a,{className:e(`w-full flex-1 relative overflow-hidden @container/main h-full`,l),...d,children:(0,n.jsx)(`div`,{className:e(`flex min-h-full flex-1 flex-col gap-6 rounded-xl`,f,p,u),children:t})})}export{a as t};

package/dist/showcase/assets/copyable-CD9f6sxk.js

@@ -0,0 +1,96 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Br as t,Dr as n,Er as r,Vr as i,t as a,ti as o}from"./example-CbMg22fx.js";import{t as s}from"./circle-check-BYi8zv0a.js";import{t as c}from"./info-DO5VmDSw.js";import{a as l,s as u}from"./index-DNH0y0r-.js";import{t as d}from"./props-table-DSdjPLVr.js";import{t as f}from"./dist-CnonIdcR.js";import{t as p}from"./copyable-DRvJ9iOu.js";import{t as m}from"./customers-DvBxRjHv.js";import{t as h}from"./orders-BFwWtubb.js";var g=l(`octagon-x`,[[`path`,{d:`m15 9-6 6`,key:`1uzhvr`}],[`path`,{d:`M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z`,key:`2d38gg`}],[`path`,{d:`m9 9 6 6`,key:`z0biqf`}]]),_=u(),v=({theme:e=`system`,...n})=>(0,_.jsx)(f,{theme:e,className:`toaster group`,icons:{success:(0,_.jsx)(s,{className:`size-4`}),info:(0,_.jsx)(c,{className:`size-4`}),warning:(0,_.jsx)(t,{className:`size-4`}),error:(0,_.jsx)(g,{className:`size-4`}),loading:(0,_.jsx)(i,{className:`size-4 animate-spin`})},style:{"--normal-bg":`var(--popover)`,"--normal-text":`var(--popover-foreground)`,"--normal-border":`var(--border)`,"--border-radius":`var(--radius)`},toastOptions:{classNames:{toast:`cn-toast`}},...n});function y(e){let{duration:t,position:n}=o(),r=e.duration??t,i=e.position??n;return(0,_.jsx)(v,{className:`toaster--component`,...e,duration:r,position:i})}y.displayName=`Toaster`;var b=e({CustomDisplayValue:()=>w,CustomToastMessage:()=>T,CustomerListWithCopyableEmails:()=>D,Default:()=>x,Mono:()=>S,MonoTruncate:()=>C,RealisticOrderRow:()=>E});function x(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(y,{}),(0,_.jsx)(p,{value:`GCT-A4B7-C9E2`})]})}function S(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(y,{}),(0,_.jsx)(p,{value:`b3a8a5b6-9b0a-4f01-8b46-92aa1d6a1f7d`,mono:!0})]})}function C(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(y,{}),(0,_.jsx)(`div`,{className:`max-w-xs`,children:(0,_.jsx)(p,{value:`b3a8a5b6-9b0a-4f01-8b46-92aa1d6a1f7d-extra-long-id`,mono:!0,truncate:!0})})]})}function w(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(y,{}),(0,_.jsx)(p,{value:`hello@example.com`,displayValue:(0,_.jsx)(`span`,{className:`text-primary underline underline-offset-2`,children:`hello@example.com`})})]})}function T(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(y,{}),(0,_.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,_.jsx)(p,{value:`42`,successMessage:`The answer was copied!`}),(0,_.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Click to see the custom toast.`})]})]})}function E(){let e=h[0],t=m.find(t=>t.id===e.customerId);return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(y,{}),(0,_.jsxs)(`div`,{className:`flex flex-col gap-3 rounded-md border bg-card p-4 w-full max-w-md`,children:[(0,_.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,_.jsx)(`span`,{className:`text-xs uppercase text-muted-foreground`,children:`Order number`}),(0,_.jsx)(p,{value:e.number,mono:!0,successMessage:`Copied ${e.number}`})]}),(0,_.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,_.jsx)(`span`,{className:`text-xs uppercase text-muted-foreground`,children:`Customer email`}),(0,_.jsx)(p,{value:t.email})]})]})]})}function D(){return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(y,{}),(0,_.jsx)(`div`,{className:`flex flex-col gap-1 w-full max-w-md`,children:m.slice(0,4).map(e=>(0,_.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border py-1.5 text-sm`,children:[(0,_.jsx)(`span`,{children:e.name}),(0,_.jsx)(p,{value:e.email})]},e.id))})]})}var O=`import { Toaster } from '@/components/base/toaster';
+import { Copyable } from '@/components/base/copyable';
+import { MOCK_CUSTOMERS, MOCK_ORDERS } from '@/preview/_mocks';
+
+export function Default() {
+	return (
+		<>
+			<Toaster />
+			<Copyable value="GCT-A4B7-C9E2" />
+		</>
+	);
+}
+
+export function Mono() {
+	return (
+		<>
+			<Toaster />
+			<Copyable value="b3a8a5b6-9b0a-4f01-8b46-92aa1d6a1f7d" mono />
+		</>
+	);
+}
+
+export function MonoTruncate() {
+	return (
+		<>
+			<Toaster />
+			<div className="max-w-xs">
+				<Copyable value="b3a8a5b6-9b0a-4f01-8b46-92aa1d6a1f7d-extra-long-id" mono truncate />
+			</div>
+		</>
+	);
+}
+
+export function CustomDisplayValue() {
+	return (
+		<>
+			<Toaster />
+			<Copyable
+				value="hello@example.com"
+				displayValue={<span className="text-primary underline underline-offset-2">hello@example.com</span>}
+			/>
+		</>
+	);
+}
+
+export function CustomToastMessage() {
+	return (
+		<>
+			<Toaster />
+			<div className="flex flex-col gap-2">
+				<Copyable value="42" successMessage="The answer was copied!" />
+				<div className="text-xs text-muted-foreground">Click to see the custom toast.</div>
+			</div>
+		</>
+	);
+}
+
+export function RealisticOrderRow() {
+	const order = MOCK_ORDERS[0];
+	const customer = MOCK_CUSTOMERS.find((c) => c.id === order.customerId)!;
+	return (
+		<>
+			<Toaster />
+			<div className="flex flex-col gap-3 rounded-md border bg-card p-4 w-full max-w-md">
+				<div className="flex items-center justify-between">
+					<span className="text-xs uppercase text-muted-foreground">Order number</span>
+					<Copyable value={order.number} mono successMessage={\`Copied \${order.number}\`} />
+				</div>
+				<div className="flex items-center justify-between">
+					<span className="text-xs uppercase text-muted-foreground">Customer email</span>
+					<Copyable value={customer.email} />
+				</div>
+			</div>
+		</>
+	);
+}
+
+export function CustomerListWithCopyableEmails() {
+	return (
+		<>
+			<Toaster />
+			<div className="flex flex-col gap-1 w-full max-w-md">
+				{MOCK_CUSTOMERS.slice(0, 4).map((c) => (
+					<div key={c.id} className="flex items-center justify-between border-b border-border py-1.5 text-sm">
+						<span>{c.name}</span>
+						<Copyable value={c.email} />
+					</div>
+				))}
+			</div>
+		</>
+	);
+}
+`;function k(e){let t={code:`code`,p:`p`,...e.components};return b||j(`Examples`,!1),w||j(`Examples.CustomDisplayValue`,!0),T||j(`Examples.CustomToastMessage`,!0),D||j(`Examples.CustomerListWithCopyableEmails`,!0),x||j(`Examples.Default`,!0),S||j(`Examples.Mono`,!0),C||j(`Examples.MonoTruncate`,!0),E||j(`Examples.RealisticOrderRow`,!0),(0,_.jsxs)(n,{title:`Copyable`,description:`Click-to-copy inline span with hover affordance and toast feedback.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/copyable`,children:[(0,_.jsx)(r,{title:`Overview`,id:`overview`,children:(0,_.jsxs)(t.p,{children:[(0,_.jsx)(t.code,{children:`Copyable`}),` wraps any value in a click-to-copy span. The copy icon appears on
+hover, the value lands on the clipboard, and a `,(0,_.jsx)(t.code,{children:`sonner`}),` toast confirms (mount
+a `,(0,_.jsx)(t.code,{children:`<Toaster />`}),` somewhere in the tree). Supports `,(0,_.jsx)(t.code,{children:`mono`}),`, `,(0,_.jsx)(t.code,{children:`truncate`}),`, custom
+`,(0,_.jsx)(t.code,{children:`displayValue`}),`, and a custom `,(0,_.jsx)(t.code,{children:`successMessage`}),`.`]})}),(0,_.jsx)(r,{title:`Default`,id:`default`,children:(0,_.jsx)(a,{name:`Default`,source:O,children:(0,_.jsx)(x,{})})}),(0,_.jsxs)(r,{title:`Variants`,id:`variants`,children:[(0,_.jsx)(a,{name:`Mono`,source:O,children:(0,_.jsx)(S,{})}),(0,_.jsx)(a,{name:`MonoTruncate`,source:O,children:(0,_.jsx)(C,{})}),(0,_.jsx)(a,{name:`CustomDisplayValue`,source:O,children:(0,_.jsx)(w,{})}),(0,_.jsx)(a,{name:`CustomToastMessage`,source:O,children:(0,_.jsx)(T,{})})]}),(0,_.jsxs)(r,{title:`Realistic usage`,id:`realistic`,children:[(0,_.jsx)(a,{name:`RealisticOrderRow`,source:O,children:(0,_.jsx)(E,{})}),(0,_.jsx)(a,{name:`CustomerListWithCopyableEmails`,source:O,children:(0,_.jsx)(D,{})})]}),(0,_.jsx)(r,{title:`API`,id:`api`,children:(0,_.jsx)(d,{component:`Copyable`})})]})}function A(e={}){let{wrapper:t}=e.components||{};return t?(0,_.jsx)(t,{...e,children:(0,_.jsx)(k,{...e})}):k(e)}function j(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{A as default};

package/dist/showcase/assets/copyable-DRvJ9iOu.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Hr as n,Rr as r,Ur as i}from"./example-CbMg22fx.js";import{n as a,s as o}from"./index-DNH0y0r-.js";import{n as s}from"./dist-CnonIdcR.js";var c=e(t(),1),l=o();function u({value:e,displayValue:t,mono:o=!1,truncate:u=!1,className:d,contentClassName:f,successMessage:p=`Copied to clipboard`}){let[m,h]=(0,c.useState)(!1),g=async()=>{try{await navigator.clipboard.writeText(e),h(!0),s.success(p),setTimeout(()=>h(!1),2e3)}catch{s.error(`Failed to copy`)}},_=t!==void 0&&typeof t!=`string`;return(0,l.jsxs)(`span`,{role:`button`,tabIndex:0,onClick:g,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g())},className:a(`copyable--component`,`group inline-flex cursor-pointer items-center gap-1.5 rounded px-1 -mx-1 transition-colors hover:bg-muted`,d),children:[_?t:(0,l.jsx)(r,{tag:`span`,className:a(o&&`font-mono`,u&&`max-w-[300px] truncate`,f),children:t??e}),(0,l.jsx)(`span`,{className:`text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100`,children:m?(0,l.jsx)(i,{className:`size-3.5 text-success`}):(0,l.jsx)(n,{className:`size-3.5`})})]})}u.displayName=`Copyable`;export{u as t};

package/dist/showcase/assets/course-card-DYzULN2A.js

@@ -0,0 +1,77 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Dr as t,Er as n,Rr as r,jr as i,r as a,t as o}from"./example-CbMg22fx.js";import{k as s,n as c,s as l}from"./index-DNH0y0r-.js";import{t as u}from"./props-table-DSdjPLVr.js";import{t as d}from"./smart-card-DpvRHqI9.js";import{t as f}from"./stacked-avatars-XKXaLCmk.js";import{i as p,n as m,r as h,t as g,u as _}from"./item-CdgzxWcL.js";var v={participants:`Participants`,progress:`Progress`},y=l(),b=`rounded-xl bg-background/80 ring-1 ring-border/60 p-3`,x=`from-primary/8 via-card to-info/10`;function S(e){return e.map((e,t)=>({id:`${t}-${e.name??e.initials??``}`,name:e.name??e.initials??`P${t+1}`,imageUrl:e.imageUrl}))}function C({title:e,description:t,badges:n=[],participants:o=[],extraParticipants:l=0,progressPercent:u,actionLabel:C,onAction:w,className:T,strings:E,variant:D=`default`,gradient:O=x}){let k=s(v,E),A=o.length+l,j=S(o);return D===`minimal`?(0,y.jsxs)(g,{variant:`outline`,className:c(`course-card--component`,`hover:bg-muted/30 transition-colors`,T),children:[(0,y.jsxs)(h,{className:`min-w-[min(12rem,100%)]`,children:[(0,y.jsx)(_,{children:e}),!!t&&(0,y.jsx)(p,{clamp:1,children:t})]}),(0,y.jsxs)(m,{className:`ml-auto shrink-0 flex-wrap justify-end`,children:[o.length>0&&(0,y.jsx)(f,{users:j,max:3,size:`sm`,overflowFormatter:()=>`+${l||0}`,showOverflow:l>0}),u!==void 0&&(0,y.jsxs)(r,{size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:[u,`%`]}),!!C&&(0,y.jsx)(a,{variant:`secondary`,buttonStyle:`outline`,onClick:w,children:C})]})]}):D===`gradient`?(0,y.jsxs)(d,{title:e,description:t,className:c(`course-card--component border-primary/20 bg-gradient-to-br`,O,T),children:[n.length>0&&(0,y.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:n.map(e=>(0,y.jsx)(i,{variant:e.variant,children:e.label},e.label))}),(o.length>0||u!==void 0)&&(0,y.jsx)(`div`,{className:`mt-4 rounded-lg border border-border/70 bg-background/80 p-3`,children:(0,y.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3`,children:[o.length>0&&(0,y.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,y.jsx)(f,{users:j,max:3,size:`sm`,showOverflow:!1}),(0,y.jsxs)(r,{size:`xs`,type:`secondary`,className:`truncate`,children:[A,` `,k.participants.toLowerCase()]})]}),u!==void 0&&(0,y.jsxs)(`div`,{className:`ml-auto flex min-w-36 items-center gap-2`,children:[(0,y.jsx)(`div`,{className:`h-1.5 min-w-20 flex-1 overflow-hidden rounded-full bg-success/15`,children:(0,y.jsx)(`div`,{className:`h-full rounded-full bg-success`,style:{width:`${u}%`}})}),(0,y.jsxs)(r,{size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:[u,`%`]})]})]})}),!!C&&(0,y.jsx)(a,{variant:`primary`,className:`mt-4 w-full rounded-xl`,onClick:w,children:C})]}):(0,y.jsxs)(d,{title:e,description:t,className:c(`course-card--component`,T),children:[n.length>0&&(0,y.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:n.map(e=>(0,y.jsx)(i,{variant:e.variant,children:e.label},e.label))}),(o.length>0||u!==void 0)&&(0,y.jsxs)(`div`,{className:`mt-4 grid gap-2.5 sm:grid-cols-2`,children:[o.length>0&&(0,y.jsxs)(`div`,{className:b,children:[(0,y.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,y.jsx)(r,{size:`xs`,type:`secondary`,children:k.participants}),(0,y.jsx)(r,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:A})]}),(0,y.jsxs)(`div`,{className:`mt-2 flex items-center gap-2`,children:[(0,y.jsx)(f,{users:j,max:4,size:`sm`,showOverflow:l>0,overflowFormatter:()=>`+${l}`}),(0,y.jsxs)(r,{size:`xs`,type:`secondary`,className:`truncate`,children:[A,` `,k.participants.toLowerCase()]})]})]}),u!==void 0&&(0,y.jsxs)(`div`,{className:b,children:[(0,y.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,y.jsx)(r,{size:`xs`,type:`secondary`,children:k.progress}),(0,y.jsxs)(r,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:[u,`%`]})]}),(0,y.jsx)(`div`,{className:`mt-2.5`,children:(0,y.jsx)(`div`,{className:`h-1.5 w-full overflow-hidden rounded-full bg-success/15`,children:(0,y.jsx)(`div`,{className:`h-full rounded-full bg-success`,style:{width:`${u}%`}})})})]})]}),!!C&&(0,y.jsx)(a,{variant:`primary`,className:`mt-4 w-full rounded-xl`,onClick:w,children:C})]})}C.displayName=`CourseCard`;var w=e({CompactList:()=>O,DefaultSession:()=>E,FeaturedSession:()=>D}),T=[{name:`Vasilis Smith`},{name:`Sara Martinova`},{name:`Kostas Williams`}];function E(){return(0,y.jsx)(`div`,{className:`w-full max-w-xl`,children:(0,y.jsx)(C,{title:`Wine tasting masterclass`,description:`Thracian Valley tasting session with six confirmed guests and two open seats.`,badges:[{label:`Confirmed`,variant:`success`},{label:`In person`,variant:`secondary`}],participants:T,extraParticipants:3,progressPercent:75,actionLabel:`Open session`,onAction:()=>{}})})}function D(){return(0,y.jsx)(`div`,{className:`w-full max-w-lg`,children:(0,y.jsx)(C,{variant:`gradient`,title:`Sunset photography workshop`,description:`Three-hour field session with equipment checklist and location notes ready.`,badges:[{label:`Featured`,variant:`primary`}],participants:T,extraParticipants:5,progressPercent:62,actionLabel:`Review booking`,onAction:()=>{}})})}function O(){return(0,y.jsxs)(`div`,{className:`w-full max-w-2xl space-y-2`,children:[(0,y.jsx)(C,{variant:`minimal`,title:`Wine tasting masterclass`,description:`Today · 18:00 · 6 guests`,participants:T,extraParticipants:3,progressPercent:75,actionLabel:`Open`,onAction:()=>{}}),(0,y.jsx)(C,{variant:`minimal`,title:`Coastal hike and lunch`,description:`Tomorrow · 09:30 · guide pending`,participants:T.slice(0,2),progressPercent:35,actionLabel:`Review`,onAction:()=>{}}),(0,y.jsx)(C,{variant:`minimal`,title:`Pottery studio day`,description:`Friday · waitlist enabled`})]})}var k=`import { CourseCard } from '@/components/composed/cards/course-card';
+
+const PARTICIPANTS = [
+	{ name: 'Vasilis Smith' },
+	{ name: 'Sara Martinova' },
+	{ name: 'Kostas Williams' },
+];
+
+export function DefaultSession() {
+	return (
+		<div className="w-full max-w-xl">
+			<CourseCard
+				title="Wine tasting masterclass"
+				description="Thracian Valley tasting session with six confirmed guests and two open seats."
+				badges={[
+					{ label: 'Confirmed', variant: 'success' },
+					{ label: 'In person', variant: 'secondary' },
+				]}
+				participants={PARTICIPANTS}
+				extraParticipants={3}
+				progressPercent={75}
+				actionLabel="Open session"
+				onAction={() => {}}
+			/>
+		</div>
+	);
+}
+
+export function FeaturedSession() {
+	return (
+		<div className="w-full max-w-lg">
+			<CourseCard
+				variant="gradient"
+				title="Sunset photography workshop"
+				description="Three-hour field session with equipment checklist and location notes ready."
+				badges={[{ label: 'Featured', variant: 'primary' }]}
+				participants={PARTICIPANTS}
+				extraParticipants={5}
+				progressPercent={62}
+				actionLabel="Review booking"
+				onAction={() => {}}
+			/>
+		</div>
+	);
+}
+
+export function CompactList() {
+	return (
+		<div className="w-full max-w-2xl space-y-2">
+			<CourseCard
+				variant="minimal"
+				title="Wine tasting masterclass"
+				description="Today · 18:00 · 6 guests"
+				participants={PARTICIPANTS}
+				extraParticipants={3}
+				progressPercent={75}
+				actionLabel="Open"
+				onAction={() => {}}
+			/>
+			<CourseCard
+				variant="minimal"
+				title="Coastal hike and lunch"
+				description="Tomorrow · 09:30 · guide pending"
+				participants={PARTICIPANTS.slice(0, 2)}
+				progressPercent={35}
+				actionLabel="Review"
+				onAction={() => {}}
+			/>
+			<CourseCard
+				variant="minimal"
+				title="Pottery studio day"
+				description="Friday · waitlist enabled"
+			/>
+		</div>
+	);
+}
+`;function A(e){let r={h4:`h4`,...e.components};return w||M(`Examples`,!1),O||M(`Examples.CompactList`,!0),E||M(`Examples.DefaultSession`,!0),D||M(`Examples.FeaturedSession`,!0),(0,y.jsxs)(t,{title:`Composed · Course card`,description:`Operational session cards for bookings, courses, and guided experiences.`,layer:`composed`,status:`ready`,children:[(0,y.jsx)(n,{title:`Default`,id:`default`,children:(0,y.jsx)(o,{name:`DefaultSession`,source:k,children:(0,y.jsx)(E,{})})}),(0,y.jsx)(n,{title:`Featured`,id:`featured`,children:(0,y.jsx)(o,{name:`FeaturedSession`,source:k,children:(0,y.jsx)(D,{})})}),(0,y.jsx)(n,{title:`Compact list`,id:`compact-list`,children:(0,y.jsx)(o,{name:`CompactList`,source:k,children:(0,y.jsx)(O,{})})}),(0,y.jsxs)(n,{title:`API`,id:`api`,children:[(0,y.jsx)(r.h4,{children:`CourseCard`}),(0,y.jsx)(u,{component:`CourseCard`})]})]})}function j(e={}){let{wrapper:t}=e.components||{};return t?(0,y.jsx)(t,{...e,children:(0,y.jsx)(A,{...e})}):A(e)}function M(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{j as default};

package/dist/showcase/assets/cpu-Cc__BewW.js

@@ -0,0 +1 @@
+import{a as e}from"./index-DNH0y0r-.js";var t=e(`cpu`,[[`path`,{d:`M12 20v2`,key:`1lh1kg`}],[`path`,{d:`M12 2v2`,key:`tus03m`}],[`path`,{d:`M17 20v2`,key:`1rnc9c`}],[`path`,{d:`M17 2v2`,key:`11trls`}],[`path`,{d:`M2 12h2`,key:`1t8f8n`}],[`path`,{d:`M2 17h2`,key:`7oei6x`}],[`path`,{d:`M2 7h2`,key:`asdhe0`}],[`path`,{d:`M20 12h2`,key:`1q8mjw`}],[`path`,{d:`M20 17h2`,key:`1fpfkl`}],[`path`,{d:`M20 7h2`,key:`1o8tra`}],[`path`,{d:`M7 20v2`,key:`4gnj0m`}],[`path`,{d:`M7 2v2`,key:`1i4yhu`}],[`rect`,{x:`4`,y:`4`,width:`16`,height:`16`,rx:`2`,key:`1vbyd7`}],[`rect`,{x:`8`,y:`8`,width:`8`,height:`8`,rx:`1`,key:`z9xiuo`}]]);export{t};

package/dist/showcase/assets/credit-card-CoIW8_5L.js

@@ -0,0 +1 @@
+import{a as e}from"./index-DNH0y0r-.js";var t=e(`credit-card`,[[`rect`,{width:`20`,height:`14`,x:`2`,y:`5`,rx:`2`,key:`ynyp8z`}],[`line`,{x1:`2`,x2:`22`,y1:`10`,y2:`10`,key:`1b3vmo`}]]);export{t};