@coinbase/cds-web 8.13.1 → 8.13.5

package/dts/tables/TableCell.d.ts

@@ -5,121 +5,148 @@ import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import { type CellBaseProps } from '../cells/Cell';
 import { type TextBaseProps } from '../typography/Text';
 export type TableCellTag = 'td' | 'th' | 'div';
-type TableCellSharedProps = (React.TdHTMLAttributes<HTMLTableCellElement> & React.ThHTMLAttributes<HTMLTableCellElement>) & SharedProps;
+type TableCellSharedProps = (React.TdHTMLAttributes<HTMLTableCellElement> &
+  React.ThHTMLAttributes<HTMLTableCellElement>) &
+  SharedProps;
 type TableCellBaseProps = TableCellSharedProps & {
-    /**
-     * Element (icon, asset, image, etc) to display at the start of the cell
-     * @default undefined
-     */
-    start?: React.ReactElement;
-    /**
-     * Element (icon, asset, image, etc) to display at the end of the cell
-     * @default undefined
-     */
-    end?: React.ReactElement;
-    /**
-     * The color for all text components rendered inside the TableCell.
-     * Use titleColor and subtitleColor if you need to be more specific
-     * @default undefined
-     */
-    color?: ThemeVars.Color | 'currentColor';
-    /**
-     * This prop us useful for right-aligning the last column
-     * @default 'flex-start'
-     */
-    justifyContent?: FlexAxisValue | FlexSpaceCommon | 'space-evenly';
-    /**
-     * This prop us useful for aligning the last item to the right, or top-aligning cells
-     * @default 'center'
-     */
-    alignItems?: CellBaseProps['alignItems'];
-    /**
-     * The colSpan attribute defines the number of columns a cell should span
-     * @default 1
-     */
-    colSpan?: number;
-    /**
-     * Used for <th> elements. Defines the cells that the header element relates to
-     */
-    scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
-    /**
-     * Callback to fire when pressed
-     * @default noop
-     */
-    onClick?: React.MouseEventHandler;
-    /**
-     * Should the title/subtitle text truncate
-     * @default false
-     */
-    overflow?: TextBaseProps['overflow'];
-    /**
-     * Direction provides content flow control.
-     * Use vertical to inherit a VStask, horizontal for an HStack
-     * @default vertical
-     */
-    direction?: 'vertical' | 'horizontal';
-    /**
-     * @deprecated
-     * HTML width attribute to help with column layout.
-     * This prop should _only_ be used to unblock migration efforts
-     * @default undefined
-     */
-    dangerouslySetHtmlWidth?: TableCellSharedProps['width'];
-    /**
-     * As a convenience, the width prop will set the css width and maxWidth props
-     * @default undefined
-     */
-    width?: TableCellSharedProps['width'];
-    /**
-     * The spacing to use on the parent wrapper of Cell
-     */
-    outerSpacing?: CellBaseProps['outerSpacing'];
-    /**
-     * The spacing to use on the inner content of Cell
-     * @default { spacingHorizontal: 0 }
-     */
-    innerSpacing?: CellBaseProps['innerSpacing'];
-    /**
-     * Use as="th" to mark this cell as a header for screen readers
-     * @default `th` when rendered inside a TableHeader, `td` when rendered inside a TableBody or TableFooter
-     */
-    as?: 'td' | 'th';
-    /**
-     * @danger This is a migration escape hatch. It is not intended to be used normally.
-     */
-    className?: string;
+  /**
+   * Element (icon, asset, image, etc) to display at the start of the cell
+   * @default undefined
+   */
+  start?: React.ReactElement;
+  /**
+   * Element (icon, asset, image, etc) to display at the end of the cell
+   * @default undefined
+   */
+  end?: React.ReactElement;
+  /**
+   * The color for all text components rendered inside the TableCell.
+   * Use titleColor and subtitleColor if you need to be more specific
+   * @default undefined
+   */
+  color?: ThemeVars.Color | 'currentColor';
+  /**
+   * This prop us useful for right-aligning the last column
+   * @default 'flex-start'
+   */
+  justifyContent?: FlexAxisValue | FlexSpaceCommon | 'space-evenly';
+  /**
+   * This prop us useful for aligning the last item to the right, or top-aligning cells
+   * @default 'center'
+   */
+  alignItems?: CellBaseProps['alignItems'];
+  /**
+   * The colSpan attribute defines the number of columns a cell should span
+   * @default 1
+   */
+  colSpan?: number;
+  /**
+   * Used for <th> elements. Defines the cells that the header element relates to
+   */
+  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+  /**
+   * Callback to fire when pressed
+   * @default noop
+   */
+  onClick?: React.MouseEventHandler;
+  /**
+   * Should the title/subtitle text truncate
+   * @default false
+   */
+  overflow?: TextBaseProps['overflow'];
+  /**
+   * Direction provides content flow control.
+   * Use vertical to inherit a VStask, horizontal for an HStack
+   * @default vertical
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * @deprecated
+   * HTML width attribute to help with column layout.
+   * This prop should _only_ be used to unblock migration efforts
+   * @default undefined
+   */
+  dangerouslySetHtmlWidth?: TableCellSharedProps['width'];
+  /**
+   * As a convenience, the width prop will set the css width and maxWidth props
+   * @default undefined
+   */
+  width?: TableCellSharedProps['width'];
+  /**
+   * The spacing to use on the parent wrapper of Cell
+   */
+  outerSpacing?: CellBaseProps['outerSpacing'];
+  /**
+   * The spacing to use on the inner content of Cell
+   * @default { spacingHorizontal: 0 }
+   */
+  innerSpacing?: CellBaseProps['innerSpacing'];
+  /**
+   * Use as="th" to mark this cell as a header for screen readers
+   * @default `th` when rendered inside a TableHeader, `td` when rendered inside a TableBody or TableFooter
+   */
+  as?: 'td' | 'th';
+  /**
+   * @danger This is a migration escape hatch. It is not intended to be used normally.
+   */
+  className?: string;
 };
 type TableCellPropsWithInputs = TableCellBaseProps & {
-    /** Children to render within the cell. */
-    children?: never;
-    /**
-     * If a title is provided, the default type style
-     * will be inferred from context. If the cell is rendered
-     * in a TableHeader, it will render with font="headline". But when
-     * rendered in a TableBody the text will render with font="body".
-     * @default undefined
-     */
-    title: string;
-    titleColor?: ThemeVars.Color | 'currentColor';
-    /**
-     * A subtitle will appear below the title with font="label2".
-     * @default undefined
-     */
-    subtitle?: string;
-    subtitleColor?: ThemeVars.Color | 'currentColor';
+  /** Children to render within the cell. */
+  children?: never;
+  /**
+   * If a title is provided, the default type style
+   * will be inferred from context. If the cell is rendered
+   * in a TableHeader, it will render with font="headline". But when
+   * rendered in a TableBody the text will render with font="body".
+   * @default undefined
+   */
+  title: string;
+  titleColor?: ThemeVars.Color | 'currentColor';
+  /**
+   * A subtitle will appear below the title with font="label2".
+   * @default undefined
+   */
+  subtitle?: string;
+  subtitleColor?: ThemeVars.Color | 'currentColor';
 };
 type TableCellPropsWithChildren = TableCellBaseProps & {
-    /**
-     * If children are provided, title, subtitle and description MUST be unset
-     * @default undefined
-     */
-    children: NonNullable<React.ReactNode | React.ReactNode[]>;
-    title?: never;
-    titleColor?: never;
-    subtitle?: never;
-    subtitleColor?: never;
+  /**
+   * If children are provided, title, subtitle and description MUST be unset
+   * @default undefined
+   */
+  children: NonNullable<React.ReactNode | React.ReactNode[]>;
+  title?: never;
+  titleColor?: never;
+  subtitle?: never;
+  subtitleColor?: never;
 };
 export type TableCellProps = TableCellPropsWithInputs | TableCellPropsWithChildren;
-export declare const TableCell: React.MemoExoticComponent<({ alignItems, children, colSpan, scope, color, direction, end, justifyContent, onClick, start, testID, overflow, title, titleColor, subtitle, subtitleColor, width, innerSpacing, outerSpacing, as, className, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TableCell: React.MemoExoticComponent<
+  ({
+    alignItems,
+    children,
+    colSpan,
+    scope,
+    color,
+    direction,
+    end,
+    justifyContent,
+    onClick,
+    start,
+    testID,
+    overflow,
+    title,
+    titleColor,
+    subtitle,
+    subtitleColor,
+    width,
+    innerSpacing,
+    outerSpacing,
+    as,
+    className,
+    ...props
+  }: TableCellProps) => import('react/jsx-runtime').JSX.Element
+>;
 export {};
-//# sourceMappingURL=TableCell.d.ts.map
+//# sourceMappingURL=TableCell.d.ts.map

package/dts/tables/TableCellFallback.d.ts

@@ -4,14 +4,30 @@ import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { CellMediaType } from '../cells/CellMedia';
 import type { TableCellProps } from './TableCell';
 export type TableCellFallbackProps = {
-    /** Display title shimmer. */
-    title?: boolean;
-    /** Display subtitle shimmer. */
-    subtitle?: boolean;
-    /** Display start shimmer with a shape according to type. */
-    start?: CellMediaType;
-    /** Display end shimmer with a shape according to type. */
-    end?: CellMediaType;
-} & SharedProps & FallbackRectWidthProps & Pick<TableCellProps, 'width' | 'outerSpacing' | 'innerSpacing' | 'as'>;
-export declare const TableCellFallback: React.MemoExoticComponent<({ title, start, end, subtitle, testID, as, outerSpacing, innerSpacing, disableRandomRectWidth, rectWidthVariant, ...props }: TableCellFallbackProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=TableCellFallback.d.ts.map
+  /** Display title shimmer. */
+  title?: boolean;
+  /** Display subtitle shimmer. */
+  subtitle?: boolean;
+  /** Display start shimmer with a shape according to type. */
+  start?: CellMediaType;
+  /** Display end shimmer with a shape according to type. */
+  end?: CellMediaType;
+} & SharedProps &
+  FallbackRectWidthProps &
+  Pick<TableCellProps, 'width' | 'outerSpacing' | 'innerSpacing' | 'as'>;
+export declare const TableCellFallback: React.MemoExoticComponent<
+  ({
+    title,
+    start,
+    end,
+    subtitle,
+    testID,
+    as,
+    outerSpacing,
+    innerSpacing,
+    disableRandomRectWidth,
+    rectWidthVariant,
+    ...props
+  }: TableCellFallbackProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=TableCellFallback.d.ts.map

package/dts/tables/TableCellSortIcon.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export type TableCellSortIconProps = {
-    direction?: React.TdHTMLAttributes<HTMLTableCellElement>['aria-sort'];
+  direction?: React.TdHTMLAttributes<HTMLTableCellElement>['aria-sort'];
 };
-export declare const TableCellSortIcon: React.MemoExoticComponent<({ direction }: TableCellSortIconProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=TableCellSortIcon.d.ts.map
+export declare const TableCellSortIcon: React.MemoExoticComponent<
+  ({ direction }: TableCellSortIconProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=TableCellSortIcon.d.ts.map

package/dts/tables/TableFooter.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { type TableSectionProps } from './TableSection';
 export type TableFooterProps = TableSectionProps;
-export declare const TableFooter: React.MemoExoticComponent<({ children, testID, ...props }: TableFooterProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=TableFooter.d.ts.map
+export declare const TableFooter: React.MemoExoticComponent<
+  ({ children, testID, ...props }: TableFooterProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=TableFooter.d.ts.map

package/dts/tables/TableHeader.d.ts

@@ -1,13 +1,20 @@
 import React from 'react';
 import { type TableSectionProps } from './TableSection';
 export type TableHeaderProps = TableSectionProps & {
-    /**
-     * Use to make a header stick to the top of the table when scrolled
-     * This will require setting a height or maxHeight on the Table or its parent
-     * @default false
-     */
-    sticky?: boolean;
+  /**
+   * Use to make a header stick to the top of the table when scrolled
+   * This will require setting a height or maxHeight on the Table or its parent
+   * @default false
+   */
+  sticky?: boolean;
 };
-export declare const tableHeaderStaticClassName = "cds-table-header";
-export declare const TableHeader: React.MemoExoticComponent<({ children, sticky, testID, ...props }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=TableHeader.d.ts.map
+export declare const tableHeaderStaticClassName = 'cds-table-header';
+export declare const TableHeader: React.MemoExoticComponent<
+  ({
+    children,
+    sticky,
+    testID,
+    ...props
+  }: TableHeaderProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=TableHeader.d.ts.map

package/dts/tables/TableRow.d.ts

@@ -3,7 +3,8 @@ import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import { type TableCellProps } from './TableCell';
 export type TableRowRef = React.MutableRefObject<HTMLTableRowElement | null>;
-export type TableRowProps = SharedProps & Omit<React.HTMLAttributes<HTMLTableRowElement>, 'dangerouslySetInnerHTML'> & {
+export type TableRowProps = SharedProps &
+  Omit<React.HTMLAttributes<HTMLTableRowElement>, 'dangerouslySetInnerHTML'> & {
     /**
      * Children are required, and should always include TableCell | TableCell[].
      */
@@ -48,6 +49,19 @@ export type TableRowProps = SharedProps & Omit<React.HTMLAttributes<HTMLTableRow
      * Will only take effect when fullWidth is set to true
      */
     innerSpacing?: TableCellProps['innerSpacing'];
-};
-export declare const TableRow: React.MemoExoticComponent<({ fullWidth, disableHoverIndicator, children, backgroundColor, color, testID, onClick, outerSpacing, innerSpacing, ...props }: TableRowProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=TableRow.d.ts.map
+  };
+export declare const TableRow: React.MemoExoticComponent<
+  ({
+    fullWidth,
+    disableHoverIndicator,
+    children,
+    backgroundColor,
+    color,
+    testID,
+    onClick,
+    outerSpacing,
+    innerSpacing,
+    ...props
+  }: TableRowProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=TableRow.d.ts.map

package/dts/tables/TableSection.d.ts

@@ -2,13 +2,21 @@ import React from 'react';
 import type { SharedProps } from '@coinbase/cds-common';
 export type TableSectionTag = 'thead' | 'tbody' | 'tfoot' | 'div';
 export type TableSectionProps = SharedProps & {
-    children?: React.ReactNode;
-    /**
-     * Internal only
-     * @default undefined
-     */
-    as?: TableSectionTag;
-    className?: string;
+  children?: React.ReactNode;
+  /**
+   * Internal only
+   * @default undefined
+   */
+  as?: TableSectionTag;
+  className?: string;
 };
-export declare const TableSection: React.MemoExoticComponent<({ as, children, testID, className, ...props }: TableSectionProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=TableSection.d.ts.map
+export declare const TableSection: React.MemoExoticComponent<
+  ({
+    as,
+    children,
+    testID,
+    className,
+    ...props
+  }: TableSectionProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=TableSection.d.ts.map

package/dts/tables/__figma__/TableCell.figma.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=TableCell.figma.d.ts.map
+//# sourceMappingURL=TableCell.figma.d.ts.map

package/dts/tables/context/TableContext.d.ts

@@ -1,4 +1,4 @@
 import type { TableProps } from '../Table';
 export type TableContextValue = Pick<TableProps, 'variant' | 'cellSpacing' | 'compact'>;
-export declare const TableContext: import("react").Context<TableContextValue>;
-//# sourceMappingURL=TableContext.d.ts.map
+export declare const TableContext: import('react').Context<TableContextValue>;
+//# sourceMappingURL=TableContext.d.ts.map

package/dts/tables/context/TableSectionContext.d.ts

@@ -1,6 +1,6 @@
 import type { TableSectionTag } from '../TableSection';
 export type TableSectionContextValue = {
-    as?: TableSectionTag;
+  as?: TableSectionTag;
 };
-export declare const TableSectionContext: import("react").Context<TableSectionContextValue>;
-//# sourceMappingURL=TableSectionContext.d.ts.map
+export declare const TableSectionContext: import('react').Context<TableSectionContextValue>;
+//# sourceMappingURL=TableSectionContext.d.ts.map

package/dts/tables/hooks/useSortableCell.d.ts

@@ -1,13 +1,17 @@
 import { type TableCellSortIconProps } from '../TableCellSortIcon';
 export type UseSortableCellProps<T extends string = string> = {
-    sortBy: T;
-    sortDirection: TableCellSortIconProps['direction'];
-    onChange: (key: T) => void;
+  sortBy: T;
+  sortDirection: TableCellSortIconProps['direction'];
+  onChange: (key: T) => void;
 };
-export declare const useSortableCell: <T extends string>({ sortBy, sortDirection, onChange, }: UseSortableCellProps<T>) => (key: T) => {
-    readonly onClick: () => void;
-    readonly color: "fgMuted" | "fgPrimary";
-    readonly end: import("react/jsx-runtime").JSX.Element;
-    readonly 'aria-sort': "none" | "ascending" | "descending" | "other" | undefined;
+export declare const useSortableCell: <T extends string>({
+  sortBy,
+  sortDirection,
+  onChange,
+}: UseSortableCellProps<T>) => (key: T) => {
+  readonly onClick: () => void;
+  readonly color: 'fgMuted' | 'fgPrimary';
+  readonly end: import('react/jsx-runtime').JSX.Element;
+  readonly 'aria-sort': 'none' | 'ascending' | 'descending' | 'other' | undefined;
 };
-//# sourceMappingURL=useSortableCell.d.ts.map
+//# sourceMappingURL=useSortableCell.d.ts.map

package/dts/tables/hooks/useTable.d.ts

@@ -5,23 +5,23 @@ import type { TableSectionTag } from '../TableSection';
 export declare const defaultCellSpacing: TableCellSpacing;
 export declare const compactCellSpacing: TableCellSpacing;
 type UseTableContext = {
-    skipAsValidation?: boolean;
+  skipAsValidation?: boolean;
 };
 export declare const useTableContext: ({ skipAsValidation }?: UseTableContext) => {
-    as: TableSectionTag | undefined;
-    cellSpacing: TableCellSpacing | undefined;
-    compact: boolean | undefined;
+  as: TableSectionTag | undefined;
+  cellSpacing: TableCellSpacing | undefined;
+  compact: boolean | undefined;
 };
-export declare const useTableCellTag: (asProp?: TableCellProps["as"]) => TableCellTag;
+export declare const useTableCellTag: (asProp?: TableCellProps['as']) => TableCellTag;
 export declare const useTableSectionTag: () => TableSectionTag;
 type UseTableCellSpacing = {
-    outer?: CellSpacing;
-    inner?: CellSpacing;
+  outer?: CellSpacing;
+  inner?: CellSpacing;
 } & UseTableContext;
 export declare const useTableCellSpacing: (props?: UseTableCellSpacing) => {
-    outer?: CellSpacing;
-    inner?: CellSpacing;
-    skipAsValidation?: boolean;
+  outer?: CellSpacing;
+  inner?: CellSpacing;
+  skipAsValidation?: boolean;
 };
 export {};
-//# sourceMappingURL=useTable.d.ts.map
+//# sourceMappingURL=useTable.d.ts.map

package/dts/tables/hooks/useTableRowListener.d.ts

@@ -1,4 +1,4 @@
 import type { TableRowRef } from '../TableRow';
 /** Call an event handler on Enter and Space keypress */
 export declare const useTableRowListener: (ref: TableRowRef, handler?: () => void) => void;
-//# sourceMappingURL=useTableRowListener.d.ts.map
+//# sourceMappingURL=useTableRowListener.d.ts.map

package/dts/tables/hooks/useTableVariant.d.ts

@@ -1,2 +1,2 @@
-export declare const useTableVariant: () => import("../context/TableContext").TableContextValue;
-//# sourceMappingURL=useTableVariant.d.ts.map
+export declare const useTableVariant: () => import('../context/TableContext').TableContextValue;
+//# sourceMappingURL=useTableVariant.d.ts.map

package/dts/tables/index.d.ts

@@ -6,4 +6,4 @@ export * from './TableCellFallback';
 export * from './TableFooter';
 export * from './TableHeader';
 export * from './TableRow';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dts/tabs/Paddle.d.ts

@@ -4,21 +4,30 @@ import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common
 import type { TabLabelBaseProps } from '../tabs/TabLabel';
 export declare const paddleWidth = 80;
 export type PaddleProps = {
-    direction?: 'left' | 'right';
-    show: boolean;
-    variant: TabLabelBaseProps['variant'];
-    background?: ThemeVars.Color;
-    onClick: () => void;
-    /**
-     * Web only. Styling for the paddle icon button. Mobile does not have paddles.
-     */
-    paddleStyle?: React.CSSProperties;
-} & SharedProps & SharedAccessibilityProps;
+  direction?: 'left' | 'right';
+  show: boolean;
+  variant: TabLabelBaseProps['variant'];
+  background?: ThemeVars.Color;
+  onClick: () => void;
+  /**
+   * Web only. Styling for the paddle icon button. Mobile does not have paddles.
+   */
+  paddleStyle?: React.CSSProperties;
+} & SharedProps &
+  SharedAccessibilityProps;
 /**
  * Paddles are left/right IconButtons, rendered by TabNavigation to visually indicate the presence of tabs that are out of sight due to content overflow.
  */
 export declare const Paddle: {
-    ({ direction, show, background, onClick, testID, accessibilityLabel, paddleStyle, }: PaddleProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+  ({
+    direction,
+    show,
+    background,
+    onClick,
+    testID,
+    accessibilityLabel,
+    paddleStyle,
+  }: PaddleProps): import('react/jsx-runtime').JSX.Element;
+  displayName: string;
 };
-//# sourceMappingURL=Paddle.d.ts.map
+//# sourceMappingURL=Paddle.d.ts.map

package/dts/tabs/SegmentedTab.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { type TabValue } from '@coinbase/cds-common/tabs/useTabs';
-import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
-export type SegmentedTabProps<T extends string = string> = {
+import { type PressableBaseProps } from '../system/Pressable';
+export type SegmentedTabProps<T extends string = string> = PressableBaseProps &
+  TabValue<T> & {
     /**
      * Text color when the SegmentedTab is active.
      * @default negativeForeground
@@ -15,24 +16,39 @@ export type SegmentedTabProps<T extends string = string> = {
     color?: ThemeVars.Color;
     /** Callback that is fired when the SegmentedTab is clicked. */
     onClick?: (id: T, event: React.MouseEvent) => void;
-} & TabValue<T> & Omit<React.ComponentProps<'button'>, 'ref'> & SharedProps;
-type SegmentedTabComponent = <T extends string = string>(props: SegmentedTabProps<T> & {
+  };
+type SegmentedTabComponent = <T extends string = string>(
+  props: SegmentedTabProps<T> & {
     ref?: React.ForwardedRef<HTMLButtonElement>;
-}) => React.ReactElement;
-declare const SegmentedTabComponent: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
-    /**
-     * Text color when the SegmentedTab is active.
-     * @default negativeForeground
-     */
-    activeColor?: ThemeVars.Color;
-    /**
-     * Text color when the SegmentedTab is inactive.
-     * @default foreground
-     */
-    color?: ThemeVars.Color;
-    /** Callback that is fired when the SegmentedTab is clicked. */
-    onClick?: ((id: string, event: React.MouseEvent) => void) | undefined;
-} & TabValue<string> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SharedProps & React.RefAttributes<HTMLButtonElement>>>;
+  },
+) => React.ReactElement;
+declare const SegmentedTabComponent: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    import('@coinbase/cds-common').ComponentEventHandlerProps & {
+      noScaleOnPress?: boolean;
+      focusable?: boolean;
+    } & Omit<
+        import('../system').InteractableBaseProps,
+        | 'focusable'
+        | keyof import('@coinbase/cds-common').ComponentEventHandlerProps
+        | 'noScaleOnPress'
+      > &
+      TabValue<string> & {
+        /**
+         * Text color when the SegmentedTab is active.
+         * @default negativeForeground
+         */
+        activeColor?: ThemeVars.Color;
+        /**
+         * Text color when the SegmentedTab is inactive.
+         * @default foreground
+         */
+        color?: ThemeVars.Color;
+        /** Callback that is fired when the SegmentedTab is clicked. */
+        onClick?: ((id: string, event: React.MouseEvent) => void) | undefined;
+      } & React.RefAttributes<HTMLButtonElement>
+  >
+>;
 export declare const SegmentedTab: SegmentedTabComponent;
 export {};
-//# sourceMappingURL=SegmentedTab.d.ts.map
+//# sourceMappingURL=SegmentedTab.d.ts.map