import React from 'react';
import { type StyleProp, type View, type ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type { ChipProps } from '../../chips/ChipProps';
import { type MediaChipBaseProps } from '../../chips/MediaChip';
import { type BoxProps } from '../../layout/Box';
import { type TabsBaseProps, type TabsProps } from '../../tabs/Tabs';
export type TabbedChipProps<TabId extends string = string> = Omit<
  ChipProps,
  'children' | 'onPress'
> &
  TabValue<TabId> & {
    Component?: React.FC<Omit<ChipProps, 'children'> & TabValue<TabId>>;
    /**
     * Custom background color applied to the chip when it is the active tab.
     * When set, takes precedence over the default `invertColorScheme` behavior.
     */
    activeBackground?: MediaChipBaseProps['background'];
    /**
     * Custom foreground color applied to the chip label when it is the active tab.
     */
    activeColor?: MediaChipBaseProps['color'];
  };
export type TabbedChipsBaseProps<TabId extends string = string> = Omit<
  TabsBaseProps<TabId>,
  | 'TabComponent'
  | 'TabsActiveIndicatorComponent'
  | 'tabs'
  | 'onActiveTabElementChange'
  | 'activeBackground'
  | 'activeColor'
> & {
  tabs: TabbedChipProps<TabId>[];
  TabComponent?: React.FC<TabbedChipProps<TabId>>;
  TabsActiveIndicatorComponent?: TabsProps<TabId>['TabsActiveIndicatorComponent'];
  /**
   * Turn on to use a compact Chip component for each tab.
   * @default false
   */
  compact?: boolean;
  /**
   * X position offset when auto-scrolling to active tab (to avoid active tab being covered by the overflow gradient on the left side, default: 30px)
   * @default 30
   */
  autoScrollOffset?: number;
};
export type TabbedChipsProps<TabId extends string = string> = TabbedChipsBaseProps<TabId> &
  SharedProps &
  SharedAccessibilityProps & {
    /**
     * The spacing between Tabs
     * @default 1
     */
    gap?: ThemeVars.Space;
    /**
     * The width of the scroll container, defaults to 100% of the parent container
     * If the tabs are wider than the width of the container, paddles will be shown to scroll the tabs.
     */
    width?: BoxProps['width'];
    styles?: {
      /** Root container element */
      root?: StyleProp<ViewStyle>;
      /** Tabs root element */
      tabs?: StyleProp<ViewStyle>;
    };
  };
type TabbedChipsFC = <TabId extends string = string>(
  props: TabbedChipsProps<TabId> & {
    ref?: React.ForwardedRef<View>;
  },
) => React.ReactElement;
export declare const TabbedChips: TabbedChipsFC;
export {};
//# sourceMappingURL=TabbedChips.d.ts.map