admin-ui-starter-kit 0.1.3 → 0.4.2

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

@@ -0,0 +1,149 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,Wr as n,hr as r,mr as i,t as a}from"./example-BIrQab7K.js";import{t as o}from"./arrow-right-Bf1Tl6D5.js";import{n as s,o as c,s as l}from"./index-Cz4UGUT2.js";import{t as u}from"./props-table-BR-KjRNe.js";import{t as d}from"./orders-BFwWtubb.js";import{n as f,t as p}from"./money-display-23DKz-jK.js";var m=l(),h=(0,m.jsx)(o,{className:`size-3 shrink-0 opacity-60`,"aria-hidden":`true`});function g({pair:e,emptyLabel:r=`—`,separator:i=h,className:a,size:o,tag:c=`span`,...l}){let{defaultTextSize:u}=n(),d=o??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:s(`currency-pair-preview--component`,`tabular-nums`,a),...l,children:r}):(0,m.jsxs)(t,{tag:c,size:d,className:s(`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)(c,{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)(r,{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/dark-surfaces-Cj34O9A0.js

@@ -0,0 +1,90 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,Tr as i,hr as a,jr as o,mr as s,r as c,t as l}from"./example-BIrQab7K.js";import{t as u}from"./chevron-down-CSn8HCwf.js";import{t as d}from"./chevron-right-d-umkBru.js";import{t as f}from"./chevron-up-CeFY6O0I.js";import{t as p}from"./circle-question-mark-Dbi-WTYN.js";import{t as m}from"./credit-card-CYgRtM77.js";import{t as h}from"./send-BzGRF4t-.js";import{k as g,n as _,s as v}from"./index-Cz4UGUT2.js";import{t as y}from"./props-table-BR-KjRNe.js";import{t as b}from"./icon-badge-CxvxB8Vd.js";import{t as x}from"./separator-BjGdXNcn.js";import{t as S}from"./inline-stat-DqI70yoJ.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-CbiuwbAN.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:a,className:s,strings:l}){let m=g(M,l),[h,v]=(0,I.useState)(!0);return(0,L.jsxs)(`div`,{className:_(`dark-payment--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 flex-col items-center text-center`,children:[(0,L.jsx)(b,{icon:o,tone:`success`,size:`lg`,className:`size-14 [&>svg]:size-7`}),(0,L.jsx)(i,{tag:`h5`,className:`mt-3 !border-0 !pb-0`,children:m.successTitle}),(0,L.jsx)(r,{size:`xs`,type:`secondary`,children:m.successDescription}),(0,L.jsx)(i,{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)(c,{variant:`light`,buttonStyle:`ghost`,onClick:()=>v(!h),className:`flex w-full items-center justify-between border-0 p-0 h-auto text-muted-foreground hover:text-foreground`,children:[(0,L.jsx)(r,{weight:`medium`,children:m.detailsToggle}),h?(0,L.jsx)(f,{className:`size-4`}):(0,L.jsx)(u,{className:`size-4`})]}),!!h&&(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:_(`mt-4`,a&&`cursor-pointer`),onClick:a,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:n})}),(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:a,className:o,strings:s}){let c=g(j,s),l=t??c.statusConfirmed;return(0,L.jsxs)(`div`,{className:_(`booking-receipt--component`,`dark space-y-3 rounded-lg bg-card p-4 text-card-foreground shadow-sm ring-1 ring-border`,o),children:[(0,L.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,L.jsx)(i,{tag:`h6`,className:`!border-0 !pb-0`,children:c.title}),(0,L.jsxs)(r,{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`}),l]})]}),n.length>0&&(0,L.jsx)(`div`,{className:`space-y-1.5 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)(r,{tag:`div`,size:`xs`,type:`secondary`,align:`center`,className:`rounded-md bg-muted px-3 py-2 font-mono tracking-wider`,children:e}),(0,L.jsx)(S,{className:`border-t border-border pt-3`,label:c.amountPaidLabel,value:(0,L.jsx)(i,{tag:`h4`,className:`border-none pb-0 text-lg`,children:a}),labelClassName:`text-sm`})]})}z.displayName=`BookingReceiptDark`;function B({title:e,items:t,totalLabel:n,totalValue:a,defaultOpen:o=!0,className:s,strings:l}){let d=g(N,l),p=e??d.defaultTitle,[m,h]=(0,I.useState)(o);return(0,L.jsxs)(`div`,{className:_(`dark-info-panel--component`,`dark rounded-lg bg-card p-4 text-card-foreground shadow-sm ring-1 ring-border`,s),children:[(0,L.jsxs)(c,{variant:`light`,buttonStyle:`ghost`,onClick:()=>h(!m),className:`flex w-full items-center justify-between border-0 p-0 h-auto`,children:[(0,L.jsx)(i,{tag:`h6`,className:`!border-0 !pb-0`,children:p}),m?(0,L.jsx)(f,{className:`size-4 text-muted-foreground`}):(0,L.jsx)(u,{className:`size-4 text-muted-foreground`})]}),!!m&&(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)(r,{type:`secondary`,className:`min-w-0`,children:e.label}),(0,L.jsx)(r,{weight:`medium`,className:_(`shrink-0 text-right`,e.highlight&&`text-success`),children:e.value})]},e.label)),!!n&&!!a&&(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)(r,{weight:`semibold`,type:`secondary`,className:`min-w-0`,children:n}),(0,L.jsx)(r,{weight:`semibold`,className:`shrink-0 text-right`,children:a})]})})]})]})}B.displayName=`DarkInfoPanel`;var V={neutral:`bg-muted-foreground`,primary:`bg-primary`,info:`bg-info`,success:`bg-success`,warning:`bg-warning`,destructive:`bg-destructive`};function H({items:e,summary:t=[],total:n,className:a,strings:o}){let s=g(P,o);return(0,L.jsxs)(`div`,{className:_(`order-items--component`,`dark rounded-lg bg-card p-4 text-card-foreground shadow-sm ring-1 ring-border`,a),children:[(0,L.jsx)(i,{tag:`h6`,className:`!border-0 !pb-0`,children:s.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)(r,{size:`xs`,type:`secondary`,children:e.vendor}),!!e.badge&&(0,L.jsx)(r,{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:[(0,L.jsx)(`span`,{className:_(`size-2.5 rounded-full`,V[e.tone??`neutral`])}),`x`,e.qty]})})]}),(0,L.jsx)(T,{children:(0,L.jsx)(r,{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:s.totalLabel,value:n,labelClassName:`text-sm font-semibold`,valueClassName:`text-sm font-semibold`})]})]})}H.displayName=`OrderItemsCard`;function U({amount:e,amountColor:t=`text-warning`,dueDate:n,customer:a,onSendReminder:o,onRecordPayment:s,className:l,strings:u}){let d=g(F,u);return(0,L.jsxs)(`div`,{className:_(`outstanding-balance--component`,`dark rounded-lg bg-card p-5 text-card-foreground shadow-sm ring-1 ring-border`,l),children:[(0,L.jsx)(r,{size:`xs`,weight:`medium`,type:`secondary`,className:`uppercase tracking-wider`,children:d.title}),(0,L.jsx)(i,{tag:`h3`,className:_(`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:d.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)(r,{tag:`span`,weight:`medium`,children:n})]}),labelClassName:`text-xs`}),(0,L.jsx)(S,{label:d.customerLabel,value:a,labelClassName:`text-xs`,valueClassName:`text-sm font-medium`})]}),(0,L.jsxs)(`div`,{className:`mt-4 flex gap-2`,children:[(0,L.jsxs)(c,{variant:`warning`,className:`flex-1 rounded-md`,onClick:o,children:[(0,L.jsx)(h,{className:`mr-1.5 size-3.5`}),d.sendReminder]}),(0,L.jsxs)(c,{variant:`success`,className:`flex-1 rounded-md`,onClick:s,children:[(0,L.jsx)(m,{className:`mr-1.5 size-3.5`}),d.recordPayment]})]})]})}U.displayName=`OutstandingBalanceCard`;var W=e({BookingReceipt:()=>K,InfoPanel:()=>q,OrderItems:()=>J,OutstandingBalance:()=>Y,PaymentConfirmation:()=>G});function G(){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 K(){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 q(){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 J(){return(0,L.jsx)(L.Fragment,{children:(0,L.jsx)(H,{items:[{vendor:`Artisan Chocolates`,badge:`Express`,name:`Luxury Truffle Box`,qty:2,price:`48 USD`,tone:`warning`},{vendor:`BG Spa Retreat`,badge:`Standard`,name:`Couples Massage Voucher`,qty:1,price:`120 USD`,tone:`info`}],summary:[{label:`Subtotal`,value:`216 USD`},{label:`Shipping`,value:`5.99 USD`}],total:`265.19 USD`})})}function Y(){return(0,L.jsx)(L.Fragment,{children:(0,L.jsx)(U,{amount:`4,920 USD`,dueDate:`Apr 15, 2026`,customer:`David Williams`,onSendReminder:()=>{},onRecordPayment:()=>{}})})}var X=`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', tone: 'warning' },
+									{ vendor: 'BG Spa Retreat', badge: 'Standard', name: 'Couples Massage Voucher', qty: 1, price: '120 USD', tone: 'info' },
+								]}
+								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 Z(e){let t={h4:`h4`,...e.components};return W||$(`Examples`,!1),K||$(`Examples.BookingReceipt`,!0),q||$(`Examples.InfoPanel`,!0),J||$(`Examples.OrderItems`,!0),Y||$(`Examples.OutstandingBalance`,!0),G||$(`Examples.PaymentConfirmation`,!0),(0,L.jsxs)(a,{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)(l,{name:`PaymentConfirmation`,source:X,children:(0,L.jsx)(G,{})}),(0,L.jsx)(l,{name:`BookingReceipt`,source:X,children:(0,L.jsx)(K,{})}),(0,L.jsx)(l,{name:`InfoPanel`,source:X,children:(0,L.jsx)(q,{})}),(0,L.jsx)(l,{name:`OrderItems`,source:X,children:(0,L.jsx)(J,{})}),(0,L.jsx)(l,{name:`OutstandingBalance`,source:X,children:(0,L.jsx)(Y,{})})]}),(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 Q(e={}){let{wrapper:t}=e.components||{};return t?(0,L.jsx)(t,{...e,children:(0,L.jsx)(Z,{...e})}):Z(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Q as default};

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

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

@@ -0,0 +1 @@
+import{t as e}from"./format-bDaUGCSP.js";import{Er as t}from"./example-BIrQab7K.js";import{k as n,n as r,s as i}from"./index-Cz4UGUT2.js";var a=i(),o={separator:`·`},s={default:{bg:`bg-card`,text:`text-foreground`,border:`border-border`,accent:`text-foreground`,subtle:`text-muted-foreground`},inverse:{bg:`bg-primary`,text:`text-background`,border:`border-primary`,accent:`text-background/80`,subtle:`text-background/65`},muted:{bg:`bg-muted/50`,text:`text-foreground`,border:`border-border`,accent:`text-foreground`,subtle:`text-muted-foreground`},primary:{bg:`bg-primary/10`,text:`text-foreground`,border:`border-primary/30`,accent:`text-primary`,subtle:`text-muted-foreground`},success:{bg:`bg-success/10`,text:`text-foreground`,border:`border-success/30`,accent:`text-success`,subtle:`text-muted-foreground`},warning:{bg:`bg-warning/15`,text:`text-foreground`,border:`border-warning/40`,accent:`text-warning-foreground`,subtle:`text-muted-foreground`},destructive:{bg:`bg-destructive/10`,text:`text-foreground`,border:`border-destructive/30`,accent:`text-destructive`,subtle:`text-muted-foreground`},info:{bg:`bg-info/10`,text:`text-foreground`,border:`border-info/30`,accent:`text-info`,subtle:`text-muted-foreground`}};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=n(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:r(`date-block--component`,`inline-flex items-center gap-1.5 tabular-nums`,k&&r(`rounded-md border px-2 py-1`,C.bg,C.border),y),children:[(0,a.jsx)(t,{size:`xs`,weight:`semibold`,className:r(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:r(`inline-flex flex-col items-center gap-0.5`,y),children:[(0,a.jsxs)(`div`,{className:r(`flex flex-col items-center justify-center gap-1 tabular-nums`,k&&r(`w-14 min-h-14 rounded-md border px-1.5 py-1.5`,C.bg,C.border)),children:[(0,a.jsx)(t,{size:`xxs`,weight:`semibold`,style:{lineHeight:1},className:r(C.accent,`uppercase tracking-wider`),children:T}),(0,a.jsx)(t,{size:`lg`,weight:`bold`,style:{lineHeight:1},className:C.text,children:E}),!!h&&(0,a.jsx)(t,{size:`xxs`,style:{lineHeight:1},className:r(C.subtle,`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-CbYq8wZ7.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-DVNkwpSk.js";import{i as r,r as i,t as a}from"./calendar-BiOGjB7a.js";import{m as o,t as s}from"./format-bDaUGCSP.js";import{Er as c,Fr as l,Tr as u,r as d}from"./example-BIrQab7K.js";import{t as ee}from"./calendar-DTgagmt7.js";import{t as f}from"./clock-DuBsP5t3.js";import{h as p,k as m,n as h,s as g,u as _}from"./index-Cz4UGUT2.js";import{t as v}from"./label-BlCKlLE-.js";import{t as y}from"./input-BPDdWrB1.js";import{i as b,t as te}from"./popover-BSB11Qjp.js";import{t as ne}from"./popover-CECpX3MQ.js";import{t as re}from"./separator-BjGdXNcn.js";import{n as x,t as ie}from"./toggle-group-BVyFo04r.js";var S=e(t(),1),C=g();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 f=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:h(`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=f(e.variant??null);return(0,C.jsx)(d,{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:h(`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:h(`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]),[d,ee]=S.useState(()=>Y(k(e,n,r),n)),f=S.useRef(d),p=S.useRef(!1),m=S.useCallback(e=>{f.current=e,ee(e)},[]),g=S.useRef({hours:null,minutes:null,seconds:null});S.useEffect(()=>{if(p.current){p.current=!1;return}m(Y(k(e,n,r),n))},[e,n,r,m]);let _=S.useCallback(e=>{p.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),m(Y(k(a,n,r),n))},[n,r,t,i,m]),b=S.useCallback(e=>{if(!e)return;let t=g.current[e];t&&(t.focus(),t.select())},[]),te=S.useCallback((e,t)=>{let r=f.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};m(c),_(c)},[n,m,_]),ne=S.useCallback((e,t)=>{let r=me(t),i={...f.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=f.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=f.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};m(o),_(o)},[n,m,_]),re=S.useCallback(e=>{n===`12`&&v({...f.current,period:e})},[v,n]),ae=S.useCallback(()=>{v(f.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 d.period?[d.period]:void 0},[n,d.period]);return(0,C.jsxs)(`div`,{className:h(`segmented-time-input--component`,`flex items-center gap-2`,o),children:[u.map((e,t)=>{let r=e===`hours`&&n===`12`?G:W,i=d[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-radius !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:p(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??_,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:p,calendarProps:m,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:h(`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:h(`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)(d,{...e,id:E,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":k,"aria-describedby":se,className:h(`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:p??T.disabled,locale:x,captionLayout:ie,startMonth:w.startMonth,endMonth:w.endMonth,...m}),!!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)(f,{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:f,calendarProps:p,open:m,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:h(`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:h(`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:m,onOpenChange:g,children:[(0,C.jsx)(b,{render:e=>{let t=ye(w.buttonVariant);return(0,C.jsxs)(d,{...e,id:T,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":D,"aria-describedby":O,className:h(`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:f??w.disabled,locale:y,captionLayout:x,startMonth:ie.startMonth,endMonth:ie.endMonth,required:u,max:l,...p}),!!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:p,max:m,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,p,m,E),[q,p,m,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,p,m);e&&!t.isValid||(ge(e),!u&&!_?.enabled&&(n?.(Z(e)),g&&e?.from&&e?.to&&T(!1)))},[u,_,n,Z,p,m,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:h(`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:h(`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)(d,{...e,id:F,variant:t.variant,buttonStyle:t.buttonStyle,"aria-invalid":L,"aria-describedby":ue,className:h(`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)(d,{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)(f,{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)(f,{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)(d,{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-BaSX23MK.js

@@ -0,0 +1,73 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{t as r}from"./calendar-BiOGjB7a.js";import{t as i}from"./format-bDaUGCSP.js";import{Er as a,hr as o,mr as s,r as c,t as l}from"./example-BIrQab7K.js";import{t as ee}from"./calendar-DTgagmt7.js";import{k as u,n as d,s as f,u as p}from"./index-Cz4UGUT2.js";import{t as m}from"./props-table-BR-KjRNe.js";import{t as h}from"./label-BlCKlLE-.js";import{i as g,t as _}from"./popover-BSB11Qjp.js";import{t as v}from"./popover-CECpX3MQ.js";import{t as y}from"./separator-BjGdXNcn.js";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./date-picker-CbYq8wZ7.js";import{t as E}from"./month-year-picker-oEoInnKW.js";var D=t(n(),1),O=f();function k({value:e,defaultValue:t,onChange:n,format:o=`yyyy-MM-dd`,readableFormat:s=`PPP`,placeholder:l,label:f,hint:m,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=u(w,L??I),Y=D.useMemo(()=>V||H?.enabled?`dropdown`:`label`,[V,H]),X=D.useMemo(()=>x(H),[H]);D.useEffect(()=>{e!==void 0&&K(e)},[e]);let Z=D.useCallback(e=>{let t=q?{locale:q}:void 0;return{range:e,formatted:{from:e?.from?i(e.from,o,t):void 0,to:e?.to?i(e.to,o,t):void 0},readable:{from:e?.from?i(e.from,s,t):void 0,to:e?.to?i(e.to,s,t):void 0}}},[o,s,q]),Q=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||(n?.(Z(e)),P&&e?.from&&e?.to&&W(!1))},[A,n,Z,M,N,P]),te=D.useCallback(()=>{n?.(Z(G)),W(!1)},[G,n,Z]),ne=D.useMemo(()=>G?.from?G.to?`${i(G.from,s,{locale:q})} - ${i(G.to,s,{locale:q})}`:i(G.from,s,{locale:q}):l??J.selectDateRange,[G,s,q,l,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]),re=D.useMemo(()=>{if(!(!G?.from||!G?.to))return`${i(G.from,s,{locale:q})} - ${i(G.to,s,{locale:q})}`},[G,s,q]);return(0,O.jsxs)(`div`,{className:d(`date-range-picker--component`,`flex flex-col gap-2`,k),children:[!!f&&(0,O.jsx)(h,{htmlFor:`date-range-picker-trigger`,className:d(T&&`text-destructive`),children:f}),(0,O.jsxs)(_,{open:U,onOpenChange:W,children:[(0,O.jsx)(g,{render:e=>(0,O.jsxs)(c,{...e,id:`date-range-picker-trigger`,variant:`secondary`,buttonStyle:`outline`,"aria-invalid":!!T,className:d(`w-full justify-start text-left font-normal`,S,!G&&`text-muted-foreground`,e.className),disabled:E,children:[(0,O.jsx)(ee,{className:`mr-2 h-4 w-4 shrink-0`}),(0,O.jsx)(`span`,{className:`truncate`,children:ne})]})}),(0,O.jsxs)(v,{className:`w-auto p-0`,align:`start`,children:[!!z&&(0,O.jsx)(b,{config:z}),(0,O.jsxs)(`div`,{className:`flex flex-col`,children:[(0,O.jsx)(r,{mode:`range`,selected:G,onSelect:Q,defaultMonth:G?.from,numberOfMonths:j,disabled:E,locale:q,captionLayout:Y,startMonth:X.startMonth,endMonth:X.endMonth,...F}),!!(G?.from||$||A||B)&&(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(y,{}),(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:i(G.from,s,{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:i(G.to,s,{locale:q})})]})]}),!!$&&(0,O.jsx)(a,{type:`error`,children:$}),!!A&&!B&&(0,O.jsx)(c,{onClick:te,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)(C,{config:B,output:Z(G),hasSelection:!!(G?.from&&G?.to),autoSummary:re})})]})]})]})]})]}),!!T&&(0,O.jsx)(a,{type:`error`,children:T}),!!m&&!T&&(0,O.jsx)(a,{type:`secondary`,children:m})]})}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.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date)})}function M(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date)})}function N(){let[e,t]=(0,D.useState)();return(0,O.jsx)(T,{mode:`range`,value:e,onChange:e=>t(e.range)})}function P(){let[e,t]=(0,D.useState)([]);return(0,O.jsx)(T,{mode:`multiple`,value:e,onChange:e=>t(e.dates??[])})}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.jsx)(E,{value:e,onChange:e=>t({month:e.month,year:e.year})})}function R(){let[e,t]=(0,D.useState)();return(0,O.jsx)(k,{value:e,onChange:e=>t(e.range)})}function z(){let[e,t]=(0,D.useState)(void 0);return(0,O.jsx)(T,{mode:`single`,value:e,onChange:e=>t(e.date),withTime:{enabled:!0,format:`24`}})}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 <DatePicker mode="single" value={single} onChange={(o) => setSingle(o.date)} />;
+}
+
+export function ModeSingle() {
+	const [single, setSingle] = useState<Date | undefined>(undefined);
+	return <DatePicker mode="single" value={single} onChange={(o) => setSingle(o.date)} />;
+}
+
+export function ModeRange() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return <DatePicker mode="range" value={range} onChange={(o) => setRange(o.range)} />;
+}
+
+export function ModeMultiple() {
+	const [multi, setMulti] = useState<Date[]>([]);
+	return <DatePicker mode="multiple" value={multi} onChange={(o) => setMulti(o.dates ?? [])} />;
+}
+
+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 <MonthYearPicker value={my} onChange={(o) => setMy({ month: o.month, year: o.year })} />;
+}
+
+export function DateRangePickerLegacy() {
+	const [range, setRange] = useState<DateRange | undefined>();
+	return <DateRangePicker value={range} onChange={(o) => setRange(o.range)} />;
+}
+
+export function WithTimeInput() {
+	const [val, setVal] = useState<Date | undefined>(undefined);
+	return (
+		<DatePicker
+			mode="single"
+			value={val}
+			onChange={(o) => setVal(o.date)}
+			withTime={{ enabled: true, format: '24' }}
+		/>
+	);
+}
+
+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)(o,{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)(l,{name:`Default`,source:V,children:(0,O.jsx)(j,{})})}),(0,O.jsxs)(s,{title:`Modes`,id:`modes`,children:[(0,O.jsx)(l,{name:`ModeSingle`,source:V,children:(0,O.jsx)(M,{})}),(0,O.jsx)(l,{name:`ModeRange`,source:V,children:(0,O.jsx)(N,{})}),(0,O.jsx)(l,{name:`ModeMultiple`,source:V,children:(0,O.jsx)(P,{})})]}),(0,O.jsxs)(s,{title:`Composition`,id:`composition`,children:[(0,O.jsx)(l,{name:`WithYearDropdown`,source:V,children:(0,O.jsx)(F,{})}),(0,O.jsx)(l,{name:`ButtonStyles`,source:V,children:(0,O.jsx)(I,{})})]}),(0,O.jsx)(s,{title:`With time`,id:`with-time`,children:(0,O.jsx)(l,{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)(l,{name:`DateRangePickerLegacy`,source:V,children:(0,O.jsx)(R,{})})]}),(0,O.jsx)(s,{title:`MonthYearPicker`,id:`month-year`,children:(0,O.jsx)(l,{name:`MonthYearPickerExample`,source:V,children:(0,O.jsx)(L,{})})}),(0,O.jsx)(s,{title:`Realistic usage`,id:`realistic`,children:(0,O.jsx)(l,{name:`RealisticDateFilter`,source:V,children:(0,O.jsx)(B,{})})}),(0,O.jsxs)(s,{title:`API`,id:`api`,children:[(0,O.jsx)(m,{component:`DatePicker`}),(0,O.jsx)(m,{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-kY1QmtaP.js

@@ -0,0 +1,106 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,Tr as n,hr as r,mr as i,t as a,yr as o}from"./example-BIrQab7K.js";import{t as s}from"./calendar-DTgagmt7.js";import{t as c}from"./chart-column-DjAyOA-t.js";import{t as l}from"./folder-open-Dp0sceCi.js";import{n as u,s as d}from"./index-Cz4UGUT2.js";import{t as f}from"./props-table-BR-KjRNe.js";import{t as p}from"./smart-card-B4P_C0nk.js";import{t as m}from"./separator-BjGdXNcn.js";import{t as h}from"./inline-stat-DqI70yoJ.js";import{c as g,l as _,n as v,o as y,r as b,t as x,u as S}from"./item-CbiuwbAN.js";var C=d();function w({value:e,max:n=5,label:r}){return(0,C.jsxs)(`div`,{className:u(`helpers--component`,`flex items-center gap-1`),children:[Array.from({length:n},(t,n)=>(0,C.jsx)(`div`,{className:u(`h-1.5 w-3 rounded-full`,n<e?`bg-foreground/60`:`bg-muted`)},n)),!!r&&(0,C.jsx)(t,{size:`xs`,type:`secondary`,className:`ml-1`,children:r})]})}function T({label:e,value:n,badge:r,badgeVariant:i}){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)(o,{variant:i??`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:i,secondaryRows:a,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)(o,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(`div`,{className:`space-y-2`,children:i.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)}`})]}),!!a&&a.length>0&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(m,{}),(0,C.jsx)(`div`,{className:`space-y-2`,children:a.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)(o,{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:r,stats:i,items:a,totalLabel:s,totalValue:c,footerBadges:l,footerText:d,actions:f,className:_}){return(0,C.jsx)(p,{title:e,description:r,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:i.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)(o,{variant:e.trendVariant??`secondary`,children:e.trendBadge})})]},e.label))}),(0,C.jsx)(m,{}),(0,C.jsx)(y,{children:a.map(e=>(0,C.jsxs)(x,{size:`xs`,className:`px-0`,children:[(0,C.jsx)(g,{children:(0,C.jsx)(`span`,{className:u(`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)(o,{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))}),!!c&&(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(m,{}),(0,C.jsx)(h,{label:s??`Total`,value:c,mono:!0,labelClassName:`text-sm font-bold`,valueClassName:`text-sm font-bold`})]}),(!!l||!!d)&&(0,C.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 border-t pt-2`,children:[!!l&&l.map(e=>(0,C.jsx)(o,{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:i,totalLabel:a=`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)(o,{variant:e.variant,children:e.label},e.label))}),(0,C.jsx)(y,{children:i.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)(o,{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:a,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)(o,{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:i,statusVariant:a,metaPairs:u,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)(l,{className:`h-4 w-4 text-muted-foreground`}),(0,C.jsx)(o,{variant:a,dot:!0,children:i})]}),(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}),!!u&&u.length>0&&(0,C.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:u.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)(s,{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)(c,{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:r,score:i,scoreLevel:a,scoreFilled:s,scoreTotal:c=10,rows:l,footerBadges:d,actions:f,className:g}){let _=a===`good`?`bg-success`:a===`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:r.map(e=>(0,C.jsx)(o,{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(i)})}),(0,C.jsx)(`div`,{className:`flex items-center justify-center gap-1`,children:Array.from({length:c},(e,t)=>(0,C.jsx)(`div`,{className:u(`h-5 w-2 rounded-sm`,t<s?_:`bg-muted`)},t))}),(0,C.jsx)(m,{}),(0,C.jsx)(`div`,{className:`space-y-2`,children:l.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)(o,{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-success`,badge:`Top`,badgeVariant:`success`},{label:`Food & Drink`,value:`89`,dotColor:`bg-warning`},{label:`Adventure`,value:`67`,dotColor:`bg-info`}],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-success', badge: 'Top', badgeVariant: 'success' },
+									{ label: 'Food & Drink', value: '89', dotColor: 'bg-warning' },
+									{ label: 'Adventure', value: '67', dotColor: 'bg-info' },
+								]}
+								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)(r,{title:`Composed · Dense info cards`,description:`Five layout variants — dashboard, classification, financial, project, score.`,layer:`composed`,status:`ready`,children:[(0,C.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,C.jsx)(a,{name:`Dashboard`,source:L,children:(0,C.jsx)(M,{})}),(0,C.jsx)(a,{name:`ScoreCard`,source:L,children:(0,C.jsx)(N,{})}),(0,C.jsx)(a,{name:`Classification`,source:L,children:(0,C.jsx)(P,{})}),(0,C.jsx)(a,{name:`Financial`,source:L,children:(0,C.jsx)(F,{})}),(0,C.jsx)(a,{name:`ProjectCards`,source:L,children:(0,C.jsx)(I,{})})]}),(0,C.jsxs)(i,{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-B85US9Ue.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t,t as n}from"./react-dom-Bz4cALsF.js";import{Er as r,Or as i,r as a}from"./example-BIrQab7K.js";import{t as o}from"./circle-alert-ysbx8rsZ.js";import{t as s}from"./circle-check-big-4RnJfeaC.js";import{t as c}from"./circle-question-mark-Dbi-WTYN.js";import{t as l}from"./info-DFu8OfxV.js";import{t as u}from"./x-BqJnRkKw.js";import{k as d,n as f,s as p}from"./index-Cz4UGUT2.js";var m=e(t(),1),h=350,g=0;function _(){if(g===0){let e=window.innerWidth-document.documentElement.clientWidth;document.body.style.setProperty(`--overlay-scrollbar-width`,`${e}px`),document.documentElement.setAttribute(`data-overlay-scroll-locked`,``)}g+=1;let e=!1;return()=>{e||(e=!0,g=Math.max(0,g-1),!(g>0)&&(document.documentElement.removeAttribute(`data-overlay-scroll-locked`),document.body.style.removeProperty(`--overlay-scrollbar-width`)))}}function v({open:e,onOpenChange:t,onClose:n,closeOnEscape:r=!0,closeOnBackdropClick:i=!0,initialFocusRef:a}={}){let o=(0,m.useRef)(null),[s,c]=(0,m.useState)(!1),[l,u]=(0,m.useState)(!1),d=(0,m.useRef)(null),f=(0,m.useRef)(null),p=(0,m.useRef)(null),g=(0,m.useRef)(null),v=(0,m.useRef)(null),y=(0,m.useRef)(!1),b=e!==void 0,x=b?e:s,S=(0,m.useRef)(x);S.current=x;let C=(0,m.useRef)(l);C.current=l;let w=(0,m.useCallback)(e=>{b||c(e),t?.(e),e||n?.()},[b,t,n]),T=(0,m.useCallback)(()=>{p.current&&=(clearTimeout(p.current),null),g.current&&=(g.current(),null)},[]),E=(0,m.useCallback)(()=>{T(),y.current=!0;let e=d.current;d.current=null;let t=f.current;f.current=null;try{e?.()}catch{}try{w(!1)}catch{}u(!1);let n=o.current;n&&n.classList.remove(`closing`);try{t?.focus()}catch{}},[T,w]),D=(0,m.useCallback)(()=>{S.current||C.current||(f.current=document.activeElement,d.current=_(),w(!0),v.current=requestAnimationFrame(()=>{v.current=null,a?.current?a.current.focus():o.current?.focus()}))},[w,a]),O=(0,m.useCallback)(()=>{let e=o.current;if(!(!e||!S.current||C.current))if(u(!0),e.classList.add(`closing`),e.offsetHeight,getComputedStyle(e).animationName!==`none`){let t=()=>{E()};e.addEventListener(`animationend`,t,{once:!0}),g.current=()=>{e.removeEventListener(`animationend`,t)},p.current=setTimeout(()=>{E()},h)}else E()},[E]),k=(0,m.useCallback)(()=>{x?O():D()},[x,D,O]),A=(0,m.useCallback)(e=>{e.key===`Escape`&&r&&(e.preventDefault(),e.stopPropagation(),O())},[r,O]),j=(0,m.useCallback)(()=>{i&&O()},[i,O]);return(0,m.useEffect)(()=>{if(x&&!l)f.current||=document.activeElement,d.current||=_(),v.current!==null&&cancelAnimationFrame(v.current),v.current=requestAnimationFrame(()=>{v.current=null,a?.current?a.current.focus():o.current?.focus()});else if(!x){if(y.current){y.current=!1;return}if(d.current&&=(d.current(),null),l){T(),u(!1);let e=o.current;e&&e.classList.remove(`closing`)}if(f.current){try{f.current.focus()}catch{}f.current=null}}return()=>{v.current!==null&&(cancelAnimationFrame(v.current),v.current=null)}},[x,l,a,T]),(0,m.useEffect)(()=>()=>{T(),v.current!==null&&(cancelAnimationFrame(v.current),v.current=null),d.current&&=(d.current(),null)},[T]),{dialogRef:o,isOpen:x,isClosing:l,openDialog:D,closeDialog:O,toggleDialog:k,dialogProps:{ref:o,open:x,onKeyDown:A},handleBackdropClick:j}}var y={confirm:`Confirm`,cancel:`Cancel`,close:`Close`,loading:`Loading...`},b={confirm:`Continue`,cancel:`Cancel`,close:`Close`,loading:`Loading...`};function x({closeDialog:e,onConfirm:t,onAsyncConfirm:n,closeOnAsyncComplete:r=!0,confirmVariant:i=`primary`,isLoading:a=!1,formId:o,onCancel:s,customStrings:c,emphasis:l=!1,tone:u=`default`,onError:f}){let p=d(y,c),[h,g]=(0,m.useState)(!1),_=(0,m.useCallback)(async()=>{if(t){t(),e();return}if(n){g(!0);try{await n(),r&&e()}catch(e){f?.(e)}finally{g(!1)}return}e()},[t,n,r,e,f]),v=(0,m.useCallback)(()=>{s?.(),e()},[s,e]),b=(0,m.useCallback)(async()=>{if(!o)return;let e=document.getElementById(o);e instanceof HTMLFormElement&&e.requestSubmit()},[o]);return{strings:p,isExecuting:h,handleConfirm:_,handleCancel:v,finalConfirmVariant:(0,m.useMemo)(()=>l?u===`error`?`error`:u===`warning`?`warning`:u===`success`?`success`:i??`primary`:i??`primary`,[l,u,i]),confirmButtonOnClick:o?b:_,effectiveLoading:h||a}}var S=e(n(),1),C=p(),w={xs:`max-w-xs`,sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`,xl:`max-w-xl`,"2xl":`max-w-2xl`,"3xl":`max-w-3xl`,"4xl":`max-w-4xl`,"5xl":`max-w-5xl`,full:`max-w-[calc(100vw-2rem)]`},T={default:{icon:(0,C.jsx)(c,{className:`text-muted-foreground h-5 w-5`}),classes:``},error:{icon:(0,C.jsx)(o,{className:`text-destructive h-5 w-5`}),classes:`border-destructive/50`},warning:{icon:(0,C.jsx)(i,{className:`text-warning h-5 w-5`}),classes:`border-warning/50`},info:{icon:(0,C.jsx)(l,{className:`text-info h-5 w-5`}),classes:`border-info/50`},success:{icon:(0,C.jsx)(s,{className:`text-success h-5 w-5`}),classes:`border-success/50`}};function E({open:e,onOpenChange:t,onClose:n,children:i,title:o,description:s,visuallyHideHeader:c=!1,className:l,contentClassName:d,initialFocusRef:p,closeOnEscape:h=!0,closeOnBackdropClick:g=!0,strings:_,showCancel:y=!0,showConfirm:b=!0,onCancel:E,onConfirm:D,onAsyncConfirm:O,closeOnAsyncComplete:k=!0,confirmVariant:A=`primary`,confirmStyle:j=`solid`,isLoading:M=!1,formId:N,footer:P,emphasis:F=!1,tone:I=`default`,showIcon:L=!1,alertMessage:R,size:z=`lg`,trigger:B}){let V=(0,m.useId)(),H=(0,m.useId)(),U=o?V:void 0,W=s?H:void 0,{isOpen:G,isClosing:K,openDialog:q,closeDialog:J,dialogProps:Y,handleBackdropClick:X}=v({open:e,onOpenChange:t,onClose:n,closeOnEscape:h,closeOnBackdropClick:g,initialFocusRef:p}),{strings:Z,finalConfirmVariant:Q,confirmButtonOnClick:ee,effectiveLoading:te,handleCancel:ne}=x({closeDialog:J,onConfirm:D,onAsyncConfirm:O,closeOnAsyncComplete:k,confirmVariant:A,isLoading:M,formId:N,onCancel:E,customStrings:_,emphasis:F,tone:I}),$=T[I],re=!!(i||R),ie=y||b||P,ae=B&&(0,m.isValidElement)(B)?(0,m.cloneElement)(B,{onClick:e=>{let t=B.props.onClick;t?.(e),q()}}):B?(0,C.jsx)(`span`,{role:`button`,tabIndex:0,onClick:q,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),q())},className:`cursor-pointer`,children:B}):null;return!G&&!K&&!B?null:(0,C.jsxs)(C.Fragment,{children:[ae,!!(G||K)&&(0,S.createPortal)((0,C.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center p-4`,children:[(0,C.jsx)(`div`,{className:f(`absolute inset-0 bg-foreground/50 backdrop-blur-[1px]`,`transition-opacity duration-200`,K?`opacity-0`:`animate-in fade-in-0 duration-200`),onClick:X,"aria-hidden":`true`}),(0,C.jsxs)(`dialog`,{...Y,className:f(`dialog--component relative z-10 m-0 p-0`,`rounded-lg border shadow-lg`,`bg-background text-foreground`,`max-h-[90vh] w-full`,`flex flex-col`,w[z],`animate-in fade-in-0 zoom-in-95 duration-200`,`[&.closing]:animate-out [&.closing]:fade-out-0 [&.closing]:zoom-out-95 [&.closing]:duration-150`,`outline-none focus-visible:outline-none`,F&&$.classes,l),"aria-modal":`true`,role:`dialog`,"aria-labelledby":U,"aria-describedby":W,children:[(0,C.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,onClick:J,className:f(`absolute right-3 top-3 z-10 size-7 rounded-md p-0`,`text-muted-foreground transition-colors`,`hover:bg-muted hover:text-foreground`,`disabled:pointer-events-none`),"aria-label":Z.close,children:(0,C.jsx)(u,{className:`h-4 w-4`})}),!!(o||s)&&(0,C.jsxs)(`div`,{className:f(`flex gap-3 px-6 pb-4 pt-6`,L&&`items-start`,c&&`sr-only`),children:[!!L&&(0,C.jsx)(`div`,{className:`shrink-0 pt-0.5`,children:$.icon}),(0,C.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[!!o&&(0,C.jsx)(r,{id:V,tag:`div`,size:`lg`,weight:`semibold`,className:`pr-6`,children:o}),!!s&&(0,C.jsx)(r,{id:H,tag:`p`,type:`secondary`,className:`mt-1`,children:s})]})]}),!!re&&(0,C.jsxs)(`div`,{className:f(`flex-1 overflow-auto px-6`,o||s?c?`py-6`:`pb-6`:`py-6`,d),children:[!!R&&(0,C.jsx)(`div`,{className:f(`mb-4 rounded-md border p-3`,I===`error`&&`border-destructive/30 bg-destructive/5`,I===`warning`&&`border-warning/40 bg-warning/10`,I===`info`&&`border-info/40 bg-info/10`,I===`success`&&`border-success/40 bg-success/10`,I==="default"&&`border-border bg-muted/40`),children:(0,C.jsx)(r,{tag:`p`,children:R})}),i]}),!!ie&&(0,C.jsx)(`div`,{className:`border-t px-6 py-4`,children:P??(0,C.jsxs)(`div`,{className:`flex flex-col-reverse gap-3 sm:flex-row sm:justify-end`,children:[!!y&&(0,C.jsx)(a,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:ne,children:Z.cancel}),!!b&&(0,C.jsx)(a,{type:`button`,variant:Q,buttonStyle:j,onClick:ee,loading:te,loadingLabels:{loading:Z.loading},children:Z.confirm})]})})]})]}),document.body)]})}var D=(0,m.memo)(E);D.displayName=`Dialog`;export{v as i,x as n,b as r,D as t};

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

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{n as e}from"./react-dom-Bz4cALsF.js";import{Un as t,l as n}from"./example-BIrQab7K.js";import{t as r}from"./x-BqJnRkKw.js";import{n as i,s as a}from"./index-Cz4UGUT2.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-C0DB0bXw.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 r=e?(0,m.jsx)(n,{}):void 0;return(0,m.jsx)(p,{"data-slot":`dialog-trigger`,render:r,...t})}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:i(`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:e,children:n,showCloseButton:a=!0,...s}){return(0,m.jsxs)(_,{children:[(0,m.jsx)(v,{}),(0,m.jsxs)(o,{"data-slot":`dialog-content`,className:i(`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:[n,!!a&&(0,m.jsxs)(f,{"data-slot":`dialog-close`,render:(0,m.jsx)(t,{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:i(`gap-2 flex flex-col`,e),...t})}function x({className:e,showCloseButton:n=!1,children:r,...a}){return(0,m.jsxs)(`div`,{"data-slot":`dialog-footer`,className:i(`gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...a,children:[r,!!n&&(0,m.jsx)(f,{render:(0,m.jsx)(t,{variant:`outline`}),children:`Close`})]})}function S({className:e,asChild:t=!1,...r}){let a=t?(0,m.jsx)(n,{}):void 0;return(0,m.jsx)(l,{"data-slot":`dialog-title`,render:a,className:i(`leading-none font-medium`,e),...r})}function C({className:e,asChild:t=!1,...r}){let a=t?(0,m.jsx)(n,{}):void 0;return(0,m.jsx)(u,{"data-slot":`dialog-description`,render:a,className:i(`text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3`,e),...r})}export{b as a,x as i,y as n,S as o,C as r,g as s,h as t};