From af0081102cef46979904fffa8c75d689dee0fad7 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 27 Mar 2026 17:50:49 -0700 Subject: [PATCH 1/9] Export child components from subpaths --- packages/@react-spectrum/s2/src/Popover.tsx | 3 +-- packages/@react-spectrum/s2/src/Tooltip.tsx | 3 +-- .../exports/Breadcrumbs.ts | 3 +++ .../react-aria-components/exports/Calendar.ts | 9 +++++++ .../exports/CheckboxGroup.ts | 10 ++++++++ .../exports/ColorArea.ts | 3 +++ .../exports/ColorField.ts | 13 ++++++++++ .../exports/ColorSlider.ts | 6 +++++ .../exports/ColorSwatchPicker.ts | 3 +++ .../exports/ColorWheel.ts | 3 +++ .../react-aria-components/exports/ComboBox.ts | 23 +++++++++++++++++ .../exports/DateField.ts | 10 ++++++++ .../exports/DatePicker.ts | 25 +++++++++++++++++++ .../exports/DateRangePicker.ts | 25 +++++++++++++++++++ .../exports/Disclosure.ts | 6 +++++ .../exports/DisclosureGroup.ts | 6 +++++ .../react-aria-components/exports/DropZone.ts | 3 +++ .../react-aria-components/exports/GridList.ts | 9 +++++++ .../react-aria-components/exports/ListBox.ts | 9 +++++++ .../react-aria-components/exports/Menu.ts | 19 ++++++++++++++ .../react-aria-components/exports/Meter.ts | 5 +++- .../react-aria-components/exports/Modal.ts | 11 ++++++++ .../exports/NumberField.ts | 19 ++++++++++++++ .../exports/OverlayArrow.ts | 18 ------------- .../react-aria-components/exports/Popover.ts | 8 ++++++ .../exports/ProgressBar.ts | 3 +++ .../exports/RadioGroup.ts | 13 ++++++++++ .../exports/RangeCalendar.ts | 9 +++++++ .../exports/SearchField.ts | 16 ++++++++++++ .../react-aria-components/exports/Select.ts | 20 +++++++++++++++ .../react-aria-components/exports/Slider.ts | 3 +++ .../react-aria-components/exports/Table.ts | 9 +++++++ .../react-aria-components/exports/Tabs.ts | 3 +++ .../react-aria-components/exports/TagGroup.ts | 12 +++++++++ .../exports/TextField.ts | 16 ++++++++++++ .../exports/TimeField.ts | 10 ++++++++ .../react-aria-components/exports/Toast.ts | 6 +++++ .../exports/ToggleButtonGroup.ts | 6 +++++ .../react-aria-components/exports/Tooltip.ts | 5 ++++ .../react-aria-components/exports/Tree.ts | 9 +++++++ 40 files changed, 369 insertions(+), 23 deletions(-) delete mode 100644 packages/react-aria-components/exports/OverlayArrow.ts diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx index 6bd173bcbca..ce5f7439872 100644 --- a/packages/@react-spectrum/s2/src/Popover.tsx +++ b/packages/@react-spectrum/s2/src/Popover.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Popover as AriaPopover, PopoverProps as AriaPopoverProps} from 'react-aria-components/Popover'; +import {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover'; import {ColorSchemeContext} from './Provider'; import {composeRenderProps} from 'react-aria-components/composeRenderProps'; import {ContextValue} from 'react-aria-components/slots'; @@ -21,7 +21,6 @@ import {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} fr import {lightDark, setColorScheme, style} from '../style' with {type: 'macro'}; import {mergeRefs} from 'react-aria/mergeRefs'; import {mergeStyles} from '../style/runtime'; -import {OverlayArrow} from 'react-aria-components/OverlayArrow'; import {StyleString} from '../style/types' with {type: 'macro'}; import {useDOMRef} from './useDOMRef'; import {useLocale} from 'react-aria/I18nProvider'; diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx index cc68092035b..4acd23ea38a 100644 --- a/packages/@react-spectrum/s2/src/Tooltip.tsx +++ b/packages/@react-spectrum/s2/src/Tooltip.tsx @@ -15,14 +15,13 @@ import { TooltipProps as AriaTooltipProps, TooltipTrigger as AriaTooltipTrigger, TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps, + OverlayArrow, TooltipRenderProps } from 'react-aria-components/Tooltip'; - import {centerPadding, setColorScheme, style} from '../style' with {type: 'macro'}; import {ColorScheme, ColorSchemeContext} from './Provider'; import {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react'; import {DOMProps, DOMRef, GlobalDOMAttributes} from '@react-types/shared'; -import {OverlayArrow} from 'react-aria-components/OverlayArrow'; import {UnsafeStyles} from './style-utils' with {type: 'macro'}; import {useDOMRef} from './useDOMRef'; import {useLocale} from 'react-aria/I18nProvider'; diff --git a/packages/react-aria-components/exports/Breadcrumbs.ts b/packages/react-aria-components/exports/Breadcrumbs.ts index d6acd9bf691..837deb316c5 100644 --- a/packages/react-aria-components/exports/Breadcrumbs.ts +++ b/packages/react-aria-components/exports/Breadcrumbs.ts @@ -16,3 +16,6 @@ import 'client-only'; export {Breadcrumbs, BreadcrumbsContext, Breadcrumb} from '../src/Breadcrumbs'; export type {BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps} from '../src/Breadcrumbs'; + +export {Link} from '../src/Link'; +export type {LinkProps, LinkRenderProps} from '../src/Link'; diff --git a/packages/react-aria-components/exports/Calendar.ts b/packages/react-aria-components/exports/Calendar.ts index a65938ca358..10dfef066c1 100644 --- a/packages/react-aria-components/exports/Calendar.ts +++ b/packages/react-aria-components/exports/Calendar.ts @@ -17,3 +17,12 @@ import 'client-only'; export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, CalendarContext, CalendarStateContext} from '../src/Calendar'; export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps} from '../src/Calendar'; export type {DateValue, CalendarState} from 'react-stately/useCalendarState'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Heading} from '../src/Heading'; +export type {HeadingProps} from '../src/Heading'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; diff --git a/packages/react-aria-components/exports/CheckboxGroup.ts b/packages/react-aria-components/exports/CheckboxGroup.ts index 0065179b333..0cdfd1ea9ed 100644 --- a/packages/react-aria-components/exports/CheckboxGroup.ts +++ b/packages/react-aria-components/exports/CheckboxGroup.ts @@ -17,3 +17,13 @@ import 'client-only'; export {Checkbox, CheckboxGroup, CheckboxContext, CheckboxGroupContext, CheckboxGroupStateContext} from '../src/Checkbox'; export type {CheckboxGroupProps, CheckboxGroupRenderProps, CheckboxRenderProps, CheckboxProps} from '../src/Checkbox'; export type {CheckboxGroupState} from 'react-stately/useCheckboxGroupState'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; diff --git a/packages/react-aria-components/exports/ColorArea.ts b/packages/react-aria-components/exports/ColorArea.ts index 67c0ae98bd9..2e29e23f2ac 100644 --- a/packages/react-aria-components/exports/ColorArea.ts +++ b/packages/react-aria-components/exports/ColorArea.ts @@ -19,3 +19,6 @@ export type {ColorAreaProps, ColorAreaRenderProps} from '../src/ColorArea'; export {parseColor, getColorChannels} from 'react-stately/Color'; export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-stately/Color'; export type {ColorAreaState} from 'react-stately/useColorAreaState'; + +export {ColorThumb} from '../src/ColorThumb'; +export type {ColorThumbProps, ColorThumbRenderProps} from '../src/ColorThumb'; diff --git a/packages/react-aria-components/exports/ColorField.ts b/packages/react-aria-components/exports/ColorField.ts index 4a299ec9f85..073fcd22d62 100644 --- a/packages/react-aria-components/exports/ColorField.ts +++ b/packages/react-aria-components/exports/ColorField.ts @@ -19,3 +19,16 @@ export type {ColorFieldProps, ColorFieldRenderProps} from '../src/ColorField'; export {parseColor, getColorChannels} from 'react-stately/Color'; export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-stately/Color'; export type {ColorFieldState} from 'react-stately/useColorFieldState'; + +export {Input} from '../src/Input'; +export type {InputProps, InputRenderProps} from '../src/Input'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; diff --git a/packages/react-aria-components/exports/ColorSlider.ts b/packages/react-aria-components/exports/ColorSlider.ts index 26d3990d84b..bd0468ff8e3 100644 --- a/packages/react-aria-components/exports/ColorSlider.ts +++ b/packages/react-aria-components/exports/ColorSlider.ts @@ -19,3 +19,9 @@ export type {ColorSliderProps, ColorSliderRenderProps} from '../src/ColorSlider' export {parseColor, getColorChannels} from 'react-stately/Color'; export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-stately/Color'; export type {ColorSliderState} from 'react-stately/useColorSliderState'; + +export {SliderOutput, SliderTrack} from '../src/Slider'; +export type {SliderOutputProps, SliderTrackProps, SliderTrackRenderProps} from '../src/Slider'; + +export {ColorThumb} from '../src/ColorThumb'; +export type {ColorThumbProps, ColorThumbRenderProps} from '../src/ColorThumb'; diff --git a/packages/react-aria-components/exports/ColorSwatchPicker.ts b/packages/react-aria-components/exports/ColorSwatchPicker.ts index 2343486e51d..d5ebf61699e 100644 --- a/packages/react-aria-components/exports/ColorSwatchPicker.ts +++ b/packages/react-aria-components/exports/ColorSwatchPicker.ts @@ -18,3 +18,6 @@ export {ColorSwatchPicker, ColorSwatchPickerItem, ColorSwatchPickerContext} from export type {ColorSwatchPickerProps, ColorSwatchPickerRenderProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemRenderProps} from '../src/ColorSwatchPicker'; export {parseColor, getColorChannels} from 'react-stately/Color'; export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-stately/Color'; + +export {ColorSwatch} from '../src/ColorSwatch'; +export type {ColorSwatchProps, ColorSwatchRenderProps} from '../src/ColorSwatch'; diff --git a/packages/react-aria-components/exports/ColorWheel.ts b/packages/react-aria-components/exports/ColorWheel.ts index 39cc0df3584..2a8d28b26ba 100644 --- a/packages/react-aria-components/exports/ColorWheel.ts +++ b/packages/react-aria-components/exports/ColorWheel.ts @@ -19,3 +19,6 @@ export type {ColorWheelProps, ColorWheelRenderProps, ColorWheelTrackProps, Color export {parseColor, getColorChannels} from 'react-stately/Color'; export type {ColorSpace, ColorChannel, Color, ColorFormat, ColorAxes, ColorChannelRange} from 'react-stately/Color'; export type {ColorWheelState} from 'react-stately/useColorWheelState'; + +export {ColorThumb} from '../src/ColorThumb'; +export type {ColorThumbProps, ColorThumbRenderProps} from '../src/ColorThumb'; diff --git a/packages/react-aria-components/exports/ComboBox.ts b/packages/react-aria-components/exports/ComboBox.ts index 464a483d159..0ae15e0594a 100644 --- a/packages/react-aria-components/exports/ComboBox.ts +++ b/packages/react-aria-components/exports/ComboBox.ts @@ -20,3 +20,26 @@ export {useFilter} from 'react-aria/useFilter'; export type {ComboBoxProps, ComboBoxRenderProps, ComboBoxValueProps, ComboBoxValueRenderProps} from '../src/ComboBox'; export type {ComboBoxState} from 'react-stately/useComboBoxState'; export type {Filter} from 'react-aria/useFilter'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Input} from '../src/Input'; +export type {InputProps, InputRenderProps} from '../src/Input'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; + +export {Popover} from '../src/Popover'; +export type {PopoverProps, PopoverRenderProps} from '../src/Popover'; + +export {ListBoxLoadMoreItem, ListBox, ListBoxItem, ListBoxSection} from '../src/ListBox'; +export {Collection, type CollectionProps} from 'react-aria/Collection'; +export type {ListBoxProps, ListBoxRenderProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxSectionProps, ListBoxLoadMoreItemProps} from '../src/ListBox'; diff --git a/packages/react-aria-components/exports/DateField.ts b/packages/react-aria-components/exports/DateField.ts index 857291f4a3c..9973b06ec4c 100644 --- a/packages/react-aria-components/exports/DateField.ts +++ b/packages/react-aria-components/exports/DateField.ts @@ -17,3 +17,13 @@ import 'client-only'; export {DateField, DateInput, DateSegment, DateFieldContext, DateFieldStateContext} from '../src/DateField'; export type {DateFieldProps, DateFieldRenderProps, DateInputProps, DateInputRenderProps, DateSegmentProps, DateSegmentRenderProps} from '../src/DateField'; export type {DateValue, DateFieldState} from 'react-stately/useDateFieldState'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; diff --git a/packages/react-aria-components/exports/DatePicker.ts b/packages/react-aria-components/exports/DatePicker.ts index 562989c65c4..652a081b173 100644 --- a/packages/react-aria-components/exports/DatePicker.ts +++ b/packages/react-aria-components/exports/DatePicker.ts @@ -17,3 +17,28 @@ import 'client-only'; export {DatePicker, DatePickerContext, DatePickerStateContext} from '../src/DatePicker'; export type {DatePickerProps, DatePickerRenderProps} from '../src/DatePicker'; export type {DateValue, DatePickerState} from 'react-stately/useDatePickerState'; + +export {DateInput, DateSegment} from '../src/DateField'; +export type {DateInputProps, DateInputRenderProps, DateSegmentProps, DateSegmentRenderProps} from '../src/DateField'; + +export {Group} from '../src/Group'; +export type {GroupProps, GroupRenderProps} from '../src/Group'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; + +export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell} from '../src/Calendar'; +export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps} from '../src/Calendar'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Popover} from '../src/Popover'; +export type {PopoverProps, PopoverRenderProps} from '../src/Popover'; diff --git a/packages/react-aria-components/exports/DateRangePicker.ts b/packages/react-aria-components/exports/DateRangePicker.ts index 3495b25f5e2..0701ce00a10 100644 --- a/packages/react-aria-components/exports/DateRangePicker.ts +++ b/packages/react-aria-components/exports/DateRangePicker.ts @@ -17,3 +17,28 @@ import 'client-only'; export {DateRangePicker, DateRangePickerContext, DateRangePickerStateContext} from '../src/DatePicker'; export type {DateRangePickerProps, DateRangePickerRenderProps} from '../src/DatePicker'; export type {DateRange, DateValue, DateRangePickerState} from 'react-stately/useDateRangePickerState'; + +export {DateInput, DateSegment} from '../src/DateField'; +export type {DateInputProps, DateInputRenderProps, DateSegmentProps, DateSegmentRenderProps} from '../src/DateField'; + +export {Group} from '../src/Group'; +export type {GroupProps, GroupRenderProps} from '../src/Group'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; + +export {CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar} from '../src/Calendar'; +export type {CalendarCellProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from '../src/Calendar'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Popover} from '../src/Popover'; +export type {PopoverProps, PopoverRenderProps} from '../src/Popover'; diff --git a/packages/react-aria-components/exports/Disclosure.ts b/packages/react-aria-components/exports/Disclosure.ts index 0b2b1d8bf2e..2dddce49676 100644 --- a/packages/react-aria-components/exports/Disclosure.ts +++ b/packages/react-aria-components/exports/Disclosure.ts @@ -17,3 +17,9 @@ import 'client-only'; export {Disclosure, DisclosurePanel, DisclosureStateContext, DisclosureContext} from '../src/Disclosure'; export type {DisclosureProps, DisclosureRenderProps, DisclosurePanelProps, DisclosurePanelRenderProps} from '../src/Disclosure'; export type {DisclosureState} from 'react-stately/useDisclosureState'; + +export {Heading} from '../src/Heading'; +export type {HeadingProps} from '../src/Heading'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; diff --git a/packages/react-aria-components/exports/DisclosureGroup.ts b/packages/react-aria-components/exports/DisclosureGroup.ts index ccc5ac6aa5e..ff5004d8ad2 100644 --- a/packages/react-aria-components/exports/DisclosureGroup.ts +++ b/packages/react-aria-components/exports/DisclosureGroup.ts @@ -18,3 +18,9 @@ export {Disclosure, DisclosureGroup, DisclosureGroupStateContext, DisclosurePane export type {DisclosureProps, DisclosureRenderProps, DisclosurePanelProps, DisclosurePanelRenderProps, DisclosureGroupProps, DisclosureGroupRenderProps} from '../src/Disclosure'; export type {DisclosureState} from 'react-stately/useDisclosureState'; export type {DisclosureGroupState} from 'react-stately/useDisclosureGroupState'; + +export {Heading} from '../src/Heading'; +export type {HeadingProps} from '../src/Heading'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; diff --git a/packages/react-aria-components/exports/DropZone.ts b/packages/react-aria-components/exports/DropZone.ts index 954400dcb84..de0e72f3fb1 100644 --- a/packages/react-aria-components/exports/DropZone.ts +++ b/packages/react-aria-components/exports/DropZone.ts @@ -16,3 +16,6 @@ import 'client-only'; export {DropZone, DropZoneContext} from '../src/DropZone'; export type {DropZoneProps, DropZoneRenderProps} from '../src/DropZone'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; diff --git a/packages/react-aria-components/exports/GridList.ts b/packages/react-aria-components/exports/GridList.ts index 26d30101e67..4950ba2c32a 100644 --- a/packages/react-aria-components/exports/GridList.ts +++ b/packages/react-aria-components/exports/GridList.ts @@ -19,3 +19,12 @@ export {Collection, type CollectionProps} from 'react-aria/Collection'; export type {GridListProps, GridListRenderProps, GridListItemProps, GridListItemRenderProps, GridListLoadMoreItemProps, GridListSectionProps} from '../src/GridList'; export type {Key, Selection, SelectionMode, DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem} from '@react-types/shared'; export type {ListState} from 'react-stately/useListState'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Checkbox} from '../src/Checkbox'; +export type {CheckboxRenderProps, CheckboxProps} from '../src/Checkbox'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; diff --git a/packages/react-aria-components/exports/ListBox.ts b/packages/react-aria-components/exports/ListBox.ts index 14bdde9f499..8b8de6e313b 100644 --- a/packages/react-aria-components/exports/ListBox.ts +++ b/packages/react-aria-components/exports/ListBox.ts @@ -19,3 +19,12 @@ export {Collection, type CollectionProps} from 'react-aria/Collection'; export type {ListBoxProps, ListBoxRenderProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxSectionProps, ListBoxLoadMoreItemProps} from '../src/ListBox'; export type {Key, Selection, SelectionMode, DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem} from '@react-types/shared'; export type {ListState} from 'react-stately/useListState'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {Header} from '../src/Header'; +export type {HeaderProps} from '../src/Header'; diff --git a/packages/react-aria-components/exports/Menu.ts b/packages/react-aria-components/exports/Menu.ts index cbb59c226f4..151216ebe7c 100644 --- a/packages/react-aria-components/exports/Menu.ts +++ b/packages/react-aria-components/exports/Menu.ts @@ -20,3 +20,22 @@ export type {MenuProps, MenuItemProps, MenuItemRenderProps, MenuTriggerProps, Su export type {Key, Selection, SelectionMode} from '@react-types/shared'; export type {ListState} from 'react-stately/useListState'; export type {RootMenuTriggerState} from 'react-stately/useMenuTriggerState'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {Keyboard} from '../src/Keyboard'; + +export {Header} from '../src/Header'; +export type {HeaderProps} from '../src/Header'; + +export {Popover} from '../src/Popover'; +export type {PopoverProps, PopoverRenderProps} from '../src/Popover'; + +export {Separator} from '../src/Separator'; +export type {SeparatorProps} from '../src/Separator'; + +export {Pressable} from 'react-aria/Pressable'; diff --git a/packages/react-aria-components/exports/Meter.ts b/packages/react-aria-components/exports/Meter.ts index 1ccd9b74fb3..ba7c2801209 100644 --- a/packages/react-aria-components/exports/Meter.ts +++ b/packages/react-aria-components/exports/Meter.ts @@ -14,5 +14,8 @@ // to import it from a React Server Component in a framework like Next.js. import 'client-only'; -export {Meter, MeterContext} from '../src/Meter'; +export {Meter} from '../src/Meter'; export type {MeterProps, MeterRenderProps} from '../src/Meter'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; diff --git a/packages/react-aria-components/exports/Modal.ts b/packages/react-aria-components/exports/Modal.ts index 4a54f96983e..cf22567fdc3 100644 --- a/packages/react-aria-components/exports/Modal.ts +++ b/packages/react-aria-components/exports/Modal.ts @@ -16,3 +16,14 @@ import 'client-only'; export {Modal, ModalOverlay, ModalContext} from '../src/Modal'; export type {ModalOverlayProps, ModalRenderProps} from '../src/Modal'; + +export {DialogTrigger, Dialog} from '../src/Dialog'; +export type {DialogProps, DialogTriggerProps, DialogRenderProps} from '../src/Dialog'; + +export {Heading} from '../src/Heading'; +export type {HeadingProps} from '../src/Heading'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Pressable} from 'react-aria/Pressable'; diff --git a/packages/react-aria-components/exports/NumberField.ts b/packages/react-aria-components/exports/NumberField.ts index 8b063bf16c6..aab7ca815f2 100644 --- a/packages/react-aria-components/exports/NumberField.ts +++ b/packages/react-aria-components/exports/NumberField.ts @@ -17,3 +17,22 @@ import 'client-only'; export {NumberField, NumberFieldContext, NumberFieldStateContext} from '../src/NumberField'; export type {NumberFieldProps, NumberFieldRenderProps} from '../src/NumberField'; export type {NumberFieldState} from 'react-stately/useNumberFieldState'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Group} from '../src/Group'; +export type {GroupProps, GroupRenderProps} from '../src/Group'; + +export {Input} from '../src/Input'; +export type {InputProps, InputRenderProps} from '../src/Input'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; diff --git a/packages/react-aria-components/exports/OverlayArrow.ts b/packages/react-aria-components/exports/OverlayArrow.ts deleted file mode 100644 index 4a66c6e5a4f..00000000000 --- a/packages/react-aria-components/exports/OverlayArrow.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Copyright 2022 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -// Mark as a client only package. This will cause a build time error if you try -// to import it from a React Server Component in a framework like Next.js. -import 'client-only'; - -export {OverlayArrow} from '../src/OverlayArrow'; -export type {OverlayArrowProps, OverlayArrowRenderProps} from '../src/OverlayArrow'; diff --git a/packages/react-aria-components/exports/Popover.ts b/packages/react-aria-components/exports/Popover.ts index 5bd1814d89a..7696b1a7445 100644 --- a/packages/react-aria-components/exports/Popover.ts +++ b/packages/react-aria-components/exports/Popover.ts @@ -17,3 +17,11 @@ import 'client-only'; export {Popover, PopoverContext} from '../src/Popover'; export type {PopoverProps, PopoverRenderProps} from '../src/Popover'; export type {Placement} from 'react-aria/useOverlayPosition'; + +export {DialogTrigger, Dialog} from '../src/Dialog'; +export type {DialogProps, DialogTriggerProps, DialogRenderProps} from '../src/Dialog'; + +export {OverlayArrow} from '../src/OverlayArrow'; +export type {OverlayArrowProps, OverlayArrowRenderProps} from '../src/OverlayArrow'; + +export {Pressable} from 'react-aria/Pressable'; diff --git a/packages/react-aria-components/exports/ProgressBar.ts b/packages/react-aria-components/exports/ProgressBar.ts index e802036a24b..19d6f601686 100644 --- a/packages/react-aria-components/exports/ProgressBar.ts +++ b/packages/react-aria-components/exports/ProgressBar.ts @@ -16,3 +16,6 @@ import 'client-only'; export {ProgressBar, ProgressBarContext} from '../src/ProgressBar'; export type {ProgressBarProps, ProgressBarRenderProps} from '../src/ProgressBar'; + +export {Meter} from '../src/Meter'; +export type {MeterProps, MeterRenderProps} from '../src/Meter'; diff --git a/packages/react-aria-components/exports/RadioGroup.ts b/packages/react-aria-components/exports/RadioGroup.ts index 81667aa3d32..2c65a41fde5 100644 --- a/packages/react-aria-components/exports/RadioGroup.ts +++ b/packages/react-aria-components/exports/RadioGroup.ts @@ -17,3 +17,16 @@ import 'client-only'; export {RadioGroup, Radio, RadioGroupContext, RadioContext, RadioGroupStateContext} from '../src/RadioGroup'; export type {RadioGroupProps, RadioGroupRenderProps, RadioProps, RadioRenderProps} from '../src/RadioGroup'; export type {RadioGroupState} from 'react-stately/useRadioGroupState'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; diff --git a/packages/react-aria-components/exports/RangeCalendar.ts b/packages/react-aria-components/exports/RangeCalendar.ts index c10016afa98..c5d470eaaef 100644 --- a/packages/react-aria-components/exports/RangeCalendar.ts +++ b/packages/react-aria-components/exports/RangeCalendar.ts @@ -17,3 +17,12 @@ import 'client-only'; export {CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar, RangeCalendarContext, RangeCalendarStateContext} from '../src/Calendar'; export type {CalendarCellProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from '../src/Calendar'; export type {DateRange, DateValue, RangeCalendarState} from 'react-stately/useRangeCalendarState'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Heading} from '../src/Heading'; +export type {HeadingProps} from '../src/Heading'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; diff --git a/packages/react-aria-components/exports/SearchField.ts b/packages/react-aria-components/exports/SearchField.ts index a2746aabdd8..fce8ccaeefc 100644 --- a/packages/react-aria-components/exports/SearchField.ts +++ b/packages/react-aria-components/exports/SearchField.ts @@ -17,3 +17,19 @@ import 'client-only'; export {SearchField, SearchFieldContext} from '../src/SearchField'; export type {SearchFieldProps, SearchFieldRenderProps} from '../src/SearchField'; export type {SearchFieldState} from 'react-stately/useSearchFieldState'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Input} from '../src/Input'; +export type {InputProps, InputRenderProps} from '../src/Input'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; diff --git a/packages/react-aria-components/exports/Select.ts b/packages/react-aria-components/exports/Select.ts index 04ab63a21a4..6b809a9f77d 100644 --- a/packages/react-aria-components/exports/Select.ts +++ b/packages/react-aria-components/exports/Select.ts @@ -18,3 +18,23 @@ export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateConte export type {SelectProps, SelectValueProps, SelectValueRenderProps, SelectRenderProps} from '../src/Select'; export type {Key} from '@react-types/shared'; export type {SelectState} from 'react-stately/useSelectState'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; + +export {Popover} from '../src/Popover'; +export type {PopoverProps, PopoverRenderProps} from '../src/Popover'; + +export {ListBoxLoadMoreItem, ListBox, ListBoxItem, ListBoxSection} from '../src/ListBox'; +export {Collection, type CollectionProps} from 'react-aria/Collection'; +export type {ListBoxProps, ListBoxRenderProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxSectionProps, ListBoxLoadMoreItemProps} from '../src/ListBox'; diff --git a/packages/react-aria-components/exports/Slider.ts b/packages/react-aria-components/exports/Slider.ts index 32dfc38cdc6..06fe2066430 100644 --- a/packages/react-aria-components/exports/Slider.ts +++ b/packages/react-aria-components/exports/Slider.ts @@ -17,3 +17,6 @@ import 'client-only'; export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from '../src/Slider'; export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderThumbRenderProps} from '../src/Slider'; export type {SliderState} from 'react-stately/useSliderState'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; diff --git a/packages/react-aria-components/exports/Table.ts b/packages/react-aria-components/exports/Table.ts index bccdd8a3ef8..7cdb3e66280 100644 --- a/packages/react-aria-components/exports/Table.ts +++ b/packages/react-aria-components/exports/Table.ts @@ -19,3 +19,12 @@ export type {TableProps, TableRenderProps, TableHeaderProps, TableBodyProps, Tab export type {Key, Selection, SortDescriptor, SortDirection, SelectionMode, DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem} from '@react-types/shared'; export type {TableState} from 'react-stately/useTableState'; export {Collection, type CollectionProps} from 'react-aria/Collection'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Checkbox} from '../src/Checkbox'; +export type {CheckboxRenderProps, CheckboxProps} from '../src/Checkbox'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; diff --git a/packages/react-aria-components/exports/Tabs.ts b/packages/react-aria-components/exports/Tabs.ts index 7fa91eed80f..92ee5c2a7dd 100644 --- a/packages/react-aria-components/exports/Tabs.ts +++ b/packages/react-aria-components/exports/Tabs.ts @@ -18,3 +18,6 @@ export {Tabs, TabList, TabPanels, TabPanel, Tab, TabsContext, TabListStateContex export type {TabListProps, TabListRenderProps, TabPanelsProps, TabPanelProps, TabPanelRenderProps, TabProps, TabsProps, TabRenderProps, TabsRenderProps} from '../src/Tabs'; export type {Key} from '@react-types/shared'; export type {TabListState} from 'react-stately/useTabListState'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; diff --git a/packages/react-aria-components/exports/TagGroup.ts b/packages/react-aria-components/exports/TagGroup.ts index 7ecfc423cf1..89aa0eb13d4 100644 --- a/packages/react-aria-components/exports/TagGroup.ts +++ b/packages/react-aria-components/exports/TagGroup.ts @@ -18,3 +18,15 @@ export {TagGroup, TagGroupContext, TagList, TagListContext, Tag} from '../src/Ta export type {TagGroupProps, TagListProps, TagListRenderProps, TagProps, TagRenderProps} from '../src/TagGroup'; export type {Key, Selection, SelectionMode} from '@react-types/shared'; export {Collection, type CollectionProps} from 'react-aria/Collection'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; diff --git a/packages/react-aria-components/exports/TextField.ts b/packages/react-aria-components/exports/TextField.ts index 491e6048282..1b66ccd08ef 100644 --- a/packages/react-aria-components/exports/TextField.ts +++ b/packages/react-aria-components/exports/TextField.ts @@ -16,3 +16,19 @@ import 'client-only'; export {TextField, TextFieldContext} from '../src/TextField'; export type {TextFieldProps, TextFieldRenderProps} from '../src/TextField'; + +export {Input} from '../src/Input'; +export type {InputProps, InputRenderProps} from '../src/Input'; + +export {TextArea} from '../src/TextArea'; +export type {TextAreaProps} from '../src/TextArea'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; diff --git a/packages/react-aria-components/exports/TimeField.ts b/packages/react-aria-components/exports/TimeField.ts index 06ab077477c..6f7191073fd 100644 --- a/packages/react-aria-components/exports/TimeField.ts +++ b/packages/react-aria-components/exports/TimeField.ts @@ -17,3 +17,13 @@ import 'client-only'; export {DateInput, DateSegment, TimeField, TimeFieldContext, TimeFieldStateContext} from '../src/DateField'; export type {DateFieldRenderProps, DateInputProps, DateInputRenderProps, DateSegmentProps, DateSegmentRenderProps, TimeFieldProps} from '../src/DateField'; export type {TimeValue, TimeFieldState} from 'react-stately/useTimeFieldState'; + +export {Label} from '../src/Label'; +export type {LabelProps} from '../src/Label'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {FieldError} from '../src/FieldError'; +export type {FieldErrorProps, FieldErrorRenderProps} from '../src/FieldError'; +export type {ValidationResult} from '@react-types/shared'; diff --git a/packages/react-aria-components/exports/Toast.ts b/packages/react-aria-components/exports/Toast.ts index e7b05bc4bad..9926e79cd0e 100644 --- a/packages/react-aria-components/exports/Toast.ts +++ b/packages/react-aria-components/exports/Toast.ts @@ -18,3 +18,9 @@ export {UNSTABLE_Toast, UNSTABLE_ToastList, UNSTABLE_ToastRegion, UNSTABLE_Toast export {ToastQueue as UNSTABLE_ToastQueue} from 'react-stately/useToastState'; export type {ToastRegionProps, ToastListProps, ToastRegionRenderProps, ToastProps, ToastRenderProps} from '../src/Toast'; export type {QueuedToast, ToastOptions, ToastState} from 'react-stately/useToastState'; + +export {Text} from '../src/Text'; +export type {TextProps} from '../src/Text'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; diff --git a/packages/react-aria-components/exports/ToggleButtonGroup.ts b/packages/react-aria-components/exports/ToggleButtonGroup.ts index 7c3b26b186a..4709b82d09d 100644 --- a/packages/react-aria-components/exports/ToggleButtonGroup.ts +++ b/packages/react-aria-components/exports/ToggleButtonGroup.ts @@ -17,3 +17,9 @@ import 'client-only'; export {ToggleButtonGroup, ToggleButtonGroupContext, ToggleGroupStateContext} from '../src/ToggleButtonGroup'; export type {ToggleButtonGroupProps, ToggleButtonGroupRenderProps} from '../src/ToggleButtonGroup'; export type {ToggleGroupState} from 'react-stately/useToggleGroupState'; + +export {ToggleButton} from '../src/ToggleButton'; +export type {ToggleButtonProps, ToggleButtonRenderProps} from '../src/ToggleButton'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; diff --git a/packages/react-aria-components/exports/Tooltip.ts b/packages/react-aria-components/exports/Tooltip.ts index 0c83e2ff14d..1ed4727ed3b 100644 --- a/packages/react-aria-components/exports/Tooltip.ts +++ b/packages/react-aria-components/exports/Tooltip.ts @@ -17,3 +17,8 @@ import 'client-only'; export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from '../src/Tooltip'; export type {TooltipProps, TooltipRenderProps, TooltipTriggerComponentProps} from '../src/Tooltip'; export type {TooltipTriggerState} from 'react-stately/useTooltipTriggerState'; + +export {OverlayArrow} from '../src/OverlayArrow'; +export type {OverlayArrowProps, OverlayArrowRenderProps} from '../src/OverlayArrow'; + +export {Focusable} from 'react-aria/Focusable'; diff --git a/packages/react-aria-components/exports/Tree.ts b/packages/react-aria-components/exports/Tree.ts index 524ab213d70..846b4b3e0e5 100644 --- a/packages/react-aria-components/exports/Tree.ts +++ b/packages/react-aria-components/exports/Tree.ts @@ -18,3 +18,12 @@ export {TreeLoadMoreItem, Tree, TreeItem, TreeContext, TreeItemContent, TreeHead export type {TreeProps, TreeRenderProps, TreeEmptyStateRenderProps, TreeItemProps, TreeItemRenderProps, TreeItemContentProps, TreeItemContentRenderProps, TreeLoadMoreItemProps, TreeLoadMoreItemRenderProps} from '../src/Tree'; export type {Key, Selection, SelectionMode, DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem} from '@react-types/shared'; export type {TreeState} from 'react-stately/useTreeState'; + +export {Button} from '../src/Button'; +export type {ButtonProps, ButtonRenderProps} from '../src/Button'; + +export {Checkbox} from '../src/Checkbox'; +export type {CheckboxRenderProps, CheckboxProps} from '../src/Checkbox'; + +export {SelectionIndicator} from '../src/SelectionIndicator'; +export type {SelectionIndicatorProps} from '../src/SelectionIndicator'; From c68d294d9e89ab69346fbfb08a18b0ec5f3fe534 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 27 Mar 2026 18:07:54 -0700 Subject: [PATCH 2/9] sort exact subpaths first in codemod --- .../src/use-subpaths/src/codemod.test.ts | 20 +++++++++++++++++++ .../codemods/src/use-subpaths/src/codemod.ts | 2 +- .../src/use-subpaths/src/specifiers.ts | 9 +++++++-- 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts b/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts index 6bc5c8f3aee..beb9e0fdc0d 100644 --- a/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts +++ b/packages/dev/codemods/src/use-subpaths/src/codemod.test.ts @@ -126,3 +126,23 @@ import { Button, ButtonContext } from 'react-aria-components/Button'; import type { ButtonProps } from 'react-aria-components/Button'; ` ); + +test( + 'sorts exact match candidates first', + ` +import {Group, GroupProps} from 'react-aria-components'; +`, + ` +import { Group, GroupProps } from 'react-aria-components/Group'; +` +); + +test( + 'combines related imports', + ` +import {RangeCalendar, CalendarCell, Heading} from 'react-aria-components'; +`, + ` +import { RangeCalendar, CalendarCell, Heading } from 'react-aria-components/RangeCalendar'; +` +); diff --git a/packages/dev/codemods/src/use-subpaths/src/codemod.ts b/packages/dev/codemods/src/use-subpaths/src/codemod.ts index dcb60540049..e5a8b99622e 100644 --- a/packages/dev/codemods/src/use-subpaths/src/codemod.ts +++ b/packages/dev/codemods/src/use-subpaths/src/codemod.ts @@ -121,7 +121,7 @@ export default function transformer(file: FileInfo, api: API): string { let importedName = getImportedName(specifier); let candidates = sourceMap[importedName]; - if (candidates && candidates.length === 1) { + if (candidates && (candidates.length === 1 || candidates[0] === `${source}/${importedName}`)) { let importKind = node.importKind || 'value'; uniqueSources.add(importKind + ':' + candidates[0]); } diff --git a/packages/dev/codemods/src/use-subpaths/src/specifiers.ts b/packages/dev/codemods/src/use-subpaths/src/specifiers.ts index 05098bf1d77..13888cdbf9e 100644 --- a/packages/dev/codemods/src/use-subpaths/src/specifiers.ts +++ b/packages/dev/codemods/src/use-subpaths/src/specifiers.ts @@ -49,7 +49,8 @@ export function getSpecifiersByPackage(from: string) { plugins: ['typescript'] }); - let importSpecifier = `${pkg}/${entry.name.replace(/(\.d)?\.ts$/, '')}`; + let subpath = entry.name.replace(/(\.d)?\.ts$/, ''); + let importSpecifier = `${pkg}/${subpath}`; for (let node of ast.program.body) { if (node.type === 'ExportNamedDeclaration') { for (let specifier of node.specifiers) { @@ -59,7 +60,11 @@ export function getSpecifiersByPackage(from: string) { let exported = specifier.exported.type === 'Identifier' ? specifier.exported.name : specifier.exported.value; exports[exported] ??= []; - exports[exported].push(importSpecifier); + if (exported.startsWith(subpath)) { + exports[exported].unshift(importSpecifier); + } else { + exports[exported].push(importSpecifier); + } } } } From 6d997edb0fae8723e7021c86e95c36b9efdbe89a Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 27 Mar 2026 18:44:34 -0700 Subject: [PATCH 3/9] update starters --- starters/docs/src/Breadcrumbs.tsx | 9 ++++++++- starters/docs/src/Button.tsx | 3 ++- starters/docs/src/Calendar.tsx | 12 +++++------ starters/docs/src/Checkbox.tsx | 3 +-- starters/docs/src/CheckboxGroup.tsx | 6 +++--- starters/docs/src/ColorArea.tsx | 6 +----- starters/docs/src/ColorField.tsx | 7 +++---- starters/docs/src/ColorPicker.tsx | 8 ++------ starters/docs/src/ColorSlider.tsx | 6 +++--- starters/docs/src/ColorSwatch.tsx | 6 +----- starters/docs/src/ColorSwatchPicker.tsx | 8 +++----- starters/docs/src/ColorThumb.tsx | 3 +-- starters/docs/src/ColorWheel.tsx | 8 +++----- starters/docs/src/ComboBox.tsx | 11 +++++----- starters/docs/src/CommandPalette.tsx | 8 ++++---- starters/docs/src/Content.tsx | 13 ++++-------- starters/docs/src/DateField.tsx | 12 +++++------ starters/docs/src/DatePicker.tsx | 9 ++++----- starters/docs/src/DateRangePicker.tsx | 8 ++++---- starters/docs/src/Dialog.tsx | 7 ++++++- starters/docs/src/Disclosure.tsx | 10 +++++----- starters/docs/src/DisclosureGroup.tsx | 2 +- starters/docs/src/DropZone.tsx | 2 +- starters/docs/src/Form.tsx | 16 +++++---------- starters/docs/src/GridList.tsx | 8 ++++---- starters/docs/src/InputGroup.tsx | 4 +++- starters/docs/src/Link.tsx | 2 +- starters/docs/src/ListBox.tsx | 14 ++++++------- starters/docs/src/Menu.tsx | 12 +++++------ starters/docs/src/Meter.tsx | 5 +---- starters/docs/src/Modal.tsx | 2 +- starters/docs/src/NumberField.tsx | 6 +++--- starters/docs/src/Popover.tsx | 7 +------ starters/docs/src/ProgressBar.tsx | 5 +---- starters/docs/src/ProgressCircle.tsx | 5 +++-- starters/docs/src/RadioGroup.tsx | 10 +++++----- starters/docs/src/RangeCalendar.tsx | 12 +++++------ starters/docs/src/SearchField.tsx | 6 +++--- starters/docs/src/SegmentedControl.tsx | 9 ++++++++- starters/docs/src/Select.tsx | 10 +++++----- starters/docs/src/Separator.tsx | 2 +- starters/docs/src/Sheet.tsx | 3 ++- starters/docs/src/Slider.tsx | 6 +++--- starters/docs/src/Switch.tsx | 6 +----- starters/docs/src/Table.tsx | 20 +++++++++---------- starters/docs/src/Tabs.tsx | 14 ++++++------- starters/docs/src/TagGroup.tsx | 8 ++++---- starters/docs/src/TextField.tsx | 6 +++--- starters/docs/src/TimeField.tsx | 8 ++++---- starters/docs/src/Toast.tsx | 8 ++++---- starters/docs/src/ToggleButton.tsx | 3 ++- starters/docs/src/ToggleButtonGroup.tsx | 2 +- starters/docs/src/Toolbar.tsx | 4 +++- starters/docs/src/Tooltip.tsx | 7 +++---- starters/docs/src/Tree.tsx | 14 ++++++------- starters/docs/stories/Breadcrumbs.stories.tsx | 1 - starters/docs/stories/Button.stories.tsx | 1 - starters/docs/stories/Calendar.stories.tsx | 1 - starters/docs/stories/Checkbox.stories.tsx | 1 - .../docs/stories/CheckboxGroup.stories.tsx | 1 - starters/docs/stories/ColorArea.stories.tsx | 1 - starters/docs/stories/ColorField.stories.tsx | 1 - starters/docs/stories/ColorPicker.stories.tsx | 1 - starters/docs/stories/ColorSlider.stories.tsx | 1 - starters/docs/stories/ColorSwatch.stories.tsx | 1 - .../stories/ColorSwatchPicker.stories.tsx | 1 - starters/docs/stories/ColorWheel.stories.tsx | 1 - starters/docs/stories/ComboBox.stories.tsx | 1 - .../docs/stories/CommandPalette.stories.tsx | 1 - starters/docs/stories/DateField.stories.tsx | 1 - starters/docs/stories/DatePicker.stories.tsx | 1 - .../docs/stories/DateRangePicker.stories.tsx | 1 - starters/docs/stories/Dialog.stories.tsx | 1 - starters/docs/stories/Disclosure.stories.tsx | 1 - .../docs/stories/DisclosureGroup.stories.tsx | 1 - starters/docs/stories/Form.stories.tsx | 1 - starters/docs/stories/GridList.stories.tsx | 4 ++-- starters/docs/stories/Link.stories.tsx | 1 - starters/docs/stories/ListBox.stories.tsx | 3 +-- starters/docs/stories/Menu.stories.tsx | 1 - starters/docs/stories/Meter.stories.tsx | 1 - starters/docs/stories/Modal.stories.tsx | 1 - starters/docs/stories/NumberField.stories.tsx | 1 - starters/docs/stories/Popover.stories.tsx | 1 - starters/docs/stories/ProgressBar.stories.tsx | 1 - starters/docs/stories/RadioGroup.stories.tsx | 1 - .../docs/stories/RangeCalendar.stories.tsx | 1 - starters/docs/stories/SearchField.stories.tsx | 1 - starters/docs/stories/Select.stories.tsx | 1 - starters/docs/stories/Slider.stories.tsx | 1 - starters/docs/stories/Switch.stories.tsx | 1 - starters/docs/stories/Table.stories.tsx | 1 - starters/docs/stories/Tabs.stories.tsx | 1 - starters/docs/stories/TagGroup.stories.tsx | 1 - starters/docs/stories/TextField.stories.tsx | 1 - starters/docs/stories/TimeField.stories.tsx | 1 - .../docs/stories/ToggleButton.stories.tsx | 1 - .../stories/ToggleButtonGroup.stories.tsx | 1 - starters/docs/stories/Toolbar.stories.tsx | 3 +-- starters/docs/stories/Tooltip.stories.tsx | 1 - starters/docs/stories/Tree.stories.tsx | 1 - starters/tailwind/src/AlertDialog.tsx | 7 ++++--- starters/tailwind/src/Breadcrumbs.tsx | 8 +++++++- starters/tailwind/src/Button.tsx | 3 ++- starters/tailwind/src/Calendar.tsx | 8 ++++---- starters/tailwind/src/Checkbox.tsx | 3 ++- starters/tailwind/src/CheckboxGroup.tsx | 8 ++++++-- starters/tailwind/src/ColorArea.tsx | 5 +---- starters/tailwind/src/ColorField.tsx | 6 +++--- starters/tailwind/src/ColorPicker.tsx | 4 +++- starters/tailwind/src/ColorSlider.tsx | 6 +++--- starters/tailwind/src/ColorSwatch.tsx | 2 +- starters/tailwind/src/ColorSwatchPicker.tsx | 8 ++++---- starters/tailwind/src/ColorThumb.tsx | 2 +- starters/tailwind/src/ColorWheel.tsx | 6 +++++- starters/tailwind/src/ComboBox.tsx | 10 +++++----- starters/tailwind/src/CommandPalette.tsx | 8 ++++---- starters/tailwind/src/DateField.tsx | 10 +++++----- starters/tailwind/src/DatePicker.tsx | 8 ++++---- starters/tailwind/src/DateRangePicker.tsx | 8 ++++---- starters/tailwind/src/Dialog.tsx | 2 +- starters/tailwind/src/Disclosure.tsx | 10 +++++----- starters/tailwind/src/DisclosureGroup.tsx | 4 ++-- starters/tailwind/src/DropZone.tsx | 3 ++- starters/tailwind/src/Field.tsx | 7 ++++++- starters/tailwind/src/FieldButton.tsx | 3 ++- starters/tailwind/src/Form.tsx | 2 +- starters/tailwind/src/GridList.tsx | 10 +++++----- starters/tailwind/src/Link.tsx | 3 ++- starters/tailwind/src/ListBox.tsx | 16 +++++++-------- starters/tailwind/src/Menu.tsx | 18 ++++++++--------- starters/tailwind/src/Meter.tsx | 5 +---- starters/tailwind/src/Modal.tsx | 2 +- starters/tailwind/src/NumberField.tsx | 8 ++++---- starters/tailwind/src/Popover.tsx | 8 ++------ starters/tailwind/src/ProgressBar.tsx | 5 +---- starters/tailwind/src/RadioGroup.tsx | 11 ++++++++-- starters/tailwind/src/RangeCalendar.tsx | 8 ++++---- starters/tailwind/src/SearchField.tsx | 6 +++--- starters/tailwind/src/Select.tsx | 10 +++++----- starters/tailwind/src/Separator.tsx | 2 +- starters/tailwind/src/Slider.tsx | 6 +++--- starters/tailwind/src/Switch.tsx | 5 +---- starters/tailwind/src/Table.tsx | 18 ++++++++--------- starters/tailwind/src/Tabs.tsx | 14 ++++++------- starters/tailwind/src/TagGroup.tsx | 10 +++++----- starters/tailwind/src/TextField.tsx | 6 +++--- starters/tailwind/src/TimeField.tsx | 8 ++++---- starters/tailwind/src/Toast.tsx | 8 ++++---- starters/tailwind/src/ToggleButton.tsx | 3 ++- starters/tailwind/src/ToggleButtonGroup.tsx | 3 ++- starters/tailwind/src/Toolbar.tsx | 4 +++- starters/tailwind/src/Tooltip.tsx | 8 ++------ starters/tailwind/src/Tree.tsx | 6 +++--- starters/tailwind/src/utils.ts | 2 +- .../tailwind/stories/AlertDialog.stories.tsx | 4 ++-- .../tailwind/stories/Breadcrumbs.stories.tsx | 3 +-- .../tailwind/stories/Calendar.stories.tsx | 3 +-- .../stories/CheckboxGroup.stories.tsx | 2 +- .../tailwind/stories/ColorArea.stories.tsx | 2 +- .../tailwind/stories/ColorField.stories.tsx | 2 +- .../tailwind/stories/ColorPicker.stories.tsx | 2 +- .../tailwind/stories/ColorSlider.stories.tsx | 2 +- .../tailwind/stories/ColorSwatch.stories.tsx | 2 +- .../stories/ColorSwatchPicker.stories.tsx | 2 +- .../tailwind/stories/ColorWheel.stories.tsx | 2 +- .../tailwind/stories/ComboBox.stories.tsx | 4 ++-- .../stories/CommandPalette.stories.tsx | 4 ++-- .../tailwind/stories/DateField.stories.tsx | 4 ++-- .../tailwind/stories/DatePicker.stories.tsx | 4 ++-- .../stories/DateRangePicker.stories.tsx | 4 ++-- .../tailwind/stories/Disclosure.stories.tsx | 2 +- .../stories/DisclosureGroup.stories.tsx | 2 +- starters/tailwind/stories/Form.stories.tsx | 2 +- .../tailwind/stories/GridList.stories.tsx | 4 ++-- starters/tailwind/stories/Link.stories.tsx | 2 +- starters/tailwind/stories/ListBox.stories.tsx | 2 +- starters/tailwind/stories/Menu.stories.tsx | 2 +- starters/tailwind/stories/Meter.stories.tsx | 2 +- .../tailwind/stories/NumberField.stories.tsx | 4 ++-- starters/tailwind/stories/Popover.stories.tsx | 5 +++-- .../tailwind/stories/ProgressBar.stories.tsx | 2 +- .../tailwind/stories/RadioGroup.stories.tsx | 2 +- .../stories/RangeCalendar.stories.tsx | 2 +- .../tailwind/stories/SearchField.stories.tsx | 4 ++-- starters/tailwind/stories/Select.stories.tsx | 4 ++-- starters/tailwind/stories/Slider.stories.tsx | 2 +- starters/tailwind/stories/Switch.stories.tsx | 2 +- starters/tailwind/stories/Table.stories.tsx | 4 ++-- starters/tailwind/stories/Tabs.stories.tsx | 2 +- .../tailwind/stories/TagGroup.stories.tsx | 2 +- .../tailwind/stories/TextField.stories.tsx | 4 ++-- .../tailwind/stories/TimeField.stories.tsx | 4 ++-- starters/tailwind/stories/Toast.stories.tsx | 2 +- .../tailwind/stories/ToggleButton.stories.tsx | 2 +- .../stories/ToggleButtonGroup.stories.tsx | 2 +- starters/tailwind/stories/Toolbar.stories.tsx | 5 ++--- starters/tailwind/stories/Tooltip.stories.tsx | 4 ++-- starters/tailwind/stories/Tree.stories.tsx | 2 +- 199 files changed, 450 insertions(+), 502 deletions(-) diff --git a/starters/docs/src/Breadcrumbs.tsx b/starters/docs/src/Breadcrumbs.tsx index 0070e0d2ddd..e98af235146 100644 --- a/starters/docs/src/Breadcrumbs.tsx +++ b/starters/docs/src/Breadcrumbs.tsx @@ -1,5 +1,12 @@ 'use client'; -import {Breadcrumbs as RACBreadcrumbs, BreadcrumbsProps, Breadcrumb as RACBreadcrumb, BreadcrumbProps, LinkProps, Link} from 'react-aria-components'; +import { + Breadcrumbs as RACBreadcrumbs, + type BreadcrumbsProps, + Breadcrumb as RACBreadcrumb, + type BreadcrumbProps, + type LinkProps, + Link, +} from 'react-aria-components/Breadcrumbs'; import {ChevronRight} from 'lucide-react'; import './Breadcrumbs.css'; diff --git a/starters/docs/src/Button.tsx b/starters/docs/src/Button.tsx index 8f471c09359..d4b57b52386 100644 --- a/starters/docs/src/Button.tsx +++ b/starters/docs/src/Button.tsx @@ -1,5 +1,6 @@ 'use client'; -import {Button as RACButton, ButtonProps as RACButtonProps, composeRenderProps} from 'react-aria-components'; +import { Button as RACButton, type ButtonProps as RACButtonProps } from 'react-aria-components/Button'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import {ProgressCircle} from './ProgressCircle'; import './Button.css'; diff --git a/starters/docs/src/Calendar.tsx b/starters/docs/src/Calendar.tsx index ef5a3b45dec..72c1052800e 100644 --- a/starters/docs/src/Calendar.tsx +++ b/starters/docs/src/Calendar.tsx @@ -3,16 +3,14 @@ import { Calendar as AriaCalendar, CalendarCell as AriaCalendarCell, CalendarGrid as AriaCalendarGrid, - CalendarProps as AriaCalendarProps, - DateValue, - CalendarCellProps, - CalendarGridProps -} from 'react-aria-components'; + type CalendarProps as AriaCalendarProps, + type DateValue, + type CalendarCellProps, + type CalendarGridProps, +} from 'react-aria-components/Calendar'; import {Heading, Text} from './Content'; import {ChevronLeft, ChevronRight} from 'lucide-react'; - import {Button} from './Button'; - import './Calendar.css'; export interface CalendarProps diff --git a/starters/docs/src/Checkbox.tsx b/starters/docs/src/Checkbox.tsx index 20342e1077d..d82ba088b8e 100644 --- a/starters/docs/src/Checkbox.tsx +++ b/starters/docs/src/Checkbox.tsx @@ -1,6 +1,5 @@ 'use client'; -import {Checkbox as AriaCheckbox, CheckboxProps} from 'react-aria-components'; - +import { Checkbox as AriaCheckbox, type CheckboxProps } from 'react-aria-components/Checkbox'; import './Checkbox.css'; export function Checkbox( diff --git a/starters/docs/src/CheckboxGroup.tsx b/starters/docs/src/CheckboxGroup.tsx index 644da0a1ebc..ee33ca63128 100644 --- a/starters/docs/src/CheckboxGroup.tsx +++ b/starters/docs/src/CheckboxGroup.tsx @@ -1,9 +1,9 @@ 'use client'; import { CheckboxGroup as AriaCheckboxGroup, - CheckboxGroupProps as AriaCheckboxGroupProps, - ValidationResult -} from 'react-aria-components'; + type CheckboxGroupProps as AriaCheckboxGroupProps, + type ValidationResult, +} from 'react-aria-components/CheckboxGroup'; import {Label, FieldError, Description} from './Form'; import './CheckboxGroup.css'; diff --git a/starters/docs/src/ColorArea.tsx b/starters/docs/src/ColorArea.tsx index 568d68932c6..842f28b41a7 100644 --- a/starters/docs/src/ColorArea.tsx +++ b/starters/docs/src/ColorArea.tsx @@ -1,9 +1,5 @@ 'use client'; -import { - ColorArea as AriaColorArea, - ColorAreaProps -} from 'react-aria-components'; - +import { ColorArea as AriaColorArea, type ColorAreaProps } from 'react-aria-components/ColorArea'; import {ColorThumb} from './ColorThumb'; import './ColorArea.css'; diff --git a/starters/docs/src/ColorField.tsx b/starters/docs/src/ColorField.tsx index c749f270808..f06f84501d5 100644 --- a/starters/docs/src/ColorField.tsx +++ b/starters/docs/src/ColorField.tsx @@ -1,12 +1,11 @@ 'use client'; import { ColorField as AriaColorField, - ColorFieldProps as AriaColorFieldProps, + type ColorFieldProps as AriaColorFieldProps, Input, - ValidationResult -} from 'react-aria-components'; + type ValidationResult, +} from 'react-aria-components/ColorField'; import {Label, FieldError, Description} from './Form'; - import './ColorField.css'; export interface ColorFieldProps extends AriaColorFieldProps { diff --git a/starters/docs/src/ColorPicker.tsx b/starters/docs/src/ColorPicker.tsx index 71059433db1..cf5866cee76 100644 --- a/starters/docs/src/ColorPicker.tsx +++ b/starters/docs/src/ColorPicker.tsx @@ -1,16 +1,12 @@ 'use client'; -import { - Button, - ColorPicker as AriaColorPicker, - ColorPickerProps as AriaColorPickerProps -} from 'react-aria-components'; +import { Button } from 'react-aria-components/Button'; +import { ColorPicker as AriaColorPicker, type ColorPickerProps as AriaColorPickerProps } from 'react-aria-components/ColorPicker'; import {DialogTrigger} from './Dialog'; import {ColorSwatch} from './ColorSwatch'; import {ColorSlider} from './ColorSlider'; import {ColorArea} from './ColorArea'; import {ColorField} from './ColorField'; import {Popover} from './Popover'; - import './ColorPicker.css'; export interface ColorPickerProps extends Omit { diff --git a/starters/docs/src/ColorSlider.tsx b/starters/docs/src/ColorSlider.tsx index 7c3d785e669..cd4bc723de9 100644 --- a/starters/docs/src/ColorSlider.tsx +++ b/starters/docs/src/ColorSlider.tsx @@ -1,10 +1,10 @@ 'use client'; import { ColorSlider as AriaColorSlider, - ColorSliderProps as AriaColorSliderProps, + type ColorSliderProps as AriaColorSliderProps, SliderOutput, - SliderTrack -} from 'react-aria-components'; + SliderTrack, +} from 'react-aria-components/ColorSlider'; import {Label} from './Form'; import {ColorThumb} from './ColorThumb'; import './ColorSlider.css'; diff --git a/starters/docs/src/ColorSwatch.tsx b/starters/docs/src/ColorSwatch.tsx index bb434cc7cc1..56e68238901 100644 --- a/starters/docs/src/ColorSwatch.tsx +++ b/starters/docs/src/ColorSwatch.tsx @@ -1,9 +1,5 @@ 'use client'; -import { - ColorSwatch as AriaColorSwatch, - ColorSwatchProps -} from 'react-aria-components'; - +import { ColorSwatch as AriaColorSwatch, type ColorSwatchProps } from 'react-aria-components/ColorSwatch'; import './ColorSwatch.css'; export function ColorSwatch(props: ColorSwatchProps) { diff --git a/starters/docs/src/ColorSwatchPicker.tsx b/starters/docs/src/ColorSwatchPicker.tsx index 34b62a5e106..013513b1eb4 100644 --- a/starters/docs/src/ColorSwatchPicker.tsx +++ b/starters/docs/src/ColorSwatchPicker.tsx @@ -2,12 +2,10 @@ import { ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, - ColorSwatchPickerItemProps, - ColorSwatchPickerProps -} from 'react-aria-components'; - + type ColorSwatchPickerItemProps, + type ColorSwatchPickerProps, +} from 'react-aria-components/ColorSwatchPicker'; import {ColorSwatch} from './ColorSwatch'; - import './ColorSwatchPicker.css'; export function ColorSwatchPicker( diff --git a/starters/docs/src/ColorThumb.tsx b/starters/docs/src/ColorThumb.tsx index 10681505c8c..263c1bf23a2 100644 --- a/starters/docs/src/ColorThumb.tsx +++ b/starters/docs/src/ColorThumb.tsx @@ -1,5 +1,4 @@ -import {ColorThumb as AriaColorThumb, ColorThumbProps} from 'react-aria-components'; - +import { ColorThumb as AriaColorThumb, type ColorThumbProps } from 'react-aria-components/ColorThumb'; import './ColorThumb.css'; export function ColorThumb(props: ColorThumbProps) { diff --git a/starters/docs/src/ColorWheel.tsx b/starters/docs/src/ColorWheel.tsx index dd2a4c33e3c..73b2e7b2370 100644 --- a/starters/docs/src/ColorWheel.tsx +++ b/starters/docs/src/ColorWheel.tsx @@ -1,12 +1,10 @@ 'use client'; import { ColorWheel as AriaColorWheel, - ColorWheelProps as AriaColorWheelProps, - ColorWheelTrack -} from 'react-aria-components'; - + type ColorWheelProps as AriaColorWheelProps, + ColorWheelTrack, +} from 'react-aria-components/ColorWheel'; import {ColorThumb} from './ColorThumb'; - import './ColorWheel.css'; export interface ColorWheelProps extends Omit {} diff --git a/starters/docs/src/ComboBox.tsx b/starters/docs/src/ComboBox.tsx index df074e27731..50846fee74a 100644 --- a/starters/docs/src/ComboBox.tsx +++ b/starters/docs/src/ComboBox.tsx @@ -1,18 +1,17 @@ 'use client'; import { ComboBox as AriaComboBox, - ComboBoxProps as AriaComboBoxProps, + type ComboBoxProps as AriaComboBoxProps, ComboBoxValue, Input, - ListBoxItemProps, - ListBoxProps, - ValidationResult -} from 'react-aria-components'; + type ListBoxItemProps, + type ListBoxProps, + type ValidationResult, +} from 'react-aria-components/ComboBox'; import {Label, FieldError, FieldButton, Description} from './Form'; import {DropdownItem, DropdownListBox} from './ListBox'; import {Popover} from './Popover'; import {ChevronDown} from 'lucide-react'; - import './ComboBox.css'; export interface ComboBoxProps diff --git a/starters/docs/src/CommandPalette.tsx b/starters/docs/src/CommandPalette.tsx index acadf1929b9..af05af91419 100644 --- a/starters/docs/src/CommandPalette.tsx +++ b/starters/docs/src/CommandPalette.tsx @@ -1,11 +1,11 @@ 'use client'; import { Autocomplete as AriaAutocomplete, - AutocompleteProps as AriaAutocompleteProps, - MenuProps as AriaMenuProps, + type AutocompleteProps as AriaAutocompleteProps, useFilter, - Dialog -} from 'react-aria-components'; +} from 'react-aria-components/Autocomplete'; +import { type MenuProps as AriaMenuProps } from 'react-aria-components/Menu'; +import { Dialog } from 'react-aria-components/Dialog'; import {Menu} from './Menu'; import {SearchField} from './SearchField'; import { Modal } from './Modal'; diff --git a/starters/docs/src/Content.tsx b/starters/docs/src/Content.tsx index 61e58f83f79..001309e8b00 100644 --- a/starters/docs/src/Content.tsx +++ b/starters/docs/src/Content.tsx @@ -1,16 +1,11 @@ -import { - Heading as AriaHeading, - HeadingProps, - Text as AriaText, - TextProps -} from 'react-aria-components'; - +import { Heading as AriaHeading, type HeadingProps } from 'react-aria-components/Heading'; +import { Text as AriaText, type TextProps } from 'react-aria-components/Text'; import './Content.css'; export function Heading(props: HeadingProps) { return ; -}; +} export function Text(props: TextProps) { return ; -}; +} diff --git a/starters/docs/src/DateField.tsx b/starters/docs/src/DateField.tsx index 2d47fc52550..a6b50997bfe 100644 --- a/starters/docs/src/DateField.tsx +++ b/starters/docs/src/DateField.tsx @@ -1,14 +1,14 @@ 'use client'; import { DateField as AriaDateField, - DateFieldProps as AriaDateFieldProps, + type DateFieldProps as AriaDateFieldProps, DateInput as AriaDateInput, - DateInputProps, + type DateInputProps, DateSegment as AriaDateSegment, - DateSegmentProps, - DateValue, - ValidationResult -} from 'react-aria-components'; + type DateSegmentProps, + type DateValue, + type ValidationResult, +} from 'react-aria-components/DateField'; import {Label, FieldError, Description} from './Form'; import './DateField.css'; diff --git a/starters/docs/src/DatePicker.tsx b/starters/docs/src/DatePicker.tsx index 0d087b7b9ed..54a4fdb8ffa 100644 --- a/starters/docs/src/DatePicker.tsx +++ b/starters/docs/src/DatePicker.tsx @@ -1,18 +1,17 @@ 'use client'; import { DatePicker as AriaDatePicker, - DatePickerProps as AriaDatePickerProps, - DateValue, + type DatePickerProps as AriaDatePickerProps, + type DateValue, Group, - ValidationResult -} from 'react-aria-components'; + type ValidationResult, +} from 'react-aria-components/DatePicker'; import {DateInput, DateSegment} from './DateField'; import {Label, FieldError, Description} from './Form'; import {FieldButton} from './Form'; import {Calendar} from './Calendar'; import {Popover} from './Popover'; import {ChevronDown} from 'lucide-react'; - import './DatePicker.css'; export interface DatePickerProps extends AriaDatePickerProps { diff --git a/starters/docs/src/DateRangePicker.tsx b/starters/docs/src/DateRangePicker.tsx index 3a6d97ca4ff..a62a93314e7 100644 --- a/starters/docs/src/DateRangePicker.tsx +++ b/starters/docs/src/DateRangePicker.tsx @@ -1,11 +1,11 @@ 'use client'; import { DateRangePicker as AriaDateRangePicker, - DateRangePickerProps as AriaDateRangePickerProps, - DateValue, + type DateRangePickerProps as AriaDateRangePickerProps, + type DateValue, Group, - ValidationResult -} from 'react-aria-components'; + type ValidationResult, +} from 'react-aria-components/DateRangePicker'; import {DateInput, DateSegment} from './DateField'; import {Description, FieldButton} from './Form'; import {Popover} from './Popover'; diff --git a/starters/docs/src/Dialog.tsx b/starters/docs/src/Dialog.tsx index aa69a7fcfc2..7ce3eb9b379 100644 --- a/starters/docs/src/Dialog.tsx +++ b/starters/docs/src/Dialog.tsx @@ -1,5 +1,10 @@ 'use client'; -import {Dialog as RACDialog, DialogProps, DialogTrigger as RACDialogTrigger, DialogTriggerProps} from 'react-aria-components'; +import { + Dialog as RACDialog, + type DialogProps, + DialogTrigger as RACDialogTrigger, + type DialogTriggerProps, +} from 'react-aria-components/Dialog'; import './Dialog.css'; export function Dialog(props: DialogProps) { diff --git a/starters/docs/src/Disclosure.tsx b/starters/docs/src/Disclosure.tsx index 6522aec4d0f..87239d6b0ab 100644 --- a/starters/docs/src/Disclosure.tsx +++ b/starters/docs/src/Disclosure.tsx @@ -1,12 +1,12 @@ 'use client'; +import { Button } from 'react-aria-components/Button'; import { - Button, Disclosure as AriaDisclosure, DisclosurePanel as AriaDisclosurePanel, - DisclosureProps, - DisclosurePanelProps, - HeadingProps, -} from 'react-aria-components'; + type DisclosureProps, + type DisclosurePanelProps, + type HeadingProps +} from 'react-aria-components/Disclosure'; import {Heading} from './Content'; import {ChevronRight} from 'lucide-react'; import './Disclosure.css'; diff --git a/starters/docs/src/DisclosureGroup.tsx b/starters/docs/src/DisclosureGroup.tsx index a4ba8b635ff..67d5ddc81fc 100644 --- a/starters/docs/src/DisclosureGroup.tsx +++ b/starters/docs/src/DisclosureGroup.tsx @@ -1,5 +1,5 @@ 'use client'; -import {DisclosureGroup as RACDisclosureGroup, DisclosureGroupProps} from 'react-aria-components'; +import { DisclosureGroup as RACDisclosureGroup, type DisclosureGroupProps } from 'react-aria-components/DisclosureGroup'; import './DisclosureGroup.css'; export function DisclosureGroup(props: DisclosureGroupProps) { diff --git a/starters/docs/src/DropZone.tsx b/starters/docs/src/DropZone.tsx index fe5fc449db3..0f74f35b3b5 100644 --- a/starters/docs/src/DropZone.tsx +++ b/starters/docs/src/DropZone.tsx @@ -1,5 +1,5 @@ 'use client'; -import {DropZoneProps, DropZone as RACDropZone} from 'react-aria-components'; +import { type DropZoneProps, DropZone as RACDropZone } from 'react-aria-components/DropZone'; import './DropZone.css' export function DropZone(props: DropZoneProps) { diff --git a/starters/docs/src/Form.tsx b/starters/docs/src/Form.tsx index 745e5e738d0..ee093c06a5c 100644 --- a/starters/docs/src/Form.tsx +++ b/starters/docs/src/Form.tsx @@ -1,15 +1,9 @@ 'use client'; -import { - Form as RACForm, - FormProps, - LabelProps, - Label as RACLabel, - FieldErrorProps, - FieldError as RACFieldError, - ButtonProps, - Button, - TextProps -} from 'react-aria-components'; +import { Form as RACForm, type FormProps } from 'react-aria-components/Form'; +import { type LabelProps, Label as RACLabel } from 'react-aria-components/Label'; +import { type FieldErrorProps, FieldError as RACFieldError } from 'react-aria-components/FieldError'; +import { type ButtonProps, Button } from 'react-aria-components/Button'; +import { type TextProps } from 'react-aria-components/Text'; import './Form.css'; import { Text } from './Content'; diff --git a/starters/docs/src/GridList.tsx b/starters/docs/src/GridList.tsx index f654de19e51..93298bfa763 100644 --- a/starters/docs/src/GridList.tsx +++ b/starters/docs/src/GridList.tsx @@ -3,11 +3,11 @@ import { Button, GridList as AriaGridList, GridListItem as AriaGridListItem, - GridListItemProps, - GridListProps, + type GridListItemProps, + type GridListProps, GridListLoadMoreItem as AriaGridListLoadMoreItem, - GridListLoadMoreItemProps -} from 'react-aria-components'; + type GridListLoadMoreItemProps, +} from 'react-aria-components/GridList'; import {Checkbox} from './Checkbox'; import {GripVertical} from 'lucide-react'; import {ProgressCircle} from './ProgressCircle'; diff --git a/starters/docs/src/InputGroup.tsx b/starters/docs/src/InputGroup.tsx index 62fca3eeec2..245fa59f5cc 100644 --- a/starters/docs/src/InputGroup.tsx +++ b/starters/docs/src/InputGroup.tsx @@ -1,5 +1,7 @@ 'use client'; -import {composeRenderProps, Group, GroupProps, InputContext} from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { Group, type GroupProps } from 'react-aria-components/Group'; +import { InputContext } from 'react-aria-components/Input'; import {Label} from './Form'; import {useId} from 'react'; import './InputGroup.css'; diff --git a/starters/docs/src/Link.tsx b/starters/docs/src/Link.tsx index b3662fa638a..8e12a71696d 100644 --- a/starters/docs/src/Link.tsx +++ b/starters/docs/src/Link.tsx @@ -1,5 +1,5 @@ 'use client'; -import {Link as RACLink, LinkProps} from 'react-aria-components'; +import { Link as RACLink, type LinkProps } from 'react-aria-components/Link'; import './Link.css'; export function Link(props: LinkProps) { diff --git a/starters/docs/src/ListBox.tsx b/starters/docs/src/ListBox.tsx index 6c405f34b0e..0524de33bff 100644 --- a/starters/docs/src/ListBox.tsx +++ b/starters/docs/src/ListBox.tsx @@ -1,15 +1,15 @@ -'use client'; +'use client';; import { ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, ListBoxSection as AriaListBoxSection, - composeRenderProps, - ListBoxItemProps, ListBoxLoadMoreItem as AriaListBoxLoadMoreItem, - ListBoxLoadMoreItemProps, - ListBoxProps, - ListBoxSectionProps -} from 'react-aria-components'; + type ListBoxItemProps, + type ListBoxLoadMoreItemProps, + type ListBoxProps, + type ListBoxSectionProps, +} from 'react-aria-components/ListBox'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import {Check} from 'lucide-react'; import {Text} from './Content'; import {ProgressCircle} from './ProgressCircle'; diff --git a/starters/docs/src/Menu.tsx b/starters/docs/src/Menu.tsx index c66a45faad0..6d877c3902b 100644 --- a/starters/docs/src/Menu.tsx +++ b/starters/docs/src/Menu.tsx @@ -6,12 +6,12 @@ import { MenuSection as AriaMenuSection, MenuTrigger as AriaMenuTrigger, SubmenuTrigger as AriaSubmenuTrigger, - MenuItemProps, - MenuProps, - MenuSectionProps, - MenuTriggerProps, - SubmenuTriggerProps, -} from 'react-aria-components'; + type MenuItemProps, + type MenuProps, + type MenuSectionProps, + type MenuTriggerProps, + type SubmenuTriggerProps, +} from 'react-aria-components/Menu'; import {Popover} from './Popover'; import { Text } from './Content'; import React from 'react'; diff --git a/starters/docs/src/Meter.tsx b/starters/docs/src/Meter.tsx index 401e53edf0a..f21d60e6cf3 100644 --- a/starters/docs/src/Meter.tsx +++ b/starters/docs/src/Meter.tsx @@ -1,8 +1,5 @@ 'use client'; -import { - Meter as AriaMeter, - MeterProps as AriaMeterProps -} from 'react-aria-components'; +import { Meter as AriaMeter, type MeterProps as AriaMeterProps } from 'react-aria-components/Meter'; import {Label} from './Form'; import './Meter.css'; diff --git a/starters/docs/src/Modal.tsx b/starters/docs/src/Modal.tsx index 98d08e60c82..aeee223e12d 100644 --- a/starters/docs/src/Modal.tsx +++ b/starters/docs/src/Modal.tsx @@ -1,5 +1,5 @@ 'use client'; -import {Modal as RACModal, ModalOverlayProps} from 'react-aria-components'; +import { Modal as RACModal, type ModalOverlayProps } from 'react-aria-components/Modal'; import './Modal.css'; export function Modal(props: ModalOverlayProps) { diff --git a/starters/docs/src/NumberField.tsx b/starters/docs/src/NumberField.tsx index f6d34e976fe..7de4ecde95c 100644 --- a/starters/docs/src/NumberField.tsx +++ b/starters/docs/src/NumberField.tsx @@ -3,9 +3,9 @@ import { Group, Input, NumberField as AriaNumberField, - NumberFieldProps as AriaNumberFieldProps, - ValidationResult -} from 'react-aria-components'; + type NumberFieldProps as AriaNumberFieldProps, + type ValidationResult, +} from 'react-aria-components/NumberField'; import {Button} from './Button'; import {Plus, Minus} from 'lucide-react'; import {Label, FieldError, Description} from './Form'; diff --git a/starters/docs/src/Popover.tsx b/starters/docs/src/Popover.tsx index f3d6d341fb0..62aa1d940ff 100644 --- a/starters/docs/src/Popover.tsx +++ b/starters/docs/src/Popover.tsx @@ -1,11 +1,6 @@ 'use client'; -import { - OverlayArrow, - Popover as AriaPopover, - PopoverProps as AriaPopoverProps -} from 'react-aria-components'; +import { OverlayArrow, Popover as AriaPopover, type PopoverProps as AriaPopoverProps } from 'react-aria-components/Popover'; import clsx from 'clsx'; - import './Popover.css'; export interface PopoverProps extends Omit { diff --git a/starters/docs/src/ProgressBar.tsx b/starters/docs/src/ProgressBar.tsx index 8837634fd51..5371c6560cc 100644 --- a/starters/docs/src/ProgressBar.tsx +++ b/starters/docs/src/ProgressBar.tsx @@ -1,8 +1,5 @@ 'use client'; -import { - ProgressBar as AriaProgressBar, - ProgressBarProps as AriaProgressBarProps -} from 'react-aria-components'; +import { ProgressBar as AriaProgressBar, type ProgressBarProps as AriaProgressBarProps } from 'react-aria-components/ProgressBar'; import {Label} from './Form'; import './ProgressBar.css'; diff --git a/starters/docs/src/ProgressCircle.tsx b/starters/docs/src/ProgressCircle.tsx index 8a4651cc1c7..11a61e886b2 100644 --- a/starters/docs/src/ProgressCircle.tsx +++ b/starters/docs/src/ProgressCircle.tsx @@ -1,6 +1,7 @@ 'use client'; -import {composeRenderProps, ProgressBar} from 'react-aria-components'; -import type {ProgressBarProps} from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { ProgressBar } from 'react-aria-components/ProgressBar'; +import type { ProgressBarProps } from 'react-aria-components/ProgressBar'; export interface ProgressCircleProps extends ProgressBarProps { size?: number diff --git a/starters/docs/src/RadioGroup.tsx b/starters/docs/src/RadioGroup.tsx index 1e7a871c2f3..8cfe4a1baa3 100644 --- a/starters/docs/src/RadioGroup.tsx +++ b/starters/docs/src/RadioGroup.tsx @@ -1,12 +1,12 @@ 'use client'; import { RadioGroup as AriaRadioGroup, - RadioGroupProps as AriaRadioGroupProps, - ValidationResult, - RadioProps, + type RadioGroupProps as AriaRadioGroupProps, + type ValidationResult, + type RadioProps, Radio as AriaRadio, - composeRenderProps -} from 'react-aria-components'; +} from 'react-aria-components/RadioGroup'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import {Label, FieldError, Description} from './Form'; import './RadioGroup.css'; import './utilities.css'; diff --git a/starters/docs/src/RangeCalendar.tsx b/starters/docs/src/RangeCalendar.tsx index fd9b9594163..2fa67f83246 100644 --- a/starters/docs/src/RangeCalendar.tsx +++ b/starters/docs/src/RangeCalendar.tsx @@ -1,14 +1,14 @@ 'use client'; import { CalendarCell as AriaCalendarCell, - DateValue, - Heading, RangeCalendar as AriaRangeCalendar, - RangeCalendarProps as AriaRangeCalendarProps, + Heading, Text, - composeRenderProps, - CalendarCellProps -} from 'react-aria-components'; + type DateValue, + type RangeCalendarProps as AriaRangeCalendarProps, + type CalendarCellProps, +} from 'react-aria-components/RangeCalendar'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import {Button} from './Button'; import {ChevronLeft, ChevronRight} from 'lucide-react'; import {CalendarGrid} from './Calendar'; diff --git a/starters/docs/src/SearchField.tsx b/starters/docs/src/SearchField.tsx index ed5ce0c9af8..944fda516cf 100644 --- a/starters/docs/src/SearchField.tsx +++ b/starters/docs/src/SearchField.tsx @@ -3,9 +3,9 @@ import { Button, Input, SearchField as AriaSearchField, - SearchFieldProps as AriaSearchFieldProps, - ValidationResult -} from 'react-aria-components'; + type SearchFieldProps as AriaSearchFieldProps, + type ValidationResult, +} from 'react-aria-components/SearchField'; import {Label, FieldError, Description} from './Form'; import {Search, X} from 'lucide-react'; import './SearchField.css'; diff --git a/starters/docs/src/SegmentedControl.tsx b/starters/docs/src/SegmentedControl.tsx index 9a6caa83e2c..35393dc8e43 100644 --- a/starters/docs/src/SegmentedControl.tsx +++ b/starters/docs/src/SegmentedControl.tsx @@ -1,5 +1,12 @@ 'use client'; -import {ToggleButtonGroup as RACToggleButtonGroup, SelectionIndicator, ToggleButton, ToggleButtonProps, ToggleButtonGroupProps, composeRenderProps} from 'react-aria-components'; +import { + ToggleButtonGroup as RACToggleButtonGroup, + SelectionIndicator, + ToggleButton, + type ToggleButtonProps, + type ToggleButtonGroupProps, +} from 'react-aria-components/ToggleButtonGroup'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import './SegmentedControl.css'; export function SegmentedControl(props: ToggleButtonGroupProps) { diff --git a/starters/docs/src/Select.tsx b/starters/docs/src/Select.tsx index 8e29ba0a536..b5ab72f202f 100644 --- a/starters/docs/src/Select.tsx +++ b/starters/docs/src/Select.tsx @@ -1,12 +1,12 @@ 'use client'; import { - ListBoxItemProps, + type ListBoxItemProps, Select as AriaSelect, - SelectProps as AriaSelectProps, + type SelectProps as AriaSelectProps, SelectValue, - ValidationResult, - ListBoxProps -} from 'react-aria-components'; + type ValidationResult, + type ListBoxProps, +} from 'react-aria-components/Select'; import {Button} from './Button'; import {DropdownItem, DropdownListBox} from './ListBox'; import {ChevronDown} from 'lucide-react'; diff --git a/starters/docs/src/Separator.tsx b/starters/docs/src/Separator.tsx index 419dd3e2e42..4e72e78c6d4 100644 --- a/starters/docs/src/Separator.tsx +++ b/starters/docs/src/Separator.tsx @@ -1,5 +1,5 @@ 'use client'; -import {Separator as RACSeparator, SeparatorProps} from 'react-aria-components'; +import { Separator as RACSeparator, type SeparatorProps } from 'react-aria-components/Separator'; import React from 'react'; import './Separator.css'; diff --git a/starters/docs/src/Sheet.tsx b/starters/docs/src/Sheet.tsx index 9ee5ad30701..1e20fc9585c 100644 --- a/starters/docs/src/Sheet.tsx +++ b/starters/docs/src/Sheet.tsx @@ -1,5 +1,6 @@ 'use client'; -import {Modal, ModalOverlay, ModalOverlayProps, composeRenderProps} from 'react-aria-components'; +import { Modal, ModalOverlay, type ModalOverlayProps } from 'react-aria-components/Modal'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import {Dialog} from './Dialog'; import './Sheet.css'; diff --git a/starters/docs/src/Slider.tsx b/starters/docs/src/Slider.tsx index 10edd58c4d2..48aae5eaccc 100644 --- a/starters/docs/src/Slider.tsx +++ b/starters/docs/src/Slider.tsx @@ -2,10 +2,10 @@ import { Slider as AriaSlider, SliderOutput, - SliderProps as AriaSliderProps, + type SliderProps as AriaSliderProps, SliderThumb, - SliderTrack -} from 'react-aria-components'; + SliderTrack, +} from 'react-aria-components/Slider'; import {Label} from './Form'; import './Slider.css'; diff --git a/starters/docs/src/Switch.tsx b/starters/docs/src/Switch.tsx index d065aa8c695..d64d0589276 100644 --- a/starters/docs/src/Switch.tsx +++ b/starters/docs/src/Switch.tsx @@ -1,9 +1,5 @@ 'use client'; -import { - Switch as AriaSwitch, - SwitchProps as AriaSwitchProps -} from 'react-aria-components'; - +import { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components/Switch'; import './Switch.css'; export interface SwitchProps extends Omit { diff --git a/starters/docs/src/Table.tsx b/starters/docs/src/Table.tsx index b7cec03e28d..5c07382c394 100644 --- a/starters/docs/src/Table.tsx +++ b/starters/docs/src/Table.tsx @@ -3,24 +3,24 @@ import { Button, Collection, Column as AriaColumn, - ColumnProps as AriaColumnProps, + type ColumnProps as AriaColumnProps, Row as AriaRow, - RowProps, + type RowProps, Table as AriaTable, TableHeader as AriaTableHeader, - TableHeaderProps, - TableProps, + type TableHeaderProps, + type TableProps, useTableOptions, - TableBodyProps, + type TableBodyProps, TableBody as AriaTableBody, - CellProps, + type CellProps, Cell as AriaCell, ColumnResizer, - Group, TableLoadMoreItem as AriaTableLoadMoreItem, - TableLoadMoreItemProps, - composeRenderProps -} from 'react-aria-components'; + type TableLoadMoreItemProps, +} from 'react-aria-components/Table'; +import { Group } from 'react-aria-components/Group'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import {Checkbox} from './Checkbox'; import {ProgressCircle} from './ProgressCircle'; import {ChevronUp, ChevronDown, GripVertical, ChevronRight} from 'lucide-react'; diff --git a/starters/docs/src/Tabs.tsx b/starters/docs/src/Tabs.tsx index 474784a033b..154acb645b5 100644 --- a/starters/docs/src/Tabs.tsx +++ b/starters/docs/src/Tabs.tsx @@ -2,17 +2,17 @@ import { Tabs as RACTabs, TabList as RACTabList, - TabListProps, - TabProps, + type TabListProps, + type TabProps, Tab as RACTab, - TabsProps, + type TabsProps, TabPanels as RACTabPanels, - TabPanelProps, + type TabPanelProps, TabPanel as RACTabPanel, - composeRenderProps, SelectionIndicator, - TabPanelsProps -} from 'react-aria-components'; + type TabPanelsProps, +} from 'react-aria-components/Tabs'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import './Tabs.css'; export function Tabs(props: TabsProps) { diff --git a/starters/docs/src/TagGroup.tsx b/starters/docs/src/TagGroup.tsx index 35eae1becb7..4529814190f 100644 --- a/starters/docs/src/TagGroup.tsx +++ b/starters/docs/src/TagGroup.tsx @@ -3,11 +3,11 @@ import { Button, Tag as AriaTag, TagGroup as AriaTagGroup, - TagGroupProps as AriaTagGroupProps, + type TagGroupProps as AriaTagGroupProps, TagList, - TagListProps, - TagProps, -} from 'react-aria-components'; + type TagListProps, + type TagProps, +} from 'react-aria-components/TagGroup'; import {Description, Label} from './Form'; import {Text} from './Content'; import {X} from 'lucide-react'; diff --git a/starters/docs/src/TextField.tsx b/starters/docs/src/TextField.tsx index afa1834c231..612f2f7f96f 100644 --- a/starters/docs/src/TextField.tsx +++ b/starters/docs/src/TextField.tsx @@ -2,9 +2,9 @@ import { Input, TextField as AriaTextField, - TextFieldProps as AriaTextFieldProps, - ValidationResult -} from 'react-aria-components'; + type TextFieldProps as AriaTextFieldProps, + type ValidationResult, +} from 'react-aria-components/TextField'; import {Label, FieldError, Description} from './Form'; import './TextField.css'; diff --git a/starters/docs/src/TimeField.tsx b/starters/docs/src/TimeField.tsx index 8f556aef3b2..393d04774d5 100644 --- a/starters/docs/src/TimeField.tsx +++ b/starters/docs/src/TimeField.tsx @@ -1,10 +1,10 @@ 'use client'; import { TimeField as AriaTimeField, - TimeFieldProps as AriaTimeFieldProps, - TimeValue, - ValidationResult -} from 'react-aria-components'; + type TimeFieldProps as AriaTimeFieldProps, + type TimeValue, + type ValidationResult, +} from 'react-aria-components/TimeField'; import {Label, FieldError, Description} from './Form'; import {DateInput, DateSegment} from './DateField'; import './TimeField.css'; diff --git a/starters/docs/src/Toast.tsx b/starters/docs/src/Toast.tsx index 3c1975724b8..7dc56b62777 100644 --- a/starters/docs/src/Toast.tsx +++ b/starters/docs/src/Toast.tsx @@ -4,14 +4,14 @@ import { UNSTABLE_Toast as Toast, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastContent as ToastContent, - ToastProps, - Text -} from 'react-aria-components'; + type ToastProps, + Text, +} from 'react-aria-components/Toast'; import {Button} from './Button'; import {X} from 'lucide-react'; import './Toast.css'; import {flushSync} from 'react-dom'; -import { CSSProperties } from 'react'; +import { type CSSProperties } from 'react'; // Define the type for your toast content. This interface defines the properties of your toast content, affecting what you // pass to the queue calls as arguments. diff --git a/starters/docs/src/ToggleButton.tsx b/starters/docs/src/ToggleButton.tsx index 26de30d61cb..6d7a95ea350 100644 --- a/starters/docs/src/ToggleButton.tsx +++ b/starters/docs/src/ToggleButton.tsx @@ -1,5 +1,6 @@ 'use client'; -import {composeRenderProps, ToggleButton as RACToggleButton, ToggleButtonProps as RACToggleButtonProps} from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { ToggleButton as RACToggleButton, type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components/ToggleButton'; import './ToggleButton.css'; interface ToggleButtonProps extends RACToggleButtonProps { diff --git a/starters/docs/src/ToggleButtonGroup.tsx b/starters/docs/src/ToggleButtonGroup.tsx index 390eea7f654..f48fb8bf405 100644 --- a/starters/docs/src/ToggleButtonGroup.tsx +++ b/starters/docs/src/ToggleButtonGroup.tsx @@ -1,5 +1,5 @@ 'use client'; -import {ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps} from 'react-aria-components'; +import { ToggleButtonGroup as RACToggleButtonGroup, type ToggleButtonGroupProps } from 'react-aria-components/ToggleButtonGroup'; import './ToggleButtonGroup.css'; export function ToggleButtonGroup(props: ToggleButtonGroupProps) { diff --git a/starters/docs/src/Toolbar.tsx b/starters/docs/src/Toolbar.tsx index 0510bd8bf3c..1e6a44cdc99 100644 --- a/starters/docs/src/Toolbar.tsx +++ b/starters/docs/src/Toolbar.tsx @@ -1,5 +1,7 @@ 'use client'; -import {Toolbar as RACToolbar, SeparatorContext, ToggleButtonGroupContext, ToolbarProps} from 'react-aria-components'; +import { Toolbar as RACToolbar, type ToolbarProps } from 'react-aria-components/Toolbar'; +import { SeparatorContext } from 'react-aria-components/Separator'; +import { ToggleButtonGroupContext } from 'react-aria-components/ToggleButtonGroup'; import './Toolbar.css'; export function Toolbar(props: ToolbarProps) { diff --git a/starters/docs/src/Tooltip.tsx b/starters/docs/src/Tooltip.tsx index 6bf3a73d66d..00a7464356a 100644 --- a/starters/docs/src/Tooltip.tsx +++ b/starters/docs/src/Tooltip.tsx @@ -2,11 +2,10 @@ import { OverlayArrow, Tooltip as AriaTooltip, - TooltipProps as AriaTooltipProps, + type TooltipProps as AriaTooltipProps, TooltipTrigger as AriaTooltipTrigger, - TooltipTriggerComponentProps -} from 'react-aria-components'; - + type TooltipTriggerComponentProps, +} from 'react-aria-components/Tooltip'; import './Tooltip.css'; export interface TooltipProps extends Omit { diff --git a/starters/docs/src/Tree.tsx b/starters/docs/src/Tree.tsx index 8b74fe95cdc..eea229108ec 100644 --- a/starters/docs/src/Tree.tsx +++ b/starters/docs/src/Tree.tsx @@ -4,15 +4,15 @@ import { Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent, - TreeItemContentProps, - TreeItemContentRenderProps, - TreeItemProps as AriaTreeItemProps, - TreeProps, + type TreeItemContentProps, + type TreeItemContentRenderProps, + type TreeItemProps as AriaTreeItemProps, + type TreeProps, TreeLoadMoreItem as AriaTreeLoadMoreItem, - TreeLoadMoreItemProps, + type TreeLoadMoreItemProps, TreeSection as AriaTreeSection, - TreeHeader as AriaTreeHeader -} from 'react-aria-components'; + TreeHeader as AriaTreeHeader, +} from 'react-aria-components/Tree'; import {ChevronRight, GripVertical} from 'lucide-react'; import {Checkbox} from './Checkbox'; import {ProgressCircle} from './ProgressCircle'; diff --git a/starters/docs/stories/Breadcrumbs.stories.tsx b/starters/docs/stories/Breadcrumbs.stories.tsx index 50caecfed07..ae5bcfbde1c 100644 --- a/starters/docs/stories/Breadcrumbs.stories.tsx +++ b/starters/docs/stories/Breadcrumbs.stories.tsx @@ -1,6 +1,5 @@ import {Breadcrumbs, Breadcrumb} from '../src/Breadcrumbs'; import {Link} from '../src/Link'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Button.stories.tsx b/starters/docs/stories/Button.stories.tsx index 5423b6945a2..82c32ceac8b 100644 --- a/starters/docs/stories/Button.stories.tsx +++ b/starters/docs/stories/Button.stories.tsx @@ -1,5 +1,4 @@ import {Button} from '../src/Button'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Calendar.stories.tsx b/starters/docs/stories/Calendar.stories.tsx index 22270e02ef5..97ab11cb15c 100644 --- a/starters/docs/stories/Calendar.stories.tsx +++ b/starters/docs/stories/Calendar.stories.tsx @@ -1,5 +1,4 @@ import {Calendar} from '../src/Calendar'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Checkbox.stories.tsx b/starters/docs/stories/Checkbox.stories.tsx index 5cca1c3e98f..e1dfb5048e4 100644 --- a/starters/docs/stories/Checkbox.stories.tsx +++ b/starters/docs/stories/Checkbox.stories.tsx @@ -1,5 +1,4 @@ import {Checkbox} from '../src/Checkbox'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/CheckboxGroup.stories.tsx b/starters/docs/stories/CheckboxGroup.stories.tsx index b90361a84cc..acfe73324ca 100644 --- a/starters/docs/stories/CheckboxGroup.stories.tsx +++ b/starters/docs/stories/CheckboxGroup.stories.tsx @@ -1,6 +1,5 @@ import {Checkbox} from '../src/Checkbox'; import {CheckboxGroup} from '../src/CheckboxGroup'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ColorArea.stories.tsx b/starters/docs/stories/ColorArea.stories.tsx index e8c5c2c1199..a59b1820968 100644 --- a/starters/docs/stories/ColorArea.stories.tsx +++ b/starters/docs/stories/ColorArea.stories.tsx @@ -1,5 +1,4 @@ import {ColorArea} from '../src/ColorArea'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ColorField.stories.tsx b/starters/docs/stories/ColorField.stories.tsx index 154a1d37960..b8ee5c7a78b 100644 --- a/starters/docs/stories/ColorField.stories.tsx +++ b/starters/docs/stories/ColorField.stories.tsx @@ -1,5 +1,4 @@ import {ColorField} from '../src/ColorField'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ColorPicker.stories.tsx b/starters/docs/stories/ColorPicker.stories.tsx index 2f78d7309e7..c15f853079a 100644 --- a/starters/docs/stories/ColorPicker.stories.tsx +++ b/starters/docs/stories/ColorPicker.stories.tsx @@ -1,5 +1,4 @@ import {ColorPicker} from '../src/ColorPicker'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ColorSlider.stories.tsx b/starters/docs/stories/ColorSlider.stories.tsx index fea1c427e49..f9f00345b62 100644 --- a/starters/docs/stories/ColorSlider.stories.tsx +++ b/starters/docs/stories/ColorSlider.stories.tsx @@ -1,5 +1,4 @@ import {ColorSlider} from '../src/ColorSlider'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ColorSwatch.stories.tsx b/starters/docs/stories/ColorSwatch.stories.tsx index 2c43b0971db..6ad9c257cc7 100644 --- a/starters/docs/stories/ColorSwatch.stories.tsx +++ b/starters/docs/stories/ColorSwatch.stories.tsx @@ -1,5 +1,4 @@ import {ColorSwatch} from '../src/ColorSwatch'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ColorSwatchPicker.stories.tsx b/starters/docs/stories/ColorSwatchPicker.stories.tsx index 0f84c337666..d1b2958f744 100644 --- a/starters/docs/stories/ColorSwatchPicker.stories.tsx +++ b/starters/docs/stories/ColorSwatchPicker.stories.tsx @@ -2,7 +2,6 @@ import { ColorSwatchPicker, ColorSwatchPickerItem } from '../src/ColorSwatchPicker'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ColorWheel.stories.tsx b/starters/docs/stories/ColorWheel.stories.tsx index 6fd057b02bf..279b56fbb44 100644 --- a/starters/docs/stories/ColorWheel.stories.tsx +++ b/starters/docs/stories/ColorWheel.stories.tsx @@ -1,5 +1,4 @@ import {ColorWheel} from '../src/ColorWheel'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ComboBox.stories.tsx b/starters/docs/stories/ComboBox.stories.tsx index aac79064c7d..08136a3b1f6 100644 --- a/starters/docs/stories/ComboBox.stories.tsx +++ b/starters/docs/stories/ComboBox.stories.tsx @@ -1,5 +1,4 @@ import {ComboBox, ComboBoxItem} from '../src/ComboBox'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/CommandPalette.stories.tsx b/starters/docs/stories/CommandPalette.stories.tsx index f9e84dccbda..c4b919ea42f 100644 --- a/starters/docs/stories/CommandPalette.stories.tsx +++ b/starters/docs/stories/CommandPalette.stories.tsx @@ -2,7 +2,6 @@ import {Button} from '../src/Button'; import {CommandPalette} from '../src/CommandPalette'; import {DialogTrigger} from '../src/Dialog'; import {MenuItem} from '../src/Menu'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/DateField.stories.tsx b/starters/docs/stories/DateField.stories.tsx index e3b56fc7d9a..a4a08f2d010 100644 --- a/starters/docs/stories/DateField.stories.tsx +++ b/starters/docs/stories/DateField.stories.tsx @@ -1,5 +1,4 @@ import {DateField} from '../src/DateField'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/DatePicker.stories.tsx b/starters/docs/stories/DatePicker.stories.tsx index 377b4cda13a..734dbbc98fa 100644 --- a/starters/docs/stories/DatePicker.stories.tsx +++ b/starters/docs/stories/DatePicker.stories.tsx @@ -1,5 +1,4 @@ import {DatePicker} from '../src/DatePicker'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/DateRangePicker.stories.tsx b/starters/docs/stories/DateRangePicker.stories.tsx index f6c28eed9cb..5ecfbada3f3 100644 --- a/starters/docs/stories/DateRangePicker.stories.tsx +++ b/starters/docs/stories/DateRangePicker.stories.tsx @@ -1,5 +1,4 @@ import {DateRangePicker} from '../src/DateRangePicker'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Dialog.stories.tsx b/starters/docs/stories/Dialog.stories.tsx index d822c98d5fe..397e7182ffa 100644 --- a/starters/docs/stories/Dialog.stories.tsx +++ b/starters/docs/stories/Dialog.stories.tsx @@ -3,7 +3,6 @@ import {Button} from '../src/Button'; import {Modal} from '../src/Modal'; import {TextField} from '../src/TextField'; import {Heading} from '../src/Content'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Disclosure.stories.tsx b/starters/docs/stories/Disclosure.stories.tsx index b70bfcda40b..d0722d4b3a2 100644 --- a/starters/docs/stories/Disclosure.stories.tsx +++ b/starters/docs/stories/Disclosure.stories.tsx @@ -1,5 +1,4 @@ import {Disclosure, DisclosureHeader, DisclosurePanel} from '../src/Disclosure'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/DisclosureGroup.stories.tsx b/starters/docs/stories/DisclosureGroup.stories.tsx index d612142a76b..72a7fc5b691 100644 --- a/starters/docs/stories/DisclosureGroup.stories.tsx +++ b/starters/docs/stories/DisclosureGroup.stories.tsx @@ -1,6 +1,5 @@ import {DisclosureGroup} from '../src/DisclosureGroup'; import {Disclosure, DisclosureHeader, DisclosurePanel} from '../src/Disclosure'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Form.stories.tsx b/starters/docs/stories/Form.stories.tsx index 3d4eeba6fe0..2fa6fd41242 100644 --- a/starters/docs/stories/Form.stories.tsx +++ b/starters/docs/stories/Form.stories.tsx @@ -1,7 +1,6 @@ import {Form} from '../src/Form'; import {Button} from '../src/Button'; import {TextField} from '../src/TextField'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/GridList.stories.tsx b/starters/docs/stories/GridList.stories.tsx index 84666d0a489..416f4780208 100644 --- a/starters/docs/stories/GridList.stories.tsx +++ b/starters/docs/stories/GridList.stories.tsx @@ -1,6 +1,6 @@ import {GridList, GridListItem} from '../src/GridList'; -import {Text, GridListSection, GridListHeader} from 'react-aria-components'; - +import { Text } from 'react-aria-components/Text'; +import { GridListSection, GridListHeader } from 'react-aria-components/GridList'; import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Link.stories.tsx b/starters/docs/stories/Link.stories.tsx index bda0f166bba..64b41ffa7ca 100644 --- a/starters/docs/stories/Link.stories.tsx +++ b/starters/docs/stories/Link.stories.tsx @@ -1,5 +1,4 @@ import {Link} from '../src/Link'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ListBox.stories.tsx b/starters/docs/stories/ListBox.stories.tsx index 4fd19000021..501b283a1cf 100644 --- a/starters/docs/stories/ListBox.stories.tsx +++ b/starters/docs/stories/ListBox.stories.tsx @@ -1,6 +1,5 @@ import {ListBox, ListBoxItem, ListBoxSection} from '../src/ListBox'; -import {Header} from 'react-aria-components'; - +import { Header } from 'react-aria-components/Header'; import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Menu.stories.tsx b/starters/docs/stories/Menu.stories.tsx index f1e6c60a580..c87c7dcfd6e 100644 --- a/starters/docs/stories/Menu.stories.tsx +++ b/starters/docs/stories/Menu.stories.tsx @@ -1,6 +1,5 @@ import {Menu, MenuTrigger, MenuItem, SubmenuTrigger} from '../src/Menu'; import {Button} from '../src/Button'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Meter.stories.tsx b/starters/docs/stories/Meter.stories.tsx index 7f1dbdab198..2e74c9cc58b 100644 --- a/starters/docs/stories/Meter.stories.tsx +++ b/starters/docs/stories/Meter.stories.tsx @@ -1,5 +1,4 @@ import {Meter} from '../src/Meter'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Modal.stories.tsx b/starters/docs/stories/Modal.stories.tsx index fb6a9b10676..091b6e58f53 100644 --- a/starters/docs/stories/Modal.stories.tsx +++ b/starters/docs/stories/Modal.stories.tsx @@ -3,7 +3,6 @@ import {Dialog, DialogTrigger} from '../src/Dialog'; import {TextField} from '../src/TextField'; import {Button} from '../src/Button'; import {Heading} from '../src/Content'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/NumberField.stories.tsx b/starters/docs/stories/NumberField.stories.tsx index a5ee6dc18cd..12291328130 100644 --- a/starters/docs/stories/NumberField.stories.tsx +++ b/starters/docs/stories/NumberField.stories.tsx @@ -1,5 +1,4 @@ import {NumberField} from '../src/NumberField'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Popover.stories.tsx b/starters/docs/stories/Popover.stories.tsx index 3fdf819ce6b..4ca04c0cb37 100644 --- a/starters/docs/stories/Popover.stories.tsx +++ b/starters/docs/stories/Popover.stories.tsx @@ -4,7 +4,6 @@ import {DialogTrigger} from '../src/Dialog'; import {Heading} from '../src/Content'; import {HelpCircle} from 'lucide-react'; import './styles.css'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ProgressBar.stories.tsx b/starters/docs/stories/ProgressBar.stories.tsx index 4c1a817bebb..192626b520e 100644 --- a/starters/docs/stories/ProgressBar.stories.tsx +++ b/starters/docs/stories/ProgressBar.stories.tsx @@ -1,5 +1,4 @@ import {ProgressBar} from '../src/ProgressBar'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/RadioGroup.stories.tsx b/starters/docs/stories/RadioGroup.stories.tsx index 05a9a51235c..299fdb4bcbe 100644 --- a/starters/docs/stories/RadioGroup.stories.tsx +++ b/starters/docs/stories/RadioGroup.stories.tsx @@ -1,5 +1,4 @@ import {RadioGroup, Radio} from '../src/RadioGroup'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/RangeCalendar.stories.tsx b/starters/docs/stories/RangeCalendar.stories.tsx index d124c8d0453..899eb31f84e 100644 --- a/starters/docs/stories/RangeCalendar.stories.tsx +++ b/starters/docs/stories/RangeCalendar.stories.tsx @@ -1,5 +1,4 @@ import {RangeCalendar} from '../src/RangeCalendar'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/SearchField.stories.tsx b/starters/docs/stories/SearchField.stories.tsx index d84213fc897..d790220c167 100644 --- a/starters/docs/stories/SearchField.stories.tsx +++ b/starters/docs/stories/SearchField.stories.tsx @@ -1,5 +1,4 @@ import {SearchField} from '../src/SearchField'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Select.stories.tsx b/starters/docs/stories/Select.stories.tsx index e24cfd939c5..6196525ee2b 100644 --- a/starters/docs/stories/Select.stories.tsx +++ b/starters/docs/stories/Select.stories.tsx @@ -1,5 +1,4 @@ import {Select, SelectItem} from '../src/Select'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Slider.stories.tsx b/starters/docs/stories/Slider.stories.tsx index f5b641b4e33..f8c7b1b7c29 100644 --- a/starters/docs/stories/Slider.stories.tsx +++ b/starters/docs/stories/Slider.stories.tsx @@ -1,5 +1,4 @@ import {Slider} from '../src/Slider'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Switch.stories.tsx b/starters/docs/stories/Switch.stories.tsx index e64f464386e..7e1c5893064 100644 --- a/starters/docs/stories/Switch.stories.tsx +++ b/starters/docs/stories/Switch.stories.tsx @@ -1,5 +1,4 @@ import {Switch} from '../src/Switch'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Table.stories.tsx b/starters/docs/stories/Table.stories.tsx index 32c0a0d7001..d29abdc44da 100644 --- a/starters/docs/stories/Table.stories.tsx +++ b/starters/docs/stories/Table.stories.tsx @@ -1,5 +1,4 @@ import {Column, Row, Table, TableHeader, TableBody, Cell} from '../src/Table'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Tabs.stories.tsx b/starters/docs/stories/Tabs.stories.tsx index 0d973842126..feccd582ee9 100644 --- a/starters/docs/stories/Tabs.stories.tsx +++ b/starters/docs/stories/Tabs.stories.tsx @@ -1,6 +1,5 @@ import {Tabs, Tab, TabList, TabPanel, TabPanels} from '../src/Tabs'; import {fn} from 'storybook/test'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/TagGroup.stories.tsx b/starters/docs/stories/TagGroup.stories.tsx index 289a4ebbf07..0dc6584d3c1 100644 --- a/starters/docs/stories/TagGroup.stories.tsx +++ b/starters/docs/stories/TagGroup.stories.tsx @@ -1,5 +1,4 @@ import {Tag, TagGroup} from '../src/TagGroup'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/TextField.stories.tsx b/starters/docs/stories/TextField.stories.tsx index 515e3039070..13d1ba03e36 100644 --- a/starters/docs/stories/TextField.stories.tsx +++ b/starters/docs/stories/TextField.stories.tsx @@ -1,5 +1,4 @@ import {TextField} from '../src/TextField'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/TimeField.stories.tsx b/starters/docs/stories/TimeField.stories.tsx index c97c441398d..870dc5503f7 100644 --- a/starters/docs/stories/TimeField.stories.tsx +++ b/starters/docs/stories/TimeField.stories.tsx @@ -1,5 +1,4 @@ import {TimeField} from '../src/TimeField'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ToggleButton.stories.tsx b/starters/docs/stories/ToggleButton.stories.tsx index 40870cad133..8146bc5d7b9 100644 --- a/starters/docs/stories/ToggleButton.stories.tsx +++ b/starters/docs/stories/ToggleButton.stories.tsx @@ -1,5 +1,4 @@ import {ToggleButton} from '../src/ToggleButton'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/ToggleButtonGroup.stories.tsx b/starters/docs/stories/ToggleButtonGroup.stories.tsx index 17db9c16eb3..ddb1eb94f17 100644 --- a/starters/docs/stories/ToggleButtonGroup.stories.tsx +++ b/starters/docs/stories/ToggleButtonGroup.stories.tsx @@ -1,6 +1,5 @@ import {ToggleButtonGroup} from '../src/ToggleButtonGroup'; import {ToggleButton} from '../src/ToggleButton'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Toolbar.stories.tsx b/starters/docs/stories/Toolbar.stories.tsx index 8e4d9a48a76..f3ae8561a8c 100644 --- a/starters/docs/stories/Toolbar.stories.tsx +++ b/starters/docs/stories/Toolbar.stories.tsx @@ -1,10 +1,9 @@ import {Toolbar} from '../src/Toolbar'; import {Separator} from '../src/Separator'; -import {Group} from 'react-aria-components'; +import { Group } from 'react-aria-components/Group'; import {Button} from '../src/Button'; import {ToggleButton} from '../src/ToggleButton'; import {Checkbox} from '../src/Checkbox'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Tooltip.stories.tsx b/starters/docs/stories/Tooltip.stories.tsx index b3d9f1e927d..56189cfd32e 100644 --- a/starters/docs/stories/Tooltip.stories.tsx +++ b/starters/docs/stories/Tooltip.stories.tsx @@ -1,7 +1,6 @@ import {Tooltip, TooltipTrigger} from '../src/Tooltip'; import {Button} from '../src/Button'; import {Save} from 'lucide-react'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/docs/stories/Tree.stories.tsx b/starters/docs/stories/Tree.stories.tsx index aa041d95cff..19bcd14db70 100644 --- a/starters/docs/stories/Tree.stories.tsx +++ b/starters/docs/stories/Tree.stories.tsx @@ -1,5 +1,4 @@ import {Tree, TreeItem} from '../src/Tree'; - import type {Meta, StoryFn} from '@storybook/react'; const meta: Meta = { diff --git a/starters/tailwind/src/AlertDialog.tsx b/starters/tailwind/src/AlertDialog.tsx index 8811d9ddedd..24637bf442b 100644 --- a/starters/tailwind/src/AlertDialog.tsx +++ b/starters/tailwind/src/AlertDialog.tsx @@ -1,8 +1,9 @@ 'use client'; import { AlertCircleIcon, InfoIcon } from "lucide-react"; -import React, { ReactNode } from "react"; -import { chain } from "react-aria"; -import { DialogProps, Heading } from "react-aria-components"; +import React, { type ReactNode } from "react"; +import { chain } from 'react-aria/chain'; +import { type DialogProps } from 'react-aria-components/Dialog'; +import { Heading } from 'react-aria-components/Heading'; import { Button } from "./Button"; import { Dialog } from "./Dialog"; diff --git a/starters/tailwind/src/Breadcrumbs.tsx b/starters/tailwind/src/Breadcrumbs.tsx index 9f7e281d606..3d393acb852 100644 --- a/starters/tailwind/src/Breadcrumbs.tsx +++ b/starters/tailwind/src/Breadcrumbs.tsx @@ -1,7 +1,13 @@ 'use client'; import { ChevronRight } from 'lucide-react'; import React from 'react'; -import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs, BreadcrumbProps, BreadcrumbsProps, LinkProps } from 'react-aria-components'; +import { + Breadcrumb as AriaBreadcrumb, + Breadcrumbs as AriaBreadcrumbs, + type BreadcrumbProps, + type BreadcrumbsProps, + type LinkProps, +} from 'react-aria-components/Breadcrumbs'; import { twMerge } from 'tailwind-merge'; import { Link } from './Link'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/Button.tsx b/starters/tailwind/src/Button.tsx index d7cda47d091..3faf2fc5099 100644 --- a/starters/tailwind/src/Button.tsx +++ b/starters/tailwind/src/Button.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; -import { composeRenderProps, Button as RACButton, ButtonProps as RACButtonProps } from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { Button as RACButton, type ButtonProps as RACButtonProps } from 'react-aria-components/Button'; import { tv } from 'tailwind-variants'; import { focusRing } from './utils'; diff --git a/starters/tailwind/src/Calendar.tsx b/starters/tailwind/src/Calendar.tsx index 00a78a90411..1cbbbace291 100644 --- a/starters/tailwind/src/Calendar.tsx +++ b/starters/tailwind/src/Calendar.tsx @@ -4,16 +4,16 @@ import React from 'react'; import { Calendar as AriaCalendar, CalendarGridHeader as AriaCalendarGridHeader, - CalendarProps as AriaCalendarProps, + type CalendarProps as AriaCalendarProps, CalendarCell, CalendarGrid, CalendarGridBody, CalendarHeaderCell, - DateValue, Heading, Text, - useLocale -} from 'react-aria-components'; + type DateValue, +} from 'react-aria-components/Calendar'; +import { useLocale } from 'react-aria-components/I18nProvider'; import { tv } from 'tailwind-variants'; import { Button } from './Button'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx index 7e226febc09..3ab7ee0cba0 100644 --- a/starters/tailwind/src/Checkbox.tsx +++ b/starters/tailwind/src/Checkbox.tsx @@ -1,7 +1,8 @@ 'use client'; import { Check, Minus } from 'lucide-react'; import React from 'react'; -import { Checkbox as AriaCheckbox, CheckboxProps, composeRenderProps } from 'react-aria-components'; +import { Checkbox as AriaCheckbox, type CheckboxProps } from 'react-aria-components/Checkbox'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; import { focusRing } from './utils'; diff --git a/starters/tailwind/src/CheckboxGroup.tsx b/starters/tailwind/src/CheckboxGroup.tsx index 524b1ce9eed..05e9c77123a 100644 --- a/starters/tailwind/src/CheckboxGroup.tsx +++ b/starters/tailwind/src/CheckboxGroup.tsx @@ -1,6 +1,10 @@ 'use client'; -import React, { ReactNode } from 'react'; -import { CheckboxGroup as AriaCheckboxGroup, CheckboxGroupProps as AriaCheckboxGroupProps, ValidationResult } from 'react-aria-components'; +import React, { type ReactNode } from 'react'; +import { + CheckboxGroup as AriaCheckboxGroup, + type CheckboxGroupProps as AriaCheckboxGroupProps, + type ValidationResult, +} from 'react-aria-components/CheckboxGroup'; import { Description, FieldError, Label } from './Field'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/ColorArea.tsx b/starters/tailwind/src/ColorArea.tsx index 20c4943d36c..6d13cea3770 100644 --- a/starters/tailwind/src/ColorArea.tsx +++ b/starters/tailwind/src/ColorArea.tsx @@ -1,9 +1,6 @@ 'use client'; import React from 'react'; -import { - ColorArea as AriaColorArea, - ColorAreaProps as AriaColorAreaProps -} from 'react-aria-components'; +import { ColorArea as AriaColorArea, type ColorAreaProps as AriaColorAreaProps } from 'react-aria-components/ColorArea'; import { composeTailwindRenderProps } from './utils'; import { ColorThumb } from './ColorThumb'; diff --git a/starters/tailwind/src/ColorField.tsx b/starters/tailwind/src/ColorField.tsx index b6f7c1de55f..374c14bb865 100644 --- a/starters/tailwind/src/ColorField.tsx +++ b/starters/tailwind/src/ColorField.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { ColorField as AriaColorField, - ColorFieldProps as AriaColorFieldProps, - ValidationResult -} from 'react-aria-components'; + type ColorFieldProps as AriaColorFieldProps, + type ValidationResult, +} from 'react-aria-components/ColorField'; import { tv } from 'tailwind-variants'; import { Description, FieldError, Input, Label, fieldBorderStyles } from './Field'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/ColorPicker.tsx b/starters/tailwind/src/ColorPicker.tsx index 6fadbc46121..13b6aed54e7 100644 --- a/starters/tailwind/src/ColorPicker.tsx +++ b/starters/tailwind/src/ColorPicker.tsx @@ -1,6 +1,8 @@ 'use client'; import React from 'react'; -import {Button, ColorPicker as AriaColorPicker, ColorPickerProps as AriaColorPickerProps, DialogTrigger} from 'react-aria-components'; +import { Button } from 'react-aria-components/Button'; +import { ColorPicker as AriaColorPicker, type ColorPickerProps as AriaColorPickerProps } from 'react-aria-components/ColorPicker'; +import { DialogTrigger } from 'react-aria-components/Dialog'; import {ColorSwatch} from './ColorSwatch'; import {ColorArea} from './ColorArea'; import {ColorSlider} from './ColorSlider'; diff --git a/starters/tailwind/src/ColorSlider.tsx b/starters/tailwind/src/ColorSlider.tsx index 4361ebcce25..c530bfdee9d 100644 --- a/starters/tailwind/src/ColorSlider.tsx +++ b/starters/tailwind/src/ColorSlider.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { ColorSlider as AriaColorSlider, - ColorSliderProps as AriaColorSliderProps, + type ColorSliderProps as AriaColorSliderProps, SliderOutput, - SliderTrack -} from 'react-aria-components'; + SliderTrack, +} from 'react-aria-components/ColorSlider'; import { tv } from 'tailwind-variants'; import { Label } from './Field'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/ColorSwatch.tsx b/starters/tailwind/src/ColorSwatch.tsx index fbb665f7df4..cbe3ffd8b09 100644 --- a/starters/tailwind/src/ColorSwatch.tsx +++ b/starters/tailwind/src/ColorSwatch.tsx @@ -1,6 +1,6 @@ 'use client'; import React from 'react'; -import {ColorSwatch as AriaColorSwatch, ColorSwatchProps} from 'react-aria-components'; +import { ColorSwatch as AriaColorSwatch, type ColorSwatchProps } from 'react-aria-components/ColorSwatch'; import { composeTailwindRenderProps } from './utils'; export function ColorSwatch(props: ColorSwatchProps) { diff --git a/starters/tailwind/src/ColorSwatchPicker.tsx b/starters/tailwind/src/ColorSwatchPicker.tsx index a7d502df771..a7be241aefe 100644 --- a/starters/tailwind/src/ColorSwatchPicker.tsx +++ b/starters/tailwind/src/ColorSwatchPicker.tsx @@ -3,10 +3,10 @@ import React from 'react'; import { ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, - ColorSwatchPickerItemProps, - ColorSwatchPickerProps, - composeRenderProps -} from 'react-aria-components'; + type ColorSwatchPickerItemProps, + type ColorSwatchPickerProps, +} from 'react-aria-components/ColorSwatchPicker'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import {ColorSwatch} from './ColorSwatch'; import {focusRing} from './utils'; import {tv} from 'tailwind-variants'; diff --git a/starters/tailwind/src/ColorThumb.tsx b/starters/tailwind/src/ColorThumb.tsx index 143af7f66f6..46820b94323 100644 --- a/starters/tailwind/src/ColorThumb.tsx +++ b/starters/tailwind/src/ColorThumb.tsx @@ -1,6 +1,6 @@ 'use client'; import React from 'react'; -import {ColorThumb as AriaColorThumb, ColorThumbProps} from 'react-aria-components'; +import { ColorThumb as AriaColorThumb, type ColorThumbProps } from 'react-aria-components/ColorThumb'; import { tv } from 'tailwind-variants'; const thumbStyles = tv({ diff --git a/starters/tailwind/src/ColorWheel.tsx b/starters/tailwind/src/ColorWheel.tsx index 3966450d3ad..d19dbbd1ee4 100644 --- a/starters/tailwind/src/ColorWheel.tsx +++ b/starters/tailwind/src/ColorWheel.tsx @@ -1,6 +1,10 @@ 'use client'; import React from 'react'; -import {ColorWheel as AriaColorWheel, ColorWheelProps as AriaColorWheelProps, ColorWheelTrack} from 'react-aria-components'; +import { + ColorWheel as AriaColorWheel, + type ColorWheelProps as AriaColorWheelProps, + ColorWheelTrack, +} from 'react-aria-components/ColorWheel'; import { ColorThumb } from './ColorThumb'; export interface ColorWheelProps extends Omit {} diff --git a/starters/tailwind/src/ComboBox.tsx b/starters/tailwind/src/ComboBox.tsx index 48ef1fc17f9..bb18bebb5e7 100644 --- a/starters/tailwind/src/ComboBox.tsx +++ b/starters/tailwind/src/ComboBox.tsx @@ -3,14 +3,14 @@ import { ChevronDown } from 'lucide-react'; import React from 'react'; import { ComboBox as AriaComboBox, - ComboBoxProps as AriaComboBoxProps, + type ComboBoxProps as AriaComboBoxProps, ComboBoxValue, ListBox, - ListBoxItemProps, - ValidationResult -} from 'react-aria-components'; + type ListBoxItemProps, + type ValidationResult, +} from 'react-aria-components/ComboBox'; import { Description, FieldError, FieldGroup, Input, Label } from './Field'; -import { DropdownItem, DropdownSection, DropdownSectionProps } from './ListBox'; +import { DropdownItem, DropdownSection, type DropdownSectionProps } from './ListBox'; import { Popover } from './Popover'; import { composeTailwindRenderProps } from './utils'; import { FieldButton } from './FieldButton'; diff --git a/starters/tailwind/src/CommandPalette.tsx b/starters/tailwind/src/CommandPalette.tsx index 71573140948..88e7c920782 100644 --- a/starters/tailwind/src/CommandPalette.tsx +++ b/starters/tailwind/src/CommandPalette.tsx @@ -1,11 +1,11 @@ 'use client'; import { Autocomplete as AriaAutocomplete, - AutocompleteProps as AriaAutocompleteProps, - MenuProps as AriaMenuProps, + type AutocompleteProps as AriaAutocompleteProps, useFilter, - Dialog -} from 'react-aria-components'; +} from 'react-aria-components/Autocomplete'; +import { type MenuProps as AriaMenuProps } from 'react-aria-components/Menu'; +import { Dialog } from 'react-aria-components/Dialog'; import {Menu} from './Menu'; import {SearchField} from './SearchField'; import {Modal} from './Modal'; diff --git a/starters/tailwind/src/DateField.tsx b/starters/tailwind/src/DateField.tsx index 93cc6ca0a82..f741ba8c1ba 100644 --- a/starters/tailwind/src/DateField.tsx +++ b/starters/tailwind/src/DateField.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { DateField as AriaDateField, - DateFieldProps as AriaDateFieldProps, + type DateFieldProps as AriaDateFieldProps, DateInput as AriaDateInput, - DateInputProps, + type DateInputProps, DateSegment, - DateValue, - ValidationResult -} from 'react-aria-components'; + type DateValue, + type ValidationResult, +} from 'react-aria-components/DateField'; import { tv } from 'tailwind-variants'; import { Description, FieldError, Label, fieldGroupStyles } from './Field'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/DatePicker.tsx b/starters/tailwind/src/DatePicker.tsx index 2ac5f5e0aa7..b745260acdf 100644 --- a/starters/tailwind/src/DatePicker.tsx +++ b/starters/tailwind/src/DatePicker.tsx @@ -3,10 +3,10 @@ import { CalendarIcon } from 'lucide-react'; import React from 'react'; import { DatePicker as AriaDatePicker, - DatePickerProps as AriaDatePickerProps, - DateValue, - ValidationResult -} from 'react-aria-components'; + type DatePickerProps as AriaDatePickerProps, + type DateValue, + type ValidationResult, +} from 'react-aria-components/DatePicker'; import { Calendar } from './Calendar'; import { DateInput } from './DateField'; import { Description, FieldError, FieldGroup, Label } from './Field'; diff --git a/starters/tailwind/src/DateRangePicker.tsx b/starters/tailwind/src/DateRangePicker.tsx index 9a858e3978c..35a2dcc90a7 100644 --- a/starters/tailwind/src/DateRangePicker.tsx +++ b/starters/tailwind/src/DateRangePicker.tsx @@ -3,10 +3,10 @@ import { CalendarIcon } from 'lucide-react'; import React from 'react'; import { DateRangePicker as AriaDateRangePicker, - DateRangePickerProps as AriaDateRangePickerProps, - DateValue, - ValidationResult -} from 'react-aria-components'; + type DateRangePickerProps as AriaDateRangePickerProps, + type DateValue, + type ValidationResult, +} from 'react-aria-components/DateRangePicker'; import { DateInput } from './DateField'; import { Description, FieldError, FieldGroup, Label } from './Field'; import { Popover } from './Popover'; diff --git a/starters/tailwind/src/Dialog.tsx b/starters/tailwind/src/Dialog.tsx index 5ff2c9f1fec..d408aed2ae2 100644 --- a/starters/tailwind/src/Dialog.tsx +++ b/starters/tailwind/src/Dialog.tsx @@ -1,6 +1,6 @@ 'use client'; import React from 'react'; -import { DialogProps, Dialog as RACDialog } from 'react-aria-components'; +import { type DialogProps, Dialog as RACDialog } from 'react-aria-components/Dialog'; import { twMerge } from 'tailwind-merge'; export function Dialog(props: DialogProps) { diff --git a/starters/tailwind/src/Disclosure.tsx b/starters/tailwind/src/Disclosure.tsx index e184a451dfe..03c21ab4dff 100644 --- a/starters/tailwind/src/Disclosure.tsx +++ b/starters/tailwind/src/Disclosure.tsx @@ -2,13 +2,13 @@ import React, { useContext } from "react"; import { Disclosure as AriaDisclosure, - DisclosureProps as AriaDisclosureProps, DisclosurePanel as AriaDisclosurePanel, - DisclosurePanelProps as AriaDisclosurePanelProps, - composeRenderProps, - Heading, DisclosureStateContext, -} from "react-aria-components"; + Heading, + type DisclosurePanelProps as AriaDisclosurePanelProps, + type DisclosureProps as AriaDisclosureProps, +} from 'react-aria-components/Disclosure'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { Button } from './Button'; import { tv } from "tailwind-variants"; import { ChevronRight } from "lucide-react"; diff --git a/starters/tailwind/src/DisclosureGroup.tsx b/starters/tailwind/src/DisclosureGroup.tsx index c2cfd1b2c6d..6a8329ecbd1 100644 --- a/starters/tailwind/src/DisclosureGroup.tsx +++ b/starters/tailwind/src/DisclosureGroup.tsx @@ -2,8 +2,8 @@ import React from "react"; import { DisclosureGroup as AriaDisclosureGroup, - DisclosureGroupProps as AriaDisclosureGroupProps, -} from "react-aria-components"; + type DisclosureGroupProps as AriaDisclosureGroupProps, +} from 'react-aria-components/DisclosureGroup'; export interface DisclosureGroupProps extends AriaDisclosureGroupProps { children: React.ReactNode diff --git a/starters/tailwind/src/DropZone.tsx b/starters/tailwind/src/DropZone.tsx index dc197617f0b..23715d8b250 100644 --- a/starters/tailwind/src/DropZone.tsx +++ b/starters/tailwind/src/DropZone.tsx @@ -1,6 +1,7 @@ 'use client'; import React from "react"; -import {composeRenderProps, DropZoneProps, DropZone as RACDropZone} from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { type DropZoneProps, DropZone as RACDropZone } from 'react-aria-components/DropZone'; import { tv } from "tailwind-variants"; const dropZone = tv({ diff --git a/starters/tailwind/src/Field.tsx b/starters/tailwind/src/Field.tsx index 563e83c2012..bc800fd398d 100644 --- a/starters/tailwind/src/Field.tsx +++ b/starters/tailwind/src/Field.tsx @@ -1,6 +1,11 @@ 'use client'; import React from 'react'; -import { FieldErrorProps, Group, GroupProps, InputProps, LabelProps, FieldError as RACFieldError, Input as RACInput, Label as RACLabel, Text, TextProps, composeRenderProps } from "react-aria-components"; +import { type FieldErrorProps, FieldError as RACFieldError } from 'react-aria-components/FieldError'; +import { Group, type GroupProps } from 'react-aria-components/Group'; +import { type InputProps, Input as RACInput } from 'react-aria-components/Input'; +import { type LabelProps, Label as RACLabel } from 'react-aria-components/Label'; +import { Text, type TextProps } from 'react-aria-components/Text'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { twMerge } from 'tailwind-merge'; import { tv } from 'tailwind-variants'; import { composeTailwindRenderProps, focusRing } from "./utils"; diff --git a/starters/tailwind/src/FieldButton.tsx b/starters/tailwind/src/FieldButton.tsx index 6b3d91611f6..445086518b2 100644 --- a/starters/tailwind/src/FieldButton.tsx +++ b/starters/tailwind/src/FieldButton.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; -import { composeRenderProps, Button as RACButton, ButtonProps as RACButtonProps } from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { Button as RACButton, type ButtonProps as RACButtonProps } from 'react-aria-components/Button'; import { tv } from 'tailwind-variants'; import { focusRing } from './utils'; diff --git a/starters/tailwind/src/Form.tsx b/starters/tailwind/src/Form.tsx index af0a7496bf3..1229552e14b 100644 --- a/starters/tailwind/src/Form.tsx +++ b/starters/tailwind/src/Form.tsx @@ -1,6 +1,6 @@ 'use client'; import React from 'react'; -import { FormProps, Form as RACForm } from 'react-aria-components'; +import { type FormProps, Form as RACForm } from 'react-aria-components/Form'; import { twMerge } from 'tailwind-merge'; export function Form(props: FormProps) { diff --git a/starters/tailwind/src/GridList.tsx b/starters/tailwind/src/GridList.tsx index cc368f73eb9..37bd56930de 100644 --- a/starters/tailwind/src/GridList.tsx +++ b/starters/tailwind/src/GridList.tsx @@ -5,14 +5,14 @@ import { GridListItem as AriaGridListItem, GridListHeader as AriaGridListHeader, Button, - composeRenderProps, - GridListItemProps, - GridListProps -} from 'react-aria-components'; + type GridListItemProps, + type GridListProps, +} from 'react-aria-components/GridList'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; import { Checkbox } from './Checkbox'; import { composeTailwindRenderProps, focusRing } from './utils'; -import {HTMLAttributes} from 'react'; +import {type HTMLAttributes} from 'react'; import { twMerge } from 'tailwind-merge'; export function GridList( diff --git a/starters/tailwind/src/Link.tsx b/starters/tailwind/src/Link.tsx index 5607cabbbc5..95b51ca3bf0 100644 --- a/starters/tailwind/src/Link.tsx +++ b/starters/tailwind/src/Link.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; -import { Link as AriaLink, LinkProps as AriaLinkProps, composeRenderProps } from 'react-aria-components'; +import { Link as AriaLink, type LinkProps as AriaLinkProps } from 'react-aria-components/Link'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; import { focusRing } from './utils'; diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx index 57c5740d57d..cd4ed6e7622 100644 --- a/starters/tailwind/src/ListBox.tsx +++ b/starters/tailwind/src/ListBox.tsx @@ -4,14 +4,14 @@ import React from 'react'; import { ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, - ListBoxProps as AriaListBoxProps, - Collection, - Header, - ListBoxItemProps, ListBoxSection, - SectionProps, - composeRenderProps -} from 'react-aria-components'; + Header, + Collection, + type ListBoxProps as AriaListBoxProps, + type ListBoxItemProps, + type ListBoxSectionProps +} from 'react-aria-components/ListBox'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; import { composeTailwindRenderProps, focusRing } from './utils'; @@ -92,7 +92,7 @@ export function DropdownItem(props: ListBoxItemProps) { ); } -export interface DropdownSectionProps extends SectionProps { +export interface DropdownSectionProps extends ListBoxSectionProps { title?: string items?: any } diff --git a/starters/tailwind/src/Menu.tsx b/starters/tailwind/src/Menu.tsx index 01dfcd08b81..a427a5f5334 100644 --- a/starters/tailwind/src/Menu.tsx +++ b/starters/tailwind/src/Menu.tsx @@ -4,22 +4,22 @@ import React from 'react'; import { Menu as AriaMenu, MenuItem as AriaMenuItem, - MenuProps, - MenuItemProps, + type MenuProps, + type MenuItemProps, MenuSection as AriaMenuSection, - MenuSectionProps as AriaMenuSectionProps, + type MenuSectionProps as AriaMenuSectionProps, MenuTrigger as AriaMenuTrigger, SubmenuTrigger as AriaSubmenuTrigger, Separator, - SeparatorProps, - composeRenderProps, + type SeparatorProps, Header, Collection, - SubmenuTriggerProps, - MenuTriggerProps as AriaMenuTriggerProps -} from 'react-aria-components'; + type SubmenuTriggerProps, + type MenuTriggerProps as AriaMenuTriggerProps, +} from 'react-aria-components/Menu'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { dropdownItemStyles } from './ListBox'; -import { Popover, PopoverProps } from './Popover'; +import { Popover, type PopoverProps } from './Popover'; export function Menu(props: MenuProps) { return ( diff --git a/starters/tailwind/src/Meter.tsx b/starters/tailwind/src/Meter.tsx index 9af4d864b71..a698353b13e 100644 --- a/starters/tailwind/src/Meter.tsx +++ b/starters/tailwind/src/Meter.tsx @@ -1,10 +1,7 @@ 'use client'; import { AlertTriangle } from 'lucide-react'; import React from 'react'; -import { - Meter as AriaMeter, - MeterProps as AriaMeterProps -} from 'react-aria-components'; +import { Meter as AriaMeter, type MeterProps as AriaMeterProps } from 'react-aria-components/Meter'; import { Label } from './Field'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/Modal.tsx b/starters/tailwind/src/Modal.tsx index 80269f61b5b..357c7219624 100644 --- a/starters/tailwind/src/Modal.tsx +++ b/starters/tailwind/src/Modal.tsx @@ -1,6 +1,6 @@ 'use client'; import React from 'react'; -import { ModalOverlay, ModalOverlayProps, Modal as RACModal } from 'react-aria-components'; +import { ModalOverlay, type ModalOverlayProps, Modal as RACModal } from 'react-aria-components/Modal'; import { tv } from 'tailwind-variants'; const overlayStyles = tv({ diff --git a/starters/tailwind/src/NumberField.tsx b/starters/tailwind/src/NumberField.tsx index 30a308ee13b..e4ac1c45e28 100644 --- a/starters/tailwind/src/NumberField.tsx +++ b/starters/tailwind/src/NumberField.tsx @@ -3,11 +3,11 @@ import { ChevronDown, ChevronUp } from 'lucide-react'; import React from 'react'; import { NumberField as AriaNumberField, - NumberFieldProps as AriaNumberFieldProps, + type NumberFieldProps as AriaNumberFieldProps, Button, - ButtonProps, - ValidationResult -} from 'react-aria-components'; + type ButtonProps, + type ValidationResult, +} from 'react-aria-components/NumberField'; import { Description, FieldError, FieldGroup, Input, Label, fieldBorderStyles } from './Field'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/Popover.tsx b/starters/tailwind/src/Popover.tsx index 2b888002d98..537a8e79b9f 100644 --- a/starters/tailwind/src/Popover.tsx +++ b/starters/tailwind/src/Popover.tsx @@ -1,10 +1,6 @@ 'use client'; -import { - OverlayArrow, - Popover as AriaPopover, - PopoverProps as AriaPopoverProps, - composeRenderProps -} from 'react-aria-components'; +import { OverlayArrow, Popover as AriaPopover, type PopoverProps as AriaPopoverProps } from 'react-aria-components/Popover'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import React from 'react'; import {tv} from 'tailwind-variants'; diff --git a/starters/tailwind/src/ProgressBar.tsx b/starters/tailwind/src/ProgressBar.tsx index 727471257e2..bcc10fbf33d 100644 --- a/starters/tailwind/src/ProgressBar.tsx +++ b/starters/tailwind/src/ProgressBar.tsx @@ -1,9 +1,6 @@ 'use client'; import React from 'react'; -import { - ProgressBar as AriaProgressBar, - ProgressBarProps as AriaProgressBarProps -} from 'react-aria-components'; +import { ProgressBar as AriaProgressBar, type ProgressBarProps as AriaProgressBarProps } from 'react-aria-components/ProgressBar'; import { Label } from './Field'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/RadioGroup.tsx b/starters/tailwind/src/RadioGroup.tsx index 19d0a96d909..c7f942015cc 100644 --- a/starters/tailwind/src/RadioGroup.tsx +++ b/starters/tailwind/src/RadioGroup.tsx @@ -1,6 +1,13 @@ 'use client'; -import React, { ReactNode } from 'react'; -import { composeRenderProps, Radio as RACRadio, RadioGroup as RACRadioGroup, RadioGroupProps as RACRadioGroupProps, RadioProps, ValidationResult } from 'react-aria-components'; +import React, { type ReactNode } from 'react'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { + Radio as RACRadio, + RadioGroup as RACRadioGroup, + type RadioGroupProps as RACRadioGroupProps, + type RadioProps, + type ValidationResult, +} from 'react-aria-components/RadioGroup'; import { tv } from 'tailwind-variants'; import { Description, FieldError, Label } from './Field'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/RangeCalendar.tsx b/starters/tailwind/src/RangeCalendar.tsx index 6a522fb53e7..8084b04cc1f 100644 --- a/starters/tailwind/src/RangeCalendar.tsx +++ b/starters/tailwind/src/RangeCalendar.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { RangeCalendar as AriaRangeCalendar, - RangeCalendarProps as AriaRangeCalendarProps, CalendarCell, CalendarGrid, CalendarGridBody, - DateValue, - Text -} from 'react-aria-components'; + Text, + type DateValue, + type RangeCalendarProps as AriaRangeCalendarProps +} from 'react-aria-components/RangeCalendar'; import { tv } from 'tailwind-variants'; import { CalendarGridHeader, CalendarHeader } from './Calendar'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/SearchField.tsx b/starters/tailwind/src/SearchField.tsx index cd7d1745421..661228fdd11 100644 --- a/starters/tailwind/src/SearchField.tsx +++ b/starters/tailwind/src/SearchField.tsx @@ -3,9 +3,9 @@ import { SearchIcon, XIcon } from 'lucide-react'; import React from 'react'; import { SearchField as AriaSearchField, - SearchFieldProps as AriaSearchFieldProps, - ValidationResult -} from 'react-aria-components'; + type SearchFieldProps as AriaSearchFieldProps, + type ValidationResult, +} from 'react-aria-components/SearchField'; import { Description, FieldError, FieldGroup, Input, Label } from './Field'; import { composeTailwindRenderProps } from './utils'; import { FieldButton } from './FieldButton'; diff --git a/starters/tailwind/src/Select.tsx b/starters/tailwind/src/Select.tsx index 63f744ed011..c540312b85f 100644 --- a/starters/tailwind/src/Select.tsx +++ b/starters/tailwind/src/Select.tsx @@ -3,16 +3,16 @@ import { ChevronDown } from 'lucide-react'; import React from 'react'; import { Select as AriaSelect, - SelectProps as AriaSelectProps, + type SelectProps as AriaSelectProps, Button, ListBox, - ListBoxItemProps, + type ListBoxItemProps, SelectValue, - ValidationResult -} from 'react-aria-components'; + type ValidationResult, +} from 'react-aria-components/Select'; import { tv } from 'tailwind-variants'; import { Description, FieldError, Label } from './Field'; -import { DropdownItem, DropdownSection, DropdownSectionProps } from './ListBox'; +import { DropdownItem, DropdownSection, type DropdownSectionProps } from './ListBox'; import { Popover } from './Popover'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/Separator.tsx b/starters/tailwind/src/Separator.tsx index 4b9c7eb13b2..a2e7a947e8d 100644 --- a/starters/tailwind/src/Separator.tsx +++ b/starters/tailwind/src/Separator.tsx @@ -1,6 +1,6 @@ 'use client'; import React from 'react'; -import { Separator as RACSeparator, SeparatorProps } from 'react-aria-components'; +import { Separator as RACSeparator, type SeparatorProps } from 'react-aria-components/Separator'; import { tv } from 'tailwind-variants'; const styles = tv({ diff --git a/starters/tailwind/src/Slider.tsx b/starters/tailwind/src/Slider.tsx index 9cbebcc6bef..f548ba4b1bc 100644 --- a/starters/tailwind/src/Slider.tsx +++ b/starters/tailwind/src/Slider.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { Slider as AriaSlider, - SliderProps as AriaSliderProps, + type SliderProps as AriaSliderProps, SliderOutput, SliderThumb, - SliderTrack -} from 'react-aria-components'; + SliderTrack, +} from 'react-aria-components/Slider'; import { tv } from 'tailwind-variants'; import { Label } from './Field'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/Switch.tsx b/starters/tailwind/src/Switch.tsx index 5c0a0d40d15..2ac411a306d 100644 --- a/starters/tailwind/src/Switch.tsx +++ b/starters/tailwind/src/Switch.tsx @@ -1,9 +1,6 @@ 'use client'; import React from 'react'; -import { - Switch as AriaSwitch, - SwitchProps as AriaSwitchProps -} from 'react-aria-components'; +import { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components/Switch'; import { tv } from 'tailwind-variants'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx index 689d9aaa3df..4ccd9fb1927 100644 --- a/starters/tailwind/src/Table.tsx +++ b/starters/tailwind/src/Table.tsx @@ -9,19 +9,19 @@ import { TableHeader as AriaTableHeader, TableBody as AriaTableBody, Button, - CellProps, + type CellProps, Collection, - ColumnProps, + type ColumnProps, ColumnResizer, - Group, ResizableTableContainer, - RowProps, - TableHeaderProps, - TableProps as AriaTableProps, - composeRenderProps, + type RowProps, + type TableHeaderProps, + type TableProps as AriaTableProps, useTableOptions, - TableBodyProps -} from 'react-aria-components'; + type TableBodyProps, +} from 'react-aria-components/Table'; +import { Group } from 'react-aria-components/Group'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { twMerge } from 'tailwind-merge'; import { tv } from 'tailwind-variants'; import { Checkbox } from './Checkbox'; diff --git a/starters/tailwind/src/Tabs.tsx b/starters/tailwind/src/Tabs.tsx index 15917d8d33c..b488ccb9c28 100644 --- a/starters/tailwind/src/Tabs.tsx +++ b/starters/tailwind/src/Tabs.tsx @@ -7,13 +7,13 @@ import { TabPanel as RACTabPanel, Tabs as RACTabs, SelectionIndicator, - TabListProps, - TabPanelProps, - TabPanelsProps, - TabProps, - TabsProps, - composeRenderProps -} from 'react-aria-components'; + type TabListProps, + type TabPanelProps, + type TabPanelsProps, + type TabProps, + type TabsProps, +} from 'react-aria-components/Tabs'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; import { focusRing } from './utils'; import { twMerge } from 'tailwind-merge'; diff --git a/starters/tailwind/src/TagGroup.tsx b/starters/tailwind/src/TagGroup.tsx index addd849c29e..d67125ff98a 100644 --- a/starters/tailwind/src/TagGroup.tsx +++ b/starters/tailwind/src/TagGroup.tsx @@ -4,14 +4,14 @@ import React, { createContext, useContext } from 'react'; import { Tag as AriaTag, TagGroup as AriaTagGroup, - TagGroupProps as AriaTagGroupProps, - TagProps as AriaTagProps, + type TagGroupProps as AriaTagGroupProps, + type TagProps as AriaTagProps, Button, TagList, - TagListProps, + type TagListProps, Text, - composeRenderProps -} from 'react-aria-components'; +} from 'react-aria-components/TagGroup'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { twMerge } from 'tailwind-merge'; import { tv } from 'tailwind-variants'; import { Description, Label } from './Field'; diff --git a/starters/tailwind/src/TextField.tsx b/starters/tailwind/src/TextField.tsx index d5da9723f24..55c11e9dc4f 100644 --- a/starters/tailwind/src/TextField.tsx +++ b/starters/tailwind/src/TextField.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { TextField as AriaTextField, - TextFieldProps as AriaTextFieldProps, - ValidationResult -} from 'react-aria-components'; + type TextFieldProps as AriaTextFieldProps, + type ValidationResult, +} from 'react-aria-components/TextField'; import { tv } from 'tailwind-variants'; import { Description, FieldError, Input, Label, fieldBorderStyles } from './Field'; import { composeTailwindRenderProps, focusRing } from './utils'; diff --git a/starters/tailwind/src/TimeField.tsx b/starters/tailwind/src/TimeField.tsx index 4b7f686fbce..89b4c23a8f9 100644 --- a/starters/tailwind/src/TimeField.tsx +++ b/starters/tailwind/src/TimeField.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { TimeField as AriaTimeField, - TimeFieldProps as AriaTimeFieldProps, - TimeValue, - ValidationResult -} from 'react-aria-components'; + type TimeFieldProps as AriaTimeFieldProps, + type TimeValue, + type ValidationResult, +} from 'react-aria-components/TimeField'; import { DateInput } from './DateField'; import { Description, FieldError, Label } from './Field'; import { composeTailwindRenderProps } from './utils'; diff --git a/starters/tailwind/src/Toast.tsx b/starters/tailwind/src/Toast.tsx index d27252bc396..ea4aede9249 100644 --- a/starters/tailwind/src/Toast.tsx +++ b/starters/tailwind/src/Toast.tsx @@ -1,14 +1,14 @@ 'use client'; -import React, { CSSProperties } from 'react'; +import React, { type CSSProperties } from 'react'; import { UNSTABLE_ToastRegion as ToastRegion, UNSTABLE_Toast as Toast, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastContent as ToastContent, - ToastProps, + type ToastProps, Button, - Text -} from 'react-aria-components'; + Text, +} from 'react-aria-components/Toast'; import {XIcon} from 'lucide-react'; import {composeTailwindRenderProps} from './utils'; import {flushSync} from 'react-dom'; diff --git a/starters/tailwind/src/ToggleButton.tsx b/starters/tailwind/src/ToggleButton.tsx index 205f2e1f441..d9cc3e97a51 100644 --- a/starters/tailwind/src/ToggleButton.tsx +++ b/starters/tailwind/src/ToggleButton.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; -import { ToggleButton as RACToggleButton, ToggleButtonProps, composeRenderProps } from 'react-aria-components'; +import { ToggleButton as RACToggleButton, type ToggleButtonProps } from 'react-aria-components/ToggleButton'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; import { focusRing } from './utils'; diff --git a/starters/tailwind/src/ToggleButtonGroup.tsx b/starters/tailwind/src/ToggleButtonGroup.tsx index bc45c9f82f4..e9c46d044fd 100644 --- a/starters/tailwind/src/ToggleButtonGroup.tsx +++ b/starters/tailwind/src/ToggleButtonGroup.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; -import { composeRenderProps, ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps } from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; +import { ToggleButtonGroup as RACToggleButtonGroup, type ToggleButtonGroupProps } from 'react-aria-components/ToggleButtonGroup'; import { tv } from 'tailwind-variants'; const styles = tv({ diff --git a/starters/tailwind/src/Toolbar.tsx b/starters/tailwind/src/Toolbar.tsx index d401c25a1fe..1b2a1da8666 100644 --- a/starters/tailwind/src/Toolbar.tsx +++ b/starters/tailwind/src/Toolbar.tsx @@ -1,6 +1,8 @@ 'use client'; import React from 'react'; -import { Toolbar as RACToolbar, ToggleButtonGroupContext, ToolbarProps, composeRenderProps } from 'react-aria-components'; +import { Toolbar as RACToolbar, type ToolbarProps } from 'react-aria-components/Toolbar'; +import { ToggleButtonGroupContext } from 'react-aria-components/ToggleButtonGroup'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; const styles = tv({ diff --git a/starters/tailwind/src/Tooltip.tsx b/starters/tailwind/src/Tooltip.tsx index f1995988a20..58830e65827 100644 --- a/starters/tailwind/src/Tooltip.tsx +++ b/starters/tailwind/src/Tooltip.tsx @@ -1,11 +1,7 @@ 'use client'; import React from 'react'; -import { - Tooltip as AriaTooltip, - TooltipProps as AriaTooltipProps, - OverlayArrow, - composeRenderProps -} from 'react-aria-components'; +import { Tooltip as AriaTooltip, type TooltipProps as AriaTooltipProps, OverlayArrow } from 'react-aria-components/Tooltip'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { tv } from 'tailwind-variants'; export interface TooltipProps extends Omit { diff --git a/starters/tailwind/src/Tree.tsx b/starters/tailwind/src/Tree.tsx index afebe54fbcd..70c77ef4c71 100644 --- a/starters/tailwind/src/Tree.tsx +++ b/starters/tailwind/src/Tree.tsx @@ -5,9 +5,9 @@ import { TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent, Button, - TreeItemProps as AriaTreeItemProps, - TreeProps -} from 'react-aria-components'; + type TreeItemProps as AriaTreeItemProps, + type TreeProps, +} from 'react-aria-components/Tree'; import { ChevronRight } from "lucide-react"; import { tv } from 'tailwind-variants'; import { Checkbox } from './Checkbox'; diff --git a/starters/tailwind/src/utils.ts b/starters/tailwind/src/utils.ts index ebf9fd85ef3..134e7b3ca62 100644 --- a/starters/tailwind/src/utils.ts +++ b/starters/tailwind/src/utils.ts @@ -1,4 +1,4 @@ -import { composeRenderProps } from 'react-aria-components'; +import { composeRenderProps } from 'react-aria-components/composeRenderProps'; import { twMerge } from 'tailwind-merge'; import { tv } from 'tailwind-variants'; diff --git a/starters/tailwind/stories/AlertDialog.stories.tsx b/starters/tailwind/stories/AlertDialog.stories.tsx index b430937072a..41c4dbe154c 100644 --- a/starters/tailwind/stories/AlertDialog.stories.tsx +++ b/starters/tailwind/stories/AlertDialog.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { DialogTrigger } from 'react-aria-components'; +import { DialogTrigger } from 'react-aria-components/Dialog'; import { AlertDialog } from '../src/AlertDialog'; import { Button } from '../src/Button'; import { Modal } from '../src/Modal'; diff --git a/starters/tailwind/stories/Breadcrumbs.stories.tsx b/starters/tailwind/stories/Breadcrumbs.stories.tsx index 20692034644..c500cb1035e 100644 --- a/starters/tailwind/stories/Breadcrumbs.stories.tsx +++ b/starters/tailwind/stories/Breadcrumbs.stories.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Breadcrumb, Breadcrumbs } from '../src/Breadcrumbs'; - -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; const meta: Meta = { component: Breadcrumbs, diff --git a/starters/tailwind/stories/Calendar.stories.tsx b/starters/tailwind/stories/Calendar.stories.tsx index 858a9b7af94..c3b4edc7ccb 100644 --- a/starters/tailwind/stories/Calendar.stories.tsx +++ b/starters/tailwind/stories/Calendar.stories.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Calendar } from '../src/Calendar'; - -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; const meta: Meta = { component: Calendar, diff --git a/starters/tailwind/stories/CheckboxGroup.stories.tsx b/starters/tailwind/stories/CheckboxGroup.stories.tsx index bdffcbd9d42..1aa5ef10da6 100644 --- a/starters/tailwind/stories/CheckboxGroup.stories.tsx +++ b/starters/tailwind/stories/CheckboxGroup.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { Checkbox } from '../src/Checkbox'; import { CheckboxGroup } from '../src/CheckboxGroup'; diff --git a/starters/tailwind/stories/ColorArea.stories.tsx b/starters/tailwind/stories/ColorArea.stories.tsx index b13a3a6c7d3..f8eecb701b3 100644 --- a/starters/tailwind/stories/ColorArea.stories.tsx +++ b/starters/tailwind/stories/ColorArea.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ColorArea } from '../src/ColorArea'; diff --git a/starters/tailwind/stories/ColorField.stories.tsx b/starters/tailwind/stories/ColorField.stories.tsx index 5a1e499b1f7..0206b1b2756 100644 --- a/starters/tailwind/stories/ColorField.stories.tsx +++ b/starters/tailwind/stories/ColorField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ColorField } from '../src/ColorField'; diff --git a/starters/tailwind/stories/ColorPicker.stories.tsx b/starters/tailwind/stories/ColorPicker.stories.tsx index e15f1688a92..1abf6316df9 100644 --- a/starters/tailwind/stories/ColorPicker.stories.tsx +++ b/starters/tailwind/stories/ColorPicker.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ColorPicker } from '../src/ColorPicker'; diff --git a/starters/tailwind/stories/ColorSlider.stories.tsx b/starters/tailwind/stories/ColorSlider.stories.tsx index e03ae756a1f..7d39cbc3f57 100644 --- a/starters/tailwind/stories/ColorSlider.stories.tsx +++ b/starters/tailwind/stories/ColorSlider.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ColorSlider } from '../src/ColorSlider'; diff --git a/starters/tailwind/stories/ColorSwatch.stories.tsx b/starters/tailwind/stories/ColorSwatch.stories.tsx index e9311ccaa85..6f75b87388d 100644 --- a/starters/tailwind/stories/ColorSwatch.stories.tsx +++ b/starters/tailwind/stories/ColorSwatch.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ColorSwatch } from '../src/ColorSwatch'; diff --git a/starters/tailwind/stories/ColorSwatchPicker.stories.tsx b/starters/tailwind/stories/ColorSwatchPicker.stories.tsx index e0df371e1ed..7bc2cd38f43 100644 --- a/starters/tailwind/stories/ColorSwatchPicker.stories.tsx +++ b/starters/tailwind/stories/ColorSwatchPicker.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ColorSwatchPicker, ColorSwatchPickerItem } from '../src/ColorSwatchPicker'; diff --git a/starters/tailwind/stories/ColorWheel.stories.tsx b/starters/tailwind/stories/ColorWheel.stories.tsx index bf31e57758c..b63595be09f 100644 --- a/starters/tailwind/stories/ColorWheel.stories.tsx +++ b/starters/tailwind/stories/ColorWheel.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ColorWheel } from '../src/ColorWheel'; diff --git a/starters/tailwind/stories/ComboBox.stories.tsx b/starters/tailwind/stories/ComboBox.stories.tsx index 65c5ff6debb..b6f1312ea19 100644 --- a/starters/tailwind/stories/ComboBox.stories.tsx +++ b/starters/tailwind/stories/ComboBox.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { ComboBox, ComboBoxItem, ComboBoxSection } from '../src/ComboBox'; diff --git a/starters/tailwind/stories/CommandPalette.stories.tsx b/starters/tailwind/stories/CommandPalette.stories.tsx index f834a4798d2..1648ef7dfa8 100644 --- a/starters/tailwind/stories/CommandPalette.stories.tsx +++ b/starters/tailwind/stories/CommandPalette.stories.tsx @@ -1,8 +1,8 @@ -import {Meta} from "@storybook/react"; +import {type Meta} from "@storybook/react"; import React from "react"; import {CommandPalette} from "../src/CommandPalette"; import {Button} from "../src/Button"; -import {DialogTrigger} from "react-aria-components"; +import { DialogTrigger } from 'react-aria-components/Dialog'; import {MenuItem, MenuSection} from "../src/Menu"; const meta: Meta = { diff --git a/starters/tailwind/stories/DateField.stories.tsx b/starters/tailwind/stories/DateField.stories.tsx index 0e10ebb7cc0..52fbec30a8a 100644 --- a/starters/tailwind/stories/DateField.stories.tsx +++ b/starters/tailwind/stories/DateField.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { DateField } from '../src/DateField'; diff --git a/starters/tailwind/stories/DatePicker.stories.tsx b/starters/tailwind/stories/DatePicker.stories.tsx index 9a6c99b0db0..abb9ddc0534 100644 --- a/starters/tailwind/stories/DatePicker.stories.tsx +++ b/starters/tailwind/stories/DatePicker.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { DatePicker } from '../src/DatePicker'; diff --git a/starters/tailwind/stories/DateRangePicker.stories.tsx b/starters/tailwind/stories/DateRangePicker.stories.tsx index d1feda2be80..36590b5b0b8 100644 --- a/starters/tailwind/stories/DateRangePicker.stories.tsx +++ b/starters/tailwind/stories/DateRangePicker.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { DateRangePicker } from '../src/DateRangePicker'; diff --git a/starters/tailwind/stories/Disclosure.stories.tsx b/starters/tailwind/stories/Disclosure.stories.tsx index eaab5150641..dbed1221a00 100644 --- a/starters/tailwind/stories/Disclosure.stories.tsx +++ b/starters/tailwind/stories/Disclosure.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/react"; +import { type Meta } from "@storybook/react"; import React from "react"; import { Disclosure, diff --git a/starters/tailwind/stories/DisclosureGroup.stories.tsx b/starters/tailwind/stories/DisclosureGroup.stories.tsx index a8088d21d7d..f44b4274a7e 100644 --- a/starters/tailwind/stories/DisclosureGroup.stories.tsx +++ b/starters/tailwind/stories/DisclosureGroup.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from "@storybook/react"; +import { type Meta } from "@storybook/react"; import React from "react"; import { Disclosure, diff --git a/starters/tailwind/stories/Form.stories.tsx b/starters/tailwind/stories/Form.stories.tsx index 4d3c697c71e..2814c549bf2 100644 --- a/starters/tailwind/stories/Form.stories.tsx +++ b/starters/tailwind/stories/Form.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { Button } from '../src/Button'; import { DateField } from '../src/DateField'; diff --git a/starters/tailwind/stories/GridList.stories.tsx b/starters/tailwind/stories/GridList.stories.tsx index a67197b59ca..a24c8664b6c 100644 --- a/starters/tailwind/stories/GridList.stories.tsx +++ b/starters/tailwind/stories/GridList.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import { GridList, GridListHeader, GridListItem} from '../src/GridList'; -import { GridListSection } from 'react-aria-components'; +import { GridListSection } from 'react-aria-components/GridList'; import React from 'react'; const meta: Meta = { diff --git a/starters/tailwind/stories/Link.stories.tsx b/starters/tailwind/stories/Link.stories.tsx index 7289b6a3e3d..8ee5262b473 100644 --- a/starters/tailwind/stories/Link.stories.tsx +++ b/starters/tailwind/stories/Link.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { Link } from '../src/Link'; diff --git a/starters/tailwind/stories/ListBox.stories.tsx b/starters/tailwind/stories/ListBox.stories.tsx index 843585e65d6..27423254784 100644 --- a/starters/tailwind/stories/ListBox.stories.tsx +++ b/starters/tailwind/stories/ListBox.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ListBox, ListBoxItem } from '../src/ListBox'; diff --git a/starters/tailwind/stories/Menu.stories.tsx b/starters/tailwind/stories/Menu.stories.tsx index be3e5ff935b..c41f6d02f15 100644 --- a/starters/tailwind/stories/Menu.stories.tsx +++ b/starters/tailwind/stories/Menu.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import { MoreHorizontal } from 'lucide-react'; import React from 'react'; import { Button } from '../src/Button'; diff --git a/starters/tailwind/stories/Meter.stories.tsx b/starters/tailwind/stories/Meter.stories.tsx index ef3137b4f2e..d67e3fc6421 100644 --- a/starters/tailwind/stories/Meter.stories.tsx +++ b/starters/tailwind/stories/Meter.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { Meter } from '../src/Meter'; diff --git a/starters/tailwind/stories/NumberField.stories.tsx b/starters/tailwind/stories/NumberField.stories.tsx index cdfd8f391ba..2f5244e7078 100644 --- a/starters/tailwind/stories/NumberField.stories.tsx +++ b/starters/tailwind/stories/NumberField.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { NumberField } from '../src/NumberField'; diff --git a/starters/tailwind/stories/Popover.stories.tsx b/starters/tailwind/stories/Popover.stories.tsx index 170eab407fd..607e66ecf26 100644 --- a/starters/tailwind/stories/Popover.stories.tsx +++ b/starters/tailwind/stories/Popover.stories.tsx @@ -1,7 +1,8 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import { HelpCircle } from 'lucide-react'; import React from 'react'; -import { DialogTrigger, Heading } from 'react-aria-components'; +import { DialogTrigger } from 'react-aria-components/Dialog'; +import { Heading } from 'react-aria-components/Heading'; import { Button } from '../src/Button'; import { Dialog } from '../src/Dialog'; import { Popover } from '../src/Popover'; diff --git a/starters/tailwind/stories/ProgressBar.stories.tsx b/starters/tailwind/stories/ProgressBar.stories.tsx index 6cf12cf00ae..3bce51f2343 100644 --- a/starters/tailwind/stories/ProgressBar.stories.tsx +++ b/starters/tailwind/stories/ProgressBar.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ProgressBar } from '../src/ProgressBar'; diff --git a/starters/tailwind/stories/RadioGroup.stories.tsx b/starters/tailwind/stories/RadioGroup.stories.tsx index 688354ed124..8e737815f37 100644 --- a/starters/tailwind/stories/RadioGroup.stories.tsx +++ b/starters/tailwind/stories/RadioGroup.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { Radio, RadioGroup } from '../src/RadioGroup'; diff --git a/starters/tailwind/stories/RangeCalendar.stories.tsx b/starters/tailwind/stories/RangeCalendar.stories.tsx index 58f731fae5c..c30066fea7d 100644 --- a/starters/tailwind/stories/RangeCalendar.stories.tsx +++ b/starters/tailwind/stories/RangeCalendar.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { RangeCalendar } from '../src/RangeCalendar'; diff --git a/starters/tailwind/stories/SearchField.stories.tsx b/starters/tailwind/stories/SearchField.stories.tsx index 9e656b0c06e..05c406a1b79 100644 --- a/starters/tailwind/stories/SearchField.stories.tsx +++ b/starters/tailwind/stories/SearchField.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { SearchField } from '../src/SearchField'; diff --git a/starters/tailwind/stories/Select.stories.tsx b/starters/tailwind/stories/Select.stories.tsx index 28a41c39c26..bb9f0ab0b9b 100644 --- a/starters/tailwind/stories/Select.stories.tsx +++ b/starters/tailwind/stories/Select.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { Select, SelectItem, SelectSection } from '../src/Select'; diff --git a/starters/tailwind/stories/Slider.stories.tsx b/starters/tailwind/stories/Slider.stories.tsx index f949fbafeae..d1a772d1374 100644 --- a/starters/tailwind/stories/Slider.stories.tsx +++ b/starters/tailwind/stories/Slider.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { Slider } from '../src/Slider'; diff --git a/starters/tailwind/stories/Switch.stories.tsx b/starters/tailwind/stories/Switch.stories.tsx index 5d61a8e67a6..edd63201504 100644 --- a/starters/tailwind/stories/Switch.stories.tsx +++ b/starters/tailwind/stories/Switch.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { Switch } from '../src/Switch'; diff --git a/starters/tailwind/stories/Table.stories.tsx b/starters/tailwind/stories/Table.stories.tsx index 2bc8587b372..f6e6b4781e5 100644 --- a/starters/tailwind/stories/Table.stories.tsx +++ b/starters/tailwind/stories/Table.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React, { useMemo, useState } from 'react'; -import { TableBody } from 'react-aria-components'; +import { TableBody } from 'react-aria-components/Table'; import { Cell, Column, Row, Table, TableHeader } from '../src/Table'; const meta: Meta = { diff --git a/starters/tailwind/stories/Tabs.stories.tsx b/starters/tailwind/stories/Tabs.stories.tsx index d76a8dae1bd..006f65a1f37 100644 --- a/starters/tailwind/stories/Tabs.stories.tsx +++ b/starters/tailwind/stories/Tabs.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../src/Tabs'; diff --git a/starters/tailwind/stories/TagGroup.stories.tsx b/starters/tailwind/stories/TagGroup.stories.tsx index d3588aed5b0..f371528e6bc 100644 --- a/starters/tailwind/stories/TagGroup.stories.tsx +++ b/starters/tailwind/stories/TagGroup.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { Tag, TagGroup } from '../src/TagGroup'; diff --git a/starters/tailwind/stories/TextField.stories.tsx b/starters/tailwind/stories/TextField.stories.tsx index 2c920fcde18..012908a9376 100644 --- a/starters/tailwind/stories/TextField.stories.tsx +++ b/starters/tailwind/stories/TextField.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { TextField } from '../src/TextField'; diff --git a/starters/tailwind/stories/TimeField.stories.tsx b/starters/tailwind/stories/TimeField.stories.tsx index 6cc995ce017..9490c8dce0f 100644 --- a/starters/tailwind/stories/TimeField.stories.tsx +++ b/starters/tailwind/stories/TimeField.stories.tsx @@ -1,6 +1,6 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; -import { Form } from 'react-aria-components'; +import { Form } from 'react-aria-components/Form'; import { Button } from '../src/Button'; import { TimeField } from '../src/TimeField'; diff --git a/starters/tailwind/stories/Toast.stories.tsx b/starters/tailwind/stories/Toast.stories.tsx index cf7cfa270b3..08b4a8ce943 100644 --- a/starters/tailwind/stories/Toast.stories.tsx +++ b/starters/tailwind/stories/Toast.stories.tsx @@ -1,6 +1,6 @@ import {MyToastRegion, queue} from '../src/Toast'; import {Button} from '../src/Button'; -import {Meta, StoryObj} from '@storybook/react'; +import {type Meta, type StoryObj} from '@storybook/react'; import React from 'react'; interface ToastStoryArgs { diff --git a/starters/tailwind/stories/ToggleButton.stories.tsx b/starters/tailwind/stories/ToggleButton.stories.tsx index aae584f7ad7..451386f23e6 100644 --- a/starters/tailwind/stories/ToggleButton.stories.tsx +++ b/starters/tailwind/stories/ToggleButton.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ToggleButton } from '../src/ToggleButton'; diff --git a/starters/tailwind/stories/ToggleButtonGroup.stories.tsx b/starters/tailwind/stories/ToggleButtonGroup.stories.tsx index c03b043959d..d17aa0555c2 100644 --- a/starters/tailwind/stories/ToggleButtonGroup.stories.tsx +++ b/starters/tailwind/stories/ToggleButtonGroup.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import React from 'react'; import { ToggleButton } from '../src/ToggleButton'; import { ToggleButtonGroup } from '../src/ToggleButtonGroup'; diff --git a/starters/tailwind/stories/Toolbar.stories.tsx b/starters/tailwind/stories/Toolbar.stories.tsx index c127df6ccd2..f41bb4307af 100644 --- a/starters/tailwind/stories/Toolbar.stories.tsx +++ b/starters/tailwind/stories/Toolbar.stories.tsx @@ -1,13 +1,12 @@ import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react'; import React from 'react'; -import { Group } from 'react-aria-components'; +import { Group } from 'react-aria-components/Group'; import { Button } from '../src/Button'; import { Checkbox } from '../src/Checkbox'; import { Separator } from '../src/Separator'; import { ToggleButton } from '../src/ToggleButton'; import { Toolbar } from '../src/Toolbar'; - -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; const meta: Meta = { component: Toolbar, diff --git a/starters/tailwind/stories/Tooltip.stories.tsx b/starters/tailwind/stories/Tooltip.stories.tsx index 6c434bceb70..fd6153d9c4c 100644 --- a/starters/tailwind/stories/Tooltip.stories.tsx +++ b/starters/tailwind/stories/Tooltip.stories.tsx @@ -1,7 +1,7 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import { PrinterIcon, SaveIcon } from 'lucide-react'; import React from 'react'; -import { TooltipTrigger } from 'react-aria-components'; +import { TooltipTrigger } from 'react-aria-components/Tooltip'; import { Button } from '../src/Button'; import { Tooltip } from '../src/Tooltip'; diff --git a/starters/tailwind/stories/Tree.stories.tsx b/starters/tailwind/stories/Tree.stories.tsx index 9dbbf1d8920..871d4bf8ec0 100644 --- a/starters/tailwind/stories/Tree.stories.tsx +++ b/starters/tailwind/stories/Tree.stories.tsx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/react'; +import { type Meta } from '@storybook/react'; import { Tree, TreeItem } from '../src/Tree'; import React from 'react'; From 9e37de87d417214f0ae98e913b41ee4e955735a6 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 27 Mar 2026 23:08:28 -0700 Subject: [PATCH 4/9] update react-aria docs --- .../s2-docs/pages/react-aria/Autocomplete.mdx | 25 ++++++----- .../s2-docs/pages/react-aria/Breadcrumbs.mdx | 2 +- .../dev/s2-docs/pages/react-aria/Button.mdx | 2 +- .../dev/s2-docs/pages/react-aria/Calendar.mdx | 12 +++--- .../s2-docs/pages/react-aria/ColorArea.mdx | 2 +- .../s2-docs/pages/react-aria/ColorField.mdx | 4 +- .../s2-docs/pages/react-aria/ColorPicker.mdx | 8 ++-- .../s2-docs/pages/react-aria/ColorSlider.mdx | 2 +- .../pages/react-aria/ColorSwatchPicker.mdx | 2 +- .../s2-docs/pages/react-aria/ColorWheel.mdx | 2 +- .../dev/s2-docs/pages/react-aria/ComboBox.mdx | 9 ++-- .../s2-docs/pages/react-aria/DateField.mdx | 4 +- .../s2-docs/pages/react-aria/DatePicker.mdx | 8 ++-- .../pages/react-aria/DateRangePicker.mdx | 7 ++-- .../pages/react-aria/DisclosureGroup.mdx | 2 +- .../dev/s2-docs/pages/react-aria/DropZone.mdx | 6 +-- .../s2-docs/pages/react-aria/FileTrigger.mdx | 4 +- .../dev/s2-docs/pages/react-aria/GridList.mdx | 30 ++++++------- .../dev/s2-docs/pages/react-aria/Group.mdx | 2 +- .../dev/s2-docs/pages/react-aria/ListBox.mdx | 23 +++++----- .../dev/s2-docs/pages/react-aria/Menu.mdx | 23 ++++------ .../dev/s2-docs/pages/react-aria/Modal.mdx | 19 ++++----- .../s2-docs/pages/react-aria/NumberField.mdx | 4 +- .../dev/s2-docs/pages/react-aria/Popover.mdx | 6 +-- .../pages/react-aria/PortalProvider.mdx | 2 +- .../pages/react-aria/RangeCalendar.mdx | 10 ++--- .../dev/s2-docs/pages/react-aria/Select.mdx | 10 +++-- .../dev/s2-docs/pages/react-aria/Table.mdx | 17 ++++---- .../dev/s2-docs/pages/react-aria/Tabs.mdx | 2 +- .../dev/s2-docs/pages/react-aria/TagGroup.mdx | 4 +- .../s2-docs/pages/react-aria/TextField.mdx | 2 +- .../pages/react-aria/ToggleButtonGroup.mdx | 5 ++- .../dev/s2-docs/pages/react-aria/Toolbar.mdx | 4 +- .../dev/s2-docs/pages/react-aria/Tooltip.mdx | 8 ++-- .../dev/s2-docs/pages/react-aria/Tree.mdx | 11 +++-- .../s2-docs/pages/react-aria/Virtualizer.mdx | 16 +++---- .../pages/react-aria/VisuallyHidden.mdx | 2 +- .../blog/introducing-react-spectrum.mdx | 6 ++- .../s2-docs/pages/react-aria/collections.mdx | 18 ++++---- .../pages/react-aria/customization.mdx | 42 +++++++++++-------- packages/dev/s2-docs/pages/react-aria/dnd.mdx | 37 +++++++++------- .../react-aria/examples/emoji-picker.mdx | 4 +- .../pages/react-aria/examples/ios-list.mdx | 4 +- .../pages/react-aria/examples/kanban.mdx | 4 +- .../react-aria/examples/ripple-button.mdx | 2 +- .../pages/react-aria/examples/sheet.mdx | 2 +- .../dev/s2-docs/pages/react-aria/forms.mdx | 6 +-- .../s2-docs/pages/react-aria/frameworks.mdx | 8 ++-- .../pages/react-aria/getting-started.mdx | 6 +-- .../dev/s2-docs/pages/react-aria/index.mdx | 4 +- .../dev/s2-docs/pages/react-aria/quality.mdx | 6 +-- .../s2-docs/pages/react-aria/selection.mdx | 42 ++++++++----------- .../dev/s2-docs/pages/react-aria/styling.mdx | 4 +- .../dev/s2-docs/pages/react-aria/testing.mdx | 2 +- .../s2-docs/pages/react-aria/useClipboard.mdx | 18 +++----- .../s2-docs/pages/react-aria/useCollator.mdx | 2 +- .../pages/react-aria/useDateFormatter.mdx | 3 +- .../dev/s2-docs/pages/react-aria/useDrag.mdx | 16 +++---- .../dev/s2-docs/pages/react-aria/useDrop.mdx | 22 ++++------ .../dev/s2-docs/pages/react-aria/useField.mdx | 2 +- .../s2-docs/pages/react-aria/useFilter.mdx | 2 +- .../dev/s2-docs/pages/react-aria/useFocus.mdx | 2 +- .../s2-docs/pages/react-aria/useFocusRing.mdx | 2 +- .../pages/react-aria/useFocusVisible.mdx | 2 +- .../pages/react-aria/useFocusWithin.mdx | 2 +- .../dev/s2-docs/pages/react-aria/useHover.mdx | 2 +- .../dev/s2-docs/pages/react-aria/useId.mdx | 2 +- .../s2-docs/pages/react-aria/useKeyboard.mdx | 2 +- .../dev/s2-docs/pages/react-aria/useLabel.mdx | 2 +- .../s2-docs/pages/react-aria/useLandmark.mdx | 2 +- .../s2-docs/pages/react-aria/useLocale.mdx | 2 +- .../s2-docs/pages/react-aria/useLongPress.mdx | 5 ++- .../dev/s2-docs/pages/react-aria/useMove.mdx | 2 +- .../pages/react-aria/useNumberFormatter.mdx | 3 +- .../s2-docs/pages/react-aria/useObjectRef.mdx | 3 +- .../dev/s2-docs/pages/react-aria/usePress.mdx | 2 +- .../exports/Breadcrumbs.ts | 1 + .../exports/Collection.ts | 1 + .../exports/ColorPicker.ts | 3 ++ .../react-aria-components/exports/ComboBox.ts | 2 + .../exports/DateRangePicker.ts | 1 + .../react-aria-components/exports/Dialog.ts | 3 ++ .../exports/DisclosureGroup.ts | 1 + .../exports/FileTrigger.ts | 2 + .../react-aria-components/exports/GridList.ts | 3 ++ .../exports/RangeCalendar.ts | 1 + .../react-aria-components/exports/Table.ts | 2 +- .../exports/ToggleButtonGroup.ts | 2 + .../exports/Virtualizer.ts | 3 ++ starters/docs/src/Dialog.tsx | 5 ++- starters/docs/src/DropZone.tsx | 4 +- starters/docs/src/GridList.tsx | 7 +++- starters/docs/src/ListBox.tsx | 3 ++ starters/docs/src/Menu.tsx | 7 +++- starters/docs/src/Sheet.tsx | 4 +- starters/docs/tsconfig.json | 2 + starters/tailwind/src/Dialog.tsx | 4 +- starters/tailwind/src/DropZone.tsx | 4 +- starters/tailwind/tsconfig.json | 2 + 99 files changed, 364 insertions(+), 301 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx index d214ba55e9f..2400f9026bd 100644 --- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx @@ -18,10 +18,10 @@ export const description = 'Allows users to search or filter a list of suggestio ```tsx render docs={vanillaDocs.exports.CommandPalette} links={vanillaDocs.links} props={['disableAutoFocusFirst']} type="vanilla" files={["starters/docs/src/CommandPalette.tsx", "starters/docs/src/CommandPalette.css"]} "use client"; import {CommandPalette} from 'vanilla-starter/CommandPalette'; - import {MenuItem} from 'vanilla-starter/Menu'; + import {MenuItem, Text} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {FilePlus2, FolderPlus, User, UserPen, CircleDotDashed, ChartPie, Tag} from 'lucide-react'; - import {DialogTrigger, Text} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Dialog'; import {useState} from 'react'; function Example(props) { @@ -79,7 +79,7 @@ export const description = 'Allows users to search or filter a list of suggestio import {CommandPalette} from 'tailwind-starter/CommandPalette'; import {MenuItem} from 'tailwind-starter/Menu'; import {Button} from 'tailwind-starter/Button'; - import {DialogTrigger} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Dialog'; import {useState} from 'react'; function Example(props) { @@ -120,7 +120,7 @@ Autocomplete filters a collection component using a [TextField](TextField) or [S ```tsx render docs={docs.exports.Autocomplete} links={docs.links} props={['disableVirtualFocus', 'disableAutoFocusFirst']} type="vanilla" wide "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -160,7 +160,8 @@ function Example(props) { ```tsx render docs={docs.exports.Autocomplete} links={docs.links} props={['disableVirtualFocus', 'disableAutoFocusFirst']} type="vanilla" wide "use client"; -import {Select, Label, SelectValue, Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {Select, Label, SelectValue} from 'react-aria-components/Select'; import {Button} from 'vanilla-starter/Button'; import {SelectListBox, SelectItem} from 'vanilla-starter/Select'; import {Popover} from 'vanilla-starter/Popover'; @@ -257,7 +258,7 @@ function Example(props) { ```tsx render docs={docs.exports.Autocomplete} links={docs.links} props={['disableVirtualFocus', 'disableAutoFocusFirst']} type="vanilla" wide "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -294,7 +295,7 @@ function Example(props) { ```tsx render "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {TagGroup, Tag} from 'vanilla-starter/TagGroup'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -331,8 +332,8 @@ function Example() { ```tsx render "use client"; -import {Autocomplete, Text, useFilter} from 'react-aria-components'; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; import {SearchField} from 'vanilla-starter/SearchField'; ///- begin collapse -/// @@ -596,7 +597,8 @@ function Example() { ```tsx render "use client"; -import {Autocomplete, ResizableTableContainer, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {ResizableTableContainer} from 'react-aria-components/Table'; import {Table, TableHeader, TableBody, Column, Row, Cell} from 'vanilla-starter/Table'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -1059,7 +1061,8 @@ When the `filter` prop is not set, the items are controlled. This example uses a ```tsx render "use client"; -import {Autocomplete, useAsyncList} from 'react-aria-components'; +import {Autocomplete} from 'react-aria-components/Autocomplete'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; import {SearchField} from 'vanilla-starter/SearchField'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx index 178ac2cd18b..9a270196acc 100644 --- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx @@ -45,7 +45,7 @@ export const description = 'Displays a hierarchy of links to the current page or ```tsx render "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/Breadcrumbs'; import {Breadcrumbs, Breadcrumb} from 'vanilla-starter/Breadcrumbs'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index eefb43a412d..22065cb4fb5 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -115,7 +115,7 @@ The `Button` component always represents a button semantically. To create a link ```tsx render "use client"; -import {Link} from 'react-aria-components'; +import {Link} from 'react-aria-components/Link'; Adobe diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index c7173da5ad4..15694bb96ca 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -40,7 +40,7 @@ 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 {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {Calendar} from 'vanilla-starter/Calendar'; import {useState} from 'react'; @@ -68,7 +68,7 @@ By default, `Calendar` displays the value using the calendar system for the user ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseDate} from '@internationalized/date'; import {Calendar} from 'vanilla-starter/Calendar'; @@ -172,7 +172,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate ```tsx render docs={vanillaDocs.exports.Calendar} links={docs.links} props={['isInvalid', 'errorMessage']} wide "use client"; import {isWeekend, today, getLocalTimeZone} from '@internationalized/date'; -import {useLocale} from 'react-aria-components'; +import {useLocale} from 'react-aria-components/I18nProvider'; import {Calendar} from 'vanilla-starter/Calendar'; function Example(props) { @@ -208,10 +208,10 @@ Set the `visibleDuration` prop and render multiple `CalendarGrid` elements to di ```tsx render docs={docs.exports.Calendar} links={docs.links} props={['visibleDuration', 'pageBehavior', 'firstDayOfWeek']} initialProps={{visibleDuration: {months: 2}}} wide "use client"; -import {Calendar, Heading} from 'react-aria-components'; +import {Calendar, Heading} from 'react-aria-components/Calendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar'; import {Button} from 'vanilla-starter/Button'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {ChevronLeft, ChevronRight} from 'lucide-react'; // TODO: move this into the starter example. @@ -297,7 +297,7 @@ You can also control the focused date via `CalendarStateContext`. This example s ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']} "use client"; -import {Calendar} from 'react-aria-components'; +import {Calendar} from 'react-aria-components/Calendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/Calendar'; import {MonthDropdown} from './MonthDropdown'; import {YearDropdown} from './YearDropdown'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx index e4fe7c6548b..83e333f1166 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx @@ -42,7 +42,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorArea'; import {ColorArea} from 'vanilla-starter/ColorArea'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx index 6f784772b45..1596d84ea05 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorField.mdx @@ -42,7 +42,7 @@ 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, type Color} from 'react-aria-components'; +import {parseColor, type Color} from 'react-aria-components/ColorField'; import {useState} from 'react'; function Example() { @@ -68,7 +68,7 @@ By default, ColorField displays a hex value. Set the `colorSpace` and `channel` ```tsx render "use client"; import {ColorField} from 'vanilla-starter/ColorField'; -import {parseColor, type Color} from 'react-aria-components'; +import {parseColor, type Color} from 'react-aria-components/ColorField'; import {useState} from 'react'; function Example() { diff --git a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx index 418e3760654..7203218524d 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx @@ -39,7 +39,7 @@ Use the `value` or `defaultValue` prop to set the color value. This may be a str ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorPicker'; import {ColorPicker} from 'vanilla-starter/ColorPicker'; import {useState} from 'react'; @@ -68,8 +68,7 @@ This example uses [ColorSlider](ColorSlider) to allow a user to adjust each chan ```tsx render "use client"; -import type {ColorSpace} from 'react-aria-components'; -import {getColorChannels} from 'react-aria-components'; +import {getColorChannels, type ColorSpace} from 'react-aria-components/ColorPicker'; import {ColorPicker} from 'vanilla-starter/ColorPicker'; import {ColorSlider} from 'vanilla-starter/ColorSlider'; import {Select, SelectItem} from 'vanilla-starter/Select'; @@ -128,9 +127,8 @@ This example uses [ColorField](ColorField) to allow a user to edit the value of ```tsx render "use client"; -import type {ColorSpace} from 'react-aria-components'; +import {getColorChannels, type ColorSpace} from 'react-aria-components/ColorPicker'; import {ColorPicker} from 'vanilla-starter/ColorPicker'; -import {getColorChannels} from 'react-aria-components'; import {ColorArea} from 'vanilla-starter/ColorArea'; import {ColorSlider} from 'vanilla-starter/ColorSlider'; import {Select, SelectItem} from 'vanilla-starter/Select'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx index d967b52767c..2ea8ccd7dfc 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx @@ -43,7 +43,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorSlider'; import {ColorSlider} from 'vanilla-starter/ColorSlider'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx index d45c6362078..7d296a4dab4 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSwatchPicker.mdx @@ -51,7 +51,7 @@ Use the `value` or `defaultValue` prop to set the selected color, and `onChange` ```tsx render "use client"; import {ColorSwatchPicker, ColorSwatchPickerItem} from 'vanilla-starter/ColorSwatchPicker'; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorSwatchPicker'; import {useState} from 'react'; function Example() { diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx index aada0f8d7ff..9f675ffbc3d 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx @@ -40,7 +40,7 @@ The `onChange` event is called as the user drags, and `onChangeEnd` is called wh ```tsx render "use client"; -import {parseColor} from 'react-aria-components'; +import {parseColor} from 'react-aria-components/ColorWheel'; import {ColorWheel} from 'vanilla-starter/ColorWheel'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index cc102cadfcb..e0549f23514 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -59,7 +59,8 @@ The following example shows a dynamic collection of items, grouped into sections ```tsx render "use client"; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; -import {ListBoxSection, Collection, Header} from 'react-aria-components'; +import {ListBoxSection, Header} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; function Example() { /*- begin collapse -*/ @@ -113,7 +114,7 @@ Use the `ComboBoxValue` render prop function to display the selected items as a ```tsx render "use client"; -import {ComboBox, ComboBoxValue, Input} from 'react-aria-components'; +import {ComboBox, ComboBoxValue, Input} from 'react-aria-components/ComboBox'; import {ComboBoxListBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {Label, FieldButton} from 'vanilla-starter/Form'; import {Popover} from 'vanilla-starter/Popover'; @@ -217,7 +218,7 @@ Use the `defaultValue` or `value` prop to set the selected item. The value corre "use client"; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {useState} from 'react'; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/ComboBox'; function Example() { let [animal, setAnimal] = useState("bison"); @@ -286,7 +287,7 @@ Both `inputValue` and `value` can be controlled simultaneously. However, each in ```tsx render "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/ComboBox'; import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx index d5de6a46475..1ba68790041 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx @@ -42,7 +42,7 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {DateField} from 'vanilla-starter/DateField'; import {useState} from 'react'; @@ -83,7 +83,7 @@ By default, `DateField` displays the value using the calendar system for the use ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseZonedDateTime} from '@internationalized/date'; import {DateField} from 'vanilla-starter/DateField'; diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx index b46ee2f2464..2e3b34f81fd 100644 --- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx @@ -42,7 +42,7 @@ Use the `value` or `defaultValue` prop to set the date value, using objects in t ```tsx render "use client"; import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {DatePicker} from 'vanilla-starter/DatePicker'; import {useState} from 'react'; @@ -83,7 +83,7 @@ By default, `DatePicker` displays the value using the calendar system for the us ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseZonedDateTime} from '@internationalized/date'; import {DatePicker} from 'vanilla-starter/DatePicker'; @@ -99,10 +99,10 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h ```tsx render "use client"; import {isWeekend, today, getLocalTimeZone} from '@internationalized/date'; -import {useLocale} from 'react-aria-components'; +import {useLocale} from 'react-aria-components/I18nProvider'; import {DatePicker} from 'vanilla-starter/DatePicker'; import {Button} from 'vanilla-starter/Button'; -import {Form} from 'vanilla-starter/Form';; +import {Form} from 'vanilla-starter/Form'; function Example() { let {locale} = useLocale(); diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx index e9a75d8f029..6019367080a 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx @@ -42,7 +42,8 @@ Use the `value` or `defaultValue` prop to set the selected date range, using obj ```tsx render "use client"; import {parseDate, getLocalTimeZone, type CalendarDate} from '@internationalized/date'; -import {useDateFormatter, type RangeValue} from 'react-aria'; +import {type RangeValue} from 'react-aria-components/DateRangePicker'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {DateRangePicker} from 'vanilla-starter/DateRangePicker'; import {useState} from 'react'; @@ -92,7 +93,7 @@ By default, `DateRangePicker` displays the value using the calendar system for t ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseDate} from '@internationalized/date'; import {DateRangePicker} from 'vanilla-starter/DateRangePicker'; @@ -112,7 +113,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h ```tsx render docs={vanillaDocs.exports.DateRangePicker} links={docs.links} props={['allowsNonContiguousRanges']} wide "use client"; import {isWeekend, today, getLocalTimeZone} from '@internationalized/date'; -import {useLocale} from 'react-aria-components'; +import {useLocale} from 'react-aria-components/I18nProvider'; import {DateRangePicker} from 'vanilla-starter/DateRangePicker'; import {Button} from 'vanilla-starter/Button'; import {Form} from 'vanilla-starter/Form';; diff --git a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx index cf44222889e..214ae68b915 100644 --- a/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx @@ -55,7 +55,7 @@ Use the `defaultExpandedKeys` or `expandedKeys` prop to set the expanded items, ```tsx render "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/DisclosureGroup'; import {DisclosureGroup} from 'vanilla-starter/DisclosureGroup'; import {Disclosure, DisclosureHeader, DisclosurePanel} from 'vanilla-starter/Disclosure'; import {useState} from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx index 44634a38340..9cd66179f7e 100644 --- a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx @@ -15,8 +15,7 @@ export const description = 'An area into which one or multiple objects can be dr ```tsx render type="vanilla" files={["starters/docs/src/DropZone.tsx", "starters/docs/src/DropZone.css"]} "use client"; - import {DropZone} from 'vanilla-starter/DropZone'; - import {Text} from 'react-aria-components'; + import {DropZone, Text} from 'vanilla-starter/DropZone'; import {useState} from 'react'; import React from 'react'; @@ -56,8 +55,7 @@ export const description = 'An area into which one or multiple objects can be dr ```tsx render type="tailwind" files={["starters/tailwind/src/DropZone.tsx"]} "use client"; - import {DropZone} from 'tailwind-starter/DropZone'; - import {Text} from 'react-aria-components'; + import {DropZone, Text} from 'tailwind-starter/DropZone'; import {useState} from 'react'; import React from 'react'; diff --git a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx index 8dce090e681..fd6477aa166 100644 --- a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx @@ -14,7 +14,7 @@ export const description = 'Allows a user to access the file system with any pre ```tsx render docs={docs.exports.FileTrigger} links={docs.links} props={['acceptedFileTypes', 'allowsMultiple', 'acceptDirectory', 'defaultCamera']} initialProps={{acceptedFileTypes: ['image/*']}} type="vanilla" hideShadcn "use client"; -import {FileTrigger} from 'react-aria-components'; +import {FileTrigger} from 'react-aria-components/FileTrigger'; import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; @@ -47,7 +47,7 @@ function Example(props) { ```tsx render "use client" -import {Pressable, FileTrigger} from 'react-aria-components'; +import {Pressable, FileTrigger} from 'react-aria-components/FileTrigger'; {/*- begin highlight -*/} diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 28a89997092..c9511c40470 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -23,8 +23,7 @@ export const description = 'Displays a list of interactive items, with support f ```tsx render docs={docs.exports.GridList} links={docs.links} props={['layout', 'selectionMode']} initialProps={{'aria-label': 'Photos', selectionMode: 'multiple', layout: 'grid'}} type="vanilla" files={["starters/docs/src/GridList.tsx", "starters/docs/src/GridList.css"]} "use client"; - import {Text} from 'react-aria-components'; - import {GridList, GridListItem} from 'vanilla-starter/GridList'; + import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; @@ -102,8 +101,7 @@ export const description = 'Displays a list of interactive items, with support f ```tsx render "use client"; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; -import {Text} from 'react-aria-components'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let images = [ @@ -369,10 +367,10 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T ```tsx render "use client"; -import {GridList, GridListItem, GridListLoadMoreItem} from 'vanilla-starter/GridList'; -import {Collection, Text} from 'react-aria-components'; +import {GridList, GridListItem, GridListLoadMoreItem, Text} from 'vanilla-starter/GridList'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; -import {useAsyncList} from '@react-stately/data'; type Item = { id: string; @@ -433,8 +431,7 @@ Use the `href` prop on a `` to create a link. Link interactions va ```tsx render docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Links', selectionMode: 'multiple'}} wide "use client"; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; -import {Text} from 'react-aria-components'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let images = [ @@ -544,8 +541,7 @@ Use the `` component to group options. A `` ele ```tsx render "use client"; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; -import {GridListHeader, GridListSection, Text} from 'react-aria-components'; +import {GridList, GridListItem, GridListHeader, GridListSection, Text} from 'vanilla-starter/GridList'; @@ -118,7 +118,7 @@ Use the `` component to group options. A `
` element may ```tsx render "use client"; -import {ListBox, ListBoxItem, ListBoxSection, Header} from 'react-aria-components'; +import {ListBox, ListBoxItem, ListBoxSection, Header} from 'vanilla-starter/ListBox'; {/*- begin highlight -*/} @@ -152,7 +152,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T "use client"; import {ListBox, ListBoxItem, ListBoxLoadMoreItem} from 'vanilla-starter/ListBox'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; -import {Collection, useAsyncList} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; interface Character { name: string @@ -202,7 +203,7 @@ By default, link items in a ListBox are not selectable, and only perform navigat ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionBehavior']} wide "use client"; -import {ListBox, ListBoxItem} from 'react-aria-components'; +import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; {/*- begin highlight -*/} @@ -230,7 +231,7 @@ By default, links are rendered as an `` element. Use the `render` prop to int ```tsx render hideImports "use client"; -import {ListBox} from 'react-aria-components'; +import {ListBox} from 'vanilla-starter/ListBox'; @@ -195,8 +193,7 @@ Use the `` component to group options. A `
` element may als ```tsx render hideImports "use client"; -import {Header} from 'react-aria-components'; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import {MenuTrigger, Menu, MenuItem, MenuSection, Header} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; @@ -261,8 +258,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} from 'vanilla-starter/Menu'; -import {Separator} from 'react-aria-components'; +import {MenuTrigger, Menu, MenuItem, Separator} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; @@ -323,7 +319,7 @@ Popovers can include additional components as siblings of a menu. This example u ```tsx render "use client"; -import {Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {SearchField} from 'vanilla-starter/SearchField'; @@ -363,7 +359,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.Menu} links={docs.links} props={['selectionMode', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide align="start" "use client"; -import type {Selection} from 'react-aria-components'; +import type {Selection} from 'react-aria-components/Menu'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; @@ -401,9 +397,8 @@ Each section in a menu may have independent selection states by passing `selecti ```tsx render hideImports "use client"; -import type {Selection} from 'react-aria-components'; -import {Header} from 'react-aria-components'; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import type {Selection} from 'react-aria-components/Menu'; +import {MenuTrigger, Menu, MenuItem, MenuSection, Header} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; @@ -451,7 +446,7 @@ function Example() { ```tsx render hideImports "use client"; -import {Pressable} from 'react-aria-components'; +import {Pressable} from 'react-aria-components/Menu'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index feb0c630070..e13b3048f9d 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -18,9 +18,9 @@ export const description = 'An overlay element which blocks interaction with ele ```tsx render docs={vanillaDocs.exports.Modal} links={vanillaDocs.links} props={['isDismissable', 'isKeyboardDismissDisabled']} type="vanilla" files={["starters/docs/src/Modal.tsx", "starters/docs/src/Modal.css"]} "use client"; - import {DialogTrigger, Heading} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'vanilla-starter/Modal'; - import {Dialog} from 'vanilla-starter/Dialog'; + import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Form} from 'vanilla-starter/Form'; import {TextField} from 'vanilla-starter/TextField'; import {Button} from 'vanilla-starter/Button'; @@ -50,9 +50,9 @@ export const description = 'An overlay element which blocks interaction with ele ```tsx render docs={vanillaDocs.exports.Modal} links={vanillaDocs.links} props={['isDismissable', 'isKeyboardDismissDisabled']} type="tailwind" files={["starters/tailwind/src/Modal.tsx"]} "use client"; - import {DialogTrigger, Heading} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'tailwind-starter/Modal'; - import {Dialog} from 'tailwind-starter/Dialog'; + import {Dialog, Heading} from 'tailwind-starter/Dialog'; import {Form} from 'tailwind-starter/Form'; import {TextField} from 'tailwind-starter/TextField'; import {Button} from 'tailwind-starter/Button'; @@ -87,8 +87,8 @@ Overlays such as trays, drawers, and sheets can be built using a `Modal` with cu ```tsx render type="vanilla" files={["starters/docs/src/Sheet.tsx", "starters/docs/src/Sheet.css"]} "use client"; -import {DialogTrigger, Heading} from 'react-aria-components'; -import {Sheet} from 'vanilla-starter/Sheet'; +import {DialogTrigger} from 'react-aria-components/Modal'; +import {Sheet, Heading} from 'vanilla-starter/Sheet'; import {Button} from 'vanilla-starter/Button'; @@ -108,10 +108,9 @@ Use the `isOpen` prop to show a modal programmatically or mount in a different p ```tsx render "use client"; import {useState} from 'react'; -import {Heading} from 'react-aria-components'; import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu'; import {Modal} from 'vanilla-starter/Modal'; -import {Dialog} from 'vanilla-starter/Dialog'; +import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; function Example() { @@ -142,9 +141,9 @@ function Example() { ```tsx render "use client" -import {Pressable, DialogTrigger, Heading} from 'react-aria-components'; +import {Pressable, DialogTrigger} from 'react-aria-components/Modal'; import {Modal} from 'vanilla-starter/Modal'; -import {Dialog} from 'vanilla-starter/Dialog'; +import {Dialog, Heading} from 'vanilla-starter/Dialog'; import {Button} from 'vanilla-starter/Button'; diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx index 6a20cdb11fe..4979810805e 100644 --- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx @@ -102,7 +102,7 @@ By default, `NumberField` displays the value using the numbering system for the ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-nu-deva'}} controlOptions={{locale: 'numberingSystem'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {NumberField} from 'vanilla-starter/NumberField'; @@ -118,7 +118,7 @@ Use the `name` prop to submit the raw number value (not a formatted string) to t "use client"; import {NumberField} from 'vanilla-starter/NumberField'; import {Button} from 'vanilla-starter/Button'; -import {Form} from 'vanilla-starter/Form';; +import {Form} from 'vanilla-starter/Form';
diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index c9b3153c93e..df3cae64dff 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -18,7 +18,7 @@ export const description = 'An overlay element positioned relative to a trigger. ```tsx render docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="vanilla" files={["starters/docs/src/Popover.tsx", "starters/docs/src/Popover.css"]} "use client"; - import {DialogTrigger} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Popover'; import {Popover} from 'vanilla-starter/Popover'; import {Button} from 'vanilla-starter/Button'; import {Switch} from 'vanilla-starter/Switch'; @@ -46,7 +46,7 @@ export const description = 'An overlay element positioned relative to a trigger. ```tsx render docs={vanillaDocs.exports.Popover} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/tailwind/src/Popover.tsx"]} "use client"; - import {DialogTrigger} from 'react-aria-components'; + import {DialogTrigger} from 'react-aria-components/Popover'; import {Popover} from 'tailwind-starter/Popover'; import {Button} from 'tailwind-starter/Button'; import {Switch} from 'tailwind-starter/Switch'; @@ -81,7 +81,7 @@ export const description = 'An overlay element positioned relative to a trigger. ```tsx render "use client" -import {Pressable, DialogTrigger} from 'react-aria-components'; +import {Pressable, DialogTrigger} from 'react-aria-components/Popover'; import {Popover} from 'vanilla-starter/Popover'; diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx index a6ad23fa595..360f8274fe3 100644 --- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx @@ -47,7 +47,7 @@ import React from 'react'; import {Button} from 'vanilla-starter/Button'; import {MyToastRegion} from './MyToastRegion' import {UNSAFE_PortalProvider} from '@react-aria/overlays'; -import {UNSTABLE_ToastQueue as ToastQueue} from 'react-aria-components'; +import {UNSTABLE_ToastQueue as ToastQueue} from 'react-aria-components/Toast'; // Define the type for your toast content. interface MyToastContent { diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index b3619afbed7..c541805901f 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -40,7 +40,7 @@ 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 {useDateFormatter} from 'react-aria/useDateFormatter'; import {RangeCalendar} from 'vanilla-starter/RangeCalendar'; import {useState} from 'react'; @@ -74,7 +74,7 @@ By default, `RangeCalendar` displays the value using the calendar system for the ```tsx render wide docs={docs.exports.I18nProvider} links={docs.links} props={['locale']} initialProps={{locale: 'hi-IN-u-ca-indian'}} "use client"; -import {I18nProvider} from 'react-aria-components'; +import {I18nProvider} from 'react-aria-components/I18nProvider'; import {parseDate} from '@internationalized/date'; import {RangeCalendar} from 'vanilla-starter/RangeCalendar'; @@ -225,10 +225,10 @@ Set the `visibleDuration` prop and render multiple `CalendarGrid` elements to di ```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['visibleDuration', 'pageBehavior', 'firstDayOfWeek']} initialProps={{visibleDuration: {months: 2}}} wide "use client"; -import {RangeCalendar, Heading} from 'react-aria-components'; +import {RangeCalendar, Heading} from 'react-aria-components/RangeCalendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/RangeCalendar'; import {Button} from 'vanilla-starter/Button'; -import {useDateFormatter} from 'react-aria'; +import {useDateFormatter} from 'react-aria/useDateFormatter'; import {ChevronLeft, ChevronRight} from 'lucide-react'; // TODO: move this into the starter example. @@ -313,7 +313,7 @@ You can also control the focused date via `CalendarStateContext`. This example s ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MonthDropdown.tsx', 'packages/dev/s2-docs/pages/react-aria/YearDropdown.tsx']} "use client"; -import {RangeCalendar} from 'react-aria-components'; +import {RangeCalendar} from 'react-aria-components/RangeCalendar'; import {CalendarGrid, CalendarCell} from 'vanilla-starter/RangeCalendar'; import {MonthDropdown} from './MonthDropdown'; import {YearDropdown} from './YearDropdown'; diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx index d1b93746eb8..4cfb7f9698f 100644 --- a/packages/dev/s2-docs/pages/react-aria/Select.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx @@ -58,7 +58,8 @@ The following example shows a dynamic collection of items, grouped into sections ```tsx render "use client"; import {Select, SelectItem} from 'vanilla-starter/Select'; -import {ListBoxSection, Collection, Header} from 'react-aria-components'; +import {ListBoxSection, Header} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; function Example() { /*- begin collapse -*/ @@ -107,7 +108,8 @@ function Example() { ```tsx render "use client"; -import {Select, Label, SelectValue, Autocomplete, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {Select, Label, SelectValue} from 'react-aria-components/Select'; import {Button} from 'vanilla-starter/Button'; import {SelectListBox, SelectItem} from 'vanilla-starter/Select'; import {Popover} from 'vanilla-starter/Popover'; @@ -153,7 +155,9 @@ Use the `SelectValue` render prop function to display the selected items as a [T ```tsx render files={['packages/dev/s2-docs/pages/react-aria/MultiSelect.css']} "use client"; -import {Autocomplete, Select, SelectValue, Group, useFilter} from 'react-aria-components'; +import {Autocomplete, useFilter} from 'react-aria-components/Autocomplete'; +import {Select, SelectValue} from 'react-aria-components/Select'; +import {Group} from 'react-aria-components/Group'; import {Button} from 'vanilla-starter/Button'; import {SelectListBox, SelectItem} from 'vanilla-starter/Select'; import {Label} from 'vanilla-starter/Form'; diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx index 1b47df2d661..b162687f58d 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx @@ -238,7 +238,7 @@ Rows can be nested to display hierarchical data. Use the `treeColumn` prop to de ```tsx render "use client"; import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table'; -import {Collection, type Key} from 'react-aria-components'; +import {Collection, type Key} from 'react-aria-components/Collection'; import {useState} from 'react'; /*- begin collapse -*/ @@ -300,7 +300,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T ```tsx render "use client"; -import {Collection, useAsyncList} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; import {Table, TableHeader, Column, Row, TableBody, Cell, TableLoadMoreItem} from 'vanilla-starter/Table'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; @@ -449,7 +450,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.Table} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide "use client"; -import type {Selection} from 'react-aria-components'; +import type {Selection} from 'react-aria-components/Table'; import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table'; import {useState} from 'react'; @@ -508,7 +509,7 @@ Set the `allowsSorting` prop on a `` to make it sortable. When the colum ```tsx render "use client"; -import {type SortDescriptor} from 'react-aria-components'; +import {type SortDescriptor} from 'react-aria-components/Table'; import {Table, TableHeader, Column, TableBody, Row, Cell} from 'vanilla-starter/Table'; import {useState} from 'react'; @@ -574,7 +575,7 @@ Wrap the `` with a ``, and add a `` instead of `` to enable multi-line input. ```tsx render "use client"; -import {TextField, Label, TextArea} from 'react-aria-components'; +import {TextField, Label, TextArea} from 'react-aria-components/TextField'; diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx index d4d488141e3..eba236a6ac9 100644 --- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx @@ -45,7 +45,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.ToggleButtonGroup} links={docs.links} props={['selectionMode', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide "use client"; -import type {Key} from 'react-aria-components'; +import type {Key} from 'react-aria-components/ToggleButtonGroup'; import {useState} from 'react'; import {ToggleButtonGroup} from 'vanilla-starter/ToggleButtonGroup'; import {ToggleButton} from 'vanilla-starter/ToggleButton'; @@ -89,7 +89,8 @@ Render a [SelectionIndicator](selection#animated-selectionindicator) within each ```tsx render files={['starters/docs/src/SegmentedControl.css']} "use client"; -import {ToggleButtonGroup, ToggleButton, ToggleButtonProps, SelectionIndicator, composeRenderProps} from 'react-aria-components'; +import {ToggleButtonGroup, ToggleButton, ToggleButtonProps, SelectionIndicator} from 'react-aria-components/ToggleButtonGroup'; +import {composeRenderProps} from 'react-aria-components/composeRenderProps'; import 'vanilla-starter/SegmentedControl.css'; function SegmentedControlItem(props: ToggleButtonProps) { diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx index 6c14dd27f5b..9813a2bd341 100644 --- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx @@ -22,7 +22,7 @@ export const description = 'A container for a set of interactive controls, such import {Button} from 'vanilla-starter/Button'; import {Select, SelectItem} from 'vanilla-starter/Select'; import {Separator} from 'vanilla-starter/Separator'; - import {Group} from 'react-aria-components'; + import {Group} from 'react-aria-components/Group'; import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react'; @@ -65,7 +65,7 @@ export const description = 'A container for a set of interactive controls, such import {ToggleButton} from 'tailwind-starter/ToggleButton'; import {Button} from 'tailwind-starter/Button'; import {Select, SelectItem} from 'tailwind-starter/Select'; - import {Group} from 'react-aria-components'; + import {Group} from 'react-aria-components/Group'; import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx index d83839832b9..0164758d269 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx @@ -18,7 +18,7 @@ export const description = 'Displays a description of an element on hover or foc ```tsx render docs={vanillaDocs.exports.Tooltip} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="vanilla" files={["starters/docs/src/Tooltip.tsx", "starters/docs/src/Tooltip.css"]} "use client"; - import {TooltipTrigger} from 'react-aria-components'; + import {TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'vanilla-starter/Tooltip'; import {Button} from 'vanilla-starter/Button'; import {Edit} from 'lucide-react'; @@ -41,7 +41,7 @@ export const description = 'Displays a description of an element on hover or foc ```tsx render docs={vanillaDocs.exports.Tooltip} links={vanillaDocs.links} props={['placement', 'offset', 'crossOffset', 'shouldFlip']} type="tailwind" files={["starters/tailwind/src/Tooltip.tsx"]} "use client"; - import {TooltipTrigger} from 'react-aria-components'; + import {TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'tailwind-starter/Tooltip'; import {Button} from 'tailwind-starter/Button'; import {Edit} from 'lucide-react'; @@ -69,7 +69,7 @@ Tooltips appear after a "warmup" delay when hovering, or instantly on focus. Onc ```tsx render docs={docs.exports.TooltipTrigger} links={docs.links} props={['trigger', 'delay', 'closeDelay', 'isDisabled', 'shouldCloseOnPress']} type="vanilla" "use client"; -import {TooltipTrigger} from 'react-aria-components'; +import {TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'vanilla-starter/Tooltip'; import {Button} from 'vanilla-starter/Button'; import {Edit} from 'lucide-react'; @@ -112,7 +112,7 @@ function Example(props) { ```tsx render "use client" -import {Focusable, TooltipTrigger} from 'react-aria-components'; +import {Focusable, TooltipTrigger} from 'react-aria-components/Tooltip'; import {Tooltip} from 'vanilla-starter/Tooltip'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index 63bd61068c9..9094137b4c2 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -67,7 +67,7 @@ export const description = 'Provides users with a way to navigate nested hierarc ```tsx render "use client"; import {Tree, TreeItem} from 'vanilla-starter/Tree'; -import {Collection} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; ///- begin collapse -/// let items = [ @@ -112,7 +112,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T "use client"; import {Tree, TreeItem, TreeLoadMoreItem} from 'vanilla-starter/Tree'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; -import {Collection, useAsyncList} from 'react-aria-components'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; interface Character { name: string @@ -278,7 +279,7 @@ Use the `selectionMode` prop to enable single or multiple selection. The selecte ```tsx render docs={docs.exports.Tree} links={docs.links} props={['selectionMode', 'selectionBehavior', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide "use client"; -import type {Selection} from 'react-aria-components'; +import type {Selection} from 'react-aria-components/Tree'; import {Tree, TreeItem} from 'vanilla-starter/Tree'; import {useState} from 'react'; @@ -328,7 +329,9 @@ Tree supports drag and drop interactions when the `dragAndDropHooks` prop is pro ```tsx render "use client"; import {Tree, TreeItem} from 'vanilla-starter/Tree'; -import {useDragAndDrop, Collection, useTreeData} from 'react-aria-components'; +import {useDragAndDrop} from 'react-aria-components/useDragAndDrop'; +import {Collection} from 'react-aria-components/Collection'; +import {useTreeData} from 'react-aria-components/useTreeData'; function Example() { ///- begin collapse -/// diff --git a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx index a24c1187cec..43e62db852c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Virtualizer.mdx @@ -14,7 +14,7 @@ export const description = 'Renders a scrollable collection of data using custom ```tsx render docs={docs.exports.ListLayoutOptions} links={docs.links} props={['rowSize', 'gap', 'padding']} initialProps={{rowSize: 32, gap: 4, padding: 4}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, ListLayout} from 'react-aria-components'; +import {Virtualizer, ListLayout} from 'react-aria-components/Virtualizer'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; let items: {id: number, name: string}[] = []; @@ -53,7 +53,7 @@ Virtualizer uses obje ```tsx render docs={docs.exports.ListLayoutOptions} links={docs.links} props={['gap', 'padding']} initialProps={{estimatedRowSize: 75, gap: 4, padding: 4}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, ListLayout} from 'react-aria-components'; +import {Virtualizer, ListLayout} from 'react-aria-components/Virtualizer'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.'.split(' '); @@ -85,7 +85,7 @@ Use the `orientation` option to arrange items horizontally or vertically. Provid ```tsx render docs={docs.exports.ListLayoutOptions} links={docs.links} props={['gap', 'padding']} initialProps={{estimatedRowSize: 100, gap: 8, padding: 8, orientation: 'horizontal'}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, ListLayout} from 'react-aria-components'; +import {Virtualizer, ListLayout} from 'react-aria-components/Virtualizer'; import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; ///- begin collapse -/// @@ -336,8 +336,8 @@ for (let i = 0; imageOptions.length < 500; i++) { ```tsx render docs={docs.exports.GridLayoutOptions} links={docs.links} props={['minItemSize', 'maxItemSize', 'minSpace', 'maxColumns', 'preserveAspectRatio']} initialProps={{minItemSize: {width: 100, height: 140}, minSpace: {width: 8, height: 8}}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, GridLayout, Text} from 'react-aria-components'; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; +import {Virtualizer, GridLayout} from 'react-aria-components/Virtualizer'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let albumOptions = [ @@ -426,8 +426,8 @@ function Example(props) { ```tsx render docs={docs.exports.WaterfallLayoutOptions} links={docs.links} props={['minItemSize', 'maxItemSize', 'minSpace', 'maxColumns']} initialProps={{minItemSize: {width: 150, height: 150}, minSpace: {width: 8, height: 8}}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, WaterfallLayout, Text} from 'react-aria-components'; -import {GridList, GridListItem} from 'vanilla-starter/GridList'; +import {Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer'; +import {GridList, GridListItem, Text} from 'vanilla-starter/GridList'; ///- begin collapse -/// let images = [ @@ -678,7 +678,7 @@ for (let i = 0; images.length < 500; i++) { ```tsx render docs={docs.exports.TableLayoutProps} links={docs.links} props={['rowHeight', 'headingHeight', 'padding', 'gap']} initialProps={{rowHeight: 32, headingHeight: 32, padding: 4, gap: 4}} propsObject="layoutOptions" wide "use client"; -import {Virtualizer, TableLayout} from 'react-aria-components'; +import {Virtualizer, TableLayout} from 'react-aria-components/Virtualizer'; import {Cell, Column, Row, Table, TableBody, TableHeader} from 'vanilla-starter/Table'; type Row = { id: number; foo: string; bar: string; baz: string }; diff --git a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx index aa2632b2675..970700e7c54 100644 --- a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx +++ b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx @@ -21,7 +21,7 @@ export const description = 'Hides its children visually but keeps content access {docs.exports.VisuallyHidden.description} ```tsx -import {VisuallyHidden} from 'react-aria'; +import {VisuallyHidden} from 'react-aria/VisuallyHidden'; I am hidden ``` diff --git a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx index 4015030d0c9..7223e39e99d 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx @@ -91,8 +91,10 @@ Building a component with React Aria and React Stately looks like this: call the ```tsx render 'use client'; -import {useSwitch, useFocusRing, VisuallyHidden} from 'react-aria'; -import {useToggleState} from 'react-stately'; +import {useSwitch} from 'react-aria/useSwitch'; +import {useFocusRing} from 'react-aria/useFocusRing'; +import {VisuallyHidden} from 'react-aria/VisuallyHidden'; +import {useToggleState} from 'react-stately/useToggleState'; import {useRef} from 'react'; function Switch(props) { diff --git a/packages/dev/s2-docs/pages/react-aria/collections.mdx b/packages/dev/s2-docs/pages/react-aria/collections.mdx index 43d38f01ace..e346fbdc97b 100644 --- a/packages/dev/s2-docs/pages/react-aria/collections.mdx +++ b/packages/dev/s2-docs/pages/react-aria/collections.mdx @@ -38,9 +38,8 @@ Sections or groups of items can be constructed by wrapping the items in a sectio ```tsx render "use client"; -import {MenuTrigger, Menu, MenuItem, MenuSection} from 'vanilla-starter/Menu'; +import {MenuTrigger, Menu, MenuItem, MenuSection, Header} from 'vanilla-starter/Menu'; import {Button} from 'vanilla-starter/Button'; -import {Header} from 'react-aria-components'; @@ -64,8 +63,7 @@ import {Header} from 'react-aria-components'; ```tsx render "use client"; -import {ListBox, ListBoxItem, ListBoxSection} from 'vanilla-starter/ListBox'; -import {Header} from 'react-aria-components'; +import {ListBox, ListBoxItem, ListBoxSection, Header} from 'vanilla-starter/ListBox'; {/*- begin highlight -*/} @@ -163,8 +161,7 @@ Dynamic collections are automatically memoized to improve performance. Rendered ```tsx render "use client"; -import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; -import {Text} from 'react-aria-components'; +import {ListBox, ListBoxItem, Text} from 'vanilla-starter/ListBox'; import {ToggleButtonGroup} from 'vanilla-starter/ToggleButtonGroup'; import {ToggleButton} from 'vanilla-starter/ToggleButton'; import {useState} from 'react'; @@ -241,8 +238,8 @@ To combine multiple sources of data, or mix static and dynamic items, use the `< ```tsx render "use client"; -import {ListBox, ListBoxSection, ListBoxItem} from 'vanilla-starter/ListBox'; -import {Collection, Header} from 'react-aria-components'; +import {ListBox, ListBoxSection, ListBoxItem, Header} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; let animals = [ {id: 1, species: 'Aardvark'}, @@ -287,8 +284,9 @@ Several components also support infinite scrolling by rendering a `LoadMoreItem` ```tsx render "use client"; -import {Collection, ListBoxLoadMoreItem, useAsyncList} from 'react-aria-components'; -import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox'; +import {Collection} from 'react-aria-components/Collection'; +import {useAsyncList} from 'react-aria-components/useAsyncList'; +import {ListBox, ListBoxItem, ListBoxLoadMoreItem} from 'vanilla-starter/ListBox'; import {ProgressCircle} from 'vanilla-starter/ProgressCircle'; interface Character { diff --git a/packages/dev/s2-docs/pages/react-aria/customization.mdx b/packages/dev/s2-docs/pages/react-aria/customization.mdx index 7689e549b42..b05223e8eee 100644 --- a/packages/dev/s2-docs/pages/react-aria/customization.mdx +++ b/packages/dev/s2-docs/pages/react-aria/customization.mdx @@ -18,7 +18,7 @@ Use the `render` prop on any React Aria component to render a custom component i For example, you can render a [Motion](https://motion.dev) button and use the state to drive an animation. ```tsx -import {Button} from 'react-aria-components'; +import {Button} from 'react-aria-components/Button'; import {motion} from 'motion/react';