@pingux/astro 2.70.0-alpha.2 → 2.70.0

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75;
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -95,6 +95,7 @@ var _exportNames = {
   Radio: true,
   RadioField: true,
   RadioGroupField: true,
+  RangeCalendar: true,
   RequirementsList: true,
   RockerButton: true,
   RockerButtonGroup: true,
@@ -656,6 +657,12 @@ _Object$defineProperty(exports, "RadioGroupField", {
     return _RadioGroupField["default"];
   }
 });
+_Object$defineProperty(exports, "RangeCalendar", {
+  enumerable: true,
+  get: function get() {
+    return _RangeCalendar["default"];
+  }
+});
 _Object$defineProperty(exports, "RemovableBadge", {
   enumerable: true,
   get: function get() {
@@ -1480,8 +1487,20 @@ _forEachInstanceProperty(_context49 = _Object$keys(_RadioGroupField)).call(_cont
     }
   });
 });
+var _RangeCalendar = _interopRequireWildcard(require("./components/RangeCalendar"));
+_forEachInstanceProperty(_context50 = _Object$keys(_RangeCalendar)).call(_context50, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RangeCalendar[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RangeCalendar[key];
+    }
+  });
+});
 var _RequirementsList = _interopRequireWildcard(require("./components/RequirementsList"));
-_forEachInstanceProperty(_context50 = _Object$keys(_RequirementsList)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_RequirementsList)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RequirementsList[key]) return;
@@ -1493,7 +1512,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_RequirementsList)).call(_con
   });
 });
 var _RockerButton = _interopRequireWildcard(require("./components/RockerButton"));
-_forEachInstanceProperty(_context51 = _Object$keys(_RockerButton)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_RockerButton)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RockerButton[key]) return;
@@ -1505,7 +1524,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_RockerButton)).call(_context
   });
 });
 var _RockerButtonGroup = _interopRequireWildcard(require("./components/RockerButtonGroup"));
-_forEachInstanceProperty(_context52 = _Object$keys(_RockerButtonGroup)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_RockerButtonGroup)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RockerButtonGroup[key]) return;
@@ -1517,7 +1536,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_RockerButtonGroup)).call(_co
   });
 });
 var _ScrollBox = _interopRequireWildcard(require("./components/ScrollBox"));
-_forEachInstanceProperty(_context53 = _Object$keys(_ScrollBox)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_ScrollBox)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScrollBox[key]) return;
@@ -1529,7 +1548,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_ScrollBox)).call(_context53,
   });
 });
 var _SearchField = _interopRequireWildcard(require("./components/SearchField"));
-_forEachInstanceProperty(_context54 = _Object$keys(_SearchField)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_SearchField)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SearchField[key]) return;
@@ -1541,7 +1560,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_SearchField)).call(_context5
   });
 });
 var _SelectField = _interopRequireWildcard(require("./components/SelectField"));
-_forEachInstanceProperty(_context55 = _Object$keys(_SelectField)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_SelectField)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SelectField[key]) return;
@@ -1553,7 +1572,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_SelectField)).call(_context5
   });
 });
 var _Separator = _interopRequireWildcard(require("./components/Separator"));
-_forEachInstanceProperty(_context56 = _Object$keys(_Separator)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_Separator)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Separator[key]) return;
@@ -1565,7 +1584,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_Separator)).call(_context56,
   });
 });
 var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
-_forEachInstanceProperty(_context57 = _Object$keys(_Stepper)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_Stepper)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Stepper[key]) return;
@@ -1577,7 +1596,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_Stepper)).call(_context57, f
   });
 });
 var _Switch = _interopRequireWildcard(require("./components/Switch"));
-_forEachInstanceProperty(_context58 = _Object$keys(_Switch)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_Switch)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Switch[key]) return;
@@ -1589,7 +1608,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_Switch)).call(_context58, fu
   });
 });
 var _SwitchField = _interopRequireWildcard(require("./components/SwitchField"));
-_forEachInstanceProperty(_context59 = _Object$keys(_SwitchField)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_SwitchField)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SwitchField[key]) return;
@@ -1601,7 +1620,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_SwitchField)).call(_context5
   });
 });
 var _Tab = _interopRequireWildcard(require("./components/Tab"));
-_forEachInstanceProperty(_context60 = _Object$keys(_Tab)).call(_context60, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_Tab)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tab[key]) return;
@@ -1613,7 +1632,7 @@ _forEachInstanceProperty(_context60 = _Object$keys(_Tab)).call(_context60, funct
   });
 });
 var _Table = _interopRequireWildcard(require("./components/Table"));
-_forEachInstanceProperty(_context61 = _Object$keys(_Table)).call(_context61, function (key) {
+_forEachInstanceProperty(_context62 = _Object$keys(_Table)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Table[key]) return;
@@ -1625,7 +1644,7 @@ _forEachInstanceProperty(_context61 = _Object$keys(_Table)).call(_context61, fun
   });
 });
 var _TableBody = _interopRequireWildcard(require("./components/TableBody"));
-_forEachInstanceProperty(_context62 = _Object$keys(_TableBody)).call(_context62, function (key) {
+_forEachInstanceProperty(_context63 = _Object$keys(_TableBody)).call(_context63, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableBody[key]) return;
@@ -1637,7 +1656,7 @@ _forEachInstanceProperty(_context62 = _Object$keys(_TableBody)).call(_context62,
   });
 });
 var _TableCaption = _interopRequireWildcard(require("./components/TableCaption"));
-_forEachInstanceProperty(_context63 = _Object$keys(_TableCaption)).call(_context63, function (key) {
+_forEachInstanceProperty(_context64 = _Object$keys(_TableCaption)).call(_context64, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableCaption[key]) return;
@@ -1649,7 +1668,7 @@ _forEachInstanceProperty(_context63 = _Object$keys(_TableCaption)).call(_context
   });
 });
 var _TableCell = _interopRequireWildcard(require("./components/TableCell"));
-_forEachInstanceProperty(_context64 = _Object$keys(_TableCell)).call(_context64, function (key) {
+_forEachInstanceProperty(_context65 = _Object$keys(_TableCell)).call(_context65, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableCell[key]) return;
@@ -1661,7 +1680,7 @@ _forEachInstanceProperty(_context64 = _Object$keys(_TableCell)).call(_context64,
   });
 });
 var _TableHead = _interopRequireWildcard(require("./components/TableHead"));
-_forEachInstanceProperty(_context65 = _Object$keys(_TableHead)).call(_context65, function (key) {
+_forEachInstanceProperty(_context66 = _Object$keys(_TableHead)).call(_context66, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableHead[key]) return;
@@ -1673,7 +1692,7 @@ _forEachInstanceProperty(_context65 = _Object$keys(_TableHead)).call(_context65,
   });
 });
 var _TableRow = _interopRequireWildcard(require("./components/TableRow"));
-_forEachInstanceProperty(_context66 = _Object$keys(_TableRow)).call(_context66, function (key) {
+_forEachInstanceProperty(_context67 = _Object$keys(_TableRow)).call(_context67, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableRow[key]) return;
@@ -1685,7 +1704,7 @@ _forEachInstanceProperty(_context66 = _Object$keys(_TableRow)).call(_context66,
   });
 });
 var _Tabs = _interopRequireWildcard(require("./components/Tabs"));
-_forEachInstanceProperty(_context67 = _Object$keys(_Tabs)).call(_context67, function (key) {
+_forEachInstanceProperty(_context68 = _Object$keys(_Tabs)).call(_context68, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tabs[key]) return;
@@ -1697,7 +1716,7 @@ _forEachInstanceProperty(_context67 = _Object$keys(_Tabs)).call(_context67, func
   });
 });
 var _Text = _interopRequireWildcard(require("./components/Text"));
-_forEachInstanceProperty(_context68 = _Object$keys(_Text)).call(_context68, function (key) {
+_forEachInstanceProperty(_context69 = _Object$keys(_Text)).call(_context69, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Text[key]) return;
@@ -1709,7 +1728,7 @@ _forEachInstanceProperty(_context68 = _Object$keys(_Text)).call(_context68, func
   });
 });
 var _TextArea = _interopRequireWildcard(require("./components/TextArea"));
-_forEachInstanceProperty(_context69 = _Object$keys(_TextArea)).call(_context69, function (key) {
+_forEachInstanceProperty(_context70 = _Object$keys(_TextArea)).call(_context70, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextArea[key]) return;
@@ -1721,7 +1740,7 @@ _forEachInstanceProperty(_context69 = _Object$keys(_TextArea)).call(_context69,
   });
 });
 var _TextAreaField = _interopRequireWildcard(require("./components/TextAreaField"));
-_forEachInstanceProperty(_context70 = _Object$keys(_TextAreaField)).call(_context70, function (key) {
+_forEachInstanceProperty(_context71 = _Object$keys(_TextAreaField)).call(_context71, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextAreaField[key]) return;
@@ -1733,7 +1752,7 @@ _forEachInstanceProperty(_context70 = _Object$keys(_TextAreaField)).call(_contex
   });
 });
 var _TextField = _interopRequireWildcard(require("./components/TextField"));
-_forEachInstanceProperty(_context71 = _Object$keys(_TextField)).call(_context71, function (key) {
+_forEachInstanceProperty(_context72 = _Object$keys(_TextField)).call(_context72, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextField[key]) return;
@@ -1746,7 +1765,7 @@ _forEachInstanceProperty(_context71 = _Object$keys(_TextField)).call(_context71,
 });
 var _TimeZonePicker = _interopRequireDefault(require("./components/TimeZonePicker"));
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
-_forEachInstanceProperty(_context72 = _Object$keys(_TooltipTrigger)).call(_context72, function (key) {
+_forEachInstanceProperty(_context73 = _Object$keys(_TooltipTrigger)).call(_context73, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TooltipTrigger[key]) return;
@@ -1758,7 +1777,7 @@ _forEachInstanceProperty(_context72 = _Object$keys(_TooltipTrigger)).call(_conte
   });
 });
 var _TreeView = _interopRequireWildcard(require("./components/TreeView"));
-_forEachInstanceProperty(_context73 = _Object$keys(_TreeView)).call(_context73, function (key) {
+_forEachInstanceProperty(_context74 = _Object$keys(_TreeView)).call(_context74, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeView[key]) return;
@@ -1770,7 +1789,7 @@ _forEachInstanceProperty(_context73 = _Object$keys(_TreeView)).call(_context73,
   });
 });
 var _types = require("./types");
-_forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, function (key) {
+_forEachInstanceProperty(_context75 = _Object$keys(_types)).call(_context75, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;

package/lib/cjs/styles/variants/variants.js

@@ -46,6 +46,7 @@ var _OverlayPanel = _interopRequireDefault(require("../../components/OverlayPane
 var _PanelHeader = _interopRequireDefault(require("../../components/PanelHeader/PanelHeader.styles"));
 var _PopoverMenu = _interopRequireDefault(require("../../components/PopoverMenu/PopoverMenu.styles"));
 var _ProgressBar = _interopRequireDefault(require("../../components/ProgressBar/ProgressBar.styles"));
+var _RangeCalendar = _interopRequireDefault(require("../../components/RangeCalendar/RangeCalendar.styles"));
 var _RockerButton = _interopRequireDefault(require("../../components/RockerButton/RockerButton.styles"));
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox/ScrollBox.styles"));
 var _Separator = _interopRequireDefault(require("../../components/Separator/Separator.styles"));
@@ -67,6 +68,7 @@ var _default = _objectSpread({
   breadcrumb: _Breadcrumb["default"],
   buttonBar: _ButtonBar["default"],
   calendar: _Calendar["default"],
+  rangeCalendar: _RangeCalendar["default"],
   callout: _Callout["default"],
   codeView: _CodeView["default"],
   collapsiblePanel: _CollapsiblePanel["default"],

package/lib/cjs/types/calendar.d.ts

@@ -1,24 +1,31 @@
 import { Key } from 'react';
 import type { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
-import { type CalendarState } from '@react-stately/calendar';
+import { type CalendarState, type RangeCalendarState } from '@react-stately/calendar';
+import type { AriaButtonProps } from '@react-types/button';
+import type { DOMAttributes as AriaDOMAttributes } from '@react-types/shared';
 import { DOMAttributes } from './shared/dom';
 import { TestingAttributes } from './shared/test';
 import { BoxProps } from './box';
 export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime;
-type calendarGridStateProps = CalendarState;
+type calendarGridStateProps = CalendarState | RangeCalendarState;
+type MappedDateValue<T> = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends CalendarDate ? CalendarDate : never;
 export interface RangeValue<T> {
     /** The start value of the range. */
     start: T;
     /** The end value of the range. */
     end: T;
 }
-export interface CalendarProps extends BoxProps, TestingAttributes {
-    /** Prop to provide a custom default date (uncontrolled) */
-    defaultValue?: DateValue | string;
+export type StringOrRangeValue = RangeValue<DateValue> | {
+    start: string;
+    end: string;
+};
+export interface CalendarBaseProps extends BoxProps, TestingAttributes {
     /** Prop to provide a custom default focused date (uncontrolled) */
-    defaultFocusedValue?: DateValue;
-    /** Prop to provide a default date (controlled) */
-    value?: DateValue | string;
+    defaultFocusedValue?: DateValue | string;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateValue | string;
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateValue | string;
     /** custom week days for other calendars */
     customWeekDays?: string[];
     /** Whether the element should receive focus on render. */
@@ -31,39 +38,67 @@ export interface CalendarProps extends BoxProps, TestingAttributes {
      *
      * (date?: DateValue) => boolean
      */
-    isDateUnavailable?: (date: CalendarDate) => boolean;
+    isDateUnavailable?: (date: DateValue) => boolean;
     /** Whether the calendar is disabled. */
     isDisabled?: boolean;
     /** Whether the calendar dates are only focusable. */
     isReadOnly?: boolean;
     /** Whether user input is required on the input before form submission. */
     isRequired?: boolean;
-    /** The maximum allowed date that a user may select. */
-    maxValue?: DateValue | string;
-    /** The minimum allowed date that a user may select. */
-    minValue?: DateValue | string;
     /** Handler that is called when the element loses focus. */
     onBlur?: () => void;
-    /** Handler that is called when the element's selection state changes. */
-    onChange?: () => void;
     /** Handler that is called when the element receives focus. */
     onFocus?: () => void;
     /** Handler that is called when the element's focus status changes. */
-    onFocusChange?: () => void;
+    onFocusChange?: (date: CalendarDate) => void;
     /** Handler that is called when a key is pressed. */
     onKeyDown?: () => void;
     /** Handler that is called when a key is released. */
     onKeyUp?: () => void;
 }
+export interface CalendarProps extends Omit<CalendarBaseProps, 'onChange'> {
+    /** Prop to provide a custom default date (uncontrolled) */
+    defaultValue?: DateValue | string;
+    /** Prop to provide a custom default focused date (uncontrolled) */
+    value?: DateValue | string;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: MappedDateValue<DateValue>) => void;
+}
+export interface RangeCalendarProps extends Omit<CalendarBaseProps, 'onChange'> {
+    /** Prop to provide a custom default date (uncontrolled) */
+    defaultValue?: StringOrRangeValue | null;
+    /** The currently selected date range. */
+    value?: StringOrRangeValue | null;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: RangeValue<MappedDateValue<DateValue>>) => void;
+}
+export interface RangeCalendarHeaderProps {
+    state: RangeCalendarState;
+    calendarProps: AriaDOMAttributes;
+    prevButtonProps: AriaButtonProps;
+    nextButtonProps: AriaButtonProps;
+}
 export interface CalendarGridProps {
     /** State object that is passed in from the  useCalendar hook */
     state: calendarGridStateProps;
     /** Custom week days for other international calendars */
     customWeekDays?: Array<string>;
 }
+export interface RangeCalendarGridProps {
+    /** State object that is passed in from the  useRangeCalendar hook */
+    state: RangeCalendarState;
+    /** The offset to apply to the calendar */
+    offset?: object;
+}
 export interface CalendarCellProps extends DOMAttributes {
     state: calendarGridStateProps;
     date: object;
     key?: Key;
 }
+export interface RangeCalendarCellProps extends DOMAttributes {
+    state: RangeCalendarState;
+    date: object;
+    key?: Key;
+    currentMonth: CalendarDate;
+}
 export {};

package/lib/components/AccordionItem/AccordionItem.js

@@ -9,9 +9,6 @@ import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useAccordionItem } from '@react-aria/accordion';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
-
-// eslint-disable-next-line import/no-unresolved
-
 import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
 import { useStatusClasses } from '../../hooks';

package/lib/components/Calendar/Calendar.js

@@ -53,6 +53,10 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     prevButtonProps = _ref.prevButtonProps,
     nextButtonProps = _ref.nextButtonProps,
     title = _ref.title;
+
+  // to remove warning for unknown event handler property `onFocusChange`.
+  delete prevButtonProps.onFocusChange;
+  delete nextButtonProps.onFocusChange;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     yearChangeDirection = _useState2[0],

package/lib/components/Calendar/Calendar.mdx

@@ -25,7 +25,7 @@ These keys provide additional functionality to the component.
 | Tab | Components in the calendar are focusable and follow the page tab sequence. |
 | Shift + Tab | Moves focus to the previous focusable component. |
 | Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home | Shifts the focus to the first calendar date. |
-| Pressing Home:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date. |
+| Pressing End:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date. |
 | Arrow key | Navigates up, down, right, and left across the calendar. |
 | Page up | Changes the grid of dates to the previous month. |
 | Page down | Changes the grid of dates to the next month. |

package/lib/components/Calendar/Calendar.test.js

@@ -209,15 +209,12 @@ test('allows users to select and navigate through calendar items', function () {
 });
 test('readonly calendar', function () {
   getComponent({
-    isReadOnly: true,
-    defaultValue: '2022-08-10'
+    isReadOnly: true
   });
   expect(screen.queryByRole('grid')).toHaveAttribute('aria-readonly', 'true');
   var dateButtons = screen.queryAllByRole('button');
   userEvent.click(dateButtons[4]);
   expect(dateButtons[4]).not.toHaveClass('is-selected');
-  expect(dateButtons[4]).toHaveFocus();
-  expect(dateButtons[4]).toHaveAttribute('tabindex', '0');
 });
 test('disabled calendar date', function () {
   getComponent({

package/lib/components/Calendar/CalendarCell.js

@@ -49,7 +49,7 @@ var CalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
       setFocused(false);
       focusNextPage();
     }
-  }, [date, focusNextPage, focusPreviousPage, formattedDate, state, setFocused]);
+  }, [focusNextPage, focusPreviousPage, formattedDate, state, setFocused, cellRef]);
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;

package/lib/components/DatePicker/DatePicker.test.js

@@ -619,12 +619,6 @@ test('dateField should handle autofocus when deleting segments from middle', fun
       key: 'Backspace'
     });
   }
-  fireEvent.keyDown(year, {
-    key: 'Backspace'
-  });
-  fireEvent.keyUp(year, {
-    key: 'Backspace'
-  });
   expect(day).toHaveFocus();
   expect(hiddenInput).toHaveValue('');
 });
@@ -664,6 +658,68 @@ test('segment focus should move to the year if month is already empty', function
   }
   expect(year).toHaveFocus();
 });
+test('segment focus stay on year if all are empty for year segment', function () {
+  getComponent({
+    defaultValue: ''
+  });
+  var hiddenInput = screen.queryByTestId('date-field');
+  var inputButtons = screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  expect(hiddenInput).toHaveValue('');
+  act(function () {
+    year.focus();
+  });
+  expect(year).toHaveFocus();
+  fireEvent.keyDown(year, {
+    key: 'Backspace'
+  });
+  fireEvent.keyUp(year, {
+    key: 'Backspace'
+  });
+  expect(year).toHaveFocus();
+});
+test('segment focus should move to previous if all are empty for month segment', function () {
+  getComponent({
+    defaultValue: ''
+  });
+  var hiddenInput = screen.queryByTestId('date-field');
+  var inputButtons = screen.queryAllByRole('spinbutton');
+  var month = inputButtons[1];
+  var year = inputButtons[0];
+  expect(hiddenInput).toHaveValue('');
+  act(function () {
+    month.focus();
+  });
+  expect(month).toHaveFocus();
+  fireEvent.keyDown(month, {
+    key: 'Backspace'
+  });
+  fireEvent.keyUp(month, {
+    key: 'Backspace'
+  });
+  expect(year).toHaveFocus();
+});
+test('segment focus should move to previous if all are empty for day segment', function () {
+  getComponent({
+    defaultValue: ''
+  });
+  var hiddenInput = screen.queryByTestId('date-field');
+  var inputButtons = screen.queryAllByRole('spinbutton');
+  var day = inputButtons[2];
+  var month = inputButtons[1];
+  expect(hiddenInput).toHaveValue('');
+  act(function () {
+    day.focus();
+  });
+  expect(day).toHaveFocus();
+  fireEvent.keyDown(day, {
+    key: 'Backspace'
+  });
+  fireEvent.keyUp(day, {
+    key: 'Backspace'
+  });
+  expect(month).toHaveFocus();
+});
 test('should add the correct number of padded 0 to year, month and day', function () {
   getComponent({
     defaultValue: '0009-08-02'

package/lib/components/RangeCalendar/RangeCalendar.js

@@ -0,0 +1,86 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { forwardRef } from 'react';
+import { createCalendar, parseDate } from '@internationalized/date';
+import { useRangeCalendar } from '@react-aria/calendar';
+import { useLocale } from '@react-aria/i18n';
+import { useRangeCalendarState } from '@react-stately/calendar';
+import { useLocalOrForwardRef } from '../../hooks';
+import { Box } from '../../index';
+import RangeCalendarGrid from './RangeCalendarGrid';
+import RangeCalendarHeader from './RangeCalendarHeader';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var parseDateIfString = function parseDateIfString(value) {
+  return typeof value === 'string' ? parseDate(value) : value;
+};
+export var parseDateRangeIfString = function parseDateRangeIfString(value) {
+  var start = parseDateIfString(value.start);
+  var end = parseDateIfString(value.end);
+  return {
+    start: start,
+    end: end
+  };
+};
+var RangeCalendar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var defaultFocusedValue = props.defaultFocusedValue,
+    defaultValue = props.defaultValue,
+    hasAutoFocus = props.hasAutoFocus,
+    maxValue = props.maxValue,
+    minValue = props.minValue,
+    value = props.value;
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var calenderRangeRef = useLocalOrForwardRef(ref);
+  var parsedDates = {
+    value: value && parseDateRangeIfString(value),
+    defaultValue: defaultValue && parseDateRangeIfString(defaultValue),
+    defaultFocusedValue: defaultFocusedValue && parseDateIfString(defaultFocusedValue),
+    maxValue: maxValue && parseDateIfString(maxValue),
+    minValue: minValue && parseDateIfString(minValue)
+  };
+  var state = useRangeCalendarState(_objectSpread(_objectSpread(_objectSpread({
+    autoFocus: hasAutoFocus
+  }, props), parsedDates), {}, {
+    visibleDuration: {
+      months: 2
+    },
+    pageBehavior: 'single',
+    locale: locale,
+    createCalendar: createCalendar
+  }));
+  var _ref = useRangeCalendar(_objectSpread(_objectSpread({}, props), parsedDates), state, calenderRangeRef),
+    calendarProps = _ref.calendarProps,
+    prevButtonProps = _ref.prevButtonProps,
+    nextButtonProps = _ref.nextButtonProps;
+  return ___EmotionJSX(Box, _extends({}, calendarProps, {
+    ref: calenderRangeRef,
+    variant: "rangeCalendar.calendarContainer",
+    role: "group"
+  }), ___EmotionJSX(RangeCalendarHeader, {
+    state: state,
+    calendarProps: calendarProps,
+    prevButtonProps: prevButtonProps,
+    nextButtonProps: nextButtonProps
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "26px"
+  }, ___EmotionJSX(RangeCalendarGrid, {
+    state: state
+  }), ___EmotionJSX(RangeCalendarGrid, {
+    state: state,
+    offset: {
+      months: 1
+    }
+  })));
+});
+export default RangeCalendar;