admin-ui-starter-kit 0.6.6 → 0.6.8

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

@@ -0,0 +1,188 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-BXsVHOsI.js";import{t as s}from"./calendar-days-CNom8Y38.js";import{r as c,t as l}from"./example-Cv05rz75.js";import{t as u}from"./eye-CDSbB0kZ.js";import{t as d}from"./map-pin-D0qrpDJI.js";import{t as f}from"./package-check-CBgGiccG.js";import{t as p}from"./users-BVMmaveS.js";import{N as m,d as h,n as g}from"./index-ATou_nFA.js";import{t as _}from"./props-table-BAfz1Zc6.js";import{t as v}from"./smart-card-DER7dpD9.js";import{c as y,r as b,t as x,u as S}from"./item-Baq-Mmy2.js";import{t as C}from"./dialog-DiAkrPHO.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=h();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)(a,{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)(a,{type:`secondary`,className:`mb-4`,children:n.noResourceSelected}),(0,D.jsx)(c,{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:r,contentClassName:i=`space-y-3`,alert:o,alertVariant:s,actions:l,headerAction:d,footerText:f,resource:p,hasResource:h,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:h,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)(a,{type:`secondary`,children:I.noResourceSelected}),[M,R,P,L,I]),H=_?.DialogContentComponent,U=_?.DialogSummaryComponent,W=_?.SelectorComponent,G=_?.selectorProps??{},K=_?.dialogContentProps??{},q=h?B:V,J=!!(h&&x),Y=!!(R&&_&&W),X=J&&x?(0,D.jsx)(`div`,{className:x.className??`border-t pt-3`,children:(0,D.jsxs)(c,{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)(c,{variant:`secondary`,buttonStyle:`outline`,onClick:L.closeSelector,disabled:L.isConfirming,type:`button`,children:_.cancelText}),(0,D.jsx)(c,{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:g(`shared-resource-card--component`,`!gap-3`,r),contentClassName:i,alert:o,alertVariant:s,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)(a,{children:String(e)}):e}function P({title:e,description:t,status:n,items:r,actionLabel:i,onAction:o,className:s,contentClassName:l}){return(0,D.jsxs)(v,{title:e,description:t,headerEnd:n,padding:`default`,className:g(`booking-calendar-event-card--component`,`shadow-none`,s),contentClassName:g(`space-y-4`,l),children:[(0,D.jsx)(`div`,{className:`grid gap-2 sm:grid-cols-2`,children:r.map(e=>(0,D.jsxs)(`div`,{className:g(e.fullWidth===!0&&`sm:col-span-2`),children:[(0,D.jsx)(a,{size:`xs`,type:`secondary`,children:e.label}),N(e.value)]},e.id))}),(0,D.jsx)(`div`,{className:`flex justify-end`,children:(0,D.jsx)(c,{type:`button`,variant:`primary`,size:`small`,onClick:o,children:i})})]})}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 r=e?.id===n.id;return(0,D.jsx)(c,{type:`button`,variant:r?`primary`:`secondary`,buttonStyle:r?`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)(a,{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)(i,{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)(s,{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)(a,{size:`xs`,type:`secondary`,children:`Venue`}),(0,D.jsx)(a,{weight:`medium`,children:e.resource.name})]}),(0,D.jsxs)(`div`,{children:[(0,D.jsx)(a,{size:`xs`,type:`secondary`,children:`City`}),(0,D.jsx)(a,{weight:`medium`,children:e.resource.city})]}),(0,D.jsxs)(`div`,{children:[(0,D.jsx)(a,{size:`xs`,type:`secondary`,children:`Capacity`}),(0,D.jsx)(a,{weight:`medium`,children:e.resource.capacity})]}),(0,D.jsxs)(`div`,{children:[(0,D.jsx)(a,{size:`xs`,type:`secondary`,children:`Status`}),(0,D.jsx)(i,{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)(r,{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)(o,{title:`Examples`,id:`examples`,children:[(0,D.jsx)(l,{name:`BookingEventCard`,source:V,children:(0,D.jsx)(R,{})}),(0,D.jsx)(l,{name:`SharedResourceSelector`,source:V,children:(0,D.jsx)(z,{})}),(0,D.jsx)(l,{name:`EmptySharedResource`,source:V,children:(0,D.jsx)(B,{})})]}),(0,D.jsxs)(o,{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-BQ0hSEWX.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{p as n}from"./section-BXsVHOsI.js";import{d as r,n as i}from"./index-ATou_nFA.js";import{a,i as o,n as s,o as c,r as l,t as u}from"./card-CYz4UxYz.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={small:{shell:`gap-space-lg py-surface-sm`,headerX:`px-surface-sm`,contentX:`px-surface-sm`,contentY:`py-0`,footerX:`px-surface-sm`,alertX:`px-surface-sm`,alertOffsetWithHeader:`-mt-1`,alertOffsetStandalone:`mt-0`},default:{shell:`gap-space-xl py-[calc(var(--surface-y)+var(--space-xs))]`,headerX:`px-[calc(var(--surface-x)+var(--space-xs))]`,contentX:`px-[calc(var(--surface-x)+var(--space-xs))]`,contentY:`py-0`,footerX:`px-[calc(var(--surface-x)+var(--space-xs))]`,alertX:`px-[calc(var(--surface-x)+var(--space-xs))]`,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:i(`rounded-lg border border-border bg-card text-card-foreground shadow-xs`,`ring-4 ring-border/30`)};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=r();function _({className:e,...t}){return(0,g.jsx)(u,{className:i(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:i(f.header,`flex flex-col gap-1 px-4`,e),...t})}function y({className:e,children:t,...r}){return h(t)?typeof t==`string`||typeof t==`number`||typeof t==`bigint`?(0,g.jsx)(n,{"data-slot":`card-title`,tag:`div`,size:`base`,weight:`semibold`,lineHeight:`tight`,className:i(f.title,`min-w-0 font-semibold`,e),...r,children:t}):(0,g.jsx)(c,{className:i(f.title,`min-w-0 text-base leading-tight font-semibold`,e),...r,children:t}):null}function b({className:e,children:t,...r}){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:i(f.description,`text-muted-foreground text-sm`,e),...r,children:t}):(0,g.jsx)(l,{className:i(f.description,`text-muted-foreground text-sm`,e),...r,children:t}):null}function x({className:e,...t}){return(0,g.jsx)(s,{className:i(f.content,`px-4`,e),...t})}function S({className:e,...t}){return(0,g.jsx)(o,{className:i(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-CrNG04Bl.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{p as n,x as r}from"./section-BXsVHOsI.js";import{t as i}from"./circle-check-DvCYlVmL.js";import{d as a,n as o}from"./index-ATou_nFA.js";import{f as s}from"./form-sizing-Dltt6Fj-.js";import{n as c,r as l,t as u}from"./RadioGroup-DeYb8CGE.js";var d=e(t(),1),f={small:{padding:`p-3`,iconBox:`size-avatar-sm`,iconSize:`size-icon-sm`,gap:`gap-space-sm`},default:{padding:`p-4`,iconBox:`size-avatar`,iconSize:`size-icon`,gap:`gap-space-md`}},p={small:`h-control-sm px-control-sm text-sm`,default:`h-control px-control text-sm`},m={small:`px-row-x py-row-y-sm`,default:`px-row-x py-row-y`},h=a(),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:a,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)(a??[]),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:o(`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,a=w.includes(e.value),s=m||e.disabled,c=!!l&&a;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":a,"aria-invalid":p||void 0,onClick:()=>E(e.value),disabled:s,"data-selected":a,className:o(`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:o(`absolute top-2 right-2 size-4 text-primary-foreground fill-primary stroke-primary-foreground`,!a&&`hidden`)}),!!t&&(0,h.jsx)(`span`,{className:o(`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:a,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)(()=>o(v[g],x),[g,x]);return(0,h.jsx)(u,{value:t,defaultValue:a,onValueChange:e=>e&&p?.(e),name:m,disabled:y,"aria-invalid":_||void 0,className:o(`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:o(`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:o(`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-D4Lw-AI6.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-BXsVHOsI.js";import{t as a}from"./arrow-up-right-KnVxFmw9.js";import{Or as o,r as s,t as c}from"./example-Cv05rz75.js";import{t as l}from"./credit-card-QbZMZB90.js";import{t as u}from"./ellipsis-vertical-DHbOsjTF.js";import{t as ee}from"./pencil-DuBakHme.js";import{t as d}from"./plus-BRcp6JhT.js";import{t as f}from"./sparkles-DqH40POl.js";import{t as p}from"./trash-2-zILxQmtX.js";import{t as m}from"./trending-up-CRH278ig.js";import{t as h}from"./users-BVMmaveS.js";import{d as g,l as _}from"./index-ATou_nFA.js";import{t as v}from"./props-table-BAfz1Zc6.js";import{a as y,i as b,n as x,o as S,r as C,t as w}from"./card-primitives-BQ0hSEWX.js";import{n as T,t as E}from"./smart-card-DER7dpD9.js";import{a as D,i as O,r as k,t as A}from"./avatar-BeFx8JQd.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};