@yamada-ui/react/dist/types/components/native-table/native-table.style.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ComponentSlotStyle } from "../../core/system/index.types.js";
import "../../index.js";

//#region src/components/native-table/native-table.style.d.ts
declare const nativeTableStyle: ComponentSlotStyle<"caption" | "col" | "colgroup" | "tbody" | "td" | "tfoot" | "th" | "thead" | "tr" | "root" | "scrollArea", {
  /**
   * If `true`, highlight the row when the table row is hovered.
   *
   * @default false
   */
  highlightOnHover: {
    true: {
      tbody: {
        "& tr": {
          transitionDuration: "moderate";
          transitionProperty: "common";
          _hover: {
            bg: "colorScheme.bg";
          };
        };
      };
    };
  };
  /**
   * If `true`, highlight the row when the table row is selected.
   *
   * @default false
   */
  highlightOnSelected: {
    true: {
      tbody: {
        "& tr": {
          transitionDuration: "moderate";
          transitionProperty: "common";
          _selected: {
            bg: "colorScheme.bg";
          };
        };
      };
    };
  };
  /**
   * If `true`, display the sticky footer.
   *
   * @default false
   */
  stickyFooter: {
    true: {
      tfoot: {
        "& tr": {
          bottom: "0";
          position: "sticky";
          zIndex: "yamcha";
        };
      };
    };
  };
  /**
   * If `true`, display the sticky header.
   *
   * @default false
   */
  stickyHeader: {
    true: {
      thead: {
        "& tr": {
          position: "sticky";
          top: "0";
          zIndex: "yamcha";
        };
      };
    };
  };
  /**
   * If `true`, display striped rows.
   *
   * @default false
   */
  striped: {
    true: {};
  };
  /**
   * If `true`, display the outer border of the table.
   *
   * @default false
   */
  withBorder: {
    true: {
      root: {
        borderWidth: "1px";
      };
    };
  };
  /**
   * If `true`, display line on the columns of the table.
   *
   * @default false
   */
  withColumnBorders: {
    true: {
      tr: {
        "& th, td": {
          borderRightWidth: "1px";
        };
      };
    };
  };
}, {
  sm: {
    root: {
      fontSize: "xs";
    };
    td: {
      "--space-x": "spaces.2";
      "--space-y": "spaces.1";
    };
    th: {
      "--space-x": "spaces.2";
      "--space-y": "spaces.1";
    };
  };
  md: {
    root: {
      fontSize: "sm";
    };
    td: {
      "--space-x": "spaces.3";
      "--space-y": "spaces.2";
    };
    th: {
      "--space-x": "spaces.3";
      "--space-y": "spaces.2";
    };
  };
  lg: {
    root: {
      fontSize: "md";
    };
    td: {
      "--space-x": "spaces.4";
      "--space-y": "spaces.3";
    };
    th: {
      "--space-x": "spaces.4";
      "--space-y": "spaces.3";
    };
  };
}, {
  line: {
    tbody: {
      "& tr:not(:first-of-type)": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
      "& tr:only-child": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
    };
    tfoot: {
      "& tr": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
    };
    thead: {
      "& tr": {
        "& th, td": {
          borderBottomWidth: "1px";
        };
      };
    };
  };
  outline: {
    root: {
      borderWidth: "1px";
    };
    scrollArea: {
      borderWidth: "1px";
    };
    tbody: {
      "& tr:not(:first-of-type)": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
      "& tr:only-child": {
        "& th, td": {
          borderTopWidth: "1px";
        };
      };
    };
    tfoot: {
      "& tr": {
        "&:first-of-type": {
          "& th, td": {
            borderTopWidth: "1px";
          };
        };
        bg: "colorScheme.bg";
      };
    };
    thead: {
      "& tr": {
        "&:last-of-type": {
          "& th, td": {
            borderBottomWidth: "1px";
          };
        };
        bg: "colorScheme.bg";
      };
    };
  };
}>;
type NativeTableStyle = typeof nativeTableStyle;
//#endregion
export { NativeTableStyle, nativeTableStyle };
//# sourceMappingURL=native-table.style.d.ts.map