# All files / tabs tabStyles.ts

100% Statements 56/56
85.71% Branches 6/7
100% Functions 1/1
100% Lines 56/56

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    571x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
     import { cnb } from "cnbuilder";
    import { cssUtils } from "../cssUtils.js";
    import { bem } from "../utils/bem.js";
    import { tabIndicator } from "./tabIndicatorStyles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-tab-color"?: string;
        "--rmd-tab-active-color"?: string;
        "--rmd-tab-inactive-color"?: string;
        "--rmd-tab-disabled-color"?: string;
      }
    }

    const styles = bem("rmd-tab");

    /**
     * @remarks \@since 6.0.0
     */
    export interface TabClassNameOptions {
      className?: string;
      active?: boolean;
      isLink?: boolean;
      activeIndicator?: boolean;
      stacked?: boolean;
      reversed?: boolean;
      disabled?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function tab(options: TabClassNameOptions = {}): string {
      const {
        className,
        active,
        isLink,
        activeIndicator,
        stacked,
        reversed,
        disabled,
      } = options;

      return cnb(
        styles({
          active,
          reversed: reversed && !stacked,
          stacked,
          "stacked-reversed": stacked && reversed,
          disabled,
        }),
        active && activeIndicator && tabIndicator(),
        cssUtils({ surface: true, textDecoration: isLink ? "none" : undefined }),
        className
      );
    }