@react-fabric/date 1.0.0-beta.61 → 1.0.0-beta.63

package/dist/cjs/components/TimeSliders.js

@@ -53,7 +53,7 @@ var TimeSlider = function TimeSlider(_ref) {
     });
   }, [onTimeChange]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-base"),
+    className: classNames("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-default"),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/display/DateDisplay.js

@@ -18,7 +18,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * If `children` are provided, it wraps the date in a dropdown.
  *
  * @param {Object} props - The component props.
- * @returns {JSX.Element} - The rendered component.
+ * @returns {React.ReactElement} - The rendered component.
  *
  * @example
  * ```jsx
@@ -35,9 +35,9 @@ var DateDisplay = function DateDisplay(_ref) {
     children = _ref.children,
     showAlternateDate = _ref.showAlternateDate,
     aria = _objectWithoutProperties(_ref, _excluded);
-  var _useGlobals = core.useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar,
-    currentLocale = _useGlobals.currentLocale;
+  var _useApplicationContex = core.useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar,
+    currentLocale = _useApplicationContex.currentLocale;
   var dtLabel = /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
     disabled: !showAlternateDate,
     content: dateUtil.DateUtil.format(date, format, currentLocale, currentCalendar !== "hijri"),

package/dist/cjs/display/DateDuration.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
@@ -21,7 +22,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It uses the current locale for translations.
  *
  * @param {Props} props - The properties for the component.
- * @returns {JSX.Element} The rendered component.
+ * @returns {React.ReactElement} The rendered component.
  *
  * @example
  * ```jsx
@@ -39,11 +40,25 @@ var DateDuration = function DateDuration(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation("date"),
     t = _useTranslation.t;
-  var interval = react.useMemo(function () {
-    return dateFns.intervalToDuration({
+  var _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    interval = _useState2[0],
+    setDateInterval = _useState2[1];
+  react.useEffect(function () {
+    setDateInterval(dateFns.intervalToDuration({
       start: new Date(date),
       end: new Date()
-    });
+    }));
+    // update interval every minute
+    var tmr = setInterval(function () {
+      setDateInterval(dateFns.intervalToDuration({
+        start: new Date(date),
+        end: new Date()
+      }));
+    }, 60 * 1000);
+    return function () {
+      return clearInterval(tmr);
+    };
   }, [date]);
   var label = react.useMemo(function () {
     var before = dateFns.isBefore(dateUtil.DateUtil.parseDate(date), new Date());

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@react-fabric/core');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var date$1 = require('./ar/date.json.js');
+var date = require('./en/date.json.js');
 
 /*
  * React Fabric
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
  */
 
 core.addTranslationBundle("date", {
-  en: en.default,
-  ar: ar.default
+  en: date.default,
+  ar: date$1.default
 });

package/dist/cjs/panels/DatePanel.js

@@ -25,7 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
+ * @return {React.ReactElement} The rendered DatePanel component.
  *
  * @example
  * ```jsx
@@ -55,8 +55,8 @@ var DatePanel = function DatePanel(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = core.useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
+  var _useApplicationContex = core.useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
   var _useState = react.useState(currentCalendar === "hijri"),
     _useState2 = _slicedToArray(_useState, 2),
     isHijri = _useState2[0],
@@ -168,7 +168,7 @@ var DatePanel = function DatePanel(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: classNames("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(BasePanel.BasePanel, _objectSpread(_objectSpread({}, state), {}, {
       max: max,

package/dist/cjs/panels/RangePanel.js

@@ -25,7 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
+ * @return {React.ReactElement} The rendered RangePanel component.
  *
  * @example
  * ```jsx
@@ -53,8 +53,8 @@ var RangePanel = function RangePanel(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = core.useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
+  var _useApplicationContex = core.useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
   var _useState = react.useState(currentCalendar === "hijri"),
     _useState2 = _slicedToArray(_useState, 2),
     isHijri = _useState2[0],
@@ -226,7 +226,7 @@ var RangePanel = function RangePanel(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: classNames("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-nowrap",

package/dist/esm/components/TimeSliders.js

@@ -53,7 +53,7 @@ var TimeSlider = function TimeSlider(_ref) {
     });
   }, [onTimeChange]);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-base"),
+    className: classNames("area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-default"),
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex",
       children: [/*#__PURE__*/jsx("div", {

package/dist/esm/display/DateDisplay.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useGlobals, Tooltip, Dropdown } from '@react-fabric/core';
+import { useApplicationContext, Tooltip, Dropdown } from '@react-fabric/core';
 import { DateUtil } from '../utils/dateUtil.js';
 import classNames from 'classnames';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -18,7 +18,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * If `children` are provided, it wraps the date in a dropdown.
  *
  * @param {Object} props - The component props.
- * @returns {JSX.Element} - The rendered component.
+ * @returns {React.ReactElement} - The rendered component.
  *
  * @example
  * ```jsx
@@ -35,9 +35,9 @@ var DateDisplay = function DateDisplay(_ref) {
     children = _ref.children,
     showAlternateDate = _ref.showAlternateDate,
     aria = _objectWithoutProperties(_ref, _excluded);
-  var _useGlobals = useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar,
-    currentLocale = _useGlobals.currentLocale;
+  var _useApplicationContex = useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar,
+    currentLocale = _useApplicationContex.currentLocale;
   var dtLabel = /*#__PURE__*/jsx(Tooltip, {
     disabled: !showAlternateDate,
     content: DateUtil.format(date, format, currentLocale, currentCalendar !== "hijri"),

package/dist/esm/display/DateDuration.js

@@ -1,12 +1,13 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Tooltip, Dropdown } from '@react-fabric/core';
 import { Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { intervalToDuration, isBefore } from 'date-fns';
-import { useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DateUtil } from '../utils/dateUtil.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -21,7 +22,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It uses the current locale for translations.
  *
  * @param {Props} props - The properties for the component.
- * @returns {JSX.Element} The rendered component.
+ * @returns {React.ReactElement} The rendered component.
  *
  * @example
  * ```jsx
@@ -39,11 +40,25 @@ var DateDuration = function DateDuration(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("date"),
     t = _useTranslation.t;
-  var interval = useMemo(function () {
-    return intervalToDuration({
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    interval = _useState2[0],
+    setDateInterval = _useState2[1];
+  useEffect(function () {
+    setDateInterval(intervalToDuration({
       start: new Date(date),
       end: new Date()
-    });
+    }));
+    // update interval every minute
+    var tmr = setInterval(function () {
+      setDateInterval(intervalToDuration({
+        start: new Date(date),
+        end: new Date()
+      }));
+    }, 60 * 1000);
+    return function () {
+      return clearInterval(tmr);
+    };
   }, [date]);
   var label = useMemo(function () {
     var before = isBefore(DateUtil.parseDate(date), new Date());

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/date.json.js';
+import en from './en/date.json.js';
 
 /*
  * React Fabric

package/dist/esm/panels/DatePanel.js

@@ -3,7 +3,7 @@
 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 { useApplicationContext, useDebounce, Button } from '@react-fabric/core';
 import { isEmpty, isArray } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { isBefore, isAfter, isSameDay } from 'date-fns';
@@ -25,7 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
+ * @return {React.ReactElement} The rendered DatePanel component.
  *
  * @example
  * ```jsx
@@ -55,8 +55,8 @@ var DatePanel = function DatePanel(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
+  var _useApplicationContex = useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
   var _useState = useState(currentCalendar === "hijri"),
     _useState2 = _slicedToArray(_useState, 2),
     isHijri = _useState2[0],
@@ -168,7 +168,7 @@ var DatePanel = function DatePanel(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: classNames("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsx(BasePanel, _objectSpread(_objectSpread({}, state), {}, {
       max: max,

package/dist/esm/panels/RangePanel.js

@@ -3,7 +3,7 @@
 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 { useApplicationContext, useDebounce, Button } from '@react-fabric/core';
 import { isEmpty, isArray } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { isAfter, addMonths, isBefore, isSameDay } from 'date-fns';
@@ -25,7 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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.
+ * @return {React.ReactElement} The rendered RangePanel component.
  *
  * @example
  * ```jsx
@@ -53,8 +53,8 @@ var RangePanel = function RangePanel(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("date"),
     t = _useTranslation.t;
-  var _useGlobals = useGlobals(),
-    currentCalendar = _useGlobals.currentCalendar;
+  var _useApplicationContex = useApplicationContext(),
+    currentCalendar = _useApplicationContex.currentCalendar;
   var _useState = useState(currentCalendar === "hijri"),
     _useState2 = _slicedToArray(_useState, 2),
     isHijri = _useState2[0],
@@ -226,7 +226,7 @@ var RangePanel = function RangePanel(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("block overflow-hidden bg-base rounded-capped", className)
+    className: classNames("block overflow-hidden bg-default rounded-capped", className)
   }, rest), {}, {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex flex-nowrap",

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

@@ -21,7 +21,7 @@ export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenPr
  * If `children` are provided, it wraps the date in a dropdown.
  *
  * @param {Object} props - The component props.
- * @returns {JSX.Element} - The rendered component.
+ * @returns {React.ReactElement} - The rendered component.
  *
  * @example
  * ```jsx

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

@@ -19,7 +19,7 @@ export interface Props extends CssProp, AriaProps, TestProps, Partial<ChildrenPr
  * It uses the current locale for translations.
  *
  * @param {Props} props - The properties for the component.
- * @returns {JSX.Element} The rendered component.
+ * @returns {React.ReactElement} The rendered component.
  *
  * @example
  * ```jsx

package/dist/types/panels/DatePanel.d.ts

@@ -7,7 +7,7 @@ import { type DateProps } from "../types";
  * 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.
+ * @return {React.ReactElement} The rendered DatePanel component.
  *
  * @example
  * ```jsx

package/dist/types/panels/RangePanel.d.ts

@@ -7,7 +7,7 @@ import { type RangeProps } from "../types";
  * 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.
+ * @return {React.ReactElement} The rendered RangePanel component.
  *
  * @example
  * ```jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/date",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.63",
   "description": "RUF: Date package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,21 +35,20 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.61",
-    "@react-fabric/utilities": "^1.0.0-beta.61",
+    "@react-fabric/core": "^1.0.0-beta.63",
+    "@react-fabric/utilities": "^1.0.0-beta.63",
     "classnames": "~2.5.1",
-    "date-fns": "~4.1.0",
-    "resize-observer-polyfill": "~1.5.1"
+    "date-fns": "~4.1.0"
   },
   "peerDependencies": {
-    "i18next": "~25.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "react-i18next": "~16.2.1"
+    "i18next": "~25.8.18",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-i18next": "~16.5.8"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=22.18.0",
+    "npm": ">=10.8.0"
   },
-  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
+  "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
 }

package/src/components/TimeSliders.tsx

@@ -73,7 +73,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
   return (
     <div
       className={classNames(
-        "area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-base",
+        "area-[time] flex flex-col flex-nowrap border-s border-s-tint-50 overflow-hidden bg-default",
       )}
     >
       <div className="flex">

package/src/display/DateDisplay.tsx

@@ -21,7 +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 { Dropdown, Tooltip, useGlobals } from "@react-fabric/core";
+import { Dropdown, Tooltip, useApplicationContext } from "@react-fabric/core";
 import { type MenuProps } from "@react-fabric/core/dist/types/components/menu/types";
 import {
   type AriaProps,
@@ -59,7 +59,7 @@ export interface Props
  * If `children` are provided, it wraps the date in a dropdown.
  *
  * @param {Object} props - The component props.
- * @returns {JSX.Element} - The rendered component.
+ * @returns {React.ReactElement} - The rendered component.
  *
  * @example
  * ```jsx
@@ -76,7 +76,7 @@ export const DateDisplay = ({
   showAlternateDate,
   ...aria
 }: Props) => {
-  const { currentCalendar, currentLocale } = useGlobals();
+  const { currentCalendar, currentLocale } = useApplicationContext();
 
   const dtLabel = (
     <Tooltip

package/src/display/DateDuration.tsx

@@ -32,7 +32,7 @@ import {
 import { Format } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { intervalToDuration, isBefore } from "date-fns";
-import { useMemo, type ElementType } from "react";
+import { useEffect, useMemo, useState, type ElementType } from "react";
 import { useTranslation } from "react-i18next";
 import { type DateLike } from "../types";
 import { DateUtil } from "../utils/dateUtil";
@@ -59,7 +59,7 @@ export interface Props
  * It uses the current locale for translations.
  *
  * @param {Props} props - The properties for the component.
- * @returns {JSX.Element} The rendered component.
+ * @returns {React.ReactElement} The rendered component.
  *
  * @example
  * ```jsx
@@ -76,9 +76,21 @@ export const DateDuration = ({
   ...props
 }: Props) => {
   const { t } = useTranslation("date");
+  const [interval, setDateInterval] = useState<
+    ReturnType<typeof intervalToDuration>
+  >({});
 
-  const interval = useMemo(() => {
-    return intervalToDuration({ start: new Date(date), end: new Date() });
+  useEffect(() => {
+    setDateInterval(
+      intervalToDuration({ start: new Date(date), end: new Date() }),
+    );
+    // update interval every minute
+    const tmr = setInterval(() => {
+      setDateInterval(
+        intervalToDuration({ start: new Date(date), end: new Date() }),
+      );
+    }, 60 * 1000);
+    return () => clearInterval(tmr);
   }, [date]);
 
   const label = useMemo(() => {

package/src/i18n/index.ts

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

package/src/panels/DatePanel.tsx

@@ -21,7 +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 { Button, useDebounce, useGlobals } from "@react-fabric/core";
+import { Button, useDebounce, useApplicationContext } from "@react-fabric/core";
 import { isArray, isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isAfter, isBefore, isSameDay } from "date-fns";
@@ -54,7 +54,7 @@ type PanelActions =
  * 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.
+ * @return {React.ReactElement} The rendered DatePanel component.
  *
  * @example
  * ```jsx
@@ -84,7 +84,7 @@ export const DatePanel = ({
   ...rest
 }: DateProps) => {
   const { t } = useTranslation("date");
-  const { currentCalendar } = useGlobals();
+  const { currentCalendar } = useApplicationContext();
   const [isHijri, setHijri] = useState(currentCalendar === "hijri");
   const [canSelectToday, setCanSelectToday] = useState(true);
 
@@ -198,7 +198,7 @@ export const DatePanel = ({
   return (
     <div
       className={classNames(
-        "block overflow-hidden bg-base rounded-capped",
+        "block overflow-hidden bg-default rounded-capped",
         className,
       )}
       {...rest}

package/src/panels/RangePanel.tsx

@@ -21,7 +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 { Button, useDebounce, useGlobals } from "@react-fabric/core";
+import { Button, useDebounce, useApplicationContext } from "@react-fabric/core";
 import { isArray, isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { addMonths, isAfter, isBefore, isSameDay } from "date-fns";
@@ -66,7 +66,7 @@ type PanelActions =
  * 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.
+ * @return {React.ReactElement} The rendered RangePanel component.
  *
  * @example
  * ```jsx
@@ -94,7 +94,7 @@ export const RangePanel = ({
   ...rest
 }: RangeProps) => {
   const { t } = useTranslation("date");
-  const { currentCalendar } = useGlobals();
+  const { currentCalendar } = useApplicationContext();
   const [isHijri, setHijri] = useState(currentCalendar === "hijri");
 
   const fireChange = useDebounce(onChange, [onChange]);
@@ -286,7 +286,7 @@ export const RangePanel = ({
   return (
     <div
       className={classNames(
-        "block overflow-hidden bg-base rounded-capped",
+        "block overflow-hidden bg-default rounded-capped",
         className,
       )}
       {...rest}