[{"data":1,"prerenderedAt":3297},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities":407,"-docs-theme-utilities-surround":3292},{"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":3285,"extension":1229,"links":3286,"meta":3287,"navigation":3288,"path":290,"seo":3289,"sitemap":3290,"stem":291,"__hash__":3291},"docs_theme/docs/theme/utilities/00.index.md","Utilities Overview",{"type":411,"value":412,"toc":3257},"minimark",[413,417,422,425,485,489,496,634,706,709,714,717,1171,1174,1466,1469,1481,1744,1747,1752,1755,1758,1761,1764,1769,1795,1800,1803,1806,1810,1820,1825,1828,1831,1835,1901,1906,1909,1912,1916,1974,1979,1982,1985,1989,2039,2044,2047,2050,2054,2136,2141,2144,2147,2151,2237,2242,2245,2248,2252,2314,2319,2322,2325,2329,2395,2400,2403,2406,2410,2456,2461,2464,2467,2471,2517,2522,2525,2528,2532,2558,2563,2566,2569,2573,2607,2612,2615,2618,2622,2677,2682,2685,2688,2692,2726,2731,2734,2737,2741,2814,2819,2823,3130,3134,3184,3188,3191,3250,3253],[414,415,416],"p",{},"Utility classes are single-purpose CSS classes that apply a specific style. Styleframe's utility composables make it easy to generate these classes programmatically with full type safety and seamless integration with your design tokens.",[418,419,421],"h2",{"id":420},"why-use-utility-composables","Why Use Utility Composables?",[414,423,424],{},"Styleframe's approach to utilities offers several key advantages:",[426,427,428,436,446,464,473,479],"ul",{},[429,430,431,435],"li",{},[432,433,434],"strong",{},"Type-Safe Generation",": Full TypeScript support with auto-complete for all utility values",[429,437,438,441,442],{},[432,439,440],{},"Design Token Integration",": Reference your design tokens directly in utility values using ",[443,444,445],"code",{},"ref()",[429,447,448,451,452,455,456,459,460,463],{},[432,449,450],{},"Modifier Support",": Apply state modifiers like ",[443,453,454],{},"hover",", ",[443,457,458],{},"focus",", and ",[443,461,462],{},"active"," to any utility",[429,465,466,469,470],{},[432,467,468],{},"Consistent Naming",": Generated class names follow predictable patterns like ",[443,471,472],{},"_property:value",[429,474,475,478],{},[432,476,477],{},"Minimal Code",": Generate comprehensive utility sets with just a few lines of code",[429,480,481,484],{},[432,482,483],{},"Customizable",": Define exactly the utilities you need without bloat",[418,486,488],{"id":487},"quick-start","Quick Start",[414,490,491,492,495],{},"When using the Styleframe Vite plugin, the ",[432,493,494],{},"scanner"," automatically detects utility class names used in your source files and generates the corresponding CSS. Just register your utility factories and use the classes directly in your templates:",[497,498,504],"pre",{"className":499,"code":500,"filename":501,"language":502,"meta":503,"style":503},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Register all utility factories\nuseUtilitiesPreset(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[443,505,506,542,565,571,592,597,604,615,620],{"__ignoreMap":503},[507,508,511,515,519,523,526,529,532,536,539],"span",{"class":509,"line":510},"line",1,[507,512,514],{"class":513},"s7zQu","import",[507,516,518],{"class":517},"sMK4o"," {",[507,520,522],{"class":521},"sTEyZ"," styleframe",[507,524,525],{"class":517}," }",[507,527,528],{"class":513}," from",[507,530,531],{"class":517}," '",[507,533,535],{"class":534},"sfazB","styleframe",[507,537,538],{"class":517},"'",[507,540,541],{"class":517},";\n",[507,543,545,547,549,552,554,556,558,561,563],{"class":509,"line":544},2,[507,546,514],{"class":513},[507,548,518],{"class":517},[507,550,551],{"class":521}," useUtilitiesPreset",[507,553,525],{"class":517},[507,555,528],{"class":513},[507,557,531],{"class":517},[507,559,560],{"class":534},"@styleframe/theme",[507,562,538],{"class":517},[507,564,541],{"class":517},[507,566,568],{"class":509,"line":567},3,[507,569,570],{"emptyLinePlaceholder":206},"\n",[507,572,574,578,581,584,587,590],{"class":509,"line":573},4,[507,575,577],{"class":576},"spNyl","const",[507,579,580],{"class":521}," s ",[507,582,583],{"class":517},"=",[507,585,522],{"class":586},"s2Zo4",[507,588,589],{"class":521},"()",[507,591,541],{"class":517},[507,593,595],{"class":509,"line":594},5,[507,596,570],{"emptyLinePlaceholder":206},[507,598,600],{"class":509,"line":599},6,[507,601,603],{"class":602},"sHwdD","// Register all utility factories\n",[507,605,607,610,613],{"class":509,"line":606},7,[507,608,609],{"class":586},"useUtilitiesPreset",[507,611,612],{"class":521},"(s)",[507,614,541],{"class":517},[507,616,618],{"class":509,"line":617},8,[507,619,570],{"emptyLinePlaceholder":206},[507,621,623,626,629,632],{"class":509,"line":622},9,[507,624,625],{"class":513},"export",[507,627,628],{"class":513}," default",[507,630,631],{"class":521}," s",[507,633,541],{"class":517},[497,635,640],{"className":636,"code":637,"filename":638,"language":639,"meta":503,"style":503},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_display:flex _padding:1rem _margin:auto\">\n    \u003Cp class=\"_font-size:1.25rem\">Hello world\u003C/p>\n\u003C/div>\n","component.html","html",[443,641,642,667,698],{"__ignoreMap":503},[507,643,644,647,651,654,656,659,662,664],{"class":509,"line":510},[507,645,646],{"class":517},"\u003C",[507,648,650],{"class":649},"swJcz","div",[507,652,653],{"class":576}," class",[507,655,583],{"class":517},[507,657,658],{"class":517},"\"",[507,660,661],{"class":534},"_display:flex _padding:1rem _margin:auto",[507,663,658],{"class":517},[507,665,666],{"class":517},">\n",[507,668,669,672,674,676,678,680,683,685,688,691,694,696],{"class":509,"line":544},[507,670,671],{"class":517},"    \u003C",[507,673,414],{"class":649},[507,675,653],{"class":576},[507,677,583],{"class":517},[507,679,658],{"class":517},[507,681,682],{"class":534},"_font-size:1.25rem",[507,684,658],{"class":517},[507,686,687],{"class":517},">",[507,689,690],{"class":521},"Hello world",[507,692,693],{"class":517},"\u003C/",[507,695,414],{"class":649},[507,697,666],{"class":517},[507,699,700,702,704],{"class":509,"line":567},[507,701,693],{"class":517},[507,703,650],{"class":649},[507,705,666],{"class":517},[414,707,708],{},"The scanner picks up the class names from your source files and auto-generates the CSS — no need to manually define values.",[710,711,713],"h3",{"id":712},"pre-generating-utility-values","Pre-generating Utility Values",[414,715,716],{},"If you want to pre-generate specific utility values tied to your design tokens, you can optionally use creator functions:",[497,718,720],{"className":499,"code":719,"filename":501,"language":502,"meta":503,"style":503},"import { styleframe } from 'styleframe';\nimport { useSpacingDesignTokens } from '@styleframe/theme';\nimport { useMarginUtility, usePaddingUtility, useDisplayUtility } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Define spacing design tokens\nconst { spacing, spacingSm, spacingMd, spacingLg } = useSpacingDesignTokens(s, {\n    default: '1rem',\n    sm: '0.5rem',\n    md: '1rem',\n    lg: '1.5rem',\n} as const);\n\n// Create margin utilities with your spacing values\nuseMarginUtility(s, {\n    sm: s.ref(spacingSm),\n    md: s.ref(spacingMd),\n    lg: s.ref(spacingLg),\n    auto: 'auto',\n});\n\n// Create padding utilities\nusePaddingUtility(s, {\n    sm: s.ref(spacingSm),\n    md: s.ref(spacingMd),\n    lg: s.ref(spacingLg),\n});\n\n// Create display utilities (uses built-in defaults)\nuseDisplayUtility(s);\n\nexport default s;\n",[443,721,722,742,763,795,799,813,817,822,862,880,897,913,930,946,951,957,969,989,1007,1025,1042,1051,1056,1062,1074,1091,1108,1125,1134,1139,1145,1155,1160],{"__ignoreMap":503},[507,723,724,726,728,730,732,734,736,738,740],{"class":509,"line":510},[507,725,514],{"class":513},[507,727,518],{"class":517},[507,729,522],{"class":521},[507,731,525],{"class":517},[507,733,528],{"class":513},[507,735,531],{"class":517},[507,737,535],{"class":534},[507,739,538],{"class":517},[507,741,541],{"class":517},[507,743,744,746,748,751,753,755,757,759,761],{"class":509,"line":544},[507,745,514],{"class":513},[507,747,518],{"class":517},[507,749,750],{"class":521}," useSpacingDesignTokens",[507,752,525],{"class":517},[507,754,528],{"class":513},[507,756,531],{"class":517},[507,758,560],{"class":534},[507,760,538],{"class":517},[507,762,541],{"class":517},[507,764,765,767,769,772,775,778,780,783,785,787,789,791,793],{"class":509,"line":567},[507,766,514],{"class":513},[507,768,518],{"class":517},[507,770,771],{"class":521}," useMarginUtility",[507,773,774],{"class":517},",",[507,776,777],{"class":521}," usePaddingUtility",[507,779,774],{"class":517},[507,781,782],{"class":521}," useDisplayUtility",[507,784,525],{"class":517},[507,786,528],{"class":513},[507,788,531],{"class":517},[507,790,560],{"class":534},[507,792,538],{"class":517},[507,794,541],{"class":517},[507,796,797],{"class":509,"line":573},[507,798,570],{"emptyLinePlaceholder":206},[507,800,801,803,805,807,809,811],{"class":509,"line":594},[507,802,577],{"class":576},[507,804,580],{"class":521},[507,806,583],{"class":517},[507,808,522],{"class":586},[507,810,589],{"class":521},[507,812,541],{"class":517},[507,814,815],{"class":509,"line":599},[507,816,570],{"emptyLinePlaceholder":206},[507,818,819],{"class":509,"line":606},[507,820,821],{"class":602},"// Define spacing design tokens\n",[507,823,824,826,828,831,833,836,838,841,843,846,849,852,854,857,859],{"class":509,"line":617},[507,825,577],{"class":576},[507,827,518],{"class":517},[507,829,830],{"class":521}," spacing",[507,832,774],{"class":517},[507,834,835],{"class":521}," spacingSm",[507,837,774],{"class":517},[507,839,840],{"class":521}," spacingMd",[507,842,774],{"class":517},[507,844,845],{"class":521}," spacingLg ",[507,847,848],{"class":517},"}",[507,850,851],{"class":517}," =",[507,853,750],{"class":586},[507,855,856],{"class":521},"(s",[507,858,774],{"class":517},[507,860,861],{"class":517}," {\n",[507,863,864,867,870,872,875,877],{"class":509,"line":622},[507,865,866],{"class":649},"    default",[507,868,869],{"class":517},":",[507,871,531],{"class":517},[507,873,874],{"class":534},"1rem",[507,876,538],{"class":517},[507,878,879],{"class":517},",\n",[507,881,883,886,888,890,893,895],{"class":509,"line":882},10,[507,884,885],{"class":649},"    sm",[507,887,869],{"class":517},[507,889,531],{"class":517},[507,891,892],{"class":534},"0.5rem",[507,894,538],{"class":517},[507,896,879],{"class":517},[507,898,900,903,905,907,909,911],{"class":509,"line":899},11,[507,901,902],{"class":649},"    md",[507,904,869],{"class":517},[507,906,531],{"class":517},[507,908,874],{"class":534},[507,910,538],{"class":517},[507,912,879],{"class":517},[507,914,916,919,921,923,926,928],{"class":509,"line":915},12,[507,917,918],{"class":649},"    lg",[507,920,869],{"class":517},[507,922,531],{"class":517},[507,924,925],{"class":534},"1.5rem",[507,927,538],{"class":517},[507,929,879],{"class":517},[507,931,933,935,938,941,944],{"class":509,"line":932},13,[507,934,848],{"class":517},[507,936,937],{"class":513}," as",[507,939,940],{"class":576}," const",[507,942,943],{"class":521},")",[507,945,541],{"class":517},[507,947,949],{"class":509,"line":948},14,[507,950,570],{"emptyLinePlaceholder":206},[507,952,954],{"class":509,"line":953},15,[507,955,956],{"class":602},"// Create margin utilities with your spacing values\n",[507,958,960,963,965,967],{"class":509,"line":959},16,[507,961,962],{"class":586},"useMarginUtility",[507,964,856],{"class":521},[507,966,774],{"class":517},[507,968,861],{"class":517},[507,970,972,974,976,978,981,984,987],{"class":509,"line":971},17,[507,973,885],{"class":649},[507,975,869],{"class":517},[507,977,631],{"class":521},[507,979,980],{"class":517},".",[507,982,983],{"class":586},"ref",[507,985,986],{"class":521},"(spacingSm)",[507,988,879],{"class":517},[507,990,992,994,996,998,1000,1002,1005],{"class":509,"line":991},18,[507,993,902],{"class":649},[507,995,869],{"class":517},[507,997,631],{"class":521},[507,999,980],{"class":517},[507,1001,983],{"class":586},[507,1003,1004],{"class":521},"(spacingMd)",[507,1006,879],{"class":517},[507,1008,1010,1012,1014,1016,1018,1020,1023],{"class":509,"line":1009},19,[507,1011,918],{"class":649},[507,1013,869],{"class":517},[507,1015,631],{"class":521},[507,1017,980],{"class":517},[507,1019,983],{"class":586},[507,1021,1022],{"class":521},"(spacingLg)",[507,1024,879],{"class":517},[507,1026,1028,1031,1033,1035,1038,1040],{"class":509,"line":1027},20,[507,1029,1030],{"class":649},"    auto",[507,1032,869],{"class":517},[507,1034,531],{"class":517},[507,1036,1037],{"class":534},"auto",[507,1039,538],{"class":517},[507,1041,879],{"class":517},[507,1043,1045,1047,1049],{"class":509,"line":1044},21,[507,1046,848],{"class":517},[507,1048,943],{"class":521},[507,1050,541],{"class":517},[507,1052,1054],{"class":509,"line":1053},22,[507,1055,570],{"emptyLinePlaceholder":206},[507,1057,1059],{"class":509,"line":1058},23,[507,1060,1061],{"class":602},"// Create padding utilities\n",[507,1063,1065,1068,1070,1072],{"class":509,"line":1064},24,[507,1066,1067],{"class":586},"usePaddingUtility",[507,1069,856],{"class":521},[507,1071,774],{"class":517},[507,1073,861],{"class":517},[507,1075,1077,1079,1081,1083,1085,1087,1089],{"class":509,"line":1076},25,[507,1078,885],{"class":649},[507,1080,869],{"class":517},[507,1082,631],{"class":521},[507,1084,980],{"class":517},[507,1086,983],{"class":586},[507,1088,986],{"class":521},[507,1090,879],{"class":517},[507,1092,1094,1096,1098,1100,1102,1104,1106],{"class":509,"line":1093},26,[507,1095,902],{"class":649},[507,1097,869],{"class":517},[507,1099,631],{"class":521},[507,1101,980],{"class":517},[507,1103,983],{"class":586},[507,1105,1004],{"class":521},[507,1107,879],{"class":517},[507,1109,1111,1113,1115,1117,1119,1121,1123],{"class":509,"line":1110},27,[507,1112,918],{"class":649},[507,1114,869],{"class":517},[507,1116,631],{"class":521},[507,1118,980],{"class":517},[507,1120,983],{"class":586},[507,1122,1022],{"class":521},[507,1124,879],{"class":517},[507,1126,1128,1130,1132],{"class":509,"line":1127},28,[507,1129,848],{"class":517},[507,1131,943],{"class":521},[507,1133,541],{"class":517},[507,1135,1137],{"class":509,"line":1136},29,[507,1138,570],{"emptyLinePlaceholder":206},[507,1140,1142],{"class":509,"line":1141},30,[507,1143,1144],{"class":602},"// Create display utilities (uses built-in defaults)\n",[507,1146,1148,1151,1153],{"class":509,"line":1147},31,[507,1149,1150],{"class":586},"useDisplayUtility",[507,1152,612],{"class":521},[507,1154,541],{"class":517},[507,1156,1158],{"class":509,"line":1157},32,[507,1159,570],{"emptyLinePlaceholder":206},[507,1161,1163,1165,1167,1169],{"class":509,"line":1162},33,[507,1164,625],{"class":513},[507,1166,628],{"class":513},[507,1168,631],{"class":521},[507,1170,541],{"class":517},[414,1172,1173],{},"This generates utility classes like:",[497,1175,1180],{"className":1176,"code":1177,"filename":1178,"language":1179,"meta":503,"style":503},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._margin\\:sm { margin: var(--spacing--sm); }\n._margin\\:md { margin: var(--spacing--md); }\n._margin\\:lg { margin: var(--spacing--lg); }\n._margin\\:auto { margin: auto; }\n\n._padding\\:sm { padding: var(--spacing--sm); }\n._padding\\:md { padding: var(--spacing--md); }\n._padding\\:lg { padding: var(--spacing--lg); }\n\n._display\\:flex { display: flex; }\n._display\\:block { display: block; }\n._display\\:grid { display: grid; }\n/* ... more display values */\n","styleframe/index.css","css",[443,1181,1182,1219,1247,1275,1299,1303,1331,1357,1383,1387,1413,1437,1461],{"__ignoreMap":503},[507,1183,1184,1186,1190,1193,1196,1198,1202,1204,1207,1210,1213,1216],{"class":509,"line":510},[507,1185,980],{"class":517},[507,1187,1189],{"class":1188},"sBMFI","_margin",[507,1191,1192],{"class":521},"\\:",[507,1194,1195],{"class":1188},"sm",[507,1197,518],{"class":517},[507,1199,1201],{"class":1200},"sqsOY"," margin",[507,1203,869],{"class":517},[507,1205,1206],{"class":586}," var",[507,1208,1209],{"class":517},"(",[507,1211,1212],{"class":521},"--spacing--sm",[507,1214,1215],{"class":517},");",[507,1217,1218],{"class":517}," }\n",[507,1220,1221,1223,1225,1227,1230,1232,1234,1236,1238,1240,1243,1245],{"class":509,"line":544},[507,1222,980],{"class":517},[507,1224,1189],{"class":1188},[507,1226,1192],{"class":521},[507,1228,1229],{"class":1188},"md",[507,1231,518],{"class":517},[507,1233,1201],{"class":1200},[507,1235,869],{"class":517},[507,1237,1206],{"class":586},[507,1239,1209],{"class":517},[507,1241,1242],{"class":521},"--spacing--md",[507,1244,1215],{"class":517},[507,1246,1218],{"class":517},[507,1248,1249,1251,1253,1255,1258,1260,1262,1264,1266,1268,1271,1273],{"class":509,"line":567},[507,1250,980],{"class":517},[507,1252,1189],{"class":1188},[507,1254,1192],{"class":521},[507,1256,1257],{"class":1188},"lg",[507,1259,518],{"class":517},[507,1261,1201],{"class":1200},[507,1263,869],{"class":517},[507,1265,1206],{"class":586},[507,1267,1209],{"class":517},[507,1269,1270],{"class":521},"--spacing--lg",[507,1272,1215],{"class":517},[507,1274,1218],{"class":517},[507,1276,1277,1279,1281,1283,1285,1287,1289,1291,1294,1297],{"class":509,"line":573},[507,1278,980],{"class":517},[507,1280,1189],{"class":1188},[507,1282,1192],{"class":521},[507,1284,1037],{"class":1188},[507,1286,518],{"class":517},[507,1288,1201],{"class":1200},[507,1290,869],{"class":517},[507,1292,1293],{"class":521}," auto",[507,1295,1296],{"class":517},";",[507,1298,1218],{"class":517},[507,1300,1301],{"class":509,"line":594},[507,1302,570],{"emptyLinePlaceholder":206},[507,1304,1305,1307,1310,1312,1314,1316,1319,1321,1323,1325,1327,1329],{"class":509,"line":599},[507,1306,980],{"class":517},[507,1308,1309],{"class":1188},"_padding",[507,1311,1192],{"class":521},[507,1313,1195],{"class":1188},[507,1315,518],{"class":517},[507,1317,1318],{"class":1200}," padding",[507,1320,869],{"class":517},[507,1322,1206],{"class":586},[507,1324,1209],{"class":517},[507,1326,1212],{"class":521},[507,1328,1215],{"class":517},[507,1330,1218],{"class":517},[507,1332,1333,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355],{"class":509,"line":606},[507,1334,980],{"class":517},[507,1336,1309],{"class":1188},[507,1338,1192],{"class":521},[507,1340,1229],{"class":1188},[507,1342,518],{"class":517},[507,1344,1318],{"class":1200},[507,1346,869],{"class":517},[507,1348,1206],{"class":586},[507,1350,1209],{"class":517},[507,1352,1242],{"class":521},[507,1354,1215],{"class":517},[507,1356,1218],{"class":517},[507,1358,1359,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381],{"class":509,"line":617},[507,1360,980],{"class":517},[507,1362,1309],{"class":1188},[507,1364,1192],{"class":521},[507,1366,1257],{"class":1188},[507,1368,518],{"class":517},[507,1370,1318],{"class":1200},[507,1372,869],{"class":517},[507,1374,1206],{"class":586},[507,1376,1209],{"class":517},[507,1378,1270],{"class":521},[507,1380,1215],{"class":517},[507,1382,1218],{"class":517},[507,1384,1385],{"class":509,"line":622},[507,1386,570],{"emptyLinePlaceholder":206},[507,1388,1389,1391,1394,1396,1399,1401,1404,1406,1409,1411],{"class":509,"line":882},[507,1390,980],{"class":517},[507,1392,1393],{"class":1188},"_display",[507,1395,1192],{"class":521},[507,1397,1398],{"class":1188},"flex",[507,1400,518],{"class":517},[507,1402,1403],{"class":1200}," display",[507,1405,869],{"class":517},[507,1407,1408],{"class":521}," flex",[507,1410,1296],{"class":517},[507,1412,1218],{"class":517},[507,1414,1415,1417,1419,1421,1424,1426,1428,1430,1433,1435],{"class":509,"line":899},[507,1416,980],{"class":517},[507,1418,1393],{"class":1188},[507,1420,1192],{"class":521},[507,1422,1423],{"class":1188},"block",[507,1425,518],{"class":517},[507,1427,1403],{"class":1200},[507,1429,869],{"class":517},[507,1431,1432],{"class":521}," block",[507,1434,1296],{"class":517},[507,1436,1218],{"class":517},[507,1438,1439,1441,1443,1445,1448,1450,1452,1454,1457,1459],{"class":509,"line":915},[507,1440,980],{"class":517},[507,1442,1393],{"class":1188},[507,1444,1192],{"class":521},[507,1446,1447],{"class":1188},"grid",[507,1449,518],{"class":517},[507,1451,1403],{"class":1200},[507,1453,869],{"class":517},[507,1455,1456],{"class":521}," grid",[507,1458,1296],{"class":517},[507,1460,1218],{"class":517},[507,1462,1463],{"class":509,"line":932},[507,1464,1465],{"class":602},"/* ... more display values */\n",[418,1467,156],{"id":1468},"presets",[414,1470,1471,1472,1476,1477,1480],{},"When working with ",[1473,1474,1475],"a",{"href":118},"recipes",", you need to register utility factories before defining your recipes. The ",[443,1478,1479],{},"useUtilitiesPreset()"," function registers all 200+ utility factories in a single call:",[497,1482,1484],{"className":499,"code":1483,"filename":501,"language":502,"meta":503,"style":503},"import { styleframe } from 'styleframe';\nimport { useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Register all utilities at once\nconst utilities = useUtilitiesPreset(s);\n\n// Now define your recipes - utilities will auto-generate from recipe declarations\ns.recipe({\n    name: 'button',\n    base: {\n        display: 'flex',\n        padding: '1rem',\n    },\n    variants: {\n        size: {\n            sm: { padding: '0.5rem' },\n            lg: { padding: '1.5rem' },\n        },\n    },\n});\n\nexport default s;\n",[443,1485,1486,1506,1526,1530,1544,1548,1553,1568,1572,1577,1592,1608,1617,1632,1647,1652,1661,1670,1692,1713,1718,1722,1730,1734],{"__ignoreMap":503},[507,1487,1488,1490,1492,1494,1496,1498,1500,1502,1504],{"class":509,"line":510},[507,1489,514],{"class":513},[507,1491,518],{"class":517},[507,1493,522],{"class":521},[507,1495,525],{"class":517},[507,1497,528],{"class":513},[507,1499,531],{"class":517},[507,1501,535],{"class":534},[507,1503,538],{"class":517},[507,1505,541],{"class":517},[507,1507,1508,1510,1512,1514,1516,1518,1520,1522,1524],{"class":509,"line":544},[507,1509,514],{"class":513},[507,1511,518],{"class":517},[507,1513,551],{"class":521},[507,1515,525],{"class":517},[507,1517,528],{"class":513},[507,1519,531],{"class":517},[507,1521,560],{"class":534},[507,1523,538],{"class":517},[507,1525,541],{"class":517},[507,1527,1528],{"class":509,"line":567},[507,1529,570],{"emptyLinePlaceholder":206},[507,1531,1532,1534,1536,1538,1540,1542],{"class":509,"line":573},[507,1533,577],{"class":576},[507,1535,580],{"class":521},[507,1537,583],{"class":517},[507,1539,522],{"class":586},[507,1541,589],{"class":521},[507,1543,541],{"class":517},[507,1545,1546],{"class":509,"line":594},[507,1547,570],{"emptyLinePlaceholder":206},[507,1549,1550],{"class":509,"line":599},[507,1551,1552],{"class":602},"// Register all utilities at once\n",[507,1554,1555,1557,1560,1562,1564,1566],{"class":509,"line":606},[507,1556,577],{"class":576},[507,1558,1559],{"class":521}," utilities ",[507,1561,583],{"class":517},[507,1563,551],{"class":586},[507,1565,612],{"class":521},[507,1567,541],{"class":517},[507,1569,1570],{"class":509,"line":617},[507,1571,570],{"emptyLinePlaceholder":206},[507,1573,1574],{"class":509,"line":622},[507,1575,1576],{"class":602},"// Now define your recipes - utilities will auto-generate from recipe declarations\n",[507,1578,1579,1582,1584,1587,1589],{"class":509,"line":882},[507,1580,1581],{"class":521},"s",[507,1583,980],{"class":517},[507,1585,1586],{"class":586},"recipe",[507,1588,1209],{"class":521},[507,1590,1591],{"class":517},"{\n",[507,1593,1594,1597,1599,1601,1604,1606],{"class":509,"line":899},[507,1595,1596],{"class":649},"    name",[507,1598,869],{"class":517},[507,1600,531],{"class":517},[507,1602,1603],{"class":534},"button",[507,1605,538],{"class":517},[507,1607,879],{"class":517},[507,1609,1610,1613,1615],{"class":509,"line":915},[507,1611,1612],{"class":649},"    base",[507,1614,869],{"class":517},[507,1616,861],{"class":517},[507,1618,1619,1622,1624,1626,1628,1630],{"class":509,"line":932},[507,1620,1621],{"class":649},"        display",[507,1623,869],{"class":517},[507,1625,531],{"class":517},[507,1627,1398],{"class":534},[507,1629,538],{"class":517},[507,1631,879],{"class":517},[507,1633,1634,1637,1639,1641,1643,1645],{"class":509,"line":948},[507,1635,1636],{"class":649},"        padding",[507,1638,869],{"class":517},[507,1640,531],{"class":517},[507,1642,874],{"class":534},[507,1644,538],{"class":517},[507,1646,879],{"class":517},[507,1648,1649],{"class":509,"line":953},[507,1650,1651],{"class":517},"    },\n",[507,1653,1654,1657,1659],{"class":509,"line":959},[507,1655,1656],{"class":649},"    variants",[507,1658,869],{"class":517},[507,1660,861],{"class":517},[507,1662,1663,1666,1668],{"class":509,"line":971},[507,1664,1665],{"class":649},"        size",[507,1667,869],{"class":517},[507,1669,861],{"class":517},[507,1671,1672,1675,1677,1679,1681,1683,1685,1687,1689],{"class":509,"line":991},[507,1673,1674],{"class":649},"            sm",[507,1676,869],{"class":517},[507,1678,518],{"class":517},[507,1680,1318],{"class":649},[507,1682,869],{"class":517},[507,1684,531],{"class":517},[507,1686,892],{"class":534},[507,1688,538],{"class":517},[507,1690,1691],{"class":517}," },\n",[507,1693,1694,1697,1699,1701,1703,1705,1707,1709,1711],{"class":509,"line":1009},[507,1695,1696],{"class":649},"            lg",[507,1698,869],{"class":517},[507,1700,518],{"class":517},[507,1702,1318],{"class":649},[507,1704,869],{"class":517},[507,1706,531],{"class":517},[507,1708,925],{"class":534},[507,1710,538],{"class":517},[507,1712,1691],{"class":517},[507,1714,1715],{"class":509,"line":1027},[507,1716,1717],{"class":517},"        },\n",[507,1719,1720],{"class":509,"line":1044},[507,1721,1651],{"class":517},[507,1723,1724,1726,1728],{"class":509,"line":1053},[507,1725,848],{"class":517},[507,1727,943],{"class":521},[507,1729,541],{"class":517},[507,1731,1732],{"class":509,"line":1058},[507,1733,570],{"emptyLinePlaceholder":206},[507,1735,1736,1738,1740,1742],{"class":509,"line":1064},[507,1737,625],{"class":513},[507,1739,628],{"class":513},[507,1741,631],{"class":521},[507,1743,541],{"class":517},[414,1745,1746],{},"The preset enables recipe auto-generation and returns creator functions for defining specific utility values when needed.",[414,1748,1749],{},[1473,1750,1751],{"href":295},"Learn more about Utility Presets →",[418,1753,102],{"id":1754},"utilities",[414,1756,1757],{},"These composables are organized into categories following common CSS property groupings.",[710,1759,302],{"id":1760},"accessibility",[414,1762,1763],{},"Utilities for accessibility features like screen reader visibility and forced color adjustments.",[414,1765,1766],{},[432,1767,1768],{},"Available composables:",[426,1770,1771,1779,1787],{},[429,1772,1773,1778],{},[432,1774,1775],{},[443,1776,1777],{},"useForcedColorAdjustUtility()",": Control forced-color-adjust behavior",[429,1780,1781,1786],{},[432,1782,1783],{},[443,1784,1785],{},"useSrOnlyUtility()",": Visually hide content while keeping it accessible",[429,1788,1789,1794],{},[432,1790,1791],{},[443,1792,1793],{},"useNotSrOnlyUtility()",": Undo screen-reader-only styles",[414,1796,1797],{},[1473,1798,1799],{"href":303},"Learn more about Accessibility Utilities →",[710,1801,306],{"id":1802},"animations",[414,1804,1805],{},"Utilities for CSS animations.",[414,1807,1808],{},[432,1809,1768],{},[426,1811,1812],{},[429,1813,1814,1819],{},[432,1815,1816],{},[443,1817,1818],{},"useAnimationUtility()",": Apply CSS animations",[414,1821,1822],{},[1473,1823,1824],{"href":307},"Learn more about Animations Utilities →",[710,1826,310],{"id":1827},"backgrounds",[414,1829,1830],{},"Utilities for controlling background properties.",[414,1832,1833],{},[432,1834,1768],{},[426,1836,1837,1845,1853,1861,1869,1877,1885,1893],{},[429,1838,1839,1844],{},[432,1840,1841],{},[443,1842,1843],{},"useBackgroundColorUtility()",": Set background colors",[429,1846,1847,1852],{},[432,1848,1849],{},[443,1850,1851],{},"useBackgroundImageUtility()",": Set background images",[429,1854,1855,1860],{},[432,1856,1857],{},[443,1858,1859],{},"useBackgroundSizeUtility()",": Control background sizing",[429,1862,1863,1868],{},[432,1864,1865],{},[443,1866,1867],{},"useBackgroundPositionUtility()",": Set background position",[429,1870,1871,1876],{},[432,1872,1873],{},[443,1874,1875],{},"useBackgroundRepeatUtility()",": Control background repeat behavior",[429,1878,1879,1884],{},[432,1880,1881],{},[443,1882,1883],{},"useBackgroundAttachmentUtility()",": Set scroll behavior",[429,1886,1887,1892],{},[432,1888,1889],{},[443,1890,1891],{},"useBackgroundClipUtility()",": Control background clipping",[429,1894,1895,1900],{},[432,1896,1897],{},[443,1898,1899],{},"useBackgroundOriginUtility()",": Set background origin",[414,1902,1903],{},[1473,1904,1905],{"href":311},"Learn more about Background Utilities →",[710,1907,169],{"id":1908},"borders",[414,1910,1911],{},"Utilities for borders, outlines, dividers, and focus rings.",[414,1913,1914],{},[432,1915,1768],{},[426,1917,1918,1926,1934,1942,1950,1958,1966],{},[429,1919,1920,1925],{},[432,1921,1922],{},[443,1923,1924],{},"useBorderColorUtility()",": Set border colors (with directional variants)",[429,1927,1928,1933],{},[432,1929,1930],{},[443,1931,1932],{},"useBorderWidthUtility()",": Control border width",[429,1935,1936,1941],{},[432,1937,1938],{},[443,1939,1940],{},"useBorderRadiusUtility()",": Set border radius",[429,1943,1944,1949],{},[432,1945,1946],{},[443,1947,1948],{},"useBorderStyleUtility()",": Define border styles",[429,1951,1952,1957],{},[432,1953,1954],{},[443,1955,1956],{},"useDivideUtility()",": Add divider lines between children",[429,1959,1960,1965],{},[432,1961,1962],{},[443,1963,1964],{},"useOutlineUtility()",": Control outline styles",[429,1967,1968,1973],{},[432,1969,1970],{},[443,1971,1972],{},"useRingUtility()",": Create focus rings",[414,1975,1976],{},[1473,1977,1978],{"href":314},"Learn more about Border Utilities →",[710,1980,317],{"id":1981},"effects",[414,1983,1984],{},"Utilities for visual effects like shadows, opacity, and blend modes.",[414,1986,1987],{},[432,1988,1768],{},[426,1990,1991,1999,2007,2015,2023,2031],{},[429,1992,1993,1998],{},[432,1994,1995],{},[443,1996,1997],{},"useBoxShadowUtility()",": Apply box shadows",[429,2000,2001,2006],{},[432,2002,2003],{},[443,2004,2005],{},"useBoxShadowColorUtility()",": Set shadow colors",[429,2008,2009,2014],{},[432,2010,2011],{},[443,2012,2013],{},"useOpacityUtility()",": Control element opacity",[429,2016,2017,2022],{},[432,2018,2019],{},[443,2020,2021],{},"useTextShadowUtility()",": Add text shadows",[429,2024,2025,2030],{},[432,2026,2027],{},[443,2028,2029],{},"useMixBlendModeUtility()",": Set blend modes",[429,2032,2033,2038],{},[432,2034,2035],{},[443,2036,2037],{},"useBackgroundBlendModeUtility()",": Control background blending",[414,2040,2041],{},[1473,2042,2043],{"href":318},"Learn more about Effect Utilities →",[710,2045,321],{"id":2046},"filters",[414,2048,2049],{},"Utilities for CSS filter effects and backdrop filters.",[414,2051,2052],{},[432,2053,1768],{},[426,2055,2056,2064,2072,2080,2088,2096,2104,2112,2120,2128],{},[429,2057,2058,2063],{},[432,2059,2060],{},[443,2061,2062],{},"useBlurUtility()",": Apply blur effects",[429,2065,2066,2071],{},[432,2067,2068],{},[443,2069,2070],{},"useBrightnessUtility()",": Adjust brightness",[429,2073,2074,2079],{},[432,2075,2076],{},[443,2077,2078],{},"useContrastUtility()",": Control contrast",[429,2081,2082,2087],{},[432,2083,2084],{},[443,2085,2086],{},"useGrayscaleUtility()",": Apply grayscale",[429,2089,2090,2095],{},[432,2091,2092],{},[443,2093,2094],{},"useHueRotateUtility()",": Rotate hue",[429,2097,2098,2103],{},[432,2099,2100],{},[443,2101,2102],{},"useInvertUtility()",": Invert colors",[429,2105,2106,2111],{},[432,2107,2108],{},[443,2109,2110],{},"useSaturateUtility()",": Adjust saturation",[429,2113,2114,2119],{},[432,2115,2116],{},[443,2117,2118],{},"useSepiaUtility()",": Apply sepia tone",[429,2121,2122,2127],{},[432,2123,2124],{},[443,2125,2126],{},"useDropShadowUtility()",": Add drop shadows",[429,2129,2130,2135],{},[432,2131,2132],{},[443,2133,2134],{},"useBackdropBlurUtility()",": Blur backdrop (+ other backdrop filters)",[414,2137,2138],{},[1473,2139,2140],{"href":322},"Learn more about Filter Utilities →",[710,2142,325],{"id":2143},"flexbox-grid",[414,2145,2146],{},"Utilities for flexbox and grid layout systems.",[414,2148,2149],{},[432,2150,1768],{},[426,2152,2153,2161,2169,2177,2190,2203,2211,2229],{},[429,2154,2155,2160],{},[432,2156,2157],{},[443,2158,2159],{},"useFlexUtility()",": Flex shorthand values",[429,2162,2163,2168],{},[432,2164,2165],{},[443,2166,2167],{},"useFlexDirectionUtility()",": Set flex direction",[429,2170,2171,2176],{},[432,2172,2173],{},[443,2174,2175],{},"useFlexWrapUtility()",": Control flex wrapping",[429,2178,2179,455,2184,2189],{},[432,2180,2181],{},[443,2182,2183],{},"useFlexGrowUtility()",[432,2185,2186],{},[443,2187,2188],{},"useFlexShrinkUtility()",": Control flex growth/shrink",[429,2191,2192,455,2197,2202],{},[432,2193,2194],{},[443,2195,2196],{},"useGridTemplateColumnsUtility()",[432,2198,2199],{},[443,2200,2201],{},"useGridTemplateRowsUtility()",": Define grid templates",[429,2204,2205,2210],{},[432,2206,2207],{},[443,2208,2209],{},"useGapUtility()",": Set gaps between items",[429,2212,2213,455,2218,455,2223,2228],{},[432,2214,2215],{},[443,2216,2217],{},"useAlignUtility()",[432,2219,2220],{},[443,2221,2222],{},"useJustifyUtility()",[432,2224,2225],{},[443,2226,2227],{},"usePlaceUtility()",": Alignment utilities",[429,2230,2231,2236],{},[432,2232,2233],{},[443,2234,2235],{},"useOrderUtility()",": Control item order",[414,2238,2239],{},[1473,2240,2241],{"href":326},"Learn more about Flexbox & Grid Utilities →",[710,2243,329],{"id":2244},"interactivity",[414,2246,2247],{},"Utilities for user interaction properties.",[414,2249,2250],{},[432,2251,1768],{},[426,2253,2254,2262,2270,2278,2285,2293,2301],{},[429,2255,2256,2261],{},[432,2257,2258],{},[443,2259,2260],{},"useCursorUtility()",": Set cursor styles",[429,2263,2264,2269],{},[432,2265,2266],{},[443,2267,2268],{},"usePointerEventsUtility()",": Control pointer events",[429,2271,2272,2277],{},[432,2273,2274],{},[443,2275,2276],{},"useUserSelectUtility()",": Manage text selection",[429,2279,2280,1884],{},[432,2281,2282],{},[443,2283,2284],{},"useScrollBehaviorUtility()",[429,2286,2287,2292],{},[432,2288,2289],{},[443,2290,2291],{},"useTouchActionUtility()",": Control touch interactions",[429,2294,2295,2300],{},[432,2296,2297],{},[443,2298,2299],{},"useResizeUtility()",": Enable element resizing",[429,2302,2303,455,2308,2313],{},[432,2304,2305],{},[443,2306,2307],{},"useAccentColorUtility()",[432,2309,2310],{},[443,2311,2312],{},"useCaretColorUtility()",": Form element colors",[414,2315,2316],{},[1473,2317,2318],{"href":330},"Learn more about Interactivity Utilities →",[710,2320,333],{"id":2321},"layout",[414,2323,2324],{},"Utilities for element layout and positioning.",[414,2326,2327],{},[432,2328,1768],{},[426,2330,2331,2339,2347,2355,2363,2371,2379,2387],{},[429,2332,2333,2338],{},[432,2334,2335],{},[443,2336,2337],{},"useDisplayUtility()",": Set display types",[429,2340,2341,2346],{},[432,2342,2343],{},[443,2344,2345],{},"usePositionUtility()",": Set positioning mode",[429,2348,2349,2354],{},[432,2350,2351],{},[443,2352,2353],{},"useInsetUtility()",": Control inset values (+ directional variants)",[429,2356,2357,2362],{},[432,2358,2359],{},[443,2360,2361],{},"useZIndexUtility()",": Set stacking order",[429,2364,2365,2370],{},[432,2366,2367],{},[443,2368,2369],{},"useOverflowUtility()",": Control overflow behavior",[429,2372,2373,2378],{},[432,2374,2375],{},[443,2376,2377],{},"useVisibilityUtility()",": Toggle visibility",[429,2380,2381,2386],{},[432,2382,2383],{},[443,2384,2385],{},"useAspectRatioUtility()",": Set aspect ratios",[429,2388,2389,2394],{},[432,2390,2391],{},[443,2392,2393],{},"useColumnsUtility()",": Multi-column layouts",[414,2396,2397],{},[1473,2398,2399],{"href":334},"Learn more about Layout Utilities →",[710,2401,337],{"id":2402},"sizing",[414,2404,2405],{},"Utilities for width and height properties.",[414,2407,2408],{},[432,2409,1768],{},[426,2411,2412,2430,2448],{},[429,2413,2414,455,2419,455,2424,2429],{},[432,2415,2416],{},[443,2417,2418],{},"useWidthUtility()",[432,2420,2421],{},[443,2422,2423],{},"useMinWidthUtility()",[432,2425,2426],{},[443,2427,2428],{},"useMaxWidthUtility()",": Width control",[429,2431,2432,455,2437,455,2442,2447],{},[432,2433,2434],{},[443,2435,2436],{},"useHeightUtility()",[432,2438,2439],{},[443,2440,2441],{},"useMinHeightUtility()",[432,2443,2444],{},[443,2445,2446],{},"useMaxHeightUtility()",": Height control",[429,2449,2450,2455],{},[432,2451,2452],{},[443,2453,2454],{},"useSizeUtility()",": Set both dimensions at once",[414,2457,2458],{},[1473,2459,2460],{"href":338},"Learn more about Sizing Utilities →",[710,2462,212],{"id":2463},"spacing",[414,2465,2466],{},"Utilities for margin and padding.",[414,2468,2469],{},[432,2470,1768],{},[426,2472,2473,2493,2509],{},[429,2474,2475,2480,2481,455,2484,455,2487,455,2490,943],{},[432,2476,2477],{},[443,2478,2479],{},"useMarginUtility()",": Set margins (+ directional variants like ",[443,2482,2483],{},"-x",[443,2485,2486],{},"-y",[443,2488,2489],{},"-inline",[443,2491,2492],{},"-block",[429,2494,2495,2500,2501,455,2503,455,2505,455,2507,943],{},[432,2496,2497],{},[443,2498,2499],{},"usePaddingUtility()",": Set padding (+ directional variants like ",[443,2502,2483],{},[443,2504,2486],{},[443,2506,2489],{},[443,2508,2492],{},[429,2510,2511,2516],{},[432,2512,2513],{},[443,2514,2515],{},"useSpaceUtility()",": Space between children",[414,2518,2519],{},[1473,2520,2521],{"href":341},"Learn more about Spacing Utilities →",[710,2523,344],{"id":2524},"svg",[414,2526,2527],{},"Utilities for SVG-specific properties.",[414,2529,2530],{},[432,2531,1768],{},[426,2533,2534,2542,2550],{},[429,2535,2536,2541],{},[432,2537,2538],{},[443,2539,2540],{},"useFillUtility()",": Set SVG fill color",[429,2543,2544,2549],{},[432,2545,2546],{},[443,2547,2548],{},"useStrokeUtility()",": Set SVG stroke color",[429,2551,2552,2557],{},[432,2553,2554],{},[443,2555,2556],{},"useStrokeWidthUtility()",": Control stroke width",[414,2559,2560],{},[1473,2561,2562],{"href":345},"Learn more about SVG Utilities →",[710,2564,348],{"id":2565},"tables",[414,2567,2568],{},"Utilities for table layout properties.",[414,2570,2571],{},[432,2572,1768],{},[426,2574,2575,2583,2591,2599],{},[429,2576,2577,2582],{},[432,2578,2579],{},[443,2580,2581],{},"useBorderCollapseUtility()",": Control border collapsing",[429,2584,2585,2590],{},[432,2586,2587],{},[443,2588,2589],{},"useBorderSpacingUtility()",": Set border spacing",[429,2592,2593,2598],{},[432,2594,2595],{},[443,2596,2597],{},"useTableLayoutUtility()",": Set table layout algorithm",[429,2600,2601,2606],{},[432,2602,2603],{},[443,2604,2605],{},"useCaptionSideUtility()",": Position table captions",[414,2608,2609],{},[1473,2610,2611],{"href":349},"Learn more about Table Utilities →",[710,2613,352],{"id":2614},"transforms",[414,2616,2617],{},"Utilities for CSS transforms.",[414,2619,2620],{},[432,2621,1768],{},[426,2623,2624,2632,2640,2648,2661,2669],{},[429,2625,2626,2631],{},[432,2627,2628],{},[443,2629,2630],{},"useRotateUtility()",": Rotate elements",[429,2633,2634,2639],{},[432,2635,2636],{},[443,2637,2638],{},"useScaleUtility()",": Scale elements",[429,2641,2642,2647],{},[432,2643,2644],{},[443,2645,2646],{},"useTranslateUtility()",": Translate position",[429,2649,2650,455,2655,2660],{},[432,2651,2652],{},[443,2653,2654],{},"useSkewXUtility()",[432,2656,2657],{},[443,2658,2659],{},"useSkewYUtility()",": Skew elements",[429,2662,2663,2668],{},[432,2664,2665],{},[443,2666,2667],{},"useTransformOriginUtility()",": Set transform origin",[429,2670,2671,2676],{},[432,2672,2673],{},[443,2674,2675],{},"usePerspectiveUtility()",": Set 3D perspective",[414,2678,2679],{},[1473,2680,2681],{"href":353},"Learn more about Transform Utilities →",[710,2683,356],{"id":2684},"transitions",[414,2686,2687],{},"Utilities for transitions.",[414,2689,2690],{},[432,2691,1768],{},[426,2693,2694,2702,2710,2718],{},[429,2695,2696,2701],{},[432,2697,2698],{},[443,2699,2700],{},"useTransitionPropertyUtility()",": Set which properties transition",[429,2703,2704,2709],{},[432,2705,2706],{},[443,2707,2708],{},"useTransitionDurationUtility()",": Set transition duration",[429,2711,2712,2717],{},[432,2713,2714],{},[443,2715,2716],{},"useTransitionTimingFunctionUtility()",": Set easing functions",[429,2719,2720,2725],{},[432,2721,2722],{},[443,2723,2724],{},"useTransitionDelayUtility()",": Set transition delays",[414,2727,2728],{},[1473,2729,2730],{"href":357},"Learn more about Transitions Utilities →",[710,2732,216],{"id":2733},"typography",[414,2735,2736],{},"Utilities for text and font styling.",[414,2738,2739],{},[432,2740,1768],{},[426,2742,2743,2761,2769,2777,2790,2798,2806],{},[429,2744,2745,455,2750,455,2755,2760],{},[432,2746,2747],{},[443,2748,2749],{},"useFontFamilyUtility()",[432,2751,2752],{},[443,2753,2754],{},"useFontSizeUtility()",[432,2756,2757],{},[443,2758,2759],{},"useFontWeightUtility()",": Font properties",[429,2762,2763,2768],{},[432,2764,2765],{},[443,2766,2767],{},"useTextColorUtility()",": Set text color",[429,2770,2771,2776],{},[432,2772,2773],{},[443,2774,2775],{},"useTextAlignUtility()",": Control text alignment",[429,2778,2779,455,2784,2789],{},[432,2780,2781],{},[443,2782,2783],{},"useLineHeightUtility()",[432,2785,2786],{},[443,2787,2788],{},"useLetterSpacingUtility()",": Text spacing",[429,2791,2792,2797],{},[432,2793,2794],{},[443,2795,2796],{},"useTextDecorationUtility()",": Add text decorations",[429,2799,2800,2805],{},[432,2801,2802],{},[443,2803,2804],{},"useTextTransformUtility()",": Transform text case",[429,2807,2808,2813],{},[432,2809,2810],{},[443,2811,2812],{},"useLineClampUtility()",": Truncate text with ellipsis",[414,2815,2816],{},[1473,2817,2818],{"href":360},"Learn more about Typography Utilities →",[418,2820,2822],{"id":2821},"utility-reference","Utility Reference",[2824,2825,2826,2842],"table",{},[2827,2828,2829],"thead",{},[2830,2831,2832,2836,2839],"tr",{},[2833,2834,2835],"th",{},"Category",[2833,2837,2838],{},"Key Composables",[2833,2840,2841],{},"Purpose",[2843,2844,2845,2863,2877,2894,2914,2931,2948,2968,2985,3004,3024,3039,3056,3073,3093,3110],"tbody",{},[2830,2846,2847,2852,2860],{},[2848,2849,2850],"td",{},[432,2851,302],{},[2848,2853,2854,455,2857],{},[443,2855,2856],{},"useSrOnlyUtility",[443,2858,2859],{},"useForcedColorAdjustUtility",[2848,2861,2862],{},"Screen reader and a11y features",[2830,2864,2865,2869,2874],{},[2848,2866,2867],{},[432,2868,306],{},[2848,2870,2871],{},[443,2872,2873],{},"useAnimationUtility",[2848,2875,2876],{},"CSS animations",[2830,2878,2879,2883,2891],{},[2848,2880,2881],{},[432,2882,310],{},[2848,2884,2885,455,2888],{},[443,2886,2887],{},"useBackgroundColorUtility",[443,2889,2890],{},"useBackgroundImageUtility",[2848,2892,2893],{},"Background styling",[2830,2895,2896,2900,2911],{},[2848,2897,2898],{},[432,2899,169],{},[2848,2901,2902,455,2905,455,2908],{},[443,2903,2904],{},"useBorderColorUtility",[443,2906,2907],{},"useBorderRadiusUtility",[443,2909,2910],{},"useRingUtility",[2848,2912,2913],{},"Border and outline styles",[2830,2915,2916,2920,2928],{},[2848,2917,2918],{},[432,2919,317],{},[2848,2921,2922,455,2925],{},[443,2923,2924],{},"useBoxShadowUtility",[443,2926,2927],{},"useOpacityUtility",[2848,2929,2930],{},"Visual effects",[2830,2932,2933,2937,2945],{},[2848,2934,2935],{},[432,2936,321],{},[2848,2938,2939,455,2942],{},[443,2940,2941],{},"useBlurUtility",[443,2943,2944],{},"useBackdropBlurUtility",[2848,2946,2947],{},"CSS filters",[2830,2949,2950,2954,2965],{},[2848,2951,2952],{},[432,2953,325],{},[2848,2955,2956,455,2959,455,2962],{},[443,2957,2958],{},"useFlexUtility",[443,2960,2961],{},"useGapUtility",[443,2963,2964],{},"useGridTemplateColumnsUtility",[2848,2966,2967],{},"Layout systems",[2830,2969,2970,2974,2982],{},[2848,2971,2972],{},[432,2973,329],{},[2848,2975,2976,455,2979],{},[443,2977,2978],{},"useCursorUtility",[443,2980,2981],{},"usePointerEventsUtility",[2848,2983,2984],{},"User interactions",[2830,2986,2987,2991,3001],{},[2848,2988,2989],{},[432,2990,333],{},[2848,2992,2993,455,2995,455,2998],{},[443,2994,1150],{},[443,2996,2997],{},"usePositionUtility",[443,2999,3000],{},"useZIndexUtility",[2848,3002,3003],{},"Element layout",[2830,3005,3006,3010,3021],{},[2848,3007,3008],{},[432,3009,337],{},[2848,3011,3012,455,3015,455,3018],{},[443,3013,3014],{},"useWidthUtility",[443,3016,3017],{},"useHeightUtility",[443,3019,3020],{},"useSizeUtility",[2848,3022,3023],{},"Dimensions",[2830,3025,3026,3030,3036],{},[2848,3027,3028],{},[432,3029,212],{},[2848,3031,3032,455,3034],{},[443,3033,962],{},[443,3035,1067],{},[2848,3037,3038],{},"Margins and padding",[2830,3040,3041,3045,3053],{},[2848,3042,3043],{},[432,3044,344],{},[2848,3046,3047,455,3050],{},[443,3048,3049],{},"useFillUtility",[443,3051,3052],{},"useStrokeUtility",[2848,3054,3055],{},"SVG properties",[2830,3057,3058,3062,3070],{},[2848,3059,3060],{},[432,3061,348],{},[2848,3063,3064,455,3067],{},[443,3065,3066],{},"useBorderCollapseUtility",[443,3068,3069],{},"useTableLayoutUtility",[2848,3071,3072],{},"Table layout",[2830,3074,3075,3079,3090],{},[2848,3076,3077],{},[432,3078,352],{},[2848,3080,3081,455,3084,455,3087],{},[443,3082,3083],{},"useRotateUtility",[443,3085,3086],{},"useScaleUtility",[443,3088,3089],{},"useTranslateUtility",[2848,3091,3092],{},"CSS transforms",[2830,3094,3095,3099,3107],{},[2848,3096,3097],{},[432,3098,356],{},[2848,3100,3101,455,3104],{},[443,3102,3103],{},"useTransitionPropertyUtility",[443,3105,3106],{},"useTransitionDurationUtility",[2848,3108,3109],{},"CSS transitions",[2830,3111,3112,3116,3127],{},[2848,3113,3114],{},[432,3115,216],{},[2848,3117,3118,455,3121,455,3124],{},[443,3119,3120],{},"useFontSizeUtility",[443,3122,3123],{},"useTextColorUtility",[443,3125,3126],{},"useLineClampUtility",[2848,3128,3129],{},"Text styling",[418,3131,3133],{"id":3132},"best-practices","Best Practices",[426,3135,3136,3145,3151,3157,3166,3178],{},[429,3137,3138,3141,3142,3144],{},[432,3139,3140],{},"Use design tokens",": Reference your design token variables using ",[443,3143,445],{}," for consistent styling",[429,3146,3147,3150],{},[432,3148,3149],{},"Start small",": Only generate the utilities you actually need to keep CSS bundle size minimal",[429,3152,3153,3156],{},[432,3154,3155],{},"Leverage defaults",": Many utilities have sensible default values you can use directly",[429,3158,3159,3162,3163,3165],{},[432,3160,3161],{},"Apply modifiers",": Use modifier composables like ",[443,3164,454],{}," to generate state variants",[429,3167,3168,3174,3175,3177],{},[432,3169,3170,3171],{},"Use ",[443,3172,3173],{},"as const",": Add ",[443,3176,3173],{}," to value objects for better TypeScript inference",[429,3179,3180,3183],{},[432,3181,3182],{},"Follow naming conventions",": Use semantic names that describe purpose, not appearance",[418,3185,3187],{"id":3186},"next-steps","Next Steps",[414,3189,3190],{},"Ready to start using utilities? Begin with these common categories:",[426,3192,3193,3204,3212,3222,3232,3240],{},[429,3194,3195,3198,3199,3201,3202],{},[432,3196,3197],{},"Building layouts?"," Start with ",[1473,3200,333],{"href":334}," and ",[1473,3203,325],{"href":326},[429,3205,3206,3209,3210],{},[432,3207,3208],{},"Styling text?"," Check out ",[1473,3211,216],{"href":360},[429,3213,3214,3217,3218,3201,3220],{},[432,3215,3216],{},"Adding spacing?"," Explore ",[1473,3219,212],{"href":341},[1473,3221,337],{"href":338},[429,3223,3224,3227,3228,3201,3230],{},[432,3225,3226],{},"Creating effects?"," Look at ",[1473,3229,317],{"href":318},[1473,3231,321],{"href":322},[429,3233,3234,3217,3237,3239],{},[432,3235,3236],{},"Adding interactivity?",[1473,3238,363],{"href":364}," for hover, focus, and more",[429,3241,3242,3245,3246,3249],{},[432,3243,3244],{},"Auto-generating CSS?"," Learn how the ",[1473,3247,3248],{"href":44},"Scanner"," detects classes in your source files",[414,3251,3252],{},"Each utility composable is designed to work seamlessly with Styleframe's design tokens and theming system.",[3254,3255,3256],"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}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}",{"title":503,"searchDepth":544,"depth":544,"links":3258},[3259,3260,3263,3264,3282,3283,3284],{"id":420,"depth":544,"text":421},{"id":487,"depth":544,"text":488,"children":3261},[3262],{"id":712,"depth":567,"text":713},{"id":1468,"depth":544,"text":156},{"id":1754,"depth":544,"text":102,"children":3265},[3266,3267,3268,3269,3270,3271,3272,3273,3274,3275,3276,3277,3278,3279,3280,3281],{"id":1760,"depth":567,"text":302},{"id":1802,"depth":567,"text":306},{"id":1827,"depth":567,"text":310},{"id":1908,"depth":567,"text":169},{"id":1981,"depth":567,"text":317},{"id":2046,"depth":567,"text":321},{"id":2143,"depth":567,"text":325},{"id":2244,"depth":567,"text":329},{"id":2321,"depth":567,"text":333},{"id":2402,"depth":567,"text":337},{"id":2463,"depth":567,"text":212},{"id":2524,"depth":567,"text":344},{"id":2565,"depth":567,"text":348},{"id":2614,"depth":567,"text":352},{"id":2684,"depth":567,"text":356},{"id":2733,"depth":567,"text":216},{"id":2821,"depth":544,"text":2822},{"id":3132,"depth":544,"text":3133},{"id":3186,"depth":544,"text":3187},"Explore Styleframe's utility composables for generating CSS utility classes. Create flexible, reusable styling primitives with full type safety.",null,{},{"title":64,"icon":65},{"title":409,"description":3285},{"loc":290},"Thdc9TOvyGSHzJ6xbi5dop-s0rYOomGVZ1CyCclwWTE",[3293,3295],{"title":404,"path":405,"stem":406,"description":3294,"icon":7,"children":-1},"Create structural modifiers for targeting elements by their position in the DOM tree with full type safety.",{"title":156,"path":295,"stem":296,"description":3296,"icon":159,"children":-1},"Quickly register all utility factories with the useUtilitiesPreset composable for seamless recipe integration and comprehensive utility class generation.",1776621134639]