@react-fabric/date 1.0.0-beta.5 → 1.0.0-beta.51

package/dist/types/hijri/HijriDate.d.ts

@@ -0,0 +1,214 @@
+export const dateProps: string[];
+export default HijriDate;
+/**
+  The class which handles Hijri 🌙 instances
+
+  @example  new HijriDate(); //now
+            new HijriDate(1438, 12, 10) ; // يوم عيد الأضحى لسنة ١٤٣٨
+            new HijriDate(1438,7, 20, 18, 50, 44, 333); //  Monday Rajab 20 1438 18:50:44
+            new HijriDate({year:1355, hours:17}); // Tue Muharram 01 1355 17:00:00
+            new HijriDate(1484408713014);
+
+
+            new HijriDate().toGregorian(); //  === new Date();
+            new Date().toHijri(); //  === new HijriDate();
+ */
+declare class HijriDate {
+    static now(): number;
+    static today(): HijriDate;
+    static yesterday(): HijriDate;
+    static tomorrow(): HijriDate;
+    /**
+     *
+     * @param {number} time numeric value of the specified date as the number of milliseconds since Shawwal 23, 1389, 00:00:00 UTC (January 1, 1970, 00:00:00 UTC)
+     * @example new HijriDate(1435454346342) // Sunday Ramadan 12 1436 04:19:06
+     */
+    /**
+     * @param {number} year the hijri year .
+     * @param {number} month  [1, 12] range .
+     * @param {number} [date=1] the date of the month🌔 ∈ {1, 30} .
+     * @param {number} [hours=0] ⏰ ∈ {0, 23} .
+     * @param {number} [minutes=0] 🕔 ∈ {0,59} .
+     * @param {number} [seconds=0] 🕰 ∈ {0,59} .
+     * @param {number} [milliseconds 0] 🕰 ∈ {0,999} .
+     *
+     * @example  new HijriDate(1450, 3) ; //Sun Rabee1 01 1450 00:00:00
+                 new HijriDate(1450, 3, 5) ; //Thu Rabee1 05 1450 00:00:00
+                 new HijriDate(1450, 3, 5, 17) ; //Thu Rabee1 05 1450 17:00:00
+                 new HijriDate(1450, 3, 5, 16, 44) ; //Thu Rabee1 05 1450 16:44:00
+                 new HijriDate(1450, 3, 5, 16, 44, 58) ; //Thu Rabee1 05 1450 16:44:58
+     */
+    /**
+     * @param {string} date stringified date
+     * @param {string} [format = 'yyyy/mm/dd'] a compatible format with the date passed as string in the 1ˢᵗ argument.
+     * @example    new HijriDate('10-09-1538', 'dd-mm-yyyy'); // Thu Rmdn 10 1538 00:00:00
+                   new HijriDate('100 years since 04-1348','100 years since mm-yyyy' ); // Wed Rab2 01 1338 00:00:00
+     */
+    /**
+    * @param {Object} dateProps literal object contains date properties .
+    * @param {number} dateProps.year  the year is required .
+    * @param {number} [dateProps.month = 1]  [1, 12] range .
+    * @param {number} [dateProps.date = 1] the date of the month🌔 ∈ {1, 30} .
+    * @param {number} [dateProps.hours = 0] ⏰ ∈ {0, 23} .
+    * @param {number} [dateProps.minutes = 0] 🕔 ∈ {0,59} .
+    * @param {number} [dateProps.seconds = 0] 🕰 ∈ {0,59} .
+    * @param {number} [dateProps.milliseconds = 0] 🕰 ∈ {0,999} .
+    *
+    * @example    new HijriDate({year: 1430, minutes: 54}) // 01-01-1430 00:54:00
+                  new HijriDate({year: 1504, hours: 17, seconds:44}) // 01-01-1504 17:00:44
+     */
+    constructor(...args: any[]);
+    init(...args: any[]): this;
+    __proxy__: any;
+    initDayOfWeek(): void;
+    _day: any;
+    _dayName: any;
+    /**
+     * Set the year
+     * @param {number} newYear year modifier of the instance.
+     * @returns {undefined} nothing
+     *
+     * @example   const d1 = new HijriDate(1399, 10, 25);
+                  d1.year += 2;
+                  assertEqual(d1.year === 1401);
+     */
+    set year(newYear: number);
+    /**
+     * Get the year
+     * @returns {number} the year
+     */
+    get year(): number;
+    _year: number | undefined;
+    set month(newMonth: any);
+    get month(): any;
+    _month: any;
+    set date(newDate: any);
+    get date(): any;
+    _date: any;
+    set time(newTime: any);
+    get time(): any;
+    set hours(hours: any);
+    get hours(): any;
+    set minutes(minutes: any);
+    get minutes(): any;
+    set seconds(seconds: any);
+    get seconds(): any;
+    set milliseconds(milliseconds: any);
+    get milliseconds(): any;
+    get timezoneOffset(): any;
+    _hours: any;
+    _minutes: any;
+    _seconds: any;
+    _milliseconds: any;
+    get day(): any;
+    get dayName(): any;
+    getFullYear(): number;
+    getMonthIndex(): number;
+    getMonth(): any;
+    getDate(): any;
+    getDay(): any;
+    getHours(): any;
+    getMinutes(): any;
+    getSeconds(): any;
+    getMilliseconds(): any;
+    getTime(): any;
+    getTimezoneOffset(): any;
+    /**
+     * This method adds 1 day (24 hours) to the instance.
+     * @returns {HijriDate} the instance itself after adding 1 day.
+     */
+    addDay(): HijriDate;
+    /**
+     * This method adds n day(s) to the instance.
+     * @param {number} days number of days to add .
+     * @returns {HijriDate} the instance itself after adding n day(s).
+     */
+    addDays(days: number): HijriDate;
+    /**
+     * TODO
+     */
+    addHours(n: any): this;
+    /**
+     * TODO
+     */
+    addMinutes(n: any): this;
+    /**
+     * TODO
+     */
+    addSeconds(n: any): this;
+    /**
+     * TODO
+     */
+    addMilliseconds(n: any): this;
+    /**
+     * TODO
+     */
+    subtractDays(days: any): this;
+    /**
+     * TODO
+     */
+    subtractDay(): this;
+    /**
+     * TODO
+     */
+    subtractHours(n: any): this;
+    /**
+     * TODO
+     */
+    subtractMinutes(n: any): this;
+    /**
+     * TODO
+     */
+    subtractSeconds(n: any): this;
+    /**
+     * TODO
+     */
+    subtractMilliseconds(n: any): this;
+    /**
+     * TODO
+     */
+    updateProxy(): this;
+    /**
+     * TODO
+     */
+    toGregorian(): any;
+    /**
+     * TODO
+     */
+    format(mask: any, options: any, ...args: any[]): any;
+    /**
+     * TODO
+     */
+    ignoreTime(): this;
+    /**
+     * TODO
+     */
+    clone(): HijriDate;
+    /**
+     * TODO
+     */
+    is(...args: any[]): boolean;
+    /**
+     * TODO
+     */
+    isToday(): boolean;
+    /**
+     * TODO
+     */
+    isYesterday(): boolean;
+    /**
+     * TODO
+     */
+    isTomorrow(): boolean;
+    valueOf(): any;
+    toString(): any;
+}
+declare namespace HijriDate {
+    namespace locales {
+        export { ar };
+        export { en };
+    }
+    let defaultLocale: string;
+}
+import { ar } from './locales';
+import { en } from './locales';

package/dist/types/hijri/StringDateParser.d.ts

@@ -0,0 +1,11 @@
+export default StringDateParser;
+declare class StringDateParser {
+    static extract(string: any, format: any, formatChunk: any, ignoreCase?: boolean): number | undefined;
+    static extractYear(dateString: any, format: any, ...args: any[]): number | undefined;
+    static extractMonth(dateString: any, format: any, ...args: any[]): number;
+    static extractDate(dateString: any, format: any, ...args: any[]): number;
+    static extractHours(dateString: any, format: any, ...args: any[]): number;
+    static extractMinutes(dateString: any, format: any, ...args: any[]): number;
+    static extractSeconds(dateString: any, format: any, ...args: any[]): number;
+    static extractMilliseconds(dateString: any, format: any, ...args: any[]): number;
+}

package/dist/types/hijri/index.d.ts

@@ -1,2 +1,2 @@
-declare const _exports: any;
-export = _exports;
+export default HijriDate;
+import HijriDate from './safe';

package/dist/types/hijri/initializer.d.ts

@@ -0,0 +1,129 @@
+export default Initializer;
+declare class Initializer {
+    static initDefault(): {
+        year: number;
+        month: number;
+        date: number;
+        hours: any;
+        minutes: any;
+        seconds: any;
+        milliseconds: any;
+        day: number;
+        dayName: string;
+    };
+    static init_number(number: any): {
+        year: number;
+        month: number;
+        date: number;
+        hours: any;
+        minutes: any;
+        seconds: any;
+        milliseconds: any;
+        day: number;
+        dayName: string;
+    };
+    static init_number_number(year: any, month: any): {
+        year: any;
+        month: any;
+        date: any;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    };
+    static init_number_number_number(...args: any[]): {
+        year: any;
+        month: any;
+        date: any;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    };
+    static init_number_number_number_number(...args: any[]): {
+        year: any;
+        month: any;
+        date: any;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    };
+    static init_number_number_number_number_number(...args: any[]): {
+        year: any;
+        month: any;
+        date: any;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    };
+    static init_number_number_number_number_number_number(...args: any[]): {
+        year: any;
+        month: any;
+        date: any;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    };
+    static init_number_number_number_number_number_number_number(...args: any[]): {
+        year: any;
+        month: any;
+        date: any;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    };
+    static init_string(...args: any[]): {
+        month: number;
+        date: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    } & {
+        year: number | undefined;
+        month: number;
+        date: number;
+    };
+    static init_string_string(...args: any[]): {
+        month: number;
+        date: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    } & {
+        year: number | undefined;
+        month: number;
+        date: number;
+    };
+    static init_object(object: any): any;
+    static initFromNumbers(year: any, month: any, date: any, hours?: number, minutes?: number, seconds?: number, milliseconds?: number, ...args: any[]): {
+        year: any;
+        month: any;
+        date: any;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    };
+    static initFromStrings(dateString: any, format?: string): {
+        month: number;
+        date: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    } & {
+        year: number | undefined;
+        month: number;
+        date: number;
+    };
+}
+declare namespace Initializer {
+    export { defaultFormat };
+}
+declare const defaultFormat: "yyyy/mm/dd";

package/dist/types/hijri/locales.d.ts

@@ -0,0 +1,19 @@
+export namespace ar {
+    let dayNames: string[];
+    let monthNames: string[];
+    let separator: string;
+    let am: string;
+    let pm: string;
+}
+export namespace en {
+    let dayNames_1: string[];
+    export { dayNames_1 as dayNames };
+    let monthNames_1: string[];
+    export { monthNames_1 as monthNames };
+    let separator_1: string;
+    export { separator_1 as separator };
+    let am_1: string;
+    export { am_1 as am };
+    let pm_1: string;
+    export { pm_1 as pm };
+}

package/dist/types/hijri/safe.d.ts

@@ -0,0 +1,3 @@
+export function toHijri(gregDate: any): HijriDate;
+export default HijriDate;
+import HijriDate from './HijriDate';

package/dist/types/index.d.ts

@@ -1,7 +1,12 @@
 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/dist/types/panels/EventPanel.d.ts

@@ -0,0 +1,17 @@
+import { type EventType } from "../types";
+export interface EventProps {
+    isHijri?: boolean;
+    /**
+     * list of calendar events
+     */
+    events?: EventType[];
+    /**
+     * list of calendar events
+     */
+    recurringEvents?: EventType[];
+    /**
+     * change handler
+     */
+    onChange?: (value: string, dates: [string, string]) => void;
+}
+export declare const EventPanel: ({ isHijri, onChange, events, recurringEvents, }: EventProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -1,4 +1,4 @@
-import { type ColorType, type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
 export type DateLike = Date | string | number;
 export type DateParsed = Date | undefined;
 export declare enum PageType {
@@ -18,6 +18,13 @@ export declare enum DatePart {
     YEAR = "$year",
     DECADE = "$decade"
 }
+export interface EventType<D = DateLike> {
+    label: string;
+    icon?: string;
+    start: D;
+    end: D;
+    hijri?: boolean;
+}
 export interface BaseProps {
     min?: DateLike;
     max?: DateLike;
@@ -34,37 +41,3 @@ export interface RangeProps extends BaseProps, CssProp, TestProps {
     onChange?: (dates: [start: string, end: string]) => void;
     presets?: Record<string, [DateLike, DateLike]>;
 }
-export interface EventType<D = DateLike> {
-    label: string;
-    icon?: string;
-    start: D;
-    end: D;
-    hijri?: boolean;
-}
-export interface PresetType {
-    value: string;
-    label: string;
-}
-export interface SuperDateProps {
-    as?: "button" | "chip";
-    color?: ColorType;
-    variant?: "solid" | "outline" | "link";
-    /**
-     * relative date value
-     */
-    value?: string;
-    /**
-     * change handler
-     */
-    onChange?: (value: string, dates: [string, string]) => void;
-    /**
-     * list of calendar events
-     */
-    events?: EventType[];
-    /**
-     * list of relative presets
-     *
-     * {value:'$year-5|$year', label:'last 5 years'}
-     */
-    presets?: PresetType[];
-}

package/dist/types/utils/dateUtil.d.ts

@@ -23,7 +23,7 @@ export declare namespace DateUtil {
     const isSameMonth: (date: Date, compare: Date, isHijri?: boolean) => boolean;
     const isSameYear: (date: Date, compare: Date, isHijri?: boolean) => boolean;
     const isDisabled: (date: Date, page: PageType, min?: DateLike, max?: DateLike) => boolean;
-    const parseDate: (datelike: string) => Date;
+    const parseDate: (datelike: DateLike) => Date;
     const parseRange: (datelike: string) => [Date, Date];
     const relativeTooltip: (datelike?: string, isHijri?: boolean) => string;
     const relativeLabel: (datelike?: string, isHijri?: boolean) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/date",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.51",
   "description": "RUF: Date package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -11,9 +11,11 @@
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
@@ -33,19 +35,17 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@react-fabric/core": "^1.0.0-beta.5",
-    "@react-fabric/form": "^1.0.0-beta.5",
-    "@react-fabric/utilities": "^1.0.0-beta.5",
+    "@react-fabric/core": "^1.0.0-beta.51",
+    "@react-fabric/utilities": "^1.0.0-beta.50",
     "classnames": "^2.5.1",
-    "date-fns": "^4.0.0",
+    "date-fns": "^4.1.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "i18next": "^25.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.5.2"
   },
   "devDependencies": {
     "@types/react-color": "^3.0.12"
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
+  "gitHead": "a1b04de4663045f82992bff2aef8db26608eac74"
 }

package/src/components/DatePage.tsx

@@ -28,7 +28,6 @@ import { DateUtil } from "../utils/dateUtil";
 import { DateCell, type DateCellProps } from "./DateCell";
 import classNames from "classnames";
 import { PageType } from "../types";
-import classes from "./Date.module.css";
 
 const rows = [0, 1, 2, 3, 4, 5];
 const cols = [0, 1, 2, 3, 4, 5, 6];
@@ -57,7 +56,7 @@ export const DatePage = ({ pageDate, isHijri, ...props }: Props) => {
     >
       <div
         className={classNames(
-          classes.dateHeader,
+          "fabric-dateHeader",
           "px-1 text-center bg-tint-50 h-7",
         )}
       ></div>
@@ -67,7 +66,7 @@ export const DatePage = ({ pageDate, isHijri, ...props }: Props) => {
           <div
             key={dt.toISOString()}
             className={classNames(
-              classes.dateHeader,
+              "fabric-dateHeader",
               "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7",
             )}
           >

package/src/components/TimeSliders.tsx

@@ -24,7 +24,6 @@
 import { useDebounce } from "@react-fabric/core";
 import classNames from "classnames";
 import { useCallback, useEffect, useRef, useState } from "react";
-import classes from "./Date.module.css";
 
 interface Props {
   hour: number;
@@ -80,7 +79,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
       <div className="flex">
         <div
           className={classNames(
-            classes.dateHeader,
+            "fabric-dateHeader",
             "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
           )}
         >
@@ -88,18 +87,18 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
         </div>
         <div
           className={classNames(
-            classes.dateHeader,
+            "fabric-dateHeader",
             "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
           )}
         >
           M
         </div>
       </div>
-      <div className="flex flex-1 flex-nowrap overflow-hidden relative">
+      <div className="flex flex-1 flex-nowrap items-stretch overflow-hidden relative">
         <div
           className={classNames(
             "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
+            "fabric-date-timeSlider",
           )}
           onScroll={calculateTime}
           ref={hourRef}
@@ -144,7 +143,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
         <div
           className={classNames(
             "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
+            "fabric-date-timeSlider",
           )}
           onScroll={calculateTime}
           ref={minuteRef}

package/src/display/DateDisplay.tsx

@@ -22,7 +22,7 @@
  */
 
 import { Dropdown, Tooltip, useGlobals } from "@react-fabric/core";
-import { type MenuItemProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
 import {
   type AriaProps,
   type ChildrenProp,
@@ -32,12 +32,13 @@ import {
 import { type ElementType } from "react";
 import { type DateLike } from "../types";
 import { DateUtil } from "../utils/dateUtil";
+import classNames from "classnames";
 
 export interface Props
   extends CssProp,
     AriaProps,
     TestProps,
-    Partial<ChildrenProp<ElementType<MenuItemProps>>> {
+    Partial<ChildrenProp<ElementType<MenuProps>>> {
   /**
    * date like value
    */
@@ -46,6 +47,8 @@ export interface Props
    * date format
    */
   format?: string;
+
+  showAlternateDate?: boolean;
 }
 
 export const DateDisplay = ({
@@ -53,12 +56,14 @@ export const DateDisplay = ({
   className,
   format = "eee, PPpp",
   children,
+  showAlternateDate,
   ...aria
 }: Props) => {
   const { currentCalendar, currentLocale } = useGlobals();
 
   const dtLabel = (
     <Tooltip
+      disabled={!showAlternateDate}
       content={DateUtil.format(
         date,
         format,
@@ -66,7 +71,13 @@ export const DateDisplay = ({
         currentCalendar !== "hijri",
       )}
     >
-      <span className={className} {...aria}>
+      <span
+        className={classNames(
+          className,
+          !!children && "underline decoration-dotted cursor-pointer",
+        )}
+        {...aria}
+      >
         {DateUtil.format(
           date,
           format,
@@ -78,7 +89,7 @@ export const DateDisplay = ({
   );
 
   return children ? (
-    <Dropdown>
+    <Dropdown showArrow closeOnClick>
       {dtLabel}
       {children}
     </Dropdown>