@mastra/playground-ui 64.0.0-alpha.9 → 64.0.1-alpha.0

package/dist/components/DataList.cjs.js

@@ -2,24 +2,26 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dataList = require('../data-list-ecHsw-zr.cjs');
-const dataListSkeleton = require('../data-list-skeleton-DGMTqeNP.cjs');
+const dataList = require('../data-list-DUfXIhyC.cjs');
+const dataListSkeleton = require('../data-list-skeleton-BqC9Gggi.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const dataListSpacer = require('../data-list-spacer-tQaBaum4.cjs');
+const dataListTop = require('../data-list-top-ByT2Mo77.cjs');
 const Txt = require('../Txt-CIS2G5Jx.cjs');
 const utils_dateFormat = require('../utils/date-format.cjs.js');
-const tracesDataList = require('../traces-data-list-CHREkLv0.cjs');
+const tracesDataList = require('../traces-data-list-BgjeB-BF.cjs');
 const useDataListKeyboard = require('../use-data-list-keyboard-DF3tLe10.cjs');
 const layout_tabbedContainer = require('../layout/tabbed-container.cjs.js');
 
 function ScoresDataListDateCell({ timestamp }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dataList.DataListCell, { className: "text-muted-foreground", children: utils_dateFormat.formatDate(timestamp, "date") ?? "-" });
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListCell, { className: "text-muted-foreground", children: utils_dateFormat.formatDate(timestamp, "date") ?? "-" });
 }
 function ScoresDataListTimeCell({ timestamp }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dataList.DataListCell, { className: "text-body-sm text-muted-foreground", children: utils_dateFormat.formatDate(timestamp, "time") ?? "-" });
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListCell, { className: "text-body-sm text-muted-foreground", children: utils_dateFormat.formatDate(timestamp, "time") ?? "-" });
 }
 function ScoresDataListInputCell({ input }) {
   const display = input != null ? JSON.stringify(input) : "-";
-  return /* @__PURE__ */ jsxRuntime.jsx(dataList.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
     Txt.Txt,
     {
       as: "span",
@@ -34,11 +36,11 @@ function ScoresDataListInputCell({ input }) {
 }
 function ScoresDataListEntityCell({ entityId }) {
   const display = entityId || "-";
-  return /* @__PURE__ */ jsxRuntime.jsx(dataList.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", className: "block max-w-full min-w-0 truncate", title: display, children: display }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "body-sm", className: "block max-w-full min-w-0 truncate", title: display, children: display }) });
 }
 function ScoresDataListScoreCell({ score }) {
   const display = score == null ? "-" : typeof score === "object" ? JSON.stringify(score) : String(score);
-  return /* @__PURE__ */ jsxRuntime.jsx(dataList.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
     Txt.Txt,
     {
       as: "span",
@@ -53,15 +55,15 @@ function ScoresDataListScoreCell({ score }) {
 }
 
 function ScoresDataListRoot(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dataList.DataListRoot, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dataListTop.DataListRoot, { ...props });
 }
 const ScoresDataList = Object.assign(ScoresDataListRoot, {
-  Top: dataList.DataListTop,
-  TopCell: dataList.DataListTopCell,
-  SortableTopCell: dataList.DataListSortableTopCell,
-  RowButton: dataList.DataListRowButton,
-  NoMatch: dataList.DataListNoMatch,
-  NextPageLoading: dataList.DataListNextPageLoading,
+  Top: dataListTop.DataListTop,
+  TopCell: dataListTop.DataListTopCell,
+  SortableTopCell: dataListSpacer.DataListSortableTopCell,
+  RowButton: dataListSpacer.DataListRowButton,
+  NoMatch: dataListSpacer.DataListNoMatch,
+  NextPageLoading: dataListSpacer.DataListNextPageLoading,
   DateCell: ScoresDataListDateCell,
   TimeCell: ScoresDataListTimeCell,
   InputCell: ScoresDataListInputCell,

package/dist/components/DataList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.cjs.js","sources":["../../src/ds/components/DataList/ScoresDataList/scores-data-list-cells.tsx","../../src/ds/components/DataList/ScoresDataList/scores-data-list.tsx"],"sourcesContent":["import { DataListCell } from '../data-list-cells';\nimport { Txt } from '@/ds/components/Txt';\nimport { formatDate } from '@/utils/date-format';\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n// ---------------------------------------------------------------------------\n// DateCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListDateCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListDateCell({ timestamp }: ScoresDataListDateCellProps) {\n  return <DataListCell className=\"text-muted-foreground\">{formatDate(timestamp, 'date') ?? '-'}</DataListCell>;\n}\n\n// ---------------------------------------------------------------------------\n// TimeCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListTimeCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListTimeCell({ timestamp }: ScoresDataListTimeCellProps) {\n  return (\n    <DataListCell className=\"text-body-sm text-muted-foreground\">{formatDate(timestamp, 'time') ?? '-'}</DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// InputCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListInputCellProps {\n  input?: unknown;\n}\n\nexport function ScoresDataListInputCell({ input }: ScoresDataListInputCellProps) {\n  const display = input != null ? JSON.stringify(input) : '-';\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListEntityCellProps {\n  entityId?: string | null;\n}\n\nexport function ScoresDataListEntityCell({ entityId }: ScoresDataListEntityCellProps) {\n  const display = entityId || '-';\n  return (\n    <DataListCell>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"block max-w-full min-w-0 truncate\" title={display}>\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ScoreCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListScoreCellProps {\n  score?: unknown;\n}\n\nexport function ScoresDataListScoreCell({ score }: ScoresDataListScoreCellProps) {\n  const display = score == null ? '-' : typeof score === 'object' ? JSON.stringify(score) : String(score);\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { DataListNextPageLoading } from '../data-list-next-page-loading';\nimport { DataListNoMatch } from '../data-list-no-match';\nimport { DataListRoot } from '../data-list-root';\nimport { DataListRowButton } from '../data-list-row-button';\nimport { DataListSortableTopCell } from '../data-list-sortable-top-cell';\nimport { DataListTop } from '../data-list-top';\nimport { DataListTopCell } from '../data-list-top-cell';\nimport {\n  ScoresDataListDateCell,\n  ScoresDataListTimeCell,\n  ScoresDataListInputCell,\n  ScoresDataListEntityCell,\n  ScoresDataListScoreCell,\n} from './scores-data-list-cells';\n\n// oxlint-disable-next-line react/only-export-components -- compound component root, same pattern as TracesDataList\n// eslint-disable-next-line react-refresh/only-export-components -- compound component root, same pattern as TracesDataList\nfunction ScoresDataListRoot(props: ComponentProps<typeof DataListRoot>) {\n  return <DataListRoot {...props} />;\n}\n\nexport const ScoresDataList = Object.assign(ScoresDataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  SortableTopCell: DataListSortableTopCell,\n  RowButton: DataListRowButton,\n  NoMatch: DataListNoMatch,\n  NextPageLoading: DataListNextPageLoading,\n  DateCell: ScoresDataListDateCell,\n  TimeCell: ScoresDataListTimeCell,\n  InputCell: ScoresDataListInputCell,\n  EntityCell: ScoresDataListEntityCell,\n  ScoreCell: ScoresDataListScoreCell,\n});\n"],"names":["jsx","DataListCell","Txt","DataListRoot","DataListTop","DataListTopCell","DataListSortableTopCell","DataListRowButton","DataListNoMatch","DataListNextPageLoading"],"mappings":";;;;;;;;;;;;;AAgBO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBAAOA,cAAA,CAACC,yBAAa,SAAA,EAAU,uBAAA,EAAyB,sCAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAC/F;AAUO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBACED,cAAA,CAACC,yBAAa,SAAA,EAAU,oCAAA,EAAsC,sCAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAEvG;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,UAAU,KAAA,IAAS,IAAA,GAAO,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,GAAA;AACxD,EAAA,sCACGA,qBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA;AAAA,IAACE,OAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAUO,SAAS,wBAAA,CAAyB,EAAE,QAAA,EAAS,EAAkC;AACpF,EAAA,MAAM,UAAU,QAAA,IAAY,GAAA;AAC5B,EAAA,uBACEF,cAAA,CAACC,qBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,mCAAA,EAAoC,KAAA,EAAO,OAAA,EACnF,mBACH,CAAA,EACF,CAAA;AAEJ;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,OAAA,GAAU,KAAA,IAAS,IAAA,GAAO,GAAA,GAAM,OAAO,KAAA,KAAU,QAAA,GAAW,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA;AACtG,EAAA,sCACGD,qBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA;AAAA,IAACE,OAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;ACrFA,SAAS,mBAAmB,KAAA,EAA4C;AACtE,EAAA,uBAAOF,cAAA,CAACG,qBAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEO,MAAM,cAAA,GAAiB,MAAA,CAAO,MAAA,CAAO,kBAAA,EAAoB;AAAA,EAC9D,GAAA,EAAKC,oBAAA;AAAA,EACL,OAAA,EAASC,wBAAA;AAAA,EACT,eAAA,EAAiBC,gCAAA;AAAA,EACjB,SAAA,EAAWC,0BAAA;AAAA,EACX,OAAA,EAASC,wBAAA;AAAA,EACT,eAAA,EAAiBC,gCAAA;AAAA,EACjB,QAAA,EAAU,sBAAA;AAAA,EACV,QAAA,EAAU,sBAAA;AAAA,EACV,SAAA,EAAW,uBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,SAAA,EAAW;AACb,CAAC;;;;;;;;;;"}
+{"version":3,"file":"DataList.cjs.js","sources":["../../src/ds/components/DataList/ScoresDataList/scores-data-list-cells.tsx","../../src/ds/components/DataList/ScoresDataList/scores-data-list.tsx"],"sourcesContent":["import { DataListCell } from '../data-list-cells';\nimport { Txt } from '@/ds/components/Txt';\nimport { formatDate } from '@/utils/date-format';\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n// ---------------------------------------------------------------------------\n// DateCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListDateCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListDateCell({ timestamp }: ScoresDataListDateCellProps) {\n  return <DataListCell className=\"text-muted-foreground\">{formatDate(timestamp, 'date') ?? '-'}</DataListCell>;\n}\n\n// ---------------------------------------------------------------------------\n// TimeCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListTimeCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListTimeCell({ timestamp }: ScoresDataListTimeCellProps) {\n  return (\n    <DataListCell className=\"text-body-sm text-muted-foreground\">{formatDate(timestamp, 'time') ?? '-'}</DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// InputCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListInputCellProps {\n  input?: unknown;\n}\n\nexport function ScoresDataListInputCell({ input }: ScoresDataListInputCellProps) {\n  const display = input != null ? JSON.stringify(input) : '-';\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListEntityCellProps {\n  entityId?: string | null;\n}\n\nexport function ScoresDataListEntityCell({ entityId }: ScoresDataListEntityCellProps) {\n  const display = entityId || '-';\n  return (\n    <DataListCell>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"block max-w-full min-w-0 truncate\" title={display}>\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ScoreCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListScoreCellProps {\n  score?: unknown;\n}\n\nexport function ScoresDataListScoreCell({ score }: ScoresDataListScoreCellProps) {\n  const display = score == null ? '-' : typeof score === 'object' ? JSON.stringify(score) : String(score);\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { DataListNextPageLoading } from '../data-list-next-page-loading';\nimport { DataListNoMatch } from '../data-list-no-match';\nimport { DataListRoot } from '../data-list-root';\nimport { DataListRowButton } from '../data-list-row-button';\nimport { DataListSortableTopCell } from '../data-list-sortable-top-cell';\nimport { DataListTop } from '../data-list-top';\nimport { DataListTopCell } from '../data-list-top-cell';\nimport {\n  ScoresDataListDateCell,\n  ScoresDataListTimeCell,\n  ScoresDataListInputCell,\n  ScoresDataListEntityCell,\n  ScoresDataListScoreCell,\n} from './scores-data-list-cells';\n\n// oxlint-disable-next-line react/only-export-components -- compound component root, same pattern as TracesDataList\n// eslint-disable-next-line react-refresh/only-export-components -- compound component root, same pattern as TracesDataList\nfunction ScoresDataListRoot(props: ComponentProps<typeof DataListRoot>) {\n  return <DataListRoot {...props} />;\n}\n\nexport const ScoresDataList = Object.assign(ScoresDataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  SortableTopCell: DataListSortableTopCell,\n  RowButton: DataListRowButton,\n  NoMatch: DataListNoMatch,\n  NextPageLoading: DataListNextPageLoading,\n  DateCell: ScoresDataListDateCell,\n  TimeCell: ScoresDataListTimeCell,\n  InputCell: ScoresDataListInputCell,\n  EntityCell: ScoresDataListEntityCell,\n  ScoreCell: ScoresDataListScoreCell,\n});\n"],"names":["jsx","DataListCell","Txt","DataListRoot","DataListTop","DataListTopCell","DataListSortableTopCell","DataListRowButton","DataListNoMatch","DataListNextPageLoading"],"mappings":";;;;;;;;;;;;;;;AAgBO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBAAOA,cAAA,CAACC,4BAAa,SAAA,EAAU,uBAAA,EAAyB,sCAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAC/F;AAUO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBACED,cAAA,CAACC,4BAAa,SAAA,EAAU,oCAAA,EAAsC,sCAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAEvG;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,UAAU,KAAA,IAAS,IAAA,GAAO,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,GAAA;AACxD,EAAA,sCACGA,wBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA;AAAA,IAACE,OAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAUO,SAAS,wBAAA,CAAyB,EAAE,QAAA,EAAS,EAAkC;AACpF,EAAA,MAAM,UAAU,QAAA,IAAY,GAAA;AAC5B,EAAA,uBACEF,cAAA,CAACC,wBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,mCAAA,EAAoC,KAAA,EAAO,OAAA,EACnF,mBACH,CAAA,EACF,CAAA;AAEJ;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,OAAA,GAAU,KAAA,IAAS,IAAA,GAAO,GAAA,GAAM,OAAO,KAAA,KAAU,QAAA,GAAW,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA;AACtG,EAAA,sCACGD,wBAAA,EAAA,EACC,QAAA,kBAAAD,cAAA;AAAA,IAACE,OAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;ACrFA,SAAS,mBAAmB,KAAA,EAA4C;AACtE,EAAA,uBAAOF,cAAA,CAACG,wBAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEO,MAAM,cAAA,GAAiB,MAAA,CAAO,MAAA,CAAO,kBAAA,EAAoB;AAAA,EAC9D,GAAA,EAAKC,uBAAA;AAAA,EACL,OAAA,EAASC,2BAAA;AAAA,EACT,eAAA,EAAiBC,sCAAA;AAAA,EACjB,SAAA,EAAWC,gCAAA;AAAA,EACX,OAAA,EAASC,8BAAA;AAAA,EACT,eAAA,EAAiBC,sCAAA;AAAA,EACjB,QAAA,EAAU,sBAAA;AAAA,EACV,QAAA,EAAU,sBAAA;AAAA,EACV,SAAA,EAAW,uBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,SAAA,EAAW;AACb,CAAC;;;;;;;;;;"}

package/dist/components/DataList.es.js

@@ -1,10 +1,11 @@
-import { c as DataListCell, g as DataListNextPageLoading, j as DataListNoMatch, m as DataListRowButton, q as DataListSortableTopCell, b as DataListTopCell, a as DataListTop, D as DataListRoot } from '../data-list-DdCZZctL.js';
-export { e as DataList } from '../data-list-DdCZZctL.js';
-export { D as DataListSkeleton, a as DataListSkeletonRows } from '../data-list-skeleton-CGKlcoiI.js';
+export { D as DataList } from '../data-list-DXQY_iQW.js';
+export { D as DataListSkeleton, a as DataListSkeletonRows } from '../data-list-skeleton-B_SXAeE0.js';
 import { jsx } from 'react/jsx-runtime';
+import { D as DataListNextPageLoading, a as DataListNoMatch, d as DataListRowButton, f as DataListSortableTopCell } from '../data-list-spacer-ByA4ce2a.js';
+import { c as DataListCell, b as DataListTopCell, a as DataListTop, D as DataListRoot } from '../data-list-top-DSr_ocKA.js';
 import { T as Txt } from '../Txt-BtIGLRk1.js';
 import { formatDate } from '../utils/date-format.es.js';
-export { T as TracesDataList } from '../traces-data-list-BgloVIVi.js';
+export { T as TracesDataList } from '../traces-data-list-Zoai0OW_.js';
 export { u as useDataListKeyboard } from '../use-data-list-keyboard-DFQr4t38.js';
 export { TabbedContainer } from '../layout/tabbed-container.es.js';
 

package/dist/components/DataList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataList.es.js","sources":["../../src/ds/components/DataList/ScoresDataList/scores-data-list-cells.tsx","../../src/ds/components/DataList/ScoresDataList/scores-data-list.tsx"],"sourcesContent":["import { DataListCell } from '../data-list-cells';\nimport { Txt } from '@/ds/components/Txt';\nimport { formatDate } from '@/utils/date-format';\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n// ---------------------------------------------------------------------------\n// DateCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListDateCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListDateCell({ timestamp }: ScoresDataListDateCellProps) {\n  return <DataListCell className=\"text-muted-foreground\">{formatDate(timestamp, 'date') ?? '-'}</DataListCell>;\n}\n\n// ---------------------------------------------------------------------------\n// TimeCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListTimeCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListTimeCell({ timestamp }: ScoresDataListTimeCellProps) {\n  return (\n    <DataListCell className=\"text-body-sm text-muted-foreground\">{formatDate(timestamp, 'time') ?? '-'}</DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// InputCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListInputCellProps {\n  input?: unknown;\n}\n\nexport function ScoresDataListInputCell({ input }: ScoresDataListInputCellProps) {\n  const display = input != null ? JSON.stringify(input) : '-';\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListEntityCellProps {\n  entityId?: string | null;\n}\n\nexport function ScoresDataListEntityCell({ entityId }: ScoresDataListEntityCellProps) {\n  const display = entityId || '-';\n  return (\n    <DataListCell>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"block max-w-full min-w-0 truncate\" title={display}>\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ScoreCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListScoreCellProps {\n  score?: unknown;\n}\n\nexport function ScoresDataListScoreCell({ score }: ScoresDataListScoreCellProps) {\n  const display = score == null ? '-' : typeof score === 'object' ? JSON.stringify(score) : String(score);\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { DataListNextPageLoading } from '../data-list-next-page-loading';\nimport { DataListNoMatch } from '../data-list-no-match';\nimport { DataListRoot } from '../data-list-root';\nimport { DataListRowButton } from '../data-list-row-button';\nimport { DataListSortableTopCell } from '../data-list-sortable-top-cell';\nimport { DataListTop } from '../data-list-top';\nimport { DataListTopCell } from '../data-list-top-cell';\nimport {\n  ScoresDataListDateCell,\n  ScoresDataListTimeCell,\n  ScoresDataListInputCell,\n  ScoresDataListEntityCell,\n  ScoresDataListScoreCell,\n} from './scores-data-list-cells';\n\n// oxlint-disable-next-line react/only-export-components -- compound component root, same pattern as TracesDataList\n// eslint-disable-next-line react-refresh/only-export-components -- compound component root, same pattern as TracesDataList\nfunction ScoresDataListRoot(props: ComponentProps<typeof DataListRoot>) {\n  return <DataListRoot {...props} />;\n}\n\nexport const ScoresDataList = Object.assign(ScoresDataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  SortableTopCell: DataListSortableTopCell,\n  RowButton: DataListRowButton,\n  NoMatch: DataListNoMatch,\n  NextPageLoading: DataListNextPageLoading,\n  DateCell: ScoresDataListDateCell,\n  TimeCell: ScoresDataListTimeCell,\n  InputCell: ScoresDataListInputCell,\n  EntityCell: ScoresDataListEntityCell,\n  ScoreCell: ScoresDataListScoreCell,\n});\n"],"names":[],"mappings":";;;;;;;;;;AAgBO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBAAO,GAAA,CAAC,gBAAa,SAAA,EAAU,uBAAA,EAAyB,qBAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAC/F;AAUO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBACE,GAAA,CAAC,gBAAa,SAAA,EAAU,oCAAA,EAAsC,qBAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAEvG;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,UAAU,KAAA,IAAS,IAAA,GAAO,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,GAAA;AACxD,EAAA,2BACG,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAUO,SAAS,wBAAA,CAAyB,EAAE,QAAA,EAAS,EAAkC;AACpF,EAAA,MAAM,UAAU,QAAA,IAAY,GAAA;AAC5B,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,mCAAA,EAAoC,KAAA,EAAO,OAAA,EACnF,mBACH,CAAA,EACF,CAAA;AAEJ;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,OAAA,GAAU,KAAA,IAAS,IAAA,GAAO,GAAA,GAAM,OAAO,KAAA,KAAU,QAAA,GAAW,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA;AACtG,EAAA,2BACG,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;ACrFA,SAAS,mBAAmB,KAAA,EAA4C;AACtE,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEO,MAAM,cAAA,GAAiB,MAAA,CAAO,MAAA,CAAO,kBAAA,EAAoB;AAAA,EAC9D,GAAA,EAAK,WAAA;AAAA,EACL,OAAA,EAAS,eAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,SAAA,EAAW,iBAAA;AAAA,EACX,OAAA,EAAS,eAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,QAAA,EAAU,sBAAA;AAAA,EACV,QAAA,EAAU,sBAAA;AAAA,EACV,SAAA,EAAW,uBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,SAAA,EAAW;AACb,CAAC;;;;"}
+{"version":3,"file":"DataList.es.js","sources":["../../src/ds/components/DataList/ScoresDataList/scores-data-list-cells.tsx","../../src/ds/components/DataList/ScoresDataList/scores-data-list.tsx"],"sourcesContent":["import { DataListCell } from '../data-list-cells';\nimport { Txt } from '@/ds/components/Txt';\nimport { formatDate } from '@/utils/date-format';\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n// ---------------------------------------------------------------------------\n// DateCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListDateCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListDateCell({ timestamp }: ScoresDataListDateCellProps) {\n  return <DataListCell className=\"text-muted-foreground\">{formatDate(timestamp, 'date') ?? '-'}</DataListCell>;\n}\n\n// ---------------------------------------------------------------------------\n// TimeCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListTimeCellProps {\n  timestamp: Date | string;\n}\n\nexport function ScoresDataListTimeCell({ timestamp }: ScoresDataListTimeCellProps) {\n  return (\n    <DataListCell className=\"text-body-sm text-muted-foreground\">{formatDate(timestamp, 'time') ?? '-'}</DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// InputCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListInputCellProps {\n  input?: unknown;\n}\n\nexport function ScoresDataListInputCell({ input }: ScoresDataListInputCellProps) {\n  const display = input != null ? JSON.stringify(input) : '-';\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListEntityCellProps {\n  entityId?: string | null;\n}\n\nexport function ScoresDataListEntityCell({ entityId }: ScoresDataListEntityCellProps) {\n  const display = entityId || '-';\n  return (\n    <DataListCell>\n      <Txt as=\"span\" variant=\"body-sm\" className=\"block max-w-full min-w-0 truncate\" title={display}>\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ScoreCell\n// ---------------------------------------------------------------------------\n\nexport interface ScoresDataListScoreCellProps {\n  score?: unknown;\n}\n\nexport function ScoresDataListScoreCell({ score }: ScoresDataListScoreCellProps) {\n  const display = score == null ? '-' : typeof score === 'object' ? JSON.stringify(score) : String(score);\n  return (\n    <DataListCell>\n      <Txt\n        as=\"span\"\n        variant=\"body-sm\"\n        tone=\"muted\"\n        font=\"mono\"\n        className=\"block max-w-full min-w-0 truncate\"\n        title={display}\n      >\n        {display}\n      </Txt>\n    </DataListCell>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { DataListNextPageLoading } from '../data-list-next-page-loading';\nimport { DataListNoMatch } from '../data-list-no-match';\nimport { DataListRoot } from '../data-list-root';\nimport { DataListRowButton } from '../data-list-row-button';\nimport { DataListSortableTopCell } from '../data-list-sortable-top-cell';\nimport { DataListTop } from '../data-list-top';\nimport { DataListTopCell } from '../data-list-top-cell';\nimport {\n  ScoresDataListDateCell,\n  ScoresDataListTimeCell,\n  ScoresDataListInputCell,\n  ScoresDataListEntityCell,\n  ScoresDataListScoreCell,\n} from './scores-data-list-cells';\n\n// oxlint-disable-next-line react/only-export-components -- compound component root, same pattern as TracesDataList\n// eslint-disable-next-line react-refresh/only-export-components -- compound component root, same pattern as TracesDataList\nfunction ScoresDataListRoot(props: ComponentProps<typeof DataListRoot>) {\n  return <DataListRoot {...props} />;\n}\n\nexport const ScoresDataList = Object.assign(ScoresDataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  SortableTopCell: DataListSortableTopCell,\n  RowButton: DataListRowButton,\n  NoMatch: DataListNoMatch,\n  NextPageLoading: DataListNextPageLoading,\n  DateCell: ScoresDataListDateCell,\n  TimeCell: ScoresDataListTimeCell,\n  InputCell: ScoresDataListInputCell,\n  EntityCell: ScoresDataListEntityCell,\n  ScoreCell: ScoresDataListScoreCell,\n});\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBAAO,GAAA,CAAC,gBAAa,SAAA,EAAU,uBAAA,EAAyB,qBAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAC/F;AAUO,SAAS,sBAAA,CAAuB,EAAE,SAAA,EAAU,EAAgC;AACjF,EAAA,uBACE,GAAA,CAAC,gBAAa,SAAA,EAAU,oCAAA,EAAsC,qBAAW,SAAA,EAAW,MAAM,KAAK,GAAA,EAAI,CAAA;AAEvG;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,UAAU,KAAA,IAAS,IAAA,GAAO,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,GAAA;AACxD,EAAA,2BACG,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAUO,SAAS,wBAAA,CAAyB,EAAE,QAAA,EAAS,EAAkC;AACpF,EAAA,MAAM,UAAU,QAAA,IAAY,GAAA;AAC5B,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,SAAA,EAAU,mCAAA,EAAoC,KAAA,EAAO,OAAA,EACnF,mBACH,CAAA,EACF,CAAA;AAEJ;AAUO,SAAS,uBAAA,CAAwB,EAAE,KAAA,EAAM,EAAiC;AAC/E,EAAA,MAAM,OAAA,GAAU,KAAA,IAAS,IAAA,GAAO,GAAA,GAAM,OAAO,KAAA,KAAU,QAAA,GAAW,IAAA,CAAK,SAAA,CAAU,KAAK,CAAA,GAAI,MAAA,CAAO,KAAK,CAAA;AACtG,EAAA,2BACG,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAU,mCAAA;AAAA,MACV,KAAA,EAAO,OAAA;AAAA,MAEN,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;ACrFA,SAAS,mBAAmB,KAAA,EAA4C;AACtE,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEO,MAAM,cAAA,GAAiB,MAAA,CAAO,MAAA,CAAO,kBAAA,EAAoB;AAAA,EAC9D,GAAA,EAAK,WAAA;AAAA,EACL,OAAA,EAAS,eAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,SAAA,EAAW,iBAAA;AAAA,EACX,OAAA,EAAS,eAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,QAAA,EAAU,sBAAA;AAAA,EACV,QAAA,EAAU,sBAAA;AAAA,EACV,SAAA,EAAW,uBAAA;AAAA,EACX,UAAA,EAAY,wBAAA;AAAA,EACZ,SAAA,EAAW;AACb,CAAC;;;;"}

package/dist/components/EnvironmentVariablesEditor.cjs.js

@@ -10,7 +10,7 @@ const Button = require('../Button-DH1aTzbs.cjs');
 const Notice = require('../Notice-DYgIy4FO.cjs');
 const envFile = require('../env-file-BU2hStkm.cjs');
 const Txt = require('../Txt-CIS2G5Jx.cjs');
-const dataList = require('../data-list-ecHsw-zr.cjs');
+const dataList = require('../data-list-DUfXIhyC.cjs');
 const hooks_useCopyToClipboard = require('../hooks/use-copy-to-clipboard.cjs.js');
 const field = require('../field-BCU5ZtWV.cjs');
 require('../field-control-aria-WzMGs0A4.cjs');

package/dist/components/EnvironmentVariablesEditor.es.js

@@ -6,7 +6,7 @@ import { B as Button } from '../Button-EGoajBQY.js';
 import { N as Notice } from '../Notice-BioYTS4b.js';
 import { D as DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE } from '../env-file-BITYowCx.js';
 import { T as Txt } from '../Txt-BtIGLRk1.js';
-import { e as DataList } from '../data-list-DdCZZctL.js';
+import { D as DataList } from '../data-list-DXQY_iQW.js';
 import { useCopyToClipboard } from '../hooks/use-copy-to-clipboard.es.js';
 import { F as Field, e as FieldLabel, c as FieldError } from '../field-Dl1zeXTv.js';
 import '../field-control-aria-DB6y41tQ.js';

package/dist/components/LogsDataList.cjs.js

@@ -2,11 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const logsDataList = require('../logs-data-list-IWZgMCKG.cjs');
-require('../data-list-ecHsw-zr.cjs');
-const dataListSkeleton = require('../data-list-skeleton-DGMTqeNP.cjs');
-require('react');
-require('../keyboard/keyboard-shortcuts-context.cjs.js');
+const logsDataList = require('../logs-data-list-DRR6cMgl.cjs');
+const dataListSkeleton = require('../data-list-skeleton-BqC9Gggi.cjs');
 
 
 

package/dist/components/LogsDataList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/LogsDataList.es.js

@@ -1,6 +1,3 @@
-export { L as LogsDataList } from '../logs-data-list-DBJINzIL.js';
-import '../data-list-DdCZZctL.js';
-export { D as LogsDataListSkeleton } from '../data-list-skeleton-CGKlcoiI.js';
-import 'react';
-import '../keyboard/keyboard-shortcuts-context.es.js';
+export { L as LogsDataList } from '../logs-data-list-CoER2Hst.js';
+export { D as LogsDataListSkeleton } from '../data-list-skeleton-B_SXAeE0.js';
 //# sourceMappingURL=LogsDataList.es.js.map

package/dist/components/LogsDataList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Meter.cjs.js

@@ -0,0 +1,172 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils_cost = require('../utils/cost.cjs.js');
+const Txt = require('../Txt-CIS2G5Jx.cjs');
+const utils_cn = require('../cn-DlOJCxrS.cjs');
+const tooltip = require('../tooltip-BppwIf6Y.cjs');
+const primitives_transitions = require('../primitives/transitions.cjs.js');
+
+const MeterPartContext = React.createContext({
+  part: "bar",
+  format: utils_cost.formatFullNumber
+});
+const sourceColorClassName = [
+  "[&>:nth-child(5n+1)]:[--meter-source:var(--chart-share-1)]",
+  "[&>:nth-child(5n+2)]:[--meter-source:var(--chart-share-2)]",
+  "[&>:nth-child(5n+3)]:[--meter-source:var(--chart-share-3)]",
+  "[&>:nth-child(5n+4)]:[--meter-source:var(--chart-share-4)]",
+  "[&>:nth-child(5n)]:[--meter-source:var(--chart-share-5)]"
+].join(" ");
+
+function MeterKeyRow({ swatch, label, amount }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "meter-key-row", className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: utils_cn.cn("size-2 rounded-xs", swatch) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-48 min-w-0 flex-1 truncate", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-4 text-foreground tabular-nums", children: amount })
+  ] });
+}
+
+function MeterSegment({ slot, grow, className }) {
+  const style = { "--meter-share": grow };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": slot,
+      className: utils_cn.cn("min-w-1 grow-(--meter-share) basis-0 rounded-full", className),
+      style
+    }
+  );
+}
+
+function readingOf(value, max) {
+  const used = Math.max(0, value);
+  const allowance = Math.max(0, max);
+  const over = Math.max(0, used - allowance);
+  const within = used - over;
+  return { used, allowance, over, within, rest: allowance - within };
+}
+function overAllowanceText({ used, allowance, over }, format) {
+  if (over <= 0) return void 0;
+  return `${format(used)} of ${format(allowance)}, ${format(over)} over`;
+}
+function MeterRoot({ value, max, children, format = utils_cost.formatFullNumber, className, ...props }) {
+  const reading = readingOf(value, max);
+  const meterProps = {
+    role: "meter",
+    "aria-valuemin": 0,
+    "aria-valuemax": reading.allowance,
+    "aria-valuenow": reading.within,
+    "aria-valuetext": overAllowanceText(reading, format),
+    "data-over": reading.over > 0 || void 0,
+    className: utils_cn.cn("group/meter relative flex h-1 w-full min-w-0", className),
+    ...props
+  };
+  if (children === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...meterProps, children: /* @__PURE__ */ jsxRuntime.jsx(AllowanceBar, { reading }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SourcesMeter, { reading, format, meterProps, children });
+}
+function SourcesMeter({
+  reading,
+  format,
+  meterProps,
+  children
+}) {
+  const keyId = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      tooltip.TooltipTrigger,
+      {
+        delay: 0,
+        render: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ...meterProps,
+            tabIndex: 0,
+            "aria-describedby": keyId,
+            className: utils_cn.cn(
+              meterProps.className,
+              "rounded-full before:absolute before:inset-x-0 before:-inset-y-2",
+              primitives_transitions.focusRing
+            )
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AllowanceBar, { reading, className: utils_cn.cn(fadeOut, primitives_transitions.transitions.opacity, "motion-reduce:transition-none") }),
+          /* @__PURE__ */ jsxRuntime.jsx(SourceBar, { reading, format, children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { keepMounted: true, id: keyId, children: /* @__PURE__ */ jsxRuntime.jsx(MeterKey, { reading, format, children }) })
+  ] });
+}
+const fadeOut = "group-hover/meter:opacity-0 group-focus-visible/meter:opacity-0";
+const fadeIn = "opacity-0 group-hover/meter:opacity-100 group-focus-visible/meter:opacity-100";
+function AllowanceBar({ reading, className }) {
+  const { used, over, within, rest } = reading;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-slot": "meter-bar", className: utils_cn.cn("flex size-full gap-0.5", className), children: [
+    within > 0 && /* @__PURE__ */ jsxRuntime.jsx(MeterSegment, { slot: "meter-used", grow: within, className: "bg-foreground" }),
+    over > 0 && /* @__PURE__ */ jsxRuntime.jsx(MeterSegment, { slot: "meter-over", grow: over, className: "bg-destructive-indicator" }),
+    (rest > 0 || used === 0) && /* @__PURE__ */ jsxRuntime.jsx(MeterSegment, { slot: "meter-rest", grow: rest || 1, className: "bg-fill-strong" })
+  ] });
+}
+function SourceBar({
+  reading,
+  format,
+  children
+}) {
+  const { used, over, rest } = reading;
+  const overShare = used > 0 ? over / used : 0;
+  const overStyle = { "--meter-over": `${overShare * 100}%` };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "meter-sources",
+      style: overStyle,
+      className: utils_cn.cn(
+        "absolute inset-0 flex gap-0.5",
+        fadeIn,
+        primitives_transitions.transitions.opacity,
+        "motion-reduce:transition-none",
+        sourceColorClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MeterPartContext, { value: { part: "bar", format }, children }),
+        rest > 0 && /* @__PURE__ */ jsxRuntime.jsx(MeterSegment, { slot: "meter-rest", grow: rest, className: "bg-fill-strong" }),
+        over > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 right-0 w-(--meter-over) rounded-r-full bg-destructive-indicator" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -inset-y-1 right-(--meter-over) w-0.5 rounded-full bg-foreground" })
+        ] })
+      ]
+    }
+  );
+}
+function MeterKey({
+  reading,
+  format,
+  children
+}) {
+  const { over, rest } = reading;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "meter-key", className: utils_cn.cn("flex min-w-40 flex-col gap-1", sourceColorClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MeterPartContext, { value: { part: "key", format }, children }),
+    rest > 0 && /* @__PURE__ */ jsxRuntime.jsx(MeterKeyRow, { swatch: "bg-fill-strong", label: "Remaining", amount: format(rest) }),
+    over > 0 && /* @__PURE__ */ jsxRuntime.jsx(MeterKeyRow, { swatch: "bg-destructive-indicator", label: "Over allowance", amount: format(over) })
+  ] });
+}
+
+function MeterSource({ label, value }) {
+  const { part, format } = React.use(MeterPartContext);
+  if (part === "key") return /* @__PURE__ */ jsxRuntime.jsx(MeterKeyRow, { swatch: "bg-(--meter-source)", label, amount: format(value) });
+  return /* @__PURE__ */ jsxRuntime.jsx(MeterSegment, { slot: "meter-source", grow: Math.max(0, value), className: "bg-(--meter-source)" });
+}
+
+const Meter = Object.assign(MeterRoot, { Source: MeterSource });
+
+exports.Meter = Meter;
+exports.MeterSource = MeterSource;
+//# sourceMappingURL=Meter.cjs.js.map

package/dist/components/Meter.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.cjs.js","sources":["../../src/ds/components/Meter/meter-context.ts","../../src/ds/components/Meter/meter-key-row.tsx","../../src/ds/components/Meter/meter-segment.tsx","../../src/ds/components/Meter/meter-root.tsx","../../src/ds/components/Meter/meter-source.tsx","../../src/ds/components/Meter/meter.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { formatFullNumber } from '@/lib/cost';\n\nexport type MeterPart = 'bar' | 'key';\n\nexport const MeterPartContext = createContext<{ part: MeterPart; format: (value: number) => string }>({\n  part: 'bar',\n  format: formatFullNumber,\n});\n\nexport const sourceColorClassName = [\n  '[&>:nth-child(5n+1)]:[--meter-source:var(--chart-share-1)]',\n  '[&>:nth-child(5n+2)]:[--meter-source:var(--chart-share-2)]',\n  '[&>:nth-child(5n+3)]:[--meter-source:var(--chart-share-3)]',\n  '[&>:nth-child(5n+4)]:[--meter-source:var(--chart-share-4)]',\n  '[&>:nth-child(5n)]:[--meter-source:var(--chart-share-5)]',\n].join(' ');\n","import type { ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport function MeterKeyRow({ swatch, label, amount }: { swatch: string; label: ReactNode; amount: string }) {\n  return (\n    <div data-slot=\"meter-key-row\" className=\"flex items-center gap-2\">\n      <span aria-hidden className={cn('size-2 rounded-xs', swatch)} />\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"max-w-48 min-w-0 flex-1 truncate\">\n        {label}\n      </Txt>\n      <span className=\"ml-auto pl-4 text-foreground tabular-nums\">{amount}</span>\n    </div>\n  );\n}\n","import type { CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\n\ninterface SegmentStyle extends CSSProperties {\n  '--meter-share': number;\n}\n\nexport function MeterSegment({ slot, grow, className }: { slot: string; grow: number; className: string }) {\n  const style: SegmentStyle = { '--meter-share': grow };\n  return (\n    <span\n      data-slot={slot}\n      className={cn('min-w-1 grow-(--meter-share) basis-0 rounded-full', className)}\n      style={style}\n    />\n  );\n}\n","import { useId } from 'react';\nimport type { CSSProperties, ComponentProps, ReactNode } from 'react';\nimport { MeterPartContext, sourceColorClassName } from './meter-context';\nimport { MeterKeyRow } from './meter-key-row';\nimport { MeterSegment } from './meter-segment';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\nimport { focusRing, transitions } from '@/ds/primitives/transitions';\nimport { formatFullNumber } from '@/lib/cost';\nimport { cn } from '@/lib/utils';\n\nexport type MeterProps = Omit<ComponentProps<'span'>, 'children'> & {\n  value: number;\n  max: number;\n  children?: ReactNode;\n  format?: (value: number) => string;\n} & ({ 'aria-label': string; 'aria-labelledby'?: never } | { 'aria-label'?: never; 'aria-labelledby': string });\n\ntype Reading = { used: number; allowance: number; over: number; within: number; rest: number };\n\nfunction readingOf(value: number, max: number): Reading {\n  const used = Math.max(0, value);\n  const allowance = Math.max(0, max);\n  const over = Math.max(0, used - allowance);\n  const within = used - over;\n  return { used, allowance, over, within, rest: allowance - within };\n}\n\nfunction overAllowanceText({ used, allowance, over }: Reading, format: (value: number) => string) {\n  if (over <= 0) return undefined;\n  return `${format(used)} of ${format(allowance)}, ${format(over)} over`;\n}\n\nexport function MeterRoot({ value, max, children, format = formatFullNumber, className, ...props }: MeterProps) {\n  const reading = readingOf(value, max);\n  const meterProps = {\n    role: 'meter',\n    'aria-valuemin': 0,\n    'aria-valuemax': reading.allowance,\n    'aria-valuenow': reading.within,\n    'aria-valuetext': overAllowanceText(reading, format),\n    'data-over': reading.over > 0 || undefined,\n    className: cn('group/meter relative flex h-1 w-full min-w-0', className),\n    ...props,\n  };\n\n  if (children === undefined) {\n    return (\n      <span {...meterProps}>\n        <AllowanceBar reading={reading} />\n      </span>\n    );\n  }\n\n  return (\n    <SourcesMeter reading={reading} format={format} meterProps={meterProps}>\n      {children}\n    </SourcesMeter>\n  );\n}\n\nfunction SourcesMeter({\n  reading,\n  format,\n  meterProps,\n  children,\n}: {\n  reading: Reading;\n  format: (value: number) => string;\n  meterProps: ComponentProps<'span'>;\n  children: ReactNode;\n}) {\n  const keyId = useId();\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        delay={0}\n        render={\n          <span\n            {...meterProps}\n            tabIndex={0}\n            aria-describedby={keyId}\n            className={cn(\n              meterProps.className,\n              'rounded-full before:absolute before:inset-x-0 before:-inset-y-2',\n              focusRing,\n            )}\n          />\n        }\n      >\n        <AllowanceBar reading={reading} className={cn(fadeOut, transitions.opacity, 'motion-reduce:transition-none')} />\n        <SourceBar reading={reading} format={format}>\n          {children}\n        </SourceBar>\n      </TooltipTrigger>\n      <TooltipContent keepMounted id={keyId}>\n        <MeterKey reading={reading} format={format}>\n          {children}\n        </MeterKey>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n\nconst fadeOut = 'group-hover/meter:opacity-0 group-focus-visible/meter:opacity-0';\nconst fadeIn = 'opacity-0 group-hover/meter:opacity-100 group-focus-visible/meter:opacity-100';\n\nfunction AllowanceBar({ reading, className }: { reading: Reading; className?: string }) {\n  const { used, over, within, rest } = reading;\n  return (\n    <span data-slot=\"meter-bar\" className={cn('flex size-full gap-0.5', className)}>\n      {within > 0 && <MeterSegment slot=\"meter-used\" grow={within} className=\"bg-foreground\" />}\n      {over > 0 && <MeterSegment slot=\"meter-over\" grow={over} className=\"bg-destructive-indicator\" />}\n      {(rest > 0 || used === 0) && <MeterSegment slot=\"meter-rest\" grow={rest || 1} className=\"bg-fill-strong\" />}\n    </span>\n  );\n}\n\ninterface OverStyle extends CSSProperties {\n  '--meter-over': string;\n}\n\nfunction SourceBar({\n  reading,\n  format,\n  children,\n}: {\n  reading: Reading;\n  format: (value: number) => string;\n  children: ReactNode;\n}) {\n  const { used, over, rest } = reading;\n  const overShare = used > 0 ? over / used : 0;\n  const overStyle: OverStyle = { '--meter-over': `${overShare * 100}%` };\n  return (\n    <span\n      aria-hidden\n      data-slot=\"meter-sources\"\n      style={overStyle}\n      className={cn(\n        'absolute inset-0 flex gap-0.5',\n        fadeIn,\n        transitions.opacity,\n        'motion-reduce:transition-none',\n        sourceColorClassName,\n      )}\n    >\n      <MeterPartContext value={{ part: 'bar', format }}>{children}</MeterPartContext>\n      {rest > 0 && <MeterSegment slot=\"meter-rest\" grow={rest} className=\"bg-fill-strong\" />}\n      {over > 0 && (\n        <>\n          <span className=\"absolute inset-y-0 right-0 w-(--meter-over) rounded-r-full bg-destructive-indicator\" />\n          <span className=\"absolute -inset-y-1 right-(--meter-over) w-0.5 rounded-full bg-foreground\" />\n        </>\n      )}\n    </span>\n  );\n}\n\nfunction MeterKey({\n  reading,\n  format,\n  children,\n}: {\n  reading: Reading;\n  format: (value: number) => string;\n  children: ReactNode;\n}) {\n  const { over, rest } = reading;\n  return (\n    <div data-slot=\"meter-key\" className={cn('flex min-w-40 flex-col gap-1', sourceColorClassName)}>\n      <MeterPartContext value={{ part: 'key', format }}>{children}</MeterPartContext>\n      {rest > 0 && <MeterKeyRow swatch=\"bg-fill-strong\" label=\"Remaining\" amount={format(rest)} />}\n      {over > 0 && <MeterKeyRow swatch=\"bg-destructive-indicator\" label=\"Over allowance\" amount={format(over)} />}\n    </div>\n  );\n}\n","import { use } from 'react';\nimport type { ReactNode } from 'react';\nimport { MeterPartContext } from './meter-context';\nimport { MeterKeyRow } from './meter-key-row';\nimport { MeterSegment } from './meter-segment';\n\nexport type MeterSourceProps = {\n  label: ReactNode;\n  value: number;\n};\n\nexport function MeterSource({ label, value }: MeterSourceProps) {\n  const { part, format } = use(MeterPartContext);\n  if (part === 'key') return <MeterKeyRow swatch=\"bg-(--meter-source)\" label={label} amount={format(value)} />;\n  return <MeterSegment slot=\"meter-source\" grow={Math.max(0, value)} className=\"bg-(--meter-source)\" />;\n}\n","import { MeterRoot } from './meter-root';\nimport { MeterSource } from './meter-source';\n\nexport type { MeterProps } from './meter-root';\n\nexport const Meter = Object.assign(MeterRoot, { Source: MeterSource });\n"],"names":["createContext","formatFullNumber","jsxs","jsx","cn","Txt","useId","Tooltip","TooltipTrigger","focusRing","transitions","TooltipContent","Fragment","use"],"mappings":";;;;;;;;;;;;AAKO,MAAM,mBAAmBA,mBAAA,CAAsE;AAAA,EACpG,IAAA,EAAM,KAAA;AAAA,EACN,MAAA,EAAQC;AACV,CAAC,CAAA;AAEM,MAAM,oBAAA,GAAuB;AAAA,EAClC,4DAAA;AAAA,EACA,4DAAA;AAAA,EACA,4DAAA;AAAA,EACA,4DAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;;ACZH,SAAS,WAAA,CAAY,EAAE,MAAA,EAAQ,KAAA,EAAO,QAAO,EAAyD;AAC3G,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,eAAA,EAAgB,WAAU,yBAAA,EACvC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,aAAA,EAAW,IAAA,EAAC,WAAWC,WAAA,CAAG,mBAAA,EAAqB,MAAM,CAAA,EAAG,CAAA;AAAA,oBAC9DD,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,kCAAA,EACrD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,oBACAF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2CAAA,EAA6C,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EACtE,CAAA;AAEJ;;ACPO,SAAS,YAAA,CAAa,EAAE,IAAA,EAAM,IAAA,EAAM,WAAU,EAAsD;AACzG,EAAA,MAAM,KAAA,GAAsB,EAAE,eAAA,EAAiB,IAAA,EAAK;AACpD,EAAA,uBACEA,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,WAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAC5E;AAAA;AAAA,GACF;AAEJ;;ACGA,SAAS,SAAA,CAAU,OAAe,GAAA,EAAsB;AACtD,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAA;AAC9B,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,GAAG,CAAA;AACjC,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,OAAO,SAAS,CAAA;AACzC,EAAA,MAAM,SAAS,IAAA,GAAO,IAAA;AACtB,EAAA,OAAO,EAAE,IAAA,EAAM,SAAA,EAAW,MAAM,MAAA,EAAQ,IAAA,EAAM,YAAY,MAAA,EAAO;AACnE;AAEA,SAAS,kBAAkB,EAAE,IAAA,EAAM,SAAA,EAAW,IAAA,IAAiB,MAAA,EAAmC;AAChG,EAAA,IAAI,IAAA,IAAQ,GAAG,OAAO,MAAA;AACtB,EAAA,OAAO,CAAA,EAAG,MAAA,CAAO,IAAI,CAAC,CAAA,IAAA,EAAO,MAAA,CAAO,SAAS,CAAC,CAAA,EAAA,EAAK,MAAA,CAAO,IAAI,CAAC,CAAA,KAAA,CAAA;AACjE;AAEO,SAAS,SAAA,CAAU,EAAE,KAAA,EAAO,GAAA,EAAK,QAAA,EAAU,SAASH,2BAAA,EAAkB,SAAA,EAAW,GAAG,KAAA,EAAM,EAAe;AAC9G,EAAA,MAAM,OAAA,GAAU,SAAA,CAAU,KAAA,EAAO,GAAG,CAAA;AACpC,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,IAAA,EAAM,OAAA;AAAA,IACN,eAAA,EAAiB,CAAA;AAAA,IACjB,iBAAiB,OAAA,CAAQ,SAAA;AAAA,IACzB,iBAAiB,OAAA,CAAQ,MAAA;AAAA,IACzB,gBAAA,EAAkB,iBAAA,CAAkB,OAAA,EAAS,MAAM,CAAA;AAAA,IACnD,WAAA,EAAa,OAAA,CAAQ,IAAA,GAAO,CAAA,IAAK,MAAA;AAAA,IACjC,SAAA,EAAWG,WAAA,CAAG,8CAAA,EAAgD,SAAS,CAAA;AAAA,IACvE,GAAG;AAAA,GACL;AAEA,EAAA,IAAI,aAAa,MAAA,EAAW;AAC1B,IAAA,sCACG,MAAA,EAAA,EAAM,GAAG,YACR,QAAA,kBAAAD,cAAA,CAAC,YAAA,EAAA,EAAa,SAAkB,CAAA,EAClC,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEA,cAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAkB,MAAA,EAAgB,YAC7C,QAAA,EACH,CAAA;AAEJ;AAEA,SAAS,YAAA,CAAa;AAAA,EACpB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,MAAM,QAAQG,WAAA,EAAM;AACpB,EAAA,uCACGC,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAL,eAAA;AAAA,MAACM,sBAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,kBACEL,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,QAAA,EAAU,CAAA;AAAA,YACV,kBAAA,EAAkB,KAAA;AAAA,YAClB,SAAA,EAAWC,WAAA;AAAA,cACT,UAAA,CAAW,SAAA;AAAA,cACX,iEAAA;AAAA,cACAK;AAAA;AACF;AAAA,SACF;AAAA,QAGF,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAAC,YAAA,EAAA,EAAa,SAAkB,SAAA,EAAWC,WAAA,CAAG,SAASM,kCAAA,CAAY,OAAA,EAAS,+BAA+B,CAAA,EAAG,CAAA;AAAA,0BAC9GP,cAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAkB,MAAA,EAC1B,QAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,oBACAA,cAAA,CAACQ,sBAAA,EAAA,EAAe,WAAA,EAAW,IAAA,EAAC,EAAA,EAAI,KAAA,EAC9B,QAAA,kBAAAR,cAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,MAAA,EACzB,QAAA,EACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,MAAM,OAAA,GAAU,iEAAA;AAChB,MAAM,MAAA,GAAS,+EAAA;AAEf,SAAS,YAAA,CAAa,EAAE,OAAA,EAAS,SAAA,EAAU,EAA6C;AACtF,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,MAAK,GAAI,OAAA;AACrC,EAAA,uBACED,eAAA,CAAC,UAAK,WAAA,EAAU,WAAA,EAAY,WAAWE,WAAA,CAAG,wBAAA,EAA0B,SAAS,CAAA,EAC1E,QAAA,EAAA;AAAA,IAAA,MAAA,GAAS,CAAA,mCAAM,YAAA,EAAA,EAAa,IAAA,EAAK,cAAa,IAAA,EAAM,MAAA,EAAQ,WAAU,eAAA,EAAgB,CAAA;AAAA,IACtF,IAAA,GAAO,qBAAKD,cAAA,CAAC,YAAA,EAAA,EAAa,MAAK,YAAA,EAAa,IAAA,EAAM,IAAA,EAAM,SAAA,EAAU,0BAAA,EAA2B,CAAA;AAAA,IAAA,CAC5F,IAAA,GAAO,CAAA,IAAK,IAAA,KAAS,CAAA,qBAAMA,cAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAK,YAAA,EAAa,IAAA,EAAM,IAAA,IAAQ,CAAA,EAAG,SAAA,EAAU,gBAAA,EAAiB;AAAA,GAAA,EAC3G,CAAA;AAEJ;AAMA,SAAS,SAAA,CAAU;AAAA,EACjB,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAM,IAAA,EAAK,GAAI,OAAA;AAC7B,EAAA,MAAM,SAAA,GAAY,IAAA,GAAO,CAAA,GAAI,IAAA,GAAO,IAAA,GAAO,CAAA;AAC3C,EAAA,MAAM,YAAuB,EAAE,cAAA,EAAgB,CAAA,EAAG,SAAA,GAAY,GAAG,CAAA,CAAA,CAAA,EAAI;AACrE,EAAA,uBACED,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAU,eAAA;AAAA,MACV,KAAA,EAAO,SAAA;AAAA,MACP,SAAA,EAAWE,WAAA;AAAA,QACT,+BAAA;AAAA,QACA,MAAA;AAAA,QACAM,kCAAA,CAAY,OAAA;AAAA,QACZ,+BAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAP,cAAA,CAAC,oBAAiB,KAAA,EAAO,EAAE,MAAM,KAAA,EAAO,MAAA,IAAW,QAAA,EAAS,CAAA;AAAA,QAC3D,IAAA,GAAO,qBAAKA,cAAA,CAAC,YAAA,EAAA,EAAa,MAAK,YAAA,EAAa,IAAA,EAAM,IAAA,EAAM,SAAA,EAAU,gBAAA,EAAiB,CAAA;AAAA,QACnF,IAAA,GAAO,qBACND,eAAA,CAAAU,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAT,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,qFAAA,EAAsF,CAAA;AAAA,0BACtGA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2EAAA,EAA4E;AAAA,SAAA,EAC9F;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEA,SAAS,QAAA,CAAS;AAAA,EAChB,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAK,GAAI,OAAA;AACvB,EAAA,uBACED,eAAA,CAAC,SAAI,WAAA,EAAU,WAAA,EAAY,WAAWE,WAAA,CAAG,8BAAA,EAAgC,oBAAoB,CAAA,EAC3F,QAAA,EAAA;AAAA,oBAAAD,cAAA,CAAC,oBAAiB,KAAA,EAAO,EAAE,MAAM,KAAA,EAAO,MAAA,IAAW,QAAA,EAAS,CAAA;AAAA,IAC3D,IAAA,GAAO,CAAA,oBAAKA,cAAA,CAAC,WAAA,EAAA,EAAY,MAAA,EAAO,gBAAA,EAAiB,KAAA,EAAM,WAAA,EAAY,MAAA,EAAQ,MAAA,CAAO,IAAI,CAAA,EAAG,CAAA;AAAA,IACzF,IAAA,GAAO,CAAA,oBAAKA,cAAA,CAAC,WAAA,EAAA,EAAY,MAAA,EAAO,0BAAA,EAA2B,KAAA,EAAM,gBAAA,EAAiB,MAAA,EAAQ,MAAA,CAAO,IAAI,CAAA,EAAG;AAAA,GAAA,EAC3G,CAAA;AAEJ;;ACpKO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,KAAA,EAAM,EAAqB;AAC9D,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAO,GAAIU,UAAI,gBAAgB,CAAA;AAC7C,EAAA,IAAI,IAAA,KAAS,KAAA,EAAO,uBAAOV,cAAA,CAAC,WAAA,EAAA,EAAY,MAAA,EAAO,qBAAA,EAAsB,KAAA,EAAc,MAAA,EAAQ,MAAA,CAAO,KAAK,CAAA,EAAG,CAAA;AAC1G,EAAA,uBAAOA,cAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAK,cAAA,EAAe,IAAA,EAAM,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAA,EAAG,SAAA,EAAU,qBAAA,EAAsB,CAAA;AACrG;;ACVO,MAAM,QAAQ,MAAA,CAAO,MAAA,CAAO,WAAW,EAAE,MAAA,EAAQ,aAAa;;;;;"}

package/dist/components/Meter.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/Meter/index'
+export {}

package/dist/components/Meter.es.js

@@ -0,0 +1,167 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useId, use } from 'react';
+import { formatFullNumber } from '../utils/cost.es.js';
+import { T as Txt } from '../Txt-BtIGLRk1.js';
+import { c as cn } from '../cn-CQUhN5Jx.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DrsXZDAj.js';
+import { transitions, focusRing } from '../primitives/transitions.es.js';
+
+const MeterPartContext = createContext({
+  part: "bar",
+  format: formatFullNumber
+});
+const sourceColorClassName = [
+  "[&>:nth-child(5n+1)]:[--meter-source:var(--chart-share-1)]",
+  "[&>:nth-child(5n+2)]:[--meter-source:var(--chart-share-2)]",
+  "[&>:nth-child(5n+3)]:[--meter-source:var(--chart-share-3)]",
+  "[&>:nth-child(5n+4)]:[--meter-source:var(--chart-share-4)]",
+  "[&>:nth-child(5n)]:[--meter-source:var(--chart-share-5)]"
+].join(" ");
+
+function MeterKeyRow({ swatch, label, amount }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "meter-key-row", className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("size-2 rounded-xs", swatch) }),
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "caption", tone: "muted", className: "max-w-48 min-w-0 flex-1 truncate", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "ml-auto pl-4 text-foreground tabular-nums", children: amount })
+  ] });
+}
+
+function MeterSegment({ slot, grow, className }) {
+  const style = { "--meter-share": grow };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": slot,
+      className: cn("min-w-1 grow-(--meter-share) basis-0 rounded-full", className),
+      style
+    }
+  );
+}
+
+function readingOf(value, max) {
+  const used = Math.max(0, value);
+  const allowance = Math.max(0, max);
+  const over = Math.max(0, used - allowance);
+  const within = used - over;
+  return { used, allowance, over, within, rest: allowance - within };
+}
+function overAllowanceText({ used, allowance, over }, format) {
+  if (over <= 0) return void 0;
+  return `${format(used)} of ${format(allowance)}, ${format(over)} over`;
+}
+function MeterRoot({ value, max, children, format = formatFullNumber, className, ...props }) {
+  const reading = readingOf(value, max);
+  const meterProps = {
+    role: "meter",
+    "aria-valuemin": 0,
+    "aria-valuemax": reading.allowance,
+    "aria-valuenow": reading.within,
+    "aria-valuetext": overAllowanceText(reading, format),
+    "data-over": reading.over > 0 || void 0,
+    className: cn("group/meter relative flex h-1 w-full min-w-0", className),
+    ...props
+  };
+  if (children === void 0) {
+    return /* @__PURE__ */ jsx("span", { ...meterProps, children: /* @__PURE__ */ jsx(AllowanceBar, { reading }) });
+  }
+  return /* @__PURE__ */ jsx(SourcesMeter, { reading, format, meterProps, children });
+}
+function SourcesMeter({
+  reading,
+  format,
+  meterProps,
+  children
+}) {
+  const keyId = useId();
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxs(
+      TooltipTrigger,
+      {
+        delay: 0,
+        render: /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...meterProps,
+            tabIndex: 0,
+            "aria-describedby": keyId,
+            className: cn(
+              meterProps.className,
+              "rounded-full before:absolute before:inset-x-0 before:-inset-y-2",
+              focusRing
+            )
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx(AllowanceBar, { reading, className: cn(fadeOut, transitions.opacity, "motion-reduce:transition-none") }),
+          /* @__PURE__ */ jsx(SourceBar, { reading, format, children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(TooltipContent, { keepMounted: true, id: keyId, children: /* @__PURE__ */ jsx(MeterKey, { reading, format, children }) })
+  ] });
+}
+const fadeOut = "group-hover/meter:opacity-0 group-focus-visible/meter:opacity-0";
+const fadeIn = "opacity-0 group-hover/meter:opacity-100 group-focus-visible/meter:opacity-100";
+function AllowanceBar({ reading, className }) {
+  const { used, over, within, rest } = reading;
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "meter-bar", className: cn("flex size-full gap-0.5", className), children: [
+    within > 0 && /* @__PURE__ */ jsx(MeterSegment, { slot: "meter-used", grow: within, className: "bg-foreground" }),
+    over > 0 && /* @__PURE__ */ jsx(MeterSegment, { slot: "meter-over", grow: over, className: "bg-destructive-indicator" }),
+    (rest > 0 || used === 0) && /* @__PURE__ */ jsx(MeterSegment, { slot: "meter-rest", grow: rest || 1, className: "bg-fill-strong" })
+  ] });
+}
+function SourceBar({
+  reading,
+  format,
+  children
+}) {
+  const { used, over, rest } = reading;
+  const overShare = used > 0 ? over / used : 0;
+  const overStyle = { "--meter-over": `${overShare * 100}%` };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "meter-sources",
+      style: overStyle,
+      className: cn(
+        "absolute inset-0 flex gap-0.5",
+        fadeIn,
+        transitions.opacity,
+        "motion-reduce:transition-none",
+        sourceColorClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MeterPartContext, { value: { part: "bar", format }, children }),
+        rest > 0 && /* @__PURE__ */ jsx(MeterSegment, { slot: "meter-rest", grow: rest, className: "bg-fill-strong" }),
+        over > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-0 w-(--meter-over) rounded-r-full bg-destructive-indicator" }),
+          /* @__PURE__ */ jsx("span", { className: "absolute -inset-y-1 right-(--meter-over) w-0.5 rounded-full bg-foreground" })
+        ] })
+      ]
+    }
+  );
+}
+function MeterKey({
+  reading,
+  format,
+  children
+}) {
+  const { over, rest } = reading;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "meter-key", className: cn("flex min-w-40 flex-col gap-1", sourceColorClassName), children: [
+    /* @__PURE__ */ jsx(MeterPartContext, { value: { part: "key", format }, children }),
+    rest > 0 && /* @__PURE__ */ jsx(MeterKeyRow, { swatch: "bg-fill-strong", label: "Remaining", amount: format(rest) }),
+    over > 0 && /* @__PURE__ */ jsx(MeterKeyRow, { swatch: "bg-destructive-indicator", label: "Over allowance", amount: format(over) })
+  ] });
+}
+
+function MeterSource({ label, value }) {
+  const { part, format } = use(MeterPartContext);
+  if (part === "key") return /* @__PURE__ */ jsx(MeterKeyRow, { swatch: "bg-(--meter-source)", label, amount: format(value) });
+  return /* @__PURE__ */ jsx(MeterSegment, { slot: "meter-source", grow: Math.max(0, value), className: "bg-(--meter-source)" });
+}
+
+const Meter = Object.assign(MeterRoot, { Source: MeterSource });
+
+export { Meter, MeterSource };
+//# sourceMappingURL=Meter.es.js.map