@cashub/ui 0.48.16 → 0.48.18

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 (3) hide show
  1. package/form/Checkbox.js +29 -9
  2. package/iconbox/IconBoxV2.js +14 -7
  3. 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/iconbox/IconBoxV2.js CHANGED
@@ -4,22 +4,29 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _styledComponents = _interopRequireDefault(require("styled-components"));
7
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
9
9
  var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
11
11
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
14
  function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
13
- const IconBoxV2 = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: var(--spacing);\n margin-bottom: var(--spacing);\n background: var(--color-background1);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n color: var(--font-on-background);\n\n ", "\n"])), _ref => {
15
+ const IconBoxV2 = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: var(--spacing);\n margin-bottom: var(--spacing);\n background: var(--color-background1);\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n color: var(--font-on-background);\n border: 2px solid transparent;\n\n ", "\n\n ", "\n"])), _ref => {
14
16
  let {
15
17
  fullHeight
16
18
  } = _ref;
17
19
  return fullHeight && 'height: calc(100% - var(--spacing));';
20
+ }, _ref2 => {
21
+ let {
22
+ selected
23
+ } = _ref2;
24
+ return selected && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-color: var(--color-primary);\n background: color-mix(\n in srgb,\n var(--color-primary) 10%,\n var(--color-background1)\n );\n "])));
18
25
  });
19
- const Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n"])));
20
- const Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n font-size: var(--font-body1);\n"])));
21
- const Info = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n word-break: break-all;\n\n &:not(:last-child) {\n margin-bottom: var(--spacing-s);\n }\n"])));
22
- const Tool = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: 0 0 calc(var(--spacing-s) + 36px);\n padding-left: var(--spacing-s);\n\n > *:not(:last-child) {\n margin-bottom: var(--spacing-s);\n }\n"])));
26
+ const Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n"])));
27
+ const Description = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n font-size: var(--font-body1);\n"])));
28
+ const Info = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n word-break: break-all;\n\n &:not(:last-child) {\n margin-bottom: var(--spacing-s);\n }\n"])));
29
+ const Tool = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n flex: 0 0 calc(var(--spacing-s) + 36px);\n padding-left: var(--spacing-s);\n\n > *:not(:last-child) {\n margin-bottom: var(--spacing-s);\n }\n"])));
23
30
  var _default = exports.default = Object.assign(IconBoxV2, {
24
31
  Body,
25
32
  Description,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cashub/ui",
3
- "version": "0.48.16",
3
+ "version": "0.48.18",
4
4
  "private": false,
5
5
  "author": "CasHUB Team",
6
6
  "description": "CasHUB UI components library",