admin-ui-starter-kit 0.1.0 → 0.1.2

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

@@ -0,0 +1,328 @@
+import{n as e}from"./chunk-CilyBKbf.js";import{Cr as t,cr as n,gr as r,lr as i,r as a,sr as o,t as s}from"./example-6phCHGsN.js";import{t as c}from"./arrow-up-right-CK3XnMah.js";import{t as l}from"./credit-card-BQK3KKb2.js";import{t as u}from"./ellipsis-vertical-B1RErEkj.js";import{t as d}from"./pencil-BJ3VS_FO.js";import{t as f}from"./plus-D2JuXYLg.js";import{t as p}from"./sparkles-CF9P5Tqh.js";import{t as m}from"./trash-2-C-FAptQP.js";import{t as h}from"./trending-up-BmLhdF_w.js";import{t as g}from"./users-B7G4yTCR.js";import{a as _,r as v}from"./index-B4ubXfly.js";import{t as y}from"./props-table-uDY4eIzt.js";import{a as b,c as x,i as S,n as C,o as w,r as T,s as E,t as D}from"./smart-card-BisUbLPt.js";import{r as O,t as k}from"./avatar-LPmQqZQv.js";var A=v(`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`}]]),j=e({AlertVariants:()=>I,Default:()=>N,ExpandableCustomLabels:()=>H,ExpandableUncontrolled:()=>V,HeaderAndFooterDividers:()=>B,HeaderSlots:()=>z,MetricKPICard:()=>W,NotificationCard:()=>G,PaddingSizes:()=>L,PrimitiveComposition:()=>K,Skeleton:()=>U,StatRowClickable:()=>q,SurfaceVariants:()=>R,WithActions:()=>F,WithIconTooltipFooter:()=>P}),M=_();function N(){return(0,M.jsx)(D,{className:`w-full max-w-md`,title:`Simple card`,description:`Just a title and a description.`,children:(0,M.jsx)(r,{children:`Card content goes here.`})})}function P(){return(0,M.jsx)(D,{className:`w-full max-w-md`,icon:(0,M.jsx)(p,{className:`size-4`}),title:`Insights`,titleSuffix:(0,M.jsx)(i,{variant:`success`,children:`New`}),description:`High-level summary of recent activity.`,tooltip:`Updated every 15 minutes`,footerText:`Last refreshed 2 minutes ago`,children:(0,M.jsx)(r,{children:`Lorem ipsum dolor sit amet.`})})}function F(){return(0,M.jsx)(D,{className:`w-full max-w-md`,title:`Order #ORD-2026-0412`,description:`Sarah Smith — 2,450 USD`,actions:[{id:`edit`,label:`Edit`,icon:(0,M.jsx)(d,{className:`size-3.5`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,M.jsx)(m,{className:`size-3.5`}),onClick:()=>{}}],headerEnd:(0,M.jsx)(i,{variant:`info`,size:`sm`,children:`Pending`}),children:(0,M.jsx)(r,{type:`secondary`,children:`3 vouchers — wellness, food, adventure.`})})}function I(){return(0,M.jsxs)(`div`,{className:`grid w-full max-w-md gap-3`,children:[(0,M.jsx)(D,{title:`Default alert`,alert:`An informational message.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Info`,alertVariant:`info`,alert:`Heads up — info-style.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Warning`,alertVariant:`warning`,alert:`Heads up — warning.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Success`,alertVariant:`success`,alert:`All systems go.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Destructive`,alertVariant:`destructive`,alert:`This action cannot be undone.`,children:(0,M.jsx)(r,{children:`Body content.`})})]})}function L(){return(0,M.jsx)(`div`,{className:`grid w-full max-w-md gap-3`,children:[`sm`,`base`,`lg`].map(e=>(0,M.jsx)(D,{title:`padding="${e}"`,padding:e,children:(0,M.jsxs)(r,{children:[`Card body with `,e,` padding.`]})},e))})}function R(){return(0,M.jsxs)(`div`,{className:`grid w-full grid-cols-1 gap-4 md:grid-cols-3`,children:[(0,M.jsx)(D,{surface:`card`,title:`Card (default)`,description:`Bordered + soft shadow.`,children:(0,M.jsx)(r,{type:`secondary`,children:`Canonical card chrome.`})}),(0,M.jsx)(D,{surface:`flat`,title:`Flat`,description:`No border, no shadow.`,children:(0,M.jsx)(r,{type:`secondary`,children:`Use when nesting inside another surface.`})}),(0,M.jsx)(D,{surface:`framed`,title:`Framed`,description:`Matted polaroid look.`,children:(0,M.jsx)(r,{type:`secondary`,children:`5px outer border + 1px hairline inner.`})})]})}function z(){return(0,M.jsx)(D,{className:`w-full max-w-md`,title:`Header composition`,headerStart:(0,M.jsx)(i,{variant:`primary`,children:`Start`}),headerEnd:(0,M.jsx)(i,{variant:`secondary`,children:`End`}),headerAction:(0,M.jsx)(f,{className:`size-4 text-muted-foreground`}),children:(0,M.jsx)(r,{children:`headerStart, headerEnd & headerAction.`})})}function B(){return(0,M.jsx)(D,{className:`w-full max-w-sm`,headerDivider:!0,footerDivider:!0,headerStart:(0,M.jsxs)(i,{variant:`secondary`,children:[(0,M.jsx)(t,{className:`size-3`}),` Live`]}),headerEnd:(0,M.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,"aria-label":`More options`,children:(0,M.jsx)(u,{className:`size-4`})}),title:`Integration name`,titleSuffix:(0,M.jsx)(i,{variant:`success`,children:`Installed`}),description:`Short description of the integration in one line.`,footerSlot:(0,M.jsx)(a,{variant:`secondary`,className:`w-full justify-center`,children:`Open`}),children:(0,M.jsxs)(`div`,{className:`flex items-center -space-x-2 pt-2`,children:[[`SC`,`MR`,`EW`].map(e=>(0,M.jsx)(k,{className:`ring-2 ring-background`,children:(0,M.jsx)(O,{children:e})},e)),(0,M.jsx)(`span`,{className:`ml-2 inline-flex size-6 items-center justify-center rounded-full border border-background bg-muted text-xs text-muted-foreground`,children:`+3`})]})})}function V(){return(0,M.jsx)(D,{className:`w-full max-w-md`,expandable:!0,title:`3 days remaining in cycle`,headerEnd:(0,M.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,children:`Billing`}),children:(0,M.jsxs)(`div`,{className:`space-y-5`,children:[(0,M.jsxs)(`div`,{className:`rounded-lg bg-muted/60 p-4 space-y-2`,children:[(0,M.jsxs)(`div`,{className:`flex justify-between text-xs text-muted-foreground font-medium`,children:[(0,M.jsx)(`span`,{children:`Included credit`}),(0,M.jsx)(`span`,{children:`On-demand charges`})]}),(0,M.jsxs)(`div`,{className:`flex justify-between font-semibold`,children:[(0,M.jsx)(`span`,{children:`$18.08 / $20`}),(0,M.jsx)(`span`,{children:`$0`})]})]}),(0,M.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,M.jsxs)(`div`,{className:`flex justify-between`,children:[(0,M.jsx)(r,{tag:`span`,weight:`medium`,children:e}),(0,M.jsx)(r,{tag:`span`,type:`secondary`,children:t})]},e))})]})})}function H(){return(0,M.jsx)(D,{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,M.jsxs)(r,{type:`secondary`,className:`leading-relaxed`,children:[`Tightened the admin density tokens, added the new`,(0,M.jsx)(`code`,{className:`mx-1 rounded bg-muted px-1.5 py-0.5 text-xs`,children:`expandable`}),`and `,(0,M.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 U(){return(0,M.jsx)(`div`,{className:`w-full max-w-md`,children:(0,M.jsx)(C,{})})}function W(){return(0,M.jsx)(D,{className:`w-full max-w-xs`,icon:(0,M.jsx)(h,{className:`size-4`}),title:`Monthly revenue`,headerEnd:(0,M.jsx)(i,{variant:`success`,children:`+12.4%`}),footerText:`Updated 5 minutes ago`,children:(0,M.jsxs)(`div`,{className:`space-y-1`,children:[(0,M.jsx)(r,{size:`xl`,weight:`semibold`,lineHeight:`none`,className:`text-3xl tabular-nums`,children:`$48,290`}),(0,M.jsx)(r,{size:`xs`,type:`secondary`,children:`vs. $42,950 last month`})]})})}function G(){return(0,M.jsx)(D,{className:`w-full max-w-md`,icon:(0,M.jsx)(A,{className:`size-4`}),title:`Backup ready to restore`,alert:`A snapshot from 12 minutes ago is available.`,alertVariant:`info`,footerSlot:(0,M.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,M.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,children:`Dismiss`}),(0,M.jsx)(a,{variant:`primary`,children:`Restore`})]}),children:(0,M.jsx)(r,{type:`secondary`,children:`Restoring will replace the current state with the snapshot. This action can be undone within 24 hours.`})})}function K(){return(0,M.jsxs)(E,{className:`w-full max-w-md`,children:[(0,M.jsxs)(w,{children:[(0,M.jsx)(x,{children:`Primitive composition`}),(0,M.jsx)(S,{children:"When `SmartCard` is too opinionated, drop down to the exported primitive parts and assemble the chrome yourself."})]}),(0,M.jsx)(T,{children:(0,M.jsx)(r,{type:`secondary`,children:"`CardShell`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter` are all exported from `base/cards` for advanced layouts."})}),(0,M.jsxs)(b,{className:`justify-end gap-2`,children:[(0,M.jsx)(a,{variant:`secondary`,buttonStyle:`ghost`,children:`Cancel`}),(0,M.jsx)(a,{variant:`primary`,children:`Save`})]})]})}function q(){return(0,M.jsxs)(`div`,{className:`grid w-full grid-cols-1 gap-3 md:grid-cols-3`,children:[(0,M.jsx)(D,{icon:(0,M.jsx)(g,{className:`size-4`}),title:`Active customers`,headerEnd:(0,M.jsx)(c,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,M.jsx)(r,{size:`xl`,weight:`semibold`,className:`tabular-nums`,children:`2,194`})}),(0,M.jsx)(D,{icon:(0,M.jsx)(l,{className:`size-4`}),title:`Pending invoices`,headerEnd:(0,M.jsx)(c,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,M.jsx)(r,{size:`xl`,weight:`semibold`,className:`tabular-nums`,children:`$12,840`})}),(0,M.jsx)(D,{icon:(0,M.jsx)(p,{className:`size-4`}),title:`New signups`,headerEnd:(0,M.jsx)(c,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,M.jsx)(r,{size:`xl`,weight:`semibold`,className:`tabular-nums`,children:`87`})})]})}var J=`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 } from '@/components/ui/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="sm">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">
+			{(['sm', 'base', 'lg'] 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-1 gap-4 md:grid-cols-3">
+			<SmartCard surface="card" title="Card (default)" 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 surface="framed" title="Framed" description="Matted polaroid look.">
+				<Text type="secondary">5px outer border + 1px hairline inner.</Text>
+			</SmartCard>
+		</div>
+	);
+}
+
+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>
+			}
+		>
+			<div className="flex items-center -space-x-2 pt-2">
+				{['SC', 'MR', 'EW'].map((init) => (
+					<Avatar key={init} className="ring-2 ring-background">
+						<AvatarFallback>{init}</AvatarFallback>
+					</Avatar>
+				))}
+				<span className="ml-2 inline-flex size-6 items-center justify-center rounded-full border border-background bg-muted text-xs text-muted-foreground">
+					+3
+				</span>
+			</div>
+		</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="xl" weight="semibold" lineHeight="none" className="text-3xl 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="xl" 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="xl" 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="xl" weight="semibold" className="tabular-nums">87</Text>
+			</SmartCard>
+		</div>
+	);
+}
+`;function Y(e){let t={code:`code`,p:`p`,...e.components};return j||Z(`Examples`,!1),I||Z(`Examples.AlertVariants`,!0),N||Z(`Examples.Default`,!0),H||Z(`Examples.ExpandableCustomLabels`,!0),V||Z(`Examples.ExpandableUncontrolled`,!0),B||Z(`Examples.HeaderAndFooterDividers`,!0),z||Z(`Examples.HeaderSlots`,!0),W||Z(`Examples.MetricKPICard`,!0),G||Z(`Examples.NotificationCard`,!0),L||Z(`Examples.PaddingSizes`,!0),K||Z(`Examples.PrimitiveComposition`,!0),U||Z(`Examples.Skeleton`,!0),q||Z(`Examples.StatRowClickable`,!0),R||Z(`Examples.SurfaceVariants`,!0),F||Z(`Examples.WithActions`,!0),P||Z(`Examples.WithIconTooltipFooter`,!0),(0,M.jsxs)(n,{title:`Cards (SmartCard)`,description:`The composed card primitive — header (icon, title, suffix, slots), optional alert, expandable body, footer text or slot, and three surface chromes.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/cards`,children:[(0,M.jsx)(o,{title:`Overview`,id:`overview`,children:(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`SmartCard`}),` is the canonical card surface — every dashboard tile, settings
+panel, or KPI block runs through it. Three `,(0,M.jsx)(t.code,{children:`surface`}),` chromes (`,(0,M.jsx)(t.code,{children:`card`}),`, `,(0,M.jsx)(t.code,{children:`flat`}),`,
+`,(0,M.jsx)(t.code,{children:`framed`}),`), three padding scales, optional `,(0,M.jsx)(t.code,{children:`headerStart`}),` / `,(0,M.jsx)(t.code,{children:`headerEnd`}),` /
+`,(0,M.jsx)(t.code,{children:`headerAction`}),` slots, action menus, alert bands, footer text or `,(0,M.jsx)(t.code,{children:`footerSlot`}),`,
+and an `,(0,M.jsx)(t.code,{children:`expandable`}),` body for long content.`]})}),(0,M.jsx)(o,{title:`Default`,id:`default`,children:(0,M.jsx)(s,{name:`Default`,source:J,children:(0,M.jsx)(N,{})})}),(0,M.jsx)(o,{title:`Surface variants`,id:`surfaces`,children:(0,M.jsx)(s,{name:`SurfaceVariants`,source:J,children:(0,M.jsx)(R,{})})}),(0,M.jsx)(o,{title:`Padding sizes`,id:`padding`,children:(0,M.jsx)(s,{name:`PaddingSizes`,source:J,children:(0,M.jsx)(L,{})})}),(0,M.jsxs)(o,{title:`Header composition`,id:`header`,children:[(0,M.jsx)(s,{name:`WithIconTooltipFooter`,source:J,children:(0,M.jsx)(P,{})}),(0,M.jsx)(s,{name:`HeaderSlots`,source:J,children:(0,M.jsx)(z,{})}),(0,M.jsx)(s,{name:`WithActions`,source:J,children:(0,M.jsx)(F,{})}),(0,M.jsx)(s,{name:`HeaderAndFooterDividers`,source:J,children:(0,M.jsx)(B,{})})]}),(0,M.jsx)(o,{title:`Alerts`,id:`alerts`,children:(0,M.jsx)(s,{name:`AlertVariants`,source:J,children:(0,M.jsx)(I,{})})}),(0,M.jsxs)(o,{title:`Expandable`,id:`expandable`,children:[(0,M.jsx)(s,{name:`ExpandableUncontrolled`,source:J,children:(0,M.jsx)(V,{})}),(0,M.jsx)(s,{name:`ExpandableCustomLabels`,source:J,children:(0,M.jsx)(H,{})})]}),(0,M.jsx)(o,{title:`States`,id:`states`,children:(0,M.jsx)(s,{name:`Skeleton`,source:J,children:(0,M.jsx)(U,{})})}),(0,M.jsxs)(o,{title:`Primitive parts`,id:`primitives`,children:[(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`CardShell`}),`, `,(0,M.jsx)(t.code,{children:`CardHeader`}),`, `,(0,M.jsx)(t.code,{children:`CardTitle`}),`, `,(0,M.jsx)(t.code,{children:`CardDescription`}),`, `,(0,M.jsx)(t.code,{children:`CardContent`}),`,
+and `,(0,M.jsx)(t.code,{children:`CardFooter`}),` are exported from `,(0,M.jsx)(t.code,{children:`base/cards`}),` for the rare case when
+`,(0,M.jsx)(t.code,{children:`SmartCard`}),`'s composition is too opinionated.`]}),(0,M.jsx)(s,{name:`PrimitiveComposition`,source:J,children:(0,M.jsx)(K,{})})]}),(0,M.jsxs)(o,{title:`Realistic usage`,id:`realistic`,children:[(0,M.jsx)(s,{name:`MetricKPICard`,source:J,children:(0,M.jsx)(W,{})}),(0,M.jsx)(s,{name:`NotificationCard`,source:J,children:(0,M.jsx)(G,{})}),(0,M.jsx)(s,{name:`StatRowClickable`,source:J,children:(0,M.jsx)(q,{})})]}),(0,M.jsx)(o,{title:`API`,id:`api`,children:(0,M.jsx)(y,{component:`SmartCard`})})]})}function X(e={}){let{wrapper:t}=e.components||{};return t?(0,M.jsx)(t,{...e,children:(0,M.jsx)(Y,{...e})}):Y(e)}function Z(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/chart-column-BpQkEi1H.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`chart-column`,[[`path`,{d:`M3 3v16a2 2 0 0 0 2 2h16`,key:`c24i48`}],[`path`,{d:`M18 17V9`,key:`2bz60n`}],[`path`,{d:`M13 17V5`,key:`1frdt8`}],[`path`,{d:`M8 17v-3`,key:`17ska0`}]]);export{t};

package/dist/showcase/assets/chevron-down-DyObdfSb.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`chevron-down`,[[`path`,{d:`m6 9 6 6 6-6`,key:`qrunsl`}]]);export{t};

package/dist/showcase/assets/chevron-left-T7dHNxYM.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`chevron-left`,[[`path`,{d:`m15 18-6-6 6-6`,key:`1wnfg3`}]]);export{t};

package/dist/showcase/assets/chevron-right-D_EcqHpT.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`chevron-right`,[[`path`,{d:`m9 18 6-6-6-6`,key:`mthhwq`}]]);export{t};

package/dist/showcase/assets/chevron-up-B38ivdGO.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`chevron-up`,[[`path`,{d:`m18 15-6-6-6 6`,key:`153udz`}]]);export{t};

package/dist/showcase/assets/chevrons-up-down-SdRARzoq.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`chevrons-up-down`,[[`path`,{d:`m7 15 5 5 5-5`,key:`1hf1tw`}],[`path`,{d:`m7 9 5-5 5 5`,key:`sgt6xg`}]]);export{t};

package/dist/showcase/assets/circle-BrCPAmDA.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`circle`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]]);export{t};

package/dist/showcase/assets/circle-alert-DdhzLPY_.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`circle-alert`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`line`,{x1:`12`,x2:`12`,y1:`8`,y2:`12`,key:`1pkeuh`}],[`line`,{x1:`12`,x2:`12.01`,y1:`16`,y2:`16`,key:`4dfq90`}]]);export{t};

package/dist/showcase/assets/circle-check-DlA6zidQ.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`circle-check`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m9 12 2 2 4-4`,key:`dzmm74`}]]);export{t};

package/dist/showcase/assets/circle-check-big-DFGJANQF.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`circle-check-big`,[[`path`,{d:`M21.801 10A10 10 0 1 1 17 3.335`,key:`yps3ct`}],[`path`,{d:`m9 11 3 3L22 4`,key:`1pflzl`}]]);export{t};

package/dist/showcase/assets/circle-dot-BKmnVUqM.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`circle-dot`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`circle`,{cx:`12`,cy:`12`,r:`1`,key:`41hilf`}]]);export{t};

package/dist/showcase/assets/circle-question-mark-BNREvgVC.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`circle-question-mark`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3`,key:`1u773s`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]]);export{t};

package/dist/showcase/assets/circle-x-C45QjHEs.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`circle-x`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m15 9-6 6`,key:`1uzhvr`}],[`path`,{d:`m9 9 6 6`,key:`z0biqf`}]]);export{t};

package/dist/showcase/assets/clock-D1nKQzQo.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`clock`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M12 6v6l4 2`,key:`mmk7yg`}]]);export{t};

package/dist/showcase/assets/code-xml-B8N3GRSu.js

@@ -0,0 +1 @@
+import{r as e}from"./index-B4ubXfly.js";var t=e(`code-xml`,[[`path`,{d:`m18 16 4-4-4-4`,key:`1inbqp`}],[`path`,{d:`m6 8-4 4 4 4`,key:`15zrgr`}],[`path`,{d:`m14.5 4-5 16`,key:`e7oirm`}]]);export{t};

package/dist/showcase/assets/collapsible-4TfcWyNs.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-CilyBKbf.js";import{Gn as t,L as n,P as r,Xn as i,Zn as a,l as o,zn as s}from"./example-6phCHGsN.js";import{a as c,k as l}from"./index-B4ubXfly.js";import{a as u,i as d,n as f,o as p,r as m,t as h}from"./useCollapsiblePanel-B0DZvDFu.js";var g=e(l()),_={...f,...n},v=c(),y=g.forwardRef(function(e,t){let{render:n,className:r,defaultOpen:i=!1,disabled:o=!1,onOpenChange:c,open:l,style:u,...f}=e,m=a(c),h=p({open:l,defaultOpen:i,onOpenChange:m,disabled:o}),y=g.useMemo(()=>({open:h.open,disabled:h.disabled,transitionStatus:h.transitionStatus}),[h.open,h.disabled,h.transitionStatus]),b=g.useMemo(()=>({...h,onOpenChange:m,state:y}),[h,m,y]),x=s(`div`,e,{state:y,ref:t,props:f,stateAttributesMapping:_});return(0,v.jsx)(d.Provider,{value:b,children:x})}),b={...m,...n},x=g.forwardRef(function(e,n){let{panelId:r,open:i,handleTrigger:a,state:o,disabled:c}=u(),{className:l,disabled:d=c,id:f,render:p,nativeButton:m=!0,style:h,..._}=e,{getButtonProps:v,buttonRef:y}=t({disabled:d,focusableWhenDisabled:!0,native:m}),x=g.useMemo(()=>({"aria-controls":i?r:void 0,"aria-expanded":i,onClick:a}),[r,i,a]);return s(`button`,e,{state:o,ref:[n,y],props:[x,_,v],stateAttributesMapping:b})}),S=function(e){return e.collapsiblePanelHeight=`--collapsible-panel-height`,e.collapsiblePanelWidth=`--collapsible-panel-width`,e}({}),C=g.forwardRef(function(e,t){let{className:n,hiddenUntilFound:a,keepMounted:o,render:c,id:l,style:d,...f}=e,{abortControllerRef:p,animationTypeRef:m,height:v,mounted:y,onOpenChange:b,open:x,panelId:C,panelRef:w,runOnceAnimationsFinish:T,setDimensions:E,setHiddenUntilFound:D,setKeepMounted:O,setMounted:k,setPanelIdState:A,setOpen:j,setVisible:M,state:N,transitionDimensionRef:P,visible:F,width:I,transitionStatus:L}=u(),R=a??!1,z=o??!1;i(()=>{if(l)return A(l),()=>{A(void 0)}},[l,A]),i(()=>{D(R)},[D,R]),i(()=>{O(z)},[O,z]);let{props:B}=h({abortControllerRef:p,animationTypeRef:m,externalRef:t,height:v,hiddenUntilFound:R,id:C,keepMounted:z,mounted:y,onOpenChange:b,open:x,panelRef:w,runOnceAnimationsFinish:T,setDimensions:E,setMounted:k,setOpen:j,setVisible:M,transitionDimensionRef:P,visible:F,width:I});r({open:x&&L===`idle`,ref:w,onComplete(){x&&E({height:void 0,width:void 0})}});let V=s(`div`,e,{state:g.useMemo(()=>({...N,transitionStatus:L}),[N,L]),ref:[t,w],props:[B,{style:{[S.collapsiblePanelHeight]:v===void 0?`auto`:`${v}px`,[S.collapsiblePanelWidth]:I===void 0?`auto`:`${I}px`}},f],stateAttributesMapping:_});return z||R||y?V:null});function w({...e}){return(0,v.jsx)(y,{"data-slot":`collapsible`,...e})}function T({asChild:e=!1,nativeButton:t,render:n,children:r,...i}){let a=e?(0,v.jsx)(o,{}):void 0,s=typeof n==`function`?((e,t)=>{let{nativeButton:r,...i}=e;return n(i,t)}):n,c=!0;e&&g.isValidElement(r)&&(c=typeof r.type==`string`?r.type===`button`:!(`href`in(r.props??{})));let l=t??(e?c:!0);return(0,v.jsx)(x,{"data-slot":`collapsible-trigger`,render:a??s,nativeButton:l,...i,children:r})}function E({...e}){return(0,v.jsx)(C,{"data-slot":`collapsible-content`,...e})}export{E as n,T as r,w as t};

package/dist/showcase/assets/collapsible-CKbZtvTj.js

@@ -0,0 +1,27 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{Ln as n,cr as r,sr as i,t as a}from"./example-6phCHGsN.js";import{t as o}from"./chevron-down-DyObdfSb.js";import{a as s,k as c}from"./index-B4ubXfly.js";import{n as l,r as u,t as d}from"./collapsible-4TfcWyNs.js";var f=e({Default:()=>h}),p=t(c(),1),m=s();function h(){let[e,t]=(0,p.useState)(!1);return(0,m.jsx)(m.Fragment,{children:(0,m.jsxs)(d,{open:e,onOpenChange:t,children:[(0,m.jsx)(u,{render:t=>(0,m.jsxs)(n,{variant:`outline`,...t,children:[(0,m.jsx)(o,{className:`size-3.5 transition-transform ${e?`rotate-180`:``}`}),e?`Hide details`:`Show details`]})}),(0,m.jsxs)(l,{className:`mt-3 rounded-md border border-border p-3 text-sm`,children:[(0,m.jsx)(`p`,{children:`Hidden content revealed.`}),(0,m.jsx)(`p`,{className:`text-muted-foreground`,children:`More text here.`})]})]})})}var g=`import { useState } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Button } from '@/components/ui/button';
+import { ChevronDown } from 'lucide-react';
+
+export function Default() {
+	const [open, setOpen] = useState(false);
+	return (
+		<>
+			<Collapsible open={open} onOpenChange={setOpen}>
+								<CollapsibleTrigger
+									render={(p) => (
+										<Button variant="outline" {...p}>
+											<ChevronDown className={\`size-3.5 transition-transform \${open ? 'rotate-180' : ''}\`} />
+											{open ? 'Hide details' : 'Show details'}
+										</Button>
+									)}
+								/>
+								<CollapsibleContent className="mt-3 rounded-md border border-border p-3 text-sm">
+									<p>Hidden content revealed.</p>
+									<p className="text-muted-foreground">More text here.</p>
+								</CollapsibleContent>
+							</Collapsible>
+		</>
+	);
+}
+`;function _(e){return f||y(`Examples`,!1),h||y(`Examples.Default`,!0),(0,m.jsx)(r,{title:`UI · Collapsible`,description:`Headless show/hide region.`,layer:`ui`,status:`ready`,children:(0,m.jsx)(i,{title:`Examples`,id:`examples`,children:(0,m.jsx)(a,{name:`Default`,source:g,children:(0,m.jsx)(h,{})})})})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,m.jsx)(t,{...e,children:(0,m.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};