[{"data":1,"prerenderedAt":3209},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-duration":682,"-docs-theme-design-tokens-duration-surround":3204},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.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","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":3197,"extension":3198,"links":3199,"meta":3200,"navigation":3201,"path":201,"seo":3202,"stem":202,"__hash__":3203},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F07.duration.md","Duration Design Tokens",{"type":686,"value":687,"toc":3182},"minimark",[688,714,718,722,726,729,757,762,769,1122,1142,1156,1160,1165,1324,1329,1468,1472,1475,2039,2043,2047,2050,2327,2331,2334,2897,2901,2955,2965,2969,3178],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useDurationDesignTokens"," is included in the ",[702,703,704],"a",{"href":171},"Design Tokens Preset"," (",[697,707,708],{},"useDesignTokensPreset",") and you can configure it through the preset's ",[697,711,712],{},"duration"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721],"p",{},"The duration composables help you create consistent animation and transition timing systems with minimal code. They generate duration variables that can be easily referenced throughout your application, enabling flexible theming and consistent motion design.",[715,723,725],{"id":724},"why-use-duration-composables","Why use duration composables?",[719,727,728],{},"Duration composables help you:",[730,731,732,739,745,751],"ul",{},[733,734,735,738],"li",{},[692,736,737],{},"Centralize timing values",": Define all your animation durations in one place for easy management.",[733,740,741,744],{},[692,742,743],{},"Enable flexible theming",": Override duration values to instantly update animation speed across your application.",[733,746,747,750],{},[692,748,749],{},"Maintain consistency",": Use semantic names to ensure consistent timing throughout your design system.",[733,752,753,756],{},[692,754,755],{},"Eliminate magic numbers",": Replace hardcoded millisecond values with meaningful token names.",[715,758,760],{"id":759},"usedurationdesigntokens",[697,761,699],{},[719,763,764,765,768],{},"The ",[697,766,767],{},"useDurationDesignTokens()"," function creates a set of duration variables from a simple object of timing value definitions. It includes sensible defaults covering a full range from instant (0ms) through slowest (1000ms).",[770,771,772,1042],"tabs",{},[773,774,776],"tabs-item",{"icon":775,"label":290},"i-lucide-code",[777,778,784],"pre",{"className":779,"code":780,"filename":781,"language":782,"meta":783,"style":783},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    duration,\n    durationFast,\n    durationNormal,\n    durationSlow,\n} = useDurationDesignTokens(s, {\n    default: '@duration.normal',\n    fast: '150ms',\n    normal: '250ms',\n    slow: '300ms',\n} as const);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,785,786,822,845,851,872,877,885,894,902,910,918,937,956,973,990,1007,1023,1028],{"__ignoreMap":783},[787,788,791,795,799,803,806,809,812,816,819],"span",{"class":789,"line":790},"line",1,[787,792,794],{"class":793},"s7zQu","import",[787,796,798],{"class":797},"sMK4o"," {",[787,800,802],{"class":801},"sTEyZ"," styleframe",[787,804,805],{"class":797}," }",[787,807,808],{"class":793}," from",[787,810,811],{"class":797}," '",[787,813,815],{"class":814},"sfazB","styleframe",[787,817,818],{"class":797},"'",[787,820,821],{"class":797},";\n",[787,823,825,827,829,832,834,836,838,841,843],{"class":789,"line":824},2,[787,826,794],{"class":793},[787,828,798],{"class":797},[787,830,831],{"class":801}," useDurationDesignTokens",[787,833,805],{"class":797},[787,835,808],{"class":793},[787,837,811],{"class":797},[787,839,840],{"class":814},"@styleframe\u002Ftheme",[787,842,818],{"class":797},[787,844,821],{"class":797},[787,846,848],{"class":789,"line":847},3,[787,849,850],{"emptyLinePlaceholder":223},"\n",[787,852,854,858,861,864,867,870],{"class":789,"line":853},4,[787,855,857],{"class":856},"spNyl","const",[787,859,860],{"class":801}," s ",[787,862,863],{"class":797},"=",[787,865,802],{"class":866},"s2Zo4",[787,868,869],{"class":801},"()",[787,871,821],{"class":797},[787,873,875],{"class":789,"line":874},5,[787,876,850],{"emptyLinePlaceholder":223},[787,878,880,882],{"class":789,"line":879},6,[787,881,857],{"class":856},[787,883,884],{"class":797}," {\n",[787,886,888,891],{"class":789,"line":887},7,[787,889,890],{"class":801},"    duration",[787,892,893],{"class":797},",\n",[787,895,897,900],{"class":789,"line":896},8,[787,898,899],{"class":801},"    durationFast",[787,901,893],{"class":797},[787,903,905,908],{"class":789,"line":904},9,[787,906,907],{"class":801},"    durationNormal",[787,909,893],{"class":797},[787,911,913,916],{"class":789,"line":912},10,[787,914,915],{"class":801},"    durationSlow",[787,917,893],{"class":797},[787,919,921,924,927,929,932,935],{"class":789,"line":920},11,[787,922,923],{"class":797},"}",[787,925,926],{"class":797}," =",[787,928,831],{"class":866},[787,930,931],{"class":801},"(s",[787,933,934],{"class":797},",",[787,936,884],{"class":797},[787,938,940,944,947,949,952,954],{"class":789,"line":939},12,[787,941,943],{"class":942},"swJcz","    default",[787,945,946],{"class":797},":",[787,948,811],{"class":797},[787,950,951],{"class":814},"@duration.normal",[787,953,818],{"class":797},[787,955,893],{"class":797},[787,957,959,962,964,966,969,971],{"class":789,"line":958},13,[787,960,961],{"class":942},"    fast",[787,963,946],{"class":797},[787,965,811],{"class":797},[787,967,968],{"class":814},"150ms",[787,970,818],{"class":797},[787,972,893],{"class":797},[787,974,976,979,981,983,986,988],{"class":789,"line":975},14,[787,977,978],{"class":942},"    normal",[787,980,946],{"class":797},[787,982,811],{"class":797},[787,984,985],{"class":814},"250ms",[787,987,818],{"class":797},[787,989,893],{"class":797},[787,991,993,996,998,1000,1003,1005],{"class":789,"line":992},15,[787,994,995],{"class":942},"    slow",[787,997,946],{"class":797},[787,999,811],{"class":797},[787,1001,1002],{"class":814},"300ms",[787,1004,818],{"class":797},[787,1006,893],{"class":797},[787,1008,1010,1012,1015,1018,1021],{"class":789,"line":1009},16,[787,1011,923],{"class":797},[787,1013,1014],{"class":793}," as",[787,1016,1017],{"class":856}," const",[787,1019,1020],{"class":801},")",[787,1022,821],{"class":797},[787,1024,1026],{"class":789,"line":1025},17,[787,1027,850],{"emptyLinePlaceholder":223},[787,1029,1031,1034,1037,1040],{"class":789,"line":1030},18,[787,1032,1033],{"class":793},"export",[787,1035,1036],{"class":793}," default",[787,1038,1039],{"class":801}," s",[787,1041,821],{"class":797},[773,1043,1044],{"icon":154,"label":326},[777,1045,1050],{"className":1046,"code":1047,"filename":1048,"language":1049,"meta":783,"style":783},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --duration--fast: 150ms;\n    --duration--normal: 250ms;\n    --duration--slow: 300ms;\n    --duration: var(--duration--normal);\n}\n","styleframe\u002Findex.css","css",[697,1051,1052,1061,1074,1086,1098,1117],{"__ignoreMap":783},[787,1053,1054,1056,1059],{"class":789,"line":790},[787,1055,946],{"class":797},[787,1057,1058],{"class":856},"root",[787,1060,884],{"class":797},[787,1062,1063,1066,1068,1072],{"class":789,"line":824},[787,1064,1065],{"class":801},"    --duration--fast",[787,1067,946],{"class":797},[787,1069,1071],{"class":1070},"sbssI"," 150ms",[787,1073,821],{"class":797},[787,1075,1076,1079,1081,1084],{"class":789,"line":847},[787,1077,1078],{"class":801},"    --duration--normal",[787,1080,946],{"class":797},[787,1082,1083],{"class":1070}," 250ms",[787,1085,821],{"class":797},[787,1087,1088,1091,1093,1096],{"class":789,"line":853},[787,1089,1090],{"class":801},"    --duration--slow",[787,1092,946],{"class":797},[787,1094,1095],{"class":1070}," 300ms",[787,1097,821],{"class":797},[787,1099,1100,1103,1105,1108,1111,1114],{"class":789,"line":874},[787,1101,1102],{"class":801},"    --duration",[787,1104,946],{"class":797},[787,1106,1107],{"class":866}," var",[787,1109,1110],{"class":797},"(",[787,1112,1113],{"class":801},"--duration--normal",[787,1115,1116],{"class":797},");\n",[787,1118,1119],{"class":789,"line":879},[787,1120,1121],{"class":797},"}\n",[719,1123,1124,1125,1127,1128,1131,1132,1134,1135,1131,1138,1141],{},"Each key in the object becomes a duration variable with the prefix ",[697,1126,712],{},", and the export name is automatically converted to camelCase (e.g., ",[697,1129,1130],{},"default"," → ",[697,1133,712],{},", ",[697,1136,1137],{},"fast",[697,1139,1140],{},"durationFast",").",[1143,1144,1145,1148,1149,1151,1152,1155],"tip",{},[692,1146,1147],{},"Pro tip:"," Use the ",[697,1150,1130],{}," key for your primary duration. It will create a variable named ",[697,1153,1154],{},"--duration"," without any suffix, making it the natural choice for standard transitions throughout your application.",[715,1157,1159],{"id":1158},"default-values","Default Values",[719,1161,764,1162,1164],{},[697,1163,767],{}," composable comes with comprehensive defaults. You can use them directly without passing any arguments:",[777,1166,1168],{"className":779,"code":1167,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Use all defaults\nconst {\n    durationInstant,\n    durationFastest,\n    durationFaster,\n    durationFast,\n    durationNormal,\n    durationSlow,\n    durationSlower,\n    durationSlowest,\n} = useDurationDesignTokens(s);\n\nexport default s;\n",[697,1169,1170,1190,1210,1214,1228,1232,1238,1244,1251,1258,1265,1271,1277,1283,1290,1297,1310,1314],{"__ignoreMap":783},[787,1171,1172,1174,1176,1178,1180,1182,1184,1186,1188],{"class":789,"line":790},[787,1173,794],{"class":793},[787,1175,798],{"class":797},[787,1177,802],{"class":801},[787,1179,805],{"class":797},[787,1181,808],{"class":793},[787,1183,811],{"class":797},[787,1185,815],{"class":814},[787,1187,818],{"class":797},[787,1189,821],{"class":797},[787,1191,1192,1194,1196,1198,1200,1202,1204,1206,1208],{"class":789,"line":824},[787,1193,794],{"class":793},[787,1195,798],{"class":797},[787,1197,831],{"class":801},[787,1199,805],{"class":797},[787,1201,808],{"class":793},[787,1203,811],{"class":797},[787,1205,840],{"class":814},[787,1207,818],{"class":797},[787,1209,821],{"class":797},[787,1211,1212],{"class":789,"line":847},[787,1213,850],{"emptyLinePlaceholder":223},[787,1215,1216,1218,1220,1222,1224,1226],{"class":789,"line":853},[787,1217,857],{"class":856},[787,1219,860],{"class":801},[787,1221,863],{"class":797},[787,1223,802],{"class":866},[787,1225,869],{"class":801},[787,1227,821],{"class":797},[787,1229,1230],{"class":789,"line":874},[787,1231,850],{"emptyLinePlaceholder":223},[787,1233,1234],{"class":789,"line":879},[787,1235,1237],{"class":1236},"sHwdD","\u002F\u002F Use all defaults\n",[787,1239,1240,1242],{"class":789,"line":887},[787,1241,857],{"class":856},[787,1243,884],{"class":797},[787,1245,1246,1249],{"class":789,"line":896},[787,1247,1248],{"class":801},"    durationInstant",[787,1250,893],{"class":797},[787,1252,1253,1256],{"class":789,"line":904},[787,1254,1255],{"class":801},"    durationFastest",[787,1257,893],{"class":797},[787,1259,1260,1263],{"class":789,"line":912},[787,1261,1262],{"class":801},"    durationFaster",[787,1264,893],{"class":797},[787,1266,1267,1269],{"class":789,"line":920},[787,1268,899],{"class":801},[787,1270,893],{"class":797},[787,1272,1273,1275],{"class":789,"line":939},[787,1274,907],{"class":801},[787,1276,893],{"class":797},[787,1278,1279,1281],{"class":789,"line":958},[787,1280,915],{"class":801},[787,1282,893],{"class":797},[787,1284,1285,1288],{"class":789,"line":975},[787,1286,1287],{"class":801},"    durationSlower",[787,1289,893],{"class":797},[787,1291,1292,1295],{"class":789,"line":992},[787,1293,1294],{"class":801},"    durationSlowest",[787,1296,893],{"class":797},[787,1298,1299,1301,1303,1305,1308],{"class":789,"line":1009},[787,1300,923],{"class":797},[787,1302,926],{"class":797},[787,1304,831],{"class":866},[787,1306,1307],{"class":801},"(s)",[787,1309,821],{"class":797},[787,1311,1312],{"class":789,"line":1025},[787,1313,850],{"emptyLinePlaceholder":223},[787,1315,1316,1318,1320,1322],{"class":789,"line":1030},[787,1317,1033],{"class":793},[787,1319,1036],{"class":793},[787,1321,1039],{"class":801},[787,1323,821],{"class":797},[1325,1326,1328],"h3",{"id":1327},"duration-scale","Duration Scale",[1330,1331,1332,1348],"table",{},[1333,1334,1335],"thead",{},[1336,1337,1338,1342,1345],"tr",{},[1339,1340,1341],"th",{},"Name",[1339,1343,1344],{},"Value",[1339,1346,1347],{},"Use Case",[1349,1350,1351,1367,1382,1397,1410,1424,1438,1453],"tbody",{},[1336,1352,1353,1359,1364],{},[1354,1355,1356],"td",{},[697,1357,1358],{},"instant",[1354,1360,1361],{},[697,1362,1363],{},"0ms",[1354,1365,1366],{},"Immediate state changes, no animation",[1336,1368,1369,1374,1379],{},[1354,1370,1371],{},[697,1372,1373],{},"fastest",[1354,1375,1376],{},[697,1377,1378],{},"50ms",[1354,1380,1381],{},"Micro-interactions (ripple effects)",[1336,1383,1384,1389,1394],{},[1354,1385,1386],{},[697,1387,1388],{},"faster",[1354,1390,1391],{},[697,1392,1393],{},"100ms",[1354,1395,1396],{},"Hover and focus states",[1336,1398,1399,1403,1407],{},[1354,1400,1401],{},[697,1402,1137],{},[1354,1404,1405],{},[697,1406,968],{},[1354,1408,1409],{},"Button presses, toggles",[1336,1411,1412,1417,1421],{},[1354,1413,1414],{},[697,1415,1416],{},"normal",[1354,1418,1419],{},[697,1420,985],{},[1354,1422,1423],{},"Standard UI transitions (modals, dropdowns)",[1336,1425,1426,1431,1435],{},[1354,1427,1428],{},[697,1429,1430],{},"slow",[1354,1432,1433],{},[697,1434,1002],{},[1354,1436,1437],{},"Page transitions, complex reveals",[1336,1439,1440,1445,1450],{},[1354,1441,1442],{},[697,1443,1444],{},"slower",[1354,1446,1447],{},[697,1448,1449],{},"500ms",[1354,1451,1452],{},"Spring and bounce animations",[1336,1454,1455,1460,1465],{},[1354,1456,1457],{},[697,1458,1459],{},"slowest",[1354,1461,1462],{},[697,1463,1464],{},"1000ms",[1354,1466,1467],{},"Full-page animations, onboarding flows",[715,1469,1471],{"id":1470},"using-duration-variables","Using Duration Variables",[719,1473,1474],{},"Once created, duration variables can be used anywhere in your styles:",[770,1476,1477,1858],{},[773,1478,1479],{"icon":775,"label":290},[777,1480,1482],{"className":779,"code":1481,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens, useEasingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\nconst { durationFast, durationNormal } = useDurationDesignTokens(s, {\n    fast: '150ms',\n    normal: '250ms',\n} as const);\n\nconst { easingEaseOutCubic } = useEasingDesignTokens(s, {\n    'ease-out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n} as const);\n\nselector('.button', {\n    transition: css`background-color ${durationFast} ${easingEaseOutCubic}`,\n});\n\nselector('.modal', {\n    transition: css`opacity ${durationNormal} ${easingEaseOutCubic}, transform ${durationNormal} ${easingEaseOutCubic}`,\n});\n\nexport default s;\n",[697,1483,1484,1504,1529,1533,1547,1574,1578,1604,1618,1632,1644,1648,1669,1690,1702,1706,1724,1758,1766,1771,1789,1833,1842,1847],{"__ignoreMap":783},[787,1485,1486,1488,1490,1492,1494,1496,1498,1500,1502],{"class":789,"line":790},[787,1487,794],{"class":793},[787,1489,798],{"class":797},[787,1491,802],{"class":801},[787,1493,805],{"class":797},[787,1495,808],{"class":793},[787,1497,811],{"class":797},[787,1499,815],{"class":814},[787,1501,818],{"class":797},[787,1503,821],{"class":797},[787,1505,1506,1508,1510,1512,1514,1517,1519,1521,1523,1525,1527],{"class":789,"line":824},[787,1507,794],{"class":793},[787,1509,798],{"class":797},[787,1511,831],{"class":801},[787,1513,934],{"class":797},[787,1515,1516],{"class":801}," useEasingDesignTokens",[787,1518,805],{"class":797},[787,1520,808],{"class":793},[787,1522,811],{"class":797},[787,1524,840],{"class":814},[787,1526,818],{"class":797},[787,1528,821],{"class":797},[787,1530,1531],{"class":789,"line":847},[787,1532,850],{"emptyLinePlaceholder":223},[787,1534,1535,1537,1539,1541,1543,1545],{"class":789,"line":853},[787,1536,857],{"class":856},[787,1538,860],{"class":801},[787,1540,863],{"class":797},[787,1542,802],{"class":866},[787,1544,869],{"class":801},[787,1546,821],{"class":797},[787,1548,1549,1551,1553,1556,1558,1561,1563,1566,1568,1570,1572],{"class":789,"line":874},[787,1550,857],{"class":856},[787,1552,798],{"class":797},[787,1554,1555],{"class":801}," ref",[787,1557,934],{"class":797},[787,1559,1560],{"class":801}," selector",[787,1562,934],{"class":797},[787,1564,1565],{"class":801}," css ",[787,1567,923],{"class":797},[787,1569,926],{"class":797},[787,1571,1039],{"class":801},[787,1573,821],{"class":797},[787,1575,1576],{"class":789,"line":879},[787,1577,850],{"emptyLinePlaceholder":223},[787,1579,1580,1582,1584,1587,1589,1592,1594,1596,1598,1600,1602],{"class":789,"line":887},[787,1581,857],{"class":856},[787,1583,798],{"class":797},[787,1585,1586],{"class":801}," durationFast",[787,1588,934],{"class":797},[787,1590,1591],{"class":801}," durationNormal ",[787,1593,923],{"class":797},[787,1595,926],{"class":797},[787,1597,831],{"class":866},[787,1599,931],{"class":801},[787,1601,934],{"class":797},[787,1603,884],{"class":797},[787,1605,1606,1608,1610,1612,1614,1616],{"class":789,"line":896},[787,1607,961],{"class":942},[787,1609,946],{"class":797},[787,1611,811],{"class":797},[787,1613,968],{"class":814},[787,1615,818],{"class":797},[787,1617,893],{"class":797},[787,1619,1620,1622,1624,1626,1628,1630],{"class":789,"line":904},[787,1621,978],{"class":942},[787,1623,946],{"class":797},[787,1625,811],{"class":797},[787,1627,985],{"class":814},[787,1629,818],{"class":797},[787,1631,893],{"class":797},[787,1633,1634,1636,1638,1640,1642],{"class":789,"line":912},[787,1635,923],{"class":797},[787,1637,1014],{"class":793},[787,1639,1017],{"class":856},[787,1641,1020],{"class":801},[787,1643,821],{"class":797},[787,1645,1646],{"class":789,"line":920},[787,1647,850],{"emptyLinePlaceholder":223},[787,1649,1650,1652,1654,1657,1659,1661,1663,1665,1667],{"class":789,"line":939},[787,1651,857],{"class":856},[787,1653,798],{"class":797},[787,1655,1656],{"class":801}," easingEaseOutCubic ",[787,1658,923],{"class":797},[787,1660,926],{"class":797},[787,1662,1516],{"class":866},[787,1664,931],{"class":801},[787,1666,934],{"class":797},[787,1668,884],{"class":797},[787,1670,1671,1674,1677,1679,1681,1683,1686,1688],{"class":789,"line":958},[787,1672,1673],{"class":797},"    '",[787,1675,1676],{"class":942},"ease-out-cubic",[787,1678,818],{"class":797},[787,1680,946],{"class":797},[787,1682,811],{"class":797},[787,1684,1685],{"class":814},"cubic-bezier(0.215, 0.61, 0.355, 1)",[787,1687,818],{"class":797},[787,1689,893],{"class":797},[787,1691,1692,1694,1696,1698,1700],{"class":789,"line":975},[787,1693,923],{"class":797},[787,1695,1014],{"class":793},[787,1697,1017],{"class":856},[787,1699,1020],{"class":801},[787,1701,821],{"class":797},[787,1703,1704],{"class":789,"line":992},[787,1705,850],{"emptyLinePlaceholder":223},[787,1707,1708,1711,1713,1715,1718,1720,1722],{"class":789,"line":1009},[787,1709,1710],{"class":866},"selector",[787,1712,1110],{"class":801},[787,1714,818],{"class":797},[787,1716,1717],{"class":814},".button",[787,1719,818],{"class":797},[787,1721,934],{"class":797},[787,1723,884],{"class":797},[787,1725,1726,1729,1731,1734,1737,1740,1743,1745,1747,1750,1753,1756],{"class":789,"line":1025},[787,1727,1728],{"class":942},"    transition",[787,1730,946],{"class":797},[787,1732,1733],{"class":866}," css",[787,1735,1736],{"class":797},"`",[787,1738,1739],{"class":814},"background-color ",[787,1741,1742],{"class":797},"${",[787,1744,1140],{"class":801},[787,1746,923],{"class":797},[787,1748,1749],{"class":797}," ${",[787,1751,1752],{"class":801},"easingEaseOutCubic",[787,1754,1755],{"class":797},"}`",[787,1757,893],{"class":797},[787,1759,1760,1762,1764],{"class":789,"line":1030},[787,1761,923],{"class":797},[787,1763,1020],{"class":801},[787,1765,821],{"class":797},[787,1767,1769],{"class":789,"line":1768},19,[787,1770,850],{"emptyLinePlaceholder":223},[787,1772,1774,1776,1778,1780,1783,1785,1787],{"class":789,"line":1773},20,[787,1775,1710],{"class":866},[787,1777,1110],{"class":801},[787,1779,818],{"class":797},[787,1781,1782],{"class":814},".modal",[787,1784,818],{"class":797},[787,1786,934],{"class":797},[787,1788,884],{"class":797},[787,1790,1792,1794,1796,1798,1800,1803,1805,1808,1810,1812,1814,1816,1819,1821,1823,1825,1827,1829,1831],{"class":789,"line":1791},21,[787,1793,1728],{"class":942},[787,1795,946],{"class":797},[787,1797,1733],{"class":866},[787,1799,1736],{"class":797},[787,1801,1802],{"class":814},"opacity ",[787,1804,1742],{"class":797},[787,1806,1807],{"class":801},"durationNormal",[787,1809,923],{"class":797},[787,1811,1749],{"class":797},[787,1813,1752],{"class":801},[787,1815,923],{"class":797},[787,1817,1818],{"class":814},", transform ",[787,1820,1742],{"class":797},[787,1822,1807],{"class":801},[787,1824,923],{"class":797},[787,1826,1749],{"class":797},[787,1828,1752],{"class":801},[787,1830,1755],{"class":797},[787,1832,893],{"class":797},[787,1834,1836,1838,1840],{"class":789,"line":1835},22,[787,1837,923],{"class":797},[787,1839,1020],{"class":801},[787,1841,821],{"class":797},[787,1843,1845],{"class":789,"line":1844},23,[787,1846,850],{"emptyLinePlaceholder":223},[787,1848,1850,1852,1854,1856],{"class":789,"line":1849},24,[787,1851,1033],{"class":793},[787,1853,1036],{"class":793},[787,1855,1039],{"class":801},[787,1857,821],{"class":797},[773,1859,1860],{"icon":154,"label":326},[777,1861,1863],{"className":1046,"code":1862,"filename":1048,"language":1049,"meta":783,"style":783},":root {\n    --duration--fast: 150ms;\n    --duration--normal: 250ms;\n    --easing--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.button {\n    transition: background-color var(--duration--fast) var(--easing--ease-out-cubic);\n}\n\n.modal {\n    transition: opacity var(--duration--normal) var(--easing--ease-out-cubic), transform var(--duration--normal) var(--easing--ease-out-cubic);\n}\n",[697,1864,1865,1873,1883,1893,1925,1929,1933,1944,1973,1977,1981,1990,2035],{"__ignoreMap":783},[787,1866,1867,1869,1871],{"class":789,"line":790},[787,1868,946],{"class":797},[787,1870,1058],{"class":856},[787,1872,884],{"class":797},[787,1874,1875,1877,1879,1881],{"class":789,"line":824},[787,1876,1065],{"class":801},[787,1878,946],{"class":797},[787,1880,1071],{"class":1070},[787,1882,821],{"class":797},[787,1884,1885,1887,1889,1891],{"class":789,"line":847},[787,1886,1078],{"class":801},[787,1888,946],{"class":797},[787,1890,1083],{"class":1070},[787,1892,821],{"class":797},[787,1894,1895,1898,1900,1903,1905,1908,1910,1913,1915,1918,1920,1923],{"class":789,"line":853},[787,1896,1897],{"class":801},"    --easing--ease-out-cubic",[787,1899,946],{"class":797},[787,1901,1902],{"class":866}," cubic-bezier",[787,1904,1110],{"class":797},[787,1906,1907],{"class":1070},"0.215",[787,1909,934],{"class":797},[787,1911,1912],{"class":1070}," 0.61",[787,1914,934],{"class":797},[787,1916,1917],{"class":1070}," 0.355",[787,1919,934],{"class":797},[787,1921,1922],{"class":1070}," 1",[787,1924,1116],{"class":797},[787,1926,1927],{"class":789,"line":874},[787,1928,1121],{"class":797},[787,1930,1931],{"class":789,"line":879},[787,1932,850],{"emptyLinePlaceholder":223},[787,1934,1935,1938,1942],{"class":789,"line":887},[787,1936,1937],{"class":797},".",[787,1939,1941],{"class":1940},"sBMFI","button",[787,1943,884],{"class":797},[787,1945,1946,1949,1951,1954,1957,1959,1962,1964,1966,1968,1971],{"class":789,"line":896},[787,1947,1728],{"class":1948},"sqsOY",[787,1950,946],{"class":797},[787,1952,1953],{"class":801}," background-color ",[787,1955,1956],{"class":866},"var",[787,1958,1110],{"class":797},[787,1960,1961],{"class":801},"--duration--fast",[787,1963,1020],{"class":797},[787,1965,1107],{"class":866},[787,1967,1110],{"class":797},[787,1969,1970],{"class":801},"--easing--ease-out-cubic",[787,1972,1116],{"class":797},[787,1974,1975],{"class":789,"line":904},[787,1976,1121],{"class":797},[787,1978,1979],{"class":789,"line":912},[787,1980,850],{"emptyLinePlaceholder":223},[787,1982,1983,1985,1988],{"class":789,"line":920},[787,1984,1937],{"class":797},[787,1986,1987],{"class":1940},"modal",[787,1989,884],{"class":797},[787,1991,1992,1994,1996,1999,2001,2003,2005,2007,2009,2011,2013,2016,2019,2021,2023,2025,2027,2029,2031,2033],{"class":789,"line":939},[787,1993,1728],{"class":1948},[787,1995,946],{"class":797},[787,1997,1998],{"class":801}," opacity ",[787,2000,1956],{"class":866},[787,2002,1110],{"class":797},[787,2004,1113],{"class":801},[787,2006,1020],{"class":797},[787,2008,1107],{"class":866},[787,2010,1110],{"class":797},[787,2012,1970],{"class":801},[787,2014,2015],{"class":797},"),",[787,2017,2018],{"class":801}," transform ",[787,2020,1956],{"class":866},[787,2022,1110],{"class":797},[787,2024,1113],{"class":801},[787,2026,1020],{"class":797},[787,2028,1107],{"class":866},[787,2030,1110],{"class":797},[787,2032,1970],{"class":801},[787,2034,1116],{"class":797},[787,2036,2037],{"class":789,"line":958},[787,2038,1121],{"class":797},[715,2040,2042],{"id":2041},"examples","Examples",[1325,2044,2046],{"id":2045},"semantic-duration-names","Semantic Duration Names",[719,2048,2049],{},"Use semantic names to make animation intent clear:",[770,2051,2052,2259],{},[773,2053,2054],{"icon":775,"label":290},[777,2055,2057],{"className":779,"code":2056,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens, durationValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    duration,\n    durationMicro,\n    durationUi,\n    durationPage,\n} = useDurationDesignTokens(s, {\n    default: '@duration.ui',\n    micro: durationValues.faster,\n    ui: durationValues.normal,\n    page: durationValues.slow,\n} as const);\n\nexport default s;\n",[697,2058,2059,2079,2104,2108,2122,2126,2132,2138,2145,2152,2159,2173,2188,2203,2218,2233,2245,2249],{"__ignoreMap":783},[787,2060,2061,2063,2065,2067,2069,2071,2073,2075,2077],{"class":789,"line":790},[787,2062,794],{"class":793},[787,2064,798],{"class":797},[787,2066,802],{"class":801},[787,2068,805],{"class":797},[787,2070,808],{"class":793},[787,2072,811],{"class":797},[787,2074,815],{"class":814},[787,2076,818],{"class":797},[787,2078,821],{"class":797},[787,2080,2081,2083,2085,2087,2089,2092,2094,2096,2098,2100,2102],{"class":789,"line":824},[787,2082,794],{"class":793},[787,2084,798],{"class":797},[787,2086,831],{"class":801},[787,2088,934],{"class":797},[787,2090,2091],{"class":801}," durationValues",[787,2093,805],{"class":797},[787,2095,808],{"class":793},[787,2097,811],{"class":797},[787,2099,840],{"class":814},[787,2101,818],{"class":797},[787,2103,821],{"class":797},[787,2105,2106],{"class":789,"line":847},[787,2107,850],{"emptyLinePlaceholder":223},[787,2109,2110,2112,2114,2116,2118,2120],{"class":789,"line":853},[787,2111,857],{"class":856},[787,2113,860],{"class":801},[787,2115,863],{"class":797},[787,2117,802],{"class":866},[787,2119,869],{"class":801},[787,2121,821],{"class":797},[787,2123,2124],{"class":789,"line":874},[787,2125,850],{"emptyLinePlaceholder":223},[787,2127,2128,2130],{"class":789,"line":879},[787,2129,857],{"class":856},[787,2131,884],{"class":797},[787,2133,2134,2136],{"class":789,"line":887},[787,2135,890],{"class":801},[787,2137,893],{"class":797},[787,2139,2140,2143],{"class":789,"line":896},[787,2141,2142],{"class":801},"    durationMicro",[787,2144,893],{"class":797},[787,2146,2147,2150],{"class":789,"line":904},[787,2148,2149],{"class":801},"    durationUi",[787,2151,893],{"class":797},[787,2153,2154,2157],{"class":789,"line":912},[787,2155,2156],{"class":801},"    durationPage",[787,2158,893],{"class":797},[787,2160,2161,2163,2165,2167,2169,2171],{"class":789,"line":920},[787,2162,923],{"class":797},[787,2164,926],{"class":797},[787,2166,831],{"class":866},[787,2168,931],{"class":801},[787,2170,934],{"class":797},[787,2172,884],{"class":797},[787,2174,2175,2177,2179,2181,2184,2186],{"class":789,"line":939},[787,2176,943],{"class":942},[787,2178,946],{"class":797},[787,2180,811],{"class":797},[787,2182,2183],{"class":814},"@duration.ui",[787,2185,818],{"class":797},[787,2187,893],{"class":797},[787,2189,2190,2193,2195,2197,2199,2201],{"class":789,"line":958},[787,2191,2192],{"class":942},"    micro",[787,2194,946],{"class":797},[787,2196,2091],{"class":801},[787,2198,1937],{"class":797},[787,2200,1388],{"class":801},[787,2202,893],{"class":797},[787,2204,2205,2208,2210,2212,2214,2216],{"class":789,"line":975},[787,2206,2207],{"class":942},"    ui",[787,2209,946],{"class":797},[787,2211,2091],{"class":801},[787,2213,1937],{"class":797},[787,2215,1416],{"class":801},[787,2217,893],{"class":797},[787,2219,2220,2223,2225,2227,2229,2231],{"class":789,"line":992},[787,2221,2222],{"class":942},"    page",[787,2224,946],{"class":797},[787,2226,2091],{"class":801},[787,2228,1937],{"class":797},[787,2230,1430],{"class":801},[787,2232,893],{"class":797},[787,2234,2235,2237,2239,2241,2243],{"class":789,"line":1009},[787,2236,923],{"class":797},[787,2238,1014],{"class":793},[787,2240,1017],{"class":856},[787,2242,1020],{"class":801},[787,2244,821],{"class":797},[787,2246,2247],{"class":789,"line":1025},[787,2248,850],{"emptyLinePlaceholder":223},[787,2250,2251,2253,2255,2257],{"class":789,"line":1030},[787,2252,1033],{"class":793},[787,2254,1036],{"class":793},[787,2256,1039],{"class":801},[787,2258,821],{"class":797},[773,2260,2261],{"icon":154,"label":326},[777,2262,2264],{"className":1046,"code":2263,"filename":1048,"language":1049,"meta":783,"style":783},":root {\n    --duration--micro: 100ms;\n    --duration--ui: 250ms;\n    --duration--page: 300ms;\n    --duration: var(--duration--ui);\n}\n",[697,2265,2266,2274,2286,2297,2308,2323],{"__ignoreMap":783},[787,2267,2268,2270,2272],{"class":789,"line":790},[787,2269,946],{"class":797},[787,2271,1058],{"class":856},[787,2273,884],{"class":797},[787,2275,2276,2279,2281,2284],{"class":789,"line":824},[787,2277,2278],{"class":801},"    --duration--micro",[787,2280,946],{"class":797},[787,2282,2283],{"class":1070}," 100ms",[787,2285,821],{"class":797},[787,2287,2288,2291,2293,2295],{"class":789,"line":847},[787,2289,2290],{"class":801},"    --duration--ui",[787,2292,946],{"class":797},[787,2294,1083],{"class":1070},[787,2296,821],{"class":797},[787,2298,2299,2302,2304,2306],{"class":789,"line":853},[787,2300,2301],{"class":801},"    --duration--page",[787,2303,946],{"class":797},[787,2305,1095],{"class":1070},[787,2307,821],{"class":797},[787,2309,2310,2312,2314,2316,2318,2321],{"class":789,"line":874},[787,2311,1102],{"class":801},[787,2313,946],{"class":797},[787,2315,1107],{"class":866},[787,2317,1110],{"class":797},[787,2319,2320],{"class":801},"--duration--ui",[787,2322,1116],{"class":797},[787,2324,2325],{"class":789,"line":879},[787,2326,1121],{"class":797},[1325,2328,2330],{"id":2329},"combined-with-easing","Combined with Easing",[719,2332,2333],{},"Pair duration tokens with easing tokens for a complete motion system:",[770,2335,2336,2670],{},[773,2337,2338],{"icon":775,"label":290},[777,2339,2341],{"className":779,"code":2340,"filename":781,"language":782,"meta":783,"style":783},"import { styleframe } from 'styleframe';\nimport { useDurationDesignTokens, useEasingDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { selector, css } = s;\n\nconst { durationFast, durationNormal, durationSlower } = useDurationDesignTokens(s);\nconst { easingEaseOut, easingEaseInOut, easingSpring } = useEasingDesignTokens(s);\n\nselector('.tooltip', {\n    transition: css`opacity ${durationFast} ${easingEaseOut}`,\n});\n\nselector('.dropdown', {\n    transition: css`transform ${durationNormal} ${easingEaseInOut}`,\n});\n\nselector('.notification', {\n    transition: css`transform ${durationSlower} ${easingSpring}`,\n});\n\nexport default s;\n",[697,2342,2343,2363,2387,2391,2405,2425,2429,2457,2486,2490,2507,2534,2542,2546,2563,2591,2599,2603,2620,2648,2656,2660],{"__ignoreMap":783},[787,2344,2345,2347,2349,2351,2353,2355,2357,2359,2361],{"class":789,"line":790},[787,2346,794],{"class":793},[787,2348,798],{"class":797},[787,2350,802],{"class":801},[787,2352,805],{"class":797},[787,2354,808],{"class":793},[787,2356,811],{"class":797},[787,2358,815],{"class":814},[787,2360,818],{"class":797},[787,2362,821],{"class":797},[787,2364,2365,2367,2369,2371,2373,2375,2377,2379,2381,2383,2385],{"class":789,"line":824},[787,2366,794],{"class":793},[787,2368,798],{"class":797},[787,2370,831],{"class":801},[787,2372,934],{"class":797},[787,2374,1516],{"class":801},[787,2376,805],{"class":797},[787,2378,808],{"class":793},[787,2380,811],{"class":797},[787,2382,840],{"class":814},[787,2384,818],{"class":797},[787,2386,821],{"class":797},[787,2388,2389],{"class":789,"line":847},[787,2390,850],{"emptyLinePlaceholder":223},[787,2392,2393,2395,2397,2399,2401,2403],{"class":789,"line":853},[787,2394,857],{"class":856},[787,2396,860],{"class":801},[787,2398,863],{"class":797},[787,2400,802],{"class":866},[787,2402,869],{"class":801},[787,2404,821],{"class":797},[787,2406,2407,2409,2411,2413,2415,2417,2419,2421,2423],{"class":789,"line":874},[787,2408,857],{"class":856},[787,2410,798],{"class":797},[787,2412,1560],{"class":801},[787,2414,934],{"class":797},[787,2416,1565],{"class":801},[787,2418,923],{"class":797},[787,2420,926],{"class":797},[787,2422,1039],{"class":801},[787,2424,821],{"class":797},[787,2426,2427],{"class":789,"line":879},[787,2428,850],{"emptyLinePlaceholder":223},[787,2430,2431,2433,2435,2437,2439,2442,2444,2447,2449,2451,2453,2455],{"class":789,"line":887},[787,2432,857],{"class":856},[787,2434,798],{"class":797},[787,2436,1586],{"class":801},[787,2438,934],{"class":797},[787,2440,2441],{"class":801}," durationNormal",[787,2443,934],{"class":797},[787,2445,2446],{"class":801}," durationSlower ",[787,2448,923],{"class":797},[787,2450,926],{"class":797},[787,2452,831],{"class":866},[787,2454,1307],{"class":801},[787,2456,821],{"class":797},[787,2458,2459,2461,2463,2466,2468,2471,2473,2476,2478,2480,2482,2484],{"class":789,"line":896},[787,2460,857],{"class":856},[787,2462,798],{"class":797},[787,2464,2465],{"class":801}," easingEaseOut",[787,2467,934],{"class":797},[787,2469,2470],{"class":801}," easingEaseInOut",[787,2472,934],{"class":797},[787,2474,2475],{"class":801}," easingSpring ",[787,2477,923],{"class":797},[787,2479,926],{"class":797},[787,2481,1516],{"class":866},[787,2483,1307],{"class":801},[787,2485,821],{"class":797},[787,2487,2488],{"class":789,"line":904},[787,2489,850],{"emptyLinePlaceholder":223},[787,2491,2492,2494,2496,2498,2501,2503,2505],{"class":789,"line":912},[787,2493,1710],{"class":866},[787,2495,1110],{"class":801},[787,2497,818],{"class":797},[787,2499,2500],{"class":814},".tooltip",[787,2502,818],{"class":797},[787,2504,934],{"class":797},[787,2506,884],{"class":797},[787,2508,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2530,2532],{"class":789,"line":920},[787,2510,1728],{"class":942},[787,2512,946],{"class":797},[787,2514,1733],{"class":866},[787,2516,1736],{"class":797},[787,2518,1802],{"class":814},[787,2520,1742],{"class":797},[787,2522,1140],{"class":801},[787,2524,923],{"class":797},[787,2526,1749],{"class":797},[787,2528,2529],{"class":801},"easingEaseOut",[787,2531,1755],{"class":797},[787,2533,893],{"class":797},[787,2535,2536,2538,2540],{"class":789,"line":939},[787,2537,923],{"class":797},[787,2539,1020],{"class":801},[787,2541,821],{"class":797},[787,2543,2544],{"class":789,"line":958},[787,2545,850],{"emptyLinePlaceholder":223},[787,2547,2548,2550,2552,2554,2557,2559,2561],{"class":789,"line":975},[787,2549,1710],{"class":866},[787,2551,1110],{"class":801},[787,2553,818],{"class":797},[787,2555,2556],{"class":814},".dropdown",[787,2558,818],{"class":797},[787,2560,934],{"class":797},[787,2562,884],{"class":797},[787,2564,2565,2567,2569,2571,2573,2576,2578,2580,2582,2584,2587,2589],{"class":789,"line":992},[787,2566,1728],{"class":942},[787,2568,946],{"class":797},[787,2570,1733],{"class":866},[787,2572,1736],{"class":797},[787,2574,2575],{"class":814},"transform ",[787,2577,1742],{"class":797},[787,2579,1807],{"class":801},[787,2581,923],{"class":797},[787,2583,1749],{"class":797},[787,2585,2586],{"class":801},"easingEaseInOut",[787,2588,1755],{"class":797},[787,2590,893],{"class":797},[787,2592,2593,2595,2597],{"class":789,"line":1009},[787,2594,923],{"class":797},[787,2596,1020],{"class":801},[787,2598,821],{"class":797},[787,2600,2601],{"class":789,"line":1025},[787,2602,850],{"emptyLinePlaceholder":223},[787,2604,2605,2607,2609,2611,2614,2616,2618],{"class":789,"line":1030},[787,2606,1710],{"class":866},[787,2608,1110],{"class":801},[787,2610,818],{"class":797},[787,2612,2613],{"class":814},".notification",[787,2615,818],{"class":797},[787,2617,934],{"class":797},[787,2619,884],{"class":797},[787,2621,2622,2624,2626,2628,2630,2632,2634,2637,2639,2641,2644,2646],{"class":789,"line":1768},[787,2623,1728],{"class":942},[787,2625,946],{"class":797},[787,2627,1733],{"class":866},[787,2629,1736],{"class":797},[787,2631,2575],{"class":814},[787,2633,1742],{"class":797},[787,2635,2636],{"class":801},"durationSlower",[787,2638,923],{"class":797},[787,2640,1749],{"class":797},[787,2642,2643],{"class":801},"easingSpring",[787,2645,1755],{"class":797},[787,2647,893],{"class":797},[787,2649,2650,2652,2654],{"class":789,"line":1773},[787,2651,923],{"class":797},[787,2653,1020],{"class":801},[787,2655,821],{"class":797},[787,2657,2658],{"class":789,"line":1791},[787,2659,850],{"emptyLinePlaceholder":223},[787,2661,2662,2664,2666,2668],{"class":789,"line":1835},[787,2663,1033],{"class":793},[787,2665,1036],{"class":793},[787,2667,1039],{"class":801},[787,2669,821],{"class":797},[773,2671,2672],{"icon":154,"label":326},[777,2673,2675],{"className":1046,"code":2674,"filename":1048,"language":1049,"meta":783,"style":783},":root {\n    --duration--fast: 150ms;\n    --duration--normal: 250ms;\n    --duration--slower: 500ms;\n    --easing--ease-out: ease-out;\n    --easing--ease-in-out: ease-in-out;\n    --easing--spring: linear(0, 0.0018, ...);\n}\n\n.tooltip {\n    transition: opacity var(--duration--fast) var(--easing--ease-out);\n}\n\n.dropdown {\n    transition: transform var(--duration--normal) var(--easing--ease-in-out);\n}\n\n.notification {\n    transition: transform var(--duration--slower) var(--easing--spring);\n}\n",[697,2676,2677,2685,2695,2705,2717,2729,2741,2766,2770,2774,2783,2808,2812,2816,2825,2850,2854,2858,2867,2893],{"__ignoreMap":783},[787,2678,2679,2681,2683],{"class":789,"line":790},[787,2680,946],{"class":797},[787,2682,1058],{"class":856},[787,2684,884],{"class":797},[787,2686,2687,2689,2691,2693],{"class":789,"line":824},[787,2688,1065],{"class":801},[787,2690,946],{"class":797},[787,2692,1071],{"class":1070},[787,2694,821],{"class":797},[787,2696,2697,2699,2701,2703],{"class":789,"line":847},[787,2698,1078],{"class":801},[787,2700,946],{"class":797},[787,2702,1083],{"class":1070},[787,2704,821],{"class":797},[787,2706,2707,2710,2712,2715],{"class":789,"line":853},[787,2708,2709],{"class":801},"    --duration--slower",[787,2711,946],{"class":797},[787,2713,2714],{"class":1070}," 500ms",[787,2716,821],{"class":797},[787,2718,2719,2722,2724,2727],{"class":789,"line":874},[787,2720,2721],{"class":801},"    --easing--ease-out",[787,2723,946],{"class":797},[787,2725,2726],{"class":801}," ease-out",[787,2728,821],{"class":797},[787,2730,2731,2734,2736,2739],{"class":789,"line":879},[787,2732,2733],{"class":801},"    --easing--ease-in-out",[787,2735,946],{"class":797},[787,2737,2738],{"class":801}," ease-in-out",[787,2740,821],{"class":797},[787,2742,2743,2746,2748,2751,2754,2756,2759,2761,2764],{"class":789,"line":887},[787,2744,2745],{"class":801},"    --easing--spring",[787,2747,946],{"class":797},[787,2749,2750],{"class":801}," linear(",[787,2752,2753],{"class":1070},"0",[787,2755,934],{"class":797},[787,2757,2758],{"class":1070}," 0.0018",[787,2760,934],{"class":797},[787,2762,2763],{"class":801}," ...)",[787,2765,821],{"class":797},[787,2767,2768],{"class":789,"line":896},[787,2769,1121],{"class":797},[787,2771,2772],{"class":789,"line":904},[787,2773,850],{"emptyLinePlaceholder":223},[787,2775,2776,2778,2781],{"class":789,"line":912},[787,2777,1937],{"class":797},[787,2779,2780],{"class":1940},"tooltip",[787,2782,884],{"class":797},[787,2784,2785,2787,2789,2791,2793,2795,2797,2799,2801,2803,2806],{"class":789,"line":920},[787,2786,1728],{"class":1948},[787,2788,946],{"class":797},[787,2790,1998],{"class":801},[787,2792,1956],{"class":866},[787,2794,1110],{"class":797},[787,2796,1961],{"class":801},[787,2798,1020],{"class":797},[787,2800,1107],{"class":866},[787,2802,1110],{"class":797},[787,2804,2805],{"class":801},"--easing--ease-out",[787,2807,1116],{"class":797},[787,2809,2810],{"class":789,"line":939},[787,2811,1121],{"class":797},[787,2813,2814],{"class":789,"line":958},[787,2815,850],{"emptyLinePlaceholder":223},[787,2817,2818,2820,2823],{"class":789,"line":975},[787,2819,1937],{"class":797},[787,2821,2822],{"class":1940},"dropdown",[787,2824,884],{"class":797},[787,2826,2827,2829,2831,2833,2835,2837,2839,2841,2843,2845,2848],{"class":789,"line":992},[787,2828,1728],{"class":1948},[787,2830,946],{"class":797},[787,2832,2018],{"class":801},[787,2834,1956],{"class":866},[787,2836,1110],{"class":797},[787,2838,1113],{"class":801},[787,2840,1020],{"class":797},[787,2842,1107],{"class":866},[787,2844,1110],{"class":797},[787,2846,2847],{"class":801},"--easing--ease-in-out",[787,2849,1116],{"class":797},[787,2851,2852],{"class":789,"line":1009},[787,2853,1121],{"class":797},[787,2855,2856],{"class":789,"line":1025},[787,2857,850],{"emptyLinePlaceholder":223},[787,2859,2860,2862,2865],{"class":789,"line":1030},[787,2861,1937],{"class":797},[787,2863,2864],{"class":1940},"notification",[787,2866,884],{"class":797},[787,2868,2869,2871,2873,2875,2877,2879,2882,2884,2886,2888,2891],{"class":789,"line":1768},[787,2870,1728],{"class":1948},[787,2872,946],{"class":797},[787,2874,2018],{"class":801},[787,2876,1956],{"class":866},[787,2878,1110],{"class":797},[787,2880,2881],{"class":801},"--duration--slower",[787,2883,1020],{"class":797},[787,2885,1107],{"class":866},[787,2887,1110],{"class":797},[787,2889,2890],{"class":801},"--easing--spring",[787,2892,1116],{"class":797},[787,2894,2895],{"class":789,"line":1773},[787,2896,1121],{"class":797},[715,2898,2900],{"id":2899},"best-practices","Best Practices",[730,2902,2903,2915,2927,2937,2949],{},[733,2904,2905,2908,2909,2911,2912,2914],{},[692,2906,2907],{},"Keep micro-interactions fast",": Hover and focus effects should use ",[697,2910,1373],{}," (50ms) to ",[697,2913,1137],{}," (150ms) for responsive feedback.",[733,2916,2917,2923,2924,2926],{},[692,2918,2919,2920,2922],{},"Use the ",[697,2921,1130],{}," key",": This creates a clean ",[697,2925,1154],{}," variable that's perfect for general-purpose transitions.",[733,2928,2929,2932,2933,2936],{},[692,2930,2931],{},"Pair with easing tokens",": Duration alone doesn't make great animations — combine with ",[697,2934,2935],{},"useEasingDesignTokens"," for polished motion.",[733,2938,2939,2942,2943,2945,2946,1937],{},[692,2940,2941],{},"Respect reduced motion",": For users who prefer reduced motion, consider overriding durations to ",[697,2944,1363],{}," using ",[697,2947,2948],{},"prefers-reduced-motion",[733,2950,2951,2954],{},[692,2952,2953],{},"Match duration to distance",": Larger movements need longer durations. A tooltip fade needs less time than a full-page transition.",[689,2956,2957,2960,2961,2964],{},[692,2958,2959],{},"Good to know:"," We use ",[697,2962,2963],{},"as const"," to ensure the object is treated as a constant type. This helps TypeScript infer the return type of the composables and provides better type safety and autocomplete support.",[715,2966,2968],{"id":2967},"faq","FAQ",[2970,2971,2972,3012,3037,3060],"accordion",{},[2973,2974,2977,2980,3006],"accordion-item",{"icon":2975,"label":2976},"i-lucide-circle-help","How do I choose the right duration for my animation?",[719,2978,2979],{},"Follow these guidelines based on animation type:",[730,2981,2982,2988,2994,3000],{},[733,2983,2984,2987],{},[692,2985,2986],{},"Micro-interactions"," (hover, focus, ripples): 50-150ms",[733,2989,2990,2993],{},[692,2991,2992],{},"UI transitions"," (modals, dropdowns, tooltips): 200-300ms",[733,2995,2996,2999],{},[692,2997,2998],{},"Page transitions",": 300-500ms",[733,3001,3002,3005],{},[692,3003,3004],{},"Spring\u002Fbounce effects",": 400-600ms (they need time to settle)",[719,3007,3008,3009,3011],{},"When in doubt, start with ",[697,3010,1416],{}," (250ms) and adjust from there.",[2973,3013,3015,3017,3018,3021,3022,3025,3026,3029,3030,3033,3034,1141],{"icon":2975,"label":3014},"What's the difference between duration and delay?",[692,3016,200],{}," controls how long an animation takes to complete. ",[692,3019,3020],{},"Delay"," controls how long to wait before the animation starts. Both use the same time units (ms\u002Fs), and both ",[697,3023,3024],{},"transition-duration"," and ",[697,3027,3028],{},"transition-delay"," utilities can reference duration tokens using the ",[697,3031,3032],{},"@"," prefix (e.g., ",[697,3035,3036],{},"@fast",[2973,3038,3040,3043,3057],{"icon":2975,"label":3039},"When should I use longer durations?",[719,3041,3042],{},"Use longer durations (500ms+) when:",[730,3044,3045,3048,3051,3054],{},[733,3046,3047],{},"The animation covers a large distance on screen",[733,3049,3050],{},"You're using spring or bounce easing that needs time to settle",[733,3052,3053],{},"The animation is decorative and meant to be noticed (onboarding, celebrations)",[733,3055,3056],{},"Multiple elements are animating in sequence (staggered animations)",[719,3058,3059],{},"Avoid long durations for interactive feedback — users expect immediate response to their actions.",[2973,3061,3063,3072,3175],{"icon":2975,"label":3062},"How do I support users who prefer reduced motion?",[719,3064,3065,3066,3068,3069,3071],{},"Override duration tokens to ",[697,3067,1363],{}," using the ",[697,3070,2948],{}," media query:",[777,3073,3075],{"className":779,"code":3074,"language":782,"meta":783,"style":783},"selector('@media (prefers-reduced-motion: reduce)', {\n    '--duration': '0ms',\n    '--duration--fast': '0ms',\n    '--duration--normal': '0ms',\n    '--duration--slow': '0ms',\n});\n",[697,3076,3077,3094,3112,3130,3148,3167],{"__ignoreMap":783},[787,3078,3079,3081,3083,3085,3088,3090,3092],{"class":789,"line":790},[787,3080,1710],{"class":866},[787,3082,1110],{"class":801},[787,3084,818],{"class":797},[787,3086,3087],{"class":814},"@media (prefers-reduced-motion: reduce)",[787,3089,818],{"class":797},[787,3091,934],{"class":797},[787,3093,884],{"class":797},[787,3095,3096,3098,3100,3102,3104,3106,3108,3110],{"class":789,"line":824},[787,3097,1673],{"class":797},[787,3099,1154],{"class":942},[787,3101,818],{"class":797},[787,3103,946],{"class":797},[787,3105,811],{"class":797},[787,3107,1363],{"class":814},[787,3109,818],{"class":797},[787,3111,893],{"class":797},[787,3113,3114,3116,3118,3120,3122,3124,3126,3128],{"class":789,"line":847},[787,3115,1673],{"class":797},[787,3117,1961],{"class":942},[787,3119,818],{"class":797},[787,3121,946],{"class":797},[787,3123,811],{"class":797},[787,3125,1363],{"class":814},[787,3127,818],{"class":797},[787,3129,893],{"class":797},[787,3131,3132,3134,3136,3138,3140,3142,3144,3146],{"class":789,"line":853},[787,3133,1673],{"class":797},[787,3135,1113],{"class":942},[787,3137,818],{"class":797},[787,3139,946],{"class":797},[787,3141,811],{"class":797},[787,3143,1363],{"class":814},[787,3145,818],{"class":797},[787,3147,893],{"class":797},[787,3149,3150,3152,3155,3157,3159,3161,3163,3165],{"class":789,"line":874},[787,3151,1673],{"class":797},[787,3153,3154],{"class":942},"--duration--slow",[787,3156,818],{"class":797},[787,3158,946],{"class":797},[787,3160,811],{"class":797},[787,3162,1363],{"class":814},[787,3164,818],{"class":797},[787,3166,893],{"class":797},[787,3168,3169,3171,3173],{"class":789,"line":879},[787,3170,923],{"class":797},[787,3172,1020],{"class":801},[787,3174,821],{"class":797},[719,3176,3177],{},"This instantly disables all animations that reference duration tokens.",[3179,3180,3181],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":783,"searchDepth":824,"depth":824,"links":3183},[3184,3185,3186,3187,3190,3191,3195,3196],{"id":717,"depth":824,"text":78},{"id":724,"depth":824,"text":725},{"id":759,"depth":824,"text":699},{"id":1158,"depth":824,"text":1159,"children":3188},[3189],{"id":1327,"depth":847,"text":1328},{"id":1470,"depth":824,"text":1471},{"id":2041,"depth":824,"text":2042,"children":3192},[3193,3194],{"id":2045,"depth":847,"text":2046},{"id":2329,"depth":847,"text":2330},{"id":2899,"depth":824,"text":2900},{"id":2967,"depth":824,"text":2968},"Create and manage duration design tokens with CSS variables for consistent animation and transition timing across your application.","md",null,{},{"title":200,"icon":203},{"title":684,"description":3197},"cqdwPgbJq0A3nbwohyF47l2MPaOJWU0z6LAQqOeR5Vw",[3205,3207],{"title":195,"path":196,"stem":197,"description":3206,"icon":198,"children":-1},"Create and manage color design tokens with automatic, easily configurable variants, tints, and shades using the oklch color space.",{"title":205,"path":206,"stem":207,"description":3208,"icon":208,"children":-1},"Create and manage easing design tokens with CSS variables for consistent animation timing across your application.",1781596325224]