@rescui/checkbox 0.7.3 → 0.8.1

package/lib/_virtual/index.css.js

@@ -0,0 +1,10 @@
+var styles = {
+  "icon": "_icon_ekw7ne_4",
+  "sizeXS": "_sizeXS_ekw7ne_14",
+  "sizeS": "_sizeS_ekw7ne_18",
+  "sizeM": "_sizeM_ekw7ne_22",
+  "sizeL": "_sizeL_ekw7ne_26",
+  "light": "_light_ekw7ne_30",
+  "dark": "_dark_ekw7ne_34"
+};
+export { styles as default };

package/lib/_virtual/warning.js

@@ -0,0 +1,37 @@
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './index.css.js';
+var _excluded = ["theme", "size", "className"];
+var sizeStyles = {
+  "xs": styles.sizeXS,
+  "s": styles.sizeS,
+  "m": styles.sizeM,
+  "l": styles.sizeL
+};
+var WarningIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var theme = _ref.theme,
+      size = _ref.size,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24"
+  }, props, {
+    className: cn(styles.icon, styles[theme], sizeStyles[size], className),
+    ref: ref
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M2.769 20h18.363a.615.615 0 00.546-.891L12.504 2.8a.566.566 0 00-.989-.002C9.8 5.891 4.026 16.101 2.322 19.112A.61.61 0 002.77 20zm8.229-12h2v6h-2V8zm0 8h2v2h-2v-2z"
+  }));
+});
+WarningIcon.propTypes = {
+  className: PropTypes.string,
+  theme: PropTypes.oneOf(["light", "dark"]),
+  size: PropTypes.oneOf(["xs", "s", "m", "l"])
+};
+WarningIcon.defaultProps = {
+  size: "m"
+};
+export { WarningIcon as default };

package/lib/checkbox.js

@@ -13,33 +13,55 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MenuItem } from '@rescui/menu';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import cn from 'classnames';
+import WarningIcon from './_virtual/warning.js';
 import CheckboxControl from './parts/checkbox-control.js';
+import { GroupContext } from './parts/group-context.js';
 import styles from './parts/checkbox.p.module.css.js';
+var THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+var SIZE_STYLES = {
+  s: styles.checkboxSizeS,
+  m: styles.checkboxSizeM,
+  l: styles.checkboxSizeL
+};
 var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       disabled = _ref.disabled,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
-      size = _ref.size,
-      theme = _ref.theme,
+      _ref$size = _ref.size,
+      propsSize = _ref$size === void 0 ? 'm' : _ref$size,
+      themeFromProps = _ref.theme,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
       onClick = _ref.onClick,
       error = _ref.error,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem, {
+  var theme = useThemeWithUndefined(themeFromProps);
+
+  var _useContext = useContext(GroupContext),
+      inGroup = _useContext.inGroup,
+      contextSize = _useContext.size;
+
+  var size = !inGroup ? propsSize : contextSize || propsSize;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(className, styles.container, THEME_STYLES[theme], SIZE_STYLES[size]),
+    "data-rs-internal": 'checkbox'
+  }, /*#__PURE__*/React.createElement(MenuItem, {
     tag: 'label',
     mode: 'clear',
     size: size,
     theme: theme,
     disabled: disabled,
-    className: className,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClick,
@@ -54,9 +76,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
       notUseLabelTag: true
     }, restProps))
   }, children), error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.errorMessage, styles.single),
-    "data-test": "checkbox-error-message"
-  }, error));
+    className: styles.errorMessage,
+    "data-test": "checkbox-error-message",
+    "data-rs-internal": "checkbox__error-message"
+  }, /*#__PURE__*/React.createElement(WarningIcon, {
+    "data-rs-internal": "checkbox__error-icon",
+    className: styles.errorIcon
+  }), /*#__PURE__*/React.createElement("span", null, error)));
 });
 Checkbox.propTypes = {
   checked: PropTypes.bool,