[{"data":1,"prerenderedAt":4049},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-otp":682,"-docs-theme-components-otp-surround":4044},{"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":456,"body":684,"description":4038,"extension":1249,"links":4039,"meta":4040,"navigation":4041,"path":457,"seo":4042,"stem":458,"__hash__":4043},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp.md",{"type":685,"value":686,"toc":4006},"minimark",[687,691,699,732,757,764,771,775,778,816,820,2634,2637,2659,2664,2667,2672,2676,2746,2756,2760,2766,2769,2774,2776,2779,2784,2787,2790,2795,2798,2802,2811,2815,2819,2901,2916,2919,2922,2934,2937,2940,2956,2959,2963,2966,3022,3117,3120,3123,3205,3209,3213,3216,3395,3399,3406,3568,3573,3576,3582,3590,3595,3701,3706,3740,3746,3757,3761,3863,3868,3872,3924,3928,4002],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698],"p",{},"The ",[696,697,456],"strong",{}," input (also called a pin input) is a row of single-character fields for entering a short code — a one-time password, a 2FA token, or a verification PIN. It is composed of two recipe parts:",[700,701,702,716],"ul",{},[703,704,705,711,712,715],"li",{},[696,706,707],{},[708,709,710],"code",{},"useOtpRecipe()"," — the row container that owns the layout: a horizontal flex row whose ",[708,713,714],{},"size"," axis scales the gap between cells.",[703,717,718,723,724,727,728,731],{},[696,719,720],{},[708,721,722],{},"useOtpCellRecipe()"," — the single-character cell that sits directly on each native ",[708,725,726],{},"\u003Cinput>",". It owns the surface (color, style, size), centered text, and the invalid, disabled, and ",[708,729,730],{},":focus-visible"," states.",[692,733,734,735,737,738,740,741,744,745,748,749,752,753,756],{},"Each cell is the real native ",[708,736,726],{},", so focus and the focus ring are driven by the browser: ",[708,739,730],{}," shows a ring in ",[708,742,743],{},"@color.primary",", and the ",[708,746,747],{},"invalid"," state switches that ring and the border to ",[708,750,751],{},"@color.error",". The cell shares the exact color \u002F style \u002F state surface as the ",[754,755,452],"a",{"href":453}," recipe, so an OTP field feels like the rest of your forms.",[692,758,759,760,763],{},"The OTP recipes integrate directly with the default ",[754,761,762],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[765,766,767,770],"note",{},[696,768,769],{},"Styling, not behavior."," These recipes style the cells. Auto-advancing focus, handling paste, and masking are interaction concerns you wire up yourself (or with a headless library) — the recipe stays framework-agnostic.",[688,772,774],{"id":773},"why-use-the-otp-recipe","Why use the OTP recipe?",[692,776,777],{},"The OTP recipe helps you:",[700,779,780,786,792,798,804,810],{},[703,781,782,785],{},[696,783,784],{},"Ship faster with sensible defaults",": Get 3 surface colors, 3 styles, and 3 sizes out of the box with a single set of composable calls.",[703,787,788,791],{},[696,789,790],{},"Match the rest of your forms",": The cell reuses the Input recipe's color \u002F style \u002F state surface, so an OTP field shares the same visual language as your text inputs.",[703,793,794,797],{},[696,795,796],{},"Maintain consistency",": The focus ring, invalid border, and dark-mode surfaces follow the same design rules everywhere.",[703,799,800,803],{},[696,801,802],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[703,805,806,809],{},[696,807,808],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, style, or size values at compile time.",[703,811,812,815],{},[696,813,814],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,817,819],{"id":818},"usage","Usage",[821,822,824,829,836,1104,1108,1126,2626,2630],"steps",{"level":823},"4",[825,826,828],"h4",{"id":827},"register-the-recipes","Register the recipes",[692,830,831,832,835],{},"Add the OTP recipes to a local Styleframe instance. The global ",[708,833,834],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[837,838,840,998],"code-tree",{"default-value":839},"src\u002Fcomponents\u002Fotp.styleframe.ts",[841,842,847],"pre",{"className":843,"code":844,"filename":839,"language":845,"meta":846,"style":846},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useOtpRecipe, useOtpCellRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst otp = useOtpRecipe(s);\nconst otpCell = useOtpCellRecipe(s);\n\nexport default s;\n","ts","",[708,848,849,885,914,920,941,946,963,979,984],{"__ignoreMap":846},[850,851,854,858,862,866,869,872,875,879,882],"span",{"class":852,"line":853},"line",1,[850,855,857],{"class":856},"s7zQu","import",[850,859,861],{"class":860},"sMK4o"," {",[850,863,865],{"class":864},"sTEyZ"," styleframe",[850,867,868],{"class":860}," }",[850,870,871],{"class":856}," from",[850,873,874],{"class":860}," '",[850,876,878],{"class":877},"sfazB","virtual:styleframe",[850,880,881],{"class":860},"'",[850,883,884],{"class":860},";\n",[850,886,888,890,892,895,898,901,903,905,907,910,912],{"class":852,"line":887},2,[850,889,857],{"class":856},[850,891,861],{"class":860},[850,893,894],{"class":864}," useOtpRecipe",[850,896,897],{"class":860},",",[850,899,900],{"class":864}," useOtpCellRecipe",[850,902,868],{"class":860},[850,904,871],{"class":856},[850,906,874],{"class":860},[850,908,909],{"class":877},"@styleframe\u002Ftheme",[850,911,881],{"class":860},[850,913,884],{"class":860},[850,915,917],{"class":852,"line":916},3,[850,918,919],{"emptyLinePlaceholder":223},"\n",[850,921,923,927,930,933,936,939],{"class":852,"line":922},4,[850,924,926],{"class":925},"spNyl","const",[850,928,929],{"class":864}," s ",[850,931,932],{"class":860},"=",[850,934,865],{"class":935},"s2Zo4",[850,937,938],{"class":864},"()",[850,940,884],{"class":860},[850,942,944],{"class":852,"line":943},5,[850,945,919],{"emptyLinePlaceholder":223},[850,947,949,951,954,956,958,961],{"class":852,"line":948},6,[850,950,926],{"class":925},[850,952,953],{"class":864}," otp ",[850,955,932],{"class":860},[850,957,894],{"class":935},[850,959,960],{"class":864},"(s)",[850,962,884],{"class":860},[850,964,966,968,971,973,975,977],{"class":852,"line":965},7,[850,967,926],{"class":925},[850,969,970],{"class":864}," otpCell ",[850,972,932],{"class":860},[850,974,900],{"class":935},[850,976,960],{"class":864},[850,978,884],{"class":860},[850,980,982],{"class":852,"line":981},8,[850,983,919],{"emptyLinePlaceholder":223},[850,985,987,990,993,996],{"class":852,"line":986},9,[850,988,989],{"class":856},"export",[850,991,992],{"class":856}," default",[850,994,995],{"class":864}," s",[850,997,884],{"class":860},[841,999,1001],{"className":843,"code":1000,"filename":834,"language":845,"meta":846,"style":846},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[708,1002,1003,1024,1050,1054,1068,1072,1081,1090,1094],{"__ignoreMap":846},[850,1004,1005,1007,1009,1011,1013,1015,1017,1020,1022],{"class":852,"line":853},[850,1006,857],{"class":856},[850,1008,861],{"class":860},[850,1010,865],{"class":864},[850,1012,868],{"class":860},[850,1014,871],{"class":856},[850,1016,874],{"class":860},[850,1018,1019],{"class":877},"styleframe",[850,1021,881],{"class":860},[850,1023,884],{"class":860},[850,1025,1026,1028,1030,1033,1035,1038,1040,1042,1044,1046,1048],{"class":852,"line":887},[850,1027,857],{"class":856},[850,1029,861],{"class":860},[850,1031,1032],{"class":864}," useDesignTokensPreset",[850,1034,897],{"class":860},[850,1036,1037],{"class":864}," useUtilitiesPreset",[850,1039,868],{"class":860},[850,1041,871],{"class":856},[850,1043,874],{"class":860},[850,1045,909],{"class":877},[850,1047,881],{"class":860},[850,1049,884],{"class":860},[850,1051,1052],{"class":852,"line":916},[850,1053,919],{"emptyLinePlaceholder":223},[850,1055,1056,1058,1060,1062,1064,1066],{"class":852,"line":922},[850,1057,926],{"class":925},[850,1059,929],{"class":864},[850,1061,932],{"class":860},[850,1063,865],{"class":935},[850,1065,938],{"class":864},[850,1067,884],{"class":860},[850,1069,1070],{"class":852,"line":943},[850,1071,919],{"emptyLinePlaceholder":223},[850,1073,1074,1077,1079],{"class":852,"line":948},[850,1075,1076],{"class":935},"useDesignTokensPreset",[850,1078,960],{"class":864},[850,1080,884],{"class":860},[850,1082,1083,1086,1088],{"class":852,"line":965},[850,1084,1085],{"class":935},"useUtilitiesPreset",[850,1087,960],{"class":864},[850,1089,884],{"class":860},[850,1091,1092],{"class":852,"line":981},[850,1093,919],{"emptyLinePlaceholder":223},[850,1095,1096,1098,1100,1102],{"class":852,"line":986},[850,1097,989],{"class":856},[850,1099,992],{"class":856},[850,1101,995],{"class":864},[850,1103,884],{"class":860},[825,1105,1107],{"id":1106},"build-the-component","Build the component",[692,1109,1110,1111,1114,1115,1118,1119,1121,1122,1125],{},"Put the ",[708,1112,1113],{},"otp"," container on the wrapper element and the ",[708,1116,1117],{},"otpCell"," class on each native ",[708,1120,726],{},". Render one input per character, capped at a single character with ",[708,1123,1124],{},"maxlength=\"1\"",":",[1127,1128,1129,1722,2314],"framework-switcher",{},[1130,1131,1132],"template",{"v-slot:vue":846},[841,1133,1138],{"className":1134,"code":1135,"filename":1136,"language":1137,"meta":846,"style":846},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { otp, otpCell } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    length = 6,\n    invalid = false,\n    disabled = false,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    length?: number;\n    invalid?: boolean;\n    disabled?: boolean;\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"otp({ size })\" role=\"group\" aria-label=\"One-time password\">\n        \u003Cinput\n            v-for=\"i in length\"\n            :key=\"i\"\n            :class=\"otpCell({\n                color,\n                variant,\n                size,\n                invalid: invalid ? 'true' : 'false',\n                disabled: disabled ? 'true' : 'false',\n            })\"\n            type=\"text\"\n            inputmode=\"numeric\"\n            autocomplete=\"one-time-code\"\n            maxlength=\"1\"\n            :disabled=\"disabled\"\n        \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FOtp.vue","vue",[708,1139,1140,1167,1194,1198,1205,1222,1238,1254,1267,1280,1292,1307,1343,1377,1411,1425,1438,1450,1460,1470,1475,1484,1531,1540,1556,1571,1584,1590,1596,1602,1608,1614,1622,1637,1652,1667,1682,1697,1703,1713],{"__ignoreMap":846},[850,1141,1142,1145,1149,1152,1155,1157,1160,1162,1164],{"class":852,"line":853},[850,1143,1144],{"class":860},"\u003C",[850,1146,1148],{"class":1147},"swJcz","script",[850,1150,1151],{"class":925}," setup",[850,1153,1154],{"class":925}," lang",[850,1156,932],{"class":860},[850,1158,1159],{"class":860},"\"",[850,1161,845],{"class":877},[850,1163,1159],{"class":860},[850,1165,1166],{"class":860},">\n",[850,1168,1169,1171,1173,1176,1178,1181,1183,1185,1188,1190,1192],{"class":852,"line":887},[850,1170,857],{"class":856},[850,1172,861],{"class":860},[850,1174,1175],{"class":864}," otp",[850,1177,897],{"class":860},[850,1179,1180],{"class":864}," otpCell",[850,1182,868],{"class":860},[850,1184,871],{"class":856},[850,1186,1187],{"class":860}," \"",[850,1189,878],{"class":877},[850,1191,1159],{"class":860},[850,1193,884],{"class":860},[850,1195,1196],{"class":852,"line":916},[850,1197,919],{"emptyLinePlaceholder":223},[850,1199,1200,1202],{"class":852,"line":922},[850,1201,926],{"class":925},[850,1203,1204],{"class":860}," {\n",[850,1206,1207,1210,1212,1214,1217,1219],{"class":852,"line":943},[850,1208,1209],{"class":864},"    color ",[850,1211,932],{"class":860},[850,1213,1187],{"class":860},[850,1215,1216],{"class":877},"neutral",[850,1218,1159],{"class":860},[850,1220,1221],{"class":860},",\n",[850,1223,1224,1227,1229,1231,1234,1236],{"class":852,"line":948},[850,1225,1226],{"class":864},"    variant ",[850,1228,932],{"class":860},[850,1230,1187],{"class":860},[850,1232,1233],{"class":877},"default",[850,1235,1159],{"class":860},[850,1237,1221],{"class":860},[850,1239,1240,1243,1245,1247,1250,1252],{"class":852,"line":965},[850,1241,1242],{"class":864},"    size ",[850,1244,932],{"class":860},[850,1246,1187],{"class":860},[850,1248,1249],{"class":877},"md",[850,1251,1159],{"class":860},[850,1253,1221],{"class":860},[850,1255,1256,1259,1261,1265],{"class":852,"line":981},[850,1257,1258],{"class":864},"    length ",[850,1260,932],{"class":860},[850,1262,1264],{"class":1263},"sbssI"," 6",[850,1266,1221],{"class":860},[850,1268,1269,1272,1274,1278],{"class":852,"line":986},[850,1270,1271],{"class":864},"    invalid ",[850,1273,932],{"class":860},[850,1275,1277],{"class":1276},"sfNiH"," false",[850,1279,1221],{"class":860},[850,1281,1283,1286,1288,1290],{"class":852,"line":1282},10,[850,1284,1285],{"class":864},"    disabled ",[850,1287,932],{"class":860},[850,1289,1277],{"class":1276},[850,1291,1221],{"class":860},[850,1293,1295,1298,1301,1304],{"class":852,"line":1294},11,[850,1296,1297],{"class":860},"}",[850,1299,1300],{"class":860}," =",[850,1302,1303],{"class":935}," defineProps",[850,1305,1306],{"class":860},"\u003C{\n",[850,1308,1310,1313,1316,1318,1321,1323,1326,1328,1331,1333,1335,1337,1339,1341],{"class":852,"line":1309},12,[850,1311,1312],{"class":1147},"    color",[850,1314,1315],{"class":860},"?:",[850,1317,1187],{"class":860},[850,1319,1320],{"class":877},"light",[850,1322,1159],{"class":860},[850,1324,1325],{"class":860}," |",[850,1327,1187],{"class":860},[850,1329,1330],{"class":877},"dark",[850,1332,1159],{"class":860},[850,1334,1325],{"class":860},[850,1336,1187],{"class":860},[850,1338,1216],{"class":877},[850,1340,1159],{"class":860},[850,1342,884],{"class":860},[850,1344,1346,1349,1351,1353,1355,1357,1359,1361,1364,1366,1368,1370,1373,1375],{"class":852,"line":1345},13,[850,1347,1348],{"class":1147},"    variant",[850,1350,1315],{"class":860},[850,1352,1187],{"class":860},[850,1354,1233],{"class":877},[850,1356,1159],{"class":860},[850,1358,1325],{"class":860},[850,1360,1187],{"class":860},[850,1362,1363],{"class":877},"soft",[850,1365,1159],{"class":860},[850,1367,1325],{"class":860},[850,1369,1187],{"class":860},[850,1371,1372],{"class":877},"ghost",[850,1374,1159],{"class":860},[850,1376,884],{"class":860},[850,1378,1380,1383,1385,1387,1390,1392,1394,1396,1398,1400,1402,1404,1407,1409],{"class":852,"line":1379},14,[850,1381,1382],{"class":1147},"    size",[850,1384,1315],{"class":860},[850,1386,1187],{"class":860},[850,1388,1389],{"class":877},"sm",[850,1391,1159],{"class":860},[850,1393,1325],{"class":860},[850,1395,1187],{"class":860},[850,1397,1249],{"class":877},[850,1399,1159],{"class":860},[850,1401,1325],{"class":860},[850,1403,1187],{"class":860},[850,1405,1406],{"class":877},"lg",[850,1408,1159],{"class":860},[850,1410,884],{"class":860},[850,1412,1414,1417,1419,1423],{"class":852,"line":1413},15,[850,1415,1416],{"class":1147},"    length",[850,1418,1315],{"class":860},[850,1420,1422],{"class":1421},"sBMFI"," number",[850,1424,884],{"class":860},[850,1426,1428,1431,1433,1436],{"class":852,"line":1427},16,[850,1429,1430],{"class":1147},"    invalid",[850,1432,1315],{"class":860},[850,1434,1435],{"class":1421}," boolean",[850,1437,884],{"class":860},[850,1439,1441,1444,1446,1448],{"class":852,"line":1440},17,[850,1442,1443],{"class":1147},"    disabled",[850,1445,1315],{"class":860},[850,1447,1435],{"class":1421},[850,1449,884],{"class":860},[850,1451,1453,1456,1458],{"class":852,"line":1452},18,[850,1454,1455],{"class":860},"}>",[850,1457,938],{"class":864},[850,1459,884],{"class":860},[850,1461,1463,1466,1468],{"class":852,"line":1462},19,[850,1464,1465],{"class":860},"\u003C\u002F",[850,1467,1148],{"class":1147},[850,1469,1166],{"class":860},[850,1471,1473],{"class":852,"line":1472},20,[850,1474,919],{"emptyLinePlaceholder":223},[850,1476,1478,1480,1482],{"class":852,"line":1477},21,[850,1479,1144],{"class":860},[850,1481,1130],{"class":1147},[850,1483,1166],{"class":860},[850,1485,1487,1490,1493,1496,1498,1500,1503,1505,1508,1510,1512,1515,1517,1520,1522,1524,1527,1529],{"class":852,"line":1486},22,[850,1488,1489],{"class":860},"    \u003C",[850,1491,1492],{"class":1147},"div",[850,1494,1495],{"class":925}," :class",[850,1497,932],{"class":860},[850,1499,1159],{"class":860},[850,1501,1502],{"class":877},"otp({ size })",[850,1504,1159],{"class":860},[850,1506,1507],{"class":925}," role",[850,1509,932],{"class":860},[850,1511,1159],{"class":860},[850,1513,1514],{"class":877},"group",[850,1516,1159],{"class":860},[850,1518,1519],{"class":925}," aria-label",[850,1521,932],{"class":860},[850,1523,1159],{"class":860},[850,1525,1526],{"class":877},"One-time password",[850,1528,1159],{"class":860},[850,1530,1166],{"class":860},[850,1532,1534,1537],{"class":852,"line":1533},23,[850,1535,1536],{"class":860},"        \u003C",[850,1538,1539],{"class":1147},"input\n",[850,1541,1543,1546,1548,1550,1553],{"class":852,"line":1542},24,[850,1544,1545],{"class":925},"            v-for",[850,1547,932],{"class":860},[850,1549,1159],{"class":860},[850,1551,1552],{"class":877},"i in length",[850,1554,1555],{"class":860},"\"\n",[850,1557,1559,1562,1564,1566,1569],{"class":852,"line":1558},25,[850,1560,1561],{"class":925},"            :key",[850,1563,932],{"class":860},[850,1565,1159],{"class":860},[850,1567,1568],{"class":877},"i",[850,1570,1555],{"class":860},[850,1572,1574,1577,1579,1581],{"class":852,"line":1573},26,[850,1575,1576],{"class":925},"            :class",[850,1578,932],{"class":860},[850,1580,1159],{"class":860},[850,1582,1583],{"class":877},"otpCell({\n",[850,1585,1587],{"class":852,"line":1586},27,[850,1588,1589],{"class":877},"                color,\n",[850,1591,1593],{"class":852,"line":1592},28,[850,1594,1595],{"class":877},"                variant,\n",[850,1597,1599],{"class":852,"line":1598},29,[850,1600,1601],{"class":877},"                size,\n",[850,1603,1605],{"class":852,"line":1604},30,[850,1606,1607],{"class":877},"                invalid: invalid ? 'true' : 'false',\n",[850,1609,1611],{"class":852,"line":1610},31,[850,1612,1613],{"class":877},"                disabled: disabled ? 'true' : 'false',\n",[850,1615,1617,1620],{"class":852,"line":1616},32,[850,1618,1619],{"class":877},"            })",[850,1621,1555],{"class":860},[850,1623,1625,1628,1630,1632,1635],{"class":852,"line":1624},33,[850,1626,1627],{"class":925},"            type",[850,1629,932],{"class":860},[850,1631,1159],{"class":860},[850,1633,1634],{"class":877},"text",[850,1636,1555],{"class":860},[850,1638,1640,1643,1645,1647,1650],{"class":852,"line":1639},34,[850,1641,1642],{"class":925},"            inputmode",[850,1644,932],{"class":860},[850,1646,1159],{"class":860},[850,1648,1649],{"class":877},"numeric",[850,1651,1555],{"class":860},[850,1653,1655,1658,1660,1662,1665],{"class":852,"line":1654},35,[850,1656,1657],{"class":925},"            autocomplete",[850,1659,932],{"class":860},[850,1661,1159],{"class":860},[850,1663,1664],{"class":877},"one-time-code",[850,1666,1555],{"class":860},[850,1668,1670,1673,1675,1677,1680],{"class":852,"line":1669},36,[850,1671,1672],{"class":925},"            maxlength",[850,1674,932],{"class":860},[850,1676,1159],{"class":860},[850,1678,1679],{"class":877},"1",[850,1681,1555],{"class":860},[850,1683,1685,1688,1690,1692,1695],{"class":852,"line":1684},37,[850,1686,1687],{"class":925},"            :disabled",[850,1689,932],{"class":860},[850,1691,1159],{"class":860},[850,1693,1694],{"class":877},"disabled",[850,1696,1555],{"class":860},[850,1698,1700],{"class":852,"line":1699},38,[850,1701,1702],{"class":860},"        \u002F>\n",[850,1704,1706,1709,1711],{"class":852,"line":1705},39,[850,1707,1708],{"class":860},"    \u003C\u002F",[850,1710,1492],{"class":1147},[850,1712,1166],{"class":860},[850,1714,1716,1718,1720],{"class":852,"line":1715},40,[850,1717,1465],{"class":860},[850,1719,1130],{"class":1147},[850,1721,1166],{"class":860},[1130,1723,1724],{"v-slot:react":846},[841,1725,1728],{"className":843,"code":1726,"filename":1727,"language":845,"meta":846,"style":846},"import { otp, otpCell } from \"virtual:styleframe\";\n\ninterface OtpProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    length?: number;\n    invalid?: boolean;\n    disabled?: boolean;\n}\n\nexport function Otp({\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    length = 6,\n    invalid = false,\n    disabled = false,\n}: OtpProps) {\n    return (\n        \u003Cdiv className={otp({ size })} role=\"group\" aria-label=\"One-time password\">\n            {Array.from({ length }).map((_, i) => (\n                \u003Cinput\n                    key={i}\n                    className={otpCell({\n                        color,\n                        variant,\n                        size,\n                        invalid: invalid ? \"true\" : \"false\",\n                        disabled: disabled ? \"true\" : \"false\",\n                    })}\n                    type=\"text\"\n                    inputMode=\"numeric\"\n                    autoComplete=\"one-time-code\"\n                    maxLength={1}\n                    disabled={disabled}\n                \u002F>\n            ))}\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FOtp.tsx",[708,1729,1730,1754,1758,1768,1798,1828,1858,1868,1878,1888,1893,1897,1910,1925,1939,1953,1963,1973,1983,1995,2003,2055,2105,2112,2123,2134,2141,2148,2155,2187,2215,2220,2233,2246,2259,2270,2281,2286,2293,2302,2309],{"__ignoreMap":846},[850,1731,1732,1734,1736,1738,1740,1742,1744,1746,1748,1750,1752],{"class":852,"line":853},[850,1733,857],{"class":856},[850,1735,861],{"class":860},[850,1737,1175],{"class":864},[850,1739,897],{"class":860},[850,1741,1180],{"class":864},[850,1743,868],{"class":860},[850,1745,871],{"class":856},[850,1747,1187],{"class":860},[850,1749,878],{"class":877},[850,1751,1159],{"class":860},[850,1753,884],{"class":860},[850,1755,1756],{"class":852,"line":887},[850,1757,919],{"emptyLinePlaceholder":223},[850,1759,1760,1763,1766],{"class":852,"line":916},[850,1761,1762],{"class":925},"interface",[850,1764,1765],{"class":1421}," OtpProps",[850,1767,1204],{"class":860},[850,1769,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796],{"class":852,"line":922},[850,1771,1312],{"class":1147},[850,1773,1315],{"class":860},[850,1775,1187],{"class":860},[850,1777,1320],{"class":877},[850,1779,1159],{"class":860},[850,1781,1325],{"class":860},[850,1783,1187],{"class":860},[850,1785,1330],{"class":877},[850,1787,1159],{"class":860},[850,1789,1325],{"class":860},[850,1791,1187],{"class":860},[850,1793,1216],{"class":877},[850,1795,1159],{"class":860},[850,1797,884],{"class":860},[850,1799,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820,1822,1824,1826],{"class":852,"line":943},[850,1801,1348],{"class":1147},[850,1803,1315],{"class":860},[850,1805,1187],{"class":860},[850,1807,1233],{"class":877},[850,1809,1159],{"class":860},[850,1811,1325],{"class":860},[850,1813,1187],{"class":860},[850,1815,1363],{"class":877},[850,1817,1159],{"class":860},[850,1819,1325],{"class":860},[850,1821,1187],{"class":860},[850,1823,1372],{"class":877},[850,1825,1159],{"class":860},[850,1827,884],{"class":860},[850,1829,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848,1850,1852,1854,1856],{"class":852,"line":948},[850,1831,1382],{"class":1147},[850,1833,1315],{"class":860},[850,1835,1187],{"class":860},[850,1837,1389],{"class":877},[850,1839,1159],{"class":860},[850,1841,1325],{"class":860},[850,1843,1187],{"class":860},[850,1845,1249],{"class":877},[850,1847,1159],{"class":860},[850,1849,1325],{"class":860},[850,1851,1187],{"class":860},[850,1853,1406],{"class":877},[850,1855,1159],{"class":860},[850,1857,884],{"class":860},[850,1859,1860,1862,1864,1866],{"class":852,"line":965},[850,1861,1416],{"class":1147},[850,1863,1315],{"class":860},[850,1865,1422],{"class":1421},[850,1867,884],{"class":860},[850,1869,1870,1872,1874,1876],{"class":852,"line":981},[850,1871,1430],{"class":1147},[850,1873,1315],{"class":860},[850,1875,1435],{"class":1421},[850,1877,884],{"class":860},[850,1879,1880,1882,1884,1886],{"class":852,"line":986},[850,1881,1443],{"class":1147},[850,1883,1315],{"class":860},[850,1885,1435],{"class":1421},[850,1887,884],{"class":860},[850,1889,1890],{"class":852,"line":1282},[850,1891,1892],{"class":860},"}\n",[850,1894,1895],{"class":852,"line":1294},[850,1896,919],{"emptyLinePlaceholder":223},[850,1898,1899,1901,1904,1907],{"class":852,"line":1309},[850,1900,989],{"class":856},[850,1902,1903],{"class":925}," function",[850,1905,1906],{"class":935}," Otp",[850,1908,1909],{"class":860},"({\n",[850,1911,1912,1915,1917,1919,1921,1923],{"class":852,"line":1345},[850,1913,1312],{"class":1914},"sHdIc",[850,1916,1300],{"class":860},[850,1918,1187],{"class":860},[850,1920,1216],{"class":877},[850,1922,1159],{"class":860},[850,1924,1221],{"class":860},[850,1926,1927,1929,1931,1933,1935,1937],{"class":852,"line":1379},[850,1928,1348],{"class":1914},[850,1930,1300],{"class":860},[850,1932,1187],{"class":860},[850,1934,1233],{"class":877},[850,1936,1159],{"class":860},[850,1938,1221],{"class":860},[850,1940,1941,1943,1945,1947,1949,1951],{"class":852,"line":1413},[850,1942,1382],{"class":1914},[850,1944,1300],{"class":860},[850,1946,1187],{"class":860},[850,1948,1249],{"class":877},[850,1950,1159],{"class":860},[850,1952,1221],{"class":860},[850,1954,1955,1957,1959,1961],{"class":852,"line":1427},[850,1956,1416],{"class":1914},[850,1958,1300],{"class":860},[850,1960,1264],{"class":1263},[850,1962,1221],{"class":860},[850,1964,1965,1967,1969,1971],{"class":852,"line":1440},[850,1966,1430],{"class":1914},[850,1968,1300],{"class":860},[850,1970,1277],{"class":1276},[850,1972,1221],{"class":860},[850,1974,1975,1977,1979,1981],{"class":852,"line":1452},[850,1976,1443],{"class":1914},[850,1978,1300],{"class":860},[850,1980,1277],{"class":1276},[850,1982,1221],{"class":860},[850,1984,1985,1988,1990,1993],{"class":852,"line":1462},[850,1986,1987],{"class":860},"}:",[850,1989,1765],{"class":1421},[850,1991,1992],{"class":860},")",[850,1994,1204],{"class":860},[850,1996,1997,2000],{"class":852,"line":1472},[850,1998,1999],{"class":856},"    return",[850,2001,2002],{"class":1147}," (\n",[850,2004,2005,2007,2009,2012,2015,2017,2020,2023,2026,2028,2030,2032,2034,2036,2039,2042,2045,2047,2049,2051,2053],{"class":852,"line":1477},[850,2006,1536],{"class":860},[850,2008,1492],{"class":864},[850,2010,2011],{"class":864}," className",[850,2013,2014],{"class":860},"={",[850,2016,1113],{"class":1147},[850,2018,2019],{"class":860},"({",[850,2021,2022],{"class":1914}," size",[850,2024,2025],{"class":860}," })}",[850,2027,1507],{"class":864},[850,2029,932],{"class":860},[850,2031,1159],{"class":860},[850,2033,1514],{"class":877},[850,2035,1159],{"class":860},[850,2037,2038],{"class":864}," aria",[850,2040,2041],{"class":860},"-",[850,2043,2044],{"class":864},"label",[850,2046,932],{"class":860},[850,2048,1159],{"class":860},[850,2050,1526],{"class":877},[850,2052,1159],{"class":860},[850,2054,1166],{"class":860},[850,2056,2057,2060,2063,2066,2069,2072,2075,2078,2080,2083,2086,2089,2092,2094,2097,2100,2103],{"class":852,"line":1486},[850,2058,2059],{"class":860},"            {",[850,2061,2062],{"class":1914},"Array",[850,2064,2065],{"class":1147},".",[850,2067,2068],{"class":1914},"from",[850,2070,2071],{"class":1147},"(",[850,2073,2074],{"class":860},"{",[850,2076,2077],{"class":1914}," length",[850,2079,868],{"class":860},[850,2081,2082],{"class":1147},").",[850,2084,2085],{"class":1914},"map",[850,2087,2088],{"class":1147},"((",[850,2090,2091],{"class":1914},"_",[850,2093,897],{"class":860},[850,2095,2096],{"class":1914}," i",[850,2098,2099],{"class":1147},") ",[850,2101,2102],{"class":860},"=>",[850,2104,2002],{"class":1147},[850,2106,2107,2110],{"class":852,"line":1533},[850,2108,2109],{"class":860},"                \u003C",[850,2111,1539],{"class":1914},[850,2113,2114,2117,2119,2121],{"class":852,"line":1542},[850,2115,2116],{"class":864},"                    key",[850,2118,2014],{"class":860},[850,2120,1568],{"class":864},[850,2122,1892],{"class":860},[850,2124,2125,2128,2130,2132],{"class":852,"line":1558},[850,2126,2127],{"class":864},"                    className",[850,2129,2014],{"class":860},[850,2131,1117],{"class":1147},[850,2133,1909],{"class":860},[850,2135,2136,2139],{"class":852,"line":1573},[850,2137,2138],{"class":1914},"                        color",[850,2140,1221],{"class":860},[850,2142,2143,2146],{"class":852,"line":1586},[850,2144,2145],{"class":1914},"                        variant",[850,2147,1221],{"class":860},[850,2149,2150,2153],{"class":852,"line":1592},[850,2151,2152],{"class":1914},"                        size",[850,2154,1221],{"class":860},[850,2156,2157,2160,2162,2165,2168,2170,2173,2175,2178,2180,2183,2185],{"class":852,"line":1598},[850,2158,2159],{"class":1147},"                        invalid",[850,2161,1125],{"class":860},[850,2163,2164],{"class":1914}," invalid",[850,2166,2167],{"class":1147}," ? ",[850,2169,1159],{"class":860},[850,2171,2172],{"class":877},"true",[850,2174,1159],{"class":860},[850,2176,2177],{"class":860}," :",[850,2179,1187],{"class":860},[850,2181,2182],{"class":877},"false",[850,2184,1159],{"class":860},[850,2186,1221],{"class":860},[850,2188,2189,2192,2194,2197,2199,2201,2203,2205,2207,2209,2211,2213],{"class":852,"line":1604},[850,2190,2191],{"class":1147},"                        disabled",[850,2193,1125],{"class":860},[850,2195,2196],{"class":1914}," disabled",[850,2198,2167],{"class":1147},[850,2200,1159],{"class":860},[850,2202,2172],{"class":877},[850,2204,1159],{"class":860},[850,2206,2177],{"class":860},[850,2208,1187],{"class":860},[850,2210,2182],{"class":877},[850,2212,1159],{"class":860},[850,2214,1221],{"class":860},[850,2216,2217],{"class":852,"line":1610},[850,2218,2219],{"class":860},"                    })}\n",[850,2221,2222,2225,2227,2229,2231],{"class":852,"line":1616},[850,2223,2224],{"class":864},"                    type",[850,2226,932],{"class":860},[850,2228,1159],{"class":860},[850,2230,1634],{"class":877},[850,2232,1555],{"class":860},[850,2234,2235,2238,2240,2242,2244],{"class":852,"line":1624},[850,2236,2237],{"class":864},"                    inputMode",[850,2239,932],{"class":860},[850,2241,1159],{"class":860},[850,2243,1649],{"class":877},[850,2245,1555],{"class":860},[850,2247,2248,2251,2253,2255,2257],{"class":852,"line":1639},[850,2249,2250],{"class":864},"                    autoComplete",[850,2252,932],{"class":860},[850,2254,1159],{"class":860},[850,2256,1664],{"class":877},[850,2258,1555],{"class":860},[850,2260,2261,2264,2266,2268],{"class":852,"line":1654},[850,2262,2263],{"class":864},"                    maxLength",[850,2265,2014],{"class":860},[850,2267,1679],{"class":1263},[850,2269,1892],{"class":860},[850,2271,2272,2275,2277,2279],{"class":852,"line":1669},[850,2273,2274],{"class":864},"                    disabled",[850,2276,2014],{"class":860},[850,2278,1694],{"class":864},[850,2280,1892],{"class":860},[850,2282,2283],{"class":852,"line":1684},[850,2284,2285],{"class":860},"                \u002F>\n",[850,2287,2288,2291],{"class":852,"line":1699},[850,2289,2290],{"class":1147},"            ))",[850,2292,1892],{"class":860},[850,2294,2295,2298,2300],{"class":852,"line":1705},[850,2296,2297],{"class":860},"        \u003C\u002F",[850,2299,1492],{"class":864},[850,2301,1166],{"class":860},[850,2303,2304,2307],{"class":852,"line":1715},[850,2305,2306],{"class":1147},"    )",[850,2308,884],{"class":860},[850,2310,2312],{"class":852,"line":2311},41,[850,2313,1892],{"class":860},[1130,2315,2316,2326,2463],{"v-slot:other":846},[692,2317,694,2318,2321,2322,2325],{},[708,2319,2320],{},"otp()"," and ",[708,2323,2324],{},"otpCell()"," runtimes each return a class string. Apply them however your framework binds classes:",[841,2327,2330],{"className":843,"code":2328,"filename":2329,"language":845,"meta":846,"style":846},"import { otp, otpCell } from \"virtual:styleframe\";\n\nconst containerClasses = otp({ size: \"md\" });\n\u002F\u002F → \"otp _display:inline-flex _align-items:center ...\"\n\nconst cellClasses = otpCell({ color: \"neutral\", variant: \"default\", size: \"md\" });\n\u002F\u002F → \"otp-cell _box-sizing:border-box _text-align:center ...\"\n","src\u002Fcomponents\u002Fotp.ts",[708,2331,2332,2356,2360,2391,2397,2401,2458],{"__ignoreMap":846},[850,2333,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354],{"class":852,"line":853},[850,2335,857],{"class":856},[850,2337,861],{"class":860},[850,2339,1175],{"class":864},[850,2341,897],{"class":860},[850,2343,1180],{"class":864},[850,2345,868],{"class":860},[850,2347,871],{"class":856},[850,2349,1187],{"class":860},[850,2351,878],{"class":877},[850,2353,1159],{"class":860},[850,2355,884],{"class":860},[850,2357,2358],{"class":852,"line":887},[850,2359,919],{"emptyLinePlaceholder":223},[850,2361,2362,2364,2367,2369,2371,2373,2375,2377,2379,2381,2383,2385,2387,2389],{"class":852,"line":916},[850,2363,926],{"class":925},[850,2365,2366],{"class":864}," containerClasses ",[850,2368,932],{"class":860},[850,2370,1175],{"class":935},[850,2372,2071],{"class":864},[850,2374,2074],{"class":860},[850,2376,2022],{"class":1147},[850,2378,1125],{"class":860},[850,2380,1187],{"class":860},[850,2382,1249],{"class":877},[850,2384,1159],{"class":860},[850,2386,868],{"class":860},[850,2388,1992],{"class":864},[850,2390,884],{"class":860},[850,2392,2393],{"class":852,"line":922},[850,2394,2396],{"class":2395},"sHwdD","\u002F\u002F → \"otp _display:inline-flex _align-items:center ...\"\n",[850,2398,2399],{"class":852,"line":943},[850,2400,919],{"emptyLinePlaceholder":223},[850,2402,2403,2405,2408,2410,2412,2414,2416,2419,2421,2423,2425,2427,2429,2432,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456],{"class":852,"line":948},[850,2404,926],{"class":925},[850,2406,2407],{"class":864}," cellClasses ",[850,2409,932],{"class":860},[850,2411,1180],{"class":935},[850,2413,2071],{"class":864},[850,2415,2074],{"class":860},[850,2417,2418],{"class":1147}," color",[850,2420,1125],{"class":860},[850,2422,1187],{"class":860},[850,2424,1216],{"class":877},[850,2426,1159],{"class":860},[850,2428,897],{"class":860},[850,2430,2431],{"class":1147}," variant",[850,2433,1125],{"class":860},[850,2435,1187],{"class":860},[850,2437,1233],{"class":877},[850,2439,1159],{"class":860},[850,2441,897],{"class":860},[850,2443,2022],{"class":1147},[850,2445,1125],{"class":860},[850,2447,1187],{"class":860},[850,2449,1249],{"class":877},[850,2451,1159],{"class":860},[850,2453,868],{"class":860},[850,2455,1992],{"class":864},[850,2457,884],{"class":860},[850,2459,2460],{"class":852,"line":965},[850,2461,2462],{"class":2395},"\u002F\u002F → \"otp-cell _box-sizing:border-box _text-align:center ...\"\n",[841,2464,2469],{"className":2465,"code":2466,"filename":2467,"language":2468,"meta":846,"style":846},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"otp _display:inline-flex ...\" role=\"group\" aria-label=\"One-time password\">\n    \u003Cinput class=\"otp-cell _text-align:center ...\" type=\"text\" inputmode=\"numeric\" maxlength=\"1\" \u002F>\n    \u003Cinput class=\"otp-cell _text-align:center ...\" type=\"text\" inputmode=\"numeric\" maxlength=\"1\" \u002F>\n    \u003C!-- one input per character -->\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fotp.html","html",[708,2470,2471,2511,2565,2613,2618],{"__ignoreMap":846},[850,2472,2473,2475,2477,2480,2482,2484,2487,2489,2491,2493,2495,2497,2499,2501,2503,2505,2507,2509],{"class":852,"line":853},[850,2474,1144],{"class":860},[850,2476,1492],{"class":1147},[850,2478,2479],{"class":925}," class",[850,2481,932],{"class":860},[850,2483,1159],{"class":860},[850,2485,2486],{"class":877},"otp _display:inline-flex ...",[850,2488,1159],{"class":860},[850,2490,1507],{"class":925},[850,2492,932],{"class":860},[850,2494,1159],{"class":860},[850,2496,1514],{"class":877},[850,2498,1159],{"class":860},[850,2500,1519],{"class":925},[850,2502,932],{"class":860},[850,2504,1159],{"class":860},[850,2506,1526],{"class":877},[850,2508,1159],{"class":860},[850,2510,1166],{"class":860},[850,2512,2513,2515,2518,2520,2522,2524,2527,2529,2532,2534,2536,2538,2540,2543,2545,2547,2549,2551,2554,2556,2558,2560,2562],{"class":852,"line":887},[850,2514,1489],{"class":860},[850,2516,2517],{"class":1147},"input",[850,2519,2479],{"class":925},[850,2521,932],{"class":860},[850,2523,1159],{"class":860},[850,2525,2526],{"class":877},"otp-cell _text-align:center ...",[850,2528,1159],{"class":860},[850,2530,2531],{"class":925}," type",[850,2533,932],{"class":860},[850,2535,1159],{"class":860},[850,2537,1634],{"class":877},[850,2539,1159],{"class":860},[850,2541,2542],{"class":925}," inputmode",[850,2544,932],{"class":860},[850,2546,1159],{"class":860},[850,2548,1649],{"class":877},[850,2550,1159],{"class":860},[850,2552,2553],{"class":925}," maxlength",[850,2555,932],{"class":860},[850,2557,1159],{"class":860},[850,2559,1679],{"class":877},[850,2561,1159],{"class":860},[850,2563,2564],{"class":860}," \u002F>\n",[850,2566,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611],{"class":852,"line":916},[850,2568,1489],{"class":860},[850,2570,2517],{"class":1147},[850,2572,2479],{"class":925},[850,2574,932],{"class":860},[850,2576,1159],{"class":860},[850,2578,2526],{"class":877},[850,2580,1159],{"class":860},[850,2582,2531],{"class":925},[850,2584,932],{"class":860},[850,2586,1159],{"class":860},[850,2588,1634],{"class":877},[850,2590,1159],{"class":860},[850,2592,2542],{"class":925},[850,2594,932],{"class":860},[850,2596,1159],{"class":860},[850,2598,1649],{"class":877},[850,2600,1159],{"class":860},[850,2602,2553],{"class":925},[850,2604,932],{"class":860},[850,2606,1159],{"class":860},[850,2608,1679],{"class":877},[850,2610,1159],{"class":860},[850,2612,2564],{"class":860},[850,2614,2615],{"class":852,"line":922},[850,2616,2617],{"class":2395},"    \u003C!-- one input per character -->\n",[850,2619,2620,2622,2624],{"class":852,"line":943},[850,2621,1465],{"class":860},[850,2623,1492],{"class":1147},[850,2625,1166],{"class":860},[825,2627,2629],{"id":2628},"see-it-in-action","See it in action",[2631,2632],"story-preview",{"story":2633,":panel":2172},"theme-recipes-forms-otp--default",[688,2635,195],{"id":2636},"colors",[692,2638,2639,2640,2642,2643,2645,2646,2648,2649,2321,2651,2653,2654,2656,2657,2065],{},"The OTP cell includes 3 color variants: ",[708,2641,1320],{},", ",[708,2644,1330],{},", and ",[708,2647,1216],{},". Like the ",[754,2650,452],{"href":453},[754,2652,436],{"href":437}," recipes, these are neutral-spectrum surface colors rather than status colors — the color sets the cell background and border, while the ",[708,2655,730],{}," ring stays ",[708,2658,743],{},[692,2660,694,2661,2663],{},[708,2662,1216],{}," color adapts automatically: a light surface in light mode and a dark surface in dark mode, making it the safest default for general-purpose forms.",[2631,2665],{"story":2666,":panel":2172},"theme-recipes-forms-otp--neutral",[2668,2669,2671],"h3",{"id":2670},"color-reference","Color Reference",[2631,2673],{"story":2674,":height":2675},"theme-recipes-forms-otp--all-variants","420",[2677,2678,2679,2695],"table",{},[2680,2681,2682],"thead",{},[2683,2684,2685,2689,2692],"tr",{},[2686,2687,2688],"th",{},"Color",[2686,2690,2691],{},"Token",[2686,2693,2694],{},"Use Case",[2696,2697,2698,2717,2734],"tbody",{},[2683,2699,2700,2705,2714],{},[2701,2702,2703],"td",{},[708,2704,1320],{},[2701,2706,2707,2710,2711],{},[708,2708,2709],{},"@color.white"," \u002F ",[708,2712,2713],{},"@color.gray-200",[2701,2715,2716],{},"Light surfaces, stays light in dark mode",[2683,2718,2719,2723,2731],{},[2701,2720,2721],{},[708,2722,1330],{},[2701,2724,2725,2710,2728],{},[708,2726,2727],{},"@color.gray-900",[708,2729,2730],{},"@color.gray-700",[2701,2732,2733],{},"Dark surfaces, stays dark in light mode",[2683,2735,2736,2740,2743],{},[2701,2737,2738],{},[708,2739,1216],{},[2701,2741,2742],{},"Adaptive (light ↔ dark)",[2701,2744,2745],{},"Default color, adapts to the current color scheme",[2747,2748,2749,2752,2753,2755],"tip",{},[696,2750,2751],{},"Pro tip:"," Use ",[708,2754,1216],{}," as your default OTP color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark surfaces separately.",[688,2757,2759],{"id":2758},"variants","Variants",[692,2761,2762,2763,2765],{},"Three visual styles control how much surface each cell shows. All three share the same ",[708,2764,730],{}," ring and invalid border — they differ only in their resting background and border.",[2668,2767,2768],{"id":1233},"Default",[692,2770,2771,2773],{},[708,2772,1233],{}," draws a bordered cell on a solid surface — the most legible option and the right default for verification flows.",[2631,2775],{"story":2633,":panel":2172},[2668,2777,2778],{"id":1363},"Soft",[692,2780,2781,2783],{},[708,2782,1363],{}," fills the cell with a subtle tinted background and a matching border, for a gentler look that still reads as an input.",[2631,2785],{"story":2786,":panel":2172},"theme-recipes-forms-otp--soft",[2668,2788,2789],{"id":1372},"Ghost",[692,2791,2792,2794],{},[708,2793,1372],{}," is transparent until focused, for dense or low-chrome layouts. Pair it with a clear label so the field stays discoverable.",[2631,2796],{"story":2797,":panel":2172},"theme-recipes-forms-otp--ghost",[688,2799,2801],{"id":2800},"sizes","Sizes",[692,2803,2804,2805,2807,2808,2810],{},"Three size variants from ",[708,2806,1389],{}," to ",[708,2809,1406],{}," control the square cell dimensions, font size, and border radius. Cells are square so digits stay centered both ways.",[2631,2812],{"story":2813,":height":2814},"theme-recipes-forms-otp--all-sizes","360",[2668,2816,2818],{"id":2817},"size-reference","Size Reference",[2677,2820,2821,2837],{},[2680,2822,2823],{},[2683,2824,2825,2828,2831,2834],{},[2686,2826,2827],{},"Size",[2686,2829,2830],{},"Cell Size",[2686,2832,2833],{},"Font Size",[2686,2835,2836],{},"Border Radius",[2696,2838,2839,2860,2881],{},[2683,2840,2841,2845,2850,2855],{},[2701,2842,2843],{},[708,2844,1389],{},[2701,2846,2847],{},[708,2848,2849],{},"40px",[2701,2851,2852],{},[708,2853,2854],{},"@font-size.sm",[2701,2856,2857],{},[708,2858,2859],{},"@border-radius.sm",[2683,2861,2862,2866,2871,2876],{},[2701,2863,2864],{},[708,2865,1249],{},[2701,2867,2868],{},[708,2869,2870],{},"48px",[2701,2872,2873],{},[708,2874,2875],{},"@font-size.md",[2701,2877,2878],{},[708,2879,2880],{},"@border-radius.md",[2683,2882,2883,2887,2892,2897],{},[2701,2884,2885],{},[708,2886,1406],{},[2701,2888,2889],{},[708,2890,2891],{},"56px",[2701,2893,2894],{},[708,2895,2896],{},"@font-size.lg",[2701,2898,2899],{},[708,2900,2880],{},[765,2902,2903,2906,2907,2909,2910,2912,2913,2915],{},[696,2904,2905],{},"Good to know:"," Pass the same ",[708,2908,714],{}," to the ",[708,2911,1113],{}," container and the ",[708,2914,1117],{}," cells so the gap between cells scales with the cell size.",[688,2917,342],{"id":2918},"states",[2668,2920,2921],{"id":747},"Invalid",[692,2923,2924,2925,2927,2928,2930,2931,2933],{},"Set the ",[708,2926,747],{}," state when the entered code is wrong or expired. The cell border and the ",[708,2929,730],{}," ring switch to ",[708,2932,751],{},", layered over whatever color and style the cell already uses.",[2631,2935],{"story":2936,":panel":2172},"theme-recipes-forms-otp--invalid",[2668,2938,2939],{"id":1694},"Disabled",[692,2941,694,2942,2944,2945,2948,2949,2952,2953,2955],{},[708,2943,1694],{}," state dims the cells to ",[708,2946,2947],{},"0.5"," opacity, switches the cursor to ",[708,2950,2951],{},"not-allowed",", and blocks pointer interaction. Mirror it with the native ",[708,2954,1694],{}," attribute so the inputs also leave the tab order.",[2631,2957],{"story":2958,":panel":2172},"theme-recipes-forms-otp--disabled",[688,2960,2962],{"id":2961},"anatomy","Anatomy",[692,2964,2965],{},"The OTP input is composed of two independent recipes: a row container and the repeated cell.",[2677,2967,2968,2981],{},[2680,2969,2970],{},[2683,2971,2972,2975,2978],{},[2686,2973,2974],{},"Part",[2686,2976,2977],{},"Recipe",[2686,2979,2980],{},"Role",[2696,2982,2983,3002],{},[2683,2984,2985,2990,2994],{},[2701,2986,2987],{},[696,2988,2989],{},"Container",[2701,2991,2992],{},[708,2993,710],{},[2701,2995,694,2996,2999,3000],{},[708,2997,2998],{},".otp"," wrapper — owns the horizontal row layout and scales the gap between cells with ",[708,3001,714],{},[2683,3003,3004,3009,3013],{},[2701,3005,3006],{},[696,3007,3008],{},"Cell",[2701,3010,3011],{},[708,3012,722],{},[2701,3014,694,3015,3018,3019,3021],{},[708,3016,3017],{},".otp-cell"," native ",[708,3020,726],{}," — owns the surface color, style, square size, centered text, and the invalid \u002F disabled \u002F focus states",[841,3023,3025],{"className":2465,"code":3024,"language":2468,"meta":846,"style":846},"\u003Cdiv class=\"otp(...)\" role=\"group\" aria-label=\"One-time password\">\n    \u003Cinput class=\"otpCell(...)\" type=\"text\" maxlength=\"1\" \u002F>\n    \u003C!-- one input per character -->\n\u003C\u002Fdiv>\n",[708,3026,3027,3066,3105,3109],{"__ignoreMap":846},[850,3028,3029,3031,3033,3035,3037,3039,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064],{"class":852,"line":853},[850,3030,1144],{"class":860},[850,3032,1492],{"class":1147},[850,3034,2479],{"class":925},[850,3036,932],{"class":860},[850,3038,1159],{"class":860},[850,3040,3041],{"class":877},"otp(...)",[850,3043,1159],{"class":860},[850,3045,1507],{"class":925},[850,3047,932],{"class":860},[850,3049,1159],{"class":860},[850,3051,1514],{"class":877},[850,3053,1159],{"class":860},[850,3055,1519],{"class":925},[850,3057,932],{"class":860},[850,3059,1159],{"class":860},[850,3061,1526],{"class":877},[850,3063,1159],{"class":860},[850,3065,1166],{"class":860},[850,3067,3068,3070,3072,3074,3076,3078,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3103],{"class":852,"line":887},[850,3069,1489],{"class":860},[850,3071,2517],{"class":1147},[850,3073,2479],{"class":925},[850,3075,932],{"class":860},[850,3077,1159],{"class":860},[850,3079,3080],{"class":877},"otpCell(...)",[850,3082,1159],{"class":860},[850,3084,2531],{"class":925},[850,3086,932],{"class":860},[850,3088,1159],{"class":860},[850,3090,1634],{"class":877},[850,3092,1159],{"class":860},[850,3094,2553],{"class":925},[850,3096,932],{"class":860},[850,3098,1159],{"class":860},[850,3100,1679],{"class":877},[850,3102,1159],{"class":860},[850,3104,2564],{"class":860},[850,3106,3107],{"class":852,"line":916},[850,3108,2617],{"class":2395},[850,3110,3111,3113,3115],{"class":852,"line":922},[850,3112,1465],{"class":860},[850,3114,1492],{"class":1147},[850,3116,1166],{"class":860},[692,3118,3119],{},"The container carries no color or style axis; all surface styling lives on the cell, so every cell in a row stays visually identical.",[688,3121,568],{"id":3122},"accessibility",[700,3124,3125,3139,3148,3162,3177,3189],{},[703,3126,3127,3130,3131,3134,3135,3138],{},[696,3128,3129],{},"Group and label the cells."," Wrap the inputs in an element with ",[708,3132,3133],{},"role=\"group\""," and an ",[708,3136,3137],{},"aria-label"," (e.g. \"One-time password\") so assistive technology announces them as one control rather than several unrelated fields.",[703,3140,3141,3144,3145,3147],{},[696,3142,3143],{},"Keep native inputs."," Styling real ",[708,3146,726],{}," elements preserves keyboard operation, focus order, and form submission for free.",[703,3149,3150,3153,3154,3157,3158,3161],{},[696,3151,3152],{},"Hint the input type."," Set ",[708,3155,3156],{},"inputmode=\"numeric\""," for digit codes and ",[708,3159,3160],{},"autocomplete=\"one-time-code\""," so mobile keyboards and OS-level SMS autofill work.",[703,3163,3164,3167,3168,3170,3171,2065],{},[696,3165,3166],{},"Don't rely on color alone."," The ",[708,3169,747],{}," state changes the border and ring color; pair it with a visible error message so the failure isn't conveyed by color only, satisfying ",[754,3172,3176],{"href":3173,"rel":3174},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fuse-of-color.html",[3175],"nofollow","WCAG 1.4.1",[703,3178,3179,3185,3186,3188],{},[696,3180,3181,3182,3184],{},"Mirror ",[708,3183,1694],{}," on the input."," Set the real ",[708,3187,1694],{}," attribute in addition to the recipe state so the cells leave the tab order.",[703,3190,3191,3167,3194,3196,3197,3199,3200,2065],{},[696,3192,3193],{},"Verify contrast.",[708,3195,730],{}," ring is ",[708,3198,743],{},". Default tokens meet WCAG AA; if you override the primary color, verify with the ",[754,3201,3204],{"href":3202,"rel":3203},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3175],"WebAIM Contrast Checker",[688,3206,3208],{"id":3207},"customization","Customization",[2668,3210,3212],{"id":3211},"overriding-defaults","Overriding Defaults",[692,3214,3215],{},"Each OTP composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[841,3217,3219],{"className":843,"code":3218,"filename":839,"language":845,"meta":846,"style":846},"import { styleframe } from 'virtual:styleframe';\nimport { useOtpCellRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst otpCell = useOtpCellRecipe(s, {\n    base: {\n        fontWeight: '@font-weight.semibold',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[708,3220,3221,3241,3261,3265,3279,3283,3300,3309,3325,3330,3339,3354,3369,3373,3381,3385],{"__ignoreMap":846},[850,3222,3223,3225,3227,3229,3231,3233,3235,3237,3239],{"class":852,"line":853},[850,3224,857],{"class":856},[850,3226,861],{"class":860},[850,3228,865],{"class":864},[850,3230,868],{"class":860},[850,3232,871],{"class":856},[850,3234,874],{"class":860},[850,3236,878],{"class":877},[850,3238,881],{"class":860},[850,3240,884],{"class":860},[850,3242,3243,3245,3247,3249,3251,3253,3255,3257,3259],{"class":852,"line":887},[850,3244,857],{"class":856},[850,3246,861],{"class":860},[850,3248,900],{"class":864},[850,3250,868],{"class":860},[850,3252,871],{"class":856},[850,3254,874],{"class":860},[850,3256,909],{"class":877},[850,3258,881],{"class":860},[850,3260,884],{"class":860},[850,3262,3263],{"class":852,"line":916},[850,3264,919],{"emptyLinePlaceholder":223},[850,3266,3267,3269,3271,3273,3275,3277],{"class":852,"line":922},[850,3268,926],{"class":925},[850,3270,929],{"class":864},[850,3272,932],{"class":860},[850,3274,865],{"class":935},[850,3276,938],{"class":864},[850,3278,884],{"class":860},[850,3280,3281],{"class":852,"line":943},[850,3282,919],{"emptyLinePlaceholder":223},[850,3284,3285,3287,3289,3291,3293,3296,3298],{"class":852,"line":948},[850,3286,926],{"class":925},[850,3288,970],{"class":864},[850,3290,932],{"class":860},[850,3292,900],{"class":935},[850,3294,3295],{"class":864},"(s",[850,3297,897],{"class":860},[850,3299,1204],{"class":860},[850,3301,3302,3305,3307],{"class":852,"line":965},[850,3303,3304],{"class":1147},"    base",[850,3306,1125],{"class":860},[850,3308,1204],{"class":860},[850,3310,3311,3314,3316,3318,3321,3323],{"class":852,"line":981},[850,3312,3313],{"class":1147},"        fontWeight",[850,3315,1125],{"class":860},[850,3317,874],{"class":860},[850,3319,3320],{"class":877},"@font-weight.semibold",[850,3322,881],{"class":860},[850,3324,1221],{"class":860},[850,3326,3327],{"class":852,"line":986},[850,3328,3329],{"class":860},"    },\n",[850,3331,3332,3335,3337],{"class":852,"line":1282},[850,3333,3334],{"class":1147},"    defaultVariants",[850,3336,1125],{"class":860},[850,3338,1204],{"class":860},[850,3340,3341,3344,3346,3348,3350,3352],{"class":852,"line":1294},[850,3342,3343],{"class":1147},"        color",[850,3345,1125],{"class":860},[850,3347,874],{"class":860},[850,3349,1216],{"class":877},[850,3351,881],{"class":860},[850,3353,1221],{"class":860},[850,3355,3356,3359,3361,3363,3365,3367],{"class":852,"line":1309},[850,3357,3358],{"class":1147},"        size",[850,3360,1125],{"class":860},[850,3362,874],{"class":860},[850,3364,1406],{"class":877},[850,3366,881],{"class":860},[850,3368,1221],{"class":860},[850,3370,3371],{"class":852,"line":1345},[850,3372,3329],{"class":860},[850,3374,3375,3377,3379],{"class":852,"line":1379},[850,3376,1297],{"class":860},[850,3378,1992],{"class":864},[850,3380,884],{"class":860},[850,3382,3383],{"class":852,"line":1413},[850,3384,919],{"emptyLinePlaceholder":223},[850,3386,3387,3389,3391,3393],{"class":852,"line":1427},[850,3388,989],{"class":856},[850,3390,992],{"class":856},[850,3392,995],{"class":864},[850,3394,884],{"class":860},[2668,3396,3398],{"id":3397},"filtering-variants","Filtering Variants",[692,3400,3401,3402,3405],{},"If you only need a subset of the available variants, use the ",[708,3403,3404],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[841,3407,3409],{"className":843,"code":3408,"filename":839,"language":845,"meta":846,"style":846},"import { styleframe } from 'virtual:styleframe';\nimport { useOtpCellRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color and the default style\nconst otpCell = useOtpCellRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['default'],\n    },\n});\n\nexport default s;\n",[708,3410,3411,3431,3451,3455,3469,3473,3478,3494,3503,3523,3542,3546,3554,3558],{"__ignoreMap":846},[850,3412,3413,3415,3417,3419,3421,3423,3425,3427,3429],{"class":852,"line":853},[850,3414,857],{"class":856},[850,3416,861],{"class":860},[850,3418,865],{"class":864},[850,3420,868],{"class":860},[850,3422,871],{"class":856},[850,3424,874],{"class":860},[850,3426,878],{"class":877},[850,3428,881],{"class":860},[850,3430,884],{"class":860},[850,3432,3433,3435,3437,3439,3441,3443,3445,3447,3449],{"class":852,"line":887},[850,3434,857],{"class":856},[850,3436,861],{"class":860},[850,3438,900],{"class":864},[850,3440,868],{"class":860},[850,3442,871],{"class":856},[850,3444,874],{"class":860},[850,3446,909],{"class":877},[850,3448,881],{"class":860},[850,3450,884],{"class":860},[850,3452,3453],{"class":852,"line":916},[850,3454,919],{"emptyLinePlaceholder":223},[850,3456,3457,3459,3461,3463,3465,3467],{"class":852,"line":922},[850,3458,926],{"class":925},[850,3460,929],{"class":864},[850,3462,932],{"class":860},[850,3464,865],{"class":935},[850,3466,938],{"class":864},[850,3468,884],{"class":860},[850,3470,3471],{"class":852,"line":943},[850,3472,919],{"emptyLinePlaceholder":223},[850,3474,3475],{"class":852,"line":948},[850,3476,3477],{"class":2395},"\u002F\u002F Only generate the neutral color and the default style\n",[850,3479,3480,3482,3484,3486,3488,3490,3492],{"class":852,"line":965},[850,3481,926],{"class":925},[850,3483,970],{"class":864},[850,3485,932],{"class":860},[850,3487,900],{"class":935},[850,3489,3295],{"class":864},[850,3491,897],{"class":860},[850,3493,1204],{"class":860},[850,3495,3496,3499,3501],{"class":852,"line":981},[850,3497,3498],{"class":1147},"    filter",[850,3500,1125],{"class":860},[850,3502,1204],{"class":860},[850,3504,3505,3507,3509,3512,3514,3516,3518,3521],{"class":852,"line":986},[850,3506,3343],{"class":1147},[850,3508,1125],{"class":860},[850,3510,3511],{"class":864}," [",[850,3513,881],{"class":860},[850,3515,1216],{"class":877},[850,3517,881],{"class":860},[850,3519,3520],{"class":864},"]",[850,3522,1221],{"class":860},[850,3524,3525,3528,3530,3532,3534,3536,3538,3540],{"class":852,"line":1282},[850,3526,3527],{"class":1147},"        variant",[850,3529,1125],{"class":860},[850,3531,3511],{"class":864},[850,3533,881],{"class":860},[850,3535,1233],{"class":877},[850,3537,881],{"class":860},[850,3539,3520],{"class":864},[850,3541,1221],{"class":860},[850,3543,3544],{"class":852,"line":1294},[850,3545,3329],{"class":860},[850,3547,3548,3550,3552],{"class":852,"line":1309},[850,3549,1297],{"class":860},[850,3551,1992],{"class":864},[850,3553,884],{"class":860},[850,3555,3556],{"class":852,"line":1345},[850,3557,919],{"emptyLinePlaceholder":223},[850,3559,3560,3562,3564,3566],{"class":852,"line":1379},[850,3561,989],{"class":856},[850,3563,992],{"class":856},[850,3565,995],{"class":864},[850,3567,884],{"class":860},[765,3569,3570,3572],{},[696,3571,2905],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,3574,73],{"id":3575},"api-reference",[2668,3577,3579],{"id":3578},"useotprecipes-options",[708,3580,3581],{},"useOtpRecipe(s, options?)",[692,3583,3584,3585,3587,3588,2065],{},"Creates the OTP container recipe — the ",[708,3586,2998],{}," row that lays out the cells and scales the gap between them with ",[708,3589,714],{},[692,3591,3592],{},[696,3593,3594],{},"Parameters:",[2677,3596,3597,3610],{},[2680,3598,3599],{},[2683,3600,3601,3604,3607],{},[2686,3602,3603],{},"Parameter",[2686,3605,3606],{},"Type",[2686,3608,3609],{},"Description",[2696,3611,3612,3627,3642,3657,3671,3686],{},[2683,3613,3614,3619,3624],{},[2701,3615,3616],{},[708,3617,3618],{},"s",[2701,3620,3621],{},[708,3622,3623],{},"Styleframe",[2701,3625,3626],{},"The Styleframe instance",[2683,3628,3629,3634,3639],{},[2701,3630,3631],{},[708,3632,3633],{},"options",[2701,3635,3636],{},[708,3637,3638],{},"DeepPartial\u003CRecipeConfig>",[2701,3640,3641],{},"Optional overrides for the recipe configuration",[2683,3643,3644,3649,3654],{},[2701,3645,3646],{},[708,3647,3648],{},"options.base",[2701,3650,3651],{},[708,3652,3653],{},"VariantDeclarationsBlock",[2701,3655,3656],{},"Custom base styles for the container",[2683,3658,3659,3664,3668],{},[2701,3660,3661],{},[708,3662,3663],{},"options.variants",[2701,3665,3666],{},[708,3667,2759],{},[2701,3669,3670],{},"Custom variant definitions for the recipe",[2683,3672,3673,3678,3683],{},[2701,3674,3675],{},[708,3676,3677],{},"options.defaultVariants",[2701,3679,3680],{},[708,3681,3682],{},"Record\u003Ckeyof Variants, string>",[2701,3684,3685],{},"Default variant values for the recipe",[2683,3687,3688,3693,3698],{},[2701,3689,3690],{},[708,3691,3692],{},"options.filter",[2701,3694,3695],{},[708,3696,3697],{},"Record\u003Cstring, string[]>",[2701,3699,3700],{},"Limit which variant values are generated",[692,3702,3703],{},[696,3704,3705],{},"Variants:",[2677,3707,3708,3720],{},[2680,3709,3710],{},[2683,3711,3712,3715,3718],{},[2686,3713,3714],{},"Variant",[2686,3716,3717],{},"Options",[2686,3719,2768],{},[2696,3721,3722],{},[2683,3723,3724,3728,3736],{},[2701,3725,3726],{},[708,3727,714],{},[2701,3729,3730,2642,3732,2642,3734],{},[708,3731,1389],{},[708,3733,1249],{},[708,3735,1406],{},[2701,3737,3738],{},[708,3739,1249],{},[2668,3741,3743],{"id":3742},"useotpcellrecipes-options",[708,3744,3745],{},"useOtpCellRecipe(s, options?)",[692,3747,3748,3749,3018,3751,3753,3754,2065],{},"Creates the OTP cell recipe — the ",[708,3750,3017],{},[708,3752,726],{}," that owns the surface color, style, square size, centered text, and the invalid \u002F disabled \u002F focus states. Accepts the same parameters as ",[708,3755,3756],{},"useOtpRecipe",[692,3758,3759],{},[696,3760,3705],{},[2677,3762,3763,3773],{},[2680,3764,3765],{},[2683,3766,3767,3769,3771],{},[2686,3768,3714],{},[2686,3770,3717],{},[2686,3772,2768],{},[2696,3774,3775,3794,3813,3831,3847],{},[2683,3776,3777,3782,3790],{},[2701,3778,3779],{},[708,3780,3781],{},"color",[2701,3783,3784,2642,3786,2642,3788],{},[708,3785,1320],{},[708,3787,1330],{},[708,3789,1216],{},[2701,3791,3792],{},[708,3793,1216],{},[2683,3795,3796,3801,3809],{},[2701,3797,3798],{},[708,3799,3800],{},"variant",[2701,3802,3803,2642,3805,2642,3807],{},[708,3804,1233],{},[708,3806,1363],{},[708,3808,1372],{},[2701,3810,3811],{},[708,3812,1233],{},[2683,3814,3815,3819,3827],{},[2701,3816,3817],{},[708,3818,714],{},[2701,3820,3821,2642,3823,2642,3825],{},[708,3822,1389],{},[708,3824,1249],{},[708,3826,1406],{},[2701,3828,3829],{},[708,3830,1249],{},[2683,3832,3833,3837,3843],{},[2701,3834,3835],{},[708,3836,747],{},[2701,3838,3839,2642,3841],{},[708,3840,2172],{},[708,3842,2182],{},[2701,3844,3845],{},[708,3846,2182],{},[2683,3848,3849,3853,3859],{},[2701,3850,3851],{},[708,3852,1694],{},[2701,3854,3855,2642,3857],{},[708,3856,2172],{},[708,3858,2182],{},[2701,3860,3861],{},[708,3862,2182],{},[692,3864,3865],{},[754,3866,3867],{"href":132},"Learn more about recipes →",[688,3869,3871],{"id":3870},"best-practices","Best Practices",[700,3873,3874,3886,3895,3904,3915],{},[703,3875,3876,3882,3883,3885],{},[696,3877,3878,3879,3881],{},"Pass ",[708,3880,714],{}," to both parts",": Spread the same ",[708,3884,714],{}," to the container and the cells so the gap scales with the cell size.",[703,3887,3888,3894],{},[696,3889,3890,3891,3893],{},"Use ",[708,3892,1216],{}," for general forms",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[703,3896,3897,3900,3901,3903],{},[696,3898,3899],{},"Cap each cell at one character",": Set ",[708,3902,1124],{}," and wire up auto-advance so focus moves to the next cell as the user types.",[703,3905,3906,3909,3910,3134,3912,3914],{},[696,3907,3908],{},"Group and label the row",": Use ",[708,3911,3133],{},[708,3913,3137],{}," so the cells are announced as a single control.",[703,3916,3917,3920,3921,3923],{},[696,3918,3919],{},"Filter what you don't need",": If your forms use only the neutral color and default style, pass a ",[708,3922,3404],{}," option to reduce generated CSS.",[688,3925,3927],{"id":3926},"faq","FAQ",[3929,3930,3931,3937,3951,3970,3995],"accordion",{},[3932,3933,3936],"accordion-item",{"icon":3934,"label":3935},"i-lucide-circle-help","Does this recipe handle focus advancing and paste?","No — the recipe only styles the cells. Moving focus to the next cell as the user types, handling a pasted code across cells, and masking are interaction concerns you implement yourself or delegate to a headless component. Keeping behavior out of the recipe keeps it framework-agnostic and zero-runtime.",[3932,3938,694,3940,3942,3943,3945,3946,3948,3949,2065],{"icon":3934,"label":3939},"Why is the color light\u002Fdark\u002Fneutral instead of primary\u002Fsuccess\u002Ferror?",[708,3941,3781],{}," axis controls the cell surface, which reflects the form's surface rather than a status. This mirrors the ",[754,3944,452],{"href":453}," recipe's color model. For an error state, use the ",[708,3947,747],{}," state, which switches the border and focus ring to ",[708,3950,751],{},[3932,3952,3954,3955,3958,3959,3963,3964,3966,3967,3969],{"icon":3934,"label":3953},"How is the OTP cell related to the Input recipe?","The cell shares the Input recipe's color \u002F style \u002F state surface through an internal helper, so the two stay visually consistent. The difference is structural: an Input wraps a transparent field and uses a ",[708,3956,3957],{},":focus-within"," ring, while each OTP cell ",[3960,3961,3962],"em",{},"is"," the focusable ",[708,3965,726],{}," and uses a ",[708,3968,730],{}," ring.",[3932,3971,3973,3974,3976,3977,3980,3981,3984,3985,3988,3989,3991,3992,3994],{"icon":3934,"label":3972},"How do I render a fixed number of cells?","Render one ",[708,3975,726],{}," per character — iterate over a ",[708,3978,3979],{},"length"," (e.g. ",[708,3982,3983],{},"v-for=\"i in length\""," in Vue or ",[708,3986,3987],{},"Array.from({ length })"," in React) and apply the ",[708,3990,2324],{}," class to each. The ",[708,3993,2320],{}," container handles the row layout and spacing.",[3932,3996,3998,3999,4001],{"icon":3934,"label":3997},"How does filtering affect the recipe?","When you use the ",[708,4000,3404],{}," option, compound variants that reference filtered-out colors or styles are automatically removed, and default variants are adjusted if they reference a removed value — so the recipe stays consistent and only emits the CSS you use.",[4003,4004,4005],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":846,"searchDepth":887,"depth":887,"links":4007},[4008,4009,4010,4011,4014,4019,4022,4026,4027,4028,4032,4036,4037],{"id":690,"depth":887,"text":78},{"id":773,"depth":887,"text":774},{"id":818,"depth":887,"text":819},{"id":2636,"depth":887,"text":195,"children":4012},[4013],{"id":2670,"depth":916,"text":2671},{"id":2758,"depth":887,"text":2759,"children":4015},[4016,4017,4018],{"id":1233,"depth":916,"text":2768},{"id":1363,"depth":916,"text":2778},{"id":1372,"depth":916,"text":2789},{"id":2800,"depth":887,"text":2801,"children":4020},[4021],{"id":2817,"depth":916,"text":2818},{"id":2918,"depth":887,"text":342,"children":4023},[4024,4025],{"id":747,"depth":916,"text":2921},{"id":1694,"depth":916,"text":2939},{"id":2961,"depth":887,"text":2962},{"id":3122,"depth":887,"text":568},{"id":3207,"depth":887,"text":3208,"children":4029},[4030,4031],{"id":3211,"depth":916,"text":3212},{"id":3397,"depth":916,"text":3398},{"id":3575,"depth":887,"text":73,"children":4033},[4034,4035],{"id":3578,"depth":916,"text":3581},{"id":3742,"depth":916,"text":3745},{"id":3870,"depth":887,"text":3871},{"id":3926,"depth":887,"text":3927},"A one-time-password \u002F pin input — a row of single-character cells with light, dark, and neutral surface colors, default, soft, and ghost styles, three sizes, and invalid, disabled, and focus states through the recipe system.",null,{},{"icon":7},{"title":456,"description":4038},"153aXNLKpxI_yBxZMkUPuoKwBAf2ToZZivpSfZKjPZs",[4045,4047],{"title":452,"path":453,"stem":454,"description":4046,"icon":7,"children":-1},"A text-field component with a wrapper-owned visual surface, inline prefix\u002Fsuffix addons, and invalid\u002Fdisabled\u002Freadonly states. Supports light, dark, and neutral colors, default\u002Fsoft\u002Fghost styles, and three sizes through the recipe system.",{"title":460,"path":461,"stem":462,"description":4048,"icon":7,"children":-1},"A custom radio built on the native input, with a CSS dot indicator, checked, disabled, and focus states, light, dark, and neutral surface colors, and three sizes through the recipe system.",1781596340181]