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

package/README.md

@@ -1,10 +1,3 @@
-# React-Fabric Date Module
+# React-Fabric Date panel Module
 
-#### Install
-
-```bash
-# Using
-yarn add @react-fabric/date
-```
-
-#### Usage
+> INTERNAL ONLY

package/{src/components/Date.module.css → css/_date.css}

@@ -21,12 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .dateHeader {
-    box-shadow: 0 -1px 0 theme(colors.tint.200/50%) inset;
+@layer components {
+  .fabric-dateHeader {
+    box-shadow: 0 -1px 0 --alpha(var(--color-tint-200) / 50%) inset;
   }
 
-  .timeSlider {
+  .fabric-date-timeSlider {
     height: 11.25rem;
 
     &::before,
@@ -34,7 +34,7 @@
       content: "";
       z-index: 10;
       display: block;
-      box-shadow: 0 0 3rem 0.25rem theme(colors.tint.600);
+      box-shadow: 0 0 3rem 0.25rem var(--color-tint-600);
     }
 
     &::before {

package/{src/superdate/SuperDate.module.css → css/styles.css}

@@ -4,7 +4,7 @@
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2025 Adarsh Pastakia
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  * and associated documentation files (the "Software"), to deal in the Software without restriction,
@@ -21,10 +21,4 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .superDate {
-    &:root {
-      font-size: 10px;
-    }
-  }
-}
+@import "./_date.css";

package/dist/cjs/components/DateCell.js

@@ -3,7 +3,6 @@
 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');
@@ -12,9 +11,8 @@ 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,
+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 = react.useMemo(function () {
     return selected && !utilities.isArray(selected) && dateFns.isSameDay(date, selected);
-  }, [date, page, selected]);
+  }, [date, selected]);
   var isMarked = react.useMemo(function () {
     switch (page) {
       case index.PageType.MONTH:
@@ -81,7 +79,7 @@ var DateCell = function DateCell(_ref) {
   }, [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"),
+    className: utilities.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 === index.PageType.DATE && (mouseOver === null || mouseOver === void 0 ? void 0 : mouseOver(date));
     },
@@ -93,6 +91,6 @@ var DateCell = function DateCell(_ref) {
     },
     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

@@ -2,7 +2,7 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var core = require('@react-fabric/core');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var dateFns = require('date-fns');
 var i18next = require('i18next');
 var react = require('react');
@@ -10,10 +10,9 @@ var index = require('../types/index.js');
 var dateUtil = require('../utils/dateUtil.js');
 var jsxRuntime = require('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 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]);
+  }, [isHijri, page, pageDate]);
   var _useMemo = react.useMemo(function () {
       if (page === index.PageType.DATE) {
         var dateBefore = dateFns.addDays(dateUtil.DateUtil.startOfYear(pageDate, isHijri), -1);
@@ -82,27 +81,31 @@ var DateHeader = function DateHeader(props) {
     previousPage = _useMemo4[0],
     nextPage = _useMemo4[1];
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(core.Button, {
-      icon: core.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: utilities.cn(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,
+      icon: {
+        icon: "icon-[mdi--chevron-left]",
+        rtlFlip: true
+      },
       size: "sm",
       variant: "link",
       "aria-label": "prev",
       disabled: !previousPage,
-      className: classNames(hidePrevious && "invisible"),
+      className: utilities.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 === index.PageType.DECADE ? "pointer-events-none" : "cursor-pointer"),
+      className: utilities.cn("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,
+      icon: {
+        icon: "icon-[mdi--chevron-right]",
+        rtlFlip: true
+      },
       size: "sm",
       variant: "link",
       "aria-label": "next",
       disabled: !nextPage,
-      className: classNames(hideNext && "invisible"),
+      className: utilities.cn(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,
+      icon: {
+        icon: "icon-[mdi--chevron-double-right]",
+        rtlFlip: true
+      },
       size: "sm",
       variant: "link",
       "aria-label": "end",
       disabled: !endPage,
-      className: classNames(hideNext && "invisible"),
+      className: utilities.cn(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

@@ -2,22 +2,21 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 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 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; }
+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.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"),
+    className: utilities.cn("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")
+      className: utilities.cn("fabric-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"),
+        className: utilities.cn("fabric-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) {
@@ -43,17 +42,16 @@ var DatePage = function DatePage(_ref) {
           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), {}, {
+          return /*#__PURE__*/jsxRuntime.jsx(DateCell.DateCell, _objectSpread(_objectSpread({}, props), {}, {
             date: dt,
             page: index.PageType.DATE,
             isHijri: isHijri,
-            key: dt.toISOString(),
             isMuted: !dateUtil.DateUtil.isSameMonth(dt, pageDate, isHijri)
-          }));
+          }), dt.toISOString());
         })]
       }, row);
     })]
   });
-};
+}
 
 exports.DatePage = DatePage;

package/dist/cjs/components/DecadePage.js

@@ -9,9 +9,9 @@ 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; }
+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 cols = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-var DecadePage = function DecadePage(_ref) {
+function DecadePage(_ref) {
   var pageDate = _ref.pageDate,
     isHijri = _ref.isHijri,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -29,6 +29,6 @@ var DecadePage = function DecadePage(_ref) {
       }, props), col);
     })
   });
-};
+}
 
 exports.DecadePage = DecadePage;

package/dist/cjs/components/MonthPage.js

@@ -9,9 +9,9 @@ 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; }
+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 cols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-var MonthPage = function MonthPage(_ref) {
+function MonthPage(_ref) {
   var pageDate = _ref.pageDate,
     isHijri = _ref.isHijri,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -28,6 +28,6 @@ var MonthPage = function MonthPage(_ref) {
       }, props), col);
     })
   });
-};
+}
 
 exports.MonthPage = MonthPage;

package/dist/cjs/components/TimeSliders.js

@@ -2,12 +2,11 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var core = require('@react-fabric/core');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
-var Date_module = require('./Date.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var TimeSlider = function TimeSlider(_ref) {
+function TimeSlider(_ref) {
   var _ref$hour = _ref.hour,
     hour = _ref$hour === void 0 ? 0 : _ref$hour,
     _ref$minute = _ref.minute,
@@ -15,28 +14,24 @@ var TimeSlider = function TimeSlider(_ref) {
     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 _usePropState = core.usePropState(hour, function (hr) {
+      var _hourRef$current;
+      return (_hourRef$current = hourRef.current) === null || _hourRef$current === void 0 || (_hourRef$current = _hourRef$current.children.item(hr + 1)) === null || _hourRef$current === void 0 ? void 0 : _hourRef$current.scrollIntoView({
+        block: "center"
+      });
+    }),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    h = _usePropState2[0],
+    setH = _usePropState2[1];
+  var _usePropState3 = core.usePropState(minute, function (mn) {
+      var _minuteRef$current;
+      return (_minuteRef$current = minuteRef.current) === null || _minuteRef$current === void 0 || (_minuteRef$current = _minuteRef$current.children.item(mn + 1)) === null || _minuteRef$current === void 0 ? void 0 : _minuteRef$current.scrollIntoView({
+        block: "center"
+      });
+    }),
+    _usePropState4 = _slicedToArray(_usePropState3, 2),
+    m = _usePropState4[0],
+    setM = _usePropState4[1];
   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;
@@ -52,22 +47,22 @@ var TimeSlider = function TimeSlider(_ref) {
       hour: hour,
       minute: minute
     });
-  }, [onTimeChange]);
+  }, [fireChange, setH, setM]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-base"),
+    className: utilities.cn("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-default"),
     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"),
+        className: utilities.cn("fabric-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"),
+        className: utilities.cn("fabric-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",
+      className: "flex flex-1 flex-nowrap items-stretch overflow-hidden relative",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", Date_module.timeSlider),
+        className: utilities.cn("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider"),
         onScroll: calculateTime,
         ref: hourRef,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -75,7 +70,10 @@ var TimeSlider = function TimeSlider(_ref) {
         }), 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"),
+            className: utilities.cn("ps-2 pe-1 snap-center outline outline-muted", i === h && "font-medium text-primary-600")
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            ,
+
             "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) {
@@ -92,7 +90,7 @@ var TimeSlider = function TimeSlider(_ref) {
           className: "w-full"
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", Date_module.timeSlider),
+        className: utilities.cn("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider"),
         onScroll: calculateTime,
         ref: minuteRef,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -100,7 +98,10 @@ var TimeSlider = function TimeSlider(_ref) {
         }), 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"),
+            className: utilities.cn("ps-1 pe-2 snap-center outline outline-muted", i === m && "font-medium text-primary-600")
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            ,
+
             "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) {
@@ -126,6 +127,6 @@ var TimeSlider = function TimeSlider(_ref) {
       })]
     })]
   });
-};
+}
 
 exports.TimeSlider = TimeSlider;

package/dist/cjs/components/YearPage.js

@@ -9,9 +9,9 @@ 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; }
+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 cols = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-var YearPage = function YearPage(_ref) {
+function YearPage(_ref) {
   var pageDate = _ref.pageDate,
     isHijri = _ref.isHijri,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -29,6 +29,6 @@ var YearPage = function YearPage(_ref) {
       }, props), col);
     })
   });
-};
+}
 
 exports.YearPage = YearPage;

package/dist/cjs/display/DateDisplay.js

@@ -3,33 +3,50 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var dateUtil = require('../utils/dateUtil.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["date", "className", "format", "children"];
+var _excluded = ["date", "className", "format", "children", "showAlternateDate"];
 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) {
+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; }
+/**
+ * DateDisplay component to display a formatted gregorian or hijri date with optional tooltip and dropdown.
+ * It uses the current calendar and locale from the global context.
+ * It formats the date using the provided format or a default format.
+ * If `showAlternateDate` is true, it shows a tooltip with the formatted date.
+ * If `children` are provided, it wraps the date in a dropdown.
+ *
+ * @example
+ * ```jsx
+ * <DateDisplay date={new Date()} />
+ * ```
+ */
+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,
+    showAlternateDate = _ref.showAlternateDate,
     aria = _objectWithoutProperties(_ref, _excluded);
-  var _useGlobals = core.useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar,
-    currentLocale = _useGlobals.currentLocale;
+  var _useApplicationContex = core.useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar,
+    currentLocale = _useApplicationContex.currentLocale;
   var dtLabel = /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+    disabled: !showAlternateDate,
     content: dateUtil.DateUtil.format(date, format, currentLocale, currentCalendar !== "hijri"),
     children: /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
-      className: className
+      className: utilities.cn(className, !!children && "underline decoration-dotted cursor-pointer")
     }, aria), {}, {
       children: dateUtil.DateUtil.format(date, format, currentLocale, currentCalendar === "hijri")
     }))
   });
   return children ? /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
+    showArrow: true,
+    closeOnClick: true,
     children: [dtLabel, children]
   }) : dtLabel;
-};
+}
 
 exports.DateDisplay = DateDisplay;