You have expanded: {expandedKeys}
+
+ )
+}
+```
+
+## Expanded
+
+By default, only one disclosure will be expanded at a time. To expand multiple disclosures, apply the `allowsMultipleExpanded` prop to Accordion.
+
+```tsx example
+{isExpanded ? 'The disclosure is expanded' : 'The disclosure is collapsed'}
+
+ )
+}
+```
+
+## Props
+
+### Disclosure
+
+Default
+Large width
+
+
+
+
+ {children}
+
+ onClearSelection()}
+ isQuiet
+ staticColor={isEmphasized ? 'white' : undefined}>
+
+
+ {lastCount === 'all'
+ ? stringFormatter.format('selectedAll')
+ : stringFormatter.format('selected', {count: lastCount})}
+
+
+
+ {children}
+
+ );
+});
diff --git a/packages/@fds-design/actionbar/src/actionbar.css b/packages/@fds-design/actionbar/src/actionbar.css
new file mode 100644
index 0000000..4956020
--- /dev/null
+++ b/packages/@fds-design/actionbar/src/actionbar.css
@@ -0,0 +1,91 @@
+.ActionBarContainer {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+
+ & > :not(.react-spectrum-ActionBar) {
+ flex: 1;
+ min-height: 0;
+ }
+
+ & > .react-spectrum-ActionBar {
+ flex: 0 0 auto;
+ }
+}
+
+.react-spectrum-ActionBar {
+ transition: height var(--spectrum-global-animation-duration-100) ease-in-out,
+ opacity var(--spectrum-global-animation-duration-100) ease-in-out;
+
+ /* Take up no space when not open */
+ block-size: 0;
+ opacity: 0;
+ width: 100%;
+
+ /* Clip anything outside of us, whether we're open or not. This makes the animation smooth */
+ overflow: hidden;
+
+ &.is-open {
+ height: calc(var(--spectrum-global-dimension-size-600) + var(--spectrum-global-dimension-size-100) * 2);
+ opacity: 1;
+ transition-delay: 0ms;
+ }
+
+ .react-spectrum-ActionBar-bar {
+ display: grid;
+ grid-template-areas: "clear selected . actiongroup";
+ grid-template-columns: auto max-content minmax(var(--spectrum-global-dimension-size-300), 1fr) auto;
+ align-items: center;
+ isolation: isolate;
+ justify-content: space-between;
+ padding: var(--spectrum-global-dimension-size-100);
+
+ position: absolute;
+ bottom: var(--spectrum-global-dimension-size-100);
+ left: var(--spectrum-global-dimension-size-100);
+ right: var(--spectrum-global-dimension-size-100);
+ max-width: 960px;
+ margin: 0 auto;
+
+ background: var(--spectrum-global-color-gray-50);
+ border-radius: var(--spectrum-popover-border-radius);
+ border-style: solid;
+ border-width: var(--spectrum-popover-border-size);
+ border-color: var(--spectrum-popover-border-color);
+ box-shadow: 0 2px 8px var(--spectrum-alias-dropshadow-color);
+
+ transform: translateY(var(--spectrum-overlay-positive-transform-distance));
+ transition: transform var(--spectrum-global-animation-duration-100) ease-in-out;
+ }
+
+ &.is-open .react-spectrum-ActionBar-bar {
+ transform: translateY(0);
+ }
+
+ &.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar {
+ background: var(--spectrum-global-color-static-blue-700);
+ color: white;
+ box-shadow: 0 2px 6px var(--spectrum-alias-dropshadow-color);
+ border: none;
+ }
+
+ .react-spectrum-ActionBar-selectedCount {
+ grid-area: selected;
+ padding: 0 var(--spectrum-global-dimension-size-50);
+ user-select: none;
+ cursor: default;
+ }
+
+ .react-spectrum-ActionBar-actionGroup {
+ grid-area: actiongroup;
+ min-width: 0;
+ }
+}
+@media (forced-colors: active) {
+ .react-spectrum-ActionBar {
+ &.react-spectrum-ActionBar--emphasized .react-spectrum-ActionBar-bar {
+
+ border: 1px solid transparent;
+ }
+ }
+}
diff --git a/packages/@fds-design/actionbar/src/index.ts b/packages/@fds-design/actionbar/src/index.ts
new file mode 100644
index 0000000..b07d20e
--- /dev/null
+++ b/packages/@fds-design/actionbar/src/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/// default
+isDisabled
+compact
+isQuiet
+isEmphasized
+staticColor: black
+staticColor: white
+Action: {action}
+ + ); +} +``` + +## Content + +ActionGroups accept a list ofCurrent selection (controlled): {[...selected]}
+ + ); +} +``` + +Set `selectionMode` prop to `multiple` to allow more than one selection. +```tsx example +function Example() { + let [selected, setSelected] = React.useStateCurrent selections (controlled): {[...selected].join(', ')}
+ + ); +} +``` + +## Events +Use the `onSelectionChange` prop as a callback to handle press events on items when selectionMode is either `single` or `multiple`. +The `key` prop from the selected item will be passed into the callback. + +To continue to capturing actions when `selectionMode` is `none`, utilize the `onAction` prop. +```tsx example +import type {Key} from '@adobe/react-spectrum'; + +function Example() { + let [actionKey, setActionKey] = React.useStateAction: {actionKey}
+ + ); +} +``` + +## Collapsing behavior + +By default, ActionGroup items wrap to form a new line when horizontal space is limited. However, this can cause content to shift below the +ActionGroup. If the ActionGroup should always appear in a single line, the `overflowMode` prop can be set to `collapse`. In this mode, when +horizontal space is limited, the ActionGroup will collapse into a menu. The exact behavior depends on the `selectionMode`. + +### Non-selectable + +When selection is not enabled, ActionGroup displays as many items as possible and collapses the remaining items into a more actions menu. + +```tsx example +
+
+
+
+ {children.map((item) => (
+
+
+ Note: this is currently unsupported by Spectrum. Container should scroll.
+
+ {renderTools({orientation: 'vertical', buttonLabelBehavior: 'hide', maxHeight: '100%', ...args})}
+
+
+ -
+
Edit
+
+ -
+
Copy
+
+ -
+
Delete
+
+ -
+
Move
+
+ -
+
Duplicate
+
+
+
+ );
+}
+
+function renderTools(props = {}) {
+ return (
+
+
+ );
+});
+
+interface SearchAutocompleteTrayProps
+
+
+ {icon}
+
+ {children}
+
+
+ {validationState && !isDisabled ? validation : null}
+ {(inputValue !== '' || validationState != null) && !isReadOnly && clearButton}
+
+ loadingState !== 'loading' && (
+
+ {stringFormatter.format('noResults')}
+
+ )}
+ UNSAFE_className={
+ classNames(
+ searchAutocompleteStyles,
+ 'tray-listbox'
+ )
+ }
+ ref={listBoxRef}
+ onScroll={onScroll}
+ onLoadMore={onLoadMore}
+ isLoading={isLoading} />
+
+ }
+ style={style}
+ className={
+ classNames(
+ styles,
+ 'spectrum-InputGroup',
+ {
+ 'spectrum-InputGroup--quiet': isQuiet,
+ 'is-disabled': isDisabled,
+ 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,
+ 'is-hovered': isHovered
+ },
+ classNames(
+ searchAutocompleteStyles,
+ 'searchautocomplete'
+ ),
+ className
+ )
+ }>
+
+
+ Search results for: {searchTerm}
+
+
+
+ - Bulbasaur
+ - Squirtle
+ - Charmander
+
+
+
+
+
+
+
+ {props.show && }
+
+ );
+
+ let {getByRole, getAllByRole, queryAllByRole, rerender} = render(
+
+ );
+
+ let {getByRole, getAllByRole, queryAllByRole, getByTestId, rerender} = render(
+ {props.show && }
+
+
+
+
+
+ {item => - {item.name}
}
+
+
+
+
+ );
+
+ let {getByRole, queryAllByRole, rerender} = render(
+ Default
+Disabled
+Custom size
+
+
+ )
+ ],
+ args: {...Default.args}
+};
+
+export const ShowRoot = {
+ args: {...Default.args, showRoot: true}
+};
diff --git a/packages/@fds-design/breadcrumbs/docs/Breadcrumbs.mdx b/packages/@fds-design/breadcrumbs/docs/Breadcrumbs.mdx
new file mode 100644
index 0000000..6051326
--- /dev/null
+++ b/packages/@fds-design/breadcrumbs/docs/Breadcrumbs.mdx
@@ -0,0 +1,201 @@
+{/* Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/breadcrumbs';
+import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs';
+import packageData from '@react-spectrum/breadcrumbs/package.json';
+
+```jsx import
+import {Breadcrumbs, Item} from '@react-spectrum/breadcrumbs';
+import {View} from '@react-spectrum/view';
+```
+
+---
+category: Navigation
+keywords: [collections, dropdown]
+---
+
+# Breadcrumbs
+
+
+ setFolderId(a)}>
+ {folders.map(f => - {f.label}
)}
+
+
+ );
+}
+```
+
+## Links
+
+By default, interacting with an item in Breadcrumbs triggers `onAction`. Items may also be links to another page or website. This can be achieved by passing the `href` prop to the `You pressed folder ID: {folderId}
+{storyFn()}
+ {render(args)}
+
+ ),
+ name: 'truncated'
+};
+
+export const RenderMany: BreadcrumbsStory = {
+ render: (args) => (
+
+ {renderMany(args)}
+
+ ),
+ name: '7 items, resizable container'
+};
+
+export const OneItem: BreadcrumbsStory = {
+ render: (args) => (
+ icon + text
+static color: white
+static color: black
+Accent
+Primary
+Negative
+element a
+with icon
+And
+Or
+
+ {button}
+
+ );
+ }
+ return button;
+ })}
+
+ {isProgressVisible &&
+
+ }
+
+ {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.
+ Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button
+ https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari
+ The aria-live may cause extra announcements in other browsers. */}
+
+
+ }
+
+ {buttons}
+
+ );
+ }
+
+ return buttons;
+}
+
+function renderIconText
+ {buttons}
+
+ );
+ }
+
+ return buttons;
+}
+
+function renderIconOnly
+ {buttons}
+
+ );
+ }
+
+ return buttons;
+}
+
+function Example() {
+ let [show, setShow] = React.useState(false);
+ let [show2, setShow2] = React.useState(false);
+
+ return (
+
+
+
+ click me!
+
+
+
+
+ I have an icon
+
+
+
+
+
+ with onClick
+
+
+
+
+ disabled
+
+
+
+
+ Aria-label "Button label" on button
+
+
+
+
+
+ Aria-label "icon label" on icon
+
+
+
+
+
+ No aria-labels--bad implementation
+
+
+
+
+
+ Tooltip and aria-label "Notifications" on button
+
+
+
+ Click here to view
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Form submit
+
+
+
+
+ );
+}
+let timerValue = 5000;
+function PendingButtonComponent(props) {
+ let [isPending, setPending] = useState(false);
+
+ let handlePress = (e) => {
+ action('press')(e);
+ setPending(true);
+ setTimeout(() => {
+ setPending(false);
+ }, timerValue);
+ };
+
+ return (
+
+ );
+}
+
+function PendingButtonOnClickComponent(props) {
+ let [isPending, setPending] = useState(false);
+
+ let handlePress = (e) => {
+ action('click')(e);
+ setPending(true);
+ setTimeout(() => {
+ setPending(false);
+ }, timerValue);
+ };
+
+ return (
+
+ );
+}
+
+function PendingButtonFormComponent(props) {
+ let [isPending, setPending] = useState(false);
+
+ let onSubmit = (e) => {
+ console.log('onSubmit called.');
+ e.preventDefault();
+ if (!isPending) {
+ setPending(true);
+ setTimeout(() => {
+ setPending(false);
+ }, timerValue);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/packages/@fds-design/button/stories/LogicButton.stories.tsx b/packages/@fds-design/button/stories/LogicButton.stories.tsx
new file mode 100644
index 0000000..e5e4e23
--- /dev/null
+++ b/packages/@fds-design/button/stories/LogicButton.stories.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import {LogicButton} from '../';
+import React from 'react';
+
+export type LogicButtonStory = ComponentStoryObj
+
+ Default
+
+
+ Disabled
+
+
+ );
+}
diff --git a/packages/@fds-design/button/stories/ToggleButton.stories.tsx b/packages/@fds-design/button/stories/ToggleButton.stories.tsx
new file mode 100644
index 0000000..9dcee11
--- /dev/null
+++ b/packages/@fds-design/button/stories/ToggleButton.stories.tsx
@@ -0,0 +1,138 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import Add from '@spectrum-icons/workflow/Add';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import {Flex, Text, View} from '@adobe/react-spectrum';
+import React, {useState} from 'react';
+import {ToggleButton} from '../';
+
+export type ToggleButtonStory = ComponentStoryObj
+ Press Me
+
+ {selected ? 'true' : 'false'} +
+ );
+}
diff --git a/packages/@fds-design/button/test/ActionButton.test.js b/packages/@fds-design/button/test/ActionButton.test.js
new file mode 100644
index 0000000..3fd868e
--- /dev/null
+++ b/packages/@fds-design/button/test/ActionButton.test.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionButton} from '../';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+describe('ActionButton', function () {
+ let onPressSpy = jest.fn();
+
+ afterEach(() => {
+ onPressSpy.mockClear();
+ });
+
+ it.each`
+ Name | Component | props
+ ${'ActionButton'} | ${ActionButton} | ${{onPress: onPressSpy}}
+ `('$Name handles defaults', async function ({Component, props}) {
+ let user = userEvent.setup({delay: null, pointerMap});
+ let {getByRole} = render(+ {selected ? 'true' : 'false'} +
+
+
+ {children}
+
+
+
+ );
+});
diff --git a/packages/@fds-design/buttongroup/src/index.ts b/packages/@fds-design/buttongroup/src/index.ts
new file mode 100644
index 0000000..1d1d63d
--- /dev/null
+++ b/packages/@fds-design/buttongroup/src/index.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+///
+ {render(args)}
+
+ )
+};
+
+export const ConstantContainer: ButtonGroupStory = {
+ render: (args) =>
+
+ );
+};
+
+let Component = (props) => {
+ let [show, setShow] = useState(false);
+ return (
+
+
+
+ {render(props)}
+ Selected
+Min Max
+Disabled
+Unavailable
+Error Message
+Disabled Invalid
+All States
+
+ {Object.keys(props).join('\n')}
+
+ ))}
+
+ |
+
+ Selected date: {date?.toString()}
+Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}
+ + ); +} +``` + +## Validation + +By default, `Calendar` allows selecting any date. The `minValue` and `maxValue` props can also be used to prevent the user from selecting dates outside a certain range. + +This example only accepts dates after today. + +```tsx example +import {today} from '@internationalized/date'; + +
+
+```
+
+### Page behavior
+
+By default, when pressing the next or previous buttons, pagination will advance by the `visibleMonths` value. This behavior can be changed to page by single months instead, by setting `pageBehavior` to `single`.
+
+```tsx example
+
+
+```
diff --git a/packages/@fds-design/calendar/docs/RangeCalendar.mdx b/packages/@fds-design/calendar/docs/RangeCalendar.mdx
new file mode 100644
index 0000000..2ad4e62
--- /dev/null
+++ b/packages/@fds-design/calendar/docs/RangeCalendar.mdx
@@ -0,0 +1,254 @@
+{/* Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/calendar';
+import i18nDocs from 'docs:@internationalized/date';
+import {HeaderInfo, PropTable, PageDescription, TypeLink} from '@react-spectrum/docs';
+import packageData from '@react-spectrum/calendar/package.json';
+
+```jsx import
+import {RangeCalendar} from '@react-spectrum/calendar';
+import {Flex} from '@react-spectrum/layout';
+import {ActionButton} from '@adobe/react-spectrum';
+```
+
+---
+category: Date and Time
+keywords: [date]
+---
+
+# RangeCalendar
+
+Start date: {range?.start.toString()}
+End date: {range?.end.toString()}
++ Selected date:{' '} + {formatter.formatRange( + range.start.toDate(getLocalTimeZone()), + range.end.toDate(getLocalTimeZone()) + )} +
+ + ); +} +``` + +## Validation + +By default, `RangeCalendar` allows selecting any date range. The `minValue` and `maxValue` props can also be used to prevent the user from selecting dates outside a certain range. + +This example only accepts dates after today. + +```tsx example +import {today} from '@internationalized/date'; + +
+
+```
+
+### Page behavior
+
+By default, when pressing the next or previous buttons, pagination will advance by the `visibleMonths` value. This behavior can be changed to page by single months instead, by setting `pageBehavior` to `single`.
+
+```tsx example
+
+
+```
diff --git a/packages/@fds-design/calendar/index.ts b/packages/@fds-design/calendar/index.ts
new file mode 100644
index 0000000..1210ae1
--- /dev/null
+++ b/packages/@fds-design/calendar/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';
diff --git a/packages/@fds-design/calendar/intl/ar-AE.json b/packages/@fds-design/calendar/intl/ar-AE.json
new file mode 100644
index 0000000..7a1ed92
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/ar-AE.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {التاريخ} other {التواريخ}} المحدد/المحددة غير متوفرة."
+}
diff --git a/packages/@fds-design/calendar/intl/bg-BG.json b/packages/@fds-design/calendar/intl/bg-BG.json
new file mode 100644
index 0000000..32d75be
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/bg-BG.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Избраната дата не е налична} other {Избраните дати не са налични}}."
+}
diff --git a/packages/@fds-design/calendar/intl/cs-CZ.json b/packages/@fds-design/calendar/intl/cs-CZ.json
new file mode 100644
index 0000000..6c5c786
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/cs-CZ.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Vybrané datum není} other {Vybraná data nejsou}} k dispozici."
+}
diff --git a/packages/@fds-design/calendar/intl/da-DK.json b/packages/@fds-design/calendar/intl/da-DK.json
new file mode 100644
index 0000000..a0bf126
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/da-DK.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Valgte {selectedCount, plural, one {dato} other {datoer}} ikke ledige."
+}
diff --git a/packages/@fds-design/calendar/intl/de-DE.json b/packages/@fds-design/calendar/intl/de-DE.json
new file mode 100644
index 0000000..a851aa4
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/de-DE.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Ausgewählte(s) {selectedCount, plural, one {Datum} other {Daten}} nicht verfügbar."
+}
diff --git a/packages/@fds-design/calendar/intl/el-GR.json b/packages/@fds-design/calendar/intl/el-GR.json
new file mode 100644
index 0000000..8d0da49
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/el-GR.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Η επιλεγμένη ημερομηνία δεν είναι διαθέσιμη} other {Οι επιλεγμένες ημερομηνίες δεν είναι διαθέσιμες}}."
+}
diff --git a/packages/@fds-design/calendar/intl/en-US.json b/packages/@fds-design/calendar/intl/en-US.json
new file mode 100644
index 0000000..afa5ea7
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/en-US.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Selected {selectedCount, plural, one {date} other {dates}} unavailable."
+}
diff --git a/packages/@fds-design/calendar/intl/es-ES.json b/packages/@fds-design/calendar/intl/es-ES.json
new file mode 100644
index 0000000..7fa5142
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/es-ES.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {La fecha seleccionada no está disponible} other {Las fechas seleccionadas no están disponibles}}."
+}
diff --git a/packages/@fds-design/calendar/intl/et-EE.json b/packages/@fds-design/calendar/intl/et-EE.json
new file mode 100644
index 0000000..e206f1d
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/et-EE.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Valitud {selectedCount, plural, one {kuupäev} other {kuupäevad}} pole saadaval."
+}
diff --git a/packages/@fds-design/calendar/intl/fi-FI.json b/packages/@fds-design/calendar/intl/fi-FI.json
new file mode 100644
index 0000000..d6aa734
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/fi-FI.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Valittu päivämäärä ei ole} other {Valitut päivämäärät eivät ole}} saatavilla."
+}
diff --git a/packages/@fds-design/calendar/intl/fr-FR.json b/packages/@fds-design/calendar/intl/fr-FR.json
new file mode 100644
index 0000000..69ebec8
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/fr-FR.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {La date sélectionnée est indisponible} other {Les dates sélectionnées sont indisponibles}}."
+}
diff --git a/packages/@fds-design/calendar/intl/he-IL.json b/packages/@fds-design/calendar/intl/he-IL.json
new file mode 100644
index 0000000..31103cf
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/he-IL.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "נבחר {selectedCount, plural, one {תאריך} other {תאריכים}} אינו זמין."
+}
diff --git a/packages/@fds-design/calendar/intl/hr-HR.json b/packages/@fds-design/calendar/intl/hr-HR.json
new file mode 100644
index 0000000..408566b
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/hr-HR.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Odabrani datum nije dostupan} other {Odabrani datumi nisu dostupni}}."
+}
diff --git a/packages/@fds-design/calendar/intl/hu-HU.json b/packages/@fds-design/calendar/intl/hu-HU.json
new file mode 100644
index 0000000..6a28eef
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/hu-HU.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "A kijelölt {selectedCount, plural, one {dátum nem érhető el} other {dátumok nem érhetőek el}}."
+}
diff --git a/packages/@fds-design/calendar/intl/it-IT.json b/packages/@fds-design/calendar/intl/it-IT.json
new file mode 100644
index 0000000..0f784d1
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/it-IT.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Data selezionata non disponibile} other {Date selezionate non disponibili}}."
+}
diff --git a/packages/@fds-design/calendar/intl/ja-JP.json b/packages/@fds-design/calendar/intl/ja-JP.json
new file mode 100644
index 0000000..cc8747f
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/ja-JP.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "選択した{selectedCount, plural, one {日付} other {日付}}は使用できません。"
+}
diff --git a/packages/@fds-design/calendar/intl/ko-KR.json b/packages/@fds-design/calendar/intl/ko-KR.json
new file mode 100644
index 0000000..68a57ee
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/ko-KR.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "선택한 {selectedCount, plural, one {일자를} other {일자를}} 사용할 수 없습니다."
+}
diff --git a/packages/@fds-design/calendar/intl/lt-LT.json b/packages/@fds-design/calendar/intl/lt-LT.json
new file mode 100644
index 0000000..75247ac
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/lt-LT.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Datos} other {Datų}} pasirinkimas negalimas."
+}
diff --git a/packages/@fds-design/calendar/intl/lv-LV.json b/packages/@fds-design/calendar/intl/lv-LV.json
new file mode 100644
index 0000000..40222d7
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/lv-LV.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Atlasītais(-ie) {selectedCount, plural, one {date} other {dates}} nav pieejams(-i)."
+}
diff --git a/packages/@fds-design/calendar/intl/nb-NO.json b/packages/@fds-design/calendar/intl/nb-NO.json
new file mode 100644
index 0000000..ef61a98
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/nb-NO.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Valgt(e) {selectedCount, plural, one {dato} other {datoer}} er utilgjengelig."
+}
diff --git a/packages/@fds-design/calendar/intl/nl-NL.json b/packages/@fds-design/calendar/intl/nl-NL.json
new file mode 100644
index 0000000..4b4b6c6
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/nl-NL.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Geselecteerde {selectedCount, plural, one {datum} other {datums}} niet beschikbaar."
+}
diff --git a/packages/@fds-design/calendar/intl/pl-PL.json b/packages/@fds-design/calendar/intl/pl-PL.json
new file mode 100644
index 0000000..2a7f937
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/pl-PL.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Wybrana data jest niedostępna} other {Wybrane daty są niedostępne}}."
+}
diff --git a/packages/@fds-design/calendar/intl/pt-BR.json b/packages/@fds-design/calendar/intl/pt-BR.json
new file mode 100644
index 0000000..c791afa
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/pt-BR.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Data} other {Datas}} selecionada(s) indisponível(is)."
+}
diff --git a/packages/@fds-design/calendar/intl/pt-PT.json b/packages/@fds-design/calendar/intl/pt-PT.json
new file mode 100644
index 0000000..2847cf9
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/pt-PT.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "A(s) {selectedCount, plural, one {data} other {datas}} selecionada(s) não está(ão) disponível/disponível(eis)."
+}
diff --git a/packages/@fds-design/calendar/intl/ro-RO.json b/packages/@fds-design/calendar/intl/ro-RO.json
new file mode 100644
index 0000000..4243a8d
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/ro-RO.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Data selectată nu este disponibilă} other {Datele selectate nu sunt disponibile}}."
+}
diff --git a/packages/@fds-design/calendar/intl/ru-RU.json b/packages/@fds-design/calendar/intl/ru-RU.json
new file mode 100644
index 0000000..75b4903
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/ru-RU.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Выбранные {selectedCount, plural, one {дата} other {даты}} недоступны."
+}
diff --git a/packages/@fds-design/calendar/intl/sk-SK.json b/packages/@fds-design/calendar/intl/sk-SK.json
new file mode 100644
index 0000000..8363a1d
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/sk-SK.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Vybratý dátum} other {Vybraté dátumy}}: nedostupné."
+}
diff --git a/packages/@fds-design/calendar/intl/sl-SI.json b/packages/@fds-design/calendar/intl/sl-SI.json
new file mode 100644
index 0000000..de22866
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/sl-SI.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Izbrano {selectedCount, plural, one {date} other {dates}} ni na voljo."
+}
diff --git a/packages/@fds-design/calendar/intl/sr-SP.json b/packages/@fds-design/calendar/intl/sr-SP.json
new file mode 100644
index 0000000..db94b40
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/sr-SP.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Izabrani {selectedCount, plural, one {date} other {dates}} nije dostupan."
+}
diff --git a/packages/@fds-design/calendar/intl/sv-SE.json b/packages/@fds-design/calendar/intl/sv-SE.json
new file mode 100644
index 0000000..c0734d8
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/sv-SE.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Valt datum är inte tillgängligt.} other {Valda datum är inte tillgängliga.}}"
+}
diff --git a/packages/@fds-design/calendar/intl/tr-TR.json b/packages/@fds-design/calendar/intl/tr-TR.json
new file mode 100644
index 0000000..d48936d
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/tr-TR.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "Seçilen {selectedCount, plural, one {tarih} other {tarihler}} müsait değil."
+}
diff --git a/packages/@fds-design/calendar/intl/uk-UA.json b/packages/@fds-design/calendar/intl/uk-UA.json
new file mode 100644
index 0000000..21cc7ee
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/uk-UA.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "{selectedCount, plural, one {Вибрана дата недоступна} other {Вибрані дати недоступні}}."
+}
diff --git a/packages/@fds-design/calendar/intl/zh-CN.json b/packages/@fds-design/calendar/intl/zh-CN.json
new file mode 100644
index 0000000..06369c6
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/zh-CN.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "选定的 {selectedCount, plural, one {个日期} other {个日期}} 不可用。"
+}
diff --git a/packages/@fds-design/calendar/intl/zh-TW.json b/packages/@fds-design/calendar/intl/zh-TW.json
new file mode 100644
index 0000000..192e8f6
--- /dev/null
+++ b/packages/@fds-design/calendar/intl/zh-TW.json
@@ -0,0 +1,3 @@
+{
+ "invalidSelection": "所選的{selectedCount, plural, one {日期} other {日期}}無法使用。"
+}
diff --git a/packages/@fds-design/calendar/package.json b/packages/@fds-design/calendar/package.json
new file mode 100644
index 0000000..299814f
--- /dev/null
+++ b/packages/@fds-design/calendar/package.json
@@ -0,0 +1,70 @@
+{
+ "name": "@fds-design/calendar",
+ "version": "3.5.0",
+ "description": "Spectrum UI components in React",
+ "license": "Apache-2.0",
+ "main": "dist/main.js",
+ "module": "dist/module.js",
+ "exports": {
+ "types": "./dist/types.d.ts",
+ "import": "./dist/import.mjs",
+ "require": "./dist/main.js"
+ },
+ "types": "dist/types.d.ts",
+ "source": "src/index.ts",
+ "files": [
+ "dist",
+ "src"
+ ],
+ "sideEffects": [
+ "*.css"
+ ],
+ "targets": {
+ "targets": {
+ "main": {
+ "includeNodeModules": [
+ "file:../../fds-css"
+ ]
+ },
+ "module": {
+ "includeNodeModules": [
+ "file:../../fds-css"
+ ]
+ }
+}
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/bcgov/fds-design"
+ },
+ "dependencies": {
+ "@internationalized/date": "^3.6.0",
+ "@react-aria/calendar": "^3.6.0",
+ "@react-aria/focus": "^3.19.0",
+ "@react-aria/i18n": "^3.12.4",
+ "@react-aria/interactions": "^3.22.5",
+ "@react-aria/utils": "^3.26.0",
+ "@react-aria/visually-hidden": "^3.8.18",
+ "@react-spectrum/button": "file:../../button",
+ "@react-spectrum/label": "file:../../label",
+ "@react-spectrum/utils": "file:../../utils",
+ "@react-stately/calendar": "^3.6.0",
+ "@react-types/button": "^3.10.1",
+ "@react-types/calendar": "^3.5.0",
+ "@react-types/shared": "^3.26.0",
+ "@spectrum-icons/ui": "^3.6.11",
+ "@swc/helpers": "^0.5.0"
+ },
+ "devDependencies": {
+ "@adobe/spectrum-css-temp": "3.0.0-alpha.1",
+ "@react-spectrum/test-utils-internal": "file:../../test-utils-internal"
+ },
+ "peerDependencies": {
+ "@react-spectrum/provider": "file:../../provider",
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+ "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/packages/@fds-design/calendar/src/Calendar.tsx b/packages/@fds-design/calendar/src/Calendar.tsx
new file mode 100644
index 0000000..cc161bb
--- /dev/null
+++ b/packages/@fds-design/calendar/src/Calendar.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {CalendarBase} from './CalendarBase';
+import {createCalendar} from '@internationalized/date';
+import {createDOMRef} from '../../utils';
+import {DateValue, SpectrumCalendarProps} from '@react-types/calendar';
+import {FocusableRef} from '@react-types/shared';
+import React, {ReactElement, useImperativeHandle, useMemo, useRef} from 'react';
+import {useCalendar} from '@react-aria/calendar';
+import {useCalendarState} from '@react-stately/calendar';
+import {useLocale} from '@react-aria/i18n';
+import {useProviderProps} from '../../provider';
+
+/**
+ * Calendars display a grid of days in one or more months and allow users to select a single date.
+ */
+export const Calendar = React.forwardRef(function Calendar
+ {i === 0 &&
+
+ {direction === 'rtl' ?
+ }
+
+ {direction === 'rtl' ?
+ }
+
+ );
+
+ calendars.push(
+ + {monthDateFormatter.format(d.toDate(state.timeZone))} +
+ {i === visibleMonths - 1 && +
+ {/* Add a screen reader only description of the entire visible range rather than
+ * a separate heading above each month grid. This is placed first in the DOM order
+ * so that it is the first thing a touch screen reader user encounters.
+ * In addition, VoiceOver on iOS does not announce the aria-label of the grid
+ * elements, so the aria-label of the Calendar is included here as well. */}
+
+
+
+
+ {state.isValueInvalid &&
+
+ );
+}
diff --git a/packages/@fds-design/calendar/src/CalendarCell.tsx b/packages/@fds-design/calendar/src/CalendarCell.tsx
new file mode 100644
index 0000000..555c8c7
--- /dev/null
+++ b/packages/@fds-design/calendar/src/CalendarCell.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaCalendarCellProps, useCalendarCell} from '@react-aria/calendar';
+import {CalendarDate, getDayOfWeek, isSameDay, isSameMonth, isToday} from '@internationalized/date';
+import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+import {classNames} from '../../utils';
+import {mergeProps} from '@react-aria/utils';
+import React, {useRef} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
+import {useFocusRing} from '@react-aria/focus';
+import {useHover} from '@react-aria/interactions';
+import {useLocale} from '@react-aria/i18n';
+
+interface CalendarCellProps extends AriaCalendarCellProps {
+ state: CalendarState | RangeCalendarState,
+ currentMonth: CalendarDate
+}
+
+export function CalendarCell({state, currentMonth, ...props}: CalendarCellProps) {
+ let ref = useRef{calendarProps['aria-label']}
+
+ {titles}
+
+
+ {calendars}
+
+ {/* For touch screen readers, add a visually hidden next button after the month grid
+ * so it's easy to navigate after reaching the end without going all the way
+ * back to the start of the month. */}
+ | + + {day} + + | + ))} +
|---|
| + ))} + |
{Object.keys(props).join(' ')} |
)}
+