@react-fabric/date 1.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 React Fabric, 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.

package/README.md

@@ -0,0 +1,10 @@
+# React-Fabric Date Module
+
+#### Install
+
+```bash
+# Using
+yarn add @react-fabric/date
+```
+
+#### Usage

package/dist/cjs/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/cjs/components/DateCell.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var dateFns = require('date-fns');
+var i18next = require('i18next');
+var react = require('react');
+var index = require('../types/index.js');
+var dateUtil = require('../utils/dateUtil.js');
+var jsxRuntime = require('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 = react.useMemo(function () {
+    return dateFns.isSameDay(date, new Date());
+  }, [date]);
+  var isSelected = react.useMemo(function () {
+    return selected && !utilities.isArray(selected) && dateFns.isSameDay(date, selected);
+  }, [date, page, selected]);
+  var isMarked = react.useMemo(function () {
+    switch (page) {
+      case index.PageType.MONTH:
+        return selected && !utilities.isArray(selected) && dateFns.isSameMonth(date, selected);
+      case index.PageType.YEAR:
+        return selected && !utilities.isArray(selected) && dateFns.isSameYear(date, selected);
+      case index.PageType.DECADE:
+        return selected && !utilities.isArray(selected) && dateFns.isSameYear(dateFns.startOfDecade(date), dateFns.startOfDecade(selected));
+    }
+  }, [date, page, selected]);
+  var isHilightEdge = react.useMemo(function () {
+    if (!isMuted) {
+      if (hilight) {
+        return dateFns.isSameDay(date, hilight[0]);
+      } else if (Array.isArray(selected)) {
+        var _selected = _slicedToArray(selected, 2),
+          start = _selected[0],
+          end = _selected[1];
+        var _hilight = false;
+        if (dateFns.isSameDay(date, start) && dateFns.isSameDay(date, end)) _hilight = "startend";else if (dateFns.isSameDay(date, start)) _hilight = "start";else if (dateFns.isSameDay(date, end)) _hilight = "end";
+        return _hilight;
+      }
+    }
+  }, [date, hilight, selected, isMuted]);
+  var isHilight = react.useMemo(function () {
+    if (!isMuted) {
+      if (hilight) {
+        var _hilight2 = _slicedToArray(hilight, 2),
+          start = _hilight2[0],
+          end = _hilight2[1];
+        if (dateFns.isBefore(start, end)) {
+          return dateFns.isAfter(date, start) && dateFns.isBefore(date, dateUtil.DateUtil.addDays(end, 1, isHijri));
+        } else {
+          return dateFns.isBefore(date, start) && dateFns.isAfter(date, dateUtil.DateUtil.addDays(end, -1, isHijri));
+        }
+      } else if (Array.isArray(selected)) {
+        var _selected2 = _slicedToArray(selected, 2),
+          _start = _selected2[0],
+          _end = _selected2[1];
+        return dateFns.isAfter(date, dateUtil.DateUtil.startOfDay(_start, isHijri)) && dateFns.isBefore(date, dateUtil.DateUtil.startOfDay(_end, isHijri));
+      }
+    }
+  }, [isMuted, hilight, selected, date, isHijri]);
+  var isDisabled = react.useMemo(function () {
+    return !!isSelected || (dateDisabled === null || dateDisabled === void 0 ? void 0 : dateDisabled(date));
+  }, [date, dateDisabled, isSelected]);
+  return /*#__PURE__*/jsxRuntime.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 === index.PageType.DATE && (mouseOver === null || mouseOver === void 0 ? void 0 : mouseOver(date));
+    },
+    onMouseOver: function onMouseOver() {
+      return hilight && page === index.PageType.DATE && (mouseOver === null || mouseOver === void 0 ? void 0 : mouseOver(date));
+    },
+    onClick: function onClick() {
+      return !isDisabled && (page === index.PageType.DATE ? selectDate === null || selectDate === void 0 ? void 0 : selectDate(date) : changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(date));
+    },
+    children: [page === index.PageType.DATE && dateUtil.DateUtil.format(date, "d", i18next.language, isHijri), page === index.PageType.MONTH && dateUtil.DateUtil.format(date, "MMM", i18next.language, isHijri), page === index.PageType.YEAR && dateUtil.DateUtil.format(date, "yyyy", i18next.language, isHijri), page === index.PageType.DECADE && "".concat(dateUtil.DateUtil.format(dateUtil.DateUtil.startOfDecade(date, isHijri), "yyyy", i18next.language, isHijri), "-").concat(dateUtil.DateUtil.format(dateUtil.DateUtil.endOfDecade(date, isHijri), "yy", i18next.language, isHijri))]
+  });
+};
+
+exports.DateCell = DateCell;

package/dist/cjs/components/DateHeader.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var classNames = require('classnames');
+var dateFns = require('date-fns');
+var i18next = require('i18next');
+var react = require('react');
+var index = require('../types/index.js');
+var dateUtil = require('../utils/dateUtil.js');
+var jsxRuntime = require('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 = react.useMemo(function () {
+    switch (page) {
+      case index.PageType.DATE:
+        return dateUtil.DateUtil.format(pageDate, "MMM yyyy", i18next.language, isHijri);
+      case index.PageType.MONTH:
+        return dateUtil.DateUtil.format(pageDate, "yyyy", i18next.language, isHijri);
+      case index.PageType.YEAR:
+        return "".concat(dateUtil.DateUtil.format(dateUtil.DateUtil.startOfDecade(pageDate, isHijri), "yyyy", i18next.language, isHijri), " - ").concat(dateUtil.DateUtil.format(dateUtil.DateUtil.endOfDecade(pageDate, isHijri), "yyyy", i18next.language, isHijri));
+      case index.PageType.DECADE:
+        return "".concat(dateUtil.DateUtil.format(dateUtil.DateUtil.startOfCentury(pageDate, isHijri), "yyyy", i18next.language, isHijri), " - ").concat(dateUtil.DateUtil.format(dateUtil.DateUtil.endOfCentury(pageDate, isHijri), "yyyy", i18next.language, isHijri));
+    }
+  }, [i18next.language, isHijri, page, pageDate]);
+  var _useMemo = react.useMemo(function () {
+      if (page === index.PageType.DATE) {
+        var dateBefore = dateFns.addDays(dateUtil.DateUtil.startOfYear(pageDate, isHijri), -1);
+        var dateAfter = dateFns.addDays(dateUtil.DateUtil.endOfYear(pageDate, isHijri), 1);
+        return [min && dateFns.isBefore(dateBefore, min) ? null : dateBefore, max && dateFns.isAfter(dateAfter, max) ? null : dateAfter];
+      }
+      if (page === index.PageType.MONTH) {
+        var _dateBefore = dateFns.addDays(dateUtil.DateUtil.startOfDecade(pageDate, isHijri), -1);
+        var _dateAfter = dateFns.addDays(dateUtil.DateUtil.endOfDecade(pageDate, isHijri), 1);
+        return [min && dateFns.isBefore(_dateBefore, min) ? null : _dateBefore, max && dateFns.isAfter(_dateAfter, max) ? null : _dateAfter];
+      }
+      if (page === index.PageType.YEAR) {
+        var _dateBefore2 = dateFns.addDays(dateUtil.DateUtil.startOfCentury(pageDate, isHijri), -1);
+        var _dateAfter2 = dateFns.addDays(dateUtil.DateUtil.endOfCentury(pageDate, isHijri), 1);
+        return [min && dateFns.isBefore(_dateBefore2, min) ? null : _dateBefore2, max && dateFns.isAfter(_dateAfter2, max) ? null : _dateAfter2];
+      }
+      return [];
+    }, [page, min, max, pageDate, isHijri]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    startPage = _useMemo2[0],
+    endPage = _useMemo2[1];
+  var _useMemo3 = react.useMemo(function () {
+      if (page === index.PageType.DATE) {
+        var dateBefore = dateFns.addDays(dateUtil.DateUtil.startOfMonth(pageDate, isHijri), -1);
+        var dateAfter = dateFns.addDays(dateUtil.DateUtil.endOfMonth(pageDate, isHijri), 1);
+        return [min && dateFns.isBefore(dateBefore, min) ? null : dateBefore, max && dateFns.isAfter(dateAfter, max) ? null : dateAfter];
+      }
+      if (page === index.PageType.MONTH) {
+        var _dateBefore3 = dateFns.addDays(dateUtil.DateUtil.startOfYear(pageDate, isHijri), -1);
+        var _dateAfter3 = dateFns.addDays(dateUtil.DateUtil.endOfYear(pageDate, isHijri), 1);
+        return [min && dateFns.isBefore(_dateBefore3, min) ? null : _dateBefore3, max && dateFns.isAfter(_dateAfter3, max) ? null : _dateAfter3];
+      }
+      if (page === index.PageType.YEAR) {
+        var _dateBefore4 = dateFns.addDays(dateUtil.DateUtil.startOfDecade(pageDate, isHijri), -1);
+        var _dateAfter4 = dateFns.addDays(dateUtil.DateUtil.endOfDecade(pageDate, isHijri), 1);
+        return [min && dateFns.isBefore(_dateBefore4, min) ? null : _dateBefore4, max && dateFns.isAfter(_dateAfter4, max) ? null : _dateAfter4];
+      }
+      if (page === index.PageType.DECADE) {
+        var _dateBefore5 = dateFns.addDays(dateUtil.DateUtil.startOfCentury(pageDate, isHijri), -1);
+        var _dateAfter5 = dateFns.addDays(dateUtil.DateUtil.endOfCentury(pageDate, isHijri), 1);
+        return [min && dateFns.isBefore(_dateBefore5, min) ? null : _dateBefore5, max && dateFns.isAfter(_dateAfter5, max) ? null : _dateAfter5];
+      }
+      return [];
+    }, [page, min, max, pageDate, isHijri]),
+    _useMemo4 = _slicedToArray(_useMemo3, 2),
+    previousPage = _useMemo4[0],
+    nextPage = _useMemo4[1];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-nowrap items-center area-head",
+    "data-page": page,
+    children: [startPage !== undefined && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      icon: core.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__*/jsxRuntime.jsx(core.Button, {
+      icon: core.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__*/jsxRuntime.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 === index.PageType.DECADE ? "pointer-events-none" : "cursor-pointer"),
+      children: headLabel
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      icon: core.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__*/jsxRuntime.jsx(core.Button, {
+      icon: core.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));
+      }
+    })]
+  });
+};
+
+exports.DateHeader = DateHeader;

package/dist/cjs/components/DatePage.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var dateFns = require('date-fns');
+var i18next = require('i18next');
+var react = require('react');
+var dateUtil = require('../utils/dateUtil.js');
+var DateCell = require('./DateCell.js');
+var classNames = require('classnames');
+var index = require('../types/index.js');
+var Date_module = require('./Date.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["pageDate", "isHijri"];
+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 rows = [0, 1, 2, 3, 4, 5];
+var cols = [0, 1, 2, 3, 4, 5, 6];
+var DatePage = function DatePage(_ref) {
+  var pageDate = _ref.pageDate,
+    isHijri = _ref.isHijri,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var startDate = react.useMemo(function () {
+    var first = dateUtil.DateUtil.startOfMonth(pageDate, isHijri);
+    var current = dateFns.getDay(first);
+    return dateUtil.DateUtil.addDays(first, (current < 3 ? -7 : 0) + current * -1, isHijri);
+  }, [isHijri, pageDate]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames("grid grid-cols-8 area-content", props.page !== index.PageType.DATE && "invisible"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(Date_module.dateHeader, "px-1 text-center bg-tint-50 h-7")
+    }), cols.map(function (col) {
+      var dt = dateUtil.DateUtil.addDays(startDate, col, isHijri);
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Date_module.dateHeader, "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7"),
+        children: dateUtil.DateUtil.format(dt, "eeeeee", i18next.language, isHijri)
+      }, dt.toISOString());
+    }), rows.map(function (row) {
+      return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "px-1 py-1.5 m-px text-xs text-center text-tint-300",
+          children: dateUtil.DateUtil.getWeek(dateUtil.DateUtil.addDays(startDate, row * 7, isHijri), i18next.language, isHijri)
+        }, row), cols.map(function (col) {
+          var dt = dateUtil.DateUtil.addDays(startDate, row * 7 + col, isHijri);
+          return /*#__PURE__*/react.createElement(DateCell.DateCell, _objectSpread(_objectSpread({}, props), {}, {
+            date: dt,
+            page: index.PageType.DATE,
+            isHijri: isHijri,
+            key: dt.toISOString(),
+            isMuted: !dateUtil.DateUtil.isSameMonth(dt, pageDate, isHijri)
+          }));
+        })]
+      }, row);
+    })]
+  });
+};
+
+exports.DatePage = DatePage;

package/dist/cjs/components/DecadePage.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var dateUtil = require('../utils/dateUtil.js');
+var DateCell = require('./DateCell.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["pageDate", "isHijri"];
+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 cols = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+var DecadePage = function DecadePage(_ref) {
+  var pageDate = _ref.pageDate,
+    isHijri = _ref.isHijri,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var startDate = react.useMemo(function () {
+    return dateUtil.DateUtil.startOfCentury(pageDate, isHijri);
+  }, [isHijri, pageDate]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "grid grid-cols-3 area-content place-content-center",
+    children: cols.map(function (col) {
+      return /*#__PURE__*/jsxRuntime.jsx(DateCell.DateCell, _objectSpread({
+        isHijri: isHijri,
+        className: "px-1 py-3",
+        date: dateUtil.DateUtil.addYears(startDate, col * 10, isHijri),
+        isMuted: col === -1 || col === 10
+      }, props), col);
+    })
+  });
+};
+
+exports.DecadePage = DecadePage;

package/dist/cjs/components/MonthPage.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var dateUtil = require('../utils/dateUtil.js');
+var DateCell = require('./DateCell.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["pageDate", "isHijri"];
+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 cols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+var MonthPage = function MonthPage(_ref) {
+  var pageDate = _ref.pageDate,
+    isHijri = _ref.isHijri,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var startDate = react.useMemo(function () {
+    return dateUtil.DateUtil.startOfYear(pageDate, isHijri);
+  }, [isHijri, pageDate]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "grid grid-cols-3 area-content place-content-center",
+    children: cols.map(function (col) {
+      return /*#__PURE__*/jsxRuntime.jsx(DateCell.DateCell, _objectSpread({
+        isHijri: isHijri,
+        className: "px-1 py-3",
+        date: dateUtil.DateUtil.addMonths(startDate, col, isHijri)
+      }, props), col);
+    })
+  });
+};
+
+exports.MonthPage = MonthPage;

package/dist/cjs/components/TimeSliders.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var classNames = require('classnames');
+var react = require('react');
+var Date_module = require('./Date.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var TimeSlider = function TimeSlider(_ref) {
+  var _ref$hour = _ref.hour,
+    hour = _ref$hour === void 0 ? 0 : _ref$hour,
+    _ref$minute = _ref.minute,
+    minute = _ref$minute === void 0 ? 0 : _ref$minute,
+    onTimeChange = _ref.onTimeChange;
+  var hourRef = react.useRef(null);
+  var minuteRef = react.useRef(null);
+  var _useState = react.useState(hour),
+    _useState2 = _slicedToArray(_useState, 2),
+    h = _useState2[0],
+    setH = _useState2[1];
+  var _useState3 = react.useState(minute),
+    _useState4 = _slicedToArray(_useState3, 2),
+    m = _useState4[0],
+    setM = _useState4[1];
+  react.useEffect(function () {
+    var _hourRef$current;
+    setH(hour);
+    (_hourRef$current = hourRef.current) === null || _hourRef$current === void 0 || (_hourRef$current = _hourRef$current.children.item(hour + 1)) === null || _hourRef$current === void 0 || _hourRef$current.scrollIntoView({
+      block: "center"
+    });
+  }, [hour]);
+  react.useEffect(function () {
+    var _minuteRef$current;
+    setM(minute);
+    (_minuteRef$current = minuteRef.current) === null || _minuteRef$current === void 0 || (_minuteRef$current = _minuteRef$current.children.item(minute + 1)) === null || _minuteRef$current === void 0 || _minuteRef$current.scrollIntoView({
+      block: "center"
+    });
+  }, [minute]);
+  var fireChange = core.useDebounce(onTimeChange, [onTimeChange]);
+  var calculateTime = react.useCallback(function () {
+    var _hourRef$current$scro, _hourRef$current2, _offsetHeight, _hourRef$current3, _minuteRef$current$sc, _minuteRef$current2, _offsetHeight2, _minuteRef$current3;
+    var hourTop = (_hourRef$current$scro = (_hourRef$current2 = hourRef.current) === null || _hourRef$current2 === void 0 ? void 0 : _hourRef$current2.scrollTop) !== null && _hourRef$current$scro !== void 0 ? _hourRef$current$scro : 0;
+    var hourHeight = (_offsetHeight = (_hourRef$current3 = hourRef.current) === null || _hourRef$current3 === void 0 || (_hourRef$current3 = _hourRef$current3.children.item(1)) === null || _hourRef$current3 === void 0 ? void 0 : _hourRef$current3.offsetHeight) !== null && _offsetHeight !== void 0 ? _offsetHeight : 0;
+    var minuteTop = (_minuteRef$current$sc = (_minuteRef$current2 = minuteRef.current) === null || _minuteRef$current2 === void 0 ? void 0 : _minuteRef$current2.scrollTop) !== null && _minuteRef$current$sc !== void 0 ? _minuteRef$current$sc : 0;
+    var minuteHeight = (_offsetHeight2 = (_minuteRef$current3 = minuteRef.current) === null || _minuteRef$current3 === void 0 || (_minuteRef$current3 = _minuteRef$current3.children.item(1)) === null || _minuteRef$current3 === void 0 ? void 0 : _minuteRef$current3.offsetHeight) !== null && _offsetHeight2 !== void 0 ? _offsetHeight2 : 0;
+    var hour = Math.round(hourTop / hourHeight);
+    var minute = Math.round(minuteTop / minuteHeight);
+    setH(hour);
+    setM(minute);
+    fireChange({
+      hour: hour,
+      minute: minute
+    });
+  }, [onTimeChange]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-base"),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Date_module.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        children: "H"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Date_module.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        children: "M"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-1 flex-nowrap overflow-hidden relative",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", Date_module.timeSlider),
+        onScroll: calculateTime,
+        ref: hourRef,
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-full"
+        }), Array(24).fill(0).map(function (_, i) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            role: "none",
+            className: classNames("ps-2 pe-1 snap-center outline outline-muted", i === h && "font-medium text-primary-600"),
+            "data-skew": i === h - 5 || i === h + 5 ? 5 : i === h - 4 || i === h + 4 ? 4 : i === h - 3 || i === h + 3 ? 3 : i === h - 2 || i === h + 2 ? 2 : i === h - 1 || i === h + 1 ? 1 : undefined,
+            "data-selected": i === h,
+            onClick: function onClick(e) {
+              e.currentTarget.scrollIntoView({
+                block: "center",
+                behavior: "smooth"
+              });
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              children: i.toString(10).padStart(2, "0")
+            })
+          }, i);
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-full"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", Date_module.timeSlider),
+        onScroll: calculateTime,
+        ref: minuteRef,
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-full"
+        }), Array(60).fill(0).map(function (_, i) {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            role: "none",
+            className: classNames("ps-1 pe-2 snap-center outline outline-muted", i === m && "font-medium text-primary-600"),
+            "data-skew": i === m - 5 || i === m + 5 ? 5 : i === m - 4 || i === m + 4 ? 4 : i === m - 3 || i === m + 3 ? 3 : i === m - 2 || i === m + 2 ? 2 : i === m - 1 || i === m + 1 ? 1 : undefined,
+            "data-selected": i === m,
+            onClick: function onClick(e) {
+              e.currentTarget.scrollIntoView({
+                block: "center",
+                behavior: "smooth"
+              });
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              children: i.toString(10).padStart(2, "0")
+            })
+          }, i);
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-full"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "border rounded border-primary-500 absolute top-1/2 -translate-y-1/2 h-6 w-full flex items-center justify-between bg-primary-200/10",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "border-s-4 border-t-4 border-b-4 border-transparent border-s-primary-500"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "border-e-4 border-t-4 border-b-4 border-transparent border-e-primary-500"
+        })]
+      })]
+    })]
+  });
+};
+
+exports.TimeSlider = TimeSlider;

package/dist/cjs/components/YearPage.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var dateUtil = require('../utils/dateUtil.js');
+var DateCell = require('./DateCell.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["pageDate", "isHijri"];
+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 cols = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+var YearPage = function YearPage(_ref) {
+  var pageDate = _ref.pageDate,
+    isHijri = _ref.isHijri,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var startDate = react.useMemo(function () {
+    return dateUtil.DateUtil.startOfDecade(pageDate, isHijri);
+  }, [isHijri, pageDate]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "grid grid-cols-3 area-content place-content-center",
+    children: cols.map(function (col) {
+      return /*#__PURE__*/jsxRuntime.jsx(DateCell.DateCell, _objectSpread({
+        isHijri: isHijri,
+        className: "px-1 py-3",
+        date: dateUtil.DateUtil.addYears(startDate, col, isHijri),
+        isMuted: col === -1 || col === 10
+      }, props), col);
+    })
+  });
+};
+
+exports.YearPage = YearPage;

package/dist/cjs/display/DateDisplay.js

@@ -0,0 +1,35 @@
+'use strict';
+
+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 jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["date", "className", "format", "children"];
+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 DateDisplay = function DateDisplay(_ref) {
+  var date = _ref.date,
+    className = _ref.className,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "eee, PPpp" : _ref$format,
+    children = _ref.children,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useGlobals = core.useGlobals(),
+    currentCalendar = _useGlobals.currentCalendar,
+    currentLocale = _useGlobals.currentLocale;
+  var dtLabel = /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+    content: dateUtil.DateUtil.format(date, format, currentLocale, currentCalendar !== "hijri"),
+    children: /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
+      className: className
+    }, aria), {}, {
+      children: dateUtil.DateUtil.format(date, format, currentLocale, currentCalendar === "hijri")
+    }))
+  });
+  return children ? /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
+    children: [dtLabel, children]
+  }) : dtLabel;
+};
+
+exports.DateDisplay = DateDisplay;