@sckyzo/cosmos-charts 0.2.0 → 0.3.1

package/dist/chunk-RCDTBZC2.cjs

@@ -0,0 +1,131 @@
+"use client";
+'use strict';
+
+var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var useHiddenSeries = () => {
+  const [hidden, setHidden] = react.useState(/* @__PURE__ */ new Set());
+  const toggle = react.useCallback((key) => {
+    setHidden((current) => {
+      const next = new Set(current);
+      if (!next.delete(key)) next.add(key);
+      return next;
+    });
+  }, []);
+  return { hidden, toggle };
+};
+var ChartLegend = ({ payload, hidden, onToggle, column, detail }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "ul",
+  {
+    style: {
+      display: "flex",
+      flexDirection: column ? "column" : "row",
+      flexWrap: "wrap",
+      gap: column ? "0.375rem" : "0.25rem 1rem",
+      margin: 0,
+      padding: 0,
+      listStyle: "none",
+      fontSize: chunkG4WOPX4D_cjs.TEXT_SIZE,
+      color: chunkLT3UC65O_cjs.MUTED
+    },
+    children: payload?.map((entry, index) => {
+      const key = String(entry.dataKey);
+      const figures = detail?.(index);
+      const off = hidden.has(key);
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": !off,
+          onClick: () => onToggle(key),
+          className: "focus-visible:focus-indicator",
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.375rem",
+            padding: "0.125rem 0.25rem",
+            font: "inherit",
+            color: "inherit",
+            background: "none",
+            border: 0,
+            borderRadius: "0.25rem",
+            cursor: "pointer",
+            textDecoration: off ? "line-through" : void 0,
+            // The figures of a column reach its right edge, which aligns them.
+            ...figures && column ? { display: "flex", width: "100%", gap: "0.75rem" } : {}
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: {
+                  width: "0.625rem",
+                  height: "0.625rem",
+                  borderRadius: "50%",
+                  background: entry.color,
+                  // Text keeps its color: dimming it would fail the contrast check.
+                  opacity: off ? 0.35 : 1
+                }
+              }
+            ),
+            figures ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: column ? { flex: 1, textAlign: "start" } : void 0, children: entry.value }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    color: chunkLT3UC65O_cjs.TEXT,
+                    fontWeight: 600,
+                    fontVariantNumeric: "tabular-nums",
+                    textAlign: "end"
+                  },
+                  children: figures.value
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    minWidth: column ? "3.5ch" : void 0,
+                    fontVariantNumeric: "tabular-nums",
+                    textAlign: "end"
+                  },
+                  children: figures.share
+                }
+              )
+            ] }) : entry.value
+          ]
+        }
+      ) }, key);
+    })
+  }
+);
+var GAP = "1rem";
+var legendProps = (position, { hidden, toggle }) => ({
+  position,
+  itemSorter: null,
+  wrapperStyle: {
+    top: { width: "100%", paddingBottom: GAP },
+    bottom: { width: "100%", paddingTop: GAP },
+    left: { paddingRight: GAP },
+    right: { paddingLeft: GAP }
+  }[position],
+  content: /* @__PURE__ */ jsxRuntime.jsx(
+    ChartLegend,
+    {
+      hidden,
+      onToggle: toggle,
+      column: position === "left" || position === "right"
+    }
+  )
+});
+
+exports.ChartLegend = ChartLegend;
+exports.legendProps = legendProps;
+exports.useHiddenSeries = useHiddenSeries;
+//# sourceMappingURL=chunk-RCDTBZC2.cjs.map
+//# sourceMappingURL=chunk-RCDTBZC2.cjs.map

package/dist/chunk-RCDTBZC2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/ChartLegend.tsx"],"names":["useState","useCallback","jsx","TEXT_SIZE","MUTED","jsxs","Fragment","TEXT"],"mappings":"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","file":"chunk-RCDTBZC2.cjs","sourcesContent":["import { useCallback, useState, type ReactNode } from 'react';\nimport type { LegendPayload, LegendProps } from 'recharts';\nimport type { ChartLegendPosition } from '../types';\nimport { MUTED, TEXT } from './colors';\nimport { TEXT_SIZE } from './axes';\n\n/**\n * The series a click on the legend hid, and the toggle. A hidden series is\n * passed to its graphical item as `hide`, so the axes fit what is left.\n */\nexport const useHiddenSeries = () => {\n  const [hidden, setHidden] = useState<ReadonlySet<string>>(new Set());\n  const toggle = useCallback((key: string) => {\n    setHidden((current) => {\n      const next = new Set(current);\n      if (!next.delete(key)) next.add(key);\n      return next;\n    });\n  }, []);\n  return { hidden, toggle };\n};\n\ntype ChartLegendProps = {\n  /** Given by Recharts: one entry per series, in the order the series are drawn. */\n  payload?: readonly LegendPayload[];\n  /** The keys of the hidden series. */\n  hidden: ReadonlySet<string>;\n  onToggle: (key: string) => void;\n  /** Items in a column (`left`, `right`) or a row (`top`, `bottom`). */\n  column?: boolean;\n  /**\n   * A figure written after the name of the entry at `index`: a value and its\n   * share. In a column the figures sit at the right edge, aligned on their\n   * last digit; in a row they follow the name.\n   */\n  detail?: (index: number) => { value: string; share: string };\n};\n\n/**\n * The legend of every chart: a round chip and the series name in the muted\n * text color, one button per series. A click (or Enter, Space) hides the series\n * and shows it again; the button says which in `aria-pressed`. Pass it as\n * `<Legend content={…} itemSorter={null} />`: Recharts sorts the items by name\n * unless told not to, and the series keep their order.\n */\nexport const ChartLegend = ({ payload, hidden, onToggle, column, detail }: ChartLegendProps) => (\n  <ul\n    style={{\n      display: 'flex',\n      flexDirection: column ? 'column' : 'row',\n      flexWrap: 'wrap',\n      gap: column ? '0.375rem' : '0.25rem 1rem',\n      margin: 0,\n      padding: 0,\n      listStyle: 'none',\n      fontSize: TEXT_SIZE,\n      color: MUTED,\n    }}\n  >\n    {payload?.map((entry, index) => {\n      const key = String(entry.dataKey);\n      const figures = detail?.(index);\n      const off = hidden.has(key);\n      return (\n        <li key={key}>\n          <button\n            type=\"button\"\n            aria-pressed={!off}\n            onClick={() => onToggle(key)}\n            className=\"focus-visible:focus-indicator\"\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '0.375rem',\n              padding: '0.125rem 0.25rem',\n              font: 'inherit',\n              color: 'inherit',\n              background: 'none',\n              border: 0,\n              borderRadius: '0.25rem',\n              cursor: 'pointer',\n              textDecoration: off ? 'line-through' : undefined,\n              // The figures of a column reach its right edge, which aligns them.\n              ...(figures && column ? { display: 'flex', width: '100%', gap: '0.75rem' } : {}),\n            }}\n          >\n            <span\n              aria-hidden\n              style={{\n                width: '0.625rem',\n                height: '0.625rem',\n                borderRadius: '50%',\n                background: entry.color,\n                // Text keeps its color: dimming it would fail the contrast check.\n                opacity: off ? 0.35 : 1,\n              }}\n            />\n            {figures ? (\n              <>\n                <span style={column ? { flex: 1, textAlign: 'start' } : undefined}>\n                  {entry.value as ReactNode}\n                </span>\n                <span\n                  style={{\n                    color: TEXT,\n                    fontWeight: 600,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.value}\n                </span>\n                <span\n                  style={{\n                    minWidth: column ? '3.5ch' : undefined,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.share}\n                </span>\n              </>\n            ) : (\n              (entry.value as ReactNode)\n            )}\n          </button>\n        </li>\n      );\n    })}\n  </ul>\n);\n\nconst GAP = '1rem';\n\n/**\n * The props of the `<Legend>` of a chart: on `position`, the chips and names\n * of `ChartLegend`, in series order, a `GAP` away from the plot.\n */\nexport const legendProps = (\n  position: ChartLegendPosition,\n  { hidden, toggle }: ReturnType<typeof useHiddenSeries>\n): LegendProps => ({\n  position,\n  itemSorter: null,\n  wrapperStyle: {\n    top: { width: '100%', paddingBottom: GAP },\n    bottom: { width: '100%', paddingTop: GAP },\n    left: { paddingRight: GAP },\n    right: { paddingLeft: GAP },\n  }[position],\n  content: (\n    <ChartLegend\n      hidden={hidden}\n      onToggle={toggle}\n      column={position === 'left' || position === 'right'}\n    />\n  ),\n});\n"]}

package/dist/chunk-SR2ESX3R.cjs

@@ -0,0 +1,66 @@
+"use client";
+'use strict';
+
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var frameProps = ({
+  height,
+  width = "100%",
+  ariaLabel,
+  keyboard = true
+}) => ({
+  responsive: true,
+  accessibilityLayer: keyboard,
+  ...keyboard ? {} : { role: "img" },
+  "aria-label": ariaLabel,
+  // `maxWidth`: a chart wider than its parent would widen the page. `direction`: a chart keeps
+  // its left-to-right axes under `dir="rtl"`; left alone, the SVG's `text-anchor` would read
+  // `start` and `end` from the page and put the labels on the wrong side of their marks.
+  style: { width, height, maxWidth: "100%", direction: "ltr" }
+});
+var useFontsLoaded = () => {
+  const [loaded, setLoaded] = react.useState(0);
+  react.useEffect(() => {
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    if (!fonts?.addEventListener) return;
+    let active = true;
+    const done = () => {
+      if (active) setLoaded(1);
+    };
+    fonts.addEventListener("loadingdone", done);
+    if (fonts.status === "loading") void fonts.ready.then(done);
+    return () => {
+      active = false;
+      fonts.removeEventListener("loadingdone", done);
+    };
+  }, []);
+  return loaded;
+};
+var ChartEmpty = ({ message, ariaLabel, height, width = "100%" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    role: "group",
+    "aria-label": ariaLabel,
+    "data-chart-empty": "",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width,
+      height,
+      maxWidth: "100%",
+      color: chunkLT3UC65O_cjs.MUTED,
+      fontSize: "var(--text-sm, 0.875rem)",
+      textAlign: "center"
+    },
+    children: message
+  }
+);
+
+exports.ChartEmpty = ChartEmpty;
+exports.frameProps = frameProps;
+exports.useFontsLoaded = useFontsLoaded;
+//# sourceMappingURL=chunk-SR2ESX3R.cjs.map
+//# sourceMappingURL=chunk-SR2ESX3R.cjs.map

package/dist/chunk-SR2ESX3R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/frame.tsx"],"names":["useState","useEffect","jsx","MUTED"],"mappings":";;;;;;;AAoBO,IAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA,GAAW;AACb,CAAA,MAAqB;AAAA,EACnB,UAAA,EAAY,IAAA;AAAA,EACZ,kBAAA,EAAoB,QAAA;AAAA,EACpB,GAAI,QAAA,GAAW,EAAC,GAAI,EAAE,MAAM,KAAA,EAAM;AAAA,EAClC,YAAA,EAAc,SAAA;AAAA;AAAA;AAAA;AAAA,EAId,OAAO,EAAE,KAAA,EAAO,QAAQ,QAAA,EAAU,MAAA,EAAQ,WAAW,KAAA;AACvD,CAAA;AAWO,IAAM,iBAAiB,MAAa;AACzC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAgB,CAAC,CAAA;AAC7C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAA,GAAQ,OAAO,QAAA,KAAa,WAAA,GAAc,SAAY,QAAA,CAAS,KAAA;AACrE,IAAA,IAAI,CAAC,OAAO,gBAAA,EAAkB;AAC9B,IAAA,IAAI,MAAA,GAAS,IAAA;AACb,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,IAAI,MAAA,YAAkB,CAAC,CAAA;AAAA,IACzB,CAAA;AACA,IAAA,KAAA,CAAM,gBAAA,CAAiB,eAAe,IAAI,CAAA;AAG1C,IAAA,IAAI,MAAM,MAAA,KAAW,SAAA,OAAgB,KAAA,CAAM,KAAA,CAAM,KAAK,IAAI,CAAA;AAC1D,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,GAAS,KAAA;AACT,MAAA,KAAA,CAAM,mBAAA,CAAoB,eAAe,IAAI,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,OAAO,MAAA;AACT;AASO,IAAM,UAAA,GAAa,CAAC,EAAE,OAAA,EAAS,WAAW,MAAA,EAAQ,KAAA,GAAQ,QAAO,qBACtEC,cAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,IAAA,EAAK,OAAA;AAAA,IACL,YAAA,EAAY,SAAA;AAAA,IACZ,kBAAA,EAAiB,EAAA;AAAA,IACjB,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,KAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA,EAAU,MAAA;AAAA,MACV,KAAA,EAAOC,uBAAA;AAAA,MACP,QAAA,EAAU,0BAAA;AAAA,MACV,SAAA,EAAW;AAAA,KACb;AAAA,IAEC,QAAA,EAAA;AAAA;AACH","file":"chunk-SR2ESX3R.cjs","sourcesContent":["import { useEffect, useState, type CSSProperties } from 'react';\nimport { MUTED } from './colors';\nimport type { ChartSize } from '../types';\n\ntype FrameOptions = ChartSize & {\n  ariaLabel: string;\n  /**\n   * Tab reaches the chart and the arrow keys walk its points (default). Off,\n   * the chart is an image out of the tab order: right for a single value.\n   */\n  keyboard?: boolean;\n};\n\n/**\n * What every Recharts chart takes on its root, spread onto it: it fills the\n * width it is given (`width` default `100%`) at `height`, and is named by\n * `ariaLabel`. With `accessibilityLayer`, Recharts makes the chart an\n * `application` in the tab order, and the arrow keys move the tooltip from\n * point to point.\n */\nexport const frameProps = ({\n  height,\n  width = '100%',\n  ariaLabel,\n  keyboard = true,\n}: FrameOptions) => ({\n  responsive: true,\n  accessibilityLayer: keyboard,\n  ...(keyboard ? {} : { role: 'img' }),\n  'aria-label': ariaLabel,\n  // `maxWidth`: a chart wider than its parent would widen the page. `direction`: a chart keeps\n  // its left-to-right axes under `dir=\"rtl\"`; left alone, the SVG's `text-anchor` would read\n  // `start` and `end` from the page and put the labels on the wrong side of their marks.\n  style: { width, height, maxWidth: '100%', direction: 'ltr' } satisfies CSSProperties,\n});\n\n/**\n * `0` until a web font finishes loading after the chart mounted, then `1`\n * (one more render of the chart, no more). `YAxis width=\"auto\"` measures its\n * labels once, in the fallback font if the web font is not there yet, and a\n * label set in the real font can overrun the axis: `useAxis` (axes.ts) hands\n * the axes a new object when this turns `1`, and they measure again. A chart\n * that mounts with the font ready never changes, and nothing runs where\n * `document.fonts` is missing (SSR, old browsers).\n */\nexport const useFontsLoaded = (): 0 | 1 => {\n  const [loaded, setLoaded] = useState<0 | 1>(0);\n  useEffect(() => {\n    const fonts = typeof document === 'undefined' ? undefined : document.fonts;\n    if (!fonts?.addEventListener) return;\n    let active = true;\n    const done = () => {\n      if (active) setLoaded(1);\n    };\n    fonts.addEventListener('loadingdone', done);\n    // A font already loading when the chart mounts: its event may be on its way\n    // or already gone, `ready` settles once it has loaded.\n    if (fonts.status === 'loading') void fonts.ready.then(done);\n    return () => {\n      active = false;\n      fonts.removeEventListener('loadingdone', done);\n    };\n  }, []);\n  return loaded;\n};\n\ntype EmptyProps = ChartSize & {\n  /** Plain text. An empty string draws nothing. */\n  message: string;\n  ariaLabel: string;\n};\n\n/** What a chart with no data draws in place of its plot: the message, centered, and nothing around it. */\nexport const ChartEmpty = ({ message, ariaLabel, height, width = '100%' }: EmptyProps) => (\n  <div\n    role=\"group\"\n    aria-label={ariaLabel}\n    data-chart-empty=\"\"\n    style={{\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width,\n      height,\n      maxWidth: '100%',\n      color: MUTED,\n      fontSize: 'var(--text-sm, 0.875rem)',\n      textAlign: 'center',\n    }}\n  >\n    {message}\n  </div>\n);\n"]}

package/dist/chunk-T3K6Q34U.cjs

@@ -0,0 +1,82 @@
+"use client";
+'use strict';
+
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+var card = {
+  minWidth: "9rem",
+  padding: "0.625rem 0.75rem",
+  fontSize: "var(--text-xs, 0.75rem)",
+  color: chunkLT3UC65O_cjs.TEXT,
+  background: chunkLT3UC65O_cjs.PANEL,
+  border: `1px solid ${chunkLT3UC65O_cjs.BORDER}`,
+  borderRadius: "var(--radius-xl, 0.75rem)",
+  boxShadow: "var(--shadow-theme-md, 0 4px 8px -2px rgb(16 24 40 / 10%))"
+};
+var TooltipCard = ({ title, rows }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", "aria-live": "polite", style: card, children: [
+  title !== void 0 && title !== "" && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 0.375rem", fontWeight: 600 }, children: title }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.25rem",
+        margin: 0,
+        padding: 0,
+        listStyle: "none"
+      },
+      children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              flexShrink: 0,
+              width: "0.625rem",
+              height: "0.625rem",
+              borderRadius: "50%",
+              background: row.color
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: chunkLT3UC65O_cjs.MUTED }, children: row.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              marginLeft: "auto",
+              paddingLeft: "1rem",
+              fontWeight: 600,
+              fontVariantNumeric: "tabular-nums"
+            },
+            children: row.value
+          }
+        )
+      ] }, i))
+    }
+  )
+] });
+var ChartTooltip = ({
+  active,
+  payload,
+  label,
+  format = String,
+  hideTitle,
+  colorOf,
+  activeIndex
+}) => {
+  if (!active || !payload?.length) return null;
+  const rows = payload.map((item) => ({
+    name: String(item.name),
+    value: format(Number(item.value)),
+    color: colorOf?.(Number(item.value), Number(activeIndex)) ?? String(item.color ?? item.payload?.fill ?? item.fill)
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { title: hideTitle ? void 0 : label, rows });
+};
+
+exports.ChartTooltip = ChartTooltip;
+exports.TooltipCard = TooltipCard;
+//# sourceMappingURL=chunk-T3K6Q34U.cjs.map
+//# sourceMappingURL=chunk-T3K6Q34U.cjs.map

package/dist/chunk-T3K6Q34U.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/ChartTooltip.tsx"],"names":["TEXT","PANEL","BORDER","jsxs","jsx","MUTED"],"mappings":"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","file":"chunk-T3K6Q34U.cjs","sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { TooltipContentProps } from 'recharts';\nimport { BORDER, MUTED, PANEL, TEXT } from './colors';\n\nconst card: CSSProperties = {\n  minWidth: '9rem',\n  padding: '0.625rem 0.75rem',\n  fontSize: 'var(--text-xs, 0.75rem)',\n  color: TEXT,\n  background: PANEL,\n  border: `1px solid ${BORDER}`,\n  borderRadius: 'var(--radius-xl, 0.75rem)',\n  boxShadow: 'var(--shadow-theme-md, 0 4px 8px -2px rgb(16 24 40 / 10%))',\n};\n\n/** A tooltip row: a chip, a name, a value. */\nexport type TooltipRow = { name: string; value: ReactNode; color: string };\n\n/**\n * The tooltip card of every chart. A polite live region, as Recharts\n * recommends for a custom tooltip, so a screen reader announces the point the\n * keyboard or the pointer is on. Every part is React text: markup in a name or\n * a value shows as written.\n */\nexport const TooltipCard = ({ title, rows }: { title?: ReactNode; rows: TooltipRow[] }) => (\n  <div role=\"status\" aria-live=\"polite\" style={card}>\n    {title !== undefined && title !== '' && (\n      <p style={{ margin: '0 0 0.375rem', fontWeight: 600 }}>{title}</p>\n    )}\n    <ul\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '0.25rem',\n        margin: 0,\n        padding: 0,\n        listStyle: 'none',\n      }}\n    >\n      {rows.map((row, i) => (\n        <li key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>\n          <span\n            aria-hidden\n            style={{\n              flexShrink: 0,\n              width: '0.625rem',\n              height: '0.625rem',\n              borderRadius: '50%',\n              background: row.color,\n            }}\n          />\n          <span style={{ color: MUTED }}>{row.name}</span>\n          <span\n            style={{\n              marginLeft: 'auto',\n              paddingLeft: '1rem',\n              fontWeight: 600,\n              fontVariantNumeric: 'tabular-nums',\n            }}\n          >\n            {row.value}\n          </span>\n        </li>\n      ))}\n    </ul>\n  </div>\n);\n\ntype ChartTooltipProps = Partial<TooltipContentProps> & {\n  /** Formats each value (default `String`). */\n  format?: (value: number) => string;\n  /** Leave out the title (the category), for a chart that has no axis to read it from. */\n  hideTitle?: boolean;\n  /** The color of a row's chip from its value and the index of the point, when a bar has a color of its own. `undefined` keeps the series color. */\n  colorOf?: (value: number, index: number) => string | undefined;\n};\n\n/** `<Tooltip content={<ChartTooltip />} />`: the card for the series at the point under the cursor. */\nexport const ChartTooltip = ({\n  active,\n  payload,\n  label,\n  format = String,\n  hideTitle,\n  colorOf,\n  activeIndex,\n}: ChartTooltipProps) => {\n  if (!active || !payload?.length) return null;\n  const rows = payload.map((item) => ({\n    name: String(item.name),\n    value: format(Number(item.value)),\n    color:\n      colorOf?.(Number(item.value), Number(activeIndex)) ??\n      String(item.color ?? item.payload?.fill ?? item.fill),\n  }));\n  return <TooltipCard title={hideTitle ? undefined : label} rows={rows} />;\n};\n"]}

package/dist/chunk-TYQWZR3S.cjs

@@ -0,0 +1,13 @@
+"use client";
+'use strict';
+
+// src/core/animation.ts
+var ANIMATION = {
+  isAnimationActive: "auto",
+  animationDuration: 500,
+  animationEasing: "ease-out"
+};
+
+exports.ANIMATION = ANIMATION;
+//# sourceMappingURL=chunk-TYQWZR3S.cjs.map
+//# sourceMappingURL=chunk-TYQWZR3S.cjs.map

package/dist/chunk-TYQWZR3S.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/animation.ts"],"names":[],"mappings":";;;;AAIO,IAAM,SAAA,GAAY;AAAA,EACvB,iBAAA,EAAmB,MAAA;AAAA,EACnB,iBAAA,EAAmB,GAAA;AAAA,EACnB,eAAA,EAAiB;AACnB","file":"chunk-TYQWZR3S.cjs","sourcesContent":["/**\n * The animation of every series: short, ease-out. `'auto'` is off for\n * `prefers-reduced-motion` and in SSR.\n */\nexport const ANIMATION = {\n  isAnimationActive: 'auto' as const,\n  animationDuration: 500,\n  animationEasing: 'ease-out' as const,\n};\n"]}

package/dist/chunk-UATB2IRY.js

@@ -0,0 +1,51 @@
+"use client";
+// src/core/colors.ts
+var token = (name, fallback) => `var(${name}, ${fallback})`;
+var SERIES_FALLBACKS = [
+  "#465fff",
+  "#06b6d4",
+  "#8b5cf6",
+  "#ec4899",
+  "#64748b",
+  "#f97316",
+  "#14b8a6",
+  "#84cc16"
+];
+var SERIES_TOKENS = [
+  "--color-brand-500",
+  ...SERIES_FALLBACKS.slice(1).map((_, i) => `--color-chart-${i + 2}`)
+];
+var SERIES = SERIES_TOKENS.map((name, i) => token(name, SERIES_FALLBACKS[i]));
+var seriesColor = (index, colors) => colors?.length ? colors[index % colors.length] : SERIES[index % SERIES.length];
+var SUCCESS = token("--color-success-500", "#12b76a");
+var ERROR = token("--color-error-500", "#f04438");
+var STATUS_WARN = token("--color-status-warn", "#f59e0b");
+var STATUS_CRIT = token("--color-status-crit", "#ef4444");
+var PANEL = token("--color-bg-panel", "#fff");
+var TEXT = token("--color-text-primary", "#101828");
+var MUTED = token("--color-text-muted", "#677185");
+var BORDER = token("--color-border", "#d0d5dd");
+var GRID = `color-mix(in srgb, ${BORDER} 55%, transparent)`;
+var TRACK = `color-mix(in srgb, ${BORDER} 70%, transparent)`;
+var INTENT_COLORS = {
+  neutral: MUTED,
+  warning: STATUS_WARN,
+  danger: STATUS_CRIT,
+  success: SUCCESS
+};
+var SEQUENTIAL = [42, 56, 70, 84, 100].map(
+  (share) => `color-mix(in oklab, ${SERIES[0]} ${share}%, ${PANEL})`
+);
+var calendarStep = (index, share) => `color-mix(in oklab, ${SERIES[0]} calc(var(--calendar-share-${index}, ${share}) * 1%), ${PANEL})`;
+var CALENDAR_STEPS = [
+  TRACK,
+  calendarStep(1, 48),
+  calendarStep(2, 65),
+  calendarStep(3, 82),
+  `var(--calendar-top, ${SERIES[0]})`
+];
+var CALENDAR_DARK_CLASS = "dark:[--calendar-share-1:50] dark:[--calendar-share-2:70] dark:[--calendar-share-3:100] dark:[--calendar-top:var(--color-brand-400)]";
+
+export { BORDER, CALENDAR_DARK_CLASS, CALENDAR_STEPS, ERROR, GRID, INTENT_COLORS, MUTED, PANEL, SEQUENTIAL, SERIES, STATUS_CRIT, STATUS_WARN, SUCCESS, TEXT, TRACK, seriesColor };
+//# sourceMappingURL=chunk-UATB2IRY.js.map
+//# sourceMappingURL=chunk-UATB2IRY.js.map

package/dist/chunk-UATB2IRY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/colors.ts"],"names":[],"mappings":";;AASA,IAAM,QAAQ,CAAC,IAAA,EAAc,aAAqB,CAAA,IAAA,EAAO,IAAI,KAAK,QAAQ,CAAA,CAAA,CAAA;AAGnE,IAAM,gBAAA,GAAmB;AAAA,EAC9B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AAEA,IAAM,aAAA,GAAgB;AAAA,EACpB,mBAAA;AAAA,EACA,GAAG,gBAAA,CAAiB,KAAA,CAAM,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,cAAA,EAAiB,CAAA,GAAI,CAAC,CAAA,CAAE;AACrE,CAAA;AAOO,IAAM,MAAA,GAAS,aAAA,CAAc,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,KAAM,KAAA,CAAM,IAAA,EAAM,gBAAA,CAAiB,CAAC,CAAC,CAAC;AAG9E,IAAM,WAAA,GAAc,CAAC,KAAA,EAAe,MAAA,KACzC,QAAQ,MAAA,GAAS,MAAA,CAAO,KAAA,GAAQ,MAAA,CAAO,MAAM,CAAA,GAAI,MAAA,CAAO,KAAA,GAAQ,OAAO,MAAM;AAGxE,IAAM,OAAA,GAAU,KAAA,CAAM,qBAAA,EAAuB,SAAS;AAEtD,IAAM,KAAA,GAAQ,KAAA,CAAM,mBAAA,EAAqB,SAAS;AAElD,IAAM,WAAA,GAAc,KAAA,CAAM,qBAAA,EAAuB,SAAS;AAC1D,IAAM,WAAA,GAAc,KAAA,CAAM,qBAAA,EAAuB,SAAS;AAG1D,IAAM,KAAA,GAAQ,KAAA,CAAM,kBAAA,EAAoB,MAAM;AAC9C,IAAM,IAAA,GAAO,KAAA,CAAM,sBAAA,EAAwB,SAAS;AACpD,IAAM,KAAA,GAAQ,KAAA,CAAM,oBAAA,EAAsB,SAAS;AACnD,IAAM,MAAA,GAAS,KAAA,CAAM,gBAAA,EAAkB,SAAS;AAGhD,IAAM,IAAA,GAAO,sBAAsB,MAAM,CAAA,kBAAA;AACzC,IAAM,KAAA,GAAQ,sBAAsB,MAAM,CAAA,kBAAA;AAG1C,IAAM,aAAA,GAA6C;AAAA,EACxD,OAAA,EAAS,KAAA;AAAA,EACT,OAAA,EAAS,WAAA;AAAA,EACT,MAAA,EAAQ,WAAA;AAAA,EACR,OAAA,EAAS;AACX;AASO,IAAM,aAAa,CAAC,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,GAAG,CAAA,CAAE,GAAA;AAAA,EAC9C,CAAC,UAAU,CAAA,oBAAA,EAAuB,MAAA,CAAO,CAAC,CAAC,CAAA,CAAA,EAAI,KAAK,CAAA,GAAA,EAAM,KAAK,CAAA,CAAA;AACjE;AAKA,IAAM,YAAA,GAAe,CAAC,KAAA,EAAe,KAAA,KACnC,CAAA,oBAAA,EAAuB,MAAA,CAAO,CAAC,CAAC,CAAA,2BAAA,EAA8B,KAAK,CAAA,EAAA,EAAK,KAAK,YAAY,KAAK,CAAA,CAAA,CAAA;AAUzF,IAAM,cAAA,GAAiB;AAAA,EAC5B,KAAA;AAAA,EACA,YAAA,CAAa,GAAG,EAAE,CAAA;AAAA,EAClB,YAAA,CAAa,GAAG,EAAE,CAAA;AAAA,EAClB,YAAA,CAAa,GAAG,EAAE,CAAA;AAAA,EAClB,CAAA,oBAAA,EAAuB,MAAA,CAAO,CAAC,CAAC,CAAA,CAAA;AAClC;AAGO,IAAM,mBAAA,GACX","file":"chunk-UATB2IRY.js","sourcesContent":["import type { ChartIntent } from '../types';\n\n// The colors every Recharts-based chart draws with. Each one is a CSS variable\n// string handed straight to the SVG (`fill`, `stroke`, `stopColor`, `cursor`):\n// a theme, accent or text size switch on <html> repaints the chart with no\n// observer and no `getComputedStyle`. The hex after the comma is the fallback\n// when the theme CSS isn't loaded or during SSR; with the theme it is never\n// used, since `@sckyzo/cosmos-theme` always emits these variables.\n\nconst token = (name: string, fallback: string) => `var(${name}, ${fallback})`;\n\n/** The hex of each series color in the default theme, series 1 first: the blue accent, then the hues of `--color-chart-2` to `--color-chart-8`. */\nexport const SERIES_FALLBACKS = [\n  '#465fff',\n  '#06b6d4',\n  '#8b5cf6',\n  '#ec4899',\n  '#64748b',\n  '#f97316',\n  '#14b8a6',\n  '#84cc16',\n];\n\nconst SERIES_TOKENS = [\n  '--color-brand-500',\n  ...SERIES_FALLBACKS.slice(1).map((_, i) => `--color-chart-${i + 2}`),\n];\n\n/**\n * The categorical palette: the accent, then seven hues. Which hues is decided\n * in the theme CSS: each accent skips the ones that look like it. None of the\n * first four reads as a status (green, amber, red).\n */\nexport const SERIES = SERIES_TOKENS.map((name, i) => token(name, SERIES_FALLBACKS[i]));\n\n/** The color of series `index`: `colors[index]` when given (cycling), the palette otherwise. */\nexport const seriesColor = (index: number, colors?: readonly string[]): string =>\n  colors?.length ? colors[index % colors.length] : SERIES[index % SERIES.length];\n\n// A chart whose series are statuses passes these as `colors`.\nexport const SUCCESS = token('--color-success-500', '#12b76a');\nexport const WARNING = token('--color-warning-500', '#f79009');\nexport const ERROR = token('--color-error-500', '#f04438');\n/** The monitoring statuses, for thresholds. */\nexport const STATUS_WARN = token('--color-status-warn', '#f59e0b');\nexport const STATUS_CRIT = token('--color-status-crit', '#ef4444');\n\n/** The card the chart sits on. */\nexport const PANEL = token('--color-bg-panel', '#fff');\nexport const TEXT = token('--color-text-primary', '#101828');\nexport const MUTED = token('--color-text-muted', '#677185');\nexport const BORDER = token('--color-border', '#d0d5dd');\n// One semantic border variable reads right on every theme; the grid and the\n// empty part of a gauge are lighter steps of it.\nexport const GRID = `color-mix(in srgb, ${BORDER} 55%, transparent)`;\nexport const TRACK = `color-mix(in srgb, ${BORDER} 70%, transparent)`;\n\n/** The color of a reference line or band by its meaning: muted text for `neutral`, the status colors otherwise. */\nexport const INTENT_COLORS: Record<ChartIntent, string> = {\n  neutral: MUTED,\n  warning: STATUS_WARN,\n  danger: STATUS_CRIT,\n  success: SUCCESS,\n};\n\n/**\n * Five sequential steps of the accent over the card, low to high, on any\n * theme. Mixed in OKLab, which spaces the steps evenly to the eye: against the\n * card, the lowest step stays at 1.5:1 or more in the dark themes whatever the\n * accent (where a 24% share sat at 1.2:1), and two neighbors differ by 1.19:1\n * or more.\n */\nexport const SEQUENTIAL = [42, 56, 70, 84, 100].map(\n  (share) => `color-mix(in oklab, ${SERIES[0]} ${share}%, ${PANEL})`\n);\n\n// A calendar step: a share of the accent over the card. The shares and the top\n// step are variables so that the dark themes can set their own on the chart's\n// root (`CalendarChart`); the fallbacks are the light themes' values.\nconst calendarStep = (index: number, share: number) =>\n  `color-mix(in oklab, ${SERIES[0]} calc(var(--calendar-share-${index}, ${share}) * 1%), ${PANEL})`;\n\n/**\n * Five steps for a calendar of days: the neutral track for a day with no\n * value, then four of the accent. A day without activity is a cell of its own,\n * not a hole, and the four steps stay apart on any theme and accent. In the\n * light themes they are 48, 65, 82 and 100% of the accent over the card; the\n * dark themes set lower shares and a light accent for the top step through\n * `--calendar-share-1` to `-3` and `--calendar-top`.\n */\nexport const CALENDAR_STEPS = [\n  TRACK,\n  calendarStep(1, 48),\n  calendarStep(2, 65),\n  calendarStep(3, 82),\n  `var(--calendar-top, ${SERIES[0]})`,\n];\n\n/** Sets the dark themes' calendar scale on the chart's root: Tailwind's `dark:` covers both of them. */\nexport const CALENDAR_DARK_CLASS =\n  'dark:[--calendar-share-1:50] dark:[--calendar-share-2:70] dark:[--calendar-share-3:100] dark:[--calendar-top:var(--color-brand-400)]';\n"]}

package/dist/chunk-UJIV5PVI.js

@@ -0,0 +1,13 @@
+"use client";
+// src/core/data.ts
+var seriesKey = (index) => `s${index}`;
+var toRows = (categories, series) => categories.map((category, i) => ({
+  category,
+  ...Object.fromEntries(series.map((s, k) => [seriesKey(k), s.data[i]]))
+}));
+var hasNoData = (series) => series.every((s) => s.data.length === 0);
+var safeId = (id) => id.replace(/[^a-zA-Z0-9_-]/g, "");
+
+export { hasNoData, safeId, seriesKey, toRows };
+//# sourceMappingURL=chunk-UJIV5PVI.js.map
+//# sourceMappingURL=chunk-UJIV5PVI.js.map

package/dist/chunk-UJIV5PVI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/data.ts"],"names":[],"mappings":";;AAGO,IAAM,SAAA,GAAY,CAAC,KAAA,KAAkB,CAAA,CAAA,EAAI,KAAK,CAAA;AAG9C,IAAM,MAAA,GAAS,CAAC,UAAA,EAA0C,MAAA,KAC/D,WAAW,GAAA,CAAI,CAAC,UAAU,CAAA,MAAO;AAAA,EAC/B,QAAA;AAAA,EACA,GAAG,MAAA,CAAO,WAAA,CAAY,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM,CAAC,SAAA,CAAU,CAAC,CAAA,EAAG,CAAA,CAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACvE,CAAA,CAAE;AAGG,IAAM,SAAA,GAAY,CAAC,MAAA,KACxB,MAAA,CAAO,KAAA,CAAM,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,CAAK,MAAA,KAAW,CAAC;AAGlC,IAAM,SAAS,CAAC,EAAA,KAAe,EAAA,CAAG,OAAA,CAAQ,mBAAmB,EAAE","file":"chunk-UJIV5PVI.js","sourcesContent":["export type SeriesInput = { name: string; data: number[] };\n\n/** The data key of series `index`. Series are keyed by position: a name may hold dots, which Recharts reads as a path. */\nexport const seriesKey = (index: number) => `s${index}`;\n\n/** One row per category, with a value under each series key. */\nexport const toRows = (categories: readonly (string | number)[], series: readonly SeriesInput[]) =>\n  categories.map((category, i) => ({\n    category,\n    ...Object.fromEntries(series.map((s, k) => [seriesKey(k), s.data[i]])),\n  }));\n\n/** Whether there is nothing to draw: no series, or only series without a point. */\nexport const hasNoData = (series: readonly { data: readonly unknown[] }[]): boolean =>\n  series.every((s) => s.data.length === 0);\n\n/** An id safe in `url(#…)`, from React's `useId` (`:r1:`). */\nexport const safeId = (id: string) => id.replace(/[^a-zA-Z0-9_-]/g, '');\n"]}