retro-react/dist/esm/components/tabs/Tabs.d.ts

A React component library for building retro-style websites

/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
export declare type TabsChildren = React.ReactElement<TabProps> | React.ReactElement<TabContentProps>;
export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The default active tab label.
     *
     * @default undefined
     */
    defaultActiveTabLabel?: string;
    /**
     * The content of the tabs (only Tab and TabContent components).
     *
     * @default []
     */
    children: TabsChildren[];
}
/**
 * Tabs are used to group content together. Used with `Tab` and `TabContent` components.
 * `Tab` is used to create the tab header, and `TabContent` is used to create the tab content.
 * Both components have to have the same label. The first tab is active by default.
 *
 * The order of the `Tab` and `TabContent` components doesn't matter.
 *
 * Use arrow keys to navigate between tabs.
 *
 * @example
 * <Tabs>
 * 	<Tab label="Tab 1">
 * 		Content 1
 * 	</Tab>
 * 	<Tab label="Tab 2">
 * 		Content 2
 * 	</Tab>
 * 	<TabContent label="Tab 1">
 * 		Content 1
 * 	</TabContent>
 * 	<TabContent label="Tab 2">
 * 		Content 2
 * 	</TabContent>
 * </Tabs>
 */
export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
export interface TabProps extends React.HTMLAttributes<HTMLButtonElement> {
    /**
     *	The label of the tab. Has to match the id of the corresponding TabContent.
     */
    label: string;
    /**
     * Whether the tab is active.
     *
     *	@internal Used to set the active tab.
     */
    $isActive?: boolean;
    /**
     * The onClick handler of the tab.
     *
     * @default undefined
     */
    onClick?: () => void;
    /**
     * @internal Used to set the active tab label.
     */
    setActiveTabLabel?: (label: string) => void;
    sx?: ThemeUICSSObject;
}
/**
 * The tab header. Has to be used with `Tabs` component. Has to have the same label as the corresponding `TabContent`.
 *
 */
export declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
export interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The content of the tab.
     *
     * @default undefined
     */
    children?: React.ReactNode;
    /**
     * The label of the `TabContent` component. Has to match the label of the corresponding Tab.
     */
    label: string;
    sx?: ThemeUICSSObject;
}
/**
 * The content of the tab. Has to be a child of the `Tabs` component.
 * Pass the label of the `Tab` component as the `label` prop.
 *
 * The `label` prop has to match the label of the corresponding `Tab` component.
 */
export declare const TabContent: React.FC<TabContentProps>;