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

package/dist/cjs/display/DateDisplay.js

@@ -10,6 +10,23 @@ var jsxRuntime = require('react/jsx-runtime');
 var _excluded = ["date", "className", "format", "children", "showAlternateDate"];
 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; }
+/**
+ * DateDisplay component to display a formatted gregorian or hijri date with optional tooltip and dropdown.
+ * It uses the current calendar and locale from the global context.
+ * It formats the date using the provided format or a default format.
+ * If `showAlternateDate` is true, it shows a tooltip with the formatted date.
+ * If `children` are provided, it wraps the date in a dropdown.
+ *
+ * @param {Object} props - The component props.
+ * @returns {JSX.Element} - The rendered component.
+ *
+ * @example
+ * ```jsx
+ * <DateDisplay date={new Date()} />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-display--docs}
+ */
 var DateDisplay = function DateDisplay(_ref) {
   var date = _ref.date,
     className = _ref.className,

package/dist/cjs/display/DateDuration.js

@@ -14,6 +14,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var _excluded = ["date", "children", "className", "format"];
 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; }
+/**
+ * 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}
+ */
 var DateDuration = function DateDuration(_ref) {
   var date = _ref.date,
     children = _ref.children,

package/dist/cjs/hijri/FormatDate.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var HijriDate = require('./HijriDate.js');
+
 var dateFormat = function () {
   var token = /P{1,4}|p{1,4}|d{1,2}|e{3,6}|M{1,4}|yy(?:yy)?|([Hhms])\1?|[a]{1,4}|[LloSZ]|('at')|"[^"]*"|'[^']*'/g,
     pad = function pad(val, len) {
@@ -16,9 +18,8 @@ var dateFormat = function () {
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
       utc: false
     };
-    var _require$default = require("./HijriDate")["default"],
-      locales = _require$default.locales,
-      defaultLocale = _require$default.defaultLocale;
+    var locales = HijriDate.default.locales,
+      defaultLocale = HijriDate.default.defaultLocale;
     options.locale = options.locale || defaultLocale;
     if (!locales[options.locale]) {
       throw new Error("Locale ".concat(options.locale, " is not supported yet .\n          Please, try to extend \"HijriDate.locales\" :\n             i.e: HijriDate.locales.").concat(options.locale, " = {dayNames:[..14 items..], monthNames:[..24 items..]}\n        "));

package/dist/cjs/panels/DatePanel.js

@@ -17,6 +17,32 @@ var jsxRuntime = require('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; }
+/**
+ * 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}
+ */
 var DatePanel = function DatePanel(_ref) {
   var className = _ref.className,
     max = _ref.max,

package/dist/cjs/panels/RangePanel.js

@@ -17,6 +17,28 @@ var jsxRuntime = require('react/jsx-runtime');
 var _excluded = ["className", "max", "min", "dateDisabled", "onChange", "showHijriToggle", "value", "withTime", "showApply"];
 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; }
+/**
+ * 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}
+ */
 var RangePanel = function RangePanel(_ref) {
   var className = _ref.className,
     max = _ref.max,

package/dist/esm/display/DateDisplay.js

@@ -10,6 +10,23 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 var _excluded = ["date", "className", "format", "children", "showAlternateDate"];
 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; }
+/**
+ * DateDisplay component to display a formatted gregorian or hijri date with optional tooltip and dropdown.
+ * It uses the current calendar and locale from the global context.
+ * It formats the date using the provided format or a default format.
+ * If `showAlternateDate` is true, it shows a tooltip with the formatted date.
+ * If `children` are provided, it wraps the date in a dropdown.
+ *
+ * @param {Object} props - The component props.
+ * @returns {JSX.Element} - The rendered component.
+ *
+ * @example
+ * ```jsx
+ * <DateDisplay date={new Date()} />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-display--docs}
+ */
 var DateDisplay = function DateDisplay(_ref) {
   var date = _ref.date,
     className = _ref.className,

package/dist/esm/display/DateDuration.js

@@ -14,6 +14,22 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 var _excluded = ["date", "children", "className", "format"];
 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; }
+/**
+ * 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}
+ */
 var DateDuration = function DateDuration(_ref) {
   var date = _ref.date,
     children = _ref.children,

package/dist/esm/hijri/FormatDate.js

@@ -1,5 +1,7 @@
 'use client';
 
+import HijriDate from './HijriDate.js';
+
 var dateFormat = function () {
   var token = /P{1,4}|p{1,4}|d{1,2}|e{3,6}|M{1,4}|yy(?:yy)?|([Hhms])\1?|[a]{1,4}|[LloSZ]|('at')|"[^"]*"|'[^']*'/g,
     pad = function pad(val, len) {
@@ -14,9 +16,8 @@ var dateFormat = function () {
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
       utc: false
     };
-    var _require$default = require("./HijriDate")["default"],
-      locales = _require$default.locales,
-      defaultLocale = _require$default.defaultLocale;
+    var locales = HijriDate.locales,
+      defaultLocale = HijriDate.defaultLocale;
     options.locale = options.locale || defaultLocale;
     if (!locales[options.locale]) {
       throw new Error("Locale ".concat(options.locale, " is not supported yet .\n          Please, try to extend \"HijriDate.locales\" :\n             i.e: HijriDate.locales.").concat(options.locale, " = {dayNames:[..14 items..], monthNames:[..24 items..]}\n        "));

package/dist/esm/panels/DatePanel.js

@@ -17,6 +17,32 @@ 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; }
+/**
+ * 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}
+ */
 var DatePanel = function DatePanel(_ref) {
   var className = _ref.className,
     max = _ref.max,

package/dist/esm/panels/RangePanel.js

@@ -17,6 +17,28 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 var _excluded = ["className", "max", "min", "dateDisabled", "onChange", "showHijriToggle", "value", "withTime", "showApply"];
 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; }
+/**
+ * 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}
+ */
 var RangePanel = function RangePanel(_ref) {
   var className = _ref.className,
     max = _ref.max,

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

@@ -13,4 +13,21 @@ export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenPr
     format?: string;
     showAlternateDate?: boolean;
 }
+/**
+ * DateDisplay component to display a formatted gregorian or hijri date with optional tooltip and dropdown.
+ * It uses the current calendar and locale from the global context.
+ * It formats the date using the provided format or a default format.
+ * If `showAlternateDate` is true, it shows a tooltip with the formatted date.
+ * If `children` are provided, it wraps the date in a dropdown.
+ *
+ * @param {Object} props - The component props.
+ * @returns {JSX.Element} - The rendered component.
+ *
+ * @example
+ * ```jsx
+ * <DateDisplay date={new Date()} />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-display--docs}
+ */
 export declare const DateDisplay: ({ date, className, format, children, showAlternateDate, ...aria }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -12,4 +12,20 @@ export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenPr
      */
     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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/date",
-  "version": "1.0.0-beta.51",
+  "version": "1.0.0-beta.52",
   "description": "RUF: Date package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.51",
-    "@react-fabric/utilities": "^1.0.0-beta.50",
+    "@react-fabric/core": "^1.0.0-beta.52",
+    "@react-fabric/utilities": "^1.0.0-beta.52",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "resize-observer-polyfill": "^1.5.1"
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a1b04de4663045f82992bff2aef8db26608eac74"
+  "gitHead": "0eabb9d88d91af93d657bcc209b226fd576e8260"
 }

package/src/display/DateDisplay.tsx

@@ -51,6 +51,23 @@ export interface Props
   showAlternateDate?: boolean;
 }
 
+/**
+ * DateDisplay component to display a formatted gregorian or hijri date with optional tooltip and dropdown.
+ * It uses the current calendar and locale from the global context.
+ * It formats the date using the provided format or a default format.
+ * If `showAlternateDate` is true, it shows a tooltip with the formatted date.
+ * If `children` are provided, it wraps the date in a dropdown.
+ *
+ * @param {Object} props - The component props.
+ * @returns {JSX.Element} - The rendered component.
+ *
+ * @example
+ * ```jsx
+ * <DateDisplay date={new Date()} />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-display--docs}
+ */
 export const DateDisplay = ({
   date,
   className,

package/src/display/DateDuration.tsx

@@ -52,6 +52,22 @@ export interface Props
   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 const DateDuration = ({
   date,
   children,

package/src/hijri/FormatDate.js

@@ -1,3 +1,5 @@
+import HijriDate from "./HijriDate";
+
 const dateFormat = (function () {
   const token =
       /P{1,4}|p{1,4}|d{1,2}|e{3,6}|M{1,4}|yy(?:yy)?|([Hhms])\1?|[a]{1,4}|[LloSZ]|('at')|"[^"]*"|'[^']*'/g,
@@ -19,7 +21,7 @@ const dateFormat = (function () {
       utc: false,
     },
   ) {
-    const { locales, defaultLocale } = require("./HijriDate").default;
+    const { locales, defaultLocale } = HijriDate;
     options.locale = options.locale || defaultLocale;
     if (!locales[options.locale]) {
       throw new Error(`Locale ${options.locale} is not supported yet .

package/src/panels/DatePanel.tsx

@@ -46,6 +46,32 @@ type PanelActions =
   | { type: "changePage"; page: PageType }
   | { type: "changePageDate"; date: Date; pageChange: boolean };
 
+/**
+ * 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 const DatePanel = ({
   className,
   max,

package/src/panels/RangePanel.tsx

@@ -58,6 +58,28 @@ type PanelActions =
       pageChange?: boolean;
     };
 
+/**
+ * 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 const RangePanel = ({
   className,
   max,