@trackunit/react-chart-components 2.6.47 → 2.6.49-alpha-7317206cecd.0

package/index.cjs.js

@@ -174,7 +174,7 @@ const EChart = ({ option, style, className, onChartReady, onClick, onEvents, not
     }, [option, notMerge]);
     return jsxRuntime.jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: containerRef, style: style });
 };
-const cvaEChart = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full"]);
+const cvaEChart = cssClassVarianceUtilities.cva({ base: ["w-full", "h-full"] });
 
 /**
  * The Chart component is a wrapper component for ECharts, providing a simplified API for rendering interactive charts.
@@ -229,15 +229,16 @@ const Chart = ({ options, showLoading = false, className, style, onChartReady, o
     return (jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, ref: ref, style: containerStyle, children: showLoading ? (jsxRuntime.jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), loadingOption?.text ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart, { className: className, "data-testid": `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options, renderer: renderer, style: style }), timezoneLabel] })) }));
 };
 
-const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "items-center",
-    "transition-all",
-    "ease-in-out",
-    "duration-200",
-    "text-neutral-600",
-    "hover:text-neutral-900",
-], {
+const cvaLegendItem = cssClassVarianceUtilities.cva({
+    base: [
+        "flex",
+        "items-center",
+        "transition-all",
+        "ease-in-out",
+        "duration-200",
+        "text-neutral-600",
+        "hover:text-neutral-900",
+    ],
     variants: {
         selected: {
             false: "",
@@ -265,9 +266,11 @@ const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
         isClickable: false,
     },
 });
-const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-2.5", "mr-1", "h-2.5", "rounded-[50%]", "flex-none"]);
-const cvaLegendItemLineSwatch = cssClassVarianceUtilities.cvaMerge(["relative", "mr-1", "h-3", "w-5", "flex-none", "overflow-hidden"]);
-const cvaLegendItemLineSvg = cssClassVarianceUtilities.cvaMerge(["h-full", "w-full"]);
+const cvaLegendItemIndicator = cssClassVarianceUtilities.cva({ base: ["w-2.5", "mr-1", "h-2.5", "rounded-[50%]", "flex-none"] });
+const cvaLegendItemLineSwatch = cssClassVarianceUtilities.cva({
+    base: ["relative", "mr-1", "h-3", "w-5", "flex-none", "overflow-hidden"],
+});
+const cvaLegendItemLineSvg = cssClassVarianceUtilities.cva({ base: ["h-full", "w-full"] });
 
 const LINE_SWATCH_WIDTH = 20;
 const LINE_SWATCH_HEIGHT = 12;
@@ -568,7 +571,7 @@ const BarChart = ({ series, loading = false, onClick, className, style, "data-te
                         series: seriesData,
                     }, showLoading: loading, style: { height: "100%", minHeight: "150px", width: "100%" } }) })] }));
 };
-const cvaChartRoot$1 = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center", "h-full"]);
+const cvaChartRoot$1 = cssClassVarianceUtilities.cva({ base: ["flex", "flex-col", "items-center", "h-full"] });
 
 /**
  * Limits the data set to the given limit.
@@ -777,17 +780,12 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
     }
     return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, ref: mergedRef, style: style, children: [jsxRuntime.jsx("div", { className: cvaChartContainer(), children: jsxRuntime.jsx(Chart, { className: cvaChart({ size }), "data-testid": dataTestId ? `chart-${dataTestId}` : undefined, onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsxRuntime.jsx("div", { className: cvaLegend(), "data-testid": "legend", children: limitedData.map((item, index) => (jsxRuntime.jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, "data-testid": `legend-${item.id}`, disabled: (item.value ?? 0) === 0, hideValue: hideLegendValues, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected, unit: unit }, item.id))) }))] }));
 };
-const cvaChartRoot = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "w-full",
-    "h-full",
-    "gap-4",
-    "items-center",
-    "justify-items-stretch",
-    "flex-row",
-]);
-const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["flex-1", "h-full", "justify-end"]);
-const cvaChart = cssClassVarianceUtilities.cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"], {
+const cvaChartRoot = cssClassVarianceUtilities.cva({
+    base: ["flex", "w-full", "h-full", "gap-4", "items-center", "justify-items-stretch", "flex-row"],
+});
+const cvaChartContainer = cssClassVarianceUtilities.cva({ base: ["flex-1", "h-full", "justify-end"] });
+const cvaChart = cssClassVarianceUtilities.cva({
+    base: ["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"],
     variants: {
         size: {
             full: ["min-h-[140px]"],
@@ -798,7 +796,7 @@ const cvaChart = cssClassVarianceUtilities.cvaMerge(["flex-0", "max-w-[200px]",
         size: "full",
     },
 });
-const cvaLegend = cssClassVarianceUtilities.cvaMerge(["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"]);
+const cvaLegend = cssClassVarianceUtilities.cva({ base: ["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"] });
 
 exports.BarChart = BarChart;
 exports.Chart = Chart;

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { toDateUtil } from '@trackunit/date-and-time-utils';
 import { useLocale, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 import { DEFAULT_CHART_COLORS, CHART_STATUS_COLORS, fontFamily, DEFAULT_CHART_OTHER } from '@trackunit/ui-design-tokens';
@@ -153,7 +153,7 @@ const EChart = ({ option, style, className, onChartReady, onClick, onEvents, not
     }, [option, notMerge]);
     return jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: containerRef, style: style });
 };
-const cvaEChart = cvaMerge(["w-full", "h-full"]);
+const cvaEChart = cva({ base: ["w-full", "h-full"] });
 
 /**
  * The Chart component is a wrapper component for ECharts, providing a simplified API for rendering interactive charts.
@@ -208,15 +208,16 @@ const Chart = ({ options, showLoading = false, className, style, onChartReady, o
     return (jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, ref: ref, style: containerStyle, children: showLoading ? (jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), loadingOption?.text ? (jsx(Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, "data-testid": `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options, renderer: renderer, style: style }), timezoneLabel] })) }));
 };
 
-const cvaLegendItem = cvaMerge([
-    "flex",
-    "items-center",
-    "transition-all",
-    "ease-in-out",
-    "duration-200",
-    "text-neutral-600",
-    "hover:text-neutral-900",
-], {
+const cvaLegendItem = cva({
+    base: [
+        "flex",
+        "items-center",
+        "transition-all",
+        "ease-in-out",
+        "duration-200",
+        "text-neutral-600",
+        "hover:text-neutral-900",
+    ],
     variants: {
         selected: {
             false: "",
@@ -244,9 +245,11 @@ const cvaLegendItem = cvaMerge([
         isClickable: false,
     },
 });
-const cvaLegendItemIndicator = cvaMerge(["w-2.5", "mr-1", "h-2.5", "rounded-[50%]", "flex-none"]);
-const cvaLegendItemLineSwatch = cvaMerge(["relative", "mr-1", "h-3", "w-5", "flex-none", "overflow-hidden"]);
-const cvaLegendItemLineSvg = cvaMerge(["h-full", "w-full"]);
+const cvaLegendItemIndicator = cva({ base: ["w-2.5", "mr-1", "h-2.5", "rounded-[50%]", "flex-none"] });
+const cvaLegendItemLineSwatch = cva({
+    base: ["relative", "mr-1", "h-3", "w-5", "flex-none", "overflow-hidden"],
+});
+const cvaLegendItemLineSvg = cva({ base: ["h-full", "w-full"] });
 
 const LINE_SWATCH_WIDTH = 20;
 const LINE_SWATCH_HEIGHT = 12;
@@ -547,7 +550,7 @@ const BarChart = ({ series, loading = false, onClick, className, style, "data-te
                         series: seriesData,
                     }, showLoading: loading, style: { height: "100%", minHeight: "150px", width: "100%" } }) })] }));
 };
-const cvaChartRoot$1 = cvaMerge(["flex", "flex-col", "items-center", "h-full"]);
+const cvaChartRoot$1 = cva({ base: ["flex", "flex-col", "items-center", "h-full"] });
 
 /**
  * Limits the data set to the given limit.
@@ -756,17 +759,12 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
     }
     return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, ref: mergedRef, style: style, children: [jsx("div", { className: cvaChartContainer(), children: jsx(Chart, { className: cvaChart({ size }), "data-testid": dataTestId ? `chart-${dataTestId}` : undefined, onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsx("div", { className: cvaLegend(), "data-testid": "legend", children: limitedData.map((item, index) => (jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, "data-testid": `legend-${item.id}`, disabled: (item.value ?? 0) === 0, hideValue: hideLegendValues, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected, unit: unit }, item.id))) }))] }));
 };
-const cvaChartRoot = cvaMerge([
-    "flex",
-    "w-full",
-    "h-full",
-    "gap-4",
-    "items-center",
-    "justify-items-stretch",
-    "flex-row",
-]);
-const cvaChartContainer = cvaMerge(["flex-1", "h-full", "justify-end"]);
-const cvaChart = cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"], {
+const cvaChartRoot = cva({
+    base: ["flex", "w-full", "h-full", "gap-4", "items-center", "justify-items-stretch", "flex-row"],
+});
+const cvaChartContainer = cva({ base: ["flex-1", "h-full", "justify-end"] });
+const cvaChart = cva({
+    base: ["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"],
     variants: {
         size: {
             full: ["min-h-[140px]"],
@@ -777,6 +775,6 @@ const cvaChart = cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-se
         size: "full",
     },
 });
-const cvaLegend = cvaMerge(["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"]);
+const cvaLegend = cva({ base: ["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"] });
 
 export { BarChart, Chart, DonutChart, EChart, LegendItem, useChartColor, useChartNumberFormat };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "2.6.47",
+  "version": "2.6.49-alpha-7317206cecd.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "echarts": "5.6.0",
-    "@trackunit/date-and-time-utils": "1.14.30",
-    "@trackunit/react-date-and-time-hooks": "2.6.46",
-    "@trackunit/ui-design-tokens": "1.15.19",
-    "@trackunit/shared-utils": "1.16.32",
-    "@trackunit/css-class-variance-utilities": "1.14.29",
-    "@trackunit/react-components": "2.13.0"
+    "@trackunit/date-and-time-utils": "1.14.32-alpha-7317206cecd.0",
+    "@trackunit/react-date-and-time-hooks": "2.6.48-alpha-7317206cecd.0",
+    "@trackunit/ui-design-tokens": "1.15.21-alpha-7317206cecd.0",
+    "@trackunit/shared-utils": "1.16.34-alpha-7317206cecd.0",
+    "@trackunit/css-class-variance-utilities": "2.0.1-alpha-7317206cecd.0",
+    "@trackunit/react-components": "2.13.2-alpha-7317206cecd.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

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

@@ -1,8 +1,73 @@
-export declare const cvaLegendItem: (props?: ({
-    selected?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    isClickable?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaLegendItemIndicator: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaLegendItemLineSwatch: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaLegendItemLineSvg: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaLegendItem: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        selected: {
+            false: string;
+            true: string[];
+        };
+        disabled: {
+            false: string;
+            true: string[];
+        };
+        isClickable: {
+            false: string;
+            true: string[];
+        };
+    };
+    defaultVariants: {
+        disabled: false;
+        selected: false;
+        isClickable: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        selected: {
+            false: string;
+            true: string[];
+        };
+        disabled: {
+            false: string;
+            true: string[];
+        };
+        isClickable: {
+            false: string;
+            true: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "disabled" | "selected" | "isClickable"> & {
+        disabled: false;
+        selected: false;
+        isClickable: false;
+    };
+}, {
+    selected: {
+        false: string;
+        true: string[];
+    };
+    disabled: {
+        false: string;
+        true: string[];
+    };
+    isClickable: {
+        false: string;
+        true: string[];
+    };
+}>;
+export declare const cvaLegendItemIndicator: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaLegendItemLineSwatch: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaLegendItemLineSvg: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;