import { PropsWithChildren } from 'react';
import { IconProps } from '@shopify/checkout-ui-extensions';
export interface TabsProps {
    /** An array of tabs which make up the tabbed interface */
    tabs: (Tab | string)[];
    /** Zero-based index of selected tab */
    selected: number;
    /** Accessibility label for the tab list */
    ariaLabel: string;
    /** Whether or not the tab panel has a border */
    bordered?: boolean;
    /** Callback when tab is selected */
    onChange(selected: number): void;
}
/**
 * Tabs are used when there’s multiple ways to display the same information,
 * like a map or list view. When a buyer needs to make a choice, use the
 * OptionList component instead as Buyers are more likely to choose the
 * non-default option. Don’t hide important information in tabs. Limit to two
 * of three tabs and keep labels short to optimize for mobile.
 */
export declare function Tabs({ tabs, selected, ariaLabel, bordered, onChange, children, }: PropsWithChildren<TabsProps>): JSX.Element;
interface Tab {
    /** Display label */
    label: string;
    /** Display icon */
    icon?: IconProps['source'];
}
declare function Tab({ label, icon, index, selected: selectedIndex, onChange, id, }: Tab & Omit<TabsProps, 'tabs' | 'ariaLabel'> & {
    index: number;
    id: string;
}): JSX.Element;
export {};