@rescui/checkbox 0.11.1 → 0.11.2

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/README.md +3 -1
  2. package/lib/index.css +69 -69
  3. package/lib/parts/checkbox-list.p.module.css.js +13 -13
  4. package/lib/parts/checkbox.p.module.css.js +22 -22
  5. package/llm/components/checkbox.md +437 -0
  6. package/llm/index.md +2 -0
  7. package/package.json +7 -6
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
1
  # Checkbox
2
2
 
3
- * [Usage examples](./docs/demo.md)
3
+ ## LLM
4
+
5
+ To get the docs for the LLM, check out [this index](./llm/index.md).
package/lib/index.css CHANGED
@@ -1,19 +1,19 @@
1
- ._themeLight_1rtxhkq_8{
1
+ ._themeLight_vza3at_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_1rtxhkq_11{
4
+ ._themeDark_vza3at_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._checkboxSizeS_1rtxhkq_15{
7
+ ._checkboxSizeS_vza3at_15{
8
8
  --_rs-checkbox-parts-offset:4px;
9
9
  }
10
- ._checkboxSizeM_1rtxhkq_18{
10
+ ._checkboxSizeM_vza3at_18{
11
11
  --_rs-checkbox-parts-offset:8px;
12
12
  }
13
- ._checkboxSizeL_1rtxhkq_21{
13
+ ._checkboxSizeL_vza3at_21{
14
14
  --_rs-checkbox-parts-offset:8px;
15
15
  }
16
- ._sizeS_1rtxhkq_25{
16
+ ._sizeS_vza3at_25{
17
17
  --_rs-checkbox-ci-mark-s-display:initial;
18
18
  --_rs-checkbox-ci-mark-m-display:none;
19
19
  --_rs-checkbox-ci-mark-l-display:none;
@@ -21,7 +21,7 @@
21
21
  --_rs-checkbox-ci-shadow-size:3px;
22
22
  --_rs-checkbox-ci-indeterminate-icon-border-width:6px 3px;
23
23
  }
24
- ._sizeM_1rtxhkq_28{
24
+ ._sizeM_vza3at_28{
25
25
  --_rs-checkbox-ci-mark-s-display:none;
26
26
  --_rs-checkbox-ci-mark-m-display:initial;
27
27
  --_rs-checkbox-ci-mark-l-display:none;
@@ -29,7 +29,7 @@
29
29
  --_rs-checkbox-ci-shadow-size:3px;
30
30
  --_rs-checkbox-ci-indeterminate-icon-border-width:8px 3px;
31
31
  }
32
- ._sizeL_1rtxhkq_31{
32
+ ._sizeL_vza3at_31{
33
33
  --_rs-checkbox-ci-mark-s-display:none;
34
34
  --_rs-checkbox-ci-mark-m-display:none;
35
35
  --_rs-checkbox-ci-mark-l-display:initial;
@@ -37,14 +37,14 @@
37
37
  --_rs-checkbox-ci-shadow-size:4px;
38
38
  --_rs-checkbox-ci-indeterminate-icon-border-width:9px 3px;
39
39
  }
40
- ._classic_1rtxhkq_35{
40
+ ._classic_vza3at_35{
41
41
  --_rs-checkbox-ci-mark-color:#FFFFFF;
42
42
  --_rs-checkbox-ci-indeterminate-icon-border-color:var(--_rs-color-primary);
43
43
  --_rs-checkbox-ci-indeterminate-icon-background-color:#FFFFFF;
44
44
  --_rs-checkbox-ci-checked-icon-border-color:var(--_rs-color-primary);
45
45
  --_rs-checkbox-ci-hover-icon-box-shadow:var(--_rs-color-primary-t-fog);
46
46
  }
47
- ._rock_1rtxhkq_38{
47
+ ._rock_vza3at_38{
48
48
  --_rs-checkbox-ci-mark-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));
49
49
  --_rs-checkbox-ci-indeterminate-icon-border-color:rgb(
50
50
  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)
@@ -60,7 +60,7 @@
60
60
  0.1
61
61
  );
62
62
  }
63
- ._checkbox_1rtxhkq_15{
63
+ ._checkbox_vza3at_15{
64
64
  --_rs-theme-dark:var(
65
65
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
66
66
  var(--rs-theme-dark, 0)
@@ -70,7 +70,7 @@
70
70
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
71
71
  }
72
72
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
73
- ._checkbox_1rtxhkq_15{
73
+ ._checkbox_vza3at_15{
74
74
  --_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)));
75
75
  --_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)));
76
76
  --_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)));
@@ -79,7 +79,7 @@
79
79
  }
80
80
  }
81
81
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
82
- ._checkbox_1rtxhkq_15{
82
+ ._checkbox_vza3at_15{
83
83
  --_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);
84
84
  --_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));
85
85
  --_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));
@@ -88,18 +88,18 @@
88
88
  }
89
89
  }
90
90
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
91
- ._checkbox_1rtxhkq_15{
91
+ ._checkbox_vza3at_15{
92
92
  --_rs-color-danger:color-mix(in srgb, #CC1400 calc(100%*var(--_rs-theme-light-coefficient, 1)), #FF6553 calc(100%*var(--_rs-theme-dark-coefficient, 0)));
93
93
  --_rs-color-danger-bg:color-mix(in srgb, rgba(204,20,0, 0.2) calc(100%*var(--_rs-theme-light-coefficient, 1)), rgba(255,101,83, 0.2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
94
94
  }
95
95
  }
96
96
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
97
- ._checkbox_1rtxhkq_15{
97
+ ._checkbox_vza3at_15{
98
98
  --_rs-color-danger:rgb(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83));
99
99
  --_rs-color-danger-bg:rgba(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83), 0.2);
100
100
  }
101
101
  }
102
- ._checkbox_1rtxhkq_15 {
102
+ ._checkbox_vza3at_15 {
103
103
 
104
104
  position:relative;
105
105
 
@@ -114,7 +114,7 @@
114
114
 
115
115
  text-align:left;
116
116
  }
117
- ._input_1rtxhkq_65{
117
+ ._input_vza3at_65{
118
118
  position:absolute;
119
119
  z-index:-1;
120
120
 
@@ -124,7 +124,7 @@
124
124
 
125
125
  border:0;
126
126
  }
127
- ._icon_1rtxhkq_76{
127
+ ._icon_vza3at_76{
128
128
  display:inline-block;
129
129
  float:left;
130
130
 
@@ -140,17 +140,17 @@
140
140
 
141
141
  transition:border-width var(--rs-transition-function, ease-out) 100ms, border-color var(--rs-transition-function, ease-out) 100ms;
142
142
  }
143
- ._enabled_1rtxhkq_93 ._icon_1rtxhkq_76{
143
+ ._enabled_vza3at_93 ._icon_vza3at_76{
144
144
  cursor:pointer;
145
145
  }
146
- ._indeterminate_1rtxhkq_97 ._icon_1rtxhkq_76{
146
+ ._indeterminate_vza3at_97 ._icon_vza3at_76{
147
147
  border-width:var(--_rs-checkbox-ci-indeterminate-icon-border-width);
148
148
  }
149
- ._input_1rtxhkq_65:checked + ._icon_1rtxhkq_76{
149
+ ._input_vza3at_65:checked + ._icon_vza3at_76{
150
150
  border-width:calc(var(--_rs-checkbox-ci-size)/2);
151
151
  }
152
- ._disabled_1rtxhkq_105 ._icon_1rtxhkq_76._icon_1rtxhkq_76,
153
- ._input_1rtxhkq_65:disabled + ._icon_1rtxhkq_76{
152
+ ._disabled_vza3at_105 ._icon_vza3at_76._icon_vza3at_76,
153
+ ._input_vza3at_65:disabled + ._icon_vza3at_76{
154
154
  border-color:rgb(calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(187 - var(--_rs-theme-dark-coefficient, 0)*91));
155
155
 
156
156
  cursor:not-allowed;
@@ -158,27 +158,27 @@
158
158
 
159
159
  background:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
160
160
  }
161
- ._input_1rtxhkq_65:hover + ._icon_1rtxhkq_76,
162
- ._enabled_1rtxhkq_93:hover ._icon_1rtxhkq_76{
161
+ ._input_vza3at_65:hover + ._icon_vza3at_76,
162
+ ._enabled_vza3at_93:hover ._icon_vza3at_76{
163
163
  background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*182));
164
164
  }
165
- ._enabled_1rtxhkq_93._indeterminate_1rtxhkq_97 ._icon_1rtxhkq_76,
166
- ._enabled_1rtxhkq_93._indeterminate_1rtxhkq_97:hover ._icon_1rtxhkq_76,
167
- ._enabled_1rtxhkq_93._indeterminate_1rtxhkq_97 ._input_1rtxhkq_65:hover + ._icon_1rtxhkq_76{
165
+ ._enabled_vza3at_93._indeterminate_vza3at_97 ._icon_vza3at_76,
166
+ ._enabled_vza3at_93._indeterminate_vza3at_97:hover ._icon_vza3at_76,
167
+ ._enabled_vza3at_93._indeterminate_vza3at_97 ._input_vza3at_65:hover + ._icon_vza3at_76{
168
168
  border-color:var(--_rs-checkbox-ci-indeterminate-icon-border-color);
169
169
 
170
170
  background-color:var(
171
171
  --_rs-checkbox-ci-indeterminate-icon-background-color
172
172
  );
173
173
  }
174
- ._enabled_1rtxhkq_93 ._input_1rtxhkq_65:checked + ._icon_1rtxhkq_76._icon_1rtxhkq_76{
174
+ ._enabled_vza3at_93 ._input_vza3at_65:checked + ._icon_vza3at_76._icon_vza3at_76{
175
175
  border-color:var(--_rs-checkbox-ci-checked-icon-border-color);
176
176
  }
177
- ._error_1rtxhkq_134 ._icon_1rtxhkq_76._icon_1rtxhkq_76._icon_1rtxhkq_76._icon_1rtxhkq_76,
178
- ._input_1rtxhkq_65:invalid + ._icon_1rtxhkq_76._icon_1rtxhkq_76._icon_1rtxhkq_76{
177
+ ._error_vza3at_134 ._icon_vza3at_76._icon_vza3at_76._icon_vza3at_76._icon_vza3at_76,
178
+ ._input_vza3at_65:invalid + ._icon_vza3at_76._icon_vza3at_76._icon_vza3at_76{
179
179
  border-color:var(--_rs-color-danger);
180
180
  }
181
- ._icon_1rtxhkq_76::after{
181
+ ._icon_vza3at_76::after{
182
182
  position:absolute;
183
183
  top:var(--_rs-checkbox-ci-shadow-size);
184
184
  right:var(--_rs-checkbox-ci-shadow-size);
@@ -187,15 +187,15 @@
187
187
 
188
188
  content:'';
189
189
  }
190
- ._enabled_1rtxhkq_93:hover > ._icon_1rtxhkq_76::after,
191
- label:hover ._enabled_1rtxhkq_93 > ._icon_1rtxhkq_76::after,
192
- ._enabled_1rtxhkq_93 ._input_1rtxhkq_65:active + ._icon_1rtxhkq_76::after{
190
+ ._enabled_vza3at_93:hover > ._icon_vza3at_76::after,
191
+ label:hover ._enabled_vza3at_93 > ._icon_vza3at_76::after,
192
+ ._enabled_vza3at_93 ._input_vza3at_65:active + ._icon_vza3at_76::after{
193
193
  box-shadow:0 0 0 var(--_rs-checkbox-ci-shadow-size) var(--_rs-checkbox-ci-hover-icon-box-shadow);
194
194
  }
195
- ._enabled_1rtxhkq_93 ._input_1rtxhkq_65:focus[data-focus-method='key'] + ._icon_1rtxhkq_76::after{
195
+ ._enabled_vza3at_93 ._input_vza3at_65:focus[data-focus-method='key'] + ._icon_vza3at_76::after{
196
196
  box-shadow:0 0 0 1px rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)), 0 0 0 var(--_rs-checkbox-ci-shadow-size) var(--_rs-color-primary-t-dim);
197
197
  }
198
- ._checkmark_1rtxhkq_161{
198
+ ._checkmark_vza3at_161{
199
199
  position:absolute;
200
200
  top:var(--_rs-checkbox-ci-shadow-size);
201
201
  left:var(--_rs-checkbox-ci-shadow-size);
@@ -206,36 +206,36 @@
206
206
  height:var(--_rs-checkbox-ci-size);
207
207
  fill:currentColor;
208
208
  }
209
- ._enabled_1rtxhkq_93 ._checkmark_1rtxhkq_161{
209
+ ._enabled_vza3at_93 ._checkmark_vza3at_161{
210
210
  color:var(--_rs-checkbox-ci-mark-color);
211
211
  }
212
- ._disabled_1rtxhkq_105 ._checkmark_1rtxhkq_161,
213
- ._input_1rtxhkq_65:disabled + ._icon_1rtxhkq_76 > ._checkmark_1rtxhkq_161{
212
+ ._disabled_vza3at_105 ._checkmark_vza3at_161,
213
+ ._input_vza3at_65:disabled + ._icon_vza3at_76 > ._checkmark_vza3at_161{
214
214
  color:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
215
215
  }
216
- ._input_1rtxhkq_65:checked + ._icon_1rtxhkq_76 > ._checkmark_1rtxhkq_161{
216
+ ._input_vza3at_65:checked + ._icon_vza3at_76 > ._checkmark_vza3at_161{
217
217
  display:block;
218
218
  }
219
- ._markS_1rtxhkq_186{
219
+ ._markS_vza3at_186{
220
220
  display:var(--_rs-checkbox-ci-mark-s-display);
221
221
  }
222
- ._markM_1rtxhkq_189{
222
+ ._markM_vza3at_189{
223
223
  display:var(--_rs-checkbox-ci-mark-m-display);
224
224
  }
225
- ._markL_1rtxhkq_192{
225
+ ._markL_vza3at_192{
226
226
  display:var(--_rs-checkbox-ci-mark-l-display);
227
227
  }
228
- ._errorMessage_1rtxhkq_196{
228
+ ._errorMessage_vza3at_196{
229
229
  margin-top:var(--_rs-checkbox-parts-offset);
230
230
  }
231
231
 
232
- ._themeLight_1c42gib_6{
232
+ ._themeLight_1985ni4_6{
233
233
  --rs-theme-dark:0;
234
234
  }
235
- ._themeDark_1c42gib_9{
235
+ ._themeDark_1985ni4_9{
236
236
  --rs-theme-dark:1;
237
237
  }
238
- ._container_1c42gib_13{
238
+ ._container_1985ni4_13{
239
239
  --_rs-theme-dark:var(
240
240
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
241
241
  var(--rs-theme-dark, 0)
@@ -245,7 +245,7 @@
245
245
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
246
246
  }
247
247
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
248
- ._container_1c42gib_13{
248
+ ._container_1985ni4_13{
249
249
  --_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)));
250
250
  --_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)));
251
251
  --_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)));
@@ -254,7 +254,7 @@
254
254
  }
255
255
  }
256
256
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
257
- ._container_1c42gib_13{
257
+ ._container_1985ni4_13{
258
258
  --_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);
259
259
  --_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));
260
260
  --_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));
@@ -262,11 +262,11 @@
262
262
  --_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));
263
263
  }
264
264
  }
265
- ._sizeS_1c42gib_18{
265
+ ._sizeS_1985ni4_18{
266
266
  --_rs-checkbox-list-label-offset:4px;
267
267
  --_rs-checkbox-list-left-offset:28px;
268
268
  }
269
- ._sizeS_1c42gib_18 [data-rs-internal='checkbox-list__label']{
269
+ ._sizeS_1985ni4_18 [data-rs-internal='checkbox-list__label']{
270
270
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
271
271
  --_rs-typography-text-transform:initial;
272
272
  --_rs-typography-font-variant-numeric:initial;
@@ -301,7 +301,7 @@
301
301
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
302
302
  --_rs-typography-link-border-bottom-width-from-text:1px;
303
303
  }
304
- ._sizeS_1c42gib_18 [data-rs-internal='checkbox-list__bold-label']{
304
+ ._sizeS_1985ni4_18 [data-rs-internal='checkbox-list__bold-label']{
305
305
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
306
306
  --_rs-typography-text-transform:initial;
307
307
  --_rs-typography-font-variant-numeric:initial;
@@ -333,11 +333,11 @@
333
333
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
334
334
  --_rs-typography-link-border-bottom-width-from-text:2px;
335
335
  }
336
- ._sizeM_1c42gib_21{
336
+ ._sizeM_1985ni4_21{
337
337
  --_rs-checkbox-list-label-offset:8px;
338
338
  --_rs-checkbox-list-left-offset:32px;
339
339
  }
340
- ._sizeM_1c42gib_21 [data-rs-internal='checkbox-list__label']{
340
+ ._sizeM_1985ni4_21 [data-rs-internal='checkbox-list__label']{
341
341
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
342
342
  --_rs-typography-text-transform:initial;
343
343
  --_rs-typography-font-variant-numeric:initial;
@@ -376,11 +376,11 @@
376
376
  --_rs-typography-link-border-bottom-width-from-text:1px;
377
377
  }
378
378
  @media screen and (max-width: 640px){
379
- ._sizeM_1c42gib_21 [data-rs-internal='checkbox-list__label']{
379
+ ._sizeM_1985ni4_21 [data-rs-internal='checkbox-list__label']{
380
380
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
381
381
  }
382
382
  }
383
- ._sizeM_1c42gib_21 [data-rs-internal='checkbox-list__bold-label']{
383
+ ._sizeM_1985ni4_21 [data-rs-internal='checkbox-list__bold-label']{
384
384
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
385
385
  --_rs-typography-text-transform:initial;
386
386
  --_rs-typography-font-variant-numeric:initial;
@@ -412,11 +412,11 @@
412
412
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
413
413
  --_rs-typography-link-border-bottom-width-from-text:2px;
414
414
  }
415
- ._sizeL_1c42gib_24{
415
+ ._sizeL_1985ni4_24{
416
416
  --_rs-checkbox-list-label-offset:12px;
417
417
  --_rs-checkbox-list-left-offset:44px;
418
418
  }
419
- ._sizeL_1c42gib_24 [data-rs-internal='checkbox-list__label']{
419
+ ._sizeL_1985ni4_24 [data-rs-internal='checkbox-list__label']{
420
420
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
421
421
  --_rs-typography-text-transform:initial;
422
422
  --_rs-typography-font-variant-numeric:initial;
@@ -455,11 +455,11 @@
455
455
  --_rs-typography-link-border-bottom-width-from-text:1px;
456
456
  }
457
457
  @media screen and (max-width: 640px){
458
- ._sizeL_1c42gib_24 [data-rs-internal='checkbox-list__label']{
458
+ ._sizeL_1985ni4_24 [data-rs-internal='checkbox-list__label']{
459
459
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
460
460
  }
461
461
  }
462
- ._sizeL_1c42gib_24 [data-rs-internal='checkbox-list__bold-label']{
462
+ ._sizeL_1985ni4_24 [data-rs-internal='checkbox-list__bold-label']{
463
463
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
464
464
  --_rs-typography-text-transform:initial;
465
465
  --_rs-typography-font-variant-numeric:initial;
@@ -491,10 +491,10 @@
491
491
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
492
492
  --_rs-typography-link-border-bottom-width-from-text:2px;
493
493
  }
494
- ._inner_1c42gib_28{
494
+ ._inner_1985ni4_28{
495
495
  --rs-out-checkbox-list-left-offset:var(--_rs-checkbox-list-left-offset);
496
496
  }
497
- ._label_1c42gib_32{
497
+ ._label_1985ni4_32{
498
498
  letter-spacing:var(
499
499
  --rs-text-base-letter-spacing,
500
500
  var(--_rs-typography-letter-spacing)
@@ -514,23 +514,23 @@
514
514
  margin:0 0 var(--_rs-checkbox-list-label-offset) 0;
515
515
  padding:0;
516
516
  }
517
- ._disabled_1c42gib_39 ._label_1c42gib_32{
517
+ ._disabled_1985ni4_39 ._label_1985ni4_32{
518
518
  color:var(
519
519
  --rs-color-pale,
520
520
  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
521
521
  );
522
522
  }
523
- ._footer_1c42gib_44{
523
+ ._footer_1985ni4_44{
524
524
  display:flex;
525
525
  flex-direction:column;
526
526
  }
527
- ._errorMessage_1c42gib_49{
527
+ ._errorMessage_1985ni4_49{
528
528
  order:99;
529
529
  }
530
- ._error_1c42gib_49 ._errorMessage_1c42gib_49{
530
+ ._error_1985ni4_49 ._errorMessage_1985ni4_49{
531
531
  order:0;
532
532
  }
533
- ._note_1c42gib_58{
533
+ ._note_1985ni4_58{
534
534
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
535
535
  --_rs-typography-text-transform:initial;
536
536
  --_rs-typography-font-variant-numeric:initial;
@@ -590,7 +590,7 @@
590
590
 
591
591
  order:1;
592
592
  }
593
- ._disabled_1c42gib_39 ._note_1c42gib_58{
593
+ ._disabled_1985ni4_39 ._note_1985ni4_58{
594
594
  --_rs-typography-hardness-color:var(
595
595
  --rs-color-pale,
596
596
  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
package/lib/parts/checkbox-list.p.module.css.js CHANGED
@@ -1,16 +1,16 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1c42gib_6",
3
- "themeDark": "_themeDark_1c42gib_9",
4
- "container": "_container_1c42gib_13",
5
- "sizeS": "_sizeS_1c42gib_18",
6
- "sizeM": "_sizeM_1c42gib_21",
7
- "sizeL": "_sizeL_1c42gib_24",
8
- "inner": "_inner_1c42gib_28",
9
- "label": "_label_1c42gib_32",
10
- "disabled": "_disabled_1c42gib_39",
11
- "footer": "_footer_1c42gib_44",
12
- "errorMessage": "_errorMessage_1c42gib_49",
13
- "error": "_error_1c42gib_49",
14
- "note": "_note_1c42gib_58"
2
+ "themeLight": "_themeLight_1985ni4_6",
3
+ "themeDark": "_themeDark_1985ni4_9",
4
+ "container": "_container_1985ni4_13",
5
+ "sizeS": "_sizeS_1985ni4_18",
6
+ "sizeM": "_sizeM_1985ni4_21",
7
+ "sizeL": "_sizeL_1985ni4_24",
8
+ "inner": "_inner_1985ni4_28",
9
+ "label": "_label_1985ni4_32",
10
+ "disabled": "_disabled_1985ni4_39",
11
+ "footer": "_footer_1985ni4_44",
12
+ "errorMessage": "_errorMessage_1985ni4_49",
13
+ "error": "_error_1985ni4_49",
14
+ "note": "_note_1985ni4_58"
15
15
  };
16
16
  export { styles as default };
package/lib/parts/checkbox.p.module.css.js CHANGED
@@ -1,25 +1,25 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1rtxhkq_8",
3
- "themeDark": "_themeDark_1rtxhkq_11",
4
- "checkboxSizeS": "_checkboxSizeS_1rtxhkq_15",
5
- "checkboxSizeM": "_checkboxSizeM_1rtxhkq_18",
6
- "checkboxSizeL": "_checkboxSizeL_1rtxhkq_21",
7
- "sizeS": "_sizeS_1rtxhkq_25",
8
- "sizeM": "_sizeM_1rtxhkq_28",
9
- "sizeL": "_sizeL_1rtxhkq_31",
10
- "classic": "_classic_1rtxhkq_35",
11
- "rock": "_rock_1rtxhkq_38",
12
- "checkbox": "_checkbox_1rtxhkq_15",
13
- "input": "_input_1rtxhkq_65",
14
- "icon": "_icon_1rtxhkq_76",
15
- "enabled": "_enabled_1rtxhkq_93",
16
- "indeterminate": "_indeterminate_1rtxhkq_97",
17
- "disabled": "_disabled_1rtxhkq_105",
18
- "error": "_error_1rtxhkq_134",
19
- "checkmark": "_checkmark_1rtxhkq_161",
20
- "markS": "_markS_1rtxhkq_186",
21
- "markM": "_markM_1rtxhkq_189",
22
- "markL": "_markL_1rtxhkq_192",
23
- "errorMessage": "_errorMessage_1rtxhkq_196"
2
+ "themeLight": "_themeLight_vza3at_8",
3
+ "themeDark": "_themeDark_vza3at_11",
4
+ "checkboxSizeS": "_checkboxSizeS_vza3at_15",
5
+ "checkboxSizeM": "_checkboxSizeM_vza3at_18",
6
+ "checkboxSizeL": "_checkboxSizeL_vza3at_21",
7
+ "sizeS": "_sizeS_vza3at_25",
8
+ "sizeM": "_sizeM_vza3at_28",
9
+ "sizeL": "_sizeL_vza3at_31",
10
+ "classic": "_classic_vza3at_35",
11
+ "rock": "_rock_vza3at_38",
12
+ "checkbox": "_checkbox_vza3at_15",
13
+ "input": "_input_vza3at_65",
14
+ "icon": "_icon_vza3at_76",
15
+ "enabled": "_enabled_vza3at_93",
16
+ "indeterminate": "_indeterminate_vza3at_97",
17
+ "disabled": "_disabled_vza3at_105",
18
+ "error": "_error_vza3at_134",
19
+ "checkmark": "_checkmark_vza3at_161",
20
+ "markS": "_markS_vza3at_186",
21
+ "markM": "_markM_vza3at_189",
22
+ "markL": "_markL_vza3at_192",
23
+ "errorMessage": "_errorMessage_vza3at_196"
24
24
  };
25
25
  export { styles as default };
package/llm/components/checkbox.md ADDED
@@ -0,0 +1,437 @@
1
+ # Checkbox
2
+
3
+ Checkboxes allow users to select one or more items from a set of options.
4
+
5
+ ## CheckboxList
6
+
7
+ ### Features showcase
8
+
9
+ ### CheckboxList
10
+
11
+ Is a special component to quickly retrieve array of selected values:
12
+
13
+ ```tsx
14
+ import { useState } from 'react';
15
+ import { Checkbox, CheckboxList } from '@rescui/checkbox';
16
+
17
+ const Demo = () => {
18
+ const [groupValue, setGroupValue] = useState(['item2']);
19
+ return (
20
+ <>
21
+ <CheckboxList value={groupValue} onChange={setGroupValue}>
22
+ <Checkbox value="item1">
23
+ I'm not ready to pay for it, and my trial has ended
24
+ </Checkbox>
25
+ <Checkbox value="item2">
26
+ Just changing PC / job / client machine
27
+ </Checkbox>
28
+ <Checkbox value="item3">
29
+ Reinstalling / upgrading / upgrading Rider
30
+ </Checkbox>
31
+ <Checkbox value="item4">
32
+ The reason has nothing to do with the product
33
+ </Checkbox>
34
+ </CheckboxList>
35
+
36
+ <p>{JSON.stringify(groupValue)}</p>
37
+ </>
38
+ );
39
+ };
40
+
41
+ render(<Demo />);
42
+ ```
43
+
44
+ #### With default value
45
+
46
+ ```tsx
47
+ import { Checkbox, CheckboxList } from '@rescui/checkbox';
48
+
49
+ const Demo = () => {
50
+ return (
51
+ <CheckboxList defaultValue={['item3', 'item1']}>
52
+ <Checkbox value="item1">
53
+ I'm not ready to pay for it, and my trial has ended
54
+ </Checkbox>
55
+ <Checkbox value="item2">Just changing PC / job / client machine</Checkbox>
56
+ <Checkbox value="item3">
57
+ Reinstalling / upgrading / upgrading Rider
58
+ </Checkbox>
59
+ <Checkbox value="item4">
60
+ The reason has nothing to do with the product
61
+ </Checkbox>
62
+ </CheckboxList>
63
+ );
64
+ };
65
+
66
+ render(<Demo />);
67
+ ```
68
+
69
+ #### With a custom list
70
+
71
+ ```tsx
72
+ import { CheckboxControl, CheckboxManager } from '@rescui/checkbox';
73
+
74
+ <CheckboxManager>
75
+ <p>
76
+ <label style={{ display: 'flex', alignItems: 'center' }}>
77
+ <span className="rs-text-2" style={{ marginRight: 8 }}>
78
+ custom description 1:
79
+ </span>
80
+ <CheckboxControl notUseLabelTag value="1" />
81
+ </label>
82
+ </p>
83
+ <p>
84
+ <label style={{ display: 'flex', alignItems: 'center' }}>
85
+ <span className="rs-text-2" style={{ marginRight: 8 }}>
86
+ custom description 2:
87
+ </span>
88
+ <CheckboxControl notUseLabelTag value="2" />
89
+ </label>
90
+ </p>
91
+ </CheckboxManager>;
92
+ ```
93
+
94
+ #### Conditional Input
95
+
96
+ CSS variable `--rs-out-checkbox-list-left-offset` is used to indent nested `CheckboxList`. It is available only inside `CheckboxList` component.
97
+
98
+ ```tsx
99
+ import { useState } from 'react';
100
+ import { Checkbox, CheckboxList } from '@rescui/checkbox';
101
+ import { Input } from '@rescui/input';
102
+
103
+ const Demo = () => {
104
+ const [groupValue, setGroupValue] = useState(['other']);
105
+ const [otherValue, setOtherValue] = useState('');
106
+ return (
107
+ <CheckboxList
108
+ value={groupValue}
109
+ onChange={setGroupValue}
110
+ style={{ maxWidth: 400 }}
111
+ label="Are you using Rider under license?"
112
+ >
113
+ <Checkbox value="yes">Yes, I have a Rider license</Checkbox>
114
+ <Checkbox value="other">Other</Checkbox>
115
+ {groupValue.includes('other') && (
116
+ <Input
117
+ style={{
118
+ marginLeft: 'var(--rs-out-checkbox-list-left-offset)'
119
+ }}
120
+ placeholder="Please enter your reason"
121
+ value={otherValue}
122
+ onChange={e => setOtherValue(e.target.value)}
123
+ />
124
+ )}
125
+ </CheckboxList>
126
+ );
127
+ };
128
+
129
+ render(<Demo />);
130
+ ```
131
+
132
+ #### Nested CheckboxList
133
+
134
+ CSS variable `--rs-out-checkbox-list-left-offset` is used to indent nested `CheckboxList`. It is available only inside `CheckboxList` component.
135
+
136
+ This demo also shows a complex state management to sync nested `CheckboxList` with the outer `CheckboxList`.
137
+
138
+ ```tsx
139
+ import { useState } from 'react';
140
+ import { Checkbox, CheckboxList } from '@rescui/checkbox';
141
+
142
+ const INNER_VALUES = ['item1', 'item2'];
143
+ const INNER_LIST_VALUE = 'no';
144
+
145
+ const Demo = () => {
146
+ const [outerValue, setOuterValue] = useState([]);
147
+ const [innerValue, setInnerValue] = useState([INNER_VALUES[1]]);
148
+
149
+ const handleOuterChange = newOuterValue => {
150
+ setOuterValue(newOuterValue);
151
+
152
+ const isInnerOptionChecked = value => value.includes(INNER_LIST_VALUE);
153
+
154
+ if (
155
+ isInnerOptionChecked(newOuterValue) &&
156
+ !isInnerOptionChecked(outerValue)
157
+ ) {
158
+ // When "no" is checked, check all nested items
159
+ setInnerValue(INNER_VALUES);
160
+ } else if (
161
+ !isInnerOptionChecked(newOuterValue) &&
162
+ isInnerOptionChecked(outerValue)
163
+ ) {
164
+ // When "no" is unchecked, uncheck all nested items
165
+ setInnerValue([]);
166
+ }
167
+ };
168
+
169
+ const handleInnerChange = newInnerValue => {
170
+ setInnerValue(newInnerValue);
171
+
172
+ const outerValueWithoutInnerOption = outerValue.filter(
173
+ v => v !== INNER_LIST_VALUE
174
+ );
175
+
176
+ if (newInnerValue.length < INNER_VALUES.length) {
177
+ // If any nested items are unchecked, uncheck "no"
178
+ setOuterValue(outerValueWithoutInnerOption);
179
+ } else {
180
+ // Otherwise, check "no"
181
+ setOuterValue([...outerValueWithoutInnerOption, INNER_LIST_VALUE]);
182
+ }
183
+ };
184
+
185
+ return (
186
+ <CheckboxList
187
+ value={outerValue}
188
+ onChange={handleOuterChange}
189
+ label="Are you using Rider under license?"
190
+ >
191
+ <Checkbox value="yes">Yes, I have a Rider license</Checkbox>
192
+ <Checkbox value={INNER_LIST_VALUE} indeterminate={innerValue.length > 0}>
193
+ No, I'm still on my 30-day trial
194
+ </Checkbox>
195
+ <CheckboxList
196
+ value={innerValue}
197
+ onChange={handleInnerChange}
198
+ style={{
199
+ marginLeft: 'var(--rs-out-checkbox-list-left-offset)'
200
+ }}
201
+ >
202
+ <Checkbox value={INNER_VALUES[0]}>
203
+ I'm not ready to pay for it, and my trial has ended
204
+ </Checkbox>
205
+ <Checkbox value={INNER_VALUES[1]}>
206
+ The reason has nothing to do with the product
207
+ </Checkbox>
208
+ </CheckboxList>
209
+ </CheckboxList>
210
+ );
211
+ };
212
+
213
+ render(<Demo />);
214
+ ```
215
+
216
+ ## Usage
217
+
218
+ ### Features showcase
219
+
220
+ ### Controlled checkbox
221
+
222
+ ```tsx
223
+ import { Checkbox } from '@rescui/checkbox';
224
+ import { useState } from 'react';
225
+
226
+ const Demo = () => {
227
+ const [checked, setChecked] = useState(false);
228
+ return (
229
+ <>
230
+ <Checkbox checked={checked} onChange={e => setChecked(e.target.checked)}>
231
+ Checkbox
232
+ </Checkbox>
233
+ <div>Checkbox {checked ? 'checked' : 'unchecked'}</div>
234
+ </>
235
+ );
236
+ };
237
+
238
+ render(<Demo />);
239
+ ```
240
+
241
+ #### With `label` on the outside
242
+
243
+ ```tsx
244
+ import { CheckboxControl } from '@rescui/checkbox';
245
+
246
+ <label style={{ display: 'flex', alignItems: 'center' }}>
247
+ <span className="rs-text-2" style={{ marginRight: 8 }}>
248
+ custom description:
249
+ </span>
250
+ <CheckboxControl notUseLabelTag value="item" />
251
+ </label>;
252
+ ```
253
+
254
+ ## CSS Mixins API
255
+
256
+ #### `CheckboxList` mixins
257
+
258
+ | Mixin name | Details |
259
+ | --- | --- |
260
+ | `rs-checkbox-list-size-s` | prop: `size`<br><br>value: `"s"` |
261
+ | `rs-checkbox-list-size-m` | prop: `size`<br><br>value: `"m"` |
262
+ | `rs-checkbox-list-size-l` | prop: `size`<br><br>value: `"l"` |
263
+ | `rs-checkbox-list-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
264
+ | `rs-checkbox-list-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
265
+
266
+ ##### Demo
267
+
268
+ Instead of separate classes, it may be a single class with `@media` queries inside:
269
+
270
+ ```tsx
271
+ import { Checkbox, CheckboxList } from '@rescui/checkbox';
272
+ import { useState } from 'react';
273
+
274
+ const MyCheckboxList = ({ className }) => {
275
+ const [groupValue, setGroupValue] = useState(['item2']);
276
+ return (
277
+ <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
278
+ <CheckboxList
279
+ value={groupValue}
280
+ onChange={setGroupValue}
281
+ className={className}
282
+ >
283
+ <Checkbox value="item1">Option 1</Checkbox>
284
+ <Checkbox value="item2">Option 2</Checkbox>
285
+ </CheckboxList>
286
+ </div>
287
+ );
288
+ };
289
+
290
+ render(
291
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
292
+ <div>
293
+ <p>Default:</p>
294
+ <MyCheckboxList />
295
+ </div>
296
+ <div>
297
+ <p>Var1:</p>
298
+ <MyCheckboxList className={`my-checkbox-list-var-1`} />
299
+ </div>
300
+ <div>
301
+ <p>Var1 & Var2 combined:</p>
302
+ <MyCheckboxList
303
+ className={`my-checkbox-list-var-1 my-checkbox-list-var-2`}
304
+ />
305
+ </div>
306
+ </div>
307
+ );
308
+ ```
309
+
310
+ ```postcss
311
+ @import '@rescui/checkbox/lib/public-api.p.css';
312
+
313
+ .my-checkbox-list-var-1 {
314
+ @mixin rs-checkbox-list-size-l;
315
+ @mixin rs-checkbox-list-mode-rock;
316
+ }
317
+ .my-checkbox-list-var-2 {
318
+ @mixin rs-checkbox-list-size-s;
319
+ @mixin rs-checkbox-list-mode-classic;
320
+ }
321
+ ```
322
+
323
+ #### `Checkbox` mixins
324
+
325
+ | Mixin name | Details |
326
+ | --- | --- |
327
+ | `rs-checkbox-size-s` | prop: `size`<br><br>value: `"s"` |
328
+ | `rs-checkbox-size-m` | prop: `size`<br><br>value: `"m"` |
329
+ | `rs-checkbox-size-l` | prop: `size`<br><br>value: `"l"` |
330
+ | `rs-checkbox-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
331
+ | `rs-checkbox-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
332
+
333
+ ##### Demo
334
+
335
+ Instead of separate classes, it may be a single class with `@media` queries inside:
336
+
337
+ ```tsx
338
+ import { Checkbox } from '@rescui/checkbox';
339
+
340
+ const MyCheckbox = ({ className }) => {
341
+ return (
342
+ <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
343
+ <Checkbox className={className} defaultChecked>
344
+ Option
345
+ </Checkbox>
346
+ </div>
347
+ );
348
+ };
349
+
350
+ render(
351
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
352
+ <div>
353
+ <p>Default:</p>
354
+ <MyCheckbox />
355
+ </div>
356
+ <div>
357
+ <p>Var1:</p>
358
+ <MyCheckbox className={`my-checkbox-var-1`} />
359
+ </div>
360
+ <div>
361
+ <p>Var1 & Var2 combined:</p>
362
+ <MyCheckbox className={`my-checkbox-var-1 my-checkbox-var-2`} />
363
+ </div>
364
+ </div>
365
+ );
366
+ ```
367
+
368
+ ```postcss attached
369
+ @import '@rescui/checkbox/lib/public-api.p.css';
370
+
371
+ .my-checkbox-var-1 {
372
+ @mixin rs-checkbox-size-l;
373
+ @mixin rs-checkbox-mode-rock;
374
+ }
375
+ .my-checkbox-var-2 {
376
+ @mixin rs-checkbox-size-s;
377
+ @mixin rs-checkbox-mode-classic;
378
+ }
379
+ ```
380
+
381
+ #### `CheckboxControl` mixins
382
+
383
+ | Mixin name | Details |
384
+ | --- | --- |
385
+ | `rs-checkbox-control-size-s` | prop: `size`<br><br>value: `"s"` |
386
+ | `rs-checkbox-control-size-m` | prop: `size`<br><br>value: `"m"` |
387
+ | `rs-checkbox-control-size-l` | prop: `size`<br><br>value: `"l"` |
388
+ | `rs-checkbox-control-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
389
+ | `rs-checkbox-control-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
390
+
391
+ ##### Demo
392
+
393
+ Instead of separate classes, it may be a single class with `@media` queries inside:
394
+
395
+ ```tsx
396
+ import { CheckboxControl } from '@rescui/checkbox';
397
+
398
+ const MyCheckboxControl = ({ className }) => {
399
+ return (
400
+ <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
401
+ <CheckboxControl className={className} defaultChecked />
402
+ </div>
403
+ );
404
+ };
405
+
406
+ render(
407
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
408
+ <div>
409
+ <p>Default:</p>
410
+ <MyCheckboxControl />
411
+ </div>
412
+ <div>
413
+ <p>Var1:</p>
414
+ <MyCheckboxControl className={`my-checkbox-control-var-1`} />
415
+ </div>
416
+ <div>
417
+ <p>Var1 & Var2 combined:</p>
418
+ <MyCheckboxControl
419
+ className={`my-checkbox-control-var-1 my-checkbox-control-var-2`}
420
+ />
421
+ </div>
422
+ </div>
423
+ );
424
+ ```
425
+
426
+ ```postcss
427
+ @import '@rescui/checkbox/lib/public-api.p.css';
428
+
429
+ .my-checkbox-control-var-1 {
430
+ @mixin rs-checkbox-control-size-l;
431
+ @mixin rs-checkbox-control-mode-rock;
432
+ }
433
+ .my-checkbox-control-var-2 {
434
+ @mixin rs-checkbox-control-size-s;
435
+ @mixin rs-checkbox-control-mode-classic;
436
+ }
437
+ ```
package/llm/index.md ADDED
@@ -0,0 +1,2 @@
1
+ - Components and Hooks
2
+ - [Checkbox](./components/checkbox.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/checkbox",
3
- "version": "0.11.1",
3
+ "version": "0.11.2",
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/form-field": "^0.1.4",
20
- "@rescui/menu": "^0.13.6",
20
+ "@rescui/form-field": "^0.1.5",
21
+ "@rescui/menu": "^0.13.7",
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
  }