@ntragas/pouncejstest/dist/cjs/components/Radio/useRadioStyles.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _helpers = require("../../utils/helpers");

var _useTheme = _interopRequireDefault(require("../../utils/useTheme"));

var useRadioStyles = function useRadioStyles(_ref) {
  var invalid = _ref.invalid,
      checked = _ref.checked;
  var theme = (0, _useTheme.default)();
  return _react.default.useMemo(function () {
    return {
      transition: 'background-color 0.15s linear',
      _hover: {
        backgroundColor: (0, _helpers.addOpacity)(theme.colors['navyblue-300'], 0.2),
        ':after': {
          borderColor: invalid ? 'red-300' : 'blue-400'
        }
      },
      _focusWithin: {
        backgroundColor: (0, _helpers.addOpacity)(theme.colors['navyblue-300'], 0.2),
        ':after': {
          borderColor: invalid ? 'red-300' : 'blue-400'
        }
      },
      _before: {
        content: '""',
        display: 'block',
        position: 'absolute',
        top: 0,
        left: 0,
        opacity: checked ? 1 : 0,
        transition: 'opacity 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
        right: 0,
        bottom: 0,
        margin: 'auto',
        width: 12,
        height: 12,
        backgroundColor: 'white',
        borderRadius: 'circle'
      },
      _after: {
        content: '""',
        display: 'block',
        width: 26,
        height: 26,
        border: '1px solid',
        borderRadius: 'circle',
        transition: 'border-color 125ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
        borderColor: invalid ? 'red-300' : checked ? 'blue-400' : 'navyblue-300'
      }
    };
  }, [theme, invalid, checked]);
};

var _default = useRadioStyles;
exports.default = _default;