@rescui/tab-list 0.18.0 → 0.18.1

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 (8) hide show
  1. package/README.md +3 -2
  2. package/lib/_virtual/index.css.js +12 -12
  3. package/lib/index.css +79 -79
  4. package/lib/parts/separator.p.module.css.js +3 -3
  5. package/lib/parts/tab-list.p.module.css.js +25 -25
  6. package/llm/components/tab-list.md +447 -0
  7. package/llm/index.md +2 -0
  8. package/package.json +7 -6
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  # Tab-list and Chip-list
2
2
 
3
- * [Usage examples of TabList](./docs/demo.md)
4
- * [Usage examples of ChipList](./docs/chip-list/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_18p83uf_4",
3
+ "sizeXS": "_sizeXS_18p83uf_14",
4
+ "sizeS": "_sizeS_18p83uf_18",
5
+ "sizeM": "_sizeM_18p83uf_22",
6
+ "sizeL": "_sizeL_18p83uf_26",
7
+ "light": "_light_18p83uf_30",
8
+ "dark": "_dark_18p83uf_34",
9
+ "allVariants": "_allVariants_18p83uf_48",
10
+ "variant16": "_variant16_18p83uf_53",
11
+ "variant20": "_variant20_18p83uf_54",
12
+ "variant24": "_variant24_18p83uf_55",
13
+ "variant28": "_variant28_18p83uf_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_1tf5os8_4{
1
+ ._icon_18p83uf_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_18p83uf_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_18p83uf_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_18p83uf_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_18p83uf_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_1tf5os8_18{
38
+ ._sizeS_18p83uf_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_1tf5os8_22{
41
+ ._sizeM_18p83uf_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_1tf5os8_26{
44
+ ._sizeL_18p83uf_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_1tf5os8_30{
47
+ ._light_18p83uf_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_18p83uf_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,54 +60,54 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_1tf5os8_48{
63
+ ._allVariants_18p83uf_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_18p83uf_53,
68
+ ._variant20_18p83uf_54,
69
+ ._variant24_18p83uf_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_1tf5os8_58{
72
+ ._variant28_18p83uf_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_1tf5os8_55{
76
+ ._variant24_18p83uf_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_1tf5os8_58{
79
+ ._variant28_18p83uf_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_1tf5os8_54{
84
+ ._variant20_18p83uf_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_1tf5os8_55{
87
+ ._variant24_18p83uf_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_1tf5os8_53{
92
+ ._variant16_18p83uf_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_1tf5os8_54{
95
+ ._variant20_18p83uf_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._light_1k61pqb_10{
99
+ ._light_rxe2fg_10{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._dark_1k61pqb_13{
102
+ ._dark_rxe2fg_13{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._sizeM_1k61pqb_17{
105
+ ._sizeM_rxe2fg_17{
106
106
  --_rs-tab-list-tab-vertical-padding:8px;
107
107
  --_rs-tab-list-icon-size:24px;
108
108
  --_rs-tab-list-icon-offset:4px;
109
109
  }
110
- ._sizeM_1k61pqb_17 [data-rs-internal='tab-list__tab']{
110
+ ._sizeM_rxe2fg_17 [data-rs-internal='tab-list__tab']{
111
111
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
112
112
  --_rs-typography-text-transform:initial;
113
113
  --_rs-typography-font-variant-numeric:initial;
@@ -146,16 +146,16 @@
146
146
  --_rs-typography-link-border-bottom-width-from-text:1px;
147
147
  }
148
148
  @media screen and (max-width: 640px){
149
- ._sizeM_1k61pqb_17 [data-rs-internal='tab-list__tab']{
149
+ ._sizeM_rxe2fg_17 [data-rs-internal='tab-list__tab']{
150
150
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
151
151
  }
152
152
  }
153
- ._sizeL_1k61pqb_20{
153
+ ._sizeL_rxe2fg_20{
154
154
  --_rs-tab-list-tab-vertical-padding:12px;
155
155
  --_rs-tab-list-icon-size:28px;
156
156
  --_rs-tab-list-icon-offset:8px;
157
157
  }
158
- ._sizeL_1k61pqb_20 [data-rs-internal='tab-list__tab']{
158
+ ._sizeL_rxe2fg_20 [data-rs-internal='tab-list__tab']{
159
159
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
160
160
  --_rs-typography-text-transform:initial;
161
161
  --_rs-typography-font-variant-numeric:initial;
@@ -194,28 +194,28 @@
194
194
  --_rs-typography-link-border-bottom-width-from-text:1px;
195
195
  }
196
196
  @media screen and (max-width: 640px){
197
- ._sizeL_1k61pqb_20 [data-rs-internal='tab-list__tab']{
197
+ ._sizeL_rxe2fg_20 [data-rs-internal='tab-list__tab']{
198
198
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
199
199
  }
200
200
  }
201
- ._classic_1k61pqb_24{
201
+ ._classic_rxe2fg_24{
202
202
  --_rs-tab-list-indicator-background:var(--_rs-color-primary);
203
203
  }
204
- ._rock_1k61pqb_27{
204
+ ._rock_rxe2fg_27{
205
205
  --_rs-tab-list-indicator-background: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));
206
206
  }
207
- ._sparse_1k61pqb_31{
207
+ ._sparse_rxe2fg_31{
208
208
  --_rs-tab-list-tab-margin-left-or-initial:32px;
209
209
  }
210
210
  @media screen and (max-width: 640px){
211
- ._sparse_1k61pqb_31{
211
+ ._sparse_rxe2fg_31{
212
212
  --_rs-tab-list-tab-margin-left-or-initial:24px;
213
213
  }
214
214
  }
215
- ._short_1k61pqb_35{
215
+ ._short_rxe2fg_35{
216
216
  --_rs-tab-list-tab-box-shadow:inset 0 -1px 0 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), calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1));
217
217
  }
218
- ._wrapper_1k61pqb_39{
218
+ ._wrapper_rxe2fg_39{
219
219
  --_rs-theme-dark:var(
220
220
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
221
221
  var(--rs-theme-dark, 0)
@@ -225,7 +225,7 @@
225
225
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
226
226
  }
227
227
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
228
- ._wrapper_1k61pqb_39{
228
+ ._wrapper_rxe2fg_39{
229
229
  --_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)));
230
230
  --_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)));
231
231
  --_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)));
@@ -234,7 +234,7 @@
234
234
  }
235
235
  }
236
236
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
237
- ._wrapper_1k61pqb_39{
237
+ ._wrapper_rxe2fg_39{
238
238
  --_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);
239
239
  --_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));
240
240
  --_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));
@@ -242,15 +242,15 @@
242
242
  --_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));
243
243
  }
244
244
  }
245
- ._wrapper_1k61pqb_39 {
245
+ ._wrapper_rxe2fg_39 {
246
246
  --_rs-tab-list-tab-base-margin-left:24px;
247
247
  }
248
248
  @media screen and (max-width: 640px){
249
- ._wrapper_1k61pqb_39{
249
+ ._wrapper_rxe2fg_39{
250
250
  --_rs-tab-list-tab-base-margin-left:16px;
251
251
  }
252
252
  }
253
- ._wrapper_1k61pqb_39 {
253
+ ._wrapper_rxe2fg_39 {
254
254
  --_rs-tab-list-tab-margin-left:var(
255
255
  --_rs-tab-list-tab-margin-left-or-initial,
256
256
  var(--_rs-tab-list-tab-base-margin-left)
@@ -260,14 +260,14 @@
260
260
 
261
261
  display:flex;
262
262
  }
263
- ._scrollable_1k61pqb_49{
263
+ ._scrollable_rxe2fg_49{
264
264
  display:flex;
265
265
  overflow-x:scroll;
266
266
 
267
267
  margin:-4px;
268
268
  padding:4px;
269
269
  }
270
- ._scrollable_1k61pqb_49::after{
270
+ ._scrollable_rxe2fg_49::after{
271
271
  display:block;
272
272
 
273
273
  height:100%;
@@ -276,15 +276,15 @@
276
276
 
277
277
  content:'';
278
278
  }
279
- ._scrollable_1k61pqb_49 {
279
+ ._scrollable_rxe2fg_49 {
280
280
 
281
281
  -ms-overflow-style:none;
282
282
  scrollbar-width:none;
283
283
  }
284
- ._scrollable_1k61pqb_49::-webkit-scrollbar{
284
+ ._scrollable_rxe2fg_49::-webkit-scrollbar{
285
285
  display:none;
286
286
  }
287
- ._arrow_1k61pqb_78{
287
+ ._arrow_rxe2fg_78{
288
288
  position:absolute;
289
289
  z-index:2;
290
290
  top:50%;
@@ -304,20 +304,20 @@
304
304
  transition:opacity 0.15s var(--rs-transition-function, ease-out);
305
305
  transform:translateY(-50%);
306
306
  }
307
- ._arrow_1k61pqb_78._shown_1k61pqb_98{
307
+ ._arrow_rxe2fg_78._shown_rxe2fg_98{
308
308
  opacity:1;
309
309
 
310
310
  pointer-events:auto;
311
311
 
312
312
  transition:opacity 0.15s var(--rs-transition-function, ease-in);
313
313
  }
314
- ._arrow_1k61pqb_78._arrowLeft_1k61pqb_106{
314
+ ._arrow_rxe2fg_78._arrowLeft_rxe2fg_106{
315
315
  left:-5px;
316
316
  }
317
- ._arrow_1k61pqb_78._arrowRight_1k61pqb_111{
317
+ ._arrow_rxe2fg_78._arrowRight_rxe2fg_111{
318
318
  right:-5px;
319
319
  }
320
- ._withLeftArrow_1k61pqb_117{
320
+ ._withLeftArrow_rxe2fg_117{
321
321
  -webkit-mask-image:linear-gradient(
322
322
  to right,
323
323
  rgba(0, 0, 0, 0) 0%,
@@ -331,7 +331,7 @@
331
331
  black 56px
332
332
  );
333
333
  }
334
- ._withRightArrow_1k61pqb_126{
334
+ ._withRightArrow_rxe2fg_126{
335
335
  -webkit-mask-image:linear-gradient(
336
336
  to left,
337
337
  rgba(0, 0, 0, 0) 0%,
@@ -345,7 +345,7 @@
345
345
  black 56px
346
346
  );
347
347
  }
348
- ._withLeftArrow_1k61pqb_117._withRightArrow_1k61pqb_126{
348
+ ._withLeftArrow_rxe2fg_117._withRightArrow_rxe2fg_126{
349
349
  -webkit-mask-image:linear-gradient(
350
350
  to right,
351
351
  rgba(0, 0, 0, 0) 0%,
@@ -365,15 +365,15 @@
365
365
  rgba(0, 0, 0, 0) 100%
366
366
  );
367
367
  }
368
- ._arrowButton_1k61pqb_147{
368
+ ._arrowButton_rxe2fg_147{
369
369
  cursor:pointer;
370
370
  }
371
- ._tabsContainer_1k61pqb_151{
371
+ ._tabsContainer_rxe2fg_151{
372
372
  position:relative;
373
373
 
374
374
  display:flex;
375
375
  }
376
- ._indicator_1k61pqb_157{
376
+ ._indicator_rxe2fg_157{
377
377
  position:absolute;
378
378
  z-index:3;
379
379
  bottom:0;
@@ -386,17 +386,17 @@
386
386
  transition:left 300ms var(--rs-transition-function, cubic-bezier(0.4, 0, 0.2, 1)) 0ms, width 300ms var(--rs-transition-function, cubic-bezier(0.4, 0, 0.2, 1)) 0ms;
387
387
  will-change:left, width;
388
388
  }
389
- ._isIndicatorHidden_1k61pqb_172 ._indicator_1k61pqb_157,
390
- [data-calculating-scrollable='true'] ._indicator_1k61pqb_157{
389
+ ._isIndicatorHidden_rxe2fg_172 ._indicator_rxe2fg_157,
390
+ [data-calculating-scrollable='true'] ._indicator_rxe2fg_157{
391
391
  display:none;
392
392
  }
393
- ._iconLeft_1k61pqb_178{
393
+ ._iconLeft_rxe2fg_178{
394
394
  --_rs-tab-list-tab-flex-direction:row;
395
395
  }
396
- ._iconRight_1k61pqb_181{
396
+ ._iconRight_rxe2fg_181{
397
397
  --_rs-tab-list-tab-flex-direction:row-reverse;
398
398
  }
399
- ._tab_1k61pqb_151{
399
+ ._tab_rxe2fg_151{
400
400
  --_rs-theme-dark:var(
401
401
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
402
402
  var(--rs-theme-dark, 0)
@@ -406,7 +406,7 @@
406
406
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
407
407
  }
408
408
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
409
- ._tab_1k61pqb_151{
409
+ ._tab_rxe2fg_151{
410
410
  --_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)));
411
411
  --_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)));
412
412
  --_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)));
@@ -415,7 +415,7 @@
415
415
  }
416
416
  }
417
417
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
418
- ._tab_1k61pqb_151{
418
+ ._tab_rxe2fg_151{
419
419
  --_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);
420
420
  --_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));
421
421
  --_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));
@@ -423,7 +423,7 @@
423
423
  --_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));
424
424
  }
425
425
  }
426
- ._tab_1k61pqb_151 {
426
+ ._tab_rxe2fg_151 {
427
427
  letter-spacing:var(
428
428
  --rs-text-base-letter-spacing,
429
429
  var(--_rs-typography-letter-spacing)
@@ -467,19 +467,19 @@
467
467
  -moz-osx-font-smoothing:inherit;
468
468
  -webkit-appearance:none;
469
469
  }
470
- ._tab_1k61pqb_151::-moz-focus-inner{
470
+ ._tab_rxe2fg_151::-moz-focus-inner{
471
471
  padding:0;
472
472
 
473
473
  border:none;
474
474
  }
475
- ._tab_1k61pqb_151:hover,
476
- ._tab_1k61pqb_151:active,
477
- ._tab_1k61pqb_151:focus{
475
+ ._tab_rxe2fg_151:hover,
476
+ ._tab_rxe2fg_151:active,
477
+ ._tab_rxe2fg_151:focus{
478
478
  outline:none;
479
479
 
480
480
  text-decoration:none;
481
481
  }
482
- ._tab_1k61pqb_151:after{
482
+ ._tab_rxe2fg_151:after{
483
483
  position:absolute;
484
484
  right:0;
485
485
  bottom:0;
@@ -492,18 +492,18 @@
492
492
 
493
493
  background-color:transparent;
494
494
  }
495
- ._tab_1k61pqb_151:focus[data-focus-method='key']:after{
495
+ ._tab_rxe2fg_151:focus[data-focus-method='key']:after{
496
496
  opacity:0;
497
497
  }
498
- ._tab_1k61pqb_151:hover{
498
+ ._tab_rxe2fg_151:hover{
499
499
  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));
500
500
  }
501
- ._tab_1k61pqb_151:hover:after{
501
+ ._tab_rxe2fg_151:hover:after{
502
502
  height:1px;
503
503
 
504
504
  background-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));
505
505
  }
506
- ._tab_1k61pqb_151._selected_1k61pqb_272{
506
+ ._tab_rxe2fg_151._selected_rxe2fg_272{
507
507
  z-index:1;
508
508
 
509
509
  cursor:default;
@@ -512,20 +512,20 @@
512
512
 
513
513
  transition:color 200ms var(--rs-transition-function, cubic-bezier(0.4, 0, 0.2, 1)) 0ms;
514
514
  }
515
- ._tab_1k61pqb_151._selected_1k61pqb_272:after{
515
+ ._tab_rxe2fg_151._selected_rxe2fg_272:after{
516
516
  height:2px;
517
517
 
518
518
  background-color:var(--_rs-tab-list-indicator-background);
519
519
 
520
520
  transition:background-color 0ms var(--rs-transition-function, ease) 300ms, height 0ms var(--rs-transition-function, ease) 300ms;
521
521
  }
522
- ._tab_1k61pqb_151:focus[data-focus-method='key']{
522
+ ._tab_rxe2fg_151:focus[data-focus-method='key']{
523
523
  box-shadow:inset var(--_rs-color-primary-dim) 0 -4px 0 0, inset var(--_rs-color-primary-dim) 0 4px 0 0, var(--_rs-color-primary-dim) -4px 0 0 0, var(--_rs-color-primary-dim) 4px 0 0 0;
524
524
  }
525
- ._tab_1k61pqb_151:first-child{
525
+ ._tab_rxe2fg_151:first-child{
526
526
  margin-left:0;
527
527
  }
528
- ._tab_1k61pqb_151 ._icon_1k61pqb_178{
528
+ ._tab_rxe2fg_151 ._icon_rxe2fg_178{
529
529
  flex:0 0;
530
530
  flex-basis:auto;
531
531
 
@@ -533,13 +533,13 @@
533
533
  height:var(--_rs-tab-list-icon-size);
534
534
  }
535
535
 
536
- ._light_1xn52tc_4{
536
+ ._light_141x3jj_4{
537
537
  --rs-theme-dark:0;
538
538
  }
539
- ._dark_1xn52tc_7{
539
+ ._dark_141x3jj_7{
540
540
  --rs-theme-dark:1;
541
541
  }
542
- ._separator_1xn52tc_11{
542
+ ._separator_141x3jj_11{
543
543
  --_rs-theme-dark:var(
544
544
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
545
545
  var(--rs-theme-dark, 0)
@@ -553,7 +553,7 @@
553
553
 
554
554
  width:100%;
555
555
  }
556
- ._separator_1xn52tc_11:after{
556
+ ._separator_141x3jj_11:after{
557
557
  position:absolute;
558
558
  right:0;
559
559
  bottom:0;
package/lib/parts/separator.p.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  var styles = {
2
- "light": "_light_1xn52tc_4",
3
- "dark": "_dark_1xn52tc_7",
4
- "separator": "_separator_1xn52tc_11"
2
+ "light": "_light_141x3jj_4",
3
+ "dark": "_dark_141x3jj_7",
4
+ "separator": "_separator_141x3jj_11"
5
5
  };
6
6
  export { styles as default };
package/lib/parts/tab-list.p.module.css.js CHANGED
@@ -1,28 +1,28 @@
1
1
  var styles = {
2
- "light": "_light_1k61pqb_10",
3
- "dark": "_dark_1k61pqb_13",
4
- "sizeM": "_sizeM_1k61pqb_17",
5
- "sizeL": "_sizeL_1k61pqb_20",
6
- "classic": "_classic_1k61pqb_24",
7
- "rock": "_rock_1k61pqb_27",
8
- "sparse": "_sparse_1k61pqb_31",
9
- "short": "_short_1k61pqb_35",
10
- "wrapper": "_wrapper_1k61pqb_39",
11
- "scrollable": "_scrollable_1k61pqb_49",
12
- "arrow": "_arrow_1k61pqb_78",
13
- "shown": "_shown_1k61pqb_98",
14
- "arrowLeft": "_arrowLeft_1k61pqb_106",
15
- "arrowRight": "_arrowRight_1k61pqb_111",
16
- "withLeftArrow": "_withLeftArrow_1k61pqb_117",
17
- "withRightArrow": "_withRightArrow_1k61pqb_126",
18
- "arrowButton": "_arrowButton_1k61pqb_147",
19
- "tabsContainer": "_tabsContainer_1k61pqb_151",
20
- "indicator": "_indicator_1k61pqb_157",
21
- "isIndicatorHidden": "_isIndicatorHidden_1k61pqb_172",
22
- "iconLeft": "_iconLeft_1k61pqb_178",
23
- "iconRight": "_iconRight_1k61pqb_181",
24
- "tab": "_tab_1k61pqb_151",
25
- "selected": "_selected_1k61pqb_272",
26
- "icon": "_icon_1k61pqb_178"
2
+ "light": "_light_rxe2fg_10",
3
+ "dark": "_dark_rxe2fg_13",
4
+ "sizeM": "_sizeM_rxe2fg_17",
5
+ "sizeL": "_sizeL_rxe2fg_20",
6
+ "classic": "_classic_rxe2fg_24",
7
+ "rock": "_rock_rxe2fg_27",
8
+ "sparse": "_sparse_rxe2fg_31",
9
+ "short": "_short_rxe2fg_35",
10
+ "wrapper": "_wrapper_rxe2fg_39",
11
+ "scrollable": "_scrollable_rxe2fg_49",
12
+ "arrow": "_arrow_rxe2fg_78",
13
+ "shown": "_shown_rxe2fg_98",
14
+ "arrowLeft": "_arrowLeft_rxe2fg_106",
15
+ "arrowRight": "_arrowRight_rxe2fg_111",
16
+ "withLeftArrow": "_withLeftArrow_rxe2fg_117",
17
+ "withRightArrow": "_withRightArrow_rxe2fg_126",
18
+ "arrowButton": "_arrowButton_rxe2fg_147",
19
+ "tabsContainer": "_tabsContainer_rxe2fg_151",
20
+ "indicator": "_indicator_rxe2fg_157",
21
+ "isIndicatorHidden": "_isIndicatorHidden_rxe2fg_172",
22
+ "iconLeft": "_iconLeft_rxe2fg_178",
23
+ "iconRight": "_iconRight_rxe2fg_181",
24
+ "tab": "_tab_rxe2fg_151",
25
+ "selected": "_selected_rxe2fg_272",
26
+ "icon": "_icon_rxe2fg_178"
27
27
  };
28
28
  export { styles as default };
package/llm/components/tab-list.md ADDED
@@ -0,0 +1,447 @@
1
+ # TabList
2
+
3
+ TabList is a component for tab-like navigation panels with an animated \`activity indicator\`. Built with adaptivity in mind, it can be used to create tabs that are similar to [react-tabs](https://github.com/reactjs/react-tabs), and it can also handle more specialized cases, such as ones where the tab panel is used more like a horizontal switcher component.
4
+
5
+ ## Usage
6
+
7
+ ### Features showcase
8
+
9
+ `TabList` component works only as a controlled component. It requires `value` and `onChange` props to function properly.
10
+
11
+ Basic view modes of `TabList` component:
12
+
13
+ #### Using TabSeparator for tabs inside and outside container components
14
+
15
+ In `default` mode `TabList` doesn't render the line below the tabs. The package has a `TabSeparator` component, making it easier to create UIs where the whole screen width is underlined. You can achieve this by placing `TabSeparator` component outside the container `div`s.
16
+
17
+ ```tsx
18
+ import { useState } from 'react';
19
+ import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
20
+
21
+ const ContentSwitcher = ({ index, children }) => {
22
+ return children[index];
23
+ };
24
+
25
+ const MyTabs = () => {
26
+ const [activeIndex, setActiveIndex] = useState(0);
27
+ return (
28
+ <div className="rs-docs-offset-top-24">
29
+ <style>
30
+ {`.my-container {
31
+ max-width: 400px;
32
+ margin: 0 auto;
33
+ }`}
34
+ </style>
35
+ <div className="my-container">
36
+ <TabList value={activeIndex} onChange={v => setActiveIndex(v)}>
37
+ <Tab>First</Tab>
38
+ <Tab>Second</Tab>
39
+ <Tab>Third</Tab>
40
+ </TabList>
41
+ </div>
42
+ <TabSeparator />
43
+ <div className="my-container">
44
+ <ContentSwitcher index={activeIndex}>
45
+ <div>First</div>
46
+ <div>Second</div>
47
+ <div>Third</div>
48
+ </ContentSwitcher>
49
+ </div>
50
+ </div>
51
+ );
52
+ };
53
+
54
+ render(<MyTabs />);
55
+ ```
56
+
57
+ #### Content Switcher made of TabList with default values
58
+
59
+ `TabList` enumerates `Tab` children components, so by default it has different keys for `onChange` prop function. It's possible to use `TabList` with regular React `useState` hook like this:
60
+
61
+ ```tsx
62
+ import { useState } from 'react';
63
+ import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
64
+ import { Switcher } from '@rescui/switcher';
65
+
66
+ const ContentSwitcher = ({ index, children }) => {
67
+ return children[index];
68
+ };
69
+ const MyTabs = () => {
70
+ const [activeIndex, setActiveIndex] = useState(0);
71
+ return (
72
+ <div>
73
+ <Switcher
74
+ size="xs"
75
+ value={activeIndex}
76
+ options={[
77
+ { label: 'First', value: 0 },
78
+ { label: 'Second', value: 1 },
79
+ { label: 'Third', value: 2 }
80
+ ]}
81
+ onChange={v => setActiveIndex(v)}
82
+ className="rs-docs-offset-top-12"
83
+ />
84
+ <TabList
85
+ value={activeIndex}
86
+ onChange={v => setActiveIndex(v)}
87
+ className="rs-docs-offset-top-12"
88
+ >
89
+ <Tab>First</Tab>
90
+ <Tab>Second</Tab>
91
+ <Tab>Third</Tab>
92
+ </TabList>
93
+ <TabSeparator />
94
+ <div className="rs-docs-offset-top-12">
95
+ <ContentSwitcher index={activeIndex}>
96
+ <div>First</div>
97
+ <div>Second</div>
98
+ <div>Third</div>
99
+ </ContentSwitcher>
100
+ </div>
101
+ </div>
102
+ );
103
+ };
104
+
105
+ render(<MyTabs />);
106
+ ```
107
+
108
+ #### Switcher with custom values on Tabs and component for tab content
109
+
110
+ `TabList` component works as radio button-like control with custom `value` on `Tab` components
111
+
112
+ ```tsx
113
+ import { useState } from 'react';
114
+ import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
115
+ import { Switcher } from '@rescui/switcher';
116
+
117
+ const Content = ({ activeTab }) => {
118
+ switch (activeTab) {
119
+ case 'first':
120
+ return <div>First</div>;
121
+ case 'second':
122
+ return <div>Second</div>;
123
+ case 'third':
124
+ return <div>Third</div>;
125
+ }
126
+ };
127
+
128
+ const MyTabs = () => {
129
+ const [activeTab, setActiveTab] = useState('second');
130
+ return (
131
+ <div>
132
+ <div>
133
+ <Switcher
134
+ size="xs"
135
+ value={activeTab}
136
+ options={[
137
+ { label: 'First', value: 'first' },
138
+ { label: 'Second', value: 'second' },
139
+ { label: 'Third', value: 'third' }
140
+ ]}
141
+ onChange={tab => setActiveTab(tab)}
142
+ className="rs-docs-offset-top-12"
143
+ />
144
+ </div>
145
+ <TabList
146
+ value={activeTab}
147
+ onChange={v => setActiveTab(v)}
148
+ className="rs-docs-offset-top-12"
149
+ >
150
+ <Tab value="first">First</Tab>
151
+ <Tab value="second">Second</Tab>
152
+ <Tab value="third">Third</Tab>
153
+ </TabList>
154
+ <TabSeparator />
155
+ <div className="rs-docs-offset-top-12">
156
+ <Content activeTab={activeTab} />
157
+ </div>
158
+ </div>
159
+ );
160
+ };
161
+
162
+ render(<MyTabs />);
163
+ ```
164
+
165
+ #### SEO tip: render the content from every tab and hide it with display: none
166
+
167
+ Content could be rendered to DOM and hidden with CSS. This is a usefull trick for SEO optimization.
168
+
169
+ ```tsx
170
+ import { useState, cloneElement } from 'react';
171
+ import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
172
+
173
+ const CSSContentSwitcher = ({ index, children }) => {
174
+ return children.map((ch, i) => {
175
+ const chStyles = ch.props.style || {};
176
+ const addStyles = i === index ? {} : { display: 'none' };
177
+ return cloneElement(ch, { key: i, style: { ...chStyles, ...addStyles } });
178
+ });
179
+ };
180
+
181
+ const MyTabs = () => {
182
+ const [activeIndex, setActiveIndex] = useState(0);
183
+ return (
184
+ <div className="rs-docs-offset-top-24">
185
+ <TabList value={activeIndex} onChange={v => setActiveIndex(v)}>
186
+ <Tab>First</Tab>
187
+ <Tab>Second</Tab>
188
+ <Tab>Third</Tab>
189
+ </TabList>
190
+ <TabSeparator />
191
+ <CSSContentSwitcher index={activeIndex}>
192
+ <div>First</div>
193
+ <div>Second</div>
194
+ <div>Third</div>
195
+ </CSSContentSwitcher>
196
+ </div>
197
+ );
198
+ };
199
+
200
+ render(<MyTabs />);
201
+ ```
202
+
203
+ #### Controls for the e2e tests
204
+
205
+ When testing the page, you can get access to the arrows with `data-e2e` attributes. You should set the scope with the `data-e2e` attribute from the outside.
206
+
207
+ ```tsx
208
+ import { useState, cloneElement } from 'react';
209
+ import { TabList, Tab, TabSeparator } from '@rescui/tab-list';
210
+
211
+ const CSSContentSwitcher = ({ index, children }) => {
212
+ return children.map((ch, i) => {
213
+ const chStyles = ch.props.style || {};
214
+ const addStyles = i === index ? {} : { display: 'none' };
215
+ return cloneElement(ch, { key: i, style: { ...chStyles, ...addStyles } });
216
+ });
217
+ };
218
+ const MyTabs = () => {
219
+ const [activeIndex, setActiveIndex] = useState(0);
220
+ return (
221
+ <div className="rs-docs-offset-top-24" style={{ width: 240 }}>
222
+ <TabList
223
+ value={activeIndex}
224
+ onChange={v => setActiveIndex(v)}
225
+ data-e2e={'example-tabs'}
226
+ >
227
+ <Tab>First</Tab>
228
+ <Tab>Second</Tab>
229
+ <Tab>Third</Tab>
230
+ <Tab>Fourth</Tab>
231
+ <Tab>Fifth</Tab>
232
+ <Tab>Sixth</Tab>
233
+ </TabList>
234
+ <TabSeparator />
235
+ <CSSContentSwitcher index={activeIndex}>
236
+ <div>First</div>
237
+ <div>Second</div>
238
+ <div>Third</div>
239
+ <div>Fourth</div>
240
+ <div>Fifth</div>
241
+ <div>Sixth</div>
242
+ </CSSContentSwitcher>
243
+ </div>
244
+ );
245
+ };
246
+
247
+ render(<MyTabs />);
248
+ ```
249
+
250
+ Now you can get access to the arrows using the `[data-e2e="example-tabs__left-arrow"]` and `[data-e2e="example-tabs__right-arrow"]` selectors.
251
+
252
+ #### Custom background
253
+
254
+ ```tsx
255
+ import { useState } from 'react';
256
+ import { TabList, Tab } from '@rescui/tab-list';
257
+
258
+ const backgroundColor = '#F4F4F4';
259
+
260
+ const MyTabs = () => {
261
+ const [activeIndex, setActiveIndex] = useState(0);
262
+ return (
263
+ <div style={{ width: 260, padding: 10, backgroundColor }}>
264
+ <TabList value={activeIndex} onChange={v => setActiveIndex(v)}>
265
+ <Tab>First</Tab>
266
+ <Tab>Second</Tab>
267
+ <Tab>Third</Tab>
268
+ <Tab>Fourth</Tab>
269
+ <Tab>Fifth</Tab>
270
+ <Tab>Sixth</Tab>
271
+ </TabList>
272
+ </div>
273
+ );
274
+ };
275
+
276
+ render(<MyTabs />);
277
+ ```
278
+
279
+ #### Custom comparator
280
+
281
+ ```tsx
282
+ import { useState } from 'react';
283
+ import { TabList, Tab } from '@rescui/tab-list';
284
+
285
+ const Content = ({ activeIndex }) => {
286
+ switch (activeIndex) {
287
+ case 0:
288
+ return <div>First</div>;
289
+ case 1:
290
+ return <div>Second</div>;
291
+ case 2:
292
+ return <div>Third</div>;
293
+ }
294
+ };
295
+
296
+ const TabsWithCustomComparator = () => {
297
+ const [active, setActive] = useState({ value: 0 });
298
+
299
+ return (
300
+ <div>
301
+ <TabList
302
+ value={active}
303
+ onChange={v => setActive(v)}
304
+ compareValues={(obj1, obj2) => obj1.value === obj2.value}
305
+ >
306
+ <Tab value={{ value: 0 }}>First</Tab>
307
+ <Tab value={{ value: 1 }}>Second</Tab>
308
+ <Tab value={{ value: 2 }}>Third</Tab>
309
+ </TabList>
310
+ <div style={{ marginTop: '10px' }}>
311
+ <Content activeIndex={active.value} />
312
+ </div>
313
+ </div>
314
+ );
315
+ };
316
+
317
+ render(<TabsWithCustomComparator />);
318
+ ```
319
+
320
+ #### Tabs as links
321
+
322
+ ```tsx
323
+ import { useState } from 'react';
324
+ import { TabList, Tab } from '@rescui/tab-list';
325
+
326
+ const Demo = () => {
327
+ const [activeTab, setActiveTab] = useState('second');
328
+ return (
329
+ <div>
330
+ <TabList
331
+ value={activeTab}
332
+ onChange={v => setActiveTab(v)}
333
+ className="rs-docs-offset-top-12"
334
+ >
335
+ <Tab href="#first" value="first">
336
+ First
337
+ </Tab>
338
+ <Tab href="#second" value="second">
339
+ Second
340
+ </Tab>
341
+ <Tab href="#third" value="third">
342
+ Third
343
+ </Tab>
344
+ </TabList>
345
+ </div>
346
+ );
347
+ };
348
+
349
+ render(<Demo />);
350
+ ```
351
+
352
+ ## CSS Mixins API
353
+
354
+ #### `Tab` mixins
355
+
356
+ | Mixin name | Details |
357
+ | --- | --- |
358
+ | `rs-tab-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
359
+ | `rs-tab-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
360
+
361
+ #### `TabList` mixins
362
+
363
+ | Mixin name | Details |
364
+ | --- | --- |
365
+ | `rs-tab-list-size-m` | prop: `size`<br><br>value: `"m"` |
366
+ | `rs-tab-list-size-l` | prop: `size`<br><br>value: `"l"` |
367
+ | `rs-tab-list-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
368
+ | `rs-tab-list-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
369
+ | `rs-tab-list-sparse-true` | prop: `sparse`<br><br>value: `true` |
370
+ | `rs-tab-list-sparse-false` | prop: `sparse`<br><br>value: `false` |
371
+ | `rs-tab-list-short-true` | prop: `short`<br><br>value: `true` |
372
+ | `rs-tab-list-short-false` | prop: `short`<br><br>value: `false` |
373
+
374
+ #### Demo
375
+
376
+ Instead of separate classes, it may be a single class with `@media` queries inside:
377
+
378
+ ```tsx
379
+ import { TabList, Tab } from '@rescui/tab-list';
380
+ import { useState } from 'react';
381
+ import { TeamOutlineIcon, WinOutlineIcon, ThumbsUpOutlineIcon } from '@rescui/icons';
382
+
383
+ const MyTabList = ({ className }) => {
384
+ const [activeIndex, setActiveIndex] = useState(1);
385
+ return (
386
+ <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
387
+ <TabList
388
+ value={activeIndex}
389
+ onChange={v => setActiveIndex(v)}
390
+ className={className}
391
+ >
392
+ <Tab className="my-tab" icon={<TeamOutlineIcon />}>
393
+ First
394
+ </Tab>
395
+ <Tab className="my-tab" icon={<WinOutlineIcon />}>
396
+ Second
397
+ </Tab>
398
+ <Tab className="my-tab" icon={<ThumbsUpOutlineIcon />}>
399
+ Third
400
+ </Tab>
401
+ </TabList>
402
+ </div>
403
+ );
404
+ };
405
+
406
+ render(
407
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
408
+ <div>
409
+ <p>Default:</p>
410
+ <MyTabList />
411
+ </div>
412
+ <div>
413
+ <p>Var1:</p>
414
+ <MyTabList className={`my-tab-list-var-1`} />
415
+ </div>
416
+ <div>
417
+ <p>Var1 & Var2 combined:</p>
418
+ <MyTabList className={`my-tab-list-var-1 my-tab-list-var-2`} />
419
+ </div>
420
+ </div>
421
+ );
422
+ ```
423
+
424
+ ```postcss
425
+ @import '@rescui/tab-list/lib/public-api.p.css';
426
+
427
+ .my-tab-list-var-1 {
428
+ @mixin rs-tab-list-size-l;
429
+ @mixin rs-tab-list-mode-rock;
430
+ @mixin rs-tab-list-sparse-true;
431
+ @mixin rs-tab-list-short-true;
432
+
433
+ .my-tab {
434
+ @mixin rs-tab-icon-right;
435
+ }
436
+ }
437
+ .my-tab-list-var-2 {
438
+ @mixin rs-tab-list-size-m;
439
+ @mixin rs-tab-list-mode-classic;
440
+ @mixin rs-tab-list-sparse-false;
441
+ @mixin rs-tab-list-short-false;
442
+
443
+ .my-tab {
444
+ @mixin rs-tab-icon-left;
445
+ }
446
+ }
447
+ ```
package/llm/index.md ADDED
@@ -0,0 +1,2 @@
1
+ - Components and Hooks
2
+ - [TabList](./components/tab-list.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tab-list",
3
- "version": "0.18.0",
3
+ "version": "0.18.1",
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,8 +17,8 @@
16
17
  },
17
18
  "dependencies": {
18
19
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/button": "^0.24.2",
20
- "@rescui/use-resize-observer": "^0.3.1",
20
+ "@rescui/button": "^0.24.3",
21
+ "@rescui/use-resize-observer": "^0.3.2",
21
22
  "classnames": "^2.2.6"
22
23
  },
23
24
  "peerDependencies": {
@@ -26,10 +27,10 @@
26
27
  "react": ">=16.8.0 <20"
27
28
  },
28
29
  "devDependencies": {
29
- "@rescui/colors": "^0.3.1",
30
+ "@rescui/colors": "^0.3.2",
30
31
  "@rescui/postcss-preset-library": "^0.2.2",
31
32
  "@rescui/scripts": "^0.5.2",
32
- "@rescui/typography": "^0.27.1",
33
+ "@rescui/typography": "^0.27.2",
33
34
  "@rescui/visual-regression": "^0.1.4"
34
35
  },
35
36
  "scripts": {
@@ -37,5 +38,5 @@
37
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
39
  },
39
40
  "nx": {},
40
- "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
41
+ "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
41
42
  }