@gympass/yoga 7.29.0 → 7.30.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 (7) hide show
  1. package/cjs/Checkbox/web/Checkbox.js +27 -10
  2. package/cjs/Input/web/Field.js +5 -3
  3. package/cjs/Input/web/Input.js +5 -2
  4. package/esm/Checkbox/web/Checkbox.js +28 -9
  5. package/esm/Input/web/Field.js +5 -3
  6. package/esm/Input/web/Input.js +5 -2
  7. package/package.json +3 -3
package/cjs/Checkbox/web/Checkbox.js CHANGED
@@ -3,7 +3,7 @@
3
3
  exports.__esModule = true;
4
4
  exports["default"] = void 0;
5
5
 
6
- var _react = _interopRequireDefault(require("react"));
6
+ var _react = _interopRequireWildcard(require("react"));
7
7
 
8
8
  var _propTypes = require("prop-types");
9
9
 
@@ -15,7 +15,7 @@ var _yogaIcons = require("@gympass/yoga-icons");
15
15
 
16
16
  var _shared = require("../../shared");
17
17
 
18
- var _excluded = ["value", "label", "helper", "disabled", "checked", "error", "style", "className", "inverted", "theme"];
18
+ var _excluded = ["value", "label", "helper", "disabled", "checked", "error", "style", "className", "inverted", "indeterminate", "theme"];
19
19
 
20
20
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
21
21
 
@@ -23,8 +23,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
23
23
 
24
24
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
25
 
26
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
27
-
28
26
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
29
27
 
30
28
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -41,6 +39,7 @@ var CheckMark = _styledComponents["default"].div(_templateObject2 || (_templateO
41
39
  disabled = _ref2.disabled,
42
40
  inverted = _ref2.inverted,
43
41
  error = _ref2.error,
42
+ indeterminate = _ref2.indeterminate,
44
43
  _ref2$theme$yoga = _ref2.theme.yoga,
45
44
  _ref2$theme$yoga$colo = _ref2$theme$yoga.colors,
46
45
  primary = _ref2$theme$yoga$colo.primary,
@@ -56,18 +55,18 @@ var CheckMark = _styledComponents["default"].div(_templateObject2 || (_templateO
56
55
  var _feedback$attention = feedback.attention;
57
56
  borderColor = _feedback$attention[1];
58
57
 
59
- if (checked) {
58
+ if (checked || indeterminate) {
60
59
  var _feedback$attention2 = feedback.attention;
61
60
  bgColor = _feedback$attention2[1];
62
61
  }
63
62
  } else if (disabled) {
64
63
  borderColor = checkbox.disabled.border.color;
65
64
 
66
- if (checked) {
65
+ if (checked || indeterminate) {
67
66
  bgColor = checkbox.disabled.backgroundColor;
68
67
  borderColor = elements.lineAndBorders;
69
68
  }
70
- } else if (checked) {
69
+ } else if (checked || indeterminate) {
71
70
  borderColor = primary;
72
71
  bgColor = primary;
73
72
  checkColor = checkbox.checked.icon.color;
@@ -99,6 +98,7 @@ var CheckboxStyled = _styledComponents["default"].div(_templateObject5 || (_temp
99
98
  var checked = _ref5.checked,
100
99
  inverted = _ref5.inverted,
101
100
  disabled = _ref5.disabled,
101
+ indeterminate = _ref5.indeterminate,
102
102
  _ref5$theme$yoga = _ref5.theme.yoga,
103
103
  _ref5$theme$yoga$colo = _ref5$theme$yoga.colors,
104
104
  primary = _ref5$theme$yoga$colo.primary,
@@ -112,7 +112,7 @@ var CheckboxStyled = _styledComponents["default"].div(_templateObject5 || (_temp
112
112
  return white;
113
113
  }
114
114
 
115
- return checked ? primary : elements.backgroundAndDisabled;
115
+ return checked || indeterminate ? primary : elements.backgroundAndDisabled;
116
116
  };
117
117
 
118
118
  return "\n " + (disabled ? "pointer-events: none" : '') + "\n\n " + Label + ":active,\n &:focus-within,\n &:hover {\n " + Shadow + " {\n display: block;\n }\n }\n\n &:hover {\n " + Shadow + " {\n background-color: " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.25) + ";\n\n box-shadow: 0 0 0 " + shadowSize + "px\n " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.25) + ";\n }\n }\n\n &:focus-within {\n " + Shadow + " {\n background-color: " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.5) + ";\n\n box-shadow: 0 0 0 " + shadowSize + "px\n " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.5) + ";\n }\n }\n\n " + Label + ":active {\n " + Shadow + " {\n background-color: " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.75) + ";\n\n box-shadow: 0 0 0 " + shadowSize + "px\n " + (0, _yogaCommon.hexToRgb)(shadowColor(), 0.75) + ";\n }\n }\n ";
@@ -145,27 +145,40 @@ var Checkbox = function Checkbox(_ref8) {
145
145
  style = _ref8.style,
146
146
  className = _ref8.className,
147
147
  inverted = _ref8.inverted,
148
+ indeterminate = _ref8.indeterminate,
148
149
  checkbox = _ref8.theme.yoga.components.checkbox,
149
150
  rest = _objectWithoutPropertiesLoose(_ref8, _excluded);
150
151
 
152
+ var inputRef = (0, _react.useRef)(null);
153
+ (0, _react.useEffect)(function () {
154
+ if (inputRef.current) {
155
+ inputRef.current.indeterminate = indeterminate;
156
+ }
157
+ });
151
158
  return /*#__PURE__*/_react["default"].createElement(CheckboxWrapper, {
152
159
  style: style,
153
160
  className: className,
154
161
  disabled: disabled
155
162
  }, /*#__PURE__*/_react["default"].createElement(CheckboxStyled, {
156
163
  checked: checked,
164
+ indeterminate: indeterminate,
157
165
  inverted: inverted,
158
166
  disabled: disabled
159
167
  }, /*#__PURE__*/_react["default"].createElement(Label, null, /*#__PURE__*/_react["default"].createElement(Shadow, null), /*#__PURE__*/_react["default"].createElement(CheckMark, {
160
168
  disabled: disabled,
161
169
  checked: checked,
162
170
  error: error,
163
- inverted: inverted
164
- }, checked && /*#__PURE__*/_react["default"].createElement(_yogaIcons.Check, {
171
+ inverted: inverted,
172
+ indeterminate: indeterminate
173
+ }, checked && !indeterminate && /*#__PURE__*/_react["default"].createElement(_yogaIcons.Check, {
174
+ width: checkbox.size,
175
+ height: checkbox.size
176
+ }), indeterminate && /*#__PURE__*/_react["default"].createElement(_yogaIcons.Rectangle, {
165
177
  width: checkbox.size,
166
178
  height: checkbox.size
167
179
  })), /*#__PURE__*/_react["default"].createElement(_shared.HiddenInput, _extends({
168
180
  type: "checkbox",
181
+ ref: inputRef,
169
182
  checked: checked,
170
183
  disabled: disabled
171
184
  }, rest)), label)), (helper || error) && /*#__PURE__*/_react["default"].createElement(HelperWrapper, null, /*#__PURE__*/_react["default"].createElement(Helper, {
@@ -184,6 +197,9 @@ Checkbox.propTypes = {
184
197
  inverted: _propTypes.bool,
185
198
  error: _propTypes.string,
186
199
 
200
+ /** if true, the component appears indeterminate */
201
+ indeterminate: _propTypes.bool,
202
+
187
203
  /** set a style to the checkbox container */
188
204
  style: (0, _propTypes.shape)({}),
189
205
  className: _propTypes.string
@@ -195,6 +211,7 @@ Checkbox.defaultProps = {
195
211
  checked: false,
196
212
  disabled: false,
197
213
  inverted: false,
214
+ indeterminate: false,
198
215
  error: undefined,
199
216
  style: undefined,
200
217
  className: undefined
package/cjs/Input/web/Field.js CHANGED
@@ -5,7 +5,7 @@ exports["default"] = void 0;
5
5
 
6
6
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
7
7
 
8
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
9
9
 
10
10
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
11
 
@@ -22,7 +22,9 @@ var labelTransition = (0, _styledComponents.css)(_templateObject || (_templateOb
22
22
  });
23
23
 
24
24
  var Field = _styledComponents["default"].input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n\n appearance: none;\n background-color: transparent;\n outline: none;\n\n position: absolute;\n bottom: 0;\n left: 0;\n\n border: none;\n box-sizing: border-box;\n\n ", "\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n display: none;\n }\n\n &:invalid {\n box-shadow: none;\n }\n"])), function (_ref2) {
25
- var cleanable = _ref2.cleanable,
25
+ var label = _ref2.label,
26
+ placeholder = _ref2.placeholder,
27
+ cleanable = _ref2.cleanable,
26
28
  error = _ref2.error,
27
29
  value = _ref2.value,
28
30
  _ref2$theme$yoga = _ref2.theme.yoga,
@@ -30,7 +32,7 @@ var Field = _styledComponents["default"].input(_templateObject2 || (_templateObj
30
32
  colors = _ref2$theme$yoga.colors,
31
33
  baseFont = _ref2$theme$yoga.baseFont,
32
34
  input = _ref2$theme$yoga.components.input;
33
- return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, colors.text.disabled, input.label.color["default"], value && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n & ~ legend {\n max-width: max-content;\n }\n\n & ~ label {\n color: ", ";\n ", "\n }\n "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
35
+ return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n ", "\n\n ", "\n "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, placeholder && label ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: transparent;\n }\n "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: ", ";\n }\n "])), input.label.color["default"]), value && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n & ~ legend {\n max-width: max-content;\n }\n\n & ~ label {\n color: ", ";\n ", "\n }\n "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
34
36
  });
35
37
 
36
38
  var _default = Field;
package/cjs/Input/web/Input.js CHANGED
@@ -89,6 +89,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
89
89
  style: style,
90
90
  value: value
91
91
  }, /*#__PURE__*/_react["default"].createElement(_Field["default"], _extends({}, props, {
92
+ label: label,
92
93
  cleanable: cleanable,
93
94
  disabled: disabled,
94
95
  error: error,
@@ -143,7 +144,8 @@ Input.propTypes = {
143
144
  onClean: _propTypes.func,
144
145
 
145
146
  /** when max length helper is unnecessary to appear */
146
- hideMaxLength: _propTypes.bool
147
+ hideMaxLength: _propTypes.bool,
148
+ placeholder: _propTypes.string
147
149
  };
148
150
  Input.defaultProps = {
149
151
  className: undefined,
@@ -159,7 +161,8 @@ Input.defaultProps = {
159
161
  value: '',
160
162
  onChange: function onChange() {},
161
163
  onClean: function onClean() {},
162
- hideMaxLength: false
164
+ hideMaxLength: false,
165
+ placeholder: undefined
163
166
  };
164
167
  var _default = Input;
165
168
  exports["default"] = _default;
package/esm/Checkbox/web/Checkbox.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["value", "label", "helper", "disabled", "checked", "error", "style", "className", "inverted", "theme"];
1
+ var _excluded = ["value", "label", "helper", "disabled", "checked", "error", "style", "className", "inverted", "indeterminate", "theme"];
2
2
 
3
3
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
4
4
 
@@ -8,11 +8,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
8
8
 
9
9
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
10
10
 
11
- import React from 'react';
11
+ import React, { useEffect, useRef } from 'react';
12
12
  import { bool, string, shape } from 'prop-types';
13
13
  import styled, { withTheme } from 'styled-components';
14
14
  import { hexToRgb } from '@gympass/yoga-common';
15
- import { Check } from '@gympass/yoga-icons';
15
+ import { Check, Rectangle } from '@gympass/yoga-icons';
16
16
  import { HiddenInput } from '../../shared';
17
17
  var CheckboxWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: inline-block;\n\n * {\n box-sizing: border-box;\n }\n\n ", "\n"])), function (_ref) {
18
18
  var disabled = _ref.disabled;
@@ -23,6 +23,7 @@ var CheckMark = styled.div(_templateObject2 || (_templateObject2 = _taggedTempla
23
23
  disabled = _ref2.disabled,
24
24
  inverted = _ref2.inverted,
25
25
  error = _ref2.error,
26
+ indeterminate = _ref2.indeterminate,
26
27
  _ref2$theme$yoga = _ref2.theme.yoga,
27
28
  _ref2$theme$yoga$colo = _ref2$theme$yoga.colors,
28
29
  primary = _ref2$theme$yoga$colo.primary,
@@ -38,18 +39,18 @@ var CheckMark = styled.div(_templateObject2 || (_templateObject2 = _taggedTempla
38
39
  var _feedback$attention = feedback.attention;
39
40
  borderColor = _feedback$attention[1];
40
41
 
41
- if (checked) {
42
+ if (checked || indeterminate) {
42
43
  var _feedback$attention2 = feedback.attention;
43
44
  bgColor = _feedback$attention2[1];
44
45
  }
45
46
  } else if (disabled) {
46
47
  borderColor = checkbox.disabled.border.color;
47
48
 
48
- if (checked) {
49
+ if (checked || indeterminate) {
49
50
  bgColor = checkbox.disabled.backgroundColor;
50
51
  borderColor = elements.lineAndBorders;
51
52
  }
52
- } else if (checked) {
53
+ } else if (checked || indeterminate) {
53
54
  borderColor = primary;
54
55
  bgColor = primary;
55
56
  checkColor = checkbox.checked.icon.color;
@@ -78,6 +79,7 @@ var CheckboxStyled = styled.div(_templateObject5 || (_templateObject5 = _taggedT
78
79
  var checked = _ref5.checked,
79
80
  inverted = _ref5.inverted,
80
81
  disabled = _ref5.disabled,
82
+ indeterminate = _ref5.indeterminate,
81
83
  _ref5$theme$yoga = _ref5.theme.yoga,
82
84
  _ref5$theme$yoga$colo = _ref5$theme$yoga.colors,
83
85
  primary = _ref5$theme$yoga$colo.primary,
@@ -91,7 +93,7 @@ var CheckboxStyled = styled.div(_templateObject5 || (_templateObject5 = _taggedT
91
93
  return white;
92
94
  }
93
95
 
94
- return checked ? primary : elements.backgroundAndDisabled;
96
+ return checked || indeterminate ? primary : elements.backgroundAndDisabled;
95
97
  };
96
98
 
97
99
  return "\n " + (disabled ? "pointer-events: none" : '') + "\n\n " + Label + ":active,\n &:focus-within,\n &:hover {\n " + Shadow + " {\n display: block;\n }\n }\n\n &:hover {\n " + Shadow + " {\n background-color: " + hexToRgb(shadowColor(), 0.25) + ";\n\n box-shadow: 0 0 0 " + shadowSize + "px\n " + hexToRgb(shadowColor(), 0.25) + ";\n }\n }\n\n &:focus-within {\n " + Shadow + " {\n background-color: " + hexToRgb(shadowColor(), 0.5) + ";\n\n box-shadow: 0 0 0 " + shadowSize + "px\n " + hexToRgb(shadowColor(), 0.5) + ";\n }\n }\n\n " + Label + ":active {\n " + Shadow + " {\n background-color: " + hexToRgb(shadowColor(), 0.75) + ";\n\n box-shadow: 0 0 0 " + shadowSize + "px\n " + hexToRgb(shadowColor(), 0.75) + ";\n }\n }\n ";
@@ -121,27 +123,40 @@ var Checkbox = function Checkbox(_ref8) {
121
123
  style = _ref8.style,
122
124
  className = _ref8.className,
123
125
  inverted = _ref8.inverted,
126
+ indeterminate = _ref8.indeterminate,
124
127
  checkbox = _ref8.theme.yoga.components.checkbox,
125
128
  rest = _objectWithoutPropertiesLoose(_ref8, _excluded);
126
129
 
130
+ var inputRef = useRef(null);
131
+ useEffect(function () {
132
+ if (inputRef.current) {
133
+ inputRef.current.indeterminate = indeterminate;
134
+ }
135
+ });
127
136
  return /*#__PURE__*/React.createElement(CheckboxWrapper, {
128
137
  style: style,
129
138
  className: className,
130
139
  disabled: disabled
131
140
  }, /*#__PURE__*/React.createElement(CheckboxStyled, {
132
141
  checked: checked,
142
+ indeterminate: indeterminate,
133
143
  inverted: inverted,
134
144
  disabled: disabled
135
145
  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Shadow, null), /*#__PURE__*/React.createElement(CheckMark, {
136
146
  disabled: disabled,
137
147
  checked: checked,
138
148
  error: error,
139
- inverted: inverted
140
- }, checked && /*#__PURE__*/React.createElement(Check, {
149
+ inverted: inverted,
150
+ indeterminate: indeterminate
151
+ }, checked && !indeterminate && /*#__PURE__*/React.createElement(Check, {
152
+ width: checkbox.size,
153
+ height: checkbox.size
154
+ }), indeterminate && /*#__PURE__*/React.createElement(Rectangle, {
141
155
  width: checkbox.size,
142
156
  height: checkbox.size
143
157
  })), /*#__PURE__*/React.createElement(HiddenInput, _extends({
144
158
  type: "checkbox",
159
+ ref: inputRef,
145
160
  checked: checked,
146
161
  disabled: disabled
147
162
  }, rest)), label)), (helper || error) && /*#__PURE__*/React.createElement(HelperWrapper, null, /*#__PURE__*/React.createElement(Helper, {
@@ -160,6 +175,9 @@ Checkbox.propTypes = {
160
175
  inverted: bool,
161
176
  error: string,
162
177
 
178
+ /** if true, the component appears indeterminate */
179
+ indeterminate: bool,
180
+
163
181
  /** set a style to the checkbox container */
164
182
  style: shape({}),
165
183
  className: string
@@ -171,6 +189,7 @@ Checkbox.defaultProps = {
171
189
  checked: false,
172
190
  disabled: false,
173
191
  inverted: false,
192
+ indeterminate: false,
174
193
  error: undefined,
175
194
  style: undefined,
176
195
  className: undefined
package/esm/Input/web/Field.js CHANGED
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
2
2
 
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
@@ -11,7 +11,9 @@ var labelTransition = css(_templateObject || (_templateObject = _taggedTemplateL
11
11
  return "\n transform: translateY(-" + (input.height / 2 - 2) + "px);\n transition-property: transform, font-size, color;\n transition-duration: " + transition.duration[1] + "ms;\n transition-timing-function: cubic-bezier(" + transition.timing[0].join() + ");\n\n font-size: " + input.label.font.size.typed + "px;\n ";
12
12
  });
13
13
  var Field = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n\n appearance: none;\n background-color: transparent;\n outline: none;\n\n position: absolute;\n bottom: 0;\n left: 0;\n\n border: none;\n box-sizing: border-box;\n\n ", "\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n display: none;\n }\n\n &:invalid {\n box-shadow: none;\n }\n"])), function (_ref2) {
14
- var cleanable = _ref2.cleanable,
14
+ var label = _ref2.label,
15
+ placeholder = _ref2.placeholder,
16
+ cleanable = _ref2.cleanable,
15
17
  error = _ref2.error,
16
18
  value = _ref2.value,
17
19
  _ref2$theme$yoga = _ref2.theme.yoga,
@@ -19,6 +21,6 @@ var Field = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplate
19
21
  colors = _ref2$theme$yoga.colors,
20
22
  baseFont = _ref2$theme$yoga.baseFont,
21
23
  input = _ref2$theme$yoga.components.input;
22
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n &::placeholder {\n color: ", ";\n }\n\n ", "\n "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, colors.text.disabled, input.label.color["default"], value && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n & ~ legend {\n max-width: max-content;\n }\n\n & ~ label {\n color: ", ";\n ", "\n }\n "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
24
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: ", "px;\n padding-top: ", "px;\n padding-right: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n\n color: ", ";\n font-family: ", ", sans-serif;\n font-size: ", "px;\n font-weight: ", ";\n\n &:focus {\n color: ", ";\n\n & ~ legend {\n max-width: max-content;\n transition-property: max-width;\n transition-duration: ", "ms;\n }\n\n & ~ label {\n ", "\n\n font-weight: ", ";\n color: ", ";\n\n }\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n color: ", ";\n }\n\n ", "\n\n ", "\n "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, placeholder && label ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: transparent;\n }\n "]))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n &::placeholder {\n color: ", ";\n }\n "])), input.label.color["default"]), value && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n & ~ legend {\n max-width: max-content;\n }\n\n & ~ label {\n color: ", ";\n ", "\n }\n "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
23
25
  });
24
26
  export default Field;
package/esm/Input/web/Input.js CHANGED
@@ -66,6 +66,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
66
66
  style: style,
67
67
  value: value
68
68
  }, /*#__PURE__*/React.createElement(Field, _extends({}, props, {
69
+ label: label,
69
70
  cleanable: cleanable,
70
71
  disabled: disabled,
71
72
  error: error,
@@ -119,7 +120,8 @@ Input.propTypes = {
119
120
  onClean: func,
120
121
 
121
122
  /** when max length helper is unnecessary to appear */
122
- hideMaxLength: bool
123
+ hideMaxLength: bool,
124
+ placeholder: string
123
125
  };
124
126
  Input.defaultProps = {
125
127
  className: undefined,
@@ -135,6 +137,7 @@ Input.defaultProps = {
135
137
  value: '',
136
138
  onChange: function onChange() {},
137
139
  onClean: function onClean() {},
138
- hideMaxLength: false
140
+ hideMaxLength: false,
141
+ placeholder: undefined
139
142
  };
140
143
  export default Input;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.29.0",
3
+ "version": "7.30.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -27,7 +27,7 @@
27
27
  "dependencies": {
28
28
  "@gympass/yoga-common": "^1.1.0",
29
29
  "@gympass/yoga-helpers": "^1.0.1",
30
- "@gympass/yoga-icons": "^1.4.0",
30
+ "@gympass/yoga-icons": "^1.4.2",
31
31
  "@gympass/yoga-system": "^0.10.0",
32
32
  "@gympass/yoga-tokens": "^3.1.1",
33
33
  "@ptomasroos/react-native-multi-slider": "^1.0.0",
@@ -49,7 +49,7 @@
49
49
  "react": ">=16",
50
50
  "styled-components": "^4.4.0"
51
51
  },
52
- "gitHead": "1b8def93e8b36bcc771c855cf1d14ee72ec00a26",
52
+ "gitHead": "f30c3c0dc1bafa3edffd1ecb47729ac4e25f4042",
53
53
  "module": "./esm",
54
54
  "private": false,
55
55
  "react-native": "./cjs/index.native.js"