import React from 'react';
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 MotionProps } from 'framer-motion';
import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
import { type HStackDefaultElement, type HStackProps } from '../layout/HStack';
export declare const tabsTransitionConfig: {
  readonly type: 'spring';
  readonly mass: 0.15;
  readonly stiffness: 170;
  readonly damping: 10;
  readonly velocity: 5;
};
export type TabsActiveIndicatorProps = {
  activeTabRect: Rect;
} & BoxProps<BoxDefaultElement> &
  MotionProps;
export type TabComponentProps<TabId extends string = string> = TabValue<TabId> & {
  /** The tab index for the tab. Automatically set to manage focus behavior. */
  tabIndex?: number;
  /**
   * The role for the tab.
   * @default "tab"
   */
  role?: string;
  className?: string;
  style?: React.CSSProperties;
};
export type TabComponent<TabId extends string = string> = React.FC<TabComponentProps<TabId>>;
export type TabsActiveIndicatorComponent = React.FC<TabsActiveIndicatorProps>;
export type TabsBaseProps<TabId extends string = string> = Omit<BoxBaseProps, 'onChange' | 'ref'> &
  Omit<TabsOptions<TabId>, 'tabs'> & {
    /** The array of tabs data. Each tab may optionally define a custom Component to render. */
    tabs: (TabValue<TabId> & {
      Component?: TabComponent<TabId>;
    })[];
    /** The default Component to render each tab. */
    TabComponent: TabComponent<TabId>;
    /** 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: HTMLElement | null) => void;
  };
export type TabsProps<TabId extends string = string> = TabsBaseProps<TabId> &
  Omit<HStackProps<HStackDefaultElement>, 'onChange' | 'ref'> & {
    /** Custom styles for individual elements of the Tabs component */
    styles?: {
      /** Root element */
      root?: React.CSSProperties;
      /** Tab element */
      tab?: React.CSSProperties;
      /** Active indicator element */
      activeIndicator?: React.CSSProperties;
    };
    /** Custom class names for individual elements of the Tabs component */
    classNames?: {
      /** Root element */
      root?: string;
      /** Tab element */
      tab?: string;
      /** Active indicator element */
      activeIndicator?: string;
    };
  };
type TabsFC = <TabId extends string = string>(
  props: TabsProps<TabId> & {
    ref?: React.ForwardedRef<HTMLElement>;
  },
) => React.ReactElement;
export declare const Tabs: TabsFC;
export declare const TabsActiveIndicator: ({
  activeTabRect,
  position,
  ...props
}: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | null;
export {};
//# sourceMappingURL=Tabs.d.ts.map