@pingux/astro 2.70.0-alpha.0 → 2.70.0-alpha.1

package/lib/cjs/components/AccordionItem/AccordionItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Node } from '@react-types/shared';
+import type { Node } from '@react-types/shared';
 export declare const validHeadingTags: string[];
 interface AccordionItemProps<T> {
     item: Node<T>;

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -25,7 +25,7 @@ var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _Accordion = require("../AccordionGroup/Accordion.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["containerProps", "buttonProps", "regionProps"]; // eslint-disable-next-line import/no-unresolved
+var _excluded = ["containerProps", "buttonProps", "regionProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];

package/lib/cjs/components/Calendar/Calendar.js

@@ -64,6 +64,10 @@ var Calendar = /*#__PURE__*/(0, _react.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 = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     yearChangeDirection = _useState2[0],

package/lib/cjs/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/cjs/components/Calendar/Calendar.test.js

@@ -212,15 +212,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(_testWrapper.screen.queryByRole('grid')).toHaveAttribute('aria-readonly', 'true');
   var dateButtons = _testWrapper.screen.queryAllByRole('button');
   _userEvent["default"].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/cjs/components/Calendar/CalendarCell.js

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

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

@@ -626,12 +626,6 @@ test('dateField should handle autofocus when deleting segments from middle', fun
       key: 'Backspace'
     });
   }
-  _testWrapper.fireEvent.keyDown(year, {
-    key: 'Backspace'
-  });
-  _testWrapper.fireEvent.keyUp(year, {
-    key: 'Backspace'
-  });
   expect(day).toHaveFocus();
   expect(hiddenInput).toHaveValue('');
 });
@@ -671,6 +665,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 = _testWrapper.screen.queryByTestId('date-field');
+  var inputButtons = _testWrapper.screen.queryAllByRole('spinbutton');
+  var year = inputButtons[0];
+  expect(hiddenInput).toHaveValue('');
+  (0, _testWrapper.act)(function () {
+    year.focus();
+  });
+  expect(year).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(year, {
+    key: 'Backspace'
+  });
+  _testWrapper.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 = _testWrapper.screen.queryByTestId('date-field');
+  var inputButtons = _testWrapper.screen.queryAllByRole('spinbutton');
+  var month = inputButtons[1];
+  var year = inputButtons[0];
+  expect(hiddenInput).toHaveValue('');
+  (0, _testWrapper.act)(function () {
+    month.focus();
+  });
+  expect(month).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(month, {
+    key: 'Backspace'
+  });
+  _testWrapper.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 = _testWrapper.screen.queryByTestId('date-field');
+  var inputButtons = _testWrapper.screen.queryAllByRole('spinbutton');
+  var day = inputButtons[2];
+  var month = inputButtons[1];
+  expect(hiddenInput).toHaveValue('');
+  (0, _testWrapper.act)(function () {
+    day.focus();
+  });
+  expect(day).toHaveFocus();
+  _testWrapper.fireEvent.keyDown(day, {
+    key: 'Backspace'
+  });
+  _testWrapper.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/cjs/components/Grid/Grid.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GridProps } from '../../types';
+export declare const Grid: React.ForwardRefExoticComponent<Omit<GridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Grid;

package/lib/cjs/components/Grid/Grid.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Grid = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _themeUi = require("theme-ui");
+var _react2 = require("@emotion/react");
+var Grid = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(_themeUi.Grid, (0, _extends2["default"])({
+    ref: ref
+  }, props));
+});
+exports.Grid = Grid;
+Grid.defaultProps = {
+  repeat: 'fit'
+};
+Grid.displayName = 'Grid';
+var _default = Grid;
+exports["default"] = _default;

package/lib/cjs/components/Grid/Grid.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Grid/Grid" />
+
+# Grid
+
+A responsive layout utility component which utilizes [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to position child elements in a variety of ways. Great for providing mobile-first UI layouts.
+
+Uses the [responsive values](https://theme-ui.com/sx-prop#responsive-values) array syntax and the [Grid from Theme-UI](https://theme-ui.com/components/grid/).
+
+### Required Components
+
+`Grid` should be used to position other components, but there are none that are specifically required. `Box` is used for demonstration below.

package/lib/cjs/components/Grid/Grid.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { GridProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<GridProps>;

package/lib/cjs/components/Grid/Grid.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _Grid = _interopRequireDefault(require("./Grid.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/Grid',
+  component: _index.Grid,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Grid["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
+    mb: "sm",
+    fontStyle: "italic"
+  }, "Minimum width of child elements at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+    width: [128, null, 192]
+  }, (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box")), (0, _react2.jsx)(_index.Text, {
+    mt: "xl",
+    mb: "sm",
+    fontStyle: "italic"
+  }, "Defined number of equally-sized columns at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+    gap: 2,
+    columns: [2, null, 4]
+  }, (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box")), (0, _react2.jsx)(_index.Text, {
+    mt: "xl",
+    mb: "sm",
+    fontStyle: "italic"
+  }, "Columns using grid syntax sizing at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+    gap: 2,
+    columns: [2, '1fr 2fr']
+  }, (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box")));
+};
+exports.Default = Default;

package/lib/cjs/components/Grid/Grid.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/cjs/components/Grid/Grid.styles.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {};
+exports["default"] = _default;

package/lib/cjs/components/Grid/Grid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/Grid/Grid.test.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _react2 = require("@emotion/react");
+var defaultProps = {
+  'data-testid': 'grid'
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.Grid, (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_index.Grid, (0, _extends2["default"])({}, defaultProps, props));
+  }
+});
+test('renders Grid component', function () {
+  getComponent();
+  expect(_testWrapper.screen.getByTestId('grid')).toBeInTheDocument();
+});

package/lib/cjs/components/Grid/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Grid';

package/lib/cjs/components/Grid/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Grid["default"];
+  }
+});
+var _Grid = _interopRequireDefault(require("./Grid"));

package/lib/cjs/components/RangeCalendar/RangeCalendar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DateValue } from '@internationalized/date';
+import { RangeCalendarProps, RangeValue, StringOrRangeValue } from '../../types';
+export declare const parseDateIfString: (value: DateValue | string) => DateValue;
+export declare const parseDateRangeIfString: (value: StringOrRangeValue) => RangeValue<DateValue>;
+declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<HTMLDivElement>>;
+export default RangeCalendar;

package/lib/cjs/components/RangeCalendar/RangeCalendar.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseDateRangeIfString = exports.parseDateIfString = exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _date = require("@internationalized/date");
+var _calendar = require("@react-aria/calendar");
+var _i18n = require("@react-aria/i18n");
+var _calendar2 = require("@react-stately/calendar");
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _RangeCalendarGrid = _interopRequireDefault(require("./RangeCalendarGrid"));
+var _RangeCalendarHeader = _interopRequireDefault(require("./RangeCalendarHeader"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var parseDateIfString = function parseDateIfString(value) {
+  return typeof value === 'string' ? (0, _date.parseDate)(value) : value;
+};
+exports.parseDateIfString = parseDateIfString;
+var parseDateRangeIfString = function parseDateRangeIfString(value) {
+  var start = parseDateIfString(value.start);
+  var end = parseDateIfString(value.end);
+  return {
+    start: start,
+    end: end
+  };
+};
+exports.parseDateRangeIfString = parseDateRangeIfString;
+var RangeCalendar = /*#__PURE__*/(0, _react.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 = (0, _i18n.useLocale)(),
+    locale = _useLocale.locale;
+  var calenderRangeRef = (0, _hooks.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 = (0, _calendar2.useRangeCalendarState)(_objectSpread(_objectSpread(_objectSpread({
+    autoFocus: hasAutoFocus
+  }, props), parsedDates), {}, {
+    visibleDuration: {
+      months: 2
+    },
+    pageBehavior: 'single',
+    locale: locale,
+    createCalendar: _date.createCalendar
+  }));
+  var _ref = (0, _calendar.useRangeCalendar)(_objectSpread(_objectSpread({}, props), parsedDates), state, calenderRangeRef),
+    calendarProps = _ref.calendarProps,
+    prevButtonProps = _ref.prevButtonProps,
+    nextButtonProps = _ref.nextButtonProps;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
+    ref: calenderRangeRef,
+    variant: "rangeCalendar.calendarContainer",
+    role: "group"
+  }), (0, _react2.jsx)(_RangeCalendarHeader["default"], {
+    state: state,
+    calendarProps: calendarProps,
+    prevButtonProps: prevButtonProps,
+    nextButtonProps: nextButtonProps
+  }), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "26px"
+  }, (0, _react2.jsx)(_RangeCalendarGrid["default"], {
+    state: state
+  }), (0, _react2.jsx)(_RangeCalendarGrid["default"], {
+    state: state,
+    offset: {
+      months: 1
+    }
+  })));
+});
+var _default = RangeCalendar;
+exports["default"] = _default;

package/lib/cjs/components/RangeCalendar/RangeCalendar.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Experimental/RangeCalendar/RangeCalendar" />
+
+# RangeCalendar
+
+The RangeCalendar component displays months in two grid-like views and gives users the ability to quickly to select a contiguous range of dates.
+
+This component is built on [useRangeCalendar](https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html), [useCalendarGrid](https://react-spectrum.adobe.com/react-aria/useCalendar.html#usecalendargrid), and 
+[useCalendarCell](https://react-spectrum.adobe.com/react-aria/useCalendar.html#usecalendarcell) from React Aria, and [useRangeCalendarState](https://react-spectrum.adobe.com/react-stately/useRangeCalendarState.html) from React Stately.
+
+### Required components 
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the start and end dates when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
+| 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 of the currently focused month. |
+| Pressing End:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date of the currently focused month. |
+| Arrow key | Navigates up, down, right, and left across the calendar. If at the end of the current calendar, the right arrow key navigates to the next calendar. If at the beginning of the current calendar, the left arrow key navigates to the previous calendar. |
+| Page up | Changes focus to the same date in the previous month. |
+| Page down | Changes focus to the same date in the next month. |
+| Shift + page up | Changes the grid of dates to the same months in the previous year. |
+| Shift+ page down | Changes the grid of dates to the same months in the next year. |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute is used to provide an accessible name.
+- In each data cell, the **`aria-selected`** attribute is set to “true” for all dates within the selected range, and **`aria-disabled`** is set to “false” by default.

package/lib/cjs/components/RangeCalendar/RangeCalendar.stories.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { RangeCalendarProps } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+        };
+        source: {
+            type: string;
+        };
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    argTypes: {
+        'aria-controls': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-describedby': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-details': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-errormessage': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-label': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-labelledby': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+    };
+    args: {
+        defaultFocusedValue: string;
+    };
+};
+export default _default;
+export declare const Default: StoryFn<RangeCalendarProps>;
+export declare const DefaultValue: StoryFn<RangeCalendarProps>;
+export declare const Disabled: StoryFn<RangeCalendarProps>;
+export declare const UnavailableDates: StoryFn<RangeCalendarProps>;
+export declare const MinimumDate: StoryFn<RangeCalendarProps>;
+export declare const MaximumDate: StoryFn<RangeCalendarProps>;
+export declare const Controlled: StoryFn<RangeCalendarProps>;