react-aria-components 1.16.0 → 1.17.0

package/dist/types/src/Breadcrumbs.d.ts

@@ -0,0 +1,46 @@
+import { AriaBreadcrumbsProps } from 'react-aria/useBreadcrumbs';
+import { AriaLabelingProps, GlobalDOMAttributes, Key } from '@react-types/shared';
+import { ClassNameOrFunction, ContextValue, DOMRenderProps, RenderProps, SlotProps, StyleProps } from './utils';
+import { CollectionProps } from './Collection';
+import React from 'react';
+export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, AriaLabelingProps, DOMRenderProps<'ol', undefined>, GlobalDOMAttributes<HTMLOListElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+     * @default 'react-aria-Breadcrumbs'
+     */
+    className?: string;
+    /** Whether the breadcrumbs are disabled. */
+    isDisabled?: boolean;
+    /** Handler that is called when a breadcrumb is clicked. */
+    onAction?: (key: Key) => void;
+}
+export declare const BreadcrumbsContext: React.Context<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>;
+/**
+ * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
+ */
+export declare const Breadcrumbs: <T extends object>(props: BreadcrumbsProps<T> & React.RefAttributes<HTMLOListElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface BreadcrumbRenderProps {
+    /**
+     * Whether the breadcrumb is for the current page.
+     * @selector [data-current]
+     */
+    isCurrent: boolean;
+    /**
+     * Whether the breadcrumb is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+}
+export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps, 'li'>, AriaLabelingProps, GlobalDOMAttributes<HTMLLIElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-Breadcrumb'
+     */
+    className?: ClassNameOrFunction<BreadcrumbRenderProps>;
+    /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */
+    id?: Key;
+}
+/**
+ * A Breadcrumb represents an individual item in a `<Breadcrumbs>` list.
+ */
+export declare const Breadcrumb: (props: BreadcrumbProps & React.RefAttributes<HTMLLIElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/dist/types/src/Button.d.ts

@@ -0,0 +1,58 @@
+import { AriaButtonProps } from 'react-aria/useButton';
+import { ClassNameOrFunction, ContextValue, RenderProps, SlotProps } from './utils';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { HoverEvents } from '@react-types/shared';
+import React from 'react';
+export interface ButtonRenderProps {
+    /**
+     * Whether the button is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+    /**
+     * Whether the button is currently in a pressed state.
+     * @selector [data-pressed]
+     */
+    isPressed: boolean;
+    /**
+     * Whether the button is focused, either via a mouse or keyboard.
+     * @selector [data-focused]
+     */
+    isFocused: boolean;
+    /**
+     * Whether the button is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the button is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the button is currently in a pending state.
+     * @selector [data-pending]
+     */
+    isPending: boolean;
+}
+export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps, 'button'>, Omit<GlobalDOMAttributes<HTMLButtonElement>, 'onClick'> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-Button'
+     */
+    className?: ClassNameOrFunction<ButtonRenderProps>;
+    /**
+     * Whether the button is in a pending state. This disables press and hover events
+     * while retaining focusability, and announces the pending state to screen readers.
+     */
+    isPending?: boolean;
+}
+interface ButtonContextValue extends ButtonProps {
+    isPressed?: boolean;
+}
+export declare const ButtonContext: React.Context<ContextValue<ButtonContextValue, HTMLButtonElement>>;
+/**
+ * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
+ */
+export declare const Button: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export {};

package/dist/types/src/Calendar.d.ts

@@ -0,0 +1,242 @@
+import { AriaCalendarProps } from 'react-aria/useCalendar';
+import { AriaRangeCalendarProps } from 'react-aria/useRangeCalendar';
+import { CalendarDate, CalendarIdentifier, DateDuration, Calendar as ICalendar } from '@internationalized/date';
+import { CalendarState } from 'react-stately/useCalendarState';
+import { ClassNameOrFunction, ContextValue, DOMProps, DOMRenderProps, RenderProps, SlotProps, StyleProps } from './utils';
+import { DateValue } from 'react-stately/useRangeCalendarState';
+import { GlobalDOMAttributes, HoverEvents } from '@react-types/shared';
+import { RangeCalendarState } from 'react-stately/useRangeCalendarState';
+import React, { ReactElement } from 'react';
+export interface CalendarRenderProps {
+    /**
+     * Whether the calendar is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * State of the calendar.
+     */
+    state: CalendarState;
+    /**
+     * Whether the calendar is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+}
+export interface RangeCalendarRenderProps extends Omit<CalendarRenderProps, 'state'> {
+    /**
+     * State of the range calendar.
+     */
+    state: RangeCalendarState;
+}
+export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<CalendarRenderProps, 'div'>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-Calendar'
+     */
+    className?: ClassNameOrFunction<CalendarRenderProps>;
+    /**
+     * The amount of days that will be displayed at once. This affects how pagination works.
+     * @default {months: 1}
+     */
+    visibleDuration?: DateDuration;
+    /**
+     * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
+     * object for a given calendar identifier. If not provided, the `createCalendar` function
+     * from `@internationalized/date` will be used.
+     */
+    createCalendar?: (identifier: CalendarIdentifier) => ICalendar;
+}
+export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps, 'div'>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-RangeCalendar'
+     */
+    className?: ClassNameOrFunction<RangeCalendarRenderProps>;
+    /**
+     * The amount of days that will be displayed at once. This affects how pagination works.
+     * @default {months: 1}
+     */
+    visibleDuration?: DateDuration;
+    /**
+     * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
+     * object for a given calendar identifier. If not provided, the `createCalendar` function
+     * from `@internationalized/date` will be used.
+     */
+    createCalendar?: (identifier: CalendarIdentifier) => ICalendar;
+}
+export declare const CalendarContext: React.Context<ContextValue<CalendarProps<any>, HTMLDivElement>>;
+export declare const RangeCalendarContext: React.Context<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>;
+export declare const CalendarStateContext: React.Context<CalendarState | null>;
+export declare const RangeCalendarStateContext: React.Context<RangeCalendarState<DateValue> | null>;
+/**
+ * A calendar displays one or more date grids and allows users to select a single date.
+ */
+export declare const Calendar: <T extends DateValue>(props: CalendarProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
+ */
+export declare const RangeCalendar: <T extends DateValue>(props: RangeCalendarProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface CalendarCellRenderProps {
+    /** The date that the cell represents. */
+    date: CalendarDate;
+    /** The day number formatted according to the current locale. */
+    formattedDate: string;
+    /**
+     * Whether the cell is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+    /**
+     * Whether the cell is currently being pressed.
+     * @selector [data-pressed]
+     */
+    isPressed: boolean;
+    /**
+     * Whether the cell is selected.
+     * @selector [data-selected]
+     */
+    isSelected: boolean;
+    /**
+     * Whether the cell is the first date in a range selection.
+     * @selector [data-selection-start]
+     */
+    isSelectionStart: boolean;
+    /**
+     * Whether the cell is the last date in a range selection.
+     * @selector [data-selection-end]
+     */
+    isSelectionEnd: boolean;
+    /**
+     * Whether the cell is focused.
+     * @selector [data-focused]
+     */
+    isFocused: boolean;
+    /**
+     * Whether the cell is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props.
+     * Disabled dates are not focusable, and cannot be selected by the user. They are typically
+     * displayed with a dimmed appearance.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the cell is outside the visible range of the calendar.
+     * For example, dates before the first day of a month in the same week.
+     * @selector [data-outside-visible-range]
+     */
+    isOutsideVisibleRange: boolean;
+    /**
+     * Whether the cell is outside the current month.
+     * @selector [data-outside-month]
+     */
+    isOutsideMonth: boolean;
+    /**
+     * Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain
+     * focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they
+     * are unavailable, such as a different color or a strikethrough.
+     *
+     * Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio,
+     * [as defined by WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+     *
+     * @selector [data-unavailable]
+     */
+    isUnavailable: boolean;
+    /**
+     * Whether the cell is part of an invalid selection.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the cell is today.
+     * @selector [data-today]
+     */
+    isToday: boolean;
+}
+export interface CalendarGridProps extends StyleProps, DOMRenderProps<'table', undefined>, GlobalDOMAttributes<HTMLTableElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+     * @default 'react-aria-CalendarGrid'
+     */
+    className?: string;
+    /**
+     * Either a function to render calendar cells for each date in the month,
+     * or children containing a `<CalendarGridHeader>`` and `<CalendarGridBody>`
+     * when additional customization is needed.
+     */
+    children?: ReactElement | ReactElement[] | ((date: CalendarDate) => ReactElement);
+    /**
+     * An offset from the beginning of the visible date range that this
+     * CalendarGrid should display. Useful when displaying more than one
+     * month at a time.
+     */
+    offset?: DateDuration;
+    /**
+     * The style of weekday names to display in the calendar grid header,
+     * e.g. single letter, abbreviation, or full day name.
+     * @default "narrow"
+     */
+    weekdayStyle?: 'narrow' | 'short' | 'long';
+}
+/**
+ * A calendar grid displays a single grid of days within a calendar or range calendar which
+ * can be keyboard navigated and selected by the user.
+ */
+export declare const CalendarGrid: (props: CalendarGridProps & React.RefAttributes<HTMLTableElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface CalendarGridHeaderProps extends StyleProps, DOMRenderProps<'thead', undefined>, GlobalDOMAttributes<HTMLTableSectionElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+     * @default 'react-aria-CalendarGridHeader'
+     */
+    className?: string;
+    /** A function to render a `<CalendarHeaderCell>` for a weekday name. */
+    children: (day: string) => ReactElement;
+}
+/**
+ * A calendar grid header displays a row of week day names at the top of a month.
+ */
+declare const CalendarGridHeaderForwardRef: (props: CalendarGridHeaderProps & React.RefAttributes<HTMLTableSectionElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export { CalendarGridHeaderForwardRef as CalendarGridHeader };
+export interface CalendarHeaderCellProps extends DOMProps, DOMRenderProps<'th', undefined>, GlobalDOMAttributes<HTMLTableHeaderCellElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+     * @default 'react-aria-CalendarHeaderCell'
+     */
+    className?: string;
+}
+/**
+ * A calendar header cell displays a week day name at the top of a column within a calendar.
+ */
+declare const CalendarHeaderCellForwardRef: React.ForwardRefExoticComponent<CalendarHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export { CalendarHeaderCellForwardRef as CalendarHeaderCell };
+export interface CalendarGridBodyProps extends StyleProps, DOMRenderProps<'tbody', undefined>, GlobalDOMAttributes<HTMLTableSectionElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+     * @default 'react-aria-CalendarGridBody'
+     */
+    className?: string;
+    /** A function to render a `<CalendarCell>` for a given date. */
+    children: (date: CalendarDate) => ReactElement;
+}
+/**
+ * A calendar grid body displays a grid of calendar cells within a month.
+ */
+declare const CalendarGridBodyForwardRef: (props: CalendarGridBodyProps & React.RefAttributes<HTMLTableSectionElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export { CalendarGridBodyForwardRef as CalendarGridBody };
+export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps, 'div'>, HoverEvents, GlobalDOMAttributes<HTMLTableCellElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-CalendarCell'
+     */
+    className?: ClassNameOrFunction<CalendarCellRenderProps>;
+    /** The date to render in the cell. */
+    date: CalendarDate;
+}
+/**
+ * A calendar cell displays a date cell within a calendar grid which can be selected by the user.
+ */
+export declare const CalendarCell: (props: CalendarCellProps & React.RefAttributes<HTMLTableCellElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/dist/types/src/Checkbox.d.ts

@@ -0,0 +1,115 @@
+import { AriaCheckboxGroupProps } from 'react-aria/useCheckboxGroup';
+import { AriaCheckboxProps } from 'react-aria/useCheckbox';
+import { CheckboxGroupState } from 'react-stately/useCheckboxGroupState';
+import { ClassNameOrFunction, ContextValue, RACValidation, RenderProps, SlotProps } from './utils';
+import { GlobalDOMAttributes, RefObject } from '@react-types/shared';
+import { HoverEvents } from '@react-types/shared';
+import React from 'react';
+export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps, 'div'>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-CheckboxGroup'
+     */
+    className?: ClassNameOrFunction<CheckboxGroupRenderProps>;
+}
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-Checkbox'
+     */
+    className?: ClassNameOrFunction<CheckboxRenderProps>;
+    /**
+     * A ref for the HTML input element.
+     */
+    inputRef?: RefObject<HTMLInputElement | null>;
+}
+export interface CheckboxGroupRenderProps {
+    /**
+     * Whether the checkbox group is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the checkbox group is read only.
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+    /**
+     * Whether the checkbox group is required.
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+    /**
+     * Whether the checkbox group is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * State of the checkbox group.
+     */
+    state: CheckboxGroupState;
+}
+export interface CheckboxRenderProps {
+    /**
+     * Whether the checkbox is selected.
+     * @selector [data-selected]
+     */
+    isSelected: boolean;
+    /**
+     * Whether the checkbox is indeterminate.
+     * @selector [data-indeterminate]
+     */
+    isIndeterminate: boolean;
+    /**
+     * Whether the checkbox is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+    /**
+     * Whether the checkbox is currently in a pressed state.
+     * @selector [data-pressed]
+     */
+    isPressed: boolean;
+    /**
+     * Whether the checkbox is focused, either via a mouse or keyboard.
+     * @selector [data-focused]
+     */
+    isFocused: boolean;
+    /**
+     * Whether the checkbox is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the checkbox is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the checkbox is read only.
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+    /**
+     * Whether the checkbox invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the checkbox is required.
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+}
+export declare const CheckboxContext: React.Context<ContextValue<CheckboxProps, HTMLLabelElement>>;
+export declare const CheckboxGroupContext: React.Context<ContextValue<CheckboxGroupProps, HTMLDivElement>>;
+export declare const CheckboxGroupStateContext: React.Context<CheckboxGroupState | null>;
+/**
+ * A checkbox group allows a user to select multiple items from a list of options.
+ */
+export declare const CheckboxGroup: (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A checkbox allows a user to select multiple items from a list of individual items, or
+ * to mark one individual item as selected.
+ */
+export declare const Checkbox: (props: CheckboxProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/dist/types/src/Collection.d.ts

@@ -0,0 +1,121 @@
+import { CollectionBase, DropTargetDelegate, GlobalDOMAttributes, ItemDropTarget, Key, LayoutDelegate, RefObject } from '@react-types/shared';
+import { Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps } from '@react-types/shared';
+import React, { ForwardedRef, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { StyleProps } from './utils';
+export interface CollectionProps<T> extends Omit<CollectionBase<T>, 'children'> {
+    /** The contents of the collection. */
+    children?: ReactNode | ((item: T) => ReactNode);
+    /** Values that should invalidate the item cache when using dynamic collections. */
+    dependencies?: ReadonlyArray<any>;
+}
+export interface ItemRenderProps {
+    /**
+     * Whether the item is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+    /**
+     * Whether the item is currently in a pressed state.
+     * @selector [data-pressed]
+     */
+    isPressed: boolean;
+    /**
+     * Whether the item is currently selected.
+     * @selector [data-selected]
+     */
+    isSelected: boolean;
+    /**
+     * Whether the item is currently focused.
+     * @selector [data-focused]
+     */
+    isFocused: boolean;
+    /**
+     * Whether the item is currently keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may
+     * not be focused. Dependent on `disabledKeys` and `disabledBehavior`.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * The type of selection that is allowed in the collection.
+     * @selector [data-selection-mode="single | multiple"]
+     */
+    selectionMode: SelectionMode;
+    /** The selection behavior for the collection. */
+    selectionBehavior: SelectionBehavior;
+    /**
+     * Whether the item allows dragging.
+     * @note This property is only available in collection components that support drag and drop.
+     * @selector [data-allows-dragging]
+     */
+    allowsDragging?: boolean;
+    /**
+     * Whether the item is currently being dragged.
+     * @note This property is only available in collection components that support drag and drop.
+     * @selector [data-dragging]
+     */
+    isDragging?: boolean;
+    /**
+     * Whether the item is currently an active drop target.
+     * @note This property is only available in collection components that support drag and drop.
+     * @selector [data-drop-target]
+     */
+    isDropTarget?: boolean;
+}
+export interface SectionProps<T> extends Omit<SharedSectionProps<T>, 'children' | 'title'>, StyleProps, GlobalDOMAttributes<HTMLElement> {
+    /** The unique id of the section. */
+    id?: Key;
+    /** The object value that this section represents. When using dynamic collections, this is set automatically. */
+    value?: T;
+    /** Static child items or a function to render children. */
+    children?: ReactNode | ((item: T) => ReactElement);
+    /** Values that should invalidate the item cache when using dynamic collections. */
+    dependencies?: ReadonlyArray<any>;
+}
+interface SectionContextValue {
+    name: string;
+    render: (props: SectionProps<any>, ref: ForwardedRef<HTMLElement>, section: Node<any>, className?: string) => ReactElement;
+}
+export declare const SectionContext: React.Context<SectionContextValue | null>;
+/** @deprecated */
+export declare const Section: <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface CollectionBranchProps {
+    /** The collection of items to render. */
+    collection: ICollection<Node<unknown>>;
+    /** The parent node of the items to render. */
+    parent: Node<unknown>;
+    /** A function that renders a drop indicator between items. */
+    renderDropIndicator?: (target: ItemDropTarget) => ReactNode;
+}
+export interface CollectionRootProps extends HTMLAttributes<HTMLElement> {
+    /** The collection of items to render. */
+    collection: ICollection<Node<unknown>>;
+    /** A set of keys for items that should always be persisted in the DOM. */
+    persistedKeys?: Set<Key> | null;
+    /** A ref to the scroll container for the collection. */
+    scrollRef?: RefObject<HTMLElement | null>;
+    /** A function that renders a drop indicator between items. */
+    renderDropIndicator?: (target: ItemDropTarget) => ReactNode;
+}
+export interface CollectionRenderer {
+    /** Whether this is a virtualized collection. */
+    isVirtualized?: boolean;
+    /** A delegate object that provides layout information for items in the collection. */
+    layoutDelegate?: LayoutDelegate;
+    /** A delegate object that provides drop targets for pointer coordinates within the collection. */
+    dropTargetDelegate?: DropTargetDelegate;
+    /** A component that renders the root collection items. */
+    CollectionRoot: React.ComponentType<CollectionRootProps>;
+    /** A component that renders the child collection items. */
+    CollectionBranch: React.ComponentType<CollectionBranchProps>;
+}
+export declare const DefaultCollectionRenderer: CollectionRenderer;
+export declare function renderAfterDropIndicators(collection: ICollection<Node<unknown>>, node: Node<unknown>, renderDropIndicator: (target: ItemDropTarget) => ReactNode): ReactNode;
+export declare const CollectionRendererContext: React.Context<CollectionRenderer>;
+type PersistedKeysReturnValue = Set<Key> | null;
+export declare function usePersistedKeys(focusedKey: Key | null): PersistedKeysReturnValue;
+export {};

package/dist/types/src/ColorArea.d.ts

@@ -0,0 +1,29 @@
+import { AriaColorAreaProps } from 'react-aria/useColorArea';
+import { ClassNameOrFunction, ContextValue, RenderProps, SlotProps } from './utils';
+import { ColorAreaState } from 'react-stately/useColorAreaState';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import React from 'react';
+export interface ColorAreaRenderProps {
+    /**
+     * Whether the color area is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * State of the color area.
+     */
+    state: ColorAreaState;
+}
+export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-ColorArea'
+     */
+    className?: ClassNameOrFunction<ColorAreaRenderProps>;
+}
+export declare const ColorAreaContext: React.Context<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>;
+export declare const ColorAreaStateContext: React.Context<ColorAreaState | null>;
+/**
+ * A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */
+export declare const ColorArea: React.ForwardRefExoticComponent<ColorAreaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/ColorField.d.ts

@@ -0,0 +1,60 @@
+import { AriaColorFieldProps } from 'react-aria/useColorField';
+import { ClassNameOrFunction, ContextValue, RACValidation, RenderProps, SlotProps } from './utils';
+import { ColorChannel, ColorSpace } from 'react-stately/Color';
+import { ColorFieldState } from 'react-stately/useColorFieldState';
+import { GlobalDOMAttributes, InputDOMProps } from '@react-types/shared';
+import React from 'react';
+export interface ColorFieldRenderProps {
+    /**
+     * Whether the color field is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the color field is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the color field is read only.
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+    /**
+     * Whether the color field is required.
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+    /**
+     * The color channel that this field edits, or "hex" if no `channel` prop is set.
+     * @selector [data-channel="hex | hue | saturation | ..."]
+     */
+    channel: ColorChannel | 'hex';
+    /**
+     * State of the color field.
+     */
+    state: ColorFieldState;
+}
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+     * @default 'react-aria-ColorField'
+     */
+    className?: ClassNameOrFunction<ColorFieldRenderProps>;
+    /**
+     * The color channel that this field edits. If not provided,
+     * the color is edited as a hex value.
+     */
+    channel?: ColorChannel;
+    /**
+     * The color space that the color field operates in if a `channel` prop is provided.
+     * If no `channel` is provided, the color field always displays the color as an RGB hex value.
+     */
+    colorSpace?: ColorSpace;
+}
+export declare const ColorFieldContext: React.Context<ContextValue<ColorFieldProps, HTMLDivElement>>;
+export declare const ColorFieldStateContext: React.Context<ColorFieldState | null>;
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export declare const ColorField: React.ForwardRefExoticComponent<ColorFieldProps & React.RefAttributes<HTMLDivElement>>;