react-aria-components/dist/types.d.ts

A library of styleable components built using React Aria

import { DOMProps as _DOMProps1, CollectionBase, Key, HoverEvents as _HoverEvents1, ValidationResult, AriaLabelingProps, DraggableCollectionProps, DroppableCollectionProps, LinkDOMProps, InputDOMProps, Orientation as _Orientation2 } from "@react-types/shared";
import React, { Context, CSSProperties, ForwardedRef, JSX, ReactNode, RefObject, UIEvent, ReactElement, HTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, OutputHTMLAttributes, TextareaHTMLAttributes } from "react";
import { SelectionBehavior, SelectionMode, SectionProps as _SectionProps1, CalendarState, RangeCalendarState, CheckboxGroupState, DraggableCollectionState, DraggableCollectionStateOptions, DroppableCollectionState, DroppableCollectionStateOptions, ListState, Orientation, OverlayTriggerProps, OverlayTriggerState, ComboBoxState, DateFieldState, DateSegmentType, DateSegment as _DateSegment1, TimeFieldState, DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, MenuTriggerProps as _MenuTriggerProps1, TreeState, NumberFieldState, RadioGroupState, SearchFieldState, SelectState, SliderState, ToggleState, DisabledBehavior, SortDirection, TableState, TabListState, TooltipTriggerProps, TooltipTriggerState } from "react-stately";
import { AriaLinkOptions, HoverEvents, AriaBreadcrumbsProps, AriaButtonProps, CalendarProps as _CalendarProps1, RangeCalendarProps as _RangeCalendarProps1, DateValue, AriaCheckboxGroupProps, AriaCheckboxProps, HoverProps, DropIndicatorProps as _DropIndicatorProps1, DraggableCollectionOptions, DraggableItemProps, DraggableItemResult, DragItem, DragPreview, DropIndicatorAria, DroppableCollectionOptions, DroppableCollectionResult, DroppableItemOptions, DroppableItemResult, DropTarget, DropTargetDelegate, ListDropTargetDelegate, SeparatorProps as _SeparatorProps1, AriaListBoxProps, PlacementAxis, AriaPopoverProps, PositionProps, AriaDialogProps, AriaComboBoxProps, AriaDateFieldProps, AriaTimeFieldProps, TimeValue, AriaDatePickerProps, AriaDateRangePickerProps, DropOptions, AriaGridListProps, AriaMenuProps, AriaMeterProps, AriaModalOverlayProps, AriaNumberFieldProps, AriaProgressBarProps, AriaRadioGroupProps, AriaRadioProps, Orientation as _Orientation1, AriaSearchFieldProps, AriaSelectProps, AriaSliderProps, AriaSliderThumbProps, AriaSwitchProps, AriaTabListProps, AriaTabPanelProps, AriaTagGroupProps, AriaTextFieldProps, AriaToggleButtonProps } from "react-aria";
import { CalendarDate, DateDuration } from "@internationalized/date";
import { FormProps as _FormProps1 } from "@react-types/form";
import { RootMenuTriggerState } from "@react-stately/menu";
import { TableColumnResizeState } from "@react-stately/table";
import { ColumnSize, ColumnStaticSize, TableProps as _TableProps1 } from "@react-types/table";
import { AriaToolbarProps } from "@react-aria/toolbar";
declare const slotCallbackSymbol: unique symbol;
interface SlottedValue<T> {
    slots?: Record<string | symbol, T>;
    [slotCallbackSymbol]?: (value: T) => void;
}
type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
export type ContextValue<T, E extends Element> = SlottedContextValue<WithRef<T, E>>;
type ProviderValue<T> = [Context<T>, T];
type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> = [ProviderValue<A>] | [ProviderValue<A>, ProviderValue<B>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>];
interface ProviderProps<A, B, C, D, E, F, G, H, I, J, K> {
    values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K>;
    children: ReactNode;
}
export function Provider<A, B, C, D, E, F, G, H, I, J, K>({ values, children }: ProviderProps<A, B, C, D, E, F, G, H, I, J, K>): JSX.Element;
interface StyleProps {
    /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
    className?: string;
    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
    style?: CSSProperties;
}
interface DOMProps extends StyleProps, _DOMProps1 {
    /** The children of the component. */
    children?: ReactNode;
}
interface ScrollableProps<T extends Element> {
    /** Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). */
    onScroll?: (e: UIEvent<T>) => void;
}
interface StyleRenderProps<T> {
    /** 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. */
    className?: string | ((values: T) => string);
    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
    style?: CSSProperties | ((values: T) => CSSProperties);
}
interface RenderProps<T> extends StyleRenderProps<T> {
    /** The children of the component. A function may be provided to alter the children based on component state. */
    children?: ReactNode | ((values: T) => ReactNode);
}
/**
 * A helper function that accepts a user-provided render prop value (either a static value or a function),
 * and combines it with another value to create a final result.
 */
export function composeRenderProps<T, U, V extends T>(value: T extends any ? (T | ((renderProps: U) => V)) : never, wrap: (prevValue: T, renderProps: U) => V): (renderProps: U) => V;
type WithRef<T, E> = T & {
    ref?: ForwardedRef<E>;
};
export interface SlotProps {
    /**
     * A slot name for the component. Slots allow the component to receive props from a parent component.
     * An explicit `null` value indicates that the local props completely override all props received from a parent.
     */
    slot?: string | null;
}
export function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined;
export function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E>];
interface RACValidation {
    /**
     * Whether to use native HTML form validation to prevent form submission
     * when the value is missing or invalid, or mark the field as required
     * or invalid via ARIA.
     * @default 'native'
     */
    validationBehavior?: 'native' | 'aria';
}
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?: any[];
}
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<_SectionProps1<T>, 'children' | 'title'>, StyleProps {
    /** 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?: any[];
}
export const Section: <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/** A Collection renders a list of items, automatically managing caching and keys. */
export function Collection<T extends object>(props: CollectionProps<T>): JSX.Element;
export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps {
}
export interface LinkRenderProps {
    /**
     * Whether the link is the current item within a list.
     * @selector [data-current]
     */
    isCurrent: boolean;
    /**
     * Whether the link is currently hovered with a mouse.
     * @selector [data-hovered]
     */
    isHovered: boolean;
    /**
     * Whether the link is currently in a pressed state.
     * @selector [data-pressed]
     */
    isPressed: boolean;
    /**
     * Whether the link is focused, either via a mouse or keyboard.
     * @selector [data-focused]
     */
    isFocused: boolean;
    /**
     * Whether the link is keyboard focused.
     * @selector [data-focus-visible]
     */
    isFocusVisible: boolean;
    /**
     * Whether the link is disabled.
     * @selector [data-disabled]
     */
    isDisabled: boolean;
}
export const LinkContext: React.Context<ContextValue<LinkProps, HTMLAnchorElement>>;
/**
 * A link allows a user to navigate to another page or resource within a web page
 * or application.
 */
export const Link: (props: LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps {
    /** Whether the breadcrumbs are disabled. */
    isDisabled?: boolean;
    /** Handler that is called when a breadcrumb is clicked. */
    onAction?: (key: Key) => void;
}
export const BreadcrumbsContext: React.Context<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>;
/**
 * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
 */
export const Breadcrumbs: <T extends object>(props: BreadcrumbsProps<T> & React.RefAttributes<HTMLOListElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface BreadcrumbProps extends StyleProps {
    /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */
    id?: Key;
    /** The children of the breadcrumb, typically a `<Link>`. */
    children: ReactNode;
}
/**
 * A Breadcrumb represents an individual item in a `<Breadcrumbs>` list.
 */
export const Breadcrumb: (props: BreadcrumbProps & React.RefAttributes<HTMLLIElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
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;
}
export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps> {
    /**
     * The <form> element to associate the button with.
     * The value of this attribute must be the id of a <form> in the same document.
     */
    form?: string;
    /**
     * The URL that processes the information submitted by the button.
     * Overrides the action attribute of the button's form owner.
     */
    formAction?: string;
    /** Indicates how to encode the form data that is submitted. */
    formEncType?: string;
    /** Indicates the HTTP method used to submit the form. */
    formMethod?: string;
    /** Indicates that the form is not to be validated when it is submitted. */
    formNoValidate?: boolean;
    /** Overrides the target attribute of the button's form owner. */
    formTarget?: string;
    /** Submitted as a pair with the button's value as part of the form data. */
    name?: string;
    /** The value associated with the button's name when it's submitted with the form data. */
    value?: string;
}
interface ButtonContextValue extends ButtonProps {
    isPressed?: boolean;
}
export const ButtonContext: React.Context<ContextValue<ButtonContextValue, HTMLButtonElement>>;
/**
 * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
 */
export const Button: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface HeadingProps extends HTMLAttributes<HTMLElement> {
    level?: number;
}
export const HeadingContext: React.Context<ContextValue<HeadingProps, HTMLHeadingElement>>;
export const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
export interface TextProps extends HTMLAttributes<HTMLElement> {
    elementType?: string;
}
export const TextContext: React.Context<ContextValue<TextProps, HTMLElement>>;
export const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
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<_CalendarProps1<T>, 'errorMessage' | 'validationState'>, RenderProps<CalendarRenderProps>, SlotProps {
    /**
     * The amount of days that will be displayed at once. This affects how pagination works.
     * @default {months: 1}
     */
    visibleDuration?: DateDuration;
}
export interface RangeCalendarProps<T extends DateValue> extends Omit<_RangeCalendarProps1<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps>, SlotProps {
    /**
     * The amount of days that will be displayed at once. This affects how pagination works.
     * @default {months: 1}
     */
    visibleDuration?: DateDuration;
}
export const CalendarContext: React.Context<ContextValue<CalendarProps<any>, HTMLDivElement>>;
export const RangeCalendarContext: React.Context<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>;
export const CalendarStateContext: React.Context<CalendarState>;
export const RangeCalendarStateContext: React.Context<RangeCalendarState>;
/**
 * A calendar displays one or more date grids and allows users to select a single date.
 */
export const Calendar: <T extends DateValue>(props: CalendarProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/**
 * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
 */
export const RangeCalendar: <T extends DateValue>(props: RangeCalendarProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
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;
}
export interface CalendarGridProps extends StyleProps {
    /**
     * 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 const CalendarGrid: (props: CalendarGridProps & React.RefAttributes<HTMLTableElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface CalendarGridHeaderProps extends StyleProps {
    /** 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.
 */
export const CalendarGridHeader: (props: CalendarGridHeaderProps & React.RefAttributes<HTMLTableSectionElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface CalendarHeaderCellProps extends DOMProps {
}
/**
 * A calendar header cell displays a week day name at the top of a column within a calendar.
 */
export const CalendarHeaderCell: React.ForwardRefExoticComponent<CalendarHeaderCellProps & React.RefAttributes<HTMLTableCellElement>>;
export interface CalendarGridBodyProps extends StyleProps {
    /** 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.
 */
export const CalendarGridBody: (props: CalendarGridBodyProps & React.RefAttributes<HTMLTableSectionElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>, _HoverEvents1 {
    /** 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 const CalendarCell: (props: CalendarCellProps & React.RefAttributes<HTMLTableCellElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export const FieldErrorContext: React.Context<ValidationResult>;
export interface FieldErrorRenderProps extends ValidationResult {
}
export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps> {
}
/**
 * A FieldError displays validation errors for a form field.
 */
export const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLElement>>;
export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
    elementType?: string;
}
export const LabelContext: React.Context<ContextValue<LabelProps, HTMLLabelElement>>;
export const Label: (props: LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps {
}
export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps>, SlotProps {
}
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 const CheckboxGroupContext: React.Context<ContextValue<CheckboxGroupProps, HTMLDivElement>>;
export const CheckboxGroupStateContext: React.Context<CheckboxGroupState>;
export const CheckboxContext: React.Context<ContextValue<CheckboxProps, HTMLLabelElement>>;
/**
 * A checkbox allows a user to select multiple items from a list of individual items, or
 * to mark one individual item as selected.
 */
export const Checkbox: (props: CheckboxProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/**
 * A checkbox group allows a user to select multiple items from a list of options.
 */
export const CheckboxGroup: (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface GroupRenderProps {
    /**
     * Whether the group is currently hovered with a mouse.
     * @selector [data-hovered]
     */
    isHovered: boolean;
    /**
     * Whether an element within the group is focused, either via a mouse or keyboard.
     * @selector [data-focus-within]
     */
    isFocusWithin: boolean;
    /**
     * Whether an element within the group is keyboard focused.
     * @selector [data-focus-visible]
     */
    isFocusVisible: boolean;
    /**
     * Whether the group is disabled.
     * @selector [data-disabled]
     */
    isDisabled: boolean;
    /**
     * Whether the group is invalid.
     * @selector [data-invalid]
     */
    isInvalid: boolean;
}
export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style' | 'role' | 'slot'>, _DOMProps1, HoverProps, RenderProps<GroupRenderProps>, SlotProps {
    /** Whether the group is disabled. */
    isDisabled?: boolean;
    /** Whether the group is invalid. */
    isInvalid?: boolean;
    /**
     * An accessibility role for the group. By default, this is set to `'group'`.
     * Use `'region'` when the contents of the group is important enough to be
     * included in the page table of contents. Use `'presentation'` if the group
     * is visual only and does not represent a semantic grouping of controls.
     * @default 'group'
     */
    role?: 'group' | 'region' | 'presentation';
}
export const GroupContext: React.Context<ContextValue<GroupProps, HTMLDivElement>>;
/**
 * A group represents a set of related UI controls, and supports interactive states for styling.
 */
export const Group: (props: GroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface InputRenderProps {
    /**
     * Whether the input is currently hovered with a mouse.
     * @selector [data-hovered]
     */
    isHovered: boolean;
    /**
     * Whether the input is focused, either via a mouse or keyboard.
     * @selector [data-focused]
     */
    isFocused: boolean;
    /**
     * Whether the input is keyboard focused.
     * @selector [data-focus-visible]
     */
    isFocusVisible: boolean;
    /**
     * Whether the input is disabled.
     * @selector [data-disabled]
     */
    isDisabled: boolean;
    /**
     * Whether the input is invalid.
     * @selector [data-invalid]
     */
    isInvalid: boolean;
}
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {
}
export const InputContext: React.Context<ContextValue<InputProps, HTMLInputElement>>;
/**
 * An input allows a user to input text.
 */
export const Input: (props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {
}
interface DragHooks {
    useDraggableCollectionState?: (props: DraggableCollectionStateOpts) => DraggableCollectionState;
    useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement>) => void;
    useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult;
    DragPreview?: typeof DragPreview;
    renderDragPreview?: (items: DragItem[]) => JSX.Element;
}
interface DropHooks {
    useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState;
    useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableCollectionResult;
    useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableItemResult;
    useDropIndicator?: (props: _DropIndicatorProps1, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DropIndicatorAria;
    renderDropIndicator?: (target: DropTarget) => JSX.Element;
    dropTargetDelegate?: DropTargetDelegate;
    ListDropTargetDelegate: typeof ListDropTargetDelegate;
}
export type DragAndDropHooks = DragHooks & DropHooks;
interface DragAndDrop {
    /** Drag and drop hooks for the collection element.  */
    dragAndDropHooks: DragAndDropHooks;
}
export interface DragAndDropOptions extends Omit<DraggableCollectionProps, 'preview' | 'getItems'>, DroppableCollectionProps {
    /**
     * A function that returns the items being dragged. If not specified, we assume that the collection is not draggable.
     * @default () => []
     */
    getItems?: (keys: Set<Key>) => DragItem[];
    /**
     * A function that renders a drag preview, which is shown under the user's cursor while dragging.
     * By default, a copy of the dragged element is rendered.
     */
    renderDragPreview?: (items: DragItem[]) => JSX.Element;
    /**
     * A function that renders a drop indicator element between two items in a collection.
     * This should render a `<DropIndicator>` element. If this function is not provided, a
     * default DropIndicator is provided.
     */
    renderDropIndicator?: (target: DropTarget) => JSX.Element;
    /** A custom delegate object that provides drop targets for pointer coordinates within the collection. */
    dropTargetDelegate?: DropTargetDelegate;
}
/**
 * Provides the hooks required to enable drag and drop behavior for a drag and drop compatible collection component.
 */
export function useDragAndDrop(options: DragAndDropOptions): DragAndDrop;
export const DropIndicatorContext: React.Context<DropIndicatorContextValue>;
interface DropIndicatorRenderProps {
    /**
     * Whether the drop indicator is currently the active drop target.
     * @selector [data-drop-target]
     */
    isDropTarget: boolean;
}
export interface DropIndicatorProps extends _DropIndicatorProps1, RenderProps<DropIndicatorRenderProps> {
}
interface DropIndicatorContextValue {
    render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode;
}
/**
 * A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted.
 */
export const DropIndicator: React.ForwardRefExoticComponent<DropIndicatorProps & React.RefAttributes<HTMLElement>>;
interface DragAndDropContextValue {
    dragAndDropHooks?: DragAndDropHooks;
    dragState?: DraggableCollectionState;
    dropState?: DroppableCollectionState;
}
export const DragAndDropContext: React.Context<DragAndDropContextValue>;
export const HeaderContext: React.Context<ContextValue<React.HTMLAttributes<HTMLElement>, HTMLElement>>;
export const Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
export interface SeparatorProps extends _SeparatorProps1, StyleProps, SlotProps {
}
export const SeparatorContext: React.Context<ContextValue<SeparatorProps, HTMLElement>>;
export const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLElement>>;
export interface ListBoxRenderProps {
    /**
     * Whether the listbox has no items and should display its empty state.
     * @selector [data-empty]
     */
    isEmpty: boolean;
    /**
     * Whether the listbox is currently focused.
     * @selector [data-focused]
     */
    isFocused: boolean;
    /**
     * Whether the listbox is currently keyboard focused.
     * @selector [data-focus-visible]
     */
    isFocusVisible: boolean;
    /**
     * Whether the listbox is currently the active drop target.
     * @selector [data-drop-target]
     */
    isDropTarget: boolean;
    /**
     * Whether the items are arranged in a stack or grid.
     * @selector [data-layout="stack | grid"]
     */
    layout: 'stack' | 'grid';
    /**
     * State of the listbox.
     */
    state: ListState<unknown>;
}
export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
    /** How multiple selection should behave in the collection. */
    selectionBehavior?: SelectionBehavior;
    /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListBox. */
    dragAndDropHooks?: DragAndDropHooks;
    /** Provides content to display when there are no items in the list. */
    renderEmptyState?: (props: ListBoxRenderProps) => ReactNode;
    /**
     * Whether the items are arranged in a stack or grid.
     * @default 'stack'
     */
    layout?: 'stack' | 'grid';
    /**
     * The primary orientation of the items. Usually this is the
     * direction that the collection scrolls.
     * @default 'vertical'
     */
    orientation?: Orientation;
}
export const ListBoxContext: React.Context<ContextValue<ListBoxProps<any>, HTMLDivElement>>;
export const ListStateContext: React.Context<ListState<any>>;
/**
 * A listbox displays a list of options and allows a user to select one or more of them.
 */
export const ListBox: <T extends object>(props: ListBoxProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface ListBoxItemRenderProps extends ItemRenderProps {
}
export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps {
    /** The unique id of the item. */
    id?: Key;
    /** The object value that this item represents. When using dynamic collections, this is set automatically. */
    value?: T;
    /** A string representation of the item's contents, used for features like typeahead. */
    textValue?: string;
    /** An accessibility label for this item. */
    'aria-label'?: string;
}
/**
 * A ListBoxItem represents an individual option in a ListBox.
 */
export const ListBoxItem: <T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface OverlayArrowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>, RenderProps<OverlayArrowRenderProps> {
}
export interface OverlayArrowRenderProps {
    /**
     * The placement of the overlay relative to the trigger.
     * @selector [data-placement="left | right | top | bottom"]
     */
    placement: PlacementAxis;
}
/**
 * An OverlayArrow renders a custom arrow element relative to an overlay element
 * such as a popover or tooltip such that it aligns with a trigger element.
 */
export const OverlayArrow: (props: OverlayArrowProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'offset'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {
    /**
     * The name of the component that triggered the popover. This is reflected on the element
     * as the `data-trigger` attribute, and can be used to provide specific
     * styles for the popover depending on which element triggered it.
     */
    trigger?: string;
    /**
     * The ref for the element which the popover positions itself with respect to.
     *
     * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,
     * this is set automatically. It is only required when used standalone.
     */
    triggerRef?: RefObject<Element>;
    /**
     * Whether the popover is currently performing an entry animation.
     */
    isEntering?: boolean;
    /**
     * Whether the popover is currently performing an exit animation.
     */
    isExiting?: boolean;
    /**
     * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
     * @default document.body
     */
    UNSTABLE_portalContainer?: Element;
    /**
     * The additional offset applied along the main axis between the element and its
     * anchor element.
     * @default 8
     */
    offset?: number;
}
export interface PopoverRenderProps {
    /**
     * The name of the component that triggered the popover, e.g. "DialogTrigger" or "ComboBox".
     * @selector [data-trigger="..."]
     */
    trigger: string | null;
    /**
     * The placement of the popover relative to the trigger.
     * @selector [data-placement="left | right | top | bottom"]
     */
    placement: PlacementAxis;
    /**
     * Whether the popover is currently entering. Use this to apply animations.
     * @selector [data-entering]
     */
    isEntering: boolean;
    /**
     * Whether the popover is currently exiting. Use this to apply animations.
     * @selector [data-exiting]
     */
    isExiting: boolean;
}
export const PopoverContext: React.Context<ContextValue<PopoverProps, HTMLElement>>;
/**
 * A popover is an overlay element positioned relative to a trigger.
 */
export const Popover: (props: PopoverProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface DialogTriggerProps extends OverlayTriggerProps {
    children: ReactNode;
}
interface DialogRenderProps {
    close: () => void;
}
export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps {
    /** Children of the dialog. A function may be provided to access a function to close the dialog. */
    children?: ReactNode | ((opts: DialogRenderProps) => ReactNode);
}
export const DialogContext: React.Context<ContextValue<DialogProps, HTMLElement>>;
export const OverlayTriggerStateContext: React.Context<OverlayTriggerState>;
/**
 * A DialogTrigger opens a dialog when a trigger element is pressed.
 */
export function DialogTrigger(props: DialogTriggerProps): React.JSX.Element;
/**
 * A dialog is an overlay shown above other content in an application.
 */
export const Dialog: (props: DialogProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
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;
}
export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps {
    /** 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';
}
export const ComboBoxContext: React.Context<ContextValue<ComboBoxProps<any>, HTMLDivElement>>;
export const ComboBoxStateContext: React.Context<ComboBoxState<any>>;
/**
 * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
 */
export const ComboBox: <T extends object>(props: ComboBoxProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
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;
}
export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps {
}
export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps {
}
export const DateFieldContext: React.Context<ContextValue<DateFieldProps<any>, HTMLDivElement>>;
export const TimeFieldContext: React.Context<ContextValue<TimeFieldProps<any>, HTMLDivElement>>;
export const DateFieldStateContext: React.Context<DateFieldState>;
export const TimeFieldStateContext: React.Context<TimeFieldState>;
/**
 * 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 const DateField: <T extends DateValue>(props: DateFieldProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/**
 * 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 const TimeField: <T extends TimeValue>(props: TimeFieldProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
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> {
    children: (segment: _DateSegment1) => ReactElement;
}
/**
 * A date input groups the editable date segments within a date field.
 */
export const DateInput: (props: DateInputProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export interface DateSegmentRenderProps extends Omit<_DateSegment1, '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>, HoverEvents {
    segment: _DateSegment1;
}
/**
 * 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 const DateSegment: (props: DateSegmentProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
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 invalid.
     * @selector [data-invalid]
     */
    isInvalid: 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 {
}
export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {
}
export const DatePickerContext: React.Context<ContextValue<DatePickerProps<any>, HTMLDivElement>>;
export const DateRangePickerContext: React.Context<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>;
export const DatePickerStateContext: React.Context<DatePickerState>;
export const DateRangePickerStateContext: React.Context<DateRangePickerState>;
/**
 * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
 */
export const DatePicker: <T extends DateValue>(props: DatePickerProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/**
 * A date range picker combines two DateFields and a RangeCalendar popover to allow
 * users to enter or select a date and time range.
 */
export const DateRangePicker: <T extends DateValue>(props: DateRangePickerProps<T> & React