@clubmed/trident-ui/ui/tabs/Tabs.d.ts

Shared ClubMed React UI components

import { ComponentProps, ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren } from 'react';
import { TabsProvider } from '../contexts/TabControl';
import { Theme } from './theme';
type ProviderProps = ComponentProps<typeof TabsProvider>;
interface Props extends ProviderProps {
    className?: string;
    /**
     * Shrink the spacing between tabs and panels
     */
    compacted?: boolean;
}
export declare const Tabs: FunctionComponent<PropsWithChildren<Props>>;
interface TabsBodyProps {
    className?: string;
}
export declare const TabsBody: FunctionComponent<PropsWithChildren<TabsBodyProps>>;
interface TabPanelProps {
    className?: string;
    /**
     * Tab panel index<br/>
     * _Can be **0** or **1** indexed_
     */
    value: number;
    /**
     * on panel select handler
     */
    onSelect?: (context: {
        value: TabPanelProps['value'];
    }) => void;
}
export declare const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>>;
interface TabListProps {
    className?: string;
    /**
     * Remove filler placeholders
     */
    constrained?: boolean;
}
export declare const TabList: FunctionComponent<PropsWithChildren<TabListProps>>;
interface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
    /**
     * Tab Heading text
     */
    label?: string;
    /**
     * Tab heading index<br/>
     * _Can be **0** or **1** indexed_
     */
    value: number;
    /**
     * on tab select handler
     */
    onSelect?: (context: {
        value: TabProps['value'];
        label: TabProps['label'];
    }) => void;
    /**
     * Tab theme
     */
    theme?: Theme;
    /**
     * Heading type
     * _default: **h2**_
     */
    as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
}
export declare const Tab: FunctionComponent<PropsWithChildren<TabProps>>;
export {};