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

package/dist/components/DataList.cjs.js

@@ -7,7 +7,7 @@ const dataListSkeleton = require('../data-list-skeleton-DGMTqeNP.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 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-BH24OVKh.cjs');
 const useDataListKeyboard = require('../use-data-list-keyboard-DF3tLe10.cjs');
 const layout_tabbedContainer = require('../layout/tabbed-container.cjs.js');
 

package/dist/components/DataList.es.js

@@ -4,7 +4,7 @@ export { D as DataListSkeleton, a as DataListSkeletonRows } from '../data-list-s
 import { jsx } from 'react/jsx-runtime';
 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-BOJB37dV.js';
 export { u as useDataListKeyboard } from '../use-data-list-keyboard-DFQr4t38.js';
 export { TabbedContainer } from '../layout/tabbed-container.es.js';
 

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":"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"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.es.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":[],"mappings":"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"}

package/dist/components/MetricsStackedBarChart.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const metricsStackedBarChart = require('../metrics-stacked-bar-chart-BijHfnOd.cjs');
+const metricsStackedBarChart = require('../metrics-stacked-bar-chart-BofJ8NDc.cjs');
 
 
 

package/dist/components/MetricsStackedBarChart.es.js

@@ -1,2 +1,2 @@
-export { M as MetricsStackedBarChart } from '../metrics-stacked-bar-chart-CdcENBLD.js';
+export { M as MetricsStackedBarChart } from '../metrics-stacked-bar-chart-DcxHznKw.js';
 //# sourceMappingURL=MetricsStackedBarChart.es.js.map

package/dist/components/Table.cjs.js

@@ -221,14 +221,22 @@ function TableFrame({ variant, size = "default", className, columnDividers, ...p
 function Table({ variant = "default", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(TableVariantContext, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(TableFrame, { variant, ...props }) });
 }
-function TableHeader({ className, ...props }) {
+const insideHeaderStyles = [
+  "[&>tr>th]:border-b [&>tr>th]:bg-background [&>tr>th]:bg-clip-padding",
+  "[&>tr>th:first-child]:rounded-tl-lg [&>tr>th:last-child]:rounded-tr-lg"
+];
+function TableHeader({ className, placement = "above", ...props }) {
   const variant = useTableVariant();
+  const inside = variant === "inset" && placement === "inside";
+  const headerPlacement = inside ? "inside" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "thead",
     {
       "data-slot": "table-header",
+      "data-placement": headerPlacement,
       className: utils_cn.cn(
         variant === "default" && "[&>tr]:h-table-header [&>tr]:border-b [&>tr]:border-border [&>tr]:bg-card",
+        inside && insideHeaderStyles,
         className
       ),
       ...props
@@ -266,6 +274,8 @@ const tableBodyStyles = [
   "[&>tr:first-child>td:first-child]:rounded-tl-lg",
   "[&>tr:first-child>td:last-child]:rounded-tr-lg",
   "[&>tr:first-child_[data-row-target]]:after:rounded-t-lg",
+  "[thead[data-placement=inside]+&>tr:first-child>td]:rounded-none",
+  "[thead[data-placement=inside]+&>tr:first-child_[data-row-target]]:after:rounded-none",
   "[&>tr:last-child_[data-row-target]]:after:rounded-b-lg",
   "[&_:is(a,button,input,select,textarea):not([data-row-target])]:relative",
   "[&_:is(a,button,input,select,textarea):not([data-row-target])]:z-1"