admin-ui-starter-kit 0.1.3 → 0.4.2

package/dist/showcase/assets/card-CRd07Iun.js

@@ -0,0 +1,188 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Er as r,hr as i,mr as a,r as o,t as s,yr as c}from"./example-BIrQab7K.js";import{t as l}from"./calendar-days-pr8kXiTx.js";import{t as u}from"./eye-CnRPL_H8.js";import{t as d}from"./map-pin-DUl-Lt6t.js";import{t as f}from"./package-check-CT0dhSM8.js";import{t as p}from"./users-ERTaffcv.js";import{k as m,n as h,s as g}from"./index-Cz4UGUT2.js";import{t as _}from"./props-table-BR-KjRNe.js";import{t as v}from"./smart-card-B4P_C0nk.js";import{c as y,r as b,t as x,u as S}from"./item-CbiuwbAN.js";import{t as C}from"./dialog-B85US9Ue.js";var w={currentlySelected:`Currently selected:`,noResourceContent:`No resource content configured.`,noResourceSelected:`No resource selected.`,changeAction:`Change`},T=t(n(),1);function E({resource:e,hasResource:t,mapInitialSelected:n,onConfirmSelection:r,isConfirmDisabled:i,onDialogOpen:a,onDialogClose:o,onError:s}){let[c,l]=(0,T.useState)(!1),[u,d]=(0,T.useState)(!1),[f,p]=(0,T.useState)(null),m=(0,T.useCallback)(()=>{let t=n(e);p(t),l(!0),a?.(t)},[n,a,e]),h=(0,T.useCallback)(()=>{u||(l(!1),p(null),o?.())},[u,o]),g=(0,T.useMemo)(()=>f===null?!1:i?!i(f):!0,[i,f]),_=(0,T.useCallback)(async()=>{if(!(u||!g||f===null)){d(!0);try{await r(f),l(!1),p(null),o?.()}catch(e){s?.(e,f)}finally{d(!1)}}},[g,u,r,o,s,f]);return(0,T.useMemo)(()=>({resource:e,hasResource:t,isSelectorOpen:c,isConfirming:u,selectedSuggestion:f,setSelectedSuggestion:p,openSelector:m,closeSelector:h,confirmSelection:_,canConfirmSelection:g}),[g,h,_,t,u,c,m,e,f])}var D=g();function O({context:e,strings:t}){let n=m(w,t),r=e.selectedSuggestion;if(r===null)return null;let i=typeof r==`object`&&r&&`label`in r&&typeof r.label==`string`?r.label:``;return(0,D.jsxs)(`div`,{className:`bg-muted rounded-md p-3 text-sm`,children:[(0,D.jsx)(`div`,{className:`font-medium`,children:n.currentlySelected}),(0,D.jsx)(`div`,{className:`text-muted-foreground mt-1`,children:i})]})}O.displayName=`DefaultDialogSummary`;function k({context:e,strings:t}){return(0,D.jsx)(r,{type:`secondary`,children:m(w,t).noResourceContent})}k.displayName=`DefaultResourceContent`;function A({context:e,strings:t}){let n=m(w,t);return(0,D.jsxs)(`div`,{className:`flex flex-col items-center justify-center py-8 text-center`,children:[(0,D.jsx)(r,{type:`secondary`,className:`mb-4`,children:n.noResourceSelected}),(0,D.jsx)(o,{variant:`secondary`,buttonStyle:`outline`,onClick:e.openSelector,type:`button`,children:n.changeAction})]})}A.displayName=`DefaultEmptyContent`;function j({SelectorComponent:e,selectorProps:t,context:n}){return(0,D.jsx)(`div`,{className:`py-2`,children:(0,D.jsx)(e,{onSelect:n.setSelectedSuggestion,selected:n.selectedSuggestion,setSelected:n.setSelectedSuggestion,inModal:!0,lockOnSelect:!1,context:`dialog`,...t})})}j.displayName=`DefaultDialogContent`;function M({icon:e,title:t,description:n,className:i,contentClassName:a=`space-y-3`,alert:s,alertVariant:c,actions:l,headerAction:d,footerText:f,resource:p,hasResource:g,selector:_,sections:y,sectionsClassName:b,viewLink:x,ResourceContentComponent:S,EmptyContentComponent:M,renderResourceContent:N,renderEmptyContent:P,strings:F}){let I=m(w,F),L=E({resource:p,hasResource:g,mapInitialSelected:_?.mapInitialSelected??(()=>null),onConfirmSelection:_?.onConfirmSelection??(()=>void 0),isConfirmDisabled:_?.isConfirmDisabled,onDialogOpen:_?.onDialogOpen,onDialogClose:_?.onDialogClose,onError:_?.onError}),R=_!==void 0,z=(0,T.useMemo)(()=>{let e=l??[],t=_?.actionLabel?.trim();return!R||!t?e.length>0?e:void 0:[...e,{id:`shared-resource-selector-change`,label:t,onClick:L.openSelector}]},[l,R,_?.actionLabel,L.openSelector]),B=(0,T.useMemo)(()=>{if(N)return N(L);if(S)return(0,D.jsx)(S,{context:L});if(Array.isArray(y)&&y.length>0){let e=y.filter(e=>e.when?e.when(L):!0);if(e.length>0)return(0,D.jsx)(`div`,{className:b??`space-y-3`,children:e.map(e=>{let t=e.Component;return(0,D.jsx)(`div`,{className:e.className,children:(0,D.jsx)(t,{context:L})},e.id)})})}return(0,D.jsx)(k,{context:L,strings:I})},[S,N,y,b,L,I]),V=(0,T.useMemo)(()=>P?P(L):M?(0,D.jsx)(M,{context:L}):R?(0,D.jsx)(A,{context:L,strings:I}):(0,D.jsx)(r,{type:`secondary`,children:I.noResourceSelected}),[M,R,P,L,I]),H=_?.DialogContentComponent,U=_?.DialogSummaryComponent,W=_?.SelectorComponent,G=_?.selectorProps??{},K=_?.dialogContentProps??{},q=g?B:V,J=!!(g&&x),Y=!!(R&&_&&W),X=J&&x?(0,D.jsx)(`div`,{className:x.className??`border-t pt-3`,children:(0,D.jsxs)(o,{href:x.href,variant:`primary`,fullWidth:!0,children:[(0,D.jsx)(u,{className:`h-4 w-4`}),x.label]})}):null,Z=Y&&_&&W?(0,D.jsxs)(C,{open:L.isSelectorOpen,onOpenChange:e=>{e||L.closeSelector()},title:_.title,description:_.description,size:_.dialogSize??`2xl`,showCancel:!1,showConfirm:!1,children:[H?(0,D.jsx)(H,{SelectorComponent:W,selectorProps:G,context:L,...K}):(0,D.jsx)(j,{SelectorComponent:W,selectorProps:G,context:L}),U?(0,D.jsx)(U,{context:L}):(0,D.jsx)(O,{context:L,strings:I}),(0,D.jsxs)(`div`,{className:`flex justify-end gap-2 border-t pt-4`,children:[(0,D.jsx)(o,{variant:`secondary`,buttonStyle:`outline`,onClick:L.closeSelector,disabled:L.isConfirming,type:`button`,children:_.cancelText}),(0,D.jsx)(o,{onClick:()=>{L.confirmSelection()},disabled:!L.canConfirmSelection||L.isConfirming,loading:L.isConfirming,type:`button`,children:_.confirmText})]})]}):null;return(0,D.jsxs)(D.Fragment,{children:[(0,D.jsxs)(v,{icon:e,title:t,description:n,className:h(`shared-resource-card--component`,`!gap-3`,i),contentClassName:a,alert:s,alertVariant:c,actions:z,headerAction:d,footerText:f,children:[q,X]}),Z]})}M.displayName=`SharedResourceCard`;function N(e){return typeof e==`string`||typeof e==`number`||typeof e==`bigint`?(0,D.jsx)(r,{children:String(e)}):e}function P({title:e,description:t,status:n,items:i,actionLabel:a,onAction:s,className:c,contentClassName:l}){return(0,D.jsxs)(v,{title:e,description:t,headerEnd:n,padding:`sm`,className:h(`booking-calendar-event-card--component`,`shadow-none`,c),contentClassName:h(`space-y-4`,l),children:[(0,D.jsx)(`div`,{className:`grid gap-2 sm:grid-cols-2`,children:i.map(e=>(0,D.jsxs)(`div`,{className:h(e.fullWidth===!0&&`sm:col-span-2`),children:[(0,D.jsx)(r,{size:`xs`,type:`secondary`,children:e.label}),N(e.value)]},e.id))}),(0,D.jsx)(`div`,{className:`flex justify-end`,children:(0,D.jsx)(o,{type:`button`,variant:`primary`,size:`xs`,onClick:s,children:a})})]})}var F=e({BookingEventCard:()=>R,EmptySharedResource:()=>B,SharedResourceSelector:()=>z}),I=[{id:`atrium`,name:`Atrium Hall`,city:`Sofia`,capacity:`120 guests`,status:`Available`},{id:`terrace`,name:`Garden Terrace`,city:`Plovdiv`,capacity:`64 guests`,status:`Needs review`}];function L({selected:e,setSelected:t}){return(0,D.jsx)(`div`,{className:`space-y-2`,children:I.map(n=>{let i=e?.id===n.id;return(0,D.jsx)(o,{type:`button`,variant:i?`primary`:`secondary`,buttonStyle:i?`solid`:`outline`,fullWidth:!0,onClick:()=>t(n),className:`h-auto justify-start px-3 py-2`,children:(0,D.jsxs)(x,{className:`border-0 p-0`,children:[(0,D.jsx)(y,{children:(0,D.jsx)(d,{className:`size-4`,"aria-hidden":!0})}),(0,D.jsxs)(b,{children:[(0,D.jsx)(S,{children:n.name}),(0,D.jsxs)(r,{size:`xs`,type:`secondary`,children:[n.city,` - `,n.capacity]})]})]})},n.id)})})}function R(){return(0,D.jsx)(P,{title:`Reservation #BK-1048`,description:`Chef table booking for the evening service.`,status:(0,D.jsx)(c,{variant:`success`,children:`Confirmed`}),items:[{id:`date`,label:`Date`,value:`Jun 24, 2026`},{id:`time`,label:`Time`,value:`19:30`},{id:`guest`,label:`Guest`,value:`Maya Chen`},{id:`party`,label:`Party size`,value:`6 guests`},{id:`notes`,label:`Notes`,value:`Anniversary dinner, vegetarian tasting menu.`,fullWidth:!0}],actionLabel:`Open booking`,onAction:()=>void 0})}function z(){let[e,t]=(0,T.useState)(I[0]);return(0,D.jsx)(M,{icon:(0,D.jsx)(l,{className:`size-4`,"aria-hidden":!0}),title:`Assigned venue`,description:`A controlled resource card with a selector dialog and async-safe confirmation.`,resource:e,hasResource:e!==null,selector:{title:`Change venue`,description:`Pick the venue used for this booking.`,actionLabel:`Change venue`,confirmText:`Use venue`,cancelText:`Cancel`,mapInitialSelected:e=>e,onConfirmSelection:async e=>{t(e)},SelectorComponent:L,dialogSize:`md`},viewLink:{href:`#`,label:`View venue`},renderResourceContent:e=>e.resource?(0,D.jsxs)(`div`,{className:`grid gap-2 text-sm sm:grid-cols-2`,children:[(0,D.jsxs)(`div`,{children:[(0,D.jsx)(r,{size:`xs`,type:`secondary`,children:`Venue`}),(0,D.jsx)(r,{weight:`medium`,children:e.resource.name})]}),(0,D.jsxs)(`div`,{children:[(0,D.jsx)(r,{size:`xs`,type:`secondary`,children:`City`}),(0,D.jsx)(r,{weight:`medium`,children:e.resource.city})]}),(0,D.jsxs)(`div`,{children:[(0,D.jsx)(r,{size:`xs`,type:`secondary`,children:`Capacity`}),(0,D.jsx)(r,{weight:`medium`,children:e.resource.capacity})]}),(0,D.jsxs)(`div`,{children:[(0,D.jsx)(r,{size:`xs`,type:`secondary`,children:`Status`}),(0,D.jsx)(c,{variant:`secondary`,children:e.resource.status})]})]}):null})}function B(){return(0,D.jsx)(M,{icon:(0,D.jsx)(f,{className:`size-4`,"aria-hidden":!0}),title:`Fulfillment partner`,description:`Empty state stays owned by the feature and can be replaced with a slot.`,resource:null,hasResource:!1,selector:{title:`Assign partner`,description:`Select a resource from the consumer-owned list.`,actionLabel:`Assign partner`,confirmText:`Assign`,cancelText:`Cancel`,mapInitialSelected:()=>null,onConfirmSelection:async()=>void 0,SelectorComponent:L},strings:{noResourceSelected:`No partner assigned yet.`,changeAction:`Assign`},footerText:(0,D.jsxs)(`span`,{className:`inline-flex items-center gap-1`,children:[(0,D.jsx)(p,{className:`size-3`,"aria-hidden":!0}),`Consumer controls persistence and routing.`]})})}var V=`import { useState } from 'react';
+import { CalendarDays, MapPin, PackageCheck, Users } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Item, ItemContent, ItemMedia, ItemTitle } from '@/components/base/item';
+import {
+	BookingCalendarEventCard,
+	SharedResourceCard,
+	type SharedResourceSelectorComponentProps,
+} from '@/components/features/card';
+import { Text } from '@/components/typography';
+
+type Venue = {
+	id: string;
+	name: string;
+	city: string;
+	capacity: string;
+	status: string;
+};
+
+const venues: Venue[] = [
+	{
+		id: 'atrium',
+		name: 'Atrium Hall',
+		city: 'Sofia',
+		capacity: '120 guests',
+		status: 'Available',
+	},
+	{
+		id: 'terrace',
+		name: 'Garden Terrace',
+		city: 'Plovdiv',
+		capacity: '64 guests',
+		status: 'Needs review',
+	},
+];
+
+function VenueSelector({
+	selected,
+	setSelected,
+}: SharedResourceSelectorComponentProps<Venue>) {
+	return (
+		<div className="space-y-2">
+			{venues.map((venue) => {
+				const active = selected?.id === venue.id;
+				return (
+					<Button
+						key={venue.id}
+						type="button"
+						variant={active ? 'primary' : 'secondary'}
+						buttonStyle={active ? 'solid' : 'outline'}
+						fullWidth
+						onClick={() => setSelected(venue)}
+						className="h-auto justify-start px-3 py-2"
+					>
+						<Item className="border-0 p-0">
+							<ItemMedia>
+								<MapPin className="size-4" aria-hidden />
+							</ItemMedia>
+							<ItemContent>
+								<ItemTitle>{venue.name}</ItemTitle>
+								<Text size="xs" type="secondary">
+									{venue.city} - {venue.capacity}
+								</Text>
+							</ItemContent>
+						</Item>
+					</Button>
+				);
+			})}
+		</div>
+	);
+}
+
+export function BookingEventCard() {
+	return (
+		<BookingCalendarEventCard
+			title="Reservation #BK-1048"
+			description="Chef table booking for the evening service."
+			status={<Badge variant="success">Confirmed</Badge>}
+			items={[
+				{ id: 'date', label: 'Date', value: 'Jun 24, 2026' },
+				{ id: 'time', label: 'Time', value: '19:30' },
+				{ id: 'guest', label: 'Guest', value: 'Maya Chen' },
+				{ id: 'party', label: 'Party size', value: '6 guests' },
+				{
+					id: 'notes',
+					label: 'Notes',
+					value: 'Anniversary dinner, vegetarian tasting menu.',
+					fullWidth: true,
+				},
+			]}
+			actionLabel="Open booking"
+			onAction={() => undefined}
+		/>
+	);
+}
+
+export function SharedResourceSelector() {
+	const [venue, setVenue] = useState<Venue | null>(venues[0]);
+
+	return (
+		<SharedResourceCard<Venue, Venue>
+			icon={<CalendarDays className="size-4" aria-hidden />}
+			title="Assigned venue"
+			description="A controlled resource card with a selector dialog and async-safe confirmation."
+			resource={venue}
+			hasResource={venue !== null}
+			selector={{
+				title: 'Change venue',
+				description: 'Pick the venue used for this booking.',
+				actionLabel: 'Change venue',
+				confirmText: 'Use venue',
+				cancelText: 'Cancel',
+				mapInitialSelected: (current) => current,
+				onConfirmSelection: async (selection) => {
+					setVenue(selection);
+				},
+				SelectorComponent: VenueSelector,
+				dialogSize: 'md',
+			}}
+			viewLink={{ href: '#', label: 'View venue' }}
+			renderResourceContent={(ctx) =>
+				ctx.resource ? (
+					<div className="grid gap-2 text-sm sm:grid-cols-2">
+						<div>
+							<Text size="xs" type="secondary">
+								Venue
+							</Text>
+							<Text weight="medium">{ctx.resource.name}</Text>
+						</div>
+						<div>
+							<Text size="xs" type="secondary">
+								City
+							</Text>
+							<Text weight="medium">{ctx.resource.city}</Text>
+						</div>
+						<div>
+							<Text size="xs" type="secondary">
+								Capacity
+							</Text>
+							<Text weight="medium">{ctx.resource.capacity}</Text>
+						</div>
+						<div>
+							<Text size="xs" type="secondary">
+								Status
+							</Text>
+							<Badge variant="secondary">{ctx.resource.status}</Badge>
+						</div>
+					</div>
+				) : null
+			}
+		/>
+	);
+}
+
+export function EmptySharedResource() {
+	return (
+		<SharedResourceCard<Venue, Venue>
+			icon={<PackageCheck className="size-4" aria-hidden />}
+			title="Fulfillment partner"
+			description="Empty state stays owned by the feature and can be replaced with a slot."
+			resource={null}
+			hasResource={false}
+			selector={{
+				title: 'Assign partner',
+				description: 'Select a resource from the consumer-owned list.',
+				actionLabel: 'Assign partner',
+				confirmText: 'Assign',
+				cancelText: 'Cancel',
+				mapInitialSelected: () => null,
+				onConfirmSelection: async () => undefined,
+				SelectorComponent: VenueSelector,
+			}}
+			strings={{
+				noResourceSelected: 'No partner assigned yet.',
+				changeAction: 'Assign',
+			}}
+			footerText={
+				<span className="inline-flex items-center gap-1">
+					<Users className="size-3" aria-hidden />
+					Consumer controls persistence and routing.
+				</span>
+			}
+		/>
+	);
+}
+`;function H(e){let t={h4:`h4`,...e.components};return F||W(`Examples`,!1),R||W(`Examples.BookingEventCard`,!0),B||W(`Examples.EmptySharedResource`,!0),z||W(`Examples.SharedResourceSelector`,!0),(0,D.jsxs)(i,{title:`Features · Card`,description:`Stateful feature cards for booking/event details and shared resource assignment. Selector state, confirmation, dialog chrome, slots, render-props, and strings stay callback-driven so consumers own persistence.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/card`,children:[(0,D.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,D.jsx)(s,{name:`BookingEventCard`,source:V,children:(0,D.jsx)(R,{})}),(0,D.jsx)(s,{name:`SharedResourceSelector`,source:V,children:(0,D.jsx)(z,{})}),(0,D.jsx)(s,{name:`EmptySharedResource`,source:V,children:(0,D.jsx)(B,{})})]}),(0,D.jsxs)(a,{title:`API`,id:`api`,children:[(0,D.jsx)(t.h4,{children:`BookingCalendarEventCard`}),(0,D.jsx)(_,{component:`BookingCalendarEventCard`}),(0,D.jsx)(t.h4,{children:`SharedResourceCard`}),(0,D.jsx)(_,{component:`SharedResourceCard`})]})]})}function U(e={}){let{wrapper:t}=e.components||{};return t?(0,D.jsx)(t,{...e,children:(0,D.jsx)(H,{...e})}):H(e)}function W(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{U as default};

package/dist/showcase/assets/card-primitives-YgCOqVDI.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Er as n}from"./example-BIrQab7K.js";import{n as r,s as i}from"./index-Cz4UGUT2.js";import{a,i as o,n as s,o as c,r as l,t as u}from"./card-CFIG8Dgg.js";var d=e(t(),1),f={root:`card--component`,header:`card--header`,title:`card--title`,description:`card--description`,content:`card--content`,footer:`card--footer`,alert:`card--alert`},p={sm:{shell:`gap-3 py-4`,headerX:`px-4`,contentX:`px-4`,contentY:`py-0`,footerX:`px-4`,alertX:`px-4`,alertOffsetWithHeader:`-mt-1`,alertOffsetStandalone:`mt-0`},base:{shell:`gap-4 py-6`,headerX:`px-6`,contentX:`px-6`,contentY:`py-0`,footerX:`px-6`,alertX:`px-6`,alertOffsetWithHeader:`-mt-1`,alertOffsetStandalone:`mt-0`},lg:{shell:`gap-4 py-6`,headerX:`px-6`,contentX:`px-6`,contentY:`py-0`,footerX:`px-6`,alertX:`px-6`,alertOffsetWithHeader:`-mt-1`,alertOffsetStandalone:`mt-0`}},m={card:`rounded-lg border border-border bg-card text-card-foreground shadow-xs`,flat:`bg-transparent text-card-foreground border-none shadow-none`,framed:r(`relative bg-card text-card-foreground shadow-xs`,`rounded-lg border-[3px] border-border/30`,`before:pointer-events-none before:absolute before:inset-0 before:rounded-md before:border before:border-border/60 before:content-[""]`)};function h(e){return e==null||typeof e==`boolean`?!1:typeof e==`string`?e.trim().length>0:typeof e==`number`||typeof e==`bigint`?!0:Array.isArray(e)?e.some(h):(0,d.isValidElement)(e)&&e.type===d.Fragment?h(e.props.children):!0}var g=i();function _({className:e,...t}){return(0,g.jsx)(u,{className:r(f.root,`flex w-full flex-col gap-3 py-4 ring-0`,e),...t})}function v({className:e,...t}){return(0,g.jsx)(a,{className:r(f.header,`flex flex-col gap-0.5 px-4`,e),...t})}function y({className:e,children:t,...i}){return h(t)?typeof t==`string`||typeof t==`number`||typeof t==`bigint`?(0,g.jsx)(n,{"data-slot":`card-title`,tag:`div`,weight:`semibold`,lineHeight:`none`,className:r(f.title,`min-w-0 leading-none font-semibold`,e),...i,children:t}):(0,g.jsx)(c,{className:r(f.title,`min-w-0 leading-none font-semibold`,e),...i,children:t}):null}function b({className:e,children:t,...i}){return h(t)?typeof t==`string`||typeof t==`number`||typeof t==`bigint`?(0,g.jsx)(n,{"data-slot":`card-description`,tag:`div`,type:`secondary`,className:r(f.description,`text-muted-foreground text-sm`,e),...i,children:t}):(0,g.jsx)(l,{className:r(f.description,`text-muted-foreground text-sm`,e),...i,children:t}):null}function x({className:e,...t}){return(0,g.jsx)(s,{className:r(f.content,`px-4`,e),...t})}function S({className:e,...t}){return(0,g.jsx)(o,{className:r(f.footer,`flex items-center px-4`,e),...t})}export{_ as a,f as c,v as i,p as l,b as n,y as o,S as r,h as s,x as t,m as u};

package/dist/showcase/assets/card-radio-group-Du6yaMZ-.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Er as n,Lr as r}from"./example-BIrQab7K.js";import{t as i}from"./circle-check-TT7cFQrr.js";import{n as a,s as o}from"./index-Cz4UGUT2.js";import{i as s}from"./form-sizing-DHUDpiPA.js";import{n as c,r as l,t as u}from"./RadioGroup-C-0MNAYY.js";var d=e(t(),1),f={sm:{padding:`p-3`,iconBox:`h-7 w-7`,iconSize:`size-3.5`,gap:`gap-1`},base:{padding:`p-4`,iconBox:`h-8 w-8`,iconSize:`size-4`,gap:`gap-1.5`},lg:{padding:`p-5`,iconBox:`h-10 w-10`,iconSize:`size-5`,gap:`gap-2`}},p={sm:`h-7 px-2.5 text-xs`,base:`h-8 px-3 text-xs`,lg:`h-9 px-4 text-sm`},m={sm:`px-3 py-2`,base:`px-4 py-3`,lg:`px-5 py-3.5`},h=o(),g={1:`grid grid-cols-1 gap-2`,2:`grid grid-cols-1 gap-2 sm:grid-cols-2`,3:`grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3`,4:`grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4`};function _({options:e,value:t,defaultValue:o,onChange:c,name:l,columns:u=3,invalid:p,disabled:m,size:_,className:v}){let{defaultControlSize:y}=r(),b=s(_,y),x=t!==void 0,[S,C]=(0,d.useState)(o??[]),w=(0,d.useMemo)(()=>x?t??[]:S,[S,x,t]),T=f[b],E=(0,d.useCallback)(t=>{if(m||e.find(e=>e.value===t)?.disabled)return;let n=w.includes(t)?w.filter(e=>e!==t):[...w,t];x||C(n),c?.(n)},[m,e,w,x,c]);return(0,h.jsx)(`div`,{className:a(`card-checkbox-group--component`,g[u],v),role:`group`,"aria-invalid":p||void 0,"aria-disabled":m||void 0,children:e.map(e=>{let t=e.icon,r=e.label??e.title,o=w.includes(e.value),s=m||e.disabled,c=!!l&&o;return(0,h.jsxs)(`div`,{className:`relative`,children:[(0,h.jsx)(`input`,{type:`hidden`,name:l?`${l}[]`:void 0,value:e.value,"aria-hidden":`true`,hidden:!0,disabled:!c}),(0,h.jsxs)(`button`,{type:`button`,"aria-pressed":o,"aria-invalid":p||void 0,onClick:()=>E(e.value),disabled:s,"data-selected":o,className:a(`group relative flex w-full flex-col items-start text-start outline-none cursor-pointer`,`rounded-lg border bg-card transition-[color,box-shadow,background,border-color] duration-150`,`border-border hover:border-foreground/20 hover:bg-muted/30`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50`,`data-[selected=true]:border-primary data-[selected=true]:bg-primary/[0.04]`,T.padding,T.gap,`aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20`,`disabled:cursor-not-allowed disabled:opacity-50`),children:[(0,h.jsx)(i,{className:a(`absolute top-2 right-2 size-4 text-primary-foreground fill-primary stroke-primary-foreground`,!o&&`hidden`)}),!!t&&(0,h.jsx)(`span`,{className:a(`inline-flex items-center justify-center rounded-md bg-muted/50 text-muted-foreground group-hover:bg-muted`,`group-data-[selected=true]:bg-primary/10 group-data-[selected=true]:text-primary`,T.iconBox),children:(0,h.jsx)(t,{className:T.iconSize})}),(0,h.jsx)(n,{tag:`span`,weight:`medium`,children:r}),!!e.description&&(0,h.jsx)(n,{size:`xs`,type:`secondary`,children:e.description})]})]},e.value)})})}_.displayName=`CardCheckboxGroup`;var v={1:`grid grid-cols-1 gap-2`,2:`grid grid-cols-1 gap-2 sm:grid-cols-2`,3:`grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3`,4:`grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-4`};function y({options:e,value:t,defaultValue:o,onChange:p,name:m,columns:g=3,invalid:_,disabled:y,size:b,className:x}){let{defaultControlSize:S}=r(),C=f[s(b,S)],w=(0,d.useMemo)(()=>a(v[g],x),[g,x]);return(0,h.jsx)(u,{value:t,defaultValue:o,onValueChange:e=>e&&p?.(e),name:m,disabled:y,"aria-invalid":_||void 0,className:a(`card-radio-group--component`,w),children:e.map(e=>{let t=e.icon,r=e.label??e.title;return(0,h.jsxs)(l,{value:e.value,disabled:y||e.disabled,"aria-invalid":_||void 0,className:a(`relative group flex flex-col text-start outline-none cursor-pointer`,`rounded-lg border bg-card transition-[color,box-shadow,background,border-color] duration-150`,`border-border hover:border-foreground/20 hover:bg-muted/30`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50`,`data-[checked]:border-primary data-[checked]:bg-primary/[0.04]`,C.padding,C.gap,`aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20`,`disabled:cursor-not-allowed disabled:opacity-50`),children:[(0,h.jsx)(c,{render:(0,h.jsx)(i,{className:`absolute top-2 right-2 size-4 text-primary-foreground fill-primary stroke-primary-foreground`})}),!!t&&(0,h.jsx)(`span`,{className:a(`inline-flex items-center justify-center rounded-md bg-muted/50 text-muted-foreground group-hover:bg-muted`,`group-data-[checked]:bg-primary/10 group-data-[checked]:text-primary`,C.iconBox),children:(0,h.jsx)(t,{className:C.iconSize})}),(0,h.jsx)(n,{tag:`span`,weight:`semibold`,children:r}),!!e.description&&(0,h.jsx)(n,{size:`xs`,type:`secondary`,children:e.description})]},e.value)})})}var b=(0,d.memo)(y);b.displayName=`CardRadioGroup`;export{p as i,_ as n,m as r,b as t};

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

@@ -0,0 +1,328 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Er as t,hr as n,jr as r,mr as i,r as a,t as o,yr as s}from"./example-BIrQab7K.js";import{t as c}from"./arrow-up-right-CuAsO3-r.js";import{t as l}from"./credit-card-CYgRtM77.js";import{t as u}from"./ellipsis-vertical-yH8S83bc.js";import{t as d}from"./pencil-BouoJ5x7.js";import{t as f}from"./plus-DkHZm34I.js";import{t as p}from"./sparkles-DFJmoAFP.js";import{t as m}from"./trash-2-OsaEm8cc.js";import{t as h}from"./trending-up-HlQQXTth.js";import{t as g}from"./users-ERTaffcv.js";import{a as _,s as v}from"./index-Cz4UGUT2.js";import{t as y}from"./props-table-BR-KjRNe.js";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./card-primitives-YgCOqVDI.js";import{n as E,t as D}from"./smart-card-B4P_C0nk.js";import{r as O,t as k}from"./avatar-5EFTnHEG.js";var A=_(`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=v();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)(t,{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)(s,{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)(t,{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)(s,{variant:`info`,size:`sm`,children:`Pending`}),children:(0,M.jsx)(t,{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)(t,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Info`,alertVariant:`info`,alert:`Heads up — info-style.`,children:(0,M.jsx)(t,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Warning`,alertVariant:`warning`,alert:`Heads up — warning.`,children:(0,M.jsx)(t,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Success`,alertVariant:`success`,alert:`All systems go.`,children:(0,M.jsx)(t,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Destructive`,alertVariant:`destructive`,alert:`This action cannot be undone.`,children:(0,M.jsx)(t,{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)(t,{children:[`Card body with `,e,` padding.`]})},e))})}function R(){return(0,M.jsxs)(`div`,{className:`grid w-full grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3`,children:[(0,M.jsx)(D,{surface:`card`,title:`Card (default)`,description:`Bordered + soft shadow.`,children:(0,M.jsx)(t,{type:`secondary`,children:`Canonical card chrome.`})}),(0,M.jsx)(D,{surface:`flat`,title:`Flat`,description:`No border, no shadow.`,children:(0,M.jsx)(t,{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)(t,{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)(s,{variant:`primary`,children:`Start`}),headerEnd:(0,M.jsx)(s,{variant:`secondary`,children:`End`}),headerAction:(0,M.jsx)(f,{className:`size-4 text-muted-foreground`}),children:(0,M.jsx)(t,{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)(s,{variant:`secondary`,children:[(0,M.jsx)(r,{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)(s,{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,n])=>(0,M.jsxs)(`div`,{className:`flex justify-between`,children:[(0,M.jsx)(t,{tag:`span`,weight:`medium`,children:e}),(0,M.jsx)(t,{tag:`span`,type:`secondary`,children:n})]},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)(t,{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)(E,{})})}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)(s,{variant:`success`,children:`+12.4%`}),footerText:`Updated 5 minutes ago`,children:(0,M.jsxs)(`div`,{className:`space-y-1`,children:[(0,M.jsx)(t,{size:`xl`,weight:`semibold`,lineHeight:`none`,className:`text-3xl tabular-nums`,children:`$48,290`}),(0,M.jsx)(t,{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)(t,{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)(b,{className:`w-full max-w-md`,children:[(0,M.jsxs)(x,{children:[(0,M.jsx)(C,{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)(t,{type:`secondary`,children:"`CardShell`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter` are all exported from `base/cards` for advanced layouts."})}),(0,M.jsxs)(w,{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)(t,{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)(t,{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)(t,{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/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="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-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-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)(i,{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)(i,{title:`Default`,id:`default`,children:(0,M.jsx)(o,{name:`Default`,source:J,children:(0,M.jsx)(N,{})})}),(0,M.jsx)(i,{title:`Surface variants`,id:`surfaces`,children:(0,M.jsx)(o,{name:`SurfaceVariants`,source:J,children:(0,M.jsx)(R,{})})}),(0,M.jsx)(i,{title:`Padding sizes`,id:`padding`,children:(0,M.jsx)(o,{name:`PaddingSizes`,source:J,children:(0,M.jsx)(L,{})})}),(0,M.jsxs)(i,{title:`Header composition`,id:`header`,children:[(0,M.jsx)(o,{name:`WithIconTooltipFooter`,source:J,children:(0,M.jsx)(P,{})}),(0,M.jsx)(o,{name:`HeaderSlots`,source:J,children:(0,M.jsx)(z,{})}),(0,M.jsx)(o,{name:`WithActions`,source:J,children:(0,M.jsx)(F,{})}),(0,M.jsx)(o,{name:`HeaderAndFooterDividers`,source:J,children:(0,M.jsx)(B,{})})]}),(0,M.jsx)(i,{title:`Alerts`,id:`alerts`,children:(0,M.jsx)(o,{name:`AlertVariants`,source:J,children:(0,M.jsx)(I,{})})}),(0,M.jsxs)(i,{title:`Expandable`,id:`expandable`,children:[(0,M.jsx)(o,{name:`ExpandableUncontrolled`,source:J,children:(0,M.jsx)(V,{})}),(0,M.jsx)(o,{name:`ExpandableCustomLabels`,source:J,children:(0,M.jsx)(H,{})})]}),(0,M.jsx)(i,{title:`States`,id:`states`,children:(0,M.jsx)(o,{name:`Skeleton`,source:J,children:(0,M.jsx)(U,{})})}),(0,M.jsxs)(i,{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)(o,{name:`PrimitiveComposition`,source:J,children:(0,M.jsx)(K,{})})]}),(0,M.jsxs)(i,{title:`Realistic usage`,id:`realistic`,children:[(0,M.jsx)(o,{name:`MetricKPICard`,source:J,children:(0,M.jsx)(W,{})}),(0,M.jsx)(o,{name:`NotificationCard`,source:J,children:(0,M.jsx)(G,{})}),(0,M.jsx)(o,{name:`StatRowClickable`,source:J,children:(0,M.jsx)(q,{})})]}),(0,M.jsx)(i,{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};