@react-fabric/date 1.0.0-beta.0

package/dist/esm/components/DatePage.js

@@ -0,0 +1,59 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { getDay } from 'date-fns';
+import i18next from 'i18next';
+import { useMemo, Fragment, createElement } from 'react';
+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; }
+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 = useMemo(function () {
+    var first = DateUtil.startOfMonth(pageDate, isHijri);
+    var current = getDay(first);
+    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"),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classNames(classes.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"),
+        children: DateUtil.format(dt, "eeeeee", i18next.language, isHijri)
+      }, dt.toISOString());
+    }), rows.map(function (row) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: "px-1 py-1.5 m-px text-xs text-center text-tint-300",
+          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), {}, {
+            date: dt,
+            page: PageType.DATE,
+            isHijri: isHijri,
+            key: dt.toISOString(),
+            isMuted: !DateUtil.isSameMonth(dt, pageDate, isHijri)
+          }));
+        })]
+      }, row);
+    })]
+  });
+};
+
+export { DatePage };

package/dist/esm/components/DecadePage.js

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

package/dist/esm/components/MonthPage.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useMemo } from 'react';
+import { DateUtil } from '../utils/dateUtil.js';
+import { DateCell } from './DateCell.js';
+import { 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; }
+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 = useMemo(function () {
+    return DateUtil.startOfYear(pageDate, isHijri);
+  }, [isHijri, pageDate]);
+  return /*#__PURE__*/jsx("div", {
+    className: "grid grid-cols-3 area-content place-content-center",
+    children: cols.map(function (col) {
+      return /*#__PURE__*/jsx(DateCell, _objectSpread({
+        isHijri: isHijri,
+        className: "px-1 py-3",
+        date: DateUtil.addMonths(startDate, col, isHijri)
+      }, props), col);
+    })
+  });
+};
+
+export { MonthPage };

package/dist/esm/components/TimeSliders.js

@@ -0,0 +1,131 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useDebounce } from '@react-fabric/core';
+import classNames from 'classnames';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import classes from './Date.module.css';
+import { jsxs, jsx } from '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 = useRef(null);
+  var minuteRef = useRef(null);
+  var _useState = useState(hour),
+    _useState2 = _slicedToArray(_useState, 2),
+    h = _useState2[0],
+    setH = _useState2[1];
+  var _useState3 = useState(minute),
+    _useState4 = _slicedToArray(_useState3, 2),
+    m = _useState4[0],
+    setM = _useState4[1];
+  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]);
+  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 = useDebounce(onTimeChange, [onTimeChange]);
+  var calculateTime = 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__*/jsxs("div", {
+    className: classNames("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-base"),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex",
+      children: [/*#__PURE__*/jsx("div", {
+        className: classNames(classes.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        children: "H"
+      }), /*#__PURE__*/jsx("div", {
+        className: classNames(classes.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        children: "M"
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-1 flex-nowrap overflow-hidden relative",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", classes.timeSlider),
+        onScroll: calculateTime,
+        ref: hourRef,
+        children: [/*#__PURE__*/jsx("div", {
+          className: "w-full"
+        }), Array(24).fill(0).map(function (_, i) {
+          return /*#__PURE__*/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__*/jsx("div", {
+              children: i.toString(10).padStart(2, "0")
+            })
+          }, i);
+        }), /*#__PURE__*/jsx("div", {
+          className: "w-full"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", classes.timeSlider),
+        onScroll: calculateTime,
+        ref: minuteRef,
+        children: [/*#__PURE__*/jsx("div", {
+          className: "w-full"
+        }), Array(60).fill(0).map(function (_, i) {
+          return /*#__PURE__*/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__*/jsx("div", {
+              children: i.toString(10).padStart(2, "0")
+            })
+          }, i);
+        }), /*#__PURE__*/jsx("div", {
+          className: "w-full"
+        })]
+      }), /*#__PURE__*/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__*/jsx("div", {
+          className: "border-s-4 border-t-4 border-b-4 border-transparent border-s-primary-500"
+        }), /*#__PURE__*/jsx("div", {
+          className: "border-e-4 border-t-4 border-b-4 border-transparent border-e-primary-500"
+        })]
+      })]
+    })]
+  });
+};
+
+export { TimeSlider };

package/dist/esm/components/YearPage.js

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

package/dist/esm/display/DateDisplay.js

@@ -0,0 +1,35 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useGlobals, Tooltip, Dropdown } from '@react-fabric/core';
+import { DateUtil } from '../utils/dateUtil.js';
+import { jsx, jsxs } from '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 = useGlobals(),
+    currentCalendar = _useGlobals.currentCalendar,
+    currentLocale = _useGlobals.currentLocale;
+  var dtLabel = /*#__PURE__*/jsx(Tooltip, {
+    content: DateUtil.format(date, format, currentLocale, currentCalendar !== "hijri"),
+    children: /*#__PURE__*/jsx("span", _objectSpread(_objectSpread({
+      className: className
+    }, aria), {}, {
+      children: DateUtil.format(date, format, currentLocale, currentCalendar === "hijri")
+    }))
+  });
+  return children ? /*#__PURE__*/jsxs(Dropdown, {
+    children: [dtLabel, children]
+  }) : dtLabel;
+};
+
+export { DateDisplay };