@enact-ui/charts 1.0.0

package/dist/components/progress-circles.story.d.ts

@@ -0,0 +1,39 @@
+import type { FC } from "react";
+declare const _default: {
+    title: string;
+    decorators: ((Story: FC) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const ProgressCircleXs: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ProgressCircleSm: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ProgressCircleMd: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ProgressCircleLg: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ProgressCircleXsOnlyTitle: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ProgressCircleSmOnlyTitle: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ProgressCircleMdOnlyTitle: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const ProgressCircleLgOnlyTitle: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+//# sourceMappingURL=progress-circles.story.d.ts.map

package/dist/components/progress-circles.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circles.story.d.ts","sourceRoot":"","sources":["../../src/components/progress-circles.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;;;yBAMhB,EAAE;;AAHlB,wBAWE;AAEF,eAAO,MAAM,gBAAgB;;;CAAgF,CAAC;AAE9G,eAAO,MAAM,gBAAgB;;;CAAsE,CAAC;AAEpG,eAAO,MAAM,gBAAgB;;;CAAgF,CAAC;AAE9G,eAAO,MAAM,gBAAgB;;;CAAgF,CAAC;AAG9G,eAAO,MAAM,yBAAyB;;;CAAwD,CAAC;AAE/F,eAAO,MAAM,yBAAyB;;;CAAwD,CAAC;AAE/F,eAAO,MAAM,yBAAyB;;;CAAwD,CAAC;AAE/F,eAAO,MAAM,yBAAyB;;;CAAwD,CAAC"}

package/dist/components/progress-circles.story.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Charts from "./progress-circles.demo";
+export default {
+    title: "Application/Charts",
+    decorators: [
+        (Story) => (_jsx("div", { className: "bg-base flex min-h-screen items-center justify-center py-8", children: _jsx("div", { className: "flex w-full items-center justify-center", children: _jsx(Story, {}) }) })),
+    ],
+};
+export const ProgressCircleXs = () => _jsx(Charts.ProgressCircle, { size: "xs", title: "40%", subtitle: "Active users" });
+ProgressCircleXs.storyName = "Progress circle xs";
+export const ProgressCircleSm = () => _jsx(Charts.ProgressCircle, { title: "40%", subtitle: "Active users" });
+ProgressCircleSm.storyName = "Progress circle sm";
+export const ProgressCircleMd = () => _jsx(Charts.ProgressCircle, { size: "md", title: "40%", subtitle: "Active users" });
+ProgressCircleMd.storyName = "Progress circle md";
+export const ProgressCircleLg = () => _jsx(Charts.ProgressCircle, { size: "lg", title: "40%", subtitle: "Active users" });
+ProgressCircleLg.storyName = "Progress circle lg";
+export const ProgressCircleXsOnlyTitle = () => _jsx(Charts.ProgressCircle, { size: "xs", title: "40%" });
+ProgressCircleXsOnlyTitle.storyName = "Progress circle xs only title";
+export const ProgressCircleSmOnlyTitle = () => _jsx(Charts.ProgressCircle, { size: "sm", title: "40%" });
+ProgressCircleSmOnlyTitle.storyName = "Progress circle sm only title";
+export const ProgressCircleMdOnlyTitle = () => _jsx(Charts.ProgressCircle, { size: "md", title: "40%" });
+ProgressCircleMdOnlyTitle.storyName = "Progress circle md only title";
+export const ProgressCircleLgOnlyTitle = () => _jsx(Charts.ProgressCircle, { size: "lg", title: "40%" });
+ProgressCircleLgOnlyTitle.storyName = "Progress circle lg only title";
+//# sourceMappingURL=progress-circles.story.js.map

package/dist/components/progress-circles.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circles.story.js","sourceRoot":"","sources":["../../src/components/progress-circles.story.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACX,KAAK,EAAE,oBAAoB;IAC3B,UAAU,EAAE;QACR,CAAC,KAAS,EAAE,EAAE,CAAC,CACX,cAAK,SAAS,EAAC,4DAA4D,YACvE,cAAK,SAAS,EAAC,yCAAyC,YACpD,KAAC,KAAK,KAAG,GACP,GACJ,CACT;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC,cAAc,GAAG,CAAC;AAC9G,gBAAgB,CAAC,SAAS,GAAG,oBAAoB,CAAC;AAClD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC,cAAc,GAAG,CAAC;AACpG,gBAAgB,CAAC,SAAS,GAAG,oBAAoB,CAAC;AAClD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC,cAAc,GAAG,CAAC;AAC9G,gBAAgB,CAAC,SAAS,GAAG,oBAAoB,CAAC;AAClD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,EAAC,cAAc,GAAG,CAAC;AAC9G,gBAAgB,CAAC,SAAS,GAAG,oBAAoB,CAAC;AAElD,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,GAAG,CAAC;AAC/F,yBAAyB,CAAC,SAAS,GAAG,+BAA+B,CAAC;AACtE,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,GAAG,CAAC;AAC/F,yBAAyB,CAAC,SAAS,GAAG,+BAA+B,CAAC;AACtE,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,GAAG,CAAC;AAC/F,yBAAyB,CAAC,SAAS,GAAG,+BAA+B,CAAC;AACtE,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,cAAc,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,GAAG,CAAC;AAC/F,yBAAyB,CAAC,SAAS,GAAG,+BAA+B,CAAC"}

package/dist/components/radar-charts.demo.d.ts

@@ -0,0 +1,14 @@
+interface CustomRadarChartTickProps {
+    payload: {
+        value: string;
+    };
+    x: number;
+    y: number;
+    textAnchor: string;
+    stroke: string;
+    radius: number;
+}
+export declare const CustomRadarChartTick: ({ payload, x, y, textAnchor, stroke, radius }: CustomRadarChartTickProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadarChart: () => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=radar-charts.demo.d.ts.map

package/dist/components/radar-charts.demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar-charts.demo.d.ts","sourceRoot":"","sources":["../../src/components/radar-charts.demo.tsx"],"names":[],"mappings":"AAQA,UAAU,yBAAyB;IAC/B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,GAAI,+CAA+C,yBAAyB,4CAoC5G,CAAC;AAiDF,eAAO,MAAM,UAAU,+CAsGtB,CAAC"}

package/dist/components/radar-charts.demo.js

@@ -0,0 +1,94 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "@enact-ui/react";
+import { Fragment, useEffect, useRef } from "react";
+import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RechartsRadarChart, ResponsiveContainer, Tooltip } from "recharts";
+import { ChartLegendContent, ChartTooltipContent } from "./charts-base";
+export const CustomRadarChartTick = ({ payload, x, y, textAnchor, stroke, radius }) => {
+    const textRef = useRef(null);
+    const rectRef = useRef(null);
+    useEffect(() => {
+        if (textRef.current && rectRef.current) {
+            const textBoundingBox = textRef.current.getBBox();
+            const EXTRA_WIDTH = 16;
+            const EXTRA_HEIGHT = 8;
+            rectRef.current.setAttribute("width", (textBoundingBox.width + EXTRA_WIDTH).toString());
+            rectRef.current.setAttribute("height", (textBoundingBox.height + EXTRA_HEIGHT).toString());
+            rectRef.current.setAttribute("x", (textBoundingBox.x - EXTRA_WIDTH / 2).toString());
+            rectRef.current.setAttribute("y", (textBoundingBox.y - EXTRA_HEIGHT / 2).toString());
+        }
+    }, []);
+    return (_jsxs(Fragment, { children: [_jsx("rect", { ref: rectRef, x: x, y: y, rx: 11, className: "fill-gray-light stroke-gray-light stroke-1" }), _jsx("text", { ref: textRef, x: x, y: y + 5, radius: radius, stroke: stroke, textAnchor: textAnchor, className: "recharts-text recharts-polar-angle-axis-tick-value", children: _jsx("tspan", { x: x, dy: "0em", className: "fill-gray-dark text-xs font-medium", children: payload.value }) })] }));
+};
+const radarData = [
+    // collapse-start
+    {
+        subject: "Mon",
+        A: 800,
+        B: 400,
+        C: 600,
+    },
+    {
+        subject: "Tue",
+        A: 600,
+        B: 1000,
+        C: 800,
+    },
+    {
+        subject: "Wed",
+        A: 600,
+        B: 200,
+        C: 400,
+    },
+    {
+        subject: "Thu",
+        A: 200,
+        B: 600,
+        C: 800,
+    },
+    {
+        subject: "Fri",
+        A: 400,
+        B: 200,
+        C: 600,
+    },
+    {
+        subject: "Sat",
+        A: 1000,
+        B: 800,
+        C: 600,
+    },
+    {
+        subject: "Sun",
+        A: 400,
+        B: 1000,
+        C: 800,
+    },
+    // collapse-end
+];
+export const RadarChart = () => {
+    const colors = {
+        A: "text-brand-medium",
+        B: "text-pink-500",
+        C: "text-blue-light-500",
+    };
+    return (_jsx(ResponsiveContainer, { height: 500, width: "100%", children: _jsxs(RechartsRadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: radarData, className: "text-muted size-full font-medium [&_.recharts-polar-grid]:text-gray-subtle [&_.recharts-text]:text-sm", margin: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            }, children: [_jsx(Legend, { verticalAlign: "bottom", align: "center", layout: "horizontal", content: ChartLegendContent }), _jsx(PolarGrid, { stroke: "currentColor", className: "text-gray-subtle" }), _jsx(PolarAngleAxis, { dataKey: "subject", stroke: "currentColor", tick: ({ x, y, textAnchor, index, payload, ...props }) => (_jsx("text", { x: x, y: index === 0 ? Number(y) - 14 : index === 3 || index === 4 ? Number(y) + 10 : Number(y), textAnchor: textAnchor, ...props, className: cx("recharts-text recharts-polar-angle-axis-tick-value", props.className), children: _jsx("tspan", { dy: "0em", className: "fill-gray-dark text-xs font-medium", children: payload.value }) })), tickLine: false, axisLine: false }), _jsx(PolarRadiusAxis, { textAnchor: "middle", tick: (props) => _jsx(CustomRadarChartTick, { ...props }), axisLine: false, angle: 90, domain: [0, 1000] }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}), cursor: {
+                        className: "stroke-brand-medium  stroke-2",
+                        style: {
+                            transform: "translateZ(0)",
+                        },
+                    } }), _jsx(Radar, { isAnimationActive: false, className: colors.A, dataKey: "A", name: "Series 1", stroke: "currentColor", strokeWidth: 2, strokeLinejoin: "round", fill: "currentColor", fillOpacity: 0.2, activeDot: {
+                        className: "fill-bg-base stroke-brand-medium stroke-2",
+                    } }), _jsx(Radar, { isAnimationActive: false, className: colors.B, dataKey: "B", name: "Series 2", stroke: "currentColor", strokeWidth: 2, strokeLinejoin: "round", fill: "currentColor", fillOpacity: 0.2, activeDot: {
+                        className: "fill-bg-base stroke-brand-medium stroke-2",
+                    } }), _jsx(Radar, { isAnimationActive: false, className: colors.C, dataKey: "C", name: "Series 3", stroke: "currentColor", strokeWidth: 2, strokeLinejoin: "round", fill: "currentColor", fillOpacity: 0.2, activeDot: {
+                        className: "fill-bg-base stroke-brand-medium stroke-2",
+                    } })] }) }));
+};
+//# sourceMappingURL=radar-charts.demo.js.map

package/dist/components/radar-charts.demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar-charts.demo.js","sourceRoot":"","sources":["../../src/components/radar-charts.demo.tsx"],"names":[],"mappings":"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"}

package/dist/components/radar-charts.story.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from "react";
+declare const _default: {
+    title: string;
+    decorators: ((Story: FC) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const RadarChart: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+//# sourceMappingURL=radar-charts.story.d.ts.map

package/dist/components/radar-charts.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar-charts.story.d.ts","sourceRoot":"","sources":["../../src/components/radar-charts.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;;;yBAMhB,EAAE;;AAHlB,wBAWE;AAEF,eAAO,MAAM,UAAU;;;CAA8B,CAAC"}

package/dist/components/radar-charts.story.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Charts from "./radar-charts.demo";
+export default {
+    title: "Application/Charts",
+    decorators: [
+        (Story) => (_jsx("div", { className: "bg-base flex min-h-screen items-center justify-center py-8", children: _jsx("div", { className: "flex w-full items-center justify-center", children: _jsx(Story, {}) }) })),
+    ],
+};
+export const RadarChart = () => _jsx(Charts.RadarChart, {});
+RadarChart.storyName = "Radar chart";
+//# sourceMappingURL=radar-charts.story.js.map

package/dist/components/radar-charts.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar-charts.story.js","sourceRoot":"","sources":["../../src/components/radar-charts.story.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAE9C,eAAe;IACX,KAAK,EAAE,oBAAoB;IAC3B,UAAU,EAAE;QACR,CAAC,KAAS,EAAE,EAAE,CAAC,CACX,cAAK,SAAS,EAAC,4DAA4D,YACvE,cAAK,SAAS,EAAC,yCAAyC,YACpD,KAAC,KAAK,KAAG,GACP,GACJ,CACT;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,UAAU,KAAG,CAAC;AACtD,UAAU,CAAC,SAAS,GAAG,aAAa,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @enact-ui/charts
+ *
+ * Chart components for ENACT UI built on Recharts.
+ * Adds ~200KB to bundle. Only install if you need charts.
+ *
+ * @packageDocumentation
+ */
+export { ChartActiveDot, ChartLegendContent, ChartTooltipContent, selectEvenlySpacedItems, } from "./components/charts-base";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AAKH,OAAO,EACH,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,GAC1B,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ChartActiveDot: () => ChartActiveDot,
+  ChartLegendContent: () => ChartLegendContent,
+  ChartTooltipContent: () => ChartTooltipContent,
+  selectEvenlySpacedItems: () => selectEvenlySpacedItems
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/charts-base.tsx
+var import_react = require("@enact-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var selectEvenlySpacedItems = (dataArray, count) => {
+  if (!dataArray || dataArray.length === 0) {
+    return [];
+  }
+  const selectedItems = [];
+  if (dataArray.length === 1) {
+    for (let i = 0; i < count; i++) {
+      selectedItems.push(dataArray[0]);
+    }
+    return selectedItems;
+  }
+  for (let i = 0; i < count; i++) {
+    const targetIndex = Math.round(i * (dataArray.length - 1) / (count - 1));
+    const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));
+    selectedItems.push(dataArray[boundedIndex]);
+  }
+  return selectedItems;
+};
+var ChartLegendContent = ({ reversed, payload, align, layout, className }) => {
+  payload = reversed ? payload?.toReversed() : payload;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "ul",
+    {
+      className: (0, import_react.cx)(
+        "flex",
+        layout === "vertical" ? `flex-col gap-1 pl-4 ${align === "center" ? "items-center" : align === "right" ? "items-start" : "items-start"}` : `flex-row gap-3 ${align === "center" ? "justify-center" : align === "right" ? "justify-end" : "justify-start"}`,
+        className
+      ),
+      children: payload?.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "text-muted flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_react.cx)("h-2 w-2 rounded-full bg-current", entry.payload?.className) }),
+        entry.value
+      ] }, entry.value ?? index))
+    }
+  );
+};
+var ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }) => {
+  const canRender = active && payload && payload.length;
+  if (!canRender) {
+    return null;
+  }
+  const isSingleDataPoint = payload.length === 1;
+  let title = isSingleDataPoint ? isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value : label;
+  let secondaryTitle = isSingleDataPoint ? isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label : payload;
+  title = isSingleDataPoint && formatter ? formatter(title, payload?.[0].name || label, payload[0], 0, payload) : labelFormatter ? labelFormatter(title, payload) : title;
+  secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-base-solid flex flex-col gap-0.5 rounded-lg px-3 py-2 shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-semibold text-white", children: title }),
+    !secondaryTitle ? null : Array.isArray(secondaryTitle) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: secondaryTitle.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_react.cx)("text-xs text-tooltip-supporting-text"), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, entry.name ?? index)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle })
+  ] });
+};
+var ChartActiveDot = ({ cx: cx2 = 0, cy = 0 }) => {
+  const size = 12;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { x: cx2 - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Active data point indicator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "2", width: "8", height: "8", rx: "6", className: "stroke-brand-medium fill-bg-base", strokeWidth: "2" })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChartActiveDot,
+  ChartLegendContent,
+  ChartTooltipContent,
+  selectEvenlySpacedItems
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/charts-base.tsx"],"sourcesContent":["// Copyright (c) 2025 Amsterdam Data Labs\n// @enact-ui/charts - Chart components built on Recharts\n\n/**\n * @enact-ui/charts\n *\n * Chart components for ENACT UI built on Recharts.\n * Adds ~200KB to bundle. Only install if you need charts.\n *\n * @packageDocumentation\n */\n\n// =============================================================================\n// Chart Base Utilities\n// =============================================================================\nexport {\n    ChartActiveDot,\n    ChartLegendContent,\n    ChartTooltipContent,\n    selectEvenlySpacedItems,\n} from \"./components/charts-base\";\n\n// =============================================================================\n// Demo Components (for reference/examples)\n// =============================================================================\n// Note: Demo components are included for reference but typically\n// consumers will build their own chart implementations using the base utilities\n","// Copyright (c) 2025 Amsterdam Data Labs\n\"use client\";\n\nimport { cx } from \"@enact-ui/react\";\nimport type { TooltipProps } from \"recharts\";\nimport type { Props as LegendContentProps } from \"recharts/types/component/DefaultLegendContent\";\nimport type { NameType, ValueType } from \"recharts/types/component/DefaultTooltipContent\";\nimport type { Props as DotProps } from \"recharts/types/shape/Dot\";\n\n/**\n * Selects evenly spaced items from an array. Used for rendering\n * certain number of x-axis labels.\n * @param dataArray - The array of items to select from.\n * @param count - The number of items to select.\n * @returns The selected items.\n */\nexport const selectEvenlySpacedItems = <T extends readonly unknown[]>(dataArray: T, count: number): Array<T[number]> => {\n    if (!dataArray || dataArray.length === 0) {\n        return [];\n    }\n\n    const selectedItems: Array<T[number]> = [];\n\n    if (dataArray.length === 1) {\n        for (let i = 0; i < count; i++) {\n            selectedItems.push(dataArray[0]);\n        }\n        return selectedItems;\n    }\n\n    for (let i = 0; i < count; i++) {\n        const targetIndex = Math.round((i * (dataArray.length - 1)) / (count - 1));\n        const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));\n        selectedItems.push(dataArray[boundedIndex]);\n    }\n\n    return selectedItems;\n};\n\n/**\n * Renders the legend content for a chart.\n * @param reversed - Whether to reverse the payload.\n * @param payload - The payload of the legend.\n * @param align - The alignment of the legend.\n * @param layout - The layout of the legend.\n * @param className - The class name of the legend.\n * @returns The legend content.\n */\nexport const ChartLegendContent = ({ reversed, payload, align, layout, className }: LegendContentProps & { reversed?: boolean; className?: string }) => {\n    payload = reversed ? payload?.toReversed() : payload;\n\n    return (\n        <ul\n            className={cx(\n                \"flex\",\n                layout === \"vertical\"\n                    ? `flex-col gap-1 pl-4 ${align === \"center\" ? \"items-center\" : align === \"right\" ? \"items-start\" : \"items-start\"}`\n                    : `flex-row gap-3 ${align === \"center\" ? \"justify-center\" : align === \"right\" ? \"justify-end\" : \"justify-start\"}`,\n                className,\n            )}\n        >\n            {payload?.map((entry, index) => (\n                <li className=\"text-muted flex items-center gap-2 text-sm\" key={entry.value ?? index}>\n                    <span className={cx(\"h-2 w-2 rounded-full bg-current\", (entry.payload as { className?: string })?.className)} />\n                    {entry.value}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\ninterface ChartTooltipContentProps extends TooltipProps<ValueType, NameType> {\n    isRadialChart?: boolean;\n    isPieChart?: boolean;\n    label?: string;\n    // We have to use `any` here because the `payload` prop is not typed correctly in the `recharts` library.\n    // biome-ignore lint/suspicious/noExplicitAny: recharts library typing limitation\n    payload?: any;\n}\n\nexport const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }: ChartTooltipContentProps) => {\n    const canRender = active && payload && payload.length;\n\n    if (!canRender) {\n        return null;\n    }\n\n    const isSingleDataPoint = payload.length === 1;\n\n    // If it's a single data point, we use the value as the title and\n    // the name as the secondary title.\n    let title = isSingleDataPoint ? (isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value) : label;\n    let secondaryTitle = isSingleDataPoint ? (isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label) : payload;\n\n    title =\n        isSingleDataPoint && formatter\n            ? formatter(title, payload?.[0].name || label, payload[0], 0, payload)\n            : labelFormatter\n              ? labelFormatter(title, payload)\n              : title;\n    secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;\n\n    return (\n        <div className=\"bg-base-solid flex flex-col gap-0.5 rounded-lg px-3 py-2 shadow-lg\">\n            <p className=\"text-xs font-semibold text-white\">{title}</p>\n\n            {!secondaryTitle ? null : Array.isArray(secondaryTitle) ? (\n                <div>\n                    {secondaryTitle.map((entry, index) => (\n                        <p key={entry.name ?? index} className={cx(\"text-xs text-tooltip-supporting-text\")}>\n                            {`${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}`}\n                        </p>\n                    ))}\n                </div>\n            ) : (\n                <p className=\"text-xs text-tooltip-supporting-text\">{secondaryTitle}</p>\n            )}\n        </div>\n    );\n};\n\ninterface ChartActiveDotProps extends DotProps {\n    // We have to use `any` here because the `payload` prop is not typed correctly in the `recharts` library.\n    // biome-ignore lint/suspicious/noExplicitAny: recharts library typing limitation\n    payload?: any;\n}\n\nexport const ChartActiveDot = ({ cx = 0, cy = 0 }: ChartActiveDotProps) => {\n    const size = 12;\n\n    return (\n        <svg x={cx - size / 2} y={cy - size / 2} width={size} height={size} viewBox=\"0 0 12 12\" fill=\"none\">\n            <title>Active data point indicator</title>\n            <rect x=\"2\" y=\"2\" width=\"8\" height=\"8\" rx=\"6\" className=\"stroke-brand-medium fill-bg-base\" strokeWidth=\"2\" />\n        </svg>\n    );\n};\n"],"mappings":"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","names":["cx"]}

package/dist/index.mjs

@@ -0,0 +1,67 @@
+// src/components/charts-base.tsx
+import { cx } from "@enact-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var selectEvenlySpacedItems = (dataArray, count) => {
+  if (!dataArray || dataArray.length === 0) {
+    return [];
+  }
+  const selectedItems = [];
+  if (dataArray.length === 1) {
+    for (let i = 0; i < count; i++) {
+      selectedItems.push(dataArray[0]);
+    }
+    return selectedItems;
+  }
+  for (let i = 0; i < count; i++) {
+    const targetIndex = Math.round(i * (dataArray.length - 1) / (count - 1));
+    const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));
+    selectedItems.push(dataArray[boundedIndex]);
+  }
+  return selectedItems;
+};
+var ChartLegendContent = ({ reversed, payload, align, layout, className }) => {
+  payload = reversed ? payload?.toReversed() : payload;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cx(
+        "flex",
+        layout === "vertical" ? `flex-col gap-1 pl-4 ${align === "center" ? "items-center" : align === "right" ? "items-start" : "items-start"}` : `flex-row gap-3 ${align === "center" ? "justify-center" : align === "right" ? "justify-end" : "justify-start"}`,
+        className
+      ),
+      children: payload?.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: "text-muted flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: cx("h-2 w-2 rounded-full bg-current", entry.payload?.className) }),
+        entry.value
+      ] }, entry.value ?? index))
+    }
+  );
+};
+var ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }) => {
+  const canRender = active && payload && payload.length;
+  if (!canRender) {
+    return null;
+  }
+  const isSingleDataPoint = payload.length === 1;
+  let title = isSingleDataPoint ? isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value : label;
+  let secondaryTitle = isSingleDataPoint ? isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label : payload;
+  title = isSingleDataPoint && formatter ? formatter(title, payload?.[0].name || label, payload[0], 0, payload) : labelFormatter ? labelFormatter(title, payload) : title;
+  secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;
+  return /* @__PURE__ */ jsxs("div", { className: "bg-base-solid flex flex-col gap-0.5 rounded-lg px-3 py-2 shadow-lg", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-white", children: title }),
+    !secondaryTitle ? null : Array.isArray(secondaryTitle) ? /* @__PURE__ */ jsx("div", { children: secondaryTitle.map((entry, index) => /* @__PURE__ */ jsx("p", { className: cx("text-xs text-tooltip-supporting-text"), children: `${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}` }, entry.name ?? index)) }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle })
+  ] });
+};
+var ChartActiveDot = ({ cx: cx2 = 0, cy = 0 }) => {
+  const size = 12;
+  return /* @__PURE__ */ jsxs("svg", { x: cx2 - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: [
+    /* @__PURE__ */ jsx("title", { children: "Active data point indicator" }),
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "6", className: "stroke-brand-medium fill-bg-base", strokeWidth: "2" })
+  ] });
+};
+export {
+  ChartActiveDot,
+  ChartLegendContent,
+  ChartTooltipContent,
+  selectEvenlySpacedItems
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/charts-base.tsx"],"sourcesContent":["// Copyright (c) 2025 Amsterdam Data Labs\n\"use client\";\n\nimport { cx } from \"@enact-ui/react\";\nimport type { TooltipProps } from \"recharts\";\nimport type { Props as LegendContentProps } from \"recharts/types/component/DefaultLegendContent\";\nimport type { NameType, ValueType } from \"recharts/types/component/DefaultTooltipContent\";\nimport type { Props as DotProps } from \"recharts/types/shape/Dot\";\n\n/**\n * Selects evenly spaced items from an array. Used for rendering\n * certain number of x-axis labels.\n * @param dataArray - The array of items to select from.\n * @param count - The number of items to select.\n * @returns The selected items.\n */\nexport const selectEvenlySpacedItems = <T extends readonly unknown[]>(dataArray: T, count: number): Array<T[number]> => {\n    if (!dataArray || dataArray.length === 0) {\n        return [];\n    }\n\n    const selectedItems: Array<T[number]> = [];\n\n    if (dataArray.length === 1) {\n        for (let i = 0; i < count; i++) {\n            selectedItems.push(dataArray[0]);\n        }\n        return selectedItems;\n    }\n\n    for (let i = 0; i < count; i++) {\n        const targetIndex = Math.round((i * (dataArray.length - 1)) / (count - 1));\n        const boundedIndex = Math.max(0, Math.min(targetIndex, dataArray.length - 1));\n        selectedItems.push(dataArray[boundedIndex]);\n    }\n\n    return selectedItems;\n};\n\n/**\n * Renders the legend content for a chart.\n * @param reversed - Whether to reverse the payload.\n * @param payload - The payload of the legend.\n * @param align - The alignment of the legend.\n * @param layout - The layout of the legend.\n * @param className - The class name of the legend.\n * @returns The legend content.\n */\nexport const ChartLegendContent = ({ reversed, payload, align, layout, className }: LegendContentProps & { reversed?: boolean; className?: string }) => {\n    payload = reversed ? payload?.toReversed() : payload;\n\n    return (\n        <ul\n            className={cx(\n                \"flex\",\n                layout === \"vertical\"\n                    ? `flex-col gap-1 pl-4 ${align === \"center\" ? \"items-center\" : align === \"right\" ? \"items-start\" : \"items-start\"}`\n                    : `flex-row gap-3 ${align === \"center\" ? \"justify-center\" : align === \"right\" ? \"justify-end\" : \"justify-start\"}`,\n                className,\n            )}\n        >\n            {payload?.map((entry, index) => (\n                <li className=\"text-muted flex items-center gap-2 text-sm\" key={entry.value ?? index}>\n                    <span className={cx(\"h-2 w-2 rounded-full bg-current\", (entry.payload as { className?: string })?.className)} />\n                    {entry.value}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\ninterface ChartTooltipContentProps extends TooltipProps<ValueType, NameType> {\n    isRadialChart?: boolean;\n    isPieChart?: boolean;\n    label?: string;\n    // We have to use `any` here because the `payload` prop is not typed correctly in the `recharts` library.\n    // biome-ignore lint/suspicious/noExplicitAny: recharts library typing limitation\n    payload?: any;\n}\n\nexport const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }: ChartTooltipContentProps) => {\n    const canRender = active && payload && payload.length;\n\n    if (!canRender) {\n        return null;\n    }\n\n    const isSingleDataPoint = payload.length === 1;\n\n    // If it's a single data point, we use the value as the title and\n    // the name as the secondary title.\n    let title = isSingleDataPoint ? (isRadialChart ? payload[0].value : isPieChart ? payload[0].value : payload[0].value) : label;\n    let secondaryTitle = isSingleDataPoint ? (isRadialChart ? payload[0].payload.name : isPieChart ? payload[0].name : label) : payload;\n\n    title =\n        isSingleDataPoint && formatter\n            ? formatter(title, payload?.[0].name || label, payload[0], 0, payload)\n            : labelFormatter\n              ? labelFormatter(title, payload)\n              : title;\n    secondaryTitle = isSingleDataPoint && labelFormatter ? labelFormatter(secondaryTitle, payload) : secondaryTitle;\n\n    return (\n        <div className=\"bg-base-solid flex flex-col gap-0.5 rounded-lg px-3 py-2 shadow-lg\">\n            <p className=\"text-xs font-semibold text-white\">{title}</p>\n\n            {!secondaryTitle ? null : Array.isArray(secondaryTitle) ? (\n                <div>\n                    {secondaryTitle.map((entry, index) => (\n                        <p key={entry.name ?? index} className={cx(\"text-xs text-tooltip-supporting-text\")}>\n                            {`${entry.name}: ${formatter ? formatter(entry.value, entry.name, entry, index, entry.payload) : entry.value}`}\n                        </p>\n                    ))}\n                </div>\n            ) : (\n                <p className=\"text-xs text-tooltip-supporting-text\">{secondaryTitle}</p>\n            )}\n        </div>\n    );\n};\n\ninterface ChartActiveDotProps extends DotProps {\n    // We have to use `any` here because the `payload` prop is not typed correctly in the `recharts` library.\n    // biome-ignore lint/suspicious/noExplicitAny: recharts library typing limitation\n    payload?: any;\n}\n\nexport const ChartActiveDot = ({ cx = 0, cy = 0 }: ChartActiveDotProps) => {\n    const size = 12;\n\n    return (\n        <svg x={cx - size / 2} y={cy - size / 2} width={size} height={size} viewBox=\"0 0 12 12\" fill=\"none\">\n            <title>Active data point indicator</title>\n            <rect x=\"2\" y=\"2\" width=\"8\" height=\"8\" rx=\"6\" className=\"stroke-brand-medium fill-bg-base\" strokeWidth=\"2\" />\n        </svg>\n    );\n};\n"],"mappings":"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","names":["cx"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@enact-ui/charts",
+  "version": "1.0.0",
+  "description": "Chart components for ENACT UI built on Recharts. Adds ~200KB to bundle. Only install if you need charts.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc --build && tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "biome check --write .",
+    "lint:check": "biome check .",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "@enact-ui/react": "^0.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "recharts": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "typescript": "^5.9.2"
+  },
+  "keywords": [
+    "react",
+    "charts",
+    "recharts",
+    "visualization",
+    "enact-ui"
+  ],
+  "engines": {
+    "node": ">=24.0.0",
+    "npm": ">=10.0.0"
+  },
+  "author": "Enact UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/enact-ui/enact-ui.git",
+    "directory": "packages/charts"
+  },
+  "bugs": {
+    "url": "https://github.com/enact-ui/enact-ui/issues"
+  },
+  "homepage": "https://enact-ui.com"
+}