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

package/dist/{MetricsStackedBarChart-CDLE76IB.cjs.map → MetricsStackedBarChart-CJQF99sc.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MetricsStackedBarChart-CDLE76IB.cjs","names":["stackedSegmentBox","singleBarBox","Rectangle","useState","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useDragSelection","useMemo","compactNumber","CHART_MARGIN","_Fragment","ChartPlot","ComposedChart","activeIndex","CartesianGrid","CHART_GRID_PROPS","DragSelectionBand","timeXAxis","valueYAxis","dataMax","isWholeData","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","MetricsLineChartTooltip","Bar","LabelList","Line","ReferenceLine","CHART_TICK"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MetricsStackedBarChart-CJQF99sc.cjs","names":["stackedSegmentBox","singleBarBox","Rectangle","useState","useChartDefsId","cn","MetricsLineChartLegend","ChartSkeleton","useRef","useChartSize","useDragSelection","useMemo","compactNumber","CHART_MARGIN","_Fragment","ChartPlot","ComposedChart","activeIndex","CartesianGrid","CHART_GRID_PROPS","DragSelectionBand","timeXAxis","valueYAxis","dataMax","isWholeData","Tooltip","CHART_TOOLTIP_PROPS","ChartTooltipPosition","MetricsLineChartTooltip","Bar","LabelList","Line","ReferenceLine","CHART_TICK"],"sources":["../src/ds/components/MetricsStackedBarChart/metrics-stacked-bar-chart.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Bar, CartesianGrid, ComposedChart, LabelList, Line, Rectangle, ReferenceLine, Tooltip } from 'recharts';\nimport type { LabelProps } from 'recharts';\nimport { ChartSkeleton } from '@/ds/components/ChartSkeleton';\nimport type { MetricsLineChartSeries } from '@/ds/components/MetricsLineChart';\nimport { MetricsLineChartLegend, MetricsLineChartTooltip } from '@/ds/components/MetricsLineChart';\nimport { CHART_GRID_PROPS, CHART_TOOLTIP_PROPS, useChartSize } from '@/ds/primitives/chart-axes';\nimport type { ChartXLabels } from '@/ds/primitives/chart-axes';\nimport { singleBarBox, stackedSegmentBox } from '@/ds/primitives/chart-column-layout';\nimport type { SegmentBox } from '@/ds/primitives/chart-column-layout';\nimport {\n  CHART_TICK,\n  Y_AXIS_WIDTH,\n  compactNumber,\n  dataMax,\n  isWholeData,\n  timeXAxis,\n  valueYAxis,\n} from '@/ds/primitives/chart-frame';\nimport type { ChartHeight } from '@/ds/primitives/chart-frame';\nimport { CHART_AXIS_FONT_SIZE, CHART_MARGIN } from '@/ds/primitives/chart-layout';\nimport { ChartPlot } from '@/ds/primitives/chart-plot';\nimport { ChartTooltipPosition } from '@/ds/primitives/chart-tooltip-position';\nimport { DragSelectionBand, activeIndex, useDragSelection } from '@/ds/primitives/charts/drag-selection';\nimport type { DragSelectionRange } from '@/ds/primitives/charts/drag-selection';\nimport { useChartDefsId } from '@/ds/primitives/use-chart-defs-id';\nimport { cn } from '@/lib/utils';\n\n/** Corner radius of every segment; thin segments scale it down so they stay crisp rectangles. */\nconst RADIUS = 2;\n/** Pixels between stacked segments, so neighbouring segments read as separate blocks. */\nconst SEGMENT_GAP = 2;\n/** Opacity at the base of a segment's gradient (the top is fully opaque). */\nconst GRADIENT_BASE = 0.75;\n/** Single-series bars: translucent body under a solid cap that marks the value. */\nconst CAP_BODY = 0.55;\nconst CAP_HEIGHT = 3;\n/** Opacity of the other columns while one is hovered. */\nconst DIMMED = 0.3;\nconst COLUMN_LABEL_SPACE = 16;\n\ntype SegmentProps = {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  index?: number;\n  payload?: Record<string, unknown>;\n};\n\nfunction segmentShape({\n  fill,\n  color,\n  capped,\n  keys,\n  dataKey,\n}: {\n  fill: string;\n  color: string;\n  capped: boolean;\n  /** The column's data keys, bottom to top. */\n  keys: string[];\n  dataKey: string;\n}) {\n  return function Segment({ x = 0, width = 0, index, payload, ...geo }: SegmentProps) {\n    const values = keys.map(k => Number(payload?.[k]) || 0);\n    const self = keys.indexOf(dataKey);\n    const box = { y: geo.y ?? 0, height: Math.max(geo.height ?? 0, 0) };\n    // Every non-zero value gets a few readable pixels; zeros draw nothing.\n    const laid =\n      keys.length > 1\n        ? stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })\n        : singleBarBox(values[self] ?? 0, box);\n    if (!laid) return <g />;\n    const { y, height: h } = laid;\n    const radius = Math.min(RADIUS, Math.floor(h / 3));\n    // Dimming is a CSS rule keyed on `data-bucket` (see `HoverDim`), so hovering re-renders no bars.\n    const bucket = { 'data-bucket': index };\n\n    if (capped) {\n      return (\n        <g {...bucket}>\n          <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={color} fillOpacity={CAP_BODY} />\n          <Rectangle x={x} y={y} width={width} height={Math.min(CAP_HEIGHT, h)} radius={radius} fill={color} />\n        </g>\n      );\n    }\n    return (\n      <g {...bucket}>\n        <Rectangle x={x} y={y} width={width} height={h} radius={radius} fill={fill} />\n      </g>\n    );\n  };\n}\n\n/**\n * Dims every column outside the hovered one, or outside the range being dragged. Its own tiny\n * state, so a move only re-renders this <style> tag: with hundreds of buckets, re-rendering the\n * bars on each move froze the pointer.\n */\nfunction HoverDim({\n  scope,\n  setter,\n}: {\n  scope: string;\n  setter: { current: (range: DragSelectionRange | undefined) => void };\n}) {\n  const [lit, setLit] = useState<DragSelectionRange>();\n  useLayoutEffect(() => {\n    setter.current = setLit;\n  }, [setter]);\n  if (!lit) return null;\n  const columns = `[data-chart-scope=\"${scope}\"] [data-bucket]`;\n  const kept = Array.from(\n    { length: lit.end - lit.start + 1 },\n    (_, i) => `${columns}[data-bucket=\"${lit.start + i}\"]`,\n  ).join(',');\n  return <style>{`${columns}{opacity:${DIMMED}}${kept}{opacity:1}`}</style>;\n}\n\n/** A line drawn over the bars on its own scale, e.g. average wake time over cold starts. */\nexport type MetricsStackedBarChartOverlay = MetricsLineChartSeries & {\n  valueFormatter?: (value: number) => string;\n};\n\nexport type MetricsStackedBarChartProps = {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  /** Pixels, or `fill` to grow with the parent (a flex column, e.g. a card's content). */\n  height?: ChartHeight;\n  yDomain?: [number, number];\n  /** Formats tooltip values, and y-axis ticks unless `axisFormatter` is set. */\n  valueFormatter?: (value: number) => string;\n  /** Formats y-axis ticks, when they need a shorter form than the tooltip. */\n  axisFormatter?: (value: number) => string;\n  showLegend?: boolean;\n  referenceLine?: { value: number; label: string; color: string };\n  /**\n   * `gradient`: segments fade gently toward the base. Reads best for stacks.\n   * `capped`: a translucent body under a solid cap that marks the value. Reads best for one\n   * value per column.\n   */\n  variant?: 'gradient' | 'capped';\n  /**\n   * Set to `false` to drop the y-axis labels and let the plot span the card. The gridlines stay\n   * for relative scale; exact values come from the tooltip and the card's summary.\n   */\n  showYAxis?: boolean;\n  /** Adds a \"Total\" row (the column's height) to the tooltip. Defaults to on for stacks. */\n  showTotal?: boolean;\n  /** Row field printed under the x-axis. */\n  xKey?: string;\n  /** Row field with the bucket's start time (ms), which places labels on round clock times. */\n  timestampKey?: string;\n  /** `auto` fits as many labels as the width allows; `edges` prints only the first and last. */\n  xLabels?: ChartXLabels;\n  /** Row field for the tooltip heading (e.g. a longer date); defaults to the x-axis label. */\n  tooltipLabelKey?: string;\n  columnLabelKey?: string;\n  /** Widest a column gets, in pixels. Defaults to 28; raise it for dense strips of many thin columns. */\n  maxBarSize?: number;\n  /** Click a column (e.g. to open its traces); the plot shows a pointer cursor. */\n  onBucketClick?: (row: Record<string, unknown>, index: number) => void;\n  /**\n   * Drag across two or more columns to select them (e.g. to zoom into that time span); reports the\n   * first and last selected row indices. A press and release on one column stays a click.\n   */\n  onZoom?: (range: DragSelectionRange) => void;\n  /** One dashed line over the bars, on its own hidden scale (e.g. a duration over counts). */\n  overlay?: MetricsStackedBarChartOverlay;\n  /** Show a ghost of the chart while data loads, in the chart's own footprint. */\n  isLoading?: boolean;\n  className?: string;\n};\n\nexport function MetricsStackedBarChart(props: MetricsStackedBarChartProps) {\n  const { data, series, overlay, height = 210, showLegend = true, isLoading = false, className } = props;\n  const id = useChartDefsId();\n  const root = cn(height === 'fill' && 'flex min-h-0 flex-1 flex-col', className);\n  const legend = overlay ? [...series, { ...overlay, dashed: true }] : series;\n  // The legend stays while loading: it comes from the series, not the data.\n  return (\n    <div className={root} data-chart-scope={id}>\n      {showLegend && <MetricsLineChartLegend series={legend} className=\"mb-4\" />}\n      {isLoading ? <ChartSkeleton kind=\"bar\" height={height} /> : <BarPlot {...props} id={id} />}\n    </div>\n  );\n}\n\n/** The plot itself, once the data is in; `id` scopes its gradients and hover rule. */\nfunction BarPlot({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  valueFormatter,\n  axisFormatter,\n  referenceLine,\n  variant = 'gradient',\n  showYAxis = true,\n  showTotal = series.length > 1,\n  xKey = 'time',\n  timestampKey = 'tsMs',\n  xLabels = 'auto',\n  tooltipLabelKey,\n  columnLabelKey,\n  maxBarSize = 28,\n  onBucketClick,\n  onZoom,\n  overlay,\n  id,\n}: MetricsStackedBarChartProps & { id: string }) {\n  const setLit = useRef<(range: DragSelectionRange | undefined) => void>(() => {});\n  const { size, onResize, ref } = useChartSize();\n  // The dragged columns stay lit through the same rule as hover, so a drag never re-renders the bars.\n  const selection = useDragSelection({ onSelect: onZoom, onPreview: range => setLit.current(range) });\n\n  const keyList = series.map(s => s.dataKey).join('\\u0000');\n  const colorList = series.map(s => s.color).join('\\u0000');\n  // Stable shapes, so Recharts doesn't re-render every bar when the parent re-renders.\n  const shapes = useMemo(() => {\n    const keys = keyList.split('\\u0000');\n    const colors = colorList.split('\\u0000');\n    return keys.map((dataKey, i) =>\n      segmentShape({\n        fill: `url(#${id}-bar-${i})`,\n        color: colors[i] ?? '',\n        capped: variant === 'capped',\n        keys,\n        dataKey,\n      }),\n    );\n  }, [keyList, colorList, variant, id]);\n\n  const format = valueFormatter ?? compactNumber.format;\n  const plotWidth = size.width - (showYAxis ? Y_AXIS_WIDTH : 0);\n  const margin = columnLabelKey ? { ...CHART_MARGIN, top: CHART_MARGIN.top + COLUMN_LABEL_SPACE } : CHART_MARGIN;\n\n  return (\n    <>\n      <HoverDim scope={id} setter={setLit} />\n      <ChartPlot\n        height={height}\n        plotRef={ref}\n        onResize={onResize}\n        clickable={!!onBucketClick && !selection.enabled}\n        className={selection.className}\n      >\n        <ComposedChart\n          data={data}\n          margin={margin}\n          onMouseDown={selection.onMouseDown}\n          onMouseMove={state => {\n            if (selection.isDragging()) return selection.onMouseMove(state);\n            const index = activeIndex(state);\n            setLit.current(index === undefined ? undefined : { start: index, end: index });\n          }}\n          onMouseLeave={() => {\n            // Mid-drag the selection stays lit until the release.\n            if (!selection.isDragging()) setLit.current(undefined);\n          }}\n          onClick={state => {\n            if (selection.consumeReleaseClick()) return;\n            const i = activeIndex(state);\n            const row = i === undefined ? undefined : data[i];\n            if (onBucketClick && row && i !== undefined) onBucketClick(row, i);\n          }}\n        >\n          <defs>\n            {series.map((s, i) => (\n              <linearGradient key={s.dataKey} id={`${id}-bar-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor={s.color} stopOpacity={1} />\n                <stop offset=\"100%\" stopColor={s.color} stopOpacity={GRADIENT_BASE} />\n              </linearGradient>\n            ))}\n          </defs>\n          <CartesianGrid {...CHART_GRID_PROPS} />\n          {selection.enabled && <DragSelectionBand selection={selection} count={data.length} />}\n          {timeXAxis({ data, xKey, timestampKey, xLabels, plotWidth })}\n          {valueYAxis({\n            show: showYAxis,\n            size,\n            formatter: axisFormatter ?? format,\n            domain: yDomain,\n            // A reference line above the bars stays on the axis.\n            max: Math.max(\n              dataMax(\n                data,\n                series.map(s => s.dataKey),\n                true,\n              ),\n              referenceLine?.value ?? 0,\n            ),\n            integer: isWholeData(\n              data,\n              series.map(s => s.dataKey),\n            ),\n          })}\n          {overlay &&\n            valueYAxis({\n              id: 'overlay',\n              show: false,\n              size,\n              formatter: overlay.valueFormatter ?? compactNumber.format,\n              max: dataMax(data, [overlay.dataKey]),\n              integer: isWholeData(data, [overlay.dataKey]),\n              right: true,\n            })}\n          <Tooltip\n            {...CHART_TOOLTIP_PROPS}\n            cursor={false}\n            content={\n              <ChartTooltipPosition>\n                <MetricsLineChartTooltip\n                  formatValue={format}\n                  showTotal={showTotal && !overlay}\n                  labelKey={tooltipLabelKey}\n                  formatByKey={overlay?.valueFormatter ? { [overlay.dataKey]: overlay.valueFormatter } : undefined}\n                />\n              </ChartTooltipPosition>\n            }\n          />\n          {series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              stackId=\"1\"\n              fill={s.color}\n              maxBarSize={maxBarSize}\n              isAnimationActive={false}\n              shape={shapes[i]}\n            >\n              {columnLabelKey && (\n                <LabelList\n                  dataKey={columnLabelKey}\n                  content={(props: LabelProps) => (\n                    <ColumnLabel\n                      {...props}\n                      row={data[Number(props.index)]}\n                      keys={series.map(({ dataKey }) => dataKey)}\n                      self={i}\n                      color={s.color}\n                    />\n                  )}\n                />\n              )}\n            </Bar>\n          ))}\n          {overlay && (\n            <Line\n              yAxisId=\"overlay\"\n              type=\"monotone\"\n              dataKey={overlay.dataKey}\n              name={overlay.label}\n              stroke={overlay.color}\n              strokeWidth={1.75}\n              strokeDasharray=\"4 3\"\n              dot={false}\n              activeDot={{ r: 3.5, fill: overlay.color, stroke: 'var(--background)', strokeWidth: 2 }}\n              isAnimationActive={false}\n              connectNulls\n            />\n          )}\n          {referenceLine && (\n            <ReferenceLine\n              y={referenceLine.value}\n              ifOverflow=\"extendDomain\"\n              stroke={referenceLine.color}\n              strokeDasharray=\"4 4\"\n              label={{ value: referenceLine.label, position: 'insideTopLeft', ...CHART_TICK }}\n            />\n          )}\n        </ComposedChart>\n      </ChartPlot>\n    </>\n  );\n}\n\ntype ColumnLabelProps = LabelProps & {\n  row: MetricsStackedBarChartProps['data'][number] | undefined;\n  keys: string[];\n  self: number;\n  color: string;\n};\n\nfunction paintedTop(values: number[], self: number, box: SegmentBox) {\n  if (values.length > 1) return stackedSegmentBox(values, self, box, { gap: SEGMENT_GAP })?.y;\n  return singleBarBox(values[self] ?? 0, box)?.y;\n}\n\nfunction ColumnLabel({ x, y, width, height, value, row, keys, self, color }: ColumnLabelProps) {\n  if (value === undefined || value === null || value === '') return null;\n  const values = keys.map(key => Number(row?.[key]) || 0);\n  const topmost = values.findLastIndex(v => v > 0);\n  if (self !== (topmost === -1 ? keys.length - 1 : topmost)) return null;\n  const top = paintedTop(values, self, { y: Number(y), height: Math.max(Number(height), 0) }) ?? Number(y);\n  return (\n    <text\n      x={Number(x) + Number(width) / 2}\n      y={top - 6}\n      textAnchor=\"middle\"\n      fontSize={CHART_AXIS_FONT_SIZE}\n      fill={color}\n      className=\"tabular-nums\"\n    >\n      {String(value)}\n    </text>\n  );\n}\n"],"mappings":"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"}

package/dist/{MetricsTable-BSl81oNe.cjs → MetricsTable-CvMoo2vg.cjs}

@@ -1,7 +1,7 @@
+const require_tooltip = require("./tooltip-BsExuMO8.cjs");
 const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_tooltip = require("./tooltip-BiRLT3Th.cjs");
-const require_scroll_area = require("./scroll-area-BP4gPZ4G.cjs");
 const require_components_Skeleton = require("./components/Skeleton.cjs.js");
+const require_scroll_area = require("./scroll-area-BU_TorPW.cjs");
 const require_table_pagination = require("./table-pagination-lBp5luHp.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -329,4 +329,4 @@ Object.defineProperty(exports, "MetricsTable", {
 	}
 });
 
-//# sourceMappingURL=MetricsTable-BSl81oNe.cjs.map
+//# sourceMappingURL=MetricsTable-CvMoo2vg.cjs.map

package/dist/{MetricsTable-BSl81oNe.cjs.map → MetricsTable-CvMoo2vg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MetricsTable-BSl81oNe.cjs","names":["ArrowUpIcon","ArrowDownIcon","cn","useId","Tooltip","TooltipTrigger","TooltipContent","cn","Skeleton","useState","cn","ScrollArea","TablePagination"],"sources":["../src/ds/components/MetricsTable/metrics-table-header.tsx","../src/ds/components/MetricsTable/metrics-table-rows.tsx","../src/ds/components/MetricsTable/metrics-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { MetricsTableSortDirection } from './metrics-table-types';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SORT_ICON = { asc: ArrowUpIcon, desc: ArrowDownIcon };\n\nexport const FOCUS =\n  'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1';\n\n/**\n * A faint dotted underline under the label: the header explains itself on hover or focus. It\n * brightens while the header is hovered or focused, so it hints without pulling the eye at rest.\n */\nconst EXPLAINED =\n  'cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder';\n\ntype HeaderTextProps = {\n  header: string;\n  /** Underlines the label: the header has a tooltip. */\n  explained: boolean;\n};\n\n/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */\nfunction SortButton({\n  header,\n  explained,\n  sorted,\n  className,\n  ...props\n}: HeaderTextProps & { sorted?: MetricsTableSortDirection } & ComponentProps<'button'>) {\n  const SortIcon = sorted && SORT_ICON[sorted];\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={cn(\n        'group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground',\n        FOCUS,\n        className,\n      )}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n      {SortIcon && <SortIcon aria-hidden className=\"size-3\" />}\n    </button>\n  );\n}\n\n/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */\nfunction HeaderText({ header, explained, className, ...props }: HeaderTextProps & ComponentProps<'span'>) {\n  return (\n    <span\n      tabIndex={explained ? 0 : undefined}\n      {...props}\n      className={cn('group/header rounded whitespace-nowrap', FOCUS, className)}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n    </span>\n  );\n}\n\n/**\n * A column's header: a sort button when the column sorts, plain text otherwise. With a\n * `description`, the label itself shows it in a tooltip (no separate info icon), marked by a\n * dotted underline, and screen readers get it as the header's description.\n */\nexport function MetricsTableHeaderLabel({\n  header,\n  description,\n  sorted,\n  onSort,\n}: {\n  header: string;\n  description?: ReactNode;\n  sorted?: MetricsTableSortDirection;\n  /** Makes the header a sort button. */\n  onSort?: () => void;\n}) {\n  const descriptionId = useId();\n  const explained = Boolean(description);\n  const describedBy = explained ? descriptionId : undefined;\n  const trigger = onSort ? (\n    <SortButton header={header} explained={explained} sorted={sorted} onClick={onSort} aria-describedby={describedBy} />\n  ) : (\n    <HeaderText header={header} explained={explained} aria-describedby={describedBy} />\n  );\n\n  if (!explained) return trigger;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={trigger} />\n      {/* Kept mounted (hidden) while closed, so screen readers always get the text. */}\n      <TooltipContent id={descriptionId} keepMounted side=\"top\" className=\"max-w-72\">\n        {description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import type { KeyboardEvent, MouseEvent } from 'react';\nimport { FOCUS } from './metrics-table-header';\nimport type { MetricsTableColumn, MetricsTableProps } from './metrics-table-types';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * Full-width lines that fade over their last 6px. A hovered row covers the lines above and below\n * it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind\n * finds every class.\n */\nconst ROW_LINE =\n  'isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\n/**\n * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the\n * separator drawn in the row's last pixel, so text sits centered between the lines.\n */\nconst ROW_BOX = 'pt-1.75 pb-2 text-body-sm';\n\nconst ROW = cn('relative col-span-full grid grid-cols-subgrid items-center px-3', ROW_BOX, ROW_LINE);\n\n/** Skeleton widths for the first column's names, so loading rows don't look stamped. */\nconst SKELETON_NAMES = ['w-32', 'w-24', 'w-36', 'w-20', 'w-28'];\n\n/** Controls a cell can hold; their own clicks and keys don't count as the row's. */\nconst CONTROLS = 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]';\n\n/** Whether an event started on a control inside the row rather than on the row itself. */\nfunction fromControl(event: MouseEvent | KeyboardEvent) {\n  if (!(event.target instanceof Element)) return false;\n  const control = event.target.closest(CONTROLS);\n  return Boolean(control && event.currentTarget.contains(control));\n}\n\n/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */\nfunction skeletonBar<Row>(column: MetricsTableColumn<Row>, columnIndex: number, rowIndex: number) {\n  if (column.align === 'end') return 'right-0 w-10';\n  if (columnIndex > 0) return 'left-0 w-16';\n  return cn('left-0', SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);\n}\n\ntype RowBehavior<Row> = Pick<\n  MetricsTableProps<Row>,\n  'onRowClick' | 'onRowHover' | 'isRowDimmed' | 'isRowActive' | 'rowTitle'\n>;\n\nexport type MetricsTableBodyProps<Row> = RowBehavior<Row> & {\n  columns: MetricsTableColumn<Row>[];\n  /** The rows on the current page, sorted. */\n  rows: Row[];\n  getRowKey: (row: Row) => string;\n  empty: MetricsTableProps<Row>['empty'];\n  /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */\n  pageSize: number | undefined;\n  isLoading: boolean;\n};\n\n/** Skeleton rows while loading, the empty message without rows, else the page's rows. */\nexport function MetricsTableBody<Row>({\n  columns,\n  rows,\n  getRowKey,\n  empty,\n  pageSize,\n  isLoading,\n  ...behavior\n}: MetricsTableBodyProps<Row>) {\n  if (isLoading) {\n    return Array.from({ length: pageSize ?? 5 }, (_, i) => (\n      <MetricsTableSkeletonRow key={i} columns={columns} rowIndex={i} />\n    ));\n  }\n  if (rows.length === 0) {\n    if (pageSize) {\n      if (empty === undefined) return <MetricsTableFiller count={pageSize} />;\n      // Empty, a paged table keeps at least a full page's height, with the message in its middle.\n      // Both share one grid cell, so a message taller than the page still grows the row.\n      return (\n        <div role=\"row\" className=\"col-span-full grid *:col-start-1 *:row-start-1\">\n          <MetricsTableFiller count={pageSize} />\n          <p\n            role=\"cell\"\n            className=\"flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground\"\n          >\n            {empty}\n          </p>\n        </div>\n      );\n    }\n    if (empty === undefined) return null;\n    return (\n      <div role=\"row\" className=\"col-span-full\">\n        <p role=\"cell\" className=\"py-8 text-center text-body-sm text-muted-foreground\">\n          {empty}\n        </p>\n      </div>\n    );\n  }\n  return rows.map(row => <MetricsTableRow key={getRowKey(row)} row={row} columns={columns} {...behavior} />);\n}\n\n/**\n * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it\n * shows. Rows of the same box, not a fixed height, so it follows the row's text size.\n */\nexport function MetricsTableFiller({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <div aria-hidden data-slot=\"metrics-table-filler\" className=\"col-span-full\">\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={ROW_BOX}>\n          {'\\u200b'}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */\nfunction MetricsTableSkeletonRow<Row>({ columns, rowIndex }: { columns: MetricsTableColumn<Row>[]; rowIndex: number }) {\n  return (\n    <div role=\"row\" aria-busy className={ROW}>\n      {columns.map((column, columnIndex) => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('relative flex min-w-0', column.align === 'end' && 'justify-end')}\n        >\n          {/* A zero-width space gives the cell a real line box, so loading rows match loaded ones. */}\n          {'​'}\n          <Skeleton\n            className={cn('absolute top-1/2 h-3.5 -translate-y-1/2', skeletonBar(column, columnIndex, rowIndex))}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */\nfunction MetricsTableRow<Row>({\n  row,\n  columns,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n}: RowBehavior<Row> & { row: Row; columns: MetricsTableColumn<Row>[] }) {\n  const active = isRowActive?.(row) ?? false;\n  const dimmed = isRowDimmed?.(row) ?? false;\n\n  const handleClick = (event: MouseEvent) => {\n    if (!fromControl(event)) onRowClick?.(row);\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // Only while the row itself has focus, so a cell's link or input keeps its keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space would also scroll the page.\n    event.preventDefault();\n    onRowClick?.(row);\n  };\n\n  return (\n    <div\n      role=\"row\"\n      aria-current={active || undefined}\n      tabIndex={onRowClick ? 0 : undefined}\n      title={rowTitle?.(row)}\n      onClick={onRowClick ? handleClick : undefined}\n      onKeyDown={onRowClick ? handleKeyDown : undefined}\n      onMouseEnter={onRowHover ? () => onRowHover(row) : undefined}\n      onMouseLeave={onRowHover ? () => onRowHover(undefined) : undefined}\n      className={cn(\n        ROW,\n        'rounded text-foreground transition-opacity duration-150',\n        onRowClick && cn('cursor-pointer', FOCUS),\n        active && 'before:bg-fill-subtle',\n        dimmed && 'opacity-40',\n      )}\n    >\n      {columns.map(column => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('flex min-w-0 items-center', column.align === 'end' && 'justify-end text-right')}\n        >\n          {column.cell(row)}\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { useState } from 'react';\nimport { MetricsTableHeaderLabel } from './metrics-table-header';\nimport { MetricsTableBody, MetricsTableFiller } from './metrics-table-rows';\nimport type { MetricsTableColumn, MetricsTableProps, MetricsTableSort } from './metrics-table-types';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { TablePagination } from '@/ds/components/Table/table-pagination';\nimport { cn } from '@/lib/utils';\n\n/**\n * A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it\n * reads as part of the hover. Written out in full so Tailwind finds every class.\n */\nconst HEADER_LINE =\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;\n\n/**\n * Clicks on a column cycle its first direction, the other one, then off: off goes back to the\n * table's default order. Another column starts at its own first direction.\n */\nfunction nextSort<Row>(\n  current: MetricsTableSort | undefined,\n  column: MetricsTableColumn<Row>,\n): MetricsTableSort | undefined {\n  const first = column.firstDirection ?? 'desc';\n  if (current?.column !== column.id) return { column: column.id, direction: first };\n  if (current.direction !== first) return undefined;\n  return { column: column.id, direction: first === 'desc' ? 'asc' : 'desc' };\n}\n\n/** Ascending order of two present sort values. */\nfunction compareAscending(x: number | string, y: number | string) {\n  if (typeof x === 'number' && typeof y === 'number') return x - y;\n  return String(x).localeCompare(String(y));\n}\n\nfunction sortRows<Row>(rows: Row[], columns: MetricsTableColumn<Row>[], sort: MetricsTableSort | undefined) {\n  const by = columns.find(c => c.id === sort?.column)?.sortValue;\n  if (!sort || !by) return rows;\n  const sign = sort.direction === 'desc' ? -1 : 1;\n  // A row without a value goes last whichever way the column sorts.\n  return rows.toSorted((a, b) => {\n    const x = by(a);\n    const y = by(b);\n    if (x === undefined && y === undefined) return 0;\n    if (x === undefined) return 1;\n    if (y === undefined) return -1;\n    return sign * compareAscending(x, y);\n  });\n}\n\n/**\n * A column's grid track. Figures take a share of the spare width, like an HTML table's auto\n * layout: never narrower than their values, wider when the card has room.\n */\nconst columnWidth = <Row,>(column: MetricsTableColumn<Row>) =>\n  column.width ?? (column.align === 'end' ? 'minmax(max-content,1fr)' : 'max-content');\n\n/**\n * A table for the numbers behind a chart: one row per series or group, columns for its figures,\n * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row\n * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.\n * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.\n */\nexport function MetricsTable<Row>({\n  columns,\n  rows,\n  getRowKey,\n  sort,\n  defaultSort,\n  onSortChange,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n  empty,\n  pageSize,\n  isLoading = false,\n  'aria-label': ariaLabel,\n  className,\n}: MetricsTableProps<Row>) {\n  const [ownSort, setOwnSort] = useState(defaultSort);\n  const [page, setPage] = useState(0);\n  const current = sort ?? ownSort;\n  const sorted = sortRows(rows, columns, current);\n  const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n  // Fewer rows than before (a narrower filter) keeps the last page rather than an empty one.\n  const safePage = Math.min(page, Math.max(0, pageCount - 1));\n  const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;\n  const template = { gridTemplateColumns: columns.map(columnWidth).join(' ') };\n  const showsPagination = !isLoading && pageCount > 1;\n\n  const sortBy = (column: MetricsTableColumn<Row>) => {\n    const next = nextSort(current, column) ?? defaultSort;\n    setOwnSort(next);\n    setPage(0);\n    onSortChange?.(next);\n  };\n\n  return (\n    <div className={cn('grid min-w-0 gap-3', className)}>\n      {/* Narrower than its content (a phone), the table scrolls sideways instead of squeezing columns or the page. */}\n      <ScrollArea orientation=\"horizontal\">\n        {/* One set of column tracks for the header and every row (each row is a subgrid), so a column's\n            width follows its widest cell in the whole table and headers sit over their cells. */}\n        <div\n          role=\"table\"\n          aria-label={ariaLabel}\n          // min-content, not max-content: a long name would otherwise grow every `fr` column with it.\n          className=\"grid min-w-min gap-x-4\"\n          style={template}\n        >\n          <div\n            role=\"row\"\n            className={cn(\n              'relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder',\n              HEADER_LINE,\n            )}\n          >\n            {columns.map(column => {\n              const direction = current?.column === column.id ? current.direction : undefined;\n              return (\n                <div\n                  key={column.id}\n                  role=\"columnheader\"\n                  aria-sort={direction && ARIA_SORT[direction]}\n                  className={cn('flex min-w-0 items-center gap-1', column.align === 'end' && 'justify-end text-right')}\n                >\n                  <MetricsTableHeaderLabel\n                    header={column.header}\n                    description={column.description}\n                    sorted={direction}\n                    onSort={column.sortValue ? () => sortBy(column) : undefined}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <MetricsTableBody\n            columns={columns}\n            rows={shown}\n            getRowKey={getRowKey}\n            onRowClick={onRowClick}\n            onRowHover={onRowHover}\n            isRowDimmed={isRowDimmed}\n            isRowActive={isRowActive}\n            rowTitle={rowTitle}\n            empty={empty}\n            pageSize={pageSize}\n            isLoading={isLoading}\n          />\n        </div>\n        {/* Always a full page tall, so loading, paging and switching data don't move what's below. */}\n        {pageSize !== undefined && !isLoading && shown.length > 0 && (\n          <MetricsTableFiller count={pageSize - shown.length} />\n        )}\n      </ScrollArea>\n      {showsPagination && <TablePagination page={safePage} pageCount={pageCount} onPageChange={setPage} />}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MetricsTable-CvMoo2vg.cjs","names":["ArrowUpIcon","ArrowDownIcon","cn","useId","Tooltip","TooltipTrigger","TooltipContent","cn","Skeleton","useState","cn","ScrollArea","TablePagination"],"sources":["../src/ds/components/MetricsTable/metrics-table-header.tsx","../src/ds/components/MetricsTable/metrics-table-rows.tsx","../src/ds/components/MetricsTable/metrics-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { MetricsTableSortDirection } from './metrics-table-types';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SORT_ICON = { asc: ArrowUpIcon, desc: ArrowDownIcon };\n\nexport const FOCUS =\n  'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1';\n\n/**\n * A faint dotted underline under the label: the header explains itself on hover or focus. It\n * brightens while the header is hovered or focused, so it hints without pulling the eye at rest.\n */\nconst EXPLAINED =\n  'cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder';\n\ntype HeaderTextProps = {\n  header: string;\n  /** Underlines the label: the header has a tooltip. */\n  explained: boolean;\n};\n\n/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */\nfunction SortButton({\n  header,\n  explained,\n  sorted,\n  className,\n  ...props\n}: HeaderTextProps & { sorted?: MetricsTableSortDirection } & ComponentProps<'button'>) {\n  const SortIcon = sorted && SORT_ICON[sorted];\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={cn(\n        'group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground',\n        FOCUS,\n        className,\n      )}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n      {SortIcon && <SortIcon aria-hidden className=\"size-3\" />}\n    </button>\n  );\n}\n\n/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */\nfunction HeaderText({ header, explained, className, ...props }: HeaderTextProps & ComponentProps<'span'>) {\n  return (\n    <span\n      tabIndex={explained ? 0 : undefined}\n      {...props}\n      className={cn('group/header rounded whitespace-nowrap', FOCUS, className)}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n    </span>\n  );\n}\n\n/**\n * A column's header: a sort button when the column sorts, plain text otherwise. With a\n * `description`, the label itself shows it in a tooltip (no separate info icon), marked by a\n * dotted underline, and screen readers get it as the header's description.\n */\nexport function MetricsTableHeaderLabel({\n  header,\n  description,\n  sorted,\n  onSort,\n}: {\n  header: string;\n  description?: ReactNode;\n  sorted?: MetricsTableSortDirection;\n  /** Makes the header a sort button. */\n  onSort?: () => void;\n}) {\n  const descriptionId = useId();\n  const explained = Boolean(description);\n  const describedBy = explained ? descriptionId : undefined;\n  const trigger = onSort ? (\n    <SortButton header={header} explained={explained} sorted={sorted} onClick={onSort} aria-describedby={describedBy} />\n  ) : (\n    <HeaderText header={header} explained={explained} aria-describedby={describedBy} />\n  );\n\n  if (!explained) return trigger;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={trigger} />\n      {/* Kept mounted (hidden) while closed, so screen readers always get the text. */}\n      <TooltipContent id={descriptionId} keepMounted side=\"top\" className=\"max-w-72\">\n        {description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import type { KeyboardEvent, MouseEvent } from 'react';\nimport { FOCUS } from './metrics-table-header';\nimport type { MetricsTableColumn, MetricsTableProps } from './metrics-table-types';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * Full-width lines that fade over their last 6px. A hovered row covers the lines above and below\n * it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind\n * finds every class.\n */\nconst ROW_LINE =\n  'isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\n/**\n * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the\n * separator drawn in the row's last pixel, so text sits centered between the lines.\n */\nconst ROW_BOX = 'pt-1.75 pb-2 text-body-sm';\n\nconst ROW = cn('relative col-span-full grid grid-cols-subgrid items-center px-3', ROW_BOX, ROW_LINE);\n\n/** Skeleton widths for the first column's names, so loading rows don't look stamped. */\nconst SKELETON_NAMES = ['w-32', 'w-24', 'w-36', 'w-20', 'w-28'];\n\n/** Controls a cell can hold; their own clicks and keys don't count as the row's. */\nconst CONTROLS = 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]';\n\n/** Whether an event started on a control inside the row rather than on the row itself. */\nfunction fromControl(event: MouseEvent | KeyboardEvent) {\n  if (!(event.target instanceof Element)) return false;\n  const control = event.target.closest(CONTROLS);\n  return Boolean(control && event.currentTarget.contains(control));\n}\n\n/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */\nfunction skeletonBar<Row>(column: MetricsTableColumn<Row>, columnIndex: number, rowIndex: number) {\n  if (column.align === 'end') return 'right-0 w-10';\n  if (columnIndex > 0) return 'left-0 w-16';\n  return cn('left-0', SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);\n}\n\ntype RowBehavior<Row> = Pick<\n  MetricsTableProps<Row>,\n  'onRowClick' | 'onRowHover' | 'isRowDimmed' | 'isRowActive' | 'rowTitle'\n>;\n\nexport type MetricsTableBodyProps<Row> = RowBehavior<Row> & {\n  columns: MetricsTableColumn<Row>[];\n  /** The rows on the current page, sorted. */\n  rows: Row[];\n  getRowKey: (row: Row) => string;\n  empty: MetricsTableProps<Row>['empty'];\n  /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */\n  pageSize: number | undefined;\n  isLoading: boolean;\n};\n\n/** Skeleton rows while loading, the empty message without rows, else the page's rows. */\nexport function MetricsTableBody<Row>({\n  columns,\n  rows,\n  getRowKey,\n  empty,\n  pageSize,\n  isLoading,\n  ...behavior\n}: MetricsTableBodyProps<Row>) {\n  if (isLoading) {\n    return Array.from({ length: pageSize ?? 5 }, (_, i) => (\n      <MetricsTableSkeletonRow key={i} columns={columns} rowIndex={i} />\n    ));\n  }\n  if (rows.length === 0) {\n    if (pageSize) {\n      if (empty === undefined) return <MetricsTableFiller count={pageSize} />;\n      // Empty, a paged table keeps at least a full page's height, with the message in its middle.\n      // Both share one grid cell, so a message taller than the page still grows the row.\n      return (\n        <div role=\"row\" className=\"col-span-full grid *:col-start-1 *:row-start-1\">\n          <MetricsTableFiller count={pageSize} />\n          <p\n            role=\"cell\"\n            className=\"flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground\"\n          >\n            {empty}\n          </p>\n        </div>\n      );\n    }\n    if (empty === undefined) return null;\n    return (\n      <div role=\"row\" className=\"col-span-full\">\n        <p role=\"cell\" className=\"py-8 text-center text-body-sm text-muted-foreground\">\n          {empty}\n        </p>\n      </div>\n    );\n  }\n  return rows.map(row => <MetricsTableRow key={getRowKey(row)} row={row} columns={columns} {...behavior} />);\n}\n\n/**\n * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it\n * shows. Rows of the same box, not a fixed height, so it follows the row's text size.\n */\nexport function MetricsTableFiller({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <div aria-hidden data-slot=\"metrics-table-filler\" className=\"col-span-full\">\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={ROW_BOX}>\n          {'\\u200b'}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */\nfunction MetricsTableSkeletonRow<Row>({ columns, rowIndex }: { columns: MetricsTableColumn<Row>[]; rowIndex: number }) {\n  return (\n    <div role=\"row\" aria-busy className={ROW}>\n      {columns.map((column, columnIndex) => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('relative flex min-w-0', column.align === 'end' && 'justify-end')}\n        >\n          {/* A zero-width space gives the cell a real line box, so loading rows match loaded ones. */}\n          {'​'}\n          <Skeleton\n            className={cn('absolute top-1/2 h-3.5 -translate-y-1/2', skeletonBar(column, columnIndex, rowIndex))}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */\nfunction MetricsTableRow<Row>({\n  row,\n  columns,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n}: RowBehavior<Row> & { row: Row; columns: MetricsTableColumn<Row>[] }) {\n  const active = isRowActive?.(row) ?? false;\n  const dimmed = isRowDimmed?.(row) ?? false;\n\n  const handleClick = (event: MouseEvent) => {\n    if (!fromControl(event)) onRowClick?.(row);\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // Only while the row itself has focus, so a cell's link or input keeps its keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space would also scroll the page.\n    event.preventDefault();\n    onRowClick?.(row);\n  };\n\n  return (\n    <div\n      role=\"row\"\n      aria-current={active || undefined}\n      tabIndex={onRowClick ? 0 : undefined}\n      title={rowTitle?.(row)}\n      onClick={onRowClick ? handleClick : undefined}\n      onKeyDown={onRowClick ? handleKeyDown : undefined}\n      onMouseEnter={onRowHover ? () => onRowHover(row) : undefined}\n      onMouseLeave={onRowHover ? () => onRowHover(undefined) : undefined}\n      className={cn(\n        ROW,\n        'rounded text-foreground transition-opacity duration-150',\n        onRowClick && cn('cursor-pointer', FOCUS),\n        active && 'before:bg-fill-subtle',\n        dimmed && 'opacity-40',\n      )}\n    >\n      {columns.map(column => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('flex min-w-0 items-center', column.align === 'end' && 'justify-end text-right')}\n        >\n          {column.cell(row)}\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { useState } from 'react';\nimport { MetricsTableHeaderLabel } from './metrics-table-header';\nimport { MetricsTableBody, MetricsTableFiller } from './metrics-table-rows';\nimport type { MetricsTableColumn, MetricsTableProps, MetricsTableSort } from './metrics-table-types';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { TablePagination } from '@/ds/components/Table/table-pagination';\nimport { cn } from '@/lib/utils';\n\n/**\n * A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it\n * reads as part of the hover. Written out in full so Tailwind finds every class.\n */\nconst HEADER_LINE =\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;\n\n/**\n * Clicks on a column cycle its first direction, the other one, then off: off goes back to the\n * table's default order. Another column starts at its own first direction.\n */\nfunction nextSort<Row>(\n  current: MetricsTableSort | undefined,\n  column: MetricsTableColumn<Row>,\n): MetricsTableSort | undefined {\n  const first = column.firstDirection ?? 'desc';\n  if (current?.column !== column.id) return { column: column.id, direction: first };\n  if (current.direction !== first) return undefined;\n  return { column: column.id, direction: first === 'desc' ? 'asc' : 'desc' };\n}\n\n/** Ascending order of two present sort values. */\nfunction compareAscending(x: number | string, y: number | string) {\n  if (typeof x === 'number' && typeof y === 'number') return x - y;\n  return String(x).localeCompare(String(y));\n}\n\nfunction sortRows<Row>(rows: Row[], columns: MetricsTableColumn<Row>[], sort: MetricsTableSort | undefined) {\n  const by = columns.find(c => c.id === sort?.column)?.sortValue;\n  if (!sort || !by) return rows;\n  const sign = sort.direction === 'desc' ? -1 : 1;\n  // A row without a value goes last whichever way the column sorts.\n  return rows.toSorted((a, b) => {\n    const x = by(a);\n    const y = by(b);\n    if (x === undefined && y === undefined) return 0;\n    if (x === undefined) return 1;\n    if (y === undefined) return -1;\n    return sign * compareAscending(x, y);\n  });\n}\n\n/**\n * A column's grid track. Figures take a share of the spare width, like an HTML table's auto\n * layout: never narrower than their values, wider when the card has room.\n */\nconst columnWidth = <Row,>(column: MetricsTableColumn<Row>) =>\n  column.width ?? (column.align === 'end' ? 'minmax(max-content,1fr)' : 'max-content');\n\n/**\n * A table for the numbers behind a chart: one row per series or group, columns for its figures,\n * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row\n * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.\n * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.\n */\nexport function MetricsTable<Row>({\n  columns,\n  rows,\n  getRowKey,\n  sort,\n  defaultSort,\n  onSortChange,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n  empty,\n  pageSize,\n  isLoading = false,\n  'aria-label': ariaLabel,\n  className,\n}: MetricsTableProps<Row>) {\n  const [ownSort, setOwnSort] = useState(defaultSort);\n  const [page, setPage] = useState(0);\n  const current = sort ?? ownSort;\n  const sorted = sortRows(rows, columns, current);\n  const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n  // Fewer rows than before (a narrower filter) keeps the last page rather than an empty one.\n  const safePage = Math.min(page, Math.max(0, pageCount - 1));\n  const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;\n  const template = { gridTemplateColumns: columns.map(columnWidth).join(' ') };\n  const showsPagination = !isLoading && pageCount > 1;\n\n  const sortBy = (column: MetricsTableColumn<Row>) => {\n    const next = nextSort(current, column) ?? defaultSort;\n    setOwnSort(next);\n    setPage(0);\n    onSortChange?.(next);\n  };\n\n  return (\n    <div className={cn('grid min-w-0 gap-3', className)}>\n      {/* Narrower than its content (a phone), the table scrolls sideways instead of squeezing columns or the page. */}\n      <ScrollArea orientation=\"horizontal\">\n        {/* One set of column tracks for the header and every row (each row is a subgrid), so a column's\n            width follows its widest cell in the whole table and headers sit over their cells. */}\n        <div\n          role=\"table\"\n          aria-label={ariaLabel}\n          // min-content, not max-content: a long name would otherwise grow every `fr` column with it.\n          className=\"grid min-w-min gap-x-4\"\n          style={template}\n        >\n          <div\n            role=\"row\"\n            className={cn(\n              'relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder',\n              HEADER_LINE,\n            )}\n          >\n            {columns.map(column => {\n              const direction = current?.column === column.id ? current.direction : undefined;\n              return (\n                <div\n                  key={column.id}\n                  role=\"columnheader\"\n                  aria-sort={direction && ARIA_SORT[direction]}\n                  className={cn('flex min-w-0 items-center gap-1', column.align === 'end' && 'justify-end text-right')}\n                >\n                  <MetricsTableHeaderLabel\n                    header={column.header}\n                    description={column.description}\n                    sorted={direction}\n                    onSort={column.sortValue ? () => sortBy(column) : undefined}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <MetricsTableBody\n            columns={columns}\n            rows={shown}\n            getRowKey={getRowKey}\n            onRowClick={onRowClick}\n            onRowHover={onRowHover}\n            isRowDimmed={isRowDimmed}\n            isRowActive={isRowActive}\n            rowTitle={rowTitle}\n            empty={empty}\n            pageSize={pageSize}\n            isLoading={isLoading}\n          />\n        </div>\n        {/* Always a full page tall, so loading, paging and switching data don't move what's below. */}\n        {pageSize !== undefined && !isLoading && shown.length > 0 && (\n          <MetricsTableFiller count={pageSize - shown.length} />\n        )}\n      </ScrollArea>\n      {showsPagination && <TablePagination page={safePage} pageCount={pageCount} onPageChange={setPage} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/{MetricsTable-DID6LRoP.js → MetricsTable-DIjbD5Xk.js}

@@ -1,7 +1,7 @@
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "./tooltip-DJcze2VZ.js";
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "./tooltip-HzcLyGtV.js";
-import { t as ScrollArea } from "./scroll-area-C226l0v0.js";
 import { Skeleton } from "./components/Skeleton.es.js";
+import { t as ScrollArea } from "./scroll-area-9-S7wfSs.js";
 import { t as TablePagination } from "./table-pagination-S7ksCNCo.js";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -324,4 +324,4 @@ function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChang
 }
 export { MetricsTable as t };
 
-//# sourceMappingURL=MetricsTable-DID6LRoP.js.map
+//# sourceMappingURL=MetricsTable-DIjbD5Xk.js.map

package/dist/{MetricsTable-DID6LRoP.js.map → MetricsTable-DIjbD5Xk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MetricsTable-DID6LRoP.js","names":[],"sources":["../src/ds/components/MetricsTable/metrics-table-header.tsx","../src/ds/components/MetricsTable/metrics-table-rows.tsx","../src/ds/components/MetricsTable/metrics-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { MetricsTableSortDirection } from './metrics-table-types';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SORT_ICON = { asc: ArrowUpIcon, desc: ArrowDownIcon };\n\nexport const FOCUS =\n  'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1';\n\n/**\n * A faint dotted underline under the label: the header explains itself on hover or focus. It\n * brightens while the header is hovered or focused, so it hints without pulling the eye at rest.\n */\nconst EXPLAINED =\n  'cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder';\n\ntype HeaderTextProps = {\n  header: string;\n  /** Underlines the label: the header has a tooltip. */\n  explained: boolean;\n};\n\n/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */\nfunction SortButton({\n  header,\n  explained,\n  sorted,\n  className,\n  ...props\n}: HeaderTextProps & { sorted?: MetricsTableSortDirection } & ComponentProps<'button'>) {\n  const SortIcon = sorted && SORT_ICON[sorted];\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={cn(\n        'group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground',\n        FOCUS,\n        className,\n      )}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n      {SortIcon && <SortIcon aria-hidden className=\"size-3\" />}\n    </button>\n  );\n}\n\n/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */\nfunction HeaderText({ header, explained, className, ...props }: HeaderTextProps & ComponentProps<'span'>) {\n  return (\n    <span\n      tabIndex={explained ? 0 : undefined}\n      {...props}\n      className={cn('group/header rounded whitespace-nowrap', FOCUS, className)}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n    </span>\n  );\n}\n\n/**\n * A column's header: a sort button when the column sorts, plain text otherwise. With a\n * `description`, the label itself shows it in a tooltip (no separate info icon), marked by a\n * dotted underline, and screen readers get it as the header's description.\n */\nexport function MetricsTableHeaderLabel({\n  header,\n  description,\n  sorted,\n  onSort,\n}: {\n  header: string;\n  description?: ReactNode;\n  sorted?: MetricsTableSortDirection;\n  /** Makes the header a sort button. */\n  onSort?: () => void;\n}) {\n  const descriptionId = useId();\n  const explained = Boolean(description);\n  const describedBy = explained ? descriptionId : undefined;\n  const trigger = onSort ? (\n    <SortButton header={header} explained={explained} sorted={sorted} onClick={onSort} aria-describedby={describedBy} />\n  ) : (\n    <HeaderText header={header} explained={explained} aria-describedby={describedBy} />\n  );\n\n  if (!explained) return trigger;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={trigger} />\n      {/* Kept mounted (hidden) while closed, so screen readers always get the text. */}\n      <TooltipContent id={descriptionId} keepMounted side=\"top\" className=\"max-w-72\">\n        {description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import type { KeyboardEvent, MouseEvent } from 'react';\nimport { FOCUS } from './metrics-table-header';\nimport type { MetricsTableColumn, MetricsTableProps } from './metrics-table-types';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * Full-width lines that fade over their last 6px. A hovered row covers the lines above and below\n * it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind\n * finds every class.\n */\nconst ROW_LINE =\n  'isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\n/**\n * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the\n * separator drawn in the row's last pixel, so text sits centered between the lines.\n */\nconst ROW_BOX = 'pt-1.75 pb-2 text-body-sm';\n\nconst ROW = cn('relative col-span-full grid grid-cols-subgrid items-center px-3', ROW_BOX, ROW_LINE);\n\n/** Skeleton widths for the first column's names, so loading rows don't look stamped. */\nconst SKELETON_NAMES = ['w-32', 'w-24', 'w-36', 'w-20', 'w-28'];\n\n/** Controls a cell can hold; their own clicks and keys don't count as the row's. */\nconst CONTROLS = 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]';\n\n/** Whether an event started on a control inside the row rather than on the row itself. */\nfunction fromControl(event: MouseEvent | KeyboardEvent) {\n  if (!(event.target instanceof Element)) return false;\n  const control = event.target.closest(CONTROLS);\n  return Boolean(control && event.currentTarget.contains(control));\n}\n\n/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */\nfunction skeletonBar<Row>(column: MetricsTableColumn<Row>, columnIndex: number, rowIndex: number) {\n  if (column.align === 'end') return 'right-0 w-10';\n  if (columnIndex > 0) return 'left-0 w-16';\n  return cn('left-0', SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);\n}\n\ntype RowBehavior<Row> = Pick<\n  MetricsTableProps<Row>,\n  'onRowClick' | 'onRowHover' | 'isRowDimmed' | 'isRowActive' | 'rowTitle'\n>;\n\nexport type MetricsTableBodyProps<Row> = RowBehavior<Row> & {\n  columns: MetricsTableColumn<Row>[];\n  /** The rows on the current page, sorted. */\n  rows: Row[];\n  getRowKey: (row: Row) => string;\n  empty: MetricsTableProps<Row>['empty'];\n  /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */\n  pageSize: number | undefined;\n  isLoading: boolean;\n};\n\n/** Skeleton rows while loading, the empty message without rows, else the page's rows. */\nexport function MetricsTableBody<Row>({\n  columns,\n  rows,\n  getRowKey,\n  empty,\n  pageSize,\n  isLoading,\n  ...behavior\n}: MetricsTableBodyProps<Row>) {\n  if (isLoading) {\n    return Array.from({ length: pageSize ?? 5 }, (_, i) => (\n      <MetricsTableSkeletonRow key={i} columns={columns} rowIndex={i} />\n    ));\n  }\n  if (rows.length === 0) {\n    if (pageSize) {\n      if (empty === undefined) return <MetricsTableFiller count={pageSize} />;\n      // Empty, a paged table keeps at least a full page's height, with the message in its middle.\n      // Both share one grid cell, so a message taller than the page still grows the row.\n      return (\n        <div role=\"row\" className=\"col-span-full grid *:col-start-1 *:row-start-1\">\n          <MetricsTableFiller count={pageSize} />\n          <p\n            role=\"cell\"\n            className=\"flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground\"\n          >\n            {empty}\n          </p>\n        </div>\n      );\n    }\n    if (empty === undefined) return null;\n    return (\n      <div role=\"row\" className=\"col-span-full\">\n        <p role=\"cell\" className=\"py-8 text-center text-body-sm text-muted-foreground\">\n          {empty}\n        </p>\n      </div>\n    );\n  }\n  return rows.map(row => <MetricsTableRow key={getRowKey(row)} row={row} columns={columns} {...behavior} />);\n}\n\n/**\n * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it\n * shows. Rows of the same box, not a fixed height, so it follows the row's text size.\n */\nexport function MetricsTableFiller({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <div aria-hidden data-slot=\"metrics-table-filler\" className=\"col-span-full\">\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={ROW_BOX}>\n          {'\\u200b'}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */\nfunction MetricsTableSkeletonRow<Row>({ columns, rowIndex }: { columns: MetricsTableColumn<Row>[]; rowIndex: number }) {\n  return (\n    <div role=\"row\" aria-busy className={ROW}>\n      {columns.map((column, columnIndex) => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('relative flex min-w-0', column.align === 'end' && 'justify-end')}\n        >\n          {/* A zero-width space gives the cell a real line box, so loading rows match loaded ones. */}\n          {'​'}\n          <Skeleton\n            className={cn('absolute top-1/2 h-3.5 -translate-y-1/2', skeletonBar(column, columnIndex, rowIndex))}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */\nfunction MetricsTableRow<Row>({\n  row,\n  columns,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n}: RowBehavior<Row> & { row: Row; columns: MetricsTableColumn<Row>[] }) {\n  const active = isRowActive?.(row) ?? false;\n  const dimmed = isRowDimmed?.(row) ?? false;\n\n  const handleClick = (event: MouseEvent) => {\n    if (!fromControl(event)) onRowClick?.(row);\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // Only while the row itself has focus, so a cell's link or input keeps its keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space would also scroll the page.\n    event.preventDefault();\n    onRowClick?.(row);\n  };\n\n  return (\n    <div\n      role=\"row\"\n      aria-current={active || undefined}\n      tabIndex={onRowClick ? 0 : undefined}\n      title={rowTitle?.(row)}\n      onClick={onRowClick ? handleClick : undefined}\n      onKeyDown={onRowClick ? handleKeyDown : undefined}\n      onMouseEnter={onRowHover ? () => onRowHover(row) : undefined}\n      onMouseLeave={onRowHover ? () => onRowHover(undefined) : undefined}\n      className={cn(\n        ROW,\n        'rounded text-foreground transition-opacity duration-150',\n        onRowClick && cn('cursor-pointer', FOCUS),\n        active && 'before:bg-fill-subtle',\n        dimmed && 'opacity-40',\n      )}\n    >\n      {columns.map(column => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('flex min-w-0 items-center', column.align === 'end' && 'justify-end text-right')}\n        >\n          {column.cell(row)}\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { useState } from 'react';\nimport { MetricsTableHeaderLabel } from './metrics-table-header';\nimport { MetricsTableBody, MetricsTableFiller } from './metrics-table-rows';\nimport type { MetricsTableColumn, MetricsTableProps, MetricsTableSort } from './metrics-table-types';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { TablePagination } from '@/ds/components/Table/table-pagination';\nimport { cn } from '@/lib/utils';\n\n/**\n * A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it\n * reads as part of the hover. Written out in full so Tailwind finds every class.\n */\nconst HEADER_LINE =\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;\n\n/**\n * Clicks on a column cycle its first direction, the other one, then off: off goes back to the\n * table's default order. Another column starts at its own first direction.\n */\nfunction nextSort<Row>(\n  current: MetricsTableSort | undefined,\n  column: MetricsTableColumn<Row>,\n): MetricsTableSort | undefined {\n  const first = column.firstDirection ?? 'desc';\n  if (current?.column !== column.id) return { column: column.id, direction: first };\n  if (current.direction !== first) return undefined;\n  return { column: column.id, direction: first === 'desc' ? 'asc' : 'desc' };\n}\n\n/** Ascending order of two present sort values. */\nfunction compareAscending(x: number | string, y: number | string) {\n  if (typeof x === 'number' && typeof y === 'number') return x - y;\n  return String(x).localeCompare(String(y));\n}\n\nfunction sortRows<Row>(rows: Row[], columns: MetricsTableColumn<Row>[], sort: MetricsTableSort | undefined) {\n  const by = columns.find(c => c.id === sort?.column)?.sortValue;\n  if (!sort || !by) return rows;\n  const sign = sort.direction === 'desc' ? -1 : 1;\n  // A row without a value goes last whichever way the column sorts.\n  return rows.toSorted((a, b) => {\n    const x = by(a);\n    const y = by(b);\n    if (x === undefined && y === undefined) return 0;\n    if (x === undefined) return 1;\n    if (y === undefined) return -1;\n    return sign * compareAscending(x, y);\n  });\n}\n\n/**\n * A column's grid track. Figures take a share of the spare width, like an HTML table's auto\n * layout: never narrower than their values, wider when the card has room.\n */\nconst columnWidth = <Row,>(column: MetricsTableColumn<Row>) =>\n  column.width ?? (column.align === 'end' ? 'minmax(max-content,1fr)' : 'max-content');\n\n/**\n * A table for the numbers behind a chart: one row per series or group, columns for its figures,\n * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row\n * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.\n * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.\n */\nexport function MetricsTable<Row>({\n  columns,\n  rows,\n  getRowKey,\n  sort,\n  defaultSort,\n  onSortChange,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n  empty,\n  pageSize,\n  isLoading = false,\n  'aria-label': ariaLabel,\n  className,\n}: MetricsTableProps<Row>) {\n  const [ownSort, setOwnSort] = useState(defaultSort);\n  const [page, setPage] = useState(0);\n  const current = sort ?? ownSort;\n  const sorted = sortRows(rows, columns, current);\n  const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n  // Fewer rows than before (a narrower filter) keeps the last page rather than an empty one.\n  const safePage = Math.min(page, Math.max(0, pageCount - 1));\n  const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;\n  const template = { gridTemplateColumns: columns.map(columnWidth).join(' ') };\n  const showsPagination = !isLoading && pageCount > 1;\n\n  const sortBy = (column: MetricsTableColumn<Row>) => {\n    const next = nextSort(current, column) ?? defaultSort;\n    setOwnSort(next);\n    setPage(0);\n    onSortChange?.(next);\n  };\n\n  return (\n    <div className={cn('grid min-w-0 gap-3', className)}>\n      {/* Narrower than its content (a phone), the table scrolls sideways instead of squeezing columns or the page. */}\n      <ScrollArea orientation=\"horizontal\">\n        {/* One set of column tracks for the header and every row (each row is a subgrid), so a column's\n            width follows its widest cell in the whole table and headers sit over their cells. */}\n        <div\n          role=\"table\"\n          aria-label={ariaLabel}\n          // min-content, not max-content: a long name would otherwise grow every `fr` column with it.\n          className=\"grid min-w-min gap-x-4\"\n          style={template}\n        >\n          <div\n            role=\"row\"\n            className={cn(\n              'relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder',\n              HEADER_LINE,\n            )}\n          >\n            {columns.map(column => {\n              const direction = current?.column === column.id ? current.direction : undefined;\n              return (\n                <div\n                  key={column.id}\n                  role=\"columnheader\"\n                  aria-sort={direction && ARIA_SORT[direction]}\n                  className={cn('flex min-w-0 items-center gap-1', column.align === 'end' && 'justify-end text-right')}\n                >\n                  <MetricsTableHeaderLabel\n                    header={column.header}\n                    description={column.description}\n                    sorted={direction}\n                    onSort={column.sortValue ? () => sortBy(column) : undefined}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <MetricsTableBody\n            columns={columns}\n            rows={shown}\n            getRowKey={getRowKey}\n            onRowClick={onRowClick}\n            onRowHover={onRowHover}\n            isRowDimmed={isRowDimmed}\n            isRowActive={isRowActive}\n            rowTitle={rowTitle}\n            empty={empty}\n            pageSize={pageSize}\n            isLoading={isLoading}\n          />\n        </div>\n        {/* Always a full page tall, so loading, paging and switching data don't move what's below. */}\n        {pageSize !== undefined && !isLoading && shown.length > 0 && (\n          <MetricsTableFiller count={pageSize - shown.length} />\n        )}\n      </ScrollArea>\n      {showsPagination && <TablePagination page={safePage} pageCount={pageCount} onPageChange={setPage} />}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MetricsTable-DIjbD5Xk.js","names":[],"sources":["../src/ds/components/MetricsTable/metrics-table-header.tsx","../src/ds/components/MetricsTable/metrics-table-rows.tsx","../src/ds/components/MetricsTable/metrics-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { MetricsTableSortDirection } from './metrics-table-types';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SORT_ICON = { asc: ArrowUpIcon, desc: ArrowDownIcon };\n\nexport const FOCUS =\n  'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1';\n\n/**\n * A faint dotted underline under the label: the header explains itself on hover or focus. It\n * brightens while the header is hovered or focused, so it hints without pulling the eye at rest.\n */\nconst EXPLAINED =\n  'cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder';\n\ntype HeaderTextProps = {\n  header: string;\n  /** Underlines the label: the header has a tooltip. */\n  explained: boolean;\n};\n\n/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */\nfunction SortButton({\n  header,\n  explained,\n  sorted,\n  className,\n  ...props\n}: HeaderTextProps & { sorted?: MetricsTableSortDirection } & ComponentProps<'button'>) {\n  const SortIcon = sorted && SORT_ICON[sorted];\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={cn(\n        'group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground',\n        FOCUS,\n        className,\n      )}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n      {SortIcon && <SortIcon aria-hidden className=\"size-3\" />}\n    </button>\n  );\n}\n\n/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */\nfunction HeaderText({ header, explained, className, ...props }: HeaderTextProps & ComponentProps<'span'>) {\n  return (\n    <span\n      tabIndex={explained ? 0 : undefined}\n      {...props}\n      className={cn('group/header rounded whitespace-nowrap', FOCUS, className)}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n    </span>\n  );\n}\n\n/**\n * A column's header: a sort button when the column sorts, plain text otherwise. With a\n * `description`, the label itself shows it in a tooltip (no separate info icon), marked by a\n * dotted underline, and screen readers get it as the header's description.\n */\nexport function MetricsTableHeaderLabel({\n  header,\n  description,\n  sorted,\n  onSort,\n}: {\n  header: string;\n  description?: ReactNode;\n  sorted?: MetricsTableSortDirection;\n  /** Makes the header a sort button. */\n  onSort?: () => void;\n}) {\n  const descriptionId = useId();\n  const explained = Boolean(description);\n  const describedBy = explained ? descriptionId : undefined;\n  const trigger = onSort ? (\n    <SortButton header={header} explained={explained} sorted={sorted} onClick={onSort} aria-describedby={describedBy} />\n  ) : (\n    <HeaderText header={header} explained={explained} aria-describedby={describedBy} />\n  );\n\n  if (!explained) return trigger;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={trigger} />\n      {/* Kept mounted (hidden) while closed, so screen readers always get the text. */}\n      <TooltipContent id={descriptionId} keepMounted side=\"top\" className=\"max-w-72\">\n        {description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import type { KeyboardEvent, MouseEvent } from 'react';\nimport { FOCUS } from './metrics-table-header';\nimport type { MetricsTableColumn, MetricsTableProps } from './metrics-table-types';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * Full-width lines that fade over their last 6px. A hovered row covers the lines above and below\n * it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind\n * finds every class.\n */\nconst ROW_LINE =\n  'isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\n/**\n * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the\n * separator drawn in the row's last pixel, so text sits centered between the lines.\n */\nconst ROW_BOX = 'pt-1.75 pb-2 text-body-sm';\n\nconst ROW = cn('relative col-span-full grid grid-cols-subgrid items-center px-3', ROW_BOX, ROW_LINE);\n\n/** Skeleton widths for the first column's names, so loading rows don't look stamped. */\nconst SKELETON_NAMES = ['w-32', 'w-24', 'w-36', 'w-20', 'w-28'];\n\n/** Controls a cell can hold; their own clicks and keys don't count as the row's. */\nconst CONTROLS = 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]';\n\n/** Whether an event started on a control inside the row rather than on the row itself. */\nfunction fromControl(event: MouseEvent | KeyboardEvent) {\n  if (!(event.target instanceof Element)) return false;\n  const control = event.target.closest(CONTROLS);\n  return Boolean(control && event.currentTarget.contains(control));\n}\n\n/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */\nfunction skeletonBar<Row>(column: MetricsTableColumn<Row>, columnIndex: number, rowIndex: number) {\n  if (column.align === 'end') return 'right-0 w-10';\n  if (columnIndex > 0) return 'left-0 w-16';\n  return cn('left-0', SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);\n}\n\ntype RowBehavior<Row> = Pick<\n  MetricsTableProps<Row>,\n  'onRowClick' | 'onRowHover' | 'isRowDimmed' | 'isRowActive' | 'rowTitle'\n>;\n\nexport type MetricsTableBodyProps<Row> = RowBehavior<Row> & {\n  columns: MetricsTableColumn<Row>[];\n  /** The rows on the current page, sorted. */\n  rows: Row[];\n  getRowKey: (row: Row) => string;\n  empty: MetricsTableProps<Row>['empty'];\n  /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */\n  pageSize: number | undefined;\n  isLoading: boolean;\n};\n\n/** Skeleton rows while loading, the empty message without rows, else the page's rows. */\nexport function MetricsTableBody<Row>({\n  columns,\n  rows,\n  getRowKey,\n  empty,\n  pageSize,\n  isLoading,\n  ...behavior\n}: MetricsTableBodyProps<Row>) {\n  if (isLoading) {\n    return Array.from({ length: pageSize ?? 5 }, (_, i) => (\n      <MetricsTableSkeletonRow key={i} columns={columns} rowIndex={i} />\n    ));\n  }\n  if (rows.length === 0) {\n    if (pageSize) {\n      if (empty === undefined) return <MetricsTableFiller count={pageSize} />;\n      // Empty, a paged table keeps at least a full page's height, with the message in its middle.\n      // Both share one grid cell, so a message taller than the page still grows the row.\n      return (\n        <div role=\"row\" className=\"col-span-full grid *:col-start-1 *:row-start-1\">\n          <MetricsTableFiller count={pageSize} />\n          <p\n            role=\"cell\"\n            className=\"flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground\"\n          >\n            {empty}\n          </p>\n        </div>\n      );\n    }\n    if (empty === undefined) return null;\n    return (\n      <div role=\"row\" className=\"col-span-full\">\n        <p role=\"cell\" className=\"py-8 text-center text-body-sm text-muted-foreground\">\n          {empty}\n        </p>\n      </div>\n    );\n  }\n  return rows.map(row => <MetricsTableRow key={getRowKey(row)} row={row} columns={columns} {...behavior} />);\n}\n\n/**\n * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it\n * shows. Rows of the same box, not a fixed height, so it follows the row's text size.\n */\nexport function MetricsTableFiller({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <div aria-hidden data-slot=\"metrics-table-filler\" className=\"col-span-full\">\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={ROW_BOX}>\n          {'\\u200b'}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */\nfunction MetricsTableSkeletonRow<Row>({ columns, rowIndex }: { columns: MetricsTableColumn<Row>[]; rowIndex: number }) {\n  return (\n    <div role=\"row\" aria-busy className={ROW}>\n      {columns.map((column, columnIndex) => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('relative flex min-w-0', column.align === 'end' && 'justify-end')}\n        >\n          {/* A zero-width space gives the cell a real line box, so loading rows match loaded ones. */}\n          {'​'}\n          <Skeleton\n            className={cn('absolute top-1/2 h-3.5 -translate-y-1/2', skeletonBar(column, columnIndex, rowIndex))}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */\nfunction MetricsTableRow<Row>({\n  row,\n  columns,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n}: RowBehavior<Row> & { row: Row; columns: MetricsTableColumn<Row>[] }) {\n  const active = isRowActive?.(row) ?? false;\n  const dimmed = isRowDimmed?.(row) ?? false;\n\n  const handleClick = (event: MouseEvent) => {\n    if (!fromControl(event)) onRowClick?.(row);\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // Only while the row itself has focus, so a cell's link or input keeps its keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space would also scroll the page.\n    event.preventDefault();\n    onRowClick?.(row);\n  };\n\n  return (\n    <div\n      role=\"row\"\n      aria-current={active || undefined}\n      tabIndex={onRowClick ? 0 : undefined}\n      title={rowTitle?.(row)}\n      onClick={onRowClick ? handleClick : undefined}\n      onKeyDown={onRowClick ? handleKeyDown : undefined}\n      onMouseEnter={onRowHover ? () => onRowHover(row) : undefined}\n      onMouseLeave={onRowHover ? () => onRowHover(undefined) : undefined}\n      className={cn(\n        ROW,\n        'rounded text-foreground transition-opacity duration-150',\n        onRowClick && cn('cursor-pointer', FOCUS),\n        active && 'before:bg-fill-subtle',\n        dimmed && 'opacity-40',\n      )}\n    >\n      {columns.map(column => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('flex min-w-0 items-center', column.align === 'end' && 'justify-end text-right')}\n        >\n          {column.cell(row)}\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { useState } from 'react';\nimport { MetricsTableHeaderLabel } from './metrics-table-header';\nimport { MetricsTableBody, MetricsTableFiller } from './metrics-table-rows';\nimport type { MetricsTableColumn, MetricsTableProps, MetricsTableSort } from './metrics-table-types';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { TablePagination } from '@/ds/components/Table/table-pagination';\nimport { cn } from '@/lib/utils';\n\n/**\n * A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it\n * reads as part of the hover. Written out in full so Tailwind finds every class.\n */\nconst HEADER_LINE =\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;\n\n/**\n * Clicks on a column cycle its first direction, the other one, then off: off goes back to the\n * table's default order. Another column starts at its own first direction.\n */\nfunction nextSort<Row>(\n  current: MetricsTableSort | undefined,\n  column: MetricsTableColumn<Row>,\n): MetricsTableSort | undefined {\n  const first = column.firstDirection ?? 'desc';\n  if (current?.column !== column.id) return { column: column.id, direction: first };\n  if (current.direction !== first) return undefined;\n  return { column: column.id, direction: first === 'desc' ? 'asc' : 'desc' };\n}\n\n/** Ascending order of two present sort values. */\nfunction compareAscending(x: number | string, y: number | string) {\n  if (typeof x === 'number' && typeof y === 'number') return x - y;\n  return String(x).localeCompare(String(y));\n}\n\nfunction sortRows<Row>(rows: Row[], columns: MetricsTableColumn<Row>[], sort: MetricsTableSort | undefined) {\n  const by = columns.find(c => c.id === sort?.column)?.sortValue;\n  if (!sort || !by) return rows;\n  const sign = sort.direction === 'desc' ? -1 : 1;\n  // A row without a value goes last whichever way the column sorts.\n  return rows.toSorted((a, b) => {\n    const x = by(a);\n    const y = by(b);\n    if (x === undefined && y === undefined) return 0;\n    if (x === undefined) return 1;\n    if (y === undefined) return -1;\n    return sign * compareAscending(x, y);\n  });\n}\n\n/**\n * A column's grid track. Figures take a share of the spare width, like an HTML table's auto\n * layout: never narrower than their values, wider when the card has room.\n */\nconst columnWidth = <Row,>(column: MetricsTableColumn<Row>) =>\n  column.width ?? (column.align === 'end' ? 'minmax(max-content,1fr)' : 'max-content');\n\n/**\n * A table for the numbers behind a chart: one row per series or group, columns for its figures,\n * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row\n * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.\n * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.\n */\nexport function MetricsTable<Row>({\n  columns,\n  rows,\n  getRowKey,\n  sort,\n  defaultSort,\n  onSortChange,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n  empty,\n  pageSize,\n  isLoading = false,\n  'aria-label': ariaLabel,\n  className,\n}: MetricsTableProps<Row>) {\n  const [ownSort, setOwnSort] = useState(defaultSort);\n  const [page, setPage] = useState(0);\n  const current = sort ?? ownSort;\n  const sorted = sortRows(rows, columns, current);\n  const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n  // Fewer rows than before (a narrower filter) keeps the last page rather than an empty one.\n  const safePage = Math.min(page, Math.max(0, pageCount - 1));\n  const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;\n  const template = { gridTemplateColumns: columns.map(columnWidth).join(' ') };\n  const showsPagination = !isLoading && pageCount > 1;\n\n  const sortBy = (column: MetricsTableColumn<Row>) => {\n    const next = nextSort(current, column) ?? defaultSort;\n    setOwnSort(next);\n    setPage(0);\n    onSortChange?.(next);\n  };\n\n  return (\n    <div className={cn('grid min-w-0 gap-3', className)}>\n      {/* Narrower than its content (a phone), the table scrolls sideways instead of squeezing columns or the page. */}\n      <ScrollArea orientation=\"horizontal\">\n        {/* One set of column tracks for the header and every row (each row is a subgrid), so a column's\n            width follows its widest cell in the whole table and headers sit over their cells. */}\n        <div\n          role=\"table\"\n          aria-label={ariaLabel}\n          // min-content, not max-content: a long name would otherwise grow every `fr` column with it.\n          className=\"grid min-w-min gap-x-4\"\n          style={template}\n        >\n          <div\n            role=\"row\"\n            className={cn(\n              'relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder',\n              HEADER_LINE,\n            )}\n          >\n            {columns.map(column => {\n              const direction = current?.column === column.id ? current.direction : undefined;\n              return (\n                <div\n                  key={column.id}\n                  role=\"columnheader\"\n                  aria-sort={direction && ARIA_SORT[direction]}\n                  className={cn('flex min-w-0 items-center gap-1', column.align === 'end' && 'justify-end text-right')}\n                >\n                  <MetricsTableHeaderLabel\n                    header={column.header}\n                    description={column.description}\n                    sorted={direction}\n                    onSort={column.sortValue ? () => sortBy(column) : undefined}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <MetricsTableBody\n            columns={columns}\n            rows={shown}\n            getRowKey={getRowKey}\n            onRowClick={onRowClick}\n            onRowHover={onRowHover}\n            isRowDimmed={isRowDimmed}\n            isRowActive={isRowActive}\n            rowTitle={rowTitle}\n            empty={empty}\n            pageSize={pageSize}\n            isLoading={isLoading}\n          />\n        </div>\n        {/* Always a full page tall, so loading, paging and switching data don't move what's below. */}\n        {pageSize !== undefined && !isLoading && shown.length > 0 && (\n          <MetricsTableFiller count={pageSize - shown.length} />\n        )}\n      </ScrollArea>\n      {showsPagination && <TablePagination page={safePage} pageCount={pageCount} onPageChange={setPage} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/{Notice-JZ7SW7q6.cjs → Notice-B_KjMmA6.cjs}

@@ -1,5 +1,5 @@
-require('./Notice.css');const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_Button = require("./Button-DLcMcuUL.cjs");
+require('./Notice.css');const require_Button = require("./Button-BfICfyxD.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
@@ -114,4 +114,4 @@ Object.defineProperty(exports, "Notice", {
 	}
 });
 
-//# sourceMappingURL=Notice-JZ7SW7q6.cjs.map
+//# sourceMappingURL=Notice-B_KjMmA6.cjs.map

package/dist/{Notice-JZ7SW7q6.cjs.map → Notice-B_KjMmA6.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Notice-JZ7SW7q6.cjs","names":["isValidElement","useRender","mergeProps","cn","buttonVariants","_Fragment","ButtonLabel","LightbulbIcon","OctagonAlertIcon","TriangleAlertIcon","InfoIcon","FileTextIcon","Children","cn","Button","XIcon"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Notice-B_KjMmA6.cjs","names":["isValidElement","useRender","mergeProps","cn","buttonVariants","_Fragment","ButtonLabel","LightbulbIcon","OctagonAlertIcon","TriangleAlertIcon","InfoIcon","FileTextIcon","Children","cn","Button","XIcon"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":";;;;;;;;AAWA,SAAS,kBAAkB,QAAqC;CAC9D,IAAI,CAAC,WAAA,GAAWA,MAAAA,eAAAA,CAAe,MAAM,KAAK,OAAO,SAAS,UAAW,OAAO,EAAE,MAAM,SAAkB;CACtG,OAAO,CAAC;AACV;AAEA,SAAgB,aAAa,EAAE,QAAQ,MAAM,WAAW,UAAU,GAAG,SAA4B;CAC/F,QAAA,GAAOC,0BAAAA,UAAAA,CAAU;EACf,gBAAgB;EAChB;EACA,QAAA,GAAOC,2BAAAA,WAAAA,CACL,kBAAkB,MAAM,GACxB;GACE,WAAWC,cAAAA,GACTC,eAAAA,eAAe,EAAE,SAAS,OAAO,CAAC,GAClC,iEACA,SACF;GACA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,MACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,aAAD;IAAa,SAAQ;IAAQ;GAAsB,CAAA,CACnD,EAAA,CAAA;EAEN,GACA,KACF;CACF,CAAC;AACH;;ACjCA,SAAgB,cAAc,EAAE,UAAU,aAAiC;CACzE,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AACnD;;ACEA,IAAM,gBAA+E;CACnF,SAAS;EAAE,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,eAAD,CAAgB,CAAA;EAAG,WAAW;CAAyB;CACxE,aAAa;EAAE,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,kBAAD,CAAmB,CAAA;EAAG,WAAW;CAA6B;CACnF,SAAS;EAAE,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,mBAAD,CAAoB,CAAA;EAAG,WAAW;CAA0B;CAC7E,MAAM;EAAE,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,UAAD,CAAW,CAAA;EAAG,WAAW;CAAsB;CAC7D,MAAM;EAAE,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,cAAD,CAAe,CAAA;EAAG,WAAW;CAAwB;AACrE;AAEA,SAAS,WAAW,SAAoB;CACtC,OAAOC,MAAAA,SAAS,QAAQ,OAAO,CAAC,CAAC,MAAK,UAAS,UAAU,EAAE;AAC7D;AAWA,SAAgB,WAAW,EACzB,SACA,OACA,MACA,QACA,kBAAkB,SAClB,WACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,EAAE,MAAM,aAAa,cAAc,cAAc;CACvD,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,aAAa,WAAW,QAAQ;CACtC,MAAM,YAAY,WAAW,MAAM;CAEnC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW;EACX,yBAAuB;EACvB,WAAWC,cAAAA,GAAG,6DAA6D,aAAa,SAAS,SAAS;EAL5G,UAAA;IAOI,YAAY,cAAc,cAC1B,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAWA,cAAAA,GAAG,yEAAyE,SAAS;IAE/F,UAAA,QAAQ;GACL,CAAA;IAEN,YAAY,eACZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,aAAU;IAAiB,WAAU;IAA1C,UAAA,CACG,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAAmB,UAAA;IAAW,CAAA,GACzD,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACxE;;GAEN,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,aAAU;IAAgB,WAAU;IACtC,UAAA;GACE,CAAA;GAEN,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAQ;IACR,SAAS;IAET,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD,CAAQ,CAAA;GACF,CAAA;EAEP;;AAET;;ACjFA,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,SAAS;CACT,QAAQ;AACV,CAAC"}

package/dist/{Notice-C-8oOZZF.js → Notice-OSlG42lD.js}

@@ -1,5 +1,5 @@
+import { i as ButtonLabel, o as buttonVariants, t as Button } from "./Button-Bi7aXd_G.js";
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { i as ButtonLabel, o as buttonVariants, t as Button } from "./Button-CLXTbAY8.js";
 import { Children, isValidElement } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from "lucide-react";
@@ -109,4 +109,4 @@ var Notice = Object.assign(NoticeRoot, {
 });
 export { Notice as t };
 
-//# sourceMappingURL=Notice-C-8oOZZF.js.map
+//# sourceMappingURL=Notice-OSlG42lD.js.map

package/dist/{Notice-C-8oOZZF.js.map → Notice-OSlG42lD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Notice-C-8oOZZF.js","names":["_Fragment"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":";;;;;;;;AAWA,SAAS,kBAAkB,QAAqC;CAC9D,IAAI,CAAC,UAAW,eAAe,MAAM,KAAK,OAAO,SAAS,UAAW,OAAO,EAAE,MAAM,SAAkB;CACtG,OAAO,CAAC;AACV;AAEA,SAAgB,aAAa,EAAE,QAAQ,MAAM,WAAW,UAAU,GAAG,SAA4B;CAC/F,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,kBAAkB,MAAM,GACxB;GACE,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,CAAC,GAClC,iEACA,SACF;GACA,UACE,qBAAAA,YAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD;IAAa,SAAQ;IAAQ;GAAsB,CAAA,CACnD,EAAA,CAAA;EAEN,GACA,KACF;CACF,CAAC;AACH;;ACjCA,SAAgB,cAAc,EAAE,UAAU,aAAiC;CACzE,OAAO,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AACnD;;ACEA,IAAM,gBAA+E;CACnF,SAAS;EAAE,MAAM,oBAAC,eAAD,CAAgB,CAAA;EAAG,WAAW;CAAyB;CACxE,aAAa;EAAE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;EAAG,WAAW;CAA6B;CACnF,SAAS;EAAE,MAAM,oBAAC,mBAAD,CAAoB,CAAA;EAAG,WAAW;CAA0B;CAC7E,MAAM;EAAE,MAAM,oBAAC,UAAD,CAAW,CAAA;EAAG,WAAW;CAAsB;CAC7D,MAAM;EAAE,MAAM,oBAAC,cAAD,CAAe,CAAA;EAAG,WAAW;CAAwB;AACrE;AAEA,SAAS,WAAW,SAAoB;CACtC,OAAO,SAAS,QAAQ,OAAO,CAAC,CAAC,MAAK,UAAS,UAAU,EAAE;AAC7D;AAWA,SAAgB,WAAW,EACzB,SACA,OACA,MACA,QACA,kBAAkB,SAClB,WACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,EAAE,MAAM,aAAa,cAAc,cAAc;CACvD,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,aAAa,WAAW,QAAQ;CACtC,MAAM,YAAY,WAAW,MAAM;CAEnC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW;EACX,yBAAuB;EACvB,WAAW,GAAG,6DAA6D,aAAa,SAAS,SAAS;EAL5G,UAAA;IAOI,YAAY,cAAc,cAC1B,oBAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAW,GAAG,yEAAyE,SAAS;IAE/F,UAAA,QAAQ;GACL,CAAA;IAEN,YAAY,eACZ,qBAAC,OAAD;IAAK,aAAU;IAAiB,WAAU;IAA1C,UAAA,CACG,YAAY,oBAAC,OAAD;KAAK,WAAU;KAAmB,UAAA;IAAW,CAAA,GACzD,cAAc,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACxE;;GAEN,aACC,oBAAC,OAAD;IAAK,aAAU;IAAgB,WAAU;IACtC,UAAA;GACE,CAAA;GAEN,aACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAQ;IACR,SAAS;IAET,UAAA,oBAAC,OAAD,CAAQ,CAAA;GACF,CAAA;EAEP;;AAET;;ACjFA,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,SAAS;CACT,QAAQ;AACV,CAAC"}
+{"version":3,"file":"Notice-OSlG42lD.js","names":["_Fragment"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":";;;;;;;;AAWA,SAAS,kBAAkB,QAAqC;CAC9D,IAAI,CAAC,UAAW,eAAe,MAAM,KAAK,OAAO,SAAS,UAAW,OAAO,EAAE,MAAM,SAAkB;CACtG,OAAO,CAAC;AACV;AAEA,SAAgB,aAAa,EAAE,QAAQ,MAAM,WAAW,UAAU,GAAG,SAA4B;CAC/F,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,kBAAkB,MAAM,GACxB;GACE,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,CAAC,GAClC,iEACA,SACF;GACA,UACE,qBAAAA,YAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD;IAAa,SAAQ;IAAQ;GAAsB,CAAA,CACnD,EAAA,CAAA;EAEN,GACA,KACF;CACF,CAAC;AACH;;ACjCA,SAAgB,cAAc,EAAE,UAAU,aAAiC;CACzE,OAAO,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AACnD;;ACEA,IAAM,gBAA+E;CACnF,SAAS;EAAE,MAAM,oBAAC,eAAD,CAAgB,CAAA;EAAG,WAAW;CAAyB;CACxE,aAAa;EAAE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;EAAG,WAAW;CAA6B;CACnF,SAAS;EAAE,MAAM,oBAAC,mBAAD,CAAoB,CAAA;EAAG,WAAW;CAA0B;CAC7E,MAAM;EAAE,MAAM,oBAAC,UAAD,CAAW,CAAA;EAAG,WAAW;CAAsB;CAC7D,MAAM;EAAE,MAAM,oBAAC,cAAD,CAAe,CAAA;EAAG,WAAW;CAAwB;AACrE;AAEA,SAAS,WAAW,SAAoB;CACtC,OAAO,SAAS,QAAQ,OAAO,CAAC,CAAC,MAAK,UAAS,UAAU,EAAE;AAC7D;AAWA,SAAgB,WAAW,EACzB,SACA,OACA,MACA,QACA,kBAAkB,SAClB,WACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,EAAE,MAAM,aAAa,cAAc,cAAc;CACvD,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,aAAa,WAAW,QAAQ;CACtC,MAAM,YAAY,WAAW,MAAM;CAEnC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW;EACX,yBAAuB;EACvB,WAAW,GAAG,6DAA6D,aAAa,SAAS,SAAS;EAL5G,UAAA;IAOI,YAAY,cAAc,cAC1B,oBAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAW,GAAG,yEAAyE,SAAS;IAE/F,UAAA,QAAQ;GACL,CAAA;IAEN,YAAY,eACZ,qBAAC,OAAD;IAAK,aAAU;IAAiB,WAAU;IAA1C,UAAA,CACG,YAAY,oBAAC,OAAD;KAAK,WAAU;KAAmB,UAAA;IAAW,CAAA,GACzD,cAAc,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACxE;;GAEN,aACC,oBAAC,OAAD;IAAK,aAAU;IAAgB,WAAU;IACtC,UAAA;GACE,CAAA;GAEN,aACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAQ;IACR,SAAS;IAET,UAAA,oBAAC,OAAD,CAAQ,CAAA;GACF,CAAA;EAEP;;AAET;;ACjFA,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,SAAS;CACT,QAAQ;AACV,CAAC"}

package/dist/{PageLayout-DFRzcnkf.cjs → PageLayout-C0Fo3ZQC.cjs}

@@ -1,6 +1,6 @@
-const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_scroll_area = require("./scroll-area-BP4gPZ4G.cjs");
 const require_components_Header = require("./components/Header.cjs.js");
+const require_scroll_area = require("./scroll-area-BU_TorPW.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ds/components/PageLayout/page-layout.tsx
 function PageLayout({ children, breadcrumbs, headerActions, actionRow, header, variant = "container", mask = false }) {
@@ -51,4 +51,4 @@ Object.defineProperty(exports, "PageLayout", {
 	}
 });
 
-//# sourceMappingURL=PageLayout-DFRzcnkf.cjs.map
+//# sourceMappingURL=PageLayout-C0Fo3ZQC.cjs.map

package/dist/{PageLayout-DFRzcnkf.cjs.map → PageLayout-C0Fo3ZQC.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"PageLayout-DFRzcnkf.cjs","names":["cn","Header","ScrollArea","ScrollAreaViewport","_Fragment"],"sources":["../src/ds/components/PageLayout/page-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Header } from '../Header';\nimport { ScrollArea, ScrollAreaViewport } from '../ScrollArea';\nimport type { ScrollAreaMask } from '../ScrollArea';\nimport { cn } from '@/lib/utils';\n\nexport interface PageLayoutProps {\n  children: ReactNode;\n  /** Left side of the page header row. */\n  breadcrumbs?: ReactNode;\n  /** Right side of the page header row. */\n  headerActions?: ReactNode;\n  /** Controls pinned between the header and the scrollable body (search, filters, toggles…). */\n  actionRow?: ReactNode;\n  /** Page-level header (e.g. `PageHeader`) rendered inside the body container, above children. */\n  header?: ReactNode;\n  /**\n   * `container` pads the body (default); `narrow` centers the body in a max-width column;\n   * `fit` lets the body fill the page edge to edge.\n   */\n  variant?: 'container' | 'fit' | 'narrow';\n  /**\n   * Fade the body's scrolled edges, using the same values as `ScrollArea`'s `mask`. Off by default.\n   * `{ y: true }` fades the top and bottom; `{ bottom: '3rem' }` sets one side's depth.\n   * A fade covers whatever sits at that edge, so leave it off for `fit` bodies that hold tables with sticky headers.\n   */\n  mask?: ScrollAreaMask;\n}\n\nexport function PageLayout({\n  children,\n  breadcrumbs,\n  headerActions,\n  actionRow,\n  header,\n  variant = 'container',\n  mask = false,\n}: PageLayoutProps) {\n  const headerSlot = header ? (\n    <div data-slot=\"page-layout-header\" className={cn(variant === 'fit' && 'p-4')}>\n      {header}\n    </div>\n  ) : null;\n\n  return (\n    <div data-slot=\"page-layout\" className=\"flex h-full min-h-0 flex-col\">\n      {(breadcrumbs || headerActions) && (\n        <Header className=\"min-h-header-default shrink-0 gap-2 overflow-hidden px-2\">\n          {breadcrumbs}\n          {headerActions && (\n            <div className=\"ml-auto flex shrink-0 items-center gap-2 overflow-hidden\">{headerActions}</div>\n          )}\n        </Header>\n      )}\n      {actionRow && (\n        <div data-slot=\"page-layout-action-row\" className=\"flex shrink-0 flex-col gap-2 px-4 pt-4\">\n          {actionRow}\n        </div>\n      )}\n      <main className=\"flex min-h-0 flex-1 flex-col\">\n        <ScrollArea mask={mask} className=\"min-h-0 flex-1\">\n          <ScrollAreaViewport\n            className={cn(variant === 'container' && 'p-4')}\n            contentClassName={cn(\n              variant === 'container' && 'h-full min-h-min',\n              variant === 'narrow' && 'grid min-h-full grid-cols-1',\n              // `fit` hands the remaining body height to its child (panels, graphs, tables that own their scroll).\n              variant === 'fit' &&\n                (header\n                  ? 'grid h-full grid-cols-1 grid-rows-[auto_minmax(0,1fr)]'\n                  : 'grid h-full grid-cols-1 grid-rows-1'),\n            )}\n          >\n            {variant === 'narrow' ? (\n              // Horizontal gutter is the variant's contract; keep px/py explicit rather than the `p-4` shorthand.\n              // eslint-disable-next-line tailwindcss/enforces-shorthand\n              <div\n                data-slot=\"page-layout-container\"\n                className={cn(\n                  'mx-auto grid min-h-full w-full max-w-5xl grid-cols-1 p-4',\n                  header ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n                )}\n              >\n                {headerSlot}\n                {children}\n              </div>\n            ) : (\n              <>\n                {headerSlot}\n                {children}\n              </>\n            )}\n          </ScrollAreaViewport>\n        </ScrollArea>\n      </main>\n    </div>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgB,WAAW,EACzB,UACA,aACA,eACA,WACA,QACA,UAAU,aACV,OAAO,SACW;CAClB,MAAM,aAAa,SACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAqB,WAAWA,cAAAA,GAAG,YAAY,SAAS,KAAK;EACzE,UAAA;CACE,CAAA,IACH;CAEJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,aAAU;EAAc,WAAU;EAAvC,UAAA;IACI,eAAe,kBACf,iBAAA,GAAA,kBAAA,KAAA,CAACC,0BAAAA,QAAD;IAAQ,WAAU;IAAlB,UAAA,CACG,aACA,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAA4D,UAAA;IAAmB,CAAA,CAE1F;;GAET,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,aAAU;IAAyB,WAAU;IAC/C,UAAA;GACE,CAAA;GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;KAAkB;KAAM,WAAU;KAChC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,oBAAD;MACE,WAAWH,cAAAA,GAAG,YAAY,eAAe,KAAK;MAC9C,kBAAkBA,cAAAA,GAChB,YAAY,eAAe,oBAC3B,YAAY,YAAY,+BAExB,YAAY,UACT,SACG,2DACA,sCACR;MAEC,UAAA,YAAY,WAGX,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OACE,aAAU;OACV,WAAWA,cAAAA,GACT,4DACA,SAAS,yBAAyB,iBACpC;OALF,UAAA,CAOG,YACA,QACE;MAEL,CAAA,IAAA,iBAAA,GAAA,kBAAA,KAAA,CAAAI,kBAAAA,UAAA,EAAA,UAAA,CACG,YACA,QACD,EAAA,CAAA;KAEc,CAAA;IACV,CAAA;GACR,CAAA;EACH;;AAET"}
+{"version":3,"file":"PageLayout-C0Fo3ZQC.cjs","names":["cn","Header","ScrollArea","ScrollAreaViewport","_Fragment"],"sources":["../src/ds/components/PageLayout/page-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Header } from '../Header';\nimport { ScrollArea, ScrollAreaViewport } from '../ScrollArea';\nimport type { ScrollAreaMask } from '../ScrollArea';\nimport { cn } from '@/lib/utils';\n\nexport interface PageLayoutProps {\n  children: ReactNode;\n  /** Left side of the page header row. */\n  breadcrumbs?: ReactNode;\n  /** Right side of the page header row. */\n  headerActions?: ReactNode;\n  /** Controls pinned between the header and the scrollable body (search, filters, toggles…). */\n  actionRow?: ReactNode;\n  /** Page-level header (e.g. `PageHeader`) rendered inside the body container, above children. */\n  header?: ReactNode;\n  /**\n   * `container` pads the body (default); `narrow` centers the body in a max-width column;\n   * `fit` lets the body fill the page edge to edge.\n   */\n  variant?: 'container' | 'fit' | 'narrow';\n  /**\n   * Fade the body's scrolled edges, using the same values as `ScrollArea`'s `mask`. Off by default.\n   * `{ y: true }` fades the top and bottom; `{ bottom: '3rem' }` sets one side's depth.\n   * A fade covers whatever sits at that edge, so leave it off for `fit` bodies that hold tables with sticky headers.\n   */\n  mask?: ScrollAreaMask;\n}\n\nexport function PageLayout({\n  children,\n  breadcrumbs,\n  headerActions,\n  actionRow,\n  header,\n  variant = 'container',\n  mask = false,\n}: PageLayoutProps) {\n  const headerSlot = header ? (\n    <div data-slot=\"page-layout-header\" className={cn(variant === 'fit' && 'p-4')}>\n      {header}\n    </div>\n  ) : null;\n\n  return (\n    <div data-slot=\"page-layout\" className=\"flex h-full min-h-0 flex-col\">\n      {(breadcrumbs || headerActions) && (\n        <Header className=\"min-h-header-default shrink-0 gap-2 overflow-hidden px-2\">\n          {breadcrumbs}\n          {headerActions && (\n            <div className=\"ml-auto flex shrink-0 items-center gap-2 overflow-hidden\">{headerActions}</div>\n          )}\n        </Header>\n      )}\n      {actionRow && (\n        <div data-slot=\"page-layout-action-row\" className=\"flex shrink-0 flex-col gap-2 px-4 pt-4\">\n          {actionRow}\n        </div>\n      )}\n      <main className=\"flex min-h-0 flex-1 flex-col\">\n        <ScrollArea mask={mask} className=\"min-h-0 flex-1\">\n          <ScrollAreaViewport\n            className={cn(variant === 'container' && 'p-4')}\n            contentClassName={cn(\n              variant === 'container' && 'h-full min-h-min',\n              variant === 'narrow' && 'grid min-h-full grid-cols-1',\n              // `fit` hands the remaining body height to its child (panels, graphs, tables that own their scroll).\n              variant === 'fit' &&\n                (header\n                  ? 'grid h-full grid-cols-1 grid-rows-[auto_minmax(0,1fr)]'\n                  : 'grid h-full grid-cols-1 grid-rows-1'),\n            )}\n          >\n            {variant === 'narrow' ? (\n              // Horizontal gutter is the variant's contract; keep px/py explicit rather than the `p-4` shorthand.\n              // eslint-disable-next-line tailwindcss/enforces-shorthand\n              <div\n                data-slot=\"page-layout-container\"\n                className={cn(\n                  'mx-auto grid min-h-full w-full max-w-5xl grid-cols-1 p-4',\n                  header ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n                )}\n              >\n                {headerSlot}\n                {children}\n              </div>\n            ) : (\n              <>\n                {headerSlot}\n                {children}\n              </>\n            )}\n          </ScrollAreaViewport>\n        </ScrollArea>\n      </main>\n    </div>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgB,WAAW,EACzB,UACA,aACA,eACA,WACA,QACA,UAAU,aACV,OAAO,SACW;CAClB,MAAM,aAAa,SACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAqB,WAAWA,cAAAA,GAAG,YAAY,SAAS,KAAK;EACzE,UAAA;CACE,CAAA,IACH;CAEJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,aAAU;EAAc,WAAU;EAAvC,UAAA;IACI,eAAe,kBACf,iBAAA,GAAA,kBAAA,KAAA,CAACC,0BAAAA,QAAD;IAAQ,WAAU;IAAlB,UAAA,CACG,aACA,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAA4D,UAAA;IAAmB,CAAA,CAE1F;;GAET,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,aAAU;IAAyB,WAAU;IAC/C,UAAA;GACE,CAAA;GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;KAAkB;KAAM,WAAU;KAChC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,oBAAD;MACE,WAAWH,cAAAA,GAAG,YAAY,eAAe,KAAK;MAC9C,kBAAkBA,cAAAA,GAChB,YAAY,eAAe,oBAC3B,YAAY,YAAY,+BAExB,YAAY,UACT,SACG,2DACA,sCACR;MAEC,UAAA,YAAY,WAGX,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;OACE,aAAU;OACV,WAAWA,cAAAA,GACT,4DACA,SAAS,yBAAyB,iBACpC;OALF,UAAA,CAOG,YACA,QACE;MAEL,CAAA,IAAA,iBAAA,GAAA,kBAAA,KAAA,CAAAI,kBAAAA,UAAA,EAAA,UAAA,CACG,YACA,QACD,EAAA,CAAA;KAEc,CAAA;IACV,CAAA;GACR,CAAA;EACH;;AAET"}

package/dist/{PageLayout-CyM_Op3c.js → PageLayout-DLll7ZwB.js}

@@ -1,6 +1,6 @@
-import { t as cn } from "./utils-DQx8TpNT.js";
-import { n as ScrollAreaViewport, t as ScrollArea } from "./scroll-area-C226l0v0.js";
 import { Header } from "./components/Header.es.js";
+import { n as ScrollAreaViewport, t as ScrollArea } from "./scroll-area-9-S7wfSs.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/ds/components/PageLayout/page-layout.tsx
 function PageLayout({ children, breadcrumbs, headerActions, actionRow, header, variant = "container", mask = false }) {
@@ -46,4 +46,4 @@ function PageLayout({ children, breadcrumbs, headerActions, actionRow, header, v
 }
 export { PageLayout as t };
 
-//# sourceMappingURL=PageLayout-CyM_Op3c.js.map
+//# sourceMappingURL=PageLayout-DLll7ZwB.js.map