RubyGems - playbook_ui - Versions diffs - 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082 - Mend

playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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 (466) hide show

data/dist/ai/playgrounds/index.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"description":"Slim playground patterns for AI code generation in consuming apps. Full website playground configs are not shipped here.","fields":["presets","hints","conditionals","structureModes","template","children","customProps","wrapper","statefulProps","requiredCodeProps","propTargets","propAliases","codegenDefaultProps","externalImports","imports","externalDependencies"],"kits":{"advanced_table":{"path":"playgrounds/advanced_table.json","presetCount":7,"hintCount":9,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":true},"avatar":{"path":"playgrounds/avatar.json","presetCount":8,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"background":{"path":"playgrounds/background.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"badge":{"path":"playgrounds/badge.json","presetCount":7,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"body":{"path":"playgrounds/body.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"bread_crumbs":{"path":"playgrounds/bread_crumbs.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"button":{"path":"playgrounds/button.json","presetCount":7,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"button_toolbar":{"path":"playgrounds/button_toolbar.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"caption":{"path":"playgrounds/caption.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"card":{"path":"playgrounds/card.json","presetCount":6,"hintCount":1,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"checkbox":{"path":"playgrounds/checkbox.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"circle_icon_button":{"path":"playgrounds/circle_icon_button.json","presetCount":6,"hintCount":2,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"collapsible":{"path":"playgrounds/collapsible.json","presetCount":3,"hintCount":1,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"contact":{"path":"playgrounds/contact.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"container":{"path":"playgrounds/container.json","presetCount":3,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"copy_button":{"path":"playgrounds/copy_button.json","presetCount":4,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"currency":{"path":"playgrounds/currency.json","presetCount":6,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"dashboard_value":{"path":"playgrounds/dashboard_value.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date":{"path":"playgrounds/date.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_picker":{"path":"playgrounds/date_picker.json","presetCount":11,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"date_range_inline":{"path":"playgrounds/date_range_inline.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_range_stacked":{"path":"playgrounds/date_range_stacked.json","presetCount":3,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_stacked":{"path":"playgrounds/date_stacked.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_time":{"path":"playgrounds/date_time.json","presetCount":7,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_time_stacked":{"path":"playgrounds/date_time_stacked.json","presetCount":3,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_year_stacked":{"path":"playgrounds/date_year_stacked.json","presetCount":3,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"detail":{"path":"playgrounds/detail.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"dialog":{"path":"playgrounds/dialog.json","presetCount":6,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"distribution_bar":{"path":"playgrounds/distribution_bar.json","presetCount":3,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"draggable":{"path":"playgrounds/draggable.json","presetCount":8,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"dropdown":{"path":"playgrounds/dropdown.json","presetCount":16,"hintCount":11,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"empty_state":{"path":"playgrounds/empty_state.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"file_upload":{"path":"playgrounds/file_upload.json","presetCount":6,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"filter":{"path":"playgrounds/filter.json","presetCount":7,"hintCount":7,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"fixed_confirmation_toast":{"path":"playgrounds/fixed_confirmation_toast.json","presetCount":9,"hintCount":9,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"flex":{"path":"playgrounds/flex.json","presetCount":12,"hintCount":12,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"form_group":{"path":"playgrounds/form_group.json","presetCount":7,"hintCount":7,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"form_pill":{"path":"playgrounds/form_pill.json","presetCount":9,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"full_screen":{"path":"playgrounds/full_screen.json","presetCount":6,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"hashtag":{"path":"playgrounds/hashtag.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"highlight":{"path":"playgrounds/highlight.json","presetCount":5,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"home_address_street":{"path":"playgrounds/home_address_street.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"icon":{"path":"playgrounds/icon.json","presetCount":7,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"icon_circle":{"path":"playgrounds/icon_circle.json","presetCount":5,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"icon_stat_value":{"path":"playgrounds/icon_stat_value.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"icon_value":{"path":"playgrounds/icon_value.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"image":{"path":"playgrounds/image.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"label_pill":{"path":"playgrounds/label_pill.json","presetCount":6,"hintCount":2,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"label_value":{"path":"playgrounds/label_value.json","presetCount":6,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"layout":{"path":"playgrounds/layout.json","presetCount":8,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"legend":{"path":"playgrounds/legend.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"link":{"path":"playgrounds/link.json","presetCount":10,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"list":{"path":"playgrounds/list.json","presetCount":8,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"loading_inline":{"path":"playgrounds/loading_inline.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"map":{"path":"playgrounds/map.json","presetCount":4,"hintCount":5,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"message":{"path":"playgrounds/message.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"multi_level_select":{"path":"playgrounds/multi_level_select.json","presetCount":10,"hintCount":11,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"multiple_users":{"path":"playgrounds/multiple_users.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"multiple_users_stacked":{"path":"playgrounds/multiple_users_stacked.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"nav":{"path":"playgrounds/nav.json","presetCount":12,"hintCount":12,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"online_status":{"path":"playgrounds/online_status.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"overlay":{"path":"playgrounds/overlay.json","presetCount":6,"hintCount":4,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"pagination":{"path":"playgrounds/pagination.json","presetCount":4,"hintCount":2,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"passphrase":{"path":"playgrounds/passphrase.json","presetCount":7,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"pb_bar_graph":{"path":"playgrounds/pb_bar_graph.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"pb_circle_chart":{"path":"playgrounds/pb_circle_chart.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"pb_gauge_chart":{"path":"playgrounds/pb_gauge_chart.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"pb_line_graph":{"path":"playgrounds/pb_line_graph.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"person":{"path":"playgrounds/person.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"person_contact":{"path":"playgrounds/person_contact.json","presetCount":5,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"phone_number_input":{"path":"playgrounds/phone_number_input.json","presetCount":8,"hintCount":7,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"pill":{"path":"playgrounds/pill.json","presetCount":7,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"popover":{"path":"playgrounds/popover.json","presetCount":9,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"progress_pills":{"path":"playgrounds/progress_pills.json","presetCount":5,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"progress_simple":{"path":"playgrounds/progress_simple.json","presetCount":8,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"progress_step":{"path":"playgrounds/progress_step.json","presetCount":8,"hintCount":4,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"radio":{"path":"playgrounds/radio.json","presetCount":6,"hintCount":2,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"rich_text_editor":{"path":"playgrounds/rich_text_editor.json","presetCount":6,"hintCount":2,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"section_separator":{"path":"playgrounds/section_separator.json","presetCount":8,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"select":{"path":"playgrounds/select.json","presetCount":4,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"selectable_card":{"path":"playgrounds/selectable_card.json","presetCount":3,"hintCount":4,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"selectable_card_icon":{"path":"playgrounds/selectable_card_icon.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"selectable_icon":{"path":"playgrounds/selectable_icon.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"selectable_list":{"path":"playgrounds/selectable_list.json","presetCount":3,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"skeleton_loading":{"path":"playgrounds/skeleton_loading.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"source":{"path":"playgrounds/source.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"star_rating":{"path":"playgrounds/star_rating.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"stat_change":{"path":"playgrounds/stat_change.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"stat_value":{"path":"playgrounds/stat_value.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"table":{"path":"playgrounds/table.json","presetCount":7,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"text_input":{"path":"playgrounds/text_input.json","presetCount":4,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"textarea":{"path":"playgrounds/textarea.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"time":{"path":"playgrounds/time.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"time_picker":{"path":"playgrounds/time_picker.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"time_range_inline":{"path":"playgrounds/time_range_inline.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"time_stacked":{"path":"playgrounds/time_stacked.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"timeline":{"path":"playgrounds/timeline.json","presetCount":5,"hintCount":5,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"timestamp":{"path":"playgrounds/timestamp.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"title":{"path":"playgrounds/title.json","presetCount":8,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"title_count":{"path":"playgrounds/title_count.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"title_detail":{"path":"playgrounds/title_detail.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"toggle":{"path":"playgrounds/toggle.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"tooltip":{"path":"playgrounds/tooltip.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"typeahead":{"path":"playgrounds/typeahead.json","presetCount":7,"hintCount":7,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"user":{"path":"playgrounds/user.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"user_badge":{"path":"playgrounds/user_badge.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"weekday_stacked":{"path":"playgrounds/weekday_stacked.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false}}}
1	+ {"description":"Slim playground patterns for AI code generation in consuming apps. Full website playground configs are not shipped here.","fields":["presets","hints","conditionals","structureModes","template","children","customProps","wrapper","statefulProps","requiredCodeProps","propTargets","propAliases","codegenDefaultProps","externalImports","imports","externalDependencies"],"kits":{"advanced_table":{"path":"playgrounds/advanced_table.json","presetCount":7,"hintCount":10,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":true},"avatar":{"path":"playgrounds/avatar.json","presetCount":8,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"background":{"path":"playgrounds/background.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"badge":{"path":"playgrounds/badge.json","presetCount":7,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"body":{"path":"playgrounds/body.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"bread_crumbs":{"path":"playgrounds/bread_crumbs.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"button":{"path":"playgrounds/button.json","presetCount":7,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"button_toolbar":{"path":"playgrounds/button_toolbar.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"caption":{"path":"playgrounds/caption.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"card":{"path":"playgrounds/card.json","presetCount":6,"hintCount":1,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"checkbox":{"path":"playgrounds/checkbox.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"circle_icon_button":{"path":"playgrounds/circle_icon_button.json","presetCount":6,"hintCount":2,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"collapsible":{"path":"playgrounds/collapsible.json","presetCount":3,"hintCount":1,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"contact":{"path":"playgrounds/contact.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"container":{"path":"playgrounds/container.json","presetCount":3,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"copy_button":{"path":"playgrounds/copy_button.json","presetCount":4,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"currency":{"path":"playgrounds/currency.json","presetCount":6,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"dashboard_value":{"path":"playgrounds/dashboard_value.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date":{"path":"playgrounds/date.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_picker":{"path":"playgrounds/date_picker.json","presetCount":11,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"date_range_inline":{"path":"playgrounds/date_range_inline.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_range_stacked":{"path":"playgrounds/date_range_stacked.json","presetCount":3,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_stacked":{"path":"playgrounds/date_stacked.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_time":{"path":"playgrounds/date_time.json","presetCount":7,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_time_stacked":{"path":"playgrounds/date_time_stacked.json","presetCount":3,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"date_year_stacked":{"path":"playgrounds/date_year_stacked.json","presetCount":3,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"detail":{"path":"playgrounds/detail.json","presetCount":4,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"dialog":{"path":"playgrounds/dialog.json","presetCount":6,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"distribution_bar":{"path":"playgrounds/distribution_bar.json","presetCount":3,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"draggable":{"path":"playgrounds/draggable.json","presetCount":8,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"dropdown":{"path":"playgrounds/dropdown.json","presetCount":17,"hintCount":11,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"empty_state":{"path":"playgrounds/empty_state.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"file_upload":{"path":"playgrounds/file_upload.json","presetCount":6,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"filter":{"path":"playgrounds/filter.json","presetCount":7,"hintCount":7,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"fixed_confirmation_toast":{"path":"playgrounds/fixed_confirmation_toast.json","presetCount":9,"hintCount":9,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"flex":{"path":"playgrounds/flex.json","presetCount":12,"hintCount":12,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"form_group":{"path":"playgrounds/form_group.json","presetCount":7,"hintCount":7,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"form_pill":{"path":"playgrounds/form_pill.json","presetCount":9,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"full_screen":{"path":"playgrounds/full_screen.json","presetCount":6,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"hashtag":{"path":"playgrounds/hashtag.json","presetCount":5,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"highlight":{"path":"playgrounds/highlight.json","presetCount":5,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"home_address_street":{"path":"playgrounds/home_address_street.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"icon":{"path":"playgrounds/icon.json","presetCount":7,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"icon_circle":{"path":"playgrounds/icon_circle.json","presetCount":5,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"icon_stat_value":{"path":"playgrounds/icon_stat_value.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"icon_value":{"path":"playgrounds/icon_value.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"image":{"path":"playgrounds/image.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"label_pill":{"path":"playgrounds/label_pill.json","presetCount":6,"hintCount":2,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"label_value":{"path":"playgrounds/label_value.json","presetCount":6,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"layout":{"path":"playgrounds/layout.json","presetCount":8,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"legend":{"path":"playgrounds/legend.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"link":{"path":"playgrounds/link.json","presetCount":10,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"list":{"path":"playgrounds/list.json","presetCount":8,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"loading_inline":{"path":"playgrounds/loading_inline.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"map":{"path":"playgrounds/map.json","presetCount":4,"hintCount":5,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"message":{"path":"playgrounds/message.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"multi_level_select":{"path":"playgrounds/multi_level_select.json","presetCount":10,"hintCount":11,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"multiple_users":{"path":"playgrounds/multiple_users.json","presetCount":6,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"multiple_users_stacked":{"path":"playgrounds/multiple_users_stacked.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"nav":{"path":"playgrounds/nav.json","presetCount":12,"hintCount":12,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"online_status":{"path":"playgrounds/online_status.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"overlay":{"path":"playgrounds/overlay.json","presetCount":6,"hintCount":4,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"pagination":{"path":"playgrounds/pagination.json","presetCount":4,"hintCount":2,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"passphrase":{"path":"playgrounds/passphrase.json","presetCount":7,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"pb_bar_graph":{"path":"playgrounds/pb_bar_graph.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"pb_circle_chart":{"path":"playgrounds/pb_circle_chart.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"pb_gauge_chart":{"path":"playgrounds/pb_gauge_chart.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"pb_line_graph":{"path":"playgrounds/pb_line_graph.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"person":{"path":"playgrounds/person.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"person_contact":{"path":"playgrounds/person_contact.json","presetCount":5,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"phone_number_input":{"path":"playgrounds/phone_number_input.json","presetCount":8,"hintCount":7,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"pill":{"path":"playgrounds/pill.json","presetCount":7,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"popover":{"path":"playgrounds/popover.json","presetCount":9,"hintCount":6,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"progress_pills":{"path":"playgrounds/progress_pills.json","presetCount":5,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"progress_simple":{"path":"playgrounds/progress_simple.json","presetCount":8,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"progress_step":{"path":"playgrounds/progress_step.json","presetCount":8,"hintCount":4,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"radio":{"path":"playgrounds/radio.json","presetCount":6,"hintCount":2,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"rich_text_editor":{"path":"playgrounds/rich_text_editor.json","presetCount":6,"hintCount":2,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"section_separator":{"path":"playgrounds/section_separator.json","presetCount":8,"hintCount":1,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"select":{"path":"playgrounds/select.json","presetCount":4,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"selectable_card":{"path":"playgrounds/selectable_card.json","presetCount":3,"hintCount":4,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"selectable_card_icon":{"path":"playgrounds/selectable_card_icon.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"selectable_icon":{"path":"playgrounds/selectable_icon.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"selectable_list":{"path":"playgrounds/selectable_list.json","presetCount":3,"hintCount":3,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"skeleton_loading":{"path":"playgrounds/skeleton_loading.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"source":{"path":"playgrounds/source.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"star_rating":{"path":"playgrounds/star_rating.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"stat_change":{"path":"playgrounds/stat_change.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"stat_value":{"path":"playgrounds/stat_value.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"table":{"path":"playgrounds/table.json","presetCount":7,"hintCount":8,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"text_input":{"path":"playgrounds/text_input.json","presetCount":4,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"textarea":{"path":"playgrounds/textarea.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"time":{"path":"playgrounds/time.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"time_picker":{"path":"playgrounds/time_picker.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"time_range_inline":{"path":"playgrounds/time_range_inline.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"time_stacked":{"path":"playgrounds/time_stacked.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"timeline":{"path":"playgrounds/timeline.json","presetCount":5,"hintCount":5,"hasStructureModes":true,"hasHints":true,"hasConditionals":false,"hasCustomProps":true,"hasSamples":false},"timestamp":{"path":"playgrounds/timestamp.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":true,"hasCustomProps":false,"hasSamples":false},"title":{"path":"playgrounds/title.json","presetCount":8,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"title_count":{"path":"playgrounds/title_count.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"title_detail":{"path":"playgrounds/title_detail.json","presetCount":4,"hintCount":0,"hasStructureModes":false,"hasHints":false,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"toggle":{"path":"playgrounds/toggle.json","presetCount":3,"hintCount":3,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"tooltip":{"path":"playgrounds/tooltip.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"typeahead":{"path":"playgrounds/typeahead.json","presetCount":7,"hintCount":7,"hasStructureModes":true,"hasHints":true,"hasConditionals":true,"hasCustomProps":true,"hasSamples":false},"user":{"path":"playgrounds/user.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"user_badge":{"path":"playgrounds/user_badge.json","presetCount":4,"hintCount":4,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false},"weekday_stacked":{"path":"playgrounds/weekday_stacked.json","presetCount":5,"hintCount":5,"hasStructureModes":false,"hasHints":true,"hasConditionals":false,"hasCustomProps":false,"hasSamples":false}}}

data/dist/ai/playgrounds/rich_text_editor.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"presets":[{"name":"Default","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Description","name":"description"}},{"name":"Simple","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Notes","name":"notes","simple":true}},{"name":"Focus Toolbar","structureMode":"advanced","props":{"advancedEditorToolbar":false,"focus":true,"label":"Focus editor"}},{"name":"Tall Editor","structureMode":"advanced","props":{"inputHeight":"lg","inputMinHeight":"md","label":"Tall editor"}},{"name":"Required","structureMode":"advanced","props":{"label":"Description","name":"description","requiredIndicator":true}},{"name":"Sticky","structureMode":"advanced","props":{"label":"Sticky editor","sticky":true}}],"hints":{"advanced":{"presetName":"Default","message":"The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.","type":"info"},"focus":{"when":{"focus":true},"message":"Focus Toolbar shows the toolbar when the advanced editor receives focus.","type":"info"}},"conditionals":{"advancedEditorToolbar":{"structureMode":"advanced"},"inputHeight":{"structureMode":"advanced"},"inputMinHeight":{"structureMode":"advanced"},"sticky":{"structureMode":"advanced"}},"structureModes":{"default":"advanced","modes":{"advanced":{"label":"Advanced","template":"<RichTextEditor\n advancedEditor={editor}{{props}}\n>\n <EditorContent editor={editor} />\n</RichTextEditor>","children":"","wrapper":"const RichTextEditorPlayground = () => {\n const editor = useEditor({\n extensions: [StarterKit.configure({ trailingNode: false })],\n content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n })\n\n if (!editor) return null\n\n return {{component}}\n}\n\n<RichTextEditorPlayground />","externalImports":["import { useEditor, EditorContent } from '@tiptap/react'","import StarterKit from '@tiptap/starter-kit'"]}}},"template":"<RichTextEditor{{props}} />","propTargets":{},"externalDependencies":{"packages":["react-trix","trix","@tiptap/react","@tiptap/starter-kit","@tiptap/extension-link","prosemirror-markdown","prosemirror-model"],"optional":true,"note":"Default React editor uses Trix (pass TrixEditor from react-trix). Advanced React editor uses TipTap, and the host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails ~~loads~~ TipTap ~~from~~ ~~esm~~.sh and accepts only these extension strings: underline, text_align, horizontal_rule, image."}}
1	+ {"presets":[{"name":"Default","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Description","name":"description"}},{"name":"Simple","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Notes","name":"notes","simple":true}},{"name":"Focus Toolbar","structureMode":"advanced","props":{"advancedEditorToolbar":false,"focus":true,"label":"Focus editor"}},{"name":"Tall Editor","structureMode":"advanced","props":{"inputHeight":"lg","inputMinHeight":"md","label":"Tall editor"}},{"name":"Required","structureMode":"advanced","props":{"label":"Description","name":"description","requiredIndicator":true}},{"name":"Sticky","structureMode":"advanced","props":{"label":"Sticky editor","sticky":true}}],"hints":{"advanced":{"presetName":"Default","message":"The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.","type":"info"},"focus":{"when":{"focus":true},"message":"Focus Toolbar shows the toolbar when the advanced editor receives focus.","type":"info"}},"conditionals":{"advancedEditorToolbar":{"structureMode":"advanced"},"inputHeight":{"structureMode":"advanced"},"inputMinHeight":{"structureMode":"advanced"},"sticky":{"structureMode":"advanced"}},"structureModes":{"default":"advanced","modes":{"advanced":{"label":"Advanced","template":"<RichTextEditor\n advancedEditor={editor}{{props}}\n>\n <EditorContent editor={editor} />\n</RichTextEditor>","children":"","wrapper":"const RichTextEditorPlayground = () => {\n const editor = useEditor({\n extensions: [StarterKit.configure({ trailingNode: false })],\n content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n })\n\n if (!editor) return null\n\n return {{component}}\n}\n\n<RichTextEditorPlayground />","externalImports":["import { useEditor, EditorContent } from '@tiptap/react'","import StarterKit from '@tiptap/starter-kit'"]}}},"template":"<RichTextEditor{{props}} />","propTargets":{},"externalDependencies":{"packages":["react-trix","trix","@tiptap/react","@tiptap/starter-kit","@tiptap/extension-link","prosemirror-markdown","prosemirror-model"],"optional":true,"note":"Default React editor uses Trix (pass TrixEditor from react-trix). Advanced React editor uses TipTap, and the host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails bundles TipTap in playbook-rails.js (no host packages needed) and accepts only these extension strings: underline, text_align, horizontal_rule, image."}}

data/dist/ai/playgrounds/typeahead.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"presets":[{"name":"Default","props":{"label":"Colors","name":"color","options":[{"label":"Orange","value":"#FFA500"},{"label":"Red","value":"#FF0000"},{"label":"Green","value":"#00FF00"},{"label":"Blue","value":"#0000FF"}]}},{"name":"With Pills","props":{"label":"With Pills","name":"with_pills","isMulti":true,"options":[{"label":"Orange","value":"#FFA500"},{"label":"Red","value":"#FF0000"},{"label":"Green","value":"#00FF00"},{"label":"Blue","value":"#0000FF"}]}},{"name":"Count display","props":{"label":"Tags","name":"tags","inputDisplay":"none","isMulti":true,"options":[{"label":"Design","value":"design"},{"label":"Engineering","value":"engineering"},{"label":"Support","value":"support"}]}},{"name":"Required validation","props":{"label":"Assignee","name":"assignee","required":true,"requiredIndicator":true,"validation":{"message":"Choose an assignee."},"error":"Selection is required.","options":[{"label":"Ada","value":"ada"},{"label":"Grace","value":"grace"}]}},{"name":"Async users","structureMode":"advanced","props":{"async":true,"label":"Users","name":"users","loadOptions":"playgroundTypeahead.loadOptions","getOptionLabel":"playgroundTypeahead.getOptionLabel","getOptionValue":"playgroundTypeahead.getOptionValue","options":[]}},{"name":"Custom menu","structureMode":"advanced","props":{"label":"Colors","name":"custom_menu","components":{"__playgroundCode":"{ MenuList }"},"marginBottom":"none","options":[{"label":"Orange","value":"#FFA500"},{"label":"Red","value":"#FF0000"},{"label":"Green","value":"#00FF00"}]}},{"name":"Creatable handler","props":{"label":"Add labels","name":"labels","createable":true,"preserveSearchInput":true,"onChange":"(selected) => console.log(selected)","options":[{"label":"Bug","value":"bug"},{"label":"Feature","value":"feature"}]}}],"hints":{"default":{"presetName":"Default","message":"Default uses a local options array with label and value keys.","type":"info"},"count_display":{"presetName":"Count display","message":"Count display uses multi-select with inputDisplay set to none so selected values render as a count.","type":"info"},"required_validation":{"presetName":"Required validation","message":"Required validation pairs required, requiredIndicator, validation, and error copy.","type":"info"},"async_users":{"presetName":"Async users","message":"Async users demonstrates loadOptions plus custom option label/value resolvers.","type":"info"},"custom_menu":{"presetName":"Custom menu","message":"Custom menu passes a components map to replace Typeahead.MenuList content.","type":"info"},"creatable_handler":{"presetName":"Creatable handler","message":"Creatable handler shows custom option creation, preserved search input, and an onChange handler.","type":"info"},"with_pills":{"presetName":"With Pills","message":"With Pills uses multi-select with pills so selected values render as pills.","type":"info"}},"conditionals":{"loadOptions":{"requires":{"async":true}},"getOptionLabel":{"requires":{"async":true}},"getOptionValue":{"requires":{"async":true}},"requiredIndicator":{"requires":"label"},"validation":{"requires":{"required":true}},"optionsByContext":{"requires":"searchContextSelector"},"clearOnContextChange":{"requires":"searchContextSelector"},"enablePillReorder":{"requires":"isMulti"},"showPillIndex":{"requires":"isMulti"},"~~pillDragHandle~~":{"requires":"isMulti"}},"structureModes":{"default":"standard","modes":{"standard":{"label":"Standard","template":"<Typeahead{{props}} />","children":""},"advanced":{"label":"Advanced setup","template":"<Typeahead{{props}} />","children":"","wrapper":"const playgroundTypeaheadOptions = [\n { name: \"Ada Lovelace\", id: \"ada\" },\n { name: \"Grace Hopper\", id: \"grace\" },\n { name: \"Katherine Johnson\", id: \"katherine\" },\n { name: \"Margaret Hamilton\", id: \"margaret\" },\n]\n\nconst playgroundTypeahead = {\n loadOptions: (inputValue) => new Promise((resolve) => {\n const search = inputValue.toLowerCase()\n window.setTimeout(() => {\n resolve(playgroundTypeaheadOptions.filter((option) => option.name.toLowerCase().includes(search)))\n }, 250)\n }),\n getOptionLabel: (option) => option.name \|\| option.label,\n getOptionValue: (option) => String(option.id \|\| option.value),\n}\n\nif (typeof window !== \"undefined\") {\n window.playgroundTypeahead = playgroundTypeahead\n}\n\nconst MenuList = (props) => (\n <Typeahead.MenuList\n {...props}\n footer={<Button margin=\"sm\" text=\"Custom footer\" />}\n />\n)\n\nconst TypeaheadPlaygroundExample = () => (\n {{component}}\n)\n\n<TypeaheadPlaygroundExample />"}}},"template":"<Typeahead{{props}} />","customProps":{"isMulti":{"type":"boolean","platforms":["react"],"default":false}},"propTargets":{}}
1	+ {"presets":[{"name":"Default","props":{"label":"Colors","name":"color","options":[{"label":"Orange","value":"#FFA500"},{"label":"Red","value":"#FF0000"},{"label":"Green","value":"#00FF00"},{"label":"Blue","value":"#0000FF"}]}},{"name":"With Pills","props":{"label":"With Pills","name":"with_pills","isMulti":true,"options":[{"label":"Orange","value":"#FFA500"},{"label":"Red","value":"#FF0000"},{"label":"Green","value":"#00FF00"},{"label":"Blue","value":"#0000FF"}]}},{"name":"Count display","props":{"label":"Tags","name":"tags","inputDisplay":"none","isMulti":true,"options":[{"label":"Design","value":"design"},{"label":"Engineering","value":"engineering"},{"label":"Support","value":"support"}]}},{"name":"Required validation","props":{"label":"Assignee","name":"assignee","required":true,"requiredIndicator":true,"validation":{"message":"Choose an assignee."},"error":"Selection is required.","options":[{"label":"Ada","value":"ada"},{"label":"Grace","value":"grace"}]}},{"name":"Async users","structureMode":"advanced","props":{"async":true,"label":"Users","name":"users","loadOptions":"playgroundTypeahead.loadOptions","getOptionLabel":"playgroundTypeahead.getOptionLabel","getOptionValue":"playgroundTypeahead.getOptionValue","options":[]}},{"name":"Custom menu","structureMode":"advanced","props":{"label":"Colors","name":"custom_menu","components":{"__playgroundCode":"{ MenuList }"},"marginBottom":"none","options":[{"label":"Orange","value":"#FFA500"},{"label":"Red","value":"#FF0000"},{"label":"Green","value":"#00FF00"}]}},{"name":"Creatable handler","props":{"label":"Add labels","name":"labels","createable":true,"preserveSearchInput":true,"onChange":"(selected) => console.log(selected)","options":[{"label":"Bug","value":"bug"},{"label":"Feature","value":"feature"}]}}],"hints":{"default":{"presetName":"Default","message":"Default uses a local options array with label and value keys.","type":"info"},"count_display":{"presetName":"Count display","message":"Count display uses multi-select with inputDisplay set to none so selected values render as a count.","type":"info"},"required_validation":{"presetName":"Required validation","message":"Required validation pairs required, requiredIndicator, validation, and error copy.","type":"info"},"async_users":{"presetName":"Async users","message":"Async users demonstrates loadOptions plus custom option label/value resolvers.","type":"info"},"custom_menu":{"presetName":"Custom menu","message":"Custom menu passes a components map to replace Typeahead.MenuList content.","type":"info"},"creatable_handler":{"presetName":"Creatable handler","message":"Creatable handler shows custom option creation, preserved search input, and an onChange handler.","type":"info"},"with_pills":{"presetName":"With Pills","message":"With Pills uses multi-select with pills so selected values render as pills.","type":"info"}},"conditionals":{"loadOptions":{"requires":{"async":true}},"getOptionLabel":{"requires":{"async":true}},"getOptionValue":{"requires":{"async":true}},"requiredIndicator":{"requires":"label"},"validation":{"requires":{"required":true}},"optionsByContext":{"requires":"searchContextSelector"},"clearOnContextChange":{"requires":"searchContextSelector"},"enablePillReorder":{"requires":"isMulti"},"showPillIndex":{"requires":"isMulti"},"externalDragHandle":{"requires":"isMulti"}},"structureModes":{"default":"standard","modes":{"standard":{"label":"Standard","template":"<Typeahead{{props}} />","children":""},"advanced":{"label":"Advanced setup","template":"<Typeahead{{props}} />","children":"","wrapper":"const playgroundTypeaheadOptions = [\n { name: \"Ada Lovelace\", id: \"ada\" },\n { name: \"Grace Hopper\", id: \"grace\" },\n { name: \"Katherine Johnson\", id: \"katherine\" },\n { name: \"Margaret Hamilton\", id: \"margaret\" },\n]\n\nconst playgroundTypeahead = {\n loadOptions: (inputValue) => new Promise((resolve) => {\n const search = inputValue.toLowerCase()\n window.setTimeout(() => {\n resolve(playgroundTypeaheadOptions.filter((option) => option.name.toLowerCase().includes(search)))\n }, 250)\n }),\n getOptionLabel: (option) => option.name \|\| option.label,\n getOptionValue: (option) => String(option.id \|\| option.value),\n}\n\nif (typeof window !== \"undefined\") {\n window.playgroundTypeahead = playgroundTypeahead\n}\n\nconst MenuList = (props) => (\n <Typeahead.MenuList\n {...props}\n footer={<Button margin=\"sm\" text=\"Custom footer\" />}\n />\n)\n\nconst TypeaheadPlaygroundExample = () => (\n {{component}}\n)\n\n<TypeaheadPlaygroundExample />"}}},"template":"<Typeahead{{props}} />","customProps":{"isMulti":{"type":"boolean","platforms":["react"],"default":false}},"propTargets":{}}

data/dist/ai/visual-index.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"description":"Visual → Playbook kit map for screenshot and design handoffs. Use this before guessing kit names from visuals.","howToUse":["Decompose the screenshot top-down: page regions → sections → controls → text","Match each region to kits via looksLike / typographyByVisual / layoutCues","Resolve conflicts with not[] and gotchas","Map px spacing to spacingPxToToken; then open kits/<name>.schema.json + playgrounds/<name>.json"],"spacingPxToToken":{"0":"none","4":"xxs","8":"xs","16":"sm","24":"md","32":"lg","40":"xl","48":"xxl"},"typographyByVisual":[{"when":"Bold text, roughly ≥20px","kit":"title","props":{"size":3}},{"when":"Bold text, roughly 14–18px","kit":"title","props":{"size":4}},{"when":"Small muted text, roughly ≤12px","kit":"caption","props":{"size":"xs"}},{"when":"Bold small/medium label (not a heading)","kit":"detail"},{"when":"Default paragraph / body copy","kit":"body"}],"layoutCues":[{"when":"Horizontal or vertical auto-layout / flex row or column of siblings","kit":"flex"},{"when":"Surface with fill + border/radius containing content","kit":"card"},{"when":"Full-bleed page/section background color or image","kit":"background"},{"when":"Sidebar + main content regions","kit":"layout"},{"when":"Thin horizontal rule / divider between sections","kit":"section_separator"}],"categories":{"advanced_table":{"description":"The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting."},"alerts_and_dialogs":{"description":"Components for displaying alerts, confirmations, and overlay content to users."},"buttons":{"description":"Buttons are used primarily for actions, such as “Save” and “Cancel”. Link Buttons are used for less important or less commonly used actions, such as “view shipping settings”."},"data_visualization":{"description":"Components for displaying data in tables, lists, charts, and graphs."},"date_and_time_text_patterns":{"description":"Components for displaying dates and times in various formats."},"form_and_dashboard_text_patterns":{"description":"Components for displaying structured data on forms and dashboards."},"form_elements":{"description":"Form wrapper components and specialized form controls."},"form_input":{"description":"Components for text-based user input in forms."},"form_selection":{"description":"Components for selecting options, dates, and making choices in forms."},"icons_and_images":{"description":"Components for displaying icons, images, and visual media."},"layout_and_structure":{"description":"Components for structuring and organizing page layouts and content containers."},"message_text_patterns":{"description":"Components for displaying messages and highlighting content."},"navigation":{"description":"Components for navigation, breadcrumbs, and pagination."},"state_and_progress_indicators":{"description":"Components for showing loading states, progress, and timelines."},"tags":{"description":"Components for tags, badges, pills, and status indicators."},"typography":{"description":"Text components for consistent typography throughout the application."},"user":{"description":"Components for displaying user information, avatars, and user-related data."}},"kits":{"advanced_table":{"category":"advanced_table","description":"The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.","status":"stable","sections":[{"name":"default","description":"Minimal table: required props and structure before adding features."},{"name":"sorting","description":"Sortable headers, controlled sort state, and custom compare logic."},{"name":"pagination_&_data_states","description":"Paged or infinite data plus loading and empty states."},{"name":"row_interaction","description":"Select, expand, subrows, pinning; row highlights and bulk actions."},{"name":"column_configuration","description":"Define columns: headers, visibility, grouping, borders, widths."},{"name":"cell_behavior","description":"What each cell shows and does: custom content, edit, loading."},{"name":"layout_&_positioning","description":"Scroll, sticky headers/columns, responsive layout, fullscreen modes."},{"name":"styling","description":"Styling per row or column: padding, color, and border."}],"looksLike":["Complex data grid with expand/collapse nested rows","Sortable headers, row selection, column visibility, sticky columns"],"not":["table"],"gotchas":["Requires columnDefinitions + tableData","Copy shapes from playgrounds/advanced_table.json samples","Nested rows use children arrays; first column often uses cellAccessors"],"cues":{"typicalProps":["columnDefinitions","tableData"]}},"avatar":{"category":"user","description":"User photo for recognition. Prefer User when showing a name; Avatar alone if names are hidden.","status":"stable","looksLike":["Circular user image or initials"],"not":["user_badge","multiple_users","image"],"gotchas":["Use name prop for initials — do not use layer/spec text as the person name"],"cues":{"typicalProps":["name","size","imageUrl"]}},"background":{"category":"layout_and_structure","description":"The Background component is used for adding a background to a page or to any container.","status":"stable"},"badge":{"category":"tags","description":"Badges can be used for notification, tags, and status. They are used for count and numbers.","status":"stable","looksLike":["Small numeric or count indicator, often on an icon or nav item"],"not":["pill","form_pill","user_badge"],"gotchas":["Prefer text prop for the displayed value"],"cues":{"typicalProps":["text","variant"]}},"body":{"category":"typography","description":"Default paragraph style. Step to light, then lighter, only to de-emphasize supporting lines.","status":"stable","looksLike":["Standard paragraph text"],"not":["title","caption","detail"],"cues":{"typicalProps":["text","color"]}},"bread_crumbs":{"category":"navigation","description":"BreadCrumbs can be used for keeping a user aware of their route location.","status":"stable"},"button":{"category":"buttons","description":"Primary Button for main tasks; secondary and danger variants for other actions.","status":"stable","looksLike":["Filled or outline rectangular action with a label","Primary blue CTA, secondary outline, or red danger action","Text that looks like a link-styled control for a lesser action"],"not":["circle_icon_button","icon_button","link","form_pill"],"variantsFromVisual":{"solid blue / filled primary":"primary","outline / ghost secondary":"secondary","red destructive":"danger","text-only link style":"link","emoji/reaction with count":"reaction"},"cues":{"typicalProps":["variant","text","size","icon"]}},"button_toolbar":{"category":"buttons","description":"This component should primarily hold the most commonly used buttons.","status":"stable"},"caption":{"category":"typography","description":"Supplementary text beside inputs or blocks; use large caption when the note spans more content.","status":"stable","looksLike":["Small supporting / helper / metadata text under a field or title"],"not":["body","detail","title"],"cues":{"typicalProps":["text","size"]}},"card":{"category":"layout_and_structure","description":"Content container with optional header, body sections, and various styling options.","status":"stable","looksLike":["White/light panel with border or shadow wrapping a content block"],"not":["background","selectable_card","dialog"],"cues":{"typicalProps":["padding","borderNone","shadow"]}},"checkbox":{"category":"form_selection","description":"Checkbox is used for a list of selections that are meant to have one or more options checked.","status":"stable","looksLike":["Square checkbox for multi-select"],"not":["radio","toggle","selectable_card"]},"circle_icon_button":{"category":"buttons","description":"Round icon-only button; the icon must clearly show the action because there is no label.","status":"stable","looksLike":["Round icon-only control with no text label"],"not":["button","icon_button","icon_circle"],"cues":{"typicalProps":["icon","variant"]}},"collapsible":{"category":"layout_and_structure","description":"Collapsible content that can be expanded or collapsed.","status":"stable"},"contact":{"category":"form_and_dashboard_text_patterns","description":"Use to display customer's or user's contact information.","status":"stable"},"container":{"category":"layout_and_structure","description":"The Container component is used as a wrapper for the content of a page or to any container.","status":"stable"},"copy_button":{"category":"buttons","description":"Button that copies text to clipboard with visual feedback.","status":"stable"},"currency":{"category":"form_and_dashboard_text_patterns","description":"Formats money for dashboards and summaries. Pair with labels so amounts stay clear.","status":"stable","looksLike":["Formatted money amount, often large on dashboards"],"not":["dashboard_value","stat_value"]},"dashboard_value":{"category":"form_and_dashboard_text_patterns","description":"Large dashboard number for quick metrics. Use Currency when the value is money.","status":"stable","looksLike":["Large non-currency metric number on a dashboard"],"not":["currency","stat_value"]},"date":{"category":"date_and_time_text_patterns","description":"Use to display the date. Year will not display by default if it is the current year.","status":"stable"},"date_picker":{"category":"form_selection","description":"Calendar date field powered by flatpickr; props cover common cases without custom JS.","status":"stable"},"date_range_inline":{"category":"date_and_time_text_patterns","description":"Use to display a date range. Year will not show by default if it is the current year.","status":"stable"},"date_range_stacked":{"category":"date_and_time_text_patterns","description":"Displays a date range in a vertical stacked format.","status":"stable"},"date_stacked":{"category":"date_and_time_text_patterns","description":"Displays the date stacked with the month and day. Default behavior does not show the current year.","status":"stable"},"date_time":{"category":"date_and_time_text_patterns","description":"Combined date and time. Respects time zones; defaults to America/New_York when not set.","status":"stable"},"date_time_stacked":{"category":"date_and_time_text_patterns","description":"Displays date and time in a vertical stacked format.","status":"stable"},"date_year_stacked":{"category":"date_and_time_text_patterns","description":"This component is a simple option for displaying dates in a month, day, and year format.","status":"stable"},"detail":{"category":"typography","description":"Used for tables or designs with large amounts of data or text.","status":"stable","looksLike":["Compact bold label text, denser than Body, not a Title"],"not":["body","caption","title"],"cues":{"typicalProps":["text"]}},"dialog":{"category":"alerts_and_dialogs","description":"Modal for confirmations, forms, or focus. Supports alert modals for various statuses.","status":"stable","looksLike":["Centered modal overlay with header/body/footer"],"not":["popover","tooltip","lightbox","fixed_confirmation_toast"],"cues":{"composedOf":["Dialog.Header","Dialog.Body","Dialog.Footer"]}},"distribution_bar":{"category":"data_visualization","description":"Part-to-whole comparison like a pie chart. Default mode stresses share without raw numbers.","status":"stable"},"draggable":{"category":"layout_and_structure","description":"Drag and drop functionality for reordering items.","status":"stable"},"dropdown":{"category":"form_selection","description":"Customizable dropdown menu with trigger element and various option configurations.","status":"stable","looksLike":["Custom menu triggered by a control, with Dropdown.Option children"],"not":["select","typeahead"],"cues":{"readPlayground":true}},"empty_state":{"category":"state_and_progress_indicators","description":"Empty state placeholder for when no content is available.","status":"stable","looksLike":["Centered empty-results illustration/message with optional CTA"],"not":["card","dialog"]},"file_upload":{"category":"form_elements","description":"Allows users to upload files via drag-and-drop or file browser.","status":"stable"},"filter":{"category":"data_visualization","description":"Search and filter UI. See production /dev_docs/search for real integration examples.","status":"stable","looksLike":["Search + filter controls bar above a results list/table"],"not":["typeahead","text_input"]},"fixed_confirmation_toast":{"category":"alerts_and_dialogs","description":"Fixed alerts: success after completion, error when blocked, neutral for informational context.","status":"stable","looksLike":["Fixed success/error/neutral banner toast, usually top of viewport"],"not":["dialog","pill"],"cues":{"typicalProps":["status","text"]}},"flex":{"category":"layout_and_structure","description":"Flexbox layout helper for responsive rows, columns, spacing, and alignment in UIs.","status":"stable","looksLike":["Row or column of aligned siblings with gap/spacing"],"not":["card","layout","list"],"gotchas":["justify \"spaceBetween\" from Figma → Playbook \"between\""],"cues":{"typicalProps":["orientation","justify","align","gap","spacing"]}},"form":{"category":"form_elements","description":"The Form component provides consumers with a convenient, consistently styled <form> wrapper.","status":"stable"},"form_group":{"category":"form_elements","description":"Groups related form fields together with optional labels.","status":"stable","looksLike":["Group of SelectableCards / radios / checkboxes sharing one choice group"],"not":["flex","card"],"gotchas":["Children must be direct SelectableCard/Radio/Checkbox — no wrapping Flex"]},"form_pill":{"category":"form_elements","description":"Pill-shaped form elements for tags, selections, or filters.","status":"stable","looksLike":["Removable filter/tag chip inside a form or filter bar, often with an ×"],"not":["pill","badge","label_pill"],"cues":{"typicalProps":["text"]}},"full_screen":{"category":"layout_and_structure","description":"Full Screen component","status":"stable"},"hashtag":{"category":"tags","description":"Hashtag is used to display home, project and other forms of IDs. They can be used as a link.","status":"stable"},"highlight":{"category":"message_text_patterns","description":"Highlight is used to pick out or emphasize content.","status":"stable"},"home_address_street":{"category":"form_and_dashboard_text_patterns","description":"Street address with unit, city, state, ZIP, and optional project hashtag linking to work.","status":"stable"},"icon":{"category":"icons_and_images","description":"Graphic symbol for an object, action, or status; add nearby text if meaning could be vague.","status":"stable"},"icon_circle":{"category":"icons_and_images","description":"Icon centered in a circle for emphasis, touch targets, or consistent visual weight.","status":"stable"},"icon_stat_value":{"category":"icons_and_images","description":"Displays a statistic value with an associated icon.","status":"stable"},"icon_value":{"category":"icons_and_images","description":"Icon paired with a value—often a number—for compact KPIs, stats, or dense summaries.","status":"stable"},"image":{"category":"icons_and_images","description":"A responsive image component.","status":"stable"},"label_pill":{"category":"form_and_dashboard_text_patterns","description":"This component combines the Caption and Pill components with all of their variants.","status":"stable","looksLike":["Caption label stacked with a Pill underneath"],"not":["pill","label_value"],"cues":{"composedOf":["caption","pill"]}},"label_value":{"category":"form_and_dashboard_text_patterns","description":"This component can be very versatile when used to display text data.","status":"stable"},"layout":{"category":"layout_and_structure","description":"Layouts used for positioning content inside of pages, cards, or containers.","status":"stable"},"legend":{"category":"data_visualization","description":"A key used to compare the variables and their value in any given graph.","status":"stable"},"link":{"category":"typography","description":"Text link for navigation to other pages or sections.","status":"stable","looksLike":["Inline text link in body copy, not a button-shaped control"],"not":["button"],"cues":{"typicalProps":["text","href"]}},"list":{"category":"data_visualization","description":"Lists display a vertical set of related content.","status":"stable"},"loading_inline":{"category":"state_and_progress_indicators","description":"Inline spinner while content loads or a background request is still processing.","status":"stable"},"map":{"category":"data_visualization","description":"This component provides a wrapping class to place around the MapLibre library.","status":"stable"},"message":{"category":"message_text_patterns","description":"Conversation-style block with optional avatar, status, caption, body, and timestamp.","status":"stable"},"multi_level_select":{"category":"form_selection","description":"The MultiLevelSelect component renders a multi leveled select dropdown based on data from the User.","status":"stable"},"multiple_users":{"category":"user","description":"Shows several people tied to one record when a single avatar would hide shared ownership.","status":"stable"},"multiple_users_stacked":{"category":"user","description":"Overlapping avatars in tight spaces to hint many collaborators without naming each.","status":"stable"},"nav":{"category":"navigation","description":"Grouped navigation links for pages or in-page sections; horizontal or vertical variants.","status":"stable","looksLike":["Vertical or horizontal navigation list of items"],"not":["list","bread_crumbs","button_toolbar"],"gotchas":["Sidebars are often variant=\"subtle\"; compose with NavItem children"],"cues":{"typicalProps":["orientation","variant"],"readPlayground":true}},"online_status":{"category":"tags","description":"Online Status is a small indicator that lets the user know the status of a person or item.","status":"stable"},"overlay":{"category":"layout_and_structure","description":"Full screen overlay for modals and dialogs.","status":"stable"},"pagination":{"category":"navigation","description":"Pagination for navigating through multiple pages of content.","status":"stable"},"passphrase":{"category":"form_input","description":"Secure password input with strength indicator and show/hide toggle.","status":"stable"},"pb_bar_graph":{"category":"data_visualization","description":"Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.","status":"stable"},"pb_circle_chart":{"category":"data_visualization","description":"Circular chart for displaying proportional data.","status":"stable"},"pb_gauge_chart":{"category":"data_visualization","description":"Circular gauge chart for displaying a single value within a range.","status":"stable"},"pb_line_graph":{"category":"data_visualization","description":"Line graph for displaying data trends over time.","status":"stable"},"person":{"category":"form_and_dashboard_text_patterns","description":"This component is broken down into a first name last name format with normal and bold weighted text.","status":"stable"},"person_contact":{"category":"form_and_dashboard_text_patterns","description":"This component can be used to display a person contact information.","status":"stable"},"phone_number_input":{"category":"form_input","description":"International phone number input with country code selection and formatting.","status":"stable"},"pill":{"category":"tags","description":"A pill uses both a keyword and a specific color to categorize an item.","status":"stable","looksLike":["Small rounded capsule / chip with short status text","Colored tag next to a title (Active, Pending, etc.)"],"not":["badge","form_pill","label_pill"],"gotchas":["Omit text to render children such as an Icon. Passing text takes precedence over children","notification uses primary by default; set variant to error for the red treatment. Other variants are ignored when notification is true"],"cues":{"typicalProps":["text","variant"]}},"popover":{"category":"alerts_and_dialogs","description":"Anchored panel for short content, mini forms, or menus. Click the trigger to toggle it open.","status":"stable","looksLike":["Anchored floating panel near a trigger (not full-screen modal)"],"not":["dialog","tooltip","dropdown"]},"progress_pills":{"category":"state_and_progress_indicators","description":"Step chips along a sequence—shows completed, current, and upcoming stages over time.","status":"stable"},"progress_simple":{"category":"state_and_progress_indicators","description":"Linear progress for an operation; add labels or percentages so progress is obvious.","status":"stable"},"progress_step":{"category":"state_and_progress_indicators","description":"Wizard steps marked completed, active, or inactive for multi-phase flows.","status":"stable"},"radio":{"category":"form_selection","description":"Radio is a control that allows the user to only choose one predefined option.","status":"stable","looksLike":["Circular radio for single choice in a group"],"not":["checkbox","toggle","selectable_card"]},"rich_text_editor":{"category":"form_input","description":"Full-featured text editor with formatting options.","status":"stable"},"section_separator":{"category":"layout_and_structure","description":"A divider line that visually separates and organizes content into distinct sections.","status":"stable","looksLike":["Horizontal divider line between content blocks"],"not":["flex"],"gotchas":["Usually needs width=\"100%\" or it collapses"]},"select":{"category":"form_selection","description":"Dropdown where the user picks one option from a list, styled like other form fields.","status":"stable","looksLike":["Native-styled single-select dropdown form field"],"not":["dropdown","typeahead","multi_level_select"]},"selectable_card":{"category":"form_selection","description":"Selectable card with clear selected and unselected visuals; common for plans or tiers.","status":"stable","looksLike":["Card that looks selectable (radio/checkbox behavior), often in a plan/tier group"],"not":["card","selectable_card_icon"],"gotchas":["Must be a direct child of FormGroup for selection to work"],"cues":{"typicalProps":["checked","inputId"]}},"selectable_card_icon":{"category":"form_selection","description":"Selectable card variant with icon display for visual selection options.","status":"stable"},"selectable_icon":{"category":"form_selection","description":"Icon-based selection input for compact visual choices.","status":"stable"},"selectable_list":{"category":"form_selection","description":"List of items that can be selected, supporting single or multiple selection.","status":"stable"},"skeleton_loading":{"category":"state_and_progress_indicators","description":"Placeholder loading state that mimics the shape of content.","status":"stable"},"source":{"category":"form_and_dashboard_text_patterns","description":"Shows where a record or lead came from; flexible for other attribution labels too.","status":"stable"},"star_rating":{"category":"icons_and_images","description":"Star rating for opinions or scores; pair with reviews or labels for real meaning.","status":"stable"},"stat_change":{"category":"form_and_dashboard_text_patterns","description":"Displays the increase, decrease, or neutral change in data.","status":"stable"},"stat_value":{"category":"form_and_dashboard_text_patterns","description":"Prominent numeric stat for dashboards; optional label explains what the figure means.","status":"stable"},"table":{"category":"data_visualization","description":"Structured rows and columns of data, often with sorting, filtering, and pagination.","status":"stable","looksLike":["Simple HTML-like data table without nested expandable tree rows"],"not":["advanced_table"],"cues":{"composedOf":["Table.Head","Table.Body","Table.Row","Table.Cell"]}},"text_input":{"category":"form_input","description":"Area where user can enter small amount of text. Commonly used in forms.","status":"stable","looksLike":["Single-line labeled text field"],"not":["textarea","typeahead","phone_number_input","passphrase","select"],"gotchas":["required ≠ requiredIndicator — use both when the field is required"],"cues":{"typicalProps":["label","placeholder","required","requiredIndicator"]}},"textarea":{"category":"form_input","description":"Area where user can enter larger amounts of text. Commonly used in forms.","status":"stable","looksLike":["Multi-line text field"],"not":["text_input","rich_text_editor"]},"time":{"category":"date_and_time_text_patterns","description":"Displays a time of day with optional timezone and icon, in large or compact layouts.","status":"stable"},"time_picker":{"category":"form_selection","description":"A time picker component that allows users to select a time independently of the date.","status":"stable"},"time_range_inline":{"category":"date_and_time_text_patterns","description":"Displays a time range in an inline format.","status":"stable"},"time_stacked":{"category":"date_and_time_text_patterns","description":"Displays time in a vertical stacked format.","status":"stable"},"timeline":{"category":"state_and_progress_indicators","description":"A timeline with solid or dotted connectors to show sequences, phases, or gaps in time.","status":"stable"},"timestamp":{"category":"date_and_time_text_patterns","description":"Low profile component for displaying time; elapsed, current, future, or otherwise.","status":"stable","looksLike":["Relative or absolute time string (e.g. \"30 minutes ago\")"],"not":["time","date","date_time"],"gotchas":["Pass a Date / time object via timestamp prop — display string is not the prop value"]},"title":{"category":"typography","description":"Heading levels Title 1-4; keep semantic order and do not skip levels on a page.","status":"stable","looksLike":["Page or section heading — larger/bolder than body"],"not":["body","caption","detail","title_count","title_detail"],"cues":{"typicalProps":["text","size"]}},"title_count":{"category":"form_and_dashboard_text_patterns","description":"Title with a related count, in default or larger dashboard-friendly sizing.","status":"stable"},"title_detail":{"category":"form_and_dashboard_text_patterns","description":"This component can be used in many versatile ways. It's made up of a Title 4 and light Body component.","status":"stable"},"toggle":{"category":"form_elements","description":"On/off switch for settings, feature flags, or any binary choice in a form.","status":"stable","looksLike":["On/off switch control"],"not":["checkbox"]},"tooltip":{"category":"alerts_and_dialogs","description":"Small overlay providing contextual information on hover or focus.","status":"stable","looksLike":["Tiny hover/focus hint bubble"],"not":["popover","dialog"]},"typeahead":{"category":"form_input","description":"Autocomplete options that narrow as users type, cutting errors and extra typing.","status":"stable","looksLike":["Searchable autocomplete field that filters options as you type"],"not":["select","dropdown","text_input"]},"user":{"category":"user","description":"Avatar with name, title, territory, and optional extras—the standard rich user row.","status":"stable"},"user_badge":{"category":"icons_and_images","description":"Small badge on an avatar for programs or achievements so standout users read quickly.","status":"stable"},"weekday_stacked":{"category":"date_and_time_text_patterns","description":"Displays day of week and date in a stacked format.","status":"stable"}}}
1	+ {"description":"Visual → Playbook kit map for screenshot and design handoffs. Use this before guessing kit names from visuals.","howToUse":["Decompose the screenshot top-down: page regions → sections → controls → text","Match each region to kits via looksLike / typographyByVisual / layoutCues","Resolve conflicts with not[] and gotchas","Map px spacing to spacingPxToToken; then open kits/<name>.schema.json + playgrounds/<name>.json"],"spacingPxToToken":{"0":"none","4":"xxs","8":"xs","16":"sm","24":"md","32":"lg","40":"xl","48":"xxl"},"typographyByVisual":[{"when":"Bold text, roughly ≥20px","kit":"title","props":{"size":3}},{"when":"Bold text, roughly 14–18px","kit":"title","props":{"size":4}},{"when":"Small muted text, roughly ≤12px","kit":"caption","props":{"size":"xs"}},{"when":"Bold small/medium label (not a heading)","kit":"detail"},{"when":"Default paragraph / body copy","kit":"body"}],"layoutCues":[{"when":"Horizontal or vertical auto-layout / flex row or column of siblings","kit":"flex"},{"when":"Surface with fill + border/radius containing content","kit":"card"},{"when":"Full-bleed page/section background color or image","kit":"background"},{"when":"Sidebar + main content regions","kit":"layout"},{"when":"Thin horizontal rule / divider between sections","kit":"section_separator"}],"categories":{"advanced_table":{"description":"The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting."},"alerts_and_dialogs":{"description":"Components for displaying alerts, confirmations, and overlay content to users."},"buttons":{"description":"Buttons are used primarily for actions, such as “Save” and “Cancel”. Link Buttons are used for less important or less commonly used actions, such as “view shipping settings”."},"data_visualization":{"description":"Components for displaying data in tables, lists, charts, and graphs."},"date_and_time_text_patterns":{"description":"Components for displaying dates and times in various formats."},"form_and_dashboard_text_patterns":{"description":"Components for displaying structured data on forms and dashboards."},"form_elements":{"description":"Form wrapper components and specialized form controls."},"form_input":{"description":"Components for text-based user input in forms."},"form_selection":{"description":"Components for selecting options, dates, and making choices in forms."},"icons_and_images":{"description":"Components for displaying icons, images, and visual media."},"layout_and_structure":{"description":"Components for structuring and organizing page layouts and content containers."},"message_text_patterns":{"description":"Components for displaying messages and highlighting content."},"navigation":{"description":"Components for navigation, breadcrumbs, and pagination."},"state_and_progress_indicators":{"description":"Components for showing loading states, progress, and timelines."},"tags":{"description":"Components for tags, badges, pills, and status indicators."},"typography":{"description":"Text components for consistent typography throughout the application."},"user":{"description":"Components for displaying user information, avatars, and user-related data."}},"kits":{"advanced_table":{"category":"advanced_table","description":"The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.","status":"stable","sections":[{"name":"default","description":"Minimal table: required props and structure before adding features."},{"name":"sorting","description":"Sortable headers, controlled sort state, and custom compare logic."},{"name":"pagination_&_data_states","description":"Paged or infinite data plus loading and empty states."},{"name":"row_interaction","description":"Select, expand, subrows, pinning; row highlights and bulk actions."},{"name":"column_configuration","description":"Define columns: headers, visibility, grouping, borders, widths."},{"name":"cell_behavior","description":"What each cell shows and does: custom content, edit, loading."},{"name":"layout_&_positioning","description":"Scroll, sticky headers/columns, responsive layout, fullscreen modes."},{"name":"styling","description":"Styling per row or column: padding, color, and border."}],"looksLike":["Complex data grid with expand/collapse nested rows","Sortable headers, row selection, column visibility, sticky columns"],"not":["table"],"gotchas":["Requires columnDefinitions + tableData","Copy shapes from playgrounds/advanced_table.json samples","Nested rows use children arrays; first column often uses cellAccessors"],"cues":{"typicalProps":["columnDefinitions","tableData"]}},"avatar":{"category":"user","description":"User photo for recognition. Prefer User when showing a name; Avatar alone if names are hidden.","status":"stable","looksLike":["Circular user image or initials"],"not":["user_badge","multiple_users","image"],"gotchas":["Use name prop for initials — do not use layer/spec text as the person name"],"cues":{"typicalProps":["name","size","imageUrl"]}},"background":{"category":"layout_and_structure","description":"The Background component is used for adding a background to a page or to any container.","status":"stable"},"badge":{"category":"tags","description":"Badges can be used for notification, tags, and status. They are used for count and numbers.","status":"stable","looksLike":["Small numeric or count indicator, often on an icon or nav item"],"not":["pill","form_pill","user_badge"],"gotchas":["Prefer text prop for the displayed value"],"cues":{"typicalProps":["text","variant"]}},"body":{"category":"typography","description":"Default paragraph style. Step to light, then lighter, only to de-emphasize supporting lines.","status":"stable","looksLike":["Standard paragraph text"],"not":["title","caption","detail"],"cues":{"typicalProps":["text","color"]}},"bread_crumbs":{"category":"navigation","description":"BreadCrumbs can be used for keeping a user aware of their route location.","status":"stable"},"button":{"category":"buttons","description":"Primary Button for main tasks; secondary and danger variants for other actions.","status":"stable","looksLike":["Filled or outline rectangular action with a label","Primary blue CTA, secondary outline, or red danger action","Text that looks like a link-styled control for a lesser action"],"not":["circle_icon_button","icon_button","link","form_pill"],"variantsFromVisual":{"solid blue / filled primary":"primary","outline / ghost secondary":"secondary","red destructive":"danger","text-only link style":"link","emoji/reaction with count":"reaction"},"cues":{"typicalProps":["variant","text","size","icon"]}},"button_toolbar":{"category":"buttons","description":"This component should primarily hold the most commonly used buttons.","status":"stable"},"caption":{"category":"typography","description":"Supplementary text beside inputs or blocks; use large caption when the note spans more content.","status":"stable","looksLike":["Small supporting / helper / metadata text under a field or title"],"not":["body","detail","title"],"cues":{"typicalProps":["text","size"]}},"card":{"category":"layout_and_structure","description":"Content container with optional header, body sections, and various styling options.","status":"stable","looksLike":["White/light panel with border or shadow wrapping a content block"],"not":["background","selectable_card","dialog"],"cues":{"typicalProps":["padding","borderNone","shadow"]}},"checkbox":{"category":"form_selection","description":"Checkbox is used for a list of selections that are meant to have one or more options checked.","status":"stable","looksLike":["Square checkbox for multi-select"],"not":["radio","toggle","selectable_card"]},"circle_icon_button":{"category":"buttons","description":"Round icon-only button; the icon must clearly show the action because there is no label.","status":"stable","looksLike":["Round icon-only control with no text label"],"not":["button","icon_button","icon_circle"],"cues":{"typicalProps":["icon","variant"]}},"collapsible":{"category":"layout_and_structure","description":"Collapsible content that can be expanded or collapsed.","status":"stable"},"contact":{"category":"form_and_dashboard_text_patterns","description":"Use to display customer's or user's contact information.","status":"stable"},"container":{"category":"layout_and_structure","description":"The Container component is used as a wrapper for the content of a page or to any container.","status":"stable"},"copy_button":{"category":"buttons","description":"Button that copies text to clipboard with visual feedback.","status":"stable"},"currency":{"category":"form_and_dashboard_text_patterns","description":"Formats money for dashboards and summaries. Pair with labels so amounts stay clear.","status":"stable","looksLike":["Formatted money amount, often large on dashboards"],"not":["dashboard_value","stat_value"]},"dashboard_value":{"category":"form_and_dashboard_text_patterns","description":"Large dashboard number for quick metrics. Use Currency when the value is money.","status":"stable","looksLike":["Large non-currency metric number on a dashboard"],"not":["currency","stat_value"]},"date":{"category":"date_and_time_text_patterns","description":"Use to display the date. Year will not display by default if it is the current year.","status":"stable"},"date_picker":{"category":"form_selection","description":"Calendar date field powered by flatpickr; props cover common cases without custom JS.","status":"stable"},"date_range_inline":{"category":"date_and_time_text_patterns","description":"Use to display a date range. Year will not show by default if it is the current year.","status":"stable"},"date_range_stacked":{"category":"date_and_time_text_patterns","description":"Displays a date range in a vertical stacked format.","status":"stable"},"date_stacked":{"category":"date_and_time_text_patterns","description":"Displays the date stacked with the month and day. Default behavior does not show the current year.","status":"stable"},"date_time":{"category":"date_and_time_text_patterns","description":"Combined date and time. Respects time zones; defaults to America/New_York when not set.","status":"stable"},"date_time_stacked":{"category":"date_and_time_text_patterns","description":"Displays date and time in a vertical stacked format.","status":"stable"},"date_year_stacked":{"category":"date_and_time_text_patterns","description":"This component is a simple option for displaying dates in a month, day, and year format.","status":"stable"},"detail":{"category":"typography","description":"Used for tables or designs with large amounts of data or text.","status":"stable","looksLike":["Compact bold label text, denser than Body, not a Title"],"not":["body","caption","title"],"cues":{"typicalProps":["text"]}},"dialog":{"category":"alerts_and_dialogs","description":"Modal for confirmations, forms, or focus. Supports alert modals for various statuses.","status":"stable","looksLike":["Centered modal overlay with header/body/footer"],"not":["popover","tooltip","lightbox","fixed_confirmation_toast"],"cues":{"composedOf":["Dialog.Header","Dialog.Body","Dialog.Footer"]}},"distribution_bar":{"category":"data_visualization","description":"Part-to-whole comparison like a pie chart. Default mode stresses share without raw numbers.","status":"stable"},"draggable":{"category":"layout_and_structure","description":"Drag and drop functionality for reordering items.","status":"stable"},"dropdown":{"category":"form_selection","description":"Customizable dropdown menu with trigger element and various option configurations.","status":"stable","looksLike":["Custom menu triggered by a control, with Dropdown.Option children"],"not":["select","typeahead"],"cues":{"readPlayground":true}},"empty_state":{"category":"state_and_progress_indicators","description":"Empty state placeholder for when no content is available.","status":"stable","looksLike":["Centered empty-results illustration/message with optional CTA"],"not":["card","dialog"]},"file_upload":{"category":"form_elements","description":"Allows users to upload files via drag-and-drop or file browser.","status":"stable"},"filter":{"category":"data_visualization","description":"Search and filter UI. See production /dev_docs/search for real integration examples.","status":"stable","looksLike":["Search + filter controls bar above a results list/table"],"not":["typeahead","text_input"]},"fixed_confirmation_toast":{"category":"alerts_and_dialogs","description":"Fixed alerts: success after completion, error when blocked, neutral for informational context.","status":"stable","looksLike":["Fixed success/error/neutral banner toast, usually top of viewport"],"not":["dialog","pill"],"cues":{"typicalProps":["status","text"]}},"flex":{"category":"layout_and_structure","description":"Flexbox layout helper for responsive rows, columns, spacing, and alignment in UIs.","status":"stable","looksLike":["Row or column of aligned siblings with gap/spacing"],"not":["card","layout","list"],"gotchas":["justify \"spaceBetween\" from Figma → Playbook \"between\""],"cues":{"typicalProps":["orientation","justify","align","gap","spacing"]}},"form":{"category":"form_elements","description":"The Form component provides consumers with a convenient, consistently styled <form> wrapper.","status":"stable"},"form_group":{"category":"form_elements","description":"Groups related form fields together with optional labels.","status":"stable","looksLike":["Group of SelectableCards / radios / checkboxes sharing one choice group"],"not":["flex","card"],"gotchas":["Children must be direct SelectableCard/Radio/Checkbox — no wrapping Flex"]},"form_pill":{"category":"form_elements","description":"Pill-shaped form elements for tags, selections, or filters.","status":"stable","looksLike":["Removable filter/tag chip inside a form or filter bar, often with an ×"],"not":["pill","badge","label_pill"],"cues":{"typicalProps":["text"]}},"full_screen":{"category":"layout_and_structure","description":"Full Screen component","status":"stable"},"hashtag":{"category":"tags","description":"Hashtag is used to display home, project and other forms of IDs. They can be used as a link.","status":"stable"},"highlight":{"category":"message_text_patterns","description":"Highlight is used to pick out or emphasize content.","status":"stable"},"home_address_street":{"category":"form_and_dashboard_text_patterns","description":"Street address with unit, city, state, ZIP, and optional project hashtag linking to work.","status":"stable"},"icon":{"category":"icons_and_images","description":"Graphic symbol for an object, action, or status; add nearby text if meaning could be vague.","status":"stable"},"icon_circle":{"category":"icons_and_images","description":"Icon centered in a circle for emphasis, touch targets, or consistent visual weight.","status":"stable"},"icon_stat_value":{"category":"icons_and_images","description":"Displays a statistic value with an associated icon.","status":"stable"},"icon_value":{"category":"icons_and_images","description":"Icon paired with a value—often a number—for compact KPIs, stats, or dense summaries.","status":"stable"},"image":{"category":"icons_and_images","description":"A responsive image component.","status":"stable"},"label_pill":{"category":"form_and_dashboard_text_patterns","description":"This component combines the Caption and Pill components with all of their variants.","status":"stable","looksLike":["Caption label stacked with a Pill underneath"],"not":["pill","label_value"],"cues":{"composedOf":["caption","pill"]}},"label_value":{"category":"form_and_dashboard_text_patterns","description":"This component can be very versatile when used to display text data.","status":"stable"},"layout":{"category":"layout_and_structure","description":"Layouts used for positioning content inside of pages, cards, or containers.","status":"stable"},"legend":{"category":"data_visualization","description":"A key used to compare the variables and their value in any given graph.","status":"stable"},"lightbox":{"category":"icons_and_images","description":"Fullscreen dimmed overlay for enlarged images or media that covers the viewport.","status":"stable"},"link":{"category":"typography","description":"Text link for navigation to other pages or sections.","status":"stable","looksLike":["Inline text link in body copy, not a button-shaped control"],"not":["button"],"cues":{"typicalProps":["text","href"]}},"list":{"category":"data_visualization","description":"Lists display a vertical set of related content.","status":"stable"},"loading_inline":{"category":"state_and_progress_indicators","description":"Inline spinner while content loads or a background request is still processing.","status":"stable"},"map":{"category":"data_visualization","description":"This component provides a wrapping class to place around the MapLibre library.","status":"stable"},"message":{"category":"message_text_patterns","description":"Conversation-style block with optional avatar, status, caption, body, and timestamp.","status":"stable"},"multi_level_select":{"category":"form_selection","description":"The MultiLevelSelect component renders a multi leveled select dropdown based on data from the User.","status":"stable"},"multiple_users":{"category":"user","description":"Shows several people tied to one record when a single avatar would hide shared ownership.","status":"stable"},"multiple_users_stacked":{"category":"user","description":"Overlapping avatars in tight spaces to hint many collaborators without naming each.","status":"stable"},"nav":{"category":"navigation","description":"Grouped navigation links for pages or in-page sections; horizontal or vertical variants.","status":"stable","looksLike":["Vertical or horizontal navigation list of items"],"not":["list","bread_crumbs","button_toolbar"],"gotchas":["Sidebars are often variant=\"subtle\"; compose with NavItem children"],"cues":{"typicalProps":["orientation","variant"],"readPlayground":true}},"online_status":{"category":"tags","description":"Online Status is a small indicator that lets the user know the status of a person or item.","status":"stable"},"overlay":{"category":"layout_and_structure","description":"Full screen overlay for modals and dialogs.","status":"stable"},"pagination":{"category":"navigation","description":"Pagination for navigating through multiple pages of content.","status":"stable"},"passphrase":{"category":"form_input","description":"Secure password input with strength indicator and show/hide toggle.","status":"stable"},"pb_bar_graph":{"category":"data_visualization","description":"Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.","status":"stable"},"pb_circle_chart":{"category":"data_visualization","description":"Circular chart for displaying proportional data.","status":"stable"},"pb_gauge_chart":{"category":"data_visualization","description":"Circular gauge chart for displaying a single value within a range.","status":"stable"},"pb_line_graph":{"category":"data_visualization","description":"Line graph for displaying data trends over time.","status":"stable"},"person":{"category":"form_and_dashboard_text_patterns","description":"This component is broken down into a first name last name format with normal and bold weighted text.","status":"stable"},"person_contact":{"category":"form_and_dashboard_text_patterns","description":"This component can be used to display a person contact information.","status":"stable"},"phone_number_input":{"category":"form_input","description":"International phone number input with country code selection and formatting.","status":"stable"},"pill":{"category":"tags","description":"A pill uses both a keyword and a specific color to categorize an item.","status":"stable","looksLike":["Small rounded capsule / chip with short status text","Colored tag next to a title (Active, Pending, etc.)"],"not":["badge","form_pill","label_pill"],"gotchas":["Omit text to render children such as an Icon. Passing text takes precedence over children","notification uses primary by default; set variant to error for the red treatment. Other variants are ignored when notification is true"],"cues":{"typicalProps":["text","variant"]}},"popover":{"category":"alerts_and_dialogs","description":"Anchored panel for short content, mini forms, or menus. Click the trigger to toggle it open.","status":"stable","looksLike":["Anchored floating panel near a trigger (not full-screen modal)"],"not":["dialog","tooltip","dropdown"]},"progress_pills":{"category":"state_and_progress_indicators","description":"Step chips along a sequence—shows completed, current, and upcoming stages over time.","status":"stable"},"progress_simple":{"category":"state_and_progress_indicators","description":"Linear progress for an operation; add labels or percentages so progress is obvious.","status":"stable"},"progress_step":{"category":"state_and_progress_indicators","description":"Wizard steps marked completed, active, or inactive for multi-phase flows.","status":"stable"},"radio":{"category":"form_selection","description":"Radio is a control that allows the user to only choose one predefined option.","status":"stable","looksLike":["Circular radio for single choice in a group"],"not":["checkbox","toggle","selectable_card"]},"rich_text_editor":{"category":"form_input","description":"Full-featured text editor with formatting options.","status":"stable"},"section_separator":{"category":"layout_and_structure","description":"A divider line that visually separates and organizes content into distinct sections.","status":"stable","looksLike":["Horizontal divider line between content blocks"],"not":["flex"],"gotchas":["Usually needs width=\"100%\" or it collapses"]},"select":{"category":"form_selection","description":"Dropdown where the user picks one option from a list, styled like other form fields.","status":"stable","looksLike":["Native-styled single-select dropdown form field"],"not":["dropdown","typeahead","multi_level_select"]},"selectable_card":{"category":"form_selection","description":"Selectable card with clear selected and unselected visuals; common for plans or tiers.","status":"stable","looksLike":["Card that looks selectable (radio/checkbox behavior), often in a plan/tier group"],"not":["card","selectable_card_icon"],"gotchas":["Must be a direct child of FormGroup for selection to work"],"cues":{"typicalProps":["checked","inputId"]}},"selectable_card_icon":{"category":"form_selection","description":"Selectable card variant with icon display for visual selection options.","status":"stable"},"selectable_icon":{"category":"form_selection","description":"Icon-based selection input for compact visual choices.","status":"stable"},"selectable_list":{"category":"form_selection","description":"List of items that can be selected, supporting single or multiple selection.","status":"stable"},"skeleton_loading":{"category":"state_and_progress_indicators","description":"Placeholder loading state that mimics the shape of content.","status":"stable"},"source":{"category":"form_and_dashboard_text_patterns","description":"Shows where a record or lead came from; flexible for other attribution labels too.","status":"stable"},"star_rating":{"category":"icons_and_images","description":"Star rating for opinions or scores; pair with reviews or labels for real meaning.","status":"stable"},"stat_change":{"category":"form_and_dashboard_text_patterns","description":"Displays the increase, decrease, or neutral change in data.","status":"stable"},"stat_value":{"category":"form_and_dashboard_text_patterns","description":"Prominent numeric stat for dashboards; optional label explains what the figure means.","status":"stable"},"table":{"category":"data_visualization","description":"Structured rows and columns of data, often with sorting, filtering, and pagination.","status":"stable","looksLike":["Simple HTML-like data table without nested expandable tree rows"],"not":["advanced_table"],"cues":{"composedOf":["Table.Head","Table.Body","Table.Row","Table.Cell"]}},"text_input":{"category":"form_input","description":"Area where user can enter small amount of text. Commonly used in forms.","status":"stable","looksLike":["Single-line labeled text field"],"not":["textarea","typeahead","phone_number_input","passphrase","select"],"gotchas":["required ≠ requiredIndicator — use both when the field is required"],"cues":{"typicalProps":["label","placeholder","required","requiredIndicator"]}},"textarea":{"category":"form_input","description":"Area where user can enter larger amounts of text. Commonly used in forms.","status":"stable","looksLike":["Multi-line text field"],"not":["text_input","rich_text_editor"]},"time":{"category":"date_and_time_text_patterns","description":"Displays a time of day with optional timezone and icon, in large or compact layouts.","status":"stable"},"time_picker":{"category":"form_selection","description":"A time picker component that allows users to select a time independently of the date.","status":"stable"},"time_range_inline":{"category":"date_and_time_text_patterns","description":"Displays a time range in an inline format.","status":"stable"},"time_stacked":{"category":"date_and_time_text_patterns","description":"Displays time in a vertical stacked format.","status":"stable"},"timeline":{"category":"state_and_progress_indicators","description":"A timeline with solid or dotted connectors to show sequences, phases, or gaps in time.","status":"stable"},"timestamp":{"category":"date_and_time_text_patterns","description":"Low profile component for displaying time; elapsed, current, future, or otherwise.","status":"stable","looksLike":["Relative or absolute time string (e.g. \"30 minutes ago\")"],"not":["time","date","date_time"],"gotchas":["Pass a Date / time object via timestamp prop — display string is not the prop value"]},"title":{"category":"typography","description":"Heading levels Title 1-4; keep semantic order and do not skip levels on a page.","status":"stable","looksLike":["Page or section heading — larger/bolder than body"],"not":["body","caption","detail","title_count","title_detail"],"cues":{"typicalProps":["text","size"]}},"title_count":{"category":"form_and_dashboard_text_patterns","description":"Title with a related count, in default or larger dashboard-friendly sizing.","status":"stable"},"title_detail":{"category":"form_and_dashboard_text_patterns","description":"This component can be used in many versatile ways. It's made up of a Title 4 and light Body component.","status":"stable"},"toggle":{"category":"form_elements","description":"On/off switch for settings, feature flags, or any binary choice in a form.","status":"stable","looksLike":["On/off switch control"],"not":["checkbox"]},"tooltip":{"category":"alerts_and_dialogs","description":"Small overlay providing contextual information on hover or focus.","status":"stable","looksLike":["Tiny hover/focus hint bubble"],"not":["popover","dialog"]},"typeahead":{"category":"form_input","description":"Autocomplete options that narrow as users type, cutting errors and extra typing.","status":"stable","looksLike":["Searchable autocomplete field that filters options as you type"],"not":["select","dropdown","text_input"]},"user":{"category":"user","description":"Avatar with name, title, territory, and optional extras—the standard rich user row.","status":"stable"},"user_badge":{"category":"icons_and_images","description":"Small badge on an avatar for programs or achievements so standout users read quickly.","status":"stable"},"weekday_stacked":{"category":"date_and_time_text_patterns","description":"Displays day of week and date in a stacked format.","status":"stable"}}}