@rescui/collapse 0.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18 → 0.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19

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 (7) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/collapse.p.module.css.js +32 -32
  3. package/lib/index.css +73 -73
  4. package/llm/components/accordion.md +260 -0
  5. package/llm/components/collapse.md +160 -0
  6. package/llm/index.md +3 -0
  7. package/package.json +6 -5
package/lib/_virtual/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_16ewrhm_4",
3
- "sizeXS": "_sizeXS_16ewrhm_14",
4
- "sizeS": "_sizeS_16ewrhm_18",
5
- "sizeM": "_sizeM_16ewrhm_22",
6
- "sizeL": "_sizeL_16ewrhm_26",
7
- "light": "_light_16ewrhm_30",
8
- "dark": "_dark_16ewrhm_34",
9
- "allVariants": "_allVariants_16ewrhm_48",
10
- "variant16": "_variant16_16ewrhm_53",
11
- "variant20": "_variant20_16ewrhm_54",
12
- "variant24": "_variant24_16ewrhm_55",
13
- "variant28": "_variant28_16ewrhm_58"
2
+ "icon": "_icon_1wzcoos_4",
3
+ "sizeXS": "_sizeXS_1wzcoos_14",
4
+ "sizeS": "_sizeS_1wzcoos_18",
5
+ "sizeM": "_sizeM_1wzcoos_22",
6
+ "sizeL": "_sizeL_1wzcoos_26",
7
+ "light": "_light_1wzcoos_30",
8
+ "dark": "_dark_1wzcoos_34",
9
+ "allVariants": "_allVariants_1wzcoos_48",
10
+ "variant16": "_variant16_1wzcoos_53",
11
+ "variant20": "_variant20_1wzcoos_54",
12
+ "variant24": "_variant24_1wzcoos_55",
13
+ "variant28": "_variant28_1wzcoos_58"
14
14
  };
15
15
  export { styles as default };
package/lib/collapse.p.module.css.js CHANGED
@@ -1,35 +1,35 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_mqy5h0_6",
3
- "themeDark": "_themeDark_mqy5h0_9",
4
- "sizeS": "_sizeS_mqy5h0_13",
5
- "sizeM": "_sizeM_mqy5h0_16",
6
- "sizeL": "_sizeL_mqy5h0_19",
7
- "classic": "_classic_mqy5h0_23",
8
- "rock": "_rock_mqy5h0_26",
9
- "clear": "_clear_mqy5h0_29",
10
- "hasBorderBottom": "_hasBorderBottom_mqy5h0_33",
11
- "leftIcon": "_leftIcon_mqy5h0_37",
12
- "rightIcon": "_rightIcon_mqy5h0_40",
13
- "disableLeftPadding": "_disableLeftPadding_mqy5h0_44",
14
- "main": "_main_mqy5h0_48",
15
- "opening": "_opening_mqy5h0_59",
16
- "opened": "_opened_mqy5h0_60",
17
- "closing": "_closing_mqy5h0_61",
18
- "title": "_title_mqy5h0_95",
19
- "content": "_content_mqy5h0_103",
20
- "closed": "_closed_mqy5h0_111",
21
- "closingTransition": "_closingTransition_mqy5h0_120",
22
- "innerWrapper": "_innerWrapper_mqy5h0_127",
23
- "button": "_button_mqy5h0_133",
24
- "icon": "_icon_mqy5h0_186",
25
- "iconPlus": "_iconPlus_mqy5h0_202",
26
- "iconArrow": "_iconArrow_mqy5h0_207",
27
- "accordion": "_accordion_mqy5h0_213",
28
- "accordionGap0": "_accordionGap0_mqy5h0_218",
29
- "accordionGap8": "_accordionGap8_mqy5h0_221",
30
- "accordionGap12": "_accordionGap12_mqy5h0_224",
31
- "accordionGap16": "_accordionGap16_mqy5h0_227",
32
- "accordionGap24": "_accordionGap24_mqy5h0_230",
33
- "accordionGap32": "_accordionGap32_mqy5h0_233"
2
+ "themeLight": "_themeLight_9bbbdu_6",
3
+ "themeDark": "_themeDark_9bbbdu_9",
4
+ "sizeS": "_sizeS_9bbbdu_13",
5
+ "sizeM": "_sizeM_9bbbdu_16",
6
+ "sizeL": "_sizeL_9bbbdu_19",
7
+ "classic": "_classic_9bbbdu_23",
8
+ "rock": "_rock_9bbbdu_26",
9
+ "clear": "_clear_9bbbdu_29",
10
+ "hasBorderBottom": "_hasBorderBottom_9bbbdu_33",
11
+ "leftIcon": "_leftIcon_9bbbdu_37",
12
+ "rightIcon": "_rightIcon_9bbbdu_40",
13
+ "disableLeftPadding": "_disableLeftPadding_9bbbdu_44",
14
+ "main": "_main_9bbbdu_48",
15
+ "opening": "_opening_9bbbdu_59",
16
+ "opened": "_opened_9bbbdu_60",
17
+ "closing": "_closing_9bbbdu_61",
18
+ "title": "_title_9bbbdu_95",
19
+ "content": "_content_9bbbdu_103",
20
+ "closed": "_closed_9bbbdu_111",
21
+ "closingTransition": "_closingTransition_9bbbdu_120",
22
+ "innerWrapper": "_innerWrapper_9bbbdu_127",
23
+ "button": "_button_9bbbdu_133",
24
+ "icon": "_icon_9bbbdu_186",
25
+ "iconPlus": "_iconPlus_9bbbdu_202",
26
+ "iconArrow": "_iconArrow_9bbbdu_207",
27
+ "accordion": "_accordion_9bbbdu_213",
28
+ "accordionGap0": "_accordionGap0_9bbbdu_218",
29
+ "accordionGap8": "_accordionGap8_9bbbdu_221",
30
+ "accordionGap12": "_accordionGap12_9bbbdu_224",
31
+ "accordionGap16": "_accordionGap16_9bbbdu_227",
32
+ "accordionGap24": "_accordionGap24_9bbbdu_230",
33
+ "accordionGap32": "_accordionGap32_9bbbdu_233"
34
34
  };
35
35
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_16ewrhm_4{
1
+ ._icon_1wzcoos_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_16ewrhm_4{
11
+ ._icon_1wzcoos_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_16ewrhm_4{
20
+ ._icon_1wzcoos_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_16ewrhm_4{
28
+ ._icon_1wzcoos_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_16ewrhm_14{
35
+ ._sizeXS_1wzcoos_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_16ewrhm_18{
38
+ ._sizeS_1wzcoos_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_16ewrhm_22{
41
+ ._sizeM_1wzcoos_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_16ewrhm_26{
44
+ ._sizeL_1wzcoos_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_16ewrhm_30{
47
+ ._light_1wzcoos_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_16ewrhm_34{
51
+ ._dark_1wzcoos_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_16ewrhm_48{
63
+ ._allVariants_1wzcoos_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_16ewrhm_53,
68
- ._variant20_16ewrhm_54,
69
- ._variant24_16ewrhm_55{
67
+ ._variant16_1wzcoos_53,
68
+ ._variant20_1wzcoos_54,
69
+ ._variant24_1wzcoos_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_16ewrhm_58{
72
+ ._variant28_1wzcoos_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_16ewrhm_55{
76
+ ._variant24_1wzcoos_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_16ewrhm_58{
79
+ ._variant28_1wzcoos_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_16ewrhm_54{
84
+ ._variant20_1wzcoos_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_16ewrhm_55{
87
+ ._variant24_1wzcoos_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_16ewrhm_53{
92
+ ._variant16_1wzcoos_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_16ewrhm_54{
95
+ ._variant20_1wzcoos_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._themeLight_mqy5h0_6{
99
+ ._themeLight_9bbbdu_6{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._themeDark_mqy5h0_9{
102
+ ._themeDark_9bbbdu_9{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._sizeS_mqy5h0_13{
105
+ ._sizeS_9bbbdu_13{
106
106
  --_rs-collapse-vertical-padding:6px;
107
107
  --_rs-collapse-horizontal-padding:8px;
108
108
  --_rs-collapse-icon-size:20px;
109
109
  }
110
- ._sizeS_mqy5h0_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
110
+ ._sizeS_9bbbdu_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
111
111
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
112
112
  --_rs-typography-text-transform:initial;
113
113
  --_rs-typography-font-variant-numeric:initial;
@@ -139,7 +139,7 @@
139
139
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
140
140
  --_rs-typography-link-border-bottom-width-from-text:2px;
141
141
  }
142
- ._sizeS_mqy5h0_13 > [data-rs-internal='collapse__content']{
142
+ ._sizeS_9bbbdu_13 > [data-rs-internal='collapse__content']{
143
143
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
144
144
  --_rs-typography-text-transform:initial;
145
145
  --_rs-typography-font-variant-numeric:initial;
@@ -174,12 +174,12 @@
174
174
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
175
175
  --_rs-typography-link-border-bottom-width-from-text:1px;
176
176
  }
177
- ._sizeM_mqy5h0_16{
177
+ ._sizeM_9bbbdu_16{
178
178
  --_rs-collapse-vertical-padding:8px;
179
179
  --_rs-collapse-horizontal-padding:8px;
180
180
  --_rs-collapse-icon-size:24px;
181
181
  }
182
- ._sizeM_mqy5h0_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
182
+ ._sizeM_9bbbdu_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
183
183
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
184
184
  --_rs-typography-text-transform:initial;
185
185
  --_rs-typography-font-variant-numeric:initial;
@@ -211,7 +211,7 @@
211
211
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
212
212
  --_rs-typography-link-border-bottom-width-from-text:2px;
213
213
  }
214
- ._sizeM_mqy5h0_16 > [data-rs-internal='collapse__content']{
214
+ ._sizeM_9bbbdu_16 > [data-rs-internal='collapse__content']{
215
215
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
216
216
  --_rs-typography-text-transform:initial;
217
217
  --_rs-typography-font-variant-numeric:initial;
@@ -250,16 +250,16 @@
250
250
  --_rs-typography-link-border-bottom-width-from-text:1px;
251
251
  }
252
252
  @media screen and (max-width: 640px){
253
- ._sizeM_mqy5h0_16 > [data-rs-internal='collapse__content']{
253
+ ._sizeM_9bbbdu_16 > [data-rs-internal='collapse__content']{
254
254
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
255
255
  }
256
256
  }
257
- ._sizeL_mqy5h0_19{
257
+ ._sizeL_9bbbdu_19{
258
258
  --_rs-collapse-vertical-padding:12px;
259
259
  --_rs-collapse-horizontal-padding:16px;
260
260
  --_rs-collapse-icon-size:28px;
261
261
  }
262
- ._sizeL_mqy5h0_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
262
+ ._sizeL_9bbbdu_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
263
263
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
264
264
  --_rs-typography-text-transform:initial;
265
265
  --_rs-typography-font-variant-numeric:initial;
@@ -291,7 +291,7 @@
291
291
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
292
292
  --_rs-typography-link-border-bottom-width-from-text:2px;
293
293
  }
294
- ._sizeL_mqy5h0_19 > [data-rs-internal='collapse__content']{
294
+ ._sizeL_9bbbdu_19 > [data-rs-internal='collapse__content']{
295
295
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
296
296
  --_rs-typography-text-transform:initial;
297
297
  --_rs-typography-font-variant-numeric:initial;
@@ -330,11 +330,11 @@
330
330
  --_rs-typography-link-border-bottom-width-from-text:1px;
331
331
  }
332
332
  @media screen and (max-width: 640px){
333
- ._sizeL_mqy5h0_19 > [data-rs-internal='collapse__content']{
333
+ ._sizeL_9bbbdu_19 > [data-rs-internal='collapse__content']{
334
334
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
335
335
  }
336
336
  }
337
- ._classic_mqy5h0_23{
337
+ ._classic_9bbbdu_23{
338
338
  --_rs-collapse-active-theme-flip:0;
339
339
  --_rs-collapse-active-background:rgba(
340
340
  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),
@@ -348,7 +348,7 @@
348
348
  );
349
349
  --_rs-collapse-button-hover-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), 1);
350
350
  }
351
- ._rock_mqy5h0_26{
351
+ ._rock_9bbbdu_26{
352
352
  --_rs-collapse-active-theme-flip:1;
353
353
  --_rs-collapse-active-background: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));
354
354
  --_rs-collapse-active-border-bottom-to-padding-multiplier:1;
@@ -359,7 +359,7 @@
359
359
  );
360
360
  --_rs-collapse-button-hover-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), 1);
361
361
  }
362
- ._clear_mqy5h0_29{
362
+ ._clear_9bbbdu_29{
363
363
  --_rs-collapse-active-theme-flip:0;
364
364
  --_rs-collapse-active-background:transparent;
365
365
  --_rs-collapse-active-border-bottom-to-padding-multiplier:0;
@@ -370,27 +370,27 @@
370
370
  0.7
371
371
  );
372
372
  }
373
- ._hasBorderBottom_mqy5h0_33{
373
+ ._hasBorderBottom_9bbbdu_33{
374
374
  --_rs-collapse-border-bottom-width-or-initial:1px;
375
375
  }
376
- ._leftIcon_mqy5h0_37{
376
+ ._leftIcon_9bbbdu_37{
377
377
  --_rs-collapse-button-flex-direction:row;
378
378
  --_rs-collapse-icon-margin:0 var(--_rs-collapse-horizontal-padding) 0 0;
379
379
  --_rs-collapse-inner-wrapper-padding-left-base:calc(var(--_rs-collapse-horizontal-padding)*2 + var(--_rs-collapse-icon-size));
380
380
  }
381
- ._rightIcon_mqy5h0_40{
381
+ ._rightIcon_9bbbdu_40{
382
382
  --_rs-collapse-button-flex-direction:row-reverse;
383
383
  --_rs-collapse-icon-margin:0 0 0 var(--_rs-collapse-horizontal-padding);
384
384
  --_rs-collapse-inner-wrapper-padding-left-base:var(
385
385
  --_rs-collapse-horizontal-padding
386
386
  );
387
387
  }
388
- ._disableLeftPadding_mqy5h0_44{
388
+ ._disableLeftPadding_9bbbdu_44{
389
389
  --_rs-collapse-inner-wrapper-padding-left-from-disable-left-padding-or-initial:var(
390
390
  --_rs-collapse-horizontal-padding
391
391
  );
392
392
  }
393
- ._main_mqy5h0_48{
393
+ ._main_9bbbdu_48{
394
394
  --_rs-theme-dark:var(
395
395
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
396
396
  var(--rs-theme-dark, 0)
@@ -400,7 +400,7 @@
400
400
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
401
401
  }
402
402
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
403
- ._main_mqy5h0_48{
403
+ ._main_9bbbdu_48{
404
404
  --_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)));
405
405
  --_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)));
406
406
  --_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)));
@@ -409,7 +409,7 @@
409
409
  }
410
410
  }
411
411
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
412
- ._main_mqy5h0_48{
412
+ ._main_9bbbdu_48{
413
413
  --_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);
414
414
  --_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));
415
415
  --_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));
@@ -417,7 +417,7 @@
417
417
  --_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));
418
418
  }
419
419
  }
420
- ._main_mqy5h0_48 {
420
+ ._main_9bbbdu_48 {
421
421
  --_rs-collapse-border-bottom-width:var(
422
422
  --_rs-collapse-border-bottom-width-or-initial,
423
423
  0px
@@ -432,9 +432,9 @@
432
432
  border-bottom:var(--_rs-collapse-border-bottom-width) solid 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);
433
433
  border-radius:var(--rs-collapse-border-radius, 0px);
434
434
  }
435
- ._main_mqy5h0_48._opening_mqy5h0_59,
436
- ._main_mqy5h0_48._opened_mqy5h0_60,
437
- ._main_mqy5h0_48._closing_mqy5h0_61{
435
+ ._main_9bbbdu_48._opening_9bbbdu_59,
436
+ ._main_9bbbdu_48._opened_9bbbdu_60,
437
+ ._main_9bbbdu_48._closing_9bbbdu_61{
438
438
  --rs-theme-flip:var(--_rs-collapse-active-theme-flip);
439
439
 
440
440
  padding-bottom:calc(var(--_rs-collapse-border-bottom-width)*var(--_rs-collapse-active-border-bottom-to-padding-multiplier));
@@ -444,7 +444,7 @@
444
444
  background:var(--_rs-collapse-active-background);
445
445
  }
446
446
  @media (hover: hover){
447
- ._main_mqy5h0_48:hover{
447
+ ._main_9bbbdu_48:hover{
448
448
  --rs-theme-flip:var(--_rs-collapse-active-theme-flip);
449
449
 
450
450
  padding-bottom:calc(var(--_rs-collapse-border-bottom-width)*var(--_rs-collapse-active-border-bottom-to-padding-multiplier));
@@ -454,7 +454,7 @@
454
454
  background:var(--_rs-collapse-active-background);
455
455
  }
456
456
  }
457
- ._title_mqy5h0_95{
457
+ ._title_9bbbdu_95{
458
458
  letter-spacing:var(
459
459
  --rs-text-base-letter-spacing,
460
460
  var(--_rs-typography-letter-spacing)
@@ -471,7 +471,7 @@
471
471
 
472
472
  color:inherit;
473
473
  }
474
- ._content_mqy5h0_103{
474
+ ._content_9bbbdu_103{
475
475
  letter-spacing:var(
476
476
  --rs-text-base-letter-spacing,
477
477
  var(--_rs-typography-letter-spacing)
@@ -492,22 +492,22 @@
492
492
 
493
493
  height:0;
494
494
  }
495
- ._closed_mqy5h0_111 > ._content_mqy5h0_103{
495
+ ._closed_9bbbdu_111 > ._content_9bbbdu_103{
496
496
  display:none;
497
497
  }
498
- ._opened_mqy5h0_60 > ._content_mqy5h0_103{
498
+ ._opened_9bbbdu_60 > ._content_9bbbdu_103{
499
499
  height:initial;
500
500
  }
501
- ._opening_mqy5h0_59 > ._content_mqy5h0_103,
502
- ._closingTransition_mqy5h0_120 > ._content_mqy5h0_103{
501
+ ._opening_9bbbdu_59 > ._content_9bbbdu_103,
502
+ ._closingTransition_9bbbdu_120 > ._content_9bbbdu_103{
503
503
  overflow:hidden;
504
504
 
505
505
  transition:height 300ms var(--rs-transition-function, ease);
506
506
  }
507
- ._innerWrapper_mqy5h0_127{
507
+ ._innerWrapper_9bbbdu_127{
508
508
  padding:0 var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-inner-wrapper-padding-left);
509
509
  }
510
- ._button_mqy5h0_133{
510
+ ._button_9bbbdu_133{
511
511
  color:var(
512
512
  --rs-color-hard,
513
513
  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))
@@ -540,24 +540,24 @@
540
540
  -moz-osx-font-smoothing:inherit;
541
541
  -webkit-appearance:none;
542
542
  }
543
- ._button_mqy5h0_133::-moz-focus-inner{
543
+ ._button_9bbbdu_133::-moz-focus-inner{
544
544
  padding:0;
545
545
 
546
546
  border:0;
547
547
  }
548
- ._button_mqy5h0_133:focus{
548
+ ._button_9bbbdu_133:focus{
549
549
  outline:none;
550
550
  }
551
- ._button_mqy5h0_133:focus[data-focus-method='key']{
551
+ ._button_9bbbdu_133:focus[data-focus-method='key']{
552
552
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
553
553
  }
554
554
  @media (hover: hover){
555
- ._button_mqy5h0_133:hover{
555
+ ._button_9bbbdu_133:hover{
556
556
  color:var(--_rs-collapse-button-hover-color);
557
557
  background:var(--_rs-collapse-button-hover-background);
558
558
  }
559
559
  }
560
- ._icon_mqy5h0_186{
560
+ ._icon_9bbbdu_186{
561
561
  position:relative;
562
562
  top:0;
563
563
  left:0;
@@ -573,34 +573,34 @@
573
573
 
574
574
  will-change:transform;
575
575
  }
576
- ._opening_mqy5h0_59._iconPlus_mqy5h0_202 > ._button_mqy5h0_133 > ._icon_mqy5h0_186,
577
- ._opened_mqy5h0_60._iconPlus_mqy5h0_202 > ._button_mqy5h0_133 > ._icon_mqy5h0_186{
576
+ ._opening_9bbbdu_59._iconPlus_9bbbdu_202 > ._button_9bbbdu_133 > ._icon_9bbbdu_186,
577
+ ._opened_9bbbdu_60._iconPlus_9bbbdu_202 > ._button_9bbbdu_133 > ._icon_9bbbdu_186{
578
578
  transform:rotate(45deg);
579
579
  }
580
- ._opening_mqy5h0_59._iconArrow_mqy5h0_207 > ._button_mqy5h0_133 > ._icon_mqy5h0_186,
581
- ._opened_mqy5h0_60._iconArrow_mqy5h0_207 > ._button_mqy5h0_133 > ._icon_mqy5h0_186{
580
+ ._opening_9bbbdu_59._iconArrow_9bbbdu_207 > ._button_9bbbdu_133 > ._icon_9bbbdu_186,
581
+ ._opened_9bbbdu_60._iconArrow_9bbbdu_207 > ._button_9bbbdu_133 > ._icon_9bbbdu_186{
582
582
  transform:rotate(90deg);
583
583
  }
584
- ._accordion_mqy5h0_213{
584
+ ._accordion_9bbbdu_213{
585
585
  display:flex;
586
586
  flex-direction:column;
587
587
  row-gap:var(--_rs-collapse-accordion-gap);
588
588
  }
589
- ._accordionGap0_mqy5h0_218{
589
+ ._accordionGap0_9bbbdu_218{
590
590
  --_rs-collapse-accordion-gap:0px;
591
591
  }
592
- ._accordionGap8_mqy5h0_221{
592
+ ._accordionGap8_9bbbdu_221{
593
593
  --_rs-collapse-accordion-gap:8px;
594
594
  }
595
- ._accordionGap12_mqy5h0_224{
595
+ ._accordionGap12_9bbbdu_224{
596
596
  --_rs-collapse-accordion-gap:12px;
597
597
  }
598
- ._accordionGap16_mqy5h0_227{
598
+ ._accordionGap16_9bbbdu_227{
599
599
  --_rs-collapse-accordion-gap:16px;
600
600
  }
601
- ._accordionGap24_mqy5h0_230{
601
+ ._accordionGap24_9bbbdu_230{
602
602
  --_rs-collapse-accordion-gap:24px;
603
603
  }
604
- ._accordionGap32_mqy5h0_233{
604
+ ._accordionGap32_9bbbdu_233{
605
605
  --_rs-collapse-accordion-gap:32px;
606
606
  }
package/llm/components/accordion.md ADDED
@@ -0,0 +1,260 @@
1
+ # Accordion
2
+
3
+ Accordion component allows you to use stacked list of Сollapse components. This enables you to show or hide the content according to desired logic.
4
+
5
+ ## Usage
6
+
7
+ ### Simple usage
8
+
9
+ ```tsx
10
+ import { Accordion, Collapse } from '@rescui/collapse';
11
+
12
+ <Accordion>
13
+ <Collapse title={'Collapse 1'}>Content</Collapse>
14
+ <Collapse title={'Collapse 2'}>Content</Collapse>
15
+ <Collapse title={'Collapse 3'}>Content</Collapse>
16
+ </Accordion>;
17
+ ```
18
+
19
+ ### Two-columns layout
20
+
21
+ With a custom `8px` gap between rows.
22
+
23
+ ```tsx
24
+ import { Accordion, Collapse } from '@rescui/collapse';
25
+
26
+ <Accordion>
27
+ <div style={{ display: 'flex', columnGap: 32 }}>
28
+ <div
29
+ style={{
30
+ flex: '1 1 50%',
31
+ display: 'flex',
32
+ flexDirection: 'column',
33
+ gap: 8
34
+ }}
35
+ >
36
+ <Collapse title={'Collapse 1'}>Content</Collapse>
37
+ <Collapse title={'Collapse 3'}>Content</Collapse>
38
+ <Collapse title={'Collapse 5'}>Content</Collapse>
39
+ </div>
40
+ <div
41
+ style={{
42
+ flex: '1 1 50%',
43
+ display: 'flex',
44
+ flexDirection: 'column',
45
+ gap: 8
46
+ }}
47
+ >
48
+ <Collapse title={'Collapse 2'}>Content</Collapse>
49
+ <Collapse title={'Collapse 4'}>Content</Collapse>
50
+ </div>
51
+ </div>
52
+ </Accordion>;
53
+ ```
54
+
55
+ ### Change mode and size
56
+
57
+ ```tsx
58
+ import { Accordion, Collapse } from '@rescui/collapse';
59
+
60
+ <Accordion size="l" mode="rock">
61
+ <Collapse title={'Collapse 1'}>Content</Collapse>
62
+ <Collapse title={'Collapse 2'}>Content</Collapse>
63
+ <Collapse title={'Collapse 3'}>Content</Collapse>
64
+ </Accordion>;
65
+ ```
66
+
67
+ ### With default opened item
68
+
69
+ ```tsx
70
+ import { Accordion, Collapse } from '@rescui/collapse';
71
+
72
+ <Accordion>
73
+ <Collapse title={'Collapse 1'}>Content</Collapse>
74
+ <Collapse title={'Collapse 2'} isDefaultOpened>
75
+ Content
76
+ </Collapse>
77
+ <Collapse title={'Collapse 3'}>Content</Collapse>
78
+ </Accordion>;
79
+ ```
80
+
81
+ ### With arrow icon
82
+
83
+ ```tsx
84
+ import { Accordion, Collapse } from '@rescui/collapse';
85
+
86
+ <Accordion icon="arrow">
87
+ <Collapse title={'Collapse 1'}>Content</Collapse>
88
+ <Collapse title={'Collapse 2'}>Content</Collapse>
89
+ <Collapse title={'Collapse 3'}>Content</Collapse>
90
+ </Accordion>;
91
+ ```
92
+
93
+ ### Controlled mode
94
+
95
+ ```tsx
96
+ import { Accordion, Collapse } from '@rescui/collapse';
97
+
98
+ const Demo = () => {
99
+ const [value, setValue] = React.useState('1');
100
+
101
+ return (
102
+ <>
103
+ <Accordion value={value} onChange={setValue}>
104
+ <Collapse title={'Collapse 1'} itemKey="1">
105
+ Content
106
+ </Collapse>
107
+ <Collapse title={'Collapse 2'} itemKey="2">
108
+ Content
109
+ </Collapse>
110
+ <Collapse title={'Collapse 3'} itemKey="3">
111
+ Content
112
+ </Collapse>
113
+ </Accordion>
114
+ <p style={{ paddingTop: 12 }}>Current value: {value}</p>
115
+ </>
116
+ );
117
+ };
118
+
119
+ render(<Demo />);
120
+ ```
121
+
122
+ #### Controlled mode ignores `isDefaultOpened`
123
+
124
+ ```tsx
125
+ import { Accordion, Collapse } from '@rescui/collapse';
126
+
127
+ const Demo = () => {
128
+ const [value, setValue] = React.useState(null);
129
+
130
+ return (
131
+ <>
132
+ <Accordion value={value} onChange={setValue}>
133
+ <Collapse title={'Collapse 1'} itemKey="1">
134
+ Content
135
+ </Collapse>
136
+ <Collapse title={'Collapse 2'} itemKey="2" isDefaultOpened>
137
+ Content
138
+ </Collapse>
139
+ <Collapse title={'Collapse 3'} itemKey="3">
140
+ Content
141
+ </Collapse>
142
+ </Accordion>
143
+ <p style={{ paddingTop: 12 }}>Current value: {value}</p>
144
+ </>
145
+ );
146
+ };
147
+
148
+ render(<Demo />);
149
+ ```
150
+
151
+ ## CSS API
152
+
153
+ #### `Accordion` mixins
154
+
155
+ | Mixin name | Details |
156
+ | --- | --- |
157
+ | `rs-accordion-size-s` | prop: `size`<br><br>value: `"s"`<br><br>Apply `s` size to accordion's collapse components |
158
+ | `rs-accordion-size-m` | prop: `size`<br><br>value: `"m"`<br><br>Apply `m` size to accordion's collapse components |
159
+ | `rs-accordion-size-l` | prop: `size`<br><br>value: `"l"`<br><br>Apply `l` size to accordion's collapse components |
160
+ | `rs-accordion-border-bottom-true` | prop: `borderBottom`<br><br>value: `true`<br><br>Enable `border-bottom` of the accordion's collapse components |
161
+ | `rs-accordion-border-bottom-false` | prop: `borderBottom`<br><br>value: `false`<br><br>Disable `border-bottom` of the accordion's collapse components |
162
+ | `rs-accordion-mode-classic` | prop: `mode`<br><br>value: `"classic"`<br><br>Apply `classic` mode to accordion's collapse components |
163
+ | `rs-accordion-mode-rock` | prop: `mode`<br><br>value: `"rock"`<br><br>Apply `rock` mode to accordion's collapse components |
164
+ | `rs-accordion-mode-clear` | prop: `mode`<br><br>value: `"clear"`<br><br>Apply `clear` mode to accordion's collapse components |
165
+ | `rs-accordion-disable-left-padding-true` | prop: `disableLeftPadding`<br><br>value: `true`<br><br>Remove the left padding for content inside accordion's collapse components. Does nothing when `icon="right-plus"`. |
166
+ | `rs-accordion-disable-left-padding-false` | prop: `disableLeftPadding`<br><br>value: `false`<br><br>Undo the removal of the left padding for content inside accordion's collapses components. Does nothing when `icon="right-plus"`. |
167
+ | `rs-accordion-gap-0` | prop: `gap`<br><br>value: `0`<br><br>Apply `0px` gap to an accordion |
168
+ | `rs-accordion-gap-8` | prop: `gap`<br><br>value: `8`<br><br>Apply `8px` gap to an accordion |
169
+ | `rs-accordion-gap-12` | prop: `gap`<br><br>value: `12`<br><br>Apply `12px` gap to an accordion |
170
+ | `rs-accordion-gap-16` | prop: `gap`<br><br>value: `16`<br><br>Apply `16px` gap to an accordion |
171
+ | `rs-accordion-gap-24` | prop: `gap`<br><br>value: `24`<br><br>Apply `24px` gap to an accordion |
172
+ | `rs-accordion-gap-32` | prop: `gap`<br><br>value: `32`<br><br>Apply `32px` gap to an accordion |
173
+
174
+ ##### Demo
175
+
176
+ Instead of separate classes, it may be a single class with `@media` queries inside:
177
+
178
+ ```tsx
179
+ import { Accordion, Collapse } from '@rescui/collapse';
180
+
181
+ const MyAccordion = ({ className }) => {
182
+ return (
183
+ <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
184
+ <Accordion className={className}>
185
+ <Collapse title={'Collapse 1'}>Content</Collapse>
186
+ <Collapse title={'Collapse 2'}>Content</Collapse>
187
+ <Collapse title={'Collapse 3'}>Content</Collapse>
188
+ </Accordion>
189
+ </div>
190
+ );
191
+ };
192
+
193
+ render(
194
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
195
+ <div>
196
+ <p>Default:</p>
197
+ <MyAccordion />
198
+ </div>
199
+ <div>
200
+ <p>Var1:</p>
201
+ <MyAccordion className={`my-accordion-var-1`} />
202
+ </div>
203
+ <div>
204
+ <p>Var1 & Var2 combined:</p>
205
+ <MyAccordion className={`my-accordion-var-1 my-accordion-var-2`} />
206
+ </div>
207
+ </div>
208
+ );
209
+ ```
210
+
211
+ ```postcss attached
212
+ @import '@rescui/collapse/lib/public-api.p.css';
213
+
214
+ .my-accordion-var-1 {
215
+ @mixin rs-accordion-size-l;
216
+ @mixin rs-accordion-mode-rock;
217
+ @mixin rs-accordion-border-bottom-true;
218
+ @mixin rs-accordion-disable-left-padding-true;
219
+ @mixin rs-accordion-gap-24;
220
+ }
221
+ .my-accordion-var-2 {
222
+ @mixin rs-accordion-size-s;
223
+ @mixin rs-accordion-mode-clear;
224
+ @mixin rs-accordion-border-bottom-false;
225
+ @mixin rs-accordion-disable-left-padding-false;
226
+ @mixin rs-accordion-gap-8;
227
+ }
228
+ ```
229
+
230
+ #### `Accordion` CSS Vars
231
+
232
+ | Variable | Syntax | Description |
233
+ | --- | --- | --- |
234
+ | `--rs-collapse-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border radius of collapses inside the accordion |
235
+
236
+ ##### Demo
237
+
238
+ ```tsx
239
+ import { Accordion, Collapse } from '@rescui/collapse';
240
+
241
+ const Demo = () => {
242
+ return (
243
+ <Accordion className="my-accordion">
244
+ <Collapse title={'Collapse title 1'}>CollapseContent 1</Collapse>
245
+ <Collapse title={'Collapse title 2'} isDefaultOpened>
246
+ CollapseContent 2
247
+ </Collapse>
248
+ <Collapse title={'Collapse title 3'}>CollapseContent 3</Collapse>
249
+ </Accordion>
250
+ );
251
+ };
252
+
253
+ render(<Demo />);
254
+ ```
255
+
256
+ ```postcss
257
+ .my-accordion {
258
+ --rs-collapse-border-radius: 8px;
259
+ }
260
+ ```
package/llm/components/collapse.md ADDED
@@ -0,0 +1,160 @@
1
+ # Collapse
2
+
3
+ Collapse component allows you to hide and show content using a trigger header.
4
+
5
+ ## Usage
6
+
7
+ ### Simple usage
8
+
9
+ ```tsx
10
+ import { Collapse } from '@rescui/collapse';
11
+
12
+ <Collapse title={'Title'}>Content</Collapse>;
13
+ ```
14
+
15
+ ### Change mode and size
16
+
17
+ ```tsx
18
+ import { Collapse } from '@rescui/collapse';
19
+
20
+ <Collapse title={'Title'} size="l" mode="rock">
21
+ Content
22
+ </Collapse>;
23
+ ```
24
+
25
+ ### With default opened state
26
+
27
+ ```tsx
28
+ import { Collapse } from '@rescui/collapse';
29
+
30
+ <Collapse title={'Title'} isDefaultOpened>
31
+ Content
32
+ </Collapse>;
33
+ ```
34
+
35
+ ### Group multiple collapses
36
+
37
+ ```tsx
38
+ import { Collapse } from '@rescui/collapse';
39
+
40
+ <div>
41
+ <Collapse title={'Collapse 1'}>Content</Collapse>
42
+ <Collapse title={'Collapse 2'}>Content</Collapse>
43
+ <Collapse title={'Collapse 3'}>Content</Collapse>
44
+ </div>;
45
+ ```
46
+
47
+ ### With arrow icon
48
+
49
+ ```tsx
50
+ import { Collapse } from '@rescui/collapse';
51
+
52
+ <div>
53
+ <Collapse title={'Collapse 1'} icon="arrow">
54
+ Content
55
+ </Collapse>
56
+ <Collapse title={'Collapse 2'} icon="arrow">
57
+ Content
58
+ </Collapse>
59
+ <Collapse title={'Collapse 3'} icon="arrow">
60
+ Content
61
+ </Collapse>
62
+ </div>;
63
+ ```
64
+
65
+ ## CSS API
66
+
67
+ #### `Collapse` mixins
68
+
69
+ | Mixin name | Details |
70
+ | --- | --- |
71
+ | `rs-collapse-size-s` | prop: `size`<br><br>value: `"s"` |
72
+ | `rs-collapse-size-m` | prop: `size`<br><br>value: `"m"` |
73
+ | `rs-collapse-size-l` | prop: `size`<br><br>value: `"l"` |
74
+ | `rs-collapse-border-bottom-true` | prop: `borderBottom`<br><br>value: `true` |
75
+ | `rs-collapse-border-bottom-false` | prop: `borderBottom`<br><br>value: `false` |
76
+ | `rs-collapse-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
77
+ | `rs-collapse-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
78
+ | `rs-collapse-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
79
+ | `rs-collapse-disable-left-padding-true` | prop: `disableLeftPadding`<br><br>value: `true`<br><br>Remove collapse content left padding. Does nothing when `icon="right-plus"`. |
80
+ | `rs-collapse-disable-left-padding-false` | prop: `disableLeftPadding`<br><br>value: `false`<br><br>Undo the removal of collapse content left padding. Does nothing when `icon="right-plus"`. |
81
+
82
+ #### Demo
83
+
84
+ Instead of separate classes, it may be a single class with `@media` queries inside:
85
+
86
+ ```tsx
87
+ import { Collapse } from '@rescui/collapse';
88
+
89
+ const MyCollapse = ({ className }) => {
90
+ return (
91
+ <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
92
+ <Collapse title={'Title'} className={className}>
93
+ Content
94
+ </Collapse>
95
+ </div>
96
+ );
97
+ };
98
+
99
+ render(
100
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
101
+ <div>
102
+ <p>Default:</p>
103
+ <MyCollapse />
104
+ </div>
105
+ <div>
106
+ <p>Var1:</p>
107
+ <MyCollapse className={`my-collapse-var-1`} />
108
+ </div>
109
+ <div>
110
+ <p>Var1 & Var2 combined:</p>
111
+ <MyCollapse className={`my-collapse-var-1 my-collapse-var-2`} />
112
+ </div>
113
+ </div>
114
+ );
115
+ ```
116
+
117
+ ```postcss attached
118
+ @import '@rescui/collapse/lib/public-api.p.css';
119
+
120
+ .my-collapse-var-1 {
121
+ @mixin rs-collapse-size-l;
122
+ @mixin rs-collapse-mode-rock;
123
+ @mixin rs-collapse-border-bottom-true;
124
+ @mixin rs-collapse-disable-left-padding-false;
125
+ }
126
+ .my-collapse-var-2 {
127
+ @mixin rs-collapse-size-s;
128
+ @mixin rs-collapse-mode-clear;
129
+ @mixin rs-collapse-border-bottom-false;
130
+ @mixin rs-collapse-disable-left-padding-true;
131
+ }
132
+ ```
133
+
134
+ #### `Collapse` CSS Vars
135
+
136
+ | Variable | Syntax | Description |
137
+ | --- | --- | --- |
138
+ | `--rs-collapse-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border radius of the collapse |
139
+
140
+ ##### Demo
141
+
142
+ ```tsx
143
+ import { Collapse } from '@rescui/collapse';
144
+
145
+ const Demo = () => {
146
+ return (
147
+ <Collapse className="my-collapse" title={'Collapse title'} isDefaultOpened>
148
+ CollapseContent
149
+ </Collapse>
150
+ );
151
+ };
152
+
153
+ render(<Demo />);
154
+ ```
155
+
156
+ ```postcss
157
+ .my-collapse {
158
+ --rs-collapse-border-radius: 8px;
159
+ }
160
+ ```
package/llm/index.md ADDED
@@ -0,0 +1,3 @@
1
+ - Components and Hooks
2
+ - [Accordion](./components/accordion.md)
3
+ - [Collapse](./components/collapse.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/collapse",
3
- "version": "0.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
3
+ "version": "0.8.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19+b138dd5bf",
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,7 +17,7 @@
16
17
  },
17
18
  "dependencies": {
18
19
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/use-resize-observer": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.165+2a311c841",
20
+ "@rescui/use-resize-observer": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.166+b138dd5bf",
20
21
  "classnames": "^2.2.6"
21
22
  },
22
23
  "peerDependencies": {
@@ -25,9 +26,9 @@
25
26
  "react": ">=16.8.0 <20"
26
27
  },
27
28
  "devDependencies": {
28
- "@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.53+2a311c841",
29
+ "@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.54+b138dd5bf",
29
30
  "@rescui/scripts": "0.5.2",
30
- "@rescui/typography": "0.27.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
31
+ "@rescui/typography": "0.27.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19+b138dd5bf",
31
32
  "@rescui/visual-regression": "0.1.4",
32
33
  "@types/classnames": "^2.2.11"
33
34
  },
@@ -36,5 +37,5 @@
36
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
37
38
  },
38
39
  "nx": {},
39
- "gitHead": "2a311c841551a48c46895aff5609fe099bbe1a61"
40
+ "gitHead": "b138dd5bf3dbdca6c21fa339dd567517d5c5d1d9"
40
41
  }