[{"data":1,"prerenderedAt":2302},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers":407,"-docs-theme-modifiers-surround":2297},{"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":2289,"extension":2290,"links":2291,"meta":2292,"navigation":2293,"path":364,"seo":2294,"sitemap":2295,"stem":365,"__hash__":2296},"docs_theme/docs/theme/modifiers/00.index.md","Utility Modifiers Overview",{"type":411,"value":412,"toc":2269},"minimark",[413,417,422,425,464,468,475,629,676,683,688,691,1022,1036,1039,1103,1106,1113,1241,1244,1250,1253,1256,1259,1262,1267,1360,1365,1368,1371,1375,1393,1398,1401,1404,1408,1521,1526,1529,1532,1536,1619,1624,1627,1630,1634,1656,1661,1664,1676,1680,1776,1781,1784,1787,1791,1863,1868,1871,1874,1878,1970,1975,1979,2159,2163,2209,2213,2216,2262,2265],[414,415,416],"p",{},"Utility modifiers are composable functions that wrap utility declarations in conditional selectors, generating state-based, responsive, and structural variants of your utility classes. Pass modifiers as the second parameter to any utility creator to generate conditional utility classes automatically.",[418,419,421],"h2",{"id":420},"why-use-utility-modifier-composables","Why Use Utility Modifier Composables?",[414,423,424],{},"Styleframe's approach to utility modifiers offers several key advantages:",[426,427,428,436,442,452,458],"ul",{},[429,430,431,435],"li",{},[432,433,434],"strong",{},"Type-Safe Generation",": Full TypeScript support with auto-complete for all utility modifier composables",[429,437,438,441],{},[432,439,440],{},"Composable Architecture",": Each utility modifier is a standalone function that can be combined with any utility",[429,443,444,447,448],{},[432,445,446],{},"Consistent Naming",": Generated class names follow predictable patterns like ",[449,450,451],"code",{},"_modifier:property:value",[429,453,454,457],{},[432,455,456],{},"Minimal Code",": Register entire modifier categories with a single composable call",[429,459,460,463],{},[432,461,462],{},"Customizable",": Register only the modifiers you need without bloat",[418,465,467],{"id":466},"quick-start","Quick Start",[414,469,470,471,474],{},"When using the Styleframe Vite plugin, the ",[432,472,473],{},"scanner"," automatically detects modifier-prefixed utility class names in your source files and generates the corresponding CSS. Just register your utility factories and modifiers, then use the classes directly in your templates:",[476,477,483],"pre",{"className":478,"code":479,"filename":480,"language":481,"meta":482,"style":482},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useUtilitiesPreset, useModifiersPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Register all utility factories and modifiers\nuseUtilitiesPreset(s);\nuseModifiersPreset(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[449,484,485,521,550,556,577,582,589,600,610,615],{"__ignoreMap":482},[486,487,490,494,498,502,505,508,511,515,518],"span",{"class":488,"line":489},"line",1,[486,491,493],{"class":492},"s7zQu","import",[486,495,497],{"class":496},"sMK4o"," {",[486,499,501],{"class":500},"sTEyZ"," styleframe",[486,503,504],{"class":496}," }",[486,506,507],{"class":492}," from",[486,509,510],{"class":496}," '",[486,512,514],{"class":513},"sfazB","styleframe",[486,516,517],{"class":496},"'",[486,519,520],{"class":496},";\n",[486,522,524,526,528,531,534,537,539,541,543,546,548],{"class":488,"line":523},2,[486,525,493],{"class":492},[486,527,497],{"class":496},[486,529,530],{"class":500}," useUtilitiesPreset",[486,532,533],{"class":496},",",[486,535,536],{"class":500}," useModifiersPreset",[486,538,504],{"class":496},[486,540,507],{"class":492},[486,542,510],{"class":496},[486,544,545],{"class":513},"@styleframe/theme",[486,547,517],{"class":496},[486,549,520],{"class":496},[486,551,553],{"class":488,"line":552},3,[486,554,555],{"emptyLinePlaceholder":206},"\n",[486,557,559,563,566,569,572,575],{"class":488,"line":558},4,[486,560,562],{"class":561},"spNyl","const",[486,564,565],{"class":500}," s ",[486,567,568],{"class":496},"=",[486,570,501],{"class":571},"s2Zo4",[486,573,574],{"class":500},"()",[486,576,520],{"class":496},[486,578,580],{"class":488,"line":579},5,[486,581,555],{"emptyLinePlaceholder":206},[486,583,585],{"class":488,"line":584},6,[486,586,588],{"class":587},"sHwdD","// Register all utility factories and modifiers\n",[486,590,592,595,598],{"class":488,"line":591},7,[486,593,594],{"class":571},"useUtilitiesPreset",[486,596,597],{"class":500},"(s)",[486,599,520],{"class":496},[486,601,603,606,608],{"class":488,"line":602},8,[486,604,605],{"class":571},"useModifiersPreset",[486,607,597],{"class":500},[486,609,520],{"class":496},[486,611,613],{"class":488,"line":612},9,[486,614,555],{"emptyLinePlaceholder":206},[486,616,618,621,624,627],{"class":488,"line":617},10,[486,619,620],{"class":492},"export",[486,622,623],{"class":492}," default",[486,625,626],{"class":500}," s",[486,628,520],{"class":496},[476,630,635],{"className":631,"code":632,"filename":633,"language":634,"meta":482,"style":482},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"_background-color:blue _hover:background-color:darkblue _focus:outline-color:blue\">\n    Click me\n\u003C/button>\n","component.html","html",[449,636,637,662,667],{"__ignoreMap":482},[486,638,639,642,646,649,651,654,657,659],{"class":488,"line":489},[486,640,641],{"class":496},"\u003C",[486,643,645],{"class":644},"swJcz","button",[486,647,648],{"class":561}," class",[486,650,568],{"class":496},[486,652,653],{"class":496},"\"",[486,655,656],{"class":513},"_background-color:blue _hover:background-color:darkblue _focus:outline-color:blue",[486,658,653],{"class":496},[486,660,661],{"class":496},">\n",[486,663,664],{"class":488,"line":523},[486,665,666],{"class":500},"    Click me\n",[486,668,669,672,674],{"class":488,"line":552},[486,670,671],{"class":496},"\u003C/",[486,673,645],{"class":644},[486,675,661],{"class":496},[414,677,678,679,682],{},"The scanner picks up class names like ",[449,680,681],{},"_hover:background-color:darkblue"," from your source files and auto-generates the CSS — no need to manually pass modifiers to every utility creator.",[684,685,687],"h3",{"id":686},"pre-generating-modifier-variants","Pre-generating Modifier Variants",[414,689,690],{},"If you want to pre-generate specific modifier variants tied to your design tokens, you can optionally do so:",[476,692,694],{"className":478,"code":693,"filename":480,"language":481,"meta":482,"style":482},"import { styleframe } from 'styleframe';\nimport { useColorDesignTokens } from '@styleframe/theme';\nimport { useBackgroundColorUtility } from '@styleframe/theme';\nimport { useHoverModifier, useFocusModifier } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    secondary: '#6c757d',\n} as const);\n\n// Register modifiers\nconst hover = useHoverModifier(s);\nconst focus = useFocusModifier(s);\n\n// Create utilities with modifier variants\nuseBackgroundColorUtility(s, {\n    primary: s.ref(colorPrimary),\n    secondary: s.ref(colorSecondary),\n}, [hover, focus]);\n\nexport default s;\n",[449,695,696,716,737,758,784,788,802,806,836,854,870,886,891,897,913,929,934,940,952,972,990,1006,1011],{"__ignoreMap":482},[486,697,698,700,702,704,706,708,710,712,714],{"class":488,"line":489},[486,699,493],{"class":492},[486,701,497],{"class":496},[486,703,501],{"class":500},[486,705,504],{"class":496},[486,707,507],{"class":492},[486,709,510],{"class":496},[486,711,514],{"class":513},[486,713,517],{"class":496},[486,715,520],{"class":496},[486,717,718,720,722,725,727,729,731,733,735],{"class":488,"line":523},[486,719,493],{"class":492},[486,721,497],{"class":496},[486,723,724],{"class":500}," useColorDesignTokens",[486,726,504],{"class":496},[486,728,507],{"class":492},[486,730,510],{"class":496},[486,732,545],{"class":513},[486,734,517],{"class":496},[486,736,520],{"class":496},[486,738,739,741,743,746,748,750,752,754,756],{"class":488,"line":552},[486,740,493],{"class":492},[486,742,497],{"class":496},[486,744,745],{"class":500}," useBackgroundColorUtility",[486,747,504],{"class":496},[486,749,507],{"class":492},[486,751,510],{"class":496},[486,753,545],{"class":513},[486,755,517],{"class":496},[486,757,520],{"class":496},[486,759,760,762,764,767,769,772,774,776,778,780,782],{"class":488,"line":558},[486,761,493],{"class":492},[486,763,497],{"class":496},[486,765,766],{"class":500}," useHoverModifier",[486,768,533],{"class":496},[486,770,771],{"class":500}," useFocusModifier",[486,773,504],{"class":496},[486,775,507],{"class":492},[486,777,510],{"class":496},[486,779,545],{"class":513},[486,781,517],{"class":496},[486,783,520],{"class":496},[486,785,786],{"class":488,"line":579},[486,787,555],{"emptyLinePlaceholder":206},[486,789,790,792,794,796,798,800],{"class":488,"line":584},[486,791,562],{"class":561},[486,793,565],{"class":500},[486,795,568],{"class":496},[486,797,501],{"class":571},[486,799,574],{"class":500},[486,801,520],{"class":496},[486,803,804],{"class":488,"line":591},[486,805,555],{"emptyLinePlaceholder":206},[486,807,808,810,812,815,817,820,823,826,828,831,833],{"class":488,"line":602},[486,809,562],{"class":561},[486,811,497],{"class":496},[486,813,814],{"class":500}," colorPrimary",[486,816,533],{"class":496},[486,818,819],{"class":500}," colorSecondary ",[486,821,822],{"class":496},"}",[486,824,825],{"class":496}," =",[486,827,724],{"class":571},[486,829,830],{"class":500},"(s",[486,832,533],{"class":496},[486,834,835],{"class":496}," {\n",[486,837,838,841,844,846,849,851],{"class":488,"line":612},[486,839,840],{"class":644},"    primary",[486,842,843],{"class":496},":",[486,845,510],{"class":496},[486,847,848],{"class":513},"#006cff",[486,850,517],{"class":496},[486,852,853],{"class":496},",\n",[486,855,856,859,861,863,866,868],{"class":488,"line":617},[486,857,858],{"class":644},"    secondary",[486,860,843],{"class":496},[486,862,510],{"class":496},[486,864,865],{"class":513},"#6c757d",[486,867,517],{"class":496},[486,869,853],{"class":496},[486,871,873,875,878,881,884],{"class":488,"line":872},11,[486,874,822],{"class":496},[486,876,877],{"class":492}," as",[486,879,880],{"class":561}," const",[486,882,883],{"class":500},")",[486,885,520],{"class":496},[486,887,889],{"class":488,"line":888},12,[486,890,555],{"emptyLinePlaceholder":206},[486,892,894],{"class":488,"line":893},13,[486,895,896],{"class":587},"// Register modifiers\n",[486,898,900,902,905,907,909,911],{"class":488,"line":899},14,[486,901,562],{"class":561},[486,903,904],{"class":500}," hover ",[486,906,568],{"class":496},[486,908,766],{"class":571},[486,910,597],{"class":500},[486,912,520],{"class":496},[486,914,916,918,921,923,925,927],{"class":488,"line":915},15,[486,917,562],{"class":561},[486,919,920],{"class":500}," focus ",[486,922,568],{"class":496},[486,924,771],{"class":571},[486,926,597],{"class":500},[486,928,520],{"class":496},[486,930,932],{"class":488,"line":931},16,[486,933,555],{"emptyLinePlaceholder":206},[486,935,937],{"class":488,"line":936},17,[486,938,939],{"class":587},"// Create utilities with modifier variants\n",[486,941,943,946,948,950],{"class":488,"line":942},18,[486,944,945],{"class":571},"useBackgroundColorUtility",[486,947,830],{"class":500},[486,949,533],{"class":496},[486,951,835],{"class":496},[486,953,955,957,959,961,964,967,970],{"class":488,"line":954},19,[486,956,840],{"class":644},[486,958,843],{"class":496},[486,960,626],{"class":500},[486,962,963],{"class":496},".",[486,965,966],{"class":571},"ref",[486,968,969],{"class":500},"(colorPrimary)",[486,971,853],{"class":496},[486,973,975,977,979,981,983,985,988],{"class":488,"line":974},20,[486,976,858],{"class":644},[486,978,843],{"class":496},[486,980,626],{"class":500},[486,982,963],{"class":496},[486,984,966],{"class":571},[486,986,987],{"class":500},"(colorSecondary)",[486,989,853],{"class":496},[486,991,993,996,999,1001,1004],{"class":488,"line":992},21,[486,994,995],{"class":496},"},",[486,997,998],{"class":500}," [hover",[486,1000,533],{"class":496},[486,1002,1003],{"class":500}," focus])",[486,1005,520],{"class":496},[486,1007,1009],{"class":488,"line":1008},22,[486,1010,555],{"emptyLinePlaceholder":206},[486,1012,1014,1016,1018,1020],{"class":488,"line":1013},23,[486,1015,620],{"class":492},[486,1017,623],{"class":492},[486,1019,626],{"class":500},[486,1021,520],{"class":496},[414,1023,1024,1025,1028,1029,1032,1033,963],{},"This generates classes like ",[449,1026,1027],{},"_background-color:primary",", ",[449,1030,1031],{},"_hover:background-color:primary",", and ",[449,1034,1035],{},"_focus:background-color:primary",[414,1037,1038],{},"Each modifier category also provides a group registration function that registers all modifiers in the category at once:",[476,1040,1042],{"className":478,"code":1041,"language":481,"meta":482,"style":482},"import { usePseudoStateModifiers } from '@styleframe/theme';\n\nconst { hover, focus, focusVisible, active } = usePseudoStateModifiers(s);\n",[449,1043,1044,1065,1069],{"__ignoreMap":482},[486,1045,1046,1048,1050,1053,1055,1057,1059,1061,1063],{"class":488,"line":489},[486,1047,493],{"class":492},[486,1049,497],{"class":496},[486,1051,1052],{"class":500}," usePseudoStateModifiers",[486,1054,504],{"class":496},[486,1056,507],{"class":492},[486,1058,510],{"class":496},[486,1060,545],{"class":513},[486,1062,517],{"class":496},[486,1064,520],{"class":496},[486,1066,1067],{"class":488,"line":523},[486,1068,555],{"emptyLinePlaceholder":206},[486,1070,1071,1073,1075,1078,1080,1083,1085,1088,1090,1093,1095,1097,1099,1101],{"class":488,"line":552},[486,1072,562],{"class":561},[486,1074,497],{"class":496},[486,1076,1077],{"class":500}," hover",[486,1079,533],{"class":496},[486,1081,1082],{"class":500}," focus",[486,1084,533],{"class":496},[486,1086,1087],{"class":500}," focusVisible",[486,1089,533],{"class":496},[486,1091,1092],{"class":500}," active ",[486,1094,822],{"class":496},[486,1096,825],{"class":496},[486,1098,1052],{"class":571},[486,1100,597],{"class":500},[486,1102,520],{"class":496},[418,1104,156],{"id":1105},"presets",[414,1107,1108,1109,1112],{},"The ",[449,1110,1111],{},"useModifiersPreset()"," function registers all modifier categories in a single call:",[476,1114,1116],{"className":478,"code":1115,"filename":480,"language":481,"meta":482,"style":482},"import { styleframe } from 'styleframe';\nimport { useModifiersPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Register all modifiers at once\nconst { hover, focus, dark, disabled, first, last } = useModifiersPreset(s);\n\nexport default s;\n",[449,1117,1118,1138,1158,1162,1176,1180,1185,1227,1231],{"__ignoreMap":482},[486,1119,1120,1122,1124,1126,1128,1130,1132,1134,1136],{"class":488,"line":489},[486,1121,493],{"class":492},[486,1123,497],{"class":496},[486,1125,501],{"class":500},[486,1127,504],{"class":496},[486,1129,507],{"class":492},[486,1131,510],{"class":496},[486,1133,514],{"class":513},[486,1135,517],{"class":496},[486,1137,520],{"class":496},[486,1139,1140,1142,1144,1146,1148,1150,1152,1154,1156],{"class":488,"line":523},[486,1141,493],{"class":492},[486,1143,497],{"class":496},[486,1145,536],{"class":500},[486,1147,504],{"class":496},[486,1149,507],{"class":492},[486,1151,510],{"class":496},[486,1153,545],{"class":513},[486,1155,517],{"class":496},[486,1157,520],{"class":496},[486,1159,1160],{"class":488,"line":552},[486,1161,555],{"emptyLinePlaceholder":206},[486,1163,1164,1166,1168,1170,1172,1174],{"class":488,"line":558},[486,1165,562],{"class":561},[486,1167,565],{"class":500},[486,1169,568],{"class":496},[486,1171,501],{"class":571},[486,1173,574],{"class":500},[486,1175,520],{"class":496},[486,1177,1178],{"class":488,"line":579},[486,1179,555],{"emptyLinePlaceholder":206},[486,1181,1182],{"class":488,"line":584},[486,1183,1184],{"class":587},"// Register all modifiers at once\n",[486,1186,1187,1189,1191,1193,1195,1197,1199,1202,1204,1207,1209,1212,1214,1217,1219,1221,1223,1225],{"class":488,"line":591},[486,1188,562],{"class":561},[486,1190,497],{"class":496},[486,1192,1077],{"class":500},[486,1194,533],{"class":496},[486,1196,1082],{"class":500},[486,1198,533],{"class":496},[486,1200,1201],{"class":500}," dark",[486,1203,533],{"class":496},[486,1205,1206],{"class":500}," disabled",[486,1208,533],{"class":496},[486,1210,1211],{"class":500}," first",[486,1213,533],{"class":496},[486,1215,1216],{"class":500}," last ",[486,1218,822],{"class":496},[486,1220,825],{"class":496},[486,1222,536],{"class":571},[486,1224,597],{"class":500},[486,1226,520],{"class":496},[486,1228,1229],{"class":488,"line":602},[486,1230,555],{"emptyLinePlaceholder":206},[486,1232,1233,1235,1237,1239],{"class":488,"line":612},[486,1234,620],{"class":492},[486,1236,623],{"class":492},[486,1238,626],{"class":500},[486,1240,520],{"class":496},[414,1242,1243],{},"The preset returns a flat object containing all registered modifier instances from every category.",[414,1245,1246],{},[1247,1248,1249],"a",{"href":369},"Learn more about Modifier Presets →",[418,1251,363],{"id":1252},"modifiers",[414,1254,1255],{},"These composables are organized into categories following common CSS selector groupings.",[684,1257,376],{"id":1258},"aria-state",[414,1260,1261],{},"Modifiers for targeting elements by their ARIA attribute values.",[414,1263,1264],{},[432,1265,1266],{},"Available composables:",[426,1268,1269,1280,1290,1300,1310,1320,1330,1340,1350],{},[429,1270,1271,1276,1277],{},[432,1272,1273],{},[449,1274,1275],{},"useAriaBusyModifier()",": Apply styles when ",[449,1278,1279],{},"aria-busy=\"true\"",[429,1281,1282,1276,1287],{},[432,1283,1284],{},[449,1285,1286],{},"useAriaCheckedModifier()",[449,1288,1289],{},"aria-checked=\"true\"",[429,1291,1292,1276,1297],{},[432,1293,1294],{},[449,1295,1296],{},"useAriaDisabledModifier()",[449,1298,1299],{},"aria-disabled=\"true\"",[429,1301,1302,1276,1307],{},[432,1303,1304],{},[449,1305,1306],{},"useAriaExpandedModifier()",[449,1308,1309],{},"aria-expanded=\"true\"",[429,1311,1312,1276,1317],{},[432,1313,1314],{},[449,1315,1316],{},"useAriaHiddenModifier()",[449,1318,1319],{},"aria-hidden=\"true\"",[429,1321,1322,1276,1327],{},[432,1323,1324],{},[449,1325,1326],{},"useAriaPressedModifier()",[449,1328,1329],{},"aria-pressed=\"true\"",[429,1331,1332,1276,1337],{},[432,1333,1334],{},[449,1335,1336],{},"useAriaReadonlyModifier()",[449,1338,1339],{},"aria-readonly=\"true\"",[429,1341,1342,1276,1347],{},[432,1343,1344],{},[449,1345,1346],{},"useAriaRequiredModifier()",[449,1348,1349],{},"aria-required=\"true\"",[429,1351,1352,1276,1357],{},[432,1353,1354],{},[449,1355,1356],{},"useAriaSelectedModifier()",[449,1358,1359],{},"aria-selected=\"true\"",[414,1361,1362],{},[1247,1363,1364],{"href":377},"Learn more about ARIA State Modifiers →",[684,1366,380],{"id":1367},"directional",[414,1369,1370],{},"Modifiers for targeting elements based on text direction (RTL/LTR).",[414,1372,1373],{},[432,1374,1266],{},[426,1376,1377,1385],{},[429,1378,1379,1384],{},[432,1380,1381],{},[449,1382,1383],{},"useRtlModifier()",": Apply styles in right-to-left contexts",[429,1386,1387,1392],{},[432,1388,1389],{},[449,1390,1391],{},"useLtrModifier()",": Apply styles in left-to-right contexts",[414,1394,1395],{},[1247,1396,1397],{"href":381},"Learn more about Directional Modifiers →",[684,1399,384],{"id":1400},"form-state",[414,1402,1403],{},"Modifiers for form element pseudo-class states like disabled, checked, and valid.",[414,1405,1406],{},[432,1407,1266],{},[426,1409,1410,1421,1431,1441,1451,1461,1471,1481,1491,1501,1511],{},[429,1411,1412,1417,1418],{},[432,1413,1414],{},[449,1415,1416],{},"useDisabledModifier()",": Apply styles on ",[449,1419,1420],{},":disabled",[429,1422,1423,1417,1428],{},[432,1424,1425],{},[449,1426,1427],{},"useEnabledModifier()",[449,1429,1430],{},":enabled",[429,1432,1433,1417,1438],{},[432,1434,1435],{},[449,1436,1437],{},"useCheckedModifier()",[449,1439,1440],{},":checked",[429,1442,1443,1417,1448],{},[432,1444,1445],{},[449,1446,1447],{},"useIndeterminateModifier()",[449,1449,1450],{},":indeterminate",[429,1452,1453,1417,1458],{},[432,1454,1455],{},[449,1456,1457],{},"useRequiredModifier()",[449,1459,1460],{},":required",[429,1462,1463,1417,1468],{},[432,1464,1465],{},[449,1466,1467],{},"useOptionalModifier()",[449,1469,1470],{},":optional",[429,1472,1473,1417,1478],{},[432,1474,1475],{},[449,1476,1477],{},"useValidModifier()",[449,1479,1480],{},":valid",[429,1482,1483,1417,1488],{},[432,1484,1485],{},[449,1486,1487],{},"useInvalidModifier()",[449,1489,1490],{},":invalid",[429,1492,1493,1417,1498],{},[432,1494,1495],{},[449,1496,1497],{},"usePlaceholderShownModifier()",[449,1499,1500],{},":placeholder-shown",[429,1502,1503,1417,1508],{},[432,1504,1505],{},[449,1506,1507],{},"useAutofillModifier()",[449,1509,1510],{},":autofill",[429,1512,1513,1417,1518],{},[432,1514,1515],{},[449,1516,1517],{},"useReadOnlyModifier()",[449,1519,1520],{},":read-only",[414,1522,1523],{},[1247,1524,1525],{"href":385},"Learn more about Form State Modifiers →",[684,1527,388],{"id":1528},"media-preferences",[414,1530,1531],{},"Modifiers for targeting user preferences and media conditions like dark mode and reduced motion.",[414,1533,1534],{},[432,1535,1266],{},[426,1537,1538,1549,1557,1567,1577,1587,1595,1603,1611],{},[429,1539,1540,1545,1546],{},[432,1541,1542],{},[449,1543,1544],{},"useDarkModifier()",": Apply styles in ",[449,1547,1548],{},"prefers-color-scheme: dark",[429,1550,1551,1556],{},[432,1552,1553],{},[449,1554,1555],{},"useMotionSafeModifier()",": Apply styles when motion is not reduced",[429,1558,1559,1545,1564],{},[432,1560,1561],{},[449,1562,1563],{},"useMotionReduceModifier()",[449,1565,1566],{},"prefers-reduced-motion: reduce",[429,1568,1569,1545,1574],{},[432,1570,1571],{},[449,1572,1573],{},"useContrastMoreModifier()",[449,1575,1576],{},"prefers-contrast: more",[429,1578,1579,1545,1584],{},[432,1580,1581],{},[449,1582,1583],{},"useContrastLessModifier()",[449,1585,1586],{},"prefers-contrast: less",[429,1588,1589,1594],{},[432,1590,1591],{},[449,1592,1593],{},"usePortraitModifier()",": Apply styles in portrait orientation",[429,1596,1597,1602],{},[432,1598,1599],{},[449,1600,1601],{},"useLandscapeModifier()",": Apply styles in landscape orientation",[429,1604,1605,1610],{},[432,1606,1607],{},[449,1608,1609],{},"usePrintModifier()",": Apply styles for print media",[429,1612,1613,1618],{},[432,1614,1615],{},[449,1616,1617],{},"useForcedColorsModifier()",": Apply styles in forced-colors mode",[414,1620,1621],{},[1247,1622,1623],{"href":389},"Learn more about Media & Preference Modifiers →",[684,1625,392],{"id":1626},"other-state",[414,1628,1629],{},"Modifiers for targeting miscellaneous element states.",[414,1631,1632],{},[432,1633,1266],{},[426,1635,1636,1648],{},[429,1637,1638,1643,1644,1647],{},[432,1639,1640],{},[449,1641,1642],{},"useOpenModifier()",": Apply styles to open ",[449,1645,1646],{},"\u003Cdetails>"," or popover elements",[429,1649,1650,1655],{},[432,1651,1652],{},[449,1653,1654],{},"useInertModifier()",": Apply styles to inert elements and their descendants",[414,1657,1658],{},[1247,1659,1660],{"href":393},"Learn more about Other State Modifiers →",[684,1662,396],{"id":1663},"pseudo-elements",[414,1665,1666,1667,1028,1670,1032,1673,963],{},"Modifiers for targeting element sub-parts like ",[449,1668,1669],{},"::before",[449,1671,1672],{},"::after",[449,1674,1675],{},"::placeholder",[414,1677,1678],{},[432,1679,1266],{},[426,1681,1682,1696,1707,1716,1726,1736,1746,1756,1766],{},[429,1683,1684,1689,1690,1692,1693,883],{},[432,1685,1686],{},[449,1687,1688],{},"useBeforeModifier()",": Apply styles to ",[449,1691,1669],{}," (auto-injects ",[449,1694,1695],{},"content: ''",[429,1697,1698,1689,1703,1692,1705,883],{},[432,1699,1700],{},[449,1701,1702],{},"useAfterModifier()",[449,1704,1672],{},[449,1706,1695],{},[429,1708,1709,1689,1714],{},[432,1710,1711],{},[449,1712,1713],{},"usePlaceholderModifier()",[449,1715,1675],{},[429,1717,1718,1689,1723],{},[432,1719,1720],{},[449,1721,1722],{},"useSelectionModifier()",[449,1724,1725],{},"::selection",[429,1727,1728,1689,1733],{},[432,1729,1730],{},[449,1731,1732],{},"useFirstLetterModifier()",[449,1734,1735],{},"::first-letter",[429,1737,1738,1689,1743],{},[432,1739,1740],{},[449,1741,1742],{},"useFirstLineModifier()",[449,1744,1745],{},"::first-line",[429,1747,1748,1689,1753],{},[432,1749,1750],{},[449,1751,1752],{},"useMarkerModifier()",[449,1754,1755],{},"::marker",[429,1757,1758,1689,1763],{},[432,1759,1760],{},[449,1761,1762],{},"useBackdropModifier()",[449,1764,1765],{},"::backdrop",[429,1767,1768,1689,1773],{},[432,1769,1770],{},[449,1771,1772],{},"useFileModifier()",[449,1774,1775],{},"::file-selector-button",[414,1777,1778],{},[1247,1779,1780],{"href":397},"Learn more about Pseudo-Element Modifiers →",[684,1782,400],{"id":1783},"pseudo-state",[414,1785,1786],{},"Modifiers for interactive pseudo-class states like hover, focus, and active.",[414,1788,1789],{},[432,1790,1266],{},[426,1792,1793,1803,1813,1823,1833,1843,1853],{},[429,1794,1795,1417,1800],{},[432,1796,1797],{},[449,1798,1799],{},"useHoverModifier()",[449,1801,1802],{},":hover",[429,1804,1805,1417,1810],{},[432,1806,1807],{},[449,1808,1809],{},"useFocusModifier()",[449,1811,1812],{},":focus",[429,1814,1815,1417,1820],{},[432,1816,1817],{},[449,1818,1819],{},"useFocusWithinModifier()",[449,1821,1822],{},":focus-within",[429,1824,1825,1417,1830],{},[432,1826,1827],{},[449,1828,1829],{},"useFocusVisibleModifier()",[449,1831,1832],{},":focus-visible",[429,1834,1835,1417,1840],{},[432,1836,1837],{},[449,1838,1839],{},"useActiveModifier()",[449,1841,1842],{},":active",[429,1844,1845,1417,1850],{},[432,1846,1847],{},[449,1848,1849],{},"useVisitedModifier()",[449,1851,1852],{},":visited",[429,1854,1855,1417,1860],{},[432,1856,1857],{},[449,1858,1859],{},"useTargetModifier()",[449,1861,1862],{},":target",[414,1864,1865],{},[1247,1866,1867],{"href":401},"Learn more about Pseudo-State Modifiers →",[684,1869,404],{"id":1870},"structural",[414,1872,1873],{},"Modifiers for targeting elements by their position in the DOM tree.",[414,1875,1876],{},[432,1877,1266],{},[426,1879,1880,1890,1900,1910,1920,1930,1940,1950,1960],{},[429,1881,1882,1689,1887],{},[432,1883,1884],{},[449,1885,1886],{},"useFirstModifier()",[449,1888,1889],{},":first-child",[429,1891,1892,1689,1897],{},[432,1893,1894],{},[449,1895,1896],{},"useLastModifier()",[449,1898,1899],{},":last-child",[429,1901,1902,1689,1907],{},[432,1903,1904],{},[449,1905,1906],{},"useOnlyModifier()",[449,1908,1909],{},":only-child",[429,1911,1912,1689,1917],{},[432,1913,1914],{},[449,1915,1916],{},"useOddModifier()",[449,1918,1919],{},":nth-child(odd)",[429,1921,1922,1689,1927],{},[432,1923,1924],{},[449,1925,1926],{},"useEvenModifier()",[449,1928,1929],{},":nth-child(even)",[429,1931,1932,1689,1937],{},[432,1933,1934],{},[449,1935,1936],{},"useFirstOfTypeModifier()",[449,1938,1939],{},":first-of-type",[429,1941,1942,1689,1947],{},[432,1943,1944],{},[449,1945,1946],{},"useLastOfTypeModifier()",[449,1948,1949],{},":last-of-type",[429,1951,1952,1689,1957],{},[432,1953,1954],{},[449,1955,1956],{},"useOnlyOfTypeModifier()",[449,1958,1959],{},":only-of-type",[429,1961,1962,1689,1967],{},[432,1963,1964],{},[449,1965,1966],{},"useEmptyModifier()",[449,1968,1969],{},":empty",[414,1971,1972],{},[1247,1973,1974],{"href":405},"Learn more about Structural Modifiers →",[418,1976,1978],{"id":1977},"modifier-reference","Modifier Reference",[1980,1981,1982,1998],"table",{},[1983,1984,1985],"thead",{},[1986,1987,1988,1992,1995],"tr",{},[1989,1990,1991],"th",{},"Category",[1989,1993,1994],{},"Key Composables",[1989,1996,1997],{},"Purpose",[1999,2000,2001,2022,2039,2059,2079,2096,2116,2136],"tbody",{},[1986,2002,2003,2008,2019],{},[2004,2005,2006],"td",{},[432,2007,376],{},[2004,2009,2010,1028,2013,1028,2016],{},[449,2011,2012],{},"useAriaExpandedModifier",[449,2014,2015],{},"useAriaDisabledModifier",[449,2017,2018],{},"useAriaSelectedModifier",[2004,2020,2021],{},"ARIA attribute states",[1986,2023,2024,2028,2036],{},[2004,2025,2026],{},[432,2027,380],{},[2004,2029,2030,1028,2033],{},[449,2031,2032],{},"useRtlModifier",[449,2034,2035],{},"useLtrModifier",[2004,2037,2038],{},"Text direction",[1986,2040,2041,2045,2056],{},[2004,2042,2043],{},[432,2044,384],{},[2004,2046,2047,1028,2050,1028,2053],{},[449,2048,2049],{},"useDisabledModifier",[449,2051,2052],{},"useCheckedModifier",[449,2054,2055],{},"useInvalidModifier",[2004,2057,2058],{},"Form element states",[1986,2060,2061,2065,2076],{},[2004,2062,2063],{},[432,2064,388],{},[2004,2066,2067,1028,2070,1028,2073],{},[449,2068,2069],{},"useDarkModifier",[449,2071,2072],{},"useMotionReduceModifier",[449,2074,2075],{},"usePrintModifier",[2004,2077,2078],{},"User preferences",[1986,2080,2081,2085,2093],{},[2004,2082,2083],{},[432,2084,392],{},[2004,2086,2087,1028,2090],{},[449,2088,2089],{},"useOpenModifier",[449,2091,2092],{},"useInertModifier",[2004,2094,2095],{},"Miscellaneous states",[1986,2097,2098,2102,2113],{},[2004,2099,2100],{},[432,2101,396],{},[2004,2103,2104,1028,2107,1028,2110],{},[449,2105,2106],{},"useBeforeModifier",[449,2108,2109],{},"useAfterModifier",[449,2111,2112],{},"usePlaceholderModifier",[2004,2114,2115],{},"Element sub-parts",[1986,2117,2118,2122,2133],{},[2004,2119,2120],{},[432,2121,400],{},[2004,2123,2124,1028,2127,1028,2130],{},[449,2125,2126],{},"useHoverModifier",[449,2128,2129],{},"useFocusModifier",[449,2131,2132],{},"useActiveModifier",[2004,2134,2135],{},"Interactive states",[1986,2137,2138,2142,2156],{},[2004,2139,2140],{},[432,2141,404],{},[2004,2143,2144,1028,2147,1028,2150,1028,2153],{},[449,2145,2146],{},"useFirstModifier",[449,2148,2149],{},"useLastModifier",[449,2151,2152],{},"useOddModifier",[449,2154,2155],{},"useEvenModifier",[2004,2157,2158],{},"DOM position",[418,2160,2162],{"id":2161},"best-practices","Best Practices",[426,2164,2165,2175,2181,2187,2197],{},[429,2166,2167,2170,2171,2174],{},[432,2168,2169],{},"Use group composables",": Register entire categories at once with functions like ",[449,2172,2173],{},"usePseudoStateModifiers(s)"," for convenience",[429,2176,2177,2180],{},[432,2178,2179],{},"Be selective",": Only register the modifiers you actually use to keep your configuration clean",[429,2182,2183,2186],{},[432,2184,2185],{},"Combine with utilities",": Pass modifiers as the second argument to utility creator functions",[429,2188,2189,2192,2193,2196],{},[432,2190,2191],{},"Use the preset",": For comprehensive coverage, use ",[449,2194,2195],{},"useModifiersPreset(s)"," to register all categories at once",[429,2198,2199,2205,2206,2208],{},[432,2200,2201,2202],{},"Use ",[449,2203,2204],{},"as const",": Add ",[449,2207,2204],{}," to value objects for better TypeScript inference",[418,2210,2212],{"id":2211},"next-steps","Next Steps",[414,2214,2215],{},"Ready to start using modifiers? Begin with these common categories:",[426,2217,2218,2227,2236,2245,2254],{},[429,2219,2220,2223,2224,2226],{},[432,2221,2222],{},"Adding interactivity?"," Start with ",[1247,2225,400],{"href":401}," for hover, focus, and active states",[429,2228,2229,2232,2233,2235],{},[432,2230,2231],{},"Building forms?"," Check out ",[1247,2234,384],{"href":385}," for disabled, checked, and validation states",[429,2237,2238,2241,2242,2244],{},[432,2239,2240],{},"Supporting dark mode?"," Explore ",[1247,2243,388],{"href":389}," for color scheme and motion preferences",[429,2246,2247,2250,2251,2253],{},[432,2248,2249],{},"Styling sub-elements?"," Look at ",[1247,2252,396],{"href":397}," for before, after, and placeholder",[429,2255,2256,2241,2259,2261],{},[432,2257,2258],{},"Building lists?",[1247,2260,404],{"href":405}," for first, last, odd, and even",[414,2263,2264],{},"Each modifier composable is designed to work seamlessly with Styleframe's utility system and theming.",[2266,2267,2268],"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":482,"searchDepth":523,"depth":523,"links":2270},[2271,2272,2275,2276,2286,2287,2288],{"id":420,"depth":523,"text":421},{"id":466,"depth":523,"text":467,"children":2273},[2274],{"id":686,"depth":552,"text":687},{"id":1105,"depth":523,"text":156},{"id":1252,"depth":523,"text":363,"children":2277},[2278,2279,2280,2281,2282,2283,2284,2285],{"id":1258,"depth":552,"text":376},{"id":1367,"depth":552,"text":380},{"id":1400,"depth":552,"text":384},{"id":1528,"depth":552,"text":388},{"id":1626,"depth":552,"text":392},{"id":1663,"depth":552,"text":396},{"id":1783,"depth":552,"text":400},{"id":1870,"depth":552,"text":404},{"id":1977,"depth":523,"text":1978},{"id":2161,"depth":523,"text":2162},{"id":2211,"depth":523,"text":2212},"Explore Styleframe's utility modifier composables for generating state-based, responsive, and structural variants of your utility classes with full type safety.","md",null,{},{"title":64,"icon":65},{"title":409,"description":2289},{"loc":364},"u2ChK5lufi3z0Krd1OhLpsLtq4Nr0kYr3UV21PTlyLY",[2298,2300],{"title":220,"path":221,"stem":222,"description":2299,"icon":7,"children":-1},"Create and manage z-index design tokens with CSS variables for consistent stacking order across your application.",{"title":156,"path":369,"stem":370,"description":2301,"icon":159,"children":-1},"Quickly register all modifier composables with the useModifiersPreset function for comprehensive modifier coverage in a single call.",1776621134978]