@react-spectrum/s2/dist/types.d.ts

Spectrum 2 UI components in React

import React, { CSSProperties, ReactNode, Context, RefAttributes, ForwardRefExoticComponent, HTMLAttributeReferrerPolicy, ComponentType, FunctionComponent, SVGProps, RefObject, JSX, ReactElement } from "react";
import { AriaLabelingProps, DOMProps, DOMRefValue, SpectrumLabelableProps, FocusableRefValue, LinkDOMProps, Key, LoadingState, HelpTextProps, Orientation, ValueBase, AsyncLoadable, LabelPosition, InputDOMProps, RangeValue } from "@react-types/shared";
import { ContextValue, SlotProps, FormProps as _FormProps1, ButtonProps as _ButtonProps1, DisclosurePanelProps as _DisclosurePanelProps1, DisclosureProps as _DisclosureProps1, DisclosureGroupProps, CheckboxProps as _CheckboxProps1, SeparatorProps, PopoverProps as _PopoverProps1, DialogProps as _DialogProps1, MenuItemProps as _MenuItemProps1, MenuProps as _MenuProps1, MenuSectionProps as _MenuSectionProps1, MenuTriggerProps as _MenuTriggerProps1, SubmenuTriggerProps as _SubmenuTriggerProps1, ProgressBarProps as _ProgressBarProps1, LinkProps as _LinkProps1, BreadcrumbsProps as _BreadcrumbsProps1, GridListItemProps, GridListProps, DialogTriggerProps as _DialogTriggerProps1, CheckboxGroupProps as _CheckboxGroupProps1, ColorAreaProps as _ColorAreaProps1, ColorFieldProps as _ColorFieldProps1, ColorSliderProps as _ColorSliderProps1, ColorSwatchProps as _ColorSwatchProps1, Color, ColorWheelProps as _ColorWheelProps1, ComboBoxProps as _ComboBoxProps1, ListBoxItemProps, ListBoxProps, SectionProps, DropZoneProps as _DropZoneProps1, MeterProps as _MeterProps1, NumberFieldProps as _NumberFieldProps1, SelectProps, RadioProps as _RadioProps1, RadioGroupProps as _RadioGroupProps1, SliderProps as _SliderProps1, SearchFieldProps as _SearchFieldProps1, SwitchProps as _SwitchProps1, Key as _Key1, CellProps as _CellProps1, ColumnProps as _ColumnProps1, RowProps as _RowProps1, TableBodyProps as _TableBodyProps1, TableHeaderProps as _TableHeaderProps1, TableProps, TabListProps as _TabListProps1, TabPanelProps as _TabPanelProps1, TabProps as _TabProps1, TabsProps as _TabsProps1, TagGroupProps as _TagGroupProps1, TagProps as _TagProps1, TagListProps, TextFieldProps as _TextFieldProps1, ToastOptions as _ToastOptions1, ToastRegionProps, ToggleButtonGroupProps as _ToggleButtonGroupProps1, ToggleButtonProps as _ToggleButtonProps1, TooltipProps as _TooltipProps1, TooltipTriggerComponentProps, TreeItemProps, TreeProps, TreeItemContentProps } from "react-aria-components";
import { ColorScheme, Router } from "@react-types/provider";
import { AriaBreadcrumbItemProps } from "react-aria";
import { TextFieldRef } from "@react-types/textfield";
import { SpectrumDialogContainerProps } from "@react-types/dialog";
import { ColumnSize } from "@react-types/table";
type StyleString<P = string> = string & {
    properties: P;
};
declare const allowedOverrides: readonly ["margin", "marginStart", "marginEnd", "marginTop", "marginBottom", "marginX", "marginY", "flexGrow", "flexShrink", "flexBasis", "justifySelf", "alignSelf", "order", "gridArea", "gridRowStart", "gridRowEnd", "gridColumnStart", "gridColumnEnd", "position", "zIndex", "top", "bottom", "inset", "insetX", "insetY", "insetStart", "insetEnd"];
declare const widthProperties: readonly ["width", "minWidth", "maxWidth"];
declare const heightProperties: readonly ["size", "height", "minHeight", "maxHeight"];
type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
type UnsafeClassName = string & {
    properties?: never;
};
interface UnsafeStyles {
    /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
    UNSAFE_className?: UnsafeClassName;
    /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
    UNSAFE_style?: CSSProperties;
}
interface StyleProps extends UnsafeStyles {
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesProp;
}
export interface ActionButtonGroupProps extends AriaLabelingProps, UnsafeStyles, SlotProps {
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesPropWithHeight;
    /** The children of the group. */
    children: ReactNode;
    /**
     * Size of the buttons.
     * @default "M"
     */
    size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
    /**
     * Spacing between the buttons.
     * @default "regular"
     */
    density?: 'compact' | 'regular';
    /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
    isQuiet?: boolean;
    /** Whether the buttons should divide the container width equally. */
    isJustified?: boolean;
    /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
    staticColor?: 'white' | 'black' | 'auto';
    /**
     * The axis the group should align with.
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /** Whether the group is disabled. */
    isDisabled?: boolean;
}
export const ActionButtonGroupContext: Context<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>;
/**
 * An ActionButtonGroup is a grouping of related ActionButtons.
 */
export const ActionButtonGroup: ForwardRefExoticComponent<ActionButtonGroupProps & RefAttributes<HTMLDivElement>>;
export interface ImageCoordinatorProps {
    /** Children within the ImageCoordinator. */
    children: ReactNode;
    /**
     * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.
     * @default 5000
     */
    timeout?: number;
    /**
     * A group of images to coordinate between, matching the group passed to the `<Image>` component.
     * If not provided, the default image group is used.
     */
    group?: ImageGroup;
}
type ImageGroup = Context<ImageGroupValue>;
interface ImageGroupValue {
    revealAll: boolean;
    register(url: string): void;
    unregister(url: string): void;
    load(url: string): void;
}
/**
 * An ImageCoordinator coordinates loading behavior for a group of images.
 * Images within an ImageCoordinator are revealed together once all of them have loaded.
 */
export function ImageCoordinator(props: ImageCoordinatorProps): ReactNode;
export function useIsSkeleton(): boolean;
export interface SkeletonProps {
    children: ReactNode;
    isLoading: boolean;
}
/**
 * A Skeleton wraps around content to render it as a placeholder.
 */
export function Skeleton({ children, isLoading }: SkeletonProps): ReactNode;
export interface ImageProps extends UnsafeStyles, SlotProps {
    /** The URL of the image. */
    src?: string;
    /** Accessible alt text for the image. */
    alt?: string;
    /**
     * Indicates if the fetching of the image must be done using a CORS request.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).
     */
    crossOrigin?: 'anonymous' | 'use-credentials';
    /**
     * Whether the browser should decode images synchronously or asynchronously.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).
     */
    decoding?: 'async' | 'auto' | 'sync';
    /**
     * Provides a hint of the relative priority to use when fetching the image.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).
     */
    fetchPriority?: 'high' | 'low' | 'auto';
    /**
     * Whether the image should be loaded immediately or lazily when scrolled into view.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).
     */
    loading?: 'eager' | 'lazy';
    /**
     * A string indicating which referrer to use when fetching the resource.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).
     */
    referrerPolicy?: HTMLAttributeReferrerPolicy;
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StyleString;
    /** A function that is called to render a fallback when the image fails to load. */
    renderError?: () => ReactNode;
    /**
     * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.
     * If not provided, the default image group is used.
     */
    group?: ImageGroup;
}
interface ImageContextValue extends ImageProps {
    hidden?: boolean;
}
export const ImageContext: Context<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>;
export const Image: ForwardRefExoticComponent<ImageProps & RefAttributes<HTMLDivElement>>;
export interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {
    /** Text description of the avatar. */
    alt?: string;
    /** The image URL for the avatar. */
    src?: string;
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesPropWithoutWidth;
    /**
     * The size of the avatar.
     * @default 24
     */
    size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {});
    /** Whether the avatar is over a color background. */
    isOverBackground?: boolean;
}
export const AvatarContext: Context<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>;
/**
 * An avatar is a thumbnail representation of an entity, such as a user or an organization.
 */
export const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<DOMRefValue<HTMLImageElement>>>;
declare const _allowedOverrides1: readonly ["margin", "marginStart", "marginEnd", "marginTop", "marginBottom", "marginX", "marginY", "justifySelf", "alignSelf", "order", "gridArea", "gridRowStart", "gridRowEnd", "gridColumnStart", "gridColumnEnd", "position", "zIndex", "top", "bottom", "inset", "insetX", "insetY", "insetStart", "insetEnd", "rotate", "--iconPrimary", "size"];
type AllowedOverrides = Exclude<(typeof _allowedOverrides1)[number], '--iconPrimary' | 'size'>;
export interface IconProps extends UnsafeStyles, SlotProps, AriaLabelingProps, DOMProps {
    'aria-hidden'?: boolean | 'false' | 'true';
    styles?: StyleString<AllowedOverrides>;
}
export interface IconContextValue extends UnsafeStyles, SlotProps {
    styles?: StyleString;
    render?: (icon: ReactNode) => ReactNode;
}
interface IllustrationProps extends UnsafeStyles, SlotProps, AriaLabelingProps, DOMProps {
    'aria-hidden'?: boolean | 'false' | 'true';
    size?: 'S' | 'M' | 'L';
    styles?: StyleString<AllowedOverrides>;
}
interface IllustrationContextValue extends IconContextValue {
    size?: 'S' | 'M' | 'L';
}
export const IconContext: Context<ContextValue<Partial<IconContextValue>, SVGElement>>;
export const IllustrationContext: Context<ContextValue<Partial<IllustrationContextValue>, SVGElement>>;
export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, context?: Context<ContextValue<IconContextValue, SVGElement>>): FunctionComponent<IconProps>;
export function createIllustration(Component: ComponentType<SVGProps<SVGSVGElement>>): FunctionComponent<IllustrationProps>;
interface NotificationBadgeStyleProps {
    /**
     * The size of the notification badge.
     *
     * @default 'S'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
}
export interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {
    /**
     * The value to be displayed in the notification badge.
     */
    value?: number | null;
}
interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
    isDisabled?: boolean;
    staticColor?: 'black' | 'white' | 'auto';
}
export const NotificationBadgeContext: React.Context<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * Notification badges are used to indicate new or pending activity .
 */
export const NotificationBadge: React.ForwardRefExoticComponent<NotificationBadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export function pressScale<R extends {
    isPressed: boolean;
}>(ref: RefObject<HTMLElement | null>, style?: CSSProperties | ((renderProps: R) => CSSProperties)): (renderProps: R) => CSSProperties;
interface ContentProps extends UnsafeStyles, SlotProps {
    children: ReactNode;
    styles?: StyleString;
    isHidden?: boolean;
    id?: string;
}
interface HeadingProps extends ContentProps {
    level?: number;
}
export const HeadingContext: Context<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>;
export const Heading: ForwardRefExoticComponent<HeadingProps & RefAttributes<DOMRefValue<HTMLHeadingElement>>>;
export const HeaderContext: Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>;
export const Header: ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>>;
export const ContentContext: Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>;
export const Content: ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export const TextContext: Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>;
export const Text: ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>>;
export const KeyboardContext: Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>;
export const Keyboard: ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>>;
export const FooterContext: Context<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>;
export const Footer: ForwardRefExoticComponent<ContentProps & RefAttributes<DOMRefValue<HTMLElement>>>;
interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'contextualHelp'> {
    /**
     * Size of the Form elements.
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /** Whether the Form elements are disabled. */
    isDisabled?: boolean;
    /** Whether the Form elements are rendered with their emphasized style. */
    isEmphasized?: boolean;
}
export interface FormProps extends FormStyleProps, Omit<_FormProps1, 'className' | 'style' | 'children'>, StyleProps {
    children: ReactNode;
}
/**
 * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
 */
export const Form: ForwardRefExoticComponent<FormProps & RefAttributes<DOMRefValue<HTMLFormElement>>>;
interface ActionButtonStyleProps {
    /**
     * The size of the ActionButton.
     *
     * @default 'M'
     */
    size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
    /** The static color style to apply. Useful when the ActionButton appears over a color background. */
    staticColor?: 'black' | 'white' | 'auto';
    /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
    isQuiet?: boolean;
}
export interface ActionButtonProps extends Omit<_ButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending' | 'onClick'>, StyleProps, ActionButtonStyleProps {
    /** The content to display in the ActionButton. */
    children: ReactNode;
}
export const ActionButtonContext: Context<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
/**
 * ActionButtons allow users to perform an action.
 * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.
 */
export const ActionButton: ForwardRefExoticComponent<ActionButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
export interface DisclosureProps extends Omit<_DisclosureProps1, 'className' | 'style' | 'children'>, StyleProps {
    /**
     * The size of the disclosure.
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /**
     * The amount of space between the disclosures.
     * @default 'regular'
     */
    density?: 'compact' | 'regular' | 'spacious';
    /** Whether the disclosure should be displayed with a quiet style. */
    isQuiet?: boolean;
    /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */
    children: ReactNode;
}
export const DisclosureContext: React.Context<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
 */
export const Disclosure: React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
    /** The heading level of the disclosure header.
     *
     * @default 3
     */
    level?: number;
    /** The contents of the disclosure header. */
    children: React.ReactNode;
}
interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {
    children: React.ReactNode;
}
/**
 * A wrapper element for the disclosure title that can contain other elements not part of the trigger.
 */
export const DisclosureHeader: (props: DisclosureHeaderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null;
/**
 * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
 */
export const DisclosureTitle: React.ForwardRefExoticComponent<DisclosureTitleProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface DisclosurePanelProps extends Omit<_DisclosurePanelProps1, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {
    children: React.ReactNode;
}
/**
 * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
 */
export const DisclosurePanel: React.ForwardRefExoticComponent<DisclosurePanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface AccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, SlotProps {
    /** The disclosure elements in the accordion. */
    children: React.ReactNode;
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesPropWithHeight;
    /**
     * The size of the accordion.
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /**
     * The amount of space between the disclosure items.
     * @default 'regular'
     */
    density?: 'compact' | 'regular' | 'spacious';
    /** Whether the accordion should be displayed with a quiet style. */
    isQuiet?: boolean;
}
export const AccordionContext: React.Context<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * An accordion is a container for multiple disclosures.
 */
export const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface CloseButtonProps extends Pick<_ButtonProps1, 'isDisabled' | 'onPress'>, StyleProps {
    /**
     * The size of the CloseButton.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /** The static color style to apply. Useful when the Button appears over a color background. */
    staticColor?: 'white' | 'black' | 'auto';
}
/**
 * A CloseButton allows a user to dismiss a dialog.
 */
export const CloseButton: ForwardRefExoticComponent<CloseButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
export interface ActionBarProps extends SlotProps {
    /** A list of ActionButtons to display. */
    children: ReactNode;
    /** Whether the ActionBar should be displayed with a emphasized style. */
    isEmphasized?: boolean;
    /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */
    selectedItemCount?: number | 'all';
    /** Handler that is called when the ActionBar clear button is pressed. */
    onClearSelection?: () => void;
    /** A ref to the scrollable element the ActionBar appears above. */
    scrollRef?: RefObject<HTMLElement | null>;
}
export const ActionBarContext: Context<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>;
export const ActionBar: ForwardRefExoticComponent<ActionBarProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
interface CheckboxStyleProps {
    /**
     * The size of the Checkbox.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /** Whether the Checkbox should be displayed with an emphasized style. */
    isEmphasized?: boolean;
}
export interface CheckboxProps extends Omit<_CheckboxProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, CheckboxStyleProps {
    /** The label for the element. */
    children?: ReactNode;
}
export const CheckboxContext: Context<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>>;
/**
 * Checkboxes allow users to select multiple items from a list of individual items,
 * or to mark one individual item as selected.
 */
export const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>>;
interface DividerSpectrumProps {
    /**
     * How thick the Divider should be.
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L';
    /**
     * How thick the Divider should be.
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /** The static color style to apply. Useful when the Divider appears over a color background. */
    staticColor?: 'white' | 'black' | 'auto';
}
export interface DividerProps extends DividerSpectrumProps, Omit<SeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {
}
export const DividerContext: Context<ContextValue<Partial<DividerProps>, DOMRefValue<HTMLElement>>>;
/**
 * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
 * They can also be used to establish rhythm and hierarchy.
 */
export const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<DOMRefValue<HTMLElement>>>;
export interface ProviderProps extends UnsafeStyles {
    /** The content of the Provider. */
    children: ReactNode;
    /**
     * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.
     * Defaults to the browser/OS language setting.
     * @default 'en-US'
     */
    locale?: string;
    /**
     * Provides a client side router to all nested React Spectrum links to enable client side navigation.
     */
    router?: Router;
    /**
     * The color scheme for your application.
     * Defaults to operating system preferences.
     */
    colorScheme?: ColorScheme;
    /** The background for this provider. If not provided, the background is transparent. */
    background?: 'base' | 'layer-1' | 'layer-2';
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StyleString;
    /**
     * The DOM element to render.
     * @default div
     */
    elementType?: keyof JSX.IntrinsicElements;
}
export function Provider(props: ProviderProps): ReactNode;
export interface PopoverProps extends UnsafeStyles, Omit<_PopoverProps1, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition'> {
    styles?: StyleString;
    /**
     * Whether a popover's arrow should be hidden.
     *
     * @default false
     */
    hideArrow?: boolean;
    /**
     * The size of the Popover. If not specified, the popover fits its contents.
     */
    size?: 'S' | 'M' | 'L';
}
interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow' | 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<_DialogProps1, 'className' | 'style'>, StyleProps {
}
/**
 * A popover is an overlay element positioned relative to a trigger.
 */
export const Popover: ForwardRefExoticComponent<PopoverDialogProps & RefAttributes<DOMRefValue<HTMLElement>>>;
export interface MenuTriggerProps extends _MenuTriggerProps1 {
    /**
     * Alignment of the menu relative to the trigger.
     *
     * @default 'start'
     */
    align?: 'start' | 'end';
    /**
     * Where the Menu opens relative to its trigger.
     *
     * @default 'bottom'
     */
    direction?: 'bottom' | 'top' | 'left' | 'right' | 'start' | 'end';
    /**
     * Whether the menu should automatically flip direction when space is limited.
     *
     * @default true
     */
    shouldFlip?: boolean;
}
export interface MenuProps<T> extends Omit<_MenuProps1<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {
    /**
     * The size of the Menu.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /**
     * The contents of the collection.
     */
    children: ReactNode | ((item: T) => ReactNode);
    /** Hides the default link out icons on menu items that open links in a new tab. */
    hideLinkOutIcon?: boolean;
}
export const MenuContext: Context<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>;
/**
 * Menus display a list of actions or options that a user can choose.
 */
export const Menu: <T extends object>(props: MenuProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null;
export interface MenuSectionProps<T extends object> extends _MenuSectionProps1<T> {
}
export function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode;
export interface MenuItemProps extends Omit<_MenuItemProps1, 'children' | 'style' | 'className'>, StyleProps {
    /**
     * The contents of the item.
     */
    children: ReactNode;
}
export function MenuItem(props: MenuItemProps): ReactNode;
/**
 * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
 * linking the Menu's open state with the trigger's press state.
 */
export function MenuTrigger(props: MenuTriggerProps): ReactNode;
export interface SubmenuTriggerProps extends Omit<_SubmenuTriggerProps1, 'delay'> {
}
export const SubmenuTrigger: (props: SubmenuTriggerProps) => JSX.Element | null;
export interface ActionMenuProps<T> extends Pick<MenuTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'>, Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction'>, Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>, StyleProps, DOMProps, AriaLabelingProps {
    menuSize?: 'S' | 'M' | 'L' | 'XL';
}
export const ActionMenuContext: Context<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
/**
 * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
 */
export const ActionMenu: <T extends object>(props: ActionMenuProps<T> & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>) => React.ReactElement | null;
interface ProgressCircleStyleProps {
    /**
     * The size of the ProgressCircle.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L';
    /** The static color style to apply. Useful when the button appears over a color background. */
    staticColor?: 'black' | 'white' | 'auto';
    /**
     * Whether presentation is indeterminate when progress isn't known.
     */
    isIndeterminate?: boolean;
}
export const ProgressCircleContext: Context<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>;
export interface ProgressCircleProps extends Omit<_ProgressBarProps1, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesPropWithHeight;
}
/**
 * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
 * They can represent determinate or indeterminate progress.
 */
export const ProgressCircle: ForwardRefExoticComponent<ProgressCircleProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
interface ButtonStyleProps {
    /**
     * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.
     *
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai';
    /**
     * The background style of the Button.
     *
     * @default 'fill'
     */
    fillStyle?: 'fill' | 'outline';
    /**
     * The size of the Button.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /** The static color style to apply. Useful when the Button appears over a color background. */
    staticColor?: 'white' | 'black' | 'auto';
}
export interface ButtonProps extends Omit<_ButtonProps1, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, ButtonStyleProps {
    /** The content to display in the Button. */
    children: ReactNode;
}
export interface LinkButtonProps extends Omit<_LinkProps1, 'className' | 'style' | 'children' | 'onClick'>, StyleProps, ButtonStyleProps {
    /** The content to display in the Button. */
    children: ReactNode;
}
export const ButtonContext: Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
export const LinkButtonContext: Context<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
/**
 * Buttons allow users to perform an action.
 * They have multiple styles for various needs, and are ideal for calling attention to
 * where a user needs to do something in order to move forward in a flow.
 */
export const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
/**
 * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
 */
export const LinkButton: ForwardRefExoticComponent<LinkButtonProps & RefAttributes<FocusableRefValue<HTMLAnchorElement, HTMLAnchorElement>>>;
interface ButtonGroupStyleProps {
    /**
     * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent
     * any switching behaviors between 'vertical' and 'horizontal'.
     *
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * The alignment of the Buttons within the ButtonGroup.
     *
     * @default 'start'
     */
    align?: 'start' | 'end' | 'center';
    /**
     * The size of the Buttons within the ButtonGroup.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
}
export interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {
    /** The Buttons contained within the ButtonGroup. */
    children: ReactNode;
    /** Whether the Buttons in the ButtonGroup are all disabled. */
    isDisabled?: boolean;
}
interface ButtonGroupContextValue extends Partial<ButtonGroupProps> {
    /** Whether the ButtonGroup shouldn't be rendered. */
    isHidden?: boolean;
}
export const ButtonGroupContext: Context<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>;
/**
 * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
 */
export const ButtonGroup: ForwardRefExoticComponent<ButtonGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface DialogProps extends Omit<_DialogProps1, 'className' | 'style'>, StyleProps {
    /**
     * Whether the Dialog is dismissible.
     */
    isDismissible?: boolean;
    /**
     * The size of the Dialog.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L';
    /** Whether pressing the escape key to close the dialog should be disabled. */
    isKeyboardDismissDisabled?: boolean;
}
/**
 * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
 * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
 */
export const Dialog: ForwardRefExoticComponent<DialogProps & RefAttributes<DOMRefValue<HTMLElement>>>;
export interface AlertDialogProps extends DOMProps, UnsafeStyles {
    /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.  */
    variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning';
    /** The title of the AlertDialog. */
    title: string;
    /** The contents of the AlertDialog. */
    children: ReactNode;
    /** The label to display within the cancel button. */
    cancelLabel?: string;
    /** The label to display within the confirm button. */
    primaryActionLabel: string;
    /** The label to display within the secondary button. */
    secondaryActionLabel?: string;
    /** Whether the primary button is disabled. */
    isPrimaryActionDisabled?: boolean;
    /** Whether the secondary button is disabled. */
    isSecondaryActionDisabled?: boolean;
    /** Handler that is called when the cancel button is pressed. */
    onCancel?: () => void;
    /** Handler that is called when the primary button is pressed. */
    onPrimaryAction?: () => void;
    /** Handler that is called when the secondary button is pressed. */
    onSecondaryAction?: () => void;
    /** Button to focus by default when the dialog opens. */
    autoFocusButton?: 'cancel' | 'primary' | 'secondary';
    /**
     * The size of the Dialog.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L';
}
/**
 * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
 */
export const AlertDialog: ForwardRefExoticComponent<AlertDialogProps & RefAttributes<DOMRefValue<HTMLElement>>>;
export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {
    /** Avatar children of the avatar group. */
    children: ReactNode;
    /** The label for the avatar group. */
    label?: string;
    /**
     * The size of the avatar group.
     * @default 24
     */
    size?: 16 | 20 | 24 | 28 | 32 | 36 | 40;
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesPropWithoutWidth;
}
export const AvatarGroupContext: Context<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * An avatar group is a grouping of avatars that are related to each other.
 */
export const AvatarGroup: ForwardRefExoticComponent<AvatarGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
interface BadgeStyleProps {
    /**
     * The size of the badge.
     *
     * @default 'S'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /**
     * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.
     *
     * @default 'neutral'
     */
    variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver';
    /**
     * The fill of the badge.
     * @default 'bold'
     */
    fillStyle?: 'bold' | 'subtle' | 'outline';
    /**
     * Sets the text behavior for the contents.
     * @default 'wrap'
     */
    overflowMode?: 'wrap' | 'truncate';
}
export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {
    /**
     * The content to display in the badge.
     */
    children: ReactNode;
}
export const BadgeContext: React.Context<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
 */
export const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
interface BreadcrumbsStyleProps {
    /**
     * Size of the Breadcrumbs including spacing and layout.
     *
     * @default 'M'
     */
    size?: 'M' | 'L';
    /** Whether the breadcrumbs are disabled. */
    isDisabled?: boolean;
}
export interface BreadcrumbsProps<T> extends Omit<_BreadcrumbsProps1<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {
    /** The children of the Breadcrumbs. */
    children: ReactNode;
}
export const BreadcrumbsContext: Context<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>;
/** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
export const Breadcrumbs: <T extends object>(props: BreadcrumbsProps<T> & RefAttributes<DOMRefValue<HTMLOListElement>>) => React.ReactElement | null;
export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus' | 'onClick'>, LinkDOMProps {
    /** The children of the breadcrumb item. */
    children: ReactNode;
}
/** An individual Breadcrumb for Breadcrumbs. */
export const Breadcrumb: (props: BreadcrumbProps & RefAttributes<DOMRefValue<HTMLLIElement>>) => React.ReactElement | null;
interface CardRenderProps {
    /** The size of the Card. */
    size: 'XS' | 'S' | 'M' | 'L' | 'XL';
}
export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {
    /** The children of the Card. */
    children: ReactNode | ((renderProps: CardRenderProps) => ReactNode);
    /**
     * The size of the Card.
     * @default 'M'
     */
    size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
    /**
     * The amount of internal padding within the Card.
     * @default 'regular'
     */
    density?: 'compact' | 'regular' | 'spacious';
    /**
     * The visual style of the Card.
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
}
export const CardContext: Context<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>;
export const Card: ForwardRefExoticComponent<CardProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface CardPreviewProps extends UnsafeStyles, DOMProps {
    children: ReactNode;
}
export const CardPreview: ForwardRefExoticComponent<CardPreviewProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export const CollectionCardPreview: ForwardRefExoticComponent<CardPreviewProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface AssetCardProps extends Omit<CardProps, 'density'> {
}
export const AssetCard: ForwardRefExoticComponent<AssetCardProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {
    variant?: 'primary' | 'secondary' | 'tertiary';
}
export const UserCard: ForwardRefExoticComponent<CardProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {
    variant?: 'primary' | 'secondary' | 'tertiary';
}
export const ProductCard: ForwardRefExoticComponent<ProductCardProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'isLoading'>, UnsafeStyles {
    /**
     * The layout of the cards.
     * @default 'grid'
     */
    layout?: 'grid' | 'waterfall';
    /**
     * The size of the cards.
     * @default 'M'
     */
    size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
    /**
     * The amount of space between the cards.
     * @default 'regular'
     */
    density?: 'compact' | 'regular' | 'spacious';
    /**
     * The visual style of the cards.
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
    /**
     * How selection should be displayed.
     * @default 'checkbox'
     */
    selectionStyle?: 'checkbox' | 'highlight';
    /** The loading state of the CardView. */
    loadingState?: LoadingState;
    /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
    onLoadMore?: () => void;
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesPropWithHeight;
    /** Provides the ActionBar to render when cards are selected in the CardView. */
    renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;
}
export const CardViewContext: Context<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>;
export const CardView: <T extends object>(props: CardViewProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null;
export interface DialogTriggerProps extends _DialogTriggerProps1 {
}
/**
 * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
 * open state with the trigger's press state. Additionally, it allows you to customize the type and
 * positioning of the Dialog.
 */
export function DialogTrigger(props: DialogTriggerProps): ReactNode;
interface ContextualHelpStyleProps {
    /**
     * Indicates whether contents are informative or provides helpful guidance.
     *
     * @default 'help'
     */
    variant?: 'info' | 'help';
}
interface ContextualHelpProps extends Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>, Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>, ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {
    /** Contents of the Contextual Help popover. */
    children: ReactNode;
    /**
     * The size of the ActionButton.
     *
     * @default 'XS'
     */
    size?: 'XS' | 'S';
}
export const ContextualHelpContext: Context<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
/**
 * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
 */
export const ContextualHelp: ForwardRefExoticComponent<ContextualHelpProps & RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
export interface CheckboxGroupProps extends Omit<_CheckboxGroupProps1, 'className' | 'style' | 'children'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
    /**
     * The size of the Checkboxes in the CheckboxGroup.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /**
     * The axis the checkboxes should align with.
     *
     * @default 'vertical'
     */
    orientation?: Orientation;
    /**
     * The Checkboxes contained within the CheckboxGroup.
     */
    children: ReactNode;
    /**
     * By default, checkboxes are not emphasized (gray).
     * The emphasized (blue) version provides visual prominence.
     */
    isEmphasized?: boolean;
}
export const CheckboxGroupContext: Context<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * A CheckboxGroup allows users to select one or more items from a list of choices.
 */
export const CheckboxGroup: ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface ColorAreaProps extends Omit<_ColorAreaProps1, 'children' | 'className' | 'style'>, StyleProps {
}
export const ColorAreaContext: Context<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
 */
export const ColorArea: ForwardRefExoticComponent<ColorAreaProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface ColorFieldProps extends Omit<_ColorFieldProps1, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
    /**
     * The size of the color field.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
}
export const ColorFieldContext: Context<ContextValue<Partial<ColorFieldProps>, TextFieldRef<HTMLInputElement>>>;
/**
 * A color field allows users to edit a hex color or individual color channel value.
 */
export const ColorField: ForwardRefExoticComponent<ColorFieldProps & RefAttributes<TextFieldRef<HTMLInputElement>>>;
export interface ColorSliderProps extends Omit<_ColorSliderProps1, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {
    label?: string;
}
export const ColorSliderContext: Context<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * A ColorSlider allows users to adjust an individual channel of a color value.
 */
export const ColorSlider: ForwardRefExoticComponent<ColorSliderProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface ColorSwatchProps extends Omit<_ColorSwatchProps1, 'className' | 'style'>, UnsafeStyles {
    /**
     * The size of the ColorSwatch.
     * @default 'M'
     */
    size?: 'XS' | 'S' | 'M' | 'L';
    /**
     * The corner rounding of the ColorSwatch.
     * @default 'default'
     */
    rounding?: 'default' | 'none' | 'full';
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: StylesPropWithHeight;
}
export const ColorSwatchContext: Context<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * A ColorSwatch displays a preview of a selected color.
 */
export const ColorSwatch: ForwardRefExoticComponent<ColorSwatchProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {
    /** The ColorSwatches within the ColorSwatchPicker. */
    children: ReactNode;
    /**
     * The amount of padding between the swatches.
     * @default 'regular'
     */
    density?: 'compact' | 'regular' | 'spacious';
    /**
     * The size of the color swatches.
     * @default 'M'
     */
    size?: 'XS' | 'S' | 'M' | 'L';
    /**
     * The corner rounding of the color swatches.
     * @default 'none'
     */
    rounding?: 'none' | 'default' | 'full';
}
export const ColorSwatchPickerContext: Context<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
 */
export const ColorSwatchPicker: ForwardRefExoticComponent<ColorSwatchPickerProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface ColorWheelProps extends Omit<_ColorWheelProps1, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {
    /**
     * @default 192
     */
    size?: number;
}
export const ColorWheelContext: Context<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
 */
export const ColorWheel: ForwardRefExoticComponent<ColorWheelProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
interface ComboboxStyleProps {
    /**
     * The size of the Combobox.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
}
export interface ComboBoxProps<T extends object> extends Omit<_ComboBoxProps1<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>, ComboboxStyleProps, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<ListBoxProps<T>, 'items' | 'dependencies'>, Pick<_PopoverProps1, 'shouldFlip'>, Pick<AsyncLoadable, 'onLoadMore'> {
    /** The contents of the collection. */
    children: ReactNode | ((item: T) => ReactNode);
    /**
     * Direction the menu will render relative to the ComboBox.
     *
     * @default 'bottom'
     */
    direction?: 'bottom' | 'top';
    /**
     * Alignment of the menu relative to the input target.
     *
     * @default 'start'
     */
    align?: 'start' | 'end';
    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
    menuWidth?: number;
    /** The current loading state of the ComboBox. Determines whether or not the progress circle should be shown. */
    loadingState?: LoadingState;
}
export const ComboBoxContext: Context<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef<HTMLInputElement>>>;
/**
 * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
 */
export const ComboBox: <T extends object>(props: ComboBoxProps<T> & RefAttributes<TextFieldRef<HTMLInputElement>>) => React.ReactElement | null;
export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
    children: ReactNode;
}
export function ComboBoxItem(props: ComboBoxItemProps): ReactNode;
export interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {
}
export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode;
export interface CustomDialogProps extends Omit<_DialogProps1, 'className' | 'style'>, StyleProps {
    /**
     * The size of the Dialog.
     */
    size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover';
    /**
     * Whether the Dialog is dismissible.
     */
    isDismissible?: boolean;
    /** Whether pressing the escape key to close the dialog should be disabled. */
    isKeyboardDismissDisabled?: boolean;
    /**
     * The amount of padding around the contents of the dialog.
     * @default 'default'
     */