@vsn-ux/gaia-styles 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/docs/Avatar.md +52 -0
  2. package/dist/docs/Badge.md +60 -0
  3. package/dist/docs/Button.md +60 -0
  4. package/dist/docs/Calendar.md +468 -0
  5. package/dist/docs/Card.md +57 -0
  6. package/dist/docs/Checkbox.md +112 -0
  7. package/dist/docs/Container.md +62 -0
  8. package/dist/docs/Datepicker.md +107 -0
  9. package/dist/docs/Dropdown.md +152 -0
  10. package/dist/docs/FormField.md +101 -0
  11. package/dist/docs/Input.md +84 -0
  12. package/dist/docs/Link.md +109 -0
  13. package/dist/docs/Menu.md +316 -0
  14. package/dist/docs/Modal.md +337 -0
  15. package/dist/docs/Notification.md +341 -0
  16. package/dist/docs/ProgressBar.md +87 -0
  17. package/dist/docs/ProgressIndicator.md +217 -0
  18. package/dist/docs/QuickFilterButton.md +74 -0
  19. package/dist/docs/Radio.md +106 -0
  20. package/dist/docs/SegmentedControl.md +69 -0
  21. package/dist/docs/Select.md +411 -0
  22. package/dist/docs/Switch.md +97 -0
  23. package/dist/docs/Tabs.md +129 -0
  24. package/dist/docs/Tag.md +154 -0
  25. package/dist/docs/TextArea.md +51 -0
  26. package/dist/docs/TextSize.md +63 -0
  27. package/dist/docs/Tooltip.md +95 -0
  28. package/package.json +3 -1
package/dist/docs/Link.md ADDED
@@ -0,0 +1,109 @@
1
+ # Link
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-link [--inline] [--small|--large|--disabled]
7
+ ├── ga-link__icon (optional)
8
+ ├── text
9
+ └── ga-link__icon (optional)
10
+ ```
11
+
12
+ ## Elements Hierarchy
13
+
14
+ ### Core Block
15
+
16
+ - `ga-link` - Main container for the entire link component (default height size 20px)
17
+
18
+ ### Mandatory Elements
19
+
20
+ - `text` - The text content of the link
21
+
22
+ ### Optional Elements
23
+
24
+ - `ga-link__icon` - An icon placed before or after the link text
25
+
26
+ ### Modifiers
27
+
28
+ - `ga-link--inline` - Link to be used inline with text
29
+ - `ga-link--small` - Smaller sized link (16px)
30
+ - `ga-link--large` - Larger sized link (24px)
31
+ - `ga-link--disabled` - Styles the link as disabled/non-interactive
32
+
33
+ ## Examples
34
+
35
+ ### Default
36
+
37
+ ```html
38
+ <a class="ga-link ga-link--small" href="#">
39
+ Link
40
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
41
+ </a>
42
+ <a class="ga-link" href="#">
43
+ Link
44
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
45
+ </a>
46
+ <a class="ga-link ga-link--large" href="#">
47
+ Link
48
+ <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
49
+ </a>
50
+ ```
51
+
52
+ ### Inline
53
+
54
+ ```html
55
+ <a class="ga-link ga-link--inline ga-link--small" href="#">
56
+ Link
57
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
58
+ </a>
59
+ <a class="ga-link ga-link--inline" href="#">
60
+ Link
61
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
62
+ </a>
63
+ <a class="ga-link ga-link--inline ga-link--large" href="#">
64
+ Link
65
+ <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
66
+ </a>
67
+ ```
68
+
69
+ ### Disabled
70
+
71
+ ```html
72
+ <span class="ga-link ga-link--small ga-link--disabled">
73
+ Link
74
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
75
+ </span>
76
+ <span class="ga-link ga-link--disabled">
77
+ Link
78
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
79
+ </span>
80
+ <span class="ga-link ga-link--large ga-link--disabled">
81
+ Link
82
+ <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
83
+ </span>
84
+ ```
85
+
86
+ ### With leading icon
87
+
88
+ ```html
89
+ <a class="ga-link ga-link--small" href="#">
90
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
91
+ Link
92
+ </a>
93
+ <a class="ga-link" href="#">
94
+ <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
95
+ Link
96
+ </a>
97
+ <a class="ga-link ga-link--large" href="#">
98
+ <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
99
+ Link
100
+ </a>
101
+ ```
102
+
103
+ ### Only text
104
+
105
+ ```html
106
+ <a class="ga-link ga-link--small" href="#">Link</a>
107
+ <a class="ga-link" href="#">Link</a>
108
+ <a class="ga-link ga-link--large" href="#">Link</a>
109
+ ```
package/dist/docs/Menu.md ADDED
@@ -0,0 +1,316 @@
1
+ # Menu
2
+
3
+ ## Visual Structure
4
+
5
+ ```
6
+ ga-menu
7
+ ├── ga-menu__title (optional)
8
+ ├── ga-menu__item [--selected|--disabled|--active]
9
+ │ ├── ga-menu__item-icon (optional)
10
+ │ └── ga-menu__item-content
11
+ │ ├── ga-menu__item-title (optional)
12
+ │ │ ├── ga-menu__item-label
13
+ │ │ └── ga-menu__item-shortcut (optional)
14
+ │ └── ga-menu__item-description (optional)
15
+ └── ga-menu__separator (optional)
16
+ ```
17
+
18
+ ## Elements Hierarchy
19
+
20
+ ### Core Block
21
+
22
+ - `ga-menu` - Main container for the entire menu component
23
+
24
+ ### Mandatory Elements
25
+
26
+ - `ga-menu__title` - The heading/title of the menu section
27
+ - `ga-menu__item` - Individual clickable/interactive menu option
28
+ - `ga-menu__item-content` - Container for all text content within a menu item
29
+ - `ga-menu__item-label` - The primary text label identifying the menu action
30
+
31
+ ### Optional Elements
32
+
33
+ - `ga-menu__item-icon` - Icon displayed within a menu item for visual identification
34
+ - `ga-menu__item-title` - Wrapper that groups the label and shortcut when both are present
35
+ - `ga-menu__item-shortcut` - Visual representation of keyboard shortcut/hotkey
36
+ - `ga-menu__item-description` - Additional explanatory text providing context for the menu item
37
+ - `ga-menu__separator` - Horizontal divider that visually separates groups of related menu items
38
+
39
+ ### Modifiers
40
+
41
+ - `ga-menu__item--selected` - Indicates the currently selected menu item
42
+ - `ga-menu__item--disabled` - Styles the menu item as disabled/non-interactive
43
+ - `ga-menu__item--disabled ga-menu__item--selected` - Combined state for a selected but disabled item
44
+ - `ga-menu__item--active` - Indicates the menu item is currently active/focused through keyboard
45
+
46
+ ## Examples
47
+
48
+ ### Basic
49
+
50
+ ```html
51
+ <div class="ga-menu">
52
+ <button class="ga-menu__item">
53
+ <div class="ga-menu__item-content">
54
+ <div class="ga-menu__item-label">Copy</div>
55
+ </div>
56
+ </button>
57
+ <button class="ga-menu__item">
58
+ <div class="ga-menu__item-content">
59
+ <div class="ga-menu__item-label">Settings</div>
60
+ </div>
61
+ </button>
62
+ <button class="ga-menu__item">
63
+ <div class="ga-menu__item-content">
64
+ <div class="ga-menu__item-label">Delete</div>
65
+ </div>
66
+ </button>
67
+ <button class="ga-menu__item">
68
+ <div class="ga-menu__item-content">
69
+ <div class="ga-menu__item-label">Sign out</div>
70
+ </div>
71
+ </button>
72
+ </div>
73
+ ```
74
+
75
+ ### With Title
76
+
77
+ ```html
78
+ <div class="ga-menu">
79
+ <div class="ga-menu__title">My menu</div>
80
+ <button class="ga-menu__item">
81
+ <div class="ga-menu__item-content">
82
+ <div class="ga-menu__item-label">Copy</div>
83
+ </div>
84
+ </button>
85
+ <button class="ga-menu__item">
86
+ <div class="ga-menu__item-content">
87
+ <div class="ga-menu__item-label">Settings</div>
88
+ </div>
89
+ </button>
90
+ <button class="ga-menu__item">
91
+ <div class="ga-menu__item-content">
92
+ <div class="ga-menu__item-label">Delete</div>
93
+ </div>
94
+ </button>
95
+ <button class="ga-menu__item">
96
+ <div class="ga-menu__item-content">
97
+ <div class="ga-menu__item-label">Sign out</div>
98
+ </div>
99
+ </button>
100
+ </div>
101
+ ```
102
+
103
+ ### With Separator
104
+
105
+ ```html
106
+ <div class="ga-menu">
107
+ <div class="ga-menu__title">My menu</div>
108
+ <button class="ga-menu__item">
109
+ <div class="ga-menu__item-content">
110
+ <div class="ga-menu__item-label">Copy</div>
111
+ </div>
112
+ </button>
113
+ <button class="ga-menu__item">
114
+ <div class="ga-menu__item-content">
115
+ <div class="ga-menu__item-label">Settings</div>
116
+ </div>
117
+ </button>
118
+ <button class="ga-menu__item">
119
+ <div class="ga-menu__item-content">
120
+ <div class="ga-menu__item-label">Delete</div>
121
+ </div>
122
+ </button>
123
+ <div class="ga-menu__separator"></div>
124
+ <button class="ga-menu__item">
125
+ <div class="ga-menu__item-content">
126
+ <div class="ga-menu__item-label">Sign out</div>
127
+ </div>
128
+ </button>
129
+ </div>
130
+ ```
131
+
132
+ ### With Icons
133
+
134
+ ```html
135
+ <div class="ga-menu">
136
+ <div class="ga-menu__title">My menu</div>
137
+ <button class="ga-menu__item">
138
+ <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
139
+ <div class="ga-menu__item-content">
140
+ <div class="ga-menu__item-label">Copy</div>
141
+ </div>
142
+ </button>
143
+ <button class="ga-menu__item">
144
+ <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
145
+ <div class="ga-menu__item-content">
146
+ <div class="ga-menu__item-label">Settings</div>
147
+ </div>
148
+ </button>
149
+ <button class="ga-menu__item">
150
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
151
+ <div class="ga-menu__item-content">
152
+ <div class="ga-menu__item-label">Delete</div>
153
+ </div>
154
+ </button>
155
+ <div class="ga-menu__separator"></div>
156
+ <button class="ga-menu__item">
157
+ <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
158
+ <div class="ga-menu__item-content">
159
+ <div class="ga-menu__item-label">Sign out</div>
160
+ </div>
161
+ </button>
162
+ </div>
163
+ ```
164
+
165
+ ### With Shortcut
166
+
167
+ ```html
168
+ <div class="ga-menu max-w-50">
169
+ <div class="ga-menu__title">My menu</div>
170
+ <button class="ga-menu__item">
171
+ <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
172
+ <div class="ga-menu__item-content">
173
+ <div class="ga-menu__item-label">Copy</div>
174
+ </div>
175
+ </button>
176
+ <button class="ga-menu__item">
177
+ <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
178
+ <div class="ga-menu__item-content">
179
+ <div class="ga-menu__item-title">
180
+ <div class="ga-menu__item-label">Settings</div>
181
+ <span class="ga-menu__item-shortcut">⌘ ⌥ S</span>
182
+ </div>
183
+ <div class="ga-menu__item-description">
184
+ Configure your account preferences and adjust application display
185
+ options
186
+ </div>
187
+ </div>
188
+ </button>
189
+ <button class="ga-menu__item">
190
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
191
+ <div class="ga-menu__item-content">
192
+ <div class="ga-menu__item-label">Delete</div>
193
+ </div>
194
+ </button>
195
+ <div class="ga-menu__separator"></div>
196
+ <button class="ga-menu__item">
197
+ <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
198
+ <div class="ga-menu__item-content">
199
+ <div class="ga-menu__item-label">Sign out</div>
200
+ </div>
201
+ </button>
202
+ </div>
203
+ ```
204
+
205
+ ### With Description
206
+
207
+ ```html
208
+ <div class="ga-menu max-w-50">
209
+ <div class="ga-menu__title">My menu</div>
210
+ <button class="ga-menu__item">
211
+ <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
212
+ <div class="ga-menu__item-content">
213
+ <div class="ga-menu__item-label">Copy</div>
214
+ </div>
215
+ </button>
216
+ <button class="ga-menu__item">
217
+ <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
218
+ <div class="ga-menu__item-content">
219
+ <div class="ga-menu__item-label">Settings</div>
220
+ <div class="ga-menu__item-description">
221
+ Configure your account preferences and adjust application display
222
+ options
223
+ </div>
224
+ </div>
225
+ </button>
226
+ <button class="ga-menu__item">
227
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
228
+ <div class="ga-menu__item-content">
229
+ <div class="ga-menu__item-label">Delete</div>
230
+ </div>
231
+ </button>
232
+ <div class="ga-menu__separator"></div>
233
+ <button class="ga-menu__item">
234
+ <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
235
+ <div class="ga-menu__item-content">
236
+ <div class="ga-menu__item-label">Sign out</div>
237
+ </div>
238
+ </button>
239
+ </div>
240
+ ```
241
+
242
+ ### With Sub Menu
243
+
244
+ ```html
245
+ <div class="ga-menu">
246
+ <div class="ga-menu__title">My menu</div>
247
+ <button class="ga-menu__item">
248
+ <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
249
+ <div class="ga-menu__item-content">
250
+ <div class="ga-menu__item-label">Copy</div>
251
+ </div>
252
+ </button>
253
+ <button class="ga-menu__item">
254
+ <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
255
+ <div class="ga-menu__item-content">
256
+ <div class="ga-menu__item-title">
257
+ <div class="ga-menu__item-label">Settings</div>
258
+ <!-- icon: chevron-right, size=16, class="ga-menu__item-icon" -->
259
+ </div>
260
+ </div>
261
+ </button>
262
+ <button class="ga-menu__item">
263
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
264
+ <div class="ga-menu__item-content">
265
+ <div class="ga-menu__item-label">Delete</div>
266
+ </div>
267
+ </button>
268
+ <div class="ga-menu__separator"></div>
269
+ <button class="ga-menu__item">
270
+ <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
271
+ <div class="ga-menu__item-content">
272
+ <div class="ga-menu__item-label">Sign out</div>
273
+ </div>
274
+ </button>
275
+ </div>
276
+ ```
277
+
278
+ ### Statuses
279
+
280
+ ```html
281
+ <div class="ga-menu">
282
+ <button class="ga-menu__item">
283
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
284
+ <div class="ga-menu__item-content">
285
+ <div class="ga-menu__item-label">Default</div>
286
+ </div>
287
+ </button>
288
+ <button class="ga-menu__item ga-menu__item--selected">
289
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
290
+ <div class="ga-menu__item-content">
291
+ <div class="ga-menu__item-label">Selected</div>
292
+ </div>
293
+ </button>
294
+ <button class="ga-menu__item ga-menu__item--active">
295
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
296
+ <div class="ga-menu__item-content">
297
+ <div class="ga-menu__item-label">Active (focused)</div>
298
+ </div>
299
+ </button>
300
+ <button class="ga-menu__item ga-menu__item--disabled" disabled="">
301
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
302
+ <div class="ga-menu__item-content">
303
+ <div class="ga-menu__item-label">Disabled</div>
304
+ </div>
305
+ </button>
306
+ <button
307
+ class="ga-menu__item ga-menu__item--disabled ga-menu__item--selected"
308
+ disabled=""
309
+ >
310
+ <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
311
+ <div class="ga-menu__item-content">
312
+ <div class="ga-menu__item-label">Disabled Selected</div>
313
+ </div>
314
+ </button>
315
+ </div>
316
+ ```