{"manifest":{"version":"0.85.6","generated_at":"2026-10-14T18:25:00Z","components":{"accordion":{"helper":"rui_accordion","complexity":"moderate","param_count":14,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":123,"params":{"color":{"default":"zinc","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl"]},"variant":{"default":"default","type":"symbol","closed":true,"values":["flush","ghost","default","bordered","separated"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["none","rounded","square","pill"]},"spacing":{"default":"base","type":"symbol"},"exclusive":{"default":true,"type":"boolean"},"single_open":{},"animate":{"default":true,"type":"boolean"},"expand_icon":{"default":"chevron_down","type":"symbol"},"collapse_icon":{},"show_chevron":{"default":true,"type":"boolean"},"chevron_position":{"default":"right","type":"symbol"},"dividers":{"default":true,"type":"boolean"},"padding":{"default":"default","type":"symbol","closed":true,"values":["default","none"]}}},"alert":{"helper":"rui_alert","complexity":"moderate","param_count":19,"slot_count":2,"form_builder":false,"standalone":true,"ai_score":7,"human_score":7,"token_estimate":148,"params":{"type":{"positional":true,"closed":true,"default":"info","values":["default","info","success","warning","danger","error","primary"]},"title":{},"variant":{"default":"soft","type":"symbol","closed":true,"values":["solid","outline","soft"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["square","rounded","pill"]},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl"]},"border_position":{"default":"none","type":"symbol","closed":true,"values":["none","left","top","bottom","all"]},"color":{"values_from":"colors","open":true},"auto_dismiss":{"default":false,"type":"boolean"},"dismiss_after":{"default":5,"type":"integer"},"dismissible":{"default":false,"type":"boolean"},"messages":{},"show_icon":{"default":true,"type":"boolean"},"animate":{},"href":{},"turbo_frame":{},"undo_url":{},"undo_method":{"default":"post","type":"symbol"},"show_progress_bar":{}}},"avatar":{"helper":"rui_avatar","complexity":"simple","param_count":12,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":8,"human_score":9,"token_estimate":64,"params":{"src":{},"alt":{},"name":{},"initials":{},"size":{"default":"md","type":"symbol","closed":true,"values":["xs","sm","md","lg","xl","xl2","xl3","xl4","xl5","xl6","ig_story","ig_profile","ig_post","ig_comment","yt_channel","yt_comment","yt_thumbnail","linkedin_profile","linkedin_post","linkedin_comment","linkedin_message","x_profile","x_tweet","x_reply","fb_profile","fb_post","fb_comment","fb_story","tiktok_profile","tiktok_comment","tiktok_for_you","discord_avatar","discord_profile","discord_server","slack_avatar","slack_profile","slack_sidebar","twitch_avatar","twitch_channel","twitch_thumbnail","whatsapp_chat","whatsapp_profile","whatsapp_group","telegram_chat","telegram_profile","github_avatar","github_profile","github_contrib","dribbble_shot","dribbble_profile","behance_profile","behance_project","pinterest_pin","pinterest_profile"]},"shape":{"default":"circle","type":"symbol","closed":true,"values":["circle","rounded","square"]},"ring":{"default":"none","type":"symbol","closed":true,"values":["none","white","gray","black","primary","secondary","tertiary","accent","success","warning","danger","ig_story","ig_live"]},"status":{"closed":true,"values":["online","offline","busy","away","dnd","invisible","streaming","idle"]},"url":{},"color":{"values_from":"colors","open":true},"group_position":{}}},"badge":{"helper":"rui_badge","complexity":"simple","param_count":12,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":9,"human_score":9,"token_estimate":79,"params":{"text":{"positional":true},"color":{"values_from":"colors","open":true},"size":{"default":"xs","type":"symbol","closed":true,"values":["xs","sm","base","md","lg","xl","xl2"]},"url":{},"shape":{"default":"pill","type":"symbol"},"close_button":{"default":false,"type":"boolean"},"dismissible":{"default":false,"type":"boolean"},"counter":{},"pulsing":{"default":false,"type":"boolean"},"variant":{"default":"solid","type":"symbol","closed":true,"values":["solid","outline","ghost","soft","link"]},"status":{}}},"button":{"helper":"rui_button","complexity":"moderate","param_count":20,"slot_count":1,"form_builder":true,"standalone":true,"ai_score":8,"human_score":9,"token_estimate":135,"params":{"text":{"positional":true},"variant":{"default":"solid","type":"symbol","closed":true,"values":["solid","outline","ghost","soft","link"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"closed":true,"default":"base","values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"],"type":"symbol"},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","pill","square","circle"]},"full_width":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"loading":{"default":false,"type":"boolean"},"loading_text":{},"form":{},"object":{},"name":{},"value":{},"formmethod":{},"formaction":{},"formtarget":{},"form_id":{},"formnovalidate":{"default":false,"type":"boolean"},"formenctype":{}}},"button_to":{"helper":"rui_button_to","complexity":"moderate","param_count":20,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":135,"params":{"text":{"positional":true},"url":{"positional":true},"method":{"required":true},"variant":{"closed":true,"default":"solid","values":["solid","outline","ghost","soft","link"],"type":"symbol"},"color":{"default_source":"RapidRailsUI::Button::Styles::COLOR_DEFAULT","values_from":"colors","open":true},"size":{"closed":true,"default":"base","values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"],"type":"symbol"},"shape":{"closed":true,"default":"rounded","values":["rounded","pill","square","circle"],"type":"symbol"},"full_width":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"loading":{"default":false,"type":"boolean"},"loading_text":{},"form_class":{},"params":{},"remote":{"default":false,"type":"boolean"},"authenticity_token":{},"turbo_confirm":{},"turbo_frame":{},"turbo_stream":{},"turbo_action":{}}},"card":{"helper":"rui_card","complexity":"moderate","param_count":12,"slot_count":5,"form_builder":false,"standalone":true,"ai_score":8,"human_score":9,"token_estimate":179,"params":{"variant":{"default":"elevated","type":"symbol","closed":true,"values":["elevated","outline","flat","soft"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","square","pill"]},"padding":{"default":"md","type":"symbol","closed":true,"values":["none","sm","md","lg"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"href":{},"divider":{"default":true,"type":"boolean"},"content_class":{},"divider_class":{},"title":{},"description":{},"icon":{}}},"carousel":{"helper":"rui_carousel","complexity":"moderate","param_count":22,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":7,"human_score":7,"token_estimate":139,"params":{"id":{"required":true},"auto_rotate":{"default":false,"type":"boolean"},"interval":{"default":5000,"type":"integer"},"show_arrows":{},"show_indicators":{"default":true,"type":"boolean"},"loop":{"default":true,"type":"boolean"},"pause_on_hover":{"default":true,"type":"boolean"},"respect_reduced_motion":{"default":true,"type":"boolean"},"items_per_view":{},"gap":{"default":"base","type":"symbol","closed":true,"values":["none","sm","base","lg"]},"variant":{"default":"default","type":"symbol","closed":true,"values":["default","banner","cards","testimonials","hero","fullscreen"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["none","rounded","square","pill"]},"indicator_position":{"closed":true,"default":"outside","values":["outside","overlay_bottom","overlay_bottom_left","overlay_bottom_right"]},"indicator_style":{"default":"dots","type":"symbol","closed":true,"values":["dots","pill"]},"indicator_size":{"closed":true,"default":"base","values":["sm","base","lg","xl"]},"indicator_container":{},"indicator_class":{},"arrow_position":{"closed":true,"default":"sides","values":["sides","overlay","outside"]},"aria_label":{}}},"chart":{"helper":"rui_chart","complexity":"complex","param_count":64,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":5,"human_score":7,"token_estimate":278,"params":{"type":{"default":"bar","type":"symbol","closed":true,"values":["line","area","donut","pie","bar","hbar","stacked","sparkline","heatmap","timeline_strip","lollipop","funnel","calendar","waffle","slope"]},"data":{"default":[],"type":"array"},"series":{},"categories":{},"layout":{"default":"grouped","type":"symbol","closed":true,"values":["grouped","stacked"]},"title":{},"subtitle":{},"note":{},"unit":{},"value_format":{"closed":true,"values":["number","percent","currency","compact"]},"legend":{},"height":{"default":220,"type":"integer"},"height_sm":{},"max_rows":{},"empty_text":{},"bar_radius":{},"animate":{"default":true,"type":"boolean"},"y_max":{},"references":{"default":[],"type":"array"},"annotations":{"default":[],"type":"array"},"show_share":{"default":false,"type":"boolean"},"highlight":{},"responsive":{},"track":{"default":true,"type":"boolean"},"show_values":{},"label_every":{},"tooltips":{"default":true,"type":"boolean"},"timeline":{"types":["bar","line","area","histogram"]},"values":{"types":["sparkline","histogram","heatmap"]},"variant":{"default":"line","type":"symbol","types":["sparkline"],"closed":true,"values":["line","column"]},"mark_last":{"default":true,"type":"boolean","types":["sparkline"]},"baseline":{"types":["sparkline"]},"bins":{"types":["histogram"]},"bin_edges":{"types":["histogram"]},"crosshair":{"default":false,"type":"boolean","types":["line","area"]},"end_labels":{"default":false,"type":"boolean","types":["line","area"]},"rows":{"types":["heatmap","timeline_strip","slope"]},"columns":{"types":["heatmap","slope"]},"cells":{"types":["heatmap"]},"projection":{"types":["line","area"]},"band":{"types":["line","area"]},"center_total":{"types":["donut"]},"center_label":{"types":["donut"]},"group_small":{"default":true,"type":"boolean"},"domain":{"types":["timeline_strip"]},"groups":{"types":["timeline_strip"]},"sort":{},"as_of":{},"rest":{"default":"hide","type":"symbol","types":["lollipop"],"closed":true,"values":["hide","other"]},"rest_label":{"types":["lollipop"]},"mode":{"default":"conversion","type":"symbol","types":["funnel"]},"colors":{"types":["funnel"]},"days":{"types":["calendar"]},"from":{"types":["calendar"]},"to":{"types":["calendar"]},"week_start":{"default":"monday","type":"symbol","types":["calendar"]},"months":{"default":2,"type":"integer","types":["calendar"]},"zero_label":{"types":["calendar"]},"squares":{"default":"percent","type":"symbol","types":["waffle"]},"max_items":{"default":8,"type":"integer","types":["waffle"]},"shared_axis":{"default":false,"type":"boolean","types":["slope"]},"tone":{"default":"neutral","type":"symbol","types":["slope"]},"change":{"default":"percent","type":"symbol","types":["slope"]}}},"checkbox":{"helper":"rui_checkbox","complexity":"complex","param_count":30,"slot_count":1,"form_builder":true,"standalone":true,"ai_score":6,"human_score":7,"token_estimate":225,"params":{"name_or_method":{"positional":true},"form":{},"object":{},"method":{},"name":{},"collection":{},"value_method":{"default":"id","type":"symbol"},"text_method":{"default":"name","type":"symbol"},"description_method":{},"label":{},"description":{},"help_text":{},"required":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"checked":{},"value":{"default":"1","type":"string"},"unchecked_value":{"default":"0","type":"string"},"variant":{"default":"checkbox","type":"symbol","closed":true,"values":["checkbox","switch","card","pill","button"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["square","rounded"]},"layout":{"default":"vertical","type":"symbol","closed":true,"values":["vertical","horizontal"]},"select_all":{"default":false,"type":"boolean"},"auto_submit":{"default":false,"type":"boolean"},"strikethrough":{"default":false,"type":"boolean"},"label_class":{},"input_html":{"default":{},"type":"hash"},"index":{},"include_hidden":{"default":true,"type":"boolean"}}},"clipboard":{"helper":"rui_clipboard","complexity":"simple","param_count":9,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":9,"human_score":9,"token_estimate":58,"params":{"target":{"positional":true},"text":{},"label":{},"tooltip":{},"variant":{"default":"default","type":"symbol","closed":true,"values":["default","minimal","github","toolbar","code"]},"color":{"default":"zinc","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl"]},"disabled":{"default":false,"type":"boolean"}}},"code_block":{"helper":"rui_code_block","complexity":"simple","param_count":6,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":10,"human_score":10,"token_estimate":52,"params":{"code":{"positional":true},"language":{"default":"plain","type":"symbol"},"title":{},"copy":{"default":true,"type":"boolean"},"inline":{"default":false,"type":"boolean"}}},"combobox":{"helper":"rui_combobox","complexity":"complex","param_count":27,"slot_count":1,"form_builder":true,"standalone":true,"ai_score":6,"human_score":7,"token_estimate":219,"params":{"method":{"positional":true},"form":{},"object":{},"name":{},"collection":{"default":[],"type":"array"},"value_method":{"default":"id","type":"symbol"},"text_method":{"default":"name","type":"symbol"},"icon_method":{},"label":{},"placeholder":{"default":"Select an option","type":"string"},"help_text":{},"required":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"multiple":{"default":false,"type":"boolean"},"selected":{},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"color":{"default":"zinc","type":"symbol","values_from":"colors","open":true},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","pill","square","circle"]},"variant":{"default":"default","type":"symbol","closed":true,"values":["default","underline"]},"width":{"closed":true,"values":["auto","full","fit","screen","min","max","xs","sm","base","lg","xl","2xl"]},"searchable":{"default":true,"type":"boolean"},"clear_on_select":{"default":false,"type":"boolean"},"close_on_select":{"default":"auto","type":"symbol"},"max_selections":{},"show_badges":{"default":true,"type":"boolean"},"index":{}}},"date":{"helper":"rui_date","complexity":"complex","param_count":38,"slot_count":0,"form_builder":true,"standalone":true,"ai_score":5,"human_score":6,"token_estimate":226,"params":{"name_or_method":{"positional":true},"form":{},"object":{},"method":{},"name":{},"value":{},"variant":{"default":"picker","type":"symbol","closed":true,"values":["native","picker","select"]},"input_type":{"closed":true,"default":"date","values":["date","datetime","time"]},"type":{},"range":{"default":false,"type":"boolean"},"color":{"default":"default","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["square","rounded","pill","circle"]},"label":{},"help_text":{},"error_message":{},"placeholder":{},"min":{},"max":{},"step":{},"unavailable":{"default":[],"type":"array"},"required":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"readonly":{"default":false,"type":"boolean"},"months":{},"presets":{"default":false,"type":"boolean"},"with_today":{"default":false,"type":"boolean"},"clearable":{"default":false,"type":"boolean"},"week_numbers":{"default":false,"type":"boolean"},"selectable_header":{"default":false,"type":"boolean"},"start_day":{"default":0,"type":"integer"},"separator":{"default":"to","type":"string"},"start_year":{},"end_year":{},"order":{},"include_blank":{"default":false,"type":"boolean"},"index":{}}},"dialog":{"helper":"rui_dialog","complexity":"moderate","param_count":19,"slot_count":4,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":178,"params":{"id":{},"title":{},"trigger":{},"description":{},"position":{"default":"center","type":"symbol","closed":true,"values":["center","right","left","top","bottom"]},"size":{"default":"md","type":"symbol","closed":true,"values":["sm","md","lg","xl","2xl","full","xs"]},"closable":{"default":true,"type":"boolean"},"backdrop_close":{},"dismissible":{},"static_backdrop":{"default":false,"type":"boolean"},"turbo_frame":{},"backdrop":{"default":"default","type":"symbol","closed":true,"values":["default","dark","blur","light"]},"autofocus_selector":{},"description_id":{},"open":{"default":false,"type":"boolean"},"responsive":{"default":false,"type":"boolean"},"responsive_breakpoint":{"default":768,"type":"integer"},"mobile_position":{}}},"dropdown":{"helper":"rui_dropdown","complexity":"complex","param_count":31,"slot_count":12,"form_builder":true,"standalone":true,"ai_score":6,"human_score":7,"token_estimate":392,"params":{"name_or_method":{"positional":true},"form":{},"object":{},"method":{},"collection":{},"text":{},"value_method":{"default":"id","type":"symbol"},"text_method":{"default":"name","type":"symbol"},"placement":{"default":"bottom","type":"symbol","closed":true,"values":["top","right","bottom","left"]},"trigger":{"default":"click","type":"symbol"},"chevron":{"default":true,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"variant":{"default":"solid","type":"symbol","closed":true,"values":["solid","outline","ghost","soft"]},"color":{"default":"zinc","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["square","rounded","pill"]},"width":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","full"]},"name":{},"id":{},"value":{},"required":{"default":false,"type":"boolean"},"label":{},"help_text":{},"error_message":{},"prompt_text":{"default":"Select an option","type":"string"},"include_prompt":{"default":true,"type":"boolean"},"icon_only":{"default":false,"type":"boolean"},"trigger_icon":{},"avatar":{},"index":{}}},"editable":{"helper":"rui_editable","complexity":"moderate","param_count":15,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":8,"human_score":8,"token_estimate":110,"params":{"model":{"required":true,"positional":true},"attribute":{"required":true,"positional":true},"url":{},"as":{},"tag":{},"placeholder":{"default":"Click to edit","type":"string"},"input_type":{"default":"text","type":"symbol"},"required":{"default":false,"type":"boolean"},"maxlength":{},"minlength":{},"min":{},"max":{},"rows":{"default":3,"type":"integer"},"id":{}}},"empty_state":{"helper":"rui_empty_state","complexity":"simple","param_count":8,"slot_count":2,"form_builder":false,"standalone":true,"ai_score":9,"human_score":9,"token_estimate":86,"params":{"title":{},"description":{},"icon":{},"variant":{"default":"dashed","type":"symbol","closed":true,"values":["outline","dashed","plain","filled"]},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg"]},"color":{"default":"default","type":"symbol","values_from":"colors","open":true},"align":{"default":"center","type":"symbol","closed":true,"values":["center","start"]}}},"icon":{"helper":"rui_icon","complexity":"simple","param_count":8,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":9,"human_score":9,"token_estimate":56,"params":{"name":{"required":true,"positional":true},"size":{"default":"sm","type":"symbol"},"color":{"default":"inherit","type":"symbol","values_from":"colors","open":true},"position":{"default":"leading","type":"symbol"},"standalone":{"default":true,"type":"boolean"},"aria_label":{},"aria_hidden":{"default":false,"type":"boolean"}}},"image":{"helper":"rui_image","complexity":"complex","param_count":28,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":6,"human_score":7,"token_estimate":206,"params":{"positional_src":{"positional":true},"alt":{"required":true},"src":{},"caption":{},"url":{},"size":{"default":"auto","type":"symbol","closed":true,"values":["auto","full","xs","sm","md","lg","xl","xl2","xl3","ig_post","ig_post_square","ig_post_portrait","ig_post_landscape","ig_carousel","ig_story","ig_reel","fb_post","fb_post_square","fb_post_portrait","fb_post_landscape","fb_story","fb_cover","x_post","x_post_square","x_post_portrait","x_header","x_banner","linkedin_post","linkedin_post_square","linkedin_post_portrait","linkedin_cover","linkedin_banner","pin","pin_square","tiktok_post","tiktok_video","yt_thumbnail","yt_banner"]},"shape":{"default":"default","type":"symbol","closed":true,"values":["default","rounded","circle","square"]},"ratio":{"default":"auto","type":"symbol","closed":true,"values":["auto","square","video","portrait","landscape","wide","ultrawide"]},"fit":{"default":"cover","type":"symbol","closed":true,"values":["cover","contain","fill","none","scale_down"]},"position":{"default":"center","type":"symbol","closed":true,"values":["center","top","bottom","left","right","left_top","left_bottom","right_top","right_bottom"]},"alignment":{"default":"left","type":"symbol","closed":true,"values":["left","center","right"]},"loading":{"default":"lazy","type":"symbol"},"decoding":{"default":"async","type":"symbol"},"fetchpriority":{"default":"auto","type":"symbol"},"srcset":{},"sizes":{},"width":{},"height":{},"crossorigin":{},"referrerpolicy":{},"grayscale":{"default":false,"type":"boolean"},"blur":{"default":false,"type":"boolean"},"sepia":{"default":false,"type":"boolean"},"zoom":{"default":false,"type":"boolean"},"shine":{"default":false,"type":"boolean"},"overlay":{"default":false,"type":"boolean"},"sources":{}}},"input":{"helper":"rui_input","complexity":"complex","param_count":35,"slot_count":2,"form_builder":true,"standalone":true,"ai_score":7,"human_score":7,"token_estimate":250,"params":{"name_or_method":{"positional":true},"form":{},"object":{},"method":{},"type":{"default":"text","type":"symbol","closed":true,"values":["text","email","password","number","tel","url","search"]},"name":{},"value":{},"placeholder":{},"required":{"default":false,"type":"boolean"},"readonly":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"pattern":{},"maxlength":{},"minlength":{},"min":{},"max":{},"step":{},"autocomplete":{},"inputmode":{},"list":{},"label":{},"help_text":{},"validation":{"default":true,"type":"boolean"},"autoformat":{"default":true,"type":"boolean"},"variant":{"default":"default","type":"symbol","closed":true,"values":["default","filled","outline"]},"color":{"default":"default","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","pill","square","circle"]},"label_class":{},"prefix_class":{},"suffix_class":{},"help_text_class":{},"container_class":{},"index":{}}},"kanban":{"helper":"rui_kanban","complexity":"simple","param_count":9,"slot_count":4,"form_builder":false,"standalone":true,"ai_score":8,"human_score":8,"token_estimate":118,"params":{"id":{},"color":{"default":"zinc","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","square"]},"column_width":{"default":"320px","type":"string"},"max_height":{},"draggable":{"default":true,"type":"boolean"},"move_url":{}}},"link":{"helper":"rui_link","complexity":"complex","param_count":45,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":5,"human_score":6,"token_estimate":255,"params":{"text":{"positional":true},"url":{"positional":true},"if":{},"unless":{},"unless_current":{"default":false,"type":"boolean"},"variant":{"default":"hover_underline","type":"symbol","closed":true,"values":["underline","no_underline","hover_underline","animated_underline","nav","solid","outline","ghost","soft","gradient"]},"color":{"default":"blue","type":"symbol","values_from":"colors","open":true},"size":{"closed":true,"default":"base","values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"],"type":"symbol"},"shape":{"closed":true,"default":"rounded","values":["rounded","pill","square","circle"],"type":"symbol"},"weight":{"closed":true,"values":["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"]},"full_width":{"default":false,"type":"boolean"},"gradient":{},"disabled":{"default":false,"type":"boolean"},"loading":{"default":false,"type":"boolean"},"method":{},"external":{"default":false,"type":"boolean"},"target":{},"rel":{},"download":{},"turbo_method":{},"turbo_frame":{},"turbo_stream":{},"turbo_confirm":{},"turbo_action":{},"turbo_prefetch":{},"data":{"default":{},"type":"hash"},"params":{},"anchor":{},"title":{},"tooltip":{},"hreflang":{},"referrerpolicy":{},"active":{"default":false,"type":"boolean"},"truncate":{},"scroll":{},"email":{},"phone":{},"sms":{},"subject":{},"body":{},"cc":{},"bcc":{},"reply_to":{},"country_code":{}}},"live_search":{"helper":"rui_live_search","complexity":"complex","param_count":32,"slot_count":2,"form_builder":false,"standalone":true,"ai_score":5,"human_score":6,"token_estimate":244,"params":{"url":{"required":true},"turbo_frame":{"required":true},"placeholder":{},"debounce":{"default":300,"type":"integer"},"min_length":{"default":1,"type":"integer"},"param_name":{"default":"q","type":"symbol"},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","lg","xl","base","xs","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["square","rounded","pill","circle"]},"clear_button":{"default":false,"type":"boolean"},"loading_indicator":{"default":false,"type":"boolean"},"autofocus":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"search_button":{"default":false,"type":"boolean"},"search_button_text":{"default":"Search","type":"string"},"shortcut":{},"shortcut_hint":{},"voice_search":{"default":false,"type":"boolean"},"scope":{"default":[],"type":"array"},"scope_param":{"default":"scope","type":"symbol"},"scope_default":{},"recent_searches":{"default":false,"type":"boolean"},"recent_searches_limit":{"default":5,"type":"integer"},"recent_searches_key":{"default":"rui_recent_searches","type":"string"},"modal":{"default":false,"type":"boolean"},"modal_size":{"default":"lg","type":"symbol"},"show_branding":{"default":true,"type":"boolean"},"brand_name":{"default":"RapidRailsUI","type":"string"},"brand_logo":{},"name":{},"id":{},"aria_label":{}}},"pagination":{"helper":"rui_pagination","complexity":"complex","param_count":26,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":6,"human_score":7,"token_estimate":202,"params":{"pagy":{},"current_page":{},"total_pages":{},"total_count":{},"variant":{"default":"numbered","type":"symbol","closed":true,"values":["simple","numbered","full","compact"]},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","square","pill"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"align":{"default":"between","type":"symbol","closed":true,"values":["left","center","right","between"]},"base_url":{},"page_param":{"default":"page","type":"symbol"},"turbo_frame":{},"turbo_action":{"default":"replace","type":"symbol"},"show_info":{"default":true,"type":"boolean"},"show_per_page":{"default":false,"type":"boolean"},"per_page_options":{"default":[10,25,50,100],"type":"array"},"items_per_page":{},"window":{"default":2,"type":"integer"},"outer_window":{"default":1,"type":"integer"},"prev_text":{},"next_text":{},"first_text":{},"last_text":{},"icon_only":{"default":false,"type":"boolean"},"show_jumper":{"default":false,"type":"boolean"}}},"popover":{"helper":"rui_popover","complexity":"moderate","param_count":10,"slot_count":5,"form_builder":false,"standalone":true,"ai_score":8,"human_score":8,"token_estimate":175,"params":{"position":{"default":"bottom","type":"symbol","closed":true,"values":["top","right","bottom","left"]},"width":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg","xl"]},"max_width":{},"color":{"default":"default","type":"symbol","values_from":"colors","open":true},"arrow":{"default":false,"type":"boolean"},"trigger":{"default":"hover","type":"symbol"},"delay":{"default":200,"type":"integer"},"hide_delay":{"default":100,"type":"integer"},"id":{}}},"progress":{"helper":"rui_progress","complexity":"simple","param_count":8,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":9,"human_score":9,"token_estimate":56,"params":{"value":{"positional":true,"default":0,"type":"integer"},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","md","lg"]},"variant":{"default":"solid","type":"symbol","closed":true,"values":["solid","soft"]},"label":{},"show_value":{"default":false,"type":"boolean"},"animated":{"default":false,"type":"boolean"}}},"radio_button":{"helper":"rui_radio_button","complexity":"moderate","param_count":21,"slot_count":1,"form_builder":true,"standalone":true,"ai_score":7,"human_score":7,"token_estimate":137,"params":{"name_or_method":{"positional":true},"form":{},"object":{},"method":{},"name":{},"collection":{"default":[],"type":"array"},"value_method":{},"text_method":{},"description_method":{},"label":{},"description":{},"help_text":{},"required":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"selected":{},"variant":{"default":"radio","type":"symbol","closed":true,"values":["radio","card","pill","button"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"layout":{"default":"vertical","type":"symbol","closed":true,"values":["vertical","horizontal"]},"index":{}}},"select":{"helper":"rui_select","complexity":"moderate","param_count":23,"slot_count":0,"form_builder":true,"standalone":true,"ai_score":5,"human_score":6,"token_estimate":126,"params":{"name_or_method":{"positional":true},"form":{},"object":{},"method":{},"name":{},"collection":{"default":[],"type":"array"},"value_method":{},"text_method":{},"selected":{},"include_blank":{"default":false,"type":"boolean"},"prompt":{},"disabled":{"default":false,"type":"boolean"},"required":{"default":false,"type":"boolean"},"multiple":{"default":false,"type":"boolean"},"rows":{},"label":{},"help_text":{},"variant":{"default":"default","type":"symbol","closed":true,"values":["default","underline"]},"color":{"default":"zinc","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","pill","square","circle"]},"index":{}}},"social_button":{"helper":"rui_social_button","complexity":"simple","param_count":12,"slot_count":1,"form_builder":true,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":79,"params":{"platform":{"positional":true},"text":{"positional":true},"size":{"default_source":"SIZE_DEFAULT"},"shape":{"default":"rounded","type":"symbol"},"full_width":{"default":false,"type":"boolean"},"icon_only":{"default":false,"type":"boolean"},"path":{},"method":{"default":"get","type":"symbol"},"external":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"loading":{"default":false,"type":"boolean"}}},"stat":{"helper":"rui_stat","complexity":"simple","param_count":10,"slot_count":3,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":105,"params":{"label":{"required":true,"positional":true},"value":{"required":true,"positional":true},"change":{},"change_color":{"default":"emerald","type":"symbol","values_from":"colors","open":true},"change_direction":{},"progress":{},"progress_color":{"values_from":"colors","open":true},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg"]}}},"steps":{"helper":"rui_steps","complexity":"moderate","param_count":18,"slot_count":3,"form_builder":false,"standalone":true,"ai_score":6,"human_score":7,"token_estimate":161,"params":{"id":{"required":true},"url":{"required":true},"current_step":{"default":0,"type":"integer"},"variant":{"default":"horizontal","type":"symbol","closed":true,"values":["horizontal","vertical","minimal","progress","breadcrumb","timeline","vertical_cards"]},"navigation":{"default":"linear","type":"symbol","closed":true,"values":["linear","free","completed_only"]},"size":{"default":"sm","type":"symbol","closed":true,"values":["sm","md","lg"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"indicators_position":{"default":"top","type":"symbol","closed":true,"values":["top","bottom","none"]},"buttons_position":{"default":"bottom","type":"symbol"},"cache_locally":{"default":true,"type":"boolean"},"client_validation":{"default":true,"type":"boolean"},"error_step":{},"back_text":{"default":"Back","type":"string"},"next_text":{"default":"Next","type":"string"},"submit_text":{"default":"Submit","type":"string"},"loading_text":{"default":"Saving...","type":"string"},"turbo_frame_id":{}}},"table":{"helper":"rui_table","complexity":"complex","param_count":32,"slot_count":7,"form_builder":false,"standalone":true,"ai_score":4,"human_score":5,"token_estimate":319,"params":{"collection":{"positional":true},"id":{},"id_method":{"default":"id","type":"symbol"},"row_color":{"values_from":"colors","open":true},"sortable":{"default":false,"type":"boolean"},"selectable":{"default":false,"type":"boolean"},"striped":{"default":false,"type":"boolean"},"striped_columns":{"default":false,"type":"boolean"},"hoverable":{"default":true,"type":"boolean"},"bordered":{"default":"grid","type":"boolean","closed":true,"values":["outline","grid"]},"header_color":{"values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","square"]},"sticky_header":{"default":false,"type":"boolean"},"sticky_max_height":{},"pagy":{},"responsive":{"default":true,"type":"boolean"},"responsive_breakpoint":{"default":"md","type":"symbol"},"responsive_mode":{"default":"scroll","type":"symbol","closed":true,"values":["scroll","cards","stack"]},"loading":{"default":false,"type":"boolean"},"loading_rows":{"default":5,"type":"integer"},"empty_message":{"default":"No data found","type":"string"},"turbo_frame":{},"turbo_action":{"default":"replace","type":"symbol"},"sort_column":{},"sort_direction":{},"sort_url":{},"client_sort":{},"title":{},"description":{},"headless":{"default":false,"type":"boolean"}}},"tabs":{"helper":"rui_tabs","complexity":"moderate","param_count":22,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":139,"params":{"id":{"required":true},"variant":{"default":"underline","type":"symbol","closed":true,"values":["spaced","underline","pills","boxed"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg","xl"]},"orientation":{"default":"horizontal","type":"symbol","closed":true,"values":["horizontal","vertical"]},"tablist_position":{"default":"start","type":"symbol","closed":true,"values":["start","end"]},"divider":{},"mobile_layout":{"default":"row","type":"symbol","closed":true,"values":["row","grid"]},"full_width":{"default":false,"type":"boolean"},"activation":{"default":"automatic","type":"symbol","closed":true,"values":["automatic","manual"]},"deep_link":{"default":false,"type":"boolean"},"animation":{"default":"fade","type":"symbol","closed":true,"values":["fade","none"]},"panels":{"default":true,"type":"boolean"},"panel_gap":{"default":"sm","type":"symbol","closed":true,"values":["none","sm","md","lg"]},"active_shade":{},"active_icon_color":{"values_from":"colors","open":true},"active_icon_shade":{"default":300,"type":"integer"},"active_bg_color":{"values_from":"colors","open":true},"active_bg_shade":{"default":100,"type":"integer"},"inactive_bg_color":{"values_from":"colors","open":true},"inactive_bg_shade":{"default":100,"type":"integer"}}},"text":{"helper":"rui_text","complexity":"complex","param_count":23,"slot_count":2,"form_builder":true,"standalone":true,"ai_score":8,"human_score":8,"token_estimate":226,"params":{"text":{"positional":true},"as":{},"tag":{},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"shade":{},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9"]},"weight":{"default":"","type":"string"},"align":{"default":"left","type":"symbol","closed":true,"values":["left","center","right","justify","start","end"]},"font":{"default":"sans","type":"symbol","closed":true,"values":["sans","serif","mono"]},"line_height":{"default":"normal","type":"symbol","closed":true,"values":["none","tight","snug","normal","relaxed","loose"]},"letter_spacing":{"default":"normal","type":"symbol","closed":true,"values":["tighter","tight","normal","wide","wider","widest"]},"leading":{},"tracking":{},"variant":{"default":"default","type":"symbol","closed":true,"values":["solid","outline","ghost","soft","link","default","strong","subtle"]},"gradient":{},"cite":{},"accent":{"default":false,"type":"boolean"},"inline":{"default":false,"type":"boolean"},"prose":{"default":false,"type":"boolean"},"transform":{"default_source":"TRANSFORM_DEFAULT","closed":true,"values":["uppercase","lowercase","capitalize","normal"]},"decoration":{"default_source":"DECORATION_DEFAULT","closed":true,"values":["underline","overline","line_through","none"]},"italic":{"default":false,"type":"boolean"}}},"text_fmt":{"helper":"rui_text_fmt","complexity":"moderate","param_count":19,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":118,"params":{"text":{"positional":true},"truncate":{},"highlight":{},"sanitize":{"default":false,"type":"boolean"},"sanitize_options":{"default":{},"type":"hash"},"pluralize":{"default":false,"type":"boolean"},"count":{},"excerpt":{},"radius":{"default":100,"type":"integer"},"simple_format":{"default":false,"type":"boolean"},"time_ago":{"default":false,"type":"boolean"},"titleize":{"default":false,"type":"boolean"},"number_format":{},"number_options":{"default":{},"type":"hash"},"linkify":{"default":false,"type":"boolean"},"default":{},"prefix":{},"suffix":{}}},"textarea":{"helper":"rui_textarea","complexity":"complex","param_count":28,"slot_count":0,"form_builder":true,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":206,"params":{"name_or_method":{"positional":true},"form":{},"object":{},"method":{},"name":{},"value":{},"placeholder":{},"required":{"default":false,"type":"boolean"},"readonly":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"maxlength":{},"minlength":{},"rows":{"default":4,"type":"integer"},"cols":{},"wrap":{"default":"soft","type":"symbol","closed":true,"values":["soft","hard","off"]},"autocomplete":{},"label":{},"help_text":{},"variant":{"default":"default","type":"symbol","closed":true,"values":["default","filled","outline"]},"color":{"default":"default","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","pill","square","circle"]},"resize":{"default":"vertical","type":"symbol","closed":true,"values":["none","vertical","horizontal","both"]},"auto_resize":{"default":false,"type":"boolean"},"max_rows":{},"show_count":{"default":false,"type":"boolean"},"index":{}}},"tooltip":{"helper":"rui_tooltip","complexity":"simple","param_count":13,"slot_count":0,"form_builder":false,"standalone":true,"ai_score":9,"human_score":9,"token_estimate":66,"params":{"text":{"required":true},"position":{"default":"top","type":"symbol","closed":true,"values":["top","right","bottom","left"]},"description":{},"subtitle":{},"color":{"default":"dark","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg"]},"arrow":{"default":true,"type":"boolean"},"trigger":{"default":"hover","type":"symbol","closed":true,"values":["hover","click"]},"delay":{"default":0,"type":"integer"},"hide_delay":{"default":0,"type":"integer"},"max_width":{},"id":{}}},"upload":{"helper":"rui_upload","complexity":"moderate","param_count":21,"slot_count":0,"form_builder":true,"standalone":true,"ai_score":7,"human_score":7,"token_estimate":122,"params":{"form":{},"object":{},"method":{},"name":{},"accept":{},"multiple":{"default":false,"type":"boolean"},"max_files":{"default":10,"type":"integer"},"max_file_size_bytes":{},"max_file_size":{},"dropzone":{"default":false,"type":"boolean"},"disabled":{"default":false,"type":"boolean"},"required":{"default":false,"type":"boolean"},"label":{},"help_text":{},"error":{},"variant":{"default":"default","type":"symbol","closed":true,"values":["default","filled","outline"]},"color":{"default":"default","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["xs","sm","base","lg","xl","xl2","xl3","xl4","xl5","xl6","xl7","xl8","xl9","xl10"]},"shape":{"default":"rounded","type":"symbol","closed":true,"values":["rounded","pill","square","circle"]},"index":{}}}},"colors":["primary","secondary","tertiary","accent","muted","success","danger","error","warning","info","default","black","white","amber","blue","cyan","emerald","fuchsia","gray","green","indigo","lime","neutral","orange","pink","purple","red","rose","sky","slate","stone","teal","violet","yellow","zinc"]},"slots":{"generated_at":"2026-10-14T18:24:58Z","components":{"accordion":{"slots":{"items":{"type":"renders_many","component":"lambda","example":"component.with_item"}}},"alert":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"},"actions":{"type":"renders_many","component":"lambda","example":"component.with_action"}}},"badge":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"button":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"button_to":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"card":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"},"header":{"type":"renders_one","component":"lambda","example":"component.with_header"},"body":{"type":"renders_one","component":"lambda","example":"component.with_body"},"media":{"type":"renders_one","component":"lambda","example":"component.with_media"},"footer":{"type":"renders_one","component":"lambda","example":"component.with_footer"}}},"carousel":{"slots":{"slides":{"type":"renders_many","component":"lambda","example":"component.with_slide"}}},"checkbox":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"combobox":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"dialog":{"slots":{"trigger":{"type":"renders_one","component":"lambda","example":"component.with_trigger"},"header":{"type":"renders_one","component":null,"example":"component.with_header"},"body":{"type":"renders_one","component":null,"example":"component.with_body"},"footer":{"type":"renders_one","component":null,"example":"component.with_footer"}}},"dropdown":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"},"search":{"type":"renders_one","component":"DropdownSearch","example":"component.with_search"},"footer":{"type":"renders_one","component":"DropdownFooter","example":"component.with_footer"},"items":{"type":"renders_many","component":"DropdownItem","example":"component.with_item"},"headers":{"type":"renders_many","component":"DropdownHeader","example":"component.with_header"},"dividers":{"type":"renders_many","component":"DropdownDivider","example":"component.with_divider"},"checkbox_items":{"type":"renders_many","component":"DropdownCheckboxItem","example":"component.with_checkbox_item"},"radio_items":{"type":"renders_many","component":"DropdownRadioItem","example":"component.with_radio_item"},"user_headers":{"type":"renders_many","component":"DropdownUserHeader","example":"component.with_user_header"},"submenus":{"type":"renders_many","component":"DropdownSubmenu","example":"component.with_submenu"},"toggle_items":{"type":"renders_many","component":"DropdownToggleItem","example":"component.with_toggle_item"},"avatar_items":{"type":"renders_many","component":"DropdownAvatarItem","example":"component.with_avatar_item"}}},"empty_state":{"slots":{"media":{"type":"renders_one","component":null,"example":"component.with_media"},"actions":{"type":"renders_many","component":null,"example":"component.with_action"}}},"input":{"slots":{"prefix":{"type":"renders_one","component":null,"example":"component.with_prefix"},"suffix":{"type":"renders_one","component":null,"example":"component.with_suffix"}}},"kanban":{"slots":{"columns":{"type":"manual","component":"builder method","example":"board.with_column(id:, title:) { |col| ... }"},"cards":{"type":"manual","component":"builder method","example":"col.with_card(id:, title:) { ... }"},"header":{"type":"manual","component":"builder method","example":"col.with_header { ... }"},"footer":{"type":"manual","component":"builder method","example":"col.with_footer { ... }"}}},"link":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"live_search":{"slots":{"empty_state":{"type":"renders_one","component":null,"example":"component.with_empty_state"},"trigger":{"type":"renders_one","component":null,"example":"component.with_trigger"}}},"popover":{"slots":{"trigger":{"type":"renders_one","component":null,"example":"component.with_trigger"},"header":{"type":"renders_one","component":null,"example":"component.with_header"},"body":{"type":"renders_one","component":null,"example":"component.with_body"},"footer":{"type":"renders_one","component":null,"example":"component.with_footer"},"custom_content":{"type":"renders_one","component":null,"example":"component.with_custom_content"}}},"radio_button":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"social_button":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"}}},"stat":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"},"sparkline":{"type":"renders_one","component":null,"example":"component.with_sparkline"},"footer":{"type":"renders_one","component":null,"example":"component.with_footer"}}},"steps":{"slots":{"steps":{"type":"renders_many","component":"StepSlot","example":"component.with_step"},"header":{"type":"renders_one","component":null,"example":"component.with_header"},"footer":{"type":"renders_one","component":null,"example":"component.with_footer"}}},"table":{"slots":{"columns":{"type":"renders_many","component":"lambda","example":"component.with_column"},"toolbar":{"type":"renders_one","component":null,"example":"component.with_toolbar"},"header":{"type":"renders_one","component":null,"example":"component.with_header"},"footer":{"type":"renders_one","component":null,"example":"component.with_footer"},"empty_state":{"type":"renders_one","component":null,"example":"component.with_empty_state"},"bulk_actions":{"type":"renders_one","component":null,"example":"component.with_bulk_actions"},"caption":{"type":"renders_one","component":null,"example":"component.with_caption"}}},"tabs":{"slots":{"tabs":{"type":"renders_many","component":"lambda","example":"component.with_tab"}}},"text":{"slots":{"icon":{"type":"renders_one","component":"lambda","example":"component.with_icon"},"badge":{"type":"renders_one","component":"Badge::Component","example":"component.with_badge"}}}}},"families":{"version":"1.1","updated_at":"2026-02-13","decision_trees":{"search":{"question":"What kind of search?","branches":[{"use_case":"Filter table rows","keywords":["filter","table","search table","filter rows"],"component":"rui_input","params":{"type":"search"},"placement":"above rui_table","notes":"Table has NO built-in search. Use separate input with client-side filtering.","wrong_choices":[{"component":"rui_live_search","reason":"Live search is for global/app-wide search, not table filtering"}]},{"use_case":"Global search / Cmd+K","keywords":["global search","cmd+k","search popup","search the whole app","command palette"],"component":"rui_live_search","requires_controller":true,"turbo_frame":true,"notes":"Standalone search with optional modal. Debounced queries via Turbo Frame. Needs search controller endpoint.","wrong_choices":[{"component":"rui_input","reason":"Input is for simple forms, not debounced async search"}]},{"use_case":"Searchable dropdown in form","keywords":["searchable dropdown","type to filter","autocomplete","combobox"],"component":"rui_combobox","form_field":true,"notes":"Form field with type-to-filter. Multi-select supported.","wrong_choices":[{"component":"rui_select","reason":"Select is native HTML, not searchable"},{"component":"rui_dropdown","reason":"Dropdown is for action menus, not form fields"}]}]},"dropdown":{"question":"What kind of dropdown?","branches":[{"use_case":"Actions menu / context menu","keywords":["actions","context menu","navigation dropdown","menu"],"component":"rui_dropdown","not_a_form_field":true,"notes":"Clickable menu with items. NOT for form selection.","wrong_choices":[{"component":"rui_select","reason":"Select is for form fields, not action menus"},{"component":"rui_combobox","reason":"Combobox is for searchable form fields"}]},{"use_case":"Form select field (\u003c 10 options)","keywords":["form field","pick one","select","choose option"],"component":"rui_select","native":true,"notes":"Native HTML select. Best for simple lists, mobile UX.","when_to_use":"\u003c 10 options, native mobile UX, simple lists","wrong_choices":[{"component":"rui_dropdown","reason":"Dropdown is for action menus, not form submission"}]},{"use_case":"Searchable form select (\u003e 10 options)","keywords":["searchable","many options","filter options","autocomplete"],"component":"rui_combobox","searchable":true,"notes":"Searchable select for large option lists. Multi-select supported.","when_to_use":"\u003e 10 options, searchable, multi-select needed","wrong_choices":[{"component":"rui_select","reason":"Native select not searchable, bad UX for many options"},{"component":"rui_dropdown","reason":"Dropdown is for action menus, not form submission"}]}]},"modal":{"question":"What kind of popup?","branches":[{"use_case":"Confirmation / form dialog","keywords":["modal","dialog","confirmation","popup form","drawer"],"component":"rui_dialog","slots":["trigger","header","body","footer"],"notes":"Native HTML \u003cdialog\u003e element. Use slots for structure.","wrong_choices":[{"component":"rui_tooltip","reason":"Tooltip is text-only hover hints, not interactive content"},{"component":"rui_popover","reason":"Popover is for rich info cards, not confirmations"}]},{"use_case":"Hover hint","keywords":["hint","help text","info icon","hover"],"component":"rui_tooltip","trigger":"hover or focus","notes":"Text-only, small. Triggered on hover/focus.","wrong_choices":[{"component":"rui_dialog","reason":"Dialog is for confirmations/forms, not hints"},{"component":"rui_popover","reason":"Popover is click-triggered with rich content"}]},{"use_case":"Rich info card on click","keywords":["info card","details popup","rich content","click"],"component":"rui_popover","trigger":"click","slots":["trigger","header","body","footer"],"notes":"Click-triggered. Supports header/body/footer structure.","wrong_choices":[{"component":"rui_tooltip","reason":"Tooltip is hover-triggered text-only"},{"component":"rui_dialog","reason":"Dialog is modal (blocks interaction), popover is not"}]}]},"editable":{"question":"What kind of editing?","branches":[{"use_case":"Click to edit inline","keywords":["inline edit","click to edit","edit in place","contenteditable"],"component":"rui_editable","auto_save":true,"notes":"Click text → input appears → auto-save via PATCH on blur/Enter, cancel on Escape. Needs controller respond_to with format.turbo_stream.","wrong_choices":[{"component":"form_with","reason":"form_with is for full forms, not inline editing"}]},{"use_case":"Edit form page","keywords":["form","edit page","form page","full form"],"component":"form_with","form_fields":true,"notes":"Standard Rails form with f.rui_input, f.rui_textarea, etc.","wrong_choices":[{"component":"rui_editable","reason":"Editable is for inline single-field updates, not forms"}]}]},"table":{"question":"What kind of data display?","branches":[{"use_case":"Data table with sorting/selection","keywords":["table","data table","sortable","selectable","rows","grid"],"component":"rui_table","features":["sorting","row selection","bulk actions","pagination"],"notes":"No built-in search. Pair with rui_input(type: :search) for filtering.","wrong_choices":[{"component":"manual div layout","reason":"Use rui_table for tabular data with features"}]},{"use_case":"Card grid / simple list","keywords":["card grid","card layout","list","simple layout"],"component":"manual HTML layout","use_components":["rui_card","rui_badge","rui_avatar"],"notes":"For non-tabular layouts, use manual HTML with RUI components.","wrong_choices":[{"component":"rui_table","reason":"Table is for tabular data, not card layouts"}]}]},"button":{"question":"What kind of action?","branches":[{"use_case":"Submit form / primary action","keywords":["submit","save","create","update","primary action"],"component":"rui_button","context":"inside form or standalone","notes":"Use inside form_with. Type auto-detects (submit in forms, button standalone).","wrong_choices":[{"component":"rui_button_to","reason":"button_to is for RESTful actions outside forms"},{"component":"rui_link","reason":"Links are for navigation, not form submission"}]},{"use_case":"Delete / RESTful action","keywords":["delete","destroy","post","patch","put","restful"],"component":"rui_button_to","generates_form":true,"notes":"RESTful action (POST/PATCH/DELETE). Generates its own form with CSRF.","wrong_choices":[{"component":"rui_button","reason":"Use button_to for actions that need HTTP method override"},{"component":"rui_link","reason":"Links should use GET only (use button_to for other methods)"}]},{"use_case":"Navigation styled as button","keywords":["navigation","link","go to","button style link"],"component":"rui_link","styling":"button-like variants","notes":"Navigation that looks like a button. Use variant: :solid for button appearance.","wrong_choices":[{"component":"rui_button","reason":"Buttons are for actions, links are for navigation"},{"component":"rui_button_to","reason":"button_to is for form submission, not navigation"}]}]},"text_display":{"question":"What kind of text display?","branches":[{"use_case":"Page/section heading","keywords":["heading","title","h1","h2","page title","section heading"],"component":"rui_text","params":{"as":":h1 through :h6"},"notes":"Headings use built-in responsive sizes. Do NOT pass size: — it is ignored. Explicit weight: still works.","wrong_choices":[{"component":"rui_text with size:","reason":"as: h1-h6 ignores size: param. Use as: alone for headings."}]},{"use_case":"Body paragraph / description","keywords":["paragraph","body text","description","content"],"component":"rui_text","params":{"as":":p (default)"},"notes":"Default tag is \u003cp\u003e with mb-2 margin. Use as: :span or inline: true for inline text."},{"use_case":"Formatted text (truncate, numbers, time)","keywords":["truncate","number format","time ago","currency","linkify"],"component":"rui_text_fmt","notes":"Use rui_text_fmt for Rails formatting helpers (truncate, number_to_currency, time_ago_in_words, etc.).","wrong_choices":[{"component":"rui_text","reason":"rui_text is for typography styling, not Rails formatting helpers"}]},{"use_case":"Inline text fragment","keywords":["inline","span","inline text","label text"],"component":"rui_text","params":{"inline":true},"notes":"inline: true renders \u003cspan\u003e instead of \u003cp\u003e. No bottom margin."}]},"profile_display":{"question":"What kind of profile/user display?","branches":[{"use_case":"User avatar only","keywords":["avatar","profile picture","user image","initials"],"component":"rui_avatar","notes":"Renders image or auto-generated initials from name:. Use size: for different sizes."},{"use_case":"Avatar with name/info","keywords":["user card","avatar with name","author info","profile badge"],"component":"composition","use_components":["rui_avatar","rui_text"],"notes":"No single component for this. Compose avatar + text in a flex container.","example":"\u003cdiv class=\"flex items-center gap-3\"\u003e\u003c%= rui_avatar(name: user.name, size: :sm) %\u003e\u003c%= rui_text(user.name, weight: :medium, inline: true) %\u003e\u003c/div\u003e"},{"use_case":"Content/hero image","keywords":["hero image","content image","photo","cover image"],"component":"rui_image","notes":"Use rui_image for content images. Supports aspect ratios, effects, captions.","wrong_choices":[{"component":"rui_avatar","reason":"Avatar is for user profile images, not content images"}]}]},"progress_display":{"question":"What kind of progress/metric display?","branches":[{"use_case":"Simple progress bar","keywords":["progress","completion","percentage","bar","progress bar","loading bar"],"component":"rui_progress","params":{"value":"0-100"},"notes":"Standalone progress bar. Supports label, show_value, animated, 5 sizes, 2 variants.","wrong_choices":[{"component":"rui_stat","reason":"Stat is a card for labeled metrics — use rui_progress for a bare progress bar"}]},{"use_case":"Metric card with optional progress","keywords":["metric","stat","kpi","dashboard card","number card","stats card"],"component":"rui_stat","params":{"label":"Metric name","value":"Metric value","progress":"0-100 (optional)"},"notes":"Card-style metric display. Optional change badge, progress bar, icon slot, footer slot. Composes rui_text + rui_badge + rui_progress.","wrong_choices":[{"component":"rui_progress","reason":"rui_progress is a bare bar — use rui_stat for labeled metric cards"}]}]}},"deprecated_params":{"fixes":[{"component":"rui_text","wrong_param":"tag","correct_param":"as","notes":"rui_text uses 'as:' not 'tag:' to specify HTML element"},{"component":"rui_badge","wrong_param":"status","correct_param":"color","notes":"Badge uses 'color:' not 'status:' (deprecated param)"},{"component":"rui_dropdown","context":"inside form_with","suggestion":"rui_select","notes":"Dropdown is for action menus. Use rui_select for form fields."},{"component":"rui_select","context":"many options (\u003e 10)","suggestion":"rui_combobox","notes":"Select is native HTML (not searchable). Use combobox for searchable."},{"component":"rui_text","wrong_param":"leading","correct_param":"line_height","notes":"leading: works as alias but line_height: is canonical"},{"component":"rui_text","wrong_param":"tracking","correct_param":"letter_spacing","notes":"tracking: works as alias but letter_spacing: is canonical"}]},"common_mistakes":[{"mistake":"Using rui_dropdown inside form_with for field selection","wrong":"\u003c%= form_with model: @post do |f| %\u003e\n  \u003c%= f.rui_dropdown(...) %\u003e\n\u003c% end %\u003e","right":"\u003c%= form_with model: @post do |f| %\u003e\n  \u003c%= f.rui_select(:category_id, Category.all, :id, :name) %\u003e\n\u003c% end %\u003e","reason":"Dropdown is for action menus (navigation), not form field selection"},{"mistake":"Using rui_live_search to filter table rows","wrong":"\u003c%= rui_live_search(url: filter_posts_path, ...) %\u003e\n\u003c%= rui_table(@posts) do |table| %\u003e","right":"\u003c%= rui_input(type: :search, placeholder: 'Filter...', data: { action: 'keyup-\u003efilter#search' }) %\u003e\n\u003c%= rui_table(@posts) do |table| %\u003e","reason":"Live search is for global search with backend queries. Table filtering is client-side."},{"mistake":"Using rui_button for delete actions","wrong":"\u003c%= rui_button('Delete', data: { turbo_method: :delete, turbo_confirm: 'Sure?' }) %\u003e","right":"\u003c%= rui_button_to('Delete', post_path(@post), method: :delete, data: { turbo_confirm: 'Sure?' }) %\u003e","reason":"Buttons need proper forms for non-GET requests. Use button_to for RESTful actions."},{"mistake":"Setting rui_text with tag: instead of as:","wrong":"\u003c%= rui_text(tag: :h1) { 'Title' } %\u003e","right":"\u003c%= rui_text(as: :h1) { 'Title' } %\u003e","reason":"Text component uses 'as:' parameter, not 'tag:'"},{"mistake":"Using rui_badge with status: instead of color:","wrong":"\u003c%= rui_badge('Active', status: :success) %\u003e","right":"\u003c%= rui_badge('Active', color: :success) %\u003e","reason":"Badge deprecated 'status:' in favor of 'color:' for consistency"},{"mistake":"Passing size: with heading tags (h1-h6)","wrong":"\u003c%= rui_text('Title', as: :h1, size: :sm) %\u003e","right":"\u003c%= rui_text('Title', as: :h1) %\u003e","reason":"When as: is h1-h6, size: is silently ignored. Headings use built-in responsive presets."},{"mistake":"Using leading:/tracking: as primary param names","wrong":"\u003c%= rui_text('Hello', leading: :tight, tracking: :wide) %\u003e","right":"\u003c%= rui_text('Hello', line_height: :tight, letter_spacing: :wide) %\u003e","reason":"leading:/tracking: work as aliases but line_height:/letter_spacing: are canonical param names"}]},"compositions":{"version":"1.1","updated_at":"2026-02-22","compositions":{"author_byline":{"description":"Avatar + author name + date — used in blog posts, comments, cards","components":["rui_avatar","rui_text"],"common_in":["blog posts","comments","article headers","user cards"],"example":"\u003cdiv class=\"flex items-center gap-3\"\u003e\n  \u003c%= rui_avatar(name: user.name, src: user.avatar_url, size: :sm) %\u003e\n  \u003cdiv\u003e\n    \u003c%= rui_text(user.name, weight: :medium, inline: true) %\u003e\n    \u003c%= rui_text(time_ago_in_words(post.created_at) + \" ago\", size: :sm, color: :muted, inline: true) %\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n","notes":"Use inline: true on text to prevent \u003cp\u003e margin. Avatar auto-generates initials from name: if no src:."},"page_header":{"description":"Page title + description + action buttons — used at top of index/show pages","components":["rui_text","rui_button","rui_link"],"common_in":["index pages","dashboard headers","settings pages"],"example":"\u003cdiv class=\"flex items-center justify-between mb-6\"\u003e\n  \u003cdiv\u003e\n    \u003c%= rui_text(\"Posts\", as: :h1) %\u003e\n    \u003c%= rui_text(\"Manage your blog posts\", color: :muted) %\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex gap-2\"\u003e\n    \u003c%= rui_link(\"New Post\", new_post_path, variant: :solid, color: :primary) do |link| %\u003e\n      \u003c% link.with_icon(:plus) %\u003e\n    \u003c% end %\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n","notes":"h1 ignores size: — uses built-in responsive preset. Use rui_link with variant: :solid for button-styled navigation."},"stat_card":{"description":"Metric label + large value + optional change badge/progress — used in dashboards","components":["rui_stat"],"common_in":["dashboards","admin panels","analytics pages"],"example":"\u003c%= rui_stat(\"Total Users\", \"12,345\", change: \"+12%\", change_color: :success) do |s| %\u003e\n  \u003c% s.with_icon(:users) %\u003e\n\u003c% end %\u003e\n","notes":"rui_stat is a first-class component (v0.51.x+) — do not hand-roll this from rui_text + rui_badge + a plain div. change_direction auto-detects from the +/- prefix on change:. For general (non-metric) card layouts — media, icon+header, body, checklist, footer — use rui_card instead; see its own composition/USAGE.md."},"empty_state":{"description":"Icon + message + CTA button — shown when table/list has no data","components":["rui_icon","rui_text","rui_link"],"common_in":["empty tables","no search results","first-time user","empty inbox"],"example":"\u003cdiv class=\"flex flex-col items-center justify-center py-12 text-center\"\u003e\n  \u003c%= rui_icon(:inbox, size: :xl, color: :muted) %\u003e\n  \u003c%= rui_text(\"No posts yet\", as: :h3, class: \"mt-4\") %\u003e\n  \u003c%= rui_text(\"Create your first post to get started.\", color: :muted) %\u003e\n  \u003cdiv class=\"mt-6\"\u003e\n    \u003c%= rui_link(\"Create Post\", new_post_path, variant: :solid, color: :primary) do |link| %\u003e\n      \u003c% link.with_icon(:plus) %\u003e\n    \u003c% end %\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n","notes":"Icon uses currentColor — inherits from parent text color. Center with flex column."},"comment_thread":{"description":"Avatar + author + body + action links — used in discussions, reviews","components":["rui_avatar","rui_text","rui_link","rui_button_to"],"common_in":["comments","discussions","reviews","activity feeds"],"example":"\u003cdiv class=\"flex gap-3\"\u003e\n  \u003c%= rui_avatar(name: comment.user.name, src: comment.user.avatar_url, size: :sm) %\u003e\n  \u003cdiv class=\"flex-1\"\u003e\n    \u003cdiv class=\"flex items-center gap-2\"\u003e\n      \u003c%= rui_text(comment.user.name, weight: :medium, inline: true) %\u003e\n      \u003c%= rui_text(time_ago_in_words(comment.created_at) + \" ago\", size: :sm, color: :muted, inline: true) %\u003e\n    \u003c/div\u003e\n    \u003c%= rui_text(comment.body) %\u003e\n    \u003cdiv class=\"flex gap-3 mt-1\"\u003e\n      \u003c%= rui_link(\"Reply\", \"#\", size: :sm, color: :muted) %\u003e\n      \u003c%= rui_button_to(\"Delete\", comment_path(comment), method: :delete, size: :xs, color: :danger, variant: :ghost, data: { turbo_confirm: \"Delete this comment?\" }) %\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n","notes":"Use rui_button_to for delete (generates CSRF form). Never nest button_to inside form_with."},"form_section":{"description":"Section heading + description + grouped form fields — used in settings","components":["rui_text","rui_input","rui_textarea","rui_checkbox"],"common_in":["settings pages","profile forms","multi-section forms"],"example":"\u003cfieldset class=\"border-b border-zinc-200 dark:border-zinc-700 pb-8 mb-8\"\u003e\n  \u003c%= rui_text(\"Profile Information\", as: :h3) %\u003e\n  \u003c%= rui_text(\"Update your account details and public profile.\", color: :muted, size: :sm) %\u003e\n  \u003cdiv class=\"mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2\"\u003e\n    \u003c%= f.rui_input(:first_name, label: \"First name\") %\u003e\n    \u003c%= f.rui_input(:last_name, label: \"Last name\") %\u003e\n    \u003c%= f.rui_input(:email, label: \"Email\", type: :email, class: \"sm:col-span-2\") %\u003e\n    \u003c%= f.rui_textarea(:bio, label: \"Bio\", rows: 4, class: \"sm:col-span-2\") %\u003e\n  \u003c/div\u003e\n\u003c/fieldset\u003e\n","notes":"Must be inside form_with block. Use f.rui_* form builder methods for fields. h3 ignores size: param."},"filter_tabs":{"description":"Horizontal pill-style tab bar for filtering resources by status/stage/type","components":["rui_link"],"common_in":["index pages","pipeline views","activity feeds","filtered lists"],"example":"\u003cdiv class=\"flex gap-1 mb-6 bg-gray-100 rounded-lg p-1 w-fit flex-wrap\"\u003e\n  \u003c% [[\"All\", nil], [\"Active\", \"active\"], [\"Archived\", \"archived\"]].each do |label, value| %\u003e\n    \u003c% active = params[:filter] == value %\u003e\n    \u003c%= rui_link(label, resources_path(filter: value), variant: :no_underline,\n        class: \"px-4 py-1.5 rounded-md text-sm font-medium transition-colors #{active ? 'bg-white text-gray-950 shadow-sm' : 'text-gray-600 hover:text-gray-900'}\") %\u003e\n  \u003c% end %\u003e\n\u003c/div\u003e\n","notes":"Uses rui_link (not buttons) for filter navigation. Active tab gets white bg + shadow. Wrap in flex-wrap for many tabs. Pair with controller scope filtering via params."},"resource_list_item":{"description":"Bordered card row with name/link + metadata badges + edit/delete actions","components":["rui_link","rui_badge","rui_text","rui_button_to"],"common_in":["index pages","search results","CRUD listings"],"example":"\u003cdiv class=\"flex items-center gap-4 p-4 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-colors\"\u003e\n  \u003cdiv class=\"flex-1 min-w-0\"\u003e\n    \u003c%= rui_link(resource.name, resource_path(resource), variant: :no_underline,\n        class: \"text-sm font-medium text-gray-900 hover:text-gray-700\") %\u003e\n    \u003c%= rui_badge(resource.status.titleize, color: :secondary, size: :sm, variant: :soft) %\u003e\n    \u003cdiv class=\"mt-0.5\"\u003e\n      \u003c%= rui_text(resource.subtitle, as: :span, size: :xs, color: :muted) %\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex items-center gap-2 shrink-0\"\u003e\n    \u003c%= rui_link(\"Edit\", edit_resource_path(resource), variant: :no_underline,\n        class: \"text-sm text-gray-500 hover:text-gray-900\") %\u003e\n    \u003c%= rui_button_to(\"Delete\", resource_path(resource), method: :delete,\n        variant: :ghost, color: :danger, size: :sm,\n        turbo_confirm: \"Are you sure?\") %\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n","notes":"Use min-w-0 on flex-1 to enable text truncation. Badge with variant: :soft for subtle status labels. button_to for delete (generates CSRF form) — keep outside any form_with."},"detail_row":{"description":"Label + value inline pair for key-value display on show pages","components":["rui_text"],"common_in":["show pages","detail cards","profile sections","settings displays"],"example":"\u003cdiv class=\"space-y-2\"\u003e\n  \u003cdiv\u003e\n    \u003c%= rui_text(\"Email:\", as: :span, size: :sm, weight: :medium) %\u003e\n    \u003c%= rui_text(resource.email, as: :span, size: :sm) %\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003c%= rui_text(\"Phone:\", as: :span, size: :sm, weight: :medium) %\u003e\n    \u003c%= rui_text(resource.phone, as: :span, size: :sm) %\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n","notes":"Use as: :span (not default \u003cp\u003e) to keep label and value on the same line. Wrap each pair in a div. Use space-y-2 on the container for consistent vertical rhythm."},"action_footer":{"description":"Edit link + delete button separated by a border — used at bottom of show cards","components":["rui_link","rui_button_to"],"common_in":["show pages","detail cards","resource detail views"],"example":"\u003cdiv class=\"mt-6 flex items-center gap-3 pt-4 border-t border-gray-100\"\u003e\n  \u003c%= rui_link(\"Edit\", edit_resource_path(resource), variant: :no_underline,\n      class: \"text-sm font-medium text-gray-700 hover:text-gray-900\") %\u003e\n  \u003c%= rui_button_to(\"Delete\", resource_path(resource), method: :delete,\n      variant: :ghost, color: :danger, size: :sm,\n      turbo_confirm: \"Are you sure?\") %\u003e\n\u003c/div\u003e\n","notes":"Always place outside any form_with block (button_to generates its own form). Use border-t for visual separation from content above. turbo_confirm: for delete confirmation."},"associated_list":{"description":"Section heading + compact cards for related records — used on show pages","components":["rui_text","rui_link","rui_badge"],"common_in":["show pages","parent-child relationships","has_many displays"],"example":"\u003cdiv class=\"mt-8\"\u003e\n  \u003c%= rui_text(\"Related Items\", as: :p, size: :lg, weight: :bold, class: \"mb-4\") %\u003e\n  \u003c% if items.any? %\u003e\n    \u003cdiv class=\"space-y-2\"\u003e\n      \u003c% items.each do |item| %\u003e\n        \u003cdiv class=\"flex items-center gap-4 p-3 bg-white border border-gray-200 rounded-lg\"\u003e\n          \u003cdiv class=\"flex-1 min-w-0\"\u003e\n            \u003c%= rui_link(item.name, item_path(item), variant: :no_underline,\n                class: \"text-sm font-medium text-gray-900 hover:text-gray-700\") %\u003e\n            \u003c%= rui_badge(item.status, color: :secondary, size: :sm, variant: :soft) %\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"shrink-0\"\u003e\n            \u003c%= rui_text(item.metadata, as: :span, size: :xs, color: :muted) %\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c% end %\u003e\n    \u003c/div\u003e\n  \u003c% else %\u003e\n    \u003cdiv class=\"text-center py-6 bg-gray-50 rounded-lg\"\u003e\n      \u003c%= rui_text(\"No items yet\", size: :sm, color: :muted) %\u003e\n    \u003c/div\u003e\n  \u003c% end %\u003e\n\u003c/div\u003e\n","notes":"Uses p-3 (not p-4) for compact rows vs full resource_list_item. Always include an empty state fallback. Section heading uses as: :p (not heading tags) to avoid responsive size presets."}}},"gotchas":{"version":"1.1","updated_at":"2026-08-06","gotchas":[{"id":"text_heading_size_override","severity":"high","component":"rui_text","summary":"as: h1-h6 silently ignores size: param (but weight/leading/tracking work)","params":["as","size"],"behavior":"When as: is :h1 through :h6, the size: param is completely ignored. Headings use TypographyHelper responsive presets (h1=5xl/md:6xl, h2=4xl/md:5xl, etc.). However, explicit weight:, line_height:/leading:, and letter_spacing:/tracking: DO override heading defaults.","wrong":"\u003c%= rui_text(\"Title\", as: :h1, size: :xl) %\u003e","right":"\u003c%= rui_text(\"Title\", as: :h1) %\u003e","workaround":"For custom-sized heading-like text, skip as: and use size: + weight: directly.","detection":"Scan for rui_text calls where as: is :h1-:h6 AND size: is also present. Regex: /rui_text\\(.*as:\\s*:h[1-6].*size:/","recovery":"Remove the size: param. If custom sizing is needed, remove as: and use size: + weight: instead."},{"id":"text_heading_weight_override","severity":"low","component":"rui_text","summary":"Explicit weight: DOES work with heading tags (asymmetric with size:)","params":["as","weight"],"behavior":"Unlike size:, explicit weight: overrides the heading default weight. h1-h3 default to extrabold, h4-h6 to bold. Pass weight: to change.","example":"\u003c%= rui_text(\"Light Heading\", as: :h2, weight: :light) %\u003e","notes":"This is intentionally asymmetric — size is locked to responsive presets, but weight is overridable.","detection":"Not a bug — informational. Flag if agent assumed weight: is ignored like size: and omitted an intended weight override.","recovery":"Add explicit weight: param to heading. Unlike size:, this will apply correctly."},{"id":"text_paragraph_margin","severity":"medium","component":"rui_text","summary":"Default \u003cp\u003e tag adds mb-2 bottom margin","params":["as"],"behavior":"rui_text defaults to \u003cp\u003e tag which includes mb-2 (margin-bottom). This can cause unexpected spacing in flex layouts or tight compositions.","workaround":"Use inline: true (renders \u003cspan\u003e, no margin) or as: :div (no margin) or pass class: 'mb-0' to override.","wrong":"\u003cdiv class=\"flex items-center gap-2\"\u003e\u003c%= rui_text(\"Label\") %\u003e\u003c%= rui_badge(\"New\") %\u003e\u003c/div\u003e","right":"\u003cdiv class=\"flex items-center gap-2\"\u003e\u003c%= rui_text(\"Label\", inline: true) %\u003e\u003c%= rui_badge(\"New\") %\u003e\u003c/div\u003e","detection":"Scan for rui_text inside flex/inline containers without inline: true or as: :span/:div. Regex: /class=.*flex.*rui_text\\([^)]*\\)/ where call lacks inline: true.","recovery":"Add inline: true to rui_text calls inside flex layouts. Or use as: :span for inline semantics, as: :div for block without margin."},{"id":"button_to_block_form","severity":"high","component":"rui_button_to","summary":"rui_button_to generates a \u003cform\u003e — never nest inside form_with","params":[],"behavior":"rui_button_to renders a \u003cform\u003e with CSRF token and method override. Nesting it inside another form_with creates invalid nested forms — browsers ignore the inner form.","wrong":"\u003c%= form_with model: @post do |f| %\u003e\u003c%= rui_button_to(\"Delete\", post_path(@post), method: :delete) %\u003e\u003c% end %\u003e","right":"\u003c%= form_with model: @post do |f| %\u003e\u003c%= f.rui_button(\"Save\") %\u003e\u003c% end %\u003e\u003c%= rui_button_to(\"Delete\", post_path(@post), method: :delete, color: :danger) %\u003e","notes":"Place button_to outside the form, or use a separate div after the form closes.","detection":"Scan for rui_button_to calls between form_with...end blocks. Regex: /form_with[\\s\\S]*?rui_button_to[\\s\\S]*?end/","recovery":"Move rui_button_to outside the form_with block. Place it after the form's \u003c% end %\u003e tag, typically in a separate action footer div."},{"id":"text_leading_tracking_aliases","severity":"low","component":"rui_text","summary":"leading:/tracking: are aliases — leading takes priority over line_height","params":["leading","tracking","line_height","letter_spacing"],"behavior":"leading: maps to line_height:, tracking: maps to letter_spacing:. When both alias and canonical are provided, the alias takes priority (leading: overrides line_height:).","example":"\u003c%= rui_text(\"Hello\", leading: :tight, tracking: :wide) %\u003e","notes":"Canonical names (line_height:/letter_spacing:) are preferred. Aliases exist for Tailwind naming familiarity.","detection":"Scan for rui_text calls with both leading: and line_height:, or both tracking: and letter_spacing:. Regex: /rui_text\\(.*leading:.*line_height:|rui_text\\(.*tracking:.*letter_spacing:/","recovery":"Remove the canonical param (line_height:/letter_spacing:) and keep only the alias (leading:/tracking:), or vice versa. Pick one naming style and use it consistently."},{"id":"alert_undo_cascade","severity":"medium","component":"rui_alert","summary":"undo_url: cascades auto_dismiss, animate, and show_progress_bar","params":["undo_url","auto_dismiss","animate","show_progress_bar"],"behavior":"Passing undo_url: auto-enables auto_dismiss: true, which auto-enables animate: true and show_progress_bar: true. These cascades emit deprecation warnings. Pass all params explicitly to silence them.","wrong":"\u003c%= rui_alert(type: :success, undo_url: undo_path) { \"Deleted\" } %\u003e","right":"\u003c%= rui_alert(type: :success, undo_url: undo_path, auto_dismiss: true, animate: true, show_progress_bar: true) { \"Deleted\" } %\u003e","notes":"Cascade behavior will be removed in v1.0 — explicit params will be required.","detection":"Scan for rui_alert calls with undo_url: but missing auto_dismiss:, animate:, or show_progress_bar:. Check Rails log for deprecation warnings containing 'auto_dismiss'.","recovery":"Add all three cascaded params explicitly: auto_dismiss: true, animate: true, show_progress_bar: true alongside undo_url:."},{"id":"dialog_backdrop_close_rename","severity":"high","component":"rui_dialog","summary":"dismissible: renamed to backdrop_close: — old param emits deprecation warning","params":["dismissible","backdrop_close"],"behavior":"The dialog param for closing on backdrop click was renamed from dismissible: to backdrop_close: for clarity. Using dismissible: still works but emits a deprecation warning. The Stimulus value was also renamed to backdropCloseValue.","wrong":"\u003c%= rui_dialog(title: \"Form\", dismissible: false) do |d| %\u003e","right":"\u003c%= rui_dialog(title: \"Form\", backdrop_close: false) do |d| %\u003e","notes":"Data attr also changed: data-dialog-dismissible-value → data-dialog-backdrop-close-value. closable: (show X button) is unchanged.","detection":"Scan for rui_dialog calls with dismissible: param. Regex: /rui_dialog\\(.*dismissible:/","recovery":"Rename dismissible: to backdrop_close: in all rui_dialog calls."},{"id":"upload_max_file_size_rename","severity":"medium","component":"rui_upload","summary":"max_file_size: renamed to max_file_size_bytes: — old param emits deprecation warning","params":["max_file_size","max_file_size_bytes"],"behavior":"The upload file size limit param was renamed to max_file_size_bytes: to be explicit about the unit. Old param emits deprecation warning.","wrong":"\u003c%= rui_upload(:avatar, max_file_size: 2.megabytes) %\u003e","right":"\u003c%= rui_upload(:avatar, max_file_size_bytes: 2.megabytes) %\u003e","notes":"Value is bytes. Use Rails helpers: 2.megabytes, 1.gigabyte, 500.kilobytes.","detection":"Scan for max_file_size: not followed by _bytes. Regex: /max_file_size:\\s*[^_]/","recovery":"Rename max_file_size: to max_file_size_bytes: in all rui_upload calls."},{"id":"card_footer_link_degrades_in_href_mode","severity":"medium","component":"rui_card","summary":"with_footer(href:) silently degrades to plain styled text (no \u003ca\u003e) when the card itself has href: — never a nested link","params":["href","footer"],"behavior":"When rui_card's own href: is set, the whole card renders as a single \u003ca\u003e. A footer slot's own href: is passed wrapped_in_link: true internally and the footer renders as styled text instead of a second \u003ca\u003e — nesting \u003ca\u003e inside \u003ca\u003e is invalid HTML and unusable for assistive tech. No warning is raised; the footer's href: is simply ignored for linking purposes (the arrow icon and styling still render).","wrong":"\u003c%= rui_card(href: lot_path(@lot)) do |c| %\u003e\u003c% c.with_footer(text: \"View details\", href: lot_path(@lot)) %\u003e\u003c% end %\u003e","right":"\u003c%= rui_card(href: lot_path(@lot)) do |c| %\u003e\u003c% c.with_footer(text: \"View details\") %\u003e\u003c% end %\u003e","notes":"If you need the footer to link somewhere DIFFERENT from the whole-card href, don't set href: on the card — wrap only the parts that need a link, or restructure so the card itself isn't the link target.","detection":"Scan for rui_card(href: ...) blocks containing with_footer(..., href: ...). Regex: /rui_card\\([^)]*href:[\\s\\S]*?with_footer\\([^)]*href:/","recovery":"Either drop href: from with_footer (card-level href already makes the whole card clickable) or drop href: from the card and keep the footer's own link."},{"id":"tabs_panels_false_no_auto_wiring","severity":"high","component":"rui_tabs","summary":"panels: false renders the tablist only — matching an external panel's id to the built-in pattern does nothing automatically","params":["panels"],"behavior":"With panels: false, the component doesn't emit aria-controls on the tab triggers at all, so the rui--tabs Stimulus controller has no panel id to look up and never toggles anything for you — regardless of what id an external panel uses, even if it exactly matches the built-in \"#{id}-panel-#{tab_id}\" convention. You must listen for the tab-change event the controller dispatches on every activation (rui--tabs:change, or tabs:change if config.stimulus_namespace is unset) and toggle your own panels from its detail.tab.","wrong":"\u003c%= rui_tabs(id: \"wizard\", panels: false) do |t| %\u003e\u003c% t.with_tab(id: \"step-1\", label: \"Step 1\") %\u003e\u003c% end %\u003e\u003cdiv id=\"wizard-panel-step-1\"\u003eStep 1 content\u003c/div\u003e","right":"\u003c%= rui_tabs(id: \"wizard\", panels: false) do |t| %\u003e\u003c% t.with_tab(id: \"step-1\", label: \"Step 1\") %\u003e\u003c% end %\u003e\u003cdiv id=\"wizard-panel-step-1\" data-controller=\"wizard-panels\" data-wizard-panels-tab-id-value=\"step-1\"\u003eStep 1 content\u003c/div\u003e","notes":"See tabs/USAGE.md's \"panels: false — external panels recipe\" for the full wizard_panels_controller.js pattern. This is the single most common source of a tabs UI that looks correct in markup but never switches panels.","detection":"Scan for rui_tabs(..., panels: false) followed by hand-written panel divs with no document.addEventListener('rui--tabs:change', ...) / ('tabs:change', ...) wiring anywhere in the same view/controller.","recovery":"Add a Stimulus controller (or inline script) on each external panel that listens for the tabs:change/rui--tabs:change custom event and toggles hidden based on event.detail.tab."},{"id":"carousel_arrows_need_two_plus_slides","severity":"medium","component":"rui_carousel","summary":"show_arrows: true is silently overridden — arrows/indicators never render with fewer than 2 slides, no matter what show_arrows:/show_indicators: say","params":["show_arrows","show_indicators"],"behavior":"The component.html.erb template gates every arrow/indicator render on `slides.size \u003e 1` in addition to @show_arrows/@show_indicators — this check is unconditional and cannot be overridden by passing show_arrows: true or show_indicators: true explicitly. A single-slide carousel (or one that starts with only one with_slide call, e.g. while content is loading) renders with zero arrows/indicators regardless of what you passed.","wrong":"\u003c%= rui_carousel(id: \"promo\", show_arrows: true) do |c| %\u003e\u003c% c.with_slide { image_tag(\"banner.jpg\") } %\u003e\u003c% end %\u003e","right":"\u003c%# Arrows only appear once a 2nd with_slide call is added — this is not a bug to work around with show_arrows:, it is the intended UX (no point showing prev/next with nothing to navigate to) %\u003e","notes":"This is correct/intentional UX, not a bug — but it surprises anyone who explicitly set show_arrows: true expecting it to force arrows on. Don't add show_arrows: true to a single-slide carousel expecting visible controls.","detection":"Scan for rui_carousel(..., show_arrows: true) or (show_indicators: true) where the block contains only one with_slide call.","recovery":"No param fixes this — either add more slides, or accept that arrows/indicators are gated on slide count and remove the now-misleading show_arrows: true."},{"id":"kanban_max_cards_silent_drop_rejection","severity":"medium","component":"rui_kanban","summary":"max_cards: on a full column rejects the drop with zero user feedback — no error event, no shake animation, no message","params":["max_cards"],"behavior":"kanban_controller.js checks the target column's data-max-cards against its current card count on both dragover and drop; when the column is full it does a bare `return` and the drop is silently rejected — no kanban:move-failed event fires (that event is reserved for SERVER-side rejections after a move_url PATCH), no visual feedback, nothing in the console. A user dragging a card to a full column just sees it snap back with no explanation.","wrong":"\u003c%= rui_kanban do |board| %\u003e\u003c% board.with_column(title: \"WIP\", id: \"wip\", max_cards: 3) do |col| %\u003e...\u003c% end %\u003e\u003c% end %\u003e","right":"\u003c%# Pair max_cards: with a visible affordance — e.g. badge_count: showing \"3/3\" so the limit is visible before a user attempts the drag %\u003e\u003c% board.with_column(title: \"WIP\", id: \"wip\", max_cards: 3, badge_count: current_wip_count) do |col| %\u003e","notes":"If you need user-visible feedback on a rejected drop (toast, shake animation), you must add it yourself by listening for dragover/drop on the column element — the gem does not expose a client-side kanban:drop-rejected event as of this writing.","detection":"Scan for rui_kanban columns with max_cards: set but no accompanying badge_count: or other visible WIP-limit indicator in the same with_column call.","recovery":"Add badge_count: to the column so the limit is visible before the drag starts, and/or add custom dragover/drop listeners on the column element for rejection feedback."},{"id":"progress_value_silently_coerces_invalid_input","severity":"low","component":"rui_progress","summary":"value: silently coerces nil/non-numeric input to 0% via #to_i — no error, so an upstream calculation bug renders as an empty bar instead of failing loudly","params":["value"],"behavior":"clamp_value calls val.to_i.clamp(0, 100). Ruby's #to_i on nil returns 0, and on a non-numeric String (e.g. \"N/A\", \"\", a broken interpolation) also returns 0 with no exception. A value: that should have been a real percentage but came from a nil association or a failed calculation renders as a plain empty 0% bar — visually indistinguishable from a legitimately-zero metric.","wrong":"\u003c%= rui_progress(@deal.completion_percentage) %\u003e  \u003c%# renders 0% silently if @deal.completion_percentage is nil due to a missing association %\u003e","right":"\u003c%= rui_progress(@deal.completion_percentage || raise(\"completion_percentage missing for deal #{@deal.id}\")) %\u003e  \u003c%# fail loudly in dev/staging instead of shipping a silently-wrong 0% bar %\u003e","notes":"Values \u003e 100 or \u003c 0 are also clamped silently (150 -\u003e 100, -10 -\u003e 0) per progress/USAGE.md's documented \"Value Clamping\" behavior — same silent-mask-a-bug risk applies to out-of-range values from a bad calculation, not just nil.","detection":"Scan for rui_progress(value) / rui_stat(..., progress: value) calls where value comes directly from a nullable association or an unguarded arithmetic expression with no presence check.","recovery":"Add an explicit presence/range check (or a development-mode warning) upstream of the component call when the value is expected to always be a real 0-100 number — don't rely on rui_progress to surface the bug for you."},{"id":"stat_change_direction_has_no_visual_effect","severity":"high","component":"rui_stat","summary":"change_direction: is computed, stored, and tested but does not currently drive any rendered output — no up/down arrow icon exists in the template","params":["change_direction","change_color"],"behavior":"change_direction is auto-detected from the +/- prefix on change: (or set explicitly) and exposed via attr_reader — component.html.erb only renders the change badge with change: as its text and change_color: as its color; change_direction is never read by the template or by Stat::Styles. Setting change_direction: :down (or getting it auto-detected) changes nothing a user can see beyond whatever change_color: already produces — there is no directional arrow/chevron icon anywhere in Stat's current rendering.","wrong":"\u003c%= rui_stat(\"Refunds\", \"7\", change: \"7 new\", change_direction: :down, change_color: :red) %\u003e  \u003c%# developer expects a down-arrow icon on the badge because they explicitly set change_direction: :down — none renders %\u003e","right":"\u003c%# If you need a visible directional indicator, add your own icon via change: text (e.g. \"↓ 7 new\") or the with_icon slot — change_direction: alone will not add one %\u003e\u003c%= rui_stat(\"Refunds\", \"7\", change: \"down 7 new\", change_color: :red) %\u003e","notes":"component.change_direction is a real, tested public method (test/components/stat/basic_test.rb asserts :up/:down/nil detection) — this is not a param that silently no-ops due to a typo, it genuinely computes the right value and then nothing consumes it visually. Do not assume a red/green badge implies direction was rendered as an icon; only change_color: affects what's visible.","detection":"Scan for rui_stat calls passing change_direction: explicitly, or relying on auto-detection, where the intent (per surrounding copy/design) is a visible arrow — the badge alone won't provide it.","recovery":"No param fixes this today. Either accept that only change_color: is visible, or build the directional icon into change: text yourself until Stat's template renders one."},{"id":"host_unlayered_css_overrides_utilities","severity":"high","component":"all","summary":"Un-layered host CSS (a, a:hover, h1-h6, p) silently overrides every RapidRailsUI class under Tailwind v4","params":[],"behavior":"Tailwind v4 puts utilities, and therefore every RapidRailsUI class, in @layer utilities. Un-layered CSS always wins over layered CSS regardless of specificity or order, so a plain `a { color: ... }`, `a:hover { ... }` or `h1, h2 { color: inherit }` in the host app overrides rui_link colours, rui_button text, hover states and heading colours. Seen on a production app: a solid link rendered accent-on-accent, a white heading rendered navy, dropdown items turned orange.","wrong":"a { color: var(--brand); }\na:hover { color: var(--ink); }\nh1, h2, h3 { color: inherit; }","right":"@layer base {\n  a { color: var(--brand); }\n  a:hover { color: var(--ink); }\n  h1, h2, h3 { color: inherit; }\n}","workaround":"Wrap global element rules in @layer base (or @layer components). Utilities then win as intended. Legacy stylesheets imported with @import can be layered at import time: @import \"legacy.css\" layer(base);","detection":"In the host app's CSS, look for element selectors (a, a:hover, h1-h6, p, button) with colour rules outside any @layer block. Symptom: an rui_* component shows the wrong text or hover colour only in that app, while the docs site shows it correctly.","recovery":"Move the rules into @layer base, or add layer(base) to the @import of the stylesheet that contains them. No gem change is needed."}]},"relationships":{"version":"1.0","generated_at":"2026-02-22T23:52:14Z","components":{"accordion":{"composes_with":[],"slotted_into":[],"confused_with":[]},"alert":{"composes_with":[],"slotted_into":[],"confused_with":[]},"avatar":{"composes_with":["button_to","link","text"],"slotted_into":[],"confused_with":["image"]},"badge":{"composes_with":["button_to","icon","link","text"],"slotted_into":["text"],"confused_with":[]},"button":{"composes_with":["link","text"],"slotted_into":[],"confused_with":["button_to","link"]},"button_to":{"composes_with":["avatar","badge","link","text"],"slotted_into":[],"confused_with":["button","link"]},"checkbox":{"composes_with":["input","text","textarea"],"slotted_into":[],"confused_with":[]},"clipboard":{"composes_with":[],"slotted_into":[],"confused_with":[]},"code_block":{"composes_with":[],"slotted_into":[],"confused_with":[]},"combobox":{"composes_with":[],"slotted_into":[],"confused_with":["dropdown","input","live_search","select"]},"date":{"composes_with":[],"slotted_into":[],"confused_with":[]},"dialog":{"composes_with":[],"slotted_into":[],"confused_with":["popover","tooltip"]},"dropdown":{"composes_with":[],"slotted_into":[],"confused_with":["combobox","input","live_search","select"]},"editable":{"composes_with":[],"slotted_into":[],"confused_with":[]},"icon":{"composes_with":["badge","link","text"],"slotted_into":[],"confused_with":[]},"image":{"composes_with":[],"slotted_into":[],"confused_with":["avatar"]},"input":{"composes_with":["checkbox","text","textarea"],"slotted_into":[],"confused_with":["combobox","dropdown","live_search","select"]},"link":{"composes_with":["avatar","badge","button","button_to","icon","text"],"slotted_into":[],"confused_with":["button","button_to"]},"live_search":{"composes_with":[],"slotted_into":[],"confused_with":["combobox","dropdown","input","select"]},"pagination":{"composes_with":[],"slotted_into":[],"confused_with":[]},"popover":{"composes_with":[],"slotted_into":[],"confused_with":["dialog","tooltip"]},"radio_button":{"composes_with":[],"slotted_into":[],"confused_with":[]},"select":{"composes_with":[],"slotted_into":[],"confused_with":["combobox","dropdown","input","live_search"]},"social_button":{"composes_with":[],"slotted_into":[],"confused_with":[]},"steps":{"composes_with":[],"slotted_into":[],"confused_with":[]},"table":{"composes_with":[],"slotted_into":[],"confused_with":[]},"text":{"composes_with":["avatar","badge","button","button_to","checkbox","icon","input","link","textarea"],"slotted_into":[],"confused_with":["text_fmt"]},"text_fmt":{"composes_with":[],"slotted_into":[],"confused_with":["text"]},"textarea":{"composes_with":["checkbox","input","text"],"slotted_into":[],"confused_with":[]},"tooltip":{"composes_with":[],"slotted_into":[],"confused_with":["dialog","popover"]},"upload":{"composes_with":[],"slotted_into":[],"confused_with":[]}}}}