import React from 'react';
import { View } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type { DotCountBaseProps } from '../dots/DotCount';
import { type BoxBaseProps } from '../layout/Box';
/**
 * @deprecated Use Tabs instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v10
 */
export type TabProps<TabId extends string | undefined = string> = SharedProps &
  Partial<Pick<DotCountBaseProps, 'max' | 'count'>> & {
    /** 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 */
    onPress?: (id: TabId) => void;
    /** Render a custom Component for the Tab */
    Component?: (props: CustomTabProps) => React.ReactNode;
  };
/**
 * @deprecated Use Tabs instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v10
 */
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;
};
/**
 * @deprecated Use Tabs instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v10
 */
export type TabNavigationBaseProps<TabId extends string | undefined = string> = BoxBaseProps &
  Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy'> &
  Pick<TabProps, '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;
    /** @danger This should only be used for accessibility purposes, eg: aria-controls https://accessibilityresources.org/aria-controls */
    id?: string;
  };
/**
 * @deprecated Use Tabs instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v10
 */
export type TabNavigationProps<TabId extends string | undefined = string> =
  TabNavigationBaseProps<TabId>;
type TabNavigationFC = <TabId extends string | undefined = string>(
  props: TabNavigationProps<TabId> & {
    ref?: React.ForwardedRef<View>;
  },
) => React.ReactElement;
/**
 * TabNavigation renders a horizontal, tab-based navigation bar.
 * This component has a opinionated default style, but allows for customization through custom Component props.
 * @deprecated Use `Tabs` instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v9
 */
export declare const TabNavigation: TabNavigationFC;
export {};
//# sourceMappingURL=TabNavigation.d.ts.map