From eb01ceec28b00128cbb5d07735fb1904a6f4e51e Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Thu, 4 Sep 2025 06:08:58 +1000
Subject: [PATCH 1/2] chore: Test app add missing components (#8779)

* chore: Add date time components to test apps

* turn on verdaccio

* Revert "turn on verdaccio"

This reverts commit 3c15e2dc590af7870265f18285a81b40a366cb90.

* turn on verdaccio

* add ActionBar, FullscreenDialog, NotificationBadge, SelectBox

* fix import paths

* Fix import case for PaperAirplane and StarFilled1

* Revert "turn on verdaccio"

This reverts commit 3677ebf3c55fffc6186aa744cf41fbc34d80c176.

* Add ActionBar import to App.js
---
 examples/s2-next-macros/src/app/Lazy.js       | 62 +++++++++++++++++++
 examples/s2-next-macros/src/app/page.tsx      | 15 ++++-
 examples/s2-parcel-example/src/App.js         | 15 ++++-
 examples/s2-parcel-example/src/Lazy.js        | 62 +++++++++++++++++++
 examples/s2-vite-project/src/App.tsx          | 15 ++++-
 examples/s2-vite-project/src/Lazy.tsx         | 62 +++++++++++++++++++
 examples/s2-webpack-5-example/src/App.js      | 15 ++++-
 examples/s2-webpack-5-example/src/Lazy.js     | 62 +++++++++++++++++++
 .../src/Lazy.tsx                              | 62 +++++++++++++++++++
 9 files changed, 362 insertions(+), 8 deletions(-)

diff --git a/examples/s2-next-macros/src/app/Lazy.js b/examples/s2-next-macros/src/app/Lazy.js
index 4dd0c1afbd4..cd4d1202b2a 100644
--- a/examples/s2-next-macros/src/app/Lazy.js
+++ b/examples/s2-next-macros/src/app/Lazy.js
@@ -25,6 +25,7 @@ import {
   Breadcrumbs,
   Button,
   ButtonGroup,
+  Calendar,
   Checkbox,
   CheckboxGroup,
   CloseButton,
@@ -39,6 +40,9 @@ import {
   Content,
   ContextualHelp,
   CustomDialog,
+  DateField,
+  DatePicker,
+  DateRangePicker,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -49,6 +53,7 @@ import {
   DropZone,
   Footer,
   Form,
+  FullscreenDialog,
   Header,
   Heading,
   IllustratedMessage,
@@ -65,10 +70,13 @@ import {
   ProgressCircle,
   Radio,
   RadioGroup,
+  RangeCalendar,
   RangeSlider,
   SearchField,
   SegmentedControl,
   SegmentedControlItem,
+  SelectBox,
+  SelectBoxGroup,
   Slider,
   StatusLight,
   Switch,
@@ -81,12 +89,17 @@ import {
   Text,
   TextArea,
   TextField,
+  TimeField,
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
 import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
+import Server from "@react-spectrum/s2/illustrations/linear/Server";
+import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
+import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
+import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
 import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -110,6 +123,15 @@ export default function Lazy() {
         <ColorWheel defaultValue="hsl(30, 100%, 50%)" />
       </Section>
 
+      <Section title="Date and time">
+        <Calendar aria-label="Calendar" />
+        <DateField label="Date Field" />
+        <DatePicker label="Date Picker" />
+        <DateRangePicker label="Date Range Picker" />
+        <RangeCalendar aria-label="Range Calendar" />
+        <TimeField label="Time Field" />
+      </Section>
+
       <Section title="Drag and Drop">
         <DropZone>
           <IllustratedMessage>
@@ -141,6 +163,26 @@ export default function Lazy() {
           <TextArea label="Description" />
           <TextField label="Email" />
           <TextField label="Password" />
+          <SelectBoxGroup aria-label="Choose a cloud">
+            <SelectBox id="aws" textValue="Amazon Web Services">
+              <Server />
+              <Text slot="label">Amazon Web Services</Text>
+              <Text slot="description">Reliable cloud infrastructure</Text>
+            </SelectBox>
+            <SelectBox id="azure" textValue="Microsoft Azure">
+              <AlertNotice />
+              <Text slot="label">Microsoft Azure</Text>
+            </SelectBox>
+            <SelectBox id="gcp" textValue="Google Cloud Platform">
+              <PaperAirplane />
+              <Text slot="label">Google Cloud Platform</Text>
+            </SelectBox>
+            <SelectBox id="ibm" textValue="IBM Cloud">
+              <StarFilled1 />
+              <Text slot="label">IBM Cloud</Text>
+              <Text slot="description">Hybrid cloud solutions</Text>
+            </SelectBox>
+          </SelectBoxGroup>
         </Form>
       </Section>
 
@@ -288,6 +330,26 @@ export default function Lazy() {
           </Popover>
         </DialogTrigger>
 
+        <DialogTrigger>
+          <Button variant="primary">Fullscreen</Button>
+          <FullscreenDialog>
+            {({close}) => <>
+                <Heading slot="title">Dialog title</Heading>
+                <Header>Header</Header>
+                <Content>
+                  {[...Array(5)].map((_, i) => <p key={i} style={{
+                    marginTop: i === 0 ? 0 : undefined,
+                    marginBottom: i === 4 ? 0 : undefined
+                  }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>)}
+                </Content>
+                <ButtonGroup>
+                  <Button onPress={close} variant="secondary">Cancel</Button>
+                  <Button onPress={close} variant="accent">Save</Button>
+                </ButtonGroup>
+              </>}
+          </FullscreenDialog>
+        </DialogTrigger>
+
         <TooltipTrigger>
           <ActionButton aria-label="Edit Name">
             <Edit />
diff --git a/examples/s2-next-macros/src/app/page.tsx b/examples/s2-next-macros/src/app/page.tsx
index 9caf29b5501..9c6897e905e 100644
--- a/examples/s2-next-macros/src/app/page.tsx
+++ b/examples/s2-next-macros/src/app/page.tsx
@@ -15,6 +15,7 @@
 import React, { useState } from "react";
 import "@react-spectrum/s2/page.css";
 import {
+  ActionBar,
   ActionButton,
   ActionButtonGroup,
   ActionMenu,
@@ -28,6 +29,7 @@ import {
   Menu,
   MenuItem,
   MenuTrigger,
+  NotificationBadge,
   Picker,
   PickerItem,
   Row,
@@ -96,7 +98,7 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
@@ -180,7 +182,16 @@ function App() {
               <MenuItem>Paste</MenuItem>
             </Menu>
           </MenuTrigger>
-          <TableView aria-label="Files" styles={style({width: 320, height: 320})}>
+          <TableView
+            aria-label="Files"
+            styles={style({width: 320, height: 320})}
+            renderActionBar={selectedKeys => (
+              <ActionBar>
+                <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
+                <ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
+                <ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
+              </ActionBar>
+            )}>
             <TableHeader>
               <Column isRowHeader>Name</Column>
               <Column>Type</Column>
diff --git a/examples/s2-parcel-example/src/App.js b/examples/s2-parcel-example/src/App.js
index 282fe786ca1..6ce4cf2a2ed 100644
--- a/examples/s2-parcel-example/src/App.js
+++ b/examples/s2-parcel-example/src/App.js
@@ -13,6 +13,7 @@
 import React, { useState } from "react";
 import "@react-spectrum/s2/page.css";
 import {
+  ActionBar,
   ActionButton,
   ActionButtonGroup,
   ActionMenu,
@@ -26,6 +27,7 @@ import {
   Menu,
   MenuItem,
   MenuTrigger,
+  NotificationBadge,
   Picker,
   PickerItem,
   Row,
@@ -94,7 +96,7 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
@@ -178,7 +180,16 @@ function App() {
               <MenuItem>Paste</MenuItem>
             </Menu>
           </MenuTrigger>
-          <TableView aria-label="Files" styles={style({width: 320, height: 320})}>
+          <TableView
+            aria-label="Files"
+            styles={style({width: 320, height: 320})}
+            renderActionBar={selectedKeys => (
+              <ActionBar>
+                <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
+                <ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
+                <ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
+              </ActionBar>
+            )}>
             <TableHeader>
               <Column isRowHeader>Name</Column>
               <Column>Type</Column>
diff --git a/examples/s2-parcel-example/src/Lazy.js b/examples/s2-parcel-example/src/Lazy.js
index d43f33f8cc1..43376848858 100644
--- a/examples/s2-parcel-example/src/Lazy.js
+++ b/examples/s2-parcel-example/src/Lazy.js
@@ -11,6 +11,7 @@ import {
   Breadcrumbs,
   Button,
   ButtonGroup,
+  Calendar,
   Checkbox,
   CheckboxGroup,
   CloseButton,
@@ -25,6 +26,9 @@ import {
   Content,
   ContextualHelp,
   CustomDialog,
+  DateField,
+  DatePicker,
+  DateRangePicker,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -35,6 +39,7 @@ import {
   DropZone,
   Footer,
   Form,
+  FullscreenDialog,
   Header,
   Heading,
   IllustratedMessage,
@@ -51,10 +56,13 @@ import {
   ProgressCircle,
   Radio,
   RadioGroup,
+  RangeCalendar,
   RangeSlider,
   SearchField,
   SegmentedControl,
   SegmentedControlItem,
+  SelectBox,
+  SelectBoxGroup,
   Slider,
   StatusLight,
   Switch,
@@ -67,12 +75,17 @@ import {
   Text,
   TextArea,
   TextField,
+  TimeField,
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
 import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
+import Server from "@react-spectrum/s2/illustrations/linear/Server";
+import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
+import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
+import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
 import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -96,6 +109,15 @@ export default function Lazy() {
         <ColorWheel defaultValue="hsl(30, 100%, 50%)" />
       </Section>
 
+      <Section title="Date and time">
+        <Calendar aria-label="Calendar" />
+        <DateField label="Date Field" />
+        <DatePicker label="Date Picker" />
+        <DateRangePicker label="Date Range Picker" />
+        <RangeCalendar aria-label="Range Calendar" />
+        <TimeField label="Time Field" />
+      </Section>
+
       <Section title="Drag and Drop">
         <DropZone>
           <IllustratedMessage>
@@ -127,6 +149,26 @@ export default function Lazy() {
           <TextArea label="Description" />
           <TextField label="Email" />
           <TextField label="Password" />
+          <SelectBoxGroup aria-label="Choose a cloud">
+            <SelectBox id="aws" textValue="Amazon Web Services">
+              <Server />
+              <Text slot="label">Amazon Web Services</Text>
+              <Text slot="description">Reliable cloud infrastructure</Text>
+            </SelectBox>
+            <SelectBox id="azure" textValue="Microsoft Azure">
+              <AlertNotice />
+              <Text slot="label">Microsoft Azure</Text>
+            </SelectBox>
+            <SelectBox id="gcp" textValue="Google Cloud Platform">
+              <PaperAirplane />
+              <Text slot="label">Google Cloud Platform</Text>
+            </SelectBox>
+            <SelectBox id="ibm" textValue="IBM Cloud">
+              <StarFilled1 />
+              <Text slot="label">IBM Cloud</Text>
+              <Text slot="description">Hybrid cloud solutions</Text>
+            </SelectBox>
+          </SelectBoxGroup>
         </Form>
       </Section>
 
@@ -274,6 +316,26 @@ export default function Lazy() {
           </Popover>
         </DialogTrigger>
 
+        <DialogTrigger>
+          <Button variant="primary">Fullscreen</Button>
+          <FullscreenDialog>
+            {({close}) => <>
+                <Heading slot="title">Dialog title</Heading>
+                <Header>Header</Header>
+                <Content>
+                  {[...Array(5)].map((_, i) => <p key={i} style={{
+                    marginTop: i === 0 ? 0 : undefined,
+                    marginBottom: i === 4 ? 0 : undefined
+                  }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>)}
+                </Content>
+                <ButtonGroup>
+                  <Button onPress={close} variant="secondary">Cancel</Button>
+                  <Button onPress={close} variant="accent">Save</Button>
+                </ButtonGroup>
+              </>}
+          </FullscreenDialog>
+        </DialogTrigger>
+
         <TooltipTrigger>
           <ActionButton aria-label="Edit Name">
             <Edit />
diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx
index a804ab39d6f..22b35908784 100644
--- a/examples/s2-vite-project/src/App.tsx
+++ b/examples/s2-vite-project/src/App.tsx
@@ -13,6 +13,7 @@
 import React, { useState } from "react";
 import "@react-spectrum/s2/page.css";
 import {
+  ActionBar,
   ActionButton,
   ActionButtonGroup,
   ActionMenu,
@@ -26,6 +27,7 @@ import {
   Menu,
   MenuItem,
   MenuTrigger,
+  NotificationBadge,
   Picker,
   PickerItem,
   Row,
@@ -94,7 +96,7 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
@@ -178,7 +180,16 @@ function App() {
               <MenuItem>Paste</MenuItem>
             </Menu>
           </MenuTrigger>
-          <TableView aria-label="Files" styles={style({width: 320, height: 320})}>
+          <TableView
+            aria-label="Files"
+            styles={style({width: 320, height: 320})}
+            renderActionBar={selectedKeys => (
+              <ActionBar>
+                <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
+                <ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
+                <ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
+              </ActionBar>
+            )}>
             <TableHeader>
               <Column isRowHeader>Name</Column>
               <Column>Type</Column>
diff --git a/examples/s2-vite-project/src/Lazy.tsx b/examples/s2-vite-project/src/Lazy.tsx
index f15e242ee45..8f500a7111e 100644
--- a/examples/s2-vite-project/src/Lazy.tsx
+++ b/examples/s2-vite-project/src/Lazy.tsx
@@ -11,6 +11,7 @@ import {
   Breadcrumbs,
   Button,
   ButtonGroup,
+  Calendar,
   Checkbox,
   CheckboxGroup,
   CloseButton,
@@ -25,6 +26,9 @@ import {
   Content,
   ContextualHelp,
   CustomDialog,
+  DateField,
+  DatePicker,
+  DateRangePicker,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -35,6 +39,7 @@ import {
   DropZone,
   Footer,
   Form,
+  FullscreenDialog,
   Header,
   Heading,
   IllustratedMessage,
@@ -51,10 +56,13 @@ import {
   ProgressCircle,
   Radio,
   RadioGroup,
+  RangeCalendar,
   RangeSlider,
   SearchField,
   SegmentedControl,
   SegmentedControlItem,
+  SelectBox,
+  SelectBoxGroup,
   Slider,
   StatusLight,
   Switch,
@@ -67,12 +75,17 @@ import {
   Text,
   TextArea,
   TextField,
+  TimeField,
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
 import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
+import Server from "@react-spectrum/s2/illustrations/linear/Server";
+import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
+import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
+import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
 import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -96,6 +109,15 @@ export default function Lazy() {
         <ColorWheel defaultValue="hsl(30, 100%, 50%)" />
       </Section>
 
+      <Section title="Date and time">
+        <Calendar aria-label="Calendar" />
+        <DateField label="Date Field" />
+        <DatePicker label="Date Picker" />
+        <DateRangePicker label="Date Range Picker" />
+        <RangeCalendar aria-label="Range Calendar" />
+        <TimeField label="Time Field" />
+      </Section>
+
       <Section title="Drag and Drop">
         <DropZone>
           <IllustratedMessage>
@@ -127,6 +149,26 @@ export default function Lazy() {
           <TextArea label="Description" />
           <TextField label="Email" />
           <TextField label="Password" />
+          <SelectBoxGroup aria-label="Choose a cloud">
+            <SelectBox id="aws" textValue="Amazon Web Services">
+              <Server />
+              <Text slot="label">Amazon Web Services</Text>
+              <Text slot="description">Reliable cloud infrastructure</Text>
+            </SelectBox>
+            <SelectBox id="azure" textValue="Microsoft Azure">
+              <AlertNotice />
+              <Text slot="label">Microsoft Azure</Text>
+            </SelectBox>
+            <SelectBox id="gcp" textValue="Google Cloud Platform">
+              <PaperAirplane />
+              <Text slot="label">Google Cloud Platform</Text>
+            </SelectBox>
+            <SelectBox id="ibm" textValue="IBM Cloud">
+              <StarFilled1 />
+              <Text slot="label">IBM Cloud</Text>
+              <Text slot="description">Hybrid cloud solutions</Text>
+            </SelectBox>
+          </SelectBoxGroup>
         </Form>
       </Section>
 
@@ -274,6 +316,26 @@ export default function Lazy() {
           </Popover>
         </DialogTrigger>
 
+        <DialogTrigger>
+          <Button variant="primary">Fullscreen</Button>
+          <FullscreenDialog>
+            {({close}) => <>
+                <Heading slot="title">Dialog title</Heading>
+                <Header>Header</Header>
+                <Content>
+                  {[...Array(5)].map((_, i) => <p key={i} style={{
+                    marginTop: i === 0 ? 0 : undefined,
+                    marginBottom: i === 4 ? 0 : undefined
+                  }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>)}
+                </Content>
+                <ButtonGroup>
+                  <Button onPress={close} variant="secondary">Cancel</Button>
+                  <Button onPress={close} variant="accent">Save</Button>
+                </ButtonGroup>
+              </>}
+          </FullscreenDialog>
+        </DialogTrigger>
+
         <TooltipTrigger>
           <ActionButton aria-label="Edit Name">
             <Edit />
diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js
index 6aeb3b8201a..a9178b59e5e 100644
--- a/examples/s2-webpack-5-example/src/App.js
+++ b/examples/s2-webpack-5-example/src/App.js
@@ -13,6 +13,7 @@
 import React, { useState } from "react";
 import "@react-spectrum/s2/page.css";
 import {
+  ActionBar,
   ActionButton,
   ActionButtonGroup,
   ActionMenu,
@@ -26,6 +27,7 @@ import {
   Menu,
   MenuItem,
   MenuTrigger,
+  NotificationBadge,
   Picker,
   PickerItem,
   Row,
@@ -94,7 +96,7 @@ function App() {
         <Section title="Buttons">
           <ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
             <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
+            <Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
             <ActionButton>
               <Edit />
               <Text>Action Button</Text>
@@ -178,7 +180,16 @@ function App() {
               <MenuItem>Paste</MenuItem>
             </Menu>
           </MenuTrigger>
-          <TableView aria-label="Files" styles={style({width: 320, height: 320})}>
+          <TableView
+            aria-label="Files"
+            styles={style({width: 320, height: 320})}
+            renderActionBar={selectedKeys => (
+              <ActionBar>
+                <ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
+                <ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
+                <ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
+              </ActionBar>
+            )}>
             <TableHeader>
               <Column isRowHeader>Name</Column>
               <Column>Type</Column>
diff --git a/examples/s2-webpack-5-example/src/Lazy.js b/examples/s2-webpack-5-example/src/Lazy.js
index d43f33f8cc1..43376848858 100644
--- a/examples/s2-webpack-5-example/src/Lazy.js
+++ b/examples/s2-webpack-5-example/src/Lazy.js
@@ -11,6 +11,7 @@ import {
   Breadcrumbs,
   Button,
   ButtonGroup,
+  Calendar,
   Checkbox,
   CheckboxGroup,
   CloseButton,
@@ -25,6 +26,9 @@ import {
   Content,
   ContextualHelp,
   CustomDialog,
+  DateField,
+  DatePicker,
+  DateRangePicker,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -35,6 +39,7 @@ import {
   DropZone,
   Footer,
   Form,
+  FullscreenDialog,
   Header,
   Heading,
   IllustratedMessage,
@@ -51,10 +56,13 @@ import {
   ProgressCircle,
   Radio,
   RadioGroup,
+  RangeCalendar,
   RangeSlider,
   SearchField,
   SegmentedControl,
   SegmentedControlItem,
+  SelectBox,
+  SelectBoxGroup,
   Slider,
   StatusLight,
   Switch,
@@ -67,12 +75,17 @@ import {
   Text,
   TextArea,
   TextField,
+  TimeField,
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
 import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
+import Server from "@react-spectrum/s2/illustrations/linear/Server";
+import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
+import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
+import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
 import { style } from "@react-spectrum/s2/style" with { type: "macro" };
@@ -96,6 +109,15 @@ export default function Lazy() {
         <ColorWheel defaultValue="hsl(30, 100%, 50%)" />
       </Section>
 
+      <Section title="Date and time">
+        <Calendar aria-label="Calendar" />
+        <DateField label="Date Field" />
+        <DatePicker label="Date Picker" />
+        <DateRangePicker label="Date Range Picker" />
+        <RangeCalendar aria-label="Range Calendar" />
+        <TimeField label="Time Field" />
+      </Section>
+
       <Section title="Drag and Drop">
         <DropZone>
           <IllustratedMessage>
@@ -127,6 +149,26 @@ export default function Lazy() {
           <TextArea label="Description" />
           <TextField label="Email" />
           <TextField label="Password" />
+          <SelectBoxGroup aria-label="Choose a cloud">
+            <SelectBox id="aws" textValue="Amazon Web Services">
+              <Server />
+              <Text slot="label">Amazon Web Services</Text>
+              <Text slot="description">Reliable cloud infrastructure</Text>
+            </SelectBox>
+            <SelectBox id="azure" textValue="Microsoft Azure">
+              <AlertNotice />
+              <Text slot="label">Microsoft Azure</Text>
+            </SelectBox>
+            <SelectBox id="gcp" textValue="Google Cloud Platform">
+              <PaperAirplane />
+              <Text slot="label">Google Cloud Platform</Text>
+            </SelectBox>
+            <SelectBox id="ibm" textValue="IBM Cloud">
+              <StarFilled1 />
+              <Text slot="label">IBM Cloud</Text>
+              <Text slot="description">Hybrid cloud solutions</Text>
+            </SelectBox>
+          </SelectBoxGroup>
         </Form>
       </Section>
 
@@ -274,6 +316,26 @@ export default function Lazy() {
           </Popover>
         </DialogTrigger>
 
+        <DialogTrigger>
+          <Button variant="primary">Fullscreen</Button>
+          <FullscreenDialog>
+            {({close}) => <>
+                <Heading slot="title">Dialog title</Heading>
+                <Header>Header</Header>
+                <Content>
+                  {[...Array(5)].map((_, i) => <p key={i} style={{
+                    marginTop: i === 0 ? 0 : undefined,
+                    marginBottom: i === 4 ? 0 : undefined
+                  }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>)}
+                </Content>
+                <ButtonGroup>
+                  <Button onPress={close} variant="secondary">Cancel</Button>
+                  <Button onPress={close} variant="accent">Save</Button>
+                </ButtonGroup>
+              </>}
+          </FullscreenDialog>
+        </DialogTrigger>
+
         <TooltipTrigger>
           <ActionButton aria-label="Edit Name">
             <Edit />
diff --git a/examples/s2-webpack-5-typescript-example/src/Lazy.tsx b/examples/s2-webpack-5-typescript-example/src/Lazy.tsx
index 2a3d4a41dce..848a017fbe4 100644
--- a/examples/s2-webpack-5-typescript-example/src/Lazy.tsx
+++ b/examples/s2-webpack-5-typescript-example/src/Lazy.tsx
@@ -10,6 +10,7 @@ import {
   Breadcrumbs,
   Button,
   ButtonGroup,
+  Calendar,
   Checkbox,
   CheckboxGroup,
   CloseButton,
@@ -24,6 +25,9 @@ import {
   Content,
   ContextualHelp,
   CustomDialog,
+  DateField,
+  DatePicker,
+  DateRangePicker,
   Dialog,
   DialogContainer,
   DialogTrigger,
@@ -34,6 +38,7 @@ import {
   DropZone,
   Footer,
   Form,
+  FullscreenDialog,
   Header,
   Heading,
   IllustratedMessage,
@@ -50,10 +55,13 @@ import {
   ProgressCircle,
   Radio,
   RadioGroup,
+  RangeCalendar,
   RangeSlider,
   SearchField,
   SegmentedControl,
   SegmentedControlItem,
+  SelectBox,
+  SelectBoxGroup,
   Slider,
   StatusLight,
   Switch,
@@ -66,12 +74,17 @@ import {
   Text,
   TextArea,
   TextField,
+  TimeField,
   Tooltip,
   TooltipTrigger,
 } from "@react-spectrum/s2";
 import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
 import Cloud from "@react-spectrum/s2/illustrations/linear/Cloud";
 import DropToUpload from "@react-spectrum/s2/illustrations/linear/DropToUpload";
+import Server from "@react-spectrum/s2/illustrations/linear/Server";
+import AlertNotice from "@react-spectrum/s2/illustrations/linear/AlertNotice";
+import PaperAirplane from "@react-spectrum/s2/illustrations/linear/Paperairplane";
+import StarFilled1 from "@react-spectrum/s2/illustrations/linear/Star";
 import Edit from "@react-spectrum/s2/icons/Edit";
 import Section from "./components/Section";
 import {style} from "@react-spectrum/s2/style" with { type: "macro" };
@@ -96,6 +109,15 @@ export default function Lazy() {
         <ColorWheel defaultValue="hsl(30, 100%, 50%)" />
       </Section>
 
+      <Section title="Date and time">
+        <Calendar aria-label="Calendar" />
+        <DateField label="Date Field" />
+        <DatePicker label="Date Picker" />
+        <DateRangePicker label="Date Range Picker" />
+        <RangeCalendar aria-label="Range Calendar" />
+        <TimeField label="Time Field" />
+      </Section>
+
       <Section title="Drag and Drop">
         <DropZone>
           <IllustratedMessage>
@@ -127,6 +149,26 @@ export default function Lazy() {
           <TextArea label="Description" />
           <TextField label="Email" />
           <TextField label="Password" />
+          <SelectBoxGroup aria-label="Choose a cloud">
+            <SelectBox id="aws" textValue="Amazon Web Services">
+              <Server />
+              <Text slot="label">Amazon Web Services</Text>
+              <Text slot="description">Reliable cloud infrastructure</Text>
+            </SelectBox>
+            <SelectBox id="azure" textValue="Microsoft Azure">
+              <AlertNotice />
+              <Text slot="label">Microsoft Azure</Text>
+            </SelectBox>
+            <SelectBox id="gcp" textValue="Google Cloud Platform">
+              <PaperAirplane />
+              <Text slot="label">Google Cloud Platform</Text>
+            </SelectBox>
+            <SelectBox id="ibm" textValue="IBM Cloud">
+              <StarFilled1 />
+              <Text slot="label">IBM Cloud</Text>
+              <Text slot="description">Hybrid cloud solutions</Text>
+            </SelectBox>
+          </SelectBoxGroup>
         </Form>
       </Section>
 
@@ -274,6 +316,26 @@ export default function Lazy() {
           </Popover>
         </DialogTrigger>
 
+        <DialogTrigger>
+          <Button variant="primary">Fullscreen</Button>
+          <FullscreenDialog>
+            {({close}) => <>
+                <Heading slot="title">Dialog title</Heading>
+                <Header>Header</Header>
+                <Content>
+                  {[...Array(5)].map((_, i) => <p key={i} style={{
+                    marginTop: i === 0 ? 0 : undefined,
+                    marginBottom: i === 4 ? 0 : undefined
+                  }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</p>)}
+                </Content>
+                <ButtonGroup>
+                  <Button onPress={close} variant="secondary">Cancel</Button>
+                  <Button onPress={close} variant="accent">Save</Button>
+                </ButtonGroup>
+              </>}
+          </FullscreenDialog>
+        </DialogTrigger>
+
         <TooltipTrigger>
           <ActionButton aria-label="Edit Name">
             <Edit />

From 6618d3812dc3801ce6c110aee1f55e60aa1735f2 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 3 Sep 2025 16:21:42 -0700
Subject: [PATCH 2/2] feat: support selectionAlignment in Calendar (#8752)

* feat: support selectionAlignment in Calendar

* add tests

* update prop description

* update styles in story

* update story

* clean up story, add jsdoc default

* fix lint
---
 .../calendar/stories/Calendar.stories.tsx     |  4 +
 .../stories/RangeCalendar.stories.tsx         |  4 +
 .../calendar/test/Calendar.test.js            | 18 ++++
 .../calendar/test/RangeCalendar.test.js       | 17 ++++
 .../calendar/src/useCalendarState.ts          |  5 +-
 .../calendar/src/useRangeCalendarState.ts     | 20 +++-
 packages/@react-types/calendar/src/index.d.ts |  7 +-
 .../stories/Calendar.stories.tsx              | 96 +++++++++++++++----
 .../test/Calendar.test.js                     | 35 +++++++
 .../test/RangeCalendar.test.tsx               | 35 +++++++
 10 files changed, 218 insertions(+), 23 deletions(-)

diff --git a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
index 04d513ded6d..341afa93dda 100644
--- a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
@@ -92,6 +92,10 @@ export default {
     },
     errorMessage: {
       control: 'text'
+    },
+    selectionAlignment: {
+      control: 'select',
+      options: ['start', 'center', 'end']
     }
   }
 } as Meta<typeof Calendar>;
diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
index e545b9dad5f..80c54f6553e 100644
--- a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
@@ -84,6 +84,10 @@ export default {
     },
     errorMessage: {
       control: 'text'
+    },
+    selectionAlignment: {
+      control: 'select',
+      options: ['start', 'center', 'end']
     }
   }
 } as Meta<typeof RangeCalendar>;
diff --git a/packages/@react-spectrum/calendar/test/Calendar.test.js b/packages/@react-spectrum/calendar/test/Calendar.test.js
index cc6fb087623..226b2c413d7 100644
--- a/packages/@react-spectrum/calendar/test/Calendar.test.js
+++ b/packages/@react-spectrum/calendar/test/Calendar.test.js
@@ -91,6 +91,24 @@ describe('Calendar', () => {
       expect(grids[1].contains(cell)).toBe(true);
     });
 
+    it.each([
+      {name: 'at the start', alignment: 'start', expected: ['February 2020', 'March 2020', 'April 2020']},
+      {name: 'in the center', alignment: 'center', expected: ['January 2020', 'February 2020', 'March 2020']},
+      {name: 'at the end', alignment: 'end', expected: ['December 2019', 'January 2020', 'February 2020']}
+    ])('should align the initial value $name', async ({alignment, expected}) => {
+      const {getAllByRole} = render(
+        <Calendar visibleMonths={3} defaultValue={new CalendarDate(2020, 2, 3)} selectionAlignment={alignment} />
+      );
+  
+      let grids = getAllByRole('grid');
+      expect(grids).toHaveLength(3);
+  
+      expect(grids[0]).toHaveAttribute('aria-label', expected[0]);
+      expect(grids[1]).toHaveAttribute('aria-label', expected[1]);
+      expect(grids[2]).toHaveAttribute('aria-label', expected[2]);
+    });
+  
+
     it('should constrain the visible region depending on the minValue', () => {
       let {getAllByRole, getByLabelText} = render(<Calendar value={new CalendarDate(2019, 2, 3)} minValue={new CalendarDate(2019, 2, 1)} visibleMonths={3} />);
 
diff --git a/packages/@react-spectrum/calendar/test/RangeCalendar.test.js b/packages/@react-spectrum/calendar/test/RangeCalendar.test.js
index 049423e09d2..befe4384ef0 100644
--- a/packages/@react-spectrum/calendar/test/RangeCalendar.test.js
+++ b/packages/@react-spectrum/calendar/test/RangeCalendar.test.js
@@ -201,6 +201,23 @@ describe('RangeCalendar', () => {
       expect(cells.every(cell => grids[1].contains(cell))).toBe(true);
     });
 
+    it.each([
+      {name: 'at the start', alignment: 'start', expected: ['February 2020', 'March 2020', 'April 2020']},
+      {name: 'in the center', alignment: 'center', expected: ['January 2020', 'February 2020', 'March 2020']},
+      {name: 'at the end', alignment: 'end', expected: ['December 2019', 'January 2020', 'February 2020']}
+    ])('should align the initial value $name', async ({alignment, expected}) => {
+      const {getAllByRole} = render(
+        <RangeCalendar visibleMonths={3} defaultValue={{start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 2, 10)}} selectionAlignment={alignment} />
+      );
+  
+      let grids = getAllByRole('grid');
+      expect(grids).toHaveLength(3);
+  
+      expect(grids[0]).toHaveAttribute('aria-label', expected[0]);
+      expect(grids[1]).toHaveAttribute('aria-label', expected[1]);
+      expect(grids[2]).toHaveAttribute('aria-label', expected[2]);
+    });
+
     it('should constrain the visible region depending on the minValue', () => {
       let {getAllByRole, getAllByLabelText} = render(<RangeCalendar value={{start: new CalendarDate(2019, 2, 3), end: new CalendarDate(2019, 2, 10)}} minValue={new CalendarDate(2019, 2, 1)} visibleMonths={3} />);
 
diff --git a/packages/@react-stately/calendar/src/useCalendarState.ts b/packages/@react-stately/calendar/src/useCalendarState.ts
index d1da4d05b65..4d289535a4e 100644
--- a/packages/@react-stately/calendar/src/useCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useCalendarState.ts
@@ -50,7 +50,10 @@ export interface CalendarStateOptions<T extends DateValue = DateValue> extends C
    * @default {months: 1}
    */
   visibleDuration?: DateDuration,
-  /** Determines how to align the initial selection relative to the visible date range. */
+  /** 
+   * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. 
+   * @default 'center'
+   */
   selectionAlignment?: 'start' | 'center' | 'end'
 }
 /**
diff --git a/packages/@react-stately/calendar/src/useRangeCalendarState.ts b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
index a9ef0b72ded..e57623fe57c 100644
--- a/packages/@react-stately/calendar/src/useRangeCalendarState.ts
+++ b/packages/@react-stately/calendar/src/useRangeCalendarState.ts
@@ -33,7 +33,12 @@ export interface RangeCalendarStateOptions<T extends DateValue = DateValue> exte
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
    */
-  visibleDuration?: DateDuration
+  visibleDuration?: DateDuration,
+  /** 
+   * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. 
+   * @default 'center'
+   */
+  selectionAlignment?: 'start' | 'center' | 'end'
 }
 
 /**
@@ -41,7 +46,16 @@ export interface RangeCalendarStateOptions<T extends DateValue = DateValue> exte
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
  */
 export function useRangeCalendarState<T extends DateValue = DateValue>(props: RangeCalendarStateOptions<T>): RangeCalendarState {
-  let {value: valueProp, defaultValue, onChange, createCalendar, locale, visibleDuration = {months: 1}, minValue, maxValue, ...calendarProps} = props;
+  let {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    createCalendar,
+    locale,
+    visibleDuration = {months: 1},
+    minValue,
+    maxValue,
+    ...calendarProps} = props;
   let [value, setValue] = useControlledState<RangeValue<T> | null, RangeValue<MappedDateValue<T>>>(
     valueProp!,
     defaultValue || null!,
@@ -73,7 +87,7 @@ export function useRangeCalendarState<T extends DateValue = DateValue>(props: Ra
     visibleDuration,
     minValue: min,
     maxValue: max,
-    selectionAlignment: alignment
+    selectionAlignment: props.selectionAlignment || alignment
   });
 
   let updateAvailableRange = (date) => {
diff --git a/packages/@react-types/calendar/src/index.d.ts b/packages/@react-types/calendar/src/index.d.ts
index 9a47c1024a3..53df3c72ce1 100644
--- a/packages/@react-types/calendar/src/index.d.ts
+++ b/packages/@react-types/calendar/src/index.d.ts
@@ -66,7 +66,12 @@ export interface CalendarPropsBase {
   /**
    * The day that starts the week.
    */
-  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat',
+  /** 
+   * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. 
+   * @default 'center'
+   */
+  selectionAlignment?: 'start' | 'center' | 'end'
 }
 
 export type DateRange = RangeValue<DateValue> | null;
diff --git a/packages/react-aria-components/stories/Calendar.stories.tsx b/packages/react-aria-components/stories/Calendar.stories.tsx
index befe343d033..f97dd0e967c 100644
--- a/packages/react-aria-components/stories/Calendar.stories.tsx
+++ b/packages/react-aria-components/stories/Calendar.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {Button, Calendar, CalendarCell, CalendarGrid, CalendarStateContext, Heading, RangeCalendar} from 'react-aria-components';
+import {CalendarDate, parseDate} from '@internationalized/date';
 import {Meta, StoryObj} from '@storybook/react';
 import React, {useContext} from 'react';
 import './styles.css';
@@ -21,7 +22,7 @@ export default {
 } as Meta<typeof Calendar>;
 
 export type CalendarStory = StoryObj<typeof Calendar>;
-
+export type RangeCalendarStory = StoryObj<typeof RangeCalendar>;
 
 function Footer() {
   const state = useContext(CalendarStateContext);
@@ -73,37 +74,96 @@ export const CalendarResetValue: CalendarStory = {
   )
 };
 
+function CalendarMultiMonthExample(args) {
+  let defaultDate = new CalendarDate(2021, 7, 1);
+  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
+
+  return (
+    <>
+      <button
+        style={{marginBottom: 20}}
+        onClick={() => setFocusedDate(defaultDate)}>
+        Reset focused date
+      </button>
+      <Calendar style={{width: 500}} visibleDuration={{months: 3}} focusedValue={focusedDate} onFocusChange={setFocusedDate} defaultValue={defaultDate} {...args}>
+        <div style={{display: 'flex', alignItems: 'center'}}>
+          <Button slot="previous">&lt;</Button>
+          <Heading style={{flex: 1, textAlign: 'center'}} />
+          <Button slot="next">&gt;</Button>
+        </div>
+        <div style={{display: 'flex', gap: 20}}>
+          <CalendarGrid style={{flex: 1}}>
+            {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
+          </CalendarGrid>
+          <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
+            {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
+          </CalendarGrid>
+          <CalendarGrid style={{flex: 1}} offset={{months: 2}}>
+            {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
+          </CalendarGrid>
+        </div>
+      </Calendar>
+    </>
+  );
+};
+
 export const CalendarMultiMonth: CalendarStory = {
+  render: (args) => <CalendarMultiMonthExample {...args} />,
+  args: {
+    selectionAlignment: 'center'
+  },
+  argTypes: {
+    selectionAlignment: {
+      control: 'select',
+      options: ['start', 'center', 'end']
+    }
+  }
+};
+
+export const RangeCalendarExample: RangeCalendarStory = {
   render: () => (
-    <Calendar style={{width: 500}} visibleDuration={{months: 2}}>
+    <RangeCalendar style={{width: 220}}>
       <div style={{display: 'flex', alignItems: 'center'}}>
         <Button slot="previous">&lt;</Button>
         <Heading style={{flex: 1, textAlign: 'center'}} />
         <Button slot="next">&gt;</Button>
       </div>
-      <div style={{display: 'flex', gap: 20}}>
-        <CalendarGrid style={{flex: 1}}>
-          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
-        </CalendarGrid>
-        <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
-          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
-        </CalendarGrid>
-      </div>
-    </Calendar>
+      <CalendarGrid style={{width: '100%'}}>
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+      </CalendarGrid>
+    </RangeCalendar>
   )
 };
 
-export const RangeCalendarExample: CalendarStory = {
-  render: () => (
-    <RangeCalendar style={{width: 220}}>
+
+export const RangeCalendarMultiMonthExample: RangeCalendarStory = {
+  render: (args) => (
+    <RangeCalendar style={{width: 500}} visibleDuration={{months: 3}} defaultValue={{start: parseDate('2025-08-04'), end: parseDate('2025-08-10')}} {...args} >
       <div style={{display: 'flex', alignItems: 'center'}}>
         <Button slot="previous">&lt;</Button>
         <Heading style={{flex: 1, textAlign: 'center'}} />
         <Button slot="next">&gt;</Button>
       </div>
-      <CalendarGrid style={{width: '100%'}}>
-        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
-      </CalendarGrid>
+      <div style={{display: 'flex', gap: 20}}>
+        <CalendarGrid style={{flex: 1}}>
+          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+        </CalendarGrid>
+        <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
+          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+        </CalendarGrid>
+        <CalendarGrid style={{flex: 1}} offset={{months: 2}}>
+          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+        </CalendarGrid>
+      </div>
     </RangeCalendar>
-  )
+  ),
+  args: {
+    selectionAlignment: 'center'
+  },
+  argTypes: {
+    selectionAlignment: {
+      control: 'select',
+      options: ['start', 'center', 'end']
+    }
+  }
 };
diff --git a/packages/react-aria-components/test/Calendar.test.js b/packages/react-aria-components/test/Calendar.test.js
index ba590708101..b1dc99e26c0 100644
--- a/packages/react-aria-components/test/Calendar.test.js
+++ b/packages/react-aria-components/test/Calendar.test.js
@@ -172,6 +172,41 @@ describe('Calendar', () => {
     expect(grids[1]).toHaveAttribute('aria-label', 'Appointment date, ' + formatter.format(today(getLocalTimeZone()).add({months: 1}).toDate(getLocalTimeZone())));
   });
 
+
+  it.each([
+    {name: 'at the start', alignment: 'start', expected: ['February 2020', 'March 2020', 'April 2020']},
+    {name: 'in the center', alignment: 'center', expected: ['January 2020', 'February 2020', 'March 2020']},
+    {name: 'at the end', alignment: 'end', expected: ['December 2019', 'January 2020', 'February 2020']}
+  ])('should align the initial value $name', async ({alignment, expected}) => {
+    const {getAllByRole} = render(
+      <Calendar visibleDuration={{months: 3}} defaultValue={new CalendarDate(2020, 2, 3)} selectionAlignment={alignment}>
+        <header>
+          <Button slot="previous">◀</Button>
+          <Heading />
+          <Button slot="next">▶</Button>
+        </header>
+        <div style={{display: 'flex', gap: 30}}>
+          <CalendarGrid>
+            {date => <CalendarCell date={date} />}
+          </CalendarGrid>
+          <CalendarGrid offset={{months: 1}}>
+            {date => <CalendarCell date={date} />}
+          </CalendarGrid>
+          <CalendarGrid offset={{months: 2}}>
+            {date => <CalendarCell date={date} />}
+          </CalendarGrid>
+        </div>
+      </Calendar>
+    );
+
+    let grids = getAllByRole('grid');
+    expect(grids).toHaveLength(3);
+
+    expect(grids[0]).toHaveAttribute('aria-label', expected[0]);
+    expect(grids[1]).toHaveAttribute('aria-label', expected[1]);
+    expect(grids[2]).toHaveAttribute('aria-label', expected[2]);
+  });
+
   it('should support hover', async () => {
     let hoverStartSpy = jest.fn();
     let hoverChangeSpy = jest.fn();
diff --git a/packages/react-aria-components/test/RangeCalendar.test.tsx b/packages/react-aria-components/test/RangeCalendar.test.tsx
index 8d6f69e6290..03877e4bb47 100644
--- a/packages/react-aria-components/test/RangeCalendar.test.tsx
+++ b/packages/react-aria-components/test/RangeCalendar.test.tsx
@@ -184,6 +184,41 @@ describe('RangeCalendar', () => {
     expect(grids[1]).toHaveAttribute('aria-label', 'Trip dates, ' + formatter.format(today(getLocalTimeZone()).add({months: 1}).toDate(getLocalTimeZone())));
   });
 
+  it.each([
+    {name: 'at the start', alignment: 'start', expected: ['February 2020', 'March 2020', 'April 2020']},
+    {name: 'in the center', alignment: 'center', expected: ['January 2020', 'February 2020', 'March 2020']},
+    {name: 'at the end', alignment: 'end', expected: ['December 2019', 'January 2020', 'February 2020']}
+  ])('should align the initial value $name', async ({alignment, expected}) => {
+    const {getAllByRole} = render(
+      <RangeCalendar visibleDuration={{months: 3}} defaultValue={{start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 2, 10)}} selectionAlignment={alignment as 'start' | 'center' | 'end'}>
+        <header>
+          <Button slot="previous">◀</Button>
+          <Heading />
+          <Button slot="next">▶</Button>
+        </header>
+        <div style={{display: 'flex', gap: 30}}>
+          <CalendarGrid>
+            {date => <CalendarCell date={date} />}
+          </CalendarGrid>
+          <CalendarGrid offset={{months: 1}}>
+            {date => <CalendarCell date={date} />}
+          </CalendarGrid>
+          <CalendarGrid offset={{months: 2}}>
+            {date => <CalendarCell date={date} />}
+          </CalendarGrid>
+        </div>
+      </RangeCalendar>
+    );
+
+    let grids = getAllByRole('grid');
+    expect(grids).toHaveLength(3);
+
+    expect(grids[0]).toHaveAttribute('aria-label', expected[0]);
+    expect(grids[1]).toHaveAttribute('aria-label', expected[1]);
+    expect(grids[2]).toHaveAttribute('aria-label', expected[2]);
+  });
+
+
   it('should support hover', async () => {
     let {getByRole} = renderCalendar({}, {}, {className: ({isHovered}) => isHovered ? 'hover' : ''});
     let grid = getByRole('grid');