admin-ui-starter-kit 0.4.5 → 0.6.1

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

@@ -1,188 +0,0 @@
-import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,jr as o,r as s,t as c}from"./example-CTJ8AdNR.js";import{t as l}from"./calendar-days-C0gTLVnY.js";import{t as u}from"./eye-CDMCDLei.js";import{t as d}from"./map-pin-CpOVa8IH.js";import{t as f}from"./package-check-Ol-Cw3j-.js";import{t as p}from"./users-BUb7CmVp.js";import{k as m,n as h,s as g}from"./index-DaYVSqKu.js";import{t as _}from"./props-table-C8la6vcG.js";import{t as v}from"./smart-card-CHouYi8U.js";import{c as y,r as b,t as x,u as S}from"./item-C4Xk3DC1.js";import{t as C}from"./dialog-BuatDnQ9.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)(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)(s,{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: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)(a,{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)(s,{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)(s,{variant:`secondary`,buttonStyle:`outline`,onClick:L.closeSelector,disabled:L.isConfirming,type:`button`,children:_.cancelText}),(0,D.jsx)(s,{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`,r),contentClassName:i,alert:o,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)(a,{children:String(e)}):e}function P({title:e,description:t,status:n,items:r,actionLabel:i,onAction:o,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:r.map(e=>(0,D.jsxs)(`div`,{className:h(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)(s,{type:`button`,variant:`primary`,size:`xs`,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)(s,{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)(o,{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)(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)(o,{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)(i,{title:`Examples`,id:`examples`,children:[(0,D.jsx)(c,{name:`BookingEventCard`,source:V,children:(0,D.jsx)(R,{})}),(0,D.jsx)(c,{name:`SharedResourceSelector`,source:V,children:(0,D.jsx)(z,{})}),(0,D.jsx)(c,{name:`EmptySharedResource`,source:V,children:(0,D.jsx)(B,{})})]}),(0,D.jsxs)(i,{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-By4-RTuP.js

@@ -1 +0,0 @@
-import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Rr as n}from"./example-CTJ8AdNR.js";import{n as r,s as i}from"./index-DaYVSqKu.js";import{a,i as o,n as s,o as c,r as l,t as u}from"./card-1ncRnRvq.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-DeX3qsRg.js

@@ -1 +0,0 @@
-import{r as e}from"./chunk-QTnfLwEv.js";import{n as t}from"./react-dom-Bz4cALsF.js";import{Rr as n,Yr as r}from"./example-CTJ8AdNR.js";import{t as i}from"./circle-check-CbiRRw7s.js";import{n as a,s as o}from"./index-DaYVSqKu.js";import{i as s}from"./form-sizing-DHUDpiPA.js";import{n as c,r as l,t as u}from"./RadioGroup-Bp1VCzxr.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-DdqQr8rY.js

@@ -1,328 +0,0 @@
-import{n as e}from"./chunk-QTnfLwEv.js";import{Dr as t,Er as n,Rr as r,Ur as i,jr as a,r as o,t as s}from"./example-CTJ8AdNR.js";import{t as c}from"./arrow-up-right-IyQ3oeq0.js";import{t as l}from"./credit-card-BYMQj03s.js";import{t as u}from"./ellipsis-vertical-DeOMIw1J.js";import{t as d}from"./pencil-Cl9qi90g.js";import{t as f}from"./plus-CO8t66Yo.js";import{t as p}from"./sparkles-B18eTHVN.js";import{t as m}from"./trash-2-C9AC7Pcv.js";import{t as h}from"./trending-up-CGaDZj0S.js";import{t as g}from"./users-BUb7CmVp.js";import{a as _,s as v}from"./index-DaYVSqKu.js";import{t as y}from"./props-table-C8la6vcG.js";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./card-primitives-By4-RTuP.js";import{n as E,t as D}from"./smart-card-CHouYi8U.js";import{r as O,t as k}from"./avatar-n1nywTlx.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)(r,{children:`Card content goes here.`})})}function P(){return(0,M.jsx)(D,{className:`w-full max-w-md`,icon:(0,M.jsx)(p,{className:`size-4`}),title:`Insights`,titleSuffix:(0,M.jsx)(a,{variant:`success`,children:`New`}),description:`High-level summary of recent activity.`,tooltip:`Updated every 15 minutes`,footerText:`Last refreshed 2 minutes ago`,children:(0,M.jsx)(r,{children:`Lorem ipsum dolor sit amet.`})})}function F(){return(0,M.jsx)(D,{className:`w-full max-w-md`,title:`Order #ORD-2026-0412`,description:`Sarah Smith — 2,450 USD`,actions:[{id:`edit`,label:`Edit`,icon:(0,M.jsx)(d,{className:`size-3.5`}),onClick:()=>{}},{id:`delete`,label:`Delete`,icon:(0,M.jsx)(m,{className:`size-3.5`}),onClick:()=>{}}],headerEnd:(0,M.jsx)(a,{variant:`info`,size:`sm`,children:`Pending`}),children:(0,M.jsx)(r,{type:`secondary`,children:`3 vouchers — wellness, food, adventure.`})})}function I(){return(0,M.jsxs)(`div`,{className:`grid w-full max-w-md gap-3`,children:[(0,M.jsx)(D,{title:`Default alert`,alert:`An informational message.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Info`,alertVariant:`info`,alert:`Heads up — info-style.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Warning`,alertVariant:`warning`,alert:`Heads up — warning.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Success`,alertVariant:`success`,alert:`All systems go.`,children:(0,M.jsx)(r,{children:`Body content.`})}),(0,M.jsx)(D,{title:`Destructive`,alertVariant:`destructive`,alert:`This action cannot be undone.`,children:(0,M.jsx)(r,{children:`Body content.`})})]})}function L(){return(0,M.jsx)(`div`,{className:`grid w-full max-w-md gap-3`,children:[`sm`,`base`,`lg`].map(e=>(0,M.jsx)(D,{title:`padding="${e}"`,padding:e,children:(0,M.jsxs)(r,{children:[`Card body with `,e,` padding.`]})},e))})}function R(){return(0,M.jsxs)(`div`,{className:`grid w-full grid-cols-[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)(r,{type:`secondary`,children:`Canonical card chrome.`})}),(0,M.jsx)(D,{surface:`flat`,title:`Flat`,description:`No border, no shadow.`,children:(0,M.jsx)(r,{type:`secondary`,children:`Use when nesting inside another surface.`})}),(0,M.jsx)(D,{surface:`framed`,title:`Framed`,description:`Matted polaroid look.`,children:(0,M.jsx)(r,{type:`secondary`,children:`5px outer border + 1px hairline inner.`})})]})}function z(){return(0,M.jsx)(D,{className:`w-full max-w-md`,title:`Header composition`,headerStart:(0,M.jsx)(a,{variant:`primary`,children:`Start`}),headerEnd:(0,M.jsx)(a,{variant:`secondary`,children:`End`}),headerAction:(0,M.jsx)(f,{className:`size-4 text-muted-foreground`}),children:(0,M.jsx)(r,{children:`headerStart, headerEnd & headerAction.`})})}function B(){return(0,M.jsx)(D,{className:`w-full max-w-sm`,headerDivider:!0,footerDivider:!0,headerStart:(0,M.jsxs)(a,{variant:`secondary`,children:[(0,M.jsx)(i,{className:`size-3`}),` Live`]}),headerEnd:(0,M.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,"aria-label":`More options`,children:(0,M.jsx)(u,{className:`size-4`})}),title:`Integration name`,titleSuffix:(0,M.jsx)(a,{variant:`success`,children:`Installed`}),description:`Short description of the integration in one line.`,footerSlot:(0,M.jsx)(o,{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)(o,{variant:`secondary`,buttonStyle:`ghost`,children:`Billing`}),children:(0,M.jsxs)(`div`,{className:`space-y-5`,children:[(0,M.jsxs)(`div`,{className:`rounded-lg bg-muted/60 p-4 space-y-2`,children:[(0,M.jsxs)(`div`,{className:`flex justify-between text-xs text-muted-foreground font-medium`,children:[(0,M.jsx)(`span`,{children:`Included credit`}),(0,M.jsx)(`span`,{children:`On-demand charges`})]}),(0,M.jsxs)(`div`,{className:`flex justify-between font-semibold`,children:[(0,M.jsx)(`span`,{children:`$18.08 / $20`}),(0,M.jsx)(`span`,{children:`$0`})]})]}),(0,M.jsx)(`dl`,{className:`grid gap-3 text-sm`,children:[[`Requests`,`$210.84`],[`Active CPU`,`$21.95`],[`Events`,`$21.20`],[`Storage usage`,`$20.45`],[`Bandwidth`,`$0.00`]].map(([e,t])=>(0,M.jsxs)(`div`,{className:`flex justify-between`,children:[(0,M.jsx)(r,{tag:`span`,weight:`medium`,children:e}),(0,M.jsx)(r,{tag:`span`,type:`secondary`,children:t})]},e))})]})})}function H(){return(0,M.jsx)(D,{className:`w-full max-w-md`,expandable:{collapsedMaxHeight:`6rem`},title:`Release notes — v0.4.2`,strings:{expandLabel:`Show full notes`,collapseLabel:`Hide details`},children:(0,M.jsxs)(r,{type:`secondary`,className:`leading-relaxed`,children:[`Tightened the admin density tokens, added the new`,(0,M.jsx)(`code`,{className:`mx-1 rounded bg-muted px-1.5 py-0.5 text-xs`,children:`expandable`}),`and `,(0,M.jsx)(`code`,{className:`mx-1 rounded bg-muted px-1.5 py-0.5 text-xs`,children:`headerDivider`}),`flags on SmartCard, and aligned the empty-state primitive with the sibling features. See the changelog for the full story.`]})})}function U(){return(0,M.jsx)(`div`,{className:`w-full max-w-md`,children:(0,M.jsx)(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)(a,{variant:`success`,children:`+12.4%`}),footerText:`Updated 5 minutes ago`,children:(0,M.jsxs)(`div`,{className:`space-y-1`,children:[(0,M.jsx)(r,{size:`xl`,weight:`semibold`,lineHeight:`none`,className:`text-3xl tabular-nums`,children:`$48,290`}),(0,M.jsx)(r,{size:`xs`,type:`secondary`,children:`vs. $42,950 last month`})]})})}function G(){return(0,M.jsx)(D,{className:`w-full max-w-md`,icon:(0,M.jsx)(A,{className:`size-4`}),title:`Backup ready to restore`,alert:`A snapshot from 12 minutes ago is available.`,alertVariant:`info`,footerSlot:(0,M.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,M.jsx)(o,{variant:`secondary`,buttonStyle:`ghost`,children:`Dismiss`}),(0,M.jsx)(o,{variant:`primary`,children:`Restore`})]}),children:(0,M.jsx)(r,{type:`secondary`,children:`Restoring will replace the current state with the snapshot. This action can be undone within 24 hours.`})})}function K(){return(0,M.jsxs)(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)(r,{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)(o,{variant:`secondary`,buttonStyle:`ghost`,children:`Cancel`}),(0,M.jsx)(o,{variant:`primary`,children:`Save`})]})]})}function q(){return(0,M.jsxs)(`div`,{className:`grid w-full grid-cols-1 gap-3 md:grid-cols-3`,children:[(0,M.jsx)(D,{icon:(0,M.jsx)(g,{className:`size-4`}),title:`Active customers`,headerEnd:(0,M.jsx)(c,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,M.jsx)(r,{size:`xl`,weight:`semibold`,className:`tabular-nums`,children:`2,194`})}),(0,M.jsx)(D,{icon:(0,M.jsx)(l,{className:`size-4`}),title:`Pending invoices`,headerEnd:(0,M.jsx)(c,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,M.jsx)(r,{size:`xl`,weight:`semibold`,className:`tabular-nums`,children:`$12,840`})}),(0,M.jsx)(D,{icon:(0,M.jsx)(p,{className:`size-4`}),title:`New signups`,headerEnd:(0,M.jsx)(c,{className:`size-4 text-muted-foreground`}),className:`cursor-pointer transition-colors hover:bg-muted/40`,children:(0,M.jsx)(r,{size:`xl`,weight:`semibold`,className:`tabular-nums`,children:`87`})})]})}var J=`import { ArrowUpRight, BellRing, CreditCard, MoreVertical, Pencil, Plus, Sparkles, Trash2, Check, TrendingUp, Users } from 'lucide-react';
-import { Button } from '@/components/base/buttons';
-import {
-	SmartCard,
-	SmartCardSkeleton,
-	CardShell,
-	CardHeader,
-	CardTitle,
-	CardDescription,
-	CardContent,
-	CardFooter,
-} from '@/components/base/cards';
-import { Avatar, AvatarFallback } from '@/components/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 r={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)(t,{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)(n,{title:`Overview`,id:`overview`,children:(0,M.jsxs)(r.p,{children:[(0,M.jsx)(r.code,{children:`SmartCard`}),` is the canonical card surface — every dashboard tile, settings
-panel, or KPI block runs through it. Three `,(0,M.jsx)(r.code,{children:`surface`}),` chromes (`,(0,M.jsx)(r.code,{children:`card`}),`, `,(0,M.jsx)(r.code,{children:`flat`}),`,
-`,(0,M.jsx)(r.code,{children:`framed`}),`), three padding scales, optional `,(0,M.jsx)(r.code,{children:`headerStart`}),` / `,(0,M.jsx)(r.code,{children:`headerEnd`}),` /
-`,(0,M.jsx)(r.code,{children:`headerAction`}),` slots, action menus, alert bands, footer text or `,(0,M.jsx)(r.code,{children:`footerSlot`}),`,
-and an `,(0,M.jsx)(r.code,{children:`expandable`}),` body for long content.`]})}),(0,M.jsx)(n,{title:`Default`,id:`default`,children:(0,M.jsx)(s,{name:`Default`,source:J,children:(0,M.jsx)(N,{})})}),(0,M.jsx)(n,{title:`Surface variants`,id:`surfaces`,children:(0,M.jsx)(s,{name:`SurfaceVariants`,source:J,children:(0,M.jsx)(R,{})})}),(0,M.jsx)(n,{title:`Padding sizes`,id:`padding`,children:(0,M.jsx)(s,{name:`PaddingSizes`,source:J,children:(0,M.jsx)(L,{})})}),(0,M.jsxs)(n,{title:`Header composition`,id:`header`,children:[(0,M.jsx)(s,{name:`WithIconTooltipFooter`,source:J,children:(0,M.jsx)(P,{})}),(0,M.jsx)(s,{name:`HeaderSlots`,source:J,children:(0,M.jsx)(z,{})}),(0,M.jsx)(s,{name:`WithActions`,source:J,children:(0,M.jsx)(F,{})}),(0,M.jsx)(s,{name:`HeaderAndFooterDividers`,source:J,children:(0,M.jsx)(B,{})})]}),(0,M.jsx)(n,{title:`Alerts`,id:`alerts`,children:(0,M.jsx)(s,{name:`AlertVariants`,source:J,children:(0,M.jsx)(I,{})})}),(0,M.jsxs)(n,{title:`Expandable`,id:`expandable`,children:[(0,M.jsx)(s,{name:`ExpandableUncontrolled`,source:J,children:(0,M.jsx)(V,{})}),(0,M.jsx)(s,{name:`ExpandableCustomLabels`,source:J,children:(0,M.jsx)(H,{})})]}),(0,M.jsx)(n,{title:`States`,id:`states`,children:(0,M.jsx)(s,{name:`Skeleton`,source:J,children:(0,M.jsx)(U,{})})}),(0,M.jsxs)(n,{title:`Primitive parts`,id:`primitives`,children:[(0,M.jsxs)(r.p,{children:[(0,M.jsx)(r.code,{children:`CardShell`}),`, `,(0,M.jsx)(r.code,{children:`CardHeader`}),`, `,(0,M.jsx)(r.code,{children:`CardTitle`}),`, `,(0,M.jsx)(r.code,{children:`CardDescription`}),`, `,(0,M.jsx)(r.code,{children:`CardContent`}),`,
-and `,(0,M.jsx)(r.code,{children:`CardFooter`}),` are exported from `,(0,M.jsx)(r.code,{children:`base/cards`}),` for the rare case when
-`,(0,M.jsx)(r.code,{children:`SmartCard`}),`'s composition is too opinionated.`]}),(0,M.jsx)(s,{name:`PrimitiveComposition`,source:J,children:(0,M.jsx)(K,{})})]}),(0,M.jsxs)(n,{title:`Realistic usage`,id:`realistic`,children:[(0,M.jsx)(s,{name:`MetricKPICard`,source:J,children:(0,M.jsx)(W,{})}),(0,M.jsx)(s,{name:`NotificationCard`,source:J,children:(0,M.jsx)(G,{})}),(0,M.jsx)(s,{name:`StatRowClickable`,source:J,children:(0,M.jsx)(q,{})})]}),(0,M.jsx)(n,{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};