@react-fabric/date 1.0.0-beta.0

package/dist/cjs/utils/dateUtil.js

@@ -0,0 +1,436 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var dateFns = require('date-fns');
+var index = require('../types/index.js');
+var utilities = require('@react-fabric/utilities');
+var locale = require('date-fns/locale');
+var i18next = require('i18next');
+
+var Locales = {
+  ar: locale.arSA,
+  en: locale.enUS,
+  de: locale.de,
+  es: locale.es,
+  fr: locale.fr,
+  hi: locale.hi,
+  it: locale.it,
+  ja: locale.ja,
+  ko: locale.ko,
+  pt: locale.pt,
+  ru: locale.ru,
+  zh: locale.zhCN
+};
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+exports.DateUtil = void 0;
+(function (_DateUtil) {
+  var translateNumber = function translateNumber(d) {
+    return d.replace(/0/g, "٠").replace(/1/g, "١").replace(/2/g, "٢").replace(/3/g, "٣").replace(/4/g, "٤").replace(/5/g, "٥").replace(/6/g, "٦").replace(/7/g, "٧").replace(/8/g, "٨").replace(/9/g, "٩");
+  };
+  var formatGregorian = function formatGregorian(dt) {
+    var _Locales$loc;
+    var fmt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+    var loc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "en";
+    var ret = dateFns.format(dt, fmt, {
+      locale: (_Locales$loc = Locales[loc]) !== null && _Locales$loc !== void 0 ? _Locales$loc : Locales.en
+    });
+    return loc && loc === "ar" ? translateNumber(ret) : ret;
+  };
+  var formatHijri = function formatHijri(dt) {
+    var fmt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+    var loc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "en";
+    var hdate = dt.toHijri();
+    var ret = hdate.format(fmt, {
+      locale: loc
+    });
+    return loc && loc === "ar" ? translateNumber(ret) : ret;
+  };
+  var addHijriDays = function addHijriDays(dt, d) {
+    var hdate = dt.toHijri().ignoreTime();
+    if (d < 0) {
+      return hdate.subtractDays(d);
+    } else {
+      return hdate.addDays(d);
+    }
+  };
+  var addHijriMonth = function addHijriMonth(dt, d) {
+    var hdate = dt.toHijri().ignoreTime();
+    if (hdate.month + d > 12) {
+      hdate.year += 1;
+      hdate.month = 1;
+    } else if (hdate.month + d < 1) {
+      hdate.year -= 1;
+      hdate.month = 12;
+    } else {
+      hdate.month += d;
+    }
+    return hdate;
+  };
+  var format = _DateUtil.format = function (date) {
+    var fmt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "dd MMM yyyy";
+    var locale = arguments.length > 2 ? arguments[2] : undefined;
+    var isHijri = arguments.length > 3 ? arguments[3] : undefined;
+    var formatted = "";
+    if (!utilities.isNil(date)) {
+      var dt = isRelative(date) ? parseDate(date) : new Date(date);
+      if (dt != null) {
+        formatted = isHijri ? formatHijri(dt, fmt, locale) : formatGregorian(dt, fmt, locale);
+      }
+    }
+    return formatted;
+  };
+  var isRelative = _DateUtil.isRelative = function (date) {
+    return utilities.isString(date) && date.match(/^(\$\w+)([+-])(\d+)?$/) !== null;
+  };
+  _DateUtil.isRelativeRange = function (date) {
+    return utilities.isString(date) && date.match(/^(\$\w+)([+-])(\d+)?\|(\$\w+)([+-])(\d+)?$/) !== null;
+  };
+  var startOfDay = _DateUtil.startOfDay = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!date) return new Date();
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      return hdate.toGregorian();
+    } else {
+      return dateFns.startOfDay(date);
+    }
+  };
+  var startOfWeek = _DateUtil.startOfWeek = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.subtractDays(hdate.day);
+      return hdate.toGregorian();
+    } else {
+      return dateFns.startOfWeek(date);
+    }
+  };
+  var startOfMonth = _DateUtil.startOfMonth = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.date = 1;
+      return hdate.toGregorian();
+    } else {
+      return dateFns.startOfMonth(date);
+    }
+  };
+  var startOfYear = _DateUtil.startOfYear = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.date = 1;
+      hdate.month = 1;
+      return hdate.toGregorian();
+    } else {
+      return dateFns.startOfYear(date);
+    }
+  };
+  var startOfDecade = _DateUtil.startOfDecade = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.date = 1;
+      hdate.month = 1;
+      hdate.year -= hdate.year % 10;
+      return hdate.toGregorian();
+    } else {
+      return dateFns.startOfDecade(date);
+    }
+  };
+  _DateUtil.startOfCentury = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.date = 1;
+      hdate.month = 1;
+      hdate.year -= hdate.year % 100;
+      return hdate.toGregorian();
+    } else {
+      return dateFns.addYears(dateFns.startOfYear(date), -1 * (date.getFullYear() % 100));
+    }
+  };
+  var endOfDay = _DateUtil.endOfDay = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!date) return new Date();
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      return dateFns.endOfDay(hdate.toGregorian());
+    } else {
+      return dateFns.endOfDay(date);
+    }
+  };
+  var endOfWeek = _DateUtil.endOfWeek = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.addDays(6 - hdate.day);
+      return dateFns.endOfDay(hdate.toGregorian());
+    } else {
+      return dateFns.endOfWeek(date);
+    }
+  };
+  var endOfMonth = _DateUtil.endOfMonth = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = addHijriMonth(date, 1);
+      hdate.date = 1;
+      hdate.subtractDay();
+      return dateFns.endOfDay(hdate.toGregorian());
+    } else {
+      return dateFns.endOfMonth(date);
+    }
+  };
+  var endOfYear = _DateUtil.endOfYear = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.year += 1;
+      hdate.month = 1;
+      hdate.date = 1;
+      hdate.subtractDay();
+      return dateFns.endOfDay(hdate.toGregorian());
+    } else {
+      return dateFns.endOfYear(date);
+    }
+  };
+  var endOfDecade = _DateUtil.endOfDecade = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.year += 10 - hdate.year % 10;
+      hdate.month = 1;
+      hdate.date = 1;
+      hdate.subtractDay();
+      return dateFns.endOfDay(hdate.toGregorian());
+    } else {
+      return dateFns.endOfDecade(date);
+    }
+  };
+  _DateUtil.endOfCentury = function (date) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.year += 100 - hdate.year % 100;
+      hdate.month = 1;
+      hdate.date = 1;
+      hdate.subtractDay();
+      return dateFns.endOfDay(hdate.toGregorian());
+    } else {
+      return dateFns.addYears(dateFns.endOfYear(date), 100 - date.getFullYear() % 100);
+    }
+  };
+  var addDays = _DateUtil.addDays = function (date, d) {
+    var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isHijri) {
+      return addHijriDays(date, d).toGregorian();
+    } else {
+      return dateFns.addDays(date, d);
+    }
+  };
+  var addWeeks = _DateUtil.addWeeks = function (date, d) {
+    var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isHijri) {
+      return addHijriDays(date, d * 7).toGregorian();
+    } else {
+      return dateFns.addWeeks(date, d);
+    }
+  };
+  var addMonths = _DateUtil.addMonths = function (date, d) {
+    var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isHijri) {
+      return addHijriMonth(date, d).toGregorian();
+    } else {
+      return dateFns.addMonths(date, d);
+    }
+  };
+  var addYears = _DateUtil.addYears = function (date, d) {
+    var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      hdate.year += d;
+      return hdate.toGregorian();
+    } else {
+      return dateFns.addYears(date, d);
+    }
+  };
+  _DateUtil.getWeek = function (date, locale) {
+    var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var ret = "";
+    if (isHijri) {
+      var start = startOfYear(date, isHijri);
+      ret = format(new Date(date.getTime() - start.getTime()), "ww");
+    } else {
+      ret = format(date, "ww");
+    }
+    if (locale === "ar") {
+      return translateNumber(ret);
+    }
+    return ret;
+  };
+  var isSameMonth = _DateUtil.isSameMonth = function (date, compare) {
+    var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      var hcompare = compare.toHijri().ignoreTime();
+      return hdate.month === hcompare.month;
+    } else {
+      return dateFns.isSameMonth(date, compare);
+    }
+  };
+  var isSameYear = _DateUtil.isSameYear = function (date, compare) {
+    var isHijri = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isHijri) {
+      var hdate = date.toHijri().ignoreTime();
+      var hcompare = compare.toHijri().ignoreTime();
+      return hdate.year === hcompare.year;
+    } else {
+      return dateFns.isSameYear(date, compare);
+    }
+  };
+  _DateUtil.isDisabled = function (date, page, min, max) {
+    var methods = [dateFns.startOfDay, dateFns.endOfDay];
+    if (page === index.PageType.MONTH) {
+      methods = [dateFns.startOfMonth, dateFns.endOfMonth];
+    } else if (page === index.PageType.YEAR) {
+      methods = [dateFns.startOfYear, dateFns.endOfYear];
+    } else if (page === index.PageType.DECADE) {
+      methods = [dateFns.startOfDecade, dateFns.endOfDecade];
+    }
+    var _methods = methods,
+      _methods2 = _slicedToArray(_methods, 2),
+      start = _methods2[0],
+      end = _methods2[1];
+    return !(min == null) && dateFns.isBefore(start(date), start(min)) || !(max == null) && dateFns.isAfter(end(date), end(max));
+  };
+  var parseDate = _DateUtil.parseDate = function (datelike) {
+    return _parse(datelike);
+  };
+  var parseRange = _DateUtil.parseRange = function (datelike) {
+    var _datelike$split = datelike.split("|"),
+      _datelike$split2 = _slicedToArray(_datelike$split, 2),
+      start = _datelike$split2[0],
+      end = _datelike$split2[1];
+    var parseStart = _parse(start, !end ? "start" : undefined);
+    var parseEnd = _parse(end !== null && end !== void 0 ? end : start, !end ? "end" : undefined);
+    return dateFns.isBefore(parseStart, parseEnd) ? [parseStart, parseEnd] : [parseEnd, parseStart];
+  };
+  _DateUtil.relativeTooltip = function (datelike) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!datelike) return "";
+    var _parseRange = parseRange(datelike),
+      _parseRange2 = _slicedToArray(_parseRange, 2),
+      start = _parseRange2[0],
+      end = _parseRange2[1];
+    return end ? [format(start, "MMM dd yyyy, HH:mm:ss aaa", i18next.language, isHijri), format(end, "MMM dd yyyy, HH:mm:ss aaa", i18next.language, isHijri)].join(" ".concat(i18next.t("superdate:separator", "→"), " ")) : format(start, "MMM dd yyyy, HH:mm:ss aaa", i18next.language, isHijri);
+  };
+  _DateUtil.relativeLabel = function (datelike) {
+    var isHijri = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!datelike) return "";
+    var _datelike$split3 = datelike.split("|"),
+      _datelike$split4 = _slicedToArray(_datelike$split3, 2),
+      start = _datelike$split4[0],
+      end = _datelike$split4[1];
+    var labels = [_parseLabel(start), _parseLabel(end)];
+    if (start && end && !start.match(/^\$\w+/) && !end.match(/^\$\w+/)) {
+      var parseStart = _parse(start);
+      var parseEnd = _parse(end);
+      if (isSameYear(parseStart, parseEnd)) {
+        labels = [format(parseStart, isSameMonth(parseStart, parseEnd) ? "dd" : "dd MMM", i18next.language, isHijri), format(parseEnd, "dd MMM yyyy", i18next.language, isHijri)];
+      } else {
+        labels = [format(parseStart, "dd MMM yyyy", i18next.language, isHijri), format(parseEnd, "dd MMM yyyy", i18next.language, isHijri)];
+      }
+    } else if (start && !start.match(/^\$\w+/)) {
+      var _parseStart = _parse(start);
+      labels = [format(_parseStart, "dd MMM yyyy", i18next.language, isHijri)];
+    }
+    return end ? labels.join(" ".concat(i18next.t("superdate:separator", "→"), " ")) : labels[0];
+  };
+  var _parseLabel = function _parseLabel(dt) {
+    var _dt$match;
+    if (!dt) return "";
+    var _ref = (_dt$match = dt.match(/^(\$\w+)([+-])?(\d+)?$/)) !== null && _dt$match !== void 0 ? _dt$match : [],
+      _ref2 = _slicedToArray(_ref, 4),
+      part = _ref2[1],
+      _ref2$ = _ref2[2],
+      op = _ref2$ === void 0 ? "+" : _ref2$,
+      _ref2$2 = _ref2[3],
+      diff = _ref2$2 === void 0 ? 0 : _ref2$2;
+    if (part) {
+      var t = function t(k, o) {
+        return i18next.t("superdate:".concat(k), o);
+      };
+      if (part === index.DatePart.NOW) {
+        return t("label.".concat(index.DatePart.NOW));
+      }
+      if (diff === 0) {
+        return t("now.".concat(part));
+      } else {
+        return t("".concat(op === "+" ? "next" : "prev", ".").concat(part), {
+          count: parseInt(diff, 10)
+        });
+      }
+    }
+  };
+  var _parse = function _parse(dt, rounded) {
+    var _dt$match2;
+    var _ref3 = (_dt$match2 = dt.match(/^(\$\w+)([+-]\d+)?$/)) !== null && _dt$match2 !== void 0 ? _dt$match2 : [],
+      _ref4 = _slicedToArray(_ref3, 3),
+      part = _ref4[1],
+      _ref4$ = _ref4[2],
+      diff = _ref4$ === void 0 ? "0" : _ref4$;
+    if (part) {
+      var date = dateFns.startOfMinute(new Date());
+      switch (part) {
+        case index.DatePart.NOW:
+          if (rounded) {
+            date = (rounded === "start" ? startOfDay : endOfDay)(date);
+          }
+          return date;
+        case index.DatePart.MINUTE:
+          if (rounded) {
+            date = (rounded === "start" ? dateFns.startOfMinute : dateFns.endOfMinute)(date);
+          }
+          return dateFns.addMinutes(date, parseInt(diff, 10));
+        case index.DatePart.HOUR:
+          if (rounded) {
+            date = (rounded === "start" ? dateFns.startOfHour : dateFns.endOfHour)(date);
+          }
+          return dateFns.addHours(date, parseInt(diff, 10));
+        case index.DatePart.DAY:
+          if (rounded) {
+            date = (rounded === "start" ? startOfDay : endOfDay)(date);
+          }
+          return addDays(date, parseInt(diff, 10));
+        case index.DatePart.WEEK:
+          if (rounded) {
+            date = (rounded === "start" ? startOfWeek : endOfWeek)(date);
+          }
+          return addWeeks(date, parseInt(diff, 10));
+        case index.DatePart.MONTH:
+          if (rounded) {
+            date = (rounded === "start" ? startOfMonth : endOfMonth)(date);
+          }
+          return addMonths(date, parseInt(diff, 10));
+        case index.DatePart.QUARTER:
+          if (rounded) {
+            date = (rounded === "start" ? dateFns.startOfQuarter : dateFns.endOfQuarter)(date);
+          }
+          return dateFns.addQuarters(date, parseInt(diff, 10));
+        case index.DatePart.YEAR:
+          if (rounded) {
+            date = (rounded === "start" ? startOfYear : endOfYear)(date);
+          }
+          return addYears(date, parseInt(diff, 10));
+        case index.DatePart.DECADE:
+          if (rounded) {
+            date = (rounded === "start" ? startOfDecade : endOfDecade)(date);
+          }
+          return addYears(date, parseInt(diff, 10) * 10);
+      }
+    }
+    return new Date(dt);
+  };
+})(exports.DateUtil || (exports.DateUtil = {})); // @ts-expect-error ignore
+window.DateUtil = exports.DateUtil;

package/dist/esm/components/Date.module.css

@@ -0,0 +1 @@
+@layer comp{.dateHeader{box-shadow:inset 0 -1px 0 theme(colors.tint.200/50%)}.timeSlider{height:11.25rem;&:after,&:before{box-shadow:0 0 3rem .25rem theme(colors.tint.600);content:"";display:block;z-index:10}&:before{position:sticky;top:0}&:after{bottom:0;position:sticky}&>:first-child,&>:last-child{height:calc(50% - .75rem)}& [data-skew="1"]>div{opacity:.9;transform:scaleY(.9)}& [data-skew="2"]>div{opacity:.75;transform:scaleY(.75)}& [data-skew="3"]>div{opacity:.65;transform:scaleY(.65)}& [data-skew="4"]>div{opacity:.5;transform:scaleY(.5)}}}

package/dist/esm/components/DateCell.js

@@ -0,0 +1,98 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isArray } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { isSameDay, isSameYear, startOfDecade, isSameMonth, isBefore, isAfter } from 'date-fns';
+import i18next from 'i18next';
+import { useMemo } from 'react';
+import { PageType } from '../types/index.js';
+import { DateUtil } from '../utils/dateUtil.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _excluded = ["date", "isMuted"];
+var DateCell = function DateCell(_ref) {
+  var _ref$date = _ref.date,
+    date = _ref$date === void 0 ? new Date() : _ref$date,
+    _ref$isMuted = _ref.isMuted,
+    isMuted = _ref$isMuted === void 0 ? false : _ref$isMuted,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var page = props.page,
+    selected = props.selected,
+    hilight = props.hilight,
+    isHijri = props.isHijri,
+    className = props.className,
+    selectDate = props.selectDate,
+    changePageDate = props.changePageDate,
+    mouseOver = props.mouseOver,
+    dateDisabled = props.dateDisabled;
+  var isToday = useMemo(function () {
+    return isSameDay(date, new Date());
+  }, [date]);
+  var isSelected = useMemo(function () {
+    return selected && !isArray(selected) && isSameDay(date, selected);
+  }, [date, page, selected]);
+  var isMarked = useMemo(function () {
+    switch (page) {
+      case PageType.MONTH:
+        return selected && !isArray(selected) && isSameMonth(date, selected);
+      case PageType.YEAR:
+        return selected && !isArray(selected) && isSameYear(date, selected);
+      case PageType.DECADE:
+        return selected && !isArray(selected) && isSameYear(startOfDecade(date), startOfDecade(selected));
+    }
+  }, [date, page, selected]);
+  var isHilightEdge = useMemo(function () {
+    if (!isMuted) {
+      if (hilight) {
+        return isSameDay(date, hilight[0]);
+      } else if (Array.isArray(selected)) {
+        var _selected = _slicedToArray(selected, 2),
+          start = _selected[0],
+          end = _selected[1];
+        var _hilight = false;
+        if (isSameDay(date, start) && isSameDay(date, end)) _hilight = "startend";else if (isSameDay(date, start)) _hilight = "start";else if (isSameDay(date, end)) _hilight = "end";
+        return _hilight;
+      }
+    }
+  }, [date, hilight, selected, isMuted]);
+  var isHilight = useMemo(function () {
+    if (!isMuted) {
+      if (hilight) {
+        var _hilight2 = _slicedToArray(hilight, 2),
+          start = _hilight2[0],
+          end = _hilight2[1];
+        if (isBefore(start, end)) {
+          return isAfter(date, start) && isBefore(date, DateUtil.addDays(end, 1, isHijri));
+        } else {
+          return isBefore(date, start) && isAfter(date, DateUtil.addDays(end, -1, isHijri));
+        }
+      } else if (Array.isArray(selected)) {
+        var _selected2 = _slicedToArray(selected, 2),
+          _start = _selected2[0],
+          _end = _selected2[1];
+        return isAfter(date, DateUtil.startOfDay(_start, isHijri)) && isBefore(date, DateUtil.startOfDay(_end, isHijri));
+      }
+    }
+  }, [isMuted, hilight, selected, date, isHijri]);
+  var isDisabled = useMemo(function () {
+    return !!isSelected || (dateDisabled === null || dateDisabled === void 0 ? void 0 : dateDisabled(date));
+  }, [date, dateDisabled, isSelected]);
+  return /*#__PURE__*/jsxs("div", {
+    role: "none",
+    className: classNames("p-1 m-px text-sm text-center rounded", className, !isDisabled && isMuted && "text-tint-500", (isToday || isMarked) && "underline underline-offset-4 text-primary-700", (!!isSelected || isHilightEdge) && "bg-primary-400 text-white", isHilightEdge === "start" && "rounded-e-none", isHilightEdge === "end" && "rounded-s-none", isHilight && "bg-primary-50 rounded-none", !isDisabled && "cursor-pointer hover:bg-primary-100 hover:text-primary-700", isDisabled && "text-tint-100 cursor-not-allowed"),
+    onFocus: function onFocus() {
+      return hilight && page === PageType.DATE && (mouseOver === null || mouseOver === void 0 ? void 0 : mouseOver(date));
+    },
+    onMouseOver: function onMouseOver() {
+      return hilight && page === PageType.DATE && (mouseOver === null || mouseOver === void 0 ? void 0 : mouseOver(date));
+    },
+    onClick: function onClick() {
+      return !isDisabled && (page === PageType.DATE ? selectDate === null || selectDate === void 0 ? void 0 : selectDate(date) : changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(date));
+    },
+    children: [page === PageType.DATE && DateUtil.format(date, "d", i18next.language, isHijri), page === PageType.MONTH && DateUtil.format(date, "MMM", i18next.language, isHijri), page === PageType.YEAR && DateUtil.format(date, "yyyy", i18next.language, isHijri), page === PageType.DECADE && "".concat(DateUtil.format(DateUtil.startOfDecade(date, isHijri), "yyyy", i18next.language, isHijri), "-").concat(DateUtil.format(DateUtil.endOfDecade(date, isHijri), "yy", i18next.language, isHijri))]
+  });
+};
+
+export { DateCell };

package/dist/esm/components/DateHeader.js

@@ -0,0 +1,142 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Button, CoreIcons } from '@react-fabric/core';
+import classNames from 'classnames';
+import { addDays, isBefore, isAfter } from 'date-fns';
+import i18next from 'i18next';
+import { useMemo } from 'react';
+import { PageType } from '../types/index.js';
+import { DateUtil } from '../utils/dateUtil.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DateHeader = function DateHeader(props) {
+  var page = props.page,
+    _props$pageDate = props.pageDate,
+    pageDate = _props$pageDate === void 0 ? new Date() : _props$pageDate,
+    changePage = props.changePage,
+    changePageDate = props.changePageDate,
+    hideNext = props.hideNext,
+    hidePrevious = props.hidePrevious,
+    min = props.min,
+    max = props.max,
+    _props$isHijri = props.isHijri,
+    isHijri = _props$isHijri === void 0 ? false : _props$isHijri;
+  var headLabel = useMemo(function () {
+    switch (page) {
+      case PageType.DATE:
+        return DateUtil.format(pageDate, "MMM yyyy", i18next.language, isHijri);
+      case PageType.MONTH:
+        return DateUtil.format(pageDate, "yyyy", i18next.language, isHijri);
+      case PageType.YEAR:
+        return "".concat(DateUtil.format(DateUtil.startOfDecade(pageDate, isHijri), "yyyy", i18next.language, isHijri), " - ").concat(DateUtil.format(DateUtil.endOfDecade(pageDate, isHijri), "yyyy", i18next.language, isHijri));
+      case PageType.DECADE:
+        return "".concat(DateUtil.format(DateUtil.startOfCentury(pageDate, isHijri), "yyyy", i18next.language, isHijri), " - ").concat(DateUtil.format(DateUtil.endOfCentury(pageDate, isHijri), "yyyy", i18next.language, isHijri));
+    }
+  }, [i18next.language, isHijri, page, pageDate]);
+  var _useMemo = useMemo(function () {
+      if (page === PageType.DATE) {
+        var dateBefore = addDays(DateUtil.startOfYear(pageDate, isHijri), -1);
+        var dateAfter = addDays(DateUtil.endOfYear(pageDate, isHijri), 1);
+        return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
+      }
+      if (page === PageType.MONTH) {
+        var _dateBefore = addDays(DateUtil.startOfDecade(pageDate, isHijri), -1);
+        var _dateAfter = addDays(DateUtil.endOfDecade(pageDate, isHijri), 1);
+        return [min && isBefore(_dateBefore, min) ? null : _dateBefore, max && isAfter(_dateAfter, max) ? null : _dateAfter];
+      }
+      if (page === PageType.YEAR) {
+        var _dateBefore2 = addDays(DateUtil.startOfCentury(pageDate, isHijri), -1);
+        var _dateAfter2 = addDays(DateUtil.endOfCentury(pageDate, isHijri), 1);
+        return [min && isBefore(_dateBefore2, min) ? null : _dateBefore2, max && isAfter(_dateAfter2, max) ? null : _dateAfter2];
+      }
+      return [];
+    }, [page, min, max, pageDate, isHijri]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    startPage = _useMemo2[0],
+    endPage = _useMemo2[1];
+  var _useMemo3 = useMemo(function () {
+      if (page === PageType.DATE) {
+        var dateBefore = addDays(DateUtil.startOfMonth(pageDate, isHijri), -1);
+        var dateAfter = addDays(DateUtil.endOfMonth(pageDate, isHijri), 1);
+        return [min && isBefore(dateBefore, min) ? null : dateBefore, max && isAfter(dateAfter, max) ? null : dateAfter];
+      }
+      if (page === PageType.MONTH) {
+        var _dateBefore3 = addDays(DateUtil.startOfYear(pageDate, isHijri), -1);
+        var _dateAfter3 = addDays(DateUtil.endOfYear(pageDate, isHijri), 1);
+        return [min && isBefore(_dateBefore3, min) ? null : _dateBefore3, max && isAfter(_dateAfter3, max) ? null : _dateAfter3];
+      }
+      if (page === PageType.YEAR) {
+        var _dateBefore4 = addDays(DateUtil.startOfDecade(pageDate, isHijri), -1);
+        var _dateAfter4 = addDays(DateUtil.endOfDecade(pageDate, isHijri), 1);
+        return [min && isBefore(_dateBefore4, min) ? null : _dateBefore4, max && isAfter(_dateAfter4, max) ? null : _dateAfter4];
+      }
+      if (page === PageType.DECADE) {
+        var _dateBefore5 = addDays(DateUtil.startOfCentury(pageDate, isHijri), -1);
+        var _dateAfter5 = addDays(DateUtil.endOfCentury(pageDate, isHijri), 1);
+        return [min && isBefore(_dateBefore5, min) ? null : _dateBefore5, max && isAfter(_dateAfter5, max) ? null : _dateAfter5];
+      }
+      return [];
+    }, [page, min, max, pageDate, isHijri]),
+    _useMemo4 = _slicedToArray(_useMemo3, 2),
+    previousPage = _useMemo4[0],
+    nextPage = _useMemo4[1];
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-nowrap items-center area-head",
+    "data-page": page,
+    children: [startPage !== undefined && /*#__PURE__*/jsx(Button, {
+      icon: CoreIcons.chevronsLeft,
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "start",
+      disabled: !startPage,
+      className: classNames(hidePrevious && "invisible"),
+      onClick: function onClick() {
+        return startPage && (changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(startPage));
+      }
+    }), /*#__PURE__*/jsx(Button, {
+      icon: CoreIcons.chevronLeft,
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "prev",
+      disabled: !previousPage,
+      className: classNames(hidePrevious && "invisible"),
+      onClick: function onClick() {
+        return previousPage && (changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(previousPage));
+      }
+    }), /*#__PURE__*/jsx("div", {
+      role: "none",
+      onClick: function onClick() {
+        return changePage(page + 1);
+      },
+      className: classNames("flex-1 px-2 py-1 text-primary-600 text-center text-sm font-medium truncate", page === PageType.DECADE ? "pointer-events-none" : "cursor-pointer"),
+      children: headLabel
+    }), /*#__PURE__*/jsx(Button, {
+      icon: CoreIcons.chevronRight,
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "next",
+      disabled: !nextPage,
+      className: classNames(hideNext && "invisible"),
+      onClick: function onClick() {
+        return nextPage && (changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(nextPage));
+      }
+    }), endPage !== undefined && /*#__PURE__*/jsx(Button, {
+      icon: CoreIcons.chevronsRight,
+      rtlFlip: true,
+      size: "sm",
+      variant: "link",
+      "aria-label": "end",
+      disabled: !endPage,
+      className: classNames(hideNext && "invisible"),
+      onClick: function onClick() {
+        return endPage && (changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(endPage));
+      }
+    })]
+  });
+};
+
+export { DateHeader };