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

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import { SwitchSmall } from './SwitchSmall.js';
import { SwitchDefault } from './SwitchDefault.js';
import { comfortable } from './Switch.tokens.js';
import { typographyTemplate, useToken } from '@equinor/eds-utils';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useEds } from '../EdsProvider/eds.context.js';

const StyledLabel = styled.label.withConfig({
  displayName: "Switch__StyledLabel",
  componentId: "sc-sdaahx-0"
})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;gap:", ";"], ({
  $isDisabled
}) => $isDisabled ? 'not-allowed' : 'pointer', ({
  $size
}) => $size === 'small' ? '12px' : '8px');
const Label = styled.span.withConfig({
  displayName: "Switch__Label",
  componentId: "sc-sdaahx-1"
})(({
  theme
}) => css(["", ";"], typographyTemplate(theme.typography)));
const Switch = /*#__PURE__*/forwardRef(function Switch({
  size = 'default',
  disabled,
  label,
  className,
  style,
  ...rest
}, ref) {
  const {
    density
  } = useEds();
  // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)
  const overrideDensity = size === 'small' ? 'compact' : density;
  const token = useToken({
    density: overrideDensity
  }, comfortable);
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: label ? /*#__PURE__*/jsxs(StyledLabel, {
      $size: size,
      $isDisabled: disabled,
      className: className,
      style: style,
      children: [size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
        disabled: disabled,
        ...rest,
        ref: ref
      }) : /*#__PURE__*/jsx(SwitchDefault, {
        disabled: disabled,
        ...rest,
        ref: ref
      }), label && /*#__PURE__*/jsx(Label, {
        children: label
      })]
    }) : size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
      disabled: disabled,
      className: className,
      style: style,
      ...rest,
      ref: ref
    }) : /*#__PURE__*/jsx(SwitchDefault, {
      disabled: disabled,
      className: className,
      style: style,
      ...rest,
      ref: ref
    })
  });
});
Switch.displayName = 'Switch';

export { Switch };