admin-ui-starter-kit 0.6.8 → 0.7.0

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

@@ -1,188 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,354 +0,0 @@
-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};