@rescui/tab-list 0.11.11 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.css CHANGED
@@ -1,7 +1,157 @@
1
- ._wrapper_1rbu5pd_9{
2
- position:relative;
1
+ ._light_xv3erh_7{
2
+ --rs-theme-dark:0;
3
+ }
4
+ ._dark_xv3erh_10{
5
+ --rs-theme-dark:1;
6
+ }
7
+ ._sizeM_xv3erh_14{
8
+ --_rs-tab-list-tab-vertical-padding:8px;
9
+ --_rs-tab-list-icon-size:24px;
10
+ --_rs-tab-list-icon-offset:4px;
11
+ }
12
+ ._sizeM_xv3erh_14 [data-rs-internal='tab-list__tab']{
13
+ --_rs-typography-letter-spacing:0.0015em;
14
+ --_rs-typography-text-transform:initial;
15
+ --_rs-typography-font-variant-numeric:initial;
16
+ --_rs-typography-font-family:var(
17
+ --rs-font-family-ui,
18
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
19
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
20
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
21
+ );
22
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
23
+ --_rs-typography-font-weight:var(
24
+ --rs-font-weight-regular,
25
+ 400
26
+ );
27
+ --_rs-typography-line-height:var(
28
+ --rs-text-2-line-height,
29
+ 24px
30
+ );
31
+ --_rs-typography-base-color:var(
32
+ --_rs-typography-hardness-color,
33
+ var(
34
+ --rs-color-average,
35
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
36
+ )
37
+ );
38
+ --_rs-typography-text-auto-offset:16px;
39
+ --_rs-typography-ul-list-li-padding-left:22px;
40
+ --_rs-typography-ol-list-li-padding-left:26px;
41
+ --_rs-typography-list-li-margin-top-from-text:16px;
42
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
43
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
44
+ --_rs-typography-link-border-bottom-width-from-text:1px;
45
+ }
46
+ @media screen and (max-width: 640px){
47
+ ._sizeM_xv3erh_14 [data-rs-internal='tab-list__tab']{
48
+ --_rs-typography-list-li-margin-top-from-text:12px;
49
+ }
50
+ }
51
+ ._sizeL_xv3erh_17{
52
+ --_rs-tab-list-tab-vertical-padding:12px;
53
+ --_rs-tab-list-icon-size:28px;
54
+ --_rs-tab-list-icon-offset:8px;
55
+ }
56
+ ._sizeL_xv3erh_17 [data-rs-internal='tab-list__tab']{
57
+ --_rs-typography-letter-spacing:normal;
58
+ --_rs-typography-text-transform:initial;
59
+ --_rs-typography-font-variant-numeric:initial;
60
+ --_rs-typography-font-family:var(
61
+ --rs-font-family-ui,
62
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
63
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
64
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
65
+ );
66
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
67
+ --_rs-typography-font-weight:var(
68
+ --rs-font-weight-regular,
69
+ 400
70
+ );
71
+ --_rs-typography-line-height:var(
72
+ --rs-text-1-line-height,
73
+ 28px
74
+ );
75
+ --_rs-typography-base-color:var(
76
+ --_rs-typography-hardness-color,
77
+ var(
78
+ --rs-color-average,
79
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
80
+ )
81
+ );
82
+ --_rs-typography-text-auto-offset:32px;
83
+ --_rs-typography-ul-list-li-padding-left:26px;
84
+ --_rs-typography-ol-list-li-padding-left:32px;
85
+ --_rs-typography-list-li-margin-top-from-text:24px;
86
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
87
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
88
+ --_rs-typography-link-border-bottom-width-from-text:1px;
89
+ }
90
+ @media screen and (max-width: 640px){
91
+ ._sizeL_xv3erh_17 [data-rs-internal='tab-list__tab']{
92
+ --_rs-typography-list-li-margin-top-from-text:16px;
93
+ }
94
+ }
95
+ ._classic_xv3erh_21{
96
+ --_rs-tab-list-indicator-background:var(--_rs-color-primary);
97
+ --_rs-tab-list-tab-selected-color:var(--_rs-color-primary);
98
+ }
99
+ ._rock_xv3erh_24{
100
+ --_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));
101
+ --_rs-tab-list-tab-selected-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));
102
+ }
103
+ ._sparse_xv3erh_28{
104
+ --_rs-tab-list-tab-margin-left-or-initial:32px;
105
+ }
106
+ @media screen and (max-width: 640px){
107
+ ._sparse_xv3erh_28{
108
+ --_rs-tab-list-tab-margin-left-or-initial:24px;
109
+ }
110
+ }
111
+ ._short_xv3erh_32{
112
+ --_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));
3
113
  }
4
- ._tabsContainer_1rbu5pd_13{
114
+ ._tabsContainer_xv3erh_36{
115
+ --_rs-theme-dark:var(
116
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
117
+ var(--rs-theme-dark, 0)
118
+ );
119
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
120
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
121
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
122
+ }
123
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
124
+ ._tabsContainer_xv3erh_36{
125
+ --_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)));
126
+ --_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)));
127
+ --_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)));
128
+ --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
129
+ --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
130
+ }
131
+ }
132
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
133
+ ._tabsContainer_xv3erh_36{
134
+ --_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);
135
+ --_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));
136
+ --_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));
137
+ --_rs-color-primary-t-dim: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, 0.8);
138
+ --_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));
139
+ }
140
+ }
141
+ ._tabsContainer_xv3erh_36 {
142
+ --_rs-tab-list-tab-base-margin-left:24px;
143
+ }
144
+ @media screen and (max-width: 640px){
145
+ ._tabsContainer_xv3erh_36{
146
+ --_rs-tab-list-tab-base-margin-left:16px;
147
+ }
148
+ }
149
+ ._tabsContainer_xv3erh_36 {
150
+ --_rs-tab-list-tab-margin-left:var(
151
+ --_rs-tab-list-tab-margin-left-or-initial,
152
+ var(--_rs-tab-list-tab-base-margin-left)
153
+ );
154
+
5
155
  position:relative;
6
156
 
7
157
  display:-webkit-box;
@@ -10,7 +160,7 @@
10
160
 
11
161
  display:flex;
12
162
  }
13
- ._indicator_1rbu5pd_19{
163
+ ._indicator_xv3erh_46{
14
164
  position:absolute;
15
165
  z-index:3;
16
166
  bottom:0;
@@ -18,26 +168,66 @@
18
168
  width:100%;
19
169
  height:2px;
20
170
 
171
+ background:var(--_rs-tab-list-indicator-background);
172
+
21
173
  -webkit-transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
22
174
 
23
175
  transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
24
176
  will-change:left, width;
25
177
  }
26
- ._light_1rbu5pd_31._classic_1rbu5pd_31 ._indicator_1rbu5pd_19{
27
- background-color:#6B57FF;
28
- background-color:var(--rs-color-primary-light-theme, #6B57FF);
29
- }
30
- ._dark_1rbu5pd_35._classic_1rbu5pd_31 ._indicator_1rbu5pd_19{
31
- background-color:#8473FF;
32
- background-color:var(--rs-color-primary-dark-theme, #8473FF);
178
+ ._iconLeft_xv3erh_61{
179
+ --_rs-tab-list-tab-flex-direction:row;
180
+ }
181
+ ._iconRight_xv3erh_64{
182
+ --_rs-tab-list-tab-flex-direction:row-reverse;
183
+ }
184
+ ._tab_xv3erh_36{
185
+ --_rs-theme-dark:var(
186
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
187
+ var(--rs-theme-dark, 0)
188
+ );
189
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
190
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
191
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
192
+ }
193
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
194
+ ._tab_xv3erh_36{
195
+ --_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)));
196
+ --_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)));
197
+ --_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)));
198
+ --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
199
+ --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
200
+ }
33
201
  }
34
- ._light_1rbu5pd_31._rock_1rbu5pd_39 ._indicator_1rbu5pd_19{
35
- background-color:#19191C;
202
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
203
+ ._tab_xv3erh_36{
204
+ --_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);
205
+ --_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));
206
+ --_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));
207
+ --_rs-color-primary-t-dim: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, 0.8);
208
+ --_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));
209
+ }
36
210
  }
37
- ._dark_1rbu5pd_35._rock_1rbu5pd_39 ._indicator_1rbu5pd_19{
38
- background-color:#FFFFFF;
211
+ ._tab_xv3erh_36 {
212
+ letter-spacing:var(
213
+ --rs-text-base-letter-spacing,
214
+ var(--_rs-typography-letter-spacing)
215
+ );
216
+ text-transform:var(--_rs-typography-text-transform);
217
+ font-family:var(--_rs-typography-font-family);
218
+ font-size:var(--_rs-typography-font-size);
219
+ font-weight:var(--_rs-typography-font-weight);
220
+ line-height:var(--_rs-typography-line-height);
221
+ font-variant-numeric:var(--_rs-typography-font-variant-numeric);
222
+ -webkit-font-feature-settings:'kern', 'liga', 'calt';
223
+ font-feature-settings:'kern', 'liga', 'calt';
224
+ }
225
+ ._tab_xv3erh_36 > p:not(:nth-child(1)),
226
+ ._tab_xv3erh_36 > pre:not(:nth-child(1)){
227
+ padding-top:var(--_rs-typography-auto-offset-or-initial);
39
228
  }
40
- ._tab_1rbu5pd_13{
229
+ ._tab_xv3erh_36 {
230
+
41
231
  position:relative;
42
232
 
43
233
  display:-webkit-box;
@@ -46,6 +236,11 @@
46
236
 
47
237
  display:flex;
48
238
  overflow:hidden;
239
+ -webkit-box-orient:vertical;
240
+ -webkit-box-direction:normal;
241
+ -ms-flex-direction:var(--_rs-tab-list-tab-flex-direction);
242
+ flex-direction:var(--_rs-tab-list-tab-flex-direction);
243
+ gap:var(--_rs-tab-list-icon-offset);
49
244
  -ms-flex-negative:0;
50
245
  flex-shrink:0;
51
246
  -webkit-box-flex:0;
@@ -57,8 +252,8 @@
57
252
  -ms-flex-align:center;
58
253
  align-items:center;
59
254
 
60
- margin:0;
61
- padding:0;
255
+ margin:0 0 0 var(--_rs-tab-list-tab-margin-left);
256
+ padding:var(--_rs-tab-list-tab-vertical-padding) 0;
62
257
 
63
258
  border:none;
64
259
 
@@ -70,30 +265,27 @@
70
265
  white-space:nowrap;
71
266
  text-decoration:none;
72
267
 
73
- color:inherit;
268
+ color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
74
269
  background:transparent;
75
- -webkit-box-shadow:none;
76
- box-shadow:none;
77
-
78
- font:inherit;
79
- line-height:normal;
270
+ -webkit-box-shadow:var(--_rs-tab-list-tab-box-shadow);
271
+ box-shadow:var(--_rs-tab-list-tab-box-shadow);
80
272
  -webkit-font-smoothing:inherit;
81
273
  -moz-osx-font-smoothing:inherit;
82
274
  -webkit-appearance:none;
83
275
  }
84
- ._tab_1rbu5pd_13::-moz-focus-inner{
276
+ ._tab_xv3erh_36::-moz-focus-inner{
85
277
  padding:0;
86
278
 
87
279
  border:none;
88
280
  }
89
- ._tab_1rbu5pd_13:hover,
90
- ._tab_1rbu5pd_13:active,
91
- ._tab_1rbu5pd_13:focus{
281
+ ._tab_xv3erh_36:hover,
282
+ ._tab_xv3erh_36:active,
283
+ ._tab_xv3erh_36:focus{
92
284
  outline:none;
93
285
 
94
286
  text-decoration:none;
95
287
  }
96
- ._tab_1rbu5pd_13:after{
288
+ ._tab_xv3erh_36:after{
97
289
  position:absolute;
98
290
  bottom:0;
99
291
  left:0;
@@ -105,186 +297,69 @@
105
297
 
106
298
  background-color:transparent;
107
299
  }
108
- ._tab_1rbu5pd_13:focus[data-focus-method='key']:after{
300
+ ._tab_xv3erh_36:focus[data-focus-method='key']:after{
109
301
  opacity:0;
110
302
  }
111
- ._tab_1rbu5pd_13:hover:after{
112
- height:1px;
113
- }
114
- ._sizeM_1rbu5pd_125 ._tab_1rbu5pd_13{
115
- letter-spacing:0.0015em;
116
- font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
117
- font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
118
- -webkit-font-feature-settings:"kern", "liga", "calt";
119
- font-feature-settings:"kern", "liga", "calt";
120
- font-size:16px;
121
- font-size:var(--rs-text-2-font-size, 16px);
122
- font-weight:400;
123
- line-height:24px;
124
- line-height:var(--rs-text-2-line-height, 24px);
125
- }
126
- ._rs-reset-letter-spacing_1rbu5pd_1 ._sizeM_1rbu5pd_125 ._tab_1rbu5pd_13{
127
- letter-spacing:normal;
128
- }
129
- ._sizeM_1rbu5pd_125 ._tab_1rbu5pd_13 {
130
- padding:8px 0;
131
- }
132
- ._sizeL_1rbu5pd_130 ._tab_1rbu5pd_13{
133
- letter-spacing:normal;
134
- font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
135
- font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
136
- -webkit-font-feature-settings:"kern", "liga", "calt";
137
- font-feature-settings:"kern", "liga", "calt";
138
- font-size:20px;
139
- font-size:var(--rs-text-1-font-size, 20px);
140
- font-weight:normal;
141
- line-height:28px;
142
- line-height:var(--rs-text-1-line-height, 28px);
143
- padding:12px 0;
144
- }
145
- ._innerOffsetM_1rbu5pd_135 ._tab_1rbu5pd_13{
146
- margin-left:24px;
147
- }
148
- @media screen and (max-width: 640px){
149
- ._innerOffsetM_1rbu5pd_135 ._tab_1rbu5pd_13{
150
- margin-left:16px
151
- }
152
- }
153
- ._innerOffsetL_1rbu5pd_143 ._tab_1rbu5pd_13{
154
- margin-left:32px;
155
- }
156
- @media screen and (max-width: 640px){
157
- ._innerOffsetL_1rbu5pd_143 ._tab_1rbu5pd_13{
158
- margin-left:24px
303
+ ._tab_xv3erh_36:hover{
304
+ 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));
159
305
  }
306
+ ._tab_xv3erh_36:hover:after{
307
+ height:1px;
308
+
309
+ 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));
160
310
  }
161
- ._light_1rbu5pd_31 ._tab_1rbu5pd_13{
162
- color:rgba(25,25,28,0.7);
163
- }
164
- ._dark_1rbu5pd_35 ._tab_1rbu5pd_13{
165
- color:rgba(255,255,255,0.7);
166
- }
167
- ._light_1rbu5pd_31 ._tab_1rbu5pd_13._short_1rbu5pd_159{
168
- -webkit-box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
169
- box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
170
- }
171
- ._dark_1rbu5pd_35 ._tab_1rbu5pd_13._short_1rbu5pd_159{
172
- -webkit-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
173
- box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
174
- }
175
- ._tab_1rbu5pd_13._selected_1rbu5pd_167{
311
+ ._tab_xv3erh_36._selected_xv3erh_154{
176
312
  z-index:1;
177
313
 
178
314
  cursor:default;
179
315
 
316
+ color:var(--_rs-tab-list-tab-selected-color);
317
+
180
318
  -webkit-transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
181
319
 
182
320
  transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
183
321
  }
184
- ._tab_1rbu5pd_13._selected_1rbu5pd_167:after{
322
+ ._tab_xv3erh_36._selected_xv3erh_154:after{
185
323
  height:2px;
186
324
 
325
+ background-color:var(--_rs-tab-list-indicator-background);
326
+
187
327
  -webkit-transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
188
328
 
189
329
  transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
190
330
  }
191
- ._light_1rbu5pd_31 ._tab_1rbu5pd_13:hover{
192
- color:#19191C;
193
- }
194
- ._light_1rbu5pd_31 ._tab_1rbu5pd_13:hover:after{
195
- background-color:#19191C;
196
- }
197
- ._dark_1rbu5pd_35 ._tab_1rbu5pd_13:hover{
198
- color:#FFFFFF;
199
- }
200
- ._dark_1rbu5pd_35 ._tab_1rbu5pd_13:hover:after{
201
- background-color:#FFFFFF;
202
- }
203
- ._light_1rbu5pd_31._rock_1rbu5pd_39 ._tab_1rbu5pd_13._selected_1rbu5pd_167{
204
- color:#19191C;
205
- }
206
- ._light_1rbu5pd_31._rock_1rbu5pd_39 ._tab_1rbu5pd_13._selected_1rbu5pd_167:after{
207
- background-color:#19191C;
208
- }
209
- ._dark_1rbu5pd_35._rock_1rbu5pd_39 ._tab_1rbu5pd_13._selected_1rbu5pd_167{
210
- color:#FFFFFF;
211
- }
212
- ._dark_1rbu5pd_35._rock_1rbu5pd_39 ._tab_1rbu5pd_13._selected_1rbu5pd_167:after{
213
- background-color:#FFFFFF;
214
- }
215
- ._light_1rbu5pd_31._classic_1rbu5pd_31 ._tab_1rbu5pd_13._selected_1rbu5pd_167{
216
- color:#6B57FF;
217
- color:var(--rs-color-primary-light-theme, #6B57FF);
218
- }
219
- ._light_1rbu5pd_31._classic_1rbu5pd_31 ._tab_1rbu5pd_13._selected_1rbu5pd_167:after{
220
- background-color:#6B57FF;
221
- background-color:var(--rs-color-primary-light-theme, #6B57FF);
222
- }
223
- ._dark_1rbu5pd_35._classic_1rbu5pd_31 ._tab_1rbu5pd_13._selected_1rbu5pd_167{
224
- color:#8473FF;
225
- color:var(--rs-color-primary-dark-theme, #8473FF);
226
- }
227
- ._dark_1rbu5pd_35._classic_1rbu5pd_31 ._tab_1rbu5pd_13._selected_1rbu5pd_167:after{
228
- background-color:#8473FF;
229
- background-color:var(--rs-color-primary-dark-theme, #8473FF);
230
- }
231
- ._light_1rbu5pd_31 ._tab_1rbu5pd_13:focus[data-focus-method='key']{
232
- -webkit-box-shadow:inset #8979ff 0 -4px 0 0, inset #8979ff 0 4px 0 0, #8979ff -4px 0 0 0, #8979ff 4px 0 0 0;
233
- -webkit-box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 -4px 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) -4px 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
234
- box-shadow:inset #8979ff 0 -4px 0 0, inset #8979ff 0 4px 0 0, #8979ff -4px 0 0 0, #8979ff 4px 0 0 0;
235
- box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 -4px 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) -4px 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
331
+ ._tab_xv3erh_36:focus[data-focus-method='key']{
332
+ -webkit-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;
333
+ 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;
236
334
  }
237
- ._light_1rbu5pd_31 ._tab_1rbu5pd_13:focus[data-focus-method='key']:after{
238
- opacity:0;
239
- }
240
- ._dark_1rbu5pd_35 ._tab_1rbu5pd_13:focus[data-focus-method='key']{
241
- -webkit-box-shadow:inset #6f61d2 0 -4px 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 -4px 0 0 0, #6f61d2 4px 0 0 0;
242
- -webkit-box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 -4px 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) -4px 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
243
- box-shadow:inset #6f61d2 0 -4px 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 -4px 0 0 0, #6f61d2 4px 0 0 0;
244
- box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 -4px 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) -4px 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
245
- }
246
- ._dark_1rbu5pd_35 ._tab_1rbu5pd_13:focus[data-focus-method='key']:after{
247
- opacity:0;
248
- }
249
- ._innerOffsetL_1rbu5pd_143 ._tab_1rbu5pd_13:first-child,
250
- ._innerOffsetM_1rbu5pd_135 ._tab_1rbu5pd_13:first-child{
335
+ ._tab_xv3erh_36:first-child{
251
336
  margin-left:0;
252
337
  }
253
- @media screen and (max-width: 640px){
254
- ._innerOffsetL_1rbu5pd_143 ._tab_1rbu5pd_13:first-child,
255
- ._innerOffsetM_1rbu5pd_135 ._tab_1rbu5pd_13:first-child{
256
- margin-left:0
257
- }
258
- }
259
- ._icon_1rbu5pd_269{
260
- -webkit-box-flex:0;
261
- -ms-flex:0 0;
262
- flex:0 0;
263
- -ms-flex-preferred-size:auto;
264
- flex-basis:auto;
265
- }
266
- ._sizeM_1rbu5pd_125 ._icon_1rbu5pd_269{
267
- width:24px;
268
- height:24px;
269
- }
270
- ._sizeL_1rbu5pd_130 ._icon_1rbu5pd_269{
271
- width:28px;
272
- height:28px;
273
- }
274
- ._sizeM_1rbu5pd_125 ._icon_1rbu5pd_269._iconLeft_1rbu5pd_283{
275
- margin-right:4px;
276
- }
277
- ._sizeL_1rbu5pd_130 ._icon_1rbu5pd_269._iconLeft_1rbu5pd_283{
278
- margin-right:8px;
279
- }
280
- ._sizeM_1rbu5pd_125 ._icon_1rbu5pd_269._iconRight_1rbu5pd_291{
281
- margin-left:4px;
282
- }
283
- ._sizeL_1rbu5pd_130 ._icon_1rbu5pd_269._iconRight_1rbu5pd_291{
284
- margin-left:8px;
338
+ ._tab_xv3erh_36 ._icon_xv3erh_61{
339
+ -webkit-box-flex:0;
340
+ -ms-flex:0 0;
341
+ flex:0 0;
342
+ -ms-flex-preferred-size:auto;
343
+ flex-basis:auto;
344
+
345
+ width:auto;
346
+ height:var(--_rs-tab-list-icon-size);
285
347
  }
286
348
 
287
- ._wrapper_109e982_4{
349
+ ._light_1ktpczi_9{
350
+ --rs-theme-dark:0;
351
+ }
352
+ ._dark_1ktpczi_12{
353
+ --rs-theme-dark:1;
354
+ }
355
+ ._wrapper_1ktpczi_16{
356
+ --_rs-theme-dark:var(
357
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
358
+ var(--rs-theme-dark, 0)
359
+ );
360
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
361
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
362
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
288
363
  position:relative;
289
364
 
290
365
  display:-webkit-box;
@@ -293,7 +368,7 @@
293
368
 
294
369
  display:flex;
295
370
  }
296
- ._scrollable_109e982_10{
371
+ ._scrollable_1ktpczi_23{
297
372
  display:-webkit-box;
298
373
  display:-ms-flexbox;
299
374
  display:flex;
@@ -302,7 +377,7 @@
302
377
  margin:-4px;
303
378
  padding:4px;
304
379
  }
305
- ._scrollable_109e982_10::after{
380
+ ._scrollable_1ktpczi_23::after{
306
381
  display:block;
307
382
 
308
383
  height:100%;
@@ -311,15 +386,15 @@
311
386
 
312
387
  content:'';
313
388
  }
314
- ._scrollable_109e982_10 {
389
+ ._scrollable_1ktpczi_23 {
315
390
 
316
391
  -ms-overflow-style:none;
317
392
  scrollbar-width:none;
318
393
  }
319
- ._scrollable_109e982_10::-webkit-scrollbar{
394
+ ._scrollable_1ktpczi_23::-webkit-scrollbar{
320
395
  display:none;
321
396
  }
322
- ._arrow_109e982_39{
397
+ ._arrow_1ktpczi_52{
323
398
  position:absolute;
324
399
  z-index:2;
325
400
  top:50%;
@@ -339,6 +414,7 @@
339
414
 
340
415
  pointer-events:none;
341
416
 
417
+ color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
342
418
  background-color:transparent;
343
419
 
344
420
  -webkit-transition:opacity 0.15s ease-out;
@@ -347,13 +423,7 @@
347
423
  -webkit-transform:translateY(-50%);
348
424
  transform:translateY(-50%);
349
425
  }
350
- ._light_109e982_58 ._arrow_109e982_39{
351
- color:#FFFFFF;
352
- }
353
- ._dark_109e982_61 ._arrow_109e982_39{
354
- color:#19191C;
355
- }
356
- ._arrow_109e982_39._shown_109e982_65{
426
+ ._arrow_1ktpczi_52._shown_1ktpczi_72{
357
427
  opacity:1;
358
428
 
359
429
  pointer-events:auto;
@@ -362,13 +432,13 @@
362
432
 
363
433
  transition:opacity 0.15s ease-in;
364
434
  }
365
- ._arrow_109e982_39._arrowLeft_109e982_73{
435
+ ._arrow_1ktpczi_52._arrowLeft_1ktpczi_80{
366
436
  left:-5px;
367
437
  }
368
- ._arrow_109e982_39._arrowRight_109e982_78{
438
+ ._arrow_1ktpczi_52._arrowRight_1ktpczi_85{
369
439
  right:-5px;
370
440
  }
371
- ._withLeftArrow_109e982_84{
441
+ ._withLeftArrow_1ktpczi_91{
372
442
  -webkit-mask-image:-webkit-gradient(
373
443
  linear,
374
444
  left top, right top,
@@ -396,7 +466,7 @@
396
466
  black 56px
397
467
  );
398
468
  }
399
- ._withRightArrow_109e982_93{
469
+ ._withRightArrow_1ktpczi_100{
400
470
  -webkit-mask-image:-webkit-gradient(
401
471
  linear,
402
472
  right top, left top,
@@ -424,7 +494,7 @@
424
494
  black 56px
425
495
  );
426
496
  }
427
- ._withLeftArrow_109e982_84._withRightArrow_109e982_93{
497
+ ._withLeftArrow_1ktpczi_91._withRightArrow_1ktpczi_100{
428
498
  -webkit-mask-image:-webkit-gradient(
429
499
  linear,
430
500
  left top, right top,
@@ -464,18 +534,31 @@
464
534
  rgba(0, 0, 0, 0) 100%
465
535
  );
466
536
  }
467
- ._arrowButton_109e982_114{
537
+ ._arrowButton_1ktpczi_121{
468
538
  cursor:pointer;
469
539
  }
470
540
 
471
- ._separator_1xten83_3{
541
+ ._light_10x2oue_4{
542
+ --rs-theme-dark:0;
543
+ }
544
+ ._dark_10x2oue_7{
545
+ --rs-theme-dark:1;
546
+ }
547
+ ._separator_10x2oue_11{
548
+ --_rs-theme-dark:var(
549
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
550
+ var(--rs-theme-dark, 0)
551
+ );
552
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
553
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
554
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
555
+
472
556
  position:relative;
473
557
  z-index:2;
474
558
 
475
559
  width:100%;
476
560
  }
477
-
478
- ._separator_1xten83_3:after{
561
+ ._separator_10x2oue_11:after{
479
562
  position:absolute;
480
563
  right:0;
481
564
  bottom:0;
@@ -484,10 +567,9 @@
484
567
  height:1px;
485
568
 
486
569
  content:'';
487
- }
488
- ._light_1xten83_22:after{
489
- background-color:rgba(25,25,28,0.3);
490
- }
491
- ._dark_1xten83_28:after{
492
- background-color:rgba(255,255,255,0.4);
570
+
571
+ background-color:rgba(
572
+ 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),
573
+ calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
574
+ );
493
575
  }
@@ -1,6 +1,6 @@
1
1
  var styles = {
2
- "separator": "_separator_1xten83_3",
3
- "light": "_light_1xten83_22",
4
- "dark": "_dark_1xten83_28"
2
+ "light": "_light_10x2oue_4",
3
+ "dark": "_dark_10x2oue_7",
4
+ "separator": "_separator_10x2oue_11"
5
5
  };
6
6
  export { styles as default };
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export declare type TabListValueType = string | number | symbol | {};
3
3
  export declare type TabListContextType = {
4
- short?: boolean;
5
4
  onChange: (value: TabListValueType) => void;
6
5
  selectedId?: number;
7
6
  };
@@ -1,6 +1,5 @@
1
1
  import { createContext, useContext } from 'react';
2
2
  var TabListContext = /*#__PURE__*/createContext({
3
- short: false,
4
3
  // eslint-disable-next-line @typescript-eslint/no-empty-function
5
4
  onChange: function onChange() {},
6
5
  selectedId: 0
@@ -1,21 +1,18 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_1rbu5pd_9",
3
- "tabsContainer": "_tabsContainer_1rbu5pd_13",
4
- "indicator": "_indicator_1rbu5pd_19",
5
- "light": "_light_1rbu5pd_31",
6
- "classic": "_classic_1rbu5pd_31",
7
- "dark": "_dark_1rbu5pd_35",
8
- "rock": "_rock_1rbu5pd_39",
9
- "tab": "_tab_1rbu5pd_13",
10
- "sizeM": "_sizeM_1rbu5pd_125",
11
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1rbu5pd_1",
12
- "sizeL": "_sizeL_1rbu5pd_130",
13
- "innerOffsetM": "_innerOffsetM_1rbu5pd_135",
14
- "innerOffsetL": "_innerOffsetL_1rbu5pd_143",
15
- "short": "_short_1rbu5pd_159",
16
- "selected": "_selected_1rbu5pd_167",
17
- "icon": "_icon_1rbu5pd_269",
18
- "iconLeft": "_iconLeft_1rbu5pd_283",
19
- "iconRight": "_iconRight_1rbu5pd_291"
2
+ "light": "_light_xv3erh_7",
3
+ "dark": "_dark_xv3erh_10",
4
+ "sizeM": "_sizeM_xv3erh_14",
5
+ "sizeL": "_sizeL_xv3erh_17",
6
+ "classic": "_classic_xv3erh_21",
7
+ "rock": "_rock_xv3erh_24",
8
+ "sparse": "_sparse_xv3erh_28",
9
+ "short": "_short_xv3erh_32",
10
+ "tabsContainer": "_tabsContainer_xv3erh_36",
11
+ "indicator": "_indicator_xv3erh_46",
12
+ "iconLeft": "_iconLeft_xv3erh_61",
13
+ "iconRight": "_iconRight_xv3erh_64",
14
+ "tab": "_tab_xv3erh_36",
15
+ "selected": "_selected_xv3erh_154",
16
+ "icon": "_icon_xv3erh_61"
20
17
  };
21
18
  export { styles as default };
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
2
  import cn from 'classnames';
3
- import { useTheme } from '@rescui/ui-contexts';
3
+ import { useThemeWithUndefined } from '@rescui/ui-contexts';
4
4
  import styles from './separator.p.module.css.js';
5
5
 
6
6
  var TabSeparator = function TabSeparator(_ref) {
7
7
  var className = _ref.className,
8
8
  themeFromProps = _ref.theme;
9
- var theme = useTheme(themeFromProps);
9
+ var theme = useThemeWithUndefined(themeFromProps);
10
10
  return /*#__PURE__*/React.createElement("div", {
11
11
  className: cn(styles.separator, styles[theme], className)
12
12
  });
package/lib/parts/tab.js CHANGED
@@ -33,8 +33,6 @@ var TabTag = /*#__PURE__*/forwardRef(function (props, ref) {
33
33
  });
34
34
  TabTag.displayName = 'TabTag';
35
35
  var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
36
- var _cn;
37
-
38
36
  var value = _ref.value,
39
37
  className = _ref.className,
40
38
  children = _ref.children,
@@ -48,15 +46,12 @@ var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
48
46
  restProps = _objectWithoutProperties(_ref, _excluded);
49
47
 
50
48
  var _useTabListContext = useTabListContext(),
51
- short = _useTabListContext.short,
52
49
  onChange = _useTabListContext.onChange,
53
50
  selectedId = _useTabListContext.selectedId;
54
51
 
55
52
  var selected = itemId === selectedId;
56
- var isRenderLeftIcon = icon && iconPosition === 'left';
57
- var isRenderRightIcon = icon && iconPosition === 'right';
58
53
  return /*#__PURE__*/React.createElement(TabTag, _objectSpread(_objectSpread({}, restProps), {}, {
59
- className: cn(styles.tab, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.short, short), _cn), className),
54
+ className: cn(styles.tab, selected && styles.selected, iconPosition === 'right' ? styles.iconRight : styles.iconLeft, className),
60
55
  onClick: function onClick(e) {
61
56
  if (_onClick) {
62
57
  _onClick(e);
@@ -78,12 +73,11 @@ var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
78
73
  tabIndex: 0,
79
74
  ref: ref,
80
75
  "data-e2e": e2eId,
81
- "data-test": "tab".concat(selected ? ' tab-selected' : '')
82
- }), isRenderLeftIcon && /*#__PURE__*/cloneElement(icon, {
83
- className: cn(icon.props.className, styles.icon, styles.iconLeft)
84
- }), /*#__PURE__*/React.createElement("div", null, children), isRenderRightIcon && /*#__PURE__*/cloneElement(icon, {
85
- className: cn(icon.props.className, styles.icon, styles.iconRight)
86
- }));
76
+ "data-test": "tab".concat(selected ? ' tab-selected' : ''),
77
+ "data-rs-internal": 'tab-list__tab'
78
+ }), icon && /*#__PURE__*/cloneElement(icon, {
79
+ className: cn(icon.props.className, styles.icon)
80
+ }), /*#__PURE__*/React.createElement("div", null, children));
87
81
  });
88
82
  Tab.displayName = 'Tab';
89
83
  Tab.propTypes = {
@@ -18,7 +18,7 @@ import React from 'react';
18
18
  import cn from 'classnames';
19
19
  import { Button } from '@rescui/button';
20
20
  import { LeftIcon, RightIcon } from '@rescui/icons';
21
- import { useTheme } from '@rescui/ui-contexts';
21
+ import { useThemeWithUndefined } from '@rescui/ui-contexts';
22
22
  import { useScrollableList } from './use-scrollable-list.js';
23
23
  import styles from './with-scroll-arrows.p.module.css.js';
24
24
 
@@ -39,7 +39,7 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
39
39
  e2eId = _ref['data-e2e'],
40
40
  restProps = _objectWithoutProperties(_ref, _excluded);
41
41
 
42
- var theme = useTheme(themeFromProps);
42
+ var theme = useThemeWithUndefined(themeFromProps);
43
43
 
44
44
  var _useScrollableList = useScrollableList({
45
45
  children: children,
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_109e982_4",
3
- "scrollable": "_scrollable_109e982_10",
4
- "arrow": "_arrow_109e982_39",
5
- "light": "_light_109e982_58",
6
- "dark": "_dark_109e982_61",
7
- "shown": "_shown_109e982_65",
8
- "arrowLeft": "_arrowLeft_109e982_73",
9
- "arrowRight": "_arrowRight_109e982_78",
10
- "withLeftArrow": "_withLeftArrow_109e982_84",
11
- "withRightArrow": "_withRightArrow_109e982_93",
12
- "arrowButton": "_arrowButton_109e982_114"
2
+ "light": "_light_1ktpczi_9",
3
+ "dark": "_dark_1ktpczi_12",
4
+ "wrapper": "_wrapper_1ktpczi_16",
5
+ "scrollable": "_scrollable_1ktpczi_23",
6
+ "arrow": "_arrow_1ktpczi_52",
7
+ "shown": "_shown_1ktpczi_72",
8
+ "arrowLeft": "_arrowLeft_1ktpczi_80",
9
+ "arrowRight": "_arrowRight_1ktpczi_85",
10
+ "withLeftArrow": "_withLeftArrow_1ktpczi_91",
11
+ "withRightArrow": "_withRightArrow_1ktpczi_100",
12
+ "arrowButton": "_arrowButton_1ktpczi_121"
13
13
  };
14
14
  export { styles as default };
@@ -0,0 +1,139 @@
1
+ @define-mixin rs-tab-list-size-m{
2
+ &:not(html){
3
+ --_rs-tab-list-tab-vertical-padding:8px;
4
+ --_rs-tab-list-icon-size:24px;
5
+ --_rs-tab-list-icon-offset:4px;
6
+ }
7
+ &:not(html) [data-rs-internal='tab-list__tab']{
8
+ --_rs-typography-letter-spacing:0.0015em;
9
+ --_rs-typography-text-transform:initial;
10
+ --_rs-typography-font-variant-numeric:initial;
11
+ --_rs-typography-font-family:var(
12
+ --rs-font-family-ui,
13
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
14
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
15
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
16
+ );
17
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
18
+ --_rs-typography-font-weight:var(
19
+ --rs-font-weight-regular,
20
+ 400
21
+ );
22
+ --_rs-typography-line-height:var(
23
+ --rs-text-2-line-height,
24
+ 24px
25
+ );
26
+ --_rs-typography-base-color:var(
27
+ --_rs-typography-hardness-color,
28
+ var(
29
+ --rs-color-average,
30
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
31
+ )
32
+ );
33
+ --_rs-typography-text-auto-offset:16px;
34
+ --_rs-typography-ul-list-li-padding-left:22px;
35
+ --_rs-typography-ol-list-li-padding-left:26px;
36
+ --_rs-typography-list-li-margin-top-from-text:16px;
37
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
38
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
39
+ --_rs-typography-link-border-bottom-width-from-text:1px;
40
+ }
41
+ @media screen and (max-width: 640px){
42
+ &:not(html) [data-rs-internal='tab-list__tab']{
43
+ --_rs-typography-list-li-margin-top-from-text:12px;
44
+ }
45
+ }
46
+ }
47
+ @define-mixin rs-tab-list-size-l{
48
+ &:not(html){
49
+ --_rs-tab-list-tab-vertical-padding:12px;
50
+ --_rs-tab-list-icon-size:28px;
51
+ --_rs-tab-list-icon-offset:8px;
52
+ }
53
+ &:not(html) [data-rs-internal='tab-list__tab']{
54
+ --_rs-typography-letter-spacing:normal;
55
+ --_rs-typography-text-transform:initial;
56
+ --_rs-typography-font-variant-numeric:initial;
57
+ --_rs-typography-font-family:var(
58
+ --rs-font-family-ui,
59
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
60
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
61
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
62
+ );
63
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
64
+ --_rs-typography-font-weight:var(
65
+ --rs-font-weight-regular,
66
+ 400
67
+ );
68
+ --_rs-typography-line-height:var(
69
+ --rs-text-1-line-height,
70
+ 28px
71
+ );
72
+ --_rs-typography-base-color:var(
73
+ --_rs-typography-hardness-color,
74
+ var(
75
+ --rs-color-average,
76
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
77
+ )
78
+ );
79
+ --_rs-typography-text-auto-offset:32px;
80
+ --_rs-typography-ul-list-li-padding-left:26px;
81
+ --_rs-typography-ol-list-li-padding-left:32px;
82
+ --_rs-typography-list-li-margin-top-from-text:24px;
83
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
84
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
85
+ --_rs-typography-link-border-bottom-width-from-text:1px;
86
+ }
87
+ @media screen and (max-width: 640px){
88
+ &:not(html) [data-rs-internal='tab-list__tab']{
89
+ --_rs-typography-list-li-margin-top-from-text:16px;
90
+ }
91
+ }
92
+ }
93
+ @define-mixin rs-tab-list-mode-classic{
94
+ &:not(html){
95
+ --_rs-tab-list-indicator-background:var(--_rs-color-primary);
96
+ --_rs-tab-list-tab-selected-color:var(--_rs-color-primary);
97
+ }
98
+ }
99
+ @define-mixin rs-tab-list-mode-rock{
100
+ &:not(html){
101
+ --_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));
102
+ --_rs-tab-list-tab-selected-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));
103
+ }
104
+ }
105
+ @define-mixin rs-tab-list-sparse-true{
106
+ &:not(html){
107
+ --_rs-tab-list-tab-margin-left-or-initial:32px;
108
+ }
109
+ @media screen and (max-width: 640px){
110
+ &:not(html){
111
+ --_rs-tab-list-tab-margin-left-or-initial:24px;
112
+ }
113
+ }
114
+ }
115
+ @define-mixin rs-tab-list-sparse-false{
116
+ &:not(html){
117
+ --_rs-tab-list-tab-margin-left-or-initial:initial;
118
+ }
119
+ }
120
+ @define-mixin rs-tab-list-short-true{
121
+ &:not(html){
122
+ --_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));
123
+ }
124
+ }
125
+ @define-mixin rs-tab-list-short-false{
126
+ &:not(html){
127
+ --_rs-tab-list-tab-box-shadow:initial;
128
+ }
129
+ }
130
+ @define-mixin rs-tab-icon-left{
131
+ &:not(html){
132
+ --_rs-tab-list-tab-flex-direction:row;
133
+ }
134
+ }
135
+ @define-mixin rs-tab-icon-right{
136
+ &:not(html){
137
+ --_rs-tab-list-tab-flex-direction:row-reverse;
138
+ }
139
+ }
@@ -0,0 +1,139 @@
1
+ @define-mixin rs-tab-list-size-m{
2
+ &:not(html){
3
+ --_rs-tab-list-tab-vertical-padding:8px;
4
+ --_rs-tab-list-icon-size:24px;
5
+ --_rs-tab-list-icon-offset:4px;
6
+ }
7
+ &:not(html) [data-rs-internal='tab-list__tab']{
8
+ --_rs-typography-letter-spacing:0.0015em;
9
+ --_rs-typography-text-transform:initial;
10
+ --_rs-typography-font-variant-numeric:initial;
11
+ --_rs-typography-font-family:var(
12
+ --rs-font-family-ui,
13
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
14
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
15
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
16
+ );
17
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
18
+ --_rs-typography-font-weight:var(
19
+ --rs-font-weight-regular,
20
+ 400
21
+ );
22
+ --_rs-typography-line-height:var(
23
+ --rs-text-2-line-height,
24
+ 24px
25
+ );
26
+ --_rs-typography-base-color:var(
27
+ --_rs-typography-hardness-color,
28
+ var(
29
+ --rs-color-average,
30
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
31
+ )
32
+ );
33
+ --_rs-typography-text-auto-offset:16px;
34
+ --_rs-typography-ul-list-li-padding-left:22px;
35
+ --_rs-typography-ol-list-li-padding-left:26px;
36
+ --_rs-typography-list-li-margin-top-from-text:16px;
37
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
38
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
39
+ --_rs-typography-link-border-bottom-width-from-text:1px;
40
+ }
41
+ @media screen and (max-width: 640px){
42
+ &:not(html) [data-rs-internal='tab-list__tab']{
43
+ --_rs-typography-list-li-margin-top-from-text:12px;
44
+ }
45
+ }
46
+ }
47
+ @define-mixin rs-tab-list-size-l{
48
+ &:not(html){
49
+ --_rs-tab-list-tab-vertical-padding:12px;
50
+ --_rs-tab-list-icon-size:28px;
51
+ --_rs-tab-list-icon-offset:8px;
52
+ }
53
+ &:not(html) [data-rs-internal='tab-list__tab']{
54
+ --_rs-typography-letter-spacing:normal;
55
+ --_rs-typography-text-transform:initial;
56
+ --_rs-typography-font-variant-numeric:initial;
57
+ --_rs-typography-font-family:var(
58
+ --rs-font-family-ui,
59
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
60
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
61
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
62
+ );
63
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
64
+ --_rs-typography-font-weight:var(
65
+ --rs-font-weight-regular,
66
+ 400
67
+ );
68
+ --_rs-typography-line-height:var(
69
+ --rs-text-1-line-height,
70
+ 28px
71
+ );
72
+ --_rs-typography-base-color:var(
73
+ --_rs-typography-hardness-color,
74
+ var(
75
+ --rs-color-average,
76
+ rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
77
+ )
78
+ );
79
+ --_rs-typography-text-auto-offset:32px;
80
+ --_rs-typography-ul-list-li-padding-left:26px;
81
+ --_rs-typography-ol-list-li-padding-left:32px;
82
+ --_rs-typography-list-li-margin-top-from-text:24px;
83
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
84
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
85
+ --_rs-typography-link-border-bottom-width-from-text:1px;
86
+ }
87
+ @media screen and (max-width: 640px){
88
+ &:not(html) [data-rs-internal='tab-list__tab']{
89
+ --_rs-typography-list-li-margin-top-from-text:16px;
90
+ }
91
+ }
92
+ }
93
+ @define-mixin rs-tab-list-mode-classic{
94
+ &:not(html){
95
+ --_rs-tab-list-indicator-background:var(--_rs-color-primary);
96
+ --_rs-tab-list-tab-selected-color:var(--_rs-color-primary);
97
+ }
98
+ }
99
+ @define-mixin rs-tab-list-mode-rock{
100
+ &:not(html){
101
+ --_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));
102
+ --_rs-tab-list-tab-selected-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));
103
+ }
104
+ }
105
+ @define-mixin rs-tab-list-sparse-true{
106
+ &:not(html){
107
+ --_rs-tab-list-tab-margin-left-or-initial:32px;
108
+ }
109
+ @media screen and (max-width: 640px){
110
+ &:not(html){
111
+ --_rs-tab-list-tab-margin-left-or-initial:24px;
112
+ }
113
+ }
114
+ }
115
+ @define-mixin rs-tab-list-sparse-false{
116
+ &:not(html){
117
+ --_rs-tab-list-tab-margin-left-or-initial:initial;
118
+ }
119
+ }
120
+ @define-mixin rs-tab-list-short-true{
121
+ &:not(html){
122
+ --_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));
123
+ }
124
+ }
125
+ @define-mixin rs-tab-list-short-false{
126
+ &:not(html){
127
+ --_rs-tab-list-tab-box-shadow:initial;
128
+ }
129
+ }
130
+ @define-mixin rs-tab-icon-left{
131
+ &:not(html){
132
+ --_rs-tab-list-tab-flex-direction:row;
133
+ }
134
+ }
135
+ @define-mixin rs-tab-icon-right{
136
+ &:not(html){
137
+ --_rs-tab-list-tab-flex-direction:row-reverse;
138
+ }
139
+ }
package/lib/tab-list.js CHANGED
@@ -36,12 +36,11 @@ var InnerTabList = function InnerTabList(_ref) {
36
36
  });
37
37
  return /*#__PURE__*/React.createElement(TabListContext.Provider, {
38
38
  value: {
39
- short: short,
40
39
  onChange: onChange,
41
40
  selectedId: selectedId
42
41
  }
43
42
  }, /*#__PURE__*/React.createElement("div", {
44
- className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, className),
43
+ className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, className),
45
44
  "data-e2e": e2eId ? "".concat(e2eId, "__tabs-container") : null,
46
45
  "data-test": 'tab-list',
47
46
  ref: containerRef
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tab-list",
3
- "version": "0.11.11",
3
+ "version": "0.12.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -16,8 +16,8 @@
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.14.0",
18
18
  "@juggle/resize-observer": "3.3.0",
19
- "@rescui/button": "^0.14.1",
20
- "@rescui/icons": "^0.15.2",
19
+ "@rescui/button": "^0.15.0",
20
+ "@rescui/icons": "^0.16.0",
21
21
  "classnames": "^2.2.6",
22
22
  "core-js": "^3.9.1"
23
23
  },
@@ -27,14 +27,15 @@
27
27
  "react": ">=16.8.0 <19"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "^0.1.10",
31
- "@rescui/postcss-preset-library": "^0.1.1",
32
- "@rescui/scripts": "^0.2.2",
33
- "@rescui/typography": "^0.14.0",
30
+ "@rescui/colors": "^0.2.0",
31
+ "@rescui/postcss-preset-library": "^0.2.0",
32
+ "@rescui/scripts": "^0.3.0",
33
+ "@rescui/typography": "^0.16.0",
34
34
  "@rescui/visual-regression": "^0.1.1"
35
35
  },
36
36
  "scripts": {
37
- "build": "rescui-scripts build"
37
+ "build": "rescui-scripts build && yarn run build-pcss-api",
38
+ "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
39
  },
39
- "gitHead": "3be2e2a867635e8ebcb7fbbdfb8ad65a0700a61f"
40
+ "gitHead": "51da8a7188f4c558c563065a4ff4ef5c8e74994c"
40
41
  }