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

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

@@ -11,11 +11,199 @@ 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
 };
 
-export { ar as default, label, number };
+export { ar as default, label, relative };

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

@@ -11,8 +11,69 @@ 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
 };
 
-export { en as default, label };
+export { en as default, label, relative };

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export { DateHeader } from './components/DateHeader.js';
 export { DecadePage } from './components/DecadePage.js';
 export { YearPage } from './components/YearPage.js';
 export { DateDisplay } from './display/DateDisplay.js';
+export { DateDuration } from './display/DateDuration.js';
 export { DatePanel } from './panels/DatePanel.js';
 export { EventPanel } from './panels/EventPanel.js';
 export { RangePanel } from './panels/RangePanel.js';

package/dist/types/display/DateDisplay.d.ts

@@ -1,8 +1,8 @@
-import { type MenuItemProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
 import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ElementType } from "react";
 import { type DateLike } from "../types";
-export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenProp<ElementType<MenuItemProps>>> {
+export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenProp<ElementType<MenuProps>>> {
     /**
      * date like value
      */

package/dist/types/display/DateDuration.d.ts

@@ -0,0 +1,15 @@
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type ElementType } from "react";
+import { type DateLike } from "../types";
+export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenProp<ElementType<MenuProps>>> {
+    /**
+     * date like value
+     */
+    date: DateLike;
+    /**
+     * date format
+     */
+    format?: string;
+}
+export declare const DateDuration: ({ date, children, className, format, ...props }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export { DateHeader } from "./components/DateHeader";
 export { DecadePage } from "./components/DecadePage";
 export { YearPage } from "./components/YearPage";
 export { DateDisplay } from "./display/DateDisplay";
+export { DateDuration } from "./display/DateDuration";
 export { DatePanel } from "./panels/DatePanel";
 export { EventPanel } from "./panels/EventPanel";
 export { RangePanel } from "./panels/RangePanel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/date",
-  "version": "1.0.0-beta.47",
+  "version": "1.0.0-beta.48",
   "description": "RUF: Date package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.47",
-    "@react-fabric/utilities": "^1.0.0-beta.47",
+    "@react-fabric/core": "^1.0.0-beta.48",
+    "@react-fabric/utilities": "^1.0.0-beta.48",
     "classnames": "^2.5.1",
-    "date-fns": "^4.0.0",
+    "date-fns": "^4.1.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "832a1bce055337127ba17c505731f419248cc15e"
+  "gitHead": "0b1001b4ae1ee67f8e1817d6395d1f3945321897"
 }

package/src/display/DateDisplay.tsx

@@ -22,7 +22,7 @@
  */
 
 import { Dropdown, Tooltip, useGlobals } from "@react-fabric/core";
-import { type MenuItemProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
 import {
   type AriaProps,
   type ChildrenProp,
@@ -32,12 +32,13 @@ import {
 import { type ElementType } from "react";
 import { type DateLike } from "../types";
 import { DateUtil } from "../utils/dateUtil";
+import classNames from "classnames";
 
 export interface Props
   extends CssProp,
     AriaProps,
     TestProps,
-    Partial<ChildrenProp<ElementType<MenuItemProps>>> {
+    Partial<ChildrenProp<ElementType<MenuProps>>> {
   /**
    * date like value
    */
@@ -70,7 +71,13 @@ export const DateDisplay = ({
         currentCalendar !== "hijri",
       )}
     >
-      <span className={className} {...aria}>
+      <span
+        className={classNames(
+          className,
+          children && "underline decoration-dotted cursor-pointer",
+        )}
+        {...aria}
+      >
         {DateUtil.format(
           date,
           format,

package/src/display/DateDuration.tsx

@@ -0,0 +1,164 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Dropdown, Tooltip } from "@react-fabric/core";
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
+import {
+  type AriaProps,
+  type ChildrenProp,
+  type CssProp,
+  type TestProps,
+} from "@react-fabric/core/dist/types/types";
+import { Format } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { intervalToDuration, isBefore } from "date-fns";
+import { useMemo, type ElementType } from "react";
+import { useTranslation } from "react-i18next";
+import { type DateLike } from "../types";
+import { DateUtil } from "../utils/dateUtil";
+
+export interface Props
+  extends CssProp,
+    AriaProps,
+    TestProps,
+    Partial<ChildrenProp<ElementType<MenuProps>>> {
+  /**
+   * date like value
+   */
+  date: DateLike;
+  /**
+   * date format
+   */
+  format?: string;
+}
+
+export const DateDuration = ({
+  date,
+  children,
+  className,
+  format = "PPpp",
+  ...props
+}: Props) => {
+  const { t } = useTranslation("date");
+
+  const interval = useMemo(() => {
+    return intervalToDuration({ start: new Date(date), end: new Date() });
+  }, [date]);
+
+  const label = useMemo(() => {
+    const before = isBefore(DateUtil.parseDate(date), new Date());
+    const tkey = before ? "relative.before" : "relative.after";
+    let part = "now";
+    let count = 0;
+    if (interval.years && interval.years > 0) {
+      part = "years";
+      count = interval.years;
+      if ((interval.months ?? 0) > 10) {
+        part = "yearsX";
+        count += 1;
+      }
+    } else if (interval.months && interval.months > 0) {
+      part = "months";
+      count = interval.months;
+      if (interval.months > 10) {
+        part = "yearsX";
+        count = 1;
+      } else if ((interval.weeks ?? 0) > 3) {
+        part = "monthsX";
+        count += 1;
+      }
+    } else if (interval.weeks && interval.weeks > 0) {
+      part = "weeks";
+      count = interval.weeks;
+      if (interval.weeks > 3) {
+        part = "monthsX";
+        count = 1;
+      } else if ((interval.days ?? 0) > 5) {
+        part = "weeksX";
+        count += 1;
+      }
+    } else if (interval.days && interval.days > 0) {
+      part = "days";
+      count = interval.days;
+      if (interval.days > 5) {
+        part = "weeksX";
+        count = 1;
+      } else if ((interval.hours ?? 0) > 20) {
+        part = "daysX";
+        count += 1;
+      }
+    } else if (interval.hours && interval.hours > 0) {
+      part = "hours";
+      count = interval.hours;
+      if (interval.hours > 20) {
+        part = "daysX";
+        count = 1;
+      } else if ((interval.minutes ?? 0) > 45) {
+        part = "hoursX";
+        count += 1;
+      }
+    } else if (interval.minutes && interval.minutes > 0) {
+      part = "minutes";
+      count = interval.minutes;
+      if (interval.minutes > 45) {
+        part = "hoursX";
+        count = 1;
+      } else if ((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(`${tkey}.${part}`, { count });
+  }, [interval, date]);
+
+  const dtLabel = (
+    <Tooltip content={Format.date(date, format)}>
+      <span
+        className={classNames(
+          className,
+          children && "underline decoration-dotted cursor-pointer",
+        )}
+        {...props}
+      >
+        {label}
+      </span>
+    </Tooltip>
+  );
+
+  return children ? (
+    <Dropdown showArrow closeOnClick>
+      {dtLabel}
+      {children}
+    </Dropdown>
+  ) : (
+    dtLabel
+  );
+};