@react-fabric/date 1.0.0-beta.8 → 1.0.1

package/dist/cjs/panels/DatePanel.js

@@ -5,7 +5,6 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var dateFns = require('date-fns');
 var react = require('react');
 var reactI18next = require('react-i18next');
@@ -16,8 +15,29 @@ var jsxRuntime = require('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 = reactI18next.useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = core.useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
-  var _useState = react.useState(currentCalendar === "hijri"),
+  var _useApplicationContex = core.useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
+  var _usePropState = core.usePropState(currentCalendar === "hijri"),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    isHijri = _usePropState2[0],
+    setIsHijri = _usePropState2[1];
+  var _useState = react.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    isHijri = _useState2[0],
-    setHijri = _useState2[1];
-  var _useState3 = react.useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    canSelectToday = _useState4[0],
-    setCanSelectToday = _useState4[1];
+    canSelectToday = _useState2[0],
+    setCanSelectToday = _useState2[1];
   var fireChange = core.useDebounce(onChange, [onChange]);
-  react.useEffect(function () {
-    setHijri(currentCalendar === "hijri");
-  }, [currentCalendar]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "reset") {
         if (!utilities.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 && dateFns.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: index.PageType.DATE,
-      pageDate: new Date(),
       hour: 0,
       minute: 0
+    }, function () {
+      return {
+        page: index.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 = dateFns.isBefore(new Date(), max);
     }
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setCanSelectToday(canSelect);
   }, [min, max]);
   react.useEffect(function () {
@@ -142,7 +166,7 @@ var DatePanel = function DatePanel(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: utilities.cn("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(BasePanel.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) {
       })]
     })]
   }));
-};
+}
 
 exports.DatePanel = DatePanel;

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

@@ -17,8 +17,8 @@ var dateUtil = require('../utils/dateUtil.js');
 var jsxRuntime = require('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 ? utilities.EMPTY_ARRAY : _ref$recurringEvents;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useState = react.useState({}),
+  var _useState = react.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, index.PageType.MONTH);
         }
       }
@@ -93,9 +95,14 @@ var EventPanel = function EventPanel(_ref) {
       }
       return _objectSpread({}, state);
     }, {
-      pageDate: new Date(),
       page: index.PageType.MONTH,
       events: []
+    }, function () {
+      return {
+        pageDate: new Date(),
+        page: index.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 = dateFns.startOfDay(new Date(evt.start));
       var end = dateFns.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__*/jsxRuntime.jsxs(core.Section, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Layout, {
     children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader.DateHeader, {
       page: state.page,
       pageDate: state.pageDate,
@@ -141,6 +156,7 @@ var EventPanel = function EventPanel(_ref) {
       children: state.events.map(function (evt) {
         return /*#__PURE__*/jsxRuntime.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) {
       }
     })]
   });
-};
+}
 
 exports.EventPanel = EventPanel;

package/dist/cjs/panels/RangePanel.js

@@ -5,7 +5,6 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var dateFns = require('date-fns');
 var react = require('react');
 var reactI18next = require('react-i18next');
@@ -16,8 +15,26 @@ var jsxRuntime = require('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 = reactI18next.useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = core.useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
-  var _useState = react.useState(currentCalendar === "hijri"),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHijri = _useState2[0],
-    setHijri = _useState2[1];
+  var _useApplicationContex = core.useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
+  var _usePropState = core.usePropState(currentCalendar === "hijri"),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    isHijri = _usePropState2[0],
+    setIsHijri = _usePropState2[1];
   var fireChange = core.useDebounce(onChange, [onChange]);
-  react.useEffect(function () {
-    setHijri(currentCalendar === "hijri");
-  }, [currentCalendar]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "reset") {
         if (!utilities.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 === index.PageType.DATE && (state.end.pageDate = dateFns.addMonths(action.date, 1));
+          if (action.range === "start" && state.start.page === index.PageType.DATE) state.end.pageDate = dateFns.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: index.PageType.DATE,
-        pageDate: new Date(),
         hour: 0,
         minute: 0
       },
       end: {
         page: index.PageType.DATE,
-        pageDate: dateUtil.DateUtil.addMonths(new Date(), 1, isHijri),
         hour: 0,
         minute: 0
       }
+    }, function () {
+      return {
+        start: {
+          page: index.PageType.DATE,
+          pageDate: new Date(),
+          hour: 0,
+          minute: 0
+        },
+        end: {
+          page: index.PageType.DATE,
+          pageDate: dateUtil.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__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: utilities.cn("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.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) {
       })]
     })]
   }));
-};
+}
 
 exports.RangePanel = RangePanel;

package/dist/cjs/utils/dateUtil.js

@@ -1,11 +1,11 @@
 '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 dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var i18next = require('i18next');
+var index = require('../types/index.js');
 
 var Locales = {
   ar: locale.arSA,
@@ -21,8 +21,6 @@ var Locales = {
   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) {
@@ -257,7 +255,7 @@ exports.DateUtil = void 0;
   };
   _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(date, isHijri);
       ret = format(new Date(date.getTime() - start.getTime()), "ww");

package/dist/esm/components/DateCell.js

@@ -2,8 +2,7 @@
 
 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 { isArray, cn } from '@react-fabric/utilities';
 import { isSameDay, isSameYear, startOfDecade, isSameMonth, isBefore, isAfter } from 'date-fns';
 import i18next from 'i18next';
 import { useMemo } from 'react';
@@ -12,9 +11,8 @@ 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,
+function DateCell(_ref) {
+  var date = _ref.date,
     _ref$isMuted = _ref.isMuted,
     isMuted = _ref$isMuted === void 0 ? false : _ref$isMuted,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -32,7 +30,7 @@ var DateCell = function DateCell(_ref) {
   }, [date]);
   var isSelected = useMemo(function () {
     return selected && !isArray(selected) && isSameDay(date, selected);
-  }, [date, page, selected]);
+  }, [date, selected]);
   var isMarked = useMemo(function () {
     switch (page) {
       case PageType.MONTH:
@@ -81,7 +79,7 @@ var DateCell = function DateCell(_ref) {
   }, [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"),
+    className: cn("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));
     },
@@ -93,6 +91,6 @@ var DateCell = function DateCell(_ref) {
     },
     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

@@ -1,8 +1,8 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Button, CoreIcons } from '@react-fabric/core';
-import classNames from 'classnames';
+import { Button } from '@react-fabric/core';
+import { cn } from '@react-fabric/utilities';
 import { addDays, isBefore, isAfter } from 'date-fns';
 import i18next from 'i18next';
 import { useMemo } from 'react';
@@ -10,10 +10,9 @@ import { PageType } from '../types/index.js';
 import { DateUtil } from '../utils/dateUtil.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var DateHeader = function DateHeader(props) {
+function DateHeader(props) {
   var page = props.page,
-    _props$pageDate = props.pageDate,
-    pageDate = _props$pageDate === void 0 ? new Date() : _props$pageDate,
+    pageDate = props.pageDate,
     changePage = props.changePage,
     changePageDate = props.changePageDate,
     hideNext = props.hideNext,
@@ -33,7 +32,7 @@ var DateHeader = function DateHeader(props) {
       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]);
+  }, [isHijri, page, pageDate]);
   var _useMemo = useMemo(function () {
       if (page === PageType.DATE) {
         var dateBefore = addDays(DateUtil.startOfYear(pageDate, isHijri), -1);
@@ -82,27 +81,31 @@ var DateHeader = function DateHeader(props) {
     previousPage = _useMemo4[0],
     nextPage = _useMemo4[1];
   return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-nowrap items-center area-head",
+    className: "flex flex-nowrap items-center area-header",
     "data-page": page,
     children: [startPage !== undefined && /*#__PURE__*/jsx(Button, {
-      icon: CoreIcons.chevronsLeft,
-      rtlFlip: true,
+      icon: {
+        icon: "icon-[mdi--chevron-double-left]",
+        rtlFlip: true
+      },
       size: "sm",
       variant: "link",
       "aria-label": "start",
       disabled: !startPage,
-      className: classNames(hidePrevious && "invisible"),
+      className: cn(hidePrevious && "invisible"),
       onClick: function onClick() {
         return startPage && (changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(startPage));
       }
     }), /*#__PURE__*/jsx(Button, {
-      icon: CoreIcons.chevronLeft,
-      rtlFlip: true,
+      icon: {
+        icon: "icon-[mdi--chevron-left]",
+        rtlFlip: true
+      },
       size: "sm",
       variant: "link",
       "aria-label": "prev",
       disabled: !previousPage,
-      className: classNames(hidePrevious && "invisible"),
+      className: cn(hidePrevious && "invisible"),
       onClick: function onClick() {
         return previousPage && (changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(previousPage));
       }
@@ -111,32 +114,36 @@ var DateHeader = function DateHeader(props) {
       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"),
+      className: cn("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,
+      icon: {
+        icon: "icon-[mdi--chevron-right]",
+        rtlFlip: true
+      },
       size: "sm",
       variant: "link",
       "aria-label": "next",
       disabled: !nextPage,
-      className: classNames(hideNext && "invisible"),
+      className: cn(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,
+      icon: {
+        icon: "icon-[mdi--chevron-double-right]",
+        rtlFlip: true
+      },
       size: "sm",
       variant: "link",
       "aria-label": "end",
       disabled: !endPage,
-      className: classNames(hideNext && "invisible"),
+      className: cn(hideNext && "invisible"),
       onClick: function onClick() {
         return endPage && (changePageDate === null || changePageDate === void 0 ? void 0 : changePageDate(endPage));
       }
     })]
   });
-};
+}
 
 export { DateHeader };

package/dist/esm/components/DatePage.js

@@ -2,22 +2,21 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { cn } from '@react-fabric/utilities';
 import { getDay } from 'date-fns';
 import i18next from 'i18next';
-import { useMemo, Fragment, createElement } from 'react';
+import { useMemo, Fragment } from 'react';
+import { PageType } from '../types/index.js';
 import { DateUtil } from '../utils/dateUtil.js';
 import { DateCell } from './DateCell.js';
-import classNames from 'classnames';
-import { PageType } from '../types/index.js';
-import classes from './Date.module.css';
 import { jsxs, jsx } from '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; }
+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; }
 var rows = [0, 1, 2, 3, 4, 5];
 var cols = [0, 1, 2, 3, 4, 5, 6];
-var DatePage = function DatePage(_ref) {
+function DatePage(_ref) {
   var pageDate = _ref.pageDate,
     isHijri = _ref.isHijri,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -27,13 +26,13 @@ var DatePage = function DatePage(_ref) {
     return DateUtil.addDays(first, (current < 3 ? -7 : 0) + current * -1, isHijri);
   }, [isHijri, pageDate]);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames("grid grid-cols-8 area-content", props.page !== PageType.DATE && "invisible"),
+    className: cn("grid grid-cols-8 area-content", props.page !== PageType.DATE && "invisible"),
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames(classes.dateHeader, "px-1 text-center bg-tint-50 h-7")
+      className: cn("fabric-dateHeader", "px-1 text-center bg-tint-50 h-7")
     }), cols.map(function (col) {
       var dt = DateUtil.addDays(startDate, col, isHijri);
       return /*#__PURE__*/jsx("div", {
-        className: classNames(classes.dateHeader, "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7"),
+        className: cn("fabric-dateHeader", "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7"),
         children: DateUtil.format(dt, "eeeeee", i18next.language, isHijri)
       }, dt.toISOString());
     }), rows.map(function (row) {
@@ -43,17 +42,16 @@ var DatePage = function DatePage(_ref) {
           children: DateUtil.getWeek(DateUtil.addDays(startDate, row * 7, isHijri), i18next.language, isHijri)
         }, row), cols.map(function (col) {
           var dt = DateUtil.addDays(startDate, row * 7 + col, isHijri);
-          return /*#__PURE__*/createElement(DateCell, _objectSpread(_objectSpread({}, props), {}, {
+          return /*#__PURE__*/jsx(DateCell, _objectSpread(_objectSpread({}, props), {}, {
             date: dt,
             page: PageType.DATE,
             isHijri: isHijri,
-            key: dt.toISOString(),
             isMuted: !DateUtil.isSameMonth(dt, pageDate, isHijri)
-          }));
+          }), dt.toISOString());
         })]
       }, row);
     })]
   });
-};
+}
 
 export { DatePage };