@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/lib/annotations.d.ts

@@ -0,0 +1,103 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { Label, ReferenceLine as ReferenceLine$1, ReferenceArea, ReferenceDot } from 'recharts';
+
+/**
+ * Where each annotation sits in the stack, and the numbers are not arbitrary:
+ * they are the rule editorial charting settled on, expressed in Recharts' own
+ * z-index scale (grid -100, area 100, bar 300, line 400, axis 500, dot 1200).
+ *
+ *   A BAND is context, so it goes behind everything — behind the data AND
+ *   behind the grid. A band drawn over its own gridlines reads as a second
+ *   surface rather than as a region of the first.
+ *
+ *   A LINE is a claim about the data — a target, a threshold, a limit — so it
+ *   goes above the marks. A reference line hidden behind a bar is a reference
+ *   nobody can check.
+ *
+ *   A TEXT annotation explains both, so it goes above both, and above the
+ *   hover dot too. It is the last thing drawn because it is the last thing to
+ *   be occluded.
+ *
+ * The decorative plate sits below the band, because a plate is not context —
+ * it is wallpaper.
+ */
+declare const ANNOTATION_LAYER: {
+    readonly plate: -300;
+    readonly band: -200;
+    readonly line: 450;
+    readonly text: 1500;
+};
+/** How much a reference mark insists. */
+type AnnotationWeight = 'quiet' | 'firm';
+interface ReferenceLineProps {
+    /** The value on the category axis. Give exactly one of `x` or `y`. */
+    x?: string | number;
+    /** The value on the value axis. Give exactly one of `x` or `y`. */
+    y?: string | number;
+    /** Printed at the end of the line. Keep it to a couple of words. */
+    label?: string;
+    weight?: AnnotationWeight;
+    /** Where the label sits. Defaults to the line's far end. */
+    labelPosition?: ComponentProps<typeof Label>['position'];
+    referenceLineProps?: ComponentProps<typeof ReferenceLine$1>;
+}
+/**
+ * A target, a threshold, a limit, a budget — one number the data is being read
+ * against.
+ *
+ * Worth reaching for more often than it is: most charts that look like they
+ * need a second series actually need this. "Are we above the line" is a
+ * question a reference line answers at a glance and a second series does not.
+ *
+ * @example
+ * <LineChart.ReferenceLine y={250} label="Target" weight="firm" />
+ */
+declare function ReferenceLine({ x, y, label, weight, labelPosition, referenceLineProps, }: ReferenceLineProps): react.JSX.Element;
+interface ReferenceBandProps {
+    /** A span on the category axis, as `[from, to]`. */
+    x?: [string | number, string | number];
+    /** A span on the value axis, as `[from, to]`. */
+    y?: [string | number, string | number];
+    /** Printed inside the band's top edge. */
+    label?: string;
+    referenceAreaProps?: ComponentProps<typeof ReferenceArea>;
+}
+/**
+ * A region the data is read against — a healthy range, a recession, a period
+ * the numbers should not be trusted for.
+ *
+ * Drawn behind the grid, so it reads as a stretch of the ground rather than as
+ * a mark on it. That placement is the whole difference between "this period"
+ * and "this value".
+ *
+ * @example
+ * <AreaChart.ReferenceBand x={['Mar', 'May']} label="Migration" />
+ */
+declare function ReferenceBand({ x, y, label, referenceAreaProps }: ReferenceBandProps): react.JSX.Element;
+interface AnnotationProps {
+    /** Where on the category axis the note points. */
+    x?: string | number;
+    /** Where on the value axis the note points. */
+    y?: number;
+    /** The note itself. One short sentence at most. */
+    text: ReactNode;
+    /** Draws a dot at the anchor, for when the note sits away from its point. */
+    showAnchor?: boolean;
+    position?: ComponentProps<typeof Label>['position'];
+    referenceDotProps?: ComponentProps<typeof ReferenceDot>;
+}
+/**
+ * A note on the plot — what happened here, and why the shape changed.
+ *
+ * The part of a chart that most often does the actual explaining, and the part
+ * almost no component library ships. A reader who is told "deploy freeze"
+ * beside the flat stretch does not have to guess, and no amount of axis work
+ * substitutes for that sentence.
+ *
+ * @example
+ * <LineChart.Annotation x="Apr" y={280} text="Pricing change" showAnchor />
+ */
+declare function Annotation({ x, y, text, showAnchor, position, referenceDotProps, }: AnnotationProps): react.JSX.Element;
+
+export { ANNOTATION_LAYER, Annotation, type AnnotationProps, type AnnotationWeight, ReferenceBand, type ReferenceBandProps, ReferenceLine, type ReferenceLineProps };

package/dist/charts/lib/annotations.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  Label,
+  ReferenceArea as RechartsReferenceArea,
+  ReferenceDot as RechartsReferenceDot,
+  ReferenceLine as RechartsReferenceLine,
+  ZIndexLayer
+} from "recharts";
+const ANNOTATION_LAYER = {
+  plate: -300,
+  band: -200,
+  line: 450,
+  text: 1500
+};
+const STROKE = {
+  // A dashed hairline in the rule colour: present, and clearly not data.
+  quiet: { width: 1, dash: "4 4", color: "var(--chart-cursor)" },
+  // Solid ink. For the one threshold the chart is actually about.
+  firm: { width: 1.5, color: "var(--ink)" }
+};
+function ReferenceLine({
+  x,
+  y,
+  label,
+  weight = "quiet",
+  labelPosition,
+  referenceLineProps
+}) {
+  const stroke = STROKE[weight];
+  const horizontal = y !== void 0;
+  return /* @__PURE__ */ jsx(ZIndexLayer, { zIndex: ANNOTATION_LAYER.line, children: /* @__PURE__ */ jsx(
+    RechartsReferenceLine,
+    {
+      x,
+      y,
+      stroke: stroke.color,
+      strokeWidth: stroke.width,
+      strokeDasharray: stroke.dash,
+      ifOverflow: "extendDomain",
+      ...referenceLineProps,
+      children: label && /* @__PURE__ */ jsx(
+        Label,
+        {
+          value: label,
+          position: labelPosition ?? (horizontal ? "insideTopRight" : "insideTopLeft"),
+          className: "fill-(--ink-2) text-[11px]"
+        }
+      )
+    }
+  ) });
+}
+function ReferenceBand({ x, y, label, referenceAreaProps }) {
+  return /* @__PURE__ */ jsx(ZIndexLayer, { zIndex: ANNOTATION_LAYER.band, children: /* @__PURE__ */ jsx(
+    RechartsReferenceArea,
+    {
+      x1: x?.[0],
+      x2: x?.[1],
+      y1: y?.[0],
+      y2: y?.[1],
+      fill: "var(--ink)",
+      fillOpacity: "calc(var(--chart-fill) * 0.4)",
+      stroke: "none",
+      ifOverflow: "extendDomain",
+      ...referenceAreaProps,
+      children: label && /* @__PURE__ */ jsx(Label, { value: label, position: "insideTopLeft", className: "fill-(--ink-3-aa) text-[11px]" })
+    }
+  ) });
+}
+function Annotation({
+  x,
+  y,
+  text,
+  showAnchor = false,
+  position = "top",
+  referenceDotProps
+}) {
+  return /* @__PURE__ */ jsx(ZIndexLayer, { zIndex: ANNOTATION_LAYER.text, children: /* @__PURE__ */ jsx(
+    RechartsReferenceDot,
+    {
+      x,
+      y,
+      r: showAnchor ? 3 : 0,
+      fill: showAnchor ? "var(--ink)" : "none",
+      stroke: showAnchor ? "var(--chart-surface)" : "none",
+      strokeWidth: showAnchor ? 1.5 : 0,
+      ifOverflow: "extendDomain",
+      ...referenceDotProps,
+      children: /* @__PURE__ */ jsx(Label, { value: String(text), position, className: "fill-(--ink) text-[11px]" })
+    }
+  ) });
+}
+export {
+  ANNOTATION_LAYER,
+  Annotation,
+  ReferenceBand,
+  ReferenceLine
+};
+//# sourceMappingURL=annotations.js.map

package/dist/charts/lib/annotations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/annotations.tsx"],"sourcesContent":["'use client'\n\nimport type { ComponentProps, ReactNode } from 'react'\nimport {\n  Label,\n  ReferenceArea as RechartsReferenceArea,\n  ReferenceDot as RechartsReferenceDot,\n  ReferenceLine as RechartsReferenceLine,\n  ZIndexLayer,\n} from 'recharts'\n\n/**\n * Where each annotation sits in the stack, and the numbers are not arbitrary:\n * they are the rule editorial charting settled on, expressed in Recharts' own\n * z-index scale (grid -100, area 100, bar 300, line 400, axis 500, dot 1200).\n *\n *   A BAND is context, so it goes behind everything — behind the data AND\n *   behind the grid. A band drawn over its own gridlines reads as a second\n *   surface rather than as a region of the first.\n *\n *   A LINE is a claim about the data — a target, a threshold, a limit — so it\n *   goes above the marks. A reference line hidden behind a bar is a reference\n *   nobody can check.\n *\n *   A TEXT annotation explains both, so it goes above both, and above the\n *   hover dot too. It is the last thing drawn because it is the last thing to\n *   be occluded.\n *\n * The decorative plate sits below the band, because a plate is not context —\n * it is wallpaper.\n */\nexport const ANNOTATION_LAYER = {\n  plate: -300,\n  band: -200,\n  line: 450,\n  text: 1500,\n} as const\n\n/** How much a reference mark insists. */\nexport type AnnotationWeight = 'quiet' | 'firm'\n\nconst STROKE: Record<AnnotationWeight, { width: number; dash?: string; color: string }> = {\n  // A dashed hairline in the rule colour: present, and clearly not data.\n  quiet: { width: 1, dash: '4 4', color: 'var(--chart-cursor)' },\n  // Solid ink. For the one threshold the chart is actually about.\n  firm: { width: 1.5, color: 'var(--ink)' },\n}\n\nexport interface ReferenceLineProps {\n  /** The value on the category axis. Give exactly one of `x` or `y`. */\n  x?: string | number\n  /** The value on the value axis. Give exactly one of `x` or `y`. */\n  y?: string | number\n  /** Printed at the end of the line. Keep it to a couple of words. */\n  label?: string\n  weight?: AnnotationWeight\n  /** Where the label sits. Defaults to the line's far end. */\n  labelPosition?: ComponentProps<typeof Label>['position']\n  referenceLineProps?: ComponentProps<typeof RechartsReferenceLine>\n}\n\n/**\n * A target, a threshold, a limit, a budget — one number the data is being read\n * against.\n *\n * Worth reaching for more often than it is: most charts that look like they\n * need a second series actually need this. \"Are we above the line\" is a\n * question a reference line answers at a glance and a second series does not.\n *\n * @example\n * <LineChart.ReferenceLine y={250} label=\"Target\" weight=\"firm\" />\n */\nexport function ReferenceLine({\n  x,\n  y,\n  label,\n  weight = 'quiet',\n  labelPosition,\n  referenceLineProps,\n}: ReferenceLineProps) {\n  const stroke = STROKE[weight]\n  const horizontal = y !== undefined\n\n  return (\n    <ZIndexLayer zIndex={ANNOTATION_LAYER.line}>\n      <RechartsReferenceLine\n        x={x}\n        y={y}\n        stroke={stroke.color}\n        strokeWidth={stroke.width}\n        strokeDasharray={stroke.dash}\n        // Clamped rather than dropped: a target above every value is exactly\n        // the case a reader most needs to see, and `ifOverflow=\"discard\"`\n        // would silently remove it.\n        ifOverflow=\"extendDomain\"\n        {...referenceLineProps}\n      >\n        {label && (\n          <Label\n            value={label}\n            position={labelPosition ?? (horizontal ? 'insideTopRight' : 'insideTopLeft')}\n            className=\"fill-(--ink-2) text-[11px]\"\n          />\n        )}\n      </RechartsReferenceLine>\n    </ZIndexLayer>\n  )\n}\n\nexport interface ReferenceBandProps {\n  /** A span on the category axis, as `[from, to]`. */\n  x?: [string | number, string | number]\n  /** A span on the value axis, as `[from, to]`. */\n  y?: [string | number, string | number]\n  /** Printed inside the band's top edge. */\n  label?: string\n  referenceAreaProps?: ComponentProps<typeof RechartsReferenceArea>\n}\n\n/**\n * A region the data is read against — a healthy range, a recession, a period\n * the numbers should not be trusted for.\n *\n * Drawn behind the grid, so it reads as a stretch of the ground rather than as\n * a mark on it. That placement is the whole difference between \"this period\"\n * and \"this value\".\n *\n * @example\n * <AreaChart.ReferenceBand x={['Mar', 'May']} label=\"Migration\" />\n */\nexport function ReferenceBand({ x, y, label, referenceAreaProps }: ReferenceBandProps) {\n  return (\n    <ZIndexLayer zIndex={ANNOTATION_LAYER.band}>\n      <RechartsReferenceArea\n        x1={x?.[0]}\n        x2={x?.[1]}\n        y1={y?.[0]}\n        y2={y?.[1]}\n        fill=\"var(--ink)\"\n        // Deliberately fainter than a data fill: the band is the ground the\n        // data is read against, and a ground that competes stops being one.\n        fillOpacity=\"calc(var(--chart-fill) * 0.4)\"\n        stroke=\"none\"\n        ifOverflow=\"extendDomain\"\n        {...referenceAreaProps}\n      >\n        {label && (\n          <Label value={label} position=\"insideTopLeft\" className=\"fill-(--ink-3-aa) text-[11px]\" />\n        )}\n      </RechartsReferenceArea>\n    </ZIndexLayer>\n  )\n}\n\nexport interface AnnotationProps {\n  /** Where on the category axis the note points. */\n  x?: string | number\n  /** Where on the value axis the note points. */\n  y?: number\n  /** The note itself. One short sentence at most. */\n  text: ReactNode\n  /** Draws a dot at the anchor, for when the note sits away from its point. */\n  showAnchor?: boolean\n  position?: ComponentProps<typeof Label>['position']\n  referenceDotProps?: ComponentProps<typeof RechartsReferenceDot>\n}\n\n/**\n * A note on the plot — what happened here, and why the shape changed.\n *\n * The part of a chart that most often does the actual explaining, and the part\n * almost no component library ships. A reader who is told \"deploy freeze\"\n * beside the flat stretch does not have to guess, and no amount of axis work\n * substitutes for that sentence.\n *\n * @example\n * <LineChart.Annotation x=\"Apr\" y={280} text=\"Pricing change\" showAnchor />\n */\nexport function Annotation({\n  x,\n  y,\n  text,\n  showAnchor = false,\n  position = 'top',\n  referenceDotProps,\n}: AnnotationProps) {\n  return (\n    <ZIndexLayer zIndex={ANNOTATION_LAYER.text}>\n      <RechartsReferenceDot\n        x={x}\n        y={y}\n        r={showAnchor ? 3 : 0}\n        fill={showAnchor ? 'var(--ink)' : 'none'}\n        stroke={showAnchor ? 'var(--chart-surface)' : 'none'}\n        strokeWidth={showAnchor ? 1.5 : 0}\n        ifOverflow=\"extendDomain\"\n        {...referenceDotProps}\n      >\n        <Label value={String(text)} position={position} className=\"fill-(--ink) text-[11px]\" />\n      </RechartsReferenceDot>\n    </ZIndexLayer>\n  )\n}\n"],"mappings":";AAkGU;AA/FV;AAAA,EACE;AAAA,EACA,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB;AAAA,OACK;AAsBA,MAAM,mBAAmB;AAAA,EAC9B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAKA,MAAM,SAAoF;AAAA;AAAA,EAExF,OAAO,EAAE,OAAO,GAAG,MAAM,OAAO,OAAO,sBAAsB;AAAA;AAAA,EAE7D,MAAM,EAAE,OAAO,KAAK,OAAO,aAAa;AAC1C;AA0BO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,SAAS,OAAO,MAAM;AAC5B,QAAM,aAAa,MAAM;AAEzB,SACE,oBAAC,eAAY,QAAQ,iBAAiB,MACpC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQ,OAAO;AAAA,MACf,aAAa,OAAO;AAAA,MACpB,iBAAiB,OAAO;AAAA,MAIxB,YAAW;AAAA,MACV,GAAG;AAAA,MAEH,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,kBAAkB,aAAa,mBAAmB;AAAA,UAC5D,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EAEJ,GACF;AAEJ;AAuBO,SAAS,cAAc,EAAE,GAAG,GAAG,OAAO,mBAAmB,GAAuB;AACrF,SACE,oBAAC,eAAY,QAAQ,iBAAiB,MACpC;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,IAAI,CAAC;AAAA,MACT,IAAI,IAAI,CAAC;AAAA,MACT,IAAI,IAAI,CAAC;AAAA,MACT,IAAI,IAAI,CAAC;AAAA,MACT,MAAK;AAAA,MAGL,aAAY;AAAA,MACZ,QAAO;AAAA,MACP,YAAW;AAAA,MACV,GAAG;AAAA,MAEH,mBACC,oBAAC,SAAM,OAAO,OAAO,UAAS,iBAAgB,WAAU,iCAAgC;AAAA;AAAA,EAE5F,GACF;AAEJ;AA0BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AACF,GAAoB;AAClB,SACE,oBAAC,eAAY,QAAQ,iBAAiB,MACpC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,GAAG,aAAa,IAAI;AAAA,MACpB,MAAM,aAAa,eAAe;AAAA,MAClC,QAAQ,aAAa,yBAAyB;AAAA,MAC9C,aAAa,aAAa,MAAM;AAAA,MAChC,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ,8BAAC,SAAM,OAAO,OAAO,IAAI,GAAG,UAAoB,WAAU,4BAA2B;AAAA;AAAA,EACvF,GACF;AAEJ;","names":[]}

package/dist/charts/lib/axis.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+
+/**
+ * The name of what an axis measures, drawn beside it.
+ *
+ * The most-skipped part of a chart and one of the cheapest to get right: an
+ * axis reading 0 · 100 · 200 says nothing about whether those are people,
+ * milliseconds or dollars, and the reader is left inferring it from the title —
+ * if there is one. Every serious charting system has this and most component
+ * libraries leave it to the call site.
+ *
+ * Not always needed, which is why it is a prop rather than a requirement: when
+ * the series' own label already carries the unit ("Load time (ms)"), a second
+ * copy on the axis is noise. The rule is that the unit appears once.
+ */
+declare function axisLabel(label: string | undefined, axis: 'x' | 'y'): react.JSX.Element | null;
+
+export { axisLabel };

package/dist/charts/lib/axis.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Label } from "recharts";
+function axisLabel(label, axis) {
+  if (!label) return null;
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      value: label,
+      angle: axis === "y" ? -90 : 0,
+      position: axis === "y" ? "insideLeft" : "insideBottom",
+      offset: axis === "y" ? 0 : -2,
+      className: "fill-(--chart-axis) text-[11px]",
+      style: { textAnchor: "middle" }
+    }
+  );
+}
+export {
+  axisLabel
+};
+//# sourceMappingURL=axis.js.map

package/dist/charts/lib/axis.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/axis.tsx"],"sourcesContent":["'use client'\n\nimport { Label } from 'recharts'\n\n/**\n * The name of what an axis measures, drawn beside it.\n *\n * The most-skipped part of a chart and one of the cheapest to get right: an\n * axis reading 0 · 100 · 200 says nothing about whether those are people,\n * milliseconds or dollars, and the reader is left inferring it from the title —\n * if there is one. Every serious charting system has this and most component\n * libraries leave it to the call site.\n *\n * Not always needed, which is why it is a prop rather than a requirement: when\n * the series' own label already carries the unit (\"Load time (ms)\"), a second\n * copy on the axis is noise. The rule is that the unit appears once.\n */\nexport function axisLabel(label: string | undefined, axis: 'x' | 'y') {\n  if (!label) return null\n\n  return (\n    <Label\n      value={label}\n      // The vertical axis reads bottom-to-top, which is the convention every\n      // print and screen tradition shares — and the only orientation that does\n      // not force the reader to tilt their head the wrong way.\n      angle={axis === 'y' ? -90 : 0}\n      position={axis === 'y' ? 'insideLeft' : 'insideBottom'}\n      offset={axis === 'y' ? 0 : -2}\n      className=\"fill-(--chart-axis) text-[11px]\"\n      style={{ textAnchor: 'middle' }}\n    />\n  )\n}\n"],"mappings":";AAqBI;AAnBJ,SAAS,aAAa;AAef,SAAS,UAAU,OAA2B,MAAiB;AACpE,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MAIP,OAAO,SAAS,MAAM,MAAM;AAAA,MAC5B,UAAU,SAAS,MAAM,eAAe;AAAA,MACxC,QAAQ,SAAS,MAAM,IAAI;AAAA,MAC3B,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAS;AAAA;AAAA,EAChC;AAEJ;","names":[]}

package/dist/charts/lib/background.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+
+/**
+ * The decorative plate behind a plot.
+ *
+ * Eleven, and the count is the point: with hue spent, a chart's personality has
+ * to come from somewhere, and a plate is the one place texture can be loud
+ * without competing with the marks — it sits behind them, at a fraction of the
+ * rule's weight, under a mask that dissolves it before it reaches an axis.
+ *
+ * To add one: extend this union, write the `<pattern>`, register it in
+ * `PATTERNS`. The union is what makes a missing registration a type error.
+ */
+type ChartBackgroundVariant = 'dots' | 'grid' | 'cross-hatch' | 'diagonal-lines' | 'plus' | 'falling-triangles' | '4-pointed-star' | 'tiny-checkers' | 'overlapping-circles' | 'wiggle-lines' | 'bubbles';
+interface ChartBackgroundProps {
+    variant: ChartBackgroundVariant;
+}
+/**
+ * Renders the plate under the plot. Compose it inside any cartesian chart:
+ * `<LineChart.Background variant="dots" />`.
+ *
+ * `ZIndexLayer` at -1 is what keeps it behind the marks — SVG paints in
+ * document order, so without it the plate would depend on where the consumer
+ * happened to write the element.
+ *
+ * The plate is masked by a blurred inset rectangle, which is why it fades out
+ * before it reaches the axes instead of stopping at a hard edge against them.
+ * The blur is on a MASK, not on the artwork: nothing in the system draws a
+ * blurred mark.
+ */
+declare function ChartBackground({ variant }: ChartBackgroundProps): react.JSX.Element | null;
+
+export { ChartBackground, type ChartBackgroundProps, type ChartBackgroundVariant };

package/dist/charts/lib/background.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { ZIndexLayer, usePlotArea } from "recharts";
+const Dots = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("circle", { cx: "2", cy: "2", r: "1", fill: "currentColor" }) });
+const Grid = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M 20 0 L 0 0 0 20", fill: "none", stroke: "currentColor", strokeWidth: "0.5" }) });
+const CrossHatch = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M 0 0 L 20 20 M 20 0 L 0 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeOpacity: "0.6",
+    strokeWidth: "0.5"
+  }
+) });
+const DiagonalLines = ({ id }) => /* @__PURE__ */ jsx(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "6",
+    height: "6",
+    patternUnits: "userSpaceOnUse",
+    patternTransform: "rotate(45)",
+    children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: "6", stroke: "currentColor", strokeWidth: "0.5" })
+  }
+);
+const Plus = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "16", height: "16", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M 8 4 L 8 12 M 4 8 L 12 8",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "0.5",
+    strokeLinecap: "round"
+  }
+) });
+const FallingTriangles = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "18", height: "36", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z",
+    transform: "scale(0.5)",
+    fill: "currentColor",
+    fillOpacity: "0.4"
+  }
+) });
+const FourPointedStar = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "16", height: "16", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+  "polygon",
+  {
+    fillRule: "evenodd",
+    points: "5 3 8 4 5 5 4 8 3 5 0 4 3 3 4 0 5 3",
+    fill: "currentColor",
+    fillOpacity: "0.4"
+  }
+) });
+const TinyCheckers = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "8", height: "8", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M0 0h4v4H0V0zm4 4h4v4H4V4z",
+    fill: "currentColor",
+    fillOpacity: "0.2"
+  }
+) });
+const OverlappingCircles = ({ id }) => /* @__PURE__ */ jsx("pattern", { id, x: "0", y: "0", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M25 25c0-2.762 2.238-5 5-5s5 2.238 5 5-2.238 5-5 5c0 2.762-2.238 5-5 5s-5-2.238-5-5 2.238-5 5-5zM5 5c0-2.762 2.238-5 5-5s5 2.238 5 5-2.238 5-5 5c0 2.762-2.238 5-5 5S0 12.762 0 10s2.238-5 5-5zm5 4c2.209 0 4-1.791 4-4s-1.791-4-4-4-4 1.791-4 4 1.791 4 4 4zm20 20c2.209 0 4-1.791 4-4s-1.791-4-4-4-4 1.791-4 4 1.791 4 4 4z",
+    fill: "currentColor",
+    fillOpacity: "0.4"
+  }
+) });
+const WiggleLines = ({ id }) => /* @__PURE__ */ jsx(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "52",
+    height: "26",
+    patternUnits: "userSpaceOnUse",
+    patternTransform: "scale(0.6)",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z",
+        fill: "currentColor",
+        fillOpacity: "0.4"
+      }
+    )
+  }
+);
+const Bubbles = ({ id }) => /* @__PURE__ */ jsx(
+  "pattern",
+  {
+    id,
+    x: "0",
+    y: "0",
+    width: "100",
+    height: "100",
+    patternUnits: "userSpaceOnUse",
+    patternTransform: "scale(0.6667)",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z",
+        fill: "currentColor",
+        fillOpacity: "0.4",
+        fillRule: "evenodd"
+      }
+    )
+  }
+);
+const PATTERNS = {
+  dots: Dots,
+  grid: Grid,
+  plus: Plus,
+  bubbles: Bubbles,
+  "cross-hatch": CrossHatch,
+  "diagonal-lines": DiagonalLines,
+  "falling-triangles": FallingTriangles,
+  "4-pointed-star": FourPointedStar,
+  "tiny-checkers": TinyCheckers,
+  "overlapping-circles": OverlappingCircles,
+  "wiggle-lines": WiggleLines
+};
+function ChartBackground({ variant }) {
+  const base = useId().replace(/:/g, "");
+  const patternId = `${base}-bg-${variant}`;
+  const maskId = `${base}-bg-fade`;
+  const blurId = `${base}-bg-blur`;
+  const Pattern = PATTERNS[variant];
+  const plot = usePlotArea();
+  if (!plot || plot.width <= 0 || plot.height <= 0) return null;
+  const inset = Math.min(plot.width, plot.height) * 0.06;
+  const blur = Math.max(8, Math.min(plot.width, plot.height) * 0.08);
+  return /* @__PURE__ */ jsxs(ZIndexLayer, { zIndex: -1, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(Pattern, { id: patternId }),
+      /* @__PURE__ */ jsx("filter", { id: blurId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: blur }) }),
+      /* @__PURE__ */ jsx("mask", { id: maskId, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: plot.x + inset,
+          y: plot.y + inset,
+          width: Math.max(0, plot.width - inset * 2),
+          height: Math.max(0, plot.height - inset * 2),
+          fill: "white",
+          filter: `url(#${blurId})`
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: "text-(--chart-pattern)",
+        x: plot.x,
+        y: plot.y,
+        width: plot.width,
+        height: plot.height,
+        fill: `url(#${patternId})`,
+        mask: `url(#${maskId})`
+      }
+    )
+  ] });
+}
+export {
+  ChartBackground
+};
+//# sourceMappingURL=background.js.map

package/dist/charts/lib/background.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/background.tsx"],"sourcesContent":["'use client'\n\nimport { useId, type FC } from 'react'\nimport { ZIndexLayer, usePlotArea } from 'recharts'\n\n/**\n * The decorative plate behind a plot.\n *\n * Eleven, and the count is the point: with hue spent, a chart's personality has\n * to come from somewhere, and a plate is the one place texture can be loud\n * without competing with the marks — it sits behind them, at a fraction of the\n * rule's weight, under a mask that dissolves it before it reaches an axis.\n *\n * To add one: extend this union, write the `<pattern>`, register it in\n * `PATTERNS`. The union is what makes a missing registration a type error.\n */\nexport type ChartBackgroundVariant =\n  | 'dots'\n  | 'grid'\n  | 'cross-hatch'\n  | 'diagonal-lines'\n  | 'plus'\n  | 'falling-triangles'\n  | '4-pointed-star'\n  | 'tiny-checkers'\n  | 'overlapping-circles'\n  | 'wiggle-lines'\n  | 'bubbles'\n\ninterface PatternProps {\n  id: string\n}\n\n/** Every pattern paints in `currentColor`, which the layer sets to the token. */\nconst Dots: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\">\n    <circle cx=\"2\" cy=\"2\" r=\"1\" fill=\"currentColor\" />\n  </pattern>\n)\n\nconst Grid: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\">\n    <path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"0.5\" />\n  </pattern>\n)\n\nconst CrossHatch: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\">\n    <path\n      d=\"M 0 0 L 20 20 M 20 0 L 0 20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeOpacity=\"0.6\"\n      strokeWidth=\"0.5\"\n    />\n  </pattern>\n)\n\nconst DiagonalLines: FC<PatternProps> = ({ id }) => (\n  <pattern\n    id={id}\n    x=\"0\"\n    y=\"0\"\n    width=\"6\"\n    height=\"6\"\n    patternUnits=\"userSpaceOnUse\"\n    patternTransform=\"rotate(45)\"\n  >\n    <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"6\" stroke=\"currentColor\" strokeWidth=\"0.5\" />\n  </pattern>\n)\n\nconst Plus: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n    <path\n      d=\"M 8 4 L 8 12 M 4 8 L 12 8\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"0.5\"\n      strokeLinecap=\"round\"\n    />\n  </pattern>\n)\n\nconst FallingTriangles: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"18\" height=\"36\" patternUnits=\"userSpaceOnUse\">\n    <path\n      d=\"M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z\"\n      transform=\"scale(0.5)\"\n      fill=\"currentColor\"\n      fillOpacity=\"0.4\"\n    />\n  </pattern>\n)\n\nconst FourPointedStar: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n    <polygon\n      fillRule=\"evenodd\"\n      points=\"5 3 8 4 5 5 4 8 3 5 0 4 3 3 4 0 5 3\"\n      fill=\"currentColor\"\n      fillOpacity=\"0.4\"\n    />\n  </pattern>\n)\n\nconst TinyCheckers: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"8\" height=\"8\" patternUnits=\"userSpaceOnUse\">\n    <path\n      fillRule=\"evenodd\"\n      d=\"M0 0h4v4H0V0zm4 4h4v4H4V4z\"\n      fill=\"currentColor\"\n      fillOpacity=\"0.2\"\n    />\n  </pattern>\n)\n\nconst OverlappingCircles: FC<PatternProps> = ({ id }) => (\n  <pattern id={id} x=\"0\" y=\"0\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n    <path\n      fillRule=\"evenodd\"\n      d=\"M25 25c0-2.762 2.238-5 5-5s5 2.238 5 5-2.238 5-5 5c0 2.762-2.238 5-5 5s-5-2.238-5-5 2.238-5 5-5zM5 5c0-2.762 2.238-5 5-5s5 2.238 5 5-2.238 5-5 5c0 2.762-2.238 5-5 5S0 12.762 0 10s2.238-5 5-5zm5 4c2.209 0 4-1.791 4-4s-1.791-4-4-4-4 1.791-4 4 1.791 4 4 4zm20 20c2.209 0 4-1.791 4-4s-1.791-4-4-4-4 1.791-4 4 1.791 4 4 4z\"\n      fill=\"currentColor\"\n      fillOpacity=\"0.4\"\n    />\n  </pattern>\n)\n\nconst WiggleLines: FC<PatternProps> = ({ id }) => (\n  <pattern\n    id={id}\n    x=\"0\"\n    y=\"0\"\n    width=\"52\"\n    height=\"26\"\n    patternUnits=\"userSpaceOnUse\"\n    patternTransform=\"scale(0.6)\"\n  >\n    <path\n      d=\"M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z\"\n      fill=\"currentColor\"\n      fillOpacity=\"0.4\"\n    />\n  </pattern>\n)\n\nconst Bubbles: FC<PatternProps> = ({ id }) => (\n  <pattern\n    id={id}\n    x=\"0\"\n    y=\"0\"\n    width=\"100\"\n    height=\"100\"\n    patternUnits=\"userSpaceOnUse\"\n    patternTransform=\"scale(0.6667)\"\n  >\n    <path\n      d=\"M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\"\n      fill=\"currentColor\"\n      fillOpacity=\"0.4\"\n      fillRule=\"evenodd\"\n    />\n  </pattern>\n)\n\nconst PATTERNS: Record<ChartBackgroundVariant, FC<PatternProps>> = {\n  dots: Dots,\n  grid: Grid,\n  plus: Plus,\n  bubbles: Bubbles,\n  'cross-hatch': CrossHatch,\n  'diagonal-lines': DiagonalLines,\n  'falling-triangles': FallingTriangles,\n  '4-pointed-star': FourPointedStar,\n  'tiny-checkers': TinyCheckers,\n  'overlapping-circles': OverlappingCircles,\n  'wiggle-lines': WiggleLines,\n}\n\nexport interface ChartBackgroundProps {\n  variant: ChartBackgroundVariant\n}\n\n/**\n * Renders the plate under the plot. Compose it inside any cartesian chart:\n * `<LineChart.Background variant=\"dots\" />`.\n *\n * `ZIndexLayer` at -1 is what keeps it behind the marks — SVG paints in\n * document order, so without it the plate would depend on where the consumer\n * happened to write the element.\n *\n * The plate is masked by a blurred inset rectangle, which is why it fades out\n * before it reaches the axes instead of stopping at a hard edge against them.\n * The blur is on a MASK, not on the artwork: nothing in the system draws a\n * blurred mark.\n */\nexport function ChartBackground({ variant }: ChartBackgroundProps) {\n  const base = useId().replace(/:/g, '')\n  const patternId = `${base}-bg-${variant}`\n  const maskId = `${base}-bg-fade`\n  const blurId = `${base}-bg-blur`\n  const Pattern = PATTERNS[variant]\n  const plot = usePlotArea()\n\n  // Nothing to sit behind until the chart has measured itself.\n  if (!plot || plot.width <= 0 || plot.height <= 0) return null\n\n  // The plate is drawn to the PLOT rectangle, not to the whole SVG.\n  //\n  // Recharts puts the axes inside the same `<svg>`, so a plate sized to the\n  // surface runs underneath the tick labels — which is how a row of month names\n  // ended up sitting on a field of dots with nothing between them. Bounding it\n  // to the plot means the pattern stops where the data stops, whatever the axis\n  // ends up needing.\n  const inset = Math.min(plot.width, plot.height) * 0.06\n  const blur = Math.max(8, Math.min(plot.width, plot.height) * 0.08)\n\n  return (\n    <ZIndexLayer zIndex={-1}>\n      <defs>\n        <Pattern id={patternId} />\n        <filter id={blurId}>\n          <feGaussianBlur stdDeviation={blur} />\n        </filter>\n        {/* A blurred inset rectangle, so the plate dissolves before it reaches\n            the plot's own edges rather than stopping against them. The blur is\n            on the MASK; nothing in the system draws a blurred mark. */}\n        <mask id={maskId} maskUnits=\"userSpaceOnUse\">\n          <rect\n            x={plot.x + inset}\n            y={plot.y + inset}\n            width={Math.max(0, plot.width - inset * 2)}\n            height={Math.max(0, plot.height - inset * 2)}\n            fill=\"white\"\n            filter={`url(#${blurId})`}\n          />\n        </mask>\n      </defs>\n      <rect\n        className=\"text-(--chart-pattern)\"\n        x={plot.x}\n        y={plot.y}\n        width={plot.width}\n        height={plot.height}\n        fill={`url(#${patternId})`}\n        mask={`url(#${maskId})`}\n      />\n    </ZIndexLayer>\n  )\n}\n"],"mappings":";AAoCI,cAuLE,YAvLF;AAlCJ,SAAS,aAAsB;AAC/B,SAAS,aAAa,mBAAmB;AA+BzC,MAAM,OAAyB,CAAC,EAAE,GAAG,MACnC,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,cAAa,kBAC/D,8BAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,gBAAe,GAClD;AAGF,MAAM,OAAyB,CAAC,EAAE,GAAG,MACnC,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,cAAa,kBAC/D,8BAAC,UAAK,GAAE,qBAAoB,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,GAClF;AAGF,MAAM,aAA+B,CAAC,EAAE,GAAG,MACzC,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,cAAa,kBAC/D;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,aAAY;AAAA;AACd,GACF;AAGF,MAAM,gBAAkC,CAAC,EAAE,GAAG,MAC5C;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,GAAE;AAAA,IACF,GAAE;AAAA,IACF,OAAM;AAAA,IACN,QAAO;AAAA,IACP,cAAa;AAAA,IACb,kBAAiB;AAAA,IAEjB,8BAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,QAAO,gBAAe,aAAY,OAAM;AAAA;AAC5E;AAGF,MAAM,OAAyB,CAAC,EAAE,GAAG,MACnC,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,cAAa,kBAC/D;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA;AAChB,GACF;AAGF,MAAM,mBAAqC,CAAC,EAAE,GAAG,MAC/C,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,cAAa,kBAC/D;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,WAAU;AAAA,IACV,MAAK;AAAA,IACL,aAAY;AAAA;AACd,GACF;AAGF,MAAM,kBAAoC,CAAC,EAAE,GAAG,MAC9C,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,cAAa,kBAC/D;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,QAAO;AAAA,IACP,MAAK;AAAA,IACL,aAAY;AAAA;AACd,GACF;AAGF,MAAM,eAAiC,CAAC,EAAE,GAAG,MAC3C,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,KAAI,QAAO,KAAI,cAAa,kBAC7D;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,GAAE;AAAA,IACF,MAAK;AAAA,IACL,aAAY;AAAA;AACd,GACF;AAGF,MAAM,qBAAuC,CAAC,EAAE,GAAG,MACjD,oBAAC,aAAQ,IAAQ,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,cAAa,kBAC/D;AAAA,EAAC;AAAA;AAAA,IACC,UAAS;AAAA,IACT,GAAE;AAAA,IACF,MAAK;AAAA,IACL,aAAY;AAAA;AACd,GACF;AAGF,MAAM,cAAgC,CAAC,EAAE,GAAG,MAC1C;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,GAAE;AAAA,IACF,GAAE;AAAA,IACF,OAAM;AAAA,IACN,QAAO;AAAA,IACP,cAAa;AAAA,IACb,kBAAiB;AAAA,IAEjB;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,aAAY;AAAA;AAAA,IACd;AAAA;AACF;AAGF,MAAM,UAA4B,CAAC,EAAE,GAAG,MACtC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,GAAE;AAAA,IACF,GAAE;AAAA,IACF,OAAM;AAAA,IACN,QAAO;AAAA,IACP,cAAa;AAAA,IACb,kBAAiB;AAAA,IAEjB;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,UAAS;AAAA;AAAA,IACX;AAAA;AACF;AAGF,MAAM,WAA6D;AAAA,EACjE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,uBAAuB;AAAA,EACvB,gBAAgB;AAClB;AAmBO,SAAS,gBAAgB,EAAE,QAAQ,GAAyB;AACjE,QAAM,OAAO,MAAM,EAAE,QAAQ,MAAM,EAAE;AACrC,QAAM,YAAY,GAAG,IAAI,OAAO,OAAO;AACvC,QAAM,SAAS,GAAG,IAAI;AACtB,QAAM,SAAS,GAAG,IAAI;AACtB,QAAM,UAAU,SAAS,OAAO;AAChC,QAAM,OAAO,YAAY;AAGzB,MAAI,CAAC,QAAQ,KAAK,SAAS,KAAK,KAAK,UAAU,EAAG,QAAO;AASzD,QAAM,QAAQ,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM,IAAI;AAClD,QAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM,IAAI,IAAI;AAEjE,SACE,qBAAC,eAAY,QAAQ,IACnB;AAAA,yBAAC,UACC;AAAA,0BAAC,WAAQ,IAAI,WAAW;AAAA,MACxB,oBAAC,YAAO,IAAI,QACV,8BAAC,oBAAe,cAAc,MAAM,GACtC;AAAA,MAIA,oBAAC,UAAK,IAAI,QAAQ,WAAU,kBAC1B;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,KAAK,IAAI;AAAA,UACZ,GAAG,KAAK,IAAI;AAAA,UACZ,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,QAAQ,CAAC;AAAA,UACzC,QAAQ,KAAK,IAAI,GAAG,KAAK,SAAS,QAAQ,CAAC;AAAA,UAC3C,MAAK;AAAA,UACL,QAAQ,QAAQ,MAAM;AAAA;AAAA,MACxB,GACF;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,GAAG,KAAK;AAAA,QACR,GAAG,KAAK;AAAA,QACR,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,QACb,MAAM,QAAQ,SAAS;AAAA,QACvB,MAAM,QAAQ,MAAM;AAAA;AAAA,IACtB;AAAA,KACF;AAEJ;","names":[]}

package/dist/charts/lib/brush.d.ts

@@ -0,0 +1,94 @@
+import * as react from 'react';
+import { FC, ComponentProps } from 'react';
+import { Area } from 'recharts';
+import { ChartConfig } from './chart.js';
+
+/** The slice of the data a brush has selected, as row indexes. */
+interface ChartBrushRange {
+    startIndex: number;
+    endIndex: number;
+}
+/** Which mark the miniature strip is drawn with. */
+type ChartBrushVariant = 'line' | 'area' | 'bar';
+interface BrushProps {
+    /** Strip height in pixels. */
+    height?: number;
+    /** Turns a row's x value into a handle label. */
+    formatLabel?: (value: unknown, index: number) => string;
+    onChange?: (range: ChartBrushRange) => void;
+}
+/**
+ * Declares the zoom brush under a chart.
+ *
+ * Renders nothing itself — its PRESENCE among the chart's children turns the
+ * footer on, and its props configure it. A marker rather than a `showBrush`
+ * prop because the brush is composed like every other part, so a consumer does
+ * not have to remember which knobs are children and which are props.
+ */
+declare const Brush: FC<BrushProps>;
+interface ChartBrushProps {
+    /** The whole dataset. The strip always draws all of it. */
+    data: Record<string, unknown>[];
+    config: ChartConfig;
+    /** Which series the strip draws. Defaults to every key in the config. */
+    dataKeys?: string[];
+    /** The row field behind a handle's label. */
+    xDataKey?: string;
+    variant?: ChartBrushVariant;
+    height?: number;
+    className?: string;
+    stacked?: boolean;
+    strokeVariant?: 'solid' | 'dashed';
+    connectNulls?: boolean;
+    barRadius?: number;
+    startIndex?: number;
+    endIndex?: number;
+    defaultStartIndex?: number;
+    defaultEndIndex?: number;
+    onChange?: (range: ChartBrushRange) => void;
+    formatLabel?: (value: unknown, index: number) => string;
+    curveType?: ComponentProps<typeof Area>['type'];
+    /** The fewest rows that may stay selected. */
+    minSpan?: number;
+    showLabels?: boolean;
+    /** Names the control for a screen reader. */
+    label?: string;
+}
+/**
+ * The range selector under a chart: a miniature of the whole series, with a lit
+ * window over the part the chart above is showing.
+ *
+ * Both handles are real `slider` controls — focusable, arrow-key driven, with
+ * `aria-valuetext` reading out the row they sit on. The shape this was ported
+ * from was pointer-only, which made zooming a chart something a keyboard user
+ * could watch but not do.
+ *
+ * Position is written as inline style rather than as `start-`/`end-` classes on
+ * purpose. The strip's axis is the DATA's, and Recharts lays a cartesian plot
+ * out left-to-right in every writing direction — so mirroring the handles under
+ * `dir="rtl"` would put the "earlier" handle at the end of a chart that still
+ * runs the other way.
+ */
+declare function ChartBrush({ data, config, dataKeys, xDataKey, variant, height, className, stacked, strokeVariant, connectNulls, barRadius, startIndex: controlledStart, endIndex: controlledEnd, defaultStartIndex, defaultEndIndex, onChange, formatLabel, curveType, minSpan, showLabels, label, }: ChartBrushProps): react.JSX.Element | null;
+/**
+ * Holds the brush's range and hands back the rows the chart above should draw.
+ *
+ * The slicing runs on a deferred copy of the range: the handles move at pointer
+ * cadence while the chart re-renders at whatever cadence it can manage, which
+ * is what keeps a drag smooth over a few thousand rows.
+ */
+declare function useChartBrush<TData extends Record<string, unknown>>({ data, defaultStartIndex, defaultEndIndex, }: {
+    data: TData[];
+    defaultStartIndex?: number;
+    defaultEndIndex?: number;
+}): {
+    range: ChartBrushRange;
+    visibleData: TData[];
+    brushProps: {
+        startIndex: number;
+        endIndex: number;
+        onChange: react.Dispatch<react.SetStateAction<ChartBrushRange>>;
+    };
+};
+
+export { Brush, type BrushProps, ChartBrush, type ChartBrushProps, type ChartBrushRange, type ChartBrushVariant, useChartBrush };