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

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
import { checkbox } from './Checkbox.tokens.js';
import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useEds } from '../EdsProvider/eds.context.js';

/* eslint camelcase: "off" */
const StyledPath = styled.path.attrs(({
  $icon
}) => ({
  fillRule: 'evenodd',
  clipRule: 'evenodd',
  d: $icon.svgPathData
})).withConfig({
  displayName: "Input__StyledPath",
  componentId: "sc-rqj7qf-0"
})([""]);
const Input = styled.input.attrs(({
  type = 'checkbox'
}) => ({
  type
})).withConfig({
  displayName: "Input",
  componentId: "sc-rqj7qf-1"
})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
  theme,
  $iconSize
}) => parseFloat(theme.clickbound.height) / $iconSize, ({
  disabled
}) => disabled ? 'not-allowed' : 'pointer', ({
  theme
}) => outlineTemplate(theme.states.focus.outline), ({
  theme
}) => outlineTemplate(theme.states.focus.outline));
const Svg = styled.svg.attrs(({
  height,
  width,
  fill
}) => ({
  name: null,
  xmlns: 'http://www.w3.org/2000/svg',
  height,
  width,
  fill
})).withConfig({
  displayName: "Input__Svg",
  componentId: "sc-rqj7qf-2"
})(["grid-area:input;pointer-events:none;"]);
const InputWrapper = styled.span.withConfig({
  displayName: "Input__InputWrapper",
  componentId: "sc-rqj7qf-3"
})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;", " &::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], ({
  theme
}) => spacingsTemplate(theme.spacings), ({
  theme
}) => theme.width, ({
  disabled
}) => disabled ? 'transparent' : checkbox.states.hover.background);
const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput({
  disabled = false,
  indeterminate,
  style,
  className,
  ...rest
}, ref) {
  const {
    density
  } = useEds();
  const token = useToken({
    density
  }, checkbox);
  const iconSize = 24;
  const fill = disabled ? checkbox.states.disabled.background : checkbox.background;
  const inputWrapperProps = {
    disabled,
    style,
    className
  };
  const inputProps = {
    ref,
    disabled,
    ['data-indeterminate']: indeterminate,
    ...rest
  };
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: /*#__PURE__*/jsxs(InputWrapper, {
      ...inputWrapperProps,
      children: [/*#__PURE__*/jsx(Input, {
        $iconSize: iconSize,
        ...inputProps
      }), indeterminate ? /*#__PURE__*/jsx(Svg, {
        width: iconSize,
        height: iconSize,
        viewBox: `0 0 ${iconSize} ${iconSize}`,
        fill: fill,
        "aria-hidden": true,
        children: /*#__PURE__*/jsx(StyledPath, {
          $icon: checkbox_indeterminate,
          name: "indeterminate"
        })
      }) : /*#__PURE__*/jsxs(Svg, {
        width: iconSize,
        height: iconSize,
        viewBox: `0 0 ${iconSize} ${iconSize}`,
        fill: fill,
        "aria-hidden": true,
        children: [/*#__PURE__*/jsx(StyledPath, {
          $icon: checkbox$1,
          name: "checked"
        }), /*#__PURE__*/jsx(StyledPath, {
          $icon: checkbox_outline,
          name: "not-checked"
        })]
      })]
    })
  });
});

export { CheckboxInput };