Chakra Tabs - With Indicator

tabs.theme.ts

const variants = {
 'with-indicator': definePartsStyle((props) => {
    const sizes = {
      md: {
        tablist: {
          h: 11,
          px: 1,
        },
        tab: {
          fontSize: 'sm',
          px: 3,
        },
        indicator: {
          h: 9,
          marginTop: -10,
        },
      },
      lg: {
        tablist: {
          h: 14,
          px: 1.5,
        },
        tab: {
          fontSize: 'md',
          px: 3.5,
        },
        indicator: {
          h: 11,
          marginTop: '-50px',
        },
      },
    }

    const size = sizes[props.size]

    const style = {
      root: {
        position: 'relative',
      },
      tablist: {
        borderRadius: 'lg',
        borderWidth: mode('1px', 'none')(props),
        bg: mode('gray.50', 'gray.800')(props),
        boxShadow: mode('none', 'xs-dark')(props),
      },
      tab: {
        zIndex: 1,
        color: 'muted',
        fontWeight: 'semibold',
        _selected: {
          color: 'emphasized',
        },
        _notLast: {
          me: 2,
        },
        _disabled: {
          opacity: 0.4,
          cursor: 'not-allowed',
        },
      },
      indicator: {
        bg: mode('white', 'gray.700')(props),
        borderRadius: 'md',
        boxShadow: mode('sm', 'sm-dark')(props),
      },
    }
    return merge(style, size)
  })
}