ionbase-ui 0.21.0 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/figma-map.json +2047 -0
  2. package/dist/meta/components.json +1 -1
  3. package/dist/meta/index.json +1 -1
  4. package/dist/meta/patterns/index.json +1 -1
  5. package/llms.txt +5 -1
  6. package/package.json +5 -3
package/dist/figma-map.json ADDED
@@ -0,0 +1,2047 @@
1
+ {
2
+ "package": "ionbase-ui",
3
+ "version": "0.22.0",
4
+ "figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
5
+ "figmaExported": "2026-08-21",
6
+ "usage": "Given a Figma node id or component name, look it up here for the React component, its import, and how each Figma property maps onto a real prop. Every mapping is verified against both the Figma export and the TypeScript API on each build.",
7
+ "generated": "by scripts/verify-figma-map.mjs — do not edit",
8
+ "byNodeId": {
9
+ "21:461": {
10
+ "figmaComponent": "Button",
11
+ "figmaNodeId": "21:461",
12
+ "figmaPage": "Buttons",
13
+ "component": "Button",
14
+ "import": "import { Button } from 'ionbase-ui';",
15
+ "docs": "components/button/index.html.md",
16
+ "props": {
17
+ "Type": {
18
+ "prop": "variant",
19
+ "values": {
20
+ "Primary Brand": "primary-brand",
21
+ "Primary Neutral": "primary-neutral",
22
+ "Primary Soft": "primary-soft",
23
+ "Secondary": "secondary",
24
+ "Tertiary": "tertiary",
25
+ "Destructive": "destructive",
26
+ "Success": "success"
27
+ }
28
+ },
29
+ "Size": {
30
+ "prop": "size",
31
+ "values": {
32
+ "Small": "sm",
33
+ "Medium": "md",
34
+ "Large": "lg",
35
+ "XLarge": "xl"
36
+ }
37
+ },
38
+ "State": {
39
+ "prop": "isDisabled",
40
+ "when": {
41
+ "Disabled": true
42
+ },
43
+ "note": "Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one."
44
+ },
45
+ "Label#21:375": {
46
+ "prop": "children"
47
+ },
48
+ "Leading Icon#21:378": {
49
+ "prop": "startIcon",
50
+ "note": "wrap in Icon; omit Icon's label, the button text names it"
51
+ },
52
+ "Trailing Icon#21:379": {
53
+ "prop": "endIcon",
54
+ "note": "same"
55
+ },
56
+ "Show Leading Icon#21:376": {
57
+ "prop": "startIcon",
58
+ "note": "an absent prop is the switch — React needs no Show boolean, so false means omit startIcon"
59
+ },
60
+ "Show Trailing Icon#21:377": {
61
+ "prop": "endIcon",
62
+ "note": "same"
63
+ }
64
+ }
65
+ },
66
+ "623:151": {
67
+ "figmaComponent": "Icon Button",
68
+ "figmaNodeId": "623:151",
69
+ "figmaPage": "Buttons",
70
+ "component": "Button",
71
+ "import": "import { Button } from 'ionbase-ui';",
72
+ "docs": "components/button/index.html.md",
73
+ "note": "Not a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.",
74
+ "props": {
75
+ "Type": {
76
+ "prop": "variant",
77
+ "values": {
78
+ "Primary Brand": "primary-brand",
79
+ "Primary Neutral": "primary-neutral",
80
+ "Primary Soft": "primary-soft",
81
+ "Secondary": "secondary",
82
+ "Tertiary": "tertiary",
83
+ "Destructive": "destructive",
84
+ "Success": "success"
85
+ }
86
+ },
87
+ "Size": {
88
+ "prop": "size",
89
+ "values": {
90
+ "Small": "sm",
91
+ "Medium": "md",
92
+ "Large": "lg",
93
+ "XLarge": "xl"
94
+ }
95
+ },
96
+ "State": {
97
+ "prop": "isDisabled",
98
+ "when": {
99
+ "Disabled": true
100
+ },
101
+ "note": "as Button"
102
+ },
103
+ "Icon#623:0": {
104
+ "prop": "startIcon",
105
+ "note": "with Icon's own label omitted — the Button's aria-label carries the name"
106
+ },
107
+ "Shape": {
108
+ "ignore": "Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API."
109
+ }
110
+ }
111
+ },
112
+ "80:275": {
113
+ "figmaComponent": "Input",
114
+ "figmaNodeId": "80:275",
115
+ "figmaPage": "Input",
116
+ "component": "Input",
117
+ "import": "import { Input } from 'ionbase-ui';",
118
+ "docs": "components/input/index.html.md",
119
+ "props": {
120
+ "Size": {
121
+ "prop": "size",
122
+ "values": {
123
+ "Small": "sm",
124
+ "Medium": "md",
125
+ "Large": "lg"
126
+ }
127
+ },
128
+ "State": {
129
+ "prop": "isInvalid",
130
+ "when": {
131
+ "Invalid": true
132
+ },
133
+ "note": "Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis."
134
+ },
135
+ "Value#80:0": {
136
+ "prop": "value",
137
+ "note": "or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value"
138
+ },
139
+ "Leading Icon#80:66": {
140
+ "prop": "leadingIcon"
141
+ },
142
+ "Trailing Icon#80:88": {
143
+ "prop": "trailingIcon"
144
+ },
145
+ "Show Leading Icon#80:22": {
146
+ "prop": "leadingIcon",
147
+ "note": "false means omit the prop"
148
+ },
149
+ "Show Trailing Icon#80:44": {
150
+ "prop": "trailingIcon",
151
+ "note": "false means omit the prop"
152
+ }
153
+ }
154
+ },
155
+ "80:372": {
156
+ "figmaComponent": "Input/Phone",
157
+ "figmaNodeId": "80:372",
158
+ "figmaPage": "Input",
159
+ "component": "PhoneInput",
160
+ "import": "import { PhoneInput } from 'ionbase-ui';",
161
+ "docs": "components/phone-input/index.html.md",
162
+ "props": {
163
+ "Size": {
164
+ "prop": "size",
165
+ "values": {
166
+ "Small": "sm",
167
+ "Medium": "md",
168
+ "Large": "lg"
169
+ }
170
+ },
171
+ "Dial Code#80:126": {
172
+ "prop": "dialCode"
173
+ }
174
+ }
175
+ },
176
+ "82:379": {
177
+ "figmaComponent": "Select",
178
+ "figmaNodeId": "82:379",
179
+ "figmaPage": "Select",
180
+ "component": "Select",
181
+ "import": "import { Select } from 'ionbase-ui';",
182
+ "docs": "components/select/index.html.md",
183
+ "props": {
184
+ "Size": {
185
+ "prop": "size",
186
+ "values": {
187
+ "Small": "sm",
188
+ "Medium": "md",
189
+ "Large": "lg"
190
+ }
191
+ },
192
+ "State": {
193
+ "prop": "isInvalid",
194
+ "when": {
195
+ "Invalid": true
196
+ },
197
+ "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled"
198
+ },
199
+ "Value#82:18": {
200
+ "prop": "placeholder",
201
+ "note": "Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array."
202
+ }
203
+ }
204
+ },
205
+ "87:350": {
206
+ "figmaComponent": "Checkbox",
207
+ "figmaNodeId": "87:350",
208
+ "figmaPage": "Checkbox",
209
+ "component": "Checkbox",
210
+ "import": "import { Checkbox } from 'ionbase-ui';",
211
+ "docs": "components/checkbox/index.html.md",
212
+ "props": {
213
+ "Size": {
214
+ "prop": "size",
215
+ "values": {
216
+ "Small": "sm",
217
+ "Medium": "md",
218
+ "Large": "lg"
219
+ }
220
+ },
221
+ "Color": {
222
+ "prop": "intent",
223
+ "values": {
224
+ "Brand": "brand",
225
+ "Neutral": "neutral",
226
+ "Danger": "danger"
227
+ }
228
+ },
229
+ "State": {
230
+ "prop": "isIndeterminate",
231
+ "when": {
232
+ "Indeterminate": true,
233
+ "Indeterminate-disabled": true
234
+ },
235
+ "note": "Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping."
236
+ },
237
+ "Label#87:0": {
238
+ "prop": "children"
239
+ },
240
+ "Show Label#87:28": {
241
+ "prop": "children",
242
+ "note": "false means a bare box — and then aria-label becomes required"
243
+ },
244
+ "Focused#188:38": {
245
+ "ignore": "a drawn focus ring. In code it is :focus-visible, which the browser owns."
246
+ }
247
+ }
248
+ },
249
+ "89:314": {
250
+ "figmaComponent": "Radio",
251
+ "figmaNodeId": "89:314",
252
+ "figmaPage": "Radio",
253
+ "component": "Radio",
254
+ "import": "import { Radio } from 'ionbase-ui';",
255
+ "docs": "components/radio/index.html.md",
256
+ "props": {
257
+ "Size": {
258
+ "prop": "size",
259
+ "values": {
260
+ "Small": "sm",
261
+ "Medium": "md",
262
+ "Large": "lg"
263
+ }
264
+ },
265
+ "Color": {
266
+ "prop": "intent",
267
+ "values": {
268
+ "Brand": "brand",
269
+ "Neutral": "neutral",
270
+ "Danger": "danger"
271
+ }
272
+ },
273
+ "State": {
274
+ "ignore": "Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection"
275
+ },
276
+ "Label#89:0": {
277
+ "prop": "children"
278
+ },
279
+ "Show Label#89:19": {
280
+ "prop": "children",
281
+ "note": "false means aria-label is required"
282
+ },
283
+ "Focused#188:0": {
284
+ "ignore": "drawn focus ring; :focus-visible in code"
285
+ }
286
+ }
287
+ },
288
+ "88:323": {
289
+ "figmaComponent": "Toggle",
290
+ "figmaNodeId": "88:323",
291
+ "figmaPage": "Toggle",
292
+ "component": "Toggle",
293
+ "import": "import { Toggle } from 'ionbase-ui';",
294
+ "docs": "components/toggle/index.html.md",
295
+ "props": {
296
+ "Size": {
297
+ "prop": "size",
298
+ "values": {
299
+ "Small": "sm",
300
+ "Medium": "md",
301
+ "Large": "lg"
302
+ }
303
+ },
304
+ "Color": {
305
+ "prop": "intent",
306
+ "values": {
307
+ "Brand": "brand",
308
+ "Neutral": "neutral",
309
+ "Danger": "danger"
310
+ }
311
+ },
312
+ "State": {
313
+ "ignore": "On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop"
314
+ },
315
+ "Label#88:0": {
316
+ "prop": "children"
317
+ },
318
+ "Show Label#88:19": {
319
+ "prop": "children",
320
+ "note": "false means aria-label is required"
321
+ },
322
+ "Focused#188:19": {
323
+ "ignore": "drawn focus ring; :focus-visible in code"
324
+ }
325
+ }
326
+ },
327
+ "152:73": {
328
+ "figmaComponent": "Badge",
329
+ "figmaNodeId": "152:73",
330
+ "figmaPage": "Badge",
331
+ "component": "Badge",
332
+ "import": "import { Badge } from 'ionbase-ui';",
333
+ "docs": "components/badge/index.html.md",
334
+ "props": {
335
+ "Intent": {
336
+ "prop": "intent",
337
+ "values": {
338
+ "Neutral": "neutral",
339
+ "Primary": "primary",
340
+ "Success": "success",
341
+ "Warning": "warning",
342
+ "Error": "error",
343
+ "Information": "information"
344
+ }
345
+ },
346
+ "Label#152:24": {
347
+ "prop": "children"
348
+ },
349
+ "Show Label#614:0": {
350
+ "prop": "children"
351
+ },
352
+ "Show Dot#152:25": {
353
+ "prop": "dot"
354
+ },
355
+ "Show Icon#152:26": {
356
+ "prop": "icon",
357
+ "note": "false means omit icon; dot wins when both are set"
358
+ },
359
+ "Swap Icon#647:0": {
360
+ "prop": "icon"
361
+ },
362
+ "Size": {
363
+ "ignore": "Figma draws three sizes; code has no size prop. Badge inherits its type from the text it labels — the same call Link makes."
364
+ },
365
+ "Shape": {
366
+ "ignore": "Pill and Rounded are one radius token apart and code ships the pill only. Add the prop when a real screen needs both, not before."
367
+ }
368
+ }
369
+ },
370
+ "812:1902": {
371
+ "figmaComponent": "Alert",
372
+ "figmaNodeId": "812:1902",
373
+ "figmaPage": "Alert",
374
+ "component": "Alert",
375
+ "import": "import { Alert } from 'ionbase-ui';",
376
+ "docs": "components/alert/index.html.md",
377
+ "props": {
378
+ "Intent": {
379
+ "prop": "intent",
380
+ "values": {
381
+ "Neutral": "neutral",
382
+ "Primary": "primary",
383
+ "Success": "success",
384
+ "Warning": "warning",
385
+ "Error": "error",
386
+ "Information": "information"
387
+ }
388
+ },
389
+ "Emphasis": {
390
+ "prop": "emphasis",
391
+ "values": {
392
+ "Subtle": "subtle",
393
+ "Solid": "solid"
394
+ }
395
+ },
396
+ "Layout": {
397
+ "prop": "layout",
398
+ "values": {
399
+ "Inline": "inline",
400
+ "Banner": "banner"
401
+ }
402
+ },
403
+ "Title#812:0": {
404
+ "prop": "title"
405
+ },
406
+ "Show Title#812:50": {
407
+ "prop": "title",
408
+ "note": "false means omit title"
409
+ },
410
+ "Message#812:25": {
411
+ "prop": "children"
412
+ },
413
+ "Show Icon#812:75": {
414
+ "prop": "hideIcon",
415
+ "note": "inverted — Figma's Show Icon false is hideIcon true"
416
+ },
417
+ "Show Dismiss#812:100": {
418
+ "prop": "onDismiss",
419
+ "note": "the dismiss button appears when a handler is passed; there is no boolean"
420
+ },
421
+ "Show Actions#812:125": {
422
+ "prop": "actions",
423
+ "note": "an absent prop is the switch"
424
+ }
425
+ }
426
+ },
427
+ "820:1655": {
428
+ "figmaComponent": "Toast",
429
+ "figmaNodeId": "820:1655",
430
+ "figmaPage": "Toast",
431
+ "component": "Toast",
432
+ "import": "import { Toast } from 'ionbase-ui';",
433
+ "docs": "components/toast/index.html.md",
434
+ "props": {
435
+ "Intent": {
436
+ "prop": "intent",
437
+ "values": {
438
+ "Neutral": "neutral",
439
+ "Primary": "primary",
440
+ "Success": "success",
441
+ "Warning": "warning",
442
+ "Error": "error",
443
+ "Information": "information"
444
+ }
445
+ },
446
+ "Title#820:0": {
447
+ "prop": "title"
448
+ },
449
+ "Show Title#820:14": {
450
+ "prop": "title"
451
+ },
452
+ "Message#820:7": {
453
+ "prop": "message"
454
+ },
455
+ "Show Message#820:21": {
456
+ "prop": "message"
457
+ },
458
+ "Show Action#820:28": {
459
+ "prop": "action",
460
+ "note": "one action only — a second belongs in a Modal"
461
+ },
462
+ "Show Dismiss#820:35": {
463
+ "prop": "dismissLabel",
464
+ "note": "the dismiss control is always rendered; only its label is configurable"
465
+ }
466
+ }
467
+ },
468
+ "774:1516": {
469
+ "figmaComponent": "Link",
470
+ "figmaNodeId": "774:1516",
471
+ "figmaPage": "Link",
472
+ "component": "Link",
473
+ "import": "import { Link } from 'ionbase-ui';",
474
+ "docs": "components/link/index.html.md",
475
+ "props": {
476
+ "Type": {
477
+ "prop": "variant",
478
+ "values": {
479
+ "Inline": "inline",
480
+ "Standalone": "standalone"
481
+ }
482
+ },
483
+ "State": {
484
+ "prop": "isDisabled",
485
+ "when": {
486
+ "Disabled": true
487
+ },
488
+ "note": "Hover and Focus are CSS; Visited is :visited, which no prop can set"
489
+ },
490
+ "Label#774:0": {
491
+ "prop": "children"
492
+ },
493
+ "Leading Icon#774:33": {
494
+ "prop": "startIcon"
495
+ },
496
+ "Trailing Icon#774:44": {
497
+ "prop": "endIcon"
498
+ },
499
+ "Show Leading Icon#774:11": {
500
+ "prop": "startIcon"
501
+ },
502
+ "Show Trailing Icon#774:22": {
503
+ "prop": "endIcon"
504
+ }
505
+ }
506
+ },
507
+ "53:13": {
508
+ "figmaComponent": "Nav Item",
509
+ "figmaNodeId": "53:13",
510
+ "figmaPage": "Nav Item",
511
+ "component": "NavItem",
512
+ "import": "import { NavItem } from 'ionbase-ui';",
513
+ "docs": "components/nav-item/index.html.md",
514
+ "props": {
515
+ "State": {
516
+ "ignore": "Default and Hover are CSS and React Aria's useHover, not props"
517
+ },
518
+ "Label#53:0": {
519
+ "prop": "children"
520
+ },
521
+ "Icon#61:0": {
522
+ "prop": "icon"
523
+ },
524
+ "Show Chevron#53:3": {
525
+ "prop": "showChevron"
526
+ }
527
+ }
528
+ },
529
+ "82:306": {
530
+ "figmaComponent": "Menu",
531
+ "figmaNodeId": "82:306",
532
+ "figmaPage": "Menu",
533
+ "component": "Menu",
534
+ "import": "import { Menu } from 'ionbase-ui';",
535
+ "docs": "components/menu/index.html.md",
536
+ "props": {
537
+ "Type": {
538
+ "ignore": "Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own."
539
+ }
540
+ }
541
+ },
542
+ "639:2634": {
543
+ "figmaComponent": "Menu Item",
544
+ "figmaNodeId": "639:2634",
545
+ "figmaPage": "Side Menu",
546
+ "component": "MenuItem",
547
+ "import": "import { MenuItem } from 'ionbase-ui';",
548
+ "docs": "components/menu-item/index.html.md",
549
+ "props": {
550
+ "Status": {
551
+ "prop": "isSelected",
552
+ "when": {
553
+ "Selected": true,
554
+ "Selected Primary": true
555
+ },
556
+ "note": "Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship."
557
+ },
558
+ "Text#639:12": {
559
+ "prop": "children"
560
+ },
561
+ "Show Icon#639:16": {
562
+ "prop": "icon"
563
+ },
564
+ "Select Icon#639:20": {
565
+ "prop": "icon"
566
+ }
567
+ }
568
+ },
569
+ "157:126": {
570
+ "figmaComponent": "Tabs",
571
+ "figmaNodeId": "157:126",
572
+ "figmaPage": "Tabs",
573
+ "component": "Tabs",
574
+ "import": "import { Tabs } from 'ionbase-ui';",
575
+ "docs": "components/tabs/index.html.md",
576
+ "props": {
577
+ "Type": {
578
+ "prop": "type",
579
+ "values": {
580
+ "Pill": "pill",
581
+ "Underline": "underline"
582
+ }
583
+ },
584
+ "Orientation": {
585
+ "prop": "orientation",
586
+ "values": {
587
+ "Horizontal": "horizontal",
588
+ "Vertical": "vertical"
589
+ }
590
+ }
591
+ }
592
+ },
593
+ "156:259": {
594
+ "figmaComponent": "Tabs Item",
595
+ "figmaNodeId": "156:259",
596
+ "figmaPage": "Tabs",
597
+ "component": "TabItem",
598
+ "import": "import { TabItem } from 'ionbase-ui';",
599
+ "docs": "components/tab-item/index.html.md",
600
+ "note": "TabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.",
601
+ "props": {
602
+ "Label#156:216": {
603
+ "ignore": "TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract."
604
+ },
605
+ "Type": {
606
+ "ignore": "set on the parent Tabs, not per item"
607
+ },
608
+ "Size": {
609
+ "ignore": "set on the parent Tabs, not per item"
610
+ },
611
+ "State": {
612
+ "ignore": "selection is the Tabs collection's state; Disabled is disabledKeys on Tabs"
613
+ },
614
+ "Show Label#156:218": {
615
+ "ignore": "a tab without a label is a tab that cannot be named"
616
+ },
617
+ "Show Leading Icon#156:217": {
618
+ "ignore": "not yet in the code component"
619
+ },
620
+ "Leading Icon#156:220": {
621
+ "ignore": "not yet in the code component"
622
+ },
623
+ "Show Trailing#156:219": {
624
+ "ignore": "not yet in the code component"
625
+ },
626
+ "Trailing#156:221": {
627
+ "ignore": "not yet in the code component"
628
+ },
629
+ "Focused#189:0": {
630
+ "ignore": "drawn focus ring; :focus-visible in code"
631
+ }
632
+ }
633
+ },
634
+ "174:103": {
635
+ "figmaComponent": "Table Cell",
636
+ "figmaNodeId": "174:103",
637
+ "figmaPage": "Table",
638
+ "component": "TableCell",
639
+ "import": "import { TableCell } from 'ionbase-ui';",
640
+ "docs": "components/table-cell/index.html.md",
641
+ "props": {
642
+ "Type": {
643
+ "prop": "header",
644
+ "when": {
645
+ "Header": true
646
+ },
647
+ "note": "Body is the default <td>"
648
+ },
649
+ "Align": {
650
+ "prop": "align",
651
+ "values": {
652
+ "Leading": "leading",
653
+ "Trailing": "trailing"
654
+ }
655
+ },
656
+ "Show Divider#174:38": {
657
+ "prop": "showDivider"
658
+ },
659
+ "Content#174:37": {
660
+ "prop": "children"
661
+ },
662
+ "Show Content#174:36": {
663
+ "prop": "children"
664
+ },
665
+ "Density": {
666
+ "ignore": "density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table"
667
+ }
668
+ }
669
+ },
670
+ "175:605": {
671
+ "figmaComponent": "Table Row",
672
+ "figmaNodeId": "175:605",
673
+ "figmaPage": "Table",
674
+ "component": "TableRow",
675
+ "import": "import { TableRow } from 'ionbase-ui';",
676
+ "docs": "components/table-row/index.html.md",
677
+ "props": {
678
+ "State": {
679
+ "prop": "isSelected",
680
+ "when": {
681
+ "Selected": true,
682
+ "Selected-Hover": true
683
+ },
684
+ "note": "Hover is CSS"
685
+ },
686
+ "Show Selection#175:12": {
687
+ "prop": "selection",
688
+ "note": "takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring"
689
+ },
690
+ "Density": {
691
+ "ignore": "set once on Table; see Table Cell"
692
+ }
693
+ }
694
+ },
695
+ "74:164": {
696
+ "figmaComponent": "Avatar",
697
+ "figmaNodeId": "74:164",
698
+ "figmaPage": "Avatar",
699
+ "component": "Avatar",
700
+ "import": "import { Avatar } from 'ionbase-ui';",
701
+ "docs": "components/avatar/index.html.md",
702
+ "props": {
703
+ "Size": {
704
+ "prop": "size",
705
+ "values": {
706
+ "Mini": "mini",
707
+ "Small": "sm",
708
+ "Medium": "md",
709
+ "Large": "lg"
710
+ }
711
+ },
712
+ "Shape": {
713
+ "prop": "shape",
714
+ "values": {
715
+ "Circle": "circle",
716
+ "Square": "square"
717
+ }
718
+ },
719
+ "Type": {
720
+ "prop": "src",
721
+ "when": {
722
+ "Image": true
723
+ },
724
+ "note": "code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon."
725
+ },
726
+ "Initials#74:25": {
727
+ "prop": "initials"
728
+ },
729
+ "Icon#74:50": {
730
+ "prop": "icon"
731
+ }
732
+ }
733
+ },
734
+ "74:279": {
735
+ "figmaComponent": "Avatar Group",
736
+ "figmaNodeId": "74:279",
737
+ "figmaPage": "Avatar",
738
+ "component": "AvatarGroup",
739
+ "import": "import { AvatarGroup } from 'ionbase-ui';",
740
+ "docs": "components/avatar-group/index.html.md",
741
+ "props": {
742
+ "Size": {
743
+ "prop": "size",
744
+ "values": {
745
+ "Mini": "mini",
746
+ "Small": "sm",
747
+ "Medium": "md",
748
+ "Large": "lg"
749
+ }
750
+ },
751
+ "Shape": {
752
+ "prop": "shape",
753
+ "values": {
754
+ "Circle": "circle",
755
+ "Square": "square"
756
+ }
757
+ },
758
+ "Show Overflow#74:84": {
759
+ "prop": "max",
760
+ "note": "the +N avatar appears when children exceed max"
761
+ },
762
+ "Show Avatar 3#74:93": {
763
+ "prop": "children",
764
+ "note": "Figma needs a boolean per slot; React just renders fewer children"
765
+ },
766
+ "Show Avatar 4#74:102": {
767
+ "prop": "children",
768
+ "note": "same"
769
+ }
770
+ }
771
+ },
772
+ "126:22724": {
773
+ "figmaComponent": "Border",
774
+ "figmaNodeId": "126:22724",
775
+ "figmaPage": "Divider",
776
+ "component": "Divider",
777
+ "import": "import { Divider } from 'ionbase-ui';",
778
+ "docs": "components/divider/index.html.md",
779
+ "note": "Figma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.",
780
+ "props": {
781
+ "Style": {
782
+ "prop": "orientation",
783
+ "values": {
784
+ "Horizontal": "horizontal",
785
+ "Vertical": "vertical"
786
+ }
787
+ }
788
+ }
789
+ },
790
+ "52:21369": {
791
+ "figmaComponent": "Logo-Ionbase",
792
+ "figmaNodeId": "52:21369",
793
+ "figmaPage": "Logo",
794
+ "component": "Logo",
795
+ "import": "import { Logo } from 'ionbase-ui';",
796
+ "docs": "components/logo/index.html.md",
797
+ "props": {
798
+ "Size": {
799
+ "prop": "size",
800
+ "values": {
801
+ "Small": "sm",
802
+ "Large": "lg"
803
+ }
804
+ },
805
+ "Type": {
806
+ "prop": "wordmark",
807
+ "values": {
808
+ "Logo": "vector",
809
+ "Icon": "text"
810
+ },
811
+ "note": "the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text"
812
+ },
813
+ "Property": {
814
+ "ignore": "the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case."
815
+ }
816
+ }
817
+ },
818
+ "792:1537": {
819
+ "figmaComponent": "Modal",
820
+ "figmaNodeId": "792:1537",
821
+ "figmaPage": "Modal",
822
+ "component": "Modal",
823
+ "import": "import { Modal } from 'ionbase-ui';",
824
+ "docs": "components/modal/index.html.md",
825
+ "props": {
826
+ "Size": {
827
+ "prop": "size",
828
+ "values": {
829
+ "Small": "sm",
830
+ "Medium": "md",
831
+ "Large": "lg",
832
+ "Fullscreen": "fullscreen"
833
+ }
834
+ },
835
+ "Align": {
836
+ "prop": "align",
837
+ "values": {
838
+ "Left": "left",
839
+ "Center": "center"
840
+ }
841
+ },
842
+ "Title#792:0": {
843
+ "prop": "title"
844
+ },
845
+ "Description#792:5": {
846
+ "prop": "description"
847
+ },
848
+ "Show Description#792:10": {
849
+ "prop": "description"
850
+ },
851
+ "Show Close#792:15": {
852
+ "prop": "showClose"
853
+ },
854
+ "Show Body#792:20": {
855
+ "prop": "children"
856
+ },
857
+ "Show Footer#792:25": {
858
+ "prop": "footer"
859
+ },
860
+ "Show Media#794:24": {
861
+ "prop": "media"
862
+ },
863
+ "Media#794:33": {
864
+ "prop": "media"
865
+ }
866
+ }
867
+ },
868
+ "825:1853": {
869
+ "figmaComponent": "Popover",
870
+ "figmaNodeId": "825:1853",
871
+ "figmaPage": "Popover",
872
+ "component": "Popover",
873
+ "import": "import { Popover } from 'ionbase-ui';",
874
+ "docs": "components/popover/index.html.md",
875
+ "props": {
876
+ "Placement": {
877
+ "prop": "placement",
878
+ "values": {
879
+ "Top": "top",
880
+ "Bottom": "bottom",
881
+ "Left": "left",
882
+ "Right": "right"
883
+ }
884
+ },
885
+ "Size": {
886
+ "prop": "size",
887
+ "values": {
888
+ "Small": "sm",
889
+ "Medium": "md",
890
+ "Large": "lg"
891
+ }
892
+ },
893
+ "Title#825:0": {
894
+ "prop": "title"
895
+ },
896
+ "Show Header#825:26": {
897
+ "prop": "title"
898
+ },
899
+ "Body#825:13": {
900
+ "prop": "content"
901
+ },
902
+ "Show Body#825:52": {
903
+ "prop": "content"
904
+ },
905
+ "Show Close#825:39": {
906
+ "prop": "showClose"
907
+ },
908
+ "Show Footer#825:65": {
909
+ "prop": "footer"
910
+ },
911
+ "Show Arrow#825:78": {
912
+ "prop": "hideArrow",
913
+ "note": "inverted — Show Arrow false is hideArrow true"
914
+ }
915
+ }
916
+ },
917
+ "801:68": {
918
+ "figmaComponent": "Tooltip",
919
+ "figmaNodeId": "801:68",
920
+ "figmaPage": "Tooltip",
921
+ "component": "Tooltip",
922
+ "import": "import { Tooltip } from 'ionbase-ui';",
923
+ "docs": "components/tooltip/index.html.md",
924
+ "props": {
925
+ "Placement": {
926
+ "prop": "placement",
927
+ "values": {
928
+ "Top": "top",
929
+ "Bottom": "bottom",
930
+ "Left": "left",
931
+ "Right": "right"
932
+ }
933
+ },
934
+ "Label#801:0": {
935
+ "prop": "label"
936
+ },
937
+ "Title#801:5": {
938
+ "prop": "title"
939
+ },
940
+ "Show Title#801:10": {
941
+ "prop": "title"
942
+ }
943
+ }
944
+ },
945
+ "592:857": {
946
+ "figmaComponent": "Full Card",
947
+ "figmaNodeId": "592:857",
948
+ "figmaPage": "Card",
949
+ "component": "FullCard",
950
+ "import": "import { FullCard } from 'ionbase-ui';",
951
+ "docs": "components/full-card/index.html.md",
952
+ "props": {
953
+ "Row Reverse": {
954
+ "prop": "alignment",
955
+ "values": {
956
+ "True": "left",
957
+ "False": "right"
958
+ },
959
+ "note": "Figma's boolean reverses the row; the code prop names which side the MEDIA sits on"
960
+ },
961
+ "Headline#592:0": {
962
+ "prop": "headline"
963
+ },
964
+ "Description#592:1": {
965
+ "prop": "description"
966
+ },
967
+ "Show Description#592:3": {
968
+ "prop": "description"
969
+ },
970
+ "Eyebrow#592:5": {
971
+ "prop": "eyebrow"
972
+ },
973
+ "Show Eyebrow#592:2": {
974
+ "prop": "eyebrow"
975
+ },
976
+ "Actions#592:6": {
977
+ "prop": "actions"
978
+ },
979
+ "Show Actions#592:4": {
980
+ "prop": "actions"
981
+ },
982
+ "Media#592:7": {
983
+ "prop": "media",
984
+ "note": "pass the screenshot itself — the component draws the frame"
985
+ }
986
+ }
987
+ },
988
+ "69:335": {
989
+ "figmaComponent": "Header",
990
+ "figmaNodeId": "69:335",
991
+ "figmaPage": "Header",
992
+ "component": "Header",
993
+ "import": "import { Header } from 'ionbase-ui';",
994
+ "docs": "components/header/index.html.md",
995
+ "props": {
996
+ "Device": {
997
+ "prop": "open",
998
+ "when": {
999
+ "Mobile-Open": true,
1000
+ "Mobile-Closed": false
1001
+ },
1002
+ "note": "Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop."
1003
+ },
1004
+ "Center Slot#68:12": {
1005
+ "prop": "center"
1006
+ },
1007
+ "End Slot#68:16": {
1008
+ "prop": "end"
1009
+ },
1010
+ "End Slot#667:37": {
1011
+ "prop": "end",
1012
+ "note": "a duplicate slot in the Figma component"
1013
+ },
1014
+ "Show Center Slot#69:0": {
1015
+ "prop": "center"
1016
+ },
1017
+ "Show End Slot#69:4": {
1018
+ "prop": "end"
1019
+ }
1020
+ }
1021
+ }
1022
+ },
1023
+ "byFigmaName": {
1024
+ "Button": {
1025
+ "figmaComponent": "Button",
1026
+ "figmaNodeId": "21:461",
1027
+ "figmaPage": "Buttons",
1028
+ "component": "Button",
1029
+ "import": "import { Button } from 'ionbase-ui';",
1030
+ "docs": "components/button/index.html.md",
1031
+ "props": {
1032
+ "Type": {
1033
+ "prop": "variant",
1034
+ "values": {
1035
+ "Primary Brand": "primary-brand",
1036
+ "Primary Neutral": "primary-neutral",
1037
+ "Primary Soft": "primary-soft",
1038
+ "Secondary": "secondary",
1039
+ "Tertiary": "tertiary",
1040
+ "Destructive": "destructive",
1041
+ "Success": "success"
1042
+ }
1043
+ },
1044
+ "Size": {
1045
+ "prop": "size",
1046
+ "values": {
1047
+ "Small": "sm",
1048
+ "Medium": "md",
1049
+ "Large": "lg",
1050
+ "XLarge": "xl"
1051
+ }
1052
+ },
1053
+ "State": {
1054
+ "prop": "isDisabled",
1055
+ "when": {
1056
+ "Disabled": true
1057
+ },
1058
+ "note": "Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one."
1059
+ },
1060
+ "Label#21:375": {
1061
+ "prop": "children"
1062
+ },
1063
+ "Leading Icon#21:378": {
1064
+ "prop": "startIcon",
1065
+ "note": "wrap in Icon; omit Icon's label, the button text names it"
1066
+ },
1067
+ "Trailing Icon#21:379": {
1068
+ "prop": "endIcon",
1069
+ "note": "same"
1070
+ },
1071
+ "Show Leading Icon#21:376": {
1072
+ "prop": "startIcon",
1073
+ "note": "an absent prop is the switch — React needs no Show boolean, so false means omit startIcon"
1074
+ },
1075
+ "Show Trailing Icon#21:377": {
1076
+ "prop": "endIcon",
1077
+ "note": "same"
1078
+ }
1079
+ }
1080
+ },
1081
+ "Icon Button": {
1082
+ "figmaComponent": "Icon Button",
1083
+ "figmaNodeId": "623:151",
1084
+ "figmaPage": "Buttons",
1085
+ "component": "Button",
1086
+ "import": "import { Button } from 'ionbase-ui';",
1087
+ "docs": "components/button/index.html.md",
1088
+ "note": "Not a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.",
1089
+ "props": {
1090
+ "Type": {
1091
+ "prop": "variant",
1092
+ "values": {
1093
+ "Primary Brand": "primary-brand",
1094
+ "Primary Neutral": "primary-neutral",
1095
+ "Primary Soft": "primary-soft",
1096
+ "Secondary": "secondary",
1097
+ "Tertiary": "tertiary",
1098
+ "Destructive": "destructive",
1099
+ "Success": "success"
1100
+ }
1101
+ },
1102
+ "Size": {
1103
+ "prop": "size",
1104
+ "values": {
1105
+ "Small": "sm",
1106
+ "Medium": "md",
1107
+ "Large": "lg",
1108
+ "XLarge": "xl"
1109
+ }
1110
+ },
1111
+ "State": {
1112
+ "prop": "isDisabled",
1113
+ "when": {
1114
+ "Disabled": true
1115
+ },
1116
+ "note": "as Button"
1117
+ },
1118
+ "Icon#623:0": {
1119
+ "prop": "startIcon",
1120
+ "note": "with Icon's own label omitted — the Button's aria-label carries the name"
1121
+ },
1122
+ "Shape": {
1123
+ "ignore": "Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API."
1124
+ }
1125
+ }
1126
+ },
1127
+ "Input": {
1128
+ "figmaComponent": "Input",
1129
+ "figmaNodeId": "80:275",
1130
+ "figmaPage": "Input",
1131
+ "component": "Input",
1132
+ "import": "import { Input } from 'ionbase-ui';",
1133
+ "docs": "components/input/index.html.md",
1134
+ "props": {
1135
+ "Size": {
1136
+ "prop": "size",
1137
+ "values": {
1138
+ "Small": "sm",
1139
+ "Medium": "md",
1140
+ "Large": "lg"
1141
+ }
1142
+ },
1143
+ "State": {
1144
+ "prop": "isInvalid",
1145
+ "when": {
1146
+ "Invalid": true
1147
+ },
1148
+ "note": "Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis."
1149
+ },
1150
+ "Value#80:0": {
1151
+ "prop": "value",
1152
+ "note": "or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value"
1153
+ },
1154
+ "Leading Icon#80:66": {
1155
+ "prop": "leadingIcon"
1156
+ },
1157
+ "Trailing Icon#80:88": {
1158
+ "prop": "trailingIcon"
1159
+ },
1160
+ "Show Leading Icon#80:22": {
1161
+ "prop": "leadingIcon",
1162
+ "note": "false means omit the prop"
1163
+ },
1164
+ "Show Trailing Icon#80:44": {
1165
+ "prop": "trailingIcon",
1166
+ "note": "false means omit the prop"
1167
+ }
1168
+ }
1169
+ },
1170
+ "Input/Phone": {
1171
+ "figmaComponent": "Input/Phone",
1172
+ "figmaNodeId": "80:372",
1173
+ "figmaPage": "Input",
1174
+ "component": "PhoneInput",
1175
+ "import": "import { PhoneInput } from 'ionbase-ui';",
1176
+ "docs": "components/phone-input/index.html.md",
1177
+ "props": {
1178
+ "Size": {
1179
+ "prop": "size",
1180
+ "values": {
1181
+ "Small": "sm",
1182
+ "Medium": "md",
1183
+ "Large": "lg"
1184
+ }
1185
+ },
1186
+ "Dial Code#80:126": {
1187
+ "prop": "dialCode"
1188
+ }
1189
+ }
1190
+ },
1191
+ "Select": {
1192
+ "figmaComponent": "Select",
1193
+ "figmaNodeId": "82:379",
1194
+ "figmaPage": "Select",
1195
+ "component": "Select",
1196
+ "import": "import { Select } from 'ionbase-ui';",
1197
+ "docs": "components/select/index.html.md",
1198
+ "props": {
1199
+ "Size": {
1200
+ "prop": "size",
1201
+ "values": {
1202
+ "Small": "sm",
1203
+ "Medium": "md",
1204
+ "Large": "lg"
1205
+ }
1206
+ },
1207
+ "State": {
1208
+ "prop": "isInvalid",
1209
+ "when": {
1210
+ "Invalid": true
1211
+ },
1212
+ "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled"
1213
+ },
1214
+ "Value#82:18": {
1215
+ "prop": "placeholder",
1216
+ "note": "Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array."
1217
+ }
1218
+ }
1219
+ },
1220
+ "Checkbox": {
1221
+ "figmaComponent": "Checkbox",
1222
+ "figmaNodeId": "87:350",
1223
+ "figmaPage": "Checkbox",
1224
+ "component": "Checkbox",
1225
+ "import": "import { Checkbox } from 'ionbase-ui';",
1226
+ "docs": "components/checkbox/index.html.md",
1227
+ "props": {
1228
+ "Size": {
1229
+ "prop": "size",
1230
+ "values": {
1231
+ "Small": "sm",
1232
+ "Medium": "md",
1233
+ "Large": "lg"
1234
+ }
1235
+ },
1236
+ "Color": {
1237
+ "prop": "intent",
1238
+ "values": {
1239
+ "Brand": "brand",
1240
+ "Neutral": "neutral",
1241
+ "Danger": "danger"
1242
+ }
1243
+ },
1244
+ "State": {
1245
+ "prop": "isIndeterminate",
1246
+ "when": {
1247
+ "Indeterminate": true,
1248
+ "Indeterminate-disabled": true
1249
+ },
1250
+ "note": "Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping."
1251
+ },
1252
+ "Label#87:0": {
1253
+ "prop": "children"
1254
+ },
1255
+ "Show Label#87:28": {
1256
+ "prop": "children",
1257
+ "note": "false means a bare box — and then aria-label becomes required"
1258
+ },
1259
+ "Focused#188:38": {
1260
+ "ignore": "a drawn focus ring. In code it is :focus-visible, which the browser owns."
1261
+ }
1262
+ }
1263
+ },
1264
+ "Radio": {
1265
+ "figmaComponent": "Radio",
1266
+ "figmaNodeId": "89:314",
1267
+ "figmaPage": "Radio",
1268
+ "component": "Radio",
1269
+ "import": "import { Radio } from 'ionbase-ui';",
1270
+ "docs": "components/radio/index.html.md",
1271
+ "props": {
1272
+ "Size": {
1273
+ "prop": "size",
1274
+ "values": {
1275
+ "Small": "sm",
1276
+ "Medium": "md",
1277
+ "Large": "lg"
1278
+ }
1279
+ },
1280
+ "Color": {
1281
+ "prop": "intent",
1282
+ "values": {
1283
+ "Brand": "brand",
1284
+ "Neutral": "neutral",
1285
+ "Danger": "danger"
1286
+ }
1287
+ },
1288
+ "State": {
1289
+ "ignore": "Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection"
1290
+ },
1291
+ "Label#89:0": {
1292
+ "prop": "children"
1293
+ },
1294
+ "Show Label#89:19": {
1295
+ "prop": "children",
1296
+ "note": "false means aria-label is required"
1297
+ },
1298
+ "Focused#188:0": {
1299
+ "ignore": "drawn focus ring; :focus-visible in code"
1300
+ }
1301
+ }
1302
+ },
1303
+ "Toggle": {
1304
+ "figmaComponent": "Toggle",
1305
+ "figmaNodeId": "88:323",
1306
+ "figmaPage": "Toggle",
1307
+ "component": "Toggle",
1308
+ "import": "import { Toggle } from 'ionbase-ui';",
1309
+ "docs": "components/toggle/index.html.md",
1310
+ "props": {
1311
+ "Size": {
1312
+ "prop": "size",
1313
+ "values": {
1314
+ "Small": "sm",
1315
+ "Medium": "md",
1316
+ "Large": "lg"
1317
+ }
1318
+ },
1319
+ "Color": {
1320
+ "prop": "intent",
1321
+ "values": {
1322
+ "Brand": "brand",
1323
+ "Neutral": "neutral",
1324
+ "Danger": "danger"
1325
+ }
1326
+ },
1327
+ "State": {
1328
+ "ignore": "On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop"
1329
+ },
1330
+ "Label#88:0": {
1331
+ "prop": "children"
1332
+ },
1333
+ "Show Label#88:19": {
1334
+ "prop": "children",
1335
+ "note": "false means aria-label is required"
1336
+ },
1337
+ "Focused#188:19": {
1338
+ "ignore": "drawn focus ring; :focus-visible in code"
1339
+ }
1340
+ }
1341
+ },
1342
+ "Badge": {
1343
+ "figmaComponent": "Badge",
1344
+ "figmaNodeId": "152:73",
1345
+ "figmaPage": "Badge",
1346
+ "component": "Badge",
1347
+ "import": "import { Badge } from 'ionbase-ui';",
1348
+ "docs": "components/badge/index.html.md",
1349
+ "props": {
1350
+ "Intent": {
1351
+ "prop": "intent",
1352
+ "values": {
1353
+ "Neutral": "neutral",
1354
+ "Primary": "primary",
1355
+ "Success": "success",
1356
+ "Warning": "warning",
1357
+ "Error": "error",
1358
+ "Information": "information"
1359
+ }
1360
+ },
1361
+ "Label#152:24": {
1362
+ "prop": "children"
1363
+ },
1364
+ "Show Label#614:0": {
1365
+ "prop": "children"
1366
+ },
1367
+ "Show Dot#152:25": {
1368
+ "prop": "dot"
1369
+ },
1370
+ "Show Icon#152:26": {
1371
+ "prop": "icon",
1372
+ "note": "false means omit icon; dot wins when both are set"
1373
+ },
1374
+ "Swap Icon#647:0": {
1375
+ "prop": "icon"
1376
+ },
1377
+ "Size": {
1378
+ "ignore": "Figma draws three sizes; code has no size prop. Badge inherits its type from the text it labels — the same call Link makes."
1379
+ },
1380
+ "Shape": {
1381
+ "ignore": "Pill and Rounded are one radius token apart and code ships the pill only. Add the prop when a real screen needs both, not before."
1382
+ }
1383
+ }
1384
+ },
1385
+ "Alert": {
1386
+ "figmaComponent": "Alert",
1387
+ "figmaNodeId": "812:1902",
1388
+ "figmaPage": "Alert",
1389
+ "component": "Alert",
1390
+ "import": "import { Alert } from 'ionbase-ui';",
1391
+ "docs": "components/alert/index.html.md",
1392
+ "props": {
1393
+ "Intent": {
1394
+ "prop": "intent",
1395
+ "values": {
1396
+ "Neutral": "neutral",
1397
+ "Primary": "primary",
1398
+ "Success": "success",
1399
+ "Warning": "warning",
1400
+ "Error": "error",
1401
+ "Information": "information"
1402
+ }
1403
+ },
1404
+ "Emphasis": {
1405
+ "prop": "emphasis",
1406
+ "values": {
1407
+ "Subtle": "subtle",
1408
+ "Solid": "solid"
1409
+ }
1410
+ },
1411
+ "Layout": {
1412
+ "prop": "layout",
1413
+ "values": {
1414
+ "Inline": "inline",
1415
+ "Banner": "banner"
1416
+ }
1417
+ },
1418
+ "Title#812:0": {
1419
+ "prop": "title"
1420
+ },
1421
+ "Show Title#812:50": {
1422
+ "prop": "title",
1423
+ "note": "false means omit title"
1424
+ },
1425
+ "Message#812:25": {
1426
+ "prop": "children"
1427
+ },
1428
+ "Show Icon#812:75": {
1429
+ "prop": "hideIcon",
1430
+ "note": "inverted — Figma's Show Icon false is hideIcon true"
1431
+ },
1432
+ "Show Dismiss#812:100": {
1433
+ "prop": "onDismiss",
1434
+ "note": "the dismiss button appears when a handler is passed; there is no boolean"
1435
+ },
1436
+ "Show Actions#812:125": {
1437
+ "prop": "actions",
1438
+ "note": "an absent prop is the switch"
1439
+ }
1440
+ }
1441
+ },
1442
+ "Toast": {
1443
+ "figmaComponent": "Toast",
1444
+ "figmaNodeId": "820:1655",
1445
+ "figmaPage": "Toast",
1446
+ "component": "Toast",
1447
+ "import": "import { Toast } from 'ionbase-ui';",
1448
+ "docs": "components/toast/index.html.md",
1449
+ "props": {
1450
+ "Intent": {
1451
+ "prop": "intent",
1452
+ "values": {
1453
+ "Neutral": "neutral",
1454
+ "Primary": "primary",
1455
+ "Success": "success",
1456
+ "Warning": "warning",
1457
+ "Error": "error",
1458
+ "Information": "information"
1459
+ }
1460
+ },
1461
+ "Title#820:0": {
1462
+ "prop": "title"
1463
+ },
1464
+ "Show Title#820:14": {
1465
+ "prop": "title"
1466
+ },
1467
+ "Message#820:7": {
1468
+ "prop": "message"
1469
+ },
1470
+ "Show Message#820:21": {
1471
+ "prop": "message"
1472
+ },
1473
+ "Show Action#820:28": {
1474
+ "prop": "action",
1475
+ "note": "one action only — a second belongs in a Modal"
1476
+ },
1477
+ "Show Dismiss#820:35": {
1478
+ "prop": "dismissLabel",
1479
+ "note": "the dismiss control is always rendered; only its label is configurable"
1480
+ }
1481
+ }
1482
+ },
1483
+ "Link": {
1484
+ "figmaComponent": "Link",
1485
+ "figmaNodeId": "774:1516",
1486
+ "figmaPage": "Link",
1487
+ "component": "Link",
1488
+ "import": "import { Link } from 'ionbase-ui';",
1489
+ "docs": "components/link/index.html.md",
1490
+ "props": {
1491
+ "Type": {
1492
+ "prop": "variant",
1493
+ "values": {
1494
+ "Inline": "inline",
1495
+ "Standalone": "standalone"
1496
+ }
1497
+ },
1498
+ "State": {
1499
+ "prop": "isDisabled",
1500
+ "when": {
1501
+ "Disabled": true
1502
+ },
1503
+ "note": "Hover and Focus are CSS; Visited is :visited, which no prop can set"
1504
+ },
1505
+ "Label#774:0": {
1506
+ "prop": "children"
1507
+ },
1508
+ "Leading Icon#774:33": {
1509
+ "prop": "startIcon"
1510
+ },
1511
+ "Trailing Icon#774:44": {
1512
+ "prop": "endIcon"
1513
+ },
1514
+ "Show Leading Icon#774:11": {
1515
+ "prop": "startIcon"
1516
+ },
1517
+ "Show Trailing Icon#774:22": {
1518
+ "prop": "endIcon"
1519
+ }
1520
+ }
1521
+ },
1522
+ "Nav Item": {
1523
+ "figmaComponent": "Nav Item",
1524
+ "figmaNodeId": "53:13",
1525
+ "figmaPage": "Nav Item",
1526
+ "component": "NavItem",
1527
+ "import": "import { NavItem } from 'ionbase-ui';",
1528
+ "docs": "components/nav-item/index.html.md",
1529
+ "props": {
1530
+ "State": {
1531
+ "ignore": "Default and Hover are CSS and React Aria's useHover, not props"
1532
+ },
1533
+ "Label#53:0": {
1534
+ "prop": "children"
1535
+ },
1536
+ "Icon#61:0": {
1537
+ "prop": "icon"
1538
+ },
1539
+ "Show Chevron#53:3": {
1540
+ "prop": "showChevron"
1541
+ }
1542
+ }
1543
+ },
1544
+ "Menu": {
1545
+ "figmaComponent": "Menu",
1546
+ "figmaNodeId": "82:306",
1547
+ "figmaPage": "Menu",
1548
+ "component": "Menu",
1549
+ "import": "import { Menu } from 'ionbase-ui';",
1550
+ "docs": "components/menu/index.html.md",
1551
+ "props": {
1552
+ "Type": {
1553
+ "ignore": "Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own."
1554
+ }
1555
+ }
1556
+ },
1557
+ "Menu Item": {
1558
+ "figmaComponent": "Menu Item",
1559
+ "figmaNodeId": "639:2634",
1560
+ "figmaPage": "Side Menu",
1561
+ "component": "MenuItem",
1562
+ "import": "import { MenuItem } from 'ionbase-ui';",
1563
+ "docs": "components/menu-item/index.html.md",
1564
+ "props": {
1565
+ "Status": {
1566
+ "prop": "isSelected",
1567
+ "when": {
1568
+ "Selected": true,
1569
+ "Selected Primary": true
1570
+ },
1571
+ "note": "Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship."
1572
+ },
1573
+ "Text#639:12": {
1574
+ "prop": "children"
1575
+ },
1576
+ "Show Icon#639:16": {
1577
+ "prop": "icon"
1578
+ },
1579
+ "Select Icon#639:20": {
1580
+ "prop": "icon"
1581
+ }
1582
+ }
1583
+ },
1584
+ "Tabs": {
1585
+ "figmaComponent": "Tabs",
1586
+ "figmaNodeId": "157:126",
1587
+ "figmaPage": "Tabs",
1588
+ "component": "Tabs",
1589
+ "import": "import { Tabs } from 'ionbase-ui';",
1590
+ "docs": "components/tabs/index.html.md",
1591
+ "props": {
1592
+ "Type": {
1593
+ "prop": "type",
1594
+ "values": {
1595
+ "Pill": "pill",
1596
+ "Underline": "underline"
1597
+ }
1598
+ },
1599
+ "Orientation": {
1600
+ "prop": "orientation",
1601
+ "values": {
1602
+ "Horizontal": "horizontal",
1603
+ "Vertical": "vertical"
1604
+ }
1605
+ }
1606
+ }
1607
+ },
1608
+ "Tabs Item": {
1609
+ "figmaComponent": "Tabs Item",
1610
+ "figmaNodeId": "156:259",
1611
+ "figmaPage": "Tabs",
1612
+ "component": "TabItem",
1613
+ "import": "import { TabItem } from 'ionbase-ui';",
1614
+ "docs": "components/tab-item/index.html.md",
1615
+ "note": "TabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.",
1616
+ "props": {
1617
+ "Label#156:216": {
1618
+ "ignore": "TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract."
1619
+ },
1620
+ "Type": {
1621
+ "ignore": "set on the parent Tabs, not per item"
1622
+ },
1623
+ "Size": {
1624
+ "ignore": "set on the parent Tabs, not per item"
1625
+ },
1626
+ "State": {
1627
+ "ignore": "selection is the Tabs collection's state; Disabled is disabledKeys on Tabs"
1628
+ },
1629
+ "Show Label#156:218": {
1630
+ "ignore": "a tab without a label is a tab that cannot be named"
1631
+ },
1632
+ "Show Leading Icon#156:217": {
1633
+ "ignore": "not yet in the code component"
1634
+ },
1635
+ "Leading Icon#156:220": {
1636
+ "ignore": "not yet in the code component"
1637
+ },
1638
+ "Show Trailing#156:219": {
1639
+ "ignore": "not yet in the code component"
1640
+ },
1641
+ "Trailing#156:221": {
1642
+ "ignore": "not yet in the code component"
1643
+ },
1644
+ "Focused#189:0": {
1645
+ "ignore": "drawn focus ring; :focus-visible in code"
1646
+ }
1647
+ }
1648
+ },
1649
+ "Table Cell": {
1650
+ "figmaComponent": "Table Cell",
1651
+ "figmaNodeId": "174:103",
1652
+ "figmaPage": "Table",
1653
+ "component": "TableCell",
1654
+ "import": "import { TableCell } from 'ionbase-ui';",
1655
+ "docs": "components/table-cell/index.html.md",
1656
+ "props": {
1657
+ "Type": {
1658
+ "prop": "header",
1659
+ "when": {
1660
+ "Header": true
1661
+ },
1662
+ "note": "Body is the default <td>"
1663
+ },
1664
+ "Align": {
1665
+ "prop": "align",
1666
+ "values": {
1667
+ "Leading": "leading",
1668
+ "Trailing": "trailing"
1669
+ }
1670
+ },
1671
+ "Show Divider#174:38": {
1672
+ "prop": "showDivider"
1673
+ },
1674
+ "Content#174:37": {
1675
+ "prop": "children"
1676
+ },
1677
+ "Show Content#174:36": {
1678
+ "prop": "children"
1679
+ },
1680
+ "Density": {
1681
+ "ignore": "density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table"
1682
+ }
1683
+ }
1684
+ },
1685
+ "Table Row": {
1686
+ "figmaComponent": "Table Row",
1687
+ "figmaNodeId": "175:605",
1688
+ "figmaPage": "Table",
1689
+ "component": "TableRow",
1690
+ "import": "import { TableRow } from 'ionbase-ui';",
1691
+ "docs": "components/table-row/index.html.md",
1692
+ "props": {
1693
+ "State": {
1694
+ "prop": "isSelected",
1695
+ "when": {
1696
+ "Selected": true,
1697
+ "Selected-Hover": true
1698
+ },
1699
+ "note": "Hover is CSS"
1700
+ },
1701
+ "Show Selection#175:12": {
1702
+ "prop": "selection",
1703
+ "note": "takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring"
1704
+ },
1705
+ "Density": {
1706
+ "ignore": "set once on Table; see Table Cell"
1707
+ }
1708
+ }
1709
+ },
1710
+ "Avatar": {
1711
+ "figmaComponent": "Avatar",
1712
+ "figmaNodeId": "74:164",
1713
+ "figmaPage": "Avatar",
1714
+ "component": "Avatar",
1715
+ "import": "import { Avatar } from 'ionbase-ui';",
1716
+ "docs": "components/avatar/index.html.md",
1717
+ "props": {
1718
+ "Size": {
1719
+ "prop": "size",
1720
+ "values": {
1721
+ "Mini": "mini",
1722
+ "Small": "sm",
1723
+ "Medium": "md",
1724
+ "Large": "lg"
1725
+ }
1726
+ },
1727
+ "Shape": {
1728
+ "prop": "shape",
1729
+ "values": {
1730
+ "Circle": "circle",
1731
+ "Square": "square"
1732
+ }
1733
+ },
1734
+ "Type": {
1735
+ "prop": "src",
1736
+ "when": {
1737
+ "Image": true
1738
+ },
1739
+ "note": "code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon."
1740
+ },
1741
+ "Initials#74:25": {
1742
+ "prop": "initials"
1743
+ },
1744
+ "Icon#74:50": {
1745
+ "prop": "icon"
1746
+ }
1747
+ }
1748
+ },
1749
+ "Avatar Group": {
1750
+ "figmaComponent": "Avatar Group",
1751
+ "figmaNodeId": "74:279",
1752
+ "figmaPage": "Avatar",
1753
+ "component": "AvatarGroup",
1754
+ "import": "import { AvatarGroup } from 'ionbase-ui';",
1755
+ "docs": "components/avatar-group/index.html.md",
1756
+ "props": {
1757
+ "Size": {
1758
+ "prop": "size",
1759
+ "values": {
1760
+ "Mini": "mini",
1761
+ "Small": "sm",
1762
+ "Medium": "md",
1763
+ "Large": "lg"
1764
+ }
1765
+ },
1766
+ "Shape": {
1767
+ "prop": "shape",
1768
+ "values": {
1769
+ "Circle": "circle",
1770
+ "Square": "square"
1771
+ }
1772
+ },
1773
+ "Show Overflow#74:84": {
1774
+ "prop": "max",
1775
+ "note": "the +N avatar appears when children exceed max"
1776
+ },
1777
+ "Show Avatar 3#74:93": {
1778
+ "prop": "children",
1779
+ "note": "Figma needs a boolean per slot; React just renders fewer children"
1780
+ },
1781
+ "Show Avatar 4#74:102": {
1782
+ "prop": "children",
1783
+ "note": "same"
1784
+ }
1785
+ }
1786
+ },
1787
+ "Border": {
1788
+ "figmaComponent": "Border",
1789
+ "figmaNodeId": "126:22724",
1790
+ "figmaPage": "Divider",
1791
+ "component": "Divider",
1792
+ "import": "import { Divider } from 'ionbase-ui';",
1793
+ "docs": "components/divider/index.html.md",
1794
+ "note": "Figma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.",
1795
+ "props": {
1796
+ "Style": {
1797
+ "prop": "orientation",
1798
+ "values": {
1799
+ "Horizontal": "horizontal",
1800
+ "Vertical": "vertical"
1801
+ }
1802
+ }
1803
+ }
1804
+ },
1805
+ "Logo-Ionbase": {
1806
+ "figmaComponent": "Logo-Ionbase",
1807
+ "figmaNodeId": "52:21369",
1808
+ "figmaPage": "Logo",
1809
+ "component": "Logo",
1810
+ "import": "import { Logo } from 'ionbase-ui';",
1811
+ "docs": "components/logo/index.html.md",
1812
+ "props": {
1813
+ "Size": {
1814
+ "prop": "size",
1815
+ "values": {
1816
+ "Small": "sm",
1817
+ "Large": "lg"
1818
+ }
1819
+ },
1820
+ "Type": {
1821
+ "prop": "wordmark",
1822
+ "values": {
1823
+ "Logo": "vector",
1824
+ "Icon": "text"
1825
+ },
1826
+ "note": "the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text"
1827
+ },
1828
+ "Property": {
1829
+ "ignore": "the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case."
1830
+ }
1831
+ }
1832
+ },
1833
+ "Modal": {
1834
+ "figmaComponent": "Modal",
1835
+ "figmaNodeId": "792:1537",
1836
+ "figmaPage": "Modal",
1837
+ "component": "Modal",
1838
+ "import": "import { Modal } from 'ionbase-ui';",
1839
+ "docs": "components/modal/index.html.md",
1840
+ "props": {
1841
+ "Size": {
1842
+ "prop": "size",
1843
+ "values": {
1844
+ "Small": "sm",
1845
+ "Medium": "md",
1846
+ "Large": "lg",
1847
+ "Fullscreen": "fullscreen"
1848
+ }
1849
+ },
1850
+ "Align": {
1851
+ "prop": "align",
1852
+ "values": {
1853
+ "Left": "left",
1854
+ "Center": "center"
1855
+ }
1856
+ },
1857
+ "Title#792:0": {
1858
+ "prop": "title"
1859
+ },
1860
+ "Description#792:5": {
1861
+ "prop": "description"
1862
+ },
1863
+ "Show Description#792:10": {
1864
+ "prop": "description"
1865
+ },
1866
+ "Show Close#792:15": {
1867
+ "prop": "showClose"
1868
+ },
1869
+ "Show Body#792:20": {
1870
+ "prop": "children"
1871
+ },
1872
+ "Show Footer#792:25": {
1873
+ "prop": "footer"
1874
+ },
1875
+ "Show Media#794:24": {
1876
+ "prop": "media"
1877
+ },
1878
+ "Media#794:33": {
1879
+ "prop": "media"
1880
+ }
1881
+ }
1882
+ },
1883
+ "Popover": {
1884
+ "figmaComponent": "Popover",
1885
+ "figmaNodeId": "825:1853",
1886
+ "figmaPage": "Popover",
1887
+ "component": "Popover",
1888
+ "import": "import { Popover } from 'ionbase-ui';",
1889
+ "docs": "components/popover/index.html.md",
1890
+ "props": {
1891
+ "Placement": {
1892
+ "prop": "placement",
1893
+ "values": {
1894
+ "Top": "top",
1895
+ "Bottom": "bottom",
1896
+ "Left": "left",
1897
+ "Right": "right"
1898
+ }
1899
+ },
1900
+ "Size": {
1901
+ "prop": "size",
1902
+ "values": {
1903
+ "Small": "sm",
1904
+ "Medium": "md",
1905
+ "Large": "lg"
1906
+ }
1907
+ },
1908
+ "Title#825:0": {
1909
+ "prop": "title"
1910
+ },
1911
+ "Show Header#825:26": {
1912
+ "prop": "title"
1913
+ },
1914
+ "Body#825:13": {
1915
+ "prop": "content"
1916
+ },
1917
+ "Show Body#825:52": {
1918
+ "prop": "content"
1919
+ },
1920
+ "Show Close#825:39": {
1921
+ "prop": "showClose"
1922
+ },
1923
+ "Show Footer#825:65": {
1924
+ "prop": "footer"
1925
+ },
1926
+ "Show Arrow#825:78": {
1927
+ "prop": "hideArrow",
1928
+ "note": "inverted — Show Arrow false is hideArrow true"
1929
+ }
1930
+ }
1931
+ },
1932
+ "Tooltip": {
1933
+ "figmaComponent": "Tooltip",
1934
+ "figmaNodeId": "801:68",
1935
+ "figmaPage": "Tooltip",
1936
+ "component": "Tooltip",
1937
+ "import": "import { Tooltip } from 'ionbase-ui';",
1938
+ "docs": "components/tooltip/index.html.md",
1939
+ "props": {
1940
+ "Placement": {
1941
+ "prop": "placement",
1942
+ "values": {
1943
+ "Top": "top",
1944
+ "Bottom": "bottom",
1945
+ "Left": "left",
1946
+ "Right": "right"
1947
+ }
1948
+ },
1949
+ "Label#801:0": {
1950
+ "prop": "label"
1951
+ },
1952
+ "Title#801:5": {
1953
+ "prop": "title"
1954
+ },
1955
+ "Show Title#801:10": {
1956
+ "prop": "title"
1957
+ }
1958
+ }
1959
+ },
1960
+ "Full Card": {
1961
+ "figmaComponent": "Full Card",
1962
+ "figmaNodeId": "592:857",
1963
+ "figmaPage": "Card",
1964
+ "component": "FullCard",
1965
+ "import": "import { FullCard } from 'ionbase-ui';",
1966
+ "docs": "components/full-card/index.html.md",
1967
+ "props": {
1968
+ "Row Reverse": {
1969
+ "prop": "alignment",
1970
+ "values": {
1971
+ "True": "left",
1972
+ "False": "right"
1973
+ },
1974
+ "note": "Figma's boolean reverses the row; the code prop names which side the MEDIA sits on"
1975
+ },
1976
+ "Headline#592:0": {
1977
+ "prop": "headline"
1978
+ },
1979
+ "Description#592:1": {
1980
+ "prop": "description"
1981
+ },
1982
+ "Show Description#592:3": {
1983
+ "prop": "description"
1984
+ },
1985
+ "Eyebrow#592:5": {
1986
+ "prop": "eyebrow"
1987
+ },
1988
+ "Show Eyebrow#592:2": {
1989
+ "prop": "eyebrow"
1990
+ },
1991
+ "Actions#592:6": {
1992
+ "prop": "actions"
1993
+ },
1994
+ "Show Actions#592:4": {
1995
+ "prop": "actions"
1996
+ },
1997
+ "Media#592:7": {
1998
+ "prop": "media",
1999
+ "note": "pass the screenshot itself — the component draws the frame"
2000
+ }
2001
+ }
2002
+ },
2003
+ "Header": {
2004
+ "figmaComponent": "Header",
2005
+ "figmaNodeId": "69:335",
2006
+ "figmaPage": "Header",
2007
+ "component": "Header",
2008
+ "import": "import { Header } from 'ionbase-ui';",
2009
+ "docs": "components/header/index.html.md",
2010
+ "props": {
2011
+ "Device": {
2012
+ "prop": "open",
2013
+ "when": {
2014
+ "Mobile-Open": true,
2015
+ "Mobile-Closed": false
2016
+ },
2017
+ "note": "Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop."
2018
+ },
2019
+ "Center Slot#68:12": {
2020
+ "prop": "center"
2021
+ },
2022
+ "End Slot#68:16": {
2023
+ "prop": "end"
2024
+ },
2025
+ "End Slot#667:37": {
2026
+ "prop": "end",
2027
+ "note": "a duplicate slot in the Figma component"
2028
+ },
2029
+ "Show Center Slot#69:0": {
2030
+ "prop": "center"
2031
+ },
2032
+ "Show End Slot#69:4": {
2033
+ "prop": "end"
2034
+ }
2035
+ }
2036
+ }
2037
+ },
2038
+ "unmapped": {
2039
+ "Form Field": "Label, helper text and error wiring are built into Input and Select rather than a separate wrapper — the wrapper is how Figma composes them, not how React does.",
2040
+ "Table/Cell Text": "TableCell covers Figma's Table Cell and Cell Text together; the two are never used apart in the design. Recorded in TableCell's contract.",
2041
+ "Screen Frame": "The frame FullCard draws around its media slot. The component owns it, so there is nothing for a caller to place.",
2042
+ "Menu Section Title": "No code counterpart yet. It is a heading inside a menu surface; nothing renders it.",
2043
+ "Line": "An internal part of the Scroll Progress rail, not a component a caller composes.",
2044
+ "Progress": "As Line — internal to ScrollProgress.",
2045
+ "Progress Heading": "As Line — internal to ScrollProgress."
2046
+ }
2047
+ }