@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

package/dist/charts/index.js

@@ -0,0 +1,769 @@
+'use strict';
+
+var cn = require('../_shared/cn-DPPQUJu1.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var recharts = require('recharts');
+require('clsx');
+require('tailwind-merge');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var _excluded$3 = ["className", "title", "description", "defaultTitle", "data", "height", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
+// The swatch colour arrives as a custom property so a token (`rgb(var(--dt-*))`)
+// and a resolved rgb() string both work.
+var swatch = function swatch(size) {
+  return cn.cn("inline-block shrink-0 rounded-full bg-[color:var(--dt-chart-color)]", size);
+};
+var sizeStyle = function sizeStyle(height) {
+  return {
+    height: typeof height === "number" ? "".concat(height, "px") : height
+  };
+};
+function ChartLegend(_ref) {
+  var items = _ref.items;
+  return jsxRuntime.jsx("ul", {
+    className: "mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-gray-600 dark:text-gray-300",
+    "data-testid": "chart-legend",
+    children: items.map(function (item) {
+      return jsxRuntime.jsxs("li", {
+        className: "inline-flex items-center gap-1.5",
+        children: [jsxRuntime.jsx("span", {
+          className: swatch("h-2.5 w-2.5"),
+          style: {
+            "--dt-chart-color": item.color
+          },
+          "aria-hidden": "true"
+        }), jsxRuntime.jsx("span", {
+          children: item.name
+        })]
+      }, item.name);
+    })
+  });
+}
+function ChartTooltipContent(_ref2) {
+  var active = _ref2.active,
+    payload = _ref2.payload,
+    label = _ref2.label,
+    valueFormatter = _ref2.valueFormatter,
+    _ref2$hideLabel = _ref2.hideLabel,
+    hideLabel = _ref2$hideLabel === void 0 ? false : _ref2$hideLabel;
+  if (!active || !payload || !payload.length) return null;
+  return jsxRuntime.jsxs("div", {
+    className: "rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-900 shadow-md dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+    children: [!hideLabel && label != null && label !== "" && jsxRuntime.jsx("p", {
+      className: "mb-1 font-medium",
+      children: label
+    }), jsxRuntime.jsx("ul", {
+      className: "space-y-0.5",
+      children: payload.map(function (entry) {
+        var _entry$payload;
+        return jsxRuntime.jsxs("li", {
+          className: "flex items-center gap-2",
+          children: [jsxRuntime.jsx("span", {
+            className: swatch("h-2 w-2"),
+            style: {
+              "--dt-chart-color": entry.color || ((_entry$payload = entry.payload) === null || _entry$payload === void 0 ? void 0 : _entry$payload.fill)
+            },
+            "aria-hidden": "true"
+          }), jsxRuntime.jsx("span", {
+            className: "text-gray-600 dark:text-gray-300",
+            children: entry.name
+          }), jsxRuntime.jsx("span", {
+            className: "ml-auto pl-3 font-medium tabular-nums",
+            children: valueFormatter(entry.value)
+          })]
+        }, "".concat(entry.dataKey, "-").concat(entry.name));
+      })
+    })]
+  });
+}
+function ChartDataTable(_ref3) {
+  var caption = _ref3.caption,
+    columns = _ref3.columns,
+    rows = _ref3.rows;
+  return jsxRuntime.jsxs("table", {
+    className: "sr-only",
+    "data-testid": "chart-data-table",
+    children: [caption && jsxRuntime.jsx("caption", {
+      children: caption
+    }), jsxRuntime.jsx("thead", {
+      children: jsxRuntime.jsx("tr", {
+        children: columns.map(function (c) {
+          return jsxRuntime.jsx("th", {
+            scope: "col",
+            children: c.label
+          }, c.key);
+        })
+      })
+    }), jsxRuntime.jsx("tbody", {
+      children: rows.map(function (row, r) {
+        return jsxRuntime.jsx("tr", {
+          children: columns.map(function (c, i) {
+            return i === 0 ? jsxRuntime.jsx("th", {
+              scope: "row",
+              children: c.format(row[c.key])
+            }, c.key) : jsxRuntime.jsx("td", {
+              children: c.format(row[c.key])
+            }, c.key);
+          })
+        }, r);
+      })
+    })]
+  });
+}
+/**
+ * The accessible shell every chart renders: the SVG lives in a `role="img"`
+ * region named by `title` and described by `description`; the numbers are
+ * repeated in a visually-hidden table (recharts' SVG has no accessible content).
+ */
+var ChartFrame = /*#__PURE__*/React__default.default.forwardRef(function ChartFrame(_ref4, ref) {
+  var className = _ref4.className,
+    title = _ref4.title,
+    description = _ref4.description,
+    defaultTitle = _ref4.defaultTitle,
+    data = _ref4.data,
+    height = _ref4.height,
+    _ref4$emptyState = _ref4.emptyState,
+    emptyState = _ref4$emptyState === void 0 ? "No data to display" : _ref4$emptyState,
+    legend = _ref4.legend,
+    _ref4$accessibleTable = _ref4.accessibleTable,
+    accessibleTable = _ref4$accessibleTable === void 0 ? true : _ref4$accessibleTable,
+    tableColumns = _ref4.tableColumns,
+    children = _ref4.children,
+    ariaLabel = _ref4["aria-label"],
+    rest = cn._objectWithoutProperties(_ref4, _excluded$3);
+  var descriptionId = React.useId();
+  var name = title || ariaLabel || defaultTitle;
+  if (!Array.isArray(data) || data.length === 0) {
+    return jsxRuntime.jsx("div", cn._objectSpread2(cn._objectSpread2({
+      ref: ref,
+      className: cn.cn("flex w-full items-center justify-center rounded-md border border-dashed border-gray-300 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400", className),
+      style: sizeStyle(height),
+      role: "status",
+      "aria-label": name,
+      "data-empty": "true"
+    }, rest), {}, {
+      children: emptyState
+    }));
+  }
+  return jsxRuntime.jsxs("div", cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    className: cn.cn("w-full", className)
+  }, rest), {}, {
+    children: [jsxRuntime.jsx("div", {
+      role: "img",
+      "aria-label": name,
+      "aria-describedby": description ? descriptionId : undefined,
+      className: "w-full text-gray-500 dark:text-gray-400",
+      style: sizeStyle(height),
+      children: children
+    }), description && jsxRuntime.jsx("p", {
+      id: descriptionId,
+      className: "sr-only",
+      children: description
+    }), legend && legend.length > 0 && jsxRuntime.jsx(ChartLegend, {
+      items: legend
+    }), accessibleTable && jsxRuntime.jsx(ChartDataTable, {
+      caption: name,
+      columns: tableColumns,
+      rows: data
+    })]
+  }));
+});
+
+/** `true` when the user asked the OS for reduced motion. */
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+var CHART_PALETTES = ["primary", "secondary", "success", "warning", "error", "info", "gray"];
+var DEFAULT_CHART_COLORS = ["primary", "success", "warning", "error", "info", "secondary", "gray"];
+var TOKEN_RE = new RegExp("^(".concat(CHART_PALETTES.join("|"), ")(?:-(50|[1-9]00|950))?$"));
+var CHROME_VARS = {
+  grid: "--dt-line",
+  axis: "--dt-muted",
+  surface: "--dt-surface",
+  text: "--dt-foreground"
+};
+/** `"primary"` → `"--dt-primary-500"`, `"error-300"` → `"--dt-error-300"`; null for anything else. */
+function tokenVar(color) {
+  var m = TOKEN_RE.exec(String(color || ""));
+  return m ? "--dt-".concat(m[1], "-").concat(m[2] || "500") : null;
+}
+function readVar(name) {
+  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return "";
+  return window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+// SVG presentation attributes do not resolve var() in every engine, so a token is
+// turned into a concrete rgb() string when the browser can tell us its value. The
+// var() form is the SSR / jsdom fallback.
+function resolveVar(name) {
+  var value = readVar(name);
+  return value ? "rgb(".concat(value.split(/[\s,]+/).join(" "), ")") : "rgb(var(".concat(name, "))");
+}
+/**
+ * A series colour: a palette token (`primary`, `success-600`, …) resolves to the
+ * matching `--dt-*` variable; any other string is treated as a CSS colour supplied
+ * by the consumer (e.g. a colour stored with the data).
+ */
+function resolveColor(color) {
+  var name = tokenVar(color);
+  return name ? resolveVar(name) : color;
+}
+function seriesColors(categories, colors) {
+  var palette = colors && colors.length ? colors : DEFAULT_CHART_COLORS;
+  return categories.map(function (_, i) {
+    return resolveColor(palette[i % palette.length]);
+  });
+}
+function readChrome() {
+  return Object.fromEntries(Object.entries(CHROME_VARS).map(function (_ref) {
+    var _ref2 = cn._slicedToArray(_ref, 2),
+      k = _ref2[0],
+      v = _ref2[1];
+    return [k, resolveVar(v)];
+  }));
+}
+/**
+ * Chart chrome + series colours, re-read whenever the theme flips (the `dark`
+ * class or `data-theme` on <html>) so axes and series follow dark mode without
+ * a remount.
+ */
+function useChartTheme(categories, colors) {
+  var _useState = React.useState(0),
+    _useState2 = cn._slicedToArray(_useState, 2);
+    _useState2[0];
+    var setVersion = _useState2[1];
+  React.useEffect(function () {
+    if (typeof MutationObserver !== "function") return undefined;
+    var observer = new MutationObserver(function () {
+      return setVersion(function (v) {
+        return v + 1;
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"]
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
+  return {
+    chrome: readChrome(),
+    series: seriesColors(categories, colors)
+  };
+}
+/** `true` while the user asks the OS for reduced motion; follows changes live. */
+function useReducedMotion() {
+  var _useState3 = React.useState(prefersReducedMotion),
+    _useState4 = cn._slicedToArray(_useState3, 2),
+    reduced = _useState4[0],
+    setReduced = _useState4[1];
+  React.useEffect(function () {
+    var _query$addEventListen;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return undefined;
+    var query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    var update = function update() {
+      return setReduced(query.matches);
+    };
+    (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", update);
+    return function () {
+      var _query$removeEventLis;
+      return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", update);
+    };
+  }, []);
+  return reduced;
+}
+var defaultValueFormatter = function defaultValueFormatter(value) {
+  return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
+};
+
+var _excluded$2 = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var ROOTS = {
+  line: recharts.LineChart,
+  bar: recharts.BarChart,
+  area: recharts.AreaChart
+};
+var TITLES = {
+  line: "Line chart",
+  bar: "Bar chart",
+  area: "Area chart"
+};
+var CURVES = {
+  linear: "linear",
+  monotone: "monotone",
+  step: "step",
+  natural: "natural"
+};
+function renderSeries(kind, _ref) {
+  var category = _ref.category,
+    color = _ref.color,
+    curve = _ref.curve,
+    stacked = _ref.stacked,
+    showDots = _ref.showDots,
+    connectNulls = _ref.connectNulls,
+    animate = _ref.animate,
+    horizontal = _ref.horizontal,
+    barRadius = _ref.barRadius;
+  var common = {
+    dataKey: category,
+    name: category,
+    isAnimationActive: animate
+  };
+  if (kind === "bar") {
+    var radius = horizontal ? [0, barRadius, barRadius, 0] : [barRadius, barRadius, 0, 0];
+    return jsxRuntime.jsx(recharts.Bar, cn._objectSpread2(cn._objectSpread2({}, common), {}, {
+      fill: color,
+      stackId: stacked ? "stack" : undefined,
+      radius: stacked ? 0 : radius,
+      maxBarSize: 48
+    }), category);
+  }
+  if (kind === "area") {
+    return jsxRuntime.jsx(recharts.Area, cn._objectSpread2(cn._objectSpread2({}, common), {}, {
+      type: curve,
+      stroke: color,
+      fill: color,
+      fillOpacity: stacked ? 0.4 : 0.15,
+      strokeWidth: 2,
+      stackId: stacked ? "stack" : undefined,
+      dot: showDots ? {
+        r: 3,
+        fill: color,
+        strokeWidth: 0
+      } : false,
+      activeDot: {
+        r: 4,
+        strokeWidth: 0,
+        fill: color
+      },
+      connectNulls: connectNulls
+    }), category);
+  }
+  return jsxRuntime.jsx(recharts.Line, cn._objectSpread2(cn._objectSpread2({}, common), {}, {
+    type: curve,
+    stroke: color,
+    strokeWidth: 2,
+    dot: showDots ? {
+      r: 3,
+      fill: color,
+      strokeWidth: 0
+    } : false,
+    activeDot: {
+      r: 4,
+      strokeWidth: 0,
+      fill: color
+    },
+    connectNulls: connectNulls
+  }), category);
+}
+/** Shared implementation of LineChart / BarChart / AreaChart. */
+var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function CartesianChart(_ref2, ref) {
+  var kind = _ref2.kind,
+    data = _ref2.data,
+    index = _ref2.index,
+    _ref2$categories = _ref2.categories,
+    categories = _ref2$categories === void 0 ? [] : _ref2$categories,
+    colors = _ref2.colors,
+    _ref2$valueFormatter = _ref2.valueFormatter,
+    valueFormatter = _ref2$valueFormatter === void 0 ? defaultValueFormatter : _ref2$valueFormatter,
+    xAxisFormatter = _ref2.xAxisFormatter,
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 300 : _ref2$height,
+    _ref2$showLegend = _ref2.showLegend,
+    showLegend = _ref2$showLegend === void 0 ? true : _ref2$showLegend,
+    _ref2$showTooltip = _ref2.showTooltip,
+    showTooltip = _ref2$showTooltip === void 0 ? true : _ref2$showTooltip,
+    _ref2$showXAxis = _ref2.showXAxis,
+    showXAxis = _ref2$showXAxis === void 0 ? true : _ref2$showXAxis,
+    _ref2$showYAxis = _ref2.showYAxis,
+    showYAxis = _ref2$showYAxis === void 0 ? true : _ref2$showYAxis,
+    _ref2$showGrid = _ref2.showGrid,
+    showGrid = _ref2$showGrid === void 0 ? true : _ref2$showGrid,
+    _ref2$yAxisWidth = _ref2.yAxisWidth,
+    yAxisWidth = _ref2$yAxisWidth === void 0 ? 48 : _ref2$yAxisWidth,
+    _ref2$curveType = _ref2.curveType,
+    curveType = _ref2$curveType === void 0 ? "monotone" : _ref2$curveType,
+    _ref2$stacked = _ref2.stacked,
+    stacked = _ref2$stacked === void 0 ? false : _ref2$stacked,
+    _ref2$horizontal = _ref2.horizontal,
+    horizontal = _ref2$horizontal === void 0 ? false : _ref2$horizontal,
+    _ref2$showDots = _ref2.showDots,
+    showDots = _ref2$showDots === void 0 ? false : _ref2$showDots,
+    _ref2$connectNulls = _ref2.connectNulls,
+    connectNulls = _ref2$connectNulls === void 0 ? false : _ref2$connectNulls,
+    _ref2$animate = _ref2.animate,
+    animate = _ref2$animate === void 0 ? true : _ref2$animate,
+    title = _ref2.title,
+    description = _ref2.description,
+    emptyState = _ref2.emptyState,
+    _ref2$accessibleTable = _ref2.accessibleTable,
+    accessibleTable = _ref2$accessibleTable === void 0 ? true : _ref2$accessibleTable,
+    className = _ref2.className,
+    rest = cn._objectWithoutProperties(_ref2, _excluded$2);
+  var _useChartTheme = useChartTheme(categories, colors),
+    chrome = _useChartTheme.chrome,
+    series = _useChartTheme.series;
+  var reducedMotion = useReducedMotion();
+  var Root = ROOTS[kind];
+  var isHorizontalBars = kind === "bar" && horizontal;
+  var curve = CURVES[curveType] || "monotone";
+  var tick = {
+    fill: chrome.axis,
+    fontSize: 12
+  };
+  var formatIndex = xAxisFormatter || function (v) {
+    return v == null ? "" : String(v);
+  };
+  var categoryAxis = {
+    dataKey: index,
+    tick: tick,
+    tickLine: false,
+    axisLine: false,
+    tickFormatter: xAxisFormatter,
+    hide: !showXAxis,
+    minTickGap: 8
+  };
+  var valueAxis = {
+    tick: tick,
+    tickLine: false,
+    axisLine: false,
+    tickFormatter: valueFormatter,
+    hide: !showYAxis,
+    width: yAxisWidth
+  };
+  return jsxRuntime.jsx(ChartFrame, cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    className: className,
+    title: title,
+    description: description,
+    defaultTitle: TITLES[kind],
+    data: data,
+    height: height,
+    emptyState: emptyState,
+    accessibleTable: accessibleTable,
+    legend: showLegend ? categories.map(function (c, i) {
+      return {
+        name: c,
+        color: series[i]
+      };
+    }) : null,
+    tableColumns: [{
+      key: index,
+      label: index,
+      format: formatIndex
+    }].concat(cn._toConsumableArray(categories.map(function (c) {
+      return {
+        key: c,
+        label: c,
+        format: valueFormatter
+      };
+    })))
+  }, rest), {}, {
+    children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
+      width: "100%",
+      height: "100%",
+      minWidth: 0,
+      children: jsxRuntime.jsxs(Root, {
+        data: data,
+        layout: isHorizontalBars ? "vertical" : "horizontal",
+        margin: {
+          top: 8,
+          right: 8,
+          bottom: 0,
+          left: 0
+        },
+        accessibilityLayer: false,
+        children: [showGrid && jsxRuntime.jsx(recharts.CartesianGrid, {
+          stroke: chrome.grid,
+          strokeDasharray: "3 3",
+          vertical: isHorizontalBars,
+          horizontal: !isHorizontalBars
+        }), isHorizontalBars ? jsxRuntime.jsx(recharts.XAxis, cn._objectSpread2(cn._objectSpread2({
+          type: "number"
+        }, valueAxis), {}, {
+          hide: !showXAxis,
+          width: undefined
+        })) : jsxRuntime.jsx(recharts.XAxis, cn._objectSpread2({}, categoryAxis)), isHorizontalBars ? jsxRuntime.jsx(recharts.YAxis, cn._objectSpread2(cn._objectSpread2({
+          type: "category"
+        }, categoryAxis), {}, {
+          hide: !showYAxis,
+          width: yAxisWidth,
+          interval: 0
+        })) : jsxRuntime.jsx(recharts.YAxis, cn._objectSpread2({}, valueAxis)), showTooltip && jsxRuntime.jsx(recharts.Tooltip, {
+          cursor: kind === "bar" ? {
+            fill: chrome.grid,
+            fillOpacity: 0.4
+          } : {
+            stroke: chrome.grid
+          },
+          isAnimationActive: false,
+          content: jsxRuntime.jsx(ChartTooltipContent, {
+            valueFormatter: valueFormatter
+          })
+        }), categories.map(function (category, i) {
+          return renderSeries(kind, {
+            category: category,
+            color: series[i],
+            curve: curve,
+            stacked: stacked,
+            showDots: showDots,
+            connectNulls: connectNulls,
+            animate: animate && !reducedMotion,
+            horizontal: isHorizontalBars,
+            barRadius: 4
+          });
+        })]
+      })
+    })
+  }));
+});
+
+var LineChart = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  return jsxRuntime.jsx(CartesianChart, cn._objectSpread2(cn._objectSpread2({
+    ref: ref
+  }, props), {}, {
+    kind: "line"
+  }));
+});
+LineChart.displayName = "LineChart";
+
+var BarChart = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  return jsxRuntime.jsx(CartesianChart, cn._objectSpread2(cn._objectSpread2({
+    ref: ref
+  }, props), {}, {
+    kind: "bar"
+  }));
+});
+BarChart.displayName = "BarChart";
+
+var AreaChart = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  return jsxRuntime.jsx(CartesianChart, cn._objectSpread2(cn._objectSpread2({
+    ref: ref
+  }, props), {}, {
+    kind: "area"
+  }));
+});
+AreaChart.displayName = "AreaChart";
+
+var _excluded$1 = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var data = _ref.data,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? "name" : _ref$index,
+    _ref$category = _ref.category,
+    category = _ref$category === void 0 ? "value" : _ref$category,
+    colors = _ref.colors,
+    _ref$valueFormatter = _ref.valueFormatter,
+    valueFormatter = _ref$valueFormatter === void 0 ? defaultValueFormatter : _ref$valueFormatter,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "donut" : _ref$variant,
+    _ref$innerRadius = _ref.innerRadius,
+    innerRadius = _ref$innerRadius === void 0 ? "60%" : _ref$innerRadius,
+    _ref$outerRadius = _ref.outerRadius,
+    outerRadius = _ref$outerRadius === void 0 ? "90%" : _ref$outerRadius,
+    centerLabel = _ref.centerLabel,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 240 : _ref$height,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? true : _ref$animate,
+    title = _ref.title,
+    description = _ref.description,
+    emptyState = _ref.emptyState,
+    _ref$accessibleTable = _ref.accessibleTable,
+    accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
+    className = _ref.className,
+    rest = cn._objectWithoutProperties(_ref, _excluded$1);
+  var rows = Array.isArray(data) ? data : [];
+  var names = rows.map(function (row) {
+    return String(row[index]);
+  });
+  var _useChartTheme = useChartTheme(names, colors),
+    chrome = _useChartTheme.chrome,
+    series = _useChartTheme.series;
+  var reducedMotion = useReducedMotion();
+  var slices = rows.map(function (row, i) {
+    return cn._objectSpread2(cn._objectSpread2({}, row), {}, {
+      fill: series[i]
+    });
+  });
+  var isDonut = variant !== "pie";
+  return jsxRuntime.jsx(ChartFrame, cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    className: className,
+    title: title,
+    description: description,
+    defaultTitle: isDonut ? "Donut chart" : "Pie chart",
+    data: data,
+    height: height,
+    emptyState: emptyState,
+    accessibleTable: accessibleTable,
+    legend: showLegend ? names.map(function (name, i) {
+      return {
+        name: name,
+        color: series[i]
+      };
+    }) : null,
+    tableColumns: [{
+      key: index,
+      label: index,
+      format: function format(v) {
+        return v == null ? "" : String(v);
+      }
+    }, {
+      key: category,
+      label: category,
+      format: valueFormatter
+    }]
+  }, rest), {}, {
+    children: jsxRuntime.jsxs("div", {
+      className: "relative h-full w-full",
+      children: [jsxRuntime.jsx(recharts.ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        children: jsxRuntime.jsxs(recharts.PieChart, {
+          accessibilityLayer: false,
+          children: [showTooltip && jsxRuntime.jsx(recharts.Tooltip, {
+            isAnimationActive: false,
+            content: jsxRuntime.jsx(ChartTooltipContent, {
+              valueFormatter: valueFormatter,
+              hideLabel: true
+            })
+          }), jsxRuntime.jsx(recharts.Pie, {
+            data: slices,
+            dataKey: category,
+            nameKey: index,
+            innerRadius: isDonut ? innerRadius : 0,
+            outerRadius: outerRadius,
+            paddingAngle: isDonut && rows.length > 1 ? 1 : 0,
+            stroke: chrome.surface,
+            strokeWidth: 2,
+            isAnimationActive: animate && !reducedMotion
+          })]
+        })
+      }), isDonut && centerLabel != null && jsxRuntime.jsx("div", {
+        className: "pointer-events-none absolute inset-0 flex items-center justify-center text-center text-sm font-semibold text-gray-900 dark:text-gray-100",
+        "aria-hidden": "true",
+        children: centerLabel
+      })]
+    })
+  }));
+});
+DonutChart.displayName = "DonutChart";
+
+var _excluded = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+/** A word-sized trend line: no axes, grid or legend — just the shape of the data. */
+var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var data = _ref.data,
+    _ref$category = _ref.category,
+    category = _ref$category === void 0 ? "value" : _ref$category,
+    index = _ref.index,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "line" : _ref$type,
+    _ref$valueFormatter = _ref.valueFormatter,
+    valueFormatter = _ref$valueFormatter === void 0 ? defaultValueFormatter : _ref$valueFormatter,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 40 : _ref$height,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? false : _ref$animate,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$emptyState = _ref.emptyState,
+    emptyState = _ref$emptyState === void 0 ? "No data" : _ref$emptyState,
+    _ref$accessibleTable = _ref.accessibleTable,
+    accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
+    className = _ref.className,
+    rest = cn._objectWithoutProperties(_ref, _excluded);
+  var _useChartTheme = useChartTheme([category], [color]),
+    series = _useChartTheme.series;
+  var reducedMotion = useReducedMotion();
+  var stroke = series[0];
+  var Root = type === "area" ? recharts.AreaChart : recharts.LineChart;
+  var common = {
+    dataKey: category,
+    name: category,
+    type: "monotone",
+    stroke: stroke,
+    strokeWidth: 2,
+    dot: false,
+    activeDot: showTooltip ? {
+      r: 3,
+      strokeWidth: 0,
+      fill: stroke
+    } : false,
+    isAnimationActive: animate && !reducedMotion
+  };
+  return jsxRuntime.jsx(ChartFrame, cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    className: className,
+    title: title,
+    description: description,
+    defaultTitle: "Sparkline",
+    data: data,
+    height: height,
+    emptyState: emptyState,
+    accessibleTable: accessibleTable,
+    tableColumns: [].concat(cn._toConsumableArray(index ? [{
+      key: index,
+      label: index,
+      format: function format(v) {
+        return v == null ? "" : String(v);
+      }
+    }] : []), [{
+      key: category,
+      label: category,
+      format: valueFormatter
+    }])
+  }, rest), {}, {
+    children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
+      width: "100%",
+      height: "100%",
+      minWidth: 0,
+      children: jsxRuntime.jsxs(Root, {
+        data: data,
+        margin: {
+          top: 2,
+          right: 2,
+          bottom: 2,
+          left: 2
+        },
+        accessibilityLayer: false,
+        children: [jsxRuntime.jsx(recharts.YAxis, {
+          hide: true,
+          domain: ["dataMin", "dataMax"]
+        }), showTooltip && jsxRuntime.jsx(recharts.Tooltip, {
+          isAnimationActive: false,
+          cursor: false,
+          content: jsxRuntime.jsx(ChartTooltipContent, {
+            valueFormatter: valueFormatter,
+            hideLabel: !index
+          })
+        }), type === "area" ? jsxRuntime.jsx(recharts.Area, cn._objectSpread2(cn._objectSpread2({}, common), {}, {
+          fill: stroke,
+          fillOpacity: 0.15
+        })) : jsxRuntime.jsx(recharts.Line, cn._objectSpread2({}, common))]
+      })
+    })
+  }));
+});
+Sparkline.displayName = "Sparkline";
+
+exports.AreaChart = AreaChart;
+exports.BarChart = BarChart;
+exports.DonutChart = DonutChart;
+exports.LineChart = LineChart;
+exports.Sparkline = Sparkline;