@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/MetricsCard-D6bQfynP.js

@@ -0,0 +1,224 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { t as Button } from "./Button-Bi7aXd_G.js";
+import { t as Txt } from "./Txt-5efBsb2p.js";
+import { Skeleton, SkeletonText } from "./components/Skeleton.es.js";
+import { t as Spinner } from "./spinner-B9ykw74u.js";
+import { t as Card } from "./Card-ClDoUQNb.js";
+import { t as DropdownMenu } from "./dropdown-menu-jsf9D-J_.js";
+import { t as MetricsKpiCard } from "./MetricsKpiCard-1blTbzUs.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, GripVerticalIcon } 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 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("-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 has-data-popup-open:opacity-100", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-content.tsx
+/**
+* Scrolls sideways only (wide tables). Vertical overflow is hidden: a chart filling a card with a
+* fractional height rounds 1px past it, which otherwise turns the content into a scroll box.
+* Tables inside a card drop the last row's border: the card edge already closes them.
+*/
+function MetricsCardContent({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("overflow-x-auto overflow-y-hidden [&_tbody>tr:last-child]:border-b-0", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-drag-handle.tsx
+/** The grip a card is dragged by, left of its title. Its negative margin keeps the top bar's height. */
+function MetricsCardDragHandle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		className: cn("-my-1 shrink-0 cursor-grab active:cursor-grabbing", className),
+		...props,
+		children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-error.tsx
+function MetricsCardError({ message = "Failed to load data", className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col items-center justify-center gap-3", className),
+		children: /* @__PURE__ */ jsx(Txt, {
+			variant: "caption",
+			className: "text-destructive-foreground",
+			children: message
+		})
+	});
+}
+// 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, at the value's own trimmed height.
+*/
+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: cn("text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]", isLoading && "relative min-w-24"),
+				children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "invisible",
+					children: "0"
+				}), /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0" })] }) : value
+			}), !isLoading && change && /* @__PURE__ */ jsxs("span", {
+				className: "text-body-sm text-muted-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
+				children: [change, " vs previous"]
+			})]
+		})]
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-loading.tsx
+function MetricsCardLoading({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center", className),
+		children: /* @__PURE__ */ jsx(Spinner, {
+			size: "md",
+			variant: "pulse",
+			className: "text-placeholder"
+		})
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-no-data.tsx
+function MetricsCardNoData({ message = "No data yet", className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full items-center justify-center", className),
+		children: /* @__PURE__ */ jsx(Txt, {
+			tone: "faint",
+			children: message
+		})
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-root.tsx
+function MetricsCardRoot({ children, className }) {
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("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", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-title.tsx
+function MetricsCardTitle({ children, className, as: Tag = "h3" }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cn("text-body font-medium text-foreground", className),
+		children
+	});
+}
+// 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__ */ 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: 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 24px
+* tall, so toolbars line up across cards in the same row.
+*/
+function MetricsCardToolbar({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("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", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-top-bar.tsx
+function MetricsCardTopBar({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-start gap-4 [&>:first-child]:min-w-0 [&>:first-child]:flex-1", className),
+		children
+	});
+}
+// src/ds/components/MetricsCard/metrics-card-total.tsx
+/**
+* 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: /* @__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
+var MetricsCard = Object.assign(MetricsCardRoot, {
+	Root: MetricsCardRoot,
+	Kpi: MetricsKpiCard,
+	TopBar: MetricsCardTopBar,
+	Toolbar: MetricsCardToolbar,
+	Actions: MetricsCardActions,
+	DragHandle: MetricsCardDragHandle,
+	Title: MetricsCardTitle,
+	TitleMenu: MetricsCardTitleMenu,
+	Total: MetricsCardTotal,
+	Headline: MetricsCardHeadline,
+	Loading: MetricsCardLoading,
+	Error: MetricsCardError,
+	Content: MetricsCardContent,
+	NoData: MetricsCardNoData
+});
+export { MetricsCard as t };
+
+//# sourceMappingURL=MetricsCard-D6bQfynP.js.map

package/dist/MetricsCard-D6bQfynP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsCard-D6bQfynP.js","names":["_Fragment"],"sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-drag-handle.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 has-data-popup-open: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 { GripVerticalIcon } from 'lucide-react';\nimport type { DragEventHandler } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\n/** What a host's layout hands a card so it can be dragged, e.g. to rearrange a dashboard. */\nexport type MetricsCardDragHandleProps = {\n  /** What dragging does, e.g. \"Move widget\". */\n  'aria-label': string;\n  draggable?: boolean;\n  onDragStart?: DragEventHandler<HTMLElement>;\n  onDragEnd?: DragEventHandler<HTMLElement>;\n  className?: string;\n};\n\n/** The grip a card is dragged by, left of its title. Its negative margin keeps the top bar's height. */\nexport function MetricsCardDragHandle({ className, ...props }: MetricsCardDragHandleProps) {\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn('-my-1 shrink-0 cursor-grab active:cursor-grabbing', className)}\n      {...props}\n    >\n      <GripVerticalIcon />\n    </Button>\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 { Skeleton } 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, at the value's own trimmed height.\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\n          className={cn(\n            'text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]',\n            isLoading && 'relative min-w-24',\n          )}\n        >\n          {isLoading ? (\n            // Hidden text keeps the value's trimmed height, so the row (and the actions centred on\n            // it) doesn't move when the value arrives; the bar covers it.\n            <>\n              <span className=\"invisible\">0</span>\n              <Skeleton className=\"absolute inset-0\" />\n            </>\n          ) : (\n            value\n          )}\n        </span>\n        {!isLoading &&\n          change && (\n            // Trimmed like the value, so its line box doesn't make the row taller than while loading.\n            <span className=\"text-body-sm text-muted-foreground tabular-nums [text-box:trim-both_cap_alphabetic]\">\n              {change} vs previous\n            </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 { MetricsCardDragHandle } from './metrics-card-drag-handle';\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  DragHandle: MetricsCardDragHandle,\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":";;;;;;;;;;;;;;AAMA,SAAgB,mBAAmB,EACjC,UACA,SAAS,UACT,aASC;CACD,OACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,WAAW,WACT,2IACF,SACF;EAEC;CACE,CAAA;AAET;;;;;;;ACvBA,SAAgB,mBAAmB,EAAE,UAAU,aAA0D;CACvG,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,wEAAwE,SAAS;EACjG;CACE,CAAA;AAET;;;ACEA,SAAgB,sBAAsB,EAAE,WAAW,GAAG,SAAqC;CACzF,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACL,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;EAEJ,UAAA,oBAAC,kBAAD,CAAmB,CAAA;CACb,CAAA;AAEZ;;ACxBA,SAAgB,iBAAiB,EAC/B,UAAU,uBACV,aAIC;CACD,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,mDAAmD,SAAS;EAC7E,UAAA,oBAAC,KAAD;GAAK,SAAQ;GAAU,WAAU;GAC9B,UAAA;EACE,CAAA;CACF,CAAA;AAET;;;;;;;ACTA,SAAgB,oBAAoB,EAClC,OACA,OACA,QACA,YAAY,OACZ,aAQC;CACD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,gBAAgB,SAAS;EAA5C,UAAA,CACE,oBAAC,MAAD;GAAI,WAAU;GAAsC,UAAA;EAAU,CAAA,GAC9D,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,+EACA,aAAa,mBACf;IAEC,UAAA,YAGC,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA;IAAO,CAAA,GACnC,oBAAC,UAAD,EAAU,WAAU,mBAAoB,CAAA,CACxC,EAAA,CAAA,IAEF;GAEE,CAAA,GACL,CAAC,aACA,UAEE,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,QAAO,cACJ;GAEN,CAAA,CAAA;EACH,CAAA,CAAA;;AAET;;AClDA,SAAgB,mBAAmB,EAAE,aAAqC;CACxE,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,oCAAoC,SAAS;EAC9D,UAAA,oBAAC,SAAD;GAAS,MAAK;GAAK,SAAQ;GAAQ,WAAU;EAAoB,CAAA;CAC9D,CAAA;AAET;;ACNA,SAAgB,kBAAkB,EAAE,UAAU,eAAe,aAAuD;CAClH,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,2CAA2C,SAAS;EACrE,UAAA,oBAAC,KAAD;GAAK,MAAK;GAAS,UAAA;EAAa,CAAA;CAC7B,CAAA;AAET;;ACLA,SAAgB,gBAAgB,EAAE,UAAU,aAA0D;CACpG,OACE,oBAAC,MAAD;EACE,WAAW,GACT,4IACA,SACF;EAEC;CACG,CAAA;AAEV;;ACbA,SAAgB,iBAAiB,EAC/B,UACA,WACA,IAAI,MAAM,QAKT;CACD,OAAO,oBAAC,KAAD;EAAK,WAAW,GAAG,yCAAyC,SAAS;EAAI;CAAc,CAAA;AAChG;;;;;;;;ACSA,SAAgB,qBAAuC,EACrD,OACA,OACA,eACA,SACA,aAC+B;CAC/B,OACE,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,qBAAC,cAAD,EAAA,UAAA,CACE,qBAAC,aAAa,SAAd;GACE,QACE,oBAAC,UAAD;IACE,MAAK;IACL,WAAW,GACT,oJACA,SACF;GACD,CAAA;GARL,UAAA,CAWG,OACD,oBAAC,iBAAD,EAAiB,WAAU,iCAAkC,CAAA,CACzC;EACtB,CAAA,GAAA,oBAAC,aAAa,SAAd;GAAsB,OAAM;GAC1B,UAAA,oBAAC,aAAa,cAAd;IAAoC;IAAgB;IAAsB;IAAe,eAAA;GAAe,CAAA;EACpF,CAAA,CACV,EAAA,CAAA;CACX,CAAA;AAET;;;;;;;;AC1CA,SAAgB,mBAAmB,EAAE,UAAU,aAA0D;CACvG,OACE,oBAAC,OAAD;EACE,WAAW,GACT,oJACA,SACF;EAEC;CACE,CAAA;AAET;;ACjBA,SAAgB,kBAAkB,EAAE,UAAU,aAA0D;CACtG,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,2EAA2E,SAAS;EACpG;CACE,CAAA;AAET;;;;;;;;ACGA,SAAgB,iBAAiB,EAC/B,OACA,YAAY,OACZ,aAKC;CACD,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,0EAA0E,SAAS;EACrG,UAAA,oBAAC,YAAD;GAAmB;GAAkB;EAAY,CAAA;CAC7C,CAAA;AAEV;AAEA,SAAS,WAAW,EAAE,OAAO,aAAsF;CACjH,IAAI,WAAW,OAAO,oBAAC,cAAD;EAAc,MAAK;EAAY,WAAU;CAAY,CAAA;CAC3E,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA,MAAM,KAAI,SACT,qBAAC,QAAD;GAAuB,WAAU;GAAjC,UAAA;IACE,oBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;KAAgC,OAAO,EAAE,iBAAiB,KAAK,MAAM;IAAI,CAAA;IAErG,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAA2B,KAAK,OAAM,GAAO;;IAC5C,KAAK;GACF;EALK,GAAA,KAAK,KAKV,CACP;CACG,CAAA;AAEV;;AC5BA,IAAa,cAAc,OAAO,OAAO,iBAAiB;CACxD,MAAM;CACN,KAAK;CACL,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CACP,WAAW;CACX,OAAO;CACP,UAAU;CACV,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;AACV,CAAC"}

package/dist/MetricsKpiCard-1blTbzUs.js

@@ -0,0 +1,216 @@
+import { t as Badge } from "./Badge-C7NnqmMx.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "./tooltip-DJcze2VZ.js";
+import { t as Txt } from "./Txt-5efBsb2p.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { Skeleton, SkeletonText } from "./components/Skeleton.es.js";
+import { t as Spinner } from "./spinner-B9ykw74u.js";
+import { t as Card } from "./Card-ClDoUQNb.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownRightIcon, ArrowUpRightIcon } from "lucide-react";
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx
+var compact = new Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+var isFlat = (changePct) => Math.abs(changePct) < .05;
+function changeVariant(changePct, lowerIsBetter) {
+	if (isFlat(changePct)) return "neutral";
+	return (lowerIsBetter ? changePct < 0 : changePct >= 0) ? "success" : "destructive";
+}
+function formatChange(changePct) {
+	if (isFlat(changePct)) return "0%";
+	if (changePct >= 1e3) return `×${compact.format(1 + changePct / 100)}`;
+	const digits = Math.abs(changePct) < 10 ? 1 : 0;
+	return `${changePct > 0 ? "+" : ""}${changePct.toFixed(digits)}%`;
+}
+function MetricsKpiCardChange({ changePct, comparison = "vs prior period", prevValue, lowerIsBetter, caption = false, className }) {
+	const flat = isFlat(changePct);
+	const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;
+	const formattedChange = formatChange(changePct);
+	const description = prevValue ? `${comparison} (${prevValue})` : comparison;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1.5", className),
+		children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			render: /* @__PURE__ */ jsx("span", {
+				tabIndex: 0,
+				className: "inline-flex rounded-full"
+			}),
+			children: [/* @__PURE__ */ jsx(Badge, {
+				variant: changeVariant(changePct, lowerIsBetter),
+				emphasis: "strong",
+				size: "xs",
+				icon: flat ? void 0 : /* @__PURE__ */ jsx(Icon, {}),
+				className: "tabular-nums",
+				"aria-hidden": "true",
+				children: formattedChange
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: `${formattedChange} ${description}`
+			})]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: description })] }), caption ? /* @__PURE__ */ jsx(Txt, {
+			as: "span",
+			variant: "meta",
+			tone: "faint",
+			"aria-hidden": "true",
+			children: comparison
+		}) : null]
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx
+function MetricsKpiCardError({ message = "Failed to load data", className }) {
+	return /* @__PURE__ */ jsx(Txt, {
+		as: "span",
+		variant: "meta",
+		className: cn("text-destructive-foreground", className),
+		children: message
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-footer.tsx
+/**
+* Bottom row under a hairline: one line of context on the left (e.g. "1.3K server errors")
+* and the prior period's value on the right. Only worth its hairline when there is a detail
+* line; a card with just a prior value puts it in the value row (`MetricsKpiCard.Prev`).
+*/
+function MetricsKpiCardFooter({ detail, prevValue, isLoading = false, className }) {
+	const frame = cn("mt-1 flex items-center justify-between gap-2 border-t border-border pt-2", className);
+	if (isLoading) return /* @__PURE__ */ jsxs("div", {
+		className: frame,
+		children: [/* @__PURE__ */ jsx(SkeletonText, { className: "w-24" }), /* @__PURE__ */ jsx(SkeletonText, { className: "w-14" })]
+	});
+	if (detail == null || detail === false || detail === "") return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: frame,
+		children: [/* @__PURE__ */ jsx(Txt, {
+			as: "span",
+			variant: "body-sm",
+			tone: "muted",
+			className: "min-w-0 truncate",
+			children: detail
+		}), prevValue && /* @__PURE__ */ jsxs(Txt, {
+			as: "span",
+			variant: "body-sm",
+			tone: "muted",
+			className: "shrink-0 tabular-nums",
+			children: ["vs ", prevValue]
+		})]
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-header.tsx
+function MetricsKpiCardHeader({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap items-center gap-x-2 gap-y-1", className),
+		children
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx
+function MetricsKpiCardLabel({ children, icon, className }) {
+	if (!icon) return /* @__PURE__ */ jsx(Txt, {
+		as: "span",
+		variant: "subheading",
+		tone: "ink",
+		className,
+		children
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex items-center justify-between gap-2", className),
+		children: [/* @__PURE__ */ jsx(Txt, {
+			as: "span",
+			variant: "subheading",
+			tone: "ink",
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "shrink-0 text-muted-foreground [&>svg]:size-4",
+			children: icon
+		})]
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx
+function MetricsKpiCardLoading({ className }) {
+	return /* @__PURE__ */ jsx(Txt, {
+		as: "span",
+		className,
+		children: /* @__PURE__ */ jsx(Spinner, {
+			size: "md",
+			variant: "pulse",
+			className: "text-placeholder"
+		})
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx
+function MetricsKpiCardNoChange({ message = "No previous value to compare", className }) {
+	return /* @__PURE__ */ jsx(Txt, {
+		as: "span",
+		variant: "meta",
+		tone: "faint",
+		className,
+		children: message
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+	return /* @__PURE__ */ jsx(Txt, {
+		as: "span",
+		variant: "meta",
+		tone: "faint",
+		className,
+		children: message
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-prev.tsx
+/**
+* The prior period's value, pushed to the end of the value row. Use it when the card has
+* no detail line; with one, pass `prevValue` to `MetricsKpiCard.Footer` instead.
+*/
+function MetricsKpiCardPrev({ value, className }) {
+	return /* @__PURE__ */ jsxs(Txt, {
+		as: "span",
+		variant: "body-sm",
+		tone: "muted",
+		title: `vs ${value}`,
+		className: cn("ml-auto min-w-0 shrink! truncate tabular-nums", className),
+		children: ["vs ", value]
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx
+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
+		})
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx
+function MetricsKpiCardValue({ children, className }) {
+	return /* @__PURE__ */ jsx("strong", {
+		className: cn("text-title text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]", className),
+		children
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card-value-row.tsx
+function MetricsKpiCardValueRow({ children, isLoading = false, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-6 items-center gap-2 whitespace-nowrap *:shrink-0", className),
+		children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" }) : children
+	});
+}
+// src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx
+var MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+	Header: MetricsKpiCardHeader,
+	Label: MetricsKpiCardLabel,
+	ValueRow: MetricsKpiCardValueRow,
+	Value: MetricsKpiCardValue,
+	Change: MetricsKpiCardChange,
+	NoChange: MetricsKpiCardNoChange,
+	NoData: MetricsKpiCardNoData,
+	Error: MetricsKpiCardError,
+	Loading: MetricsKpiCardLoading,
+	Footer: MetricsKpiCardFooter,
+	Prev: MetricsKpiCardPrev
+});
+export { MetricsKpiCard as t };
+
+//# sourceMappingURL=MetricsKpiCard-1blTbzUs.js.map

package/dist/MetricsKpiCard-1blTbzUs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsKpiCard-1blTbzUs.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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"}