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

package/src/hijri/initializer.js

@@ -0,0 +1,96 @@
+import {
+  GregToHijri
+} from './DateConverter';
+import StringDateParser from './StringDateParser';
+
+const defaultFormat = 'yyyy/mm/dd';
+const defaultProps ={
+  month:1,
+  date:1,
+  hours:0,
+  minutes:0,
+  seconds:0,
+  milliseconds:0
+};
+
+class Initializer {
+
+   static initDefault() {
+      return GregToHijri(new Date());
+   }
+
+   static init_number (number) {
+     return GregToHijri(new Date(number));
+   }
+
+   static init_number_number (year, month) {
+
+     return this.init_number_number_number(year, month, 1);
+   }
+   static init_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+
+   static init_string() {
+     return this.initFromStrings(...arguments);
+   }
+
+   static init_string_string() {
+     return this.initFromStrings(...arguments);
+   }
+
+   static init_object(object) {
+     return Object.assign({}, defaultProps, object);
+   }
+   static initFromNumbers(year,
+     month,
+     date,
+     hours = 0,
+     minutes = 0,
+     seconds = 0,
+     milliseconds = 0)
+   {
+     Array.from(arguments).forEach((arg, index) => {
+       arguments[index] = parseInt(arg);
+     });
+
+     return {
+       year,
+       month,
+       date,
+       hours,
+       minutes,
+       seconds,
+       milliseconds
+     }
+   }
+
+
+   //TODO
+   static initFromStrings(dateString, format = defaultFormat) {
+      const props = {};
+      props.year= StringDateParser.extractYear(dateString, format);
+      props.month= StringDateParser.extractMonth(dateString, format);
+      props.date= StringDateParser.extractDate(dateString, format);
+      return Object.assign({}, defaultProps, props);
+   }
+
+
+
+}
+
+Initializer.defaultFormat = defaultFormat;
+
+export default Initializer;

package/src/hijri/locales.js

@@ -0,0 +1,109 @@
+export const ar = {
+  dayNames: [
+    "ح",
+    "ن",
+    "ث",
+    "ر",
+    "خ",
+    "ج",
+    "س",
+    "أحد",
+    "اثن",
+    "ثلا",
+    "ارب",
+    "خم",
+    "جم",
+    "سبت",
+    "الأحد",
+    "الإثنين",
+    "الثلاثاء",
+    "الإربعاء",
+    "الخميس",
+    "الجمعة",
+    "السبت",
+  ],
+  monthNames: [
+    "مح",
+    "صف",
+    "ربع١",
+    "ربع٢",
+    "جم١",
+    "جم٢",
+    "رجب",
+    "شعب",
+    "رمض",
+    "شو",
+    "ذو ق",
+    "ذو ح",
+    "محرّم",
+    "صفر",
+    "ربيع أول",
+    "ربيع الآخر",
+    "جمادى أولى",
+    "جمادى الآخرة",
+    "رجب",
+    "شعبان",
+    "رمضان",
+    "شوال",
+    "ذو القعدة",
+    "ذو الحجّة",
+  ],
+  separator: "عند",
+  am: "ص",
+  pm: "م",
+};
+
+export const en = {
+  dayNames: [
+    "Su",
+    "Mo",
+    "Tu",
+    "We",
+    "Th",
+    "Fr",
+    "Sa",
+    "Sun",
+    "Mon",
+    "Tue",
+    "Wed",
+    "Thu",
+    "Fri",
+    "Sat",
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  monthNames: [
+    "Muha",
+    "Saf",
+    "Rab1",
+    "Rab2",
+    "Jumd1",
+    "Jumd2",
+    "Rajb",
+    "Shbn",
+    "Rmdn",
+    "Shwl",
+    "Qada",
+    "Hija",
+    "Muharram",
+    "Safar",
+    "Rabi'ul Awwal",
+    "Rabi'ul Akhir",
+    "Jumadal Ula",
+    "Jumadal Akhira",
+    "Rajab",
+    "Sha'ban",
+    "Ramadan",
+    "Shawwal",
+    "Dhul Qa'ada",
+    "Dhul Hijja",
+  ],
+  separator: "at",
+  am: "am",
+  pm: "pm",
+};

package/src/hijri/safe.js

@@ -0,0 +1,16 @@
+import HijriDate from './HijriDate';
+import {GregToHijri} from './DateConverter';
+
+export const toHijri = ((gregDate) => {
+  const {year, month, date} = GregToHijri(gregDate);
+  return new HijriDate(
+    year,
+    month,
+    date,
+    gregDate.getHours(),
+    gregDate.getMinutes(),
+    gregDate.getSeconds(),
+    gregDate.getMilliseconds()
+  );
+});
+export default HijriDate;

package/src/i18n/ar/date.json

@@ -0,0 +1,203 @@
+{
+  "label": {
+    "prevMonth": "الشهر الماضى",
+    "prevYear": "السنة الماضية",
+    "prevDecade": "العقد السابق",
+    "nextMonth": "الشهر القادم",
+    "nextYear": "العام القادم",
+    "nextDecade": "العقد القادم",
+    "today": "اليوم",
+    "hijri": "هجري",
+    "gregorian": "ميلادي"
+  },
+  "relative": {
+    "before": {
+      "now": "الآن",
+      "years": "{{count}} منذ عام",
+      "months": "{{count}} منذ شهر",
+      "weeks": "{{count}} قبل أسبوع",
+      "days": "{{count}} منذ يوم",
+      "hours": "{{count}} منذ ساعة",
+      "minutes": "{{count}} منذ دقيقة",
+      "seconds": "{{count}} قبل الثاني",
+      "yearsX": "بالكاد {{count}} منذ عام",
+      "monthsX": "بالكاد {{count}} منذ شهر",
+      "weeksX": "بالكاد {{count}} قبل أسبوع",
+      "daysX": "بالكاد {{count}} منذ يوم",
+      "hoursX": "بالكاد {{count}} منذ ساعة",
+      "minutesX": "بالكاد {{count}} منذ دقيقة",
+      "years_zero": "{{count}} منذ سنوات",
+      "years_one": "{{count}} منذ عام",
+      "years_two": "{{count}} منذ سنوات",
+      "years_few": "{{count}} منذ سنوات",
+      "years_many": "{{count}} منذ سنوات",
+      "years_other": "{{count}} منذ سنوات",
+      "months_zero": "{{count}} منذ أشهر",
+      "months_one": "{{count}} منذ شهر",
+      "months_two": "{{count}} منذ أشهر",
+      "months_few": "{{count}} منذ أشهر",
+      "months_many": "{{count}} منذ أشهر",
+      "months_other": "{{count}} منذ أشهر",
+      "weeks_zero": "{{count}} منذ أسابيع",
+      "weeks_one": "{{count}} قبل أسبوع",
+      "weeks_two": "{{count}} منذ أسابيع",
+      "weeks_few": "{{count}} منذ أسابيع",
+      "weeks_many": "{{count}} منذ أسابيع",
+      "weeks_other": "{{count}} منذ أسابيع",
+      "days_zero": "{{count}} منذ أيام",
+      "days_one": "{{count}} منذ يوم",
+      "days_two": "{{count}} منذ أيام",
+      "days_few": "{{count}} منذ أيام",
+      "days_many": "{{count}} منذ أيام",
+      "days_other": "{{count}} منذ أيام",
+      "hours_zero": "{{count}} منذ ساعات",
+      "hours_one": "{{count}} منذ ساعة",
+      "hours_two": "{{count}} منذ ساعات",
+      "hours_few": "{{count}} منذ ساعات",
+      "hours_many": "{{count}} منذ ساعات",
+      "hours_other": "{{count}} منذ ساعات",
+      "minutes_zero": "{{count}} منذ دقائق",
+      "minutes_one": "{{count}} منذ دقيقة",
+      "minutes_two": "{{count}} منذ دقائق",
+      "minutes_few": "{{count}} منذ دقائق",
+      "minutes_many": "{{count}} منذ دقائق",
+      "minutes_other": "{{count}} منذ دقائق",
+      "seconds_zero": "{{count}} قبل ثوان",
+      "seconds_one": "{{count}} قبل الثاني",
+      "seconds_two": "{{count}} قبل ثوان",
+      "seconds_few": "{{count}} قبل ثوان",
+      "seconds_many": "{{count}} قبل ثوان",
+      "seconds_other": "{{count}} قبل ثوان",
+      "yearsX_zero": "بالكاد {{count}} منذ سنوات",
+      "yearsX_one": "بالكاد {{count}} منذ عام",
+      "yearsX_two": "بالكاد {{count}} منذ سنوات",
+      "yearsX_few": "بالكاد {{count}} منذ سنوات",
+      "yearsX_many": "بالكاد {{count}} منذ سنوات",
+      "yearsX_other": "بالكاد {{count}} منذ سنوات",
+      "monthsX_zero": "بالكاد {{count}} منذ أشهر",
+      "monthsX_one": "بالكاد {{count}} منذ شهر",
+      "monthsX_two": "بالكاد {{count}} منذ أشهر",
+      "monthsX_few": "بالكاد {{count}} منذ أشهر",
+      "monthsX_many": "بالكاد {{count}} منذ أشهر",
+      "monthsX_other": "بالكاد {{count}} منذ أشهر",
+      "weeksX_zero": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_one": "بالكاد {{count}} قبل أسبوع",
+      "weeksX_two": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_few": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_many": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_other": "بالكاد {{count}} منذ أسابيع",
+      "daysX_zero": "بالكاد {{count}} منذ أيام",
+      "daysX_one": "بالكاد {{count}} منذ يوم",
+      "daysX_two": "بالكاد {{count}} منذ أيام",
+      "daysX_few": "بالكاد {{count}} منذ أيام",
+      "daysX_many": "بالكاد {{count}} منذ أيام",
+      "daysX_other": "بالكاد {{count}} منذ أيام",
+      "hoursX_zero": "بالكاد {{count}} منذ ساعات",
+      "hoursX_one": "بالكاد {{count}} منذ ساعة",
+      "hoursX_two": "بالكاد {{count}} منذ ساعات",
+      "hoursX_few": "بالكاد {{count}} منذ ساعات",
+      "hoursX_many": "بالكاد {{count}} منذ ساعات",
+      "hoursX_other": "بالكاد {{count}} منذ ساعات",
+      "minutesX_zero": "بالكاد {{count}} منذ دقائق",
+      "minutesX_one": "بالكاد {{count}} منذ دقيقة",
+      "minutesX_two": "بالكاد {{count}} منذ دقائق",
+      "minutesX_few": "بالكاد {{count}} منذ دقائق",
+      "minutesX_many": "بالكاد {{count}} منذ دقائق",
+      "minutesX_other": "بالكاد {{count}} منذ دقائق"
+    },
+    "after": {
+      "now": "قريباً",
+      "years": "{{count}} بعد عام",
+      "months": "{{count}} بعد شهر",
+      "weeks": "{{count}} بعد أسبوع",
+      "days": "{{count}} بعد يوم",
+      "hours": "{{count}} بعد ساعة",
+      "minutes": "{{count}} بعد دقيقة",
+      "seconds": "{{count}} الثاني في وقت لاحق",
+      "yearsX": "بالكاد {{count}} بعد عام",
+      "monthsX": "بالكاد {{count}} بعد شهر",
+      "weeksX": "بالكاد {{count}} بعد أسبوع",
+      "daysX": "بالكاد {{count}} بعد يوم",
+      "hoursX": "بالكاد {{count}} بعد ساعة",
+      "minutesX": "بالكاد {{count}} بعد دقيقة",
+      "years_zero": "{{count}} بعد سنوات",
+      "years_one": "{{count}} بعد عام",
+      "years_two": "{{count}} بعد سنوات",
+      "years_few": "{{count}} بعد سنوات",
+      "years_many": "{{count}} بعد سنوات",
+      "years_other": "{{count}} بعد سنوات",
+      "months_zero": "{{count}} بعد أشهر",
+      "months_one": "{{count}} بعد شهر",
+      "months_two": "{{count}} بعد أشهر",
+      "months_few": "{{count}} بعد أشهر",
+      "months_many": "{{count}} بعد أشهر",
+      "months_other": "{{count}} بعد أشهر",
+      "weeks_zero": "{{count}} بعد أسابيع",
+      "weeks_one": "{{count}} بعد أسبوع",
+      "weeks_two": "{{count}} بعد أسابيع",
+      "weeks_few": "{{count}} بعد أسابيع",
+      "weeks_many": "{{count}} بعد أسابيع",
+      "weeks_other": "{{count}} بعد أسابيع",
+      "days_zero": "{{count}} بعد أيام",
+      "days_one": "{{count}} بعد يوم",
+      "days_two": "{{count}} بعد أيام",
+      "days_few": "{{count}} بعد أيام",
+      "days_many": "{{count}} بعد أيام",
+      "days_other": "{{count}} بعد أيام",
+      "hours_zero": "{{count}} بعد ساعات",
+      "hours_one": "{{count}} بعد ساعة",
+      "hours_two": "{{count}} بعد ساعات",
+      "hours_few": "{{count}} بعد ساعات",
+      "hours_many": "{{count}} بعد ساعات",
+      "hours_other": "{{count}} بعد ساعات",
+      "minutes_zero": "{{count}} بعد دقائق",
+      "minutes_one": "{{count}} بعد دقيقة",
+      "minutes_two": "{{count}} بعد دقائق",
+      "minutes_few": "{{count}} بعد دقائق",
+      "minutes_many": "{{count}} بعد دقائق",
+      "minutes_other": "{{count}} بعد دقائق",
+      "seconds_zero": "{{count}} بعد ثوان",
+      "seconds_one": "{{count}} الثاني في وقت لاحق",
+      "seconds_two": "{{count}} بعد ثوان",
+      "seconds_few": "{{count}} بعد ثوان",
+      "seconds_many": "{{count}} بعد ثوان",
+      "seconds_other": "{{count}} بعد ثوان",
+      "yearsX_zero": "بالكاد {{count}} بعد سنوات",
+      "yearsX_one": "بالكاد {{count}} بعد عام",
+      "yearsX_two": "بالكاد {{count}} بعد سنوات",
+      "yearsX_few": "بالكاد {{count}} بعد سنوات",
+      "yearsX_many": "بالكاد {{count}} بعد سنوات",
+      "yearsX_other": "بالكاد {{count}} بعد سنوات",
+      "monthsX_zero": "بالكاد {{count}} بعد أشهر",
+      "monthsX_one": "بالكاد {{count}} بعد شهر",
+      "monthsX_two": "بالكاد {{count}} بعد أشهر",
+      "monthsX_few": "بالكاد {{count}} بعد أشهر",
+      "monthsX_many": "بالكاد {{count}} بعد أشهر",
+      "monthsX_other": "بالكاد {{count}} بعد أشهر",
+      "weeksX_zero": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_one": "بالكاد {{count}} بعد أسبوع",
+      "weeksX_two": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_few": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_many": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_other": "بالكاد {{count}} بعد أسابيع",
+      "daysX_zero": "بالكاد {{count}} بعد أيام",
+      "daysX_one": "بالكاد {{count}} بعد يوم",
+      "daysX_two": "بالكاد {{count}} بعد أيام",
+      "daysX_few": "بالكاد {{count}} بعد أيام",
+      "daysX_many": "بالكاد {{count}} بعد أيام",
+      "daysX_other": "بالكاد {{count}} بعد أيام",
+      "hoursX_zero": "بالكاد {{count}} بعد ساعات",
+      "hoursX_one": "بالكاد {{count}} بعد ساعة",
+      "hoursX_two": "بالكاد {{count}} بعد ساعات",
+      "hoursX_few": "بالكاد {{count}} بعد ساعات",
+      "hoursX_many": "بالكاد {{count}} بعد ساعات",
+      "hoursX_other": "بالكاد {{count}} بعد ساعات",
+      "minutesX_zero": "بالكاد {{count}} بعد دقائق",
+      "minutesX_one": "بالكاد {{count}} بعد دقيقة",
+      "minutesX_two": "بالكاد {{count}} بعد دقائق",
+      "minutesX_few": "بالكاد {{count}} بعد دقائق",
+      "minutesX_many": "بالكاد {{count}} بعد دقائق",
+      "minutesX_other": "بالكاد {{count}} بعد دقائق"
+    }
+  }
+}

package/src/i18n/en/date.json

@@ -0,0 +1,73 @@
+{
+  "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"
+  },
+  "relative": {
+    "before": {
+      "now": "Just now",
+      "years": "Last year",
+      "years_other": "{{count}} years ago",
+      "months": "Last month",
+      "months_other": "{{count}} months ago",
+      "weeks": "Last week",
+      "weeks_other": "{{count}} weeks ago",
+      "days": "Yesterday",
+      "days_other": "{{count}} days ago",
+      "hours": "{{count}} hour ago",
+      "hours_other": "{{count}} hours ago",
+      "minutes": "{{count}} minute ago",
+      "minutes_other": "{{count}} minutes ago",
+      "seconds": "{{count}} second ago",
+      "seconds_other": "{{count}} seconds ago",
+      "yearsX": "Almost {{count}} year ago",
+      "yearsX_other": "Almost {{count}} years ago",
+      "monthsX": "Almost {{count}} month ago",
+      "monthsX_other": "Almost {{count}} months ago",
+      "weeksX": "Almost {{count}} week ago",
+      "weeksX_other": "Almost {{count}} weeks ago",
+      "daysX": "Almost {{count}} day ago",
+      "daysX_other": "Almost {{count}} days ago",
+      "hoursX": "Almost {{count}} hour ago",
+      "hoursX_other": "Almost {{count}} hours ago",
+      "minutesX": "Almost {{count}} minute ago",
+      "minutesX_other": "Almost {{count}} minutes ago"
+    },
+    "after": {
+      "now": "Soon",
+      "years": "Next year",
+      "years_other": "{{count}} years later",
+      "months": "Next month",
+      "months_other": "{{count}} months later",
+      "weeks": "Next week",
+      "weeks_other": "{{count}} weeks later",
+      "days": "Tomorrow",
+      "days_other": "{{count}} days later",
+      "hours": "{{count}} hour later",
+      "hours_other": "{{count}} hours later",
+      "minutes": "{{count}} minute later",
+      "minutes_other": "{{count}} minutes later",
+      "seconds": "{{count}} second later",
+      "seconds_other": "{{count}} seconds later",
+      "yearsX": "Almost {{count}} year later",
+      "yearsX_other": "Almost {{count}} years later",
+      "monthsX": "Almost {{count}} month later",
+      "monthsX_other": "Almost {{count}} months later",
+      "weeksX": "Almost {{count}} week later",
+      "weeksX_other": "Almost {{count}} weeks later",
+      "daysX": "Almost {{count}} day later",
+      "daysX_other": "Almost {{count}} days later",
+      "hoursX": "Almost {{count}} hour later",
+      "hoursX_other": "Almost {{count}} hours later",
+      "minutesX": "Almost {{count}} minute later",
+      "minutesX_other": "Almost {{count}} minutes later"
+    }
+  }
+}

package/src/i18n/index.ts

@@ -22,10 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
-import arSuper from "./superdate/ar.json";
-import enSuper from "./superdate/en.json";
+import ar from "./ar/date.json";
+import en from "./en/date.json";
 
 addTranslationBundle("date", { en, ar });
-addTranslationBundle("superdate", { en: enSuper, ar: arSuper });

package/src/index.ts

@@ -1,32 +1,43 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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.
  */
 
+export const DATE_PACKAGE = "@react-fabric/date";
+export const DATE_VERSION = "1.0.0";
+
 import "./hijri";
 import "./i18n";
 
+export { DateHeader } from "./components/DateHeader";
+export { DecadePage } from "./components/DecadePage";
+export { YearPage } from "./components/YearPage";
 export { DateDisplay } from "./display/DateDisplay";
+export { DateDuration } from "./display/DateDuration";
 export { DatePanel } from "./panels/DatePanel";
+export { EventPanel } from "./panels/EventPanel";
 export { RangePanel } from "./panels/RangePanel";
-export { SuperDate } from "./superdate/Superdate";
 
 export { DateUtil } from "./utils/dateUtil";
+
+export * from "./types";

package/src/panels/BasePanel.tsx

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cn } from "@react-fabric/utilities";
 import { DateHeader } from "../components/DateHeader";
 import { DatePage } from "../components/DatePage";
 import { DecadePage } from "../components/DecadePage";
@@ -53,7 +54,7 @@ export interface PanelProps {
   isDateDisabled: (date: Date) => boolean;
 }
 
-export const BasePanel = ({
+export function BasePanel({
   min,
   max,
   isHijri,
@@ -66,12 +67,12 @@ export const BasePanel = ({
   selectDate,
   isDateDisabled,
   ...state
-}: PanelProps) => {
+}: PanelProps) {
   return (
     <div
-      className="grid overflow-hidden select-none"
+      className={cn("grid flex-content overflow-hidden select-none", withTime ? "w-68" : "w-60")}
       style={{
-        gridTemplate: `"head head" auto "content time" 1fr / 1fr auto`,
+        gridTemplate: `"header header" auto "content time" 1fr / 1fr auto`,
       }}
     >
       <DateHeader
@@ -119,12 +120,8 @@ export const BasePanel = ({
         />
       )}
       {withTime && state.page === PageType.DATE && (
-        <TimeSlider
-          hour={state.hour}
-          minute={state.minute}
-          onTimeChange={changeTime}
-        />
+        <TimeSlider hour={state.hour} minute={state.minute} onTimeChange={changeTime} />
       )}
     </div>
   );
-};
+}