[{"data":1,"prerenderedAt":2823},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-radio-group":682,"-docs-theme-components-radio-group-surround":2818},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":464,"body":684,"description":2812,"extension":1212,"links":2813,"meta":2814,"navigation":2815,"path":465,"seo":2816,"stem":466,"__hash__":2817},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group.md",{"type":685,"value":686,"toc":2791},"minimark",[687,691,713,728,735,739,742,770,774,1961,1965,1968,1972,1975,1978,1981,1984,1987,1991,1994,2047,2051,2058,2105,2122,2125,2178,2182,2186,2191,2341,2345,2352,2495,2500,2503,2509,2512,2517,2624,2629,2681,2686,2690,2738,2742,2787],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708,709,712],"p",{},"The ",[696,697,464],"strong",{}," is a layout component that arranges related ",[700,701,702],"a",{"href":461},"radios"," into a single, consistently spaced set. The ",[705,706,707],"code",{},"useRadioGroupRecipe()"," composable creates a fully configured ",[700,710,711],{"href":132},"recipe"," with orientation and size options — a flex container that stacks radios vertically or lays them out in a wrapping row.",[692,714,715,716,719,720,723,724,727],{},"The group handles layout only. Single selection comes from the native input: give every child radio the same ",[705,717,718],{},"name",", and the browser enforces one choice per group and wires up arrow-key navigation. Mark the container with ",[705,721,722],{},"role=\"radiogroup\""," (or use a ",[705,725,726],{},"\u003Cfieldset>",") so assistive technology announces the set.",[692,729,730,731,734],{},"The Radio Group recipe integrates directly with the ",[700,732,733],{"href":461},"Radio recipe"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,736,738],{"id":737},"why-use-the-radio-group-recipe","Why use the Radio Group recipe?",[692,740,741],{},"The Radio Group recipe helps you:",[743,744,745,752,758,764],"ul",{},[746,747,748,751],"li",{},[696,749,750],{},"Lay out sets consistently",": Stack radios vertically or wrap them in a row with a single orientation prop.",[746,753,754,757],{},[696,755,756],{},"Control spacing with one axis",": The size variant sets the gap between items, so a whole group scales together.",[746,759,760,763],{},[696,761,762],{},"Compose, don't couple",": The group only handles layout; each child radio keeps its own color, size, and state.",[746,765,766,769],{},[696,767,768],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid orientation or size values at compile time.",[688,771,773],{"id":772},"usage","Usage",[775,776,778,783,790,1099,1103,1116,1952,1956],"steps",{"level":777},"4",[779,780,782],"h4",{"id":781},"register-the-recipe","Register the recipe",[692,784,785,786,789],{},"Add the Radio Group recipe to a local Styleframe instance alongside the radio recipes. The global ",[705,787,788],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[791,792,794,992],"code-tree",{"default-value":793},"src\u002Fcomponents\u002Fradio-group.styleframe.ts",[795,796,801],"pre",{"className":797,"code":798,"filename":793,"language":799,"meta":800,"style":800},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useRadioRecipe,\n    useRadioFieldRecipe,\n    useRadioGroupRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst radio = useRadioRecipe(s);\nconst radioField = useRadioFieldRecipe(s);\nconst radioGroup = useRadioGroupRecipe(s);\n\nexport default s;\n","ts","",[705,802,803,839,847,856,864,872,889,895,916,921,939,956,973,978],{"__ignoreMap":800},[804,805,808,812,816,820,823,826,829,833,836],"span",{"class":806,"line":807},"line",1,[804,809,811],{"class":810},"s7zQu","import",[804,813,815],{"class":814},"sMK4o"," {",[804,817,819],{"class":818},"sTEyZ"," styleframe",[804,821,822],{"class":814}," }",[804,824,825],{"class":810}," from",[804,827,828],{"class":814}," '",[804,830,832],{"class":831},"sfazB","virtual:styleframe",[804,834,835],{"class":814},"'",[804,837,838],{"class":814},";\n",[804,840,842,844],{"class":806,"line":841},2,[804,843,811],{"class":810},[804,845,846],{"class":814}," {\n",[804,848,850,853],{"class":806,"line":849},3,[804,851,852],{"class":818},"    useRadioRecipe",[804,854,855],{"class":814},",\n",[804,857,859,862],{"class":806,"line":858},4,[804,860,861],{"class":818},"    useRadioFieldRecipe",[804,863,855],{"class":814},[804,865,867,870],{"class":806,"line":866},5,[804,868,869],{"class":818},"    useRadioGroupRecipe",[804,871,855],{"class":814},[804,873,875,878,880,882,885,887],{"class":806,"line":874},6,[804,876,877],{"class":814},"}",[804,879,825],{"class":810},[804,881,828],{"class":814},[804,883,884],{"class":831},"@styleframe\u002Ftheme",[804,886,835],{"class":814},[804,888,838],{"class":814},[804,890,892],{"class":806,"line":891},7,[804,893,894],{"emptyLinePlaceholder":223},"\n",[804,896,898,902,905,908,911,914],{"class":806,"line":897},8,[804,899,901],{"class":900},"spNyl","const",[804,903,904],{"class":818}," s ",[804,906,907],{"class":814},"=",[804,909,819],{"class":910},"s2Zo4",[804,912,913],{"class":818},"()",[804,915,838],{"class":814},[804,917,919],{"class":806,"line":918},9,[804,920,894],{"emptyLinePlaceholder":223},[804,922,924,926,929,931,934,937],{"class":806,"line":923},10,[804,925,901],{"class":900},[804,927,928],{"class":818}," radio ",[804,930,907],{"class":814},[804,932,933],{"class":910}," useRadioRecipe",[804,935,936],{"class":818},"(s)",[804,938,838],{"class":814},[804,940,942,944,947,949,952,954],{"class":806,"line":941},11,[804,943,901],{"class":900},[804,945,946],{"class":818}," radioField ",[804,948,907],{"class":814},[804,950,951],{"class":910}," useRadioFieldRecipe",[804,953,936],{"class":818},[804,955,838],{"class":814},[804,957,959,961,964,966,969,971],{"class":806,"line":958},12,[804,960,901],{"class":900},[804,962,963],{"class":818}," radioGroup ",[804,965,907],{"class":814},[804,967,968],{"class":910}," useRadioGroupRecipe",[804,970,936],{"class":818},[804,972,838],{"class":814},[804,974,976],{"class":806,"line":975},13,[804,977,894],{"emptyLinePlaceholder":223},[804,979,981,984,987,990],{"class":806,"line":980},14,[804,982,983],{"class":810},"export",[804,985,986],{"class":810}," default",[804,988,989],{"class":818}," s",[804,991,838],{"class":814},[795,993,995],{"className":797,"code":994,"filename":788,"language":799,"meta":800,"style":800},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[705,996,997,1018,1045,1049,1063,1067,1076,1085,1089],{"__ignoreMap":800},[804,998,999,1001,1003,1005,1007,1009,1011,1014,1016],{"class":806,"line":807},[804,1000,811],{"class":810},[804,1002,815],{"class":814},[804,1004,819],{"class":818},[804,1006,822],{"class":814},[804,1008,825],{"class":810},[804,1010,828],{"class":814},[804,1012,1013],{"class":831},"styleframe",[804,1015,835],{"class":814},[804,1017,838],{"class":814},[804,1019,1020,1022,1024,1027,1030,1033,1035,1037,1039,1041,1043],{"class":806,"line":841},[804,1021,811],{"class":810},[804,1023,815],{"class":814},[804,1025,1026],{"class":818}," useDesignTokensPreset",[804,1028,1029],{"class":814},",",[804,1031,1032],{"class":818}," useUtilitiesPreset",[804,1034,822],{"class":814},[804,1036,825],{"class":810},[804,1038,828],{"class":814},[804,1040,884],{"class":831},[804,1042,835],{"class":814},[804,1044,838],{"class":814},[804,1046,1047],{"class":806,"line":849},[804,1048,894],{"emptyLinePlaceholder":223},[804,1050,1051,1053,1055,1057,1059,1061],{"class":806,"line":858},[804,1052,901],{"class":900},[804,1054,904],{"class":818},[804,1056,907],{"class":814},[804,1058,819],{"class":910},[804,1060,913],{"class":818},[804,1062,838],{"class":814},[804,1064,1065],{"class":806,"line":866},[804,1066,894],{"emptyLinePlaceholder":223},[804,1068,1069,1072,1074],{"class":806,"line":874},[804,1070,1071],{"class":910},"useDesignTokensPreset",[804,1073,936],{"class":818},[804,1075,838],{"class":814},[804,1077,1078,1081,1083],{"class":806,"line":891},[804,1079,1080],{"class":910},"useUtilitiesPreset",[804,1082,936],{"class":818},[804,1084,838],{"class":814},[804,1086,1087],{"class":806,"line":897},[804,1088,894],{"emptyLinePlaceholder":223},[804,1090,1091,1093,1095,1097],{"class":806,"line":918},[804,1092,983],{"class":810},[804,1094,986],{"class":810},[804,1096,989],{"class":818},[804,1098,838],{"class":814},[779,1100,1102],{"id":1101},"build-the-component","Build the component",[692,1104,1105,1106,1109,1110,1112,1113,1115],{},"Import the ",[705,1107,1108],{},"radioGroup"," runtime function from the virtual module and wrap your radios in the container. Mark it with ",[705,1111,722],{}," and give every child radio the same ",[705,1114,718],{},":",[1117,1118,1119,1377,1669],"framework-switcher",{},[1120,1121,1122],"template",{"v-slot:vue":800},[795,1123,1128],{"className":1124,"code":1125,"filename":1126,"language":1127,"meta":800,"style":800},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { radioGroup } from \"virtual:styleframe\";\n\nconst { orientation = \"vertical\", size = \"md\" } = defineProps\u003C{\n    orientation?: \"vertical\" | \"horizontal\";\n    size?: \"sm\" | \"md\" | \"lg\";\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"radioGroup({ orientation, size })\" role=\"radiogroup\">\n        \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FRadioGroup.vue","vue",[705,1129,1130,1157,1179,1183,1226,1252,1285,1294,1303,1307,1315,1349,1360,1369],{"__ignoreMap":800},[804,1131,1132,1135,1139,1142,1145,1147,1150,1152,1154],{"class":806,"line":807},[804,1133,1134],{"class":814},"\u003C",[804,1136,1138],{"class":1137},"swJcz","script",[804,1140,1141],{"class":900}," setup",[804,1143,1144],{"class":900}," lang",[804,1146,907],{"class":814},[804,1148,1149],{"class":814},"\"",[804,1151,799],{"class":831},[804,1153,1149],{"class":814},[804,1155,1156],{"class":814},">\n",[804,1158,1159,1161,1163,1166,1168,1170,1173,1175,1177],{"class":806,"line":841},[804,1160,811],{"class":810},[804,1162,815],{"class":814},[804,1164,1165],{"class":818}," radioGroup",[804,1167,822],{"class":814},[804,1169,825],{"class":810},[804,1171,1172],{"class":814}," \"",[804,1174,832],{"class":831},[804,1176,1149],{"class":814},[804,1178,838],{"class":814},[804,1180,1181],{"class":806,"line":849},[804,1182,894],{"emptyLinePlaceholder":223},[804,1184,1185,1187,1189,1192,1194,1196,1199,1201,1203,1206,1208,1210,1213,1215,1217,1220,1223],{"class":806,"line":858},[804,1186,901],{"class":900},[804,1188,815],{"class":814},[804,1190,1191],{"class":818}," orientation ",[804,1193,907],{"class":814},[804,1195,1172],{"class":814},[804,1197,1198],{"class":831},"vertical",[804,1200,1149],{"class":814},[804,1202,1029],{"class":814},[804,1204,1205],{"class":818}," size ",[804,1207,907],{"class":814},[804,1209,1172],{"class":814},[804,1211,1212],{"class":831},"md",[804,1214,1149],{"class":814},[804,1216,822],{"class":814},[804,1218,1219],{"class":814}," =",[804,1221,1222],{"class":910}," defineProps",[804,1224,1225],{"class":814},"\u003C{\n",[804,1227,1228,1231,1234,1236,1238,1240,1243,1245,1248,1250],{"class":806,"line":866},[804,1229,1230],{"class":1137},"    orientation",[804,1232,1233],{"class":814},"?:",[804,1235,1172],{"class":814},[804,1237,1198],{"class":831},[804,1239,1149],{"class":814},[804,1241,1242],{"class":814}," |",[804,1244,1172],{"class":814},[804,1246,1247],{"class":831},"horizontal",[804,1249,1149],{"class":814},[804,1251,838],{"class":814},[804,1253,1254,1257,1259,1261,1264,1266,1268,1270,1272,1274,1276,1278,1281,1283],{"class":806,"line":874},[804,1255,1256],{"class":1137},"    size",[804,1258,1233],{"class":814},[804,1260,1172],{"class":814},[804,1262,1263],{"class":831},"sm",[804,1265,1149],{"class":814},[804,1267,1242],{"class":814},[804,1269,1172],{"class":814},[804,1271,1212],{"class":831},[804,1273,1149],{"class":814},[804,1275,1242],{"class":814},[804,1277,1172],{"class":814},[804,1279,1280],{"class":831},"lg",[804,1282,1149],{"class":814},[804,1284,838],{"class":814},[804,1286,1287,1290,1292],{"class":806,"line":891},[804,1288,1289],{"class":814},"}>",[804,1291,913],{"class":818},[804,1293,838],{"class":814},[804,1295,1296,1299,1301],{"class":806,"line":897},[804,1297,1298],{"class":814},"\u003C\u002F",[804,1300,1138],{"class":1137},[804,1302,1156],{"class":814},[804,1304,1305],{"class":806,"line":918},[804,1306,894],{"emptyLinePlaceholder":223},[804,1308,1309,1311,1313],{"class":806,"line":923},[804,1310,1134],{"class":814},[804,1312,1120],{"class":1137},[804,1314,1156],{"class":814},[804,1316,1317,1320,1323,1326,1328,1330,1333,1335,1338,1340,1342,1345,1347],{"class":806,"line":941},[804,1318,1319],{"class":814},"    \u003C",[804,1321,1322],{"class":1137},"div",[804,1324,1325],{"class":900}," :class",[804,1327,907],{"class":814},[804,1329,1149],{"class":814},[804,1331,1332],{"class":831},"radioGroup({ orientation, size })",[804,1334,1149],{"class":814},[804,1336,1337],{"class":900}," role",[804,1339,907],{"class":814},[804,1341,1149],{"class":814},[804,1343,1344],{"class":831},"radiogroup",[804,1346,1149],{"class":814},[804,1348,1156],{"class":814},[804,1350,1351,1354,1357],{"class":806,"line":958},[804,1352,1353],{"class":814},"        \u003C",[804,1355,1356],{"class":1137},"slot",[804,1358,1359],{"class":814}," \u002F>\n",[804,1361,1362,1365,1367],{"class":806,"line":975},[804,1363,1364],{"class":814},"    \u003C\u002F",[804,1366,1322],{"class":1137},[804,1368,1156],{"class":814},[804,1370,1371,1373,1375],{"class":806,"line":980},[804,1372,1298],{"class":814},[804,1374,1120],{"class":1137},[804,1376,1156],{"class":814},[1120,1378,1379],{"v-slot:react":800},[795,1380,1383],{"className":797,"code":1381,"filename":1382,"language":799,"meta":800,"style":800},"import { radioGroup } from \"virtual:styleframe\";\n\ninterface RadioGroupProps {\n    orientation?: \"vertical\" | \"horizontal\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    children?: React.ReactNode;\n}\n\nexport function RadioGroup({\n    orientation = \"vertical\",\n    size = \"md\",\n    children,\n}: RadioGroupProps) {\n    const classes = radioGroup({ orientation, size });\n\n    return (\n        \u003Cdiv className={classes} role=\"radiogroup\">\n            {children}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FRadioGroup.tsx",[705,1384,1385,1405,1409,1420,1442,1472,1490,1495,1499,1512,1527,1541,1547,1559,1591,1596,1605,1635,1646,1656,1664],{"__ignoreMap":800},[804,1386,1387,1389,1391,1393,1395,1397,1399,1401,1403],{"class":806,"line":807},[804,1388,811],{"class":810},[804,1390,815],{"class":814},[804,1392,1165],{"class":818},[804,1394,822],{"class":814},[804,1396,825],{"class":810},[804,1398,1172],{"class":814},[804,1400,832],{"class":831},[804,1402,1149],{"class":814},[804,1404,838],{"class":814},[804,1406,1407],{"class":806,"line":841},[804,1408,894],{"emptyLinePlaceholder":223},[804,1410,1411,1414,1418],{"class":806,"line":849},[804,1412,1413],{"class":900},"interface",[804,1415,1417],{"class":1416},"sBMFI"," RadioGroupProps",[804,1419,846],{"class":814},[804,1421,1422,1424,1426,1428,1430,1432,1434,1436,1438,1440],{"class":806,"line":858},[804,1423,1230],{"class":1137},[804,1425,1233],{"class":814},[804,1427,1172],{"class":814},[804,1429,1198],{"class":831},[804,1431,1149],{"class":814},[804,1433,1242],{"class":814},[804,1435,1172],{"class":814},[804,1437,1247],{"class":831},[804,1439,1149],{"class":814},[804,1441,838],{"class":814},[804,1443,1444,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470],{"class":806,"line":866},[804,1445,1256],{"class":1137},[804,1447,1233],{"class":814},[804,1449,1172],{"class":814},[804,1451,1263],{"class":831},[804,1453,1149],{"class":814},[804,1455,1242],{"class":814},[804,1457,1172],{"class":814},[804,1459,1212],{"class":831},[804,1461,1149],{"class":814},[804,1463,1242],{"class":814},[804,1465,1172],{"class":814},[804,1467,1280],{"class":831},[804,1469,1149],{"class":814},[804,1471,838],{"class":814},[804,1473,1474,1477,1479,1482,1485,1488],{"class":806,"line":874},[804,1475,1476],{"class":1137},"    children",[804,1478,1233],{"class":814},[804,1480,1481],{"class":1416}," React",[804,1483,1484],{"class":814},".",[804,1486,1487],{"class":1416},"ReactNode",[804,1489,838],{"class":814},[804,1491,1492],{"class":806,"line":891},[804,1493,1494],{"class":814},"}\n",[804,1496,1497],{"class":806,"line":897},[804,1498,894],{"emptyLinePlaceholder":223},[804,1500,1501,1503,1506,1509],{"class":806,"line":918},[804,1502,983],{"class":810},[804,1504,1505],{"class":900}," function",[804,1507,1508],{"class":910}," RadioGroup",[804,1510,1511],{"class":814},"({\n",[804,1513,1514,1517,1519,1521,1523,1525],{"class":806,"line":923},[804,1515,1230],{"class":1516},"sHdIc",[804,1518,1219],{"class":814},[804,1520,1172],{"class":814},[804,1522,1198],{"class":831},[804,1524,1149],{"class":814},[804,1526,855],{"class":814},[804,1528,1529,1531,1533,1535,1537,1539],{"class":806,"line":941},[804,1530,1256],{"class":1516},[804,1532,1219],{"class":814},[804,1534,1172],{"class":814},[804,1536,1212],{"class":831},[804,1538,1149],{"class":814},[804,1540,855],{"class":814},[804,1542,1543,1545],{"class":806,"line":958},[804,1544,1476],{"class":1516},[804,1546,855],{"class":814},[804,1548,1549,1552,1554,1557],{"class":806,"line":975},[804,1550,1551],{"class":814},"}:",[804,1553,1417],{"class":1416},[804,1555,1556],{"class":814},")",[804,1558,846],{"class":814},[804,1560,1561,1564,1567,1569,1571,1574,1577,1580,1582,1585,1587,1589],{"class":806,"line":980},[804,1562,1563],{"class":900},"    const",[804,1565,1566],{"class":818}," classes",[804,1568,1219],{"class":814},[804,1570,1165],{"class":910},[804,1572,1573],{"class":1137},"(",[804,1575,1576],{"class":814},"{",[804,1578,1579],{"class":818}," orientation",[804,1581,1029],{"class":814},[804,1583,1584],{"class":818}," size",[804,1586,822],{"class":814},[804,1588,1556],{"class":1137},[804,1590,838],{"class":814},[804,1592,1594],{"class":806,"line":1593},15,[804,1595,894],{"emptyLinePlaceholder":223},[804,1597,1599,1602],{"class":806,"line":1598},16,[804,1600,1601],{"class":810},"    return",[804,1603,1604],{"class":1137}," (\n",[804,1606,1608,1610,1612,1615,1618,1621,1623,1625,1627,1629,1631,1633],{"class":806,"line":1607},17,[804,1609,1353],{"class":814},[804,1611,1322],{"class":818},[804,1613,1614],{"class":818}," className",[804,1616,1617],{"class":814},"={",[804,1619,1620],{"class":818},"classes",[804,1622,877],{"class":814},[804,1624,1337],{"class":818},[804,1626,907],{"class":814},[804,1628,1149],{"class":814},[804,1630,1344],{"class":831},[804,1632,1149],{"class":814},[804,1634,1156],{"class":814},[804,1636,1638,1641,1644],{"class":806,"line":1637},18,[804,1639,1640],{"class":814},"            {",[804,1642,1643],{"class":1516},"children",[804,1645,1494],{"class":814},[804,1647,1649,1652,1654],{"class":806,"line":1648},19,[804,1650,1651],{"class":814},"        \u003C\u002F",[804,1653,1322],{"class":818},[804,1655,1156],{"class":814},[804,1657,1659,1662],{"class":806,"line":1658},20,[804,1660,1661],{"class":1137},"    )",[804,1663,838],{"class":814},[804,1665,1667],{"class":806,"line":1666},21,[804,1668,1494],{"class":814},[1120,1670,1671,1677,1756],{"v-slot:other":800},[692,1672,694,1673,1676],{},[705,1674,1675],{},"radioGroup()"," runtime returns a class string. Apply it however your framework binds classes:",[795,1678,1681],{"className":797,"code":1679,"filename":1680,"language":799,"meta":800,"style":800},"import { radioGroup } from \"virtual:styleframe\";\n\nconst classes = radioGroup({ orientation: \"vertical\", size: \"md\" });\n\u002F\u002F → \"radio-group _display:flex _flex-direction:column _gap:0.75 ...\"\n","src\u002Fcomponents\u002Fradio-group.ts",[705,1682,1683,1703,1707,1750],{"__ignoreMap":800},[804,1684,1685,1687,1689,1691,1693,1695,1697,1699,1701],{"class":806,"line":807},[804,1686,811],{"class":810},[804,1688,815],{"class":814},[804,1690,1165],{"class":818},[804,1692,822],{"class":814},[804,1694,825],{"class":810},[804,1696,1172],{"class":814},[804,1698,832],{"class":831},[804,1700,1149],{"class":814},[804,1702,838],{"class":814},[804,1704,1705],{"class":806,"line":841},[804,1706,894],{"emptyLinePlaceholder":223},[804,1708,1709,1711,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746,1748],{"class":806,"line":849},[804,1710,901],{"class":900},[804,1712,1713],{"class":818}," classes ",[804,1715,907],{"class":814},[804,1717,1165],{"class":910},[804,1719,1573],{"class":818},[804,1721,1576],{"class":814},[804,1723,1579],{"class":1137},[804,1725,1115],{"class":814},[804,1727,1172],{"class":814},[804,1729,1198],{"class":831},[804,1731,1149],{"class":814},[804,1733,1029],{"class":814},[804,1735,1584],{"class":1137},[804,1737,1115],{"class":814},[804,1739,1172],{"class":814},[804,1741,1212],{"class":831},[804,1743,1149],{"class":814},[804,1745,822],{"class":814},[804,1747,1556],{"class":818},[804,1749,838],{"class":814},[804,1751,1752],{"class":806,"line":858},[804,1753,1755],{"class":1754},"sHwdD","\u002F\u002F → \"radio-group _display:flex _flex-direction:column _gap:0.75 ...\"\n",[795,1757,1762],{"className":1758,"code":1759,"filename":1760,"language":1761,"meta":800,"style":800},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"radio-group _display:flex _flex-direction:column ...\" role=\"radiogroup\">\n    \u003Clabel class=\"radio ...\">\u003Cinput type=\"radio\" name=\"plan\" class=\"radio-field ...\" \u002F>\u003Cspan>Free\u003C\u002Fspan>\u003C\u002Flabel>\n    \u003Clabel class=\"radio ...\">\u003Cinput type=\"radio\" name=\"plan\" class=\"radio-field ...\" \u002F>\u003Cspan>Pro\u003C\u002Fspan>\u003C\u002Flabel>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fradio-group.html","html",[705,1763,1764,1794,1875,1944],{"__ignoreMap":800},[804,1765,1766,1768,1770,1773,1775,1777,1780,1782,1784,1786,1788,1790,1792],{"class":806,"line":807},[804,1767,1134],{"class":814},[804,1769,1322],{"class":1137},[804,1771,1772],{"class":900}," class",[804,1774,907],{"class":814},[804,1776,1149],{"class":814},[804,1778,1779],{"class":831},"radio-group _display:flex _flex-direction:column ...",[804,1781,1149],{"class":814},[804,1783,1337],{"class":900},[804,1785,907],{"class":814},[804,1787,1149],{"class":814},[804,1789,1344],{"class":831},[804,1791,1149],{"class":814},[804,1793,1156],{"class":814},[804,1795,1796,1798,1801,1803,1805,1807,1810,1812,1815,1818,1821,1823,1825,1828,1830,1833,1835,1837,1840,1842,1844,1846,1848,1851,1853,1856,1858,1861,1864,1866,1868,1871,1873],{"class":806,"line":841},[804,1797,1319],{"class":814},[804,1799,1800],{"class":1137},"label",[804,1802,1772],{"class":900},[804,1804,907],{"class":814},[804,1806,1149],{"class":814},[804,1808,1809],{"class":831},"radio ...",[804,1811,1149],{"class":814},[804,1813,1814],{"class":814},">\u003C",[804,1816,1817],{"class":1137},"input",[804,1819,1820],{"class":900}," type",[804,1822,907],{"class":814},[804,1824,1149],{"class":814},[804,1826,1827],{"class":831},"radio",[804,1829,1149],{"class":814},[804,1831,1832],{"class":900}," name",[804,1834,907],{"class":814},[804,1836,1149],{"class":814},[804,1838,1839],{"class":831},"plan",[804,1841,1149],{"class":814},[804,1843,1772],{"class":900},[804,1845,907],{"class":814},[804,1847,1149],{"class":814},[804,1849,1850],{"class":831},"radio-field ...",[804,1852,1149],{"class":814},[804,1854,1855],{"class":814}," \u002F>\u003C",[804,1857,804],{"class":1137},[804,1859,1860],{"class":814},">",[804,1862,1863],{"class":818},"Free",[804,1865,1298],{"class":814},[804,1867,804],{"class":1137},[804,1869,1870],{"class":814},">\u003C\u002F",[804,1872,1800],{"class":1137},[804,1874,1156],{"class":814},[804,1876,1877,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915,1917,1919,1921,1923,1925,1927,1929,1931,1934,1936,1938,1940,1942],{"class":806,"line":849},[804,1878,1319],{"class":814},[804,1880,1800],{"class":1137},[804,1882,1772],{"class":900},[804,1884,907],{"class":814},[804,1886,1149],{"class":814},[804,1888,1809],{"class":831},[804,1890,1149],{"class":814},[804,1892,1814],{"class":814},[804,1894,1817],{"class":1137},[804,1896,1820],{"class":900},[804,1898,907],{"class":814},[804,1900,1149],{"class":814},[804,1902,1827],{"class":831},[804,1904,1149],{"class":814},[804,1906,1832],{"class":900},[804,1908,907],{"class":814},[804,1910,1149],{"class":814},[804,1912,1839],{"class":831},[804,1914,1149],{"class":814},[804,1916,1772],{"class":900},[804,1918,907],{"class":814},[804,1920,1149],{"class":814},[804,1922,1850],{"class":831},[804,1924,1149],{"class":814},[804,1926,1855],{"class":814},[804,1928,804],{"class":1137},[804,1930,1860],{"class":814},[804,1932,1933],{"class":818},"Pro",[804,1935,1298],{"class":814},[804,1937,804],{"class":1137},[804,1939,1870],{"class":814},[804,1941,1800],{"class":1137},[804,1943,1156],{"class":814},[804,1945,1946,1948,1950],{"class":806,"line":858},[804,1947,1298],{"class":814},[804,1949,1322],{"class":1137},[804,1951,1156],{"class":814},[779,1953,1955],{"id":1954},"see-it-in-action","See it in action",[1957,1958],"story-preview",{"story":1959,":panel":1960},"theme-recipes-forms-radio-group--default","true",[688,1962,1964],{"id":1963},"orientation","Orientation",[692,1966,1967],{},"The Radio Group supports two orientation variants that control the layout direction.",[1969,1970,1971],"h3",{"id":1198},"Vertical",[692,1973,1974],{},"The default orientation. Radios are stacked top-to-bottom in a column — the most common layout for option lists.",[1957,1976],{"story":1977,":panel":1960},"theme-recipes-forms-radio-group--vertical",[1969,1979,1980],{"id":1247},"Horizontal",[692,1982,1983],{},"Radios are laid out left-to-right in a wrapping row, aligned to the center. Useful for short option sets that fit inline.",[1957,1985],{"story":1986,":panel":1960},"theme-recipes-forms-radio-group--horizontal",[1969,1988,1990],{"id":1989},"orientation-reference","Orientation Reference",[1957,1992],{"story":1993},"theme-recipes-forms-radio-group--all-orientations",[1995,1996,1997,2012],"table",{},[1998,1999,2000],"thead",{},[2001,2002,2003,2006,2009],"tr",{},[2004,2005,1964],"th",{},[2004,2007,2008],{},"Direction",[2004,2010,2011],{},"Notes",[2013,2014,2015,2031],"tbody",{},[2001,2016,2017,2022,2028],{},[2018,2019,2020],"td",{},[705,2021,1198],{},[2018,2023,2024,2025,1556],{},"Top to bottom (",[705,2026,2027],{},"column",[2018,2029,2030],{},"Default; one option per line",[2001,2032,2033,2037,2044],{},[2018,2034,2035],{},[705,2036,1247],{},[2018,2038,2039,2040,2043],{},"Left to right (",[705,2041,2042],{},"row",", wraps)",[2018,2045,2046],{},"Center-aligned, wraps to the next line when out of space",[688,2048,2050],{"id":2049},"sizes","Sizes",[692,2052,2053,2054,2057],{},"Three size variants control the gap between radios, letting you tighten or loosen a group to match its surroundings. Set the same ",[705,2055,2056],{},"size"," on each child radio so the controls and the spacing scale together.",[1995,2059,2060,2070],{},[1998,2061,2062],{},[2001,2063,2064,2067],{},[2004,2065,2066],{},"Size",[2004,2068,2069],{},"Gap",[2013,2071,2072,2083,2094],{},[2001,2073,2074,2078],{},[2018,2075,2076],{},[705,2077,1263],{},[2018,2079,2080],{},[705,2081,2082],{},"@0.5",[2001,2084,2085,2089],{},[2018,2086,2087],{},[705,2088,1212],{},[2018,2090,2091],{},[705,2092,2093],{},"@0.75",[2001,2095,2096,2100],{},[2018,2097,2098],{},[705,2099,1280],{},[2018,2101,2102],{},[705,2103,2104],{},"@1",[2106,2107,2108,2111,2112,2114,2115,2117,2118,2121],"note",{},[696,2109,2110],{},"Good to know:"," The group's ",[705,2113,2056],{}," controls only the gap between items. Pass the same ",[705,2116,2056],{}," to each child ",[705,2119,2120],{},"\u003CRadio>"," so the circles and the spacing scale as a set.",[688,2123,568],{"id":2124},"accessibility",[743,2126,2127,2144,2156,2169],{},[746,2128,2129,2132,2133,2135,2136,2139,2140,2143],{},[696,2130,2131],{},"Mark the group."," Wrap the radios in an element with ",[705,2134,722],{}," and an ",[705,2137,2138],{},"aria-label"," (or ",[705,2141,2142],{},"aria-labelledby",") describing the set, so assistive technology announces the context.",[746,2145,2146,2152,2153,2155],{},[696,2147,2148,2149,2151],{},"Share a ",[705,2150,718],{}," across children."," Single selection and arrow-key navigation come from giving every child radio the same ",[705,2154,718],{},". The group recipe only handles layout.",[746,2157,2158,2161,2162,2164,2165,2168],{},[696,2159,2160],{},"Prefer a fieldset for forms."," When the group is part of a form, a native ",[705,2163,726],{}," with a ",[705,2166,2167],{},"\u003Clegend>"," is the most robust grouping — apply the recipe class to the fieldset.",[746,2170,2171,2174,2175,2177],{},[696,2172,2173],{},"Keep each radio labelled."," The group provides layout only; every child still needs its own label (see the ",[700,2176,460],{"href":461}," recipe).",[688,2179,2181],{"id":2180},"customization","Customization",[1969,2183,2185],{"id":2184},"overriding-defaults","Overriding Defaults",[692,2187,694,2188,2190],{},[705,2189,707],{}," composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[795,2192,2194],{"className":797,"code":2193,"filename":793,"language":799,"meta":800,"style":800},"import { styleframe } from 'virtual:styleframe';\nimport { useRadioGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst radioGroup = useRadioGroupRecipe(s, {\n    defaultVariants: {\n        orientation: 'horizontal',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[705,2195,2196,2216,2236,2240,2254,2258,2275,2284,2299,2314,2319,2327,2331],{"__ignoreMap":800},[804,2197,2198,2200,2202,2204,2206,2208,2210,2212,2214],{"class":806,"line":807},[804,2199,811],{"class":810},[804,2201,815],{"class":814},[804,2203,819],{"class":818},[804,2205,822],{"class":814},[804,2207,825],{"class":810},[804,2209,828],{"class":814},[804,2211,832],{"class":831},[804,2213,835],{"class":814},[804,2215,838],{"class":814},[804,2217,2218,2220,2222,2224,2226,2228,2230,2232,2234],{"class":806,"line":841},[804,2219,811],{"class":810},[804,2221,815],{"class":814},[804,2223,968],{"class":818},[804,2225,822],{"class":814},[804,2227,825],{"class":810},[804,2229,828],{"class":814},[804,2231,884],{"class":831},[804,2233,835],{"class":814},[804,2235,838],{"class":814},[804,2237,2238],{"class":806,"line":849},[804,2239,894],{"emptyLinePlaceholder":223},[804,2241,2242,2244,2246,2248,2250,2252],{"class":806,"line":858},[804,2243,901],{"class":900},[804,2245,904],{"class":818},[804,2247,907],{"class":814},[804,2249,819],{"class":910},[804,2251,913],{"class":818},[804,2253,838],{"class":814},[804,2255,2256],{"class":806,"line":866},[804,2257,894],{"emptyLinePlaceholder":223},[804,2259,2260,2262,2264,2266,2268,2271,2273],{"class":806,"line":874},[804,2261,901],{"class":900},[804,2263,963],{"class":818},[804,2265,907],{"class":814},[804,2267,968],{"class":910},[804,2269,2270],{"class":818},"(s",[804,2272,1029],{"class":814},[804,2274,846],{"class":814},[804,2276,2277,2280,2282],{"class":806,"line":891},[804,2278,2279],{"class":1137},"    defaultVariants",[804,2281,1115],{"class":814},[804,2283,846],{"class":814},[804,2285,2286,2289,2291,2293,2295,2297],{"class":806,"line":897},[804,2287,2288],{"class":1137},"        orientation",[804,2290,1115],{"class":814},[804,2292,828],{"class":814},[804,2294,1247],{"class":831},[804,2296,835],{"class":814},[804,2298,855],{"class":814},[804,2300,2301,2304,2306,2308,2310,2312],{"class":806,"line":918},[804,2302,2303],{"class":1137},"        size",[804,2305,1115],{"class":814},[804,2307,828],{"class":814},[804,2309,1280],{"class":831},[804,2311,835],{"class":814},[804,2313,855],{"class":814},[804,2315,2316],{"class":806,"line":923},[804,2317,2318],{"class":814},"    },\n",[804,2320,2321,2323,2325],{"class":806,"line":941},[804,2322,877],{"class":814},[804,2324,1556],{"class":818},[804,2326,838],{"class":814},[804,2328,2329],{"class":806,"line":958},[804,2330,894],{"emptyLinePlaceholder":223},[804,2332,2333,2335,2337,2339],{"class":806,"line":975},[804,2334,983],{"class":810},[804,2336,986],{"class":810},[804,2338,989],{"class":818},[804,2340,838],{"class":814},[1969,2342,2344],{"id":2343},"filtering-variants","Filtering Variants",[692,2346,2347,2348,2351],{},"If you only need a subset of the available variants, use the ",[705,2349,2350],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[795,2353,2355],{"className":797,"code":2354,"filename":793,"language":799,"meta":800,"style":800},"import { styleframe } from 'virtual:styleframe';\nimport { useRadioGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the vertical orientation\nconst radioGroup = useRadioGroupRecipe(s, {\n    filter: {\n        orientation: ['vertical'],\n    },\n});\n\nexport default s;\n",[705,2356,2357,2377,2397,2401,2415,2419,2424,2440,2449,2469,2473,2481,2485],{"__ignoreMap":800},[804,2358,2359,2361,2363,2365,2367,2369,2371,2373,2375],{"class":806,"line":807},[804,2360,811],{"class":810},[804,2362,815],{"class":814},[804,2364,819],{"class":818},[804,2366,822],{"class":814},[804,2368,825],{"class":810},[804,2370,828],{"class":814},[804,2372,832],{"class":831},[804,2374,835],{"class":814},[804,2376,838],{"class":814},[804,2378,2379,2381,2383,2385,2387,2389,2391,2393,2395],{"class":806,"line":841},[804,2380,811],{"class":810},[804,2382,815],{"class":814},[804,2384,968],{"class":818},[804,2386,822],{"class":814},[804,2388,825],{"class":810},[804,2390,828],{"class":814},[804,2392,884],{"class":831},[804,2394,835],{"class":814},[804,2396,838],{"class":814},[804,2398,2399],{"class":806,"line":849},[804,2400,894],{"emptyLinePlaceholder":223},[804,2402,2403,2405,2407,2409,2411,2413],{"class":806,"line":858},[804,2404,901],{"class":900},[804,2406,904],{"class":818},[804,2408,907],{"class":814},[804,2410,819],{"class":910},[804,2412,913],{"class":818},[804,2414,838],{"class":814},[804,2416,2417],{"class":806,"line":866},[804,2418,894],{"emptyLinePlaceholder":223},[804,2420,2421],{"class":806,"line":874},[804,2422,2423],{"class":1754},"\u002F\u002F Only generate the vertical orientation\n",[804,2425,2426,2428,2430,2432,2434,2436,2438],{"class":806,"line":891},[804,2427,901],{"class":900},[804,2429,963],{"class":818},[804,2431,907],{"class":814},[804,2433,968],{"class":910},[804,2435,2270],{"class":818},[804,2437,1029],{"class":814},[804,2439,846],{"class":814},[804,2441,2442,2445,2447],{"class":806,"line":897},[804,2443,2444],{"class":1137},"    filter",[804,2446,1115],{"class":814},[804,2448,846],{"class":814},[804,2450,2451,2453,2455,2458,2460,2462,2464,2467],{"class":806,"line":918},[804,2452,2288],{"class":1137},[804,2454,1115],{"class":814},[804,2456,2457],{"class":818}," [",[804,2459,835],{"class":814},[804,2461,1198],{"class":831},[804,2463,835],{"class":814},[804,2465,2466],{"class":818},"]",[804,2468,855],{"class":814},[804,2470,2471],{"class":806,"line":923},[804,2472,2318],{"class":814},[804,2474,2475,2477,2479],{"class":806,"line":941},[804,2476,877],{"class":814},[804,2478,1556],{"class":818},[804,2480,838],{"class":814},[804,2482,2483],{"class":806,"line":958},[804,2484,894],{"emptyLinePlaceholder":223},[804,2486,2487,2489,2491,2493],{"class":806,"line":975},[804,2488,983],{"class":810},[804,2490,986],{"class":810},[804,2492,989],{"class":818},[804,2494,838],{"class":814},[2106,2496,2497,2499],{},[696,2498,2110],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2501,73],{"id":2502},"api-reference",[1969,2504,2506],{"id":2505},"useradiogrouprecipes-options",[705,2507,2508],{},"useRadioGroupRecipe(s, options?)",[692,2510,2511],{},"Creates a radio group recipe — a flex container with orientation and size (gap) variants.",[692,2513,2514],{},[696,2515,2516],{},"Parameters:",[1995,2518,2519,2532],{},[1998,2520,2521],{},[2001,2522,2523,2526,2529],{},[2004,2524,2525],{},"Parameter",[2004,2527,2528],{},"Type",[2004,2530,2531],{},"Description",[2013,2533,2534,2549,2564,2579,2594,2609],{},[2001,2535,2536,2541,2546],{},[2018,2537,2538],{},[705,2539,2540],{},"s",[2018,2542,2543],{},[705,2544,2545],{},"Styleframe",[2018,2547,2548],{},"The Styleframe instance",[2001,2550,2551,2556,2561],{},[2018,2552,2553],{},[705,2554,2555],{},"options",[2018,2557,2558],{},[705,2559,2560],{},"DeepPartial\u003CRecipeConfig>",[2018,2562,2563],{},"Optional overrides for the recipe configuration",[2001,2565,2566,2571,2576],{},[2018,2567,2568],{},[705,2569,2570],{},"options.base",[2018,2572,2573],{},[705,2574,2575],{},"VariantDeclarationsBlock",[2018,2577,2578],{},"Custom base styles for the group",[2001,2580,2581,2586,2591],{},[2018,2582,2583],{},[705,2584,2585],{},"options.variants",[2018,2587,2588],{},[705,2589,2590],{},"Variants",[2018,2592,2593],{},"Custom variant definitions for the recipe",[2001,2595,2596,2601,2606],{},[2018,2597,2598],{},[705,2599,2600],{},"options.defaultVariants",[2018,2602,2603],{},[705,2604,2605],{},"Record\u003Ckeyof Variants, string>",[2018,2607,2608],{},"Default variant values for the recipe",[2001,2610,2611,2616,2621],{},[2018,2612,2613],{},[705,2614,2615],{},"options.filter",[2018,2617,2618],{},[705,2619,2620],{},"Record\u003Cstring, string[]>",[2018,2622,2623],{},"Limit which variant values are generated",[692,2625,2626],{},[696,2627,2628],{},"Variants:",[1995,2630,2631,2644],{},[1998,2632,2633],{},[2001,2634,2635,2638,2641],{},[2004,2636,2637],{},"Variant",[2004,2639,2640],{},"Options",[2004,2642,2643],{},"Default",[2013,2645,2646,2663],{},[2001,2647,2648,2652,2659],{},[2018,2649,2650],{},[705,2651,1963],{},[2018,2653,2654,2656,2657],{},[705,2655,1198],{},", ",[705,2658,1247],{},[2018,2660,2661],{},[705,2662,1198],{},[2001,2664,2665,2669,2677],{},[2018,2666,2667],{},[705,2668,2056],{},[2018,2670,2671,2656,2673,2656,2675],{},[705,2672,1263],{},[705,2674,1212],{},[705,2676,1280],{},[2018,2678,2679],{},[705,2680,1212],{},[692,2682,2683],{},[700,2684,2685],{"href":132},"Learn more about recipes →",[688,2687,2689],{"id":2688},"best-practices","Best Practices",[743,2691,2692,2701,2711,2720,2726],{},[746,2693,2694,2697,2698,2700],{},[696,2695,2696],{},"Pair with the Radio recipe",": The group handles layout; each child should use the ",[700,2699,460],{"href":461}," recipe for consistent controls.",[746,2702,2703,2707,2708,2710],{},[696,2704,2148,2705],{},[705,2706,718],{},": Give every child radio the same ",[705,2709,718],{}," so the set behaves as one mutually-exclusive group.",[746,2712,2713,2716,2717,2719],{},[696,2714,2715],{},"Match sizes",": Use the same ",[705,2718,2056],{}," on the group and its child radios so spacing and circles scale together.",[746,2721,2722,2725],{},[696,2723,2724],{},"Keep groups scannable",": Prefer vertical layout for longer option lists; reserve horizontal for two or three short options.",[746,2727,2728,2731,2732,2734,2735,2737],{},[696,2729,2730],{},"Label the set",": Always describe the group's purpose with ",[705,2733,2138],{}," or a ",[705,2736,2167],{}," so screen readers communicate the relationship between options.",[688,2739,2741],{"id":2740},"faq","FAQ",[2743,2744,2745,2757,2767,2780],"accordion",{},[2746,2747,2750,2751,2753,2754,2756],"accordion-item",{"icon":2748,"label":2749},"i-lucide-circle-help","Does the group make its radios mutually exclusive?","No — the group is a pure layout container that sets the flex direction and the gap between items. Single selection comes from the native input: give every child radio the same ",[705,2752,718],{}," and the browser enforces one choice per group. Pass the same ",[705,2755,2056],{}," to the group and its children if you want the spacing and the circles to scale together.",[2746,2758,2760,2761,2763,2764,2766],{"icon":2748,"label":2759},"When should I use horizontal orientation?","Use ",[705,2762,1247],{}," for short sets of two or three options that read well inline. It lays the radios out in a centered, wrapping row. For longer option lists, the default ",[705,2765,1198],{}," orientation is easier to scan.",[2746,2768,2770,2771,2773,2774,2776,2777,2779],{"icon":2748,"label":2769},"Can I use a fieldset instead of a div?","Yes, and it's recommended inside forms. Apply the ",[705,2772,1675],{}," class to a native ",[705,2775,726],{}," and add a ",[705,2778,2167],{}," for the group name. The recipe only sets layout properties, so it works on any block-level element.",[2746,2781,2783,2784,2786],{"icon":2748,"label":2782},"How does filtering affect the recipe?","When you use the ",[705,2785,2350],{}," option, variant values you exclude are not generated, and default variants are adjusted if they reference a removed value — so the recipe stays consistent and only emits the CSS you use.",[2788,2789,2790],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":800,"searchDepth":841,"depth":841,"links":2792},[2793,2794,2795,2796,2801,2802,2803,2807,2810,2811],{"id":690,"depth":841,"text":78},{"id":737,"depth":841,"text":738},{"id":772,"depth":841,"text":773},{"id":1963,"depth":841,"text":1964,"children":2797},[2798,2799,2800],{"id":1198,"depth":849,"text":1971},{"id":1247,"depth":849,"text":1980},{"id":1989,"depth":849,"text":1990},{"id":2049,"depth":841,"text":2050},{"id":2124,"depth":841,"text":568},{"id":2180,"depth":841,"text":2181,"children":2804},[2805,2806],{"id":2184,"depth":849,"text":2185},{"id":2343,"depth":849,"text":2344},{"id":2502,"depth":841,"text":73,"children":2808},[2809],{"id":2505,"depth":849,"text":2508},{"id":2688,"depth":841,"text":2689},{"id":2740,"depth":841,"text":2741},"A layout component for arranging a set of radios with shared orientation and spacing. Supports vertical and horizontal layouts and three gap sizes through the recipe system.",null,{},{"icon":7},{"title":464,"description":2812},"eK4W0mK5iwb-sSeG0rjsKmG2jmjb-nqOFR0OQnBVfHo",[2819,2821],{"title":460,"path":461,"stem":462,"description":2820,"icon":7,"children":-1},"A custom radio built on the native input, with a CSS dot indicator, checked, disabled, and focus states, light, dark, and neutral surface colors, and three sizes through the recipe system.",{"title":468,"path":469,"stem":470,"description":2822,"icon":7,"children":-1},"A multi-select form control composed of a trigger, a floating listbox panel, selectable options, dismissable value chips, a chevron indicator, group labels, and separators. Supports light, dark, and neutral colors, per-part visual styles, and three sizes through the recipe system.",1781596340707]