react-aria-components 1.16.0 → 1.17.0

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

@@ -0,0 +1,19 @@
+import { ChildrenOrFunction, SlotProps, SlottedContextValue } from './utils';
+import { Color } from 'react-stately/Color';
+import { ColorPickerState, ColorPickerProps as StatelyColorPickerProps } from 'react-stately/useColorPickerState';
+import React, { JSX } from 'react';
+export interface ColorPickerRenderProps {
+    /** The currently selected color. */
+    color: Color;
+}
+export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps {
+    /** The children of the component. A function may be provided to alter the children based on component state. */
+    children: ChildrenOrFunction<ColorPickerRenderProps>;
+}
+export declare const ColorPickerContext: React.Context<SlottedContextValue<ColorPickerProps>>;
+export declare const ColorPickerStateContext: React.Context<ColorPickerState | null>;
+/**
+ * A ColorPicker synchronizes a color value between multiple React Aria color components.
+ * It simplifies building color pickers with customizable layouts via composition.
+ */
+export declare function ColorPicker(props: ColorPickerProps): JSX.Element;

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

@@ -0,0 +1,35 @@
+import { AriaColorSliderProps } from 'react-aria/useColorSlider';
+import { ClassNameOrFunction, ContextValue, RenderProps, SlotProps } from './utils';
+import { ColorSliderState } from 'react-stately/useColorSliderState';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { Orientation } from '@react-types/shared';
+import React from 'react';
+export interface ColorSliderRenderProps {
+    /**
+     * The orientation of the color slider.
+     * @selector [data-orientation="horizontal | vertical"]
+     */
+    orientation: Orientation;
+    /**
+     * Whether the color slider is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * State of the color slider.
+     */
+    state: ColorSliderState;
+}
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, 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-ColorSlider'
+     */
+    className?: ClassNameOrFunction<ColorSliderRenderProps>;
+}
+export declare const ColorSliderContext: React.Context<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>;
+export declare const ColorSliderStateContext: React.Context<ColorSliderState | null>;
+/**
+ * A color slider allows users to adjust an individual channel of a color value.
+ */
+export declare const ColorSlider: React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+import { AriaColorSwatchProps } from 'react-aria/useColorSwatch';
+import { ClassNameOrFunction, ContextValue, SlotProps, StyleRenderProps } from './utils';
+import { Color } from 'react-stately/Color';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import React from 'react';
+export interface ColorSwatchRenderProps {
+    /** The color of the swatch. */
+    color: Color;
+}
+export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, 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-ColorSwatch'
+     */
+    className?: ClassNameOrFunction<ColorSwatchRenderProps>;
+}
+export declare const ColorSwatchContext: React.Context<ContextValue<ColorSwatchProps, HTMLDivElement>>;
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export declare const ColorSwatch: React.ForwardRefExoticComponent<ColorSwatchProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,42 @@
+import { AriaLabelingProps, GlobalDOMAttributes, HoverEvents, PressEvents, ValueBase } from '@react-types/shared';
+import { ClassNameOrFunction, ContextValue, RenderProps, StyleRenderProps } from './utils';
+import { Color } from 'react-stately/Color';
+import { ListBoxItemRenderProps, ListBoxRenderProps } from './ListBox';
+import React, { ReactNode } from 'react';
+export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {
+}
+export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps>, 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-ColorSwatchPicker'
+     */
+    className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>;
+    /** The children of the ColorSwatchPicker. */
+    children?: ReactNode;
+    /**
+     * Whether the items are arranged in a stack or grid.
+     * @default 'grid'
+     */
+    layout?: 'grid' | 'stack';
+}
+export declare const ColorSwatchPickerContext: React.Context<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>;
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+export declare const ColorSwatchPicker: React.ForwardRefExoticComponent<ColorSwatchPickerProps & React.RefAttributes<HTMLDivElement>>;
+export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {
+    /** The color of the swatch. */
+    color: Color;
+}
+export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, '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-ColorSwatchPickerItem'
+     */
+    className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>;
+    /** The color of the swatch. */
+    color: string | Color;
+    /** Whether the color swatch is disabled. */
+    isDisabled?: boolean;
+}
+export declare const ColorSwatchPickerItem: React.ForwardRefExoticComponent<ColorSwatchPickerItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,61 @@
+import { ClassNameOrFunction, RenderProps } from './utils';
+import { Color } from 'react-stately/Color';
+import { GlobalDOMAttributes, HoverEvents, RefObject } from '@react-types/shared';
+import React, { HTMLAttributes, InputHTMLAttributes } from 'react';
+interface ColorState {
+    getDisplayColor(): Color;
+    isDragging: boolean;
+}
+interface InternalColorThumbContextValue {
+    state: ColorState;
+    thumbProps: HTMLAttributes<HTMLElement>;
+    inputXRef: RefObject<HTMLInputElement | null>;
+    inputYRef?: RefObject<HTMLInputElement | null>;
+    xInputProps: InputHTMLAttributes<HTMLInputElement>;
+    yInputProps?: InputHTMLAttributes<HTMLInputElement>;
+    isDisabled?: boolean;
+}
+export declare const InternalColorThumbContext: React.Context<InternalColorThumbContextValue | null>;
+export interface ColorThumbRenderProps {
+    /**
+     * The selected color, excluding the alpha channel.
+     */
+    color: Color;
+    /**
+     * Whether this thumb is currently being dragged.
+     * @selector [data-dragging]
+     */
+    isDragging: boolean;
+    /**
+     * Whether the thumb is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+    /**
+     * Whether the thumb is currently focused.
+     * @selector [data-focused]
+     */
+    isFocused: boolean;
+    /**
+     * Whether the thumb is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the thumb is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+}
+export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps>, 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-ColorThumb'
+     */
+    className?: ClassNameOrFunction<ColorThumbRenderProps>;
+}
+/**
+ * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
+ */
+export declare const ColorThumb: React.ForwardRefExoticComponent<ColorThumbProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,46 @@
+import { AriaColorWheelOptions } from 'react-aria/useColorWheel';
+import { ClassNameOrFunction, ContextValue, RenderProps, SlotProps, StyleRenderProps } from './utils';
+import { ColorWheelState } from 'react-stately/useColorWheelState';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import React, { HTMLAttributes } from 'react';
+export interface ColorWheelRenderProps {
+    /**
+     * Whether the color wheel is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * State of the color wheel.
+     */
+    state: ColorWheelState;
+}
+export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, 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-ColorWheel'
+     */
+    className?: ClassNameOrFunction<ColorWheelRenderProps>;
+}
+export declare const ColorWheelContext: React.Context<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>;
+export declare const ColorWheelStateContext: React.Context<ColorWheelState | null>;
+/**
+ * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export declare const ColorWheel: React.ForwardRefExoticComponent<ColorWheelProps & React.RefAttributes<HTMLDivElement>>;
+export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {
+}
+export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, 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-ColorWheelTrack'
+     */
+    className?: ClassNameOrFunction<ColorWheelTrackRenderProps>;
+}
+interface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, StyleRenderProps<ColorWheelTrackRenderProps> {
+}
+export declare const ColorWheelTrackContext: React.Context<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>;
+/**
+ * A color wheel track renders a circular gradient track.
+ */
+export declare const ColorWheelTrack: React.ForwardRefExoticComponent<ColorWheelTrackProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,85 @@
+import { AriaComboBoxProps } from 'react-aria/useComboBox';
+import { ClassNameOrFunction, ContextValue, RACValidation, RenderProps, SlotProps } from './utils';
+import { ComboBoxState } from 'react-stately/useComboBoxState';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import React, { HTMLAttributes, ReactElement, ReactNode } from 'react';
+type SelectionMode = 'single' | 'multiple';
+export interface ComboBoxRenderProps {
+    /**
+     * Whether the combobox is currently open.
+     * @selector [data-open]
+     */
+    isOpen: boolean;
+    /**
+     * Whether the combobox is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the combobox is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the combobox is required.
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+    /**
+     * Whether the combobox is read only.
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+}
+export interface ComboBoxProps<T extends object, M extends SelectionMode = 'single'> extends Omit<AriaComboBoxProps<T, M>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, 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-ComboBox'
+     */
+    className?: ClassNameOrFunction<ComboBoxRenderProps>;
+    /** The filter function used to determine if a option should be included in the combo box list. */
+    defaultFilter?: (textValue: string, inputValue: string) => boolean;
+    /**
+     * Whether the text or key of the selected item is submitted as part of an HTML form.
+     * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.
+     * @default 'key'
+     */
+    formValue?: 'text' | 'key';
+    /** Whether the combo box allows the menu to be open when the collection is empty. */
+    allowsEmptyCollection?: boolean;
+}
+export declare const ComboBoxContext: React.Context<ContextValue<ComboBoxProps<any, SelectionMode>, HTMLDivElement>>;
+export declare const ComboBoxStateContext: React.Context<ComboBoxState<any, SelectionMode> | null>;
+/**
+ * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
+ */
+export declare const ComboBox: <T extends object, M extends SelectionMode = "single">(props: ComboBoxProps<T, M> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface ComboBoxValueRenderProps<T> {
+    /**
+     * Whether the value is a placeholder.
+     * @selector [data-placeholder]
+     */
+    isPlaceholder: boolean;
+    /** The object values of the currently selected items. */
+    selectedItems: (T | null)[];
+    /** The textValue of the currently selected items. */
+    selectedText: string;
+    /** The state of the ComboBox. */
+    state: ComboBoxState<T, 'single' | 'multiple'>;
+}
+export interface ComboBoxValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<ComboBoxValueRenderProps<T>, 'div'> {
+    /**
+     * 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-ComboBoxValue'
+     */
+    className?: ClassNameOrFunction<ComboBoxValueRenderProps<T>>;
+    /** A value to display when no items are selected. */
+    placeholder?: ReactNode;
+}
+export declare const ComboBoxValueContext: React.Context<ContextValue<ComboBoxValueProps<any>, HTMLDivElement>>;
+/**
+ * ComboBoxValue renders the selected values of a ComboBox, or a placeholder if no value is selected.
+ * By default, the items are rendered as a comma separated list. Use the render function to customize this.
+ */
+export declare const ComboBoxValue: <T extends object>(props: ComboBoxValueProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export {};

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

@@ -0,0 +1,157 @@
+import { AriaDateFieldProps } from 'react-aria/useDateField';
+import { AriaTimeFieldProps } from 'react-aria/useTimeField';
+import { ClassNameOrFunction, ContextValue, RACValidation, RenderProps, SlotProps, StyleRenderProps } from './utils';
+import { DateFieldState, DateSegmentType, DateValue, DateSegment as IDateSegment } from 'react-stately/useDateFieldState';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { HoverEvents } from '@react-types/shared';
+import React, { ReactElement } from 'react';
+import { TimeFieldState } from 'react-stately/useTimeFieldState';
+import { TimeValue } from 'react-stately/useTimeFieldState';
+export interface DateFieldRenderProps {
+    /**
+     * State of the date field.
+     */
+    state: DateFieldState;
+    /**
+     * Whether the date field is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the date field is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the date field is read only.
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+    /**
+     * Whether the date field is required.
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+}
+export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, 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-DateField'
+     */
+    className?: ClassNameOrFunction<DateFieldRenderProps>;
+}
+export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, 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-TimeField'
+     */
+    className?: ClassNameOrFunction<DateFieldRenderProps>;
+}
+export declare const DateFieldContext: React.Context<ContextValue<DateFieldProps<any>, HTMLDivElement>>;
+export declare const TimeFieldContext: React.Context<ContextValue<TimeFieldProps<any>, HTMLDivElement>>;
+export declare const DateFieldStateContext: React.Context<DateFieldState | null>;
+export declare const TimeFieldStateContext: React.Context<TimeFieldState | null>;
+/**
+ * A date field allows users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
+export declare const DateField: <T extends DateValue>(props: DateFieldProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A time field allows users to enter and edit time values using a keyboard.
+ * Each part of a time value is displayed in an individually editable segment.
+ */
+export declare const TimeField: <T extends TimeValue>(props: TimeFieldProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface DateInputRenderProps {
+    /**
+     * Whether the date input is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+    /**
+     * Whether an element within the date input is focused, either via a mouse or keyboard.
+     * @selector [data-focus-within]
+     */
+    isFocusWithin: boolean;
+    /**
+     * Whether an element within the date input is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the date input is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the date input is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+}
+export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRenderProps>, 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-DateInput'
+     */
+    className?: ClassNameOrFunction<DateInputRenderProps>;
+    children: (segment: IDateSegment) => ReactElement;
+}
+/**
+ * A date input groups the editable date segments within a date field.
+ */
+export declare const DateInput: (props: DateInputProps & React.RefAttributes<HTMLDivElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'> {
+    /**
+     * Whether the segment is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: boolean;
+    /**
+     * Whether the segment is focused, either via a mouse or keyboard.
+     * @selector [data-focused]
+     */
+    isFocused: boolean;
+    /**
+     * Whether the segment is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the value is a placeholder.
+     * @selector [data-placeholder]
+     */
+    isPlaceholder: boolean;
+    /**
+     * Whether the segment is read only.
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+    /**
+     * Whether the date field is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the date field is in an invalid state.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * The type of segment. Values include `literal`, `year`, `month`, `day`, etc.
+     * @selector [data-type="..."]
+     */
+    type: DateSegmentType;
+}
+export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps, 'span'>, HoverEvents, GlobalDOMAttributes<HTMLSpanElement> {
+    /**
+     * 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-DateSegment'
+     */
+    className?: ClassNameOrFunction<DateSegmentRenderProps>;
+    segment: IDateSegment;
+}
+/**
+ * A date segment displays an individual unit of a date and time, and allows users to edit
+ * the value by typing or using the arrow keys to increment and decrement.
+ */
+export declare const DateSegment: (props: DateSegmentProps & React.RefAttributes<HTMLSpanElement>) => ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

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

@@ -0,0 +1,81 @@
+import { AriaDatePickerProps } from 'react-aria/useDatePicker';
+import { AriaDateRangePickerProps } from 'react-aria/useDateRangePicker';
+import { ClassNameOrFunction, ContextValue, RACValidation, RenderProps, SlotProps } from './utils';
+import { DatePickerState, DatePickerStateOptions, DateValue } from 'react-stately/useDatePickerState';
+import { DateRangePickerState, DateRangePickerStateOptions } from 'react-stately/useDateRangePickerState';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import React from 'react';
+export interface DatePickerRenderProps {
+    /**
+     * Whether an element within the date picker is focused, either via a mouse or keyboard.
+     * @selector [data-focus-within]
+     */
+    isFocusWithin: boolean;
+    /**
+     * Whether an element within the date picker is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: boolean;
+    /**
+     * Whether the date picker is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: boolean;
+    /**
+     * Whether the date picker is read only.
+     * @selector [data-readonly]
+     */
+    isReadOnly: boolean;
+    /**
+     * Whether the date picker is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: boolean;
+    /**
+     * Whether the date picker is required.
+     * @selector [data-required]
+     */
+    isRequired: boolean;
+    /**
+     * Whether the date picker's popover is currently open.
+     * @selector [data-open]
+     */
+    isOpen: boolean;
+    /**
+     * State of the date picker.
+     */
+    state: DatePickerState;
+}
+export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, 'state'> {
+    /**
+     * State of the date range picker.
+     */
+    state: DateRangePickerState;
+}
+export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, 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-DatePicker'
+     */
+    className?: ClassNameOrFunction<DatePickerRenderProps>;
+}
+export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, 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-DateRangePicker'
+     */
+    className?: ClassNameOrFunction<DateRangePickerRenderProps>;
+}
+export declare const DatePickerContext: React.Context<ContextValue<DatePickerProps<any>, HTMLDivElement>>;
+export declare const DateRangePickerContext: React.Context<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>;
+export declare const DatePickerStateContext: React.Context<DatePickerState | null>;
+export declare const DateRangePickerStateContext: React.Context<DateRangePickerState | null>;
+/**
+ * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+export declare const DatePicker: <T extends DateValue>(props: DatePickerProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+/**
+ * A date range picker combines two DateFields and a RangeCalendar popover to allow
+ * users to enter or select a date and time range.
+ */
+export declare const DateRangePicker: <T extends DateValue>(props: DateRangePickerProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

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

@@ -0,0 +1,30 @@
+import { AriaDialogProps } from 'react-aria/useDialog';
+import { ContextValue, DOMRenderProps, SlotProps, StyleProps } from './utils';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { OverlayTriggerProps, OverlayTriggerState } from 'react-stately/useOverlayTriggerState';
+import React, { JSX, ReactNode } from 'react';
+export interface DialogTriggerProps extends OverlayTriggerProps {
+    children: ReactNode;
+}
+export interface DialogRenderProps {
+    close: () => void;
+}
+export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps, DOMRenderProps<'section', undefined>, GlobalDOMAttributes<HTMLElement> {
+    /**
+     * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+     * @default 'react-aria-Dialog'
+     */
+    className?: string;
+    /** Children of the dialog. A function may be provided to access a function to close the dialog. */
+    children?: ReactNode | ((opts: DialogRenderProps) => ReactNode);
+}
+export declare const DialogContext: React.Context<ContextValue<DialogProps, HTMLElement>>;
+export declare const OverlayTriggerStateContext: React.Context<OverlayTriggerState | null>;
+/**
+ * A DialogTrigger opens a dialog when a trigger element is pressed.
+ */
+export declare function DialogTrigger(props: DialogTriggerProps): JSX.Element;
+/**
+ * A dialog is an overlay shown above other content in an application.
+ */
+export declare const Dialog: (props: DialogProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;