@refraction-ui/react 0.20.1 → 0.22.0

package/dist/react-line-chart.js

@@ -0,0 +1,242 @@
+import {
+  cn
+} from "./chunk-2Q6HHFAN.js";
+
+// ../react-line-chart/dist/index.js
+import * as React from "react";
+
+// ../line-chart/dist/index.js
+var DEFAULT_LINE_CHART_PADDING = {
+  top: 14,
+  right: 14,
+  bottom: 24,
+  left: 40
+};
+var DEFAULT_LINE_CHART_WIDTH = 760;
+var DEFAULT_LINE_CHART_HEIGHT = 230;
+var DEFAULT_TICK_COUNT = 4;
+var DEFAULT_HEADROOM = 1.08;
+var DEFAULT_LABEL_EVERY = 2;
+var CHART_TOKEN_COUNT = 5;
+function lineChartColor(index) {
+  return `hsl(var(--chart-${index % CHART_TOKEN_COUNT + 1}))`;
+}
+function pathFrom(points) {
+  return points.map(([px, py], i) => (i ? "L" : "M") + px.toFixed(1) + " " + py.toFixed(1)).join(" ");
+}
+function computeLineChart(options) {
+  const {
+    series,
+    labels,
+    width,
+    height,
+    tickCount = DEFAULT_TICK_COUNT,
+    headroom = DEFAULT_HEADROOM,
+    labelEvery = DEFAULT_LABEL_EVERY
+  } = options;
+  const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding };
+  const n = labels.length;
+  const values = series.flatMap((s) => s.data);
+  const peak = values.length ? Math.max(...values) : 0;
+  const max = peak > 0 ? peak * headroom : 1;
+  const plotW = width - padding.left - padding.right;
+  const plotTop = padding.top;
+  const plotBottom = height - padding.bottom;
+  const plotH = plotBottom - plotTop;
+  const x = (index) => padding.left + (n > 1 ? index / (n - 1) * plotW : plotW / 2);
+  const y = (value) => plotTop + (1 - value / max) * plotH;
+  const ticks = Array.from({ length: tickCount + 1 }, (_, t) => {
+    const value = max / tickCount * t;
+    return { value, y: y(value) };
+  });
+  const xLabels = labels.map((label, index) => ({ index, label, x: x(index) })).filter(({ index }) => index % labelEvery === 0 || index === n - 1);
+  const paths = series.map((s, si) => {
+    const points = s.data.map((v, i) => [x(i), y(v)]);
+    const line = pathFrom(points);
+    const first = points.length ? points[0][0] : x(0);
+    const last = points.length ? points[points.length - 1][0] : x(0);
+    const base = y(0).toFixed(1);
+    const area = `${line} L ${last.toFixed(1)} ${base} L ${first.toFixed(1)} ${base} Z`;
+    return { id: s.id, color: s.color ?? lineChartColor(si), line, area };
+  });
+  const colW = n > 1 ? plotW / (n - 1) : plotW;
+  const columns = labels.map((_, index) => ({
+    index,
+    x: x(index) - colW / 2,
+    width: colW
+  }));
+  return { width, height, padding, max, ticks, xLabels, paths, columns, x, y, plotTop, plotBottom };
+}
+function tooltipLeftPercent(geometry, index) {
+  return geometry.x(index) / geometry.width * 100;
+}
+function nextLineChartIndex(current, key, count) {
+  if (count === 0) return null;
+  const last = count - 1;
+  switch (key) {
+    case "ArrowRight":
+      return current == null ? 0 : Math.min(current + 1, last);
+    case "ArrowLeft":
+      return current == null ? last : Math.max(current - 1, 0);
+    case "Home":
+      return 0;
+    case "End":
+      return last;
+    default:
+      return current;
+  }
+}
+var lineChartClasses = {
+  root: "relative",
+  svg: "block w-full rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  gridline: "stroke-border",
+  axis: "fill-muted-foreground text-[9px]",
+  crosshair: "stroke-border",
+  marker: "stroke-card",
+  tooltip: "pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-tertiary px-2.5 py-2 text-[11px] text-tertiary-foreground shadow-lg",
+  tooltipLabel: "mb-1 opacity-60",
+  tooltipRow: "flex justify-between gap-2",
+  legend: "mt-2.5 flex flex-wrap gap-3.5",
+  legendItem: "inline-flex items-center gap-1.5 text-[11px] text-muted-foreground",
+  legendSwatch: "h-[3px] w-2.5 rounded-sm"
+};
+
+// ../react-line-chart/dist/index.js
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+var defaultFormat = (value) => String(Math.round(value));
+var MARKER_RADIUS = 3.5;
+var STROKE_WIDTH = 2.2;
+var TOOLTIP_TOP_PX = 8;
+var LineChart = React.forwardRef(function LineChart2({
+  series,
+  labels,
+  ariaLabel,
+  height = DEFAULT_LINE_CHART_HEIGHT,
+  width = DEFAULT_LINE_CHART_WIDTH,
+  formatValue = defaultFormat,
+  formatTick,
+  area,
+  showLegend = true,
+  className,
+  ...rest
+}, ref) {
+  const [active, setActive] = React.useState(null);
+  const gradientBase = React.useId().replace(/:/g, "");
+  const geo = React.useMemo(
+    () => computeLineChart({ series, labels, width, height }),
+    [series, labels, width, height]
+  );
+  const fillArea = area ?? series.length === 1;
+  const tick = formatTick ?? formatValue;
+  const handleKeyDown = (event) => {
+    const next = nextLineChartIndex(active, event.key, labels.length);
+    if (next === active) return;
+    event.preventDefault();
+    setActive(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn(lineChartClasses.root, className), "data-slot": "line-chart", ...rest, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: lineChartClasses.svg,
+        viewBox: `0 0 ${width} ${height}`,
+        style: { height },
+        role: "img",
+        "aria-label": ariaLabel,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onBlur: () => setActive(null),
+        onMouseLeave: () => setActive(null),
+        children: [
+          geo.ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx("line", { className: lineChartClasses.gridline, x1: geo.padding.left, y1: t.y, x2: width - geo.padding.right, y2: t.y }),
+            /* @__PURE__ */ jsx("text", { className: lineChartClasses.axis, x: geo.padding.left - 8, y: t.y + 3, textAnchor: "end", children: tick(t.value) })
+          ] }, i)),
+          geo.xLabels.map((l) => /* @__PURE__ */ jsx("text", { className: lineChartClasses.axis, x: l.x, y: height - 6, textAnchor: "middle", children: l.label }, l.index)),
+          geo.paths.map((p, si) => {
+            const gid = `${gradientBase}-${si}`;
+            const value = active != null ? series[si].data[active] : void 0;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              fillArea && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: p.color, stopOpacity: "0.22" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: p.color, stopOpacity: "0" })
+                ] }) }),
+                /* @__PURE__ */ jsx("path", { d: p.area, fill: `url(#${gid})` })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: p.line,
+                  fill: "none",
+                  stroke: p.color,
+                  strokeWidth: STROKE_WIDTH,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              active != null && value != null && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: lineChartClasses.marker,
+                  cx: geo.x(active),
+                  cy: geo.y(value),
+                  r: MARKER_RADIUS,
+                  fill: p.color,
+                  strokeWidth: "1.5"
+                }
+              )
+            ] }, p.id);
+          }),
+          active != null && /* @__PURE__ */ jsx(
+            "line",
+            {
+              className: lineChartClasses.crosshair,
+              x1: geo.x(active),
+              y1: geo.plotTop,
+              x2: geo.x(active),
+              y2: geo.plotBottom,
+              strokeDasharray: "3 3"
+            }
+          ),
+          geo.columns.map((col) => /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-index": col.index,
+              x: col.x,
+              y: 0,
+              width: col.width,
+              height,
+              fill: "transparent",
+              onMouseEnter: () => setActive(col.index)
+            },
+            col.index
+          ))
+        ]
+      }
+    ),
+    active != null && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: lineChartClasses.tooltip,
+        role: "status",
+        style: { left: `${tooltipLeftPercent(geo, active)}%`, top: TOOLTIP_TOP_PX },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: lineChartClasses.tooltipLabel, children: labels[active] }),
+          series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: lineChartClasses.tooltipRow, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: geo.paths[si].color }, children: s.name }),
+            /* @__PURE__ */ jsx("b", { children: s.data[active] != null ? formatValue(s.data[active]) : "\u2014" })
+          ] }, s.id))
+        ]
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx("div", { className: lineChartClasses.legend, children: series.map((s, si) => /* @__PURE__ */ jsxs("span", { className: lineChartClasses.legendItem, children: [
+      /* @__PURE__ */ jsx("i", { className: lineChartClasses.legendSwatch, style: { background: geo.paths[si].color }, "aria-hidden": "true" }),
+      s.name
+    ] }, s.id)) })
+  ] });
+});
+export {
+  LineChart
+};
+//# sourceMappingURL=react-line-chart.js.map

package/dist/react-line-chart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../line-chart/src/line-chart.ts", "../../line-chart/src/line-chart.styles.ts", "../../react-line-chart/src/line-chart.tsx"],
+  "sourcesContent": ["export interface LineChartSeries {\n  /** Stable key for the series. */\n  id: string\n  /** Legend / tooltip name. */\n  name: string\n  /**\n   * Any CSS colour (a token `hsl(var(--…))` or a data colour). Defaults to the\n   * theme's chart palette (`--chart-1` … `--chart-5`) by series position.\n   */\n  color?: string\n  /** One value per label, in label order. */\n  data: number[]\n}\n\nexport interface LineChartPadding {\n  top: number\n  right: number\n  bottom: number\n  left: number\n}\n\nexport interface LineChartOptions {\n  series: LineChartSeries[]\n  labels: string[]\n  /** viewBox width — the SVG scales to its container's width. */\n  width: number\n  /** viewBox height. */\n  height: number\n  padding?: Partial<LineChartPadding>\n  /** Number of gridline intervals on the y-axis. */\n  tickCount?: number\n  /** Headroom multiplier above the largest value. */\n  headroom?: number\n  /** Show every n-th x label (the last label is always shown). */\n  labelEvery?: number\n}\n\nexport interface LineChartTick {\n  value: number\n  y: number\n}\n\nexport interface LineChartXLabel {\n  index: number\n  label: string\n  x: number\n}\n\nexport interface LineChartPath {\n  id: string\n  /** Resolved stroke colour. */\n  color: string\n  /** The stroke path. */\n  line: string\n  /** The line closed down to the zero baseline, for an area fill. */\n  area: string\n}\n\nexport interface LineChartColumn {\n  index: number\n  x: number\n  width: number\n}\n\nexport interface LineChartGeometry {\n  width: number\n  height: number\n  padding: LineChartPadding\n  /** Top of the shared y-scale. */\n  max: number\n  ticks: LineChartTick[]\n  xLabels: LineChartXLabel[]\n  paths: LineChartPath[]\n  /** One hover/focus column per category. */\n  columns: LineChartColumn[]\n  x: (index: number) => number\n  y: (value: number) => number\n  /** Top and bottom of the plot area, for a crosshair. */\n  plotTop: number\n  plotBottom: number\n}\n\nexport const DEFAULT_LINE_CHART_PADDING: LineChartPadding = {\n  top: 14,\n  right: 14,\n  bottom: 24,\n  left: 40,\n}\n\nexport const DEFAULT_LINE_CHART_WIDTH = 760\nexport const DEFAULT_LINE_CHART_HEIGHT = 230\nconst DEFAULT_TICK_COUNT = 4\nconst DEFAULT_HEADROOM = 1.08\nconst DEFAULT_LABEL_EVERY = 2\n/** Number of `--chart-N` tokens the theme defines. */\nconst CHART_TOKEN_COUNT = 5\n\n/** The theme chart colour for the series at `index` (wraps around). */\nexport function lineChartColor(index: number): string {\n  return `hsl(var(--chart-${(index % CHART_TOKEN_COUNT) + 1}))`\n}\n\nfunction pathFrom(points: Array<[number, number]>): string {\n  return points.map(([px, py], i) => (i ? 'L' : 'M') + px.toFixed(1) + ' ' + py.toFixed(1)).join(' ')\n}\n\n/**\n * Pure geometry for a responsive multi-series line chart. Every series shares\n * ONE y-scale (zero baseline to the largest value plus headroom), so series are\n * comparable. Coordinates are in viewBox units; the SVG scales to its container.\n */\nexport function computeLineChart(options: LineChartOptions): LineChartGeometry {\n  const {\n    series,\n    labels,\n    width,\n    height,\n    tickCount = DEFAULT_TICK_COUNT,\n    headroom = DEFAULT_HEADROOM,\n    labelEvery = DEFAULT_LABEL_EVERY,\n  } = options\n  const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding }\n  const n = labels.length\n  const values = series.flatMap((s) => s.data)\n  const peak = values.length ? Math.max(...values) : 0\n  const max = peak > 0 ? peak * headroom : 1\n  const plotW = width - padding.left - padding.right\n  const plotTop = padding.top\n  const plotBottom = height - padding.bottom\n  const plotH = plotBottom - plotTop\n\n  const x = (index: number) => padding.left + (n > 1 ? (index / (n - 1)) * plotW : plotW / 2)\n  const y = (value: number) => plotTop + (1 - value / max) * plotH\n\n  const ticks: LineChartTick[] = Array.from({ length: tickCount + 1 }, (_, t) => {\n    const value = (max / tickCount) * t\n    return { value, y: y(value) }\n  })\n\n  const xLabels: LineChartXLabel[] = labels\n    .map((label, index) => ({ index, label, x: x(index) }))\n    .filter(({ index }) => index % labelEvery === 0 || index === n - 1)\n\n  const paths: LineChartPath[] = series.map((s, si) => {\n    const points = s.data.map((v, i): [number, number] => [x(i), y(v)])\n    const line = pathFrom(points)\n    const first = points.length ? points[0][0] : x(0)\n    const last = points.length ? points[points.length - 1][0] : x(0)\n    const base = y(0).toFixed(1)\n    const area = `${line} L ${last.toFixed(1)} ${base} L ${first.toFixed(1)} ${base} Z`\n    return { id: s.id, color: s.color ?? lineChartColor(si), line, area }\n  })\n\n  const colW = n > 1 ? plotW / (n - 1) : plotW\n  const columns: LineChartColumn[] = labels.map((_, index) => ({\n    index,\n    x: x(index) - colW / 2,\n    width: colW,\n  }))\n\n  return { width, height, padding, max, ticks, xLabels, paths, columns, x, y, plotTop, plotBottom }\n}\n\n/** Where a tooltip for `index` sits horizontally, as a percent of the chart width. */\nexport function tooltipLeftPercent(geometry: LineChartGeometry, index: number): number {\n  return (geometry.x(index) / geometry.width) * 100\n}\n\n/**\n * The category index a keyboard key moves to from `current` (null = nothing\n * active yet). Returns `current` unchanged for keys the chart doesn't handle.\n */\nexport function nextLineChartIndex(current: number | null, key: string, count: number): number | null {\n  if (count === 0) return null\n  const last = count - 1\n  switch (key) {\n    case 'ArrowRight':\n      return current == null ? 0 : Math.min(current + 1, last)\n    case 'ArrowLeft':\n      return current == null ? last : Math.max(current - 1, 0)\n    case 'Home':\n      return 0\n    case 'End':\n      return last\n    default:\n      return current\n  }\n}\n", "/** Token-class styles for LineChart; no colour literals. */\nexport const lineChartClasses = {\n  root: 'relative',\n  svg: 'block w-full rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  gridline: 'stroke-border',\n  axis: 'fill-muted-foreground text-[9px]',\n  crosshair: 'stroke-border',\n  marker: 'stroke-card',\n  tooltip:\n    'pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-tertiary px-2.5 py-2 text-[11px] text-tertiary-foreground shadow-lg',\n  tooltipLabel: 'mb-1 opacity-60',\n  tooltipRow: 'flex justify-between gap-2',\n  legend: 'mt-2.5 flex flex-wrap gap-3.5',\n  legendItem: 'inline-flex items-center gap-1.5 text-[11px] text-muted-foreground',\n  legendSwatch: 'h-[3px] w-2.5 rounded-sm',\n} as const\n", "import * as React from 'react'\nimport {\n  computeLineChart,\n  lineChartClasses as c,\n  nextLineChartIndex,\n  tooltipLeftPercent,\n  DEFAULT_LINE_CHART_WIDTH,\n  DEFAULT_LINE_CHART_HEIGHT,\n  type LineChartSeries,\n} from '@refraction-ui/line-chart'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { LineChartSeries }\n\nexport interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** The series to plot, all on one shared y-scale. */\n  series: LineChartSeries[]\n  /** One category label per data point. */\n  labels: string[]\n  /** Accessible name of the chart image (required). */\n  ariaLabel: string\n  /** Rendered height in px (also the viewBox height). Defaults to 230. */\n  height?: number\n  /** viewBox width; the chart always stretches to its container. Defaults to 760. */\n  width?: number\n  /** Formats a value in the tooltip. */\n  formatValue?: (value: number) => string\n  /** Formats a y-axis tick. Defaults to `formatValue`. */\n  formatTick?: (value: number) => string\n  /** Fill the area under each line. Defaults to on for a single series only. */\n  area?: boolean\n  /** Show the series legend under the chart. Defaults to true. */\n  showLegend?: boolean\n}\n\nconst defaultFormat = (value: number) => String(Math.round(value))\nconst MARKER_RADIUS = 3.5\nconst STROKE_WIDTH = 2.2\nconst TOOLTIP_TOP_PX = 8\n\n/**\n * LineChart — a responsive multi-series line chart on one shared y-scale, with\n * gridlines, category x-labels, a hover/keyboard crosshair + tooltip and a\n * legend. The SVG uses a viewBox, so it stretches to its container's width.\n * Keyboard: focus the chart, then ←/→/Home/End move between categories.\n */\nexport const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(function LineChart(\n  {\n    series,\n    labels,\n    ariaLabel,\n    height = DEFAULT_LINE_CHART_HEIGHT,\n    width = DEFAULT_LINE_CHART_WIDTH,\n    formatValue = defaultFormat,\n    formatTick,\n    area,\n    showLegend = true,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [active, setActive] = React.useState<number | null>(null)\n  const gradientBase = React.useId().replace(/:/g, '')\n  const geo = React.useMemo(\n    () => computeLineChart({ series, labels, width, height }),\n    [series, labels, width, height],\n  )\n  const fillArea = area ?? series.length === 1\n  const tick = formatTick ?? formatValue\n\n  const handleKeyDown = (event: React.KeyboardEvent<SVGSVGElement>) => {\n    const next = nextLineChartIndex(active, event.key, labels.length)\n    if (next === active) return\n    event.preventDefault()\n    setActive(next)\n  }\n\n  return (\n    <div ref={ref} className={cn(c.root, className)} data-slot=\"line-chart\" {...rest}>\n      <svg\n        className={c.svg}\n        viewBox={`0 0 ${width} ${height}`}\n        style={{ height }}\n        role=\"img\"\n        aria-label={ariaLabel}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onBlur={() => setActive(null)}\n        onMouseLeave={() => setActive(null)}\n      >\n        {geo.ticks.map((t, i) => (\n          <g key={i}>\n            <line className={c.gridline} x1={geo.padding.left} y1={t.y} x2={width - geo.padding.right} y2={t.y} />\n            <text className={c.axis} x={geo.padding.left - 8} y={t.y + 3} textAnchor=\"end\">\n              {tick(t.value)}\n            </text>\n          </g>\n        ))}\n        {geo.xLabels.map((l) => (\n          <text key={l.index} className={c.axis} x={l.x} y={height - 6} textAnchor=\"middle\">\n            {l.label}\n          </text>\n        ))}\n        {geo.paths.map((p, si) => {\n          const gid = `${gradientBase}-${si}`\n          const value = active != null ? series[si].data[active] : undefined\n          return (\n            <g key={p.id}>\n              {fillArea && (\n                <>\n                  <defs>\n                    <linearGradient id={gid} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stopColor={p.color} stopOpacity=\"0.22\" />\n                      <stop offset=\"100%\" stopColor={p.color} stopOpacity=\"0\" />\n                    </linearGradient>\n                  </defs>\n                  <path d={p.area} fill={`url(#${gid})`} />\n                </>\n              )}\n              <path\n                d={p.line}\n                fill=\"none\"\n                stroke={p.color}\n                strokeWidth={STROKE_WIDTH}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n              {active != null && value != null && (\n                <circle\n                  className={c.marker}\n                  cx={geo.x(active)}\n                  cy={geo.y(value)}\n                  r={MARKER_RADIUS}\n                  fill={p.color}\n                  strokeWidth=\"1.5\"\n                />\n              )}\n            </g>\n          )\n        })}\n        {active != null && (\n          <line\n            className={c.crosshair}\n            x1={geo.x(active)}\n            y1={geo.plotTop}\n            x2={geo.x(active)}\n            y2={geo.plotBottom}\n            strokeDasharray=\"3 3\"\n          />\n        )}\n        {geo.columns.map((col) => (\n          <rect\n            key={col.index}\n            data-index={col.index}\n            x={col.x}\n            y={0}\n            width={col.width}\n            height={height}\n            fill=\"transparent\"\n            onMouseEnter={() => setActive(col.index)}\n          />\n        ))}\n      </svg>\n      {active != null && (\n        <div\n          className={c.tooltip}\n          role=\"status\"\n          style={{ left: `${tooltipLeftPercent(geo, active)}%`, top: TOOLTIP_TOP_PX }}\n        >\n          <div className={c.tooltipLabel}>{labels[active]}</div>\n          {series.map((s, si) => (\n            <div key={s.id} className={c.tooltipRow}>\n              <span style={{ color: geo.paths[si].color }}>{s.name}</span>\n              <b>{s.data[active] != null ? formatValue(s.data[active]) : '—'}</b>\n            </div>\n          ))}\n        </div>\n      )}\n      {showLegend && (\n        <div className={c.legend}>\n          {series.map((s, si) => (\n            <span key={s.id} className={c.legendItem}>\n              <i className={c.legendSwatch} style={{ background: geo.paths[si].color }} aria-hidden=\"true\" />\n              {s.name}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n"],
+  "mappings": "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",
+  "names": ["LineChart", "c"]
+}

package/dist/react-link-card.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-WSPJTQAV.js";
 import {
   cn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-link-card/dist/index.js
 import * as React from "react";

package/dist/react-live-captions.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-live-captions/dist/index.js
 import * as React from "react";

package/dist/react-live-cursors.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-live-cursors/dist/index.js
 import * as React from "react";

package/dist/react-live-transcript.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-live-transcript/dist/index.js
 import * as React from "react";

package/dist/react-location-selector.js

@@ -1,7 +1,7 @@
 import {
   cn,
   generateId
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-location-selector/dist/index.js
 import * as React from "react";

package/dist/react-logger.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-XWP763SH.js";
 import {
   devWarn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-logger/dist/index.js
 import * as React from "react";

package/dist/react-markdown-renderer.js

@@ -2,8 +2,8 @@ import {
   MarkdownRenderer,
   markdownRendererTokens,
   proseVariants
-} from "./chunk-UNEM2TRI.js";
-import "./chunk-ZF3OHCGV.js";
+} from "./chunk-SDAJVXD4.js";
+import "./chunk-2Q6HHFAN.js";
 export {
   MarkdownRenderer,
   markdownRendererTokens,

package/dist/react-marquee-strip.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-marquee-strip/dist/index.js
 import * as React from "react";

package/dist/react-mascot.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-mascot/dist/index.js
 import * as React from "react";

package/dist/react-mastery-bar.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-mastery-bar/dist/index.js
 import * as React from "react";

package/dist/react-mini-map.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-mini-map/dist/index.js
 import * as React from "react";

package/dist/react-mobile-nav.js

@@ -5,7 +5,7 @@ import {
   cva,
   devWarn,
   generateId
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-mobile-nav/dist/index.js
 import * as React from "react";

package/dist/react-navbar.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-navbar/dist/index.js
 import * as React from "react";

package/dist/react-numbered-steps.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-numbered-steps/dist/index.js
 import * as React from "react";

package/dist/react-otp-input.js

@@ -2,7 +2,7 @@ import {
   Keys,
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-otp-input/dist/index.js
 import * as React from "react";

package/dist/react-page-header.js

@@ -0,0 +1,40 @@
+import {
+  cn
+} from "./chunk-2Q6HHFAN.js";
+
+// ../react-page-header/dist/index.js
+import * as React from "react";
+
+// ../page-header/dist/index.js
+function createPageHeader(props = {}) {
+  return {
+    dataAttributes: {
+      "data-slot": "page-header",
+      "data-has-actions": props.hasActions ? "true" : "false"
+    }
+  };
+}
+var pageHeaderClass = "flex flex-wrap items-start justify-between gap-4";
+var pageHeaderTextClass = "flex min-w-0 flex-1 flex-col gap-1";
+var pageHeaderKickerClass = "break-words text-[11px] uppercase tracking-wider text-muted-foreground";
+var pageHeaderTitleClass = "break-words text-xl font-semibold text-foreground";
+var pageHeaderDescriptionClass = "max-w-prose text-sm text-muted-foreground";
+var pageHeaderActionsClass = "flex flex-none flex-wrap items-center gap-2";
+
+// ../react-page-header/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var PageHeader = React.forwardRef(function PageHeader2({ kicker, title, description, actions, as: Title = "h1", className, ...props }, ref) {
+  const { dataAttributes } = createPageHeader({ hasActions: actions != null });
+  return /* @__PURE__ */ jsxs("header", { ref, className: cn(pageHeaderClass, className), ...dataAttributes, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: pageHeaderTextClass, children: [
+      kicker != null && /* @__PURE__ */ jsx("p", { className: pageHeaderKickerClass, children: kicker }),
+      /* @__PURE__ */ jsx(Title, { className: pageHeaderTitleClass, children: title }),
+      description != null && /* @__PURE__ */ jsx("div", { className: pageHeaderDescriptionClass, children: description })
+    ] }),
+    actions != null && /* @__PURE__ */ jsx("div", { className: pageHeaderActionsClass, children: actions })
+  ] });
+});
+export {
+  PageHeader
+};
+//# sourceMappingURL=react-page-header.js.map

package/dist/react-page-header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../page-header/src/page-header.ts", "../../page-header/src/page-header.styles.ts", "../../react-page-header/src/page-header.tsx"],
+  "sourcesContent": ["/** Heading element used for the page title. */\nexport type PageHeaderTitleLevel = 'h1' | 'h2' | 'h3'\n\nexport interface PageHeaderProps {\n  /** Whether an actions slot will be rendered. */\n  hasActions?: boolean\n}\n\nexport interface PageHeaderAPI {\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic data attributes for a PageHeader — the heading\n * cluster at the top of an application page (kicker, title, description and a\n * trailing actions row). Unlike SectionHead (a centred marketing heading) it is\n * sized for dense app chrome and never centres.\n */\nexport function createPageHeader(props: PageHeaderProps = {}): PageHeaderAPI {\n  return {\n    dataAttributes: {\n      'data-slot': 'page-header',\n      'data-has-actions': props.hasActions ? 'true' : 'false',\n    },\n  }\n}\n", "/**\n * Root: text cluster on the leading edge, actions on the trailing edge; wraps\n * on narrow screens. Carries no outer margin — the page layout spaces it.\n */\nexport const pageHeaderClass = 'flex flex-wrap items-start justify-between gap-4'\n\n/** Text cluster (kicker, title, description). */\nexport const pageHeaderTextClass = 'flex min-w-0 flex-1 flex-col gap-1'\n\n/** Small uppercase eyebrow above the title. */\nexport const pageHeaderKickerClass =\n  'break-words text-[11px] uppercase tracking-wider text-muted-foreground'\n\n/** Title — app-sized, not a marketing display size. */\nexport const pageHeaderTitleClass = 'break-words text-xl font-semibold text-foreground'\n\n/** Supporting copy under the title, capped at a readable measure. */\nexport const pageHeaderDescriptionClass = 'max-w-prose text-sm text-muted-foreground'\n\n/** Trailing actions row. */\nexport const pageHeaderActionsClass = 'flex flex-none flex-wrap items-center gap-2'\n", "import * as React from 'react'\nimport {\n  createPageHeader,\n  pageHeaderClass,\n  pageHeaderTextClass,\n  pageHeaderKickerClass,\n  pageHeaderTitleClass,\n  pageHeaderDescriptionClass,\n  pageHeaderActionsClass,\n  type PageHeaderTitleLevel,\n} from '@refraction-ui/page-header'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { PageHeaderTitleLevel }\n\nexport interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n  /** Optional eyebrow rendered above the title. */\n  kicker?: React.ReactNode\n  /** The page title (required). */\n  title: React.ReactNode\n  /** Optional supporting copy under the title. */\n  description?: React.ReactNode\n  /** Optional actions (buttons, menus) on the trailing edge. */\n  actions?: React.ReactNode\n  /** Heading element for the title. Defaults to `h1`. */\n  as?: PageHeaderTitleLevel\n}\n\n/**\n * PageHeader — the heading cluster at the top of an application page: kicker,\n * title, description and a trailing actions row. Renders a `<header>`.\n */\nexport const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(\n  { kicker, title, description, actions, as: Title = 'h1', className, ...props },\n  ref,\n) {\n  const { dataAttributes } = createPageHeader({ hasActions: actions != null })\n  return (\n    <header ref={ref} className={cn(pageHeaderClass, className)} {...dataAttributes} {...props}>\n      <div className={pageHeaderTextClass}>\n        {kicker != null && <p className={pageHeaderKickerClass}>{kicker}</p>}\n        <Title className={pageHeaderTitleClass}>{title}</Title>\n        {description != null && <div className={pageHeaderDescriptionClass}>{description}</div>}\n      </div>\n      {actions != null && <div className={pageHeaderActionsClass}>{actions}</div>}\n    </header>\n  )\n})\n"],
+  "mappings": ";;;;;;;;AAmBO,SAAS,iBAAiB,QAAyB,CAAA,GAAmB;AAC3E,SAAO;IACL,gBAAgB;MACd,aAAa;MACb,oBAAoB,MAAM,aAAa,SAAS;IAAA;EAClD;AAEJ;ACtBO,IAAM,kBAAkB;AAGxB,IAAM,sBAAsB;AAG5B,IAAM,wBACX;AAGK,IAAM,uBAAuB;AAG7B,IAAM,6BAA6B;AAGnC,IAAM,yBAAyB;;;;ACY/B,IAAM,aAAmB,iBAAyC,SAASA,YAChF,EAAE,QAAQ,OAAO,aAAa,SAAS,IAAI,QAAQ,MAAM,WAAW,GAAG,MAAA,GACvE,KACA;AACA,QAAM,EAAE,eAAA,IAAmB,iBAAiB,EAAE,YAAY,WAAW,KAAA,CAAM;AAC3E,SACE,qBAAC,UAAA,EAAO,KAAU,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,gBAAiB,GAAG,OACnF,UAAA;IAAA,qBAAC,OAAA,EAAI,WAAW,qBACb,UAAA;MAAA,UAAU,QAAQ,oBAAC,KAAA,EAAE,WAAW,uBAAwB,UAAA,OAAA,CAAO;MAChE,oBAAC,OAAA,EAAM,WAAW,sBAAuB,UAAA,MAAA,CAAM;MAC9C,eAAe,QAAQ,oBAAC,OAAA,EAAI,WAAW,4BAA6B,UAAA,YAAA,CAAY;IAAA,EAAA,CACnF;IACC,WAAW,QAAQ,oBAAC,OAAA,EAAI,WAAW,wBAAyB,UAAA,QAAA,CAAQ;EAAA,EAAA,CACvE;AAEJ,CAAC;",
+  "names": ["PageHeader"]
+}

package/dist/react-pagination.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-pagination/dist/index.js
 import * as React from "react";

package/dist/react-password-input.js

@@ -1,10 +1,10 @@
 import {
   Input
-} from "./chunk-TOZBR4GL.js";
+} from "./chunk-RSWOLRIC.js";
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-password-input/dist/index.js
 import * as React from "react";

package/dist/react-payment.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-payment/dist/index.js
 import * as React from "react";

package/dist/react-popover.js

@@ -5,7 +5,7 @@ import {
   cva,
   devWarn,
   generateId
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-popover/dist/index.js
 import * as React from "react";

package/dist/react-pre-call-lobby.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-pre-call-lobby/dist/index.js
 import * as React from "react";

package/dist/react-presence-indicator.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-presence-indicator/dist/index.js
 import * as React from "react";

package/dist/react-pricing-card.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-pricing-card/dist/index.js
 import * as React from "react";

package/dist/react-progress-display.js

@@ -1,7 +1,7 @@
 import {
   cn,
   cva
-} from "./chunk-ZF3OHCGV.js";
+} from "./chunk-2Q6HHFAN.js";
 
 // ../react-progress-display/dist/index.js
 import * as React from "react";
@@ -80,7 +80,7 @@ var badgeItemVariants = cva({
   }
 });
 var progressBarVariants = cva({
-  base: "h-2 w-full overflow-hidden rounded-full bg-secondary",
+  base: "w-full overflow-hidden rounded-full bg-secondary",
   variants: {
     size: {
       sm: "h-1",