@react-fabric/date 1.0.0-beta.9 → 1.0.2

package/dist/esm/panels/DatePanel.js

@@ -3,11 +3,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useGlobals, useDebounce, Button } from '@react-fabric/core';
-import { isEmpty, isArray } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { useApplicationContext, usePropState, useDebounce, Button } from '@react-fabric/core';
+import { isEmpty, isArray, cn } from '@react-fabric/utilities';
 import { isBefore, isAfter, isSameDay } from 'date-fns';
-import { useState, useEffect, useReducer, useCallback } from 'react';
+import { useState, useReducer, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PageType } from '../types/index.js';
 import { DateUtil } from '../utils/dateUtil.js';
@@ -16,8 +15,29 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "max", "min", "dateDisabled", "onChange", "showHijriToggle", "value", "withTime"];
 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 DatePanel = function DatePanel(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+/**
+ * DatePanel component to display a date picker with options for selecting a date and time.
+ * It allows switching between Gregorian and Hijri calendars, and includes buttons for selecting today or canceling the selection.
+ * It uses the current calendar and locale from the global context.
+ * It handles date selection, time changes, and page navigation within the date picker.
+ * It also supports disabling specific dates and setting minimum and maximum date limits.
+ *
+ * @example
+ * ```jsx
+ * <DatePanel
+ *   className="my-date-panel"
+ *   max="2025-12-31"
+ *   min="2020-01-01"
+ *   dateDisabled={["2023-01-01", "2023-12-25"]}
+ *   onChange={(date) => console.log("Selected date:", date)}
+ *   showHijriToggle={true}
+ *   value={new Date()}
+ *   withTime={true}
+ * />
+ * ```
+ */
+function DatePanel(_ref) {
   var className = _ref.className,
     max = _ref.max,
     min = _ref.min,
@@ -29,20 +49,17 @@ var DatePanel = function DatePanel(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
-  var _useState = useState(currentCalendar === "hijri"),
+  var _useApplicationContex = useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
+  var _usePropState = usePropState(currentCalendar === "hijri"),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    isHijri = _usePropState2[0],
+    setIsHijri = _usePropState2[1];
+  var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    isHijri = _useState2[0],
-    setHijri = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    canSelectToday = _useState4[0],
-    setCanSelectToday = _useState4[1];
+    canSelectToday = _useState2[0],
+    setCanSelectToday = _useState2[1];
   var fireChange = useDebounce(onChange, [onChange]);
-  useEffect(function () {
-    setHijri(currentCalendar === "hijri");
-  }, [currentCalendar]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "reset") {
         if (!isEmpty(action.date)) {
@@ -76,7 +93,7 @@ var DatePanel = function DatePanel(_ref) {
       }
       if (action.type === "changePageDate") {
         state.pageDate = action.date;
-        action.pageChange && (state.page = Math.max(state.page - 1, 0));
+        if (action.pageChange) state.page = Math.max(state.page - 1, 0);
       }
       if (action.type === "changeDate" || action.type === "changeTime") {
         if (min && state.selected && isBefore(state.selected, new Date(min))) {
@@ -89,14 +106,20 @@ var DatePanel = function DatePanel(_ref) {
           state.hour = state.selected.getHours();
           state.minute = state.selected.getMinutes();
         }
-        state.selected && (fireChange === null || fireChange === void 0 ? void 0 : fireChange(state.selected.toISOString()));
+        if (state.selected) fireChange === null || fireChange === void 0 || fireChange(state.selected.toISOString());
       }
       return _objectSpread({}, state);
     }, {
       page: PageType.DATE,
-      pageDate: new Date(),
       hour: 0,
       minute: 0
+    }, function () {
+      return {
+        page: PageType.DATE,
+        pageDate: new Date(),
+        hour: 0,
+        minute: 0
+      };
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -109,6 +132,7 @@ var DatePanel = function DatePanel(_ref) {
     if (max && canSelect) {
       canSelect = isBefore(new Date(), max);
     }
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setCanSelectToday(canSelect);
   }, [min, max]);
   useEffect(function () {
@@ -142,7 +166,7 @@ var DatePanel = function DatePanel(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: cn("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsx(BasePanel, _objectSpread(_objectSpread({}, state), {}, {
       max: max,
@@ -172,7 +196,7 @@ var DatePanel = function DatePanel(_ref) {
           color: "primary",
           className: "my-1",
           onClick: function onClick() {
-            setHijri(!isHijri);
+            setIsHijri(!isHijri);
           },
           children: t(isHijri ? "label.gregorian" : "label.hijri")
         })
@@ -200,6 +224,6 @@ var DatePanel = function DatePanel(_ref) {
       })]
     })]
   }));
-};
+}
 
 export { DatePanel };

package/dist/esm/{superdate → panels}/EventPanel.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Section, Content } from '@react-fabric/core';
+import { Layout, Content } from '@react-fabric/core';
 import { EMPTY_ARRAY } from '@react-fabric/utilities';
 import { startOfDay, endOfDay, isSameMonth, setYear } from 'date-fns';
 import i18next from 'i18next';
@@ -17,8 +17,8 @@ import { DateUtil } from '../utils/dateUtil.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 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 makeList = function makeList(year) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+function makeList(year) {
   var recurring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var predefined = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var list = _toConsumableArray(predefined);
@@ -56,8 +56,8 @@ var makeList = function makeList(year) {
   return list.sort(function (a, b) {
     return a.start.getTime() < b.start.getTime() ? -1 : 1;
   });
-};
-var EventPanel = function EventPanel(_ref) {
+}
+function EventPanel(_ref) {
   var isHijri = _ref.isHijri,
     onChange = _ref.onChange,
     _ref$events = _ref.events,
@@ -66,7 +66,9 @@ var EventPanel = function EventPanel(_ref) {
     recurringEvents = _ref$recurringEvents === void 0 ? EMPTY_ARRAY : _ref$recurringEvents;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState({}),
+  var _useState = useState(function () {
+      return {};
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     predefined = _useState2[0],
     setPredefined = _useState2[1];
@@ -82,7 +84,7 @@ var EventPanel = function EventPanel(_ref) {
       if (action.type === "changePageDate") {
         resetList = true;
         state.pageDate = action.date;
-        if (action.changePage !== false) {
+        if (action.changePage) {
           state.page = Math.max(state.page - 1, PageType.MONTH);
         }
       }
@@ -93,9 +95,14 @@ var EventPanel = function EventPanel(_ref) {
       }
       return _objectSpread({}, state);
     }, {
-      pageDate: new Date(),
       page: PageType.MONTH,
       events: []
+    }, function () {
+      return {
+        pageDate: new Date(),
+        page: PageType.MONTH,
+        events: []
+      };
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -110,16 +117,24 @@ var EventPanel = function EventPanel(_ref) {
     events.forEach(function (evt) {
       var start = startOfDay(new Date(evt.start));
       var end = endOfDay(new Date(evt.end));
-      if (!predefined[start.getFullYear()]) predefined[start.getFullYear()] = [];
-      predefined[start.getFullYear()].push(evt);
+      var startYear = start.getFullYear();
+      if (!predefined[startYear]) predefined[startYear] = [];
+      predefined[startYear].push(_objectSpread(_objectSpread({}, evt), {}, {
+        start: start,
+        end: end
+      }));
       if (start.getFullYear() !== end.getFullYear()) {
         if (!predefined[end.getFullYear()]) predefined[end.getFullYear()] = [];
-        predefined[end.getFullYear()].push(evt);
+        predefined[end.getFullYear()].push(_objectSpread(_objectSpread({}, evt), {}, {
+          start: start,
+          end: end
+        }));
       }
     });
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setPredefined(predefined);
   }, [events]);
-  return /*#__PURE__*/jsxs(Section, {
+  return /*#__PURE__*/jsxs(Layout, {
     children: [/*#__PURE__*/jsx(DateHeader, {
       page: state.page,
       pageDate: state.pageDate,
@@ -141,6 +156,7 @@ var EventPanel = function EventPanel(_ref) {
       children: state.events.map(function (evt) {
         return /*#__PURE__*/jsxs("div", {
           role: "none",
+          "data-dropdown-dismiss": "true",
           onClick: function onClick() {
             onChange === null || onChange === void 0 || onChange("".concat(evt.start.toISOString(), "|").concat(evt.end.toISOString()), [evt.start.toISOString(), evt.end.toISOString()]);
           },
@@ -180,6 +196,6 @@ var EventPanel = function EventPanel(_ref) {
       }
     })]
   });
-};
+}
 
 export { EventPanel };

package/dist/esm/panels/RangePanel.js

@@ -3,11 +3,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useGlobals, useDebounce, Button } from '@react-fabric/core';
-import { isEmpty, isArray } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { useApplicationContext, usePropState, useDebounce, Button } from '@react-fabric/core';
+import { isEmpty, isArray, cn } from '@react-fabric/utilities';
 import { isAfter, addMonths, isBefore, isSameDay } from 'date-fns';
-import { useState, useEffect, useReducer, useCallback } from 'react';
+import { useReducer, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PageType } from '../types/index.js';
 import { DateUtil } from '../utils/dateUtil.js';
@@ -16,8 +15,26 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "max", "min", "dateDisabled", "onChange", "showHijriToggle", "value", "withTime", "showApply"];
 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 RangePanel = function RangePanel(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+/**
+ * RangePanel component to display a date range picker with options for selecting a start and end date.
+ * It allows switching between Gregorian and Hijri calendars, and includes buttons for applying or canceling the selection.
+ * It uses the current calendar and locale from the global context.
+ * It handles date selection, time changes, and page navigation within the date picker.
+ * It also supports disabling specific dates and setting minimum and maximum date limits.
+ *
+ * @example
+ * ```jsx
+ * <RangePanel
+ *   className="my-range-panel"
+ *   max="2025-12-31"
+ *   min="2020-01-01"
+ *  dateDisabled={["2023-01-01", "2023-12-25"]}
+ *  onChange={(dateRange) => console.log("Selected date range:", dateRange)}
+ * />
+ * ```
+ */
+function RangePanel(_ref) {
   var className = _ref.className,
     max = _ref.max,
     min = _ref.min,
@@ -31,16 +48,13 @@ var RangePanel = function RangePanel(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
-  var _useState = useState(currentCalendar === "hijri"),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHijri = _useState2[0],
-    setHijri = _useState2[1];
+  var _useApplicationContex = useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
+  var _usePropState = usePropState(currentCalendar === "hijri"),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    isHijri = _usePropState2[0],
+    setIsHijri = _usePropState2[1];
   var fireChange = useDebounce(onChange, [onChange]);
-  useEffect(function () {
-    setHijri(currentCalendar === "hijri");
-  }, [currentCalendar]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "reset") {
         if (!isEmpty(action.date)) {
@@ -119,7 +133,7 @@ var RangePanel = function RangePanel(_ref) {
         state[action.range].pageDate = action.date;
         if (action.pageChange) {
           state[action.range].page = Math.max(state[action.range].page - 1, 0);
-          action.range === "start" && state.start.page === PageType.DATE && (state.end.pageDate = addMonths(action.date, 1));
+          if (action.range === "start" && state.start.page === PageType.DATE) state.end.pageDate = addMonths(action.date, 1);
         }
       }
       if (action.type === "changeDate" || action.type === "changeTime") {
@@ -133,22 +147,37 @@ var RangePanel = function RangePanel(_ref) {
           state.end.hour = state.selected[1].getHours();
           state.end.minute = state.selected[1].getMinutes();
         }
-        !showApply && state.selected && !state.hilight && (fireChange === null || fireChange === void 0 ? void 0 : fireChange([state.selected[0].toISOString(), state.selected[1].toISOString()]));
+        if (!showApply && state.selected && !state.hilight) fireChange === null || fireChange === void 0 || fireChange([state.selected[0].toISOString(), state.selected[1].toISOString()]);
       }
       return _objectSpread({}, state);
     }, {
       start: {
         page: PageType.DATE,
-        pageDate: new Date(),
         hour: 0,
         minute: 0
       },
       end: {
         page: PageType.DATE,
-        pageDate: DateUtil.addMonths(new Date(), 1, isHijri),
         hour: 0,
         minute: 0
       }
+    }, function () {
+      return {
+        start: {
+          page: PageType.DATE,
+          pageDate: new Date(),
+          hour: 0,
+          minute: 0
+        },
+        end: {
+          page: PageType.DATE,
+          pageDate: DateUtil.addMonths(new Date(), 1, isHijri),
+          hour: 0,
+          minute: 0
+        },
+        hilight: undefined,
+        selected: undefined
+      };
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -204,7 +233,7 @@ var RangePanel = function RangePanel(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: cn("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex flex-nowrap",
@@ -280,7 +309,7 @@ var RangePanel = function RangePanel(_ref) {
           color: "primary",
           className: "my-1",
           onClick: function onClick() {
-            setHijri(!isHijri);
+            setIsHijri(!isHijri);
           },
           children: t(isHijri ? "label.gregorian" : "label.hijri")
         })
@@ -326,6 +355,7 @@ var RangePanel = function RangePanel(_ref) {
         variant: "solid",
         color: "primary",
         disabled: !state.selected,
+        "data-dropdown-dismiss": "true",
         className: "my-1",
         onClick: function onClick() {
           var _state$selected, _state$selected2;
@@ -335,6 +365,6 @@ var RangePanel = function RangePanel(_ref) {
       })]
     })]
   }));
-};
+}
 
 export { RangePanel };

package/dist/esm/utils/dateUtil.js

@@ -1,11 +1,11 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { startOfDay, startOfWeek, startOfMonth, startOfYear, startOfDecade, addYears, endOfDay, endOfWeek, endOfMonth, endOfYear, endOfDecade, addDays, addWeeks, addMonths, isSameMonth, isSameYear, isBefore, isAfter, startOfMinute, startOfQuarter, endOfQuarter, addQuarters, startOfHour, endOfHour, addHours, endOfMinute, addMinutes, format } from 'date-fns';
-import { PageType, DatePart } from '../types/index.js';
 import { isNil, isString } from '@react-fabric/utilities';
-import { arSA, enUS, de, es, fr, hi, it, ja, ko, pt, ru, zhCN } from 'date-fns/locale';
+import { startOfDay, startOfWeek, startOfMonth, startOfYear, startOfDecade, addYears, endOfDay, endOfWeek, endOfMonth, endOfYear, endOfDecade, addDays, addWeeks, addMonths, isSameMonth, isSameYear, isBefore, isAfter, startOfMinute, startOfQuarter, endOfQuarter, addQuarters, startOfHour, endOfHour, addHours, endOfMinute, addMinutes, format } from 'date-fns';
+import { enUS, zhCN, ru, pt, ko, ja, it, hi, fr, es, de, arSA } from 'date-fns/locale';
 import i18next from 'i18next';
+import { DatePart, PageType } from '../types/index.js';
 
 var Locales = {
   ar: arSA,
@@ -21,8 +21,6 @@ var Locales = {
   ru: ru,
   zh: zhCN
 };
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
 var DateUtil;
 (function (_DateUtil) {
   var translateNumber = function translateNumber(d) {
@@ -257,7 +255,7 @@ var DateUtil;
   };
   _DateUtil.getWeek = function (date, locale) {
     var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var ret = "";
+    var ret;
     if (isHijri) {
       var start = startOfYear$1(date, isHijri);
       ret = format$1(new Date(date.getTime() - start.getTime()), "ww");

package/dist/types/components/DateCell.d.ts

@@ -12,4 +12,4 @@ export interface DateCellProps {
     mouseOver?: (date: Date) => void;
     dateDisabled?: (date: Date) => boolean;
 }
-export declare const DateCell: ({ date, isMuted, ...props }: DateCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare function DateCell({ date, isMuted, ...props }: DateCellProps): import("react").JSX.Element;

package/dist/types/components/DateHeader.d.ts

@@ -10,5 +10,5 @@ interface Props {
     changePage: (page: PageType) => void;
     changePageDate: (date: Date) => void;
 }
-export declare const DateHeader: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function DateHeader(props: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DatePage.d.ts

@@ -2,5 +2,5 @@ import { type DateCellProps } from "./DateCell";
 interface Props extends Omit<DateCellProps, "date"> {
     pageDate: Date;
 }
-export declare const DatePage: ({ pageDate, isHijri, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function DatePage({ pageDate, isHijri, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DecadePage.d.ts

@@ -2,5 +2,5 @@ import { type DateCellProps } from "./DateCell";
 interface Props extends Omit<DateCellProps, "date"> {
     pageDate: Date;
 }
-export declare const DecadePage: ({ pageDate, isHijri, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function DecadePage({ pageDate, isHijri, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/MonthPage.d.ts

@@ -2,5 +2,5 @@ import { type DateCellProps } from "./DateCell";
 interface Props extends Omit<DateCellProps, "date"> {
     pageDate: Date;
 }
-export declare const MonthPage: ({ pageDate, isHijri, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function MonthPage({ pageDate, isHijri, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/TimeSliders.d.ts

@@ -6,5 +6,5 @@ interface Props {
         minute: number;
     }) => void;
 }
-export declare const TimeSlider: ({ hour, minute, onTimeChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function TimeSlider({ hour, minute, onTimeChange }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/YearPage.d.ts

@@ -2,5 +2,5 @@ import { type DateCellProps } from "./DateCell";
 interface Props extends Omit<DateCellProps, "date"> {
     pageDate: Date;
 }
-export declare const YearPage: ({ pageDate, isHijri, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function YearPage({ pageDate, isHijri, ...props }: Props): import("react").JSX.Element;
 export {};

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 AriaProps, type ChildrenProp, type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { 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, TestProps, Partial<ChildrenProp<ElementType<MenuProps>>> {
     /**
      * date like value
      */
@@ -11,5 +11,18 @@ export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenPr
      * date format
      */
     format?: string;
+    showAlternateDate?: boolean;
 }
-export declare const DateDisplay: ({ date, className, format, children, ...aria }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * DateDisplay component to display a formatted gregorian or hijri date with optional tooltip and dropdown.
+ * It uses the current calendar and locale from the global context.
+ * It formats the date using the provided format or a default format.
+ * If `showAlternateDate` is true, it shows a tooltip with the formatted date.
+ * If `children` are provided, it wraps the date in a dropdown.
+ *
+ * @example
+ * ```jsx
+ * <DateDisplay date={new Date()} />
+ * ```
+ */
+export declare function DateDisplay({ date, className, format, children, showAlternateDate, ...aria }: Props): import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { type ChildrenProp, type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "../types";
+export interface Props extends CssProp, TestProps, Partial<ChildrenProp<MenuProps>> {
+    /**
+     * date like value
+     */
+    date: DateLike;
+    /**
+     * date format
+     */
+    format?: string;
+}
+/**
+ * DateDuration component to display the duration from a given date to now.
+ * It calculates the difference in years, months, weeks, days, hours, minutes, and seconds,
+ * and displays it in a human-readable format.
+ * It uses the current locale for translations.
+ *
+ * @example
+ * ```jsx
+ * <DateDuration date={new Date("2020-01-01")} />
+ * ```
+ */
+export declare function DateDuration({ date, children, className, format, ...props }: Props): import("react").JSX.Element;

package/dist/types/hijri/DateConverter.d.ts

@@ -0,0 +1,13 @@
+export function weekDay(wdn: any): "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun" | "";
+export function GregToHijri(gregDate: any): {
+    year: number;
+    month: number;
+    date: number;
+    hours: any;
+    minutes: any;
+    seconds: any;
+    milliseconds: any;
+    day: number;
+    dayName: string;
+};
+export function HijriToGreg(hijriDate: any): Date;

package/dist/types/hijri/FormatDate.d.ts

@@ -0,0 +1,19 @@
+export namespace masks {
+    let _default: string;
+    export { _default as default };
+    export let shortDate: string;
+    export let mediumDate: string;
+    export let longDate: string;
+    export let fullDate: string;
+    export let shortTime: string;
+    export let mediumTime: string;
+    export let longTime: string;
+    export let isoDate: string;
+    export let isoTime: string;
+    export let isoDateTime: string;
+    export let isoUtcDateTime: string;
+}
+export default dateFormat;
+declare function dateFormat(date: any, mask: any, options?: {
+    utc: boolean;
+}, ...args: any[]): any;