@trackunit/react-date-and-time-components 1.27.0 → 1.27.2

package/index.cjs.js

@@ -124,7 +124,7 @@ const MS_PER_HOUR = 60 * 60 * 1000;
  * ```
  * @param {DateTimeProps} props - The props for the DateTime component
  */
-const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
+const DateTime = ({ value, format, className, style, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
     const { t } = useTranslation();
     const locale = reactDateAndTimeHooks.useLocale();
     const nowDate = react.useMemo(() => new Date(), []);
@@ -141,7 +141,7 @@ const DateTime = ({ value, format, className, fromNow = false, withTitle = false
     const dateValue = react.useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
-    return (jsxRuntime.jsx("time", { ...rest, className: className || subtle ? tailwindMerge.twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, ref: ref, title: titleDateTime, children: dateValue }));
+    return (jsxRuntime.jsx("time", { ...rest, className: className || subtle ? tailwindMerge.twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, ref: ref, style: style, title: titleDateTime, children: dateValue }));
 };
 
 /**
@@ -202,10 +202,10 @@ const useCalculateDateRange = () => {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, ref, }) => {
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, style, "data-testid": dataTestId, ref, }) => {
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, ref: ref, children: jsxRuntime.jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
                 if (value) {
                     onDaySelect?.(value);
                 }
@@ -266,7 +266,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
     const [newRange, setNewRange] = react.useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = reactDateAndTimeHooks.useDateAndTime();
@@ -308,7 +308,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
             onClose();
         }
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx(Calendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
                     if (Array.isArray(value) && value[0] && value[1]) {
                         handleOnRangeSelect({ start: value[0], end: value[1] });
                     }
@@ -871,8 +871,10 @@ const ITEMS_PER_PAGE = 20;
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }) => {
+const Timeline = ({ className, style, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }) => {
     const ref = react.useRef(null);
+    const loadMoreAnimationFrameRef = react.useRef(null);
+    const loadMoreTimeoutRef = react.useRef(null);
     const [isOpen, setIsOpen] = react.useState(false);
     const [visibleCount, setVisibleCount] = react.useState(ITEMS_PER_PAGE);
     const [isLoadingMore, setIsLoadingMore] = react.useState(false);
@@ -893,17 +895,29 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
             ref.current.style.maxHeight = isOpen ? `${ref.current.scrollHeight}px` : "0px";
         }
     }, [isOpen, visibleCount]);
+    react.useEffect(() => {
+        return () => {
+            if (loadMoreAnimationFrameRef.current !== null) {
+                cancelAnimationFrame(loadMoreAnimationFrameRef.current);
+            }
+            if (loadMoreTimeoutRef.current !== null) {
+                clearTimeout(loadMoreTimeoutRef.current);
+            }
+        };
+    }, []);
     const loadMoreItems = react.useCallback(() => {
         if (isLoadingMore || visibleCount >= middleChildren.length) {
             return;
         }
         setIsLoadingMore(true);
         // Use requestAnimationFrame to avoid layout thrashing
-        requestAnimationFrame(() => {
+        loadMoreAnimationFrameRef.current = requestAnimationFrame(() => {
+            loadMoreAnimationFrameRef.current = null;
             const scrollPos = ref.current?.scrollTop ?? 0;
             setVisibleCount(prev => Math.min(prev + ITEMS_PER_PAGE, middleChildren.length));
             // After state update, preserve scroll position
-            setTimeout(() => {
+            loadMoreTimeoutRef.current = setTimeout(() => {
+                loadMoreTimeoutRef.current = null;
                 if (ref.current) {
                     ref.current.scrollTop = scrollPos;
                 }
@@ -936,7 +950,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         const { date, dateRange, showTime } = dateHeader;
         return (jsxRuntime.jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactComponents.Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsxRuntime.jsx(reactComponents.Text, { className: "text-neutral-500", size: "medium", type: "span", weight: "thick", children: ` (${dateAndTimeUtils.timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
-    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, children: [renderDateHeader(), customHeader !== undefined && customHeader !== null ? jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsxRuntime.jsx("div", { className: "flex justify-center py-2", onClick: e => {
+    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, style: style, children: [renderDateHeader(), customHeader !== undefined && customHeader !== null ? (jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: customHeader })) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsxRuntime.jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsxRuntime.jsx("div", { className: "flex justify-center py-2", onClick: e => {
                                     e.stopPropagation(); // Prevent parent handlers from firing
                                     loadMoreItems();
                                 }, children: jsxRuntime.jsx(reactComponents.Text, { className: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
@@ -949,7 +963,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
+const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
     const [isHovered, setIsHovered] = react.useState(false);
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const locale = reactDateAndTimeHooks.useLocale();
@@ -964,7 +978,7 @@ const TimelineElement = ({ date, children, className, "data-testid": dataTestId
             setIsHovered(false);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 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 }) })] }), 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

@@ -122,7 +122,7 @@ const MS_PER_HOUR = 60 * 60 * 1000;
  * ```
  * @param {DateTimeProps} props - The props for the DateTime component
  */
-const DateTime = ({ value, format, className, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
+const DateTime = ({ value, format, className, style, fromNow = false, withTitle = false, titleFormat, timezone, "data-testid": dataTestId, subtle = false, ref, ...rest }) => {
     const { t } = useTranslation();
     const locale = useLocale();
     const nowDate = useMemo(() => new Date(), []);
@@ -139,7 +139,7 @@ const DateTime = ({ value, format, className, fromNow = false, withTitle = false
     const dateValue = useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
-    return (jsx("time", { ...rest, className: className || subtle ? twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, ref: ref, title: titleDateTime, children: dateValue }));
+    return (jsx("time", { ...rest, className: className || subtle ? twMerge(subtle ? "text-neutral-600" : undefined, className) : undefined, "data-testid": dataTestId, dateTime: newDateTime, ref: ref, style: style, title: titleDateTime, children: dateValue }));
 };
 
 /**
@@ -200,10 +200,10 @@ const useCalculateDateRange = () => {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, ref, }) => {
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, style, "data-testid": dataTestId, ref, }) => {
     const { subtract } = useDateAndTime();
     const calculateDateRange = useCalculateDateRange();
-    return (jsx("div", { "data-testid": dataTestId, ref: ref, children: jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+    return (jsx("div", { "data-testid": dataTestId, ref: ref, style: style, children: jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
                 if (value) {
                     onDaySelect?.(value);
                 }
@@ -264,7 +264,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
+const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }) => {
     const [newRange, setNewRange] = useState(selectedDays ?? { start: undefined, end: undefined });
     const [t] = useTranslation();
     const { subtract } = useDateAndTime();
@@ -306,7 +306,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
             onClose();
         }
     }, [onRangeSelect, newRange, onClose]);
-    return (jsxs("div", { className: twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
+    return (jsxs("div", { className: twMerge("flex", "w-min", "flex-col", "overflow-hidden", "rounded-md", "border", "border-neutral-300", "bg-white", className), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(Calendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", classNameCalendar), locale: language, onChange: value => {
                     if (Array.isArray(value) && value[0] && value[1]) {
                         handleOnRangeSelect({ start: value[0], end: value[1] });
                     }
@@ -869,8 +869,10 @@ const ITEMS_PER_PAGE = 20;
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }) => {
+const Timeline = ({ className, style, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }) => {
     const ref = useRef(null);
+    const loadMoreAnimationFrameRef = useRef(null);
+    const loadMoreTimeoutRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -891,17 +893,29 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
             ref.current.style.maxHeight = isOpen ? `${ref.current.scrollHeight}px` : "0px";
         }
     }, [isOpen, visibleCount]);
+    useEffect(() => {
+        return () => {
+            if (loadMoreAnimationFrameRef.current !== null) {
+                cancelAnimationFrame(loadMoreAnimationFrameRef.current);
+            }
+            if (loadMoreTimeoutRef.current !== null) {
+                clearTimeout(loadMoreTimeoutRef.current);
+            }
+        };
+    }, []);
     const loadMoreItems = useCallback(() => {
         if (isLoadingMore || visibleCount >= middleChildren.length) {
             return;
         }
         setIsLoadingMore(true);
         // Use requestAnimationFrame to avoid layout thrashing
-        requestAnimationFrame(() => {
+        loadMoreAnimationFrameRef.current = requestAnimationFrame(() => {
+            loadMoreAnimationFrameRef.current = null;
             const scrollPos = ref.current?.scrollTop ?? 0;
             setVisibleCount(prev => Math.min(prev + ITEMS_PER_PAGE, middleChildren.length));
             // After state update, preserve scroll position
-            setTimeout(() => {
+            loadMoreTimeoutRef.current = setTimeout(() => {
+                loadMoreTimeoutRef.current = null;
                 if (ref.current) {
                     ref.current.scrollTop = scrollPos;
                 }
@@ -934,7 +948,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
         const { date, dateRange, showTime } = dateHeader;
         return (jsx("div", { className: "pb-4", "data-testid": "timeline-date-header", children: date ? (jsxs(Fragment, { children: [jsx(Text, { size: "medium", type: "span", weight: "thick", children: formatDate(date, { selectFormat: !showTime ? "dateOnly" : undefined }) }), jsx(Text, { className: "text-neutral-500", size: "medium", type: "span", weight: "thick", children: ` (${timeSinceAuto(date, new Date(), undefined, locale)})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
     }, [dateHeader, formatDate, formatRange, customHeader, locale]);
-    return (jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, children: [renderDateHeader(), customHeader !== undefined && customHeader !== null ? jsx("div", { className: "text-sm font-semibold", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsx("div", { className: "flex justify-center py-2", onClick: e => {
+    return (jsxs("div", { className: className, "data-testid": dataTestId, ref: refProp, style: style, children: [renderDateHeader(), customHeader !== undefined && customHeader !== null ? (jsx("div", { className: "text-sm font-semibold", children: customHeader })) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "overflow-hidden overflow-y-auto transition-all duration-300", ref: ref, children: [jsx("div", {}), visibleMiddleChildren, isOpen && visibleCount < middleChildren.length ? (jsx("div", { className: "flex justify-center py-2", onClick: e => {
                                     e.stopPropagation(); // Prevent parent handlers from firing
                                     loadMoreItems();
                                 }, children: jsx(Text, { className: "cursor-pointer text-neutral-500 hover:text-neutral-600", "data-testid": "load-more-text", size: "small", type: "span", children: t("timeline.loadMore") }) })) : null, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
@@ -947,7 +961,7 @@ const Timeline = ({ className, "data-testid": dataTestId, children, dateHeader,
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-const TimelineElement = ({ date, children, className, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
+const TimelineElement = ({ date, children, className, style, "data-testid": dataTestId = "timeline-element", header, onClick, actionButton, selected = false, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
     const [isHovered, setIsHovered] = useState(false);
     const { formatDate } = useDateAndTime();
     const locale = useLocale();
@@ -962,7 +976,7 @@ const TimelineElement = ({ date, children, className, "data-testid": dataTestId
             setIsHovered(false);
         }
     };
-    return (jsxs("div", { className: cvaTimelineElement({ className, selected, hoverBehavior }), "data-date": date, "data-testid": dataTestId, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 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 }) })] }), 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": "1.27.0",
+  "version": "1.27.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "1.24.0",
-    "@trackunit/date-and-time-utils": "1.13.0",
-    "@trackunit/react-date-and-time-hooks": "1.24.0",
-    "@trackunit/css-class-variance-utilities": "1.13.0",
-    "@trackunit/ui-icons": "1.13.0",
-    "@trackunit/shared-utils": "1.15.0",
-    "@trackunit/i18n-library-translation": "1.21.0",
-    "@trackunit/react-form-components": "1.25.0",
+    "@trackunit/react-components": "1.24.1",
+    "@trackunit/date-and-time-utils": "1.13.1",
+    "@trackunit/react-date-and-time-hooks": "1.24.1",
+    "@trackunit/css-class-variance-utilities": "1.13.1",
+    "@trackunit/ui-icons": "1.13.1",
+    "@trackunit/shared-utils": "1.15.1",
+    "@trackunit/i18n-library-translation": "1.21.1",
+    "@trackunit/react-form-components": "1.25.2",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayPicker/DayPicker.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 export type FurtherBackThanDays = {
     /**
@@ -10,7 +10,7 @@ export type DisabledDaysMatcher = ((date: Date) => boolean) | {
     before?: Date;
     after?: Date;
 } | Array<Date> | FurtherBackThanDays;
-export interface DayPickerProps extends CommonProps, Refable<HTMLDivElement> {
+export interface DayPickerProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * A callback function for when a date is selected
      */
@@ -34,4 +34,4 @@ export interface DayPickerProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {DayPickerProps} props - The props for the DayPicker component
  * @returns {ReactElement} DayPicker component
  */
-export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, ref, }: DayPickerProps) => ReactElement;
+export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDay, language, className, style, "data-testid": dataTestId, ref, }: DayPickerProps) => ReactElement;

package/src/DayPicker/DayRangePicker.d.ts

@@ -1,9 +1,9 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { DateRange } from "@trackunit/date-and-time-utils";
 import { ReactElement } from "react";
 import { TimeZone } from "../TimeZone";
 import { DisabledDaysMatcher } from "./DayPicker";
-export interface DayRangePickerProps extends CommonProps, Refable<HTMLDivElement> {
+export interface DayRangePickerProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * A callback function for when a range is selected
      */
@@ -64,4 +64,4 @@ export interface DayRangePickerProps extends CommonProps, Refable<HTMLDivElement
  * @param {DayRangePickerProps} props - The props for the DayRangePicker component
  * @returns {ReactElement} DayRangePicker component
  */
-export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }: DayRangePickerProps) => ReactElement;
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, "data-testid": dataTestId, language, className, style, classNameCalendar, timezone, cancelButtonLabel, onClose, ref, }: DayRangePickerProps) => ReactElement;

package/src/Timeline/Timeline.d.ts

@@ -1,7 +1,7 @@
 import { DateRange } from "@trackunit/date-and-time-utils";
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactNode } from "react";
-export interface TimelineProps extends CommonProps, Refable<HTMLDivElement> {
+export interface TimelineProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     children: ReactNode;
     toggleButton?: {
         expandedLabel: string;
@@ -25,4 +25,4 @@ export interface TimelineProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {TimelineProps} props - The props for the Timeline component
  * @returns {ReactElement} Timeline component
  */
-export declare const Timeline: ({ className, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: ({ className, style, "data-testid": dataTestId, children, dateHeader, customHeader, toggleButton, ref: refProp, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/src/Timeline/TimelineElement.d.ts

@@ -1,7 +1,7 @@
-import { CommonProps, IconColors } from "@trackunit/react-components";
+import { CommonProps, IconColors, type Styleable } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEvent, ReactNode } from "react";
-interface TimeLineElementProps extends CommonProps {
+interface TimeLineElementProps extends CommonProps, Styleable {
     date?: Date;
     header?: ReactNode;
     children?: ReactNode;
@@ -26,5 +26,5 @@ interface TimeLineElementProps extends CommonProps {
  * @param {TimeLineElementProps} props the props
  * @returns {ReactElement} component
  */
-export declare const TimelineElement: ({ date, children, className, "data-testid": dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineElement: ({ date, children, className, style, "data-testid": dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/dateTime/DateTime.d.ts

@@ -1,7 +1,7 @@
 import { TemporalFormat } from "@trackunit/date-and-time-utils";
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { TimeZone } from "../TimeZone";
-export interface DateTimeProps extends CommonProps, Refable<HTMLTimeElement> {
+export interface DateTimeProps extends CommonProps, Refable<HTMLTimeElement>, Styleable {
     /**
      * The date/time value to display. Accepts a `Date` object, an ISO 8601 string, or a Unix timestamp in milliseconds.
      * When `null` or `undefined`, the current date/time is used.
@@ -71,4 +71,4 @@ export declare const MS_PER_HOUR: number;
  * ```
  * @param {DateTimeProps} props - The props for the DateTime component
  */
-export declare const DateTime: ({ value, format, className, fromNow, withTitle, titleFormat, timezone, "data-testid": dataTestId, subtle, ref, ...rest }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTime: ({ value, format, className, style, fromNow, withTitle, titleFormat, timezone, "data-testid": dataTestId, subtle, ref, ...rest }: DateTimeProps) => import("react/jsx-runtime").JSX.Element;