admin-ui-starter-kit 0.1.3 → 0.1.4

package/dist/showcase/assets/commerce-BOWBCLA-.js

@@ -0,0 +1,79 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Sr as n,Tr as r,gr as i,hr as a,mr as o,r as s,t as c}from"./example-C6-_Sy6B.js";import{t as l}from"./gift-CKFIh1Wh.js";import{D as u,a as d,r as f}from"./index-B8DVXCmf.js";import{t as p}from"./props-table-CM_1cocj.js";import{t as m}from"./smart-card-7szg_qSt.js";import{t as h}from"./separator-DUKleOvU.js";import{t as g}from"./inline-stat-D0sE-A4C.js";import{t as _}from"./date-block-Bl1kXJrM.js";import{c as v,i as y,n as b,o as x,r as S,t as C,u as w}from"./item-CMRbW6s-.js";var T=f(`trophy`,[[`path`,{d:`M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978`,key:`1n3hpd`}],[`path`,{d:`M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978`,key:`rfe1zi`}],[`path`,{d:`M18 9h1.5a1 1 0 0 0 0-5H18`,key:`7xy6bh`}],[`path`,{d:`M4 22h16`,key:`57wxv0`}],[`path`,{d:`M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z`,key:`1mhfuq`}],[`path`,{d:`M6 9H4.5a1 1 0 0 1 0-5H6`,key:`tex48p`}]]),E=d();function D(e){if(e.date!=null)return e.date;if(e.day&&e.month){let t=new Date().getFullYear(),n=new Date(`${e.month} ${e.day}, ${t}`);if(!Number.isNaN(n.getTime()))return n}return null}function O({bookings:e,className:n,locale:i,dateTone:a=`primary`,timePlacement:o=`below`}){return(0,E.jsx)(x,{className:r(`upcoming-booking--component w-full gap-2`,n),children:e.map((e,n)=>{let r=D(e);return(0,E.jsxs)(C,{className:`items-center px-0 py-1.5`,children:[!!r&&(0,E.jsx)(v,{children:(0,E.jsx)(_,{date:r,time:o===`below`?e.time:void 0,tone:a,locale:i,timePlacement:`below`,layout:`stacked`})}),(0,E.jsxs)(S,{children:[(0,E.jsx)(w,{children:e.service}),(0,E.jsx)(y,{clamp:1,children:e.customer})]}),(0,E.jsxs)(b,{children:[o===`inline-trailing`&&(0,E.jsx)(t,{size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:e.time}),(0,E.jsx)(t,{weight:`semibold`,className:`shrink-0 tabular-nums`,children:e.amount})]})]},e.id??`${e.service}-${e.time}-${n}`)})})}O.displayName=`UpcomingBookingRow`;var k={balanceLabel:`Loyalty Balance`,pointsAvailable:`points available`,redeem:`Redeem Points`};function A({balance:e,tier:a=`Gold Tier`,tierVariant:o,history:c=[],redeemLabel:d,onRedeem:f,className:p,strings:_}){let v=u(k,{...d===void 0?{}:{redeem:d},..._});return(0,E.jsxs)(m,{className:r(`loyalty-points--component w-full`,p),children:[(0,E.jsx)(g,{label:v.balanceLabel,value:(0,E.jsxs)(i,{variant:`warning`,children:[(0,E.jsx)(T,{className:`mr-1 inline size-3`}),a]}),labelClassName:`text-xs font-medium uppercase tracking-wider text-muted-foreground`}),(0,E.jsx)(n,{tag:`h3`,className:`text-4xl tabular-nums tracking-tight`,children:typeof e==`number`?e.toLocaleString():e}),(0,E.jsx)(t,{size:`xs`,type:`secondary`,children:v.pointsAvailable}),(0,E.jsx)(h,{className:`my-4`}),(0,E.jsx)(x,{children:c.map(e=>(0,E.jsxs)(C,{size:`xs`,className:`px-0`,children:[(0,E.jsxs)(S,{children:[(0,E.jsx)(w,{bold:!1,children:e.label}),(0,E.jsx)(y,{clamp:1,children:e.date})]}),(0,E.jsx)(b,{children:(0,E.jsx)(t,{weight:`semibold`,className:r(`tabular-nums`,e.positive?`text-success`:`text-destructive`),children:e.points})})]},e.date+e.label))}),(0,E.jsxs)(s,{variant:`dark`,className:`mt-5 w-full rounded-full`,onClick:f,children:[(0,E.jsx)(l,{className:`mr-1.5 size-3.5`}),v.redeem]})]})}A.displayName=`LoyaltyPointsCard`;var j={title:`Applied Discounts`,totalSavings:`Total Savings`};function M({discounts:e,totalSavings:a,className:o,strings:s}){let c=u(j,s);return(0,E.jsxs)(m,{title:c.title,className:r(`discount-stack--component w-full`,o),children:[(0,E.jsx)(x,{className:`mt-4`,children:e.map(e=>(0,E.jsxs)(C,{size:`xs`,className:`px-0`,children:[(0,E.jsx)(v,{children:(0,E.jsx)(i,{variant:e.badge,className:`w-16 justify-center text-xxs`,children:e.type})}),(0,E.jsx)(S,{children:(0,E.jsx)(w,{bold:!1,children:e.label})}),(0,E.jsx)(b,{children:(0,E.jsx)(t,{weight:`semibold`,className:`tabular-nums text-success`,children:e.amount})})]},e.type))}),(0,E.jsx)(h,{className:`my-4`}),(0,E.jsx)(g,{label:c.totalSavings,value:(0,E.jsx)(n,{tag:`h4`,className:`text-xl tabular-nums tracking-tight text-success border-none pb-0`,children:a}),labelClassName:`text-sm font-semibold`})]})}M.displayName=`DiscountStackPreview`;function N({trackingNumber:e,carrier:n,status:a,steps:o,details:s=[],className:c}){return(0,E.jsxs)(m,{className:r(`shipment-tracking--component w-full`,c),children:[(0,E.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,E.jsx)(t,{size:`xs`,weight:`medium`,className:`font-mono text-muted-foreground tracking-wide`,children:e}),!!n&&(0,E.jsx)(i,{variant:`info`,children:n})]}),(0,E.jsxs)(`div`,{className:`mt-4 flex items-center gap-1.5`,children:[(0,E.jsx)(`span`,{className:`h-2 w-2 rounded-full bg-success`}),(0,E.jsx)(t,{weight:`semibold`,children:a})]}),(0,E.jsx)(`div`,{className:`mt-5 flex items-center justify-between`,children:o.map((e,n)=>(0,E.jsxs)(`div`,{className:`flex flex-1 flex-col items-center gap-2`,children:[(0,E.jsxs)(`div`,{className:`flex w-full items-center`,children:[(0,E.jsx)(`div`,{className:r(`size-3 shrink-0 rounded-full`,e.done?`bg-success`:`bg-muted`)}),n<o.length-1&&(0,E.jsx)(`div`,{className:r(`h-0.5 flex-1`,e.done?`bg-success`:`bg-muted`)})]}),(0,E.jsx)(t,{size:`xs`,type:`secondary`,className:`text-center leading-tight`,children:e.label})]},e.label))}),s.length>0&&(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(h,{className:`my-4`}),(0,E.jsx)(`div`,{className:`space-y-2`,children:s.map(e=>(0,E.jsx)(g,{label:e.label,value:e.value,labelClassName:`text-xs`,valueClassName:`text-sm font-medium truncate max-w-[180px]`},e.label))})]})]})}N.displayName=`ShipmentTrackingCard`;var P=e({DiscountStack:()=>L,LoyaltyPoints:()=>I,ShipmentTracking:()=>R,UpcomingBookings:()=>F});function F(){return(0,E.jsx)(`div`,{className:`w-full max-w-xl`,children:(0,E.jsx)(m,{children:(0,E.jsx)(O,{timePlacement:`inline-trailing`,bookings:[{id:`1`,date:new Date(2026,2,28),service:`Wine Tasting Tour`,customer:`Daniel Smith`,time:`14:00`,amount:`370 USD`},{id:`2`,date:new Date(2026,3,3),service:`Luxury Spa Day`,customer:`Emma Garcia`,time:`10:00`,amount:`320 USD`},{id:`3`,date:new Date(2026,3,7),service:`Hot Air Balloon`,customer:`David Williams`,time:`06:30`,amount:`580 USD`}]})})})}function I(){return(0,E.jsx)(`div`,{className:`w-full max-w-md`,children:(0,E.jsx)(A,{balance:`4,830`,tier:`Gold Tier`,history:[{label:`Spa booking`,points:`+250`,date:`Mar 24`,positive:!0},{label:`Redeemed coupon`,points:`-500`,date:`Mar 18`,positive:!1},{label:`Wine tasting order`,points:`+180`,date:`Mar 12`,positive:!0}],onRedeem:()=>{}})})}function L(){return(0,E.jsx)(`div`,{className:`w-full max-w-lg`,children:(0,E.jsx)(M,{discounts:[{type:`Coupon`,label:`SPRING2026 — 25% off`,amount:`-88.40 USD`,badge:`info`},{type:`Loyalty`,label:`Gold tier — 5% extra`,amount:`-17.68 USD`,badge:`warning`},{type:`Promo`,label:`Free shipping over 500 USD`,amount:`-12.00 USD`,badge:`success`}],totalSavings:`-118.08 USD`})})}function R(){return(0,E.jsx)(`div`,{className:`w-full max-w-xl`,children:(0,E.jsx)(N,{trackingNumber:`TRK-9847261035`,carrier:`Speedy`,status:`In Transit`,steps:[{label:`Picked up`,done:!0},{label:`In transit`,done:!0},{label:`Out for delivery`,done:!1},{label:`Delivered`,done:!1}],details:[{label:`Est. Delivery`,value:`Mar 29, 2026`},{label:`Recipient`,value:`Daniel Smith`}]})})}var z=`import {
+	DiscountStackPreview,
+	LoyaltyPointsCard,
+	ShipmentTrackingCard,
+	UpcomingBookingRow,
+} from '@/components/composed/commerce';
+import { SmartCard } from '@/components/base/cards';
+
+export function UpcomingBookings() {
+	return (
+		<div className="w-full max-w-xl">
+			<SmartCard>
+				<UpcomingBookingRow
+					timePlacement="inline-trailing"
+					bookings={[
+						{ id: '1', date: new Date(2026, 2, 28), service: 'Wine Tasting Tour', customer: 'Daniel Smith', time: '14:00', amount: '370 USD' },
+						{ id: '2', date: new Date(2026, 3, 3), service: 'Luxury Spa Day', customer: 'Emma Garcia', time: '10:00', amount: '320 USD' },
+						{ id: '3', date: new Date(2026, 3, 7), service: 'Hot Air Balloon', customer: 'David Williams', time: '06:30', amount: '580 USD' },
+					]}
+				/>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function LoyaltyPoints() {
+	return (
+		<div className="w-full max-w-md">
+			<LoyaltyPointsCard
+				balance="4,830"
+				tier="Gold Tier"
+				history={[
+					{ label: 'Spa booking', points: '+250', date: 'Mar 24', positive: true },
+					{ label: 'Redeemed coupon', points: '-500', date: 'Mar 18', positive: false },
+					{ label: 'Wine tasting order', points: '+180', date: 'Mar 12', positive: true },
+				]}
+				onRedeem={() => {}}
+			/>
+		</div>
+	);
+}
+
+export function DiscountStack() {
+	return (
+		<div className="w-full max-w-lg">
+			<DiscountStackPreview
+				discounts={[
+					{ type: 'Coupon', label: 'SPRING2026 — 25% off', amount: '-88.40 USD', badge: 'info' },
+					{ type: 'Loyalty', label: 'Gold tier — 5% extra', amount: '-17.68 USD', badge: 'warning' },
+					{ type: 'Promo', label: 'Free shipping over 500 USD', amount: '-12.00 USD', badge: 'success' },
+				]}
+				totalSavings="-118.08 USD"
+			/>
+		</div>
+	);
+}
+
+export function ShipmentTracking() {
+	return (
+		<div className="w-full max-w-xl">
+			<ShipmentTrackingCard
+				trackingNumber="TRK-9847261035"
+				carrier="Speedy"
+				status="In Transit"
+				steps={[
+					{ label: 'Picked up', done: true },
+					{ label: 'In transit', done: true },
+					{ label: 'Out for delivery', done: false },
+					{ label: 'Delivered', done: false },
+				]}
+				details={[
+					{ label: 'Est. Delivery', value: 'Mar 29, 2026' },
+					{ label: 'Recipient', value: 'Daniel Smith' },
+				]}
+			/>
+		</div>
+	);
+}
+`;function B(e){let t={h4:`h4`,...e.components};return P||H(`Examples`,!1),L||H(`Examples.DiscountStack`,!0),I||H(`Examples.LoyaltyPoints`,!0),R||H(`Examples.ShipmentTracking`,!0),F||H(`Examples.UpcomingBookings`,!0),(0,E.jsxs)(a,{title:`Composed · Commerce`,description:`Bookings, loyalty, discount stacks, shipment tracking.`,layer:`composed`,status:`ready`,children:[(0,E.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(c,{name:`UpcomingBookings`,source:z,children:(0,E.jsx)(F,{})}),(0,E.jsx)(c,{name:`LoyaltyPoints`,source:z,children:(0,E.jsx)(I,{})}),(0,E.jsx)(c,{name:`DiscountStack`,source:z,children:(0,E.jsx)(L,{})}),(0,E.jsx)(c,{name:`ShipmentTracking`,source:z,children:(0,E.jsx)(R,{})})]}),(0,E.jsxs)(o,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`UpcomingBookingRow`}),(0,E.jsx)(p,{component:`UpcomingBookingRow`}),(0,E.jsx)(t.h4,{children:`LoyaltyPointsCard`}),(0,E.jsx)(p,{component:`LoyaltyPointsCard`}),(0,E.jsx)(t.h4,{children:`DiscountStackPreview`}),(0,E.jsx)(p,{component:`DiscountStackPreview`}),(0,E.jsx)(t.h4,{children:`ShipmentTrackingCard`}),(0,E.jsx)(p,{component:`ShipmentTrackingCard`})]})]})}function V(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.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/commerce-extras-C6CWYfpC.js

@@ -0,0 +1,173 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Ar as r,Cr as i,Sr as a,Tr as o,gr as s,hr as c,mr as l,r as u,t as d}from"./example-C6-_Sy6B.js";import{t as f}from"./calendar-oKaDsUIy.js";import{t as p}from"./chevron-right-CDDMIkYP.js";import{t as m}from"./credit-card-BoDfW0R8.js";import{t as h}from"./gift-CKFIh1Wh.js";import{t as g}from"./map-pin-2WS7oVo3.js";import{t as _}from"./package-CUNvdlBi.js";import{t as v}from"./receipt-CfMgwFPl.js";import{t as y}from"./rotate-ccw-B4Wi4ws7.js";import{t as b}from"./shopping-bag-EDVpxI9n.js";import{t as x}from"./sparkles-BEa1AgNq.js";import{t as ee}from"./star-Dbtxr60S.js";import{t as te}from"./trash-2-_xF5j-Ya.js";import{t as S}from"./x-CE8oevyh.js";import{t as ne}from"./zap-se3n2YVD.js";import{D as C,a as re,r as w}from"./index-B8DVXCmf.js";import{t as T}from"./props-table-CM_1cocj.js";import{t as E}from"./icon-badge-Bcm8TlJi.js";import{t as D}from"./smart-card-7szg_qSt.js";import{t as ie}from"./input-25epjsiD.js";import{t as O}from"./separator-DUKleOvU.js";import{t as k}from"./inline-stat-D0sE-A4C.js";import{c as A,i as j,n as M,o as ae,r as N,t as P,u as F}from"./item-CMRbW6s-.js";var oe=w(`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`}]]),se=w(`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`}]]),ce=w(`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`}]]),le={title:`Tax Breakdown`,subtotal:`Subtotal`,totalTax:`Total Tax`,total:`Total`},I=re();function ue({subtotal:e,taxes:t,totalTax:n,total:r,className:a,strings:s}){let c=C(le,s);return(0,I.jsxs)(D,{icon:(0,I.jsx)(v,{className:`size-4`}),title:c.title,className:o(`tax-breakdown--component w-full`,a),children:[(0,I.jsx)(k,{label:c.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)(i,{size:`xs`,className:`truncate`,children:e.label}),!!e.rate&&(0,I.jsx)(i,{tag:`span`,size:`xxs`,type:`discrete`,className:`shrink-0`,children:e.rate})]}),(0,I.jsx)(i,{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)(k,{label:c.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)(O,{className:`my-3`}),(0,I.jsx)(k,{label:c.total,value:r,mono:!0,labelClassName:`text-sm font-semibold`,valueClassName:`text-lg font-bold`})]})}ue.displayName=`TaxBreakdownCard`;var de={title:`Subscription`,plan:`Plan`,nextBilling:`Next billing`,perks:`Included`,manage:`Manage`,upgrade:`Upgrade`};function fe({planName:e,priceLabel:t,cycleLabel:n,nextBillingDate:c,statusLabel:l,perks:d=[],onManage:m,onUpgrade:h,className:g,strings:_}){let v=C(de,_);return(0,I.jsxs)(D,{icon:(0,I.jsx)(se,{className:`size-4`}),title:v.title,headerEnd:l?(0,I.jsx)(s,{variant:`success`,children:l}):null,className:o(`subscription-summary--component w-full`,g),children:[(0,I.jsxs)(`div`,{className:`rounded-lg border border-border/60 bg-muted/30 p-4`,children:[(0,I.jsx)(i,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:v.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)(i,{tag:`span`,size:`xl`,weight:`bold`,className:`tabular-nums`,children:t}),(0,I.jsx)(i,{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)(f,{className:`size-3.5 text-muted-foreground`}),(0,I.jsx)(i,{size:`xs`,type:`secondary`,children:v.nextBilling})]}),(0,I.jsx)(i,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:c})]}),d.length>0&&(0,I.jsxs)(`div`,{className:`mt-4 space-y-2`,children:[(0,I.jsx)(i,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:v.perks}),(0,I.jsx)(ae,{children:d.map((e,t)=>(0,I.jsxs)(P,{size:`xs`,className:`px-0`,children:[(0,I.jsx)(A,{children:(0,I.jsx)(E,{icon:e.icon??r,tone:`success`,size:`xs`})}),(0,I.jsx)(N,{children:(0,I.jsx)(F,{bold:!1,children:e.label})})]},`${e.label}-${t}`))})]}),(m||h)&&(0,I.jsxs)(`div`,{className:`mt-4 flex items-center gap-2`,children:[!!m&&(0,I.jsx)(u,{variant:`secondary`,buttonStyle:`outline`,onClick:m,className:`flex-1`,children:v.manage}),!!h&&(0,I.jsxs)(u,{variant:`primary`,onClick:h,className:`flex-1`,children:[v.upgrade,(0,I.jsx)(p,{className:`ml-1 size-3.5`})]})]})]})}fe.displayName=`SubscriptionSummaryCard`;var pe={title:`Refund Status`,requested:`Requested`,approved:`Approved`,processing:`Processing`,completed:`Completed`,amount:`Refund amount`,reason:`Reason`,eta:`Expected by`,method:`Refund to`},L=[`requested`,`approved`,`processing`,`completed`];function me({stage:e,amount:t,reason:n,method:s,eta:c,requestedAt:l,className:u,strings:d}){let f=C(pe,d),p=L.indexOf(e);return(0,I.jsxs)(D,{icon:(0,I.jsx)(y,{className:`size-4`}),title:f.title,className:o(`refund-status--component w-full`,u),children:[(0,I.jsxs)(`div`,{className:`rounded-lg bg-muted/40 px-4 py-3`,children:[(0,I.jsx)(i,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:f.amount}),(0,I.jsx)(a,{tag:`h3`,className:`text-3xl tabular-nums tracking-tight`,children:t}),!!l&&(0,I.jsxs)(i,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:[f.requested,`: `,l]})]}),(0,I.jsx)(`div`,{className:`mt-4 flex items-center justify-between`,children:L.map((e,t)=>{let n=t<=p,a=t===p;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:o(`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`,a&&`ring-2 ring-success/30 ring-offset-2 ring-offset-background`),children:n?(0,I.jsx)(r,{className:`size-3`}):(0,I.jsx)(i,{tag:`span`,size:`xxs`,weight:`medium`,className:`tabular-nums`,children:t+1})}),t<L.length-1&&(0,I.jsx)(`div`,{className:o(`h-0.5 flex-1`,t<p?`bg-success`:`bg-border`)})]}),(0,I.jsx)(i,{size:`xxs`,weight:a?`semibold`:`medium`,type:n?`main`:`secondary`,className:`text-center leading-tight`,children:f[e]})]},e)})}),(n||s||c)&&(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(O,{className:`my-4`}),(0,I.jsxs)(`div`,{className:`space-y-2`,children:[!!n&&(0,I.jsx)(k,{label:f.reason,value:n,className:`items-start`,valueClassName:`text-sm font-medium text-right`}),!!s&&(0,I.jsx)(k,{label:f.method,value:s,valueClassName:`text-sm font-medium`}),!!c&&(0,I.jsx)(k,{label:f.eta,value:c,mono:!0,valueClassName:`text-sm font-medium`})]})]})]})}me.displayName=`RefundStatusCard`;var he={defaultBadge:`Default`,edit:`Edit`,remove:`Remove`,makeDefault:`Make default`,shipping:`Shipping address`,billing:`Billing address`,pickup:`Pickup address`};function R({kind:e=`shipping`,name:t,line1:n,line2:r,city:a,region:c,postalCode:l,country:u,phone:d,isDefault:f=!1,onEdit:p,onRemove:m,onMakeDefault:h,className:_,strings:v}){let y=C(he,v),b={shipping:y.shipping,billing:y.billing,pickup:y.pickup},x=[a,c,l].filter(Boolean).join(`, `),S=[];return p&&S.push({id:`edit`,label:y.edit,icon:(0,I.jsx)(oe,{className:`size-3.5`}),onClick:p}),h&&!f&&S.push({id:`make-default`,label:y.makeDefault,icon:(0,I.jsx)(ee,{className:`size-3.5`}),onClick:h}),m&&S.push({id:`remove`,label:y.remove,icon:(0,I.jsx)(te,{className:`size-3.5`}),onClick:m}),(0,I.jsx)(D,{icon:(0,I.jsx)(g,{className:`size-4`}),title:b[e],titleSuffix:f?(0,I.jsx)(s,{variant:`primary`,children:y.defaultBadge}):null,actions:S.length>0?S:void 0,className:o(`address-card--component w-full`,_),children:(0,I.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,I.jsx)(i,{weight:`semibold`,children:t}),(0,I.jsx)(i,{children:n}),!!r&&(0,I.jsx)(i,{children:r}),!!x&&(0,I.jsx)(i,{children:x}),(0,I.jsx)(i,{type:`secondary`,children:u}),!!d&&(0,I.jsx)(i,{size:`xs`,type:`secondary`,className:`mt-1.5 tabular-nums`,children:d})]})})}R.displayName=`AddressCard`;var ge={title:`Redeem a gift card`,placeholder:`Enter gift card code`,check:`Check balance`,remove:`Remove`,balance:`Available balance`,notFound:`That gift card code is not valid.`},z=t(n(),1);function B({appliedCode:e,balance:t,error:n,loading:a,onCheck:s,onRemove:c,className:l,strings:d}){let f=C(ge,d),[p,m]=(0,z.useState)(``);return e?(0,I.jsx)(D,{icon:(0,I.jsx)(h,{className:`size-4`}),title:f.title,className:o(`voucher-entry--component w-full`,l),children:(0,I.jsxs)(P,{variant:`muted`,className:`border border-success/30 bg-success/8`,children:[(0,I.jsx)(A,{children:(0,I.jsx)(E,{icon:r,tone:`success`,size:`md`,className:`ring-1 ring-success/20`})}),(0,I.jsxs)(N,{children:[(0,I.jsx)(F,{className:`font-mono tracking-wider`,children:e}),(0,I.jsx)(j,{className:`uppercase tracking-wide`,clamp:1,children:f.balance})]}),(0,I.jsxs)(M,{children:[!!t&&(0,I.jsx)(i,{tag:`span`,size:`base`,weight:`semibold`,type:`success`,className:`tabular-nums shrink-0`,children:t}),!!c&&(0,I.jsx)(u,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`icon-xs`,onClick:c,"aria-label":f.remove,className:`size-7 shrink-0 text-muted-foreground hover:text-destructive`,children:(0,I.jsx)(S,{className:`size-3.5`})})]})]})}):(0,I.jsx)(D,{icon:(0,I.jsx)(h,{className:`size-4`}),title:f.title,className:o(`voucher-entry--component w-full`,l),children:(0,I.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,I.jsxs)(`div`,{className:`flex gap-2`,children:[(0,I.jsx)(ie,{value:p,onChange:e=>m(e.target.value),placeholder:f.placeholder,startIcon:h,className:`flex-1 font-mono uppercase tracking-wider`,invalid:!!n}),(0,I.jsx)(u,{onClick:()=>s?.(p),loading:a,disabled:!p.trim(),children:f.check})]}),!!n&&(0,I.jsx)(i,{size:`xs`,type:`error`,children:n||f.notFound})]})})}B.displayName=`VoucherEntryCard`;var _e={title:`Cart`,subtotal:`Subtotal`,tax:`Tax`,shipping:`Shipping`,discount:`Discount`,total:`Total`,checkout:`Checkout`},ve=e=>e.replace(/^[\s−-]+/,``);function V({items:e,subtotal:t,tax:n,shipping:r,discount:a,total:s,onCheckout:c,className:l,strings:d}){let f=C(_e,d),p=!!(t||n||r||a);return(0,I.jsxs)(D,{icon:(0,I.jsx)(b,{className:`size-4`}),title:f.title,className:o(`cart-summary--component w-full`,l),children:[(0,I.jsx)(ae,{children:e.map(e=>(0,I.jsxs)(P,{size:`xs`,className:`px-0`,children:[(0,I.jsx)(A,{variant:`image`,children:e.imageUrl?(0,I.jsx)(`img`,{src:e.imageUrl,alt:e.name}):(0,I.jsx)(b,{})}),(0,I.jsxs)(N,{children:[(0,I.jsx)(F,{children:e.name}),(0,I.jsxs)(j,{clamp:1,className:`tabular-nums`,children:[`x`,e.qty]})]}),(0,I.jsx)(M,{children:(0,I.jsx)(i,{tag:`span`,weight:`semibold`,className:`tabular-nums shrink-0`,children:e.price})})]},e.id))}),!!p&&(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)(k,{label:f.subtotal,value:t,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!n&&(0,I.jsx)(k,{label:f.tax,value:n,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!r&&(0,I.jsx)(k,{label:f.shipping,value:r,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!a&&(0,I.jsx)(k,{label:f.discount,value:`−${ve(a)}`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold text-success`})]}),(0,I.jsx)(O,{className:`my-3`}),(0,I.jsx)(k,{label:f.total,value:s,mono:!0,labelClassName:`text-sm font-semibold`,valueClassName:`text-lg font-bold`}),!!c&&(0,I.jsx)(u,{onClick:c,fullWidth:!0,className:`mt-4`,children:f.checkout})]})}V.displayName=`CartSummaryCard`;var ye={title:`Have a code?`,placeholder:`Enter coupon code`,apply:`Apply`,remove:`Remove`,applied:`Applied`,invalid:`That code is not valid`},be=e=>e.replace(/^[\s−-]+/,``);function H({appliedCode:e,appliedDiscount:t,error:n,onApply:a,onRemove:s,loading:c,className:l,strings:d}){let f=C(ye,d),[p,m]=(0,z.useState)(``);return e?(0,I.jsx)(D,{icon:(0,I.jsx)(ce,{className:`size-4`}),title:f.title,className:o(`coupon-input--component w-full`,l),children:(0,I.jsxs)(P,{variant:`muted`,className:`border border-success/30 bg-success/8`,children:[(0,I.jsx)(A,{children:(0,I.jsx)(E,{icon:r,tone:`success`,size:`md`,className:`ring-1 ring-success/20`})}),(0,I.jsxs)(N,{children:[(0,I.jsx)(F,{className:`font-mono tracking-wider`,children:e}),(0,I.jsx)(j,{className:`uppercase tracking-wide`,clamp:1,children:f.applied})]}),(0,I.jsxs)(M,{children:[!!t&&(0,I.jsxs)(i,{tag:`span`,weight:`semibold`,type:`success`,className:`tabular-nums shrink-0`,children:[`−`,be(t)]}),!!s&&(0,I.jsx)(u,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`icon-xs`,onClick:s,"aria-label":f.remove,className:`size-7 shrink-0 text-muted-foreground hover:text-destructive`,children:(0,I.jsx)(S,{className:`size-3.5`})})]})]})}):(0,I.jsx)(D,{icon:(0,I.jsx)(ce,{className:`size-4`}),title:f.title,className:o(`coupon-input--component w-full`,l),children:(0,I.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,I.jsxs)(`div`,{className:`flex gap-2`,children:[(0,I.jsx)(ie,{value:p,onChange:e=>m(e.target.value),placeholder:f.placeholder,startIcon:x,className:`flex-1 font-mono uppercase tracking-wider`,invalid:!!n}),(0,I.jsx)(u,{size:`default`,onClick:()=>a?.(p),loading:c,disabled:!p.trim(),children:f.apply})]}),!!n&&(0,I.jsx)(i,{size:`xs`,type:`error`,children:n||f.invalid})]})})}H.displayName=`CouponInputCard`;var xe={title:`Order status`,statusLabel:`Current status`,eta:`ETA`},Se={pending:`warning`,paid:`info`,fulfilled:`info`,shipped:`primary`,delivered:`success`,cancelled:`error`};function Ce({orderNumber:e,status:t,statusVariant:n,events:a,currentEta:c,className:l,strings:u}){let d=C(xe,u),f=n??Se[t],p=a.reduce((e,t,n)=>t.complete?n:e,-1);return(0,I.jsxs)(D,{icon:(0,I.jsx)(_,{className:`size-4`}),title:d.title,titleSuffix:(0,I.jsx)(s,{variant:f,className:`capitalize`,children:t}),description:`#${e}`,className:o(`order-status--component w-full`,l),children:[(0,I.jsx)(`div`,{className:`overflow-x-auto pb-1`,children:(0,I.jsx)(`div`,{className:`flex min-w-[22rem] items-start`,children:a.map((e,t)=>{let n=t===a.length-1,s=t<p,c=t===p+1||e.complete&&t===p;return(0,I.jsxs)(`div`,{className:`flex min-w-14 flex-1 flex-col items-center gap-1.5 px-1`,children:[(0,I.jsxs)(`div`,{className:`relative flex w-full items-center`,children:[t>0&&(0,I.jsx)(`div`,{className:o(`h-0.5 flex-1`,t<=p?`bg-success`:`bg-border`)}),t===0&&(0,I.jsx)(`div`,{className:`flex-1`,"aria-hidden":`true`}),(0,I.jsx)(`div`,{className:o(`relative flex size-5 shrink-0 items-center justify-center rounded-full`,e.complete?`bg-success text-success-foreground`:`border-2 border-border bg-card text-muted-foreground`,c&&!e.complete&&`border-primary text-primary`),children:e.complete?(0,I.jsx)(r,{className:`size-3`,strokeWidth:2.5}):(0,I.jsx)(`span`,{className:`size-1.5 rounded-full bg-current`})}),n?(0,I.jsx)(`div`,{className:`flex-1`,"aria-hidden":`true`}):(0,I.jsx)(`div`,{className:o(`h-0.5 flex-1`,s?`bg-success`:`bg-border`)})]}),(0,I.jsx)(i,{size:`xxs`,weight:e.complete||c?`semibold`:`medium`,className:o(`max-w-20 text-center leading-tight`,!e.complete&&!c&&`text-muted-foreground`),children:e.label}),!!e.timestamp&&(0,I.jsx)(i,{size:`xxs`,type:`discrete`,className:`text-center tabular-nums`,children:e.timestamp})]},`${e.label}-${t}`)})})}),!!c&&(0,I.jsxs)(`div`,{className:`mt-3 flex items-center justify-between rounded-lg border border-border/50 bg-primary/5 px-3 py-2`,children:[(0,I.jsx)(i,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:d.eta}),(0,I.jsx)(i,{tag:`span`,weight:`semibold`,children:c})]})]})}Ce.displayName=`OrderStatusCard`;var we={title:`Payment method`,default:`Default`,cardHolder:`Card holder`,expires:`Expires`,change:`Change`},Te={visa:`VISA`,mastercard:`MasterCard`,amex:`AMEX`,paypal:`PayPal`,applepay:`Apple Pay`,googlepay:`Google Pay`,unknown:`Card`},Ee={visa:`from-blue-700 via-blue-800 to-indigo-900`,mastercard:`from-orange-600 via-rose-700 to-rose-900`,amex:`from-sky-600 via-cyan-700 to-cyan-900`,paypal:`from-blue-600 via-indigo-700 to-blue-900`,applepay:`from-zinc-700 via-zinc-800 to-zinc-950`,googlepay:`from-emerald-600 via-teal-700 to-teal-900`,unknown:`from-zinc-700 via-zinc-800 to-zinc-950`};function De({brand:e,last4:t,expiry:n,holderName:r,isDefault:a,onChange:c,className:l,strings:d}){let f=C(we,d),p=Te[e],h=Ee[e];return(0,I.jsxs)(D,{icon:(0,I.jsx)(m,{className:`size-4`}),title:f.title,titleSuffix:a?(0,I.jsx)(s,{variant:`primary`,children:f.default}):null,className:o(`payment-method--component w-full`,l),children:[(0,I.jsxs)(`div`,{className:o(`relative flex aspect-[1.586] min-h-40 flex-col justify-between overflow-hidden rounded-lg bg-gradient-to-br p-4 text-white shadow-sm ring-1 ring-white/10`,h),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)(i,{tag:`span`,weight:`bold`,className:`rounded bg-white/15 px-2 py-0.5 tracking-[0.15em] text-white backdrop-blur-sm`,children:p})]}),(0,I.jsx)(`div`,{className:`relative`,children:(0,I.jsxs)(i,{tag:`span`,size:`base`,weight:`semibold`,className:`block font-mono tracking-[0.25em] text-white`,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)(i,{size:`xxs`,className:`block uppercase tracking-wider text-white/60`,children:f.cardHolder}),(0,I.jsx)(i,{weight:`semibold`,className:`truncate text-white`,children:r})]})}),!!n&&(0,I.jsxs)(`div`,{className:`text-right shrink-0`,children:[(0,I.jsx)(i,{size:`xxs`,className:`block uppercase tracking-wider text-white/60`,children:f.expires}),(0,I.jsx)(i,{tag:`span`,weight:`semibold`,className:`tabular-nums text-white`,children:n})]})]})]}),!!c&&(0,I.jsx)(`div`,{className:`mt-3 flex justify-end`,children:(0,I.jsx)(u,{buttonStyle:`ghost`,variant:`secondary`,onClick:c,size:`default`,children:f.change})})]})}De.displayName=`PaymentMethodCard`;var Oe=e({AddressCardExample:()=>X,CartSummaryCardExample:()=>U,CouponInputCardEmptyApplied:()=>W,OrderStatusCardExample:()=>G,PaymentMethodCardExample:()=>K,RefundStatusCardExample:()=>Y,SubscriptionSummaryCardExample:()=>J,TaxBreakdownCardExample:()=>q,VoucherEntryCardExample:()=>Z});function U(){return(0,I.jsx)(`div`,{className:`w-full max-w-md`,children:(0,I.jsx)(V,{items:[{id:`1`,name:`Wine Tasting Tour`,qty:2,price:`370 USD`},{id:`2`,name:`Spa Day Voucher`,qty:1,price:`180 USD`},{id:`3`,name:`Gift Wrap`,qty:1,price:`15 USD`}],subtotal:`565 USD`,tax:`113 USD`,shipping:`0 USD`,discount:`50 USD`,total:`628 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-xl`,children:(0,I.jsx)(Ce,{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-lg`,children:(0,I.jsx)(De,{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)(ue,{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)(fe,{planName:`Pro Annual`,priceLabel:`€29`,cycleLabel:`/ month`,nextBillingDate:`May 12, 2026`,statusLabel:`Active`,perks:[{icon:x,label:`AI assist included`},{icon:ee,label:`Priority support`},{icon:ne,label:`Unlimited bookings`}],onManage:()=>{},onUpgrade:()=>{}})})}function Y(){return(0,I.jsx)(`div`,{className:`w-full max-w-md`,children:(0,I.jsx)(me,{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)(R,{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)(R,{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,z.useState)(!1);return(0,I.jsxs)(`div`,{className:`grid w-full max-w-4xl gap-3 md:grid-cols-2`,children:[(0,I.jsx)(B,{onCheck:()=>t(!0),...e?{appliedCode:`GCT-2026-PETROV`,balance:`120.00 USD`,onRemove:()=>t(!1)}:{}}),(0,I.jsx)(B,{appliedCode:`GCT-A4B7-C9E2`,balance:`250.00 USD`,onRemove:()=>{}})]})}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';
+
+export function CartSummaryCardExample() {
+	return (
+		<div className="w-full max-w-md">
+			<CartSummaryCard
+				items={[
+					{ id: '1', name: 'Wine Tasting Tour', qty: 2, price: '370 USD' },
+					{ id: '2', name: 'Spa Day Voucher', qty: 1, price: '180 USD' },
+					{ id: '3', name: 'Gift Wrap', qty: 1, price: '15 USD' },
+				]}
+				subtotal="565 USD"
+				tax="113 USD"
+				shipping="0 USD"
+				discount="50 USD"
+				total="628 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-xl">
+			<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-lg">
+			<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="grid w-full max-w-4xl gap-3 md:grid-cols-2">
+			<VoucherEntryCard
+				onCheck={() => setVoucherApplied(true)}
+				{...(voucherApplied
+					? { appliedCode: 'GCT-2026-PETROV', balance: '120.00 USD', onRemove: () => setVoucherApplied(false) }
+					: {})}
+			/>
+			<VoucherEntryCard
+				appliedCode="GCT-A4B7-C9E2"
+				balance="250.00 USD"
+				onRemove={() => {}}
+			/>
+		</div>
+	);
+}
+`;function ke(e){let t={h4:`h4`,...e.components};return Oe||$(`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)(c,{title:`Composed · Commerce (extras)`,description:`Cart, coupon, order status, payment, tax breakdown, subscription, refund, address, voucher.`,layer:`composed`,status:`ready`,children:[(0,I.jsxs)(l,{title:`Examples`,id:`examples`,children:[(0,I.jsx)(d,{name:`CartSummaryCardExample`,source:Q,children:(0,I.jsx)(U,{})}),(0,I.jsx)(d,{name:`CouponInputCardEmptyApplied`,source:Q,children:(0,I.jsx)(W,{})}),(0,I.jsx)(d,{name:`OrderStatusCardExample`,source:Q,children:(0,I.jsx)(G,{})}),(0,I.jsx)(d,{name:`PaymentMethodCardExample`,source:Q,children:(0,I.jsx)(K,{})}),(0,I.jsx)(d,{name:`TaxBreakdownCardExample`,source:Q,children:(0,I.jsx)(q,{})}),(0,I.jsx)(d,{name:`SubscriptionSummaryCardExample`,source:Q,children:(0,I.jsx)(J,{})}),(0,I.jsx)(d,{name:`RefundStatusCardExample`,source:Q,children:(0,I.jsx)(Y,{})}),(0,I.jsx)(d,{name:`AddressCardExample`,source:Q,children:(0,I.jsx)(X,{})}),(0,I.jsx)(d,{name:`VoucherEntryCardExample`,source:Q,children:(0,I.jsx)(Z,{})})]}),(0,I.jsxs)(l,{title:`API`,id:`api`,children:[(0,I.jsx)(t.h4,{children:`AddressCard`}),(0,I.jsx)(T,{component:`AddressCard`}),(0,I.jsx)(t.h4,{children:`CartSummaryCard`}),(0,I.jsx)(T,{component:`CartSummaryCard`}),(0,I.jsx)(t.h4,{children:`CouponInputCard`}),(0,I.jsx)(T,{component:`CouponInputCard`}),(0,I.jsx)(t.h4,{children:`OrderStatusCard`}),(0,I.jsx)(T,{component:`OrderStatusCard`}),(0,I.jsx)(t.h4,{children:`PaymentMethodCard`}),(0,I.jsx)(T,{component:`PaymentMethodCard`}),(0,I.jsx)(t.h4,{children:`RefundStatusCard`}),(0,I.jsx)(T,{component:`RefundStatusCard`}),(0,I.jsx)(t.h4,{children:`SubscriptionSummaryCard`}),(0,I.jsx)(T,{component:`SubscriptionSummaryCard`}),(0,I.jsx)(t.h4,{children:`TaxBreakdownCard`}),(0,I.jsx)(T,{component:`TaxBreakdownCard`}),(0,I.jsx)(t.h4,{children:`VoucherEntryCard`}),(0,I.jsx)(T,{component:`VoucherEntryCard`})]})]})}function Ae(e={}){let{wrapper:t}=e.components||{};return t?(0,I.jsx)(t,{...e,children:(0,I.jsx)(ke,{...e})}):ke(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Ae as default};

package/dist/showcase/assets/composite-YicTVAO0.js

@@ -0,0 +1 @@
+import{ur as e}from"./example-C6-_Sy6B.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-DQPRIlnJ.js

@@ -0,0 +1,65 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Tr as n,gr as r,hr as i,mr as a,r as o,t as s}from"./example-C6-_Sy6B.js";import{t as c}from"./external-link-Bg-_8Uq7.js";import{t as l}from"./mail-yNXDtmNr.js";import{t as u}from"./map-pin-2WS7oVo3.js";import{t as d}from"./phone-NIZ5SwgK.js";import{D as f,a as p}from"./index-B8DVXCmf.js";import{t as m}from"./props-table-CM_1cocj.js";import{o as h,r as g,t as _}from"./avatar-QBwg3fvR.js";import{c as v,o as y,r as b,t as x,u as S}from"./item-CMRbW6s-.js";import{t as C}from"./PreviewLayout-N1PTTyZK.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:i,email:a,phone:s,location:p,avatarUrl:m,initials:C,badge:D,badgeVariant:O=`success`,onContact:k,onViewProfile:A,className:j,strings:M}){let N=f(w,M);return(0,T.jsxs)(`div`,{className:n(`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)(t,{weight:`semibold`,className:`truncate`,children:e}),!!D&&(0,T.jsx)(r,{variant:O,children:D})]}),!!i&&(0,T.jsx)(t,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:i})]})]}),!!(a||s||p)&&(0,T.jsxs)(y,{className:`mt-4 gap-0`,children:[!!a&&(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:a})})]}),!!s&&(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)(d,{})}),(0,T.jsx)(b,{children:(0,T.jsx)(S,{bold:!1,children:s})})]}),!!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)(u,{})}),(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)(o,{variant:`secondary`,buttonStyle:`solid`,icon:l,onClick:k,className:`flex-1`,children:N.contact}),!!A&&(0,T.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,icon:c,onClick:A,className:`flex-1`,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 t={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)(i,{title:`Composed · Contact card`,description:`ContactCard — name, role, email, phone, location, badge.`,layer:`composed`,status:`ready`,children:[(0,T.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,T.jsx)(s,{name:`WithAllFields`,source:N,children:(0,T.jsx)(k,{})}),(0,T.jsx)(s,{name:`WithInitialsOnly`,source:N,children:(0,T.jsx)(A,{})}),(0,T.jsx)(s,{name:`Minimal`,source:N,children:(0,T.jsx)(j,{})}),(0,T.jsx)(s,{name:`DifferentBadgeVariants`,source:N,children:(0,T.jsx)(M,{})})]}),(0,T.jsxs)(a,{title:`API`,id:`api`,children:[(0,T.jsx)(t.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-CHXwWViz.js

@@ -0,0 +1 @@
+import{Tr as e}from"./example-C6-_Sy6B.js";import{a as t}from"./index-B8DVXCmf.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-CjTwco9O.js

@@ -0,0 +1,96 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Ar as r,Cr as i,Dr as a,Hr as o,Or as s,Tr as c,hr as l,kr as u,mr as d,t as f}from"./example-C6-_Sy6B.js";import{t as p}from"./circle-check-BCxORlAM.js";import{t as m}from"./info-B1KV2DkO.js";import{a as h,r as g}from"./index-B8DVXCmf.js";import{t as _}from"./props-table-CM_1cocj.js";import{t as v}from"./customers-DvBxRjHv.js";import{t as y}from"./orders-BFwWtubb.js";import{n as b,t as x}from"./dist-CnonIdcR.js";var S=g(`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`}]]),C=h(),w=({theme:e=`system`,...t})=>(0,C.jsx)(x,{theme:e,className:`toaster group`,icons:{success:(0,C.jsx)(p,{className:`size-4`}),info:(0,C.jsx)(m,{className:`size-4`}),warning:(0,C.jsx)(a,{className:`size-4`}),error:(0,C.jsx)(S,{className:`size-4`}),loading:(0,C.jsx)(s,{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`}},...t});function T(e){let{duration:t,position:n}=o(),r=e.duration??t,i=e.position??n;return(0,C.jsx)(w,{className:`toaster--component`,...e,duration:r,position:i})}T.displayName=`Toaster`;var E=t(n(),1);function D({value:e,displayValue:t,mono:n=!1,truncate:a=!1,className:o,contentClassName:s,successMessage:l=`Copied to clipboard`}){let[d,f]=(0,E.useState)(!1),p=async()=>{try{await navigator.clipboard.writeText(e),f(!0),b.success(l),setTimeout(()=>f(!1),2e3)}catch{b.error(`Failed to copy`)}},m=t!==void 0&&typeof t!=`string`;return(0,C.jsxs)(`span`,{role:`button`,tabIndex:0,onClick:p,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p())},className:c(`copyable--component`,`group inline-flex cursor-pointer items-center gap-1.5 rounded px-1 -mx-1 transition-colors hover:bg-muted`,o),children:[m?t:(0,C.jsx)(i,{tag:`span`,className:c(n&&`font-mono`,a&&`max-w-[300px] truncate`,s),children:t??e}),(0,C.jsx)(`span`,{className:`text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100`,children:d?(0,C.jsx)(r,{className:`size-3.5 text-success`}):(0,C.jsx)(u,{className:`size-3.5`})})]})}D.displayName=`Copyable`;var O=e({CustomDisplayValue:()=>M,CustomToastMessage:()=>N,CustomerListWithCopyableEmails:()=>F,Default:()=>k,Mono:()=>A,MonoTruncate:()=>j,RealisticOrderRow:()=>P});function k(){return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(T,{}),(0,C.jsx)(D,{value:`GCT-A4B7-C9E2`})]})}function A(){return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(T,{}),(0,C.jsx)(D,{value:`b3a8a5b6-9b0a-4f01-8b46-92aa1d6a1f7d`,mono:!0})]})}function j(){return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(T,{}),(0,C.jsx)(`div`,{className:`max-w-xs`,children:(0,C.jsx)(D,{value:`b3a8a5b6-9b0a-4f01-8b46-92aa1d6a1f7d-extra-long-id`,mono:!0,truncate:!0})})]})}function M(){return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(T,{}),(0,C.jsx)(D,{value:`hello@example.com`,displayValue:(0,C.jsx)(`span`,{className:`text-primary underline underline-offset-2`,children:`hello@example.com`})})]})}function N(){return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(T,{}),(0,C.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,C.jsx)(D,{value:`42`,successMessage:`The answer was copied!`}),(0,C.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Click to see the custom toast.`})]})]})}function P(){let e=y[0],t=v.find(t=>t.id===e.customerId);return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(T,{}),(0,C.jsxs)(`div`,{className:`flex flex-col gap-3 rounded-md border bg-card p-4 w-full max-w-md`,children:[(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(`span`,{className:`text-xs uppercase text-muted-foreground`,children:`Order number`}),(0,C.jsx)(D,{value:e.number,mono:!0,successMessage:`Copied ${e.number}`})]}),(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(`span`,{className:`text-xs uppercase text-muted-foreground`,children:`Customer email`}),(0,C.jsx)(D,{value:t.email})]})]})]})}function F(){return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(T,{}),(0,C.jsx)(`div`,{className:`flex flex-col gap-1 w-full max-w-md`,children:v.slice(0,4).map(e=>(0,C.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border py-1.5 text-sm`,children:[(0,C.jsx)(`span`,{children:e.name}),(0,C.jsx)(D,{value:e.email})]},e.id))})]})}var I=`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 L(e){let t={code:`code`,p:`p`,...e.components};return O||z(`Examples`,!1),M||z(`Examples.CustomDisplayValue`,!0),N||z(`Examples.CustomToastMessage`,!0),F||z(`Examples.CustomerListWithCopyableEmails`,!0),k||z(`Examples.Default`,!0),A||z(`Examples.Mono`,!0),j||z(`Examples.MonoTruncate`,!0),P||z(`Examples.RealisticOrderRow`,!0),(0,C.jsxs)(l,{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,C.jsx)(d,{title:`Overview`,id:`overview`,children:(0,C.jsxs)(t.p,{children:[(0,C.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,C.jsx)(t.code,{children:`sonner`}),` toast confirms (mount
+a `,(0,C.jsx)(t.code,{children:`<Toaster />`}),` somewhere in the tree). Supports `,(0,C.jsx)(t.code,{children:`mono`}),`, `,(0,C.jsx)(t.code,{children:`truncate`}),`, custom
+`,(0,C.jsx)(t.code,{children:`displayValue`}),`, and a custom `,(0,C.jsx)(t.code,{children:`successMessage`}),`.`]})}),(0,C.jsx)(d,{title:`Default`,id:`default`,children:(0,C.jsx)(f,{name:`Default`,source:I,children:(0,C.jsx)(k,{})})}),(0,C.jsxs)(d,{title:`Variants`,id:`variants`,children:[(0,C.jsx)(f,{name:`Mono`,source:I,children:(0,C.jsx)(A,{})}),(0,C.jsx)(f,{name:`MonoTruncate`,source:I,children:(0,C.jsx)(j,{})}),(0,C.jsx)(f,{name:`CustomDisplayValue`,source:I,children:(0,C.jsx)(M,{})}),(0,C.jsx)(f,{name:`CustomToastMessage`,source:I,children:(0,C.jsx)(N,{})})]}),(0,C.jsxs)(d,{title:`Realistic usage`,id:`realistic`,children:[(0,C.jsx)(f,{name:`RealisticOrderRow`,source:I,children:(0,C.jsx)(P,{})}),(0,C.jsx)(f,{name:`CustomerListWithCopyableEmails`,source:I,children:(0,C.jsx)(F,{})})]}),(0,C.jsx)(d,{title:`API`,id:`api`,children:(0,C.jsx)(_,{component:`Copyable`})})]})}function R(e={}){let{wrapper:t}=e.components||{};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(L,{...e})}):L(e)}function z(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{R as default};

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

@@ -0,0 +1,113 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Tr as n,gr as r,hr as i,mr as a,r as o,t as s}from"./example-C6-_Sy6B.js";import{D as c,a as l}from"./index-B8DVXCmf.js";import{t as u}from"./props-table-CM_1cocj.js";import{t as d}from"./smart-card-7szg_qSt.js";import{t as f}from"./stacked-avatars-DORVEni2.js";import{i as p,n as m,r as h,t as g,u as _}from"./item-CMRbW6s-.js";var v={participants:`Participants`,progress:`Progress`},y=l(),b=`rounded-xl bg-background/80 ring-1 ring-border/60 p-3`,x=`bg-gradient-to-br from-violet-500 via-fuchsia-500 to-pink-500`;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:i,badges:a=[],participants:s=[],extraParticipants:l=0,progressPercent:u,actionLabel:C,onAction:w,className:T,strings:E,variant:D=`default`,gradient:O=x}){let k=c(v,E),A=s.length+l,j=S(s);return D===`minimal`?(0,y.jsxs)(g,{variant:`outline`,className:n(`course-card--component`,`hover:bg-muted/30 transition-colors`,T),children:[(0,y.jsxs)(h,{children:[(0,y.jsx)(_,{children:e}),!!i&&(0,y.jsx)(p,{clamp:1,children:i})]}),(0,y.jsxs)(m,{children:[s.length>0&&(0,y.jsx)(f,{users:j,max:3,size:`sm`,overflowFormatter:()=>`+${l||0}`,showOverflow:l>0}),u!==void 0&&(0,y.jsxs)(t,{size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:[u,`%`]}),!!C&&(0,y.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,onClick:w,children:C})]})]}):D===`gradient`?(0,y.jsxs)(`div`,{className:n(`course-card--component relative overflow-hidden rounded-lg text-white shadow-sm`,O,T),children:[(0,y.jsxs)(`div`,{className:`p-5`,children:[(0,y.jsx)(t,{size:`base`,weight:`semibold`,className:`text-white`,children:e}),!!i&&(0,y.jsx)(t,{className:`text-white/80 mt-0.5`,children:i}),a.length>0&&(0,y.jsx)(`div`,{className:`mt-3 flex flex-wrap gap-1.5`,children:a.map(e=>(0,y.jsx)(`span`,{className:`inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-xxs font-medium text-white backdrop-blur-sm`,children:e.label},e.label))})]}),(s.length>0||u!==void 0)&&(0,y.jsxs)(`div`,{className:`bg-black/15 px-5 py-3 backdrop-blur-sm flex items-center gap-4`,children:[s.length>0&&(0,y.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,y.jsx)(f,{users:j,max:3,size:`sm`,showOverflow:!1}),(0,y.jsxs)(t,{size:`xs`,className:`text-white/80`,children:[A,` `,k.participants.toLowerCase()]})]}),u!==void 0&&(0,y.jsxs)(`div`,{className:`ml-auto flex items-center gap-2`,children:[(0,y.jsx)(`div`,{className:`h-1.5 w-24 overflow-hidden rounded-full bg-white/25`,children:(0,y.jsx)(`div`,{className:`h-full rounded-full bg-white`,style:{width:`${u}%`}})}),(0,y.jsxs)(t,{size:`xs`,className:`text-white/90 tabular-nums`,children:[u,`%`]})]})]}),!!C&&(0,y.jsx)(`div`,{className:`px-5 pb-5 pt-0`,children:(0,y.jsx)(o,{variant:`secondary`,fullWidth:!0,onClick:w,className:n(`rounded-xl bg-white/95 text-zinc-950 shadow-sm hover:bg-white hover:text-zinc-950`,`dark:bg-white/95 dark:text-zinc-950 dark:hover:bg-white dark:hover:text-zinc-950`),children:C})})]}):(0,y.jsxs)(d,{title:e,description:i,className:n(`course-card--component bg-gradient-to-b from-muted/30 to-card`,T),children:[a.length>0&&(0,y.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:a.map(e=>(0,y.jsx)(r,{variant:e.variant,children:e.label},e.label))}),(s.length>0||u!==void 0)&&(0,y.jsxs)(`div`,{className:`mt-4 grid grid-cols-2 gap-2.5`,children:[s.length>0&&(0,y.jsxs)(`div`,{className:b,children:[(0,y.jsx)(t,{size:`xs`,type:`secondary`,children:k.participants}),(0,y.jsx)(`div`,{className:`mt-2`,children:(0,y.jsx)(f,{users:j,max:4,size:`sm`,showOverflow:l>0,overflowFormatter:()=>`+${l}`})})]}),u!==void 0&&(0,y.jsxs)(`div`,{className:b,children:[(0,y.jsx)(t,{size:`xs`,type:`secondary`,children:k.progress}),(0,y.jsxs)(`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}%`}})}),(0,y.jsxs)(t,{size:`xs`,type:`secondary`,className:`mt-1 tabular-nums`,children:[u,`%`]})]})]})]}),!!C&&(0,y.jsx)(o,{variant:`dark`,className:`mt-4 w-full rounded-xl`,onClick:w,children:C})]})}C.displayName=`CourseCard`;var w=e({DefaultWithEverything:()=>E,GradientCustomAmberRose:()=>k,GradientCustomCyanEmerald:()=>O,GradientVioletFuchsiaPinkDefault:()=>D,Minimal:()=>A}),T=[{name:`Vasilis Smith`},{name:`Sara Martinova`},{name:`Kostas Williams`}];function E(){return(0,y.jsx)(y.Fragment,{children:(0,y.jsx)(C,{title:`Wine Tasting Masterclass`,description:`A curated journey through Thracian Valley wines with a certified sommelier.`,badges:[{label:`Group Experience`,variant:`success`},{label:`Premium`,variant:`warning`}],participants:T,extraParticipants:3,progressPercent:60,actionLabel:`View Experience Details`,onAction:()=>{}})})}function D(){return(0,y.jsx)(y.Fragment,{children:(0,y.jsx)(C,{variant:`gradient`,title:`Sunset Photography Workshop`,description:`Three-hour shoot with golden-hour mentorship in central New York.`,badges:[{label:`Workshop`,variant:`info`}],participants:T,extraParticipants:5,progressPercent:40,actionLabel:`Reserve a Seat`,onAction:()=>{}})})}function O(){return(0,y.jsx)(y.Fragment,{children:(0,y.jsx)(C,{variant:`gradient`,gradient:`bg-gradient-to-br from-cyan-500 via-teal-500 to-emerald-500`,title:`Coastal Hike & Lunch`,description:`Scenic Black Sea coast walk followed by a tasting menu at a local kitchen.`,participants:T,extraParticipants:1,progressPercent:75,actionLabel:`Join the Hike`,onAction:()=>{}})})}function k(){return(0,y.jsx)(y.Fragment,{children:(0,y.jsx)(C,{variant:`gradient`,gradient:`bg-gradient-to-br from-amber-500 via-orange-500 to-rose-500`,title:`Pottery Studio Day`,description:`From wedging to glazing — take home two finished pieces.`,participants:T.slice(0,2),actionLabel:`Book a Spot`,onAction:()=>{}})})}function A(){return(0,y.jsx)(y.Fragment,{children:(0,y.jsxs)(`div`,{className:`space-y-2`,children:[(0,y.jsx)(C,{variant:`minimal`,title:`Wine Tasting Masterclass`,description:`Thracian Valley · 2 hrs`,participants:T,extraParticipants:3,progressPercent:60,actionLabel:`View`,onAction:()=>{}}),(0,y.jsx)(C,{variant:`minimal`,title:`Sunset Photography Workshop`,description:`New York · 3 hrs · golden hour`,participants:T,progressPercent:20,actionLabel:`Reserve`,onAction:()=>{}}),(0,y.jsx)(C,{variant:`minimal`,title:`Coastal Hike & Lunch`,description:`Black Sea coast · full day`})]})})}var j=`import { CourseCard } from '@/components/composed/cards/course-card';
+
+const SAMPLE_PARTICIPANTS = [
+	{ name: 'Vasilis Smith' },
+	{ name: 'Sara Martinova' },
+	{ name: 'Kostas Williams' },
+];
+
+export function DefaultWithEverything() {
+	return (
+		<>
+			<CourseCard
+								title="Wine Tasting Masterclass"
+								description="A curated journey through Thracian Valley wines with a certified sommelier."
+								badges={[
+									{ label: 'Group Experience', variant: 'success' },
+									{ label: 'Premium', variant: 'warning' },
+								]}
+								participants={SAMPLE_PARTICIPANTS}
+								extraParticipants={3}
+								progressPercent={60}
+								actionLabel="View Experience Details"
+								onAction={() => {}}
+							/>
+		</>
+	);
+}
+
+export function GradientVioletFuchsiaPinkDefault() {
+	return (
+		<>
+			<CourseCard
+								variant="gradient"
+								title="Sunset Photography Workshop"
+								description="Three-hour shoot with golden-hour mentorship in central New York."
+								badges={[{ label: 'Workshop', variant: 'info' }]}
+								participants={SAMPLE_PARTICIPANTS}
+								extraParticipants={5}
+								progressPercent={40}
+								actionLabel="Reserve a Seat"
+								onAction={() => {}}
+							/>
+		</>
+	);
+}
+
+export function GradientCustomCyanEmerald() {
+	return (
+		<>
+			<CourseCard
+								variant="gradient"
+								gradient="bg-gradient-to-br from-cyan-500 via-teal-500 to-emerald-500"
+								title="Coastal Hike & Lunch"
+								description="Scenic Black Sea coast walk followed by a tasting menu at a local kitchen."
+								participants={SAMPLE_PARTICIPANTS}
+								extraParticipants={1}
+								progressPercent={75}
+								actionLabel="Join the Hike"
+								onAction={() => {}}
+							/>
+		</>
+	);
+}
+
+export function GradientCustomAmberRose() {
+	return (
+		<>
+			<CourseCard
+								variant="gradient"
+								gradient="bg-gradient-to-br from-amber-500 via-orange-500 to-rose-500"
+								title="Pottery Studio Day"
+								description="From wedging to glazing — take home two finished pieces."
+								participants={SAMPLE_PARTICIPANTS.slice(0, 2)}
+								actionLabel="Book a Spot"
+								onAction={() => {}}
+							/>
+		</>
+	);
+}
+
+export function Minimal() {
+	return (
+		<>
+			<div className="space-y-2">
+								<CourseCard
+									variant="minimal"
+									title="Wine Tasting Masterclass"
+									description="Thracian Valley · 2 hrs"
+									participants={SAMPLE_PARTICIPANTS}
+									extraParticipants={3}
+									progressPercent={60}
+									actionLabel="View"
+									onAction={() => {}}
+								/>
+								<CourseCard
+									variant="minimal"
+									title="Sunset Photography Workshop"
+									description="New York · 3 hrs · golden hour"
+									participants={SAMPLE_PARTICIPANTS}
+									progressPercent={20}
+									actionLabel="Reserve"
+									onAction={() => {}}
+								/>
+								<CourseCard
+									variant="minimal"
+									title="Coastal Hike & Lunch"
+									description="Black Sea coast · full day"
+								/>
+							</div>
+		</>
+	);
+}
+`;function M(e){let t={h4:`h4`,...e.components};return w||P(`Examples`,!1),E||P(`Examples.DefaultWithEverything`,!0),k||P(`Examples.GradientCustomAmberRose`,!0),O||P(`Examples.GradientCustomCyanEmerald`,!0),D||P(`Examples.GradientVioletFuchsiaPinkDefault`,!0),A||P(`Examples.Minimal`,!0),(0,y.jsxs)(i,{title:`Composed · Course card`,description:`Group experience with participants & progress.`,layer:`composed`,status:`ready`,children:[(0,y.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,y.jsx)(s,{name:`DefaultWithEverything`,source:j,children:(0,y.jsx)(E,{})}),(0,y.jsx)(s,{name:`GradientVioletFuchsiaPinkDefault`,source:j,children:(0,y.jsx)(D,{})}),(0,y.jsx)(s,{name:`GradientCustomCyanEmerald`,source:j,children:(0,y.jsx)(O,{})}),(0,y.jsx)(s,{name:`GradientCustomAmberRose`,source:j,children:(0,y.jsx)(k,{})}),(0,y.jsx)(s,{name:`Minimal`,source:j,children:(0,y.jsx)(A,{})})]}),(0,y.jsxs)(a,{title:`API`,id:`api`,children:[(0,y.jsx)(t.h4,{children:`CourseCard`}),(0,y.jsx)(u,{component:`CourseCard`})]})]})}function N(e={}){let{wrapper:t}=e.components||{};return t?(0,y.jsx)(t,{...e,children:(0,y.jsx)(M,{...e})}):M(e)}function P(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{N as default};

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

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

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