[{"data":1,"prerenderedAt":2765},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-checkbox-group":682,"-docs-theme-components-checkbox-group-surround":2760},{"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":440,"body":684,"description":2754,"extension":1191,"links":2755,"meta":2756,"navigation":2757,"path":441,"seo":2758,"stem":442,"__hash__":2759},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group.md",{"type":685,"value":686,"toc":2733},"minimark",[687,691,713,720,724,727,755,759,1919,1923,1926,1930,1933,1936,1939,1942,1945,1949,1952,2005,2009,2016,2063,2080,2083,2126,2130,2134,2139,2289,2293,2300,2443,2448,2451,2457,2460,2465,2572,2577,2629,2634,2638,2676,2680,2729],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,708,709,712],"p",{},"The ",[696,697,440],"strong",{}," is a layout component that arranges related ",[700,701,702],"a",{"href":437},"checkboxes"," into a single, consistently spaced set. The ",[705,706,707],"code",{},"useCheckboxGroupRecipe()"," composable creates a fully configured ",[700,710,711],{"href":132},"recipe"," with orientation and size options — a flex container that stacks checkboxes vertically or lays them out in a wrapping row.",[692,714,715,716,719],{},"The Checkbox Group recipe integrates directly with the ",[700,717,718],{"href":437},"Checkbox recipe"," and generates type-safe utility classes at build time with zero runtime CSS.",[688,721,723],{"id":722},"why-use-the-checkbox-group-recipe","Why use the Checkbox Group recipe?",[692,725,726],{},"The Checkbox Group recipe helps you:",[728,729,730,737,743,749],"ul",{},[731,732,733,736],"li",{},[696,734,735],{},"Lay out sets consistently",": Stack checkboxes vertically or wrap them in a row with a single orientation prop.",[731,738,739,742],{},[696,740,741],{},"Control spacing with one axis",": The size variant sets the gap between items, so a whole group scales together.",[731,744,745,748],{},[696,746,747],{},"Compose, don't couple",": The group only handles layout; each child checkbox keeps its own color, size, and state.",[731,750,751,754],{},[696,752,753],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid orientation or size values at compile time.",[688,756,758],{"id":757},"usage","Usage",[760,761,763,768,775,1084,1088,1095,1910,1914],"steps",{"level":762},"4",[764,765,767],"h4",{"id":766},"register-the-recipe","Register the recipe",[692,769,770,771,774],{},"Add the Checkbox Group recipe to a local Styleframe instance alongside the checkbox recipes. The global ",[705,772,773],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[776,777,779,977],"code-tree",{"default-value":778},"src\u002Fcomponents\u002Fcheckbox-group.styleframe.ts",[780,781,786],"pre",{"className":782,"code":783,"filename":778,"language":784,"meta":785,"style":785},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useCheckboxRecipe,\n    useCheckboxFieldRecipe,\n    useCheckboxGroupRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst checkbox = useCheckboxRecipe(s);\nconst checkboxField = useCheckboxFieldRecipe(s);\nconst checkboxGroup = useCheckboxGroupRecipe(s);\n\nexport default s;\n","ts","",[705,787,788,824,832,841,849,857,874,880,901,906,924,941,958,963],{"__ignoreMap":785},[789,790,793,797,801,805,808,811,814,818,821],"span",{"class":791,"line":792},"line",1,[789,794,796],{"class":795},"s7zQu","import",[789,798,800],{"class":799},"sMK4o"," {",[789,802,804],{"class":803},"sTEyZ"," styleframe",[789,806,807],{"class":799}," }",[789,809,810],{"class":795}," from",[789,812,813],{"class":799}," '",[789,815,817],{"class":816},"sfazB","virtual:styleframe",[789,819,820],{"class":799},"'",[789,822,823],{"class":799},";\n",[789,825,827,829],{"class":791,"line":826},2,[789,828,796],{"class":795},[789,830,831],{"class":799}," {\n",[789,833,835,838],{"class":791,"line":834},3,[789,836,837],{"class":803},"    useCheckboxRecipe",[789,839,840],{"class":799},",\n",[789,842,844,847],{"class":791,"line":843},4,[789,845,846],{"class":803},"    useCheckboxFieldRecipe",[789,848,840],{"class":799},[789,850,852,855],{"class":791,"line":851},5,[789,853,854],{"class":803},"    useCheckboxGroupRecipe",[789,856,840],{"class":799},[789,858,860,863,865,867,870,872],{"class":791,"line":859},6,[789,861,862],{"class":799},"}",[789,864,810],{"class":795},[789,866,813],{"class":799},[789,868,869],{"class":816},"@styleframe\u002Ftheme",[789,871,820],{"class":799},[789,873,823],{"class":799},[789,875,877],{"class":791,"line":876},7,[789,878,879],{"emptyLinePlaceholder":223},"\n",[789,881,883,887,890,893,896,899],{"class":791,"line":882},8,[789,884,886],{"class":885},"spNyl","const",[789,888,889],{"class":803}," s ",[789,891,892],{"class":799},"=",[789,894,804],{"class":895},"s2Zo4",[789,897,898],{"class":803},"()",[789,900,823],{"class":799},[789,902,904],{"class":791,"line":903},9,[789,905,879],{"emptyLinePlaceholder":223},[789,907,909,911,914,916,919,922],{"class":791,"line":908},10,[789,910,886],{"class":885},[789,912,913],{"class":803}," checkbox ",[789,915,892],{"class":799},[789,917,918],{"class":895}," useCheckboxRecipe",[789,920,921],{"class":803},"(s)",[789,923,823],{"class":799},[789,925,927,929,932,934,937,939],{"class":791,"line":926},11,[789,928,886],{"class":885},[789,930,931],{"class":803}," checkboxField ",[789,933,892],{"class":799},[789,935,936],{"class":895}," useCheckboxFieldRecipe",[789,938,921],{"class":803},[789,940,823],{"class":799},[789,942,944,946,949,951,954,956],{"class":791,"line":943},12,[789,945,886],{"class":885},[789,947,948],{"class":803}," checkboxGroup ",[789,950,892],{"class":799},[789,952,953],{"class":895}," useCheckboxGroupRecipe",[789,955,921],{"class":803},[789,957,823],{"class":799},[789,959,961],{"class":791,"line":960},13,[789,962,879],{"emptyLinePlaceholder":223},[789,964,966,969,972,975],{"class":791,"line":965},14,[789,967,968],{"class":795},"export",[789,970,971],{"class":795}," default",[789,973,974],{"class":803}," s",[789,976,823],{"class":799},[780,978,980],{"className":782,"code":979,"filename":773,"language":784,"meta":785,"style":785},"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,981,982,1003,1030,1034,1048,1052,1061,1070,1074],{"__ignoreMap":785},[789,983,984,986,988,990,992,994,996,999,1001],{"class":791,"line":792},[789,985,796],{"class":795},[789,987,800],{"class":799},[789,989,804],{"class":803},[789,991,807],{"class":799},[789,993,810],{"class":795},[789,995,813],{"class":799},[789,997,998],{"class":816},"styleframe",[789,1000,820],{"class":799},[789,1002,823],{"class":799},[789,1004,1005,1007,1009,1012,1015,1018,1020,1022,1024,1026,1028],{"class":791,"line":826},[789,1006,796],{"class":795},[789,1008,800],{"class":799},[789,1010,1011],{"class":803}," useDesignTokensPreset",[789,1013,1014],{"class":799},",",[789,1016,1017],{"class":803}," useUtilitiesPreset",[789,1019,807],{"class":799},[789,1021,810],{"class":795},[789,1023,813],{"class":799},[789,1025,869],{"class":816},[789,1027,820],{"class":799},[789,1029,823],{"class":799},[789,1031,1032],{"class":791,"line":834},[789,1033,879],{"emptyLinePlaceholder":223},[789,1035,1036,1038,1040,1042,1044,1046],{"class":791,"line":843},[789,1037,886],{"class":885},[789,1039,889],{"class":803},[789,1041,892],{"class":799},[789,1043,804],{"class":895},[789,1045,898],{"class":803},[789,1047,823],{"class":799},[789,1049,1050],{"class":791,"line":851},[789,1051,879],{"emptyLinePlaceholder":223},[789,1053,1054,1057,1059],{"class":791,"line":859},[789,1055,1056],{"class":895},"useDesignTokensPreset",[789,1058,921],{"class":803},[789,1060,823],{"class":799},[789,1062,1063,1066,1068],{"class":791,"line":876},[789,1064,1065],{"class":895},"useUtilitiesPreset",[789,1067,921],{"class":803},[789,1069,823],{"class":799},[789,1071,1072],{"class":791,"line":882},[789,1073,879],{"emptyLinePlaceholder":223},[789,1075,1076,1078,1080,1082],{"class":791,"line":903},[789,1077,968],{"class":795},[789,1079,971],{"class":795},[789,1081,974],{"class":803},[789,1083,823],{"class":799},[764,1085,1087],{"id":1086},"build-the-component","Build the component",[692,1089,1090,1091,1094],{},"Import the ",[705,1092,1093],{},"checkboxGroup"," runtime function from the virtual module and wrap your checkboxes in the container:",[1096,1097,1098,1356,1648],"framework-switcher",{},[1099,1100,1101],"template",{"v-slot:vue":785},[780,1102,1107],{"className":1103,"code":1104,"filename":1105,"language":1106,"meta":785,"style":785},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { checkboxGroup } 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=\"checkboxGroup({ orientation, size })\" role=\"group\">\n        \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FCheckboxGroup.vue","vue",[705,1108,1109,1136,1158,1162,1205,1231,1264,1273,1282,1286,1294,1328,1339,1348],{"__ignoreMap":785},[789,1110,1111,1114,1118,1121,1124,1126,1129,1131,1133],{"class":791,"line":792},[789,1112,1113],{"class":799},"\u003C",[789,1115,1117],{"class":1116},"swJcz","script",[789,1119,1120],{"class":885}," setup",[789,1122,1123],{"class":885}," lang",[789,1125,892],{"class":799},[789,1127,1128],{"class":799},"\"",[789,1130,784],{"class":816},[789,1132,1128],{"class":799},[789,1134,1135],{"class":799},">\n",[789,1137,1138,1140,1142,1145,1147,1149,1152,1154,1156],{"class":791,"line":826},[789,1139,796],{"class":795},[789,1141,800],{"class":799},[789,1143,1144],{"class":803}," checkboxGroup",[789,1146,807],{"class":799},[789,1148,810],{"class":795},[789,1150,1151],{"class":799}," \"",[789,1153,817],{"class":816},[789,1155,1128],{"class":799},[789,1157,823],{"class":799},[789,1159,1160],{"class":791,"line":834},[789,1161,879],{"emptyLinePlaceholder":223},[789,1163,1164,1166,1168,1171,1173,1175,1178,1180,1182,1185,1187,1189,1192,1194,1196,1199,1202],{"class":791,"line":843},[789,1165,886],{"class":885},[789,1167,800],{"class":799},[789,1169,1170],{"class":803}," orientation ",[789,1172,892],{"class":799},[789,1174,1151],{"class":799},[789,1176,1177],{"class":816},"vertical",[789,1179,1128],{"class":799},[789,1181,1014],{"class":799},[789,1183,1184],{"class":803}," size ",[789,1186,892],{"class":799},[789,1188,1151],{"class":799},[789,1190,1191],{"class":816},"md",[789,1193,1128],{"class":799},[789,1195,807],{"class":799},[789,1197,1198],{"class":799}," =",[789,1200,1201],{"class":895}," defineProps",[789,1203,1204],{"class":799},"\u003C{\n",[789,1206,1207,1210,1213,1215,1217,1219,1222,1224,1227,1229],{"class":791,"line":851},[789,1208,1209],{"class":1116},"    orientation",[789,1211,1212],{"class":799},"?:",[789,1214,1151],{"class":799},[789,1216,1177],{"class":816},[789,1218,1128],{"class":799},[789,1220,1221],{"class":799}," |",[789,1223,1151],{"class":799},[789,1225,1226],{"class":816},"horizontal",[789,1228,1128],{"class":799},[789,1230,823],{"class":799},[789,1232,1233,1236,1238,1240,1243,1245,1247,1249,1251,1253,1255,1257,1260,1262],{"class":791,"line":859},[789,1234,1235],{"class":1116},"    size",[789,1237,1212],{"class":799},[789,1239,1151],{"class":799},[789,1241,1242],{"class":816},"sm",[789,1244,1128],{"class":799},[789,1246,1221],{"class":799},[789,1248,1151],{"class":799},[789,1250,1191],{"class":816},[789,1252,1128],{"class":799},[789,1254,1221],{"class":799},[789,1256,1151],{"class":799},[789,1258,1259],{"class":816},"lg",[789,1261,1128],{"class":799},[789,1263,823],{"class":799},[789,1265,1266,1269,1271],{"class":791,"line":876},[789,1267,1268],{"class":799},"}>",[789,1270,898],{"class":803},[789,1272,823],{"class":799},[789,1274,1275,1278,1280],{"class":791,"line":882},[789,1276,1277],{"class":799},"\u003C\u002F",[789,1279,1117],{"class":1116},[789,1281,1135],{"class":799},[789,1283,1284],{"class":791,"line":903},[789,1285,879],{"emptyLinePlaceholder":223},[789,1287,1288,1290,1292],{"class":791,"line":908},[789,1289,1113],{"class":799},[789,1291,1099],{"class":1116},[789,1293,1135],{"class":799},[789,1295,1296,1299,1302,1305,1307,1309,1312,1314,1317,1319,1321,1324,1326],{"class":791,"line":926},[789,1297,1298],{"class":799},"    \u003C",[789,1300,1301],{"class":1116},"div",[789,1303,1304],{"class":885}," :class",[789,1306,892],{"class":799},[789,1308,1128],{"class":799},[789,1310,1311],{"class":816},"checkboxGroup({ orientation, size })",[789,1313,1128],{"class":799},[789,1315,1316],{"class":885}," role",[789,1318,892],{"class":799},[789,1320,1128],{"class":799},[789,1322,1323],{"class":816},"group",[789,1325,1128],{"class":799},[789,1327,1135],{"class":799},[789,1329,1330,1333,1336],{"class":791,"line":943},[789,1331,1332],{"class":799},"        \u003C",[789,1334,1335],{"class":1116},"slot",[789,1337,1338],{"class":799}," \u002F>\n",[789,1340,1341,1344,1346],{"class":791,"line":960},[789,1342,1343],{"class":799},"    \u003C\u002F",[789,1345,1301],{"class":1116},[789,1347,1135],{"class":799},[789,1349,1350,1352,1354],{"class":791,"line":965},[789,1351,1277],{"class":799},[789,1353,1099],{"class":1116},[789,1355,1135],{"class":799},[1099,1357,1358],{"v-slot:react":785},[780,1359,1362],{"className":782,"code":1360,"filename":1361,"language":784,"meta":785,"style":785},"import { checkboxGroup } from \"virtual:styleframe\";\n\ninterface CheckboxGroupProps {\n    orientation?: \"vertical\" | \"horizontal\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    children?: React.ReactNode;\n}\n\nexport function CheckboxGroup({\n    orientation = \"vertical\",\n    size = \"md\",\n    children,\n}: CheckboxGroupProps) {\n    const classes = checkboxGroup({ orientation, size });\n\n    return (\n        \u003Cdiv className={classes} role=\"group\">\n            {children}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FCheckboxGroup.tsx",[705,1363,1364,1384,1388,1399,1421,1451,1469,1474,1478,1491,1506,1520,1526,1538,1570,1575,1584,1614,1625,1635,1643],{"__ignoreMap":785},[789,1365,1366,1368,1370,1372,1374,1376,1378,1380,1382],{"class":791,"line":792},[789,1367,796],{"class":795},[789,1369,800],{"class":799},[789,1371,1144],{"class":803},[789,1373,807],{"class":799},[789,1375,810],{"class":795},[789,1377,1151],{"class":799},[789,1379,817],{"class":816},[789,1381,1128],{"class":799},[789,1383,823],{"class":799},[789,1385,1386],{"class":791,"line":826},[789,1387,879],{"emptyLinePlaceholder":223},[789,1389,1390,1393,1397],{"class":791,"line":834},[789,1391,1392],{"class":885},"interface",[789,1394,1396],{"class":1395},"sBMFI"," CheckboxGroupProps",[789,1398,831],{"class":799},[789,1400,1401,1403,1405,1407,1409,1411,1413,1415,1417,1419],{"class":791,"line":843},[789,1402,1209],{"class":1116},[789,1404,1212],{"class":799},[789,1406,1151],{"class":799},[789,1408,1177],{"class":816},[789,1410,1128],{"class":799},[789,1412,1221],{"class":799},[789,1414,1151],{"class":799},[789,1416,1226],{"class":816},[789,1418,1128],{"class":799},[789,1420,823],{"class":799},[789,1422,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449],{"class":791,"line":851},[789,1424,1235],{"class":1116},[789,1426,1212],{"class":799},[789,1428,1151],{"class":799},[789,1430,1242],{"class":816},[789,1432,1128],{"class":799},[789,1434,1221],{"class":799},[789,1436,1151],{"class":799},[789,1438,1191],{"class":816},[789,1440,1128],{"class":799},[789,1442,1221],{"class":799},[789,1444,1151],{"class":799},[789,1446,1259],{"class":816},[789,1448,1128],{"class":799},[789,1450,823],{"class":799},[789,1452,1453,1456,1458,1461,1464,1467],{"class":791,"line":859},[789,1454,1455],{"class":1116},"    children",[789,1457,1212],{"class":799},[789,1459,1460],{"class":1395}," React",[789,1462,1463],{"class":799},".",[789,1465,1466],{"class":1395},"ReactNode",[789,1468,823],{"class":799},[789,1470,1471],{"class":791,"line":876},[789,1472,1473],{"class":799},"}\n",[789,1475,1476],{"class":791,"line":882},[789,1477,879],{"emptyLinePlaceholder":223},[789,1479,1480,1482,1485,1488],{"class":791,"line":903},[789,1481,968],{"class":795},[789,1483,1484],{"class":885}," function",[789,1486,1487],{"class":895}," CheckboxGroup",[789,1489,1490],{"class":799},"({\n",[789,1492,1493,1496,1498,1500,1502,1504],{"class":791,"line":908},[789,1494,1209],{"class":1495},"sHdIc",[789,1497,1198],{"class":799},[789,1499,1151],{"class":799},[789,1501,1177],{"class":816},[789,1503,1128],{"class":799},[789,1505,840],{"class":799},[789,1507,1508,1510,1512,1514,1516,1518],{"class":791,"line":926},[789,1509,1235],{"class":1495},[789,1511,1198],{"class":799},[789,1513,1151],{"class":799},[789,1515,1191],{"class":816},[789,1517,1128],{"class":799},[789,1519,840],{"class":799},[789,1521,1522,1524],{"class":791,"line":943},[789,1523,1455],{"class":1495},[789,1525,840],{"class":799},[789,1527,1528,1531,1533,1536],{"class":791,"line":960},[789,1529,1530],{"class":799},"}:",[789,1532,1396],{"class":1395},[789,1534,1535],{"class":799},")",[789,1537,831],{"class":799},[789,1539,1540,1543,1546,1548,1550,1553,1556,1559,1561,1564,1566,1568],{"class":791,"line":965},[789,1541,1542],{"class":885},"    const",[789,1544,1545],{"class":803}," classes",[789,1547,1198],{"class":799},[789,1549,1144],{"class":895},[789,1551,1552],{"class":1116},"(",[789,1554,1555],{"class":799},"{",[789,1557,1558],{"class":803}," orientation",[789,1560,1014],{"class":799},[789,1562,1563],{"class":803}," size",[789,1565,807],{"class":799},[789,1567,1535],{"class":1116},[789,1569,823],{"class":799},[789,1571,1573],{"class":791,"line":1572},15,[789,1574,879],{"emptyLinePlaceholder":223},[789,1576,1578,1581],{"class":791,"line":1577},16,[789,1579,1580],{"class":795},"    return",[789,1582,1583],{"class":1116}," (\n",[789,1585,1587,1589,1591,1594,1597,1600,1602,1604,1606,1608,1610,1612],{"class":791,"line":1586},17,[789,1588,1332],{"class":799},[789,1590,1301],{"class":803},[789,1592,1593],{"class":803}," className",[789,1595,1596],{"class":799},"={",[789,1598,1599],{"class":803},"classes",[789,1601,862],{"class":799},[789,1603,1316],{"class":803},[789,1605,892],{"class":799},[789,1607,1128],{"class":799},[789,1609,1323],{"class":816},[789,1611,1128],{"class":799},[789,1613,1135],{"class":799},[789,1615,1617,1620,1623],{"class":791,"line":1616},18,[789,1618,1619],{"class":799},"            {",[789,1621,1622],{"class":1495},"children",[789,1624,1473],{"class":799},[789,1626,1628,1631,1633],{"class":791,"line":1627},19,[789,1629,1630],{"class":799},"        \u003C\u002F",[789,1632,1301],{"class":803},[789,1634,1135],{"class":799},[789,1636,1638,1641],{"class":791,"line":1637},20,[789,1639,1640],{"class":1116},"    )",[789,1642,823],{"class":799},[789,1644,1646],{"class":791,"line":1645},21,[789,1647,1473],{"class":799},[1099,1649,1650,1656,1736],{"v-slot:other":785},[692,1651,694,1652,1655],{},[705,1653,1654],{},"checkboxGroup()"," runtime returns a class string. Apply it however your framework binds classes:",[780,1657,1660],{"className":782,"code":1658,"filename":1659,"language":784,"meta":785,"style":785},"import { checkboxGroup } from \"virtual:styleframe\";\n\nconst classes = checkboxGroup({ orientation: \"vertical\", size: \"md\" });\n\u002F\u002F → \"checkbox-group _display:flex _flex-direction:column _gap:0.75 ...\"\n","src\u002Fcomponents\u002Fcheckbox-group.ts",[705,1661,1662,1682,1686,1730],{"__ignoreMap":785},[789,1663,1664,1666,1668,1670,1672,1674,1676,1678,1680],{"class":791,"line":792},[789,1665,796],{"class":795},[789,1667,800],{"class":799},[789,1669,1144],{"class":803},[789,1671,807],{"class":799},[789,1673,810],{"class":795},[789,1675,1151],{"class":799},[789,1677,817],{"class":816},[789,1679,1128],{"class":799},[789,1681,823],{"class":799},[789,1683,1684],{"class":791,"line":826},[789,1685,879],{"emptyLinePlaceholder":223},[789,1687,1688,1690,1693,1695,1697,1699,1701,1703,1706,1708,1710,1712,1714,1716,1718,1720,1722,1724,1726,1728],{"class":791,"line":834},[789,1689,886],{"class":885},[789,1691,1692],{"class":803}," classes ",[789,1694,892],{"class":799},[789,1696,1144],{"class":895},[789,1698,1552],{"class":803},[789,1700,1555],{"class":799},[789,1702,1558],{"class":1116},[789,1704,1705],{"class":799},":",[789,1707,1151],{"class":799},[789,1709,1177],{"class":816},[789,1711,1128],{"class":799},[789,1713,1014],{"class":799},[789,1715,1563],{"class":1116},[789,1717,1705],{"class":799},[789,1719,1151],{"class":799},[789,1721,1191],{"class":816},[789,1723,1128],{"class":799},[789,1725,807],{"class":799},[789,1727,1535],{"class":803},[789,1729,823],{"class":799},[789,1731,1732],{"class":791,"line":843},[789,1733,1735],{"class":1734},"sHwdD","\u002F\u002F → \"checkbox-group _display:flex _flex-direction:column _gap:0.75 ...\"\n",[780,1737,1742],{"className":1738,"code":1739,"filename":1740,"language":1741,"meta":785,"style":785},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"checkbox-group _display:flex _flex-direction:column ...\" role=\"group\">\n    \u003Clabel class=\"checkbox ...\">\u003Cinput type=\"checkbox\" class=\"checkbox-field ...\" \u002F>\u003Cspan>Email\u003C\u002Fspan>\u003C\u002Flabel>\n    \u003Clabel class=\"checkbox ...\">\u003Cinput type=\"checkbox\" class=\"checkbox-field ...\" \u002F>\u003Cspan>SMS\u003C\u002Fspan>\u003C\u002Flabel>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fcheckbox-group.html","html",[705,1743,1744,1774,1843,1902],{"__ignoreMap":785},[789,1745,1746,1748,1750,1753,1755,1757,1760,1762,1764,1766,1768,1770,1772],{"class":791,"line":792},[789,1747,1113],{"class":799},[789,1749,1301],{"class":1116},[789,1751,1752],{"class":885}," class",[789,1754,892],{"class":799},[789,1756,1128],{"class":799},[789,1758,1759],{"class":816},"checkbox-group _display:flex _flex-direction:column ...",[789,1761,1128],{"class":799},[789,1763,1316],{"class":885},[789,1765,892],{"class":799},[789,1767,1128],{"class":799},[789,1769,1323],{"class":816},[789,1771,1128],{"class":799},[789,1773,1135],{"class":799},[789,1775,1776,1778,1781,1783,1785,1787,1790,1792,1795,1798,1801,1803,1805,1808,1810,1812,1814,1816,1819,1821,1824,1826,1829,1832,1834,1836,1839,1841],{"class":791,"line":826},[789,1777,1298],{"class":799},[789,1779,1780],{"class":1116},"label",[789,1782,1752],{"class":885},[789,1784,892],{"class":799},[789,1786,1128],{"class":799},[789,1788,1789],{"class":816},"checkbox ...",[789,1791,1128],{"class":799},[789,1793,1794],{"class":799},">\u003C",[789,1796,1797],{"class":1116},"input",[789,1799,1800],{"class":885}," type",[789,1802,892],{"class":799},[789,1804,1128],{"class":799},[789,1806,1807],{"class":816},"checkbox",[789,1809,1128],{"class":799},[789,1811,1752],{"class":885},[789,1813,892],{"class":799},[789,1815,1128],{"class":799},[789,1817,1818],{"class":816},"checkbox-field ...",[789,1820,1128],{"class":799},[789,1822,1823],{"class":799}," \u002F>\u003C",[789,1825,789],{"class":1116},[789,1827,1828],{"class":799},">",[789,1830,1831],{"class":803},"Email",[789,1833,1277],{"class":799},[789,1835,789],{"class":1116},[789,1837,1838],{"class":799},">\u003C\u002F",[789,1840,1780],{"class":1116},[789,1842,1135],{"class":799},[789,1844,1845,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883,1885,1887,1889,1892,1894,1896,1898,1900],{"class":791,"line":834},[789,1846,1298],{"class":799},[789,1848,1780],{"class":1116},[789,1850,1752],{"class":885},[789,1852,892],{"class":799},[789,1854,1128],{"class":799},[789,1856,1789],{"class":816},[789,1858,1128],{"class":799},[789,1860,1794],{"class":799},[789,1862,1797],{"class":1116},[789,1864,1800],{"class":885},[789,1866,892],{"class":799},[789,1868,1128],{"class":799},[789,1870,1807],{"class":816},[789,1872,1128],{"class":799},[789,1874,1752],{"class":885},[789,1876,892],{"class":799},[789,1878,1128],{"class":799},[789,1880,1818],{"class":816},[789,1882,1128],{"class":799},[789,1884,1823],{"class":799},[789,1886,789],{"class":1116},[789,1888,1828],{"class":799},[789,1890,1891],{"class":803},"SMS",[789,1893,1277],{"class":799},[789,1895,789],{"class":1116},[789,1897,1838],{"class":799},[789,1899,1780],{"class":1116},[789,1901,1135],{"class":799},[789,1903,1904,1906,1908],{"class":791,"line":843},[789,1905,1277],{"class":799},[789,1907,1301],{"class":1116},[789,1909,1135],{"class":799},[764,1911,1913],{"id":1912},"see-it-in-action","See it in action",[1915,1916],"story-preview",{"story":1917,":panel":1918},"theme-recipes-forms-checkbox-group--default","true",[688,1920,1922],{"id":1921},"orientation","Orientation",[692,1924,1925],{},"The Checkbox Group supports two orientation variants that control the layout direction.",[1927,1928,1929],"h3",{"id":1177},"Vertical",[692,1931,1932],{},"The default orientation. Checkboxes are stacked top-to-bottom in a column — the most common layout for option lists.",[1915,1934],{"story":1935,":panel":1918},"theme-recipes-forms-checkbox-group--vertical",[1927,1937,1938],{"id":1226},"Horizontal",[692,1940,1941],{},"Checkboxes are laid out left-to-right in a wrapping row, aligned to the center. Useful for short option sets that fit inline.",[1915,1943],{"story":1944,":panel":1918},"theme-recipes-forms-checkbox-group--horizontal",[1927,1946,1948],{"id":1947},"orientation-reference","Orientation Reference",[1915,1950],{"story":1951},"theme-recipes-forms-checkbox-group--all-orientations",[1953,1954,1955,1970],"table",{},[1956,1957,1958],"thead",{},[1959,1960,1961,1964,1967],"tr",{},[1962,1963,1922],"th",{},[1962,1965,1966],{},"Direction",[1962,1968,1969],{},"Notes",[1971,1972,1973,1989],"tbody",{},[1959,1974,1975,1980,1986],{},[1976,1977,1978],"td",{},[705,1979,1177],{},[1976,1981,1982,1983,1535],{},"Top to bottom (",[705,1984,1985],{},"column",[1976,1987,1988],{},"Default; one option per line",[1959,1990,1991,1995,2002],{},[1976,1992,1993],{},[705,1994,1226],{},[1976,1996,1997,1998,2001],{},"Left to right (",[705,1999,2000],{},"row",", wraps)",[1976,2003,2004],{},"Center-aligned, wraps to the next line when out of space",[688,2006,2008],{"id":2007},"sizes","Sizes",[692,2010,2011,2012,2015],{},"Three size variants control the gap between checkboxes, letting you tighten or loosen a group to match its surroundings. Set the same ",[705,2013,2014],{},"size"," on each child checkbox so the controls and the spacing scale together.",[1953,2017,2018,2028],{},[1956,2019,2020],{},[1959,2021,2022,2025],{},[1962,2023,2024],{},"Size",[1962,2026,2027],{},"Gap",[1971,2029,2030,2041,2052],{},[1959,2031,2032,2036],{},[1976,2033,2034],{},[705,2035,1242],{},[1976,2037,2038],{},[705,2039,2040],{},"@0.5",[1959,2042,2043,2047],{},[1976,2044,2045],{},[705,2046,1191],{},[1976,2048,2049],{},[705,2050,2051],{},"@0.75",[1959,2053,2054,2058],{},[1976,2055,2056],{},[705,2057,1259],{},[1976,2059,2060],{},[705,2061,2062],{},"@1",[2064,2065,2066,2069,2070,2072,2073,2075,2076,2079],"note",{},[696,2067,2068],{},"Good to know:"," The group's ",[705,2071,2014],{}," controls only the gap between items. Pass the same ",[705,2074,2014],{}," to each child ",[705,2077,2078],{},"\u003CCheckbox>"," so the boxes and the spacing scale as a set.",[688,2081,568],{"id":2082},"accessibility",[728,2084,2085,2103,2117],{},[731,2086,2087,2090,2091,2094,2095,2098,2099,2102],{},[696,2088,2089],{},"Group related options."," Wrap the checkboxes in an element with ",[705,2092,2093],{},"role=\"group\""," and an ",[705,2096,2097],{},"aria-label"," (or ",[705,2100,2101],{},"aria-labelledby",") describing the set, so assistive technology announces the context.",[731,2104,2105,2108,2109,2112,2113,2116],{},[696,2106,2107],{},"Prefer a fieldset for forms."," When the group is part of a form, a native ",[705,2110,2111],{},"\u003Cfieldset>"," with a ",[705,2114,2115],{},"\u003Clegend>"," is the most robust grouping — apply the recipe class to the fieldset.",[731,2118,2119,2122,2123,2125],{},[696,2120,2121],{},"Keep each checkbox labelled."," The group provides layout only; every child still needs its own label (see the ",[700,2124,436],{"href":437}," recipe).",[688,2127,2129],{"id":2128},"customization","Customization",[1927,2131,2133],{"id":2132},"overriding-defaults","Overriding Defaults",[692,2135,694,2136,2138],{},[705,2137,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:",[780,2140,2142],{"className":782,"code":2141,"filename":778,"language":784,"meta":785,"style":785},"import { styleframe } from 'virtual:styleframe';\nimport { useCheckboxGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst checkboxGroup = useCheckboxGroupRecipe(s, {\n    defaultVariants: {\n        orientation: 'horizontal',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[705,2143,2144,2164,2184,2188,2202,2206,2223,2232,2247,2262,2267,2275,2279],{"__ignoreMap":785},[789,2145,2146,2148,2150,2152,2154,2156,2158,2160,2162],{"class":791,"line":792},[789,2147,796],{"class":795},[789,2149,800],{"class":799},[789,2151,804],{"class":803},[789,2153,807],{"class":799},[789,2155,810],{"class":795},[789,2157,813],{"class":799},[789,2159,817],{"class":816},[789,2161,820],{"class":799},[789,2163,823],{"class":799},[789,2165,2166,2168,2170,2172,2174,2176,2178,2180,2182],{"class":791,"line":826},[789,2167,796],{"class":795},[789,2169,800],{"class":799},[789,2171,953],{"class":803},[789,2173,807],{"class":799},[789,2175,810],{"class":795},[789,2177,813],{"class":799},[789,2179,869],{"class":816},[789,2181,820],{"class":799},[789,2183,823],{"class":799},[789,2185,2186],{"class":791,"line":834},[789,2187,879],{"emptyLinePlaceholder":223},[789,2189,2190,2192,2194,2196,2198,2200],{"class":791,"line":843},[789,2191,886],{"class":885},[789,2193,889],{"class":803},[789,2195,892],{"class":799},[789,2197,804],{"class":895},[789,2199,898],{"class":803},[789,2201,823],{"class":799},[789,2203,2204],{"class":791,"line":851},[789,2205,879],{"emptyLinePlaceholder":223},[789,2207,2208,2210,2212,2214,2216,2219,2221],{"class":791,"line":859},[789,2209,886],{"class":885},[789,2211,948],{"class":803},[789,2213,892],{"class":799},[789,2215,953],{"class":895},[789,2217,2218],{"class":803},"(s",[789,2220,1014],{"class":799},[789,2222,831],{"class":799},[789,2224,2225,2228,2230],{"class":791,"line":876},[789,2226,2227],{"class":1116},"    defaultVariants",[789,2229,1705],{"class":799},[789,2231,831],{"class":799},[789,2233,2234,2237,2239,2241,2243,2245],{"class":791,"line":882},[789,2235,2236],{"class":1116},"        orientation",[789,2238,1705],{"class":799},[789,2240,813],{"class":799},[789,2242,1226],{"class":816},[789,2244,820],{"class":799},[789,2246,840],{"class":799},[789,2248,2249,2252,2254,2256,2258,2260],{"class":791,"line":903},[789,2250,2251],{"class":1116},"        size",[789,2253,1705],{"class":799},[789,2255,813],{"class":799},[789,2257,1259],{"class":816},[789,2259,820],{"class":799},[789,2261,840],{"class":799},[789,2263,2264],{"class":791,"line":908},[789,2265,2266],{"class":799},"    },\n",[789,2268,2269,2271,2273],{"class":791,"line":926},[789,2270,862],{"class":799},[789,2272,1535],{"class":803},[789,2274,823],{"class":799},[789,2276,2277],{"class":791,"line":943},[789,2278,879],{"emptyLinePlaceholder":223},[789,2280,2281,2283,2285,2287],{"class":791,"line":960},[789,2282,968],{"class":795},[789,2284,971],{"class":795},[789,2286,974],{"class":803},[789,2288,823],{"class":799},[1927,2290,2292],{"id":2291},"filtering-variants","Filtering Variants",[692,2294,2295,2296,2299],{},"If you only need a subset of the available variants, use the ",[705,2297,2298],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[780,2301,2303],{"className":782,"code":2302,"filename":778,"language":784,"meta":785,"style":785},"import { styleframe } from 'virtual:styleframe';\nimport { useCheckboxGroupRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the vertical orientation\nconst checkboxGroup = useCheckboxGroupRecipe(s, {\n    filter: {\n        orientation: ['vertical'],\n    },\n});\n\nexport default s;\n",[705,2304,2305,2325,2345,2349,2363,2367,2372,2388,2397,2417,2421,2429,2433],{"__ignoreMap":785},[789,2306,2307,2309,2311,2313,2315,2317,2319,2321,2323],{"class":791,"line":792},[789,2308,796],{"class":795},[789,2310,800],{"class":799},[789,2312,804],{"class":803},[789,2314,807],{"class":799},[789,2316,810],{"class":795},[789,2318,813],{"class":799},[789,2320,817],{"class":816},[789,2322,820],{"class":799},[789,2324,823],{"class":799},[789,2326,2327,2329,2331,2333,2335,2337,2339,2341,2343],{"class":791,"line":826},[789,2328,796],{"class":795},[789,2330,800],{"class":799},[789,2332,953],{"class":803},[789,2334,807],{"class":799},[789,2336,810],{"class":795},[789,2338,813],{"class":799},[789,2340,869],{"class":816},[789,2342,820],{"class":799},[789,2344,823],{"class":799},[789,2346,2347],{"class":791,"line":834},[789,2348,879],{"emptyLinePlaceholder":223},[789,2350,2351,2353,2355,2357,2359,2361],{"class":791,"line":843},[789,2352,886],{"class":885},[789,2354,889],{"class":803},[789,2356,892],{"class":799},[789,2358,804],{"class":895},[789,2360,898],{"class":803},[789,2362,823],{"class":799},[789,2364,2365],{"class":791,"line":851},[789,2366,879],{"emptyLinePlaceholder":223},[789,2368,2369],{"class":791,"line":859},[789,2370,2371],{"class":1734},"\u002F\u002F Only generate the vertical orientation\n",[789,2373,2374,2376,2378,2380,2382,2384,2386],{"class":791,"line":876},[789,2375,886],{"class":885},[789,2377,948],{"class":803},[789,2379,892],{"class":799},[789,2381,953],{"class":895},[789,2383,2218],{"class":803},[789,2385,1014],{"class":799},[789,2387,831],{"class":799},[789,2389,2390,2393,2395],{"class":791,"line":882},[789,2391,2392],{"class":1116},"    filter",[789,2394,1705],{"class":799},[789,2396,831],{"class":799},[789,2398,2399,2401,2403,2406,2408,2410,2412,2415],{"class":791,"line":903},[789,2400,2236],{"class":1116},[789,2402,1705],{"class":799},[789,2404,2405],{"class":803}," [",[789,2407,820],{"class":799},[789,2409,1177],{"class":816},[789,2411,820],{"class":799},[789,2413,2414],{"class":803},"]",[789,2416,840],{"class":799},[789,2418,2419],{"class":791,"line":908},[789,2420,2266],{"class":799},[789,2422,2423,2425,2427],{"class":791,"line":926},[789,2424,862],{"class":799},[789,2426,1535],{"class":803},[789,2428,823],{"class":799},[789,2430,2431],{"class":791,"line":943},[789,2432,879],{"emptyLinePlaceholder":223},[789,2434,2435,2437,2439,2441],{"class":791,"line":960},[789,2436,968],{"class":795},[789,2438,971],{"class":795},[789,2440,974],{"class":803},[789,2442,823],{"class":799},[2064,2444,2445,2447],{},[696,2446,2068],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,2449,73],{"id":2450},"api-reference",[1927,2452,2454],{"id":2453},"usecheckboxgrouprecipes-options",[705,2455,2456],{},"useCheckboxGroupRecipe(s, options?)",[692,2458,2459],{},"Creates a checkbox group recipe — a flex container with orientation and size (gap) variants.",[692,2461,2462],{},[696,2463,2464],{},"Parameters:",[1953,2466,2467,2480],{},[1956,2468,2469],{},[1959,2470,2471,2474,2477],{},[1962,2472,2473],{},"Parameter",[1962,2475,2476],{},"Type",[1962,2478,2479],{},"Description",[1971,2481,2482,2497,2512,2527,2542,2557],{},[1959,2483,2484,2489,2494],{},[1976,2485,2486],{},[705,2487,2488],{},"s",[1976,2490,2491],{},[705,2492,2493],{},"Styleframe",[1976,2495,2496],{},"The Styleframe instance",[1959,2498,2499,2504,2509],{},[1976,2500,2501],{},[705,2502,2503],{},"options",[1976,2505,2506],{},[705,2507,2508],{},"DeepPartial\u003CRecipeConfig>",[1976,2510,2511],{},"Optional overrides for the recipe configuration",[1959,2513,2514,2519,2524],{},[1976,2515,2516],{},[705,2517,2518],{},"options.base",[1976,2520,2521],{},[705,2522,2523],{},"VariantDeclarationsBlock",[1976,2525,2526],{},"Custom base styles for the group",[1959,2528,2529,2534,2539],{},[1976,2530,2531],{},[705,2532,2533],{},"options.variants",[1976,2535,2536],{},[705,2537,2538],{},"Variants",[1976,2540,2541],{},"Custom variant definitions for the recipe",[1959,2543,2544,2549,2554],{},[1976,2545,2546],{},[705,2547,2548],{},"options.defaultVariants",[1976,2550,2551],{},[705,2552,2553],{},"Record\u003Ckeyof Variants, string>",[1976,2555,2556],{},"Default variant values for the recipe",[1959,2558,2559,2564,2569],{},[1976,2560,2561],{},[705,2562,2563],{},"options.filter",[1976,2565,2566],{},[705,2567,2568],{},"Record\u003Cstring, string[]>",[1976,2570,2571],{},"Limit which variant values are generated",[692,2573,2574],{},[696,2575,2576],{},"Variants:",[1953,2578,2579,2592],{},[1956,2580,2581],{},[1959,2582,2583,2586,2589],{},[1962,2584,2585],{},"Variant",[1962,2587,2588],{},"Options",[1962,2590,2591],{},"Default",[1971,2593,2594,2611],{},[1959,2595,2596,2600,2607],{},[1976,2597,2598],{},[705,2599,1921],{},[1976,2601,2602,2604,2605],{},[705,2603,1177],{},", ",[705,2606,1226],{},[1976,2608,2609],{},[705,2610,1177],{},[1959,2612,2613,2617,2625],{},[1976,2614,2615],{},[705,2616,2014],{},[1976,2618,2619,2604,2621,2604,2623],{},[705,2620,1242],{},[705,2622,1191],{},[705,2624,1259],{},[1976,2626,2627],{},[705,2628,1191],{},[692,2630,2631],{},[700,2632,2633],{"href":132},"Learn more about recipes →",[688,2635,2637],{"id":2636},"best-practices","Best Practices",[728,2639,2640,2649,2658,2664],{},[731,2641,2642,2645,2646,2648],{},[696,2643,2644],{},"Pair with the Checkbox recipe",": The group handles layout; each child should use the ",[700,2647,436],{"href":437}," recipe for consistent controls.",[731,2650,2651,2654,2655,2657],{},[696,2652,2653],{},"Match sizes",": Use the same ",[705,2656,2014],{}," on the group and its child checkboxes so spacing and boxes scale together.",[731,2659,2660,2663],{},[696,2661,2662],{},"Keep groups scannable",": Prefer vertical layout for longer option lists; reserve horizontal for two or three short options.",[731,2665,2666,2669,2670,2672,2673,2675],{},[696,2667,2668],{},"Label the set",": Always describe the group's purpose with ",[705,2671,2097],{}," or a ",[705,2674,2115],{}," so screen readers communicate the relationship between options.",[688,2677,2679],{"id":2678},"faq","FAQ",[2681,2682,2683,2699,2709,2722],"accordion",{},[2684,2685,2688,2689,2692,2693,2695,2696,2698],"accordion-item",{"icon":2686,"label":2687},"i-lucide-circle-help","Does the group propagate color or size to its checkboxes?","No. The group is a pure layout container — it sets the flex direction and the gap between items. Each child checkbox keeps its own ",[705,2690,2691],{},"color"," and ",[705,2694,2014],{},". Pass the same ",[705,2697,2014],{}," to the group and its children if you want the spacing and the boxes to scale together.",[2684,2700,2702,2703,2705,2706,2708],{"icon":2686,"label":2701},"When should I use horizontal orientation?","Use ",[705,2704,1226],{}," for short sets of two or three options that read well inline. It lays the checkboxes out in a centered, wrapping row. For longer option lists, the default ",[705,2707,1177],{}," orientation is easier to scan.",[2684,2710,2712,2713,2715,2716,2718,2719,2721],{"icon":2686,"label":2711},"Can I use a fieldset instead of a div?","Yes, and it's recommended inside forms. Apply the ",[705,2714,1654],{}," class to a native ",[705,2717,2111],{}," and add a ",[705,2720,2115],{}," for the group name. The recipe only sets layout properties, so it works on any block-level element.",[2684,2723,2725,2726,2728],{"icon":2686,"label":2724},"How does filtering affect the recipe?","When you use the ",[705,2727,2298],{}," 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.",[2730,2731,2732],"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":785,"searchDepth":826,"depth":826,"links":2734},[2735,2736,2737,2738,2743,2744,2745,2749,2752,2753],{"id":690,"depth":826,"text":78},{"id":722,"depth":826,"text":723},{"id":757,"depth":826,"text":758},{"id":1921,"depth":826,"text":1922,"children":2739},[2740,2741,2742],{"id":1177,"depth":834,"text":1929},{"id":1226,"depth":834,"text":1938},{"id":1947,"depth":834,"text":1948},{"id":2007,"depth":826,"text":2008},{"id":2082,"depth":826,"text":568},{"id":2128,"depth":826,"text":2129,"children":2746},[2747,2748],{"id":2132,"depth":834,"text":2133},{"id":2291,"depth":834,"text":2292},{"id":2450,"depth":826,"text":73,"children":2750},[2751],{"id":2453,"depth":834,"text":2456},{"id":2636,"depth":826,"text":2637},{"id":2678,"depth":826,"text":2679},"A layout component for arranging a set of checkboxes with shared orientation and spacing. Supports vertical and horizontal layouts and three gap sizes through the recipe system.",null,{},{"icon":7},{"title":440,"description":2754},"huR4U7h9i5QRxoZ0oDcxYmuh_ZKz532vrRlFRZbj7_I",[2761,2763],{"title":436,"path":437,"stem":438,"description":2762,"icon":7,"children":-1},"A custom checkbox built on the native input, with a CSS checkmark, checked, indeterminate, disabled, and focus states, light, dark, and neutral surface colors, and three sizes through the recipe system.",{"title":444,"path":445,"stem":446,"description":2764,"icon":7,"children":-1},"A color selection control composed of a saturation\u002Fvalue selector square, a vertical hue track, and shared draggable thumbs. Renders any color through a CSS variable and gradients, with five sizes through the recipe system.",1781596339108]