@pingux/astro 2.70.0-alpha.2 → 2.70.0

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/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>;

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

@@ -0,0 +1,131 @@
+"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["default"] = exports.UnavailableDates = exports.MinimumDate = exports.MaximumDate = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = void 0;
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+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 _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _RangeCalendar = _interopRequireDefault(require("./RangeCalendar.mdx"));
+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 _default = {
+  title: 'Experimental/RangeCalendar',
+  component: _index.RangeCalendar,
+  parameters: {
+    actions: {
+      argTypesRegex: '^on.*'
+    },
+    source: {
+      type: 'code'
+    },
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_RangeCalendar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: _objectSpread({}, _ariaAttributes.ariaAttributeBaseArgTypes),
+  args: {
+    defaultFocusedValue: '2030-01-15'
+  }
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.RangeCalendar, (0, _extends2["default"])({}, args, {
+    "aria-label": "range-calendar"
+  }));
+};
+exports.Default = Default;
+var DefaultValue = function DefaultValue() {
+  return (0, _react2.jsx)(_index.RangeCalendar, {
+    "aria-label": "calendar-with-default-vaue",
+    defaultValue: {
+      start: '2030-01-15',
+      end: '2030-01-22'
+    }
+  });
+};
+exports.DefaultValue = DefaultValue;
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.RangeCalendar, (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar--range-component-disabled",
+    isDisabled: true
+  }));
+};
+exports.Disabled = Disabled;
+var UnavailableDates = function UnavailableDates() {
+  var unavailableRanges = [['2030-07-28', '2030-08-03'], ['2030-08-11', '2030-08-17'], ['2030-08-25', '2030-08-31']];
+  var isDateUnavailable = function isDateUnavailable(date) {
+    return (0, _some["default"])(unavailableRanges).call(unavailableRanges, function (interval) {
+      return date.compare((0, _date.parseDate)(interval[0])) >= 0 && date.compare((0, _date.parseDate)(interval[1])) <= 0;
+    });
+  };
+  return (0, _react2.jsx)(_index.RangeCalendar, {
+    "aria-label": "Trip dates",
+    defaultValue: {
+      start: '2030-08-07',
+      end: '2030-08-09'
+    },
+    isDateUnavailable: isDateUnavailable
+  });
+};
+exports.UnavailableDates = UnavailableDates;
+var MinimumDate = function MinimumDate() {
+  return (0, _react2.jsx)(_index.RangeCalendar, {
+    "aria-label": "range-calendar-component-min-date",
+    minValue: "2030-01-15",
+    defaultValue: {
+      start: '2030-01-15',
+      end: '2030-01-20'
+    }
+  });
+};
+exports.MinimumDate = MinimumDate;
+var MaximumDate = function MaximumDate() {
+  return (0, _react2.jsx)(_index.RangeCalendar, {
+    "aria-label": "range-calendar-component-max-date",
+    defaultValue: {
+      start: '2030-01-12',
+      end: '2030-01-15'
+    },
+    maxValue: "2030-01-17"
+  });
+};
+exports.MaximumDate = MaximumDate;
+var Controlled = function Controlled(args) {
+  var _useState = (0, _react.useState)({
+      start: '2030-01-12',
+      end: '2030-01-15'
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    range = _useState2[0],
+    setRange = _useState2[1];
+  return (0, _react2.jsx)(_index.RangeCalendar, (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-controlled",
+    value: range,
+    onChange: setRange
+  }));
+};
+exports.Controlled = Controlled;

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

@@ -0,0 +1,104 @@
+declare const _default: {
+    calendarBody: {
+        pb: string;
+        borderTop: string;
+        borderTopColor: string;
+        '& > tr:nth-of-type(odd) ': {
+            backgroundColor: string;
+        };
+    };
+    calendarButton: {
+        justifyContent: string;
+        alignItems: string;
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        lineHeight: string;
+        width: string;
+        height: string;
+        outline: string;
+        '&.is-hovered': {
+            bg: string;
+            cursor: string;
+        };
+        '&.is-selected': {
+            bg: string;
+            '&.is-hovered': {
+                bg: string;
+                color: string;
+            };
+        };
+        '&.is-range-ends': {
+            bg: string;
+            color: string;
+            outline: string;
+            boxShadow: string;
+        };
+        '&.is-selection-start': {
+            borderRadius: string;
+        };
+        '&.is-selection-end': {
+            borderRadius: string;
+        };
+        '&.is-start-and-end': {
+            borderRadius: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-unavailable': {
+            backgroundColor: string;
+        };
+        '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+            backgroundColor: string;
+            color: string;
+            opacity: number;
+        };
+        '&.is-disabled': {
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+        };
+    };
+    calendarCell: {
+        cursor: string;
+        textAlign: string;
+        position: string;
+        color: string;
+        padding: string;
+        width: string;
+        height: string;
+    };
+    calendarContainer: {
+        width: string;
+        textAlign: string;
+    };
+    calendarHeader: {
+        position: string;
+        justifyContent: string;
+        alignItems: string;
+        width: string;
+        height: string;
+    };
+    calendarHeaderContainer: {
+        justifyContent: string;
+        mt: string;
+        alignItems: string;
+        width: string;
+        height: string;
+    };
+    columnHeader: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        width: string;
+        height: string;
+    };
+};
+export default _default;