@ntbjs/react-components 0.0.1-beta.47 → 0.0.1-beta.48
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.
- package/{ActionButton-d56265bd.js → ActionButton-90485300.js} +9 -9
- package/{AssetGallery-a5a6d3ee.js → AssetGallery-4c4801e3.js} +379 -279
- package/{Button-2ae8c0dc.js → Button-0d728b52.js} +36 -28
- package/{Checkbox-4037e160.js → Checkbox-5a78a73e.js} +33 -28
- package/{Popover-b16a26a5.js → Popover-d3e2f6c0.js} +15 -15
- package/{Radio-96f0bc13.js → Radio-73a1a897.js} +21 -20
- package/{Switch-7b696313.js → Switch-fcbf628c.js} +26 -24
- package/{TextArea-4be7199f.js → TextArea-167d2528.js} +37 -31
- package/TextInput-b61b7333.js +247 -0
- package/{Tooltip-a9271ef2.js → Tooltip-f95a39f4.js} +11 -11
- package/data/Popover/index.js +2 -2
- package/data/index.js +3 -3
- package/{defaultTheme-38b83bb5.js → defaultTheme-870f7df1.js} +105 -94
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/Button/index.js +2 -2
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +2 -2
- package/inputs/TextInput/index.js +2 -2
- package/inputs/index.js +8 -8
- package/package.json +1 -1
- package/ssr/index.js +3 -1
- package/widgets/AssetGallery/index.js +12 -12
- package/widgets/index.js +12 -12
- package/TextInput-4deb971c.js +0 -163
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
|
|
@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
12
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
13
|
-
var Button$1 = styled__default[
|
|
13
|
+
var Button$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 500;\n padding: 6px 18px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n line-height: 1.2;\n transition: all 250ms, opacity 200ms;\n\n &:hover {\n background: #5a9b88;\n border-color: #5a9b88;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
|
|
14
14
|
return props.theme.getColor('emerald-500');
|
|
15
15
|
}, function (props) {
|
|
16
16
|
return props.theme.getColor('emerald-500');
|
|
@@ -37,50 +37,56 @@ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefault
|
|
|
37
37
|
}, function (props) {
|
|
38
38
|
return props.size === 'small' && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n line-height: 1.15;\n padding: 3px 12px;\n "])));
|
|
39
39
|
});
|
|
40
|
-
var ButtonContent = styled__default[
|
|
40
|
+
var ButtonContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 7px;\n\n ", ";\n }\n\n ", "\n"])), function (props) {
|
|
41
41
|
return props.size === 'small' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
|
|
42
42
|
}, function (props) {
|
|
43
43
|
return props.$loading && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
|
|
44
44
|
});
|
|
45
|
-
var LoadingIndicator = styled__default[
|
|
45
|
+
var LoadingIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
|
|
46
46
|
return props.$loading && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
47
47
|
});
|
|
48
|
-
var LoadingIndicatorSvg = styled__default[
|
|
49
|
-
var LoadingIndicatorSvgCircle = styled__default[
|
|
48
|
+
var LoadingIndicatorSvg = styled__default['default'].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
|
|
49
|
+
var LoadingIndicatorSvgCircle = styled__default['default'].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
|
|
50
50
|
|
|
51
|
-
var
|
|
52
|
-
var Button = React__default["default"].forwardRef(function Button(_ref, forwardedRef) {
|
|
51
|
+
var Button = React__default['default'].forwardRef(function Button(_ref, forwardedRef) {
|
|
53
52
|
var secondary = _ref.secondary,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
53
|
+
outlined = _ref.outlined,
|
|
54
|
+
block = _ref.block,
|
|
55
|
+
icon = _ref.icon,
|
|
56
|
+
size = _ref.size,
|
|
57
|
+
disabled = _ref.disabled,
|
|
58
|
+
loading = _ref.loading,
|
|
59
|
+
className = _ref.className,
|
|
60
|
+
children = _ref.children,
|
|
61
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"]);
|
|
62
|
+
|
|
63
63
|
var _useState = React.useState(loading || false),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
65
|
+
loadingState = _useState2[0],
|
|
66
|
+
setLoadingState = _useState2[1];
|
|
67
|
+
|
|
67
68
|
var _useState3 = React.useState(113),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
70
|
+
loadingStep = _useState4[0],
|
|
71
|
+
setLoadingStep = _useState4[1];
|
|
72
|
+
|
|
71
73
|
var loadingInterval = React.useRef(0);
|
|
74
|
+
|
|
72
75
|
var enableLoading = function enableLoading() {
|
|
73
76
|
loadingInterval.current = setInterval(function () {
|
|
74
77
|
setLoadingStep(function (currentLoadingStep) {
|
|
75
78
|
var newLoadingStep = Math.round(currentLoadingStep - 15 * currentLoadingStep / 100);
|
|
79
|
+
|
|
76
80
|
if (newLoadingStep === currentLoadingStep) {
|
|
77
81
|
clearInterval(loadingInterval.current);
|
|
78
82
|
}
|
|
83
|
+
|
|
79
84
|
return newLoadingStep;
|
|
80
85
|
});
|
|
81
86
|
}, 300);
|
|
82
87
|
setLoadingState(true);
|
|
83
88
|
};
|
|
89
|
+
|
|
84
90
|
var disableLoading = function disableLoading() {
|
|
85
91
|
clearInterval(loadingInterval.current);
|
|
86
92
|
setLoadingStep(0);
|
|
@@ -89,17 +95,19 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
89
95
|
setLoadingStep(113);
|
|
90
96
|
}, 500);
|
|
91
97
|
};
|
|
98
|
+
|
|
92
99
|
React.useEffect(function () {
|
|
93
100
|
if (loading) {
|
|
94
101
|
enableLoading();
|
|
95
102
|
} else {
|
|
96
103
|
disableLoading();
|
|
97
104
|
}
|
|
105
|
+
|
|
98
106
|
return function () {
|
|
99
107
|
return clearInterval(loadingInterval.current);
|
|
100
108
|
};
|
|
101
109
|
}, [loading]);
|
|
102
|
-
return React__default[
|
|
110
|
+
return React__default['default'].createElement(Button$1, defaultTheme._extends({
|
|
103
111
|
ref: forwardedRef,
|
|
104
112
|
secondary: secondary,
|
|
105
113
|
outlined: outlined,
|
|
@@ -108,17 +116,17 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
108
116
|
disabled: disabled,
|
|
109
117
|
className: className,
|
|
110
118
|
"aria-busy": disabled
|
|
111
|
-
}, props), React__default[
|
|
119
|
+
}, props), React__default['default'].createElement(ButtonContent, {
|
|
112
120
|
$loading: loadingState,
|
|
113
121
|
size: size
|
|
114
|
-
}, icon, children), React__default[
|
|
122
|
+
}, icon, children), React__default['default'].createElement(LoadingIndicator, {
|
|
115
123
|
$loading: loadingState,
|
|
116
124
|
style: {
|
|
117
125
|
opacity: loadingState ? 1 : 0
|
|
118
126
|
}
|
|
119
|
-
}, React__default[
|
|
127
|
+
}, React__default['default'].createElement(LoadingIndicatorSvg, {
|
|
120
128
|
viewBox: "22 22 44 44"
|
|
121
|
-
}, React__default[
|
|
129
|
+
}, React__default['default'].createElement(LoadingIndicatorSvgCircle, {
|
|
122
130
|
cx: "44",
|
|
123
131
|
cy: "44",
|
|
124
132
|
r: "18",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var styled = require('styled-components');
|
|
@@ -13,14 +13,14 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
15
15
|
var checkboxSize = '18px';
|
|
16
|
-
var Checkbox$1 = styled__default[
|
|
17
|
-
var CheckIcon = styled__default[
|
|
16
|
+
var Checkbox$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
|
|
17
|
+
var CheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n transform: scale(0.1);\n transition: all 200ms;\n position: absolute;\n width: 12px;\n top: 4px;\n left: 3px;\n color: ", ";\n\n svg {\n width: 100%;\n display: block;\n }\n"])), function (props) {
|
|
18
18
|
return props.theme.getColor('gray-100');
|
|
19
19
|
});
|
|
20
|
-
var IndeterminateCheckIcon = styled__default[
|
|
20
|
+
var IndeterminateCheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n transform: scale(0.1);\n transition: all 200ms;\n position: absolute;\n height: 2px;\n top: 8px;\n left: 4px;\n background: ", ";\n width: 10px;\n"])), function (props) {
|
|
21
21
|
return props.theme.getColor('gray-100');
|
|
22
22
|
});
|
|
23
|
-
var CheckboxLabel = styled__default[
|
|
23
|
+
var CheckboxLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n position: relative;\n cursor: pointer;\n user-select: none;\n min-height: ", ";\n text-align: left;\n flex-wrap: wrap;\n flex: 1;\n line-height: ", ";\n margin-right: auto;\n\n & input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n\n &::before {\n content: '';\n border: 2px solid ", ";\n border-radius: 2px;\n transition: all 200ms;\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n }\n\n &:has(input[type='checkbox']:checked) {\n &::before {\n background: ", ";\n border-color: ", ";\n }\n }\n\n &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {\n ", " {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &:has(input[type='checkbox'][data-indeterminate='true']:checked) {\n ", " {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n ", "\n"])), checkboxSize, checkboxSize, function (props) {
|
|
24
24
|
return props.theme.getColor('gray-300');
|
|
25
25
|
}, checkboxSize, checkboxSize, function (props) {
|
|
26
26
|
return props.theme.getColor('emerald-500');
|
|
@@ -29,54 +29,59 @@ var CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyDef
|
|
|
29
29
|
}, CheckIcon, IndeterminateCheckIcon, function (props) {
|
|
30
30
|
return props.disabled && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
31
31
|
});
|
|
32
|
-
var CheckboxVisualLabel = styled__default[
|
|
32
|
+
var CheckboxVisualLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n flex: 1;\n\n ", ";\n"])), function (props) {
|
|
33
33
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
34
34
|
});
|
|
35
|
-
var Description = styled__default[
|
|
35
|
+
var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n margin: 0.375rem 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n"])), function (props) {
|
|
36
36
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
37
37
|
}, function (props) {
|
|
38
38
|
return props.error && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
|
|
39
39
|
});
|
|
40
40
|
|
|
41
|
-
var Checkbox = React__default[
|
|
41
|
+
var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forwardedRef) {
|
|
42
42
|
var checked = _ref.checked,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
43
|
+
defaultChecked = _ref.defaultChecked,
|
|
44
|
+
disabled = _ref.disabled,
|
|
45
|
+
name = _ref.name,
|
|
46
|
+
value = _ref.value,
|
|
47
|
+
description = _ref.description,
|
|
48
|
+
error = _ref.error,
|
|
49
|
+
indeterminate = _ref.indeterminate,
|
|
50
|
+
label = _ref.label,
|
|
51
|
+
onChange = _ref.onChange,
|
|
52
|
+
onBlur = _ref.onBlur,
|
|
53
|
+
className = _ref.className,
|
|
54
|
+
style = _ref.style;
|
|
55
|
+
|
|
55
56
|
var _useState = React.useState(nanoid.nanoid()),
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
58
|
+
uniqueId = _useState2[0];
|
|
59
|
+
|
|
58
60
|
var hasError = React.useMemo(function () {
|
|
59
61
|
if (lodash.isBoolean(error)) {
|
|
60
62
|
return error;
|
|
61
63
|
}
|
|
64
|
+
|
|
62
65
|
return !lodash.isEmpty(error);
|
|
63
66
|
}, [error]);
|
|
64
67
|
var descriptionText = React.useMemo(function () {
|
|
65
68
|
if (!lodash.isEmpty(error)) {
|
|
66
69
|
return error;
|
|
67
70
|
}
|
|
71
|
+
|
|
68
72
|
if (!lodash.isEmpty(description)) {
|
|
69
73
|
return description;
|
|
70
74
|
}
|
|
75
|
+
|
|
71
76
|
return null;
|
|
72
77
|
}, [description, error]);
|
|
73
|
-
return React__default[
|
|
78
|
+
return React__default['default'].createElement(Checkbox$1, {
|
|
74
79
|
className: className,
|
|
75
80
|
style: style
|
|
76
|
-
}, React__default[
|
|
81
|
+
}, React__default['default'].createElement(CheckboxLabel, {
|
|
77
82
|
disabled: disabled,
|
|
78
83
|
htmlFor: uniqueId
|
|
79
|
-
}, React__default[
|
|
84
|
+
}, React__default['default'].createElement("input", {
|
|
80
85
|
ref: forwardedRef,
|
|
81
86
|
id: uniqueId,
|
|
82
87
|
checked: checked,
|
|
@@ -88,13 +93,13 @@ var Checkbox = React__default["default"].forwardRef(function Checkbox(_ref, forw
|
|
|
88
93
|
onChange: onChange,
|
|
89
94
|
onBlur: onBlur,
|
|
90
95
|
"data-indeterminate": indeterminate
|
|
91
|
-
}), React__default[
|
|
96
|
+
}), React__default['default'].createElement(IndeterminateCheckIcon, null), React__default['default'].createElement(CheckIcon, null, React__default['default'].createElement("svg", {
|
|
92
97
|
xmlns: "http://www.w3.org/2000/svg",
|
|
93
98
|
viewBox: "0 0 10.9 8.45"
|
|
94
|
-
}, React__default[
|
|
99
|
+
}, React__default['default'].createElement("path", {
|
|
95
100
|
d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
|
|
96
101
|
fill: "currentColor"
|
|
97
|
-
}))), typeof label === 'string' && label.length > 0 && React__default[
|
|
102
|
+
}))), typeof label === 'string' && label.length > 0 && React__default['default'].createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
|
|
98
103
|
error: hasError
|
|
99
104
|
}, descriptionText));
|
|
100
105
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var lodash = require('lodash');
|
|
6
6
|
var styled = require('styled-components');
|
|
@@ -13,14 +13,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
13
13
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
14
|
var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
|
|
15
15
|
|
|
16
|
-
var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;
|
|
16
|
+
var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
|
|
17
17
|
defaultTheme.styleInject(css_248z$1);
|
|
18
18
|
|
|
19
19
|
var css_248z = ".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}";
|
|
20
20
|
defaultTheme.styleInject(css_248z);
|
|
21
21
|
|
|
22
22
|
var _templateObject;
|
|
23
|
-
var Popover$1 = styled__default[
|
|
23
|
+
var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n ", "\n ", "\n line-height: inherit;\n\n ", "\n .tippy-content {\n padding: 0;\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -15px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
|
|
24
24
|
return props.theme.primaryFontFamily;
|
|
25
25
|
}, function (props) {
|
|
26
26
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
|
|
@@ -40,25 +40,25 @@ var Popover$1 = styled__default["default"](TippyTooltip__default["default"]).att
|
|
|
40
40
|
return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
|
|
41
41
|
});
|
|
42
42
|
|
|
43
|
-
var
|
|
44
|
-
var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
|
|
43
|
+
var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
|
|
45
44
|
var content = _ref.content,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
45
|
+
interactive = _ref.interactive,
|
|
46
|
+
placement = _ref.placement,
|
|
47
|
+
duration = _ref.duration,
|
|
48
|
+
trigger = _ref.trigger,
|
|
49
|
+
offset = _ref.offset,
|
|
50
|
+
arrow = _ref.arrow,
|
|
51
|
+
visible = _ref.visible,
|
|
52
|
+
children = _ref.children,
|
|
53
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "children"]);
|
|
54
|
+
|
|
55
55
|
var errorOffset = React.useMemo(function () {
|
|
56
56
|
return arrow ? 15 : 0;
|
|
57
57
|
}, [arrow]);
|
|
58
58
|
var isControlled = React.useMemo(function () {
|
|
59
59
|
return lodash.isBoolean(visible);
|
|
60
60
|
}, [visible]);
|
|
61
|
-
return React__default[
|
|
61
|
+
return React__default['default'].createElement(Popover$1, defaultTheme._extends({
|
|
62
62
|
ref: ref,
|
|
63
63
|
content: content,
|
|
64
64
|
interactive: interactive,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var polished = require('polished');
|
|
@@ -13,10 +13,10 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3;
|
|
15
15
|
var radioSize = '18px';
|
|
16
|
-
var RadioLabel = styled__default[
|
|
16
|
+
var RadioLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n padding-left: ", ";\n font-weight: 400;\n font-size: 0.875rem;\n\n ", ";\n"])), polished.math("".concat(radioSize, " + 10px")), function (props) {
|
|
17
17
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
18
18
|
});
|
|
19
|
-
var Radio$1 = styled__default[
|
|
19
|
+
var Radio$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n cursor: pointer;\n line-height: ", ";\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ", ";\n width: ", ";\n height: ", ";\n top: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n transform: scale(0);\n transition: all 200ms;\n }\n\n &:has(input:checked) {\n ::before {\n border-color: ", ";\n }\n\n ::after {\n background: ", ";\n transform: scale(1);\n }\n\n ", " {\n opacity: 1;\n }\n }\n & {\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n }\n\n ", "\n"])), radioSize, function (props) {
|
|
20
20
|
return props.theme.getColor('gray-300');
|
|
21
21
|
}, radioSize, radioSize, function (props) {
|
|
22
22
|
return props.theme.getColor('emerald-500');
|
|
@@ -26,28 +26,29 @@ var Radio$1 = styled__default["default"].label.attrs(defaultTheme.applyDefaultTh
|
|
|
26
26
|
return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
27
27
|
});
|
|
28
28
|
|
|
29
|
-
var
|
|
30
|
-
var Radio = React__default["default"].forwardRef(function Radio(_ref, forwardedRef) {
|
|
29
|
+
var Radio = React__default['default'].forwardRef(function Radio(_ref, forwardedRef) {
|
|
31
30
|
var name = _ref.name,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
31
|
+
value = _ref.value,
|
|
32
|
+
checked = _ref.checked,
|
|
33
|
+
defaultChecked = _ref.defaultChecked,
|
|
34
|
+
disabled = _ref.disabled,
|
|
35
|
+
label = _ref.label,
|
|
36
|
+
className = _ref.className,
|
|
37
|
+
style = _ref.style,
|
|
38
|
+
onChange = _ref.onChange,
|
|
39
|
+
onBlur = _ref.onBlur,
|
|
40
|
+
rest = defaultTheme._objectWithoutProperties(_ref, ["name", "value", "checked", "defaultChecked", "disabled", "label", "className", "style", "onChange", "onBlur"]);
|
|
41
|
+
|
|
42
42
|
var _useState = React.useState(nanoid.nanoid()),
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
44
|
+
uniqueId = _useState2[0];
|
|
45
|
+
|
|
46
|
+
return React__default['default'].createElement(Radio$1, {
|
|
46
47
|
htmlFor: uniqueId,
|
|
47
48
|
disabled: disabled,
|
|
48
49
|
className: className,
|
|
49
50
|
style: style
|
|
50
|
-
}, React__default[
|
|
51
|
+
}, React__default['default'].createElement("input", defaultTheme._extends({
|
|
51
52
|
ref: forwardedRef,
|
|
52
53
|
type: "radio",
|
|
53
54
|
name: name,
|
|
@@ -58,7 +59,7 @@ var Radio = React__default["default"].forwardRef(function Radio(_ref, forwardedR
|
|
|
58
59
|
id: uniqueId,
|
|
59
60
|
onChange: onChange,
|
|
60
61
|
onBlur: onBlur
|
|
61
|
-
}, rest)), React__default[
|
|
62
|
+
}, rest)), React__default['default'].createElement(RadioLabel, null, label));
|
|
62
63
|
});
|
|
63
64
|
Radio.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
64
65
|
label: defaultTheme.PropTypes.any,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-870f7df1.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var polished = require('polished');
|
|
@@ -13,57 +13,59 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
|
|
14
14
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
15
15
|
var switchButtonSize = '16px';
|
|
16
|
-
var Switch$1 = styled__default[
|
|
16
|
+
var Switch$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ", "\n"])), function (props) {
|
|
17
17
|
return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n * {\n cursor: not-allowed;\n }\n "])));
|
|
18
18
|
});
|
|
19
|
-
var SwitchIndicator = styled__default[
|
|
19
|
+
var SwitchIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n ", "\n height: ", ";\n width: 32px;\n border-radius: 20px;\n border: 1px solid;\n ", "\n transition: background 200ms;\n"])), function (props) {
|
|
20
20
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
|
|
21
21
|
}, polished.math("".concat(switchButtonSize, " + 2px")), function (props) {
|
|
22
22
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300'));
|
|
23
23
|
});
|
|
24
|
-
var SwitchIndicatorButton = styled__default[
|
|
24
|
+
var SwitchIndicatorButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n ", "\n height: ", ";\n width: ", ";\n border-radius: 50%;\n box-shadow: ", " 0 0px 2px 0px;\n transition: left 200ms;\n"])), function (props) {
|
|
25
25
|
return props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'));
|
|
26
26
|
}, switchButtonSize, switchButtonSize, function (props) {
|
|
27
27
|
return props.theme.getColor('gray-500');
|
|
28
28
|
});
|
|
29
|
-
var SwitchIndicatorLabelText = styled__default[
|
|
29
|
+
var SwitchIndicatorLabelText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 18px;\n\n ", ";\n"])), function (props) {
|
|
30
30
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
|
|
31
31
|
});
|
|
32
|
-
var SwitchLabel = styled__default[
|
|
32
|
+
var SwitchLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n margin-right: auto;\n cursor: pointer;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n }\n\n &:has(input[type='checkbox']:not(:checked)) {\n ", " {\n left: 0;\n }\n }\n\n &:has(input[type='checkbox']:checked) {\n ", " {\n left: calc(100% - ", ");\n }\n\n ", " {\n background: ", ";\n\n ", "\n }\n }\n\n &:has(input[type='checkbox']:focus-visible) {\n ", " {\n ", "\n }\n }\n"])), SwitchIndicatorButton, SwitchIndicatorButton, switchButtonSize, SwitchIndicator, function (props) {
|
|
33
33
|
return props.theme.getColor('emerald-500');
|
|
34
34
|
}, function (props) {
|
|
35
35
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1);
|
|
36
36
|
}, SwitchIndicatorButton, function (props) {
|
|
37
37
|
return props.theme.themeProp('outline', "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.5)), "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.3)), 1);
|
|
38
38
|
});
|
|
39
|
-
var Description = styled__default[
|
|
39
|
+
var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n margin: ", " 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n"])), function (props) {
|
|
40
40
|
return props.spaciousDescription ? '16px' : '6px';
|
|
41
41
|
}, function (props) {
|
|
42
42
|
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
|
|
43
43
|
});
|
|
44
44
|
|
|
45
|
-
var Switch = React__default[
|
|
45
|
+
var Switch = React__default['default'].forwardRef(function Switch(_ref, forwardedRef) {
|
|
46
46
|
var name = _ref.name,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
47
|
+
checked = _ref.checked,
|
|
48
|
+
defaultChecked = _ref.defaultChecked,
|
|
49
|
+
label = _ref.label,
|
|
50
|
+
disabled = _ref.disabled,
|
|
51
|
+
description = _ref.description,
|
|
52
|
+
spaciousDescription = _ref.spaciousDescription,
|
|
53
|
+
className = _ref.className,
|
|
54
|
+
style = _ref.style,
|
|
55
|
+
onChange = _ref.onChange,
|
|
56
|
+
onBlur = _ref.onBlur;
|
|
57
|
+
|
|
57
58
|
var _useState = React.useState(nanoid.nanoid()),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
60
|
+
uniqueId = _useState2[0];
|
|
61
|
+
|
|
62
|
+
return React__default['default'].createElement(Switch$1, {
|
|
61
63
|
disabled: disabled,
|
|
62
64
|
className: className,
|
|
63
65
|
style: style
|
|
64
|
-
}, React__default[
|
|
66
|
+
}, React__default['default'].createElement(SwitchLabel, {
|
|
65
67
|
htmlFor: uniqueId
|
|
66
|
-
}, React__default[
|
|
68
|
+
}, React__default['default'].createElement("input", {
|
|
67
69
|
ref: forwardedRef,
|
|
68
70
|
checked: checked,
|
|
69
71
|
defaultChecked: defaultChecked,
|
|
@@ -73,7 +75,7 @@ var Switch = React__default["default"].forwardRef(function Switch(_ref, forwarde
|
|
|
73
75
|
type: "checkbox",
|
|
74
76
|
onBlur: onBlur,
|
|
75
77
|
onChange: onChange
|
|
76
|
-
}), React__default[
|
|
78
|
+
}), React__default['default'].createElement(SwitchIndicator, null, React__default['default'].createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default['default'].createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
|
|
77
79
|
spaciousDescription: spaciousDescription
|
|
78
80
|
}, description));
|
|
79
81
|
});
|