[{"data":1,"prerenderedAt":3858},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-checkbox":682,"-docs-theme-components-checkbox-surround":3853},{"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":436,"body":684,"description":3847,"extension":1285,"links":3848,"meta":3849,"navigation":3850,"path":437,"seo":3851,"stem":438,"__hash__":3852},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox.md",{"type":685,"value":686,"toc":3819},"minimark",[687,691,699,720,765,773,779,783,786,833,837,2534,2537,2556,2561,2564,2569,2573,2643,2653,2657,2674,2678,2682,2746,2763,2766,2773,2776,2791,2794,2797,2812,2815,2818,2838,2841,2845,2848,2905,2982,2989,2992,3074,3078,3082,3085,3263,3267,3274,3416,3421,3424,3430,3438,3443,3550,3555,3590,3596,3607,3611,3661,3666,3670,3723,3727,3815],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698],"p",{},"The ",[696,697,436],"strong",{}," is a binary form control that lets users toggle an option on or off. It is composed of two recipe parts:",[700,701,702,712],"ul",{},[703,704,705,711],"li",{},[696,706,707],{},[708,709,710],"code",{},"useCheckboxRecipe()"," — the label wrapper that owns the inline layout (gap, alignment), label typography, and dims itself when the field is disabled.",[703,713,714,719],{},[696,715,716],{},[708,717,718],{},"useCheckboxFieldRecipe()"," — the native styled input, a white SVG checkmark\u002Fdash painted as a background image, and the checked, indeterminate, focus, and disabled states.",[692,721,722,723,726,727,730,731,734,735,738,739,742,743,746,747,751,752,734,755,734,758,761,762,764],{},"The field is the real native input, so every state is driven by the browser: ",[708,724,725],{},":checked"," and ",[708,728,729],{},":indeterminate"," fill the box with ",[708,732,733],{},"@color.primary",", ",[708,736,737],{},":focus-visible"," shows a focus ring, and ",[708,740,741],{},":disabled"," dims it. The ",[708,744,745],{},"color"," axis sets the ",[748,749,750],"em",{},"unchecked"," surface (",[708,753,754],{},"light",[708,756,757],{},"dark",[708,759,760],{},"neutral",") and the checked fill stays ",[708,763,733],{}," across all three.",[692,766,767,768,772],{},"The Checkbox recipes integrate directly with the default ",[769,770,771],"a",{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[692,774,775,776,778],{},"To lay several checkboxes out as a set, see the ",[769,777,440],{"href":441}," recipe.",[688,780,782],{"id":781},"why-use-the-checkbox-recipe","Why use the Checkbox recipe?",[692,784,785],{},"The Checkbox recipe helps you:",[700,787,788,794,809,815,821,827],{},[703,789,790,793],{},[696,791,792],{},"Ship faster with sensible defaults",": Get 3 surface colors and 3 sizes out of the box with a single set of composable calls.",[703,795,796,799,800,734,802,734,804,734,806,808],{},[696,797,798],{},"Build on the native input",": States ride on native pseudo-classes (",[708,801,725],{},[708,803,729],{},[708,805,741],{},[708,807,737],{},"), so the control stays keyboard-accessible and form-associated with zero runtime JavaScript.",[703,810,811,814],{},[696,812,813],{},"Maintain consistency",": The checked fill, checkmark, focus ring, and dark-mode surfaces follow the same design rules everywhere.",[703,816,817,820],{},[696,818,819],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[703,822,823,826],{},[696,824,825],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color or size values at compile time.",[703,828,829,832],{},[696,830,831],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,834,836],{"id":835},"usage","Usage",[838,839,841,846,853,1121,1125,1148,2525,2529],"steps",{"level":840},"4",[842,843,845],"h4",{"id":844},"register-the-recipes","Register the recipes",[692,847,848,849,852],{},"Add the Checkbox recipes to a local Styleframe instance. The global ",[708,850,851],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[854,855,857,1015],"code-tree",{"default-value":856},"src\u002Fcomponents\u002Fcheckbox.styleframe.ts",[858,859,864],"pre",{"className":860,"code":861,"filename":856,"language":862,"meta":863,"style":863},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useCheckboxRecipe, useCheckboxFieldRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst checkbox = useCheckboxRecipe(s);\nconst checkboxField = useCheckboxFieldRecipe(s);\n\nexport default s;\n","ts","",[708,865,866,902,931,937,958,963,980,996,1001],{"__ignoreMap":863},[867,868,871,875,879,883,886,889,892,896,899],"span",{"class":869,"line":870},"line",1,[867,872,874],{"class":873},"s7zQu","import",[867,876,878],{"class":877},"sMK4o"," {",[867,880,882],{"class":881},"sTEyZ"," styleframe",[867,884,885],{"class":877}," }",[867,887,888],{"class":873}," from",[867,890,891],{"class":877}," '",[867,893,895],{"class":894},"sfazB","virtual:styleframe",[867,897,898],{"class":877},"'",[867,900,901],{"class":877},";\n",[867,903,905,907,909,912,915,918,920,922,924,927,929],{"class":869,"line":904},2,[867,906,874],{"class":873},[867,908,878],{"class":877},[867,910,911],{"class":881}," useCheckboxRecipe",[867,913,914],{"class":877},",",[867,916,917],{"class":881}," useCheckboxFieldRecipe",[867,919,885],{"class":877},[867,921,888],{"class":873},[867,923,891],{"class":877},[867,925,926],{"class":894},"@styleframe\u002Ftheme",[867,928,898],{"class":877},[867,930,901],{"class":877},[867,932,934],{"class":869,"line":933},3,[867,935,936],{"emptyLinePlaceholder":223},"\n",[867,938,940,944,947,950,953,956],{"class":869,"line":939},4,[867,941,943],{"class":942},"spNyl","const",[867,945,946],{"class":881}," s ",[867,948,949],{"class":877},"=",[867,951,882],{"class":952},"s2Zo4",[867,954,955],{"class":881},"()",[867,957,901],{"class":877},[867,959,961],{"class":869,"line":960},5,[867,962,936],{"emptyLinePlaceholder":223},[867,964,966,968,971,973,975,978],{"class":869,"line":965},6,[867,967,943],{"class":942},[867,969,970],{"class":881}," checkbox ",[867,972,949],{"class":877},[867,974,911],{"class":952},[867,976,977],{"class":881},"(s)",[867,979,901],{"class":877},[867,981,983,985,988,990,992,994],{"class":869,"line":982},7,[867,984,943],{"class":942},[867,986,987],{"class":881}," checkboxField ",[867,989,949],{"class":877},[867,991,917],{"class":952},[867,993,977],{"class":881},[867,995,901],{"class":877},[867,997,999],{"class":869,"line":998},8,[867,1000,936],{"emptyLinePlaceholder":223},[867,1002,1004,1007,1010,1013],{"class":869,"line":1003},9,[867,1005,1006],{"class":873},"export",[867,1008,1009],{"class":873}," default",[867,1011,1012],{"class":881}," s",[867,1014,901],{"class":877},[858,1016,1018],{"className":860,"code":1017,"filename":851,"language":862,"meta":863,"style":863},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[708,1019,1020,1041,1067,1071,1085,1089,1098,1107,1111],{"__ignoreMap":863},[867,1021,1022,1024,1026,1028,1030,1032,1034,1037,1039],{"class":869,"line":870},[867,1023,874],{"class":873},[867,1025,878],{"class":877},[867,1027,882],{"class":881},[867,1029,885],{"class":877},[867,1031,888],{"class":873},[867,1033,891],{"class":877},[867,1035,1036],{"class":894},"styleframe",[867,1038,898],{"class":877},[867,1040,901],{"class":877},[867,1042,1043,1045,1047,1050,1052,1055,1057,1059,1061,1063,1065],{"class":869,"line":904},[867,1044,874],{"class":873},[867,1046,878],{"class":877},[867,1048,1049],{"class":881}," useDesignTokensPreset",[867,1051,914],{"class":877},[867,1053,1054],{"class":881}," useUtilitiesPreset",[867,1056,885],{"class":877},[867,1058,888],{"class":873},[867,1060,891],{"class":877},[867,1062,926],{"class":894},[867,1064,898],{"class":877},[867,1066,901],{"class":877},[867,1068,1069],{"class":869,"line":933},[867,1070,936],{"emptyLinePlaceholder":223},[867,1072,1073,1075,1077,1079,1081,1083],{"class":869,"line":939},[867,1074,943],{"class":942},[867,1076,946],{"class":881},[867,1078,949],{"class":877},[867,1080,882],{"class":952},[867,1082,955],{"class":881},[867,1084,901],{"class":877},[867,1086,1087],{"class":869,"line":960},[867,1088,936],{"emptyLinePlaceholder":223},[867,1090,1091,1094,1096],{"class":869,"line":965},[867,1092,1093],{"class":952},"useDesignTokensPreset",[867,1095,977],{"class":881},[867,1097,901],{"class":877},[867,1099,1100,1103,1105],{"class":869,"line":982},[867,1101,1102],{"class":952},"useUtilitiesPreset",[867,1104,977],{"class":881},[867,1106,901],{"class":877},[867,1108,1109],{"class":869,"line":998},[867,1110,936],{"emptyLinePlaceholder":223},[867,1112,1113,1115,1117,1119],{"class":869,"line":1003},[867,1114,1006],{"class":873},[867,1116,1009],{"class":873},[867,1118,1012],{"class":881},[867,1120,901],{"class":877},[842,1122,1124],{"id":1123},"build-the-component","Build the component",[692,1126,1127,1128,1131,1132,1135,1136,1139,1140,1143,1144,1147],{},"Put the ",[708,1129,1130],{},"checkbox"," wrapper on the ",[708,1133,1134],{},"\u003Clabel>"," and the ",[708,1137,1138],{},"checkboxField"," box on the native ",[708,1141,1142],{},"\u003Cinput type=\"checkbox\">",". The ",[708,1145,1146],{},"indeterminate"," state is a DOM property (not an HTML attribute), so set it on the element via a ref:",[1149,1150,1151,1785,2305],"framework-switcher",{},[1152,1153,1154],"template",{"v-slot:vue":863},[858,1155,1160],{"className":1156,"code":1157,"filename":1158,"language":1159,"meta":863,"style":863},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { checkbox, checkboxField } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    size = \"md\",\n    checked = false,\n    indeterminate = false,\n    disabled = false,\n    label,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    label?: string;\n}>();\n\nconst field = ref\u003CHTMLInputElement | null>(null);\nconst syncIndeterminate = () => {\n    if (field.value) field.value.indeterminate = indeterminate;\n};\nonMounted(syncIndeterminate);\nwatch(() => indeterminate, syncIndeterminate);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Clabel :class=\"checkbox({ size })\">\n        \u003Cinput\n            ref=\"field\"\n            type=\"checkbox\"\n            :class=\"checkboxField({ color, size })\"\n            :checked=\"checked\"\n            :disabled=\"disabled\"\n        \u002F>\n        \u003Cspan>{{ label }}\u003C\u002Fspan>\n    \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FCheckbox.vue","vue",[708,1161,1162,1189,1221,1247,1251,1258,1274,1290,1303,1314,1326,1334,1349,1383,1417,1431,1443,1455,1467,1477,1482,1518,1536,1574,1580,1591,1612,1622,1627,1636,1659,1668,1683,1697,1712,1727,1742,1748,1766,1776],{"__ignoreMap":863},[867,1163,1164,1167,1171,1174,1177,1179,1182,1184,1186],{"class":869,"line":870},[867,1165,1166],{"class":877},"\u003C",[867,1168,1170],{"class":1169},"swJcz","script",[867,1172,1173],{"class":942}," setup",[867,1175,1176],{"class":942}," lang",[867,1178,949],{"class":877},[867,1180,1181],{"class":877},"\"",[867,1183,862],{"class":894},[867,1185,1181],{"class":877},[867,1187,1188],{"class":877},">\n",[867,1190,1191,1193,1195,1198,1200,1203,1205,1208,1210,1212,1215,1217,1219],{"class":869,"line":904},[867,1192,874],{"class":873},[867,1194,878],{"class":877},[867,1196,1197],{"class":881}," onMounted",[867,1199,914],{"class":877},[867,1201,1202],{"class":881}," ref",[867,1204,914],{"class":877},[867,1206,1207],{"class":881}," watch",[867,1209,885],{"class":877},[867,1211,888],{"class":873},[867,1213,1214],{"class":877}," \"",[867,1216,1159],{"class":894},[867,1218,1181],{"class":877},[867,1220,901],{"class":877},[867,1222,1223,1225,1227,1230,1232,1235,1237,1239,1241,1243,1245],{"class":869,"line":933},[867,1224,874],{"class":873},[867,1226,878],{"class":877},[867,1228,1229],{"class":881}," checkbox",[867,1231,914],{"class":877},[867,1233,1234],{"class":881}," checkboxField",[867,1236,885],{"class":877},[867,1238,888],{"class":873},[867,1240,1214],{"class":877},[867,1242,895],{"class":894},[867,1244,1181],{"class":877},[867,1246,901],{"class":877},[867,1248,1249],{"class":869,"line":939},[867,1250,936],{"emptyLinePlaceholder":223},[867,1252,1253,1255],{"class":869,"line":960},[867,1254,943],{"class":942},[867,1256,1257],{"class":877}," {\n",[867,1259,1260,1263,1265,1267,1269,1271],{"class":869,"line":965},[867,1261,1262],{"class":881},"    color ",[867,1264,949],{"class":877},[867,1266,1214],{"class":877},[867,1268,760],{"class":894},[867,1270,1181],{"class":877},[867,1272,1273],{"class":877},",\n",[867,1275,1276,1279,1281,1283,1286,1288],{"class":869,"line":982},[867,1277,1278],{"class":881},"    size ",[867,1280,949],{"class":877},[867,1282,1214],{"class":877},[867,1284,1285],{"class":894},"md",[867,1287,1181],{"class":877},[867,1289,1273],{"class":877},[867,1291,1292,1295,1297,1301],{"class":869,"line":998},[867,1293,1294],{"class":881},"    checked ",[867,1296,949],{"class":877},[867,1298,1300],{"class":1299},"sfNiH"," false",[867,1302,1273],{"class":877},[867,1304,1305,1308,1310,1312],{"class":869,"line":1003},[867,1306,1307],{"class":881},"    indeterminate ",[867,1309,949],{"class":877},[867,1311,1300],{"class":1299},[867,1313,1273],{"class":877},[867,1315,1317,1320,1322,1324],{"class":869,"line":1316},10,[867,1318,1319],{"class":881},"    disabled ",[867,1321,949],{"class":877},[867,1323,1300],{"class":1299},[867,1325,1273],{"class":877},[867,1327,1329,1332],{"class":869,"line":1328},11,[867,1330,1331],{"class":881},"    label",[867,1333,1273],{"class":877},[867,1335,1337,1340,1343,1346],{"class":869,"line":1336},12,[867,1338,1339],{"class":877},"}",[867,1341,1342],{"class":877}," =",[867,1344,1345],{"class":952}," defineProps",[867,1347,1348],{"class":877},"\u003C{\n",[867,1350,1352,1355,1358,1360,1362,1364,1367,1369,1371,1373,1375,1377,1379,1381],{"class":869,"line":1351},13,[867,1353,1354],{"class":1169},"    color",[867,1356,1357],{"class":877},"?:",[867,1359,1214],{"class":877},[867,1361,754],{"class":894},[867,1363,1181],{"class":877},[867,1365,1366],{"class":877}," |",[867,1368,1214],{"class":877},[867,1370,757],{"class":894},[867,1372,1181],{"class":877},[867,1374,1366],{"class":877},[867,1376,1214],{"class":877},[867,1378,760],{"class":894},[867,1380,1181],{"class":877},[867,1382,901],{"class":877},[867,1384,1386,1389,1391,1393,1396,1398,1400,1402,1404,1406,1408,1410,1413,1415],{"class":869,"line":1385},14,[867,1387,1388],{"class":1169},"    size",[867,1390,1357],{"class":877},[867,1392,1214],{"class":877},[867,1394,1395],{"class":894},"sm",[867,1397,1181],{"class":877},[867,1399,1366],{"class":877},[867,1401,1214],{"class":877},[867,1403,1285],{"class":894},[867,1405,1181],{"class":877},[867,1407,1366],{"class":877},[867,1409,1214],{"class":877},[867,1411,1412],{"class":894},"lg",[867,1414,1181],{"class":877},[867,1416,901],{"class":877},[867,1418,1420,1423,1425,1429],{"class":869,"line":1419},15,[867,1421,1422],{"class":1169},"    checked",[867,1424,1357],{"class":877},[867,1426,1428],{"class":1427},"sBMFI"," boolean",[867,1430,901],{"class":877},[867,1432,1434,1437,1439,1441],{"class":869,"line":1433},16,[867,1435,1436],{"class":1169},"    indeterminate",[867,1438,1357],{"class":877},[867,1440,1428],{"class":1427},[867,1442,901],{"class":877},[867,1444,1446,1449,1451,1453],{"class":869,"line":1445},17,[867,1447,1448],{"class":1169},"    disabled",[867,1450,1357],{"class":877},[867,1452,1428],{"class":1427},[867,1454,901],{"class":877},[867,1456,1458,1460,1462,1465],{"class":869,"line":1457},18,[867,1459,1331],{"class":1169},[867,1461,1357],{"class":877},[867,1463,1464],{"class":1427}," string",[867,1466,901],{"class":877},[867,1468,1470,1473,1475],{"class":869,"line":1469},19,[867,1471,1472],{"class":877},"}>",[867,1474,955],{"class":881},[867,1476,901],{"class":877},[867,1478,1480],{"class":869,"line":1479},20,[867,1481,936],{"emptyLinePlaceholder":223},[867,1483,1485,1487,1490,1492,1494,1496,1499,1501,1504,1507,1510,1513,1516],{"class":869,"line":1484},21,[867,1486,943],{"class":942},[867,1488,1489],{"class":881}," field ",[867,1491,949],{"class":877},[867,1493,1202],{"class":952},[867,1495,1166],{"class":877},[867,1497,1498],{"class":1427},"HTMLInputElement",[867,1500,1366],{"class":877},[867,1502,1503],{"class":1427}," null",[867,1505,1506],{"class":877},">",[867,1508,1509],{"class":881},"(",[867,1511,1512],{"class":877},"null",[867,1514,1515],{"class":881},")",[867,1517,901],{"class":877},[867,1519,1521,1523,1526,1528,1531,1534],{"class":869,"line":1520},22,[867,1522,943],{"class":942},[867,1524,1525],{"class":881}," syncIndeterminate ",[867,1527,949],{"class":877},[867,1529,1530],{"class":877}," ()",[867,1532,1533],{"class":942}," =>",[867,1535,1257],{"class":877},[867,1537,1539,1542,1545,1548,1551,1554,1557,1559,1561,1563,1565,1567,1569,1572],{"class":869,"line":1538},23,[867,1540,1541],{"class":873},"    if",[867,1543,1544],{"class":1169}," (",[867,1546,1547],{"class":881},"field",[867,1549,1550],{"class":877},".",[867,1552,1553],{"class":881},"value",[867,1555,1556],{"class":1169},") ",[867,1558,1547],{"class":881},[867,1560,1550],{"class":877},[867,1562,1553],{"class":881},[867,1564,1550],{"class":877},[867,1566,1146],{"class":881},[867,1568,1342],{"class":877},[867,1570,1571],{"class":881}," indeterminate",[867,1573,901],{"class":877},[867,1575,1577],{"class":869,"line":1576},24,[867,1578,1579],{"class":877},"};\n",[867,1581,1583,1586,1589],{"class":869,"line":1582},25,[867,1584,1585],{"class":952},"onMounted",[867,1587,1588],{"class":881},"(syncIndeterminate)",[867,1590,901],{"class":877},[867,1592,1594,1597,1599,1601,1603,1605,1607,1610],{"class":869,"line":1593},26,[867,1595,1596],{"class":952},"watch",[867,1598,1509],{"class":881},[867,1600,955],{"class":877},[867,1602,1533],{"class":942},[867,1604,1571],{"class":881},[867,1606,914],{"class":877},[867,1608,1609],{"class":881}," syncIndeterminate)",[867,1611,901],{"class":877},[867,1613,1615,1618,1620],{"class":869,"line":1614},27,[867,1616,1617],{"class":877},"\u003C\u002F",[867,1619,1170],{"class":1169},[867,1621,1188],{"class":877},[867,1623,1625],{"class":869,"line":1624},28,[867,1626,936],{"emptyLinePlaceholder":223},[867,1628,1630,1632,1634],{"class":869,"line":1629},29,[867,1631,1166],{"class":877},[867,1633,1152],{"class":1169},[867,1635,1188],{"class":877},[867,1637,1639,1642,1645,1648,1650,1652,1655,1657],{"class":869,"line":1638},30,[867,1640,1641],{"class":877},"    \u003C",[867,1643,1644],{"class":1169},"label",[867,1646,1647],{"class":942}," :class",[867,1649,949],{"class":877},[867,1651,1181],{"class":877},[867,1653,1654],{"class":894},"checkbox({ size })",[867,1656,1181],{"class":877},[867,1658,1188],{"class":877},[867,1660,1662,1665],{"class":869,"line":1661},31,[867,1663,1664],{"class":877},"        \u003C",[867,1666,1667],{"class":1169},"input\n",[867,1669,1671,1674,1676,1678,1680],{"class":869,"line":1670},32,[867,1672,1673],{"class":942},"            ref",[867,1675,949],{"class":877},[867,1677,1181],{"class":877},[867,1679,1547],{"class":894},[867,1681,1682],{"class":877},"\"\n",[867,1684,1686,1689,1691,1693,1695],{"class":869,"line":1685},33,[867,1687,1688],{"class":942},"            type",[867,1690,949],{"class":877},[867,1692,1181],{"class":877},[867,1694,1130],{"class":894},[867,1696,1682],{"class":877},[867,1698,1700,1703,1705,1707,1710],{"class":869,"line":1699},34,[867,1701,1702],{"class":942},"            :class",[867,1704,949],{"class":877},[867,1706,1181],{"class":877},[867,1708,1709],{"class":894},"checkboxField({ color, size })",[867,1711,1682],{"class":877},[867,1713,1715,1718,1720,1722,1725],{"class":869,"line":1714},35,[867,1716,1717],{"class":942},"            :checked",[867,1719,949],{"class":877},[867,1721,1181],{"class":877},[867,1723,1724],{"class":894},"checked",[867,1726,1682],{"class":877},[867,1728,1730,1733,1735,1737,1740],{"class":869,"line":1729},36,[867,1731,1732],{"class":942},"            :disabled",[867,1734,949],{"class":877},[867,1736,1181],{"class":877},[867,1738,1739],{"class":894},"disabled",[867,1741,1682],{"class":877},[867,1743,1745],{"class":869,"line":1744},37,[867,1746,1747],{"class":877},"        \u002F>\n",[867,1749,1751,1753,1755,1757,1760,1762,1764],{"class":869,"line":1750},38,[867,1752,1664],{"class":877},[867,1754,867],{"class":1169},[867,1756,1506],{"class":877},[867,1758,1759],{"class":881},"{{ label }}",[867,1761,1617],{"class":877},[867,1763,867],{"class":1169},[867,1765,1188],{"class":877},[867,1767,1769,1772,1774],{"class":869,"line":1768},39,[867,1770,1771],{"class":877},"    \u003C\u002F",[867,1773,1644],{"class":1169},[867,1775,1188],{"class":877},[867,1777,1779,1781,1783],{"class":869,"line":1778},40,[867,1780,1617],{"class":877},[867,1782,1152],{"class":1169},[867,1784,1188],{"class":877},[1152,1786,1787],{"v-slot:react":863},[858,1788,1791],{"className":860,"code":1789,"filename":1790,"language":862,"meta":863,"style":863},"import { useEffect, useRef } from \"react\";\nimport { checkbox, checkboxField } from \"virtual:styleframe\";\n\ninterface CheckboxProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    label?: string;\n}\n\nexport function Checkbox({\n    color = \"neutral\",\n    size = \"md\",\n    checked = false,\n    indeterminate = false,\n    disabled = false,\n    label,\n}: CheckboxProps) {\n    const field = useRef\u003CHTMLInputElement>(null);\n\n    useEffect(() => {\n        if (field.current) field.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    return (\n        \u003Clabel className={checkbox({ size })}>\n            \u003Cinput\n                ref={field}\n                type=\"checkbox\"\n                className={checkboxField({ color, size })}\n                checked={checked}\n                disabled={disabled}\n                readOnly\n            \u002F>\n            \u003Cspan>{label}\u003C\u002Fspan>\n        \u003C\u002Flabel>\n    );\n}\n","src\u002Fcomponents\u002FCheckbox.tsx",[708,1792,1793,1820,1844,1848,1858,1888,1918,1928,1938,1948,1958,1963,1967,1980,1995,2009,2019,2029,2039,2045,2056,2082,2086,2099,2131,2146,2150,2158,2181,2188,2199,2212,2233,2244,2255,2260,2265,2285,2294,2301],{"__ignoreMap":863},[867,1794,1795,1797,1799,1802,1804,1807,1809,1811,1813,1816,1818],{"class":869,"line":870},[867,1796,874],{"class":873},[867,1798,878],{"class":877},[867,1800,1801],{"class":881}," useEffect",[867,1803,914],{"class":877},[867,1805,1806],{"class":881}," useRef",[867,1808,885],{"class":877},[867,1810,888],{"class":873},[867,1812,1214],{"class":877},[867,1814,1815],{"class":894},"react",[867,1817,1181],{"class":877},[867,1819,901],{"class":877},[867,1821,1822,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842],{"class":869,"line":904},[867,1823,874],{"class":873},[867,1825,878],{"class":877},[867,1827,1229],{"class":881},[867,1829,914],{"class":877},[867,1831,1234],{"class":881},[867,1833,885],{"class":877},[867,1835,888],{"class":873},[867,1837,1214],{"class":877},[867,1839,895],{"class":894},[867,1841,1181],{"class":877},[867,1843,901],{"class":877},[867,1845,1846],{"class":869,"line":933},[867,1847,936],{"emptyLinePlaceholder":223},[867,1849,1850,1853,1856],{"class":869,"line":939},[867,1851,1852],{"class":942},"interface",[867,1854,1855],{"class":1427}," CheckboxProps",[867,1857,1257],{"class":877},[867,1859,1860,1862,1864,1866,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886],{"class":869,"line":960},[867,1861,1354],{"class":1169},[867,1863,1357],{"class":877},[867,1865,1214],{"class":877},[867,1867,754],{"class":894},[867,1869,1181],{"class":877},[867,1871,1366],{"class":877},[867,1873,1214],{"class":877},[867,1875,757],{"class":894},[867,1877,1181],{"class":877},[867,1879,1366],{"class":877},[867,1881,1214],{"class":877},[867,1883,760],{"class":894},[867,1885,1181],{"class":877},[867,1887,901],{"class":877},[867,1889,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916],{"class":869,"line":965},[867,1891,1388],{"class":1169},[867,1893,1357],{"class":877},[867,1895,1214],{"class":877},[867,1897,1395],{"class":894},[867,1899,1181],{"class":877},[867,1901,1366],{"class":877},[867,1903,1214],{"class":877},[867,1905,1285],{"class":894},[867,1907,1181],{"class":877},[867,1909,1366],{"class":877},[867,1911,1214],{"class":877},[867,1913,1412],{"class":894},[867,1915,1181],{"class":877},[867,1917,901],{"class":877},[867,1919,1920,1922,1924,1926],{"class":869,"line":982},[867,1921,1422],{"class":1169},[867,1923,1357],{"class":877},[867,1925,1428],{"class":1427},[867,1927,901],{"class":877},[867,1929,1930,1932,1934,1936],{"class":869,"line":998},[867,1931,1436],{"class":1169},[867,1933,1357],{"class":877},[867,1935,1428],{"class":1427},[867,1937,901],{"class":877},[867,1939,1940,1942,1944,1946],{"class":869,"line":1003},[867,1941,1448],{"class":1169},[867,1943,1357],{"class":877},[867,1945,1428],{"class":1427},[867,1947,901],{"class":877},[867,1949,1950,1952,1954,1956],{"class":869,"line":1316},[867,1951,1331],{"class":1169},[867,1953,1357],{"class":877},[867,1955,1464],{"class":1427},[867,1957,901],{"class":877},[867,1959,1960],{"class":869,"line":1328},[867,1961,1962],{"class":877},"}\n",[867,1964,1965],{"class":869,"line":1336},[867,1966,936],{"emptyLinePlaceholder":223},[867,1968,1969,1971,1974,1977],{"class":869,"line":1351},[867,1970,1006],{"class":873},[867,1972,1973],{"class":942}," function",[867,1975,1976],{"class":952}," Checkbox",[867,1978,1979],{"class":877},"({\n",[867,1981,1982,1985,1987,1989,1991,1993],{"class":869,"line":1385},[867,1983,1354],{"class":1984},"sHdIc",[867,1986,1342],{"class":877},[867,1988,1214],{"class":877},[867,1990,760],{"class":894},[867,1992,1181],{"class":877},[867,1994,1273],{"class":877},[867,1996,1997,1999,2001,2003,2005,2007],{"class":869,"line":1419},[867,1998,1388],{"class":1984},[867,2000,1342],{"class":877},[867,2002,1214],{"class":877},[867,2004,1285],{"class":894},[867,2006,1181],{"class":877},[867,2008,1273],{"class":877},[867,2010,2011,2013,2015,2017],{"class":869,"line":1433},[867,2012,1422],{"class":1984},[867,2014,1342],{"class":877},[867,2016,1300],{"class":1299},[867,2018,1273],{"class":877},[867,2020,2021,2023,2025,2027],{"class":869,"line":1445},[867,2022,1436],{"class":1984},[867,2024,1342],{"class":877},[867,2026,1300],{"class":1299},[867,2028,1273],{"class":877},[867,2030,2031,2033,2035,2037],{"class":869,"line":1457},[867,2032,1448],{"class":1984},[867,2034,1342],{"class":877},[867,2036,1300],{"class":1299},[867,2038,1273],{"class":877},[867,2040,2041,2043],{"class":869,"line":1469},[867,2042,1331],{"class":1984},[867,2044,1273],{"class":877},[867,2046,2047,2050,2052,2054],{"class":869,"line":1479},[867,2048,2049],{"class":877},"}:",[867,2051,1855],{"class":1427},[867,2053,1515],{"class":877},[867,2055,1257],{"class":877},[867,2057,2058,2061,2064,2066,2068,2070,2072,2074,2076,2078,2080],{"class":869,"line":1484},[867,2059,2060],{"class":942},"    const",[867,2062,2063],{"class":881}," field",[867,2065,1342],{"class":877},[867,2067,1806],{"class":952},[867,2069,1166],{"class":877},[867,2071,1498],{"class":1427},[867,2073,1506],{"class":877},[867,2075,1509],{"class":1169},[867,2077,1512],{"class":877},[867,2079,1515],{"class":1169},[867,2081,901],{"class":877},[867,2083,2084],{"class":869,"line":1520},[867,2085,936],{"emptyLinePlaceholder":223},[867,2087,2088,2091,2093,2095,2097],{"class":869,"line":1538},[867,2089,2090],{"class":952},"    useEffect",[867,2092,1509],{"class":1169},[867,2094,955],{"class":877},[867,2096,1533],{"class":942},[867,2098,1257],{"class":877},[867,2100,2101,2104,2106,2108,2110,2113,2115,2117,2119,2121,2123,2125,2127,2129],{"class":869,"line":1576},[867,2102,2103],{"class":873},"        if",[867,2105,1544],{"class":1169},[867,2107,1547],{"class":881},[867,2109,1550],{"class":877},[867,2111,2112],{"class":881},"current",[867,2114,1556],{"class":1169},[867,2116,1547],{"class":881},[867,2118,1550],{"class":877},[867,2120,2112],{"class":881},[867,2122,1550],{"class":877},[867,2124,1146],{"class":881},[867,2126,1342],{"class":877},[867,2128,1571],{"class":881},[867,2130,901],{"class":877},[867,2132,2133,2136,2139,2141,2144],{"class":869,"line":1582},[867,2134,2135],{"class":877},"    },",[867,2137,2138],{"class":1169}," [",[867,2140,1146],{"class":881},[867,2142,2143],{"class":1169},"])",[867,2145,901],{"class":877},[867,2147,2148],{"class":869,"line":1593},[867,2149,936],{"emptyLinePlaceholder":223},[867,2151,2152,2155],{"class":869,"line":1614},[867,2153,2154],{"class":873},"    return",[867,2156,2157],{"class":1169}," (\n",[867,2159,2160,2162,2164,2167,2170,2172,2175,2178],{"class":869,"line":1624},[867,2161,1664],{"class":877},[867,2163,1644],{"class":881},[867,2165,2166],{"class":881}," className",[867,2168,2169],{"class":877},"={",[867,2171,1130],{"class":1169},[867,2173,2174],{"class":877},"({",[867,2176,2177],{"class":1984}," size",[867,2179,2180],{"class":877}," })}>\n",[867,2182,2183,2186],{"class":869,"line":1629},[867,2184,2185],{"class":877},"            \u003C",[867,2187,1667],{"class":1984},[867,2189,2190,2193,2195,2197],{"class":869,"line":1638},[867,2191,2192],{"class":881},"                ref",[867,2194,2169],{"class":877},[867,2196,1547],{"class":881},[867,2198,1962],{"class":877},[867,2200,2201,2204,2206,2208,2210],{"class":869,"line":1661},[867,2202,2203],{"class":881},"                type",[867,2205,949],{"class":877},[867,2207,1181],{"class":877},[867,2209,1130],{"class":894},[867,2211,1682],{"class":877},[867,2213,2214,2217,2219,2221,2223,2226,2228,2230],{"class":869,"line":1670},[867,2215,2216],{"class":881},"                className",[867,2218,2169],{"class":877},[867,2220,1138],{"class":1169},[867,2222,2174],{"class":877},[867,2224,2225],{"class":1984}," color",[867,2227,914],{"class":877},[867,2229,2177],{"class":1984},[867,2231,2232],{"class":877}," })}\n",[867,2234,2235,2238,2240,2242],{"class":869,"line":1685},[867,2236,2237],{"class":881},"                checked",[867,2239,2169],{"class":877},[867,2241,1724],{"class":881},[867,2243,1962],{"class":877},[867,2245,2246,2249,2251,2253],{"class":869,"line":1699},[867,2247,2248],{"class":881},"                disabled",[867,2250,2169],{"class":877},[867,2252,1739],{"class":881},[867,2254,1962],{"class":877},[867,2256,2257],{"class":869,"line":1714},[867,2258,2259],{"class":1984},"                readOnly\n",[867,2261,2262],{"class":869,"line":1729},[867,2263,2264],{"class":877},"            \u002F>\n",[867,2266,2267,2269,2271,2273,2276,2278,2281,2283],{"class":869,"line":1744},[867,2268,2185],{"class":1169},[867,2270,867],{"class":1427},[867,2272,1506],{"class":1169},[867,2274,2275],{"class":877},"{",[867,2277,1644],{"class":881},[867,2279,2280],{"class":877},"}\u003C\u002F",[867,2282,867],{"class":881},[867,2284,1188],{"class":877},[867,2286,2287,2290,2292],{"class":869,"line":1750},[867,2288,2289],{"class":877},"        \u003C\u002F",[867,2291,1644],{"class":881},[867,2293,1188],{"class":877},[867,2295,2296,2299],{"class":869,"line":1768},[867,2297,2298],{"class":1169},"    )",[867,2300,901],{"class":877},[867,2302,2303],{"class":869,"line":1778},[867,2304,1962],{"class":877},[1152,2306,2307,2316,2440],{"v-slot:other":863},[692,2308,694,2309,726,2312,2315],{},[708,2310,2311],{},"checkbox()",[708,2313,2314],{},"checkboxField()"," runtimes each return a class string. Apply them however your framework binds classes:",[858,2317,2320],{"className":860,"code":2318,"filename":2319,"language":862,"meta":863,"style":863},"import { checkbox, checkboxField } from \"virtual:styleframe\";\n\nconst wrapperClasses = checkbox({ size: \"md\" });\n\u002F\u002F → \"checkbox _display:inline-flex _align-items:center ...\"\n\nconst fieldClasses = checkboxField({ color: \"neutral\", size: \"md\" });\n\u002F\u002F → \"checkbox-field _appearance:none _border-width:thin ...\"\n","src\u002Fcomponents\u002Fcheckbox.ts",[708,2321,2322,2346,2350,2382,2388,2392,2435],{"__ignoreMap":863},[867,2323,2324,2326,2328,2330,2332,2334,2336,2338,2340,2342,2344],{"class":869,"line":870},[867,2325,874],{"class":873},[867,2327,878],{"class":877},[867,2329,1229],{"class":881},[867,2331,914],{"class":877},[867,2333,1234],{"class":881},[867,2335,885],{"class":877},[867,2337,888],{"class":873},[867,2339,1214],{"class":877},[867,2341,895],{"class":894},[867,2343,1181],{"class":877},[867,2345,901],{"class":877},[867,2347,2348],{"class":869,"line":904},[867,2349,936],{"emptyLinePlaceholder":223},[867,2351,2352,2354,2357,2359,2361,2363,2365,2367,2370,2372,2374,2376,2378,2380],{"class":869,"line":933},[867,2353,943],{"class":942},[867,2355,2356],{"class":881}," wrapperClasses ",[867,2358,949],{"class":877},[867,2360,1229],{"class":952},[867,2362,1509],{"class":881},[867,2364,2275],{"class":877},[867,2366,2177],{"class":1169},[867,2368,2369],{"class":877},":",[867,2371,1214],{"class":877},[867,2373,1285],{"class":894},[867,2375,1181],{"class":877},[867,2377,885],{"class":877},[867,2379,1515],{"class":881},[867,2381,901],{"class":877},[867,2383,2384],{"class":869,"line":939},[867,2385,2387],{"class":2386},"sHwdD","\u002F\u002F → \"checkbox _display:inline-flex _align-items:center ...\"\n",[867,2389,2390],{"class":869,"line":960},[867,2391,936],{"emptyLinePlaceholder":223},[867,2393,2394,2396,2399,2401,2403,2405,2407,2409,2411,2413,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433],{"class":869,"line":965},[867,2395,943],{"class":942},[867,2397,2398],{"class":881}," fieldClasses ",[867,2400,949],{"class":877},[867,2402,1234],{"class":952},[867,2404,1509],{"class":881},[867,2406,2275],{"class":877},[867,2408,2225],{"class":1169},[867,2410,2369],{"class":877},[867,2412,1214],{"class":877},[867,2414,760],{"class":894},[867,2416,1181],{"class":877},[867,2418,914],{"class":877},[867,2420,2177],{"class":1169},[867,2422,2369],{"class":877},[867,2424,1214],{"class":877},[867,2426,1285],{"class":894},[867,2428,1181],{"class":877},[867,2430,885],{"class":877},[867,2432,1515],{"class":881},[867,2434,901],{"class":877},[867,2436,2437],{"class":869,"line":982},[867,2438,2439],{"class":2386},"\u002F\u002F → \"checkbox-field _appearance:none _border-width:thin ...\"\n",[858,2441,2446],{"className":2442,"code":2443,"filename":2444,"language":2445,"meta":863,"style":863},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Clabel class=\"checkbox _display:inline-flex _align-items:center ...\">\n    \u003Cinput type=\"checkbox\" class=\"checkbox-field _appearance:none ...\" \u002F>\n    \u003Cspan>Accept terms and conditions\u003C\u002Fspan>\n\u003C\u002Flabel>\n","src\u002Fcomponents\u002Fcheckbox.html","html",[708,2447,2448,2468,2500,2517],{"__ignoreMap":863},[867,2449,2450,2452,2454,2457,2459,2461,2464,2466],{"class":869,"line":870},[867,2451,1166],{"class":877},[867,2453,1644],{"class":1169},[867,2455,2456],{"class":942}," class",[867,2458,949],{"class":877},[867,2460,1181],{"class":877},[867,2462,2463],{"class":894},"checkbox _display:inline-flex _align-items:center ...",[867,2465,1181],{"class":877},[867,2467,1188],{"class":877},[867,2469,2470,2472,2475,2478,2480,2482,2484,2486,2488,2490,2492,2495,2497],{"class":869,"line":904},[867,2471,1641],{"class":877},[867,2473,2474],{"class":1169},"input",[867,2476,2477],{"class":942}," type",[867,2479,949],{"class":877},[867,2481,1181],{"class":877},[867,2483,1130],{"class":894},[867,2485,1181],{"class":877},[867,2487,2456],{"class":942},[867,2489,949],{"class":877},[867,2491,1181],{"class":877},[867,2493,2494],{"class":894},"checkbox-field _appearance:none ...",[867,2496,1181],{"class":877},[867,2498,2499],{"class":877}," \u002F>\n",[867,2501,2502,2504,2506,2508,2511,2513,2515],{"class":869,"line":933},[867,2503,1641],{"class":877},[867,2505,867],{"class":1169},[867,2507,1506],{"class":877},[867,2509,2510],{"class":881},"Accept terms and conditions",[867,2512,1617],{"class":877},[867,2514,867],{"class":1169},[867,2516,1188],{"class":877},[867,2518,2519,2521,2523],{"class":869,"line":939},[867,2520,1617],{"class":877},[867,2522,1644],{"class":1169},[867,2524,1188],{"class":877},[842,2526,2528],{"id":2527},"see-it-in-action","See it in action",[2530,2531],"story-preview",{"story":2532,":panel":2533},"theme-recipes-forms-checkbox--default","true",[688,2535,195],{"id":2536},"colors",[692,2538,2539,2540,734,2542,2544,2545,2547,2548,2550,2551,2553,2554,1550],{},"The Checkbox field includes 3 color variants: ",[708,2541,754],{},[708,2543,757],{},", and ",[708,2546,760],{},". Like the ",[769,2549,452],{"href":453}," and Card recipes, these are neutral-spectrum surface colors rather than status colors — the color sets the ",[748,2552,750],{}," box background and border, while the checked and indeterminate fill is always ",[708,2555,733],{},[692,2557,694,2558,2560],{},[708,2559,760],{}," color adapts automatically: a light surface in light mode and a dark surface in dark mode, making it the safest default for general-purpose forms.",[2530,2562],{"story":2563,":panel":2533},"theme-recipes-forms-checkbox--neutral",[2565,2566,2568],"h3",{"id":2567},"color-reference","Color Reference",[2530,2570],{"story":2571,":height":2572},"theme-recipes-forms-checkbox--all-states","420",[2574,2575,2576,2592],"table",{},[2577,2578,2579],"thead",{},[2580,2581,2582,2586,2589],"tr",{},[2583,2584,2585],"th",{},"Color",[2583,2587,2588],{},"Token",[2583,2590,2591],{},"Use Case",[2593,2594,2595,2614,2631],"tbody",{},[2580,2596,2597,2602,2611],{},[2598,2599,2600],"td",{},[708,2601,754],{},[2598,2603,2604,2607,2608],{},[708,2605,2606],{},"@color.white"," \u002F ",[708,2609,2610],{},"@color.gray-300",[2598,2612,2613],{},"Light surfaces, stays light in dark mode",[2580,2615,2616,2620,2628],{},[2598,2617,2618],{},[708,2619,757],{},[2598,2621,2622,2607,2625],{},[708,2623,2624],{},"@color.gray-900",[708,2626,2627],{},"@color.gray-600",[2598,2629,2630],{},"Dark surfaces, stays dark in light mode",[2580,2632,2633,2637,2640],{},[2598,2634,2635],{},[708,2636,760],{},[2598,2638,2639],{},"Adaptive (light ↔ dark)",[2598,2641,2642],{},"Default color, adapts to the current color scheme",[2644,2645,2646,2649,2650,2652],"tip",{},[696,2647,2648],{},"Pro tip:"," Use ",[708,2651,760],{}," as your default checkbox color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark surfaces separately.",[688,2654,2656],{"id":2655},"sizes","Sizes",[692,2658,2659,2660,2662,2663,2665,2666,2669,2670,2673],{},"Three size variants from ",[708,2661,1395],{}," to ",[708,2664,1412],{}," control the box dimensions and border radius. The checkmark is a white SVG ",[708,2667,2668],{},"background-image"," sized with ",[708,2671,2672],{},"background-size: contain",", so it stays crisp and scales with the box.",[2530,2675],{"story":2676,":height":2677},"theme-recipes-forms-checkbox--all-sizes","320",[2565,2679,2681],{"id":2680},"size-reference","Size Reference",[2574,2683,2684,2697],{},[2577,2685,2686],{},[2580,2687,2688,2691,2694],{},[2583,2689,2690],{},"Size",[2583,2692,2693],{},"Box Size",[2583,2695,2696],{},"Border Radius",[2593,2698,2699,2715,2730],{},[2580,2700,2701,2705,2710],{},[2598,2702,2703],{},[708,2704,1395],{},[2598,2706,2707],{},[708,2708,2709],{},"14px",[2598,2711,2712],{},[708,2713,2714],{},"@border-radius.sm",[2580,2716,2717,2721,2726],{},[2598,2718,2719],{},[708,2720,1285],{},[2598,2722,2723],{},[708,2724,2725],{},"16px",[2598,2727,2728],{},[708,2729,2714],{},[2580,2731,2732,2736,2741],{},[2598,2733,2734],{},[708,2735,1412],{},[2598,2737,2738],{},[708,2739,2740],{},"20px",[2598,2742,2743],{},[708,2744,2745],{},"@border-radius.md",[2747,2748,2749,2752,2753,2756,2757,2759,2760,2762],"note",{},[696,2750,2751],{},"Good to know:"," Pass the same ",[708,2754,2755],{},"size"," to the ",[708,2758,1130],{}," wrapper and the ",[708,2761,1138],{}," box so the label typography, gap, and box scale together.",[688,2764,342],{"id":2765},"states",[692,2767,2768,2769,2772],{},"The field's states ride on native pseudo-classes, so they reflect the real ",[708,2770,2771],{},"\u003Cinput>"," without extra wiring.",[2565,2774,2775],{"id":1724},"Checked",[692,2777,2778,2780,2781,2783,2784,2786,2787,2790],{},[708,2779,725],{}," fills the box with ",[708,2782,733],{}," and reveals the white SVG checkmark. Bind the native ",[708,2785,1724],{}," attribute (or ",[708,2788,2789],{},"v-model"," \u002F controlled value) as usual.",[2530,2792],{"story":2793,":panel":2533},"theme-recipes-forms-checkbox--checked",[2565,2795,2796],{"id":1146},"Indeterminate",[692,2798,2799,2780,2801,2803,2804,2807,2808,2811],{},[708,2800,729],{},[708,2802,733],{}," and shows a horizontal dash instead of the checkmark — use it for a \"select all\" control whose children are partially selected. Indeterminate is a DOM property only, so set ",[708,2805,2806],{},"el.indeterminate = true"," on the input via a ref (see ",[769,2809,1124],{"href":2810},"#build-the-component",").",[2530,2813],{"story":2814,":panel":2533},"theme-recipes-forms-checkbox--indeterminate",[2565,2816,2817],{"id":1739},"Disabled",[692,2819,2820,2822,2823,2826,2827,2830,2831,2834,2835,2837],{},[708,2821,741],{}," dims the box to ",[708,2824,2825],{},"0.5"," opacity and switches the cursor to ",[708,2828,2829],{},"not-allowed","; the wrapper dims its label to match via ",[708,2832,2833],{},":has()",". Mirror it with the native ",[708,2836,1739],{}," attribute so the input is also removed from the tab order.",[2530,2839],{"story":2840,":panel":2533},"theme-recipes-forms-checkbox--disabled",[688,2842,2844],{"id":2843},"anatomy","Anatomy",[692,2846,2847],{},"The Checkbox is composed of two independent recipes: a label wrapper and the native input box.",[2574,2849,2850,2863],{},[2577,2851,2852],{},[2580,2853,2854,2857,2860],{},[2583,2855,2856],{},"Part",[2583,2858,2859],{},"Recipe",[2583,2861,2862],{},"Role",[2593,2864,2865,2885],{},[2580,2866,2867,2872,2876],{},[2598,2868,2869],{},[696,2870,2871],{},"Wrapper",[2598,2873,2874],{},[708,2875,710],{},[2598,2877,694,2878,2881,2882,2884],{},[708,2879,2880],{},".checkbox"," ",[708,2883,1134],{}," — owns inline layout (gap, alignment), label typography, and disabled-label dimming",[2580,2886,2887,2892,2896],{},[2598,2888,2889],{},[696,2890,2891],{},"Field",[2598,2893,2894],{},[708,2895,718],{},[2598,2897,694,2898,2901,2902,2904],{},[708,2899,2900],{},".checkbox-field"," native ",[708,2903,1142],{}," — owns the box, checkmark, color surface, and checked \u002F indeterminate \u002F disabled \u002F focus states",[858,2906,2908],{"className":2442,"code":2907,"language":2445,"meta":863,"style":863},"\u003Clabel class=\"checkbox(...)\">\n    \u003Cinput type=\"checkbox\" class=\"checkboxField(...)\" \u002F>\n    \u003Cspan>Accept terms and conditions\u003C\u002Fspan>\n\u003C\u002Flabel>\n",[708,2909,2910,2929,2958,2974],{"__ignoreMap":863},[867,2911,2912,2914,2916,2918,2920,2922,2925,2927],{"class":869,"line":870},[867,2913,1166],{"class":877},[867,2915,1644],{"class":1169},[867,2917,2456],{"class":942},[867,2919,949],{"class":877},[867,2921,1181],{"class":877},[867,2923,2924],{"class":894},"checkbox(...)",[867,2926,1181],{"class":877},[867,2928,1188],{"class":877},[867,2930,2931,2933,2935,2937,2939,2941,2943,2945,2947,2949,2951,2954,2956],{"class":869,"line":904},[867,2932,1641],{"class":877},[867,2934,2474],{"class":1169},[867,2936,2477],{"class":942},[867,2938,949],{"class":877},[867,2940,1181],{"class":877},[867,2942,1130],{"class":894},[867,2944,1181],{"class":877},[867,2946,2456],{"class":942},[867,2948,949],{"class":877},[867,2950,1181],{"class":877},[867,2952,2953],{"class":894},"checkboxField(...)",[867,2955,1181],{"class":877},[867,2957,2499],{"class":877},[867,2959,2960,2962,2964,2966,2968,2970,2972],{"class":869,"line":933},[867,2961,1641],{"class":877},[867,2963,867],{"class":1169},[867,2965,1506],{"class":877},[867,2967,2510],{"class":881},[867,2969,1617],{"class":877},[867,2971,867],{"class":1169},[867,2973,1188],{"class":877},[867,2975,2976,2978,2980],{"class":869,"line":939},[867,2977,1617],{"class":877},[867,2979,1644],{"class":1169},[867,2981,1188],{"class":877},[692,2983,2984,2985,2988],{},"The wrapper dims its own label when it contains a disabled field, using ",[708,2986,2987],{},":has(.checkbox-field:disabled)",", so a disabled checkbox and its text fade together without extra props.",[688,2990,568],{"id":2991},"accessibility",[700,2993,2994,3007,3020,3032,3044,3057],{},[703,2995,2996,2999,3000,3002,3003,3006],{},[696,2997,2998],{},"Label every checkbox."," Wrap the input and its text in the ",[708,3001,1134],{}," (as the wrapper does) or associate a separate ",[708,3004,3005],{},"\u003Clabel for=\"...\">",". The recipe styles the control but does not provide a name.",[703,3008,3009,3012,3013,3015,3016,3019],{},[696,3010,3011],{},"Keep the native input."," Styling the real ",[708,3014,1142],{}," with ",[708,3017,3018],{},"appearance: none"," preserves keyboard operation (Space toggles), focus order, and form submission for free.",[703,3021,3022,3028,3029,3031],{},[696,3023,3024,3025,3027],{},"Set ",[708,3026,1146],{}," on the element."," Indeterminate is a visual + accessibility state exposed only as a DOM property; set ",[708,3030,2806],{}," so assistive technology reports \"mixed\".",[703,3033,3034,3040,3041,3043],{},[696,3035,3036,3037,3039],{},"Mirror ",[708,3038,1739],{}," on the input."," Set the real ",[708,3042,1739],{}," attribute in addition to the recipe state so the field leaves the tab order.",[703,3045,3046,3049,3050,3056],{},[696,3047,3048],{},"Don't rely on color alone."," The checked state is conveyed by the checkmark, not just the fill color, satisfying ",[769,3051,3055],{"href":3052,"rel":3053},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[3054],"nofollow","WCAG 1.4.1",". Keep the adjacent label text descriptive.",[703,3058,3059,3062,3063,3065,3066,3068,3069,1550],{},[696,3060,3061],{},"Verify contrast."," The checkmark is ",[708,3064,2606],{}," on a ",[708,3067,733],{}," fill. Default tokens meet WCAG AA; if you override the primary color, verify with the ",[769,3070,3073],{"href":3071,"rel":3072},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3054],"WebAIM Contrast Checker",[688,3075,3077],{"id":3076},"customization","Customization",[2565,3079,3081],{"id":3080},"overriding-defaults","Overriding Defaults",[692,3083,3084],{},"Each checkbox 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:",[858,3086,3088],{"className":860,"code":3087,"filename":856,"language":862,"meta":863,"style":863},"import { styleframe } from 'virtual:styleframe';\nimport { useCheckboxFieldRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst checkboxField = useCheckboxFieldRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.md',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[708,3089,3090,3110,3130,3134,3148,3152,3169,3178,3193,3198,3207,3222,3237,3241,3249,3253],{"__ignoreMap":863},[867,3091,3092,3094,3096,3098,3100,3102,3104,3106,3108],{"class":869,"line":870},[867,3093,874],{"class":873},[867,3095,878],{"class":877},[867,3097,882],{"class":881},[867,3099,885],{"class":877},[867,3101,888],{"class":873},[867,3103,891],{"class":877},[867,3105,895],{"class":894},[867,3107,898],{"class":877},[867,3109,901],{"class":877},[867,3111,3112,3114,3116,3118,3120,3122,3124,3126,3128],{"class":869,"line":904},[867,3113,874],{"class":873},[867,3115,878],{"class":877},[867,3117,917],{"class":881},[867,3119,885],{"class":877},[867,3121,888],{"class":873},[867,3123,891],{"class":877},[867,3125,926],{"class":894},[867,3127,898],{"class":877},[867,3129,901],{"class":877},[867,3131,3132],{"class":869,"line":933},[867,3133,936],{"emptyLinePlaceholder":223},[867,3135,3136,3138,3140,3142,3144,3146],{"class":869,"line":939},[867,3137,943],{"class":942},[867,3139,946],{"class":881},[867,3141,949],{"class":877},[867,3143,882],{"class":952},[867,3145,955],{"class":881},[867,3147,901],{"class":877},[867,3149,3150],{"class":869,"line":960},[867,3151,936],{"emptyLinePlaceholder":223},[867,3153,3154,3156,3158,3160,3162,3165,3167],{"class":869,"line":965},[867,3155,943],{"class":942},[867,3157,987],{"class":881},[867,3159,949],{"class":877},[867,3161,917],{"class":952},[867,3163,3164],{"class":881},"(s",[867,3166,914],{"class":877},[867,3168,1257],{"class":877},[867,3170,3171,3174,3176],{"class":869,"line":982},[867,3172,3173],{"class":1169},"    base",[867,3175,2369],{"class":877},[867,3177,1257],{"class":877},[867,3179,3180,3183,3185,3187,3189,3191],{"class":869,"line":998},[867,3181,3182],{"class":1169},"        borderRadius",[867,3184,2369],{"class":877},[867,3186,891],{"class":877},[867,3188,2745],{"class":894},[867,3190,898],{"class":877},[867,3192,1273],{"class":877},[867,3194,3195],{"class":869,"line":1003},[867,3196,3197],{"class":877},"    },\n",[867,3199,3200,3203,3205],{"class":869,"line":1316},[867,3201,3202],{"class":1169},"    defaultVariants",[867,3204,2369],{"class":877},[867,3206,1257],{"class":877},[867,3208,3209,3212,3214,3216,3218,3220],{"class":869,"line":1328},[867,3210,3211],{"class":1169},"        color",[867,3213,2369],{"class":877},[867,3215,891],{"class":877},[867,3217,760],{"class":894},[867,3219,898],{"class":877},[867,3221,1273],{"class":877},[867,3223,3224,3227,3229,3231,3233,3235],{"class":869,"line":1336},[867,3225,3226],{"class":1169},"        size",[867,3228,2369],{"class":877},[867,3230,891],{"class":877},[867,3232,1412],{"class":894},[867,3234,898],{"class":877},[867,3236,1273],{"class":877},[867,3238,3239],{"class":869,"line":1351},[867,3240,3197],{"class":877},[867,3242,3243,3245,3247],{"class":869,"line":1385},[867,3244,1339],{"class":877},[867,3246,1515],{"class":881},[867,3248,901],{"class":877},[867,3250,3251],{"class":869,"line":1419},[867,3252,936],{"emptyLinePlaceholder":223},[867,3254,3255,3257,3259,3261],{"class":869,"line":1433},[867,3256,1006],{"class":873},[867,3258,1009],{"class":873},[867,3260,1012],{"class":881},[867,3262,901],{"class":877},[2565,3264,3266],{"id":3265},"filtering-variants","Filtering Variants",[692,3268,3269,3270,3273],{},"If you only need a subset of the available variants, use the ",[708,3271,3272],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[858,3275,3277],{"className":860,"code":3276,"filename":856,"language":862,"meta":863,"style":863},"import { styleframe } from 'virtual:styleframe';\nimport { useCheckboxFieldRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color\nconst checkboxField = useCheckboxFieldRecipe(s, {\n    filter: {\n        color: ['neutral'],\n    },\n});\n\nexport default s;\n",[708,3278,3279,3299,3319,3323,3337,3341,3346,3362,3371,3390,3394,3402,3406],{"__ignoreMap":863},[867,3280,3281,3283,3285,3287,3289,3291,3293,3295,3297],{"class":869,"line":870},[867,3282,874],{"class":873},[867,3284,878],{"class":877},[867,3286,882],{"class":881},[867,3288,885],{"class":877},[867,3290,888],{"class":873},[867,3292,891],{"class":877},[867,3294,895],{"class":894},[867,3296,898],{"class":877},[867,3298,901],{"class":877},[867,3300,3301,3303,3305,3307,3309,3311,3313,3315,3317],{"class":869,"line":904},[867,3302,874],{"class":873},[867,3304,878],{"class":877},[867,3306,917],{"class":881},[867,3308,885],{"class":877},[867,3310,888],{"class":873},[867,3312,891],{"class":877},[867,3314,926],{"class":894},[867,3316,898],{"class":877},[867,3318,901],{"class":877},[867,3320,3321],{"class":869,"line":933},[867,3322,936],{"emptyLinePlaceholder":223},[867,3324,3325,3327,3329,3331,3333,3335],{"class":869,"line":939},[867,3326,943],{"class":942},[867,3328,946],{"class":881},[867,3330,949],{"class":877},[867,3332,882],{"class":952},[867,3334,955],{"class":881},[867,3336,901],{"class":877},[867,3338,3339],{"class":869,"line":960},[867,3340,936],{"emptyLinePlaceholder":223},[867,3342,3343],{"class":869,"line":965},[867,3344,3345],{"class":2386},"\u002F\u002F Only generate the neutral color\n",[867,3347,3348,3350,3352,3354,3356,3358,3360],{"class":869,"line":982},[867,3349,943],{"class":942},[867,3351,987],{"class":881},[867,3353,949],{"class":877},[867,3355,917],{"class":952},[867,3357,3164],{"class":881},[867,3359,914],{"class":877},[867,3361,1257],{"class":877},[867,3363,3364,3367,3369],{"class":869,"line":998},[867,3365,3366],{"class":1169},"    filter",[867,3368,2369],{"class":877},[867,3370,1257],{"class":877},[867,3372,3373,3375,3377,3379,3381,3383,3385,3388],{"class":869,"line":1003},[867,3374,3211],{"class":1169},[867,3376,2369],{"class":877},[867,3378,2138],{"class":881},[867,3380,898],{"class":877},[867,3382,760],{"class":894},[867,3384,898],{"class":877},[867,3386,3387],{"class":881},"]",[867,3389,1273],{"class":877},[867,3391,3392],{"class":869,"line":1316},[867,3393,3197],{"class":877},[867,3395,3396,3398,3400],{"class":869,"line":1328},[867,3397,1339],{"class":877},[867,3399,1515],{"class":881},[867,3401,901],{"class":877},[867,3403,3404],{"class":869,"line":1336},[867,3405,936],{"emptyLinePlaceholder":223},[867,3407,3408,3410,3412,3414],{"class":869,"line":1351},[867,3409,1006],{"class":873},[867,3411,1009],{"class":873},[867,3413,1012],{"class":881},[867,3415,901],{"class":877},[2747,3417,3418,3420],{},[696,3419,2751],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,3422,73],{"id":3423},"api-reference",[2565,3425,3427],{"id":3426},"usecheckboxrecipes-options",[708,3428,3429],{},"useCheckboxRecipe(s, options?)",[692,3431,3432,3433,2881,3435,3437],{},"Creates the checkbox wrapper recipe — the ",[708,3434,2880],{},[708,3436,1134],{}," that lays out the box and label and dims the label when the nested field is disabled.",[692,3439,3440],{},[696,3441,3442],{},"Parameters:",[2574,3444,3445,3458],{},[2577,3446,3447],{},[2580,3448,3449,3452,3455],{},[2583,3450,3451],{},"Parameter",[2583,3453,3454],{},"Type",[2583,3456,3457],{},"Description",[2593,3459,3460,3475,3490,3505,3520,3535],{},[2580,3461,3462,3467,3472],{},[2598,3463,3464],{},[708,3465,3466],{},"s",[2598,3468,3469],{},[708,3470,3471],{},"Styleframe",[2598,3473,3474],{},"The Styleframe instance",[2580,3476,3477,3482,3487],{},[2598,3478,3479],{},[708,3480,3481],{},"options",[2598,3483,3484],{},[708,3485,3486],{},"DeepPartial\u003CRecipeConfig>",[2598,3488,3489],{},"Optional overrides for the recipe configuration",[2580,3491,3492,3497,3502],{},[2598,3493,3494],{},[708,3495,3496],{},"options.base",[2598,3498,3499],{},[708,3500,3501],{},"VariantDeclarationsBlock",[2598,3503,3504],{},"Custom base styles for the wrapper",[2580,3506,3507,3512,3517],{},[2598,3508,3509],{},[708,3510,3511],{},"options.variants",[2598,3513,3514],{},[708,3515,3516],{},"Variants",[2598,3518,3519],{},"Custom variant definitions for the recipe",[2580,3521,3522,3527,3532],{},[2598,3523,3524],{},[708,3525,3526],{},"options.defaultVariants",[2598,3528,3529],{},[708,3530,3531],{},"Record\u003Ckeyof Variants, string>",[2598,3533,3534],{},"Default variant values for the recipe",[2580,3536,3537,3542,3547],{},[2598,3538,3539],{},[708,3540,3541],{},"options.filter",[2598,3543,3544],{},[708,3545,3546],{},"Record\u003Cstring, string[]>",[2598,3548,3549],{},"Limit which variant values are generated",[692,3551,3552],{},[696,3553,3554],{},"Variants:",[2574,3556,3557,3570],{},[2577,3558,3559],{},[2580,3560,3561,3564,3567],{},[2583,3562,3563],{},"Variant",[2583,3565,3566],{},"Options",[2583,3568,3569],{},"Default",[2593,3571,3572],{},[2580,3573,3574,3578,3586],{},[2598,3575,3576],{},[708,3577,2755],{},[2598,3579,3580,734,3582,734,3584],{},[708,3581,1395],{},[708,3583,1285],{},[708,3585,1412],{},[2598,3587,3588],{},[708,3589,1285],{},[2565,3591,3593],{"id":3592},"usecheckboxfieldrecipes-options",[708,3594,3595],{},"useCheckboxFieldRecipe(s, options?)",[692,3597,3598,3599,2901,3601,3603,3604,1550],{},"Creates the checkbox field recipe — the ",[708,3600,2900],{},[708,3602,1142],{}," that owns the box, SVG checkmark, surface color, and native states. Accepts the same parameters as ",[708,3605,3606],{},"useCheckboxRecipe",[692,3608,3609],{},[696,3610,3554],{},[2574,3612,3613,3623],{},[2577,3614,3615],{},[2580,3616,3617,3619,3621],{},[2583,3618,3563],{},[2583,3620,3566],{},[2583,3622,3569],{},[2593,3624,3625,3643],{},[2580,3626,3627,3631,3639],{},[2598,3628,3629],{},[708,3630,745],{},[2598,3632,3633,734,3635,734,3637],{},[708,3634,754],{},[708,3636,757],{},[708,3638,760],{},[2598,3640,3641],{},[708,3642,760],{},[2580,3644,3645,3649,3657],{},[2598,3646,3647],{},[708,3648,2755],{},[2598,3650,3651,734,3653,734,3655],{},[708,3652,1395],{},[708,3654,1285],{},[708,3656,1412],{},[2598,3658,3659],{},[708,3660,1285],{},[692,3662,3663],{},[769,3664,3665],{"href":132},"Learn more about recipes →",[688,3667,3669],{"id":3668},"best-practices","Best Practices",[700,3671,3672,3684,3693,3705,3714],{},[703,3673,3674,3680,3681,3683],{},[696,3675,3676,3677,3679],{},"Pass ",[708,3678,2755],{}," to both parts",": Spread the same ",[708,3682,2755],{}," to the wrapper and the field so the label and box scale together.",[703,3685,3686,3692],{},[696,3687,3688,3689,3691],{},"Use ",[708,3690,760],{}," for general forms",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[703,3694,3695,3698,3699,3701,3702,3704],{},[696,3696,3697],{},"Mirror state on the native input",": Set the real ",[708,3700,1739],{}," attribute and the ",[708,3703,1146],{}," DOM property in addition to styling.",[703,3706,3707,3710,3711,3713],{},[696,3708,3709],{},"Group related checkboxes",": Use the ",[769,3712,440],{"href":441}," recipe to lay out a set with consistent spacing.",[703,3715,3716,3719,3720,3722],{},[696,3717,3718],{},"Filter what you don't need",": If your forms use only the neutral color, pass a ",[708,3721,3272],{}," option to reduce generated CSS.",[688,3724,3726],{"id":3725},"faq","FAQ",[3728,3729,3730,3754,3769,3784,3808],"accordion",{},[3731,3732,3735,3736,3015,3738,3740,3741,2607,3743,2607,3745,2607,3747,3749,3750,3753],"accordion-item",{"icon":3733,"label":3734},"i-lucide-circle-help","Why style the native input instead of a custom element?","Applying the recipe to the real ",[708,3737,1142],{},[708,3739,3018],{}," keeps the control fully native: Space toggles it, it participates in form submission, and ",[708,3742,725],{},[708,3744,729],{},[708,3746,741],{},[708,3748,737],{}," drive the styling with zero runtime JavaScript. A custom ",[708,3751,3752],{},"\u003Cdiv>"," would need ARIA roles and keyboard handlers to match.",[3731,3755,3757,3759,3760,3762,3763,3765,3766,3768],{"icon":3733,"label":3756},"How do I set the indeterminate state?",[708,3758,1146],{}," is a DOM property, not an HTML attribute, so you can't set it declaratively in markup. Grab the input via a ref and assign ",[708,3761,2806],{}," (see ",[769,3764,1124],{"href":2810},"). The recipe's ",[708,3767,729],{}," styles then render a horizontal dash in the primary-filled box.",[3731,3770,694,3772,3774,3775,3777,3778,3780,3781,3783],{"icon":3733,"label":3771},"Why is the color light\u002Fdark\u002Fneutral instead of primary\u002Fsuccess\u002Ferror?",[708,3773,745],{}," axis controls the ",[748,3776,750],{}," box surface, which reflects the form's surface rather than a status. The checked and indeterminate fill is always ",[708,3779,733],{},", the conventional accent for a selected control. This mirrors the ",[769,3782,452],{"href":453}," recipe's color model.",[3731,3785,694,3787,3789,3790,3793,3794,3797,3798,3800,3801,726,3804,3807],{"icon":3733,"label":3786},"How does the checked fill stay correct in dark mode?",[708,3788,760],{}," color sets a dark unchecked surface under ",[708,3791,3792],{},"&:dark",", which gains attribute-selector specificity when you toggle a ",[708,3795,3796],{},"[data-theme=\"dark\"]"," theme. To keep the checked box ",[708,3799,733],{}," in that case, the recipe re-asserts the fill under ",[708,3802,3803],{},"&:dark:checked",[708,3805,3806],{},"&:dark:indeterminate",", so the accent always wins over the dark surface.",[3731,3809,3811,3812,3814],{"icon":3733,"label":3810},"How does filtering affect the recipe?","When you use the ",[708,3813,3272],{}," option, compound variants that reference filtered-out colors are automatically removed, and default variants are adjusted if they reference a removed value — so the recipe stays consistent and only emits the CSS you use.",[3816,3817,3818],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":863,"searchDepth":904,"depth":904,"links":3820},[3821,3822,3823,3824,3827,3830,3835,3836,3837,3841,3845,3846],{"id":690,"depth":904,"text":78},{"id":781,"depth":904,"text":782},{"id":835,"depth":904,"text":836},{"id":2536,"depth":904,"text":195,"children":3825},[3826],{"id":2567,"depth":933,"text":2568},{"id":2655,"depth":904,"text":2656,"children":3828},[3829],{"id":2680,"depth":933,"text":2681},{"id":2765,"depth":904,"text":342,"children":3831},[3832,3833,3834],{"id":1724,"depth":933,"text":2775},{"id":1146,"depth":933,"text":2796},{"id":1739,"depth":933,"text":2817},{"id":2843,"depth":904,"text":2844},{"id":2991,"depth":904,"text":568},{"id":3076,"depth":904,"text":3077,"children":3838},[3839,3840],{"id":3080,"depth":933,"text":3081},{"id":3265,"depth":933,"text":3266},{"id":3423,"depth":904,"text":73,"children":3842},[3843,3844],{"id":3426,"depth":933,"text":3429},{"id":3592,"depth":933,"text":3595},{"id":3668,"depth":904,"text":3669},{"id":3725,"depth":904,"text":3726},"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.",null,{},{"icon":7},{"title":436,"description":3847},"qLj4MuTyx-6zmNRP_uxR01zm8lRSKBlEMYTU3jHt2qo",[3854,3856],{"title":432,"path":433,"stem":434,"description":3855,"icon":7,"children":-1},"A date-grid styling recipe with selected, today, range, booked, disabled, and outside-month day states, week numbers, month\u002Fyear selectors, presets and a time-picker footer, plus a custom cell size through the recipe system.",{"title":440,"path":441,"stem":442,"description":3857,"icon":7,"children":-1},"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.",1781596338545]