import { ReactNode } from 'react';
export declare const KUMO_TABS_VARIANTS: {
    readonly variant: readonly ["segmented", "underline"];
};
export declare const KUMO_TABS_DEFAULT_VARIANTS: {
    readonly variant: "segmented";
};
export declare const KUMO_TABS_STYLING: {
    readonly container: {
        readonly height: 34;
        readonly borderRadius: 8;
        readonly background: "color-accent";
        readonly padding: 1;
    };
    readonly tab: {
        readonly paddingX: 10;
        readonly verticalMargin: 1;
        readonly fontSize: 16;
        readonly fontWeight: 500;
        readonly borderRadius: 8;
        readonly activeColor: "text-color-surface";
        readonly inactiveColor: "text-color-label";
    };
    readonly indicator: {
        readonly background: "color-surface-secondary";
        readonly ring: "color-color-2";
        readonly borderRadius: 6;
        readonly shadow: "shadow-sm";
    };
};
export interface KumoTabsVariantsProps {
    variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];
}
export type TabsItem = {
    value: string;
    label: ReactNode;
    className?: string;
    /** Optional render function to customize the tab element (e.g., for links) */
    render?: (props: Record<string, unknown>) => React.ReactElement;
};
export type TabsProps = KumoTabsVariantsProps & {
    /** Array of tab items to render */
    tabs?: TabsItem[];
    /** Controlled value. When set, component becomes controlled. */
    value?: string;
    /** Default selected value for uncontrolled mode. Ignored when `value` is set. */
    selectedValue?: string;
    /** Callback fired when the active tab changes */
    onValueChange?: (value: string) => void;
    /**
     * When true, tabs are activated immediately upon receiving focus via arrow keys.
     * When false (default), tabs receive focus but require Enter/Space to activate.
     * Set to true for better keyboard UX in most cases.
     */
    activateOnFocus?: boolean;
    /** Additional class name for the root element */
    className?: string;
    /** Additional class name for the tab list element */
    listClassName?: string;
    /** Additional class name for the indicator element */
    indicatorClassName?: string;
};
export declare function Tabs({ tabs, value, selectedValue, onValueChange, activateOnFocus, className, listClassName, indicatorClassName, variant, }: TabsProps): import("react/jsx-runtime").JSX.Element | null;
//# sourceMappingURL=tabs.d.ts.map