@trackunit/react-chart-components 0.0.77 → 0.0.79

package/index.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
-var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var React = require('react');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
@@ -96679,14 +96679,10 @@ const Chart = ({ options, showLoading, className, style, onChartReady, onClick,
             }
         };
     }, [onClick, echartsRef]);
-    return (jsxRuntime.jsx(ChartContainer, { style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxRuntime.jsxs(SpinnerContainer, { children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChartsReact, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
+    return (jsxRuntime.jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChartsReact, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
 };
-const SpinnerContainer = tailwindStyledComponents.tw.div `
-  tu-chart-spinner-container
-`;
-const ChartContainer = tailwindStyledComponents.tw.div `
-  tu-chart-container
-`;
+const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
+const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
 /**
  
@@ -96735,6 +96731,28 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
         } }));
 };
 
+const cvaKpi = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "gap-1", "leading-none", "items-center"]);
+const cvaKpiCountContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "items-baseline"]);
+const cvaKpiDescription = cssClassVarianceUtilities.cvaMerge(["font-normal", "text-base"]);
+const cvaKpiCount = cssClassVarianceUtilities.cvaMerge(["font-semibold", "text-xl"]);
+const cvaKpiSuffix = cssClassVarianceUtilities.cvaMerge(["font-normal", "text-base"]);
+const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-baseline"], {
+    variants: {
+        inline: {
+            false: "",
+            true: ["flex-row", "gap-1", "justify-start"],
+        },
+        showChart: {
+            false: "",
+            true: ["gap-0 ", "items-center"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        showChart: false,
+    },
+});
+
 /**
  * - A KPI component to display a value and its description.
  * - It can also display a donut chart to show the value and its total.
@@ -96750,18 +96768,51 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
  * @returns {JSX.Element} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
-    return (jsxRuntime.jsxs(Root$1, { className: className, "data-testid": dataTestId, children: [showChart && (jsxRuntime.jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: Number(count), totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxRuntime.jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, "$inline": inline, children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] })) : (jsxRuntime.jsxs(Container, { "$showChart": showChart, "data-testid": dataTestId && `${dataTestId}-container`, "$inline": inline, children: [jsxRuntime.jsxs(CountContainer, { children: [jsxRuntime.jsx(Count, { children: count }), suffix && jsxRuntime.jsx(Suffix, { "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })] }), jsxRuntime.jsx(Description, { children: description })] }))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart && (jsxRuntime.jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: Number(count), totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] })) : (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsxs("span", { className: cvaKpiCountContainer(), children: [jsxRuntime.jsx("span", { className: cvaKpiCount(), children: count }), suffix && (jsxRuntime.jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
 };
-const Root$1 = tailwindStyledComponents.tw.div `tu-kpi`;
-const CountContainer = tailwindStyledComponents.tw.span `tu-kpi__count-container`;
-const Description = tailwindStyledComponents.tw.span `tu-kpi__description`;
-const Count = tailwindStyledComponents.tw.span `tu-kpi__count`;
-const Suffix = tailwindStyledComponents.tw.span `tu-kpi__suffix`;
-const Container = tailwindStyledComponents.tw.div `
-  tu-kpi__container 
-  ${p => p.$inline && `tu-kpi__container--inline`}
-  ${p => !p.$showChart && `tu-kpi__container--without-chart`}
-`;
+
+const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
+    "inline-flex",
+    "items-center",
+    "transition-all",
+    "ease-in-out",
+    "duration-200",
+    "text-neutral-500",
+    "hover:text-neutral-700",
+    "text-sm",
+    "gap-2",
+], {
+    variants: {
+        selected: {
+            false: "",
+            true: "font-medium text-black",
+        },
+        disabled: {
+            false: "",
+            true: "text-neutral-300",
+        },
+        isClickable: {
+            false: "cursor-default",
+            true: "cursor-pointer",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+        selected: false,
+        isClickable: false,
+    },
+});
+const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
+    variants: {
+        selected: {
+            false: "",
+            true: "border border-black border-opacity-50",
+        },
+    },
+    defaultVariants: {
+        selected: false,
+    },
+});
 
 /**
  * The LegendItem component is used to show form legends.
@@ -96771,28 +96822,8 @@ const Container = tailwindStyledComponents.tw.div `
  */
 const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxRuntime.jsxs(Root, { "data-testid": dataTestId, "$disabled": disabled, className: className, "$selected": selected, onClick: handleOnClick, children: [jsxRuntime.jsx(Indicator, { style: { backgroundColor: color }, "$selected": selected }), label && jsxRuntime.jsx("p", { children: label })] }));
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, onClick: handleOnClick, className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), style: { backgroundColor: color } }), label && jsxRuntime.jsx("p", { children: label })] }));
 };
-const Root = tailwindStyledComponents.tw.div `
-  inline-flex
-  items-center
-  transition-all
-  ease-in-out
-  duration-200
-  text-neutral-500
-  hover:text-neutral-700
-  text-sm
-  gap-2
-  ${p => (p.$disabled ? tailwindStyledComponents.tws `text-neutral-300` : p.$selected ? tailwindStyledComponents.tws `text-black` : "")}
-  ${p => (p.$selected ? tailwindStyledComponents.tws `font-medium` : null)}
-  ${p => (p.onClick ? tailwindStyledComponents.tws `cursor-pointer` : tailwindStyledComponents.tws `cursor-default`)}
-`;
-const Indicator = tailwindStyledComponents.tw.div `
-  w-3
-  h-3
-  rounded-[50%]
-  ${p => (p.$selected ? tailwindStyledComponents.tws `border border-black border-opacity-50` : null)}
-`;
 
 /**
  * Create a PieChart with legends based on our current Chart component
@@ -96800,7 +96831,7 @@ const Indicator = tailwindStyledComponents.tw.div `
  * @param {PieChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
-const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => (jsxRuntime.jsxs(ChartRoot, { className: className, "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { children: size === "full" && (jsxRuntime.jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsxRuntime.jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected, color: item.color }, item.id))) })) }), jsxRuntime.jsx(Chart, { dataTestId: "pie-chart", showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
+const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { children: size === "full" && (jsxRuntime.jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsxRuntime.jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected, color: item.color }, item.id))) })) }), jsxRuntime.jsx(Chart, { dataTestId: "pie-chart", showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
                 const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
                 if (onClick && clickedEntry) {
                     onClick(clickedEntry);
@@ -96851,14 +96882,14 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
                     },
                 ],
             } })] }));
-const ChartRoot = tailwindStyledComponents.tw.div `
-  flex
-  flex-direction-col
-  flex-wrap-reverse
-  justify-between
-  items-center
-  h-full
-`;
+const cvaChartRoot = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-direction-col",
+    "flex-wrap-reverse",
+    "justify-between",
+    "items-center",
+    "h-full",
+]);
 
 exports.Chart = Chart;
 exports.Kpi = Kpi;

package/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Spinner, Text, SkeletonLines } from '@trackunit/react-components';
-import { tw, tws } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
 import React__default, { PureComponent } from 'react';
 import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
@@ -96653,14 +96653,10 @@ const Chart = ({ options, showLoading, className, style, onChartReady, onClick,
             }
         };
     }, [onClick, echartsRef]);
-    return (jsx(ChartContainer, { style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxs(SpinnerContainer, { children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxs(Fragment, { children: [jsx(EChartsReact, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
+    return (jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxs(Fragment, { children: [jsx(EChartsReact, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
 };
-const SpinnerContainer = tw.div `
-  tu-chart-spinner-container
-`;
-const ChartContainer = tw.div `
-  tu-chart-container
-`;
+const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
+const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
 /**
  
@@ -96709,6 +96705,28 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
         } }));
 };
 
+const cvaKpi = cvaMerge(["flex", "flex-row", "gap-1", "leading-none", "items-center"]);
+const cvaKpiCountContainer = cvaMerge(["flex", "gap-1", "items-baseline"]);
+const cvaKpiDescription = cvaMerge(["font-normal", "text-base"]);
+const cvaKpiCount = cvaMerge(["font-semibold", "text-xl"]);
+const cvaKpiSuffix = cvaMerge(["font-normal", "text-base"]);
+const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
+    variants: {
+        inline: {
+            false: "",
+            true: ["flex-row", "gap-1", "justify-start"],
+        },
+        showChart: {
+            false: "",
+            true: ["gap-0 ", "items-center"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+        showChart: false,
+    },
+});
+
 /**
  * - A KPI component to display a value and its description.
  * - It can also display a donut chart to show the value and its total.
@@ -96724,18 +96742,51 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
  * @returns {JSX.Element} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
-    return (jsxs(Root$1, { className: className, "data-testid": dataTestId, children: [showChart && (jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: Number(count), totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, "$inline": inline, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs(Container, { "$showChart": showChart, "data-testid": dataTestId && `${dataTestId}-container`, "$inline": inline, children: [jsxs(CountContainer, { children: [jsx(Count, { children: count }), suffix && jsx(Suffix, { "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })] }), jsx(Description, { children: description })] }))] }));
+    return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart && (jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, count: Number(count), totalCount: totalCount, countColor: countColor, totalCountColor: totalCountColor })), loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxs("span", { className: cvaKpiCountContainer(), children: [jsx("span", { className: cvaKpiCount(), children: count }), suffix && (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
 };
-const Root$1 = tw.div `tu-kpi`;
-const CountContainer = tw.span `tu-kpi__count-container`;
-const Description = tw.span `tu-kpi__description`;
-const Count = tw.span `tu-kpi__count`;
-const Suffix = tw.span `tu-kpi__suffix`;
-const Container = tw.div `
-  tu-kpi__container 
-  ${p => p.$inline && `tu-kpi__container--inline`}
-  ${p => !p.$showChart && `tu-kpi__container--without-chart`}
-`;
+
+const cvaLegendItem = cvaMerge([
+    "inline-flex",
+    "items-center",
+    "transition-all",
+    "ease-in-out",
+    "duration-200",
+    "text-neutral-500",
+    "hover:text-neutral-700",
+    "text-sm",
+    "gap-2",
+], {
+    variants: {
+        selected: {
+            false: "",
+            true: "font-medium text-black",
+        },
+        disabled: {
+            false: "",
+            true: "text-neutral-300",
+        },
+        isClickable: {
+            false: "cursor-default",
+            true: "cursor-pointer",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+        selected: false,
+        isClickable: false,
+    },
+});
+const cvaLegendItemIndicator = cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
+    variants: {
+        selected: {
+            false: "",
+            true: "border border-black border-opacity-50",
+        },
+    },
+    defaultVariants: {
+        selected: false,
+    },
+});
 
 /**
  * The LegendItem component is used to show form legends.
@@ -96745,28 +96796,8 @@ const Container = tw.div `
  */
 const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxs(Root, { "data-testid": dataTestId, "$disabled": disabled, className: className, "$selected": selected, onClick: handleOnClick, children: [jsx(Indicator, { style: { backgroundColor: color }, "$selected": selected }), label && jsx("p", { children: label })] }));
+    return (jsxs("div", { "data-testid": dataTestId, onClick: handleOnClick, className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), style: { backgroundColor: color } }), label && jsx("p", { children: label })] }));
 };
-const Root = tw.div `
-  inline-flex
-  items-center
-  transition-all
-  ease-in-out
-  duration-200
-  text-neutral-500
-  hover:text-neutral-700
-  text-sm
-  gap-2
-  ${p => (p.$disabled ? tws `text-neutral-300` : p.$selected ? tws `text-black` : "")}
-  ${p => (p.$selected ? tws `font-medium` : null)}
-  ${p => (p.onClick ? tws `cursor-pointer` : tws `cursor-default`)}
-`;
-const Indicator = tw.div `
-  w-3
-  h-3
-  rounded-[50%]
-  ${p => (p.$selected ? tws `border border-black border-opacity-50` : null)}
-`;
 
 /**
  * Create a PieChart with legends based on our current Chart component
@@ -96774,7 +96805,7 @@ const Indicator = tw.div `
  * @param {PieChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
-const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => (jsxs(ChartRoot, { className: className, "data-testid": dataTestId, children: [jsx("div", { children: size === "full" && (jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected, color: item.color }, item.id))) })) }), jsx(Chart, { dataTestId: "pie-chart", showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
+const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsx("div", { children: size === "full" && (jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected, color: item.color }, item.id))) })) }), jsx(Chart, { dataTestId: "pie-chart", showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 }, onClick: evt => {
                 const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
                 if (onClick && clickedEntry) {
                     onClick(clickedEntry);
@@ -96825,13 +96856,13 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
                     },
                 ],
             } })] }));
-const ChartRoot = tw.div `
-  flex
-  flex-direction-col
-  flex-wrap-reverse
-  justify-between
-  items-center
-  h-full
-`;
+const cvaChartRoot = cvaMerge([
+    "flex",
+    "flex-direction-col",
+    "flex-wrap-reverse",
+    "justify-between",
+    "items-center",
+    "h-full",
+]);
 
 export { Chart, Kpi, LegendItem, PieChart };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "0.1.133",
-    "@trackunit/tailwind-styled-components": "0.0.59",
+    "@trackunit/css-class-variance-utilities": "0.0.11",
+    "@trackunit/react-components": "0.1.134",
     "@trackunit/ui-design-tokens": "0.0.74",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",

package/src/Chart/Chart.stories.d.ts

@@ -1,6 +1,5 @@
 import { Story } from "@storybook/react";
 import { ChartProps } from "./Chart";
-import "./Chart.css";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ChartProps>;
 export default _default;
 export declare const Default: Story<ChartProps>;

package/src/KPI/Kpi.stories.d.ts

@@ -1,6 +1,5 @@
 import { Story } from "@storybook/react";
 import { KpiProps } from "./Kpi";
-import "./Kpi.css";
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, KpiProps>;
 export default _default;
 export declare const Default: Story<KpiProps>;

package/src/KPI/Kpi.variants.d.ts

@@ -0,0 +1,9 @@
+export declare const cvaKpi: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaKpiCountContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaKpiDescription: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaKpiCount: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaKpiSuffix: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaKpiContainer: (props?: ({
+    inline?: boolean | null | undefined;
+    showChart?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/LegendItem/LegendItem.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const cvaLegendItem: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    isClickable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaLegendItemIndicator: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;