import React from 'react';
import type { SharedAccessibilityProps, SharedProps, ThemeVars } from '@coinbase/cds-common';
import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
import type { ChipProps } from '../../chips/ChipProps';
import { type HStackDefaultElement, type HStackProps } from '../../layout';
import { type TabsBaseProps, type TabsProps } from '../../tabs';
export type TabbedChipProps<TabId extends string = string> = Omit<
  ChipProps,
  'children' | 'onClick'
> &
  TabValue<TabId> & {
    Component?: React.FC<Omit<ChipProps, 'children'> & TabValue<TabId>>;
  };
export type TabbedChipsBaseProps<TabId extends string = string> = Omit<
  TabsBaseProps<TabId>,
  | 'TabComponent'
  | 'TabsActiveIndicatorComponent'
  | 'tabs'
  | 'onActiveTabElementChange'
  | 'activeBackground'
> & {
  TabComponent?: React.FC<TabbedChipProps<TabId>>;
  TabsActiveIndicatorComponent?: TabsProps<TabId>['TabsActiveIndicatorComponent'];
  tabs: TabbedChipProps<TabId>[];
  /**
   * 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 paddle on the left side, default: 50px)
   * @default 50
   */
  autoScrollOffset?: number;
};
export type TabbedChipsProps<TabId extends string = string> = TabbedChipsBaseProps<TabId> &
  SharedProps &
  SharedAccessibilityProps & {
    background?: ThemeVars.Color;
    previousArrowAccessibilityLabel?: string;
    nextArrowAccessibilityLabel?: string;
    /**
     * The spacing between Tabs
     * @default 1
     */
    gap?: HStackProps<HStackDefaultElement>['gap'];
    /**
     * 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.
     * @default 100%
     */
    width?: HStackProps<HStackDefaultElement>['width'];
    styles?: {
      /** Root container element */
      root?: React.CSSProperties;
      /** Scroll container element */
      scrollContainer?: React.CSSProperties;
      /** Paddle icon buttons */
      paddle?: React.CSSProperties;
      /** Tabs root element */
      tabs?: React.CSSProperties;
    };
    classNames?: {
      /** Root container element */
      root?: string;
      /** Scroll container element */
      scrollContainer?: string;
      /** Tabs root element */
      tabs?: string;
    };
  };
type TabbedChipsFC = <TabId extends string = string>(
  props: TabbedChipsProps<TabId> & {
    ref?: React.ForwardedRef<HTMLElement>;
  },
) => React.ReactElement;
export declare const TabbedChips: TabbedChipsFC;
export {};
//# sourceMappingURL=TabbedChips.d.ts.map