@coinbase/cds-web 0.0.0 → 8.13.2

package/dts/tables/TableCell.d.ts

@@ -0,0 +1,152 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { FlexAxisValue, FlexSpaceCommon } from '@coinbase/cds-common/types/BoxBaseProps';
+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 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;
+};
+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';
+};
+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;
+};
+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 {};
+//# sourceMappingURL=TableCell.d.ts.map

package/dts/tables/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/tables/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAS9D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE/C,KAAK,oBAAoB,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,GACvE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,GAC7C,WAAW,CAAC;AAEd,KAAK,kBAAkB,GAAG,oBAAoB,GAAG;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC;IAClE;;;OAGG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACxD;;;OAGG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACtC;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,wBAAwB,GAAG,kBAAkB,GAAG;IACnD,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;CAClD,CAAC;AAEF,KAAK,0BAA0B,GAAG,kBAAkB,GAAG;IACrD;;;OAGG;IACH,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,wBAAwB,GAAG,0BAA0B,CAAC;AAgCnF,eAAO,MAAM,SAAS,wPAyBjB,cAAc,6CAqJlB,CAAC"}

package/dts/tables/TableCellFallback.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { FallbackRectWidthProps } from '@coinbase/cds-common/types/FallbackBaseProps';
+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

package/dts/tables/TableCellFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellFallback.d.ts","sourceRoot":"","sources":["../../src/tables/TableCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAK1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,sBAAsB,GAAG;IACnC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB,GAAG,WAAW,GACb,sBAAsB,GACtB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,CAAC;AASzE,eAAO,MAAM,iBAAiB,0JAazB,sBAAsB,6CA8C1B,CAAC"}

package/dts/tables/TableCellSortIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type TableCellSortIconProps = {
+  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

package/dts/tables/TableCellSortIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellSortIcon.d.ts","sourceRoot":"","sources":["../../src/tables/TableCellSortIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,WAAW,CAAC,CAAC;CACvE,CAAC;AAEF,eAAO,MAAM,iBAAiB,4CAAwB,sBAAsB,6CA4B1E,CAAC"}

package/dts/tables/TableFooter.d.ts

@@ -0,0 +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

package/dts/tables/TableFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../src/tables/TableFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AAEjD,eAAO,MAAM,WAAW,6DAAyC,gBAAgB,6CAM/E,CAAC"}

package/dts/tables/TableHeader.d.ts

@@ -0,0 +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;
+};
+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/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../src/tables/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,0BAA0B,qBAAqB,CAAC;AAQ7D,eAAO,MAAM,WAAW,qEAAiD,gBAAgB,6CAWvF,CAAC"}

package/dts/tables/TableRow.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+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'> & {
+    /**
+     * Children are required, and should always include TableCell | TableCell[].
+     */
+    children: NonNullable<React.ReactNode>;
+    /**
+     * Should this row span the entire width of the table?
+     * Useful for treating a row as a Control Strip.
+     * @default undefined
+     */
+    fullWidth?: boolean;
+    /**
+     * Set the background color for this entire row
+     * to some CDS Palette background color name
+     * @default undefined
+     */
+    backgroundColor?: ThemeVars.Color;
+    /**
+     * Set the text color for this entire row to some
+     * CDS Palette foreground color name
+     * @default undefined
+     */
+    color?: ThemeVars.Color;
+    /**
+     * By default, we set a hover background color of
+     * palette.backgroundAlternate on hover for the row.
+     * Use this prop to disable this behavior
+     * @default false
+     */
+    disableHoverIndicator?: boolean;
+    /**
+     * Callback to fire when pressed
+     * @default noop
+     */
+    onClick?: React.MouseEventHandler<Element> | (() => void);
+    /**
+     * The spacing to use on the parent wrapper of Cell.
+     * Will only take effect when fullWidth is set to true
+     */
+    outerSpacing?: TableCellProps['outerSpacing'];
+    /**
+     * The spacing to use on the inner content of Cell.
+     * 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

package/dts/tables/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/tables/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAQ1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,GAAG;IAC3E;;OAEG;IACH,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C;;;OAGG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AA0BJ,eAAO,MAAM,QAAQ,4JAYhB,aAAa,6CA8CjB,CAAC"}

package/dts/tables/TableSection.d.ts

@@ -0,0 +1,22 @@
+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;
+};
+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/TableSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSection.d.ts","sourceRoot":"","sources":["../../src/tables/TableSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,4EACmC,iBAAiB,6CAkB5E,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.figma.d.ts","sourceRoot":"","sources":["../../../src/tables/__figma__/TableCell.figma.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableContext.d.ts","sourceRoot":"","sources":["../../../src/tables/context/TableContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC,CAAC;AAExF,eAAO,MAAM,YAAY,4CAGvB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSectionContext.d.ts","sourceRoot":"","sources":["../../../src/tables/context/TableSectionContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,CAAC,EAAE,eAAe,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mDAA8C,CAAC"}

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

@@ -0,0 +1,17 @@
+import { type TableCellSortIconProps } from '../TableCellSortIcon';
+export type UseSortableCellProps<T extends string = string> = {
+  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;
+};
+//# sourceMappingURL=useSortableCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSortableCell.d.ts","sourceRoot":"","sources":["../../../src/tables/hooks/useSortableCell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEtF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC5D,MAAM,EAAE,CAAC,CAAC;IACV,aAAa,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC;IACnD,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,MAAM,EAAE,sCAI/C,oBAAoB,CAAC,CAAC,CAAC,MACS,KAAK,CAAC;;;;;CAUxC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../../src/tables/hooks/useTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASvD,eAAO,MAAM,kBAAkB,EAAE,gBAGhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,gBAGhC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,uBAAsB,eAAoB;;;;CASzE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,SAAS,cAAc,CAAC,IAAI,CAAC,iBAM5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,uBAI9B,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,eAAO,MAAM,mBAAmB,GAAI,QAAQ,mBAAmB;;;uBAjC1C,OAAO;CAwC3B,CAAC"}

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

@@ -0,0 +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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRowListener.d.ts","sourceRoot":"","sources":["../../../src/tables/hooks/useTableRowListener.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,wDAAwD;AACxD,eAAO,MAAM,mBAAmB,GAAI,KAAK,WAAW,EAAE,UAAU,MAAM,IAAI,SAqBzE,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableVariant.d.ts","sourceRoot":"","sources":["../../../src/tables/hooks/useTableVariant.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,2DAI3B,CAAC"}

package/dts/tables/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCaption';
+export * from './TableCell';
+export * from './TableCellFallback';
+export * from './TableFooter';
+export * from './TableHeader';
+export * from './TableRow';
+//# sourceMappingURL=index.d.ts.map

package/dts/tables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tables/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

package/dts/tabs/Paddle.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+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;
+/**
+ * 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;
+};
+//# sourceMappingURL=Paddle.d.ts.map

package/dts/tabs/Paddle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paddle.d.ts","sourceRoot":"","sources":["../../src/tabs/Paddle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AASxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,eAAO,MAAM,WAAW,KAAK,CAAC;AAwB9B,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACnC,GAAG,WAAW,GACb,wBAAwB,CAAC;AA8B3B;;GAEG;AACH,eAAO,MAAM,MAAM;yFAQhB,WAAW;;CA8Cb,CAAC"}

package/dts/tabs/SegmentedTab.d.ts

@@ -0,0 +1,52 @@
+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> = {
+  /**
+   * 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: T, event: React.MouseEvent) => void;
+} & TabValue<T> &
+  Omit<React.ComponentProps<'button'>, 'ref'> &
+  SharedProps;
+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>
+  >
+>;
+export declare const SegmentedTab: SegmentedTabComponent;
+export {};
+//# sourceMappingURL=SegmentedTab.d.ts.map

package/dts/tabs/SegmentedTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAuC1E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACpD,GAAG,QAAQ,CAAC,CAAC,CAAC,GACb,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAC3C,WAAW,CAAC;AAMd,KAAK,qBAAqB,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACrD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC1E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;IAxBzB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB,+DAA+D;mCACtC,KAAK,CAAC,UAAU,KAAK,IAAI;sLAkFnD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}

package/dts/tabs/SegmentedTabs.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type TabsProps } from './Tabs';
+export type SegmentedTabsProps<T extends string = string> = Partial<
+  Pick<TabsProps<T>, 'TabComponent' | 'TabsActiveIndicatorComponent'>
+> &
+  Omit<TabsProps<T>, 'TabComponent' | 'TabsActiveIndicatorComponent'>;
+type SegmentedTabsFC = <T extends string>(
+  props: SegmentedTabsProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement>;
+  },
+) => React.ReactElement;
+export declare const SegmentedTabs: SegmentedTabsFC;
+export {};
+//# sourceMappingURL=SegmentedTabs.d.ts.map

package/dts/tabs/SegmentedTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACjE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CACpE,GACC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC;AAEtE,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,MAAM,EACtC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KACrE,KAAK,CAAC,YAAY,CAAC;AA+BxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}

package/dts/tabs/SegmentedTabsActiveIndicator.d.ts

@@ -0,0 +1,7 @@
+import { type TabsActiveIndicatorProps } from './Tabs';
+export type SegmentedTabsActiveIndicatorProps = TabsActiveIndicatorProps;
+export declare const SegmentedTabsActiveIndicator: ({
+  borderRadius,
+  ...props
+}: SegmentedTabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=SegmentedTabsActiveIndicator.d.ts.map

package/dts/tabs/SegmentedTabsActiveIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabsActiveIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabsActiveIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAE5E,MAAM,MAAM,iCAAiC,GAAG,wBAAwB,CAAC;AAEzE,eAAO,MAAM,4BAA4B,GAAI,4BAG1C,iCAAiC,4CAEnC,CAAC"}

package/dts/tabs/TabIndicator.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { SharedProps } from '@coinbase/cds-common/types';
+export type TabIndicatorProps = SharedProps & {
+  /** The width of the active TabLabel. */
+  width: number;
+  /** The xPosition of the active TabLabel. */
+  x: number;
+  /** This should always match the background color of the parent container
+   * @default: 'bg'
+   */
+  background?: ThemeVars.Color;
+};
+export declare const TabIndicator: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps & {
+      /** The width of the active TabLabel. */
+      width: number;
+      /** The xPosition of the active TabLabel. */
+      x: number;
+      /** This should always match the background color of the parent container
+       * @default: 'bg'
+       */
+      background?: ThemeVars.Color;
+    } & React.RefAttributes<HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=TabIndicator.d.ts.map

package/dts/tabs/TabIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/TabIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAS9D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY;IAVvB,wCAAwC;WACjC,MAAM;IACb,4CAA4C;OACzC,MAAM;IACT;;OAEG;iBACU,SAAS,CAAC,KAAK;yCAqC7B,CAAC"}