@mijn-ui/react-charts 0.1.0

package/dist/index.js

@@ -0,0 +1,1025 @@
+"use client";
+
+// src/chart-utils.ts
+var HUE_BG_MAP = {
+  brand: "bg-bg-brand",
+  red: "bg-bg-red",
+  orange: "bg-bg-orange",
+  amber: "bg-bg-amber",
+  yellow: "bg-bg-yellow",
+  lime: "bg-bg-lime",
+  green: "bg-bg-green",
+  emerald: "bg-bg-emerald",
+  teal: "bg-bg-teal",
+  cyan: "bg-bg-cyan",
+  sky: "bg-bg-sky",
+  blue: "bg-bg-blue",
+  indigo: "bg-bg-indigo",
+  violet: "bg-bg-violet",
+  purple: "bg-bg-purple",
+  fuchsia: "bg-bg-fuchsia",
+  pink: "bg-bg-pink",
+  rose: "bg-bg-rose",
+  gray: "bg-bg-gray"
+};
+var HUE_BG_SUBTLE_MAP = {
+  brand: "bg-bg-brand-subtle",
+  red: "bg-bg-red-subtle",
+  orange: "bg-bg-orange-subtle",
+  amber: "bg-bg-amber-subtle",
+  yellow: "bg-bg-yellow-subtle",
+  lime: "bg-bg-lime-subtle",
+  green: "bg-bg-green-subtle",
+  emerald: "bg-bg-emerald-subtle",
+  teal: "bg-bg-teal-subtle",
+  cyan: "bg-bg-cyan-subtle",
+  sky: "bg-bg-sky-subtle",
+  blue: "bg-bg-blue-subtle",
+  indigo: "bg-bg-indigo-subtle",
+  violet: "bg-bg-violet-subtle",
+  purple: "bg-bg-purple-subtle",
+  fuchsia: "bg-bg-fuchsia-subtle",
+  pink: "bg-bg-pink-subtle",
+  rose: "bg-bg-rose-subtle",
+  gray: "bg-bg-gray-subtle"
+};
+var HUE_STROKE_MAP = {
+  brand: "stroke-fg-brand",
+  red: "stroke-fg-red",
+  orange: "stroke-fg-orange",
+  amber: "stroke-fg-amber",
+  yellow: "stroke-fg-yellow",
+  lime: "stroke-fg-lime",
+  green: "stroke-fg-green",
+  emerald: "stroke-fg-emerald",
+  teal: "stroke-fg-teal",
+  cyan: "stroke-fg-cyan",
+  sky: "stroke-fg-sky",
+  blue: "stroke-fg-blue",
+  indigo: "stroke-fg-indigo",
+  violet: "stroke-fg-violet",
+  purple: "stroke-fg-purple",
+  fuchsia: "stroke-fg-fuchsia",
+  pink: "stroke-fg-pink",
+  rose: "stroke-fg-rose",
+  gray: "stroke-fg-gray"
+};
+var HUE_TEXT_MAP = {
+  brand: "text-fg-brand",
+  red: "text-fg-red",
+  orange: "text-fg-orange",
+  amber: "text-fg-amber",
+  yellow: "text-fg-yellow",
+  lime: "text-fg-lime",
+  green: "text-fg-green",
+  emerald: "text-fg-emerald",
+  teal: "text-fg-teal",
+  cyan: "text-fg-cyan",
+  sky: "text-fg-sky",
+  blue: "text-fg-blue",
+  indigo: "text-fg-indigo",
+  violet: "text-fg-violet",
+  purple: "text-fg-purple",
+  fuchsia: "text-fg-fuchsia",
+  pink: "text-fg-pink",
+  rose: "text-fg-rose",
+  gray: "text-fg-gray"
+};
+var HUE_ON_BG_FILL_MAP = {
+  brand: "fill-on-bg-brand",
+  red: "fill-on-bg-red",
+  orange: "fill-on-bg-orange",
+  amber: "fill-on-bg-amber",
+  yellow: "fill-on-bg-yellow",
+  lime: "fill-on-bg-lime",
+  green: "fill-on-bg-green",
+  emerald: "fill-on-bg-emerald",
+  teal: "fill-on-bg-teal",
+  cyan: "fill-on-bg-cyan",
+  sky: "fill-on-bg-sky",
+  blue: "fill-on-bg-blue",
+  indigo: "fill-on-bg-indigo",
+  violet: "fill-on-bg-violet",
+  purple: "fill-on-bg-purple",
+  fuchsia: "fill-on-bg-fuchsia",
+  pink: "fill-on-bg-pink",
+  rose: "fill-on-bg-rose",
+  gray: "fill-on-bg-gray"
+};
+var DEFAULT_PALETTE = [
+  "blue",
+  "emerald",
+  "amber",
+  "violet",
+  "rose",
+  "cyan",
+  "orange",
+  "teal",
+  "pink",
+  "lime",
+  "indigo",
+  "gray"
+];
+
+// src/chart-tooltip.tsx
+import {
+  cn,
+  createTVUnstyledSlots
+} from "@mijn-ui/react-core";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var chartTooltipStyles = tv({
+  slots: {
+    base: "bg-bg-default border-outline-secondary pointer-events-none absolute z-10 rounded-md border px-2 py-1 text-xs whitespace-nowrap shadow-md",
+    title: "text-fg-secondary font-medium",
+    row: "flex items-center gap-1.5",
+    swatch: "rounded-2xs size-2 shrink-0",
+    label: "text-fg-secondary",
+    value: "text-fg-default ml-auto pl-2 font-medium"
+  }
+});
+var ChartTooltip = ({
+  className,
+  classNames,
+  unstyled,
+  heading,
+  items,
+  children,
+  ref,
+  ...props
+}) => {
+  const { base, title, row, swatch, label, value } = createTVUnstyledSlots(
+    chartTooltipStyles(),
+    unstyled
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      ref,
+      role: "presentation",
+      className: base({ className: cn(classNames?.base, className) }),
+      ...props,
+      children: [
+        heading !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "chart-tooltip-title",
+            className: title({ className: classNames?.title }),
+            children: heading
+          }
+        ),
+        items?.map((item, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "chart-tooltip-row",
+            className: row({ className: classNames?.row }),
+            children: [
+              item.color && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "chart-tooltip-swatch",
+                  "aria-hidden": true,
+                  className: swatch({
+                    className: cn(
+                      !unstyled && HUE_BG_MAP[item.color],
+                      classNames?.swatch
+                    )
+                  })
+                }
+              ),
+              item.label !== void 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "chart-tooltip-label",
+                  className: label({ className: classNames?.label }),
+                  children: item.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "chart-tooltip-value",
+                  className: value({ className: classNames?.value }),
+                  children: item.value
+                }
+              )
+            ]
+          },
+          index
+        )),
+        children
+      ]
+    }
+  );
+};
+
+// src/chart-legend.tsx
+import {
+  cn as cn2,
+  createTVUnstyledSlots as createTVUnstyledSlots2
+} from "@mijn-ui/react-core";
+import { tv as tv2 } from "tailwind-variants";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var chartLegendStyles = tv2({
+  slots: {
+    base: "flex gap-x-4 gap-y-1 text-xs",
+    item: "flex min-w-0 items-center gap-1.5",
+    swatch: "rounded-2xs size-2.5 shrink-0",
+    label: "text-fg-secondary truncate",
+    value: "text-fg-default font-medium"
+  },
+  variants: {
+    orientation: {
+      horizontal: { base: "flex-row flex-wrap items-center" },
+      vertical: { base: "flex-col items-start" }
+    },
+    clickable: {
+      true: { item: "cursor-pointer select-none transition-opacity hover:opacity-75" }
+    },
+    hidden: {
+      true: { item: "opacity-45", label: "line-through" }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var ChartLegendItem = ({
+  className,
+  classNames,
+  unstyled,
+  label: labelText,
+  color,
+  value: valueText,
+  hidden = false,
+  onToggle,
+  ref,
+  ...props
+}) => {
+  const { item, swatch, label, value } = createTVUnstyledSlots2(
+    chartLegendStyles(),
+    unstyled
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-slot": "chart-legend-item",
+      ref,
+      ...onToggle && {
+        role: "button",
+        tabIndex: 0,
+        "aria-pressed": !hidden,
+        onClick: onToggle,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onToggle();
+          }
+        }
+      },
+      className: cn2(
+        item({ clickable: !!onToggle, hidden }),
+        classNames?.item,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "data-slot": "chart-legend-swatch",
+            "aria-hidden": true,
+            className: swatch({
+              className: cn2(!unstyled && HUE_BG_MAP[color], classNames?.swatch)
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "data-slot": "chart-legend-label",
+            className: cn2(label({ hidden }), classNames?.label),
+            children: labelText
+          }
+        ),
+        valueText !== void 0 && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "data-slot": "chart-legend-value",
+            className: value({ className: classNames?.value }),
+            children: valueText
+          }
+        )
+      ]
+    }
+  );
+};
+var ChartLegend = ({
+  className,
+  classNames,
+  unstyled,
+  items,
+  orientation,
+  onItemToggle,
+  ref,
+  ...props
+}) => {
+  const { base } = createTVUnstyledSlots2(
+    chartLegendStyles({ orientation }),
+    unstyled
+  );
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "chart-legend",
+      ref,
+      className: base({ className: cn2(classNames?.base, className) }),
+      ...props,
+      children: items.map((item, index) => /* @__PURE__ */ jsx2(
+        ChartLegendItem,
+        {
+          unstyled,
+          classNames,
+          onToggle: onItemToggle ? () => onItemToggle(index, item) : void 0,
+          ...item
+        },
+        index
+      ))
+    }
+  );
+};
+
+// src/bar-chart.tsx
+import {
+  cn as cn3,
+  createTVUnstyledSlots as createTVUnstyledSlots3,
+  useControlledState
+} from "@mijn-ui/react-core";
+import { tv as tv3 } from "tailwind-variants";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var barChartStyles = tv3({
+  slots: {
+    base: "flex w-full flex-col gap-2",
+    plot: "flex w-full items-end gap-2",
+    barGroup: "relative flex h-full min-w-0 flex-1 items-end justify-center",
+    bar: "rounded-t-xs relative w-full max-w-10 transition-opacity duration-200",
+    valueLabel: "text-fg-secondary pointer-events-none absolute -top-4 left-1/2 -translate-x-1/2 text-[10px] font-medium whitespace-nowrap",
+    labelGroup: "flex w-full gap-2",
+    label: "text-fg-tertiary min-w-0 flex-1 truncate text-center text-xs"
+  },
+  variants: {
+    size: {
+      sm: { plot: "h-[140px]" },
+      default: { plot: "h-[200px]" },
+      lg: { plot: "h-[260px]" }
+    },
+    dimmed: {
+      true: { bar: "opacity-40" }
+    },
+    clickable: {
+      true: { barGroup: "cursor-pointer" }
+    },
+    // Headroom so labels above full-height bars stay inside the plot.
+    withValues: {
+      true: { plot: "pt-4" }
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var BarChart = ({
+  className,
+  classNames,
+  unstyled,
+  data,
+  valueFormatter = (value) => String(value),
+  emphasizeLast = false,
+  color = "brand",
+  colors,
+  size,
+  showValues = false,
+  showTooltip = true,
+  activeIndex: activeIndexProp,
+  onActiveIndexChange,
+  onValueClick,
+  ref,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = useControlledState(
+    activeIndexProp,
+    null,
+    onActiveIndexChange
+  );
+  const { base, plot, barGroup, bar, valueLabel, labelGroup, label } = createTVUnstyledSlots3(barChartStyles({ size }), unstyled);
+  const max = Math.max(...data.map((datum) => datum.value), 0);
+  const hueAt = (index) => data[index]?.color ?? (colors && colors.length > 0 ? colors[index % colors.length] : color);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-slot": "chart-bar",
+      ref,
+      role: "img",
+      "aria-label": `Bar chart with ${data.length} bars`,
+      className: base({ className: cn3(classNames?.base, className) }),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-slot": "chart-bar-plot",
+            className: cn3(plot({ withValues: showValues }), classNames?.plot),
+            onMouseLeave: () => setActiveIndex(null),
+            children: data.map((datum, index) => {
+              const height = max > 0 ? Math.max(datum.value, 0) / max * 100 : 0;
+              const subtle = emphasizeLast && index !== data.length - 1;
+              return /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  "data-slot": "chart-bar-group",
+                  title: showTooltip ? void 0 : `${datum.label}: ${valueFormatter(datum.value)}`,
+                  className: cn3(
+                    barGroup({ clickable: !!onValueClick }),
+                    classNames?.barGroup
+                  ),
+                  onMouseEnter: () => setActiveIndex(index),
+                  onClick: onValueClick ? () => onValueClick(index) : void 0,
+                  children: [
+                    showTooltip && activeIndex === index && /* @__PURE__ */ jsx3(
+                      ChartTooltip,
+                      {
+                        unstyled,
+                        heading: datum.label,
+                        items: [{ value: valueFormatter(datum.value), color: hueAt(index) }],
+                        className: "bottom-full left-1/2 mb-1 -translate-x-1/2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        "data-slot": "chart-bar-fill",
+                        className: cn3(
+                          bar({
+                            dimmed: activeIndex !== null && activeIndex !== index
+                          }),
+                          !unstyled && (subtle ? HUE_BG_SUBTLE_MAP[hueAt(index)] : HUE_BG_MAP[hueAt(index)]),
+                          classNames?.bar
+                        ),
+                        style: { height: `${height}%` },
+                        children: showValues && /* @__PURE__ */ jsx3(
+                          "span",
+                          {
+                            "data-slot": "chart-bar-value",
+                            className: valueLabel({
+                              className: classNames?.valueLabel
+                            }),
+                            children: valueFormatter(datum.value)
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                index
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-slot": "chart-bar-label-group",
+            className: labelGroup({ className: classNames?.labelGroup }),
+            children: data.map((datum, index) => /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-slot": "chart-bar-label",
+                className: label({ className: classNames?.label }),
+                children: datum.label
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/grouped-bar-chart.tsx
+import {
+  cn as cn4,
+  createTVUnstyledSlots as createTVUnstyledSlots4,
+  useControlledState as useControlledState2
+} from "@mijn-ui/react-core";
+import { tv as tv4 } from "tailwind-variants";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var groupedBarChartStyles = tv4({
+  slots: {
+    base: "flex w-full flex-col gap-3",
+    legend: "",
+    plot: "flex w-full items-end gap-2",
+    barGroup: "relative flex h-full min-w-0 flex-1 items-end justify-center gap-0.5",
+    bar: "rounded-t-xs relative w-full max-w-4 transition-opacity duration-200",
+    valueLabel: "text-fg-secondary pointer-events-none absolute -top-3.5 left-1/2 -translate-x-1/2 text-[9px] font-medium whitespace-nowrap",
+    labelGroup: "flex w-full gap-2",
+    label: "text-fg-tertiary min-w-0 flex-1 truncate text-center text-xs"
+  },
+  variants: {
+    size: {
+      sm: { plot: "h-[140px]" },
+      default: { plot: "h-[200px]" },
+      lg: { plot: "h-[260px]" }
+    },
+    dimmed: {
+      true: { bar: "opacity-40" }
+    },
+    clickable: {
+      true: { barGroup: "cursor-pointer" }
+    },
+    // Headroom so labels above full-height bars stay inside the plot.
+    withValues: {
+      true: { plot: "pt-3.5" }
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var GroupedBarChart = ({
+  className,
+  classNames,
+  unstyled,
+  data,
+  series,
+  colors = DEFAULT_PALETTE,
+  valueFormatter = (value) => String(value),
+  size,
+  showValues = false,
+  showTooltip = true,
+  toggleable = false,
+  hiddenSeries: hiddenSeriesProp,
+  onHiddenSeriesChange,
+  activeIndex: activeIndexProp,
+  onActiveIndexChange,
+  onValueClick,
+  ref,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = useControlledState2(
+    activeIndexProp,
+    null,
+    onActiveIndexChange
+  );
+  const [hiddenSeries, setHiddenSeries] = useControlledState2(
+    hiddenSeriesProp,
+    [],
+    onHiddenSeriesChange
+  );
+  const { base, legend, plot, barGroup, bar, valueLabel, labelGroup, label } = createTVUnstyledSlots4(groupedBarChartStyles({ size }), unstyled);
+  const isHidden = (name) => hiddenSeries.includes(name);
+  const toggleSeries = (name) => setHiddenSeries(
+    isHidden(name) ? hiddenSeries.filter((hidden) => hidden !== name) : [...hiddenSeries, name]
+  );
+  const max = Math.max(
+    ...data.flatMap(
+      (datum) => datum.values.filter((_, seriesIndex) => !isHidden(series[seriesIndex] ?? ""))
+    ),
+    0
+  );
+  const hueAt = (seriesIndex) => colors[seriesIndex % colors.length] || "gray";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-slot": "chart-grouped-bar",
+      ref,
+      role: "img",
+      "aria-label": `Grouped bar chart with ${series.length} series`,
+      className: base({ className: cn4(classNames?.base, className) }),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(
+          ChartLegend,
+          {
+            unstyled,
+            items: series.map((name, seriesIndex) => ({
+              label: name,
+              color: hueAt(seriesIndex),
+              hidden: isHidden(name)
+            })),
+            onItemToggle: toggleable ? (_, item) => toggleSeries(item.label) : void 0,
+            className: legend({ className: classNames?.legend })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-slot": "chart-grouped-bar-plot",
+            className: cn4(plot({ withValues: showValues }), classNames?.plot),
+            onMouseLeave: () => setActiveIndex(null),
+            children: data.map((datum, index) => /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                "data-slot": "chart-grouped-bar-group",
+                className: cn4(
+                  barGroup({ clickable: !!onValueClick }),
+                  classNames?.barGroup
+                ),
+                onMouseEnter: () => setActiveIndex(index),
+                onClick: onValueClick ? () => onValueClick(index) : void 0,
+                children: [
+                  showTooltip && activeIndex === index && /* @__PURE__ */ jsx4(
+                    ChartTooltip,
+                    {
+                      unstyled,
+                      heading: datum.label,
+                      items: datum.values.flatMap(
+                        (value, seriesIndex) => isHidden(series[seriesIndex] ?? "") ? [] : [
+                          {
+                            label: series[seriesIndex] ?? "",
+                            value: valueFormatter(value),
+                            color: hueAt(seriesIndex)
+                          }
+                        ]
+                      ),
+                      className: "bottom-full left-1/2 mb-1 -translate-x-1/2"
+                    }
+                  ),
+                  datum.values.map((value, seriesIndex) => {
+                    if (isHidden(series[seriesIndex] ?? "")) return null;
+                    const height = max > 0 ? Math.max(value, 0) / max * 100 : 0;
+                    return /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        "data-slot": "chart-grouped-bar-fill",
+                        title: showTooltip ? void 0 : `${datum.label} \xB7 ${series[seriesIndex] ?? ""}: ${valueFormatter(value)}`,
+                        className: cn4(
+                          bar({
+                            dimmed: activeIndex !== null && activeIndex !== index
+                          }),
+                          !unstyled && HUE_BG_MAP[hueAt(seriesIndex)],
+                          classNames?.bar
+                        ),
+                        style: { height: `${height}%` },
+                        children: showValues && /* @__PURE__ */ jsx4(
+                          "span",
+                          {
+                            "data-slot": "chart-grouped-bar-value",
+                            className: valueLabel({
+                              className: classNames?.valueLabel
+                            }),
+                            children: valueFormatter(value)
+                          }
+                        )
+                      },
+                      seriesIndex
+                    );
+                  })
+                ]
+              },
+              index
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-slot": "chart-grouped-bar-label-group",
+            className: labelGroup({ className: classNames?.labelGroup }),
+            children: data.map((datum, index) => /* @__PURE__ */ jsx4(
+              "div",
+              {
+                "data-slot": "chart-grouped-bar-label",
+                className: label({ className: classNames?.label }),
+                children: datum.label
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/donut-chart.tsx
+import * as React from "react";
+import {
+  cn as cn5,
+  createTVUnstyledSlots as createTVUnstyledSlots5
+} from "@mijn-ui/react-core";
+import { tv as tv5 } from "tailwind-variants";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var donutChartStyles = tv5({
+  slots: {
+    base: "relative inline-flex items-center justify-center",
+    svg: "-rotate-90",
+    slice: "fill-none transition-opacity duration-200",
+    sliceLabel: "pointer-events-none select-none text-[2.6px] font-semibold"
+  },
+  variants: {
+    size: {
+      sm: { svg: "size-[120px]" },
+      default: { svg: "size-[148px]" },
+      lg: { svg: "size-[180px]" }
+    },
+    thickness: {
+      thin: { slice: "[stroke-width:3]" },
+      default: { slice: "[stroke-width:5]" },
+      thick: { slice: "[stroke-width:8]" }
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    thickness: "default"
+  }
+});
+var RADIUS = 100 / (2 * Math.PI);
+var CENTER = 20;
+var SLICE_GAP = 0.5;
+var MIN_LABELED_PERCENT = 6;
+var DonutChart = ({
+  className,
+  classNames,
+  unstyled,
+  data,
+  valueFormatter = (value) => String(value),
+  size,
+  thickness,
+  showPercentages = false,
+  showTooltip = true,
+  ref,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const { base, svg, slice, sliceLabel } = createTVUnstyledSlots5(
+    donutChartStyles({ size, thickness }),
+    unstyled
+  );
+  const total = data.reduce((sum, datum) => sum + Math.max(datum.value, 0), 0);
+  const gap = data.length > 1 ? SLICE_GAP : 0;
+  let offset = 0;
+  let tooltip = null;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-slot": "chart-donut",
+      ref,
+      className: base({ className: cn5(classNames?.base, className) }),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "svg",
+          {
+            "data-slot": "chart-donut-svg",
+            role: "img",
+            "aria-label": `Donut chart with ${data.length} slices`,
+            viewBox: "0 0 40 40",
+            className: svg({ className: classNames?.svg }),
+            onMouseLeave: () => setActiveIndex(null),
+            children: data.map((datum, index) => {
+              const percent = total > 0 ? Math.max(datum.value, 0) / total * 100 : 0;
+              const length = Math.max(percent - gap, 0);
+              const startOffset = offset;
+              const hue = datum.color ?? DEFAULT_PALETTE[index % DEFAULT_PALETTE.length];
+              const midAngle = (startOffset + percent / 2) / 100 * 2 * Math.PI;
+              const labelX = CENTER + RADIUS * Math.cos(midAngle);
+              const labelY = CENTER + RADIUS * Math.sin(midAngle);
+              offset += percent;
+              if (showTooltip && activeIndex === index) {
+                const visualX = CENTER + RADIUS * Math.cos(midAngle - Math.PI / 2);
+                const visualY = CENTER + RADIUS * Math.sin(midAngle - Math.PI / 2);
+                tooltip = /* @__PURE__ */ jsx5(
+                  ChartTooltip,
+                  {
+                    unstyled,
+                    heading: datum.label,
+                    items: [
+                      {
+                        value: `${valueFormatter(datum.value)} \xB7 ${Math.round(percent)}%`,
+                        color: hue
+                      }
+                    ],
+                    className: "-translate-x-1/2 -translate-y-[130%]",
+                    style: {
+                      left: `${visualX / 40 * 100}%`,
+                      top: `${visualY / 40 * 100}%`
+                    }
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsxs5(React.Fragment, { children: [
+                /* @__PURE__ */ jsx5(
+                  "circle",
+                  {
+                    "data-slot": "chart-donut-slice",
+                    cx: CENTER,
+                    cy: CENTER,
+                    r: RADIUS,
+                    strokeDasharray: `${length} ${100 - length}`,
+                    strokeDashoffset: -(startOffset + gap / 2),
+                    onMouseEnter: () => setActiveIndex(index),
+                    className: cn5(
+                      slice({
+                        className: cn5(
+                          !unstyled && HUE_STROKE_MAP[hue],
+                          classNames?.slice
+                        )
+                      }),
+                      activeIndex !== null && activeIndex !== index && "opacity-40"
+                    ),
+                    children: /* @__PURE__ */ jsx5("title", { children: `${datum.label}: ${valueFormatter(datum.value)} (${Math.round(percent)}%)` })
+                  }
+                ),
+                showPercentages && percent >= MIN_LABELED_PERCENT && /* @__PURE__ */ jsx5(
+                  "text",
+                  {
+                    "data-slot": "chart-donut-slice-label",
+                    x: labelX,
+                    y: labelY,
+                    textAnchor: "middle",
+                    dominantBaseline: "central",
+                    transform: `rotate(90 ${labelX} ${labelY})`,
+                    className: sliceLabel({
+                      className: cn5(
+                        !unstyled && HUE_ON_BG_FILL_MAP[hue],
+                        classNames?.sliceLabel
+                      )
+                    }),
+                    "aria-hidden": true,
+                    children: `${Math.round(percent)}%`
+                  }
+                )
+              ] }, index);
+            })
+          }
+        ),
+        tooltip
+      ]
+    }
+  );
+};
+
+// src/sparkline.tsx
+import * as React2 from "react";
+import {
+  cn as cn6,
+  createTVUnstyledSlots as createTVUnstyledSlots6
+} from "@mijn-ui/react-core";
+import { tv as tv6 } from "tailwind-variants";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var sparklineStyles = tv6({
+  slots: {
+    wrapper: "relative inline-flex shrink-0",
+    base: "shrink-0",
+    line: "stroke-2",
+    area: "stroke-none",
+    marker: "fill-current stroke-none"
+  }
+});
+var PADDING = 2;
+var Sparkline = ({
+  className,
+  classNames,
+  unstyled,
+  data,
+  color = "brand",
+  showArea = false,
+  labels,
+  valueFormatter = (value) => String(value),
+  showTooltip = true,
+  width = 120,
+  height = 32,
+  ref,
+  ...props
+}) => {
+  const gradientId = React2.useId();
+  const [hoveredIndex, setHoveredIndex] = React2.useState(null);
+  const { wrapper, base, line, area, marker } = createTVUnstyledSlots6(
+    sparklineStyles(),
+    unstyled
+  );
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min;
+  const coords = data.map((value, index) => {
+    const x = data.length > 1 ? PADDING + index / (data.length - 1) * (width - PADDING * 2) : width / 2;
+    const y = range > 0 ? height - PADDING - (value - min) / range * (height - PADDING * 2) : height / 2;
+    return { x: Math.round(x * 100) / 100, y: Math.round(y * 100) / 100 };
+  });
+  const linePath = coords.map((point, index) => `${index === 0 ? "M" : "L"}${point.x},${point.y}`).join(" ");
+  const areaPath = coords.length > 0 ? `${linePath} L${width - PADDING},${height} L${PADDING},${height} Z` : "";
+  const indexAt = (event) => {
+    if (data.length === 0) return null;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const ratio = (x - PADDING) / Math.max(width - PADDING * 2, 1);
+    return Math.min(
+      data.length - 1,
+      Math.max(0, Math.round(ratio * (data.length - 1)))
+    );
+  };
+  const hovered = showTooltip && hoveredIndex !== null && coords[hoveredIndex] ? { index: hoveredIndex, ...coords[hoveredIndex] } : null;
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      "data-slot": "chart-sparkline-wrapper",
+      className: wrapper({ className: classNames?.wrapper }),
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "svg",
+          {
+            "data-slot": "chart-sparkline",
+            ref,
+            role: "img",
+            "aria-label": `Sparkline with ${data.length} points`,
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            onMouseMove: showTooltip ? (event) => setHoveredIndex(indexAt(event)) : void 0,
+            onMouseLeave: showTooltip ? () => setHoveredIndex(null) : void 0,
+            className: base({
+              className: cn6(
+                !unstyled && HUE_TEXT_MAP[color],
+                classNames?.base,
+                className
+              )
+            }),
+            ...props,
+            children: [
+              showArea && coords.length > 0 && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsxs6("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx6("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 0.25 }),
+                  /* @__PURE__ */ jsx6("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: 0 })
+                ] }) }),
+                /* @__PURE__ */ jsx6(
+                  "path",
+                  {
+                    "data-slot": "chart-sparkline-area",
+                    d: areaPath,
+                    fill: `url(#${gradientId})`,
+                    className: area({ className: classNames?.area })
+                  }
+                )
+              ] }),
+              coords.length > 0 && /* @__PURE__ */ jsx6(
+                "path",
+                {
+                  "data-slot": "chart-sparkline-line",
+                  d: linePath,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: line({ className: classNames?.line })
+                }
+              ),
+              hovered && /* @__PURE__ */ jsx6(
+                "circle",
+                {
+                  "data-slot": "chart-sparkline-marker",
+                  cx: hovered.x,
+                  cy: hovered.y,
+                  r: 2.5,
+                  className: marker({ className: classNames?.marker })
+                }
+              )
+            ]
+          }
+        ),
+        hovered && /* @__PURE__ */ jsx6(
+          ChartTooltip,
+          {
+            unstyled,
+            heading: labels?.[hovered.index] ?? `#${hovered.index + 1}`,
+            items: [{ value: valueFormatter(data[hovered.index] ?? 0), color }],
+            className: "-translate-x-1/2 -translate-y-[130%]",
+            style: { left: hovered.x, top: hovered.y }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  BarChart,
+  ChartLegend,
+  ChartLegendItem,
+  ChartTooltip,
+  DEFAULT_PALETTE,
+  DonutChart,
+  GroupedBarChart,
+  HUE_BG_MAP,
+  HUE_BG_SUBTLE_MAP,
+  HUE_ON_BG_FILL_MAP,
+  HUE_STROKE_MAP,
+  HUE_TEXT_MAP,
+  Sparkline,
+  barChartStyles,
+  chartLegendStyles,
+  chartTooltipStyles,
+  donutChartStyles,
+  groupedBarChartStyles,
+  sparklineStyles
+};