@pingux/astro 2.208.3 → 2.209.0-alpha.0

package/lib/components/PhoneNumberField/PhoneNumberField.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as PhoneNumberFieldStories from './PhoneNumberField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
+
+<Meta of={PhoneNumberFieldStories} isTemplate />
+
+# PhoneNumberField
+
+The PhoneNumberField component combines a country selector with a phone number input, providing a complete, form-ready solution for collecting international phone numbers. The country selector is an accessible combo box that filters all countries from the `countries-list` package, and the phone input validates that only numeric characters (with an optional leading `+`) are entered.
+
+### Required components
+
+This component requires the following dependency to be present in the project:
+
+- **`countries-list ^2.6.1`** — provides the full list of countries and their dial codes used to populate the country selector dropdown.
+
+The `ComboBoxField` component (from the Astro design system) is used internally for the country selector. No additional external setup is needed beyond having `countries-list` installed.
+
+### Accessibility
+
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus between the country selector trigger and the phone number input, following the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Arrow Down / Arrow Up', description: 'When the country selector dropdown is open, moves focus through the list of countries.' },
+  { key: 'Enter', description: 'Selects the currently focused country in the dropdown and closes the selector.' },
+  { key: 'Escape', description: 'Closes the country selector dropdown without changing the selection.' },
+]} screenReaderRows={[
+  'The phone number input uses the **`aria-labelledby`** attribute to reference the field label ID, associating the visible label with the input.',
+  'The country selector combo box uses the **`aria-label`** attribute (value: `"Country Picker"`) to provide an accessible name for the combo box trigger, since its visible content is the dial code rather than a descriptive label.',
+  'The **`aria-invalid`** attribute is set on the phone input when the field has an error status.',
+]} />

package/lib/components/PhoneNumberField/PhoneNumberField.stories.js

@@ -0,0 +1,126 @@
+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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useState } from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { PhoneNumberField } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
+import PhoneNumberFieldReadme from './PhoneNumberField.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/PhoneNumberField',
+  component: PhoneNumberField,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PhoneNumberFieldReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread(_objectSpread(_objectSpread({}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number"
+  }, args));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.phoneNumberField["default"]
+  }
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    countryValue = _useState4[0],
+    setCountryValue = _useState4[1];
+  return ___EmotionJSX(PhoneNumberField, {
+    label: "Phone Number",
+    value: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    countryValue: countryValue,
+    onCountryChange: function onCountryChange(key) {
+      return setCountryValue(key);
+    }
+  });
+};
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    isDisabled: true
+  }, args));
+};
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    isReadOnly: true,
+    defaultCountryValue: "US",
+    value: "2025550177"
+  }, args));
+};
+export var Required = function Required(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    isRequired: true
+  }, args));
+};
+export var Error = function Error(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    status: "error",
+    helperText: "Please enter a valid phone number."
+  }, args));
+};
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    status: "warning",
+    helperText: "Double-check the country code."
+  }, args));
+};
+Warning.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+export var Success = function Success(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    status: "success",
+    helperText: "Phone number verified."
+  }, args));
+};
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(PhoneNumberField, _extends({
+    label: "Phone Number",
+    hintText: "Include country code for international numbers.",
+    helpHintProps: {
+      direction: 'right'
+    }
+  }, args));
+};

package/lib/components/PhoneNumberField/PhoneNumberField.test.js

@@ -0,0 +1,155 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
+import PhoneNumberField from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-phone-number-field';
+var testLabel = 'Test Label';
+var defaultProps = {
+  'data-testid': testId,
+  label: testLabel
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(PhoneNumberField, _extends({}, defaultProps, props)));
+};
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(PhoneNumberField, _extends({}, defaultProps, props));
+  },
+  testValue: '+12345678',
+  testLabel: testLabel,
+  componentType: 'PhoneNumberField'
+});
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(PhoneNumberField, _extends({}, defaultProps, props));
+  }
+});
+afterEach(function () {
+  jest.clearAllMocks();
+});
+test('default render has label, phone input, and country combobox', function () {
+  getComponent();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  expect(screen.getByText(testLabel)).toBeInstanceOf(HTMLLabelElement);
+  expect(screen.getByRole('textbox')).toBeInTheDocument();
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
+});
+test('typing a non-numeric character does not update phone input value', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: 'a'
+    }
+  });
+  expect(phoneInput).toHaveValue('');
+});
+test('typing a "+" character is accepted', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+'
+    }
+  });
+  expect(phoneInput).toHaveValue('+');
+});
+test('typing "+" followed by digits is valid', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+123'
+    }
+  });
+  expect(phoneInput).toHaveValue('+123');
+});
+test('typing "+" followed by a letter is not accepted', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+a'
+    }
+  });
+  expect(phoneInput).toHaveValue('');
+});
+test('pasting a string with spaces and dashes strips non-numeric characters and dial code', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  var pasteEvent = createEvent.paste(phoneInput, {
+    clipboardData: {
+      getData: function getData() {
+        return '+1 (800) 555-1234';
+      }
+    }
+  });
+  fireEvent(phoneInput, pasteEvent);
+  expect(phoneInput).toHaveValue('8005551234');
+});
+test('pasting a string without leading "+" strips all non-numeric characters', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  var pasteEvent = createEvent.paste(phoneInput, {
+    clipboardData: {
+      getData: function getData() {
+        return '800-555-1234';
+      }
+    }
+  });
+  fireEvent(phoneInput, pasteEvent);
+  expect(phoneInput).toHaveValue('8005551234');
+});
+test('onChange callback is called with a valid phone number change', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange
+  });
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+12345678'
+    }
+  });
+  expect(onChange).toHaveBeenCalled();
+});
+test('onChange callback is not called when an invalid character is typed', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange
+  });
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: 'abc'
+    }
+  });
+  expect(onChange).not.toHaveBeenCalled();
+});
+test('isDisabled disables the phone input', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var phoneInput = screen.getByRole('textbox');
+  expect(phoneInput).toBeDisabled();
+});
+test('helperText renders FieldHelperText content', function () {
+  var helperText = 'Enter your phone number';
+  getComponent({
+    helperText: helperText
+  });
+  expect(screen.getByText(helperText)).toBeInTheDocument();
+});
+test('controlled countryValue sets initial selected country', function () {
+  getComponent({
+    countryValue: 'US'
+  });
+  var phoneInput = screen.getByRole('textbox');
+  expect(phoneInput).toBeInTheDocument();
+  // The combobox should be present and the phone input available
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
+});

package/lib/components/PhoneNumberField/index.js

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

package/lib/components/PopoverMenu/PopoverMenu.stories.js

@@ -7,6 +7,7 @@ import { useGetTheme } from '../../hooks';
 import { Icon, IconButton, Item, Menu, OverlayProvider, PopoverMenu, Section, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import PopoverMenuReadme from './PopoverMenu.mdx';
+import { popoverMenuArgTypes } from './popoverMenuAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/PopoverMenu',
@@ -18,19 +19,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    align: {},
-    direction: {},
-    isDefaultOpen: {},
-    isNotClosedOnSelect: {},
-    isNotFlippable: {},
-    isOpen: {
-      onClick: {
-        action: 'clicked'
-      },
-      control: false
-    }
-  }
+  argTypes: popoverMenuArgTypes
 };
 export var Default = function Default(args) {
   var _useGetTheme = useGetTheme(),

package/lib/components/PopoverMenu/popoverMenuAttributes.js

@@ -0,0 +1,13 @@
+export var popoverMenuArgTypes = {
+  align: {},
+  direction: {},
+  isDefaultOpen: {},
+  isNotClosedOnSelect: {},
+  isNotFlippable: {},
+  isOpen: {
+    onClick: {
+      action: 'clicked'
+    },
+    control: false
+  }
+};

package/lib/components/ProgressBar/ProgressBar.stories.js

@@ -3,6 +3,7 @@ import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { ProgressBar } from '../../index';
 import ProgressBarReadMe from './ProgressBar.mdx';
+import { progressBarArgTypes } from './progressBarAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Experimental/ProgressBar',
@@ -14,33 +15,7 @@ export default {
       }
     }
   },
-  argTypes: {
-    isIndeterminate: {
-      table: {
-        disable: true
-      }
-    },
-    'data-testid': {
-      table: {
-        disable: true
-      }
-    },
-    label: {
-      table: {
-        disable: true
-      }
-    },
-    shouldShowValueLabel: {
-      table: {
-        disable: true
-      }
-    },
-    valueLabel: {
-      table: {
-        disable: true
-      }
-    }
-  }
+  argTypes: progressBarArgTypes
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(ProgressBar, _extends({}, args, {

package/lib/components/ProgressBar/progressBarAttributes.js

@@ -0,0 +1,58 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { booleanArg } from '../../utils/docUtils/docArgTypes';
+export var progressBarArgTypes = {
+  'data-testid': {
+    table: {
+      disable: true
+    }
+  },
+  value: {
+    control: {
+      type: 'number'
+    },
+    description: 'The current value of the progress bar (required).'
+  },
+  minValue: {
+    control: {
+      type: 'number'
+    },
+    description: 'The minimum value of the progress bar.'
+  },
+  maxValue: {
+    control: {
+      type: 'number'
+    },
+    description: 'The maximum value of the progress bar.'
+  },
+  isIndeterminate: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the progress bar is in an indeterminate state (progress is unknown).'
+  }),
+  shouldShowValueLabel: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether to display a label showing the current value of the progress bar.'
+  }),
+  label: {
+    control: {
+      type: 'text'
+    },
+    description: 'A label describing the progress bar.'
+  },
+  valueLabel: {
+    control: {
+      type: 'text'
+    },
+    description: 'A custom label to display for the current value instead of the default formatted value.'
+  },
+  formatOptions: {
+    description: 'The display format of the value label (Intl.NumberFormatOptions).'
+  }
+};

package/lib/components/RadioGroupField/RadioGroupField.stories.js

@@ -15,9 +15,8 @@ import React, { useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RadioField, RadioGroupField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
-import { statusArgTypes } from '../../utils/docUtils/statusProp';
 import RadioGroupFieldReadme from './RadioGroupField.mdx';
+import { radioGroupFieldArgTypes } from './radioGroupFieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/RadioGroupField',
@@ -29,32 +28,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({
-    label: {
-      control: {
-        type: 'text'
-      }
-    },
-    helperText: {
-      control: {
-        type: 'text'
-      }
-    },
-    hintText: {
-      control: {
-        type: 'text'
-      }
-    },
-    defaultValue: {},
-    orientation: {},
-    isDisabled: {},
-    isRequired: {},
-    name: {},
-    id: {},
-    value: {
-      control: false
-    }
-  }, statusArgTypes), ariaAttributeBaseArgTypes),
+  argTypes: _objectSpread({}, radioGroupFieldArgTypes),
   args: {
     label: 'Pick one',
     defaultValue: 'A'

package/lib/components/RadioGroupField/radioGroupFieldAttributes.js

@@ -0,0 +1,39 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
+export var radioGroupFieldArgTypes = _objectSpread(_objectSpread({
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  hintText: {
+    control: {
+      type: 'text'
+    }
+  },
+  defaultValue: {},
+  orientation: {},
+  isDisabled: {},
+  isRequired: {},
+  name: {},
+  id: {},
+  value: {
+    control: false
+  }
+}, statusArgTypes), ariaAttributeBaseArgTypes);

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

@@ -1,23 +1,12 @@
-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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState } from 'react';
 import { parseDate } from '@internationalized/date';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RangeCalendar } from '../../index';
-import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import RangeCalendarReadme from './RangeCalendar.mdx';
+import { rangeCalendarArgTypes } from './rangeCalendarAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Experimental/RangeCalendar',
@@ -32,7 +21,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({}, ariaAttributeBaseArgTypes),
+  argTypes: rangeCalendarArgTypes,
   args: {
     defaultFocusedValue: '2030-01-15'
   }

package/lib/components/RangeCalendar/rangeCalendarAttributes.js

@@ -0,0 +1,84 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { booleanArg, funcArg } from '../../utils/docUtils/docArgTypes';
+export var rangeCalendarArgTypes = _objectSpread(_objectSpread({}, ariaAttributeBaseArgTypes), {}, {
+  defaultValue: {
+    control: {
+      type: null
+    },
+    description: 'The default selected date range (uncontrolled).'
+  },
+  value: {
+    control: {
+      type: null
+    },
+    description: 'The currently selected date range (controlled).'
+  },
+  customWeekDays: {
+    control: {
+      type: null
+    },
+    description: 'Custom week day labels for use with non-Gregorian calendars.'
+  },
+  defaultFocusedValue: {
+    control: {
+      type: 'text'
+    },
+    description: 'The default focused date when the calendar first mounts (uncontrolled).'
+  },
+  minValue: {
+    control: {
+      type: 'text'
+    },
+    description: 'The minimum allowed date that a user may select.'
+  },
+  maxValue: {
+    control: {
+      type: 'text'
+    },
+    description: 'The maximum allowed date that a user may select.'
+  },
+  isDisabled: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the calendar is disabled.'
+  }),
+  isReadOnly: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the calendar dates are only focusable (not selectable).'
+  }),
+  isRequired: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether user input is required on the calendar before form submission.'
+  }),
+  hasAutoFocus: _objectSpread(_objectSpread({}, booleanArg), {}, {
+    description: 'Whether the element should receive focus on render.'
+  }),
+  onChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the selected date range changes.'
+  }),
+  isDateUnavailable: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Callback that is called for each date. If it returns true, the date is unavailable.'
+  }),
+  onBlur: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the element loses focus.'
+  }),
+  onFocus: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when the element receives focus.'
+  }),
+  onFocusChange: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: "Handler that is called when the element's focus status changes."
+  }),
+  onKeyDown: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when a key is pressed.'
+  }),
+  onKeyUp: _objectSpread(_objectSpread({}, funcArg), {}, {
+    description: 'Handler that is called when a key is released.'
+  })
+});