diff --git a/Makefile b/Makefile index 9760379367b..f44e45a5eb1 100644 --- a/Makefile +++ b/Makefile @@ -92,7 +92,8 @@ publish: build yarn publish publish-nightly: build - git update-index --refresh + rm -f .git/index + git reset yarn version:nightly yarn publish:nightly @@ -124,7 +125,7 @@ website-production: mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip check-examples: - node scripts/extractExamples.mjs + node scripts/extractExamplesS2.mjs yarn tsc --project dist/docs-examples/tsconfig.json starter: diff --git a/bin/imports.js b/bin/imports.js index 3d3707257ee..bc792f2692a 100644 --- a/bin/imports.js +++ b/bin/imports.js @@ -20,7 +20,9 @@ const devDependencies = new Set([ '@adobe/spectrum-css-temp', '@react-spectrum/style-macro-s1', '@parcel/macros', - '@adobe/spectrum-tokens' + '@adobe/spectrum-tokens', + 'playwright', + 'axe-playwright' ]); module.exports = { diff --git a/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx b/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx index 5f231dc7c20..7883b19b2d5 100644 --- a/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx @@ -13,7 +13,7 @@ import {AsyncPickerStory, AsyncPickerStoryType, ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithAvatars, WithIcons} from '../stories/Picker.stories'; import {expect} from '@storybook/jest'; import type {Meta, StoryObj} from '@storybook/react'; -import {Picker} from '../src'; +import {Picker, PickerItem} from '../src'; import {userEvent, waitFor, within} from '@storybook/test'; const meta: Meta> = { @@ -39,6 +39,19 @@ export const Default: Story = { } }; +export const isQuiet: Story = { + render: () => ( + + Chocolate + Mint + Strawberry + Vanilla + Chocolate Chip Cookie Dough + + ), + play: Default.play +}; + export const WithSections: Story = { ...Sections, play: Default.play diff --git a/packages/@react-spectrum/s2/intl/sr-SP.json b/packages/@react-spectrum/s2/intl/sr-SP.json index 70fa7c74cb5..478e13e07df 100644 --- a/packages/@react-spectrum/s2/intl/sr-SP.json +++ b/packages/@react-spectrum/s2/intl/sr-SP.json @@ -26,7 +26,7 @@ "notificationbadge.indicatorOnly": "Nova aktivnost", "notificationbadge.plus": "{notifications}+", "picker.placeholder": "Izaberite...", - "picker.selectedCount": "{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}", + "picker.selectedCount": "{count, plural, =0 {Nije izabrana nijedna stavka} one {Izabrana je # stavka} other {Izabrano je # stavki}}", "slider.maximum": "Najviše", "slider.minimum": "Najmanje", "table.cancel": "Otkaži", diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Archive_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Archive_20_N.svg index e74836599e7..220983c6f4a 100644 --- a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Archive_20_N.svg +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Archive_20_N.svg @@ -1,5 +1,5 @@ - - + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_HeartFilled_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_HeartFilled_20_N.svg new file mode 100644 index 00000000000..c08a1a19d2a --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_HeartFilled_20_N.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_MediaOffline_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_MediaOffline_20_N.svg new file mode 100644 index 00000000000..5c6ba2887ab --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_MediaOffline_20_N.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_SpeedFast_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_SpeedFast_20_N.svg index 02a5f1c9a9a..5dc0d35b2d4 100644 --- a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_SpeedFast_20_N.svg +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_SpeedFast_20_N.svg @@ -1,6 +1,6 @@ - - - - + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagBold_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagBold_20_N.svg new file mode 100644 index 00000000000..85c7363213c --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagBold_20_N.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagItalic_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagItalic_20_N.svg new file mode 100644 index 00000000000..298f4f44520 --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagItalic_20_N.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagStrikeThrough_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagStrikeThrough_20_N.svg new file mode 100644 index 00000000000..a66eacb1bc9 --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagStrikeThrough_20_N.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagUnderline_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagUnderline_20_N.svg new file mode 100644 index 00000000000..ee09ce006e2 --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_TagUnderline_20_N.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Wallet_20_N.svg b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Wallet_20_N.svg new file mode 100644 index 00000000000..c9d9cc6b7c4 --- /dev/null +++ b/packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Wallet_20_N.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_160.svg index 60517145502..b5af8e54f40 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_160.svg @@ -1,43 +1,43 @@ - + - + - + - + - + - + - - + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_48.svg index 8f942c6b0b4..497da6c6088 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_48.svg @@ -1,43 +1,51 @@ - + - + - + - + - + - + - - + + + + + + + + + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_96.svg index 2951b7c5f8b..8e409637141 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_brightnessContrast_generic1_96.svg @@ -1,43 +1,51 @@ - + - + - + - + - + - + - - + + + + + + + + + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_160.svg index 436d4866dac..c696ac4909d 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_160.svg @@ -1,43 +1,43 @@ - + - + - + - + - + - + - - + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_48.svg index 0b594e9a197..a54e46d9548 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_48.svg @@ -1,43 +1,43 @@ - + - + - + - + - + - + - - + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_96.svg index 6837db7b883..a2f7b99be68 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_download_generic1_96.svg @@ -1,43 +1,43 @@ - + - + - + - + - + - - + + - - + + - - - - - - - - - + + + + + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_160.svg index e9470ad70aa..ca907ec7e3f 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_160.svg @@ -1,43 +1,43 @@ - + - + - + - + - + - + - - + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_48.svg index 920416d23c0..745df8a76e2 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_48.svg @@ -1,43 +1,43 @@ - + - + - + - + - + - + - - + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_96.svg index ecd7e950143..474b1a9b56a 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/S2_fill_upload_generic1_96.svg @@ -1,43 +1,43 @@ - + - + - + - + - + - + - - + + - - + + - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_160.svg index c03c6e383ea..825ee7ef5ea 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_160.svg @@ -1,37 +1,37 @@ - + - + - + - + - + - - + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_48.svg index 7d140a994a9..a11caf22896 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_48.svg @@ -1,37 +1,45 @@ - + - + - + - + - - + + - - + + + + + + + + + + - - - - - - - + + + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_96.svg index e2cb835196b..17fb17d2275 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_brightnessContrast_generic2_96.svg @@ -1,37 +1,45 @@ - + - + - + - + - + - - + + + + + + + + + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_160.svg index d67d6875712..55380564848 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_160.svg @@ -1,37 +1,37 @@ - + - + - + - + - + - - + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_48.svg index 4d7b045a5b3..8c38cf58a74 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_48.svg @@ -1,37 +1,37 @@ - + - + - + - + - + - - + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_96.svg index 0e443473a9b..7aa842ee354 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_download_generic2_96.svg @@ -1,37 +1,37 @@ - + - + - + - + - + - - + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_160.svg index 33a23377150..c656996aabc 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_160.svg @@ -1,37 +1,37 @@ - + - + - + - + - + - - + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_48.svg index 6d1eb45cbc1..4aa6888c185 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_48.svg @@ -1,37 +1,37 @@ - + - + - + - + - + - - + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_96.svg index 8b470bcaccf..f5669b83798 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/S2_fill_upload_generic2_96.svg @@ -1,37 +1,37 @@ - + - + - + - + - + - - + + - - + + - - - - + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoInternetConnection.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoInternetConnection.tsx new file mode 100644 index 00000000000..45968905846 --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoInternetConnection.tsx @@ -0,0 +1,31 @@ +/* + * Copyright 2024 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 NoInternetConnection_L from 'illustration:./S2_lin_noInternetConnection_160.svg'; +import NoInternetConnection_M from 'illustration:./S2_lin_noInternetConnection_96.svg'; +import NoInternetConnection_S from 'illustration:./S2_lin_noInternetConnection_48.svg'; +import {ReactNode} from 'react'; +import {IconProps, IllustrationContext} from '../../src/Icon'; +import {useContextProps} from 'react-aria-components'; + +export default function NoInternetConnection(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode { + [props] = useContextProps(props, null, IllustrationContext); + let {size = 'M', ...otherProps} = props; + switch (size) { + case 'L': + return ; + case 'S': + return ; + case 'M': + return ; + } +} diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_3D_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_3D_160.svg index 75055d16658..23f378395dd 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_3D_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_3D_160.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_160.svg index 33c4b5d40ca..a1bf9d79261 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_160.svg @@ -1,13 +1,7 @@ - - - - - - - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_48.svg index 107137a33af..b41d6e6ae57 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_48.svg @@ -1,18 +1,7 @@ - - - - - - - - - - - - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_96.svg index 1b83c84e746..735dd835792 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_AIGenerateImage_96.svg @@ -1,13 +1,7 @@ - - - - - - - - - - - + + + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_160.svg index f9762a3f682..328512266e9 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_160.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_48.svg index 99672c76b4e..544d9a816ab 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_48.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_96.svg index 595cef5d366..f3b75f8873d 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_assets_96.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_160.svg index 5894fccae4c..1d5feb5486a 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_160.svg @@ -1,3 +1,4 @@ - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_48.svg index af6298de234..9af4f9f27fb 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_48.svg @@ -1,3 +1,4 @@ - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_96.svg index a3f9f892353..5fa59430b69 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudStateDisconnected_96.svg @@ -1,3 +1,4 @@ - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudUpload_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudUpload_48.svg index 326b5f4cd3f..733324e2058 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudUpload_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_cloudUpload_48.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_160.svg index e81728c43d6..13003f5b2a6 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_160.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_48.svg index f22cf7714f3..04e94b20810 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_48.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_96.svg index a0ffe84e4d4..7f66d564fb7 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_download_96.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_160.svg index d393e9eca40..837b14dd180 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_160.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_48.svg index 91aa79e5be0..c72e9a41f46 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_48.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_96.svg index 61875e09dd5..ce4ff77751c 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_error_96.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_160.svg index faf3fafe779..febc8289914 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_160.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_48.svg index d1ffc6d880b..98634b160ff 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_48.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_96.svg index 4c14bde11bf..91cf7cb9a1c 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_imageStack_96.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_160.svg new file mode 100644 index 00000000000..5cc66c378d6 --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_160.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_48.svg new file mode 100644 index 00000000000..7c0c499bd72 --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_48.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_96.svg new file mode 100644 index 00000000000..c0509002a49 --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noInternetConnection_96.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_160.svg index f218e819657..b2059d74d36 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_160.svg @@ -1,3 +1,4 @@ - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_48.svg index 75ded657b94..4b2d574f3f0 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_48.svg @@ -1,3 +1,4 @@ - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_96.svg index f2329d15f44..54e72e30882 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_noSearchResults_96.svg @@ -1,3 +1,4 @@ - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_160.svg index b66b8839dae..a417fa53b4e 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_160.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_48.svg index 4d7b9aedb59..6117a73e743 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_48.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_96.svg index 8da5112df6c..8b889777dde 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_search_96.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_160.svg new file mode 100644 index 00000000000..a32cb29b27c --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_160.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_48.svg new file mode 100644 index 00000000000..ca765ef2dbd --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_48.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_96.svg new file mode 100644 index 00000000000..c6b36a0b6cb --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_socialPost_96.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_text_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_text_160.svg index 13d94535718..70996088d08 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_text_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_text_160.svg @@ -1,7 +1,3 @@ - - - - - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_160.svg index de6eae72632..3b941672f86 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_160.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_48.svg index fd62e4725a7..ac335c5ffc8 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_48.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_96.svg index d6b9ff32889..b0b4d7935c1 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_trash_96.svg @@ -1,3 +1,5 @@ - + + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_160.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_160.svg index 4bc86786ce1..0198c500e0c 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_160.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_160.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_48.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_48.svg index d338b893b41..7377a4dadc9 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_48.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_48.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_96.svg b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_96.svg index e246da404a8..8af841899f1 100644 --- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_96.svg +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/S2_lin_upload_96.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/SocialPost.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/SocialPost.tsx new file mode 100644 index 00000000000..f7282356d14 --- /dev/null +++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/SocialPost.tsx @@ -0,0 +1,31 @@ +/* + * Copyright 2024 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 {ReactNode} from 'react'; +import {IconProps, IllustrationContext} from '../../src/Icon'; +import SocialPost_L from 'illustration:./S2_lin_socialPost_160.svg'; +import SocialPost_M from 'illustration:./S2_lin_socialPost_96.svg'; +import SocialPost_S from 'illustration:./S2_lin_socialPost_48.svg'; +import {useContextProps} from 'react-aria-components'; + +export default function SocialPost(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode { + [props] = useContextProps(props, null, IllustrationContext); + let {size = 'M', ...otherProps} = props; + switch (size) { + case 'L': + return ; + case 'S': + return ; + case 'M': + return ; + } +} diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx index de31eaadf01..0cf45380aaf 100644 --- a/packages/@react-spectrum/s2/src/Image.tsx +++ b/packages/@react-spectrum/s2/src/Image.tsx @@ -60,7 +60,16 @@ export interface ImageProps extends UnsafeStyles, SlotProps { * A group of images to coordinate between, matching the group passed to the `` component. * If not provided, the default image group is used. */ - group?: ImageGroup + group?: ImageGroup, + /** + * Child `` elements defining alternate versions of an image for different display/device scenarios. + */ + children?: ReactNode, + /** + * Associates the image with a microdata object. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop). + */ + itemProp?: string } interface ImageContextValue extends ImageProps { @@ -167,7 +176,9 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar referrerPolicy, slot, width, - height + height, + children, + itemProp } = props; let hidden = (props as ImageContextValue).hidden; @@ -238,31 +249,45 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar let errorState = !isSkeleton && state === 'error' && renderError?.(); let isRevealed = state === 'revealed' && !isSkeleton; let isTransitioning = isRevealed && loadTime > 200; - return useMemo(() => hidden ? null : ( -
- {errorState} - {!errorState && ( - {alt} - )} -
- ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning]); + return useMemo(() => { + let img = ( + {alt} + ); + + if (children) { + img = ( + + {children} + {img} + + ); + } + + return hidden ? null : ( +
+ {errorState} + {!errorState && img} +
+ ); + }, [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning, children, itemProp]); }); function getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record { diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx index 0a5350e2826..483bde44805 100644 --- a/packages/@react-spectrum/s2/src/Picker.tsx +++ b/packages/@react-spectrum/s2/src/Picker.tsx @@ -92,7 +92,6 @@ export interface PickerStyleProps { size?: 'S' | 'M' | 'L' | 'XL', /** * Whether the picker should be displayed with a quiet style. - * @private */ isQuiet?: boolean } diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx index f3c0da4901c..19e421078da 100644 --- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx +++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx @@ -21,6 +21,7 @@ import { Provider } from 'react-aria-components'; import {DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Orientation} from '@react-types/shared'; +import {forwardRefType} from './types'; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {IllustrationContext} from '../src/Icon'; import {pressScale} from './pressScale'; @@ -33,7 +34,7 @@ export interface SelectBoxGroupProps extends StyleProps, Omit /** * The SelectBox elements contained within the SelectBoxGroup. */ - children: ReactNode, + children: ReactNode | ((item: T) => ReactNode), /** * The layout direction of the content in each SelectBox. * @default 'vertical' @@ -384,7 +385,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode { /** * SelectBoxGroup allows users to select one or more options from a list. */ -export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef) { +export const SelectBoxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef) { [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext); let { diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 05dd53c7ee4..58a1ebc837b 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -58,7 +58,7 @@ import Chevron from '../ui-icons/Chevron'; import Close from '../s2wf-icons/S2_Icon_Close_20_N.svg'; import {ColumnSize} from '@react-types/table'; import {CustomDialog, DialogContainer} from '..'; -import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared'; +import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LinkDOMProps, LoadingState, Node} from '@react-types/shared'; import {getActiveElement, getOwnerDocument, useLayoutEffect, useObjectRef} from '@react-aria/utils'; import {GridNode} from '@react-types/grid'; import {IconContext} from './Icon'; @@ -1446,7 +1446,7 @@ const row = style({ forcedColorAdjust: 'none' }); -export interface RowProps extends Pick, 'id' | 'columns' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes> {} +export interface RowProps extends Pick, 'id' | 'columns' | 'isDisabled' | 'onAction' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>, LinkDOMProps {} /** * A row within a ``. diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Accessibility.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Accessibility.avif new file mode 100644 index 00000000000..fe31b96376a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Accessibility.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Accordion.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Accordion.avif new file mode 100644 index 00000000000..9b051e06a26 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Accordion.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionBar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionBar.avif new file mode 100644 index 00000000000..67ade05f1fa Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionButton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionButton.avif new file mode 100644 index 00000000000..76e54008ca0 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionGroup.avif new file mode 100644 index 00000000000..4189d1edb39 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ActionMenu.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionMenu.avif new file mode 100644 index 00000000000..3f420d9d037 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ActionMenu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Adobe.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Adobe.avif new file mode 100644 index 00000000000..d933f62184b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Adobe.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Autocomplete.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Autocomplete.avif new file mode 100644 index 00000000000..7ba086d7d6e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Autocomplete.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Avatar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Avatar.avif new file mode 100644 index 00000000000..53bddfaa6dd Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Avatar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/AvatarGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/AvatarGroup.avif new file mode 100644 index 00000000000..a575121125b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/AvatarGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Badge.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Badge.avif new file mode 100644 index 00000000000..4d75bedebed Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Badge.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Breadcrumbs.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Breadcrumbs.avif new file mode 100644 index 00000000000..08787e88bf5 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Breadcrumbs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Button.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Button.avif new file mode 100644 index 00000000000..68f0c3bbe78 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Button.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ButtonGroup.avif new file mode 100644 index 00000000000..10a1eef3f51 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Calendar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Calendar.avif new file mode 100644 index 00000000000..259c8ababec Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Calendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Card.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Card.avif new file mode 100644 index 00000000000..f159193839d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Card.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/CardView.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/CardView.avif new file mode 100644 index 00000000000..360af533224 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/CardView.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Checkbox.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Checkbox.avif new file mode 100644 index 00000000000..30ebe0b071f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Checkbox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/CheckboxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/CheckboxGroup.avif new file mode 100644 index 00000000000..1a6d4d5a22a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/CheckboxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ClientSideRouting.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ClientSideRouting.avif new file mode 100644 index 00000000000..f2f65151a45 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ClientSideRouting.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Clipboard.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Clipboard.avif new file mode 100644 index 00000000000..43355b5b624 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Clipboard.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Collection.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Collection.avif new file mode 100644 index 00000000000..876696ce2a9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Collection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorArea.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorArea.avif new file mode 100644 index 00000000000..9f70d1b42fe Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorField.avif new file mode 100644 index 00000000000..4f4924a3a8c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorPicker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorPicker.avif new file mode 100644 index 00000000000..8607f7c180d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorPicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSlider.avif new file mode 100644 index 00000000000..2e1c8667442 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatch.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatch.avif new file mode 100644 index 00000000000..71786db5409 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatchPicker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatchPicker.avif new file mode 100644 index 00000000000..d33dadc5ee9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorSwatchPicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ColorWheel.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorWheel.avif new file mode 100644 index 00000000000..61c1dd7b853 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ColorWheel.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ComboBox.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ComboBox.avif new file mode 100644 index 00000000000..d6b66984642 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ComboBox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ContextualHelp.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ContextualHelp.avif new file mode 100644 index 00000000000..46c18c81391 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ContextualHelp.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DateField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DateField.avif new file mode 100644 index 00000000000..f71e3c479cb Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DateField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DatePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DatePicker.avif new file mode 100644 index 00000000000..00fba252914 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DatePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DateRangePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DateRangePicker.avif new file mode 100644 index 00000000000..e0563f317ab Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DateRangePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Dialog.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Dialog.avif new file mode 100644 index 00000000000..dbf26131dc2 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Dialog.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Disclosure.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Disclosure.avif new file mode 100644 index 00000000000..ae358f3eeda Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Disclosure.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Divider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Divider.avif new file mode 100644 index 00000000000..a1504b00e7e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Divider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DragAndDrop.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DragAndDrop.avif new file mode 100644 index 00000000000..cbf58579c2b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DragAndDrop.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/DropZone.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/DropZone.avif new file mode 100644 index 00000000000..5ce86f2e733 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/DropZone.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/FileTrigger.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/FileTrigger.avif new file mode 100644 index 00000000000..ff2d710658c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/FileTrigger.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/FocusRing.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/FocusRing.avif new file mode 100644 index 00000000000..6564d10d83c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/FocusRing.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/FocusScope.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/FocusScope.avif new file mode 100644 index 00000000000..0d28ebdf9f1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/FocusScope.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Forms.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Forms.avif new file mode 100644 index 00000000000..baaf507f2ab Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Forms.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Frameworks.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Frameworks.avif new file mode 100644 index 00000000000..f2f65151a45 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Frameworks.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/GettingStarted.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/GettingStarted.avif new file mode 100644 index 00000000000..1920c559f78 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/GettingStarted.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Group.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Group.avif new file mode 100644 index 00000000000..69607e69746 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Group.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Home.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Home.avif new file mode 100644 index 00000000000..3332838a1e8 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Home.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Hover.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Hover.avif new file mode 100644 index 00000000000..670e410c245 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Hover.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Icons.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Icons.avif new file mode 100644 index 00000000000..e23769b1d6e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Icons.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/IllustratedMessage.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/IllustratedMessage.avif new file mode 100644 index 00000000000..18ddaeaa551 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/IllustratedMessage.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Illustrations.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Illustrations.avif new file mode 100644 index 00000000000..35c04e39828 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Illustrations.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Image.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Image.avif new file mode 100644 index 00000000000..61dc90c53b6 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Image.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/InlineAlert.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/InlineAlert.avif new file mode 100644 index 00000000000..98e9b5cd736 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/InlineAlert.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Keyboard.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Keyboard.avif new file mode 100644 index 00000000000..9d28f20ce41 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Keyboard.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Link.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Link.avif new file mode 100644 index 00000000000..06e298b15c9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Link.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/LinkButton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/LinkButton.avif new file mode 100644 index 00000000000..d20f22db53c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/LinkButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/McpServer.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/McpServer.avif new file mode 100644 index 00000000000..069bc95d4d4 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/McpServer.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Menu.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Menu.avif new file mode 100644 index 00000000000..d4570ca92c1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Menu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Meter.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Meter.avif new file mode 100644 index 00000000000..1daa9c50d42 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Meter.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Migrating.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Migrating.avif new file mode 100644 index 00000000000..8bbe86cb145 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Migrating.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/MigratingToSpectrum2.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/MigratingToSpectrum2.avif new file mode 100644 index 00000000000..8bbe86cb145 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/MigratingToSpectrum2.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Move.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Move.avif new file mode 100644 index 00000000000..a364037c235 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Move.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/NumberField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/NumberField.avif new file mode 100644 index 00000000000..2bf95bce5eb Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/NumberField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Picker.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Picker.avif new file mode 100644 index 00000000000..38220922209 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Picker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Popover.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Popover.avif new file mode 100644 index 00000000000..e05825c7b15 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Popover.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Press.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Press.avif new file mode 100644 index 00000000000..f59caa6cfbc Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Press.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressBar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressBar.avif new file mode 100644 index 00000000000..89cf90c0ac4 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressCircle.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressCircle.avif new file mode 100644 index 00000000000..b3e09277b33 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ProgressCircle.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Provider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Provider.avif new file mode 100644 index 00000000000..ab95405a454 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Provider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/RadioGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/RadioGroup.avif new file mode 100644 index 00000000000..3dbf1d1d010 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/RadioGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/RangeCalendar.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeCalendar.avif new file mode 100644 index 00000000000..120c47b41a8 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeCalendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/RangeSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeSlider.avif new file mode 100644 index 00000000000..1ee8609106d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/RangeSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Releases.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Releases.avif new file mode 100644 index 00000000000..43014b9ef3e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Releases.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/SearchField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/SearchField.avif new file mode 100644 index 00000000000..77f40e5cd24 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/SearchField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/SegmentedControl.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/SegmentedControl.avif new file mode 100644 index 00000000000..a5337493ba5 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/SegmentedControl.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/SelectBoxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/SelectBoxGroup.avif new file mode 100644 index 00000000000..5b2d004614d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/SelectBoxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Selection.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Selection.avif new file mode 100644 index 00000000000..2146736e3a2 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Selection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Skeleton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Skeleton.avif new file mode 100644 index 00000000000..985d0f8b9eb Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Skeleton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Slider.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Slider.avif new file mode 100644 index 00000000000..6aa3c5f62c8 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Slider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/StatusLight.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/StatusLight.avif new file mode 100644 index 00000000000..e1101354f62 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/StatusLight.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Style.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Style.avif new file mode 100644 index 00000000000..138fc00fabf Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Style.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/StyleMacro.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/StyleMacro.avif new file mode 100644 index 00000000000..a0d64a4456a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/StyleMacro.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Switch.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Switch.avif new file mode 100644 index 00000000000..9e8b60cb34b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Switch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Table.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Table.avif new file mode 100644 index 00000000000..3126b2b1b2e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Table.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Tabs.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Tabs.avif new file mode 100644 index 00000000000..1b96802cd57 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Tabs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TagGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TagGroup.avif new file mode 100644 index 00000000000..2b3bff9a13e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TagGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Testing.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Testing.avif new file mode 100644 index 00000000000..05c31ca7a7f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Testing.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TextArea.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TextArea.avif new file mode 100644 index 00000000000..c2131738468 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TextArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TextField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TextField.avif new file mode 100644 index 00000000000..15948949fd0 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TextField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/TimeField.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/TimeField.avif new file mode 100644 index 00000000000..e4df49f9975 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/TimeField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Toast.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Toast.avif new file mode 100644 index 00000000000..b909698c3be Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Toast.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButton.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButton.avif new file mode 100644 index 00000000000..3a38c01154d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButtonGroup.avif new file mode 100644 index 00000000000..4d1d7dac95d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/ToggleButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Tooltip.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Tooltip.avif new file mode 100644 index 00000000000..b93e61fb021 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Tooltip.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Tree.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Tree.avif new file mode 100644 index 00000000000..facd62adb50 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Tree.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/Utility.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/Utility.avif new file mode 100644 index 00000000000..8dccd8f1ccf Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/Utility.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/WhatsNew.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/WhatsNew.avif new file mode 100644 index 00000000000..1d28a3aab8d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/WhatsNew.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/dark/gradient-bg.avif b/packages/dev/s2-docs/assets/component-illustrations/dark/gradient-bg.avif new file mode 100644 index 00000000000..0cdefb2fb05 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/dark/gradient-bg.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Accessibility.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Accessibility.avif new file mode 100644 index 00000000000..afc755ac5a7 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Accessibility.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Accordion.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Accordion.avif new file mode 100644 index 00000000000..5444be9d5bb Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Accordion.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionBar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionBar.avif new file mode 100644 index 00000000000..13bced33bed Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionButton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionButton.avif new file mode 100644 index 00000000000..64036e945c9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionGroup.avif new file mode 100644 index 00000000000..e8dc552fd54 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ActionMenu.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ActionMenu.avif new file mode 100644 index 00000000000..b2c26754f14 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ActionMenu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Adobe.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Adobe.avif new file mode 100644 index 00000000000..699b6b01d56 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Adobe.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Autocomplete.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Autocomplete.avif new file mode 100644 index 00000000000..b97f9420e73 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Autocomplete.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Avatar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Avatar.avif new file mode 100644 index 00000000000..018e08d6fc5 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Avatar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/AvatarGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/AvatarGroup.avif new file mode 100644 index 00000000000..f2deba54ae1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/AvatarGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Badge.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Badge.avif new file mode 100644 index 00000000000..4a39232e0b6 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Badge.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Breadcrumbs.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Breadcrumbs.avif new file mode 100644 index 00000000000..f667b5e5596 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Breadcrumbs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Button.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Button.avif new file mode 100644 index 00000000000..d565d13616b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Button.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ButtonGroup.avif new file mode 100644 index 00000000000..a2c041d06ce Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Calendar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Calendar.avif new file mode 100644 index 00000000000..11f02509890 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Calendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Card.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Card.avif new file mode 100644 index 00000000000..64ecea88095 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Card.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/CardView.avif b/packages/dev/s2-docs/assets/component-illustrations/light/CardView.avif new file mode 100644 index 00000000000..8fcc28c5212 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/CardView.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Checkbox.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Checkbox.avif new file mode 100644 index 00000000000..7f20f7b548f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Checkbox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/CheckboxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/CheckboxGroup.avif new file mode 100644 index 00000000000..70aaa278779 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/CheckboxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ClientSideRouting.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ClientSideRouting.avif new file mode 100644 index 00000000000..39db9b53a29 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ClientSideRouting.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Clipboard.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Clipboard.avif new file mode 100644 index 00000000000..c6abe06ea7f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Clipboard.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Collection.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Collection.avif new file mode 100644 index 00000000000..4fd7a90fe11 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Collection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorArea.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorArea.avif new file mode 100644 index 00000000000..4210e3d96e0 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorField.avif new file mode 100644 index 00000000000..4d2e0e79c25 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorPicker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorPicker.avif new file mode 100644 index 00000000000..25b68b537a9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorPicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSlider.avif new file mode 100644 index 00000000000..728f7e140bd Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatch.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatch.avif new file mode 100644 index 00000000000..e119f6e37ba Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatchPicker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatchPicker.avif new file mode 100644 index 00000000000..c6781c29830 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorSwatchPicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ColorWheel.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ColorWheel.avif new file mode 100644 index 00000000000..3a0ee5307fc Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ColorWheel.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ComboBox.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ComboBox.avif new file mode 100644 index 00000000000..a3b5eded965 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ComboBox.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ContextualHelp.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ContextualHelp.avif new file mode 100644 index 00000000000..1ebf0934889 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ContextualHelp.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DateField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DateField.avif new file mode 100644 index 00000000000..75889ed5f45 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DateField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DatePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DatePicker.avif new file mode 100644 index 00000000000..b76bee53606 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DatePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DateRangePicker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DateRangePicker.avif new file mode 100644 index 00000000000..ae71fdc37fa Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DateRangePicker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Dialog.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Dialog.avif new file mode 100644 index 00000000000..39bc4be3be9 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Dialog.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Disclosure.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Disclosure.avif new file mode 100644 index 00000000000..0a350c85684 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Disclosure.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Divider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Divider.avif new file mode 100644 index 00000000000..5529b07ff4a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Divider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DragAndDrop.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DragAndDrop.avif new file mode 100644 index 00000000000..b124cf0047d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DragAndDrop.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/DropZone.avif b/packages/dev/s2-docs/assets/component-illustrations/light/DropZone.avif new file mode 100644 index 00000000000..da5e932391d Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/DropZone.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/FileTrigger.avif b/packages/dev/s2-docs/assets/component-illustrations/light/FileTrigger.avif new file mode 100644 index 00000000000..104140544ce Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/FileTrigger.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/FocusRing.avif b/packages/dev/s2-docs/assets/component-illustrations/light/FocusRing.avif new file mode 100644 index 00000000000..247f9d6ea23 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/FocusRing.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/FocusScope.avif b/packages/dev/s2-docs/assets/component-illustrations/light/FocusScope.avif new file mode 100644 index 00000000000..2c3dd8b824a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/FocusScope.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Forms.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Forms.avif new file mode 100644 index 00000000000..e9fcd010a7c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Forms.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Frameworks.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Frameworks.avif new file mode 100644 index 00000000000..39db9b53a29 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Frameworks.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/GettingStarted.avif b/packages/dev/s2-docs/assets/component-illustrations/light/GettingStarted.avif new file mode 100644 index 00000000000..38596f0a6b6 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/GettingStarted.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Group.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Group.avif new file mode 100644 index 00000000000..b170bde974b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Group.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Home.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Home.avif new file mode 100644 index 00000000000..cdb88b99b42 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Home.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Hover.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Hover.avif new file mode 100644 index 00000000000..d931b0507ce Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Hover.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Icons.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Icons.avif new file mode 100644 index 00000000000..1792fb9e6e1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Icons.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/IllustratedMessage.avif b/packages/dev/s2-docs/assets/component-illustrations/light/IllustratedMessage.avif new file mode 100644 index 00000000000..4b33ef983ff Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/IllustratedMessage.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Illustrations.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Illustrations.avif new file mode 100644 index 00000000000..e5a1419cfc6 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Illustrations.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Image.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Image.avif new file mode 100644 index 00000000000..db8887e5de1 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Image.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/InlineAlert.avif b/packages/dev/s2-docs/assets/component-illustrations/light/InlineAlert.avif new file mode 100644 index 00000000000..c9e7982a482 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/InlineAlert.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Keyboard.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Keyboard.avif new file mode 100644 index 00000000000..db887c6b7ee Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Keyboard.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Link.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Link.avif new file mode 100644 index 00000000000..fcbcad733b4 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Link.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/LinkButton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/LinkButton.avif new file mode 100644 index 00000000000..a3bd706aa83 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/LinkButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/McpServer.avif b/packages/dev/s2-docs/assets/component-illustrations/light/McpServer.avif new file mode 100644 index 00000000000..7081774156f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/McpServer.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Menu.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Menu.avif new file mode 100644 index 00000000000..4916d375006 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Menu.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Meter.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Meter.avif new file mode 100644 index 00000000000..1fb8fdab652 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Meter.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Migrating.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Migrating.avif new file mode 100644 index 00000000000..10d5e4e4777 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Migrating.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/MigratingToSpectrum3.avif b/packages/dev/s2-docs/assets/component-illustrations/light/MigratingToSpectrum3.avif new file mode 100644 index 00000000000..10d5e4e4777 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/MigratingToSpectrum3.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Move.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Move.avif new file mode 100644 index 00000000000..31588aaf6ce Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Move.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/NumberField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/NumberField.avif new file mode 100644 index 00000000000..998e9bbdc9e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/NumberField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Picker.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Picker.avif new file mode 100644 index 00000000000..3b785c3a403 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Picker.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Popover.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Popover.avif new file mode 100644 index 00000000000..3517f2fc1ad Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Popover.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Press.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Press.avif new file mode 100644 index 00000000000..71dbf367fdd Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Press.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ProgressBar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressBar.avif new file mode 100644 index 00000000000..63ede86da3c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressBar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ProgressCircle.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressCircle.avif new file mode 100644 index 00000000000..a562f4ec754 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ProgressCircle.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Provider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Provider.avif new file mode 100644 index 00000000000..02359c3df14 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Provider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/RadioGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/RadioGroup.avif new file mode 100644 index 00000000000..b6026249784 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/RadioGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/RangeCalendar.avif b/packages/dev/s2-docs/assets/component-illustrations/light/RangeCalendar.avif new file mode 100644 index 00000000000..7f501ff4b2e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/RangeCalendar.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/RangeSlider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/RangeSlider.avif new file mode 100644 index 00000000000..cf9e3df5814 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/RangeSlider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Releases.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Releases.avif new file mode 100644 index 00000000000..4f4f213c605 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Releases.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/SearchField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/SearchField.avif new file mode 100644 index 00000000000..312e8671816 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/SearchField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/SegmentedControl.avif b/packages/dev/s2-docs/assets/component-illustrations/light/SegmentedControl.avif new file mode 100644 index 00000000000..5cab5d3e890 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/SegmentedControl.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/SelectBoxGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/SelectBoxGroup.avif new file mode 100644 index 00000000000..989751ca23e Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/SelectBoxGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Selection.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Selection.avif new file mode 100644 index 00000000000..bf7471aa464 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Selection.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Skeleton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Skeleton.avif new file mode 100644 index 00000000000..0b34f0f2eed Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Skeleton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Slider.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Slider.avif new file mode 100644 index 00000000000..d8da97f2c6c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Slider.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/StatusLight.avif b/packages/dev/s2-docs/assets/component-illustrations/light/StatusLight.avif new file mode 100644 index 00000000000..1a324bdff6f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/StatusLight.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Style.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Style.avif new file mode 100644 index 00000000000..892b6c6ee66 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Style.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/StyleMacro.avif b/packages/dev/s2-docs/assets/component-illustrations/light/StyleMacro.avif new file mode 100644 index 00000000000..20634182b2f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/StyleMacro.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Switch.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Switch.avif new file mode 100644 index 00000000000..3db89630a6f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Switch.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Table.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Table.avif new file mode 100644 index 00000000000..75e89ea9f19 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Table.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Tabs.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Tabs.avif new file mode 100644 index 00000000000..ebb08810b77 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Tabs.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TagGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TagGroup.avif new file mode 100644 index 00000000000..f74dee4a20f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TagGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Testing.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Testing.avif new file mode 100644 index 00000000000..0c5de0d970c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Testing.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TextArea.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TextArea.avif new file mode 100644 index 00000000000..a615c974573 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TextArea.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TextField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TextField.avif new file mode 100644 index 00000000000..41cd8576194 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TextField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/TimeField.avif b/packages/dev/s2-docs/assets/component-illustrations/light/TimeField.avif new file mode 100644 index 00000000000..fca359a4ae8 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/TimeField.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Toast.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Toast.avif new file mode 100644 index 00000000000..6f93278734b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Toast.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButton.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButton.avif new file mode 100644 index 00000000000..eabfb83266f Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButton.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButtonGroup.avif b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButtonGroup.avif new file mode 100644 index 00000000000..714b06e994a Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/ToggleButtonGroup.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Tooltip.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Tooltip.avif new file mode 100644 index 00000000000..1ede73e07fc Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Tooltip.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Tree.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Tree.avif new file mode 100644 index 00000000000..490c99d3c41 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Tree.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/Utility.avif b/packages/dev/s2-docs/assets/component-illustrations/light/Utility.avif new file mode 100644 index 00000000000..d4d74ed367b Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/Utility.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/WhatsNew.avif b/packages/dev/s2-docs/assets/component-illustrations/light/WhatsNew.avif new file mode 100644 index 00000000000..8f8af88b48c Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/WhatsNew.avif differ diff --git a/packages/dev/s2-docs/assets/component-illustrations/light/gradient-bg.avif b/packages/dev/s2-docs/assets/component-illustrations/light/gradient-bg.avif new file mode 100644 index 00000000000..56a68dc4927 Binary files /dev/null and b/packages/dev/s2-docs/assets/component-illustrations/light/gradient-bg.avif differ diff --git a/packages/dev/s2-docs/package.json b/packages/dev/s2-docs/package.json index 23a5b0770a5..49a7619da5b 100644 --- a/packages/dev/s2-docs/package.json +++ b/packages/dev/s2-docs/package.json @@ -67,5 +67,9 @@ "alias": { "tailwind-starter": "../../../starters/tailwind/src", "vanilla-starter": "../../../starters/docs/src" + }, + "devDependencies": { + "axe-playwright": "^2.2.2", + "playwright": "^1.57.0" } } diff --git a/packages/dev/s2-docs/pages/WelcomeHeader.tsx b/packages/dev/s2-docs/pages/WelcomeHeader.tsx index ef6be1a146c..d9228c53a2b 100644 --- a/packages/dev/s2-docs/pages/WelcomeHeader.tsx +++ b/packages/dev/s2-docs/pages/WelcomeHeader.tsx @@ -1,5 +1,6 @@ import {ProductCard, Content, Footer, Text, LinkButton} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; +// @ts-ignore import {TAB_DEFS} from '../src/constants'; // @ts-ignore import url from 'url:../assets/wallpaper_collaborative_S2_desktop.webp'; diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx index e417b2f2ddb..d214ba55e9f 100644 --- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx @@ -1081,7 +1081,6 @@ function AsyncLoadingExample() { return ( {/*- end highlight -*/} diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx index d28cbd3aa7b..8b647b70c71 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx @@ -42,11 +42,11 @@ Use the `value` or `defaultValue` prop to set the color value, and `onChange` to ```tsx render "use client"; import {ColorField} from 'vanilla-starter/ColorField'; -import {parseColor} from 'react-aria-components'; +import {parseColor, type Color} from 'react-aria-components'; import {useState} from 'react'; function Example() { - let [value, setValue] = useState(parseColor('#e73623')); + let [value, setValue] = useState(parseColor('#e73623')); return (
@@ -68,11 +68,11 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel` ```tsx render "use client"; import {ColorField} from 'vanilla-starter/ColorField'; -import {parseColor} from 'react-aria-components'; +import {parseColor, type Color} from 'react-aria-components'; import {useState} from 'react'; function Example() { - let [color, setColor] = useState(parseColor('#7f007f')); + let [color, setColor] = useState(parseColor('#7f007f')); return (
@@ -109,7 +109,7 @@ Use the `name` prop to submit the text value to the server. Set the `isRequired` ```tsx render "use client"; -import {ColorField, Button, Form} from 'vanilla-starter/ColorField'; +import {ColorField} from 'vanilla-starter/ColorField'; import {Button} from 'vanilla-starter/Button'; import {Form} from 'vanilla-starter/Form'; diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index 7b27c74ce35..47d0a9a1a83 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -113,12 +113,12 @@ Use the `defaultSelectedKey` or `selectedKey` prop to set the selected item. The ```tsx render "use client"; -import type {Key} from 'react-aria-components'; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {useState} from 'react'; +import type {Key} from 'react-aria-components'; function Example() { - let [animal, setAnimal] = useState("bison"); + let [animal, setAnimal] = useState("bison"); return (
@@ -148,12 +148,11 @@ Use the `inputValue` or `defaultInputValue` prop to set the value of the input f ```tsx render wide docs={vanillaDocs.exports.ComboBox} links={vanillaDocs.links} props={['allowsCustomValue']} initialProps={{defaultSelectedKey: 'kangaroo'}} "use client"; -import type {Key} from 'react-aria-components'; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {useState} from 'react'; function Example(props) { - let [value, setValue] = useState('Kangaroo'); + let [value, setValue] = useState('Kangaroo'); return (
@@ -204,15 +203,15 @@ function ControlledComboBox() { ]; /*- end collapse -*/ - let [fieldState, setFieldState] = useState({ + let [fieldState, setFieldState] = useState<{selectedKey: Key | null, inputValue: string}>({ selectedKey: null, inputValue: '' }); - let onSelectionChange = (id: Key) => { + let onSelectionChange = (id: Key | null) => { // Update inputValue when selectedKey changes. setFieldState({ - inputValue: options.find(o => o.id === id)?.name ?? '', + inputValue: id == null ? '' : options.find(o => o.id === id)?.name ?? '', selectedKey: id }); }; @@ -227,7 +226,7 @@ function ControlledComboBox() { return (
- (parseDate('2020-02-03')); let formatter = useDateFormatter({ dateStyle: 'full' }); return ( diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx index a39e259043c..b23fbfec205 100644 --- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx @@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; -import {parseDate, getLocalTimeZone} from '@internationalized/date'; +import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; import {useDateFormatter} from 'react-aria'; import {DatePicker} from 'vanilla-starter/DatePicker'; import {useState} from 'react'; function Example() { - let [date, setDate] = useState(parseDate('2020-02-03')); + let [date, setDate] = useState(parseDate('2020-02-03')); let formatter = useDateFormatter({ dateStyle: 'full' }); return ( diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx index 05a418b7d4b..921220edb46 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx @@ -41,13 +41,13 @@ Use the `value` or `defaultValue` prop to set the selected date range, using obj ```tsx render "use client"; -import {parseDate, getLocalTimeZone} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; +import {useDateFormatter, type RangeValue} from 'react-aria'; import {DateRangePicker} from 'vanilla-starter/DateRangePicker'; import {useState} from 'react'; function Example() { - let [range, setRange] = useState({ + let [range, setRange] = useState | null>({ start: parseDate('2025-02-03'), end: parseDate('2025-02-12') }); @@ -60,10 +60,10 @@ function Example() { value={range} onChange={setRange} /> {/*- end highlight -*/} -

Selected range: {formatter.formatRange( +

Selected range: {range ? formatter.formatRange( range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone()) - )}

+ ) : '--'}

); } diff --git a/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx b/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx index 9ba596321c5..99e9a279e5f 100644 --- a/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DraggableGridList.tsx @@ -1,6 +1,6 @@ 'use client'; import {useDragAndDrop} from 'react-aria-components'; -import {PokemonGridList, Pokemon} from './PokemonGridList'; +import {PokemonGridList, type Pokemon} from './PokemonGridList'; export function DraggableGridList() { let {dragAndDropHooks} = useDragAndDrop({ diff --git a/packages/dev/s2-docs/pages/react-aria/DraggableListBox.tsx b/packages/dev/s2-docs/pages/react-aria/DraggableListBox.tsx index a7b1d797835..04a37b02f0b 100644 --- a/packages/dev/s2-docs/pages/react-aria/DraggableListBox.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DraggableListBox.tsx @@ -1,6 +1,6 @@ 'use client'; import {useDragAndDrop} from 'react-aria-components'; -import {PokemonListBox, Pokemon} from './PokemonListBox'; +import {PokemonListBox, type Pokemon} from './PokemonListBox'; export function DraggableListBox() { let {dragAndDropHooks} = useDragAndDrop({ diff --git a/packages/dev/s2-docs/pages/react-aria/DraggableTable.tsx b/packages/dev/s2-docs/pages/react-aria/DraggableTable.tsx index 4e6e782075b..510b0d005f7 100644 --- a/packages/dev/s2-docs/pages/react-aria/DraggableTable.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DraggableTable.tsx @@ -1,6 +1,6 @@ "use client"; import {useDragAndDrop} from 'react-aria-components'; -import {PokemonTable, Pokemon} from './PokemonTable'; +import {PokemonTable, type Pokemon} from './PokemonTable'; export function DraggableTable() { let {dragAndDropHooks} = useDragAndDrop({ diff --git a/packages/dev/s2-docs/pages/react-aria/DraggableTree.tsx b/packages/dev/s2-docs/pages/react-aria/DraggableTree.tsx index 56bca67426a..ce5e40774bb 100644 --- a/packages/dev/s2-docs/pages/react-aria/DraggableTree.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DraggableTree.tsx @@ -1,6 +1,6 @@ "use client"; import {useDragAndDrop} from 'react-aria-components'; -import {PokemonTree, Pokemon} from './PokemonTree'; +import {PokemonTree, type Pokemon} from './PokemonTree'; export function DraggableTree() { let {dragAndDropHooks} = useDragAndDrop({ diff --git a/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx b/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx index 826392568d0..dc6c5a2ba6d 100644 --- a/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx @@ -1,6 +1,6 @@ "use client"; -import React, {JSX, ReactNode} from 'react'; +import React, {ReactNode} from 'react'; import type {TextDropItem} from '@react-aria/dnd'; import {useDrop} from '@react-aria/dnd'; diff --git a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx index 6abb5d188f6..44634a38340 100644 --- a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx @@ -18,9 +18,10 @@ export const description = 'An area into which one or multiple objects can be dr import {DropZone} from 'vanilla-starter/DropZone'; import {Text} from 'react-aria-components'; import {useState} from 'react'; + import React from 'react'; function Example() { - let [content, setContent] = useState(null); + let [content, setContent] = useState(null); return ( (null); return ( ([]); diff --git a/packages/dev/s2-docs/pages/react-aria/DroppableListBox.tsx b/packages/dev/s2-docs/pages/react-aria/DroppableListBox.tsx index 11101575f6b..5c54e9fa6cb 100644 --- a/packages/dev/s2-docs/pages/react-aria/DroppableListBox.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DroppableListBox.tsx @@ -1,7 +1,7 @@ 'use client'; import {useState} from 'react'; import {isTextDropItem, useDragAndDrop} from 'react-aria-components'; -import {PokemonListBox, Pokemon} from './PokemonListBox'; +import {PokemonListBox, type Pokemon} from './PokemonListBox'; export function DroppableListBox() { let [items, setItems] = useState([]); diff --git a/packages/dev/s2-docs/pages/react-aria/DroppableTable.tsx b/packages/dev/s2-docs/pages/react-aria/DroppableTable.tsx index 59dbb4ed124..e1939d57663 100644 --- a/packages/dev/s2-docs/pages/react-aria/DroppableTable.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DroppableTable.tsx @@ -1,7 +1,7 @@ 'use client'; import {isTextDropItem, useDragAndDrop} from 'react-aria-components'; import {useState} from 'react'; -import {PokemonTable, Pokemon} from './PokemonTable'; +import {PokemonTable, type Pokemon} from './PokemonTable'; export function DroppableTable() { let [items, setItems] = useState([]); diff --git a/packages/dev/s2-docs/pages/react-aria/DroppableTree.tsx b/packages/dev/s2-docs/pages/react-aria/DroppableTree.tsx index d62b9457748..4241bb02e6a 100644 --- a/packages/dev/s2-docs/pages/react-aria/DroppableTree.tsx +++ b/packages/dev/s2-docs/pages/react-aria/DroppableTree.tsx @@ -1,7 +1,7 @@ 'use client'; import {isTextDropItem, useDragAndDrop} from 'react-aria-components'; import {useState} from 'react'; -import {PokemonTree, Pokemon} from './PokemonTree'; +import {PokemonTree, type Pokemon} from './PokemonTree'; export function DroppableTree() { let [items, setItems] = useState([]); diff --git a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx index 63941e546e9..b957935f4bc 100644 --- a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx @@ -19,7 +19,7 @@ import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; function Example(props) { - let [files, setFiles] = useState([]); + let [files, setFiles] = useState([]); return ( <> diff --git a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx index aba6ee03e0f..565b300757f 100644 --- a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx @@ -95,10 +95,10 @@ function ToolbarButton(props) { let onKeyDown = (e) => { switch (e.key) { case 'ArrowRight': - focusManager.focusNext({wrap: true}); + focusManager?.focusNext({wrap: true}); break; case 'ArrowLeft': - focusManager.focusPrevious({wrap: true}); + focusManager?.focusPrevious({wrap: true}); break; } }; diff --git a/packages/dev/s2-docs/pages/react-aria/Form.mdx b/packages/dev/s2-docs/pages/react-aria/Form.mdx index 5972f0260d4..3442b109ac2 100644 --- a/packages/dev/s2-docs/pages/react-aria/Form.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Form.mdx @@ -83,12 +83,13 @@ import {Button} from 'vanilla-starter/Button'; event.preventDefault(); // Get data from form. - let formData = new FormData(event.target); + let form = event.target as HTMLFormElement; + let formData = new FormData(form); let name = formData.get('name'); alert(`Hello, ${name}!`); // Reset form after submission. - event.target.reset(); + form.reset(); }}> {/*- end highlight -*/} diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 8d263abe38f..0e8ea1f2325 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -27,52 +27,52 @@ export const description = 'Displays a list of interactive items, with support f - + Desert Sunset PNG • 2/3/2024 - + Hiking Trail JPEG • 1/10/2022 - + Lion JPEG • 8/28/2021 - + Mountain Sunrise PNG • 3/15/2015 - + Giraffe tongue PNG • 11/27/2019 - + Golden Hour WEBP • 7/24/2024 - + Architecture PNG • 12/24/2016 - + Peeking leopard JPEG • 3/2/2016 - + Roofs JPEG • 4/24/2025 - + Half Dome Deer DNG • 8/28/2018 @@ -352,7 +352,7 @@ function Example() { {/*- end highlight -*/} {(image) => ( - + {image.title} By {image.user} @@ -373,6 +373,16 @@ import {Collection, Text} from 'react-aria-components'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; import {useAsyncList} from '@react-stately/data'; +type Item = { + id: string; + description?: string; + alt_description?: string; + urls: {regular: string}; + width: number; + height: number; + user: {name: string}; +}; + function AsyncLoadingExample() { let list = useAsyncList({ async load({signal, cursor, items}) { @@ -400,7 +410,7 @@ function AsyncLoadingExample() { {(item) => ( - + {item.description || item.alt_description} By {item.user.name} @@ -502,7 +512,7 @@ let images = [ target="_blank" /*- end highlight -*/ textValue={image.title}> - + {image.title} )} @@ -549,52 +559,52 @@ function Example(props) { ///- end highlight -/// > - + Desert Sunset PNG • 2/3/2024 - + Hiking Trail JPEG • 1/10/2022 - + Lion JPEG • 8/28/2021 - + Mountain Sunrise PNG • 3/15/2015 - + Giraffe tongue PNG • 11/27/2019 - + Golden Hour WEBP • 7/24/2024 - + Architecture PNG • 12/24/2016 - + Peeking leopard JPEG • 3/2/2016 - + Roofs JPEG • 4/24/2025 - + Half Dome Deer DNG • 8/28/2018 @@ -866,7 +876,7 @@ function Example() { ///- begin highlight -/// let {dragAndDropHooks} = useDragAndDrop({ - getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).title})), + getItems: (keys, items: typeof list.items) => items.map(item => ({'text/plain': item.title})), onReorder(e) { if (e.target.dropPosition === 'before') { list.moveBefore(e.target.key, e.keys); @@ -889,7 +899,7 @@ function Example() { > {image => ( - + {image.title} {image.user} diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx index 05012e0f22a..07547ded718 100644 --- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx @@ -218,7 +218,7 @@ import {ListBox, ListBoxItem} from 'react-aria-components'; ```tsx render hideImports "use client"; -import {ListBox, ListBoxItem} from 'react-aria-components'; +import {ListBox} from 'react-aria-components'; [...keys].map(key => ({'text/plain': list.getItem(key).name})), + getItems: (keys, items: typeof list.items) => items.map(item => ({'text/plain': item.name})), onReorder(e) { if (e.target.dropPosition === 'before') { list.moveBefore(e.target.key, e.keys); diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index 4d3d3418ae2..c6b840edf5e 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -226,7 +226,7 @@ Wrap a `` with a `` to create a submenu. ```tsx render hideImports "use client"; -import {MenuTrigger, SubmenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import {MenuTrigger, SubmenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; @@ -261,7 +261,7 @@ Separators may be added between menu items or sections in order to create non-la ```tsx render hideImports "use client"; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Separator} from 'react-aria-components'; import {Button} from 'vanilla-starter/Button'; @@ -289,7 +289,7 @@ Use the `href` prop on a `` to create a link. See the [framework setup ```tsx render hideImports "use client"; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; @@ -441,7 +441,6 @@ function Example() { "use client"; import {Pressable} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; -import {Button} from 'vanilla-starter/Button'; {/*- begin highlight -*/} diff --git a/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx b/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx index d41fd63fd5f..058d3392dd5 100644 --- a/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx +++ b/packages/dev/s2-docs/pages/react-aria/PokemonGridList.tsx @@ -6,7 +6,7 @@ export interface Pokemon { id: number, name: string, type: string, - level: number + level?: number } interface PokemonGridListProps { diff --git a/packages/dev/s2-docs/pages/react-aria/PokemonListBox.tsx b/packages/dev/s2-docs/pages/react-aria/PokemonListBox.tsx index fd8c3efe0af..6cca6476207 100644 --- a/packages/dev/s2-docs/pages/react-aria/PokemonListBox.tsx +++ b/packages/dev/s2-docs/pages/react-aria/PokemonListBox.tsx @@ -6,7 +6,7 @@ export interface Pokemon { id: number, name: string, type: string, - level: number + level?: number } interface PokemonListBoxProps { diff --git a/packages/dev/s2-docs/pages/react-aria/PokemonTable.tsx b/packages/dev/s2-docs/pages/react-aria/PokemonTable.tsx index a3c7d01ae5e..ad55f6d00d0 100644 --- a/packages/dev/s2-docs/pages/react-aria/PokemonTable.tsx +++ b/packages/dev/s2-docs/pages/react-aria/PokemonTable.tsx @@ -6,7 +6,7 @@ export interface Pokemon { id: number, name: string, type: string, - level: number + level?: number } interface PokemonTableProps { diff --git a/packages/dev/s2-docs/pages/react-aria/PokemonTree.tsx b/packages/dev/s2-docs/pages/react-aria/PokemonTree.tsx index 74c18d21b8c..724b5142373 100644 --- a/packages/dev/s2-docs/pages/react-aria/PokemonTree.tsx +++ b/packages/dev/s2-docs/pages/react-aria/PokemonTree.tsx @@ -6,7 +6,7 @@ export interface Pokemon { id: number, name: string, type: string, - level: number, + level?: number, children?: Pokemon[] } @@ -52,7 +52,7 @@ export function PokemonTree(props: PokemonTreeProps) { dragAndDropHooks={dragAndDropHooks}> {function renderItem(item: Pokemon) { return ( - {item.name} – {item.type}}> + {renderItem} diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index ddf7b728ce0..0a58cb5902a 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -115,7 +115,6 @@ To position a popover relative to a different element than its trigger, use the "use client"; import {useState, useRef} from 'react'; import {Popover} from 'vanilla-starter/Popover'; -import {Heading} from 'react-aria-components'; import {Button} from 'vanilla-starter/Button'; function Example() { diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx index 594d81030ae..a6ad23fa595 100644 --- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx @@ -45,9 +45,9 @@ a detailed explanation of its implementation. 'use client'; import React from 'react'; import {Button} from 'vanilla-starter/Button'; -import {MyToastRegion} from './MyToastRegion.tsx' +import {MyToastRegion} from './MyToastRegion' import {UNSAFE_PortalProvider} from '@react-aria/overlays'; -import {UNSTABLE_ToastRegion as ToastRegion, UNSTABLE_Toast as Toast, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastContent as ToastContent, Button, Text} from 'react-aria-components'; +import {UNSTABLE_ToastQueue as ToastQueue} from 'react-aria-components'; // Define the type for your toast content. interface MyToastContent { diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx index 2c4363da3cf..a776c47b9a8 100644 --- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx @@ -52,7 +52,7 @@ import {RadioGroup, Radio} from 'vanilla-starter/RadioGroup'; import {useState} from 'react'; function Example() { - let [selected, setSelected] = useState(null); + let [selected, setSelected] = useState(null); return ( <> diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index 16e1aa4251b..bead2451c0d 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -161,12 +161,10 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate ```tsx render docs={vanillaDocs.exports.RangeCalendar} links={docs.links} props={['allowsNonContiguousRanges']} wide "use client"; import {today, getLocalTimeZone} from '@internationalized/date'; -import {useLocale} from 'react-aria-components'; import {RangeCalendar} from 'vanilla-starter/RangeCalendar'; import {useState} from 'react'; function Example(props) { - let {locale} = useLocale(); let now = today(getLocalTimeZone()); let [range, setRange] = useState({ start: now.add({days: 6}), diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx index fdf2d05e499..44223a23267 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx @@ -299,7 +299,7 @@ import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/ ```tsx render hideImports "use client"; -import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table'; +import {Table, TableHeader, Column, TableBody} from 'vanilla-starter/Table';
@@ -506,7 +506,7 @@ const columns = [ ]; ///- end collapse -/// -const initialWidths = new Map([ +const initialWidths = new Map([ ['file', '1fr'], ['size', 80], ['date', 100] @@ -604,8 +604,8 @@ function ReorderableTable() { ///- begin highlight -/// let {dragAndDropHooks} = useDragAndDrop({ - getItems: (keys) => [...keys].map(key => ({ - 'text/plain': list.getItem(key).name + getItems: (keys, items: typeof list.items) => items.map(item => ({ + 'text/plain': item.name })), onReorder(e) { if (e.target.dropPosition === 'before') { diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx index 548d9e10463..942497d8fb8 100644 --- a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx @@ -46,7 +46,7 @@ import {TimeField} from 'vanilla-starter/TimeField'; import {useState} from 'react'; function Example() { - let [time, setTime] = useState(new Time(11, 45)); + let [time, setTime] = useState
+ {(selectedKeys === 'all' || selectedKeys.size > 0) && ( +
+ +
+ )}

selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}

); @@ -338,17 +344,17 @@ function Example(props) { onSelectionChange={setSelectedKeys} data-size="small"> - + Desert Sunset PNG • 2/3/2024 - + Hiking Trail JPEG • 1/10/2022 - + Lion JPEG • 8/28/2021 @@ -532,9 +538,9 @@ function SelectableItem({id, children}) { - Home - Getting Started - Components + Home + Getting Started + Components ``` @@ -559,21 +565,21 @@ import {Text} from 'react-aria-components'; onAction={() => alert('Opening "Mountain Sunrise"')} /*- end highlight -*/ textValue="Mountain Sunrise"> - + Mountain Sunrise PNG • 3/15/2015 alert('Opening "Architecture"')} textValue="Architecture"> - + Architecture PNG • 12/24/2016 alert('Opening "Golden Hour"')} textValue="Golden Hour"> - + Golden Hour WEBP • 7/24/2024 @@ -608,13 +614,11 @@ import {Tree, TreeItem} from 'vanilla-starter/Tree'; ```tsx render wide docs={docs.exports.Table} links={docs.links} props={['selectionBehavior']} "use client"; import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table'; -import {useState} from 'react'; + /* PROPS */> Name Type @@ -690,7 +694,7 @@ let images = [ {/*- end highlight -*/} {image => ( - + {image.title} By {image.user} @@ -730,7 +734,6 @@ const files = [ ```tsx render wide docs={docs.exports.Table} links={docs.links} props={['selectionBehavior']} "use client"; import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table'; -import {useState} from 'react'; ///- begin collapse -/// const files = [ @@ -793,24 +796,24 @@ import {Text} from 'react-aria-components'; - + Desert Sunset PNG • 2/3/2024 {/*- begin highlight -*/} {/*- end highlight -*/} - + Hiking Trail JPEG • 1/10/2022 - + Lion JPEG • 8/28/2021 - + Mountain Sunrise PNG • 3/15/2015 @@ -959,7 +962,7 @@ const items = [ items={items}> {item => ( - + {item.name} )} @@ -971,8 +974,16 @@ const items = [ import {Tree, TreeItem} from 'vanilla-starter/Tree'; import {Collection} from 'react-aria-components'; +type Pokemon = { + id: number; + name: string; + type: string; + level: number; + children?: Pokemon[]; +}; + ///- begin collapse -/// -let items = [ +let items: Pokemon[] = [ {id: 1, name: 'Bulbasaur', type: 'Grass', level: 14, children: [ {id: 2, name: 'Ivysaur', type: 'Grass', level: 30, children: [ {id: 3, name: 'Venusaur', type: 'Grass', level: 83} diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx index 793979327ee..fbbdd8d3a29 100644 --- a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx @@ -49,7 +49,7 @@ function Copyable() { }); return ( -
+
Hello world ⌘C
@@ -57,22 +57,20 @@ function Copyable() { } function Pasteable() { - let [pasted, setPasted] = React.useState(null); + let [pasted, setPasted] = React.useState(null); let {clipboardProps} = useClipboard({ async onPaste(items) { let pasted = await Promise.all( items - .filter((item) => - item.kind === 'text' && item.types.has('text/plain') - ) - .map((item: TextDropItem) => item.getText('text/plain')) + .filter((item): item is TextDropItem => item.kind === 'text' && item.types.has('text/plain')) + .map((item) => item.getText('text/plain')) ); setPasted(pasted.join('\n')); } }); return ( -
+
{pasted || 'Paste here'} ⌘V
@@ -98,6 +96,7 @@ This example copies two items, each of which contains representations as plain t ```tsx render 'use client'; import React from 'react'; +import type {TextDropItem} from 'react-aria'; import {useClipboard} from 'react-aria'; function Copyable() { @@ -134,13 +133,13 @@ function Copyable() { ///- begin collapse -/// function Pasteable() { - let [pasted, setPasted] = React.useState(null); + let [pasted, setPasted] = React.useState(null); let {clipboardProps} = useClipboard({ async onPaste(items) { let pasted = await Promise.all( items - .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type'))) - .map(async (item: TextDropItem) => { + .filter((item): item is TextDropItem => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type'))) + .map(async (item) => { if (item.types.has('my-app-custom-type')) { return JSON.parse(await item.getText('my-app-custom-type')); } else { @@ -152,21 +151,21 @@ function Pasteable() { } }); - let message = ['Paste here']; - if (pasted) { - message = pasted.map(d => { + let message: React.ReactElement[] = [
Paste here
]; + if (pasted && Array.isArray(pasted)) { + message = pasted.map((d, i) => { let message = d.message; if (d.style === 'bold') { message = {message}; } else if (d.style === 'italic') { message = {message}; } - return
{message}
; + return
{message}
; }); } return ( -
+
{message || 'Paste here'}
⌘V
@@ -197,6 +196,7 @@ The example below works with the above `Copyable` example using a custom app-spe ```tsx render 'use client'; import React from 'react'; +import type {TextDropItem} from 'react-aria'; import {useClipboard} from 'react-aria'; ///- begin collapse -/// @@ -222,7 +222,7 @@ function Copyable() { }); return ( -
+
hello world
foo bar
@@ -234,13 +234,13 @@ function Copyable() { ///- end collapse -/// function Pasteable() { - let [pasted, setPasted] = React.useState(null); + let [pasted, setPasted] = React.useState(null); let {clipboardProps} = useClipboard({ async onPaste(items) { let pasted = await Promise.all( items - .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type'))) - .map(async (item: TextDropItem) => { + .filter((item): item is TextDropItem => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type'))) + .map(async (item) => { if (item.types.has('my-app-custom-type')) { return JSON.parse(await item.getText('my-app-custom-type')); } else { @@ -252,21 +252,21 @@ function Pasteable() { } }); - let message = ['Paste here']; - if (pasted) { - message = pasted.map(d => { + let message: React.ReactElement[] = [
Paste here
]; + if (pasted && Array.isArray(pasted)) { + message = pasted.map((d, i) => { let message = d.message; if (d.style === 'bold') { message = {message}; } else if (d.style === 'italic') { message = {message}; } - return
{message}
; + return
{message}
; }); } return ( -
+
{message || 'Paste here'}
⌘V
@@ -290,7 +290,7 @@ import {useClipboard} from 'react-aria'; import type {FileDropItem} from 'react-aria'; function Pasteable() { - let [file, setFile] = React.useState(null); + let [file, setFile] = React.useState(null); let {clipboardProps} = useClipboard({ async onPaste(items) { let item = items.find(item => item.kind === 'file' && (item.type === 'image/jpeg' || item.type === 'image/png')) as FileDropItem; @@ -300,8 +300,8 @@ function Pasteable() { } }); return ( -
- {file ? : 'Paste image here'} +
+ {file ? Pasted image : 'Paste image here'}
); } @@ -320,14 +320,14 @@ import Folder from '@react-spectrum/s2/icons/Folder'; import './useClipboardGrid.css'; function Pasteable() { - let [files, setFiles] = React.useState(null); + let [files, setFiles] = React.useState | null>(null); let {clipboardProps} = useClipboard({ async onPaste(items) { // Find the first dropped item that is a directory. let dir = items.find(item => item.kind === 'directory') as DirectoryDropItem; if (dir) { // Read entries in directory and update state with relevant info. - let files = []; + let files: Array<{name: string, kind: 'file' | 'directory'}> = []; for await (let entry of dir.getEntries()) { files.push({ name: entry.name, @@ -352,7 +352,7 @@ function Pasteable() { ); } return ( -
+
{contents}
); @@ -378,22 +378,20 @@ function Copyable() { /*- end highlight -*/ }); return ( -
+
Hello world ⌘C
); } function Pasteable() { - let [pasted, setPasted] = React.useState(null); + let [pasted, setPasted] = React.useState(null); let {clipboardProps} = useClipboard({ async onPaste(items) { let pasted = await Promise.all( items - .filter((item) => - item.kind === 'text' && item.types.has('text/plain') - ) - .map((item: TextDropItem) => item.getText('text/plain')) + .filter((item): item is TextDropItem => item.kind === 'text' && item.types.has('text/plain')) + .map((item) => item.getText('text/plain')) ); setPasted(pasted.join('\n')); }, @@ -402,7 +400,7 @@ function Pasteable() { /*- end highlight -*/ }); return ( -
+
{pasted || 'Paste here'} ⌘V
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx index 61b3a4bafb7..54395efda59 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx @@ -35,7 +35,7 @@ This example shows how to make a simple draggable element that provides data as ```tsx render files={["packages/dev/s2-docs/pages/react-aria/DropTarget.tsx", "packages/dev/s2-docs/pages/react-aria/useDragExample.css"]} "use client"; import {useDrag} from 'react-aria'; -import {DropTarget} from './DropTarget.tsx'; +import {DropTarget} from './DropTarget'; import './useDragExample.css'; import 'vanilla-starter/theme.css'; @@ -69,7 +69,7 @@ This example drags two items, each of which contains representations as plain te ```tsx render "use client"; import {useDrag} from 'react-aria'; -import {DropTarget} from './DropTarget.tsx'; +import {DropTarget} from './DropTarget'; function Draggable() { let {dragProps, isDragging} = useDrag({ @@ -115,7 +115,7 @@ This example renders a custom drag preview which shows the text of the first dra "use client"; import React from 'react'; import {useDrag} from 'react-aria'; -import {DropTarget} from './DropTarget.tsx'; +import {DropTarget} from './DropTarget'; import {DragPreview} from 'react-aria'; function Draggable() { @@ -162,7 +162,7 @@ This example removes the draggable element from the UI when a move operation is "use client" import React from 'react'; import {useDrag} from 'react-aria'; -import {DropTarget} from './DropTarget.tsx'; +import {DropTarget} from './DropTarget'; function Draggable() { let [moved, setMoved] = React.useState(false); @@ -205,7 +205,7 @@ The drag source can also control which drop operations are allowed for the data. ```tsx render "use client"; import {useDrag} from 'react-aria'; -import {DropTarget} from './DropTarget.tsx'; +import {DropTarget} from './DropTarget'; function Draggable() { let {dragProps, isDragging} = useDrag({ @@ -247,7 +247,7 @@ When the `hasDragButton` option is enabled, the keyboard interactions are moved import React from 'react'; import {useDrag} from 'react-aria'; import {useButton} from '@react-aria/button'; -import {DropTarget} from './DropTarget.tsx'; +import {DropTarget} from './DropTarget'; function Draggable() { let {dragProps, dragButtonProps, isDragging} = useDrag({ diff --git a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx index 187bee59b23..707747710de 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx @@ -37,20 +37,20 @@ This example shows how to make a simple drop target that accepts plain text data import React from 'react'; import type {TextDropItem} from 'react-aria'; import {useDrop} from 'react-aria'; -import {Draggable} from './Draggable.tsx'; +import {Draggable} from './Draggable'; import './useDragExample.css'; import 'vanilla-starter/theme.css'; function DropTarget() { - let [dropped, setDropped] = React.useState(null); + let [dropped, setDropped] = React.useState(null); let ref = React.useRef(null); let {dropProps, isDropTarget} = useDrop({ ref, async onDrop(e) { let items = await Promise.all( e.items - .filter(item => item.kind === 'text' && item.types.has('text/plain')) - .map((item: TextDropItem) => item.getText('text/plain')) + .filter((item): item is TextDropItem => item.kind === 'text' && item.types.has('text/plain')) + .map((item) => item.getText('text/plain')) ); setDropped(items.join('\n')); } @@ -81,11 +81,12 @@ The example below finds the first available item that includes a custom app-spec ```tsx render 'use client'; import React from 'react'; +import type {TextDropItem} from 'react-aria'; import {useDrop} from 'react-aria'; -import {Draggable} from './Draggable.tsx'; +import {Draggable} from './Draggable'; function DropTarget() { - let [dropped, setDropped] = React.useState(null); + let [dropped, setDropped] = React.useState(null); let ref = React.useRef(null); let {dropProps, isDropTarget} = useDrop({ ref, @@ -124,7 +125,7 @@ import React from 'react'; import type {FileDropItem} from 'react-aria'; import {useDrop} from 'react-aria'; function DropTarget() { - let [file, setFile] = React.useState(null); + let [file, setFile] = React.useState(null); let ref = React.useRef(null); let {dropProps, isDropTarget} = useDrop({ ref, @@ -160,7 +161,7 @@ import {useDrop} from 'react-aria'; import './useClipboardGrid.css'; function DropTarget() { - let [files, setFiles] = React.useState(null); + let [files, setFiles] = React.useState | null>(null); let ref = React.useRef(null); let {dropProps, isDropTarget} = useDrop({ ref, @@ -170,7 +171,7 @@ function DropTarget() { let dir = e.items.find(item => item.kind === 'directory') as DirectoryDropItem; if (dir) { // Read entries in directory and update state with relevant info. - let files = []; + let files: Array<{name: string, kind: 'file' | 'directory'}> = []; for await (let entry of dir.getEntries()) { files.push({ name: entry.name, @@ -225,8 +226,9 @@ In the below example, the drop target only supports dropping PNG images. If a PN 'use client'; import React from 'react'; import {useDrop} from 'react-aria'; +import type {FileDropItem} from 'react-aria'; function DropTarget() { - let [file, setFile] = React.useState(null); + let [file, setFile] = React.useState(null); let ref = React.useRef(null); let {dropProps, isDropTarget} = useDrop({ ref, @@ -294,10 +296,10 @@ This example logs all events that occur within the drop target: 'use client'; import React from 'react'; import {useDrop} from 'react-aria'; -import {Draggable} from './Draggable.tsx'; +import {Draggable} from './Draggable'; function DropTarget() { - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let onEvent = e => setEvents(events => [JSON.stringify(e), ...events]); let ref = React.useRef(null); let {dropProps, isDropTarget} = useDrop({ @@ -308,7 +310,7 @@ function DropTarget() { onDrop: onEvent }); return ( -
    +
      {events.map((e, i) =>
    • {e}
      • )}
    ); @@ -327,18 +329,18 @@ If you need to temporarily disable dropping, you can pass the `isDisabled` optio import React from 'react'; import type {TextDropItem} from 'react-aria'; import {useDrop} from 'react-aria'; -import {Draggable} from './Draggable.tsx'; +import {Draggable} from './Draggable'; function DropTarget() { - let [dropped, setDropped] = React.useState(null); + let [dropped, setDropped] = React.useState(null); let ref = React.useRef(null); let {dropProps, isDropTarget} = useDrop({ ref, async onDrop(e) { let items = await Promise.all( e.items - .filter(item => item.kind === 'text' && item.types.has('text/plain')) - .map((item: TextDropItem) => item.getText('text/plain')) + .filter((item): item is TextDropItem => item.kind === 'text' && item.types.has('text/plain')) + .map((item) => item.getText('text/plain')) ); setDropped(items.join('\n')); }, diff --git a/packages/dev/s2-docs/pages/react-aria/useField.mdx b/packages/dev/s2-docs/pages/react-aria/useField.mdx index 07128f27a30..e02b37e3bc6 100644 --- a/packages/dev/s2-docs/pages/react-aria/useField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useField.mdx @@ -50,7 +50,7 @@ function ContactPicker(props) {
    {props.description}
    } {props.errorMessage && -
    {props.errorMessage}
    +
    {props.errorMessage}
    }
); diff --git a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx index 8dbd617292e..c79040de912 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx @@ -26,7 +26,7 @@ import React from 'react'; import {useFocus} from 'react-aria'; function Example() { - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let {focusProps} = useFocus({ onFocus: e => setEvents( events => [...events, 'focus'] diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx index b41f8cc6ede..4dbd96dc14f 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx @@ -25,7 +25,7 @@ import React from 'react'; import {useFocusWithin} from 'react-aria'; function Example() { - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let [isFocusWithin, setFocusWithin] = React.useState(false); let {focusWithinProps} = useFocusWithin({ onFocusWithin: e => setEvents( diff --git a/packages/dev/s2-docs/pages/react-aria/useHover.mdx b/packages/dev/s2-docs/pages/react-aria/useHover.mdx index a10a778125d..2327dcb5d40 100644 --- a/packages/dev/s2-docs/pages/react-aria/useHover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useHover.mdx @@ -28,7 +28,7 @@ import React from 'react'; import {useHover} from 'react-aria'; function Example() { - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let {hoverProps, isHovered} = useHover({ onHoverStart: e => setEvents( events => [...events, `hover start with ${e.pointerType}`] diff --git a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx index d11507d71af..6e484cdc4fa 100644 --- a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx @@ -25,7 +25,7 @@ import React from 'react'; import {useKeyboard} from 'react-aria'; function Example() { - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let {keyboardProps} = useKeyboard({ onKeyDown: e => setEvents( events => [`key down: ${e.key}`, ...events] diff --git a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx index 15379daa8cb..18f05f1d814 100644 --- a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx @@ -29,7 +29,7 @@ import {mergeProps} from 'react-aria'; import {useLongPress, usePress} from '@react-aria/interactions'; function Example() { - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let [mode, setMode] = React.useState('Activate'); /*- begin focus -*/ diff --git a/packages/dev/s2-docs/pages/react-aria/useMove.mdx b/packages/dev/s2-docs/pages/react-aria/useMove.mdx index 28a7b67373f..c32d09c9f8a 100644 --- a/packages/dev/s2-docs/pages/react-aria/useMove.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useMove.mdx @@ -29,7 +29,7 @@ function Example() { const CONTAINER_SIZE = 200; const BALL_SIZE = 30; - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let [color, setColor] = React.useState('black'); let [position, setPosition] = React.useState({ x: 0, diff --git a/packages/dev/s2-docs/pages/react-aria/usePress.mdx b/packages/dev/s2-docs/pages/react-aria/usePress.mdx index 4d34195ee7b..8de0ca95b44 100644 --- a/packages/dev/s2-docs/pages/react-aria/usePress.mdx +++ b/packages/dev/s2-docs/pages/react-aria/usePress.mdx @@ -26,7 +26,7 @@ import React from 'react'; import {usePress} from 'react-aria'; function Example() { - let [events, setEvents] = React.useState([]); + let [events, setEvents] = React.useState([]); let {pressProps, isPressed} = usePress({ onPressStart: e => setEvents( events => [...events, `press start with ${e.pointerType}`] diff --git a/packages/dev/s2-docs/pages/s2/ActionBar.mdx b/packages/dev/s2-docs/pages/s2/ActionBar.mdx index cb258e6b89a..700fc82a8fc 100644 --- a/packages/dev/s2-docs/pages/s2/ActionBar.mdx +++ b/packages/dev/s2-docs/pages/s2/ActionBar.mdx @@ -16,7 +16,6 @@ import {ActionBar, ActionButton, TableView, TableHeader, TableBody, Column, Row, import Edit from '@react-spectrum/s2/icons/Edit'; import Copy from '@react-spectrum/s2/icons/Copy'; import Delete from '@react-spectrum/s2/icons/Delete'; -import {useState} from 'react'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; let rows = [ diff --git a/packages/dev/s2-docs/pages/s2/ActionButton.mdx b/packages/dev/s2-docs/pages/s2/ActionButton.mdx index 5d33be3e19b..8e8d6102907 100644 --- a/packages/dev/s2-docs/pages/s2/ActionButton.mdx +++ b/packages/dev/s2-docs/pages/s2/ActionButton.mdx @@ -56,7 +56,6 @@ function PendingButton() { return ( ({ async load({signal, cursor, items}) { @@ -428,12 +438,11 @@ export default function Example(props) { layout="waterfall" ///- begin highlight -/// loadingState={loadingState} - onLoadMore={list.loadMore} - ///- end highlight -/// onLoadMore={props.loadingState ? undefined : list.loadMore} + ///- end highlight -/// styles={style({width: 'full', height: 500})}> - {item => } + {item => } {(loadingState === 'loading' || loadingState === 'loadingMore') && ( /*- begin highlight -*/ @@ -442,14 +451,15 @@ export default function Example(props) { {() => ( + }} + layout={props.layout || 'waterfall'} /> )} )} @@ -475,7 +485,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) { {item.description || item.alt_description}
- + {item.user.name}
diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx index 0857cee6559..cab2905c377 100644 --- a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx @@ -82,7 +82,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; Cookie policy {/*- end highlight -*/} - + ``` diff --git a/packages/dev/s2-docs/pages/s2/ColorField.mdx b/packages/dev/s2-docs/pages/s2/ColorField.mdx index 498e12ad3bf..c1fccda1487 100644 --- a/packages/dev/s2-docs/pages/s2/ColorField.mdx +++ b/packages/dev/s2-docs/pages/s2/ColorField.mdx @@ -26,13 +26,13 @@ Use the `value` or `defaultValue` prop to set the color value, and `onChange` to ```tsx render "use client"; -import {ColorField} from '@react-spectrum/s2'; +import {ColorField, type Color} from '@react-spectrum/s2'; import {useState} from 'react'; import {parseColor} from '@react-stately/color'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; function Example() { - let [value, setValue] = useState(parseColor('#e73623')); + let [value, setValue] = useState(parseColor('#e73623')); return (
@@ -53,12 +53,12 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel` ```tsx render "use client"; -import {ColorField, parseColor} from '@react-spectrum/s2'; +import {ColorField, parseColor, type Color} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {useState} from 'react'; function Example() { - let [color, setColor] = useState(parseColor('#7f007f')); + let [color, setColor] = useState(parseColor('#7f007f')); return (
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx index c9885b0bfb7..7c9ad5d75b3 100644 --- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx @@ -49,7 +49,7 @@ function Example() { return ( /*- begin highlight -*/ - + {(item) => {item.name}} /*- end highlight -*/ @@ -158,8 +158,12 @@ Use the `loadingState` and `onLoadMore` props to enable async loading and infini "use client"; import {ComboBox, ComboBoxItem, useAsyncList} from '@react-spectrum/s2'; +interface Character { + name: string +} + function Example() { - let list = useAsyncList({ + let list = useAsyncList({ async load({signal, cursor, filterText}) { if (cursor) { cursor = cursor.replace(/^http:\/\//i, 'https://'); @@ -254,7 +258,7 @@ import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2'; import {useState} from 'react'; function Example() { - let [animal, setAnimal] = useState("bison"); + let [animal, setAnimal] = useState("bison"); return (
@@ -339,15 +343,15 @@ function ControlledComboBox() { ]; /*- end collapse -*/ - let [fieldState, setFieldState] = useState({ + let [fieldState, setFieldState] = useState<{selectedKey: Key | null, inputValue: string}>({ selectedKey: null, inputValue: '' }); - let onSelectionChange = (id: Key) => { + let onSelectionChange = (id: Key | null) => { // Update inputValue when selectedKey changes. setFieldState({ - inputValue: options.find(o => o.id === id)?.name ?? '', + inputValue: id ? (options.find(o => o.id === id)?.name ?? '') : '', selectedKey: id }); }; diff --git a/packages/dev/s2-docs/pages/s2/DateField.mdx b/packages/dev/s2-docs/pages/s2/DateField.mdx index 9a966c8362f..42568881460 100644 --- a/packages/dev/s2-docs/pages/s2/DateField.mdx +++ b/packages/dev/s2-docs/pages/s2/DateField.mdx @@ -25,13 +25,13 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; -import {parseDate, getLocalTimeZone} from '@internationalized/date'; +import {parseDate, getLocalTimeZone, CalendarDate} from '@internationalized/date'; import {useDateFormatter} from 'react-aria'; import {DateField} from '@react-spectrum/s2'; import {useState} from 'react'; function Example() { - let [date, setDate] = useState(parseDate('2020-02-03')); + let [date, setDate] = useState(parseDate('2020-02-03')); let formatter = useDateFormatter({ dateStyle: 'full' }); return ( diff --git a/packages/dev/s2-docs/pages/s2/DatePicker.mdx b/packages/dev/s2-docs/pages/s2/DatePicker.mdx index 747569f160a..a4f06c9e831 100644 --- a/packages/dev/s2-docs/pages/s2/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/s2/DatePicker.mdx @@ -25,13 +25,13 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; -import {parseDate, getLocalTimeZone} from '@internationalized/date'; +import {parseDate, getLocalTimeZone, CalendarDate} from '@internationalized/date'; import {useDateFormatter} from 'react-aria'; import {DatePicker} from '@react-spectrum/s2'; import {useState} from 'react'; function Example() { - let [date, setDate] = useState(parseDate('2020-02-03')); + let [date, setDate] = useState(parseDate('2020-02-03')); let formatter = useDateFormatter({ dateStyle: 'full' }); return ( diff --git a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx index 72966a7652e..88e89e3d60a 100644 --- a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx @@ -31,13 +31,13 @@ Use the `value` or `defaultValue` prop to set the selected date range, using obj ```tsx render "use client"; -import {parseDate, getLocalTimeZone} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; +import {useDateFormatter, type RangeValue} from 'react-aria'; import {DateRangePicker} from '@react-spectrum/s2'; import {useState} from 'react'; function Example() { - let [range, setRange] = useState({ + let [range, setRange] = useState | null>({ start: parseDate('2025-02-03'), end: parseDate('2025-02-12') }); @@ -50,10 +50,10 @@ function Example() { value={range} onChange={setRange} /> {/*- end highlight -*/} -

Selected range: {formatter.formatRange( +

Selected range: {range ? formatter.formatRange( range.start.toDate(getLocalTimeZone()), range.end.toDate(getLocalTimeZone()) - )}

+ ) : '--'}

); } diff --git a/packages/dev/s2-docs/pages/s2/Dialog.mdx b/packages/dev/s2-docs/pages/s2/Dialog.mdx index fa45509b9c3..d3334a52ced 100644 --- a/packages/dev/s2-docs/pages/s2/Dialog.mdx +++ b/packages/dev/s2-docs/pages/s2/Dialog.mdx @@ -62,7 +62,7 @@ Use `Dialog` for standard dialog layouts. It supports `Image`, `Heading`, `Heade ```tsx render docs={docs.exports.Dialog} links={docs.links} props={['size', 'isDismissible']} type="s2" "use client"; -import {Dialog, DialogTrigger, Button, ButtonGroup, Heading, Header, Content, Footer, Checkbox, Image, Form, TextField} from '@react-spectrum/s2'; +import {Dialog, DialogTrigger, Button, ButtonGroup, Heading, Header, Content, Footer, Checkbox, Image} from '@react-spectrum/s2'; import heroImage from 'url:./assets/preview.png'; function Example(props) { @@ -191,11 +191,11 @@ Use `DialogContainer` to show a dialog programmatically or mount in a different ```tsx render "use client"; -import {DialogContainer, Dialog, Button, ButtonGroup, Heading, Content, ActionMenu, MenuItem} from '@react-spectrum/s2'; +import {DialogContainer, Dialog, Button, ButtonGroup, Heading, Content, ActionMenu, MenuItem, type Key} from '@react-spectrum/s2'; import {useState} from 'react'; function DialogContainerExample() { - let [dialogType, setDialogType] = useState(null); + let [dialogType, setDialogType] = useState(null); return ( <> diff --git a/packages/dev/s2-docs/pages/s2/DropZone.mdx b/packages/dev/s2-docs/pages/s2/DropZone.mdx index 04d5f469f18..ac30dfa1a56 100644 --- a/packages/dev/s2-docs/pages/s2/DropZone.mdx +++ b/packages/dev/s2-docs/pages/s2/DropZone.mdx @@ -13,12 +13,12 @@ export const description = 'An area into which one or multiple objects can be dr ```tsx render type="s2" docs={docs.exports.DropZone} links={docs.links} props={['size', 'replaceMessage']} wide "use client"; import {DropZone, IllustratedMessage, Heading, Content, ButtonGroup, Button, FileTrigger} from '@react-spectrum/s2'; -import {useState} from 'react'; +import React, {useState} from 'react'; import CloudUpload from '@react-spectrum/s2/illustrations/gradient/generic1/CloudUpload'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; function Example(props) { - let [content, setContent] = useState(null); + let [content, setContent] = useState(null); return ( { + if (!files) return; let url = URL.createObjectURL(files[0]); setContent({files[0].name}); }}> diff --git a/packages/dev/s2-docs/pages/s2/Form.mdx b/packages/dev/s2-docs/pages/s2/Form.mdx index 38c13eed408..5b4cb93ab15 100644 --- a/packages/dev/s2-docs/pages/s2/Form.mdx +++ b/packages/dev/s2-docs/pages/s2/Form.mdx @@ -60,12 +60,13 @@ import {Form, TextField, Button} from '@react-spectrum/s2'; event.preventDefault(); // Get data from form. - let formData = new FormData(event.target); + let target = event.target as HTMLFormElement; + let formData = new FormData(target); let name = formData.get('name'); alert(`Hello, ${name}!`); // Reset form after submission. - event.target.reset(); + target.reset(); }}> {/*- end highlight -*/} diff --git a/packages/dev/s2-docs/pages/s2/Menu.mdx b/packages/dev/s2-docs/pages/s2/Menu.mdx index 196640edff7..0162fe79669 100644 --- a/packages/dev/s2-docs/pages/s2/Menu.mdx +++ b/packages/dev/s2-docs/pages/s2/Menu.mdx @@ -279,7 +279,7 @@ Wrap the Menu in a [Popover](Popover) to add additional sibling elements. This e ```tsx render "use client"; -import {Popover, MenuTrigger, ActionButton, SearchField, Menu, MenuItem, MenuSection, SubmenuTrigger, Avatar, Switch, Divider, Text} from '@react-spectrum/s2'; +import {Popover, MenuTrigger, ActionButton, Menu, MenuItem, MenuSection, SubmenuTrigger, Avatar, Switch, Divider, Text} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import Buildings from '@react-spectrum/s2/icons/Buildings'; import Settings from '@react-spectrum/s2/icons/Settings'; diff --git a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx index e219a9dbbc6..70fc70de365 100644 --- a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx @@ -34,7 +34,7 @@ import {RadioGroup, Radio} from '@react-spectrum/s2'; import {useState} from 'react'; function Example() { - let [selected, setSelected] = useState(null); + let [selected, setSelected] = useState(null); return ( <> diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx index e79d28f14c2..8e10cecc38e 100644 --- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx @@ -154,11 +154,10 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate ```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['allowsNonContiguousRanges']} wide type="s2" "use client"; import {today, getLocalTimeZone} from '@internationalized/date'; -import {RangeCalendar, useLocale} from '@react-spectrum/s2'; +import {RangeCalendar} from '@react-spectrum/s2'; import {useState} from 'react'; function Example(props) { - let {locale} = useLocale(); let now = today(getLocalTimeZone()); let [range, setRange] = useState({ start: now.add({days: 6}), diff --git a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx index 17f85426a54..bc1a77929c9 100644 --- a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx +++ b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx @@ -83,11 +83,11 @@ Use the `defaultSelectedKey` or `selectedKey` prop to set the selected item. The ```tsx render "use client"; -import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2'; +import {SegmentedControl, SegmentedControlItem, type Key} from '@react-spectrum/s2'; import {useState} from 'react'; function Example() { - let [selected, setSelected] = useState('month'); + let [selected, setSelected] = useState('month'); return (
diff --git a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx index e9f261e6d52..168ef2f9f72 100644 --- a/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/SelectBoxGroup.mdx @@ -75,12 +75,12 @@ function Example() { selectionMode="multiple" styles={style({width: 'full'})}> {/*- begin highlight -*/} - {(item) => ( - + {((item) => ( + {item.illustration} {item.name} - )} + ))} {/*- end highlight -*/} ); diff --git a/packages/dev/s2-docs/pages/s2/Skeleton.mdx b/packages/dev/s2-docs/pages/s2/Skeleton.mdx index 73b7fb40ee4..a675e60ff3a 100644 --- a/packages/dev/s2-docs/pages/s2/Skeleton.mdx +++ b/packages/dev/s2-docs/pages/s2/Skeleton.mdx @@ -12,7 +12,7 @@ export const description = 'Wraps around content to render it as a placeholder.' ```tsx render docs={docs.exports.Skeleton} links={docs.links} props={['isLoading']} initialProps={{isLoading: true}} type="s2" wide "use client"; -import {Skeleton, Image, Heading, Text} from '@react-spectrum/s2' +import {Skeleton, Image, Text} from '@react-spectrum/s2' import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import preview from 'url:./assets/preview.png'; import Select from '@react-spectrum/s2/icons/Select'; diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx index 7801139f8ca..8731902d9b7 100644 --- a/packages/dev/s2-docs/pages/s2/TableView.mdx +++ b/packages/dev/s2-docs/pages/s2/TableView.mdx @@ -284,10 +284,10 @@ const rows = [ ///- end collapse -/// const columns = [ - {id: 'name', name: 'Name', isRowHeader: true, showDivider: true}, - {id: 'type', name: 'Type', align: 'center', showDivider: true}, - {id: 'level', name: 'Level', align: 'end'} -]; + {id: 'name', name: 'Name', isRowHeader: true, showDivider: true, align: undefined}, + {id: 'type', name: 'Type', isRowHeader: false, showDivider: true, align: 'center'}, + {id: 'level', name: 'Level', isRowHeader: false, showDivider: false, align: 'end'} +] as const; function TableWithDividers() { return ( @@ -405,7 +405,7 @@ Render an `` instead of a `` to allow users to edit the valu ```tsx render type="s2" "use client"; -import {TableView, TableHeader, Column, TableBody, Row, Cell, EditableCell, TextField, ActionButton, Picker, PickerItem, Text, type Key} from '@react-spectrum/s2'; +import {TableView, TableHeader, Column, TableBody, Row, Cell, EditableCell, TextField, ActionButton, Picker, PickerItem, Text, type Key, type ColumnProps} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import User from '@react-spectrum/s2/icons/User'; import Edit from '@react-spectrum/s2/icons/Edit'; @@ -654,7 +654,7 @@ function SortableTable() { aria-label="Favorite pokemon" styles={style({width: 400, maxWidth: 'full'})} ///- begin highlight -/// - sortDescriptor={sortDescriptor} + sortDescriptor={sortDescriptor ?? undefined} onSortChange={setSortDescriptor} ///- end highlight -/// > @@ -749,7 +749,7 @@ const columns = [ ]; ///- end collapse -/// -const initialWidths = new Map([ +const initialWidths = new Map([ ['file', '1fr'], ['size', 80], ['date', 100] diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx index d654578de65..9009d062de4 100644 --- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx @@ -12,7 +12,6 @@ export const description = 'Displays a list of items, with support for keyboard ```tsx render docs={docs.exports.TagGroup} links={docs.links} props={['label', 'selectionMode', 'size', 'labelPosition', 'maxRows', 'description', 'contextualHelp', 'isEmphasized']} initialProps={{label: 'Ice cream flavors', selectionMode: 'multiple', maxRows: 2}} controlOptions={{maxRows: {minValue: 1}}} type="s2" import {TagGroup, Tag} from '@react-spectrum/s2'; -import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; Chocolate @@ -42,8 +41,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; ```tsx render type="s2" "use client"; -import {TagGroup, Tag, TextField, Button, useListData} from '@react-spectrum/s2'; -import {useState} from 'react'; +import {TagGroup, Tag, useListData} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; function PhotoCategories() { @@ -204,9 +202,8 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.TagGroup} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide "use client"; -import {TagGroup, Tag} from '@react-spectrum/s2'; +import {TagGroup, Tag, type Selection} from '@react-spectrum/s2'; import {useState} from 'react'; -import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; function Example(props) { let [selected, setSelected] = useState(new Set()); diff --git a/packages/dev/s2-docs/pages/s2/TimeField.mdx b/packages/dev/s2-docs/pages/s2/TimeField.mdx index 9bad9790770..5a717244559 100644 --- a/packages/dev/s2-docs/pages/s2/TimeField.mdx +++ b/packages/dev/s2-docs/pages/s2/TimeField.mdx @@ -31,7 +31,7 @@ import {TimeField} from '@react-spectrum/s2'; import {useState} from 'react'; function Example() { - let [time, setTime] = useState(new Time(11, 45)); + let [time, setTime] = useState