All files / src/theme/components Tabs.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { tabsAnatomy as parts } from "@chakra-ui/anatomy";
import { theme } from "@chakra-ui/react";
import {
  mode,
  PartsStyleFunction,
  PartsStyleInterpolation,
} from "@chakra-ui/theme-tools";
 
const baseTheme = theme.components.Tabs;
 
const variantLine: PartsStyleFunction<typeof parts> = (props) => {
  const { colorScheme: c, orientation } = props;
  const isVertical = orientation === "vertical";
  const borderProp =
    orientation === "vertical" ? "borderStart" : "borderBottom";
  const marginProp = isVertical ? "marginStart" : "marginBottom";
 
  return {
    tablist: {
      [borderProp]: "none",
      borderColor: "inherit",
    },
    tab: {
      [borderProp]: "4px solid",
      borderColor: "transparent",
      [marginProp]: "0",
      _selected: {
        color: mode(`${c}.500`, `${c}.300`)(props),
        borderColor: "currentColor",
        fontWeight: "semibold",
      },
      _active: {
        bg: mode("gray.200", "whiteAlpha.300")(props),
      },
      _disabled: {
        opacity: 0.4,
        cursor: "not-allowed",
      },
    },
  };
};
 
const variants: Record<string, PartsStyleInterpolation<typeof parts>> = {
  ...baseTheme.variants,
  line: variantLine,
};
 
export const Tabs: typeof baseTheme = {
  ...baseTheme,
  variants,
};