admin-ui-starter-kit 0.1.0

package/dist/showcase/assets/currency-VuqnKj_Y.js

@@ -0,0 +1,149 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{Ir as t,cr as n,gr as r,sr as i,t as a,vr as o}from"./example-DPfw-R7_.js";import{t as s}from"./arrow-right-DlEpbqEk.js";import{a as c,i as l}from"./index-B-Z7p0So.js";import{t as u}from"./props-table-BzUnIcv-.js";import{t as d}from"./orders-DNn7r9k_.js";import{n as f,t as p}from"./money-display-C__61373.js";var m=c(),h=(0,m.jsx)(s,{className:`size-3 shrink-0 opacity-60`,"aria-hidden":`true`});function g({pair:e,emptyLabel:n=`—`,separator:i=h,className:a,size:s,tag:c=`span`,...l}){let{defaultTextSize:u}=t(),d=s??u??`sm`,{formatAmount:p}=f(),g=e?.source?.value??null,_=e?.source?.currency??null,v=e?.source?.symbol??null,y=e?.target?.value??null,b=e?.target?.currency??null,x=e?.target?.symbol??null;return!g||!y?(0,m.jsx)(r,{tag:c,size:d,type:`secondary`,className:o(`currency-pair-preview--component`,`tabular-nums`,a),...l,children:n}):(0,m.jsxs)(r,{tag:c,size:d,className:o(`inline-flex items-center gap-1.5 tabular-nums`,a),...l,children:[(0,m.jsx)(`span`,{children:p(g,String(_??``),v??void 0)}),(0,m.jsx)(`span`,{className:`inline-flex items-center text-muted-foreground`,"aria-hidden":`true`,children:i}),(0,m.jsx)(`span`,{children:p(y,String(b??``),x??void 0)})]})}g.displayName=`CurrencyPairPreview`;var _=e({CurrencyPairPreviewExample:()=>E,Default:()=>y,EmptyState:()=>S,MultipleCurrencies:()=>x,PairInlineEmphasisVariants:()=>w,PairMinimalVariant:()=>T,PairStackedEmphasisVariants:()=>C,ProviderConfigDualPricing:()=>D,RealisticOrdersList:()=>O,Sizes:()=>b}),v={primary:{amount:124.5,currency:`USD`},secondary:{amount:63.66,currency:`EUR`}};function y(){return(0,m.jsx)(p,{money:{amount:124.5,currency:`USD`}})}function b(){return(0,m.jsx)(`div`,{className:`flex flex-col gap-2`,children:[`xs`,`sm`,`base`,`lg`,`xl`].map(e=>(0,m.jsx)(p,{money:{amount:1850,currency:`EUR`},size:e},e))})}function x(){return(0,m.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,m.jsx)(p,{money:{amount:124.5,currency:`USD`}}),(0,m.jsx)(p,{money:{amount:1850,currency:`EUR`}}),(0,m.jsx)(p,{money:{amount:9800,currency:`JPY`}}),(0,m.jsx)(p,{money:{amount:350,currency:`GBP`}})]})}function S(){return(0,m.jsx)(p,{emptyLabel:`—`})}function C(){return(0,m.jsx)(`div`,{className:`flex flex-col gap-3`,children:[`discrete`,`muted`,`match`,`hidden`].map(e=>(0,m.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,m.jsx)(`span`,{className:`w-20 text-xs uppercase text-muted-foreground`,children:e}),(0,m.jsx)(p,{moneyPair:v,showPair:!0,size:`base`,secondaryEmphasis:e})]},e))})}function w(){return(0,m.jsx)(`div`,{className:`flex flex-col gap-3`,children:[`discrete`,`muted`,`match`].map(e=>(0,m.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,m.jsx)(`span`,{className:`w-20 text-xs uppercase text-muted-foreground`,children:e}),(0,m.jsx)(p,{moneyPair:v,showPair:!0,dualPricingDisplay:`inline`,size:`base`,secondaryEmphasis:e})]},e))})}function T(){return(0,m.jsx)(p,{moneyPair:v,showPair:!0,variant:`minimal`,size:`base`})}function E(){return(0,m.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,m.jsx)(g,{pair:{source:{value:`100.00`,currency:`EUR`,symbol:`€`},target:{value:`195.58`,currency:`USD`}}}),(0,m.jsx)(g,{pair:null,emptyLabel:`No conversion`})]})}function D(){return(0,m.jsx)(l,{config:{money:{defaultCurrency:`EUR`,displayCurrency:`EUR`,dualPricingEnabled:!0,displayMode:`dual`,formatMode:`with_symbol`}},children:(0,m.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,m.jsx)(p,{moneyPair:{primary:{amount:49.99,currency:`EUR`},secondary:{amount:97.78,currency:`USD`}},size:`lg`}),(0,m.jsx)(g,{pair:{source:{value:`49.99`,currency:`EUR`,symbol:`€`},target:{value:`97.78`,currency:`USD`}},size:`base`})]})})}function O(){return(0,m.jsx)(`div`,{className:`flex flex-col gap-1 w-full max-w-md`,children:d.slice(0,5).map(e=>(0,m.jsxs)(`div`,{className:`flex items-center justify-between border-b border-border py-1.5 text-sm`,children:[(0,m.jsx)(`span`,{className:`font-mono text-xs`,children:e.number}),(0,m.jsx)(p,{money:{amount:e.totalUsd,currency:`USD`}})]},e.id))})}var k=`import { MoneyDisplay } from '@/components/base/display/money-display';
+import { CurrencyPairPreview } from '@/components/base/currency/currency-pair-preview';
+import { UIProvider } from '@/lib/ui-provider';
+import { MOCK_ORDERS } from '@/preview/_mocks';
+
+const PAIR = {
+	primary: { amount: 124.5, currency: 'USD' },
+	secondary: { amount: 63.66, currency: 'EUR' },
+} as const;
+
+export function Default() {
+	return <MoneyDisplay money={{ amount: 124.5, currency: 'USD' }} />;
+}
+
+export function Sizes() {
+	const sizes = ['xs', 'sm', 'base', 'lg', 'xl'] as const;
+	return (
+		<div className="flex flex-col gap-2">
+			{sizes.map((s) => (
+				<MoneyDisplay key={s} money={{ amount: 1850, currency: 'EUR' }} size={s} />
+			))}
+		</div>
+	);
+}
+
+export function MultipleCurrencies() {
+	return (
+		<div className="flex flex-col gap-2">
+			<MoneyDisplay money={{ amount: 124.5, currency: 'USD' }} />
+			<MoneyDisplay money={{ amount: 1850, currency: 'EUR' }} />
+			<MoneyDisplay money={{ amount: 9800, currency: 'JPY' }} />
+			<MoneyDisplay money={{ amount: 350, currency: 'GBP' }} />
+		</div>
+	);
+}
+
+export function EmptyState() {
+	return <MoneyDisplay emptyLabel="—" />;
+}
+
+export function PairStackedEmphasisVariants() {
+	const variants = ['discrete', 'muted', 'match', 'hidden'] as const;
+	return (
+		<div className="flex flex-col gap-3">
+			{variants.map((v) => (
+				<div key={v} className="flex items-center gap-3">
+					<span className="w-20 text-xs uppercase text-muted-foreground">{v}</span>
+					<MoneyDisplay moneyPair={PAIR} showPair size="base" secondaryEmphasis={v} />
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function PairInlineEmphasisVariants() {
+	const variants = ['discrete', 'muted', 'match'] as const;
+	return (
+		<div className="flex flex-col gap-3">
+			{variants.map((v) => (
+				<div key={v} className="flex items-center gap-3">
+					<span className="w-20 text-xs uppercase text-muted-foreground">{v}</span>
+					<MoneyDisplay
+						moneyPair={PAIR}
+						showPair
+						dualPricingDisplay="inline"
+						size="base"
+						secondaryEmphasis={v}
+					/>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function PairMinimalVariant() {
+	return (
+		<MoneyDisplay
+			moneyPair={PAIR}
+			showPair
+			variant="minimal"
+			size="base"
+		/>
+	);
+}
+
+export function CurrencyPairPreviewExample() {
+	return (
+		<div className="flex flex-col gap-2">
+			<CurrencyPairPreview
+				pair={{
+					source: { value: '100.00', currency: 'EUR', symbol: '€' },
+					target: { value: '195.58', currency: 'USD' },
+				}}
+			/>
+			<CurrencyPairPreview pair={null} emptyLabel="No conversion" />
+		</div>
+	);
+}
+
+export function ProviderConfigDualPricing() {
+	return (
+		<UIProvider
+			config={{
+				money: {
+					defaultCurrency: 'EUR',
+					displayCurrency: 'EUR',
+					dualPricingEnabled: true,
+					displayMode: 'dual',
+					formatMode: 'with_symbol',
+				},
+			}}
+		>
+			<div className="flex flex-col gap-3">
+				<MoneyDisplay
+					moneyPair={{
+						primary: { amount: 49.99, currency: 'EUR' },
+						secondary: { amount: 97.78, currency: 'USD' },
+					}}
+					size="lg"
+				/>
+				<CurrencyPairPreview
+					pair={{
+						source: { value: '49.99', currency: 'EUR', symbol: '€' },
+						target: { value: '97.78', currency: 'USD' },
+					}}
+					size="base"
+				/>
+			</div>
+		</UIProvider>
+	);
+}
+
+export function RealisticOrdersList() {
+	return (
+		<div className="flex flex-col gap-1 w-full max-w-md">
+			{MOCK_ORDERS.slice(0, 5).map((o) => (
+				<div key={o.id} className="flex items-center justify-between border-b border-border py-1.5 text-sm">
+					<span className="font-mono text-xs">{o.number}</span>
+					<MoneyDisplay money={{ amount: o.totalUsd, currency: 'USD' }} />
+				</div>
+			))}
+		</div>
+	);
+}
+`;function A(e){let t={code:`code`,p:`p`,...e.components};return _||M(`Examples`,!1),E||M(`Examples.CurrencyPairPreviewExample`,!0),y||M(`Examples.Default`,!0),S||M(`Examples.EmptyState`,!0),x||M(`Examples.MultipleCurrencies`,!0),w||M(`Examples.PairInlineEmphasisVariants`,!0),T||M(`Examples.PairMinimalVariant`,!0),C||M(`Examples.PairStackedEmphasisVariants`,!0),D||M(`Examples.ProviderConfigDualPricing`,!0),O||M(`Examples.RealisticOrdersList`,!0),b||M(`Examples.Sizes`,!0),(0,m.jsxs)(n,{title:`Currency`,description:`MoneyDisplay and CurrencyPairPreview — locale-aware, dual-pricing-aware money rendering driven by useCurrency() / UIProvider config.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/currency`,children:[(0,m.jsx)(i,{title:`Overview`,id:`overview`,children:(0,m.jsxs)(t.p,{children:[(0,m.jsx)(t.code,{children:`MoneyDisplay`}),` renders a primary (and optional secondary) currency amount,
+using the active `,(0,m.jsx)(t.code,{children:`useCurrency()`}),` config for formatting, dual-pricing, and
+display mode. `,(0,m.jsx)(t.code,{children:`CurrencyPairPreview`}),` renders an inline `,(0,m.jsx)(t.code,{children:`source → target`}),`
+conversion. Both honour `,(0,m.jsx)(t.code,{children:`UIProvider`}),` config so consumers can flip the entire
+app to dual pricing or a different default currency in one place.`]})}),(0,m.jsx)(i,{title:`Default`,id:`default`,children:(0,m.jsx)(a,{name:`Default`,source:k,children:(0,m.jsx)(y,{})})}),(0,m.jsx)(i,{title:`Sizes`,id:`sizes`,children:(0,m.jsx)(a,{name:`Sizes`,source:k,children:(0,m.jsx)(b,{})})}),(0,m.jsxs)(i,{title:`Currencies & empty state`,id:`currencies`,children:[(0,m.jsx)(a,{name:`MultipleCurrencies`,source:k,children:(0,m.jsx)(x,{})}),(0,m.jsx)(a,{name:`EmptyState`,source:k,children:(0,m.jsx)(S,{})})]}),(0,m.jsx)(i,{title:`Dual pricing — stacked`,id:`dual-stacked`,children:(0,m.jsx)(a,{name:`PairStackedEmphasisVariants`,source:k,children:(0,m.jsx)(C,{})})}),(0,m.jsxs)(i,{title:`Dual pricing — inline`,id:`dual-inline`,children:[(0,m.jsx)(a,{name:`PairInlineEmphasisVariants`,source:k,children:(0,m.jsx)(w,{})}),(0,m.jsx)(a,{name:`PairMinimalVariant`,source:k,children:(0,m.jsx)(T,{})})]}),(0,m.jsx)(i,{title:`CurrencyPairPreview`,id:`pair-preview`,children:(0,m.jsx)(a,{name:`CurrencyPairPreviewExample`,source:k,children:(0,m.jsx)(E,{})})}),(0,m.jsx)(i,{title:`UIProvider configuration`,id:`provider`,children:(0,m.jsx)(a,{name:`ProviderConfigDualPricing`,source:k,children:(0,m.jsx)(D,{})})}),(0,m.jsx)(i,{title:`Realistic usage`,id:`realistic`,children:(0,m.jsx)(a,{name:`RealisticOrdersList`,source:k,children:(0,m.jsx)(O,{})})}),(0,m.jsxs)(i,{title:`API`,id:`api`,children:[(0,m.jsx)(u,{component:`MoneyDisplay`}),(0,m.jsx)(u,{component:`CurrencyPairPreview`})]})]})}function j(e={}){let{wrapper:t}=e.components||{};return t?(0,m.jsx)(t,{...e,children:(0,m.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/customers-BETQwFRp.js

@@ -0,0 +1 @@
+var e=[{id:`c-1`,name:`Sarah Smith`,email:`sarah@northwind.io`,avatarSeed:`sarah`,city:`Berlin`,country:`DE`,totalSpentUsd:12450},{id:`c-2`,name:`Marcus Lee`,email:`marcus@coldroast.com`,avatarSeed:`marcus`,city:`Brooklyn`,country:`US`,totalSpentUsd:8120},{id:`c-3`,name:`Aiko Tanaka`,email:`aiko@kyotostudio.jp`,avatarSeed:`aiko`,city:`Kyoto`,country:`JP`,totalSpentUsd:4980},{id:`c-4`,name:`Diego Ramos`,email:`diego@sierra.cl`,avatarSeed:`diego`,city:`Santiago`,country:`CL`,totalSpentUsd:21300},{id:`c-5`,name:`Priya Patel`,email:`priya@maitra.in`,avatarSeed:`priya`,city:`Mumbai`,country:`IN`,totalSpentUsd:1640},{id:`c-6`,name:`Elena Rossi`,email:`elena@vinoteca.it`,avatarSeed:`elena`,city:`Florence`,country:`IT`,totalSpentUsd:6890},{id:`c-7`,name:`Theo Carter`,email:`theo@bluffworks.us`,avatarSeed:`theo`,city:`Portland`,country:`US`,totalSpentUsd:3220},{id:`c-8`,name:`Nadia Haddad`,email:`nadia@oasisco.ae`,avatarSeed:`nadia`,city:`Dubai`,country:`AE`,totalSpentUsd:17500}];export{e as t};

package/dist/showcase/assets/dark-surfaces-DEyBimFz.js

@@ -0,0 +1,90 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{Cr as n,cr as r,gr as i,hr as a,r as o,sr as s,t as c,vr as l}from"./example-DPfw-R7_.js";import{t as u}from"./chevron-down-at2vrt1V.js";import{t as d}from"./chevron-right-BNy0Or0x.js";import{t as f}from"./chevron-up-CX7619BJ.js";import{t as p}from"./circle-question-mark-BgS4fb6N.js";import{t as m}from"./credit-card--5vg7bQy.js";import{t as h}from"./send-BhjEdZ06.js";import{D as g,a as _,k as v}from"./index-B-Z7p0So.js";import{t as y}from"./props-table-BzUnIcv-.js";import{t as b}from"./icon-badge-BgRFYZEc.js";import{t as x}from"./separator-CZ_sPWQj.js";import{t as S}from"./inline-stat-D2aaM1Vt.js";import{c as C,i as w,n as T,o as E,r as D,s as O,t as k,u as A}from"./item-CCu0Ufaq.js";var j={title:`Booking Receipt`,statusConfirmed:`Confirmed`,amountPaidLabel:`Amount Paid`},M={successTitle:`Payment Successful`,successDescription:`Transaction completed`,detailsToggle:`Payment Details`},N={defaultTitle:`Details`},P={title:`Order Items`,totalLabel:`Total`},F={title:`Outstanding Balance`,dueDateLabel:`Due Date`,customerLabel:`Customer`,sendReminder:`Send Reminder`,recordPayment:`Record Payment`},I=t(v(),1),L=_();function R({amount:e,details:t=[],helpText:r,onHelp:s,className:c,strings:m}){let h=g(M,m),[_,v]=(0,I.useState)(!0);return(0,L.jsxs)(`div`,{className:l(`dark-payment--component`,`dark rounded-3xl bg-card text-card-foreground p-6 shadow-lg ring-1 ring-border`,c),children:[(0,L.jsxs)(`div`,{className:`flex flex-col items-center text-center`,children:[(0,L.jsx)(b,{icon:n,tone:`success`,size:`lg`,className:`size-14 [&>svg]:size-7`}),(0,L.jsx)(a,{tag:`h5`,className:`mt-3 !border-0 !pb-0`,children:h.successTitle}),(0,L.jsx)(i,{size:`xs`,type:`secondary`,children:h.successDescription}),(0,L.jsx)(a,{tag:`h3`,className:`text-3xl tabular-nums tracking-tight border-none pb-0`,children:e})]}),t.length>0&&(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(x,{className:`my-5`}),(0,L.jsxs)(o,{variant:`light`,buttonStyle:`ghost`,onClick:()=>v(!_),className:`flex w-full items-center justify-between border-0 p-0 h-auto text-muted-foreground hover:text-foreground`,children:[(0,L.jsx)(i,{weight:`medium`,children:h.detailsToggle}),_?(0,L.jsx)(f,{className:`size-4`}):(0,L.jsx)(u,{className:`size-4`})]}),!!_&&(0,L.jsx)(`div`,{className:`mt-3 space-y-2.5`,children:t.map(e=>(0,L.jsx)(S,{label:e.label,value:e.value,labelClassName:`text-sm`,valueClassName:`text-sm font-medium`},e.label))})]}),!!r&&(0,L.jsxs)(k,{variant:`muted`,className:l(`mt-5`,s&&`cursor-pointer`),onClick:s,children:[(0,L.jsx)(C,{variant:`icon`,className:`text-muted-foreground`,children:(0,L.jsx)(p,{})}),(0,L.jsx)(D,{children:(0,L.jsx)(A,{bold:!1,className:`text-muted-foreground`,children:r})}),(0,L.jsx)(T,{children:(0,L.jsx)(d,{className:`size-4 text-muted-foreground`})})]})]})}R.displayName=`DarkPaymentConfirmation`;function z({referenceCode:e,status:t,details:n=[],amountPaid:r,className:o,strings:s}){let c=g(j,s),u=t??c.statusConfirmed;return(0,L.jsxs)(`div`,{className:l(`booking-receipt--component`,`dark rounded-3xl bg-card text-card-foreground p-6 shadow-lg ring-1 ring-border`,o),children:[(0,L.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,L.jsx)(a,{tag:`h6`,className:`!border-0 !pb-0`,children:c.title}),(0,L.jsxs)(i,{size:`xs`,weight:`medium`,className:`flex items-center gap-1.5 rounded-full bg-success/15 px-2.5 py-1 text-success`,children:[(0,L.jsx)(`span`,{className:`size-1.5 rounded-full bg-success`}),u]})]}),n.length>0&&(0,L.jsx)(`div`,{className:`mt-5 space-y-3 text-sm`,children:n.map(e=>(0,L.jsx)(S,{label:e.label,value:e.value,labelClassName:`text-sm`,valueClassName:`text-sm font-medium`},e.label))}),!!e&&(0,L.jsx)(i,{tag:`div`,size:`xs`,type:`secondary`,align:`center`,className:`mt-4 rounded-xl bg-muted p-3 font-mono tracking-wider`,children:e}),(0,L.jsx)(S,{className:`mt-4 border-t border-border pt-4`,label:c.amountPaidLabel,value:(0,L.jsx)(a,{tag:`h4`,className:`text-xl border-none pb-0`,children:r}),labelClassName:`text-sm`})]})}z.displayName=`BookingReceiptDark`;function B({title:e,items:t,totalLabel:n,totalValue:r,defaultOpen:s=!0,className:c,strings:d}){let p=g(N,d),m=e??p.defaultTitle,[h,_]=(0,I.useState)(s);return(0,L.jsxs)(`div`,{className:l(`dark-info-panel--component`,`dark rounded-3xl bg-card text-card-foreground p-5 shadow-lg ring-1 ring-border`,c),children:[(0,L.jsxs)(o,{variant:`light`,buttonStyle:`ghost`,onClick:()=>_(!h),className:`flex w-full items-center justify-between border-0 p-0 h-auto`,children:[(0,L.jsx)(a,{tag:`h6`,className:`!border-0 !pb-0`,children:m}),h?(0,L.jsx)(f,{className:`size-4 text-muted-foreground`}):(0,L.jsx)(u,{className:`size-4 text-muted-foreground`})]}),!!h&&(0,L.jsxs)(`div`,{className:`mt-4 space-y-3 text-sm`,children:[t.map(e=>(0,L.jsxs)(`div`,{className:`flex justify-between`,children:[(0,L.jsx)(i,{type:`secondary`,children:e.label}),(0,L.jsx)(i,{weight:`medium`,className:l(e.highlight&&`text-success`),children:e.value})]},e.label)),!!n&&!!r&&(0,L.jsx)(`div`,{className:`border-t border-dashed border-border pt-3`,children:(0,L.jsxs)(`div`,{className:`flex justify-between`,children:[(0,L.jsx)(i,{weight:`semibold`,type:`secondary`,children:n}),(0,L.jsx)(i,{weight:`semibold`,children:r})]})})]})]})}B.displayName=`DarkInfoPanel`;function V({items:e,summary:t=[],total:n,className:r,strings:o}){let s=g(P,o);return(0,L.jsxs)(`div`,{className:l(`order-items--component`,`dark rounded-3xl bg-card text-card-foreground p-5 shadow-lg ring-1 ring-border`,r),children:[(0,L.jsx)(a,{tag:`h6`,className:`!border-0 !pb-0`,children:s.title}),(0,L.jsx)(E,{className:`mt-4 gap-3`,children:e.map(e=>(0,L.jsxs)(k,{variant:`muted`,className:`flex-col items-stretch gap-2`,children:[(0,L.jsxs)(O,{children:[(0,L.jsx)(i,{size:`xs`,type:`secondary`,children:e.vendor}),!!e.badge&&(0,L.jsx)(i,{size:`xs`,weight:`medium`,className:`rounded-full bg-secondary px-3 py-1 text-secondary-foreground`,children:e.badge})]}),(0,L.jsxs)(`div`,{className:`flex w-full items-center justify-between gap-3`,children:[(0,L.jsxs)(D,{children:[(0,L.jsx)(A,{children:e.name}),(0,L.jsx)(w,{clamp:1,children:(0,L.jsxs)(`span`,{className:`inline-flex items-center gap-1.5`,children:[!!e.color&&(0,L.jsx)(`span`,{className:l(`size-2.5 rounded-full`,e.color)}),`x`,e.qty]})})]}),(0,L.jsx)(T,{children:(0,L.jsx)(i,{weight:`bold`,children:e.price})})]})]},e.name))}),!!(t.length>0||n)&&(0,L.jsxs)(`div`,{className:`mt-4 space-y-2 border-t border-border pt-4 text-sm`,children:[t.map(e=>(0,L.jsx)(S,{label:e.label,value:e.value,labelClassName:`text-sm text-muted-foreground`,valueClassName:`text-sm text-muted-foreground`},e.label)),!!n&&(0,L.jsx)(S,{className:`border-t border-dashed border-border pt-2`,label:s.totalLabel,value:n,labelClassName:`text-sm font-semibold`,valueClassName:`text-sm font-semibold`})]})]})}V.displayName=`OrderItemsCard`;function H({amount:e,amountColor:t=`text-warning`,dueDate:n,customer:r,onSendReminder:s,onRecordPayment:c,className:u,strings:d}){let f=g(F,d);return(0,L.jsxs)(`div`,{className:l(`outstanding-balance--component`,`dark rounded-3xl bg-card text-card-foreground p-6 shadow-lg ring-1 ring-border`,u),children:[(0,L.jsx)(i,{size:`xs`,weight:`medium`,type:`secondary`,className:`uppercase tracking-wider`,children:f.title}),(0,L.jsx)(a,{tag:`h3`,className:l(`text-3xl tabular-nums tracking-tight border-none pb-0`,t),children:e}),(0,L.jsxs)(`div`,{className:`mt-4 space-y-2`,children:[(0,L.jsx)(S,{label:f.dueDateLabel,value:(0,L.jsxs)(`span`,{className:`flex items-center gap-1.5`,children:[(0,L.jsx)(`span`,{className:`size-2 rounded-full bg-destructive animate-pulse`}),(0,L.jsx)(i,{tag:`span`,weight:`medium`,children:n})]}),labelClassName:`text-xs`}),(0,L.jsx)(S,{label:f.customerLabel,value:r,labelClassName:`text-xs`,valueClassName:`text-sm font-medium`})]}),(0,L.jsxs)(`div`,{className:`mt-5 flex gap-2`,children:[(0,L.jsxs)(o,{variant:`warning`,className:`flex-1 rounded-full`,onClick:s,children:[(0,L.jsx)(h,{className:`mr-1.5 size-3.5`}),f.sendReminder]}),(0,L.jsxs)(o,{variant:`success`,className:`flex-1 rounded-full`,onClick:c,children:[(0,L.jsx)(m,{className:`mr-1.5 size-3.5`}),f.recordPayment]})]})]})}H.displayName=`OutstandingBalanceCard`;var U=e({BookingReceipt:()=>G,InfoPanel:()=>K,OrderItems:()=>q,OutstandingBalance:()=>J,PaymentConfirmation:()=>W});function W(){return(0,L.jsx)(L.Fragment,{children:(0,L.jsx)(R,{amount:`249.00 USD`,details:[{label:`Method`,value:`Visa •••• 4242`},{label:`Reference`,value:`GCT-2026-0847`},{label:`Date`,value:`Mar 27, 2026`}],helpText:`Need help with this transaction?`})})}function G(){return(0,L.jsx)(L.Fragment,{children:(0,L.jsx)(z,{referenceCode:`GCT-BK-2026-0392`,details:[{label:`Vendor`,value:`BG Spa Retreat`},{label:`Service`,value:`Deep Tissue Massage`},{label:`Date`,value:`Apr 2, 2026 — 15:00`}],amountPaid:`135.00 USD`})})}function K(){return(0,L.jsx)(L.Fragment,{children:(0,L.jsx)(B,{title:`Voucher Breakdown`,items:[{label:`Base price`,value:`200 USD`},{label:`Platform fee (5%)`,value:`10 USD`},{label:`VAT (20%)`,value:`40 USD`},{label:`Discount`,value:`-25 USD`,highlight:!0}],totalLabel:`Total Charged`,totalValue:`225 USD`})})}function q(){return(0,L.jsx)(L.Fragment,{children:(0,L.jsx)(V,{items:[{vendor:`Artisan Chocolates`,badge:`Express`,name:`Luxury Truffle Box`,qty:2,price:`48 USD`,color:`bg-amber-400`},{vendor:`BG Spa Retreat`,badge:`Standard`,name:`Couples Massage Voucher`,qty:1,price:`120 USD`,color:`bg-sky-400`}],summary:[{label:`Subtotal`,value:`216 USD`},{label:`Shipping`,value:`5.99 USD`}],total:`265.19 USD`})})}function J(){return(0,L.jsx)(L.Fragment,{children:(0,L.jsx)(H,{amount:`4,920 USD`,dueDate:`Apr 15, 2026`,customer:`David Williams`,onSendReminder:()=>{},onRecordPayment:()=>{}})})}var Y=`import {
+	DarkPaymentConfirmation,
+	BookingReceiptDark,
+	DarkInfoPanel,
+	OrderItemsCard,
+	OutstandingBalanceCard,
+} from '@/components/composed/dark-surfaces';
+
+export function PaymentConfirmation() {
+	return (
+		<>
+			<DarkPaymentConfirmation
+								amount="249.00 USD"
+								details={[
+									{ label: 'Method', value: 'Visa •••• 4242' },
+									{ label: 'Reference', value: 'GCT-2026-0847' },
+									{ label: 'Date', value: 'Mar 27, 2026' },
+								]}
+								helpText="Need help with this transaction?"
+							/>
+		</>
+	);
+}
+
+export function BookingReceipt() {
+	return (
+		<>
+			<BookingReceiptDark
+								referenceCode="GCT-BK-2026-0392"
+								details={[
+									{ label: 'Vendor', value: 'BG Spa Retreat' },
+									{ label: 'Service', value: 'Deep Tissue Massage' },
+									{ label: 'Date', value: 'Apr 2, 2026 — 15:00' },
+								]}
+								amountPaid="135.00 USD"
+							/>
+		</>
+	);
+}
+
+export function InfoPanel() {
+	return (
+		<>
+			<DarkInfoPanel
+								title="Voucher Breakdown"
+								items={[
+									{ label: 'Base price', value: '200 USD' },
+									{ label: 'Platform fee (5%)', value: '10 USD' },
+									{ label: 'VAT (20%)', value: '40 USD' },
+									{ label: 'Discount', value: '-25 USD', highlight: true },
+								]}
+								totalLabel="Total Charged"
+								totalValue="225 USD"
+							/>
+		</>
+	);
+}
+
+export function OrderItems() {
+	return (
+		<>
+			<OrderItemsCard
+								items={[
+									{ vendor: 'Artisan Chocolates', badge: 'Express', name: 'Luxury Truffle Box', qty: 2, price: '48 USD', color: 'bg-amber-400' },
+									{ vendor: 'BG Spa Retreat', badge: 'Standard', name: 'Couples Massage Voucher', qty: 1, price: '120 USD', color: 'bg-sky-400' },
+								]}
+								summary={[
+									{ label: 'Subtotal', value: '216 USD' },
+									{ label: 'Shipping', value: '5.99 USD' },
+								]}
+								total="265.19 USD"
+							/>
+		</>
+	);
+}
+
+export function OutstandingBalance() {
+	return (
+		<>
+			<OutstandingBalanceCard
+								amount="4,920 USD"
+								dueDate="Apr 15, 2026"
+								customer="David Williams"
+								onSendReminder={() => {}}
+								onRecordPayment={() => {}}
+							/>
+		</>
+	);
+}
+`;function X(e){let t={h4:`h4`,...e.components};return U||Q(`Examples`,!1),G||Q(`Examples.BookingReceipt`,!0),K||Q(`Examples.InfoPanel`,!0),q||Q(`Examples.OrderItems`,!0),J||Q(`Examples.OutstandingBalance`,!0),W||Q(`Examples.PaymentConfirmation`,!0),(0,L.jsxs)(r,{title:`Composed · Dark surfaces`,description:`Dark-wrapped components — payment, receipt, info panel, order items, outstanding balance.`,layer:`composed`,status:`ready`,children:[(0,L.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,L.jsx)(c,{name:`PaymentConfirmation`,source:Y,children:(0,L.jsx)(W,{})}),(0,L.jsx)(c,{name:`BookingReceipt`,source:Y,children:(0,L.jsx)(G,{})}),(0,L.jsx)(c,{name:`InfoPanel`,source:Y,children:(0,L.jsx)(K,{})}),(0,L.jsx)(c,{name:`OrderItems`,source:Y,children:(0,L.jsx)(q,{})}),(0,L.jsx)(c,{name:`OutstandingBalance`,source:Y,children:(0,L.jsx)(J,{})})]}),(0,L.jsxs)(s,{title:`API`,id:`api`,children:[(0,L.jsx)(t.h4,{children:`DarkPaymentConfirmation`}),(0,L.jsx)(y,{component:`DarkPaymentConfirmation`}),(0,L.jsx)(t.h4,{children:`BookingReceiptDark`}),(0,L.jsx)(y,{component:`BookingReceiptDark`}),(0,L.jsx)(t.h4,{children:`DarkInfoPanel`}),(0,L.jsx)(y,{component:`DarkInfoPanel`}),(0,L.jsx)(t.h4,{children:`OrderItemsCard`}),(0,L.jsx)(y,{component:`OrderItemsCard`}),(0,L.jsx)(t.h4,{children:`OutstandingBalanceCard`}),(0,L.jsx)(y,{component:`OutstandingBalanceCard`})]})]})}function Z(e={}){let{wrapper:t}=e.components||{};return t?(0,L.jsx)(t,{...e,children:(0,L.jsx)(X,{...e})}):X(e)}function Q(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Z as default};

package/dist/showcase/assets/database-Bnvw0wVV.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B-Z7p0So.js";var t=e(`database`,[[`ellipse`,{cx:`12`,cy:`5`,rx:`9`,ry:`3`,key:`msslwz`}],[`path`,{d:`M3 5V19A9 3 0 0 0 21 19V5`,key:`1wlel7`}],[`path`,{d:`M3 12A9 3 0 0 0 21 12`,key:`mv7ke4`}]]);export{t};

package/dist/showcase/assets/date-block-IhoCVl_d.js

@@ -0,0 +1 @@
+import{t as e}from"./format-gCABLair.js";import{gr as t,vr as n}from"./example-DPfw-R7_.js";import{D as r,a as i}from"./index-B-Z7p0So.js";var a=i(),o={separator:`·`},s={default:{bg:`bg-card`,text:`text-foreground`,border:`border-border`,accent:`text-foreground`},muted:{bg:`bg-muted/50`,text:`text-foreground`,border:`border-border`,accent:`text-foreground`},primary:{bg:`bg-primary/10`,text:`text-foreground`,border:`border-primary/30`,accent:`text-primary`},success:{bg:`bg-success/10`,text:`text-foreground`,border:`border-success/30`,accent:`text-success`},warning:{bg:`bg-warning/15`,text:`text-foreground`,border:`border-warning/40`,accent:`text-warning-foreground`},destructive:{bg:`bg-destructive/10`,text:`text-foreground`,border:`border-destructive/30`,accent:`text-destructive`},info:{bg:`bg-info/10`,text:`text-foreground`,border:`border-info/30`,accent:`text-info`}};function c(e){return e instanceof Date?e:new Date(e)}function l({date:i,time:l,locale:u,layout:d=`stacked`,timePlacement:f,tone:p=`default`,boxed:m,showMonth:h=!0,dayFormat:g=`d`,weekdayFormat:_=`EEE`,monthFormat:v=`MMM`,className:y,strings:b}){let x=c(i),S=r(o,b),C=s[p],w=!Number.isNaN(x.getTime()),T=w?e(x,_,u?{locale:u}:void 0):``,E=w?e(x,g,u?{locale:u}:void 0):``,D=w?e(x,v,u?{locale:u}:void 0):``,O=f??(d===`inline`?`inline`:`below`),k=m??d===`stacked`;return d===`inline`?(0,a.jsxs)(`span`,{className:n(`date-block--component`,`inline-flex items-center gap-1.5 tabular-nums`,k&&n(`rounded-md border px-2 py-1`,C.bg,C.border),y),children:[(0,a.jsx)(t,{size:`xs`,weight:`semibold`,className:n(C.accent,`uppercase tracking-wide`),children:T}),(0,a.jsx)(t,{weight:`semibold`,children:E}),!!h&&(0,a.jsx)(t,{size:`xs`,type:`secondary`,className:`uppercase tracking-wide`,children:D}),!!l&&O===`inline`&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t,{size:`xs`,type:`discrete`,"aria-hidden":!0,children:S.separator}),(0,a.jsx)(t,{size:`xs`,type:`secondary`,children:l})]})]}):(0,a.jsxs)(`div`,{className:n(`inline-flex flex-col items-center gap-0.5`,y),children:[(0,a.jsxs)(`div`,{className:n(`flex flex-col items-center justify-center leading-none tabular-nums`,k&&n(`rounded-md border px-2.5 py-1.5 min-w-[3rem]`,C.bg,C.border)),children:[(0,a.jsx)(t,{size:`xxs`,weight:`semibold`,className:n(C.accent,`uppercase tracking-wider`),children:T}),(0,a.jsx)(t,{size:`lg`,weight:`semibold`,className:n(C.text,`leading-none`),children:E}),!!h&&(0,a.jsx)(t,{size:`xxs`,type:`secondary`,className:`uppercase tracking-wider`,children:D})]}),!!l&&O===`below`&&(0,a.jsx)(t,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:l}),!!l&&O===`inline`&&(0,a.jsx)(t,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:l})]})}l.displayName=`DateBlock`;export{l as t};

package/dist/showcase/assets/date-picker-DnJpsnaF.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-CilyBKbf.js";import{n as t}from"./isSameDay-rwvIyLOL.js";import{i as n,r,t as i}from"./calendar-Djh3xLVx.js";import{m as a,t as o}from"./format-gCABLair.js";import{Dr as s,gr as c,hr as l,r as u,vr as d}from"./example-DPfw-R7_.js";import{t as f}from"./calendar-dWZ2-0gU.js";import{t as p}from"./clock-ynCzs_rR.js";import{D as m,a as h,c as g,k as _,p as v}from"./index-B-Z7p0So.js";import{t as y}from"./label-MdV7pglj.js";import{r as b,t as ee}from"./popover-CvhuubS6.js";import{t as te}from"./popover-DUQqLZN2.js";import{t as ne}from"./separator-CZ_sPWQj.js";import{t as x}from"./input-BS64kyoq.js";import{n as S,t as C}from"./toggle-group-CfxuWsv9.js";var w=e(_(),1),T=h();function E({config:e,output:t,hasSelection:n,autoSummary:r,className:i}){let{text:a,actions:o,showOnlyWhenSelected:s=!1,showSummary:l=!1}=e,f=w.useMemo(()=>{if(a)return typeof a==`function`?a(t):a},[a,t]),p=f||(l?r:void 0);if(s&&!n||!p&&(!o||o.length===0))return null;let m=e=>e===`destructive`?{variant:`error`,buttonStyle:`solid`}:e===`outline`?{variant:`secondary`,buttonStyle:`outline`}:e===`ghost`?{variant:`secondary`,buttonStyle:`ghost`}:e===`secondary`?{variant:`secondary`,buttonStyle:`solid`}:{variant:`primary`,buttonStyle:`solid`};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(ne,{}),(0,T.jsxs)(`div`,{className:d(`flex flex-col gap-3 p-3`,i),children:[!!p&&(0,T.jsxs)(`div`,{className:`text-sm`,children:[!!l&&!!f&&!!r&&(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(c,{type:`secondary`,children:r}),(0,T.jsx)(c,{weight:`medium`,className:`mt-1`,children:f})]}),!l&&!!f&&(0,T.jsx)(c,{weight:`medium`,children:f}),!!l&&!f&&!!r&&(0,T.jsx)(c,{type:`secondary`,children:r})]}),!!o&&o.length>0&&(0,T.jsx)(`div`,{className:`flex items-center gap-2`,children:o.map(e=>{let n=typeof e.disabled==`function`?e.disabled(t):e.disabled,r=m(e.variant??null);return(0,T.jsx)(u,{variant:r.variant,buttonStyle:r.buttonStyle,disabled:n,onClick:()=>e.onClick(t),className:`flex-1`,children:e.label},e.label)})})]})]})}E.displayName=`DatePickerFooter`;function re({config:e,className:t}){let{title:n,description:r,icon:i,align:a=`left`}=e;return(0,T.jsx)(`div`,{className:d(`date-picker-header--component`,`border-b p-4`,a===`center`?`text-center`:`text-left`,t),children:(0,T.jsxs)(`div`,{className:`flex items-center justify-start gap-3`,children:[!!i&&(0,T.jsx)(`div`,{className:`flex-shrink-0`,children:(0,T.jsx)(i,{className:`h-5 w-5 text-primary`})}),(0,T.jsxs)(`div`,{className:d(`flex-1`,a===`center`&&!i&&`text-center`),children:[(0,T.jsx)(l,{tag:`h3`,containerClassName:`space-y-0`,className:`font-semibold text-base leading-none`,children:n}),!!r&&(0,T.jsx)(c,{type:`secondary`,className:`mt-2`,children:r})]})]})})}re.displayName=`DatePickerHeader`;function D(e){return e.toString().padStart(2,`0`)}function O(e,t,n){return Math.min(Math.max(e,t),n)}function k(e,t){if(t<=0)return e;let n=Math.floor(e/t)*t;return Math.max(0,Math.min(n,1440*60-1))}function A(e){if(!e)return null;let t=e.split(`:`);if(t.length<2||t.length>3)return null;let[n,r,i]=t,a=O(Number.parseInt(n,10),0,23),o=O(Number.parseInt(r,10),0,59),s=O(Number.parseInt(i??`0`,10),0,59);return Number.isNaN(a)||Number.isNaN(o)||Number.isNaN(s)?null:{hours:a,minutes:o,seconds:s}}function j(e,t,n){let r=Number.isFinite(e?.getTime?.())?e:new Date,i=r.getHours(),a=r.getMinutes(),o=t?r.getSeconds():0,s=k(i*3600+a*60+o,n),c=Math.floor(s/3600),l=Math.floor(s%3600/60),u=s%60;return{hours:c,minutes:l,seconds:t?u:0}}function ie(e,t,n){if(t===`12`){let t=e.hours>=12?`PM`:`AM`,r=e.hours%12;return r===0&&(r=12),{hours:D(r),minutes:D(e.minutes),seconds:n?D(e.seconds):void 0,period:t}}return{hours:D(e.hours),minutes:D(e.minutes),seconds:n?D(e.seconds):void 0}}function M(e,t,n){let r=e=>{let t=Number.parseInt(e??`0`,10);return Number.isNaN(t)?0:t},i=r(e.hours),a=O(r(e.minutes),0,59),o=n?O(r(e.seconds),0,59):0;if(t===`12`){i=O(i,1,12);let t=(e.period??`AM`)===`PM`;i%=12,t&&(i+=12)}else i=O(i,0,23);return{hours:i,minutes:a,seconds:o}}function N(e,t,n){let r=k(e.hours*3600+e.minutes*60+e.seconds,t);return{hours:Math.floor(r/3600),minutes:Math.floor(r%3600/60),seconds:n?r%60:0}}function ae(e,t,n,r){let i=D(e.minutes),a=t?`:${D(e.seconds)}`:``;if(n===`24`)return`${D(e.hours)}:${i}${a}`;let o=e.hours>=12?`PM`:`AM`,s=e.hours%12;s===0&&(s=12);let c=o===`AM`?r?.am??`AM`:r?.pm??`PM`;return`${D(s)}:${i}${a} ${c}`}var P=/'[^']*'/g,oe=/[HKhk]|\bp\b|\bt\b|\ba\b/;function se(e){if(!e)return!1;let t=e.replace(P,``);return oe.test(t)}function F(e,t,n,r){let i=r?{locale:r}:void 0;return{date:e,formatted:e?o(e,t,i):void 0,readable:e?o(e,n,i):void 0}}function I(e,t,n,r){let i=r?{locale:r}:void 0;return{dates:e,formatted:e.map(e=>o(e,t,i)),readable:e.map(e=>o(e,n,i))}}function L(e,t,n,r){let i=r?{locale:r}:void 0;return{range:e,formatted:{from:e?.from?o(e.from,t,i):void 0,to:e?.to?o(e.to,t,i):void 0},readable:{from:e?.from?o(e.from,n,i):void 0,to:e?.to?o(e.to,n,i):void 0}}}function R(e,t){let n=typeof t==`string`?A(t):t,r=new Date(e);return!Number.isFinite(r.getTime())||!n?new Date(NaN):(r.setHours(n.hours,n.minutes,n.seconds,0),r)}function z(e,t,n){let r=e;return e.from&&(r={...r,from:R(e.from,t)}),e.to&&r&&(r={...r,to:R(e.to,n)}),r}function ce(e,t){return Math.ceil((t.getTime()-e.getTime())/(1e3*60*60*24))+1}function le(e,t,n){if(!e?.from||!e?.to)return{isValid:!0};let r=ce(e.from,e.to);return t&&r<t||n&&r>n?{isValid:!1,daysDiff:r}:{isValid:!0,daysDiff:r}}function B(e,t,n,r){if(!e?.from||!e?.to)return null;let i=ce(e.from,e.to);return t&&i<t?r.minimumDays(t):n&&i>n?r.maximumDays(n):null}function ue(e,t,n,r,i){return r&&e.length===0?`At least one date must be selected`:t&&e.length<t?`Select at least ${t} dates`:n?i.maximumDates(n):null}function de(e,t,n,r,i,a){if(e){let n=o(e,t,a?{locale:a}:void 0);return i&&(n+=` ${i}`),n}return n??r}function V(e,t,n,r,i,a){if(e.length>0){if(e.length===1){let n=a?{locale:a}:void 0;return o(e[0],t,n)}return i.datesSelected(e.length)}return n??r}function fe(e,t,n,r,i){if(e?.from){let n=i?{locale:i}:void 0;return e.to?`${o(e.from,t,n)} - ${o(e.to,t,n)}`:o(e.from,t,n)}return n??r}var H={selectDate:`Select a date`,selectDates:`Select dates`,selectDateRange:`Select date range`,from:`From`,to:`To`,confirm:`Confirm`,clear:`Clear`,today:`Today`,startDate:`Start date`,endDate:`End date`,startTime:`Start time`,endTime:`End time`,hours:`Hours`,minutes:`Minutes`,seconds:`Seconds`,am:`AM`,pm:`PM`,minimumDays:e=>`A minimum of ${e} days is required`,maximumDays:e=>`A maximum of ${e} days is allowed`,maximumDates:e=>`Select up to ${e} dates`,datesSelected:e=>`${e} dates selected`,lastWeek:`Last week`,lastMonth:`Last month`,lastYear:`Last year`,nextWeek:`Next week`,nextMonth:`Next month`,nextYear:`Next year`,thisWeek:`This Week`,thisMonth:`This Month`,last30Days:`Last 30 Days`,selectMonthYear:`Select month and year`,month:`Month`,year:`Year`},U=[`hours`,`minutes`,`seconds`],W=`00`,G=`12`;function pe(e){return e.replace(/\D/g,``).slice(-2)}function K(e){return e.length===0?`00`:e.length===1?`0${e}`:e}function me(e,t){let n=t?U:U.slice(0,2),r=n.indexOf(e);return r>-1&&r<n.length-1?n[r+1]:null}function q(e,t){let n=t?U:U.slice(0,2),r=n.indexOf(e);return r>0?n[r-1]:null}function he(e,t){return t===`24`?e:e%12||12}function J(e){return e>=12?`PM`:`AM`}function Y(e,t){return t===`12`?{...e,period:e.period??`AM`}:{...e,period:void 0}}function ge({value:e,onChange:t,format:n,includeSeconds:r,step:i,disabled:a,className:o,labels:s,periodLabels:l}){let u=w.useMemo(()=>r?U:U.slice(0,2),[r]),[f,p]=w.useState(()=>Y(ie(e,n,r),n)),m=w.useRef(f),h=w.useRef(!1),g=w.useCallback(e=>{m.current=e,p(e)},[]),_=w.useRef({hours:null,minutes:null,seconds:null});w.useEffect(()=>{if(h.current){h.current=!1;return}g(Y(ie(e,n,r),n))},[e,n,r,g]);let v=w.useCallback(e=>{h.current=!0,t(M(e,n,r))},[n,r,t]),y=w.useCallback(e=>{let a=N(M(e,n,r),i,r);t(a),g(Y(ie(a,n,r),n))},[n,r,t,i,g]),b=w.useCallback(e=>{if(!e)return;let t=_.current[e];t&&(t.focus(),t.select())},[]),ee=w.useCallback((e,t)=>{let r=m.current,i=r[e]??(e===`hours`&&n===`12`?G:W),a=(Number.parseInt(i.slice(-1),10)||0)*10+t,o={...r},s=o.period??`AM`;e===`hours`?n===`24`?o.hours=K(Math.min(Math.max(a,0),23).toString()):a===0?(s=`AM`,o.hours=G):a>12?(s=J(a),o.hours=K(he(a,`12`).toString())):(o.hours=K(Math.min(Math.max(a,1),12).toString()),s=r.period??J(a)):e===`minutes`?o.minutes=K(Math.min(Math.max(a,0),59).toString()):e===`seconds`&&(o.seconds=K(Math.min(Math.max(a,0),59).toString()));let c={...o,period:s};g(c),v(c)},[n,g,v]),te=w.useCallback((e,t)=>{let r=pe(t),i={...m.current},a=i.period??`AM`;if(e===`hours`)if(n===`24`){let e=Number.parseInt(r||`0`,10);i.hours=K((Number.isNaN(e)?0:Math.min(Math.max(e,0),23)).toString())}else{let e=Number.parseInt(r||`0`,10);Number.isNaN(e)?(i.hours=`12`,a=m.current.period??`AM`):r.length===2&&e>12?(a=J(e),i.hours=K(he(e,`12`).toString())):e===0?(a=`AM`,i.hours=`12`):(i.hours=K(Math.min(Math.max(e,1),12).toString()),r.length===2&&(a=m.current.period??J(e)))}else if(e===`minutes`){let e=Number.parseInt(r||`0`,10);i.minutes=K((Number.isNaN(e)?0:Math.min(Math.max(e,0),59)).toString())}else if(e===`seconds`){let e=Number.parseInt(r||`0`,10);i.seconds=K((Number.isNaN(e)?0:Math.min(Math.max(e,0),59)).toString())}let o={...i,period:a};g(o),v(o)},[n,g,v]),ne=w.useCallback(e=>{n===`12`&&y({...m.current,period:e})},[y,n]),E=w.useCallback(()=>{y(m.current)},[y]),re=w.useCallback((e,t)=>{if(e.key.length===1&&/\d/.test(e.key)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){e.preventDefault(),ee(t,Number.parseInt(e.key,10));return}if(e.key===`ArrowRight`){b(me(t,r));return}if(e.key===`ArrowLeft`){b(q(t,r));return}if(e.key===`Backspace`){let n=e.currentTarget;n.selectionStart===0&&n.selectionEnd===0&&b(q(t,r))}},[ee,b,r]),D=w.useMemo(()=>{if(n===`12`)return f.period?[f.period]:void 0},[n,f.period]);return(0,T.jsxs)(`div`,{className:d(`segmented-time-input--component`,`flex items-center gap-2`,o),children:[u.map((e,t)=>{let r=e===`hours`&&n===`12`?G:W,i=f[e]??r,o=e===`hours`?s.hours:e===`minutes`?s.minutes:s.seconds??s.minutes;return(0,T.jsxs)(w.Fragment,{children:[(0,T.jsx)(x,{ref:t=>{_.current[e]=t},value:i,onChange:t=>te(e,t.target.value),onFocus:e=>e.target.select(),onBlur:E,onKeyDown:t=>re(t,e),inputMode:`numeric`,pattern:`\\d*`,maxLength:2,showCharacterCount:!1,disabled:a,"aria-label":o,className:`h-8 w-12 text-center text-sm`}),t<u.length-1&&(0,T.jsx)(c,{tag:`span`,type:`secondary`,children:`:`})]},e)}),n===`12`&&(0,T.jsxs)(C,{value:D,onValueChange:e=>{let t=e[0];t&&ne(t)},disabled:a,size:`sm`,className:`ml-1`,children:[(0,T.jsx)(S,{value:`AM`,"aria-label":l.am,children:l.am}),(0,T.jsx)(S,{value:`PM`,"aria-label":l.pm,children:l.pm})]})]})}ge.displayName=`SegmentedTimeInput`;function _e(e){return e===`ghost`?`ghost`:e===`secondary`?`secondary`:`outline`}function ve(e){let t=_e(e);return t===`ghost`?{variant:`secondary`,buttonStyle:`ghost`}:t===`secondary`?{variant:`secondary`,buttonStyle:`solid`}:{variant:`secondary`,buttonStyle:`outline`}}var ye=[`!h-9 !px-3 !rounded-md !border !border-input !bg-transparent !shadow-none`,`!text-sm !font-normal !text-foreground`,`hover:!bg-transparent`,`focus-visible:!border-ring focus-visible:!ring-ring/50 focus-visible:!ring-[3px]`,`aria-invalid:!ring-destructive/20 dark:aria-invalid:!ring-destructive/40 aria-invalid:!border-destructive`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`].join(` `);function be(e){return!e.mode||e.mode===`single`}function xe(e){return e.mode===`multiple`}function X(e){return e.mode===`range`}function Se(e,i){return[{label:e.today,getValue:()=>({from:new Date,to:new Date})},{label:e.thisWeek,getValue:()=>({from:a(new Date,{weekStartsOn:i}),to:r(new Date,{weekStartsOn:i})})},{label:e.thisMonth,getValue:()=>({from:n(new Date),to:v(new Date)})},{label:e.last30Days,getValue:()=>({from:t(new Date,-30),to:new Date})}]}function Ce(e){let[t,n]=w.useState(!1),r=e.locale??g,i=m(H,e.strings??e.translations),a=w.useMemo(()=>e.enableYearDropdown||e.yearSelection?.enabled?`dropdown`:`label`,[e.enableYearDropdown,e.yearSelection]);return be(e)?(0,T.jsx)(we,{className:`date-picker--component`,...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a}):xe(e)?(0,T.jsx)(Z,{...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a}):X(e)?(0,T.jsx)(Te,{...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a}):null}function we({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:a=`PPP`,placeholder:s,closeOnSelect:l=!0,withTime:m,disabledDates:h,calendarProps:g,open:_,setOpen:v,t:x,dateFnsLocale:S,captionLayout:C,...D}){let O=w.useId(),k=`${O}-description`,A=D.error!==void 0&&D.error!==null&&D.error!==``,ie=A?k:void 0,M=D.hint!==void 0&&D.hint!==null&&D.hint!==``,P=typeof D.error==`string`?D.error:``,oe=typeof D.hint==`string`?D.hint:``,I=m?.format??`24`,L=m?.step??60,z=m?.showSeconds??!1,ce=se(a),le=m?.showTimeInButton??!ce,[B,ue]=w.useState(()=>e??t),[V,fe]=w.useState(()=>j(e??t,z,L)),H=w.useRef(e??t??void 0),U=w.useRef(!1),W=w.useRef(e!==void 0),G=w.useCallback((e,t)=>{let n=e;if(e&&m?.enabled){let r=R(e,t??V);n=Number.isFinite(r.getTime())?r:void 0}return F(n,r,a,S)},[r,a,S,m,V]);w.useEffect(()=>{let i=!!m?.enabled,o=W.current,s=e!==void 0,c=(e,t)=>{let o=N(j(e,z,L),L,z);if(ue(t=>t?.getTime?.()===e.getTime()?t:e),fe(e=>e.hours===o.hours&&e.minutes===o.minutes&&e.seconds===o.seconds?e:o),H.current=e,U.current=!0,t&&i){let t=R(e,o);n?.(F(t,r,a,S))}};if(!i){U.current=!1,H.current=e??t??void 0,ue(e??t),W.current=s;return}let l=H.current?.getTime?.(),u=e?.getTime?.();if(!s&&o&&t===void 0&&(U.current=!1,H.current=void 0),e!==void 0&&u!==l){c(e,!1),W.current=s;return}if(e===void 0&&t!==void 0){(l!==t.getTime()||!U.current)&&c(t,!1),W.current=s;return}if(e===void 0&&t===void 0&&!U.current){U.current=!0,W.current=s;return}W.current=s},[m?.enabled,e,t,z,L,n,r,a,S]),w.useEffect(()=>{m?.enabled&&fe(e=>{let t=N(e,L,z);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t})},[m?.enabled,L,z]);let pe=w.useCallback(e=>{if(ue(e),m?.enabled&&e&&(U.current=!0,H.current=e),m?.enabled){n?.(G(e)),l&&e&&v(!1);return}n?.(G(e)),l&&e&&v(!1)},[n,G,l,v,m]),K=w.useCallback(e=>{fe(e),B&&n?.(G(B,e))},[B,n,G]),me=w.useMemo(()=>{if(m?.enabled)return ae(V,z,I,{am:x.am,pm:x.pm})},[m?.enabled,V,z,I,x]),q=w.useMemo(()=>de(B,a,s,x.selectDate,le?me:void 0,S),[B,a,s,x,me,le,S]),he=w.useMemo(()=>B?o(B,a,{locale:S}):void 0,[B,a,S]);return(0,T.jsxs)(`div`,{className:d(`space-y-2`,D.className),children:[!!(D.label||M)&&(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!D.label&&(0,T.jsx)(y,{htmlFor:O,className:d(`leading-6`,A&&`text-destructive`),children:D.label}),!A&&!!M&&(0,T.jsx)(c,{tag:`span`,type:`secondary`,children:oe})]}),(0,T.jsxs)(ee,{open:_,onOpenChange:v,children:[(0,T.jsx)(b,{render:e=>{let t=ve(D.buttonVariant);return(0,T.jsxs)(u,{...e,id:O,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":A,"aria-describedby":ie,className:d(`w-full justify-start text-left font-normal`,ye,!B&&`text-muted-foreground`,D.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:D.disabled,children:[(0,T.jsx)(f,{className:`mr-2 h-4 w-4`}),q]})}}),(0,T.jsxs)(te,{className:`w-auto p-0`,align:`start`,children:[!!D.header&&(0,T.jsx)(re,{config:D.header}),(0,T.jsx)(i,{mode:`single`,selected:B,onSelect:pe,defaultMonth:B,numberOfMonths:D.numberOfMonths,showOutsideDays:D.showOutsideDays,disabled:h??D.disabled,locale:S,captionLayout:C,fromYear:D.yearSelection?.fromYear,toYear:D.yearSelection?.toYear,...g}),!!m?.enabled&&(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(ne,{}),(0,T.jsxs)(`div`,{className:`p-3`,children:[(0,T.jsx)(y,{size:`sm`,children:x.startTime}),(0,T.jsxs)(`div`,{className:`mt-2 flex items-center gap-2`,children:[(0,T.jsx)(p,{className:`h-4 w-4 text-muted-foreground`}),(0,T.jsx)(ge,{value:V,onChange:K,format:I,includeSeconds:z,step:L,disabled:D.disabled,labels:{hours:x.hours,minutes:x.minutes,seconds:z?x.seconds:void 0},periodLabels:{am:x.am,pm:x.pm}})]})]})]}),!!D.footer&&(0,T.jsx)(E,{config:D.footer,output:G(B),hasSelection:!!B,autoSummary:he})]})]}),!!A&&(0,T.jsx)(c,{id:k,size:`xs`,type:`error`,content:P})]})}function Z({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:a=`PPP`,placeholder:o,min:s,max:l,required:p,disabledDates:m,calendarProps:h,open:g,setOpen:_,t:v,dateFnsLocale:x,captionLayout:S,...C}){let D=w.useId(),O=`${D}-description`,k=C.error!==void 0&&C.error!==null&&C.error!==``,A=k?O:void 0,j=C.hint!==void 0&&C.hint!==null&&C.hint!==``,ie=typeof C.error==`string`?C.error:``,M=typeof C.hint==`string`?C.hint:``,[N,ae]=w.useState(e??t??[]);w.useEffect(()=>{e!==void 0&&ae(e)},[e]);let P=w.useCallback(e=>I(e,r,a,x),[r,a,x]),oe=w.useCallback(e=>{let t=Array.isArray(e)?e:e?[e]:[];l&&t.length>l||(ae(t),n?.(P(t)))},[n,P,l]),se=w.useMemo(()=>V(N,a,o,v.selectDates,v,x),[N,a,o,v,x]),F=w.useMemo(()=>ue(N,s,l,p,v),[N,s,l,p,v]),L=w.useMemo(()=>N.length>0?v.datesSelected(N.length):void 0,[N.length,v]);return(0,T.jsxs)(`div`,{className:d(`space-y-2`,C.className),children:[!!(C.label||j)&&(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!C.label&&(0,T.jsx)(y,{htmlFor:D,className:d(`leading-6`,k&&`text-destructive`),children:C.label}),!k&&!!j&&(0,T.jsx)(c,{tag:`span`,type:`secondary`,children:M})]}),(0,T.jsxs)(ee,{open:g,onOpenChange:_,children:[(0,T.jsx)(b,{render:e=>{let t=ve(C.buttonVariant);return(0,T.jsxs)(u,{...e,id:D,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":k,"aria-describedby":A,className:d(`w-full justify-start text-left font-normal`,ye,N.length===0&&`text-muted-foreground`,C.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:C.disabled,children:[(0,T.jsx)(f,{className:`mr-2 h-4 w-4`}),(0,T.jsx)(`span`,{className:`truncate`,children:se})]})}}),(0,T.jsxs)(te,{className:`w-auto p-0`,align:`start`,children:[!!C.header&&(0,T.jsx)(re,{config:C.header}),(0,T.jsx)(i,{mode:`multiple`,selected:N,onSelect:oe,defaultMonth:N[0],numberOfMonths:C.numberOfMonths,showOutsideDays:C.showOutsideDays,disabled:m??C.disabled,locale:x,captionLayout:S,fromYear:C.yearSelection?.fromYear,toYear:C.yearSelection?.toYear,required:p,max:l,...h}),!!F&&(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(ne,{}),(0,T.jsx)(`div`,{className:`p-3`,children:(0,T.jsx)(c,{type:`secondary`,children:F})})]}),!!C.footer&&(0,T.jsx)(E,{config:C.footer,output:P(N),hasSelection:N.length>0,autoSummary:L})]})]}),!!k&&(0,T.jsx)(c,{id:O,size:`xs`,type:`error`,content:ie})]})}function Te({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:a=`PPP`,placeholder:l,withConfirm:m=!1,min:h,max:g,closeOnSelect:_=!0,withTime:v,presets:x,disabledDates:S,calendarProps:C,open:D,setOpen:O,t:k,dateFnsLocale:A,captionLayout:ie,...M}){let{weekStartsOn:P=1}=s(),oe=x??Se(k,P),F=w.useId(),I=`${F}-description`,R=M.error!==void 0&&M.error!==null&&M.error!==``,ce=R?I:void 0,ue=M.hint!==void 0&&M.hint!==null&&M.hint!==``,de=typeof M.error==`string`?M.error:``,V=typeof M.hint==`string`?M.hint:``,H=v?.format??`24`,U=v?.step??60,W=v?.showSeconds??!1,G=se(a),pe=v?.showTimeInButton??!G,K=v?.showTimeInSummary??!G,me=e??t,[q,he]=w.useState(me),[J,Y]=w.useState(()=>j(me?.from,W,U)),[_e,be]=w.useState(()=>j(me?.to,W,U)),xe=w.useRef(e),X=w.useMemo(()=>B(q,h,g,k),[q,h,g,k]),Ce=X!=null&&X!==``,we=typeof X==`string`?X:``;w.useEffect(()=>{e!==void 0&&he(e)},[e]),w.useEffect(()=>{if(!v?.enabled){xe.current=e;return}let t=xe.current,n=e?.from,r=e?.to;n?Y(j(n,W,U)):t?.from&&Y(j(void 0,W,U)),r?be(j(r,W,U)):t?.to&&be(j(void 0,W,U)),xe.current=e},[e,v?.enabled,W,U]),w.useEffect(()=>{v?.enabled&&(Y(e=>{let t=N(e,U,W);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t}),be(e=>{let t=N(e,U,W);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t}))},[v?.enabled,U,W]);let Z=w.useCallback(e=>{let t=e;return e&&v?.enabled&&(t=z(e,J,_e)),L(t,r,a,A)},[r,a,A,v,J,_e]),Te=w.useCallback(e=>{Y(e)},[]),Ee=w.useCallback(e=>{be(e)},[]),De=w.useCallback(e=>{let t=le(e,h,g);e&&!t.isValid||(he(e),!m&&!v?.enabled&&(n?.(Z(e)),_&&e?.from&&e?.to&&O(!1)))},[m,v,n,Z,h,g,_,O]),Oe=w.useCallback(e=>{De(e.getValue())},[De]),ke=w.useCallback(()=>{n?.(Z(q)),O(!1)},[q,n,Z,O]),Q=w.useMemo(()=>{if(v?.enabled)return ae(J,W,H,{am:k.am,pm:k.pm})},[v?.enabled,J,W,H,k]),$=w.useMemo(()=>{if(v?.enabled)return ae(_e,W,H,{am:k.am,pm:k.pm})},[v?.enabled,_e,W,H,k]),Ae=w.useMemo(()=>{if(v?.enabled&&q?.from){let e=o(q.from,a,{locale:A}),t=pe&&Q?`${e} ${Q}`:e;if(q.to){let e=o(q.to,a,{locale:A});return`${t} - ${pe&&$?`${e} ${$}`:e}`}return t}return fe(q,a,l,k.selectDateRange,A)},[v?.enabled,q,a,pe,Q,$,l,k,A]),je=w.useMemo(()=>{if(!q?.from||!q?.to)return;let e=o(q.from,a,{locale:A}),t=o(q.to,a,{locale:A});return`${K&&Q?`${e} ${Q}`:e} - ${K&&$?`${t} ${$}`:t}`},[q,a,A,K,Q,$]);return(0,T.jsxs)(`div`,{className:d(`space-y-2`,M.className),children:[!!(M.label||ue)&&(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!M.label&&(0,T.jsx)(y,{htmlFor:F,className:d(`leading-6`,R&&`text-destructive`),children:M.label}),!R&&!!ue&&(0,T.jsx)(c,{tag:`span`,type:`secondary`,children:V})]}),(0,T.jsxs)(ee,{open:D,onOpenChange:O,children:[(0,T.jsx)(b,{render:e=>{let t=ve(M.buttonVariant);return(0,T.jsxs)(u,{...e,id:F,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":R,"aria-describedby":ce,className:d(`w-full justify-start text-left font-normal`,ye,!q&&`text-muted-foreground`,M.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:M.disabled,children:[(0,T.jsx)(f,{className:`mr-2 h-4 w-4 shrink-0`}),(0,T.jsx)(`span`,{className:`truncate`,children:Ae})]})}}),(0,T.jsxs)(te,{className:`w-auto p-0`,align:`start`,children:[!!M.header&&(0,T.jsx)(re,{config:M.header}),(0,T.jsxs)(`div`,{className:`flex`,children:[oe.length>0&&(0,T.jsx)(`div`,{className:`flex flex-col gap-0.5 border-r p-2 min-w-[7.5rem]`,children:oe.map(e=>(0,T.jsx)(u,{variant:`secondary`,buttonStyle:`ghost`,onClick:()=>Oe(e),className:`justify-start font-normal text-muted-foreground hover:text-foreground`,children:e.label},e.label))}),(0,T.jsxs)(`div`,{className:`flex flex-col`,children:[(0,T.jsx)(i,{mode:`range`,selected:q,onSelect:De,defaultMonth:q?.from,numberOfMonths:M.numberOfMonths??2,showOutsideDays:M.showOutsideDays,disabled:S??M.disabled,locale:A,captionLayout:ie,fromYear:M.yearSelection?.fromYear,toYear:M.yearSelection?.toYear,...C}),!!(q?.from||X||m||v?.enabled||M.footer)&&(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(ne,{}),(0,T.jsxs)(`div`,{className:`flex flex-col gap-3 p-3`,children:[!!q?.from&&!M.footer&&(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-4 text-sm`,children:[(0,T.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,T.jsxs)(c,{tag:`span`,type:`secondary`,children:[k.from,`:`]}),(0,T.jsxs)(c,{tag:`span`,weight:`medium`,children:[o(q.from,a,{locale:A}),K&&Q?` ${Q}`:``]})]}),!!q.to&&(0,T.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,T.jsxs)(c,{tag:`span`,type:`secondary`,children:[k.to,`:`]}),(0,T.jsxs)(c,{tag:`span`,weight:`medium`,children:[o(q.to,a,{locale:A}),K&&$?` ${$}`:``]})]})]}),!!v?.enabled&&!!q?.from&&(0,T.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 sm:grid-cols-2`,children:[(0,T.jsxs)(`div`,{children:[(0,T.jsx)(y,{size:`xs`,children:k.startTime}),(0,T.jsxs)(`div`,{className:`mt-1 flex items-center gap-2`,children:[(0,T.jsx)(p,{className:`h-3 w-3 text-muted-foreground`}),(0,T.jsx)(ge,{value:J,onChange:Te,format:H,includeSeconds:W,step:U,disabled:M.disabled,labels:{hours:k.hours,minutes:k.minutes,seconds:W?k.seconds:void 0},periodLabels:{am:k.am,pm:k.pm}})]})]}),!!q.to&&(0,T.jsxs)(`div`,{children:[(0,T.jsx)(y,{size:`xs`,children:k.endTime}),(0,T.jsxs)(`div`,{className:`mt-1 flex items-center gap-2`,children:[(0,T.jsx)(p,{className:`h-3 w-3 text-muted-foreground`}),(0,T.jsx)(ge,{value:_e,onChange:Ee,format:H,includeSeconds:W,step:U,disabled:M.disabled,labels:{hours:k.hours,minutes:k.minutes,seconds:W?k.seconds:void 0},periodLabels:{am:k.am,pm:k.pm}})]})]})]}),(0,T.jsx)(c,{type:`error`,content:we,hidden:!Ce}),!!(m||v?.enabled)&&!M.footer&&(0,T.jsx)(u,{onClick:ke,disabled:!q?.from||!q?.to||!!X,className:`w-full`,children:k.confirm}),!!M.footer&&(0,T.jsx)(`div`,{className:`-mx-3 -mb-3`,children:(0,T.jsx)(E,{config:M.footer,output:Z(q),hasSelection:!!(q?.from&&q?.to),autoSummary:je})})]})]})]})]})]})]}),!!R&&(0,T.jsx)(c,{id:I,size:`xs`,type:`error`,content:de})]})}Ce.displayName=`DatePicker`;export{E as a,re as i,ye as n,H as r,Ce as t};

package/dist/showcase/assets/date-pickers-CEbieq-R.js

@@ -0,0 +1,110 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{t as n}from"./calendar-Djh3xLVx.js";import{t as r}from"./format-gCABLair.js";import{cr as i,gr as a,r as o,sr as s,t as c,vr as l}from"./example-DPfw-R7_.js";import{t as u}from"./calendar-dWZ2-0gU.js";import{D as d,a as f,c as p,k as m}from"./index-B-Z7p0So.js";import{t as h}from"./props-table-BzUnIcv-.js";import{t as g}from"./label-MdV7pglj.js";import{r as _,t as v}from"./popover-CvhuubS6.js";import{t as y}from"./popover-DUQqLZN2.js";import{t as b}from"./separator-CZ_sPWQj.js";import{a as x,i as S,n as C,r as w,t as T}from"./date-picker-DnJpsnaF.js";import{t as E}from"./month-year-picker-BfBQePUY.js";var D=t(m(),1),O=f();function k({value:e,defaultValue:t,onChange:i,format:s=`yyyy-MM-dd`,readableFormat:c=`PPP`,placeholder:f,label:m,hint:h,error:T,disabled:E=!1,className:k,withConfirm:A=!1,numberOfMonths:j=2,min:M,max:N,closeOnSelect:P=!0,calendarProps:F,translations:I,strings:L,locale:R,header:z,footer:B,enableYearDropdown:V,yearSelection:H}){let[U,W]=D.useState(!1),[G,K]=D.useState(e??t),q=R??p,J=d(w,L??I),Y=D.useMemo(()=>V||H?.enabled?`dropdown`:`label`,[V,H]);D.useEffect(()=>{e!==void 0&&K(e)},[e]);let X=D.useCallback(e=>{let t=q?{locale:q}:void 0;return{range:e,formatted:{from:e?.from?r(e.from,s,t):void 0,to:e?.to?r(e.to,s,t):void 0},readable:{from:e?.from?r(e.from,c,t):void 0,to:e?.to?r(e.to,c,t):void 0}}},[s,c,q]),Z=D.useCallback(e=>{if(e?.from&&e?.to){let t=Math.ceil((e.to.getTime()-e.from.getTime())/(1e3*60*60*24))+1;if(M&&t<M||N&&t>N)return}K(e),A||(i?.(X(e)),P&&e?.from&&e?.to&&W(!1))},[A,i,X,M,N,P]),Q=D.useCallback(()=>{i?.(X(G)),W(!1)},[G,i,X]),ee=D.useMemo(()=>G?.from?G.to?`${r(G.from,c,{locale:q})} - ${r(G.to,c,{locale:q})}`:r(G.from,c,{locale:q}):f??J.selectDateRange,[G,c,q,f,J.selectDateRange]),$=D.useMemo(()=>{if(!G?.from||!G?.to)return null;let e=Math.ceil((G.to.getTime()-G.from.getTime())/(1e3*60*60*24))+1;return M&&e<M?J.minimumDays(M):N&&e>N?J.maximumDays(N):null},[G,M,N,J]),te=D.useMemo(()=>{if(!(!G?.from||!G?.to))return`${r(G.from,c,{locale:q})} - ${r(G.to,c,{locale:q})}`},[G,c,q]);return(0,O.jsxs)(`div`,{className:l(`date-range-picker--component`,`flex flex-col gap-2`,k),children:[!!m&&(0,O.jsx)(g,{htmlFor:`date-range-picker-trigger`,className:l(T&&`text-destructive`),children:m}),(0,O.jsxs)(v,{open:U,onOpenChange:W,children:[(0,O.jsx)(_,{render:e=>(0,O.jsxs)(o,{...e,id:`date-range-picker-trigger`,variant:`secondary`,buttonStyle:`outline`,"aria-invalid":!!T,className:l(`w-full justify-start text-left font-normal`,C,!G&&`text-muted-foreground`,e.className),disabled:E,children:[(0,O.jsx)(u,{className:`mr-2 h-4 w-4 shrink-0`}),(0,O.jsx)(`span`,{className:`truncate`,children:ee})]})}),(0,O.jsxs)(y,{className:`w-auto p-0`,align:`start`,children:[!!z&&(0,O.jsx)(S,{config:z}),(0,O.jsxs)(`div`,{className:`flex flex-col`,children:[(0,O.jsx)(n,{mode:`range`,selected:G,onSelect:Z,defaultMonth:G?.from,numberOfMonths:j,disabled:E,locale:q,captionLayout:Y,fromYear:H?.fromYear,toYear:H?.toYear,...F}),!!(G?.from||$||A||B)&&(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(b,{}),(0,O.jsxs)(`div`,{className:`flex flex-col gap-3 p-3`,children:[!!G?.from&&!B&&(0,O.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsxs)(a,{tag:`span`,type:`secondary`,children:[J.from,`:`]}),(0,O.jsx)(a,{tag:`span`,weight:`medium`,children:r(G.from,c,{locale:q})})]}),!!G.to&&(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsxs)(a,{tag:`span`,type:`secondary`,children:[J.to,`:`]}),(0,O.jsx)(a,{tag:`span`,weight:`medium`,children:r(G.to,c,{locale:q})})]})]}),!!$&&(0,O.jsx)(a,{type:`error`,children:$}),!!A&&!B&&(0,O.jsx)(o,{onClick:Q,disabled:!G?.from||!G?.to||!!$,className:`w-full`,children:J.confirm}),!!B&&(0,O.jsx)(`div`,{className:`-mx-3 -mb-3`,children:(0,O.jsx)(x,{config:B,output:X(G),hasSelection:!!(G?.from&&G?.to),autoSummary:te})})]})]})]})]})]}),!!T&&(0,O.jsx)(a,{type:`error`,children:T}),!!h&&!T&&(0,O.jsx)(a,{type:`secondary`,children:h})]})}k.displayName=`DateRangePicker`;var A=e({ButtonStyles:()=>I,DateRangePickerLegacy:()=>R,Default:()=>j,ModeMultiple:()=>P,ModeRange:()=>N,ModeSingle:()=>M,MonthYearPickerExample:()=>L,RealisticDateFilter:()=>B,WithTimeInput:()=>z,WithYearDropdown:()=>F});function j(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date)}),(0,O.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e?.toDateString()??`—`]})]})}function M(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date)}),(0,O.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e?.toDateString()??`—`]})]})}function N(){let[e,t]=(0,D.useState)();return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsx)(T,{mode:`range`,value:e,onChange:e=>t(e.range)}),(0,O.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[e?.from?.toDateString()??`—`,` → `,e?.to?.toDateString()??`—`]})]})}function P(){let[e,t]=(0,D.useState)([]);return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsx)(T,{mode:`multiple`,value:e,onChange:e=>t(e.dates??[])}),(0,O.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[e.length,` selected`]})]})}function F(){return(0,O.jsx)(T,{mode:`single`,enableYearDropdown:!0})}function I(){return(0,O.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,O.jsx)(T,{mode:`single`}),(0,O.jsx)(T,{mode:`single`,disabled:!0})]})}function L(){let[e,t]=(0,D.useState)();return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsx)(E,{value:e,onChange:e=>t({month:e.month,year:e.year})}),(0,O.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e?`${e.month+1}/${e.year}`:`—`})]})}function R(){let[e,t]=(0,D.useState)();return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsx)(k,{value:e,onChange:e=>t(e.range)}),(0,O.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[e?.from?.toDateString()??`—`,` → `,e?.to?.toDateString()??`—`]})]})}function z(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date),withTime:{enabled:!0,format:`24`}}),(0,O.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[`value: `,e?.toLocaleString()??`—`]})]})}function B(){let[e,t]=(0,D.useState)();return(0,O.jsxs)(`div`,{className:`flex w-full max-w-md items-center gap-2 rounded-md border bg-card p-3`,children:[(0,O.jsx)(`span`,{className:`text-sm font-medium`,children:`Date range`}),(0,O.jsx)(T,{mode:`range`,value:e,onChange:e=>t(e.range)})]})}var V=`import { useState } from 'react';
+import type { DateRange } from 'react-day-picker';
+import { DatePicker, MonthYearPicker, DateRangePicker } from '@/components/base/date-pickers';
+
+export function Default() {
+	const [single, setSingle] = useState<Date | undefined>(undefined);
+	return (
+		<div className="flex flex-col gap-2">
+			<DatePicker mode="single" value={single} onChange={(o) => setSingle(o.date)} />
+			<div className="text-xs text-muted-foreground">value: {single?.toDateString() ?? '—'}</div>
+		</div>
+	);
+}
+
+export function ModeSingle() {
+	const [single, setSingle] = useState<Date | undefined>(undefined);
+	return (
+		<div className="flex flex-col gap-2">
+			<DatePicker mode="single" value={single} onChange={(o) => setSingle(o.date)} />
+			<div className="text-xs text-muted-foreground">value: {single?.toDateString() ?? '—'}</div>
+		</div>
+	);
+}
+
+export function ModeRange() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return (
+		<div className="flex flex-col gap-2">
+			<DatePicker mode="range" value={range} onChange={(o) => setRange(o.range)} />
+			<div className="text-xs text-muted-foreground">
+				{range?.from?.toDateString() ?? '—'} → {range?.to?.toDateString() ?? '—'}
+			</div>
+		</div>
+	);
+}
+
+export function ModeMultiple() {
+	const [multi, setMulti] = useState<Date[]>([]);
+	return (
+		<div className="flex flex-col gap-2">
+			<DatePicker mode="multiple" value={multi} onChange={(o) => setMulti(o.dates ?? [])} />
+			<div className="text-xs text-muted-foreground">{multi.length} selected</div>
+		</div>
+	);
+}
+
+export function WithYearDropdown() {
+	return <DatePicker mode="single" enableYearDropdown />;
+}
+
+export function ButtonStyles() {
+	return (
+		<div className="flex flex-wrap gap-2">
+			<DatePicker mode="single" />
+			<DatePicker mode="single" disabled />
+		</div>
+	);
+}
+
+export function MonthYearPickerExample() {
+	const [my, setMy] = useState<{ month: number; year: number } | undefined>();
+	return (
+		<div className="flex flex-col gap-2">
+			<MonthYearPicker value={my} onChange={(o) => setMy({ month: o.month, year: o.year })} />
+			<div className="text-xs text-muted-foreground">{my ? \`\${my.month + 1}/\${my.year}\` : '—'}</div>
+		</div>
+	);
+}
+
+export function DateRangePickerLegacy() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return (
+		<div className="flex flex-col gap-2">
+			<DateRangePicker value={range} onChange={(o) => setRange(o.range)} />
+			<div className="text-xs text-muted-foreground">
+				{range?.from?.toDateString() ?? '—'} → {range?.to?.toDateString() ?? '—'}
+			</div>
+		</div>
+	);
+}
+
+export function WithTimeInput() {
+	const [val, setVal] = useState<Date | undefined>(undefined);
+	return (
+		<div className="flex flex-col gap-2">
+			<DatePicker
+				mode="single"
+				value={val}
+				onChange={(o) => setVal(o.date)}
+				withTime={{ enabled: true, format: '24' }}
+			/>
+			<div className="text-xs text-muted-foreground">value: {val?.toLocaleString() ?? '—'}</div>
+		</div>
+	);
+}
+
+export function RealisticDateFilter() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return (
+		<div className="flex w-full max-w-md items-center gap-2 rounded-md border bg-card p-3">
+			<span className="text-sm font-medium">Date range</span>
+			<DatePicker mode="range" value={range} onChange={(o) => setRange(o.range)} />
+		</div>
+	);
+}
+`;function H(e){let t={code:`code`,p:`p`,...e.components};return A||W(`Examples`,!1),I||W(`Examples.ButtonStyles`,!0),R||W(`Examples.DateRangePickerLegacy`,!0),j||W(`Examples.Default`,!0),P||W(`Examples.ModeMultiple`,!0),N||W(`Examples.ModeRange`,!0),M||W(`Examples.ModeSingle`,!0),L||W(`Examples.MonthYearPickerExample`,!0),B||W(`Examples.RealisticDateFilter`,!0),z||W(`Examples.WithTimeInput`,!0),F||W(`Examples.WithYearDropdown`,!0),(0,O.jsxs)(i,{title:`Date pickers`,description:`DatePicker (single / range / multiple) and MonthYearPicker — popover-based, locale-aware, with optional year dropdown and time input.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/date-pickers`,children:[(0,O.jsx)(s,{title:`Overview`,id:`overview`,children:(0,O.jsxs)(t.p,{children:[(0,O.jsx)(t.code,{children:`DatePicker`}),` covers all three calendar modes (`,(0,O.jsx)(t.code,{children:`single`}),`, `,(0,O.jsx)(t.code,{children:`range`}),`, `,(0,O.jsx)(t.code,{children:`multiple`}),`)
+behind one component — pass `,(0,O.jsx)(t.code,{children:`mode`}),` and a matching `,(0,O.jsx)(t.code,{children:`value`}),` / `,(0,O.jsx)(t.code,{children:`onChange`}),` shape.
+`,(0,O.jsx)(t.code,{children:`MonthYearPicker`}),` is the compact month + year combo for filters and reports.
+Both honour `,(0,O.jsx)(t.code,{children:`useDatesConfig()`}),` for locale and date format.`]})}),(0,O.jsx)(s,{title:`Default`,id:`default`,children:(0,O.jsx)(c,{name:`Default`,source:V,children:(0,O.jsx)(j,{})})}),(0,O.jsxs)(s,{title:`Modes`,id:`modes`,children:[(0,O.jsx)(c,{name:`ModeSingle`,source:V,children:(0,O.jsx)(M,{})}),(0,O.jsx)(c,{name:`ModeRange`,source:V,children:(0,O.jsx)(N,{})}),(0,O.jsx)(c,{name:`ModeMultiple`,source:V,children:(0,O.jsx)(P,{})})]}),(0,O.jsxs)(s,{title:`Composition`,id:`composition`,children:[(0,O.jsx)(c,{name:`WithYearDropdown`,source:V,children:(0,O.jsx)(F,{})}),(0,O.jsx)(c,{name:`ButtonStyles`,source:V,children:(0,O.jsx)(I,{})})]}),(0,O.jsx)(s,{title:`With time`,id:`with-time`,children:(0,O.jsx)(c,{name:`WithTimeInput`,source:V,children:(0,O.jsx)(z,{})})}),(0,O.jsxs)(s,{title:`DateRangePicker (legacy)`,id:`date-range-picker`,children:[(0,O.jsxs)(t.p,{children:[`The `,(0,O.jsx)(t.code,{children:`DateRangePicker`}),` component predates the unified `,(0,O.jsx)(t.code,{children:`DatePicker mode="range"`}),`
+API and is kept exported for back-compat. New code should prefer `,(0,O.jsx)(t.code,{children:`DatePicker`}),`.`]}),(0,O.jsx)(c,{name:`DateRangePickerLegacy`,source:V,children:(0,O.jsx)(R,{})})]}),(0,O.jsx)(s,{title:`MonthYearPicker`,id:`month-year`,children:(0,O.jsx)(c,{name:`MonthYearPickerExample`,source:V,children:(0,O.jsx)(L,{})})}),(0,O.jsx)(s,{title:`Realistic usage`,id:`realistic`,children:(0,O.jsx)(c,{name:`RealisticDateFilter`,source:V,children:(0,O.jsx)(B,{})})}),(0,O.jsxs)(s,{title:`API`,id:`api`,children:[(0,O.jsx)(h,{component:`DatePicker`}),(0,O.jsx)(h,{component:`MonthYearPicker`})]})]})}function U(e={}){let{wrapper:t}=e.components||{};return t?(0,O.jsx)(t,{...e,children:(0,O.jsx)(H,{...e})}):H(e)}function W(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{U as default};

package/dist/showcase/assets/dense-info-B04QmrOd.js

@@ -0,0 +1,106 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{cr as t,gr as n,hr as r,lr as i,sr as a,t as o,vr as s}from"./example-DPfw-R7_.js";import{t as c}from"./calendar-dWZ2-0gU.js";import{t as l}from"./chart-column-6l5wIZ0h.js";import{t as u}from"./folder-open-DqubQ0ts.js";import{a as d}from"./index-B-Z7p0So.js";import{t as f}from"./props-table-BzUnIcv-.js";import{t as p}from"./smart-card-50WN9sCI.js";import{t as m}from"./separator-CZ_sPWQj.js";import{t as h}from"./inline-stat-D2aaM1Vt.js";import{c as g,l as _,n as v,o as y,r as b,t as x,u as S}from"./item-CCu0Ufaq.js";var C=d();function w({value:e,max:t=5,label:r}){return(0,C.jsxs)(`div`,{className:s(`helpers--component`,`flex items-center gap-1`),children:[Array.from({length:t},(t,n)=>(0,C.jsx)(`div`,{className:s(`h-1.5 w-3 rounded-full`,n<e?`bg-foreground/60`:`bg-muted`)},n)),!!r&&(0,C.jsx)(n,{size:`xs`,type:`secondary`,className:`ml-1`,children:r})]})}function T({label:e,value:t,badge:r,badgeVariant:a}){return(0,C.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,C.jsx)(n,{size:`xs`,className:`shrink-0 text-muted-foreground`,children:e}),!!r&&(0,C.jsx)(i,{variant:a??`secondary`,children:r}),!!t&&!r&&(0,C.jsx)(n,{weight:`semibold`,className:`text-right tabular-nums`,children:t})]})}function E({title:e,description:t,statusBadges:r,rows:a,secondaryRows:o,scale:s,footerBadges:c,footerText:l,actions:u,className:d}){return(0,C.jsx)(p,{title:e,description:t,actions:u,className:d,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:r.map(e=>(0,C.jsx)(i,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(`div`,{className:`space-y-2`,children:a.map(e=>(0,C.jsx)(T,{...e},e.label))}),!!s&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(n,{size:`xs`,className:`text-muted-foreground`,children:s.label}),(0,C.jsx)(w,{value:s.value,max:s.max,label:`${String(s.value)}/${String(s.max??5)}`})]}),!!o&&o.length>0&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(m,{}),(0,C.jsx)(`div`,{className:`space-y-2`,children:o.map(e=>(0,C.jsx)(T,{...e},e.label))})]}),(!!c||!!l)&&(0,C.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:[!!c&&c.map(e=>(0,C.jsx)(i,{variant:e.variant,className:`text-xxs`,children:e.label},e.label)),!!l&&(0,C.jsx)(n,{size:`xs`,className:`text-muted-foreground`,children:l})]})]})})}E.displayName=`DenseInfoDashboard`;function D({title:e,description:t,stats:a,items:o,totalLabel:c,totalValue:l,footerBadges:u,footerText:d,actions:f,className:_}){return(0,C.jsx)(p,{title:e,description:t,actions:f,className:_,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`grid grid-cols-2 gap-2 sm:grid-cols-3`,children:a.map(e=>(0,C.jsxs)(`div`,{className:`rounded-lg border border-border/50 bg-muted/30 px-3 py-2.5 text-center`,children:[(0,C.jsx)(r,{tag:`h4`,className:`text-lg font-bold tabular-nums border-none pb-0`,children:e.value}),(0,C.jsx)(n,{size:`xxs`,type:`secondary`,weight:`medium`,className:`mt-0.5`,children:e.label}),!!e.trendBadge&&(0,C.jsx)(`div`,{className:`mt-1`,children:(0,C.jsx)(i,{variant:e.trendVariant??`secondary`,children:e.trendBadge})})]},e.label))}),(0,C.jsx)(m,{}),(0,C.jsx)(y,{children:o.map(e=>(0,C.jsxs)(x,{size:`xs`,className:`px-0`,children:[(0,C.jsx)(g,{children:(0,C.jsx)(`span`,{className:s(`h-2 w-2 shrink-0 rounded-full`,e.dotColor)})}),(0,C.jsx)(b,{children:(0,C.jsxs)(S,{bold:!1,className:`gap-2`,children:[e.label,!!e.badge&&(0,C.jsx)(i,{variant:e.badgeVariant??`secondary`,children:e.badge})]})}),(0,C.jsx)(v,{children:(0,C.jsx)(n,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:e.value})})]},e.label))}),!!l&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(m,{}),(0,C.jsx)(h,{label:c??`Total`,value:l,mono:!0,labelClassName:`text-sm font-bold`,valueClassName:`text-sm font-bold`})]}),(!!u||!!d)&&(0,C.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:[!!u&&u.map(e=>(0,C.jsx)(i,{variant:e.variant,className:`text-xxs`,children:e.label},e.label)),!!d&&(0,C.jsx)(n,{size:`xs`,className:`text-muted-foreground`,children:d})]})]})})}D.displayName=`DenseInfoClassification`;function O({title:e,description:t,headerBadges:r,lineItems:a,totalLabel:o=`Total`,totalAmount:s,footerBadges:c,footerText:l,actions:u,className:d}){return(0,C.jsx)(p,{title:e,description:t,actions:u,className:d,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:r.map(e=>(0,C.jsx)(i,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(y,{children:a.map((e,t)=>(0,C.jsxs)(`div`,{children:[t>0&&(0,C.jsx)(_,{className:`my-0`}),(0,C.jsxs)(x,{size:`xs`,className:`px-0`,children:[(0,C.jsx)(b,{children:(0,C.jsxs)(S,{className:`gap-2`,children:[e.label,!!e.badge&&(0,C.jsx)(i,{variant:e.badgeVariant??`secondary`,children:e.badge})]})}),(0,C.jsx)(v,{children:(0,C.jsx)(n,{size:`xs`,weight:`semibold`,className:`tabular-nums`,children:e.amount})})]})]},e.label))}),!!s&&(0,C.jsx)(h,{className:`rounded-lg bg-muted/50 px-3 py-2.5`,label:o,value:s,mono:!0,labelClassName:`text-sm font-bold`,valueClassName:`text-base font-bold`}),(!!c||!!l)&&(0,C.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:[!!c&&c.map(e=>(0,C.jsx)(i,{variant:e.variant,className:`text-xxs`,children:e.label},e.label)),!!l&&(0,C.jsx)(n,{size:`xs`,className:`text-muted-foreground`,children:l})]})]})})}O.displayName=`DenseInfoFinancial`;function k({title:e,description:t,statusLabel:a,statusVariant:o,metaPairs:s,date:d,priority:f,completedTasks:h,totalTasks:g,actions:_,className:v}){let y=g>0?Math.round(h/g*100):0,b=2*Math.PI*7,x=b-y/100*b;return(0,C.jsx)(p,{padding:`sm`,actions:_,className:v,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsx)(u,{className:`h-4 w-4 text-muted-foreground`}),(0,C.jsx)(i,{variant:o,dot:!0,children:a})]}),(0,C.jsx)(r,{tag:`h5`,className:`font-bold border-none pb-0`,children:e}),!!t&&(0,C.jsx)(n,{type:`secondary`,className:`line-clamp-2`,children:t}),!!s&&s.length>0&&(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:s.map((e,t)=>(0,C.jsxs)(`span`,{className:`flex items-center gap-1`,children:[t>0&&(0,C.jsx)(n,{tag:`span`,type:`discrete`,className:`mx-0.5`,children:`•`}),!!e.icon&&(0,C.jsx)(`span`,{className:`text-muted-foreground`,children:e.icon}),(0,C.jsx)(n,{size:`xs`,type:`secondary`,children:e.label})]},e.label))}),(!!d||!!f)&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[!!d&&(0,C.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,C.jsx)(c,{className:`h-3 w-3 text-muted-foreground`}),(0,C.jsx)(n,{size:`xs`,type:`secondary`,children:d})]}),!!f&&(0,C.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,C.jsx)(l,{className:`h-3 w-3 text-muted-foreground`}),(0,C.jsx)(n,{size:`xs`,type:`secondary`,children:f})]})]}),(0,C.jsx)(m,{}),(0,C.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,C.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,C.jsxs)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,className:`shrink-0`,children:[(0,C.jsx)(`circle`,{cx:`10`,cy:`10`,r:`7`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,className:`text-muted/50`}),(0,C.jsx)(`circle`,{cx:`10`,cy:`10`,r:`7`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeDasharray:b,strokeDashoffset:x,strokeLinecap:`round`,className:`text-primary`,transform:`rotate(-90 10 10)`})]}),(0,C.jsxs)(n,{size:`xs`,weight:`medium`,children:[h,`/`,g,` Tasks`]})]}),(0,C.jsx)(`div`,{className:`h-6 w-6 rounded-full bg-muted`})]})]})})}k.displayName=`DenseInfoProjectCard`;function A({title:e,description:t,statusBadges:n,score:a,scoreLevel:o,scoreFilled:c,scoreTotal:l=10,rows:u,footerBadges:d,actions:f,className:g}){let _=o===`good`?`bg-success`:o===`medium`?`bg-warning`:`bg-destructive`;return(0,C.jsx)(p,{title:e,description:t,actions:f,className:g,children:(0,C.jsxs)(`div`,{className:`space-y-3`,children:[(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:n.map(e=>(0,C.jsx)(i,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(`div`,{className:`flex items-center justify-center py-2`,children:(0,C.jsx)(r,{tag:`h2`,className:`text-4xl font-bold tabular-nums border-none pb-0`,children:String(a)})}),(0,C.jsx)(`div`,{className:`flex items-center justify-center gap-1`,children:Array.from({length:l},(e,t)=>(0,C.jsx)(`div`,{className:s(`h-5 w-2 rounded-sm`,t<c?_:`bg-muted`)},t))}),(0,C.jsx)(m,{}),(0,C.jsx)(`div`,{className:`space-y-2`,children:u.map(e=>(0,C.jsx)(h,{label:e.label,value:e.value,mono:!0,labelClassName:`text-xs text-muted-foreground`,valueClassName:`text-sm font-semibold text-right`},e.label))}),!!d&&d.length>0&&(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:d.map(e=>(0,C.jsx)(i,{variant:e.variant,className:`text-xxs`,children:e.label},e.label))})]})})}A.displayName=`DenseInfoScoreCard`;var j=e({Classification:()=>P,Dashboard:()=>M,Financial:()=>F,ProjectCards:()=>I,ScoreCard:()=>N});function M(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(E,{title:`Order Summary`,statusBadges:[{label:`Confirmed`,variant:`success`},{label:`Priority: High`,variant:`warning`}],rows:[{label:`Customer`,value:`Sarah Smitha`},{label:`Order Total`,value:`2,450 USD`},{label:`Items`,value:`3 vouchers`}],scale:{label:`Complexity`,value:3,max:5},footerText:`Order #ORD-2026-0412`})})}function N(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(A,{title:`Business Score`,statusBadges:[{label:`Excellent`,variant:`success`}],score:714,scoreLevel:`good`,scoreFilled:7,scoreTotal:10,rows:[{label:`Payment History`,value:`Excellent`},{label:`Credit Utilization`,value:`32%`},{label:`Account Age`,value:`8 years`}],footerBadges:[{label:`Next review: Jun 2026`,variant:`info`}]})})}function P(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(D,{title:`Product Categories`,description:`Distribution by type`,stats:[{label:`Total`,value:`354`,trendBadge:`+12%`,trendVariant:`success`},{label:`Active`,value:`298`},{label:`Avg. Price`,value:`142 USD`}],items:[{label:`Wellness & Spa`,value:`124`,dotColor:`bg-chart-1`,badge:`Top`,badgeVariant:`success`},{label:`Food & Drink`,value:`89`,dotColor:`bg-chart-4`},{label:`Adventure`,value:`67`,dotColor:`bg-chart-2`}],totalLabel:`All Categories`,totalValue:`354`})})}function F(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsx)(O,{title:`Q1 Financial Summary`,headerBadges:[{label:`On Track`,variant:`success`},{label:`Q1 2026`,variant:`secondary`}],lineItems:[{label:`Product Sales`,amount:`89,400 USD`,badge:`Primary`,badgeVariant:`success`},{label:`Gift Card Revenue`,amount:`22,100 USD`},{label:`Service Fees`,amount:`8,500 USD`}],totalLabel:`Total Revenue`,totalAmount:`124,500 USD`})})}function I(){return(0,C.jsx)(C.Fragment,{children:(0,C.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-3`,children:[(0,C.jsx)(k,{title:`Website Redesign`,description:`Complete overhaul of the marketing site.`,statusLabel:`In Progress`,statusVariant:`warning`,date:`Mar 15 — Jun 15`,priority:`High`,completedTasks:12,totalTasks:20}),(0,C.jsx)(k,{title:`Mobile App v2.0`,description:`Native iOS and Android app.`,statusLabel:`On Track`,statusVariant:`success`,date:`Jan 10 — Jul 10`,priority:`Critical`,completedTasks:34,totalTasks:48}),(0,C.jsx)(k,{title:`API Documentation`,description:`OpenAPI spec and dev portal.`,statusLabel:`Planning`,statusVariant:`info`,date:`Apr 1 — Apr 14`,priority:`Medium`,completedTasks:0,totalTasks:8})]})})}var L=`import {
+	DenseInfoDashboard,
+	DenseInfoClassification,
+	DenseInfoFinancial,
+	DenseInfoProjectCard,
+	DenseInfoScoreCard,
+} from '@/components/composed/data-display/dense-info-card';
+
+export function Dashboard() {
+	return (
+		<>
+			<DenseInfoDashboard
+								title="Order Summary"
+								statusBadges={[
+									{ label: 'Confirmed', variant: 'success' },
+									{ label: 'Priority: High', variant: 'warning' },
+								]}
+								rows={[
+									{ label: 'Customer', value: 'Sarah Smitha' },
+									{ label: 'Order Total', value: '2,450 USD' },
+									{ label: 'Items', value: '3 vouchers' },
+								]}
+								scale={{ label: 'Complexity', value: 3, max: 5 }}
+								footerText="Order #ORD-2026-0412"
+							/>
+		</>
+	);
+}
+
+export function ScoreCard() {
+	return (
+		<>
+			<DenseInfoScoreCard
+								title="Business Score"
+								statusBadges={[{ label: 'Excellent', variant: 'success' }]}
+								score={714}
+								scoreLevel="good"
+								scoreFilled={7}
+								scoreTotal={10}
+								rows={[
+									{ label: 'Payment History', value: 'Excellent' },
+									{ label: 'Credit Utilization', value: '32%' },
+									{ label: 'Account Age', value: '8 years' },
+								]}
+								footerBadges={[{ label: 'Next review: Jun 2026', variant: 'info' }]}
+							/>
+		</>
+	);
+}
+
+export function Classification() {
+	return (
+		<>
+			<DenseInfoClassification
+								title="Product Categories"
+								description="Distribution by type"
+								stats={[
+									{ label: 'Total', value: '354', trendBadge: '+12%', trendVariant: 'success' },
+									{ label: 'Active', value: '298' },
+									{ label: 'Avg. Price', value: '142 USD' },
+								]}
+								items={[
+									{ label: 'Wellness & Spa', value: '124', dotColor: 'bg-chart-1', badge: 'Top', badgeVariant: 'success' },
+									{ label: 'Food & Drink', value: '89', dotColor: 'bg-chart-4' },
+									{ label: 'Adventure', value: '67', dotColor: 'bg-chart-2' },
+								]}
+								totalLabel="All Categories"
+								totalValue="354"
+							/>
+		</>
+	);
+}
+
+export function Financial() {
+	return (
+		<>
+			<DenseInfoFinancial
+								title="Q1 Financial Summary"
+								headerBadges={[
+									{ label: 'On Track', variant: 'success' },
+									{ label: 'Q1 2026', variant: 'secondary' },
+								]}
+								lineItems={[
+									{ label: 'Product Sales', amount: '89,400 USD', badge: 'Primary', badgeVariant: 'success' },
+									{ label: 'Gift Card Revenue', amount: '22,100 USD' },
+									{ label: 'Service Fees', amount: '8,500 USD' },
+								]}
+								totalLabel="Total Revenue"
+								totalAmount="124,500 USD"
+							/>
+		</>
+	);
+}
+
+export function ProjectCards() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-3">
+								<DenseInfoProjectCard title="Website Redesign" description="Complete overhaul of the marketing site." statusLabel="In Progress" statusVariant="warning" date="Mar 15 — Jun 15" priority="High" completedTasks={12} totalTasks={20} />
+								<DenseInfoProjectCard title="Mobile App v2.0" description="Native iOS and Android app." statusLabel="On Track" statusVariant="success" date="Jan 10 — Jul 10" priority="Critical" completedTasks={34} totalTasks={48} />
+								<DenseInfoProjectCard title="API Documentation" description="OpenAPI spec and dev portal." statusLabel="Planning" statusVariant="info" date="Apr 1 — Apr 14" priority="Medium" completedTasks={0} totalTasks={8} />
+							</div>
+		</>
+	);
+}
+`;function R(e){let n={h4:`h4`,...e.components};return j||B(`Examples`,!1),P||B(`Examples.Classification`,!0),M||B(`Examples.Dashboard`,!0),F||B(`Examples.Financial`,!0),I||B(`Examples.ProjectCards`,!0),N||B(`Examples.ScoreCard`,!0),(0,C.jsxs)(t,{title:`Composed · Dense info cards`,description:`Five layout variants — dashboard, classification, financial, project, score.`,layer:`composed`,status:`ready`,children:[(0,C.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,C.jsx)(o,{name:`Dashboard`,source:L,children:(0,C.jsx)(M,{})}),(0,C.jsx)(o,{name:`ScoreCard`,source:L,children:(0,C.jsx)(N,{})}),(0,C.jsx)(o,{name:`Classification`,source:L,children:(0,C.jsx)(P,{})}),(0,C.jsx)(o,{name:`Financial`,source:L,children:(0,C.jsx)(F,{})}),(0,C.jsx)(o,{name:`ProjectCards`,source:L,children:(0,C.jsx)(I,{})})]}),(0,C.jsxs)(a,{title:`API`,id:`api`,children:[(0,C.jsx)(n.h4,{children:`DenseInfoDashboard`}),(0,C.jsx)(f,{component:`DenseInfoDashboard`}),(0,C.jsx)(n.h4,{children:`DenseInfoClassification`}),(0,C.jsx)(f,{component:`DenseInfoClassification`}),(0,C.jsx)(n.h4,{children:`DenseInfoFinancial`}),(0,C.jsx)(f,{component:`DenseInfoFinancial`}),(0,C.jsx)(n.h4,{children:`DenseInfoProjectCard`}),(0,C.jsx)(f,{component:`DenseInfoProjectCard`}),(0,C.jsx)(n.h4,{children:`DenseInfoScoreCard`}),(0,C.jsx)(f,{component:`DenseInfoScoreCard`})]})]})}function z(e={}){let{wrapper:t}=e.components||{};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(R,{...e})}):R(e)}function B(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{z as default};

package/dist/showcase/assets/dialog-DotEO3IO.js

@@ -0,0 +1 @@
+import"./chunk-CilyBKbf.js";import{Ln as e,l as t,vr as n}from"./example-DPfw-R7_.js";import{t as r}from"./x-t42iKYpL.js";import{a as i,k as a}from"./index-B-Z7p0So.js";import{a as o,c as s,i as c,n as l,o as u,r as d,s as f,t as p}from"./DialogTrigger-Cl7n_3xX.js";a();var m=i();function h({...e}){return(0,m.jsx)(d,{"data-slot":`dialog`,modal:`trap-focus`,...e})}function g({asChild:e=!1,...n}){let r=e?(0,m.jsx)(t,{}):void 0;return(0,m.jsx)(p,{"data-slot":`dialog-trigger`,render:r,...n})}function _({...e}){return(0,m.jsx)(c,{"data-slot":`dialog-portal`,...e})}function v({className:e,...t}){return(0,m.jsx)(s,{"data-slot":`dialog-overlay`,className:n(`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50`,e),...t})}function y({className:t,children:i,showCloseButton:a=!0,...s}){return(0,m.jsxs)(_,{children:[(0,m.jsx)(v,{}),(0,m.jsxs)(o,{"data-slot":`dialog-content`,className:n(`bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none`,t),...s,children:[i,!!a&&(0,m.jsxs)(f,{"data-slot":`dialog-close`,render:(0,m.jsx)(e,{variant:`ghost`,className:`absolute top-4 right-4`,size:`icon-sm`}),children:[(0,m.jsx)(r,{}),(0,m.jsx)(`span`,{className:`sr-only`,children:`Close`})]})]})]})}function b({className:e,...t}){return(0,m.jsx)(`div`,{"data-slot":`dialog-header`,className:n(`gap-2 flex flex-col`,e),...t})}function x({className:t,showCloseButton:r=!1,children:i,...a}){return(0,m.jsxs)(`div`,{"data-slot":`dialog-footer`,className:n(`gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,t),...a,children:[i,!!r&&(0,m.jsx)(f,{render:(0,m.jsx)(e,{variant:`outline`}),children:`Close`})]})}function S({className:e,asChild:r=!1,...i}){let a=r?(0,m.jsx)(t,{}):void 0;return(0,m.jsx)(l,{"data-slot":`dialog-title`,render:a,className:n(`leading-none font-medium`,e),...i})}function C({className:e,asChild:r=!1,...i}){let a=r?(0,m.jsx)(t,{}):void 0;return(0,m.jsx)(u,{"data-slot":`dialog-description`,render:a,className:n(`text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3`,e),...i})}export{b as a,x as i,y as n,S as o,C as r,g as s,h as t};