@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/{MetricsCard-C9GWgT58.js → MetricsCard-M8awJ2B_.js}

@@ -1,19 +1,19 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
 import { t as Txt } from "./Txt-BM6TVV_c.js";
 import { t as DropdownMenu } from "./dropdown-menu-B4jY3J9e.js";
-import { n as Tabs, r as TabList, t as Tab } from "./tabs-tab-UT1JliwK.js";
 import { SkeletonText } from "./components/Skeleton.es.js";
 import { t as Spinner } from "./spinner-CnLgLj9R.js";
+import { t as MetricsKpiCard } from "./MetricsKpiCard-OHbAElTl.js";
 import { t as Card } from "./Card-LU1aWO7U.js";
-import { t as MetricsKpiCard } from "./MetricsKpiCard-Idxjl-dn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 // src/ds/components/MetricsCard/metrics-card-actions.tsx
 /** Container for icon buttons / small actions in the top bar of a MetricsCard,
-*  placed between `TitleAndDescription` and `Summary` (which always renders last). */
+*  placed between the title and `Total` (which always renders last). Small (28px) buttons sit
+*  centered on the 20px title line without making the top bar taller. */
 function MetricsCardActions({ children, reveal = "always", className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex shrink-0 items-center gap-1 self-center", reveal === "hover" && "opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100", className),
+		className: cn("-my-1 flex shrink-0 items-center gap-1 self-start", reveal === "hover" && "opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100", className),
 		children
 	});
 }
@@ -29,14 +29,6 @@ function MetricsCardContent({ children, className }) {
 		children
 	});
 }
-// src/ds/components/MetricsCard/metrics-card-description.tsx
-function MetricsCardDescription({ children, className }) {
-	return /* @__PURE__ */ jsx(Txt, {
-		tone: "faint",
-		className: cn("mt-0.5", className),
-		children
-	});
-}
 // src/ds/components/MetricsCard/metrics-card-error.tsx
 function MetricsCardError({ message = "Failed to load data", className }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -48,6 +40,33 @@ function MetricsCardError({ message = "Failed to load data", className }) {
 		})
 	});
 }
+// src/ds/components/MetricsCard/metrics-card-headline.tsx
+/**
+* The header of a card with one large chart (an explorer, a detail page): the label over a large
+* value, the change against the previous period beside it. Cards in a grid use the compact title
+* and `MetricsCard.Total` instead. A skeleton while loading, in the value's own line box.
+*/
+function MetricsCardHeadline({ label, value, change, isLoading = false, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid gap-1.5", className),
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-body-sm text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
+				children: isLoading ? /* @__PURE__ */ jsx(SkeletonText, {
+					line: "text-title",
+					className: "w-24"
+				}) : value
+			}), !isLoading && change && /* @__PURE__ */ jsxs("span", {
+				className: "text-body-sm text-muted-foreground tabular-nums",
+				children: [change, " vs previous"]
+			})]
+		})]
+	});
+}
 // src/ds/components/MetricsCard/metrics-card-loading.tsx
 function MetricsCardLoading({ className }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -76,106 +95,46 @@ function MetricsCardRoot({ children, className }) {
 		children
 	});
 }
-// src/ds/components/MetricsCard/metrics-card-summary.tsx
-/** Always the top bar's last item, so action buttons sit to its left and the value hugs the edge. */
-function MetricsCardSummary({ value, label, isLoading = false, className }) {
-	if (isLoading) return /* @__PURE__ */ jsxs("div", {
-		className: cn("order-last flex shrink-0 flex-col items-end", className),
-		children: [/* @__PURE__ */ jsx(SkeletonText, {
-			line: "text-body",
-			className: "h-4 w-14"
-		}), label && /* @__PURE__ */ jsx(SkeletonText, {
-			line: "text-body mt-0.5",
-			className: "w-10"
-		})]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("order-last text-right", className),
-		children: [/* @__PURE__ */ jsx(Txt, {
-			tone: "muted",
-			className: "tabular-nums",
-			children: value
-		}), label && /* @__PURE__ */ jsx(Txt, {
-			tone: "faint",
-			className: "mt-0.5",
-			children: label
-		})]
-	});
-}
-// src/ds/components/MetricsCard/metrics-card-tabs.tsx
-/**
-* The view switch in a metrics card's toolbar (e.g. Agents / Workflows / Tools): ghost tabs a
-* size under the control rung, so the switch stays quieter than the data. Metrics cards only;
-* anywhere else use `TabList`, which lines up with buttons and inputs.
-*/
-function MetricsCardTabs({ value, onValueChange, children }) {
-	return /* @__PURE__ */ jsx(Tabs, {
-		value,
-		onValueChange,
-		defaultTab: value,
-		children: /* @__PURE__ */ jsx(TabList, {
-			variant: "pill-ghost",
-			size: "sm",
-			children
-		})
-	});
-}
-/** One `MetricsCard.Tabs` option: 24px tall with 12px labels. */
-function MetricsCardTab({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tab, {
-		...props,
-		className: cn("h-6 px-2.5 text-column", className)
-	});
-}
 // src/ds/components/MetricsCard/metrics-card-title.tsx
-function MetricsCardTitle({ children, className, as: Tag = "h2", weight = "regular" }) {
+function MetricsCardTitle({ children, className, as: Tag = "h3" }) {
 	return /* @__PURE__ */ jsx(Tag, {
-		className: cn("text-body text-foreground", weight === "medium" && "font-medium", className),
+		className: cn("text-body font-medium text-foreground", className),
 		children
 	});
 }
-// src/ds/components/MetricsCard/metrics-card-title-and-description.tsx
-function MetricsCardTitleAndDescription(props) {
-	if ("children" in props) return /* @__PURE__ */ jsx("div", {
-		className: props.className,
-		children: props.children
-	});
-	const { title, description, titleAs } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		className: props.className,
-		children: [/* @__PURE__ */ jsx(MetricsCardTitle, {
-			as: titleAs,
-			children: title
-		}), description && /* @__PURE__ */ jsx(MetricsCardDescription, { children: description })]
-	});
-}
 // src/ds/components/MetricsCard/metrics-card-title-menu.tsx
 /**
 * A card title that switches the card's view, as on Vercel's usage cards: the title is the
 * trigger, with a chevron. The hover fill bleeds past the text so the title stays aligned.
+* Wrapped, so the top bar stretches the wrapper rather than the button, and the menu's open-state
+* nodes next to the trigger don't become the top bar's first child.
 */
 function MetricsCardTitleMenu({ title, value, onValueChange, options, className }) {
-	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Trigger, {
-		render: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: cn("-mx-1.5 -my-0.5 flex items-center gap-1 self-start rounded-md px-1.5 py-0.5 text-left text-body font-medium text-foreground hover:bg-fill-subtle", className)
-		}),
-		children: [title, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 text-muted-foreground" })]
-	}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
-		align: "start",
-		children: /* @__PURE__ */ jsx(DropdownMenu.RadioOptions, {
-			options,
-			value,
-			onValueChange
-		})
-	})] });
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0",
+		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Trigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("-mx-1.5 -my-0.5 flex items-center gap-1 self-start rounded-md px-1.5 py-0.5 text-left text-body font-medium text-foreground hover:bg-fill-subtle", className)
+			}),
+			children: [title, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 text-muted-foreground" })]
+		}), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+			align: "start",
+			children: /* @__PURE__ */ jsx(DropdownMenu.RadioOptions, {
+				options,
+				value,
+				onValueChange,
+				closeOnSelect: true
+			})
+		})] })
+	});
 }
 // src/ds/components/MetricsCard/metrics-card-toolbar.tsx
 /**
-* One row under the top bar for a card's controls: small tabs, a legend, list column headers.
+* One row under the top bar for a card's controls: a legend, list column headers.
 * The first child sits on the left, the last on the right; either side may be omitted. When
-* both don't fit (a narrow card), the right side wraps to its own line, still on the right. At least as
-* tall as `MetricsCard.Tabs`, so a legend-only toolbar matches a card with tabs in the same row.
+* both don't fit (a narrow card), the right side wraps to its own line, still on the right. At least 24px
+* tall, so toolbars line up across cards in the same row.
 */
 function MetricsCardToolbar({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -192,16 +151,43 @@ function MetricsCardTopBar({ children, className }) {
 }
 // src/ds/components/MetricsCard/metrics-card-total.tsx
 /**
-* A compact card's total, right of the title in the same type (14px, medium). Always the top
-* bar's last item. A skeleton while loading, in the value's own line box.
+* A card's total, right of the title in the same type (14px, medium). Always the top
+* bar's last item. A skeleton while loading, in the value's own line box. A card charting a
+* few series of different things (resources, threads) can give one total each, each after a
+* marker in its series' color, like the legend.
 */
 function MetricsCardTotal({ value, isLoading = false, className }) {
 	return /* @__PURE__ */ jsx("span", {
 		className: cn("order-last shrink-0 text-body font-medium text-foreground tabular-nums", className),
-		children: isLoading ? /* @__PURE__ */ jsx(SkeletonText, {
-			line: "text-body",
-			className: "h-4 w-14"
-		}) : value
+		children: /* @__PURE__ */ jsx(TotalValue, {
+			value,
+			isLoading
+		})
+	});
+}
+function TotalValue({ value, isLoading }) {
+	if (isLoading) return /* @__PURE__ */ jsx(SkeletonText, {
+		line: "text-body",
+		className: "h-4 w-14"
+	});
+	if (typeof value === "string") return value;
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex items-center gap-3",
+		children: value.map((part) => /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: part.color }
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "sr-only",
+					children: [part.label, " "]
+				}),
+				part.value
+			]
+		}, part.label))
 	});
 }
 // src/ds/components/MetricsCard/metrics-card.tsx
@@ -210,15 +196,11 @@ var MetricsCard = Object.assign(MetricsCardRoot, {
 	Kpi: MetricsKpiCard,
 	TopBar: MetricsCardTopBar,
 	Toolbar: MetricsCardToolbar,
-	Tabs: MetricsCardTabs,
-	Tab: MetricsCardTab,
 	Actions: MetricsCardActions,
-	TitleAndDescription: MetricsCardTitleAndDescription,
 	Title: MetricsCardTitle,
 	TitleMenu: MetricsCardTitleMenu,
-	Description: MetricsCardDescription,
-	Summary: MetricsCardSummary,
 	Total: MetricsCardTotal,
+	Headline: MetricsCardHeadline,
 	Loading: MetricsCardLoading,
 	Error: MetricsCardError,
 	Content: MetricsCardContent,
@@ -226,4 +208,4 @@ var MetricsCard = Object.assign(MetricsCardRoot, {
 });
 export { MetricsCard as t };
 
-//# sourceMappingURL=MetricsCard-C9GWgT58.js.map
+//# sourceMappingURL=MetricsCard-M8awJ2B_.js.map

package/dist/MetricsCard-M8awJ2B_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsCard-M8awJ2B_.js","names":[],"sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-error.tsx","../src/ds/components/MetricsCard/metrics-card-headline.tsx","../src/ds/components/MetricsCard/metrics-card-loading.tsx","../src/ds/components/MetricsCard/metrics-card-no-data.tsx","../src/ds/components/MetricsCard/metrics-card-root.tsx","../src/ds/components/MetricsCard/metrics-card-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-menu.tsx","../src/ds/components/MetricsCard/metrics-card-toolbar.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.tsx","../src/ds/components/MetricsCard/metrics-card-total.tsx","../src/ds/components/MetricsCard/metrics-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/** Container for icon buttons / small actions in the top bar of a MetricsCard,\n *  placed between the title and `Total` (which always renders last). Small (28px) buttons sit\n *  centered on the 20px title line without making the top bar taller. */\nexport function MetricsCardActions({\n  children,\n  reveal = 'always',\n  className,\n}: {\n  children: ReactNode;\n  /**\n   * `hover`: the actions appear while the card is hovered or one of them has focus, so a page\n   * of cards doesn't read as a page of buttons.\n   */\n  reveal?: 'always' | 'hover';\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        '-my-1 flex shrink-0 items-center gap-1 self-start',\n        reveal === 'hover' &&\n          'opacity-0 transition-opacity duration-150 group-hover/metrics-card:opacity-100 focus-within:opacity-100',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * Scrolls sideways only (wide tables). Vertical overflow is hidden: a chart filling a card with a\n * fractional height rounds 1px past it, which otherwise turns the content into a scroll box.\n * Tables inside a card drop the last row's border: the card edge already closes them.\n */\nexport function MetricsCardContent({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('overflow-x-auto overflow-y-hidden [&_tbody>tr:last-child]:border-b-0', className)}>\n      {children}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-col items-center justify-center gap-3', className)}>\n      <Txt variant=\"caption\" className=\"text-destructive-foreground\">\n        {message}\n      </Txt>\n    </div>\n  );\n}\n","import { SkeletonText } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * The header of a card with one large chart (an explorer, a detail page): the label over a large\n * value, the change against the previous period beside it. Cards in a grid use the compact title\n * and `MetricsCard.Total` instead. A skeleton while loading, in the value's own line box.\n */\nexport function MetricsCardHeadline({\n  label,\n  value,\n  change,\n  isLoading = false,\n  className,\n}: {\n  label: string;\n  value: string;\n  /** E.g. \"+71.4%\"; shown as \"+71.4% vs previous\". */\n  change?: string;\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid gap-1.5', className)}>\n      <h3 className=\"text-body-sm text-muted-foreground\">{label}</h3>\n      <span className=\"flex items-baseline gap-2\">\n        <span className=\"text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]\">\n          {isLoading ? <SkeletonText line=\"text-title\" className=\"w-24\" /> : value}\n        </span>\n        {!isLoading && change && (\n          <span className=\"text-body-sm text-muted-foreground tabular-nums\">{change} vs previous</span>\n        )}\n      </span>\n    </div>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardLoading({ className }: { className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <div className={cn('flex h-full items-center justify-center', className)}>\n      <Txt tone=\"faint\">{message}</Txt>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card\n      className={cn(\n        'group/metrics-card grid min-h-72 min-w-80 flex-1 grid-rows-[auto_1fr] gap-4 px-4 py-3 2xl:min-w-120 md:min-w-88 lg:min-w-sm xl:min-w-104',\n        className,\n      )}\n    >\n      {children}\n    </Card>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h3',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-body font-medium text-foreground', className)}>{children}</Tag>;\n}\n","import { ChevronDownIcon } from 'lucide-react';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport type { DropdownMenuRadioOption } from '@/ds/components/DropdownMenu';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsCardTitleMenuProps<V extends string> = {\n  /** The card title for the picked view (e.g. \"Spend by model\"). */\n  title: string;\n  value: V;\n  onValueChange: (value: V) => void;\n  /** The views (e.g. \"By model\", \"By provider\"). */\n  options: readonly DropdownMenuRadioOption<V>[];\n  className?: string;\n};\n\n/**\n * A card title that switches the card's view, as on Vercel's usage cards: the title is the\n * trigger, with a chevron. The hover fill bleeds past the text so the title stays aligned.\n * Wrapped, so the top bar stretches the wrapper rather than the button, and the menu's open-state\n * nodes next to the trigger don't become the top bar's first child.\n */\nexport function MetricsCardTitleMenu<V extends string>({\n  title,\n  value,\n  onValueChange,\n  options,\n  className,\n}: MetricsCardTitleMenuProps<V>) {\n  return (\n    <div className=\"flex min-w-0\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <button\n              type=\"button\"\n              className={cn(\n                '-mx-1.5 -my-0.5 flex items-center gap-1 self-start rounded-md px-1.5 py-0.5 text-left text-body font-medium text-foreground hover:bg-fill-subtle',\n                className,\n              )}\n            />\n          }\n        >\n          {title}\n          <ChevronDownIcon className=\"size-3.5 text-muted-foreground\" />\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content align=\"start\">\n          <DropdownMenu.RadioOptions options={options} value={value} onValueChange={onValueChange} closeOnSelect />\n        </DropdownMenu.Content>\n      </DropdownMenu>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * One row under the top bar for a card's controls: a legend, list column headers.\n * The first child sits on the left, the last on the right; either side may be omitted. When\n * both don't fit (a narrow card), the right side wraps to its own line, still on the right. At least 24px\n * tall, so toolbars line up across cards in the same row.\n */\nexport function MetricsCardToolbar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex min-h-6 min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 [&>*:first-child]:min-w-0 [&>*:last-child:not(:first-child)]:ml-auto',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardTopBar({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-start gap-4 [&>:first-child]:min-w-0 [&>:first-child]:flex-1', className)}>\n      {children}\n    </div>\n  );\n}\n","import { SkeletonText } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/** One of several totals in a card that charts a few series, marked with its series' color. */\nexport type MetricsCardTotalPart = { label: string; value: string; color: string };\n\n/**\n * A card's total, right of the title in the same type (14px, medium). Always the top\n * bar's last item. A skeleton while loading, in the value's own line box. A card charting a\n * few series of different things (resources, threads) can give one total each, each after a\n * marker in its series' color, like the legend.\n */\nexport function MetricsCardTotal({\n  value,\n  isLoading = false,\n  className,\n}: {\n  value: string | readonly MetricsCardTotalPart[];\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <span className={cn('order-last shrink-0 text-body font-medium text-foreground tabular-nums', className)}>\n      <TotalValue value={value} isLoading={isLoading} />\n    </span>\n  );\n}\n\nfunction TotalValue({ value, isLoading }: { value: string | readonly MetricsCardTotalPart[]; isLoading: boolean }) {\n  if (isLoading) return <SkeletonText line=\"text-body\" className=\"h-4 w-14\" />;\n  if (typeof value === 'string') return value;\n  return (\n    <span className=\"inline-flex items-center gap-3\">\n      {value.map(part => (\n        <span key={part.label} className=\"inline-flex items-center gap-1.5\">\n          <span aria-hidden className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: part.color }} />\n          {/* The marker is decorative; screen readers hear which total this is. */}\n          <span className=\"sr-only\">{part.label} </span>\n          {part.value}\n        </span>\n      ))}\n    </span>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardHeadline } from './metrics-card-headline';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleMenu } from './metrics-card-title-menu';\nimport { MetricsCardToolbar } from './metrics-card-toolbar';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsCardTotal } from './metrics-card-total';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\n\nexport const MetricsCard = Object.assign(MetricsCardRoot, {\n  Root: MetricsCardRoot,\n  Kpi: MetricsKpiCard,\n  TopBar: MetricsCardTopBar,\n  Toolbar: MetricsCardToolbar,\n  Actions: MetricsCardActions,\n  Title: MetricsCardTitle,\n  TitleMenu: MetricsCardTitleMenu,\n  Total: MetricsCardTotal,\n  Headline: MetricsCardHeadline,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"mappings":"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"}

package/dist/{MetricsKpiCard-Uw0nyMgW.cjs → MetricsKpiCard-By_-sagx.cjs}

@@ -173,9 +173,10 @@ function MetricsKpiCardPrev({ value, className }) {
 	});
 }
 // src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx
-function MetricsKpiCardRoot({ children, className }) {
+function MetricsKpiCardRoot({ children, className, busy }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.Card, {
 		className: require_utils.cn("min-w-72 flex-1 px-4 py-3", className),
+		"aria-busy": busy || void 0,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "grid gap-1.5",
 			children
@@ -217,4 +218,4 @@ Object.defineProperty(exports, "MetricsKpiCard", {
 	}
 });
 
-//# sourceMappingURL=MetricsKpiCard-Uw0nyMgW.cjs.map
+//# sourceMappingURL=MetricsKpiCard-By_-sagx.cjs.map

package/dist/{MetricsKpiCard-Uw0nyMgW.cjs.map → MetricsKpiCard-By_-sagx.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MetricsKpiCard-Uw0nyMgW.cjs","names":["ArrowUpRightIcon","ArrowDownRightIcon","cn","Tooltip","TooltipTrigger","Badge","TooltipContent","Txt","Txt","cn","cn","SkeletonText","Txt","cn","Txt","cn","Txt","Spinner","Txt","Txt","Txt","cn","Card","cn","cn","cn","Skeleton"],"sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-footer.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-prev.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// A change that rounds to 0.0% is no change: a neutral badge, no arrow.\nconst isFlat = (changePct: number) => Math.abs(changePct) < 0.05;\n\n// Green when the value moved the good way, red when it moved the bad way.\nfunction changeVariant(changePct: number, lowerIsBetter?: boolean) {\n  if (isFlat(changePct)) return 'neutral';\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  return isGood ? 'success' : 'destructive';\n}\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (isFlat(changePct)) return '0%';\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison = 'vs prior period',\n  prevValue,\n  lowerIsBetter,\n  caption = false,\n  className,\n}: {\n  changePct: number;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". Shown on hover. */\n  comparison?: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  /** Show the comparison as inline text. Off by default: pair the badge with\n   *  `MetricsKpiCard.Footer`, which shows the prior value itself. */\n  caption?: boolean;\n  className?: string;\n}) {\n  const flat = isFlat(changePct);\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Tooltip>\n        <TooltipTrigger render={<span tabIndex={0} className=\"inline-flex rounded-full\" />}>\n          <Badge\n            variant={changeVariant(changePct, lowerIsBetter)}\n            emphasis=\"strong\"\n            size=\"xs\"\n            icon={flat ? undefined : <Icon />}\n            className=\"tabular-nums\"\n            aria-hidden=\"true\"\n          >\n            {formattedChange}\n          </Badge>\n          <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n        </TooltipTrigger>\n        <TooltipContent>{description}</TooltipContent>\n      </Tooltip>\n      {caption ? (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" aria-hidden=\"true\">\n          {comparison}\n        </Txt>\n      ) : null}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * Bottom row under a hairline: one line of context on the left (e.g. \"1.3K server errors\")\n * and the prior period's value on the right. Only worth its hairline when there is a detail\n * line; a card with just a prior value puts it in the value row (`MetricsKpiCard.Prev`).\n */\nexport function MetricsKpiCardFooter({\n  detail,\n  prevValue,\n  isLoading = false,\n  className,\n}: {\n  detail: ReactNode;\n  prevValue?: string;\n  /** Skeletons in the detail's and prior value's line boxes, so the card keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  const frame = cn('mt-1 flex items-center justify-between gap-2 border-t border-border pt-2', className);\n  if (isLoading) {\n    return (\n      <div className={frame}>\n        <SkeletonText className=\"w-24\" />\n        <SkeletonText className=\"w-14\" />\n      </div>\n    );\n  }\n  if (detail == null || detail === false || detail === '') return null;\n  return (\n    <div className={frame}>\n      <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"min-w-0 truncate\">\n        {detail}\n      </Txt>\n      {prevValue && (\n        <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n          vs {prevValue}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({\n  children,\n  icon,\n  className,\n}: {\n  children: string;\n  /** Optional glyph shown at the far end of the label row (e.g. a lucide icon). */\n  icon?: ReactNode;\n  className?: string;\n}) {\n  if (!icon) {\n    return (\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n        {children}\n      </Txt>\n    );\n  }\n  return (\n    <span className={cn('flex items-center justify-between gap-2', className)}>\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n        {children}\n      </Txt>\n      <span aria-hidden className=\"shrink-0 text-muted-foreground [&>svg]:size-4\">\n        {icon}\n      </span>\n    </span>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * The prior period's value, pushed to the end of the value row. Use it when the card has\n * no detail line; with one, pass `prevValue` to `MetricsKpiCard.Footer` instead.\n */\nexport function MetricsKpiCardPrev({ value, className }: { value: string; className?: string }) {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"body-sm\"\n      tone=\"muted\"\n      title={`vs ${value}`}\n      // The value row keeps its children from shrinking; the prior value is the one part that\n      // may give way in a narrow card, truncating with the full text in the title.\n      className={cn('ml-auto min-w-0 shrink! truncate tabular-nums', className)}\n    >\n      vs {value}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-4 py-3', className)}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({\n  children,\n  isLoading = false,\n  className,\n}: {\n  children?: ReactNode;\n  /** A value-sized skeleton in place of the value and its change badge. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0', className)}>\n      {isLoading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </div>\n  );\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardFooter } from './metrics-kpi-card-footer';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardPrev } from './metrics-kpi-card-prev';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n  Footer: MetricsKpiCardFooter,\n  Prev: MetricsKpiCardPrev,\n});\n"],"mappings":"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"}
+{"version":3,"file":"MetricsKpiCard-By_-sagx.cjs","names":["ArrowUpRightIcon","ArrowDownRightIcon","cn","Tooltip","TooltipTrigger","Badge","TooltipContent","Txt","Txt","cn","cn","SkeletonText","Txt","cn","Txt","cn","Txt","Spinner","Txt","Txt","Txt","cn","Card","cn","cn","cn","Skeleton"],"sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-footer.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-prev.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// A change that rounds to 0.0% is no change: a neutral badge, no arrow.\nconst isFlat = (changePct: number) => Math.abs(changePct) < 0.05;\n\n// Green when the value moved the good way, red when it moved the bad way.\nfunction changeVariant(changePct: number, lowerIsBetter?: boolean) {\n  if (isFlat(changePct)) return 'neutral';\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  return isGood ? 'success' : 'destructive';\n}\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (isFlat(changePct)) return '0%';\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison = 'vs prior period',\n  prevValue,\n  lowerIsBetter,\n  caption = false,\n  className,\n}: {\n  changePct: number;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". Shown on hover. */\n  comparison?: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  /** Show the comparison as inline text. Off by default: pair the badge with\n   *  `MetricsKpiCard.Footer`, which shows the prior value itself. */\n  caption?: boolean;\n  className?: string;\n}) {\n  const flat = isFlat(changePct);\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Tooltip>\n        <TooltipTrigger render={<span tabIndex={0} className=\"inline-flex rounded-full\" />}>\n          <Badge\n            variant={changeVariant(changePct, lowerIsBetter)}\n            emphasis=\"strong\"\n            size=\"xs\"\n            icon={flat ? undefined : <Icon />}\n            className=\"tabular-nums\"\n            aria-hidden=\"true\"\n          >\n            {formattedChange}\n          </Badge>\n          <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n        </TooltipTrigger>\n        <TooltipContent>{description}</TooltipContent>\n      </Tooltip>\n      {caption ? (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" aria-hidden=\"true\">\n          {comparison}\n        </Txt>\n      ) : null}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * Bottom row under a hairline: one line of context on the left (e.g. \"1.3K server errors\")\n * and the prior period's value on the right. Only worth its hairline when there is a detail\n * line; a card with just a prior value puts it in the value row (`MetricsKpiCard.Prev`).\n */\nexport function MetricsKpiCardFooter({\n  detail,\n  prevValue,\n  isLoading = false,\n  className,\n}: {\n  detail: ReactNode;\n  prevValue?: string;\n  /** Skeletons in the detail's and prior value's line boxes, so the card keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  const frame = cn('mt-1 flex items-center justify-between gap-2 border-t border-border pt-2', className);\n  if (isLoading) {\n    return (\n      <div className={frame}>\n        <SkeletonText className=\"w-24\" />\n        <SkeletonText className=\"w-14\" />\n      </div>\n    );\n  }\n  if (detail == null || detail === false || detail === '') return null;\n  return (\n    <div className={frame}>\n      <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"min-w-0 truncate\">\n        {detail}\n      </Txt>\n      {prevValue && (\n        <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n          vs {prevValue}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({\n  children,\n  icon,\n  className,\n}: {\n  children: string;\n  /** Optional glyph shown at the far end of the label row (e.g. a lucide icon). */\n  icon?: ReactNode;\n  className?: string;\n}) {\n  if (!icon) {\n    return (\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n        {children}\n      </Txt>\n    );\n  }\n  return (\n    <span className={cn('flex items-center justify-between gap-2', className)}>\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n        {children}\n      </Txt>\n      <span aria-hidden className=\"shrink-0 text-muted-foreground [&>svg]:size-4\">\n        {icon}\n      </span>\n    </span>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * The prior period's value, pushed to the end of the value row. Use it when the card has\n * no detail line; with one, pass `prevValue` to `MetricsKpiCard.Footer` instead.\n */\nexport function MetricsKpiCardPrev({ value, className }: { value: string; className?: string }) {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"body-sm\"\n      tone=\"muted\"\n      title={`vs ${value}`}\n      // The value row keeps its children from shrinking; the prior value is the one part that\n      // may give way in a narrow card, truncating with the full text in the title.\n      className={cn('ml-auto min-w-0 shrink! truncate tabular-nums', className)}\n    >\n      vs {value}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsKpiCardRootProps = {\n  children: ReactNode;\n  className?: string;\n  /** The reading is loading or being replaced. */\n  busy?: boolean;\n};\n\nexport function MetricsKpiCardRoot({ children, className, busy }: MetricsKpiCardRootProps) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-4 py-3', className)} aria-busy={busy || undefined}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({\n  children,\n  isLoading = false,\n  className,\n}: {\n  children?: ReactNode;\n  /** A value-sized skeleton in place of the value and its change badge. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0', className)}>\n      {isLoading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </div>\n  );\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardFooter } from './metrics-kpi-card-footer';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardPrev } from './metrics-kpi-card-prev';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n  Footer: MetricsKpiCardFooter,\n  Prev: MetricsKpiCardPrev,\n});\n"],"mappings":"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"}

package/dist/{MetricsKpiCard-Idxjl-dn.js → MetricsKpiCard-OHbAElTl.js}

@@ -173,9 +173,10 @@ function MetricsKpiCardPrev({ value, className }) {
 	});
 }
 // src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx
-function MetricsKpiCardRoot({ children, className }) {
+function MetricsKpiCardRoot({ children, className, busy }) {
 	return /* @__PURE__ */ jsx(Card, {
 		className: cn("min-w-72 flex-1 px-4 py-3", className),
+		"aria-busy": busy || void 0,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "grid gap-1.5",
 			children
@@ -212,4 +213,4 @@ var MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
 });
 export { MetricsKpiCard as t };
 
-//# sourceMappingURL=MetricsKpiCard-Idxjl-dn.js.map
+//# sourceMappingURL=MetricsKpiCard-OHbAElTl.js.map

package/dist/{MetricsKpiCard-Idxjl-dn.js.map → MetricsKpiCard-OHbAElTl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MetricsKpiCard-Idxjl-dn.js","names":[],"sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-footer.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-prev.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// A change that rounds to 0.0% is no change: a neutral badge, no arrow.\nconst isFlat = (changePct: number) => Math.abs(changePct) < 0.05;\n\n// Green when the value moved the good way, red when it moved the bad way.\nfunction changeVariant(changePct: number, lowerIsBetter?: boolean) {\n  if (isFlat(changePct)) return 'neutral';\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  return isGood ? 'success' : 'destructive';\n}\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (isFlat(changePct)) return '0%';\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison = 'vs prior period',\n  prevValue,\n  lowerIsBetter,\n  caption = false,\n  className,\n}: {\n  changePct: number;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". Shown on hover. */\n  comparison?: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  /** Show the comparison as inline text. Off by default: pair the badge with\n   *  `MetricsKpiCard.Footer`, which shows the prior value itself. */\n  caption?: boolean;\n  className?: string;\n}) {\n  const flat = isFlat(changePct);\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Tooltip>\n        <TooltipTrigger render={<span tabIndex={0} className=\"inline-flex rounded-full\" />}>\n          <Badge\n            variant={changeVariant(changePct, lowerIsBetter)}\n            emphasis=\"strong\"\n            size=\"xs\"\n            icon={flat ? undefined : <Icon />}\n            className=\"tabular-nums\"\n            aria-hidden=\"true\"\n          >\n            {formattedChange}\n          </Badge>\n          <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n        </TooltipTrigger>\n        <TooltipContent>{description}</TooltipContent>\n      </Tooltip>\n      {caption ? (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" aria-hidden=\"true\">\n          {comparison}\n        </Txt>\n      ) : null}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * Bottom row under a hairline: one line of context on the left (e.g. \"1.3K server errors\")\n * and the prior period's value on the right. Only worth its hairline when there is a detail\n * line; a card with just a prior value puts it in the value row (`MetricsKpiCard.Prev`).\n */\nexport function MetricsKpiCardFooter({\n  detail,\n  prevValue,\n  isLoading = false,\n  className,\n}: {\n  detail: ReactNode;\n  prevValue?: string;\n  /** Skeletons in the detail's and prior value's line boxes, so the card keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  const frame = cn('mt-1 flex items-center justify-between gap-2 border-t border-border pt-2', className);\n  if (isLoading) {\n    return (\n      <div className={frame}>\n        <SkeletonText className=\"w-24\" />\n        <SkeletonText className=\"w-14\" />\n      </div>\n    );\n  }\n  if (detail == null || detail === false || detail === '') return null;\n  return (\n    <div className={frame}>\n      <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"min-w-0 truncate\">\n        {detail}\n      </Txt>\n      {prevValue && (\n        <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n          vs {prevValue}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({\n  children,\n  icon,\n  className,\n}: {\n  children: string;\n  /** Optional glyph shown at the far end of the label row (e.g. a lucide icon). */\n  icon?: ReactNode;\n  className?: string;\n}) {\n  if (!icon) {\n    return (\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n        {children}\n      </Txt>\n    );\n  }\n  return (\n    <span className={cn('flex items-center justify-between gap-2', className)}>\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n        {children}\n      </Txt>\n      <span aria-hidden className=\"shrink-0 text-muted-foreground [&>svg]:size-4\">\n        {icon}\n      </span>\n    </span>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * The prior period's value, pushed to the end of the value row. Use it when the card has\n * no detail line; with one, pass `prevValue` to `MetricsKpiCard.Footer` instead.\n */\nexport function MetricsKpiCardPrev({ value, className }: { value: string; className?: string }) {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"body-sm\"\n      tone=\"muted\"\n      title={`vs ${value}`}\n      // The value row keeps its children from shrinking; the prior value is the one part that\n      // may give way in a narrow card, truncating with the full text in the title.\n      className={cn('ml-auto min-w-0 shrink! truncate tabular-nums', className)}\n    >\n      vs {value}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-4 py-3', className)}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({\n  children,\n  isLoading = false,\n  className,\n}: {\n  children?: ReactNode;\n  /** A value-sized skeleton in place of the value and its change badge. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0', className)}>\n      {isLoading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </div>\n  );\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardFooter } from './metrics-kpi-card-footer';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardPrev } from './metrics-kpi-card-prev';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n  Footer: MetricsKpiCardFooter,\n  Prev: MetricsKpiCardPrev,\n});\n"],"mappings":"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"}
+{"version":3,"file":"MetricsKpiCard-OHbAElTl.js","names":[],"sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-footer.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-prev.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { ArrowDownRightIcon, ArrowUpRightIcon } from 'lucide-react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// A change that rounds to 0.0% is no change: a neutral badge, no arrow.\nconst isFlat = (changePct: number) => Math.abs(changePct) < 0.05;\n\n// Green when the value moved the good way, red when it moved the bad way.\nfunction changeVariant(changePct: number, lowerIsBetter?: boolean) {\n  if (isFlat(changePct)) return 'neutral';\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  return isGood ? 'success' : 'destructive';\n}\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\n  if (isFlat(changePct)) return '0%';\n  if (changePct >= 1000) return `×${compact.format(1 + changePct / 100)}`;\n  const digits = Math.abs(changePct) < 10 ? 1 : 0;\n  return `${changePct > 0 ? '+' : ''}${changePct.toFixed(digits)}%`;\n}\n\nexport function MetricsKpiCardChange({\n  changePct,\n  comparison = 'vs prior period',\n  prevValue,\n  lowerIsBetter,\n  caption = false,\n  className,\n}: {\n  changePct: number;\n  /** Names the window the change compares against, e.g. \"vs previous 7d\". Shown on hover. */\n  comparison?: string;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  /** Show the comparison as inline text. Off by default: pair the badge with\n   *  `MetricsKpiCard.Footer`, which shows the prior value itself. */\n  caption?: boolean;\n  className?: string;\n}) {\n  const flat = isFlat(changePct);\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n  const description = prevValue ? `${comparison} (${prevValue})` : comparison;\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Tooltip>\n        <TooltipTrigger render={<span tabIndex={0} className=\"inline-flex rounded-full\" />}>\n          <Badge\n            variant={changeVariant(changePct, lowerIsBetter)}\n            emphasis=\"strong\"\n            size=\"xs\"\n            icon={flat ? undefined : <Icon />}\n            className=\"tabular-nums\"\n            aria-hidden=\"true\"\n          >\n            {formattedChange}\n          </Badge>\n          <span className=\"sr-only\">{`${formattedChange} ${description}`}</span>\n        </TooltipTrigger>\n        <TooltipContent>{description}</TooltipContent>\n      </Tooltip>\n      {caption ? (\n        <Txt as=\"span\" variant=\"meta\" tone=\"faint\" aria-hidden=\"true\">\n          {comparison}\n        </Txt>\n      ) : null}\n    </div>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" className={cn('text-destructive-foreground', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { SkeletonText } from '@/ds/components/Skeleton';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * Bottom row under a hairline: one line of context on the left (e.g. \"1.3K server errors\")\n * and the prior period's value on the right. Only worth its hairline when there is a detail\n * line; a card with just a prior value puts it in the value row (`MetricsKpiCard.Prev`).\n */\nexport function MetricsKpiCardFooter({\n  detail,\n  prevValue,\n  isLoading = false,\n  className,\n}: {\n  detail: ReactNode;\n  prevValue?: string;\n  /** Skeletons in the detail's and prior value's line boxes, so the card keeps its height. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  const frame = cn('mt-1 flex items-center justify-between gap-2 border-t border-border pt-2', className);\n  if (isLoading) {\n    return (\n      <div className={frame}>\n        <SkeletonText className=\"w-24\" />\n        <SkeletonText className=\"w-14\" />\n      </div>\n    );\n  }\n  if (detail == null || detail === false || detail === '') return null;\n  return (\n    <div className={frame}>\n      <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"min-w-0 truncate\">\n        {detail}\n      </Txt>\n      {prevValue && (\n        <Txt as=\"span\" variant=\"body-sm\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n          vs {prevValue}\n        </Txt>\n      )}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardHeader({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({\n  children,\n  icon,\n  className,\n}: {\n  children: string;\n  /** Optional glyph shown at the far end of the label row (e.g. a lucide icon). */\n  icon?: ReactNode;\n  className?: string;\n}) {\n  if (!icon) {\n    return (\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className={className}>\n        {children}\n      </Txt>\n    );\n  }\n  return (\n    <span className={cn('flex items-center justify-between gap-2', className)}>\n      <Txt as=\"span\" variant=\"subheading\" tone=\"ink\">\n        {children}\n      </Txt>\n      <span aria-hidden className=\"shrink-0 text-muted-foreground [&>svg]:size-4\">\n        {icon}\n      </span>\n    </span>\n  );\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <Txt as=\"span\" className={className}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <Txt as=\"span\" variant=\"meta\" tone=\"faint\" className={className}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\n/**\n * The prior period's value, pushed to the end of the value row. Use it when the card has\n * no detail line; with one, pass `prevValue` to `MetricsKpiCard.Footer` instead.\n */\nexport function MetricsKpiCardPrev({ value, className }: { value: string; className?: string }) {\n  return (\n    <Txt\n      as=\"span\"\n      variant=\"body-sm\"\n      tone=\"muted\"\n      title={`vs ${value}`}\n      // The value row keeps its children from shrinking; the prior value is the one part that\n      // may give way in a narrow card, truncating with the full text in the title.\n      className={cn('ml-auto min-w-0 shrink! truncate tabular-nums', className)}\n    >\n      vs {value}\n    </Txt>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport type MetricsKpiCardRootProps = {\n  children: ReactNode;\n  className?: string;\n  /** The reading is loading or being replaced. */\n  busy?: boolean;\n};\n\nexport function MetricsKpiCardRoot({ children, className, busy }: MetricsKpiCardRootProps) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-4 py-3', className)} aria-busy={busy || undefined}>\n      <div className=\"grid gap-1.5\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <strong className={cn('text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]', className)}>\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({\n  children,\n  isLoading = false,\n  className,\n}: {\n  children?: ReactNode;\n  /** A value-sized skeleton in place of the value and its change badge. */\n  isLoading?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0', className)}>\n      {isLoading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </div>\n  );\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardFooter } from './metrics-kpi-card-footer';\nimport { MetricsKpiCardHeader } from './metrics-kpi-card-header';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardPrev } from './metrics-kpi-card-prev';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\nimport { MetricsKpiCardValueRow } from './metrics-kpi-card-value-row';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Header: MetricsKpiCardHeader,\n  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n  Footer: MetricsKpiCardFooter,\n  Prev: MetricsKpiCardPrev,\n});\n"],"mappings":"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"}

package/dist/{MetricsLineChart-DKzuRU2q.js → MetricsLineChart-BhHoduO0.js}

@@ -11,43 +11,26 @@ import { useChartDefsId } from "./primitives/use-chart-defs-id.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Area, CartesianGrid, ComposedChart, Line, Tooltip } from "recharts";
 // src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx
-function MetricsLineChartLegend({ data, series, className }) {
+/** A marker and a label per series. Totals belong in the card's header, not here. */
+function MetricsLineChartLegend({ series, className }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-wrap items-center gap-x-4 gap-y-1", className),
-		children: series.map((s) => {
-			const aggregated = data ? s.aggregate?.(data) : void 0;
-			return /* @__PURE__ */ jsxs("div", {
-				className: "inline-flex items-center gap-1.5",
-				children: [
-					s.dashed ? /* @__PURE__ */ jsx("span", {
-						className: "h-0 w-3 shrink-0 border-t-2 border-dashed",
-						style: { borderColor: s.color }
-					}) : /* @__PURE__ */ jsx("div", {
-						className: "size-2 shrink-0 rounded-[2px]",
-						style: { backgroundColor: s.color }
-					}),
-					/* @__PURE__ */ jsx(Txt, {
-						as: "span",
-						variant: "body-sm",
-						tone: "muted",
-						className: "max-w-48 truncate",
-						children: s.label
-					}),
-					aggregated && /* @__PURE__ */ jsxs(Txt, {
-						as: "span",
-						variant: "body-sm",
-						tone: "muted",
-						className: "-ml-1 tabular-nums",
-						children: [aggregated.value, aggregated.suffix && /* @__PURE__ */ jsxs(Txt, {
-							as: "span",
-							variant: "body-sm",
-							tone: "faint",
-							children: [" ", aggregated.suffix]
-						})]
-					})
-				]
-			}, s.dataKey);
-		})
+		children: series.map((s) => /* @__PURE__ */ jsxs("div", {
+			className: "inline-flex items-center gap-1.5",
+			children: [s.dashed ? /* @__PURE__ */ jsx("span", {
+				className: "h-0 w-3 shrink-0 border-t-2 border-dashed",
+				style: { borderColor: s.color }
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "size-2 shrink-0 rounded-[2px]",
+				style: { backgroundColor: s.color }
+			}), /* @__PURE__ */ jsx(Txt, {
+				as: "span",
+				variant: "body-sm",
+				tone: "muted",
+				className: "max-w-48 truncate",
+				children: s.label
+			})]
+		}, s.dataKey))
 	});
 }
 // src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx
@@ -129,8 +112,8 @@ var LINE_STYLES = {
 * edge where the line starts and stops. A mask sized to each fill's own box.
 */
 var THIN_FILL_FADE = "[&_.recharts-area-area]:mask-x-from-[calc(100%-24px)]";
-/** A series with this few points gets a dot on each: a lone point draws no line at all. */
-var SPARSE_POINTS = 12;
+/** A lone point draws no line at all, so it gets a dot; lines already bridge gaps (`connectNulls`). */
+var SPARSE_POINTS = 1;
 function HoverLine({ points }) {
 	const [top, bottom] = points ?? [];
 	if (!top || !bottom) return null;
@@ -149,7 +132,6 @@ function MetricsLineChart(props) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: root,
 		children: [showLegend && /* @__PURE__ */ jsx(MetricsLineChartLegend, {
-			data: isLoading ? void 0 : data,
 			series,
 			className: "mb-4"
 		}), isLoading ? /* @__PURE__ */ jsx(ChartSkeleton, {
@@ -266,4 +248,4 @@ function isRecord(value) {
 }
 export { MetricsLineChartTooltip as n, MetricsLineChartLegend as r, MetricsLineChart as t };
 
-//# sourceMappingURL=MetricsLineChart-DKzuRU2q.js.map
+//# sourceMappingURL=MetricsLineChart-BhHoduO0.js.map