@bolio-ui/core 1.1.6 → 1.1.8

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 (51) hide show
  1. package/README.md +0 -4
  2. package/dist/Popover/Popover.d.ts +8 -9
  3. package/dist/Popover/index.js +35 -18
  4. package/dist/index.js +54 -37
  5. package/esm/Popover/Popover.d.ts +8 -9
  6. package/esm/Popover/Popover.js +32 -15
  7. package/package.json +26 -24
  8. package/esm/Avatar/stories.js +0 -113
  9. package/esm/Badge/stories.js +0 -92
  10. package/esm/Breadcrumbs/stories.js +0 -51
  11. package/esm/Button/stories.js +0 -221
  12. package/esm/ButtonDropdown/stories.js +0 -92
  13. package/esm/ButtonGroup/stories.js +0 -66
  14. package/esm/Capacity/stories.js +0 -85
  15. package/esm/Card/stories.js +0 -175
  16. package/esm/Checkbox/stories.js +0 -84
  17. package/esm/Code/stories.js +0 -53
  18. package/esm/Collapse/stories.js +0 -48
  19. package/esm/Description/stories.js +0 -23
  20. package/esm/Divider/stories.js +0 -41
  21. package/esm/Dot/stories.js +0 -40
  22. package/esm/Drawer/stories.js +0 -79
  23. package/esm/Fieldset/stories.js +0 -72
  24. package/esm/Grid/stories.js +0 -212
  25. package/esm/Icon/stories.js +0 -36
  26. package/esm/Image/stories.js +0 -73
  27. package/esm/Input/stories.js +0 -145
  28. package/esm/Keyboard/stories.js +0 -43
  29. package/esm/Link/stories.js +0 -59
  30. package/esm/Loading/stories.js +0 -75
  31. package/esm/Modal/stories.js +0 -165
  32. package/esm/Note/stories.js +0 -68
  33. package/esm/Page/stories.js +0 -54
  34. package/esm/Pagination/stories.js +0 -49
  35. package/esm/Popover/stories.js +0 -84
  36. package/esm/Progress/stories.js +0 -114
  37. package/esm/Radio/stories.js +0 -98
  38. package/esm/Rating/stories.js +0 -72
  39. package/esm/Select/stories.js +0 -239
  40. package/esm/Slider/stories.js +0 -134
  41. package/esm/Snippet/stories.js +0 -177
  42. package/esm/Spacer/stories.js +0 -54
  43. package/esm/Spinner/stories.js +0 -13
  44. package/esm/Table/stories.js +0 -269
  45. package/esm/Tabs/stories.js +0 -92
  46. package/esm/Tag/stories.js +0 -58
  47. package/esm/Text/stories.js +0 -104
  48. package/esm/Textarea/stories.js +0 -104
  49. package/esm/Toggle/stories.js +0 -55
  50. package/esm/Tooltip/stories.js +0 -183
  51. package/examples/create-redwoodjs/.redwood/README.md +0 -44
package/esm/Radio/stories.js DELETED
@@ -1,98 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import React, { useState } from 'react';
3
- import Radio from '.';
4
- import Grid from '../Grid';
5
- export default {
6
- title: 'Data Entry/Radio',
7
- component: Radio
8
- };
9
- export var Default = function Default() {
10
- return /*#__PURE__*/React.createElement(Grid.Container, {
11
- gap: 2
12
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
13
- checked: false
14
- }, "Option 1")));
15
- };
16
- export var Text = function Text() {
17
- var _useState = useState('1'),
18
- _useState2 = _slicedToArray(_useState, 2),
19
- state = _useState2[0],
20
- setState = _useState2[1];
21
-
22
- var handler = function handler(val) {
23
- setState(val);
24
- console.log(val);
25
- };
26
-
27
- return /*#__PURE__*/React.createElement(Grid.Container, {
28
- gap: 2
29
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
30
- value: state,
31
- onChange: handler
32
- }, /*#__PURE__*/React.createElement(Radio, {
33
- value: "1"
34
- }, "Option 1"), /*#__PURE__*/React.createElement(Radio, {
35
- value: "2"
36
- }, "Option 2"))));
37
- };
38
- export var Type = function Type() {
39
- return /*#__PURE__*/React.createElement(Grid.Container, {
40
- gap: 2
41
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
42
- checked: false
43
- }, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
44
- checked: false,
45
- type: "primary"
46
- }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
47
- checked: false,
48
- type: "secondary"
49
- }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
50
- checked: false,
51
- type: "success"
52
- }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
53
- checked: false,
54
- type: "warning"
55
- }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
56
- checked: false,
57
- type: "error"
58
- }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
59
- checked: false,
60
- type: "info"
61
- }, "Info")));
62
- };
63
- export var Description = function Description() {
64
- return /*#__PURE__*/React.createElement(Grid.Container, {
65
- gap: 2
66
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
67
- value: "1",
68
- onChange: function onChange(val) {
69
- return console.log(val);
70
- }
71
- }, /*#__PURE__*/React.createElement(Radio, {
72
- value: "1"
73
- }, "Option 1", /*#__PURE__*/React.createElement(Radio.Description, null, "Example description for Option 1")))));
74
- };
75
- export var Disabled = function Disabled() {
76
- return /*#__PURE__*/React.createElement(Grid.Container, {
77
- gap: 2
78
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
79
- value: "1",
80
- disabled: true
81
- }, /*#__PURE__*/React.createElement(Radio, {
82
- value: "1"
83
- }, "Option 1"), /*#__PURE__*/React.createElement(Radio, {
84
- value: "2"
85
- }, "Option 2"))));
86
- };
87
- export var Row = function Row() {
88
- return /*#__PURE__*/React.createElement(Grid.Container, {
89
- gap: 2
90
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
91
- value: "1",
92
- useRow: true
93
- }, /*#__PURE__*/React.createElement(Radio, {
94
- value: "1"
95
- }, "Option 1", /*#__PURE__*/React.createElement(Radio.Desc, null, "Description for Option1")), /*#__PURE__*/React.createElement(Radio, {
96
- value: "2"
97
- }, "Option 2", /*#__PURE__*/React.createElement(Radio.Desc, null, "Description for Option2")))));
98
- };
package/esm/Rating/stories.js DELETED
@@ -1,72 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import React, { useState } from 'react';
3
- import Rating from '.';
4
- import Grid from '../Grid';
5
- import { Umbrella, Zap } from '@bolio-ui/icons';
6
- export default {
7
- title: 'Feedback/Rating',
8
- component: Rating
9
- };
10
- export var Default = function Default() {
11
- var _useState = useState(1),
12
- _useState2 = _slicedToArray(_useState, 2),
13
- value = _useState2[0],
14
- setValue = _useState2[1];
15
-
16
- var _useState3 = useState(false),
17
- _useState4 = _slicedToArray(_useState3, 2),
18
- locked = _useState4[0],
19
- setLocked = _useState4[1];
20
-
21
- return /*#__PURE__*/React.createElement(Grid.Container, {
22
- gap: 2
23
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
24
- onLockedChange: setLocked,
25
- value: value,
26
- onValueChange: setValue
27
- })), /*#__PURE__*/React.createElement(Grid, null, "Selection: ", value), /*#__PURE__*/React.createElement(Grid, null, "Locked: ", locked ? 'true' : 'false'));
28
- };
29
- export var Types = function Types() {
30
- return /*#__PURE__*/React.createElement(Grid.Container, {
31
- gap: 2
32
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
33
- type: "primary"
34
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
35
- type: "secondary"
36
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
37
- type: "success"
38
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
39
- type: "error"
40
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
41
- type: "warning"
42
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
43
- type: "info"
44
- })));
45
- };
46
- export var CustomAmount = function CustomAmount() {
47
- return /*#__PURE__*/React.createElement(Grid.Container, {
48
- gap: 2
49
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
50
- count: 2
51
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
52
- value: 3,
53
- count: 6
54
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
55
- value: 4,
56
- count: 8
57
- })));
58
- };
59
- export var Icon = function Icon() {
60
- return /*#__PURE__*/React.createElement(Grid.Container, {
61
- gap: 2
62
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
63
- value: 4,
64
- count: 6,
65
- type: "success",
66
- icon: /*#__PURE__*/React.createElement(Umbrella, null)
67
- })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
68
- count: 7,
69
- type: "error",
70
- icon: /*#__PURE__*/React.createElement(Zap, null)
71
- })));
72
- };
package/esm/Select/stories.js DELETED
@@ -1,239 +0,0 @@
1
- import Select from '.';
2
- import Grid from '../Grid';
3
- import Code from '../Code';
4
- export default {
5
- title: 'Data Entry/Select',
6
- component: Select
7
- };
8
- export var Default = function Default() {
9
- var handler = function handler(val) {
10
- return console.log(val);
11
- };
12
-
13
- return /*#__PURE__*/React.createElement(Grid.Container, {
14
- gap: 2
15
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
16
- placeholder: "Select one",
17
- onChange: handler
18
- }, /*#__PURE__*/React.createElement(Select.Option, {
19
- value: "1"
20
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
21
- value: "2"
22
- }, "Value 2"))));
23
- };
24
- export var Types = function Types() {
25
- return /*#__PURE__*/React.createElement(Grid.Container, {
26
- gap: 2
27
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
28
- placeholder: "Default"
29
- }, /*#__PURE__*/React.createElement(Select.Option, {
30
- value: "1"
31
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
32
- value: "2"
33
- }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
34
- type: "primary",
35
- initialValue: "1"
36
- }, /*#__PURE__*/React.createElement(Select.Option, {
37
- value: "1"
38
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
39
- value: "2"
40
- }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
41
- type: "secondary",
42
- initialValue: "2"
43
- }, /*#__PURE__*/React.createElement(Select.Option, {
44
- value: "1"
45
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
46
- value: "2"
47
- }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
48
- type: "success",
49
- initialValue: "1"
50
- }, /*#__PURE__*/React.createElement(Select.Option, {
51
- value: "1"
52
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
53
- value: "2"
54
- }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
55
- type: "warning",
56
- initialValue: "2"
57
- }, /*#__PURE__*/React.createElement(Select.Option, {
58
- value: "1"
59
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
60
- value: "2"
61
- }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
62
- type: "error",
63
- initialValue: "1"
64
- }, /*#__PURE__*/React.createElement(Select.Option, {
65
- value: "1"
66
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
67
- value: "2"
68
- }, "Value 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
69
- type: "info",
70
- initialValue: "2"
71
- }, /*#__PURE__*/React.createElement(Select.Option, {
72
- value: "1"
73
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
74
- value: "2"
75
- }, "Value 2"))));
76
- };
77
- export var Disable = function Disable() {
78
- return /*#__PURE__*/React.createElement(Grid.Container, {
79
- gap: 2
80
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
81
- placeholder: "Select one",
82
- disabled: true
83
- }, /*#__PURE__*/React.createElement(Select.Option, {
84
- value: "1"
85
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
86
- value: "2"
87
- }, "Value 2"))));
88
- };
89
- export var DisabledOption = function DisabledOption() {
90
- return /*#__PURE__*/React.createElement(Grid.Container, {
91
- gap: 2
92
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
93
- placeholder: "Select one"
94
- }, /*#__PURE__*/React.createElement(Select.Option, {
95
- value: "1",
96
- disabled: true
97
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
98
- value: "2"
99
- }, "Value 2"))));
100
- };
101
- export var WithoutIcon = function WithoutIcon() {
102
- return /*#__PURE__*/React.createElement(Grid.Container, {
103
- gap: 2
104
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
105
- placeholder: "Select one",
106
- pure: true
107
- }, /*#__PURE__*/React.createElement(Select.Option, {
108
- value: "1"
109
- }, "Value 1"), /*#__PURE__*/React.createElement(Select.Option, {
110
- value: "2"
111
- }, "Value 2"))));
112
- };
113
- export var Labels = function Labels() {
114
- return /*#__PURE__*/React.createElement(Grid.Container, {
115
- gap: 2
116
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
117
- placeholder: "Technologies"
118
- }, /*#__PURE__*/React.createElement(Select.Option, {
119
- label: true
120
- }, "JavaScript"), /*#__PURE__*/React.createElement(Select.Option, {
121
- value: "react"
122
- }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
123
- value: "angular"
124
- }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
125
- label: true
126
- }, "Ruby"), /*#__PURE__*/React.createElement(Select.Option, {
127
- value: "rails"
128
- }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
129
- value: "php"
130
- }, "PHP"))));
131
- };
132
- export var Divider = function Divider() {
133
- return /*#__PURE__*/React.createElement(Grid.Container, {
134
- gap: 2
135
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
136
- placeholder: "Technologies"
137
- }, /*#__PURE__*/React.createElement(Select.Option, {
138
- value: "react"
139
- }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
140
- value: "angular"
141
- }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
142
- divider: true
143
- }), /*#__PURE__*/React.createElement(Select.Option, {
144
- value: "rails"
145
- }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
146
- value: "php"
147
- }, "PHP"))));
148
- };
149
- export var Multiple = function Multiple() {
150
- return /*#__PURE__*/React.createElement(Grid.Container, {
151
- gap: 2
152
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
153
- placeholder: "Technologies",
154
- multiple: true,
155
- width: "200px",
156
- initialValue: ['1', '3', '4', '6']
157
- }, /*#__PURE__*/React.createElement(Select.Option, {
158
- value: "1"
159
- }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
160
- value: "2"
161
- }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
162
- value: "3"
163
- }, "Vue"), /*#__PURE__*/React.createElement(Select.Option, {
164
- divider: true
165
- }), /*#__PURE__*/React.createElement(Select.Option, {
166
- value: "4"
167
- }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
168
- value: "5"
169
- }, "PHP"), /*#__PURE__*/React.createElement(Select.Option, {
170
- divider: true
171
- }), /*#__PURE__*/React.createElement(Select.Option, {
172
- value: "6"
173
- }, "Express"), /*#__PURE__*/React.createElement(Select.Option, {
174
- value: "7"
175
- }, "Koa"))));
176
- };
177
- export var MultipleWithoutClear = function MultipleWithoutClear() {
178
- return /*#__PURE__*/React.createElement(Grid.Container, {
179
- gap: 2
180
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
181
- placeholder: "Technologies",
182
- multiple: true,
183
- width: "200px",
184
- clearable: false,
185
- initialValue: ['1', '3', '4', '6']
186
- }, /*#__PURE__*/React.createElement(Select.Option, {
187
- value: "1"
188
- }, "React"), /*#__PURE__*/React.createElement(Select.Option, {
189
- value: "2"
190
- }, "Angular"), /*#__PURE__*/React.createElement(Select.Option, {
191
- value: "3"
192
- }, "Vue"), /*#__PURE__*/React.createElement(Select.Option, {
193
- divider: true
194
- }), /*#__PURE__*/React.createElement(Select.Option, {
195
- value: "4"
196
- }, "Rails"), /*#__PURE__*/React.createElement(Select.Option, {
197
- value: "5"
198
- }, "PHP"), /*#__PURE__*/React.createElement(Select.Option, {
199
- divider: true
200
- }), /*#__PURE__*/React.createElement(Select.Option, {
201
- value: "6"
202
- }, "Express"), /*#__PURE__*/React.createElement(Select.Option, {
203
- value: "7"
204
- }, "Koa"))));
205
- };
206
- export var Component = function Component() {
207
- return /*#__PURE__*/React.createElement(Grid.Container, {
208
- gap: 2
209
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
210
- placeholder: "Value one",
211
- initialValue: "1"
212
- }, /*#__PURE__*/React.createElement(Select.Option, {
213
- value: "1"
214
- }, /*#__PURE__*/React.createElement(Code, null, "TypeScript")), /*#__PURE__*/React.createElement(Select.Option, {
215
- value: "2"
216
- }, /*#__PURE__*/React.createElement(Code, null, "JavaScript")))));
217
- };
218
- export var OverWidth = function OverWidth() {
219
- return /*#__PURE__*/React.createElement(Grid.Container, {
220
- gap: 2
221
- }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
222
- placeholder: "Choose one",
223
- value: "1",
224
- width: "150px"
225
- }, /*#__PURE__*/React.createElement(Select.Option, {
226
- value: "1"
227
- }, "Truncate an overly long string"), /*#__PURE__*/React.createElement(Select.Option, {
228
- value: "2"
229
- }, "Option 2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Select, {
230
- placeholder: "Choose one",
231
- value: "1",
232
- width: "150px",
233
- disableMatchWidth: true
234
- }, /*#__PURE__*/React.createElement(Select.Option, {
235
- value: "1"
236
- }, "Autoscale option width when text is too long"), /*#__PURE__*/React.createElement(Select.Option, {
237
- value: "2"
238
- }, "Option 2"))));
239
- };
package/esm/Slider/stories.js DELETED
@@ -1,134 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import React, { useState } from 'react';
3
- import Slider from '.';
4
- import Grid from '../Grid';
5
- export default {
6
- title: 'Data Entry/Slider',
7
- component: Slider
8
- };
9
- export var Default = function Default() {
10
- return /*#__PURE__*/React.createElement(Grid.Container, {
11
- gap: 2
12
- }, /*#__PURE__*/React.createElement(Grid, {
13
- xs: 12,
14
- md: 12
15
- }, /*#__PURE__*/React.createElement(Slider, {
16
- initialValue: 40
17
- })));
18
- };
19
- export var Type = function Type() {
20
- return /*#__PURE__*/React.createElement(Grid.Container, {
21
- gap: 2
22
- }, /*#__PURE__*/React.createElement(Grid, {
23
- xs: 12,
24
- md: 12
25
- }, /*#__PURE__*/React.createElement(Slider, {
26
- initialValue: 40
27
- })), /*#__PURE__*/React.createElement(Grid, {
28
- xs: 12,
29
- md: 12
30
- }, /*#__PURE__*/React.createElement(Slider, {
31
- type: "primary",
32
- initialValue: 20
33
- })), /*#__PURE__*/React.createElement(Grid, {
34
- xs: 12,
35
- md: 12
36
- }, /*#__PURE__*/React.createElement(Slider, {
37
- type: "secondary",
38
- initialValue: 70
39
- })), /*#__PURE__*/React.createElement(Grid, {
40
- xs: 12,
41
- md: 12
42
- }, /*#__PURE__*/React.createElement(Slider, {
43
- type: "success",
44
- initialValue: 60
45
- })), /*#__PURE__*/React.createElement(Grid, {
46
- xs: 12,
47
- md: 12
48
- }, /*#__PURE__*/React.createElement(Slider, {
49
- type: "warning",
50
- initialValue: 10
51
- })), /*#__PURE__*/React.createElement(Grid, {
52
- xs: 12,
53
- md: 12
54
- }, /*#__PURE__*/React.createElement(Slider, {
55
- type: "error",
56
- initialValue: 80
57
- })), /*#__PURE__*/React.createElement(Grid, {
58
- xs: 12,
59
- md: 12
60
- }, /*#__PURE__*/React.createElement(Slider, {
61
- type: "info",
62
- initialValue: 90
63
- })));
64
- };
65
- export var Disabled = function Disabled() {
66
- return /*#__PURE__*/React.createElement(Grid.Container, {
67
- gap: 2
68
- }, /*#__PURE__*/React.createElement(Grid, {
69
- xs: 12,
70
- md: 12
71
- }, /*#__PURE__*/React.createElement(Slider, {
72
- initialValue: 50,
73
- disabled: true
74
- })));
75
- };
76
- export var Markers = function Markers() {
77
- return /*#__PURE__*/React.createElement(Grid.Container, {
78
- gap: 2
79
- }, /*#__PURE__*/React.createElement(Grid, {
80
- xs: 12,
81
- md: 12
82
- }, /*#__PURE__*/React.createElement(Slider, {
83
- step: 10,
84
- showMarkers: true,
85
- width: "75%"
86
- })));
87
- };
88
- export var Range = function Range() {
89
- return /*#__PURE__*/React.createElement(Grid.Container, {
90
- gap: 2
91
- }, /*#__PURE__*/React.createElement(Grid, {
92
- xs: 12,
93
- md: 12
94
- }, /*#__PURE__*/React.createElement(Slider, {
95
- step: 5,
96
- max: 50,
97
- min: 10,
98
- initialValue: 25,
99
- showMarkers: true,
100
- width: "75%"
101
- })), /*#__PURE__*/React.createElement(Grid, {
102
- xs: 12,
103
- md: 12
104
- }, /*#__PURE__*/React.createElement(Slider, {
105
- step: 0.2,
106
- max: 1,
107
- min: 0.2,
108
- initialValue: 0.4,
109
- showMarkers: true,
110
- width: "75%"
111
- })));
112
- };
113
- export var Event = function Event() {
114
- var _useState = useState(),
115
- _useState2 = _slicedToArray(_useState, 2),
116
- value = _useState2[0],
117
- setValue = _useState2[1];
118
-
119
- var handler = function handler(val) {
120
- console.log(val);
121
- setValue(val);
122
- };
123
-
124
- return /*#__PURE__*/React.createElement(Grid.Container, {
125
- gap: 2
126
- }, /*#__PURE__*/React.createElement(Grid, {
127
- xs: 12,
128
- md: 12
129
- }, /*#__PURE__*/React.createElement(Slider, {
130
- value: value,
131
- onChange: handler,
132
- width: "50%"
133
- })));
134
- };