@caratlogic/design-system 0.1.30 → 0.1.31

package/dist/index.esm.js

@@ -15443,7 +15443,7 @@ const CollapsibleCard = ({ title, subtitle, icon, headerActions, defaultOpen = t
 
 /** A titled card on a document detail page: payments, customer, items, notes… */
 function DetailSection({ icon, title, count, actions, children, className, bodyClassName, }) {
-    return (jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxs("header", { className: "flex flex-wrap items-center gap-2.5 border-b border-border px-4 py-3", children: [jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-primary/20 [&_svg]:size-4", children: icon }), jsx("h3", { className: "m-0 text-base font-semibold text-foreground", children: title }), typeof count === 'string' || typeof count === 'number' ? (jsx(Badge, { appearance: "soft", color: "secondary", shape: "pill", size: "sm", children: count })) : (count), actions ? jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2.5", children: actions }) : null] }), children != null ? jsx("div", { className: bodyClassName, children: children }) : null] }));
+    return (jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxs("header", { className: "flex flex-wrap items-center gap-2.5 border-b border-border bg-section-header px-4 py-3", children: [jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-primary/20 [&_svg]:size-4", children: icon }), jsx("h3", { className: "m-0 text-base font-semibold text-foreground", children: title }), typeof count === 'string' || typeof count === 'number' ? (jsx(Badge, { appearance: "soft", color: "secondary", shape: "pill", size: "sm", children: count })) : (count), actions ? jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2.5", children: actions }) : null] }), children != null ? jsx("div", { className: bodyClassName, children: children }) : null] }));
 }
 
 const HEADER_TONE_CLASSES = {
@@ -37212,26 +37212,63 @@ function clampPercent$1(value) {
         return 0;
     return Math.min(100, Math.max(0, value));
 }
-const CAPTION_TONE = {
-    default: 'text-muted-foreground',
+const LABEL_TONE = {
+    default: 'text-secondary-foreground',
     success: 'text-amount-paid',
+    info: 'text-info',
+    warning: 'text-badge-amber-text',
     destructive: 'text-amount-outstanding',
+    muted: 'text-secondary-foreground',
 };
-function getCaptionClassName(tone) {
-    return CAPTION_TONE[tone];
+function getLabelClassName(tone) {
+    return LABEL_TONE[tone];
 }
-const BAR_TONE = {
-    primary: 'bg-primary',
-    success: 'bg-success',
-    info: 'bg-info',
+/** The lightest wash of the status colour, matching the document's status pill. */
+const PANEL_TONE = {
+    default: 'bg-muted/40',
+    success: 'bg-primary/5 dark:bg-primary/10',
+    info: 'bg-info/5 dark:bg-info/10',
+    warning: 'bg-warning/5 dark:bg-warning/10',
+    destructive: 'bg-destructive/5 dark:bg-destructive/10',
+    muted: 'bg-muted/40',
 };
-function getBarClassName(tone) {
-    return BAR_TONE[tone];
+function getFactsPanelClassName(tone) {
+    return PANEL_TONE[tone];
+}
+const TRACK_TONE = {
+    default: 'bg-progress-track',
+    success: 'bg-progress-track',
+    info: 'bg-info/15',
+    warning: 'bg-warning/15',
+    destructive: 'bg-destructive/15',
+    muted: 'bg-progress-track',
+};
+function getProgressTrackClassName(tone) {
+    return TRACK_TONE[tone];
+}
+const FACT_ICON_TONE = {
+    default: 'bg-muted text-muted-foreground',
+    success: 'bg-badge-green-bg text-amount-paid',
+    warning: 'bg-badge-amber-bg text-badge-amber-text',
+    destructive: 'bg-badge-destructive-bg text-amount-outstanding',
+};
+function getFactIconClassName(tone) {
+    return FACT_ICON_TONE[tone];
+}
+const FACT_NOTE_TONE = {
+    default: 'text-muted-foreground',
+    success: 'text-amount-paid',
+    warning: 'text-badge-amber-text',
+    destructive: 'text-amount-outstanding',
+};
+function getFactNoteClassName(tone) {
+    return FACT_NOTE_TONE[tone];
 }
 const SEGMENT_TONE = {
     success: 'bg-success',
     info: 'bg-info',
     primary: 'bg-primary',
+    'primary-soft': 'bg-primary/40',
     warning: 'bg-warning',
     remaining: 'bg-progress-track',
 };
@@ -37240,82 +37277,47 @@ function getSegmentClassName$1(tone) {
 }
 /** Each segment's width in percent of the segments' sum; all 0 when there's nothing to split. */
 function getSegmentPercents(segments) {
-    const amounts = segments.map((segment) => (Number.isFinite(segment.amount) ? Math.max(0, segment.amount) : 0));
+    const amounts = segments.map((segment) => Number.isFinite(segment.amount) ? Math.max(0, segment.amount) : 0);
     const whole = amounts.reduce((sum, amount) => sum + amount, 0);
     return amounts.map((amount) => (whole > 0 ? (amount / whole) * 100 : 0));
 }
-/** A complete payment uses the brand green; a partial one the "paid" green. */
-function getProgressFillClassName(percent) {
-    return percent >= 100 ? 'bg-primary' : 'bg-amount-paid';
-}
-/** The lightest wash of the status colour, so the panel reads like the header pill without shouting. */
-const STATUS_TINT = {
-    neutral: '',
-    success: 'bg-success/5 dark:bg-success/10',
-    info: 'bg-info/5 dark:bg-info/10',
-    warning: 'bg-warning/5 dark:bg-warning/10',
-    destructive: 'bg-destructive/5 dark:bg-destructive/10',
-    muted: 'bg-muted/40',
-};
-/** Background tint for the status area (the side panel, or the whole card without one). */
-function getStatusTintClassName(tone) {
-    return STATUS_TINT[tone];
-}
-/** The panel beside the total only takes a colour when the status has one. */
-function getAsidePanelClassName(tone) {
-    return STATUS_TINT[tone];
-}
 /** No value to show: blank, or the "—" placeholder apps pass. */
-function isEmptyMetaValue(value) {
-    return value == null || (typeof value === 'string' && (value.trim() === '' || value.trim() === '—'));
-}
-function getProgressTrackClassName(tone) {
-    return tone === 'destructive' ? 'bg-destructive/15' : 'bg-progress-track';
-}
-/** Up to four meta cells per row from `md`, two on phones. */
-function getMetaColumns(count) {
-    return Math.min(4, Math.max(1, count));
-}
-const MD_COLS = {
-    1: 'md:grid-cols-1',
-    2: 'md:grid-cols-2',
-    3: 'md:grid-cols-3',
-    4: 'md:grid-cols-4',
-};
-function getMetaGridClassName(count) {
-    return `grid grid-cols-2 ${MD_COLS[getMetaColumns(count)]}`;
-}
-/** Hairlines by position, so they're right whether two or `cols` cells share a row. */
-function getMetaCellClassName(index, count) {
-    const cols = getMetaColumns(count);
-    return [
-        'min-w-0 border-border px-5 py-3',
-        index % 2 === 1 ? 'border-l' : '',
-        index >= 2 ? 'border-t' : '',
-        index % cols === 0 ? 'md:border-l-0' : 'md:border-l',
-        index >= cols ? 'md:border-t' : 'md:border-t-0',
-    ]
-        .filter(Boolean)
-        .join(' ');
+function isEmptyFactValue(value) {
+    return (value == null ||
+        (typeof value === 'string' && (value.trim() === '' || value.trim() === '—')));
 }
 
-function BreakdownPanel({ breakdown }) {
+function ProgressBar({ progress, tone, name, }) {
+    const percent = clampPercent$1(progress.percent);
+    return (jsxs("div", { className: "mt-4 w-full max-w-xl", children: [jsx("div", { role: "progressbar", "aria-label": name, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, className: cn('h-2 overflow-hidden rounded-full', getProgressTrackClassName(tone)), children: jsx("div", { className: "h-full rounded-full bg-primary", style: { width: `${percent}%` } }) }), progress.value != null ||
+                progress.label != null ||
+                progress.trailing != null ? (jsxs("div", { className: "mt-2 flex items-center justify-between gap-3 text-xs", children: [jsxs("span", { className: "text-secondary-foreground", children: [progress.value != null ? (jsx("span", { className: "font-semibold tabular-nums text-amount-paid", children: progress.value })) : null, progress.value != null && progress.label != null ? ' ' : null, progress.label] }), progress.trailing != null ? (jsx("span", { className: "text-right tabular-nums text-secondary-foreground", children: progress.trailing })) : null] })) : null] }));
+}
+function BreakdownBar({ breakdown, }) {
     const percents = getSegmentPercents(breakdown.segments);
-    return (jsxs(Fragment$2, { children: [jsx("dl", { className: "m-0 grid grid-flow-col auto-cols-fr gap-4", children: breakdown.segments.map((segment) => (jsxs("div", { className: "min-w-0", children: [jsxs("dt", { className: "flex items-center gap-1.5 text-xs text-label-subtle", children: [jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', getSegmentClassName$1(segment.tone)) }), segment.label] }), jsx("dd", { className: "m-0 text-lg font-semibold tabular-nums text-foreground", children: segment.value })] }, segment.label))) }), jsx("div", { role: "img", "aria-label": `${breakdown.label}: ${breakdown.segments
+    return (jsxs("div", { className: "mt-4 w-full max-w-xl", children: [jsx("dl", { className: "m-0 grid grid-flow-col auto-cols-fr gap-4", children: breakdown.segments.map((segment) => (jsxs("div", { className: "min-w-0", children: [jsxs("dt", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [jsx("span", { "aria-hidden": true, className: cn('h-1.5 w-3 shrink-0 rounded-full', getSegmentClassName$1(segment.tone), segment.tone === 'remaining' &&
+                                        'ring-1 ring-inset ring-border') }), segment.label] }), jsx("dd", { className: "m-0 text-base font-semibold tabular-nums text-foreground", children: segment.value })] }, segment.label))) }), jsx("div", { role: "img", "aria-label": `${breakdown.label}: ${breakdown.segments
                     .map((segment, index) => `${segment.label} ${Math.round(percents[index])}%`)
-                    .join(', ')}`, className: "mb-2 mt-3 flex h-2 overflow-hidden rounded-full bg-progress-track", children: breakdown.segments.map((segment, index) => segment.tone === 'remaining' || percents[index] === 0 ? null : (jsx("div", { className: cn('h-full', getSegmentClassName$1(segment.tone)), style: { width: `${percents[index]}%` } }, segment.label))) }), breakdown.caption ? jsx("p", { className: "m-0 text-xs text-muted-foreground", children: breakdown.caption }) : null] }));
+                    .join(', ')}`, className: "mt-3 flex h-2 overflow-hidden rounded-full bg-progress-track", children: breakdown.segments.map((segment, index) => segment.tone === 'remaining' || percents[index] === 0 ? null : (jsx("div", { className: cn('h-full', getSegmentClassName$1(segment.tone)), style: { width: `${percents[index]}%` } }, segment.label))) }), breakdown.caption ? (jsx("p", { className: "m-0 mt-2 text-xs text-secondary-foreground", children: breakdown.caption })) : null] }));
+}
+function FactRow({ fact }) {
+    const tone = fact.tone ?? 'default';
+    const empty = isEmptyFactValue(fact.value);
+    return (jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsx("span", { "aria-hidden": true, className: cn('flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold [&_svg]:size-3.5', getFactIconClassName(tone)), children: fact.icon }), jsx("dt", { className: "min-w-0 flex-1 text-sm text-secondary-foreground", children: fact.label }), jsxs("dd", { className: "m-0 flex min-w-0 flex-wrap items-baseline justify-end gap-x-2 text-right", children: [empty ? (jsx("span", { className: "text-sm font-medium text-muted-foreground", children: fact.emptyLabel ?? 'Not provided' })) : (jsx("span", { className: cn('break-words text-sm font-semibold tabular-nums', tone === 'success' ? 'text-amount-paid' : 'text-foreground'), children: fact.value })), fact.note ? (jsx("span", { className: cn('text-xs font-medium', getFactNoteClassName(tone)), children: fact.note })) : null, fact.onAction ? (jsx("button", { type: "button", onClick: fact.onAction, className: "text-xs font-medium text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: fact.actionLabel ?? 'View' })) : null] })] }));
 }
 /**
- * The top of a document detail page: its total, how much of it is settled
- * (paid, or carats returned/sold) and its key dates. Data-only.
+ * The top of a document detail page: the headline amount (balance, total, value),
+ * how much of it is settled, and the key dates and facts beside it. Data-only.
  */
-function DocumentHero({ label, total, caption, captionTone = 'default', payment, bars, breakdown, meta = [], statusTone = 'neutral', className, }) {
-    const hasAside = !!payment || !!breakdown || (bars?.length ?? 0) > 0;
-    const percent = payment ? clampPercent$1(payment.percent) : 0;
-    return (jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxs("div", { className: cn('grid grid-cols-1', hasAside ? 'md:grid-cols-[1fr_1.25fr]' : getStatusTintClassName(statusTone)), children: [jsxs("div", { className: "min-w-0 px-5 py-4", children: [jsx("p", { className: "m-0 text-xs text-label-subtle", children: label }), jsx("p", { className: "m-0 mt-1 break-words text-4xl font-semibold leading-none tracking-tight tabular-nums text-foreground", children: total }), caption ? jsx("p", { className: cn('m-0 mt-2 text-xs', getCaptionClassName(captionTone)), children: caption }) : null] }), payment ? (jsxs("div", { className: cn('min-w-0 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: [jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [jsxs("div", { className: "min-w-0", children: [jsx("span", { className: "text-xs text-label-subtle", children: payment.paidLabel ?? 'Amount paid' }), jsx("p", { className: "m-0 text-lg font-semibold tabular-nums text-amount-paid", children: payment.paid })] }), jsxs("div", { className: "min-w-0 text-right", children: [jsx("span", { className: "text-xs text-label-subtle", children: payment.outstandingLabel ?? 'Outstanding' }), jsx("p", { className: "m-0 text-lg font-semibold tabular-nums text-amount-outstanding", children: payment.outstanding })] })] }), jsx("div", { role: "progressbar", "aria-label": payment.paidLabel ?? 'Amount paid', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, className: cn('mb-2 mt-3 h-2 overflow-hidden rounded-full', getProgressTrackClassName(statusTone)), children: jsx("div", { className: cn('h-full rounded-full', getProgressFillClassName(percent)), style: { width: `${percent}%` } }) }), payment.caption ? jsx("p", { className: "m-0 text-xs text-muted-foreground", children: payment.caption }) : null] })) : breakdown ? (jsx("div", { className: cn('min-w-0 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: jsx(BreakdownPanel, { breakdown: breakdown }) })) : bars && bars.length > 0 ? (jsx("div", { className: cn('flex min-w-0 flex-col gap-3 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: bars.map((bar) => {
-                            const barPercent = clampPercent$1(bar.percent);
-                            return (jsxs("div", { children: [jsxs("div", { className: "mb-1 flex justify-between gap-3 text-xs", children: [jsx("span", { className: "text-muted-foreground", children: bar.label }), jsx("span", { className: "font-medium tabular-nums text-foreground", children: bar.value })] }), jsx("div", { role: "progressbar", "aria-label": bar.label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": barPercent, className: "h-2 overflow-hidden rounded-full bg-muted", children: jsx("div", { className: cn('h-full rounded-full', getBarClassName(bar.tone ?? 'primary')), style: { width: `${barPercent}%` } }) })] }, bar.label));
-                        }) })) : null] }), meta.length > 0 ? (jsx("dl", { className: cn('m-0 border-t border-border', getMetaGridClassName(meta.length)), children: meta.map((item, index) => (jsxs("div", { className: getMetaCellClassName(index, meta.length), children: [jsx("dt", { className: cn('text-xs font-semibold uppercase tracking-wider', item.danger ? 'text-amount-outstanding' : 'text-label-subtle'), children: item.label }), isEmptyMetaValue(item.value) ? (jsx("dd", { className: "m-0 mt-1 text-sm italic text-muted-foreground", children: item.emptyLabel ?? 'Not provided' })) : (jsx("dd", { className: cn('m-0 mt-1 break-words text-sm font-medium', item.danger ? 'text-amount-outstanding' : 'text-foreground'), children: item.value }))] }, item.label))) })) : null] }));
+function DocumentHero({ label, labelIcon, tone = 'default', amount, amountNote, progress, breakdown, facts = [], details = [], detailsLabel, detailsIcon, className, }) {
+    return (jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxs("div", { className: cn('grid grid-cols-1', facts.length > 0 && 'md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]'), children: [jsxs("div", { className: "flex min-w-0 flex-col justify-center px-5 py-4 sm:px-7 sm:py-4", children: [jsxs("p", { className: cn('m-0 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider [&_svg]:size-3.5', getLabelClassName(tone)), children: [labelIcon, label] }), jsxs("div", { className: "mt-1.5 flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [jsx("span", { className: "break-all text-4xl font-semibold leading-none tracking-tight tabular-nums text-foreground sm:text-[2.75rem]", children: amount }), amountNote ? (jsx("span", { className: "text-sm text-secondary-foreground", children: amountNote })) : null] }), breakdown ? (jsx(BreakdownBar, { breakdown: breakdown })) : progress ? (jsx(ProgressBar, { progress: progress, tone: tone, name: label })) : null] }), facts.length > 0 ? (jsx("dl", { className: cn('m-0 flex min-w-0 flex-col justify-center border-t border-border px-5 py-2 md:border-l md:border-t-0', getFactsPanelClassName(tone)), children: facts.map((fact) => (jsx(FactRow, { fact: fact }, fact.label))) })) : null] }), details.length > 0 ? (jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t border-border px-5 py-2.5 text-xs sm:px-7", children: [detailsLabel ? (jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded bg-muted px-1.5 py-0.5 font-semibold text-secondary-foreground [&_svg]:size-3", children: [detailsIcon, detailsLabel] })) : null, jsx("dl", { className: "m-0 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: details.map((detail, index) => {
+                            const empty = isEmptyFactValue(detail.value);
+                            return (jsxs("div", { className: "flex min-w-0 items-center gap-x-3", children: [index > 0 ? (jsx("span", { "aria-hidden": true, className: "h-3 w-px shrink-0 bg-border" })) : null, jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: detail.label }), jsx("dd", { className: cn('m-0 break-words', empty
+                                                    ? 'italic text-label-subtle'
+                                                    : 'font-medium text-foreground'), children: empty
+                                                    ? (detail.emptyLabel ?? 'Not provided')
+                                                    : detail.value })] })] }, detail.label));
+                        }) })] })) : null] }));
 }
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -67486,7 +67488,7 @@ function DetailPageSkeleton({ sections = 3, }) {
 }
 /** Document detail page (invoice, memo…): header, `DocumentHero` and `DetailSection` placeholders. */
 function DocumentDetailSkeleton({ aside = 'payment', sections = 3, label = 'Loading document', }) {
-    return (jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsx("span", { className: "h-5 w-px bg-border" }), jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxs("div", { className: cn('grid grid-cols-1', aside !== 'none' && 'md:grid-cols-[1fr_1.25fr]'), children: [jsxs("div", { className: "space-y-3 px-5 py-4", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 36, width: 180, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: 200, rounded: "full" })] }), aside === 'payment' && (jsxs("div", { className: "space-y-3 border-t border-border px-5 py-4 md:border-l md:border-t-0", children: [jsxs("div", { className: "flex justify-between gap-4", children: [jsxs("div", { className: "space-y-1.5", children: [jsx(SquareSkeleton, { height: 11, width: 80, rounded: "full" }), jsx(SquareSkeleton, { height: 20, width: 104, rounded: "md" })] }), jsxs("div", { className: "flex flex-col items-end space-y-1.5", children: [jsx(SquareSkeleton, { height: 11, width: 80, rounded: "full" }), jsx(SquareSkeleton, { height: 20, width: 104, rounded: "md" })] })] }), jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsx(SquareSkeleton, { height: 11, width: 160, rounded: "full" })] })), aside === 'bars' && (jsx("div", { className: "space-y-3 border-t border-border px-5 py-4 md:border-l md:border-t-0", children: [0, 1, 2].map((i) => (jsxs("div", { className: "space-y-1.5", children: [jsxs("div", { className: "flex justify-between", children: [jsx(SquareSkeleton, { height: 11, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 11, width: 56, rounded: "full" })] }), jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" })] }, i))) }))] }), jsx("div", { className: "grid grid-cols-2 border-t border-border md:grid-cols-4", children: [0, 1, 2, 3].map((i) => (jsxs("div", { className: "space-y-2 border-border px-5 py-3 even:border-l [&:nth-child(n+3)]:border-t md:border-l md:first:border-l-0 md:[&:nth-child(n+3)]:border-t-0", children: [jsx(SquareSkeleton, { height: 10, width: 56, rounded: "full" }), jsx(SquareSkeleton, { height: 14, width: 96, rounded: "full" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsx("span", { className: "sr-only", children: label })] }));
+    return (jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsx("span", { className: "h-5 w-px bg-border" }), jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxs("section", { "aria-hidden": "true", className: "grid grid-cols-1 overflow-hidden rounded-2xl border border-border bg-card md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [jsxs("div", { className: "flex flex-col justify-center space-y-3 px-5 py-4 sm:px-7 sm:py-4", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 40, width: 220, rounded: "md" }), aside !== 'none' && (jsxs("div", { className: "w-full max-w-xl space-y-2 pt-1", children: [jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxs("div", { className: "flex justify-between", children: [jsx(SquareSkeleton, { height: 11, width: 88, rounded: "full" }), jsx(SquareSkeleton, { height: 11, width: 40, rounded: "full" })] })] }))] }), jsx("div", { className: "border-t border-border bg-muted/40 px-5 py-2 md:border-l md:border-t-0", children: [0, 1, 2, 3].map((i) => (jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsx(SquareSkeleton, { height: 24, width: 24, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: 72, rounded: "full" }), jsx(SquareSkeleton, { height: 12, width: 88, rounded: "full", className: "ml-auto" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsx("span", { className: "sr-only", children: label })] }));
 }
 
 const SlideOut = ({ open, onOpenChange, ...props }) => {