@fabio.caffarello/react-design-system 4.2.0 → 4.4.0

package/dist/granular/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/granular/ui/primitives/DataBadge/DataBadge.js

@@ -0,0 +1,140 @@
+"use client";
+var S = Object.defineProperty, B = Object.defineProperties;
+var D = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var g = (e, r, a) => r in e ? S(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, f = (e, r) => {
+  for (var a in r || (r = {}))
+    p.call(r, a) && g(e, a, r[a]);
+  if (i)
+    for (var a of i(r))
+      b.call(r, a) && g(e, a, r[a]);
+  return e;
+}, u = (e, r) => B(e, D(r));
+var x = (e, r) => {
+  var a = {};
+  for (var n in e)
+    p.call(e, n) && r.indexOf(n) < 0 && (a[n] = e[n]);
+  if (e != null && i)
+    for (var n of i(e))
+      r.indexOf(n) < 0 && b.call(e, n) && (a[n] = e[n]);
+  return a;
+};
+import { jsxs as h, jsx as d, Fragment as j } from "react/jsx-runtime";
+import { memo as C, forwardRef as R } from "react";
+import { getRadiusClass as T } from "../../tokens/radius.js";
+import { getSpacingClass as s } from "../../tokens/spacing.js";
+import { getTypographyWeight as y, getTypographySize as o } from "../../tokens/typography.js";
+import { cn as t } from "../../utils/cn.js";
+import { cva as V } from "../../utils/cva.js";
+const _ = V(
+  t("inline-flex", "items-center", "border", T("md")),
+  {
+    variants: {
+      tone: {
+        neutral: t(
+          "bg-surface-muted",
+          "text-fg-primary",
+          "border-line-default"
+        ),
+        success: t("bg-success-bg", "text-success-dark", "border-success"),
+        warning: t("bg-warning-bg", "text-warning-dark", "border-warning"),
+        error: t("bg-error-bg", "text-error-dark", "border-error"),
+        info: t("bg-info-bg", "text-info-dark", "border-info"),
+        primary: t(
+          "bg-surface-brand-subtle",
+          "text-fg-brand-emphasis",
+          "border-line-brand"
+        ),
+        secondary: t(
+          "bg-surface-secondary-subtle",
+          "text-fg-brand-secondary-emphasis",
+          "border-line-secondary"
+        ),
+        // Categorical data-viz tone — fuchsia soft-wash, sibling to the
+        // chart palette. Not a status; distinct from secondary (brand violet).
+        dataviz: t("bg-dataviz-bg", "text-dataviz-dark", "border-dataviz")
+      },
+      size: {
+        sm: t(
+          s("1.5", "px"),
+          s("0.5", "py"),
+          s("0.5", "gap"),
+          "[&_svg]:size-3"
+        ),
+        md: t(
+          s("sm", "px"),
+          s("0.5", "py"),
+          s("xs", "gap"),
+          "[&_svg]:size-3.5"
+        )
+      }
+    },
+    defaultVariants: { tone: "neutral", size: "md" }
+  }
+), F = C(
+  R(function(W, k) {
+    var m = W, {
+      label: r,
+      source: a,
+      tone: n = "neutral",
+      size: l = "md",
+      icon: c,
+      className: v = ""
+    } = m, z = x(m, [
+      "label",
+      "source",
+      "tone",
+      "size",
+      "icon",
+      "className"
+    ]);
+    const N = a != null && a !== "", w = l === "sm" ? "caption" : "bodySmall";
+    return /* @__PURE__ */ h(
+      "span",
+      u(f({
+        ref: k,
+        className: t(_({ tone: n, size: l }), v)
+      }, z), {
+        children: [
+          c ? /* @__PURE__ */ d(
+            "span",
+            {
+              className: "inline-flex shrink-0 items-center",
+              "aria-hidden": "true",
+              children: c
+            }
+          ) : null,
+          /* @__PURE__ */ d(
+            "span",
+            {
+              className: t(
+                o(w),
+                y("label")
+              ),
+              children: r
+            }
+          ),
+          N ? /* @__PURE__ */ h(j, { children: [
+            /* @__PURE__ */ d("span", { "aria-hidden": "true", className: o("caption"), children: "·" }),
+            /* @__PURE__ */ d(
+              "span",
+              {
+                className: t(
+                  o("caption"),
+                  y("caption")
+                ),
+                children: a
+              }
+            )
+          ] }) : null
+        ]
+      })
+    );
+  })
+);
+F.displayName = "DataBadge";
+export {
+  F as default
+};
+//# sourceMappingURL=DataBadge.js.map

package/dist/granular/ui/primitives/DataBadge/DataBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataBadge.js","sources":["../../../../../src/ui/primitives/DataBadge/DataBadge.tsx"],"sourcesContent":["import { memo, forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn, cva } from \"../../utils\";\n\n/**\n * Semantic tone for a {@link DataBadge}. The status/brand members mirror the\n * `Badge` vocabulary (role, not tone) so the soft-wash treatment is shared\n * and already AA-verified; `dataviz` adds a CATEGORICAL member (a\n * reddish-purple wash for \"category / analytical\" data, the badge-facing\n * counterpart to the chart palette) that is intentionally NOT a status.\n * Map a consumer's tone names onto these roles: `default → neutral`,\n * `destructive → error`, `brand → primary`, `accent → dataviz` (the\n * data-viz purple — RDS `accent` is cyan, so the category tone is `dataviz`).\n */\nexport type DataBadgeTone =\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"primary\"\n  | \"secondary\"\n  | \"dataviz\";\n\nexport type DataBadgeSize = \"sm\" | \"md\";\n\nexport interface DataBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Primary datum — the value the badge is about (e.g. \"L2\", \"Aprovada\"). */\n  label: ReactNode;\n  /**\n   * Provenance of the datum, rendered as a lesser-emphasis sub-label after\n   * the label (e.g. \"Câmara\", \"Portal Transparência\"). Omitted when absent.\n   */\n  source?: ReactNode;\n  /** Semantic tone (role-based color). Defaults to `neutral`. */\n  tone?: DataBadgeTone;\n  /** Optional decorative leading icon (rendered `aria-hidden`). */\n  icon?: ReactNode;\n  /** Size scale. Defaults to `md`. */\n  size?: DataBadgeSize;\n}\n\n// Tone → soft-wash classes, mirroring Badge's already-AA-verified scale.\nconst dataBadgeVariants = cva(\n  cn(\"inline-flex\", \"items-center\", \"border\", getRadiusClass(\"md\")),\n  {\n    variants: {\n      tone: {\n        neutral: cn(\n          \"bg-surface-muted\",\n          \"text-fg-primary\",\n          \"border-line-default\",\n        ),\n        success: cn(\"bg-success-bg\", \"text-success-dark\", \"border-success\"),\n        warning: cn(\"bg-warning-bg\", \"text-warning-dark\", \"border-warning\"),\n        error: cn(\"bg-error-bg\", \"text-error-dark\", \"border-error\"),\n        info: cn(\"bg-info-bg\", \"text-info-dark\", \"border-info\"),\n        primary: cn(\n          \"bg-surface-brand-subtle\",\n          \"text-fg-brand-emphasis\",\n          \"border-line-brand\",\n        ),\n        secondary: cn(\n          \"bg-surface-secondary-subtle\",\n          \"text-fg-brand-secondary-emphasis\",\n          \"border-line-secondary\",\n        ),\n        // Categorical data-viz tone — fuchsia soft-wash, sibling to the\n        // chart palette. Not a status; distinct from secondary (brand violet).\n        dataviz: cn(\"bg-dataviz-bg\", \"text-dataviz-dark\", \"border-dataviz\"),\n      },\n      size: {\n        sm: cn(\n          getSpacingClass(\"1.5\", \"px\"),\n          getSpacingClass(\"0.5\", \"py\"),\n          getSpacingClass(\"0.5\", \"gap\"),\n          \"[&_svg]:size-3\",\n        ),\n        md: cn(\n          getSpacingClass(\"sm\", \"px\"),\n          getSpacingClass(\"0.5\", \"py\"),\n          getSpacingClass(\"xs\", \"gap\"),\n          \"[&_svg]:size-3.5\",\n        ),\n      },\n    },\n    defaultVariants: { tone: \"neutral\", size: \"md\" },\n  },\n);\n\n/**\n * DataBadge\n *\n * An inline metadata chip: a primary `label`, an optional lesser-emphasis\n * `source` sub-label (the datum's provenance), a semantic `tone`, and an\n * optional decorative `icon`. Built for transparency/data UIs where a value\n * must travel with where it came from (\"L2 · Portal Transparência\").\n *\n * Why a separate primitive and not `Badge`: `Badge` is a single-string\n * status label; `DataBadge` carries a value + its source as a structured\n * pair. The `source` is the differentiator — it has no slot in `Badge` /\n * `Chip` / `Info`.\n *\n * Accessibility: the visible text (label, then source) IS the accessible\n * name — the separator and any `icon` are `aria-hidden`. Hierarchy between\n * label and source is conveyed by size + weight, never by dropping the\n * source below its tone's AA-safe text color. The root is a plain inline\n * `<span>` with no live-region role (metadata is static, not announced);\n * pass `role` / `aria-label` via props if a grouping role is wanted.\n *\n * Server-safe: no hooks, no client APIs, no DOM handlers of its own — ships\n * from the `./server` entry.\n *\n * @example\n * ```tsx\n * <DataBadge label=\"L2\" source=\"Portal Transparência\" tone=\"warning\" />\n * <DataBadge label=\"Aprovada\" tone=\"success\" />\n * ```\n */\nconst DataBadge = memo(\n  forwardRef<HTMLSpanElement, DataBadgeProps>(function DataBadge(\n    {\n      label,\n      source,\n      tone = \"neutral\",\n      size = \"md\",\n      icon,\n      className = \"\",\n      ...rest\n    },\n    ref,\n  ) {\n    const hasSource = source !== undefined && source !== null && source !== \"\";\n    // Label is the larger/heavier tier; source is one size smaller and a\n    // lighter weight. Both keep the tone's AA-safe text color — hierarchy\n    // comes from size + weight, not from reducing contrast.\n    const labelSize = size === \"sm\" ? \"caption\" : \"bodySmall\";\n\n    return (\n      <span\n        ref={ref}\n        className={cn(dataBadgeVariants({ tone, size }), className)}\n        {...rest}\n      >\n        {icon ? (\n          <span\n            className=\"inline-flex shrink-0 items-center\"\n            aria-hidden=\"true\"\n          >\n            {icon}\n          </span>\n        ) : null}\n        <span\n          className={cn(\n            getTypographySize(labelSize),\n            getTypographyWeight(\"label\"),\n          )}\n        >\n          {label}\n        </span>\n        {hasSource ? (\n          <>\n            <span aria-hidden=\"true\" className={getTypographySize(\"caption\")}>\n              ·\n            </span>\n            <span\n              className={cn(\n                getTypographySize(\"caption\"),\n                getTypographyWeight(\"caption\"),\n              )}\n            >\n              {source}\n            </span>\n          </>\n        ) : null}\n      </span>\n    );\n  }),\n);\n\nDataBadge.displayName = \"DataBadge\";\n\nexport default DataBadge;\n"],"names":["dataBadgeVariants","cva","cn","getRadiusClass","getSpacingClass","DataBadge","memo","forwardRef","_a","ref","_b","label","source","tone","size","icon","className","rest","__objRest","hasSource","labelSize","jsxs","__spreadProps","__spreadValues","jsx","getTypographySize","getTypographyWeight","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAMA,IAAoBC;AAAA,EACxBC,EAAG,eAAe,gBAAgB,UAAUC,EAAe,IAAI,CAAC;AAAA,EAChE;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAASD;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,SAASA,EAAG,iBAAiB,qBAAqB,gBAAgB;AAAA,QAClE,SAASA,EAAG,iBAAiB,qBAAqB,gBAAgB;AAAA,QAClE,OAAOA,EAAG,eAAe,mBAAmB,cAAc;AAAA,QAC1D,MAAMA,EAAG,cAAc,kBAAkB,aAAa;AAAA,QACtD,SAASA;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA;AAAA;AAAA,QAIF,SAASA,EAAG,iBAAiB,qBAAqB,gBAAgB;AAAA,MAAA;AAAA,MAEpE,MAAM;AAAA,QACJ,IAAIA;AAAA,UACFE,EAAgB,OAAO,IAAI;AAAA,UAC3BA,EAAgB,OAAO,IAAI;AAAA,UAC3BA,EAAgB,OAAO,KAAK;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF,IAAIF;AAAA,UACFE,EAAgB,MAAM,IAAI;AAAA,UAC1BA,EAAgB,OAAO,IAAI;AAAA,UAC3BA,EAAgB,MAAM,KAAK;AAAA,UAC3B;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB,EAAE,MAAM,WAAW,MAAM,KAAA;AAAA,EAAK;AAEnD,GA+BMC,IAAYC;AAAA,EAChBC,EAA4C,SAC1CC,GASAC,GACA;AAVA,QAAAC,IAAAF,GACE;AAAA,aAAAG;AAAA,MACA,QAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,MAAAC,IAAO;AAAA,MACP,MAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,QANdN,GAOKO,IAAAC,EAPLR,GAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAMS,IAAoCP,KAAW,QAAQA,MAAW,IAIlEQ,IAAYN,MAAS,OAAO,YAAY;AAE9C,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAAC,EAAAC,EAAA;AAAA,QACC,KAAAd;AAAA,QACA,WAAWP,EAAGF,EAAkB,EAAE,MAAAa,GAAM,MAAAC,EAAA,CAAM,GAAGE,CAAS;AAAA,SACtDC,IAHL;AAAA,QAKE,UAAA;AAAA,UAAAF,IACC,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cAEX,UAAAT;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,UACJ,gBAAAS;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWtB;AAAA,gBACTuB,EAAkBL,CAAS;AAAA,gBAC3BM,EAAoB,OAAO;AAAA,cAAA;AAAA,cAG5B,UAAAf;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFQ,IACC,gBAAAE,EAAAM,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAH,EAAC,UAAK,eAAY,QAAO,WAAWC,EAAkB,SAAS,GAAG,UAAA,KAElE;AAAA,YACA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWtB;AAAA,kBACTuB,EAAkB,SAAS;AAAA,kBAC3BC,EAAoB,SAAS;AAAA,gBAAA;AAAA,gBAG9B,UAAAd;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,EAAA,CACF,IACE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV,CAAC;AACH;AAEAP,EAAU,cAAc;"}

package/dist/granular/ui/tokens/chart.js

@@ -0,0 +1,73 @@
+"use client";
+const c = 8, n = [
+  {
+    index: 1,
+    name: "Orange",
+    var: "var(--color-chart-1)",
+    bg: "bg-chart-1",
+    text: "text-chart-1"
+  },
+  {
+    index: 2,
+    name: "Sky blue",
+    var: "var(--color-chart-2)",
+    bg: "bg-chart-2",
+    text: "text-chart-2"
+  },
+  {
+    index: 3,
+    name: "Bluish green",
+    var: "var(--color-chart-3)",
+    bg: "bg-chart-3",
+    text: "text-chart-3"
+  },
+  {
+    index: 4,
+    name: "Vermillion",
+    var: "var(--color-chart-4)",
+    bg: "bg-chart-4",
+    text: "text-chart-4"
+  },
+  {
+    index: 5,
+    name: "Blue",
+    var: "var(--color-chart-5)",
+    bg: "bg-chart-5",
+    text: "text-chart-5"
+  },
+  {
+    index: 6,
+    name: "Reddish purple",
+    var: "var(--color-chart-6)",
+    bg: "bg-chart-6",
+    text: "text-chart-6"
+  },
+  {
+    index: 7,
+    name: "Yellow",
+    var: "var(--color-chart-7)",
+    bg: "bg-chart-7",
+    text: "text-chart-7"
+  },
+  {
+    index: 8,
+    name: "Gray",
+    var: "var(--color-chart-8)",
+    bg: "bg-chart-8",
+    text: "text-chart-8"
+  }
+];
+function o(t) {
+  return `var(--color-chart-${(Math.trunc(t) % 8 + 8) % 8 + 1})`;
+}
+function h(t, r = "bg") {
+  const e = (Math.trunc(t) % 8 + 8) % 8;
+  return `${r}-chart-${e + 1}`;
+}
+export {
+  c as CHART_PALETTE_SIZE,
+  n as CHART_PALETTE_TOKENS,
+  o as getChartColor,
+  h as getChartColorClass
+};
+//# sourceMappingURL=chart.js.map

package/dist/granular/ui/tokens/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sources":["../../../../src/ui/tokens/chart.ts"],"sourcesContent":["/**\n * Data-Visualization Categorical Palette (Okabe-Ito)\n *\n * Eight colorblind-safe categorical colors for chart series (parties, vote\n * types, ranges, …). This is a SEPARATE axis from the semantic feedback\n * colors: `success`/`warning`/`error`/`info` encode *state*, never\n * *category* — using `error` for \"series 3\" is semantically wrong and\n * destroys meaning. A categorical palette answers \"which series is this\",\n * and it must stay distinguishable under color-vision deficiency.\n *\n * The values are the canonical Okabe & Ito (2008) palette — the reference\n * categorical palette engineered to be distinguishable in deuteranopia,\n * protanopia, and tritanopia — with `black` swapped for a neutral gray so\n * the 8th series survives on a dark canvas. Light values are the canonical\n * tones; the dark theme lifts each toward higher luminance (hue preserved)\n * so every series clears the WCAG 1.4.11 graphical-object 3:1 contrast over\n * `surface-canvas` (slate-950). The CSS source of truth is\n * `src/styles/semantic/colors.css` (light) and `src/styles/themes/dark.css`\n * (dark, both blocks).\n *\n * On-WHITE caveat: orange/sky-blue/yellow/gray are below 3:1 against a white\n * canvas — an intrinsic property of Okabe-Ito's light hues. Fine for FILLS\n * (bars, areas, large marks); for thin strokes (lines, 1px borders) add a\n * stroke/outline or use a darker series first. Colorblind-safety (the point\n * of the palette) is preserved regardless.\n */\n\n/** Number of distinct colors in the categorical palette. */\nexport const CHART_PALETTE_SIZE = 8 as const;\n\n/** 1-based position within the categorical palette. */\nexport type ChartColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nexport interface ChartColorToken {\n  /** 1-based palette position (matches the `--color-chart-N` token). */\n  index: ChartColorIndex;\n  /** Okabe-Ito hue name — use for legends / documentation. */\n  name: string;\n  /** Theme-aware CSS reference, e.g. `\"var(--color-chart-1)\"`. */\n  var: string;\n  /** Tailwind background class, e.g. `\"bg-chart-1\"`. */\n  bg: string;\n  /** Tailwind text class, e.g. `\"text-chart-1\"`. */\n  text: string;\n}\n\n/**\n * Palette metadata in canonical order. The actual color values live in CSS\n * (theme-aware); these tokens carry the references and human-readable names.\n */\nexport const CHART_PALETTE_TOKENS: readonly ChartColorToken[] = [\n  {\n    index: 1,\n    name: \"Orange\",\n    var: \"var(--color-chart-1)\",\n    bg: \"bg-chart-1\",\n    text: \"text-chart-1\",\n  },\n  {\n    index: 2,\n    name: \"Sky blue\",\n    var: \"var(--color-chart-2)\",\n    bg: \"bg-chart-2\",\n    text: \"text-chart-2\",\n  },\n  {\n    index: 3,\n    name: \"Bluish green\",\n    var: \"var(--color-chart-3)\",\n    bg: \"bg-chart-3\",\n    text: \"text-chart-3\",\n  },\n  {\n    index: 4,\n    name: \"Vermillion\",\n    var: \"var(--color-chart-4)\",\n    bg: \"bg-chart-4\",\n    text: \"text-chart-4\",\n  },\n  {\n    index: 5,\n    name: \"Blue\",\n    var: \"var(--color-chart-5)\",\n    bg: \"bg-chart-5\",\n    text: \"text-chart-5\",\n  },\n  {\n    index: 6,\n    name: \"Reddish purple\",\n    var: \"var(--color-chart-6)\",\n    bg: \"bg-chart-6\",\n    text: \"text-chart-6\",\n  },\n  {\n    index: 7,\n    name: \"Yellow\",\n    var: \"var(--color-chart-7)\",\n    bg: \"bg-chart-7\",\n    text: \"text-chart-7\",\n  },\n  {\n    index: 8,\n    name: \"Gray\",\n    var: \"var(--color-chart-8)\",\n    bg: \"bg-chart-8\",\n    text: \"text-chart-8\",\n  },\n] as const;\n\n/**\n * Resolve a chart series index to a theme-aware color reference.\n *\n * `seriesIndex` is **0-based** (built for `data.map((d, i) => …)`) and wraps\n * modulo {@link CHART_PALETTE_SIZE}, so a 10-series chart cycles back to the\n * first color rather than running out. Negative indices wrap correctly too.\n * The returned `var(--color-chart-N)` resolves per active theme (light/dark),\n * so charts re-tint automatically — pass it straight to a recharts\n * `fill`/`stroke` or an inline `style`.\n *\n * @example\n * ```tsx\n * import { getChartColor } from \"@fabio.caffarello/react-design-system\";\n *\n * {series.map((s, i) => (\n *   <Bar key={s.id} dataKey={s.id} fill={getChartColor(i)} />\n * ))}\n * ```\n *\n * @param seriesIndex - 0-based series position.\n * @returns A `var(--color-chart-N)` reference (theme-aware).\n */\nexport function getChartColor(seriesIndex: number): string {\n  const n = Math.trunc(seriesIndex);\n  const wrapped =\n    ((n % CHART_PALETTE_SIZE) + CHART_PALETTE_SIZE) % CHART_PALETTE_SIZE;\n  return `var(--color-chart-${wrapped + 1})`;\n}\n\n/**\n * Tailwind class variant of {@link getChartColor} for DOM elements (legend\n * dots, swatches) where a class is more convenient than an inline style.\n *\n * @param seriesIndex - 0-based series position (wraps modulo the palette).\n * @param property - `\"bg\"` (default) or `\"text\"`.\n * @returns A `bg-chart-N` / `text-chart-N` class string.\n */\nexport function getChartColorClass(\n  seriesIndex: number,\n  property: \"bg\" | \"text\" = \"bg\",\n): string {\n  const n = Math.trunc(seriesIndex);\n  const wrapped =\n    ((n % CHART_PALETTE_SIZE) + CHART_PALETTE_SIZE) % CHART_PALETTE_SIZE;\n  return `${property}-chart-${wrapped + 1}`;\n}\n"],"names":["CHART_PALETTE_SIZE","CHART_PALETTE_TOKENS","getChartColor","seriesIndex","getChartColorClass","property","wrapped"],"mappings":";AA4BO,MAAMA,IAAqB,GAsBrBC,IAAmD;AAAA,EAC9D;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAEV;AAwBO,SAASC,EAAcC,GAA6B;AAIzD,SAAO,sBAHG,KAAK,MAAMA,CAAW,IAExB,IAAsB,KAAsB,IACd,CAAC;AACzC;AAUO,SAASC,EACdD,GACAE,IAA0B,MAClB;AAER,QAAMC,KADI,KAAK,MAAMH,CAAW,IAExB,IAAsB,KAAsB;AACpD,SAAO,GAAGE,CAAQ,UAAUC,IAAU,CAAC;AACzC;"}