@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/metrics-kpi-card-CW24YjZp.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Badge = require('./Badge-H8K5WrXg.cjs');
+const Txt = require('./Txt-DPmEpNbp.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+const spinner = require('./spinner-BCpN7LL9.cjs');
+const Card = require('./Card-BQsKHkyB.cjs');
+
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+function formatChange(changePct) {
+  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,
+  prevValue,
+  lowerIsBetter,
+  className
+}) {
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  const Icon = changePct >= 0 ? lucideReact.ArrowUpRightIcon : lucideReact.ArrowDownRightIcon;
+  const formattedChange = formatChange(changePct);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Badge.Badge,
+      {
+        variant: isGood ? "success" : "destructive",
+        emphasis: "subtle",
+        size: "xs",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+        className: "tabular-nums",
+        children: formattedChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "meta", tone: "faint", children: [
+      "vs prior period",
+      prevValue ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+        ", previous value ",
+        prevValue
+      ] }) : null
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: utils_cn.cn("text-destructive-indicator", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", tone: "ink", className: utils_cn.cn("font-medium", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", className, children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "md", variant: "pulse", className: "text-placeholder" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { className: utils_cn.cn("min-w-72 flex-1 px-5 py-4", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1.5", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "strong",
+    {
+      className: utils_cn.cn(
+        "text-title font-semibold text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function MetricsKpiCardValueRow({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1", className), children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Label: MetricsKpiCardLabel,
+  ValueRow: MetricsKpiCardValueRow,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading
+});
+
+exports.MetricsKpiCard = MetricsKpiCard;
+//# sourceMappingURL=metrics-kpi-card-CW24YjZp.cjs.map

package/dist/metrics-kpi-card-CW24YjZp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-CW24YjZp.cjs","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-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-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 { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\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  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Badge\n        variant={isGood ? 'success' : 'destructive'}\n        emphasis=\"subtle\"\n        size=\"xs\"\n        icon={<Icon />}\n        className=\"tabular-nums\"\n      >\n        {formattedChange}\n      </Badge>\n      <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n        vs prior period\n        {prevValue ? <span className=\"sr-only\">, previous value {prevValue}</span> : null}\n      </Txt>\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-indicator', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt as=\"span\" tone=\"ink\" className={cn('font-medium', className)}>\n      {children}\n    </Txt>\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 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-5 py-4', 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\n      className={cn(\n        'text-title font-semibold text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]',\n        className,\n      )}\n    >\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\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 { 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  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":["ArrowUpRightIcon","ArrowDownRightIcon","cn","jsx","Badge","Txt","jsxs","Spinner","Card"],"mappings":"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"}

package/dist/metrics-kpi-card-DLDT28IB.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowUpRightIcon, ArrowDownRightIcon } from 'lucide-react';
+import { B as Badge } from './Badge-Q_pCeeGW.js';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+import { c as cn } from './cn-65Adrsfj.js';
+import { S as Spinner } from './spinner-ylbE0TJA.js';
+import { C as Card } from './Card-DVy0QS4m.js';
+
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+function formatChange(changePct) {
+  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,
+  prevValue,
+  lowerIsBetter,
+  className
+}) {
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;
+  const formattedChange = formatChange(changePct);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: isGood ? "success" : "destructive",
+        emphasis: "subtle",
+        size: "xs",
+        icon: /* @__PURE__ */ jsx(Icon, {}),
+        className: "tabular-nums",
+        children: formattedChange
+      }
+    ),
+    /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "meta", tone: "faint", children: [
+      "vs prior period",
+      prevValue ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        ", previous value ",
+        prevValue
+      ] }) : null
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", className: cn("text-destructive-indicator", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", tone: "ink", className: cn("font-medium", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", className, children: /* @__PURE__ */ jsx(Spinner, { size: "md", variant: "pulse", className: "text-placeholder" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "faint", className, children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsx(Card, { className: cn("min-w-72 flex-1 px-5 py-4", className), children: /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "strong",
+    {
+      className: cn(
+        "text-title font-semibold text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function MetricsKpiCardValueRow({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1", className), children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Label: MetricsKpiCardLabel,
+  ValueRow: MetricsKpiCardValueRow,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading
+});
+
+export { MetricsKpiCard as M };
+//# sourceMappingURL=metrics-kpi-card-DLDT28IB.js.map

package/dist/metrics-kpi-card-DLDT28IB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-DLDT28IB.js","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-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-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 { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// Past +1000% a percentage is unreadable, so show how many times bigger the value got instead.\nfunction formatChange(changePct: number) {\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  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n  const Icon = changePct >= 0 ? ArrowUpRightIcon : ArrowDownRightIcon;\n  const formattedChange = formatChange(changePct);\n\n  return (\n    <div className={cn('flex items-center gap-1.5', className)}>\n      <Badge\n        variant={isGood ? 'success' : 'destructive'}\n        emphasis=\"subtle\"\n        size=\"xs\"\n        icon={<Icon />}\n        className=\"tabular-nums\"\n      >\n        {formattedChange}\n      </Badge>\n      <Txt as=\"span\" variant=\"meta\" tone=\"faint\">\n        vs prior period\n        {prevValue ? <span className=\"sr-only\">, previous value {prevValue}</span> : null}\n      </Txt>\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-indicator', className)}>\n      {message}\n    </Txt>\n  );\n}\n","import { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return (\n    <Txt as=\"span\" tone=\"ink\" className={cn('font-medium', className)}>\n      {children}\n    </Txt>\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 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-5 py-4', 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\n      className={cn(\n        'text-title font-semibold text-foreground tabular-nums [text-box:trim-both_cap_alphabetic]',\n        className,\n      )}\n    >\n      {children}\n    </strong>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValueRow({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1', className)}>{children}</div>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\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 { 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  Label: MetricsKpiCardLabel,\n  ValueRow: MetricsKpiCardValueRow,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":[],"mappings":"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"}

package/dist/metrics-line-chart-C3UMBQ38.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line } from 'recharts';
+import { M as MetricsLineChartLegend, a as MetricsLineChartTooltip } from './metrics-line-chart-tooltip-mZXPH1yH.js';
+import { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from './tokens.es.js';
+
+const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+function SmoothCursor({ points }) {
+  const [top, bottom] = points ?? [];
+  if (!top || !bottom) return null;
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      x1: 0,
+      x2: 0,
+      y1: top.y,
+      y2: bottom.y,
+      stroke: "currentColor",
+      strokeOpacity: 0.2,
+      strokeWidth: 1,
+      className: "pointer-events-none text-black transition-transform duration-150 ease-out dark:text-white",
+      style: { transform: `translateX(${top.x}px)` }
+    }
+  );
+}
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick,
+  xAxisInterval = "preserveStartEnd",
+  xAxisMinTickGap = 28,
+  showDots = false,
+  showLegend = true
+}) {
+  const isClickable = typeof onPointClick === "function";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    showLegend && /* @__PURE__ */ jsx(MetricsLineChartLegend, { data, series, className: "mb-4" }),
+    /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, margin: { top: 5, right: 5, bottom: 5, left: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          strokeDasharray: "4 4",
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: xAxisInterval,
+          minTickGap: xAxisMinTickGap
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: "auto",
+          tickFormatter: (value) => compactNumber.format(value),
+          domain: yDomain,
+          tickCount: 3
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {}), cursor: /* @__PURE__ */ jsx(SmoothCursor, {}) }),
+      series.map((s) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "linear",
+          dataKey: s.dataKey,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false,
+          activeDot: isClickable ? {
+            r: 4,
+            stroke: s.color,
+            strokeOpacity: 0.3,
+            strokeWidth: 4,
+            style: { cursor: "pointer" },
+            onClick: (_, payload) => {
+              const datum = payload?.payload;
+              if (datum) onPointClick(datum, s.dataKey);
+            }
+          } : { r: 4, stroke: s.color, strokeOpacity: 0.3, strokeWidth: 4 },
+          name: s.label
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+}
+
+export { MetricsLineChart as M };
+//# sourceMappingURL=metrics-line-chart-C3UMBQ38.js.map

package/dist/metrics-line-chart-C3UMBQ38.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-C3UMBQ38.js","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from '@/ds/tokens';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  aggregate?: (data: Record<string, unknown>[]) => { value: string; suffix?: string };\n};\n\nconst compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// Positioned via transform so the hover line glides between points instead of jumping.\nfunction SmoothCursor({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line\n      x1={0}\n      x2={0}\n      y1={top.y}\n      y2={bottom.y}\n      stroke=\"currentColor\"\n      strokeOpacity={0.2}\n      strokeWidth={1}\n      className=\"pointer-events-none text-black transition-transform duration-150 ease-out dark:text-white\"\n      style={{ transform: `translateX(${top.x}px)` }}\n    />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport function MetricsLineChart({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  xAxisInterval = 'preserveStartEnd',\n  xAxisMinTickGap = 28,\n  showDots = false,\n  showLegend = true,\n}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  height?: number;\n  yDomain?: [number, number];\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** X-axis tick density. Defaults to `\"preserveStartEnd\"`, which drops labels\n   * to fit the chart width. Pass a number for a fixed step instead. */\n  xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';\n  /** Minimum px gap between rendered ticks; recharts drops labels to honor it. Default `28`. */\n  xAxisMinTickGap?: number;\n  /** Render a visible dot on every point (needed for single-point series). */\n  showDots?: boolean;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n}) {\n  const isClickable = typeof onPointClick === 'function';\n\n  return (\n    <div>\n      {showLegend && <MetricsLineChartLegend data={data} series={series} className=\"mb-4\" />}\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart data={data} margin={{ top: 5, right: 5, bottom: 5, left: 0 }}>\n            <CartesianGrid\n              stroke=\"currentColor\"\n              strokeOpacity={0.08}\n              strokeDasharray=\"4 4\"\n              vertical={false}\n              className=\"text-black dark:text-white\"\n            />\n            <XAxis\n              dataKey=\"time\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              interval={xAxisInterval}\n              minTickGap={xAxisMinTickGap}\n            />\n            <YAxis\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width=\"auto\"\n              tickFormatter={(value: number) => compactNumber.format(value)}\n              domain={yDomain}\n              tickCount={3}\n            />\n            <Tooltip content={<MetricsLineChartTooltip />} cursor={<SmoothCursor />} />\n            {series.map(s => (\n              <Line\n                key={s.dataKey}\n                type=\"linear\"\n                dataKey={s.dataKey}\n                stroke={s.color}\n                strokeWidth={2}\n                dot={showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false}\n                activeDot={\n                  isClickable\n                    ? {\n                        r: 4,\n                        stroke: s.color,\n                        strokeOpacity: 0.3,\n                        strokeWidth: 4,\n                        style: { cursor: 'pointer' },\n                        onClick: (_: unknown, payload: unknown) => {\n                          const datum = (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n                          if (datum) onPointClick(datum, s.dataKey);\n                        },\n                      }\n                    : { r: 4, stroke: s.color, strokeOpacity: 0.3, strokeWidth: 4 }\n                }\n                name={s.label}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/metrics-line-chart-CjJxBbM-.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+const metricsLineChartTooltip = require('./metrics-line-chart-tooltip-DiXCgpik.cjs');
+const tokens = require('./tokens.cjs.js');
+
+const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+function SmoothCursor({ points }) {
+  const [top, bottom] = points ?? [];
+  if (!top || !bottom) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "line",
+    {
+      x1: 0,
+      x2: 0,
+      y1: top.y,
+      y2: bottom.y,
+      stroke: "currentColor",
+      strokeOpacity: 0.2,
+      strokeWidth: 1,
+      className: "pointer-events-none text-black transition-transform duration-150 ease-out dark:text-white",
+      style: { transform: `translateX(${top.x}px)` }
+    }
+  );
+}
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick,
+  xAxisInterval = "preserveStartEnd",
+  xAxisMinTickGap = 28,
+  showDots = false,
+  showLegend = true
+}) {
+  const isClickable = typeof onPointClick === "function";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    showLegend && /* @__PURE__ */ jsxRuntime.jsx(metricsLineChartTooltip.MetricsLineChartLegend, { data, series, className: "mb-4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin: { top: 5, right: 5, bottom: 5, left: 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          strokeDasharray: "4 4",
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: tokens.CHART_TICK_FONT_SIZE, fill: tokens.CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: xAxisInterval,
+          minTickGap: xAxisMinTickGap
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          tick: { fontSize: tokens.CHART_TICK_FONT_SIZE, fill: tokens.CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: "auto",
+          tickFormatter: (value) => compactNumber.format(value),
+          domain: yDomain,
+          tickCount: 3
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(metricsLineChartTooltip.MetricsLineChartTooltip, {}), cursor: /* @__PURE__ */ jsxRuntime.jsx(SmoothCursor, {}) }),
+      series.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Line,
+        {
+          type: "linear",
+          dataKey: s.dataKey,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false,
+          activeDot: isClickable ? {
+            r: 4,
+            stroke: s.color,
+            strokeOpacity: 0.3,
+            strokeWidth: 4,
+            style: { cursor: "pointer" },
+            onClick: (_, payload) => {
+              const datum = payload?.payload;
+              if (datum) onPointClick(datum, s.dataKey);
+            }
+          } : { r: 4, stroke: s.color, strokeOpacity: 0.3, strokeWidth: 4 },
+          name: s.label
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+}
+
+exports.MetricsLineChart = MetricsLineChart;
+//# sourceMappingURL=metrics-line-chart-CjJxBbM-.cjs.map

package/dist/metrics-line-chart-CjJxBbM-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-CjJxBbM-.cjs","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { MetricsLineChartLegend } from './metrics-line-chart-legend';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from '@/ds/tokens';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  aggregate?: (data: Record<string, unknown>[]) => { value: string; suffix?: string };\n};\n\nconst compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\n\n// Positioned via transform so the hover line glides between points instead of jumping.\nfunction SmoothCursor({ points }: { points?: { x: number; y: number }[] }) {\n  const [top, bottom] = points ?? [];\n  if (!top || !bottom) return null;\n  return (\n    <line\n      x1={0}\n      x2={0}\n      y1={top.y}\n      y2={bottom.y}\n      stroke=\"currentColor\"\n      strokeOpacity={0.2}\n      strokeWidth={1}\n      className=\"pointer-events-none text-black transition-transform duration-150 ease-out dark:text-white\"\n      style={{ transform: `translateX(${top.x}px)` }}\n    />\n  );\n}\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport function MetricsLineChart({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  xAxisInterval = 'preserveStartEnd',\n  xAxisMinTickGap = 28,\n  showDots = false,\n  showLegend = true,\n}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  height?: number;\n  yDomain?: [number, number];\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** X-axis tick density. Defaults to `\"preserveStartEnd\"`, which drops labels\n   * to fit the chart width. Pass a number for a fixed step instead. */\n  xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';\n  /** Minimum px gap between rendered ticks; recharts drops labels to honor it. Default `28`. */\n  xAxisMinTickGap?: number;\n  /** Render a visible dot on every point (needed for single-point series). */\n  showDots?: boolean;\n  /** Set to `false` to render `MetricsLineChartLegend` elsewhere, e.g. next to tabs. */\n  showLegend?: boolean;\n}) {\n  const isClickable = typeof onPointClick === 'function';\n\n  return (\n    <div>\n      {showLegend && <MetricsLineChartLegend data={data} series={series} className=\"mb-4\" />}\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart data={data} margin={{ top: 5, right: 5, bottom: 5, left: 0 }}>\n            <CartesianGrid\n              stroke=\"currentColor\"\n              strokeOpacity={0.08}\n              strokeDasharray=\"4 4\"\n              vertical={false}\n              className=\"text-black dark:text-white\"\n            />\n            <XAxis\n              dataKey=\"time\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              interval={xAxisInterval}\n              minTickGap={xAxisMinTickGap}\n            />\n            <YAxis\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width=\"auto\"\n              tickFormatter={(value: number) => compactNumber.format(value)}\n              domain={yDomain}\n              tickCount={3}\n            />\n            <Tooltip content={<MetricsLineChartTooltip />} cursor={<SmoothCursor />} />\n            {series.map(s => (\n              <Line\n                key={s.dataKey}\n                type=\"linear\"\n                dataKey={s.dataKey}\n                stroke={s.color}\n                strokeWidth={2}\n                dot={showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false}\n                activeDot={\n                  isClickable\n                    ? {\n                        r: 4,\n                        stroke: s.color,\n                        strokeOpacity: 0.3,\n                        strokeWidth: 4,\n                        style: { cursor: 'pointer' },\n                        onClick: (_: unknown, payload: unknown) => {\n                          const datum = (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n                          if (datum) onPointClick(datum, s.dataKey);\n                        },\n                      }\n                    : { r: 4, stroke: s.color, strokeOpacity: 0.3, strokeWidth: 4 }\n                }\n                name={s.label}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","MetricsLineChartLegend","ResponsiveContainer","LineChart","CartesianGrid","XAxis","CHART_TICK_FONT_SIZE","CHART_LABEL_COLOR","YAxis","Tooltip","MetricsLineChartTooltip","Line"],"mappings":"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"}

package/dist/metrics-line-chart-tooltip-DiXCgpik.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const Txt = require('./Txt-DPmEpNbp.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+const chartTooltip = require('./chart-tooltip-DX6vs_Tc.cjs');
+
+function MetricsLineChartLegend({
+  data,
+  series,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap items-center gap-4 gap-y-1", className), children: series.map((s) => {
+    const aggregated = s.aggregate?.(data);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: s.color } }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-24 truncate", children: s.label }),
+      aggregated && /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "caption", tone: "muted", children: [
+        aggregated.value,
+        aggregated.suffix && /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "caption", tone: "faint", children: [
+          " ",
+          aggregated.suffix
+        ] })
+      ] })
+    ] }, s.dataKey);
+  }) });
+}
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix,
+  formatValue = (value) => value.toLocaleString("en-US")
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(chartTooltip.ChartTooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "column", tone: "ink", className: "mb-1", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 inline-block size-2 rounded-full", style: { backgroundColor: entry.color } }),
+      entry.name,
+      ":",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+        typeof entry.value === "number" ? formatValue(entry.value) : entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+exports.MetricsLineChartLegend = MetricsLineChartLegend;
+exports.MetricsLineChartTooltip = MetricsLineChartTooltip;
+//# sourceMappingURL=metrics-line-chart-tooltip-DiXCgpik.cjs.map

package/dist/metrics-line-chart-tooltip-DiXCgpik.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-tooltip-DiXCgpik.cjs","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsLineChartLegend({\n  data,\n  series,\n  className,\n}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-wrap items-center gap-4 gap-y-1', className)}>\n      {series.map(s => {\n        const aggregated = s.aggregate?.(data);\n        return (\n          <div key={s.dataKey} className=\"inline-flex items-center gap-2\">\n            <div className=\"size-2 shrink-0 rounded-full\" style={{ backgroundColor: s.color }} />\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-24 truncate\">\n              {s.label}\n            </Txt>\n            {aggregated && (\n              <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n                {aggregated.value}\n                {aggregated.suffix && (\n                  <Txt as=\"span\" variant=\"caption\" tone=\"faint\">\n                    {' '}\n                    {aggregated.suffix}\n                  </Txt>\n                )}\n              </Txt>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","import { ChartTooltip } from '@/ds/components/ChartTooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n  formatValue = value => value.toLocaleString('en-US'),\n}: {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color: string }>;\n  label?: string;\n  suffix?: string;\n  formatValue?: (value: number) => string;\n}) {\n  if (!active || !payload?.length) return null;\n  return (\n    <ChartTooltip>\n      <Txt variant=\"column\" tone=\"ink\" className=\"mb-1\">\n        {label}\n      </Txt>\n      {payload.map(entry => (\n        <p key={entry.name} className=\"text-foreground\">\n          <span className=\"mr-2 inline-block size-2 rounded-full\" style={{ backgroundColor: entry.color }} />\n          {entry.name}:{' '}\n          <span className=\"font-mono\">\n            {typeof entry.value === 'number' ? formatValue(entry.value) : entry.value}\n            {suffix}\n          </span>\n        </p>\n      ))}\n    </ChartTooltip>\n  );\n}\n"],"names":["jsx","cn","jsxs","Txt","ChartTooltip"],"mappings":";;;;;;;AAIO,SAAS,sBAAA,CAAuB;AAAA,EACrC,IAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,uBACEA,cAAA,CAAC,SAAI,SAAA,EAAWC,WAAA,CAAG,6CAA6C,SAAS,CAAA,EACtE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,KAAK;AACf,IAAA,MAAM,UAAA,GAAa,CAAA,CAAE,SAAA,GAAY,IAAI,CAAA;AACrC,IAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAoB,SAAA,EAAU,gCAAA,EAC7B,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8BAAA,EAA+B,KAAA,EAAO,EAAE,eAAA,EAAiB,CAAA,CAAE,OAAM,EAAG,CAAA;AAAA,sBACnFA,cAAA,CAACG,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,mBAAA,EACrD,QAAA,EAAA,CAAA,CAAE,KAAA,EACL,CAAA;AAAA,MACC,UAAA,oCACEA,OAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,SAAA,EAAU,MAAK,OAAA,EACnC,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA;AAAA,QACX,UAAA,CAAW,0BACVD,eAAA,CAACC,OAAA,EAAA,EAAI,IAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EACnC,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UACA,UAAA,CAAW;AAAA,SAAA,EACd;AAAA,OAAA,EAEJ;AAAA,KAAA,EAAA,EAdM,EAAE,OAgBZ,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;ACpCO,SAAS,uBAAA,CAAwB;AAAA,EACtC,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA,GAAc,CAAA,KAAA,KAAS,KAAA,CAAM,cAAA,CAAe,OAAO;AACrD,CAAA,EAMG;AACD,EAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,EAAS,QAAQ,OAAO,IAAA;AACxC,EAAA,uCACGC,yBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAJ,cAAA,CAACG,WAAI,OAAA,EAAQ,QAAA,EAAS,MAAK,KAAA,EAAM,SAAA,EAAU,QACxC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,QAAQ,GAAA,CAAI,CAAA,KAAA,qBACXD,eAAA,CAAC,GAAA,EAAA,EAAmB,WAAU,iBAAA,EAC5B,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uCAAA,EAAwC,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,CAAM,OAAM,EAAG,CAAA;AAAA,MAChG,KAAA,CAAM,IAAA;AAAA,MAAK,GAAA;AAAA,MAAE,GAAA;AAAA,sBACdE,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAA,EACb,QAAA,EAAA;AAAA,QAAA,OAAO,MAAM,KAAA,KAAU,QAAA,GAAW,YAAY,KAAA,CAAM,KAAK,IAAI,KAAA,CAAM,KAAA;AAAA,QACnE;AAAA,OAAA,EACH;AAAA,KAAA,EAAA,EANM,KAAA,CAAM,IAOd,CACD;AAAA,GAAA,EACH,CAAA;AAEJ;;;;;"}

package/dist/metrics-line-chart-tooltip-mZXPH1yH.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+import { c as cn } from './cn-65Adrsfj.js';
+import { C as ChartTooltip } from './chart-tooltip-84fl_3Wc.js';
+
+function MetricsLineChartLegend({
+  data,
+  series,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-4 gap-y-1", className), children: series.map((s) => {
+    const aggregated = s.aggregate?.(data);
+    return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: s.color } }),
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-24 truncate", children: s.label }),
+      aggregated && /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "caption", tone: "muted", children: [
+        aggregated.value,
+        aggregated.suffix && /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "caption", tone: "faint", children: [
+          " ",
+          aggregated.suffix
+        ] })
+      ] })
+    ] }, s.dataKey);
+  }) });
+}
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix,
+  formatValue = (value) => value.toLocaleString("en-US")
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs(ChartTooltip, { children: [
+    /* @__PURE__ */ jsx(Txt, { variant: "column", tone: "ink", className: "mb-1", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "mr-2 inline-block size-2 rounded-full", style: { backgroundColor: entry.color } }),
+      entry.name,
+      ":",
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        typeof entry.value === "number" ? formatValue(entry.value) : entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+export { MetricsLineChartLegend as M, MetricsLineChartTooltip as a };
+//# sourceMappingURL=metrics-line-chart-tooltip-mZXPH1yH.js.map

package/dist/metrics-line-chart-tooltip-mZXPH1yH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-tooltip-mZXPH1yH.js","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-legend.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx"],"sourcesContent":["import type { MetricsLineChartSeries } from './metrics-line-chart';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsLineChartLegend({\n  data,\n  series,\n  className,\n}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  className?: string;\n}) {\n  return (\n    <div className={cn('flex flex-wrap items-center gap-4 gap-y-1', className)}>\n      {series.map(s => {\n        const aggregated = s.aggregate?.(data);\n        return (\n          <div key={s.dataKey} className=\"inline-flex items-center gap-2\">\n            <div className=\"size-2 shrink-0 rounded-full\" style={{ backgroundColor: s.color }} />\n            <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-24 truncate\">\n              {s.label}\n            </Txt>\n            {aggregated && (\n              <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n                {aggregated.value}\n                {aggregated.suffix && (\n                  <Txt as=\"span\" variant=\"caption\" tone=\"faint\">\n                    {' '}\n                    {aggregated.suffix}\n                  </Txt>\n                )}\n              </Txt>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","import { ChartTooltip } from '@/ds/components/ChartTooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n  formatValue = value => value.toLocaleString('en-US'),\n}: {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color: string }>;\n  label?: string;\n  suffix?: string;\n  formatValue?: (value: number) => string;\n}) {\n  if (!active || !payload?.length) return null;\n  return (\n    <ChartTooltip>\n      <Txt variant=\"column\" tone=\"ink\" className=\"mb-1\">\n        {label}\n      </Txt>\n      {payload.map(entry => (\n        <p key={entry.name} className=\"text-foreground\">\n          <span className=\"mr-2 inline-block size-2 rounded-full\" style={{ backgroundColor: entry.color }} />\n          {entry.name}:{' '}\n          <span className=\"font-mono\">\n            {typeof entry.value === 'number' ? formatValue(entry.value) : entry.value}\n            {suffix}\n          </span>\n        </p>\n      ))}\n    </ChartTooltip>\n  );\n}\n"],"names":[],"mappings":";;;;;AAIO,SAAS,sBAAA,CAAuB;AAAA,EACrC,IAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,6CAA6C,SAAS,CAAA,EACtE,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,KAAK;AACf,IAAA,MAAM,UAAA,GAAa,CAAA,CAAE,SAAA,GAAY,IAAI,CAAA;AACrC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAoB,SAAA,EAAU,gCAAA,EAC7B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8BAAA,EAA+B,KAAA,EAAO,EAAE,eAAA,EAAiB,CAAA,CAAE,OAAM,EAAG,CAAA;AAAA,sBACnF,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,mBAAA,EACrD,QAAA,EAAA,CAAA,CAAE,KAAA,EACL,CAAA;AAAA,MACC,UAAA,yBACE,GAAA,EAAA,EAAI,EAAA,EAAG,QAAO,OAAA,EAAQ,SAAA,EAAU,MAAK,OAAA,EACnC,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA;AAAA,QACX,UAAA,CAAW,0BACV,IAAA,CAAC,GAAA,EAAA,EAAI,IAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EACnC,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UACA,UAAA,CAAW;AAAA,SAAA,EACd;AAAA,OAAA,EAEJ;AAAA,KAAA,EAAA,EAdM,EAAE,OAgBZ,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;ACpCO,SAAS,uBAAA,CAAwB;AAAA,EACtC,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA,GAAc,CAAA,KAAA,KAAS,KAAA,CAAM,cAAA,CAAe,OAAO;AACrD,CAAA,EAMG;AACD,EAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,EAAS,QAAQ,OAAO,IAAA;AACxC,EAAA,4BACG,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAI,OAAA,EAAQ,QAAA,EAAS,MAAK,KAAA,EAAM,SAAA,EAAU,QACxC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,QAAQ,GAAA,CAAI,CAAA,KAAA,qBACX,IAAA,CAAC,GAAA,EAAA,EAAmB,WAAU,iBAAA,EAC5B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uCAAA,EAAwC,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,CAAM,OAAM,EAAG,CAAA;AAAA,MAChG,KAAA,CAAM,IAAA;AAAA,MAAK,GAAA;AAAA,MAAE,GAAA;AAAA,sBACd,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAA,EACb,QAAA,EAAA;AAAA,QAAA,OAAO,MAAM,KAAA,KAAU,QAAA,GAAW,YAAY,KAAA,CAAM,KAAK,IAAI,KAAA,CAAM,KAAA;AAAA,QACnE;AAAA,OAAA,EACH;AAAA,KAAA,EAAA,EANM,KAAA,CAAM,IAOd,CACD;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}