@react-fabric/date 1.0.0-beta.62 → 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

@@ -22,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

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

@@ -22,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

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.62",
+  "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.62",
-    "@react-fabric/utilities": "^1.0.0-beta.62",
+    "@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": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
+  "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

@@ -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

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}