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

package/dist/types/display/DateDuration.d.ts

@@ -0,0 +1,31 @@
+import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
+import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type ElementType } from "react";
+import { type DateLike } from "../types";
+export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenProp<ElementType<MenuProps>>> {
+    /**
+     * date like value
+     */
+    date: DateLike;
+    /**
+     * date format
+     */
+    format?: string;
+}
+/**
+ * DateDuration component to display the duration from a given date to now.
+ * It calculates the difference in years, months, weeks, days, hours, minutes, and seconds,
+ * and displays it in a human-readable format.
+ * It uses the current locale for translations.
+ *
+ * @param {Props} props - The properties for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @example
+ * ```jsx
+ * <DateDuration date={new Date("2020-01-01")} />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-display--docs}
+ */
+export declare const DateDuration: ({ date, children, className, format, ...props }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+export function weekDay(wdn: any): "Mon" | "Tue" | "Wed" | "Thu" | "Fri" | "Sat" | "Sun" | "";
+export function GregToHijri(gregDate: any): {
+    year: number;
+    month: number;
+    date: number;
+    hours: any;
+    minutes: any;
+    seconds: any;
+    milliseconds: any;
+    day: number;
+    dayName: string;
+};
+export function HijriToGreg(hijriDate: any): Date;

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

@@ -0,0 +1,19 @@
+export namespace masks {
+    let _default: string;
+    export { _default as default };
+    export let shortDate: string;
+    export let mediumDate: string;
+    export let longDate: string;
+    export let fullDate: string;
+    export let shortTime: string;
+    export let mediumTime: string;
+    export let longTime: string;
+    export let isoDate: string;
+    export let isoTime: string;
+    export let isoDateTime: string;
+    export let isoUtcDateTime: string;
+}
+export default dateFormat;
+declare function dateFormat(date: any, mask: any, options?: {
+    utc: boolean;
+}, ...args: any[]): any;

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/DatePanel.d.ts

@@ -1,2 +1,28 @@
 import { type DateProps } from "../types";
+/**
+ * DatePanel component to display a date picker with options for selecting a date and time.
+ * It allows switching between Gregorian and Hijri calendars, and includes buttons for selecting today or canceling the selection.
+ * It uses the current calendar and locale from the global context.
+ * It handles date selection, time changes, and page navigation within the date picker.
+ * It also supports disabling specific dates and setting minimum and maximum date limits.
+ *
+ * @param {DateProps} props - The properties for the DatePanel component.
+ * @return {JSX.Element} The rendered DatePanel component.
+ *
+ * @example
+ * ```jsx
+ * <DatePanel
+ *   className="my-date-panel"
+ *   max="2025-12-31"
+ *   min="2020-01-01"
+ *   dateDisabled={["2023-01-01", "2023-12-25"]}
+ *   onChange={(date) => console.log("Selected date:", date)}
+ *   showHijriToggle={true}
+ *   value={new Date()}
+ *   withTime={true}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-panel--datepanels}
+ */
 export declare const DatePanel: ({ className, max, min, dateDisabled, onChange, showHijriToggle, value, withTime, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

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/panels/RangePanel.d.ts

@@ -1,2 +1,24 @@
 import { type RangeProps } from "../types";
+/**
+ * RangePanel component to display a date range picker with options for selecting a start and end date.
+ * It allows switching between Gregorian and Hijri calendars, and includes buttons for applying or canceling the selection.
+ * It uses the current calendar and locale from the global context.
+ * It handles date selection, time changes, and page navigation within the date picker.
+ * It also supports disabling specific dates and setting minimum and maximum date limits.
+ *
+ * @param {RangeProps} props - The properties for the RangePanel component.
+ * @return {JSX.Element} The rendered RangePanel component.
+ *
+ * @example
+ * ```jsx
+ * <RangePanel
+ *   className="my-range-panel"
+ *   max="2025-12-31"
+ *   min="2020-01-01"
+ *  dateDisabled={["2023-01-01", "2023-12-25"]}
+ *  onChange={(dateRange) => console.log("Selected date range:", dateRange)}
+ * />
+ * ```
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/date-date-panel--range-panel}
+ */
 export declare const RangePanel: ({ className, max, min, dateDisabled, onChange, showHijriToggle, value, withTime, showApply, ...rest }: RangeProps) => 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.52",
   "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.52",
+    "@react-fabric/utilities": "^1.0.0-beta.52",
     "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": "0eabb9d88d91af93d657bcc209b226fd576e8260"
 }

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",
             )}
           >