@mastra/playground-ui 33.0.0-alpha.2 → 33.0.0-alpha.4

package/dist/metrics-card-hs1pqY2Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-card-hs1pqY2Y.cjs","sources":["../src/ds/components/MetricsCard/metrics-card-actions.tsx","../src/ds/components/MetricsCard/metrics-card-content.tsx","../src/ds/components/MetricsCard/metrics-card-description.tsx","../src/ds/components/MetricsCard/metrics-card-error.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-summary.tsx","../src/ds/components/MetricsCard/metrics-card-title.tsx","../src/ds/components/MetricsCard/metrics-card-title-and-description.tsx","../src/ds/components/MetricsCard/metrics-card-top-bar.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 alongside `TitleAndDescription` + `Summary`. */\nexport function MetricsCardActions({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex items-center gap-1 shrink-0', className)}>{children}</div>;\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardContent({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('overflow-x-auto ', className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardDescription({ children, className }: { children: string; className?: string }) {\n  return <p className={cn('text-ui-md text-neutral2 leading-tight mt-0.5', className)}>{children}</p>;\n}\n","import { 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 gap-3 items-center justify-center', className)}>\n      <p className=\"text-ui-sm text-accent2\">{message}</p>\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-neutral1\" />\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return (\n    <div className={cn('flex items-center justify-center h-full', className)}>\n      <p className=\"text-neutral1 text-sm\">{message}</p>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard\n      className={cn(\n        'flex-1 grid grid-rows-[4rem_1fr] min-h-72 gap-2 min-w-80 md:min-w-[22rem] lg:min-w-[24rem] xl:min-w-[26rem] 2xl:min-w-[30rem]',\n        className,\n      )}\n    >\n      {children}\n    </DashboardCard>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardSummary({ value, label, className }: { value: string; label?: string; className?: string }) {\n  return (\n    <div className={cn('grid justify-end content-start text-right gap-1', className)}>\n      <span className=\"text-ui-lg font-semibold text-neutral4 leading-none\">{value}</span>\n      {label && <span className=\"text-ui-md text-neutral2\">{label}</span>}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsCardTitle({\n  children,\n  className,\n  as: Tag = 'h2',\n}: {\n  children: string;\n  className?: string;\n  as?: 'h2' | 'h3' | 'h4';\n}) {\n  return <Tag className={cn('text-ui-md font-normal text-neutral4', className)}>{children}</Tag>;\n}\n","import type { ReactNode } from 'react';\n\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardTitle } from './metrics-card-title';\n\ntype PropsWithTitleDescription = {\n  title: string;\n  description?: string;\n  titleAs?: 'h2' | 'h3' | 'h4';\n  children?: never;\n  className?: string;\n};\n\ntype PropsWithChildren = {\n  title?: never;\n  description?: never;\n  children: ReactNode;\n  className?: string;\n};\n\nexport function MetricsCardTitleAndDescription(props: PropsWithTitleDescription | PropsWithChildren) {\n  if ('children' in props) {\n    return <div className={props.className}>{props.children}</div>;\n  }\n\n  const { title, description, titleAs } = props;\n\n  return (\n    <div className={props.className}>\n      <MetricsCardTitle as={titleAs}>{title}</MetricsCardTitle>\n      {description && <MetricsCardDescription>{description}</MetricsCardDescription>}\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]:flex-1 [&>:first-child]:min-w-0', className)}>\n      {children}\n    </div>\n  );\n}\n","import { MetricsCardActions } from './metrics-card-actions';\nimport { MetricsCardContent } from './metrics-card-content';\nimport { MetricsCardDescription } from './metrics-card-description';\nimport { MetricsCardError } from './metrics-card-error';\nimport { MetricsCardLoading } from './metrics-card-loading';\nimport { MetricsCardNoData } from './metrics-card-no-data';\nimport { MetricsCardRoot } from './metrics-card-root';\nimport { MetricsCardSummary } from './metrics-card-summary';\nimport { MetricsCardTitle } from './metrics-card-title';\nimport { MetricsCardTitleAndDescription } from './metrics-card-title-and-description';\nimport { MetricsCardTopBar } from './metrics-card-top-bar';\nimport { MetricsKpiCard } from '@/ds/components/MetricsKpiCard';\n\nexport const MetricsCard = Object.assign(MetricsCardRoot, {\n  Root: MetricsCardRoot,\n  Kpi: MetricsKpiCard,\n  TopBar: MetricsCardTopBar,\n  Actions: MetricsCardActions,\n  TitleAndDescription: MetricsCardTitleAndDescription,\n  Title: MetricsCardTitle,\n  Description: MetricsCardDescription,\n  Summary: MetricsCardSummary,\n  Loading: MetricsCardLoading,\n  Error: MetricsCardError,\n  Content: MetricsCardContent,\n  NoData: MetricsCardNoData,\n});\n"],"names":["cn","jsx","Spinner","DashboardCard","jsxs","MetricsKpiCard"],"mappings":"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"}

package/dist/metrics-data-table-BpEAlJi0.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const scrollArea = require('./scroll-area-KogxLVrV.cjs');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function MetricsDataTable({
+  columns,
+  data,
+  className,
+  getRowHref,
+  LinkComponent = "a"
+}) {
+  const [hoveredRow, setHoveredRow] = React.useState(null);
+  if (columns.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: utils.cn("w-full h-full", className), maxHeight: "20rem", orientation: "both", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "grid items-center",
+      style: {
+        gridTemplateColumns: `auto ${columns.slice(1).map(() => "auto").join(" ")}`
+      },
+      children: [
+        columns.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils.cn(
+              "h-9 py-1 flex items-center border-b border-surface5 uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs sticky top-0 z-10 bg-surface3",
+              i === 0 ? "text-left sticky left-0 z-20 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : "px-4 text-right"
+            ),
+            children: col.label
+          },
+          `${i}-${col.label}`
+        )),
+        data.map((row, rowIndex) => {
+          const href = getRowHref?.(row);
+          const isHovered = hoveredRow === row.key;
+          const rowHandlers = href ? {
+            onMouseEnter: () => setHoveredRow(row.key),
+            onMouseLeave: () => setHoveredRow((prev) => prev === row.key ? null : prev)
+          } : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: columns.map((col, i) => {
+            const cellClasses = utils.cn(
+              "h-10 flex items-center text-ui-sm whitespace-nowrap border-t border-surface5",
+              rowIndex === 0 && "border-t-transparent",
+              i === 0 ? "text-left text-neutral3 sticky left-0 z-10 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : utils.cn(
+                "px-4 text-right tabular-nums",
+                col.highlight ? "text-neutral4 font-semibold" : "text-neutral3"
+              ),
+              href && "cursor-pointer outline-none transition-colors",
+              href && isHovered && "bg-surface3"
+            );
+            if (href) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                LinkComponent,
+                {
+                  href,
+                  className: cellClasses,
+                  onFocus: () => setHoveredRow(row.key),
+                  onBlur: () => setHoveredRow((prev) => prev === row.key ? null : prev),
+                  ...rowHandlers,
+                  children: col.value(row)
+                },
+                `${row.key}-${i}`
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cellClasses, children: col.value(row) }, `${row.key}-${i}`);
+          }) }, row.key);
+        })
+      ]
+    }
+  ) });
+}
+
+exports.MetricsDataTable = MetricsDataTable;
+//# sourceMappingURL=metrics-data-table-BpEAlJi0.cjs.map

package/dist/metrics-data-table-BpEAlJi0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-data-table-BpEAlJi0.cjs","sources":["../src/ds/components/MetricsDataTable/metrics-data-table.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport type { ElementType } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { cn } from '@/lib/utils';\n\ntype Column<T> = {\n  label: string;\n  value: (row: T) => string | number;\n  highlight?: boolean;\n};\n\nexport function MetricsDataTable<T extends { key: string }>({\n  columns,\n  data,\n  className,\n  getRowHref,\n  LinkComponent = 'a',\n}: {\n  columns: Column<T>[];\n  data: T[];\n  className?: string;\n  /** If provided and returns a non-null string, the row is rendered as a link to that URL. */\n  getRowHref?: (row: T) => string | undefined;\n  /** Override how `getRowHref` links are rendered. Receives `href`, `className`,\n   *  `onFocus`, `onBlur`, `onMouseEnter`, `onMouseLeave`, and `children`.\n   *  Defaults to a plain `<a>`; pass an adapter (e.g. for react-router or\n   *  next/link) to keep navigation in-app. */\n  LinkComponent?: ElementType;\n}) {\n  const [hoveredRow, setHoveredRow] = useState<string | null>(null);\n\n  if (columns.length === 0) return null;\n\n  return (\n    <ScrollArea className={cn('w-full h-full', className)} maxHeight=\"20rem\" orientation=\"both\">\n      <div\n        className=\"grid items-center\"\n        style={{\n          gridTemplateColumns: `auto ${columns\n            .slice(1)\n            .map(() => 'auto')\n            .join(' ')}`,\n        }}\n      >\n        {/* Header */}\n        {columns.map((col, i) => (\n          <span\n            key={`${i}-${col.label}`}\n            className={cn(\n              'h-9 py-1 flex items-center border-b border-surface5 uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs sticky top-0 z-10 bg-surface3',\n              i === 0\n                ? 'text-left sticky left-0 z-20 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5'\n                : 'px-4 text-right',\n            )}\n          >\n            {col.label}\n          </span>\n        ))}\n\n        {/* Data rows */}\n        {data.map((row, rowIndex) => {\n          const href = getRowHref?.(row);\n          const isHovered = hoveredRow === row.key;\n          const rowHandlers = href\n            ? {\n                onMouseEnter: () => setHoveredRow(row.key),\n                onMouseLeave: () => setHoveredRow(prev => (prev === row.key ? null : prev)),\n              }\n            : undefined;\n          return (\n            <Fragment key={row.key}>\n              {columns.map((col, i) => {\n                const cellClasses = cn(\n                  'h-10 flex items-center text-ui-sm whitespace-nowrap border-t border-surface5',\n                  rowIndex === 0 && 'border-t-transparent',\n                  i === 0\n                    ? 'text-left text-neutral3 sticky left-0 z-10 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5'\n                    : cn(\n                        'px-4 text-right tabular-nums',\n                        col.highlight ? 'text-neutral4 font-semibold' : 'text-neutral3',\n                      ),\n                  href && 'cursor-pointer outline-none transition-colors',\n                  href && isHovered && 'bg-surface3',\n                );\n\n                if (href) {\n                  return (\n                    <LinkComponent\n                      key={`${row.key}-${i}`}\n                      href={href}\n                      className={cellClasses}\n                      onFocus={() => setHoveredRow(row.key)}\n                      onBlur={() => setHoveredRow(prev => (prev === row.key ? null : prev))}\n                      {...rowHandlers}\n                    >\n                      {col.value(row)}\n                    </LinkComponent>\n                  );\n                }\n                return (\n                  <span key={`${row.key}-${i}`} className={cellClasses}>\n                    {col.value(row)}\n                  </span>\n                );\n              })}\n            </Fragment>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n"],"names":["useState","jsx","ScrollArea","cn","jsxs","Fragment"],"mappings":"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"}

package/dist/metrics-data-table-Dds2TkvE.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, Fragment } from 'react';
+import { S as ScrollArea } from './scroll-area-BCZiAvhR.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function MetricsDataTable({
+  columns,
+  data,
+  className,
+  getRowHref,
+  LinkComponent = "a"
+}) {
+  const [hoveredRow, setHoveredRow] = useState(null);
+  if (columns.length === 0) return null;
+  return /* @__PURE__ */ jsx(ScrollArea, { className: cn("w-full h-full", className), maxHeight: "20rem", orientation: "both", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "grid items-center",
+      style: {
+        gridTemplateColumns: `auto ${columns.slice(1).map(() => "auto").join(" ")}`
+      },
+      children: [
+        columns.map((col, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-9 py-1 flex items-center border-b border-surface5 uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs sticky top-0 z-10 bg-surface3",
+              i === 0 ? "text-left sticky left-0 z-20 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : "px-4 text-right"
+            ),
+            children: col.label
+          },
+          `${i}-${col.label}`
+        )),
+        data.map((row, rowIndex) => {
+          const href = getRowHref?.(row);
+          const isHovered = hoveredRow === row.key;
+          const rowHandlers = href ? {
+            onMouseEnter: () => setHoveredRow(row.key),
+            onMouseLeave: () => setHoveredRow((prev) => prev === row.key ? null : prev)
+          } : void 0;
+          return /* @__PURE__ */ jsx(Fragment, { children: columns.map((col, i) => {
+            const cellClasses = cn(
+              "h-10 flex items-center text-ui-sm whitespace-nowrap border-t border-surface5",
+              rowIndex === 0 && "border-t-transparent",
+              i === 0 ? "text-left text-neutral3 sticky left-0 z-10 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5" : cn(
+                "px-4 text-right tabular-nums",
+                col.highlight ? "text-neutral4 font-semibold" : "text-neutral3"
+              ),
+              href && "cursor-pointer outline-none transition-colors",
+              href && isHovered && "bg-surface3"
+            );
+            if (href) {
+              return /* @__PURE__ */ jsx(
+                LinkComponent,
+                {
+                  href,
+                  className: cellClasses,
+                  onFocus: () => setHoveredRow(row.key),
+                  onBlur: () => setHoveredRow((prev) => prev === row.key ? null : prev),
+                  ...rowHandlers,
+                  children: col.value(row)
+                },
+                `${row.key}-${i}`
+              );
+            }
+            return /* @__PURE__ */ jsx("span", { className: cellClasses, children: col.value(row) }, `${row.key}-${i}`);
+          }) }, row.key);
+        })
+      ]
+    }
+  ) });
+}
+
+export { MetricsDataTable as M };
+//# sourceMappingURL=metrics-data-table-Dds2TkvE.js.map

package/dist/metrics-data-table-Dds2TkvE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-data-table-Dds2TkvE.js","sources":["../src/ds/components/MetricsDataTable/metrics-data-table.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport type { ElementType } from 'react';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { cn } from '@/lib/utils';\n\ntype Column<T> = {\n  label: string;\n  value: (row: T) => string | number;\n  highlight?: boolean;\n};\n\nexport function MetricsDataTable<T extends { key: string }>({\n  columns,\n  data,\n  className,\n  getRowHref,\n  LinkComponent = 'a',\n}: {\n  columns: Column<T>[];\n  data: T[];\n  className?: string;\n  /** If provided and returns a non-null string, the row is rendered as a link to that URL. */\n  getRowHref?: (row: T) => string | undefined;\n  /** Override how `getRowHref` links are rendered. Receives `href`, `className`,\n   *  `onFocus`, `onBlur`, `onMouseEnter`, `onMouseLeave`, and `children`.\n   *  Defaults to a plain `<a>`; pass an adapter (e.g. for react-router or\n   *  next/link) to keep navigation in-app. */\n  LinkComponent?: ElementType;\n}) {\n  const [hoveredRow, setHoveredRow] = useState<string | null>(null);\n\n  if (columns.length === 0) return null;\n\n  return (\n    <ScrollArea className={cn('w-full h-full', className)} maxHeight=\"20rem\" orientation=\"both\">\n      <div\n        className=\"grid items-center\"\n        style={{\n          gridTemplateColumns: `auto ${columns\n            .slice(1)\n            .map(() => 'auto')\n            .join(' ')}`,\n        }}\n      >\n        {/* Header */}\n        {columns.map((col, i) => (\n          <span\n            key={`${i}-${col.label}`}\n            className={cn(\n              'h-9 py-1 flex items-center border-b border-surface5 uppercase whitespace-nowrap text-neutral2 tracking-widest text-ui-xs sticky top-0 z-10 bg-surface3',\n              i === 0\n                ? 'text-left sticky left-0 z-20 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5'\n                : 'px-4 text-right',\n            )}\n          >\n            {col.label}\n          </span>\n        ))}\n\n        {/* Data rows */}\n        {data.map((row, rowIndex) => {\n          const href = getRowHref?.(row);\n          const isHovered = hoveredRow === row.key;\n          const rowHandlers = href\n            ? {\n                onMouseEnter: () => setHoveredRow(row.key),\n                onMouseLeave: () => setHoveredRow(prev => (prev === row.key ? null : prev)),\n              }\n            : undefined;\n          return (\n            <Fragment key={row.key}>\n              {columns.map((col, i) => {\n                const cellClasses = cn(\n                  'h-10 flex items-center text-ui-sm whitespace-nowrap border-t border-surface5',\n                  rowIndex === 0 && 'border-t-transparent',\n                  i === 0\n                    ? 'text-left text-neutral3 sticky left-0 z-10 bg-surface3 pr-4 after:absolute after:right-1 after:top-1/2 after:-translate-y-1/2 after:h-3/5 after:w-px after:bg-surface5'\n                    : cn(\n                        'px-4 text-right tabular-nums',\n                        col.highlight ? 'text-neutral4 font-semibold' : 'text-neutral3',\n                      ),\n                  href && 'cursor-pointer outline-none transition-colors',\n                  href && isHovered && 'bg-surface3',\n                );\n\n                if (href) {\n                  return (\n                    <LinkComponent\n                      key={`${row.key}-${i}`}\n                      href={href}\n                      className={cellClasses}\n                      onFocus={() => setHoveredRow(row.key)}\n                      onBlur={() => setHoveredRow(prev => (prev === row.key ? null : prev))}\n                      {...rowHandlers}\n                    >\n                      {col.value(row)}\n                    </LinkComponent>\n                  );\n                }\n                return (\n                  <span key={`${row.key}-${i}`} className={cellClasses}>\n                    {col.value(row)}\n                  </span>\n                );\n              })}\n            </Fragment>\n          );\n        })}\n      </div>\n    </ScrollArea>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/metrics-flex-grid-BqtZ5emh.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+function MetricsFlexGrid({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-8", className), children });
+}
+
+export { MetricsFlexGrid as M };
+//# sourceMappingURL=metrics-flex-grid-BqtZ5emh.js.map

package/dist/metrics-flex-grid-BqtZ5emh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-flex-grid-BqtZ5emh.js","sources":["../src/ds/components/MetricsFlexGrid/metrics-flex-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsFlexGrid({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap gap-8', className)}>{children}</div>;\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AACpG,EAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,sBAAA,EAAwB,SAAS,GAAI,QAAA,EAAS,CAAA;AAC1E;;;;"}

package/dist/metrics-flex-grid-DzlyAgr7.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('./utils-vA5sWo9W.cjs');
+
+function MetricsFlexGrid({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex flex-wrap gap-8", className), children });
+}
+
+exports.MetricsFlexGrid = MetricsFlexGrid;
+//# sourceMappingURL=metrics-flex-grid-DzlyAgr7.cjs.map

package/dist/metrics-flex-grid-DzlyAgr7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-flex-grid-DzlyAgr7.cjs","sources":["../src/ds/components/MetricsFlexGrid/metrics-flex-grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsFlexGrid({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('flex flex-wrap gap-8', className)}>{children}</div>;\n}\n"],"names":["cn"],"mappings":";;;;;AAGO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AACpG,EAAA,sCAAQ,KAAA,EAAA,EAAI,SAAA,EAAWA,SAAG,sBAAA,EAAwB,SAAS,GAAI,QAAA,EAAS,CAAA;AAC1E;;;;"}

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

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';
+import { c as cn } from './utils-CzYGxqbG.js';
+import { S as Spinner } from './spinner-DuizqJj9.js';
+import { D as DashboardCard } from './dashboard-card-C7nmBU5A.js';
+
+function MetricsKpiCardChange({
+  changePct,
+  prevValue,
+  lowerIsBetter,
+  className
+}) {
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-sm text-neutral1 flex-wrap", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("[&>svg]:w-4 [&>svg]:h-4", isGood ? "text-green-600" : "text-red-600"), children: changePct >= 0 ? /* @__PURE__ */ jsx(TrendingUpIcon, {}) : /* @__PURE__ */ jsx(TrendingDownIcon, {}) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(isGood ? "text-green-600" : "text-red-600"),
+          children: `${changePct >= 0 ? "+" : "-"}${Math.abs(changePct).toFixed(1)}%`
+        }
+      )
+    ] }),
+    prevValue && /* @__PURE__ */ jsxs("div", { children: [
+      "vs previous ",
+      /* @__PURE__ */ jsx("b", { className: "text-neutral2 font-semibold", children: prevValue })
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ui-sm text-accent2", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-ui-md text-neutral3 leading-relaxed", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm", className), children: /* @__PURE__ */ jsx(Spinner, { size: "md", variant: "pulse", className: "text-neutral1" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsx(DashboardCard, { className: cn("flex-1 min-w-72", className), children: /* @__PURE__ */ jsx("div", { className: "grid gap-1", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsx("strong", { className: cn("text-header-lg text-neutral4 font-semibold", className), children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Label: MetricsKpiCardLabel,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading
+});
+
+export { MetricsKpiCard as M };
+//# sourceMappingURL=metrics-kpi-card-CNUpkoQO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-CNUpkoQO.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.tsx"],"sourcesContent":["import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\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\n  return (\n    <div className={cn('flex items-center gap-1 text-sm text-neutral1 flex-wrap', className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className={cn('[&>svg]:w-4 [&>svg]:h-4', isGood ? 'text-green-600' : 'text-red-600')}>\n          {changePct >= 0 ? <TrendingUpIcon /> : <TrendingDownIcon />}\n        </span>\n        <span\n          className={cn(isGood ? 'text-green-600' : 'text-red-600')}\n        >{`${changePct >= 0 ? '+' : '-'}${Math.abs(changePct).toFixed(1)}%`}</span>\n      </div>\n      {prevValue && (\n        <div>\n          vs previous <b className=\"text-neutral2 font-semibold\">{prevValue}</b>\n        </div>\n      )}\n    </div>\n  );\n}\n","import { 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 <span className={cn('text-ui-sm text-accent2', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral3 leading-relaxed', className)}>{children}</span>;\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <span className={cn('text-sm', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-neutral1\" />\n    </span>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard className={cn('flex-1 min-w-72', className)}>\n      <div className=\"grid gap-1\">{children}</div>\n    </DashboardCard>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: string; className?: string }) {\n  return <strong className={cn('text-header-lg text-neutral4 font-semibold', className)}>{children}</strong>;\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';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Label: MetricsKpiCardLabel,\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-kpi-card-D_SaIWBc.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const utils = require('./utils-vA5sWo9W.cjs');
+const spinner = require('./spinner-PSUHmhye.cjs');
+const dashboardCard = require('./dashboard-card-B9enj4NG.cjs');
+
+function MetricsKpiCardChange({
+  changePct,
+  prevValue,
+  lowerIsBetter,
+  className
+}) {
+  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-1 text-sm text-neutral1 flex-wrap", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("[&>svg]:w-4 [&>svg]:h-4", isGood ? "text-green-600" : "text-red-600"), children: changePct >= 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDownIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: utils.cn(isGood ? "text-green-600" : "text-red-600"),
+          children: `${changePct >= 0 ? "+" : "-"}${Math.abs(changePct).toFixed(1)}%`
+        }
+      )
+    ] }),
+    prevValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "vs previous ",
+      /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-neutral2 font-semibold", children: prevValue })
+    ] })
+  ] });
+}
+
+function MetricsKpiCardError({
+  message = "Failed to load data",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-ui-sm text-accent2", className), children: message });
+}
+
+function MetricsKpiCardLabel({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-ui-md text-neutral3 leading-relaxed", className), children });
+}
+
+function MetricsKpiCardLoading({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "md", variant: "pulse", className: "text-neutral1" }) });
+}
+
+function MetricsKpiCardNoChange({
+  message = "No previous value to compare",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardNoData({ message = "No data yet", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-sm text-neutral1", className), children: message });
+}
+
+function MetricsKpiCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(dashboardCard.DashboardCard, { className: utils.cn("flex-1 min-w-72", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children }) });
+}
+
+function MetricsKpiCardValue({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("strong", { className: utils.cn("text-header-lg text-neutral4 font-semibold", className), children });
+}
+
+const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {
+  Label: MetricsKpiCardLabel,
+  Value: MetricsKpiCardValue,
+  Change: MetricsKpiCardChange,
+  NoChange: MetricsKpiCardNoChange,
+  NoData: MetricsKpiCardNoData,
+  Error: MetricsKpiCardError,
+  Loading: MetricsKpiCardLoading
+});
+
+exports.MetricsKpiCard = MetricsKpiCard;
+//# sourceMappingURL=metrics-kpi-card-D_SaIWBc.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-D_SaIWBc.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.tsx"],"sourcesContent":["import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\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\n  return (\n    <div className={cn('flex items-center gap-1 text-sm text-neutral1 flex-wrap', className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className={cn('[&>svg]:w-4 [&>svg]:h-4', isGood ? 'text-green-600' : 'text-red-600')}>\n          {changePct >= 0 ? <TrendingUpIcon /> : <TrendingDownIcon />}\n        </span>\n        <span\n          className={cn(isGood ? 'text-green-600' : 'text-red-600')}\n        >{`${changePct >= 0 ? '+' : '-'}${Math.abs(changePct).toFixed(1)}%`}</span>\n      </div>\n      {prevValue && (\n        <div>\n          vs previous <b className=\"text-neutral2 font-semibold\">{prevValue}</b>\n        </div>\n      )}\n    </div>\n  );\n}\n","import { 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 <span className={cn('text-ui-sm text-accent2', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return <span className={cn('text-ui-md text-neutral3 leading-relaxed', className)}>{children}</span>;\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <span className={cn('text-sm', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-neutral1\" />\n    </span>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return <span className={cn('text-sm text-neutral1', className)}>{message}</span>;\n}\n","import type { ReactNode } from 'react';\nimport { DashboardCard } from '@/ds/components/DashboardCard';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <DashboardCard className={cn('flex-1 min-w-72', className)}>\n      <div className=\"grid gap-1\">{children}</div>\n    </DashboardCard>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: string; className?: string }) {\n  return <strong className={cn('text-header-lg text-neutral4 font-semibold', className)}>{children}</strong>;\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';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Label: MetricsKpiCardLabel,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":["cn","jsxs","jsx","TrendingUpIcon","TrendingDownIcon","Spinner","DashboardCard"],"mappings":"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"}

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

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line } from 'recharts';
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg", children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium text-icon6", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxs("p", { className: "text-icon2", 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: [
+        entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+const LABEL_COLOR = "#a1a1aa";
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick
+}) {
+  const isClickable = typeof onPointClick === "function";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4 ", children: series.map((s) => {
+      const aggregated = s.aggregate?.(data);
+      return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 rounded-full -translate-y-px", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3 truncate max-w-24", children: s.label }),
+        aggregated && /* @__PURE__ */ jsxs("span", { className: "text-ui-sm text-neutral4", children: [
+          aggregated.value,
+          aggregated.suffix && /* @__PURE__ */ jsxs("span", { className: "text-ui-sm text-neutral2", children: [
+            " ",
+            aggregated.suffix
+          ] })
+        ] })
+      ] }, s.dataKey);
+    }) }),
+    /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, children: [
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: 5
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fontSize: 10, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: 30,
+          domain: yDomain
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {}) }),
+      series.map((s) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "linear",
+          dataKey: s.dataKey,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: false,
+          activeDot: isClickable ? {
+            r: 4,
+            style: { cursor: "pointer" },
+            onClick: (_, payload) => {
+              const datum = payload?.payload;
+              if (datum) onPointClick(datum, s.dataKey);
+            }
+          } : void 0,
+          name: s.label
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+}
+
+export { MetricsLineChart as M, MetricsLineChartTooltip as a };
+//# sourceMappingURL=metrics-line-chart-BUUqDQPW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-BUUqDQPW.js","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["export function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n}: {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color: string }>;\n  label?: string;\n  suffix?: string;\n}) {\n  if (!active || !payload?.length) return null;\n  return (\n    <div className=\"rounded-md border border-border1 bg-surface2 px-3 py-2 text-xs shadow-lg\">\n      <p className=\"mb-1 font-medium text-icon6\">{label}</p>\n      {payload.map(entry => (\n        <p key={entry.name} className=\"text-icon2\">\n          <span className=\"mr-2 inline-block size-2 rounded-full\" style={{ backgroundColor: entry.color }} />\n          {entry.name}:{' '}\n          <span className=\"font-mono\">\n            {entry.value}\n            {suffix}\n          </span>\n        </p>\n      ))}\n    </div>\n  );\n}\n","import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\n\nconst LABEL_COLOR = '#a1a1aa';\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\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}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  height?: number;\n  yDomain?: [number, number];\n  onPointClick?: MetricsLineChartPointClickHandler;\n}) {\n  const isClickable = typeof onPointClick === 'function';\n\n  return (\n    <div>\n      <div className=\"flex flex-wrap w-full items-end gap-4 gap-y-1 mb-4 \">\n        {series.map(s => {\n          const aggregated = s.aggregate?.(data);\n          return (\n            <div key={s.dataKey} className=\"inline-flex items-baseline gap-2\">\n              <div className=\"size-2 shrink-0 rounded-full -translate-y-px\" style={{ backgroundColor: s.color }} />\n              <span className=\"text-ui-sm text-neutral3 truncate max-w-24\">{s.label}</span>\n              {aggregated && (\n                <span className=\"text-ui-sm text-neutral4\">\n                  {aggregated.value}\n                  {aggregated.suffix && <span className=\"text-ui-sm text-neutral2\"> {aggregated.suffix}</span>}\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart data={data}>\n            <CartesianGrid\n              stroke=\"currentColor\"\n              strokeOpacity={0.08}\n              vertical={false}\n              className=\"text-black dark:text-white\"\n            />\n            <XAxis\n              dataKey=\"time\"\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              interval={5}\n            />\n            <YAxis\n              tick={{ fontSize: 10, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={30}\n              domain={yDomain}\n            />\n            <Tooltip content={<MetricsLineChartTooltip />} />\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={false}\n                activeDot={\n                  isClickable\n                    ? {\n                        r: 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                    : undefined\n                }\n                name={s.label}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}