@react-fabric/date 1.0.0-beta.46 → 1.0.0-beta.48

package/dist/cjs/display/DateDisplay.js

@@ -4,6 +4,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var dateUtil = require('../utils/dateUtil.js');
+var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["date", "className", "format", "children", "showAlternateDate"];
@@ -24,7 +25,7 @@ var DateDisplay = function DateDisplay(_ref) {
     disabled: !showAlternateDate,
     content: dateUtil.DateUtil.format(date, format, currentLocale, currentCalendar !== "hijri"),
     children: /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
-      className: className
+      className: classNames(className, children && "underline decoration-dotted cursor-pointer")
     }, aria), {}, {
       children: dateUtil.DateUtil.format(date, format, currentLocale, currentCalendar === "hijri")
     }))

package/dist/cjs/display/DateDuration.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var dateFns = require('date-fns');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var dateUtil = require('../utils/dateUtil.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["date", "children", "className", "format"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DateDuration = function DateDuration(_ref) {
+  var date = _ref.date,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "PPpp" : _ref$format,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation("date"),
+    t = _useTranslation.t;
+  var interval = react.useMemo(function () {
+    return dateFns.intervalToDuration({
+      start: new Date(date),
+      end: new Date()
+    });
+  }, [date]);
+  var label = react.useMemo(function () {
+    var before = dateFns.isBefore(dateUtil.DateUtil.parseDate(date), new Date());
+    var tkey = before ? "relative.before" : "relative.after";
+    var part = "now";
+    var count = 0;
+    if (interval.years && interval.years > 0) {
+      var _interval$months;
+      part = "years";
+      count = interval.years;
+      if (((_interval$months = interval.months) !== null && _interval$months !== void 0 ? _interval$months : 0) > 10) {
+        part = "yearsX";
+        count += 1;
+      }
+    } else if (interval.months && interval.months > 0) {
+      var _interval$weeks;
+      part = "months";
+      count = interval.months;
+      if (interval.months > 10) {
+        part = "yearsX";
+        count = 1;
+      } else if (((_interval$weeks = interval.weeks) !== null && _interval$weeks !== void 0 ? _interval$weeks : 0) > 3) {
+        part = "monthsX";
+        count += 1;
+      }
+    } else if (interval.weeks && interval.weeks > 0) {
+      var _interval$days;
+      part = "weeks";
+      count = interval.weeks;
+      if (interval.weeks > 3) {
+        part = "monthsX";
+        count = 1;
+      } else if (((_interval$days = interval.days) !== null && _interval$days !== void 0 ? _interval$days : 0) > 5) {
+        part = "weeksX";
+        count += 1;
+      }
+    } else if (interval.days && interval.days > 0) {
+      var _interval$hours;
+      part = "days";
+      count = interval.days;
+      if (interval.days > 5) {
+        part = "weeksX";
+        count = 1;
+      } else if (((_interval$hours = interval.hours) !== null && _interval$hours !== void 0 ? _interval$hours : 0) > 20) {
+        part = "daysX";
+        count += 1;
+      }
+    } else if (interval.hours && interval.hours > 0) {
+      var _interval$minutes;
+      part = "hours";
+      count = interval.hours;
+      if (interval.hours > 20) {
+        part = "daysX";
+        count = 1;
+      } else if (((_interval$minutes = interval.minutes) !== null && _interval$minutes !== void 0 ? _interval$minutes : 0) > 45) {
+        part = "hoursX";
+        count += 1;
+      }
+    } else if (interval.minutes && interval.minutes > 0) {
+      var _interval$seconds;
+      part = "minutes";
+      count = interval.minutes;
+      if (interval.minutes > 45) {
+        part = "hoursX";
+        count = 1;
+      } else if (((_interval$seconds = interval.seconds) !== null && _interval$seconds !== void 0 ? _interval$seconds : 0) > 45) {
+        part = "minuteX";
+        count += 1;
+      }
+    } else if (interval.seconds && interval.seconds > 15) {
+      part = "seconds";
+      count = interval.seconds;
+      if (interval.seconds > 45) {
+        part = "minutesX";
+        count = 1;
+      }
+    }
+    return t("".concat(tkey, ".").concat(part), {
+      count: count
+    });
+  }, [interval, date]);
+  var dtLabel = /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+    content: utilities.Format.date(date, format),
+    children: /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
+      className: classNames(className, children && "underline decoration-dotted cursor-pointer")
+    }, props), {}, {
+      children: label
+    }))
+  });
+  return children ? /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
+    showArrow: true,
+    closeOnClick: true,
+    children: [dtLabel, children]
+  }) : dtLabel;
+};
+
+exports.DateDuration = DateDuration;

package/dist/cjs/i18n/ar.json.js

@@ -13,13 +13,201 @@ var label = {
 	hijri: "هجري",
 	gregorian: "ميلادي"
 };
-var number = {
+var relative = {
+	before: {
+		now: "الآن",
+		years: "{{count}} منذ عام",
+		months: "{{count}} منذ شهر",
+		weeks: "{{count}} قبل أسبوع",
+		days: "{{count}} منذ يوم",
+		hours: "{{count}} منذ ساعة",
+		minutes: "{{count}} منذ دقيقة",
+		seconds: "{{count}} قبل الثاني",
+		yearsX: "بالكاد {{count}} منذ عام",
+		monthsX: "بالكاد {{count}} منذ شهر",
+		weeksX: "بالكاد {{count}} قبل أسبوع",
+		daysX: "بالكاد {{count}} منذ يوم",
+		hoursX: "بالكاد {{count}} منذ ساعة",
+		minutesX: "بالكاد {{count}} منذ دقيقة",
+		years_zero: "{{count}} منذ سنوات",
+		years_one: "{{count}} منذ عام",
+		years_two: "{{count}} منذ سنوات",
+		years_few: "{{count}} منذ سنوات",
+		years_many: "{{count}} منذ سنوات",
+		years_other: "{{count}} منذ سنوات",
+		months_zero: "{{count}} منذ أشهر",
+		months_one: "{{count}} منذ شهر",
+		months_two: "{{count}} منذ أشهر",
+		months_few: "{{count}} منذ أشهر",
+		months_many: "{{count}} منذ أشهر",
+		months_other: "{{count}} منذ أشهر",
+		weeks_zero: "{{count}} منذ أسابيع",
+		weeks_one: "{{count}} قبل أسبوع",
+		weeks_two: "{{count}} منذ أسابيع",
+		weeks_few: "{{count}} منذ أسابيع",
+		weeks_many: "{{count}} منذ أسابيع",
+		weeks_other: "{{count}} منذ أسابيع",
+		days_zero: "{{count}} منذ أيام",
+		days_one: "{{count}} منذ يوم",
+		days_two: "{{count}} منذ أيام",
+		days_few: "{{count}} منذ أيام",
+		days_many: "{{count}} منذ أيام",
+		days_other: "{{count}} منذ أيام",
+		hours_zero: "{{count}} منذ ساعات",
+		hours_one: "{{count}} منذ ساعة",
+		hours_two: "{{count}} منذ ساعات",
+		hours_few: "{{count}} منذ ساعات",
+		hours_many: "{{count}} منذ ساعات",
+		hours_other: "{{count}} منذ ساعات",
+		minutes_zero: "{{count}} منذ دقائق",
+		minutes_one: "{{count}} منذ دقيقة",
+		minutes_two: "{{count}} منذ دقائق",
+		minutes_few: "{{count}} منذ دقائق",
+		minutes_many: "{{count}} منذ دقائق",
+		minutes_other: "{{count}} منذ دقائق",
+		seconds_zero: "{{count}} قبل ثوان",
+		seconds_one: "{{count}} قبل الثاني",
+		seconds_two: "{{count}} قبل ثوان",
+		seconds_few: "{{count}} قبل ثوان",
+		seconds_many: "{{count}} قبل ثوان",
+		seconds_other: "{{count}} قبل ثوان",
+		yearsX_zero: "بالكاد {{count}} منذ سنوات",
+		yearsX_one: "بالكاد {{count}} منذ عام",
+		yearsX_two: "بالكاد {{count}} منذ سنوات",
+		yearsX_few: "بالكاد {{count}} منذ سنوات",
+		yearsX_many: "بالكاد {{count}} منذ سنوات",
+		yearsX_other: "بالكاد {{count}} منذ سنوات",
+		monthsX_zero: "بالكاد {{count}} منذ أشهر",
+		monthsX_one: "بالكاد {{count}} منذ شهر",
+		monthsX_two: "بالكاد {{count}} منذ أشهر",
+		monthsX_few: "بالكاد {{count}} منذ أشهر",
+		monthsX_many: "بالكاد {{count}} منذ أشهر",
+		monthsX_other: "بالكاد {{count}} منذ أشهر",
+		weeksX_zero: "بالكاد {{count}} منذ أسابيع",
+		weeksX_one: "بالكاد {{count}} قبل أسبوع",
+		weeksX_two: "بالكاد {{count}} منذ أسابيع",
+		weeksX_few: "بالكاد {{count}} منذ أسابيع",
+		weeksX_many: "بالكاد {{count}} منذ أسابيع",
+		weeksX_other: "بالكاد {{count}} منذ أسابيع",
+		daysX_zero: "بالكاد {{count}} منذ أيام",
+		daysX_one: "بالكاد {{count}} منذ يوم",
+		daysX_two: "بالكاد {{count}} منذ أيام",
+		daysX_few: "بالكاد {{count}} منذ أيام",
+		daysX_many: "بالكاد {{count}} منذ أيام",
+		daysX_other: "بالكاد {{count}} منذ أيام",
+		hoursX_zero: "بالكاد {{count}} منذ ساعات",
+		hoursX_one: "بالكاد {{count}} منذ ساعة",
+		hoursX_two: "بالكاد {{count}} منذ ساعات",
+		hoursX_few: "بالكاد {{count}} منذ ساعات",
+		hoursX_many: "بالكاد {{count}} منذ ساعات",
+		hoursX_other: "بالكاد {{count}} منذ ساعات",
+		minutesX_zero: "بالكاد {{count}} منذ دقائق",
+		minutesX_one: "بالكاد {{count}} منذ دقيقة",
+		minutesX_two: "بالكاد {{count}} منذ دقائق",
+		minutesX_few: "بالكاد {{count}} منذ دقائق",
+		minutesX_many: "بالكاد {{count}} منذ دقائق",
+		minutesX_other: "بالكاد {{count}} منذ دقائق"
+	},
+	after: {
+		now: "قريباً",
+		years: "{{count}} بعد عام",
+		months: "{{count}} بعد شهر",
+		weeks: "{{count}} بعد أسبوع",
+		days: "{{count}} بعد يوم",
+		hours: "{{count}} بعد ساعة",
+		minutes: "{{count}} بعد دقيقة",
+		seconds: "{{count}} الثاني في وقت لاحق",
+		yearsX: "بالكاد {{count}} بعد عام",
+		monthsX: "بالكاد {{count}} بعد شهر",
+		weeksX: "بالكاد {{count}} بعد أسبوع",
+		daysX: "بالكاد {{count}} بعد يوم",
+		hoursX: "بالكاد {{count}} بعد ساعة",
+		minutesX: "بالكاد {{count}} بعد دقيقة",
+		years_zero: "{{count}} بعد سنوات",
+		years_one: "{{count}} بعد عام",
+		years_two: "{{count}} بعد سنوات",
+		years_few: "{{count}} بعد سنوات",
+		years_many: "{{count}} بعد سنوات",
+		years_other: "{{count}} بعد سنوات",
+		months_zero: "{{count}} بعد أشهر",
+		months_one: "{{count}} بعد شهر",
+		months_two: "{{count}} بعد أشهر",
+		months_few: "{{count}} بعد أشهر",
+		months_many: "{{count}} بعد أشهر",
+		months_other: "{{count}} بعد أشهر",
+		weeks_zero: "{{count}} بعد أسابيع",
+		weeks_one: "{{count}} بعد أسبوع",
+		weeks_two: "{{count}} بعد أسابيع",
+		weeks_few: "{{count}} بعد أسابيع",
+		weeks_many: "{{count}} بعد أسابيع",
+		weeks_other: "{{count}} بعد أسابيع",
+		days_zero: "{{count}} بعد أيام",
+		days_one: "{{count}} بعد يوم",
+		days_two: "{{count}} بعد أيام",
+		days_few: "{{count}} بعد أيام",
+		days_many: "{{count}} بعد أيام",
+		days_other: "{{count}} بعد أيام",
+		hours_zero: "{{count}} بعد ساعات",
+		hours_one: "{{count}} بعد ساعة",
+		hours_two: "{{count}} بعد ساعات",
+		hours_few: "{{count}} بعد ساعات",
+		hours_many: "{{count}} بعد ساعات",
+		hours_other: "{{count}} بعد ساعات",
+		minutes_zero: "{{count}} بعد دقائق",
+		minutes_one: "{{count}} بعد دقيقة",
+		minutes_two: "{{count}} بعد دقائق",
+		minutes_few: "{{count}} بعد دقائق",
+		minutes_many: "{{count}} بعد دقائق",
+		minutes_other: "{{count}} بعد دقائق",
+		seconds_zero: "{{count}} بعد ثوان",
+		seconds_one: "{{count}} الثاني في وقت لاحق",
+		seconds_two: "{{count}} بعد ثوان",
+		seconds_few: "{{count}} بعد ثوان",
+		seconds_many: "{{count}} بعد ثوان",
+		seconds_other: "{{count}} بعد ثوان",
+		yearsX_zero: "بالكاد {{count}} بعد سنوات",
+		yearsX_one: "بالكاد {{count}} بعد عام",
+		yearsX_two: "بالكاد {{count}} بعد سنوات",
+		yearsX_few: "بالكاد {{count}} بعد سنوات",
+		yearsX_many: "بالكاد {{count}} بعد سنوات",
+		yearsX_other: "بالكاد {{count}} بعد سنوات",
+		monthsX_zero: "بالكاد {{count}} بعد أشهر",
+		monthsX_one: "بالكاد {{count}} بعد شهر",
+		monthsX_two: "بالكاد {{count}} بعد أشهر",
+		monthsX_few: "بالكاد {{count}} بعد أشهر",
+		monthsX_many: "بالكاد {{count}} بعد أشهر",
+		monthsX_other: "بالكاد {{count}} بعد أشهر",
+		weeksX_zero: "بالكاد {{count}} بعد أسابيع",
+		weeksX_one: "بالكاد {{count}} بعد أسبوع",
+		weeksX_two: "بالكاد {{count}} بعد أسابيع",
+		weeksX_few: "بالكاد {{count}} بعد أسابيع",
+		weeksX_many: "بالكاد {{count}} بعد أسابيع",
+		weeksX_other: "بالكاد {{count}} بعد أسابيع",
+		daysX_zero: "بالكاد {{count}} بعد أيام",
+		daysX_one: "بالكاد {{count}} بعد يوم",
+		daysX_two: "بالكاد {{count}} بعد أيام",
+		daysX_few: "بالكاد {{count}} بعد أيام",
+		daysX_many: "بالكاد {{count}} بعد أيام",
+		daysX_other: "بالكاد {{count}} بعد أيام",
+		hoursX_zero: "بالكاد {{count}} بعد ساعات",
+		hoursX_one: "بالكاد {{count}} بعد ساعة",
+		hoursX_two: "بالكاد {{count}} بعد ساعات",
+		hoursX_few: "بالكاد {{count}} بعد ساعات",
+		hoursX_many: "بالكاد {{count}} بعد ساعات",
+		hoursX_other: "بالكاد {{count}} بعد ساعات",
+		minutesX_zero: "بالكاد {{count}} بعد دقائق",
+		minutesX_one: "بالكاد {{count}} بعد دقيقة",
+		minutesX_two: "بالكاد {{count}} بعد دقائق",
+		minutesX_few: "بالكاد {{count}} بعد دقائق",
+		minutesX_many: "بالكاد {{count}} بعد دقائق",
+		minutesX_other: "بالكاد {{count}} بعد دقائق"
+	}
 };
 var ar = {
 	label: label,
-	number: number
+	relative: relative
 };
 
 exports.default = ar;
 exports.label = label;
-exports.number = number;
+exports.relative = relative;

package/dist/cjs/i18n/en.json.js

@@ -13,9 +13,71 @@ var label = {
 	hijri: "Hijri",
 	gregorian: "Gregorian"
 };
+var relative = {
+	before: {
+		now: "Just now",
+		years: "Last year",
+		years_other: "{{count}} years ago",
+		months: "Last month",
+		months_other: "{{count}} months ago",
+		weeks: "Last week",
+		weeks_other: "{{count}} weeks ago",
+		days: "Yesterday",
+		days_other: "{{count}} days ago",
+		hours: "{{count}} hour ago",
+		hours_other: "{{count}} hours ago",
+		minutes: "{{count}} minute ago",
+		minutes_other: "{{count}} minutes ago",
+		seconds: "{{count}} second ago",
+		seconds_other: "{{count}} seconds ago",
+		yearsX: "Almost {{count}} year ago",
+		yearsX_other: "Almost {{count}} years ago",
+		monthsX: "Almost {{count}} month ago",
+		monthsX_other: "Almost {{count}} months ago",
+		weeksX: "Almost {{count}} week ago",
+		weeksX_other: "Almost {{count}} weeks ago",
+		daysX: "Almost {{count}} day ago",
+		daysX_other: "Almost {{count}} days ago",
+		hoursX: "Almost {{count}} hour ago",
+		hoursX_other: "Almost {{count}} hours ago",
+		minutesX: "Almost {{count}} minute ago",
+		minutesX_other: "Almost {{count}} minutes ago"
+	},
+	after: {
+		now: "Soon",
+		years: "Next year",
+		years_other: "{{count}} years later",
+		months: "Next month",
+		months_other: "{{count}} months later",
+		weeks: "Next week",
+		weeks_other: "{{count}} weeks later",
+		days: "Tomorrow",
+		days_other: "{{count}} days later",
+		hours: "{{count}} hour later",
+		hours_other: "{{count}} hours later",
+		minutes: "{{count}} minute later",
+		minutes_other: "{{count}} minutes later",
+		seconds: "{{count}} second later",
+		seconds_other: "{{count}} seconds later",
+		yearsX: "Almost {{count}} year later",
+		yearsX_other: "Almost {{count}} years later",
+		monthsX: "Almost {{count}} month later",
+		monthsX_other: "Almost {{count}} months later",
+		weeksX: "Almost {{count}} week later",
+		weeksX_other: "Almost {{count}} weeks later",
+		daysX: "Almost {{count}} day later",
+		daysX_other: "Almost {{count}} days later",
+		hoursX: "Almost {{count}} hour later",
+		hoursX_other: "Almost {{count}} hours later",
+		minutesX: "Almost {{count}} minute later",
+		minutesX_other: "Almost {{count}} minutes later"
+	}
+};
 var en = {
-	label: label
+	label: label,
+	relative: relative
 };
 
 exports.default = en;
 exports.label = label;
+exports.relative = relative;

package/dist/cjs/index.js

@@ -6,6 +6,7 @@ var DateHeader = require('./components/DateHeader.js');
 var DecadePage = require('./components/DecadePage.js');
 var YearPage = require('./components/YearPage.js');
 var DateDisplay = require('./display/DateDisplay.js');
+var DateDuration = require('./display/DateDuration.js');
 var DatePanel = require('./panels/DatePanel.js');
 var EventPanel = require('./panels/EventPanel.js');
 var RangePanel = require('./panels/RangePanel.js');
@@ -18,6 +19,7 @@ exports.DateHeader = DateHeader.DateHeader;
 exports.DecadePage = DecadePage.DecadePage;
 exports.YearPage = YearPage.YearPage;
 exports.DateDisplay = DateDisplay.DateDisplay;
+exports.DateDuration = DateDuration.DateDuration;
 exports.DatePanel = DatePanel.DatePanel;
 exports.EventPanel = EventPanel.EventPanel;
 exports.RangePanel = RangePanel.RangePanel;

package/dist/esm/display/DateDisplay.js

@@ -4,6 +4,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useGlobals, Tooltip, Dropdown } from '@react-fabric/core';
 import { DateUtil } from '../utils/dateUtil.js';
+import classNames from 'classnames';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["date", "className", "format", "children", "showAlternateDate"];
@@ -24,7 +25,7 @@ var DateDisplay = function DateDisplay(_ref) {
     disabled: !showAlternateDate,
     content: DateUtil.format(date, format, currentLocale, currentCalendar !== "hijri"),
     children: /*#__PURE__*/jsx("span", _objectSpread(_objectSpread({
-      className: className
+      className: classNames(className, children && "underline decoration-dotted cursor-pointer")
     }, aria), {}, {
       children: DateUtil.format(date, format, currentLocale, currentCalendar === "hijri")
     }))

package/dist/esm/display/DateDuration.js

@@ -0,0 +1,127 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { Tooltip, Dropdown } from '@react-fabric/core';
+import { Format } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { intervalToDuration, isBefore } from 'date-fns';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DateUtil } from '../utils/dateUtil.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["date", "children", "className", "format"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DateDuration = function DateDuration(_ref) {
+  var date = _ref.date,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "PPpp" : _ref$format,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation("date"),
+    t = _useTranslation.t;
+  var interval = useMemo(function () {
+    return intervalToDuration({
+      start: new Date(date),
+      end: new Date()
+    });
+  }, [date]);
+  var label = useMemo(function () {
+    var before = isBefore(DateUtil.parseDate(date), new Date());
+    var tkey = before ? "relative.before" : "relative.after";
+    var part = "now";
+    var count = 0;
+    if (interval.years && interval.years > 0) {
+      var _interval$months;
+      part = "years";
+      count = interval.years;
+      if (((_interval$months = interval.months) !== null && _interval$months !== void 0 ? _interval$months : 0) > 10) {
+        part = "yearsX";
+        count += 1;
+      }
+    } else if (interval.months && interval.months > 0) {
+      var _interval$weeks;
+      part = "months";
+      count = interval.months;
+      if (interval.months > 10) {
+        part = "yearsX";
+        count = 1;
+      } else if (((_interval$weeks = interval.weeks) !== null && _interval$weeks !== void 0 ? _interval$weeks : 0) > 3) {
+        part = "monthsX";
+        count += 1;
+      }
+    } else if (interval.weeks && interval.weeks > 0) {
+      var _interval$days;
+      part = "weeks";
+      count = interval.weeks;
+      if (interval.weeks > 3) {
+        part = "monthsX";
+        count = 1;
+      } else if (((_interval$days = interval.days) !== null && _interval$days !== void 0 ? _interval$days : 0) > 5) {
+        part = "weeksX";
+        count += 1;
+      }
+    } else if (interval.days && interval.days > 0) {
+      var _interval$hours;
+      part = "days";
+      count = interval.days;
+      if (interval.days > 5) {
+        part = "weeksX";
+        count = 1;
+      } else if (((_interval$hours = interval.hours) !== null && _interval$hours !== void 0 ? _interval$hours : 0) > 20) {
+        part = "daysX";
+        count += 1;
+      }
+    } else if (interval.hours && interval.hours > 0) {
+      var _interval$minutes;
+      part = "hours";
+      count = interval.hours;
+      if (interval.hours > 20) {
+        part = "daysX";
+        count = 1;
+      } else if (((_interval$minutes = interval.minutes) !== null && _interval$minutes !== void 0 ? _interval$minutes : 0) > 45) {
+        part = "hoursX";
+        count += 1;
+      }
+    } else if (interval.minutes && interval.minutes > 0) {
+      var _interval$seconds;
+      part = "minutes";
+      count = interval.minutes;
+      if (interval.minutes > 45) {
+        part = "hoursX";
+        count = 1;
+      } else if (((_interval$seconds = interval.seconds) !== null && _interval$seconds !== void 0 ? _interval$seconds : 0) > 45) {
+        part = "minuteX";
+        count += 1;
+      }
+    } else if (interval.seconds && interval.seconds > 15) {
+      part = "seconds";
+      count = interval.seconds;
+      if (interval.seconds > 45) {
+        part = "minutesX";
+        count = 1;
+      }
+    }
+    return t("".concat(tkey, ".").concat(part), {
+      count: count
+    });
+  }, [interval, date]);
+  var dtLabel = /*#__PURE__*/jsx(Tooltip, {
+    content: Format.date(date, format),
+    children: /*#__PURE__*/jsx("span", _objectSpread(_objectSpread({
+      className: classNames(className, children && "underline decoration-dotted cursor-pointer")
+    }, props), {}, {
+      children: label
+    }))
+  });
+  return children ? /*#__PURE__*/jsxs(Dropdown, {
+    showArrow: true,
+    closeOnClick: true,
+    children: [dtLabel, children]
+  }) : dtLabel;
+};
+
+export { DateDuration };