@chayns-components/core/lib/cjs/components/checkbox/Checkbox.styles.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBoxWrapper = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;
    min-height: 20px;
`;
const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    left: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    white-space: nowrap;
    width: 1px;

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
            &:focus-visible + div > label {
                transition: none;
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
            }
        `}
`;
const StyledCheckboxBoxWrapper = exports.StyledCheckboxBoxWrapper = _styledComponents.default.div`
    display: flex;
    flex-shrink: 0;
    height: 16px;
    position: absolute;

    ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch && (0, _styledComponents.css)`
            right: 42px;
        `}
`;
const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.label`
    color: ${({
  theme
}) => theme.text};
    cursor: ${({
  $isDisabled
}) => $isDisabled ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    position: relative;
    display: inline-block;
    width: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '44px' : '16px'};
    transition: opacity 0.2s ease;
    user-select: none;
    height: 16px;

    &:after {
        ${({
  $isChecked,
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? (0, _styledComponents.css)`
                      background-color: white;
                      border-radius: 50%;
                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                      height: 16px;
                      left: 7px;
                      top: 50%;
                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                      transition: transform 0.2s ease;
                      width: 16px;
                  ` : (0, _styledComponents.css)`
                      border-right: 2px solid #fff;
                      border-bottom: 2px solid #fff;
                      height: 10px;
                      left: 2px;
                      opacity: ${$isChecked ? 1 : 0};
                      top: calc(50% - 2px);
                      transform: rotateZ(37deg) translateY(-50%);
                      transition: opacity 0.2s ease;
                      width: 5px;
                  `}

        content: ' ';
        position: absolute;
    }

    &:before {
        background-color: ${({
  $isChecked,
  $shouldShowAsSwitch,
  $checkedBackgroundColor,
  $uncheckedBackgroundColor,
  theme
}) => {
  const activeBackgroundColor = $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);
  const inactiveBackgroundColor = $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);
  if ($shouldShowAsSwitch) {
    return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
  }
  return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
}};

        border: ${({
  $borderColor,
  $shouldShowAsSwitch,
  theme
}) => {
  if ($shouldShowAsSwitch) {
    return 'none';
  }
  const fallbackBorderColor = theme['409-rgb'] ? `rgba(${theme['409-rgb']}, 0.5)` : theme.text;
  return `1px solid ${$borderColor ?? fallbackBorderColor}`;
}};

        border-radius: ${({
  $shouldShowAsSwitch,
  $borderRadius
}) => $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};
        content: ' ';
        height: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '13px' : '15px'};
        left: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '10px' : 0};
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: background-color 0.2s ease;
        width: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '28px' : '15px'};
    }
}
`;
const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.default.label`
    color: ${({
  theme
}) => theme.text};
    cursor: ${({
  $shouldChangeOnLabelClick
}) => !$shouldChangeOnLabelClick ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    transition: opacity 0.2s ease;
    user-select: none;
    ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? (0, _styledComponents.css)`
                  padding-right: 48px;
              ` : (0, _styledComponents.css)`
                  padding-left: 20px;
              `}
`;
//# sourceMappingURL=Checkbox.styles.js.map