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

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { bordersTemplate } from '@equinor/eds-utils';
import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const Input = styled(BaseInput).withConfig({
  displayName: "SwitchDefault__Input",
  componentId: "sc-16ym5pn-0"
})(({
  disabled,
  theme
}) => css(["width:", ";aspect-ratio:1/1;&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], theme.clickbound.height, disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background));
const Track = styled.span.withConfig({
  displayName: "SwitchDefault__Track",
  componentId: "sc-16ym5pn-1"
})(({
  $isDisabled,
  theme: {
    states,
    entities: {
      track
    }
  }
}) => css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, $isDisabled && {
  backgroundColor: states.disabled.background
}));
const Handle = styled.span.withConfig({
  displayName: "SwitchDefault__Handle",
  componentId: "sc-16ym5pn-2"
})(({
  $isDisabled,
  theme: {
    states,
    entities: {
      handle
    }
  }
}) => css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, $isDisabled && {
  backgroundColor: states.disabled.background
}, handle.boxShadow, handle.width, handle.height));
const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault({
  disabled,
  className,
  style,
  ...rest
}, ref) {
  return /*#__PURE__*/jsxs(GridWrapper, {
    className: className,
    style: style,
    children: [/*#__PURE__*/jsx(Input, {
      ...rest,
      ref: ref,
      disabled: disabled
    }), /*#__PURE__*/jsxs(BaseInputWrapper, {
      children: [/*#__PURE__*/jsx(Track, {
        $isDisabled: disabled
      }), /*#__PURE__*/jsx(Handle, {
        $isDisabled: disabled
      })]
    })]
  });
});
SwitchDefault.displayName = 'SwitchDefault';

export { SwitchDefault };