import React from 'react';
import type { ForwardedRef } from 'react';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { SharedProps } from '@coinbase/cds-common/types';
import { type DotCountBaseProps } from '../dots/DotCount';
import type { BoxBaseProps } from '../layout/Box';
export declare const tabNavigationTestId = 'tabNavigation';
export declare const tabNavigationPaddleLeftTestId = 'tabNavigationPaddleLeft';
export declare const tabNavigationPaddleRightTestId = 'tabNavigationPaddleRight';
export type TabProps<TabId extends string | undefined = string> = SharedProps &
  Partial<Pick<DotCountBaseProps, 'count' | 'max'>> & {
    /** The id should be a meaningful and useful identifier like "watchlist" or "forSale" */
    id: TabId;
    /** Define a label for this Tab */
    label: React.ReactNode;
    /** See the Tabs TDD to understand which variant should be used.
     *  @default 'primary'
     */
    variant?: 'primary' | 'secondary';
    /** Disable interactions on the tab. */
    disabled?: boolean;
    /** Full length accessibility label when the child text is not descriptive enough. */
    accessibilityLabel?: string;
    /** Callback to fire when pressed */
    onClick?: (id: TabId) => void;
    /** Render a custom Component for the Tab */
    Component?: (props: CustomTabProps) => React.ReactNode;
  };
export type CustomTabProps = Pick<TabProps, 'id'> & {
  /**
   * @default false
   * When true, used to surface an active state for the currently selected tab
   */
  active?: boolean;
  /** Define a label for this Tab */
  label?: React.ReactNode;
};
export type TabNavigationBaseProps<TabId extends string | undefined = string> = SharedProps &
  BoxBaseProps &
  Pick<TabProps<TabId>, 'variant' | 'Component'> & {
    /** The active tabId
     *  @default tabs[0].id
     */
    value?: TabId;
    /** Children should be TabLabels. If you only have one child, don't use tabs 🤪 */
    tabs: TabProps<TabId>[];
    /** Use the onChange handler to deal with any side effects, ie event tracking or showing a tooltip */
    onChange: ((tabId: TabId) => void) | React.Dispatch<React.SetStateAction<TabId>>;
    /** This should always match the background color of the parent container
     * @default: 'bg'
     */
    background?: ThemeVars.Color;
    /**
     * The spacing between Tabs
     * @default 4
     */
    gap?: ThemeVars.Space;
    /**
     * Used to generate a11y attributes for the Tabs
     * If TabNavigation is used to display options that will filter data, use `radiogroup`
     * If TabNavigation is used to display a list of pages or views, use `tablist`
     * @default tablist
     */
    role?: 'radiogroup' | 'tablist';
    /**
     * Web only. Accessibility label for the previous arrow paddle (skip to beginning).
     */
    previousArrowAccessibilityLabel?: string | undefined;
    /**
     * Web only. Accessibility label for the next arrow paddle (skip to end).
     */
    nextArrowAccessibilityLabel?: string | undefined;
    /**
     * Web only. Styling for the paddle icon buttons. Mobile does not have paddles.
     */
    paddleStyle?: React.CSSProperties;
  };
export type TabNavigationProps<TabId extends string | undefined = string> =
  TabNavigationBaseProps<TabId>;
type TabNavigationFC = <TabId extends string | undefined = string>(
  props: TabNavigationProps<TabId> & {
    ref?: ForwardedRef<HTMLElement | null>;
  },
) => React.ReactElement;
export declare const TabNavigation: TabNavigationFC;
export {};
//# sourceMappingURL=TabNavigation.d.ts.map