@alikhalilll/a-tel-input 1.0.2 → 1.1.1

package/dist/styles.css

@@ -1,5 +1,5 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}:root,:host{--spacing:.25rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.collapse{visibility:collapse}.flex{display:flex}.inline{display:inline}.table{display:table}.flex-shrink{flex-shrink:1}.ps-1{padding-inline-start:calc(var(--spacing) * 1)}.accent-foreground{accent-color:hsl(var(--ak-ui-foreground))}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.visible{visibility:visible}.sticky{position:sticky}.block{display:block}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.text-popover-foreground{color:hsl(var(--ak-ui-popover-foreground))}@property --tw-ease{syntax:"*";inherits:false}.a-popover__overlay{z-index:50;pointer-events:auto;background:#000000b3;position:fixed;inset:0}.a-popover__overlay[data-state=open]{animation:.15s ease-out a-popover-overlay-in}.a-popover__overlay[data-state=closed]{animation:.1s ease-in forwards a-popover-overlay-out}@keyframes a-popover-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-popover-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__overlay[data-state=open],.a-popover__overlay[data-state=closed]{animation:none}}.a-popover__content{z-index:60;border-radius:calc(var(--ak-ui-radius) - 2px);border:1px solid hsl(var(--ak-ui-border) / .7);background:hsl(var(--ak-ui-popover));width:18rem;color:hsl(var(--ak-ui-popover-foreground));outline:none;padding:1rem;box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #00000026}.a-popover__content[data-state=open]{animation:.15s ease-out a-popover-in}.a-popover__content[data-state=closed]{animation:.1s ease-in forwards a-popover-out}@keyframes a-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes a-popover-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__content[data-state=open],.a-popover__content[data-state=closed]{animation:none}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--ease-in:cubic-bezier(.4, 0, 1, 1)}.text-foreground{color:hsl(var(--ak-ui-foreground))}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.a-drawer__overlay{z-index:40;background:#000000b3;position:fixed;inset:0}.a-drawer__overlay[data-state=open]{animation:.2s ease-out a-drawer-overlay-in}.a-drawer__overlay[data-state=closed]{animation:.15s ease-in forwards a-drawer-overlay-out}@keyframes a-drawer-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-drawer-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-drawer__overlay[data-state=open],.a-drawer__overlay[data-state=closed]{animation:none}}.a-drawer__content{z-index:50;background:hsl(var(--ak-ui-background));height:auto;color:hsl(var(--ak-ui-foreground));inset-inline:0;border-top-left-radius:10px;border-top-right-radius:10px;outline:none;flex-direction:column;margin-top:6rem;display:flex;position:fixed;bottom:0;box-shadow:0 25px 50px -12px #0000004d,0 12px 24px -8px #00000040}.a-drawer__handle{background:hsl(var(--ak-ui-muted));border-radius:999px;width:100px;height:.5rem;margin:1rem auto 0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-ease:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}:root,:host{--spacing:.25rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.collapse{visibility:collapse}.fixed{position:fixed}.static{position:static}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.contents{display:contents}.flex{display:flex}.inline{display:inline}.table{display:table}.flex-shrink{flex-shrink:1}.ps-1{padding-inline-start:calc(var(--spacing) * 1)}.accent-foreground{accent-color:hsl(var(--ak-ui-foreground))}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.visible{visibility:visible}.sticky{position:sticky}.block{display:block}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}.text-popover-foreground{color:hsl(var(--ak-ui-popover-foreground))}@property --tw-ease{syntax:"*";inherits:false}.a-popover__overlay{z-index:50;pointer-events:auto;background:#000000b3;position:fixed;inset:0}.a-popover__overlay[data-state=open]{animation:.15s ease-out a-popover-overlay-in}.a-popover__overlay[data-state=closed]{animation:.1s ease-in forwards a-popover-overlay-out}@keyframes a-popover-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-popover-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__overlay[data-state=open],.a-popover__overlay[data-state=closed]{animation:none}}.a-popover__content{z-index:60;border-radius:calc(var(--ak-ui-radius) - 2px);border:1px solid hsl(var(--ak-ui-border) / .7);background:hsl(var(--ak-ui-popover));width:18rem;color:hsl(var(--ak-ui-popover-foreground));outline:none;padding:1rem;box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #00000026}.a-popover__content[data-state=open]{animation:.15s ease-out a-popover-in}.a-popover__content[data-state=closed]{animation:.1s ease-in forwards a-popover-out}@keyframes a-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes a-popover-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-popover__content[data-state=open],.a-popover__content[data-state=closed]{animation:none}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--ease-in:cubic-bezier(.4, 0, 1, 1)}.text-foreground{color:hsl(var(--ak-ui-foreground))}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.a-drawer__overlay{z-index:40;background:#000000b3;position:fixed;inset:0}.a-drawer__overlay[data-state=open]{animation:.2s ease-out a-drawer-overlay-in}.a-drawer__overlay[data-state=closed]{animation:.15s ease-in forwards a-drawer-overlay-out}@keyframes a-drawer-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes a-drawer-overlay-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.a-drawer__overlay[data-state=open],.a-drawer__overlay[data-state=closed]{animation:none}}.a-drawer__content{z-index:50;background:hsl(var(--ak-ui-background));height:auto;color:hsl(var(--ak-ui-foreground));inset-inline:0;border-top-left-radius:10px;border-top-right-radius:10px;outline:none;flex-direction:column;margin-top:6rem;display:flex;position:fixed;bottom:0;box-shadow:0 25px 50px -12px #0000004d,0 12px 24px -8px #00000040}.a-drawer__handle{background:hsl(var(--ak-ui-muted));border-radius:999px;width:100px;height:.5rem;margin:1rem auto 0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
 /* --- bundled SFC styles --- */
 
 .a-country-flag[data-v-705c2224] {
@@ -112,7 +112,9 @@ to {
 }
 .a-country-select__search {
   border-bottom: 1px solid hsl(var(--ak-ui-border) / 0.7);
-  padding: 0.375rem;
+  /* Drop bottom padding — the list owns the gap below the search border so the
+     sticky group header can overlap it and sit flush against the search bar. */
+  padding: 0.375rem 0.375rem 0;
 }
 .a-country-select__search-box {
   position: relative;
@@ -179,6 +181,10 @@ to {
 .a-country-select__list {
   flex: 1;
   overflow-y: auto;
+  /* Top padding lives inside the scroll container so the first sticky group header
+     can overlap it (via negative `top`) and sit flush against the search border
+     with zero visible gap. */
+  padding-top: 0.375rem;
   /* Themed scrollbar — Firefox + WebKit/Blink. Resolves the browser-default
      light-grey scrollbar that didn't match the popover surface in dark mode. */
   scrollbar-width: thin;
@@ -207,16 +213,24 @@ to {
 }
 .a-country-select__group-header {
   position: sticky;
-  top: 0;
+  /* Negative top equal to the list's `padding-top` makes the sticky header
+     overlap that padding band so when the user scrolls it sits flush against
+     the search bar's bottom border — no visible gap. */
+  top: -0.375rem;
   z-index: 10;
   background: hsl(var(--ak-ui-popover));
   color: hsl(var(--ak-ui-muted-foreground));
-  padding: 0.375rem 0.75rem;
+  /* Extra top padding compensates for the negative `top` offset so the visible
+     label keeps its usual breathing room. */
+  padding: 0.5rem 0.75rem 0.375rem;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin: 0;
+  /* Hairline under the header that only shows once it's stuck — helps it read
+     as a distinct band from the search border above. */
+  box-shadow: 0 1px 0 0 hsl(var(--ak-ui-border) / 0.5);
 }
 .a-country-select__group-list {
   list-style: none;
@@ -411,7 +425,8 @@ to {
 .a-tel-input__input[data-has-dial][data-v-8305dc81] {
   padding-inline-start: 0.25rem;
 }
-.a-tel-input__detecting[data-v-8305dc81] {
+.a-tel-input__detecting[data-v-8305dc81],
+.a-tel-input__validating[data-v-8305dc81] {
   display: inline-flex;
   height: 100%;
   flex-shrink: 0;

package/dist/vee-validate/index.cjs

@@ -0,0 +1,113 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_usePhoneValidation = require("../_chunks/usePhoneValidation.js");
+let vue = require("vue");
+let vee_validate = require("vee-validate");
+//#region src/vee-validate/useTelField.ts
+/**
+* VeeValidate adapter for `@alikhalilll/a-tel-input`.
+*
+* `useTelField()` owns the two v-models (`phone` + `country`) and the canonical
+* E.164 string used by VeeValidate / Zod / yup, and returns a single ready-to-bind
+* object so a consumer doesn't have to glue the pieces together.
+*
+* Quick start:
+*
+* ```ts
+* import { useTelField } from '@alikhalilll/a-tel-input/vee-validate';
+* import { toTypedSchema } from '@vee-validate/zod';
+* import { z } from 'zod';
+* import { zPhone } from '@alikhalilll/a-tel-input/zod';
+*
+* const { phone, country, error, handleBlur, fieldProps } = useTelField('phone', {
+*   rules: toTypedSchema(zPhone()),
+*   validateOn: 'blur',
+* });
+* ```
+*
+* ```vue
+* <ATelInput
+*   v-model:phone="phone"
+*   v-model:country="country"
+*   v-bind="fieldProps"
+*   @blur="handleBlur"
+* />
+* ```
+*
+* Server-side validation (e.g. "does this phone already exist?") plugs in via the
+* `rules` callback — VeeValidate already supports async rules:
+*
+* ```ts
+* const { phone, country, error, handleBlur, fieldProps, validating } = useTelField('phone', {
+*   rules: async (value: string) => {
+*     const sync = await zPhone().safeParseAsync(value);
+*     if (!sync.success) return sync.error.issues[0]!.message;
+*     const res = await $fetch('/api/phone/exists', { query: { phone: value } });
+*     return res.exists ? 'This phone is already registered.' : true;
+*   },
+*   validateOn: 'blur',
+* });
+* ```
+*
+* The `validating` ref is `true` while VeeValidate's async pipeline is in flight —
+* bind it to ATelInput's `:validating` prop to surface a spinner inside the field.
+*
+* `vee-validate` is an **optional peer dependency** — install it yourself in your app.
+*/
+/**
+* Register a phone field with VeeValidate. See file header for usage examples.
+*
+* @param name  The field name (used by VeeValidate, also forwarded to the inner
+*              `<input name="">` for native form submission).
+* @param options See {@link UseTelFieldOptions}.
+*/
+function useTelField(name, options = {}) {
+	const phone = (0, vue.ref)(options.initialPhone ?? "");
+	const country = (0, vue.ref)(options.initialCountry ?? null);
+	const v = require_usePhoneValidation.usePhoneValidation();
+	v.getCountries();
+	function composeE164() {
+		if (!phone.value) return "";
+		const dial = country.value;
+		if (dial == null) return "";
+		const iso2 = v.getCountriesByDial(String(dial))[0]?.value;
+		if (!iso2) return "";
+		return v.validate({
+			country: { iso2 },
+			phone: phone.value
+		}).full_phone ?? "";
+	}
+	const initialValue = composeE164();
+	const field = (0, vee_validate.useField)(name, options.rules, {
+		initialValue,
+		validateOnValueUpdate: false,
+		...options.fieldOptions
+	});
+	(0, vue.watch)([phone, country], () => {
+		field.value.value = composeE164();
+	}, { flush: "post" });
+	const validating = (0, vue.computed)(() => !!field.meta.pending);
+	const fieldProps = (0, vue.computed)(() => ({
+		name: (0, vue.toValue)(name),
+		error: field.errorMessage.value ?? null,
+		validateOn: options.validateOn ?? "blur",
+		validating: validating.value,
+		defaultCountry: options.defaultCountry
+	}));
+	return {
+		phone,
+		country,
+		e164: (0, vue.computed)(() => field.value.value ?? ""),
+		error: field.errorMessage,
+		validating,
+		meta: field.meta,
+		handleBlur: field.handleBlur,
+		validate: field.validate,
+		setErrors: field.setErrors,
+		resetField: field.resetField,
+		fieldProps
+	};
+}
+//#endregion
+exports.useTelField = useTelField;
+
+//# sourceMappingURL=index.cjs.map

package/dist/vee-validate/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["usePhoneValidation"],"sources":["../../src/vee-validate/useTelField.ts"],"sourcesContent":["/**\n * VeeValidate adapter for `@alikhalilll/a-tel-input`.\n *\n * `useTelField()` owns the two v-models (`phone` + `country`) and the canonical\n * E.164 string used by VeeValidate / Zod / yup, and returns a single ready-to-bind\n * object so a consumer doesn't have to glue the pieces together.\n *\n * Quick start:\n *\n * ```ts\n * import { useTelField } from '@alikhalilll/a-tel-input/vee-validate';\n * import { toTypedSchema } from '@vee-validate/zod';\n * import { z } from 'zod';\n * import { zPhone } from '@alikhalilll/a-tel-input/zod';\n *\n * const { phone, country, error, handleBlur, fieldProps } = useTelField('phone', {\n *   rules: toTypedSchema(zPhone()),\n *   validateOn: 'blur',\n * });\n * ```\n *\n * ```vue\n * <ATelInput\n *   v-model:phone=\"phone\"\n *   v-model:country=\"country\"\n *   v-bind=\"fieldProps\"\n *   @blur=\"handleBlur\"\n * />\n * ```\n *\n * Server-side validation (e.g. \"does this phone already exist?\") plugs in via the\n * `rules` callback — VeeValidate already supports async rules:\n *\n * ```ts\n * const { phone, country, error, handleBlur, fieldProps, validating } = useTelField('phone', {\n *   rules: async (value: string) => {\n *     const sync = await zPhone().safeParseAsync(value);\n *     if (!sync.success) return sync.error.issues[0]!.message;\n *     const res = await $fetch('/api/phone/exists', { query: { phone: value } });\n *     return res.exists ? 'This phone is already registered.' : true;\n *   },\n *   validateOn: 'blur',\n * });\n * ```\n *\n * The `validating` ref is `true` while VeeValidate's async pipeline is in flight —\n * bind it to ATelInput's `:validating` prop to surface a spinner inside the field.\n *\n * `vee-validate` is an **optional peer dependency** — install it yourself in your app.\n */\n\nimport { computed, ref, watch, type ComputedRef, type MaybeRefOrGetter } from 'vue';\nimport { toValue } from 'vue';\nimport { useField, type FieldOptions, type RuleExpression } from 'vee-validate';\nimport { usePhoneValidation } from '../composables/usePhoneValidation';\nimport type { ATelInputValidateOn } from '../composables/useTelInputValidation';\n\nexport interface UseTelFieldOptions {\n  /**\n   * VeeValidate rules — a function, schema, or string. Use when the field stands\n   * alone (no `useForm` / no form-level `validationSchema`).\n   *\n   * **Important**: vee-validate **ignores field-level `rules` whenever the parent\n   * `useForm` is configured with `validationSchema`**. If you need async / server-\n   * side validation inside a form, chain it onto the form schema via\n   * `z.refine(async)` instead — that's what `handleSubmit` actually awaits and what\n   * drives this composable's `validating` ref (via `meta.pending`). See the README\n   * section \"Server-side validation\" for the full pattern.\n   */\n  rules?: RuleExpression<string>;\n  /**\n   * Initial digits-only national number, e.g. `'1066105963'`. Defaults to `''`.\n   */\n  initialPhone?: string;\n  /**\n   * Initial dial-digit number, e.g. `20` for Egypt. Defaults to `null`.\n   */\n  initialCountry?: number | null;\n  /**\n   * Default country (ISO2 like `'EG'` or dial code like `'20'`). Forwarded as the\n   * `defaultCountry` prop on `<ATelInput>` via `fieldProps`.\n   */\n  defaultCountry?: string;\n  /**\n   * When to surface validation in the UI. Defaults to `'blur'` (the typical form-library\n   * UX). Forwarded as the `validateOn` prop on `<ATelInput>` via `fieldProps`.\n   */\n  validateOn?: ATelInputValidateOn;\n  /**\n   * Forwarded to `useField` — extra options passed verbatim to VeeValidate. Use to\n   * configure `keepValueOnUnmount`, `syncVModel`, etc.\n   */\n  fieldOptions?: Omit<FieldOptions<string>, 'initialValue'>;\n}\n\nexport interface UseTelFieldReturn {\n  /** `v-model:phone` source — digits-only national number. Bind to `<ATelInput>`. */\n  phone: import('vue').Ref<string>;\n  /** `v-model:country` source — dial-digit number (e.g., `20`). Bind to `<ATelInput>`. */\n  country: import('vue').Ref<number | null>;\n  /** The canonical E.164 string fed to VeeValidate's schema (read-only). */\n  e164: ComputedRef<string>;\n  /** Current validation error message, or `undefined` when valid. From `useField`. */\n  error: import('vue').Ref<string | undefined>;\n  /** `true` while VeeValidate is running an async rule (e.g. server-side check). */\n  validating: ComputedRef<boolean>;\n  /** Whether the field has been blurred / dirtied / submitted (from VeeValidate `meta`). */\n  meta: ReturnType<typeof useField<string>>['meta'];\n  /** Forward this to `<ATelInput @blur=\"handleBlur\">` so VeeValidate's blur trigger fires. */\n  handleBlur: ReturnType<typeof useField<string>>['handleBlur'];\n  /** Imperatively trigger validation (e.g., after a programmatic value change). */\n  validate: ReturnType<typeof useField<string>>['validate'];\n  /** Imperatively set the error message — useful for server errors not raised by `rules`. */\n  setErrors: ReturnType<typeof useField<string>>['setErrors'];\n  /** Reset the field to its initial state. */\n  resetField: ReturnType<typeof useField<string>>['resetField'];\n  /**\n   * Ready-to-bind prop bag for `<ATelInput v-bind=\"fieldProps\">`. Carries `name`,\n   * `error`, `validateOn`, `validating`, and `defaultCountry`.\n   */\n  fieldProps: ComputedRef<{\n    name: string;\n    error: string | null;\n    validateOn: ATelInputValidateOn;\n    validating: boolean;\n    defaultCountry?: string;\n  }>;\n}\n\n/**\n * Register a phone field with VeeValidate. See file header for usage examples.\n *\n * @param name  The field name (used by VeeValidate, also forwarded to the inner\n *              `<input name=\"\">` for native form submission).\n * @param options See {@link UseTelFieldOptions}.\n */\nexport function useTelField(\n  name: MaybeRefOrGetter<string>,\n  options: UseTelFieldOptions = {}\n): UseTelFieldReturn {\n  const phone = ref<string>(options.initialPhone ?? '');\n  const country = ref<number | null>(options.initialCountry ?? null);\n\n  const v = usePhoneValidation();\n  void v.getCountries();\n\n  // Compose E.164 from the two v-models — this is the canonical value VeeValidate\n  // tracks. NANP (`+1`) resolves to `'US'` for validation; libphonenumber-js applies\n  // the same rule set to every NANP country so this is correct.\n  function composeE164(): string {\n    if (!phone.value) return '';\n    const dial = country.value;\n    if (dial == null) return '';\n    const matches = v.getCountriesByDial(String(dial));\n    const iso2 = matches[0]?.value;\n    if (!iso2) return '';\n    const res = v.validate({ country: { iso2 }, phone: phone.value });\n    return res.full_phone ?? '';\n  }\n\n  const initialValue = composeE164();\n\n  const field = useField<string>(name, options.rules, {\n    initialValue,\n    // Don't run rules on every keystroke — let validateOn drive when validation fires.\n    validateOnValueUpdate: false,\n    ...options.fieldOptions,\n  });\n\n  // Keep VeeValidate's value in sync with the two v-models.\n  watch(\n    [phone, country],\n    () => {\n      field.value.value = composeE164();\n    },\n    { flush: 'post' }\n  );\n\n  const validating = computed(() => !!field.meta.pending);\n\n  const fieldProps = computed(() => ({\n    name: toValue(name),\n    error: (field.errorMessage.value ?? null) as string | null,\n    validateOn: options.validateOn ?? ('blur' as ATelInputValidateOn),\n    validating: validating.value,\n    defaultCountry: options.defaultCountry,\n  }));\n\n  return {\n    phone,\n    country,\n    e164: computed(() => field.value.value ?? ''),\n    error: field.errorMessage,\n    validating,\n    meta: field.meta,\n    handleBlur: field.handleBlur,\n    validate: field.validate,\n    setErrors: field.setErrors,\n    resetField: field.resetField,\n    fieldProps,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIA,SAAgB,YACd,MACA,UAA8B,CAAC,GACZ;CACnB,MAAM,SAAA,GAAA,IAAA,KAAoB,QAAQ,gBAAgB,EAAE;CACpD,MAAM,WAAA,GAAA,IAAA,KAA6B,QAAQ,kBAAkB,IAAI;CAEjE,MAAM,IAAIA,2BAAAA,mBAAmB;CAC7B,EAAO,aAAa;CAKpB,SAAS,cAAsB;EAC7B,IAAI,CAAC,MAAM,OAAO,OAAO;EACzB,MAAM,OAAO,QAAQ;EACrB,IAAI,QAAQ,MAAM,OAAO;EAEzB,MAAM,OADU,EAAE,mBAAmB,OAAO,IAAI,CAC7B,EAAE,IAAI;EACzB,IAAI,CAAC,MAAM,OAAO;EAElB,OADY,EAAE,SAAS;GAAE,SAAS,EAAE,KAAK;GAAG,OAAO,MAAM;EAAM,CACtD,EAAE,cAAc;CAC3B;CAEA,MAAM,eAAe,YAAY;CAEjC,MAAM,SAAA,GAAA,aAAA,UAAyB,MAAM,QAAQ,OAAO;EAClD;EAEA,uBAAuB;EACvB,GAAG,QAAQ;CACb,CAAC;CAGD,CAAA,GAAA,IAAA,OACE,CAAC,OAAO,OAAO,SACT;EACJ,MAAM,MAAM,QAAQ,YAAY;CAClC,GACA,EAAE,OAAO,OAAO,CAClB;CAEA,MAAM,cAAA,GAAA,IAAA,gBAA4B,CAAC,CAAC,MAAM,KAAK,OAAO;CAEtD,MAAM,cAAA,GAAA,IAAA,iBAA6B;EACjC,OAAA,GAAA,IAAA,SAAc,IAAI;EAClB,OAAQ,MAAM,aAAa,SAAS;EACpC,YAAY,QAAQ,cAAe;EACnC,YAAY,WAAW;EACvB,gBAAgB,QAAQ;CAC1B,EAAE;CAEF,OAAO;EACL;EACA;EACA,OAAA,GAAA,IAAA,gBAAqB,MAAM,MAAM,SAAS,EAAE;EAC5C,OAAO,MAAM;EACb;EACA,MAAM,MAAM;EACZ,YAAY,MAAM;EAClB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,YAAY,MAAM;EAClB;CACF;AACF"}

package/dist/vee-validate/index.d.cts

@@ -0,0 +1,86 @@
+import { b as ATelInputValidateOn } from "../_chunks/types.js";
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+import { FieldOptions, RuleExpression, useField } from "vee-validate";
+
+//#region src/vee-validate/useTelField.d.ts
+interface UseTelFieldOptions {
+  /**
+   * VeeValidate rules — a function, schema, or string. Use when the field stands
+   * alone (no `useForm` / no form-level `validationSchema`).
+   *
+   * **Important**: vee-validate **ignores field-level `rules` whenever the parent
+   * `useForm` is configured with `validationSchema`**. If you need async / server-
+   * side validation inside a form, chain it onto the form schema via
+   * `z.refine(async)` instead — that's what `handleSubmit` actually awaits and what
+   * drives this composable's `validating` ref (via `meta.pending`). See the README
+   * section "Server-side validation" for the full pattern.
+   */
+  rules?: RuleExpression<string>;
+  /**
+   * Initial digits-only national number, e.g. `'1066105963'`. Defaults to `''`.
+   */
+  initialPhone?: string;
+  /**
+   * Initial dial-digit number, e.g. `20` for Egypt. Defaults to `null`.
+   */
+  initialCountry?: number | null;
+  /**
+   * Default country (ISO2 like `'EG'` or dial code like `'20'`). Forwarded as the
+   * `defaultCountry` prop on `<ATelInput>` via `fieldProps`.
+   */
+  defaultCountry?: string;
+  /**
+   * When to surface validation in the UI. Defaults to `'blur'` (the typical form-library
+   * UX). Forwarded as the `validateOn` prop on `<ATelInput>` via `fieldProps`.
+   */
+  validateOn?: ATelInputValidateOn;
+  /**
+   * Forwarded to `useField` — extra options passed verbatim to VeeValidate. Use to
+   * configure `keepValueOnUnmount`, `syncVModel`, etc.
+   */
+  fieldOptions?: Omit<FieldOptions<string>, 'initialValue'>;
+}
+interface UseTelFieldReturn {
+  /** `v-model:phone` source — digits-only national number. Bind to `<ATelInput>`. */
+  phone: import('vue').Ref<string>;
+  /** `v-model:country` source — dial-digit number (e.g., `20`). Bind to `<ATelInput>`. */
+  country: import('vue').Ref<number | null>;
+  /** The canonical E.164 string fed to VeeValidate's schema (read-only). */
+  e164: ComputedRef<string>;
+  /** Current validation error message, or `undefined` when valid. From `useField`. */
+  error: import('vue').Ref<string | undefined>;
+  /** `true` while VeeValidate is running an async rule (e.g. server-side check). */
+  validating: ComputedRef<boolean>;
+  /** Whether the field has been blurred / dirtied / submitted (from VeeValidate `meta`). */
+  meta: ReturnType<typeof useField<string>>['meta'];
+  /** Forward this to `<ATelInput @blur="handleBlur">` so VeeValidate's blur trigger fires. */
+  handleBlur: ReturnType<typeof useField<string>>['handleBlur'];
+  /** Imperatively trigger validation (e.g., after a programmatic value change). */
+  validate: ReturnType<typeof useField<string>>['validate'];
+  /** Imperatively set the error message — useful for server errors not raised by `rules`. */
+  setErrors: ReturnType<typeof useField<string>>['setErrors'];
+  /** Reset the field to its initial state. */
+  resetField: ReturnType<typeof useField<string>>['resetField'];
+  /**
+   * Ready-to-bind prop bag for `<ATelInput v-bind="fieldProps">`. Carries `name`,
+   * `error`, `validateOn`, `validating`, and `defaultCountry`.
+   */
+  fieldProps: ComputedRef<{
+    name: string;
+    error: string | null;
+    validateOn: ATelInputValidateOn;
+    validating: boolean;
+    defaultCountry?: string;
+  }>;
+}
+/**
+ * Register a phone field with VeeValidate. See file header for usage examples.
+ *
+ * @param name  The field name (used by VeeValidate, also forwarded to the inner
+ *              `<input name="">` for native form submission).
+ * @param options See {@link UseTelFieldOptions}.
+ */
+declare function useTelField(name: MaybeRefOrGetter<string>, options?: UseTelFieldOptions): UseTelFieldReturn;
+//#endregion
+export { type UseTelFieldOptions, type UseTelFieldReturn, useTelField };
+//# sourceMappingURL=index.d.cts.map

package/dist/vee-validate/index.d.ts

@@ -0,0 +1,86 @@
+import { b as ATelInputValidateOn } from "../_chunks/types.js";
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+import { FieldOptions, RuleExpression, useField } from "vee-validate";
+
+//#region src/vee-validate/useTelField.d.ts
+interface UseTelFieldOptions {
+  /**
+   * VeeValidate rules — a function, schema, or string. Use when the field stands
+   * alone (no `useForm` / no form-level `validationSchema`).
+   *
+   * **Important**: vee-validate **ignores field-level `rules` whenever the parent
+   * `useForm` is configured with `validationSchema`**. If you need async / server-
+   * side validation inside a form, chain it onto the form schema via
+   * `z.refine(async)` instead — that's what `handleSubmit` actually awaits and what
+   * drives this composable's `validating` ref (via `meta.pending`). See the README
+   * section "Server-side validation" for the full pattern.
+   */
+  rules?: RuleExpression<string>;
+  /**
+   * Initial digits-only national number, e.g. `'1066105963'`. Defaults to `''`.
+   */
+  initialPhone?: string;
+  /**
+   * Initial dial-digit number, e.g. `20` for Egypt. Defaults to `null`.
+   */
+  initialCountry?: number | null;
+  /**
+   * Default country (ISO2 like `'EG'` or dial code like `'20'`). Forwarded as the
+   * `defaultCountry` prop on `<ATelInput>` via `fieldProps`.
+   */
+  defaultCountry?: string;
+  /**
+   * When to surface validation in the UI. Defaults to `'blur'` (the typical form-library
+   * UX). Forwarded as the `validateOn` prop on `<ATelInput>` via `fieldProps`.
+   */
+  validateOn?: ATelInputValidateOn;
+  /**
+   * Forwarded to `useField` — extra options passed verbatim to VeeValidate. Use to
+   * configure `keepValueOnUnmount`, `syncVModel`, etc.
+   */
+  fieldOptions?: Omit<FieldOptions<string>, 'initialValue'>;
+}
+interface UseTelFieldReturn {
+  /** `v-model:phone` source — digits-only national number. Bind to `<ATelInput>`. */
+  phone: import('vue').Ref<string>;
+  /** `v-model:country` source — dial-digit number (e.g., `20`). Bind to `<ATelInput>`. */
+  country: import('vue').Ref<number | null>;
+  /** The canonical E.164 string fed to VeeValidate's schema (read-only). */
+  e164: ComputedRef<string>;
+  /** Current validation error message, or `undefined` when valid. From `useField`. */
+  error: import('vue').Ref<string | undefined>;
+  /** `true` while VeeValidate is running an async rule (e.g. server-side check). */
+  validating: ComputedRef<boolean>;
+  /** Whether the field has been blurred / dirtied / submitted (from VeeValidate `meta`). */
+  meta: ReturnType<typeof useField<string>>['meta'];
+  /** Forward this to `<ATelInput @blur="handleBlur">` so VeeValidate's blur trigger fires. */
+  handleBlur: ReturnType<typeof useField<string>>['handleBlur'];
+  /** Imperatively trigger validation (e.g., after a programmatic value change). */
+  validate: ReturnType<typeof useField<string>>['validate'];
+  /** Imperatively set the error message — useful for server errors not raised by `rules`. */
+  setErrors: ReturnType<typeof useField<string>>['setErrors'];
+  /** Reset the field to its initial state. */
+  resetField: ReturnType<typeof useField<string>>['resetField'];
+  /**
+   * Ready-to-bind prop bag for `<ATelInput v-bind="fieldProps">`. Carries `name`,
+   * `error`, `validateOn`, `validating`, and `defaultCountry`.
+   */
+  fieldProps: ComputedRef<{
+    name: string;
+    error: string | null;
+    validateOn: ATelInputValidateOn;
+    validating: boolean;
+    defaultCountry?: string;
+  }>;
+}
+/**
+ * Register a phone field with VeeValidate. See file header for usage examples.
+ *
+ * @param name  The field name (used by VeeValidate, also forwarded to the inner
+ *              `<input name="">` for native form submission).
+ * @param options See {@link UseTelFieldOptions}.
+ */
+declare function useTelField(name: MaybeRefOrGetter<string>, options?: UseTelFieldOptions): UseTelFieldReturn;
+//#endregion
+export { type UseTelFieldOptions, type UseTelFieldReturn, useTelField };
+//# sourceMappingURL=index.d.ts.map

package/dist/vee-validate/index.js

@@ -0,0 +1,112 @@
+import { n as usePhoneValidation } from "../_chunks/usePhoneValidation.js";
+import { computed, ref, toValue, watch } from "vue";
+import { useField } from "vee-validate";
+//#region src/vee-validate/useTelField.ts
+/**
+* VeeValidate adapter for `@alikhalilll/a-tel-input`.
+*
+* `useTelField()` owns the two v-models (`phone` + `country`) and the canonical
+* E.164 string used by VeeValidate / Zod / yup, and returns a single ready-to-bind
+* object so a consumer doesn't have to glue the pieces together.
+*
+* Quick start:
+*
+* ```ts
+* import { useTelField } from '@alikhalilll/a-tel-input/vee-validate';
+* import { toTypedSchema } from '@vee-validate/zod';
+* import { z } from 'zod';
+* import { zPhone } from '@alikhalilll/a-tel-input/zod';
+*
+* const { phone, country, error, handleBlur, fieldProps } = useTelField('phone', {
+*   rules: toTypedSchema(zPhone()),
+*   validateOn: 'blur',
+* });
+* ```
+*
+* ```vue
+* <ATelInput
+*   v-model:phone="phone"
+*   v-model:country="country"
+*   v-bind="fieldProps"
+*   @blur="handleBlur"
+* />
+* ```
+*
+* Server-side validation (e.g. "does this phone already exist?") plugs in via the
+* `rules` callback — VeeValidate already supports async rules:
+*
+* ```ts
+* const { phone, country, error, handleBlur, fieldProps, validating } = useTelField('phone', {
+*   rules: async (value: string) => {
+*     const sync = await zPhone().safeParseAsync(value);
+*     if (!sync.success) return sync.error.issues[0]!.message;
+*     const res = await $fetch('/api/phone/exists', { query: { phone: value } });
+*     return res.exists ? 'This phone is already registered.' : true;
+*   },
+*   validateOn: 'blur',
+* });
+* ```
+*
+* The `validating` ref is `true` while VeeValidate's async pipeline is in flight —
+* bind it to ATelInput's `:validating` prop to surface a spinner inside the field.
+*
+* `vee-validate` is an **optional peer dependency** — install it yourself in your app.
+*/
+/**
+* Register a phone field with VeeValidate. See file header for usage examples.
+*
+* @param name  The field name (used by VeeValidate, also forwarded to the inner
+*              `<input name="">` for native form submission).
+* @param options See {@link UseTelFieldOptions}.
+*/
+function useTelField(name, options = {}) {
+	const phone = ref(options.initialPhone ?? "");
+	const country = ref(options.initialCountry ?? null);
+	const v = usePhoneValidation();
+	v.getCountries();
+	function composeE164() {
+		if (!phone.value) return "";
+		const dial = country.value;
+		if (dial == null) return "";
+		const iso2 = v.getCountriesByDial(String(dial))[0]?.value;
+		if (!iso2) return "";
+		return v.validate({
+			country: { iso2 },
+			phone: phone.value
+		}).full_phone ?? "";
+	}
+	const initialValue = composeE164();
+	const field = useField(name, options.rules, {
+		initialValue,
+		validateOnValueUpdate: false,
+		...options.fieldOptions
+	});
+	watch([phone, country], () => {
+		field.value.value = composeE164();
+	}, { flush: "post" });
+	const validating = computed(() => !!field.meta.pending);
+	const fieldProps = computed(() => ({
+		name: toValue(name),
+		error: field.errorMessage.value ?? null,
+		validateOn: options.validateOn ?? "blur",
+		validating: validating.value,
+		defaultCountry: options.defaultCountry
+	}));
+	return {
+		phone,
+		country,
+		e164: computed(() => field.value.value ?? ""),
+		error: field.errorMessage,
+		validating,
+		meta: field.meta,
+		handleBlur: field.handleBlur,
+		validate: field.validate,
+		setErrors: field.setErrors,
+		resetField: field.resetField,
+		fieldProps
+	};
+}
+//#endregion
+export { useTelField };
+
+//# sourceMappingURL=index.js.map

package/dist/vee-validate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/vee-validate/useTelField.ts"],"sourcesContent":["/**\n * VeeValidate adapter for `@alikhalilll/a-tel-input`.\n *\n * `useTelField()` owns the two v-models (`phone` + `country`) and the canonical\n * E.164 string used by VeeValidate / Zod / yup, and returns a single ready-to-bind\n * object so a consumer doesn't have to glue the pieces together.\n *\n * Quick start:\n *\n * ```ts\n * import { useTelField } from '@alikhalilll/a-tel-input/vee-validate';\n * import { toTypedSchema } from '@vee-validate/zod';\n * import { z } from 'zod';\n * import { zPhone } from '@alikhalilll/a-tel-input/zod';\n *\n * const { phone, country, error, handleBlur, fieldProps } = useTelField('phone', {\n *   rules: toTypedSchema(zPhone()),\n *   validateOn: 'blur',\n * });\n * ```\n *\n * ```vue\n * <ATelInput\n *   v-model:phone=\"phone\"\n *   v-model:country=\"country\"\n *   v-bind=\"fieldProps\"\n *   @blur=\"handleBlur\"\n * />\n * ```\n *\n * Server-side validation (e.g. \"does this phone already exist?\") plugs in via the\n * `rules` callback — VeeValidate already supports async rules:\n *\n * ```ts\n * const { phone, country, error, handleBlur, fieldProps, validating } = useTelField('phone', {\n *   rules: async (value: string) => {\n *     const sync = await zPhone().safeParseAsync(value);\n *     if (!sync.success) return sync.error.issues[0]!.message;\n *     const res = await $fetch('/api/phone/exists', { query: { phone: value } });\n *     return res.exists ? 'This phone is already registered.' : true;\n *   },\n *   validateOn: 'blur',\n * });\n * ```\n *\n * The `validating` ref is `true` while VeeValidate's async pipeline is in flight —\n * bind it to ATelInput's `:validating` prop to surface a spinner inside the field.\n *\n * `vee-validate` is an **optional peer dependency** — install it yourself in your app.\n */\n\nimport { computed, ref, watch, type ComputedRef, type MaybeRefOrGetter } from 'vue';\nimport { toValue } from 'vue';\nimport { useField, type FieldOptions, type RuleExpression } from 'vee-validate';\nimport { usePhoneValidation } from '../composables/usePhoneValidation';\nimport type { ATelInputValidateOn } from '../composables/useTelInputValidation';\n\nexport interface UseTelFieldOptions {\n  /**\n   * VeeValidate rules — a function, schema, or string. Use when the field stands\n   * alone (no `useForm` / no form-level `validationSchema`).\n   *\n   * **Important**: vee-validate **ignores field-level `rules` whenever the parent\n   * `useForm` is configured with `validationSchema`**. If you need async / server-\n   * side validation inside a form, chain it onto the form schema via\n   * `z.refine(async)` instead — that's what `handleSubmit` actually awaits and what\n   * drives this composable's `validating` ref (via `meta.pending`). See the README\n   * section \"Server-side validation\" for the full pattern.\n   */\n  rules?: RuleExpression<string>;\n  /**\n   * Initial digits-only national number, e.g. `'1066105963'`. Defaults to `''`.\n   */\n  initialPhone?: string;\n  /**\n   * Initial dial-digit number, e.g. `20` for Egypt. Defaults to `null`.\n   */\n  initialCountry?: number | null;\n  /**\n   * Default country (ISO2 like `'EG'` or dial code like `'20'`). Forwarded as the\n   * `defaultCountry` prop on `<ATelInput>` via `fieldProps`.\n   */\n  defaultCountry?: string;\n  /**\n   * When to surface validation in the UI. Defaults to `'blur'` (the typical form-library\n   * UX). Forwarded as the `validateOn` prop on `<ATelInput>` via `fieldProps`.\n   */\n  validateOn?: ATelInputValidateOn;\n  /**\n   * Forwarded to `useField` — extra options passed verbatim to VeeValidate. Use to\n   * configure `keepValueOnUnmount`, `syncVModel`, etc.\n   */\n  fieldOptions?: Omit<FieldOptions<string>, 'initialValue'>;\n}\n\nexport interface UseTelFieldReturn {\n  /** `v-model:phone` source — digits-only national number. Bind to `<ATelInput>`. */\n  phone: import('vue').Ref<string>;\n  /** `v-model:country` source — dial-digit number (e.g., `20`). Bind to `<ATelInput>`. */\n  country: import('vue').Ref<number | null>;\n  /** The canonical E.164 string fed to VeeValidate's schema (read-only). */\n  e164: ComputedRef<string>;\n  /** Current validation error message, or `undefined` when valid. From `useField`. */\n  error: import('vue').Ref<string | undefined>;\n  /** `true` while VeeValidate is running an async rule (e.g. server-side check). */\n  validating: ComputedRef<boolean>;\n  /** Whether the field has been blurred / dirtied / submitted (from VeeValidate `meta`). */\n  meta: ReturnType<typeof useField<string>>['meta'];\n  /** Forward this to `<ATelInput @blur=\"handleBlur\">` so VeeValidate's blur trigger fires. */\n  handleBlur: ReturnType<typeof useField<string>>['handleBlur'];\n  /** Imperatively trigger validation (e.g., after a programmatic value change). */\n  validate: ReturnType<typeof useField<string>>['validate'];\n  /** Imperatively set the error message — useful for server errors not raised by `rules`. */\n  setErrors: ReturnType<typeof useField<string>>['setErrors'];\n  /** Reset the field to its initial state. */\n  resetField: ReturnType<typeof useField<string>>['resetField'];\n  /**\n   * Ready-to-bind prop bag for `<ATelInput v-bind=\"fieldProps\">`. Carries `name`,\n   * `error`, `validateOn`, `validating`, and `defaultCountry`.\n   */\n  fieldProps: ComputedRef<{\n    name: string;\n    error: string | null;\n    validateOn: ATelInputValidateOn;\n    validating: boolean;\n    defaultCountry?: string;\n  }>;\n}\n\n/**\n * Register a phone field with VeeValidate. See file header for usage examples.\n *\n * @param name  The field name (used by VeeValidate, also forwarded to the inner\n *              `<input name=\"\">` for native form submission).\n * @param options See {@link UseTelFieldOptions}.\n */\nexport function useTelField(\n  name: MaybeRefOrGetter<string>,\n  options: UseTelFieldOptions = {}\n): UseTelFieldReturn {\n  const phone = ref<string>(options.initialPhone ?? '');\n  const country = ref<number | null>(options.initialCountry ?? null);\n\n  const v = usePhoneValidation();\n  void v.getCountries();\n\n  // Compose E.164 from the two v-models — this is the canonical value VeeValidate\n  // tracks. NANP (`+1`) resolves to `'US'` for validation; libphonenumber-js applies\n  // the same rule set to every NANP country so this is correct.\n  function composeE164(): string {\n    if (!phone.value) return '';\n    const dial = country.value;\n    if (dial == null) return '';\n    const matches = v.getCountriesByDial(String(dial));\n    const iso2 = matches[0]?.value;\n    if (!iso2) return '';\n    const res = v.validate({ country: { iso2 }, phone: phone.value });\n    return res.full_phone ?? '';\n  }\n\n  const initialValue = composeE164();\n\n  const field = useField<string>(name, options.rules, {\n    initialValue,\n    // Don't run rules on every keystroke — let validateOn drive when validation fires.\n    validateOnValueUpdate: false,\n    ...options.fieldOptions,\n  });\n\n  // Keep VeeValidate's value in sync with the two v-models.\n  watch(\n    [phone, country],\n    () => {\n      field.value.value = composeE164();\n    },\n    { flush: 'post' }\n  );\n\n  const validating = computed(() => !!field.meta.pending);\n\n  const fieldProps = computed(() => ({\n    name: toValue(name),\n    error: (field.errorMessage.value ?? null) as string | null,\n    validateOn: options.validateOn ?? ('blur' as ATelInputValidateOn),\n    validating: validating.value,\n    defaultCountry: options.defaultCountry,\n  }));\n\n  return {\n    phone,\n    country,\n    e164: computed(() => field.value.value ?? ''),\n    error: field.errorMessage,\n    validating,\n    meta: field.meta,\n    handleBlur: field.handleBlur,\n    validate: field.validate,\n    setErrors: field.setErrors,\n    resetField: field.resetField,\n    fieldProps,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIA,SAAgB,YACd,MACA,UAA8B,CAAC,GACZ;CACnB,MAAM,QAAQ,IAAY,QAAQ,gBAAgB,EAAE;CACpD,MAAM,UAAU,IAAmB,QAAQ,kBAAkB,IAAI;CAEjE,MAAM,IAAI,mBAAmB;CAC7B,EAAO,aAAa;CAKpB,SAAS,cAAsB;EAC7B,IAAI,CAAC,MAAM,OAAO,OAAO;EACzB,MAAM,OAAO,QAAQ;EACrB,IAAI,QAAQ,MAAM,OAAO;EAEzB,MAAM,OADU,EAAE,mBAAmB,OAAO,IAAI,CAC7B,EAAE,IAAI;EACzB,IAAI,CAAC,MAAM,OAAO;EAElB,OADY,EAAE,SAAS;GAAE,SAAS,EAAE,KAAK;GAAG,OAAO,MAAM;EAAM,CACtD,EAAE,cAAc;CAC3B;CAEA,MAAM,eAAe,YAAY;CAEjC,MAAM,QAAQ,SAAiB,MAAM,QAAQ,OAAO;EAClD;EAEA,uBAAuB;EACvB,GAAG,QAAQ;CACb,CAAC;CAGD,MACE,CAAC,OAAO,OAAO,SACT;EACJ,MAAM,MAAM,QAAQ,YAAY;CAClC,GACA,EAAE,OAAO,OAAO,CAClB;CAEA,MAAM,aAAa,eAAe,CAAC,CAAC,MAAM,KAAK,OAAO;CAEtD,MAAM,aAAa,gBAAgB;EACjC,MAAM,QAAQ,IAAI;EAClB,OAAQ,MAAM,aAAa,SAAS;EACpC,YAAY,QAAQ,cAAe;EACnC,YAAY,WAAW;EACvB,gBAAgB,QAAQ;CAC1B,EAAE;CAEF,OAAO;EACL;EACA;EACA,MAAM,eAAe,MAAM,MAAM,SAAS,EAAE;EAC5C,OAAO,MAAM;EACb;EACA,MAAM,MAAM;EACZ,YAAY,MAAM;EAClB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,YAAY,MAAM;EAClB;CACF;AACF"}