[{"data":1,"prerenderedAt":4908},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-composables-input":543,"-docs-theme-components-composables-input-surround":4903},{"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,236,330,425,498],{"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],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpresets","docs\u002Ftheme\u002Fdesign-tokens\u002F01.presets","i-lucide-package",{"title":146,"icon":149,"defaultOpen":7,"path":175,"stem":176,"children":177,"page":7},"\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables",[178,182,186,190,194,198,202,206,220,224,228,232],{"title":179,"path":180,"stem":181,"icon":7},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F00.border-radiuses",{"title":183,"path":184,"stem":185,"icon":7},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F01.borders",{"title":187,"path":188,"stem":189,"icon":7},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F02.box-shadows",{"title":191,"path":192,"stem":193,"icon":7},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F03.breakpoints",{"title":195,"path":196,"stem":197,"icon":7},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F04.colors",{"title":199,"path":200,"stem":201,"icon":7},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F05.duration",{"title":203,"path":204,"stem":205,"icon":7},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F06.easing",{"title":207,"path":208,"stem":209,"children":210,"icon":7,"defaultOpen":7},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F07.fluid-design\u002F01.index",[211,212,216],{"title":78,"path":208,"stem":209},{"title":213,"path":214,"stem":215},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F07.fluid-design\u002F02.viewport",{"title":217,"path":218,"stem":219},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F07.fluid-design\u002F03.typography",{"title":221,"path":222,"stem":223,"icon":7},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F08.scales",{"title":225,"path":226,"stem":227,"icon":7},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F09.spacing",{"title":229,"path":230,"stem":231,"icon":7},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F10.typography",{"title":233,"path":234,"stem":235,"icon":7},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcomposables\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F02.composables\u002F11.z-index",{"title":237,"path":238,"stem":239,"children":240,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[241,242,246],{"title":78,"path":238,"stem":239,"icon":79},{"title":243,"path":244,"stem":245,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":146,"icon":149,"defaultOpen":7,"path":247,"stem":248,"children":249,"page":7},"\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables","docs\u002Ftheme\u002Felements\u002F02.composables",[250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326],{"title":251,"path":252,"stem":253,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F02.composables\u002F00.abbreviation",{"title":255,"path":256,"stem":257,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Faddress","docs\u002Ftheme\u002Felements\u002F02.composables\u002F01.address",{"title":259,"path":260,"stem":261,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.composables\u002F02.body",{"title":263,"path":264,"stem":265,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fcaption","docs\u002Ftheme\u002Felements\u002F02.composables\u002F03.caption",{"title":267,"path":268,"stem":269,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fcode","docs\u002Ftheme\u002Felements\u002F02.composables\u002F04.code",{"title":271,"path":272,"stem":273,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F02.composables\u002F05.definition-lists",{"title":275,"path":276,"stem":277,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Ffocus","docs\u002Ftheme\u002Felements\u002F02.composables\u002F06.focus",{"title":279,"path":280,"stem":281,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fheadings","docs\u002Ftheme\u002Felements\u002F02.composables\u002F07.headings",{"title":283,"path":284,"stem":285,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F02.composables\u002F08.horizontal-rule",{"title":287,"path":288,"stem":289,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fiframe","docs\u002Ftheme\u002Felements\u002F02.composables\u002F09.iframe",{"title":291,"path":292,"stem":293,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fimage","docs\u002Ftheme\u002Felements\u002F02.composables\u002F10.image",{"title":295,"path":296,"stem":297,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fkbd","docs\u002Ftheme\u002Felements\u002F02.composables\u002F11.kbd",{"title":299,"path":300,"stem":301,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Flegend","docs\u002Ftheme\u002Felements\u002F02.composables\u002F12.legend",{"title":303,"path":304,"stem":305,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Flinks","docs\u002Ftheme\u002Felements\u002F02.composables\u002F13.links",{"title":307,"path":308,"stem":309,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Flists","docs\u002Ftheme\u002Felements\u002F02.composables\u002F14.lists",{"title":311,"path":312,"stem":313,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fmark","docs\u002Ftheme\u002Felements\u002F02.composables\u002F15.mark",{"title":315,"path":316,"stem":317,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Foutput","docs\u002Ftheme\u002Felements\u002F02.composables\u002F16.output",{"title":319,"path":320,"stem":321,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F02.composables\u002F17.paragraphs",{"title":323,"path":324,"stem":325,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fselection","docs\u002Ftheme\u002Felements\u002F02.composables\u002F18.selection",{"title":327,"path":328,"stem":329,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fcomposables\u002Fsummary","docs\u002Ftheme\u002Felements\u002F02.composables\u002F19.summary",{"title":331,"path":332,"stem":333,"children":334,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[335,336],{"title":78,"path":332,"stem":333,"icon":79},{"title":146,"icon":149,"defaultOpen":337,"path":338,"stem":339,"children":340,"page":7},true,"\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables","docs\u002Ftheme\u002Fcomponents\u002F02.composables",[341,345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417,421],{"title":342,"path":343,"stem":344},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F01.badge",{"title":346,"path":347,"stem":348},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F02.button",{"title":350,"path":351,"stem":352},"Button Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fbutton-group","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F03.button-group",{"title":354,"path":355,"stem":356},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F04.callout",{"title":358,"path":359,"stem":360},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F05.card",{"title":362,"path":363,"stem":364},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F06.nav",{"title":366,"path":367,"stem":368},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F07.modal",{"title":370,"path":371,"stem":372},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F08.skeleton",{"title":374,"path":375,"stem":376},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F08.tooltip",{"title":378,"path":379,"stem":380},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F09.placeholder",{"title":382,"path":383,"stem":384},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F10.progress",{"title":386,"path":387,"stem":388},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F11.popover",{"title":390,"path":391,"stem":392},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F12.chip",{"title":394,"path":395,"stem":396},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F13.spinner",{"title":398,"path":399,"stem":400},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F14.dropdown",{"title":402,"path":403,"stem":404},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F14.hamburger-menu",{"title":406,"path":407,"stem":408},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F15.breadcrumb",{"title":410,"path":411,"stem":412},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F15.media",{"title":414,"path":415,"stem":416},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F15.page-hero",{"title":418,"path":419,"stem":420},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F15.pagination",{"title":422,"path":423,"stem":424},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcomposables\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F16.input",{"title":116,"path":426,"stem":427,"children":428,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[429,430,433],{"title":78,"path":426,"stem":427,"icon":79},{"title":170,"path":431,"stem":432,"icon":173},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fpresets","docs\u002Ftheme\u002Futilities\u002F01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":434,"stem":435,"children":436,"page":7},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables","docs\u002Ftheme\u002Futilities\u002F02.composables",[437,441,445,449,452,456,460,464,468,472,476,479,483,487,491,495],{"title":438,"path":439,"stem":440,"icon":7},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F00.accessibility",{"title":442,"path":443,"stem":444,"icon":7},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F01.animations",{"title":446,"path":447,"stem":448,"icon":7},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F02.backgrounds",{"title":183,"path":450,"stem":451,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Fborders","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F03.borders",{"title":453,"path":454,"stem":455,"icon":7},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Feffects","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F04.effects",{"title":457,"path":458,"stem":459,"icon":7},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F05.filters",{"title":461,"path":462,"stem":463,"icon":7},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F06.flexbox-grid",{"title":465,"path":466,"stem":467,"icon":7},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F07.interactivity",{"title":469,"path":470,"stem":471,"icon":7},"Layout","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Flayout","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F08.layout",{"title":473,"path":474,"stem":475,"icon":7},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F09.sizing",{"title":225,"path":477,"stem":478,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F10.spacing",{"title":480,"path":481,"stem":482,"icon":7},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F11.svg",{"title":484,"path":485,"stem":486,"icon":7},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Ftables","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F12.tables",{"title":488,"path":489,"stem":490,"icon":7},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F13.transforms",{"title":492,"path":493,"stem":494,"icon":7},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F14.transitions",{"title":229,"path":496,"stem":497,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fcomposables\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F02.composables\u002F15.typography",{"title":499,"path":500,"stem":501,"children":502,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[503,504,507],{"title":78,"path":500,"stem":501,"icon":79},{"title":170,"path":505,"stem":506,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpresets","docs\u002Ftheme\u002Fmodifiers\u002F01.presets",{"title":146,"icon":149,"defaultOpen":7,"path":508,"stem":509,"children":510,"page":7},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables","docs\u002Ftheme\u002Fmodifiers\u002F02.composables",[511,515,519,523,527,531,535,539],{"title":512,"path":513,"stem":514,"icon":7},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F00.aria-state",{"title":516,"path":517,"stem":518,"icon":7},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F01.directional",{"title":520,"path":521,"stem":522,"icon":7},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F02.form-state",{"title":524,"path":525,"stem":526,"icon":7},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F03.media-preferences",{"title":528,"path":529,"stem":530,"icon":7},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F04.other-state",{"title":532,"path":533,"stem":534,"icon":7},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F05.pseudo-elements",{"title":536,"path":537,"stem":538,"icon":7},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F06.pseudo-state",{"title":540,"path":541,"stem":542,"icon":7},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fcomposables\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F02.composables\u002F07.structural",{"id":544,"title":422,"body":545,"description":4898,"extension":1270,"links":4899,"meta":4900,"navigation":337,"path":423,"seo":4901,"stem":424,"__hash__":4902},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F02.composables\u002F16.input.md",{"type":546,"value":547,"toc":4857},"minimark",[548,552,560,617,625,632,636,639,677,681,2817,2820,2830,2835,2838,2843,2847,2914,2924,2928,2936,2939,2944,2947,2950,2953,2956,2959,2965,2968,2972,2981,2985,2989,3079,3089,3093,3110,3113,3119,3122,3125,3139,3142,3146,3152,3155,3169,3173,3199,3203,3206,3209,3212,3215,3219,3225,3228,3231,3234,3250,3254,3257,3366,3378,3600,3608,3611,3685,3689,3693,3696,3890,3894,3901,4070,4075,4078,4084,4093,4098,4219,4224,4345,4351,4357,4361,4393,4399,4404,4408,4440,4446,4454,4458,4490,4496,4499,4503,4541,4547,4550,4554,4592,4597,4601,4691,4695,4853],[549,550,78],"h2",{"id":551},"overview",[553,554,555,556,559],"p",{},"The ",[557,558,422],"strong",{}," is a text-field container used to capture single-line user input. It is composed of six recipe parts:",[561,562,563,577,585,593,601,609],"ul",{},[564,565,566,572,573,576],"li",{},[557,567,568],{},[569,570,571],"code",{},"useInputRecipe()"," — the wrapper that owns the visual field: border, background, padding, and the ",[569,574,575],{},":focus-within"," ring.",[564,578,579,584],{},[557,580,581],{},[569,582,583],{},"useInputPrefixRecipe()"," — an inline leading addon that sits inside the field, sharing its surface.",[564,586,587,592],{},[557,588,589],{},[569,590,591],{},"useInputSuffixRecipe()"," — an inline trailing addon that sits inside the field, sharing its surface.",[564,594,595,600],{},[557,596,597],{},[569,598,599],{},"useInputGroupRecipe()"," — a layout coordinator for attached blocks placed outside the field, flattening the border radii at the seams.",[564,602,603,608],{},[557,604,605],{},[569,606,607],{},"useInputPrependRecipe()"," — a transparent leading slot inside the group for buttons, selects, or other components.",[564,610,611,616],{},[557,612,613],{},[569,614,615],{},"useInputAppendRecipe()"," — a transparent trailing slot inside the group for buttons, selects, or other components.",[553,618,619,620,624],{},"Each composable creates a fully configured ",[621,622,623],"a",{"href":132},"recipe"," with color, variant, and size options — plus compound variants on the wrapper that handle every color-variant combination and the invalid, disabled, and readonly states automatically.",[553,626,627,628,631],{},"The Input recipes integrate directly with the default ",[621,629,630],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[549,633,635],{"id":634},"why-use-the-input-recipe","Why use the Input recipe?",[553,637,638],{},"The Input recipe helps you:",[561,640,641,647,653,659,665,671],{},[564,642,643,646],{},[557,644,645],{},"Ship faster with sensible defaults",": Get 3 colors, 3 visual styles, 3 sizes, and three native state axes out of the box with a single set of composable calls.",[564,648,649,652],{},[557,650,651],{},"Compose rich fields",": Inline prefix\u002Fsuffix addons and attached prepend\u002Fappend slots share the same size axis, so icons, currency symbols, and buttons stay aligned with the field.",[564,654,655,658],{},[557,656,657],{},"Maintain consistency",": Compound variants ensure every color-variant combination and every state follows the same design rules, including dark mode overrides.",[564,660,661,664],{},[557,662,663],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[564,666,667,670],{},[557,668,669],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, size, or state values at compile time.",[564,672,673,676],{},[557,674,675],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[549,678,680],{"id":679},"usage","Usage",[682,683,685,690,697,1081,1085,1118,2808,2812],"steps",{"level":684},"4",[686,687,689],"h4",{"id":688},"register-the-recipes","Register the recipes",[553,691,692,693,696],{},"Add the Input recipes to a local Styleframe instance. The global ",[569,694,695],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[698,699,701,974],"code-tree",{"default-value":700},"src\u002Fcomponents\u002Finput.styleframe.ts",[702,703,708],"pre",{"className":704,"code":705,"filename":700,"language":706,"meta":707,"style":707},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useInputRecipe,\n    useInputPrefixRecipe,\n    useInputSuffixRecipe,\n    useInputGroupRecipe,\n    useInputPrependRecipe,\n    useInputAppendRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst input = useInputRecipe(s);\nconst inputPrefix = useInputPrefixRecipe(s);\nconst inputSuffix = useInputSuffixRecipe(s);\nconst inputGroup = useInputGroupRecipe(s);\nconst inputPrepend = useInputPrependRecipe(s);\nconst inputAppend = useInputAppendRecipe(s);\n\nexport default s;\n","ts","",[569,709,710,746,754,763,771,779,787,795,803,820,826,847,852,870,887,904,921,938,955,960],{"__ignoreMap":707},[711,712,715,719,723,727,730,733,736,740,743],"span",{"class":713,"line":714},"line",1,[711,716,718],{"class":717},"s7zQu","import",[711,720,722],{"class":721},"sMK4o"," {",[711,724,726],{"class":725},"sTEyZ"," styleframe",[711,728,729],{"class":721}," }",[711,731,732],{"class":717}," from",[711,734,735],{"class":721}," '",[711,737,739],{"class":738},"sfazB","virtual:styleframe",[711,741,742],{"class":721},"'",[711,744,745],{"class":721},";\n",[711,747,749,751],{"class":713,"line":748},2,[711,750,718],{"class":717},[711,752,753],{"class":721}," {\n",[711,755,757,760],{"class":713,"line":756},3,[711,758,759],{"class":725},"    useInputRecipe",[711,761,762],{"class":721},",\n",[711,764,766,769],{"class":713,"line":765},4,[711,767,768],{"class":725},"    useInputPrefixRecipe",[711,770,762],{"class":721},[711,772,774,777],{"class":713,"line":773},5,[711,775,776],{"class":725},"    useInputSuffixRecipe",[711,778,762],{"class":721},[711,780,782,785],{"class":713,"line":781},6,[711,783,784],{"class":725},"    useInputGroupRecipe",[711,786,762],{"class":721},[711,788,790,793],{"class":713,"line":789},7,[711,791,792],{"class":725},"    useInputPrependRecipe",[711,794,762],{"class":721},[711,796,798,801],{"class":713,"line":797},8,[711,799,800],{"class":725},"    useInputAppendRecipe",[711,802,762],{"class":721},[711,804,806,809,811,813,816,818],{"class":713,"line":805},9,[711,807,808],{"class":721},"}",[711,810,732],{"class":717},[711,812,735],{"class":721},[711,814,815],{"class":738},"@styleframe\u002Ftheme",[711,817,742],{"class":721},[711,819,745],{"class":721},[711,821,823],{"class":713,"line":822},10,[711,824,825],{"emptyLinePlaceholder":337},"\n",[711,827,829,833,836,839,842,845],{"class":713,"line":828},11,[711,830,832],{"class":831},"spNyl","const",[711,834,835],{"class":725}," s ",[711,837,838],{"class":721},"=",[711,840,726],{"class":841},"s2Zo4",[711,843,844],{"class":725},"()",[711,846,745],{"class":721},[711,848,850],{"class":713,"line":849},12,[711,851,825],{"emptyLinePlaceholder":337},[711,853,855,857,860,862,865,868],{"class":713,"line":854},13,[711,856,832],{"class":831},[711,858,859],{"class":725}," input ",[711,861,838],{"class":721},[711,863,864],{"class":841}," useInputRecipe",[711,866,867],{"class":725},"(s)",[711,869,745],{"class":721},[711,871,873,875,878,880,883,885],{"class":713,"line":872},14,[711,874,832],{"class":831},[711,876,877],{"class":725}," inputPrefix ",[711,879,838],{"class":721},[711,881,882],{"class":841}," useInputPrefixRecipe",[711,884,867],{"class":725},[711,886,745],{"class":721},[711,888,890,892,895,897,900,902],{"class":713,"line":889},15,[711,891,832],{"class":831},[711,893,894],{"class":725}," inputSuffix ",[711,896,838],{"class":721},[711,898,899],{"class":841}," useInputSuffixRecipe",[711,901,867],{"class":725},[711,903,745],{"class":721},[711,905,907,909,912,914,917,919],{"class":713,"line":906},16,[711,908,832],{"class":831},[711,910,911],{"class":725}," inputGroup ",[711,913,838],{"class":721},[711,915,916],{"class":841}," useInputGroupRecipe",[711,918,867],{"class":725},[711,920,745],{"class":721},[711,922,924,926,929,931,934,936],{"class":713,"line":923},17,[711,925,832],{"class":831},[711,927,928],{"class":725}," inputPrepend ",[711,930,838],{"class":721},[711,932,933],{"class":841}," useInputPrependRecipe",[711,935,867],{"class":725},[711,937,745],{"class":721},[711,939,941,943,946,948,951,953],{"class":713,"line":940},18,[711,942,832],{"class":831},[711,944,945],{"class":725}," inputAppend ",[711,947,838],{"class":721},[711,949,950],{"class":841}," useInputAppendRecipe",[711,952,867],{"class":725},[711,954,745],{"class":721},[711,956,958],{"class":713,"line":957},19,[711,959,825],{"emptyLinePlaceholder":337},[711,961,963,966,969,972],{"class":713,"line":962},20,[711,964,965],{"class":717},"export",[711,967,968],{"class":717}," default",[711,970,971],{"class":725}," s",[711,973,745],{"class":721},[702,975,977],{"className":704,"code":976,"filename":695,"language":706,"meta":707,"style":707},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[569,978,979,1000,1027,1031,1045,1049,1058,1067,1071],{"__ignoreMap":707},[711,980,981,983,985,987,989,991,993,996,998],{"class":713,"line":714},[711,982,718],{"class":717},[711,984,722],{"class":721},[711,986,726],{"class":725},[711,988,729],{"class":721},[711,990,732],{"class":717},[711,992,735],{"class":721},[711,994,995],{"class":738},"styleframe",[711,997,742],{"class":721},[711,999,745],{"class":721},[711,1001,1002,1004,1006,1009,1012,1015,1017,1019,1021,1023,1025],{"class":713,"line":748},[711,1003,718],{"class":717},[711,1005,722],{"class":721},[711,1007,1008],{"class":725}," useDesignTokensPreset",[711,1010,1011],{"class":721},",",[711,1013,1014],{"class":725}," useUtilitiesPreset",[711,1016,729],{"class":721},[711,1018,732],{"class":717},[711,1020,735],{"class":721},[711,1022,815],{"class":738},[711,1024,742],{"class":721},[711,1026,745],{"class":721},[711,1028,1029],{"class":713,"line":756},[711,1030,825],{"emptyLinePlaceholder":337},[711,1032,1033,1035,1037,1039,1041,1043],{"class":713,"line":765},[711,1034,832],{"class":831},[711,1036,835],{"class":725},[711,1038,838],{"class":721},[711,1040,726],{"class":841},[711,1042,844],{"class":725},[711,1044,745],{"class":721},[711,1046,1047],{"class":713,"line":773},[711,1048,825],{"emptyLinePlaceholder":337},[711,1050,1051,1054,1056],{"class":713,"line":781},[711,1052,1053],{"class":841},"useDesignTokensPreset",[711,1055,867],{"class":725},[711,1057,745],{"class":721},[711,1059,1060,1063,1065],{"class":713,"line":789},[711,1061,1062],{"class":841},"useUtilitiesPreset",[711,1064,867],{"class":725},[711,1066,745],{"class":721},[711,1068,1069],{"class":713,"line":797},[711,1070,825],{"emptyLinePlaceholder":337},[711,1072,1073,1075,1077,1079],{"class":713,"line":805},[711,1074,965],{"class":717},[711,1076,968],{"class":717},[711,1078,971],{"class":725},[711,1080,745],{"class":721},[686,1082,1084],{"id":1083},"build-the-component","Build the component",[553,1086,1087,1088,1091,1092,1095,1096,1099,1100,1103,1104,1107,1108,1091,1111,1095,1114,1117],{},"Import the ",[569,1089,1090],{},"input",", ",[569,1093,1094],{},"inputPrefix",", and ",[569,1097,1098],{},"inputSuffix"," runtime functions from the virtual module. The wrapper paints the visual field and the nested ",[569,1101,1102],{},".input-field"," is a transparent native ",[569,1105,1106],{},"\u003Cinput>"," that inherits typography. The ",[569,1109,1110],{},"invalid",[569,1112,1113],{},"disabled",[569,1115,1116],{},"readonly"," axes accept booleans directly:",[1119,1120,1121,1863,2438],"framework-switcher",{},[1122,1123,1124],"template",{"v-slot:vue":707},[702,1125,1130],{"className":1126,"code":1127,"filename":1128,"language":1129,"meta":707,"style":707},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed, useSlots } from \"vue\";\nimport { input, inputPrefix, inputSuffix } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    invalid = false,\n    disabled = false,\n    readonly = false,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    invalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n}>();\n\nconst slots = useSlots();\n\nconst wrapper = computed(() =>\n    input({ color, variant, size, invalid, disabled, readonly }),\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cspan :class=\"wrapper\">\n        \u003Cspan v-if=\"slots.prefix\" :class=\"inputPrefix({ size })\">\n            \u003Cslot name=\"prefix\" \u002F>\n        \u003C\u002Fspan>\n        \u003Cinput\n            class=\"input-field\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"invalid\"\n        \u002F>\n        \u003Cspan v-if=\"slots.suffix\" :class=\"inputSuffix({ size })\">\n            \u003Cslot name=\"suffix\" \u002F>\n        \u003C\u002Fspan>\n    \u003C\u002Fspan>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FInput.vue","vue",[569,1131,1132,1159,1186,1217,1221,1227,1243,1259,1275,1288,1299,1310,1323,1358,1391,1424,1437,1448,1459,1468,1472,1488,1493,1513,1559,1566,1576,1581,1590,1615,1664,1687,1697,1705,1721,1737,1752,1768,1774,1816,1835,1844,1854],{"__ignoreMap":707},[711,1133,1134,1137,1141,1144,1147,1149,1152,1154,1156],{"class":713,"line":714},[711,1135,1136],{"class":721},"\u003C",[711,1138,1140],{"class":1139},"swJcz","script",[711,1142,1143],{"class":831}," setup",[711,1145,1146],{"class":831}," lang",[711,1148,838],{"class":721},[711,1150,1151],{"class":721},"\"",[711,1153,706],{"class":738},[711,1155,1151],{"class":721},[711,1157,1158],{"class":721},">\n",[711,1160,1161,1163,1165,1168,1170,1173,1175,1177,1180,1182,1184],{"class":713,"line":748},[711,1162,718],{"class":717},[711,1164,722],{"class":721},[711,1166,1167],{"class":725}," computed",[711,1169,1011],{"class":721},[711,1171,1172],{"class":725}," useSlots",[711,1174,729],{"class":721},[711,1176,732],{"class":717},[711,1178,1179],{"class":721}," \"",[711,1181,1129],{"class":738},[711,1183,1151],{"class":721},[711,1185,745],{"class":721},[711,1187,1188,1190,1192,1195,1197,1200,1202,1205,1207,1209,1211,1213,1215],{"class":713,"line":756},[711,1189,718],{"class":717},[711,1191,722],{"class":721},[711,1193,1194],{"class":725}," input",[711,1196,1011],{"class":721},[711,1198,1199],{"class":725}," inputPrefix",[711,1201,1011],{"class":721},[711,1203,1204],{"class":725}," inputSuffix",[711,1206,729],{"class":721},[711,1208,732],{"class":717},[711,1210,1179],{"class":721},[711,1212,739],{"class":738},[711,1214,1151],{"class":721},[711,1216,745],{"class":721},[711,1218,1219],{"class":713,"line":765},[711,1220,825],{"emptyLinePlaceholder":337},[711,1222,1223,1225],{"class":713,"line":773},[711,1224,832],{"class":831},[711,1226,753],{"class":721},[711,1228,1229,1232,1234,1236,1239,1241],{"class":713,"line":781},[711,1230,1231],{"class":725},"    color ",[711,1233,838],{"class":721},[711,1235,1179],{"class":721},[711,1237,1238],{"class":738},"neutral",[711,1240,1151],{"class":721},[711,1242,762],{"class":721},[711,1244,1245,1248,1250,1252,1255,1257],{"class":713,"line":789},[711,1246,1247],{"class":725},"    variant ",[711,1249,838],{"class":721},[711,1251,1179],{"class":721},[711,1253,1254],{"class":738},"default",[711,1256,1151],{"class":721},[711,1258,762],{"class":721},[711,1260,1261,1264,1266,1268,1271,1273],{"class":713,"line":797},[711,1262,1263],{"class":725},"    size ",[711,1265,838],{"class":721},[711,1267,1179],{"class":721},[711,1269,1270],{"class":738},"md",[711,1272,1151],{"class":721},[711,1274,762],{"class":721},[711,1276,1277,1280,1282,1286],{"class":713,"line":805},[711,1278,1279],{"class":725},"    invalid ",[711,1281,838],{"class":721},[711,1283,1285],{"class":1284},"sfNiH"," false",[711,1287,762],{"class":721},[711,1289,1290,1293,1295,1297],{"class":713,"line":822},[711,1291,1292],{"class":725},"    disabled ",[711,1294,838],{"class":721},[711,1296,1285],{"class":1284},[711,1298,762],{"class":721},[711,1300,1301,1304,1306,1308],{"class":713,"line":828},[711,1302,1303],{"class":725},"    readonly ",[711,1305,838],{"class":721},[711,1307,1285],{"class":1284},[711,1309,762],{"class":721},[711,1311,1312,1314,1317,1320],{"class":713,"line":849},[711,1313,808],{"class":721},[711,1315,1316],{"class":721}," =",[711,1318,1319],{"class":841}," defineProps",[711,1321,1322],{"class":721},"\u003C{\n",[711,1324,1325,1328,1331,1333,1336,1338,1341,1343,1346,1348,1350,1352,1354,1356],{"class":713,"line":854},[711,1326,1327],{"class":1139},"    color",[711,1329,1330],{"class":721},"?:",[711,1332,1179],{"class":721},[711,1334,1335],{"class":738},"light",[711,1337,1151],{"class":721},[711,1339,1340],{"class":721}," |",[711,1342,1179],{"class":721},[711,1344,1345],{"class":738},"dark",[711,1347,1151],{"class":721},[711,1349,1340],{"class":721},[711,1351,1179],{"class":721},[711,1353,1238],{"class":738},[711,1355,1151],{"class":721},[711,1357,745],{"class":721},[711,1359,1360,1363,1365,1367,1369,1371,1373,1375,1378,1380,1382,1384,1387,1389],{"class":713,"line":872},[711,1361,1362],{"class":1139},"    variant",[711,1364,1330],{"class":721},[711,1366,1179],{"class":721},[711,1368,1254],{"class":738},[711,1370,1151],{"class":721},[711,1372,1340],{"class":721},[711,1374,1179],{"class":721},[711,1376,1377],{"class":738},"soft",[711,1379,1151],{"class":721},[711,1381,1340],{"class":721},[711,1383,1179],{"class":721},[711,1385,1386],{"class":738},"ghost",[711,1388,1151],{"class":721},[711,1390,745],{"class":721},[711,1392,1393,1396,1398,1400,1403,1405,1407,1409,1411,1413,1415,1417,1420,1422],{"class":713,"line":889},[711,1394,1395],{"class":1139},"    size",[711,1397,1330],{"class":721},[711,1399,1179],{"class":721},[711,1401,1402],{"class":738},"sm",[711,1404,1151],{"class":721},[711,1406,1340],{"class":721},[711,1408,1179],{"class":721},[711,1410,1270],{"class":738},[711,1412,1151],{"class":721},[711,1414,1340],{"class":721},[711,1416,1179],{"class":721},[711,1418,1419],{"class":738},"lg",[711,1421,1151],{"class":721},[711,1423,745],{"class":721},[711,1425,1426,1429,1431,1435],{"class":713,"line":906},[711,1427,1428],{"class":1139},"    invalid",[711,1430,1330],{"class":721},[711,1432,1434],{"class":1433},"sBMFI"," boolean",[711,1436,745],{"class":721},[711,1438,1439,1442,1444,1446],{"class":713,"line":923},[711,1440,1441],{"class":1139},"    disabled",[711,1443,1330],{"class":721},[711,1445,1434],{"class":1433},[711,1447,745],{"class":721},[711,1449,1450,1453,1455,1457],{"class":713,"line":940},[711,1451,1452],{"class":1139},"    readonly",[711,1454,1330],{"class":721},[711,1456,1434],{"class":1433},[711,1458,745],{"class":721},[711,1460,1461,1464,1466],{"class":713,"line":957},[711,1462,1463],{"class":721},"}>",[711,1465,844],{"class":725},[711,1467,745],{"class":721},[711,1469,1470],{"class":713,"line":962},[711,1471,825],{"emptyLinePlaceholder":337},[711,1473,1475,1477,1480,1482,1484,1486],{"class":713,"line":1474},21,[711,1476,832],{"class":831},[711,1478,1479],{"class":725}," slots ",[711,1481,838],{"class":721},[711,1483,1172],{"class":841},[711,1485,844],{"class":725},[711,1487,745],{"class":721},[711,1489,1491],{"class":713,"line":1490},22,[711,1492,825],{"emptyLinePlaceholder":337},[711,1494,1496,1498,1501,1503,1505,1508,1510],{"class":713,"line":1495},23,[711,1497,832],{"class":831},[711,1499,1500],{"class":725}," wrapper ",[711,1502,838],{"class":721},[711,1504,1167],{"class":841},[711,1506,1507],{"class":725},"(",[711,1509,844],{"class":721},[711,1511,1512],{"class":831}," =>\n",[711,1514,1516,1519,1521,1524,1527,1529,1532,1534,1537,1539,1542,1544,1547,1549,1552,1554,1557],{"class":713,"line":1515},24,[711,1517,1518],{"class":841},"    input",[711,1520,1507],{"class":725},[711,1522,1523],{"class":721},"{",[711,1525,1526],{"class":725}," color",[711,1528,1011],{"class":721},[711,1530,1531],{"class":725}," variant",[711,1533,1011],{"class":721},[711,1535,1536],{"class":725}," size",[711,1538,1011],{"class":721},[711,1540,1541],{"class":725}," invalid",[711,1543,1011],{"class":721},[711,1545,1546],{"class":725}," disabled",[711,1548,1011],{"class":721},[711,1550,1551],{"class":725}," readonly ",[711,1553,808],{"class":721},[711,1555,1556],{"class":725},")",[711,1558,762],{"class":721},[711,1560,1562,1564],{"class":713,"line":1561},25,[711,1563,1556],{"class":725},[711,1565,745],{"class":721},[711,1567,1569,1572,1574],{"class":713,"line":1568},26,[711,1570,1571],{"class":721},"\u003C\u002F",[711,1573,1140],{"class":1139},[711,1575,1158],{"class":721},[711,1577,1579],{"class":713,"line":1578},27,[711,1580,825],{"emptyLinePlaceholder":337},[711,1582,1584,1586,1588],{"class":713,"line":1583},28,[711,1585,1136],{"class":721},[711,1587,1122],{"class":1139},[711,1589,1158],{"class":721},[711,1591,1593,1596,1598,1601,1604,1606,1608,1611,1613],{"class":713,"line":1592},29,[711,1594,1595],{"class":721},"    \u003C",[711,1597,711],{"class":1139},[711,1599,1600],{"class":721}," :",[711,1602,1603],{"class":831},"class",[711,1605,838],{"class":721},[711,1607,1151],{"class":721},[711,1609,1610],{"class":725},"wrapper",[711,1612,1151],{"class":721},[711,1614,1158],{"class":721},[711,1616,1618,1621,1623,1626,1628,1630,1633,1636,1639,1641,1643,1645,1647,1649,1651,1654,1657,1660,1662],{"class":713,"line":1617},30,[711,1619,1620],{"class":721},"        \u003C",[711,1622,711],{"class":1139},[711,1624,1625],{"class":717}," v-if",[711,1627,838],{"class":721},[711,1629,1151],{"class":721},[711,1631,1632],{"class":725},"slots",[711,1634,1635],{"class":721},".",[711,1637,1638],{"class":725},"prefix",[711,1640,1151],{"class":721},[711,1642,1600],{"class":721},[711,1644,1603],{"class":831},[711,1646,838],{"class":721},[711,1648,1151],{"class":721},[711,1650,1094],{"class":841},[711,1652,1653],{"class":721},"({ ",[711,1655,1656],{"class":725},"size",[711,1658,1659],{"class":721}," })",[711,1661,1151],{"class":721},[711,1663,1158],{"class":721},[711,1665,1667,1670,1673,1676,1678,1680,1682,1684],{"class":713,"line":1666},31,[711,1668,1669],{"class":721},"            \u003C",[711,1671,1672],{"class":1139},"slot",[711,1674,1675],{"class":831}," name",[711,1677,838],{"class":721},[711,1679,1151],{"class":721},[711,1681,1638],{"class":738},[711,1683,1151],{"class":721},[711,1685,1686],{"class":721}," \u002F>\n",[711,1688,1690,1693,1695],{"class":713,"line":1689},32,[711,1691,1692],{"class":721},"        \u003C\u002F",[711,1694,711],{"class":1139},[711,1696,1158],{"class":721},[711,1698,1700,1702],{"class":713,"line":1699},33,[711,1701,1620],{"class":721},[711,1703,1704],{"class":1139},"input\n",[711,1706,1708,1711,1713,1715,1718],{"class":713,"line":1707},34,[711,1709,1710],{"class":831},"            class",[711,1712,838],{"class":721},[711,1714,1151],{"class":721},[711,1716,1717],{"class":738},"input-field",[711,1719,1720],{"class":721},"\"\n",[711,1722,1724,1727,1729,1731,1733,1735],{"class":713,"line":1723},35,[711,1725,1726],{"class":721},"            :",[711,1728,1113],{"class":831},[711,1730,838],{"class":721},[711,1732,1151],{"class":721},[711,1734,1113],{"class":725},[711,1736,1720],{"class":721},[711,1738,1740,1742,1744,1746,1748,1750],{"class":713,"line":1739},36,[711,1741,1726],{"class":721},[711,1743,1116],{"class":831},[711,1745,838],{"class":721},[711,1747,1151],{"class":721},[711,1749,1116],{"class":725},[711,1751,1720],{"class":721},[711,1753,1755,1757,1760,1762,1764,1766],{"class":713,"line":1754},37,[711,1756,1726],{"class":721},[711,1758,1759],{"class":831},"aria-invalid",[711,1761,838],{"class":721},[711,1763,1151],{"class":721},[711,1765,1110],{"class":725},[711,1767,1720],{"class":721},[711,1769,1771],{"class":713,"line":1770},38,[711,1772,1773],{"class":721},"        \u002F>\n",[711,1775,1777,1779,1781,1783,1785,1787,1789,1791,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814],{"class":713,"line":1776},39,[711,1778,1620],{"class":721},[711,1780,711],{"class":1139},[711,1782,1625],{"class":717},[711,1784,838],{"class":721},[711,1786,1151],{"class":721},[711,1788,1632],{"class":725},[711,1790,1635],{"class":721},[711,1792,1793],{"class":725},"suffix",[711,1795,1151],{"class":721},[711,1797,1600],{"class":721},[711,1799,1603],{"class":831},[711,1801,838],{"class":721},[711,1803,1151],{"class":721},[711,1805,1098],{"class":841},[711,1807,1653],{"class":721},[711,1809,1656],{"class":725},[711,1811,1659],{"class":721},[711,1813,1151],{"class":721},[711,1815,1158],{"class":721},[711,1817,1819,1821,1823,1825,1827,1829,1831,1833],{"class":713,"line":1818},40,[711,1820,1669],{"class":721},[711,1822,1672],{"class":1139},[711,1824,1675],{"class":831},[711,1826,838],{"class":721},[711,1828,1151],{"class":721},[711,1830,1793],{"class":738},[711,1832,1151],{"class":721},[711,1834,1686],{"class":721},[711,1836,1838,1840,1842],{"class":713,"line":1837},41,[711,1839,1692],{"class":721},[711,1841,711],{"class":1139},[711,1843,1158],{"class":721},[711,1845,1847,1850,1852],{"class":713,"line":1846},42,[711,1848,1849],{"class":721},"    \u003C\u002F",[711,1851,711],{"class":1139},[711,1853,1158],{"class":721},[711,1855,1857,1859,1861],{"class":713,"line":1856},43,[711,1858,1571],{"class":721},[711,1860,1122],{"class":1139},[711,1862,1158],{"class":721},[1122,1864,1865],{"v-slot:react":707},[702,1866,1869],{"className":704,"code":1867,"filename":1868,"language":706,"meta":707,"style":707},"import { input, inputPrefix, inputSuffix } from \"virtual:styleframe\";\n\ninterface InputProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    invalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    prefix?: React.ReactNode;\n    suffix?: React.ReactNode;\n}\n\nexport function Input({\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    invalid = false,\n    disabled = false,\n    readonly = false,\n    prefix,\n    suffix,\n    ...inputProps\n}: InputProps & React.InputHTMLAttributes\u003CHTMLInputElement>) {\n    const wrapper = input({ color, variant, size, invalid, disabled, readonly });\n\n    return (\n        \u003Cspan className={wrapper}>\n            {prefix && \u003Cspan className={inputPrefix({ size })}>{prefix}\u003C\u002Fspan>}\n            \u003Cinput\n                className=\"input-field\"\n                disabled={disabled}\n                readOnly={readonly}\n                aria-invalid={invalid}\n                {...inputProps}\n            \u002F>\n            {suffix && \u003Cspan className={inputSuffix({ size })}>{suffix}\u003C\u002Fspan>}\n        \u003C\u002Fspan>\n    );\n}\n","src\u002Fcomponents\u002FInput.tsx",[569,1870,1871,1899,1903,1913,1943,1973,2003,2013,2023,2033,2050,2065,2070,2074,2087,2102,2116,2130,2140,2150,2160,2166,2172,2180,2207,2252,2256,2264,2281,2317,2323,2336,2347,2358,2374,2384,2389,2419,2427,2434],{"__ignoreMap":707},[711,1872,1873,1875,1877,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897],{"class":713,"line":714},[711,1874,718],{"class":717},[711,1876,722],{"class":721},[711,1878,1194],{"class":725},[711,1880,1011],{"class":721},[711,1882,1199],{"class":725},[711,1884,1011],{"class":721},[711,1886,1204],{"class":725},[711,1888,729],{"class":721},[711,1890,732],{"class":717},[711,1892,1179],{"class":721},[711,1894,739],{"class":738},[711,1896,1151],{"class":721},[711,1898,745],{"class":721},[711,1900,1901],{"class":713,"line":748},[711,1902,825],{"emptyLinePlaceholder":337},[711,1904,1905,1908,1911],{"class":713,"line":756},[711,1906,1907],{"class":831},"interface",[711,1909,1910],{"class":1433}," InputProps",[711,1912,753],{"class":721},[711,1914,1915,1917,1919,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939,1941],{"class":713,"line":765},[711,1916,1327],{"class":1139},[711,1918,1330],{"class":721},[711,1920,1179],{"class":721},[711,1922,1335],{"class":738},[711,1924,1151],{"class":721},[711,1926,1340],{"class":721},[711,1928,1179],{"class":721},[711,1930,1345],{"class":738},[711,1932,1151],{"class":721},[711,1934,1340],{"class":721},[711,1936,1179],{"class":721},[711,1938,1238],{"class":738},[711,1940,1151],{"class":721},[711,1942,745],{"class":721},[711,1944,1945,1947,1949,1951,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971],{"class":713,"line":773},[711,1946,1362],{"class":1139},[711,1948,1330],{"class":721},[711,1950,1179],{"class":721},[711,1952,1254],{"class":738},[711,1954,1151],{"class":721},[711,1956,1340],{"class":721},[711,1958,1179],{"class":721},[711,1960,1377],{"class":738},[711,1962,1151],{"class":721},[711,1964,1340],{"class":721},[711,1966,1179],{"class":721},[711,1968,1386],{"class":738},[711,1970,1151],{"class":721},[711,1972,745],{"class":721},[711,1974,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001],{"class":713,"line":781},[711,1976,1395],{"class":1139},[711,1978,1330],{"class":721},[711,1980,1179],{"class":721},[711,1982,1402],{"class":738},[711,1984,1151],{"class":721},[711,1986,1340],{"class":721},[711,1988,1179],{"class":721},[711,1990,1270],{"class":738},[711,1992,1151],{"class":721},[711,1994,1340],{"class":721},[711,1996,1179],{"class":721},[711,1998,1419],{"class":738},[711,2000,1151],{"class":721},[711,2002,745],{"class":721},[711,2004,2005,2007,2009,2011],{"class":713,"line":789},[711,2006,1428],{"class":1139},[711,2008,1330],{"class":721},[711,2010,1434],{"class":1433},[711,2012,745],{"class":721},[711,2014,2015,2017,2019,2021],{"class":713,"line":797},[711,2016,1441],{"class":1139},[711,2018,1330],{"class":721},[711,2020,1434],{"class":1433},[711,2022,745],{"class":721},[711,2024,2025,2027,2029,2031],{"class":713,"line":805},[711,2026,1452],{"class":1139},[711,2028,1330],{"class":721},[711,2030,1434],{"class":1433},[711,2032,745],{"class":721},[711,2034,2035,2038,2040,2043,2045,2048],{"class":713,"line":822},[711,2036,2037],{"class":1139},"    prefix",[711,2039,1330],{"class":721},[711,2041,2042],{"class":1433}," React",[711,2044,1635],{"class":721},[711,2046,2047],{"class":1433},"ReactNode",[711,2049,745],{"class":721},[711,2051,2052,2055,2057,2059,2061,2063],{"class":713,"line":828},[711,2053,2054],{"class":1139},"    suffix",[711,2056,1330],{"class":721},[711,2058,2042],{"class":1433},[711,2060,1635],{"class":721},[711,2062,2047],{"class":1433},[711,2064,745],{"class":721},[711,2066,2067],{"class":713,"line":849},[711,2068,2069],{"class":721},"}\n",[711,2071,2072],{"class":713,"line":854},[711,2073,825],{"emptyLinePlaceholder":337},[711,2075,2076,2078,2081,2084],{"class":713,"line":872},[711,2077,965],{"class":717},[711,2079,2080],{"class":831}," function",[711,2082,2083],{"class":841}," Input",[711,2085,2086],{"class":721},"({\n",[711,2088,2089,2092,2094,2096,2098,2100],{"class":713,"line":889},[711,2090,1327],{"class":2091},"sHdIc",[711,2093,1316],{"class":721},[711,2095,1179],{"class":721},[711,2097,1238],{"class":738},[711,2099,1151],{"class":721},[711,2101,762],{"class":721},[711,2103,2104,2106,2108,2110,2112,2114],{"class":713,"line":906},[711,2105,1362],{"class":2091},[711,2107,1316],{"class":721},[711,2109,1179],{"class":721},[711,2111,1254],{"class":738},[711,2113,1151],{"class":721},[711,2115,762],{"class":721},[711,2117,2118,2120,2122,2124,2126,2128],{"class":713,"line":923},[711,2119,1395],{"class":2091},[711,2121,1316],{"class":721},[711,2123,1179],{"class":721},[711,2125,1270],{"class":738},[711,2127,1151],{"class":721},[711,2129,762],{"class":721},[711,2131,2132,2134,2136,2138],{"class":713,"line":940},[711,2133,1428],{"class":2091},[711,2135,1316],{"class":721},[711,2137,1285],{"class":1284},[711,2139,762],{"class":721},[711,2141,2142,2144,2146,2148],{"class":713,"line":957},[711,2143,1441],{"class":2091},[711,2145,1316],{"class":721},[711,2147,1285],{"class":1284},[711,2149,762],{"class":721},[711,2151,2152,2154,2156,2158],{"class":713,"line":962},[711,2153,1452],{"class":2091},[711,2155,1316],{"class":721},[711,2157,1285],{"class":1284},[711,2159,762],{"class":721},[711,2161,2162,2164],{"class":713,"line":1474},[711,2163,2037],{"class":2091},[711,2165,762],{"class":721},[711,2167,2168,2170],{"class":713,"line":1490},[711,2169,2054],{"class":2091},[711,2171,762],{"class":721},[711,2173,2174,2177],{"class":713,"line":1495},[711,2175,2176],{"class":721},"    ...",[711,2178,2179],{"class":2091},"inputProps\n",[711,2181,2182,2185,2187,2190,2192,2194,2197,2199,2202,2205],{"class":713,"line":1515},[711,2183,2184],{"class":721},"}:",[711,2186,1910],{"class":1433},[711,2188,2189],{"class":721}," &",[711,2191,2042],{"class":1433},[711,2193,1635],{"class":721},[711,2195,2196],{"class":1433},"InputHTMLAttributes",[711,2198,1136],{"class":721},[711,2200,2201],{"class":1433},"HTMLInputElement",[711,2203,2204],{"class":721},">)",[711,2206,753],{"class":721},[711,2208,2209,2212,2215,2217,2219,2221,2223,2225,2227,2229,2231,2233,2235,2237,2239,2241,2243,2246,2248,2250],{"class":713,"line":1561},[711,2210,2211],{"class":831},"    const",[711,2213,2214],{"class":725}," wrapper",[711,2216,1316],{"class":721},[711,2218,1194],{"class":841},[711,2220,1507],{"class":1139},[711,2222,1523],{"class":721},[711,2224,1526],{"class":725},[711,2226,1011],{"class":721},[711,2228,1531],{"class":725},[711,2230,1011],{"class":721},[711,2232,1536],{"class":725},[711,2234,1011],{"class":721},[711,2236,1541],{"class":725},[711,2238,1011],{"class":721},[711,2240,1546],{"class":725},[711,2242,1011],{"class":721},[711,2244,2245],{"class":725}," readonly",[711,2247,729],{"class":721},[711,2249,1556],{"class":1139},[711,2251,745],{"class":721},[711,2253,2254],{"class":713,"line":1568},[711,2255,825],{"emptyLinePlaceholder":337},[711,2257,2258,2261],{"class":713,"line":1578},[711,2259,2260],{"class":717},"    return",[711,2262,2263],{"class":1139}," (\n",[711,2265,2266,2268,2270,2273,2276,2278],{"class":713,"line":1583},[711,2267,1620],{"class":721},[711,2269,711],{"class":725},[711,2271,2272],{"class":725}," className",[711,2274,2275],{"class":721},"={",[711,2277,1610],{"class":725},[711,2279,2280],{"class":721},"}>\n",[711,2282,2283,2286,2288,2291,2293,2295,2297,2299,2302,2304,2307,2309,2312,2314],{"class":713,"line":1592},[711,2284,2285],{"class":721},"            {",[711,2287,1638],{"class":2091},[711,2289,2290],{"class":1139}," && \u003C",[711,2292,711],{"class":2091},[711,2294,2272],{"class":2091},[711,2296,2275],{"class":721},[711,2298,1094],{"class":1139},[711,2300,2301],{"class":721},"({",[711,2303,1536],{"class":2091},[711,2305,2306],{"class":721}," })}>{",[711,2308,1638],{"class":725},[711,2310,2311],{"class":721},"}\u003C\u002F",[711,2313,711],{"class":725},[711,2315,2316],{"class":721},">}\n",[711,2318,2319,2321],{"class":713,"line":1617},[711,2320,1669],{"class":721},[711,2322,1704],{"class":2091},[711,2324,2325,2328,2330,2332,2334],{"class":713,"line":1666},[711,2326,2327],{"class":725},"                className",[711,2329,838],{"class":721},[711,2331,1151],{"class":721},[711,2333,1717],{"class":738},[711,2335,1720],{"class":721},[711,2337,2338,2341,2343,2345],{"class":713,"line":1689},[711,2339,2340],{"class":725},"                disabled",[711,2342,2275],{"class":721},[711,2344,1113],{"class":725},[711,2346,2069],{"class":721},[711,2348,2349,2352,2354,2356],{"class":713,"line":1699},[711,2350,2351],{"class":725},"                readOnly",[711,2353,2275],{"class":721},[711,2355,1116],{"class":725},[711,2357,2069],{"class":721},[711,2359,2360,2363,2366,2368,2370,2372],{"class":713,"line":1707},[711,2361,2362],{"class":725},"                aria",[711,2364,2365],{"class":721},"-",[711,2367,1110],{"class":725},[711,2369,2275],{"class":721},[711,2371,1110],{"class":725},[711,2373,2069],{"class":721},[711,2375,2376,2379,2382],{"class":713,"line":1723},[711,2377,2378],{"class":721},"                {...",[711,2380,2381],{"class":2091},"inputProps",[711,2383,2069],{"class":721},[711,2385,2386],{"class":713,"line":1739},[711,2387,2388],{"class":721},"            \u002F>\n",[711,2390,2391,2393,2395,2397,2399,2401,2403,2405,2407,2409,2411,2413,2415,2417],{"class":713,"line":1754},[711,2392,2285],{"class":721},[711,2394,1793],{"class":2091},[711,2396,2290],{"class":1139},[711,2398,711],{"class":2091},[711,2400,2272],{"class":2091},[711,2402,2275],{"class":721},[711,2404,1098],{"class":1139},[711,2406,2301],{"class":721},[711,2408,1536],{"class":2091},[711,2410,2306],{"class":721},[711,2412,1793],{"class":725},[711,2414,2311],{"class":721},[711,2416,711],{"class":725},[711,2418,2316],{"class":721},[711,2420,2421,2423,2425],{"class":713,"line":1770},[711,2422,1692],{"class":721},[711,2424,711],{"class":725},[711,2426,1158],{"class":721},[711,2428,2429,2432],{"class":713,"line":1776},[711,2430,2431],{"class":1139},"    )",[711,2433,745],{"class":721},[711,2435,2436],{"class":713,"line":1818},[711,2437,2069],{"class":721},[1122,2439,2440,2452,2673],{"v-slot:other":707},[553,2441,555,2442,1091,2445,1095,2448,2451],{},[569,2443,2444],{},"input()",[569,2446,2447],{},"inputPrefix()",[569,2449,2450],{},"inputSuffix()"," runtimes each return a class string. Apply the result however your framework binds classes:",[702,2453,2456],{"className":704,"code":2454,"filename":2455,"language":706,"meta":707,"style":707},"import { input, inputPrefix, inputSuffix } from \"virtual:styleframe\";\n\nconst wrapperClasses = input({\n    color: \"neutral\",\n    variant: \"default\",\n    size: \"md\",\n    invalid: false,\n    disabled: false,\n    readonly: false,\n});\n\u002F\u002F → \"input _border-width:thin _border-radius:md ...\"\n\nconst prefixClasses = inputPrefix({ size: \"md\" });\n\u002F\u002F → \"input-prefix _font-size:sm ...\"\n\nconst suffixClasses = inputSuffix({ size: \"md\" });\n\u002F\u002F → \"input-suffix _font-size:sm ...\"\n","src\u002Fcomponents\u002Finput.ts",[569,2457,2458,2486,2490,2506,2521,2535,2549,2559,2569,2579,2587,2593,2597,2628,2633,2637,2668],{"__ignoreMap":707},[711,2459,2460,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484],{"class":713,"line":714},[711,2461,718],{"class":717},[711,2463,722],{"class":721},[711,2465,1194],{"class":725},[711,2467,1011],{"class":721},[711,2469,1199],{"class":725},[711,2471,1011],{"class":721},[711,2473,1204],{"class":725},[711,2475,729],{"class":721},[711,2477,732],{"class":717},[711,2479,1179],{"class":721},[711,2481,739],{"class":738},[711,2483,1151],{"class":721},[711,2485,745],{"class":721},[711,2487,2488],{"class":713,"line":748},[711,2489,825],{"emptyLinePlaceholder":337},[711,2491,2492,2494,2497,2499,2501,2503],{"class":713,"line":756},[711,2493,832],{"class":831},[711,2495,2496],{"class":725}," wrapperClasses ",[711,2498,838],{"class":721},[711,2500,1194],{"class":841},[711,2502,1507],{"class":725},[711,2504,2505],{"class":721},"{\n",[711,2507,2508,2510,2513,2515,2517,2519],{"class":713,"line":765},[711,2509,1327],{"class":1139},[711,2511,2512],{"class":721},":",[711,2514,1179],{"class":721},[711,2516,1238],{"class":738},[711,2518,1151],{"class":721},[711,2520,762],{"class":721},[711,2522,2523,2525,2527,2529,2531,2533],{"class":713,"line":773},[711,2524,1362],{"class":1139},[711,2526,2512],{"class":721},[711,2528,1179],{"class":721},[711,2530,1254],{"class":738},[711,2532,1151],{"class":721},[711,2534,762],{"class":721},[711,2536,2537,2539,2541,2543,2545,2547],{"class":713,"line":781},[711,2538,1395],{"class":1139},[711,2540,2512],{"class":721},[711,2542,1179],{"class":721},[711,2544,1270],{"class":738},[711,2546,1151],{"class":721},[711,2548,762],{"class":721},[711,2550,2551,2553,2555,2557],{"class":713,"line":789},[711,2552,1428],{"class":1139},[711,2554,2512],{"class":721},[711,2556,1285],{"class":1284},[711,2558,762],{"class":721},[711,2560,2561,2563,2565,2567],{"class":713,"line":797},[711,2562,1441],{"class":1139},[711,2564,2512],{"class":721},[711,2566,1285],{"class":1284},[711,2568,762],{"class":721},[711,2570,2571,2573,2575,2577],{"class":713,"line":805},[711,2572,1452],{"class":1139},[711,2574,2512],{"class":721},[711,2576,1285],{"class":1284},[711,2578,762],{"class":721},[711,2580,2581,2583,2585],{"class":713,"line":822},[711,2582,808],{"class":721},[711,2584,1556],{"class":725},[711,2586,745],{"class":721},[711,2588,2589],{"class":713,"line":828},[711,2590,2592],{"class":2591},"sHwdD","\u002F\u002F → \"input _border-width:thin _border-radius:md ...\"\n",[711,2594,2595],{"class":713,"line":849},[711,2596,825],{"emptyLinePlaceholder":337},[711,2598,2599,2601,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622,2624,2626],{"class":713,"line":854},[711,2600,832],{"class":831},[711,2602,2603],{"class":725}," prefixClasses ",[711,2605,838],{"class":721},[711,2607,1199],{"class":841},[711,2609,1507],{"class":725},[711,2611,1523],{"class":721},[711,2613,1536],{"class":1139},[711,2615,2512],{"class":721},[711,2617,1179],{"class":721},[711,2619,1270],{"class":738},[711,2621,1151],{"class":721},[711,2623,729],{"class":721},[711,2625,1556],{"class":725},[711,2627,745],{"class":721},[711,2629,2630],{"class":713,"line":872},[711,2631,2632],{"class":2591},"\u002F\u002F → \"input-prefix _font-size:sm ...\"\n",[711,2634,2635],{"class":713,"line":889},[711,2636,825],{"emptyLinePlaceholder":337},[711,2638,2639,2641,2644,2646,2648,2650,2652,2654,2656,2658,2660,2662,2664,2666],{"class":713,"line":906},[711,2640,832],{"class":831},[711,2642,2643],{"class":725}," suffixClasses ",[711,2645,838],{"class":721},[711,2647,1204],{"class":841},[711,2649,1507],{"class":725},[711,2651,1523],{"class":721},[711,2653,1536],{"class":1139},[711,2655,2512],{"class":721},[711,2657,1179],{"class":721},[711,2659,1270],{"class":738},[711,2661,1151],{"class":721},[711,2663,729],{"class":721},[711,2665,1556],{"class":725},[711,2667,745],{"class":721},[711,2669,2670],{"class":713,"line":923},[711,2671,2672],{"class":2591},"\u002F\u002F → \"input-suffix _font-size:sm ...\"\n",[702,2674,2679],{"className":2675,"code":2676,"filename":2677,"language":2678,"meta":707,"style":707},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cspan class=\"input _border-width:thin _border-radius:md ...\">\n    \u003Cspan class=\"input-prefix _font-size:sm ...\">$\u003C\u002Fspan>\n    \u003Cinput class=\"input-field\" type=\"text\" placeholder=\"0.00\" \u002F>\n    \u003Cspan class=\"input-suffix _font-size:sm ...\">.00\u003C\u002Fspan>\n\u003C\u002Fspan>\n","src\u002Fcomponents\u002Finput.html","html",[569,2680,2681,2701,2730,2772,2800],{"__ignoreMap":707},[711,2682,2683,2685,2687,2690,2692,2694,2697,2699],{"class":713,"line":714},[711,2684,1136],{"class":721},[711,2686,711],{"class":1139},[711,2688,2689],{"class":831}," class",[711,2691,838],{"class":721},[711,2693,1151],{"class":721},[711,2695,2696],{"class":738},"input _border-width:thin _border-radius:md ...",[711,2698,1151],{"class":721},[711,2700,1158],{"class":721},[711,2702,2703,2705,2707,2709,2711,2713,2716,2718,2721,2724,2726,2728],{"class":713,"line":748},[711,2704,1595],{"class":721},[711,2706,711],{"class":1139},[711,2708,2689],{"class":831},[711,2710,838],{"class":721},[711,2712,1151],{"class":721},[711,2714,2715],{"class":738},"input-prefix _font-size:sm ...",[711,2717,1151],{"class":721},[711,2719,2720],{"class":721},">",[711,2722,2723],{"class":725},"$",[711,2725,1571],{"class":721},[711,2727,711],{"class":1139},[711,2729,1158],{"class":721},[711,2731,2732,2734,2736,2738,2740,2742,2744,2746,2749,2751,2753,2756,2758,2761,2763,2765,2768,2770],{"class":713,"line":756},[711,2733,1595],{"class":721},[711,2735,1090],{"class":1139},[711,2737,2689],{"class":831},[711,2739,838],{"class":721},[711,2741,1151],{"class":721},[711,2743,1717],{"class":738},[711,2745,1151],{"class":721},[711,2747,2748],{"class":831}," type",[711,2750,838],{"class":721},[711,2752,1151],{"class":721},[711,2754,2755],{"class":738},"text",[711,2757,1151],{"class":721},[711,2759,2760],{"class":831}," placeholder",[711,2762,838],{"class":721},[711,2764,1151],{"class":721},[711,2766,2767],{"class":738},"0.00",[711,2769,1151],{"class":721},[711,2771,1686],{"class":721},[711,2773,2774,2776,2778,2780,2782,2784,2787,2789,2791,2794,2796,2798],{"class":713,"line":765},[711,2775,1595],{"class":721},[711,2777,711],{"class":1139},[711,2779,2689],{"class":831},[711,2781,838],{"class":721},[711,2783,1151],{"class":721},[711,2785,2786],{"class":738},"input-suffix _font-size:sm ...",[711,2788,1151],{"class":721},[711,2790,2720],{"class":721},[711,2792,2793],{"class":725},".00",[711,2795,1571],{"class":721},[711,2797,711],{"class":1139},[711,2799,1158],{"class":721},[711,2801,2802,2804,2806],{"class":713,"line":773},[711,2803,1571],{"class":721},[711,2805,711],{"class":1139},[711,2807,1158],{"class":721},[686,2809,2811],{"id":2810},"see-it-in-action","See it in action",[2813,2814],"story-preview",{"story":2815,":panel":2816},"theme-recipes-input--default","true",[549,2818,195],{"id":2819},"colors",[553,2821,2822,2823,1091,2825,1095,2827,2829],{},"The Input recipe includes 3 color variants: ",[569,2824,1335],{},[569,2826,1345],{},[569,2828,1238],{},". Like the Card and ChatMessage recipes, Input uses neutral-spectrum colors designed for content surfaces rather than status communication — a field's color reflects its surface, not a state. The wrapper combines each color with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides.",[553,2831,555,2832,2834],{},[569,2833,1238],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose forms.",[2813,2836],{"story":2837,":panel":2816},"theme-recipes-input--neutral",[2839,2840,2842],"h3",{"id":2841},"color-reference","Color Reference",[2813,2844],{"story":2845,":height":2846},"theme-recipes-input--all-variants","420",[2848,2849,2850,2866],"table",{},[2851,2852,2853],"thead",{},[2854,2855,2856,2860,2863],"tr",{},[2857,2858,2859],"th",{},"Color",[2857,2861,2862],{},"Token",[2857,2864,2865],{},"Use Case",[2867,2868,2869,2888,2902],"tbody",{},[2854,2870,2871,2876,2885],{},[2872,2873,2874],"td",{},[569,2875,1335],{},[2872,2877,2878,2881,2882],{},[569,2879,2880],{},"@color.white"," \u002F ",[569,2883,2884],{},"@color.gray-*",[2872,2886,2887],{},"Light surfaces, stays light in dark mode",[2854,2889,2890,2894,2899],{},[2872,2891,2892],{},[569,2893,1345],{},[2872,2895,2896],{},[569,2897,2898],{},"@color.gray-900",[2872,2900,2901],{},"Dark surfaces, stays dark in light mode",[2854,2903,2904,2908,2911],{},[2872,2905,2906],{},[569,2907,1238],{},[2872,2909,2910],{},"Adaptive (light ↔ dark)",[2872,2912,2913],{},"Default color, adapts to the current color scheme",[2915,2916,2917,2920,2921,2923],"tip",{},[557,2918,2919],{},"Pro tip:"," Use ",[569,2922,1238],{}," as your default input color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark variants separately.",[549,2925,2927],{"id":2926},"variants","Variants",[553,2929,2930,2931,2935],{},"Three visual style variants control how the field surface is rendered. Each variant is combined with the selected color through ",[621,2932,2934],{"href":2933},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[2839,2937,2938],{"id":1254},"Default",[553,2940,2941,2942,1635],{},"Opaque surface with a visible border — the standard bordered text field. Sits above the page with a solid background and reveals a primary-colored focus ring on ",[569,2943,575],{},[2813,2945],{"story":2946,":panel":2816},"theme-recipes-input--default-variant",[2839,2948,2949],{"id":1377},"Soft",[553,2951,2952],{},"Tinted gray background with a matching border. A gentler, lower-contrast field that blends into dense forms.",[2813,2954],{"story":2955,":panel":2816},"theme-recipes-input--soft",[2839,2957,2958],{"id":1386},"Ghost",[553,2960,2961,2962,2964],{},"No background and no border until interaction. The field shows only the focus ring on ",[569,2963,575],{},", making it ideal for inline editing and borderless layouts.",[2813,2966],{"story":2967,":panel":2816},"theme-recipes-input--ghost",[549,2969,2971],{"id":2970},"sizes","Sizes",[553,2973,2974,2975,2977,2978,2980],{},"Three size variants from ",[569,2976,1402],{}," to ",[569,2979,1419],{}," control the field's font size, padding, and border radius. The prefix and suffix addons share the same size axis, scaling their font size, inner padding, and gap to stay aligned with the field.",[2813,2982],{"story":2983,":height":2984},"theme-recipes-input--all-sizes","320",[2839,2986,2988],{"id":2987},"size-reference","Size Reference",[2848,2990,2991,3007],{},[2851,2992,2993],{},[2854,2994,2995,2998,3001,3004],{},[2857,2996,2997],{},"Size",[2857,2999,3000],{},"Font Size",[2857,3002,3003],{},"Padding (V \u002F H)",[2857,3005,3006],{},"Border Radius",[2867,3008,3009,3033,3057],{},[2854,3010,3011,3015,3020,3028],{},[2872,3012,3013],{},[569,3014,1402],{},[2872,3016,3017],{},[569,3018,3019],{},"@font-size.xs",[2872,3021,3022,2881,3025],{},[569,3023,3024],{},"@0.375",[569,3026,3027],{},"@0.625",[2872,3029,3030],{},[569,3031,3032],{},"@border-radius.sm",[2854,3034,3035,3039,3044,3052],{},[2872,3036,3037],{},[569,3038,1270],{},[2872,3040,3041],{},[569,3042,3043],{},"@font-size.sm",[2872,3045,3046,2881,3049],{},[569,3047,3048],{},"@0.5",[569,3050,3051],{},"@0.75",[2872,3053,3054],{},[569,3055,3056],{},"@border-radius.md",[2854,3058,3059,3063,3068,3075],{},[2872,3060,3061],{},[569,3062,1419],{},[2872,3064,3065],{},[569,3066,3067],{},"@font-size.md",[2872,3069,3070,2881,3072],{},[569,3071,3027],{},[569,3073,3074],{},"@0.875",[2872,3076,3077],{},[569,3078,3056],{},[3080,3081,3082,3085,3086,3088],"note",{},[557,3083,3084],{},"Good to know:"," Pass the same ",[569,3087,1656],{}," to the wrapper and to each prefix\u002Fsuffix or prepend\u002Fappend part so the whole field scales together. The wrapper owns the radius and padding; the addons manage their own font size and gap.",[549,3090,3092],{"id":3091},"states","States",[553,3094,3095,3096,3098,3099,2881,3102,3105,3106,3109],{},"The wrapper exposes three boolean state axes that map directly to the equivalent native ",[569,3097,1106],{}," attributes. Pass each as a boolean — the recipe also accepts the ",[569,3100,3101],{},"\"true\"",[569,3103,3104],{},"\"false\""," string keys, but the boolean form is simpler (see ",[621,3107,1084],{"href":3108},"#build-the-component",").",[2839,3111,3112],{"id":1110},"Invalid",[553,3114,3115,3116,3118],{},"Overrides the border and the focus ring to the error color. Set it alongside ",[569,3117,1759],{}," on the native input so assistive technology hears the error.",[2813,3120],{"story":3121,":panel":2816},"theme-recipes-input--invalid",[2839,3123,3124],{"id":1113},"Disabled",[553,3126,3127,3128,3131,3132,3135,3136,3138],{},"Dims the field to ",[569,3129,3130],{},"0.5"," opacity, switches the cursor to ",[569,3133,3134],{},"not-allowed",", and blocks pointer interaction. Mirror it with the native ",[569,3137,1113],{}," attribute so the input is also removed from the tab order.",[2813,3140],{"story":3141,":panel":2816},"theme-recipes-input--disabled",[2839,3143,3145],{"id":3144},"read-only","Read-only",[553,3147,3148,3149,3151],{},"Applies a subtle background shift and a default cursor while keeping the value selectable. Mirror it with the native ",[569,3150,1116],{}," attribute so the value is submitted but not editable.",[2813,3153],{"story":3154,":panel":2816},"theme-recipes-input--read-only",[3080,3156,3157,3159,3160,3162,3163,3165,3166,3168],{},[557,3158,3084],{}," ",[569,3161,1110],{}," is applied before ",[569,3164,1116],{}," and ",[569,3167,1113],{}," in the compound variant order, so an invalid field keeps its error border even when it is also read-only, and a disabled field still dims on top of any other state.",[549,3170,3172],{"id":3171},"addons","Addons",[553,3174,3175,3176,3179,3180,1091,3182,3184,3185,3179,3188,1091,3191,3194,3195,3198],{},"Input supports two kinds of addons. ",[557,3177,3178],{},"Inline"," addons (",[569,3181,1638],{},[569,3183,1793],{},") render inside the field and share its surface — use them for icons, currency symbols, and units. ",[557,3186,3187],{},"Attached",[569,3189,3190],{},"prepend",[569,3192,3193],{},"append",") render as joined blocks outside the field inside an ",[569,3196,3197],{},"inputGroup"," — use them for buttons, selects, and other components that bring their own styling.",[2839,3200,3202],{"id":3201},"prefix-and-suffix-inline","Prefix and suffix (inline)",[553,3204,3205],{},"The prefix and suffix sit inside the wrapper, to the left and right of the caret, sharing the field's background and focus ring. They are size-aware and use a muted text color.",[2813,3207],{"story":3208,":panel":2816},"theme-recipes-input--with-prefix",[2813,3210],{"story":3211,":panel":2816},"theme-recipes-input--with-suffix",[2813,3213],{"story":3214,":panel":2816},"theme-recipes-input--with-prefix-and-suffix",[2839,3216,3218],{"id":3217},"prepend-and-append-attached","Prepend and append (attached)",[553,3220,3221,3222,3224],{},"The prepend and append are transparent slots inside an ",[569,3223,3197],{},". The group flattens the border radius at the seams where the slots meet the field, so a button or select reads as one joined control. Drop any component into the slot — its own styling takes over.",[2813,3226],{"story":3227,":panel":2816},"theme-recipes-input--with-prepend",[2813,3229],{"story":3230,":panel":2816},"theme-recipes-input--with-append",[2813,3232],{"story":3233,":panel":2816},"theme-recipes-input--with-prepend-and-append",[2915,3235,3236,3238,3239,3241,3242,3244,3245,3241,3247,3249],{},[557,3237,2919],{}," Reach for ",[569,3240,1638],{},"\u002F",[569,3243,1793],{}," when the addon is decorative or informational (an icon, a unit) and for ",[569,3246,3190],{},[569,3248,3193],{}," when it is interactive (a button, a dropdown). Inline addons share the field's surface; attached addons keep their own.",[549,3251,3253],{"id":3252},"anatomy","Anatomy",[553,3255,3256],{},"The Input is composed of six independent recipes. The first three build a standalone field with inline addons; the last three compose a field with attached blocks:",[2848,3258,3259,3272],{},[2851,3260,3261],{},[2854,3262,3263,3266,3269],{},[2857,3264,3265],{},"Part",[2857,3267,3268],{},"Recipe",[2857,3270,3271],{},"Role",[2867,3273,3274,3296,3310,3324,3338,3352],{},[2854,3275,3276,3281,3285],{},[2872,3277,3278],{},[557,3279,3280],{},"Field",[2872,3282,3283],{},[569,3284,571],{},[2872,3286,555,3287,3290,3291,3293,3294,1194],{},[569,3288,3289],{},".input"," wrapper — owns the visual field (border, background, padding, ",[569,3292,575],{}," ring) and contains the transparent nested ",[569,3295,1102],{},[2854,3297,3298,3303,3307],{},[2872,3299,3300],{},[557,3301,3302],{},"Prefix",[2872,3304,3305],{},[569,3306,583],{},[2872,3308,3309],{},"Leading inline addon inside the field — icons, currency symbols, units",[2854,3311,3312,3317,3321],{},[2872,3313,3314],{},[557,3315,3316],{},"Suffix",[2872,3318,3319],{},[569,3320,591],{},[2872,3322,3323],{},"Trailing inline addon inside the field — icons, clear or reveal buttons",[2854,3325,3326,3331,3335],{},[2872,3327,3328],{},[557,3329,3330],{},"Group",[2872,3332,3333],{},[569,3334,599],{},[2872,3336,3337],{},"Layout coordinator for prepend + field + append; flattens border radii at the seams",[2854,3339,3340,3345,3349],{},[2872,3341,3342],{},[557,3343,3344],{},"Prepend",[2872,3346,3347],{},[569,3348,607],{},[2872,3350,3351],{},"Transparent leading slot outside the field — buttons, selects, addons",[2854,3353,3354,3359,3363],{},[2872,3355,3356],{},[557,3357,3358],{},"Append",[2872,3360,3361],{},[569,3362,615],{},[2872,3364,3365],{},"Transparent trailing slot outside the field — buttons, selects, addons",[553,3367,3368,3369,3371,3372,3374,3375,3377],{},"The nested ",[569,3370,1102],{}," element is the real ",[569,3373,1106],{},": it is transparent, has no border or padding of its own, and inherits typography and color from the wrapper. The wrapper owns the entire visual field via ",[569,3376,575],{},", so the focus ring appears whenever the inner input is focused.",[702,3379,3381],{"className":2675,"code":3380,"language":2678,"meta":707,"style":707},"\u003C!-- Standalone field with inline addons -->\n\u003Cspan class=\"input(...)\">\n    \u003Cspan class=\"inputPrefix(...)\">$\u003C\u002Fspan>\n    \u003Cinput class=\"input-field\" \u002F>\n    \u003Cspan class=\"inputSuffix(...)\">.00\u003C\u002Fspan>\n\u003C\u002Fspan>\n\n\u003C!-- Field with an attached button -->\n\u003Cdiv class=\"inputGroup(...)\">\n    \u003Cspan class=\"input(...)\">\u003Cinput class=\"input-field\" \u002F>\u003C\u002Fspan>\n    \u003Cspan class=\"inputAppend()\">\u003Cbutton>Search\u003C\u002Fbutton>\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[569,3382,3383,3388,3407,3434,3452,3479,3487,3491,3496,3516,3554,3592],{"__ignoreMap":707},[711,3384,3385],{"class":713,"line":714},[711,3386,3387],{"class":2591},"\u003C!-- Standalone field with inline addons -->\n",[711,3389,3390,3392,3394,3396,3398,3400,3403,3405],{"class":713,"line":748},[711,3391,1136],{"class":721},[711,3393,711],{"class":1139},[711,3395,2689],{"class":831},[711,3397,838],{"class":721},[711,3399,1151],{"class":721},[711,3401,3402],{"class":738},"input(...)",[711,3404,1151],{"class":721},[711,3406,1158],{"class":721},[711,3408,3409,3411,3413,3415,3417,3419,3422,3424,3426,3428,3430,3432],{"class":713,"line":756},[711,3410,1595],{"class":721},[711,3412,711],{"class":1139},[711,3414,2689],{"class":831},[711,3416,838],{"class":721},[711,3418,1151],{"class":721},[711,3420,3421],{"class":738},"inputPrefix(...)",[711,3423,1151],{"class":721},[711,3425,2720],{"class":721},[711,3427,2723],{"class":725},[711,3429,1571],{"class":721},[711,3431,711],{"class":1139},[711,3433,1158],{"class":721},[711,3435,3436,3438,3440,3442,3444,3446,3448,3450],{"class":713,"line":765},[711,3437,1595],{"class":721},[711,3439,1090],{"class":1139},[711,3441,2689],{"class":831},[711,3443,838],{"class":721},[711,3445,1151],{"class":721},[711,3447,1717],{"class":738},[711,3449,1151],{"class":721},[711,3451,1686],{"class":721},[711,3453,3454,3456,3458,3460,3462,3464,3467,3469,3471,3473,3475,3477],{"class":713,"line":773},[711,3455,1595],{"class":721},[711,3457,711],{"class":1139},[711,3459,2689],{"class":831},[711,3461,838],{"class":721},[711,3463,1151],{"class":721},[711,3465,3466],{"class":738},"inputSuffix(...)",[711,3468,1151],{"class":721},[711,3470,2720],{"class":721},[711,3472,2793],{"class":725},[711,3474,1571],{"class":721},[711,3476,711],{"class":1139},[711,3478,1158],{"class":721},[711,3480,3481,3483,3485],{"class":713,"line":781},[711,3482,1571],{"class":721},[711,3484,711],{"class":1139},[711,3486,1158],{"class":721},[711,3488,3489],{"class":713,"line":789},[711,3490,825],{"emptyLinePlaceholder":337},[711,3492,3493],{"class":713,"line":797},[711,3494,3495],{"class":2591},"\u003C!-- Field with an attached button -->\n",[711,3497,3498,3500,3503,3505,3507,3509,3512,3514],{"class":713,"line":805},[711,3499,1136],{"class":721},[711,3501,3502],{"class":1139},"div",[711,3504,2689],{"class":831},[711,3506,838],{"class":721},[711,3508,1151],{"class":721},[711,3510,3511],{"class":738},"inputGroup(...)",[711,3513,1151],{"class":721},[711,3515,1158],{"class":721},[711,3517,3518,3520,3522,3524,3526,3528,3530,3532,3535,3537,3539,3541,3543,3545,3547,3550,3552],{"class":713,"line":822},[711,3519,1595],{"class":721},[711,3521,711],{"class":1139},[711,3523,2689],{"class":831},[711,3525,838],{"class":721},[711,3527,1151],{"class":721},[711,3529,3402],{"class":738},[711,3531,1151],{"class":721},[711,3533,3534],{"class":721},">\u003C",[711,3536,1090],{"class":1139},[711,3538,2689],{"class":831},[711,3540,838],{"class":721},[711,3542,1151],{"class":721},[711,3544,1717],{"class":738},[711,3546,1151],{"class":721},[711,3548,3549],{"class":721}," \u002F>\u003C\u002F",[711,3551,711],{"class":1139},[711,3553,1158],{"class":721},[711,3555,3556,3558,3560,3562,3564,3566,3569,3571,3573,3576,3578,3581,3583,3585,3588,3590],{"class":713,"line":828},[711,3557,1595],{"class":721},[711,3559,711],{"class":1139},[711,3561,2689],{"class":831},[711,3563,838],{"class":721},[711,3565,1151],{"class":721},[711,3567,3568],{"class":738},"inputAppend()",[711,3570,1151],{"class":721},[711,3572,3534],{"class":721},[711,3574,3575],{"class":1139},"button",[711,3577,2720],{"class":721},[711,3579,3580],{"class":725},"Search",[711,3582,1571],{"class":721},[711,3584,3575],{"class":1139},[711,3586,3587],{"class":721},">\u003C\u002F",[711,3589,711],{"class":1139},[711,3591,1158],{"class":721},[711,3593,3594,3596,3598],{"class":713,"line":849},[711,3595,1571],{"class":721},[711,3597,3502],{"class":1139},[711,3599,1158],{"class":721},[2915,3601,3602,3604,3605,3607],{},[557,3603,2919],{}," You don't need the group for a basic field. Use ",[569,3606,571],{}," on its own (with optional prefix\u002Fsuffix) for most inputs, and reach for the group, prepend, and append recipes only when you attach interactive blocks.",[549,3609,438],{"id":3610},"accessibility",[561,3612,3613,3632,3643,3653,3670],{},[564,3614,3615,3623,3624,3627,3628,3631],{},[557,3616,3617,3618,3620,3621,1635],{},"Pair the ",[569,3619,1110],{}," state with ",[569,3622,1759],{}," The error border is a visual cue only. Set ",[569,3625,3626],{},"aria-invalid=\"true\""," on the native input and reference an error message with ",[569,3629,3630],{},"aria-describedby"," so screen readers announce the problem.",[564,3633,3634,3637,3638,3165,3640,3642],{},[557,3635,3636],{},"Mirror states on the native input."," Set the real ",[569,3639,1113],{},[569,3641,1116],{}," attributes in addition to the recipe state, so the field is correctly removed from (or kept in) the tab order and submitted accordingly.",[564,3644,3645,3648,3649,3652],{},[557,3646,3647],{},"Give inline addons text alternatives."," A prefix or suffix that conveys meaning (a currency symbol, a unit) should be exposed to assistive technology — keep it as readable text, or add an ",[569,3650,3651],{},"aria-label"," to the input that includes it.",[564,3654,3655,3658,3659,3662,3663,3241,3666,3669],{},[557,3656,3657],{},"Label every field."," Associate a ",[569,3660,3661],{},"\u003Clabel>"," with the nested input via ",[569,3664,3665],{},"for",[569,3667,3668],{},"id",", or wrap the input in the label. The recipe styles the surface but does not provide a name.",[564,3671,3672,3675,3676,3678,3679,1635],{},[557,3673,3674],{},"Verify contrast ratios."," The ",[569,3677,1345],{}," color places light text on a dark surface. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[621,3680,3684],{"href":3681,"rel":3682},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3683],"nofollow","WebAIM Contrast Checker",[549,3686,3688],{"id":3687},"customization","Customization",[2839,3690,3692],{"id":3691},"overriding-defaults","Overriding Defaults",[553,3694,3695],{},"Each input 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:",[702,3697,3699],{"className":704,"code":3698,"filename":700,"language":706,"meta":707,"style":707},"import { styleframe } from 'virtual:styleframe';\nimport { useInputRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst input = useInputRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'soft',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[569,3700,3701,3721,3741,3745,3759,3763,3780,3789,3805,3810,3819,3834,3849,3864,3868,3876,3880],{"__ignoreMap":707},[711,3702,3703,3705,3707,3709,3711,3713,3715,3717,3719],{"class":713,"line":714},[711,3704,718],{"class":717},[711,3706,722],{"class":721},[711,3708,726],{"class":725},[711,3710,729],{"class":721},[711,3712,732],{"class":717},[711,3714,735],{"class":721},[711,3716,739],{"class":738},[711,3718,742],{"class":721},[711,3720,745],{"class":721},[711,3722,3723,3725,3727,3729,3731,3733,3735,3737,3739],{"class":713,"line":748},[711,3724,718],{"class":717},[711,3726,722],{"class":721},[711,3728,864],{"class":725},[711,3730,729],{"class":721},[711,3732,732],{"class":717},[711,3734,735],{"class":721},[711,3736,815],{"class":738},[711,3738,742],{"class":721},[711,3740,745],{"class":721},[711,3742,3743],{"class":713,"line":756},[711,3744,825],{"emptyLinePlaceholder":337},[711,3746,3747,3749,3751,3753,3755,3757],{"class":713,"line":765},[711,3748,832],{"class":831},[711,3750,835],{"class":725},[711,3752,838],{"class":721},[711,3754,726],{"class":841},[711,3756,844],{"class":725},[711,3758,745],{"class":721},[711,3760,3761],{"class":713,"line":773},[711,3762,825],{"emptyLinePlaceholder":337},[711,3764,3765,3767,3769,3771,3773,3776,3778],{"class":713,"line":781},[711,3766,832],{"class":831},[711,3768,859],{"class":725},[711,3770,838],{"class":721},[711,3772,864],{"class":841},[711,3774,3775],{"class":725},"(s",[711,3777,1011],{"class":721},[711,3779,753],{"class":721},[711,3781,3782,3785,3787],{"class":713,"line":789},[711,3783,3784],{"class":1139},"    base",[711,3786,2512],{"class":721},[711,3788,753],{"class":721},[711,3790,3791,3794,3796,3798,3801,3803],{"class":713,"line":797},[711,3792,3793],{"class":1139},"        borderRadius",[711,3795,2512],{"class":721},[711,3797,735],{"class":721},[711,3799,3800],{"class":738},"@border-radius.lg",[711,3802,742],{"class":721},[711,3804,762],{"class":721},[711,3806,3807],{"class":713,"line":805},[711,3808,3809],{"class":721},"    },\n",[711,3811,3812,3815,3817],{"class":713,"line":822},[711,3813,3814],{"class":1139},"    defaultVariants",[711,3816,2512],{"class":721},[711,3818,753],{"class":721},[711,3820,3821,3824,3826,3828,3830,3832],{"class":713,"line":828},[711,3822,3823],{"class":1139},"        color",[711,3825,2512],{"class":721},[711,3827,735],{"class":721},[711,3829,1238],{"class":738},[711,3831,742],{"class":721},[711,3833,762],{"class":721},[711,3835,3836,3839,3841,3843,3845,3847],{"class":713,"line":849},[711,3837,3838],{"class":1139},"        variant",[711,3840,2512],{"class":721},[711,3842,735],{"class":721},[711,3844,1377],{"class":738},[711,3846,742],{"class":721},[711,3848,762],{"class":721},[711,3850,3851,3854,3856,3858,3860,3862],{"class":713,"line":854},[711,3852,3853],{"class":1139},"        size",[711,3855,2512],{"class":721},[711,3857,735],{"class":721},[711,3859,1419],{"class":738},[711,3861,742],{"class":721},[711,3863,762],{"class":721},[711,3865,3866],{"class":713,"line":872},[711,3867,3809],{"class":721},[711,3869,3870,3872,3874],{"class":713,"line":889},[711,3871,808],{"class":721},[711,3873,1556],{"class":725},[711,3875,745],{"class":721},[711,3877,3878],{"class":713,"line":906},[711,3879,825],{"emptyLinePlaceholder":337},[711,3881,3882,3884,3886,3888],{"class":713,"line":923},[711,3883,965],{"class":717},[711,3885,968],{"class":717},[711,3887,971],{"class":725},[711,3889,745],{"class":721},[2839,3891,3893],{"id":3892},"filtering-variants","Filtering Variants",[553,3895,3896,3897,3900],{},"If you only need a subset of the available variants, use the ",[569,3898,3899],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[702,3902,3904],{"className":704,"code":3903,"filename":700,"language":706,"meta":707,"style":707},"import { styleframe } from 'virtual:styleframe';\nimport { useInputRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color with the default and soft styles\nconst input = useInputRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['default', 'soft'],\n    },\n});\n\nexport default s;\n",[569,3905,3906,3926,3946,3950,3964,3968,3973,3989,3998,4018,4044,4048,4056,4060],{"__ignoreMap":707},[711,3907,3908,3910,3912,3914,3916,3918,3920,3922,3924],{"class":713,"line":714},[711,3909,718],{"class":717},[711,3911,722],{"class":721},[711,3913,726],{"class":725},[711,3915,729],{"class":721},[711,3917,732],{"class":717},[711,3919,735],{"class":721},[711,3921,739],{"class":738},[711,3923,742],{"class":721},[711,3925,745],{"class":721},[711,3927,3928,3930,3932,3934,3936,3938,3940,3942,3944],{"class":713,"line":748},[711,3929,718],{"class":717},[711,3931,722],{"class":721},[711,3933,864],{"class":725},[711,3935,729],{"class":721},[711,3937,732],{"class":717},[711,3939,735],{"class":721},[711,3941,815],{"class":738},[711,3943,742],{"class":721},[711,3945,745],{"class":721},[711,3947,3948],{"class":713,"line":756},[711,3949,825],{"emptyLinePlaceholder":337},[711,3951,3952,3954,3956,3958,3960,3962],{"class":713,"line":765},[711,3953,832],{"class":831},[711,3955,835],{"class":725},[711,3957,838],{"class":721},[711,3959,726],{"class":841},[711,3961,844],{"class":725},[711,3963,745],{"class":721},[711,3965,3966],{"class":713,"line":773},[711,3967,825],{"emptyLinePlaceholder":337},[711,3969,3970],{"class":713,"line":781},[711,3971,3972],{"class":2591},"\u002F\u002F Only generate the neutral color with the default and soft styles\n",[711,3974,3975,3977,3979,3981,3983,3985,3987],{"class":713,"line":789},[711,3976,832],{"class":831},[711,3978,859],{"class":725},[711,3980,838],{"class":721},[711,3982,864],{"class":841},[711,3984,3775],{"class":725},[711,3986,1011],{"class":721},[711,3988,753],{"class":721},[711,3990,3991,3994,3996],{"class":713,"line":797},[711,3992,3993],{"class":1139},"    filter",[711,3995,2512],{"class":721},[711,3997,753],{"class":721},[711,3999,4000,4002,4004,4007,4009,4011,4013,4016],{"class":713,"line":805},[711,4001,3823],{"class":1139},[711,4003,2512],{"class":721},[711,4005,4006],{"class":725}," [",[711,4008,742],{"class":721},[711,4010,1238],{"class":738},[711,4012,742],{"class":721},[711,4014,4015],{"class":725},"]",[711,4017,762],{"class":721},[711,4019,4020,4022,4024,4026,4028,4030,4032,4034,4036,4038,4040,4042],{"class":713,"line":822},[711,4021,3838],{"class":1139},[711,4023,2512],{"class":721},[711,4025,4006],{"class":725},[711,4027,742],{"class":721},[711,4029,1254],{"class":738},[711,4031,742],{"class":721},[711,4033,1011],{"class":721},[711,4035,735],{"class":721},[711,4037,1377],{"class":738},[711,4039,742],{"class":721},[711,4041,4015],{"class":725},[711,4043,762],{"class":721},[711,4045,4046],{"class":713,"line":828},[711,4047,3809],{"class":721},[711,4049,4050,4052,4054],{"class":713,"line":849},[711,4051,808],{"class":721},[711,4053,1556],{"class":725},[711,4055,745],{"class":721},[711,4057,4058],{"class":713,"line":854},[711,4059,825],{"emptyLinePlaceholder":337},[711,4061,4062,4064,4066,4068],{"class":713,"line":872},[711,4063,965],{"class":717},[711,4065,968],{"class":717},[711,4067,971],{"class":725},[711,4069,745],{"class":721},[3080,4071,4072,4074],{},[557,4073,3084],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[549,4076,73],{"id":4077},"api-reference",[2839,4079,4081],{"id":4080},"useinputrecipes-options",[569,4082,4083],{},"useInputRecipe(s, options?)",[553,4085,4086,4087,4089,4090,4092],{},"Creates the input wrapper recipe — the ",[569,4088,3289],{}," element that owns the visual field. Registers a nested ",[569,4091,1102],{}," selector for the transparent native input. Owns the full compound matrix: 9 color-variant combinations plus the 3 state overrides.",[553,4094,4095],{},[557,4096,4097],{},"Parameters:",[2848,4099,4100,4113],{},[2851,4101,4102],{},[2854,4103,4104,4107,4110],{},[2857,4105,4106],{},"Parameter",[2857,4108,4109],{},"Type",[2857,4111,4112],{},"Description",[2867,4114,4115,4130,4145,4160,4174,4189,4204],{},[2854,4116,4117,4122,4127],{},[2872,4118,4119],{},[569,4120,4121],{},"s",[2872,4123,4124],{},[569,4125,4126],{},"Styleframe",[2872,4128,4129],{},"The Styleframe instance",[2854,4131,4132,4137,4142],{},[2872,4133,4134],{},[569,4135,4136],{},"options",[2872,4138,4139],{},[569,4140,4141],{},"DeepPartial\u003CRecipeConfig>",[2872,4143,4144],{},"Optional overrides for the recipe configuration",[2854,4146,4147,4152,4157],{},[2872,4148,4149],{},[569,4150,4151],{},"options.base",[2872,4153,4154],{},[569,4155,4156],{},"VariantDeclarationsBlock",[2872,4158,4159],{},"Custom base styles for the field wrapper",[2854,4161,4162,4167,4171],{},[2872,4163,4164],{},[569,4165,4166],{},"options.variants",[2872,4168,4169],{},[569,4170,2927],{},[2872,4172,4173],{},"Custom variant definitions for the recipe",[2854,4175,4176,4181,4186],{},[2872,4177,4178],{},[569,4179,4180],{},"options.defaultVariants",[2872,4182,4183],{},[569,4184,4185],{},"Record\u003Ckeyof Variants, string>",[2872,4187,4188],{},"Default variant values for the recipe",[2854,4190,4191,4196,4201],{},[2872,4192,4193],{},[569,4194,4195],{},"options.compoundVariants",[2872,4197,4198],{},[569,4199,4200],{},"CompoundVariant[]",[2872,4202,4203],{},"Custom compound variant definitions for the recipe",[2854,4205,4206,4211,4216],{},[2872,4207,4208],{},[569,4209,4210],{},"options.filter",[2872,4212,4213],{},[569,4214,4215],{},"Record\u003Cstring, string[]>",[2872,4217,4218],{},"Limit which variant values are generated",[553,4220,4221],{},[557,4222,4223],{},"Variants:",[2848,4225,4226,4238],{},[2851,4227,4228],{},[2854,4229,4230,4233,4236],{},[2857,4231,4232],{},"Variant",[2857,4234,4235],{},"Options",[2857,4237,2938],{},[2867,4239,4240,4259,4278,4296,4313,4329],{},[2854,4241,4242,4247,4255],{},[2872,4243,4244],{},[569,4245,4246],{},"color",[2872,4248,4249,1091,4251,1091,4253],{},[569,4250,1335],{},[569,4252,1345],{},[569,4254,1238],{},[2872,4256,4257],{},[569,4258,1238],{},[2854,4260,4261,4266,4274],{},[2872,4262,4263],{},[569,4264,4265],{},"variant",[2872,4267,4268,1091,4270,1091,4272],{},[569,4269,1254],{},[569,4271,1377],{},[569,4273,1386],{},[2872,4275,4276],{},[569,4277,1254],{},[2854,4279,4280,4284,4292],{},[2872,4281,4282],{},[569,4283,1656],{},[2872,4285,4286,1091,4288,1091,4290],{},[569,4287,1402],{},[569,4289,1270],{},[569,4291,1419],{},[2872,4293,4294],{},[569,4295,1270],{},[2854,4297,4298,4302,4309],{},[2872,4299,4300],{},[569,4301,1110],{},[2872,4303,4304,1091,4306],{},[569,4305,2816],{},[569,4307,4308],{},"false",[2872,4310,4311],{},[569,4312,4308],{},[2854,4314,4315,4319,4325],{},[2872,4316,4317],{},[569,4318,1113],{},[2872,4320,4321,1091,4323],{},[569,4322,2816],{},[569,4324,4308],{},[2872,4326,4327],{},[569,4328,4308],{},[2854,4330,4331,4335,4341],{},[2872,4332,4333],{},[569,4334,1116],{},[2872,4336,4337,1091,4339],{},[569,4338,2816],{},[569,4340,4308],{},[2872,4342,4343],{},[569,4344,4308],{},[2839,4346,4348],{"id":4347},"useinputprefixrecipes-options",[569,4349,4350],{},"useInputPrefixRecipe(s, options?)",[553,4352,4353,4354,1635],{},"Creates the inline prefix recipe — a leading addon rendered inside the field, sharing its surface. Size-aware (font size, inner padding, gap) with a muted text color. Accepts the same parameters as ",[569,4355,4356],{},"useInputRecipe",[553,4358,4359],{},[557,4360,4223],{},[2848,4362,4363,4373],{},[2851,4364,4365],{},[2854,4366,4367,4369,4371],{},[2857,4368,4232],{},[2857,4370,4235],{},[2857,4372,2938],{},[2867,4374,4375],{},[2854,4376,4377,4381,4389],{},[2872,4378,4379],{},[569,4380,1656],{},[2872,4382,4383,1091,4385,1091,4387],{},[569,4384,1402],{},[569,4386,1270],{},[569,4388,1419],{},[2872,4390,4391],{},[569,4392,1270],{},[2839,4394,4396],{"id":4395},"useinputsuffixrecipes-options",[569,4397,4398],{},"useInputSuffixRecipe(s, options?)",[553,4400,4401,4402,1635],{},"Creates the inline suffix recipe — a trailing addon rendered inside the field, sharing its surface. Mirrors the prefix recipe with trailing inner padding. Accepts the same parameters as ",[569,4403,4356],{},[553,4405,4406],{},[557,4407,4223],{},[2848,4409,4410,4420],{},[2851,4411,4412],{},[2854,4413,4414,4416,4418],{},[2857,4415,4232],{},[2857,4417,4235],{},[2857,4419,2938],{},[2867,4421,4422],{},[2854,4423,4424,4428,4436],{},[2872,4425,4426],{},[569,4427,1656],{},[2872,4429,4430,1091,4432,1091,4434],{},[569,4431,1402],{},[569,4433,1270],{},[569,4435,1419],{},[2872,4437,4438],{},[569,4439,1270],{},[2839,4441,4443],{"id":4442},"useinputgrouprecipes-options",[569,4444,4445],{},"useInputGroupRecipe(s, options?)",[553,4447,4448,4449,4451,4452,1635],{},"Creates the input group recipe — a layout coordinator that wraps a prepend, field, and append. Paints no surface of its own; its only styling job is flattening the border radii at the seams where the slots meet the field. The ",[569,4450,1656],{}," axis is exposed for prop spreading and produces no styles at the group level. Accepts the same parameters as ",[569,4453,4356],{},[553,4455,4456],{},[557,4457,4223],{},[2848,4459,4460,4470],{},[2851,4461,4462],{},[2854,4463,4464,4466,4468],{},[2857,4465,4232],{},[2857,4467,4235],{},[2857,4469,2938],{},[2867,4471,4472],{},[2854,4473,4474,4478,4486],{},[2872,4475,4476],{},[569,4477,1656],{},[2872,4479,4480,1091,4482,1091,4484],{},[569,4481,1402],{},[569,4483,1270],{},[569,4485,1419],{},[2872,4487,4488],{},[569,4489,1270],{},[2839,4491,4493],{"id":4492},"useinputprependrecipes-options",[569,4494,4495],{},"useInputPrependRecipe(s, options?)",[553,4497,4498],{},"Creates the prepend recipe — a transparent leading slot inside an input group. Owns no background, border, or padding; the slotted content brings its own visual language. This recipe has no variants.",[553,4500,4501],{},[557,4502,4097],{},[2848,4504,4505,4515],{},[2851,4506,4507],{},[2854,4508,4509,4511,4513],{},[2857,4510,4106],{},[2857,4512,4109],{},[2857,4514,4112],{},[2867,4516,4517,4529],{},[2854,4518,4519,4523,4527],{},[2872,4520,4521],{},[569,4522,4121],{},[2872,4524,4525],{},[569,4526,4126],{},[2872,4528,4129],{},[2854,4530,4531,4535,4539],{},[2872,4532,4533],{},[569,4534,4136],{},[2872,4536,4537],{},[569,4538,4141],{},[2872,4540,4144],{},[2839,4542,4544],{"id":4543},"useinputappendrecipes-options",[569,4545,4546],{},"useInputAppendRecipe(s, options?)",[553,4548,4549],{},"Creates the append recipe — a transparent trailing slot inside an input group. Mirrors the prepend recipe. The slotted content brings its own visual language. This recipe has no variants.",[553,4551,4552],{},[557,4553,4097],{},[2848,4555,4556,4566],{},[2851,4557,4558],{},[2854,4559,4560,4562,4564],{},[2857,4561,4106],{},[2857,4563,4109],{},[2857,4565,4112],{},[2867,4567,4568,4580],{},[2854,4569,4570,4574,4578],{},[2872,4571,4572],{},[569,4573,4121],{},[2872,4575,4576],{},[569,4577,4126],{},[2872,4579,4129],{},[2854,4581,4582,4586,4590],{},[2872,4583,4584],{},[569,4585,4136],{},[2872,4587,4588],{},[569,4589,4141],{},[2872,4591,4144],{},[553,4593,4594],{},[621,4595,4596],{"href":132},"Learn more about recipes →",[549,4598,4600],{"id":4599},"best-practices","Best Practices",[561,4602,4603,4615,4633,4647,4663,4672,4681],{},[564,4604,4605,4611,4612,4614],{},[557,4606,4607,4608,4610],{},"Pass ",[569,4609,1656],{}," consistently",": Spread the same ",[569,4613,1656],{}," to the wrapper and to every prefix, suffix, prepend, and append part so the whole field scales together.",[564,4616,4617,4620,4621,1091,4623,1095,4625,4627,4628,2881,4630,4632],{},[557,4618,4619],{},"Pass states as booleans",": The ",[569,4622,1110],{},[569,4624,1113],{},[569,4626,1116],{}," axes accept a boolean directly — no ",[569,4629,3101],{},[569,4631,3104],{}," conversion needed (the string keys still work if you prefer them).",[564,4634,4635,4638,4639,2881,4641,4643,4644,4646],{},[557,4636,4637],{},"Mirror states on the native input",": Always set the real ",[569,4640,1113],{},[569,4642,1116],{}," attributes and ",[569,4645,1759],{}," in addition to the recipe state.",[564,4648,4649,4652,4653,3241,4655,4657,4658,3241,4660,4662],{},[557,4650,4651],{},"Choose the right addon kind",": Use ",[569,4654,1638],{},[569,4656,1793],{}," for decorative or informational content inside the field, and ",[569,4659,3190],{},[569,4661,3193],{}," for interactive blocks attached to it.",[564,4664,4665,4671],{},[557,4666,4667,4668,4670],{},"Use ",[569,4669,1238],{}," for general forms",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[564,4673,4674,4677,4678,4680],{},[557,4675,4676],{},"Filter what you don't need",": If your forms use only one color or two variants, pass a ",[569,4679,3899],{}," option to reduce generated CSS.",[564,4682,4683,4686,4687,4690],{},[557,4684,4685],{},"Override defaults at the recipe level",": Set your most common combination as ",[569,4688,4689],{},"defaultVariants"," so component consumers write less code.",[549,4692,4694],{"id":4693},"faq","FAQ",[4696,4697,4698,4717,4740,4766,4780,4820,4837],"accordion",{},[4699,4700,555,4703,4705,4706,4708,4709,1103,4711,4713,4714,4716],"accordion-item",{"icon":4701,"label":4702},"i-lucide-circle-help","Why is there a separate wrapper and input-field?",[569,4704,3289],{}," wrapper owns the visual field — border, background, padding, and the ",[569,4707,575],{}," ring — while the nested ",[569,4710,1102],{},[569,4712,1106],{}," that inherits typography. This split lets inline prefix and suffix addons share the same surface as the typed text, and lets the focus ring respond to the inner input through ",[569,4715,575],{}," without extra JavaScript.",[4699,4718,4720,3165,4722,4724,4725,4728,4729,3165,4731,4724,4733,4736,4737,4739],{"icon":4701,"label":4719},"What's the difference between prefix\u002Fsuffix and prepend\u002Fappend?",[569,4721,1638],{},[569,4723,1793],{}," render ",[557,4726,4727],{},"inside"," the field and share its background and focus ring — use them for icons, currency symbols, and units. ",[569,4730,3190],{},[569,4732,3193],{},[557,4734,4735],{},"outside"," the field as joined blocks inside an ",[569,4738,3197],{},", which flattens the border radii at the seams — use them for buttons, selects, and other interactive components that bring their own styling.",[4699,4741,4743,4744,4747,4748,2881,4750,4752,4753,2881,4755,4757,4758,1091,4760,4762,4763,4765],{"icon":4701,"label":4742},"How do I pass the invalid, disabled, and readonly states?","Pass each as a boolean: ",[569,4745,4746],{},"input({ invalid, disabled, readonly })",". The recipe coerces the value to the matching ",[569,4749,3101],{},[569,4751,3104],{}," variant key, so the ",[569,4754,3101],{},[569,4756,3104],{}," strings work too — the boolean form is just simpler. Always set the matching native attribute (",[569,4759,1113],{},[569,4761,1116],{},") and ",[569,4764,1759],{}," so the field behaves correctly for keyboard and assistive-technology users.",[4699,4767,4769,4770,1091,4772,1095,4774,4776,4777,4779],{"icon":4701,"label":4768},"Why doesn't the Input recipe include semantic colors like primary or success?","A field's color reflects its surface, not a status. Semantic colors (primary, success, error) communicate meaning through color, which is better suited to focused elements like badges, buttons, and callouts. Input uses ",[569,4771,1335],{},[569,4773,1345],{},[569,4775,1238],{}," to provide surface variations that work across all forms. Error communication is handled by the dedicated ",[569,4778,1110],{}," state, which switches the border and focus ring to the error color.",[4699,4781,4783,4815],{"icon":4701,"label":4782},"How do compound variants work in the Input recipe?",[553,4784,4785,4786,4788,4789,4791,4792,3165,4794,4791,4796,4798,4799,1091,4802,1095,4805,4808,4809,1091,4811,1095,4813,1635],{},"The wrapper recipe (",[569,4787,4356],{},") maps each color-variant combination to specific styles. For example, when ",[569,4790,4246],{}," is ",[569,4793,1238],{},[569,4795,4265],{},[569,4797,1254],{},", the compound variant applies ",[569,4800,4801],{},"background: @color.white",[569,4803,4804],{},"borderColor: @color.gray-200",[569,4806,4807],{},"color: @color.text",", along with dark mode overrides. The recipe has 12 compound entries: 9 from the color × variant matrix (3 colors × 3 variants) plus 3 state overrides for ",[569,4810,1110],{},[569,4812,1116],{},[569,4814,1113],{},[553,4816,4817],{},[621,4818,4819],{"href":2933},"Learn more about compound variants →",[4699,4821,4823,4824,4826,4827,4829,4830,4833,4834,4836],{"icon":4701,"label":4822},"How does filtering affect compound variants?","When you use the ",[569,4825,3899],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[569,4828,4265],{}," to only ",[569,4831,4832],{},"['default', 'soft']",", all compound variants matching ",[569,4835,1386],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[4699,4838,4840,4841,1091,4843,1095,4845,4848,4849,4852],{"icon":4701,"label":4839},"Can I use the Input recipe without the design tokens preset?","The Input recipe references design tokens like ",[569,4842,2880],{},[569,4844,3056],{},[569,4846,4847],{},"@color.error"," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[569,4850,4851],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[4854,4855,4856],"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 .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":707,"searchDepth":748,"depth":748,"links":4858},[4859,4860,4861,4862,4865,4870,4873,4878,4882,4883,4884,4888,4896,4897],{"id":551,"depth":748,"text":78},{"id":634,"depth":748,"text":635},{"id":679,"depth":748,"text":680},{"id":2819,"depth":748,"text":195,"children":4863},[4864],{"id":2841,"depth":756,"text":2842},{"id":2926,"depth":748,"text":2927,"children":4866},[4867,4868,4869],{"id":1254,"depth":756,"text":2938},{"id":1377,"depth":756,"text":2949},{"id":1386,"depth":756,"text":2958},{"id":2970,"depth":748,"text":2971,"children":4871},[4872],{"id":2987,"depth":756,"text":2988},{"id":3091,"depth":748,"text":3092,"children":4874},[4875,4876,4877],{"id":1110,"depth":756,"text":3112},{"id":1113,"depth":756,"text":3124},{"id":3144,"depth":756,"text":3145},{"id":3171,"depth":748,"text":3172,"children":4879},[4880,4881],{"id":3201,"depth":756,"text":3202},{"id":3217,"depth":756,"text":3218},{"id":3252,"depth":748,"text":3253},{"id":3610,"depth":748,"text":438},{"id":3687,"depth":748,"text":3688,"children":4885},[4886,4887],{"id":3691,"depth":756,"text":3692},{"id":3892,"depth":756,"text":3893},{"id":4077,"depth":748,"text":73,"children":4889},[4890,4891,4892,4893,4894,4895],{"id":4080,"depth":756,"text":4083},{"id":4347,"depth":756,"text":4350},{"id":4395,"depth":756,"text":4398},{"id":4442,"depth":756,"text":4445},{"id":4492,"depth":756,"text":4495},{"id":4543,"depth":756,"text":4546},{"id":4599,"depth":748,"text":4600},{"id":4693,"depth":748,"text":4694},"A text-field component with a wrapper-owned visual surface, inline prefix\u002Fsuffix addons, attached prepend\u002Fappend slots, and invalid\u002Fdisabled\u002Freadonly states. Supports light, dark, and neutral colors, default\u002Fsoft\u002Fghost styles, and three sizes through the recipe system.",null,{},{"title":422,"description":4898},"lsv0B8HX20pN-5fj0dpuJ4W9JgeqORFmd7WHdyxNBg8",[4904,4906],{"title":418,"path":419,"stem":420,"description":4905,"children":-1},"A navigation component for moving between pages of content. Supports horizontal and vertical orientations, three colors, six visual styles, three sizes, and active\u002Fdisabled states through a three-part recipe system.",{"title":78,"path":165,"stem":166,"description":4907,"icon":79,"children":-1},"Explore Styleframe's comprehensive design token system. Create consistent, scalable design systems with composable functions for colors, typography, spacing, and more.",1780557799072]