import { AriaLabelingProps, FocusEvents, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents } from '@react-types/shared'; import { AriaTabListProps, AriaTabPanelProps } from 'react-aria/useTabList'; import { ClassNameOrFunction, ContextValue, DOMRenderProps, PossibleLinkDOMRenderProps, RenderProps, SlotProps, StyleProps, StyleRenderProps } from './utils'; import { CollectionProps } from './Collection'; import { Orientation } from '@react-types/shared'; import React from 'react'; import { TabListState } from 'react-stately/useTabListState'; export interface TabsProps extends Omit, 'items' | 'children'>, RenderProps, SlotProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Tabs' */ className?: ClassNameOrFunction; } export interface TabsRenderProps { /** * The orientation of the tabs. * @selector [data-orientation="horizontal | vertical"] */ orientation: Orientation; } export interface TabListProps extends StyleRenderProps, AriaLabelingProps, Omit, 'disabledKeys'>, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-TabList' */ className?: ClassNameOrFunction; } export interface TabListRenderProps { /** * The orientation of the tab list. * @selector [data-orientation="horizontal | vertical"] */ orientation: Orientation; /** * State of the tab list. */ state: TabListState; } export interface TabProps extends Omit, 'render'>, PossibleLinkDOMRenderProps<'div', TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents, FocusEvents, PressEvents, Omit, 'onClick'> { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-Tab' */ className?: ClassNameOrFunction; /** The unique id of the tab. */ id?: Key; /** Whether the tab is disabled. */ isDisabled?: boolean; } export interface TabRenderProps { /** * Whether the tab is currently hovered with a mouse. * @selector [data-hovered] */ isHovered: boolean; /** * Whether the tab is currently in a pressed state. * @selector [data-pressed] */ isPressed: boolean; /** * Whether the tab is currently selected. * @selector [data-selected] */ isSelected: boolean; /** * Whether the tab is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the tab is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * Whether the tab is disabled. * @selector [data-disabled] */ isDisabled: boolean; } export interface TabPanelProps extends AriaTabPanelProps, RenderProps, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. * @default 'react-aria-TabPanel' */ className?: ClassNameOrFunction; /** * Whether to mount the tab panel in the DOM even when it is not currently selected. * Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually. * @default false */ shouldForceMount?: boolean; } export interface TabPanelRenderProps { /** * Whether the tab panel is currently focused. * @selector [data-focused] */ isFocused: boolean; /** * Whether the tab panel is currently keyboard focused. * @selector [data-focus-visible] */ isFocusVisible: boolean; /** * Whether the tab panel is currently non-interactive. This occurs when the * `shouldForceMount` prop is true, and the corresponding tab is not selected. * @selector [data-inert] */ isInert: boolean; /** * Whether the tab panel is currently entering. Use this to apply animations. * @selector [data-entering] */ isEntering: boolean; /** * Whether the tab panel is currently exiting. Use this to apply animations. * @selector [data-exiting] */ isExiting: boolean; /** * State of the tab list. */ state: TabListState; } export declare const TabsContext: React.Context>; export declare const TabListStateContext: React.Context | null>; /** * Tabs organize content into multiple sections and allow users to navigate between them. */ export declare const Tabs: (props: TabsProps & React.RefAttributes) => React.ReactElement> | null; /** * A TabList is used within Tabs to group tabs that a user can switch between. * The ids of the items within the must match up with a corresponding item inside the . */ export declare const TabList: (props: TabListProps & React.RefAttributes) => React.ReactElement> | null; /** * A Tab provides a title for an individual item within a TabList. */ export declare const Tab: (props: TabProps & React.RefAttributes) => React.ReactElement> | null; export interface TabPanelsProps extends Omit, 'disabledKeys'>, StyleProps, DOMRenderProps<'div', undefined>, GlobalDOMAttributes { /** * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. * @default 'react-aria-TabPanels' */ className?: string; } /** * Groups multiple `` elements, and provides CSS variables for animated transitions. */ export declare const TabPanels: (props: TabPanelsProps & React.RefAttributes) => React.ReactElement> | null; /** * A TabPanel provides the content for a tab. */ export declare const TabPanel: (props: TabPanelProps & React.RefAttributes) => React.ReactElement> | null;