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

Spectrum 2 UI components in React

import React, { CSSProperties, ReactNode, Context, RefAttributes, ForwardRefExoticComponent, JSX, HTMLAttributeReferrerPolicy, ComponentType, FunctionComponent, SVGProps, RefObject, ReactElement, FormEvent, FormHTMLAttributes } from "react";
import { AriaLabelingProps, DOMProps, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps, FocusableRefValue, Key, LinkDOMProps, LoadingState, HelpTextProps, Orientation, ValueBase, AsyncLoadable, LabelPosition, InputDOMProps, RangeValue, LabelableProps } from "@react-types/shared";
import { ContextValue, SlotProps, ProgressBarProps as _ProgressBarProps1, FormProps as _FormProps1, LinkProps as _LinkProps1, ButtonProps as _ButtonProps1, DisclosurePanelProps as _DisclosurePanelProps1, DisclosureProps as _DisclosureProps1, RenderProps, 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, BreadcrumbProps as _BreadcrumbProps1, BreadcrumbsProps as _BreadcrumbsProps1, DialogTriggerProps as _DialogTriggerProps1, CalendarProps as _CalendarProps1, DateValue, GridListItemProps, GridListProps, CheckboxGroupProps as _CheckboxGroupProps1, ColorAreaProps as _ColorAreaProps1, ColorFieldProps as _ColorFieldProps1, InputProps, ColorSliderProps as _ColorSliderProps1, ColorSwatchProps as _ColorSwatchProps1, Color, ColorWheelProps as _ColorWheelProps1, ComboBoxProps as _ComboBoxProps1, ListBoxItemProps, ListBoxProps, SectionProps, DateFieldProps as _DateFieldProps1, DateRangePickerProps as _DateRangePickerProps1, DropZoneProps as _DropZoneProps1, MeterProps as _MeterProps1, NumberFieldProps as _NumberFieldProps1, SelectProps, RadioProps as _RadioProps1, RadioGroupProps as _RadioGroupProps1, RangeCalendarProps as _RangeCalendarProps2, 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, TimeFieldProps as _TimeFieldProps1, TimeValue, ToastOptions as _ToastOptions1, ToastRegionProps, ToggleButtonGroupProps as _ToggleButtonGroupProps1, ToggleButtonProps as _ToggleButtonProps1, TooltipProps as _TooltipProps1, TooltipTriggerComponentProps, TreeItemProps, TreeProps, TreeItemContentProps, TreeLoadMoreItemProps, DatePickerProps as _DatePickerProps1 } from "react-aria-components";
import { ColorScheme, Router } from "@react-types/provider";
import { Placement } from "@react-types/overlays";
import { TextFieldRef } from "@react-types/textfield";
import { RangeCalendarProps as _RangeCalendarProps1, CalendarProps as _CalendarProps2 } from "../";
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", "visibility"];
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;
    /** The static color style to apply. Useful when the ActionButtonGroup appears over a color background. */
    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 ProviderProps extends UnsafeStyles, DOMProps {
    /** 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 const ColorSchemeContext: Context<"light dark" | ColorScheme | null>;
/**
 * Provider is the container for all React Spectrum components.
 * It loads the font and sets the colorScheme, locale, and other application level settings.
 */
export function Provider(props: ProviderProps): JSX.Element;
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;
interface ImageSource {
    /**
     * A comma-separated list of image URLs and descriptors.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).
     */
    srcSet?: string | undefined;
    /**
     * The color scheme for this image source. Unlike `media`, this respects the `Provider` color scheme setting.
     */
    colorScheme?: 'light' | 'dark';
    /**
     * A media query describing when the source should render.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).
     */
    media?: string | undefined;
    /**
     * A list of source sizes that describe the final rendered width of the image.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).
     */
    sizes?: string | undefined;
    /**
     * The mime type of the image.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).
     */
    type?: string | undefined;
    /**
     * The intrinsic width of the image.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).
     */
    width?: number;
    /**
     * The intrinsic height of the image.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).
     */
    height?: number;
}
export interface ImageProps extends UnsafeStyles, SlotProps {
    /** The URL of the image or a list of conditional sources. */
    src?: string | ImageSource[];
    /** 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;
    /**
     * The intrinsic width of the image.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).
     */
    width?: number;
    /**
     * The intrinsic height of the image.
     * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).
     */
    height?: number;
    /** 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;
    /**
     * Associates the image with a microdata object.
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).
     */
    itemProp?: string;
}
interface ImageContextValue extends ImageProps {
    hidden?: boolean;
}
export const ImageContext: Context<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>;
/**
 * An image with support for skeleton loading and custom error states.
 */
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;
}
export interface IllustrationProps extends UnsafeStyles, SlotProps, AriaLabelingProps, DOMProps {
    'aria-hidden'?: boolean | 'false' | 'true';
    size?: 'S' | 'M' | 'L';
    styles?: StyleString<AllowedOverrides>;
}
export 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 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' | keyof GlobalDOMAttributes>, 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 ContentProps extends UnsafeStyles, SlotProps {
    children: ReactNode;
    styles?: StyleString;
    isHidden?: boolean;
    id?: string;
    itemProp?: string;
    itemScope?: boolean;
    itemType?: string;
    itemID?: string;
    itemRef?: string;
}
interface HeadingProps extends Omit<ContentProps, 'children'> {
    children: ReactNode;
    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' | keyof GlobalDOMAttributes>, 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 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' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {
    /** The content to display in the Button. */
    children: ReactNode;
}
export interface LinkButtonProps extends Omit<_LinkProps1, 'className' | 'style' | 'children' | 'onClick' | keyof GlobalDOMAttributes>, 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 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' | 'onClick' | keyof GlobalDOMAttributes>, 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' | keyof GlobalDOMAttributes>, 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 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 UnsafeStyles, DOMProps, SlotProps {
    /** The accordion item 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 accordion items.
     * @default 'regular'
     */
    density?: 'compact' | 'regular' | 'spacious';
    /** Whether the accordion should be displayed with a quiet style. */
    isQuiet?: boolean;
    /** Whether multiple accordion items can be expanded at the same time. */
    allowsMultipleExpanded?: boolean;
    /** Whether all accordion items are disabled. */
    isDisabled?: boolean;
    /** The currently expanded keys in the accordion (controlled). */
    expandedKeys?: Iterable<Key>;
    /** The initial expanded keys in the accordion (uncontrolled). */
    defaultExpandedKeys?: Iterable<Key>;
    /** Handler that is called when accordion items are expanded or collapsed. */
    onExpandedChange?: (keys: Set<Key>) => any;
}
export const AccordionContext: React.Context<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>;
/**
 * An accordion is a container for multiple accordion items.
 */
export const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface AccordionItemState {
    /** Whether the accordion item is currently expanded. */
    readonly isExpanded: boolean;
    /** Sets whether the accordion item is expanded. */
    setExpanded(isExpanded: boolean): void;
    /** Expand the accordion item. */
    expand(): void;
    /** Collapse the accordion item. */
    collapse(): void;
    /** Toggles the accordion item's visibility. */
    toggle(): void;
}
export interface AccordionItemRenderProps {
    /**
     * Whether the accordion item is expanded.
     * @selector [data-expanded]
     */
    isExpanded: boolean;
    /**
     * Whether the accordion item has keyboard focus.
     * @selector [data-focus-visible-within]
     */
    isFocusVisibleWithin: boolean;
    /**
     * Whether the accordion item is disabled.
     * @selector [data-disabled]
     */
    isDisabled: boolean;
    /**
     * State of the accordion item.
     */
    state: AccordionItemState;
}
export interface AccordionItemProps extends Omit<RenderProps<AccordionItemRenderProps>, 'className' | 'style'>, SlotProps, StyleProps {
    /**
     * The size of the accordion item.
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /**
     * The amount of space between the accordion item.
     * @default 'regular'
     */
    density?: 'compact' | 'regular' | 'spacious';
    /** Whether the accordion item should be displayed with a quiet style. */
    isQuiet?: boolean;
    /** The contents of the accordion item, consisting of a accordion item title and accordion item panel. */
    children: ReactNode;
    /** An id for the accordion item, matching the id used in `expandedKeys`. */
    id?: Key;
    /** Whether the accordion item is disabled. */
    isDisabled?: boolean;
    /** Handler that is called when the accordion item's expanded state changes. */
    onExpandedChange?: (isExpanded: boolean) => void;
    /** Whether the accordion item is expanded (controlled). */
    isExpanded?: boolean;
    /** Whether the accordion item is expanded by default (uncontrolled). */
    defaultExpanded?: boolean;
}
/**
 * A accordion item is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.
 */
export const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface AccordionItemTitleProps extends UnsafeStyles, DOMProps {
    /** The heading level of the accordion item title.
     *
     * @default 3
     */
    level?: number;
    /** The contents of the accordion item title. */
    children: React.ReactNode;
}
/**
 * An accordion item title consisting of a heading and a trigger button to expand/collapse the panel.
 */
export const AccordionItemTitle: React.ForwardRefExoticComponent<AccordionItemTitleProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps {
    /** The contents of the accordion item header. */
    children: React.ReactNode;
}
/**
 * A wrapper element for the accordion item title that can contain other elements not part of the trigger.
 */
export const AccordionItemHeader: React.ForwardRefExoticComponent<AccordionItemHeaderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface AccordionItemPanelProps extends UnsafeStyles, DOMProps, AriaLabelingProps {
    /** The contents of the accordion item panel. */
    children: React.ReactNode;
    /**
     * The accessibility role for the accordion item panel.
     * @default 'group'
     */
    role?: 'group' | 'region';
}
/**
 * An accordion item panel is a collapsible section of content that is hidden until the accordion item is expanded.
 */
export const AccordionItemPanel: React.ForwardRefExoticComponent<AccordionItemPanelProps & 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, StyleProps, DOMProps {
    /** 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>>>;
/**
 * Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.
 */
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' | 'onClick' | keyof GlobalDOMAttributes>, 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';
    /**
     * The orientation of the Divider.
     * @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' | keyof GlobalDOMAttributes>, 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 PopoverProps extends UnsafeStyles, Omit<_PopoverProps1, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition' | 'style' | 'className' | keyof GlobalDOMAttributes> {
    /**
     * The styles of the popover.
     */
    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';
}
type PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;
interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow' | 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<_DialogProps1, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {
    /**
     * The children of the popover.
     */
    children?: ReactNode;
    /**
     * The amount of padding around the contents of the dialog.
     * @default 'default'
     */
    padding?: 'default' | 'none';
    /** Spectrum-defined styles, returned by the `style()` macro. */
    styles?: PopoverStylesProp;
}
/**
 * A popover is an overlay element positioned relative to a trigger.
 */
export const Popover: ForwardRefExoticComponent<PopoverDialogProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
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' | keyof GlobalDOMAttributes>, 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 Omit<_MenuSectionProps1<T>, 'style' | 'className' | keyof GlobalDOMAttributes> {
    /**
     * The children of the menu section.
     */
    children?: ReactNode;
}
export function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode;
export interface MenuItemProps extends Omit<_MenuItemProps1, 'children' | 'style' | 'className' | 'onClick' | keyof GlobalDOMAttributes>, 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 function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element;
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 {
    /**
     * The size of the Menu.
     *
     * @default 'M'
     */
    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 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' | keyof GlobalDOMAttributes>, StyleProps {
    /**
     * Whether the Dialog is dismissible.
     */
    isDismissible?: boolean;
    /**
     * The size of the Dialog.
     *
     * @default 'M'
     */
    size?: 'S' | 'M' | 'L' | 'XL';
    /** 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.
     * @default 'confirmation'
     */
    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' | 'style' | 'className' | keyof GlobalDOMAttributes>, BreadcrumbsStyleProps, StyleProps {
    /** The children of the Breadcrumbs. */
    children: ReactNode | ((item: T) => 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<_BreadcrumbProps1, 'children' | 'style' | 'className' | 'autoFocus' | 'onClick' | keyof GlobalDOMAttributes>, 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;
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 {
    /**
     * The placement of the popover with respect to the action button.
     * @default 'bottom start'
     */
    placement?: Placement;
    /** 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 CalendarProps<T extends DateValue> extends Omit<_CalendarProps1<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
    /**
     * The error message to display when the calendar is invalid.
     */
    errorMessage?: ReactNode;
    /**
     * The number of months to display at once.
     * @default 1
     */
    visibleMonths?: number;
}
export const CalendarContext: React.Context<ContextValue<Partial<CalendarProps<any>>, HTMLDivElement>>;
/**
 * Calendars display a grid of days in one or more months and allow users to select a single date.
 */
export const Calendar: <T extends DateValue>(props: CalendarProps<T> & React.RefAttributes<HTMLDivElement>) => 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' | 'onClick' | keyof GlobalDOMAttributes>, 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>>>;
/**
 * A Card summarizes an object that a user can select or navigate to.
 */
export const Card: ForwardRefExoticComponent<CardProps & RefAttributes<DOMRefValue<HTMLDivElement>>>;
export interface CardPreviewProps extends UnsafeStyles, DOMProps {
    children: ReactNo