@cognitiv/components-web 1.0.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.
- package/dist/component-manifest.json +749 -0
- package/dist/index.d.ts +3523 -0
- package/dist/index.js +979 -0
- package/package.json +93 -0
|
@@ -0,0 +1,749 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "1.0.0",
|
|
3
|
+
"lastUpdated": "2026-01-27",
|
|
4
|
+
"components": {
|
|
5
|
+
"Input": {
|
|
6
|
+
"name": "Input",
|
|
7
|
+
"description": "Text input component with optional dropdown suggestions",
|
|
8
|
+
"category": "forms",
|
|
9
|
+
"whenToUse": [
|
|
10
|
+
"Single-line text input fields",
|
|
11
|
+
"Search inputs with autocomplete suggestions",
|
|
12
|
+
"Form fields requiring text entry"
|
|
13
|
+
],
|
|
14
|
+
"whenNotToUse": [
|
|
15
|
+
"Multi-line text (use TextArea instead)",
|
|
16
|
+
"Selecting from predefined options (use Select instead)"
|
|
17
|
+
],
|
|
18
|
+
"props": {},
|
|
19
|
+
"examples": [],
|
|
20
|
+
"relatedComponents": ["InputContainer", "TextArea", "Select"],
|
|
21
|
+
"accessibility": {
|
|
22
|
+
"notes": [
|
|
23
|
+
"Supports standard keyboard navigation",
|
|
24
|
+
"ARIA labels should be provided via InputContainer"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"gotchas": []
|
|
28
|
+
},
|
|
29
|
+
"Select": {
|
|
30
|
+
"name": "Select",
|
|
31
|
+
"description": "Dropdown select component for choosing from a list of options",
|
|
32
|
+
"category": "forms",
|
|
33
|
+
"whenToUse": [
|
|
34
|
+
"Selecting a single option from a list",
|
|
35
|
+
"Form fields with predefined choices",
|
|
36
|
+
"Dropdown menus in forms"
|
|
37
|
+
],
|
|
38
|
+
"whenNotToUse": [
|
|
39
|
+
"Multiple selections (use MultiSelect instead)",
|
|
40
|
+
"Very long lists (consider searchable select)"
|
|
41
|
+
],
|
|
42
|
+
"props": {},
|
|
43
|
+
"examples": [],
|
|
44
|
+
"relatedComponents": ["MultiSelect", "Dropdown", "Input"],
|
|
45
|
+
"accessibility": {
|
|
46
|
+
"notes": [
|
|
47
|
+
"Keyboard accessible with arrow keys",
|
|
48
|
+
"Supports screen readers"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
"gotchas": []
|
|
52
|
+
},
|
|
53
|
+
"MultiSelect": {
|
|
54
|
+
"name": "MultiSelect",
|
|
55
|
+
"description": "Select component that allows multiple option selections",
|
|
56
|
+
"category": "forms",
|
|
57
|
+
"whenToUse": [
|
|
58
|
+
"Selecting multiple options from a list",
|
|
59
|
+
"Tag selection interfaces",
|
|
60
|
+
"Filter selection with multiple choices"
|
|
61
|
+
],
|
|
62
|
+
"whenNotToUse": ["Single selection (use Select instead)"],
|
|
63
|
+
"props": {},
|
|
64
|
+
"examples": [],
|
|
65
|
+
"relatedComponents": ["Select", "Dropdown"],
|
|
66
|
+
"accessibility": {
|
|
67
|
+
"notes": [
|
|
68
|
+
"Keyboard accessible",
|
|
69
|
+
"Selected items should be clearly indicated"
|
|
70
|
+
]
|
|
71
|
+
},
|
|
72
|
+
"gotchas": []
|
|
73
|
+
},
|
|
74
|
+
"Checkbox": {
|
|
75
|
+
"name": "Checkbox",
|
|
76
|
+
"description": "Checkbox input for boolean selections",
|
|
77
|
+
"category": "forms",
|
|
78
|
+
"whenToUse": [
|
|
79
|
+
"Boolean/toggle selections",
|
|
80
|
+
"Agreement checkboxes",
|
|
81
|
+
"Multiple independent selections"
|
|
82
|
+
],
|
|
83
|
+
"whenNotToUse": [
|
|
84
|
+
"Single exclusive choice (use radio buttons or Select)",
|
|
85
|
+
"On/off toggles (use Switch instead)"
|
|
86
|
+
],
|
|
87
|
+
"props": {},
|
|
88
|
+
"examples": [],
|
|
89
|
+
"relatedComponents": ["Switch", "Input"],
|
|
90
|
+
"accessibility": {
|
|
91
|
+
"notes": [
|
|
92
|
+
"Standard checkbox keyboard support",
|
|
93
|
+
"Labels should be associated properly"
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
"gotchas": []
|
|
97
|
+
},
|
|
98
|
+
"Switch": {
|
|
99
|
+
"name": "Switch",
|
|
100
|
+
"description": "Toggle switch component for on/off states",
|
|
101
|
+
"category": "forms",
|
|
102
|
+
"whenToUse": [
|
|
103
|
+
"On/off toggles",
|
|
104
|
+
"Settings switches",
|
|
105
|
+
"Feature enable/disable controls"
|
|
106
|
+
],
|
|
107
|
+
"whenNotToUse": [
|
|
108
|
+
"Multiple selections (use Checkbox instead)",
|
|
109
|
+
"Single choice from options (use Select instead)"
|
|
110
|
+
],
|
|
111
|
+
"props": {},
|
|
112
|
+
"examples": [],
|
|
113
|
+
"relatedComponents": ["Checkbox"],
|
|
114
|
+
"accessibility": {
|
|
115
|
+
"notes": [
|
|
116
|
+
"Keyboard accessible (Space to toggle)",
|
|
117
|
+
"State should be clearly announced"
|
|
118
|
+
]
|
|
119
|
+
},
|
|
120
|
+
"gotchas": []
|
|
121
|
+
},
|
|
122
|
+
"TextArea": {
|
|
123
|
+
"name": "TextArea",
|
|
124
|
+
"description": "Multi-line text input component",
|
|
125
|
+
"category": "forms",
|
|
126
|
+
"whenToUse": [
|
|
127
|
+
"Multi-line text input",
|
|
128
|
+
"Long-form content entry",
|
|
129
|
+
"Comments and descriptions"
|
|
130
|
+
],
|
|
131
|
+
"whenNotToUse": ["Single-line text (use Input instead)"],
|
|
132
|
+
"props": {},
|
|
133
|
+
"examples": [],
|
|
134
|
+
"relatedComponents": ["Input", "InputContainer"],
|
|
135
|
+
"accessibility": {
|
|
136
|
+
"notes": [
|
|
137
|
+
"Supports standard textarea keyboard navigation",
|
|
138
|
+
"Resizable by default"
|
|
139
|
+
]
|
|
140
|
+
},
|
|
141
|
+
"gotchas": []
|
|
142
|
+
},
|
|
143
|
+
"CurrencyInput": {
|
|
144
|
+
"name": "CurrencyInput",
|
|
145
|
+
"description": "Input component specifically designed for currency values with formatting",
|
|
146
|
+
"category": "forms",
|
|
147
|
+
"whenToUse": [
|
|
148
|
+
"Currency amount inputs",
|
|
149
|
+
"Price fields",
|
|
150
|
+
"Financial data entry"
|
|
151
|
+
],
|
|
152
|
+
"whenNotToUse": [
|
|
153
|
+
"Non-currency numeric input (use Input with type='number')",
|
|
154
|
+
"Text input (use Input instead)"
|
|
155
|
+
],
|
|
156
|
+
"props": {},
|
|
157
|
+
"examples": [],
|
|
158
|
+
"relatedComponents": ["Input"],
|
|
159
|
+
"accessibility": {
|
|
160
|
+
"notes": [
|
|
161
|
+
"Currency symbol should be clearly indicated",
|
|
162
|
+
"Decimal precision should be documented"
|
|
163
|
+
]
|
|
164
|
+
},
|
|
165
|
+
"gotchas": []
|
|
166
|
+
},
|
|
167
|
+
"DateInput": {
|
|
168
|
+
"name": "DateInput",
|
|
169
|
+
"description": "Input component for date entry with validation",
|
|
170
|
+
"category": "forms",
|
|
171
|
+
"whenToUse": [
|
|
172
|
+
"Date entry in forms",
|
|
173
|
+
"Birthdate fields",
|
|
174
|
+
"Date range inputs"
|
|
175
|
+
],
|
|
176
|
+
"whenNotToUse": [
|
|
177
|
+
"Date selection with calendar (use DatePicker instead)",
|
|
178
|
+
"Time input (use TimeInput instead)"
|
|
179
|
+
],
|
|
180
|
+
"props": {},
|
|
181
|
+
"examples": [],
|
|
182
|
+
"relatedComponents": ["DatePicker", "Calendar", "TimeInput"],
|
|
183
|
+
"accessibility": {
|
|
184
|
+
"notes": [
|
|
185
|
+
"Date format should be clearly indicated",
|
|
186
|
+
"Supports keyboard date entry"
|
|
187
|
+
]
|
|
188
|
+
},
|
|
189
|
+
"gotchas": []
|
|
190
|
+
},
|
|
191
|
+
"TimeInput": {
|
|
192
|
+
"name": "TimeInput",
|
|
193
|
+
"description": "Input component for time entry with validation",
|
|
194
|
+
"category": "forms",
|
|
195
|
+
"whenToUse": [
|
|
196
|
+
"Time entry in forms",
|
|
197
|
+
"Schedule time inputs",
|
|
198
|
+
"Duration inputs"
|
|
199
|
+
],
|
|
200
|
+
"whenNotToUse": [
|
|
201
|
+
"Date input (use DateInput instead)",
|
|
202
|
+
"Date and time together (consider DatePicker with time)"
|
|
203
|
+
],
|
|
204
|
+
"props": {},
|
|
205
|
+
"examples": [],
|
|
206
|
+
"relatedComponents": ["DateInput", "DatePicker"],
|
|
207
|
+
"accessibility": {
|
|
208
|
+
"notes": [
|
|
209
|
+
"Time format (12/24 hour) should be clear",
|
|
210
|
+
"Supports keyboard time entry"
|
|
211
|
+
]
|
|
212
|
+
},
|
|
213
|
+
"gotchas": []
|
|
214
|
+
},
|
|
215
|
+
"InputContainer": {
|
|
216
|
+
"name": "InputContainer",
|
|
217
|
+
"description": "Wrapper component that provides label, error, and helper text for form inputs",
|
|
218
|
+
"category": "forms",
|
|
219
|
+
"whenToUse": [
|
|
220
|
+
"Wrapping form inputs with labels",
|
|
221
|
+
"Displaying validation errors",
|
|
222
|
+
"Adding helper text to inputs"
|
|
223
|
+
],
|
|
224
|
+
"whenNotToUse": [
|
|
225
|
+
"Standalone input (use Input directly if no label/error needed)"
|
|
226
|
+
],
|
|
227
|
+
"props": {},
|
|
228
|
+
"examples": [],
|
|
229
|
+
"relatedComponents": ["Input", "TextArea", "Select"],
|
|
230
|
+
"accessibility": {
|
|
231
|
+
"notes": [
|
|
232
|
+
"Properly associates labels with inputs",
|
|
233
|
+
"Error messages are announced to screen readers"
|
|
234
|
+
]
|
|
235
|
+
},
|
|
236
|
+
"gotchas": []
|
|
237
|
+
},
|
|
238
|
+
"Button": {
|
|
239
|
+
"name": "Button",
|
|
240
|
+
"description": "Button component with multiple variants and sizes",
|
|
241
|
+
"category": "interactive",
|
|
242
|
+
"whenToUse": [
|
|
243
|
+
"Primary actions",
|
|
244
|
+
"Form submissions",
|
|
245
|
+
"Navigation triggers"
|
|
246
|
+
],
|
|
247
|
+
"whenNotToUse": [
|
|
248
|
+
"Icon-only actions (use ClickableIcon instead)",
|
|
249
|
+
"Link navigation (use anchor tag with Button styling)"
|
|
250
|
+
],
|
|
251
|
+
"props": {},
|
|
252
|
+
"examples": [],
|
|
253
|
+
"relatedComponents": ["ClickableIcon", "Icon"],
|
|
254
|
+
"accessibility": {
|
|
255
|
+
"notes": [
|
|
256
|
+
"Keyboard accessible (Enter/Space)",
|
|
257
|
+
"Disabled state is properly announced"
|
|
258
|
+
]
|
|
259
|
+
},
|
|
260
|
+
"gotchas": []
|
|
261
|
+
},
|
|
262
|
+
"ClickableIcon": {
|
|
263
|
+
"name": "ClickableIcon",
|
|
264
|
+
"description": "Clickable icon component for icon-only actions",
|
|
265
|
+
"category": "interactive",
|
|
266
|
+
"whenToUse": [
|
|
267
|
+
"Icon-only buttons",
|
|
268
|
+
"Toolbar actions",
|
|
269
|
+
"Compact action buttons"
|
|
270
|
+
],
|
|
271
|
+
"whenNotToUse": ["Actions requiring text labels (use Button instead)"],
|
|
272
|
+
"props": {},
|
|
273
|
+
"examples": [],
|
|
274
|
+
"relatedComponents": ["Icon", "Button"],
|
|
275
|
+
"accessibility": {
|
|
276
|
+
"notes": [
|
|
277
|
+
"Requires aria-label for screen readers",
|
|
278
|
+
"Keyboard accessible"
|
|
279
|
+
]
|
|
280
|
+
},
|
|
281
|
+
"gotchas": []
|
|
282
|
+
},
|
|
283
|
+
"Icon": {
|
|
284
|
+
"name": "Icon",
|
|
285
|
+
"description": "Icon component using FontAwesome icons",
|
|
286
|
+
"category": "interactive",
|
|
287
|
+
"whenToUse": [
|
|
288
|
+
"Displaying icons",
|
|
289
|
+
"Visual indicators",
|
|
290
|
+
"Decorative icons"
|
|
291
|
+
],
|
|
292
|
+
"whenNotToUse": [
|
|
293
|
+
"Clickable icons (use ClickableIcon instead)",
|
|
294
|
+
"Images (use Image component instead)"
|
|
295
|
+
],
|
|
296
|
+
"props": {},
|
|
297
|
+
"examples": [],
|
|
298
|
+
"relatedComponents": ["ClickableIcon", "Button"],
|
|
299
|
+
"accessibility": {
|
|
300
|
+
"notes": [
|
|
301
|
+
"Decorative icons should have aria-hidden='true'",
|
|
302
|
+
"Meaningful icons should have aria-label"
|
|
303
|
+
]
|
|
304
|
+
},
|
|
305
|
+
"gotchas": []
|
|
306
|
+
},
|
|
307
|
+
"Flex": {
|
|
308
|
+
"name": "Flex",
|
|
309
|
+
"description": "Flexbox layout component for flexible container layouts",
|
|
310
|
+
"category": "layout",
|
|
311
|
+
"whenToUse": [
|
|
312
|
+
"Flexible layouts",
|
|
313
|
+
"Responsive component arrangements",
|
|
314
|
+
"Spacing and alignment control"
|
|
315
|
+
],
|
|
316
|
+
"whenNotToUse": [
|
|
317
|
+
"Simple spacing (consider margin utilities)",
|
|
318
|
+
"Grid layouts (consider CSS Grid)"
|
|
319
|
+
],
|
|
320
|
+
"props": {},
|
|
321
|
+
"examples": [],
|
|
322
|
+
"relatedComponents": ["Divider"],
|
|
323
|
+
"accessibility": {
|
|
324
|
+
"notes": [
|
|
325
|
+
"Layout component - no direct accessibility impact",
|
|
326
|
+
"Ensure logical reading order"
|
|
327
|
+
]
|
|
328
|
+
},
|
|
329
|
+
"gotchas": []
|
|
330
|
+
},
|
|
331
|
+
"Divider": {
|
|
332
|
+
"name": "Divider",
|
|
333
|
+
"description": "Visual divider component for separating content",
|
|
334
|
+
"category": "layout",
|
|
335
|
+
"whenToUse": [
|
|
336
|
+
"Separating sections",
|
|
337
|
+
"Visual content breaks",
|
|
338
|
+
"List item separators"
|
|
339
|
+
],
|
|
340
|
+
"whenNotToUse": [
|
|
341
|
+
"Interactive elements",
|
|
342
|
+
"Decorative borders (use CSS borders instead)"
|
|
343
|
+
],
|
|
344
|
+
"props": {},
|
|
345
|
+
"examples": [],
|
|
346
|
+
"relatedComponents": ["Flex"],
|
|
347
|
+
"accessibility": {
|
|
348
|
+
"notes": [
|
|
349
|
+
"Decorative divider - should have aria-hidden='true'",
|
|
350
|
+
"Semantic dividers should use proper HTML elements"
|
|
351
|
+
]
|
|
352
|
+
},
|
|
353
|
+
"gotchas": []
|
|
354
|
+
},
|
|
355
|
+
"Table": {
|
|
356
|
+
"name": "Table",
|
|
357
|
+
"description": "Data table component with sorting, pagination, and customization",
|
|
358
|
+
"category": "data",
|
|
359
|
+
"whenToUse": [
|
|
360
|
+
"Displaying tabular data",
|
|
361
|
+
"Sortable data lists",
|
|
362
|
+
"Data grids with pagination"
|
|
363
|
+
],
|
|
364
|
+
"whenNotToUse": [
|
|
365
|
+
"Simple lists (consider using lists)",
|
|
366
|
+
"Layout purposes (use Flex or Grid instead)"
|
|
367
|
+
],
|
|
368
|
+
"props": {},
|
|
369
|
+
"examples": [],
|
|
370
|
+
"relatedComponents": ["Text", "StatusLabel"],
|
|
371
|
+
"accessibility": {
|
|
372
|
+
"notes": [
|
|
373
|
+
"Proper table semantics with headers",
|
|
374
|
+
"Keyboard navigation for sortable columns",
|
|
375
|
+
"Screen reader announcements for sorting"
|
|
376
|
+
]
|
|
377
|
+
},
|
|
378
|
+
"gotchas": []
|
|
379
|
+
},
|
|
380
|
+
"Text": {
|
|
381
|
+
"name": "Text",
|
|
382
|
+
"description": "Typography component with theme-based text styling",
|
|
383
|
+
"category": "data",
|
|
384
|
+
"whenToUse": ["Body text", "Headings", "Labels and captions"],
|
|
385
|
+
"whenNotToUse": [
|
|
386
|
+
"Interactive text (use Button or link)",
|
|
387
|
+
"Input fields (use Input component)"
|
|
388
|
+
],
|
|
389
|
+
"props": {},
|
|
390
|
+
"examples": [],
|
|
391
|
+
"relatedComponents": ["StatusLabel"],
|
|
392
|
+
"accessibility": {
|
|
393
|
+
"notes": [
|
|
394
|
+
"Semantic HTML should be used for headings",
|
|
395
|
+
"Color contrast should meet WCAG standards"
|
|
396
|
+
]
|
|
397
|
+
},
|
|
398
|
+
"gotchas": []
|
|
399
|
+
},
|
|
400
|
+
"Avatar": {
|
|
401
|
+
"name": "Avatar",
|
|
402
|
+
"description": "Avatar component for user profile images with fallback",
|
|
403
|
+
"category": "data",
|
|
404
|
+
"whenToUse": [
|
|
405
|
+
"User profile pictures",
|
|
406
|
+
"Contact avatars",
|
|
407
|
+
"User identification"
|
|
408
|
+
],
|
|
409
|
+
"whenNotToUse": [
|
|
410
|
+
"General images (use Image component instead)",
|
|
411
|
+
"Icons (use Icon component instead)"
|
|
412
|
+
],
|
|
413
|
+
"props": {},
|
|
414
|
+
"examples": [],
|
|
415
|
+
"relatedComponents": ["Image"],
|
|
416
|
+
"accessibility": {
|
|
417
|
+
"notes": [
|
|
418
|
+
"Should have alt text or aria-label",
|
|
419
|
+
"Fallback should be accessible"
|
|
420
|
+
]
|
|
421
|
+
},
|
|
422
|
+
"gotchas": []
|
|
423
|
+
},
|
|
424
|
+
"Image": {
|
|
425
|
+
"name": "Image",
|
|
426
|
+
"description": "Image component with lazy loading and fallback support",
|
|
427
|
+
"category": "data",
|
|
428
|
+
"whenToUse": ["Displaying images", "Product images", "Content images"],
|
|
429
|
+
"whenNotToUse": [
|
|
430
|
+
"Icons (use Icon component instead)",
|
|
431
|
+
"User avatars (use Avatar component instead)"
|
|
432
|
+
],
|
|
433
|
+
"props": {},
|
|
434
|
+
"examples": [],
|
|
435
|
+
"relatedComponents": ["Avatar"],
|
|
436
|
+
"accessibility": {
|
|
437
|
+
"notes": [
|
|
438
|
+
"Requires alt text for meaningful images",
|
|
439
|
+
"Decorative images should have empty alt"
|
|
440
|
+
]
|
|
441
|
+
},
|
|
442
|
+
"gotchas": []
|
|
443
|
+
},
|
|
444
|
+
"StatusLabel": {
|
|
445
|
+
"name": "StatusLabel",
|
|
446
|
+
"description": "Status label component for displaying status indicators",
|
|
447
|
+
"category": "data",
|
|
448
|
+
"whenToUse": ["Status indicators", "Badge labels", "State displays"],
|
|
449
|
+
"whenNotToUse": [
|
|
450
|
+
"Interactive elements",
|
|
451
|
+
"Large text blocks (use Text component)"
|
|
452
|
+
],
|
|
453
|
+
"props": {},
|
|
454
|
+
"examples": [],
|
|
455
|
+
"relatedComponents": ["Text"],
|
|
456
|
+
"accessibility": {
|
|
457
|
+
"notes": [
|
|
458
|
+
"Status should be announced to screen readers",
|
|
459
|
+
"Color should not be the only indicator"
|
|
460
|
+
]
|
|
461
|
+
},
|
|
462
|
+
"gotchas": []
|
|
463
|
+
},
|
|
464
|
+
"Dropdown": {
|
|
465
|
+
"name": "Dropdown",
|
|
466
|
+
"description": "Dropdown menu component with trigger, menu, and items",
|
|
467
|
+
"category": "navigation",
|
|
468
|
+
"whenToUse": ["Context menus", "Action menus", "Navigation dropdowns"],
|
|
469
|
+
"whenNotToUse": [
|
|
470
|
+
"Form selects (use Select component instead)",
|
|
471
|
+
"Simple links (use anchor tags)"
|
|
472
|
+
],
|
|
473
|
+
"props": {},
|
|
474
|
+
"examples": [],
|
|
475
|
+
"relatedComponents": ["Select", "MultiSelect"],
|
|
476
|
+
"accessibility": {
|
|
477
|
+
"notes": [
|
|
478
|
+
"Keyboard navigation with arrow keys",
|
|
479
|
+
"Focus management on open/close",
|
|
480
|
+
"Escape key closes menu"
|
|
481
|
+
]
|
|
482
|
+
},
|
|
483
|
+
"gotchas": []
|
|
484
|
+
},
|
|
485
|
+
"TabBar": {
|
|
486
|
+
"name": "TabBar",
|
|
487
|
+
"description": "Tab navigation component for switching between views",
|
|
488
|
+
"category": "navigation",
|
|
489
|
+
"whenToUse": ["Tab navigation", "View switching", "Section navigation"],
|
|
490
|
+
"whenNotToUse": [
|
|
491
|
+
"Primary navigation (use proper nav elements)",
|
|
492
|
+
"Single view (no need for tabs)"
|
|
493
|
+
],
|
|
494
|
+
"props": {},
|
|
495
|
+
"examples": [],
|
|
496
|
+
"relatedComponents": ["Button"],
|
|
497
|
+
"accessibility": {
|
|
498
|
+
"notes": [
|
|
499
|
+
"Keyboard navigation with arrow keys",
|
|
500
|
+
"ARIA tabs pattern",
|
|
501
|
+
"Active tab should be clearly indicated"
|
|
502
|
+
]
|
|
503
|
+
},
|
|
504
|
+
"gotchas": []
|
|
505
|
+
},
|
|
506
|
+
"Banner": {
|
|
507
|
+
"name": "Banner",
|
|
508
|
+
"description": "Banner component for displaying messages and alerts",
|
|
509
|
+
"category": "feedback",
|
|
510
|
+
"whenToUse": [
|
|
511
|
+
"Alert messages",
|
|
512
|
+
"System notifications",
|
|
513
|
+
"Important announcements"
|
|
514
|
+
],
|
|
515
|
+
"whenNotToUse": [
|
|
516
|
+
"Modal dialogs (use Modal component)",
|
|
517
|
+
"Tooltips (use Tooltip component)"
|
|
518
|
+
],
|
|
519
|
+
"props": {},
|
|
520
|
+
"examples": [],
|
|
521
|
+
"relatedComponents": ["Tooltip"],
|
|
522
|
+
"accessibility": {
|
|
523
|
+
"notes": [
|
|
524
|
+
"Should have appropriate ARIA role",
|
|
525
|
+
"Dismissible banners should have accessible close button",
|
|
526
|
+
"Important messages should be announced"
|
|
527
|
+
]
|
|
528
|
+
},
|
|
529
|
+
"gotchas": []
|
|
530
|
+
},
|
|
531
|
+
"Tooltip": {
|
|
532
|
+
"name": "Tooltip",
|
|
533
|
+
"description": "Tooltip component for displaying contextual information",
|
|
534
|
+
"category": "feedback",
|
|
535
|
+
"whenToUse": [
|
|
536
|
+
"Additional information on hover",
|
|
537
|
+
"Help text for form fields",
|
|
538
|
+
"Contextual hints"
|
|
539
|
+
],
|
|
540
|
+
"whenNotToUse": [
|
|
541
|
+
"Important information (use Banner or Modal)",
|
|
542
|
+
"Long content (use Modal or Slideout)"
|
|
543
|
+
],
|
|
544
|
+
"props": {},
|
|
545
|
+
"examples": [],
|
|
546
|
+
"relatedComponents": ["ClickableIcon"],
|
|
547
|
+
"accessibility": {
|
|
548
|
+
"notes": [
|
|
549
|
+
"Keyboard accessible (focus triggers tooltip)",
|
|
550
|
+
"Screen reader support",
|
|
551
|
+
"Should not be the only way to access information"
|
|
552
|
+
]
|
|
553
|
+
},
|
|
554
|
+
"gotchas": []
|
|
555
|
+
},
|
|
556
|
+
"Spinner": {
|
|
557
|
+
"name": "Spinner",
|
|
558
|
+
"description": "Loading spinner component for indicating loading states",
|
|
559
|
+
"category": "feedback",
|
|
560
|
+
"whenToUse": [
|
|
561
|
+
"Loading indicators",
|
|
562
|
+
"Async operation feedback",
|
|
563
|
+
"Page loading states"
|
|
564
|
+
],
|
|
565
|
+
"whenNotToUse": [
|
|
566
|
+
"Skeleton loading (use LoadingPlaceholder instead)",
|
|
567
|
+
"Progress indicators (consider progress bar)"
|
|
568
|
+
],
|
|
569
|
+
"props": {},
|
|
570
|
+
"examples": [],
|
|
571
|
+
"relatedComponents": ["LoadingPlaceholder"],
|
|
572
|
+
"accessibility": {
|
|
573
|
+
"notes": [
|
|
574
|
+
"Should have aria-label='Loading'",
|
|
575
|
+
"Should be announced to screen readers",
|
|
576
|
+
"Consider aria-live regions for status updates"
|
|
577
|
+
]
|
|
578
|
+
},
|
|
579
|
+
"gotchas": []
|
|
580
|
+
},
|
|
581
|
+
"LoadingPlaceholder": {
|
|
582
|
+
"name": "LoadingPlaceholder",
|
|
583
|
+
"description": "Skeleton loading component for content placeholders",
|
|
584
|
+
"category": "feedback",
|
|
585
|
+
"whenToUse": [
|
|
586
|
+
"Content loading states",
|
|
587
|
+
"Skeleton screens",
|
|
588
|
+
"Placeholder content"
|
|
589
|
+
],
|
|
590
|
+
"whenNotToUse": [
|
|
591
|
+
"Spinner loading (use Spinner instead)",
|
|
592
|
+
"Empty states (show empty state message)"
|
|
593
|
+
],
|
|
594
|
+
"props": {},
|
|
595
|
+
"examples": [],
|
|
596
|
+
"relatedComponents": ["Spinner", "Table"],
|
|
597
|
+
"accessibility": {
|
|
598
|
+
"notes": [
|
|
599
|
+
"Should have aria-label='Loading'",
|
|
600
|
+
"Should be replaced with actual content when loaded"
|
|
601
|
+
]
|
|
602
|
+
},
|
|
603
|
+
"gotchas": []
|
|
604
|
+
},
|
|
605
|
+
"Modal": {
|
|
606
|
+
"name": "Modal",
|
|
607
|
+
"description": "Modal dialog component for overlaying content",
|
|
608
|
+
"category": "overlay",
|
|
609
|
+
"whenToUse": [
|
|
610
|
+
"Important dialogs",
|
|
611
|
+
"Confirmation dialogs",
|
|
612
|
+
"Focused content overlays"
|
|
613
|
+
],
|
|
614
|
+
"whenNotToUse": [
|
|
615
|
+
"Non-blocking content (use Slideout instead)",
|
|
616
|
+
"Simple tooltips (use Tooltip instead)"
|
|
617
|
+
],
|
|
618
|
+
"props": {},
|
|
619
|
+
"examples": [],
|
|
620
|
+
"relatedComponents": ["Slideout"],
|
|
621
|
+
"accessibility": {
|
|
622
|
+
"notes": [
|
|
623
|
+
"Focus trap within modal",
|
|
624
|
+
"Focus returns to trigger on close",
|
|
625
|
+
"Escape key closes modal",
|
|
626
|
+
"Backdrop click closes (if configured)"
|
|
627
|
+
]
|
|
628
|
+
},
|
|
629
|
+
"gotchas": []
|
|
630
|
+
},
|
|
631
|
+
"Slideout": {
|
|
632
|
+
"name": "Slideout",
|
|
633
|
+
"description": "Slideout panel component that slides in from the side",
|
|
634
|
+
"category": "overlay",
|
|
635
|
+
"whenToUse": ["Side panels", "Detail views", "Non-blocking overlays"],
|
|
636
|
+
"whenNotToUse": [
|
|
637
|
+
"Blocking dialogs (use Modal instead)",
|
|
638
|
+
"Simple tooltips (use Tooltip instead)"
|
|
639
|
+
],
|
|
640
|
+
"props": {},
|
|
641
|
+
"examples": [],
|
|
642
|
+
"relatedComponents": ["Modal"],
|
|
643
|
+
"accessibility": {
|
|
644
|
+
"notes": [
|
|
645
|
+
"Focus management on open/close",
|
|
646
|
+
"Keyboard accessible",
|
|
647
|
+
"Escape key closes slideout"
|
|
648
|
+
]
|
|
649
|
+
},
|
|
650
|
+
"gotchas": []
|
|
651
|
+
},
|
|
652
|
+
"Calendar": {
|
|
653
|
+
"name": "Calendar",
|
|
654
|
+
"description": "Calendar component for date selection with range support",
|
|
655
|
+
"category": "datetime",
|
|
656
|
+
"whenToUse": ["Date selection", "Date range selection", "Calendar views"],
|
|
657
|
+
"whenNotToUse": [
|
|
658
|
+
"Simple date input (use DateInput instead)",
|
|
659
|
+
"Time selection (use TimeInput instead)"
|
|
660
|
+
],
|
|
661
|
+
"props": {},
|
|
662
|
+
"examples": [],
|
|
663
|
+
"relatedComponents": ["DatePicker", "DateInput"],
|
|
664
|
+
"accessibility": {
|
|
665
|
+
"notes": [
|
|
666
|
+
"Keyboard navigation with arrow keys",
|
|
667
|
+
"Screen reader support for dates",
|
|
668
|
+
"ARIA calendar pattern"
|
|
669
|
+
]
|
|
670
|
+
},
|
|
671
|
+
"gotchas": []
|
|
672
|
+
},
|
|
673
|
+
"DatePicker": {
|
|
674
|
+
"name": "DatePicker",
|
|
675
|
+
"description": "Date picker component combining input with calendar popup",
|
|
676
|
+
"category": "datetime",
|
|
677
|
+
"whenToUse": [
|
|
678
|
+
"Date selection with input",
|
|
679
|
+
"Form date fields",
|
|
680
|
+
"Date selection with calendar UI"
|
|
681
|
+
],
|
|
682
|
+
"whenNotToUse": [
|
|
683
|
+
"Calendar-only view (use Calendar component)",
|
|
684
|
+
"Simple date input (use DateInput instead)"
|
|
685
|
+
],
|
|
686
|
+
"props": {},
|
|
687
|
+
"examples": [],
|
|
688
|
+
"relatedComponents": ["Calendar", "DateInput"],
|
|
689
|
+
"accessibility": {
|
|
690
|
+
"notes": [
|
|
691
|
+
"Keyboard accessible",
|
|
692
|
+
"Calendar popup should be properly announced",
|
|
693
|
+
"Date format should be clear"
|
|
694
|
+
]
|
|
695
|
+
},
|
|
696
|
+
"gotchas": []
|
|
697
|
+
},
|
|
698
|
+
"DragList": {
|
|
699
|
+
"name": "DragList",
|
|
700
|
+
"description": "Draggable list component for reordering items",
|
|
701
|
+
"category": "advanced",
|
|
702
|
+
"whenToUse": [
|
|
703
|
+
"Reorderable lists",
|
|
704
|
+
"Drag and drop interfaces",
|
|
705
|
+
"Customizable item orders"
|
|
706
|
+
],
|
|
707
|
+
"whenNotToUse": [
|
|
708
|
+
"Static lists (use regular lists)",
|
|
709
|
+
"Simple tables (use Table component)"
|
|
710
|
+
],
|
|
711
|
+
"props": {},
|
|
712
|
+
"examples": [],
|
|
713
|
+
"relatedComponents": ["Table"],
|
|
714
|
+
"accessibility": {
|
|
715
|
+
"notes": [
|
|
716
|
+
"Keyboard alternative for reordering",
|
|
717
|
+
"Drag state should be announced",
|
|
718
|
+
"Screen reader support for position changes"
|
|
719
|
+
]
|
|
720
|
+
},
|
|
721
|
+
"gotchas": []
|
|
722
|
+
},
|
|
723
|
+
"Filters": {
|
|
724
|
+
"name": "Filters",
|
|
725
|
+
"description": "Advanced filter component supporting multiple filter types",
|
|
726
|
+
"category": "advanced",
|
|
727
|
+
"whenToUse": [
|
|
728
|
+
"Complex filtering interfaces",
|
|
729
|
+
"Data table filters",
|
|
730
|
+
"Search with multiple criteria"
|
|
731
|
+
],
|
|
732
|
+
"whenNotToUse": [
|
|
733
|
+
"Simple search (use Input component)",
|
|
734
|
+
"Single filter (use Select or Input)"
|
|
735
|
+
],
|
|
736
|
+
"props": {},
|
|
737
|
+
"examples": [],
|
|
738
|
+
"relatedComponents": ["Input", "Select", "Checkbox", "DateInput"],
|
|
739
|
+
"accessibility": {
|
|
740
|
+
"notes": [
|
|
741
|
+
"Filter state should be clear",
|
|
742
|
+
"Keyboard navigation between filters",
|
|
743
|
+
"Active filters should be announced"
|
|
744
|
+
]
|
|
745
|
+
},
|
|
746
|
+
"gotchas": []
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
}
|