@rescui/textarea 0.11.6-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.11.6-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43

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 (16) hide show
  1. package/lib/_virtual/close-outline.js +337 -0
  2. package/lib/_virtual/index.css.js +12 -12
  3. package/lib/_virtual/loading-outline.js +310 -79
  4. package/lib/index.css +177 -98
  5. package/lib/index.d.ts +2 -0
  6. package/lib/public-api.p.css +25 -0
  7. package/lib/public-api.pcss +25 -0
  8. package/lib/textarea.d.ts +7 -0
  9. package/lib/textarea.js +336 -69
  10. package/lib/textarea.p.module.css.js +24 -21
  11. package/lib/use-safe-id.d.ts +4 -0
  12. package/lib/use-safe-id.js +10 -0
  13. package/llm/components/textarea.md +24 -0
  14. package/package.json +6 -5
  15. package/lib/use-backward-compatible-id.d.ts +0 -4
  16. package/lib/use-backward-compatible-id.js +0 -14
package/lib/index.css CHANGED
@@ -1,4 +1,9 @@
1
- ._icon_19upof9_4{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._icon_wwfcil_4{
2
7
  --_rs-theme-dark:var(
3
8
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
9
  var(--rs-theme-dark, 0)
@@ -8,7 +13,7 @@
8
13
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
14
  }
10
15
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_19upof9_4{
16
+ ._icon_wwfcil_4{
12
17
  --_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
18
  --_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
19
  --_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 +22,7 @@
17
22
  }
18
23
  }
19
24
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_19upof9_4{
25
+ ._icon_wwfcil_4{
21
26
  --_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
27
  --_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
28
  --_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 +30,30 @@
25
30
  --_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
31
  }
27
32
  }
28
- ._icon_19upof9_4{
33
+ ._icon_wwfcil_4{
29
34
 
30
35
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
36
 
32
37
  width:var(--rs-icons-width, auto);
33
38
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
39
  }
35
- ._sizeXS_19upof9_14{
40
+ ._sizeXS_wwfcil_14{
36
41
  --_rs-icons-height:16px;
37
42
  }
38
- ._sizeS_19upof9_18{
43
+ ._sizeS_wwfcil_18{
39
44
  --_rs-icons-height:20px;
40
45
  }
41
- ._sizeM_19upof9_22{
46
+ ._sizeM_wwfcil_22{
42
47
  --_rs-icons-height:24px;
43
48
  }
44
- ._sizeL_19upof9_26{
49
+ ._sizeL_wwfcil_26{
45
50
  --_rs-icons-height:28px;
46
51
  }
47
- ._light_19upof9_30{
52
+ ._light_wwfcil_30{
48
53
  --rs-theme-dark:0;
49
54
  --_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
55
  }
51
- ._dark_19upof9_34{
56
+ ._dark_wwfcil_34{
52
57
  --rs-theme-dark:1;
53
58
  --_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
59
  }
@@ -60,56 +65,63 @@
60
65
  transform:rotate(360deg);
61
66
  }
62
67
  }
63
- ._allVariants_19upof9_48{
68
+ ._allVariants_wwfcil_48{
64
69
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
70
  container:rs-icon / size;
66
71
  }
67
- ._variant16_19upof9_53,
68
- ._variant20_19upof9_54,
69
- ._variant24_19upof9_55{
72
+ ._variant16_wwfcil_53,
73
+ ._variant20_wwfcil_54,
74
+ ._variant24_wwfcil_55{
70
75
  display:none;
71
76
  }
72
- ._variant28_19upof9_58{
77
+ ._variant28_wwfcil_58{
73
78
  display:block;
74
79
  }
75
80
  @container rs-icon (max-height: 24px){
76
- ._variant24_19upof9_55{
81
+ ._variant24_wwfcil_55{
77
82
  display:block;
78
83
  }
79
- ._variant28_19upof9_58{
84
+ ._variant28_wwfcil_58{
80
85
  display:none;
81
86
  }
82
87
  }
83
88
  @container rs-icon (max-height: 20px){
84
- ._variant20_19upof9_54{
89
+ ._variant20_wwfcil_54{
85
90
  display:block;
86
91
  }
87
- ._variant24_19upof9_55{
92
+ ._variant24_wwfcil_55{
88
93
  display:none;
89
94
  }
90
95
  }
91
96
  @container rs-icon (max-height: 16px){
92
- ._variant16_19upof9_53{
97
+ ._variant16_wwfcil_53{
93
98
  display:block;
94
99
  }
95
- ._variant20_19upof9_54{
100
+ ._variant20_wwfcil_54{
96
101
  display:none;
97
102
  }
98
103
  }
99
- ._themeLight_18horc_8{
104
+ @property --_rs-theme-dark-coefficient{
105
+ syntax:'<number>';
106
+ inherits:true;
107
+ initial-value:0;
108
+ }
109
+ ._themeLight_1hf7mcw_8{
100
110
  --rs-theme-dark:0;
101
111
  }
102
- ._themeDark_18horc_11{
112
+ ._themeDark_1hf7mcw_11{
103
113
  --rs-theme-dark:1;
104
114
  }
105
- ._sizeS_18horc_15{
115
+ ._sizeS_1hf7mcw_15{
106
116
  --_rs-textarea-vertical-padding:6px;
107
117
  --_rs-textarea-horizontal-padding:8px;
118
+ --_rs-textarea-icon-size:20px;
119
+ --_rs-textarea-icon-offset:8px;
108
120
  }
109
- ._sizeS_18horc_15 [data-rs-internal='textarea__busy-icon']:not(html){
121
+ ._sizeS_1hf7mcw_15 [data-rs-internal='textarea__busy-icon']:not(html){
110
122
  --_rs-icons-height:20px;
111
123
  }
112
- ._sizeS_18horc_15 [data-rs-internal='textarea__inner']::-moz-placeholder{
124
+ ._sizeS_1hf7mcw_15 [data-rs-internal='textarea__inner']::-moz-placeholder{
113
125
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
114
126
  --_rs-typography-text-transform:initial;
115
127
  --_rs-typography-font-variant-numeric:initial;
@@ -144,10 +156,10 @@
144
156
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
145
157
  --_rs-typography-link-border-bottom-width-from-text:1px;
146
158
  }
147
- ._sizeS_18horc_15 [data-rs-internal='textarea__label'],
148
- ._sizeS_18horc_15 [data-rs-internal='textarea__inner'],
149
- ._sizeS_18horc_15 [data-rs-internal='textarea__inner']::placeholder,
150
- ._sizeS_18horc_15 [data-rs-internal='textarea__suffix']{
159
+ ._sizeS_1hf7mcw_15 [data-rs-internal='textarea__label'],
160
+ ._sizeS_1hf7mcw_15 [data-rs-internal='textarea__inner'],
161
+ ._sizeS_1hf7mcw_15 [data-rs-internal='textarea__inner']::placeholder,
162
+ ._sizeS_1hf7mcw_15 [data-rs-internal='textarea__suffix']{
151
163
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
152
164
  --_rs-typography-text-transform:initial;
153
165
  --_rs-typography-font-variant-numeric:initial;
@@ -182,7 +194,7 @@
182
194
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
183
195
  --_rs-typography-link-border-bottom-width-from-text:1px;
184
196
  }
185
- ._sizeS_18horc_15 [data-rs-internal='textarea__bold-label']{
197
+ ._sizeS_1hf7mcw_15 [data-rs-internal='textarea__bold-label']{
186
198
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
187
199
  --_rs-typography-text-transform:initial;
188
200
  --_rs-typography-font-variant-numeric:initial;
@@ -214,14 +226,16 @@
214
226
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
215
227
  --_rs-typography-link-border-bottom-width-from-text:2px;
216
228
  }
217
- ._sizeM_18horc_18{
229
+ ._sizeM_1hf7mcw_18{
218
230
  --_rs-textarea-vertical-padding:8px;
219
231
  --_rs-textarea-horizontal-padding:8px;
232
+ --_rs-textarea-icon-size:24px;
233
+ --_rs-textarea-icon-offset:8px;
220
234
  }
221
- ._sizeM_18horc_18 [data-rs-internal='textarea__busy-icon']:not(html){
235
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__busy-icon']:not(html){
222
236
  --_rs-icons-height:24px;
223
237
  }
224
- ._sizeM_18horc_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
238
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
225
239
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
226
240
  --_rs-typography-text-transform:initial;
227
241
  --_rs-typography-font-variant-numeric:initial;
@@ -260,14 +274,14 @@
260
274
  --_rs-typography-link-border-bottom-width-from-text:1px;
261
275
  }
262
276
  @media screen and (max-width: 640px){
263
- ._sizeM_18horc_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
277
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
264
278
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
265
279
  }
266
280
  }
267
- ._sizeM_18horc_18 [data-rs-internal='textarea__label'],
268
- ._sizeM_18horc_18 [data-rs-internal='textarea__inner'],
269
- ._sizeM_18horc_18 [data-rs-internal='textarea__inner']::placeholder,
270
- ._sizeM_18horc_18 [data-rs-internal='textarea__suffix']{
281
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__label'],
282
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__inner'],
283
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__inner']::placeholder,
284
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__suffix']{
271
285
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
272
286
  --_rs-typography-text-transform:initial;
273
287
  --_rs-typography-font-variant-numeric:initial;
@@ -306,14 +320,14 @@
306
320
  --_rs-typography-link-border-bottom-width-from-text:1px;
307
321
  }
308
322
  @media screen and (max-width: 640px){
309
- ._sizeM_18horc_18 [data-rs-internal='textarea__label'],
310
- ._sizeM_18horc_18 [data-rs-internal='textarea__inner'],
311
- ._sizeM_18horc_18 [data-rs-internal='textarea__inner']::placeholder,
312
- ._sizeM_18horc_18 [data-rs-internal='textarea__suffix']{
323
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__label'],
324
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__inner'],
325
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__inner']::placeholder,
326
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__suffix']{
313
327
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
314
328
  }
315
329
  }
316
- ._sizeM_18horc_18 [data-rs-internal='textarea__bold-label']{
330
+ ._sizeM_1hf7mcw_18 [data-rs-internal='textarea__bold-label']{
317
331
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
318
332
  --_rs-typography-text-transform:initial;
319
333
  --_rs-typography-font-variant-numeric:initial;
@@ -345,14 +359,16 @@
345
359
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
346
360
  --_rs-typography-link-border-bottom-width-from-text:2px;
347
361
  }
348
- ._sizeL_18horc_21{
362
+ ._sizeL_1hf7mcw_21{
349
363
  --_rs-textarea-vertical-padding:12px;
350
364
  --_rs-textarea-horizontal-padding:16px;
365
+ --_rs-textarea-icon-size:28px;
366
+ --_rs-textarea-icon-offset:16px;
351
367
  }
352
- ._sizeL_18horc_21 [data-rs-internal='textarea__busy-icon']:not(html){
368
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__busy-icon']:not(html){
353
369
  --_rs-icons-height:28px;
354
370
  }
355
- ._sizeL_18horc_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
371
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
356
372
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
357
373
  --_rs-typography-text-transform:initial;
358
374
  --_rs-typography-font-variant-numeric:initial;
@@ -391,14 +407,14 @@
391
407
  --_rs-typography-link-border-bottom-width-from-text:1px;
392
408
  }
393
409
  @media screen and (max-width: 640px){
394
- ._sizeL_18horc_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
410
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
395
411
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
396
412
  }
397
413
  }
398
- ._sizeL_18horc_21 [data-rs-internal='textarea__label'],
399
- ._sizeL_18horc_21 [data-rs-internal='textarea__inner'],
400
- ._sizeL_18horc_21 [data-rs-internal='textarea__inner']::placeholder,
401
- ._sizeL_18horc_21 [data-rs-internal='textarea__suffix']{
414
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__label'],
415
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__inner'],
416
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__inner']::placeholder,
417
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__suffix']{
402
418
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
403
419
  --_rs-typography-text-transform:initial;
404
420
  --_rs-typography-font-variant-numeric:initial;
@@ -437,14 +453,14 @@
437
453
  --_rs-typography-link-border-bottom-width-from-text:1px;
438
454
  }
439
455
  @media screen and (max-width: 640px){
440
- ._sizeL_18horc_21 [data-rs-internal='textarea__label'],
441
- ._sizeL_18horc_21 [data-rs-internal='textarea__inner'],
442
- ._sizeL_18horc_21 [data-rs-internal='textarea__inner']::placeholder,
443
- ._sizeL_18horc_21 [data-rs-internal='textarea__suffix']{
456
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__label'],
457
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__inner'],
458
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__inner']::placeholder,
459
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__suffix']{
444
460
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
445
461
  }
446
462
  }
447
- ._sizeL_18horc_21 [data-rs-internal='textarea__bold-label']{
463
+ ._sizeL_1hf7mcw_21 [data-rs-internal='textarea__bold-label']{
448
464
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
449
465
  --_rs-typography-text-transform:initial;
450
466
  --_rs-typography-font-variant-numeric:initial;
@@ -476,7 +492,7 @@
476
492
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
477
493
  --_rs-typography-link-border-bottom-width-from-text:2px;
478
494
  }
479
- ._classic_18horc_25{
495
+ ._classic_1hf7mcw_25{
480
496
  --_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
497
  --_rs-textarea-focused-background-color:rgb(
482
498
  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 +506,18 @@
490
506
  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
507
  0.7
492
508
  );
509
+ --_rs-textarea-focused-clear-icon-color:rgba(
510
+ 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),
511
+ 0.7
512
+ );
513
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
514
+ 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)
515
+ );
493
516
  --_rs-textarea-focused-scrollbar-track-color:rgb(
494
517
  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
518
  );
496
519
  }
497
- ._rock_18horc_28{
520
+ ._rock_1hf7mcw_28{
498
521
  --_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
522
  --_rs-textarea-focused-background-color:rgb(
500
523
  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 +531,18 @@
508
531
  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
532
  0.7
510
533
  );
534
+ --_rs-textarea-focused-clear-icon-color:rgba(
535
+ 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),
536
+ 0.7
537
+ );
538
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
539
+ 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)
540
+ );
511
541
  --_rs-textarea-focused-scrollbar-track-color:rgb(
512
542
  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
543
  );
514
544
  }
515
- ._labelWrapper_18horc_32{
545
+ ._labelWrapper_1hf7mcw_32{
516
546
  --_rs-theme-dark:var(
517
547
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
518
548
  var(--rs-theme-dark, 0)
@@ -522,7 +552,7 @@
522
552
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
523
553
  }
524
554
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
525
- ._labelWrapper_18horc_32{
555
+ ._labelWrapper_1hf7mcw_32{
526
556
  --_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
557
  --_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
558
  --_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 +561,7 @@
531
561
  }
532
562
  }
533
563
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
534
- ._labelWrapper_18horc_32{
564
+ ._labelWrapper_1hf7mcw_32{
535
565
  --_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
566
  --_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
567
  --_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 +570,22 @@
540
570
  }
541
571
  }
542
572
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
543
- ._labelWrapper_18horc_32{
573
+ ._labelWrapper_1hf7mcw_32{
544
574
  --_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
575
  --_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
576
  }
547
577
  }
548
578
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
549
- ._labelWrapper_18horc_32{
579
+ ._labelWrapper_1hf7mcw_32{
550
580
  --_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
581
  --_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
582
  }
553
583
  }
554
- ._labelWrapper_18horc_32 {
584
+ ._labelWrapper_1hf7mcw_32 {
555
585
 
556
586
  display:block;
557
587
  }
558
- ._wrapper_18horc_40{
588
+ ._wrapper_1hf7mcw_40{
559
589
  --_rs-textarea-border-width:1px;
560
590
  --_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
591
  --_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 +601,34 @@
571
601
 
572
602
  box-shadow:inset 0 0 0 var(--_rs-textarea-border-width) var(--_rs-textarea-border-color);
573
603
  }
574
- ._error_18horc_57 ._wrapper_18horc_40{
604
+ ._error_1hf7mcw_57 ._wrapper_1hf7mcw_40{
575
605
  --_rs-textarea-border-width:2px;
576
606
  --_rs-textarea-border-color:var(--_rs-color-danger);
577
607
  --_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
608
  }
579
- ._disabled_18horc_63 ._wrapper_18horc_40{
609
+ ._disabled_1hf7mcw_63 ._wrapper_1hf7mcw_40{
580
610
  --_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
611
 
582
612
  cursor:default;
583
613
  }
584
- ._enabled_18horc_69._focused_18horc_69 ._wrapper_18horc_40{
614
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._wrapper_1hf7mcw_40{
585
615
  --_rs-textarea-background-color:var(
586
616
  --_rs-textarea-focused-background-color
587
617
  );
588
618
  }
589
- ._enabled_18horc_69:not(._error_18horc_57)._filled_18horc_75 ._wrapper_18horc_40{
619
+ ._enabled_1hf7mcw_69:not(._error_1hf7mcw_57)._filled_1hf7mcw_75 ._wrapper_1hf7mcw_40{
590
620
  --_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
621
  }
592
622
  @media (hover: hover){
593
- ._enabled_18horc_69:not(._error_18horc_57):hover ._wrapper_18horc_40{
623
+ ._enabled_1hf7mcw_69:not(._error_1hf7mcw_57):hover ._wrapper_1hf7mcw_40{
594
624
  --_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
625
  }
596
626
  }
597
- ._enabled_18horc_69:not(._error_18horc_57)._focused_18horc_69 ._wrapper_18horc_40{
627
+ ._enabled_1hf7mcw_69:not(._error_1hf7mcw_57)._focused_1hf7mcw_69 ._wrapper_1hf7mcw_40{
598
628
  --_rs-textarea-border-width:var(--_rs-textarea-focused-border-width);
599
629
  --_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
630
  }
601
- ._inner_18horc_91{
631
+ ._inner_1hf7mcw_91{
602
632
  letter-spacing:var(
603
633
  --rs-text-base-letter-spacing,
604
634
  var(--_rs-typography-letter-spacing)
@@ -632,26 +662,29 @@
632
662
  -moz-appearance:none;
633
663
  appearance:none;
634
664
  }
665
+ ._clearable_1hf7mcw_119 ._inner_1hf7mcw_91{
666
+ padding-right:calc(var(--_rs-textarea-horizontal-padding) + var(--_rs-textarea-icon-size) + var(--_rs-textarea-icon-offset) - var(--_rs-textarea-border-width));
667
+ }
635
668
  @media (hover: hover){
636
- ._inner_18horc_91{
669
+ ._inner_1hf7mcw_91{
637
670
  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
671
  scrollbar-width:thin
639
672
  }
640
673
 
641
- ._inner_18horc_91::-webkit-scrollbar{
674
+ ._inner_1hf7mcw_91::-webkit-scrollbar{
642
675
  width:7px;
643
676
  height:8px;
644
677
  }
645
678
 
646
- ._inner_18horc_91::-webkit-scrollbar-corner{
679
+ ._inner_1hf7mcw_91::-webkit-scrollbar-corner{
647
680
  background-color:transparent;
648
681
  }
649
682
 
650
- ._inner_18horc_91::-webkit-scrollbar-track{
683
+ ._inner_1hf7mcw_91::-webkit-scrollbar-track{
651
684
  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
685
  }
653
686
 
654
- ._inner_18horc_91::-webkit-scrollbar-thumb{
687
+ ._inner_1hf7mcw_91::-webkit-scrollbar-thumb{
655
688
  width:7px;
656
689
 
657
690
  border-radius:7px;
@@ -659,40 +692,86 @@
659
692
  background:#8C8C8E;
660
693
  }
661
694
 
662
- ._enabled_18horc_69._focused_18horc_69 ._inner_18horc_91{
695
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._inner_1hf7mcw_91{
663
696
  scrollbar-color:#8C8C8E var(--_rs-textarea-focused-scrollbar-track-color);
664
697
  }
665
698
 
666
- ._enabled_18horc_69._focused_18horc_69 ._inner_18horc_91::-webkit-scrollbar-track{
699
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._inner_1hf7mcw_91::-webkit-scrollbar-track{
667
700
  background-color:var(--_rs-textarea-focused-scrollbar-track-color);
668
701
  }
669
702
  }
670
- ._inner_18horc_91:focus{
703
+ ._inner_1hf7mcw_91:focus{
671
704
  outline:none;
672
705
  }
673
- ._inner_18horc_91::-moz-placeholder{
706
+ ._inner_1hf7mcw_91::-moz-placeholder{
674
707
  opacity:1;
675
708
 
676
709
  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
710
  }
678
- ._enabled_18horc_69._focused_18horc_69 ._inner_18horc_91::-moz-placeholder{
711
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._inner_1hf7mcw_91::-moz-placeholder{
679
712
  color:var(--_rs-textarea-focused-placeholder-color);
680
713
  }
681
- ._inner_18horc_91::placeholder{
714
+ ._inner_1hf7mcw_91::placeholder{
682
715
  opacity:1;
683
716
 
684
717
  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
718
  }
686
- ._enabled_18horc_69._focused_18horc_69 ._inner_18horc_91::placeholder{
719
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._inner_1hf7mcw_91::placeholder{
687
720
  color:var(--_rs-textarea-focused-placeholder-color);
688
721
  }
689
- ._disabled_18horc_63 ._inner_18horc_91{
722
+ ._disabled_1hf7mcw_63 ._inner_1hf7mcw_91{
690
723
  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
724
  }
692
- ._enabled_18horc_69._focused_18horc_69 ._inner_18horc_91{
725
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._inner_1hf7mcw_91{
693
726
  color:var(--_rs-textarea-focused-color);
694
727
  }
695
- ._busyIcon_18horc_177{
728
+ ._clearIcon_1hf7mcw_184{
729
+ position:absolute;
730
+ top:var(--_rs-textarea-vertical-padding);
731
+ right:var(--_rs-textarea-horizontal-padding);
732
+
733
+ display:flex;
734
+
735
+ padding:0;
736
+
737
+ border:none;
738
+
739
+ cursor:pointer;
740
+
741
+ 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);
742
+
743
+ background:transparent;
744
+ -webkit-appearance:none;
745
+ -moz-appearance:none;
746
+ appearance:none;
747
+ }
748
+ ._clearIcon_1hf7mcw_184:focus{
749
+ outline:none;
750
+ }
751
+ ._disabled_1hf7mcw_63 ._clearIcon_1hf7mcw_184{
752
+ pointer-events:none;
753
+
754
+ 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);
755
+ }
756
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._clearIcon_1hf7mcw_184{
757
+ color:var(--_rs-textarea-focused-clear-icon-color);
758
+ }
759
+ @media (hover: hover){
760
+ ._enabled_1hf7mcw_69 ._clearIcon_1hf7mcw_184:hover{
761
+ 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));
762
+ }
763
+
764
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._clearIcon_1hf7mcw_184:hover{
765
+ color:var(--_rs-textarea-focused-clear-icon-accent-color);
766
+ }
767
+ }
768
+ ._clearIcon_1hf7mcw_184 ._icon_1hf7mcw_226{
769
+ fill:currentColor;
770
+
771
+ width:auto;
772
+ height:var(--_rs-textarea-icon-size);
773
+ }
774
+ ._busyIcon_1hf7mcw_234{
696
775
  position:absolute;
697
776
  right:var(--_rs-textarea-horizontal-padding);
698
777
  bottom:var(--_rs-textarea-vertical-padding);
@@ -703,13 +782,13 @@
703
782
 
704
783
  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
784
  }
706
- ._disabled_18horc_63 ._busyIcon_18horc_177{
785
+ ._disabled_1hf7mcw_63 ._busyIcon_1hf7mcw_234{
707
786
  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
787
  }
709
- ._enabled_18horc_69._focused_18horc_69 ._busyIcon_18horc_177{
788
+ ._enabled_1hf7mcw_69._focused_1hf7mcw_69 ._busyIcon_1hf7mcw_234{
710
789
  color:var(--_rs-textarea-focused-busy-icon-color);
711
790
  }
712
- ._label_18horc_32{
791
+ ._label_1hf7mcw_32{
713
792
  letter-spacing:var(
714
793
  --rs-text-base-letter-spacing,
715
794
  var(--_rs-typography-letter-spacing)
@@ -728,13 +807,13 @@
728
807
 
729
808
  margin-bottom:4px;
730
809
  }
731
- ._disabled_18horc_63 ._label_18horc_32{
810
+ ._disabled_1hf7mcw_63 ._label_1hf7mcw_32{
732
811
  color:var(
733
812
  --rs-color-pale,
734
813
  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
814
  );
736
815
  }
737
- ._footer_18horc_208{
816
+ ._footer_1hf7mcw_265{
738
817
  display:grid;
739
818
  grid-template-areas:"note character-counter" "error-message character-counter";
740
819
  grid-template-columns:1fr auto;
@@ -744,10 +823,10 @@
744
823
 
745
824
  margin-top:4px;
746
825
  }
747
- ._error_18horc_57 ._footer_18horc_208{
826
+ ._error_1hf7mcw_57 ._footer_1hf7mcw_265{
748
827
  grid-template-areas:"error-message character-counter" "note character-counter";
749
828
  }
750
- ._characterCounter_18horc_227{
829
+ ._characterCounter_1hf7mcw_284{
751
830
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
752
831
  --_rs-typography-text-transform:initial;
753
832
  --_rs-typography-font-variant-numeric:initial;
@@ -809,10 +888,10 @@
809
888
 
810
889
  margin-left:16px;
811
890
  }
812
- ._errorMessage_18horc_236{
891
+ ._errorMessage_1hf7mcw_293{
813
892
  grid-area:error-message;
814
893
  }
815
- ._note_18horc_240{
894
+ ._note_1hf7mcw_297{
816
895
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
817
896
  --_rs-typography-text-transform:initial;
818
897
  --_rs-typography-font-variant-numeric:initial;
@@ -872,7 +951,7 @@
872
951
 
873
952
  grid-area:note;
874
953
  }
875
- ._disabled_18horc_63 ._note_18horc_240{
954
+ ._disabled_1hf7mcw_63 ._note_1hf7mcw_297{
876
955
  --_rs-typography-hardness-color:var(
877
956
  --rs-color-pale,
878
957
  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;