[{"data":1,"prerenderedAt":6168},["ShallowReactive",2],{"navigation_en":3,"-docs-getting-started-integrations-storybook":539,"-docs-getting-started-integrations-storybook-surround":6163},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"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],{"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/06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","/docs/getting-started/licensing","docs/getting-started/07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","/docs/getting-started/tooling","docs/getting-started/tooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/tooling/01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/tooling/02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","/docs/getting-started/integrations","docs/getting-started/integrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","/docs/getting-started/integrations/dtcg","docs/getting-started/integrations/01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","/docs/getting-started/integrations/figma-plugin","docs/getting-started/integrations/02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","/docs/getting-started/integrations/storybook","docs/getting-started/integrations/03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","/docs/api","docs/api/00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":141,"path":142,"stem":143},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs/api/14.imports",[163,236,330,421,494],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[168,169,174],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":146,"icon":149,"defaultOpen":7,"path":175,"stem":176,"children":177,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[178,182,186,190,194,198,202,206,220,224,228,232],{"title":179,"path":180,"stem":181,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":183,"path":184,"stem":185,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":187,"path":188,"stem":189,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":191,"path":192,"stem":193,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":195,"path":196,"stem":197,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":199,"path":200,"stem":201,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":203,"path":204,"stem":205,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":207,"path":208,"stem":209,"children":210,"icon":7,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[211,212,216],{"title":78,"path":208,"stem":209},{"title":213,"path":214,"stem":215},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":217,"path":218,"stem":219},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",{"title":221,"path":222,"stem":223,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":225,"path":226,"stem":227,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":229,"path":230,"stem":231,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":233,"path":234,"stem":235,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":237,"path":238,"stem":239,"children":240,"icon":7},"Elements","/docs/theme/elements","docs/theme/elements/00.index",[241,242,246],{"title":78,"path":238,"stem":239,"icon":79},{"title":243,"path":244,"stem":245,"icon":173},"Preset","/docs/theme/elements/preset","docs/theme/elements/01.preset",{"title":146,"icon":149,"defaultOpen":7,"path":247,"stem":248,"children":249,"page":7},"/docs/theme/elements/composables","docs/theme/elements/02.composables",[250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326],{"title":251,"path":252,"stem":253,"icon":7},"Abbreviation","/docs/theme/elements/composables/abbreviation","docs/theme/elements/02.composables/00.abbreviation",{"title":255,"path":256,"stem":257,"icon":7},"Address","/docs/theme/elements/composables/address","docs/theme/elements/02.composables/01.address",{"title":259,"path":260,"stem":261,"icon":7},"Body","/docs/theme/elements/composables/body","docs/theme/elements/02.composables/02.body",{"title":263,"path":264,"stem":265,"icon":7},"Caption","/docs/theme/elements/composables/caption","docs/theme/elements/02.composables/03.caption",{"title":267,"path":268,"stem":269,"icon":7},"Code","/docs/theme/elements/composables/code","docs/theme/elements/02.composables/04.code",{"title":271,"path":272,"stem":273,"icon":7},"Definition Lists","/docs/theme/elements/composables/definition-lists","docs/theme/elements/02.composables/05.definition-lists",{"title":275,"path":276,"stem":277,"icon":7},"Focus","/docs/theme/elements/composables/focus","docs/theme/elements/02.composables/06.focus",{"title":279,"path":280,"stem":281,"icon":7},"Headings","/docs/theme/elements/composables/headings","docs/theme/elements/02.composables/07.headings",{"title":283,"path":284,"stem":285,"icon":7},"Horizontal Rule","/docs/theme/elements/composables/horizontal-rule","docs/theme/elements/02.composables/08.horizontal-rule",{"title":287,"path":288,"stem":289,"icon":7},"Iframe","/docs/theme/elements/composables/iframe","docs/theme/elements/02.composables/09.iframe",{"title":291,"path":292,"stem":293,"icon":7},"Image","/docs/theme/elements/composables/image","docs/theme/elements/02.composables/10.image",{"title":295,"path":296,"stem":297,"icon":7},"Kbd","/docs/theme/elements/composables/kbd","docs/theme/elements/02.composables/11.kbd",{"title":299,"path":300,"stem":301,"icon":7},"Legend","/docs/theme/elements/composables/legend","docs/theme/elements/02.composables/12.legend",{"title":303,"path":304,"stem":305,"icon":7},"Links","/docs/theme/elements/composables/links","docs/theme/elements/02.composables/13.links",{"title":307,"path":308,"stem":309,"icon":7},"Lists","/docs/theme/elements/composables/lists","docs/theme/elements/02.composables/14.lists",{"title":311,"path":312,"stem":313,"icon":7},"Mark","/docs/theme/elements/composables/mark","docs/theme/elements/02.composables/15.mark",{"title":315,"path":316,"stem":317,"icon":7},"Output","/docs/theme/elements/composables/output","docs/theme/elements/02.composables/16.output",{"title":319,"path":320,"stem":321,"icon":7},"Paragraphs","/docs/theme/elements/composables/paragraphs","docs/theme/elements/02.composables/17.paragraphs",{"title":323,"path":324,"stem":325,"icon":7},"Selection","/docs/theme/elements/composables/selection","docs/theme/elements/02.composables/18.selection",{"title":327,"path":328,"stem":329,"icon":7},"Summary","/docs/theme/elements/composables/summary","docs/theme/elements/02.composables/19.summary",{"title":331,"path":332,"stem":333,"children":334,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[335,336],{"title":78,"path":332,"stem":333,"icon":79},{"title":146,"icon":149,"defaultOpen":337,"path":338,"stem":339,"children":340,"page":7},true,"/docs/theme/components/composables","docs/theme/components/02.composables",[341,345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417],{"title":342,"path":343,"stem":344},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":346,"path":347,"stem":348},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":350,"path":351,"stem":352},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":354,"path":355,"stem":356},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":358,"path":359,"stem":360},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":362,"path":363,"stem":364},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":366,"path":367,"stem":368},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":370,"path":371,"stem":372},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":374,"path":375,"stem":376},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":378,"path":379,"stem":380},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":382,"path":383,"stem":384},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":386,"path":387,"stem":388},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":390,"path":391,"stem":392},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":394,"path":395,"stem":396},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":398,"path":399,"stem":400},"Dropdown","/docs/theme/components/composables/dropdown","docs/theme/components/02.composables/14.dropdown",{"title":402,"path":403,"stem":404},"Hamburger Menu","/docs/theme/components/composables/hamburger-menu","docs/theme/components/02.composables/14.hamburger-menu",{"title":406,"path":407,"stem":408},"Breadcrumb","/docs/theme/components/composables/breadcrumb","docs/theme/components/02.composables/15.breadcrumb",{"title":410,"path":411,"stem":412},"Media","/docs/theme/components/composables/media","docs/theme/components/02.composables/15.media",{"title":414,"path":415,"stem":416},"PageHero","/docs/theme/components/composables/page-hero","docs/theme/components/02.composables/15.page-hero",{"title":418,"path":419,"stem":420},"Pagination","/docs/theme/components/composables/pagination","docs/theme/components/02.composables/15.pagination",{"title":116,"path":422,"stem":423,"children":424,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[425,426,429],{"title":78,"path":422,"stem":423,"icon":79},{"title":170,"path":427,"stem":428,"icon":173},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":430,"stem":431,"children":432,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[433,437,441,445,448,452,456,460,464,468,472,475,479,483,487,491],{"title":434,"path":435,"stem":436,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":438,"path":439,"stem":440,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":442,"path":443,"stem":444,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":183,"path":446,"stem":447,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":449,"path":450,"stem":451,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":453,"path":454,"stem":455,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":457,"path":458,"stem":459,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":461,"path":462,"stem":463,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":465,"path":466,"stem":467,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":469,"path":470,"stem":471,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":225,"path":473,"stem":474,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":476,"path":477,"stem":478,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":480,"path":481,"stem":482,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":484,"path":485,"stem":486,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":488,"path":489,"stem":490,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":229,"path":492,"stem":493,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":495,"path":496,"stem":497,"children":498,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[499,500,503],{"title":78,"path":496,"stem":497,"icon":79},{"title":170,"path":501,"stem":502,"icon":173},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":504,"stem":505,"children":506,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[507,511,515,519,523,527,531,535],{"title":508,"path":509,"stem":510,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":512,"path":513,"stem":514,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":516,"path":517,"stem":518,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":520,"path":521,"stem":522,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":524,"path":525,"stem":526,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":528,"path":529,"stem":530,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":532,"path":533,"stem":534,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":536,"path":537,"stem":538,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":540,"title":67,"body":541,"description":6156,"extension":2808,"links":6157,"meta":6158,"navigation":6159,"path":68,"seo":6160,"sitemap":6161,"stem":69,"__hash__":6162},"docs_gettingStarted/docs/getting-started/integrations/03.storybook.md",{"type":542,"value":543,"toc":6137},"minimark",[544,548,560,566,617,621,624,640,643,646,887,891,894,898,2390,2400,2402,2406,2416,2420,2430,2528,2532,2542,3462,3466,3476,5429,5436,5438,5442,5448,5664,5677,5740,5800,5811,5819,5821,5825,5873,5875,5879,6133],[545,546,78],"h2",{"id":547},"overview",[549,550,551,552,559],"p",{},"Styleframe integrates with ",[553,554,67],"a",{"href":555,"rel":556,"target":558},"https://storybook.js.org/",[557],"nofollow","_blank"," so you can develop, document, and test your design system components in isolation. The Styleframe Vite plugin handles all the wiring — your design tokens, utility classes, and recipe functions are available in every story automatically.",[549,561,562],{},[563,564,565],"strong",{},"Key features:",[567,568,569,581,587,597,607],"ul",{},[570,571,572,575,576,580],"li",{},[563,573,574],{},"Zero-config styling",": Import ",[577,578,579],"code",{},"virtual:styleframe.css"," once and all tokens, utilities, and recipes are available",[570,582,583,586],{},[563,584,585],{},"Type-safe recipes",": Component stories get full autocompletion for recipe variant props",[570,588,589,592,593,596],{},[563,590,591],{},"Co-located styles",": Each component's ",[577,594,595],{},"*.styleframe.ts"," file is discovered and compiled automatically",[570,598,599,602,603,606],{},[563,600,601],{},"Dark mode support",": Toggle themes in the Storybook UI with ",[577,604,605],{},"data-theme"," attributes",[570,608,609,612,613,616],{},[563,610,611],{},"Framework-agnostic tokens",": The same ",[577,614,615],{},"styleframe.config.ts"," works with Vue, React, or vanilla HTML stories",[545,618,620],{"id":619},"prerequisites","Prerequisites",[549,622,623],{},"Before you begin, ensure you have:",[567,625,626,634,637],{},[570,627,628,629,633],{},"A Styleframe project with design tokens defined (",[553,630,632],{"href":631},"/docs/getting-started/installation/vite","Installation Guide",")",[570,635,636],{},"Node.js 18+",[570,638,639],{},"Storybook 10+",[545,641,17],{"id":642},"installation",[549,644,645],{},"Install Storybook and the framework adapter for your project:",[647,648,649,741,814],"framework-switcher",{},[650,651,653],"template",{"v-slot:vue":652},"",[654,655,656,686,704,723],"code-group",{},[657,658,663],"pre",{"className":659,"code":660,"filename":661,"language":662,"meta":652,"style":652},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D storybook @storybook/vue3-vite\n","pnpm","bash",[577,664,665],{"__ignoreMap":652},[666,667,670,673,677,680,683],"span",{"class":668,"line":669},"line",1,[666,671,661],{"class":672},"sBMFI",[666,674,676],{"class":675},"sfazB"," add",[666,678,679],{"class":675}," -D",[666,681,682],{"class":675}," storybook",[666,684,685],{"class":675}," @storybook/vue3-vite\n",[657,687,690],{"className":659,"code":688,"filename":689,"language":662,"meta":652,"style":652},"yarn add -D storybook @storybook/vue3-vite\n","yarn",[577,691,692],{"__ignoreMap":652},[666,693,694,696,698,700,702],{"class":668,"line":669},[666,695,689],{"class":672},[666,697,676],{"class":675},[666,699,679],{"class":675},[666,701,682],{"class":675},[666,703,685],{"class":675},[657,705,708],{"className":659,"code":706,"filename":707,"language":662,"meta":652,"style":652},"npm install -D storybook @storybook/vue3-vite\n","npm",[577,709,710],{"__ignoreMap":652},[666,711,712,714,717,719,721],{"class":668,"line":669},[666,713,707],{"class":672},[666,715,716],{"class":675}," install",[666,718,679],{"class":675},[666,720,682],{"class":675},[666,722,685],{"class":675},[657,724,727],{"className":659,"code":725,"filename":726,"language":662,"meta":652,"style":652},"bun add -D storybook @storybook/vue3-vite\n","bun",[577,728,729],{"__ignoreMap":652},[666,730,731,733,735,737,739],{"class":668,"line":669},[666,732,726],{"class":672},[666,734,676],{"class":675},[666,736,679],{"class":675},[666,738,682],{"class":675},[666,740,685],{"class":675},[650,742,743],{"v-slot:react":652},[654,744,745,763,780,797],{},[657,746,748],{"className":659,"code":747,"filename":661,"language":662,"meta":652,"style":652},"pnpm add -D storybook @storybook/react-vite\n",[577,749,750],{"__ignoreMap":652},[666,751,752,754,756,758,760],{"class":668,"line":669},[666,753,661],{"class":672},[666,755,676],{"class":675},[666,757,679],{"class":675},[666,759,682],{"class":675},[666,761,762],{"class":675}," @storybook/react-vite\n",[657,764,766],{"className":659,"code":765,"filename":689,"language":662,"meta":652,"style":652},"yarn add -D storybook @storybook/react-vite\n",[577,767,768],{"__ignoreMap":652},[666,769,770,772,774,776,778],{"class":668,"line":669},[666,771,689],{"class":672},[666,773,676],{"class":675},[666,775,679],{"class":675},[666,777,682],{"class":675},[666,779,762],{"class":675},[657,781,783],{"className":659,"code":782,"filename":707,"language":662,"meta":652,"style":652},"npm install -D storybook @storybook/react-vite\n",[577,784,785],{"__ignoreMap":652},[666,786,787,789,791,793,795],{"class":668,"line":669},[666,788,707],{"class":672},[666,790,716],{"class":675},[666,792,679],{"class":675},[666,794,682],{"class":675},[666,796,762],{"class":675},[657,798,800],{"className":659,"code":799,"filename":726,"language":662,"meta":652,"style":652},"bun add -D storybook @storybook/react-vite\n",[577,801,802],{"__ignoreMap":652},[666,803,804,806,808,810,812],{"class":668,"line":669},[666,805,726],{"class":672},[666,807,676],{"class":675},[666,809,679],{"class":675},[666,811,682],{"class":675},[666,813,762],{"class":675},[650,815,816],{"v-slot:other":652},[654,817,818,836,853,870],{},[657,819,821],{"className":659,"code":820,"filename":661,"language":662,"meta":652,"style":652},"pnpm add -D storybook @storybook/html-vite\n",[577,822,823],{"__ignoreMap":652},[666,824,825,827,829,831,833],{"class":668,"line":669},[666,826,661],{"class":672},[666,828,676],{"class":675},[666,830,679],{"class":675},[666,832,682],{"class":675},[666,834,835],{"class":675}," @storybook/html-vite\n",[657,837,839],{"className":659,"code":838,"filename":689,"language":662,"meta":652,"style":652},"yarn add -D storybook @storybook/html-vite\n",[577,840,841],{"__ignoreMap":652},[666,842,843,845,847,849,851],{"class":668,"line":669},[666,844,689],{"class":672},[666,846,676],{"class":675},[666,848,679],{"class":675},[666,850,682],{"class":675},[666,852,835],{"class":675},[657,854,856],{"className":659,"code":855,"filename":707,"language":662,"meta":652,"style":652},"npm install -D storybook @storybook/html-vite\n",[577,857,858],{"__ignoreMap":652},[666,859,860,862,864,866,868],{"class":668,"line":669},[666,861,707],{"class":672},[666,863,716],{"class":675},[666,865,679],{"class":675},[666,867,682],{"class":675},[666,869,835],{"class":675},[657,871,873],{"className":659,"code":872,"filename":726,"language":662,"meta":652,"style":652},"bun add -D storybook @storybook/html-vite\n",[577,874,875],{"__ignoreMap":652},[666,876,877,879,881,883,885],{"class":668,"line":669},[666,878,726],{"class":672},[666,880,676],{"class":675},[666,882,679],{"class":675},[666,884,682],{"class":675},[666,886,835],{"class":675},[888,889,890],"tip",{},"If you already have Storybook set up, you only need to follow the steps below to add Styleframe support. The framework adapter should already be installed.",[892,893],"hr",{},[545,895,897],{"id":896},"setup","Setup",[899,900,901,906,912,1119,1123,1134,1642,1646,1653,2050,2054,2061],"steps",{},[902,903,905],"h3",{"id":904},"create-a-styleframe-config","Create a Styleframe config",[549,907,908,909,911],{},"If you don't have one yet, create a ",[577,910,615],{}," at your project root. This is the single source of truth for your design system.",[657,913,917],{"className":914,"code":915,"filename":615,"language":916,"meta":652,"style":652},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n    useDesignTokensPreset,\n    useGlobalPreset,\n    useModifiersPreset,\n    useSanitizePreset,\n    useUtilitiesPreset,\n} from '@styleframe/theme';\nimport { styleframe } from 'styleframe';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseSanitizePreset(s);\nuseGlobalPreset(s);\nuseUtilitiesPreset(s);\nuseModifiersPreset(s);\n\nexport default s;\n","ts",[577,918,919,929,939,947,955,963,971,992,1017,1023,1044,1049,1060,1070,1080,1090,1100,1105],{"__ignoreMap":652},[666,920,921,925],{"class":668,"line":669},[666,922,924],{"class":923},"s7zQu","import",[666,926,928],{"class":927},"sMK4o"," {\n",[666,930,932,936],{"class":668,"line":931},2,[666,933,935],{"class":934},"sTEyZ","    useDesignTokensPreset",[666,937,938],{"class":927},",\n",[666,940,942,945],{"class":668,"line":941},3,[666,943,944],{"class":934},"    useGlobalPreset",[666,946,938],{"class":927},[666,948,950,953],{"class":668,"line":949},4,[666,951,952],{"class":934},"    useModifiersPreset",[666,954,938],{"class":927},[666,956,958,961],{"class":668,"line":957},5,[666,959,960],{"class":934},"    useSanitizePreset",[666,962,938],{"class":927},[666,964,966,969],{"class":668,"line":965},6,[666,967,968],{"class":934},"    useUtilitiesPreset",[666,970,938],{"class":927},[666,972,974,977,980,983,986,989],{"class":668,"line":973},7,[666,975,976],{"class":927},"}",[666,978,979],{"class":923}," from",[666,981,982],{"class":927}," '",[666,984,985],{"class":675},"@styleframe/theme",[666,987,988],{"class":927},"'",[666,990,991],{"class":927},";\n",[666,993,995,997,1000,1003,1006,1008,1010,1013,1015],{"class":668,"line":994},8,[666,996,924],{"class":923},[666,998,999],{"class":927}," {",[666,1001,1002],{"class":934}," styleframe",[666,1004,1005],{"class":927}," }",[666,1007,979],{"class":923},[666,1009,982],{"class":927},[666,1011,1012],{"class":675},"styleframe",[666,1014,988],{"class":927},[666,1016,991],{"class":927},[666,1018,1020],{"class":668,"line":1019},9,[666,1021,1022],{"emptyLinePlaceholder":337},"\n",[666,1024,1026,1030,1033,1036,1039,1042],{"class":668,"line":1025},10,[666,1027,1029],{"class":1028},"spNyl","const",[666,1031,1032],{"class":934}," s ",[666,1034,1035],{"class":927},"=",[666,1037,1002],{"class":1038},"s2Zo4",[666,1040,1041],{"class":934},"()",[666,1043,991],{"class":927},[666,1045,1047],{"class":668,"line":1046},11,[666,1048,1022],{"emptyLinePlaceholder":337},[666,1050,1052,1055,1058],{"class":668,"line":1051},12,[666,1053,1054],{"class":1038},"useDesignTokensPreset",[666,1056,1057],{"class":934},"(s)",[666,1059,991],{"class":927},[666,1061,1063,1066,1068],{"class":668,"line":1062},13,[666,1064,1065],{"class":1038},"useSanitizePreset",[666,1067,1057],{"class":934},[666,1069,991],{"class":927},[666,1071,1073,1076,1078],{"class":668,"line":1072},14,[666,1074,1075],{"class":1038},"useGlobalPreset",[666,1077,1057],{"class":934},[666,1079,991],{"class":927},[666,1081,1083,1086,1088],{"class":668,"line":1082},15,[666,1084,1085],{"class":1038},"useUtilitiesPreset",[666,1087,1057],{"class":934},[666,1089,991],{"class":927},[666,1091,1093,1096,1098],{"class":668,"line":1092},16,[666,1094,1095],{"class":1038},"useModifiersPreset",[666,1097,1057],{"class":934},[666,1099,991],{"class":927},[666,1101,1103],{"class":668,"line":1102},17,[666,1104,1022],{"emptyLinePlaceholder":337},[666,1106,1108,1111,1114,1117],{"class":668,"line":1107},18,[666,1109,1110],{"class":923},"export",[666,1112,1113],{"class":923}," default",[666,1115,1116],{"class":934}," s",[666,1118,991],{"class":927},[902,1120,1122],{"id":1121},"configure-vite-with-the-styleframe-plugin","Configure Vite with the Styleframe plugin",[549,1124,1125,1126,1129,1130,1133],{},"Add the Styleframe Vite plugin to your ",[577,1127,1128],{},"vite.config.ts",". The ",[577,1131,1132],{},"scanner.content"," option tells the plugin which files to scan for utility class usage.",[647,1135,1136,1327,1498],{},[650,1137,1138],{"v-slot:vue":652},[657,1139,1141],{"className":914,"code":1140,"filename":1128,"language":916,"meta":652,"style":652},"import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport styleframe from 'styleframe/plugin/vite';\n\nexport default defineConfig({\n    plugins: [\n        styleframe({\n            scanner: {\n                content: [\n                    './stories/**/*.stories.{ts,tsx}',\n                    './src/**/*.{vue,ts,tsx}',\n                ],\n            },\n        }),\n        vue(),\n    ],\n});\n",[577,1142,1143,1165,1184,1202,1206,1220,1232,1241,1250,1259,1271,1282,1289,1294,1303,1312,1319],{"__ignoreMap":652},[666,1144,1145,1147,1149,1152,1154,1156,1158,1161,1163],{"class":668,"line":669},[666,1146,924],{"class":923},[666,1148,999],{"class":927},[666,1150,1151],{"class":934}," defineConfig",[666,1153,1005],{"class":927},[666,1155,979],{"class":923},[666,1157,982],{"class":927},[666,1159,1160],{"class":675},"vite",[666,1162,988],{"class":927},[666,1164,991],{"class":927},[666,1166,1167,1169,1172,1175,1177,1180,1182],{"class":668,"line":931},[666,1168,924],{"class":923},[666,1170,1171],{"class":934}," vue ",[666,1173,1174],{"class":923},"from",[666,1176,982],{"class":927},[666,1178,1179],{"class":675},"@vitejs/plugin-vue",[666,1181,988],{"class":927},[666,1183,991],{"class":927},[666,1185,1186,1188,1191,1193,1195,1198,1200],{"class":668,"line":941},[666,1187,924],{"class":923},[666,1189,1190],{"class":934}," styleframe ",[666,1192,1174],{"class":923},[666,1194,982],{"class":927},[666,1196,1197],{"class":675},"styleframe/plugin/vite",[666,1199,988],{"class":927},[666,1201,991],{"class":927},[666,1203,1204],{"class":668,"line":949},[666,1205,1022],{"emptyLinePlaceholder":337},[666,1207,1208,1210,1212,1214,1217],{"class":668,"line":957},[666,1209,1110],{"class":923},[666,1211,1113],{"class":923},[666,1213,1151],{"class":1038},[666,1215,1216],{"class":934},"(",[666,1218,1219],{"class":927},"{\n",[666,1221,1222,1226,1229],{"class":668,"line":965},[666,1223,1225],{"class":1224},"swJcz","    plugins",[666,1227,1228],{"class":927},":",[666,1230,1231],{"class":934}," [\n",[666,1233,1234,1237,1239],{"class":668,"line":973},[666,1235,1236],{"class":1038},"        styleframe",[666,1238,1216],{"class":934},[666,1240,1219],{"class":927},[666,1242,1243,1246,1248],{"class":668,"line":994},[666,1244,1245],{"class":1224},"            scanner",[666,1247,1228],{"class":927},[666,1249,928],{"class":927},[666,1251,1252,1255,1257],{"class":668,"line":1019},[666,1253,1254],{"class":1224},"                content",[666,1256,1228],{"class":927},[666,1258,1231],{"class":934},[666,1260,1261,1264,1267,1269],{"class":668,"line":1025},[666,1262,1263],{"class":927},"                    '",[666,1265,1266],{"class":675},"./stories/**/*.stories.{ts,tsx}",[666,1268,988],{"class":927},[666,1270,938],{"class":927},[666,1272,1273,1275,1278,1280],{"class":668,"line":1046},[666,1274,1263],{"class":927},[666,1276,1277],{"class":675},"./src/**/*.{vue,ts,tsx}",[666,1279,988],{"class":927},[666,1281,938],{"class":927},[666,1283,1284,1287],{"class":668,"line":1051},[666,1285,1286],{"class":934},"                ]",[666,1288,938],{"class":927},[666,1290,1291],{"class":668,"line":1062},[666,1292,1293],{"class":927},"            },\n",[666,1295,1296,1299,1301],{"class":668,"line":1072},[666,1297,1298],{"class":927},"        }",[666,1300,633],{"class":934},[666,1302,938],{"class":927},[666,1304,1305,1308,1310],{"class":668,"line":1082},[666,1306,1307],{"class":1038},"        vue",[666,1309,1041],{"class":934},[666,1311,938],{"class":927},[666,1313,1314,1317],{"class":668,"line":1092},[666,1315,1316],{"class":934},"    ]",[666,1318,938],{"class":927},[666,1320,1321,1323,1325],{"class":668,"line":1102},[666,1322,976],{"class":927},[666,1324,633],{"class":934},[666,1326,991],{"class":927},[650,1328,1329],{"v-slot:react":652},[657,1330,1332],{"className":914,"code":1331,"filename":1128,"language":916,"meta":652,"style":652},"import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport styleframe from 'styleframe/plugin/vite';\n\nexport default defineConfig({\n    plugins: [\n        styleframe({\n            scanner: {\n                content: [\n                    './stories/**/*.stories.{ts,tsx}',\n                    './src/**/*.{ts,tsx}',\n                ],\n            },\n        }),\n        react(),\n    ],\n});\n",[577,1333,1334,1354,1372,1388,1392,1404,1412,1420,1428,1436,1446,1457,1463,1467,1475,1484,1490],{"__ignoreMap":652},[666,1335,1336,1338,1340,1342,1344,1346,1348,1350,1352],{"class":668,"line":669},[666,1337,924],{"class":923},[666,1339,999],{"class":927},[666,1341,1151],{"class":934},[666,1343,1005],{"class":927},[666,1345,979],{"class":923},[666,1347,982],{"class":927},[666,1349,1160],{"class":675},[666,1351,988],{"class":927},[666,1353,991],{"class":927},[666,1355,1356,1358,1361,1363,1365,1368,1370],{"class":668,"line":931},[666,1357,924],{"class":923},[666,1359,1360],{"class":934}," react ",[666,1362,1174],{"class":923},[666,1364,982],{"class":927},[666,1366,1367],{"class":675},"@vitejs/plugin-react",[666,1369,988],{"class":927},[666,1371,991],{"class":927},[666,1373,1374,1376,1378,1380,1382,1384,1386],{"class":668,"line":941},[666,1375,924],{"class":923},[666,1377,1190],{"class":934},[666,1379,1174],{"class":923},[666,1381,982],{"class":927},[666,1383,1197],{"class":675},[666,1385,988],{"class":927},[666,1387,991],{"class":927},[666,1389,1390],{"class":668,"line":949},[666,1391,1022],{"emptyLinePlaceholder":337},[666,1393,1394,1396,1398,1400,1402],{"class":668,"line":957},[666,1395,1110],{"class":923},[666,1397,1113],{"class":923},[666,1399,1151],{"class":1038},[666,1401,1216],{"class":934},[666,1403,1219],{"class":927},[666,1405,1406,1408,1410],{"class":668,"line":965},[666,1407,1225],{"class":1224},[666,1409,1228],{"class":927},[666,1411,1231],{"class":934},[666,1413,1414,1416,1418],{"class":668,"line":973},[666,1415,1236],{"class":1038},[666,1417,1216],{"class":934},[666,1419,1219],{"class":927},[666,1421,1422,1424,1426],{"class":668,"line":994},[666,1423,1245],{"class":1224},[666,1425,1228],{"class":927},[666,1427,928],{"class":927},[666,1429,1430,1432,1434],{"class":668,"line":1019},[666,1431,1254],{"class":1224},[666,1433,1228],{"class":927},[666,1435,1231],{"class":934},[666,1437,1438,1440,1442,1444],{"class":668,"line":1025},[666,1439,1263],{"class":927},[666,1441,1266],{"class":675},[666,1443,988],{"class":927},[666,1445,938],{"class":927},[666,1447,1448,1450,1453,1455],{"class":668,"line":1046},[666,1449,1263],{"class":927},[666,1451,1452],{"class":675},"./src/**/*.{ts,tsx}",[666,1454,988],{"class":927},[666,1456,938],{"class":927},[666,1458,1459,1461],{"class":668,"line":1051},[666,1460,1286],{"class":934},[666,1462,938],{"class":927},[666,1464,1465],{"class":668,"line":1062},[666,1466,1293],{"class":927},[666,1468,1469,1471,1473],{"class":668,"line":1072},[666,1470,1298],{"class":927},[666,1472,633],{"class":934},[666,1474,938],{"class":927},[666,1476,1477,1480,1482],{"class":668,"line":1082},[666,1478,1479],{"class":1038},"        react",[666,1481,1041],{"class":934},[666,1483,938],{"class":927},[666,1485,1486,1488],{"class":668,"line":1092},[666,1487,1316],{"class":934},[666,1489,938],{"class":927},[666,1491,1492,1494,1496],{"class":668,"line":1102},[666,1493,976],{"class":927},[666,1495,633],{"class":934},[666,1497,991],{"class":927},[650,1499,1500],{"v-slot:other":652},[657,1501,1503],{"className":914,"code":1502,"filename":1128,"language":916,"meta":652,"style":652},"import { defineConfig } from 'vite';\nimport styleframe from 'styleframe/plugin/vite';\n\nexport default defineConfig({\n    plugins: [\n        styleframe({\n            scanner: {\n                content: [\n                    './stories/**/*.stories.{ts,tsx}',\n                    './src/**/*.{ts,tsx,html}',\n                ],\n            },\n        }),\n    ],\n});\n",[577,1504,1505,1525,1541,1545,1557,1565,1573,1581,1589,1599,1610,1616,1620,1628,1634],{"__ignoreMap":652},[666,1506,1507,1509,1511,1513,1515,1517,1519,1521,1523],{"class":668,"line":669},[666,1508,924],{"class":923},[666,1510,999],{"class":927},[666,1512,1151],{"class":934},[666,1514,1005],{"class":927},[666,1516,979],{"class":923},[666,1518,982],{"class":927},[666,1520,1160],{"class":675},[666,1522,988],{"class":927},[666,1524,991],{"class":927},[666,1526,1527,1529,1531,1533,1535,1537,1539],{"class":668,"line":931},[666,1528,924],{"class":923},[666,1530,1190],{"class":934},[666,1532,1174],{"class":923},[666,1534,982],{"class":927},[666,1536,1197],{"class":675},[666,1538,988],{"class":927},[666,1540,991],{"class":927},[666,1542,1543],{"class":668,"line":941},[666,1544,1022],{"emptyLinePlaceholder":337},[666,1546,1547,1549,1551,1553,1555],{"class":668,"line":949},[666,1548,1110],{"class":923},[666,1550,1113],{"class":923},[666,1552,1151],{"class":1038},[666,1554,1216],{"class":934},[666,1556,1219],{"class":927},[666,1558,1559,1561,1563],{"class":668,"line":957},[666,1560,1225],{"class":1224},[666,1562,1228],{"class":927},[666,1564,1231],{"class":934},[666,1566,1567,1569,1571],{"class":668,"line":965},[666,1568,1236],{"class":1038},[666,1570,1216],{"class":934},[666,1572,1219],{"class":927},[666,1574,1575,1577,1579],{"class":668,"line":973},[666,1576,1245],{"class":1224},[666,1578,1228],{"class":927},[666,1580,928],{"class":927},[666,1582,1583,1585,1587],{"class":668,"line":994},[666,1584,1254],{"class":1224},[666,1586,1228],{"class":927},[666,1588,1231],{"class":934},[666,1590,1591,1593,1595,1597],{"class":668,"line":1019},[666,1592,1263],{"class":927},[666,1594,1266],{"class":675},[666,1596,988],{"class":927},[666,1598,938],{"class":927},[666,1600,1601,1603,1606,1608],{"class":668,"line":1025},[666,1602,1263],{"class":927},[666,1604,1605],{"class":675},"./src/**/*.{ts,tsx,html}",[666,1607,988],{"class":927},[666,1609,938],{"class":927},[666,1611,1612,1614],{"class":668,"line":1046},[666,1613,1286],{"class":934},[666,1615,938],{"class":927},[666,1617,1618],{"class":668,"line":1051},[666,1619,1293],{"class":927},[666,1621,1622,1624,1626],{"class":668,"line":1062},[666,1623,1298],{"class":927},[666,1625,633],{"class":934},[666,1627,938],{"class":927},[666,1629,1630,1632],{"class":668,"line":1072},[666,1631,1316],{"class":934},[666,1633,938],{"class":927},[666,1635,1636,1638,1640],{"class":668,"line":1082},[666,1637,976],{"class":927},[666,1639,633],{"class":934},[666,1641,991],{"class":927},[902,1643,1645],{"id":1644},"configure-storybook","Configure Storybook",[549,1647,1648,1649,1652],{},"Create or update ",[577,1650,1651],{},".storybook/main.ts"," to point at your story files and set the framework adapter:",[647,1654,1655,1794,1922],{},[650,1656,1657],{"v-slot:vue":652},[657,1658,1660],{"className":914,"code":1659,"filename":1651,"language":916,"meta":652,"style":652},"import type { StorybookConfig } from '@storybook/vue3-vite';\n\nconst config: StorybookConfig = {\n    stories: [\n        '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',\n    ],\n    addons: [\n        '@storybook/addon-docs',\n    ],\n    framework: '@storybook/vue3-vite',\n};\n\nexport default config;\n",[577,1661,1662,1687,1691,1707,1716,1728,1734,1743,1754,1760,1775,1780,1784],{"__ignoreMap":652},[666,1663,1664,1666,1669,1671,1674,1676,1678,1680,1683,1685],{"class":668,"line":669},[666,1665,924],{"class":923},[666,1667,1668],{"class":923}," type",[666,1670,999],{"class":927},[666,1672,1673],{"class":934}," StorybookConfig",[666,1675,1005],{"class":927},[666,1677,979],{"class":923},[666,1679,982],{"class":927},[666,1681,1682],{"class":675},"@storybook/vue3-vite",[666,1684,988],{"class":927},[666,1686,991],{"class":927},[666,1688,1689],{"class":668,"line":931},[666,1690,1022],{"emptyLinePlaceholder":337},[666,1692,1693,1695,1698,1700,1702,1705],{"class":668,"line":941},[666,1694,1029],{"class":1028},[666,1696,1697],{"class":934}," config",[666,1699,1228],{"class":927},[666,1701,1673],{"class":672},[666,1703,1704],{"class":927}," =",[666,1706,928],{"class":927},[666,1708,1709,1712,1714],{"class":668,"line":949},[666,1710,1711],{"class":1224},"    stories",[666,1713,1228],{"class":927},[666,1715,1231],{"class":934},[666,1717,1718,1721,1724,1726],{"class":668,"line":957},[666,1719,1720],{"class":927},"        '",[666,1722,1723],{"class":675},"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",[666,1725,988],{"class":927},[666,1727,938],{"class":927},[666,1729,1730,1732],{"class":668,"line":965},[666,1731,1316],{"class":934},[666,1733,938],{"class":927},[666,1735,1736,1739,1741],{"class":668,"line":973},[666,1737,1738],{"class":1224},"    addons",[666,1740,1228],{"class":927},[666,1742,1231],{"class":934},[666,1744,1745,1747,1750,1752],{"class":668,"line":994},[666,1746,1720],{"class":927},[666,1748,1749],{"class":675},"@storybook/addon-docs",[666,1751,988],{"class":927},[666,1753,938],{"class":927},[666,1755,1756,1758],{"class":668,"line":1019},[666,1757,1316],{"class":934},[666,1759,938],{"class":927},[666,1761,1762,1765,1767,1769,1771,1773],{"class":668,"line":1025},[666,1763,1764],{"class":1224},"    framework",[666,1766,1228],{"class":927},[666,1768,982],{"class":927},[666,1770,1682],{"class":675},[666,1772,988],{"class":927},[666,1774,938],{"class":927},[666,1776,1777],{"class":668,"line":1046},[666,1778,1779],{"class":927},"};\n",[666,1781,1782],{"class":668,"line":1051},[666,1783,1022],{"emptyLinePlaceholder":337},[666,1785,1786,1788,1790,1792],{"class":668,"line":1062},[666,1787,1110],{"class":923},[666,1789,1113],{"class":923},[666,1791,1697],{"class":934},[666,1793,991],{"class":927},[650,1795,1796],{"v-slot:react":652},[657,1797,1799],{"className":914,"code":1798,"filename":1651,"language":916,"meta":652,"style":652},"import type { StorybookConfig } from '@storybook/react-vite';\n\nconst config: StorybookConfig = {\n    stories: [\n        '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',\n    ],\n    addons: [\n        '@storybook/addon-docs',\n    ],\n    framework: '@storybook/react-vite',\n};\n\nexport default config;\n",[577,1800,1801,1824,1828,1842,1850,1860,1866,1874,1884,1890,1904,1908,1912],{"__ignoreMap":652},[666,1802,1803,1805,1807,1809,1811,1813,1815,1817,1820,1822],{"class":668,"line":669},[666,1804,924],{"class":923},[666,1806,1668],{"class":923},[666,1808,999],{"class":927},[666,1810,1673],{"class":934},[666,1812,1005],{"class":927},[666,1814,979],{"class":923},[666,1816,982],{"class":927},[666,1818,1819],{"class":675},"@storybook/react-vite",[666,1821,988],{"class":927},[666,1823,991],{"class":927},[666,1825,1826],{"class":668,"line":931},[666,1827,1022],{"emptyLinePlaceholder":337},[666,1829,1830,1832,1834,1836,1838,1840],{"class":668,"line":941},[666,1831,1029],{"class":1028},[666,1833,1697],{"class":934},[666,1835,1228],{"class":927},[666,1837,1673],{"class":672},[666,1839,1704],{"class":927},[666,1841,928],{"class":927},[666,1843,1844,1846,1848],{"class":668,"line":949},[666,1845,1711],{"class":1224},[666,1847,1228],{"class":927},[666,1849,1231],{"class":934},[666,1851,1852,1854,1856,1858],{"class":668,"line":957},[666,1853,1720],{"class":927},[666,1855,1723],{"class":675},[666,1857,988],{"class":927},[666,1859,938],{"class":927},[666,1861,1862,1864],{"class":668,"line":965},[666,1863,1316],{"class":934},[666,1865,938],{"class":927},[666,1867,1868,1870,1872],{"class":668,"line":973},[666,1869,1738],{"class":1224},[666,1871,1228],{"class":927},[666,1873,1231],{"class":934},[666,1875,1876,1878,1880,1882],{"class":668,"line":994},[666,1877,1720],{"class":927},[666,1879,1749],{"class":675},[666,1881,988],{"class":927},[666,1883,938],{"class":927},[666,1885,1886,1888],{"class":668,"line":1019},[666,1887,1316],{"class":934},[666,1889,938],{"class":927},[666,1891,1892,1894,1896,1898,1900,1902],{"class":668,"line":1025},[666,1893,1764],{"class":1224},[666,1895,1228],{"class":927},[666,1897,982],{"class":927},[666,1899,1819],{"class":675},[666,1901,988],{"class":927},[666,1903,938],{"class":927},[666,1905,1906],{"class":668,"line":1046},[666,1907,1779],{"class":927},[666,1909,1910],{"class":668,"line":1051},[666,1911,1022],{"emptyLinePlaceholder":337},[666,1913,1914,1916,1918,1920],{"class":668,"line":1062},[666,1915,1110],{"class":923},[666,1917,1113],{"class":923},[666,1919,1697],{"class":934},[666,1921,991],{"class":927},[650,1923,1924],{"v-slot:other":652},[657,1925,1927],{"className":914,"code":1926,"filename":1651,"language":916,"meta":652,"style":652},"import type { StorybookConfig } from '@storybook/html-vite';\n\nconst config: StorybookConfig = {\n    stories: [\n        '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',\n    ],\n    addons: [\n        '@storybook/addon-docs',\n    ],\n    framework: '@storybook/html-vite',\n};\n\nexport default config;\n",[577,1928,1929,1952,1956,1970,1978,1988,1994,2002,2012,2018,2032,2036,2040],{"__ignoreMap":652},[666,1930,1931,1933,1935,1937,1939,1941,1943,1945,1948,1950],{"class":668,"line":669},[666,1932,924],{"class":923},[666,1934,1668],{"class":923},[666,1936,999],{"class":927},[666,1938,1673],{"class":934},[666,1940,1005],{"class":927},[666,1942,979],{"class":923},[666,1944,982],{"class":927},[666,1946,1947],{"class":675},"@storybook/html-vite",[666,1949,988],{"class":927},[666,1951,991],{"class":927},[666,1953,1954],{"class":668,"line":931},[666,1955,1022],{"emptyLinePlaceholder":337},[666,1957,1958,1960,1962,1964,1966,1968],{"class":668,"line":941},[666,1959,1029],{"class":1028},[666,1961,1697],{"class":934},[666,1963,1228],{"class":927},[666,1965,1673],{"class":672},[666,1967,1704],{"class":927},[666,1969,928],{"class":927},[666,1971,1972,1974,1976],{"class":668,"line":949},[666,1973,1711],{"class":1224},[666,1975,1228],{"class":927},[666,1977,1231],{"class":934},[666,1979,1980,1982,1984,1986],{"class":668,"line":957},[666,1981,1720],{"class":927},[666,1983,1723],{"class":675},[666,1985,988],{"class":927},[666,1987,938],{"class":927},[666,1989,1990,1992],{"class":668,"line":965},[666,1991,1316],{"class":934},[666,1993,938],{"class":927},[666,1995,1996,1998,2000],{"class":668,"line":973},[666,1997,1738],{"class":1224},[666,1999,1228],{"class":927},[666,2001,1231],{"class":934},[666,2003,2004,2006,2008,2010],{"class":668,"line":994},[666,2005,1720],{"class":927},[666,2007,1749],{"class":675},[666,2009,988],{"class":927},[666,2011,938],{"class":927},[666,2013,2014,2016],{"class":668,"line":1019},[666,2015,1316],{"class":934},[666,2017,938],{"class":927},[666,2019,2020,2022,2024,2026,2028,2030],{"class":668,"line":1025},[666,2021,1764],{"class":1224},[666,2023,1228],{"class":927},[666,2025,982],{"class":927},[666,2027,1947],{"class":675},[666,2029,988],{"class":927},[666,2031,938],{"class":927},[666,2033,2034],{"class":668,"line":1046},[666,2035,1779],{"class":927},[666,2037,2038],{"class":668,"line":1051},[666,2039,1022],{"emptyLinePlaceholder":337},[666,2041,2042,2044,2046,2048],{"class":668,"line":1062},[666,2043,1110],{"class":923},[666,2045,1113],{"class":923},[666,2047,1697],{"class":934},[666,2049,991],{"class":927},[902,2051,2053],{"id":2052},"import-styles-in-the-preview","Import styles in the preview",[549,2055,2056,2057,2060],{},"Create ",[577,2058,2059],{},".storybook/preview.ts"," and import the compiled CSS. This single import makes all your design tokens, utility classes, and recipe styles available to every story.",[647,2062,2063,2176,2283],{},[650,2064,2065],{"v-slot:vue":652},[657,2066,2068],{"className":914,"code":2067,"filename":2059,"language":916,"meta":652,"style":652},"import type { Preview } from '@storybook/vue3-vite';\n\nimport 'virtual:styleframe.css';\n\nconst preview: Preview = {\n    parameters: {\n        layout: 'centered',\n    },\n};\n\nexport default preview;\n",[577,2069,2070,2093,2097,2109,2113,2128,2137,2153,2158,2162,2166],{"__ignoreMap":652},[666,2071,2072,2074,2076,2078,2081,2083,2085,2087,2089,2091],{"class":668,"line":669},[666,2073,924],{"class":923},[666,2075,1668],{"class":923},[666,2077,999],{"class":927},[666,2079,2080],{"class":934}," Preview",[666,2082,1005],{"class":927},[666,2084,979],{"class":923},[666,2086,982],{"class":927},[666,2088,1682],{"class":675},[666,2090,988],{"class":927},[666,2092,991],{"class":927},[666,2094,2095],{"class":668,"line":931},[666,2096,1022],{"emptyLinePlaceholder":337},[666,2098,2099,2101,2103,2105,2107],{"class":668,"line":941},[666,2100,924],{"class":923},[666,2102,982],{"class":927},[666,2104,579],{"class":675},[666,2106,988],{"class":927},[666,2108,991],{"class":927},[666,2110,2111],{"class":668,"line":949},[666,2112,1022],{"emptyLinePlaceholder":337},[666,2114,2115,2117,2120,2122,2124,2126],{"class":668,"line":957},[666,2116,1029],{"class":1028},[666,2118,2119],{"class":934}," preview",[666,2121,1228],{"class":927},[666,2123,2080],{"class":672},[666,2125,1704],{"class":927},[666,2127,928],{"class":927},[666,2129,2130,2133,2135],{"class":668,"line":965},[666,2131,2132],{"class":1224},"    parameters",[666,2134,1228],{"class":927},[666,2136,928],{"class":927},[666,2138,2139,2142,2144,2146,2149,2151],{"class":668,"line":973},[666,2140,2141],{"class":1224},"        layout",[666,2143,1228],{"class":927},[666,2145,982],{"class":927},[666,2147,2148],{"class":675},"centered",[666,2150,988],{"class":927},[666,2152,938],{"class":927},[666,2154,2155],{"class":668,"line":994},[666,2156,2157],{"class":927},"    },\n",[666,2159,2160],{"class":668,"line":1019},[666,2161,1779],{"class":927},[666,2163,2164],{"class":668,"line":1025},[666,2165,1022],{"emptyLinePlaceholder":337},[666,2167,2168,2170,2172,2174],{"class":668,"line":1046},[666,2169,1110],{"class":923},[666,2171,1113],{"class":923},[666,2173,2119],{"class":934},[666,2175,991],{"class":927},[650,2177,2178],{"v-slot:react":652},[657,2179,2181],{"className":914,"code":2180,"filename":2059,"language":916,"meta":652,"style":652},"import type { Preview } from '@storybook/react-vite';\n\nimport 'virtual:styleframe.css';\n\nconst preview: Preview = {\n    parameters: {\n        layout: 'centered',\n    },\n};\n\nexport default preview;\n",[577,2182,2183,2205,2209,2221,2225,2239,2247,2261,2265,2269,2273],{"__ignoreMap":652},[666,2184,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203],{"class":668,"line":669},[666,2186,924],{"class":923},[666,2188,1668],{"class":923},[666,2190,999],{"class":927},[666,2192,2080],{"class":934},[666,2194,1005],{"class":927},[666,2196,979],{"class":923},[666,2198,982],{"class":927},[666,2200,1819],{"class":675},[666,2202,988],{"class":927},[666,2204,991],{"class":927},[666,2206,2207],{"class":668,"line":931},[666,2208,1022],{"emptyLinePlaceholder":337},[666,2210,2211,2213,2215,2217,2219],{"class":668,"line":941},[666,2212,924],{"class":923},[666,2214,982],{"class":927},[666,2216,579],{"class":675},[666,2218,988],{"class":927},[666,2220,991],{"class":927},[666,2222,2223],{"class":668,"line":949},[666,2224,1022],{"emptyLinePlaceholder":337},[666,2226,2227,2229,2231,2233,2235,2237],{"class":668,"line":957},[666,2228,1029],{"class":1028},[666,2230,2119],{"class":934},[666,2232,1228],{"class":927},[666,2234,2080],{"class":672},[666,2236,1704],{"class":927},[666,2238,928],{"class":927},[666,2240,2241,2243,2245],{"class":668,"line":965},[666,2242,2132],{"class":1224},[666,2244,1228],{"class":927},[666,2246,928],{"class":927},[666,2248,2249,2251,2253,2255,2257,2259],{"class":668,"line":973},[666,2250,2141],{"class":1224},[666,2252,1228],{"class":927},[666,2254,982],{"class":927},[666,2256,2148],{"class":675},[666,2258,988],{"class":927},[666,2260,938],{"class":927},[666,2262,2263],{"class":668,"line":994},[666,2264,2157],{"class":927},[666,2266,2267],{"class":668,"line":1019},[666,2268,1779],{"class":927},[666,2270,2271],{"class":668,"line":1025},[666,2272,1022],{"emptyLinePlaceholder":337},[666,2274,2275,2277,2279,2281],{"class":668,"line":1046},[666,2276,1110],{"class":923},[666,2278,1113],{"class":923},[666,2280,2119],{"class":934},[666,2282,991],{"class":927},[650,2284,2285],{"v-slot:other":652},[657,2286,2288],{"className":914,"code":2287,"filename":2059,"language":916,"meta":652,"style":652},"import type { Preview } from '@storybook/html-vite';\n\nimport 'virtual:styleframe.css';\n\nconst preview: Preview = {\n    parameters: {\n        layout: 'centered',\n    },\n};\n\nexport default preview;\n",[577,2289,2290,2312,2316,2328,2332,2346,2354,2368,2372,2376,2380],{"__ignoreMap":652},[666,2291,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310],{"class":668,"line":669},[666,2293,924],{"class":923},[666,2295,1668],{"class":923},[666,2297,999],{"class":927},[666,2299,2080],{"class":934},[666,2301,1005],{"class":927},[666,2303,979],{"class":923},[666,2305,982],{"class":927},[666,2307,1947],{"class":675},[666,2309,988],{"class":927},[666,2311,991],{"class":927},[666,2313,2314],{"class":668,"line":931},[666,2315,1022],{"emptyLinePlaceholder":337},[666,2317,2318,2320,2322,2324,2326],{"class":668,"line":941},[666,2319,924],{"class":923},[666,2321,982],{"class":927},[666,2323,579],{"class":675},[666,2325,988],{"class":927},[666,2327,991],{"class":927},[666,2329,2330],{"class":668,"line":949},[666,2331,1022],{"emptyLinePlaceholder":337},[666,2333,2334,2336,2338,2340,2342,2344],{"class":668,"line":957},[666,2335,1029],{"class":1028},[666,2337,2119],{"class":934},[666,2339,1228],{"class":927},[666,2341,2080],{"class":672},[666,2343,1704],{"class":927},[666,2345,928],{"class":927},[666,2347,2348,2350,2352],{"class":668,"line":965},[666,2349,2132],{"class":1224},[666,2351,1228],{"class":927},[666,2353,928],{"class":927},[666,2355,2356,2358,2360,2362,2364,2366],{"class":668,"line":973},[666,2357,2141],{"class":1224},[666,2359,1228],{"class":927},[666,2361,982],{"class":927},[666,2363,2148],{"class":675},[666,2365,988],{"class":927},[666,2367,938],{"class":927},[666,2369,2370],{"class":668,"line":994},[666,2371,2157],{"class":927},[666,2373,2374],{"class":668,"line":1019},[666,2375,1779],{"class":927},[666,2377,2378],{"class":668,"line":1025},[666,2379,1022],{"emptyLinePlaceholder":337},[666,2381,2382,2384,2386,2388],{"class":668,"line":1046},[666,2383,1110],{"class":923},[666,2385,1113],{"class":923},[666,2387,2119],{"class":934},[666,2389,991],{"class":927},[888,2391,2392,2395,2396,2399],{},[563,2393,2394],{},"Pro tip:"," Run ",[577,2397,2398],{},"storybook dev"," to start the dev server. The Styleframe plugin compiles your config and extension files on the fly, with hot module replacement for instant feedback.",[892,2401],{},[545,2403,2405],{"id":2404},"writing-stories","Writing Stories",[549,2407,2408,2409,2411,2412,2415],{},"Stories follow a three-file pattern: a ",[577,2410,595],{}," file to register the recipe, a component file to consume it, and a ",[577,2413,2414],{},"*.stories.ts"," file for Storybook.",[902,2417,2419],{"id":2418},"register-a-recipe","Register a recipe",[549,2421,2422,2423,2425,2426,2429],{},"Create a ",[577,2424,595],{}," file alongside your story. The Vite plugin discovers it automatically and makes the recipe available via ",[577,2427,2428],{},"virtual:styleframe",".",[657,2431,2434],{"className":914,"code":2432,"filename":2433,"language":916,"meta":652,"style":652},"import { useButtonRecipe } from '@styleframe/theme';\nimport { styleframe } from 'virtual:styleframe';\n\nconst s = styleframe();\n\nconst button = useButtonRecipe(s);\n\nexport default s;\n","stories/button.styleframe.ts",[577,2435,2436,2457,2477,2481,2495,2499,2514,2518],{"__ignoreMap":652},[666,2437,2438,2440,2442,2445,2447,2449,2451,2453,2455],{"class":668,"line":669},[666,2439,924],{"class":923},[666,2441,999],{"class":927},[666,2443,2444],{"class":934}," useButtonRecipe",[666,2446,1005],{"class":927},[666,2448,979],{"class":923},[666,2450,982],{"class":927},[666,2452,985],{"class":675},[666,2454,988],{"class":927},[666,2456,991],{"class":927},[666,2458,2459,2461,2463,2465,2467,2469,2471,2473,2475],{"class":668,"line":931},[666,2460,924],{"class":923},[666,2462,999],{"class":927},[666,2464,1002],{"class":934},[666,2466,1005],{"class":927},[666,2468,979],{"class":923},[666,2470,982],{"class":927},[666,2472,2428],{"class":675},[666,2474,988],{"class":927},[666,2476,991],{"class":927},[666,2478,2479],{"class":668,"line":941},[666,2480,1022],{"emptyLinePlaceholder":337},[666,2482,2483,2485,2487,2489,2491,2493],{"class":668,"line":949},[666,2484,1029],{"class":1028},[666,2486,1032],{"class":934},[666,2488,1035],{"class":927},[666,2490,1002],{"class":1038},[666,2492,1041],{"class":934},[666,2494,991],{"class":927},[666,2496,2497],{"class":668,"line":957},[666,2498,1022],{"emptyLinePlaceholder":337},[666,2500,2501,2503,2506,2508,2510,2512],{"class":668,"line":965},[666,2502,1029],{"class":1028},[666,2504,2505],{"class":934}," button ",[666,2507,1035],{"class":927},[666,2509,2444],{"class":1038},[666,2511,1057],{"class":934},[666,2513,991],{"class":927},[666,2515,2516],{"class":668,"line":973},[666,2517,1022],{"emptyLinePlaceholder":337},[666,2519,2520,2522,2524,2526],{"class":668,"line":994},[666,2521,1110],{"class":923},[666,2523,1113],{"class":923},[666,2525,1116],{"class":934},[666,2527,991],{"class":927},[902,2529,2531],{"id":2530},"build-the-component","Build the component",[549,2533,2534,2535,2538,2539,2541],{},"Import the ",[577,2536,2537],{},"button"," runtime function from ",[577,2540,2428],{}," and pass variant props to compute class names. The function is fully typed — invalid colors, variants, or sizes are caught at compile time.",[647,2543,2544,3029,3151],{},[650,2545,2546],{"v-slot:vue":652},[657,2547,2552],{"className":2548,"code":2549,"filename":2550,"language":2551,"meta":652,"style":652},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { button } from 'virtual:styleframe';\n\nconst props = withDefaults(\n    defineProps\u003C{\n        color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'light' | 'dark' | 'neutral';\n        variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link';\n        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n        label?: string;\n        disabled?: boolean;\n    }>(),\n    {},\n);\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cbutton\n        :class=\"button({ color: props.color, variant: props.variant, size: props.size })\"\n        :disabled=\"props.disabled\"\n    >\n        {{ props.label }}\n    \u003C/button>\n\u003C/template>\n","src/components/Button.vue","vue",[577,2553,2554,2580,2601,2605,2620,2628,2718,2779,2831,2843,2855,2864,2869,2875,2884,2888,2896,2904,2967,2987,2993,3010,3020],{"__ignoreMap":652},[666,2555,2556,2559,2562,2565,2568,2570,2573,2575,2577],{"class":668,"line":669},[666,2557,2558],{"class":927},"\u003C",[666,2560,2561],{"class":1224},"script",[666,2563,2564],{"class":1028}," setup",[666,2566,2567],{"class":1028}," lang",[666,2569,1035],{"class":927},[666,2571,2572],{"class":927},"\"",[666,2574,916],{"class":675},[666,2576,2572],{"class":927},[666,2578,2579],{"class":927},">\n",[666,2581,2582,2584,2586,2589,2591,2593,2595,2597,2599],{"class":668,"line":931},[666,2583,924],{"class":923},[666,2585,999],{"class":927},[666,2587,2588],{"class":934}," button",[666,2590,1005],{"class":927},[666,2592,979],{"class":923},[666,2594,982],{"class":927},[666,2596,2428],{"class":675},[666,2598,988],{"class":927},[666,2600,991],{"class":927},[666,2602,2603],{"class":668,"line":941},[666,2604,1022],{"emptyLinePlaceholder":337},[666,2606,2607,2609,2612,2614,2617],{"class":668,"line":949},[666,2608,1029],{"class":1028},[666,2610,2611],{"class":934}," props ",[666,2613,1035],{"class":927},[666,2615,2616],{"class":1038}," withDefaults",[666,2618,2619],{"class":934},"(\n",[666,2621,2622,2625],{"class":668,"line":957},[666,2623,2624],{"class":1038},"    defineProps",[666,2626,2627],{"class":927},"\u003C{\n",[666,2629,2630,2633,2636,2638,2641,2643,2646,2648,2651,2653,2655,2657,2660,2662,2664,2666,2669,2671,2673,2675,2678,2680,2682,2684,2687,2689,2691,2693,2696,2698,2700,2702,2705,2707,2709,2711,2714,2716],{"class":668,"line":965},[666,2631,2632],{"class":1224},"        color",[666,2634,2635],{"class":927},"?:",[666,2637,982],{"class":927},[666,2639,2640],{"class":675},"primary",[666,2642,988],{"class":927},[666,2644,2645],{"class":927}," |",[666,2647,982],{"class":927},[666,2649,2650],{"class":675},"secondary",[666,2652,988],{"class":927},[666,2654,2645],{"class":927},[666,2656,982],{"class":927},[666,2658,2659],{"class":675},"success",[666,2661,988],{"class":927},[666,2663,2645],{"class":927},[666,2665,982],{"class":927},[666,2667,2668],{"class":675},"info",[666,2670,988],{"class":927},[666,2672,2645],{"class":927},[666,2674,982],{"class":927},[666,2676,2677],{"class":675},"warning",[666,2679,988],{"class":927},[666,2681,2645],{"class":927},[666,2683,982],{"class":927},[666,2685,2686],{"class":675},"error",[666,2688,988],{"class":927},[666,2690,2645],{"class":927},[666,2692,982],{"class":927},[666,2694,2695],{"class":675},"light",[666,2697,988],{"class":927},[666,2699,2645],{"class":927},[666,2701,982],{"class":927},[666,2703,2704],{"class":675},"dark",[666,2706,988],{"class":927},[666,2708,2645],{"class":927},[666,2710,982],{"class":927},[666,2712,2713],{"class":675},"neutral",[666,2715,988],{"class":927},[666,2717,991],{"class":927},[666,2719,2720,2723,2725,2727,2730,2732,2734,2736,2739,2741,2743,2745,2748,2750,2752,2754,2757,2759,2761,2763,2766,2768,2770,2772,2775,2777],{"class":668,"line":973},[666,2721,2722],{"class":1224},"        variant",[666,2724,2635],{"class":927},[666,2726,982],{"class":927},[666,2728,2729],{"class":675},"solid",[666,2731,988],{"class":927},[666,2733,2645],{"class":927},[666,2735,982],{"class":927},[666,2737,2738],{"class":675},"outline",[666,2740,988],{"class":927},[666,2742,2645],{"class":927},[666,2744,982],{"class":927},[666,2746,2747],{"class":675},"soft",[666,2749,988],{"class":927},[666,2751,2645],{"class":927},[666,2753,982],{"class":927},[666,2755,2756],{"class":675},"subtle",[666,2758,988],{"class":927},[666,2760,2645],{"class":927},[666,2762,982],{"class":927},[666,2764,2765],{"class":675},"ghost",[666,2767,988],{"class":927},[666,2769,2645],{"class":927},[666,2771,982],{"class":927},[666,2773,2774],{"class":675},"link",[666,2776,988],{"class":927},[666,2778,991],{"class":927},[666,2780,2781,2784,2786,2788,2791,2793,2795,2797,2800,2802,2804,2806,2809,2811,2813,2815,2818,2820,2822,2824,2827,2829],{"class":668,"line":994},[666,2782,2783],{"class":1224},"        size",[666,2785,2635],{"class":927},[666,2787,982],{"class":927},[666,2789,2790],{"class":675},"xs",[666,2792,988],{"class":927},[666,2794,2645],{"class":927},[666,2796,982],{"class":927},[666,2798,2799],{"class":675},"sm",[666,2801,988],{"class":927},[666,2803,2645],{"class":927},[666,2805,982],{"class":927},[666,2807,2808],{"class":675},"md",[666,2810,988],{"class":927},[666,2812,2645],{"class":927},[666,2814,982],{"class":927},[666,2816,2817],{"class":675},"lg",[666,2819,988],{"class":927},[666,2821,2645],{"class":927},[666,2823,982],{"class":927},[666,2825,2826],{"class":675},"xl",[666,2828,988],{"class":927},[666,2830,991],{"class":927},[666,2832,2833,2836,2838,2841],{"class":668,"line":1019},[666,2834,2835],{"class":1224},"        label",[666,2837,2635],{"class":927},[666,2839,2840],{"class":672}," string",[666,2842,991],{"class":927},[666,2844,2845,2848,2850,2853],{"class":668,"line":1025},[666,2846,2847],{"class":1224},"        disabled",[666,2849,2635],{"class":927},[666,2851,2852],{"class":672}," boolean",[666,2854,991],{"class":927},[666,2856,2857,2860,2862],{"class":668,"line":1046},[666,2858,2859],{"class":927},"    }>",[666,2861,1041],{"class":934},[666,2863,938],{"class":927},[666,2865,2866],{"class":668,"line":1051},[666,2867,2868],{"class":927},"    {},\n",[666,2870,2871,2873],{"class":668,"line":1062},[666,2872,633],{"class":934},[666,2874,991],{"class":927},[666,2876,2877,2880,2882],{"class":668,"line":1072},[666,2878,2879],{"class":927},"\u003C/",[666,2881,2561],{"class":1224},[666,2883,2579],{"class":927},[666,2885,2886],{"class":668,"line":1082},[666,2887,1022],{"emptyLinePlaceholder":337},[666,2889,2890,2892,2894],{"class":668,"line":1092},[666,2891,2558],{"class":927},[666,2893,650],{"class":1224},[666,2895,2579],{"class":927},[666,2897,2898,2901],{"class":668,"line":1102},[666,2899,2900],{"class":927},"    \u003C",[666,2902,2903],{"class":1224},"button\n",[666,2905,2906,2909,2912,2914,2916,2918,2921,2924,2927,2930,2932,2934,2937,2940,2942,2944,2946,2948,2950,2953,2955,2957,2959,2961,2964],{"class":668,"line":1107},[666,2907,2908],{"class":927},"        :",[666,2910,2911],{"class":1028},"class",[666,2913,1035],{"class":927},[666,2915,2572],{"class":927},[666,2917,2537],{"class":1038},[666,2919,2920],{"class":927},"({ ",[666,2922,2923],{"class":1224},"color",[666,2925,2926],{"class":927},": ",[666,2928,2929],{"class":934},"props",[666,2931,2429],{"class":927},[666,2933,2923],{"class":934},[666,2935,2936],{"class":927},", ",[666,2938,2939],{"class":1224},"variant",[666,2941,2926],{"class":927},[666,2943,2929],{"class":934},[666,2945,2429],{"class":927},[666,2947,2939],{"class":934},[666,2949,2936],{"class":927},[666,2951,2952],{"class":1224},"size",[666,2954,2926],{"class":927},[666,2956,2929],{"class":934},[666,2958,2429],{"class":927},[666,2960,2952],{"class":934},[666,2962,2963],{"class":927}," })",[666,2965,2966],{"class":927},"\"\n",[666,2968,2970,2972,2975,2977,2979,2981,2983,2985],{"class":668,"line":2969},19,[666,2971,2908],{"class":927},[666,2973,2974],{"class":1028},"disabled",[666,2976,1035],{"class":927},[666,2978,2572],{"class":927},[666,2980,2929],{"class":934},[666,2982,2429],{"class":927},[666,2984,2974],{"class":934},[666,2986,2966],{"class":927},[666,2988,2990],{"class":668,"line":2989},20,[666,2991,2992],{"class":927},"    >\n",[666,2994,2996,2999,3002,3004,3007],{"class":668,"line":2995},21,[666,2997,2998],{"class":927},"        {{",[666,3000,3001],{"class":934}," props",[666,3003,2429],{"class":927},[666,3005,3006],{"class":934},"label ",[666,3008,3009],{"class":927},"}}\n",[666,3011,3013,3016,3018],{"class":668,"line":3012},22,[666,3014,3015],{"class":927},"    \u003C/",[666,3017,2537],{"class":1224},[666,3019,2579],{"class":927},[666,3021,3023,3025,3027],{"class":668,"line":3022},23,[666,3024,2879],{"class":927},[666,3026,650],{"class":1224},[666,3028,2579],{"class":927},[650,3030,3031],{"v-slot:react":652},[657,3032,3037],{"className":3033,"code":3034,"filename":3035,"language":3036,"meta":652,"style":652},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { button } from 'virtual:styleframe';\n\ninterface ButtonProps {\n    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'light' | 'dark' | 'neutral';\n    variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link';\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    label?: string;\n    disabled?: boolean;\n}\n\nexport function Button({\n    color = 'neutral',\n    variant = 'solid',\n    size = 'md',\n    label = 'Button',\n    disabled = false,\n}: ButtonProps) {\n    return (\n        \u003Cbutton className={button({ color, variant, size })} disabled={disabled}>\n            {label}\n        \u003C/button>\n    );\n}\n","src/components/Button.tsx","tsx",[577,3038,3039,3044,3048,3053,3058,3063,3068,3073,3078,3083,3087,3092,3097,3102,3107,3112,3117,3122,3127,3132,3137,3142,3147],{"__ignoreMap":652},[666,3040,3041],{"class":668,"line":669},[666,3042,3043],{},"import { button } from 'virtual:styleframe';\n",[666,3045,3046],{"class":668,"line":931},[666,3047,1022],{"emptyLinePlaceholder":337},[666,3049,3050],{"class":668,"line":941},[666,3051,3052],{},"interface ButtonProps {\n",[666,3054,3055],{"class":668,"line":949},[666,3056,3057],{},"    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'light' | 'dark' | 'neutral';\n",[666,3059,3060],{"class":668,"line":957},[666,3061,3062],{},"    variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link';\n",[666,3064,3065],{"class":668,"line":965},[666,3066,3067],{},"    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n",[666,3069,3070],{"class":668,"line":973},[666,3071,3072],{},"    label?: string;\n",[666,3074,3075],{"class":668,"line":994},[666,3076,3077],{},"    disabled?: boolean;\n",[666,3079,3080],{"class":668,"line":1019},[666,3081,3082],{},"}\n",[666,3084,3085],{"class":668,"line":1025},[666,3086,1022],{"emptyLinePlaceholder":337},[666,3088,3089],{"class":668,"line":1046},[666,3090,3091],{},"export function Button({\n",[666,3093,3094],{"class":668,"line":1051},[666,3095,3096],{},"    color = 'neutral',\n",[666,3098,3099],{"class":668,"line":1062},[666,3100,3101],{},"    variant = 'solid',\n",[666,3103,3104],{"class":668,"line":1072},[666,3105,3106],{},"    size = 'md',\n",[666,3108,3109],{"class":668,"line":1082},[666,3110,3111],{},"    label = 'Button',\n",[666,3113,3114],{"class":668,"line":1092},[666,3115,3116],{},"    disabled = false,\n",[666,3118,3119],{"class":668,"line":1102},[666,3120,3121],{},"}: ButtonProps) {\n",[666,3123,3124],{"class":668,"line":1107},[666,3125,3126],{},"    return (\n",[666,3128,3129],{"class":668,"line":2969},[666,3130,3131],{},"        \u003Cbutton className={button({ color, variant, size })} disabled={disabled}>\n",[666,3133,3134],{"class":668,"line":2989},[666,3135,3136],{},"            {label}\n",[666,3138,3139],{"class":668,"line":2995},[666,3140,3141],{},"        \u003C/button>\n",[666,3143,3144],{"class":668,"line":3012},[666,3145,3146],{},"    );\n",[666,3148,3149],{"class":668,"line":3022},[666,3150,3082],{},[650,3152,3153,3160],{"v-slot:other":652},[549,3154,3155,3156,3159],{},"The ",[577,3157,3158],{},"button()"," runtime returns a class string. Apply it however your project binds classes:",[657,3161,3164],{"className":914,"code":3162,"filename":3163,"language":916,"meta":652,"style":652},"import { button } from 'virtual:styleframe';\n\nexport function createButton(options: {\n    color?: string;\n    variant?: string;\n    size?: string;\n    label?: string;\n    disabled?: boolean;\n}) {\n    const el = document.createElement('button');\n    el.className = button({\n        color: options.color ?? 'neutral',\n        variant: options.variant ?? 'solid',\n        size: options.size ?? 'md',\n    });\n    el.textContent = options.label ?? 'Button';\n    el.disabled = options.disabled ?? false;\n    return el;\n}\n","src/components/button.ts",[577,3165,3166,3186,3190,3210,3221,3232,3243,3254,3265,3272,3302,3320,3344,3366,3388,3397,3425,3449,3458],{"__ignoreMap":652},[666,3167,3168,3170,3172,3174,3176,3178,3180,3182,3184],{"class":668,"line":669},[666,3169,924],{"class":923},[666,3171,999],{"class":927},[666,3173,2588],{"class":934},[666,3175,1005],{"class":927},[666,3177,979],{"class":923},[666,3179,982],{"class":927},[666,3181,2428],{"class":675},[666,3183,988],{"class":927},[666,3185,991],{"class":927},[666,3187,3188],{"class":668,"line":931},[666,3189,1022],{"emptyLinePlaceholder":337},[666,3191,3192,3194,3197,3200,3202,3206,3208],{"class":668,"line":941},[666,3193,1110],{"class":923},[666,3195,3196],{"class":1028}," function",[666,3198,3199],{"class":1038}," createButton",[666,3201,1216],{"class":927},[666,3203,3205],{"class":3204},"sHdIc","options",[666,3207,1228],{"class":927},[666,3209,928],{"class":927},[666,3211,3212,3215,3217,3219],{"class":668,"line":949},[666,3213,3214],{"class":1224},"    color",[666,3216,2635],{"class":927},[666,3218,2840],{"class":672},[666,3220,991],{"class":927},[666,3222,3223,3226,3228,3230],{"class":668,"line":957},[666,3224,3225],{"class":1224},"    variant",[666,3227,2635],{"class":927},[666,3229,2840],{"class":672},[666,3231,991],{"class":927},[666,3233,3234,3237,3239,3241],{"class":668,"line":965},[666,3235,3236],{"class":1224},"    size",[666,3238,2635],{"class":927},[666,3240,2840],{"class":672},[666,3242,991],{"class":927},[666,3244,3245,3248,3250,3252],{"class":668,"line":973},[666,3246,3247],{"class":1224},"    label",[666,3249,2635],{"class":927},[666,3251,2840],{"class":672},[666,3253,991],{"class":927},[666,3255,3256,3259,3261,3263],{"class":668,"line":994},[666,3257,3258],{"class":1224},"    disabled",[666,3260,2635],{"class":927},[666,3262,2852],{"class":672},[666,3264,991],{"class":927},[666,3266,3267,3270],{"class":668,"line":1019},[666,3268,3269],{"class":927},"})",[666,3271,928],{"class":927},[666,3273,3274,3277,3280,3282,3285,3287,3290,3292,3294,3296,3298,3300],{"class":668,"line":1025},[666,3275,3276],{"class":1028},"    const",[666,3278,3279],{"class":934}," el",[666,3281,1704],{"class":927},[666,3283,3284],{"class":934}," document",[666,3286,2429],{"class":927},[666,3288,3289],{"class":1038},"createElement",[666,3291,1216],{"class":1224},[666,3293,988],{"class":927},[666,3295,2537],{"class":675},[666,3297,988],{"class":927},[666,3299,633],{"class":1224},[666,3301,991],{"class":927},[666,3303,3304,3307,3309,3312,3314,3316,3318],{"class":668,"line":1046},[666,3305,3306],{"class":934},"    el",[666,3308,2429],{"class":927},[666,3310,3311],{"class":934},"className",[666,3313,1704],{"class":927},[666,3315,2588],{"class":1038},[666,3317,1216],{"class":1224},[666,3319,1219],{"class":927},[666,3321,3322,3324,3326,3329,3331,3333,3336,3338,3340,3342],{"class":668,"line":1051},[666,3323,2632],{"class":1224},[666,3325,1228],{"class":927},[666,3327,3328],{"class":934}," options",[666,3330,2429],{"class":927},[666,3332,2923],{"class":934},[666,3334,3335],{"class":927}," ??",[666,3337,982],{"class":927},[666,3339,2713],{"class":675},[666,3341,988],{"class":927},[666,3343,938],{"class":927},[666,3345,3346,3348,3350,3352,3354,3356,3358,3360,3362,3364],{"class":668,"line":1062},[666,3347,2722],{"class":1224},[666,3349,1228],{"class":927},[666,3351,3328],{"class":934},[666,3353,2429],{"class":927},[666,3355,2939],{"class":934},[666,3357,3335],{"class":927},[666,3359,982],{"class":927},[666,3361,2729],{"class":675},[666,3363,988],{"class":927},[666,3365,938],{"class":927},[666,3367,3368,3370,3372,3374,3376,3378,3380,3382,3384,3386],{"class":668,"line":1072},[666,3369,2783],{"class":1224},[666,3371,1228],{"class":927},[666,3373,3328],{"class":934},[666,3375,2429],{"class":927},[666,3377,2952],{"class":934},[666,3379,3335],{"class":927},[666,3381,982],{"class":927},[666,3383,2808],{"class":675},[666,3385,988],{"class":927},[666,3387,938],{"class":927},[666,3389,3390,3393,3395],{"class":668,"line":1082},[666,3391,3392],{"class":927},"    }",[666,3394,633],{"class":1224},[666,3396,991],{"class":927},[666,3398,3399,3401,3403,3406,3408,3410,3412,3415,3417,3419,3421,3423],{"class":668,"line":1092},[666,3400,3306],{"class":934},[666,3402,2429],{"class":927},[666,3404,3405],{"class":934},"textContent",[666,3407,1704],{"class":927},[666,3409,3328],{"class":934},[666,3411,2429],{"class":927},[666,3413,3414],{"class":934},"label",[666,3416,3335],{"class":927},[666,3418,982],{"class":927},[666,3420,346],{"class":675},[666,3422,988],{"class":927},[666,3424,991],{"class":927},[666,3426,3427,3429,3431,3433,3435,3437,3439,3441,3443,3447],{"class":668,"line":1102},[666,3428,3306],{"class":934},[666,3430,2429],{"class":927},[666,3432,2974],{"class":934},[666,3434,1704],{"class":927},[666,3436,3328],{"class":934},[666,3438,2429],{"class":927},[666,3440,2974],{"class":934},[666,3442,3335],{"class":927},[666,3444,3446],{"class":3445},"sfNiH"," false",[666,3448,991],{"class":927},[666,3450,3451,3454,3456],{"class":668,"line":1107},[666,3452,3453],{"class":923},"    return",[666,3455,3279],{"class":934},[666,3457,991],{"class":927},[666,3459,3460],{"class":668,"line":2969},[666,3461,3082],{"class":927},[902,3463,3465],{"id":3464},"write-the-story","Write the story",[549,3467,2422,3468,3470,3471,1228],{},[577,3469,2414],{}," file using Storybook's ",[553,3472,3475],{"href":3473,"rel":3474,"target":558},"https://storybook.js.org/docs/api/csf",[557],"Component Story Format (CSF)",[647,3477,3478,4162,4790],{},[650,3479,3480],{"v-slot:vue":652},[657,3481,3484],{"className":914,"code":3482,"filename":3483,"language":916,"meta":652,"style":652},"import type { Meta, StoryObj } from '@storybook/vue3-vite';\nimport Button from '../src/components/Button.vue';\n\nconst meta = {\n    title: 'Components/Button',\n    component: Button,\n    tags: ['autodocs'],\n    argTypes: {\n        color: {\n            control: 'select',\n            options: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],\n        },\n        variant: {\n            control: 'select',\n            options: ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'],\n        },\n        size: {\n            control: 'select',\n            options: ['xs', 'sm', 'md', 'lg', 'xl'],\n        },\n        label: { control: 'text' },\n        disabled: { control: 'boolean' },\n    },\n} satisfies Meta\u003Ctypeof Button>;\n\nexport default meta;\ntype Story = StoryObj\u003Ctypeof meta>;\n\nexport const Default: Story = {\n    args: {\n        label: 'Button',\n    },\n};\n\nexport const Primary: Story = {\n    args: {\n        color: 'primary',\n        label: 'Primary',\n    },\n};\n\nexport const Outline: Story = {\n    args: {\n        variant: 'outline',\n        label: 'Outline',\n    },\n};\n","stories/button.stories.ts",[577,3485,3486,3515,3533,3537,3548,3564,3576,3598,3607,3615,3631,3690,3695,3703,3717,3775,3779,3787,3801,3851,3855,3878,3899,3903,3921,3926,3938,3957,3962,3981,3991,4006,4011,4016,4021,4039,4048,4063,4079,4084,4089,4094,4112,4121,4136,4152,4157],{"__ignoreMap":652},[666,3487,3488,3490,3492,3494,3497,3500,3503,3505,3507,3509,3511,3513],{"class":668,"line":669},[666,3489,924],{"class":923},[666,3491,1668],{"class":923},[666,3493,999],{"class":927},[666,3495,3496],{"class":934}," Meta",[666,3498,3499],{"class":927},",",[666,3501,3502],{"class":934}," StoryObj",[666,3504,1005],{"class":927},[666,3506,979],{"class":923},[666,3508,982],{"class":927},[666,3510,1682],{"class":675},[666,3512,988],{"class":927},[666,3514,991],{"class":927},[666,3516,3517,3519,3522,3524,3526,3529,3531],{"class":668,"line":931},[666,3518,924],{"class":923},[666,3520,3521],{"class":934}," Button ",[666,3523,1174],{"class":923},[666,3525,982],{"class":927},[666,3527,3528],{"class":675},"../src/components/Button.vue",[666,3530,988],{"class":927},[666,3532,991],{"class":927},[666,3534,3535],{"class":668,"line":941},[666,3536,1022],{"emptyLinePlaceholder":337},[666,3538,3539,3541,3544,3546],{"class":668,"line":949},[666,3540,1029],{"class":1028},[666,3542,3543],{"class":934}," meta ",[666,3545,1035],{"class":927},[666,3547,928],{"class":927},[666,3549,3550,3553,3555,3557,3560,3562],{"class":668,"line":957},[666,3551,3552],{"class":1224},"    title",[666,3554,1228],{"class":927},[666,3556,982],{"class":927},[666,3558,3559],{"class":675},"Components/Button",[666,3561,988],{"class":927},[666,3563,938],{"class":927},[666,3565,3566,3569,3571,3574],{"class":668,"line":965},[666,3567,3568],{"class":1224},"    component",[666,3570,1228],{"class":927},[666,3572,3573],{"class":934}," Button",[666,3575,938],{"class":927},[666,3577,3578,3581,3583,3586,3588,3591,3593,3596],{"class":668,"line":973},[666,3579,3580],{"class":1224},"    tags",[666,3582,1228],{"class":927},[666,3584,3585],{"class":934}," [",[666,3587,988],{"class":927},[666,3589,3590],{"class":675},"autodocs",[666,3592,988],{"class":927},[666,3594,3595],{"class":934},"]",[666,3597,938],{"class":927},[666,3599,3600,3603,3605],{"class":668,"line":994},[666,3601,3602],{"class":1224},"    argTypes",[666,3604,1228],{"class":927},[666,3606,928],{"class":927},[666,3608,3609,3611,3613],{"class":668,"line":1019},[666,3610,2632],{"class":1224},[666,3612,1228],{"class":927},[666,3614,928],{"class":927},[666,3616,3617,3620,3622,3624,3627,3629],{"class":668,"line":1025},[666,3618,3619],{"class":1224},"            control",[666,3621,1228],{"class":927},[666,3623,982],{"class":927},[666,3625,3626],{"class":675},"select",[666,3628,988],{"class":927},[666,3630,938],{"class":927},[666,3632,3633,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680,3682,3684,3686,3688],{"class":668,"line":1046},[666,3634,3635],{"class":1224},"            options",[666,3637,1228],{"class":927},[666,3639,3585],{"class":934},[666,3641,988],{"class":927},[666,3643,2640],{"class":675},[666,3645,988],{"class":927},[666,3647,3499],{"class":927},[666,3649,982],{"class":927},[666,3651,2650],{"class":675},[666,3653,988],{"class":927},[666,3655,3499],{"class":927},[666,3657,982],{"class":927},[666,3659,2659],{"class":675},[666,3661,988],{"class":927},[666,3663,3499],{"class":927},[666,3665,982],{"class":927},[666,3667,2668],{"class":675},[666,3669,988],{"class":927},[666,3671,3499],{"class":927},[666,3673,982],{"class":927},[666,3675,2677],{"class":675},[666,3677,988],{"class":927},[666,3679,3499],{"class":927},[666,3681,982],{"class":927},[666,3683,2686],{"class":675},[666,3685,988],{"class":927},[666,3687,3595],{"class":934},[666,3689,938],{"class":927},[666,3691,3692],{"class":668,"line":1051},[666,3693,3694],{"class":927},"        },\n",[666,3696,3697,3699,3701],{"class":668,"line":1062},[666,3698,2722],{"class":1224},[666,3700,1228],{"class":927},[666,3702,928],{"class":927},[666,3704,3705,3707,3709,3711,3713,3715],{"class":668,"line":1072},[666,3706,3619],{"class":1224},[666,3708,1228],{"class":927},[666,3710,982],{"class":927},[666,3712,3626],{"class":675},[666,3714,988],{"class":927},[666,3716,938],{"class":927},[666,3718,3719,3721,3723,3725,3727,3729,3731,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753,3755,3757,3759,3761,3763,3765,3767,3769,3771,3773],{"class":668,"line":1082},[666,3720,3635],{"class":1224},[666,3722,1228],{"class":927},[666,3724,3585],{"class":934},[666,3726,988],{"class":927},[666,3728,2729],{"class":675},[666,3730,988],{"class":927},[666,3732,3499],{"class":927},[666,3734,982],{"class":927},[666,3736,2738],{"class":675},[666,3738,988],{"class":927},[666,3740,3499],{"class":927},[666,3742,982],{"class":927},[666,3744,2747],{"class":675},[666,3746,988],{"class":927},[666,3748,3499],{"class":927},[666,3750,982],{"class":927},[666,3752,2756],{"class":675},[666,3754,988],{"class":927},[666,3756,3499],{"class":927},[666,3758,982],{"class":927},[666,3760,2765],{"class":675},[666,3762,988],{"class":927},[666,3764,3499],{"class":927},[666,3766,982],{"class":927},[666,3768,2774],{"class":675},[666,3770,988],{"class":927},[666,3772,3595],{"class":934},[666,3774,938],{"class":927},[666,3776,3777],{"class":668,"line":1092},[666,3778,3694],{"class":927},[666,3780,3781,3783,3785],{"class":668,"line":1102},[666,3782,2783],{"class":1224},[666,3784,1228],{"class":927},[666,3786,928],{"class":927},[666,3788,3789,3791,3793,3795,3797,3799],{"class":668,"line":1107},[666,3790,3619],{"class":1224},[666,3792,1228],{"class":927},[666,3794,982],{"class":927},[666,3796,3626],{"class":675},[666,3798,988],{"class":927},[666,3800,938],{"class":927},[666,3802,3803,3805,3807,3809,3811,3813,3815,3817,3819,3821,3823,3825,3827,3829,3831,3833,3835,3837,3839,3841,3843,3845,3847,3849],{"class":668,"line":2969},[666,3804,3635],{"class":1224},[666,3806,1228],{"class":927},[666,3808,3585],{"class":934},[666,3810,988],{"class":927},[666,3812,2790],{"class":675},[666,3814,988],{"class":927},[666,3816,3499],{"class":927},[666,3818,982],{"class":927},[666,3820,2799],{"class":675},[666,3822,988],{"class":927},[666,3824,3499],{"class":927},[666,3826,982],{"class":927},[666,3828,2808],{"class":675},[666,3830,988],{"class":927},[666,3832,3499],{"class":927},[666,3834,982],{"class":927},[666,3836,2817],{"class":675},[666,3838,988],{"class":927},[666,3840,3499],{"class":927},[666,3842,982],{"class":927},[666,3844,2826],{"class":675},[666,3846,988],{"class":927},[666,3848,3595],{"class":934},[666,3850,938],{"class":927},[666,3852,3853],{"class":668,"line":2989},[666,3854,3694],{"class":927},[666,3856,3857,3859,3861,3863,3866,3868,3870,3873,3875],{"class":668,"line":2995},[666,3858,2835],{"class":1224},[666,3860,1228],{"class":927},[666,3862,999],{"class":927},[666,3864,3865],{"class":1224}," control",[666,3867,1228],{"class":927},[666,3869,982],{"class":927},[666,3871,3872],{"class":675},"text",[666,3874,988],{"class":927},[666,3876,3877],{"class":927}," },\n",[666,3879,3880,3882,3884,3886,3888,3890,3892,3895,3897],{"class":668,"line":3012},[666,3881,2847],{"class":1224},[666,3883,1228],{"class":927},[666,3885,999],{"class":927},[666,3887,3865],{"class":1224},[666,3889,1228],{"class":927},[666,3891,982],{"class":927},[666,3893,3894],{"class":675},"boolean",[666,3896,988],{"class":927},[666,3898,3877],{"class":927},[666,3900,3901],{"class":668,"line":3022},[666,3902,2157],{"class":927},[666,3904,3906,3908,3911,3913,3916,3918],{"class":668,"line":3905},24,[666,3907,976],{"class":927},[666,3909,3910],{"class":923}," satisfies",[666,3912,3496],{"class":672},[666,3914,3915],{"class":927},"\u003Ctypeof",[666,3917,3573],{"class":934},[666,3919,3920],{"class":927},">;\n",[666,3922,3924],{"class":668,"line":3923},25,[666,3925,1022],{"emptyLinePlaceholder":337},[666,3927,3929,3931,3933,3936],{"class":668,"line":3928},26,[666,3930,1110],{"class":923},[666,3932,1113],{"class":923},[666,3934,3935],{"class":934}," meta",[666,3937,991],{"class":927},[666,3939,3941,3944,3947,3949,3951,3953,3955],{"class":668,"line":3940},27,[666,3942,3943],{"class":1028},"type",[666,3945,3946],{"class":672}," Story",[666,3948,1704],{"class":927},[666,3950,3502],{"class":672},[666,3952,3915],{"class":927},[666,3954,3935],{"class":934},[666,3956,3920],{"class":927},[666,3958,3960],{"class":668,"line":3959},28,[666,3961,1022],{"emptyLinePlaceholder":337},[666,3963,3965,3967,3970,3973,3975,3977,3979],{"class":668,"line":3964},29,[666,3966,1110],{"class":923},[666,3968,3969],{"class":1028}," const",[666,3971,3972],{"class":934}," Default",[666,3974,1228],{"class":927},[666,3976,3946],{"class":672},[666,3978,1704],{"class":927},[666,3980,928],{"class":927},[666,3982,3984,3987,3989],{"class":668,"line":3983},30,[666,3985,3986],{"class":1224},"    args",[666,3988,1228],{"class":927},[666,3990,928],{"class":927},[666,3992,3994,3996,3998,4000,4002,4004],{"class":668,"line":3993},31,[666,3995,2835],{"class":1224},[666,3997,1228],{"class":927},[666,3999,982],{"class":927},[666,4001,346],{"class":675},[666,4003,988],{"class":927},[666,4005,938],{"class":927},[666,4007,4009],{"class":668,"line":4008},32,[666,4010,2157],{"class":927},[666,4012,4014],{"class":668,"line":4013},33,[666,4015,1779],{"class":927},[666,4017,4019],{"class":668,"line":4018},34,[666,4020,1022],{"emptyLinePlaceholder":337},[666,4022,4024,4026,4028,4031,4033,4035,4037],{"class":668,"line":4023},35,[666,4025,1110],{"class":923},[666,4027,3969],{"class":1028},[666,4029,4030],{"class":934}," Primary",[666,4032,1228],{"class":927},[666,4034,3946],{"class":672},[666,4036,1704],{"class":927},[666,4038,928],{"class":927},[666,4040,4042,4044,4046],{"class":668,"line":4041},36,[666,4043,3986],{"class":1224},[666,4045,1228],{"class":927},[666,4047,928],{"class":927},[666,4049,4051,4053,4055,4057,4059,4061],{"class":668,"line":4050},37,[666,4052,2632],{"class":1224},[666,4054,1228],{"class":927},[666,4056,982],{"class":927},[666,4058,2640],{"class":675},[666,4060,988],{"class":927},[666,4062,938],{"class":927},[666,4064,4066,4068,4070,4072,4075,4077],{"class":668,"line":4065},38,[666,4067,2835],{"class":1224},[666,4069,1228],{"class":927},[666,4071,982],{"class":927},[666,4073,4074],{"class":675},"Primary",[666,4076,988],{"class":927},[666,4078,938],{"class":927},[666,4080,4082],{"class":668,"line":4081},39,[666,4083,2157],{"class":927},[666,4085,4087],{"class":668,"line":4086},40,[666,4088,1779],{"class":927},[666,4090,4092],{"class":668,"line":4091},41,[666,4093,1022],{"emptyLinePlaceholder":337},[666,4095,4097,4099,4101,4104,4106,4108,4110],{"class":668,"line":4096},42,[666,4098,1110],{"class":923},[666,4100,3969],{"class":1028},[666,4102,4103],{"class":934}," Outline",[666,4105,1228],{"class":927},[666,4107,3946],{"class":672},[666,4109,1704],{"class":927},[666,4111,928],{"class":927},[666,4113,4115,4117,4119],{"class":668,"line":4114},43,[666,4116,3986],{"class":1224},[666,4118,1228],{"class":927},[666,4120,928],{"class":927},[666,4122,4124,4126,4128,4130,4132,4134],{"class":668,"line":4123},44,[666,4125,2722],{"class":1224},[666,4127,1228],{"class":927},[666,4129,982],{"class":927},[666,4131,2738],{"class":675},[666,4133,988],{"class":927},[666,4135,938],{"class":927},[666,4137,4139,4141,4143,4145,4148,4150],{"class":668,"line":4138},45,[666,4140,2835],{"class":1224},[666,4142,1228],{"class":927},[666,4144,982],{"class":927},[666,4146,4147],{"class":675},"Outline",[666,4149,988],{"class":927},[666,4151,938],{"class":927},[666,4153,4155],{"class":668,"line":4154},46,[666,4156,2157],{"class":927},[666,4158,4160],{"class":668,"line":4159},47,[666,4161,1779],{"class":927},[650,4163,4164],{"v-slot:react":652},[657,4165,4167],{"className":914,"code":4166,"filename":3483,"language":916,"meta":652,"style":652},"import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Button } from '../src/components/Button';\n\nconst meta = {\n    title: 'Components/Button',\n    component: Button,\n    tags: ['autodocs'],\n    argTypes: {\n        color: {\n            control: 'select',\n            options: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],\n        },\n        variant: {\n            control: 'select',\n            options: ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'],\n        },\n        size: {\n            control: 'select',\n            options: ['xs', 'sm', 'md', 'lg', 'xl'],\n        },\n        label: { control: 'text' },\n        disabled: { control: 'boolean' },\n    },\n} satisfies Meta\u003Ctypeof Button>;\n\nexport default meta;\ntype Story = StoryObj\u003Ctypeof meta>;\n\nexport const Default: Story = {\n    args: {\n        label: 'Button',\n    },\n};\n\nexport const Primary: Story = {\n    args: {\n        color: 'primary',\n        label: 'Primary',\n    },\n};\n\nexport const Outline: Story = {\n    args: {\n        variant: 'outline',\n        label: 'Outline',\n    },\n};\n",[577,4168,4169,4195,4216,4220,4230,4244,4254,4272,4280,4288,4302,4360,4364,4372,4386,4444,4448,4456,4470,4520,4524,4544,4564,4568,4582,4586,4596,4612,4616,4632,4640,4654,4658,4662,4666,4682,4690,4704,4718,4722,4726,4730,4746,4754,4768,4782,4786],{"__ignoreMap":652},[666,4170,4171,4173,4175,4177,4179,4181,4183,4185,4187,4189,4191,4193],{"class":668,"line":669},[666,4172,924],{"class":923},[666,4174,1668],{"class":923},[666,4176,999],{"class":927},[666,4178,3496],{"class":934},[666,4180,3499],{"class":927},[666,4182,3502],{"class":934},[666,4184,1005],{"class":927},[666,4186,979],{"class":923},[666,4188,982],{"class":927},[666,4190,1819],{"class":675},[666,4192,988],{"class":927},[666,4194,991],{"class":927},[666,4196,4197,4199,4201,4203,4205,4207,4209,4212,4214],{"class":668,"line":931},[666,4198,924],{"class":923},[666,4200,999],{"class":927},[666,4202,3573],{"class":934},[666,4204,1005],{"class":927},[666,4206,979],{"class":923},[666,4208,982],{"class":927},[666,4210,4211],{"class":675},"../src/components/Button",[666,4213,988],{"class":927},[666,4215,991],{"class":927},[666,4217,4218],{"class":668,"line":941},[666,4219,1022],{"emptyLinePlaceholder":337},[666,4221,4222,4224,4226,4228],{"class":668,"line":949},[666,4223,1029],{"class":1028},[666,4225,3543],{"class":934},[666,4227,1035],{"class":927},[666,4229,928],{"class":927},[666,4231,4232,4234,4236,4238,4240,4242],{"class":668,"line":957},[666,4233,3552],{"class":1224},[666,4235,1228],{"class":927},[666,4237,982],{"class":927},[666,4239,3559],{"class":675},[666,4241,988],{"class":927},[666,4243,938],{"class":927},[666,4245,4246,4248,4250,4252],{"class":668,"line":965},[666,4247,3568],{"class":1224},[666,4249,1228],{"class":927},[666,4251,3573],{"class":934},[666,4253,938],{"class":927},[666,4255,4256,4258,4260,4262,4264,4266,4268,4270],{"class":668,"line":973},[666,4257,3580],{"class":1224},[666,4259,1228],{"class":927},[666,4261,3585],{"class":934},[666,4263,988],{"class":927},[666,4265,3590],{"class":675},[666,4267,988],{"class":927},[666,4269,3595],{"class":934},[666,4271,938],{"class":927},[666,4273,4274,4276,4278],{"class":668,"line":994},[666,4275,3602],{"class":1224},[666,4277,1228],{"class":927},[666,4279,928],{"class":927},[666,4281,4282,4284,4286],{"class":668,"line":1019},[666,4283,2632],{"class":1224},[666,4285,1228],{"class":927},[666,4287,928],{"class":927},[666,4289,4290,4292,4294,4296,4298,4300],{"class":668,"line":1025},[666,4291,3619],{"class":1224},[666,4293,1228],{"class":927},[666,4295,982],{"class":927},[666,4297,3626],{"class":675},[666,4299,988],{"class":927},[666,4301,938],{"class":927},[666,4303,4304,4306,4308,4310,4312,4314,4316,4318,4320,4322,4324,4326,4328,4330,4332,4334,4336,4338,4340,4342,4344,4346,4348,4350,4352,4354,4356,4358],{"class":668,"line":1046},[666,4305,3635],{"class":1224},[666,4307,1228],{"class":927},[666,4309,3585],{"class":934},[666,4311,988],{"class":927},[666,4313,2640],{"class":675},[666,4315,988],{"class":927},[666,4317,3499],{"class":927},[666,4319,982],{"class":927},[666,4321,2650],{"class":675},[666,4323,988],{"class":927},[666,4325,3499],{"class":927},[666,4327,982],{"class":927},[666,4329,2659],{"class":675},[666,4331,988],{"class":927},[666,4333,3499],{"class":927},[666,4335,982],{"class":927},[666,4337,2668],{"class":675},[666,4339,988],{"class":927},[666,4341,3499],{"class":927},[666,4343,982],{"class":927},[666,4345,2677],{"class":675},[666,4347,988],{"class":927},[666,4349,3499],{"class":927},[666,4351,982],{"class":927},[666,4353,2686],{"class":675},[666,4355,988],{"class":927},[666,4357,3595],{"class":934},[666,4359,938],{"class":927},[666,4361,4362],{"class":668,"line":1051},[666,4363,3694],{"class":927},[666,4365,4366,4368,4370],{"class":668,"line":1062},[666,4367,2722],{"class":1224},[666,4369,1228],{"class":927},[666,4371,928],{"class":927},[666,4373,4374,4376,4378,4380,4382,4384],{"class":668,"line":1072},[666,4375,3619],{"class":1224},[666,4377,1228],{"class":927},[666,4379,982],{"class":927},[666,4381,3626],{"class":675},[666,4383,988],{"class":927},[666,4385,938],{"class":927},[666,4387,4388,4390,4392,4394,4396,4398,4400,4402,4404,4406,4408,4410,4412,4414,4416,4418,4420,4422,4424,4426,4428,4430,4432,4434,4436,4438,4440,4442],{"class":668,"line":1082},[666,4389,3635],{"class":1224},[666,4391,1228],{"class":927},[666,4393,3585],{"class":934},[666,4395,988],{"class":927},[666,4397,2729],{"class":675},[666,4399,988],{"class":927},[666,4401,3499],{"class":927},[666,4403,982],{"class":927},[666,4405,2738],{"class":675},[666,4407,988],{"class":927},[666,4409,3499],{"class":927},[666,4411,982],{"class":927},[666,4413,2747],{"class":675},[666,4415,988],{"class":927},[666,4417,3499],{"class":927},[666,4419,982],{"class":927},[666,4421,2756],{"class":675},[666,4423,988],{"class":927},[666,4425,3499],{"class":927},[666,4427,982],{"class":927},[666,4429,2765],{"class":675},[666,4431,988],{"class":927},[666,4433,3499],{"class":927},[666,4435,982],{"class":927},[666,4437,2774],{"class":675},[666,4439,988],{"class":927},[666,4441,3595],{"class":934},[666,4443,938],{"class":927},[666,4445,4446],{"class":668,"line":1092},[666,4447,3694],{"class":927},[666,4449,4450,4452,4454],{"class":668,"line":1102},[666,4451,2783],{"class":1224},[666,4453,1228],{"class":927},[666,4455,928],{"class":927},[666,4457,4458,4460,4462,4464,4466,4468],{"class":668,"line":1107},[666,4459,3619],{"class":1224},[666,4461,1228],{"class":927},[666,4463,982],{"class":927},[666,4465,3626],{"class":675},[666,4467,988],{"class":927},[666,4469,938],{"class":927},[666,4471,4472,4474,4476,4478,4480,4482,4484,4486,4488,4490,4492,4494,4496,4498,4500,4502,4504,4506,4508,4510,4512,4514,4516,4518],{"class":668,"line":2969},[666,4473,3635],{"class":1224},[666,4475,1228],{"class":927},[666,4477,3585],{"class":934},[666,4479,988],{"class":927},[666,4481,2790],{"class":675},[666,4483,988],{"class":927},[666,4485,3499],{"class":927},[666,4487,982],{"class":927},[666,4489,2799],{"class":675},[666,4491,988],{"class":927},[666,4493,3499],{"class":927},[666,4495,982],{"class":927},[666,4497,2808],{"class":675},[666,4499,988],{"class":927},[666,4501,3499],{"class":927},[666,4503,982],{"class":927},[666,4505,2817],{"class":675},[666,4507,988],{"class":927},[666,4509,3499],{"class":927},[666,4511,982],{"class":927},[666,4513,2826],{"class":675},[666,4515,988],{"class":927},[666,4517,3595],{"class":934},[666,4519,938],{"class":927},[666,4521,4522],{"class":668,"line":2989},[666,4523,3694],{"class":927},[666,4525,4526,4528,4530,4532,4534,4536,4538,4540,4542],{"class":668,"line":2995},[666,4527,2835],{"class":1224},[666,4529,1228],{"class":927},[666,4531,999],{"class":927},[666,4533,3865],{"class":1224},[666,4535,1228],{"class":927},[666,4537,982],{"class":927},[666,4539,3872],{"class":675},[666,4541,988],{"class":927},[666,4543,3877],{"class":927},[666,4545,4546,4548,4550,4552,4554,4556,4558,4560,4562],{"class":668,"line":3012},[666,4547,2847],{"class":1224},[666,4549,1228],{"class":927},[666,4551,999],{"class":927},[666,4553,3865],{"class":1224},[666,4555,1228],{"class":927},[666,4557,982],{"class":927},[666,4559,3894],{"class":675},[666,4561,988],{"class":927},[666,4563,3877],{"class":927},[666,4565,4566],{"class":668,"line":3022},[666,4567,2157],{"class":927},[666,4569,4570,4572,4574,4576,4578,4580],{"class":668,"line":3905},[666,4571,976],{"class":927},[666,4573,3910],{"class":923},[666,4575,3496],{"class":672},[666,4577,3915],{"class":927},[666,4579,3573],{"class":934},[666,4581,3920],{"class":927},[666,4583,4584],{"class":668,"line":3923},[666,4585,1022],{"emptyLinePlaceholder":337},[666,4587,4588,4590,4592,4594],{"class":668,"line":3928},[666,4589,1110],{"class":923},[666,4591,1113],{"class":923},[666,4593,3935],{"class":934},[666,4595,991],{"class":927},[666,4597,4598,4600,4602,4604,4606,4608,4610],{"class":668,"line":3940},[666,4599,3943],{"class":1028},[666,4601,3946],{"class":672},[666,4603,1704],{"class":927},[666,4605,3502],{"class":672},[666,4607,3915],{"class":927},[666,4609,3935],{"class":934},[666,4611,3920],{"class":927},[666,4613,4614],{"class":668,"line":3959},[666,4615,1022],{"emptyLinePlaceholder":337},[666,4617,4618,4620,4622,4624,4626,4628,4630],{"class":668,"line":3964},[666,4619,1110],{"class":923},[666,4621,3969],{"class":1028},[666,4623,3972],{"class":934},[666,4625,1228],{"class":927},[666,4627,3946],{"class":672},[666,4629,1704],{"class":927},[666,4631,928],{"class":927},[666,4633,4634,4636,4638],{"class":668,"line":3983},[666,4635,3986],{"class":1224},[666,4637,1228],{"class":927},[666,4639,928],{"class":927},[666,4641,4642,4644,4646,4648,4650,4652],{"class":668,"line":3993},[666,4643,2835],{"class":1224},[666,4645,1228],{"class":927},[666,4647,982],{"class":927},[666,4649,346],{"class":675},[666,4651,988],{"class":927},[666,4653,938],{"class":927},[666,4655,4656],{"class":668,"line":4008},[666,4657,2157],{"class":927},[666,4659,4660],{"class":668,"line":4013},[666,4661,1779],{"class":927},[666,4663,4664],{"class":668,"line":4018},[666,4665,1022],{"emptyLinePlaceholder":337},[666,4667,4668,4670,4672,4674,4676,4678,4680],{"class":668,"line":4023},[666,4669,1110],{"class":923},[666,4671,3969],{"class":1028},[666,4673,4030],{"class":934},[666,4675,1228],{"class":927},[666,4677,3946],{"class":672},[666,4679,1704],{"class":927},[666,4681,928],{"class":927},[666,4683,4684,4686,4688],{"class":668,"line":4041},[666,4685,3986],{"class":1224},[666,4687,1228],{"class":927},[666,4689,928],{"class":927},[666,4691,4692,4694,4696,4698,4700,4702],{"class":668,"line":4050},[666,4693,2632],{"class":1224},[666,4695,1228],{"class":927},[666,4697,982],{"class":927},[666,4699,2640],{"class":675},[666,4701,988],{"class":927},[666,4703,938],{"class":927},[666,4705,4706,4708,4710,4712,4714,4716],{"class":668,"line":4065},[666,4707,2835],{"class":1224},[666,4709,1228],{"class":927},[666,4711,982],{"class":927},[666,4713,4074],{"class":675},[666,4715,988],{"class":927},[666,4717,938],{"class":927},[666,4719,4720],{"class":668,"line":4081},[666,4721,2157],{"class":927},[666,4723,4724],{"class":668,"line":4086},[666,4725,1779],{"class":927},[666,4727,4728],{"class":668,"line":4091},[666,4729,1022],{"emptyLinePlaceholder":337},[666,4731,4732,4734,4736,4738,4740,4742,4744],{"class":668,"line":4096},[666,4733,1110],{"class":923},[666,4735,3969],{"class":1028},[666,4737,4103],{"class":934},[666,4739,1228],{"class":927},[666,4741,3946],{"class":672},[666,4743,1704],{"class":927},[666,4745,928],{"class":927},[666,4747,4748,4750,4752],{"class":668,"line":4114},[666,4749,3986],{"class":1224},[666,4751,1228],{"class":927},[666,4753,928],{"class":927},[666,4755,4756,4758,4760,4762,4764,4766],{"class":668,"line":4123},[666,4757,2722],{"class":1224},[666,4759,1228],{"class":927},[666,4761,982],{"class":927},[666,4763,2738],{"class":675},[666,4765,988],{"class":927},[666,4767,938],{"class":927},[666,4769,4770,4772,4774,4776,4778,4780],{"class":668,"line":4138},[666,4771,2835],{"class":1224},[666,4773,1228],{"class":927},[666,4775,982],{"class":927},[666,4777,4147],{"class":675},[666,4779,988],{"class":927},[666,4781,938],{"class":927},[666,4783,4784],{"class":668,"line":4154},[666,4785,2157],{"class":927},[666,4787,4788],{"class":668,"line":4159},[666,4789,1779],{"class":927},[650,4791,4792],{"v-slot:other":652},[657,4793,4795],{"className":914,"code":4794,"filename":3483,"language":916,"meta":652,"style":652},"import type { Meta, StoryObj } from '@storybook/html-vite';\nimport { createButton } from '../src/components/button';\n\nconst meta = {\n    title: 'Components/Button',\n    tags: ['autodocs'],\n    render: (args) => createButton(args),\n    argTypes: {\n        color: {\n            control: 'select',\n            options: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],\n        },\n        variant: {\n            control: 'select',\n            options: ['solid', 'outline', 'soft', 'subtle', 'ghost', 'link'],\n        },\n        size: {\n            control: 'select',\n            options: ['xs', 'sm', 'md', 'lg', 'xl'],\n        },\n        label: { control: 'text' },\n        disabled: { control: 'boolean' },\n    },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj\u003Ctypeof meta>;\n\nexport const Default: Story = {\n    args: {\n        label: 'Button',\n    },\n};\n\nexport const Primary: Story = {\n    args: {\n        color: 'primary',\n        label: 'Primary',\n    },\n};\n\nexport const Outline: Story = {\n    args: {\n        variant: 'outline',\n        label: 'Outline',\n    },\n};\n",[577,4796,4797,4823,4844,4848,4858,4872,4890,4915,4923,4931,4945,5003,5007,5015,5029,5087,5091,5099,5113,5163,5167,5187,5207,5211,5221,5225,5235,5251,5255,5271,5279,5293,5297,5301,5305,5321,5329,5343,5357,5361,5365,5369,5385,5393,5407,5421,5425],{"__ignoreMap":652},[666,4798,4799,4801,4803,4805,4807,4809,4811,4813,4815,4817,4819,4821],{"class":668,"line":669},[666,4800,924],{"class":923},[666,4802,1668],{"class":923},[666,4804,999],{"class":927},[666,4806,3496],{"class":934},[666,4808,3499],{"class":927},[666,4810,3502],{"class":934},[666,4812,1005],{"class":927},[666,4814,979],{"class":923},[666,4816,982],{"class":927},[666,4818,1947],{"class":675},[666,4820,988],{"class":927},[666,4822,991],{"class":927},[666,4824,4825,4827,4829,4831,4833,4835,4837,4840,4842],{"class":668,"line":931},[666,4826,924],{"class":923},[666,4828,999],{"class":927},[666,4830,3199],{"class":934},[666,4832,1005],{"class":927},[666,4834,979],{"class":923},[666,4836,982],{"class":927},[666,4838,4839],{"class":675},"../src/components/button",[666,4841,988],{"class":927},[666,4843,991],{"class":927},[666,4845,4846],{"class":668,"line":941},[666,4847,1022],{"emptyLinePlaceholder":337},[666,4849,4850,4852,4854,4856],{"class":668,"line":949},[666,4851,1029],{"class":1028},[666,4853,3543],{"class":934},[666,4855,1035],{"class":927},[666,4857,928],{"class":927},[666,4859,4860,4862,4864,4866,4868,4870],{"class":668,"line":957},[666,4861,3552],{"class":1224},[666,4863,1228],{"class":927},[666,4865,982],{"class":927},[666,4867,3559],{"class":675},[666,4869,988],{"class":927},[666,4871,938],{"class":927},[666,4873,4874,4876,4878,4880,4882,4884,4886,4888],{"class":668,"line":965},[666,4875,3580],{"class":1224},[666,4877,1228],{"class":927},[666,4879,3585],{"class":934},[666,4881,988],{"class":927},[666,4883,3590],{"class":675},[666,4885,988],{"class":927},[666,4887,3595],{"class":934},[666,4889,938],{"class":927},[666,4891,4892,4895,4897,4900,4903,4905,4908,4910,4913],{"class":668,"line":973},[666,4893,4894],{"class":1038},"    render",[666,4896,1228],{"class":927},[666,4898,4899],{"class":927}," (",[666,4901,4902],{"class":3204},"args",[666,4904,633],{"class":927},[666,4906,4907],{"class":1028}," =>",[666,4909,3199],{"class":1038},[666,4911,4912],{"class":934},"(args)",[666,4914,938],{"class":927},[666,4916,4917,4919,4921],{"class":668,"line":994},[666,4918,3602],{"class":1224},[666,4920,1228],{"class":927},[666,4922,928],{"class":927},[666,4924,4925,4927,4929],{"class":668,"line":1019},[666,4926,2632],{"class":1224},[666,4928,1228],{"class":927},[666,4930,928],{"class":927},[666,4932,4933,4935,4937,4939,4941,4943],{"class":668,"line":1025},[666,4934,3619],{"class":1224},[666,4936,1228],{"class":927},[666,4938,982],{"class":927},[666,4940,3626],{"class":675},[666,4942,988],{"class":927},[666,4944,938],{"class":927},[666,4946,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967,4969,4971,4973,4975,4977,4979,4981,4983,4985,4987,4989,4991,4993,4995,4997,4999,5001],{"class":668,"line":1046},[666,4948,3635],{"class":1224},[666,4950,1228],{"class":927},[666,4952,3585],{"class":934},[666,4954,988],{"class":927},[666,4956,2640],{"class":675},[666,4958,988],{"class":927},[666,4960,3499],{"class":927},[666,4962,982],{"class":927},[666,4964,2650],{"class":675},[666,4966,988],{"class":927},[666,4968,3499],{"class":927},[666,4970,982],{"class":927},[666,4972,2659],{"class":675},[666,4974,988],{"class":927},[666,4976,3499],{"class":927},[666,4978,982],{"class":927},[666,4980,2668],{"class":675},[666,4982,988],{"class":927},[666,4984,3499],{"class":927},[666,4986,982],{"class":927},[666,4988,2677],{"class":675},[666,4990,988],{"class":927},[666,4992,3499],{"class":927},[666,4994,982],{"class":927},[666,4996,2686],{"class":675},[666,4998,988],{"class":927},[666,5000,3595],{"class":934},[666,5002,938],{"class":927},[666,5004,5005],{"class":668,"line":1051},[666,5006,3694],{"class":927},[666,5008,5009,5011,5013],{"class":668,"line":1062},[666,5010,2722],{"class":1224},[666,5012,1228],{"class":927},[666,5014,928],{"class":927},[666,5016,5017,5019,5021,5023,5025,5027],{"class":668,"line":1072},[666,5018,3619],{"class":1224},[666,5020,1228],{"class":927},[666,5022,982],{"class":927},[666,5024,3626],{"class":675},[666,5026,988],{"class":927},[666,5028,938],{"class":927},[666,5030,5031,5033,5035,5037,5039,5041,5043,5045,5047,5049,5051,5053,5055,5057,5059,5061,5063,5065,5067,5069,5071,5073,5075,5077,5079,5081,5083,5085],{"class":668,"line":1082},[666,5032,3635],{"class":1224},[666,5034,1228],{"class":927},[666,5036,3585],{"class":934},[666,5038,988],{"class":927},[666,5040,2729],{"class":675},[666,5042,988],{"class":927},[666,5044,3499],{"class":927},[666,5046,982],{"class":927},[666,5048,2738],{"class":675},[666,5050,988],{"class":927},[666,5052,3499],{"class":927},[666,5054,982],{"class":927},[666,5056,2747],{"class":675},[666,5058,988],{"class":927},[666,5060,3499],{"class":927},[666,5062,982],{"class":927},[666,5064,2756],{"class":675},[666,5066,988],{"class":927},[666,5068,3499],{"class":927},[666,5070,982],{"class":927},[666,5072,2765],{"class":675},[666,5074,988],{"class":927},[666,5076,3499],{"class":927},[666,5078,982],{"class":927},[666,5080,2774],{"class":675},[666,5082,988],{"class":927},[666,5084,3595],{"class":934},[666,5086,938],{"class":927},[666,5088,5089],{"class":668,"line":1092},[666,5090,3694],{"class":927},[666,5092,5093,5095,5097],{"class":668,"line":1102},[666,5094,2783],{"class":1224},[666,5096,1228],{"class":927},[666,5098,928],{"class":927},[666,5100,5101,5103,5105,5107,5109,5111],{"class":668,"line":1107},[666,5102,3619],{"class":1224},[666,5104,1228],{"class":927},[666,5106,982],{"class":927},[666,5108,3626],{"class":675},[666,5110,988],{"class":927},[666,5112,938],{"class":927},[666,5114,5115,5117,5119,5121,5123,5125,5127,5129,5131,5133,5135,5137,5139,5141,5143,5145,5147,5149,5151,5153,5155,5157,5159,5161],{"class":668,"line":2969},[666,5116,3635],{"class":1224},[666,5118,1228],{"class":927},[666,5120,3585],{"class":934},[666,5122,988],{"class":927},[666,5124,2790],{"class":675},[666,5126,988],{"class":927},[666,5128,3499],{"class":927},[666,5130,982],{"class":927},[666,5132,2799],{"class":675},[666,5134,988],{"class":927},[666,5136,3499],{"class":927},[666,5138,982],{"class":927},[666,5140,2808],{"class":675},[666,5142,988],{"class":927},[666,5144,3499],{"class":927},[666,5146,982],{"class":927},[666,5148,2817],{"class":675},[666,5150,988],{"class":927},[666,5152,3499],{"class":927},[666,5154,982],{"class":927},[666,5156,2826],{"class":675},[666,5158,988],{"class":927},[666,5160,3595],{"class":934},[666,5162,938],{"class":927},[666,5164,5165],{"class":668,"line":2989},[666,5166,3694],{"class":927},[666,5168,5169,5171,5173,5175,5177,5179,5181,5183,5185],{"class":668,"line":2995},[666,5170,2835],{"class":1224},[666,5172,1228],{"class":927},[666,5174,999],{"class":927},[666,5176,3865],{"class":1224},[666,5178,1228],{"class":927},[666,5180,982],{"class":927},[666,5182,3872],{"class":675},[666,5184,988],{"class":927},[666,5186,3877],{"class":927},[666,5188,5189,5191,5193,5195,5197,5199,5201,5203,5205],{"class":668,"line":3012},[666,5190,2847],{"class":1224},[666,5192,1228],{"class":927},[666,5194,999],{"class":927},[666,5196,3865],{"class":1224},[666,5198,1228],{"class":927},[666,5200,982],{"class":927},[666,5202,3894],{"class":675},[666,5204,988],{"class":927},[666,5206,3877],{"class":927},[666,5208,5209],{"class":668,"line":3022},[666,5210,2157],{"class":927},[666,5212,5213,5215,5217,5219],{"class":668,"line":3905},[666,5214,976],{"class":927},[666,5216,3910],{"class":923},[666,5218,3496],{"class":672},[666,5220,991],{"class":927},[666,5222,5223],{"class":668,"line":3923},[666,5224,1022],{"emptyLinePlaceholder":337},[666,5226,5227,5229,5231,5233],{"class":668,"line":3928},[666,5228,1110],{"class":923},[666,5230,1113],{"class":923},[666,5232,3935],{"class":934},[666,5234,991],{"class":927},[666,5236,5237,5239,5241,5243,5245,5247,5249],{"class":668,"line":3940},[666,5238,3943],{"class":1028},[666,5240,3946],{"class":672},[666,5242,1704],{"class":927},[666,5244,3502],{"class":672},[666,5246,3915],{"class":927},[666,5248,3935],{"class":934},[666,5250,3920],{"class":927},[666,5252,5253],{"class":668,"line":3959},[666,5254,1022],{"emptyLinePlaceholder":337},[666,5256,5257,5259,5261,5263,5265,5267,5269],{"class":668,"line":3964},[666,5258,1110],{"class":923},[666,5260,3969],{"class":1028},[666,5262,3972],{"class":934},[666,5264,1228],{"class":927},[666,5266,3946],{"class":672},[666,5268,1704],{"class":927},[666,5270,928],{"class":927},[666,5272,5273,5275,5277],{"class":668,"line":3983},[666,5274,3986],{"class":1224},[666,5276,1228],{"class":927},[666,5278,928],{"class":927},[666,5280,5281,5283,5285,5287,5289,5291],{"class":668,"line":3993},[666,5282,2835],{"class":1224},[666,5284,1228],{"class":927},[666,5286,982],{"class":927},[666,5288,346],{"class":675},[666,5290,988],{"class":927},[666,5292,938],{"class":927},[666,5294,5295],{"class":668,"line":4008},[666,5296,2157],{"class":927},[666,5298,5299],{"class":668,"line":4013},[666,5300,1779],{"class":927},[666,5302,5303],{"class":668,"line":4018},[666,5304,1022],{"emptyLinePlaceholder":337},[666,5306,5307,5309,5311,5313,5315,5317,5319],{"class":668,"line":4023},[666,5308,1110],{"class":923},[666,5310,3969],{"class":1028},[666,5312,4030],{"class":934},[666,5314,1228],{"class":927},[666,5316,3946],{"class":672},[666,5318,1704],{"class":927},[666,5320,928],{"class":927},[666,5322,5323,5325,5327],{"class":668,"line":4041},[666,5324,3986],{"class":1224},[666,5326,1228],{"class":927},[666,5328,928],{"class":927},[666,5330,5331,5333,5335,5337,5339,5341],{"class":668,"line":4050},[666,5332,2632],{"class":1224},[666,5334,1228],{"class":927},[666,5336,982],{"class":927},[666,5338,2640],{"class":675},[666,5340,988],{"class":927},[666,5342,938],{"class":927},[666,5344,5345,5347,5349,5351,5353,5355],{"class":668,"line":4065},[666,5346,2835],{"class":1224},[666,5348,1228],{"class":927},[666,5350,982],{"class":927},[666,5352,4074],{"class":675},[666,5354,988],{"class":927},[666,5356,938],{"class":927},[666,5358,5359],{"class":668,"line":4081},[666,5360,2157],{"class":927},[666,5362,5363],{"class":668,"line":4086},[666,5364,1779],{"class":927},[666,5366,5367],{"class":668,"line":4091},[666,5368,1022],{"emptyLinePlaceholder":337},[666,5370,5371,5373,5375,5377,5379,5381,5383],{"class":668,"line":4096},[666,5372,1110],{"class":923},[666,5374,3969],{"class":1028},[666,5376,4103],{"class":934},[666,5378,1228],{"class":927},[666,5380,3946],{"class":672},[666,5382,1704],{"class":927},[666,5384,928],{"class":927},[666,5386,5387,5389,5391],{"class":668,"line":4114},[666,5388,3986],{"class":1224},[666,5390,1228],{"class":927},[666,5392,928],{"class":927},[666,5394,5395,5397,5399,5401,5403,5405],{"class":668,"line":4123},[666,5396,2722],{"class":1224},[666,5398,1228],{"class":927},[666,5400,982],{"class":927},[666,5402,2738],{"class":675},[666,5404,988],{"class":927},[666,5406,938],{"class":927},[666,5408,5409,5411,5413,5415,5417,5419],{"class":668,"line":4138},[666,5410,2835],{"class":1224},[666,5412,1228],{"class":927},[666,5414,982],{"class":927},[666,5416,4147],{"class":675},[666,5418,988],{"class":927},[666,5420,938],{"class":927},[666,5422,5423],{"class":668,"line":4154},[666,5424,2157],{"class":927},[666,5426,5427],{"class":668,"line":4159},[666,5428,1779],{"class":927},[5430,5431,3155,5432,5435],"note",{},[577,5433,5434],{},"tags: ['autodocs']"," option tells Storybook to auto-generate a documentation page for the component from its stories and prop types.",[892,5437],{},[545,5439,5441],{"id":5440},"dark-mode","Dark Mode",[549,5443,5444,5445,5447],{},"Styleframe themes are driven by the ",[577,5446,605],{}," attribute on the DOM. To toggle dark mode in Storybook, listen for a theme change event in your preview and update the attribute:",[657,5449,5451],{"className":914,"code":5450,"filename":2059,"language":916,"meta":652,"style":652},"import 'virtual:styleframe.css';\n\nconst channel = (await import('storybook/preview-api')).addons.getChannel();\nconst { DARK_MODE_EVENT_NAME } = await import('@vueless/storybook-dark-mode');\n\nchannel.on(DARK_MODE_EVENT_NAME, (isDark: boolean) => {\n    if (isDark) {\n        document.body.dataset.theme = 'dark';\n    } else {\n        delete document.body.dataset.theme;\n    }\n});\n",[577,5452,5453,5465,5469,5512,5543,5547,5577,5591,5621,5630,5651,5656],{"__ignoreMap":652},[666,5454,5455,5457,5459,5461,5463],{"class":668,"line":669},[666,5456,924],{"class":923},[666,5458,982],{"class":927},[666,5460,579],{"class":675},[666,5462,988],{"class":927},[666,5464,991],{"class":927},[666,5466,5467],{"class":668,"line":931},[666,5468,1022],{"emptyLinePlaceholder":337},[666,5470,5471,5473,5476,5478,5480,5483,5486,5488,5490,5493,5495,5498,5500,5503,5505,5508,5510],{"class":668,"line":941},[666,5472,1029],{"class":1028},[666,5474,5475],{"class":934}," channel ",[666,5477,1035],{"class":927},[666,5479,4899],{"class":934},[666,5481,5482],{"class":923},"await",[666,5484,5485],{"class":927}," import",[666,5487,1216],{"class":934},[666,5489,988],{"class":927},[666,5491,5492],{"class":675},"storybook/preview-api",[666,5494,988],{"class":927},[666,5496,5497],{"class":934},"))",[666,5499,2429],{"class":927},[666,5501,5502],{"class":934},"addons",[666,5504,2429],{"class":927},[666,5506,5507],{"class":1038},"getChannel",[666,5509,1041],{"class":934},[666,5511,991],{"class":927},[666,5513,5514,5516,5518,5521,5523,5525,5528,5530,5532,5534,5537,5539,5541],{"class":668,"line":949},[666,5515,1029],{"class":1028},[666,5517,999],{"class":927},[666,5519,5520],{"class":934}," DARK_MODE_EVENT_NAME ",[666,5522,976],{"class":927},[666,5524,1704],{"class":927},[666,5526,5527],{"class":923}," await",[666,5529,5485],{"class":927},[666,5531,1216],{"class":934},[666,5533,988],{"class":927},[666,5535,5536],{"class":675},"@vueless/storybook-dark-mode",[666,5538,988],{"class":927},[666,5540,633],{"class":934},[666,5542,991],{"class":927},[666,5544,5545],{"class":668,"line":957},[666,5546,1022],{"emptyLinePlaceholder":337},[666,5548,5549,5552,5554,5557,5560,5562,5564,5567,5569,5571,5573,5575],{"class":668,"line":965},[666,5550,5551],{"class":934},"channel",[666,5553,2429],{"class":927},[666,5555,5556],{"class":1038},"on",[666,5558,5559],{"class":934},"(DARK_MODE_EVENT_NAME",[666,5561,3499],{"class":927},[666,5563,4899],{"class":927},[666,5565,5566],{"class":3204},"isDark",[666,5568,1228],{"class":927},[666,5570,2852],{"class":672},[666,5572,633],{"class":927},[666,5574,4907],{"class":1028},[666,5576,928],{"class":927},[666,5578,5579,5582,5584,5586,5589],{"class":668,"line":973},[666,5580,5581],{"class":923},"    if",[666,5583,4899],{"class":1224},[666,5585,5566],{"class":934},[666,5587,5588],{"class":1224},") ",[666,5590,1219],{"class":927},[666,5592,5593,5596,5598,5601,5603,5606,5608,5611,5613,5615,5617,5619],{"class":668,"line":994},[666,5594,5595],{"class":934},"        document",[666,5597,2429],{"class":927},[666,5599,5600],{"class":934},"body",[666,5602,2429],{"class":927},[666,5604,5605],{"class":934},"dataset",[666,5607,2429],{"class":927},[666,5609,5610],{"class":934},"theme",[666,5612,1704],{"class":927},[666,5614,982],{"class":927},[666,5616,2704],{"class":675},[666,5618,988],{"class":927},[666,5620,991],{"class":927},[666,5622,5623,5625,5628],{"class":668,"line":1019},[666,5624,3392],{"class":927},[666,5626,5627],{"class":923}," else",[666,5629,928],{"class":927},[666,5631,5632,5635,5637,5639,5641,5643,5645,5647,5649],{"class":668,"line":1025},[666,5633,5634],{"class":927},"        delete",[666,5636,3284],{"class":934},[666,5638,2429],{"class":927},[666,5640,5600],{"class":934},[666,5642,2429],{"class":927},[666,5644,5605],{"class":934},[666,5646,2429],{"class":927},[666,5648,5610],{"class":934},[666,5650,991],{"class":927},[666,5652,5653],{"class":668,"line":1046},[666,5654,5655],{"class":927},"    }\n",[666,5657,5658,5660,5662],{"class":668,"line":1051},[666,5659,976],{"class":927},[666,5661,633],{"class":934},[666,5663,991],{"class":927},[549,5665,5666,5667,5673,5674,5676],{},"This requires the ",[553,5668,5671],{"href":5669,"rel":5670,"target":558},"https://www.npmjs.com/package/@vueless/storybook-dark-mode",[557],[577,5672,5536],{}," addon. Install it and add it to your ",[577,5675,1651],{}," addons array:",[654,5678,5679,5695,5710,5725],{},[657,5680,5682],{"className":659,"code":5681,"filename":661,"language":662,"meta":652,"style":652},"pnpm add -D @vueless/storybook-dark-mode\n",[577,5683,5684],{"__ignoreMap":652},[666,5685,5686,5688,5690,5692],{"class":668,"line":669},[666,5687,661],{"class":672},[666,5689,676],{"class":675},[666,5691,679],{"class":675},[666,5693,5694],{"class":675}," @vueless/storybook-dark-mode\n",[657,5696,5698],{"className":659,"code":5697,"filename":689,"language":662,"meta":652,"style":652},"yarn add -D @vueless/storybook-dark-mode\n",[577,5699,5700],{"__ignoreMap":652},[666,5701,5702,5704,5706,5708],{"class":668,"line":669},[666,5703,689],{"class":672},[666,5705,676],{"class":675},[666,5707,679],{"class":675},[666,5709,5694],{"class":675},[657,5711,5713],{"className":659,"code":5712,"filename":707,"language":662,"meta":652,"style":652},"npm install -D @vueless/storybook-dark-mode\n",[577,5714,5715],{"__ignoreMap":652},[666,5716,5717,5719,5721,5723],{"class":668,"line":669},[666,5718,707],{"class":672},[666,5720,716],{"class":675},[666,5722,679],{"class":675},[666,5724,5694],{"class":675},[657,5726,5728],{"className":659,"code":5727,"filename":726,"language":662,"meta":652,"style":652},"bun add -D @vueless/storybook-dark-mode\n",[577,5729,5730],{"__ignoreMap":652},[666,5731,5732,5734,5736,5738],{"class":668,"line":669},[666,5733,726],{"class":672},[666,5735,676],{"class":675},[666,5737,679],{"class":675},[666,5739,5694],{"class":675},[657,5741,5743],{"className":914,"code":5742,"filename":1651,"language":916,"meta":652,"style":652},"const config = {\n    // ...\n    addons: [\n        '@storybook/addon-docs',\n        '@vueless/storybook-dark-mode',\n    ],\n};\n",[577,5744,5745,5756,5762,5770,5780,5790,5796],{"__ignoreMap":652},[666,5746,5747,5749,5752,5754],{"class":668,"line":669},[666,5748,1029],{"class":1028},[666,5750,5751],{"class":934}," config ",[666,5753,1035],{"class":927},[666,5755,928],{"class":927},[666,5757,5758],{"class":668,"line":931},[666,5759,5761],{"class":5760},"sHwdD","    // ...\n",[666,5763,5764,5766,5768],{"class":668,"line":941},[666,5765,1738],{"class":1224},[666,5767,1228],{"class":927},[666,5769,1231],{"class":934},[666,5771,5772,5774,5776,5778],{"class":668,"line":949},[666,5773,1720],{"class":927},[666,5775,1749],{"class":675},[666,5777,988],{"class":927},[666,5779,938],{"class":927},[666,5781,5782,5784,5786,5788],{"class":668,"line":957},[666,5783,1720],{"class":927},[666,5785,5536],{"class":675},[666,5787,988],{"class":927},[666,5789,938],{"class":927},[666,5791,5792,5794],{"class":668,"line":965},[666,5793,1316],{"class":934},[666,5795,938],{"class":927},[666,5797,5798],{"class":668,"line":973},[666,5799,1779],{"class":927},[549,5801,5802,5803,5806,5807,5810],{},"Once configured, a sun/moon toggle appears in the Storybook toolbar. Every recipe and utility that references theme-aware tokens (like ",[577,5804,5805],{},"@color.background"," or ",[577,5808,5809],{},"@color.text",") updates automatically.",[888,5812,5813,5815,5816,5818],{},[563,5814,2394],{}," The dark mode addon works with any framework — Vue, React, or vanilla HTML. It toggles a class and fires an event; the Styleframe integration only needs the ",[577,5817,605],{}," attribute on the body.",[892,5820],{},[545,5822,5824],{"id":5823},"best-practices","Best Practices",[567,5826,5827,5835,5844,5852,5861,5867],{},[570,5828,5829,5834],{},[563,5830,5831,5832],{},"Keep one ",[577,5833,615],{},": Share the same config between your app and Storybook so stories reflect the real design system",[570,5836,5837,5843],{},[563,5838,5839,5840,5842],{},"Co-locate ",[577,5841,595],{}," files",": Place recipe registrations next to the stories or components that use them for easy discovery",[570,5845,5846,5851],{},[563,5847,5848,5849],{},"Use ",[577,5850,5434],{},": Let Storybook auto-generate docs pages from your component props and stories",[570,5853,5854,5857,5858,5860],{},[563,5855,5856],{},"Scan story files",": Include ",[577,5859,1266],{}," in the scanner content so utility classes used in stories are extracted",[570,5862,5863,5866],{},[563,5864,5865],{},"Showcase all variants",": Create stories for each meaningful combination of recipe props — colors, variants, sizes, and states",[570,5868,5869,5872],{},[563,5870,5871],{},"Test dark mode",": Use the dark mode toggle to verify every component looks correct in both themes",[892,5874],{},[545,5876,5878],{"id":5877},"faq","FAQ",[5880,5881,5882,5895,5913,6098,6106,6116],"accordion",{},[5883,5884,5887,5888,5891,5892,5894],"accordion-item",{"icon":5885,"label":5886},"i-lucide-circle-help","Do I need a separate styleframe.config.ts for Storybook?","No. You should share the same config between your app and Storybook. If your Storybook lives in a separate directory (like a monorepo ",[577,5889,5890],{},"apps/storybook/","), you can either symlink the config or reference the shared ",[577,5893,985],{}," package that both consume. The point is that stories should reflect the same tokens and recipes your production app uses.",[5883,5896,5898,5899,5901,5902,2936,5905,5908,5909,5912],{"icon":5885,"label":5897},"Can I use utility classes directly in stories?","Yes. As long as your story files are included in the ",[577,5900,1132],{}," glob, utility classes like ",[577,5903,5904],{},"_display:flex",[577,5906,5907],{},"_gap:md",", and ",[577,5910,5911],{},"_padding:lg"," work in templates and JSX just like they do in your app code.",[5883,5914,5916,5922,6080],{"icon":5885,"label":5915},"How do I add more recipes?",[549,5917,5918,5919,5921],{},"Create a new ",[577,5920,595],{}," file in your stories or components directory. The Vite plugin discovers it automatically:",[657,5923,5926],{"className":914,"code":5924,"filename":5925,"language":916,"meta":652,"style":652},"import { useCardRecipe, useCardHeaderRecipe, useCardBodyRecipe, useCardFooterRecipe } from '@styleframe/theme';\nimport { styleframe } from 'virtual:styleframe';\n\nconst s = styleframe();\n\nconst card = useCardRecipe(s);\nconst cardHeader = useCardHeaderRecipe(s);\nconst cardBody = useCardBodyRecipe(s);\nconst cardFooter = useCardFooterRecipe(s);\n\nexport default s;\n","stories/card.styleframe.ts",[577,5927,5928,5964,5984,5988,6002,6006,6021,6036,6051,6066,6070],{"__ignoreMap":652},[666,5929,5930,5932,5934,5937,5939,5942,5944,5947,5949,5952,5954,5956,5958,5960,5962],{"class":668,"line":669},[666,5931,924],{"class":923},[666,5933,999],{"class":927},[666,5935,5936],{"class":934}," useCardRecipe",[666,5938,3499],{"class":927},[666,5940,5941],{"class":934}," useCardHeaderRecipe",[666,5943,3499],{"class":927},[666,5945,5946],{"class":934}," useCardBodyRecipe",[666,5948,3499],{"class":927},[666,5950,5951],{"class":934}," useCardFooterRecipe",[666,5953,1005],{"class":927},[666,5955,979],{"class":923},[666,5957,982],{"class":927},[666,5959,985],{"class":675},[666,5961,988],{"class":927},[666,5963,991],{"class":927},[666,5965,5966,5968,5970,5972,5974,5976,5978,5980,5982],{"class":668,"line":931},[666,5967,924],{"class":923},[666,5969,999],{"class":927},[666,5971,1002],{"class":934},[666,5973,1005],{"class":927},[666,5975,979],{"class":923},[666,5977,982],{"class":927},[666,5979,2428],{"class":675},[666,5981,988],{"class":927},[666,5983,991],{"class":927},[666,5985,5986],{"class":668,"line":941},[666,5987,1022],{"emptyLinePlaceholder":337},[666,5989,5990,5992,5994,5996,5998,6000],{"class":668,"line":949},[666,5991,1029],{"class":1028},[666,5993,1032],{"class":934},[666,5995,1035],{"class":927},[666,5997,1002],{"class":1038},[666,5999,1041],{"class":934},[666,6001,991],{"class":927},[666,6003,6004],{"class":668,"line":957},[666,6005,1022],{"emptyLinePlaceholder":337},[666,6007,6008,6010,6013,6015,6017,6019],{"class":668,"line":965},[666,6009,1029],{"class":1028},[666,6011,6012],{"class":934}," card ",[666,6014,1035],{"class":927},[666,6016,5936],{"class":1038},[666,6018,1057],{"class":934},[666,6020,991],{"class":927},[666,6022,6023,6025,6028,6030,6032,6034],{"class":668,"line":973},[666,6024,1029],{"class":1028},[666,6026,6027],{"class":934}," cardHeader ",[666,6029,1035],{"class":927},[666,6031,5941],{"class":1038},[666,6033,1057],{"class":934},[666,6035,991],{"class":927},[666,6037,6038,6040,6043,6045,6047,6049],{"class":668,"line":994},[666,6039,1029],{"class":1028},[666,6041,6042],{"class":934}," cardBody ",[666,6044,1035],{"class":927},[666,6046,5946],{"class":1038},[666,6048,1057],{"class":934},[666,6050,991],{"class":927},[666,6052,6053,6055,6058,6060,6062,6064],{"class":668,"line":1019},[666,6054,1029],{"class":1028},[666,6056,6057],{"class":934}," cardFooter ",[666,6059,1035],{"class":927},[666,6061,5951],{"class":1038},[666,6063,1057],{"class":934},[666,6065,991],{"class":927},[666,6067,6068],{"class":668,"line":1025},[666,6069,1022],{"emptyLinePlaceholder":337},[666,6071,6072,6074,6076,6078],{"class":668,"line":1046},[666,6073,1110],{"class":923},[666,6075,1113],{"class":923},[666,6077,1116],{"class":934},[666,6079,991],{"class":927},[549,6081,3155,6082,2936,6085,2936,6088,5908,6091,6094,6095,2429],{},[577,6083,6084],{},"card",[577,6086,6087],{},"cardHeader",[577,6089,6090],{},"cardBody",[577,6092,6093],{},"cardFooter"," functions are then available via ",[577,6096,6097],{},"import { card } from 'virtual:styleframe'",[5883,6099,6101,6102,6105],{"icon":5885,"label":6100},"What version of Storybook is supported?","Styleframe works with Storybook 10 and above, which uses Vite as the default bundler. Older versions that use Webpack may work with the Webpack plugin adapter (",[577,6103,6104],{},"styleframe/plugin/webpack","), but Vite is the recommended and tested path.",[5883,6107,6109,6110,6112,6113,6115],{"icon":5885,"label":6108},"Does HMR work with Styleframe in Storybook?","Yes. When you change a ",[577,6111,595],{}," file or ",[577,6114,615],{},", the Vite plugin triggers a hot update. Your stories reflect the new tokens, utilities, and recipe styles without a full page reload.",[5883,6117,6119,6120,6123,6124,5806,6127,6129,6130,6132],{"icon":5885,"label":6118},"Can I use Storybook addons like a11y and themes?","Yes. Styleframe doesn't interfere with Storybook addons. The ",[577,6121,6122],{},"@storybook/addon-a11y"," addon works out of the box for accessibility checks, and ",[577,6125,6126],{},"@storybook/addon-themes",[577,6128,5536],{}," can drive the ",[577,6131,605],{}," attribute that Styleframe themes respond to.",[6134,6135,6136],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .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 .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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":652,"searchDepth":931,"depth":931,"links":6138},[6139,6140,6141,6142,6148,6153,6154,6155],{"id":547,"depth":931,"text":78},{"id":619,"depth":931,"text":620},{"id":642,"depth":931,"text":17},{"id":896,"depth":931,"text":897,"children":6143},[6144,6145,6146,6147],{"id":904,"depth":941,"text":905},{"id":1121,"depth":941,"text":1122},{"id":1644,"depth":941,"text":1645},{"id":2052,"depth":941,"text":2053},{"id":2404,"depth":931,"text":2405,"children":6149},[6150,6151,6152],{"id":2418,"depth":941,"text":2419},{"id":2530,"depth":941,"text":2531},{"id":3464,"depth":941,"text":3465},{"id":5440,"depth":931,"text":5441},{"id":5823,"depth":931,"text":5824},{"id":5877,"depth":931,"text":5878},"Integrate Styleframe with Storybook to showcase your design system with type-safe recipes, design tokens, and dark mode support.",null,{},{"icon":70},{"title":67,"description":6156},{"loc":68},"rdS_LuOBbPA5DigjZhHhpd8Bhaj0A1feGuAEt5UbK4g",[6164,6166],{"title":62,"path":63,"stem":64,"description":6165,"icon":65,"children":-1},"Sync your Styleframe design tokens with Figma using the plugin and CLI commands for bidirectional token synchronization.",{"title":42,"path":43,"stem":44,"description":6167,"icon":45,"children":-1},"Use the Styleframe CLI to initialize projects and build optimized CSS from your configuration files.",1779257165067]