@equinor/eds-core-react/dist/esm/components/Tabs/Tab.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { spacingsTemplate, typographyTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
import { jsx } from 'react/jsx-runtime';

const StyledTab = styled.button.attrs(({
  $active = false,
  disabled = false,
  $value
}) => ({
  type: 'button',
  role: 'tab',
  'aria-selected': $active,
  'aria-disabled': disabled,
  tabIndex: $value ? 0 : $active ? 0 : -1
})).withConfig({
  displayName: "Tab__StyledTab",
  componentId: "sc-scjkct-0"
})(({
  theme,
  $active,
  disabled
}) => {
  const {
    entities: {
      tab
    }
  } = theme;
  return css(["appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), typographyTemplate(tab.typography), $active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), $active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), $active && bordersTemplate(tab.states.active.border));
});
const Tab = /*#__PURE__*/forwardRef(function Tab({
  active,
  value,
  ...rest
}, ref) {
  return /*#__PURE__*/jsx(StyledTab, {
    ref: ref,
    $active: active,
    $value: value,
    ...rest
  });
});

export { Tab };