@spark-web/checkbox/dist/spark-web-checkbox.cjs.dev.js

--- title: Checkbox storybookPath: forms-checkbox--default isExperimentalPackage: false ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var controlLabel = require('@spark-web/control-label');
var field = require('@spark-web/field');
var stack = require('@spark-web/stack');
var react = require('react');
var css = require('@emotion/css');
var a11y = require('@spark-web/a11y');
var box = require('@spark-web/box');
var icon = require('@spark-web/icon');
var theme = require('@spark-web/theme');
var jsxRuntime = require('react/jsx-runtime');

var _excluded$1 = ["size"];
var CheckboxPrimitive = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'small' : _ref$size,
      inputProps = _objectWithoutProperties(_ref, _excluded$1);

  var theme$1 = theme.useTheme();
  var checkboxStyles = useCheckbox(size);
  var responsiveStyles = theme$1.utils.responsiveStyles({
    mobile: {
      height: theme$1.typography.text.small.mobile.capHeight
    },
    tablet: {
      height: theme$1.typography.text.small.tablet.capHeight
    }
  });
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
    display: "flex",
    alignItems: "center",
    flexShrink: 0,
    className: css.css(responsiveStyles),
    children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, inputProps), checkboxStyles), {}, {
      "aria-checked": inputProps.checked,
      "aria-disabled": inputProps.disabled,
      ref: forwardedRef,
      as: "input",
      type: "checkbox"
    })), /*#__PURE__*/jsxRuntime.jsx(icon.CheckIcon, {
      size: sizeToScaleKey[size]
    })]
  });
});
CheckboxPrimitive.displayName = 'CheckboxPrimitive';
var sizeToScaleKey = {
  small: 'xxsmall',
  medium: 'xsmall'
};

function useCheckbox(size) {
  var theme$1 = theme.useTheme();
  var focusRingStyles = a11y.useFocusRing({
    always: true
  });
  var outerSize = sizeToScaleKey[size];
  var transitionProperties = {
    transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
    transitionTimingFunction: theme$1.animation.standard.easing,
    transitionDuration: "".concat(theme$1.animation.standard.duration, "ms")
  };
  return {
    border: 'field',
    borderRadius: 'small',
    background: 'surface',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    height: outerSize,
    width: outerSize,
    position: 'relative',
    shadow: 'small',
    className: css.css(_objectSpread(_objectSpread({
      appearance: 'none',
      verticalAlign: 'text-bottom'
    }, transitionProperties), {}, {
      '&::before': _objectSpread({
        content: '""',
        position: 'absolute',
        margin: 'auto',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        height: 0,
        width: 0,
        overflow: 'hidden'
      }, transitionProperties),
      'label:hover &:not([disabled], &[aria-disabled=true])': {
        borderColor: theme$1.border.color.primaryHover
      },
      '& + svg': {
        position: 'absolute',
        pointerEvents: 'none',
        opacity: 0
      },
      '&:focus': focusRingStyles,
      '&:checked': {
        background: theme$1.color.background.primary,
        borderColor: theme$1.border.color.primaryHover,
        '+ svg': {
          opacity: 1,
          stroke: theme$1.color.foreground.neutralInverted
        }
      },
      'label:hover &:not([disabled], &[aria-disabled=true]):checked': {
        // TODO: checkbox gets lighter on hover instead of darker like in the designs, will fix once tokens are revised
        background: theme$1.backgroundInteractions.primaryHover,
        border: theme$1.border.color.fieldAccent
      },
      '&[disabled]:checked, &[aria-disabled=true]:checked': {
        // TODO: using a `border` color for background here as we don't have a token for it just yet
        background: theme$1.border.color.field,
        border: theme$1.border.color.accent,
        '+ svg': {
          stroke: theme$1.color.foreground.neutral
        }
      },
      '&[disabled]:checked::before, &[aria-disabled=true]:checked::before': {
        background: theme$1.color.background.fieldAccent
      }
    }))
  };
}

var _excluded = ["children", "data", "disabled", "id", "message", "size", "tone"];
var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
  var children = _ref.children,
      data = _ref.data,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      idProp = _ref.id,
      message = _ref.message,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'small' : _ref$size,
      _ref$tone = _ref.tone,
      tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
      inputProps = _objectWithoutProperties(_ref, _excluded);

  var _useFieldIds = field.useFieldIds(idProp),
      inputId = _useFieldIds.inputId,
      messageId = _useFieldIds.messageId;

  var a11yProps = {
    'aria-describedby': message && messageId
  };
  return /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
    gap: "small",
    children: [/*#__PURE__*/jsxRuntime.jsx(controlLabel.ControlLabel, {
      control: /*#__PURE__*/jsxRuntime.jsx(CheckboxPrimitive, _objectSpread(_objectSpread(_objectSpread({}, inputProps), a11yProps), {}, {
        ref: forwardedRef,
        disabled: disabled,
        size: size,
        id: inputId,
        data: data
      })),
      disabled: disabled,
      htmlFor: inputId,
      size: size,
      children: children
    }), message && /*#__PURE__*/jsxRuntime.jsx(field.FieldMessage, {
      tone: tone,
      id: messageId,
      message: message
    })]
  });
});
Checkbox.displayName = 'Checkbox';

exports.Checkbox = Checkbox;
exports.CheckboxPrimitive = CheckboxPrimitive;