@trackunit/react-date-and-time-components 0.0.203 → 0.0.204

package/index.cjs.js

@@ -5,13 +5,14 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var reactDateAndTimeHooks = require('@trackunit/react-date-and-time-hooks');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
-var react = require('react');
+var React = require('react');
 var reactComponents = require('@trackunit/react-components');
 var sharedUtils = require('@trackunit/shared-utils');
 var reactDayPicker = require('react-day-picker');
 var tailwindMerge = require('tailwind-merge');
 var locale = require('date-fns/locale');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 
 var defaultTranslations = {
 	"dateTime.instant.now": "Now",
@@ -90,18 +91,18 @@ const MS_PER_HOUR = 60 * 60 * 1000;
 const DateTime = ({ value, format, className, fromNow, withTitle, titleFormat, timezone, subtle, calendar, }) => {
     const { t } = useTranslation();
     const locale = reactDateAndTimeHooks.useLocale();
-    const nowDate = react.useMemo(() => new Date(), []);
+    const nowDate = React.useMemo(() => new Date(), []);
     const date = value ? dateAndTimeUtils.toDateUtil(value) : nowDate;
     const newDateTime = dateAndTimeUtils.formatDateUtil(date, format, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale);
     const titleDateTime = withTitle ? dateAndTimeUtils.formatDateUtil(date, titleFormat, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale) : undefined;
-    const getTimeSince = react.useCallback((from, to) => {
+    const getTimeSince = React.useCallback((from, to) => {
         const same = dateAndTimeUtils.isEqualUtil(from, to);
         if (same) {
             return t("dateTime.instant.now");
         }
         return dateAndTimeUtils.timeSinceAuto(from, to, timezone === null || timezone === void 0 ? void 0 : timezone.id, locale);
     }, [locale, t, timezone === null || timezone === void 0 ? void 0 : timezone.id]);
-    const dateValue = react.useMemo(() => {
+    const dateValue = React.useMemo(() => {
         return fromNow ? getTimeSince(date, nowDate) : newDateTime;
     }, [date, fromNow, getTimeSince, newDateTime, nowDate]);
     return (jsxRuntime.jsx("time", { className: className, dateTime: newDateTime, style: subtle ? { color: uiDesignTokens.color("NEUTRAL", 600, "CSS") } : undefined, title: titleDateTime, children: dateValue }));
@@ -168,15 +169,15 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @returns {JSX.Element} DayRangePicker component
  */
 const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, className, max, showQuickOptions, timezone, onClose, }) => {
-    const [newRange, setNewRange] = react.useState(selectedDays !== null && selectedDays !== void 0 ? selectedDays : { from: undefined, to: undefined });
+    const [newRange, setNewRange] = React.useState(selectedDays !== null && selectedDays !== void 0 ? selectedDays : { from: undefined, to: undefined });
     const [t] = useTranslation();
     const locale = useLocale(language);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (selectedDays) {
             setNewRange(selectedDays);
         }
     }, [selectedDays]);
-    const handleOnRangeSelect = react.useCallback((range) => {
+    const handleOnRangeSelect = React.useCallback((range) => {
         if (range && range.from) {
             if (range.to === undefined) {
                 setNewRange({ from: range.from, to: range.from });
@@ -189,7 +190,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
             setNewRange({ from: undefined, to: undefined });
         }
     }, []);
-    const handleCancel = react.useCallback(() => {
+    const handleCancel = React.useCallback(() => {
         if (selectedDays) {
             setNewRange(selectedDays);
         }
@@ -198,7 +199,7 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
     const clearSelectedDays = () => {
         setNewRange({ from: undefined, to: undefined });
     };
-    const handleApply = react.useCallback(() => {
+    const handleApply = React.useCallback(() => {
         onRangeSelect && onRangeSelect(newRange);
         onClose && onClose();
     }, [onRangeSelect, newRange, onClose]);
@@ -221,7 +222,7 @@ const calcQuickOptions = (numberOfDays) => {
 const QuickOptionButton = ({ option, onClick, timezone }) => {
     const [t] = useTranslation();
     const { nowDate, startOf, endOf, subtract } = reactDateAndTimeHooks.useDateAndTime();
-    const handleClick = react.useCallback(() => {
+    const handleClick = React.useCallback(() => {
         const from = subtract(startOf(nowDate, "day"), option.includeExtraDay ? option.last : option.last - 1, option.unit);
         onClick({
             from,
@@ -281,7 +282,7 @@ const QuickOptionButton = ({ option, onClick, timezone }) => {
 const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined }, showQuickOptions, disabledDays, className, dataTestId, onRangeSelect, variant = "ghost-neutral", size = "small", placement, timezone, fullwidth, bindTo, buttonContent, max, disabled, }) => {
     const { language } = reactCoreHooks.useCurrentUserLanguage();
     const [t] = useTranslation();
-    const handleOnRangeSelect = react.useCallback((range) => {
+    const handleOnRangeSelect = React.useCallback((range) => {
         if (range) {
             onRangeSelect(range);
         }
@@ -289,6 +290,189 @@ const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined },
     return (jsxRuntime.jsxs(reactComponents.Popover, { placement: placement, children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-date-range", disabled: disabled, fullWidth: fullwidth, size: size, suffix: jsxRuntime.jsx(reactComponents.Icon, { ariaLabel: t("dayRangePickerPopover.icon.tooltip.calendar"), name: "Calendar", size: "small" }), variant: variant, children: buttonContent }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: close => (jsxRuntime.jsx(reactComponents.Card, { className: "min-w-min p-4", dataTestId: "range-popover-list", children: jsxRuntime.jsx(DayRangePicker, { disabledDays: disabledDays, language: language || "en", max: max, onClose: close, onRangeSelect: handleOnRangeSelect, selectedDays: interval, showQuickOptions: showQuickOptions, timezone: timezone }) })) })] }));
 };
 
+const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "group/timeline",
+], {
+    variants: {
+        selected: {
+            true: "bg-blue-50 rounded-[4px]",
+            false: "",
+        },
+        hoverBehavior: {
+            true: "hover:bg-gray-50 hover:rounded-[4px]",
+            false: "",
+        },
+    },
+});
+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-slate-300",
+    "group-first/timeline:top-3.5",
+    "group-last/timeline:h-4",
+], {
+    variants: {
+        lineStyle: {
+            dashed: "border-dashed",
+            solid: ""
+        },
+    },
+});
+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",
+], {
+    variants: {
+        rotated: {
+            true: "rotate-180",
+            false: "",
+        },
+    },
+});
+const cvaTimelineElementTime = cssClassVarianceUtilities.cvaMerge([
+    "min-h-6",
+    "content-center",
+], {
+    variants: {
+        width: {
+            large: "min-w-16",
+            small: "min-w-10",
+        },
+    },
+});
+
+/**
+ * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
+ *
+ * @param {TimelineProps} props - The props for the Timeline component
+ * @returns {JSX.Element} Timeline component
+ */
+const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
+    var _a;
+    const ref = React.useRef(null);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const { formatDate, formatRange } = reactDateAndTimeHooks.useDateAndTime();
+    const locale = reactDateAndTimeHooks.useLocale();
+    const hourCycle = dateAndTimeUtils.getHourCycle(locale);
+    const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
+    const [firstChild, ...remainingChildren] = childrenArray;
+    const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
+    const lastChild = remainingChildren.pop();
+    const middleChildren = remainingChildren;
+    const renderToggleButton = () => (jsxRuntime.jsxs("div", { className: cvaTimelineElement(), children: [(childProps === null || childProps === void 0 ? void 0 : childProps.date) ? (jsxRuntime.jsx("div", { className: cvaTimelineElementTime({
+                    width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
+                }) })) : null, jsxRuntime.jsx("div", { className: cvaDotWrapper(), children: jsxRuntime.jsx("div", { className: cvaLine({ lineStyle: childProps === null || childProps === void 0 ? void 0 : childProps.lineStyle }) }) }), jsxRuntime.jsxs("div", { className: "flex text-sm text-secondary-500 cursor-pointer items-center min-h-8 hover:text-secondary-600", "data-testid": "timeline-toggle-btn", onClick: () => setIsOpen(!isOpen), children: [jsxRuntime.jsx(reactComponents.Icon, { className: cvaToggleBtnIcon({ rotated: isOpen }), name: "ChevronDown", size: "small" }), jsxRuntime.jsx("span", { children: isOpen ? toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.collapsedLabel : toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.expandedLabel })] })] }));
+    const renderDateHeader = () => {
+        if (!dateHeader) {
+            return null;
+        }
+        if (customHeader) {
+            return null;
+        }
+        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-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${dateAndTimeUtils.timeSinceAuto(date, new Date())})` })] })) : (jsxRuntime.jsx(reactComponents.Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
+    };
+    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsxRuntime.jsx("div", { className: "pb-4 font-semibold text-sm", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxRuntime.jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxRuntime.jsxs("div", { "aria-hidden": !isOpen, className: "transition-all duration-300 overflow-hidden", ref: ref, style: { height: isOpen ? `${(_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollHeight}px` : "0px" }, children: [jsxRuntime.jsx("div", {}), middleChildren, jsxRuntime.jsx("div", {})] }), lastChild] })) : (jsxRuntime.jsx("div", { children: children }))] }));
+};
+
+/**
+ * TimelineElement - entry on a timeline - rendered with an icon on the timeline
+ * - a date as the header and the children provided as body.
+ *
+ * @param {TimeLineElementProps} props the props
+ * @returns {JSX.Element} component
+ */
+const TimelineElement = ({ date, children, className, dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
+    const locale = reactDateAndTimeHooks.useLocale();
+    const formattedDate = date
+        ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" })
+        : null;
+    const handleMouseEnter = () => {
+        if (hoverBehavior) {
+            setIsHovered(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (hoverBehavior) {
+            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: "pt-2 pb-2", children: [renderHeader(header), renderChildren(children), renderActionButton(actionButton)] })] }));
+};
+const renderDate = (formattedDate, locale) => {
+    if (!formattedDate) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: "pt-2 items-center", children: timelineElementTime(formattedDate, locale) }));
+};
+const renderDot = (customDot, isHovered, selected) => {
+    return (customDot === null || customDot === void 0 ? void 0 : customDot.name)
+        ? customDotElement(customDot.name, isHovered, selected, customDot.color)
+        : defaultDot(isHovered, selected);
+};
+const renderHeader = (header) => {
+    if (!header) {
+        return null;
+    }
+    return jsxRuntime.jsx("div", { className: "text-sm mt-0.5 content-center font-medium", children: header });
+};
+const renderChildren = (children) => {
+    if (!children) {
+        return null;
+    }
+    return jsxRuntime.jsx("div", { className: "text-secondary-500 mt-0.5 content-center text-sm", children: children });
+};
+const renderActionButton = (actionButton) => {
+    if (!actionButton) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: "pt-2", children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: actionButton.iconName, size: "small" }), size: "small", variant: "secondary", children: actionButton.label }) }));
+};
+const timelineElementTime = (formattedDate, locale) => {
+    const hourCycle = dateAndTimeUtils.getHourCycle(locale);
+    return (jsxRuntime.jsx(reactComponents.Text, { align: "right", className: cvaTimelineElementTime({
+            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small"
+        }), size: "small", subtle: true, children: formattedDate }));
+};
+const CircleIcon = ({ selected, hovered }) => (jsxRuntime.jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-circle-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: selected ? "#EFF6FF" : hovered ? "#F9FAFB" : "white", r: "10" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "8" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "white", r: "3" })] }));
+const DotIcon = () => (jsxRuntime.jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-dot-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "white", r: "6" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "4" })] }));
+const defaultDot = (hovered, selected) => (hovered || selected) ? jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsxRuntime.jsx(DotIcon, {});
+const customDotElement = (name, hovered, selected, color) => (hovered || selected
+    ? jsxRuntime.jsx(CircleIcon, { hovered: hovered, selected: selected })
+    : (jsxRuntime.jsx("div", { className: "w-6 h-6 flex items-center justify-center", children: jsxRuntime.jsx("div", { className: cvaCustomDot(), children: jsxRuntime.jsx(reactComponents.Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) })));
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -304,3 +488,5 @@ exports.DayPicker = DayPicker;
 exports.DayRangePicker = DayRangePicker;
 exports.DayRangePickerPopover = DayRangePickerPopover;
 exports.MS_PER_HOUR = MS_PER_HOUR;
+exports.Timeline = Timeline;
+exports.TimelineElement = TimelineElement;

package/index.esm.js

@@ -1,15 +1,16 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { toDateUtil, formatDateUtil, isEqualUtil, timeSinceAuto } from '@trackunit/date-and-time-utils';
+import { toDateUtil, formatDateUtil, isEqualUtil, timeSinceAuto, getHourCycle } from '@trackunit/date-and-time-utils';
 import { useLocale as useLocale$1, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 import { color } from '@trackunit/ui-design-tokens';
-import { useMemo, useCallback, useState, useEffect } from 'react';
-import { Tooltip, IconButton, Icon, Button, Popover, PopoverTrigger, PopoverContent, Card } from '@trackunit/react-components';
+import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react';
+import { Tooltip, IconButton, Icon, Button, Popover, PopoverTrigger, PopoverContent, Card, Text } from '@trackunit/react-components';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { twMerge } from 'tailwind-merge';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
 import { useCurrentUserLanguage } from '@trackunit/react-core-hooks';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 
 var defaultTranslations = {
 	"dateTime.instant.now": "Now",
@@ -287,6 +288,189 @@ const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined },
     return (jsxs(Popover, { placement: placement, children: [jsx(PopoverTrigger, { children: jsx(Button, { className: className, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-date-range", disabled: disabled, fullWidth: fullwidth, size: size, suffix: jsx(Icon, { ariaLabel: t("dayRangePickerPopover.icon.tooltip.calendar"), name: "Calendar", size: "small" }), variant: variant, children: buttonContent }) }), jsx(PopoverContent, { children: close => (jsx(Card, { className: "min-w-min p-4", dataTestId: "range-popover-list", children: jsx(DayRangePicker, { disabledDays: disabledDays, language: language || "en", max: max, onClose: close, onRangeSelect: handleOnRangeSelect, selectedDays: interval, showQuickOptions: showQuickOptions, timezone: timezone }) })) })] }));
 };
 
+const cvaTimelineElement = cvaMerge([
+    "flex",
+    "group/timeline",
+], {
+    variants: {
+        selected: {
+            true: "bg-blue-50 rounded-[4px]",
+            false: "",
+        },
+        hoverBehavior: {
+            true: "hover:bg-gray-50 hover:rounded-[4px]",
+            false: "",
+        },
+    },
+});
+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-slate-300",
+    "group-first/timeline:top-3.5",
+    "group-last/timeline:h-4",
+], {
+    variants: {
+        lineStyle: {
+            dashed: "border-dashed",
+            solid: ""
+        },
+    },
+});
+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",
+], {
+    variants: {
+        rotated: {
+            true: "rotate-180",
+            false: "",
+        },
+    },
+});
+const cvaTimelineElementTime = cvaMerge([
+    "min-h-6",
+    "content-center",
+], {
+    variants: {
+        width: {
+            large: "min-w-16",
+            small: "min-w-10",
+        },
+    },
+});
+
+/**
+ * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
+ *
+ * @param {TimelineProps} props - The props for the Timeline component
+ * @returns {JSX.Element} Timeline component
+ */
+const Timeline = ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }) => {
+    var _a;
+    const ref = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const { formatDate, formatRange } = useDateAndTime();
+    const locale = useLocale$1();
+    const hourCycle = getHourCycle(locale);
+    const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
+    const [firstChild, ...remainingChildren] = childrenArray;
+    const childProps = React.isValidElement(firstChild) ? firstChild.props : {};
+    const lastChild = remainingChildren.pop();
+    const middleChildren = remainingChildren;
+    const renderToggleButton = () => (jsxs("div", { className: cvaTimelineElement(), children: [(childProps === null || childProps === void 0 ? void 0 : childProps.date) ? (jsx("div", { className: cvaTimelineElementTime({
+                    width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small",
+                }) })) : null, jsx("div", { className: cvaDotWrapper(), children: jsx("div", { className: cvaLine({ lineStyle: childProps === null || childProps === void 0 ? void 0 : childProps.lineStyle }) }) }), jsxs("div", { className: "flex text-sm text-secondary-500 cursor-pointer items-center min-h-8 hover:text-secondary-600", "data-testid": "timeline-toggle-btn", onClick: () => setIsOpen(!isOpen), children: [jsx(Icon, { className: cvaToggleBtnIcon({ rotated: isOpen }), name: "ChevronDown", size: "small" }), jsx("span", { children: isOpen ? toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.collapsedLabel : toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.expandedLabel })] })] }));
+    const renderDateHeader = () => {
+        if (!dateHeader) {
+            return null;
+        }
+        if (customHeader) {
+            return null;
+        }
+        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-secondary-500", size: "medium", type: "span", weight: "thick", children: ` (${timeSinceAuto(date, new Date())})` })] })) : (jsx(Text, { className: "pr-1", size: "medium", type: "span", weight: "thick", children: formatRange(dateRange, { dateStyle: !showTime ? "medium" : undefined }) })) }));
+    };
+    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [renderDateHeader(), customHeader ? jsx("div", { className: "pb-4 font-semibold text-sm", children: customHeader }) : null, toggleButton && middleChildren.length > 0 ? (jsxs("div", { children: [firstChild, middleChildren.length > 0 ? renderToggleButton() : null, jsxs("div", { "aria-hidden": !isOpen, className: "transition-all duration-300 overflow-hidden", ref: ref, style: { height: isOpen ? `${(_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollHeight}px` : "0px" }, children: [jsx("div", {}), middleChildren, jsx("div", {})] }), lastChild] })) : (jsx("div", { children: children }))] }));
+};
+
+/**
+ * TimelineElement - entry on a timeline - rendered with an icon on the timeline
+ * - a date as the header and the children provided as body.
+ *
+ * @param {TimeLineElementProps} props the props
+ * @returns {JSX.Element} component
+ */
+const TimelineElement = ({ date, children, className, dataTestId = "timeline-element", header, onClick, actionButton, selected, customDot, lineStyle = "solid", hoverBehavior = false, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const { formatDate } = useDateAndTime();
+    const locale = useLocale$1();
+    const formattedDate = date
+        ? formatDate(date, { selectFormat: "timeOnly", timeFormat: "short" })
+        : null;
+    const handleMouseEnter = () => {
+        if (hoverBehavior) {
+            setIsHovered(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (hoverBehavior) {
+            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: "pt-2 pb-2", children: [renderHeader(header), renderChildren(children), renderActionButton(actionButton)] })] }));
+};
+const renderDate = (formattedDate, locale) => {
+    if (!formattedDate) {
+        return null;
+    }
+    return (jsx("div", { className: "pt-2 items-center", children: timelineElementTime(formattedDate, locale) }));
+};
+const renderDot = (customDot, isHovered, selected) => {
+    return (customDot === null || customDot === void 0 ? void 0 : customDot.name)
+        ? customDotElement(customDot.name, isHovered, selected, customDot.color)
+        : defaultDot(isHovered, selected);
+};
+const renderHeader = (header) => {
+    if (!header) {
+        return null;
+    }
+    return jsx("div", { className: "text-sm mt-0.5 content-center font-medium", children: header });
+};
+const renderChildren = (children) => {
+    if (!children) {
+        return null;
+    }
+    return jsx("div", { className: "text-secondary-500 mt-0.5 content-center text-sm", children: children });
+};
+const renderActionButton = (actionButton) => {
+    if (!actionButton) {
+        return null;
+    }
+    return (jsx("div", { className: "pt-2", children: jsx(Button, { prefix: jsx(Icon, { name: actionButton.iconName, size: "small" }), size: "small", variant: "secondary", children: actionButton.label }) }));
+};
+const timelineElementTime = (formattedDate, locale) => {
+    const hourCycle = getHourCycle(locale);
+    return (jsx(Text, { align: "right", className: cvaTimelineElementTime({
+            width: hourCycle === "h12" || hourCycle === "h11" ? "large" : "small"
+        }), size: "small", subtle: true, children: formattedDate }));
+};
+const CircleIcon = ({ selected, hovered }) => (jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-circle-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsx("circle", { cx: "12", cy: "12", fill: selected ? "#EFF6FF" : hovered ? "#F9FAFB" : "white", r: "10" }), jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "8" }), jsx("circle", { cx: "12", cy: "12", fill: "white", r: "3" })] }));
+const DotIcon = () => (jsxs("svg", { className: "relative z-[2]", "data-testid": "timeline-dot-icon", height: "24", viewBox: "0 0 24 24", width: "24", children: [jsx("circle", { cx: "12", cy: "12", fill: "white", r: "6" }), jsx("circle", { cx: "12", cy: "12", fill: "#2563EB", r: "4" })] }));
+const defaultDot = (hovered, selected) => (hovered || selected) ? jsx(CircleIcon, { hovered: hovered, selected: selected }) : jsx(DotIcon, {});
+const customDotElement = (name, hovered, selected, color) => (hovered || selected
+    ? jsx(CircleIcon, { hovered: hovered, selected: selected })
+    : (jsx("div", { className: "w-6 h-6 flex items-center justify-center", children: jsx("div", { className: cvaCustomDot(), children: jsx(Icon, { className: "block", color: color, dataTestId: "timeline-custom-dot", name: name, size: "small" }) }) })));
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -296,4 +480,4 @@ const DayRangePickerPopover = ({ interval = { from: undefined, to: undefined },
  */
 setupLibraryTranslations();
 
-export { DateTime, DateTimeHumanized, DayPicker, DayRangePicker, DayRangePickerPopover, MS_PER_HOUR };
+export { DateTime, DateTimeHumanized, DayPicker, DayRangePicker, DayRangePickerPopover, MS_PER_HOUR, Timeline, TimelineElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "0.0.203",
+  "version": "0.0.204",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,7 +17,9 @@
     "@trackunit/date-and-time-utils": "*",
     "@trackunit/ui-design-tokens": "*",
     "@trackunit/shared-utils": "*",
-    "@trackunit/i18n-library-translation": "*"
+    "@trackunit/i18n-library-translation": "*",
+    "@trackunit/ui-icons": "*",
+    "@trackunit/css-class-variance-utilities": "*"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Timeline/Timeline.d.ts

@@ -0,0 +1,27 @@
+import { DateRange } from "@trackunit/date-and-time-utils";
+import { CommonProps } from "@trackunit/react-components";
+import React from "react";
+export interface TimelineProps extends CommonProps {
+    children: React.ReactNode;
+    toggleButton?: {
+        expandedLabel: string;
+        collapsedLabel: string;
+    };
+    dateHeader?: ({
+        date: Date;
+        dateRange?: never;
+    } | {
+        date?: never;
+        dateRange: DateRange;
+    }) & {
+        showTime?: boolean;
+    };
+    customHeader?: React.ReactNode;
+}
+/**
+ * The Timeline component offers a visual representation of events or milestones in chronological order, helping users easily follow the progression of activities, tasks, or data points over time.
+ *
+ * @param {TimelineProps} props - The props for the Timeline component
+ * @returns {JSX.Element} Timeline component
+ */
+export declare const Timeline: ({ className, dataTestId, children, dateHeader, customHeader, toggleButton, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/src/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Timeline } from "./Timeline";
+type Story = StoryObj<typeof Timeline>;
+declare const meta: Meta<typeof Timeline>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomTimestamp: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomDot: () => import("react/jsx-runtime").JSX.Element;
+export declare const IncorrectUse: () => import("react/jsx-runtime").JSX.Element;
+export declare const HoverAndSelectBehavior: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+export declare const cvaTimelineElement: (props?: ({
+    selected?: boolean | null | undefined;
+    hoverBehavior?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaDotWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaLine: (props?: ({
+    lineStyle?: "dashed" | "solid" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCustomDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleBtnIcon: (props?: ({
+    rotated?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTimelineElementTime: (props?: ({
+    width?: "large" | "small" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/Timeline/TimelineElement.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { CommonProps, IconColors } from "@trackunit/react-components";
+import { IconName } from "@trackunit/ui-icons";
+interface TimeLineElementProps extends CommonProps {
+    date?: Date;
+    header?: React.ReactNode;
+    children?: React.ReactNode;
+    customDot?: {
+        name: IconName;
+        color: IconColors;
+    };
+    onClick?: () => void;
+    actionButton?: {
+        label: string;
+        iconName: IconName;
+    };
+    selected?: boolean;
+    lineStyle?: "solid" | "dashed";
+    hoverBehavior?: boolean;
+}
+/**
+ * TimelineElement - entry on a timeline - rendered with an icon on the timeline
+ * - a date as the header and the children provided as body.
+ *
+ * @param {TimeLineElementProps} props the props
+ * @returns {JSX.Element} component
+ */
+export declare const TimelineElement: ({ date, children, className, dataTestId, header, onClick, actionButton, selected, customDot, lineStyle, hoverBehavior, }: TimeLineElementProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Timeline';
+export * from './TimelineElement';

package/src/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./dateTime";
 export * from "./DayPicker";
+export * from "./Timeline";