import React from 'react';
import { type StyleProp, View, type ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import { type TabsOptions, type TabValue } from '@coinbase/cds-common/tabs/useTabs';
import { type Rect } from '@coinbase/cds-common/types/Rect';
import type { BoxBaseProps, BoxProps } from '../layout/Box';
import type { HStackProps } from '../layout/HStack';
export declare const tabsSpringConfig: {
  readonly mass: 0.15;
  readonly stiffness: 160;
  readonly damping: 10;
  readonly overshootClamping: true;
};
export type TabsActiveIndicatorProps = {
  activeTabRect: Rect;
} & BoxProps;
export type TabComponentProps<
  TabId extends string = string,
  TTab extends TabValue<TabId> = TabValue<TabId>,
> = Omit<TTab, 'Component' | 'id'> & {
  id: TabId;
  /**
   * Color when a tab is inactive.
   */
  color?: ThemeVars.Color;
  /**
   * Color when a tab is active.
   */
  activeColor?: ThemeVars.Color;
  style?: StyleProp<ViewStyle>;
};
export type TabComponent<
  TabId extends string = string,
  TTab extends TabValue<TabId> = TabValue<TabId>,
> = React.FC<TabComponentProps<TabId, TTab>>;
export type TabsActiveIndicatorComponent = React.FC<TabsActiveIndicatorProps>;
export type TabsBaseProps<
  TabId extends string = string,
  TTab extends TabValue<TabId> = TabValue<TabId>,
> = Omit<BoxBaseProps, 'onChange'> &
  Omit<TabsOptions<TabId, TTab>, 'tabs'> &
  Pick<TabComponentProps<TabId, TTab>, 'color' | 'activeColor'> & {
    /** The array of tabs data. Each tab may optionally define a custom Component to render. */
    tabs: (TTab & {
      Component?: TabComponent<TabId, TTab>;
    })[];
    /** The default Component to render each tab. */
    TabComponent?: TabComponent<TabId, TTab>;
    /** The default Component to render the tabs active indicator. */
    TabsActiveIndicatorComponent?: TabsActiveIndicatorComponent;
    /** Background color passed to the TabsActiveIndicatorComponent. */
    activeBackground?: ThemeVars.Color;
    /** Optional callback to receive the active tab element. */
    onActiveTabElementChange?: (element: View | null) => void;
  };
export type TabsProps<
  TabId extends string = string,
  TTab extends TabValue<TabId> = TabValue<TabId>,
> = TabsBaseProps<TabId, TTab> &
  Omit<HStackProps, 'onChange'> & {
    /** Custom styles for individual elements of the Tabs component */
    styles?: {
      /** Root container element */
      root?: StyleProp<ViewStyle>;
      /** Container element wrapping each tab */
      tabContainer?: StyleProp<ViewStyle>;
      /** Tab element */
      tab?: StyleProp<ViewStyle>;
      /** Active indicator element */
      activeIndicator?: StyleProp<ViewStyle>;
    };
  };
type TabsFC = <TabId extends string = string, TTab extends TabValue<TabId> = TabValue<TabId>>(
  props: TabsProps<TabId, TTab> & {
    ref?: React.ForwardedRef<View>;
  },
) => React.ReactElement;
export declare const Tabs: TabsFC;
export declare const TabsActiveIndicator: ({
  activeTabRect,
  position,
  style,
  testID,
  ...props
}: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element;
export {};
//# sourceMappingURL=Tabs.d.ts.map