@enact-ui/charts 1.0.0

package/dist/components/charts-base.js

@@ -0,0 +1,68 @@
+// 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";
+/**
+ * Selects evenly spaced items from an array. Used for rendering
+ * certain number of x-axis labels.
+ * @param dataArray - The array of items to select from.
+ * @param count - The number of items to select.
+ * @returns The selected items.
+ */
+export const 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;
+};
+/**
+ * Renders the legend content for a chart.
+ * @param reversed - Whether to reverse the payload.
+ * @param payload - The payload of the legend.
+ * @param align - The alignment of the legend.
+ * @param layout - The layout of the legend.
+ * @param className - The class name of the legend.
+ * @returns The legend content.
+ */
+export const ChartLegendContent = ({ reversed, payload, align, layout, className }) => {
+    payload = reversed ? payload?.toReversed() : payload;
+    return (_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) => (_jsxs("li", { className: "text-muted flex items-center gap-2 text-sm", children: [_jsx("span", { className: cx("h-2 w-2 rounded-full bg-current", entry.payload?.className) }), entry.value] }, entry.value ?? index))) }));
+};
+export const ChartTooltipContent = ({ active, payload, label, isRadialChart, isPieChart, formatter, labelFormatter }) => {
+    const canRender = active && payload && payload.length;
+    if (!canRender) {
+        return null;
+    }
+    const isSingleDataPoint = payload.length === 1;
+    // If it's a single data point, we use the value as the title and
+    // the name as the secondary title.
+    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 (_jsxs("div", { className: "bg-base-solid flex flex-col gap-0.5 rounded-lg px-3 py-2 shadow-lg", children: [_jsx("p", { className: "text-xs font-semibold text-white", children: title }), !secondaryTitle ? null : Array.isArray(secondaryTitle) ? (_jsx("div", { children: secondaryTitle.map((entry, index) => (_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))) })) : (_jsx("p", { className: "text-xs text-tooltip-supporting-text", children: secondaryTitle }))] }));
+};
+export const ChartActiveDot = ({ cx = 0, cy = 0 }) => {
+    const size = 12;
+    return (_jsxs("svg", { x: cx - size / 2, y: cy - size / 2, width: size, height: size, viewBox: "0 0 12 12", fill: "none", children: [_jsx("title", { children: "Active data point indicator" }), _jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "6", className: "stroke-brand-medium fill-bg-base", strokeWidth: "2" })] }));
+};
+//# sourceMappingURL=charts-base.js.map

package/dist/components/charts-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts-base.js","sourceRoot":"","sources":["../../src/components/charts-base.tsx"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAMrC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAA+B,SAAY,EAAE,KAAa,EAAoB,EAAE;IACnH,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvC,OAAO,EAAE,CAAC;IACd,CAAC;IAED,MAAM,aAAa,GAAqB,EAAE,CAAC;IAE3C,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,aAAa,CAAC;IACzB,CAAC;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3E,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAC9E,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAmE,EAAE,EAAE;IACnJ,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAErD,OAAO,CACH,aACI,SAAS,EAAE,EAAE,CACT,MAAM,EACN,MAAM,KAAK,UAAU;YACjB,CAAC,CAAC,uBAAuB,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,EAAE;YAClH,CAAC,CAAC,kBAAkB,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,EAAE,EACrH,SAAS,CACZ,YAEA,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,cAAI,SAAS,EAAC,4CAA4C,aACtD,eAAM,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAG,KAAK,CAAC,OAAkC,EAAE,SAAS,CAAC,GAAI,EAC/G,KAAK,CAAC,KAAK,KAFgD,KAAK,CAAC,KAAK,IAAI,KAAK,CAG/E,CACR,CAAC,GACD,CACR,CAAC;AACN,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAA4B,EAAE,EAAE;IAC9I,MAAM,SAAS,GAAG,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;IAEtD,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;IAE/C,iEAAiE;IACjE,mCAAmC;IACnC,IAAI,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9H,IAAI,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEpI,KAAK;QACD,iBAAiB,IAAI,SAAS;YAC1B,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;YACtE,CAAC,CAAC,cAAc;gBACd,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC;gBAChC,CAAC,CAAC,KAAK,CAAC;IAClB,cAAc,GAAG,iBAAiB,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IAEhH,OAAO,CACH,eAAK,SAAS,EAAC,oEAAoE,aAC/E,YAAG,SAAS,EAAC,kCAAkC,YAAE,KAAK,GAAK,EAE1D,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CACtD,wBACK,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,YAA6B,SAAS,EAAE,EAAE,CAAC,sCAAsC,CAAC,YAC7E,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,IAD1G,KAAK,CAAC,IAAI,IAAI,KAAK,CAEvB,CACP,CAAC,GACA,CACT,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAC,sCAAsC,YAAE,cAAc,GAAK,CAC3E,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EAAuB,EAAE,EAAE;IACtE,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,OAAO,CACH,eAAK,CAAC,EAAE,EAAE,GAAG,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,aAC/F,0DAA0C,EAC1C,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,kCAAkC,EAAC,WAAW,EAAC,GAAG,GAAG,IAC3G,CACT,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,5 @@
+export declare const LineChart01: () => import("react/jsx-runtime").JSX.Element;
+export declare const LineChart02: () => import("react/jsx-runtime").JSX.Element;
+export declare const LineChart03: () => import("react/jsx-runtime").JSX.Element;
+export declare const LineChart04: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=line-charts.demo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-charts.demo.d.ts","sourceRoot":"","sources":["../../src/components/line-charts.demo.tsx"],"names":[],"mappings":"AAoFA,eAAO,MAAM,WAAW,+CA4HvB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAkIvB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAoIvB,CAAC;AAEF,eAAO,MAAM,WAAW,+CA+HvB,CAAC"}

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

@@ -0,0 +1,169 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, useBreakpoint } from "@enact-ui/react";
+import { Area, AreaChart, CartesianGrid, Label, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { ChartLegendContent, ChartTooltipContent } from "./charts-base";
+const lineData = [
+    // collapse-start
+    {
+        date: new Date(2025, 0, 1),
+        A: 600,
+        B: 400,
+        C: 100,
+    },
+    {
+        date: new Date(2025, 1, 1),
+        A: 620,
+        B: 405,
+        C: 160,
+    },
+    {
+        date: new Date(2025, 2, 1),
+        A: 630,
+        B: 400,
+        C: 170,
+    },
+    {
+        date: new Date(2025, 3, 1),
+        A: 650,
+        B: 410,
+        C: 190,
+    },
+    {
+        date: new Date(2025, 4, 1),
+        A: 600,
+        B: 320,
+        C: 200,
+    },
+    {
+        date: new Date(2025, 5, 1),
+        A: 650,
+        B: 430,
+        C: 230,
+    },
+    {
+        date: new Date(2025, 6, 1),
+        A: 620,
+        B: 400,
+        C: 200,
+    },
+    {
+        date: new Date(2025, 7, 1),
+        A: 750,
+        B: 540,
+        C: 300,
+    },
+    {
+        date: new Date(2025, 8, 1),
+        A: 780,
+        B: 490,
+        C: 390,
+    },
+    {
+        date: new Date(2025, 9, 1),
+        A: 750,
+        B: 450,
+        C: 300,
+    },
+    {
+        date: new Date(2025, 10, 1),
+        A: 780,
+        B: 480,
+        C: 340,
+    },
+    {
+        date: new Date(2025, 11, 1),
+        A: 820,
+        B: 500,
+        C: 450,
+    },
+    // collapse-end
+];
+export const LineChart01 = () => {
+    const isDesktop = useBreakpoint("lg");
+    const colors = {
+        A: "text-brand-medium",
+        B: "text-brand-subtle",
+        C: "text-brand-dark",
+    };
+    return (_jsx("div", { className: "flex h-60 flex-col gap-2", children: _jsx(ResponsiveContainer, { className: "h-full", children: _jsxs(AreaChart, { data: lineData, className: "text-muted [&_.recharts-text]:text-xs", margin: {
+                    top: isDesktop ? 12 : 6,
+                    bottom: isDesktop ? 16 : 0,
+                }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "currentColor", className: "text-brand-dark", stopOpacity: "0.7" }), _jsx("stop", { offset: "95%", stopColor: "currentColor", className: "text-brand-dark", stopOpacity: "0" })] }) }), _jsx(CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-gray-subtle" }), _jsx(Legend, { align: "right", verticalAlign: "top", layout: isDesktop ? "vertical" : "horizontal", content: _jsx(ChartLegendContent, { className: "-translate-y-2" }) }), _jsx(XAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", dataKey: "date", tickFormatter: (value) => value.toLocaleDateString(undefined, { month: "short" }), padding: { left: 10, right: 10 }, children: isDesktop && (_jsx(Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })) }), _jsx(YAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", tickFormatter: (value) => Number(value).toLocaleString(), children: _jsx(Label, { value: "Active users", fill: "currentColor", className: "!text-xs font-medium", style: { textAnchor: "middle" }, angle: -90, position: "insideLeft" }) }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}), formatter: (value) => Number(value).toLocaleString(), labelFormatter: (value) => value.toLocaleDateString(undefined, { month: "short", year: "numeric" }), cursor: {
+                            className: "stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "A", name: "Series 1", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "url(#gradient)", fillOpacity: 0.1, activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "B", name: "Series 2", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "C", name: "Series 3", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } })] }) }) }));
+};
+export const LineChart02 = () => {
+    const isDesktop = useBreakpoint("lg");
+    const colors = {
+        A: "text-brand-medium",
+        B: "text-brand-subtle",
+        C: "text-brand-dark",
+    };
+    return (_jsx("div", { className: "flex h-60 flex-col gap-2", children: _jsx(ResponsiveContainer, { className: "h-full", children: _jsxs(AreaChart, { data: lineData, className: "text-muted [&_.recharts-text]:text-xs", margin: {
+                    left: 5,
+                    right: 5,
+                    top: isDesktop ? 12 : 6,
+                    bottom: isDesktop ? 16 : 0,
+                }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "currentColor", className: "text-brand-dark", stopOpacity: "0.7" }), _jsx("stop", { offset: "95%", stopColor: "currentColor", className: "text-brand-dark", stopOpacity: "0" })] }) }), _jsx(CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-gray-subtle" }), _jsx(Legend, { verticalAlign: "top", align: "right", layout: isDesktop ? "vertical" : "horizontal", content: _jsx(ChartLegendContent, { className: "-translate-y-2" }) }), _jsx(XAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", dataKey: "date", tickFormatter: (value) => value.toLocaleDateString(undefined, { month: "short" }), padding: { left: 10, right: 10 }, children: isDesktop && (_jsx(Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })) }), _jsx(YAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", tickFormatter: (value) => Number(value).toLocaleString(), children: _jsx(Label, { value: "Active users", fill: "currentColor", className: "!text-xs font-medium", style: { textAnchor: "middle" }, angle: -90, position: "insideLeft" }) }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}), formatter: (value) => Number(value).toLocaleString(), labelFormatter: (value) => value.toLocaleDateString(undefined, { month: "short", year: "numeric" }), cursor: {
+                            className: "stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "A", name: "Series 1", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "url(#gradient)", fillOpacity: 0.1, activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "B", name: "Series 2", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", strokeDasharray: "0.1 8", strokeLinecap: "round", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "C", name: "Series 3", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", strokeDasharray: "0.1 8", strokeLinecap: "round", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } })] }) }) }));
+};
+export const LineChart03 = () => {
+    const isDesktop = useBreakpoint("lg");
+    const colors = {
+        A: "text-brand-medium",
+        B: "text-brand-subtle",
+        C: "text-brand-dark",
+    };
+    return (_jsx("div", { className: "flex h-60 flex-col gap-2", children: _jsx(ResponsiveContainer, { className: "h-full", children: _jsxs(AreaChart, { data: lineData, className: "text-muted [&_.recharts-text]:text-xs", margin: {
+                    left: 5,
+                    right: 5,
+                    top: isDesktop ? 12 : 6,
+                    bottom: isDesktop ? 16 : 0,
+                }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", className: "text-gray-medium", stopOpacity: "0.8" }), _jsx("stop", { offset: "80%", stopColor: "currentColor", className: "text-gray-medium", stopOpacity: "0" })] }), _jsxs("pattern", { id: "verticalLines", width: "8", height: "100%", fill: "url(#gradient)", patternUnits: "userSpaceOnUse", children: [_jsx("line", { x1: "0", y1: "0", x2: "0", y2: "100%", stroke: "currentColor", className: "text-gray-subtle", strokeWidth: "1.5" }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#gradient)", fillOpacity: 0.15 })] })] }), _jsx(CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-gray-subtle" }), _jsx(Legend, { verticalAlign: "top", align: "right", layout: isDesktop ? "vertical" : "horizontal", content: _jsx(ChartLegendContent, { className: "-translate-y-2" }) }), _jsx(XAxis, { fill: "currentColor", axisLine: false, tickLine: false, tickMargin: 10, interval: "preserveStartEnd", dataKey: "date", padding: { left: 10, right: 10 }, tickFormatter: (value) => value.toLocaleDateString(undefined, { month: "short" }), children: isDesktop && (_jsx(Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })) }), _jsx(YAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", tickFormatter: (value) => Number(value).toLocaleString(), children: _jsx(Label, { value: "Active users", fill: "currentColor", className: "!text-xs font-medium", style: { textAnchor: "middle" }, angle: -90, position: "insideLeft" }) }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}), formatter: (value) => Number(value).toLocaleString(), labelFormatter: (value) => value.toLocaleDateString(undefined, { month: "short", year: "numeric" }), cursor: {
+                            className: "stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "A", name: "Series 1", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "url(#verticalLines)", fillOpacity: 1, activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "B", name: "Series 2", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "C", name: "Series 3", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } })] }) }) }));
+};
+export const LineChart04 = () => {
+    const isDesktop = useBreakpoint("lg");
+    const colors = {
+        A: "text-brand-medium",
+        B: "text-gray-medium",
+        C: "text-gray-subtle",
+    };
+    return (_jsx("div", { className: "flex h-60 flex-col gap-2", children: _jsx(ResponsiveContainer, { className: "h-full", children: _jsxs(AreaChart, { data: lineData, className: "text-muted [&_.recharts-text]:text-xs", margin: {
+                    left: 5,
+                    right: 5,
+                    top: isDesktop ? 12 : 6,
+                    bottom: isDesktop ? 16 : 0,
+                }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "currentColor", className: "text-gray-medium", stopOpacity: "0.7" }), _jsx("stop", { offset: "95%", stopColor: "currentColor", className: "text-gray-medium", stopOpacity: "0" })] }) }), _jsx(CartesianGrid, { vertical: false, stroke: "currentColor", className: "text-gray-subtle" }), _jsx(Legend, { verticalAlign: "top", align: "right", layout: isDesktop ? "vertical" : "horizontal", content: _jsx(ChartLegendContent, { className: "-translate-y-2" }) }), _jsx(XAxis, { fill: "currentColor", axisLine: false, tickLine: false, tickMargin: 10, interval: "preserveStartEnd", dataKey: "date", tickFormatter: (value) => value.toLocaleDateString(undefined, { month: "short" }), padding: { left: 10, right: 10 }, children: isDesktop && (_jsx(Label, { fill: "currentColor", className: "!text-xs font-medium max-lg:hidden", position: "bottom", children: "Month" })) }), _jsx(YAxis, { fill: "currentColor", axisLine: false, tickLine: false, interval: "preserveStartEnd", tickFormatter: (value) => Number(value).toLocaleString(), children: _jsx(Label, { value: "Active users", fill: "currentColor", className: "!text-xs font-medium", style: { textAnchor: "middle" }, angle: -90, position: "insideLeft" }) }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}), formatter: (value) => Number(value).toLocaleString(), labelFormatter: (value) => value.toLocaleDateString(undefined, { month: "short", year: "numeric" }), cursor: {
+                            className: "stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.A, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "A", name: "Series 1", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "url(#gradient)", fillOpacity: 0.1, activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.B, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "B", name: "Series 2", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } }), _jsx(Area, { isAnimationActive: false, className: cx(colors.C, "[&_.recharts-area-area]:translate-y-1.5 [&_.recharts-area-area]:[clip-path:inset(0_0_6px_0)]"), dataKey: "C", name: "Series 3", type: "monotone", stroke: "currentColor", strokeWidth: 2, fill: "none", activeDot: {
+                            className: "fill-bg-base stroke-brand-medium stroke-2",
+                        } })] }) }) }));
+};
+//# sourceMappingURL=line-charts.demo.js.map

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

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

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

@@ -0,0 +1,23 @@
+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 LineChart01: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const LineChart02: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const LineChart03: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const LineChart04: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+//# sourceMappingURL=line-charts.story.d.ts.map

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

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Charts from "./line-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 LineChart01 = () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.LineChart01, {}) }));
+LineChart01.storyName = "Line chart 01";
+export const LineChart02 = () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.LineChart02, {}) }));
+LineChart02.storyName = "Line chart 02";
+export const LineChart03 = () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.LineChart03, {}) }));
+LineChart03.storyName = "Line chart 03";
+export const LineChart04 = () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.LineChart04, {}) }));
+LineChart04.storyName = "Line chart 04";
+//# sourceMappingURL=line-charts.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-charts.story.js","sourceRoot":"","sources":["../../src/components/line-charts.story.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,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,WAAW,GAAG,GAAG,EAAE,CAAC,CAC7B,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,WAAW,KAAG,GACpB,CACT,CAAC;AACF,WAAW,CAAC,SAAS,GAAG,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CAC7B,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,WAAW,KAAG,GACpB,CACT,CAAC;AACF,WAAW,CAAC,SAAS,GAAG,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CAC7B,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,WAAW,KAAG,GACpB,CACT,CAAC;AACF,WAAW,CAAC,SAAS,GAAG,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CAC7B,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,WAAW,KAAG,GACpB,CACT,CAAC;AACF,WAAW,CAAC,SAAS,GAAG,eAAe,CAAC"}

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

@@ -0,0 +1,14 @@
+interface PieChartProps {
+    data?: {
+        name: string;
+        value: number;
+        className?: string;
+    }[];
+}
+export declare const PieChartXxs: ({ data }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PieChartXs: ({ data }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PieChartSm: ({ data }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PieChartMd: ({ data }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PieChartLg: ({ data }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=pie-charts.demo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-charts.demo.d.ts","sourceRoot":"","sources":["../../src/components/pie-charts.demo.tsx"],"names":[],"mappings":"AAoCA,UAAU,aAAa;IACnB,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE;AAED,eAAO,MAAM,WAAW,GAAI,UAAyB,aAAa,4CA8BjE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,UAAyB,aAAa,4CA8BhE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,UAAyB,aAAa,4CA8BhE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,UAAyB,aAAa,4CA8BhE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,UAAyB,aAAa,4CA8BhE,CAAC"}

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

@@ -0,0 +1,75 @@
+// Copyright (c) 2025 Amsterdam Data Labs
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Legend, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Tooltip } from "recharts";
+import { ChartLegendContent, ChartTooltipContent } from "./charts-base";
+const pieChartData = [
+    // collapse-start
+    {
+        name: "Series 1",
+        value: 200,
+        className: "text-brand-medium",
+    },
+    {
+        name: "Series 2",
+        value: 350,
+        className: "text-brand-medium",
+    },
+    {
+        name: "Series 3",
+        value: 100,
+        className: "text-brand-subtle",
+    },
+    {
+        name: "Series 4",
+        value: 120,
+        className: "text-brand-subtle",
+    },
+    {
+        name: "Series 5",
+        value: 230,
+        className: "text-gray-subtle",
+    },
+    // collapse-end
+];
+export const PieChartXxs = ({ data = pieChartData }) => {
+    return (_jsx(ResponsiveContainer, { height: 120, className: "max-w-52.5", children: _jsxs(RechartsPieChart, { margin: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            }, children: [_jsx(Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, { isPieChart: true }) }), _jsx(Pie, { isAnimationActive: false, startAngle: -270, endAngle: -630, stroke: "none", data: data, dataKey: "value", nameKey: "name", fill: "currentColor", innerRadius: 30, outerRadius: 60 })] }) }));
+};
+export const PieChartXs = ({ data = pieChartData }) => {
+    return (_jsx(ResponsiveContainer, { height: 160, className: "max-w-62.5", children: _jsxs(RechartsPieChart, { margin: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            }, children: [_jsx(Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, { isPieChart: true }) }), _jsx(Pie, { isAnimationActive: false, startAngle: -270, endAngle: -630, stroke: "none", data: data, dataKey: "value", nameKey: "name", fill: "currentColor", innerRadius: 40, outerRadius: 80 })] }) }));
+};
+export const PieChartSm = ({ data = pieChartData }) => {
+    return (_jsx(ResponsiveContainer, { height: 200, className: "max-w-72.5", children: _jsxs(RechartsPieChart, { margin: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            }, children: [_jsx(Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, { isPieChart: true }) }), _jsx(Pie, { isAnimationActive: false, startAngle: -270, endAngle: -630, stroke: "none", data: data, dataKey: "value", nameKey: "name", fill: "currentColor", innerRadius: 50, outerRadius: 100 })] }) }));
+};
+export const PieChartMd = ({ data = pieChartData }) => {
+    return (_jsx(ResponsiveContainer, { height: 240, className: "max-w-96", children: _jsxs(RechartsPieChart, { margin: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            }, children: [_jsx(Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, { isPieChart: true }) }), _jsx(Pie, { isAnimationActive: false, startAngle: -270, endAngle: -630, stroke: "none", data: data, dataKey: "value", nameKey: "name", fill: "currentColor", innerRadius: 60, outerRadius: 120 })] }) }));
+};
+export const PieChartLg = ({ data = pieChartData }) => {
+    return (_jsx(ResponsiveContainer, { height: 280, className: "max-w-96", children: _jsxs(RechartsPieChart, { margin: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            }, children: [_jsx(Legend, { verticalAlign: "top", align: "right", layout: "vertical", content: ChartLegendContent }), _jsx(Tooltip, { content: _jsx(ChartTooltipContent, { isPieChart: true }) }), _jsx(Pie, { isAnimationActive: false, startAngle: -270, endAngle: -630, stroke: "none", data: data, dataKey: "value", nameKey: "name", fill: "currentColor", innerRadius: 70, outerRadius: 140 })] }) }));
+};
+//# sourceMappingURL=pie-charts.demo.js.map

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

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

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

@@ -0,0 +1,27 @@
+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 PieChartXxs: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const PieChartXs: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const PieChartSm: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const PieChartMd: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const PieChartLg: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+//# sourceMappingURL=pie-charts.story.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Charts from "./pie-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 PieChartXxs = () => _jsx(Charts.PieChartXxs, {});
+PieChartXxs.storyName = "Pie chart xxs";
+export const PieChartXs = () => _jsx(Charts.PieChartXs, {});
+PieChartXs.storyName = "Pie chart xs";
+export const PieChartSm = () => _jsx(Charts.PieChartSm, {});
+PieChartSm.storyName = "Pie chart sm";
+export const PieChartMd = () => _jsx(Charts.PieChartMd, {});
+PieChartMd.storyName = "Pie chart md";
+export const PieChartLg = () => _jsx(Charts.PieChartLg, {});
+PieChartLg.storyName = "Pie chart lg";
+//# sourceMappingURL=pie-charts.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-charts.story.js","sourceRoot":"","sources":["../../src/components/pie-charts.story.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAE5C,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,WAAW,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,WAAW,KAAG,CAAC;AACxD,WAAW,CAAC,SAAS,GAAG,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,UAAU,KAAG,CAAC;AACtD,UAAU,CAAC,SAAS,GAAG,cAAc,CAAC;AAEtC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,UAAU,KAAG,CAAC;AACtD,UAAU,CAAC,SAAS,GAAG,cAAc,CAAC;AAEtC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,UAAU,KAAG,CAAC;AACtD,UAAU,CAAC,SAAS,GAAG,cAAc,CAAC;AAEtC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAC,MAAM,CAAC,UAAU,KAAG,CAAC;AACtD,UAAU,CAAC,SAAS,GAAG,cAAc,CAAC"}

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

@@ -0,0 +1,14 @@
+export declare const ProgressCircle: ({ size, title, subtitle }: {
+    size?: "xs" | "sm" | "md" | "lg";
+    title?: string;
+    subtitle?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleXs: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleSm: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleMd: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleLg: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleXsOnlyTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleSmOnlyTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleMdOnlyTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleLgOnlyTitle: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=progress-circles.demo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circles.demo.d.ts","sourceRoot":"","sources":["../../src/components/progress-circles.demo.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,cAAc,GAAI,2BAAkC;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,4CAwFvI,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAAyE,CAAC;AACvG,eAAO,MAAM,gBAAgB,+CAA+D,CAAC;AAC7F,eAAO,MAAM,gBAAgB,+CAAyE,CAAC;AACvG,eAAO,MAAM,gBAAgB,+CAAyE,CAAC;AACvG,eAAO,MAAM,yBAAyB,+CAAiD,CAAC;AACxF,eAAO,MAAM,yBAAyB,+CAAiD,CAAC;AACxF,eAAO,MAAM,yBAAyB,+CAAiD,CAAC;AACxF,eAAO,MAAM,yBAAyB,+CAAiD,CAAC"}

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

@@ -0,0 +1,63 @@
+// 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 { PolarAngleAxis, RadialBar, RadialBarChart, ResponsiveContainer } from "recharts";
+const progressCircleData = [
+    {
+        value: 400,
+        className: "text-brand-medium",
+    },
+];
+export const ProgressCircle = ({ size = "sm", title, subtitle }) => {
+    const sizes = {
+        // collapse-start
+        xs: {
+            size: 16,
+            innerRadius: 80 - 8,
+            titleDY: "1.05em",
+            subtitleDY: "-1.3em",
+            title: "text-display-xs font-semibold",
+            subtitle: "text-xs font-medium",
+        },
+        sm: {
+            size: 20,
+            innerRadius: 100 - 10,
+            titleDY: "1em",
+            subtitleDY: "-1.4em",
+            title: "text-display-sm font-semibold",
+            subtitle: "text-xs font-medium",
+        },
+        md: {
+            size: 24,
+            innerRadius: 120 - 12,
+            titleDY: "1em",
+            subtitleDY: "-1.5em",
+            title: "text-display-md font-semibold",
+            subtitle: "text-sm font-medium",
+        },
+        lg: {
+            size: 28,
+            innerRadius: 140 - 14,
+            titleDY: "1em",
+            subtitleDY: "-2.1em",
+            title: "text-display-lg font-semibold",
+            subtitle: "text-sm font-medium",
+        },
+        // collapse-end
+    };
+    return (_jsx("div", { className: "h-100 w-full", children: _jsx(ResponsiveContainer, { children: _jsxs(RadialBarChart, { data: progressCircleData, accessibilityLayer: true, innerRadius: sizes[size].innerRadius, barSize: sizes[size].size, 
+                // This is needed to start the chart at the top and go clockwise
+                startAngle: 90, endAngle: 360 + 90, children: [_jsx(PolarAngleAxis, { tick: false, type: "number", domain: [0, 1000], reversed: true }), _jsx(RadialBar, { isAnimationActive: false, dataKey: "value", fill: "currentColor", cornerRadius: 99, background: {
+                            className: "fill-gray-light_hover",
+                        } }), (title || subtitle) && (_jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", children: [subtitle && (_jsx("tspan", { x: "50%", dy: title ? sizes[size].subtitleDY : "1%", className: cx("text-muted fill-current", sizes[size].subtitle), children: subtitle })), title && (_jsx("tspan", { x: "50%", dy: subtitle ? sizes[size].titleDY : "1%", className: cx("text-heading fill-current", sizes[size].title), children: title }))] }))] }) }) }));
+};
+export const ProgressCircleXs = () => _jsx(ProgressCircle, { size: "xs", title: "40%", subtitle: "Active users" });
+export const ProgressCircleSm = () => _jsx(ProgressCircle, { title: "40%", subtitle: "Active users" });
+export const ProgressCircleMd = () => _jsx(ProgressCircle, { size: "md", title: "40%", subtitle: "Active users" });
+export const ProgressCircleLg = () => _jsx(ProgressCircle, { size: "lg", title: "40%", subtitle: "Active users" });
+export const ProgressCircleXsOnlyTitle = () => _jsx(ProgressCircle, { size: "xs", title: "40%" });
+export const ProgressCircleSmOnlyTitle = () => _jsx(ProgressCircle, { size: "sm", title: "40%" });
+export const ProgressCircleMdOnlyTitle = () => _jsx(ProgressCircle, { size: "md", title: "40%" });
+export const ProgressCircleLgOnlyTitle = () => _jsx(ProgressCircle, { size: "lg", title: "40%" });
+//# sourceMappingURL=progress-circles.demo.js.map

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

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