[{"data":1,"prerenderedAt":3324},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-presets":407,"-docs-theme-modifiers-presets-surround":3319},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3311,"extension":3312,"links":3313,"meta":3314,"navigation":3315,"path":369,"seo":3316,"sitemap":3317,"stem":370,"__hash__":3318},"docs_theme/docs/theme/modifiers/01.presets.md","Utility Modifiers Presets",{"type":411,"value":412,"toc":3297},"minimark",[413,417,426,430,453,457,1334,1339,1342,1347,1394,1398,1401,1416,1654,1658,1665,2036,2040,2043,2265,2269,2276,2632,2648,2652,2916,2920,3293],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425],"p",{},"The ",[422,423,424],"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.",[414,427,429],{"id":428},"why-use-presets","Why use presets?",[431,432,433,441,447],"ul",{},[434,435,436,440],"li",{},[437,438,439],"strong",{},"Complete Coverage",": Register all 8 modifier categories with one function call",[434,442,443,446],{},[437,444,445],{},"Flat Return Value",": All individual modifiers are spread into a single flat object for easy destructuring",[434,448,449,452],{},[437,450,451],{},"Selective Disabling",": Disable specific categories you don't need via configuration",[414,454,456],{"id":455},"quick-start","Quick Start",[458,459,460,838],"tabs",{},[461,462,465],"tabs-item",{"icon":463,"label":464},"i-lucide-code","Code",[466,467,473],"pre",{"className":468,"code":469,"filename":470,"language":471,"meta":472,"style":472},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useModifiersPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Register all modifiers\nconst { hover, focus, active, dark, disabled, first, last } = useModifiersPreset(s);\n\n// 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","",[422,474,475,511,540,546,567,572,579,632,637,643,668,673,685,705,722,742,747,757,775,792,809,819,824],{"__ignoreMap":472},[476,477,480,484,488,492,495,498,501,505,508],"span",{"class":478,"line":479},"line",1,[476,481,483],{"class":482},"s7zQu","import",[476,485,487],{"class":486},"sMK4o"," {",[476,489,491],{"class":490},"sTEyZ"," styleframe",[476,493,494],{"class":486}," }",[476,496,497],{"class":482}," from",[476,499,500],{"class":486}," '",[476,502,504],{"class":503},"sfazB","styleframe",[476,506,507],{"class":486},"'",[476,509,510],{"class":486},";\n",[476,512,514,516,518,521,524,527,529,531,533,536,538],{"class":478,"line":513},2,[476,515,483],{"class":482},[476,517,487],{"class":486},[476,519,520],{"class":490}," useModifiersPreset",[476,522,523],{"class":486},",",[476,525,526],{"class":490}," useUtilitiesPreset",[476,528,494],{"class":486},[476,530,497],{"class":482},[476,532,500],{"class":486},[476,534,535],{"class":503},"@styleframe/theme",[476,537,507],{"class":486},[476,539,510],{"class":486},[476,541,543],{"class":478,"line":542},3,[476,544,545],{"emptyLinePlaceholder":206},"\n",[476,547,549,553,556,559,562,565],{"class":478,"line":548},4,[476,550,552],{"class":551},"spNyl","const",[476,554,555],{"class":490}," s ",[476,557,558],{"class":486},"=",[476,560,491],{"class":561},"s2Zo4",[476,563,564],{"class":490},"()",[476,566,510],{"class":486},[476,568,570],{"class":478,"line":569},5,[476,571,545],{"emptyLinePlaceholder":206},[476,573,575],{"class":478,"line":574},6,[476,576,578],{"class":577},"sHwdD","// Register all modifiers\n",[476,580,582,584,586,589,591,594,596,599,601,604,606,609,611,614,616,619,622,625,627,630],{"class":478,"line":581},7,[476,583,552],{"class":551},[476,585,487],{"class":486},[476,587,588],{"class":490}," hover",[476,590,523],{"class":486},[476,592,593],{"class":490}," focus",[476,595,523],{"class":486},[476,597,598],{"class":490}," active",[476,600,523],{"class":486},[476,602,603],{"class":490}," dark",[476,605,523],{"class":486},[476,607,608],{"class":490}," disabled",[476,610,523],{"class":486},[476,612,613],{"class":490}," first",[476,615,523],{"class":486},[476,617,618],{"class":490}," last ",[476,620,621],{"class":486},"}",[476,623,624],{"class":486}," =",[476,626,520],{"class":561},[476,628,629],{"class":490},"(s)",[476,631,510],{"class":486},[476,633,635],{"class":478,"line":634},8,[476,636,545],{"emptyLinePlaceholder":206},[476,638,640],{"class":478,"line":639},9,[476,641,642],{"class":577},"// Register utilities and create values with modifiers\n",[476,644,646,648,650,653,655,658,660,662,664,666],{"class":478,"line":645},10,[476,647,552],{"class":551},[476,649,487],{"class":486},[476,651,652],{"class":490}," createBackgroundColorUtility",[476,654,523],{"class":486},[476,656,657],{"class":490}," createOpacityUtility ",[476,659,621],{"class":486},[476,661,624],{"class":486},[476,663,526],{"class":561},[476,665,629],{"class":490},[476,667,510],{"class":486},[476,669,671],{"class":478,"line":670},11,[476,672,545],{"emptyLinePlaceholder":206},[476,674,676,679,682],{"class":478,"line":675},12,[476,677,678],{"class":561},"createBackgroundColorUtility",[476,680,681],{"class":490},"(",[476,683,684],{"class":486},"{\n",[476,686,688,692,695,697,700,702],{"class":478,"line":687},13,[476,689,691],{"class":690},"swJcz","    primary",[476,693,694],{"class":486},":",[476,696,500],{"class":486},[476,698,699],{"class":503},"#006cff",[476,701,507],{"class":486},[476,703,704],{"class":486},",\n",[476,706,708,711,713,715,718,720],{"class":478,"line":707},14,[476,709,710],{"class":690},"    secondary",[476,712,694],{"class":486},[476,714,500],{"class":486},[476,716,717],{"class":503},"#6c757d",[476,719,507],{"class":486},[476,721,704],{"class":486},[476,723,725,728,731,733,735,737,740],{"class":478,"line":724},15,[476,726,727],{"class":486},"},",[476,729,730],{"class":490}," [hover",[476,732,523],{"class":486},[476,734,593],{"class":490},[476,736,523],{"class":486},[476,738,739],{"class":490}," dark])",[476,741,510],{"class":486},[476,743,745],{"class":478,"line":744},16,[476,746,545],{"emptyLinePlaceholder":206},[476,748,750,753,755],{"class":478,"line":749},17,[476,751,752],{"class":561},"createOpacityUtility",[476,754,681],{"class":490},[476,756,684],{"class":486},[476,758,760,764,766,768,771,773],{"class":478,"line":759},18,[476,761,763],{"class":762},"sbssI","    0",[476,765,694],{"class":486},[476,767,500],{"class":486},[476,769,770],{"class":503},"0",[476,772,507],{"class":486},[476,774,704],{"class":486},[476,776,778,781,783,785,788,790],{"class":478,"line":777},19,[476,779,780],{"class":762},"    50",[476,782,694],{"class":486},[476,784,500],{"class":486},[476,786,787],{"class":503},"0.5",[476,789,507],{"class":486},[476,791,704],{"class":486},[476,793,795,798,800,802,805,807],{"class":478,"line":794},20,[476,796,797],{"class":762},"    100",[476,799,694],{"class":486},[476,801,500],{"class":486},[476,803,804],{"class":503},"1",[476,806,507],{"class":486},[476,808,704],{"class":486},[476,810,812,814,817],{"class":478,"line":811},21,[476,813,727],{"class":486},[476,815,816],{"class":490}," [hover])",[476,818,510],{"class":486},[476,820,822],{"class":478,"line":821},22,[476,823,545],{"emptyLinePlaceholder":206},[476,825,827,830,833,836],{"class":478,"line":826},23,[476,828,829],{"class":482},"export",[476,831,832],{"class":482}," default",[476,834,835],{"class":490}," s",[476,837,510],{"class":486},[461,839,841],{"icon":140,"label":840},"Output",[466,842,847],{"className":843,"code":844,"filename":845,"language":846,"meta":472,"style":472},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","/* Base utilities */\n._background-color\\:primary { background-color: #006cff; }\n._background-color\\:secondary { background-color: #6c757d; }\n\n/* Hover modifier variants */\n._hover\\:background-color\\:primary:hover { background-color: #006cff; }\n._hover\\:background-color\\:secondary:hover { background-color: #6c757d; }\n\n/* Focus modifier variants */\n._focus\\:background-color\\:primary:focus { background-color: #006cff; }\n._focus\\:background-color\\:secondary:focus { background-color: #6c757d; }\n\n/* Dark mode modifier variants */\n@media (prefers-color-scheme: dark) {\n    ._dark\\:background-color\\:primary { background-color: #006cff; }\n    ._dark\\:background-color\\:secondary { background-color: #6c757d; }\n}\n\n/* Opacity with hover */\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/index.css","css",[422,848,849,854,889,915,919,924,959,991,995,1000,1034,1066,1070,1075,1096,1126,1154,1159,1163,1168,1193,1217,1241,1272,1303],{"__ignoreMap":472},[476,850,851],{"class":478,"line":479},[476,852,853],{"class":577},"/* Base utilities */\n",[476,855,856,859,863,866,869,871,875,877,880,883,886],{"class":478,"line":513},[476,857,858],{"class":486},".",[476,860,862],{"class":861},"sBMFI","_background-color",[476,864,865],{"class":490},"\\:",[476,867,868],{"class":861},"primary",[476,870,487],{"class":486},[476,872,874],{"class":873},"sqsOY"," background-color",[476,876,694],{"class":486},[476,878,879],{"class":486}," #",[476,881,882],{"class":490},"006cff",[476,884,885],{"class":486},";",[476,887,888],{"class":486}," }\n",[476,890,891,893,895,897,900,902,904,906,908,911,913],{"class":478,"line":542},[476,892,858],{"class":486},[476,894,862],{"class":861},[476,896,865],{"class":490},[476,898,899],{"class":861},"secondary",[476,901,487],{"class":486},[476,903,874],{"class":873},[476,905,694],{"class":486},[476,907,879],{"class":486},[476,909,910],{"class":490},"6c757d",[476,912,885],{"class":486},[476,914,888],{"class":486},[476,916,917],{"class":478,"line":548},[476,918,545],{"emptyLinePlaceholder":206},[476,920,921],{"class":478,"line":569},[476,922,923],{"class":577},"/* Hover modifier variants */\n",[476,925,926,928,931,933,936,938,940,942,945,947,949,951,953,955,957],{"class":478,"line":574},[476,927,858],{"class":486},[476,929,930],{"class":861},"_hover",[476,932,865],{"class":490},[476,934,935],{"class":861},"background-color",[476,937,865],{"class":490},[476,939,868],{"class":861},[476,941,694],{"class":486},[476,943,944],{"class":551},"hover",[476,946,487],{"class":486},[476,948,874],{"class":873},[476,950,694],{"class":486},[476,952,879],{"class":486},[476,954,882],{"class":490},[476,956,885],{"class":486},[476,958,888],{"class":486},[476,960,961,963,965,967,969,971,973,975,977,979,981,983,985,987,989],{"class":478,"line":581},[476,962,858],{"class":486},[476,964,930],{"class":861},[476,966,865],{"class":490},[476,968,935],{"class":861},[476,970,865],{"class":490},[476,972,899],{"class":861},[476,974,694],{"class":486},[476,976,944],{"class":551},[476,978,487],{"class":486},[476,980,874],{"class":873},[476,982,694],{"class":486},[476,984,879],{"class":486},[476,986,910],{"class":490},[476,988,885],{"class":486},[476,990,888],{"class":486},[476,992,993],{"class":478,"line":634},[476,994,545],{"emptyLinePlaceholder":206},[476,996,997],{"class":478,"line":639},[476,998,999],{"class":577},"/* Focus modifier variants */\n",[476,1001,1002,1004,1007,1009,1011,1013,1015,1017,1020,1022,1024,1026,1028,1030,1032],{"class":478,"line":645},[476,1003,858],{"class":486},[476,1005,1006],{"class":861},"_focus",[476,1008,865],{"class":490},[476,1010,935],{"class":861},[476,1012,865],{"class":490},[476,1014,868],{"class":861},[476,1016,694],{"class":486},[476,1018,1019],{"class":551},"focus",[476,1021,487],{"class":486},[476,1023,874],{"class":873},[476,1025,694],{"class":486},[476,1027,879],{"class":486},[476,1029,882],{"class":490},[476,1031,885],{"class":486},[476,1033,888],{"class":486},[476,1035,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064],{"class":478,"line":670},[476,1037,858],{"class":486},[476,1039,1006],{"class":861},[476,1041,865],{"class":490},[476,1043,935],{"class":861},[476,1045,865],{"class":490},[476,1047,899],{"class":861},[476,1049,694],{"class":486},[476,1051,1019],{"class":551},[476,1053,487],{"class":486},[476,1055,874],{"class":873},[476,1057,694],{"class":486},[476,1059,879],{"class":486},[476,1061,910],{"class":490},[476,1063,885],{"class":486},[476,1065,888],{"class":486},[476,1067,1068],{"class":478,"line":675},[476,1069,545],{"emptyLinePlaceholder":206},[476,1071,1072],{"class":478,"line":687},[476,1073,1074],{"class":577},"/* Dark mode modifier variants */\n",[476,1076,1077,1080,1083,1086,1088,1090,1093],{"class":478,"line":707},[476,1078,1079],{"class":482},"@media",[476,1081,1082],{"class":486}," (",[476,1084,1085],{"class":490},"prefers-color-scheme",[476,1087,694],{"class":486},[476,1089,603],{"class":490},[476,1091,1092],{"class":486},")",[476,1094,1095],{"class":486}," {\n",[476,1097,1098,1101,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124],{"class":478,"line":724},[476,1099,1100],{"class":486},"    .",[476,1102,1103],{"class":861},"_dark",[476,1105,865],{"class":490},[476,1107,935],{"class":861},[476,1109,865],{"class":490},[476,1111,868],{"class":861},[476,1113,487],{"class":486},[476,1115,874],{"class":873},[476,1117,694],{"class":486},[476,1119,879],{"class":486},[476,1121,882],{"class":490},[476,1123,885],{"class":486},[476,1125,888],{"class":486},[476,1127,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152],{"class":478,"line":744},[476,1129,1100],{"class":486},[476,1131,1103],{"class":861},[476,1133,865],{"class":490},[476,1135,935],{"class":861},[476,1137,865],{"class":490},[476,1139,899],{"class":861},[476,1141,487],{"class":486},[476,1143,874],{"class":873},[476,1145,694],{"class":486},[476,1147,879],{"class":486},[476,1149,910],{"class":490},[476,1151,885],{"class":486},[476,1153,888],{"class":486},[476,1155,1156],{"class":478,"line":749},[476,1157,1158],{"class":486},"}\n",[476,1160,1161],{"class":478,"line":759},[476,1162,545],{"emptyLinePlaceholder":206},[476,1164,1165],{"class":478,"line":777},[476,1166,1167],{"class":577},"/* Opacity with hover */\n",[476,1169,1170,1172,1175,1177,1179,1181,1184,1186,1189,1191],{"class":478,"line":794},[476,1171,858],{"class":486},[476,1173,1174],{"class":861},"_opacity",[476,1176,865],{"class":490},[476,1178,770],{"class":861},[476,1180,487],{"class":486},[476,1182,1183],{"class":873}," opacity",[476,1185,694],{"class":486},[476,1187,1188],{"class":762}," 0",[476,1190,885],{"class":486},[476,1192,888],{"class":486},[476,1194,1195,1197,1199,1201,1204,1206,1208,1210,1213,1215],{"class":478,"line":811},[476,1196,858],{"class":486},[476,1198,1174],{"class":861},[476,1200,865],{"class":490},[476,1202,1203],{"class":861},"50",[476,1205,487],{"class":486},[476,1207,1183],{"class":873},[476,1209,694],{"class":486},[476,1211,1212],{"class":762}," 0.5",[476,1214,885],{"class":486},[476,1216,888],{"class":486},[476,1218,1219,1221,1223,1225,1228,1230,1232,1234,1237,1239],{"class":478,"line":821},[476,1220,858],{"class":486},[476,1222,1174],{"class":861},[476,1224,865],{"class":490},[476,1226,1227],{"class":861},"100",[476,1229,487],{"class":486},[476,1231,1183],{"class":873},[476,1233,694],{"class":486},[476,1235,1236],{"class":762}," 1",[476,1238,885],{"class":486},[476,1240,888],{"class":486},[476,1242,1243,1245,1247,1249,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270],{"class":478,"line":826},[476,1244,858],{"class":486},[476,1246,930],{"class":861},[476,1248,865],{"class":490},[476,1250,1251],{"class":861},"opacity",[476,1253,865],{"class":490},[476,1255,770],{"class":861},[476,1257,694],{"class":486},[476,1259,944],{"class":551},[476,1261,487],{"class":486},[476,1263,1183],{"class":873},[476,1265,694],{"class":486},[476,1267,1188],{"class":762},[476,1269,885],{"class":486},[476,1271,888],{"class":486},[476,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301],{"class":478,"line":1274},24,[476,1276,858],{"class":486},[476,1278,930],{"class":861},[476,1280,865],{"class":490},[476,1282,1251],{"class":861},[476,1284,865],{"class":490},[476,1286,1203],{"class":861},[476,1288,694],{"class":486},[476,1290,944],{"class":551},[476,1292,487],{"class":486},[476,1294,1183],{"class":873},[476,1296,694],{"class":486},[476,1298,1212],{"class":762},[476,1300,885],{"class":486},[476,1302,888],{"class":486},[476,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332],{"class":478,"line":1305},25,[476,1307,858],{"class":486},[476,1309,930],{"class":861},[476,1311,865],{"class":490},[476,1313,1251],{"class":861},[476,1315,865],{"class":490},[476,1317,1227],{"class":861},[476,1319,694],{"class":486},[476,1321,944],{"class":551},[476,1323,487],{"class":486},[476,1325,1183],{"class":873},[476,1327,694],{"class":486},[476,1329,1236],{"class":762},[476,1331,885],{"class":486},[476,1333,888],{"class":486},[414,1335,1337],{"id":1336},"usemodifierspreset",[422,1338,424],{},[418,1340,1341],{},"Registers all modifier categories with the Styleframe instance and returns a flat object containing all individual modifier instances.",[1343,1344,1346],"h3",{"id":1345},"signature","Signature",[466,1348,1350],{"className":468,"code":1349,"language":471,"meta":472,"style":472},"function useModifiersPreset(\n    s: Styleframe,\n    config?: ModifiersConfig\n): ModifierInstances\n",[422,1351,1352,1362,1375,1386],{"__ignoreMap":472},[476,1353,1354,1357,1359],{"class":478,"line":479},[476,1355,1356],{"class":551},"function",[476,1358,520],{"class":561},[476,1360,1361],{"class":486},"(\n",[476,1363,1364,1368,1370,1373],{"class":478,"line":513},[476,1365,1367],{"class":1366},"sHdIc","    s",[476,1369,694],{"class":486},[476,1371,1372],{"class":861}," Styleframe",[476,1374,704],{"class":486},[476,1376,1377,1380,1383],{"class":478,"line":542},[476,1378,1379],{"class":1366},"    config",[476,1381,1382],{"class":486},"?:",[476,1384,1385],{"class":861}," ModifiersConfig\n",[476,1387,1388,1391],{"class":478,"line":548},[476,1389,1390],{"class":486},"):",[476,1392,1393],{"class":861}," ModifierInstances\n",[1343,1395,1397],{"id":1396},"configuration-options","Configuration Options",[418,1399,1400],{},"Each modifier category can be configured as:",[431,1402,1403,1410],{},[434,1404,1405,1406,1409],{},"Omitted or ",[422,1407,1408],{},"undefined"," (default): Enable the category",[434,1411,1412,1415],{},[422,1413,1414],{},"false",": Disable the category entirely",[1417,1418,1419,1438],"table",{},[1420,1421,1422],"thead",{},[1423,1424,1425,1429,1432,1435],"tr",{},[1426,1427,1428],"th",{},"Option",[1426,1430,1431],{},"Type",[1426,1433,1434],{},"Default",[1426,1436,1437],{},"Description",[1439,1440,1441,1471,1498,1528,1555,1582,1606,1630],"tbody",{},[1423,1442,1443,1449,1454,1459],{},[1444,1445,1446],"td",{},[422,1447,1448],{},"pseudoStates",[1444,1450,1451],{},[422,1452,1453],{},"boolean",[1444,1455,1456],{},[422,1457,1458],{},"true",[1444,1460,1461,1462,1464,1465,1464,1467,1470],{},"Pseudo-class state modifiers (",[422,1463,944],{},", ",[422,1466,1019],{},[422,1468,1469],{},"active",", etc.)",[1423,1472,1473,1478,1482,1486],{},[1444,1474,1475],{},[422,1476,1477],{},"formStates",[1444,1479,1480],{},[422,1481,1453],{},[1444,1483,1484],{},[422,1485,1458],{},[1444,1487,1488,1489,1464,1492,1464,1495,1470],{},"Form state modifiers (",[422,1490,1491],{},"disabled",[422,1493,1494],{},"checked",[422,1496,1497],{},"valid",[1423,1499,1500,1505,1509,1513],{},[1444,1501,1502],{},[422,1503,1504],{},"structural",[1444,1506,1507],{},[422,1508,1453],{},[1444,1510,1511],{},[422,1512,1458],{},[1444,1514,1515,1516,1464,1519,1464,1522,1464,1525,1470],{},"Structural pseudo-class modifiers (",[422,1517,1518],{},"first",[422,1520,1521],{},"last",[422,1523,1524],{},"odd",[422,1526,1527],{},"even",[1423,1529,1530,1535,1539,1543],{},[1444,1531,1532],{},[422,1533,1534],{},"pseudoElements",[1444,1536,1537],{},[422,1538,1453],{},[1444,1540,1541],{},[422,1542,1458],{},[1444,1544,1545,1546,1464,1549,1464,1552,1470],{},"Pseudo-element modifiers (",[422,1547,1548],{},"before",[422,1550,1551],{},"after",[422,1553,1554],{},"placeholder",[1423,1556,1557,1562,1566,1570],{},[1444,1558,1559],{},[422,1560,1561],{},"mediaPreferences",[1444,1563,1564],{},[422,1565,1453],{},[1444,1567,1568],{},[422,1569,1458],{},[1444,1571,1572,1573,1464,1576,1464,1579,1470],{},"Media/preference query modifiers (",[422,1574,1575],{},"dark",[422,1577,1578],{},"motionSafe",[422,1580,1581],{},"print",[1423,1583,1584,1589,1593,1597],{},[1444,1585,1586],{},[422,1587,1588],{},"ariaStates",[1444,1590,1591],{},[422,1592,1453],{},[1444,1594,1595],{},[422,1596,1458],{},[1444,1598,1599,1600,1464,1603,1470],{},"ARIA state modifiers (",[422,1601,1602],{},"ariaExpanded",[422,1604,1605],{},"ariaDisabled",[1423,1607,1608,1613,1617,1621],{},[1444,1609,1610],{},[422,1611,1612],{},"directional",[1444,1614,1615],{},[422,1616,1453],{},[1444,1618,1619],{},[422,1620,1458],{},[1444,1622,1623,1624,1464,1627,1092],{},"Directional modifiers (",[422,1625,1626],{},"rtl",[422,1628,1629],{},"ltr",[1423,1631,1632,1637,1641,1645],{},[1444,1633,1634],{},[422,1635,1636],{},"otherStates",[1444,1638,1639],{},[422,1640,1453],{},[1444,1642,1643],{},[422,1644,1458],{},[1444,1646,1647,1648,1464,1651,1092],{},"Other state modifiers (",[422,1649,1650],{},"open",[422,1652,1653],{},"inert",[1343,1655,1657],{"id":1656},"return-value","Return Value",[418,1659,1660,1661,1664],{},"Returns a flat ",[422,1662,1663],{},"ModifierInstances"," object containing all individual modifiers from every enabled category. The modifiers are spread into a single object for easy destructuring:",[466,1666,1668],{"className":468,"code":1667,"language":471,"meta":472,"style":472},"const {\n    // Pseudo-State\n    hover, focus, focusWithin, focusVisible, active, visited, target,\n    // Form State\n    disabled, enabled, checked, indeterminate, required, optional, valid, invalid,\n    placeholderShown, autofill, readOnly,\n    // Structural\n    first, last, only, odd, even, firstOfType, lastOfType, onlyOfType, empty,\n    // Pseudo-Elements\n    before, after, placeholder, selection, firstLetter, firstLine, marker, backdrop, file,\n    // Media & Preferences\n    dark, motionSafe, motionReduce, contrastMore, contrastLess, portrait, landscape, print, forcedColors,\n    // ARIA State\n    ariaBusy, ariaChecked, ariaDisabled, ariaExpanded, ariaHidden, ariaPressed, ariaReadonly,\n    ariaRequired, ariaSelected,\n    // Directional\n    rtl, ltr,\n    // Other State\n    open, inert,\n} = useModifiersPreset(s);\n",[422,1669,1670,1676,1681,1716,1721,1763,1780,1785,1832,1837,1884,1889,1936,1941,1978,1990,1995,2007,2012,2024],{"__ignoreMap":472},[476,1671,1672,1674],{"class":478,"line":479},[476,1673,552],{"class":551},[476,1675,1095],{"class":486},[476,1677,1678],{"class":478,"line":513},[476,1679,1680],{"class":577},"    // Pseudo-State\n",[476,1682,1683,1686,1688,1690,1692,1695,1697,1700,1702,1704,1706,1709,1711,1714],{"class":478,"line":542},[476,1684,1685],{"class":490},"    hover",[476,1687,523],{"class":486},[476,1689,593],{"class":490},[476,1691,523],{"class":486},[476,1693,1694],{"class":490}," focusWithin",[476,1696,523],{"class":486},[476,1698,1699],{"class":490}," focusVisible",[476,1701,523],{"class":486},[476,1703,598],{"class":490},[476,1705,523],{"class":486},[476,1707,1708],{"class":490}," visited",[476,1710,523],{"class":486},[476,1712,1713],{"class":490}," target",[476,1715,704],{"class":486},[476,1717,1718],{"class":478,"line":548},[476,1719,1720],{"class":577},"    // Form State\n",[476,1722,1723,1726,1728,1731,1733,1736,1738,1741,1743,1746,1748,1751,1753,1756,1758,1761],{"class":478,"line":569},[476,1724,1725],{"class":490},"    disabled",[476,1727,523],{"class":486},[476,1729,1730],{"class":490}," enabled",[476,1732,523],{"class":486},[476,1734,1735],{"class":490}," checked",[476,1737,523],{"class":486},[476,1739,1740],{"class":490}," indeterminate",[476,1742,523],{"class":486},[476,1744,1745],{"class":490}," required",[476,1747,523],{"class":486},[476,1749,1750],{"class":490}," optional",[476,1752,523],{"class":486},[476,1754,1755],{"class":490}," valid",[476,1757,523],{"class":486},[476,1759,1760],{"class":490}," invalid",[476,1762,704],{"class":486},[476,1764,1765,1768,1770,1773,1775,1778],{"class":478,"line":574},[476,1766,1767],{"class":490},"    placeholderShown",[476,1769,523],{"class":486},[476,1771,1772],{"class":490}," autofill",[476,1774,523],{"class":486},[476,1776,1777],{"class":490}," readOnly",[476,1779,704],{"class":486},[476,1781,1782],{"class":478,"line":581},[476,1783,1784],{"class":577},"    // Structural\n",[476,1786,1787,1790,1792,1795,1797,1800,1802,1805,1807,1810,1812,1815,1817,1820,1822,1825,1827,1830],{"class":478,"line":634},[476,1788,1789],{"class":490},"    first",[476,1791,523],{"class":486},[476,1793,1794],{"class":490}," last",[476,1796,523],{"class":486},[476,1798,1799],{"class":490}," only",[476,1801,523],{"class":486},[476,1803,1804],{"class":490}," odd",[476,1806,523],{"class":486},[476,1808,1809],{"class":490}," even",[476,1811,523],{"class":486},[476,1813,1814],{"class":490}," firstOfType",[476,1816,523],{"class":486},[476,1818,1819],{"class":490}," lastOfType",[476,1821,523],{"class":486},[476,1823,1824],{"class":490}," onlyOfType",[476,1826,523],{"class":486},[476,1828,1829],{"class":490}," empty",[476,1831,704],{"class":486},[476,1833,1834],{"class":478,"line":639},[476,1835,1836],{"class":577},"    // Pseudo-Elements\n",[476,1838,1839,1842,1844,1847,1849,1852,1854,1857,1859,1862,1864,1867,1869,1872,1874,1877,1879,1882],{"class":478,"line":645},[476,1840,1841],{"class":490},"    before",[476,1843,523],{"class":486},[476,1845,1846],{"class":490}," after",[476,1848,523],{"class":486},[476,1850,1851],{"class":490}," placeholder",[476,1853,523],{"class":486},[476,1855,1856],{"class":490}," selection",[476,1858,523],{"class":486},[476,1860,1861],{"class":490}," firstLetter",[476,1863,523],{"class":486},[476,1865,1866],{"class":490}," firstLine",[476,1868,523],{"class":486},[476,1870,1871],{"class":490}," marker",[476,1873,523],{"class":486},[476,1875,1876],{"class":490}," backdrop",[476,1878,523],{"class":486},[476,1880,1881],{"class":490}," file",[476,1883,704],{"class":486},[476,1885,1886],{"class":478,"line":670},[476,1887,1888],{"class":577},"    // Media & Preferences\n",[476,1890,1891,1894,1896,1899,1901,1904,1906,1909,1911,1914,1916,1919,1921,1924,1926,1929,1931,1934],{"class":478,"line":675},[476,1892,1893],{"class":490},"    dark",[476,1895,523],{"class":486},[476,1897,1898],{"class":490}," motionSafe",[476,1900,523],{"class":486},[476,1902,1903],{"class":490}," motionReduce",[476,1905,523],{"class":486},[476,1907,1908],{"class":490}," contrastMore",[476,1910,523],{"class":486},[476,1912,1913],{"class":490}," contrastLess",[476,1915,523],{"class":486},[476,1917,1918],{"class":490}," portrait",[476,1920,523],{"class":486},[476,1922,1923],{"class":490}," landscape",[476,1925,523],{"class":486},[476,1927,1928],{"class":490}," print",[476,1930,523],{"class":486},[476,1932,1933],{"class":490}," forcedColors",[476,1935,704],{"class":486},[476,1937,1938],{"class":478,"line":687},[476,1939,1940],{"class":577},"    // ARIA State\n",[476,1942,1943,1946,1948,1951,1953,1956,1958,1961,1963,1966,1968,1971,1973,1976],{"class":478,"line":707},[476,1944,1945],{"class":490},"    ariaBusy",[476,1947,523],{"class":486},[476,1949,1950],{"class":490}," ariaChecked",[476,1952,523],{"class":486},[476,1954,1955],{"class":490}," ariaDisabled",[476,1957,523],{"class":486},[476,1959,1960],{"class":490}," ariaExpanded",[476,1962,523],{"class":486},[476,1964,1965],{"class":490}," ariaHidden",[476,1967,523],{"class":486},[476,1969,1970],{"class":490}," ariaPressed",[476,1972,523],{"class":486},[476,1974,1975],{"class":490}," ariaReadonly",[476,1977,704],{"class":486},[476,1979,1980,1983,1985,1988],{"class":478,"line":724},[476,1981,1982],{"class":490},"    ariaRequired",[476,1984,523],{"class":486},[476,1986,1987],{"class":490}," ariaSelected",[476,1989,704],{"class":486},[476,1991,1992],{"class":478,"line":744},[476,1993,1994],{"class":577},"    // Directional\n",[476,1996,1997,2000,2002,2005],{"class":478,"line":749},[476,1998,1999],{"class":490},"    rtl",[476,2001,523],{"class":486},[476,2003,2004],{"class":490}," ltr",[476,2006,704],{"class":486},[476,2008,2009],{"class":478,"line":759},[476,2010,2011],{"class":577},"    // Other State\n",[476,2013,2014,2017,2019,2022],{"class":478,"line":777},[476,2015,2016],{"class":490},"    open",[476,2018,523],{"class":486},[476,2020,2021],{"class":490}," inert",[476,2023,704],{"class":486},[476,2025,2026,2028,2030,2032,2034],{"class":478,"line":794},[476,2027,621],{"class":486},[476,2029,624],{"class":486},[476,2031,520],{"class":561},[476,2033,629],{"class":490},[476,2035,510],{"class":486},[414,2037,2039],{"id":2038},"selective-registration","Selective Registration",[418,2041,2042],{},"Disable specific categories you don't need:",[466,2044,2046],{"className":468,"code":2045,"language":471,"meta":472,"style":472},"import { styleframe } from 'styleframe';\nimport { useModifiersPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst modifiers = useModifiersPreset(s, {\n    pseudoStates: true,        // Keep hover, focus, active, etc.\n    formStates: true,          // Keep disabled, checked, valid, etc.\n    mediaPreferences: true,    // Keep dark, motionReduce, etc.\n    structural: false,         // Skip first, last, odd, even\n    pseudoElements: false,     // Skip before, after, placeholder\n    ariaStates: false,         // Skip ARIA modifiers\n    directional: false,        // Skip rtl, ltr\n    otherStates: false,        // Skip open, inert\n});\n\nexport default s;\n",[422,2047,2048,2068,2088,2092,2106,2110,2128,2144,2158,2172,2187,2201,2215,2229,2243,2251,2255],{"__ignoreMap":472},[476,2049,2050,2052,2054,2056,2058,2060,2062,2064,2066],{"class":478,"line":479},[476,2051,483],{"class":482},[476,2053,487],{"class":486},[476,2055,491],{"class":490},[476,2057,494],{"class":486},[476,2059,497],{"class":482},[476,2061,500],{"class":486},[476,2063,504],{"class":503},[476,2065,507],{"class":486},[476,2067,510],{"class":486},[476,2069,2070,2072,2074,2076,2078,2080,2082,2084,2086],{"class":478,"line":513},[476,2071,483],{"class":482},[476,2073,487],{"class":486},[476,2075,520],{"class":490},[476,2077,494],{"class":486},[476,2079,497],{"class":482},[476,2081,500],{"class":486},[476,2083,535],{"class":503},[476,2085,507],{"class":486},[476,2087,510],{"class":486},[476,2089,2090],{"class":478,"line":542},[476,2091,545],{"emptyLinePlaceholder":206},[476,2093,2094,2096,2098,2100,2102,2104],{"class":478,"line":548},[476,2095,552],{"class":551},[476,2097,555],{"class":490},[476,2099,558],{"class":486},[476,2101,491],{"class":561},[476,2103,564],{"class":490},[476,2105,510],{"class":486},[476,2107,2108],{"class":478,"line":569},[476,2109,545],{"emptyLinePlaceholder":206},[476,2111,2112,2114,2117,2119,2121,2124,2126],{"class":478,"line":574},[476,2113,552],{"class":551},[476,2115,2116],{"class":490}," modifiers ",[476,2118,558],{"class":486},[476,2120,520],{"class":561},[476,2122,2123],{"class":490},"(s",[476,2125,523],{"class":486},[476,2127,1095],{"class":486},[476,2129,2130,2133,2135,2139,2141],{"class":478,"line":581},[476,2131,2132],{"class":690},"    pseudoStates",[476,2134,694],{"class":486},[476,2136,2138],{"class":2137},"sfNiH"," true",[476,2140,523],{"class":486},[476,2142,2143],{"class":577},"        // Keep hover, focus, active, etc.\n",[476,2145,2146,2149,2151,2153,2155],{"class":478,"line":634},[476,2147,2148],{"class":690},"    formStates",[476,2150,694],{"class":486},[476,2152,2138],{"class":2137},[476,2154,523],{"class":486},[476,2156,2157],{"class":577},"          // Keep disabled, checked, valid, etc.\n",[476,2159,2160,2163,2165,2167,2169],{"class":478,"line":639},[476,2161,2162],{"class":690},"    mediaPreferences",[476,2164,694],{"class":486},[476,2166,2138],{"class":2137},[476,2168,523],{"class":486},[476,2170,2171],{"class":577},"    // Keep dark, motionReduce, etc.\n",[476,2173,2174,2177,2179,2182,2184],{"class":478,"line":645},[476,2175,2176],{"class":690},"    structural",[476,2178,694],{"class":486},[476,2180,2181],{"class":2137}," false",[476,2183,523],{"class":486},[476,2185,2186],{"class":577},"         // Skip first, last, odd, even\n",[476,2188,2189,2192,2194,2196,2198],{"class":478,"line":670},[476,2190,2191],{"class":690},"    pseudoElements",[476,2193,694],{"class":486},[476,2195,2181],{"class":2137},[476,2197,523],{"class":486},[476,2199,2200],{"class":577},"     // Skip before, after, placeholder\n",[476,2202,2203,2206,2208,2210,2212],{"class":478,"line":675},[476,2204,2205],{"class":690},"    ariaStates",[476,2207,694],{"class":486},[476,2209,2181],{"class":2137},[476,2211,523],{"class":486},[476,2213,2214],{"class":577},"         // Skip ARIA modifiers\n",[476,2216,2217,2220,2222,2224,2226],{"class":478,"line":687},[476,2218,2219],{"class":690},"    directional",[476,2221,694],{"class":486},[476,2223,2181],{"class":2137},[476,2225,523],{"class":486},[476,2227,2228],{"class":577},"        // Skip rtl, ltr\n",[476,2230,2231,2234,2236,2238,2240],{"class":478,"line":707},[476,2232,2233],{"class":690},"    otherStates",[476,2235,694],{"class":486},[476,2237,2181],{"class":2137},[476,2239,523],{"class":486},[476,2241,2242],{"class":577},"        // Skip open, inert\n",[476,2244,2245,2247,2249],{"class":478,"line":724},[476,2246,621],{"class":486},[476,2248,1092],{"class":490},[476,2250,510],{"class":486},[476,2252,2253],{"class":478,"line":744},[476,2254,545],{"emptyLinePlaceholder":206},[476,2256,2257,2259,2261,2263],{"class":478,"line":749},[476,2258,829],{"class":482},[476,2260,832],{"class":482},[476,2262,835],{"class":490},[476,2264,510],{"class":486},[414,2266,2268],{"id":2267},"pre-generating-modifier-variants","Pre-generating Modifier Variants",[418,2270,2271,2272,2275],{},"When using the Styleframe Vite plugin, the ",[437,2273,2274],{},"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:",[466,2277,2279],{"className":468,"code":2278,"language":471,"meta":472,"style":472},"import { styleframe } from 'styleframe';\nimport { useUtilitiesPreset, useModifiersPreset, useColorDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Register modifiers and get instances\nconst { hover, focus, dark } = useModifiersPreset(s);\n\n// Register utilities and get creators\nconst { createBackgroundColorUtility, createTextColorUtility } = useUtilitiesPreset(s);\n\n// Create color tokens\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    secondary: '#6c757d',\n} as const);\n\n// 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",[422,2280,2281,2301,2330,2334,2348,2352,2357,2384,2388,2393,2416,2420,2425,2451,2465,2479,2493,2497,2502,2510,2528,2545,2561,2565,2574,2590,2607,2616,2621],{"__ignoreMap":472},[476,2282,2283,2285,2287,2289,2291,2293,2295,2297,2299],{"class":478,"line":479},[476,2284,483],{"class":482},[476,2286,487],{"class":486},[476,2288,491],{"class":490},[476,2290,494],{"class":486},[476,2292,497],{"class":482},[476,2294,500],{"class":486},[476,2296,504],{"class":503},[476,2298,507],{"class":486},[476,2300,510],{"class":486},[476,2302,2303,2305,2307,2309,2311,2313,2315,2318,2320,2322,2324,2326,2328],{"class":478,"line":513},[476,2304,483],{"class":482},[476,2306,487],{"class":486},[476,2308,526],{"class":490},[476,2310,523],{"class":486},[476,2312,520],{"class":490},[476,2314,523],{"class":486},[476,2316,2317],{"class":490}," useColorDesignTokens",[476,2319,494],{"class":486},[476,2321,497],{"class":482},[476,2323,500],{"class":486},[476,2325,535],{"class":503},[476,2327,507],{"class":486},[476,2329,510],{"class":486},[476,2331,2332],{"class":478,"line":542},[476,2333,545],{"emptyLinePlaceholder":206},[476,2335,2336,2338,2340,2342,2344,2346],{"class":478,"line":548},[476,2337,552],{"class":551},[476,2339,555],{"class":490},[476,2341,558],{"class":486},[476,2343,491],{"class":561},[476,2345,564],{"class":490},[476,2347,510],{"class":486},[476,2349,2350],{"class":478,"line":569},[476,2351,545],{"emptyLinePlaceholder":206},[476,2353,2354],{"class":478,"line":574},[476,2355,2356],{"class":577},"// Register modifiers and get instances\n",[476,2358,2359,2361,2363,2365,2367,2369,2371,2374,2376,2378,2380,2382],{"class":478,"line":581},[476,2360,552],{"class":551},[476,2362,487],{"class":486},[476,2364,588],{"class":490},[476,2366,523],{"class":486},[476,2368,593],{"class":490},[476,2370,523],{"class":486},[476,2372,2373],{"class":490}," dark ",[476,2375,621],{"class":486},[476,2377,624],{"class":486},[476,2379,520],{"class":561},[476,2381,629],{"class":490},[476,2383,510],{"class":486},[476,2385,2386],{"class":478,"line":634},[476,2387,545],{"emptyLinePlaceholder":206},[476,2389,2390],{"class":478,"line":639},[476,2391,2392],{"class":577},"// Register utilities and get creators\n",[476,2394,2395,2397,2399,2401,2403,2406,2408,2410,2412,2414],{"class":478,"line":645},[476,2396,552],{"class":551},[476,2398,487],{"class":486},[476,2400,652],{"class":490},[476,2402,523],{"class":486},[476,2404,2405],{"class":490}," createTextColorUtility ",[476,2407,621],{"class":486},[476,2409,624],{"class":486},[476,2411,526],{"class":561},[476,2413,629],{"class":490},[476,2415,510],{"class":486},[476,2417,2418],{"class":478,"line":670},[476,2419,545],{"emptyLinePlaceholder":206},[476,2421,2422],{"class":478,"line":675},[476,2423,2424],{"class":577},"// Create color tokens\n",[476,2426,2427,2429,2431,2434,2436,2439,2441,2443,2445,2447,2449],{"class":478,"line":687},[476,2428,552],{"class":551},[476,2430,487],{"class":486},[476,2432,2433],{"class":490}," colorPrimary",[476,2435,523],{"class":486},[476,2437,2438],{"class":490}," colorSecondary ",[476,2440,621],{"class":486},[476,2442,624],{"class":486},[476,2444,2317],{"class":561},[476,2446,2123],{"class":490},[476,2448,523],{"class":486},[476,2450,1095],{"class":486},[476,2452,2453,2455,2457,2459,2461,2463],{"class":478,"line":707},[476,2454,691],{"class":690},[476,2456,694],{"class":486},[476,2458,500],{"class":486},[476,2460,699],{"class":503},[476,2462,507],{"class":486},[476,2464,704],{"class":486},[476,2466,2467,2469,2471,2473,2475,2477],{"class":478,"line":724},[476,2468,710],{"class":690},[476,2470,694],{"class":486},[476,2472,500],{"class":486},[476,2474,717],{"class":503},[476,2476,507],{"class":486},[476,2478,704],{"class":486},[476,2480,2481,2483,2486,2489,2491],{"class":478,"line":744},[476,2482,621],{"class":486},[476,2484,2485],{"class":482}," as",[476,2487,2488],{"class":551}," const",[476,2490,1092],{"class":490},[476,2492,510],{"class":486},[476,2494,2495],{"class":478,"line":749},[476,2496,545],{"emptyLinePlaceholder":206},[476,2498,2499],{"class":478,"line":759},[476,2500,2501],{"class":577},"// Pre-generate modifier variants for specific values\n",[476,2503,2504,2506,2508],{"class":478,"line":777},[476,2505,678],{"class":561},[476,2507,681],{"class":490},[476,2509,684],{"class":486},[476,2511,2512,2514,2516,2518,2520,2523,2526],{"class":478,"line":794},[476,2513,691],{"class":690},[476,2515,694],{"class":486},[476,2517,835],{"class":490},[476,2519,858],{"class":486},[476,2521,2522],{"class":561},"ref",[476,2524,2525],{"class":490},"(colorPrimary)",[476,2527,704],{"class":486},[476,2529,2530,2532,2534,2536,2538,2540,2543],{"class":478,"line":811},[476,2531,710],{"class":690},[476,2533,694],{"class":486},[476,2535,835],{"class":490},[476,2537,858],{"class":486},[476,2539,2522],{"class":561},[476,2541,2542],{"class":490},"(colorSecondary)",[476,2544,704],{"class":486},[476,2546,2547,2549,2551,2553,2555,2557,2559],{"class":478,"line":821},[476,2548,727],{"class":486},[476,2550,730],{"class":490},[476,2552,523],{"class":486},[476,2554,593],{"class":490},[476,2556,523],{"class":486},[476,2558,739],{"class":490},[476,2560,510],{"class":486},[476,2562,2563],{"class":478,"line":826},[476,2564,545],{"emptyLinePlaceholder":206},[476,2566,2567,2570,2572],{"class":478,"line":1274},[476,2568,2569],{"class":561},"createTextColorUtility",[476,2571,681],{"class":490},[476,2573,684],{"class":486},[476,2575,2576,2578,2580,2582,2584,2586,2588],{"class":478,"line":1305},[476,2577,691],{"class":690},[476,2579,694],{"class":486},[476,2581,835],{"class":490},[476,2583,858],{"class":486},[476,2585,2522],{"class":561},[476,2587,2525],{"class":490},[476,2589,704],{"class":486},[476,2591,2593,2595,2597,2599,2601,2603,2605],{"class":478,"line":2592},26,[476,2594,710],{"class":690},[476,2596,694],{"class":486},[476,2598,835],{"class":490},[476,2600,858],{"class":486},[476,2602,2522],{"class":561},[476,2604,2542],{"class":490},[476,2606,704],{"class":486},[476,2608,2610,2612,2614],{"class":478,"line":2609},27,[476,2611,727],{"class":486},[476,2613,816],{"class":490},[476,2615,510],{"class":486},[476,2617,2619],{"class":478,"line":2618},28,[476,2620,545],{"emptyLinePlaceholder":206},[476,2622,2624,2626,2628,2630],{"class":478,"line":2623},29,[476,2625,829],{"class":482},[476,2627,832],{"class":482},[476,2629,835],{"class":490},[476,2631,510],{"class":486},[418,2633,2634,2635,1464,2638,1464,2641,2644,2645,858],{},"This generates classes like ",[422,2636,2637],{},"_background-color:primary",[422,2639,2640],{},"_hover:background-color:primary",[422,2642,2643],{},"_focus:background-color:primary",", and ",[422,2646,2647],{},"_dark:background-color:primary",[414,2649,2651],{"id":2650},"available-modifier-groups","Available Modifier Groups",[1417,2653,2654,2666],{},[1420,2655,2656],{},[1423,2657,2658,2661,2663],{},[1426,2659,2660],{},"Group Function",[1426,2662,363],{},[1426,2664,2665],{},"Purpose",[1439,2667,2668,2698,2740,2776,2813,2848,2884,2900],{},[1423,2669,2670,2675,2695],{},[1444,2671,2672],{},[422,2673,2674],{},"usePseudoStateModifiers(s)",[1444,2676,2677,1464,2679,1464,2681,1464,2684,1464,2687,1464,2689,1464,2692],{},[422,2678,944],{},[422,2680,1019],{},[422,2682,2683],{},"focusWithin",[422,2685,2686],{},"focusVisible",[422,2688,1469],{},[422,2690,2691],{},"visited",[422,2693,2694],{},"target",[1444,2696,2697],{},"Interactive states",[1423,2699,2700,2705,2737],{},[1444,2701,2702],{},[422,2703,2704],{},"useFormStateModifiers(s)",[1444,2706,2707,1464,2709,1464,2712,1464,2714,1464,2717,1464,2720,1464,2723,1464,2725,1464,2728,1464,2731,1464,2734],{},[422,2708,1491],{},[422,2710,2711],{},"enabled",[422,2713,1494],{},[422,2715,2716],{},"indeterminate",[422,2718,2719],{},"required",[422,2721,2722],{},"optional",[422,2724,1497],{},[422,2726,2727],{},"invalid",[422,2729,2730],{},"placeholderShown",[422,2732,2733],{},"autofill",[422,2735,2736],{},"readOnly",[1444,2738,2739],{},"Form element states",[1423,2741,2742,2747,2773],{},[1444,2743,2744],{},[422,2745,2746],{},"usePseudoElementModifiers(s)",[1444,2748,2749,1464,2751,1464,2753,1464,2755,1464,2758,1464,2761,1464,2764,1464,2767,1464,2770],{},[422,2750,1548],{},[422,2752,1551],{},[422,2754,1554],{},[422,2756,2757],{},"selection",[422,2759,2760],{},"firstLetter",[422,2762,2763],{},"firstLine",[422,2765,2766],{},"marker",[422,2768,2769],{},"backdrop",[422,2771,2772],{},"file",[1444,2774,2775],{},"Element sub-parts",[1423,2777,2778,2783,2810],{},[1444,2779,2780],{},[422,2781,2782],{},"useAriaStateModifiers(s)",[1444,2784,2785,1464,2788,1464,2791,1464,2793,1464,2795,1464,2798,1464,2801,1464,2804,1464,2807],{},[422,2786,2787],{},"ariaBusy",[422,2789,2790],{},"ariaChecked",[422,2792,1605],{},[422,2794,1602],{},[422,2796,2797],{},"ariaHidden",[422,2799,2800],{},"ariaPressed",[422,2802,2803],{},"ariaReadonly",[422,2805,2806],{},"ariaRequired",[422,2808,2809],{},"ariaSelected",[1444,2811,2812],{},"ARIA attribute states",[1423,2814,2815,2820,2845],{},[1444,2816,2817],{},[422,2818,2819],{},"useStructuralModifiers(s)",[1444,2821,2822,1464,2824,1464,2826,1464,2829,1464,2831,1464,2833,1464,2836,1464,2839,1464,2842],{},[422,2823,1518],{},[422,2825,1521],{},[422,2827,2828],{},"only",[422,2830,1524],{},[422,2832,1527],{},[422,2834,2835],{},"firstOfType",[422,2837,2838],{},"lastOfType",[422,2840,2841],{},"onlyOfType",[422,2843,2844],{},"empty",[1444,2846,2847],{},"DOM position",[1423,2849,2850,2855,2881],{},[1444,2851,2852],{},[422,2853,2854],{},"useMediaPreferenceModifiers(s)",[1444,2856,2857,1464,2859,1464,2861,1464,2864,1464,2867,1464,2870,1464,2873,1464,2876,1464,2878],{},[422,2858,1575],{},[422,2860,1578],{},[422,2862,2863],{},"motionReduce",[422,2865,2866],{},"contrastMore",[422,2868,2869],{},"contrastLess",[422,2871,2872],{},"portrait",[422,2874,2875],{},"landscape",[422,2877,1581],{},[422,2879,2880],{},"forcedColors",[1444,2882,2883],{},"User preferences",[1423,2885,2886,2891,2897],{},[1444,2887,2888],{},[422,2889,2890],{},"useDirectionalModifiers(s)",[1444,2892,2893,1464,2895],{},[422,2894,1626],{},[422,2896,1629],{},[1444,2898,2899],{},"Text direction",[1423,2901,2902,2907,2913],{},[1444,2903,2904],{},[422,2905,2906],{},"useOtherStateModifiers(s)",[1444,2908,2909,1464,2911],{},[422,2910,1650],{},[422,2912,1653],{},[1444,2914,2915],{},"Miscellaneous states",[414,2917,2919],{"id":2918},"faq","FAQ",[2921,2922,2923,2941,2945,3077,3088],"accordion",{},[2924,2925,2928,2929,2932,2933,2936,2937,2940],"accordion-item",{"icon":2926,"label":2927},"i-lucide-circle-help","What's the difference between useModifiersPreset and individual modifier composables?","Individual modifier composables (like ",[422,2930,2931],{},"useHoverModifier",") register a single modifier, while group composables (like ",[422,2934,2935],{},"usePseudoStateModifiers",") register all modifiers in a category. ",[422,2938,2939],{},"useModifiersPreset()"," registers all 8 categories at once, making it the most convenient option when you need comprehensive modifier coverage.",[2924,2942,2944],{"icon":2926,"label":2943},"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.",[2924,2946,2948,2951],{"icon":2926,"label":2947},"Can I use both the preset and individual composables?",[418,2949,2950],{},"Yes! You can use the preset for most modifiers and add individual ones separately:",[466,2952,2954],{"className":468,"code":2953,"language":471,"meta":472,"style":472},"const { hover, focus } = useModifiersPreset(s, {\n    pseudoStates: true,\n    formStates: false, // Skip form states in preset\n});\n\n// Register only specific form state modifiers\nimport { useDisabledModifier, useCheckedModifier } from '@styleframe/theme';\nconst disabled = useDisabledModifier(s);\nconst checked = useCheckedModifier(s);\n",[422,2955,2956,2981,2991,3004,3012,3016,3021,3047,3062],{"__ignoreMap":472},[476,2957,2958,2960,2962,2964,2966,2969,2971,2973,2975,2977,2979],{"class":478,"line":479},[476,2959,552],{"class":551},[476,2961,487],{"class":486},[476,2963,588],{"class":490},[476,2965,523],{"class":486},[476,2967,2968],{"class":490}," focus ",[476,2970,621],{"class":486},[476,2972,624],{"class":486},[476,2974,520],{"class":561},[476,2976,2123],{"class":490},[476,2978,523],{"class":486},[476,2980,1095],{"class":486},[476,2982,2983,2985,2987,2989],{"class":478,"line":513},[476,2984,2132],{"class":690},[476,2986,694],{"class":486},[476,2988,2138],{"class":2137},[476,2990,704],{"class":486},[476,2992,2993,2995,2997,2999,3001],{"class":478,"line":542},[476,2994,2148],{"class":690},[476,2996,694],{"class":486},[476,2998,2181],{"class":2137},[476,3000,523],{"class":486},[476,3002,3003],{"class":577}," // Skip form states in preset\n",[476,3005,3006,3008,3010],{"class":478,"line":548},[476,3007,621],{"class":486},[476,3009,1092],{"class":490},[476,3011,510],{"class":486},[476,3013,3014],{"class":478,"line":569},[476,3015,545],{"emptyLinePlaceholder":206},[476,3017,3018],{"class":478,"line":574},[476,3019,3020],{"class":577},"// Register only specific form state modifiers\n",[476,3022,3023,3025,3027,3030,3032,3035,3037,3039,3041,3043,3045],{"class":478,"line":581},[476,3024,483],{"class":482},[476,3026,487],{"class":486},[476,3028,3029],{"class":490}," useDisabledModifier",[476,3031,523],{"class":486},[476,3033,3034],{"class":490}," useCheckedModifier",[476,3036,494],{"class":486},[476,3038,497],{"class":482},[476,3040,500],{"class":486},[476,3042,535],{"class":503},[476,3044,507],{"class":486},[476,3046,510],{"class":486},[476,3048,3049,3051,3054,3056,3058,3060],{"class":478,"line":634},[476,3050,552],{"class":551},[476,3052,3053],{"class":490}," disabled ",[476,3055,558],{"class":486},[476,3057,3029],{"class":561},[476,3059,629],{"class":490},[476,3061,510],{"class":486},[476,3063,3064,3066,3069,3071,3073,3075],{"class":478,"line":639},[476,3065,552],{"class":551},[476,3067,3068],{"class":490}," checked ",[476,3070,558],{"class":486},[476,3072,3034],{"class":561},[476,3074,629],{"class":490},[476,3076,510],{"class":486},[2924,3078,3080,3081,3084,3085,3087],{"icon":2926,"label":3079},"Do I need useModifiersPreset if I'm using useUtilitiesPreset?","Yes—",[422,3082,3083],{},"useUtilitiesPreset()"," only registers utility factories. Call ",[422,3086,2939],{}," separately to register modifier factories. Both are needed for full coverage when using the scanner.",[2924,3089,3091,3094],{"icon":2926,"label":3090},"How do I pass modifiers to utility creators?",[418,3092,3093],{},"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:",[466,3095,3097],{"className":468,"code":3096,"language":471,"meta":472,"style":472},"const { hover, focus, dark } = useModifiersPreset(s);\nconst { createOpacityUtility } = useUtilitiesPreset(s);\n\n// Individual modifiers only\ncreateOpacityUtility({ 0: '0', 50: '0.5', 100: '1' }, [hover, focus, dark]);\n// Generates: _opacity:50, _hover:opacity:50, _focus:opacity:50, _dark:opacity:50\n\n// With combined modifiers using nested arrays\ncreateOpacityUtility({ 0: '0', 50: '0.5', 100: '1' }, [hover, dark, [dark, hover]]);\n// Generates: _opacity:50, _hover:opacity:50, _dark:opacity:50, _dark:hover:opacity:50\n",[422,3098,3099,3125,3143,3147,3152,3212,3217,3221,3226,3288],{"__ignoreMap":472},[476,3100,3101,3103,3105,3107,3109,3111,3113,3115,3117,3119,3121,3123],{"class":478,"line":479},[476,3102,552],{"class":551},[476,3104,487],{"class":486},[476,3106,588],{"class":490},[476,3108,523],{"class":486},[476,3110,593],{"class":490},[476,3112,523],{"class":486},[476,3114,2373],{"class":490},[476,3116,621],{"class":486},[476,3118,624],{"class":486},[476,3120,520],{"class":561},[476,3122,629],{"class":490},[476,3124,510],{"class":486},[476,3126,3127,3129,3131,3133,3135,3137,3139,3141],{"class":478,"line":513},[476,3128,552],{"class":551},[476,3130,487],{"class":486},[476,3132,657],{"class":490},[476,3134,621],{"class":486},[476,3136,624],{"class":486},[476,3138,526],{"class":561},[476,3140,629],{"class":490},[476,3142,510],{"class":486},[476,3144,3145],{"class":478,"line":542},[476,3146,545],{"emptyLinePlaceholder":206},[476,3148,3149],{"class":478,"line":548},[476,3150,3151],{"class":577},"// Individual modifiers only\n",[476,3153,3154,3156,3158,3161,3163,3165,3167,3169,3171,3173,3176,3178,3180,3182,3184,3186,3189,3191,3193,3195,3197,3200,3202,3204,3206,3208,3210],{"class":478,"line":569},[476,3155,752],{"class":561},[476,3157,681],{"class":490},[476,3159,3160],{"class":486},"{",[476,3162,1188],{"class":762},[476,3164,694],{"class":486},[476,3166,500],{"class":486},[476,3168,770],{"class":503},[476,3170,507],{"class":486},[476,3172,523],{"class":486},[476,3174,3175],{"class":762}," 50",[476,3177,694],{"class":486},[476,3179,500],{"class":486},[476,3181,787],{"class":503},[476,3183,507],{"class":486},[476,3185,523],{"class":486},[476,3187,3188],{"class":762}," 100",[476,3190,694],{"class":486},[476,3192,500],{"class":486},[476,3194,804],{"class":503},[476,3196,507],{"class":486},[476,3198,3199],{"class":486}," },",[476,3201,730],{"class":490},[476,3203,523],{"class":486},[476,3205,593],{"class":490},[476,3207,523],{"class":486},[476,3209,739],{"class":490},[476,3211,510],{"class":486},[476,3213,3214],{"class":478,"line":574},[476,3215,3216],{"class":577},"// Generates: _opacity:50, _hover:opacity:50, _focus:opacity:50, _dark:opacity:50\n",[476,3218,3219],{"class":478,"line":581},[476,3220,545],{"emptyLinePlaceholder":206},[476,3222,3223],{"class":478,"line":634},[476,3224,3225],{"class":577},"// With combined modifiers using nested arrays\n",[476,3227,3228,3230,3232,3234,3236,3238,3240,3242,3244,3246,3248,3250,3252,3254,3256,3258,3260,3262,3264,3266,3268,3270,3272,3274,3276,3278,3281,3283,3286],{"class":478,"line":639},[476,3229,752],{"class":561},[476,3231,681],{"class":490},[476,3233,3160],{"class":486},[476,3235,1188],{"class":762},[476,3237,694],{"class":486},[476,3239,500],{"class":486},[476,3241,770],{"class":503},[476,3243,507],{"class":486},[476,3245,523],{"class":486},[476,3247,3175],{"class":762},[476,3249,694],{"class":486},[476,3251,500],{"class":486},[476,3253,787],{"class":503},[476,3255,507],{"class":486},[476,3257,523],{"class":486},[476,3259,3188],{"class":762},[476,3261,694],{"class":486},[476,3263,500],{"class":486},[476,3265,804],{"class":503},[476,3267,507],{"class":486},[476,3269,3199],{"class":486},[476,3271,730],{"class":490},[476,3273,523],{"class":486},[476,3275,603],{"class":490},[476,3277,523],{"class":486},[476,3279,3280],{"class":490}," [dark",[476,3282,523],{"class":486},[476,3284,3285],{"class":490}," hover]])",[476,3287,510],{"class":486},[476,3289,3290],{"class":478,"line":645},[476,3291,3292],{"class":577},"// Generates: _opacity:50, _hover:opacity:50, _dark:opacity:50, _dark:hover:opacity:50\n",[3294,3295,3296],"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":472,"searchDepth":513,"depth":513,"links":3298},[3299,3300,3301,3302,3307,3308,3309,3310],{"id":416,"depth":513,"text":64},{"id":428,"depth":513,"text":429},{"id":455,"depth":513,"text":456},{"id":1336,"depth":513,"text":424,"children":3303},[3304,3305,3306],{"id":1345,"depth":542,"text":1346},{"id":1396,"depth":542,"text":1397},{"id":1656,"depth":542,"text":1657},{"id":2038,"depth":513,"text":2039},{"id":2267,"depth":513,"text":2268},{"id":2650,"depth":513,"text":2651},{"id":2918,"depth":513,"text":2919},"Quickly register all modifier composables with the useModifiersPreset function for comprehensive modifier coverage in a single call.","md",null,{},{"title":156,"icon":159},{"title":409,"description":3311},{"loc":369},"B9HIxvDCqwm1xbZG0_Gs_WsQhk8FC0Olr__6lqJrz34",[3320,3322],{"title":64,"path":364,"stem":365,"description":3321,"icon":65,"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":376,"path":377,"stem":378,"description":3323,"icon":7,"children":-1},"Create ARIA state modifiers for styling elements based on their ARIA attribute values with full type safety.",1776621135012]