@cashub/ui 0.32.1 → 0.33.0

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 (8) hide show
  1. package/datetimePicker/DatetimePicker.js +5 -3
  2. package/form/Fieldset.js +12 -0
  3. package/form/index.js +7 -0
  4. package/package.json +1 -1
  5. package/styles/GlobalStyle.js +14 -9
  6. package/styles/theme/dark.theme.js +3 -0
  7. package/styles/theme/light.theme.js +3 -0
  8. package/styles/theme/white.theme.js +3 -0
package/datetimePicker/DatetimePicker.js CHANGED
@@ -28,7 +28,8 @@ const DatetimePicker = _ref => {
28
28
  showTimeInput,
29
29
  readOnly,
30
30
  disabled,
31
- onBlur
31
+ onBlur,
32
+ allowClear = false
32
33
  } = _ref;
33
34
  const datepickerRef = (0, _react.useRef)(null);
34
35
  const handleOnBlur = () => {
@@ -40,7 +41,8 @@ const DatetimePicker = _ref => {
40
41
  onChange,
41
42
  selected: selected ? new Date(Date.parse(selected)) : '',
42
43
  minDate: minDate ? new Date(Date.parse(minDate)) : '',
43
- maxDate: maxDate ? new Date(Date.parse(maxDate)) : ''
44
+ maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
45
+ isClearable: allowClear && selected
44
46
  };
45
47
  if (showTimeInput) {
46
48
  datePickerProps.showTimeInput = true;
@@ -64,7 +66,7 @@ const DatetimePicker = _ref => {
64
66
  }))
65
67
  });
66
68
  };
67
- const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n width: 100%;\n\n > input {\n width: 100%;\n height: 36px;\n color: var(--font-on-background);\n background: transparent;\n border-radius: var(--border-radius-l);\n border: var(--border-width) solid var(--border-color);\n padding: 0 var(--spacing-s);\n outline: none;\n\n ", "\n }\n }\n\n .react-datepicker-popper {\n z-index: 2;\n }\n\n .react-datepicker-popper[data-placement^='top'] {\n padding-bottom: var(--spacing-xs);\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n padding-top: var(--spacing-xs);\n }\n\n .react-datepicker {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n padding: var(--spacing-s);\n font-size: var(--font-body1);\n color: var(--font-on-background);\n background: var(--color-background1);\n\n .react-datepicker__triangle {\n &::before,\n &::after {\n display: none;\n }\n }\n\n .react-datepicker__header {\n border: none;\n padding: 0;\n background: var(--color-background1);\n }\n\n .react-datepicker__current-month {\n line-height: 36px;\n color: var(--font-on-background);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n }\n\n .react-datepicker__day-names {\n margin: 0;\n }\n\n .react-datepicker__day-name,\n .react-datepicker__day {\n width: 36px;\n height: 36px;\n line-height: 36px;\n color: var(--font-on-background);\n font-weight: var(--font-normal);\n margin: 0;\n border-radius: 4px;\n }\n\n .react-datepicker__day:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__day--disabled {\n color: var(--font-on-mute);\n background: none !important;\n }\n }\n\n .react-datepicker__month {\n margin: 0;\n }\n\n .react-datepicker__navigation {\n top: 0;\n width: 36px;\n height: 36px;\n margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n border-radius: 4px;\n\n &.react-datepicker__navigation--previous {\n left: 0;\n }\n\n &.react-datepicker__navigation--next {\n right: 0;\n }\n\n &:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__navigation-icon::before {\n border-color: var(--font-on-background);\n }\n\n .react-datepicker__navigation-icon--previous::before {\n right: -4px;\n }\n\n .react-datepicker__navigation-icon--next::before {\n left: -4px;\n }\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--selected,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--selected,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--selected,\n .react-datepicker__year-text--in-selecting-range,\n .react-datepicker__year-text--in-range {\n background: var(--color-primary) !important;\n }\n\n .react-datepicker__day--keyboard-selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected {\n background: none;\n }\n\n .react-datepicker__input-time-container {\n margin: 0;\n margin-top: var(--spacing-s);\n margin-left: var(--spacing-xs);\n\n .react-datepicker-time__input input {\n height: 36px;\n padding: 0 var(--spacing-xs);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n background: transparent;\n color: var(--font-on-background);\n outline: none;\n }\n }\n"])), _ref2 => {
69
+ const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n width: 100%;\n\n > input {\n width: 100%;\n height: 36px;\n color: var(--font-on-background);\n background: transparent;\n border-radius: var(--border-radius-l);\n border: var(--border-width) solid var(--border-color);\n padding: 0 var(--spacing-s);\n outline: none;\n\n ", "\n }\n \n > input + button {\n padding: 0;\n right: var(--spacing-s);\n &::after {\n color: var(--color-primary);\n background-color: transparent;\n font-size: 24px;\n padding: 0;\n }\n }\n }\n\n .react-datepicker-popper {\n z-index: 2;\n }\n\n .react-datepicker-popper[data-placement^='top'] {\n padding-bottom: var(--spacing-xs);\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n padding-top: var(--spacing-xs);\n }\n\n .react-datepicker {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n padding: var(--spacing-s);\n font-size: var(--font-body1);\n color: var(--font-on-background);\n background: var(--color-background1);\n\n .react-datepicker__triangle {\n &::before,\n &::after {\n display: none;\n }\n }\n\n .react-datepicker__header {\n border: none;\n padding: 0;\n background: var(--color-background1);\n }\n\n .react-datepicker__current-month {\n line-height: 36px;\n color: var(--font-on-background);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n }\n\n .react-datepicker__day-names {\n margin: 0;\n }\n\n .react-datepicker__day-name,\n .react-datepicker__day {\n width: 36px;\n height: 36px;\n line-height: 36px;\n color: var(--font-on-background);\n font-weight: var(--font-normal);\n margin: 0;\n border-radius: 4px;\n }\n\n .react-datepicker__day:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__day--disabled {\n color: var(--font-on-mute);\n background: none !important;\n }\n }\n\n .react-datepicker__month {\n margin: 0;\n }\n\n .react-datepicker__navigation {\n top: 0;\n width: 36px;\n height: 36px;\n margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n border-radius: 4px;\n\n &.react-datepicker__navigation--previous {\n left: 0;\n }\n\n &.react-datepicker__navigation--next {\n right: 0;\n }\n\n &:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__navigation-icon::before {\n border-color: var(--font-on-background);\n }\n\n .react-datepicker__navigation-icon--previous::before {\n right: -4px;\n }\n\n .react-datepicker__navigation-icon--next::before {\n left: -4px;\n }\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--selected,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--selected,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--selected,\n .react-datepicker__year-text--in-selecting-range,\n .react-datepicker__year-text--in-range {\n background: var(--color-primary) !important;\n }\n\n .react-datepicker__day--keyboard-selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected {\n background: none;\n }\n\n .react-datepicker__input-time-container {\n margin: 0;\n margin-top: var(--spacing-s);\n margin-left: var(--spacing-xs);\n\n .react-datepicker-time__input input {\n height: 36px;\n padding: 0 var(--spacing-xs);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n background: transparent;\n color: var(--font-on-background);\n outline: none;\n }\n }\n"])), _ref2 => {
68
70
  let {
69
71
  disabled
70
72
  } = _ref2;
package/form/Fieldset.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _templateObject;
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
11
+ const Fieldset = _styledComponents.default.fieldset(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius-s);\n padding: var(--spacing-s);\n\n &[disabled] {\n border-color: var(--border-color-transparent);\n }\n"])));
12
+ var _default = exports.default = Fieldset;
package/form/index.js CHANGED
@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Checkbox", {
9
9
  return _Checkbox.default;
10
10
  }
11
11
  });
12
+ Object.defineProperty(exports, "Fieldset", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _Fieldset.default;
16
+ }
17
+ });
12
18
  Object.defineProperty(exports, "FormItem", {
13
19
  enumerable: true,
14
20
  get: function () {
@@ -70,6 +76,7 @@ Object.defineProperty(exports, "TreeView", {
70
76
  }
71
77
  });
72
78
  var _Checkbox = _interopRequireDefault(require("./Checkbox"));
79
+ var _Fieldset = _interopRequireDefault(require("./Fieldset"));
73
80
  var _FormItem = _interopRequireDefault(require("./FormItem"));
74
81
  var _Input = _interopRequireDefault(require("./Input"));
75
82
  var _Label = _interopRequireDefault(require("./Label"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cashub/ui",
3
- "version": "0.32.1",
3
+ "version": "0.33.0",
4
4
  "private": false,
5
5
  "author": "CasHUB Team",
6
6
  "description": "CasHUB UI components library",
package/styles/GlobalStyle.js CHANGED
@@ -9,7 +9,7 @@ require("normalize.css");
9
9
  require("../assets/css/global.css");
10
10
  var _templateObject;
11
11
  function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
12
- const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n body {\n --color-white: ", ";\n --color-dark: ", ";\n --color-grey: ", ";\n --color-primary: ", ";\n --color-success: ", ";\n --color-warning: ", ";\n --color-danger: ", ";\n --color-hover: ", ";\n --color-active: ", ";\n --color-scroll-bar: ", ";\n --color-background1: ", ";\n --color-background2: ", ";\n --color-background3: ", ";\n --color-backdrop: ", ";\n\n --font-h1: ", ";\n --font-h2: ", ";\n --font-h3: ", ";\n --font-body1: ", ";\n --font-body2: ", ";\n --font-button: ", ";\n --font-caption: ", ";\n --font-family: ", ";\n --font-normal: ", ";\n --font-bold: ", ";\n --font-on-primary: ", ";\n --font-on-success: ", ";\n --font-on-warning: ", ";\n --font-on-danger: ", ";\n --font-on-background: ", ";\n --font-on-mute: ", ";\n\n --box-shadow: ", ";\n --border-color: ", ";\n --border-width: ", ";\n --border-radius-s: ", ";\n --border-radius: ", ";\n --border-radius-l: ", ";\n --border-radius-round: ", ";\n\n --spacing-xs: ", ";\n --spacing-s: ", ";\n --spacing: ", ";\n --spacing-l: ", ";\n\n /* Global style */\n font-size: 16px;\n font-family: Helvetica;\n overflow-x: hidden;\n background: var(--color-background1);\n }\n\n /* Custom normalize */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n html {\n line-height: 1;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n }\n \n a {\n text-decoration: none;\n }\n\n button,\n input,\n optgroup,\n select,\n textarea {\n line-height: 1;\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n li {\n list-style: none;\n }\n\n figure {\n margin: 0;\n }\n\n p {\n margin: 0;\n }\n\n dl,\n dt,\n dd {\n margin: 0;\n }\n\n .margin-bottom-s {\n margin-bottom: var(--spacing-s);\n }\n"])), _ref => {
12
+ const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n body {\n --color-white: ", ";\n --color-dark: ", ";\n --color-grey: ", ";\n --color-primary: ", ";\n --color-success: ", ";\n --color-warning: ", ";\n --color-danger: ", ";\n --color-hover: ", ";\n --color-active: ", ";\n --color-scroll-bar: ", ";\n --color-background1: ", ";\n --color-background2: ", ";\n --color-background3: ", ";\n --color-backdrop: ", ";\n\n --font-h1: ", ";\n --font-h2: ", ";\n --font-h3: ", ";\n --font-body1: ", ";\n --font-body2: ", ";\n --font-button: ", ";\n --font-caption: ", ";\n --font-family: ", ";\n --font-normal: ", ";\n --font-bold: ", ";\n --font-on-primary: ", ";\n --font-on-success: ", ";\n --font-on-warning: ", ";\n --font-on-danger: ", ";\n --font-on-background: ", ";\n --font-on-mute: ", ";\n\n --box-shadow: ", ";\n --border-color: ", ";\n --border-color-transparent: ", ";\n --border-width: ", ";\n --border-radius-s: ", ";\n --border-radius: ", ";\n --border-radius-l: ", ";\n --border-radius-round: ", ";\n\n --spacing-xs: ", ";\n --spacing-s: ", ";\n --spacing: ", ";\n --spacing-l: ", ";\n\n /* Global style */\n font-size: 16px;\n font-family: Helvetica;\n overflow-x: hidden;\n background: var(--color-background1);\n }\n\n /* Custom normalize */\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n html {\n line-height: 1;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n }\n \n a {\n text-decoration: none;\n }\n\n button,\n input,\n optgroup,\n select,\n textarea {\n line-height: 1;\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n li {\n list-style: none;\n }\n\n figure {\n margin: 0;\n }\n\n p {\n margin: 0;\n }\n\n dl,\n dt,\n dd {\n margin: 0;\n }\n\n .margin-bottom-s {\n margin-bottom: var(--spacing-s);\n }\n"])), _ref => {
13
13
  let {
14
14
  theme
15
15
  } = _ref;
@@ -173,46 +173,51 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject ||
173
173
  let {
174
174
  theme
175
175
  } = _ref33;
176
- return theme.borderWidth;
176
+ return theme.borderColorTransparent;
177
177
  }, _ref34 => {
178
178
  let {
179
179
  theme
180
180
  } = _ref34;
181
- return theme.borderRadiusS;
181
+ return theme.borderWidth;
182
182
  }, _ref35 => {
183
183
  let {
184
184
  theme
185
185
  } = _ref35;
186
- return theme.borderRadius;
186
+ return theme.borderRadiusS;
187
187
  }, _ref36 => {
188
188
  let {
189
189
  theme
190
190
  } = _ref36;
191
- return theme.borderRadiusL;
191
+ return theme.borderRadius;
192
192
  }, _ref37 => {
193
193
  let {
194
194
  theme
195
195
  } = _ref37;
196
- return theme.borderRadiusRound;
196
+ return theme.borderRadiusL;
197
197
  }, _ref38 => {
198
198
  let {
199
199
  theme
200
200
  } = _ref38;
201
- return theme.spacerXS;
201
+ return theme.borderRadiusRound;
202
202
  }, _ref39 => {
203
203
  let {
204
204
  theme
205
205
  } = _ref39;
206
- return theme.spacerS;
206
+ return theme.spacerXS;
207
207
  }, _ref40 => {
208
208
  let {
209
209
  theme
210
210
  } = _ref40;
211
- return theme.spacer;
211
+ return theme.spacerS;
212
212
  }, _ref41 => {
213
213
  let {
214
214
  theme
215
215
  } = _ref41;
216
+ return theme.spacer;
217
+ }, _ref42 => {
218
+ let {
219
+ theme
220
+ } = _ref42;
216
221
  return theme.spacerL;
217
222
  });
218
223
  var _default = exports.default = GlobalStyle;
package/styles/theme/dark.theme.js CHANGED
@@ -53,6 +53,7 @@ const darkTheme = {
53
53
  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
54
54
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
55
55
  borderColor: colorStyle.colorGrey,
56
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
56
57
  borderWidth: '1px',
57
58
  borderRadiusS: '0.5rem',
58
59
  borderRadius: '1rem',
@@ -66,6 +67,7 @@ const darkTheme = {
66
67
  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
67
68
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
68
69
  borderColor: colorStyle.colorGrey,
70
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
69
71
  borderWidth: '1px',
70
72
  borderRadiusS: '0.5rem',
71
73
  borderRadius: '1rem',
@@ -79,6 +81,7 @@ const darkTheme = {
79
81
  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
80
82
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
81
83
  borderColor: colorStyle.colorGrey,
84
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
82
85
  borderWidth: '1px',
83
86
  borderRadiusS: '0.5rem',
84
87
  borderRadius: '1rem',
package/styles/theme/light.theme.js CHANGED
@@ -53,6 +53,7 @@ const lightTheme = {
53
53
  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
54
54
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
55
55
  borderColor: colorStyle.colorGrey,
56
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
56
57
  borderWidth: '1px',
57
58
  borderRadiusS: '0.5rem',
58
59
  borderRadius: '1rem',
@@ -66,6 +67,7 @@ const lightTheme = {
66
67
  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
67
68
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
68
69
  borderColor: colorStyle.colorGrey,
70
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
69
71
  borderWidth: '1px',
70
72
  borderRadiusS: '0.5rem',
71
73
  borderRadius: '1rem',
@@ -79,6 +81,7 @@ const lightTheme = {
79
81
  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
80
82
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
81
83
  borderColor: colorStyle.colorGrey,
84
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
82
85
  borderWidth: '1px',
83
86
  borderRadiusS: '0.5rem',
84
87
  borderRadius: '1rem',
package/styles/theme/white.theme.js CHANGED
@@ -53,6 +53,7 @@ const whiteTheme = {
53
53
  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
54
54
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
55
55
  borderColor: colorStyle.colorGrey,
56
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
56
57
  borderWidth: '1px',
57
58
  borderRadiusS: '0.5rem',
58
59
  borderRadius: '1rem',
@@ -66,6 +67,7 @@ const whiteTheme = {
66
67
  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
67
68
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
68
69
  borderColor: colorStyle.colorGrey,
70
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
69
71
  borderWidth: '1px',
70
72
  borderRadiusS: '0.5rem',
71
73
  borderRadius: '1rem',
@@ -79,6 +81,7 @@ const whiteTheme = {
79
81
  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
80
82
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
81
83
  borderColor: colorStyle.colorGrey,
84
+ borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
82
85
  borderWidth: '1px',
83
86
  borderRadiusS: '0.5rem',
84
87
  borderRadius: '1rem',