[{"data":1,"prerenderedAt":3524},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-transitions":682,"-docs-theme-utilities-transitions-surround":3519},{"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":3512,"extension":3513,"links":3514,"meta":3515,"navigation":3516,"path":629,"seo":3517,"stem":630,"__hash__":3518},"docs_theme\u002Fdocs\u002Ftheme\u002Futilities\u002F16.transitions.md","Transitions Utilities",{"type":686,"value":687,"toc":3497},"minimark",[688,706,710,714,718,721,749,755,762,1707,1713,1727,2036,2057,2063,2069,2455,2460,2516,2522,2532,2828,2832,2836,3396,3399,3436,3440,3472,3476,3493],[689,690,691,695,696,700,701,705],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Utilities Preset:"," The utilities on this page are registered by the ",[697,698,699],"a",{"href":565},"Utilities Preset"," (",[702,703,704],"code",{},"useUtilitiesPreset","). For most projects, applying them via the preset is the recommended approach.",[707,708,78],"h2",{"id":709},"overview",[711,712,713],"p",{},"Transition utilities help you create smooth visual state changes. These utilities control which properties animate, how long transitions take, what easing functions to use, and how long to delay before starting.",[707,715,717],{"id":716},"why-use-transition-utilities","Why Use Transition Utilities?",[711,719,720],{},"Transition utilities help you:",[722,723,724,731,737,743],"ul",{},[725,726,727,730],"li",{},[692,728,729],{},"Create smooth interactions",": Add polish with animated hover and focus states",[725,732,733,736],{},[692,734,735],{},"Control timing",": Define consistent transition durations across your application",[725,738,739,742],{},[692,740,741],{},"Apply easing functions",": Use predefined timing functions for natural motion",[725,744,745,748],{},[692,746,747],{},"Improve user experience",": Guide attention with purposeful state changes",[707,750,752],{"id":751},"usetransitionpropertyutility",[702,753,754],{},"useTransitionPropertyUtility",[711,756,757,758,761],{},"The ",[702,759,760],{},"useTransitionPropertyUtility()"," function creates utility classes for specifying which properties should animate.",[763,764,765,1038,1607],"tabs",{},[766,767,769],"tabs-item",{"icon":768,"label":290},"i-lucide-code",[770,771,777],"pre",{"className":772,"code":773,"filename":774,"language":775,"meta":776,"style":776},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useTransitionPropertyUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseTransitionPropertyUtility(s, {\n    none: 'none',\n    all: 'all',\n    default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n    colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',\n    opacity: 'opacity',\n    shadow: 'box-shadow',\n    transform: 'transform',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[702,778,779,815,838,844,865,870,884,906,923,940,957,974,991,1008,1019,1024],{"__ignoreMap":776},[780,781,784,788,792,796,799,802,805,809,812],"span",{"class":782,"line":783},"line",1,[780,785,787],{"class":786},"s7zQu","import",[780,789,791],{"class":790},"sMK4o"," {",[780,793,795],{"class":794},"sTEyZ"," styleframe",[780,797,798],{"class":790}," }",[780,800,801],{"class":786}," from",[780,803,804],{"class":790}," \"",[780,806,808],{"class":807},"sfazB","styleframe",[780,810,811],{"class":790},"\"",[780,813,814],{"class":790},";\n",[780,816,818,820,822,825,827,829,831,834,836],{"class":782,"line":817},2,[780,819,787],{"class":786},[780,821,791],{"class":790},[780,823,824],{"class":794}," useTransitionPropertyUtility",[780,826,798],{"class":790},[780,828,801],{"class":786},[780,830,804],{"class":790},[780,832,833],{"class":807},"@styleframe\u002Ftheme",[780,835,811],{"class":790},[780,837,814],{"class":790},[780,839,841],{"class":782,"line":840},3,[780,842,843],{"emptyLinePlaceholder":223},"\n",[780,845,847,851,854,857,860,863],{"class":782,"line":846},4,[780,848,850],{"class":849},"spNyl","const",[780,852,853],{"class":794}," s ",[780,855,856],{"class":790},"=",[780,858,795],{"class":859},"s2Zo4",[780,861,862],{"class":794},"()",[780,864,814],{"class":790},[780,866,868],{"class":782,"line":867},5,[780,869,843],{"emptyLinePlaceholder":223},[780,871,873,875,878,881],{"class":782,"line":872},6,[780,874,754],{"class":859},[780,876,877],{"class":794},"(s",[780,879,880],{"class":790},",",[780,882,883],{"class":790}," {\n",[780,885,887,891,894,897,900,903],{"class":782,"line":886},7,[780,888,890],{"class":889},"swJcz","    none",[780,892,893],{"class":790},":",[780,895,896],{"class":790}," '",[780,898,899],{"class":807},"none",[780,901,902],{"class":790},"'",[780,904,905],{"class":790},",\n",[780,907,909,912,914,916,919,921],{"class":782,"line":908},8,[780,910,911],{"class":889},"    all",[780,913,893],{"class":790},[780,915,896],{"class":790},[780,917,918],{"class":807},"all",[780,920,902],{"class":790},[780,922,905],{"class":790},[780,924,926,929,931,933,936,938],{"class":782,"line":925},9,[780,927,928],{"class":889},"    default",[780,930,893],{"class":790},[780,932,896],{"class":790},[780,934,935],{"class":807},"color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",[780,937,902],{"class":790},[780,939,905],{"class":790},[780,941,943,946,948,950,953,955],{"class":782,"line":942},10,[780,944,945],{"class":889},"    colors",[780,947,893],{"class":790},[780,949,896],{"class":790},[780,951,952],{"class":807},"color, background-color, border-color, text-decoration-color, fill, stroke",[780,954,902],{"class":790},[780,956,905],{"class":790},[780,958,960,963,965,967,970,972],{"class":782,"line":959},11,[780,961,962],{"class":889},"    opacity",[780,964,893],{"class":790},[780,966,896],{"class":790},[780,968,969],{"class":807},"opacity",[780,971,902],{"class":790},[780,973,905],{"class":790},[780,975,977,980,982,984,987,989],{"class":782,"line":976},12,[780,978,979],{"class":889},"    shadow",[780,981,893],{"class":790},[780,983,896],{"class":790},[780,985,986],{"class":807},"box-shadow",[780,988,902],{"class":790},[780,990,905],{"class":790},[780,992,994,997,999,1001,1004,1006],{"class":782,"line":993},13,[780,995,996],{"class":889},"    transform",[780,998,893],{"class":790},[780,1000,896],{"class":790},[780,1002,1003],{"class":807},"transform",[780,1005,902],{"class":790},[780,1007,905],{"class":790},[780,1009,1011,1014,1017],{"class":782,"line":1010},14,[780,1012,1013],{"class":790},"}",[780,1015,1016],{"class":794},")",[780,1018,814],{"class":790},[780,1020,1022],{"class":782,"line":1021},15,[780,1023,843],{"emptyLinePlaceholder":223},[780,1025,1027,1030,1033,1036],{"class":782,"line":1026},16,[780,1028,1029],{"class":786},"export",[780,1031,1032],{"class":786}," default",[780,1034,1035],{"class":794}," s",[780,1037,814],{"class":790},[766,1039,1040],{"icon":154,"label":326},[770,1041,1046],{"className":1042,"code":1043,"filename":1044,"language":1045,"meta":776,"style":776},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._transition\\:none {\n    transition-property: none;\n}\n\n._transition\\:all {\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:colors {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:opacity {\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:shadow {\n    transition-property: box-shadow;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:transform {\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n","styleframe\u002Findex.css","css",[702,1047,1048,1064,1077,1082,1086,1098,1109,1144,1161,1165,1169,1177,1238,1264,1278,1282,1286,1300,1331,1358,1373,1378,1383,1396,1407,1434,1449,1454,1459,1473,1484,1511,1526,1531,1536,1549,1560,1587,1602],{"__ignoreMap":776},[780,1049,1050,1053,1057,1060,1062],{"class":782,"line":783},[780,1051,1052],{"class":790},".",[780,1054,1056],{"class":1055},"sBMFI","_transition",[780,1058,1059],{"class":794},"\\:",[780,1061,899],{"class":1055},[780,1063,883],{"class":790},[780,1065,1066,1070,1072,1075],{"class":782,"line":817},[780,1067,1069],{"class":1068},"sqsOY","    transition-property",[780,1071,893],{"class":790},[780,1073,1074],{"class":794}," none",[780,1076,814],{"class":790},[780,1078,1079],{"class":782,"line":840},[780,1080,1081],{"class":790},"}\n",[780,1083,1084],{"class":782,"line":846},[780,1085,843],{"emptyLinePlaceholder":223},[780,1087,1088,1090,1092,1094,1096],{"class":782,"line":867},[780,1089,1052],{"class":790},[780,1091,1056],{"class":1055},[780,1093,1059],{"class":794},[780,1095,918],{"class":1055},[780,1097,883],{"class":790},[780,1099,1100,1102,1104,1107],{"class":782,"line":872},[780,1101,1069],{"class":1068},[780,1103,893],{"class":790},[780,1105,1106],{"class":794}," all",[780,1108,814],{"class":790},[780,1110,1111,1114,1116,1119,1122,1126,1128,1131,1133,1136,1138,1141],{"class":782,"line":886},[780,1112,1113],{"class":1068},"    transition-timing-function",[780,1115,893],{"class":790},[780,1117,1118],{"class":859}," cubic-bezier",[780,1120,1121],{"class":790},"(",[780,1123,1125],{"class":1124},"sbssI","0.4",[780,1127,880],{"class":790},[780,1129,1130],{"class":1124}," 0",[780,1132,880],{"class":790},[780,1134,1135],{"class":1124}," 0.2",[780,1137,880],{"class":790},[780,1139,1140],{"class":1124}," 1",[780,1142,1143],{"class":790},");\n",[780,1145,1146,1149,1151,1154,1156,1159],{"class":782,"line":908},[780,1147,1148],{"class":1068},"    transition-duration",[780,1150,893],{"class":790},[780,1152,1153],{"class":859}," var",[780,1155,1121],{"class":790},[780,1157,1158],{"class":794},"--duration--fast",[780,1160,1143],{"class":790},[780,1162,1163],{"class":782,"line":925},[780,1164,1081],{"class":790},[780,1166,1167],{"class":782,"line":942},[780,1168,843],{"emptyLinePlaceholder":223},[780,1170,1171,1173,1175],{"class":782,"line":959},[780,1172,1052],{"class":790},[780,1174,1056],{"class":1055},[780,1176,883],{"class":790},[780,1178,1179,1181,1183,1186,1188,1191,1193,1196,1198,1201,1203,1206,1208,1211,1213,1216,1218,1221,1223,1226,1228,1231,1233,1236],{"class":782,"line":976},[780,1180,1069],{"class":1068},[780,1182,893],{"class":790},[780,1184,1185],{"class":794}," color",[780,1187,880],{"class":790},[780,1189,1190],{"class":794}," background-color",[780,1192,880],{"class":790},[780,1194,1195],{"class":794}," border-color",[780,1197,880],{"class":790},[780,1199,1200],{"class":794}," text-decoration-color",[780,1202,880],{"class":790},[780,1204,1205],{"class":794}," fill",[780,1207,880],{"class":790},[780,1209,1210],{"class":794}," stroke",[780,1212,880],{"class":790},[780,1214,1215],{"class":794}," opacity",[780,1217,880],{"class":790},[780,1219,1220],{"class":794}," box-shadow",[780,1222,880],{"class":790},[780,1224,1225],{"class":794}," transform",[780,1227,880],{"class":790},[780,1229,1230],{"class":794}," filter",[780,1232,880],{"class":790},[780,1234,1235],{"class":794}," backdrop-filter",[780,1237,814],{"class":790},[780,1239,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262],{"class":782,"line":993},[780,1241,1113],{"class":1068},[780,1243,893],{"class":790},[780,1245,1118],{"class":859},[780,1247,1121],{"class":790},[780,1249,1125],{"class":1124},[780,1251,880],{"class":790},[780,1253,1130],{"class":1124},[780,1255,880],{"class":790},[780,1257,1135],{"class":1124},[780,1259,880],{"class":790},[780,1261,1140],{"class":1124},[780,1263,1143],{"class":790},[780,1265,1266,1268,1270,1272,1274,1276],{"class":782,"line":1010},[780,1267,1148],{"class":1068},[780,1269,893],{"class":790},[780,1271,1153],{"class":859},[780,1273,1121],{"class":790},[780,1275,1158],{"class":794},[780,1277,1143],{"class":790},[780,1279,1280],{"class":782,"line":1021},[780,1281,1081],{"class":790},[780,1283,1284],{"class":782,"line":1026},[780,1285,843],{"emptyLinePlaceholder":223},[780,1287,1289,1291,1293,1295,1298],{"class":782,"line":1288},17,[780,1290,1052],{"class":790},[780,1292,1056],{"class":1055},[780,1294,1059],{"class":794},[780,1296,1297],{"class":1055},"colors",[780,1299,883],{"class":790},[780,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329],{"class":782,"line":1302},18,[780,1304,1069],{"class":1068},[780,1306,893],{"class":790},[780,1308,1185],{"class":794},[780,1310,880],{"class":790},[780,1312,1190],{"class":794},[780,1314,880],{"class":790},[780,1316,1195],{"class":794},[780,1318,880],{"class":790},[780,1320,1200],{"class":794},[780,1322,880],{"class":790},[780,1324,1205],{"class":794},[780,1326,880],{"class":790},[780,1328,1210],{"class":794},[780,1330,814],{"class":790},[780,1332,1334,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356],{"class":782,"line":1333},19,[780,1335,1113],{"class":1068},[780,1337,893],{"class":790},[780,1339,1118],{"class":859},[780,1341,1121],{"class":790},[780,1343,1125],{"class":1124},[780,1345,880],{"class":790},[780,1347,1130],{"class":1124},[780,1349,880],{"class":790},[780,1351,1135],{"class":1124},[780,1353,880],{"class":790},[780,1355,1140],{"class":1124},[780,1357,1143],{"class":790},[780,1359,1361,1363,1365,1367,1369,1371],{"class":782,"line":1360},20,[780,1362,1148],{"class":1068},[780,1364,893],{"class":790},[780,1366,1153],{"class":859},[780,1368,1121],{"class":790},[780,1370,1158],{"class":794},[780,1372,1143],{"class":790},[780,1374,1376],{"class":782,"line":1375},21,[780,1377,1081],{"class":790},[780,1379,1381],{"class":782,"line":1380},22,[780,1382,843],{"emptyLinePlaceholder":223},[780,1384,1386,1388,1390,1392,1394],{"class":782,"line":1385},23,[780,1387,1052],{"class":790},[780,1389,1056],{"class":1055},[780,1391,1059],{"class":794},[780,1393,969],{"class":1055},[780,1395,883],{"class":790},[780,1397,1399,1401,1403,1405],{"class":782,"line":1398},24,[780,1400,1069],{"class":1068},[780,1402,893],{"class":790},[780,1404,1215],{"class":794},[780,1406,814],{"class":790},[780,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432],{"class":782,"line":1409},25,[780,1411,1113],{"class":1068},[780,1413,893],{"class":790},[780,1415,1118],{"class":859},[780,1417,1121],{"class":790},[780,1419,1125],{"class":1124},[780,1421,880],{"class":790},[780,1423,1130],{"class":1124},[780,1425,880],{"class":790},[780,1427,1135],{"class":1124},[780,1429,880],{"class":790},[780,1431,1140],{"class":1124},[780,1433,1143],{"class":790},[780,1435,1437,1439,1441,1443,1445,1447],{"class":782,"line":1436},26,[780,1438,1148],{"class":1068},[780,1440,893],{"class":790},[780,1442,1153],{"class":859},[780,1444,1121],{"class":790},[780,1446,1158],{"class":794},[780,1448,1143],{"class":790},[780,1450,1452],{"class":782,"line":1451},27,[780,1453,1081],{"class":790},[780,1455,1457],{"class":782,"line":1456},28,[780,1458,843],{"emptyLinePlaceholder":223},[780,1460,1462,1464,1466,1468,1471],{"class":782,"line":1461},29,[780,1463,1052],{"class":790},[780,1465,1056],{"class":1055},[780,1467,1059],{"class":794},[780,1469,1470],{"class":1055},"shadow",[780,1472,883],{"class":790},[780,1474,1476,1478,1480,1482],{"class":782,"line":1475},30,[780,1477,1069],{"class":1068},[780,1479,893],{"class":790},[780,1481,1220],{"class":794},[780,1483,814],{"class":790},[780,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509],{"class":782,"line":1486},31,[780,1488,1113],{"class":1068},[780,1490,893],{"class":790},[780,1492,1118],{"class":859},[780,1494,1121],{"class":790},[780,1496,1125],{"class":1124},[780,1498,880],{"class":790},[780,1500,1130],{"class":1124},[780,1502,880],{"class":790},[780,1504,1135],{"class":1124},[780,1506,880],{"class":790},[780,1508,1140],{"class":1124},[780,1510,1143],{"class":790},[780,1512,1514,1516,1518,1520,1522,1524],{"class":782,"line":1513},32,[780,1515,1148],{"class":1068},[780,1517,893],{"class":790},[780,1519,1153],{"class":859},[780,1521,1121],{"class":790},[780,1523,1158],{"class":794},[780,1525,1143],{"class":790},[780,1527,1529],{"class":782,"line":1528},33,[780,1530,1081],{"class":790},[780,1532,1534],{"class":782,"line":1533},34,[780,1535,843],{"emptyLinePlaceholder":223},[780,1537,1539,1541,1543,1545,1547],{"class":782,"line":1538},35,[780,1540,1052],{"class":790},[780,1542,1056],{"class":1055},[780,1544,1059],{"class":794},[780,1546,1003],{"class":1055},[780,1548,883],{"class":790},[780,1550,1552,1554,1556,1558],{"class":782,"line":1551},36,[780,1553,1069],{"class":1068},[780,1555,893],{"class":790},[780,1557,1225],{"class":794},[780,1559,814],{"class":790},[780,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583,1585],{"class":782,"line":1562},37,[780,1564,1113],{"class":1068},[780,1566,893],{"class":790},[780,1568,1118],{"class":859},[780,1570,1121],{"class":790},[780,1572,1125],{"class":1124},[780,1574,880],{"class":790},[780,1576,1130],{"class":1124},[780,1578,880],{"class":790},[780,1580,1135],{"class":1124},[780,1582,880],{"class":790},[780,1584,1140],{"class":1124},[780,1586,1143],{"class":790},[780,1588,1590,1592,1594,1596,1598,1600],{"class":782,"line":1589},38,[780,1591,1148],{"class":1068},[780,1593,893],{"class":790},[780,1595,1153],{"class":859},[780,1597,1121],{"class":790},[780,1599,1158],{"class":794},[780,1601,1143],{"class":790},[780,1603,1605],{"class":782,"line":1604},39,[780,1606,1081],{"class":790},[766,1608,1610],{"icon":520,"label":1609},"Usage",[770,1611,1615],{"className":1612,"code":1613,"language":1614,"meta":776,"style":776},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"_transition:colors\">Animated color changes\u003C\u002Fbutton>\n\u003Cdiv class=\"_transition:transform\">Animated transform\u003C\u002Fdiv>\n\u003Cdiv class=\"_transition\">All common properties animate\u003C\u002Fdiv>\n","html",[702,1616,1617,1651,1680],{"__ignoreMap":776},[780,1618,1619,1622,1625,1628,1630,1632,1635,1637,1640,1643,1646,1648],{"class":782,"line":783},[780,1620,1621],{"class":790},"\u003C",[780,1623,1624],{"class":889},"button",[780,1626,1627],{"class":849}," class",[780,1629,856],{"class":790},[780,1631,811],{"class":790},[780,1633,1634],{"class":807},"_transition:colors",[780,1636,811],{"class":790},[780,1638,1639],{"class":790},">",[780,1641,1642],{"class":794},"Animated color changes",[780,1644,1645],{"class":790},"\u003C\u002F",[780,1647,1624],{"class":889},[780,1649,1650],{"class":790},">\n",[780,1652,1653,1655,1658,1660,1662,1664,1667,1669,1671,1674,1676,1678],{"class":782,"line":817},[780,1654,1621],{"class":790},[780,1656,1657],{"class":889},"div",[780,1659,1627],{"class":849},[780,1661,856],{"class":790},[780,1663,811],{"class":790},[780,1665,1666],{"class":807},"_transition:transform",[780,1668,811],{"class":790},[780,1670,1639],{"class":790},[780,1672,1673],{"class":794},"Animated transform",[780,1675,1645],{"class":790},[780,1677,1657],{"class":889},[780,1679,1650],{"class":790},[780,1681,1682,1684,1686,1688,1690,1692,1694,1696,1698,1701,1703,1705],{"class":782,"line":840},[780,1683,1621],{"class":790},[780,1685,1657],{"class":889},[780,1687,1627],{"class":849},[780,1689,856],{"class":790},[780,1691,811],{"class":790},[780,1693,1056],{"class":807},[780,1695,811],{"class":790},[780,1697,1639],{"class":790},[780,1699,1700],{"class":794},"All common properties animate",[780,1702,1645],{"class":790},[780,1704,1657],{"class":889},[780,1706,1650],{"class":790},[707,1708,1710],{"id":1709},"usetransitiondurationutility",[702,1711,1712],{},"useTransitionDurationUtility",[711,1714,757,1715,1718,1719,1722,1723,1726],{},[702,1716,1717],{},"useTransitionDurationUtility()"," function creates utility classes for setting transition duration. It uses the ",[702,1720,1721],{},"duration"," namespace, so you can reference duration design tokens with the ",[702,1724,1725],{},"@"," prefix.",[763,1728,1729,1879,1973],{},[766,1730,1731],{"icon":768,"label":290},[770,1732,1734],{"className":772,"code":1733,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useTransitionDurationUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseTransitionDurationUtility(s, {\n    fast: '@fast',\n    normal: '@normal',\n    slow: '@slow',\n});\n\nexport default s;\n",[702,1735,1736,1756,1777,1781,1795,1799,1809,1825,1841,1857,1865,1869],{"__ignoreMap":776},[780,1737,1738,1740,1742,1744,1746,1748,1750,1752,1754],{"class":782,"line":783},[780,1739,787],{"class":786},[780,1741,791],{"class":790},[780,1743,795],{"class":794},[780,1745,798],{"class":790},[780,1747,801],{"class":786},[780,1749,804],{"class":790},[780,1751,808],{"class":807},[780,1753,811],{"class":790},[780,1755,814],{"class":790},[780,1757,1758,1760,1762,1765,1767,1769,1771,1773,1775],{"class":782,"line":817},[780,1759,787],{"class":786},[780,1761,791],{"class":790},[780,1763,1764],{"class":794}," useTransitionDurationUtility",[780,1766,798],{"class":790},[780,1768,801],{"class":786},[780,1770,804],{"class":790},[780,1772,833],{"class":807},[780,1774,811],{"class":790},[780,1776,814],{"class":790},[780,1778,1779],{"class":782,"line":840},[780,1780,843],{"emptyLinePlaceholder":223},[780,1782,1783,1785,1787,1789,1791,1793],{"class":782,"line":846},[780,1784,850],{"class":849},[780,1786,853],{"class":794},[780,1788,856],{"class":790},[780,1790,795],{"class":859},[780,1792,862],{"class":794},[780,1794,814],{"class":790},[780,1796,1797],{"class":782,"line":867},[780,1798,843],{"emptyLinePlaceholder":223},[780,1800,1801,1803,1805,1807],{"class":782,"line":872},[780,1802,1712],{"class":859},[780,1804,877],{"class":794},[780,1806,880],{"class":790},[780,1808,883],{"class":790},[780,1810,1811,1814,1816,1818,1821,1823],{"class":782,"line":886},[780,1812,1813],{"class":889},"    fast",[780,1815,893],{"class":790},[780,1817,896],{"class":790},[780,1819,1820],{"class":807},"@fast",[780,1822,902],{"class":790},[780,1824,905],{"class":790},[780,1826,1827,1830,1832,1834,1837,1839],{"class":782,"line":908},[780,1828,1829],{"class":889},"    normal",[780,1831,893],{"class":790},[780,1833,896],{"class":790},[780,1835,1836],{"class":807},"@normal",[780,1838,902],{"class":790},[780,1840,905],{"class":790},[780,1842,1843,1846,1848,1850,1853,1855],{"class":782,"line":925},[780,1844,1845],{"class":889},"    slow",[780,1847,893],{"class":790},[780,1849,896],{"class":790},[780,1851,1852],{"class":807},"@slow",[780,1854,902],{"class":790},[780,1856,905],{"class":790},[780,1858,1859,1861,1863],{"class":782,"line":942},[780,1860,1013],{"class":790},[780,1862,1016],{"class":794},[780,1864,814],{"class":790},[780,1866,1867],{"class":782,"line":959},[780,1868,843],{"emptyLinePlaceholder":223},[780,1870,1871,1873,1875,1877],{"class":782,"line":976},[780,1872,1029],{"class":786},[780,1874,1032],{"class":786},[780,1876,1035],{"class":794},[780,1878,814],{"class":790},[766,1880,1881],{"icon":154,"label":326},[770,1882,1884],{"className":1042,"code":1883,"filename":1044,"language":1045,"meta":776,"style":776},"._transition-duration\\:fast { transition-duration: var(--duration--fast); }\n._transition-duration\\:normal { transition-duration: var(--duration--normal); }\n._transition-duration\\:slow { transition-duration: var(--duration--slow); }\n",[702,1885,1886,1917,1945],{"__ignoreMap":776},[780,1887,1888,1890,1893,1895,1898,1900,1903,1905,1907,1909,1911,1914],{"class":782,"line":783},[780,1889,1052],{"class":790},[780,1891,1892],{"class":1055},"_transition-duration",[780,1894,1059],{"class":794},[780,1896,1897],{"class":1055},"fast",[780,1899,791],{"class":790},[780,1901,1902],{"class":1068}," transition-duration",[780,1904,893],{"class":790},[780,1906,1153],{"class":859},[780,1908,1121],{"class":790},[780,1910,1158],{"class":794},[780,1912,1913],{"class":790},");",[780,1915,1916],{"class":790}," }\n",[780,1918,1919,1921,1923,1925,1928,1930,1932,1934,1936,1938,1941,1943],{"class":782,"line":817},[780,1920,1052],{"class":790},[780,1922,1892],{"class":1055},[780,1924,1059],{"class":794},[780,1926,1927],{"class":1055},"normal",[780,1929,791],{"class":790},[780,1931,1902],{"class":1068},[780,1933,893],{"class":790},[780,1935,1153],{"class":859},[780,1937,1121],{"class":790},[780,1939,1940],{"class":794},"--duration--normal",[780,1942,1913],{"class":790},[780,1944,1916],{"class":790},[780,1946,1947,1949,1951,1953,1956,1958,1960,1962,1964,1966,1969,1971],{"class":782,"line":840},[780,1948,1052],{"class":790},[780,1950,1892],{"class":1055},[780,1952,1059],{"class":794},[780,1954,1955],{"class":1055},"slow",[780,1957,791],{"class":790},[780,1959,1902],{"class":1068},[780,1961,893],{"class":790},[780,1963,1153],{"class":859},[780,1965,1121],{"class":790},[780,1967,1968],{"class":794},"--duration--slow",[780,1970,1913],{"class":790},[780,1972,1916],{"class":790},[766,1974,1975],{"icon":520,"label":1609},[770,1976,1978],{"className":1612,"code":1977,"language":1614,"meta":776,"style":776},"\u003Cbutton class=\"_transition:colors _transition-duration:fast\">Fast transition\u003C\u002Fbutton>\n\u003Cdiv class=\"_transition:opacity _transition-duration:slow\">Slower fade\u003C\u002Fdiv>\n",[702,1979,1980,2008],{"__ignoreMap":776},[780,1981,1982,1984,1986,1988,1990,1992,1995,1997,1999,2002,2004,2006],{"class":782,"line":783},[780,1983,1621],{"class":790},[780,1985,1624],{"class":889},[780,1987,1627],{"class":849},[780,1989,856],{"class":790},[780,1991,811],{"class":790},[780,1993,1994],{"class":807},"_transition:colors _transition-duration:fast",[780,1996,811],{"class":790},[780,1998,1639],{"class":790},[780,2000,2001],{"class":794},"Fast transition",[780,2003,1645],{"class":790},[780,2005,1624],{"class":889},[780,2007,1650],{"class":790},[780,2009,2010,2012,2014,2016,2018,2020,2023,2025,2027,2030,2032,2034],{"class":782,"line":817},[780,2011,1621],{"class":790},[780,2013,1657],{"class":889},[780,2015,1627],{"class":849},[780,2017,856],{"class":790},[780,2019,811],{"class":790},[780,2021,2022],{"class":807},"_transition:opacity _transition-duration:slow",[780,2024,811],{"class":790},[780,2026,1639],{"class":790},[780,2028,2029],{"class":794},"Slower fade",[780,2031,1645],{"class":790},[780,2033,1657],{"class":889},[780,2035,1650],{"class":790},[2037,2038,2039,2042,2043,2045,2046,2048,2049,2052,2053,2056],"tip",{},[692,2040,2041],{},"Pro tip:"," The ",[702,2044,1721],{}," namespace means ",[702,2047,1820],{}," automatically resolves to ",[702,2050,2051],{},"var(--duration--fast)",". You can also pass explicit values like ",[702,2054,2055],{},"'200ms'"," for one-off durations.",[707,2058,2060],{"id":2059},"usetransitiontimingfunctionutility",[702,2061,2062],{},"useTransitionTimingFunctionUtility",[711,2064,757,2065,2068],{},[702,2066,2067],{},"useTransitionTimingFunctionUtility()"," function creates utility classes for setting easing functions.",[763,2070,2071,2242,2392],{},[766,2072,2073],{"icon":768,"label":290},[770,2074,2076],{"className":772,"code":2075,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useTransitionTimingFunctionUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseTransitionTimingFunctionUtility(s, {\n    linear: 'linear',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n});\n\nexport default s;\n",[702,2077,2078,2098,2119,2123,2137,2141,2151,2167,2183,2199,2220,2228,2232],{"__ignoreMap":776},[780,2079,2080,2082,2084,2086,2088,2090,2092,2094,2096],{"class":782,"line":783},[780,2081,787],{"class":786},[780,2083,791],{"class":790},[780,2085,795],{"class":794},[780,2087,798],{"class":790},[780,2089,801],{"class":786},[780,2091,804],{"class":790},[780,2093,808],{"class":807},[780,2095,811],{"class":790},[780,2097,814],{"class":790},[780,2099,2100,2102,2104,2107,2109,2111,2113,2115,2117],{"class":782,"line":817},[780,2101,787],{"class":786},[780,2103,791],{"class":790},[780,2105,2106],{"class":794}," useTransitionTimingFunctionUtility",[780,2108,798],{"class":790},[780,2110,801],{"class":786},[780,2112,804],{"class":790},[780,2114,833],{"class":807},[780,2116,811],{"class":790},[780,2118,814],{"class":790},[780,2120,2121],{"class":782,"line":840},[780,2122,843],{"emptyLinePlaceholder":223},[780,2124,2125,2127,2129,2131,2133,2135],{"class":782,"line":846},[780,2126,850],{"class":849},[780,2128,853],{"class":794},[780,2130,856],{"class":790},[780,2132,795],{"class":859},[780,2134,862],{"class":794},[780,2136,814],{"class":790},[780,2138,2139],{"class":782,"line":867},[780,2140,843],{"emptyLinePlaceholder":223},[780,2142,2143,2145,2147,2149],{"class":782,"line":872},[780,2144,2062],{"class":859},[780,2146,877],{"class":794},[780,2148,880],{"class":790},[780,2150,883],{"class":790},[780,2152,2153,2156,2158,2160,2163,2165],{"class":782,"line":886},[780,2154,2155],{"class":889},"    linear",[780,2157,893],{"class":790},[780,2159,896],{"class":790},[780,2161,2162],{"class":807},"linear",[780,2164,902],{"class":790},[780,2166,905],{"class":790},[780,2168,2169,2172,2174,2176,2179,2181],{"class":782,"line":908},[780,2170,2171],{"class":889},"    in",[780,2173,893],{"class":790},[780,2175,896],{"class":790},[780,2177,2178],{"class":807},"cubic-bezier(0.4, 0, 1, 1)",[780,2180,902],{"class":790},[780,2182,905],{"class":790},[780,2184,2185,2188,2190,2192,2195,2197],{"class":782,"line":925},[780,2186,2187],{"class":889},"    out",[780,2189,893],{"class":790},[780,2191,896],{"class":790},[780,2193,2194],{"class":807},"cubic-bezier(0, 0, 0.2, 1)",[780,2196,902],{"class":790},[780,2198,905],{"class":790},[780,2200,2201,2204,2207,2209,2211,2213,2216,2218],{"class":782,"line":942},[780,2202,2203],{"class":790},"    '",[780,2205,2206],{"class":889},"in-out",[780,2208,902],{"class":790},[780,2210,893],{"class":790},[780,2212,896],{"class":790},[780,2214,2215],{"class":807},"cubic-bezier(0.4, 0, 0.2, 1)",[780,2217,902],{"class":790},[780,2219,905],{"class":790},[780,2221,2222,2224,2226],{"class":782,"line":959},[780,2223,1013],{"class":790},[780,2225,1016],{"class":794},[780,2227,814],{"class":790},[780,2229,2230],{"class":782,"line":976},[780,2231,843],{"emptyLinePlaceholder":223},[780,2233,2234,2236,2238,2240],{"class":782,"line":993},[780,2235,1029],{"class":786},[780,2237,1032],{"class":786},[780,2239,1035],{"class":794},[780,2241,814],{"class":790},[766,2243,2244],{"icon":154,"label":326},[770,2245,2247],{"className":1042,"code":2246,"filename":1044,"language":1045,"meta":776,"style":776},"._transition-timing\\:linear { transition-timing-function: linear; }\n._transition-timing\\:in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }\n._transition-timing\\:out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }\n._transition-timing\\:in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }\n",[702,2248,2249,2275,2314,2354],{"__ignoreMap":776},[780,2250,2251,2253,2256,2258,2260,2262,2265,2267,2270,2273],{"class":782,"line":783},[780,2252,1052],{"class":790},[780,2254,2255],{"class":1055},"_transition-timing",[780,2257,1059],{"class":794},[780,2259,2162],{"class":1055},[780,2261,791],{"class":790},[780,2263,2264],{"class":1068}," transition-timing-function",[780,2266,893],{"class":790},[780,2268,2269],{"class":794}," linear",[780,2271,2272],{"class":790},";",[780,2274,1916],{"class":790},[780,2276,2277,2279,2281,2283,2286,2288,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310,2312],{"class":782,"line":817},[780,2278,1052],{"class":790},[780,2280,2255],{"class":1055},[780,2282,1059],{"class":794},[780,2284,2285],{"class":1055},"in",[780,2287,791],{"class":790},[780,2289,2264],{"class":1068},[780,2291,893],{"class":790},[780,2293,1118],{"class":859},[780,2295,1121],{"class":790},[780,2297,1125],{"class":1124},[780,2299,880],{"class":790},[780,2301,1130],{"class":1124},[780,2303,880],{"class":790},[780,2305,1140],{"class":1124},[780,2307,880],{"class":790},[780,2309,1140],{"class":1124},[780,2311,1913],{"class":790},[780,2313,1916],{"class":790},[780,2315,2316,2318,2320,2322,2325,2327,2329,2331,2333,2335,2338,2340,2342,2344,2346,2348,2350,2352],{"class":782,"line":840},[780,2317,1052],{"class":790},[780,2319,2255],{"class":1055},[780,2321,1059],{"class":794},[780,2323,2324],{"class":1055},"out",[780,2326,791],{"class":790},[780,2328,2264],{"class":1068},[780,2330,893],{"class":790},[780,2332,1118],{"class":859},[780,2334,1121],{"class":790},[780,2336,2337],{"class":1124},"0",[780,2339,880],{"class":790},[780,2341,1130],{"class":1124},[780,2343,880],{"class":790},[780,2345,1135],{"class":1124},[780,2347,880],{"class":790},[780,2349,1140],{"class":1124},[780,2351,1913],{"class":790},[780,2353,1916],{"class":790},[780,2355,2356,2358,2360,2362,2364,2366,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390],{"class":782,"line":846},[780,2357,1052],{"class":790},[780,2359,2255],{"class":1055},[780,2361,1059],{"class":794},[780,2363,2206],{"class":1055},[780,2365,791],{"class":790},[780,2367,2264],{"class":1068},[780,2369,893],{"class":790},[780,2371,1118],{"class":859},[780,2373,1121],{"class":790},[780,2375,1125],{"class":1124},[780,2377,880],{"class":790},[780,2379,1130],{"class":1124},[780,2381,880],{"class":790},[780,2383,1135],{"class":1124},[780,2385,880],{"class":790},[780,2387,1140],{"class":1124},[780,2389,1913],{"class":790},[780,2391,1916],{"class":790},[766,2393,2394],{"icon":520,"label":1609},[770,2395,2397],{"className":1612,"code":2396,"language":1614,"meta":776,"style":776},"\u003Cdiv class=\"_transition:transform _transition-timing:out\">Ease out\u003C\u002Fdiv>\n\u003Cdiv class=\"_transition:opacity _transition-timing:in-out\">Smooth in and out\u003C\u002Fdiv>\n",[702,2398,2399,2427],{"__ignoreMap":776},[780,2400,2401,2403,2405,2407,2409,2411,2414,2416,2418,2421,2423,2425],{"class":782,"line":783},[780,2402,1621],{"class":790},[780,2404,1657],{"class":889},[780,2406,1627],{"class":849},[780,2408,856],{"class":790},[780,2410,811],{"class":790},[780,2412,2413],{"class":807},"_transition:transform _transition-timing:out",[780,2415,811],{"class":790},[780,2417,1639],{"class":790},[780,2419,2420],{"class":794},"Ease out",[780,2422,1645],{"class":790},[780,2424,1657],{"class":889},[780,2426,1650],{"class":790},[780,2428,2429,2431,2433,2435,2437,2439,2442,2444,2446,2449,2451,2453],{"class":782,"line":817},[780,2430,1621],{"class":790},[780,2432,1657],{"class":889},[780,2434,1627],{"class":849},[780,2436,856],{"class":790},[780,2438,811],{"class":790},[780,2440,2441],{"class":807},"_transition:opacity _transition-timing:in-out",[780,2443,811],{"class":790},[780,2445,1639],{"class":790},[780,2447,2448],{"class":794},"Smooth in and out",[780,2450,1645],{"class":790},[780,2452,1657],{"class":889},[780,2454,1650],{"class":790},[2456,2457,2459],"h3",{"id":2458},"easing-functions","Easing Functions",[2461,2462,2463,2476],"table",{},[2464,2465,2466],"thead",{},[2467,2468,2469,2473],"tr",{},[2470,2471,2472],"th",{},"Value",[2470,2474,2475],{},"Description",[2477,2478,2479,2489,2498,2507],"tbody",{},[2467,2480,2481,2486],{},[2482,2483,2484],"td",{},[702,2485,2162],{},[2482,2487,2488],{},"Constant speed throughout",[2467,2490,2491,2495],{},[2482,2492,2493],{},[702,2494,2285],{},[2482,2496,2497],{},"Starts slow, accelerates (ease-in)",[2467,2499,2500,2504],{},[2482,2501,2502],{},[702,2503,2324],{},[2482,2505,2506],{},"Starts fast, decelerates (ease-out)",[2467,2508,2509,2513],{},[2482,2510,2511],{},[702,2512,2206],{},[2482,2514,2515],{},"Slow start and end (ease-in-out)",[707,2517,2519],{"id":2518},"usetransitiondelayutility",[702,2520,2521],{},"useTransitionDelayUtility",[711,2523,757,2524,2527,2528,1722,2530,1726],{},[702,2525,2526],{},"useTransitionDelayUtility()"," function creates utility classes for delaying transitions. It uses the ",[702,2529,1721],{},[702,2531,1725],{},[763,2533,2534,2678,2765],{},[766,2535,2536],{"icon":768,"label":290},[770,2537,2539],{"className":772,"code":2538,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useTransitionDelayUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseTransitionDelayUtility(s, {\n    fast: '@fast',\n    normal: '@normal',\n    slow: '@slow',\n});\n\nexport default s;\n",[702,2540,2541,2561,2582,2586,2600,2604,2614,2628,2642,2656,2664,2668],{"__ignoreMap":776},[780,2542,2543,2545,2547,2549,2551,2553,2555,2557,2559],{"class":782,"line":783},[780,2544,787],{"class":786},[780,2546,791],{"class":790},[780,2548,795],{"class":794},[780,2550,798],{"class":790},[780,2552,801],{"class":786},[780,2554,804],{"class":790},[780,2556,808],{"class":807},[780,2558,811],{"class":790},[780,2560,814],{"class":790},[780,2562,2563,2565,2567,2570,2572,2574,2576,2578,2580],{"class":782,"line":817},[780,2564,787],{"class":786},[780,2566,791],{"class":790},[780,2568,2569],{"class":794}," useTransitionDelayUtility",[780,2571,798],{"class":790},[780,2573,801],{"class":786},[780,2575,804],{"class":790},[780,2577,833],{"class":807},[780,2579,811],{"class":790},[780,2581,814],{"class":790},[780,2583,2584],{"class":782,"line":840},[780,2585,843],{"emptyLinePlaceholder":223},[780,2587,2588,2590,2592,2594,2596,2598],{"class":782,"line":846},[780,2589,850],{"class":849},[780,2591,853],{"class":794},[780,2593,856],{"class":790},[780,2595,795],{"class":859},[780,2597,862],{"class":794},[780,2599,814],{"class":790},[780,2601,2602],{"class":782,"line":867},[780,2603,843],{"emptyLinePlaceholder":223},[780,2605,2606,2608,2610,2612],{"class":782,"line":872},[780,2607,2521],{"class":859},[780,2609,877],{"class":794},[780,2611,880],{"class":790},[780,2613,883],{"class":790},[780,2615,2616,2618,2620,2622,2624,2626],{"class":782,"line":886},[780,2617,1813],{"class":889},[780,2619,893],{"class":790},[780,2621,896],{"class":790},[780,2623,1820],{"class":807},[780,2625,902],{"class":790},[780,2627,905],{"class":790},[780,2629,2630,2632,2634,2636,2638,2640],{"class":782,"line":908},[780,2631,1829],{"class":889},[780,2633,893],{"class":790},[780,2635,896],{"class":790},[780,2637,1836],{"class":807},[780,2639,902],{"class":790},[780,2641,905],{"class":790},[780,2643,2644,2646,2648,2650,2652,2654],{"class":782,"line":925},[780,2645,1845],{"class":889},[780,2647,893],{"class":790},[780,2649,896],{"class":790},[780,2651,1852],{"class":807},[780,2653,902],{"class":790},[780,2655,905],{"class":790},[780,2657,2658,2660,2662],{"class":782,"line":942},[780,2659,1013],{"class":790},[780,2661,1016],{"class":794},[780,2663,814],{"class":790},[780,2665,2666],{"class":782,"line":959},[780,2667,843],{"emptyLinePlaceholder":223},[780,2669,2670,2672,2674,2676],{"class":782,"line":976},[780,2671,1029],{"class":786},[780,2673,1032],{"class":786},[780,2675,1035],{"class":794},[780,2677,814],{"class":790},[766,2679,2680],{"icon":154,"label":326},[770,2681,2683],{"className":1042,"code":2682,"filename":1044,"language":1045,"meta":776,"style":776},"._transition-delay\\:fast { transition-delay: var(--duration--fast); }\n._transition-delay\\:normal { transition-delay: var(--duration--normal); }\n._transition-delay\\:slow { transition-delay: var(--duration--slow); }\n",[702,2684,2685,2713,2739],{"__ignoreMap":776},[780,2686,2687,2689,2692,2694,2696,2698,2701,2703,2705,2707,2709,2711],{"class":782,"line":783},[780,2688,1052],{"class":790},[780,2690,2691],{"class":1055},"_transition-delay",[780,2693,1059],{"class":794},[780,2695,1897],{"class":1055},[780,2697,791],{"class":790},[780,2699,2700],{"class":1068}," transition-delay",[780,2702,893],{"class":790},[780,2704,1153],{"class":859},[780,2706,1121],{"class":790},[780,2708,1158],{"class":794},[780,2710,1913],{"class":790},[780,2712,1916],{"class":790},[780,2714,2715,2717,2719,2721,2723,2725,2727,2729,2731,2733,2735,2737],{"class":782,"line":817},[780,2716,1052],{"class":790},[780,2718,2691],{"class":1055},[780,2720,1059],{"class":794},[780,2722,1927],{"class":1055},[780,2724,791],{"class":790},[780,2726,2700],{"class":1068},[780,2728,893],{"class":790},[780,2730,1153],{"class":859},[780,2732,1121],{"class":790},[780,2734,1940],{"class":794},[780,2736,1913],{"class":790},[780,2738,1916],{"class":790},[780,2740,2741,2743,2745,2747,2749,2751,2753,2755,2757,2759,2761,2763],{"class":782,"line":840},[780,2742,1052],{"class":790},[780,2744,2691],{"class":1055},[780,2746,1059],{"class":794},[780,2748,1955],{"class":1055},[780,2750,791],{"class":790},[780,2752,2700],{"class":1068},[780,2754,893],{"class":790},[780,2756,1153],{"class":859},[780,2758,1121],{"class":790},[780,2760,1968],{"class":794},[780,2762,1913],{"class":790},[780,2764,1916],{"class":790},[766,2766,2767],{"icon":520,"label":1609},[770,2768,2770],{"className":1612,"code":2769,"language":1614,"meta":776,"style":776},"\u003Cdiv class=\"_transition:colors _transition-delay:fast\">Delayed color transition\u003C\u002Fdiv>\n\u003Cdiv class=\"_transition:transform _transition-delay:slow\">Delayed transform\u003C\u002Fdiv>\n",[702,2771,2772,2800],{"__ignoreMap":776},[780,2773,2774,2776,2778,2780,2782,2784,2787,2789,2791,2794,2796,2798],{"class":782,"line":783},[780,2775,1621],{"class":790},[780,2777,1657],{"class":889},[780,2779,1627],{"class":849},[780,2781,856],{"class":790},[780,2783,811],{"class":790},[780,2785,2786],{"class":807},"_transition:colors _transition-delay:fast",[780,2788,811],{"class":790},[780,2790,1639],{"class":790},[780,2792,2793],{"class":794},"Delayed color transition",[780,2795,1645],{"class":790},[780,2797,1657],{"class":889},[780,2799,1650],{"class":790},[780,2801,2802,2804,2806,2808,2810,2812,2815,2817,2819,2822,2824,2826],{"class":782,"line":817},[780,2803,1621],{"class":790},[780,2805,1657],{"class":889},[780,2807,1627],{"class":849},[780,2809,856],{"class":790},[780,2811,811],{"class":790},[780,2813,2814],{"class":807},"_transition:transform _transition-delay:slow",[780,2816,811],{"class":790},[780,2818,1639],{"class":790},[780,2820,2821],{"class":794},"Delayed transform",[780,2823,1645],{"class":790},[780,2825,1657],{"class":889},[780,2827,1650],{"class":790},[707,2829,2831],{"id":2830},"examples","Examples",[2456,2833,2835],{"id":2834},"hover-transition","Hover Transition",[763,2837,2838,3196],{},[766,2839,2840],{"icon":768,"label":290},[770,2841,2843],{"className":772,"code":2842,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useTransitionPropertyUtility, useTransitionDurationUtility } from \"@styleframe\u002Ftheme\";\nimport { useBackgroundColorUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { modifier } = s;\n\nconst hover = modifier('hover', ({ declarations }) => ({\n    '&:hover': declarations,\n}));\n\nuseTransitionPropertyUtility(s, {\n    colors: 'color, background-color, border-color',\n});\n\nuseTransitionDurationUtility(s, {\n    '200': '200ms',\n});\n\nuseBackgroundColorUtility(s, {\n    gray: '#f3f4f6',\n    primary: '#006cff',\n});\n\nuseBackgroundColorUtility(s, { primary: '#006cff' }, [hover]);\n\nexport default s;\n",[702,2844,2845,2865,2889,2910,2914,2928,2946,2950,2991,3006,3015,3019,3029,3044,3052,3056,3066,3086,3094,3098,3109,3125,3141,3149,3153,3182,3186],{"__ignoreMap":776},[780,2846,2847,2849,2851,2853,2855,2857,2859,2861,2863],{"class":782,"line":783},[780,2848,787],{"class":786},[780,2850,791],{"class":790},[780,2852,795],{"class":794},[780,2854,798],{"class":790},[780,2856,801],{"class":786},[780,2858,804],{"class":790},[780,2860,808],{"class":807},[780,2862,811],{"class":790},[780,2864,814],{"class":790},[780,2866,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887],{"class":782,"line":817},[780,2868,787],{"class":786},[780,2870,791],{"class":790},[780,2872,824],{"class":794},[780,2874,880],{"class":790},[780,2876,1764],{"class":794},[780,2878,798],{"class":790},[780,2880,801],{"class":786},[780,2882,804],{"class":790},[780,2884,833],{"class":807},[780,2886,811],{"class":790},[780,2888,814],{"class":790},[780,2890,2891,2893,2895,2898,2900,2902,2904,2906,2908],{"class":782,"line":840},[780,2892,787],{"class":786},[780,2894,791],{"class":790},[780,2896,2897],{"class":794}," useBackgroundColorUtility",[780,2899,798],{"class":790},[780,2901,801],{"class":786},[780,2903,804],{"class":790},[780,2905,833],{"class":807},[780,2907,811],{"class":790},[780,2909,814],{"class":790},[780,2911,2912],{"class":782,"line":846},[780,2913,843],{"emptyLinePlaceholder":223},[780,2915,2916,2918,2920,2922,2924,2926],{"class":782,"line":867},[780,2917,850],{"class":849},[780,2919,853],{"class":794},[780,2921,856],{"class":790},[780,2923,795],{"class":859},[780,2925,862],{"class":794},[780,2927,814],{"class":790},[780,2929,2930,2932,2934,2937,2939,2942,2944],{"class":782,"line":872},[780,2931,850],{"class":849},[780,2933,791],{"class":790},[780,2935,2936],{"class":794}," modifier ",[780,2938,1013],{"class":790},[780,2940,2941],{"class":790}," =",[780,2943,1035],{"class":794},[780,2945,814],{"class":790},[780,2947,2948],{"class":782,"line":886},[780,2949,843],{"emptyLinePlaceholder":223},[780,2951,2952,2954,2957,2959,2962,2964,2966,2969,2971,2973,2976,2980,2983,2986,2988],{"class":782,"line":908},[780,2953,850],{"class":849},[780,2955,2956],{"class":794}," hover ",[780,2958,856],{"class":790},[780,2960,2961],{"class":859}," modifier",[780,2963,1121],{"class":794},[780,2965,902],{"class":790},[780,2967,2968],{"class":807},"hover",[780,2970,902],{"class":790},[780,2972,880],{"class":790},[780,2974,2975],{"class":790}," ({",[780,2977,2979],{"class":2978},"sHdIc"," declarations",[780,2981,2982],{"class":790}," })",[780,2984,2985],{"class":849}," =>",[780,2987,700],{"class":794},[780,2989,2990],{"class":790},"{\n",[780,2992,2993,2995,2998,3000,3002,3004],{"class":782,"line":925},[780,2994,2203],{"class":790},[780,2996,2997],{"class":889},"&:hover",[780,2999,902],{"class":790},[780,3001,893],{"class":790},[780,3003,2979],{"class":794},[780,3005,905],{"class":790},[780,3007,3008,3010,3013],{"class":782,"line":942},[780,3009,1013],{"class":790},[780,3011,3012],{"class":794},"))",[780,3014,814],{"class":790},[780,3016,3017],{"class":782,"line":959},[780,3018,843],{"emptyLinePlaceholder":223},[780,3020,3021,3023,3025,3027],{"class":782,"line":976},[780,3022,754],{"class":859},[780,3024,877],{"class":794},[780,3026,880],{"class":790},[780,3028,883],{"class":790},[780,3030,3031,3033,3035,3037,3040,3042],{"class":782,"line":993},[780,3032,945],{"class":889},[780,3034,893],{"class":790},[780,3036,896],{"class":790},[780,3038,3039],{"class":807},"color, background-color, border-color",[780,3041,902],{"class":790},[780,3043,905],{"class":790},[780,3045,3046,3048,3050],{"class":782,"line":1010},[780,3047,1013],{"class":790},[780,3049,1016],{"class":794},[780,3051,814],{"class":790},[780,3053,3054],{"class":782,"line":1021},[780,3055,843],{"emptyLinePlaceholder":223},[780,3057,3058,3060,3062,3064],{"class":782,"line":1026},[780,3059,1712],{"class":859},[780,3061,877],{"class":794},[780,3063,880],{"class":790},[780,3065,883],{"class":790},[780,3067,3068,3070,3073,3075,3077,3079,3082,3084],{"class":782,"line":1288},[780,3069,2203],{"class":790},[780,3071,3072],{"class":889},"200",[780,3074,902],{"class":790},[780,3076,893],{"class":790},[780,3078,896],{"class":790},[780,3080,3081],{"class":807},"200ms",[780,3083,902],{"class":790},[780,3085,905],{"class":790},[780,3087,3088,3090,3092],{"class":782,"line":1302},[780,3089,1013],{"class":790},[780,3091,1016],{"class":794},[780,3093,814],{"class":790},[780,3095,3096],{"class":782,"line":1333},[780,3097,843],{"emptyLinePlaceholder":223},[780,3099,3100,3103,3105,3107],{"class":782,"line":1360},[780,3101,3102],{"class":859},"useBackgroundColorUtility",[780,3104,877],{"class":794},[780,3106,880],{"class":790},[780,3108,883],{"class":790},[780,3110,3111,3114,3116,3118,3121,3123],{"class":782,"line":1375},[780,3112,3113],{"class":889},"    gray",[780,3115,893],{"class":790},[780,3117,896],{"class":790},[780,3119,3120],{"class":807},"#f3f4f6",[780,3122,902],{"class":790},[780,3124,905],{"class":790},[780,3126,3127,3130,3132,3134,3137,3139],{"class":782,"line":1380},[780,3128,3129],{"class":889},"    primary",[780,3131,893],{"class":790},[780,3133,896],{"class":790},[780,3135,3136],{"class":807},"#006cff",[780,3138,902],{"class":790},[780,3140,905],{"class":790},[780,3142,3143,3145,3147],{"class":782,"line":1385},[780,3144,1013],{"class":790},[780,3146,1016],{"class":794},[780,3148,814],{"class":790},[780,3150,3151],{"class":782,"line":1398},[780,3152,843],{"emptyLinePlaceholder":223},[780,3154,3155,3157,3159,3161,3163,3166,3168,3170,3172,3174,3177,3180],{"class":782,"line":1409},[780,3156,3102],{"class":859},[780,3158,877],{"class":794},[780,3160,880],{"class":790},[780,3162,791],{"class":790},[780,3164,3165],{"class":889}," primary",[780,3167,893],{"class":790},[780,3169,896],{"class":790},[780,3171,3136],{"class":807},[780,3173,902],{"class":790},[780,3175,3176],{"class":790}," },",[780,3178,3179],{"class":794}," [hover])",[780,3181,814],{"class":790},[780,3183,3184],{"class":782,"line":1436},[780,3185,843],{"emptyLinePlaceholder":223},[780,3187,3188,3190,3192,3194],{"class":782,"line":1451},[780,3189,1029],{"class":786},[780,3191,1032],{"class":786},[780,3193,1035],{"class":794},[780,3195,814],{"class":790},[766,3197,3198],{"icon":154,"label":326},[770,3199,3201],{"className":1042,"code":3200,"filename":1044,"language":1045,"meta":776,"style":776},"._transition\\:colors {\n    transition-property: color, background-color, border-color;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition-duration\\:200 { transition-duration: 200ms; }\n\n._bg\\:gray { background-color: #f3f4f6; }\n._bg\\:primary { background-color: #006cff; }\n._hover\\:bg\\:primary:hover { background-color: #006cff; }\n",[702,3202,3203,3215,3233,3259,3273,3277,3281,3304,3308,3336,3362],{"__ignoreMap":776},[780,3204,3205,3207,3209,3211,3213],{"class":782,"line":783},[780,3206,1052],{"class":790},[780,3208,1056],{"class":1055},[780,3210,1059],{"class":794},[780,3212,1297],{"class":1055},[780,3214,883],{"class":790},[780,3216,3217,3219,3221,3223,3225,3227,3229,3231],{"class":782,"line":817},[780,3218,1069],{"class":1068},[780,3220,893],{"class":790},[780,3222,1185],{"class":794},[780,3224,880],{"class":790},[780,3226,1190],{"class":794},[780,3228,880],{"class":790},[780,3230,1195],{"class":794},[780,3232,814],{"class":790},[780,3234,3235,3237,3239,3241,3243,3245,3247,3249,3251,3253,3255,3257],{"class":782,"line":840},[780,3236,1113],{"class":1068},[780,3238,893],{"class":790},[780,3240,1118],{"class":859},[780,3242,1121],{"class":790},[780,3244,1125],{"class":1124},[780,3246,880],{"class":790},[780,3248,1130],{"class":1124},[780,3250,880],{"class":790},[780,3252,1135],{"class":1124},[780,3254,880],{"class":790},[780,3256,1140],{"class":1124},[780,3258,1143],{"class":790},[780,3260,3261,3263,3265,3267,3269,3271],{"class":782,"line":846},[780,3262,1148],{"class":1068},[780,3264,893],{"class":790},[780,3266,1153],{"class":859},[780,3268,1121],{"class":790},[780,3270,1158],{"class":794},[780,3272,1143],{"class":790},[780,3274,3275],{"class":782,"line":867},[780,3276,1081],{"class":790},[780,3278,3279],{"class":782,"line":872},[780,3280,843],{"emptyLinePlaceholder":223},[780,3282,3283,3285,3287,3289,3291,3293,3295,3297,3300,3302],{"class":782,"line":886},[780,3284,1052],{"class":790},[780,3286,1892],{"class":1055},[780,3288,1059],{"class":794},[780,3290,3072],{"class":1055},[780,3292,791],{"class":790},[780,3294,1902],{"class":1068},[780,3296,893],{"class":790},[780,3298,3299],{"class":1124}," 200ms",[780,3301,2272],{"class":790},[780,3303,1916],{"class":790},[780,3305,3306],{"class":782,"line":908},[780,3307,843],{"emptyLinePlaceholder":223},[780,3309,3310,3312,3315,3317,3320,3322,3324,3326,3329,3332,3334],{"class":782,"line":925},[780,3311,1052],{"class":790},[780,3313,3314],{"class":1055},"_bg",[780,3316,1059],{"class":794},[780,3318,3319],{"class":1055},"gray",[780,3321,791],{"class":790},[780,3323,1190],{"class":1068},[780,3325,893],{"class":790},[780,3327,3328],{"class":790}," #",[780,3330,3331],{"class":794},"f3f4f6",[780,3333,2272],{"class":790},[780,3335,1916],{"class":790},[780,3337,3338,3340,3342,3344,3347,3349,3351,3353,3355,3358,3360],{"class":782,"line":942},[780,3339,1052],{"class":790},[780,3341,3314],{"class":1055},[780,3343,1059],{"class":794},[780,3345,3346],{"class":1055},"primary",[780,3348,791],{"class":790},[780,3350,1190],{"class":1068},[780,3352,893],{"class":790},[780,3354,3328],{"class":790},[780,3356,3357],{"class":794},"006cff",[780,3359,2272],{"class":790},[780,3361,1916],{"class":790},[780,3363,3364,3366,3369,3371,3374,3376,3378,3380,3382,3384,3386,3388,3390,3392,3394],{"class":782,"line":959},[780,3365,1052],{"class":790},[780,3367,3368],{"class":1055},"_hover",[780,3370,1059],{"class":794},[780,3372,3373],{"class":1055},"bg",[780,3375,1059],{"class":794},[780,3377,3346],{"class":1055},[780,3379,893],{"class":790},[780,3381,2968],{"class":849},[780,3383,791],{"class":790},[780,3385,1190],{"class":1068},[780,3387,893],{"class":790},[780,3389,3328],{"class":790},[780,3391,3357],{"class":794},[780,3393,2272],{"class":790},[780,3395,1916],{"class":790},[711,3397,3398],{},"Usage in HTML:",[770,3400,3402],{"className":1612,"code":3401,"language":1614,"meta":776,"style":776},"\u003Cbutton class=\"_bg:gray _hover:bg:primary _transition:colors _transition-duration:200\">\n    Hover me\n\u003C\u002Fbutton>\n",[702,3403,3404,3423,3428],{"__ignoreMap":776},[780,3405,3406,3408,3410,3412,3414,3416,3419,3421],{"class":782,"line":783},[780,3407,1621],{"class":790},[780,3409,1624],{"class":889},[780,3411,1627],{"class":849},[780,3413,856],{"class":790},[780,3415,811],{"class":790},[780,3417,3418],{"class":807},"_bg:gray _hover:bg:primary _transition:colors _transition-duration:200",[780,3420,811],{"class":790},[780,3422,1650],{"class":790},[780,3424,3425],{"class":782,"line":817},[780,3426,3427],{"class":794},"    Hover me\n",[780,3429,3430,3432,3434],{"class":782,"line":840},[780,3431,1645],{"class":790},[780,3433,1624],{"class":889},[780,3435,1650],{"class":790},[707,3437,3439],{"id":3438},"best-practices","Best Practices",[722,3441,3442,3448,3454,3460,3466],{},[725,3443,3444,3447],{},[692,3445,3446],{},"Keep durations short",": Most UI transitions should be 150-300ms",[725,3449,3450,3453],{},[692,3451,3452],{},"Use appropriate easing",": Ease-out for entering, ease-in for leaving",[725,3455,3456,3459],{},[692,3457,3458],{},"Avoid animating layout",": Prefer transform and opacity for performance",[725,3461,3462,3465],{},[692,3463,3464],{},"Be consistent",": Use the same timing across similar interactions",[725,3467,3468,3471],{},[692,3469,3470],{},"Respect reduced motion",": Consider users who prefer reduced motion",[707,3473,3475],{"id":3474},"faq","FAQ",[3477,3478,3479,3485,3489],"accordion",{},[3480,3481,3484],"accordion-item",{"icon":3482,"label":3483},"i-lucide-circle-help","What's the best duration for hover effects?","For hover effects, 150-200ms is typically ideal. Fast enough to feel responsive, slow enough to be smooth. Longer durations (300ms+) can make the UI feel sluggish.",[3480,3486,3488],{"icon":3482,"label":3487},"When should I use transitions vs animations?","Use transitions for state changes (hover, focus, active). Use animations for continuous or complex motion (loading spinners, attention-grabbing effects). Transitions are simpler and triggered by state; animations can run independently.",[3480,3490,3492],{"icon":3482,"label":3491},"Why is ease-out recommended for most transitions?","Ease-out (starting fast, ending slow) feels more natural for UI transitions because it mimics how physical objects move due to friction. The fast start provides responsiveness while the slow end feels smooth and settled.",[3494,3495,3496],"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 .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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":776,"searchDepth":817,"depth":817,"links":3498},[3499,3500,3501,3502,3503,3506,3507,3510,3511],{"id":709,"depth":817,"text":78},{"id":716,"depth":817,"text":717},{"id":751,"depth":817,"text":754},{"id":1709,"depth":817,"text":1712},{"id":2059,"depth":817,"text":2062,"children":3504},[3505],{"id":2458,"depth":840,"text":2459},{"id":2518,"depth":817,"text":2521},{"id":2830,"depth":817,"text":2831,"children":3508},[3509],{"id":2834,"depth":840,"text":2835},{"id":3438,"depth":817,"text":3439},{"id":3474,"depth":817,"text":3475},"Create transition utilities for smooth state changes with full type safety. Control which properties animate, timing, easing, and delays.","md",null,{},{"title":628,"icon":631},{"title":684,"description":3512},"S6O6M50s2UeJ2uNKt1aOTkCtEJkrZjSE40hkuYXT91g",[3520,3522],{"title":623,"path":624,"stem":625,"description":3521,"icon":626,"children":-1},"Create transform utilities for rotate, scale, translate, skew, and perspective with full type safety.",{"title":234,"path":633,"stem":634,"description":3523,"icon":237,"children":-1},"Create typography utilities for font families, sizes, weights, colors, alignment, and text decoration with full type safety.",1781596354493]