admin-ui-starter-kit 0.1.2 → 0.1.4

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

@@ -0,0 +1,149 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,Tr as n,Ur as r,hr as i,mr as a,t as o}from"./example-C6-_Sy6B.js";import{t as s}from"./arrow-right-BclouSfP.js";import{a as c,i as l}from"./index-B8DVXCmf.js";import{t as u}from"./props-table-CM_1cocj.js";import{t as d}from"./orders-BFwWtubb.js";import{n as f,t as p}from"./money-display-0egZ_O76.js";var m=c(),h=(0,m.jsx)(s,{className:`size-3 shrink-0 opacity-60`,"aria-hidden":`true`});function g({pair:e,emptyLabel:i=`—`,separator:a=h,className:o,size:s,tag:c=`span`,...l}){let{defaultTextSize:u}=r(),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)(t,{tag:c,size:d,type:`secondary`,className:n(`currency-pair-preview--component`,`tabular-nums`,o),...l,children:i}):(0,m.jsxs)(t,{tag:c,size:d,className:n(`inline-flex items-center gap-1.5 tabular-nums`,o),...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:a}),(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)(i,{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)(a,{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)(a,{title:`Default`,id:`default`,children:(0,m.jsx)(o,{name:`Default`,source:k,children:(0,m.jsx)(y,{})})}),(0,m.jsx)(a,{title:`Sizes`,id:`sizes`,children:(0,m.jsx)(o,{name:`Sizes`,source:k,children:(0,m.jsx)(b,{})})}),(0,m.jsxs)(a,{title:`Currencies & empty state`,id:`currencies`,children:[(0,m.jsx)(o,{name:`MultipleCurrencies`,source:k,children:(0,m.jsx)(x,{})}),(0,m.jsx)(o,{name:`EmptyState`,source:k,children:(0,m.jsx)(S,{})})]}),(0,m.jsx)(a,{title:`Dual pricing — stacked`,id:`dual-stacked`,children:(0,m.jsx)(o,{name:`PairStackedEmphasisVariants`,source:k,children:(0,m.jsx)(C,{})})}),(0,m.jsxs)(a,{title:`Dual pricing — inline`,id:`dual-inline`,children:[(0,m.jsx)(o,{name:`PairInlineEmphasisVariants`,source:k,children:(0,m.jsx)(w,{})}),(0,m.jsx)(o,{name:`PairMinimalVariant`,source:k,children:(0,m.jsx)(T,{})})]}),(0,m.jsx)(a,{title:`CurrencyPairPreview`,id:`pair-preview`,children:(0,m.jsx)(o,{name:`CurrencyPairPreviewExample`,source:k,children:(0,m.jsx)(E,{})})}),(0,m.jsx)(a,{title:`UIProvider configuration`,id:`provider`,children:(0,m.jsx)(o,{name:`ProviderConfigDualPricing`,source:k,children:(0,m.jsx)(D,{})})}),(0,m.jsx)(a,{title:`Realistic usage`,id:`realistic`,children:(0,m.jsx)(o,{name:`RealisticOrdersList`,source:k,children:(0,m.jsx)(O,{})})}),(0,m.jsxs)(a,{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/dark-surfaces-BCG45K2m.js

@@ -0,0 +1,90 @@
+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,hr as s,mr as c,r as l,t as u}from"./example-C6-_Sy6B.js";import{t as d}from"./chevron-down-x7TQsvYY.js";import{t as f}from"./chevron-right-CDDMIkYP.js";import{t as p}from"./chevron-up-Dc3aAaGH.js";import{t as m}from"./circle-question-mark-BQrUUiKD.js";import{t as h}from"./credit-card-BoDfW0R8.js";import{t as g}from"./send-Blu_n6xl.js";import{D as _,a as v}from"./index-B8DVXCmf.js";import{t as y}from"./props-table-CM_1cocj.js";import{t as b}from"./icon-badge-Bcm8TlJi.js";import{t as x}from"./separator-DUKleOvU.js";import{t as S}from"./inline-stat-D0sE-A4C.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-CMRbW6s-.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(n(),1),L=v();function R({amount:e,details:t=[],helpText:n,onHelp:s,className:c,strings:u}){let h=_(M,u),[g,v]=(0,I.useState)(!0);return(0,L.jsxs)(`div`,{className:o(`dark-payment--component`,`dark rounded-lg bg-card p-5 text-card-foreground shadow-sm ring-1 ring-border`,c),children:[(0,L.jsxs)(`div`,{className:`flex flex-col items-center text-center`,children:[(0,L.jsx)(b,{icon:r,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:`border-none pb-0 text-2xl tabular-nums tracking-tight`,children:e})]}),t.length>0&&(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(x,{className:`my-4`}),(0,L.jsxs)(l,{variant:`light`,buttonStyle:`ghost`,onClick:()=>v(!g),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}),g?(0,L.jsx)(p,{className:`size-4`}):(0,L.jsx)(d,{className:`size-4`})]}),!!g&&(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))})]}),!!n&&(0,L.jsxs)(k,{variant:`muted`,className:o(`mt-4`,s&&`cursor-pointer`),onClick:s,children:[(0,L.jsx)(C,{variant:`icon`,className:`text-muted-foreground`,children:(0,L.jsx)(m,{})}),(0,L.jsx)(D,{children:(0,L.jsx)(A,{bold:!1,className:`text-muted-foreground`,children:n})}),(0,L.jsx)(T,{children:(0,L.jsx)(f,{className:`size-4 text-muted-foreground`})})]})]})}R.displayName=`DarkPaymentConfirmation`;function z({referenceCode:e,status:t,details:n=[],amountPaid:r,className:s,strings:c}){let l=_(j,c),u=t??l.statusConfirmed;return(0,L.jsxs)(`div`,{className:o(`booking-receipt--component`,`dark rounded-lg bg-card p-5 text-card-foreground shadow-sm ring-1 ring-border`,s),children:[(0,L.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,L.jsx)(a,{tag:`h6`,className:`!border-0 !pb-0`,children:l.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-md bg-muted p-3 font-mono tracking-wider`,children:e}),(0,L.jsx)(S,{className:`mt-4 border-t border-border pt-4`,label:l.amountPaidLabel,value:(0,L.jsx)(a,{tag:`h4`,className:`border-none pb-0 text-lg`,children:r}),labelClassName:`text-sm`})]})}z.displayName=`BookingReceiptDark`;function B({title:e,items:t,totalLabel:n,totalValue:r,defaultOpen:s=!0,className:c,strings:u}){let f=_(N,u),m=e??f.defaultTitle,[h,g]=(0,I.useState)(s);return(0,L.jsxs)(`div`,{className:o(`dark-info-panel--component`,`dark rounded-lg bg-card p-4 text-card-foreground shadow-sm ring-1 ring-border`,c),children:[(0,L.jsxs)(l,{variant:`light`,buttonStyle:`ghost`,onClick:()=>g(!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)(p,{className:`size-4 text-muted-foreground`}):(0,L.jsx)(d,{className:`size-4 text-muted-foreground`})]}),!!h&&(0,L.jsxs)(`div`,{className:`mt-3 space-y-3 text-sm`,children:[t.map(e=>(0,L.jsxs)(`div`,{className:`flex items-baseline justify-between gap-6`,children:[(0,L.jsx)(i,{type:`secondary`,className:`min-w-0`,children:e.label}),(0,L.jsx)(i,{weight:`medium`,className:o(`shrink-0 text-right`,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 items-baseline justify-between gap-6`,children:[(0,L.jsx)(i,{weight:`semibold`,type:`secondary`,className:`min-w-0`,children:n}),(0,L.jsx)(i,{weight:`semibold`,className:`shrink-0 text-right`,children:r})]})})]})]})}B.displayName=`DarkInfoPanel`;function V({items:e,summary:t=[],total:n,className:r,strings:s}){let c=_(P,s);return(0,L.jsxs)(`div`,{className:o(`order-items--component`,`dark rounded-lg bg-card p-4 text-card-foreground shadow-sm ring-1 ring-border`,r),children:[(0,L.jsx)(a,{tag:`h6`,className:`!border-0 !pb-0`,children:c.title}),(0,L.jsx)(E,{className:`mt-3 gap-2`,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:o(`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-3 space-y-2 border-t border-border pt-3 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:c.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=_(F,d);return(0,L.jsxs)(`div`,{className:o(`outstanding-balance--component`,`dark rounded-lg bg-card p-5 text-card-foreground shadow-sm 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:o(`border-none pb-0 text-2xl tabular-nums tracking-tight`,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-4 flex gap-2`,children:[(0,L.jsxs)(l,{variant:`warning`,className:`flex-1 rounded-md`,onClick:s,children:[(0,L.jsx)(g,{className:`mr-1.5 size-3.5`}),f.sendReminder]}),(0,L.jsxs)(l,{variant:`success`,className:`flex-1 rounded-md`,onClick:c,children:[(0,L.jsx)(h,{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)(s,{title:`Composed · Dark surfaces`,description:`Dark-wrapped components — payment, receipt, info panel, order items, outstanding balance.`,layer:`composed`,status:`ready`,children:[(0,L.jsxs)(c,{title:`Examples`,id:`examples`,children:[(0,L.jsx)(u,{name:`PaymentConfirmation`,source:Y,children:(0,L.jsx)(W,{})}),(0,L.jsx)(u,{name:`BookingReceipt`,source:Y,children:(0,L.jsx)(G,{})}),(0,L.jsx)(u,{name:`InfoPanel`,source:Y,children:(0,L.jsx)(K,{})}),(0,L.jsx)(u,{name:`OrderItems`,source:Y,children:(0,L.jsx)(q,{})}),(0,L.jsx)(u,{name:`OutstandingBalance`,source:Y,children:(0,L.jsx)(J,{})})]}),(0,L.jsxs)(c,{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-DeGR0hed.js

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

@@ -0,0 +1 @@
+import{t as e}from"./format-BG4laCmp.js";import{Cr as t,Tr as n}from"./example-C6-_Sy6B.js";import{D as r,a as i}from"./index-B8DVXCmf.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(`size-14 rounded-md border px-2 py-1.5`,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:`base`,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-BHbZa4ML.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{n}from"./isSameDay-BrDHfKHm.js";import{i as r,r as i,t as a}from"./calendar-BhZpIjCo.js";import{m as o,t as s}from"./format-BG4laCmp.js";import{Cr as c,Pr as l,Sr as u,Tr as d,r as f}from"./example-C6-_Sy6B.js";import{t as ee}from"./calendar-oKaDsUIy.js";import{t as p}from"./clock-Bn2R4aDX.js";import{D as m,a as h,c as g,p as _}from"./index-B8DVXCmf.js";import{t as v}from"./label-BmKD22pm.js";import{t as y}from"./input-25epjsiD.js";import{r as b,t as te}from"./popover-T85aV4zW.js";import{t as ne}from"./popover-DtnuOBgr.js";import{t as re}from"./separator-DUKleOvU.js";import{n as x,t as ie}from"./toggle-group-CK8mBx6E.js";var S=e(t(),1),C=h();function ae({config:e,output:t,hasSelection:n,autoSummary:r,className:i}){let{text:a,actions:o,showOnlyWhenSelected:s=!1,showSummary:l=!1}=e,u=S.useMemo(()=>{if(a)return typeof a==`function`?a(t):a},[a,t]),ee=u||(l?r:void 0);if(s&&!n||!ee&&(!o||o.length===0))return null;let p=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,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(re,{}),(0,C.jsxs)(`div`,{className:d(`flex flex-col gap-3 p-3`,i),children:[!!ee&&(0,C.jsxs)(`div`,{className:`text-sm`,children:[!!l&&!!u&&!!r&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(c,{type:`secondary`,children:r}),(0,C.jsx)(c,{weight:`medium`,className:`mt-1`,children:u})]}),!l&&!!u&&(0,C.jsx)(c,{weight:`medium`,children:u}),!!l&&!u&&!!r&&(0,C.jsx)(c,{type:`secondary`,children:r})]}),!!o&&o.length>0&&(0,C.jsx)(`div`,{className:`flex items-center gap-2`,children:o.map(e=>{let n=typeof e.disabled==`function`?e.disabled(t):e.disabled,r=p(e.variant??null);return(0,C.jsx)(f,{variant:r.variant,buttonStyle:r.buttonStyle,disabled:n,onClick:()=>e.onClick(t),className:`flex-1`,children:e.label},e.label)})})]})]})}ae.displayName=`DatePickerFooter`;function oe({config:e,className:t}){let{title:n,description:r,icon:i,align:a=`left`}=e;return(0,C.jsx)(`div`,{className:d(`date-picker-header--component`,`border-b p-4`,a===`center`?`text-center`:`text-left`,t),children:(0,C.jsxs)(`div`,{className:`flex items-center justify-start gap-3`,children:[!!i&&(0,C.jsx)(`div`,{className:`flex-shrink-0`,children:(0,C.jsx)(i,{className:`h-5 w-5 text-primary`})}),(0,C.jsxs)(`div`,{className:d(`flex-1`,a===`center`&&!i&&`text-center`),children:[(0,C.jsx)(u,{tag:`h3`,containerClassName:`space-y-0`,className:`font-semibold text-base leading-none`,children:n}),!!r&&(0,C.jsx)(c,{type:`secondary`,className:`mt-2`,children:r})]})]})})}oe.displayName=`DatePickerHeader`;function w(e){return e.toString().padStart(2,`0`)}function T(e,t,n){return Math.min(Math.max(e,t),n)}function E(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 D(e){if(!e)return null;let t=e.split(`:`);if(t.length<2||t.length>3)return null;let[n,r,i]=t,a=T(Number.parseInt(n,10),0,23),o=T(Number.parseInt(r,10),0,59),s=T(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 O(e,t,n){let r=Number.isFinite(e?.getTime?.())?e:new Date,i=r.getHours(),a=r.getMinutes(),o=t?r.getSeconds():0,s=E(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 k(e,t,n){if(t===`12`){let t=e.hours>=12?`PM`:`AM`,r=e.hours%12;return r===0&&(r=12),{hours:w(r),minutes:w(e.minutes),seconds:n?w(e.seconds):void 0,period:t}}return{hours:w(e.hours),minutes:w(e.minutes),seconds:n?w(e.seconds):void 0}}function se(e,t,n){let r=e=>{let t=Number.parseInt(e??`0`,10);return Number.isNaN(t)?0:t},i=r(e.hours),a=T(r(e.minutes),0,59),o=n?T(r(e.seconds),0,59):0;if(t===`12`){i=T(i,1,12);let t=(e.period??`AM`)===`PM`;i%=12,t&&(i+=12)}else i=T(i,0,23);return{hours:i,minutes:a,seconds:o}}function A(e,t,n){let r=E(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 j(e,t,n,r){let i=w(e.minutes),a=t?`:${w(e.seconds)}`:``;if(n===`24`)return`${w(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`${w(s)}:${i}${a} ${c}`}var M=/'[^']*'/g,N=/[HKhk]|\bp\b|\bt\b|\ba\b/;function ce(e){if(!e)return!1;let t=e.replace(M,``);return N.test(t)}function P(e){return{startMonth:typeof e?.fromYear==`number`?new Date(e.fromYear,0):void 0,endMonth:typeof e?.toYear==`number`?new Date(e.toYear,11):void 0}}function F(e,t,n,r){let i=r?{locale:r}:void 0;return{date:e,formatted:e?s(e,t,i):void 0,readable:e?s(e,n,i):void 0}}function le(e,t,n,r){let i=r?{locale:r}:void 0;return{dates:e,formatted:e.map(e=>s(e,t,i)),readable:e.map(e=>s(e,n,i))}}function I(e,t,n,r){let i=r?{locale:r}:void 0;return{range:e,formatted:{from:e?.from?s(e.from,t,i):void 0,to:e?.to?s(e.to,t,i):void 0},readable:{from:e?.from?s(e.from,n,i):void 0,to:e?.to?s(e.to,n,i):void 0}}}function L(e,t){let n=typeof t==`string`?D(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 R(e,t,n){let r=e;return e.from&&(r={...r,from:L(e.from,t)}),e.to&&r&&(r={...r,to:L(e.to,n)}),r}function ue(e,t){return Math.ceil((t.getTime()-e.getTime())/(1e3*60*60*24))+1}function de(e,t,n){if(!e?.from||!e?.to)return{isValid:!0};let r=ue(e.from,e.to);return t&&r<t||n&&r>n?{isValid:!1,daysDiff:r}:{isValid:!0,daysDiff:r}}function z(e,t,n,r){if(!e?.from||!e?.to)return null;let i=ue(e.from,e.to);return t&&i<t?r.minimumDays(t):n&&i>n?r.maximumDays(n):null}function B(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 fe(e,t,n,r,i,a){if(e){let n=s(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 s(e[0],t,n)}return i.datesSelected(e.length)}return n??r}function pe(e,t,n,r,i){if(e?.from){let n=i?{locale:i}:void 0;return e.to?`${s(e.from,t,n)} - ${s(e.to,t,n)}`:s(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 me(e){return e.replace(/\D/g,``).slice(-2)}function K(e){return e.length===0?`00`:e.length===1?`0${e}`:e}function he(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 ge(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 _e({value:e,onChange:t,format:n,includeSeconds:r,step:i,disabled:a,className:o,labels:s,periodLabels:l}){let u=S.useMemo(()=>r?U:U.slice(0,2),[r]),[f,ee]=S.useState(()=>Y(k(e,n,r),n)),p=S.useRef(f),m=S.useRef(!1),h=S.useCallback(e=>{p.current=e,ee(e)},[]),g=S.useRef({hours:null,minutes:null,seconds:null});S.useEffect(()=>{if(m.current){m.current=!1;return}h(Y(k(e,n,r),n))},[e,n,r,h]);let _=S.useCallback(e=>{m.current=!0,t(se(e,n,r))},[n,r,t]),v=S.useCallback(e=>{let a=A(se(e,n,r),i,r);t(a),h(Y(k(a,n,r),n))},[n,r,t,i,h]),b=S.useCallback(e=>{if(!e)return;let t=g.current[e];t&&(t.focus(),t.select())},[]),te=S.useCallback((e,t)=>{let r=p.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(ge(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};h(c),_(c)},[n,h,_]),ne=S.useCallback((e,t)=>{let r=me(t),i={...p.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=p.current.period??`AM`):r.length===2&&e>12?(a=J(e),i.hours=K(ge(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=p.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};h(o),_(o)},[n,h,_]),re=S.useCallback(e=>{n===`12`&&v({...p.current,period:e})},[v,n]),ae=S.useCallback(()=>{v(p.current)},[v]),oe=S.useCallback((e,t)=>{if(e.key.length===1&&/\d/.test(e.key)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){e.preventDefault(),te(t,Number.parseInt(e.key,10));return}if(e.key===`ArrowRight`){b(he(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))}},[te,b,r]),w=S.useMemo(()=>{if(n===`12`)return f.period?[f.period]:void 0},[n,f.period]);return(0,C.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,C.jsxs)(S.Fragment,{children:[(0,C.jsx)(y,{ref:t=>{g.current[e]=t},value:i,onChange:t=>ne(e,t.target.value),onFocus:e=>e.target.select(),onBlur:ae,onKeyDown:t=>oe(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,C.jsx)(c,{tag:`span`,type:`secondary`,children:`:`})]},e)}),n===`12`&&(0,C.jsxs)(ie,{value:w,onValueChange:e=>{let t=e[0];t&&re(t)},disabled:a,size:`sm`,className:`ml-1`,children:[(0,C.jsx)(x,{value:`AM`,"aria-label":l.am,children:l.am}),(0,C.jsx)(x,{value:`PM`,"aria-label":l.pm,children:l.pm})]})]})}_e.displayName=`SegmentedTimeInput`;function ve(e){return e===`ghost`?`ghost`:e===`secondary`?`secondary`:`outline`}function ye(e){let t=ve(e);return t===`ghost`?{variant:`secondary`,buttonStyle:`ghost`}:t===`secondary`?{variant:`secondary`,buttonStyle:`solid`}:{variant:`secondary`,buttonStyle:`outline`}}var be=[`!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 xe(e){return!e.mode||e.mode===`single`}function Se(e){return e.mode===`multiple`}function X(e){return e.mode===`range`}function Ce(e,t){return[{label:e.today,getValue:()=>({from:new Date,to:new Date})},{label:e.thisWeek,getValue:()=>({from:o(new Date,{weekStartsOn:t}),to:i(new Date,{weekStartsOn:t})})},{label:e.thisMonth,getValue:()=>({from:r(new Date),to:_(new Date)})},{label:e.last30Days,getValue:()=>({from:n(new Date,-30),to:new Date})}]}function we(e){let[t,n]=S.useState(!1),r=e.locale??g,i=m(H,e.strings??e.translations),a=S.useMemo(()=>e.enableYearDropdown||e.yearSelection?.enabled?`dropdown`:`label`,[e.enableYearDropdown,e.yearSelection]),o=S.useMemo(()=>P(e.yearSelection),[e.yearSelection]);return xe(e)?(0,C.jsx)(Te,{className:`date-picker--component`,...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a,yearBounds:o}):Se(e)?(0,C.jsx)(Z,{...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a,yearBounds:o}):X(e)?(0,C.jsx)(Ee,{...e,open:t,setOpen:n,t:i,dateFnsLocale:r,captionLayout:a,yearBounds:o}):null}function Te({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:i=`PPP`,placeholder:o,closeOnSelect:l=!0,withTime:u,disabledDates:m,calendarProps:h,open:g,setOpen:_,t:y,dateFnsLocale:x,captionLayout:ie,yearBounds:w,...T}){let E=S.useId(),D=`${E}-description`,k=T.error!==void 0&&T.error!==null&&T.error!==``,se=k?D:void 0,M=T.hint!==void 0&&T.hint!==null&&T.hint!==``,N=typeof T.error==`string`?T.error:``,P=typeof T.hint==`string`?T.hint:``,le=u?.format??`24`,I=u?.step??60,R=u?.showSeconds??!1,ue=ce(i),de=u?.showTimeInButton??!ue,[z,B]=S.useState(()=>e??t),[V,pe]=S.useState(()=>O(e??t,R,I)),H=S.useRef(e??t??void 0),U=S.useRef(!1),W=S.useRef(e!==void 0),G=S.useCallback((e,t)=>{let n=e;if(e&&u?.enabled){let r=L(e,t??V);n=Number.isFinite(r.getTime())?r:void 0}return F(n,r,i,x)},[r,i,x,u,V]);S.useEffect(()=>{let a=!!u?.enabled,o=W.current,s=e!==void 0,c=(e,t)=>{let o=A(O(e,R,I),I,R);if(B(t=>t?.getTime?.()===e.getTime()?t:e),pe(e=>e.hours===o.hours&&e.minutes===o.minutes&&e.seconds===o.seconds?e:o),H.current=e,U.current=!0,t&&a){let t=L(e,o);n?.(F(t,r,i,x))}};if(!a){U.current=!1,H.current=e??t??void 0,B(e??t),W.current=s;return}let l=H.current?.getTime?.(),d=e?.getTime?.();if(!s&&o&&t===void 0&&(U.current=!1,H.current=void 0),e!==void 0&&d!==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},[u?.enabled,e,t,R,I,n,r,i,x]),S.useEffect(()=>{u?.enabled&&pe(e=>{let t=A(e,I,R);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t})},[u?.enabled,I,R]);let me=S.useCallback(e=>{if(B(e),u?.enabled&&e&&(U.current=!0,H.current=e),u?.enabled){n?.(G(e)),l&&e&&_(!1);return}n?.(G(e)),l&&e&&_(!1)},[n,G,l,_,u]),K=S.useCallback(e=>{pe(e),z&&n?.(G(z,e))},[z,n,G]),he=S.useMemo(()=>{if(u?.enabled)return j(V,R,le,{am:y.am,pm:y.pm})},[u?.enabled,V,R,le,y]),q=S.useMemo(()=>fe(z,i,o,y.selectDate,de?he:void 0,x),[z,i,o,y,he,de,x]),ge=S.useMemo(()=>z?s(z,i,{locale:x}):void 0,[z,i,x]);return(0,C.jsxs)(`div`,{className:d(`space-y-2`,T.className),children:[!!(T.label||M)&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!T.label&&(0,C.jsx)(v,{htmlFor:E,className:d(`leading-6`,k&&`text-destructive`),children:T.label}),!k&&!!M&&(0,C.jsx)(c,{tag:`span`,type:`secondary`,children:P})]}),(0,C.jsxs)(te,{open:g,onOpenChange:_,children:[(0,C.jsx)(b,{render:e=>{let t=ye(T.buttonVariant);return(0,C.jsxs)(f,{...e,id:E,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":k,"aria-describedby":se,className:d(`w-full justify-start text-left font-normal`,be,!z&&`text-muted-foreground`,T.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:T.disabled,children:[(0,C.jsx)(ee,{className:`mr-2 h-4 w-4`}),q]})}}),(0,C.jsxs)(ne,{className:`w-auto p-0`,align:`start`,children:[!!T.header&&(0,C.jsx)(oe,{config:T.header}),(0,C.jsx)(a,{mode:`single`,selected:z,onSelect:me,defaultMonth:z,numberOfMonths:T.numberOfMonths,showOutsideDays:T.showOutsideDays,disabled:m??T.disabled,locale:x,captionLayout:ie,startMonth:w.startMonth,endMonth:w.endMonth,...h}),!!u?.enabled&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(re,{}),(0,C.jsxs)(`div`,{className:`p-3`,children:[(0,C.jsx)(v,{size:`sm`,children:y.startTime}),(0,C.jsxs)(`div`,{className:`mt-2 flex items-center gap-2`,children:[(0,C.jsx)(p,{className:`h-4 w-4 text-muted-foreground`}),(0,C.jsx)(_e,{value:V,onChange:K,format:le,includeSeconds:R,step:I,disabled:T.disabled,labels:{hours:y.hours,minutes:y.minutes,seconds:R?y.seconds:void 0},periodLabels:{am:y.am,pm:y.pm}})]})]})]}),!!T.footer&&(0,C.jsx)(ae,{config:T.footer,output:G(z),hasSelection:!!z,autoSummary:ge})]})]}),!!k&&(0,C.jsx)(c,{id:D,size:`xs`,type:`error`,content:N})]})}function Z({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:i=`PPP`,placeholder:o,min:s,max:l,required:u,disabledDates:p,calendarProps:m,open:h,setOpen:g,t:_,dateFnsLocale:y,captionLayout:x,yearBounds:ie,...w}){let T=S.useId(),E=`${T}-description`,D=w.error!==void 0&&w.error!==null&&w.error!==``,O=D?E:void 0,k=w.hint!==void 0&&w.hint!==null&&w.hint!==``,se=typeof w.error==`string`?w.error:``,A=typeof w.hint==`string`?w.hint:``,[j,M]=S.useState(e??t??[]);S.useEffect(()=>{e!==void 0&&M(e)},[e]);let N=S.useCallback(e=>le(e,r,i,y),[r,i,y]),ce=S.useCallback(e=>{let t=Array.isArray(e)?e:e?[e]:[];l&&t.length>l||(M(t),n?.(N(t)))},[n,N,l]),P=S.useMemo(()=>V(j,i,o,_.selectDates,_,y),[j,i,o,_,y]),F=S.useMemo(()=>B(j,s,l,u,_),[j,s,l,u,_]),I=S.useMemo(()=>j.length>0?_.datesSelected(j.length):void 0,[j.length,_]);return(0,C.jsxs)(`div`,{className:d(`space-y-2`,w.className),children:[!!(w.label||k)&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!w.label&&(0,C.jsx)(v,{htmlFor:T,className:d(`leading-6`,D&&`text-destructive`),children:w.label}),!D&&!!k&&(0,C.jsx)(c,{tag:`span`,type:`secondary`,children:A})]}),(0,C.jsxs)(te,{open:h,onOpenChange:g,children:[(0,C.jsx)(b,{render:e=>{let t=ye(w.buttonVariant);return(0,C.jsxs)(f,{...e,id:T,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":D,"aria-describedby":O,className:d(`w-full justify-start text-left font-normal`,be,j.length===0&&`text-muted-foreground`,w.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:w.disabled,children:[(0,C.jsx)(ee,{className:`mr-2 h-4 w-4`}),(0,C.jsx)(`span`,{className:`truncate`,children:P})]})}}),(0,C.jsxs)(ne,{className:`w-auto p-0`,align:`start`,children:[!!w.header&&(0,C.jsx)(oe,{config:w.header}),(0,C.jsx)(a,{mode:`multiple`,selected:j,onSelect:ce,defaultMonth:j[0],numberOfMonths:w.numberOfMonths,showOutsideDays:w.showOutsideDays,disabled:p??w.disabled,locale:y,captionLayout:x,startMonth:ie.startMonth,endMonth:ie.endMonth,required:u,max:l,...m}),!!F&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(re,{}),(0,C.jsx)(`div`,{className:`p-3`,children:(0,C.jsx)(c,{type:`secondary`,children:F})})]}),!!w.footer&&(0,C.jsx)(ae,{config:w.footer,output:N(j),hasSelection:j.length>0,autoSummary:I})]})]}),!!D&&(0,C.jsx)(c,{id:E,size:`xs`,type:`error`,content:se})]})}function Ee({value:e,defaultValue:t,onChange:n,format:r=`yyyy-MM-dd`,readableFormat:i=`PPP`,placeholder:o,withConfirm:u=!1,min:m,max:h,closeOnSelect:g=!0,withTime:_,presets:y,disabledDates:x,calendarProps:ie,open:w,setOpen:T,t:E,dateFnsLocale:D,captionLayout:k,yearBounds:se,...M}){let{weekStartsOn:N=1}=l(),P=y??Ce(E,N),F=S.useId(),le=`${F}-description`,L=M.error!==void 0&&M.error!==null&&M.error!==``,ue=L?le:void 0,B=M.hint!==void 0&&M.hint!==null&&M.hint!==``,fe=typeof M.error==`string`?M.error:``,V=typeof M.hint==`string`?M.hint:``,H=_?.format??`24`,U=_?.step??60,W=_?.showSeconds??!1,G=ce(i),me=_?.showTimeInButton??!G,K=_?.showTimeInSummary??!G,he=e??t,[q,ge]=S.useState(he),[J,Y]=S.useState(()=>O(he?.from,W,U)),[ve,xe]=S.useState(()=>O(he?.to,W,U)),Se=S.useRef(e),X=S.useMemo(()=>z(q,m,h,E),[q,m,h,E]),we=X!=null&&X!==``,Te=typeof X==`string`?X:``;S.useEffect(()=>{e!==void 0&&ge(e)},[e]),S.useEffect(()=>{if(!_?.enabled){Se.current=e;return}let t=Se.current,n=e?.from,r=e?.to;n?Y(O(n,W,U)):t?.from&&Y(O(void 0,W,U)),r?xe(O(r,W,U)):t?.to&&xe(O(void 0,W,U)),Se.current=e},[e,_?.enabled,W,U]),S.useEffect(()=>{_?.enabled&&(Y(e=>{let t=A(e,U,W);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t}),xe(e=>{let t=A(e,U,W);return e.hours===t.hours&&e.minutes===t.minutes&&e.seconds===t.seconds?e:t}))},[_?.enabled,U,W]);let Z=S.useCallback(e=>{let t=e;return e&&_?.enabled&&(t=R(e,J,ve)),I(t,r,i,D)},[r,i,D,_,J,ve]),Ee=S.useCallback(e=>{Y(e)},[]),De=S.useCallback(e=>{xe(e)},[]),Oe=S.useCallback(e=>{let t=de(e,m,h);e&&!t.isValid||(ge(e),!u&&!_?.enabled&&(n?.(Z(e)),g&&e?.from&&e?.to&&T(!1)))},[u,_,n,Z,m,h,g,T]),ke=S.useCallback(e=>{Oe(e.getValue())},[Oe]),Ae=S.useCallback(()=>{n?.(Z(q)),T(!1)},[q,n,Z,T]),Q=S.useMemo(()=>{if(_?.enabled)return j(J,W,H,{am:E.am,pm:E.pm})},[_?.enabled,J,W,H,E]),$=S.useMemo(()=>{if(_?.enabled)return j(ve,W,H,{am:E.am,pm:E.pm})},[_?.enabled,ve,W,H,E]),je=S.useMemo(()=>{if(_?.enabled&&q?.from){let e=s(q.from,i,{locale:D}),t=me&&Q?`${e} ${Q}`:e;if(q.to){let e=s(q.to,i,{locale:D});return`${t} - ${me&&$?`${e} ${$}`:e}`}return t}return pe(q,i,o,E.selectDateRange,D)},[_?.enabled,q,i,me,Q,$,o,E,D]),Me=S.useMemo(()=>{if(!q?.from||!q?.to)return;let e=s(q.from,i,{locale:D}),t=s(q.to,i,{locale:D});return`${K&&Q?`${e} ${Q}`:e} - ${K&&$?`${t} ${$}`:t}`},[q,i,D,K,Q,$]);return(0,C.jsxs)(`div`,{className:d(`space-y-2`,M.className),children:[!!(M.label||B)&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between gap-1`,children:[!!M.label&&(0,C.jsx)(v,{htmlFor:F,className:d(`leading-6`,L&&`text-destructive`),children:M.label}),!L&&!!B&&(0,C.jsx)(c,{tag:`span`,type:`secondary`,children:V})]}),(0,C.jsxs)(te,{open:w,onOpenChange:T,children:[(0,C.jsx)(b,{render:e=>{let t=ye(M.buttonVariant);return(0,C.jsxs)(f,{...e,id:F,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":L,"aria-describedby":ue,className:d(`w-full justify-start text-left font-normal`,be,!q&&`text-muted-foreground`,M.error&&`border-destructive focus-visible:ring-destructive`,e.className),disabled:M.disabled,children:[(0,C.jsx)(ee,{className:`mr-2 h-4 w-4 shrink-0`}),(0,C.jsx)(`span`,{className:`truncate`,children:je})]})}}),(0,C.jsxs)(ne,{className:`w-auto p-0`,align:`start`,children:[!!M.header&&(0,C.jsx)(oe,{config:M.header}),(0,C.jsxs)(`div`,{className:`flex`,children:[P.length>0&&(0,C.jsx)(`div`,{className:`flex flex-col gap-0.5 border-r p-2 min-w-[7.5rem]`,children:P.map(e=>(0,C.jsx)(f,{variant:`secondary`,buttonStyle:`ghost`,onClick:()=>ke(e),className:`justify-start font-normal text-muted-foreground hover:text-foreground`,children:e.label},e.label))}),(0,C.jsxs)(`div`,{className:`flex flex-col`,children:[(0,C.jsx)(a,{mode:`range`,selected:q,onSelect:Oe,defaultMonth:q?.from,numberOfMonths:M.numberOfMonths??2,showOutsideDays:M.showOutsideDays,disabled:x??M.disabled,locale:D,captionLayout:k,startMonth:se.startMonth,endMonth:se.endMonth,...ie}),!!(q?.from||X||u||_?.enabled||M.footer)&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(re,{}),(0,C.jsxs)(`div`,{className:`flex flex-col gap-3 p-3`,children:[!!q?.from&&!M.footer&&(0,C.jsxs)(`div`,{className:`flex items-center justify-between gap-4 text-sm`,children:[(0,C.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,C.jsxs)(c,{tag:`span`,type:`secondary`,children:[E.from,`:`]}),(0,C.jsxs)(c,{tag:`span`,weight:`medium`,children:[s(q.from,i,{locale:D}),K&&Q?` ${Q}`:``]})]}),!!q.to&&(0,C.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,C.jsxs)(c,{tag:`span`,type:`secondary`,children:[E.to,`:`]}),(0,C.jsxs)(c,{tag:`span`,weight:`medium`,children:[s(q.to,i,{locale:D}),K&&$?` ${$}`:``]})]})]}),!!_?.enabled&&!!q?.from&&(0,C.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 sm:grid-cols-2`,children:[(0,C.jsxs)(`div`,{children:[(0,C.jsx)(v,{size:`xs`,children:E.startTime}),(0,C.jsxs)(`div`,{className:`mt-1 flex items-center gap-2`,children:[(0,C.jsx)(p,{className:`h-3 w-3 text-muted-foreground`}),(0,C.jsx)(_e,{value:J,onChange:Ee,format:H,includeSeconds:W,step:U,disabled:M.disabled,labels:{hours:E.hours,minutes:E.minutes,seconds:W?E.seconds:void 0},periodLabels:{am:E.am,pm:E.pm}})]})]}),!!q.to&&(0,C.jsxs)(`div`,{children:[(0,C.jsx)(v,{size:`xs`,children:E.endTime}),(0,C.jsxs)(`div`,{className:`mt-1 flex items-center gap-2`,children:[(0,C.jsx)(p,{className:`h-3 w-3 text-muted-foreground`}),(0,C.jsx)(_e,{value:ve,onChange:De,format:H,includeSeconds:W,step:U,disabled:M.disabled,labels:{hours:E.hours,minutes:E.minutes,seconds:W?E.seconds:void 0},periodLabels:{am:E.am,pm:E.pm}})]})]})]}),(0,C.jsx)(c,{type:`error`,content:Te,hidden:!we}),!!(u||_?.enabled)&&!M.footer&&(0,C.jsx)(f,{onClick:Ae,disabled:!q?.from||!q?.to||!!X,className:`w-full`,children:E.confirm}),!!M.footer&&(0,C.jsx)(`div`,{className:`-mx-3 -mb-3`,children:(0,C.jsx)(ae,{config:M.footer,output:Z(q),hasSelection:!!(q?.from&&q?.to),autoSummary:Me})})]})]})]})]})]})]}),!!L&&(0,C.jsx)(c,{id:le,size:`xs`,type:`error`,content:fe})]})}we.displayName=`DatePicker`;export{oe as a,P as i,be as n,ae as o,H as r,we as t};

package/dist/showcase/assets/date-pickers-DumwUEXE.js

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

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

@@ -0,0 +1,106 @@
+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,t as s}from"./example-C6-_Sy6B.js";import{t as c}from"./calendar-oKaDsUIy.js";import{t as l}from"./chart-column-6Tn3WAT9.js";import{t as u}from"./folder-open-zMXBpVNs.js";import{a as d}from"./index-B8DVXCmf.js";import{t as f}from"./props-table-CM_1cocj.js";import{t as p}from"./smart-card-7szg_qSt.js";import{t as m}from"./separator-DUKleOvU.js";import{t as h}from"./inline-stat-D0sE-A4C.js";import{c as g,l as _,n as v,o as y,r as b,t as x,u as S}from"./item-CMRbW6s-.js";var C=d();function w({value:e,max:n=5,label:i}){return(0,C.jsxs)(`div`,{className:r(`helpers--component`,`flex items-center gap-1`),children:[Array.from({length:n},(t,n)=>(0,C.jsx)(`div`,{className:r(`h-1.5 w-3 rounded-full`,n<e?`bg-foreground/60`:`bg-muted`)},n)),!!i&&(0,C.jsx)(t,{size:`xs`,type:`secondary`,className:`ml-1`,children:i})]})}function T({label:e,value:n,badge:r,badgeVariant:a}){return(0,C.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,C.jsx)(t,{size:`xs`,className:`shrink-0 text-muted-foreground`,children:e}),!!r&&(0,C.jsx)(i,{variant:a??`secondary`,children:r}),!!n&&!r&&(0,C.jsx)(t,{weight:`semibold`,className:`text-right tabular-nums`,children:n})]})}function E({title:e,description:n,statusBadges:r,rows:a,secondaryRows:o,scale:s,footerBadges:c,footerText:l,actions:u,className:d}){return(0,C.jsx)(p,{title:e,description:n,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)(t,{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)(t,{size:`xs`,className:`text-muted-foreground`,children:l})]})]})})}E.displayName=`DenseInfoDashboard`;function D({title:e,description:a,stats:o,items:s,totalLabel:c,totalValue:l,footerBadges:u,footerText:d,actions:f,className:_}){return(0,C.jsx)(p,{title:e,description:a,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:o.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)(n,{tag:`h4`,className:`border-none pb-0 text-base font-semibold tabular-nums`,children:e.value}),(0,C.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`mt-0.5`,children:e.label}),!!e.trendBadge&&(0,C.jsx)(`div`,{className:`mt-1 flex justify-center`,children:(0,C.jsx)(i,{variant:e.trendVariant??`secondary`,children:e.trendBadge})})]},e.label))}),(0,C.jsx)(m,{}),(0,C.jsx)(y,{children:s.map(e=>(0,C.jsxs)(x,{size:`xs`,className:`px-0`,children:[(0,C.jsx)(g,{children:(0,C.jsx)(`span`,{className:r(`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)(t,{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)(t,{size:`xs`,className:`text-muted-foreground`,children:d})]})]})})}D.displayName=`DenseInfoClassification`;function O({title:e,description:n,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:n,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,n)=>(0,C.jsxs)(`div`,{children:[n>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)(t,{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-semibold`,valueClassName:`text-sm font-semibold`}),(!!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)(t,{size:`xs`,className:`text-muted-foreground`,children:l})]})]})})}O.displayName=`DenseInfoFinancial`;function k({title:e,description:r,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)(n,{tag:`h5`,className:`font-bold border-none pb-0`,children:e}),!!r&&(0,C.jsx)(t,{type:`secondary`,className:`line-clamp-2`,children:r}),!!s&&s.length>0&&(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:s.map((e,n)=>(0,C.jsxs)(`span`,{className:`flex items-center gap-1`,children:[n>0&&(0,C.jsx)(t,{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)(t,{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)(t,{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)(t,{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)(t,{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:a,score:o,scoreLevel:s,scoreFilled:c,scoreTotal:l=10,rows:u,footerBadges:d,actions:f,className:g}){let _=s===`good`?`bg-success`:s===`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:a.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)(n,{tag:`h2`,className:`text-4xl font-bold tabular-nums border-none pb-0`,children:String(o)})}),(0,C.jsx)(`div`,{className:`flex items-center justify-center gap-1`,children:Array.from({length:l},(e,t)=>(0,C.jsx)(`div`,{className:r(`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 t={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)(a,{title:`Composed · Dense info cards`,description:`Five layout variants — dashboard, classification, financial, project, score.`,layer:`composed`,status:`ready`,children:[(0,C.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,C.jsx)(s,{name:`Dashboard`,source:L,children:(0,C.jsx)(M,{})}),(0,C.jsx)(s,{name:`ScoreCard`,source:L,children:(0,C.jsx)(N,{})}),(0,C.jsx)(s,{name:`Classification`,source:L,children:(0,C.jsx)(P,{})}),(0,C.jsx)(s,{name:`Financial`,source:L,children:(0,C.jsx)(F,{})}),(0,C.jsx)(s,{name:`ProjectCards`,source:L,children:(0,C.jsx)(I,{})})]}),(0,C.jsxs)(o,{title:`API`,id:`api`,children:[(0,C.jsx)(t.h4,{children:`DenseInfoDashboard`}),(0,C.jsx)(f,{component:`DenseInfoDashboard`}),(0,C.jsx)(t.h4,{children:`DenseInfoClassification`}),(0,C.jsx)(f,{component:`DenseInfoClassification`}),(0,C.jsx)(t.h4,{children:`DenseInfoFinancial`}),(0,C.jsx)(f,{component:`DenseInfoFinancial`}),(0,C.jsx)(t.h4,{children:`DenseInfoProjectCard`}),(0,C.jsx)(f,{component:`DenseInfoProjectCard`}),(0,C.jsx)(t.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-BYHZvlL8.js

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{n as e}from"./react-dom-Bz4cALsF.js";import{Tr as t,Un as n,l as r}from"./example-C6-_Sy6B.js";import{t as i}from"./x-CE8oevyh.js";import{a}from"./index-B8DVXCmf.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-DWvMs7dp.js";e();var m=a();function h({...e}){return(0,m.jsx)(d,{"data-slot":`dialog`,modal:`trap-focus`,...e})}function g({asChild:e=!1,...t}){let n=e?(0,m.jsx)(r,{}):void 0;return(0,m.jsx)(p,{"data-slot":`dialog-trigger`,render:n,...t})}function _({...e}){return(0,m.jsx)(c,{"data-slot":`dialog-portal`,...e})}function v({className:e,...n}){return(0,m.jsx)(s,{"data-slot":`dialog-overlay`,className:t(`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),...n})}function y({className:e,children:r,showCloseButton:a=!0,...s}){return(0,m.jsxs)(_,{children:[(0,m.jsx)(v,{}),(0,m.jsxs)(o,{"data-slot":`dialog-content`,className:t(`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`,e),...s,children:[r,!!a&&(0,m.jsxs)(f,{"data-slot":`dialog-close`,render:(0,m.jsx)(n,{variant:`ghost`,className:`absolute top-4 right-4`,size:`icon-sm`}),children:[(0,m.jsx)(i,{}),(0,m.jsx)(`span`,{className:`sr-only`,children:`Close`})]})]})]})}function b({className:e,...n}){return(0,m.jsx)(`div`,{"data-slot":`dialog-header`,className:t(`gap-2 flex flex-col`,e),...n})}function x({className:e,showCloseButton:r=!1,children:i,...a}){return(0,m.jsxs)(`div`,{"data-slot":`dialog-footer`,className:t(`gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...a,children:[i,!!r&&(0,m.jsx)(f,{render:(0,m.jsx)(n,{variant:`outline`}),children:`Close`})]})}function S({className:e,asChild:n=!1,...i}){let a=n?(0,m.jsx)(r,{}):void 0;return(0,m.jsx)(l,{"data-slot":`dialog-title`,render:a,className:t(`leading-none font-medium`,e),...i})}function C({className:e,asChild:n=!1,...i}){let a=n?(0,m.jsx)(r,{}):void 0;return(0,m.jsx)(u,{"data-slot":`dialog-description`,render:a,className:t(`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};