import React from 'react'; import { BoxSystemProps } from './Box'; import { StyleConfig, PartStyles } from '../utils/styleConfig'; export declare type TabsParts = { tabs: ''; list: ''; tab: 'first' | 'last' | 'hover' | 'focus' | 'active' | 'selected' | 'disabled'; panel: 'focus'; }; declare type TabsDOMProps = Omit, 'onSelect'>; declare type TabsStyleProp = { styleConfig?: StyleConfig; }; declare type TabsSystemProps = BoxSystemProps; declare type TabsOwnProps = { /** The id of the selected tab, if controlled */ selectedId?: string; /** The id of the tab to select by default, if uncontrolled */ defaultSelectedId?: string; /** A function called when a new tab is selected */ onSelect?: (id?: string) => void; /** * The orientation the tabs are layed out. * Mainly so arrow navigation is done accordingly (left & right vs. up & down) * (default: horizontal) */ orientation?: React.AriaAttributes['aria-orientation']; /** Whether a tab is activated automatically or manually (default: automatic) */ activationMode?: 'automatic' | 'manual'; /** Whether tab navigation loops around or not (default: true) */ shouldLoop?: boolean; }; export declare type TabsProps = TabsDOMProps & TabsStyleProp & TabsSystemProps & TabsOwnProps & { as?: React.ElementType; }; export declare const Tabs: React.ForwardRefExoticComponent & React.RefAttributes>; export declare type TabListProps = TabsSystemProps & React.ComponentPropsWithRef<'div'>; export declare const TabList: React.ForwardRefExoticComponent & React.RefAttributes>; export declare type TabProps = TabsSystemProps & React.ComponentPropsWithRef<'div'> & { id: string; disabled?: boolean; }; export declare const Tab: React.ForwardRefExoticComponent & React.RefAttributes>; export declare type TabPanelProps = TabsSystemProps & React.ComponentPropsWithRef<'div'> & { id: string; }; export declare const TabPanel: React.ForwardRefExoticComponent & React.RefAttributes>; export declare const TabsPart: import("styled-components").StyledComponent<"div", any, { 'data-part-id': string; } & import("@modulz/radix-system").SpaceSetProps & import("@modulz/radix-system").SxProp & { orientation?: TabsProps['orientation']; tabsStyles?: PartStyles<""> | undefined; }, "data-part-id">; export declare const TabListPart: import("styled-components").StyledComponent<"div", any, { 'data-part-id': string; } & import("@modulz/radix-system").SpaceSetProps & import("@modulz/radix-system").SxProp & { tabListStyles?: PartStyles<""> | undefined; }, "data-part-id">; export declare const TabPart: import("styled-components").StyledComponent<"div", any, { 'data-part-id': string; } & import("@modulz/radix-system").SpaceSetProps & import("@modulz/radix-system").SxProp & { isSelected?: boolean | undefined; tabStyles?: PartStyles<"first" | "last" | "hover" | "focus" | "active" | "selected" | "disabled"> | undefined; }, "data-part-id">; export declare const TabPanelPart: import("styled-components").StyledComponent<"div", any, { 'data-part-id': string; } & import("@modulz/radix-system").SpaceSetProps & import("@modulz/radix-system").SxProp & { tabPanelStyles?: PartStyles<"focus"> | undefined; }, "data-part-id">; export {};