@rescui/textarea 0.11.6-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15 → 0.12.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.
- package/lib/_virtual/close-outline.js +106 -0
- package/lib/_virtual/index.css.js +12 -12
- package/lib/index.css +167 -98
- package/lib/index.d.ts +2 -0
- package/lib/public-api.p.css +20 -0
- package/lib/public-api.pcss +20 -0
- package/lib/textarea.d.ts +7 -0
- package/lib/textarea.js +18 -2
- package/lib/textarea.p.module.css.js +24 -21
- package/llm/components/textarea.md +24 -0
- package/package.json +8 -8
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import cn from 'classnames';
|
|
5
|
+
import styles from './index.css.js';
|
|
6
|
+
const sizeStyles = {
|
|
7
|
+
"xs": styles.sizeXS,
|
|
8
|
+
"s": styles.sizeS,
|
|
9
|
+
"m": styles.sizeM,
|
|
10
|
+
"l": styles.sizeL
|
|
11
|
+
};
|
|
12
|
+
const Size = {
|
|
13
|
+
"xs": "xs",
|
|
14
|
+
"s": "s",
|
|
15
|
+
"m": "m",
|
|
16
|
+
"l": "l"
|
|
17
|
+
};
|
|
18
|
+
const CloseOutlineIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
19
|
+
viewBox: "0 0 16 16"
|
|
20
|
+
}, props, {
|
|
21
|
+
ref: ref
|
|
22
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
23
|
+
d: "M2.646 2.646a.5.5 0 0 1 .708 0L8 7.293l4.646-4.647a.5.5 0 0 1 .708.708L8.707 8l4.647 4.646a.5.5 0 0 1-.708.708L8 8.707l-4.646 4.647a.5.5 0 0 1-.708-.708L7.293 8 2.646 3.354a.5.5 0 0 1 0-.708"
|
|
24
|
+
})));
|
|
25
|
+
CloseOutlineIcon16.displayName = 'CloseOutlineIcon16';
|
|
26
|
+
const CloseOutlineIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
27
|
+
viewBox: "0 0 20 20"
|
|
28
|
+
}, props, {
|
|
29
|
+
ref: ref
|
|
30
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
31
|
+
d: "M3.47 3.47a.75.75 0 0 1 1.06 0L10 8.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L11.06 10l5.47 5.47a.75.75 0 1 1-1.06 1.06L10 11.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L8.94 10 3.47 4.53a.75.75 0 0 1 0-1.06"
|
|
32
|
+
})));
|
|
33
|
+
CloseOutlineIcon20.displayName = 'CloseOutlineIcon20';
|
|
34
|
+
const CloseOutlineIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
35
|
+
viewBox: "0 0 24 24"
|
|
36
|
+
}, props, {
|
|
37
|
+
ref: ref
|
|
38
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
39
|
+
d: "M3.793 3.793a1 1 0 0 1 1.414 0L12 10.586l6.793-6.793a1 1 0 1 1 1.414 1.414L13.414 12l6.793 6.793a1 1 0 0 1-1.414 1.414L12 13.414l-6.793 6.793a1 1 0 0 1-1.414-1.414L10.586 12 3.793 5.207a1 1 0 0 1 0-1.414"
|
|
40
|
+
})));
|
|
41
|
+
CloseOutlineIcon24.displayName = 'CloseOutlineIcon24';
|
|
42
|
+
const CloseOutlineIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
43
|
+
viewBox: "0 0 28 28"
|
|
44
|
+
}, props, {
|
|
45
|
+
ref: ref
|
|
46
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
47
|
+
d: "M4.793 4.793a1 1 0 0 1 1.414 0L14 12.586l7.793-7.793a1 1 0 1 1 1.414 1.414L15.414 14l7.793 7.793a1 1 0 0 1-1.414 1.414L14 15.414l-7.793 7.793a1 1 0 0 1-1.414-1.414L12.586 14 4.793 6.207a1 1 0 0 1 0-1.414"
|
|
48
|
+
})));
|
|
49
|
+
CloseOutlineIcon28.displayName = 'CloseOutlineIcon28';
|
|
50
|
+
const CloseOutlineIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
51
|
+
let {
|
|
52
|
+
theme,
|
|
53
|
+
size: sizeFromProps = "m",
|
|
54
|
+
className,
|
|
55
|
+
style,
|
|
56
|
+
['data-render-all-sizes']: renderAllSizes = false,
|
|
57
|
+
...props
|
|
58
|
+
} = _ref;
|
|
59
|
+
const size = sizeFromProps in Size ? sizeFromProps : "m";
|
|
60
|
+
const mainProps = { ...props,
|
|
61
|
+
className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
|
|
62
|
+
style: renderAllSizes ? {
|
|
63
|
+
'--rs-icon-ar-width': 28,
|
|
64
|
+
'--rs-icon-ar-height': 28,
|
|
65
|
+
...style
|
|
66
|
+
} : style,
|
|
67
|
+
ref
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
if (renderAllSizes) {
|
|
71
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
72
|
+
viewBox: "0 0 28 28"
|
|
73
|
+
}, mainProps), /*#__PURE__*/React.createElement(CloseOutlineIcon16, {
|
|
74
|
+
className: styles.variant16
|
|
75
|
+
}), /*#__PURE__*/React.createElement(CloseOutlineIcon20, {
|
|
76
|
+
className: styles.variant20
|
|
77
|
+
}), /*#__PURE__*/React.createElement(CloseOutlineIcon24, {
|
|
78
|
+
className: styles.variant24
|
|
79
|
+
}), /*#__PURE__*/React.createElement(CloseOutlineIcon28, {
|
|
80
|
+
className: styles.variant28
|
|
81
|
+
}));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
if (size === Size['xs']) {
|
|
85
|
+
return /*#__PURE__*/React.createElement(CloseOutlineIcon16, mainProps);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
if (size === Size['s']) {
|
|
89
|
+
return /*#__PURE__*/React.createElement(CloseOutlineIcon20, mainProps);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
if (size === Size['m']) {
|
|
93
|
+
return /*#__PURE__*/React.createElement(CloseOutlineIcon24, mainProps);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return /*#__PURE__*/React.createElement(CloseOutlineIcon28, mainProps);
|
|
97
|
+
});
|
|
98
|
+
CloseOutlineIcon.displayName = 'CloseOutlineIcon';
|
|
99
|
+
CloseOutlineIcon.propTypes = {
|
|
100
|
+
className: PropTypes.string,
|
|
101
|
+
theme: PropTypes.oneOf(["light", "dark"]),
|
|
102
|
+
size: PropTypes.oneOf(["xs", "s", "m", "l"]),
|
|
103
|
+
'data-render-all-sizes': PropTypes.bool,
|
|
104
|
+
style: PropTypes.object
|
|
105
|
+
};
|
|
106
|
+
export { Size, CloseOutlineIcon as default };
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"icon": "
|
|
3
|
-
"sizeXS": "
|
|
4
|
-
"sizeS": "
|
|
5
|
-
"sizeM": "
|
|
6
|
-
"sizeL": "
|
|
7
|
-
"light": "
|
|
8
|
-
"dark": "
|
|
9
|
-
"allVariants": "
|
|
10
|
-
"variant16": "
|
|
11
|
-
"variant20": "
|
|
12
|
-
"variant24": "
|
|
13
|
-
"variant28": "
|
|
2
|
+
"icon": "_icon_3sp1p2_4",
|
|
3
|
+
"sizeXS": "_sizeXS_3sp1p2_14",
|
|
4
|
+
"sizeS": "_sizeS_3sp1p2_18",
|
|
5
|
+
"sizeM": "_sizeM_3sp1p2_22",
|
|
6
|
+
"sizeL": "_sizeL_3sp1p2_26",
|
|
7
|
+
"light": "_light_3sp1p2_30",
|
|
8
|
+
"dark": "_dark_3sp1p2_34",
|
|
9
|
+
"allVariants": "_allVariants_3sp1p2_48",
|
|
10
|
+
"variant16": "_variant16_3sp1p2_53",
|
|
11
|
+
"variant20": "_variant20_3sp1p2_54",
|
|
12
|
+
"variant24": "_variant24_3sp1p2_55",
|
|
13
|
+
"variant28": "_variant28_3sp1p2_58"
|
|
14
14
|
};
|
|
15
15
|
export { styles as default };
|
package/lib/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._icon_3sp1p2_4{
|
|
2
2
|
--_rs-theme-dark:var(
|
|
3
3
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
4
4
|
var(--rs-theme-dark, 0)
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
9
9
|
}
|
|
10
10
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
11
|
-
.
|
|
11
|
+
._icon_3sp1p2_4{
|
|
12
12
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
13
13
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
14
14
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
20
|
-
.
|
|
20
|
+
._icon_3sp1p2_4{
|
|
21
21
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
22
22
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
23
23
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -25,30 +25,30 @@
|
|
|
25
25
|
--_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
._icon_3sp1p2_4{
|
|
29
29
|
|
|
30
30
|
fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
|
|
31
31
|
|
|
32
32
|
width:var(--rs-icons-width, auto);
|
|
33
33
|
height:var(--rs-icons-height, var(--_rs-icons-height));
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
._sizeXS_3sp1p2_14{
|
|
36
36
|
--_rs-icons-height:16px;
|
|
37
37
|
}
|
|
38
|
-
.
|
|
38
|
+
._sizeS_3sp1p2_18{
|
|
39
39
|
--_rs-icons-height:20px;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
._sizeM_3sp1p2_22{
|
|
42
42
|
--_rs-icons-height:24px;
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
._sizeL_3sp1p2_26{
|
|
45
45
|
--_rs-icons-height:28px;
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
._light_3sp1p2_30{
|
|
48
48
|
--rs-theme-dark:0;
|
|
49
49
|
--_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
._dark_3sp1p2_34{
|
|
52
52
|
--rs-theme-dark:1;
|
|
53
53
|
--_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
54
54
|
}
|
|
@@ -60,56 +60,58 @@
|
|
|
60
60
|
transform:rotate(360deg);
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
.
|
|
63
|
+
._allVariants_3sp1p2_48{
|
|
64
64
|
aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
|
|
65
65
|
container:rs-icon / size;
|
|
66
66
|
}
|
|
67
|
-
.
|
|
68
|
-
.
|
|
69
|
-
.
|
|
67
|
+
._variant16_3sp1p2_53,
|
|
68
|
+
._variant20_3sp1p2_54,
|
|
69
|
+
._variant24_3sp1p2_55{
|
|
70
70
|
display:none;
|
|
71
71
|
}
|
|
72
|
-
.
|
|
72
|
+
._variant28_3sp1p2_58{
|
|
73
73
|
display:block;
|
|
74
74
|
}
|
|
75
75
|
@container rs-icon (max-height: 24px){
|
|
76
|
-
.
|
|
76
|
+
._variant24_3sp1p2_55{
|
|
77
77
|
display:block;
|
|
78
78
|
}
|
|
79
|
-
.
|
|
79
|
+
._variant28_3sp1p2_58{
|
|
80
80
|
display:none;
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
@container rs-icon (max-height: 20px){
|
|
84
|
-
.
|
|
84
|
+
._variant20_3sp1p2_54{
|
|
85
85
|
display:block;
|
|
86
86
|
}
|
|
87
|
-
.
|
|
87
|
+
._variant24_3sp1p2_55{
|
|
88
88
|
display:none;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
@container rs-icon (max-height: 16px){
|
|
92
|
-
.
|
|
92
|
+
._variant16_3sp1p2_53{
|
|
93
93
|
display:block;
|
|
94
94
|
}
|
|
95
|
-
.
|
|
95
|
+
._variant20_3sp1p2_54{
|
|
96
96
|
display:none;
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
-
.
|
|
99
|
+
._themeLight_1lcp4sb_8{
|
|
100
100
|
--rs-theme-dark:0;
|
|
101
101
|
}
|
|
102
|
-
.
|
|
102
|
+
._themeDark_1lcp4sb_11{
|
|
103
103
|
--rs-theme-dark:1;
|
|
104
104
|
}
|
|
105
|
-
.
|
|
105
|
+
._sizeS_1lcp4sb_15{
|
|
106
106
|
--_rs-textarea-vertical-padding:6px;
|
|
107
107
|
--_rs-textarea-horizontal-padding:8px;
|
|
108
|
+
--_rs-textarea-icon-size:20px;
|
|
109
|
+
--_rs-textarea-icon-offset:8px;
|
|
108
110
|
}
|
|
109
|
-
.
|
|
111
|
+
._sizeS_1lcp4sb_15 [data-rs-internal='textarea__busy-icon']:not(html){
|
|
110
112
|
--_rs-icons-height:20px;
|
|
111
113
|
}
|
|
112
|
-
.
|
|
114
|
+
._sizeS_1lcp4sb_15 [data-rs-internal='textarea__inner']::-moz-placeholder{
|
|
113
115
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
114
116
|
--_rs-typography-text-transform:initial;
|
|
115
117
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -144,10 +146,10 @@
|
|
|
144
146
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
145
147
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
146
148
|
}
|
|
147
|
-
.
|
|
148
|
-
.
|
|
149
|
-
.
|
|
150
|
-
.
|
|
149
|
+
._sizeS_1lcp4sb_15 [data-rs-internal='textarea__label'],
|
|
150
|
+
._sizeS_1lcp4sb_15 [data-rs-internal='textarea__inner'],
|
|
151
|
+
._sizeS_1lcp4sb_15 [data-rs-internal='textarea__inner']::placeholder,
|
|
152
|
+
._sizeS_1lcp4sb_15 [data-rs-internal='textarea__suffix']{
|
|
151
153
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
152
154
|
--_rs-typography-text-transform:initial;
|
|
153
155
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -182,7 +184,7 @@
|
|
|
182
184
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
183
185
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
184
186
|
}
|
|
185
|
-
.
|
|
187
|
+
._sizeS_1lcp4sb_15 [data-rs-internal='textarea__bold-label']{
|
|
186
188
|
--_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
|
|
187
189
|
--_rs-typography-text-transform:initial;
|
|
188
190
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -214,14 +216,16 @@
|
|
|
214
216
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
215
217
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
216
218
|
}
|
|
217
|
-
.
|
|
219
|
+
._sizeM_1lcp4sb_18{
|
|
218
220
|
--_rs-textarea-vertical-padding:8px;
|
|
219
221
|
--_rs-textarea-horizontal-padding:8px;
|
|
222
|
+
--_rs-textarea-icon-size:24px;
|
|
223
|
+
--_rs-textarea-icon-offset:8px;
|
|
220
224
|
}
|
|
221
|
-
.
|
|
225
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__busy-icon']:not(html){
|
|
222
226
|
--_rs-icons-height:24px;
|
|
223
227
|
}
|
|
224
|
-
.
|
|
228
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
|
|
225
229
|
--_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
|
|
226
230
|
--_rs-typography-text-transform:initial;
|
|
227
231
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -260,14 +264,14 @@
|
|
|
260
264
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
261
265
|
}
|
|
262
266
|
@media screen and (max-width: 640px){
|
|
263
|
-
.
|
|
267
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
|
|
264
268
|
--_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
|
|
265
269
|
}
|
|
266
270
|
}
|
|
267
|
-
.
|
|
268
|
-
.
|
|
269
|
-
.
|
|
270
|
-
.
|
|
271
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__label'],
|
|
272
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner'],
|
|
273
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::placeholder,
|
|
274
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__suffix']{
|
|
271
275
|
--_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
|
|
272
276
|
--_rs-typography-text-transform:initial;
|
|
273
277
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -306,14 +310,14 @@
|
|
|
306
310
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
307
311
|
}
|
|
308
312
|
@media screen and (max-width: 640px){
|
|
309
|
-
.
|
|
310
|
-
.
|
|
311
|
-
.
|
|
312
|
-
.
|
|
313
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__label'],
|
|
314
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner'],
|
|
315
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::placeholder,
|
|
316
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__suffix']{
|
|
313
317
|
--_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
|
|
314
318
|
}
|
|
315
319
|
}
|
|
316
|
-
.
|
|
320
|
+
._sizeM_1lcp4sb_18 [data-rs-internal='textarea__bold-label']{
|
|
317
321
|
--_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
|
|
318
322
|
--_rs-typography-text-transform:initial;
|
|
319
323
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -345,14 +349,16 @@
|
|
|
345
349
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
346
350
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
347
351
|
}
|
|
348
|
-
.
|
|
352
|
+
._sizeL_1lcp4sb_21{
|
|
349
353
|
--_rs-textarea-vertical-padding:12px;
|
|
350
354
|
--_rs-textarea-horizontal-padding:16px;
|
|
355
|
+
--_rs-textarea-icon-size:28px;
|
|
356
|
+
--_rs-textarea-icon-offset:16px;
|
|
351
357
|
}
|
|
352
|
-
.
|
|
358
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__busy-icon']:not(html){
|
|
353
359
|
--_rs-icons-height:28px;
|
|
354
360
|
}
|
|
355
|
-
.
|
|
361
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
|
|
356
362
|
--_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
|
|
357
363
|
--_rs-typography-text-transform:initial;
|
|
358
364
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -391,14 +397,14 @@
|
|
|
391
397
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
392
398
|
}
|
|
393
399
|
@media screen and (max-width: 640px){
|
|
394
|
-
.
|
|
400
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
|
|
395
401
|
--_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
|
|
396
402
|
}
|
|
397
403
|
}
|
|
398
|
-
.
|
|
399
|
-
.
|
|
400
|
-
.
|
|
401
|
-
.
|
|
404
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__label'],
|
|
405
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner'],
|
|
406
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::placeholder,
|
|
407
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__suffix']{
|
|
402
408
|
--_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
|
|
403
409
|
--_rs-typography-text-transform:initial;
|
|
404
410
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -437,14 +443,14 @@
|
|
|
437
443
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
438
444
|
}
|
|
439
445
|
@media screen and (max-width: 640px){
|
|
440
|
-
.
|
|
441
|
-
.
|
|
442
|
-
.
|
|
443
|
-
.
|
|
446
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__label'],
|
|
447
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner'],
|
|
448
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::placeholder,
|
|
449
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__suffix']{
|
|
444
450
|
--_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
|
|
445
451
|
}
|
|
446
452
|
}
|
|
447
|
-
.
|
|
453
|
+
._sizeL_1lcp4sb_21 [data-rs-internal='textarea__bold-label']{
|
|
448
454
|
--_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
|
|
449
455
|
--_rs-typography-text-transform:initial;
|
|
450
456
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -476,7 +482,7 @@
|
|
|
476
482
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
477
483
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
478
484
|
}
|
|
479
|
-
.
|
|
485
|
+
._classic_1lcp4sb_25{
|
|
480
486
|
--_rs-textarea-focused-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
481
487
|
--_rs-textarea-focused-background-color:rgb(
|
|
482
488
|
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
|
|
@@ -490,11 +496,18 @@
|
|
|
490
496
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
491
497
|
0.7
|
|
492
498
|
);
|
|
499
|
+
--_rs-textarea-focused-clear-icon-color:rgba(
|
|
500
|
+
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
501
|
+
0.7
|
|
502
|
+
);
|
|
503
|
+
--_rs-textarea-focused-clear-icon-accent-color:rgb(
|
|
504
|
+
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
|
|
505
|
+
);
|
|
493
506
|
--_rs-textarea-focused-scrollbar-track-color:rgb(
|
|
494
507
|
calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
|
|
495
508
|
);
|
|
496
509
|
}
|
|
497
|
-
.
|
|
510
|
+
._rock_1lcp4sb_28{
|
|
498
511
|
--_rs-textarea-focused-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
|
|
499
512
|
--_rs-textarea-focused-background-color:rgb(
|
|
500
513
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
|
|
@@ -508,11 +521,18 @@
|
|
|
508
521
|
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
|
|
509
522
|
0.7
|
|
510
523
|
);
|
|
524
|
+
--_rs-textarea-focused-clear-icon-color:rgba(
|
|
525
|
+
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
|
|
526
|
+
0.7
|
|
527
|
+
);
|
|
528
|
+
--_rs-textarea-focused-clear-icon-accent-color:rgb(
|
|
529
|
+
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
|
|
530
|
+
);
|
|
511
531
|
--_rs-textarea-focused-scrollbar-track-color:rgb(
|
|
512
532
|
calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
|
|
513
533
|
);
|
|
514
534
|
}
|
|
515
|
-
.
|
|
535
|
+
._labelWrapper_1lcp4sb_32{
|
|
516
536
|
--_rs-theme-dark:var(
|
|
517
537
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
518
538
|
var(--rs-theme-dark, 0)
|
|
@@ -522,7 +542,7 @@
|
|
|
522
542
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
523
543
|
}
|
|
524
544
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
525
|
-
.
|
|
545
|
+
._labelWrapper_1lcp4sb_32{
|
|
526
546
|
--_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
527
547
|
--_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
528
548
|
--_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
@@ -531,7 +551,7 @@
|
|
|
531
551
|
}
|
|
532
552
|
}
|
|
533
553
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
534
|
-
.
|
|
554
|
+
._labelWrapper_1lcp4sb_32{
|
|
535
555
|
--_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
|
|
536
556
|
--_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
|
|
537
557
|
--_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
|
|
@@ -540,22 +560,22 @@
|
|
|
540
560
|
}
|
|
541
561
|
}
|
|
542
562
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
543
|
-
.
|
|
563
|
+
._labelWrapper_1lcp4sb_32{
|
|
544
564
|
--_rs-color-danger:color-mix(in srgb, #CC1400 calc(100%*var(--_rs-theme-light-coefficient, 1)), #FF6553 calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
545
565
|
--_rs-color-danger-bg:color-mix(in srgb, rgba(204,20,0, 0.2) calc(100%*var(--_rs-theme-light-coefficient, 1)), rgba(255,101,83, 0.2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
|
|
546
566
|
}
|
|
547
567
|
}
|
|
548
568
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
549
|
-
.
|
|
569
|
+
._labelWrapper_1lcp4sb_32{
|
|
550
570
|
--_rs-color-danger:rgb(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83));
|
|
551
571
|
--_rs-color-danger-bg:rgba(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83), 0.2);
|
|
552
572
|
}
|
|
553
573
|
}
|
|
554
|
-
.
|
|
574
|
+
._labelWrapper_1lcp4sb_32 {
|
|
555
575
|
|
|
556
576
|
display:block;
|
|
557
577
|
}
|
|
558
|
-
.
|
|
578
|
+
._wrapper_1lcp4sb_40{
|
|
559
579
|
--_rs-textarea-border-width:1px;
|
|
560
580
|
--_rs-textarea-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
|
|
561
581
|
--_rs-textarea-background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
|
|
@@ -571,34 +591,34 @@
|
|
|
571
591
|
|
|
572
592
|
box-shadow:inset 0 0 0 var(--_rs-textarea-border-width) var(--_rs-textarea-border-color);
|
|
573
593
|
}
|
|
574
|
-
.
|
|
594
|
+
._error_1lcp4sb_57 ._wrapper_1lcp4sb_40{
|
|
575
595
|
--_rs-textarea-border-width:2px;
|
|
576
596
|
--_rs-textarea-border-color:var(--_rs-color-danger);
|
|
577
597
|
--_rs-textarea-background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
|
|
578
598
|
}
|
|
579
|
-
.
|
|
599
|
+
._disabled_1lcp4sb_63 ._wrapper_1lcp4sb_40{
|
|
580
600
|
--_rs-textarea-background-color:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
|
|
581
601
|
|
|
582
602
|
cursor:default;
|
|
583
603
|
}
|
|
584
|
-
.
|
|
604
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._wrapper_1lcp4sb_40{
|
|
585
605
|
--_rs-textarea-background-color:var(
|
|
586
606
|
--_rs-textarea-focused-background-color
|
|
587
607
|
);
|
|
588
608
|
}
|
|
589
|
-
.
|
|
609
|
+
._enabled_1lcp4sb_69:not(._error_1lcp4sb_57)._filled_1lcp4sb_75 ._wrapper_1lcp4sb_40{
|
|
590
610
|
--_rs-textarea-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3);
|
|
591
611
|
}
|
|
592
612
|
@media (hover: hover){
|
|
593
|
-
.
|
|
613
|
+
._enabled_1lcp4sb_69:not(._error_1lcp4sb_57):hover ._wrapper_1lcp4sb_40{
|
|
594
614
|
--_rs-textarea-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
|
|
595
615
|
}
|
|
596
616
|
}
|
|
597
|
-
.
|
|
617
|
+
._enabled_1lcp4sb_69:not(._error_1lcp4sb_57)._focused_1lcp4sb_69 ._wrapper_1lcp4sb_40{
|
|
598
618
|
--_rs-textarea-border-width:var(--_rs-textarea-focused-border-width);
|
|
599
619
|
--_rs-textarea-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
600
620
|
}
|
|
601
|
-
.
|
|
621
|
+
._inner_1lcp4sb_91{
|
|
602
622
|
letter-spacing:var(
|
|
603
623
|
--rs-text-base-letter-spacing,
|
|
604
624
|
var(--_rs-typography-letter-spacing)
|
|
@@ -632,26 +652,29 @@
|
|
|
632
652
|
-moz-appearance:none;
|
|
633
653
|
appearance:none;
|
|
634
654
|
}
|
|
655
|
+
._clearable_1lcp4sb_119 ._inner_1lcp4sb_91{
|
|
656
|
+
padding-right:calc(var(--_rs-textarea-horizontal-padding) + var(--_rs-textarea-icon-size) + var(--_rs-textarea-icon-offset) - var(--_rs-textarea-border-width));
|
|
657
|
+
}
|
|
635
658
|
@media (hover: hover){
|
|
636
|
-
.
|
|
659
|
+
._inner_1lcp4sb_91{
|
|
637
660
|
scrollbar-color:#8C8C8E rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
|
|
638
661
|
scrollbar-width:thin
|
|
639
662
|
}
|
|
640
663
|
|
|
641
|
-
.
|
|
664
|
+
._inner_1lcp4sb_91::-webkit-scrollbar{
|
|
642
665
|
width:7px;
|
|
643
666
|
height:8px;
|
|
644
667
|
}
|
|
645
668
|
|
|
646
|
-
.
|
|
669
|
+
._inner_1lcp4sb_91::-webkit-scrollbar-corner{
|
|
647
670
|
background-color:transparent;
|
|
648
671
|
}
|
|
649
672
|
|
|
650
|
-
.
|
|
673
|
+
._inner_1lcp4sb_91::-webkit-scrollbar-track{
|
|
651
674
|
background-color:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
|
|
652
675
|
}
|
|
653
676
|
|
|
654
|
-
.
|
|
677
|
+
._inner_1lcp4sb_91::-webkit-scrollbar-thumb{
|
|
655
678
|
width:7px;
|
|
656
679
|
|
|
657
680
|
border-radius:7px;
|
|
@@ -659,40 +682,86 @@
|
|
|
659
682
|
background:#8C8C8E;
|
|
660
683
|
}
|
|
661
684
|
|
|
662
|
-
.
|
|
685
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91{
|
|
663
686
|
scrollbar-color:#8C8C8E var(--_rs-textarea-focused-scrollbar-track-color);
|
|
664
687
|
}
|
|
665
688
|
|
|
666
|
-
.
|
|
689
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91::-webkit-scrollbar-track{
|
|
667
690
|
background-color:var(--_rs-textarea-focused-scrollbar-track-color);
|
|
668
691
|
}
|
|
669
692
|
}
|
|
670
|
-
.
|
|
693
|
+
._inner_1lcp4sb_91:focus{
|
|
671
694
|
outline:none;
|
|
672
695
|
}
|
|
673
|
-
.
|
|
696
|
+
._inner_1lcp4sb_91::-moz-placeholder{
|
|
674
697
|
opacity:1;
|
|
675
698
|
|
|
676
699
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
|
|
677
700
|
}
|
|
678
|
-
.
|
|
701
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91::-moz-placeholder{
|
|
679
702
|
color:var(--_rs-textarea-focused-placeholder-color);
|
|
680
703
|
}
|
|
681
|
-
.
|
|
704
|
+
._inner_1lcp4sb_91::placeholder{
|
|
682
705
|
opacity:1;
|
|
683
706
|
|
|
684
707
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
|
|
685
708
|
}
|
|
686
|
-
.
|
|
709
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91::placeholder{
|
|
687
710
|
color:var(--_rs-textarea-focused-placeholder-color);
|
|
688
711
|
}
|
|
689
|
-
.
|
|
712
|
+
._disabled_1lcp4sb_63 ._inner_1lcp4sb_91{
|
|
690
713
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
|
|
691
714
|
}
|
|
692
|
-
.
|
|
715
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91{
|
|
693
716
|
color:var(--_rs-textarea-focused-color);
|
|
694
717
|
}
|
|
695
|
-
.
|
|
718
|
+
._clearIcon_1lcp4sb_184{
|
|
719
|
+
position:absolute;
|
|
720
|
+
top:var(--_rs-textarea-vertical-padding);
|
|
721
|
+
right:var(--_rs-textarea-horizontal-padding);
|
|
722
|
+
|
|
723
|
+
display:flex;
|
|
724
|
+
|
|
725
|
+
padding:0;
|
|
726
|
+
|
|
727
|
+
border:none;
|
|
728
|
+
|
|
729
|
+
cursor:pointer;
|
|
730
|
+
|
|
731
|
+
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
|
|
732
|
+
|
|
733
|
+
background:transparent;
|
|
734
|
+
-webkit-appearance:none;
|
|
735
|
+
-moz-appearance:none;
|
|
736
|
+
appearance:none;
|
|
737
|
+
}
|
|
738
|
+
._clearIcon_1lcp4sb_184:focus{
|
|
739
|
+
outline:none;
|
|
740
|
+
}
|
|
741
|
+
._disabled_1lcp4sb_63 ._clearIcon_1lcp4sb_184{
|
|
742
|
+
pointer-events:none;
|
|
743
|
+
|
|
744
|
+
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
|
|
745
|
+
}
|
|
746
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._clearIcon_1lcp4sb_184{
|
|
747
|
+
color:var(--_rs-textarea-focused-clear-icon-color);
|
|
748
|
+
}
|
|
749
|
+
@media (hover: hover){
|
|
750
|
+
._enabled_1lcp4sb_69 ._clearIcon_1lcp4sb_184:hover{
|
|
751
|
+
color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._clearIcon_1lcp4sb_184:hover{
|
|
755
|
+
color:var(--_rs-textarea-focused-clear-icon-accent-color);
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
._clearIcon_1lcp4sb_184 ._icon_1lcp4sb_226{
|
|
759
|
+
fill:currentColor;
|
|
760
|
+
|
|
761
|
+
width:auto;
|
|
762
|
+
height:var(--_rs-textarea-icon-size);
|
|
763
|
+
}
|
|
764
|
+
._busyIcon_1lcp4sb_234{
|
|
696
765
|
position:absolute;
|
|
697
766
|
right:var(--_rs-textarea-horizontal-padding);
|
|
698
767
|
bottom:var(--_rs-textarea-vertical-padding);
|
|
@@ -703,13 +772,13 @@
|
|
|
703
772
|
|
|
704
773
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
|
|
705
774
|
}
|
|
706
|
-
.
|
|
775
|
+
._disabled_1lcp4sb_63 ._busyIcon_1lcp4sb_234{
|
|
707
776
|
color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
|
|
708
777
|
}
|
|
709
|
-
.
|
|
778
|
+
._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._busyIcon_1lcp4sb_234{
|
|
710
779
|
color:var(--_rs-textarea-focused-busy-icon-color);
|
|
711
780
|
}
|
|
712
|
-
.
|
|
781
|
+
._label_1lcp4sb_32{
|
|
713
782
|
letter-spacing:var(
|
|
714
783
|
--rs-text-base-letter-spacing,
|
|
715
784
|
var(--_rs-typography-letter-spacing)
|
|
@@ -728,13 +797,13 @@
|
|
|
728
797
|
|
|
729
798
|
margin-bottom:4px;
|
|
730
799
|
}
|
|
731
|
-
.
|
|
800
|
+
._disabled_1lcp4sb_63 ._label_1lcp4sb_32{
|
|
732
801
|
color:var(
|
|
733
802
|
--rs-color-pale,
|
|
734
803
|
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
|
|
735
804
|
);
|
|
736
805
|
}
|
|
737
|
-
.
|
|
806
|
+
._footer_1lcp4sb_265{
|
|
738
807
|
display:grid;
|
|
739
808
|
grid-template-areas:"note character-counter" "error-message character-counter";
|
|
740
809
|
grid-template-columns:1fr auto;
|
|
@@ -744,10 +813,10 @@
|
|
|
744
813
|
|
|
745
814
|
margin-top:4px;
|
|
746
815
|
}
|
|
747
|
-
.
|
|
816
|
+
._error_1lcp4sb_57 ._footer_1lcp4sb_265{
|
|
748
817
|
grid-template-areas:"error-message character-counter" "note character-counter";
|
|
749
818
|
}
|
|
750
|
-
.
|
|
819
|
+
._characterCounter_1lcp4sb_284{
|
|
751
820
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
752
821
|
--_rs-typography-text-transform:initial;
|
|
753
822
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -809,10 +878,10 @@
|
|
|
809
878
|
|
|
810
879
|
margin-left:16px;
|
|
811
880
|
}
|
|
812
|
-
.
|
|
881
|
+
._errorMessage_1lcp4sb_293{
|
|
813
882
|
grid-area:error-message;
|
|
814
883
|
}
|
|
815
|
-
.
|
|
884
|
+
._note_1lcp4sb_297{
|
|
816
885
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
817
886
|
--_rs-typography-text-transform:initial;
|
|
818
887
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -872,7 +941,7 @@
|
|
|
872
941
|
|
|
873
942
|
grid-area:note;
|
|
874
943
|
}
|
|
875
|
-
.
|
|
944
|
+
._disabled_1lcp4sb_63 ._note_1lcp4sb_297{
|
|
876
945
|
--_rs-typography-hardness-color:var(
|
|
877
946
|
--rs-color-pale,
|
|
878
947
|
rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
|
package/lib/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
|
|
|
14
14
|
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
15
15
|
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
16
16
|
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
17
|
+
onClear?: React.MouseEventHandler<HTMLButtonElement>;
|
|
17
18
|
onMouseEnter?: React.MouseEventHandler<HTMLTextAreaElement>;
|
|
18
19
|
onMouseLeave?: React.MouseEventHandler<HTMLTextAreaElement>;
|
|
19
20
|
placeholder?: string;
|
|
@@ -43,6 +44,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
|
|
|
43
44
|
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
44
45
|
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
45
46
|
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
47
|
+
onClear?: React.MouseEventHandler<HTMLButtonElement>;
|
|
46
48
|
onMouseEnter?: React.MouseEventHandler<HTMLTextAreaElement>;
|
|
47
49
|
onMouseLeave?: React.MouseEventHandler<HTMLTextAreaElement>;
|
|
48
50
|
placeholder?: string;
|
package/lib/public-api.p.css
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
&:not(html){
|
|
3
3
|
--_rs-textarea-vertical-padding:6px;
|
|
4
4
|
--_rs-textarea-horizontal-padding:8px;
|
|
5
|
+
--_rs-textarea-icon-size:20px;
|
|
6
|
+
--_rs-textarea-icon-offset:8px;
|
|
5
7
|
}
|
|
6
8
|
&:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
|
|
7
9
|
--_rs-icons-height:20px;
|
|
@@ -116,6 +118,8 @@
|
|
|
116
118
|
&:not(html){
|
|
117
119
|
--_rs-textarea-vertical-padding:8px;
|
|
118
120
|
--_rs-textarea-horizontal-padding:8px;
|
|
121
|
+
--_rs-textarea-icon-size:24px;
|
|
122
|
+
--_rs-textarea-icon-offset:8px;
|
|
119
123
|
}
|
|
120
124
|
&:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
|
|
121
125
|
--_rs-icons-height:24px;
|
|
@@ -249,6 +253,8 @@
|
|
|
249
253
|
&:not(html){
|
|
250
254
|
--_rs-textarea-vertical-padding:12px;
|
|
251
255
|
--_rs-textarea-horizontal-padding:16px;
|
|
256
|
+
--_rs-textarea-icon-size:28px;
|
|
257
|
+
--_rs-textarea-icon-offset:16px;
|
|
252
258
|
}
|
|
253
259
|
&:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
|
|
254
260
|
--_rs-icons-height:28px;
|
|
@@ -392,6 +398,13 @@
|
|
|
392
398
|
--_rs-textarea-focused-busy-icon-color:rgba(
|
|
393
399
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
394
400
|
0.7
|
|
401
|
+
);
|
|
402
|
+
--_rs-textarea-focused-clear-icon-color:rgba(
|
|
403
|
+
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
404
|
+
0.7
|
|
405
|
+
);
|
|
406
|
+
--_rs-textarea-focused-clear-icon-accent-color:rgb(
|
|
407
|
+
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
|
|
395
408
|
);
|
|
396
409
|
--_rs-textarea-focused-scrollbar-track-color:rgb(
|
|
397
410
|
calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
|
|
@@ -412,6 +425,13 @@
|
|
|
412
425
|
--_rs-textarea-focused-busy-icon-color:rgba(
|
|
413
426
|
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
|
|
414
427
|
0.7
|
|
428
|
+
);
|
|
429
|
+
--_rs-textarea-focused-clear-icon-color:rgba(
|
|
430
|
+
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
|
|
431
|
+
0.7
|
|
432
|
+
);
|
|
433
|
+
--_rs-textarea-focused-clear-icon-accent-color:rgb(
|
|
434
|
+
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
|
|
415
435
|
);
|
|
416
436
|
--_rs-textarea-focused-scrollbar-track-color:rgb(
|
|
417
437
|
calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
|
package/lib/public-api.pcss
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
&:not(html){
|
|
3
3
|
--_rs-textarea-vertical-padding:6px;
|
|
4
4
|
--_rs-textarea-horizontal-padding:8px;
|
|
5
|
+
--_rs-textarea-icon-size:20px;
|
|
6
|
+
--_rs-textarea-icon-offset:8px;
|
|
5
7
|
}
|
|
6
8
|
&:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
|
|
7
9
|
--_rs-icons-height:20px;
|
|
@@ -116,6 +118,8 @@
|
|
|
116
118
|
&:not(html){
|
|
117
119
|
--_rs-textarea-vertical-padding:8px;
|
|
118
120
|
--_rs-textarea-horizontal-padding:8px;
|
|
121
|
+
--_rs-textarea-icon-size:24px;
|
|
122
|
+
--_rs-textarea-icon-offset:8px;
|
|
119
123
|
}
|
|
120
124
|
&:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
|
|
121
125
|
--_rs-icons-height:24px;
|
|
@@ -249,6 +253,8 @@
|
|
|
249
253
|
&:not(html){
|
|
250
254
|
--_rs-textarea-vertical-padding:12px;
|
|
251
255
|
--_rs-textarea-horizontal-padding:16px;
|
|
256
|
+
--_rs-textarea-icon-size:28px;
|
|
257
|
+
--_rs-textarea-icon-offset:16px;
|
|
252
258
|
}
|
|
253
259
|
&:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
|
|
254
260
|
--_rs-icons-height:28px;
|
|
@@ -392,6 +398,13 @@
|
|
|
392
398
|
--_rs-textarea-focused-busy-icon-color:rgba(
|
|
393
399
|
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
394
400
|
0.7
|
|
401
|
+
);
|
|
402
|
+
--_rs-textarea-focused-clear-icon-color:rgba(
|
|
403
|
+
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
|
|
404
|
+
0.7
|
|
405
|
+
);
|
|
406
|
+
--_rs-textarea-focused-clear-icon-accent-color:rgb(
|
|
407
|
+
calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
|
|
395
408
|
);
|
|
396
409
|
--_rs-textarea-focused-scrollbar-track-color:rgb(
|
|
397
410
|
calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
|
|
@@ -412,6 +425,13 @@
|
|
|
412
425
|
--_rs-textarea-focused-busy-icon-color:rgba(
|
|
413
426
|
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
|
|
414
427
|
0.7
|
|
428
|
+
);
|
|
429
|
+
--_rs-textarea-focused-clear-icon-color:rgba(
|
|
430
|
+
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
|
|
431
|
+
0.7
|
|
432
|
+
);
|
|
433
|
+
--_rs-textarea-focused-clear-icon-accent-color:rgb(
|
|
434
|
+
calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
|
|
415
435
|
);
|
|
416
436
|
--_rs-textarea-focused-scrollbar-track-color:rgb(
|
|
417
437
|
calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
|
package/lib/textarea.d.ts
CHANGED
|
@@ -48,6 +48,10 @@ type TextareaExclusiveProps = {
|
|
|
48
48
|
* `Blur` textarea callback
|
|
49
49
|
*/
|
|
50
50
|
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
51
|
+
/**
|
|
52
|
+
* Clear textarea callback. The clear button appears when this callback is provided and textarea is not empty.
|
|
53
|
+
*/
|
|
54
|
+
onClear?: React.MouseEventHandler<HTMLButtonElement>;
|
|
51
55
|
/**
|
|
52
56
|
* `mouseEnter` textarea callback
|
|
53
57
|
*/
|
|
@@ -91,6 +95,9 @@ type TextareaExclusiveProps = {
|
|
|
91
95
|
label?: React.ReactNode;
|
|
92
96
|
note?: React.ReactNode;
|
|
93
97
|
textareaRef?: React.Ref<HTMLTextAreaElement>;
|
|
98
|
+
/**
|
|
99
|
+
* @deprecated Use `onClear` instead.
|
|
100
|
+
*/
|
|
94
101
|
enableClear?: boolean;
|
|
95
102
|
boldLabel?: boolean;
|
|
96
103
|
/**
|
package/lib/textarea.js
CHANGED
|
@@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize';
|
|
|
5
5
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
6
6
|
import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
|
|
7
7
|
import cn from 'classnames';
|
|
8
|
+
import CloseOutlineIcon from './_virtual/close-outline.js';
|
|
8
9
|
import LoadingOutlineIcon from './_virtual/loading-outline.js';
|
|
9
10
|
import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
|
|
10
11
|
import styles from './textarea.p.module.css.js';
|
|
@@ -31,6 +32,8 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
|
|
|
31
32
|
reserveErrorLine = false,
|
|
32
33
|
busy,
|
|
33
34
|
onChange,
|
|
35
|
+
onClear,
|
|
36
|
+
enableClear: _enableClear,
|
|
34
37
|
size = 'm',
|
|
35
38
|
mode = 'classic',
|
|
36
39
|
theme: themeFromProps,
|
|
@@ -45,6 +48,7 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
|
|
|
45
48
|
} = _ref;
|
|
46
49
|
const theme = useThemeWithUndefined(themeFromProps);
|
|
47
50
|
const isEmpty = !value;
|
|
51
|
+
const showClearIcon = Boolean(onClear && !isEmpty);
|
|
48
52
|
const [focused, setFocused] = useState(false);
|
|
49
53
|
const uniqueId = `textarea-${useBackwardCompatibleId()}`;
|
|
50
54
|
const errorId = `${id ? id : uniqueId}-error`;
|
|
@@ -59,7 +63,7 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
|
|
|
59
63
|
"data-test": 'textarea__label',
|
|
60
64
|
"data-rs-internal": boldLabel ? 'textarea__bold-label' : 'textarea__label'
|
|
61
65
|
}, label), /*#__PURE__*/React.createElement("div", {
|
|
62
|
-
className: styles.wrapper,
|
|
66
|
+
className: cn(styles.wrapper, showClearIcon && styles.clearable),
|
|
63
67
|
onFocus: () => setFocused(true),
|
|
64
68
|
onBlur: () => setFocused(false)
|
|
65
69
|
}, /*#__PURE__*/React.createElement(TextareaAutosize, { ...restProps,
|
|
@@ -73,7 +77,18 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
|
|
|
73
77
|
tabIndex: disabled ? -1 : tabIndex,
|
|
74
78
|
"data-test": 'textarea__input',
|
|
75
79
|
"data-rs-internal": "textarea__inner"
|
|
76
|
-
}),
|
|
80
|
+
}), showClearIcon && /*#__PURE__*/React.createElement("button", {
|
|
81
|
+
type: "button",
|
|
82
|
+
className: styles.clearIcon,
|
|
83
|
+
onClick: onClear,
|
|
84
|
+
"aria-label": "Clear textarea",
|
|
85
|
+
"data-test": "textarea__clear-icon",
|
|
86
|
+
"data-rs-internal": "textarea__clear-icon",
|
|
87
|
+
tabIndex: -1
|
|
88
|
+
}, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
|
|
89
|
+
className: styles.icon,
|
|
90
|
+
"data-render-all-sizes": true
|
|
91
|
+
})), busy && /*#__PURE__*/React.createElement("span", {
|
|
77
92
|
className: styles.busyIcon
|
|
78
93
|
}, /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
|
|
79
94
|
"data-test": "textarea__busy-icon",
|
|
@@ -105,6 +120,7 @@ Textarea.propTypes = {
|
|
|
105
120
|
onChange: PropTypes.func,
|
|
106
121
|
onFocus: PropTypes.func,
|
|
107
122
|
onBlur: PropTypes.func,
|
|
123
|
+
onClear: PropTypes.func,
|
|
108
124
|
size: PropTypes.oneOf(['s', 'm', 'l']),
|
|
109
125
|
mode: PropTypes.oneOf(['classic', 'rock']),
|
|
110
126
|
theme: PropTypes.oneOf(['light', 'dark']),
|
|
@@ -1,24 +1,27 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"sizeS": "
|
|
5
|
-
"sizeM": "
|
|
6
|
-
"sizeL": "
|
|
7
|
-
"classic": "
|
|
8
|
-
"rock": "
|
|
9
|
-
"labelWrapper": "
|
|
10
|
-
"wrapper": "
|
|
11
|
-
"error": "
|
|
12
|
-
"disabled": "
|
|
13
|
-
"enabled": "
|
|
14
|
-
"focused": "
|
|
15
|
-
"filled": "
|
|
16
|
-
"inner": "
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
2
|
+
"themeLight": "_themeLight_1lcp4sb_8",
|
|
3
|
+
"themeDark": "_themeDark_1lcp4sb_11",
|
|
4
|
+
"sizeS": "_sizeS_1lcp4sb_15",
|
|
5
|
+
"sizeM": "_sizeM_1lcp4sb_18",
|
|
6
|
+
"sizeL": "_sizeL_1lcp4sb_21",
|
|
7
|
+
"classic": "_classic_1lcp4sb_25",
|
|
8
|
+
"rock": "_rock_1lcp4sb_28",
|
|
9
|
+
"labelWrapper": "_labelWrapper_1lcp4sb_32",
|
|
10
|
+
"wrapper": "_wrapper_1lcp4sb_40",
|
|
11
|
+
"error": "_error_1lcp4sb_57",
|
|
12
|
+
"disabled": "_disabled_1lcp4sb_63",
|
|
13
|
+
"enabled": "_enabled_1lcp4sb_69",
|
|
14
|
+
"focused": "_focused_1lcp4sb_69",
|
|
15
|
+
"filled": "_filled_1lcp4sb_75",
|
|
16
|
+
"inner": "_inner_1lcp4sb_91",
|
|
17
|
+
"clearable": "_clearable_1lcp4sb_119",
|
|
18
|
+
"clearIcon": "_clearIcon_1lcp4sb_184",
|
|
19
|
+
"icon": "_icon_1lcp4sb_226",
|
|
20
|
+
"busyIcon": "_busyIcon_1lcp4sb_234",
|
|
21
|
+
"label": "_label_1lcp4sb_32",
|
|
22
|
+
"footer": "_footer_1lcp4sb_265",
|
|
23
|
+
"characterCounter": "_characterCounter_1lcp4sb_284",
|
|
24
|
+
"errorMessage": "_errorMessage_1lcp4sb_293",
|
|
25
|
+
"note": "_note_1lcp4sb_297"
|
|
23
26
|
};
|
|
24
27
|
export { styles as default };
|
|
@@ -18,6 +18,30 @@ import { Textarea } from '@rescui/textarea';
|
|
|
18
18
|
</div>;
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
+
### With clear button
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { useState } from 'react';
|
|
25
|
+
import { Textarea } from '@rescui/textarea';
|
|
26
|
+
|
|
27
|
+
const Demo = () => {
|
|
28
|
+
const [value, setValue] = useState('Text that can be cleared and have a decent length');
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div style={{ maxWidth: 400 }}>
|
|
32
|
+
<Textarea
|
|
33
|
+
value={value}
|
|
34
|
+
onChange={e => setValue(e.target.value)}
|
|
35
|
+
onClear={() => setValue('')}
|
|
36
|
+
minRows={3}
|
|
37
|
+
/>
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
render(<Demo />);
|
|
43
|
+
```
|
|
44
|
+
|
|
21
45
|
### With character counter
|
|
22
46
|
|
|
23
47
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/textarea",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -17,20 +17,20 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
20
|
-
"@rescui/form-field": "0.1.6
|
|
20
|
+
"@rescui/form-field": "^0.1.6",
|
|
21
21
|
"classnames": "^2.2.6",
|
|
22
22
|
"react-textarea-autosize": "^8.3.4"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@rescui/ui-contexts": "^0.6.0",
|
|
26
26
|
"prop-types": "^15",
|
|
27
|
-
"react": ">=
|
|
27
|
+
"react": ">=16.8.0 <20"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@rescui/colors": "0.3.
|
|
31
|
-
"@rescui/scripts": "0.5.2",
|
|
32
|
-
"@rescui/typography": "0.27.3
|
|
33
|
-
"@rescui/visual-regression": "0.1.4",
|
|
30
|
+
"@rescui/colors": "^0.3.2",
|
|
31
|
+
"@rescui/scripts": "^0.5.2",
|
|
32
|
+
"@rescui/typography": "^0.27.3",
|
|
33
|
+
"@rescui/visual-regression": "^0.1.4",
|
|
34
34
|
"@types/classnames": "^2.2.11"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
39
39
|
},
|
|
40
40
|
"nx": {},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
|
|
42
42
|
}
|