@enact-ui/charts 0.1.0 → 0.2.0

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

@@ -1,23 +1,7 @@
-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;
-};
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Variations: Story;
 //# sourceMappingURL=line-charts.story.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"line-charts.story.d.ts","sourceRoot":"","sources":["../../src/components/line-charts.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}

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

@@ -1,17 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as Charts from "./line-charts.demo";
-export default {
-    title: "Application/Charts",
+const meta = {
+    title: "Charts/Line 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, {}) }) })),
+        (Story) => (_jsx("div", { className: "bg-surface-base flex min-h-screen items-center justify-center p-8", children: _jsx("div", { className: "flex w-full items-center justify-center", children: _jsx(Story, {}) }) })),
     ],
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["01", "02", "03", "04"],
+        },
+    },
+};
+export default meta;
+export const Playground = {
+    render: (args) => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.LineChartPlayground, { ...args }) })),
+    args: {
+        variant: "01",
+    },
+};
+export const Variations = {
+    render: () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.LineChartVariations, {}) })),
 };
-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

@@ -1 +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"}
+{"version":3,"file":"line-charts.story.js","sourceRoot":"","sources":["../../src/components/line-charts.story.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,oBAAoB;IAC3B,UAAU,EAAE;QACR,CAAC,KAAyB,EAAE,EAAE,CAAC,CAC3B,cAAK,SAAS,EAAC,mEAAmE,YAC9E,cAAK,SAAS,EAAC,yCAAyC,YACpD,KAAC,KAAK,KAAG,GACP,GACJ,CACT;KACJ;IACD,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;SACpC;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,CAAC,IAA6B,EAAE,EAAE,CAAC,CACvC,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,mBAAmB,OAAK,IAAI,GAAI,GACtC,CACT;IACD,IAAI,EAAE;QACF,OAAO,EAAE,IAAI;KAChB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,mBAAmB,KAAG,GAC5B,CACT;CACJ,CAAC"}

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

@@ -10,5 +10,10 @@ export declare const PieChartXs: ({ data }: PieChartProps) => import("react/jsx-
 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;
+interface PieChartPlaygroundProps {
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+}
+export declare const PieChartPlayground: ({ size }: PieChartPlaygroundProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PieChartVariations: () => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=pie-charts.demo.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"pie-charts.demo.d.ts","sourceRoot":"","sources":["../../src/components/pie-charts.demo.tsx"],"names":[],"mappings":"AAmCA,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;AAEF,UAAU,uBAAuB;IAC7B,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,GAAI,UAAiB,uBAAuB,4CAa1E,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAyB9B,CAAC"}

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

@@ -1,4 +1,3 @@
-// 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";
@@ -8,12 +7,12 @@ const pieChartData = [
     {
         name: "Series 1",
         value: 200,
-        className: "text-brand-medium",
+        className: "text-content-brand",
     },
     {
         name: "Series 2",
         value: 350,
-        className: "text-brand-medium",
+        className: "text-content-brand",
     },
     {
         name: "Series 3",
@@ -28,7 +27,7 @@ const pieChartData = [
     {
         name: "Series 5",
         value: 230,
-        className: "text-gray-subtle",
+        className: "text-content-tertiary",
     },
     // collapse-end
 ];
@@ -72,4 +71,21 @@ export const PieChartLg = ({ data = pieChartData }) => {
                 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 })] }) }));
 };
+export const PieChartPlayground = ({ size = "md" }) => {
+    switch (size) {
+        case "xxs":
+            return _jsx(PieChartXxs, {});
+        case "xs":
+            return _jsx(PieChartXs, {});
+        case "sm":
+            return _jsx(PieChartSm, {});
+        case "lg":
+            return _jsx(PieChartLg, {});
+        default:
+            return _jsx(PieChartMd, {});
+    }
+};
+export const PieChartVariations = () => {
+    return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-sm font-medium text-content-tertiary", children: "XXS Size" }), _jsx(PieChartXxs, {})] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-sm font-medium text-content-tertiary", children: "XS Size" }), _jsx(PieChartXs, {})] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-sm font-medium text-content-tertiary", children: "SM Size" }), _jsx(PieChartSm, {})] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-sm font-medium text-content-tertiary", children: "MD Size (Default)" }), _jsx(PieChartMd, {})] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-sm font-medium text-content-tertiary", children: "LG Size" }), _jsx(PieChartLg, {})] })] }));
+};
 //# sourceMappingURL=pie-charts.demo.js.map

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

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

@@ -1,27 +1,7 @@
-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;
-};
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Variations: Story;
 //# sourceMappingURL=pie-charts.story.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"pie-charts.story.d.ts","sourceRoot":"","sources":["../../src/components/pie-charts.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}

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

@@ -1,19 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as Charts from "./pie-charts.demo";
-export default {
-    title: "Application/Charts",
+const meta = {
+    title: "Charts/Pie 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, {}) }) })),
+        (Story) => (_jsx("div", { className: "bg-surface-base flex min-h-screen items-center justify-center p-8", children: _jsx("div", { className: "flex w-full items-center justify-center", children: _jsx(Story, {}) }) })),
     ],
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["xxs", "xs", "sm", "md", "lg"],
+        },
+    },
+};
+export default meta;
+export const Playground = {
+    render: (args) => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.PieChartPlayground, { ...args }) })),
+    args: {
+        size: "md",
+    },
+};
+export const Variations = {
+    render: () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.PieChartVariations, {}) })),
 };
-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

@@ -1 +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"}
+{"version":3,"file":"pie-charts.story.js","sourceRoot":"","sources":["../../src/components/pie-charts.story.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAE5C,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE;QACR,CAAC,KAAyB,EAAE,EAAE,CAAC,CAC3B,cAAK,SAAS,EAAC,mEAAmE,YAC9E,cAAK,SAAS,EAAC,yCAAyC,YACpD,KAAC,KAAK,KAAG,GACP,GACJ,CACT;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;SAC3C;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,CAAC,IAA6B,EAAE,EAAE,CAAC,CACvC,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,kBAAkB,OAAK,IAAI,GAAI,GACrC,CACT;IACD,IAAI,EAAE;QACF,IAAI,EAAE,IAAI;KACb;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,kBAAkB,KAAG,GAC3B,CACT;CACJ,CAAC"}

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

@@ -11,4 +11,11 @@ export declare const ProgressCircleXsOnlyTitle: () => import("react/jsx-runtime"
 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;
+interface ProgressCirclePlaygroundProps {
+    size?: "xs" | "sm" | "md" | "lg";
+    showSubtitle?: boolean;
+}
+export declare const ProgressCirclePlayground: ({ size, showSubtitle }: ProgressCirclePlaygroundProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCircleVariations: () => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=progress-circles.demo.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"progress-circles.demo.d.ts","sourceRoot":"","sources":["../../src/components/progress-circles.demo.tsx"],"names":[],"mappings":"AAYA,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,4CAgGvI,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;AAExF,UAAU,6BAA6B;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,wBAAwB,GAAI,wBAAsC,6BAA6B,4CAE3G,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CA+CpC,CAAC"}

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

@@ -1,4 +1,3 @@
-// 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";
@@ -6,7 +5,7 @@ import { PolarAngleAxis, RadialBar, RadialBarChart, ResponsiveContainer } from "
 const progressCircleData = [
     {
         value: 400,
-        className: "text-brand-medium",
+        className: "text-content-brand",
     },
 ];
 export const ProgressCircle = ({ size = "sm", title, subtitle }) => {
@@ -17,7 +16,7 @@ export const ProgressCircle = ({ size = "sm", title, subtitle }) => {
             innerRadius: 80 - 8,
             titleDY: "1.05em",
             subtitleDY: "-1.3em",
-            title: "text-display-xs font-semibold",
+            title: "text-2xl font-semibold",
             subtitle: "text-xs font-medium",
         },
         sm: {
@@ -25,7 +24,7 @@ export const ProgressCircle = ({ size = "sm", title, subtitle }) => {
             innerRadius: 100 - 10,
             titleDY: "1em",
             subtitleDY: "-1.4em",
-            title: "text-display-sm font-semibold",
+            title: "text-3xl font-semibold",
             subtitle: "text-xs font-medium",
         },
         md: {
@@ -33,7 +32,7 @@ export const ProgressCircle = ({ size = "sm", title, subtitle }) => {
             innerRadius: 120 - 12,
             titleDY: "1em",
             subtitleDY: "-1.5em",
-            title: "text-display-md font-semibold",
+            title: "text-4xl font-semibold",
             subtitle: "text-sm font-medium",
         },
         lg: {
@@ -50,7 +49,7 @@ export const ProgressCircle = ({ size = "sm", title, subtitle }) => {
                 // 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 }))] }))] }) }) }));
+                        } }), (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-content-tertiary fill-current", sizes[size].subtitle), children: subtitle })), title && (_jsx("tspan", { x: "50%", dy: subtitle ? sizes[size].titleDY : "1%", className: cx("text-content-primary 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" });
@@ -60,4 +59,10 @@ export const ProgressCircleXsOnlyTitle = () => _jsx(ProgressCircle, { size: "xs"
 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%" });
+export const ProgressCirclePlayground = ({ size = "md", showSubtitle = true }) => {
+    return _jsx(ProgressCircle, { size: size, title: "40%", ...(showSubtitle ? { subtitle: "Active users" } : {}) });
+};
+export const ProgressCircleVariations = () => {
+    return (_jsxs("div", { className: "flex flex-col gap-12", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-xl font-semibold", children: "With Subtitle" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "XS" }), _jsx(ProgressCircleXs, {})] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "SM" }), _jsx(ProgressCircleSm, {})] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "MD" }), _jsx(ProgressCircleMd, {})] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "LG" }), _jsx(ProgressCircleLg, {})] })] })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-xl font-semibold", children: "Only Title" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "XS" }), _jsx(ProgressCircleXsOnlyTitle, {})] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "SM" }), _jsx(ProgressCircleSmOnlyTitle, {})] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "MD" }), _jsx(ProgressCircleMdOnlyTitle, {})] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "text-sm text-content-tertiary font-medium", children: "LG" }), _jsx(ProgressCircleLgOnlyTitle, {})] })] })] })] }));
+};
 //# sourceMappingURL=progress-circles.demo.js.map

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

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

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

@@ -1,39 +1,7 @@
-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;
-};
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Variations: Story;
 //# sourceMappingURL=progress-circles.story.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"progress-circles.story.d.ts","sourceRoot":"","sources":["../../src/components/progress-circles.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}

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

@@ -1,25 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as Charts from "./progress-circles.demo";
-export default {
-    title: "Application/Charts",
+const meta = {
+    title: "Charts/Progress Circles",
     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, {}) }) })),
+        (Story) => (_jsx("div", { className: "bg-surface-base flex min-h-screen items-center justify-center p-8", children: _jsx("div", { className: "flex w-full items-center justify-center", children: _jsx(Story, {}) }) })),
     ],
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["xs", "sm", "md", "lg"],
+        },
+        showSubtitle: {
+            control: "boolean",
+        },
+    },
+};
+export default meta;
+export const Playground = {
+    render: (args) => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.ProgressCirclePlayground, { ...args }) })),
+    args: {
+        size: "md",
+        showSubtitle: true,
+    },
+};
+export const Variations = {
+    render: () => (_jsx("div", { className: "w-full max-w-5xl", children: _jsx(Charts.ProgressCircleVariations, {}) })),
 };
-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

@@ -1 +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"}
+{"version":3,"file":"progress-circles.story.js","sourceRoot":"","sources":["../../src/components/progress-circles.story.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAElD,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,yBAAyB;IAChC,UAAU,EAAE;QACR,CAAC,KAAyB,EAAE,EAAE,CAAC,CAC3B,cAAK,SAAS,EAAC,mEAAmE,YAC9E,cAAK,SAAS,EAAC,yCAAyC,YACpD,KAAC,KAAK,KAAG,GACP,GACJ,CACT;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;SACpC;QACD,YAAY,EAAE;YACV,OAAO,EAAE,SAAS;SACrB;KACJ;CACJ,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,CAAC,IAA6B,EAAE,EAAE,CAAC,CACvC,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,wBAAwB,OAAK,IAAI,GAAI,GAC3C,CACT;IACD,IAAI,EAAE;QACF,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,IAAI;KACrB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,MAAM,CAAC,wBAAwB,KAAG,GACjC,CACT;CACJ,CAAC"}

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

@@ -2,13 +2,16 @@ interface CustomRadarChartTickProps {
     payload: {
         value: string;
     };
-    x: number;
-    y: number;
+    x: number | string;
+    y: number | string;
     textAnchor: string;
     stroke: string;
-    radius: number;
+    /** Optional; PolarAngleAxis provides it, PolarRadiusAxis may not */
+    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 declare const RadarChartPlayground: () => import("react/jsx-runtime").JSX.Element;
+export declare const RadarChartVariations: () => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=radar-charts.demo.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"radar-charts.demo.d.ts","sourceRoot":"","sources":["../../src/components/radar-charts.demo.tsx"],"names":[],"mappings":"AAOA,UAAU,yBAAyB;IAC/B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,GAAI,+CAA+C,yBAAyB,4CAsC5G,CAAC;AAiDF,eAAO,MAAM,UAAU,+CA4GtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAGhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAShC,CAAC"}

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

@@ -1,4 +1,3 @@
-// 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";
@@ -8,6 +7,8 @@ import { ChartLegendContent, ChartTooltipContent } from "./charts-base";
 export const CustomRadarChartTick = ({ payload, x, y, textAnchor, stroke, radius }) => {
     const textRef = useRef(null);
     const rectRef = useRef(null);
+    const numX = Number(x);
+    const numY = Number(y);
     useEffect(() => {
         if (textRef.current && rectRef.current) {
             const textBoundingBox = textRef.current.getBBox();
@@ -19,7 +20,7 @@ export const CustomRadarChartTick = ({ payload, x, y, textAnchor, stroke, radius
             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 }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx("rect", { ref: rectRef, x: numX, y: numY, rx: 11, className: "fill-gray-light stroke-gray-light stroke-1" }), _jsx("text", { ref: textRef, x: numX, y: numY + 5, ...(radius !== undefined && { 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
@@ -69,26 +70,33 @@ const radarData = [
 ];
 export const RadarChart = () => {
     const colors = {
-        A: "text-brand-medium",
-        B: "text-pink-500",
-        C: "text-blue-light-500",
+        A: "text-content-brand",
+        B: "text-content-brand",
+        C: "text-content-brand",
     };
-    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: {
+    return (_jsx(ResponsiveContainer, { height: 500, width: "100%", children: _jsxs(RechartsRadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: radarData, className: "text-content-tertiary size-full font-medium [&_.recharts-polar-grid]:text-content-tertiary [&_.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: {
+            }, children: [_jsx(Legend, { verticalAlign: "bottom", align: "center", layout: "horizontal", content: ChartLegendContent }), _jsx(PolarGrid, { stroke: "currentColor", className: "text-content-tertiary" }), _jsx(PolarAngleAxis, { dataKey: "subject", stroke: "currentColor", tick: ({ x, y, textAnchor, index, payload, verticalAnchor, ...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: ({ verticalAnchor: _verticalAnchor, ...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: {
+                    } }), _jsx(Radar, { isAnimationActive: false, ...(colors.A && { 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: {
+                    } }), _jsx(Radar, { isAnimationActive: false, ...(colors.B && { 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: {
+                    } }), _jsx(Radar, { isAnimationActive: false, ...(colors.C && { 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",
                     } })] }) }));
 };
+export const RadarChartPlayground = () => {
+    // Only one variant currently
+    return _jsx(RadarChart, {});
+};
+export const RadarChartVariations = () => {
+    return (_jsx("div", { className: "flex flex-col gap-8", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "text-sm font-medium text-content-tertiary", children: "Default" }), _jsx(RadarChart, {})] }) }));
+};
 //# sourceMappingURL=radar-charts.demo.js.map