admin-ui-starter-kit 0.1.3 → 0.4.2

package/dist/showcase/assets/metrics-analytics-bar-YjwFT4ae.js

@@ -0,0 +1,44 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{hr as t,mr as n,t as r}from"./example-BIrQab7K.js";import{t as i}from"./credit-card-CYgRtM77.js";import{t as a}from"./dollar-sign-DlK6XF_v.js";import{t as o}from"./shopping-bag-B5BzpLV5.js";import{t as s}from"./users-ERTaffcv.js";import{s as c}from"./index-Cz4UGUT2.js";import{t as l}from"./props-table-BR-KjRNe.js";import{t as u}from"./metric-bar-BydkmggA.js";import{t as d}from"./metric-grid-BKjrYpt9.js";var f=e({MetricBarDefault:()=>v,MetricBarGradientFrame:()=>y,MetricGridCompactCardsAlternative:()=>b}),p=c(),m=[12,18,15,25,22,30,28,35,32,40,38,45],h=[40,38,35,30,28,25,22,20,18,15,12,10],g=[{id:`rev`,label:`Revenue`,value:`52.3K`,change:{value:`12.5%`,direction:`up`},sparkline:m,icon:a},{id:`ord`,label:`Orders`,value:`284`,change:{value:`8.1%`,direction:`up`},sparkline:m,icon:o},{id:`cust`,label:`Customers`,value:`856`,change:{value:`2.3%`,direction:`down`},sparkline:h,icon:s},{id:`aov`,label:`Avg. Order`,value:`184 USD`,change:{value:`0%`,direction:`neutral`},sparkline:[20,22,21,23,20,22,21,23,22,21,23,22],icon:i}],_=[{id:`rev`,label:`Total Revenue`,value:`52,340 USD`,change:{value:`12.5%`,direction:`up`},sparkline:m},{id:`profit`,label:`Net Profit`,value:`31,404 USD`,change:{value:`8.7%`,direction:`up`},sparkline:[5,8,6,10,9,12,11,14]},{id:`exp`,label:`Expenses`,value:`20,936 USD`,change:{value:`3.2%`,direction:`down`},sparkline:h,trend:`positive`}];function v(){return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(u,{period:{label:`Last 30 days`,value:`last_30`},metrics:g})})}function y(){return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(u,{variant:`gradient`,metrics:_,footerText:`Updated just now`})})}function b(){return(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(d,{metrics:g,variant:`compact`,columns:4})})}var x=`import { CreditCard, DollarSign, ShoppingBag, Users } from 'lucide-react';
+import { MetricBar, MetricGrid, type MetricData } from '@/components/composed/analytics';
+
+const UP = [12, 18, 15, 25, 22, 30, 28, 35, 32, 40, 38, 45];
+const DOWN = [40, 38, 35, 30, 28, 25, 22, 20, 18, 15, 12, 10];
+const FLAT = [20, 22, 21, 23, 20, 22, 21, 23, 22, 21, 23, 22];
+
+const KPIS: MetricData[] = [
+	{ id: 'rev', label: 'Revenue', value: '52.3K', change: { value: '12.5%', direction: 'up' }, sparkline: UP, icon: DollarSign },
+	{ id: 'ord', label: 'Orders', value: '284', change: { value: '8.1%', direction: 'up' }, sparkline: UP, icon: ShoppingBag },
+	{ id: 'cust', label: 'Customers', value: '856', change: { value: '2.3%', direction: 'down' }, sparkline: DOWN, icon: Users },
+	{ id: 'aov', label: 'Avg. Order', value: '184 USD', change: { value: '0%', direction: 'neutral' }, sparkline: FLAT, icon: CreditCard },
+];
+
+const FINANCE: MetricData[] = [
+	{ id: 'rev', label: 'Total Revenue', value: '52,340 USD', change: { value: '12.5%', direction: 'up' }, sparkline: UP },
+	{ id: 'profit', label: 'Net Profit', value: '31,404 USD', change: { value: '8.7%', direction: 'up' }, sparkline: [5, 8, 6, 10, 9, 12, 11, 14] },
+	{ id: 'exp', label: 'Expenses', value: '20,936 USD', change: { value: '3.2%', direction: 'down' }, sparkline: DOWN, trend: 'positive' },
+];
+
+export function MetricBarDefault() {
+	return (
+		<>
+			<MetricBar period={{ label: 'Last 30 days', value: 'last_30' }} metrics={KPIS} />
+		</>
+	);
+}
+
+export function MetricBarGradientFrame() {
+	return (
+		<>
+			<MetricBar variant="gradient" metrics={FINANCE} footerText="Updated just now" />
+		</>
+	);
+}
+
+export function MetricGridCompactCardsAlternative() {
+	return (
+		<>
+			<MetricGrid metrics={KPIS} variant="compact" columns={4} />
+		</>
+	);
+}
+`;function S(e){let i={h4:`h4`,...e.components};return f||w(`Examples`,!1),v||w(`Examples.MetricBarDefault`,!0),y||w(`Examples.MetricBarGradientFrame`,!0),b||w(`Examples.MetricGridCompactCardsAlternative`,!0),(0,p.jsxs)(t,{title:`Features · Metrics · Analytics bar`,description:"`MetricBar` — horizontal KPI strip with hairline-divided cells. Pair with `MetricGrid` for card-style layouts.",layer:`features`,status:`ready`,children:[(0,p.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,p.jsx)(r,{name:`MetricBarDefault`,source:x,children:(0,p.jsx)(v,{})}),(0,p.jsx)(r,{name:`MetricBarGradientFrame`,source:x,children:(0,p.jsx)(y,{})}),(0,p.jsx)(r,{name:`MetricGridCompactCardsAlternative`,source:x,children:(0,p.jsx)(b,{})})]}),(0,p.jsxs)(n,{title:`API`,id:`api`,children:[(0,p.jsx)(i.h4,{children:`MetricBar`}),(0,p.jsx)(l,{component:`MetricBar`}),(0,p.jsx)(i.h4,{children:`MetricGrid`}),(0,p.jsx)(l,{component:`MetricGrid`})]})]})}function C(e={}){let{wrapper:t}=e.components||{};return t?(0,p.jsx)(t,{...e,children:(0,p.jsx)(S,{...e})}):S(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{C as default};

package/dist/showcase/assets/metrics-analytics-cards-B6DspERM.js

@@ -0,0 +1,50 @@
+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,mr as o,t as s}from"./example-BIrQab7K.js";import{n as c,s as l}from"./index-Cz4UGUT2.js";import{t as u}from"./props-table-BR-KjRNe.js";import{Zn as d,t as f,u as p}from"./AreaChart-DUe3j5uB.js";import{t as m}from"./metric-trend-chip-DehaJ3nC.js";var h=t(n(),1),g=l(),_={green:`bg-gradient-to-br from-success via-primary to-success`,purple:`bg-gradient-to-br from-info via-primary to-info`,warm:`bg-gradient-to-br from-warning via-destructive to-warning`,ocean:`bg-gradient-to-br from-info via-primary to-info`},v=`var(--inverse-foreground)`,y=`var(--inverse-muted)`;function b({title:e,value:t,change:n,data:a,theme:o=`green`,subtitle:s,className:l}){let u=`metric-grad-${(0,h.useId)().replaceAll(`:`,``)}`;return(0,g.jsxs)(`div`,{className:c(`metric-gradient--component`,`relative overflow-hidden rounded-lg p-5 text-inverse-foreground shadow-sm ring-1 ring-inverse-border`,_[o],l),children:[(0,g.jsxs)(`div`,{className:`relative flex items-start justify-between gap-3`,children:[(0,g.jsxs)(`div`,{className:`min-w-0`,children:[(0,g.jsx)(r,{size:`xs`,weight:`medium`,className:`uppercase tracking-wider text-inverse-muted`,children:e}),!!t&&(0,g.jsx)(i,{tag:`h3`,className:`mt-1 text-3xl font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-inverse-foreground`,children:t}),!!s&&(0,g.jsx)(r,{size:`xs`,className:`mt-1 text-inverse-muted`,children:s})]}),!!n&&(0,g.jsx)(m,{change:n,trend:n.direction===`up`?`positive`:n.direction===`down`?`negative`:`neutral`,size:`sm`,variant:`badge`,className:`shrink-0 !bg-inverse-surface-strong !text-inverse-foreground`})]}),(0,g.jsx)(`div`,{className:`relative -mx-1 mt-3 h-24`,children:(0,g.jsx)(d,{width:`100%`,height:`100%`,initialDimension:{width:1,height:1},children:(0,g.jsxs)(f,{data:a,margin:{top:4,right:0,bottom:0,left:0},children:[(0,g.jsx)(`defs`,{children:(0,g.jsxs)(`linearGradient`,{id:u,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,g.jsx)(`stop`,{offset:`0%`,stopColor:v,stopOpacity:.3}),(0,g.jsx)(`stop`,{offset:`100%`,stopColor:v,stopOpacity:0})]})}),(0,g.jsx)(p,{type:`monotone`,dataKey:`value`,stroke:y,strokeWidth:2,fill:`url(#${u})`,dot:!1,activeDot:{r:4,strokeWidth:2,fill:v,stroke:y},isAnimationActive:!0,animationDuration:800})]})})})]})}b.displayName=`MetricGradient`;var x=e({FourThemes:()=>C}),S=[{label:`Jan`,value:4200},{label:`Feb`,value:3800},{label:`Mar`,value:5100},{label:`Apr`,value:4600},{label:`May`,value:5800},{label:`Jun`,value:6200},{label:`Jul`,value:5900},{label:`Aug`,value:7100},{label:`Sep`,value:6800},{label:`Oct`,value:7500},{label:`Nov`,value:8200},{label:`Dec`,value:9100}];function C(){return(0,g.jsx)(g.Fragment,{children:(0,g.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-2 xl:grid-cols-4`,children:[(0,g.jsx)(b,{title:`Growth`,value:`32.4K`,change:{value:`15.2%`,direction:`up`},data:S,theme:`green`,subtitle:`vs last quarter`}),(0,g.jsx)(b,{title:`Engagement`,value:`8,940`,change:{value:`4.7%`,direction:`up`},data:S,theme:`purple`,subtitle:`active users`}),(0,g.jsx)(b,{title:`Conversions`,value:`4.8%`,change:{value:`0.3%`,direction:`down`},data:S,theme:`warm`,subtitle:`checkout rate`}),(0,g.jsx)(b,{title:`Sessions`,value:`124K`,change:{value:`8.1%`,direction:`up`},data:S,theme:`ocean`,subtitle:`last 30 days`})]})})}var w=`import { MetricGradient, type MetricDataPoint } from '@/components/composed/analytics';
+
+const data: MetricDataPoint[] = [
+	{ label: 'Jan', value: 4200 }, { label: 'Feb', value: 3800 }, { label: 'Mar', value: 5100 },
+	{ label: 'Apr', value: 4600 }, { label: 'May', value: 5800 }, { label: 'Jun', value: 6200 },
+	{ label: 'Jul', value: 5900 }, { label: 'Aug', value: 7100 }, { label: 'Sep', value: 6800 },
+	{ label: 'Oct', value: 7500 }, { label: 'Nov', value: 8200 }, { label: 'Dec', value: 9100 },
+];
+
+export function FourThemes() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+								<MetricGradient
+									title="Growth"
+									value="32.4K"
+									change={{ value: '15.2%', direction: 'up' }}
+									data={data}
+									theme="green"
+									subtitle="vs last quarter"
+								/>
+								<MetricGradient
+									title="Engagement"
+									value="8,940"
+									change={{ value: '4.7%', direction: 'up' }}
+									data={data}
+									theme="purple"
+									subtitle="active users"
+								/>
+								<MetricGradient
+									title="Conversions"
+									value="4.8%"
+									change={{ value: '0.3%', direction: 'down' }}
+									data={data}
+									theme="warm"
+									subtitle="checkout rate"
+								/>
+								<MetricGradient
+									title="Sessions"
+									value="124K"
+									change={{ value: '8.1%', direction: 'up' }}
+									data={data}
+									theme="ocean"
+									subtitle="last 30 days"
+								/>
+							</div>
+		</>
+	);
+}
+`;function T(e){let t={h4:`h4`,...e.components};return x||D(`Examples`,!1),C||D(`Examples.FourThemes`,!0),(0,g.jsxs)(a,{title:`Features · Metrics · Analytics cards`,description:"`MetricGradient` — vivid gradient hero card with embedded area chart. Pick a `theme` to drive the colour palette.",layer:`features`,status:`ready`,children:[(0,g.jsx)(o,{title:`Examples`,id:`examples`,children:(0,g.jsx)(s,{name:`FourThemes`,source:w,children:(0,g.jsx)(C,{})})}),(0,g.jsxs)(o,{title:`API`,id:`api`,children:[(0,g.jsx)(t.h4,{children:`MetricGradient`}),(0,g.jsx)(u,{component:`MetricGradient`})]})]})}function E(e={}){let{wrapper:t}=e.components||{};return t?(0,g.jsx)(t,{...e,children:(0,g.jsx)(T,{...e})}):T(e)}function D(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{E as default};

package/dist/showcase/assets/metrics-comparison-Nru5wypZ.js

@@ -0,0 +1,76 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,Tr as n,hr as r,mr as i,t as a}from"./example-BIrQab7K.js";import{t as o}from"./arrow-down-CYh_aUsd.js";import{t as s}from"./arrow-right-Bf1Tl6D5.js";import{t as c}from"./arrow-up-BhmQRZs9.js";import{a as l,k as u,n as d,s as f}from"./index-Cz4UGUT2.js";import{t as p}from"./props-table-BR-KjRNe.js";import{t as m}from"./smart-card-B4P_C0nk.js";import{t as h}from"./format-metric-value-BTsvOjZQ.js";var g=l(`equal`,[[`line`,{x1:`5`,x2:`19`,y1:`9`,y2:`9`,key:`1nwqeh`}],[`line`,{x1:`5`,x2:`19`,y1:`15`,y2:`15`,key:`g8yjpy`}]]),_=f(),v={title:`Comparison`,currentLabel:`This period`,previousLabel:`Previous period`,suffix:`vs previous`};function y(e){if(e==null)return null;if(typeof e==`number`)return e;let t=Number(e);return Number.isFinite(t)?t:null}function b({current:e,previous:r,title:i,currentPeriod:a,previousPeriod:l,className:f,strings:p}){let b=u(v,p),x=y(e.value),S=y(r.value),C=x!==null&&S!==null,w=C?x-S:0,T=C&&S!==0?Math.round(w/S*100):0,E=w>0,D=w===0,O=D?g:E?c:o,k=D?{box:`bg-muted/40`,chip:`bg-card text-muted-foreground border border-border/60`}:E?{box:`bg-success/10`,chip:`bg-success/15 text-success`}:{box:`bg-destructive/10`,chip:`bg-destructive/15 text-destructive`};return(0,_.jsxs)(m,{title:i??b.title,className:d(`metric-comparison--component`,f),children:[!!(a||l)&&(0,_.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[!!a&&(0,_.jsx)(t,{tag:`span`,size:`xxs`,weight:`medium`,className:`rounded-full bg-muted px-2 py-0.5 uppercase tracking-wider text-muted-foreground`,children:a}),!!l&&(0,_.jsx)(t,{tag:`span`,size:`xxs`,weight:`medium`,className:`rounded-full bg-muted px-2 py-0.5 uppercase tracking-wider text-muted-foreground`,children:l})]}),(0,_.jsxs)(`div`,{className:`mt-3 grid items-stretch gap-2 grid-cols-1 sm:grid-cols-[1fr_auto_1fr]`,children:[(0,_.jsxs)(`div`,{className:`rounded-lg border border-border/60 bg-card px-3 py-2.5`,children:[(0,_.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:b.currentLabel}),(0,_.jsx)(n,{tag:`h5`,className:`text-xl tabular-nums tracking-tight border-none pb-0`,children:h(e)})]}),(0,_.jsxs)(`div`,{className:`flex items-center justify-center text-muted-foreground/60`,children:[(0,_.jsx)(s,{className:`hidden size-4 sm:block`,"aria-hidden":`true`}),(0,_.jsx)(o,{className:`size-4 sm:hidden`,"aria-hidden":`true`})]}),(0,_.jsxs)(`div`,{className:`rounded-lg border border-border/60 bg-muted/30 px-3 py-2.5`,children:[(0,_.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:b.previousLabel}),(0,_.jsx)(n,{tag:`h5`,className:`text-xl tabular-nums tracking-tight border-none pb-0 text-muted-foreground`,children:h(r)})]})]}),!!C&&(0,_.jsxs)(`div`,{className:d(`mt-3 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2`,k.box),children:[(0,_.jsxs)(`div`,{className:d(`inline-flex items-center gap-1 rounded-full px-2 py-0.5`,k.chip),children:[(0,_.jsx)(O,{className:`size-3`,strokeWidth:2.5,"aria-hidden":`true`}),(0,_.jsxs)(t,{tag:`span`,size:`xs`,weight:`semibold`,className:`tabular-nums`,children:[E?`+`:D?``:`−`,(t=>{let n=Math.abs(t);return h({...e,value:n})})(w)]})]}),(0,_.jsxs)(t,{size:`xs`,type:`secondary`,className:d(`tabular-nums`,E&&`text-success`,!E&&!D&&`text-destructive`),children:[E?`+`:D?``:`−`,Math.abs(T),`% `,b.suffix]})]})]})}b.displayName=`MetricComparison`;var x=e({Default:()=>E,FlatNoChange:()=>k,PercentageValues:()=>O,WithCurrencyOverrideEUR:()=>D}),S={current:{id:`cur`,label:`Current`,value:48250,valueType:`currency`,currency:`USD`},previous:{id:`prev`,label:`Previous`,value:41800,valueType:`currency`,currency:`USD`}},C={current:{id:`cur`,label:`Current`,value:148500,valueType:`currency`,currency:`EUR`},previous:{id:`prev`,label:`Previous`,value:132100,valueType:`currency`,currency:`EUR`}},w={current:{id:`cur`,label:`Current`,value:.082,valueType:`percentage`},previous:{id:`prev`,label:`Previous`,value:.094,valueType:`percentage`}},T={current:{id:`cur`,label:`Current`,value:1240,valueType:`number`},previous:{id:`prev`,label:`Previous`,value:1240,valueType:`number`}};function E(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Monthly Revenue`,current:S.current,previous:S.previous,currentPeriod:`Mar 2026`,previousPeriod:`Feb 2026`})})}function D(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Quarterly Revenue`,current:C.current,previous:C.previous,currentPeriod:`Q1 2026`,previousPeriod:`Q4 2025`})})}function O(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Conversion rate`,current:w.current,previous:w.previous,currentPeriod:`This week`,previousPeriod:`Last week`})})}function k(){return(0,_.jsx)(_.Fragment,{children:(0,_.jsx)(b,{title:`Active sessions`,current:T.current,previous:T.previous})})}var A=`import { MetricComparison, type MetricData } from '@/components/composed/analytics';
+
+const monthly: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 48250, valueType: 'currency', currency: 'USD' },
+	previous: { id: 'prev', label: 'Previous', value: 41800, valueType: 'currency', currency: 'USD' },
+};
+
+const quarterly: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 148500, valueType: 'currency', currency: 'EUR' },
+	previous: { id: 'prev', label: 'Previous', value: 132100, valueType: 'currency', currency: 'EUR' },
+};
+
+const conversion: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 0.082, valueType: 'percentage' },
+	previous: { id: 'prev', label: 'Previous', value: 0.094, valueType: 'percentage' },
+};
+
+const flat: { current: MetricData; previous: MetricData } = {
+	current: { id: 'cur', label: 'Current', value: 1240, valueType: 'number' },
+	previous: { id: 'prev', label: 'Previous', value: 1240, valueType: 'number' },
+};
+
+export function Default() {
+	return (
+		<>
+			<MetricComparison
+								title="Monthly Revenue"
+								current={monthly.current}
+								previous={monthly.previous}
+								currentPeriod="Mar 2026"
+								previousPeriod="Feb 2026"
+							/>
+		</>
+	);
+}
+
+export function WithCurrencyOverrideEUR() {
+	return (
+		<>
+			<MetricComparison
+								title="Quarterly Revenue"
+								current={quarterly.current}
+								previous={quarterly.previous}
+								currentPeriod="Q1 2026"
+								previousPeriod="Q4 2025"
+							/>
+		</>
+	);
+}
+
+export function PercentageValues() {
+	return (
+		<>
+			<MetricComparison
+								title="Conversion rate"
+								current={conversion.current}
+								previous={conversion.previous}
+								currentPeriod="This week"
+								previousPeriod="Last week"
+							/>
+		</>
+	);
+}
+
+export function FlatNoChange() {
+	return (
+		<>
+			<MetricComparison
+								title="Active sessions"
+								current={flat.current}
+								previous={flat.previous}
+							/>
+		</>
+	);
+}
+`;function j(e){let t={h4:`h4`,...e.components};return x||N(`Examples`,!1),E||N(`Examples.Default`,!0),k||N(`Examples.FlatNoChange`,!0),O||N(`Examples.PercentageValues`,!0),D||N(`Examples.WithCurrencyOverrideEUR`,!0),(0,_.jsxs)(r,{title:`Features · Metrics · Comparison`,description:"`MetricComparison` — side-by-side current vs previous with a tone-tinted delta box. Reuses the unified `MetricData` shape so currency/percent formatting carries through.",layer:`features`,status:`ready`,children:[(0,_.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,_.jsx)(a,{name:`Default`,source:A,children:(0,_.jsx)(E,{})}),(0,_.jsx)(a,{name:`WithCurrencyOverrideEUR`,source:A,children:(0,_.jsx)(D,{})}),(0,_.jsx)(a,{name:`PercentageValues`,source:A,children:(0,_.jsx)(O,{})}),(0,_.jsx)(a,{name:`FlatNoChange`,source:A,children:(0,_.jsx)(k,{})})]}),(0,_.jsxs)(i,{title:`API`,id:`api`,children:[(0,_.jsx)(t.h4,{children:`MetricComparison`}),(0,_.jsx)(p,{component:`MetricComparison`})]})]})}function M(e={}){let{wrapper:t}=e.components||{};return t?(0,_.jsx)(t,{...e,children:(0,_.jsx)(j,{...e})}):j(e)}function N(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{M as default};

package/dist/showcase/assets/metrics-heatmap-CcumN0Or.js

@@ -0,0 +1,27 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,hr as n,mr as r,t as i}from"./example-BIrQab7K.js";import{k as a,n as o,s}from"./index-Cz4UGUT2.js";import{t as c}from"./props-table-BR-KjRNe.js";import{t as l}from"./smart-card-B4P_C0nk.js";import{t as u}from"./analytics.strings-B9262Jmq.js";var d=s(),f={0:`bg-muted`,1:`bg-success/20`,2:`bg-success/40`,3:`bg-success/65`,4:`bg-success`};function p(e,t){if(e.length===0)return{weeks:[],monthLabels:[]};let n=[...e].sort((e,t)=>e.date.localeCompare(t.date)),r=new Date(n[0].date+`T00:00:00`),i=new Date(n[n.length-1].date+`T00:00:00`),a=r.getDay(),o=a===0?-6:1-a,s=new Date(r);s.setDate(s.getDate()+o);let c=new Map;for(let e of n)c.set(e.date,e.level);let l=[],u=[],d=-1,f=[],p=new Date(s);for(;p<=i;){let e=p.toISOString().slice(0,10),n=(p.getDay()+6)%7;n===0&&f.length>0&&(l.push(f),f=[]);let r=p.getMonth();if(r!==d){let e=n===0?l.length:l.length+1;u.find(t=>t.weekIndex===e)||u.push({label:t[r],weekIndex:e}),d=r}let i=c.get(e)??0;f.push({date:e,level:i}),p.setDate(p.getDate()+1)}if(f.length>0){for(;f.length<7;)f.push(null);l.push(f)}return{weeks:l,monthLabels:u}}function m({title:e,description:n,data:r,className:i,strings:s}){let c=a(u,s),{weeks:m,monthLabels:h}=p(r,c.heatmapMonthNames);return(0,d.jsxs)(l,{title:e,description:n,className:o(`activity-heatmap--component`,i),children:[(0,d.jsxs)(`div`,{className:`overflow-x-auto`,children:[(0,d.jsx)(`div`,{className:`relative mb-1`,style:{paddingLeft:`28px`,height:`12px`},children:(0,d.jsx)(`div`,{className:`relative flex`,style:{width:`${m.length*15}px`},children:h.filter((e,t,n)=>t===0||e.weekIndex-n[t-1].weekIndex>=3).map(e=>(0,d.jsx)(t,{size:`xxs`,type:`secondary`,className:`absolute leading-none whitespace-nowrap`,style:{left:`${e.weekIndex*15}px`,top:0},children:e.label},`${e.label}-${e.weekIndex}`))})}),(0,d.jsxs)(`div`,{className:`flex gap-0`,children:[(0,d.jsx)(`div`,{className:`mr-1 flex flex-col gap-[3px]`,children:c.heatmapDayLabels.map((e,n)=>(0,d.jsx)(`div`,{className:`flex h-3 w-6 items-center justify-end`,children:!!e&&(0,d.jsx)(t,{size:`xxs`,type:`secondary`,className:`leading-none`,children:e})},`day-${n}`))}),(0,d.jsx)(`div`,{className:`flex gap-[3px]`,children:m.map((e,t)=>(0,d.jsx)(`div`,{className:`flex flex-col gap-[3px]`,children:e.map((e,n)=>{let r=e?`${e.date}: Level ${e.level}`:void 0;return(0,d.jsx)(`div`,{className:o(`size-3 rounded-sm`,e?f[e.level]:`bg-transparent`),title:r},`d-${t}-${n}`)})},`w-${t}`))})]})]}),(0,d.jsxs)(`div`,{className:`mt-4 flex items-center justify-end gap-1.5`,children:[(0,d.jsx)(t,{size:`xxs`,type:`secondary`,children:c.heatmapLegendLess}),[0,1,2,3,4].map(e=>(0,d.jsx)(`div`,{className:o(`size-3 rounded-sm`,f[e])},`legend-${e}`)),(0,d.jsx)(t,{size:`xxs`,type:`secondary`,children:c.heatmapLegendMore})]})]})}m.displayName=`ActivityHeatmap`;var h=e({OrderActivity:()=>v});function g(){let e=[],t=new Date(`2026-06-19T00:00:00Z`);for(let n=89;n>=0;n--){let r=new Date(t);r.setDate(r.getDate()-n);let i=(n*37+17)%100/100,a=i<.15?0:i<.35?1:i<.6?2:i<.8?3:4;e.push({date:r.toISOString().slice(0,10),level:a})}return e}var _=g();function v(){return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)(`div`,{className:`max-w-2xl`,children:(0,d.jsx)(m,{title:`Order Activity`,description:`Last 90 days`,data:_})})})}var y=`import { ActivityHeatmap, type ActivityHeatmapDay } from '@/components/composed/analytics';
+
+function generate(): ActivityHeatmapDay[] {
+	const days: ActivityHeatmapDay[] = [];
+	const now = new Date('2026-06-19T00:00:00Z');
+	for (let i = 89; i >= 0; i--) {
+		const d = new Date(now);
+		d.setDate(d.getDate() - i);
+		const r = ((i * 37 + 17) % 100) / 100;
+		const level: 0 | 1 | 2 | 3 | 4 = r < 0.15 ? 0 : r < 0.35 ? 1 : r < 0.6 ? 2 : r < 0.8 ? 3 : 4;
+		days.push({ date: d.toISOString().slice(0, 10), level });
+	}
+	return days;
+}
+
+const data = generate();
+
+export function OrderActivity() {
+	return (
+		<>
+			<div className="max-w-2xl">
+								<ActivityHeatmap title="Order Activity" description="Last 90 days" data={data} />
+							</div>
+		</>
+	);
+}
+`;function b(e){let t={h4:`h4`,...e.components};return h||S(`Examples`,!1),v||S(`Examples.OrderActivity`,!0),(0,d.jsxs)(n,{title:`Features · Metrics · Activity heatmap`,description:"`ActivityHeatmap` — GitHub-style daily-activity calendar with success-tinted intensity cells.",layer:`features`,status:`ready`,children:[(0,d.jsx)(r,{title:`Examples`,id:`examples`,children:(0,d.jsx)(i,{name:`OrderActivity`,source:y,children:(0,d.jsx)(v,{})})}),(0,d.jsxs)(r,{title:`API`,id:`api`,children:[(0,d.jsx)(t.h4,{children:`ActivityHeatmap`}),(0,d.jsx)(c,{component:`ActivityHeatmap`})]})]})}function x(e={}){let{wrapper:t}=e.components||{};return t?(0,d.jsx)(t,{...e,children:(0,d.jsx)(b,{...e})}):b(e)}function S(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{x as default};

package/dist/showcase/assets/metrics-inline-badge-2WB7w9mz.js

@@ -0,0 +1,17 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,hr as n,mr as r,t as i}from"./example-BIrQab7K.js";import{n as a,s as o}from"./index-Cz4UGUT2.js";import{t as s}from"./props-table-BR-KjRNe.js";var c=o(),l={sm:`gap-1 rounded-full px-2 py-0.5`,md:`gap-1.5 rounded-full px-2.5 py-1`,base:`gap-1.5 rounded-full px-2.5 py-1`,lg:`gap-1.5 rounded-full px-3 py-1`},u={sm:`xxs`,md:`xxs`,base:`xxs`,lg:`xs`},d={sm:`xxs`,md:`xs`,base:`xs`,lg:`xs`},f={sm:`xxs`,md:`xxs`,base:`xxs`,lg:`xxs`};function p({metrics:e,className:n}){return(0,c.jsx)(`div`,{className:a(`inline-metric--component`,`flex flex-wrap gap-1.5`,n),children:e.map(e=>{let n=e.size??`base`;return(0,c.jsxs)(`span`,{className:a(`inline-flex items-center bg-card ring-1 ring-border/60`,l[n]??l.base),children:[(0,c.jsx)(t,{tag:`span`,size:u[n]??`xxs`,type:`secondary`,children:e.label}),(0,c.jsx)(t,{tag:`span`,size:d[n]??`xs`,weight:`semibold`,className:`tabular-nums`,children:e.value}),(0,c.jsxs)(t,{tag:`span`,size:f[n]??`xxs`,weight:`medium`,className:a(`tabular-nums inline-flex items-center gap-0.5 rounded-full px-1`,e.up?`bg-success/10 text-success`:`bg-destructive/10 text-destructive`),children:[e.up?`↑`:`↓`,e.change]})]},e.label)})})}p.displayName=`InlineMetricBadge`;var m=e({MixedSizesDirections:()=>h});function h(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(p,{metrics:[{label:`Revenue`,value:`52.3K`,change:`+12%`,up:!0,size:`md`},{label:`Orders`,value:`1,284`,change:`+8%`,up:!0,size:`md`},{label:`Returns`,value:`23`,change:`-5%`,up:!1,size:`sm`},{label:`AOV`,value:`351 USD`,change:`+3%`,up:!0,size:`lg`}]})})}var g=`import { InlineMetricBadge } from '@/components/composed/data-display/inline-metric';
+
+export function MixedSizesDirections() {
+	return (
+		<>
+			<InlineMetricBadge
+								metrics={[
+									{ label: 'Revenue', value: '52.3K', change: '+12%', up: true, size: 'md' },
+									{ label: 'Orders', value: '1,284', change: '+8%', up: true, size: 'md' },
+									{ label: 'Returns', value: '23', change: '-5%', up: false, size: 'sm' },
+									{ label: 'AOV', value: '351 USD', change: '+3%', up: true, size: 'lg' },
+								]}
+							/>
+		</>
+	);
+}
+`;function _(e){let t={h4:`h4`,...e.components};return m||y(`Examples`,!1),h||y(`Examples.MixedSizesDirections`,!0),(0,c.jsxs)(n,{title:`Features · Metrics · Inline badge`,description:"`InlineMetricBadge` — compact `label · value · change%` pill rows. Use as in-flow copy where a full Metric tile is too heavy.",layer:`features`,status:`ready`,children:[(0,c.jsx)(r,{title:`Examples`,id:`examples`,children:(0,c.jsx)(i,{name:`MixedSizesDirections`,source:g,children:(0,c.jsx)(h,{})})}),(0,c.jsxs)(r,{title:`API`,id:`api`,children:[(0,c.jsx)(t.h4,{children:`InlineMetricBadge`}),(0,c.jsx)(s,{component:`InlineMetricBadge`})]})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(_,{...e})}):_(e)}function y(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{v as default};

package/dist/showcase/assets/metrics-kpi-row-jU3hsB3C.js

@@ -0,0 +1,31 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,hr as n,mr as r,t as i}from"./example-BIrQab7K.js";import{n as a,s as o}from"./index-Cz4UGUT2.js";import{t as s}from"./props-table-BR-KjRNe.js";var c=o(),l=`ring-1 ring-border/50 shadow-sm`;function u({kpis:e,className:n}){return(0,c.jsx)(`div`,{className:a(`mini-kpi--component`,`inline-flex items-center divide-x divide-border/50 rounded-xl bg-card px-2 py-2`,l,n),children:e.map(e=>(0,c.jsxs)(`div`,{className:`flex flex-col items-center px-4`,children:[(0,c.jsx)(t,{weight:`bold`,className:`tabular-nums`,children:e.value}),(0,c.jsx)(t,{size:`xs`,type:`secondary`,className:`text-xxs`,children:e.label})]},e.label))})}u.displayName=`MiniKpiRow`;var d=e({Example3KPIs:()=>p,Example4KPIs:()=>f});function f(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(u,{kpis:[{value:`2,847`,label:`Orders`},{value:`142K`,label:`Revenue`},{value:`94.2%`,label:`Fulfillment`},{value:`4.8`,label:`Rating`}]})})}function p(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(u,{kpis:[{value:`128`,label:`Active`},{value:`24`,label:`Pending`},{value:`7`,label:`Overdue`}]})})}var m=`import { MiniKpiRow } from '@/components/composed/data-display/mini-kpi';
+
+export function Example4KPIs() {
+	return (
+		<>
+			<MiniKpiRow
+								kpis={[
+									{ value: '2,847', label: 'Orders' },
+									{ value: '142K', label: 'Revenue' },
+									{ value: '94.2%', label: 'Fulfillment' },
+									{ value: '4.8', label: 'Rating' },
+								]}
+							/>
+		</>
+	);
+}
+
+export function Example3KPIs() {
+	return (
+		<>
+			<MiniKpiRow
+								kpis={[
+									{ value: '128', label: 'Active' },
+									{ value: '24', label: 'Pending' },
+									{ value: '7', label: 'Overdue' },
+								]}
+							/>
+		</>
+	);
+}
+`;function h(e){let t={h4:`h4`,...e.components};return d||_(`Examples`,!1),p||_(`Examples.Example3KPIs`,!0),f||_(`Examples.Example4KPIs`,!0),(0,c.jsxs)(n,{title:`Features · Metrics · KPI row`,description:"`MiniKpiRow` — compact horizontal divider-separated KPI strip for header / footer accents.",layer:`features`,status:`ready`,children:[(0,c.jsxs)(r,{title:`Examples`,id:`examples`,children:[(0,c.jsx)(i,{name:`Example4KPIs`,source:m,children:(0,c.jsx)(f,{})}),(0,c.jsx)(i,{name:`Example3KPIs`,source:m,children:(0,c.jsx)(p,{})})]}),(0,c.jsxs)(r,{title:`API`,id:`api`,children:[(0,c.jsx)(t.h4,{children:`MiniKpiRow`}),(0,c.jsx)(s,{component:`MiniKpiRow`})]})]})}function g(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}function _(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{g as default};

package/dist/showcase/assets/metrics-micro-grid-CaJ99RXL.js

@@ -0,0 +1,42 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,t as o}from"./example-BIrQab7K.js";import{n as s,s as c}from"./index-Cz4UGUT2.js";import{t as l}from"./props-table-BR-KjRNe.js";import{t as u}from"./smart-card-B4P_C0nk.js";import{Zn as d,t as f,u as p}from"./AreaChart-DUe3j5uB.js";var m=t(n(),1),h=c(),g=[`bars`,`line`,`dots`,`progress`,`area`,`pie`],_={bars:`var(--primary)`,line:`var(--info)`,dots:`var(--warning)`,progress:`var(--success)`,area:`var(--primary)`,pie:`var(--success)`},v=[`var(--success)`,`var(--info)`,`var(--warning)`];function y({data:e,color:t}){let n=Math.max(...e,1);return(0,h.jsx)(`div`,{className:s(`metric-micro-grid--component`,`flex h-5 items-end gap-[2px]`),children:e.slice(0,6).map((e,r)=>(0,h.jsx)(`div`,{className:`flex-1 rounded-t-sm`,style:{height:`${e/n*100}%`,backgroundColor:t,opacity:.8}},`bar-${r}`))})}function b({data:e,color:t}){let n=Math.max(...e,1),r=Math.min(...e),i=n-r||1,a=e.slice(0,6);return(0,h.jsx)(`svg`,{viewBox:`0 0 60 16`,className:`h-5 w-full`,preserveAspectRatio:`none`,children:(0,h.jsx)(`polyline`,{fill:`none`,stroke:t,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,points:a.map((e,t)=>`${t/Math.max(a.length-1,1)*60},${16-(e-r)/i*14}`).join(` `)})})}function x({data:e,color:t}){let n=Math.max(...e,1);return(0,h.jsx)(`div`,{className:`flex h-5 items-end justify-around`,children:e.slice(0,5).map((e,r)=>(0,h.jsx)(`div`,{className:`h-1.5 w-1.5 rounded-full`,style:{marginBottom:`${e/n*12}px`,backgroundColor:t}},`dot-${r}`))})}function S({data:e,color:t}){let n=e[0]??0,r=e[1]??100;return(0,h.jsx)(`div`,{className:`h-1.5 w-full overflow-hidden rounded-full bg-muted`,children:(0,h.jsx)(`div`,{className:`h-full rounded-full transition-all`,style:{width:`${Math.min(n/r*100,100)}%`,backgroundColor:t}})})}function C({data:e,color:t}){let n=`micro-area-${(0,m.useId)().replaceAll(`:`,``)}`;return(0,h.jsx)(`div`,{className:`h-5 w-full`,children:(0,h.jsx)(d,{width:`100%`,height:`100%`,initialDimension:{width:1,height:1},children:(0,h.jsxs)(f,{data:e.map((e,t)=>({i:t,v:e})),margin:{top:0,right:0,bottom:0,left:0},children:[(0,h.jsx)(`defs`,{children:(0,h.jsxs)(`linearGradient`,{id:n,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,h.jsx)(`stop`,{offset:`0%`,stopColor:t,stopOpacity:.3}),(0,h.jsx)(`stop`,{offset:`100%`,stopColor:t,stopOpacity:0})]})}),(0,h.jsx)(p,{type:`monotone`,dataKey:`v`,stroke:t,strokeWidth:1.25,fill:`url(#${n})`})]})})})}function w({data:e}){let t=e.reduce((e,t)=>e+t,0)||1,n=0;return(0,h.jsx)(`svg`,{viewBox:`0 0 24 24`,className:`h-6 w-6`,children:e.slice(0,3).map((e,r)=>{let i=e/t*360,a=n;n+=i;let o=(a-90)*Math.PI/180,s=(a+i-90)*Math.PI/180,c=+(i>180);return(0,h.jsx)(`path`,{d:`M12,12 L${12+10*Math.cos(o)},${12+10*Math.sin(o)} A10,10 0 ${c},1 ${12+10*Math.cos(s)},${12+10*Math.sin(s)} Z`,fill:v[r%v.length]},`slice-${r}`)})})}function T({kind:e,data:t}){let n=_[e];return e===`bars`?(0,h.jsx)(y,{data:t,color:n}):e===`line`?(0,h.jsx)(b,{data:t,color:n}):e===`dots`?(0,h.jsx)(x,{data:t,color:n}):e===`progress`?(0,h.jsx)(S,{data:t,color:n}):e===`area`?(0,h.jsx)(C,{data:t,color:n}):(0,h.jsx)(w,{data:t})}function E({title:e=`Overview`,cells:t,className:n}){return(0,h.jsx)(u,{title:e,className:n,padding:`sm`,children:(0,h.jsx)(`div`,{className:`grid grid-cols-3 grid-rows-2 -m-2`,children:t.slice(0,6).map((e,t)=>(0,h.jsxs)(`div`,{className:s(`flex flex-col gap-1.5 px-3 py-2.5`,t%3!=2&&`border-r border-border/50`,t<3&&`border-b border-border/50`),children:[(0,h.jsx)(r,{size:`xxs`,type:`secondary`,className:`truncate uppercase tracking-wider`,children:e.label}),(0,h.jsx)(r,{tag:`span`,weight:`bold`,className:`tabular-nums truncate`,children:e.value}),(0,h.jsx)(`div`,{className:`mt-auto`,children:(0,h.jsx)(T,{kind:e.chart??g[t],data:e.data})})]},e.id??e.label))})})}E.displayName=`MetricMicroGrid`;var D=e({DefaultAutoAssignedCharts:()=>O,PinnedChartKinds:()=>k});function O(){return(0,h.jsx)(h.Fragment,{children:(0,h.jsx)(`div`,{className:`max-w-lg`,children:(0,h.jsx)(E,{title:`Overview`,cells:[{label:`Revenue`,value:`87.4K`,data:[42,55,60,65,75]},{label:`Orders`,value:`1,284`,data:[80,85,90,100,110,105]},{label:`Avg Value`,value:`68.1`,data:[58,62,64,68]},{label:`Vouchers`,value:`73%`,data:[73,100]},{label:`Growth`,value:`+12%`,data:[42,48,55,52,60,58,65,70,75]},{label:`Channels`,value:`3`,data:[520,186,94]}]})})})}function k(){return(0,h.jsx)(h.Fragment,{children:(0,h.jsx)(`div`,{className:`max-w-lg`,children:(0,h.jsx)(E,{title:`Force per-cell chart`,cells:[{label:`Sessions`,value:`1.2M`,data:[200,210,240,260,290,320],chart:`area`},{label:`Users`,value:`24K`,data:[80,85,90,100,110,105],chart:`line`},{label:`Bounce`,value:`32%`,data:[32,100],chart:`progress`},{label:`Pages`,value:`4.2`,data:[3.8,4,4.1,4.2,4.3],chart:`bars`},{label:`Devices`,value:`3`,data:[520,186,94],chart:`pie`},{label:`Sources`,value:`8`,data:[4,6,5,7,8],chart:`dots`}]})})})}var A=`import { MetricMicroGrid } from '@/components/composed/analytics';
+
+export function DefaultAutoAssignedCharts() {
+	return (
+		<>
+			<div className="max-w-lg">
+								<MetricMicroGrid
+									title="Overview"
+									cells={[
+										{ label: 'Revenue', value: '87.4K', data: [42, 55, 60, 65, 75] },
+										{ label: 'Orders', value: '1,284', data: [80, 85, 90, 100, 110, 105] },
+										{ label: 'Avg Value', value: '68.1', data: [58, 62, 64, 68] },
+										{ label: 'Vouchers', value: '73%', data: [73, 100] },
+										{ label: 'Growth', value: '+12%', data: [42, 48, 55, 52, 60, 58, 65, 70, 75] },
+										{ label: 'Channels', value: '3', data: [520, 186, 94] },
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+
+export function PinnedChartKinds() {
+	return (
+		<>
+			<div className="max-w-lg">
+								<MetricMicroGrid
+									title="Force per-cell chart"
+									cells={[
+										{ label: 'Sessions', value: '1.2M', data: [200, 210, 240, 260, 290, 320], chart: 'area' },
+										{ label: 'Users', value: '24K', data: [80, 85, 90, 100, 110, 105], chart: 'line' },
+										{ label: 'Bounce', value: '32%', data: [32, 100], chart: 'progress' },
+										{ label: 'Pages', value: '4.2', data: [3.8, 4.0, 4.1, 4.2, 4.3], chart: 'bars' },
+										{ label: 'Devices', value: '3', data: [520, 186, 94], chart: 'pie' },
+										{ label: 'Sources', value: '8', data: [4, 6, 5, 7, 8], chart: 'dots' },
+									]}
+								/>
+							</div>
+		</>
+	);
+}
+`;function j(e){let t={h4:`h4`,...e.components};return D||N(`Examples`,!1),O||N(`Examples.DefaultAutoAssignedCharts`,!0),k||N(`Examples.PinnedChartKinds`,!0),(0,h.jsxs)(i,{title:`Features · Metrics · Micro chart grid`,description:"`MetricMicroGrid` — six-cell dense overview pairing each KPI with a different lightweight visualization (bars / line / dots / progress / area / pie).",layer:`features`,status:`ready`,children:[(0,h.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,h.jsx)(o,{name:`DefaultAutoAssignedCharts`,source:A,children:(0,h.jsx)(O,{})}),(0,h.jsx)(o,{name:`PinnedChartKinds`,source:A,children:(0,h.jsx)(k,{})})]}),(0,h.jsxs)(a,{title:`API`,id:`api`,children:[(0,h.jsx)(t.h4,{children:`MetricMicroGrid`}),(0,h.jsx)(l,{component:`MetricMicroGrid`})]})]})}function M(e={}){let{wrapper:t}=e.components||{};return t?(0,h.jsx)(t,{...e,children:(0,h.jsx)(j,{...e})}):j(e)}function N(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{M as default};

package/dist/showcase/assets/metrics-overview-Sa7z6jct.js

@@ -0,0 +1,192 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,hr as n,mr as r,t as i}from"./example-BIrQab7K.js";import{t as a}from"./dollar-sign-DlK6XF_v.js";import{t as o}from"./shopping-bag-B5BzpLV5.js";import{t as s}from"./trending-up-HlQQXTth.js";import{t as c}from"./users-ERTaffcv.js";import{s as l}from"./index-Cz4UGUT2.js";import{t as u}from"./props-table-BR-KjRNe.js";import{t as d}from"./metric-trend-chip-DehaJ3nC.js";import{n as f,r as p,t as m}from"./metric-guQTLTAa.js";import{t as h}from"./metric-bar-BydkmggA.js";import{t as g}from"./metric-grid-BKjrYpt9.js";var _=e({ErrorState:()=>P,LiveLoadingState:()=>N,LoadingSkeletons:()=>M,MetricBarDefault:()=>w,MetricBarGradientFrame:()=>T,MetricGridCardVariant:()=>E,MetricGridCompactList:()=>D,MetricMinimalInlineCopy:()=>k,MetricSizesSmMdLg:()=>O,MetricSparklineExample:()=>j,MetricTrendChipExample:()=>A}),v=l(),y={id:`revenue`,label:`Revenue`,value:24820,valueType:`currency`,currency:`USD`,change:{value:`12.4%`,direction:`up`},sparkline:[120,140,132,158,167,180,198,220,240,248],icon:a,subtitle:`This month`},b={id:`orders`,label:`Orders`,value:312,valueType:`number`,change:{value:`4.1%`,direction:`up`},sparkline:[22,28,25,30,35,33,38,41,39,44],icon:o},x={id:`customers`,label:`Active customers`,value:1820,valueType:`number`,change:{value:`2.3%`,direction:`down`},sparkline:[200,198,205,195,188,182,178,180,184,182],icon:c},S={id:`conversion`,label:`Conversion`,value:.082,valueType:`percentage`,change:{value:`0.6%`,direction:`up`},sparkline:[.07,.071,.073,.075,.078,.079,.081,.082],icon:s},C=[y,b,x,S];function w(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(h,{period:{label:`This month`,value:`this_month`},metrics:C})})}function T(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(h,{period:{label:`This month`,value:`this_month`},metrics:C,variant:`gradient`,footerText:`Updated 2 minutes ago`})})}function E(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(g,{metrics:C,variant:`card`,columns:4})})}function D(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(g,{metrics:C,variant:`compact`,columns:2})})}function O(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`space-y-3`,children:[(0,v.jsx)(m,{data:b,variant:`bordered`,size:`sm`}),(0,v.jsx)(m,{data:b,variant:`bordered`,size:`md`}),(0,v.jsx)(m,{data:b,variant:`bordered`,size:`lg`})]})})}function k(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`flex flex-wrap gap-x-6 gap-y-2 rounded-lg border border-border bg-card p-4`,children:[(0,v.jsx)(m,{data:y,variant:`minimal`}),(0,v.jsx)(m,{data:b,variant:`minimal`}),(0,v.jsx)(m,{data:x,variant:`minimal`}),(0,v.jsx)(m,{data:S,variant:`minimal`})]})})}function A(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3`,children:[(0,v.jsx)(d,{change:{value:`12.4%`,direction:`up`},variant:`default`}),(0,v.jsx)(d,{change:{value:`12.4%`,direction:`up`},variant:`badge`}),(0,v.jsx)(d,{change:{value:`3.2%`,direction:`down`},variant:`badge`}),(0,v.jsx)(d,{change:{value:`0%`,direction:`neutral`},variant:`badge`}),(0,v.jsx)(d,{change:{value:`5.1%`,direction:`up`},variant:`compact`}),(0,v.jsx)(d,{change:{value:`5.1%`,direction:`up`},variant:`inline`})]})})}function j(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 sm:grid-cols-3`,children:[(0,v.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:[(0,v.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Positive`}),(0,v.jsx)(`div`,{className:`mt-1 h-12 w-full`,children:(0,v.jsx)(p,{data:[120,140,132,158,167,180,198,220,240,248],trend:`positive`})})]}),(0,v.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:[(0,v.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Negative`}),(0,v.jsx)(`div`,{className:`mt-1 h-12 w-full`,children:(0,v.jsx)(p,{data:[200,198,205,195,188,182,178,180,184,182],trend:`negative`})})]}),(0,v.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-3`,children:[(0,v.jsx)(t,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:`Neutral`}),(0,v.jsx)(`div`,{className:`mt-1 h-12 w-full`,children:(0,v.jsx)(p,{data:[15,20,18,24,22,28,31,35,38,42,45,48],trend:`neutral`})})]})]})})}function M(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsxs)(`div`,{className:`grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4`,children:[(0,v.jsx)(f,{variant:`card`}),(0,v.jsx)(f,{variant:`bordered`}),(0,v.jsx)(f,{variant:`accent`}),(0,v.jsx)(f,{variant:`compact`})]})})}function N(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(g,{metrics:C,variant:`card`,columns:4,loading:!0})})}function P(){return(0,v.jsx)(v.Fragment,{children:(0,v.jsx)(m,{data:y,variant:`card`,error:!0,errorLabel:`Couldn't load this metric`})})}var F=`import { DollarSign, ShoppingBag, TrendingUp, Users } from 'lucide-react';
+import {
+	Metric,
+	MetricBar,
+	MetricGrid,
+	MetricSkeleton,
+	MetricSparkline,
+	MetricTrendChip,
+	type MetricData,
+} from '@/components/composed/analytics';
+import { Text } from '@/components/typography';
+
+const revenue: MetricData = {
+	id: 'revenue',
+	label: 'Revenue',
+	value: 24820,
+	valueType: 'currency',
+	currency: 'USD',
+	change: { value: '12.4%', direction: 'up' },
+	sparkline: [120, 140, 132, 158, 167, 180, 198, 220, 240, 248],
+	icon: DollarSign,
+	subtitle: 'This month',
+};
+
+const orders: MetricData = {
+	id: 'orders',
+	label: 'Orders',
+	value: 312,
+	valueType: 'number',
+	change: { value: '4.1%', direction: 'up' },
+	sparkline: [22, 28, 25, 30, 35, 33, 38, 41, 39, 44],
+	icon: ShoppingBag,
+};
+
+const customers: MetricData = {
+	id: 'customers',
+	label: 'Active customers',
+	value: 1820,
+	valueType: 'number',
+	change: { value: '2.3%', direction: 'down' },
+	sparkline: [200, 198, 205, 195, 188, 182, 178, 180, 184, 182],
+	icon: Users,
+};
+
+const conversion: MetricData = {
+	id: 'conversion',
+	label: 'Conversion',
+	value: 0.082,
+	valueType: 'percentage',
+	change: { value: '0.6%', direction: 'up' },
+	sparkline: [0.07, 0.071, 0.073, 0.075, 0.078, 0.079, 0.081, 0.082],
+	icon: TrendingUp,
+};
+
+const ALL = [revenue, orders, customers, conversion];
+
+export function MetricBarDefault() {
+	return (
+		<>
+			<MetricBar
+								period={{ label: 'This month', value: 'this_month' }}
+								metrics={ALL}
+							/>
+		</>
+	);
+}
+
+export function MetricBarGradientFrame() {
+	return (
+		<>
+			<MetricBar
+								period={{ label: 'This month', value: 'this_month' }}
+								metrics={ALL}
+								variant="gradient"
+								footerText="Updated 2 minutes ago"
+							/>
+		</>
+	);
+}
+
+export function MetricGridCardVariant() {
+	return (
+		<>
+			<MetricGrid metrics={ALL} variant="card" columns={4} />
+		</>
+	);
+}
+
+export function MetricGridCompactList() {
+	return (
+		<>
+			<MetricGrid metrics={ALL} variant="compact" columns={2} />
+		</>
+	);
+}
+
+export function MetricSizesSmMdLg() {
+	return (
+		<>
+			<div className="space-y-3">
+								<Metric data={orders} variant="bordered" size="sm" />
+								<Metric data={orders} variant="bordered" size="md" />
+								<Metric data={orders} variant="bordered" size="lg" />
+							</div>
+		</>
+	);
+}
+
+export function MetricMinimalInlineCopy() {
+	return (
+		<>
+			<div className="flex flex-wrap gap-x-6 gap-y-2 rounded-lg border border-border bg-card p-4">
+								<Metric data={revenue} variant="minimal" />
+								<Metric data={orders} variant="minimal" />
+								<Metric data={customers} variant="minimal" />
+								<Metric data={conversion} variant="minimal" />
+							</div>
+		</>
+	);
+}
+
+export function MetricTrendChipExample() {
+	return (
+		<>
+			<div className="flex flex-wrap items-center gap-3">
+								<MetricTrendChip change={{ value: '12.4%', direction: 'up' }} variant="default" />
+								<MetricTrendChip change={{ value: '12.4%', direction: 'up' }} variant="badge" />
+								<MetricTrendChip change={{ value: '3.2%', direction: 'down' }} variant="badge" />
+								<MetricTrendChip change={{ value: '0%', direction: 'neutral' }} variant="badge" />
+								<MetricTrendChip change={{ value: '5.1%', direction: 'up' }} variant="compact" />
+								<MetricTrendChip change={{ value: '5.1%', direction: 'up' }} variant="inline" />
+							</div>
+		</>
+	);
+}
+
+export function MetricSparklineExample() {
+	return (
+		<>
+			<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+								<div className="rounded-lg border border-border bg-card p-3">
+									<Text size="xxs" type="secondary" weight="medium" className="uppercase tracking-wider">Positive</Text>
+									<div className="mt-1 h-12 w-full">
+										<MetricSparkline data={[120, 140, 132, 158, 167, 180, 198, 220, 240, 248]} trend="positive" />
+									</div>
+								</div>
+								<div className="rounded-lg border border-border bg-card p-3">
+									<Text size="xxs" type="secondary" weight="medium" className="uppercase tracking-wider">Negative</Text>
+									<div className="mt-1 h-12 w-full">
+										<MetricSparkline data={[200, 198, 205, 195, 188, 182, 178, 180, 184, 182]} trend="negative" />
+									</div>
+								</div>
+								<div className="rounded-lg border border-border bg-card p-3">
+									<Text size="xxs" type="secondary" weight="medium" className="uppercase tracking-wider">Neutral</Text>
+									<div className="mt-1 h-12 w-full">
+										<MetricSparkline data={[15, 20, 18, 24, 22, 28, 31, 35, 38, 42, 45, 48]} trend="neutral" />
+									</div>
+								</div>
+							</div>
+		</>
+	);
+}
+
+export function LoadingSkeletons() {
+	return (
+		<>
+			<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+								<MetricSkeleton variant="card" />
+								<MetricSkeleton variant="bordered" />
+								<MetricSkeleton variant="accent" />
+								<MetricSkeleton variant="compact" />
+							</div>
+		</>
+	);
+}
+
+export function LiveLoadingState() {
+	return (
+		<>
+			<MetricGrid metrics={ALL} variant="card" columns={4} loading />
+		</>
+	);
+}
+
+export function ErrorState() {
+	return (
+		<>
+			<Metric data={revenue} variant="card" error errorLabel="Couldn't load this metric" />
+		</>
+	);
+}
+`;function I(e){let t={h4:`h4`,...e.components};return _||R(`Examples`,!1),P||R(`Examples.ErrorState`,!0),N||R(`Examples.LiveLoadingState`,!0),M||R(`Examples.LoadingSkeletons`,!0),w||R(`Examples.MetricBarDefault`,!0),T||R(`Examples.MetricBarGradientFrame`,!0),E||R(`Examples.MetricGridCardVariant`,!0),D||R(`Examples.MetricGridCompactList`,!0),k||R(`Examples.MetricMinimalInlineCopy`,!0),O||R(`Examples.MetricSizesSmMdLg`,!0),j||R(`Examples.MetricSparklineExample`,!0),A||R(`Examples.MetricTrendChipExample`,!0),(0,v.jsxs)(n,{title:`Features · Metrics · Overview`,description:`The unified metrics module: a single Metric component with seven layout variants, plus MetricBar, MetricGrid, and supporting atoms (TrendChip, Sparkline, Skeleton). One MetricData shape powers every surface — see the dedicated pages for each layout.`,layer:`features`,status:`ready`,children:[(0,v.jsxs)(r,{title:`Examples`,id:`examples`,children:[(0,v.jsx)(i,{name:`MetricBarDefault`,source:F,children:(0,v.jsx)(w,{})}),(0,v.jsx)(i,{name:`MetricBarGradientFrame`,source:F,children:(0,v.jsx)(T,{})}),(0,v.jsx)(i,{name:`MetricGridCardVariant`,source:F,children:(0,v.jsx)(E,{})}),(0,v.jsx)(i,{name:`MetricGridCompactList`,source:F,children:(0,v.jsx)(D,{})}),(0,v.jsx)(i,{name:`MetricSizesSmMdLg`,source:F,children:(0,v.jsx)(O,{})}),(0,v.jsx)(i,{name:`MetricMinimalInlineCopy`,source:F,children:(0,v.jsx)(k,{})}),(0,v.jsx)(i,{name:`MetricTrendChipExample`,source:F,children:(0,v.jsx)(A,{})}),(0,v.jsx)(i,{name:`MetricSparklineExample`,source:F,children:(0,v.jsx)(j,{})}),(0,v.jsx)(i,{name:`LoadingSkeletons`,source:F,children:(0,v.jsx)(M,{})}),(0,v.jsx)(i,{name:`LiveLoadingState`,source:F,children:(0,v.jsx)(N,{})}),(0,v.jsx)(i,{name:`ErrorState`,source:F,children:(0,v.jsx)(P,{})})]}),(0,v.jsxs)(r,{title:`API`,id:`api`,children:[(0,v.jsx)(t.h4,{children:`Metric`}),(0,v.jsx)(u,{component:`Metric`}),(0,v.jsx)(t.h4,{children:`MetricBar`}),(0,v.jsx)(u,{component:`MetricBar`}),(0,v.jsx)(t.h4,{children:`MetricGrid`}),(0,v.jsx)(u,{component:`MetricGrid`}),(0,v.jsx)(t.h4,{children:`MetricSkeleton`}),(0,v.jsx)(u,{component:`MetricSkeleton`}),(0,v.jsx)(t.h4,{children:`MetricSparkline`}),(0,v.jsx)(u,{component:`MetricSparkline`}),(0,v.jsx)(t.h4,{children:`MetricTrendChip`}),(0,v.jsx)(u,{component:`MetricTrendChip`})]})]})}function L(e={}){let{wrapper:t}=e.components||{};return t?(0,v.jsx)(t,{...e,children:(0,v.jsx)(I,{...e})}):I(e)}function R(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{L as default};

package/dist/showcase/assets/metrics-stat-cards-PLvMkA0M.js

@@ -0,0 +1,54 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{hr as t,mr as n,t as r}from"./example-BIrQab7K.js";import{s as i}from"./index-Cz4UGUT2.js";import{t as a}from"./props-table-BR-KjRNe.js";import{t as o}from"./metric-guQTLTAa.js";var s=e({MetricAccent:()=>m,MetricColored:()=>h}),c=i(),l=[12,18,15,25,22,30,28,35,32,40,38,45],u=[40,38,35,30,28,25,22,20,18,15,12,10],d={id:`sales`,label:`Total Sales`,value:`52,340 USD`,change:{value:`8.2%`,direction:`up`},subtitle:`vs. last month`,sparkline:l},f={id:`refunds`,label:`Refunds`,value:`1,230 USD`,change:{value:`15.4%`,direction:`down`},subtitle:`3 refunds`,sparkline:u,trend:`negative`},p=[{data:{id:`rev`,label:`Revenue`,value:`124.5K`,subtitle:`Projects`,change:{value:`12.5%`,direction:`up`}},scheme:`primary`,progress:75},{data:{id:`done`,label:`Completed`,value:`892`,subtitle:`Tasks`,change:{value:`5.3%`,direction:`up`}},scheme:`success`,progress:88},{data:{id:`pend`,label:`Pending`,value:`34`,subtitle:`Reviews`,change:{value:`0%`,direction:`neutral`}},scheme:`warning`,progress:42},{data:{id:`visits`,label:`Visits`,value:`18.4K`,subtitle:`This week`,change:{value:`2.1%`,direction:`down`}},scheme:`info`,progress:60}];function m(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsxs)(`div`,{className:`grid gap-4 md:grid-cols-2`,children:[(0,c.jsx)(o,{data:d,variant:`accent`}),(0,c.jsx)(o,{data:f,variant:`accent`})]})})}function h(){return(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(`div`,{className:`grid gap-4 md:grid-cols-2 lg:grid-cols-4`,children:p.map(({data:e,scheme:t,progress:n})=>(0,c.jsx)(o,{data:e,variant:`colored`,colorScheme:t,progress:n},e.id))})})}var g=`import { Metric, type MetricData } from '@/components/composed/analytics';
+
+const UP = [12, 18, 15, 25, 22, 30, 28, 35, 32, 40, 38, 45];
+const DOWN = [40, 38, 35, 30, 28, 25, 22, 20, 18, 15, 12, 10];
+
+const sales: MetricData = {
+	id: 'sales',
+	label: 'Total Sales',
+	value: '52,340 USD',
+	change: { value: '8.2%', direction: 'up' },
+	subtitle: 'vs. last month',
+	sparkline: UP,
+};
+
+const refunds: MetricData = {
+	id: 'refunds',
+	label: 'Refunds',
+	value: '1,230 USD',
+	change: { value: '15.4%', direction: 'down' },
+	subtitle: '3 refunds',
+	sparkline: DOWN,
+	trend: 'negative',
+};
+
+const COLORED: { data: MetricData; scheme: 'primary' | 'success' | 'warning' | 'info'; progress: number }[] = [
+	{ data: { id: 'rev', label: 'Revenue', value: '124.5K', subtitle: 'Projects', change: { value: '12.5%', direction: 'up' } }, scheme: 'primary', progress: 75 },
+	{ data: { id: 'done', label: 'Completed', value: '892', subtitle: 'Tasks', change: { value: '5.3%', direction: 'up' } }, scheme: 'success', progress: 88 },
+	{ data: { id: 'pend', label: 'Pending', value: '34', subtitle: 'Reviews', change: { value: '0%', direction: 'neutral' } }, scheme: 'warning', progress: 42 },
+	{ data: { id: 'visits', label: 'Visits', value: '18.4K', subtitle: 'This week', change: { value: '2.1%', direction: 'down' } }, scheme: 'info', progress: 60 },
+];
+
+export function MetricAccent() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2">
+								<Metric data={sales} variant="accent" />
+								<Metric data={refunds} variant="accent" />
+							</div>
+		</>
+	);
+}
+
+export function MetricColored() {
+	return (
+		<>
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+								{COLORED.map(({ data, scheme, progress }) => (
+									<Metric key={data.id} data={data} variant="colored" colorScheme={scheme} progress={progress} />
+								))}
+							</div>
+		</>
+	);
+}
+`;function _(e){let i={h4:`h4`,...e.components};return s||y(`Examples`,!1),m||y(`Examples.MetricAccent`,!0),h||y(`Examples.MetricColored`,!0),(0,c.jsxs)(t,{title:`Features · Metrics · Stat cards`,description:"Two stat tile flavors built from the unified `Metric` component — `accent` (dark surface + sparkline) and `colored` (segmented progress bar).",layer:`features`,status:`ready`,children:[(0,c.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,c.jsx)(r,{name:`MetricAccent`,source:g,children:(0,c.jsx)(m,{})}),(0,c.jsx)(r,{name:`MetricColored`,source:g,children:(0,c.jsx)(h,{})})]}),(0,c.jsxs)(n,{title:`API`,id:`api`,children:[(0,c.jsx)(i.h4,{children:`Metric`}),(0,c.jsx)(a,{component:`Metric`})]})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(_,{...e})}):_(e)}function y(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{v as default};

package/dist/showcase/assets/minus-OyRBql2C.js

@@ -0,0 +1 @@
+import{a as e}from"./index-Cz4UGUT2.js";var t=e(`minus`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}]]);export{t};

package/dist/showcase/assets/money-display-23DKz-jK.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Br as n,Er as r,Wr as i}from"./example-BIrQab7K.js";import{n as a,s as o}from"./index-Cz4UGUT2.js";var s=e(t(),1);function c(e){let t=n(),{defaultCurrency:r,displayCurrency:i,locale:a,dualPricingEnabled:o,displayMode:c,dualPricingDisplay:l,formatMode:u}=(0,s.useMemo)(()=>{let n={...t,...e},r=n.defaultCurrency??`USD`;return{defaultCurrency:r,displayCurrency:n.displayCurrency??r,locale:n.locale,dualPricingEnabled:n.dualPricingEnabled??!1,displayMode:n.displayMode??`default_only`,dualPricingDisplay:n.dualPricingDisplay??`lines`,formatMode:n.formatMode??`with_code`}},[t,e]);return{defaultCurrency:r,displayCurrency:i,dualPricingEnabled:o,displayMode:c,dualPricingDisplay:l,formatMode:u,shouldShowDualPricing:()=>o?c===`dual`:!1,formatAmount:(e,t,n)=>{let r=typeof e==`string`?parseFloat(e):e;if(!Number.isFinite(r))return t?`${String(e)} ${t}`.trim():String(e);let i=new Intl.NumberFormat(a,{minimumFractionDigits:2,maximumFractionDigits:2}).format(r);switch(u){case`decimal`:return i;case`with_code`:return t?`${i} ${t}`:i;case`with_symbol`:return n?`${n}${i}`:t?`${i} ${t}`:i;case`locale_aware`:if(!t)return i;try{return new Intl.NumberFormat(a,{style:`currency`,currency:t}).format(r)}catch{return`${i} ${t}`}default:return t?`${i} ${t}`:i}},getCurrencySymbol:e=>({BGN:`лв`,EUR:`€`,USD:`$`,GBP:`£`,JPY:`¥`})[e]??e}}var l=o(),u=e=>{if(e==null)return null;let t=typeof e==`number`?e:Number.parseFloat(String(e).trim());return Number.isFinite(t)?t:null},d=e=>{let t=u(e?.value);return t===null?null:{value:t,currency:e?.currency?String(e.currency):null,symbol:e?.symbol?String(e.symbol):null}},f=e=>{let t=u(e?.amount);return t===null?null:{value:t,currency:e?.currency?String(e.currency):null,symbol:null}},p=e=>{let t=u(e?.amount);return t===null?null:{value:t,currency:e?.currency?String(e.currency):null,symbol:null}};function m({money:e,moneyPair:t,amount:n,pair:o,showPair:s=!1,dualPricingDisplay:u,alignment:m,emptyLabel:h=`—`,variant:g=`default`,secondaryEmphasis:_=`discrete`,className:v,size:y,align:b=`right`,weight:x=`medium`,tag:S=`span`,...C}){let{defaultTextSize:w}=i(),T=y??w??`sm`,{displayCurrency:E,dualPricingDisplay:D,shouldShowDualPricing:O,formatAmount:k,getCurrencySymbol:A}=c(),j=u??D??`lines`,M=(O()||s)&&t?.primary?f(t.primary):null,N=f(e),P=d(n),F=M??N??P??null,I=F?.currency??E??null,L=(s||O())&&!!(t??o??e?.pair),R=g===`minimal`||_===`hidden`?null:(()=>{if(!L)return null;if(t?.primary&&t?.secondary)return f(t.secondary);if(e?.pair)return p(e.pair);if(o?.source||o?.target){let e=d(o?.source??null),t=d(o?.target??null);if(!e&&!t)return null;let n=e?.currency??null,r=t?.currency??null;return I&&r===I?e:I&&n===I?t:E&&r===E?e:E&&n===E?t:t??e}return null})(),z=m??b,B=z===`left`?`text-left`:z===`center`?`text-center`:`text-right`,V=z===`left`?`justify-start`:z===`center`?`justify-center`:`justify-end`;if(!F)return(0,l.jsx)(r,{tag:S,size:T,type:`secondary`,align:z,className:a(`money-display--component`,`money--display inline-flex flex-col tabular-nums`,B,v),...C,children:h});let H=k(F.value,I??``,F.symbol??(I?A(I):void 0)),U=R?k(R.value,R.currency??``,R.symbol??(R.currency?A(R.currency):void 0)):null,W=_===`match`?T:_===`muted`?`xs`:`xxs`,G=_===`match`?void 0:_===`muted`?`secondary`:`discrete`;return j===`inline`&&U?(0,l.jsxs)(`span`,{className:a(`money--display inline-flex items-baseline gap-1.5 tabular-nums whitespace-nowrap`,V,v),...C,children:[(0,l.jsx)(r,{tag:`span`,size:T,weight:x,children:H}),(0,l.jsx)(r,{tag:`span`,size:`xxs`,type:`discrete`,"aria-hidden":`true`,children:`·`}),(0,l.jsx)(r,{tag:`span`,size:W,type:G,weight:`regular`,children:U})]}):(0,l.jsxs)(r,{tag:S,size:T,align:z,className:a(`money--display inline-flex flex-col tabular-nums leading-tight`,B,v),...C,children:[(0,l.jsx)(r,{tag:`span`,size:T,weight:x,children:H}),!!U&&(0,l.jsx)(r,{tag:`span`,size:W,align:z,type:G,className:`block whitespace-nowrap font-normal leading-tight`,children:U})]})}m.displayName=`MoneyDisplay`;export{c as n,m as t};

package/dist/showcase/assets/month-year-picker-oEoInnKW.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{t as n}from"./format-bDaUGCSP.js";import{Er as r,r as i}from"./example-BIrQab7K.js";import{t as a}from"./calendar-DTgagmt7.js";import{k as o,n as s,s as c,u as ee}from"./index-Cz4UGUT2.js";import{a as l,i as u,n as d,o as f,t as p}from"./select-BG_Iad8E.js";import{t as m}from"./label-BlCKlLE-.js";import{i as h,t as g}from"./popover-BSB11Qjp.js";import{t as _}from"./popover-CECpX3MQ.js";import{a as v,n as y,o as b,r as x}from"./date-picker-CbYq8wZ7.js";var S=e(t(),1),C=c();function w({value:e,defaultValue:t,onChange:c,format:w=`yyyy-MM`,readableFormat:T=`MMMM yyyy`,placeholder:E,label:D,hint:O,error:k,disabled:A=!1,className:j,closeOnSelect:M=!0,translations:N,strings:P,locale:F,header:I,footer:L,fromYear:R,toYear:z}){let B=new Date().getFullYear(),[V,H]=S.useState(!1),[U,W]=S.useState(e??t),G=F??ee,K=o(x,P??N),q=S.useId(),J=S.useMemo(()=>{let e=R??2017,t=z??2035;return Array.from({length:t-e+1},(t,n)=>e+n)},[R,z]),Y=S.useMemo(()=>Array.from({length:12},(e,t)=>n(new Date(2e3,t,1),`MMMM`,{locale:G})),[G]);S.useEffect(()=>{e!==void 0&&W(e)},[e]);let X=S.useCallback((e,t)=>{let r=new Date(t,e,1);return{month:e,year:t,formatted:n(r,w),readable:n(r,T,{locale:G}),date:r}},[w,T,G]),Z=S.useCallback(e=>{W({month:parseInt(String(e),10),year:U?.year??B})},[U?.year,B]),Q=S.useCallback(e=>{let t=parseInt(String(e),10);W({month:U?.month??0,year:t})},[U?.month]),te=S.useCallback(()=>{U&&(c?.(X(U.month,U.year)),M&&H(!1))},[U,c,X,M]),$=S.useMemo(()=>U?n(new Date(U.year,U.month,1),T,{locale:G}):E??K.selectMonthYear,[U,T,G,E,K.selectMonthYear]);return(0,C.jsxs)(`div`,{className:s(`month-year-picker--component`,`flex flex-col gap-2`,j),children:[!!D&&(0,C.jsx)(m,{htmlFor:q,className:s(k&&`text-destructive`),children:D}),(0,C.jsxs)(g,{open:V,onOpenChange:H,children:[(0,C.jsx)(h,{render:e=>(0,C.jsxs)(i,{...e,id:q,variant:`secondary`,buttonStyle:`outline`,"aria-invalid":!!k,className:s(`w-full justify-start text-left font-normal`,y,!U&&`text-muted-foreground`,e.className),disabled:A,children:[(0,C.jsx)(a,{className:`mr-2 h-4 w-4`}),$]})}),(0,C.jsxs)(_,{className:`w-80 p-0`,align:`start`,children:[!!I&&(0,C.jsx)(v,{config:I}),(0,C.jsxs)(`div`,{className:`p-4 space-y-4`,children:[(0,C.jsxs)(`div`,{className:`space-y-2`,children:[(0,C.jsx)(m,{htmlFor:`month-select`,children:K.month}),(0,C.jsxs)(p,{value:U?.month?.toString(),onValueChange:Z,disabled:A,children:[(0,C.jsx)(l,{id:`month-select`,className:`w-full`,children:(0,C.jsx)(f,{placeholder:K.month})}),(0,C.jsx)(d,{children:Y.map((e,t)=>(0,C.jsx)(u,{value:t.toString(),children:e},e))})]})]}),(0,C.jsxs)(`div`,{className:`space-y-2`,children:[(0,C.jsx)(m,{htmlFor:`year-select`,children:K.year}),(0,C.jsxs)(p,{value:U?.year?.toString(),onValueChange:Q,disabled:A,children:[(0,C.jsx)(l,{id:`year-select`,className:`w-full`,children:(0,C.jsx)(f,{placeholder:K.year})}),(0,C.jsx)(d,{children:J.map(e=>(0,C.jsx)(u,{value:e.toString(),children:e},e))})]})]})]}),(0,C.jsx)(`div`,{className:`p-4 pt-0`,children:(0,C.jsx)(i,{className:`w-full`,onClick:te,disabled:A||!U,children:K.confirm})}),!!L&&!!U&&(0,C.jsx)(b,{config:L,output:X(U.month,U.year),hasSelection:!!U,autoSummary:$})]})]}),!!k&&(0,C.jsx)(r,{type:`error`,children:k}),!!O&&!k&&(0,C.jsx)(r,{type:`secondary`,children:O})]})}w.displayName=`MonthYearPicker`;export{w as t};