@pingux/astro 1.28.1 → 1.28.2-alpha.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 (4) hide show
  1. package/lib/cjs/recipes/Slider.stories.js +73 -70
  2. package/lib/recipes/Slider.stories.js +72 -68
  3. package/package.json +1 -1
  4. package/NOTICE.html +0 -5016
package/lib/cjs/recipes/Slider.stories.js CHANGED
@@ -24,12 +24,12 @@ _Object$defineProperty(exports, "__esModule", {
24
24
 
25
25
  exports["default"] = exports.Default = void 0;
26
26
 
27
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
28
-
29
27
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
30
28
 
31
29
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
32
30
 
31
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
32
+
33
33
  var _react = _interopRequireDefault(require("react"));
34
34
 
35
35
  var _slider = require("@react-aria/slider");
@@ -55,6 +55,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
55
55
  var _default = {
56
56
  title: 'Recipes/Slider'
57
57
  };
58
+ exports["default"] = _default;
59
+ var sx = {
60
+ sliderContainer: {
61
+ position: 'relative',
62
+ alignItems: 'center',
63
+ width: '100%',
64
+ touchAction: 'none'
65
+ },
66
+ sliderInnerBox: {
67
+ flex: '1 0 auto',
68
+ textAlign: 'end'
69
+ },
70
+ sliderOuterBox: {
71
+ alignSelf: 'stretch'
72
+ },
73
+ sliderBox: {
74
+ position: 'relative',
75
+ height: 30,
76
+ width: ' 100%'
77
+ },
78
+ slider: {
79
+ position: 'absolute',
80
+ height: 10,
81
+ borderRadius: '5px',
82
+ top: 13,
83
+ width: '100%'
84
+ },
85
+ rangeSlider: {
86
+ position: 'absolute',
87
+ backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
88
+ height: 10,
89
+ borderRadius: '5px',
90
+ top: 13,
91
+ width: '100%'
92
+ },
93
+ thumbContainer: {
94
+ position: 'absolute',
95
+ top: 5,
96
+ transform: 'translateX(-50%)'
97
+ },
98
+ thumb: {
99
+ width: 25,
100
+ height: 25,
101
+ borderRadius: '50%',
102
+ backgroundColor: 'white',
103
+ border: '1px solid #C1C5C8',
104
+ boxShadow: '0 2px 2px 0 #CACACA'
105
+ }
106
+ };
107
+
108
+ var setSliderColor = function setSliderColor(thumbPosition) {
109
+ var _context, _context2, _context3, _context4;
110
+
111
+ return thumbPosition < 25 ? (0, _concat["default"])(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? (0, _concat["default"])(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? (0, _concat["default"])(_context3 = "linear-gradient(to right, rgb(231, 135, 38) 0%, rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : (0, _concat["default"])(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)");
112
+ };
58
113
  /*
59
114
  * The slider value can be formatted by using the `formatOptions` prop.
60
115
  `* formatOptions` is compatible with the option parameter of
@@ -63,7 +118,6 @@ var _default = {
63
118
  * https://react-spectrum.adobe.com/react-aria/useSlider.html
64
119
  */
65
120
 
66
- exports["default"] = _default;
67
121
 
68
122
  var Default = function Default() {
69
123
  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
@@ -83,8 +137,6 @@ var Default = function Default() {
83
137
  exports.Default = Default;
84
138
 
85
139
  var Slider = function Slider(props) {
86
- var _context, _context2, _context3, _context4;
87
-
88
140
  var trackRef = _react["default"].useRef(null);
89
141
 
90
142
  var numberFormatter = (0, _i18n.useNumberFormatter)(props.formatOptions);
@@ -100,37 +152,18 @@ var Slider = function Slider(props) {
100
152
 
101
153
  var thumbPosition = state.getThumbPercent(0) * 100;
102
154
  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, groupProps, {
103
- sx: {
104
- position: 'relative',
105
- alignItems: 'center',
106
- width: '100%',
107
- touchAction: 'none'
108
- }
155
+ sx: sx.sliderContainer
109
156
  }), (0, _react2.jsx)(_index.Box, {
110
- sx: {
111
- alignSelf: 'stretch'
112
- }
157
+ sx: sx.sliderOuterBox
113
158
  }, props.label && (0, _react2.jsx)("label", labelProps, props.label), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, outputProps, {
114
- sx: {
115
- flex: '1 0 auto',
116
- textAlign: 'end'
117
- }
159
+ sx: sx.sliderInnerBox
118
160
  }), "(", state.getThumbValueLabel(0), ")")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, trackProps, {
119
161
  ref: trackRef,
120
- sx: {
121
- position: 'relative',
122
- height: 30,
123
- width: ' 100%'
124
- }
162
+ sx: sx.sliderBox
125
163
  }), (0, _react2.jsx)(_index.Box, {
126
- sx: {
127
- position: 'absolute',
128
- backgroundImage: thumbPosition < 25 ? (0, _concat["default"])(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? (0, _concat["default"])(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? (0, _concat["default"])(_context3 = "linear-gradient(to right, rgb(231, 135, 38) 0%, rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : (0, _concat["default"])(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)"),
129
- height: 10,
130
- borderRadius: '5px',
131
- top: 13,
132
- width: '100%'
133
- }
164
+ sx: _objectSpread(_objectSpread({}, sx.slider), {}, {
165
+ backgroundImage: setSliderColor(thumbPosition)
166
+ })
134
167
  }), (0, _react2.jsx)(Thumb, {
135
168
  index: 0,
136
169
  state: state,
@@ -155,37 +188,16 @@ var RangeSlider = function RangeSlider(props) {
155
188
  outputProps = _useSlider2.outputProps;
156
189
 
157
190
  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, groupProps, {
158
- sx: {
159
- position: 'relative',
160
- alignItems: 'center',
161
- width: '100%',
162
- touchAction: 'none'
163
- }
191
+ sx: sx.sliderContainer
164
192
  }), (0, _react2.jsx)(_index.Box, {
165
- sx: {
166
- alignSelf: 'stretch'
167
- }
193
+ sx: sx.sliderOuterBox
168
194
  }, props.label && (0, _react2.jsx)("label", labelProps, props.label), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, outputProps, {
169
- sx: {
170
- flex: '1 0 auto',
171
- textAlign: 'end'
172
- }
195
+ sx: sx.sliderInnerBox
173
196
  }), "(", (0, _concat["default"])(_context5 = "".concat(state.getThumbValueLabel(0), ", ")).call(_context5, state.getThumbValueLabel(1)), ")")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, trackProps, {
174
197
  ref: trackRef,
175
- sx: {
176
- position: 'relative',
177
- height: 30,
178
- width: ' 100%'
179
- }
198
+ sx: sx.sliderBox
180
199
  }), (0, _react2.jsx)(_index.Box, {
181
- sx: {
182
- position: 'absolute',
183
- backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
184
- height: 10,
185
- borderRadius: '5px',
186
- top: 13,
187
- width: '100%'
188
- }
200
+ sx: sx.rangeSlider
189
201
  }), (0, _react2.jsx)(Thumb, {
190
202
  index: 0,
191
203
  state: state,
@@ -217,22 +229,13 @@ var Thumb = function Thumb(props) {
217
229
  isFocusVisible = _useFocusRing.isFocusVisible;
218
230
 
219
231
  return (0, _react2.jsx)(_index.Box, {
220
- sx: {
221
- position: 'absolute',
222
- top: 5,
223
- transform: 'translateX(-50%)',
232
+ sx: _objectSpread(_objectSpread({}, sx.thumbContainer), {}, {
224
233
  left: "".concat(state.getThumbPercent(index) * 100, "%")
225
- }
234
+ })
226
235
  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, thumbProps, {
227
- sx: {
228
- width: 25,
229
- height: 25,
230
- borderRadius: '50%',
231
- backgroundColor: 'white',
232
- border: '1px solid #C1C5C8',
233
- boxShadow: '0 2px 2px 0 #CACACA',
236
+ sx: _objectSpread(_objectSpread({}, sx.thumb), {}, {
234
237
  outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
235
- }
238
+ })
236
239
  }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)("input", (0, _extends2["default"])({
237
240
  ref: inputRef
238
241
  }, (0, _utils.mergeProps)(inputProps, focusProps))))));
package/lib/recipes/Slider.stories.js CHANGED
@@ -6,9 +6,9 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
6
6
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
7
7
  import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
8
8
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
9
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
10
9
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
11
10
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
11
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
12
12
 
13
13
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
14
14
 
@@ -27,6 +27,60 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
27
27
  export default {
28
28
  title: 'Recipes/Slider'
29
29
  };
30
+ var sx = {
31
+ sliderContainer: {
32
+ position: 'relative',
33
+ alignItems: 'center',
34
+ width: '100%',
35
+ touchAction: 'none'
36
+ },
37
+ sliderInnerBox: {
38
+ flex: '1 0 auto',
39
+ textAlign: 'end'
40
+ },
41
+ sliderOuterBox: {
42
+ alignSelf: 'stretch'
43
+ },
44
+ sliderBox: {
45
+ position: 'relative',
46
+ height: 30,
47
+ width: ' 100%'
48
+ },
49
+ slider: {
50
+ position: 'absolute',
51
+ height: 10,
52
+ borderRadius: '5px',
53
+ top: 13,
54
+ width: '100%'
55
+ },
56
+ rangeSlider: {
57
+ position: 'absolute',
58
+ backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
59
+ height: 10,
60
+ borderRadius: '5px',
61
+ top: 13,
62
+ width: '100%'
63
+ },
64
+ thumbContainer: {
65
+ position: 'absolute',
66
+ top: 5,
67
+ transform: 'translateX(-50%)'
68
+ },
69
+ thumb: {
70
+ width: 25,
71
+ height: 25,
72
+ borderRadius: '50%',
73
+ backgroundColor: 'white',
74
+ border: '1px solid #C1C5C8',
75
+ boxShadow: '0 2px 2px 0 #CACACA'
76
+ }
77
+ };
78
+
79
+ var setSliderColor = function setSliderColor(thumbPosition) {
80
+ var _context, _context2, _context3, _context4;
81
+
82
+ return thumbPosition < 25 ? _concatInstanceProperty(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? _concatInstanceProperty(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? _concatInstanceProperty(_context3 = "linear-gradient(to right, rgb(231, 135, 38) 0%, rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : _concatInstanceProperty(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)");
83
+ };
30
84
  /*
31
85
  * The slider value can be formatted by using the `formatOptions` prop.
32
86
  `* formatOptions` is compatible with the option parameter of
@@ -35,6 +89,7 @@ export default {
35
89
  * https://react-spectrum.adobe.com/react-aria/useSlider.html
36
90
  */
37
91
 
92
+
38
93
  export var Default = function Default() {
39
94
  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
40
95
  mb: "xl"
@@ -51,8 +106,6 @@ export var Default = function Default() {
51
106
  };
52
107
 
53
108
  var Slider = function Slider(props) {
54
- var _context, _context2, _context3, _context4;
55
-
56
109
  var trackRef = React.useRef(null);
57
110
  var numberFormatter = useNumberFormatter(props.formatOptions);
58
111
  var state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
@@ -67,37 +120,18 @@ var Slider = function Slider(props) {
67
120
 
68
121
  var thumbPosition = state.getThumbPercent(0) * 100;
69
122
  return ___EmotionJSX(Box, _extends({}, groupProps, {
70
- sx: {
71
- position: 'relative',
72
- alignItems: 'center',
73
- width: '100%',
74
- touchAction: 'none'
75
- }
123
+ sx: sx.sliderContainer
76
124
  }), ___EmotionJSX(Box, {
77
- sx: {
78
- alignSelf: 'stretch'
79
- }
125
+ sx: sx.sliderOuterBox
80
126
  }, props.label && ___EmotionJSX("label", labelProps, props.label), ___EmotionJSX(Box, _extends({}, outputProps, {
81
- sx: {
82
- flex: '1 0 auto',
83
- textAlign: 'end'
84
- }
127
+ sx: sx.sliderInnerBox
85
128
  }), "(", state.getThumbValueLabel(0), ")")), ___EmotionJSX(Box, _extends({}, trackProps, {
86
129
  ref: trackRef,
87
- sx: {
88
- position: 'relative',
89
- height: 30,
90
- width: ' 100%'
91
- }
130
+ sx: sx.sliderBox
92
131
  }), ___EmotionJSX(Box, {
93
- sx: {
94
- position: 'absolute',
95
- backgroundImage: thumbPosition < 25 ? _concatInstanceProperty(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? _concatInstanceProperty(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? _concatInstanceProperty(_context3 = "linear-gradient(to right, rgb(231, 135, 38) 0%, rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : _concatInstanceProperty(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)"),
96
- height: 10,
97
- borderRadius: '5px',
98
- top: 13,
99
- width: '100%'
100
- }
132
+ sx: _objectSpread(_objectSpread({}, sx.slider), {}, {
133
+ backgroundImage: setSliderColor(thumbPosition)
134
+ })
101
135
  }), ___EmotionJSX(Thumb, {
102
136
  index: 0,
103
137
  state: state,
@@ -121,37 +155,16 @@ var RangeSlider = function RangeSlider(props) {
121
155
  outputProps = _useSlider2.outputProps;
122
156
 
123
157
  return ___EmotionJSX(Box, _extends({}, groupProps, {
124
- sx: {
125
- position: 'relative',
126
- alignItems: 'center',
127
- width: '100%',
128
- touchAction: 'none'
129
- }
158
+ sx: sx.sliderContainer
130
159
  }), ___EmotionJSX(Box, {
131
- sx: {
132
- alignSelf: 'stretch'
133
- }
160
+ sx: sx.sliderOuterBox
134
161
  }, props.label && ___EmotionJSX("label", labelProps, props.label), ___EmotionJSX(Box, _extends({}, outputProps, {
135
- sx: {
136
- flex: '1 0 auto',
137
- textAlign: 'end'
138
- }
162
+ sx: sx.sliderInnerBox
139
163
  }), "(", _concatInstanceProperty(_context5 = "".concat(state.getThumbValueLabel(0), ", ")).call(_context5, state.getThumbValueLabel(1)), ")")), ___EmotionJSX(Box, _extends({}, trackProps, {
140
164
  ref: trackRef,
141
- sx: {
142
- position: 'relative',
143
- height: 30,
144
- width: ' 100%'
145
- }
165
+ sx: sx.sliderBox
146
166
  }), ___EmotionJSX(Box, {
147
- sx: {
148
- position: 'absolute',
149
- backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
150
- height: 10,
151
- borderRadius: '5px',
152
- top: 13,
153
- width: '100%'
154
- }
167
+ sx: sx.rangeSlider
155
168
  }), ___EmotionJSX(Thumb, {
156
169
  index: 0,
157
170
  state: state,
@@ -182,22 +195,13 @@ var Thumb = function Thumb(props) {
182
195
  isFocusVisible = _useFocusRing.isFocusVisible;
183
196
 
184
197
  return ___EmotionJSX(Box, {
185
- sx: {
186
- position: 'absolute',
187
- top: 5,
188
- transform: 'translateX(-50%)',
198
+ sx: _objectSpread(_objectSpread({}, sx.thumbContainer), {}, {
189
199
  left: "".concat(state.getThumbPercent(index) * 100, "%")
190
- }
200
+ })
191
201
  }, ___EmotionJSX(Box, _extends({}, thumbProps, {
192
- sx: {
193
- width: 25,
194
- height: 25,
195
- borderRadius: '50%',
196
- backgroundColor: 'white',
197
- border: '1px solid #C1C5C8',
198
- boxShadow: '0 2px 2px 0 #CACACA',
202
+ sx: _objectSpread(_objectSpread({}, sx.thumb), {}, {
199
203
  outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
200
- }
204
+ })
201
205
  }), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX("input", _extends({
202
206
  ref: inputRef
203
207
  }, mergeProps(inputProps, focusProps))))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.28.1",
3
+ "version": "1.28.2-alpha.0",
4
4
  "description": "PingUX themeable React component library",
5
5
  "repository": {
6
6
  "type": "git",