[{"data":1,"prerenderedAt":383},["ShallowReactive",2],{"\u002Fui":3},{"id":4,"title":5,"body":6,"description":375,"extension":376,"meta":377,"navigation":378,"order":124,"package":13,"path":379,"seo":380,"stem":381,"__hash__":382},"docs\u002Fui\u002Findex.md","ui",{"type":7,"value":8,"toc":369},"minimark",[9,14,38,49,54,65,172,215,231,236,349,358,362,365],[10,11,13],"h1",{"id":12},"alikhalillla-tel-input","@alikhalilll\u002Fa-tel-input",[15,16,17,18,25,26,31,32,37],"p",{},"A headless, ",[19,20,24],"a",{"href":21,"rel":22},"https:\u002F\u002Fwww.shadcn-vue.com\u002F",[23],"nofollow","shadcn-vue"," style phone input for Vue 3 + Nuxt 3\u002F4. Built on ",[19,27,30],{"href":28,"rel":29},"https:\u002F\u002Freka-ui.com",[23],"reka-ui"," and ",[19,33,36],{"href":34,"rel":35},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fvaul-vue",[23],"vaul-vue",". Fully typed, themed via CSS variables — the country picker is a popover on desktop and a drawer on mobile, themable end-to-end.",[15,39,40,41,48],{},"See the ",[19,42,44],{"href":43},"\u002Fui\u002Ftel-input",[45,46,47],"code",{},"ATelInput"," page for install, setup, props, slots, and live demos.",[50,51,53],"h2",{"id":52},"theming","Theming",[15,55,56,57,60,61,64],{},"Every design token is a CSS variable prefixed ",[45,58,59],{},"--ak-ui-",". Override any of them globally on ",[45,62,63],{},":root",", scoped to a wrapper class, or inline — components pick up the change at runtime via the cascade. Portaled popover \u002F drawer content inherits.",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-css shiki shiki-themes github-light-default github-dark-default","\u002F* Per-tenant override — applies to anything inside .tenant-acme *\u002F\n.tenant-acme {\n  --ak-ui-popover: 220 70% 8%;\n  --ak-ui-accent: 220 50% 30%;\n  --ak-ui-ring: 220 100% 65%;\n}\n","css","",[45,73,74,83,94,122,144,166],{"__ignoreMap":71},[75,76,79],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"sU953","\u002F* Per-tenant override — applies to anything inside .tenant-acme *\u002F\n",[75,84,86,90],{"class":77,"line":85},2,[75,87,89],{"class":88},"sHrmB",".tenant-acme",[75,91,93],{"class":92},"s4rv2"," {\n",[75,95,97,101,104,107,110,114,117,119],{"class":77,"line":96},3,[75,98,100],{"class":99},"sTDnQ","  --ak-ui-popover",[75,102,103],{"class":92},": ",[75,105,106],{"class":88},"220",[75,108,109],{"class":88}," 70",[75,111,113],{"class":112},"sjeE4","%",[75,115,116],{"class":88}," 8",[75,118,113],{"class":112},[75,120,121],{"class":92},";\n",[75,123,125,128,130,132,135,137,140,142],{"class":77,"line":124},4,[75,126,127],{"class":99},"  --ak-ui-accent",[75,129,103],{"class":92},[75,131,106],{"class":88},[75,133,134],{"class":88}," 50",[75,136,113],{"class":112},[75,138,139],{"class":88}," 30",[75,141,113],{"class":112},[75,143,121],{"class":92},[75,145,147,150,152,154,157,159,162,164],{"class":77,"line":146},5,[75,148,149],{"class":99},"  --ak-ui-ring",[75,151,103],{"class":92},[75,153,106],{"class":88},[75,155,156],{"class":88}," 100",[75,158,113],{"class":112},[75,160,161],{"class":88}," 65",[75,163,113],{"class":112},[75,165,121],{"class":92},[75,167,169],{"class":77,"line":168},6,[75,170,171],{"class":92},"}\n",[66,173,177],{"className":174,"code":175,"language":176,"meta":71,"style":71},"language-vue shiki shiki-themes github-light-default github-dark-default","\u003Cdiv class=\"tenant-acme\">\n  \u003CATelInput v-model:phone=\"phone\" v-model:country=\"country\" \u002F>\n\u003C\u002Fdiv>\n","vue",[45,178,179,201,206],{"__ignoreMap":71},[75,180,181,184,188,191,194,198],{"class":77,"line":78},[75,182,183],{"class":92},"\u003C",[75,185,187],{"class":186},"sjgCt","div",[75,189,190],{"class":88}," class",[75,192,193],{"class":92},"=",[75,195,197],{"class":196},"sSVrQ","\"tenant-acme\"",[75,199,200],{"class":92},">\n",[75,202,203],{"class":77,"line":85},[75,204,205],{"class":92},"  \u003CATelInput v-model:phone=\"phone\" v-model:country=\"country\" \u002F>\n",[75,207,208,211,213],{"class":77,"line":96},[75,209,210],{"class":92},"\u003C\u002F",[75,212,187],{"class":186},[75,214,200],{"class":92},[15,216,217,218,222,223,226,227,230],{},"Values are HSL ",[219,220,221],"strong",{},"triplets"," — no ",[45,224,225],{},"hsl(…)"," wrapper — because the Tailwind tokens compose them via ",[45,228,229],{},"hsl(var(--ak-ui-…))",".",[232,233,235],"h3",{"id":234},"tokens","Tokens",[237,238,239,252],"table",{},[240,241,242],"thead",{},[243,244,245,249],"tr",{},[246,247,248],"th",{},"Variable",[246,250,251],{},"Used for",[253,254,255,270,282,294,306,316,329,339],"tbody",{},[243,256,257,267],{},[258,259,260,263,264],"td",{},[45,261,262],{},"--ak-ui-background"," \u002F ",[45,265,266],{},"*-foreground",[258,268,269],{},"Page background + text",[243,271,272,279],{},[258,273,274,263,277],{},[45,275,276],{},"--ak-ui-popover",[45,278,266],{},[258,280,281],{},"Popover surfaces + their text",[243,283,284,291],{},[258,285,286,263,289],{},[45,287,288],{},"--ak-ui-muted",[45,290,266],{},[258,292,293],{},"Hint text, search bar bg, country trigger bg",[243,295,296,303],{},[258,297,298,263,301],{},[45,299,300],{},"--ak-ui-accent",[45,302,266],{},[258,304,305],{},"List hover + selected row",[243,307,308,313],{},[258,309,310],{},[45,311,312],{},"--ak-ui-destructive",[258,314,315],{},"Error ring + warning icon",[243,317,318,326],{},[258,319,320,263,323],{},[45,321,322],{},"--ak-ui-border",[45,324,325],{},"--ak-ui-input",[258,327,328],{},"Outer border + inner dividers",[243,330,331,336],{},[258,332,333],{},[45,334,335],{},"--ak-ui-ring",[258,337,338],{},"Focus ring (the visual \"brand\")",[243,340,341,346],{},[258,342,343],{},[45,344,345],{},"--ak-ui-radius",[258,347,348],{},"Border radius (no Tailwind token — used directly)",[15,350,351,352,357],{},"Live theming recipes (brand-only, day\u002Fnight, multi-tenant, server-driven, state-specific) live on the ",[19,353,355],{"href":354},"\u002Fui\u002Ftel-input#theming",[45,356,47],{}," page.",[50,359,361],{"id":360},"license","License",[15,363,364],{},"MIT © alikhalilll",[366,367,368],"style",{},"html pre.shiki code .sU953, html code.shiki .sU953{--shiki-default:#6E7781;--shiki-dark:#8B949E}html pre.shiki code .sHrmB, html code.shiki .sHrmB{--shiki-default:#0550AE;--shiki-dark:#79C0FF}html pre.shiki code .s4rv2, html code.shiki .s4rv2{--shiki-default:#1F2328;--shiki-dark:#E6EDF3}html pre.shiki code .sTDnQ, html code.shiki .sTDnQ{--shiki-default:#953800;--shiki-dark:#FFA657}html pre.shiki code .sjeE4, html code.shiki .sjeE4{--shiki-default:#CF222E;--shiki-dark:#FF7B72}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 .sjgCt, html code.shiki .sjgCt{--shiki-default:#116329;--shiki-dark:#7EE787}html pre.shiki code .sSVrQ, html code.shiki .sSVrQ{--shiki-default:#0A3069;--shiki-dark:#A5D6FF}",{"title":71,"searchDepth":85,"depth":85,"links":370},[371,374],{"id":52,"depth":85,"text":53,"children":372},[373],{"id":234,"depth":96,"text":235},{"id":360,"depth":85,"text":361},"Headless, shadcn-vue style phone input. Built on reka-ui and vaul-vue, fully typed, themed via CSS variables.","md",{},true,"\u002Fui",{"title":5,"description":375},"ui\u002Findex","G_VbJ-h-yO_7f-JwV7xfQ_zR810Ykj5mkCJProKcZHc",1780415476240]