admin-ui-starter-kit 0.6.2 → 0.6.5

package/dist/showcase/assets/metadata-list-BcYg9Ru3.js

@@ -0,0 +1,286 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-C2ovQgbv.js";import{t as ee}from"./badge-check-D7YjWqnm.js";import{t as s}from"./building-2-CwR3gV1I.js";import{t as c}from"./calendar-days-j8QDBUc5.js";import{Dr as l,Or as te,r as ne,t as u}from"./example-CDvNeHNP.js";import{t as d}from"./clock-ByB7C11p.js";import{t as f}from"./credit-card-CN0E6FU8.js";import{t as p}from"./external-link-BaiCqIx3.js";import{t as m}from"./git-branch-DlTTLnjW.js";import{t as h}from"./globe-D-gH7XQ2.js";import{t as g}from"./hash-DySqEhph.js";import{t as _}from"./mail-Cn94c8yp.js";import{t as v}from"./map-pin-BZB9GUXP.js";import{t as y}from"./phone-a4Ja9xAp.js";import{t as b}from"./shield-check-BbzHL-nM.js";import{t as x}from"./user-B9eCi5Vl.js";import{d as re,l as ie}from"./index-B37z19z3.js";import{t as ae}from"./props-table-udnF7Z46.js";import{t as S}from"./smart-card-B0Llbpiy.js";import{r as oe,t as se}from"./avatar-CLBQvnYG.js";import{t as C}from"./metadata-list-B8O2ljIS.js";var w=ie(`tag`,[[`path`,{d:`M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z`,key:`vktsd0`}],[`circle`,{cx:`7.5`,cy:`7.5`,r:`.5`,fill:`currentColor`,key:`kqv944`}]]),T=e({APISurface:()=>z,Dense4ColumnOverview:()=>K,EmptyStateFallbacksCustomRenderers:()=>X,HorizontalPillSummary:()=>J,RowsReceiptStyle:()=>U,RowsTwoColumnWithHairlines:()=>H,RowsWithIconsTooltips:()=>W,SectionedMultiCard:()=>G,Vertical2ColumnNoIcons:()=>B,Vertical3ColumnWithIcons:()=>q,VerticalSingleColumnNoIcons:()=>V,WithTitleSeparator:()=>Y}),E=t(n(),1),D=re();function O({value:e,mono:t=!0}){let[n,r]=(0,E.useState)(!1);return(0,D.jsxs)(ne,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:()=>{try{navigator.clipboard.writeText(e)}catch{}r(!0),setTimeout(()=>r(!1),1200)},className:`group -ml-space-sm h-auto gap-space-sm rounded-radius px-space-sm py-space-2xs text-sm shadow-none transition-colors hover:bg-muted/60`,title:`Copy to clipboard`,children:[(0,D.jsx)(a,{tag:`span`,size:`inherit`,weight:`medium`,className:t?`font-mono tabular-nums`:`tabular-nums`,children:e}),n?(0,D.jsx)(te,{className:`size-icon-sm text-success`,"aria-hidden":`true`}):(0,D.jsx)(l,{className:`size-icon-sm text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100`,"aria-hidden":`true`})]})}function k({initials:e,name:t,sub:n}){return(0,D.jsxs)(`span`,{className:`inline-flex items-center gap-space-md`,children:[(0,D.jsx)(se,{size:`small`,children:(0,D.jsx)(oe,{className:`text-xxs font-semibold`,children:e})}),(0,D.jsxs)(`span`,{className:`inline-flex flex-col leading-tight`,children:[(0,D.jsx)(a,{tag:`span`,size:`inherit`,weight:`medium`,className:`text-sm`,children:t}),!!n&&(0,D.jsx)(a,{tag:`span`,size:`inherit`,type:`secondary`,className:`text-xs`,children:n})]})]})}var A=[{id:`name`,label:`Name`,value:`Sarah Smitha`},{id:`email`,label:`Email`,value:`maria@example.com`},{id:`role`,label:`Role`,value:`Workspace owner`},{id:`joined`,label:`Joined`,value:`March 14, 2025`},{id:`lastSeen`,label:`Last seen`,value:`2 hours ago`},{id:`timezone`,label:`Timezone`,value:`Europe/New York (UTC+02:00)`}],j=[{id:`sku`,label:`SKU`,icon:g,value:(0,D.jsx)(O,{value:`SP-204-WL`}),tooltip:`Internal stock-keeping unit`},{id:`category`,label:`Category`,icon:w,value:(0,D.jsx)(i,{variant:`secondary`,children:`Wellness`})},{id:`status`,label:`Status`,icon:ee,value:(0,D.jsx)(i,{variant:`success`,children:`Active`})},{id:`created`,label:`Created`,icon:c,value:`Apr 12, 2026`},{id:`updated`,label:`Last updated`,icon:d,value:`Apr 28, 2026 · 14:32`},{id:`version`,label:`Version`,icon:m,value:(0,D.jsx)(O,{value:`v3.2.1`})}],M=[{id:`id`,label:`Booking ID`,value:(0,D.jsx)(O,{value:`BKG-2026-0412`})},{id:`customer`,label:`Customer`,value:(0,D.jsx)(k,{initials:`MP`,name:`Sarah Smitha`,sub:`maria@example.com`})},{id:`experience`,label:`Experience`,value:`Spa Day Voucher`,description:`Wellness · 90 minutes · 2 guests`},{id:`scheduled`,label:`Scheduled for`,value:`Apr 18, 2026 · 14:00`,description:`Confirmed by SMS`},{id:`status`,label:`Status`,value:(0,D.jsx)(i,{variant:`success`,children:`Paid`})},{id:`amount`,label:`Total`,value:(0,D.jsx)(a,{tag:`span`,size:`inherit`,weight:`semibold`,className:`text-sm tabular-nums`,children:`180.00 USD`})}],N=[{id:`sub`,label:`Subtotal`,value:`180.00 USD`},{id:`tax`,label:`VAT (20%)`,value:`36.00 USD`},{id:`discount`,label:`Discount`,value:(0,D.jsx)(a,{tag:`span`,size:`inherit`,weight:`medium`,type:`success`,className:`text-sm tabular-nums`,children:`−25.00 USD`})},{id:`total`,label:`Total`,value:(0,D.jsx)(a,{tag:`span`,size:`inherit`,weight:`bold`,className:`text-sm tabular-nums`,children:`191.00 USD`})}],P=[{id:`name`,label:`Name`,icon:x,value:`Sarah Smitha`},{id:`email`,label:`Email`,icon:_,value:(0,D.jsx)(O,{value:`maria@example.com`,mono:!1})},{id:`phone`,label:`Phone`,icon:y,value:(0,D.jsx)(O,{value:`+1 888 123 456`})},{id:`address`,label:`Address`,icon:v,value:`ul. Vitosha 24, New York 1000`,description:`USA`}],F=[{id:`card`,label:`Card`,icon:f,value:`Visa ending 4242`},{id:`billing`,label:`Billing address`,icon:s,value:`ul. Slavyanska 9, Los Angeles`},{id:`verified`,label:`Verified`,icon:b,value:(0,D.jsx)(i,{variant:`success`,children:`Yes`})}],I=[{id:`created`,label:`Created`,value:`Apr 12, 2026`},{id:`by`,label:`By`,value:`Sarah P.`},{id:`version`,label:`Version`,value:`v3.2.1`},{id:`env`,label:`Env`,value:`production`}],L=[{id:`sku`,label:`SKU`,value:`SP-204-WL`},{id:`isbn`,label:`ISBN`,value:null,emptyLabel:`Not assigned`},{id:`barcode`,label:`Barcode`,value:void 0},{id:`website`,label:`Website`,icon:h,render:()=>(0,D.jsxs)(`a`,{href:`#`,className:`inline-flex items-center gap-space-sm text-primary hover:underline`,children:[(0,D.jsx)(a,{tag:`span`,size:`inherit`,weight:`medium`,className:`text-sm`,children:`example.com`}),(0,D.jsx)(p,{className:`size-icon-sm`,"aria-hidden":`true`})]})}],R=[{id:`plan`,label:`Plan`,value:`Pro Annual`},{id:`seats`,label:`Seats`,value:`12 / 50`},{id:`next`,label:`Next billing`,value:`May 12, 2026`}];function z(){return(0,D.jsxs)(a,{type:`secondary`,className:`max-w-2xl`,children:[`Each item is `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }`}),`. List-level props choose `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`layout`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`columns`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`dense`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`title`}),`, `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`titleSeparator`}),`, and `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`separator`}),`. Per-item `,(0,D.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xxs`,children:`render`}),` is for status pills, copyable IDs, links, and inline edit affordances.`]})}function B(){return(0,D.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,D.jsx)(S,{title:`Account details`,padding:`default`,children:(0,D.jsx)(C,{items:A,columns:2})})})}function V(){return(0,D.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,D.jsx)(S,{title:`Profile`,children:(0,D.jsx)(C,{items:A.slice(0,4),columns:1})})})}function H(){return(0,D.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,D.jsx)(S,{title:`Booking #BKG-2026-0412`,padding:`default`,children:(0,D.jsx)(C,{items:M,layout:`rows`})})})}function U(){return(0,D.jsx)(`div`,{className:`w-full max-w-sm`,children:(0,D.jsx)(S,{title:`Receipt`,padding:`small`,children:(0,D.jsx)(C,{items:N,layout:`rows`,dense:!0})})})}function W(){return(0,D.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,D.jsx)(S,{title:`Product details`,padding:`default`,children:(0,D.jsx)(C,{items:j,layout:`rows`})})})}function G(){return(0,D.jsxs)(`div`,{className:`grid w-full max-w-4xl gap-space-lg lg:grid-cols-2`,children:[(0,D.jsx)(S,{title:`Customer`,children:(0,D.jsx)(C,{items:P,layout:`rows`})}),(0,D.jsx)(S,{title:`Payment`,children:(0,D.jsx)(C,{items:F,layout:`rows`})})]})}function K(){return(0,D.jsx)(`div`,{className:`w-full max-w-4xl`,children:(0,D.jsx)(S,{title:`Dense overview`,padding:`small`,children:(0,D.jsx)(C,{items:j,columns:4,dense:!0})})})}function q(){return(0,D.jsx)(`div`,{className:`w-full max-w-4xl`,children:(0,D.jsx)(S,{title:`Product overview`,children:(0,D.jsx)(C,{items:j,columns:3})})})}function J(){return(0,D.jsxs)(`div`,{className:`grid w-full max-w-3xl gap-space-md`,children:[(0,D.jsx)(S,{padding:`small`,children:(0,D.jsx)(C,{items:I,layout:`horizontal`,separator:`·`})}),(0,D.jsx)(S,{padding:`small`,children:(0,D.jsx)(C,{items:I,layout:`horizontal`,separator:`:`,itemSeparator:!0})}),(0,D.jsx)(S,{padding:`small`,surface:`flat`,className:`rounded-lg bg-muted/30`,children:(0,D.jsx)(C,{items:R,layout:`horizontal`,separator:`:`,itemSeparator:`•`})})]})}function Y(){return(0,D.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,D.jsx)(C,{title:`Inventory metadata`,titleSeparator:!0,items:j,columns:2})})}function X(){return(0,D.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,D.jsx)(S,{title:`Mixed`,padding:`default`,children:(0,D.jsx)(C,{items:L,layout:`rows`})})})}var Z=`import { useState } from 'react';
+import {
+	BadgeCheck,
+	Building2,
+	CalendarDays,
+	Check,
+	Clock,
+	Copy,
+	CreditCard,
+	ExternalLink,
+	GitBranch,
+	Globe,
+	Hash,
+	Mail,
+	MapPin,
+	Phone,
+	ShieldCheck,
+	Tag,
+	User,
+} from 'lucide-react';
+import { Avatar, AvatarFallback } from '@/components/base/display/avatar';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { MetadataList, type MetadataListItem } from '@/components/composed/data-display/metadata';
+import { Text } from '@/components/typography';
+
+// ─── Helpers ────────────────────────────────────────────────────────────
+
+function CopyableValue({ value, mono = true }: { value: string; mono?: boolean }) {
+	const [copied, setCopied] = useState(false);
+	return (
+		<Button
+			type="button"
+			variant="secondary"
+			buttonStyle="ghost"
+			size="small"
+			onClick={() => {
+				try { navigator.clipboard.writeText(value); } catch { /* ignore */ }
+				setCopied(true);
+				setTimeout(() => setCopied(false), 1200);
+			}}
+			className="group -ml-space-sm h-auto gap-space-sm rounded-radius px-space-sm py-space-2xs text-sm shadow-none transition-colors hover:bg-muted/60"
+			title="Copy to clipboard"
+		>
+			<Text tag="span" size="inherit" weight="medium" className={mono ? 'font-mono tabular-nums' : 'tabular-nums'}>{value}</Text>
+			{copied ? (
+				<Check className="size-icon-sm text-success" aria-hidden="true" />
+			) : (
+				<Copy className="size-icon-sm text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" aria-hidden="true" />
+			)}
+		</Button>
+	);
+}
+
+function PersonValue({ initials, name, sub }: { initials: string; name: string; sub?: string; src?: string }) {
+	return (
+		<span className="inline-flex items-center gap-space-md">
+			<Avatar size="small">
+				<AvatarFallback className="text-xxs font-semibold">{initials}</AvatarFallback>
+			</Avatar>
+			<span className="inline-flex flex-col leading-tight">
+				<Text tag="span" size="inherit" weight="medium" className="text-sm">{name}</Text>
+				{!!sub && <Text tag="span" size="inherit" type="secondary" className="text-xs">{sub}</Text>}
+			</span>
+		</span>
+	);
+}
+
+// ─── Datasets ───────────────────────────────────────────────────────────
+
+const SIMPLE_NO_ICONS: MetadataListItem[] = [
+	{ id: 'name', label: 'Name', value: 'Sarah Smitha' },
+	{ id: 'email', label: 'Email', value: 'maria@example.com' },
+	{ id: 'role', label: 'Role', value: 'Workspace owner' },
+	{ id: 'joined', label: 'Joined', value: 'March 14, 2025' },
+	{ id: 'lastSeen', label: 'Last seen', value: '2 hours ago' },
+	{ id: 'timezone', label: 'Timezone', value: 'Europe/New York (UTC+02:00)' },
+];
+
+const ENTITY_WITH_ICONS: MetadataListItem[] = [
+	{ id: 'sku', label: 'SKU', icon: Hash, value: <CopyableValue value="SP-204-WL" />, tooltip: 'Internal stock-keeping unit' },
+	{ id: 'category', label: 'Category', icon: Tag, value: <Badge variant="secondary">Wellness</Badge> },
+	{ id: 'status', label: 'Status', icon: BadgeCheck, value: <Badge variant="success">Active</Badge> },
+	{ id: 'created', label: 'Created', icon: CalendarDays, value: 'Apr 12, 2026' },
+	{ id: 'updated', label: 'Last updated', icon: Clock, value: 'Apr 28, 2026 · 14:32' },
+	{ id: 'version', label: 'Version', icon: GitBranch, value: <CopyableValue value="v3.2.1" /> },
+];
+
+const ROW_DETAIL: MetadataListItem[] = [
+	{ id: 'id', label: 'Booking ID', value: <CopyableValue value="BKG-2026-0412" /> },
+	{ id: 'customer', label: 'Customer', value: <PersonValue initials="MP" name="Sarah Smitha" sub="maria@example.com" /> },
+	{ id: 'experience', label: 'Experience', value: 'Spa Day Voucher', description: 'Wellness · 90 minutes · 2 guests' },
+	{ id: 'scheduled', label: 'Scheduled for', value: 'Apr 18, 2026 · 14:00', description: 'Confirmed by SMS' },
+	{ id: 'status', label: 'Status', value: <Badge variant="success">Paid</Badge> },
+	{ id: 'amount', label: 'Total', value: <Text tag="span" size="inherit" weight="semibold" className="text-sm tabular-nums">180.00 USD</Text> },
+];
+
+const RECEIPT_ROWS: MetadataListItem[] = [
+	{ id: 'sub', label: 'Subtotal', value: '180.00 USD' },
+	{ id: 'tax', label: 'VAT (20%)', value: '36.00 USD' },
+	{ id: 'discount', label: 'Discount', value: <Text tag="span" size="inherit" weight="medium" type="success" className="text-sm tabular-nums">−25.00 USD</Text> },
+	{ id: 'total', label: 'Total', value: <Text tag="span" size="inherit" weight="bold" className="text-sm tabular-nums">191.00 USD</Text> },
+];
+
+const CONTACT_META: MetadataListItem[] = [
+	{ id: 'name', label: 'Name', icon: User, value: 'Sarah Smitha' },
+	{ id: 'email', label: 'Email', icon: Mail, value: <CopyableValue value="maria@example.com" mono={false} /> },
+	{ id: 'phone', label: 'Phone', icon: Phone, value: <CopyableValue value="+1 888 123 456" /> },
+	{ id: 'address', label: 'Address', icon: MapPin, value: 'ul. Vitosha 24, New York 1000', description: 'USA' },
+];
+
+const PAYMENT_META: MetadataListItem[] = [
+	{ id: 'card', label: 'Card', icon: CreditCard, value: 'Visa ending 4242' },
+	{ id: 'billing', label: 'Billing address', icon: Building2, value: 'ul. Slavyanska 9, Los Angeles' },
+	{ id: 'verified', label: 'Verified', icon: ShieldCheck, value: <Badge variant="success">Yes</Badge> },
+];
+
+const PILL_META: MetadataListItem[] = [
+	{ id: 'created', label: 'Created', value: 'Apr 12, 2026' },
+	{ id: 'by', label: 'By', value: 'Sarah P.' },
+	{ id: 'version', label: 'Version', value: 'v3.2.1' },
+	{ id: 'env', label: 'Env', value: 'production' },
+];
+
+const EMPTY_META: MetadataListItem[] = [
+	{ id: 'sku', label: 'SKU', value: 'SP-204-WL' },
+	{ id: 'isbn', label: 'ISBN', value: null, emptyLabel: 'Not assigned' },
+	{ id: 'barcode', label: 'Barcode', value: undefined },
+	{ id: 'website', label: 'Website', icon: Globe, render: () => (
+		<a href="#" className="inline-flex items-center gap-space-sm text-primary hover:underline">
+			<Text tag="span" size="inherit" weight="medium" className="text-sm">example.com</Text>
+			<ExternalLink className="size-icon-sm" aria-hidden="true" />
+		</a>
+	) },
+];
+
+const SHORT_PROFILE: MetadataListItem[] = [
+	{ id: 'plan', label: 'Plan', value: 'Pro Annual' },
+	{ id: 'seats', label: 'Seats', value: '12 / 50' },
+	{ id: 'next', label: 'Next billing', value: 'May 12, 2026' },
+];
+
+export function APISurface() {
+	return (
+		<Text type="secondary" className="max-w-2xl">
+			Each item is <code className="rounded bg-muted px-1 py-0.5 text-xxs">{'{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }'}</code>.
+			List-level props choose <code className="rounded bg-muted px-1 py-0.5 text-xxs">layout</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">columns</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">dense</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">title</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">titleSeparator</code>, and <code className="rounded bg-muted px-1 py-0.5 text-xxs">separator</code>. Per-item <code className="rounded bg-muted px-1 py-0.5 text-xxs">render</code> is for status pills, copyable IDs, links, and inline edit affordances.
+		</Text>
+	);
+}
+
+export function Vertical2ColumnNoIcons() {
+	return (
+		<div className="w-full max-w-3xl">
+			<SmartCard title="Account details" padding="default">
+				<MetadataList items={SIMPLE_NO_ICONS} columns={2} />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function VerticalSingleColumnNoIcons() {
+	return (
+		<div className="w-full max-w-sm">
+			<SmartCard title="Profile">
+				<MetadataList items={SIMPLE_NO_ICONS.slice(0, 4)} columns={1} />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function RowsTwoColumnWithHairlines() {
+	return (
+		<div className="w-full max-w-3xl">
+			<SmartCard title="Booking #BKG-2026-0412" padding="default">
+				<MetadataList items={ROW_DETAIL} layout="rows" />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function RowsReceiptStyle() {
+	return (
+		<div className="w-full max-w-sm">
+			<SmartCard title="Receipt" padding="small">
+				<MetadataList items={RECEIPT_ROWS} layout="rows" dense />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function RowsWithIconsTooltips() {
+	return (
+		<div className="w-full max-w-3xl">
+			<SmartCard title="Product details" padding="default">
+				<MetadataList items={ENTITY_WITH_ICONS} layout="rows" />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function SectionedMultiCard() {
+	return (
+		<div className="grid w-full max-w-4xl gap-space-lg lg:grid-cols-2">
+			<SmartCard title="Customer">
+				<MetadataList items={CONTACT_META} layout="rows" />
+			</SmartCard>
+			<SmartCard title="Payment">
+				<MetadataList items={PAYMENT_META} layout="rows" />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function Dense4ColumnOverview() {
+	return (
+		<div className="w-full max-w-4xl">
+			<SmartCard title="Dense overview" padding="small">
+				<MetadataList items={ENTITY_WITH_ICONS} columns={4} dense />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function Vertical3ColumnWithIcons() {
+	return (
+		<div className="w-full max-w-4xl">
+			<SmartCard title="Product overview">
+				<MetadataList items={ENTITY_WITH_ICONS} columns={3} />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function HorizontalPillSummary() {
+	return (
+		<div className="grid w-full max-w-3xl gap-space-md">
+			<SmartCard padding="small">
+				<MetadataList items={PILL_META} layout="horizontal" separator="·" />
+			</SmartCard>
+			<SmartCard padding="small">
+				<MetadataList items={PILL_META} layout="horizontal" separator=":" itemSeparator />
+			</SmartCard>
+			<SmartCard padding="small" surface="flat" className="rounded-lg bg-muted/30">
+				<MetadataList items={SHORT_PROFILE} layout="horizontal" separator=":" itemSeparator="•" />
+			</SmartCard>
+		</div>
+	);
+}
+
+export function WithTitleSeparator() {
+	return (
+		<div className="w-full max-w-3xl">
+			<MetadataList
+				title="Inventory metadata"
+				titleSeparator
+				items={ENTITY_WITH_ICONS}
+				columns={2}
+			/>
+		</div>
+	);
+}
+
+export function EmptyStateFallbacksCustomRenderers() {
+	return (
+		<div className="w-full max-w-3xl">
+			<SmartCard title="Mixed" padding="default">
+				<MetadataList items={EMPTY_META} layout="rows" />
+			</SmartCard>
+		</div>
+	);
+}
+`;function Q(e){let t={code:`code`,p:`p`,pre:`pre`,...e.components};return T||$(`Examples`,!1),z||$(`Examples.APISurface`,!0),K||$(`Examples.Dense4ColumnOverview`,!0),X||$(`Examples.EmptyStateFallbacksCustomRenderers`,!0),J||$(`Examples.HorizontalPillSummary`,!0),U||$(`Examples.RowsReceiptStyle`,!0),H||$(`Examples.RowsTwoColumnWithHairlines`,!0),W||$(`Examples.RowsWithIconsTooltips`,!0),G||$(`Examples.SectionedMultiCard`,!0),B||$(`Examples.Vertical2ColumnNoIcons`,!0),q||$(`Examples.Vertical3ColumnWithIcons`,!0),V||$(`Examples.VerticalSingleColumnNoIcons`,!0),Y||$(`Examples.WithTitleSeparator`,!0),(0,D.jsxs)(r,{title:`Metadata list`,description:`Flexible label/value list for entity metadata. Three layouts (vertical grid, horizontal pills, two-column rows), per-item icons, tooltips, descriptions, and custom renderers — with first-class empty-state handling.`,layer:`base`,status:`ready`,sourcePath:`src/components/composed/data-display/metadata`,children:[(0,D.jsxs)(o,{title:`Overview`,id:`overview`,children:[(0,D.jsxs)(t.p,{children:[(0,D.jsx)(t.code,{children:`MetadataList`}),` renders an array of `,(0,D.jsx)(t.code,{children:`{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }`}),` items. List-level props pick the
+`,(0,D.jsx)(t.code,{children:`layout`}),` (`,(0,D.jsx)(t.code,{children:`vertical`}),` / `,(0,D.jsx)(t.code,{children:`rows`}),` / `,(0,D.jsx)(t.code,{children:`horizontal`}),`), the `,(0,D.jsx)(t.code,{children:`columns`}),` count (1–4),
+and density. Per-item `,(0,D.jsx)(t.code,{children:`render`}),` escapes the default formatting for status
+pills, copyable IDs, links, or inline edits.`]}),(0,D.jsxs)(t.p,{children:[`Spacing and icon rhythm are driven by the shared structural variables:
+`,(0,D.jsx)(t.code,{children:`--space-*`}),`, `,(0,D.jsx)(t.code,{children:`--icon*`}),`, `,(0,D.jsx)(t.code,{children:`--row-y`}),`, `,(0,D.jsx)(t.code,{children:`--surface-*`}),`, and the matching Tailwind
+aliases. Use `,(0,D.jsx)(t.code,{children:`dense`}),` for a local presentation choice; use CSS variables for
+system-wide metadata density.`]})]}),(0,D.jsxs)(o,{title:`Consumer usage`,id:`usage`,children:[(0,D.jsx)(t.p,{children:`Consumers import metadata primitives from the exact nested package entrypoint:`}),(0,D.jsx)(t.pre,{children:(0,D.jsx)(t.code,{className:`language-tsx`,children:`import { MetadataList } from 'admin-ui-starter-kit/composed/data-display';
+`})}),(0,D.jsxs)(t.p,{children:[`Use `,(0,D.jsx)(t.code,{children:`MetadataList`}),` for compact facts about a single entity: label/value
+attributes, receipt rows, account properties, audit details, or operational
+summaries. It is intentionally read-heavy and scan-first.`]}),(0,D.jsxs)(t.p,{children:[`Use `,(0,D.jsx)(t.code,{children:`Item`}),` instead when each row represents a separate object or action with a
+title stack, media, and trailing controls. Use `,(0,D.jsx)(t.code,{children:`FormField`}),` when the row contains
+an editable input. Metadata is for describing an entity; Item is for listing
+entities or actions.`]})]}),(0,D.jsx)(o,{title:`API surface`,id:`api-surface`,children:(0,D.jsx)(u,{name:`APISurface`,source:Z,children:(0,D.jsx)(z,{})})}),(0,D.jsxs)(o,{title:`Vertical grid`,id:`vertical`,children:[(0,D.jsx)(u,{name:`Vertical2ColumnNoIcons`,source:Z,children:(0,D.jsx)(B,{})}),(0,D.jsx)(u,{name:`VerticalSingleColumnNoIcons`,source:Z,children:(0,D.jsx)(V,{})}),(0,D.jsx)(u,{name:`Vertical3ColumnWithIcons`,source:Z,children:(0,D.jsx)(q,{})}),(0,D.jsx)(u,{name:`Dense4ColumnOverview`,source:Z,children:(0,D.jsx)(K,{})})]}),(0,D.jsxs)(o,{title:`Two-column rows`,id:`rows`,children:[(0,D.jsx)(u,{name:`RowsTwoColumnWithHairlines`,source:Z,children:(0,D.jsx)(H,{})}),(0,D.jsx)(u,{name:`RowsReceiptStyle`,source:Z,children:(0,D.jsx)(U,{})}),(0,D.jsx)(u,{name:`RowsWithIconsTooltips`,source:Z,children:(0,D.jsx)(W,{})})]}),(0,D.jsx)(o,{title:`Horizontal pills`,id:`horizontal`,children:(0,D.jsx)(u,{name:`HorizontalPillSummary`,source:Z,children:(0,D.jsx)(J,{})})}),(0,D.jsxs)(o,{title:`Composition`,id:`composition`,children:[(0,D.jsx)(u,{name:`SectionedMultiCard`,source:Z,children:(0,D.jsx)(G,{})}),(0,D.jsx)(u,{name:`WithTitleSeparator`,source:Z,children:(0,D.jsx)(Y,{})}),(0,D.jsx)(u,{name:`EmptyStateFallbacksCustomRenderers`,source:Z,children:(0,D.jsx)(X,{})})]}),(0,D.jsx)(o,{title:`API`,id:`api`,children:(0,D.jsx)(ae,{component:`MetadataList`})})]})}function ce(e={}){let{wrapper:t}=e.components||{};return t?(0,D.jsx)(t,{...e,children:(0,D.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{ce as default};

package/dist/showcase/assets/metric-HzQnjCpO.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{f as n,p as r}from"./section-C2ovQgbv.js";import{t as i}from"./arrow-up-right-BSWGQVDB.js";import{d as a,n as o}from"./index-B37z19z3.js";import{t as s}from"./smart-card-B0Llbpiy.js";import{Zn as c,t as l,u}from"./AreaChart-WJREayr9.js";import{t as d}from"./analytics.strings-B9262Jmq.js";import{n as f,t as p}from"./format-metric-value-BTsvOjZQ.js";import{t as m}from"./metric-trend-chip-DqYH_U8e.js";var h=e(t(),1),g=a(),_={positive:`var(--success)`,negative:`var(--destructive)`,neutral:`var(--muted-foreground)`};function v({data:e,trend:t=`neutral`,color:n,className:r,animated:i=!0,"aria-label":a=`Trend sparkline`}){let s=(0,h.useId)(),d=(0,h.useMemo)(()=>`metric-spark-${s.replaceAll(`:`,``)}`,[s]),f=n??_[t],p=(0,h.useMemo)(()=>!Array.isArray(e)||e.length===0?[]:e.map((e,t)=>({i:t,v:e})),[e]);return p.length===0?(0,g.jsx)(`div`,{className:o(`metric-sparkline--component`,`w-full`,r),"aria-hidden":`true`}):(0,g.jsx)(`div`,{className:o(`w-full`,r),role:`img`,"aria-label":a,children:(0,g.jsx)(c,{width:`100%`,height:`100%`,initialDimension:{width:1,height:1},children:(0,g.jsxs)(l,{data:p,margin:{top:2,right:0,bottom:0,left:0},children:[(0,g.jsx)(`defs`,{children:(0,g.jsxs)(`linearGradient`,{id:d,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,g.jsx)(`stop`,{offset:`0%`,stopColor:f,stopOpacity:.25}),(0,g.jsx)(`stop`,{offset:`100%`,stopColor:f,stopOpacity:0})]})}),(0,g.jsx)(u,{type:`monotone`,dataKey:`v`,stroke:f,strokeWidth:1.75,fill:`url(#${d})`,dot:!1,activeDot:!1,isAnimationActive:i,animationDuration:600})]})})})}v.displayName=`MetricSparkline`;var y=({className:e})=>(0,g.jsx)(`div`,{className:o(`animate-pulse rounded bg-muted`,e)});function b({variant:e=`default`,size:t=`md`,className:n}){let r=t===`sm`?`p-3`:t===`lg`?`p-5`:`p-4`;return e===`card`||e===`bordered`||e===`accent`||e===`colored`?(0,g.jsxs)(`div`,{className:o(`metric-skeleton--component`,`rounded-xl border border-border bg-card shadow-sm`,r,n),"aria-busy":`true`,"aria-live":`polite`,children:[(0,g.jsx)(y,{className:`h-3 w-24`}),(0,g.jsx)(y,{className:o(`mt-3`,t===`lg`?`h-9 w-40`:`h-7 w-32`)}),(0,g.jsx)(y,{className:`mt-2 h-3 w-20`}),(0,g.jsx)(y,{className:`mt-3 h-8 w-full`})]}):e===`compact`?(0,g.jsxs)(`div`,{className:o(`flex items-center gap-3`,n),"aria-busy":`true`,children:[(0,g.jsx)(y,{className:`size-9 rounded-lg`}),(0,g.jsxs)(`div`,{className:`flex-1 space-y-1.5`,children:[(0,g.jsx)(y,{className:`h-3 w-20`}),(0,g.jsx)(y,{className:`h-4 w-28`})]}),(0,g.jsx)(y,{className:`h-5 w-12 rounded-full`})]}):e===`minimal`?(0,g.jsxs)(`div`,{className:o(`inline-flex items-baseline gap-2`,n),"aria-busy":`true`,children:[(0,g.jsx)(y,{className:`h-3 w-12`}),(0,g.jsx)(y,{className:`h-3 w-16`})]}):(0,g.jsxs)(`div`,{className:o(`flex flex-col gap-1.5`,r,n),"aria-busy":`true`,children:[(0,g.jsx)(y,{className:`h-3 w-20`}),(0,g.jsx)(y,{className:`h-5 w-28`}),(0,g.jsx)(y,{className:`mt-1 h-6 w-full`})]})}b.displayName=`MetricSkeleton`;var x={default:{border:`border-border`,bg:`bg-card`,bar:`bg-foreground`,dot:`bg-foreground`,ring:`ring-border`},primary:{border:`border-primary/25`,bg:`bg-primary/5`,bar:`bg-primary`,dot:`bg-primary`,ring:`ring-primary/20`},success:{border:`border-success/30`,bg:`bg-success/5`,bar:`bg-success`,dot:`bg-success`,ring:`ring-success/20`},warning:{border:`border-warning/40`,bg:`bg-warning/10`,bar:`bg-warning`,dot:`bg-warning`,ring:`ring-warning/30`},danger:{border:`border-destructive/30`,bg:`bg-destructive/5`,bar:`bg-destructive`,dot:`bg-destructive`,ring:`ring-destructive/20`},info:{border:`border-info/30`,bg:`bg-info/5`,bar:`bg-info`,dot:`bg-info`,ring:`ring-info/20`}},S={sm:`text-sm`,md:`text-lg`,lg:`text-xl`},C={sm:`text-xl`,md:`text-3xl`,lg:`text-4xl`},w={sm:`h-6`,md:`h-8`,lg:`h-10`},T=16;function E(e){let{data:t,variant:n=`default`,size:i=`md`,colorScheme:a=`default`,showSparkline:s=!0,showChange:c=!0,showIcon:l=!0,loading:u=!1,error:m=!1,errorLabel:_,progress:v=0,className:y,"aria-label":x}=e,S=(0,h.useMemo)(()=>p(t),[t]),C=(0,h.useMemo)(()=>f(t),[t]);if(u)return(0,g.jsx)(b,{variant:n,size:i,className:o(`metric--component`,y)});if(m)return(0,g.jsx)(`div`,{className:o(`flex items-center justify-center rounded-lg border border-border bg-card p-4 text-muted-foreground`,y),children:(0,g.jsx)(r,{children:_??d.metricErrorLabel})});let w={data:t,formattedValue:S,trend:C,size:i,showSparkline:s,showChange:c,showIcon:l,colorScheme:a,ariaLabel:x??t.label,className:y};switch(n){case`card`:return(0,g.jsx)(O,{...w});case`compact`:return(0,g.jsx)(k,{...w});case`minimal`:return(0,g.jsx)(A,{...w});case`bordered`:return(0,g.jsx)(j,{...w});case`accent`:return(0,g.jsx)(M,{...w});case`colored`:return(0,g.jsx)(N,{...w,progress:v});default:return(0,g.jsx)(D,{...w})}}E.displayName=`Metric`;function D({data:e,formattedValue:t,trend:i,size:a,showSparkline:s,showChange:c,showIcon:l,ariaLabel:u,className:d}){let f=e.icon;return(0,g.jsxs)(`div`,{className:o(`flex min-w-0 flex-col gap-1`,d),"aria-label":u,children:[(0,g.jsxs)(`div`,{className:`flex items-center gap-1.5 min-w-0 text-muted-foreground`,children:[!!l&&!!f&&(0,g.jsx)(f,{className:`size-3.5 shrink-0`,"aria-hidden":`true`}),(0,g.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`truncate`,children:e.label})]}),(0,g.jsx)(n,{tag:`h5`,className:o(`font-bold tabular-nums tracking-tight border-none pb-0 leading-tight truncate`,S[a]),title:t,children:t}),!!c&&!!e.change&&(0,g.jsx)(`div`,{className:`min-w-0`,children:(0,g.jsx)(m,{change:e.change,trend:e.trend,size:a,variant:`compact`})}),!!e.subtitle&&(0,g.jsx)(r,{size:`xs`,type:`secondary`,className:`truncate`,children:e.subtitle}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:o(`mt-auto`,w[a])}),!!e.footer&&(0,g.jsx)(r,{size:`xxs`,type:`discrete`,className:`truncate`,children:e.footer})]})}function O({data:e,formattedValue:t,trend:i,size:a,showSparkline:c,showChange:l,showIcon:u,ariaLabel:d,className:f}){let p=e.icon,h=!!(e.href||e.onClick),_=a===`sm`?`small`:`default`,y=(0,g.jsxs)(s,{title:e.label,icon:u&&p?(0,g.jsx)(p,{className:`size-4`,"aria-hidden":`true`}):null,tooltip:e.tooltip,padding:_,className:o(h&&`cursor-pointer transition-shadow hover:shadow-md`,f),"aria-label":d,children:[(0,g.jsxs)(`div`,{className:`flex items-baseline justify-between gap-3`,children:[(0,g.jsx)(n,{tag:a===`sm`?`h5`:a===`lg`?`h3`:`h4`,className:o(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[a]),children:t}),!!l&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:a,variant:`badge`})]}),!!e.subtitle&&(0,g.jsx)(r,{type:`secondary`,className:`mt-2`,children:e.subtitle}),!!c&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:o(`mt-3`,a===`lg`?`h-12`:`h-10`)}),!!e.footer&&(0,g.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-2`,children:e.footer})]});return h&&e.onClick?(0,g.jsx)(`div`,{role:`button`,tabIndex:0,onClick:e.onClick,onKeyDown:t=>(t.key===`Enter`||t.key===` `)&&e.onClick?.(),className:`rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,children:y}):y}function k({data:e,formattedValue:t,size:n,showChange:i,showIcon:a,ariaLabel:s,className:c}){let l=e.icon;return(0,g.jsxs)(`div`,{className:o(`flex items-center gap-3`,c),"aria-label":s,children:[!!a&&!!l&&(0,g.jsx)(`span`,{className:`inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground`,children:(0,g.jsx)(l,{className:`size-4`,"aria-hidden":`true`})}),(0,g.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,g.jsx)(r,{size:`xs`,type:`secondary`,className:`truncate`,children:e.label}),(0,g.jsx)(r,{tag:`span`,size:n===`sm`?`sm`:`lg`,weight:`bold`,className:`block truncate tabular-nums`,children:t})]}),!!i&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:n,variant:`badge`,className:`shrink-0`})]})}function A({data:e,formattedValue:t,size:n,showChange:i,ariaLabel:a,className:s}){return(0,g.jsxs)(`span`,{className:o(`inline-flex items-baseline gap-2`,s),"aria-label":a,children:[(0,g.jsxs)(r,{tag:`span`,size:n===`lg`?`sm`:`xs`,type:`secondary`,children:[e.label,`:`]}),(0,g.jsx)(r,{tag:`span`,size:n===`lg`?`sm`:`xs`,weight:`semibold`,className:`tabular-nums`,children:t}),!!i&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:`sm`,variant:`inline`})]})}function j({data:e,formattedValue:t,trend:i,size:a,showSparkline:s,showChange:c,showIcon:l,colorScheme:u,ariaLabel:d,className:f}){let p=e.icon,h=x[u];return(0,g.jsxs)(`div`,{className:o(`flex flex-col gap-3 rounded-xl border p-4 shadow-sm`,h.border,h.bg,f),"aria-label":d,children:[(0,g.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,g.jsxs)(`div`,{className:`flex items-center gap-2 text-muted-foreground`,children:[!!l&&!!p&&(0,g.jsx)(p,{className:`size-4 shrink-0`,"aria-hidden":`true`}),(0,g.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,children:e.label})]}),!!c&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:a,variant:`badge`})]}),(0,g.jsx)(n,{tag:a===`lg`?`h3`:`h4`,className:o(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[a]),children:t}),!!e.subtitle&&(0,g.jsx)(r,{size:`xs`,type:`secondary`,children:e.subtitle}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:w[a]}),!!e.footer&&(0,g.jsx)(r,{size:`xxs`,type:`discrete`,children:e.footer})]})}function M({data:e,formattedValue:t,trend:i,size:a,showSparkline:s,showChange:c,ariaLabel:l,className:u}){let d=e.icon;return(0,g.jsxs)(`div`,{className:o(`dark relative flex flex-col overflow-hidden rounded-lg bg-card text-card-foreground shadow-sm ring-1 ring-border`,u),"aria-label":l,children:[(0,g.jsxs)(`div`,{className:`flex flex-col gap-2 p-5`,children:[(0,g.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,g.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:e.label}),!!d&&(0,g.jsx)(`span`,{className:`inline-flex size-7 items-center justify-center rounded-lg bg-foreground/[0.08]`,children:(0,g.jsx)(d,{className:`size-3.5 text-muted-foreground`,"aria-hidden":`true`})})]}),(0,g.jsxs)(`div`,{className:`flex items-baseline gap-2.5`,children:[(0,g.jsx)(n,{tag:`h3`,className:o(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none text-foreground`,C[a]),children:t}),!!c&&!!e.change&&(0,g.jsx)(m,{change:e.change,trend:e.trend,size:a,variant:`compact`})]}),!!e.subtitle&&(0,g.jsx)(r,{size:`xs`,type:`secondary`,children:e.subtitle})]}),!!s&&!!e.sparkline?.length&&(0,g.jsx)(v,{data:e.sparkline,trend:i,className:`h-12 w-full`})]})}function N({data:e,formattedValue:t,size:a,showChange:s,colorScheme:c,ariaLabel:l,className:u,progress:d=0}){let f=x[c==="default"?`primary`:c],p=Math.round(Math.min(Math.max(d,0),100)/100*T);return(0,g.jsxs)(`div`,{className:o(`rounded-xl bg-card p-5 shadow-sm border border-border/50`,u),"aria-label":l,children:[(0,g.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,g.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`truncate`,children:e.label}),(0,g.jsx)(`span`,{className:o(`size-1.5 rounded-full shrink-0`,f.dot),"aria-hidden":`true`})]}),(0,g.jsxs)(`div`,{className:`mt-2.5 flex items-baseline gap-2`,children:[(0,g.jsx)(n,{tag:`h3`,className:o(`font-bold tabular-nums tracking-tight border-none pb-0 leading-none`,C[a]),children:t}),!!e.subtitle&&(0,g.jsx)(r,{size:`xs`,type:`secondary`,children:e.subtitle})]}),(0,g.jsx)(`div`,{className:`mt-4 flex items-center gap-0.5`,role:`progressbar`,"aria-label":`${e.label} progress`,"aria-valuenow":d,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":`${d}%`,children:Array.from({length:T},(e,t)=>(0,g.jsx)(`div`,{className:o(`h-6 w-1.5 rounded-sm transition-colors`,t<p?f.bar:`bg-muted`)},`seg-${t}`))}),!!s&&!!e.change&&(0,g.jsx)(`div`,{className:`mt-3`,children:(0,g.jsx)(m,{change:e.change,trend:e.trend,size:a,variant:`default`})}),!!e.footer&&(0,g.jsxs)(`div`,{className:`mt-2 inline-flex items-center gap-1 text-muted-foreground`,children:[(0,g.jsx)(i,{className:`size-3`,"aria-hidden":`true`}),(0,g.jsx)(r,{size:`xxs`,type:`secondary`,children:e.footer})]})]})}export{b as n,v as r,E as t};

package/dist/showcase/assets/metric-bar-Fr1TDnSu.js

@@ -0,0 +1 @@
+import{p as e}from"./section-C2ovQgbv.js";import{t}from"./calendar-Bzl2i1lu.js";import{r as n}from"./example-CDvNeHNP.js";import{d as r,n as i}from"./index-B37z19z3.js";import{t as a}from"./metric-HzQnjCpO.js";var o=r();function s({metrics:r,period:s,onPeriodChange:c,variant:l=`default`,size:u=`sm`,showSparklines:d=!0,showChanges:f=!0,footerText:p,className:m}){let h=(0,o.jsx)(`div`,{className:`grid min-w-0 flex-1 grid-cols-1 divide-y divide-border lg:flex lg:items-stretch lg:divide-x lg:divide-y-0`,children:r.map(e=>(0,o.jsx)(`div`,{className:`min-w-0 px-4 py-2.5 lg:min-w-36 lg:flex-1`,children:(0,o.jsx)(a,{data:e,variant:`default`,size:u,showSparkline:d,showChange:f})},e.id))}),g=!!s&&(0,o.jsx)(`div`,{className:`flex shrink-0 items-center border-b border-border px-3 py-2 lg:border-b-0 lg:py-0`,children:(0,o.jsxs)(n,{variant:`secondary`,buttonStyle:`ghost`,className:`gap-1.5`,onClick:c?()=>c(s.value):void 0,children:[(0,o.jsx)(t,{className:`size-3.5`,"aria-hidden":`true`}),(0,o.jsx)(e,{size:`xs`,weight:`medium`,children:s.label})]})});return l===`gradient`?(0,o.jsxs)(`div`,{className:i(`metric-bar--component`,`w-full`,`rounded-lg bg-gradient-to-r from-primary/8 via-info/5 to-success/8 p-px`,m),children:[(0,o.jsxs)(`div`,{className:`flex min-w-0 flex-col overflow-hidden rounded-radius bg-card lg:flex-row`,children:[g&&(0,o.jsxs)(o.Fragment,{children:[g,(0,o.jsx)(`div`,{className:`hidden w-px bg-border lg:block`,"aria-hidden":`true`})]}),h]}),!!p&&(0,o.jsx)(`div`,{className:`rounded-b-radius border-t border-border/50 bg-card px-4 py-2`,children:(0,o.jsx)(e,{size:`xxs`,type:`discrete`,children:p})})]}):(0,o.jsxs)(`div`,{className:i(`metric-bar--component flex w-full flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm`,m),children:[(0,o.jsxs)(`div`,{className:`flex min-w-0 flex-col overflow-hidden lg:flex-row`,children:[g&&(0,o.jsxs)(o.Fragment,{children:[g,(0,o.jsx)(`div`,{className:`hidden w-px bg-border lg:block`,"aria-hidden":`true`})]}),h]}),!!p&&(0,o.jsx)(`div`,{className:`border-t border-border/50 px-4 py-2`,children:(0,o.jsx)(e,{size:`xxs`,type:`discrete`,children:p})})]})}s.displayName=`MetricBar`;export{s as t};

package/dist/showcase/assets/metric-grid-CM-P894v.js

@@ -0,0 +1 @@
+import{d as e,n as t}from"./index-B37z19z3.js";import{t as n}from"./metric-HzQnjCpO.js";var r=e(),i={sm:`gap-2`,md:`gap-3`,lg:`gap-4`};function a(e){return e<=1?`grid-cols-1`:e===2?`grid-cols-1 sm:grid-cols-2`:e===3?`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`:e===4?`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`:e===5||e===6?`grid-cols-2 sm:grid-cols-3 lg:grid-cols-6`:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`}var o={1:`grid-cols-1`,2:`grid-cols-1 sm:grid-cols-2`,3:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`,4:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`,6:`grid-cols-2 sm:grid-cols-3 lg:grid-cols-6`};function s({metrics:e,variant:s=`card`,size:c=`md`,colorScheme:l=`default`,columns:u=`auto`,gap:d=`md`,showSparklines:f=!0,showChanges:p=!0,showIcons:m=!0,loading:h=!1,className:g}){return(0,r.jsx)(`div`,{className:t(`metric-grid--component`,`grid`,u===`auto`?a(e.length):o[u],i[d],g),children:e.map(e=>(0,r.jsx)(n,{data:e,variant:s,size:c,colorScheme:l,showSparkline:f,showChange:p,showIcon:m,loading:h},e.id))})}s.displayName=`MetricGrid`;export{s as t};

package/dist/showcase/assets/metric-trend-chip-DqYH_U8e.js

@@ -0,0 +1 @@
+import{p as e}from"./section-C2ovQgbv.js";import{t}from"./arrow-down-CCYWFimd.js";import{t as n}from"./arrow-up-kA33fcPv.js";import{t as r}from"./minus-DZsXg5PW.js";import{d as i,n as a}from"./index-B37z19z3.js";var o=i(),s={positive:{text:`text-success`,badge:`bg-success/10 text-success`,arrow:`text-success`},negative:{text:`text-destructive`,badge:`bg-destructive/10 text-destructive`,arrow:`text-destructive`},neutral:{text:`text-muted-foreground`,badge:`bg-muted text-muted-foreground`,arrow:`text-muted-foreground`}},c={sm:`size-3`,md:`size-3.5`,lg:`size-4`},l={sm:`xxs`,md:`xs`,lg:`sm`},u={sm:`px-1.5 py-0.5`,md:`px-2 py-0.5`,lg:`px-2.5 py-1`};function d(e,t){return e||(t===`up`?`positive`:t===`down`?`negative`:`neutral`)}function f({change:i,trend:f,size:p=`md`,variant:m=`default`,className:h}){let g=d(f,i.direction),_=i.direction===`up`?n:i.direction===`down`?t:r,v=s[g],y=String(i.value),b=i.direction===`up`?`+`:(i.direction,``);return m===`inline`?(0,o.jsxs)(e,{tag:`span`,size:l[p],weight:`medium`,className:a(`metric-trend-chip--component`,v.text,`tabular-nums`,h),children:[b,y]}):m===`compact`?(0,o.jsxs)(`span`,{className:a(`inline-flex items-center gap-0.5`,v.text,h),children:[(0,o.jsx)(_,{className:c[p],strokeWidth:2.5,"aria-hidden":`true`}),(0,o.jsx)(e,{tag:`span`,size:l[p],weight:`semibold`,className:`text-current tabular-nums`,children:y})]}):m===`badge`?(0,o.jsxs)(`span`,{className:a(`inline-flex items-center gap-1 rounded-full font-medium tabular-nums`,v.badge,u[p],h),children:[(0,o.jsx)(_,{className:c[p],strokeWidth:2.5,"aria-hidden":`true`}),(0,o.jsx)(e,{tag:`span`,size:l[p],weight:`semibold`,className:`text-current tabular-nums`,children:y}),!!i.label&&(0,o.jsx)(e,{tag:`span`,size:l[p],className:`text-current opacity-70`,children:i.label})]}):(0,o.jsxs)(`span`,{className:a(`inline-flex items-center gap-1`,v.text,h),children:[(0,o.jsx)(_,{className:c[p],strokeWidth:2.5,"aria-hidden":`true`}),(0,o.jsx)(e,{tag:`span`,size:l[p],weight:`semibold`,className:`tabular-nums`,children:y}),!!i.label&&(0,o.jsx)(e,{tag:`span`,size:l[p],type:`secondary`,children:i.label})]})}f.displayName=`MetricTrendChip`;export{f as t};

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

@@ -0,0 +1,44 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,t as n}from"./section-C2ovQgbv.js";import{t as r}from"./example-CDvNeHNP.js";import{t as i}from"./credit-card-CN0E6FU8.js";import{t as a}from"./dollar-sign-BES-Y4q8.js";import{t as o}from"./shopping-bag-DeprN0fB.js";import{t as s}from"./users-DLep-WjV.js";import{d as c}from"./index-B37z19z3.js";import{t as l}from"./props-table-udnF7Z46.js";import{t as u}from"./metric-bar-Fr1TDnSu.js";import{t as d}from"./metric-grid-CM-P894v.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-qMbAYBbk.js

@@ -0,0 +1,50 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{f as r,n as i,p as a,t as o}from"./section-C2ovQgbv.js";import{t as s}from"./example-CDvNeHNP.js";import{d as c,n as l}from"./index-B37z19z3.js";import{t as u}from"./props-table-udnF7Z46.js";import{Zn as d,t as f,u as p}from"./AreaChart-WJREayr9.js";import{t as m}from"./metric-trend-chip-DqYH_U8e.js";var h=t(n(),1),g=c(),_={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:i,theme:o=`green`,subtitle:s,className:c}){let u=`metric-grad-${(0,h.useId)().replaceAll(`:`,``)}`;return(0,g.jsxs)(`div`,{className:l(`metric-gradient--component`,`relative overflow-hidden rounded-lg p-5 text-inverse-foreground shadow-sm ring-1 ring-inverse-border`,_[o],c),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)(a,{size:`xs`,weight:`medium`,className:`uppercase tracking-wider text-inverse-muted`,children:e}),!!t&&(0,g.jsx)(r,{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)(a,{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:i,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)(i,{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-GSWVebL_.js

@@ -0,0 +1,76 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{f as t,n,p as r,t as i}from"./section-C2ovQgbv.js";import{t as a}from"./arrow-down-CCYWFimd.js";import{t as o}from"./arrow-right-eLxbBrdm.js";import{t as s}from"./arrow-up-kA33fcPv.js";import{t as c}from"./example-CDvNeHNP.js";import{N as l,d as u,l as d,n as f}from"./index-B37z19z3.js";import{t as p}from"./props-table-udnF7Z46.js";import{t as m}from"./smart-card-B0Llbpiy.js";import{t as h}from"./format-metric-value-BTsvOjZQ.js";var g=d(`equal`,[[`line`,{x1:`5`,x2:`19`,y1:`9`,y2:`9`,key:`1nwqeh`}],[`line`,{x1:`5`,x2:`19`,y1:`15`,y2:`15`,key:`g8yjpy`}]]),_=u(),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:n,title:i,currentPeriod:c,previousPeriod:u,className:d,strings:p}){let b=l(v,p),x=y(e.value),S=y(n.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?s:a,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:f(`metric-comparison--component`,d),children:[!!(c||u)&&(0,_.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[!!c&&(0,_.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,className:`rounded-full bg-muted px-2 py-0.5 uppercase tracking-wider text-muted-foreground`,children:c}),!!u&&(0,_.jsx)(r,{tag:`span`,size:`xxs`,weight:`medium`,className:`rounded-full bg-muted px-2 py-0.5 uppercase tracking-wider text-muted-foreground`,children:u})]}),(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)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:b.currentLabel}),(0,_.jsx)(t,{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)(o,{className:`hidden size-4 sm:block`,"aria-hidden":`true`}),(0,_.jsx)(a,{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)(r,{size:`xxs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wider`,children:b.previousLabel}),(0,_.jsx)(t,{tag:`h5`,className:`text-xl tabular-nums tracking-tight border-none pb-0 text-muted-foreground`,children:h(n)})]})]}),!!C&&(0,_.jsxs)(`div`,{className:f(`mt-3 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2`,k.box),children:[(0,_.jsxs)(`div`,{className:f(`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)(r,{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)(r,{size:`xs`,type:`secondary`,className:f(`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)(n,{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)(c,{name:`Default`,source:A,children:(0,_.jsx)(E,{})}),(0,_.jsx)(c,{name:`WithCurrencyOverrideEUR`,source:A,children:(0,_.jsx)(D,{})}),(0,_.jsx)(c,{name:`PercentageValues`,source:A,children:(0,_.jsx)(O,{})}),(0,_.jsx)(c,{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-Fj5QZoO3.js

@@ -0,0 +1,27 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,p as n,t as r}from"./section-C2ovQgbv.js";import{t as i}from"./example-CDvNeHNP.js";import{N as a,d as o,n as s}from"./index-B37z19z3.js";import{t as c}from"./props-table-udnF7Z46.js";import{t as l}from"./smart-card-B0Llbpiy.js";import{t as u}from"./analytics.strings-B9262Jmq.js";var d=o(),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:t,data:r,className:i,strings:o}){let c=a(u,o),{weeks:m,monthLabels:h}=p(r,c.heatmapMonthNames);return(0,d.jsxs)(l,{title:e,description:t,className:s(`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)(n,{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-0.75`,children:c.heatmapDayLabels.map((e,t)=>(0,d.jsx)(`div`,{className:`flex h-3 w-6 items-center justify-end`,children:!!e&&(0,d.jsx)(n,{size:`xxs`,type:`secondary`,className:`leading-none`,children:e})},`day-${t}`))}),(0,d.jsx)(`div`,{className:`flex gap-0.75`,children:m.map((e,t)=>(0,d.jsx)(`div`,{className:`flex flex-col gap-0.75`,children:e.map((e,n)=>{let r=e?`${e.date}: Level ${e.level}`:void 0;return(0,d.jsx)(`div`,{className:s(`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)(n,{size:`xxs`,type:`secondary`,children:c.heatmapLegendLess}),[0,1,2,3,4].map(e=>(0,d.jsx)(`div`,{className:s(`size-3 rounded-sm`,f[e])},`legend-${e}`)),(0,d.jsx)(n,{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 n={h4:`h4`,...e.components};return h||S(`Examples`,!1),v||S(`Examples.OrderActivity`,!0),(0,d.jsxs)(t,{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)(n.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-BuyhiYDl.js

@@ -0,0 +1,17 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,p as n,t as r}from"./section-C2ovQgbv.js";import{t as i}from"./example-CDvNeHNP.js";import{d as a,n as o}from"./index-B37z19z3.js";import{t as s}from"./props-table-udnF7Z46.js";var c=a(),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:t}){return(0,c.jsx)(`div`,{className:o(`inline-metric--component`,`flex flex-wrap gap-1.5`,t),children:e.map(e=>{let t=e.size??`base`;return(0,c.jsxs)(`span`,{className:o(`inline-flex items-center bg-card ring-1 ring-border/60`,l[t]??l.base),children:[(0,c.jsx)(n,{tag:`span`,size:u[t]??`xxs`,type:`secondary`,children:e.label}),(0,c.jsx)(n,{tag:`span`,size:d[t]??`xs`,weight:`semibold`,className:`tabular-nums`,children:e.value}),(0,c.jsxs)(n,{tag:`span`,size:f[t]??`xxs`,weight:`medium`,className:o(`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 n={h4:`h4`,...e.components};return m||y(`Examples`,!1),h||y(`Examples.MixedSizesDirections`,!0),(0,c.jsxs)(t,{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)(n.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};