[{"data":1,"prerenderedAt":3680},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-preset":682,"-docs-theme-modifiers-preset-surround":3675},{"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":684,"body":685,"description":3668,"extension":3669,"links":3670,"meta":3671,"navigation":3672,"path":642,"seo":3673,"stem":643,"__hash__":3674},"docs_theme\u002Fdocs\u002Ftheme\u002Fmodifiers\u002F01.preset.md","Utility Modifiers Presets",{"type":686,"value":687,"toc":3654},"minimark",[688,692,701,705,728,732,1634,1639,1642,1647,1694,1698,1701,1716,2014,2018,2025,2396,2400,2403,2625,2629,2636,2990,3006,3010,3274,3278,3650],[689,690,78],"h2",{"id":691},"overview",[693,694,695,696,700],"p",{},"The ",[697,698,699],"code",{},"useModifiersPreset"," composable registers all available modifier categories with your Styleframe instance in a single function call. It returns a flat object containing all individual modifier instances, ready to be passed to utility creator functions.",[689,702,704],{"id":703},"why-use-presets","Why use presets?",[706,707,708,716,722],"ul",{},[709,710,711,715],"li",{},[712,713,714],"strong",{},"Complete Coverage",": Register all 8 modifier categories with one function call",[709,717,718,721],{},[712,719,720],{},"Flat Return Value",": All individual modifiers are spread into a single flat object for easy destructuring",[709,723,724,727],{},[712,725,726],{},"Selective Disabling",": Disable specific categories you don't need via configuration",[689,729,731],{"id":730},"quick-start","Quick Start",[733,734,735,1112],"tabs",{},[736,737,739],"tabs-item",{"icon":738,"label":290},"i-lucide-code",[740,741,747],"pre",{"className":742,"code":743,"filename":744,"language":745,"meta":746,"style":746},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useModifiersPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Register all modifiers\nconst { hover, focus, active, dark, disabled, first, last } = useModifiersPreset(s);\n\n\u002F\u002F Register utilities and create values with modifiers\nconst { createBackgroundColorUtility, createOpacityUtility } = useUtilitiesPreset(s);\n\ncreateBackgroundColorUtility({\n    primary: '#006cff',\n    secondary: '#6c757d',\n}, [hover, focus, dark]);\n\ncreateOpacityUtility({\n    0: '0',\n    50: '0.5',\n    100: '1',\n}, [hover]);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,748,749,785,814,820,841,846,853,906,911,917,942,947,959,979,996,1016,1021,1031,1049,1066,1083,1093,1098],{"__ignoreMap":746},[750,751,754,758,762,766,769,772,775,779,782],"span",{"class":752,"line":753},"line",1,[750,755,757],{"class":756},"s7zQu","import",[750,759,761],{"class":760},"sMK4o"," {",[750,763,765],{"class":764},"sTEyZ"," styleframe",[750,767,768],{"class":760}," }",[750,770,771],{"class":756}," from",[750,773,774],{"class":760}," '",[750,776,778],{"class":777},"sfazB","styleframe",[750,780,781],{"class":760},"'",[750,783,784],{"class":760},";\n",[750,786,788,790,792,795,798,801,803,805,807,810,812],{"class":752,"line":787},2,[750,789,757],{"class":756},[750,791,761],{"class":760},[750,793,794],{"class":764}," useModifiersPreset",[750,796,797],{"class":760},",",[750,799,800],{"class":764}," useUtilitiesPreset",[750,802,768],{"class":760},[750,804,771],{"class":756},[750,806,774],{"class":760},[750,808,809],{"class":777},"@styleframe\u002Ftheme",[750,811,781],{"class":760},[750,813,784],{"class":760},[750,815,817],{"class":752,"line":816},3,[750,818,819],{"emptyLinePlaceholder":223},"\n",[750,821,823,827,830,833,836,839],{"class":752,"line":822},4,[750,824,826],{"class":825},"spNyl","const",[750,828,829],{"class":764}," s ",[750,831,832],{"class":760},"=",[750,834,765],{"class":835},"s2Zo4",[750,837,838],{"class":764},"()",[750,840,784],{"class":760},[750,842,844],{"class":752,"line":843},5,[750,845,819],{"emptyLinePlaceholder":223},[750,847,849],{"class":752,"line":848},6,[750,850,852],{"class":851},"sHwdD","\u002F\u002F Register all modifiers\n",[750,854,856,858,860,863,865,868,870,873,875,878,880,883,885,888,890,893,896,899,901,904],{"class":752,"line":855},7,[750,857,826],{"class":825},[750,859,761],{"class":760},[750,861,862],{"class":764}," hover",[750,864,797],{"class":760},[750,866,867],{"class":764}," focus",[750,869,797],{"class":760},[750,871,872],{"class":764}," active",[750,874,797],{"class":760},[750,876,877],{"class":764}," dark",[750,879,797],{"class":760},[750,881,882],{"class":764}," disabled",[750,884,797],{"class":760},[750,886,887],{"class":764}," first",[750,889,797],{"class":760},[750,891,892],{"class":764}," last ",[750,894,895],{"class":760},"}",[750,897,898],{"class":760}," =",[750,900,794],{"class":835},[750,902,903],{"class":764},"(s)",[750,905,784],{"class":760},[750,907,909],{"class":752,"line":908},8,[750,910,819],{"emptyLinePlaceholder":223},[750,912,914],{"class":752,"line":913},9,[750,915,916],{"class":851},"\u002F\u002F Register utilities and create values with modifiers\n",[750,918,920,922,924,927,929,932,934,936,938,940],{"class":752,"line":919},10,[750,921,826],{"class":825},[750,923,761],{"class":760},[750,925,926],{"class":764}," createBackgroundColorUtility",[750,928,797],{"class":760},[750,930,931],{"class":764}," createOpacityUtility ",[750,933,895],{"class":760},[750,935,898],{"class":760},[750,937,800],{"class":835},[750,939,903],{"class":764},[750,941,784],{"class":760},[750,943,945],{"class":752,"line":944},11,[750,946,819],{"emptyLinePlaceholder":223},[750,948,950,953,956],{"class":752,"line":949},12,[750,951,952],{"class":835},"createBackgroundColorUtility",[750,954,955],{"class":764},"(",[750,957,958],{"class":760},"{\n",[750,960,962,966,969,971,974,976],{"class":752,"line":961},13,[750,963,965],{"class":964},"swJcz","    primary",[750,967,968],{"class":760},":",[750,970,774],{"class":760},[750,972,973],{"class":777},"#006cff",[750,975,781],{"class":760},[750,977,978],{"class":760},",\n",[750,980,982,985,987,989,992,994],{"class":752,"line":981},14,[750,983,984],{"class":964},"    secondary",[750,986,968],{"class":760},[750,988,774],{"class":760},[750,990,991],{"class":777},"#6c757d",[750,993,781],{"class":760},[750,995,978],{"class":760},[750,997,999,1002,1005,1007,1009,1011,1014],{"class":752,"line":998},15,[750,1000,1001],{"class":760},"},",[750,1003,1004],{"class":764}," [hover",[750,1006,797],{"class":760},[750,1008,867],{"class":764},[750,1010,797],{"class":760},[750,1012,1013],{"class":764}," dark])",[750,1015,784],{"class":760},[750,1017,1019],{"class":752,"line":1018},16,[750,1020,819],{"emptyLinePlaceholder":223},[750,1022,1024,1027,1029],{"class":752,"line":1023},17,[750,1025,1026],{"class":835},"createOpacityUtility",[750,1028,955],{"class":764},[750,1030,958],{"class":760},[750,1032,1034,1038,1040,1042,1045,1047],{"class":752,"line":1033},18,[750,1035,1037],{"class":1036},"sbssI","    0",[750,1039,968],{"class":760},[750,1041,774],{"class":760},[750,1043,1044],{"class":777},"0",[750,1046,781],{"class":760},[750,1048,978],{"class":760},[750,1050,1052,1055,1057,1059,1062,1064],{"class":752,"line":1051},19,[750,1053,1054],{"class":1036},"    50",[750,1056,968],{"class":760},[750,1058,774],{"class":760},[750,1060,1061],{"class":777},"0.5",[750,1063,781],{"class":760},[750,1065,978],{"class":760},[750,1067,1069,1072,1074,1076,1079,1081],{"class":752,"line":1068},20,[750,1070,1071],{"class":1036},"    100",[750,1073,968],{"class":760},[750,1075,774],{"class":760},[750,1077,1078],{"class":777},"1",[750,1080,781],{"class":760},[750,1082,978],{"class":760},[750,1084,1086,1088,1091],{"class":752,"line":1085},21,[750,1087,1001],{"class":760},[750,1089,1090],{"class":764}," [hover])",[750,1092,784],{"class":760},[750,1094,1096],{"class":752,"line":1095},22,[750,1097,819],{"emptyLinePlaceholder":223},[750,1099,1101,1104,1107,1110],{"class":752,"line":1100},23,[750,1102,1103],{"class":756},"export",[750,1105,1106],{"class":756}," default",[750,1108,1109],{"class":764}," s",[750,1111,784],{"class":760},[736,1113,1114],{"icon":154,"label":326},[740,1115,1120],{"className":1116,"code":1117,"filename":1118,"language":1119,"meta":746,"style":746},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* Base utilities *\u002F\n._background-color\\:primary { background-color: #006cff; }\n._background-color\\:secondary { background-color: #6c757d; }\n\n\u002F* Hover modifier variants *\u002F\n._hover\\:background-color\\:primary:hover { background-color: #006cff; }\n._hover\\:background-color\\:secondary:hover { background-color: #6c757d; }\n\n\u002F* Focus modifier variants *\u002F\n._focus\\:background-color\\:primary:focus { background-color: #006cff; }\n._focus\\:background-color\\:secondary:focus { background-color: #6c757d; }\n\n\u002F* Dark mode modifier variants *\u002F\n._dark\\:background-color\\:primary {\n    :is(.dark-theme, [data-theme=\"dark\"]) & { background-color: #006cff; }\n}\n._dark\\:background-color\\:secondary {\n    :is(.dark-theme, [data-theme=\"dark\"]) & { background-color: #6c757d; }\n}\n\n\u002F* Opacity with hover *\u002F\n._opacity\\:0 { opacity: 0; }\n._opacity\\:50 { opacity: 0.5; }\n._opacity\\:100 { opacity: 1; }\n._hover\\:opacity\\:0:hover { opacity: 0; }\n._hover\\:opacity\\:50:hover { opacity: 0.5; }\n._hover\\:opacity\\:100:hover { opacity: 1; }\n","styleframe\u002Findex.css","css",[697,1121,1122,1127,1162,1188,1192,1197,1232,1264,1268,1273,1307,1339,1343,1348,1366,1402,1407,1423,1453,1457,1461,1466,1491,1515,1540,1572,1603],{"__ignoreMap":746},[750,1123,1124],{"class":752,"line":753},[750,1125,1126],{"class":851},"\u002F* Base utilities *\u002F\n",[750,1128,1129,1132,1136,1139,1142,1144,1148,1150,1153,1156,1159],{"class":752,"line":787},[750,1130,1131],{"class":760},".",[750,1133,1135],{"class":1134},"sBMFI","_background-color",[750,1137,1138],{"class":764},"\\:",[750,1140,1141],{"class":1134},"primary",[750,1143,761],{"class":760},[750,1145,1147],{"class":1146},"sqsOY"," background-color",[750,1149,968],{"class":760},[750,1151,1152],{"class":760}," #",[750,1154,1155],{"class":764},"006cff",[750,1157,1158],{"class":760},";",[750,1160,1161],{"class":760}," }\n",[750,1163,1164,1166,1168,1170,1173,1175,1177,1179,1181,1184,1186],{"class":752,"line":816},[750,1165,1131],{"class":760},[750,1167,1135],{"class":1134},[750,1169,1138],{"class":764},[750,1171,1172],{"class":1134},"secondary",[750,1174,761],{"class":760},[750,1176,1147],{"class":1146},[750,1178,968],{"class":760},[750,1180,1152],{"class":760},[750,1182,1183],{"class":764},"6c757d",[750,1185,1158],{"class":760},[750,1187,1161],{"class":760},[750,1189,1190],{"class":752,"line":822},[750,1191,819],{"emptyLinePlaceholder":223},[750,1193,1194],{"class":752,"line":843},[750,1195,1196],{"class":851},"\u002F* Hover modifier variants *\u002F\n",[750,1198,1199,1201,1204,1206,1209,1211,1213,1215,1218,1220,1222,1224,1226,1228,1230],{"class":752,"line":848},[750,1200,1131],{"class":760},[750,1202,1203],{"class":1134},"_hover",[750,1205,1138],{"class":764},[750,1207,1208],{"class":1134},"background-color",[750,1210,1138],{"class":764},[750,1212,1141],{"class":1134},[750,1214,968],{"class":760},[750,1216,1217],{"class":825},"hover",[750,1219,761],{"class":760},[750,1221,1147],{"class":1146},[750,1223,968],{"class":760},[750,1225,1152],{"class":760},[750,1227,1155],{"class":764},[750,1229,1158],{"class":760},[750,1231,1161],{"class":760},[750,1233,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262],{"class":752,"line":855},[750,1235,1131],{"class":760},[750,1237,1203],{"class":1134},[750,1239,1138],{"class":764},[750,1241,1208],{"class":1134},[750,1243,1138],{"class":764},[750,1245,1172],{"class":1134},[750,1247,968],{"class":760},[750,1249,1217],{"class":825},[750,1251,761],{"class":760},[750,1253,1147],{"class":1146},[750,1255,968],{"class":760},[750,1257,1152],{"class":760},[750,1259,1183],{"class":764},[750,1261,1158],{"class":760},[750,1263,1161],{"class":760},[750,1265,1266],{"class":752,"line":908},[750,1267,819],{"emptyLinePlaceholder":223},[750,1269,1270],{"class":752,"line":913},[750,1271,1272],{"class":851},"\u002F* Focus modifier variants *\u002F\n",[750,1274,1275,1277,1280,1282,1284,1286,1288,1290,1293,1295,1297,1299,1301,1303,1305],{"class":752,"line":919},[750,1276,1131],{"class":760},[750,1278,1279],{"class":1134},"_focus",[750,1281,1138],{"class":764},[750,1283,1208],{"class":1134},[750,1285,1138],{"class":764},[750,1287,1141],{"class":1134},[750,1289,968],{"class":760},[750,1291,1292],{"class":825},"focus",[750,1294,761],{"class":760},[750,1296,1147],{"class":1146},[750,1298,968],{"class":760},[750,1300,1152],{"class":760},[750,1302,1155],{"class":764},[750,1304,1158],{"class":760},[750,1306,1161],{"class":760},[750,1308,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337],{"class":752,"line":944},[750,1310,1131],{"class":760},[750,1312,1279],{"class":1134},[750,1314,1138],{"class":764},[750,1316,1208],{"class":1134},[750,1318,1138],{"class":764},[750,1320,1172],{"class":1134},[750,1322,968],{"class":760},[750,1324,1292],{"class":825},[750,1326,761],{"class":760},[750,1328,1147],{"class":1146},[750,1330,968],{"class":760},[750,1332,1152],{"class":760},[750,1334,1183],{"class":764},[750,1336,1158],{"class":760},[750,1338,1161],{"class":760},[750,1340,1341],{"class":752,"line":949},[750,1342,819],{"emptyLinePlaceholder":223},[750,1344,1345],{"class":752,"line":961},[750,1346,1347],{"class":851},"\u002F* Dark mode modifier variants *\u002F\n",[750,1349,1350,1352,1355,1357,1359,1361,1363],{"class":752,"line":981},[750,1351,1131],{"class":760},[750,1353,1354],{"class":1134},"_dark",[750,1356,1138],{"class":764},[750,1358,1208],{"class":1134},[750,1360,1138],{"class":764},[750,1362,1141],{"class":1134},[750,1364,1365],{"class":760}," {\n",[750,1367,1368,1371,1374,1376,1379,1382,1385,1387,1390,1392,1394,1396,1398,1400],{"class":752,"line":998},[750,1369,1370],{"class":760},"    :",[750,1372,1373],{"class":764},"is(.dark-theme",[750,1375,797],{"class":760},[750,1377,1378],{"class":764}," [data-theme=",[750,1380,1381],{"class":760},"\"",[750,1383,1384],{"class":777},"dark",[750,1386,1381],{"class":760},[750,1388,1389],{"class":764},"]) & { ",[750,1391,1208],{"class":1146},[750,1393,968],{"class":760},[750,1395,1152],{"class":760},[750,1397,1155],{"class":764},[750,1399,1158],{"class":760},[750,1401,1161],{"class":760},[750,1403,1404],{"class":752,"line":1018},[750,1405,1406],{"class":764},"}\n",[750,1408,1409,1411,1413,1415,1417,1419,1421],{"class":752,"line":1023},[750,1410,1131],{"class":760},[750,1412,1354],{"class":1134},[750,1414,1138],{"class":764},[750,1416,1208],{"class":1134},[750,1418,1138],{"class":764},[750,1420,1172],{"class":1134},[750,1422,1365],{"class":760},[750,1424,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451],{"class":752,"line":1033},[750,1426,1370],{"class":760},[750,1428,1373],{"class":764},[750,1430,797],{"class":760},[750,1432,1378],{"class":764},[750,1434,1381],{"class":760},[750,1436,1384],{"class":777},[750,1438,1381],{"class":760},[750,1440,1389],{"class":764},[750,1442,1208],{"class":1146},[750,1444,968],{"class":760},[750,1446,1152],{"class":760},[750,1448,1183],{"class":764},[750,1450,1158],{"class":760},[750,1452,1161],{"class":760},[750,1454,1455],{"class":752,"line":1051},[750,1456,1406],{"class":764},[750,1458,1459],{"class":752,"line":1068},[750,1460,819],{"emptyLinePlaceholder":223},[750,1462,1463],{"class":752,"line":1085},[750,1464,1465],{"class":851},"\u002F* Opacity with hover *\u002F\n",[750,1467,1468,1470,1473,1475,1477,1479,1482,1484,1487,1489],{"class":752,"line":1095},[750,1469,1131],{"class":760},[750,1471,1472],{"class":1134},"_opacity",[750,1474,1138],{"class":764},[750,1476,1044],{"class":1134},[750,1478,761],{"class":760},[750,1480,1481],{"class":1146}," opacity",[750,1483,968],{"class":760},[750,1485,1486],{"class":1036}," 0",[750,1488,1158],{"class":760},[750,1490,1161],{"class":760},[750,1492,1493,1495,1497,1499,1502,1504,1506,1508,1511,1513],{"class":752,"line":1100},[750,1494,1131],{"class":760},[750,1496,1472],{"class":1134},[750,1498,1138],{"class":764},[750,1500,1501],{"class":1134},"50",[750,1503,761],{"class":760},[750,1505,1481],{"class":1146},[750,1507,968],{"class":760},[750,1509,1510],{"class":1036}," 0.5",[750,1512,1158],{"class":760},[750,1514,1161],{"class":760},[750,1516,1518,1520,1522,1524,1527,1529,1531,1533,1536,1538],{"class":752,"line":1517},24,[750,1519,1131],{"class":760},[750,1521,1472],{"class":1134},[750,1523,1138],{"class":764},[750,1525,1526],{"class":1134},"100",[750,1528,761],{"class":760},[750,1530,1481],{"class":1146},[750,1532,968],{"class":760},[750,1534,1535],{"class":1036}," 1",[750,1537,1158],{"class":760},[750,1539,1161],{"class":760},[750,1541,1543,1545,1547,1549,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570],{"class":752,"line":1542},25,[750,1544,1131],{"class":760},[750,1546,1203],{"class":1134},[750,1548,1138],{"class":764},[750,1550,1551],{"class":1134},"opacity",[750,1553,1138],{"class":764},[750,1555,1044],{"class":1134},[750,1557,968],{"class":760},[750,1559,1217],{"class":825},[750,1561,761],{"class":760},[750,1563,1481],{"class":1146},[750,1565,968],{"class":760},[750,1567,1486],{"class":1036},[750,1569,1158],{"class":760},[750,1571,1161],{"class":760},[750,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601],{"class":752,"line":1574},26,[750,1576,1131],{"class":760},[750,1578,1203],{"class":1134},[750,1580,1138],{"class":764},[750,1582,1551],{"class":1134},[750,1584,1138],{"class":764},[750,1586,1501],{"class":1134},[750,1588,968],{"class":760},[750,1590,1217],{"class":825},[750,1592,761],{"class":760},[750,1594,1481],{"class":1146},[750,1596,968],{"class":760},[750,1598,1510],{"class":1036},[750,1600,1158],{"class":760},[750,1602,1161],{"class":760},[750,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632],{"class":752,"line":1605},27,[750,1607,1131],{"class":760},[750,1609,1203],{"class":1134},[750,1611,1138],{"class":764},[750,1613,1551],{"class":1134},[750,1615,1138],{"class":764},[750,1617,1526],{"class":1134},[750,1619,968],{"class":760},[750,1621,1217],{"class":825},[750,1623,761],{"class":760},[750,1625,1481],{"class":1146},[750,1627,968],{"class":760},[750,1629,1535],{"class":1036},[750,1631,1158],{"class":760},[750,1633,1161],{"class":760},[689,1635,1637],{"id":1636},"usemodifierspreset",[697,1638,699],{},[693,1640,1641],{},"Registers all modifier categories with the Styleframe instance and returns a flat object containing all individual modifier instances.",[1643,1644,1646],"h3",{"id":1645},"signature","Signature",[740,1648,1650],{"className":742,"code":1649,"language":745,"meta":746,"style":746},"function useModifiersPreset(\n    s: Styleframe,\n    config?: ModifiersConfig\n): ModifierInstances\n",[697,1651,1652,1662,1675,1686],{"__ignoreMap":746},[750,1653,1654,1657,1659],{"class":752,"line":753},[750,1655,1656],{"class":825},"function",[750,1658,794],{"class":835},[750,1660,1661],{"class":760},"(\n",[750,1663,1664,1668,1670,1673],{"class":752,"line":787},[750,1665,1667],{"class":1666},"sHdIc","    s",[750,1669,968],{"class":760},[750,1671,1672],{"class":1134}," Styleframe",[750,1674,978],{"class":760},[750,1676,1677,1680,1683],{"class":752,"line":816},[750,1678,1679],{"class":1666},"    config",[750,1681,1682],{"class":760},"?:",[750,1684,1685],{"class":1134}," ModifiersConfig\n",[750,1687,1688,1691],{"class":752,"line":822},[750,1689,1690],{"class":760},"):",[750,1692,1693],{"class":1134}," ModifierInstances\n",[1643,1695,1697],{"id":1696},"configuration-options","Configuration Options",[693,1699,1700],{},"Each modifier category can be configured as:",[706,1702,1703,1710],{},[709,1704,1705,1706,1709],{},"Omitted or ",[697,1707,1708],{},"undefined"," (default): Enable the category",[709,1711,1712,1715],{},[697,1713,1714],{},"false",": Disable the category entirely",[1717,1718,1719,1741],"table",{},[1720,1721,1722],"thead",{},[1723,1724,1725,1729,1732,1735,1738],"tr",{},[1726,1727,1728],"th",{},"Option",[1726,1730,1731],{},"Composable",[1726,1733,1734],{},"Type",[1726,1736,1737],{},"Default",[1726,1739,1740],{},"Description",[1742,1743,1744,1782,1816,1853,1887,1920,1951,1983],"tbody",{},[1723,1745,1746,1755,1760,1765,1770],{},[1747,1748,1749],"td",{},[1750,1751,1752],"a",{"href":674},[697,1753,1754],{},"pseudoStates",[1747,1756,1757],{},[697,1758,1759],{},"usePseudoStateModifiers",[1747,1761,1762],{},[697,1763,1764],{},"boolean",[1747,1766,1767],{},[697,1768,1769],{},"true",[1747,1771,1772,1773,1775,1776,1775,1778,1781],{},"Pseudo-class state modifiers (",[697,1774,1217],{},", ",[697,1777,1292],{},[697,1779,1780],{},"active",", etc.)",[1723,1783,1784,1791,1796,1800,1804],{},[1747,1785,1786],{},[1750,1787,1788],{"href":655},[697,1789,1790],{},"formStates",[1747,1792,1793],{},[697,1794,1795],{},"useFormStateModifiers",[1747,1797,1798],{},[697,1799,1764],{},[1747,1801,1802],{},[697,1803,1769],{},[1747,1805,1806,1807,1775,1810,1775,1813,1781],{},"Form state modifiers (",[697,1808,1809],{},"disabled",[697,1811,1812],{},"checked",[697,1814,1815],{},"valid",[1723,1817,1818,1825,1830,1834,1838],{},[1747,1819,1820],{},[1750,1821,1822],{"href":679},[697,1823,1824],{},"structural",[1747,1826,1827],{},[697,1828,1829],{},"useStructuralModifiers",[1747,1831,1832],{},[697,1833,1764],{},[1747,1835,1836],{},[697,1837,1769],{},[1747,1839,1840,1841,1775,1844,1775,1847,1775,1850,1781],{},"Structural pseudo-class modifiers (",[697,1842,1843],{},"first",[697,1845,1846],{},"last",[697,1848,1849],{},"odd",[697,1851,1852],{},"even",[1723,1854,1855,1862,1867,1871,1875],{},[1747,1856,1857],{},[1750,1858,1859],{"href":669},[697,1860,1861],{},"pseudoElements",[1747,1863,1864],{},[697,1865,1866],{},"usePseudoElementModifiers",[1747,1868,1869],{},[697,1870,1764],{},[1747,1872,1873],{},[697,1874,1769],{},[1747,1876,1877,1878,1775,1881,1775,1884,1781],{},"Pseudo-element modifiers (",[697,1879,1880],{},"before",[697,1882,1883],{},"after",[697,1885,1886],{},"placeholder",[1723,1888,1889,1896,1901,1905,1909],{},[1747,1890,1891],{},[1750,1892,1893],{"href":659},[697,1894,1895],{},"mediaPreferences",[1747,1897,1898],{},[697,1899,1900],{},"useMediaPreferenceModifiers",[1747,1902,1903],{},[697,1904,1764],{},[1747,1906,1907],{},[697,1908,1769],{},[1747,1910,1911,1912,1775,1914,1775,1917,1781],{},"Media\u002Fpreference query modifiers (",[697,1913,1384],{},[697,1915,1916],{},"motionSafe",[697,1918,1919],{},"print",[1723,1921,1922,1929,1934,1938,1942],{},[1747,1923,1924],{},[1750,1925,1926],{"href":646},[697,1927,1928],{},"ariaStates",[1747,1930,1931],{},[697,1932,1933],{},"useAriaStateModifiers",[1747,1935,1936],{},[697,1937,1764],{},[1747,1939,1940],{},[697,1941,1769],{},[1747,1943,1944,1945,1775,1948,1781],{},"ARIA state modifiers (",[697,1946,1947],{},"ariaExpanded",[697,1949,1950],{},"ariaDisabled",[1723,1952,1953,1960,1965,1969,1973],{},[1747,1954,1955],{},[1750,1956,1957],{"href":650},[697,1958,1959],{},"directional",[1747,1961,1962],{},[697,1963,1964],{},"useDirectionalModifiers",[1747,1966,1967],{},[697,1968,1764],{},[1747,1970,1971],{},[697,1972,1769],{},[1747,1974,1975,1976,1775,1979,1982],{},"Directional modifiers (",[697,1977,1978],{},"rtl",[697,1980,1981],{},"ltr",")",[1723,1984,1985,1992,1997,2001,2005],{},[1747,1986,1987],{},[1750,1988,1989],{"href":664},[697,1990,1991],{},"otherStates",[1747,1993,1994],{},[697,1995,1996],{},"useOtherStateModifiers",[1747,1998,1999],{},[697,2000,1764],{},[1747,2002,2003],{},[697,2004,1769],{},[1747,2006,2007,2008,1775,2011,1982],{},"Other state modifiers (",[697,2009,2010],{},"open",[697,2012,2013],{},"inert",[1643,2015,2017],{"id":2016},"return-value","Return Value",[693,2019,2020,2021,2024],{},"Returns a flat ",[697,2022,2023],{},"ModifierInstances"," object containing all individual modifiers from every enabled category. The modifiers are spread into a single object for easy destructuring:",[740,2026,2028],{"className":742,"code":2027,"language":745,"meta":746,"style":746},"const {\n    \u002F\u002F Pseudo-State\n    hover, focus, focusWithin, focusVisible, active, visited, target,\n    \u002F\u002F Form State\n    disabled, enabled, checked, indeterminate, required, optional, valid, invalid,\n    placeholderShown, autofill, readOnly,\n    \u002F\u002F Structural\n    first, last, only, odd, even, firstOfType, lastOfType, onlyOfType, empty,\n    \u002F\u002F Pseudo-Elements\n    before, after, placeholder, selection, firstLetter, firstLine, marker, backdrop, file,\n    \u002F\u002F Media & Preferences\n    dark, motionSafe, motionReduce, contrastMore, contrastLess, portrait, landscape, print, forcedColors,\n    \u002F\u002F ARIA State\n    ariaBusy, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly,\n    ariaRequired, ariaSelected,\n    \u002F\u002F Directional\n    rtl, ltr,\n    \u002F\u002F Other State\n    open, inert,\n} = useModifiersPreset(s);\n",[697,2029,2030,2036,2041,2076,2081,2123,2140,2145,2192,2197,2244,2249,2296,2301,2338,2350,2355,2367,2372,2384],{"__ignoreMap":746},[750,2031,2032,2034],{"class":752,"line":753},[750,2033,826],{"class":825},[750,2035,1365],{"class":760},[750,2037,2038],{"class":752,"line":787},[750,2039,2040],{"class":851},"    \u002F\u002F Pseudo-State\n",[750,2042,2043,2046,2048,2050,2052,2055,2057,2060,2062,2064,2066,2069,2071,2074],{"class":752,"line":816},[750,2044,2045],{"class":764},"    hover",[750,2047,797],{"class":760},[750,2049,867],{"class":764},[750,2051,797],{"class":760},[750,2053,2054],{"class":764}," focusWithin",[750,2056,797],{"class":760},[750,2058,2059],{"class":764}," focusVisible",[750,2061,797],{"class":760},[750,2063,872],{"class":764},[750,2065,797],{"class":760},[750,2067,2068],{"class":764}," visited",[750,2070,797],{"class":760},[750,2072,2073],{"class":764}," target",[750,2075,978],{"class":760},[750,2077,2078],{"class":752,"line":822},[750,2079,2080],{"class":851},"    \u002F\u002F Form State\n",[750,2082,2083,2086,2088,2091,2093,2096,2098,2101,2103,2106,2108,2111,2113,2116,2118,2121],{"class":752,"line":843},[750,2084,2085],{"class":764},"    disabled",[750,2087,797],{"class":760},[750,2089,2090],{"class":764}," enabled",[750,2092,797],{"class":760},[750,2094,2095],{"class":764}," checked",[750,2097,797],{"class":760},[750,2099,2100],{"class":764}," indeterminate",[750,2102,797],{"class":760},[750,2104,2105],{"class":764}," required",[750,2107,797],{"class":760},[750,2109,2110],{"class":764}," optional",[750,2112,797],{"class":760},[750,2114,2115],{"class":764}," valid",[750,2117,797],{"class":760},[750,2119,2120],{"class":764}," invalid",[750,2122,978],{"class":760},[750,2124,2125,2128,2130,2133,2135,2138],{"class":752,"line":848},[750,2126,2127],{"class":764},"    placeholderShown",[750,2129,797],{"class":760},[750,2131,2132],{"class":764}," autofill",[750,2134,797],{"class":760},[750,2136,2137],{"class":764}," readOnly",[750,2139,978],{"class":760},[750,2141,2142],{"class":752,"line":855},[750,2143,2144],{"class":851},"    \u002F\u002F Structural\n",[750,2146,2147,2150,2152,2155,2157,2160,2162,2165,2167,2170,2172,2175,2177,2180,2182,2185,2187,2190],{"class":752,"line":908},[750,2148,2149],{"class":764},"    first",[750,2151,797],{"class":760},[750,2153,2154],{"class":764}," last",[750,2156,797],{"class":760},[750,2158,2159],{"class":764}," only",[750,2161,797],{"class":760},[750,2163,2164],{"class":764}," odd",[750,2166,797],{"class":760},[750,2168,2169],{"class":764}," even",[750,2171,797],{"class":760},[750,2173,2174],{"class":764}," firstOfType",[750,2176,797],{"class":760},[750,2178,2179],{"class":764}," lastOfType",[750,2181,797],{"class":760},[750,2183,2184],{"class":764}," onlyOfType",[750,2186,797],{"class":760},[750,2188,2189],{"class":764}," empty",[750,2191,978],{"class":760},[750,2193,2194],{"class":752,"line":913},[750,2195,2196],{"class":851},"    \u002F\u002F Pseudo-Elements\n",[750,2198,2199,2202,2204,2207,2209,2212,2214,2217,2219,2222,2224,2227,2229,2232,2234,2237,2239,2242],{"class":752,"line":919},[750,2200,2201],{"class":764},"    before",[750,2203,797],{"class":760},[750,2205,2206],{"class":764}," after",[750,2208,797],{"class":760},[750,2210,2211],{"class":764}," placeholder",[750,2213,797],{"class":760},[750,2215,2216],{"class":764}," selection",[750,2218,797],{"class":760},[750,2220,2221],{"class":764}," firstLetter",[750,2223,797],{"class":760},[750,2225,2226],{"class":764}," firstLine",[750,2228,797],{"class":760},[750,2230,2231],{"class":764}," marker",[750,2233,797],{"class":760},[750,2235,2236],{"class":764}," backdrop",[750,2238,797],{"class":760},[750,2240,2241],{"class":764}," file",[750,2243,978],{"class":760},[750,2245,2246],{"class":752,"line":944},[750,2247,2248],{"class":851},"    \u002F\u002F Media & Preferences\n",[750,2250,2251,2254,2256,2259,2261,2264,2266,2269,2271,2274,2276,2279,2281,2284,2286,2289,2291,2294],{"class":752,"line":949},[750,2252,2253],{"class":764},"    dark",[750,2255,797],{"class":760},[750,2257,2258],{"class":764}," motionSafe",[750,2260,797],{"class":760},[750,2262,2263],{"class":764}," motionReduce",[750,2265,797],{"class":760},[750,2267,2268],{"class":764}," contrastMore",[750,2270,797],{"class":760},[750,2272,2273],{"class":764}," contrastLess",[750,2275,797],{"class":760},[750,2277,2278],{"class":764}," portrait",[750,2280,797],{"class":760},[750,2282,2283],{"class":764}," landscape",[750,2285,797],{"class":760},[750,2287,2288],{"class":764}," print",[750,2290,797],{"class":760},[750,2292,2293],{"class":764}," forcedColors",[750,2295,978],{"class":760},[750,2297,2298],{"class":752,"line":961},[750,2299,2300],{"class":851},"    \u002F\u002F ARIA State\n",[750,2302,2303,2306,2308,2311,2313,2316,2318,2321,2323,2326,2328,2331,2333,2336],{"class":752,"line":981},[750,2304,2305],{"class":764},"    ariaBusy",[750,2307,797],{"class":760},[750,2309,2310],{"class":764}," ariaChecked",[750,2312,797],{"class":760},[750,2314,2315],{"class":764}," ariaDisabled",[750,2317,797],{"class":760},[750,2319,2320],{"class":764}," ariaExpanded",[750,2322,797],{"class":760},[750,2324,2325],{"class":764}," ariaHidden",[750,2327,797],{"class":760},[750,2329,2330],{"class":764}," ariaPressed",[750,2332,797],{"class":760},[750,2334,2335],{"class":764}," ariaReadonly",[750,2337,978],{"class":760},[750,2339,2340,2343,2345,2348],{"class":752,"line":998},[750,2341,2342],{"class":764},"    ariaRequired",[750,2344,797],{"class":760},[750,2346,2347],{"class":764}," ariaSelected",[750,2349,978],{"class":760},[750,2351,2352],{"class":752,"line":1018},[750,2353,2354],{"class":851},"    \u002F\u002F Directional\n",[750,2356,2357,2360,2362,2365],{"class":752,"line":1023},[750,2358,2359],{"class":764},"    rtl",[750,2361,797],{"class":760},[750,2363,2364],{"class":764}," ltr",[750,2366,978],{"class":760},[750,2368,2369],{"class":752,"line":1033},[750,2370,2371],{"class":851},"    \u002F\u002F Other State\n",[750,2373,2374,2377,2379,2382],{"class":752,"line":1051},[750,2375,2376],{"class":764},"    open",[750,2378,797],{"class":760},[750,2380,2381],{"class":764}," inert",[750,2383,978],{"class":760},[750,2385,2386,2388,2390,2392,2394],{"class":752,"line":1068},[750,2387,895],{"class":760},[750,2389,898],{"class":760},[750,2391,794],{"class":835},[750,2393,903],{"class":764},[750,2395,784],{"class":760},[689,2397,2399],{"id":2398},"selective-registration","Selective Registration",[693,2401,2402],{},"Disable specific categories you don't need:",[740,2404,2406],{"className":742,"code":2405,"language":745,"meta":746,"style":746},"import { styleframe } from 'styleframe';\nimport { useModifiersPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst modifiers = useModifiersPreset(s, {\n    pseudoStates: true,        \u002F\u002F Keep hover, focus, active, etc.\n    formStates: true,          \u002F\u002F Keep disabled, checked, valid, etc.\n    mediaPreferences: true,    \u002F\u002F Keep dark, motionReduce, etc.\n    structural: false,         \u002F\u002F Skip first, last, odd, even\n    pseudoElements: false,     \u002F\u002F Skip before, after, placeholder\n    ariaStates: false,         \u002F\u002F Skip ARIA modifiers\n    directional: false,        \u002F\u002F Skip rtl, ltr\n    otherStates: false,        \u002F\u002F Skip open, inert\n});\n\nexport default s;\n",[697,2407,2408,2428,2448,2452,2466,2470,2488,2504,2518,2532,2547,2561,2575,2589,2603,2611,2615],{"__ignoreMap":746},[750,2409,2410,2412,2414,2416,2418,2420,2422,2424,2426],{"class":752,"line":753},[750,2411,757],{"class":756},[750,2413,761],{"class":760},[750,2415,765],{"class":764},[750,2417,768],{"class":760},[750,2419,771],{"class":756},[750,2421,774],{"class":760},[750,2423,778],{"class":777},[750,2425,781],{"class":760},[750,2427,784],{"class":760},[750,2429,2430,2432,2434,2436,2438,2440,2442,2444,2446],{"class":752,"line":787},[750,2431,757],{"class":756},[750,2433,761],{"class":760},[750,2435,794],{"class":764},[750,2437,768],{"class":760},[750,2439,771],{"class":756},[750,2441,774],{"class":760},[750,2443,809],{"class":777},[750,2445,781],{"class":760},[750,2447,784],{"class":760},[750,2449,2450],{"class":752,"line":816},[750,2451,819],{"emptyLinePlaceholder":223},[750,2453,2454,2456,2458,2460,2462,2464],{"class":752,"line":822},[750,2455,826],{"class":825},[750,2457,829],{"class":764},[750,2459,832],{"class":760},[750,2461,765],{"class":835},[750,2463,838],{"class":764},[750,2465,784],{"class":760},[750,2467,2468],{"class":752,"line":843},[750,2469,819],{"emptyLinePlaceholder":223},[750,2471,2472,2474,2477,2479,2481,2484,2486],{"class":752,"line":848},[750,2473,826],{"class":825},[750,2475,2476],{"class":764}," modifiers ",[750,2478,832],{"class":760},[750,2480,794],{"class":835},[750,2482,2483],{"class":764},"(s",[750,2485,797],{"class":760},[750,2487,1365],{"class":760},[750,2489,2490,2493,2495,2499,2501],{"class":752,"line":855},[750,2491,2492],{"class":964},"    pseudoStates",[750,2494,968],{"class":760},[750,2496,2498],{"class":2497},"sfNiH"," true",[750,2500,797],{"class":760},[750,2502,2503],{"class":851},"        \u002F\u002F Keep hover, focus, active, etc.\n",[750,2505,2506,2509,2511,2513,2515],{"class":752,"line":908},[750,2507,2508],{"class":964},"    formStates",[750,2510,968],{"class":760},[750,2512,2498],{"class":2497},[750,2514,797],{"class":760},[750,2516,2517],{"class":851},"          \u002F\u002F Keep disabled, checked, valid, etc.\n",[750,2519,2520,2523,2525,2527,2529],{"class":752,"line":913},[750,2521,2522],{"class":964},"    mediaPreferences",[750,2524,968],{"class":760},[750,2526,2498],{"class":2497},[750,2528,797],{"class":760},[750,2530,2531],{"class":851},"    \u002F\u002F Keep dark, motionReduce, etc.\n",[750,2533,2534,2537,2539,2542,2544],{"class":752,"line":919},[750,2535,2536],{"class":964},"    structural",[750,2538,968],{"class":760},[750,2540,2541],{"class":2497}," false",[750,2543,797],{"class":760},[750,2545,2546],{"class":851},"         \u002F\u002F Skip first, last, odd, even\n",[750,2548,2549,2552,2554,2556,2558],{"class":752,"line":944},[750,2550,2551],{"class":964},"    pseudoElements",[750,2553,968],{"class":760},[750,2555,2541],{"class":2497},[750,2557,797],{"class":760},[750,2559,2560],{"class":851},"     \u002F\u002F Skip before, after, placeholder\n",[750,2562,2563,2566,2568,2570,2572],{"class":752,"line":949},[750,2564,2565],{"class":964},"    ariaStates",[750,2567,968],{"class":760},[750,2569,2541],{"class":2497},[750,2571,797],{"class":760},[750,2573,2574],{"class":851},"         \u002F\u002F Skip ARIA modifiers\n",[750,2576,2577,2580,2582,2584,2586],{"class":752,"line":961},[750,2578,2579],{"class":964},"    directional",[750,2581,968],{"class":760},[750,2583,2541],{"class":2497},[750,2585,797],{"class":760},[750,2587,2588],{"class":851},"        \u002F\u002F Skip rtl, ltr\n",[750,2590,2591,2594,2596,2598,2600],{"class":752,"line":981},[750,2592,2593],{"class":964},"    otherStates",[750,2595,968],{"class":760},[750,2597,2541],{"class":2497},[750,2599,797],{"class":760},[750,2601,2602],{"class":851},"        \u002F\u002F Skip open, inert\n",[750,2604,2605,2607,2609],{"class":752,"line":998},[750,2606,895],{"class":760},[750,2608,1982],{"class":764},[750,2610,784],{"class":760},[750,2612,2613],{"class":752,"line":1018},[750,2614,819],{"emptyLinePlaceholder":223},[750,2616,2617,2619,2621,2623],{"class":752,"line":1023},[750,2618,1103],{"class":756},[750,2620,1106],{"class":756},[750,2622,1109],{"class":764},[750,2624,784],{"class":760},[689,2626,2628],{"id":2627},"pre-generating-modifier-variants","Pre-generating Modifier Variants",[693,2630,2631,2632,2635],{},"When using the Styleframe Vite plugin, the ",[712,2633,2634],{},"scanner"," automatically detects modifier-prefixed utility class names in your source files and generates the corresponding CSS — so you don't need to manually pass modifiers to every utility creator. However, if you want to pre-generate specific modifier variants tied to your design tokens, you can pass modifier instances to creator functions:",[740,2637,2639],{"className":742,"code":2638,"language":745,"meta":746,"style":746},"import { styleframe } from 'styleframe';\nimport { useUtilitiesPreset, useModifiersPreset, useColorDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Register modifiers and get instances\nconst { hover, focus, dark } = useModifiersPreset(s);\n\n\u002F\u002F Register utilities and get creators\nconst { createBackgroundColorUtility, createTextColorUtility } = useUtilitiesPreset(s);\n\n\u002F\u002F Create color tokens\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    secondary: '#6c757d',\n} as const);\n\n\u002F\u002F Pre-generate modifier variants for specific values\ncreateBackgroundColorUtility({\n    primary: s.ref(colorPrimary),\n    secondary: s.ref(colorSecondary),\n}, [hover, focus, dark]);\n\ncreateTextColorUtility({\n    primary: s.ref(colorPrimary),\n    secondary: s.ref(colorSecondary),\n}, [hover]);\n\nexport default s;\n",[697,2640,2641,2661,2690,2694,2708,2712,2717,2744,2748,2753,2776,2780,2785,2811,2825,2839,2853,2857,2862,2870,2888,2905,2921,2925,2934,2950,2966,2974,2979],{"__ignoreMap":746},[750,2642,2643,2645,2647,2649,2651,2653,2655,2657,2659],{"class":752,"line":753},[750,2644,757],{"class":756},[750,2646,761],{"class":760},[750,2648,765],{"class":764},[750,2650,768],{"class":760},[750,2652,771],{"class":756},[750,2654,774],{"class":760},[750,2656,778],{"class":777},[750,2658,781],{"class":760},[750,2660,784],{"class":760},[750,2662,2663,2665,2667,2669,2671,2673,2675,2678,2680,2682,2684,2686,2688],{"class":752,"line":787},[750,2664,757],{"class":756},[750,2666,761],{"class":760},[750,2668,800],{"class":764},[750,2670,797],{"class":760},[750,2672,794],{"class":764},[750,2674,797],{"class":760},[750,2676,2677],{"class":764}," useColorDesignTokens",[750,2679,768],{"class":760},[750,2681,771],{"class":756},[750,2683,774],{"class":760},[750,2685,809],{"class":777},[750,2687,781],{"class":760},[750,2689,784],{"class":760},[750,2691,2692],{"class":752,"line":816},[750,2693,819],{"emptyLinePlaceholder":223},[750,2695,2696,2698,2700,2702,2704,2706],{"class":752,"line":822},[750,2697,826],{"class":825},[750,2699,829],{"class":764},[750,2701,832],{"class":760},[750,2703,765],{"class":835},[750,2705,838],{"class":764},[750,2707,784],{"class":760},[750,2709,2710],{"class":752,"line":843},[750,2711,819],{"emptyLinePlaceholder":223},[750,2713,2714],{"class":752,"line":848},[750,2715,2716],{"class":851},"\u002F\u002F Register modifiers and get instances\n",[750,2718,2719,2721,2723,2725,2727,2729,2731,2734,2736,2738,2740,2742],{"class":752,"line":855},[750,2720,826],{"class":825},[750,2722,761],{"class":760},[750,2724,862],{"class":764},[750,2726,797],{"class":760},[750,2728,867],{"class":764},[750,2730,797],{"class":760},[750,2732,2733],{"class":764}," dark ",[750,2735,895],{"class":760},[750,2737,898],{"class":760},[750,2739,794],{"class":835},[750,2741,903],{"class":764},[750,2743,784],{"class":760},[750,2745,2746],{"class":752,"line":908},[750,2747,819],{"emptyLinePlaceholder":223},[750,2749,2750],{"class":752,"line":913},[750,2751,2752],{"class":851},"\u002F\u002F Register utilities and get creators\n",[750,2754,2755,2757,2759,2761,2763,2766,2768,2770,2772,2774],{"class":752,"line":919},[750,2756,826],{"class":825},[750,2758,761],{"class":760},[750,2760,926],{"class":764},[750,2762,797],{"class":760},[750,2764,2765],{"class":764}," createTextColorUtility ",[750,2767,895],{"class":760},[750,2769,898],{"class":760},[750,2771,800],{"class":835},[750,2773,903],{"class":764},[750,2775,784],{"class":760},[750,2777,2778],{"class":752,"line":944},[750,2779,819],{"emptyLinePlaceholder":223},[750,2781,2782],{"class":752,"line":949},[750,2783,2784],{"class":851},"\u002F\u002F Create color tokens\n",[750,2786,2787,2789,2791,2794,2796,2799,2801,2803,2805,2807,2809],{"class":752,"line":961},[750,2788,826],{"class":825},[750,2790,761],{"class":760},[750,2792,2793],{"class":764}," colorPrimary",[750,2795,797],{"class":760},[750,2797,2798],{"class":764}," colorSecondary ",[750,2800,895],{"class":760},[750,2802,898],{"class":760},[750,2804,2677],{"class":835},[750,2806,2483],{"class":764},[750,2808,797],{"class":760},[750,2810,1365],{"class":760},[750,2812,2813,2815,2817,2819,2821,2823],{"class":752,"line":981},[750,2814,965],{"class":964},[750,2816,968],{"class":760},[750,2818,774],{"class":760},[750,2820,973],{"class":777},[750,2822,781],{"class":760},[750,2824,978],{"class":760},[750,2826,2827,2829,2831,2833,2835,2837],{"class":752,"line":998},[750,2828,984],{"class":964},[750,2830,968],{"class":760},[750,2832,774],{"class":760},[750,2834,991],{"class":777},[750,2836,781],{"class":760},[750,2838,978],{"class":760},[750,2840,2841,2843,2846,2849,2851],{"class":752,"line":1018},[750,2842,895],{"class":760},[750,2844,2845],{"class":756}," as",[750,2847,2848],{"class":825}," const",[750,2850,1982],{"class":764},[750,2852,784],{"class":760},[750,2854,2855],{"class":752,"line":1023},[750,2856,819],{"emptyLinePlaceholder":223},[750,2858,2859],{"class":752,"line":1033},[750,2860,2861],{"class":851},"\u002F\u002F Pre-generate modifier variants for specific values\n",[750,2863,2864,2866,2868],{"class":752,"line":1051},[750,2865,952],{"class":835},[750,2867,955],{"class":764},[750,2869,958],{"class":760},[750,2871,2872,2874,2876,2878,2880,2883,2886],{"class":752,"line":1068},[750,2873,965],{"class":964},[750,2875,968],{"class":760},[750,2877,1109],{"class":764},[750,2879,1131],{"class":760},[750,2881,2882],{"class":835},"ref",[750,2884,2885],{"class":764},"(colorPrimary)",[750,2887,978],{"class":760},[750,2889,2890,2892,2894,2896,2898,2900,2903],{"class":752,"line":1085},[750,2891,984],{"class":964},[750,2893,968],{"class":760},[750,2895,1109],{"class":764},[750,2897,1131],{"class":760},[750,2899,2882],{"class":835},[750,2901,2902],{"class":764},"(colorSecondary)",[750,2904,978],{"class":760},[750,2906,2907,2909,2911,2913,2915,2917,2919],{"class":752,"line":1095},[750,2908,1001],{"class":760},[750,2910,1004],{"class":764},[750,2912,797],{"class":760},[750,2914,867],{"class":764},[750,2916,797],{"class":760},[750,2918,1013],{"class":764},[750,2920,784],{"class":760},[750,2922,2923],{"class":752,"line":1100},[750,2924,819],{"emptyLinePlaceholder":223},[750,2926,2927,2930,2932],{"class":752,"line":1517},[750,2928,2929],{"class":835},"createTextColorUtility",[750,2931,955],{"class":764},[750,2933,958],{"class":760},[750,2935,2936,2938,2940,2942,2944,2946,2948],{"class":752,"line":1542},[750,2937,965],{"class":964},[750,2939,968],{"class":760},[750,2941,1109],{"class":764},[750,2943,1131],{"class":760},[750,2945,2882],{"class":835},[750,2947,2885],{"class":764},[750,2949,978],{"class":760},[750,2951,2952,2954,2956,2958,2960,2962,2964],{"class":752,"line":1574},[750,2953,984],{"class":964},[750,2955,968],{"class":760},[750,2957,1109],{"class":764},[750,2959,1131],{"class":760},[750,2961,2882],{"class":835},[750,2963,2902],{"class":764},[750,2965,978],{"class":760},[750,2967,2968,2970,2972],{"class":752,"line":1605},[750,2969,1001],{"class":760},[750,2971,1090],{"class":764},[750,2973,784],{"class":760},[750,2975,2977],{"class":752,"line":2976},28,[750,2978,819],{"emptyLinePlaceholder":223},[750,2980,2982,2984,2986,2988],{"class":752,"line":2981},29,[750,2983,1103],{"class":756},[750,2985,1106],{"class":756},[750,2987,1109],{"class":764},[750,2989,784],{"class":760},[693,2991,2992,2993,1775,2996,1775,2999,3002,3003,1131],{},"This generates classes like ",[697,2994,2995],{},"_background-color:primary",[697,2997,2998],{},"_hover:background-color:primary",[697,3000,3001],{},"_focus:background-color:primary",", and ",[697,3004,3005],{},"_dark:background-color:primary",[689,3007,3009],{"id":3008},"available-modifier-groups","Available Modifier Groups",[1717,3011,3012,3024],{},[1720,3013,3014],{},[1723,3015,3016,3019,3021],{},[1726,3017,3018],{},"Group Function",[1726,3020,636],{},[1726,3022,3023],{},"Purpose",[1742,3025,3026,3056,3098,3134,3171,3206,3242,3258],{},[1723,3027,3028,3033,3053],{},[1747,3029,3030],{},[697,3031,3032],{},"usePseudoStateModifiers(s)",[1747,3034,3035,1775,3037,1775,3039,1775,3042,1775,3045,1775,3047,1775,3050],{},[697,3036,1217],{},[697,3038,1292],{},[697,3040,3041],{},"focusWithin",[697,3043,3044],{},"focusVisible",[697,3046,1780],{},[697,3048,3049],{},"visited",[697,3051,3052],{},"target",[1747,3054,3055],{},"Interactive states",[1723,3057,3058,3063,3095],{},[1747,3059,3060],{},[697,3061,3062],{},"useFormStateModifiers(s)",[1747,3064,3065,1775,3067,1775,3070,1775,3072,1775,3075,1775,3078,1775,3081,1775,3083,1775,3086,1775,3089,1775,3092],{},[697,3066,1809],{},[697,3068,3069],{},"enabled",[697,3071,1812],{},[697,3073,3074],{},"indeterminate",[697,3076,3077],{},"required",[697,3079,3080],{},"optional",[697,3082,1815],{},[697,3084,3085],{},"invalid",[697,3087,3088],{},"placeholderShown",[697,3090,3091],{},"autofill",[697,3093,3094],{},"readOnly",[1747,3096,3097],{},"Form element states",[1723,3099,3100,3105,3131],{},[1747,3101,3102],{},[697,3103,3104],{},"usePseudoElementModifiers(s)",[1747,3106,3107,1775,3109,1775,3111,1775,3113,1775,3116,1775,3119,1775,3122,1775,3125,1775,3128],{},[697,3108,1880],{},[697,3110,1883],{},[697,3112,1886],{},[697,3114,3115],{},"selection",[697,3117,3118],{},"firstLetter",[697,3120,3121],{},"firstLine",[697,3123,3124],{},"marker",[697,3126,3127],{},"backdrop",[697,3129,3130],{},"file",[1747,3132,3133],{},"Element sub-parts",[1723,3135,3136,3141,3168],{},[1747,3137,3138],{},[697,3139,3140],{},"useAriaStateModifiers(s)",[1747,3142,3143,1775,3146,1775,3149,1775,3151,1775,3153,1775,3156,1775,3159,1775,3162,1775,3165],{},[697,3144,3145],{},"ariaBusy",[697,3147,3148],{},"ariaChecked",[697,3150,1950],{},[697,3152,1947],{},[697,3154,3155],{},"ariaHidden",[697,3157,3158],{},"ariaPressed",[697,3160,3161],{},"ariaReadonly",[697,3163,3164],{},"ariaRequired",[697,3166,3167],{},"ariaSelected",[1747,3169,3170],{},"ARIA attribute states",[1723,3172,3173,3178,3203],{},[1747,3174,3175],{},[697,3176,3177],{},"useStructuralModifiers(s)",[1747,3179,3180,1775,3182,1775,3184,1775,3187,1775,3189,1775,3191,1775,3194,1775,3197,1775,3200],{},[697,3181,1843],{},[697,3183,1846],{},[697,3185,3186],{},"only",[697,3188,1849],{},[697,3190,1852],{},[697,3192,3193],{},"firstOfType",[697,3195,3196],{},"lastOfType",[697,3198,3199],{},"onlyOfType",[697,3201,3202],{},"empty",[1747,3204,3205],{},"DOM position",[1723,3207,3208,3213,3239],{},[1747,3209,3210],{},[697,3211,3212],{},"useMediaPreferenceModifiers(s)",[1747,3214,3215,1775,3217,1775,3219,1775,3222,1775,3225,1775,3228,1775,3231,1775,3234,1775,3236],{},[697,3216,1384],{},[697,3218,1916],{},[697,3220,3221],{},"motionReduce",[697,3223,3224],{},"contrastMore",[697,3226,3227],{},"contrastLess",[697,3229,3230],{},"portrait",[697,3232,3233],{},"landscape",[697,3235,1919],{},[697,3237,3238],{},"forcedColors",[1747,3240,3241],{},"User preferences",[1723,3243,3244,3249,3255],{},[1747,3245,3246],{},[697,3247,3248],{},"useDirectionalModifiers(s)",[1747,3250,3251,1775,3253],{},[697,3252,1978],{},[697,3254,1981],{},[1747,3256,3257],{},"Text direction",[1723,3259,3260,3265,3271],{},[1747,3261,3262],{},[697,3263,3264],{},"useOtherStateModifiers(s)",[1747,3266,3267,1775,3269],{},[697,3268,2010],{},[697,3270,2013],{},[1747,3272,3273],{},"Miscellaneous states",[689,3275,3277],{"id":3276},"faq","FAQ",[3279,3280,3281,3298,3302,3434,3445],"accordion",{},[3282,3283,3286,3287,3290,3291,3293,3294,3297],"accordion-item",{"icon":3284,"label":3285},"i-lucide-circle-help","What's the difference between useModifiersPreset and individual modifier composables?","Individual modifier composables (like ",[697,3288,3289],{},"useHoverModifier",") register a single modifier, while group composables (like ",[697,3292,1759],{},") register all modifiers in a category. ",[697,3295,3296],{},"useModifiersPreset()"," registers all 8 categories at once, making it the most convenient option when you need comprehensive modifier coverage.",[3282,3299,3301],{"icon":3284,"label":3300},"Does registering modifiers generate any CSS?","No—registering modifiers only creates modifier instances. CSS is only generated when you pass modifiers to a utility creator function. This means you can register all modifiers without any CSS bloat.",[3282,3303,3305,3308],{"icon":3284,"label":3304},"Can I use both the preset and individual composables?",[693,3306,3307],{},"Yes! You can use the preset for most modifiers and add individual ones separately:",[740,3309,3311],{"className":742,"code":3310,"language":745,"meta":746,"style":746},"const { hover, focus } = useModifiersPreset(s, {\n    pseudoStates: true,\n    formStates: false, \u002F\u002F Skip form states in preset\n});\n\n\u002F\u002F Register only specific form state modifiers\nimport { useDisabledModifier, useCheckedModifier } from '@styleframe\u002Ftheme';\nconst disabled = useDisabledModifier(s);\nconst checked = useCheckedModifier(s);\n",[697,3312,3313,3338,3348,3361,3369,3373,3378,3404,3419],{"__ignoreMap":746},[750,3314,3315,3317,3319,3321,3323,3326,3328,3330,3332,3334,3336],{"class":752,"line":753},[750,3316,826],{"class":825},[750,3318,761],{"class":760},[750,3320,862],{"class":764},[750,3322,797],{"class":760},[750,3324,3325],{"class":764}," focus ",[750,3327,895],{"class":760},[750,3329,898],{"class":760},[750,3331,794],{"class":835},[750,3333,2483],{"class":764},[750,3335,797],{"class":760},[750,3337,1365],{"class":760},[750,3339,3340,3342,3344,3346],{"class":752,"line":787},[750,3341,2492],{"class":964},[750,3343,968],{"class":760},[750,3345,2498],{"class":2497},[750,3347,978],{"class":760},[750,3349,3350,3352,3354,3356,3358],{"class":752,"line":816},[750,3351,2508],{"class":964},[750,3353,968],{"class":760},[750,3355,2541],{"class":2497},[750,3357,797],{"class":760},[750,3359,3360],{"class":851}," \u002F\u002F Skip form states in preset\n",[750,3362,3363,3365,3367],{"class":752,"line":822},[750,3364,895],{"class":760},[750,3366,1982],{"class":764},[750,3368,784],{"class":760},[750,3370,3371],{"class":752,"line":843},[750,3372,819],{"emptyLinePlaceholder":223},[750,3374,3375],{"class":752,"line":848},[750,3376,3377],{"class":851},"\u002F\u002F Register only specific form state modifiers\n",[750,3379,3380,3382,3384,3387,3389,3392,3394,3396,3398,3400,3402],{"class":752,"line":855},[750,3381,757],{"class":756},[750,3383,761],{"class":760},[750,3385,3386],{"class":764}," useDisabledModifier",[750,3388,797],{"class":760},[750,3390,3391],{"class":764}," useCheckedModifier",[750,3393,768],{"class":760},[750,3395,771],{"class":756},[750,3397,774],{"class":760},[750,3399,809],{"class":777},[750,3401,781],{"class":760},[750,3403,784],{"class":760},[750,3405,3406,3408,3411,3413,3415,3417],{"class":752,"line":908},[750,3407,826],{"class":825},[750,3409,3410],{"class":764}," disabled ",[750,3412,832],{"class":760},[750,3414,3386],{"class":835},[750,3416,903],{"class":764},[750,3418,784],{"class":760},[750,3420,3421,3423,3426,3428,3430,3432],{"class":752,"line":913},[750,3422,826],{"class":825},[750,3424,3425],{"class":764}," checked ",[750,3427,832],{"class":760},[750,3429,3391],{"class":835},[750,3431,903],{"class":764},[750,3433,784],{"class":760},[3282,3435,3437,3438,3441,3442,3444],{"icon":3284,"label":3436},"Do I need useModifiersPreset if I'm using useUtilitiesPreset?","Yes—",[697,3439,3440],{},"useUtilitiesPreset()"," only registers utility factories. Call ",[697,3443,3296],{}," separately to register modifier factories. Both are needed for full coverage when using the scanner.",[3282,3446,3448,3451],{"icon":3284,"label":3447},"How do I pass modifiers to utility creators?",[693,3449,3450],{},"Pass an array of modifier instances as the second argument to any utility creator function. Each entry creates an individual variant. Use nested arrays to combine modifiers together:",[740,3452,3454],{"className":742,"code":3453,"language":745,"meta":746,"style":746},"const { hover, focus, dark } = useModifiersPreset(s);\nconst { createOpacityUtility } = useUtilitiesPreset(s);\n\n\u002F\u002F Individual modifiers only\ncreateOpacityUtility({ 0: '0', 50: '0.5', 100: '1' }, [hover, focus, dark]);\n\u002F\u002F Generates: _opacity:50, _hover:opacity:50, _focus:opacity:50, _dark:opacity:50\n\n\u002F\u002F With combined modifiers using nested arrays\ncreateOpacityUtility({ 0: '0', 50: '0.5', 100: '1' }, [hover, dark, [dark, hover]]);\n\u002F\u002F Generates: _opacity:50, _hover:opacity:50, _dark:opacity:50, _dark:hover:opacity:50\n",[697,3455,3456,3482,3500,3504,3509,3569,3574,3578,3583,3645],{"__ignoreMap":746},[750,3457,3458,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480],{"class":752,"line":753},[750,3459,826],{"class":825},[750,3461,761],{"class":760},[750,3463,862],{"class":764},[750,3465,797],{"class":760},[750,3467,867],{"class":764},[750,3469,797],{"class":760},[750,3471,2733],{"class":764},[750,3473,895],{"class":760},[750,3475,898],{"class":760},[750,3477,794],{"class":835},[750,3479,903],{"class":764},[750,3481,784],{"class":760},[750,3483,3484,3486,3488,3490,3492,3494,3496,3498],{"class":752,"line":787},[750,3485,826],{"class":825},[750,3487,761],{"class":760},[750,3489,931],{"class":764},[750,3491,895],{"class":760},[750,3493,898],{"class":760},[750,3495,800],{"class":835},[750,3497,903],{"class":764},[750,3499,784],{"class":760},[750,3501,3502],{"class":752,"line":816},[750,3503,819],{"emptyLinePlaceholder":223},[750,3505,3506],{"class":752,"line":822},[750,3507,3508],{"class":851},"\u002F\u002F Individual modifiers only\n",[750,3510,3511,3513,3515,3518,3520,3522,3524,3526,3528,3530,3533,3535,3537,3539,3541,3543,3546,3548,3550,3552,3554,3557,3559,3561,3563,3565,3567],{"class":752,"line":843},[750,3512,1026],{"class":835},[750,3514,955],{"class":764},[750,3516,3517],{"class":760},"{",[750,3519,1486],{"class":1036},[750,3521,968],{"class":760},[750,3523,774],{"class":760},[750,3525,1044],{"class":777},[750,3527,781],{"class":760},[750,3529,797],{"class":760},[750,3531,3532],{"class":1036}," 50",[750,3534,968],{"class":760},[750,3536,774],{"class":760},[750,3538,1061],{"class":777},[750,3540,781],{"class":760},[750,3542,797],{"class":760},[750,3544,3545],{"class":1036}," 100",[750,3547,968],{"class":760},[750,3549,774],{"class":760},[750,3551,1078],{"class":777},[750,3553,781],{"class":760},[750,3555,3556],{"class":760}," },",[750,3558,1004],{"class":764},[750,3560,797],{"class":760},[750,3562,867],{"class":764},[750,3564,797],{"class":760},[750,3566,1013],{"class":764},[750,3568,784],{"class":760},[750,3570,3571],{"class":752,"line":848},[750,3572,3573],{"class":851},"\u002F\u002F Generates: _opacity:50, _hover:opacity:50, _focus:opacity:50, _dark:opacity:50\n",[750,3575,3576],{"class":752,"line":855},[750,3577,819],{"emptyLinePlaceholder":223},[750,3579,3580],{"class":752,"line":908},[750,3581,3582],{"class":851},"\u002F\u002F With combined modifiers using nested arrays\n",[750,3584,3585,3587,3589,3591,3593,3595,3597,3599,3601,3603,3605,3607,3609,3611,3613,3615,3617,3619,3621,3623,3625,3627,3629,3631,3633,3635,3638,3640,3643],{"class":752,"line":913},[750,3586,1026],{"class":835},[750,3588,955],{"class":764},[750,3590,3517],{"class":760},[750,3592,1486],{"class":1036},[750,3594,968],{"class":760},[750,3596,774],{"class":760},[750,3598,1044],{"class":777},[750,3600,781],{"class":760},[750,3602,797],{"class":760},[750,3604,3532],{"class":1036},[750,3606,968],{"class":760},[750,3608,774],{"class":760},[750,3610,1061],{"class":777},[750,3612,781],{"class":760},[750,3614,797],{"class":760},[750,3616,3545],{"class":1036},[750,3618,968],{"class":760},[750,3620,774],{"class":760},[750,3622,1078],{"class":777},[750,3624,781],{"class":760},[750,3626,3556],{"class":760},[750,3628,1004],{"class":764},[750,3630,797],{"class":760},[750,3632,877],{"class":764},[750,3634,797],{"class":760},[750,3636,3637],{"class":764}," [dark",[750,3639,797],{"class":760},[750,3641,3642],{"class":764}," hover]])",[750,3644,784],{"class":760},[750,3646,3647],{"class":752,"line":919},[750,3648,3649],{"class":851},"\u002F\u002F Generates: _opacity:50, _hover:opacity:50, _dark:opacity:50, _dark:hover:opacity:50\n",[3651,3652,3653],"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 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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":746,"searchDepth":787,"depth":787,"links":3655},[3656,3657,3658,3659,3664,3665,3666,3667],{"id":691,"depth":787,"text":78},{"id":703,"depth":787,"text":704},{"id":730,"depth":787,"text":731},{"id":1636,"depth":787,"text":699,"children":3660},[3661,3662,3663],{"id":1645,"depth":816,"text":1646},{"id":1696,"depth":816,"text":1697},{"id":2016,"depth":816,"text":2017},{"id":2398,"depth":787,"text":2399},{"id":2627,"depth":787,"text":2628},{"id":3008,"depth":787,"text":3009},{"id":3276,"depth":787,"text":3277},"Quickly register all modifier composables with the useModifiersPreset function for comprehensive modifier coverage in a single call.","md",null,{},{"title":564,"icon":173},{"title":684,"description":3668},"q2O88NtXmBZ1JE7rIYYhMkKbwiaTANcP1abbfqG4YTg",[3676,3678],{"title":78,"path":637,"stem":638,"description":3677,"icon":79,"children":-1},"Explore Styleframe's utility modifier composables for generating state-based, responsive, and structural variants of your utility classes with full type safety.",{"title":645,"path":646,"stem":647,"description":3679,"icon":571,"children":-1},"Create ARIA state modifiers for styling elements based on their ARIA attribute values with full type safety.",1781596354617]