@cashub/ui 0.48.16 → 0.48.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/form/Checkbox.js +29 -9
  2. package/package.json +1 -1
package/form/Checkbox.js CHANGED
@@ -25,7 +25,8 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
25
25
  onChange,
26
26
  noMargin,
27
27
  fontSizeBig,
28
- marginRight
28
+ marginRight,
29
+ variant = 'square'
29
30
  } = _ref;
30
31
  const inputRef = (0, _react.useRef)(null);
31
32
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledLabel, {
@@ -35,6 +36,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
35
36
  noMargin: noMargin,
36
37
  fontSizeBig: fontSizeBig,
37
38
  marginRight: marginRight,
39
+ variant: variant,
38
40
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCheckbox, {
39
41
  ref: inputRef,
40
42
  checked: checked,
@@ -45,7 +47,10 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
45
47
  onChange: onChange,
46
48
  fontSizeBig: fontSizeBig
47
49
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
48
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Unchecked, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checked, {
50
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Unchecked, {
51
+ variant: variant
52
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checked, {
53
+ variant: variant,
49
54
  children: indeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdRemove, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
50
55
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
51
56
  children: text
@@ -53,8 +58,8 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
53
58
  })]
54
59
  });
55
60
  });
56
- const StyledCheckbox = (0, _styledComponents.default)(_Input.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n\n &:checked + span {\n > div:last-of-type {\n display: block;\n color: var(--color-primary);\n }\n > div:first-of-type {\n display: none;\n }\n }\n"])));
57
- const StyledLabel = (0, _styledComponents.default)(_Label.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: pointer;\n vertical-align: middle;\n\n ", "\n\n > span {\n ", "\n display: flex;\n align-items: center;\n\n > div {\n margin-right: var(--spacing-xs);\n width: 24px;\n height: 24px;\n border-radius: 4px;\n }\n\n > div:last-of-type {\n display: none;\n }\n }\n\n ", "\n\n ", "\n"])), _ref2 => {
61
+ const StyledCheckbox = (0, _styledComponents.default)(_Input.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: none;\n\n &:checked + span {\n > div:last-of-type {\n display: block;\n color: var(--color-primary);\n }\n\n > div:first-of-type {\n display: none;\n }\n }\n"])));
62
+ const StyledLabel = (0, _styledComponents.default)(_Label.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: pointer;\n vertical-align: middle;\n\n ", "\n\n > span {\n ", "\n\n display: flex;\n align-items: center;\n\n > div {\n margin-right: var(--spacing-xs);\n width: 24px;\n height: 24px;\n border-radius: ", ";\n }\n\n > div:last-of-type {\n display: none;\n }\n }\n\n ", "\n\n ", "\n"])), _ref2 => {
58
63
  let {
59
64
  marginRight
60
65
  } = _ref2;
@@ -66,16 +71,31 @@ const StyledLabel = (0, _styledComponents.default)(_Label.default)(_templateObje
66
71
  return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
67
72
  }, _ref4 => {
68
73
  let {
69
- fontSizeBig
74
+ variant
70
75
  } = _ref4;
71
- return fontSizeBig && 'font-size: var(--font-h3);';
76
+ return variant === 'circle' ? '50%' : '4px';
72
77
  }, _ref5 => {
73
78
  let {
74
- noMargin
79
+ fontSizeBig
75
80
  } = _ref5;
81
+ return fontSizeBig && 'font-size: var(--font-h3);';
82
+ }, _ref6 => {
83
+ let {
84
+ noMargin
85
+ } = _ref6;
76
86
  return noMargin && 'margin: 0;';
77
87
  });
78
- const Unchecked = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n border: var(--border-width) solid var(--border-color);\n"])));
79
- const Checked = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n border: var(--border-width) solid var(--color-primary);\n background: var(--color-primary);\n position: relative;\n\n > svg {\n position: absolute;\n color: var(--font-on-primary);\n font-size: var(--font-h3);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"])));
88
+ const Unchecked = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n border: var(--border-width) solid var(--border-color);\n border-radius: ", ";\n"])), _ref7 => {
89
+ let {
90
+ variant
91
+ } = _ref7;
92
+ return variant === 'circle' ? '50%' : '4px';
93
+ });
94
+ const Checked = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n border: var(--border-width) solid var(--color-primary);\n background: var(--color-primary);\n position: relative;\n border-radius: ", ";\n\n > svg {\n position: absolute;\n color: var(--font-on-primary);\n font-size: var(--font-h3);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"])), _ref8 => {
95
+ let {
96
+ variant
97
+ } = _ref8;
98
+ return variant === 'circle' ? '50%' : '4px';
99
+ });
80
100
  const Text = _styledComponents.default.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n word-break: break-all;\n"])));
81
101
  var _default = exports.default = Checkbox;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cashub/ui",
3
- "version": "0.48.16",
3
+ "version": "0.48.17",
4
4
  "private": false,
5
5
  "author": "CasHUB Team",
6
6
  "description": "CasHUB UI components library",