@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/lib/legend.js

@@ -0,0 +1,117 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Legend as RechartsLegend } from "recharts";
+import { cn } from "../../lib/cn.js";
+import { colorStops, cssName, seriesFromPayload, useChart } from "./chart.js";
+const ALIGN = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  nameKey,
+  payload,
+  verticalAlign,
+  align = "right",
+  selected,
+  onSelectChange,
+  isClickable,
+  variant = "rounded-square"
+}) {
+  const { config } = useChart();
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        "m-0 flex list-none items-center gap-4 p-0 select-none",
+        ALIGN[align],
+        verticalAlign === "top" ? "pb-4" : "pt-4",
+        className
+      ),
+      children: payload.filter((item) => item.type !== "none").map((item) => {
+        const named = nameKey && item.payload ? item.payload[nameKey] : void 0;
+        const key = `${named ?? item.value ?? item.dataKey ?? "value"}`;
+        const series = seriesFromPayload(config, item, key);
+        const isLit = selected === null || selected === void 0 || selected === key;
+        const stops = series ? colorStops(series) : 1;
+        const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+          series?.icon && !hideIcon ? /* @__PURE__ */ jsx(series.icon, {}) : /* @__PURE__ */ jsx(LegendSwatch, { variant, seriesKey: key, stops }),
+          series?.label ?? key
+        ] });
+        const shared = cn(
+          "flex items-center gap-1.5 text-(--ink-2) transition-opacity duration-(--duration-fast) [&>svg]:size-3 [&>svg]:text-(--ink-3-aa)",
+          !isLit && "opacity-30"
+        );
+        return /* @__PURE__ */ jsx("li", { children: isClickable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": selected === key,
+            onClick: () => onSelectChange?.(selected === key ? null : key),
+            className: cn(
+              shared,
+              "cursor-pointer rounded-(--radius-sm) hover:text-(--ink)"
+            ),
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: shared, children: body }) }, key);
+      })
+    }
+  );
+}
+function LegendSwatch({
+  variant,
+  seriesKey,
+  stops
+}) {
+  const fill = paintStyle(seriesKey, stops);
+  const outline = { ...fill, ...MASK };
+  switch (variant) {
+    case "square":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0", style: fill });
+    case "circle":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-(--radius-pill)", style: fill });
+    case "circle-outline":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "size-2.5 shrink-0 rounded-(--radius-pill) p-[1.5px]",
+          style: outline
+        }
+      );
+    case "vertical-bar":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-3 w-1 shrink-0 rounded-[2px]", style: fill });
+    case "horizontal-bar":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-1 w-3 shrink-0 rounded-[2px]", style: fill });
+    case "rounded-square-outline":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px] p-[1.5px]", style: outline });
+    case "rounded-square":
+    default:
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: fill });
+  }
+}
+const MASK = {
+  WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+  WebkitMaskComposite: "xor",
+  mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+  maskComposite: "exclude"
+};
+function paintStyle(seriesKey, stops) {
+  const name = cssName(seriesKey);
+  if (stops <= 1) return { backgroundColor: `var(--color-${name}-0)` };
+  const gradient = Array.from({ length: stops }, (_, index) => {
+    const offset = index / (stops - 1) * 100;
+    return `var(--color-${name}-${index}) ${offset}%`;
+  }).join(", ");
+  return { background: `linear-gradient(to right, ${gradient})` };
+}
+const ChartLegend = RechartsLegend;
+export {
+  ChartLegend,
+  ChartLegendContent
+};
+//# sourceMappingURL=legend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/legend.tsx"],"sourcesContent":["'use client'\n\nimport type { CSSProperties } from 'react'\nimport { Legend as RechartsLegend } from 'recharts'\nimport type { DefaultLegendContentProps } from 'recharts'\nimport { cn } from '../../lib/cn'\nimport { colorStops, cssName, seriesFromPayload, useChart } from './chart'\n\n/**\n * The shape of a legend's series mark.\n *\n * Seven, because the mark is doing more work here than in a chromatic system:\n * with the monochrome ramp, a bar-shaped swatch beside a bar chart and a\n * dot-shaped one beside a scatter is often the fastest way a reader ties the\n * key to the plot.\n */\nexport type ChartLegendVariant =\n  | 'square'\n  | 'circle'\n  | 'circle-outline'\n  | 'rounded-square'\n  | 'rounded-square-outline'\n  | 'vertical-bar'\n  | 'horizontal-bar'\n\n/** Where the legend sits along the inline axis. Recharts' own vocabulary. */\nexport type ChartLegendAlign = 'left' | 'center' | 'right'\n\nconst ALIGN: Record<ChartLegendAlign, string> = {\n  left: 'justify-start',\n  center: 'justify-center',\n  right: 'justify-end',\n}\n\nexport interface ChartLegendContentProps extends DefaultLegendContentProps {\n  className?: string\n  /** Suppresses a config `icon`, falling back to the shape swatch. */\n  hideIcon?: boolean\n  /** The row field holding a series name, when it is not the `dataKey`. */\n  nameKey?: string\n  /** The chart's selected series, or null when the whole plot is lit. */\n  selected?: string | null\n  /** Makes each entry a control that toggles its series. */\n  isClickable?: boolean\n  onSelectChange?: (selected: string | null) => void\n  variant?: ChartLegendVariant\n}\n\n/**\n * The key to a plot's series.\n *\n * Required above one series and not decorative: the monochrome ramp separates\n * two series by a step of grey and a texture, and neither is self-describing.\n * The chroma palette does not change that — three of its light steps sit below\n * 3:1 on paper, and the legend is the documented relief.\n *\n * When `isClickable` is set each entry is a real `<button>` with `aria-pressed`\n * rather than a `<div>` with a click handler. That is the difference between a\n * filter a keyboard can reach and one it cannot, and it is why the entry is not\n * simply styled to look pressable.\n */\nexport function ChartLegendContent({\n  className,\n  hideIcon = false,\n  nameKey,\n  payload,\n  verticalAlign,\n  align = 'right',\n  selected,\n  onSelectChange,\n  isClickable,\n  variant = 'rounded-square',\n}: ChartLegendContentProps) {\n  const { config } = useChart()\n\n  if (!payload?.length) return null\n\n  return (\n    <ul\n      className={cn(\n        'm-0 flex list-none items-center gap-4 p-0 select-none',\n        ALIGN[align],\n        verticalAlign === 'top' ? 'pb-4' : 'pt-4',\n        className,\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== 'none')\n        .map((item) => {\n          const named =\n            nameKey && item.payload ? (item.payload as Record<string, unknown>)[nameKey] : undefined\n          const key = `${named ?? item.value ?? item.dataKey ?? 'value'}`\n          const series = seriesFromPayload(config, item, key)\n          const isLit = selected === null || selected === undefined || selected === key\n          const stops = series ? colorStops(series) : 1\n\n          const body = (\n            <>\n              {series?.icon && !hideIcon ? (\n                <series.icon />\n              ) : (\n                <LegendSwatch variant={variant} seriesKey={key} stops={stops} />\n              )}\n              {series?.label ?? key}\n            </>\n          )\n\n          const shared = cn(\n            'flex items-center gap-1.5 text-(--ink-2) transition-opacity duration-(--duration-fast) [&>svg]:size-3 [&>svg]:text-(--ink-3-aa)',\n            !isLit && 'opacity-30',\n          )\n\n          return (\n            <li key={key}>\n              {isClickable ? (\n                <button\n                  type=\"button\"\n                  aria-pressed={selected === key}\n                  onClick={() => onSelectChange?.(selected === key ? null : key)}\n                  className={cn(\n                    shared,\n                    'cursor-pointer rounded-(--radius-sm) hover:text-(--ink)',\n                  )}\n                >\n                  {body}\n                </button>\n              ) : (\n                <span className={shared}>{body}</span>\n              )}\n            </li>\n          )\n        })}\n    </ul>\n  )\n}\n\n/**\n * The swatch itself. Each variant is its own branch rather than a size lookup,\n * because the outline forms are built differently from the filled ones and a\n * shared branch would have to carry both.\n */\nfunction LegendSwatch({\n  variant,\n  seriesKey,\n  stops,\n}: {\n  variant: ChartLegendVariant\n  seriesKey: string\n  stops: number\n}) {\n  const fill = paintStyle(seriesKey, stops)\n  const outline = { ...fill, ...MASK }\n\n  switch (variant) {\n    case 'square':\n      return <span aria-hidden className=\"size-2 shrink-0\" style={fill} />\n    case 'circle':\n      return <span aria-hidden className=\"size-2 shrink-0 rounded-(--radius-pill)\" style={fill} />\n    case 'circle-outline':\n      return (\n        <span\n          aria-hidden\n          className=\"size-2.5 shrink-0 rounded-(--radius-pill) p-[1.5px]\"\n          style={outline}\n        />\n      )\n    case 'vertical-bar':\n      return <span aria-hidden className=\"h-3 w-1 shrink-0 rounded-[2px]\" style={fill} />\n    case 'horizontal-bar':\n      return <span aria-hidden className=\"h-1 w-3 shrink-0 rounded-[2px]\" style={fill} />\n    case 'rounded-square-outline':\n      return <span aria-hidden className=\"size-2.5 shrink-0 rounded-[3px] p-[1.5px]\" style={outline} />\n    case 'rounded-square':\n    default:\n      return <span aria-hidden className=\"size-2 shrink-0 rounded-[2px]\" style={fill} />\n  }\n}\n\n/**\n * Punches the middle out of a filled swatch, leaving its border.\n *\n * `border-color` cannot take a gradient, and a swatch whose series is painted\n * with several stops has to show them. Two masks composited with `exclude`\n * leave only the padding box — which follows the border radius, which a border\n * approximated with an inset box-shadow would not.\n */\nconst MASK: CSSProperties = {\n  WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n  WebkitMaskComposite: 'xor',\n  mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n  maskComposite: 'exclude',\n}\n\n/** A swatch's paint: the series colour, or its gradient across the swatch. */\nfunction paintStyle(seriesKey: string, stops: number): CSSProperties {\n  const name = cssName(seriesKey)\n  if (stops <= 1) return { backgroundColor: `var(--color-${name}-0)` }\n\n  const gradient = Array.from({ length: stops }, (_, index) => {\n    const offset = (index / (stops - 1)) * 100\n    return `var(--color-${name}-${index}) ${offset}%`\n  }).join(', ')\n\n  return { background: `linear-gradient(to right, ${gradient})` }\n}\n\nexport const ChartLegend = RechartsLegend\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,48 @@
+import * as react from 'react';
+
+/** The key the skeleton series is drawn from. Never a real series name. */
+declare const LOADING_KEY = "loading";
+/** Rows for the skeleton plot: one field, values inside a plausible band. */
+declare function loadingRows(points?: number, salt?: number, min?: number, max?: number): {
+    loading: number;
+}[];
+/**
+ * The skeleton's rows, re-rolled each time the shimmer leaves the plot.
+ *
+ * The swap is driven by the shimmer's own position rather than by a timer: an
+ * interval drifts against the animation and eventually re-rolls the data in
+ * full view, which reads as the chart glitching rather than as it loading.
+ */
+declare function useLoadingRows(isLoading: boolean, points?: number): {
+    rows: {
+        loading: number;
+    }[];
+    onShimmerExit: () => void;
+};
+/**
+ * The badge over a loading plot.
+ *
+ * Sits above the skeleton rather than replacing it, so the chart keeps its
+ * measured height and the page does not jump when the data lands.
+ */
+declare function LoadingIndicator({ isLoading }: {
+    isLoading: boolean;
+}): react.JSX.Element | null;
+/**
+ * The travelling mask that makes the skeleton read as "working" rather than as
+ * "broken".
+ *
+ * The plot is normalised to 0–1 and the pattern is three times that wide, so
+ * the highlight has a full plot-width of runway on each side. `onShimmerExit`
+ * fires as it crosses the far edge — off-screen — which is where the rows are
+ * re-rolled, so the loop has no visible seam.
+ *
+ * With `prefers-reduced-motion` the whole travelling layer is dropped for a
+ * flat wash: the skeleton still says "not yet", without anything moving.
+ */
+declare function LoadingShimmer({ id, onShimmerExit }: {
+    id: string;
+    onShimmerExit: () => void;
+}): react.JSX.Element;
+
+export { LOADING_KEY, LoadingIndicator, LoadingShimmer, loadingRows, useLoadingRows };

package/dist/charts/lib/loading.js

@@ -0,0 +1,105 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+const LOADING_KEY = "loading";
+const SHIMMER_SECONDS = 2;
+function noise(index, salt) {
+  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453;
+  return x - Math.floor(x);
+}
+function loadingRows(points = 14, salt = 0, min = 0, max = 70) {
+  return Array.from({ length: points }, (_, index) => ({
+    [LOADING_KEY]: Math.floor(noise(index, salt) * (max - min)) + min
+  }));
+}
+function useLoadingRows(isLoading, points = 14) {
+  const [salt, setSalt] = useState(0);
+  const onShimmerExit = useCallback(() => {
+    if (isLoading) setSalt((previous) => previous + 1);
+  }, [isLoading]);
+  const rows = useMemo(() => loadingRows(points, salt), [points, salt]);
+  return { rows, onShimmerExit };
+}
+function LoadingIndicator({ isLoading }) {
+  if (!isLoading) return null;
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-(--z-rule) flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+    "output",
+    {
+      className: "flex items-center gap-2 rounded-(--radius) border border-(--rule) bg-(--chart-surface) px-2.5 py-1 mono-meta text-(--ink-2)",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            "data-m22-animated": true,
+            className: "size-3 rounded-(--radius-pill) border border-(--rule-2) border-t-(--ink) motion-safe:animate-[m22-spin_0.8s_linear_infinite]"
+          }
+        ),
+        "Loading"
+      ]
+    }
+  ) });
+}
+function shimmerStops(steps = 17, min = 0.05, max = 0.9) {
+  return Array.from({ length: steps }, (_, index) => {
+    const t = index / (steps - 1);
+    const eased = Math.sin(t * Math.PI) ** 2;
+    return {
+      offset: `${Math.round(t * 100)}%`,
+      opacity: Number((min + eased * (max - min)).toFixed(3))
+    };
+  });
+}
+function LoadingShimmer({ id, onShimmerExit }) {
+  const reduceMotion = useReducedMotion();
+  const stops = shimmerStops();
+  const lastX = useRef(-1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("linearGradient", { id: `${id}-loading-gradient`, x1: "0", y1: "0", x2: "1", y2: "0", children: stops.map(({ offset, opacity }) => /* @__PURE__ */ jsx("stop", { offset, stopColor: "white", stopOpacity: opacity }, offset)) }),
+    /* @__PURE__ */ jsx("mask", { id: `${id}-loading-mask`, maskUnits: "userSpaceOnUse", children: reduceMotion ? /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white", fillOpacity: 0.55 }) : /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-loading-pattern)` }) }),
+    !reduceMotion && /* @__PURE__ */ jsx(
+      "pattern",
+      {
+        id: `${id}-loading-pattern`,
+        patternUnits: "objectBoundingBox",
+        patternContentUnits: "objectBoundingBox",
+        patternTransform: "rotate(25)",
+        width: 3,
+        height: "1",
+        x: "0",
+        y: "0",
+        children: /* @__PURE__ */ jsx(
+          motion.rect,
+          {
+            y: "0",
+            width: "1",
+            height: "1",
+            fill: `url(#${id}-loading-gradient)`,
+            initial: { x: -1 },
+            animate: { x: 2 },
+            transition: {
+              duration: SHIMMER_SECONDS,
+              ease: "linear",
+              repeat: Infinity,
+              repeatType: "loop"
+            },
+            onUpdate: (latest) => {
+              const x = typeof latest.x === "number" ? latest.x : -1;
+              if (x >= 1 && lastX.current < 1) onShimmerExit();
+              lastX.current = x;
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  LOADING_KEY,
+  LoadingIndicator,
+  LoadingShimmer,
+  loadingRows,
+  useLoadingRows
+};
+//# sourceMappingURL=loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/loading.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport { motion, useReducedMotion } from 'motion/react'\n\n/** The key the skeleton series is drawn from. Never a real series name. */\nexport const LOADING_KEY = 'loading'\n\n/** One shimmer pass, in seconds. */\nconst SHIMMER_SECONDS = 2\n\n/**\n * A deterministic pseudo-random sequence, seeded by index.\n *\n * The shape this was ported from called `Math.random()` inside a `useMemo`,\n * which runs during render — so the server rendered one skeleton, the client\n * rendered a different one, and React logged a hydration mismatch for every\n * chart on the page. A hash of the index gives the same jagged, un-patterned\n * silhouette on both sides of the wire, which is the only property the\n * skeleton actually needs from randomness.\n */\nfunction noise(index: number, salt: number): number {\n  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453\n  return x - Math.floor(x)\n}\n\n/** Rows for the skeleton plot: one field, values inside a plausible band. */\nexport function loadingRows(points = 14, salt = 0, min = 0, max = 70) {\n  return Array.from({ length: points }, (_, index) => ({\n    [LOADING_KEY]: Math.floor(noise(index, salt) * (max - min)) + min,\n  }))\n}\n\n/**\n * The skeleton's rows, re-rolled each time the shimmer leaves the plot.\n *\n * The swap is driven by the shimmer's own position rather than by a timer: an\n * interval drifts against the animation and eventually re-rolls the data in\n * full view, which reads as the chart glitching rather than as it loading.\n */\nexport function useLoadingRows(isLoading: boolean, points = 14) {\n  const [salt, setSalt] = useState(0)\n\n  const onShimmerExit = useCallback(() => {\n    if (isLoading) setSalt((previous) => previous + 1)\n  }, [isLoading])\n\n  const rows = useMemo(() => loadingRows(points, salt), [points, salt])\n\n  return { rows, onShimmerExit }\n}\n\n/**\n * The badge over a loading plot.\n *\n * Sits above the skeleton rather than replacing it, so the chart keeps its\n * measured height and the page does not jump when the data lands.\n */\nexport function LoadingIndicator({ isLoading }: { isLoading: boolean }) {\n  if (!isLoading) return null\n\n  return (\n    <div className=\"pointer-events-none absolute inset-0 z-(--z-rule) flex items-center justify-center\">\n      <output\n        className=\"flex items-center gap-2 rounded-(--radius) border border-(--rule) bg-(--chart-surface) px-2.5 py-1 mono-meta text-(--ink-2)\"\n      >\n        <span\n          aria-hidden\n          data-m22-animated\n          className=\"size-3 rounded-(--radius-pill) border border-(--rule-2) border-t-(--ink) motion-safe:animate-[m22-spin_0.8s_linear_infinite]\"\n        />\n        Loading\n      </output>\n    </div>\n  )\n}\n\n/** Bell-curve opacity stops, so the shimmer has no hard edge at either end. */\nfunction shimmerStops(steps = 17, min = 0.05, max = 0.9) {\n  return Array.from({ length: steps }, (_, index) => {\n    const t = index / (steps - 1)\n    const eased = Math.sin(t * Math.PI) ** 2\n    return {\n      offset: `${Math.round(t * 100)}%`,\n      opacity: Number((min + eased * (max - min)).toFixed(3)),\n    }\n  })\n}\n\n/**\n * The travelling mask that makes the skeleton read as \"working\" rather than as\n * \"broken\".\n *\n * The plot is normalised to 0–1 and the pattern is three times that wide, so\n * the highlight has a full plot-width of runway on each side. `onShimmerExit`\n * fires as it crosses the far edge — off-screen — which is where the rows are\n * re-rolled, so the loop has no visible seam.\n *\n * With `prefers-reduced-motion` the whole travelling layer is dropped for a\n * flat wash: the skeleton still says \"not yet\", without anything moving.\n */\nexport function LoadingShimmer({ id, onShimmerExit }: { id: string; onShimmerExit: () => void }) {\n  const reduceMotion = useReducedMotion()\n  const stops = shimmerStops()\n  const lastX = useRef(-1)\n\n  return (\n    <>\n      <linearGradient id={`${id}-loading-gradient`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n        {stops.map(({ offset, opacity }) => (\n          <stop key={offset} offset={offset} stopColor=\"white\" stopOpacity={opacity} />\n        ))}\n      </linearGradient>\n      <mask id={`${id}-loading-mask`} maskUnits=\"userSpaceOnUse\">\n        {reduceMotion ? (\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" fillOpacity={0.55} />\n        ) : (\n          <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-loading-pattern)`} />\n        )}\n      </mask>\n      {!reduceMotion && (\n        <pattern\n          id={`${id}-loading-pattern`}\n          patternUnits=\"objectBoundingBox\"\n          patternContentUnits=\"objectBoundingBox\"\n          patternTransform=\"rotate(25)\"\n          width={3}\n          height=\"1\"\n          x=\"0\"\n          y=\"0\"\n        >\n          <motion.rect\n            y=\"0\"\n            width=\"1\"\n            height=\"1\"\n            fill={`url(#${id}-loading-gradient)`}\n            initial={{ x: -1 }}\n            animate={{ x: 2 }}\n            transition={{\n              duration: SHIMMER_SECONDS,\n              ease: 'linear',\n              repeat: Infinity,\n              repeatType: 'loop',\n            }}\n            onUpdate={(latest) => {\n              const x = typeof latest.x === 'number' ? latest.x : -1\n              if (x >= 1 && lastX.current < 1) onShimmerExit()\n              lastX.current = x\n            }}\n          />\n        </pattern>\n      )}\n    </>\n  )\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,154 @@
+import * as react from 'react';
+import { ChartConfig } from './chart.js';
+import 'recharts';
+
+/**
+ * The intro wipe's direction, shared by every mark that has one.
+ *
+ * Named for the DATA rather than for the screen. `forward` runs from the first
+ * row to the last, `reverse` the other way — which is the thing the author
+ * actually means, and stays true in a right-to-left document, where a cartesian
+ * plot is still drawn first-row-first.
+ *
+ * `"none"` opts out, and is also what a device with the OS reduce-motion
+ * preference falls back to: a reveal is a per-frame animated SVG mask, the
+ * heaviest thing in the package and the least welcome to a reader who has
+ * asked for stillness.
+ */
+type ChartRevealType = 'none' | 'forward' | 'reverse' | 'center-out' | 'edges-in';
+/** A reveal that actually plays. */
+type ChartRevealDirection = Exclude<ChartRevealType, 'none'>;
+/** The intro wipe, in seconds. */
+declare const REVEAL_DURATION = 1;
+/**
+ * The wipe's curve. Not `--ease`: the system's easing is tuned for a control
+ * moving a few pixels, and over a full plot width it arrives too abruptly.
+ * A long, flat tail is what makes a line read as being drawn.
+ */
+declare const REVEAL_EASE: [number, number, number, number];
+/**
+ * The mask that draws a line or an area in.
+ *
+ * One mask covers the mark's fill, its stroke AND its resting dots, so the
+ * three arrive together. Drawn separately — which is what Recharts' own
+ * animation does — the dots pop in before the line reaches them.
+ *
+ * Both `maskUnits` and `maskContentUnits` are user space so every masked
+ * element shares one coordinate system and the wipe edge lands at the same x
+ * on each of them.
+ */
+declare function RevealMask({ id, type }: {
+    id: string;
+    type: ChartRevealDirection;
+}): react.JSX.Element;
+interface PaintProps {
+    /** The owning mark's id, which scopes every definition below. */
+    id: string;
+    /** The series being painted. */
+    dataKey: string;
+}
+/**
+ * The one gradient everything else is masked out of.
+ *
+ * Every fill variant, every stroke and every dot in a chart paints from this,
+ * which is what makes a series a single visual object rather than a set of
+ * elements that happen to share a colour. A series with one colour still gets a
+ * two-stop gradient: it keeps the paint reference identical across variants, so
+ * switching a series from one colour to three changes no other code.
+ */
+declare function SeriesGradient({ id, dataKey, config, direction, gradientUnits, }: PaintProps & {
+    config: ChartConfig;
+    /** Horizontal reads along the axis; vertical reads up the mark. */
+    direction?: 'horizontal' | 'vertical';
+    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
+}): react.JSX.Element;
+/**
+ * The stops themselves, so a variant can build its own gradient from them.
+ *
+ * `opacities` ramps the stops independently of their colour — a radar's fill
+ * fades from its centre outward without needing a second gradient to mask it.
+ */
+declare function ColorStops({ dataKey, stops, opacities, }: {
+    dataKey: string;
+    stops: number;
+    opacities?: number[];
+}): react.JSX.Element;
+/** Solid at the top, dissolving toward the axis. The default. */
+declare function AreaGradientFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/** The same fade, run the other way — heavier where it meets the axis. */
+declare function AreaGradientReverseFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/** One flat wash, no fade. Reads as a band rather than as a slope. */
+declare function AreaSolidFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/** A field of dots. The lightest texture, and the one that stacks best. */
+declare function AreaDottedFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/** Diagonal rule lines, 45°. */
+declare function AreaLinesFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/** Wide soft-edged stripes at 20°. The heaviest of the six. */
+declare function AreaHatchedFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/**
+ * What a series looks like when another one is selected.
+ *
+ * A thin diagonal rule rather than a lower opacity: opacity alone makes a
+ * series faint, and a faint area on a white ground is still an area. The
+ * texture change is what makes it read as "not this one".
+ */
+declare function UnselectedFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/** 45° stripes over a faint ground. */
+declare function BarHatchedFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/**
+ * Stripes with nothing behind them — the projected, not-yet-real part of a
+ * series. Used by the last bar when `buffer` is set.
+ */
+declare function BarBufferFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/**
+ * A bar split down its own middle, one half at full weight.
+ *
+ * Everything here is in object-bounding-box units so the split lands at each
+ * bar's centre rather than at the plot's — in user space a narrow bar at the
+ * right of the chart would be entirely on one side of the seam.
+ */
+declare function BarDuotoneFill({ id, dataKey, config, reverse, }: PaintProps & {
+    config: ChartConfig;
+    reverse?: boolean;
+}): react.JSX.Element;
+/** Solid at the top of the bar, dissolving toward the baseline. */
+declare function BarGradientFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/**
+ * A faint body under a solid cap, drawn by the bar shape itself.
+ *
+ * The variant that survives density best: at twenty bars a solid block becomes
+ * a wall, and a 2px cap over a wash still reads as twenty distinct values.
+ */
+declare function BarStrippedFill({ id, dataKey }: PaintProps): react.JSX.Element;
+/**
+ * The halo behind a highlighted mark.
+ *
+ * The one blur in the package, and it is a filter on a MARK rather than a
+ * box-shadow under a panel — law 2 bans the second, not the first. It exists
+ * because a monochrome chart has no "brighter" to reach for when one series has
+ * to be the point of the figure.
+ *
+ * A line needs a wider, stronger halo than a bar: a 0.8px stroke has almost no
+ * area to bleed from, where a bar has its whole face.
+ */
+declare function GlowFilter({ id, dataKey, spread, intensity, }: PaintProps & {
+    /** Blur radius, in user units. */
+    spread?: number;
+    /** Alpha multiplier on the blurred copy. Above 1 saturates it. */
+    intensity?: number;
+}): react.JSX.Element;
+/**
+ * A dashed stroke that crawls along its own path.
+ *
+ * SMIL rather than CSS, because the two attributes have to stay in lockstep and
+ * a CSS animation on `stroke-dasharray` is not interpolated the same way in
+ * every engine. It is composed as a CHILD of the mark, so a caller that does
+ * not ask for it pays nothing — and `keyframes.css`'s reduced-motion rule
+ * cannot reach SMIL, which is why the call sites gate it on `useReducedMotion`
+ * instead.
+ */
+declare function AnimatedDashedStroke({ dash }: {
+    dash?: number;
+}): react.JSX.Element;
+
+export { AnimatedDashedStroke, AreaDottedFill, AreaGradientFill, AreaGradientReverseFill, AreaHatchedFill, AreaLinesFill, AreaSolidFill, BarBufferFill, BarDuotoneFill, BarGradientFill, BarHatchedFill, BarStrippedFill, type ChartRevealDirection, type ChartRevealType, ColorStops, GlowFilter, type PaintProps, REVEAL_DURATION, REVEAL_EASE, RevealMask, SeriesGradient, UnselectedFill };