[{"data":1,"prerenderedAt":2798},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-composables-spinner":407,"-docs-theme-components-composables-spinner-surround":2793},{"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":286,"body":409,"description":2787,"extension":947,"links":2788,"meta":2789,"navigation":206,"path":287,"seo":2790,"sitemap":2791,"stem":288,"__hash__":2792},"docs_theme/docs/theme/components/02.composables/13.spinner.md",{"type":410,"value":411,"toc":2764},"minimark",[412,416,442,449,453,456,490,494,1757,1760,1772,1775,1780,1784,1861,1871,1875,1878,1881,1969,1972,1978,1981,1985,1991,2138,2141,2174,2178,2182,2247,2251,2323,2330,2333,2339,2342,2347,2469,2474,2531,2537,2540,2544,2578,2584,2587,2592,2596,2645,2649,2760],[413,414,64],"h2",{"id":415},"overview",[417,418,419,420,423,424,428,429,433,434,437,438,441],"p",{},"The ",[421,422,286],"strong",{}," is a visual indicator used to communicate that an action is in progress. The ",[425,426,427],"code",{},"useSpinnerRecipe()"," composable creates a fully configured ",[430,431,432],"a",{"href":118},"recipe"," with color and size options, while ",[425,435,436],{},"useSpinnerCircleRecipe()"," handles the SVG spinner animation and ",[425,439,440],{},"useSpinnerOverlayRecipe()"," provides an optional backdrop overlay.",[417,443,444,445,448],{},"The Spinner recipe integrates directly with the default ",[430,446,447],{"href":157},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[413,450,452],{"id":451},"why-use-the-spinner-recipe","Why use the Spinner recipe?",[417,454,455],{},"The Spinner recipe helps you:",[457,458,459,466,472,478,484],"ul",{},[460,461,462,465],"li",{},[421,463,464],{},"Ship faster with sensible defaults",": Get 4 colors and 3 sizes out of the box with a single composable call.",[460,467,468,471],{},[421,469,470],{},"Maintain consistency",": The SVG-based spinner animation is consistent across all color and size combinations.",[460,473,474,477],{},[421,475,476],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[460,479,480,483],{},[421,481,482],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color or size values at compile time.",[460,485,486,489],{},[421,487,488],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[413,491,493],{"id":492},"usage","Usage",[495,496,498,503,510,799,803,814,1748,1752],"steps",{"level":497},"4",[499,500,502],"h4",{"id":501},"register-the-recipes","Register the recipes",[417,504,505,506,509],{},"Add the Spinner recipes to a local Styleframe instance. The global ",[425,507,508],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[511,512,514,693],"code-tree",{"default-value":513},"src/components/spinner.styleframe.ts",[515,516,521],"pre",{"className":517,"code":518,"filename":513,"language":519,"meta":520,"style":520},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useSpinnerRecipe, useSpinnerCircleRecipe, useSpinnerOverlayRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst spinner = useSpinnerRecipe(s);\nconst spinnerCircle = useSpinnerCircleRecipe(s);\nconst spinnerOverlay = useSpinnerOverlayRecipe(s);\n\nexport default s;\n","ts","",[425,522,523,559,593,599,620,625,642,658,674,679],{"__ignoreMap":520},[524,525,528,532,536,540,543,546,549,553,556],"span",{"class":526,"line":527},"line",1,[524,529,531],{"class":530},"s7zQu","import",[524,533,535],{"class":534},"sMK4o"," {",[524,537,539],{"class":538},"sTEyZ"," styleframe",[524,541,542],{"class":534}," }",[524,544,545],{"class":530}," from",[524,547,548],{"class":534}," '",[524,550,552],{"class":551},"sfazB","virtual:styleframe",[524,554,555],{"class":534},"'",[524,557,558],{"class":534},";\n",[524,560,562,564,566,569,572,575,577,580,582,584,586,589,591],{"class":526,"line":561},2,[524,563,531],{"class":530},[524,565,535],{"class":534},[524,567,568],{"class":538}," useSpinnerRecipe",[524,570,571],{"class":534},",",[524,573,574],{"class":538}," useSpinnerCircleRecipe",[524,576,571],{"class":534},[524,578,579],{"class":538}," useSpinnerOverlayRecipe",[524,581,542],{"class":534},[524,583,545],{"class":530},[524,585,548],{"class":534},[524,587,588],{"class":551},"@styleframe/theme",[524,590,555],{"class":534},[524,592,558],{"class":534},[524,594,596],{"class":526,"line":595},3,[524,597,598],{"emptyLinePlaceholder":206},"\n",[524,600,602,606,609,612,615,618],{"class":526,"line":601},4,[524,603,605],{"class":604},"spNyl","const",[524,607,608],{"class":538}," s ",[524,610,611],{"class":534},"=",[524,613,539],{"class":614},"s2Zo4",[524,616,617],{"class":538},"()",[524,619,558],{"class":534},[524,621,623],{"class":526,"line":622},5,[524,624,598],{"emptyLinePlaceholder":206},[524,626,628,630,633,635,637,640],{"class":526,"line":627},6,[524,629,605],{"class":604},[524,631,632],{"class":538}," spinner ",[524,634,611],{"class":534},[524,636,568],{"class":614},[524,638,639],{"class":538},"(s)",[524,641,558],{"class":534},[524,643,645,647,650,652,654,656],{"class":526,"line":644},7,[524,646,605],{"class":604},[524,648,649],{"class":538}," spinnerCircle ",[524,651,611],{"class":534},[524,653,574],{"class":614},[524,655,639],{"class":538},[524,657,558],{"class":534},[524,659,661,663,666,668,670,672],{"class":526,"line":660},8,[524,662,605],{"class":604},[524,664,665],{"class":538}," spinnerOverlay ",[524,667,611],{"class":534},[524,669,579],{"class":614},[524,671,639],{"class":538},[524,673,558],{"class":534},[524,675,677],{"class":526,"line":676},9,[524,678,598],{"emptyLinePlaceholder":206},[524,680,682,685,688,691],{"class":526,"line":681},10,[524,683,684],{"class":530},"export",[524,686,687],{"class":530}," default",[524,689,690],{"class":538}," s",[524,692,558],{"class":534},[515,694,696],{"className":517,"code":695,"filename":508,"language":519,"meta":520,"style":520},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[425,697,698,719,745,749,763,767,776,785,789],{"__ignoreMap":520},[524,699,700,702,704,706,708,710,712,715,717],{"class":526,"line":527},[524,701,531],{"class":530},[524,703,535],{"class":534},[524,705,539],{"class":538},[524,707,542],{"class":534},[524,709,545],{"class":530},[524,711,548],{"class":534},[524,713,714],{"class":551},"styleframe",[524,716,555],{"class":534},[524,718,558],{"class":534},[524,720,721,723,725,728,730,733,735,737,739,741,743],{"class":526,"line":561},[524,722,531],{"class":530},[524,724,535],{"class":534},[524,726,727],{"class":538}," useDesignTokensPreset",[524,729,571],{"class":534},[524,731,732],{"class":538}," useUtilitiesPreset",[524,734,542],{"class":534},[524,736,545],{"class":530},[524,738,548],{"class":534},[524,740,588],{"class":551},[524,742,555],{"class":534},[524,744,558],{"class":534},[524,746,747],{"class":526,"line":595},[524,748,598],{"emptyLinePlaceholder":206},[524,750,751,753,755,757,759,761],{"class":526,"line":601},[524,752,605],{"class":604},[524,754,608],{"class":538},[524,756,611],{"class":534},[524,758,539],{"class":614},[524,760,617],{"class":538},[524,762,558],{"class":534},[524,764,765],{"class":526,"line":622},[524,766,598],{"emptyLinePlaceholder":206},[524,768,769,772,774],{"class":526,"line":627},[524,770,771],{"class":614},"useDesignTokensPreset",[524,773,639],{"class":538},[524,775,558],{"class":534},[524,777,778,781,783],{"class":526,"line":644},[524,779,780],{"class":614},"useUtilitiesPreset",[524,782,639],{"class":538},[524,784,558],{"class":534},[524,786,787],{"class":526,"line":660},[524,788,598],{"emptyLinePlaceholder":206},[524,790,791,793,795,797],{"class":526,"line":676},[524,792,684],{"class":530},[524,794,687],{"class":530},[524,796,690],{"class":538},[524,798,558],{"class":534},[499,800,802],{"id":801},"build-the-component","Build the component",[417,804,805,806,809,810,813],{},"Import the ",[425,807,808],{},"spinner"," and ",[425,811,812],{},"spinnerCircle"," runtime functions from the virtual module and pass variant props to compute class names:",[815,816,817,1334],"tabs",{},[818,819,822],"tabs-item",{"icon":820,"label":821},"i-devicon-react","React",[515,823,826],{"className":517,"code":824,"filename":825,"language":519,"meta":520,"style":520},"import { spinner, spinnerCircle } from \"virtual:styleframe\";\n\ninterface SpinnerProps {\n    color?: \"primary\" | \"light\" | \"dark\" | \"neutral\";\n    size?: \"auto\" | \"sm\" | \"md\" | \"lg\";\n    label?: string;\n    children?: React.ReactNode;\n}\n\nexport function Spinner({\n    color = \"primary\",\n    size = \"md\",\n    label,\n    children,\n}: SpinnerProps) {\n    const containerClasses = spinner({ color, size });\n    const circleClasses = spinnerCircle({ size });\n\n    return (\n        \u003Cdiv className={containerClasses} role=\"status\">\n            \u003Csvg className={circleClasses} viewBox=\"0 0 50 50\">\n                \u003Ccircle cx=\"25\" cy=\"25\" r=\"20\" />\n            \u003C/svg>\n            {label && \u003Cspan>{label}\u003C/span>}\n            {children}\n        \u003C/div>\n    );\n}\n","src/components/Spinner.tsx",[425,827,828,856,860,872,918,961,973,991,996,1000,1013,1031,1046,1053,1060,1073,1106,1130,1135,1144,1180,1212,1259,1269,1301,1311,1321,1329],{"__ignoreMap":520},[524,829,830,832,834,837,839,842,844,846,849,851,854],{"class":526,"line":527},[524,831,531],{"class":530},[524,833,535],{"class":534},[524,835,836],{"class":538}," spinner",[524,838,571],{"class":534},[524,840,841],{"class":538}," spinnerCircle",[524,843,542],{"class":534},[524,845,545],{"class":530},[524,847,848],{"class":534}," \"",[524,850,552],{"class":551},[524,852,853],{"class":534},"\"",[524,855,558],{"class":534},[524,857,858],{"class":526,"line":561},[524,859,598],{"emptyLinePlaceholder":206},[524,861,862,865,869],{"class":526,"line":595},[524,863,864],{"class":604},"interface",[524,866,868],{"class":867},"sBMFI"," SpinnerProps",[524,870,871],{"class":534}," {\n",[524,873,874,878,881,883,886,888,891,893,896,898,900,902,905,907,909,911,914,916],{"class":526,"line":601},[524,875,877],{"class":876},"swJcz","    color",[524,879,880],{"class":534},"?:",[524,882,848],{"class":534},[524,884,885],{"class":551},"primary",[524,887,853],{"class":534},[524,889,890],{"class":534}," |",[524,892,848],{"class":534},[524,894,895],{"class":551},"light",[524,897,853],{"class":534},[524,899,890],{"class":534},[524,901,848],{"class":534},[524,903,904],{"class":551},"dark",[524,906,853],{"class":534},[524,908,890],{"class":534},[524,910,848],{"class":534},[524,912,913],{"class":551},"neutral",[524,915,853],{"class":534},[524,917,558],{"class":534},[524,919,920,923,925,927,930,932,934,936,939,941,943,945,948,950,952,954,957,959],{"class":526,"line":622},[524,921,922],{"class":876},"    size",[524,924,880],{"class":534},[524,926,848],{"class":534},[524,928,929],{"class":551},"auto",[524,931,853],{"class":534},[524,933,890],{"class":534},[524,935,848],{"class":534},[524,937,938],{"class":551},"sm",[524,940,853],{"class":534},[524,942,890],{"class":534},[524,944,848],{"class":534},[524,946,947],{"class":551},"md",[524,949,853],{"class":534},[524,951,890],{"class":534},[524,953,848],{"class":534},[524,955,956],{"class":551},"lg",[524,958,853],{"class":534},[524,960,558],{"class":534},[524,962,963,966,968,971],{"class":526,"line":627},[524,964,965],{"class":876},"    label",[524,967,880],{"class":534},[524,969,970],{"class":867}," string",[524,972,558],{"class":534},[524,974,975,978,980,983,986,989],{"class":526,"line":644},[524,976,977],{"class":876},"    children",[524,979,880],{"class":534},[524,981,982],{"class":867}," React",[524,984,985],{"class":534},".",[524,987,988],{"class":867},"ReactNode",[524,990,558],{"class":534},[524,992,993],{"class":526,"line":660},[524,994,995],{"class":534},"}\n",[524,997,998],{"class":526,"line":676},[524,999,598],{"emptyLinePlaceholder":206},[524,1001,1002,1004,1007,1010],{"class":526,"line":681},[524,1003,684],{"class":530},[524,1005,1006],{"class":604}," function",[524,1008,1009],{"class":614}," Spinner",[524,1011,1012],{"class":534},"({\n",[524,1014,1016,1019,1022,1024,1026,1028],{"class":526,"line":1015},11,[524,1017,877],{"class":1018},"sHdIc",[524,1020,1021],{"class":534}," =",[524,1023,848],{"class":534},[524,1025,885],{"class":551},[524,1027,853],{"class":534},[524,1029,1030],{"class":534},",\n",[524,1032,1034,1036,1038,1040,1042,1044],{"class":526,"line":1033},12,[524,1035,922],{"class":1018},[524,1037,1021],{"class":534},[524,1039,848],{"class":534},[524,1041,947],{"class":551},[524,1043,853],{"class":534},[524,1045,1030],{"class":534},[524,1047,1049,1051],{"class":526,"line":1048},13,[524,1050,965],{"class":1018},[524,1052,1030],{"class":534},[524,1054,1056,1058],{"class":526,"line":1055},14,[524,1057,977],{"class":1018},[524,1059,1030],{"class":534},[524,1061,1063,1066,1068,1071],{"class":526,"line":1062},15,[524,1064,1065],{"class":534},"}:",[524,1067,868],{"class":867},[524,1069,1070],{"class":534},")",[524,1072,871],{"class":534},[524,1074,1076,1079,1082,1084,1086,1089,1092,1095,1097,1100,1102,1104],{"class":526,"line":1075},16,[524,1077,1078],{"class":604},"    const",[524,1080,1081],{"class":538}," containerClasses",[524,1083,1021],{"class":534},[524,1085,836],{"class":614},[524,1087,1088],{"class":876},"(",[524,1090,1091],{"class":534},"{",[524,1093,1094],{"class":538}," color",[524,1096,571],{"class":534},[524,1098,1099],{"class":538}," size",[524,1101,542],{"class":534},[524,1103,1070],{"class":876},[524,1105,558],{"class":534},[524,1107,1109,1111,1114,1116,1118,1120,1122,1124,1126,1128],{"class":526,"line":1108},17,[524,1110,1078],{"class":604},[524,1112,1113],{"class":538}," circleClasses",[524,1115,1021],{"class":534},[524,1117,841],{"class":614},[524,1119,1088],{"class":876},[524,1121,1091],{"class":534},[524,1123,1099],{"class":538},[524,1125,542],{"class":534},[524,1127,1070],{"class":876},[524,1129,558],{"class":534},[524,1131,1133],{"class":526,"line":1132},18,[524,1134,598],{"emptyLinePlaceholder":206},[524,1136,1138,1141],{"class":526,"line":1137},19,[524,1139,1140],{"class":530},"    return",[524,1142,1143],{"class":876}," (\n",[524,1145,1147,1150,1153,1156,1159,1162,1165,1168,1170,1172,1175,1177],{"class":526,"line":1146},20,[524,1148,1149],{"class":534},"        \u003C",[524,1151,1152],{"class":538},"div",[524,1154,1155],{"class":538}," className",[524,1157,1158],{"class":534},"={",[524,1160,1161],{"class":538},"containerClasses",[524,1163,1164],{"class":534},"}",[524,1166,1167],{"class":538}," role",[524,1169,611],{"class":534},[524,1171,853],{"class":534},[524,1173,1174],{"class":551},"status",[524,1176,853],{"class":534},[524,1178,1179],{"class":534},">\n",[524,1181,1183,1186,1189,1191,1193,1196,1198,1201,1203,1205,1208,1210],{"class":526,"line":1182},21,[524,1184,1185],{"class":534},"            \u003C",[524,1187,1188],{"class":538},"svg",[524,1190,1155],{"class":538},[524,1192,1158],{"class":534},[524,1194,1195],{"class":538},"circleClasses",[524,1197,1164],{"class":534},[524,1199,1200],{"class":538}," viewBox",[524,1202,611],{"class":534},[524,1204,853],{"class":534},[524,1206,1207],{"class":551},"0 0 50 50",[524,1209,853],{"class":534},[524,1211,1179],{"class":534},[524,1213,1215,1218,1221,1224,1226,1228,1231,1233,1236,1238,1240,1242,1244,1247,1249,1251,1254,1256],{"class":526,"line":1214},22,[524,1216,1217],{"class":534},"                \u003C",[524,1219,1220],{"class":538},"circle",[524,1222,1223],{"class":538}," cx",[524,1225,611],{"class":534},[524,1227,853],{"class":534},[524,1229,1230],{"class":551},"25",[524,1232,853],{"class":534},[524,1234,1235],{"class":538}," cy",[524,1237,611],{"class":534},[524,1239,853],{"class":534},[524,1241,1230],{"class":551},[524,1243,853],{"class":534},[524,1245,1246],{"class":538}," r",[524,1248,611],{"class":534},[524,1250,853],{"class":534},[524,1252,1253],{"class":551},"20",[524,1255,853],{"class":534},[524,1257,1258],{"class":534}," />\n",[524,1260,1262,1265,1267],{"class":526,"line":1261},23,[524,1263,1264],{"class":534},"            \u003C/",[524,1266,1188],{"class":538},[524,1268,1179],{"class":534},[524,1270,1272,1275,1278,1281,1283,1286,1288,1290,1292,1295,1297,1299],{"class":526,"line":1271},24,[524,1273,1274],{"class":534},"            {",[524,1276,1277],{"class":1018},"label",[524,1279,1280],{"class":876}," && \u003C",[524,1282,524],{"class":1018},[524,1284,1285],{"class":876},">",[524,1287,1091],{"class":534},[524,1289,1277],{"class":1018},[524,1291,1164],{"class":534},[524,1293,1294],{"class":876},"\u003C/",[524,1296,524],{"class":1018},[524,1298,1285],{"class":876},[524,1300,995],{"class":534},[524,1302,1304,1306,1309],{"class":526,"line":1303},25,[524,1305,1274],{"class":534},[524,1307,1308],{"class":1018},"children",[524,1310,995],{"class":534},[524,1312,1314,1317,1319],{"class":526,"line":1313},26,[524,1315,1316],{"class":534},"        \u003C/",[524,1318,1152],{"class":538},[524,1320,1179],{"class":534},[524,1322,1324,1327],{"class":526,"line":1323},27,[524,1325,1326],{"class":876},"    )",[524,1328,558],{"class":534},[524,1330,1332],{"class":526,"line":1331},28,[524,1333,995],{"class":534},[818,1335,1338],{"icon":1336,"label":1337},"i-devicon-vuejs","Vue",[515,1339,1344],{"className":1340,"code":1341,"filename":1342,"language":1343,"meta":520,"style":520},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { spinner, spinnerCircle } from \"virtual:styleframe\";\n\nconst { color = \"primary\", size = \"md\", label } = defineProps\u003C{\n    color?: \"primary\" | \"light\" | \"dark\" | \"neutral\";\n    size?: \"auto\" | \"sm\" | \"md\" | \"lg\";\n    label?: string;\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"spinner({ color, size })\" role=\"status\">\n        \u003Csvg :class=\"spinnerCircle({ size })\" viewBox=\"0 0 50 50\">\n            \u003Ccircle cx=\"25\" cy=\"25\" r=\"20\" />\n        \u003C/svg>\n        \u003Cspan v-if=\"label\">{{ label }}\u003C/span>\n        \u003Cslot />\n    \u003C/div>\n\u003C/template>\n","src/components/Spinner.vue","vue",[425,1345,1346,1370,1394,1398,1443,1481,1519,1529,1538,1546,1550,1559,1607,1647,1685,1693,1722,1731,1740],{"__ignoreMap":520},[524,1347,1348,1351,1354,1357,1360,1362,1364,1366,1368],{"class":526,"line":527},[524,1349,1350],{"class":534},"\u003C",[524,1352,1353],{"class":876},"script",[524,1355,1356],{"class":604}," setup",[524,1358,1359],{"class":604}," lang",[524,1361,611],{"class":534},[524,1363,853],{"class":534},[524,1365,519],{"class":551},[524,1367,853],{"class":534},[524,1369,1179],{"class":534},[524,1371,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392],{"class":526,"line":561},[524,1373,531],{"class":530},[524,1375,535],{"class":534},[524,1377,836],{"class":538},[524,1379,571],{"class":534},[524,1381,841],{"class":538},[524,1383,542],{"class":534},[524,1385,545],{"class":530},[524,1387,848],{"class":534},[524,1389,552],{"class":551},[524,1391,853],{"class":534},[524,1393,558],{"class":534},[524,1395,1396],{"class":526,"line":595},[524,1397,598],{"emptyLinePlaceholder":206},[524,1399,1400,1402,1404,1407,1409,1411,1413,1415,1417,1420,1422,1424,1426,1428,1430,1433,1435,1437,1440],{"class":526,"line":601},[524,1401,605],{"class":604},[524,1403,535],{"class":534},[524,1405,1406],{"class":538}," color ",[524,1408,611],{"class":534},[524,1410,848],{"class":534},[524,1412,885],{"class":551},[524,1414,853],{"class":534},[524,1416,571],{"class":534},[524,1418,1419],{"class":538}," size ",[524,1421,611],{"class":534},[524,1423,848],{"class":534},[524,1425,947],{"class":551},[524,1427,853],{"class":534},[524,1429,571],{"class":534},[524,1431,1432],{"class":538}," label ",[524,1434,1164],{"class":534},[524,1436,1021],{"class":534},[524,1438,1439],{"class":614}," defineProps",[524,1441,1442],{"class":534},"\u003C{\n",[524,1444,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479],{"class":526,"line":622},[524,1446,877],{"class":876},[524,1448,880],{"class":534},[524,1450,848],{"class":534},[524,1452,885],{"class":551},[524,1454,853],{"class":534},[524,1456,890],{"class":534},[524,1458,848],{"class":534},[524,1460,895],{"class":551},[524,1462,853],{"class":534},[524,1464,890],{"class":534},[524,1466,848],{"class":534},[524,1468,904],{"class":551},[524,1470,853],{"class":534},[524,1472,890],{"class":534},[524,1474,848],{"class":534},[524,1476,913],{"class":551},[524,1478,853],{"class":534},[524,1480,558],{"class":534},[524,1482,1483,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517],{"class":526,"line":627},[524,1484,922],{"class":876},[524,1486,880],{"class":534},[524,1488,848],{"class":534},[524,1490,929],{"class":551},[524,1492,853],{"class":534},[524,1494,890],{"class":534},[524,1496,848],{"class":534},[524,1498,938],{"class":551},[524,1500,853],{"class":534},[524,1502,890],{"class":534},[524,1504,848],{"class":534},[524,1506,947],{"class":551},[524,1508,853],{"class":534},[524,1510,890],{"class":534},[524,1512,848],{"class":534},[524,1514,956],{"class":551},[524,1516,853],{"class":534},[524,1518,558],{"class":534},[524,1520,1521,1523,1525,1527],{"class":526,"line":644},[524,1522,965],{"class":876},[524,1524,880],{"class":534},[524,1526,970],{"class":867},[524,1528,558],{"class":534},[524,1530,1531,1534,1536],{"class":526,"line":660},[524,1532,1533],{"class":534},"}>",[524,1535,617],{"class":538},[524,1537,558],{"class":534},[524,1539,1540,1542,1544],{"class":526,"line":676},[524,1541,1294],{"class":534},[524,1543,1353],{"class":876},[524,1545,1179],{"class":534},[524,1547,1548],{"class":526,"line":681},[524,1549,598],{"emptyLinePlaceholder":206},[524,1551,1552,1554,1557],{"class":526,"line":1015},[524,1553,1350],{"class":534},[524,1555,1556],{"class":876},"template",[524,1558,1179],{"class":534},[524,1560,1561,1564,1566,1569,1572,1574,1576,1578,1581,1584,1587,1590,1593,1595,1597,1599,1601,1603,1605],{"class":526,"line":1033},[524,1562,1563],{"class":534},"    \u003C",[524,1565,1152],{"class":876},[524,1567,1568],{"class":534}," :",[524,1570,1571],{"class":604},"class",[524,1573,611],{"class":534},[524,1575,853],{"class":534},[524,1577,808],{"class":614},[524,1579,1580],{"class":534},"({ ",[524,1582,1583],{"class":538},"color",[524,1585,1586],{"class":534},", ",[524,1588,1589],{"class":538},"size",[524,1591,1592],{"class":534}," })",[524,1594,853],{"class":534},[524,1596,1167],{"class":604},[524,1598,611],{"class":534},[524,1600,853],{"class":534},[524,1602,1174],{"class":551},[524,1604,853],{"class":534},[524,1606,1179],{"class":534},[524,1608,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631,1633,1635,1637,1639,1641,1643,1645],{"class":526,"line":1048},[524,1610,1149],{"class":534},[524,1612,1188],{"class":876},[524,1614,1568],{"class":534},[524,1616,1571],{"class":604},[524,1618,611],{"class":534},[524,1620,853],{"class":534},[524,1622,812],{"class":614},[524,1624,1088],{"class":538},[524,1626,1091],{"class":534},[524,1628,1419],{"class":538},[524,1630,1164],{"class":534},[524,1632,1070],{"class":538},[524,1634,853],{"class":534},[524,1636,1200],{"class":604},[524,1638,611],{"class":534},[524,1640,853],{"class":534},[524,1642,1207],{"class":551},[524,1644,853],{"class":534},[524,1646,1179],{"class":534},[524,1648,1649,1651,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683],{"class":526,"line":1055},[524,1650,1185],{"class":534},[524,1652,1220],{"class":876},[524,1654,1223],{"class":604},[524,1656,611],{"class":534},[524,1658,853],{"class":534},[524,1660,1230],{"class":551},[524,1662,853],{"class":534},[524,1664,1235],{"class":604},[524,1666,611],{"class":534},[524,1668,853],{"class":534},[524,1670,1230],{"class":551},[524,1672,853],{"class":534},[524,1674,1246],{"class":604},[524,1676,611],{"class":534},[524,1678,853],{"class":534},[524,1680,1253],{"class":551},[524,1682,853],{"class":534},[524,1684,1258],{"class":534},[524,1686,1687,1689,1691],{"class":526,"line":1062},[524,1688,1316],{"class":534},[524,1690,1188],{"class":876},[524,1692,1179],{"class":534},[524,1694,1695,1697,1699,1702,1704,1706,1708,1710,1713,1715,1718,1720],{"class":526,"line":1075},[524,1696,1149],{"class":534},[524,1698,524],{"class":876},[524,1700,1701],{"class":530}," v-if",[524,1703,611],{"class":534},[524,1705,853],{"class":534},[524,1707,1277],{"class":538},[524,1709,853],{"class":534},[524,1711,1712],{"class":534},">{{",[524,1714,1432],{"class":538},[524,1716,1717],{"class":534},"}}\u003C/",[524,1719,524],{"class":876},[524,1721,1179],{"class":534},[524,1723,1724,1726,1729],{"class":526,"line":1108},[524,1725,1149],{"class":534},[524,1727,1728],{"class":876},"slot",[524,1730,1258],{"class":534},[524,1732,1733,1736,1738],{"class":526,"line":1132},[524,1734,1735],{"class":534},"    \u003C/",[524,1737,1152],{"class":876},[524,1739,1179],{"class":534},[524,1741,1742,1744,1746],{"class":526,"line":1137},[524,1743,1294],{"class":534},[524,1745,1556],{"class":876},[524,1747,1179],{"class":534},[499,1749,1751],{"id":1750},"see-it-in-action","See it in action",[1753,1754],"story-preview",{"story":1755,":panel":1756},"theme-recipes-spinner--default","true",[413,1758,181],{"id":1759},"colors",[417,1761,1762,1763,1765,1766,1768,1769,985],{},"The Spinner supports 4 color options. The ",[425,1764,1583],{}," variant sets the CSS ",[425,1767,1583],{}," property on the container, which cascades to the SVG spinner via ",[425,1770,1771],{},"currentColor",[1753,1773],{"story":1774,":panel":1756},"theme-recipes-spinner--primary",[1776,1777,1779],"h3",{"id":1778},"color-reference","Color Reference",[1753,1781],{"story":1782,":height":1783},"theme-recipes-spinner--all-variants","320",[1785,1786,1787,1803],"table",{},[1788,1789,1790],"thead",{},[1791,1792,1793,1797,1800],"tr",{},[1794,1795,1796],"th",{},"Color",[1794,1798,1799],{},"Token",[1794,1801,1802],{},"Use Case",[1804,1805,1806,1821,1835,1849],"tbody",{},[1791,1807,1808,1813,1818],{},[1809,1810,1811],"td",{},[425,1812,885],{},[1809,1814,1815],{},[425,1816,1817],{},"@color.primary",[1809,1819,1820],{},"Default loading state, primary actions",[1791,1822,1823,1827,1832],{},[1809,1824,1825],{},[425,1826,895],{},[1809,1828,1829],{},[425,1830,1831],{},"@color.gray-700",[1809,1833,1834],{},"Loading on dark backgrounds, stays fixed in dark mode",[1791,1836,1837,1841,1846],{},[1809,1838,1839],{},[425,1840,904],{},[1809,1842,1843],{},[425,1844,1845],{},"@color.white",[1809,1847,1848],{},"Loading on light backgrounds, stays fixed in dark mode",[1791,1850,1851,1855,1858],{},[1809,1852,1853],{},[425,1854,913],{},[1809,1856,1857],{},"Adaptive (light ↔ dark)",[1809,1859,1860],{},"Default adaptive color, adjusts to the current color scheme",[1862,1863,1864,1867,1868,1870],"tip",{},[421,1865,1866],{},"Pro tip:"," Use ",[425,1869,913],{}," for general-purpose loading states that need to adapt to both light and dark mode automatically.",[413,1872,1874],{"id":1873},"sizes","Sizes",[417,1876,1877],{},"The Spinner comes in 3 sizes that control both the spinner dimensions and the label text size.",[1753,1879],{"story":1880,":height":1783},"theme-recipes-spinner--all-sizes",[1785,1882,1883,1896],{},[1788,1884,1885],{},[1791,1886,1887,1890,1893],{},[1794,1888,1889],{},"Size",[1794,1891,1892],{},"Spinner Dimensions",[1794,1894,1895],{},"Font Size",[1804,1897,1898,1915,1933,1951],{},[1791,1899,1900,1904,1912],{},[1809,1901,1902],{},[425,1903,929],{},[1809,1905,1906,1909,1910],{},[425,1907,1908],{},"100%"," × ",[425,1911,1908],{},[1809,1913,1914],{},"Inherits base",[1791,1916,1917,1921,1928],{},[1809,1918,1919],{},[425,1920,938],{},[1809,1922,1923,1909,1926],{},[425,1924,1925],{},"@2",[425,1927,1925],{},[1809,1929,1930],{},[425,1931,1932],{},"@font-size.xs",[1791,1934,1935,1939,1946],{},[1809,1936,1937],{},[425,1938,947],{},[1809,1940,1941,1909,1944],{},[425,1942,1943],{},"@3",[425,1945,1943],{},[1809,1947,1948],{},[425,1949,1950],{},"@font-size.sm",[1791,1952,1953,1957,1964],{},[1809,1954,1955],{},[425,1956,956],{},[1809,1958,1959,1909,1962],{},[425,1960,1961],{},"@4",[425,1963,1961],{},[1809,1965,1966],{},[425,1967,1968],{},"@font-size.md",[413,1970,1971],{"id":1277},"Label",[417,1973,1974,1975,1977],{},"You can display optional text below the spinner using the ",[425,1976,1277],{}," prop.",[1753,1979],{"story":1980,":panel":1756},"theme-recipes-spinner--with-label",[413,1982,1984],{"id":1983},"overlay","Overlay",[417,1986,1987,1988,1990],{},"Use ",[425,1989,440],{}," to create a fixed overlay backdrop for full-page or container-level loading states.",[515,1992,1995],{"className":1340,"code":1993,"filename":1994,"language":1343,"meta":520,"style":520},"\u003Cscript setup lang=\"ts\">\nimport { spinnerOverlay } from \"virtual:styleframe\";\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"spinnerOverlay({})\">\n        \u003CSpinner color=\"dark\" size=\"lg\" label=\"Loading...\" />\n    \u003C/div>\n\u003C/template>\n","src/components/SpinnerOverlay.vue",[425,1996,1997,2017,2038,2046,2050,2058,2082,2122,2130],{"__ignoreMap":520},[524,1998,1999,2001,2003,2005,2007,2009,2011,2013,2015],{"class":526,"line":527},[524,2000,1350],{"class":534},[524,2002,1353],{"class":876},[524,2004,1356],{"class":604},[524,2006,1359],{"class":604},[524,2008,611],{"class":534},[524,2010,853],{"class":534},[524,2012,519],{"class":551},[524,2014,853],{"class":534},[524,2016,1179],{"class":534},[524,2018,2019,2021,2023,2026,2028,2030,2032,2034,2036],{"class":526,"line":561},[524,2020,531],{"class":530},[524,2022,535],{"class":534},[524,2024,2025],{"class":538}," spinnerOverlay",[524,2027,542],{"class":534},[524,2029,545],{"class":530},[524,2031,848],{"class":534},[524,2033,552],{"class":551},[524,2035,853],{"class":534},[524,2037,558],{"class":534},[524,2039,2040,2042,2044],{"class":526,"line":595},[524,2041,1294],{"class":534},[524,2043,1353],{"class":876},[524,2045,1179],{"class":534},[524,2047,2048],{"class":526,"line":601},[524,2049,598],{"emptyLinePlaceholder":206},[524,2051,2052,2054,2056],{"class":526,"line":622},[524,2053,1350],{"class":534},[524,2055,1556],{"class":876},[524,2057,1179],{"class":534},[524,2059,2060,2062,2064,2066,2068,2070,2072,2075,2078,2080],{"class":526,"line":627},[524,2061,1563],{"class":534},[524,2063,1152],{"class":876},[524,2065,1568],{"class":534},[524,2067,1571],{"class":604},[524,2069,611],{"class":534},[524,2071,853],{"class":534},[524,2073,2074],{"class":614},"spinnerOverlay",[524,2076,2077],{"class":534},"({})",[524,2079,853],{"class":534},[524,2081,1179],{"class":534},[524,2083,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106,2108,2111,2113,2115,2118,2120],{"class":526,"line":644},[524,2085,1149],{"class":534},[524,2087,286],{"class":876},[524,2089,1094],{"class":604},[524,2091,611],{"class":534},[524,2093,853],{"class":534},[524,2095,904],{"class":551},[524,2097,853],{"class":534},[524,2099,1099],{"class":604},[524,2101,611],{"class":534},[524,2103,853],{"class":534},[524,2105,956],{"class":551},[524,2107,853],{"class":534},[524,2109,2110],{"class":604}," label",[524,2112,611],{"class":534},[524,2114,853],{"class":534},[524,2116,2117],{"class":551},"Loading...",[524,2119,853],{"class":534},[524,2121,1258],{"class":534},[524,2123,2124,2126,2128],{"class":526,"line":660},[524,2125,1735],{"class":534},[524,2127,1152],{"class":876},[524,2129,1179],{"class":534},[524,2131,2132,2134,2136],{"class":526,"line":676},[524,2133,1294],{"class":534},[524,2135,1556],{"class":876},[524,2137,1179],{"class":534},[413,2139,302],{"id":2140},"accessibility",[457,2142,2143,2152,2165],{},[460,2144,2145,2151],{},[421,2146,2147,2148],{},"Always include ",[425,2149,2150],{},"role=\"status\""," on the spinner container to announce loading state to screen readers.",[460,2153,2154,2157,2158,2160,2161,2164],{},[421,2155,2156],{},"Provide descriptive text"," via the ",[425,2159,1277],{}," prop or a visually hidden ",[425,2162,2163],{},"\u003Cspan>"," for screen readers when no visible label is shown.",[460,2166,2167,2173],{},[421,2168,2169,2170],{},"Animation respects ",[425,2171,2172],{},"prefers-reduced-motion",": The design tokens preset automatically disables animations when the user has reduced motion enabled.",[413,2175,2177],{"id":2176},"customization","Customization",[1776,2179,2181],{"id":2180},"overriding-defaults","Overriding Defaults",[515,2183,2185],{"className":517,"code":2184,"filename":513,"language":519,"meta":520,"style":520},"const spinner = useSpinnerRecipe(s, {\n    defaultVariants: { color: 'neutral', size: 'lg' },\n});\n",[425,2186,2187,2204,2239],{"__ignoreMap":520},[524,2188,2189,2191,2193,2195,2197,2200,2202],{"class":526,"line":527},[524,2190,605],{"class":604},[524,2192,632],{"class":538},[524,2194,611],{"class":534},[524,2196,568],{"class":614},[524,2198,2199],{"class":538},"(s",[524,2201,571],{"class":534},[524,2203,871],{"class":534},[524,2205,2206,2209,2212,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232,2234,2236],{"class":526,"line":561},[524,2207,2208],{"class":876},"    defaultVariants",[524,2210,2211],{"class":534},":",[524,2213,535],{"class":534},[524,2215,1094],{"class":876},[524,2217,2211],{"class":534},[524,2219,548],{"class":534},[524,2221,913],{"class":551},[524,2223,555],{"class":534},[524,2225,571],{"class":534},[524,2227,1099],{"class":876},[524,2229,2211],{"class":534},[524,2231,548],{"class":534},[524,2233,956],{"class":551},[524,2235,555],{"class":534},[524,2237,2238],{"class":534}," },\n",[524,2240,2241,2243,2245],{"class":526,"line":595},[524,2242,1164],{"class":534},[524,2244,1070],{"class":538},[524,2246,558],{"class":534},[1776,2248,2250],{"id":2249},"filtering-variants","Filtering Variants",[515,2252,2254],{"className":517,"code":2253,"filename":513,"language":519,"meta":520,"style":520},"const spinner = useSpinnerRecipe(s, {\n    filter: {\n        color: ['primary', 'neutral'],\n    },\n});\n",[425,2255,2256,2272,2281,2310,2315],{"__ignoreMap":520},[524,2257,2258,2260,2262,2264,2266,2268,2270],{"class":526,"line":527},[524,2259,605],{"class":604},[524,2261,632],{"class":538},[524,2263,611],{"class":534},[524,2265,568],{"class":614},[524,2267,2199],{"class":538},[524,2269,571],{"class":534},[524,2271,871],{"class":534},[524,2273,2274,2277,2279],{"class":526,"line":561},[524,2275,2276],{"class":876},"    filter",[524,2278,2211],{"class":534},[524,2280,871],{"class":534},[524,2282,2283,2286,2288,2291,2293,2295,2297,2299,2301,2303,2305,2308],{"class":526,"line":595},[524,2284,2285],{"class":876},"        color",[524,2287,2211],{"class":534},[524,2289,2290],{"class":538}," [",[524,2292,555],{"class":534},[524,2294,885],{"class":551},[524,2296,555],{"class":534},[524,2298,571],{"class":534},[524,2300,548],{"class":534},[524,2302,913],{"class":551},[524,2304,555],{"class":534},[524,2306,2307],{"class":538},"]",[524,2309,1030],{"class":534},[524,2311,2312],{"class":526,"line":601},[524,2313,2314],{"class":534},"    },\n",[524,2316,2317,2319,2321],{"class":526,"line":622},[524,2318,1164],{"class":534},[524,2320,1070],{"class":538},[524,2322,558],{"class":534},[2324,2325,2326,2329],"note",{},[421,2327,2328],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[413,2331,59],{"id":2332},"api-reference",[1776,2334,2336],{"id":2335},"usespinnerrecipes-options",[425,2337,2338],{},"useSpinnerRecipe(s, options?)",[417,2340,2341],{},"Creates the spinner container recipe with color and size variants.",[417,2343,2344],{},[421,2345,2346],{},"Parameters:",[1785,2348,2349,2362],{},[1788,2350,2351],{},[1791,2352,2353,2356,2359],{},[1794,2354,2355],{},"Parameter",[1794,2357,2358],{},"Type",[1794,2360,2361],{},"Description",[1804,2363,2364,2379,2394,2409,2424,2439,2454],{},[1791,2365,2366,2371,2376],{},[1809,2367,2368],{},[425,2369,2370],{},"s",[1809,2372,2373],{},[425,2374,2375],{},"Styleframe",[1809,2377,2378],{},"The Styleframe instance",[1791,2380,2381,2386,2391],{},[1809,2382,2383],{},[425,2384,2385],{},"options",[1809,2387,2388],{},[425,2389,2390],{},"DeepPartial\u003CRecipeConfig>",[1809,2392,2393],{},"Optional overrides for the recipe configuration",[1791,2395,2396,2401,2406],{},[1809,2397,2398],{},[425,2399,2400],{},"options.base",[1809,2402,2403],{},[425,2404,2405],{},"VariantDeclarationsBlock",[1809,2407,2408],{},"Custom base styles",[1791,2410,2411,2416,2421],{},[1809,2412,2413],{},[425,2414,2415],{},"options.variants",[1809,2417,2418],{},[425,2419,2420],{},"Variants",[1809,2422,2423],{},"Custom variant definitions",[1791,2425,2426,2431,2436],{},[1809,2427,2428],{},[425,2429,2430],{},"options.defaultVariants",[1809,2432,2433],{},[425,2434,2435],{},"Record\u003Ckeyof Variants, string>",[1809,2437,2438],{},"Default variant values",[1791,2440,2441,2446,2451],{},[1809,2442,2443],{},[425,2444,2445],{},"options.compoundVariants",[1809,2447,2448],{},[425,2449,2450],{},"CompoundVariant[]",[1809,2452,2453],{},"Custom compound variant definitions",[1791,2455,2456,2461,2466],{},[1809,2457,2458],{},[425,2459,2460],{},"options.filter",[1809,2462,2463],{},[425,2464,2465],{},"Record\u003Cstring, string[]>",[1809,2467,2468],{},"Limit which variant values are generated",[417,2470,2471],{},[421,2472,2473],{},"Variants:",[1785,2475,2476,2489],{},[1788,2477,2478],{},[1791,2479,2480,2483,2486],{},[1794,2481,2482],{},"Variant",[1794,2484,2485],{},"Options",[1794,2487,2488],{},"Default",[1804,2490,2491,2511],{},[1791,2492,2493,2497,2507],{},[1809,2494,2495],{},[425,2496,1583],{},[1809,2498,2499,1586,2501,1586,2503,1586,2505],{},[425,2500,885],{},[425,2502,895],{},[425,2504,904],{},[425,2506,913],{},[1809,2508,2509],{},[425,2510,885],{},[1791,2512,2513,2517,2527],{},[1809,2514,2515],{},[425,2516,1589],{},[1809,2518,2519,1586,2521,1586,2523,1586,2525],{},[425,2520,929],{},[425,2522,938],{},[425,2524,947],{},[425,2526,956],{},[1809,2528,2529],{},[425,2530,947],{},[1776,2532,2534],{"id":2533},"usespinnercirclerecipes-options",[425,2535,2536],{},"useSpinnerCircleRecipe(s, options?)",[417,2538,2539],{},"Creates the SVG spinner recipe with size variants and animation keyframes.",[417,2541,2542],{},[421,2543,2473],{},[1785,2545,2546,2556],{},[1788,2547,2548],{},[1791,2549,2550,2552,2554],{},[1794,2551,2482],{},[1794,2553,2485],{},[1794,2555,2488],{},[1804,2557,2558],{},[1791,2559,2560,2564,2574],{},[1809,2561,2562],{},[425,2563,1589],{},[1809,2565,2566,1586,2568,1586,2570,1586,2572],{},[425,2567,929],{},[425,2569,938],{},[425,2571,947],{},[425,2573,956],{},[1809,2575,2576],{},[425,2577,947],{},[1776,2579,2581],{"id":2580},"usespinneroverlayrecipes-options",[425,2582,2583],{},"useSpinnerOverlayRecipe(s, options?)",[417,2585,2586],{},"Creates the overlay backdrop recipe. No variants — provides a fixed full-screen backdrop.",[417,2588,2589],{},[430,2590,2591],{"href":118},"Learn more about recipes ->",[413,2593,2595],{"id":2594},"best-practices","Best Practices",[457,2597,2598,2605,2611,2629,2639],{},[460,2599,2600,2604],{},[421,2601,1987,2602],{},[425,2603,2150],{}," on the spinner element for accessibility.",[460,2606,2607,2610],{},[421,2608,2609],{},"Provide a label"," for longer loading operations so users know what's happening.",[460,2612,2613,2616,2617,2619,2620,2622,2623,2625,2626,2628],{},[421,2614,2615],{},"Choose the right color",": Use ",[425,2618,885],{}," for brand-colored spinners, ",[425,2621,913],{}," for general use, and ",[425,2624,895],{},"/",[425,2627,904],{}," for specific background contexts.",[460,2630,2631,2634,2635,2638],{},[421,2632,2633],{},"Filter what you don't need",": Pass a ",[425,2636,2637],{},"filter"," option to reduce generated CSS.",[460,2640,2641,2644],{},[421,2642,2643],{},"Use the overlay sparingly",": Full-page overlays block interaction — prefer inline spinners when possible.",[413,2646,2648],{"id":2647},"faq","FAQ",[2650,2651,2652,2668,2685,2692],"accordion",{},[2653,2654,2657,2658,2661,2662,2665,2666,985],"accordion-item",{"icon":2655,"label":2656},"i-lucide-circle-help","How does the SVG spinner animation work?","The spinner uses two CSS keyframe animations: ",[425,2659,2660],{},"spinner-rotate"," for continuous rotation and ",[425,2663,2664],{},"spinner-dash"," for the stroke dash effect that creates the \"chasing\" appearance. These are registered automatically when you call ",[425,2667,436],{},[2653,2669,419,2671,2674,2675,2677,2678,2681,2682,2684],{"icon":2655,"label":2670},"How does color inheritance work?",[425,2672,2673],{},"useSpinnerRecipe"," sets the CSS ",[425,2676,1583],{}," property via compound variants. The SVG circle's ",[425,2679,2680],{},"stroke"," is set to ",[425,2683,1771],{}," via a selector in the spinner circle recipe's setup function. This means the spinner color automatically inherits from the container — no extra wiring needed.",[2653,2686,2688,2689,2691],{"icon":2655,"label":2687},"How does filtering affect compound variants?","When you use the ",[425,2690,2637],{}," option, compound variants that reference filtered-out values are automatically removed. Default variants are also adjusted if they reference a removed value.",[2653,2693,2695,2709],{"icon":2655,"label":2694},"Can I use the overlay with a container instead of full-page?",[417,2696,2697,2698,2701,2702,2705,2706,2211],{},"Yes! Override the overlay's ",[425,2699,2700],{},"position"," to ",[425,2703,2704],{},"absolute"," and ensure the parent container has ",[425,2707,2708],{},"position: relative",[515,2710,2712],{"className":517,"code":2711,"language":519,"meta":520,"style":520},"const spinnerOverlay = useSpinnerOverlayRecipe(s, {\n    base: { position: 'absolute' },\n});\n",[425,2713,2714,2730,2752],{"__ignoreMap":520},[524,2715,2716,2718,2720,2722,2724,2726,2728],{"class":526,"line":527},[524,2717,605],{"class":604},[524,2719,665],{"class":538},[524,2721,611],{"class":534},[524,2723,579],{"class":614},[524,2725,2199],{"class":538},[524,2727,571],{"class":534},[524,2729,871],{"class":534},[524,2731,2732,2735,2737,2739,2742,2744,2746,2748,2750],{"class":526,"line":561},[524,2733,2734],{"class":876},"    base",[524,2736,2211],{"class":534},[524,2738,535],{"class":534},[524,2740,2741],{"class":876}," position",[524,2743,2211],{"class":534},[524,2745,548],{"class":534},[524,2747,2704],{"class":551},[524,2749,555],{"class":534},[524,2751,2238],{"class":534},[524,2753,2754,2756,2758],{"class":526,"line":595},[524,2755,1164],{"class":534},[524,2757,1070],{"class":538},[524,2759,558],{"class":534},[2761,2762,2763],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":520,"searchDepth":561,"depth":561,"links":2765},[2766,2767,2768,2769,2772,2773,2774,2775,2776,2780,2785,2786],{"id":415,"depth":561,"text":64},{"id":451,"depth":561,"text":452},{"id":492,"depth":561,"text":493},{"id":1759,"depth":561,"text":181,"children":2770},[2771],{"id":1778,"depth":595,"text":1779},{"id":1873,"depth":561,"text":1874},{"id":1277,"depth":561,"text":1971},{"id":1983,"depth":561,"text":1984},{"id":2140,"depth":561,"text":302},{"id":2176,"depth":561,"text":2177,"children":2777},[2778,2779],{"id":2180,"depth":595,"text":2181},{"id":2249,"depth":595,"text":2250},{"id":2332,"depth":561,"text":59,"children":2781},[2782,2783,2784],{"id":2335,"depth":595,"text":2338},{"id":2533,"depth":595,"text":2536},{"id":2580,"depth":595,"text":2583},{"id":2594,"depth":561,"text":2595},{"id":2647,"depth":561,"text":2648},"A loading spinner component with color, size, and optional overlay — built as a multi-part recipe system with SVG-based animation.",null,{},{"title":286,"description":2787},{"loc":287},"v7l-AVidDN2AQOBdiTz6j5LP-1SVdBxCoT3gd7hCCaI",[2794,2796],{"title":282,"path":283,"stem":284,"description":2795,"children":-1},"A status indicator component positioned at the corner of an element. Supports multiple colors, visual styles, sizes, positions, and inset mode through the recipe system.",{"title":64,"path":151,"stem":152,"description":2797,"icon":65,"children":-1},"Explore Styleframe's comprehensive design token system. Create consistent, scalable design systems with composable functions for colors, typography, spacing, and more.",1776621132608]