@trackunit/react-date-and-time-components 2.6.48 → 2.6.49

package/index.cjs.js

@@ -392,7 +392,8 @@ const DayRangeSelectOptions = ({ "data-testid": dataTestId, temporalPeriods, sel
 };
 const stringifyTemporalPeriod = (temporalPeriod) => `${temporalPeriod.direction}-${temporalPeriod.count}-${temporalPeriod.unit}`;
 
-const cvaTriggerButton = cssClassVarianceUtilities.cvaMerge(["justify-start"], {
+const cvaTriggerButton = cssClassVarianceUtilities.cva({
+    base: ["justify-start"],
     variants: {
         active: {
             true: "text-primary-600 hover:text-primary-700 active:text-primary-800 focus:text-primary-800",
@@ -790,7 +791,8 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
                 } })] }));
 };
 
-const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge(["flex", "group/timeline"], {
+const cvaTimelineElement = cssClassVarianceUtilities.cva({
+    base: ["flex", "group/timeline"],
     variants: {
         selected: {
             true: "bg-info-50 rounded-[4px]",
@@ -802,27 +804,20 @@ const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge(["flex", "group/ti
         },
     },
 });
-const cvaDotWrapper = cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "flex",
-    "flex-col",
-    "items-center",
-    "justify-items-center",
-    "ml-2",
-    "mr-2",
-    "pt-2",
-    "min-w-6",
-]);
-const cvaLine = cssClassVarianceUtilities.cvaMerge([
-    "absolute",
-    "top-0",
-    "w-px",
-    "h-full",
-    "border-l",
-    "border-neutral-300",
-    "group-first/timeline:top-3.5",
-    "group-last/timeline:h-4",
-], {
+const cvaDotWrapper = cssClassVarianceUtilities.cva({
+    base: ["relative", "flex", "flex-col", "items-center", "justify-items-center", "ml-2", "mr-2", "pt-2", "min-w-6"],
+});
+const cvaLine = cssClassVarianceUtilities.cva({
+    base: [
+        "absolute",
+        "top-0",
+        "w-px",
+        "h-full",
+        "border-l",
+        "border-neutral-300",
+        "group-first/timeline:top-3.5",
+        "group-last/timeline:h-4",
+    ],
     variants: {
         lineStyle: {
             dashed: "border-dashed",
@@ -830,19 +825,22 @@ const cvaLine = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaCustomDot = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "items-center",
-    "justify-center",
-    "w-5",
-    "h-5",
-    "bg-white",
-    "rounded-full",
-    "border",
-    "border-white",
-    "z-[2]",
-]);
-const cvaToggleBtnIcon = cssClassVarianceUtilities.cvaMerge(["mr-1", "rounded-lg", "transition-transform", "duration-300", "cursor-pointer"], {
+const cvaCustomDot = cssClassVarianceUtilities.cva({
+    base: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "w-5",
+        "h-5",
+        "bg-white",
+        "rounded-full",
+        "border",
+        "border-white",
+        "z-[2]",
+    ],
+});
+const cvaToggleBtnIcon = cssClassVarianceUtilities.cva({
+    base: ["mr-1", "rounded-lg", "transition-transform", "duration-300", "cursor-pointer"],
     variants: {
         rotated: {
             true: "rotate-180",
@@ -850,7 +848,8 @@ const cvaToggleBtnIcon = cssClassVarianceUtilities.cvaMerge(["mr-1", "rounded-lg
         },
     },
 });
-const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge(["min-h-6", "content-center"], {
+const cvaTimelineElementTime = cssClassVarianceUtilities.cva({
+    base: ["min-h-6", "content-center"],
     variants: {
         width: {
             large: "min-w-16",
@@ -988,7 +987,7 @@ const TimelineElement = ({ date, children, className, style, "data-testid": data
             setIsHovered(false);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: style, children: [renderDate(formattedDate, locale), jsxRuntime.jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsxRuntime.jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxRuntime.jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: style, children: [renderDate(formattedDate, locale), jsxRuntime.jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsxRuntime.jsx("div", { className: cvaLine({ lineStyle }), "data-testid": `${dataTestId}-line` })] }), jsxRuntime.jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
 const renderDate = (formattedDate, locale) => {
     if (!formattedDate) {

package/index.esm.js

@@ -8,7 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import { Tooltip, Button, MenuItem, Icon, Popover, PopoverTrigger, PopoverContent, MenuContent, MenuDivider, Card, Text } from '@trackunit/react-components';
 import Calendar from 'react-calendar';
 import { Search } from '@trackunit/react-form-components';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { lowerCase } from 'string-ts';
 
 var defaultTranslations = {
@@ -390,7 +390,8 @@ const DayRangeSelectOptions = ({ "data-testid": dataTestId, temporalPeriods, sel
 };
 const stringifyTemporalPeriod = (temporalPeriod) => `${temporalPeriod.direction}-${temporalPeriod.count}-${temporalPeriod.unit}`;
 
-const cvaTriggerButton = cvaMerge(["justify-start"], {
+const cvaTriggerButton = cva({
+    base: ["justify-start"],
     variants: {
         active: {
             true: "text-primary-600 hover:text-primary-700 active:text-primary-800 focus:text-primary-800",
@@ -788,7 +789,8 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled = false
                 } })] }));
 };
 
-const cvaTimelineElement = cvaMerge(["flex", "group/timeline"], {
+const cvaTimelineElement = cva({
+    base: ["flex", "group/timeline"],
     variants: {
         selected: {
             true: "bg-info-50 rounded-[4px]",
@@ -800,27 +802,20 @@ const cvaTimelineElement = cvaMerge(["flex", "group/timeline"], {
         },
     },
 });
-const cvaDotWrapper = cvaMerge([
-    "relative",
-    "flex",
-    "flex-col",
-    "items-center",
-    "justify-items-center",
-    "ml-2",
-    "mr-2",
-    "pt-2",
-    "min-w-6",
-]);
-const cvaLine = cvaMerge([
-    "absolute",
-    "top-0",
-    "w-px",
-    "h-full",
-    "border-l",
-    "border-neutral-300",
-    "group-first/timeline:top-3.5",
-    "group-last/timeline:h-4",
-], {
+const cvaDotWrapper = cva({
+    base: ["relative", "flex", "flex-col", "items-center", "justify-items-center", "ml-2", "mr-2", "pt-2", "min-w-6"],
+});
+const cvaLine = cva({
+    base: [
+        "absolute",
+        "top-0",
+        "w-px",
+        "h-full",
+        "border-l",
+        "border-neutral-300",
+        "group-first/timeline:top-3.5",
+        "group-last/timeline:h-4",
+    ],
     variants: {
         lineStyle: {
             dashed: "border-dashed",
@@ -828,19 +823,22 @@ const cvaLine = cvaMerge([
         },
     },
 });
-const cvaCustomDot = cvaMerge([
-    "flex",
-    "items-center",
-    "justify-center",
-    "w-5",
-    "h-5",
-    "bg-white",
-    "rounded-full",
-    "border",
-    "border-white",
-    "z-[2]",
-]);
-const cvaToggleBtnIcon = cvaMerge(["mr-1", "rounded-lg", "transition-transform", "duration-300", "cursor-pointer"], {
+const cvaCustomDot = cva({
+    base: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "w-5",
+        "h-5",
+        "bg-white",
+        "rounded-full",
+        "border",
+        "border-white",
+        "z-[2]",
+    ],
+});
+const cvaToggleBtnIcon = cva({
+    base: ["mr-1", "rounded-lg", "transition-transform", "duration-300", "cursor-pointer"],
     variants: {
         rotated: {
             true: "rotate-180",
@@ -848,7 +846,8 @@ const cvaToggleBtnIcon = cvaMerge(["mr-1", "rounded-lg", "transition-transform",
         },
     },
 });
-const cvaTimelineElementTime = cvaMerge(["min-h-6", "content-center"], {
+const cvaTimelineElementTime = cva({
+    base: ["min-h-6", "content-center"],
     variants: {
         width: {
             large: "min-w-16",
@@ -986,7 +985,7 @@ const TimelineElement = ({ date, children, className, style, "data-testid": data
             setIsHovered(false);
         }
     };
-    return (jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: style, children: [renderDate(formattedDate, locale), jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsx("div", { className: cvaLine({ lineStyle }) })] }), jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
+    return (jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: style, children: [renderDate(formattedDate, locale), jsxs("div", { className: cvaDotWrapper(), children: [renderDot(customDot, isHovered, selected), jsx("div", { className: cvaLine({ lineStyle }), "data-testid": `${dataTestId}-line` })] }), jsxs("div", { className: "pb-2 pt-2", children: [renderHeader(header, dataTestId), renderChildren(children), renderActionButton(actionButton)] })] }));
 };
 const renderDate = (formattedDate, locale) => {
     if (!formattedDate) {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "2.6.48",
+  "version": "2.6.49",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.13.0",
-    "@trackunit/date-and-time-utils": "1.14.30",
-    "@trackunit/react-date-and-time-hooks": "2.6.46",
-    "@trackunit/css-class-variance-utilities": "1.14.29",
-    "@trackunit/ui-icons": "1.14.28",
-    "@trackunit/shared-utils": "1.16.32",
-    "@trackunit/i18n-library-translation": "2.4.41",
-    "@trackunit/react-form-components": "2.6.48",
+    "@trackunit/react-components": "2.13.1",
+    "@trackunit/date-and-time-utils": "1.14.31",
+    "@trackunit/react-date-and-time-hooks": "2.6.47",
+    "@trackunit/css-class-variance-utilities": "2.0.0",
+    "@trackunit/ui-icons": "1.14.29",
+    "@trackunit/shared-utils": "1.16.33",
+    "@trackunit/i18n-library-translation": "2.4.42",
+    "@trackunit/react-form-components": "2.6.49",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayRangeSelect/DayRangeSelect.variants.d.ts

@@ -1,3 +1,22 @@
-export declare const cvaTriggerButton: (props?: ({
-    active?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaTriggerButton: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        active: {
+            true: string;
+            false: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        active: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    active: {
+        true: string;
+        false: string;
+    };
+}>;

package/src/Timeline/Timeline.variants.d.ts

@@ -1,15 +1,115 @@
-export declare const cvaTimelineElement: (props?: ({
-    selected?: boolean | null | undefined;
-    hoverBehavior?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaDotWrapper: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaLine: (props?: ({
-    lineStyle?: "solid" | "dashed" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaCustomDot: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaToggleBtnIcon: (props?: ({
-    rotated?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaTimelineElementTime: (props?: ({
-    width?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaTimelineElement: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        selected: {
+            true: string;
+            false: string;
+        };
+        hoverBehavior: {
+            true: string;
+            false: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        selected: {
+            true: string;
+            false: string;
+        };
+        hoverBehavior: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    selected: {
+        true: string;
+        false: string;
+    };
+    hoverBehavior: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const cvaDotWrapper: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaLine: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        lineStyle: {
+            dashed: string;
+            solid: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        lineStyle: {
+            dashed: string;
+            solid: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    lineStyle: {
+        dashed: string;
+        solid: string;
+    };
+}>;
+export declare const cvaCustomDot: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaToggleBtnIcon: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        rotated: {
+            true: string;
+            false: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        rotated: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    rotated: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const cvaTimelineElementTime: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        width: {
+            large: string;
+            medium: string;
+            small: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        width: {
+            large: string;
+            medium: string;
+            small: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    width: {
+        large: string;
+        medium: string;
+        small: string;
+    };
+}>;