@react-fabric/date 1.0.0-beta.0

package/dist/esm/i18n/ar.json.js

@@ -0,0 +1,21 @@
+'use client';
+
+var label = {
+	prevMonth: "الشهر الماضى",
+	prevYear: "السنة الماضية",
+	prevDecade: "العقد السابق",
+	nextMonth: "الشهر القادم",
+	nextYear: "العام القادم",
+	nextDecade: "العقد القادم",
+	today: "اليوم",
+	hijri: "هجري",
+	gregorian: "ميلادي"
+};
+var number = {
+};
+var ar = {
+	label: label,
+	number: number
+};
+
+export { ar as default, label, number };

package/dist/esm/i18n/en.json.js

@@ -0,0 +1,18 @@
+'use client';
+
+var label = {
+	prevMonth: "Previous Month",
+	prevYear: "Previous Year",
+	prevDecade: "Previous Decade",
+	nextMonth: "Next Month",
+	nextYear: "Next Year",
+	nextDecade: "Next Decade",
+	today: "Today",
+	hijri: "Hijri",
+	gregorian: "Gregorian"
+};
+var en = {
+	label: label
+};
+
+export { en as default, label };

package/dist/esm/i18n/index.js

@@ -0,0 +1,39 @@
+'use client';
+
+import { addTranslationBundle } from '@react-fabric/core';
+import ar from './ar.json.js';
+import en from './en.json.js';
+import arSuper from './superdate/ar.json.js';
+import enSuper from './superdate/en.json.js';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 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.
+ */
+
+addTranslationBundle("date", {
+  en: en,
+  ar: ar
+});
+addTranslationBundle("superdate", {
+  en: enSuper,
+  ar: arSuper
+});

package/dist/esm/i18n/superdate/ar.json.js

@@ -0,0 +1,79 @@
+'use client';
+
+var separator = " ⇽ ";
+var label = {
+	quick: "حدد مسرعا",
+	relative: "نسبيا",
+	events: "الأحداث",
+	absolute: "مطلق",
+	preset: "المسبقة",
+	current: "تيار",
+	previous: "السابق",
+	from: "من عند",
+	to: "إلى",
+	"+": "من الان",
+	"-": "منذ",
+	apply: "يتقدم",
+	$now: "الآن",
+	$minute: "دقيقة",
+	$hour: "ساعة",
+	$day: "يوم",
+	$week: "أسبوع",
+	$month: "شهر",
+	$quarter: "ربع",
+	$year: "عام",
+	$decade: "عقد"
+};
+var now = {
+	$day: "اليوم",
+	$week: "هذا الاسبوع",
+	$month: "هذا الشهر",
+	$quarter: "هذا الربع",
+	$year: "هذه السنة",
+	$decade: "هذا العقد"
+};
+var next = {
+	$day: "غدا",
+	$week: "الاسبوع القادم",
+	$month: "الشهر القادم",
+	$quarter: "الربع القادم",
+	$year: "العام القادم",
+	$decade: "العقد القادم",
+	$minute: "بعد دقيقة",
+	$hour: "بعد ساعة",
+	$minute_plural: "بعد {{count}} دقائق",
+	$hour_plural: "بعد {{count}} ساعات",
+	$day_plural: "بعد {{count}} أيام",
+	$week_plural: "بعد {{count}} أسابيع",
+	$month_plural: "بعد {{count}} أشهر",
+	$quarter_plural: "بعد {{count}} أرباع",
+	$year_plural: "بعد {{count}} سنوات",
+	$decade_plural: "بعد {{count}} عقود"
+};
+var prev = {
+	$day: "في الامس",
+	$week: "الاسبوع الماضي",
+	$month: "الشهر الماضي",
+	$quarter: "الربع الأخير",
+	$year: "العام الماضي",
+	$decade: "العقد الماضي",
+	$minute: "منذ دقيقة",
+	$hour: "منذ ساعة",
+	$minute_plural: "منذ {{count}} دقيقة",
+	$hour_plural: "منذ {{count}} ساعات",
+	$day_plural: "منذ {{count}} أيام",
+	$week_plural: "من {{count}} اسابيع",
+	$month_plural: "قبل {{count}} أشهر",
+	$quarter_plural: "منذ {{count}} أرباع",
+	$year_plural: "منذ {{count}} سنوات",
+	$decade_plural: "منذ {{count}} عقود"
+};
+var arSuper = {
+	separator: separator,
+	label: label,
+	now: now,
+	next: next,
+	prev: prev
+};
+
+export { arSuper as default, label, next, now, prev, separator };

package/dist/esm/i18n/superdate/en.json.js

@@ -0,0 +1,85 @@
+'use client';
+
+var separator = " ⇾ ";
+var event = {
+	ramadan: "Ramadan",
+	christmas: "Christmas",
+	newYear: "New Year"
+};
+var label = {
+	quick: "Quick Select",
+	relative: "Relative",
+	absolute: "Absolute",
+	events: "Events",
+	preset: "Presets",
+	current: "Current",
+	previous: "Previous",
+	from: "From",
+	to: "To",
+	"+": "From now",
+	"-": "Ago",
+	apply: "Apply",
+	$now: "Now",
+	$minute: "Minute",
+	$hour: "Hour",
+	$day: "Day",
+	$week: "Week",
+	$month: "Month",
+	$quarter: "Quarter",
+	$year: "Year",
+	$decade: "Decade"
+};
+var now = {
+	$day: "Today",
+	$week: "This week",
+	$month: "This month",
+	$quarter: "This quarter",
+	$year: "This year",
+	$decade: "This decade"
+};
+var next = {
+	$day: "Tomorrow",
+	$week: "Next week",
+	$month: "Next month",
+	$quarter: "Next quarter",
+	$year: "Next year",
+	$decade: "Next decade",
+	$minute: "A minute later",
+	$hour: "An hour later",
+	$minute_other: "{{count}} minutes later",
+	$hour_other: "{{count}} hours later",
+	$day_other: "{{count}} days later",
+	$week_other: "{{count}} weeks later",
+	$month_other: "{{count}} months later",
+	$quarter_other: "{{count}} quarters later",
+	$year_other: "{{count}} years later",
+	$decade_other: "{{count}} decades later"
+};
+var prev = {
+	$day: "Yesterday",
+	$week: "Last week",
+	$month: "Last month",
+	$quarter: "Last quarter",
+	$year: "Last year",
+	$decade: "Last decade",
+	$minute: "A minute ago",
+	$hour: "An hour ago",
+	$minute_other: "{{count}} minutes ago",
+	$hour_other: "{{count}} hours ago",
+	$day_other: "{{count}} days ago",
+	$week_other: "{{count}} weeks ago",
+	$month_other: "{{count}} months ago",
+	$quarter_other: "{{count}} quarters ago",
+	$year_other: "{{count}} years ago",
+	$decade_other: "{{count}} decades ago"
+};
+var enSuper = {
+	separator: separator,
+	event: event,
+	label: label,
+	now: now,
+	next: next,
+	prev: prev
+};
+
+export { enSuper as default, event, label, next, now, prev, separator };

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+'use client';
+
+import './hijri/index.js';
+import './i18n/index.js';
+export { DateDisplay } from './display/DateDisplay.js';
+export { DatePanel } from './panels/DatePanel.js';
+export { RangePanel } from './panels/RangePanel.js';
+export { SuperDate } from './superdate/Superdate.js';
+export { DateUtil } from './utils/dateUtil.js';

package/dist/esm/panels/BasePanel.js

@@ -0,0 +1,73 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { DateHeader } from '../components/DateHeader.js';
+import { DatePage } from '../components/DatePage.js';
+import { DecadePage } from '../components/DecadePage.js';
+import { MonthPage } from '../components/MonthPage.js';
+import { TimeSlider } from '../components/TimeSliders.js';
+import { YearPage } from '../components/YearPage.js';
+import { PageType } from '../types/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["min", "max", "isHijri", "withTime", "hideNext", "hidePrevious", "changePage", "changePageDate", "changeTime", "selectDate", "isDateDisabled"];
+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 BasePanel = function BasePanel(_ref) {
+  var min = _ref.min,
+    max = _ref.max,
+    isHijri = _ref.isHijri,
+    withTime = _ref.withTime,
+    hideNext = _ref.hideNext,
+    hidePrevious = _ref.hidePrevious,
+    changePage = _ref.changePage,
+    _changePageDate = _ref.changePageDate,
+    changeTime = _ref.changeTime,
+    selectDate = _ref.selectDate,
+    isDateDisabled = _ref.isDateDisabled,
+    state = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("div", {
+    className: "grid overflow-hidden select-none",
+    style: {
+      gridTemplate: "\"head head\" auto \"content time\" 1fr / 1fr auto"
+    },
+    children: [/*#__PURE__*/jsx(DateHeader, _objectSpread(_objectSpread({}, state), {}, {
+      min: min,
+      max: max,
+      hideNext: hideNext,
+      hidePrevious: hidePrevious,
+      isHijri: isHijri,
+      changePage: changePage,
+      changePageDate: function changePageDate(dt) {
+        return _changePageDate(dt, false);
+      }
+    })), /*#__PURE__*/jsx(DatePage, _objectSpread(_objectSpread({}, state), {}, {
+      isHijri: isHijri,
+      selectDate: selectDate,
+      dateDisabled: isDateDisabled,
+      changePageDate: _changePageDate
+    })), state.page === PageType.MONTH && /*#__PURE__*/jsx(MonthPage, _objectSpread(_objectSpread({}, state), {}, {
+      isHijri: isHijri,
+      selectDate: selectDate,
+      dateDisabled: isDateDisabled,
+      changePageDate: _changePageDate
+    })), state.page === PageType.YEAR && /*#__PURE__*/jsx(YearPage, _objectSpread(_objectSpread({}, state), {}, {
+      isHijri: isHijri,
+      selectDate: selectDate,
+      dateDisabled: isDateDisabled,
+      changePageDate: _changePageDate
+    })), state.page === PageType.DECADE && /*#__PURE__*/jsx(DecadePage, _objectSpread(_objectSpread({}, state), {}, {
+      isHijri: isHijri,
+      selectDate: selectDate,
+      dateDisabled: isDateDisabled,
+      changePageDate: _changePageDate
+    })), withTime && state.page === PageType.DATE && /*#__PURE__*/jsx(TimeSlider, {
+      hour: state.hour,
+      minute: state.minute,
+      onTimeChange: changeTime
+    })]
+  });
+};
+
+export { BasePanel };

package/dist/esm/panels/DatePanel.js

@@ -0,0 +1,205 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useGlobals, useDebounce, Button } from '@react-fabric/core';
+import { isEmpty, isArray } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { isBefore, isAfter, isSameDay } from 'date-fns';
+import { useState, useEffect, useReducer, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageType } from '../types/index.js';
+import { DateUtil } from '../utils/dateUtil.js';
+import { BasePanel } from './BasePanel.js';
+import { jsxs, jsx } from '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) {
+  var className = _ref.className,
+    max = _ref.max,
+    min = _ref.min,
+    dateDisabled = _ref.dateDisabled,
+    onChange = _ref.onChange,
+    showHijriToggle = _ref.showHijriToggle,
+    value = _ref.value,
+    withTime = _ref.withTime,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation("date"),
+    t = _useTranslation.t;
+  var _useGlobals = useGlobals(),
+    currentCalendar = _useGlobals.currentCalendar;
+  var _useState = useState(currentCalendar === "hijri"),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHijri = _useState2[0],
+    setHijri = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    canSelectToday = _useState4[0],
+    setCanSelectToday = _useState4[1];
+  var fireChange = useDebounce(onChange, [onChange]);
+  useEffect(function () {
+    setHijri(currentCalendar === "hijri");
+  }, [currentCalendar]);
+  var _useReducer = useReducer(function (state, action) {
+      if (action.type === "reset") {
+        if (!isEmpty(action.date)) {
+          var date = new Date(action.date);
+          state.selected = date;
+          state.pageDate = date;
+          state.hour = date.getHours();
+          state.minute = date.getMinutes();
+        } else {
+          state.selected = undefined;
+          state.pageDate = new Date();
+          state.hour = 0;
+          state.minute = 0;
+        }
+      }
+      if (action.type === "changeDate") {
+        action.date.setHours(state.hour);
+        action.date.setMinutes(state.minute);
+        state.selected = action.date;
+        state.pageDate = action.date;
+      }
+      if (action.type === "changeTime") {
+        var _state$selected, _state$selected2;
+        (_state$selected = state.selected) === null || _state$selected === void 0 || _state$selected.setHours(action.hour);
+        (_state$selected2 = state.selected) === null || _state$selected2 === void 0 || _state$selected2.setMinutes(action.minute);
+        state.hour = action.hour;
+        state.minute = action.minute;
+      }
+      if (action.type === "changePage") {
+        state.page = action.page;
+      }
+      if (action.type === "changePageDate") {
+        state.pageDate = action.date;
+        action.pageChange && (state.page = Math.max(state.page - 1, 0));
+      }
+      if (action.type === "changeDate" || action.type === "changeTime") {
+        if (min && state.selected && isBefore(state.selected, new Date(min))) {
+          state.selected = new Date(min);
+          state.hour = state.selected.getHours();
+          state.minute = state.selected.getMinutes();
+        }
+        if (max && state.selected && isAfter(state.selected, new Date(max))) {
+          state.selected = new Date(max);
+          state.hour = state.selected.getHours();
+          state.minute = state.selected.getMinutes();
+        }
+        state.selected && (fireChange === null || fireChange === void 0 ? void 0 : fireChange(state.selected.toISOString()));
+      }
+      return _objectSpread({}, state);
+    }, {
+      page: PageType.DATE,
+      pageDate: new Date(),
+      hour: 0,
+      minute: 0
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  useEffect(function () {
+    var canSelect = true;
+    if (min && canSelect) {
+      canSelect = isAfter(new Date(), min);
+    }
+    if (max && canSelect) {
+      canSelect = isBefore(new Date(), max);
+    }
+    setCanSelectToday(canSelect);
+  }, [min, max]);
+  useEffect(function () {
+    dispatch({
+      type: "reset",
+      date: value
+    });
+  }, [value]);
+  var isDateDisabled = useCallback(function (dt) {
+    if (state.page === PageType.DATE) {
+      if (isArray(dateDisabled)) {
+        return !!dateDisabled.find(function (dd) {
+          return isSameDay(new Date(dd), dt);
+        });
+      }
+    }
+    return DateUtil.isDisabled(dt, state.page, min, max);
+  }, [state.page, min, max, dateDisabled]);
+  var changePageDate = useCallback(function (date) {
+    var pageChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    dispatch({
+      type: "changePageDate",
+      pageChange: pageChange,
+      date: date
+    });
+  }, []);
+  var selectDate = useCallback(function (date) {
+    dispatch({
+      type: "changeDate",
+      date: date
+    });
+  }, []);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsx(BasePanel, _objectSpread(_objectSpread({}, state), {}, {
+      max: max,
+      min: min,
+      withTime: withTime,
+      isHijri: isHijri,
+      selectDate: selectDate,
+      isDateDisabled: isDateDisabled,
+      changeTime: function changeTime(time) {
+        return dispatch(_objectSpread({
+          type: "changeTime"
+        }, time));
+      },
+      changePage: function changePage(page) {
+        return dispatch({
+          type: "changePage",
+          page: page
+        });
+      },
+      changePageDate: changePageDate
+    })), /*#__PURE__*/jsxs("div", {
+      className: "border-t flex flex-nowrap justify-between px-2",
+      children: [/*#__PURE__*/jsx("span", {
+        children: showHijriToggle && /*#__PURE__*/jsx(Button, {
+          size: "sm",
+          variant: "link",
+          color: "primary",
+          className: "my-1",
+          onClick: function onClick() {
+            setHijri(!isHijri);
+          },
+          children: t(isHijri ? "label.gregorian" : "label.hijri")
+        })
+      }), state.page === PageType.DATE && canSelectToday && /*#__PURE__*/jsx(Button, {
+        size: "sm",
+        variant: "link",
+        color: "primary",
+        className: "my-1",
+        onClick: function onClick() {
+          return selectDate(new Date());
+        },
+        children: t("label.today")
+      }), state.page !== PageType.DATE && /*#__PURE__*/jsx(Button, {
+        size: "sm",
+        variant: "link",
+        color: "primary",
+        className: "my-1",
+        onClick: function onClick() {
+          return dispatch({
+            type: "changePage",
+            page: PageType.DATE
+          });
+        },
+        children: t("core:action.cancel")
+      })]
+    })]
+  }));
+};
+
+export { DatePanel };