@rescui/tag 0.13.10 → 0.13.12-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14

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 (10) hide show
  1. package/README.md +3 -1
  2. package/lib/_virtual/index.css.js +12 -12
  3. package/lib/index.css +78 -78
  4. package/lib/parts/base-tag.p.module.css.js +9 -9
  5. package/lib/parts/removable-tag.p.module.css.js +12 -12
  6. package/lib/parts/sticky-tag.p.module.css.js +11 -11
  7. package/lib/parts/tag.p.module.css.js +1 -1
  8. package/llm/components/tag.md +632 -0
  9. package/llm/index.md +2 -0
  10. package/package.json +8 -7
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
1
  # Tag
2
2
 
3
- * [Usage examples](./docs/demo.md)
3
+ ## LLM
4
+
5
+ To get the docs for the LLM, check out [this index](./llm/index.md).
package/lib/_virtual/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_1tf5os8_4",
3
- "sizeXS": "_sizeXS_1tf5os8_14",
4
- "sizeS": "_sizeS_1tf5os8_18",
5
- "sizeM": "_sizeM_1tf5os8_22",
6
- "sizeL": "_sizeL_1tf5os8_26",
7
- "light": "_light_1tf5os8_30",
8
- "dark": "_dark_1tf5os8_34",
9
- "allVariants": "_allVariants_1tf5os8_48",
10
- "variant16": "_variant16_1tf5os8_53",
11
- "variant20": "_variant20_1tf5os8_54",
12
- "variant24": "_variant24_1tf5os8_55",
13
- "variant28": "_variant28_1tf5os8_58"
2
+ "icon": "_icon_19upof9_4",
3
+ "sizeXS": "_sizeXS_19upof9_14",
4
+ "sizeS": "_sizeS_19upof9_18",
5
+ "sizeM": "_sizeM_19upof9_22",
6
+ "sizeL": "_sizeL_19upof9_26",
7
+ "light": "_light_19upof9_30",
8
+ "dark": "_dark_19upof9_34",
9
+ "allVariants": "_allVariants_19upof9_48",
10
+ "variant16": "_variant16_19upof9_53",
11
+ "variant20": "_variant20_19upof9_54",
12
+ "variant24": "_variant24_19upof9_55",
13
+ "variant28": "_variant28_19upof9_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_1tf5os8_4{
1
+ ._icon_19upof9_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
- ._icon_1tf5os8_4{
11
+ ._icon_19upof9_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
- ._icon_1tf5os8_4{
20
+ ._icon_19upof9_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
- ._icon_1tf5os8_4{
28
+ ._icon_19upof9_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
- ._sizeXS_1tf5os8_14{
35
+ ._sizeXS_19upof9_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_1tf5os8_18{
38
+ ._sizeS_19upof9_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_1tf5os8_22{
41
+ ._sizeM_19upof9_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_1tf5os8_26{
44
+ ._sizeL_19upof9_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_1tf5os8_30{
47
+ ._light_19upof9_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
- ._dark_1tf5os8_34{
51
+ ._dark_19upof9_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,55 +60,55 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_1tf5os8_48{
63
+ ._allVariants_19upof9_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
- ._variant16_1tf5os8_53,
68
- ._variant20_1tf5os8_54,
69
- ._variant24_1tf5os8_55{
67
+ ._variant16_19upof9_53,
68
+ ._variant20_19upof9_54,
69
+ ._variant24_19upof9_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_1tf5os8_58{
72
+ ._variant28_19upof9_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_1tf5os8_55{
76
+ ._variant24_19upof9_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_1tf5os8_58{
79
+ ._variant28_19upof9_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_1tf5os8_54{
84
+ ._variant20_19upof9_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_1tf5os8_55{
87
+ ._variant24_19upof9_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_1tf5os8_53{
92
+ ._variant16_19upof9_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_1tf5os8_54{
95
+ ._variant20_19upof9_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._alignIconLeft_1ns7jx6_7{
99
+ ._alignIconLeft_qnyffr_7{
100
100
  --_rs-tag-flex-direction:row;
101
101
  }
102
- ._alignIconRight_1ns7jx6_10{
102
+ ._alignIconRight_qnyffr_10{
103
103
  --_rs-tag-flex-direction:row-reverse;
104
104
  }
105
- ._uppercase_1ns7jx6_14{
105
+ ._uppercase_qnyffr_14{
106
106
  --_rs-tag-text-transform:uppercase;
107
107
  --_rs-tag-horizontal-padding-or-initial:var(
108
108
  --_rs-tag-uppercase-horizontal-padding
109
109
  );
110
110
  }
111
- ._sizeXs_1ns7jx6_18{
111
+ ._sizeXs_qnyffr_18{
112
112
  --_rs-tag-vertical-padding:2px;
113
113
  --_rs-tag-base-horizontal-padding:8px;
114
114
  --_rs-tag-uppercase-horizontal-padding:var(
@@ -150,7 +150,7 @@
150
150
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
151
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
152
  }
153
- ._sizeS_1ns7jx6_21{
153
+ ._sizeS_qnyffr_21{
154
154
  --_rs-tag-vertical-padding:4px;
155
155
  --_rs-tag-base-horizontal-padding:8px;
156
156
  --_rs-tag-uppercase-horizontal-padding:10px;
@@ -190,7 +190,7 @@
190
190
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
191
191
  --_rs-typography-link-border-bottom-width-from-text:1px;
192
192
  }
193
- ._sizeM_1ns7jx6_24{
193
+ ._sizeM_qnyffr_24{
194
194
  --_rs-tag-vertical-padding:6px;
195
195
  --_rs-tag-base-horizontal-padding:12px;
196
196
  --_rs-tag-uppercase-horizontal-padding:var(
@@ -236,11 +236,11 @@
236
236
  --_rs-typography-link-border-bottom-width-from-text:1px;
237
237
  }
238
238
  @media screen and (max-width: 640px){
239
- ._sizeM_1ns7jx6_24{
239
+ ._sizeM_qnyffr_24{
240
240
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
241
241
  }
242
242
  }
243
- ._sizeL_1ns7jx6_27{
243
+ ._sizeL_qnyffr_27{
244
244
  --_rs-tag-vertical-padding:8px;
245
245
  --_rs-tag-base-horizontal-padding:16px;
246
246
  --_rs-tag-uppercase-horizontal-padding:var(
@@ -286,11 +286,11 @@
286
286
  --_rs-typography-link-border-bottom-width-from-text:1px;
287
287
  }
288
288
  @media screen and (max-width: 640px){
289
- ._sizeL_1ns7jx6_27{
289
+ ._sizeL_qnyffr_27{
290
290
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
291
291
  }
292
292
  }
293
- ._main_1ns7jx6_31{
293
+ ._main_qnyffr_31{
294
294
  --_rs-tag-border-width:1px;
295
295
 
296
296
  --_rs-tag-horizontal-padding:var(
@@ -331,34 +331,34 @@
331
331
  background:transparent;
332
332
  gap:8px;
333
333
  }
334
- ._main_1ns7jx6_31 ._icon_1ns7jx6_60{
334
+ ._main_qnyffr_31 ._icon_qnyffr_60{
335
335
  fill:currentColor;
336
336
 
337
337
  width:auto;
338
338
  height:var(--_rs-tag-icon-size);
339
339
  }
340
340
 
341
- ._main_1lwkdik_1{
341
+ ._main_1vzrsi9_1{
342
342
  border-radius:var(--_rs-tag-border-radius);
343
343
  }
344
344
 
345
- ._themeLight_8amqmr_7{
345
+ ._themeLight_mpsmni_7{
346
346
  --rs-theme-dark:0;
347
347
  }
348
- ._themeDark_8amqmr_10{
348
+ ._themeDark_mpsmni_10{
349
349
  --rs-theme-dark:1;
350
350
  }
351
- ._sizeXs_8amqmr_14{
351
+ ._sizeXs_mpsmni_14{
352
352
  --_rs-tag-removable-vertical-padding:2px;
353
353
  --_rs-tag-removable-left-padding:8px;
354
354
  --_rs-tag-removable-border-radius:4px;
355
355
  --_rs-tag-removable-close-part-size:24px;
356
356
  --_rs-tag-removable-custom-icon-size:16px;
357
357
  }
358
- ._sizeXs_8amqmr_14 [data-rs-internal="removable-tag__close-icon"]:not(html){
358
+ ._sizeXs_mpsmni_14 [data-rs-internal="removable-tag__close-icon"]:not(html){
359
359
  --_rs-icons-height:16px;
360
360
  }
361
- ._sizeXs_8amqmr_14 {
361
+ ._sizeXs_mpsmni_14 {
362
362
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
363
363
  --_rs-typography-text-transform:initial;
364
364
  --_rs-typography-font-variant-numeric:initial;
@@ -393,17 +393,17 @@
393
393
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
394
394
  --_rs-typography-link-border-bottom-width-from-text:1px;
395
395
  }
396
- ._sizeS_8amqmr_17{
396
+ ._sizeS_mpsmni_17{
397
397
  --_rs-tag-removable-vertical-padding:4px;
398
398
  --_rs-tag-removable-left-padding:8px;
399
399
  --_rs-tag-removable-border-radius:4px;
400
400
  --_rs-tag-removable-close-part-size:28px;
401
401
  --_rs-tag-removable-custom-icon-size:20px;
402
402
  }
403
- ._sizeS_8amqmr_17 [data-rs-internal="removable-tag__close-icon"]:not(html){
403
+ ._sizeS_mpsmni_17 [data-rs-internal="removable-tag__close-icon"]:not(html){
404
404
  --_rs-icons-height:20px;
405
405
  }
406
- ._sizeS_8amqmr_17 {
406
+ ._sizeS_mpsmni_17 {
407
407
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
408
408
  --_rs-typography-text-transform:initial;
409
409
  --_rs-typography-font-variant-numeric:initial;
@@ -438,17 +438,17 @@
438
438
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
439
439
  --_rs-typography-link-border-bottom-width-from-text:1px;
440
440
  }
441
- ._sizeM_8amqmr_20{
441
+ ._sizeM_mpsmni_20{
442
442
  --_rs-tag-removable-vertical-padding:6px;
443
443
  --_rs-tag-removable-left-padding:12px;
444
444
  --_rs-tag-removable-border-radius:6px;
445
445
  --_rs-tag-removable-close-part-size:36px;
446
446
  --_rs-tag-removable-custom-icon-size:24px;
447
447
  }
448
- ._sizeM_8amqmr_20 [data-rs-internal="removable-tag__close-icon"]:not(html){
448
+ ._sizeM_mpsmni_20 [data-rs-internal="removable-tag__close-icon"]:not(html){
449
449
  --_rs-icons-height:24px;
450
450
  }
451
- ._sizeM_8amqmr_20 {
451
+ ._sizeM_mpsmni_20 {
452
452
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
453
453
  --_rs-typography-text-transform:initial;
454
454
  --_rs-typography-font-variant-numeric:initial;
@@ -487,21 +487,21 @@
487
487
  --_rs-typography-link-border-bottom-width-from-text:1px;
488
488
  }
489
489
  @media screen and (max-width: 640px){
490
- ._sizeM_8amqmr_20 {
490
+ ._sizeM_mpsmni_20 {
491
491
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
492
492
  }
493
493
  }
494
- ._sizeL_8amqmr_23{
494
+ ._sizeL_mpsmni_23{
495
495
  --_rs-tag-removable-vertical-padding:8px;
496
496
  --_rs-tag-removable-left-padding:16px;
497
497
  --_rs-tag-removable-border-radius:8px;
498
498
  --_rs-tag-removable-close-part-size:44px;
499
499
  --_rs-tag-removable-custom-icon-size:28px;
500
500
  }
501
- ._sizeL_8amqmr_23 [data-rs-internal="removable-tag__close-icon"]:not(html){
501
+ ._sizeL_mpsmni_23 [data-rs-internal="removable-tag__close-icon"]:not(html){
502
502
  --_rs-icons-height:28px;
503
503
  }
504
- ._sizeL_8amqmr_23 {
504
+ ._sizeL_mpsmni_23 {
505
505
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
506
506
  --_rs-typography-text-transform:initial;
507
507
  --_rs-typography-font-variant-numeric:initial;
@@ -540,11 +540,11 @@
540
540
  --_rs-typography-link-border-bottom-width-from-text:1px;
541
541
  }
542
542
  @media screen and (max-width: 640px){
543
- ._sizeL_8amqmr_23 {
543
+ ._sizeL_mpsmni_23 {
544
544
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
545
545
  }
546
546
  }
547
- ._wrapper_8amqmr_27{
547
+ ._wrapper_mpsmni_27{
548
548
  --_rs-theme-dark:var(
549
549
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
550
550
  var(--rs-theme-dark, 0)
@@ -554,7 +554,7 @@
554
554
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
555
555
  }
556
556
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
557
- ._wrapper_8amqmr_27{
557
+ ._wrapper_mpsmni_27{
558
558
  --_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)));
559
559
  --_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)));
560
560
  --_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)));
@@ -563,7 +563,7 @@
563
563
  }
564
564
  }
565
565
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
566
- ._wrapper_8amqmr_27{
566
+ ._wrapper_mpsmni_27{
567
567
  --_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);
568
568
  --_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));
569
569
  --_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));
@@ -571,7 +571,7 @@
571
571
  --_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));
572
572
  }
573
573
  }
574
- ._wrapper_8amqmr_27 {
574
+ ._wrapper_mpsmni_27 {
575
575
  letter-spacing:var(
576
576
  --rs-text-base-letter-spacing,
577
577
  var(--_rs-typography-letter-spacing)
@@ -600,10 +600,10 @@
600
600
 
601
601
  background-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.1);
602
602
  }
603
- ._wrapper_8amqmr_27 > *{
603
+ ._wrapper_mpsmni_27 > *{
604
604
  vertical-align:top;
605
605
  }
606
- ._wrapper_8amqmr_27 ._icon_8amqmr_49{
606
+ ._wrapper_mpsmni_27 ._icon_mpsmni_49{
607
607
  flex:1 0 auto;
608
608
  align-self:center;
609
609
 
@@ -614,14 +614,14 @@
614
614
  vertical-align:top;
615
615
  fill:currentColor;
616
616
  }
617
- ._disabled_8amqmr_62{
617
+ ._disabled_mpsmni_62{
618
618
  pointer-events:none;
619
619
  color:var(
620
620
  --rs-color-pale,
621
621
  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)
622
622
  );
623
623
  }
624
- ._main_8amqmr_67{
624
+ ._main_mpsmni_67{
625
625
  display:inline-flex;
626
626
  flex:1 1 auto;
627
627
  justify-content:center;
@@ -635,10 +635,10 @@
635
635
 
636
636
  background:transparent;
637
637
  }
638
- ._wrap_8amqmr_27 ._main_8amqmr_67{
638
+ ._wrap_mpsmni_27 ._main_mpsmni_67{
639
639
  white-space:normal;
640
640
  }
641
- ._close_8amqmr_86{
641
+ ._close_mpsmni_86{
642
642
  top:0;
643
643
  right:0;
644
644
  bottom:0;
@@ -666,82 +666,82 @@
666
666
  -webkit-font-smoothing:inherit;
667
667
  -moz-osx-font-smoothing:inherit;
668
668
  }
669
- ._close_8amqmr_86::-moz-focus-inner{
669
+ ._close_mpsmni_86::-moz-focus-inner{
670
670
  padding:0;
671
671
 
672
672
  border:0;
673
673
  }
674
- ._close_8amqmr_86:active,
675
- ._close_8amqmr_86:hover,
676
- ._close_8amqmr_86:focus{
674
+ ._close_mpsmni_86:active,
675
+ ._close_mpsmni_86:hover,
676
+ ._close_mpsmni_86:focus{
677
677
  outline:none;
678
678
 
679
679
  text-decoration:none;
680
680
  }
681
- ._close_8amqmr_86:hover{
681
+ ._close_mpsmni_86:hover{
682
682
  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));
683
683
  background-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.1);
684
684
  }
685
- ._close_8amqmr_86:active{
685
+ ._close_mpsmni_86:active{
686
686
  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));
687
687
  background-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);
688
688
  }
689
- ._close_8amqmr_86:focus[data-focus-method='key']{
689
+ ._close_mpsmni_86:focus[data-focus-method='key']{
690
690
  box-shadow:inset 0 0 0 4px var(--_rs-color-primary-dim);
691
691
  }
692
- ._disabled_8amqmr_62 ._close_8amqmr_86{
692
+ ._disabled_mpsmni_62 ._close_mpsmni_86{
693
693
  pointer-events:none;
694
694
  }
695
695
 
696
- ._wrapper_ctim26_3{
696
+ ._wrapper_j4620j_3{
697
697
  position:relative;
698
698
  }
699
- ._offset16_ctim26_7{
699
+ ._offset16_j4620j_7{
700
700
  --_rs-tag-sticky-side-offset:16px;
701
701
  }
702
- ._offset24_ctim26_10{
702
+ ._offset24_j4620j_10{
703
703
  --_rs-tag-sticky-side-offset:24px;
704
704
  }
705
- ._offset32_ctim26_13{
705
+ ._offset32_j4620j_13{
706
706
  --_rs-tag-sticky-side-offset:32px;
707
707
  }
708
- ._alignTop_ctim26_17{
708
+ ._alignTop_j4620j_17{
709
709
  --_rs-tag-sticky-border-radius:var(--_rs-tag-border-radius) var(--_rs-tag-border-radius) 0 0;
710
710
  --_rs-tag-sticky-translate-y:-100%;
711
711
  }
712
- ._alignMiddle_ctim26_20{
712
+ ._alignMiddle_j4620j_20{
713
713
  --_rs-tag-sticky-border-radius:var(--_rs-tag-border-radius);
714
714
  --_rs-tag-sticky-translate-y:-50%;
715
715
  }
716
- ._topStart_ctim26_24{
716
+ ._topStart_j4620j_24{
717
717
  --_rs-tag-sticky-top:0;
718
718
  --_rs-tag-sticky-right:initial;
719
719
  --_rs-tag-sticky-left:var(--_rs-tag-sticky-side-offset);
720
720
  --_rs-tag-sticky-transform:translate(0, var(--_rs-tag-sticky-translate-y));
721
721
  --_rs-tag-sticky-transform-origin:initial;
722
722
  }
723
- ._topEnd_ctim26_27{
723
+ ._topEnd_j4620j_27{
724
724
  --_rs-tag-sticky-top:0;
725
725
  --_rs-tag-sticky-right:var(--_rs-tag-sticky-side-offset);
726
726
  --_rs-tag-sticky-left:initial;
727
727
  --_rs-tag-sticky-transform:translate(0, var(--_rs-tag-sticky-translate-y));
728
728
  --_rs-tag-sticky-transform-origin:initial;
729
729
  }
730
- ._leftStart_ctim26_30{
730
+ ._leftStart_j4620j_30{
731
731
  --_rs-tag-sticky-top:var(--_rs-tag-sticky-side-offset);
732
732
  --_rs-tag-sticky-right:100%;
733
733
  --_rs-tag-sticky-left:initial;
734
734
  --_rs-tag-sticky-transform:rotate(270deg) translate(0, var(--_rs-tag-sticky-translate-y));
735
735
  --_rs-tag-sticky-transform-origin:100% 0;
736
736
  }
737
- ._leftEnd_ctim26_33{
737
+ ._leftEnd_j4620j_33{
738
738
  --_rs-tag-sticky-top:calc(100% - var(--_rs-tag-sticky-side-offset));
739
739
  --_rs-tag-sticky-right:100%;
740
740
  --_rs-tag-sticky-left:initial;
741
741
  --_rs-tag-sticky-transform:rotate(270deg) translate(100%, var(--_rs-tag-sticky-translate-y));
742
742
  --_rs-tag-sticky-transform-origin:100% 0;
743
743
  }
744
- ._tag_ctim26_37{
744
+ ._tag_j4620j_37{
745
745
  position:absolute;
746
746
  top:var(--_rs-tag-sticky-top);
747
747
  right:var(--_rs-tag-sticky-right);
package/lib/parts/base-tag.p.module.css.js CHANGED
@@ -1,12 +1,12 @@
1
1
  var styles = {
2
- "alignIconLeft": "_alignIconLeft_1ns7jx6_7",
3
- "alignIconRight": "_alignIconRight_1ns7jx6_10",
4
- "uppercase": "_uppercase_1ns7jx6_14",
5
- "sizeXs": "_sizeXs_1ns7jx6_18",
6
- "sizeS": "_sizeS_1ns7jx6_21",
7
- "sizeM": "_sizeM_1ns7jx6_24",
8
- "sizeL": "_sizeL_1ns7jx6_27",
9
- "main": "_main_1ns7jx6_31",
10
- "icon": "_icon_1ns7jx6_60"
2
+ "alignIconLeft": "_alignIconLeft_qnyffr_7",
3
+ "alignIconRight": "_alignIconRight_qnyffr_10",
4
+ "uppercase": "_uppercase_qnyffr_14",
5
+ "sizeXs": "_sizeXs_qnyffr_18",
6
+ "sizeS": "_sizeS_qnyffr_21",
7
+ "sizeM": "_sizeM_qnyffr_24",
8
+ "sizeL": "_sizeL_qnyffr_27",
9
+ "main": "_main_qnyffr_31",
10
+ "icon": "_icon_qnyffr_60"
11
11
  };
12
12
  export { styles as default };
package/lib/parts/removable-tag.p.module.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_8amqmr_7",
3
- "themeDark": "_themeDark_8amqmr_10",
4
- "sizeXs": "_sizeXs_8amqmr_14",
5
- "sizeS": "_sizeS_8amqmr_17",
6
- "sizeM": "_sizeM_8amqmr_20",
7
- "sizeL": "_sizeL_8amqmr_23",
8
- "wrapper": "_wrapper_8amqmr_27",
9
- "icon": "_icon_8amqmr_49",
10
- "disabled": "_disabled_8amqmr_62",
11
- "main": "_main_8amqmr_67",
12
- "wrap": "_wrap_8amqmr_27",
13
- "close": "_close_8amqmr_86"
2
+ "themeLight": "_themeLight_mpsmni_7",
3
+ "themeDark": "_themeDark_mpsmni_10",
4
+ "sizeXs": "_sizeXs_mpsmni_14",
5
+ "sizeS": "_sizeS_mpsmni_17",
6
+ "sizeM": "_sizeM_mpsmni_20",
7
+ "sizeL": "_sizeL_mpsmni_23",
8
+ "wrapper": "_wrapper_mpsmni_27",
9
+ "icon": "_icon_mpsmni_49",
10
+ "disabled": "_disabled_mpsmni_62",
11
+ "main": "_main_mpsmni_67",
12
+ "wrap": "_wrap_mpsmni_27",
13
+ "close": "_close_mpsmni_86"
14
14
  };
15
15
  export { styles as default };
package/lib/parts/sticky-tag.p.module.css.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_ctim26_3",
3
- "offset16": "_offset16_ctim26_7",
4
- "offset24": "_offset24_ctim26_10",
5
- "offset32": "_offset32_ctim26_13",
6
- "alignTop": "_alignTop_ctim26_17",
7
- "alignMiddle": "_alignMiddle_ctim26_20",
8
- "topStart": "_topStart_ctim26_24",
9
- "topEnd": "_topEnd_ctim26_27",
10
- "leftStart": "_leftStart_ctim26_30",
11
- "leftEnd": "_leftEnd_ctim26_33",
12
- "tag": "_tag_ctim26_37"
2
+ "wrapper": "_wrapper_j4620j_3",
3
+ "offset16": "_offset16_j4620j_7",
4
+ "offset24": "_offset24_j4620j_10",
5
+ "offset32": "_offset32_j4620j_13",
6
+ "alignTop": "_alignTop_j4620j_17",
7
+ "alignMiddle": "_alignMiddle_j4620j_20",
8
+ "topStart": "_topStart_j4620j_24",
9
+ "topEnd": "_topEnd_j4620j_27",
10
+ "leftStart": "_leftStart_j4620j_30",
11
+ "leftEnd": "_leftEnd_j4620j_33",
12
+ "tag": "_tag_j4620j_37"
13
13
  };
14
14
  export { styles as default };
package/lib/parts/tag.p.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
1
  var styles = {
2
- "main": "_main_1lwkdik_1"
2
+ "main": "_main_1vzrsi9_1"
3
3
  };
4
4
  export { styles as default };
package/llm/components/tag.md ADDED
@@ -0,0 +1,632 @@
1
+ # Tag
2
+
3
+ Tags allow users to filter content, and they can also be useful for drawing attention to particular components.
4
+
5
+ ## Usage
6
+
7
+ ### Features showcase
8
+
9
+ ### Examples
10
+
11
+ ```tsx
12
+ import { Tag, presets } from '@rescui/tag';
13
+
14
+ <Tag {...presets['classic-light']}>Tag</Tag>;
15
+ ```
16
+
17
+ #### Custom appearance
18
+
19
+ ```tsx
20
+ import { Tag } from '@rescui/tag';
21
+
22
+ <Tag color="white" backgroundColor="purple">
23
+ Tag
24
+ </Tag>;
25
+ ```
26
+
27
+ #### Custom outline appearance
28
+
29
+ ```tsx
30
+ import { Tag } from '@rescui/tag';
31
+
32
+ <Tag color="black" borderColor="purple">
33
+ Tag
34
+ </Tag>;
35
+ ```
36
+
37
+ #### Preset extension
38
+
39
+ ```tsx
40
+ import { Tag, presets } from '@rescui/tag';
41
+
42
+ <Tag {...presets['classic-light']} backgroundColor="red">
43
+ Tag
44
+ </Tag>;
45
+ ```
46
+
47
+ #### Make your own presets set
48
+
49
+ ```tsx
50
+ import { Tag, presets as basePresets } from '@rescui/tag';
51
+
52
+ const presets = {
53
+ ...basePresets,
54
+ space: { color: 'white', backgroundColor: 'purple' }
55
+ };
56
+
57
+ render(<Tag {...presets.space}>Tag</Tag>);
58
+ ```
59
+
60
+ #### Change size
61
+
62
+ ```tsx
63
+ import { Tag, presets } from '@rescui/tag';
64
+
65
+ <Tag {...presets['classic-light']} size="m">
66
+ Tag
67
+ </Tag>;
68
+ ```
69
+
70
+ #### Uppercase mode
71
+
72
+ ```tsx
73
+ import { Tag, presets } from '@rescui/tag';
74
+
75
+ <Tag {...presets['classic-light']} isUppercase>
76
+ Tag
77
+ </Tag>;
78
+ ```
79
+
80
+ #### Add icon
81
+
82
+ ```tsx
83
+ import { Tag, presets } from '@rescui/tag';
84
+ import { DownloadOutlineIcon } from '@rescui/icons';
85
+
86
+ <div className="rs-docs-row rs-docs-row_vertical-center">
87
+ <Tag {...presets['classic-light']} className="rs-docs-col" icon={<DownloadOutlineIcon />}>
88
+ Icon on the left
89
+ </Tag>
90
+ <span className="rs-docs-col">or</span>
91
+ <Tag
92
+ {...presets['classic-light']}
93
+ className="rs-docs-col"
94
+ icon={<DownloadOutlineIcon />}
95
+ iconPosition="right"
96
+ >
97
+ Icon on the right
98
+ </Tag>
99
+ </div>;
100
+ ```
101
+
102
+ #### Add external icon
103
+
104
+ If you want to add your own icon, please make sure that the icon has `24×24px` box size
105
+
106
+ Also, icon should have one `className` props.
107
+
108
+ ```tsx
109
+ import { Tag, presets } from '@rescui/tag';
110
+
111
+ const SettingsIcon = ({ className }) => (
112
+ <svg className={className} width="24" height="24" viewBox="0 0 24 24">
113
+ <path d="M12 3L4 7.5v9l8 4.5 8-4.5v-9zm.01 13.005a4 4 0 1 1 3.998-4 4 4 0 0 1-3.999 4z" />
114
+ </svg>
115
+ );
116
+
117
+ const Demo = () => (
118
+ <div className="rs-docs-row rs-docs-row_vertical-center">
119
+ <Tag
120
+ {...presets['classic-light']}
121
+ className="rs-docs-col"
122
+ icon={<SettingsIcon />}
123
+ >
124
+ External icon on the left
125
+ </Tag>
126
+ <span className="rs-docs-col">or</span>
127
+ <Tag
128
+ {...presets['classic-light']}
129
+ className="rs-docs-col"
130
+ icon={<SettingsIcon />}
131
+ iconPosition="right"
132
+ >
133
+ External icon on the right
134
+ </Tag>
135
+ </div>
136
+ );
137
+
138
+ render(<Demo />);
139
+ ```
140
+
141
+ ## StickyTag
142
+
143
+ ### Features showcase
144
+
145
+ ### Examples
146
+
147
+ ```tsx
148
+ import { StickyTag, presets } from '@rescui/tag';
149
+ import { textCn } from '@rescui/typography';
150
+ import { cardCn } from '@rescui/card';
151
+
152
+ const Demo = () => {
153
+ return (
154
+ <div style={{ width: 300, marginTop: 24 }}>
155
+ <StickyTag content="Sale" {...presets['classic-light']}>
156
+ <div className={cardCn({ theme: 'light' })}>
157
+ <h3 className={textCn('rs-h3')}>Card content</h3>
158
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
159
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
160
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
161
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
162
+ Tempora.
163
+ </p>
164
+ </div>
165
+ </StickyTag>
166
+ </div>
167
+ );
168
+ };
169
+
170
+ render(<Demo />);
171
+ ```
172
+
173
+ #### Custom appearance
174
+
175
+ ```tsx
176
+ import { StickyTag } from '@rescui/tag';
177
+ import { textCn } from '@rescui/typography';
178
+ import { cardCn } from '@rescui/card';
179
+
180
+ const Demo = () => {
181
+ return (
182
+ <div style={{ width: 300, marginTop: 24 }}>
183
+ <StickyTag content="Sale" color="white" backgroundColor="purple">
184
+ <div className={cardCn({ theme: 'light' })}>
185
+ <h3 className={textCn('rs-h3')}>Card content</h3>
186
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
187
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
188
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
189
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
190
+ Tempora.
191
+ </p>
192
+ </div>
193
+ </StickyTag>
194
+ </div>
195
+ );
196
+ };
197
+
198
+ render(<Demo />);
199
+ ```
200
+
201
+ #### Change size
202
+
203
+ ```tsx
204
+ import { StickyTag, presets } from '@rescui/tag';
205
+ import { textCn } from '@rescui/typography';
206
+ import { cardCn } from '@rescui/card';
207
+
208
+ const Demo = () => {
209
+ return (
210
+ <div style={{ width: 300, marginTop: 24 }}>
211
+ <StickyTag content="Sale" {...presets['classic-light']} size={'m'}>
212
+ <div className={cardCn({ theme: 'light' })}>
213
+ <h3 className={textCn('rs-h3')}>Card content</h3>
214
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
215
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
216
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
217
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
218
+ Tempora.
219
+ </p>
220
+ </div>
221
+ </StickyTag>
222
+ </div>
223
+ );
224
+ };
225
+
226
+ render(<Demo />);
227
+ ```
228
+
229
+ #### Change placement
230
+
231
+ ```tsx
232
+ import { StickyTag, presets } from '@rescui/tag';
233
+ import { textCn } from '@rescui/typography';
234
+ import { cardCn } from '@rescui/card';
235
+
236
+ const Demo = () => {
237
+ return (
238
+ <div style={{ width: 300, marginLeft: 24 }}>
239
+ <StickyTag
240
+ content="Sale"
241
+ {...presets['classic-light']}
242
+ placement="left-start"
243
+ >
244
+ <div className={cardCn({ theme: 'light' })}>
245
+ <h3 className={textCn('rs-h3')}>Card content</h3>
246
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
247
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
248
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
249
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
250
+ Tempora.
251
+ </p>
252
+ </div>
253
+ </StickyTag>
254
+ </div>
255
+ );
256
+ };
257
+
258
+ render(<Demo />);
259
+ ```
260
+
261
+ #### Change align
262
+
263
+ ```tsx
264
+ import { StickyTag, presets } from '@rescui/tag';
265
+ import { textCn } from '@rescui/typography';
266
+ import { cardCn } from '@rescui/card';
267
+
268
+ const Demo = () => {
269
+ return (
270
+ <div style={{ width: 300, marginTop: 24 }}>
271
+ <StickyTag content="Sale" {...presets['classic-light']} align="middle">
272
+ <div className={cardCn({ theme: 'light' })}>
273
+ <h3 className={textCn('rs-h3')}>Card content</h3>
274
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
275
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
276
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
277
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
278
+ Tempora.
279
+ </p>
280
+ </div>
281
+ </StickyTag>
282
+ </div>
283
+ );
284
+ };
285
+
286
+ render(<Demo />);
287
+ ```
288
+
289
+ #### Change offset
290
+
291
+ ```tsx
292
+ import { StickyTag, presets } from '@rescui/tag';
293
+ import { textCn } from '@rescui/typography';
294
+ import { cardCn } from '@rescui/card';
295
+
296
+ const Demo = () => {
297
+ return (
298
+ <div style={{ width: 300, marginTop: 24 }}>
299
+ <StickyTag content="Sale" {...presets['classic-light']} offset={16}>
300
+ <div className={cardCn({ theme: 'light' })}>
301
+ <h3 className={textCn('rs-h3')}>Card content</h3>
302
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
303
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
304
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
305
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
306
+ Tempora.
307
+ </p>
308
+ </div>
309
+ </StickyTag>
310
+ </div>
311
+ );
312
+ };
313
+
314
+ render(<Demo />);
315
+ ```
316
+
317
+ #### Uppercase mode
318
+
319
+ ```tsx
320
+ import { StickyTag, presets } from '@rescui/tag';
321
+ import { textCn } from '@rescui/typography';
322
+ import { cardCn } from '@rescui/card';
323
+
324
+ const Demo = () => {
325
+ return (
326
+ <div style={{ width: 300, marginTop: 24 }}>
327
+ <StickyTag content="Sale" {...presets['classic-light']} isUppercase>
328
+ <div className={cardCn({ theme: 'light' })}>
329
+ <h3 className={textCn('rs-h3')}>Card content</h3>
330
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
331
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
332
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
333
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
334
+ Tempora.
335
+ </p>
336
+ </div>
337
+ </StickyTag>
338
+ </div>
339
+ );
340
+ };
341
+
342
+ render(<Demo />);
343
+ ```
344
+
345
+ #### Add icon
346
+
347
+ ```tsx
348
+ import { StickyTag, presets } from '@rescui/tag';
349
+ import { textCn } from '@rescui/typography';
350
+ import { cardCn } from '@rescui/card';
351
+ import { PresentIcon } from '@rescui/icons';
352
+
353
+ const Demo = () => {
354
+ return (
355
+ <div style={{ width: 300, marginTop: 24 }}>
356
+ <StickyTag
357
+ content="Sale"
358
+ {...presets['classic-light']}
359
+ icon={<PresentIcon />}
360
+ >
361
+ <div className={cardCn({ theme: 'light' })}>
362
+ <h3 className={textCn('rs-h3')}>Card content</h3>
363
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
364
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
365
+ amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
366
+ numquam odio perspiciatis provident quas quo, ratione saepe sunt.
367
+ Tempora.
368
+ </p>
369
+ </div>
370
+ </StickyTag>
371
+ </div>
372
+ );
373
+ };
374
+
375
+ render(<Demo />);
376
+ ```
377
+
378
+ ## RemovableTag
379
+
380
+ ### Features showcase
381
+
382
+ ### Examples
383
+
384
+ `onRemoveClick` is a required prop.
385
+
386
+ ```tsx
387
+ import { RemovableTag } from '@rescui/tag';
388
+
389
+ <RemovableTag onRemoveClick={() => console.log('removed')}>
390
+ Test Tag
391
+ </RemovableTag>;
392
+ ```
393
+
394
+ #### Change size
395
+
396
+ ```tsx
397
+ import { RemovableTag } from '@rescui/tag';
398
+
399
+ <RemovableTag size="m" onRemoveClick={() => console.log('removed')}>
400
+ Small Tag
401
+ </RemovableTag>;
402
+ ```
403
+
404
+ #### Disabled
405
+
406
+ ```tsx
407
+ import { RemovableTag } from '@rescui/tag';
408
+
409
+ <RemovableTag disabled onRemoveClick={() => console.log('removed')}>
410
+ Disabled Tag
411
+ </RemovableTag>;
412
+ ```
413
+
414
+ #### With icon
415
+
416
+ ```tsx
417
+ import { RemovableTag } from '@rescui/tag';
418
+ import { PersonOutlineIcon } from '@rescui/icons';
419
+
420
+ <RemovableTag icon={<PersonOutlineIcon />} onRemoveClick={() => console.log('removed')}>
421
+ Tag
422
+ </RemovableTag>;
423
+ ```
424
+
425
+ ## CSS Mixins API
426
+
427
+ #### `Tag` mixins
428
+
429
+ | Mixin name | Details |
430
+ | --- | --- |
431
+ | `rs-tag-size-xs` | prop: `size`<br><br>value: `"xs"` |
432
+ | `rs-tag-size-s` | prop: `size`<br><br>value: `"s"` |
433
+ | `rs-tag-size-m` | prop: `size`<br><br>value: `"m"` |
434
+ | `rs-tag-size-l` | prop: `size`<br><br>value: `"l"` |
435
+ | `rs-tag-align-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
436
+ | `rs-tag-align-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
437
+ | `rs-tag-uppercase-true` | prop: `isUppercase`<br><br>value: `true` |
438
+ | `rs-tag-uppercase-false` | prop: `isUppercase`<br><br>value: `false` |
439
+
440
+ ##### Demo
441
+
442
+ Use the controls to see the effect at different viewport widths.
443
+
444
+ ```tsx
445
+ import { Tag, presets } from '@rescui/tag';
446
+ import { PersonIcon } from '@rescui/icons';
447
+
448
+ const MyTag = () => {
449
+ return (
450
+ <Tag
451
+ {...presets['classic-light']}
452
+ size={'m'}
453
+ icon={<PersonIcon />}
454
+ className="my-tag"
455
+ >
456
+ Tag
457
+ </Tag>
458
+ );
459
+ };
460
+
461
+ render(<MyTag />);
462
+ ```
463
+
464
+ ```postcss
465
+ @import '@rescui/tag/lib/public-api.p.css';
466
+
467
+ .my-tag {
468
+ @media (max-width: 640px) {
469
+ @mixin rs-tag-size-l;
470
+ @mixin rs-tag-align-icon-right;
471
+ @mixin rs-tag-uppercase-true;
472
+ }
473
+ @media (max-width: 500px) {
474
+ @mixin rs-tag-size-xs;
475
+ @mixin rs-tag-align-icon-left;
476
+ @mixin rs-tag-uppercase-false;
477
+ }
478
+ }
479
+ ```
480
+
481
+ #### `StickyTag` mixins
482
+
483
+ | Mixin name | Details |
484
+ | --- | --- |
485
+ | `rs-sticky-tag-size-xs` | prop: `size`<br><br>value: `"xs"` |
486
+ | `rs-sticky-tag-size-s` | prop: `size`<br><br>value: `"s"` |
487
+ | `rs-sticky-tag-size-m` | prop: `size`<br><br>value: `"m"` |
488
+ | `rs-sticky-tag-size-l` | prop: `size`<br><br>value: `"l"` |
489
+ | `rs-sticky-tag-align-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
490
+ | `rs-sticky-tag-align-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
491
+ | `rs-sticky-tag-uppercase-true` | prop: `isUppercase`<br><br>value: `true` |
492
+ | `rs-sticky-tag-uppercase-false` | prop: `isUppercase`<br><br>value: `false` |
493
+ | `rs-sticky-tag-offset-16` | prop: `offset`<br><br>value: `16` |
494
+ | `rs-sticky-tag-offset-24` | prop: `offset`<br><br>value: `24` |
495
+ | `rs-sticky-tag-offset-32` | prop: `offset`<br><br>value: `32` |
496
+ | `rs-sticky-tag-align-top` | prop: `align`<br><br>value: `"top"` |
497
+ | `rs-sticky-tag-align-middle` | prop: `align`<br><br>value: `"middle"` |
498
+ | `rs-sticky-tag-placement-top-start` | prop: `placement`<br><br>value: `"top-start"` |
499
+ | `rs-sticky-tag-placement-top-end` | prop: `placement`<br><br>value: `"top-end"` |
500
+ | `rs-sticky-tag-placement-left-start` | prop: `placement`<br><br>value: `"left-start"` |
501
+ | `rs-sticky-tag-placement-left-end` | prop: `placement`<br><br>value: `"left-end"` |
502
+
503
+ ##### Demo
504
+
505
+ Use the controls to see the effect at different viewport widths.
506
+
507
+ ```tsx
508
+ import { StickyTag, presets } from '@rescui/tag';
509
+ import { PersonIcon } from '@rescui/icons';
510
+ import { textCn } from '@rescui/typography';
511
+ import { cardCn } from '@rescui/card';
512
+
513
+ const MyStickyTag = () => {
514
+ return (
515
+ <StickyTag
516
+ content="Sale"
517
+ {...presets['classic-light']}
518
+ icon={<PersonIcon />}
519
+ className="my-sticky-tag"
520
+ >
521
+ <div className={cardCn({ theme: 'light' })}>
522
+ <h3 className={textCn('rs-h3')}>Card content</h3>
523
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
524
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet,
525
+ atque dolore enim eum fuga in itaque iure nisi, nostrum numquam odio
526
+ perspiciatis provident quas quo, ratione saepe sunt. Tempora.
527
+ </p>
528
+ </div>
529
+ </StickyTag>
530
+ );
531
+ };
532
+
533
+ render(<MyStickyTag />);
534
+ ```
535
+
536
+ ```postcss attached
537
+ @import '@rescui/tag/lib/public-api.p.css';
538
+
539
+ .my-sticky-tag {
540
+ @media (max-width: 640px) {
541
+ @mixin rs-sticky-tag-size-l;
542
+ @mixin rs-sticky-tag-align-icon-right;
543
+ @mixin rs-sticky-tag-uppercase-true;
544
+ @mixin rs-sticky-tag-offset-32;
545
+ @mixin rs-sticky-tag-align-middle;
546
+ @mixin rs-sticky-tag-placement-top-start;
547
+ }
548
+ @media (max-width: 500px) {
549
+ @mixin rs-sticky-tag-size-m;
550
+ @mixin rs-sticky-tag-align-icon-left;
551
+ @mixin rs-sticky-tag-uppercase-false;
552
+ @mixin rs-sticky-tag-offset-16;
553
+ @mixin rs-sticky-tag-align-top;
554
+ @mixin rs-sticky-tag-placement-left-end;
555
+ }
556
+ }
557
+ ```
558
+
559
+ #### `RemovableTag` mixins
560
+
561
+ | Mixin name | Details |
562
+ | --- | --- |
563
+ | `rs-removable-tag-size-xs` | prop: `size`<br><br>value: `"xs"` |
564
+ | `rs-removable-tag-size-s` | prop: `size`<br><br>value: `"s"` |
565
+ | `rs-removable-tag-size-m` | prop: `size`<br><br>value: `"m"` |
566
+ | `rs-removable-tag-size-l` | prop: `size`<br><br>value: `"l"` |
567
+
568
+ ##### Demo
569
+
570
+ Use the controls to see the effect at different viewport widths.
571
+
572
+ ```tsx
573
+ import { RemovableTag } from '@rescui/tag';
574
+
575
+ const MyRemovableTag = () => {
576
+ return (
577
+ <RemovableTag
578
+ onRemoveClick={() => console.log('removed')}
579
+ className="my-removable-tag"
580
+ >
581
+ Test Tag
582
+ </RemovableTag>
583
+ );
584
+ };
585
+
586
+ render(<MyRemovableTag />);
587
+ ```
588
+
589
+ ```postcss
590
+ @import '@rescui/tag/lib/public-api.p.css';
591
+
592
+ .my-removable-tag {
593
+ @media (max-width: 640px) {
594
+ @mixin rs-removable-tag-size-l;
595
+ }
596
+ @media (max-width: 500px) {
597
+ @mixin rs-removable-tag-size-m;
598
+ }
599
+ }
600
+ ```
601
+
602
+ ## Presets
603
+
604
+ ### Presets
605
+
606
+ Use presets for styling tags when possible.
607
+
608
+ #### Example
609
+
610
+ ```tsx
611
+ import { Tag, presets } from '@rescui/tag';
612
+
613
+ <Tag {...presets['classic-light']}>Tag</Tag>;
614
+ ```
615
+
616
+ #### For light theme
617
+
618
+ | Name | Type | Default | Description |
619
+ | --- | --- | --- | --- |
620
+ | `classic-light` | { color: "#FFFFFF"; backgroundColor: "var(--rs-color-primary-light-theme, #6B57FF)"; } | | Primary background |
621
+ | `rock-light` | { color: "#FFFFFF"; backgroundColor: "#19191C"; } | | Contrast background |
622
+ | `filled-light` | { color: "rgba(25,25,28,0.7)"; backgroundColor: "rgba(25,25,28,0.1)"; } | | Grey background |
623
+ | `outline-light` | { color: "#19191C"; borderColor: "#19191C"; } | | Transparent with border |
624
+
625
+ #### For dark theme
626
+
627
+ | Name | Type | Default | Description |
628
+ | --- | --- | --- | --- |
629
+ | `classic-dark` | { color: "#FFFFFF"; backgroundColor: "var(--rs-color-primary-dark-theme, #8473FF)"; } | | Primary background |
630
+ | `rock-dark` | { color: "#19191C"; backgroundColor: "#FFFFFF"; } | | Contrast background |
631
+ | `filled-dark` | { color: "rgba(255,255,255,0.7)"; backgroundColor: "rgba(255,255,255,0.1)"; } | | Grey background |
632
+ | `outline-dark` | { color: "#FFFFFF"; borderColor: "#FFFFFF"; } | | Transparent with border |
package/llm/index.md ADDED
@@ -0,0 +1,2 @@
1
+ - Components and Hooks
2
+ - [Tag](./components/tag.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tag",
3
- "version": "0.13.10",
3
+ "version": "0.13.12-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -9,6 +9,7 @@
9
9
  "src:main": "src/index.ts",
10
10
  "files": [
11
11
  "lib",
12
+ "llm",
12
13
  "LICENSE.txt"
13
14
  ],
14
15
  "publishConfig": {
@@ -16,23 +17,23 @@
16
17
  },
17
18
  "dependencies": {
18
19
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/colors": "^0.3.1",
20
+ "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
20
21
  "classnames": "^2.3.1"
21
22
  },
22
23
  "peerDependencies": {
23
24
  "@rescui/ui-contexts": "^0.6.0",
24
25
  "prop-types": "^15",
25
- "react": ">=16.8.0 <20"
26
+ "react": ">=17.0.0 <20"
26
27
  },
27
28
  "devDependencies": {
28
- "@rescui/icons": "^1.8.1",
29
- "@rescui/scripts": "^0.5.2",
30
- "@rescui/typography": "^0.27.1"
29
+ "@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
30
+ "@rescui/scripts": "0.5.2",
31
+ "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8"
31
32
  },
32
33
  "scripts": {
33
34
  "build": "rescui-scripts build && yarn run build-pcss-api",
34
35
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
35
36
  },
36
37
  "nx": {},
37
- "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
38
+ "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
38
39
  }