admin-ui-starter-kit 0.7.0 → 0.7.1

package/dist/showcase/assets/cards--V2D7Sft.js

@@ -0,0 +1,354 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-C_rLy6Zn.js";import{t as a}from"./arrow-up-right-OdmPQEwY.js";import{Or as o,r as s,t as c}from"./example-BsDQngs7.js";import{t as l}from"./credit-card-XYEEHtzk.js";import{t as u}from"./ellipsis-vertical-h1O9pibc.js";import{t as ee}from"./pencil-DdCEPDLe.js";import{t as d}from"./plus-Dp_nZNjk.js";import{t as f}from"./sparkles-BDnbTUMq.js";import{t as p}from"./trash-2-C-6T17-B.js";import{t as m}from"./trending-up-DRyRbFnA.js";import{t as h}from"./users-BlcUaVEY.js";import{d as g,l as _}from"./index-B4sKWDcN.js";import{t as v}from"./props-table-aynAz90t.js";import{a as y,i as b,n as x,o as S,r as C,t as w}from"./card-primitives-DzqLvy5f.js";import{n as T,t as E}from"./smart-card-CwDYx0xj.js";import{a as D,i as O,r as k,t as A}from"./avatar-BThv_quW.js";var j=_(`bell-ring`,[[`path`,{d:`M10.268 21a2 2 0 0 0 3.464 0`,key:`vwvbt9`}],[`path`,{d:`M22 8c0-2.3-.8-4.3-2-6`,key:`5bb3ad`}],[`path`,{d:`M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326`,key:`11g9vi`}],[`path`,{d:`M4 2C2.8 3.7 2 5.7 2 8`,key:`tap9e0`}]]),M=e({AlertVariants:()=>L,Default:()=>P,ExpandableCustomLabels:()=>W,ExpandableUncontrolled:()=>U,FrameMode:()=>B,HeaderAndFooterDividers:()=>H,HeaderSlots:()=>V,MetricKPICard:()=>K,NotificationCard:()=>q,PaddingSizes:()=>R,PrimitiveComposition:()=>J,Skeleton:()=>G,StatRowClickable:()=>Y,SurfaceVariants:()=>z,WithActions:()=>I,WithIconTooltipFooter:()=>F}),N=g();function P(){return(0,N.jsx)(E,{className:`w-full max-w-md`,title:`Simple card`,description:`Just a title and a description.`,children:(0,N.jsx)(r,{children:`Card content goes here.`})})}function F(){return(0,N.jsx)(E,{className:`w-full max-w-md`,icon:(0,N.jsx)(f,{className:`size-4`}),title:`Insights`,titleSuffix:(0,N.jsx)(n,{variant:`success`,children:`New`}),description:`High-level summary of recent activity.`,tooltip:`Updated every 15 minutes`,footerText:`Last refreshed 2 minutes ago`,children:(0,N.jsx)(r,{children:`Lorem ipsum dolor sit amet.`})})}function I(){return(0,N.jsx)(E,{className:`w-full max-w-md`,title:`Order #ORD-2026-0412`,description:`Sarah Smith — 2,450 USD`,actions:[{id:`edit`,label:`Edit`,icon:(0,N.jsx)(ee,{className:`size-3.5`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,N.jsx)(p,{className:`size-3.5`}),onClick:()=>{}}],headerEnd:(0,N.jsx)(n,{variant:`info`,size:`default`,children:`Pending`}),children:(0,N.jsx)(r,{type:`secondary`,children:`3 vouchers — wellness, food, adventure.`})})}function L(){return(0,N.jsxs)(`div`,{className:`grid w-full max-w-md gap-3`,children:[(0,N.jsx)(E,{title:`Default alert`,alert:`An informational message.`,children:(0,N.jsx)(r,{children:`Body content.`})}),(0,N.jsx)(E,{title:`Info`,alertVariant:`info`,alert:`Heads up — info-style.`,children:(0,N.jsx)(r,{children:`Body content.`})}),(0,N.jsx)(E,{title:`Warning`,alertVariant:`warning`,alert:`Heads up — warning.`,children:(0,N.jsx)(r,{children:`Body content.`})}),(0,N.jsx)(E,{title:`Success`,alertVariant:`success`,alert:`All systems go.`,children:(0,N.jsx)(r,{children:`Body content.`})}),(0,N.jsx)(E,{title:`Destructive`,alertVariant:`destructive`,alert:`This action cannot be undone.`,children:(0,N.jsx)(r,{children:`Body content.`})})]})}function R(){return(0,N.jsx)(`div`,{className:`grid w-full max-w-md gap-3`,children:[`default`,`small`].map(e=>(0,N.jsx)(E,{title:`padding="${e}"`,padding:e,children:(0,N.jsxs)(r,{children:[`Card body with `,e,` padding.`]})},e))})}function z(){return(0,N.jsxs)(`div`,{className:`grid w-full grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3`,children:[(0,N.jsx)(E,{surface:`card`,title:`Card`,description:`Bordered + soft shadow.`,children:(0,N.jsx)(r,{type:`secondary`,children:`Canonical card chrome.`})}),(0,N.jsx)(E,{surface:`flat`,title:`Flat`,description:`No border, no shadow.`,children:(0,N.jsx)(r,{type:`secondary`,children:`Use when nesting inside another surface.`})}),(0,N.jsx)(E,{title:`Framed (default)`,description:`Soft grouped surface.`,children:(0,N.jsx)(r,{type:`secondary`,children:`One clean card border with a tokenized outer ring.`})})]})}function B(){return(0,N.jsx)(E,{title:`Frame mode`,description:`A SmartCard surface for grouped panels without nesting a second frame.`,className:`w-full max-w-md`,headerEnd:(0,N.jsx)(n,{variant:`secondary`,children:`default surface`}),children:(0,N.jsxs)(`div`,{className:`grid gap-space-md`,children:[(0,N.jsxs)(`div`,{className:`flex items-center justify-between rounded-radius bg-muted/45 px-row-x py-row-y`,children:[(0,N.jsx)(r,{weight:`medium`,children:`Panel content`}),(0,N.jsx)(n,{variant:`success`,children:`Ready`})]}),(0,N.jsx)(r,{size:`xs`,type:`secondary`,children:`Use this when a section needs a stronger boundary than a card, but should still inherit SmartCard spacing, header slots, alerts, and footer behavior.`})]})})}function V(){return(0,N.jsx)(E,{className:`w-full max-w-md`,title:`Header composition`,headerStart:(0,N.jsx)(n,{variant:`primary`,children:`Start`}),headerEnd:(0,N.jsx)(n,{variant:`secondary`,children:`End`}),headerAction:(0,N.jsx)(d,{className:`size-4 text-muted-foreground`}),children:(0,N.jsx)(r,{children:`headerStart, headerEnd & headerAction.`})})}function H(){return(0,N.jsx)(E,{className:`w-full max-w-sm`,headerDivider:!0,footerDivider:!0,headerStart:(0,N.jsxs)(n,{variant:`secondary`,children:[(0,N.jsx)(o,{className:`size-3`}),` Live`]}),headerEnd:(0,N.jsx)(s,{variant:`secondary`,buttonStyle:`ghost`,"aria-label":`More options`,children:(0,N.jsx)(u,{className:`size-4`})}),title:`Integration name`,titleSuffix:(0,N.jsx)(n,{variant:`success`,children:`Installed`}),description:`Short description of the integration in one line.`,footerSlot:(0,N.jsx)(s,{variant:`secondary`,className:`w-full justify-center`,children:`Open`}),children:(0,N.jsxs)(O,{className:`pt-2`,children:[[`SC`,`MR`,`EW`].map(e=>(0,N.jsx)(A,{className:`ring-2 ring-background`,children:(0,N.jsx)(k,{children:e})},e)),(0,N.jsx)(D,{className:`ml-2`,children:`+3`})]})})}function U(){return(0,N.jsx)(E,{className:`w-full max-w-md`,expandable:!0,title:`3 days remaining in cycle`,headerEnd:(0,N.jsx)(s,{variant:`secondary`,buttonStyle:`ghost`,children:`Billing`}),children:(0,N.jsxs)(`div`,{className:`space-y-5`,children:[(0,N.jsxs)(`div`,{className:`rounded-lg bg-muted/60 p-4 space-y-2`,children:[(0,N.jsxs)(`div`,{className:`flex justify-between text-xs text-muted-foreground font-medium`,children:[(0,N.jsx)(`span`,{children:`Included credit`}),(0,N.jsx)(`span`,{children:`On-demand charges`})]}),(0,N.jsxs)(`div`,{className:`flex justify-between font-semibold`,children:[(0,N.jsx)(`span`,{children:`$18.08 / $20`}),(0,N.jsx)(`span`,{children:`$0`})]})]}),(0,N.jsx)(`dl`,{className:`grid gap-3 text-sm`,children:[[`Requests`,`$210.84`],[`Active CPU`,`$21.95`],[`Events`,`$21.20`],[`Storage usage`,`$20.45`],[`Bandwidth`,`$0.00`]].map(([e,t])=>(0,N.jsxs)(`div`,{className:`flex justify-between`,children:[(0,N.jsx)(r,{tag:`span`,weight:`medium`,children:e}),(0,N.jsx)(r,{tag:`span`,type:`secondary`,children:t})]},e))})]})})}function W(){return(0,N.jsx)(E,{className:`w-full max-w-md`,expandable:{collapsedMaxHeight:`6rem`},title:`Release notes — v0.4.2`,strings:{expandLabel:`Show full notes`,collapseLabel:`Hide details`},children:(0,N.jsxs)(r,{type:`secondary`,className:`leading-relaxed`,children:[`Tightened the admin density tokens, added the new`,(0,N.jsx)(`code`,{className:`mx-1 rounded bg-muted px-1.5 py-0.5 text-xs`,children:`expandable`}),`and `,(0,N.jsx)(`code`,{className:`mx-1 rounded bg-muted px-1.5 py-0.5 text-xs`,children:`headerDivider`}),`flags on SmartCard, and aligned the empty-state primitive with the sibling features. See the changelog for the full story.`]})})}function G(){return(0,N.jsx)(`div`,{className:`w-full max-w-md`,children:(0,N.jsx)(T,{})})}function K(){return(0,N.jsx)(E,{className:`w-full max-w-xs`,icon:(0,N.jsx)(m,{className:`size-4`}),title:`Monthly revenue`,headerEnd:(0,N.jsx)(n,{variant:`success`,children:`+12.4%`}),footerText:`Updated 5 minutes ago`,children:(0,N.jsxs)(`div`,{className:`space-y-1`,children:[(0,N.jsx)(r,{size:`base`,weight:`semibold`,lineHeight:`none`,className:`tabular-nums`,children:`$48,290`}),(0,N.jsx)(r,{size:`xs`,type:`secondary`,children:`vs. $42,950 last month`})]})})}function q(){return(0,N.jsx)(E,{className:`w-full max-w-md`,icon:(0,N.jsx)(j,{className:`size-4`}),title:`Backup ready to restore`,alert:`A snapshot from 12 minutes ago is available.`,alertVariant:`info`,footerSlot:(0,N.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,N.jsx)(s,{variant:`secondary`,buttonStyle:`ghost`,children:`Dismiss`}),(0,N.jsx)(s,{variant:`primary`,children:`Restore`})]}),children:(0,N.jsx)(r,{type:`secondary`,children:`Restoring will replace the current state with the snapshot. This action can be undone within 24 hours.`})})}function J(){return(0,N.jsxs)(y,{className:`w-full max-w-md`,children:[(0,N.jsxs)(b,{children:[(0,N.jsx)(S,{children:`Primitive composition`}),(0,N.jsx)(x,{children:"When `SmartCard` is too opinionated, drop down to the exported primitive parts and assemble the chrome yourself."})]}),(0,N.jsx)(w,{children:(0,N.jsx)(r,{type:`secondary`,children:"`CardShell`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter` are all exported from `base/cards` for advanced layouts."})}),(0,N.jsxs)(C,{className:`justify-end gap-2`,children:[(0,N.jsx)(s,{variant:`secondary`,buttonStyle:`ghost`,children:`Cancel`}),(0,N.jsx)(s,{variant:`primary`,children:`Save`})]})]})}function Y(){return(0,N.jsxs)(`div`,{className:`grid w-full grid-cols-1 gap-3 md:grid-cols-3`,children:[(0,N.jsx)(E,{icon:(0,N.jsx)(h,{className:`size-4`}),title:`Active customers`,headerEnd:(0,N.jsx)(a,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,N.jsx)(r,{size:`base`,weight:`semibold`,className:`tabular-nums`,children:`2,194`})}),(0,N.jsx)(E,{icon:(0,N.jsx)(l,{className:`size-4`}),title:`Pending invoices`,headerEnd:(0,N.jsx)(a,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,N.jsx)(r,{size:`base`,weight:`semibold`,className:`tabular-nums`,children:`$12,840`})}),(0,N.jsx)(E,{icon:(0,N.jsx)(f,{className:`size-4`}),title:`New signups`,headerEnd:(0,N.jsx)(a,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,N.jsx)(r,{size:`base`,weight:`semibold`,className:`tabular-nums`,children:`87`})})]})}var X=`import { ArrowUpRight, BellRing, CreditCard, MoreVertical, Pencil, Plus, Sparkles, Trash2, Check, TrendingUp, Users } from 'lucide-react';
+import { Button } from '@/components/base/buttons';
+import {
+	SmartCard,
+	SmartCardSkeleton,
+	CardShell,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+	CardFooter,
+} from '@/components/base/cards';
+import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from '@/components/base/display/avatar';
+import { Text } from '@/components/typography/text';
+import { Badge } from '@/components/base/badge';
+
+export function Default() {
+	return (
+		<SmartCard className="w-full max-w-md" title="Simple card" description="Just a title and a description.">
+			<Text>Card content goes here.</Text>
+		</SmartCard>
+	);
+}
+
+export function WithIconTooltipFooter() {
+	return (
+		<SmartCard
+			className="w-full max-w-md"
+			icon={<Sparkles className="size-4" />}
+			title="Insights"
+			titleSuffix={<Badge variant="success">New</Badge>}
+			description="High-level summary of recent activity."
+			tooltip="Updated every 15 minutes"
+			footerText="Last refreshed 2 minutes ago"
+		>
+			<Text>Lorem ipsum dolor sit amet.</Text>
+		</SmartCard>
+	);
+}
+
+export function WithActions() {
+	return (
+		<SmartCard
+			className="w-full max-w-md"
+			title="Order #ORD-2026-0412"
+			description="Sarah Smith — 2,450 USD"
+			actions={[
+				{ id: 'edit', label: 'Edit', icon: <Pencil className="size-3.5" />, onClick: () => {} },
+				{ id: 'delete', label: 'Delete', icon: <Trash2 className="size-3.5" />, onClick: () => {} },
+			]}
+			headerEnd={<Badge variant="info" size="default">Pending</Badge>}
+		>
+			<Text type="secondary">3 vouchers — wellness, food, adventure.</Text>
+		</SmartCard>
+	);
+}
+
+export function AlertVariants() {
+	return (
+		<div className="grid w-full max-w-md gap-3">
+			<SmartCard title="Default alert" alert="An informational message.">
+				<Text>Body content.</Text>
+			</SmartCard>
+			<SmartCard title="Info" alertVariant="info" alert="Heads up — info-style.">
+				<Text>Body content.</Text>
+			</SmartCard>
+			<SmartCard title="Warning" alertVariant="warning" alert="Heads up — warning.">
+				<Text>Body content.</Text>
+			</SmartCard>
+			<SmartCard title="Success" alertVariant="success" alert="All systems go.">
+				<Text>Body content.</Text>
+			</SmartCard>
+			<SmartCard title="Destructive" alertVariant="destructive" alert="This action cannot be undone.">
+				<Text>Body content.</Text>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function PaddingSizes() {
+	return (
+		<div className="grid w-full max-w-md gap-3">
+			{(['default', 'small'] as const).map((p) => (
+				<SmartCard key={p} title={\`padding="\${p}"\`} padding={p}>
+					<Text>Card body with {p} padding.</Text>
+				</SmartCard>
+			))}
+		</div>
+	);
+}
+
+export function SurfaceVariants() {
+	return (
+		<div className="grid w-full grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3">
+			<SmartCard surface="card" title="Card" description="Bordered + soft shadow.">
+				<Text type="secondary">Canonical card chrome.</Text>
+			</SmartCard>
+			<SmartCard surface="flat" title="Flat" description="No border, no shadow.">
+				<Text type="secondary">Use when nesting inside another surface.</Text>
+			</SmartCard>
+			<SmartCard title="Framed (default)" description="Soft grouped surface.">
+				<Text type="secondary">One clean card border with a tokenized outer ring.</Text>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function FrameMode() {
+	return (
+		<SmartCard
+			title="Frame mode"
+			description="A SmartCard surface for grouped panels without nesting a second frame."
+			className="w-full max-w-md"
+			headerEnd={<Badge variant="secondary">default surface</Badge>}
+		>
+			<div className="grid gap-space-md">
+				<div className="flex items-center justify-between rounded-radius bg-muted/45 px-row-x py-row-y">
+					<Text weight="medium">Panel content</Text>
+					<Badge variant="success">Ready</Badge>
+				</div>
+				<Text size="xs" type="secondary">
+					Use this when a section needs a stronger boundary than a card, but should
+					still inherit SmartCard spacing, header slots, alerts, and footer behavior.
+				</Text>
+			</div>
+		</SmartCard>
+	);
+}
+
+export function HeaderSlots() {
+	return (
+		<SmartCard
+			className="w-full max-w-md"
+			title="Header composition"
+			headerStart={<Badge variant="primary">Start</Badge>}
+			headerEnd={<Badge variant="secondary">End</Badge>}
+			headerAction={<Plus className="size-4 text-muted-foreground" />}
+		>
+			<Text>headerStart, headerEnd & headerAction.</Text>
+		</SmartCard>
+	);
+}
+
+export function HeaderAndFooterDividers() {
+	return (
+		<SmartCard
+			className="w-full max-w-sm"
+			headerDivider
+			footerDivider
+			headerStart={
+				<Badge variant="secondary">
+					<Check className="size-3" /> Live
+				</Badge>
+			}
+			headerEnd={
+				<Button variant="secondary" buttonStyle="ghost" aria-label="More options">
+					<MoreVertical className="size-4" />
+				</Button>
+			}
+			title="Integration name"
+			titleSuffix={<Badge variant="success">Installed</Badge>}
+			description="Short description of the integration in one line."
+			footerSlot={
+				<Button variant="secondary" className="w-full justify-center">
+					Open
+				</Button>
+			}
+		>
+			<AvatarGroup className="pt-2">
+				{['SC', 'MR', 'EW'].map((init) => (
+					<Avatar key={init} className="ring-2 ring-background">
+						<AvatarFallback>{init}</AvatarFallback>
+					</Avatar>
+				))}
+				<AvatarGroupCount className="ml-2">+3</AvatarGroupCount>
+			</AvatarGroup>
+		</SmartCard>
+	);
+}
+
+export function ExpandableUncontrolled() {
+	return (
+		<SmartCard
+			className="w-full max-w-md"
+			expandable
+			title="3 days remaining in cycle"
+			headerEnd={<Button variant="secondary" buttonStyle="ghost">Billing</Button>}
+		>
+			<div className="space-y-5">
+				<div className="rounded-lg bg-muted/60 p-4 space-y-2">
+					<div className="flex justify-between text-xs text-muted-foreground font-medium">
+						<span>Included credit</span>
+						<span>On-demand charges</span>
+					</div>
+					<div className="flex justify-between font-semibold">
+						<span>$18.08 / $20</span>
+						<span>$0</span>
+					</div>
+				</div>
+				<dl className="grid gap-3 text-sm">
+					{[
+						['Requests', '$210.84'],
+						['Active CPU', '$21.95'],
+						['Events', '$21.20'],
+						['Storage usage', '$20.45'],
+						['Bandwidth', '$0.00'],
+					].map(([k, v]) => (
+						<div key={k} className="flex justify-between">
+							<Text tag="span" weight="medium">{k}</Text>
+							<Text tag="span" type="secondary">{v}</Text>
+						</div>
+					))}
+				</dl>
+			</div>
+		</SmartCard>
+	);
+}
+
+export function ExpandableCustomLabels() {
+	return (
+		<SmartCard
+			className="w-full max-w-md"
+			expandable={{ collapsedMaxHeight: '6rem' }}
+			title="Release notes — v0.4.2"
+			strings={{ expandLabel: 'Show full notes', collapseLabel: 'Hide details' }}
+		>
+			<Text type="secondary" className="leading-relaxed">
+				Tightened the admin density tokens, added the new
+				<code className="mx-1 rounded bg-muted px-1.5 py-0.5 text-xs">expandable</code>
+				and <code className="mx-1 rounded bg-muted px-1.5 py-0.5 text-xs">headerDivider</code>
+				flags on SmartCard, and aligned the empty-state primitive with the
+				sibling features. See the changelog for the full story.
+			</Text>
+		</SmartCard>
+	);
+}
+
+export function Skeleton() {
+	return (
+		<div className="w-full max-w-md">
+			<SmartCardSkeleton />
+		</div>
+	);
+}
+
+export function MetricKPICard() {
+	return (
+		<SmartCard
+			className="w-full max-w-xs"
+			icon={<TrendingUp className="size-4" />}
+			title="Monthly revenue"
+			headerEnd={<Badge variant="success">+12.4%</Badge>}
+			footerText="Updated 5 minutes ago"
+		>
+			<div className="space-y-1">
+				<Text size="base" weight="semibold" lineHeight="none" className="tabular-nums">
+					$48,290
+				</Text>
+				<Text size="xs" type="secondary">vs. $42,950 last month</Text>
+			</div>
+		</SmartCard>
+	);
+}
+
+export function NotificationCard() {
+	return (
+		<SmartCard
+			className="w-full max-w-md"
+			icon={<BellRing className="size-4" />}
+			title="Backup ready to restore"
+			alert="A snapshot from 12 minutes ago is available."
+			alertVariant="info"
+			footerSlot={
+				<div className="flex justify-end gap-2">
+					<Button variant="secondary" buttonStyle="ghost">Dismiss</Button>
+					<Button variant="primary">Restore</Button>
+				</div>
+			}
+		>
+			<Text type="secondary">
+				Restoring will replace the current state with the snapshot. This action
+				can be undone within 24 hours.
+			</Text>
+		</SmartCard>
+	);
+}
+
+export function PrimitiveComposition() {
+	return (
+		<CardShell className="w-full max-w-md">
+			<CardHeader>
+				<CardTitle>Primitive composition</CardTitle>
+				<CardDescription>
+					When \`SmartCard\` is too opinionated, drop down to the exported primitive
+					parts and assemble the chrome yourself.
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<Text type="secondary">
+					\`CardShell\`, \`CardHeader\`, \`CardTitle\`, \`CardDescription\`, \`CardContent\`,
+					and \`CardFooter\` are all exported from \`base/cards\` for advanced layouts.
+				</Text>
+			</CardContent>
+			<CardFooter className="justify-end gap-2">
+				<Button variant="secondary" buttonStyle="ghost">Cancel</Button>
+				<Button variant="primary">Save</Button>
+			</CardFooter>
+		</CardShell>
+	);
+}
+
+export function StatRowClickable() {
+	return (
+		<div className="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
+			<SmartCard
+				icon={<Users className="size-4" />}
+				title="Active customers"
+				headerEnd={<ArrowUpRight className="size-4 text-muted-foreground" />}
+				className="cursor-pointer transition-colors hover:bg-muted/40"
+			>
+				<Text size="base" weight="semibold" className="tabular-nums">2,194</Text>
+			</SmartCard>
+			<SmartCard
+				icon={<CreditCard className="size-4" />}
+				title="Pending invoices"
+				headerEnd={<ArrowUpRight className="size-4 text-muted-foreground" />}
+				className="cursor-pointer transition-colors hover:bg-muted/40"
+			>
+				<Text size="base" weight="semibold" className="tabular-nums">$12,840</Text>
+			</SmartCard>
+			<SmartCard
+				icon={<Sparkles className="size-4" />}
+				title="New signups"
+				headerEnd={<ArrowUpRight className="size-4 text-muted-foreground" />}
+				className="cursor-pointer transition-colors hover:bg-muted/40"
+			>
+				<Text size="base" weight="semibold" className="tabular-nums">87</Text>
+			</SmartCard>
+		</div>
+	);
+}
+`;function Z(e){let n={code:`code`,p:`p`,...e.components};return M||$(`Examples`,!1),L||$(`Examples.AlertVariants`,!0),P||$(`Examples.Default`,!0),W||$(`Examples.ExpandableCustomLabels`,!0),U||$(`Examples.ExpandableUncontrolled`,!0),B||$(`Examples.FrameMode`,!0),H||$(`Examples.HeaderAndFooterDividers`,!0),V||$(`Examples.HeaderSlots`,!0),K||$(`Examples.MetricKPICard`,!0),q||$(`Examples.NotificationCard`,!0),R||$(`Examples.PaddingSizes`,!0),J||$(`Examples.PrimitiveComposition`,!0),G||$(`Examples.Skeleton`,!0),Y||$(`Examples.StatRowClickable`,!0),z||$(`Examples.SurfaceVariants`,!0),I||$(`Examples.WithActions`,!0),F||$(`Examples.WithIconTooltipFooter`,!0),(0,N.jsxs)(t,{title:`Cards (SmartCard)`,description:`The composed card primitive — header (icon, title, suffix, slots), optional alert, expandable body, footer text or slot, and calibrated card spacing.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/cards`,children:[(0,N.jsxs)(i,{title:`Overview`,id:`overview`,children:[(0,N.jsxs)(n.p,{children:[(0,N.jsx)(n.code,{children:`SmartCard`}),` is the canonical card surface — every dashboard tile, settings
+panel, or KPI block runs through it. Three `,(0,N.jsx)(n.code,{children:`surface`}),` chromes (`,(0,N.jsx)(n.code,{children:`card`}),`, `,(0,N.jsx)(n.code,{children:`flat`}),`,
+`,(0,N.jsx)(n.code,{children:`framed`}),`), package-scale padding, optional `,(0,N.jsx)(n.code,{children:`headerStart`}),` / `,(0,N.jsx)(n.code,{children:`headerEnd`}),` /
+`,(0,N.jsx)(n.code,{children:`headerAction`}),` slots, action menus, alert bands, footer text or `,(0,N.jsx)(n.code,{children:`footerSlot`}),`,
+and an `,(0,N.jsx)(n.code,{children:`expandable`}),` body for long content.`]}),(0,N.jsxs)(n.p,{children:[`Use `,(0,N.jsx)(n.code,{children:`surface="framed"`}),` when a surface needs a grouped-card feel without a
+separate wrapper route or nested borders. It is still a SmartCard, so padding,
+headers, alerts, actions, and footer slots behave identically.`]}),(0,N.jsxs)(n.p,{children:[`Card padding props are intentionally limited to `,(0,N.jsx)(n.code,{children:`default`}),` and `,(0,N.jsx)(n.code,{children:`small`}),`; the
+measurements resolve through `,(0,N.jsx)(n.code,{children:`--surface-*`}),` and the shared `,(0,N.jsx)(n.code,{children:`--space-*`}),` scale. Use
+`,(0,N.jsx)(n.code,{children:`UIProvider.card.defaultPadding`}),`, `,(0,N.jsx)(n.code,{children:`UIProvider.card.defaultSurface`}),`, and
+`,(0,N.jsx)(n.code,{children:`UIProvider.card.defaultHeaderDivider`}),` when changing app-wide card chrome.
+CSS variables still own the underlying spacing rhythm.`]})]}),(0,N.jsx)(i,{title:`Default`,id:`default`,children:(0,N.jsx)(c,{name:`Default`,source:X,children:(0,N.jsx)(P,{})})}),(0,N.jsxs)(i,{title:`Surface variants`,id:`surfaces`,children:[(0,N.jsx)(c,{name:`FrameMode`,source:X,children:(0,N.jsx)(B,{})}),(0,N.jsx)(c,{name:`SurfaceVariants`,source:X,children:(0,N.jsx)(z,{})})]}),(0,N.jsx)(i,{title:`Padding Scale`,id:`padding`,children:(0,N.jsx)(c,{name:`PaddingSizes`,source:X,children:(0,N.jsx)(R,{})})}),(0,N.jsxs)(i,{title:`Header composition`,id:`header`,children:[(0,N.jsx)(c,{name:`WithIconTooltipFooter`,source:X,children:(0,N.jsx)(F,{})}),(0,N.jsx)(c,{name:`HeaderSlots`,source:X,children:(0,N.jsx)(V,{})}),(0,N.jsx)(c,{name:`WithActions`,source:X,children:(0,N.jsx)(I,{})}),(0,N.jsx)(c,{name:`HeaderAndFooterDividers`,source:X,children:(0,N.jsx)(H,{})})]}),(0,N.jsx)(i,{title:`Alerts`,id:`alerts`,children:(0,N.jsx)(c,{name:`AlertVariants`,source:X,children:(0,N.jsx)(L,{})})}),(0,N.jsxs)(i,{title:`Expandable`,id:`expandable`,children:[(0,N.jsx)(c,{name:`ExpandableUncontrolled`,source:X,children:(0,N.jsx)(U,{})}),(0,N.jsx)(c,{name:`ExpandableCustomLabels`,source:X,children:(0,N.jsx)(W,{})})]}),(0,N.jsx)(i,{title:`States`,id:`states`,children:(0,N.jsx)(c,{name:`Skeleton`,source:X,children:(0,N.jsx)(G,{})})}),(0,N.jsxs)(i,{title:`Primitive parts`,id:`primitives`,children:[(0,N.jsxs)(n.p,{children:[(0,N.jsx)(n.code,{children:`CardShell`}),`, `,(0,N.jsx)(n.code,{children:`CardHeader`}),`, `,(0,N.jsx)(n.code,{children:`CardTitle`}),`, `,(0,N.jsx)(n.code,{children:`CardDescription`}),`, `,(0,N.jsx)(n.code,{children:`CardContent`}),`,
+and `,(0,N.jsx)(n.code,{children:`CardFooter`}),` are exported from `,(0,N.jsx)(n.code,{children:`base/cards`}),` for the rare case when
+`,(0,N.jsx)(n.code,{children:`SmartCard`}),`'s composition is too opinionated.`]}),(0,N.jsx)(c,{name:`PrimitiveComposition`,source:X,children:(0,N.jsx)(J,{})})]}),(0,N.jsxs)(i,{title:`Realistic usage`,id:`realistic`,children:[(0,N.jsx)(c,{name:`MetricKPICard`,source:X,children:(0,N.jsx)(K,{})}),(0,N.jsx)(c,{name:`NotificationCard`,source:X,children:(0,N.jsx)(q,{})}),(0,N.jsx)(c,{name:`StatRowClickable`,source:X,children:(0,N.jsx)(Y,{})})]}),(0,N.jsx)(i,{title:`API`,id:`api`,children:(0,N.jsx)(v,{component:`SmartCard`})})]})}function Q(e={}){let{wrapper:t}=e.components||{};return t?(0,N.jsx)(t,{...e,children:(0,N.jsx)(Z,{...e})}):Z(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Q as default};