@trackunit/react-widgets 3.6.47 → 3.6.48

package/index.cjs.js

@@ -195,7 +195,8 @@ const useWidgetListItemClickAnalytics = ({ pageName, }) => {
     return react.useMemo(() => ({ trackWidgetListItemClick }), [trackWidgetListItemClick]);
 };
 
-const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
+const cvaWidgetContent = cssClassVarianceUtilities.cva({
+    base: ["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"],
     variants: {
         layout: {
             none: "",
@@ -311,7 +312,8 @@ const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", p
     return (jsxRuntime.jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, ref: ref, style: style, children: children }));
 };
 
-const cvaWidgetEditBodyContainer = cssClassVarianceUtilities.cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
+const cvaWidgetEditBodyContainer = cssClassVarianceUtilities.cva({
+    base: ["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"],
     variants: {
         direction: {
             row: "flex-row",
@@ -350,7 +352,8 @@ const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCanc
                         }, children: t("widget.edit.save") })] })] }));
 };
 
-const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "flex", "flex-col"], {
+const cvaWidgetKPI = cssClassVarianceUtilities.cva({
+    base: ["w-full", "h-full", "flex", "flex-col"],
     variants: {
         variant: {
             small: ["px-3"],
@@ -362,25 +365,24 @@ const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "fl
         variant: "default",
     },
 });
-const cvaWidgetKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "place-items-end", "gap-2", "min-h-[1.7lh]"]);
-const cvaWidgetKPITitleText = cssClassVarianceUtilities.cvaMerge([
-    "leading-tight",
-    "!line-clamp-2",
-    "!overflow-hidden",
-    "flex",
-    "items-start",
-    "text-sm",
-    "font-medium",
-    "text-neutral-500",
-]);
-const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge([
-    "truncate",
-    "whitespace-nowrap",
-    "text-3xl",
-    "font-medium",
-    "!leading-none",
-]);
-const cvaWidgetKPIContentLayout = cssClassVarianceUtilities.cvaMerge(["flex", "flex-1"], {
+const cvaWidgetKPIHeader = cssClassVarianceUtilities.cva({ base: ["flex", "flex-row", "place-items-end", "gap-2", "min-h-[1.7lh]"] });
+const cvaWidgetKPITitleText = cssClassVarianceUtilities.cva({
+    base: [
+        "leading-tight",
+        "!line-clamp-2",
+        "!overflow-hidden",
+        "flex",
+        "items-start",
+        "text-sm",
+        "font-medium",
+        "text-neutral-500",
+    ],
+});
+const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cva({
+    base: ["truncate", "whitespace-nowrap", "text-3xl", "font-medium", "!leading-none"],
+});
+const cvaWidgetKPIContentLayout = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-1"],
     variants: {
         interactive: {
             true: ["flex-row"],
@@ -391,7 +393,8 @@ const cvaWidgetKPIContentLayout = cssClassVarianceUtilities.cvaMerge(["flex", "f
         interactive: false,
     },
 });
-const cvaWidgetKPIBodyLayout = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "flex-1"], {
+const cvaWidgetKPIBodyLayout = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col", "flex-1"],
     variants: {
         interactive: {
             true: ["min-w-0"],

package/index.esm.js

@@ -4,7 +4,7 @@ import { EmptyState, Card, CardHeader, IconButton, Icon, CardBody, CardFooter, B
 import { WidgetConfigRuntime, createEvent } from '@trackunit/iris-app-runtime-core';
 import { useAnalytics } from '@trackunit/react-core-hooks';
 import { useMemo, useCallback, useState } from 'react';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { twMerge } from 'tailwind-merge';
 
 var defaultTranslations = {
@@ -193,7 +193,8 @@ const useWidgetListItemClickAnalytics = ({ pageName, }) => {
     return useMemo(() => ({ trackWidgetListItemClick }), [trackWidgetListItemClick]);
 };
 
-const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"], {
+const cvaWidgetContent = cva({
+    base: ["@container", "overflow-hidden", "h-full", "w-full", "bg-white", "grid"],
     variants: {
         layout: {
             none: "",
@@ -309,7 +310,8 @@ const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", p
     return (jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, ref: ref, style: style, children: children }));
 };
 
-const cvaWidgetEditBodyContainer = cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
+const cvaWidgetEditBodyContainer = cva({
+    base: ["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"],
     variants: {
         direction: {
             row: "flex-row",
@@ -348,7 +350,8 @@ const WidgetEditBody = ({ children, "data-testid": dataTestId, className, onCanc
                         }, children: t("widget.edit.save") })] })] }));
 };
 
-const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col"], {
+const cvaWidgetKPI = cva({
+    base: ["w-full", "h-full", "flex", "flex-col"],
     variants: {
         variant: {
             small: ["px-3"],
@@ -360,25 +363,24 @@ const cvaWidgetKPI = cvaMerge(["w-full", "h-full", "flex", "flex-col"], {
         variant: "default",
     },
 });
-const cvaWidgetKPIHeader = cvaMerge(["flex", "flex-row", "place-items-end", "gap-2", "min-h-[1.7lh]"]);
-const cvaWidgetKPITitleText = cvaMerge([
-    "leading-tight",
-    "!line-clamp-2",
-    "!overflow-hidden",
-    "flex",
-    "items-start",
-    "text-sm",
-    "font-medium",
-    "text-neutral-500",
-]);
-const cvaWidgetKPIvalueText = cvaMerge([
-    "truncate",
-    "whitespace-nowrap",
-    "text-3xl",
-    "font-medium",
-    "!leading-none",
-]);
-const cvaWidgetKPIContentLayout = cvaMerge(["flex", "flex-1"], {
+const cvaWidgetKPIHeader = cva({ base: ["flex", "flex-row", "place-items-end", "gap-2", "min-h-[1.7lh]"] });
+const cvaWidgetKPITitleText = cva({
+    base: [
+        "leading-tight",
+        "!line-clamp-2",
+        "!overflow-hidden",
+        "flex",
+        "items-start",
+        "text-sm",
+        "font-medium",
+        "text-neutral-500",
+    ],
+});
+const cvaWidgetKPIvalueText = cva({
+    base: ["truncate", "whitespace-nowrap", "text-3xl", "font-medium", "!leading-none"],
+});
+const cvaWidgetKPIContentLayout = cva({
+    base: ["flex", "flex-1"],
     variants: {
         interactive: {
             true: ["flex-row"],
@@ -389,7 +391,8 @@ const cvaWidgetKPIContentLayout = cvaMerge(["flex", "flex-1"], {
         interactive: false,
     },
 });
-const cvaWidgetKPIBodyLayout = cvaMerge(["flex", "flex-col", "flex-1"], {
+const cvaWidgetKPIBodyLayout = cva({
+    base: ["flex", "flex-col", "flex-1"],
     variants: {
         interactive: {
             true: ["min-w-0"],

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@trackunit/react-widgets",
-  "version": "3.6.47",
+  "version": "3.6.48",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.13.0",
-    "@trackunit/react-core-hooks": "1.21.41",
-    "@trackunit/iris-app-runtime-core": "1.18.41",
-    "@trackunit/css-class-variance-utilities": "1.14.29",
-    "@trackunit/ui-design-tokens": "1.15.19",
-    "@trackunit/ui-icons": "1.14.28",
-    "@trackunit/i18n-library-translation": "2.4.41",
+    "@trackunit/react-components": "2.13.1",
+    "@trackunit/react-core-hooks": "1.21.42",
+    "@trackunit/iris-app-runtime-core": "1.18.42",
+    "@trackunit/css-class-variance-utilities": "2.0.0",
+    "@trackunit/ui-design-tokens": "1.15.20",
+    "@trackunit/ui-icons": "1.14.29",
+    "@trackunit/i18n-library-translation": "2.4.42",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

package/src/Widget/WidgetContent.variants.d.ts

@@ -1,6 +1,116 @@
-export declare const cvaWidgetContent: (props?: ({
-    layout?: "none" | "top-fill" | "fill-bottom" | "top-fill-bottom" | null | undefined;
-    centering?: "none" | "centered" | null | undefined;
-    gap?: "none" | "responsive" | null | undefined;
-    padding?: "none" | "responsive" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaWidgetContent: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        layout: {
+            none: string;
+            "top-fill": string[];
+            "fill-bottom": string[];
+            "top-fill-bottom": string[];
+        };
+        centering: {
+            none: string;
+            centered: string;
+        };
+        gap: {
+            responsive: string;
+            none: string;
+        };
+        padding: {
+            responsive: string;
+            none: string;
+        };
+    };
+    defaultVariants: {
+        layout: "none";
+        centering: "none";
+        gap: "none";
+        padding: "none";
+    };
+    compoundVariants: ({
+        layout: "none";
+        centering: "centered";
+        class: "place-items-center"[];
+        padding?: undefined;
+    } | {
+        layout: "top-fill";
+        centering: "centered";
+        class: ("*:nth-2:grid" | "*:nth-2:place-items-center")[];
+        padding?: undefined;
+    } | {
+        layout: "fill-bottom";
+        centering: "centered";
+        class: ("*:nth-1:grid" | "*:nth-1:place-items-center")[];
+        padding?: undefined;
+    } | {
+        layout: "top-fill-bottom";
+        centering: "centered";
+        class: ("*:nth-2:grid" | "*:nth-2:place-items-center")[];
+        padding?: undefined;
+    } | {
+        layout: "none";
+        padding: "responsive";
+        class: "p-4"[];
+        centering?: undefined;
+    } | {
+        layout: "top-fill";
+        padding: "responsive";
+        class: "*:nth-2:p-4"[];
+        centering?: undefined;
+    } | {
+        layout: "fill-bottom";
+        padding: "responsive";
+        class: "*:nth-1:p-4"[];
+        centering?: undefined;
+    } | {
+        layout: "top-fill-bottom";
+        padding: "responsive";
+        class: "*:nth-2:p-4"[];
+        centering?: undefined;
+    })[];
+}, "defaultVariants"> & {
+    variants: {
+        layout: {
+            none: string;
+            "top-fill": string[];
+            "fill-bottom": string[];
+            "top-fill-bottom": string[];
+        };
+        centering: {
+            none: string;
+            centered: string;
+        };
+        gap: {
+            responsive: string;
+            none: string;
+        };
+        padding: {
+            responsive: string;
+            none: string;
+        };
+    };
+    defaultVariants: Omit<{}, "layout" | "centering" | "gap" | "padding"> & {
+        layout: "none";
+        centering: "none";
+        gap: "none";
+        padding: "none";
+    };
+}, {
+    layout: {
+        none: string;
+        "top-fill": string[];
+        "fill-bottom": string[];
+        "top-fill-bottom": string[];
+    };
+    centering: {
+        none: string;
+        centered: string;
+    };
+    gap: {
+        responsive: string;
+        none: string;
+    };
+    padding: {
+        responsive: string;
+        none: string;
+    };
+}>;

package/src/Widget/WidgetEditBody.variants.d.ts

@@ -1,3 +1,33 @@
-export declare const cvaWidgetEditBodyContainer: (props?: ({
-    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaWidgetEditBodyContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        direction: {
+            row: string;
+            "row-reverse": string;
+            column: string;
+            "column-reverse": string;
+        };
+    };
+    defaultVariants: {
+        direction: "column";
+    };
+}, "defaultVariants"> & {
+    variants: {
+        direction: {
+            row: string;
+            "row-reverse": string;
+            column: string;
+            "column-reverse": string;
+        };
+    };
+    defaultVariants: Omit<{}, "direction"> & {
+        direction: "column";
+    };
+}, {
+    direction: {
+        row: string;
+        "row-reverse": string;
+        column: string;
+        "column-reverse": string;
+    };
+}>;

package/src/WidgetKPI/WidgetKPI.variants.d.ts

@@ -1,12 +1,102 @@
-export declare const cvaWidgetKPI: (props?: ({
-    variant?: "default" | "small" | "condensed" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaWidgetKPIHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaWidgetKPITitleText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaWidgetKPIvalueText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaWidgetKPIContentLayout: (props?: ({
-    interactive?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaWidgetKPIBodyLayout: (props?: ({
-    interactive?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaWidgetKPI: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        variant: {
+            small: string[];
+            condensed: string[];
+            default: string[];
+        };
+    };
+    defaultVariants: {
+        variant: "default";
+    };
+}, "defaultVariants"> & {
+    variants: {
+        variant: {
+            small: string[];
+            condensed: string[];
+            default: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "variant"> & {
+        variant: "default";
+    };
+}, {
+    variant: {
+        small: string[];
+        condensed: string[];
+        default: string[];
+    };
+}>;
+export declare const cvaWidgetKPIHeader: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaWidgetKPITitleText: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaWidgetKPIvalueText: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaWidgetKPIContentLayout: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        interactive: {
+            true: string[];
+            false: string[];
+        };
+    };
+    defaultVariants: {
+        interactive: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        interactive: {
+            true: string[];
+            false: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "interactive"> & {
+        interactive: false;
+    };
+}, {
+    interactive: {
+        true: string[];
+        false: string[];
+    };
+}>;
+export declare const cvaWidgetKPIBodyLayout: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        interactive: {
+            true: string[];
+            false: never[];
+        };
+    };
+    defaultVariants: {
+        interactive: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        interactive: {
+            true: string[];
+            false: never[];
+        };
+    };
+    defaultVariants: Omit<{}, "interactive"> & {
+        interactive: false;
+    };
+}, {
+    interactive: {
+        true: string[];
+        false: never[];
+    };
+}>;