[{"data":1,"prerenderedAt":4082},["ShallowReactive",2],{"navigation_docs":3,"-docs-components-composables-chip":418,"-docs-components-composables-chip-surround":4077},[4,45,134,150,165,239,301,374],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/docs/getting-started","docs/01.getting-started",[10,15,35,40],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/docs/getting-started/introduction","docs/01.getting-started/01.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"children":19,"icon":34},"Installation","/docs/getting-started/installation","docs/01.getting-started/02.installation/00.index",[20,22,26,30],{"title":21,"path":17,"stem":18},"Overview",{"title":23,"path":24,"stem":25},"Vite Installation","/docs/getting-started/installation/vite","docs/01.getting-started/02.installation/01.vite",{"title":27,"path":28,"stem":29},"Nuxt Installation","/docs/getting-started/installation/nuxt","docs/01.getting-started/02.installation/02.nuxt",{"title":31,"path":32,"stem":33},"Custom Installation","/docs/getting-started/installation/custom","docs/01.getting-started/02.installation/03.custom","i-lucide-download",{"title":36,"path":37,"stem":38,"icon":39},"Licensing","/docs/getting-started/licensing","docs/01.getting-started/03.licensing","i-lucide-scale",{"title":41,"path":42,"stem":43,"icon":44},"CLI Reference","/docs/getting-started/cli","docs/01.getting-started/04.cli","i-lucide-square-terminal",{"title":46,"path":47,"stem":48,"children":49,"icon":6},"API Essentials","/docs/api","docs/02.api/00.index",[50,52,57,62,67,72,77,82,87,92,97,102,117,122,127,132],{"title":21,"path":47,"stem":48,"icon":51},"i-lucide-book-text",{"title":53,"path":54,"stem":55,"icon":56},"Instance","/docs/api/instance","docs/02.api/01.instance","i-lucide-cloud-lightning",{"title":58,"path":59,"stem":60,"icon":61},"Variables","/docs/api/variables","docs/02.api/02.variables","i-lucide-variable",{"title":63,"path":64,"stem":65,"icon":66},"Selectors","/docs/api/selectors","docs/02.api/03.selectors","i-lucide-scan-text",{"title":68,"path":69,"stem":70,"icon":71},"At-Rules","/docs/api/at-rules","docs/02.api/04.at-rules","i-lucide-at-sign",{"title":73,"path":74,"stem":75,"icon":76},"Media Queries","/docs/api/media-queries","docs/02.api/05.media-queries","i-lucide-image-upscale",{"title":78,"path":79,"stem":80,"icon":81},"Keyframes","/docs/api/keyframes","docs/02.api/06.keyframes","i-lucide-square-play",{"title":83,"path":84,"stem":85,"icon":86},"Interpolation","/docs/api/interpolation","docs/02.api/07.interpolation","i-lucide-wrap-text",{"title":88,"path":89,"stem":90,"icon":91},"Utilities","/docs/api/utilities","docs/02.api/08.utilities","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Utility Modifiers","/docs/api/utility-modifiers","docs/02.api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":98,"path":99,"stem":100,"icon":101},"Themes","/docs/api/themes","docs/02.api/10.themes","i-lucide-paintbrush",{"title":103,"path":104,"stem":105,"children":106,"icon":116},"Recipes","/docs/api/recipes","docs/02.api/11.recipes/00.index",[107,108,112],{"title":21,"path":104,"stem":105},{"title":109,"path":110,"stem":111},"Runtime","/docs/api/recipes/runtime","docs/02.api/11.recipes/01.runtime",{"title":113,"path":114,"stem":115},"Output Format","/docs/api/recipes/output-format","docs/02.api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":118,"path":119,"stem":120,"icon":121},"Composables","/docs/api/composables","docs/02.api/12.composables","i-lucide-component",{"title":123,"path":124,"stem":125,"icon":126},"Imports","/docs/api/imports","docs/02.api/13.imports","i-lucide-file-input",{"title":128,"path":129,"stem":130,"icon":131},"Merging","/docs/api/merging","docs/02.api/13.merging","i-lucide-squares-intersect",{"title":123,"path":124,"stem":133,"icon":126},"docs/02.api/14.imports",{"title":135,"path":136,"stem":137,"children":138,"icon":6},"Tooling","/docs/tooling","docs/03.tooling/00.index",[139,140,145],{"title":21,"path":136,"stem":137,"icon":51},{"title":141,"path":142,"stem":143,"icon":144},"Utility Scanner","/docs/tooling/scanner","docs/03.tooling/01.scanner","i-lucide-view",{"title":146,"path":147,"stem":148,"icon":149},"Figma Plugin","/docs/tooling/figma-plugin","docs/03.tooling/02.figma-plugin","i-simple-icons-figma",{"title":151,"icon":6,"path":152,"stem":153,"children":154,"page":6},"Resources","/docs/resources","docs/04.resources",[155,160],{"title":156,"path":157,"stem":158,"icon":159},"Guides","/docs/resources/guides","docs/04.resources/01.guides","i-lucide-book-open",{"title":161,"path":162,"stem":163,"icon":164},"Comparisons","/docs/resources/comparisons","docs/04.resources/02.comparisons","i-lucide-file-diff",{"title":166,"path":167,"stem":168,"children":169,"icon":6},"Design Tokens","/docs/design-tokens","docs/05.design-tokens/00.index",[170,171,176],{"title":21,"path":167,"stem":168,"icon":51},{"title":172,"path":173,"stem":174,"icon":175},"Presets","/docs/design-tokens/presets","docs/05.design-tokens/01.presets","i-lucide-package",{"title":118,"icon":61,"defaultOpen":177,"path":178,"stem":179,"children":180,"page":6},true,"/docs/design-tokens/composables","docs/05.design-tokens/02.composables",[181,185,189,193,197,201,205,209,223,227,231,235],{"title":182,"path":183,"stem":184,"icon":6},"Border Radiuses","/docs/design-tokens/composables/border-radiuses","docs/05.design-tokens/02.composables/00.border-radiuses",{"title":186,"path":187,"stem":188,"icon":6},"Borders","/docs/design-tokens/composables/borders","docs/05.design-tokens/02.composables/01.borders",{"title":190,"path":191,"stem":192,"icon":6},"Box Shadows","/docs/design-tokens/composables/box-shadows","docs/05.design-tokens/02.composables/02.box-shadows",{"title":194,"path":195,"stem":196,"icon":6},"Breakpoints","/docs/design-tokens/composables/breakpoints","docs/05.design-tokens/02.composables/03.breakpoints",{"title":198,"path":199,"stem":200,"icon":6},"Colors","/docs/design-tokens/composables/colors","docs/05.design-tokens/02.composables/04.colors",{"title":202,"path":203,"stem":204,"icon":6},"Duration","/docs/design-tokens/composables/duration","docs/05.design-tokens/02.composables/05.duration",{"title":206,"path":207,"stem":208,"icon":6},"Easing","/docs/design-tokens/composables/easing","docs/05.design-tokens/02.composables/06.easing",{"title":210,"path":211,"stem":212,"children":213,"icon":6,"pro":177,"defaultOpen":6},"Fluid Design","/docs/design-tokens/composables/fluid-design","docs/05.design-tokens/02.composables/07.fluid-design/01.index",[214,215,219],{"title":21,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","/docs/design-tokens/composables/fluid-design/viewport","docs/05.design-tokens/02.composables/07.fluid-design/02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","/docs/design-tokens/composables/fluid-design/typography","docs/05.design-tokens/02.composables/07.fluid-design/03.typography",{"title":224,"path":225,"stem":226,"icon":6},"Scales","/docs/design-tokens/composables/scales","docs/05.design-tokens/02.composables/08.scales",{"title":228,"path":229,"stem":230,"icon":6},"Spacing","/docs/design-tokens/composables/spacing","docs/05.design-tokens/02.composables/09.spacing",{"title":232,"path":233,"stem":234,"icon":6},"Typography","/docs/design-tokens/composables/typography","docs/05.design-tokens/02.composables/10.typography",{"title":236,"path":237,"stem":238,"icon":6,"children":-1},"Z-Index","/docs/design-tokens/composables/z-index","docs/05.design-tokens/02.composables/11.z-index",{"title":240,"path":241,"stem":242,"children":243,"icon":6},"Components","/docs/components","docs/06.components/00.index",[244,245],{"title":21,"path":241,"stem":242,"icon":51},{"title":118,"icon":116,"defaultOpen":177,"path":246,"stem":247,"children":248,"page":6},"/docs/components/composables","docs/06.components/02.composables",[249,253,257,261,265,269,273,277,281,285,289,293,297],{"title":250,"path":251,"stem":252},"Badge","/docs/components/composables/badge","docs/06.components/02.composables/01.badge",{"title":254,"path":255,"stem":256},"Button","/docs/components/composables/button","docs/06.components/02.composables/02.button",{"title":258,"path":259,"stem":260},"Button Group","/docs/components/composables/button-group","docs/06.components/02.composables/03.button-group",{"title":262,"path":263,"stem":264},"Callout","/docs/components/composables/callout","docs/06.components/02.composables/04.callout",{"title":266,"path":267,"stem":268},"Card","/docs/components/composables/card","docs/06.components/02.composables/05.card",{"title":270,"path":271,"stem":272},"Nav","/docs/components/composables/nav","docs/06.components/02.composables/06.nav",{"title":274,"path":275,"stem":276},"Modal","/docs/components/composables/modal","docs/06.components/02.composables/07.modal",{"title":278,"path":279,"stem":280},"Skeleton","/docs/components/composables/skeleton","docs/06.components/02.composables/08.skeleton",{"title":282,"path":283,"stem":284},"Tooltip","/docs/components/composables/tooltip","docs/06.components/02.composables/08.tooltip",{"title":286,"path":287,"stem":288},"Placeholder","/docs/components/composables/placeholder","docs/06.components/02.composables/09.placeholder",{"title":290,"path":291,"stem":292},"Progress","/docs/components/composables/progress","docs/06.components/02.composables/10.progress",{"title":294,"path":295,"stem":296},"Popover","/docs/components/composables/popover","docs/06.components/02.composables/11.popover",{"title":298,"path":299,"stem":300},"Chip","/docs/components/composables/chip","docs/06.components/02.composables/12.chip",{"title":88,"path":302,"stem":303,"children":304,"icon":6},"/docs/utilities","docs/07.utilities/00.index",[305,306,309],{"title":21,"path":302,"stem":303,"icon":51},{"title":172,"path":307,"stem":308,"icon":175},"/docs/utilities/presets","docs/07.utilities/01.presets",{"title":118,"icon":91,"defaultOpen":177,"path":310,"stem":311,"children":312,"page":6},"/docs/utilities/composables","docs/07.utilities/02.composables",[313,317,321,325,328,332,336,340,344,348,352,355,359,363,367,371],{"title":314,"path":315,"stem":316,"icon":6},"Accessibility","/docs/utilities/composables/accessibility","docs/07.utilities/02.composables/00.accessibility",{"title":318,"path":319,"stem":320,"icon":6},"Animations","/docs/utilities/composables/animations","docs/07.utilities/02.composables/01.animations",{"title":322,"path":323,"stem":324,"icon":6},"Backgrounds","/docs/utilities/composables/backgrounds","docs/07.utilities/02.composables/02.backgrounds",{"title":186,"path":326,"stem":327,"icon":6},"/docs/utilities/composables/borders","docs/07.utilities/02.composables/03.borders",{"title":329,"path":330,"stem":331,"icon":6},"Effects","/docs/utilities/composables/effects","docs/07.utilities/02.composables/04.effects",{"title":333,"path":334,"stem":335,"icon":6},"Filters","/docs/utilities/composables/filters","docs/07.utilities/02.composables/05.filters",{"title":337,"path":338,"stem":339,"icon":6},"Flexbox & Grid","/docs/utilities/composables/flexbox-grid","docs/07.utilities/02.composables/06.flexbox-grid",{"title":341,"path":342,"stem":343,"icon":6},"Interactivity","/docs/utilities/composables/interactivity","docs/07.utilities/02.composables/07.interactivity",{"title":345,"path":346,"stem":347,"icon":6},"Layout","/docs/utilities/composables/layout","docs/07.utilities/02.composables/08.layout",{"title":349,"path":350,"stem":351,"icon":6},"Sizing","/docs/utilities/composables/sizing","docs/07.utilities/02.composables/09.sizing",{"title":228,"path":353,"stem":354,"icon":6},"/docs/utilities/composables/spacing","docs/07.utilities/02.composables/10.spacing",{"title":356,"path":357,"stem":358,"icon":6},"SVG","/docs/utilities/composables/svg","docs/07.utilities/02.composables/11.svg",{"title":360,"path":361,"stem":362,"icon":6},"Tables","/docs/utilities/composables/tables","docs/07.utilities/02.composables/12.tables",{"title":364,"path":365,"stem":366,"icon":6},"Transforms","/docs/utilities/composables/transforms","docs/07.utilities/02.composables/13.transforms",{"title":368,"path":369,"stem":370,"icon":6},"Transitions","/docs/utilities/composables/transitions","docs/07.utilities/02.composables/14.transitions",{"title":232,"path":372,"stem":373,"icon":6},"/docs/utilities/composables/typography","docs/07.utilities/02.composables/15.typography",{"title":93,"path":375,"stem":376,"children":377,"icon":6},"/docs/modifiers","docs/08.modifiers/00.index",[378,379,382],{"title":21,"path":375,"stem":376,"icon":51},{"title":172,"path":380,"stem":381,"icon":175},"/docs/modifiers/presets","docs/08.modifiers/01.presets",{"title":118,"icon":96,"defaultOpen":177,"path":383,"stem":384,"children":385,"page":6},"/docs/modifiers/composables","docs/08.modifiers/02.composables",[386,390,394,398,402,406,410,414],{"title":387,"path":388,"stem":389,"icon":6},"ARIA State","/docs/modifiers/composables/aria-state","docs/08.modifiers/02.composables/00.aria-state",{"title":391,"path":392,"stem":393,"icon":6},"Directional","/docs/modifiers/composables/directional","docs/08.modifiers/02.composables/01.directional",{"title":395,"path":396,"stem":397,"icon":6},"Form State","/docs/modifiers/composables/form-state","docs/08.modifiers/02.composables/02.form-state",{"title":399,"path":400,"stem":401,"icon":6},"Media & Preferences","/docs/modifiers/composables/media-preferences","docs/08.modifiers/02.composables/03.media-preferences",{"title":403,"path":404,"stem":405,"icon":6},"Other State","/docs/modifiers/composables/other-state","docs/08.modifiers/02.composables/04.other-state",{"title":407,"path":408,"stem":409,"icon":6},"Pseudo-Elements","/docs/modifiers/composables/pseudo-elements","docs/08.modifiers/02.composables/05.pseudo-elements",{"title":411,"path":412,"stem":413,"icon":6},"Pseudo-State","/docs/modifiers/composables/pseudo-state","docs/08.modifiers/02.composables/06.pseudo-state",{"title":415,"path":416,"stem":417,"icon":6},"Structural","/docs/modifiers/composables/structural","docs/08.modifiers/02.composables/07.structural",{"id":419,"title":298,"body":420,"description":4071,"extension":1015,"links":4072,"meta":4073,"navigation":177,"path":299,"seo":4074,"sitemap":4075,"stem":300,"__hash__":4076},"docs/docs/06.components/02.composables/12.chip.md",{"type":421,"value":422,"toc":4041},"minimark",[423,427,449,456,460,463,509,513,1998,2001,2025,2028,2033,2037,2188,2195,2199,2207,2210,2213,2216,2219,2222,2225,2229,2241,2244,2248,2251,2378,2398,2402,2411,2415,2487,2490,2501,2504,2538,2542,2553,2556,2560,2563,2615,2618,2716,2726,2729,2741,2824,2843,2939,2954,3052,3056,3060,3063,3272,3276,3283,3470,3475,3479,3485,3488,3493,3555,3563,3569,3572,3576,3686,3691,3815,3820,3824,3896,3900,4037],[424,425,21],"h2",{"id":426},"overview",[428,429,430,431,434,435,439,440,443,444,448],"p",{},"The ",[432,433,298],"strong",{}," is a small status indicator element positioned at the corner of another element, commonly used for notification badges, unread counts, and online status dots. It is composed of two recipe parts: ",[436,437,438],"code",{},"useChipRecipe()"," for the positioning wrapper and ",[436,441,442],{},"useChipIndicatorRecipe()"," for the indicator itself. Each composable creates a fully configured ",[445,446,447],"a",{"href":104},"recipe"," with color, variant, size, position, and inset options — plus compound variants that handle the color-variant combinations automatically.",[428,450,451,452,455],{},"The Chip recipes integrate directly with the default ",[445,453,454],{"href":173},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[424,457,459],{"id":458},"why-use-the-chip-recipe","Why use the Chip recipe?",[428,461,462],{},"The Chip recipe helps you:",[464,465,466,473,479,485,491,497,503],"ul",{},[467,468,469,472],"li",{},[432,470,471],{},"Ship faster with sensible defaults",": Get 9 colors, 2 visual styles, 5 sizes, 4 positions, and an inset mode out of the box with two composable calls.",[467,474,475,478],{},[432,476,477],{},"Compose structured layouts",": Two coordinated recipes (wrapper and indicator) work together so the indicator is always positioned correctly relative to the wrapped element.",[467,480,481,484],{},[432,482,483],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules, including dark mode overrides.",[467,486,487,490],{},[432,488,489],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[467,492,493,496],{},[432,494,495],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, size, or position values at compile time.",[467,498,499,502],{},[432,500,501],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[467,504,505,508],{},[432,506,507],{},"Support dark mode",": Background and text colors adapt automatically between light and dark color schemes.",[424,510,512],{"id":511},"usage","Usage",[514,515,517,522,529,797,801,812,1990,1994],"steps",{"level":516},"4",[518,519,521],"h4",{"id":520},"register-the-recipes","Register the recipes",[428,523,524,525,528],{},"Add the Chip recipes to a local Styleframe instance. The global ",[436,526,527],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[530,531,533,691],"code-tree",{"default-value":532},"src/components/chip.styleframe.ts",[534,535,540],"pre",{"className":536,"code":537,"filename":532,"language":538,"meta":539,"style":539},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useChipRecipe, useChipIndicatorRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst chip = useChipRecipe(s);\nconst chipIndicator = useChipIndicatorRecipe(s);\n\nexport default s;\n","ts","",[436,541,542,578,607,613,634,639,656,672,677],{"__ignoreMap":539},[543,544,547,551,555,559,562,565,568,572,575],"span",{"class":545,"line":546},"line",1,[543,548,550],{"class":549},"s7zQu","import",[543,552,554],{"class":553},"sMK4o"," {",[543,556,558],{"class":557},"sTEyZ"," styleframe",[543,560,561],{"class":553}," }",[543,563,564],{"class":549}," from",[543,566,567],{"class":553}," '",[543,569,571],{"class":570},"sfazB","virtual:styleframe",[543,573,574],{"class":553},"'",[543,576,577],{"class":553},";\n",[543,579,581,583,585,588,591,594,596,598,600,603,605],{"class":545,"line":580},2,[543,582,550],{"class":549},[543,584,554],{"class":553},[543,586,587],{"class":557}," useChipRecipe",[543,589,590],{"class":553},",",[543,592,593],{"class":557}," useChipIndicatorRecipe",[543,595,561],{"class":553},[543,597,564],{"class":549},[543,599,567],{"class":553},[543,601,602],{"class":570},"@styleframe/theme",[543,604,574],{"class":553},[543,606,577],{"class":553},[543,608,610],{"class":545,"line":609},3,[543,611,612],{"emptyLinePlaceholder":177},"\n",[543,614,616,620,623,626,629,632],{"class":545,"line":615},4,[543,617,619],{"class":618},"spNyl","const",[543,621,622],{"class":557}," s ",[543,624,625],{"class":553},"=",[543,627,558],{"class":628},"s2Zo4",[543,630,631],{"class":557},"()",[543,633,577],{"class":553},[543,635,637],{"class":545,"line":636},5,[543,638,612],{"emptyLinePlaceholder":177},[543,640,642,644,647,649,651,654],{"class":545,"line":641},6,[543,643,619],{"class":618},[543,645,646],{"class":557}," chip ",[543,648,625],{"class":553},[543,650,587],{"class":628},[543,652,653],{"class":557},"(s)",[543,655,577],{"class":553},[543,657,659,661,664,666,668,670],{"class":545,"line":658},7,[543,660,619],{"class":618},[543,662,663],{"class":557}," chipIndicator ",[543,665,625],{"class":553},[543,667,593],{"class":628},[543,669,653],{"class":557},[543,671,577],{"class":553},[543,673,675],{"class":545,"line":674},8,[543,676,612],{"emptyLinePlaceholder":177},[543,678,680,683,686,689],{"class":545,"line":679},9,[543,681,682],{"class":549},"export",[543,684,685],{"class":549}," default",[543,687,688],{"class":557}," s",[543,690,577],{"class":553},[534,692,694],{"className":536,"code":693,"filename":527,"language":538,"meta":539,"style":539},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[436,695,696,717,743,747,761,765,774,783,787],{"__ignoreMap":539},[543,697,698,700,702,704,706,708,710,713,715],{"class":545,"line":546},[543,699,550],{"class":549},[543,701,554],{"class":553},[543,703,558],{"class":557},[543,705,561],{"class":553},[543,707,564],{"class":549},[543,709,567],{"class":553},[543,711,712],{"class":570},"styleframe",[543,714,574],{"class":553},[543,716,577],{"class":553},[543,718,719,721,723,726,728,731,733,735,737,739,741],{"class":545,"line":580},[543,720,550],{"class":549},[543,722,554],{"class":553},[543,724,725],{"class":557}," useDesignTokensPreset",[543,727,590],{"class":553},[543,729,730],{"class":557}," useUtilitiesPreset",[543,732,561],{"class":553},[543,734,564],{"class":549},[543,736,567],{"class":553},[543,738,602],{"class":570},[543,740,574],{"class":553},[543,742,577],{"class":553},[543,744,745],{"class":545,"line":609},[543,746,612],{"emptyLinePlaceholder":177},[543,748,749,751,753,755,757,759],{"class":545,"line":615},[543,750,619],{"class":618},[543,752,622],{"class":557},[543,754,625],{"class":553},[543,756,558],{"class":628},[543,758,631],{"class":557},[543,760,577],{"class":553},[543,762,763],{"class":545,"line":636},[543,764,612],{"emptyLinePlaceholder":177},[543,766,767,770,772],{"class":545,"line":641},[543,768,769],{"class":628},"useDesignTokensPreset",[543,771,653],{"class":557},[543,773,577],{"class":553},[543,775,776,779,781],{"class":545,"line":658},[543,777,778],{"class":628},"useUtilitiesPreset",[543,780,653],{"class":557},[543,782,577],{"class":553},[543,784,785],{"class":545,"line":674},[543,786,612],{"emptyLinePlaceholder":177},[543,788,789,791,793,795],{"class":545,"line":679},[543,790,682],{"class":549},[543,792,685],{"class":549},[543,794,688],{"class":557},[543,796,577],{"class":553},[518,798,800],{"id":799},"build-the-component","Build the component",[428,802,803,804,807,808,811],{},"Import the ",[436,805,806],{},"chip"," and ",[436,809,810],{},"chipIndicator"," runtime functions from the virtual module and pass variant props to compute class names:",[813,814,815,1424],"tabs",{},[816,817,820],"tabs-item",{"icon":818,"label":819},"i-devicon-react","React",[534,821,824],{"className":536,"code":822,"filename":823,"language":538,"meta":539,"style":539},"import { chip, chipIndicator } from \"virtual:styleframe\";\n\ninterface ChipProps {\n    color?: \"primary\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"soft\";\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n    inset?: boolean;\n    text?: string;\n    children?: React.ReactNode;\n}\n\nexport function Chip({\n    color = \"primary\",\n    variant = \"solid\",\n    size = \"md\",\n    position = \"top-right\",\n    inset = false,\n    text,\n    children,\n}: ChipProps) {\n    return (\n        \u003Cdiv className={chip()}>\n            {children}\n            \u003Cspan\n                className={chipIndicator({\n                    color,\n                    variant,\n                    size,\n                    position,\n                    inset: String(inset),\n                })}\n            >\n                {text}\n            \u003C/span>\n        \u003C/div>\n    );\n}\n","src/components/Chip.tsx",[436,825,826,854,858,870,961,986,1038,1081,1093,1105,1124,1130,1135,1149,1167,1182,1197,1212,1225,1232,1239,1252,1261,1281,1292,1301,1313,1321,1329,1337,1345,1367,1373,1379,1390,1401,1411,1419],{"__ignoreMap":539},[543,827,828,830,832,835,837,840,842,844,847,849,852],{"class":545,"line":546},[543,829,550],{"class":549},[543,831,554],{"class":553},[543,833,834],{"class":557}," chip",[543,836,590],{"class":553},[543,838,839],{"class":557}," chipIndicator",[543,841,561],{"class":553},[543,843,564],{"class":549},[543,845,846],{"class":553}," \"",[543,848,571],{"class":570},[543,850,851],{"class":553},"\"",[543,853,577],{"class":553},[543,855,856],{"class":545,"line":580},[543,857,612],{"emptyLinePlaceholder":177},[543,859,860,863,867],{"class":545,"line":609},[543,861,862],{"class":618},"interface",[543,864,866],{"class":865},"sBMFI"," ChipProps",[543,868,869],{"class":553}," {\n",[543,871,872,876,879,881,884,886,889,891,894,896,898,900,903,905,907,909,912,914,916,918,921,923,925,927,930,932,934,936,939,941,943,945,948,950,952,954,957,959],{"class":545,"line":615},[543,873,875],{"class":874},"swJcz","    color",[543,877,878],{"class":553},"?:",[543,880,846],{"class":553},[543,882,883],{"class":570},"primary",[543,885,851],{"class":553},[543,887,888],{"class":553}," |",[543,890,846],{"class":553},[543,892,893],{"class":570},"secondary",[543,895,851],{"class":553},[543,897,888],{"class":553},[543,899,846],{"class":553},[543,901,902],{"class":570},"success",[543,904,851],{"class":553},[543,906,888],{"class":553},[543,908,846],{"class":553},[543,910,911],{"class":570},"info",[543,913,851],{"class":553},[543,915,888],{"class":553},[543,917,846],{"class":553},[543,919,920],{"class":570},"warning",[543,922,851],{"class":553},[543,924,888],{"class":553},[543,926,846],{"class":553},[543,928,929],{"class":570},"error",[543,931,851],{"class":553},[543,933,888],{"class":553},[543,935,846],{"class":553},[543,937,938],{"class":570},"light",[543,940,851],{"class":553},[543,942,888],{"class":553},[543,944,846],{"class":553},[543,946,947],{"class":570},"dark",[543,949,851],{"class":553},[543,951,888],{"class":553},[543,953,846],{"class":553},[543,955,956],{"class":570},"neutral",[543,958,851],{"class":553},[543,960,577],{"class":553},[543,962,963,966,968,970,973,975,977,979,982,984],{"class":545,"line":636},[543,964,965],{"class":874},"    variant",[543,967,878],{"class":553},[543,969,846],{"class":553},[543,971,972],{"class":570},"solid",[543,974,851],{"class":553},[543,976,888],{"class":553},[543,978,846],{"class":553},[543,980,981],{"class":570},"soft",[543,983,851],{"class":553},[543,985,577],{"class":553},[543,987,988,991,993,995,998,1000,1002,1004,1007,1009,1011,1013,1016,1018,1020,1022,1025,1027,1029,1031,1034,1036],{"class":545,"line":641},[543,989,990],{"class":874},"    size",[543,992,878],{"class":553},[543,994,846],{"class":553},[543,996,997],{"class":570},"xs",[543,999,851],{"class":553},[543,1001,888],{"class":553},[543,1003,846],{"class":553},[543,1005,1006],{"class":570},"sm",[543,1008,851],{"class":553},[543,1010,888],{"class":553},[543,1012,846],{"class":553},[543,1014,1015],{"class":570},"md",[543,1017,851],{"class":553},[543,1019,888],{"class":553},[543,1021,846],{"class":553},[543,1023,1024],{"class":570},"lg",[543,1026,851],{"class":553},[543,1028,888],{"class":553},[543,1030,846],{"class":553},[543,1032,1033],{"class":570},"xl",[543,1035,851],{"class":553},[543,1037,577],{"class":553},[543,1039,1040,1043,1045,1047,1050,1052,1054,1056,1059,1061,1063,1065,1068,1070,1072,1074,1077,1079],{"class":545,"line":658},[543,1041,1042],{"class":874},"    position",[543,1044,878],{"class":553},[543,1046,846],{"class":553},[543,1048,1049],{"class":570},"top-right",[543,1051,851],{"class":553},[543,1053,888],{"class":553},[543,1055,846],{"class":553},[543,1057,1058],{"class":570},"top-left",[543,1060,851],{"class":553},[543,1062,888],{"class":553},[543,1064,846],{"class":553},[543,1066,1067],{"class":570},"bottom-right",[543,1069,851],{"class":553},[543,1071,888],{"class":553},[543,1073,846],{"class":553},[543,1075,1076],{"class":570},"bottom-left",[543,1078,851],{"class":553},[543,1080,577],{"class":553},[543,1082,1083,1086,1088,1091],{"class":545,"line":674},[543,1084,1085],{"class":874},"    inset",[543,1087,878],{"class":553},[543,1089,1090],{"class":865}," boolean",[543,1092,577],{"class":553},[543,1094,1095,1098,1100,1103],{"class":545,"line":679},[543,1096,1097],{"class":874},"    text",[543,1099,878],{"class":553},[543,1101,1102],{"class":865}," string",[543,1104,577],{"class":553},[543,1106,1108,1111,1113,1116,1119,1122],{"class":545,"line":1107},10,[543,1109,1110],{"class":874},"    children",[543,1112,878],{"class":553},[543,1114,1115],{"class":865}," React",[543,1117,1118],{"class":553},".",[543,1120,1121],{"class":865},"ReactNode",[543,1123,577],{"class":553},[543,1125,1127],{"class":545,"line":1126},11,[543,1128,1129],{"class":553},"}\n",[543,1131,1133],{"class":545,"line":1132},12,[543,1134,612],{"emptyLinePlaceholder":177},[543,1136,1138,1140,1143,1146],{"class":545,"line":1137},13,[543,1139,682],{"class":549},[543,1141,1142],{"class":618}," function",[543,1144,1145],{"class":628}," Chip",[543,1147,1148],{"class":553},"({\n",[543,1150,1152,1155,1158,1160,1162,1164],{"class":545,"line":1151},14,[543,1153,875],{"class":1154},"sHdIc",[543,1156,1157],{"class":553}," =",[543,1159,846],{"class":553},[543,1161,883],{"class":570},[543,1163,851],{"class":553},[543,1165,1166],{"class":553},",\n",[543,1168,1170,1172,1174,1176,1178,1180],{"class":545,"line":1169},15,[543,1171,965],{"class":1154},[543,1173,1157],{"class":553},[543,1175,846],{"class":553},[543,1177,972],{"class":570},[543,1179,851],{"class":553},[543,1181,1166],{"class":553},[543,1183,1185,1187,1189,1191,1193,1195],{"class":545,"line":1184},16,[543,1186,990],{"class":1154},[543,1188,1157],{"class":553},[543,1190,846],{"class":553},[543,1192,1015],{"class":570},[543,1194,851],{"class":553},[543,1196,1166],{"class":553},[543,1198,1200,1202,1204,1206,1208,1210],{"class":545,"line":1199},17,[543,1201,1042],{"class":1154},[543,1203,1157],{"class":553},[543,1205,846],{"class":553},[543,1207,1049],{"class":570},[543,1209,851],{"class":553},[543,1211,1166],{"class":553},[543,1213,1215,1217,1219,1223],{"class":545,"line":1214},18,[543,1216,1085],{"class":1154},[543,1218,1157],{"class":553},[543,1220,1222],{"class":1221},"sfNiH"," false",[543,1224,1166],{"class":553},[543,1226,1228,1230],{"class":545,"line":1227},19,[543,1229,1097],{"class":1154},[543,1231,1166],{"class":553},[543,1233,1235,1237],{"class":545,"line":1234},20,[543,1236,1110],{"class":1154},[543,1238,1166],{"class":553},[543,1240,1242,1245,1247,1250],{"class":545,"line":1241},21,[543,1243,1244],{"class":553},"}:",[543,1246,866],{"class":865},[543,1248,1249],{"class":553},")",[543,1251,869],{"class":553},[543,1253,1255,1258],{"class":545,"line":1254},22,[543,1256,1257],{"class":549},"    return",[543,1259,1260],{"class":874}," (\n",[543,1262,1264,1267,1270,1273,1276,1278],{"class":545,"line":1263},23,[543,1265,1266],{"class":553},"        \u003C",[543,1268,1269],{"class":557},"div",[543,1271,1272],{"class":557}," className",[543,1274,1275],{"class":553},"={",[543,1277,806],{"class":874},[543,1279,1280],{"class":553},"()}>\n",[543,1282,1284,1287,1290],{"class":545,"line":1283},24,[543,1285,1286],{"class":553},"            {",[543,1288,1289],{"class":1154},"children",[543,1291,1129],{"class":553},[543,1293,1295,1298],{"class":545,"line":1294},25,[543,1296,1297],{"class":553},"            \u003C",[543,1299,1300],{"class":1154},"span\n",[543,1302,1304,1307,1309,1311],{"class":545,"line":1303},26,[543,1305,1306],{"class":557},"                className",[543,1308,1275],{"class":553},[543,1310,810],{"class":874},[543,1312,1148],{"class":553},[543,1314,1316,1319],{"class":545,"line":1315},27,[543,1317,1318],{"class":1154},"                    color",[543,1320,1166],{"class":553},[543,1322,1324,1327],{"class":545,"line":1323},28,[543,1325,1326],{"class":1154},"                    variant",[543,1328,1166],{"class":553},[543,1330,1332,1335],{"class":545,"line":1331},29,[543,1333,1334],{"class":1154},"                    size",[543,1336,1166],{"class":553},[543,1338,1340,1343],{"class":545,"line":1339},30,[543,1341,1342],{"class":1154},"                    position",[543,1344,1166],{"class":553},[543,1346,1348,1351,1354,1357,1360,1363,1365],{"class":545,"line":1347},31,[543,1349,1350],{"class":874},"                    inset",[543,1352,1353],{"class":553},":",[543,1355,1356],{"class":1154}," String",[543,1358,1359],{"class":874},"(",[543,1361,1362],{"class":557},"inset",[543,1364,1249],{"class":874},[543,1366,1166],{"class":553},[543,1368,1370],{"class":545,"line":1369},32,[543,1371,1372],{"class":553},"                })}\n",[543,1374,1376],{"class":545,"line":1375},33,[543,1377,1378],{"class":553},"            >\n",[543,1380,1382,1385,1388],{"class":545,"line":1381},34,[543,1383,1384],{"class":553},"                {",[543,1386,1387],{"class":1154},"text",[543,1389,1129],{"class":553},[543,1391,1393,1396,1398],{"class":545,"line":1392},35,[543,1394,1395],{"class":553},"            \u003C/",[543,1397,543],{"class":557},[543,1399,1400],{"class":553},">\n",[543,1402,1404,1407,1409],{"class":545,"line":1403},36,[543,1405,1406],{"class":553},"        \u003C/",[543,1408,1269],{"class":557},[543,1410,1400],{"class":553},[543,1412,1414,1417],{"class":545,"line":1413},37,[543,1415,1416],{"class":874},"    )",[543,1418,577],{"class":553},[543,1420,1422],{"class":545,"line":1421},38,[543,1423,1129],{"class":553},[816,1425,1428],{"icon":1426,"label":1427},"i-devicon-vuejs","Vue",[534,1429,1434],{"className":1430,"code":1431,"filename":1432,"language":1433,"meta":539,"style":539},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { chip, chipIndicator } from \"virtual:styleframe\";\n\nconst props = withDefaults(\n    defineProps\u003C{\n        color?: \"primary\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"light\" | \"dark\" | \"neutral\";\n        variant?: \"solid\" | \"soft\";\n        size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n        position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\";\n        inset?: boolean;\n        text?: string;\n    }>(),\n    { color: \"primary\", variant: \"solid\", size: \"md\", position: \"top-right\", inset: false },\n);\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"chip()\">\n        \u003Cslot />\n        \u003Cspan\n            :class=\"chipIndicator({\n                color,\n                variant,\n                size,\n                position,\n                inset: inset ? 'true' : 'false',\n            })\"\n        >\n            {{ text }}\n        \u003C/span>\n    \u003C/div>\n\u003C/template>\n","src/components/Chip.vue","vue",[436,1435,1436,1460,1484,1488,1503,1511,1590,1613,1660,1699,1710,1721,1730,1797,1803,1812,1816,1825,1850,1860,1866,1881,1888,1895,1902,1909,1941,1949,1954,1965,1973,1982],{"__ignoreMap":539},[543,1437,1438,1441,1444,1447,1450,1452,1454,1456,1458],{"class":545,"line":546},[543,1439,1440],{"class":553},"\u003C",[543,1442,1443],{"class":874},"script",[543,1445,1446],{"class":618}," setup",[543,1448,1449],{"class":618}," lang",[543,1451,625],{"class":553},[543,1453,851],{"class":553},[543,1455,538],{"class":570},[543,1457,851],{"class":553},[543,1459,1400],{"class":553},[543,1461,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482],{"class":545,"line":580},[543,1463,550],{"class":549},[543,1465,554],{"class":553},[543,1467,834],{"class":557},[543,1469,590],{"class":553},[543,1471,839],{"class":557},[543,1473,561],{"class":553},[543,1475,564],{"class":549},[543,1477,846],{"class":553},[543,1479,571],{"class":570},[543,1481,851],{"class":553},[543,1483,577],{"class":553},[543,1485,1486],{"class":545,"line":609},[543,1487,612],{"emptyLinePlaceholder":177},[543,1489,1490,1492,1495,1497,1500],{"class":545,"line":615},[543,1491,619],{"class":618},[543,1493,1494],{"class":557}," props ",[543,1496,625],{"class":553},[543,1498,1499],{"class":628}," withDefaults",[543,1501,1502],{"class":557},"(\n",[543,1504,1505,1508],{"class":545,"line":636},[543,1506,1507],{"class":628},"    defineProps",[543,1509,1510],{"class":553},"\u003C{\n",[543,1512,1513,1516,1518,1520,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588],{"class":545,"line":641},[543,1514,1515],{"class":874},"        color",[543,1517,878],{"class":553},[543,1519,846],{"class":553},[543,1521,883],{"class":570},[543,1523,851],{"class":553},[543,1525,888],{"class":553},[543,1527,846],{"class":553},[543,1529,893],{"class":570},[543,1531,851],{"class":553},[543,1533,888],{"class":553},[543,1535,846],{"class":553},[543,1537,902],{"class":570},[543,1539,851],{"class":553},[543,1541,888],{"class":553},[543,1543,846],{"class":553},[543,1545,911],{"class":570},[543,1547,851],{"class":553},[543,1549,888],{"class":553},[543,1551,846],{"class":553},[543,1553,920],{"class":570},[543,1555,851],{"class":553},[543,1557,888],{"class":553},[543,1559,846],{"class":553},[543,1561,929],{"class":570},[543,1563,851],{"class":553},[543,1565,888],{"class":553},[543,1567,846],{"class":553},[543,1569,938],{"class":570},[543,1571,851],{"class":553},[543,1573,888],{"class":553},[543,1575,846],{"class":553},[543,1577,947],{"class":570},[543,1579,851],{"class":553},[543,1581,888],{"class":553},[543,1583,846],{"class":553},[543,1585,956],{"class":570},[543,1587,851],{"class":553},[543,1589,577],{"class":553},[543,1591,1592,1595,1597,1599,1601,1603,1605,1607,1609,1611],{"class":545,"line":658},[543,1593,1594],{"class":874},"        variant",[543,1596,878],{"class":553},[543,1598,846],{"class":553},[543,1600,972],{"class":570},[543,1602,851],{"class":553},[543,1604,888],{"class":553},[543,1606,846],{"class":553},[543,1608,981],{"class":570},[543,1610,851],{"class":553},[543,1612,577],{"class":553},[543,1614,1615,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658],{"class":545,"line":674},[543,1616,1617],{"class":874},"        size",[543,1619,878],{"class":553},[543,1621,846],{"class":553},[543,1623,997],{"class":570},[543,1625,851],{"class":553},[543,1627,888],{"class":553},[543,1629,846],{"class":553},[543,1631,1006],{"class":570},[543,1633,851],{"class":553},[543,1635,888],{"class":553},[543,1637,846],{"class":553},[543,1639,1015],{"class":570},[543,1641,851],{"class":553},[543,1643,888],{"class":553},[543,1645,846],{"class":553},[543,1647,1024],{"class":570},[543,1649,851],{"class":553},[543,1651,888],{"class":553},[543,1653,846],{"class":553},[543,1655,1033],{"class":570},[543,1657,851],{"class":553},[543,1659,577],{"class":553},[543,1661,1662,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697],{"class":545,"line":679},[543,1663,1664],{"class":874},"        position",[543,1666,878],{"class":553},[543,1668,846],{"class":553},[543,1670,1049],{"class":570},[543,1672,851],{"class":553},[543,1674,888],{"class":553},[543,1676,846],{"class":553},[543,1678,1058],{"class":570},[543,1680,851],{"class":553},[543,1682,888],{"class":553},[543,1684,846],{"class":553},[543,1686,1067],{"class":570},[543,1688,851],{"class":553},[543,1690,888],{"class":553},[543,1692,846],{"class":553},[543,1694,1076],{"class":570},[543,1696,851],{"class":553},[543,1698,577],{"class":553},[543,1700,1701,1704,1706,1708],{"class":545,"line":1107},[543,1702,1703],{"class":874},"        inset",[543,1705,878],{"class":553},[543,1707,1090],{"class":865},[543,1709,577],{"class":553},[543,1711,1712,1715,1717,1719],{"class":545,"line":1126},[543,1713,1714],{"class":874},"        text",[543,1716,878],{"class":553},[543,1718,1102],{"class":865},[543,1720,577],{"class":553},[543,1722,1723,1726,1728],{"class":545,"line":1132},[543,1724,1725],{"class":553},"    }>",[543,1727,631],{"class":557},[543,1729,1166],{"class":553},[543,1731,1732,1735,1738,1740,1742,1744,1746,1748,1751,1753,1755,1757,1759,1761,1764,1766,1768,1770,1772,1774,1777,1779,1781,1783,1785,1787,1790,1792,1794],{"class":545,"line":1137},[543,1733,1734],{"class":553},"    {",[543,1736,1737],{"class":874}," color",[543,1739,1353],{"class":553},[543,1741,846],{"class":553},[543,1743,883],{"class":570},[543,1745,851],{"class":553},[543,1747,590],{"class":553},[543,1749,1750],{"class":874}," variant",[543,1752,1353],{"class":553},[543,1754,846],{"class":553},[543,1756,972],{"class":570},[543,1758,851],{"class":553},[543,1760,590],{"class":553},[543,1762,1763],{"class":874}," size",[543,1765,1353],{"class":553},[543,1767,846],{"class":553},[543,1769,1015],{"class":570},[543,1771,851],{"class":553},[543,1773,590],{"class":553},[543,1775,1776],{"class":874}," position",[543,1778,1353],{"class":553},[543,1780,846],{"class":553},[543,1782,1049],{"class":570},[543,1784,851],{"class":553},[543,1786,590],{"class":553},[543,1788,1789],{"class":874}," inset",[543,1791,1353],{"class":553},[543,1793,1222],{"class":1221},[543,1795,1796],{"class":553}," },\n",[543,1798,1799,1801],{"class":545,"line":1151},[543,1800,1249],{"class":557},[543,1802,577],{"class":553},[543,1804,1805,1808,1810],{"class":545,"line":1169},[543,1806,1807],{"class":553},"\u003C/",[543,1809,1443],{"class":874},[543,1811,1400],{"class":553},[543,1813,1814],{"class":545,"line":1184},[543,1815,612],{"emptyLinePlaceholder":177},[543,1817,1818,1820,1823],{"class":545,"line":1199},[543,1819,1440],{"class":553},[543,1821,1822],{"class":874},"template",[543,1824,1400],{"class":553},[543,1826,1827,1830,1832,1835,1838,1840,1842,1844,1846,1848],{"class":545,"line":1214},[543,1828,1829],{"class":553},"    \u003C",[543,1831,1269],{"class":874},[543,1833,1834],{"class":553}," :",[543,1836,1837],{"class":618},"class",[543,1839,625],{"class":553},[543,1841,851],{"class":553},[543,1843,806],{"class":628},[543,1845,631],{"class":553},[543,1847,851],{"class":553},[543,1849,1400],{"class":553},[543,1851,1852,1854,1857],{"class":545,"line":1227},[543,1853,1266],{"class":553},[543,1855,1856],{"class":874},"slot",[543,1858,1859],{"class":553}," />\n",[543,1861,1862,1864],{"class":545,"line":1234},[543,1863,1266],{"class":553},[543,1865,1300],{"class":874},[543,1867,1868,1871,1873,1875,1877,1879],{"class":545,"line":1241},[543,1869,1870],{"class":553},"            :",[543,1872,1837],{"class":618},[543,1874,625],{"class":553},[543,1876,851],{"class":553},[543,1878,810],{"class":628},[543,1880,1148],{"class":553},[543,1882,1883,1886],{"class":545,"line":1254},[543,1884,1885],{"class":557},"                color",[543,1887,1166],{"class":553},[543,1889,1890,1893],{"class":545,"line":1263},[543,1891,1892],{"class":557},"                variant",[543,1894,1166],{"class":553},[543,1896,1897,1900],{"class":545,"line":1283},[543,1898,1899],{"class":557},"                size",[543,1901,1166],{"class":553},[543,1903,1904,1907],{"class":545,"line":1294},[543,1905,1906],{"class":557},"                position",[543,1908,1166],{"class":553},[543,1910,1911,1914,1917,1919,1922,1924,1927,1929,1932,1934,1937,1939],{"class":545,"line":1303},[543,1912,1913],{"class":874},"                inset",[543,1915,1916],{"class":553},": ",[543,1918,1362],{"class":557},[543,1920,1921],{"class":553}," ? ",[543,1923,574],{"class":553},[543,1925,1926],{"class":570},"true",[543,1928,574],{"class":553},[543,1930,1931],{"class":553}," : ",[543,1933,574],{"class":553},[543,1935,1936],{"class":570},"false",[543,1938,574],{"class":553},[543,1940,1166],{"class":553},[543,1942,1943,1946],{"class":545,"line":1315},[543,1944,1945],{"class":553},"            })",[543,1947,1948],{"class":553},"\"\n",[543,1950,1951],{"class":545,"line":1323},[543,1952,1953],{"class":553},"        >\n",[543,1955,1956,1959,1962],{"class":545,"line":1331},[543,1957,1958],{"class":553},"            {{",[543,1960,1961],{"class":557}," text ",[543,1963,1964],{"class":553},"}}\n",[543,1966,1967,1969,1971],{"class":545,"line":1339},[543,1968,1406],{"class":553},[543,1970,543],{"class":874},[543,1972,1400],{"class":553},[543,1974,1975,1978,1980],{"class":545,"line":1347},[543,1976,1977],{"class":553},"    \u003C/",[543,1979,1269],{"class":874},[543,1981,1400],{"class":553},[543,1983,1984,1986,1988],{"class":545,"line":1369},[543,1985,1807],{"class":553},[543,1987,1822],{"class":874},[543,1989,1400],{"class":553},[518,1991,1993],{"id":1992},"see-it-in-action","See it in action",[1995,1996],"story-preview",{"story":1997,":panel":1926},"theme-recipes-chip--default",[424,1999,198],{"id":2000},"colors",[428,2002,2003,2004,2006,2007,2006,2009,2006,2011,2006,2013,2006,2015,2017,2018,2006,2020,2006,2022,2024],{},"The Chip indicator recipe includes 9 color variants: 6 semantic colors (",[436,2005,883],{},", ",[436,2008,893],{},[436,2010,902],{},[436,2012,911],{},[436,2014,920],{},[436,2016,929],{},") plus 3 neutral-scale colors (",[436,2019,938],{},[436,2021,947],{},[436,2023,956],{},"). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides.",[1995,2026],{"story":2027,":panel":1926},"theme-recipes-chip--primary",[2029,2030,2032],"h3",{"id":2031},"color-reference","Color Reference",[1995,2034],{"story":2035,":height":2036},"theme-recipes-chip--all-variants","600",[2038,2039,2040,2056],"table",{},[2041,2042,2043],"thead",{},[2044,2045,2046,2050,2053],"tr",{},[2047,2048,2049],"th",{},"Color",[2047,2051,2052],{},"Token",[2047,2054,2055],{},"Use Case",[2057,2058,2059,2074,2088,2102,2116,2130,2144,2162,2176],"tbody",{},[2044,2060,2061,2066,2071],{},[2062,2063,2064],"td",{},[436,2065,883],{},[2062,2067,2068],{},[436,2069,2070],{},"@color.primary",[2062,2072,2073],{},"Default. Primary brand indicator, unread counts",[2044,2075,2076,2080,2085],{},[2062,2077,2078],{},[436,2079,893],{},[2062,2081,2082],{},[436,2083,2084],{},"@color.secondary",[2062,2086,2087],{},"Secondary or supporting indicators",[2044,2089,2090,2094,2099],{},[2062,2091,2092],{},[436,2093,902],{},[2062,2095,2096],{},[436,2097,2098],{},"@color.success",[2062,2100,2101],{},"Online status, positive states, completions",[2044,2103,2104,2108,2113],{},[2062,2105,2106],{},[436,2107,911],{},[2062,2109,2110],{},[436,2111,2112],{},"@color.info",[2062,2114,2115],{},"Informational badges, tips",[2044,2117,2118,2122,2127],{},[2062,2119,2120],{},[436,2121,920],{},[2062,2123,2124],{},[436,2125,2126],{},"@color.warning",[2062,2128,2129],{},"Caution indicators, pending states",[2044,2131,2132,2136,2141],{},[2062,2133,2134],{},[436,2135,929],{},[2062,2137,2138],{},[436,2139,2140],{},"@color.error",[2062,2142,2143],{},"Error badges, alert counts",[2044,2145,2146,2150,2159],{},[2062,2147,2148],{},[436,2149,938],{},[2062,2151,2152,2155,2156],{},[436,2153,2154],{},"@color.white"," / ",[436,2157,2158],{},"@color.gray-*",[2062,2160,2161],{},"Light surfaces, stays light in dark mode",[2044,2163,2164,2168,2173],{},[2062,2165,2166],{},[436,2167,947],{},[2062,2169,2170],{},[436,2171,2172],{},"@color.gray-900",[2062,2174,2175],{},"Dark surfaces, stays dark in light mode",[2044,2177,2178,2182,2185],{},[2062,2179,2180],{},[436,2181,956],{},[2062,2183,2184],{},"Adaptive (light ↔ dark)",[2062,2186,2187],{},"Adapts to the current color scheme",[2189,2190,2191,2194],"tip",{},[432,2192,2193],{},"Pro tip:"," Use semantic color names that describe purpose, not appearance. This makes it easier to update your palette without touching component code.",[424,2196,2198],{"id":2197},"variants","Variants",[428,2200,2201,2202,2206],{},"Two visual style variants control how the indicator is rendered. Each variant is combined with the selected color through ",[445,2203,2205],{"href":2204},"/docs/api/recipes#compound-variants","compound variants",", so you always get the correct background and text colors for your chosen color.",[2029,2208,2209],{"id":972},"Solid",[428,2211,2212],{},"Filled background with light text. The most prominent style, ideal for notification counts and status indicators that need high visibility.",[1995,2214],{"story":2215,":panel":1926},"theme-recipes-chip--solid",[2029,2217,2218],{"id":981},"Soft",[428,2220,2221],{},"Light tinted background with colored text. A subtler style that works well for secondary indicators and badges that shouldn't dominate the visual hierarchy. In dark mode, the tint and text colors automatically adjust.",[1995,2223],{"story":2224,":panel":1926},"theme-recipes-chip--soft",[424,2226,2228],{"id":2227},"sizes","Sizes",[428,2230,2231,2232,2234,2235,2237,2238,2240],{},"Five size variants from ",[436,2233,997],{}," to ",[436,2236,1033],{}," control the dimensions, font size, and padding of the indicator. The ",[436,2239,997],{}," size produces a small dot with no text, while larger sizes accommodate text content.",[1995,2242],{"story":2243,":panel":1926},"theme-recipes-chip--medium",[2029,2245,2247],{"id":2246},"size-reference","Size Reference",[1995,2249],{"story":2250,":height":2036},"theme-recipes-chip--all-sizes",[2038,2252,2253,2268],{},[2041,2254,2255],{},[2044,2256,2257,2260,2263,2266],{},[2047,2258,2259],{},"Size",[2047,2261,2262],{},"Dimensions",[2047,2264,2265],{},"Font Size",[2047,2267,2055],{},[2057,2269,2270,2293,2315,2336,2357],{},[2044,2271,2272,2276,2285,2290],{},[2062,2273,2274],{},[436,2275,997],{},[2062,2277,2278,2281,2282,2284],{},[436,2279,2280],{},"@0.375"," × ",[436,2283,2280],{}," (fixed)",[2062,2286,2287],{},[436,2288,2289],{},"@font-size.4xs",[2062,2291,2292],{},"Status dots, no text",[2044,2294,2295,2299,2307,2312],{},[2062,2296,2297],{},[436,2298,1006],{},[2062,2300,2301,2304,2305],{},[436,2302,2303],{},"@0.75"," min-width × ",[436,2306,2303],{},[2062,2308,2309],{},[436,2310,2311],{},"@font-size.3xs",[2062,2313,2314],{},"Small count badges",[2044,2316,2317,2321,2328,2333],{},[2062,2318,2319],{},[436,2320,1015],{},[2062,2322,2323,2304,2326],{},[436,2324,2325],{},"@1",[436,2327,2325],{},[2062,2329,2330],{},[436,2331,2332],{},"@font-size.2xs",[2062,2334,2335],{},"Default. Standard notification badges",[2044,2337,2338,2342,2349,2354],{},[2062,2339,2340],{},[436,2341,1024],{},[2062,2343,2344,2304,2347],{},[436,2345,2346],{},"@1.25",[436,2348,2346],{},[2062,2350,2351],{},[436,2352,2353],{},"@font-size.xs",[2062,2355,2356],{},"Prominent indicators",[2044,2358,2359,2363,2370,2375],{},[2062,2360,2361],{},[436,2362,1033],{},[2062,2364,2365,2304,2368],{},[436,2366,2367],{},"@1.5",[436,2369,2367],{},[2062,2371,2372],{},[436,2373,2374],{},"@font-size.sm",[2062,2376,2377],{},"Large badges with longer text",[2379,2380,2381,2384,2385,2387,2388,2390,2391,2393,2394,2397],"note",{},[432,2382,2383],{},"Good to know:"," The ",[436,2386,997],{}," size uses fixed width and height (no min-width), creating a perfect circle dot. Sizes ",[436,2389,1006],{}," through ",[436,2392,1033],{}," use ",[436,2395,2396],{},"min-width"," with horizontal padding, so the indicator grows horizontally to fit text content.",[424,2399,2401],{"id":2400},"position","Position",[428,2403,430,2404,2406,2407,2410],{},[436,2405,2400],{}," variant controls which corner of the parent element the indicator is placed at. The indicator is absolutely positioned and uses CSS ",[436,2408,2409],{},"transform"," to offset itself to straddle the corner.",[1995,2412],{"story":2413,":height":2414},"theme-recipes-chip--all-positions","400",[2038,2416,2417,2429],{},[2041,2418,2419],{},[2044,2420,2421,2423,2426],{},[2047,2422,2401],{},[2047,2424,2425],{},"Placement",[2047,2427,2428],{},"Transform",[2057,2430,2431,2445,2459,2473],{},[2044,2432,2433,2437,2440],{},[2062,2434,2435],{},[436,2436,1049],{},[2062,2438,2439],{},"Top-right corner",[2062,2441,2442],{},[436,2443,2444],{},"translate(50%, -50%)",[2044,2446,2447,2451,2454],{},[2062,2448,2449],{},[436,2450,1058],{},[2062,2452,2453],{},"Top-left corner",[2062,2455,2456],{},[436,2457,2458],{},"translate(-50%, -50%)",[2044,2460,2461,2465,2468],{},[2062,2462,2463],{},[436,2464,1067],{},[2062,2466,2467],{},"Bottom-right corner",[2062,2469,2470],{},[436,2471,2472],{},"translate(50%, 50%)",[2044,2474,2475,2479,2482],{},[2062,2476,2477],{},[436,2478,1076],{},[2062,2480,2481],{},"Bottom-left corner",[2062,2483,2484],{},[436,2485,2486],{},"translate(-50%, 50%)",[424,2488,2489],{"id":1362},"Inset",[428,2491,430,2492,2494,2495,2497,2498,2500],{},[436,2493,1362],{}," variant controls whether the indicator overlaps the corner of the parent element or sits inside it. When ",[436,2496,1362],{}," is ",[436,2499,1926],{},", the transform offset is removed so the indicator stays within the parent's bounds.",[1995,2502],{"story":2503,":panel":1926},"theme-recipes-chip--inset",[2038,2505,2506,2515],{},[2041,2507,2508],{},[2044,2509,2510,2512],{},[2047,2511,2489],{},[2047,2513,2514],{},"Behavior",[2057,2516,2517,2526],{},[2044,2518,2519,2523],{},[2062,2520,2521],{},[436,2522,1936],{},[2062,2524,2525],{},"Default. Indicator straddles the corner, offset by 50% of its own size",[2044,2527,2528,2532],{},[2062,2529,2530],{},[436,2531,1926],{},[2062,2533,2534,2535,1249],{},"Indicator sits inside the corner with no offset (",[436,2536,2537],{},"translate(0, 0)",[424,2539,2541],{"id":2540},"with-text","With Text",[428,2543,2544,2545,2390,2547,2549,2550,2552],{},"Chip indicators can display text content such as notification counts. Sizes ",[436,2546,1006],{},[436,2548,1033],{}," include horizontal padding and ",[436,2551,2396],{}," to accommodate text while maintaining a pill shape thanks to the full border radius.",[1995,2554],{"story":2555,":panel":1926},"theme-recipes-chip--with-text",[424,2557,2559],{"id":2558},"anatomy","Anatomy",[428,2561,2562],{},"The Chip recipe is composed of two independent recipes that work together:",[2038,2564,2565,2578],{},[2041,2566,2567],{},[2044,2568,2569,2572,2575],{},[2047,2570,2571],{},"Part",[2047,2573,2574],{},"Recipe",[2047,2576,2577],{},"Role",[2057,2579,2580,2601],{},[2044,2581,2582,2587,2591],{},[2062,2583,2584],{},[432,2585,2586],{},"Wrapper",[2062,2588,2589],{},[436,2590,438],{},[2062,2592,2593,2594,807,2597,2600],{},"Outer container with ",[436,2595,2596],{},"position: relative",[436,2598,2599],{},"display: inline-flex"," to establish the positioning context",[2044,2602,2603,2608,2612],{},[2062,2604,2605],{},[432,2606,2607],{},"Indicator",[2062,2609,2610],{},[436,2611,442],{},[2062,2613,2614],{},"Absolutely positioned badge with color, size, position, and inset styling",[428,2616,2617],{},"The wrapper provides the positioning context. The indicator is a child element that positions itself at one of the four corners using absolute positioning and transforms.",[534,2619,2623],{"className":2620,"code":2621,"language":2622,"meta":539,"style":539},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Both parts working together -->\n\u003Cdiv class=\"chip()\">\n    \u003Cimg src=\"avatar.png\" alt=\"User avatar\" />\n    \u003Cspan class=\"chipIndicator({ color: 'success', size: 'xs' })\">\u003C/span>\n\u003C/div>\n","html",[436,2624,2625,2631,2651,2684,2708],{"__ignoreMap":539},[543,2626,2627],{"class":545,"line":546},[543,2628,2630],{"class":2629},"sHwdD","\u003C!-- Both parts working together -->\n",[543,2632,2633,2635,2637,2640,2642,2644,2647,2649],{"class":545,"line":580},[543,2634,1440],{"class":553},[543,2636,1269],{"class":874},[543,2638,2639],{"class":618}," class",[543,2641,625],{"class":553},[543,2643,851],{"class":553},[543,2645,2646],{"class":570},"chip()",[543,2648,851],{"class":553},[543,2650,1400],{"class":553},[543,2652,2653,2655,2658,2661,2663,2665,2668,2670,2673,2675,2677,2680,2682],{"class":545,"line":609},[543,2654,1829],{"class":553},[543,2656,2657],{"class":874},"img",[543,2659,2660],{"class":618}," src",[543,2662,625],{"class":553},[543,2664,851],{"class":553},[543,2666,2667],{"class":570},"avatar.png",[543,2669,851],{"class":553},[543,2671,2672],{"class":618}," alt",[543,2674,625],{"class":553},[543,2676,851],{"class":553},[543,2678,2679],{"class":570},"User avatar",[543,2681,851],{"class":553},[543,2683,1859],{"class":553},[543,2685,2686,2688,2690,2692,2694,2696,2699,2701,2704,2706],{"class":545,"line":615},[543,2687,1829],{"class":553},[543,2689,543],{"class":874},[543,2691,2639],{"class":618},[543,2693,625],{"class":553},[543,2695,851],{"class":553},[543,2697,2698],{"class":570},"chipIndicator({ color: 'success', size: 'xs' })",[543,2700,851],{"class":553},[543,2702,2703],{"class":553},">\u003C/",[543,2705,543],{"class":874},[543,2707,1400],{"class":553},[543,2709,2710,2712,2714],{"class":545,"line":636},[543,2711,1807],{"class":553},[543,2713,1269],{"class":874},[543,2715,1400],{"class":553},[2189,2717,2718,2720,2721,807,2723,2725],{},[432,2719,2193],{}," The wrapper recipe has no variants — it only establishes ",[436,2722,2596],{},[436,2724,2599],{},". You can apply it to any element that needs a chip indicator without affecting its visual appearance.",[424,2727,314],{"id":2728},"accessibility",[464,2730,2731],{},[467,2732,2733,2736,2737,2740],{},[432,2734,2735],{},"Use semantic HTML."," Use a ",[436,2738,2739],{},"\u003Cspan>"," for the indicator element. It is a visual decoration that augments the wrapped element.",[534,2742,2744],{"className":2620,"code":2743,"language":2622,"meta":539,"style":539},"\u003C!-- Correct: indicator as a span -->\n\u003Cdiv class=\"chip()\">\n    \u003Cbutton>Notifications\u003C/button>\n    \u003Cspan class=\"chipIndicator(...)\">5\u003C/span>\n\u003C/div>\n",[436,2745,2746,2751,2769,2788,2816],{"__ignoreMap":539},[543,2747,2748],{"class":545,"line":546},[543,2749,2750],{"class":2629},"\u003C!-- Correct: indicator as a span -->\n",[543,2752,2753,2755,2757,2759,2761,2763,2765,2767],{"class":545,"line":580},[543,2754,1440],{"class":553},[543,2756,1269],{"class":874},[543,2758,2639],{"class":618},[543,2760,625],{"class":553},[543,2762,851],{"class":553},[543,2764,2646],{"class":570},[543,2766,851],{"class":553},[543,2768,1400],{"class":553},[543,2770,2771,2773,2776,2779,2782,2784,2786],{"class":545,"line":609},[543,2772,1829],{"class":553},[543,2774,2775],{"class":874},"button",[543,2777,2778],{"class":553},">",[543,2780,2781],{"class":557},"Notifications",[543,2783,1807],{"class":553},[543,2785,2775],{"class":874},[543,2787,1400],{"class":553},[543,2789,2790,2792,2794,2796,2798,2800,2803,2805,2807,2810,2812,2814],{"class":545,"line":615},[543,2791,1829],{"class":553},[543,2793,543],{"class":874},[543,2795,2639],{"class":618},[543,2797,625],{"class":553},[543,2799,851],{"class":553},[543,2801,2802],{"class":570},"chipIndicator(...)",[543,2804,851],{"class":553},[543,2806,2778],{"class":553},[543,2808,2809],{"class":557},"5",[543,2811,1807],{"class":553},[543,2813,543],{"class":874},[543,2815,1400],{"class":553},[543,2817,2818,2820,2822],{"class":545,"line":636},[543,2819,1807],{"class":553},[543,2821,1269],{"class":874},[543,2823,1400],{"class":553},[464,2825,2826],{},[467,2827,2828,2835,2836,2838,2839,2842],{},[432,2829,2830,2831,2834],{},"Add ",[436,2832,2833],{},"aria-label"," for screen readers."," The indicator's text content alone may not provide enough context. Add an ",[436,2837,2833],{}," to the wrapped element or use ",[436,2840,2841],{},"aria-describedby"," to associate the count with the action.",[534,2844,2846],{"className":2620,"code":2845,"language":2622,"meta":539,"style":539},"\u003Cdiv class=\"chip()\">\n    \u003Cbutton aria-label=\"Notifications, 5 unread\">Notifications\u003C/button>\n    \u003Cspan class=\"chipIndicator(...)\" aria-hidden=\"true\">5\u003C/span>\n\u003C/div>\n",[436,2847,2848,2866,2894,2931],{"__ignoreMap":539},[543,2849,2850,2852,2854,2856,2858,2860,2862,2864],{"class":545,"line":546},[543,2851,1440],{"class":553},[543,2853,1269],{"class":874},[543,2855,2639],{"class":618},[543,2857,625],{"class":553},[543,2859,851],{"class":553},[543,2861,2646],{"class":570},[543,2863,851],{"class":553},[543,2865,1400],{"class":553},[543,2867,2868,2870,2872,2875,2877,2879,2882,2884,2886,2888,2890,2892],{"class":545,"line":580},[543,2869,1829],{"class":553},[543,2871,2775],{"class":874},[543,2873,2874],{"class":618}," aria-label",[543,2876,625],{"class":553},[543,2878,851],{"class":553},[543,2880,2881],{"class":570},"Notifications, 5 unread",[543,2883,851],{"class":553},[543,2885,2778],{"class":553},[543,2887,2781],{"class":557},[543,2889,1807],{"class":553},[543,2891,2775],{"class":874},[543,2893,1400],{"class":553},[543,2895,2896,2898,2900,2902,2904,2906,2908,2910,2913,2915,2917,2919,2921,2923,2925,2927,2929],{"class":545,"line":609},[543,2897,1829],{"class":553},[543,2899,543],{"class":874},[543,2901,2639],{"class":618},[543,2903,625],{"class":553},[543,2905,851],{"class":553},[543,2907,2802],{"class":570},[543,2909,851],{"class":553},[543,2911,2912],{"class":618}," aria-hidden",[543,2914,625],{"class":553},[543,2916,851],{"class":553},[543,2918,1926],{"class":570},[543,2920,851],{"class":553},[543,2922,2778],{"class":553},[543,2924,2809],{"class":557},[543,2926,1807],{"class":553},[543,2928,543],{"class":874},[543,2930,1400],{"class":553},[543,2932,2933,2935,2937],{"class":545,"line":615},[543,2934,1807],{"class":553},[543,2936,1269],{"class":874},[543,2938,1400],{"class":553},[464,2940,2941],{},[467,2942,2943,2946,2947,2949,2950,2953],{},[432,2944,2945],{},"Hide decorative indicators."," When the indicator is a status dot without text (e.g., ",[436,2948,997],{}," size), add ",[436,2951,2952],{},"aria-hidden=\"true\""," to prevent screen readers from announcing an empty element.",[534,2955,2957],{"className":2620,"code":2956,"language":2622,"meta":539,"style":539},"\u003C!-- Status dot: hidden from screen readers -->\n\u003Cdiv class=\"chip()\">\n    \u003Cimg src=\"avatar.png\" alt=\"User avatar, online\" />\n    \u003Cspan class=\"chipIndicator({ size: 'xs', color: 'success' })\" aria-hidden=\"true\">\u003C/span>\n\u003C/div>\n",[436,2958,2959,2964,2982,3011,3044],{"__ignoreMap":539},[543,2960,2961],{"class":545,"line":546},[543,2962,2963],{"class":2629},"\u003C!-- Status dot: hidden from screen readers -->\n",[543,2965,2966,2968,2970,2972,2974,2976,2978,2980],{"class":545,"line":580},[543,2967,1440],{"class":553},[543,2969,1269],{"class":874},[543,2971,2639],{"class":618},[543,2973,625],{"class":553},[543,2975,851],{"class":553},[543,2977,2646],{"class":570},[543,2979,851],{"class":553},[543,2981,1400],{"class":553},[543,2983,2984,2986,2988,2990,2992,2994,2996,2998,3000,3002,3004,3007,3009],{"class":545,"line":609},[543,2985,1829],{"class":553},[543,2987,2657],{"class":874},[543,2989,2660],{"class":618},[543,2991,625],{"class":553},[543,2993,851],{"class":553},[543,2995,2667],{"class":570},[543,2997,851],{"class":553},[543,2999,2672],{"class":618},[543,3001,625],{"class":553},[543,3003,851],{"class":553},[543,3005,3006],{"class":570},"User avatar, online",[543,3008,851],{"class":553},[543,3010,1859],{"class":553},[543,3012,3013,3015,3017,3019,3021,3023,3026,3028,3030,3032,3034,3036,3038,3040,3042],{"class":545,"line":615},[543,3014,1829],{"class":553},[543,3016,543],{"class":874},[543,3018,2639],{"class":618},[543,3020,625],{"class":553},[543,3022,851],{"class":553},[543,3024,3025],{"class":570},"chipIndicator({ size: 'xs', color: 'success' })",[543,3027,851],{"class":553},[543,3029,2912],{"class":618},[543,3031,625],{"class":553},[543,3033,851],{"class":553},[543,3035,1926],{"class":570},[543,3037,851],{"class":553},[543,3039,2703],{"class":553},[543,3041,543],{"class":874},[543,3043,1400],{"class":553},[543,3045,3046,3048,3050],{"class":545,"line":636},[543,3047,1807],{"class":553},[543,3049,1269],{"class":874},[543,3051,1400],{"class":553},[424,3053,3055],{"id":3054},"customization","Customization",[2029,3057,3059],{"id":3058},"overriding-defaults","Overriding Defaults",[428,3061,3062],{},"Each chip composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[534,3064,3066],{"className":536,"code":3065,"filename":532,"language":538,"meta":539,"style":539},"import { styleframe } from 'virtual:styleframe';\nimport { useChipRecipe, useChipIndicatorRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst chip = useChipRecipe(s);\nconst chipIndicator = useChipIndicatorRecipe(s, {\n    defaultVariants: {\n        color: 'success',\n        variant: 'solid',\n        size: 'xs',\n        position: 'bottom-right',\n        inset: 'false',\n    },\n});\n\nexport default s;\n",[436,3067,3068,3088,3112,3116,3130,3134,3148,3165,3174,3188,3202,3216,3230,3244,3249,3258,3262],{"__ignoreMap":539},[543,3069,3070,3072,3074,3076,3078,3080,3082,3084,3086],{"class":545,"line":546},[543,3071,550],{"class":549},[543,3073,554],{"class":553},[543,3075,558],{"class":557},[543,3077,561],{"class":553},[543,3079,564],{"class":549},[543,3081,567],{"class":553},[543,3083,571],{"class":570},[543,3085,574],{"class":553},[543,3087,577],{"class":553},[543,3089,3090,3092,3094,3096,3098,3100,3102,3104,3106,3108,3110],{"class":545,"line":580},[543,3091,550],{"class":549},[543,3093,554],{"class":553},[543,3095,587],{"class":557},[543,3097,590],{"class":553},[543,3099,593],{"class":557},[543,3101,561],{"class":553},[543,3103,564],{"class":549},[543,3105,567],{"class":553},[543,3107,602],{"class":570},[543,3109,574],{"class":553},[543,3111,577],{"class":553},[543,3113,3114],{"class":545,"line":609},[543,3115,612],{"emptyLinePlaceholder":177},[543,3117,3118,3120,3122,3124,3126,3128],{"class":545,"line":615},[543,3119,619],{"class":618},[543,3121,622],{"class":557},[543,3123,625],{"class":553},[543,3125,558],{"class":628},[543,3127,631],{"class":557},[543,3129,577],{"class":553},[543,3131,3132],{"class":545,"line":636},[543,3133,612],{"emptyLinePlaceholder":177},[543,3135,3136,3138,3140,3142,3144,3146],{"class":545,"line":641},[543,3137,619],{"class":618},[543,3139,646],{"class":557},[543,3141,625],{"class":553},[543,3143,587],{"class":628},[543,3145,653],{"class":557},[543,3147,577],{"class":553},[543,3149,3150,3152,3154,3156,3158,3161,3163],{"class":545,"line":658},[543,3151,619],{"class":618},[543,3153,663],{"class":557},[543,3155,625],{"class":553},[543,3157,593],{"class":628},[543,3159,3160],{"class":557},"(s",[543,3162,590],{"class":553},[543,3164,869],{"class":553},[543,3166,3167,3170,3172],{"class":545,"line":674},[543,3168,3169],{"class":874},"    defaultVariants",[543,3171,1353],{"class":553},[543,3173,869],{"class":553},[543,3175,3176,3178,3180,3182,3184,3186],{"class":545,"line":679},[543,3177,1515],{"class":874},[543,3179,1353],{"class":553},[543,3181,567],{"class":553},[543,3183,902],{"class":570},[543,3185,574],{"class":553},[543,3187,1166],{"class":553},[543,3189,3190,3192,3194,3196,3198,3200],{"class":545,"line":1107},[543,3191,1594],{"class":874},[543,3193,1353],{"class":553},[543,3195,567],{"class":553},[543,3197,972],{"class":570},[543,3199,574],{"class":553},[543,3201,1166],{"class":553},[543,3203,3204,3206,3208,3210,3212,3214],{"class":545,"line":1126},[543,3205,1617],{"class":874},[543,3207,1353],{"class":553},[543,3209,567],{"class":553},[543,3211,997],{"class":570},[543,3213,574],{"class":553},[543,3215,1166],{"class":553},[543,3217,3218,3220,3222,3224,3226,3228],{"class":545,"line":1132},[543,3219,1664],{"class":874},[543,3221,1353],{"class":553},[543,3223,567],{"class":553},[543,3225,1067],{"class":570},[543,3227,574],{"class":553},[543,3229,1166],{"class":553},[543,3231,3232,3234,3236,3238,3240,3242],{"class":545,"line":1137},[543,3233,1703],{"class":874},[543,3235,1353],{"class":553},[543,3237,567],{"class":553},[543,3239,1936],{"class":570},[543,3241,574],{"class":553},[543,3243,1166],{"class":553},[543,3245,3246],{"class":545,"line":1151},[543,3247,3248],{"class":553},"    },\n",[543,3250,3251,3254,3256],{"class":545,"line":1169},[543,3252,3253],{"class":553},"}",[543,3255,1249],{"class":557},[543,3257,577],{"class":553},[543,3259,3260],{"class":545,"line":1184},[543,3261,612],{"emptyLinePlaceholder":177},[543,3263,3264,3266,3268,3270],{"class":545,"line":1199},[543,3265,682],{"class":549},[543,3267,685],{"class":549},[543,3269,688],{"class":557},[543,3271,577],{"class":553},[2029,3273,3275],{"id":3274},"filtering-variants","Filtering Variants",[428,3277,3278,3279,3282],{},"If you only need a subset of the available variants, use the ",[436,3280,3281],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[534,3284,3286],{"className":536,"code":3285,"filename":532,"language":538,"meta":539,"style":539},"import { styleframe } from 'virtual:styleframe';\nimport { useChipRecipe, useChipIndicatorRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate primary and error colors, with solid style\nconst chip = useChipRecipe(s);\nconst chipIndicator = useChipIndicatorRecipe(s, {\n    filter: {\n        color: ['primary', 'error'],\n        variant: ['solid'],\n    },\n});\n\nexport default s;\n",[436,3287,3288,3308,3332,3336,3350,3354,3359,3373,3389,3398,3426,3444,3448,3456,3460],{"__ignoreMap":539},[543,3289,3290,3292,3294,3296,3298,3300,3302,3304,3306],{"class":545,"line":546},[543,3291,550],{"class":549},[543,3293,554],{"class":553},[543,3295,558],{"class":557},[543,3297,561],{"class":553},[543,3299,564],{"class":549},[543,3301,567],{"class":553},[543,3303,571],{"class":570},[543,3305,574],{"class":553},[543,3307,577],{"class":553},[543,3309,3310,3312,3314,3316,3318,3320,3322,3324,3326,3328,3330],{"class":545,"line":580},[543,3311,550],{"class":549},[543,3313,554],{"class":553},[543,3315,587],{"class":557},[543,3317,590],{"class":553},[543,3319,593],{"class":557},[543,3321,561],{"class":553},[543,3323,564],{"class":549},[543,3325,567],{"class":553},[543,3327,602],{"class":570},[543,3329,574],{"class":553},[543,3331,577],{"class":553},[543,3333,3334],{"class":545,"line":609},[543,3335,612],{"emptyLinePlaceholder":177},[543,3337,3338,3340,3342,3344,3346,3348],{"class":545,"line":615},[543,3339,619],{"class":618},[543,3341,622],{"class":557},[543,3343,625],{"class":553},[543,3345,558],{"class":628},[543,3347,631],{"class":557},[543,3349,577],{"class":553},[543,3351,3352],{"class":545,"line":636},[543,3353,612],{"emptyLinePlaceholder":177},[543,3355,3356],{"class":545,"line":641},[543,3357,3358],{"class":2629},"// Only generate primary and error colors, with solid style\n",[543,3360,3361,3363,3365,3367,3369,3371],{"class":545,"line":658},[543,3362,619],{"class":618},[543,3364,646],{"class":557},[543,3366,625],{"class":553},[543,3368,587],{"class":628},[543,3370,653],{"class":557},[543,3372,577],{"class":553},[543,3374,3375,3377,3379,3381,3383,3385,3387],{"class":545,"line":674},[543,3376,619],{"class":618},[543,3378,663],{"class":557},[543,3380,625],{"class":553},[543,3382,593],{"class":628},[543,3384,3160],{"class":557},[543,3386,590],{"class":553},[543,3388,869],{"class":553},[543,3390,3391,3394,3396],{"class":545,"line":679},[543,3392,3393],{"class":874},"    filter",[543,3395,1353],{"class":553},[543,3397,869],{"class":553},[543,3399,3400,3402,3404,3407,3409,3411,3413,3415,3417,3419,3421,3424],{"class":545,"line":1107},[543,3401,1515],{"class":874},[543,3403,1353],{"class":553},[543,3405,3406],{"class":557}," [",[543,3408,574],{"class":553},[543,3410,883],{"class":570},[543,3412,574],{"class":553},[543,3414,590],{"class":553},[543,3416,567],{"class":553},[543,3418,929],{"class":570},[543,3420,574],{"class":553},[543,3422,3423],{"class":557},"]",[543,3425,1166],{"class":553},[543,3427,3428,3430,3432,3434,3436,3438,3440,3442],{"class":545,"line":1126},[543,3429,1594],{"class":874},[543,3431,1353],{"class":553},[543,3433,3406],{"class":557},[543,3435,574],{"class":553},[543,3437,972],{"class":570},[543,3439,574],{"class":553},[543,3441,3423],{"class":557},[543,3443,1166],{"class":553},[543,3445,3446],{"class":545,"line":1132},[543,3447,3248],{"class":553},[543,3449,3450,3452,3454],{"class":545,"line":1137},[543,3451,3253],{"class":553},[543,3453,1249],{"class":557},[543,3455,577],{"class":553},[543,3457,3458],{"class":545,"line":1151},[543,3459,612],{"emptyLinePlaceholder":177},[543,3461,3462,3464,3466,3468],{"class":545,"line":1169},[543,3463,682],{"class":549},[543,3465,685],{"class":549},[543,3467,688],{"class":557},[543,3469,577],{"class":553},[2379,3471,3472,3474],{},[432,3473,2383],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[424,3476,3478],{"id":3477},"api-reference","API Reference",[2029,3480,3482],{"id":3481},"usechiprecipes-options",[436,3483,3484],{},"useChipRecipe(s, options?)",[428,3486,3487],{},"Creates the chip wrapper recipe that establishes the positioning context for the indicator.",[428,3489,3490],{},[432,3491,3492],{},"Parameters:",[2038,3494,3495,3508],{},[2041,3496,3497],{},[2044,3498,3499,3502,3505],{},[2047,3500,3501],{},"Parameter",[2047,3503,3504],{},"Type",[2047,3506,3507],{},"Description",[2057,3509,3510,3525,3540],{},[2044,3511,3512,3517,3522],{},[2062,3513,3514],{},[436,3515,3516],{},"s",[2062,3518,3519],{},[436,3520,3521],{},"Styleframe",[2062,3523,3524],{},"The Styleframe instance",[2044,3526,3527,3532,3537],{},[2062,3528,3529],{},[436,3530,3531],{},"options",[2062,3533,3534],{},[436,3535,3536],{},"DeepPartial\u003CRecipeConfig>",[2062,3538,3539],{},"Optional overrides for the recipe configuration",[2044,3541,3542,3547,3552],{},[2062,3543,3544],{},[436,3545,3546],{},"options.base",[2062,3548,3549],{},[436,3550,3551],{},"VariantDeclarationsBlock",[2062,3553,3554],{},"Custom base styles for the wrapper",[428,3556,3557,3558,807,3560,3562],{},"The wrapper recipe has no variants. It sets ",[436,3559,2596],{},[436,3561,2599],{}," as base styles.",[2029,3564,3566],{"id":3565},"usechipindicatorrecipes-options",[436,3567,3568],{},"useChipIndicatorRecipe(s, options?)",[428,3570,3571],{},"Creates the chip indicator recipe with color, variant, size, position, and inset support.",[428,3573,3574],{},[432,3575,3492],{},[2038,3577,3578,3588],{},[2041,3579,3580],{},[2044,3581,3582,3584,3586],{},[2047,3583,3501],{},[2047,3585,3504],{},[2047,3587,3507],{},[2057,3589,3590,3602,3614,3627,3641,3656,3671],{},[2044,3591,3592,3596,3600],{},[2062,3593,3594],{},[436,3595,3516],{},[2062,3597,3598],{},[436,3599,3521],{},[2062,3601,3524],{},[2044,3603,3604,3608,3612],{},[2062,3605,3606],{},[436,3607,3531],{},[2062,3609,3610],{},[436,3611,3536],{},[2062,3613,3539],{},[2044,3615,3616,3620,3624],{},[2062,3617,3618],{},[436,3619,3546],{},[2062,3621,3622],{},[436,3623,3551],{},[2062,3625,3626],{},"Custom base styles for the indicator",[2044,3628,3629,3634,3638],{},[2062,3630,3631],{},[436,3632,3633],{},"options.variants",[2062,3635,3636],{},[436,3637,2198],{},[2062,3639,3640],{},"Custom variant definitions for the recipe",[2044,3642,3643,3648,3653],{},[2062,3644,3645],{},[436,3646,3647],{},"options.defaultVariants",[2062,3649,3650],{},[436,3651,3652],{},"Record\u003Ckeyof Variants, string>",[2062,3654,3655],{},"Default variant values for the recipe",[2044,3657,3658,3663,3668],{},[2062,3659,3660],{},[436,3661,3662],{},"options.compoundVariants",[2062,3664,3665],{},[436,3666,3667],{},"CompoundVariant[]",[2062,3669,3670],{},"Custom compound variant definitions for the recipe",[2044,3672,3673,3678,3683],{},[2062,3674,3675],{},[436,3676,3677],{},"options.filter",[2062,3679,3680],{},[436,3681,3682],{},"Record\u003Cstring, string[]>",[2062,3684,3685],{},"Limit which variant values are generated",[428,3687,3688],{},[432,3689,3690],{},"Variants:",[2038,3692,3693,3706],{},[2041,3694,3695],{},[2044,3696,3697,3700,3703],{},[2047,3698,3699],{},"Variant",[2047,3701,3702],{},"Options",[2047,3704,3705],{},"Default",[2057,3707,3708,3739,3756,3779,3799],{},[2044,3709,3710,3715,3735],{},[2062,3711,3712],{},[436,3713,3714],{},"color",[2062,3716,3717,2006,3719,2006,3721,2006,3723,2006,3725,2006,3727,2006,3729,2006,3731,2006,3733],{},[436,3718,883],{},[436,3720,893],{},[436,3722,902],{},[436,3724,911],{},[436,3726,920],{},[436,3728,929],{},[436,3730,938],{},[436,3732,947],{},[436,3734,956],{},[2062,3736,3737],{},[436,3738,883],{},[2044,3740,3741,3746,3752],{},[2062,3742,3743],{},[436,3744,3745],{},"variant",[2062,3747,3748,2006,3750],{},[436,3749,972],{},[436,3751,981],{},[2062,3753,3754],{},[436,3755,972],{},[2044,3757,3758,3763,3775],{},[2062,3759,3760],{},[436,3761,3762],{},"size",[2062,3764,3765,2006,3767,2006,3769,2006,3771,2006,3773],{},[436,3766,997],{},[436,3768,1006],{},[436,3770,1015],{},[436,3772,1024],{},[436,3774,1033],{},[2062,3776,3777],{},[436,3778,1015],{},[2044,3780,3781,3785,3795],{},[2062,3782,3783],{},[436,3784,2400],{},[2062,3786,3787,2006,3789,2006,3791,2006,3793],{},[436,3788,1049],{},[436,3790,1058],{},[436,3792,1067],{},[436,3794,1076],{},[2062,3796,3797],{},[436,3798,1049],{},[2044,3800,3801,3805,3811],{},[2062,3802,3803],{},[436,3804,1362],{},[2062,3806,3807,2006,3809],{},[436,3808,1926],{},[436,3810,1936],{},[2062,3812,3813],{},[436,3814,1936],{},[428,3816,3817],{},[445,3818,3819],{"href":104},"Learn more about recipes →",[424,3821,3823],{"id":3822},"best-practices","Best Practices",[464,3825,3826,3838,3847,3858,3869,3877,3886],{},[467,3827,3828,3831,3832,3834,3835,3837],{},[432,3829,3830],{},"Choose colors by meaning, not appearance",": Use ",[436,3833,902],{}," for online status and ",[436,3836,929],{}," for alert counts — this keeps your UI consistent when tokens change.",[467,3839,3840,3846],{},[432,3841,3842,3843,3845],{},"Use ",[436,3844,997],{}," for status dots",": The smallest size creates a perfect circle without text, ideal for online/offline indicators.",[467,3848,3849,3854,3855,3857],{},[432,3850,3842,3851,3853],{},[436,3852,972],{}," for high-visibility badges",": Solid indicators stand out against most backgrounds. Use ",[436,3856,981],{}," for subtler, less urgent indicators.",[467,3859,3860,1916,3863,3865,3866,3868],{},[432,3861,3862],{},"Match position to reading direction",[436,3864,1049],{}," (default) works well for LTR layouts. Consider ",[436,3867,1058],{}," for RTL layouts.",[467,3870,3871,3876],{},[432,3872,3842,3873,3875],{},[436,3874,1362],{}," for tight layouts",": When the indicator shouldn't overflow the parent's bounds, enable inset mode to keep it inside the corner.",[467,3878,3879,3882,3883,3885],{},[432,3880,3881],{},"Filter what you don't need",": If your component only uses a few colors or sizes, pass a ",[436,3884,3281],{}," option to reduce generated CSS.",[467,3887,3888,3891,3892,3895],{},[432,3889,3890],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[436,3893,3894],{},"defaultVariants"," so component consumers write less code.",[424,3897,3899],{"id":3898},"faq","FAQ",[3901,3902,3903,3914,3950,3972,3987,4017],"accordion",{},[3904,3905,3908,3909,807,3911,3913],"accordion-item",{"icon":3906,"label":3907},"i-lucide-circle-help","Why are there two separate recipes instead of one?","The chip has two distinct elements: a positioning wrapper and a visual indicator. The wrapper only needs ",[436,3910,2596],{},[436,3912,2599],{}," to establish the positioning context, while the indicator has color, variant, size, position, and inset variants. Keeping them separate means the wrapper recipe can be applied to any element without adding unnecessary variant classes.",[3904,3915,3917,3918,3921,3922,807,3925,3921,3928,3931,3932,3935,3936,3938,3939,3941,3942,2497,3944,3946,3947,3949],{"icon":3906,"label":3916},"How does the position variant work?","The indicator is absolutely positioned using ",[436,3919,3920],{},"top","/",[436,3923,3924],{},"bottom",[436,3926,3927],{},"left",[436,3929,3930],{},"right"," CSS properties set to ",[436,3933,3934],{},"0",". A CSS ",[436,3937,2409],{}," with ",[436,3940,2444],{}," (or the appropriate signs for each corner) offsets the indicator so it straddles the corner of the parent element. When ",[436,3943,1362],{},[436,3945,1926],{},", compound variants override the transform to ",[436,3948,2537],{},", keeping the indicator inside the parent bounds.",[3904,3951,3953,3954,3956,3957,807,3960,3963,3964,3967,3968,3971],{"icon":3906,"label":3952},"Why does the inset variant use string keys instead of a boolean?","Recipe variant values are always strings in the configuration object. The ",[436,3955,1362],{}," variant uses ",[436,3958,3959],{},"\"true\"",[436,3961,3962],{},"\"false\""," as string keys internally, but your component can accept a boolean prop and convert it with ",[436,3965,3966],{},"String(inset)"," or a ternary (",[436,3969,3970],{},"inset ? 'true' : 'false'",") when passing it to the recipe function.",[3904,3973,3975,3977,3978,3980,3981,3983,3984,3986],{"icon":3906,"label":3974},"What's the difference between light, dark, and neutral colors?",[436,3976,938],{}," always uses light tones regardless of the color scheme. ",[436,3979,947],{}," always uses darker tones. ",[436,3982,956],{}," adapts to the current color scheme: it appears light in light mode and dark in dark mode. Use ",[436,3985,956],{}," when you want the indicator to blend naturally with the surrounding interface.",[3904,3988,3990,3991,3993,3994,3996,3997,4000,4001,2006,4003,2006,4005,2006,4007,2006,4009,2006,4011,4013,4014,4016],{"icon":3906,"label":3989},"How does filtering affect compound variants?","When you use the ",[436,3992,3281],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[436,3995,3714],{}," to only ",[436,3998,3999],{},"['primary', 'success']",", all compound variants matching ",[436,4002,893],{},[436,4004,911],{},[436,4006,920],{},[436,4008,929],{},[436,4010,938],{},[436,4012,947],{},", or ",[436,4015,956],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[3904,4018,4020,4021,2006,4023,2006,4025,4028,4029,4032,4033,4036],{"icon":3906,"label":4019},"Can I use the Chip recipe without the design tokens preset?","The Chip indicator recipe references design tokens like ",[436,4022,2070],{},[436,4024,2332],{},[436,4026,4027],{},"@border-radius.full",", and ",[436,4030,4031],{},"@z-index.base"," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[436,4034,4035],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4038,4039,4040],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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":539,"searchDepth":580,"depth":580,"links":4042},[4043,4044,4045,4046,4049,4053,4056,4057,4058,4059,4060,4061,4065,4069,4070],{"id":426,"depth":580,"text":21},{"id":458,"depth":580,"text":459},{"id":511,"depth":580,"text":512},{"id":2000,"depth":580,"text":198,"children":4047},[4048],{"id":2031,"depth":609,"text":2032},{"id":2197,"depth":580,"text":2198,"children":4050},[4051,4052],{"id":972,"depth":609,"text":2209},{"id":981,"depth":609,"text":2218},{"id":2227,"depth":580,"text":2228,"children":4054},[4055],{"id":2246,"depth":609,"text":2247},{"id":2400,"depth":580,"text":2401},{"id":1362,"depth":580,"text":2489},{"id":2540,"depth":580,"text":2541},{"id":2558,"depth":580,"text":2559},{"id":2728,"depth":580,"text":314},{"id":3054,"depth":580,"text":3055,"children":4062},[4063,4064],{"id":3058,"depth":609,"text":3059},{"id":3274,"depth":609,"text":3275},{"id":3477,"depth":580,"text":3478,"children":4066},[4067,4068],{"id":3481,"depth":609,"text":3484},{"id":3565,"depth":609,"text":3568},{"id":3822,"depth":580,"text":3823},{"id":3898,"depth":580,"text":3899},"A status indicator component positioned at the corner of an element. Supports multiple colors, visual styles, sizes, positions, and inset mode through the recipe system.",null,{},{"title":298,"description":4071},{"loc":299},"z-Duzz3war28BIu0EvQTI6keEGmwd9MeqJkwIke_yO4",[4078,4080],{"title":294,"path":295,"stem":296,"description":4079,"children":-1},"A floating container component with structured sections and a directional arrow for contextual content. Supports multiple colors, visual styles, and sizes through the recipe system.",{"title":21,"path":302,"stem":303,"description":4081,"icon":51,"children":-1},"Explore Styleframe's utility composables for generating CSS utility classes. Create flexible, reusable styling primitives with full type safety.",1775708986012]