@vsn-ux/gaia-styles 0.6.0 → 0.6.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 (35) hide show
  1. package/dist/all-10pt.css +1 -2
  2. package/dist/all-no-reset-10pt.css +1 -2
  3. package/dist/all-no-reset.css +1 -2
  4. package/dist/all.css +1 -2
  5. package/dist/components/tabs.css +1 -2
  6. package/dist/components.css +1 -2
  7. package/dist/docs/Avatar.md +52 -0
  8. package/dist/docs/Badge.md +60 -0
  9. package/dist/docs/Button.md +60 -0
  10. package/dist/docs/Calendar.md +468 -0
  11. package/dist/docs/Card.md +57 -0
  12. package/dist/docs/Checkbox.md +112 -0
  13. package/dist/docs/Container.md +62 -0
  14. package/dist/docs/Datepicker.md +107 -0
  15. package/dist/docs/Dropdown.md +152 -0
  16. package/dist/docs/FormField.md +101 -0
  17. package/dist/docs/Input.md +84 -0
  18. package/dist/docs/Link.md +109 -0
  19. package/dist/docs/Menu.md +316 -0
  20. package/dist/docs/Modal.md +337 -0
  21. package/dist/docs/Notification.md +341 -0
  22. package/dist/docs/ProgressBar.md +87 -0
  23. package/dist/docs/ProgressIndicator.md +217 -0
  24. package/dist/docs/QuickFilterButton.md +74 -0
  25. package/dist/docs/Radio.md +106 -0
  26. package/dist/docs/SegmentedControl.md +69 -0
  27. package/dist/docs/Select.md +411 -0
  28. package/dist/docs/Switch.md +97 -0
  29. package/dist/docs/Tabs.md +129 -0
  30. package/dist/docs/Tag.md +154 -0
  31. package/dist/docs/TextArea.md +51 -0
  32. package/dist/docs/TextSize.md +63 -0
  33. package/dist/docs/Tooltip.md +95 -0
  34. package/package.json +3 -1
  35. package/src/styles/components/tabs.css +1 -1
package/dist/docs/Calendar.md ADDED
@@ -0,0 +1,468 @@
1
+ # Calendar
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-calendar
7
+ ├── ga-calendar__header
8
+ │ ├── ga-calendar__month-year
9
+ │ │ └── ga-calendar__month-year-button
10
+ │ └── ga-calendar__navigation
11
+ │ └── ga-calendar__navigation-button
12
+ ├── ga-calendar__weekdays
13
+ │ └── ga-calendar__weekday
14
+ └── ga-calendar__selection [--day|--month|--year]
15
+ ├── ga-calendar__day [--selected|--current|--special|--disabled|--weekend|--selected-range-*]
16
+ ├── ga-calendar__month [--selected|--disabled]
17
+ └── ga-calendar__year [--selected|--disabled]
18
+ ```
19
+
20
+ ## Elements Hierarchy
21
+
22
+ ### Core Block
23
+
24
+ - `ga-calendar` - Calendar component
25
+
26
+ ### Heading Elements
27
+
28
+ - `ga-calendar__header` - Header section containing month/year selectors and navigation
29
+ - `ga-calendar__month-year` - Container for month and year selection buttons
30
+ - `ga-calendar__month-year-button` - Interactive buttons for selecting month or year
31
+ - `ga-calendar__navigation` - Container for calendar navigation controls
32
+ - `ga-calendar__navigation-button` - Previous/next navigation buttons
33
+
34
+ ### Weekdays Elements
35
+
36
+ - `ga-calendar__weekdays` - Container for weekday headers (only in day selection mode)
37
+ - `ga-calendar__weekday` - Individual weekday label (Mo, Tu, We, etc.)
38
+
39
+ ### Selection Elements
40
+
41
+ - `ga-calendar__selection` - Main selection area for days, months, or years
42
+ - `ga-calendar__selection--day` - Day selection mode
43
+ - `ga-calendar__selection--month` - Month selection mode
44
+ - `ga-calendar__selection--year` - Year selection mode
45
+ - `ga-calendar__day` - Individual day cell in day selection mode
46
+ - `ga-calendar__day--selected` - Currently selected day
47
+ - `ga-calendar__day--current` - Today's date
48
+ - `ga-calendar__day--special` - Days with special significance (events, holidays)
49
+ - `ga-calendar__day--disabled` - Non-selectable days
50
+ - `ga-calendar__day--weekend` - Weekend days
51
+ - `ga-calendar__day--selected-range-start` - Start of a selected date range
52
+ - `ga-calendar__day--selected-range-middle` - Middle days in a selected range
53
+ - `ga-calendar__day--selected-range-end` - End of a selected date range
54
+ - `ga-calendar__day--selected-range-middle-hover` - Middle days in hover state during range selection
55
+ - `ga-calendar__day--selected-range-end-hover` - End day in hover state during range selection
56
+ - `ga-calendar__month` - Individual month cell in month selection mode
57
+ - `ga-calendar__month--selected` - Currently selected month
58
+ - `ga-calendar__month--disabled` - Non-selectable months
59
+ - `ga-calendar__year` - Individual year cell in year selection mode
60
+ - `ga-calendar__year--selected` - Currently selected year
61
+ - `ga-calendar__year--disabled` - Non-selectable years
62
+
63
+ ## Examples
64
+
65
+ ### Day Selection
66
+
67
+ ```html
68
+ <div class="ga-calendar">
69
+ <div class="ga-calendar__header">
70
+ <div class="ga-calendar__month-year">
71
+ <button type="button" class="ga-calendar__month-year-button">
72
+ Sep
73
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
74
+ </button>
75
+ <button type="button" class="ga-calendar__month-year-button">
76
+ 2025
77
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
78
+ </button>
79
+ </div>
80
+ <div class="ga-calendar__navigation">
81
+ <button type="button" class="ga-calendar__navigation-button">
82
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
83
+ </button>
84
+ <button type="button" class="ga-calendar__navigation-button">
85
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
86
+ </button>
87
+ </div>
88
+ </div>
89
+ <div class="ga-calendar__weekdays">
90
+ <div class="ga-calendar__weekday">Mo</div>
91
+ <div class="ga-calendar__weekday">Tu</div>
92
+ <div class="ga-calendar__weekday">We</div>
93
+ <div class="ga-calendar__weekday">Th</div>
94
+ <div class="ga-calendar__weekday">Fr</div>
95
+ <div class="ga-calendar__weekday">Sa</div>
96
+ <div class="ga-calendar__weekday">Su</div>
97
+ </div>
98
+ <div class="ga-calendar__selection ga-calendar__selection--day">
99
+ <div class="ga-calendar__day">1</div>
100
+ <div class="ga-calendar__day">2</div>
101
+ <div class="ga-calendar__day">3</div>
102
+ <div class="ga-calendar__day">4</div>
103
+ <div class="ga-calendar__day">5</div>
104
+ <div class="ga-calendar__day ga-calendar__day--weekend">6</div>
105
+ <div class="ga-calendar__day ga-calendar__day--weekend">7</div>
106
+ <div class="ga-calendar__day">8</div>
107
+ <div class="ga-calendar__day">9</div>
108
+ <div class="ga-calendar__day ga-calendar__day--special">10</div>
109
+ <div class="ga-calendar__day">11</div>
110
+ <div class="ga-calendar__day">12</div>
111
+ <div class="ga-calendar__day ga-calendar__day--weekend">13</div>
112
+ <div class="ga-calendar__day ga-calendar__day--weekend">14</div>
113
+ <div class="ga-calendar__day ga-calendar__day--current">15</div>
114
+ <div class="ga-calendar__day">16</div>
115
+ <div class="ga-calendar__day">17</div>
116
+ <div class="ga-calendar__day">18</div>
117
+ <div class="ga-calendar__day">19</div>
118
+ <div
119
+ class="ga-calendar__day ga-calendar__day--selected ga-calendar__day--weekend"
120
+ >
121
+ 20
122
+ </div>
123
+ <div class="ga-calendar__day ga-calendar__day--weekend">21</div>
124
+ <div class="ga-calendar__day">22</div>
125
+ <div class="ga-calendar__day">23</div>
126
+ <div class="ga-calendar__day">24</div>
127
+ <div class="ga-calendar__day">25</div>
128
+ <div class="ga-calendar__day">26</div>
129
+ <div class="ga-calendar__day ga-calendar__day--weekend">27</div>
130
+ <div class="ga-calendar__day ga-calendar__day--weekend">28</div>
131
+ <div class="ga-calendar__day">29</div>
132
+ <div class="ga-calendar__day">30</div>
133
+ </div>
134
+ </div>
135
+ ```
136
+
137
+ ### Month Selection
138
+
139
+ ```html
140
+ <div class="ga-calendar">
141
+ <div class="ga-calendar__header">
142
+ <div class="ga-calendar__month-year">
143
+ <button type="button" class="ga-calendar__month-year-button">
144
+ Sep
145
+ <!-- icon: chevron-up, size=16, class="ga-icon" -->
146
+ </button>
147
+ <button type="button" class="ga-calendar__month-year-button">
148
+ 2025
149
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
150
+ </button>
151
+ </div>
152
+ </div>
153
+ <div class="ga-calendar__selection ga-calendar__selection--month">
154
+ <div class="ga-calendar__month ga-calendar__month--disabled">Jan</div>
155
+ <div class="ga-calendar__month ga-calendar__month--disabled">Feb</div>
156
+ <div class="ga-calendar__month">Mar</div>
157
+ <div class="ga-calendar__month">Apr</div>
158
+ <div class="ga-calendar__month">May</div>
159
+ <div class="ga-calendar__month">Jun</div>
160
+ <div class="ga-calendar__month">Jul</div>
161
+ <div class="ga-calendar__month">Aug</div>
162
+ <div class="ga-calendar__month ga-calendar__month--selected">Sep</div>
163
+ <div class="ga-calendar__month">Oct</div>
164
+ <div class="ga-calendar__month">Nov</div>
165
+ <div class="ga-calendar__month">Dec</div>
166
+ </div>
167
+ </div>
168
+ ```
169
+
170
+ ### Year Selection
171
+
172
+ ```html
173
+ <div class="ga-calendar">
174
+ <div class="ga-calendar__header">
175
+ <div class="ga-calendar__month-year">
176
+ <button type="button" class="ga-calendar__month-year-button">
177
+ Sep
178
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
179
+ </button>
180
+ <button type="button" class="ga-calendar__month-year-button">
181
+ 2025
182
+ <!-- icon: chevron-up, size=16, class="ga-icon" -->
183
+ </button>
184
+ </div>
185
+ <div class="ga-calendar__navigation">
186
+ <button type="button" class="ga-calendar__navigation-button">
187
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
188
+ </button>
189
+ <button type="button" class="ga-calendar__navigation-button">
190
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
191
+ </button>
192
+ </div>
193
+ </div>
194
+ <div class="ga-calendar__selection ga-calendar__selection--year">
195
+ <div class="ga-calendar__year ga-calendar__year--disabled">2006</div>
196
+ <div class="ga-calendar__year ga-calendar__year--disabled">2007</div>
197
+ <div class="ga-calendar__year ga-calendar__year--disabled">2008</div>
198
+ <div class="ga-calendar__year">2009</div>
199
+ <div class="ga-calendar__year">2010</div>
200
+ <div class="ga-calendar__year">2011</div>
201
+ <div class="ga-calendar__year">2012</div>
202
+ <div class="ga-calendar__year">2013</div>
203
+ <div class="ga-calendar__year">2014</div>
204
+ <div class="ga-calendar__year">2015</div>
205
+ <div class="ga-calendar__year">2016</div>
206
+ <div class="ga-calendar__year">2017</div>
207
+ <div class="ga-calendar__year">2018</div>
208
+ <div class="ga-calendar__year">2019</div>
209
+ <div class="ga-calendar__year">2020</div>
210
+ <div class="ga-calendar__year">2021</div>
211
+ <div class="ga-calendar__year">2022</div>
212
+ <div class="ga-calendar__year">2023</div>
213
+ <div class="ga-calendar__year">2024</div>
214
+ <div class="ga-calendar__year ga-calendar__year--selected">2025</div>
215
+ <div class="ga-calendar__year">2026</div>
216
+ <div class="ga-calendar__year">2027</div>
217
+ <div class="ga-calendar__year">2028</div>
218
+ <div class="ga-calendar__year">2029</div>
219
+ <div class="ga-calendar__year">2030</div>
220
+ </div>
221
+ </div>
222
+ ```
223
+
224
+ ### Range Selection
225
+
226
+ ```html
227
+ <div class="ga-calendar">
228
+ <div class="ga-calendar__header">
229
+ <div class="ga-calendar__month-year">
230
+ <button type="button" class="ga-calendar__month-year-button">
231
+ Sep
232
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
233
+ </button>
234
+ <button type="button" class="ga-calendar__month-year-button">
235
+ 2025
236
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
237
+ </button>
238
+ </div>
239
+ <div class="ga-calendar__navigation">
240
+ <button type="button" class="ga-calendar__navigation-button">
241
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
242
+ </button>
243
+ <button type="button" class="ga-calendar__navigation-button">
244
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
245
+ </button>
246
+ </div>
247
+ </div>
248
+ <div class="ga-calendar__weekdays">
249
+ <div class="ga-calendar__weekday">Mo</div>
250
+ <div class="ga-calendar__weekday">Tu</div>
251
+ <div class="ga-calendar__weekday">We</div>
252
+ <div class="ga-calendar__weekday">Th</div>
253
+ <div class="ga-calendar__weekday">Fr</div>
254
+ <div class="ga-calendar__weekday">Sa</div>
255
+ <div class="ga-calendar__weekday">Su</div>
256
+ </div>
257
+ <div class="ga-calendar__selection ga-calendar__selection--day">
258
+ <div class="ga-calendar__day">1</div>
259
+ <div class="ga-calendar__day ga-calendar__day--selected-range-start">2</div>
260
+ <div
261
+ class="ga-calendar__day ga-calendar__day--selected-range-middle ga-calendar__day--special"
262
+ >
263
+ 3
264
+ </div>
265
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
266
+ 4
267
+ </div>
268
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
269
+ 5
270
+ </div>
271
+ <div
272
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle"
273
+ >
274
+ 6
275
+ </div>
276
+ <div
277
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle"
278
+ >
279
+ 7
280
+ </div>
281
+ <div
282
+ class="ga-calendar__day ga-calendar__day--selected-range-middle ga-calendar__day--current"
283
+ >
284
+ 8
285
+ </div>
286
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
287
+ 9
288
+ </div>
289
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
290
+ 10
291
+ </div>
292
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
293
+ 11
294
+ </div>
295
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle">
296
+ 12
297
+ </div>
298
+ <div
299
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-end"
300
+ >
301
+ 13
302
+ </div>
303
+ <div class="ga-calendar__day ga-calendar__day--weekend">14</div>
304
+ <div class="ga-calendar__day">15</div>
305
+ <div class="ga-calendar__day ga-calendar__day--selected-range-start">
306
+ 16
307
+ </div>
308
+ <div
309
+ class="ga-calendar__day ga-calendar__day--selected-range-middle-hover ga-calendar__day--special"
310
+ >
311
+ 17
312
+ </div>
313
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
314
+ 18
315
+ </div>
316
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
317
+ 19
318
+ </div>
319
+ <div
320
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle-hover"
321
+ >
322
+ 20
323
+ </div>
324
+ <div
325
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-middle-hover"
326
+ >
327
+ 21
328
+ </div>
329
+ <div
330
+ class="ga-calendar__day ga-calendar__day--selected-range-middle-hover ga-calendar__day--current"
331
+ >
332
+ 22
333
+ </div>
334
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
335
+ 23
336
+ </div>
337
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
338
+ 24
339
+ </div>
340
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
341
+ 25
342
+ </div>
343
+ <div class="ga-calendar__day ga-calendar__day--selected-range-middle-hover">
344
+ 26
345
+ </div>
346
+ <div
347
+ class="ga-calendar__day ga-calendar__day--weekend ga-calendar__day--selected-range-end-hover"
348
+ >
349
+ 27
350
+ </div>
351
+ <div class="ga-calendar__day ga-calendar__day--weekend">28</div>
352
+ <div class="ga-calendar__day">29</div>
353
+ <div class="ga-calendar__day">30</div>
354
+ </div>
355
+ </div>
356
+ ```
357
+
358
+ ### Day States
359
+
360
+ ```html
361
+ <div class="ga-calendar">
362
+ <div class="ga-calendar__header">
363
+ <div class="ga-calendar__month-year">
364
+ <button type="button" class="ga-calendar__month-year-button">
365
+ Sep
366
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
367
+ </button>
368
+ <button type="button" class="ga-calendar__month-year-button">
369
+ 2025
370
+ <!-- icon: chevron-down, size=16, class="ga-icon" -->
371
+ </button>
372
+ </div>
373
+ <div class="ga-calendar__navigation">
374
+ <button type="button" class="ga-calendar__navigation-button">
375
+ <!-- icon: chevron-left, size=24, class="ga-icon" -->
376
+ </button>
377
+ <button type="button" class="ga-calendar__navigation-button">
378
+ <!-- icon: chevron-right, size=24, class="ga-icon" -->
379
+ </button>
380
+ </div>
381
+ </div>
382
+ <div class="ga-calendar__weekdays">
383
+ <div class="ga-calendar__weekday">Mo</div>
384
+ <div class="ga-calendar__weekday">Tu</div>
385
+ <div class="ga-calendar__weekday">We</div>
386
+ <div class="ga-calendar__weekday">Th</div>
387
+ <div class="ga-calendar__weekday">Fr</div>
388
+ <div class="ga-calendar__weekday">Sa</div>
389
+ <div class="ga-calendar__weekday">Su</div>
390
+ </div>
391
+ <div class="ga-calendar__selection ga-calendar__selection--day">
392
+ <div class="ga-calendar__day">1</div>
393
+ <div class="ga-calendar__day ga-calendar__day--selected">2</div>
394
+ <div class="ga-calendar__day ga-calendar__day--disabled">3</div>
395
+ <div
396
+ class="ga-calendar__day ga-calendar__day--selected ga-calendar__day--disabled"
397
+ >
398
+ 4
399
+ </div>
400
+ <div class="ga-calendar__day">5</div>
401
+ <div class="ga-calendar__day ga-calendar__day--weekend">6</div>
402
+ <div class="ga-calendar__day ga-calendar__day--weekend">7</div>
403
+ <div class="ga-calendar__day ga-calendar__day--special">8</div>
404
+ <div
405
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--selected"
406
+ >
407
+ 9
408
+ </div>
409
+ <div
410
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--disabled"
411
+ >
412
+ 10
413
+ </div>
414
+ <div
415
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--selected ga-calendar__day--disabled"
416
+ >
417
+ 11
418
+ </div>
419
+ <div class="ga-calendar__day">12</div>
420
+ <div
421
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--weekend"
422
+ >
423
+ 13
424
+ </div>
425
+ <div
426
+ class="ga-calendar__day ga-calendar__day--special ga-calendar__day--weekend"
427
+ >
428
+ 14
429
+ </div>
430
+ <div class="ga-calendar__day ga-calendar__day--current">15</div>
431
+ <div
432
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--selected"
433
+ >
434
+ 16
435
+ </div>
436
+ <div
437
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--disabled"
438
+ >
439
+ 17
440
+ </div>
441
+ <div
442
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--selected ga-calendar__day--disabled"
443
+ >
444
+ 18
445
+ </div>
446
+ <div class="ga-calendar__day">19</div>
447
+ <div
448
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--weekend"
449
+ >
450
+ 20
451
+ </div>
452
+ <div
453
+ class="ga-calendar__day ga-calendar__day--current ga-calendar__day--weekend"
454
+ >
455
+ 21
456
+ </div>
457
+ <div class="ga-calendar__day">22</div>
458
+ <div class="ga-calendar__day">23</div>
459
+ <div class="ga-calendar__day">24</div>
460
+ <div class="ga-calendar__day">25</div>
461
+ <div class="ga-calendar__day">26</div>
462
+ <div class="ga-calendar__day">27</div>
463
+ <div class="ga-calendar__day">28</div>
464
+ <div class="ga-calendar__day">29</div>
465
+ <div class="ga-calendar__day">30</div>
466
+ </div>
467
+ </div>
468
+ ```
package/dist/docs/Card.md ADDED
@@ -0,0 +1,57 @@
1
+ # Card
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-card [--selectable|--disabled]
7
+ ```
8
+
9
+ ## Elements Hierarchy
10
+
11
+ ### Core Block
12
+
13
+ - `ga-card` - Main container for the entire card component
14
+
15
+ ### Modifiers
16
+
17
+ - `ga-card--selectable` - Makes the card interactive/clickable
18
+ - `ga-card--disabled` - Styles the card as disabled/non-interactive
19
+ - `ga-card--selected` - Styles the card as selected
20
+
21
+ ## Examples
22
+
23
+ ### Default
24
+
25
+ ```html
26
+ <div class="ga-card">
27
+ <h2 class="font-bold">Card title</h2>
28
+ <div>Card description</div>
29
+ </div>
30
+ ```
31
+
32
+ ### Selectable
33
+
34
+ ```html
35
+ <div role="button" tabindex="0" class="ga-card ga-card--selectable">
36
+ <h2 class="font-bold">Card title</h2>
37
+ <div>Card description</div>
38
+ </div>
39
+ ```
40
+
41
+ ### Selected
42
+
43
+ ```html
44
+ <div class="ga-card ga-card--selectable ga-card--selected">
45
+ <h2 class="font-bold">Card title</h2>
46
+ <div>Card description</div>
47
+ </div>
48
+ ```
49
+
50
+ ### Disabled
51
+
52
+ ```html
53
+ <div class="ga-card ga-card--disabled">
54
+ <h2 class="font-bold">Card title</h2>
55
+ <div>Card description</div>
56
+ </div>
57
+ ```
package/dist/docs/Checkbox.md ADDED
@@ -0,0 +1,112 @@
1
+ # Checkbox
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-checkbox [--invalid]
7
+ ├── ga-checkbox__native
8
+ ├── ga-checkbox__marker
9
+ │ ├── ga-checkbox__marker__indicator-checked
10
+ │ └── ga-checkbox__marker__indicator-indeterminate
11
+ └── ga-checkbox__label (optional)
12
+ ```
13
+
14
+ ## Elements Hierarchy
15
+
16
+ ### Core Block
17
+
18
+ - `ga-checkbox` - Main container for the checkbox component
19
+
20
+ ### Mandatory Elements
21
+
22
+ - `ga-checkbox__native` - Native HTML input element (hidden visually)
23
+ - `ga-checkbox__marker` - Visual marker/box for the checkbox state
24
+ - `ga-checkbox__marker__indicator-checked` - Icon shown when checkbox is checked (use `CheckIcon` from Lucide icons)
25
+ - `ga-checkbox__marker__indicator-indeterminate` - Icon shown when checkbox is in indeterminate state (use `MinusIcon` from Lucide icons)
26
+
27
+ ### Optional Elements
28
+
29
+ - `ga-checkbox__label` - Text label for the checkbox
30
+
31
+ ### Modifiers
32
+
33
+ - `ga-checkbox--invalid` - Styles the checkbox to indicate an invalid/error state
34
+
35
+ ## Examples
36
+
37
+ ### Default
38
+
39
+ ```html
40
+ <label class="ga-checkbox">
41
+ <input type="checkbox" class="ga-checkbox__native" />
42
+ <div class="ga-checkbox__marker">
43
+ <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
44
+ <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
45
+ </div>
46
+ <div class="ga-checkbox__label">Option A</div>
47
+ </label>
48
+ ```
49
+
50
+ ### Checked
51
+
52
+ ```html
53
+ <label class="ga-checkbox">
54
+ <input type="checkbox" class="ga-checkbox__native" checked="" />
55
+ <div class="ga-checkbox__marker">
56
+ <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
57
+ <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
58
+ </div>
59
+ <div class="ga-checkbox__label">Option A</div>
60
+ </label>
61
+ ```
62
+
63
+ ### Indeterminate
64
+
65
+ ```html
66
+ <label class="ga-checkbox">
67
+ <input type="checkbox" class="ga-checkbox__native" />
68
+ <div class="ga-checkbox__marker">
69
+ <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
70
+ <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
71
+ </div>
72
+ <div class="ga-checkbox__label">Option A</div>
73
+ </label>
74
+ ```
75
+
76
+ ### Disabled
77
+
78
+ ```html
79
+ <label class="ga-checkbox">
80
+ <input type="checkbox" class="ga-checkbox__native" disabled="" checked="" />
81
+ <div class="ga-checkbox__marker">
82
+ <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
83
+ <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
84
+ </div>
85
+ <div class="ga-checkbox__label">Option A</div>
86
+ </label>
87
+ ```
88
+
89
+ ### Invalid
90
+
91
+ ```html
92
+ <label class="ga-checkbox ga-checkbox--invalid">
93
+ <input type="checkbox" class="ga-checkbox__native" required="" />
94
+ <div class="ga-checkbox__marker">
95
+ <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
96
+ <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
97
+ </div>
98
+ <div class="ga-checkbox__label">Option A</div>
99
+ </label>
100
+ ```
101
+
102
+ ### Nolabel
103
+
104
+ ```html
105
+ <div class="ga-checkbox">
106
+ <input type="checkbox" class="ga-checkbox__native" />
107
+ <div class="ga-checkbox__marker">
108
+ <!-- icon: check, size=12, class="ga-checkbox__marker__indicator-checked" -->
109
+ <!-- icon: minus, size=12, class="ga-checkbox__marker__indicator-indeterminate" -->
110
+ </div>
111
+ </div>
112
+ ```