@alikhalilll/ui 1.0.0 → 1.1.1

package/dist/index.d.ts

@@ -26,7 +26,7 @@ declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, Comp
 size: Size;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_10: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {
+declare const __VLS_component_10: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
 sideOffset: number;
 align: "start" | "center" | "end";
 overlay: boolean;
@@ -40,16 +40,18 @@ selectedDialCode: ComputedRef<string | null>;
 validationState: ComputedRef<"error" | "idle" | "valid">;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:phone": (value: string) => any;
-"update:country": (value: string) => any;
+"update:country": (value: number | null) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
 "onUpdate:phone"?: ((value: string) => any) | undefined;
-"onUpdate:country"?: ((value: string) => any) | undefined;
+"onUpdate:country"?: ((value: number | null) => any) | undefined;
 }>, {
 size: ATellInputSize;
 placeholder: string;
 ipEndpoint: string;
 defaultCountry: string;
 detectCountry: DetectionStrategy;
+detectFromInput: boolean;
+detectDebounceMs: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_12: DefineComponent<__VLS_PublicProps_3, {
@@ -78,7 +80,7 @@ kbdOpen: string | null;
 kbdClose: string | null;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_13: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
+declare const __VLS_component_13: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {
 width: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -132,14 +134,14 @@ shouldScaleBackground: boolean;
 
 declare const __VLS_component_6: DefineComponent<DrawerTriggerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DrawerTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_7: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_7: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 escapeKeyDown: (event: KeyboardEvent) => any;
 pointerDownOutside: (event: PointerDownOutsideEvent) => any;
 focusOutside: (event: FocusOutsideEvent) => any;
 interactOutside: (event: PointerDownOutsideEvent | FocusOutsideEvent) => any;
 openAutoFocus: (event: Event) => any;
 closeAutoFocus: (event: Event) => any;
-}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
 onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
 onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
 onFocusOutside?: ((event: FocusOutsideEvent) => any) | undefined;
@@ -157,7 +159,7 @@ modal: boolean;
 breakpoint: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_9: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {
+declare const __VLS_component_9: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {
 breakpoint: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -175,6 +177,43 @@ declare type __VLS_Props = {
 };
 
 declare type __VLS_Props_10 = {
+    class?: HTMLAttributes['class'];
+    triggerClass?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
+    popoverClass?: HTMLAttributes['class'];
+    drawerClass?: HTMLAttributes['class'];
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    suggestedLabel?: string;
+    allCountriesLabel?: string;
+    /** ISO2 codes that are selectable. Others are listed but disabled. */
+    allowedDialCodes?: string[];
+    disabled?: boolean;
+    /** Drives the trigger button padding + text size. Matches ATellInput's `size`. */
+    size?: Size;
+    /** Max items rendered under the "Suggested" header (current + recents, deduped). */
+    suggestedLimit?: number;
+    /** Cap the number of matching countries shown in search results. */
+    maxResults?: number;
+    /** Override the flag URL builder, e.g. `(iso, w) => \`/flags/${iso}.svg\``. */
+    flagUrl?: (iso2: string, width: number) => string;
+    /**
+     * Custom search predicate. Default: substring match on the precomputed `search_key`.
+     * Return `true` to keep the country in results.
+     */
+    searcher?: (query: string, country: CountryOption) => boolean;
+    /**
+     * Provide your own country list (bypasses the REST Countries fetch). Useful when you
+     * already have a curated subset, an i18n'd list, or want to avoid the network call.
+     */
+    countries?: CountryOption[];
+    /** Override the right-side kbd hints. Pass `null` to hide. */
+    kbdOpen?: string | null;
+    kbdClose?: string | null;
+};
+
+declare type __VLS_Props_11 = {
     /** ISO 3166-1 alpha-2 country code, case-insensitive. */
     iso2: string;
     /** Pixel width served by flagcdn. 40 is crisp at retina up to ~24px wide. */
@@ -189,20 +228,26 @@ declare type __VLS_Props_10 = {
 
 declare type __VLS_Props_2 = PopoverContentProps & {
     class?: HTMLAttributes['class'];
-    /** Render a dimmed, clickable backdrop behind the popover. Pair with `<APopover modal>`. */
+    /** Dim the entire viewport behind the popover and block all interaction with the
+     *  page (clicks are captured by the overlay; body scroll is locked while open).
+     *  Pair with `<APopover :modal="true">` (the default) for the full modal behaviour. */
     overlay?: boolean;
     overlayClass?: HTMLAttributes['class'];
 };
 
-declare type __VLS_Props_3 = DialogContentProps & {
+declare type __VLS_Props_3 = {
+    class?: HTMLAttributes['class'];
+};
+
+declare type __VLS_Props_4 = DialogContentProps & {
     class?: HTMLAttributes['class'];
 };
 
-declare type __VLS_Props_4 = DialogOverlayProps & {
+declare type __VLS_Props_5 = DialogOverlayProps & {
     class?: HTMLAttributes['class'];
 };
 
-declare type __VLS_Props_5 = {
+declare type __VLS_Props_6 = {
     /** CSS media query for the desktop break. Below this width we render a vaul drawer. */
     breakpoint?: string;
     /**
@@ -212,12 +257,12 @@ declare type __VLS_Props_5 = {
     modal?: boolean;
 };
 
-declare type __VLS_Props_6 = {
+declare type __VLS_Props_7 = {
     breakpoint?: string;
     asChild?: boolean;
 };
 
-declare type __VLS_Props_7 = {
+declare type __VLS_Props_8 = {
     breakpoint?: string;
     /** Classes applied on both branches. Avoid width / inset classes here. */
     class?: HTMLAttributes['class'];
@@ -235,57 +280,20 @@ declare type __VLS_Props_7 = {
     sideOffset?: number;
 };
 
-declare type __VLS_Props_8 = ExtendedProps;
-
-declare type __VLS_Props_9 = {
-    class?: HTMLAttributes['class'];
-    triggerClass?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
-    popoverClass?: HTMLAttributes['class'];
-    drawerClass?: HTMLAttributes['class'];
-    searchPlaceholder?: string;
-    emptyText?: string;
-    loadingText?: string;
-    suggestedLabel?: string;
-    allCountriesLabel?: string;
-    /** ISO2 codes that are selectable. Others are listed but disabled. */
-    allowedDialCodes?: string[];
-    disabled?: boolean;
-    /** Drives the trigger button padding + text size. Matches ATellInput's `size`. */
-    size?: Size;
-    /** Max items rendered under the "Suggested" header (current + recents, deduped). */
-    suggestedLimit?: number;
-    /** Cap the number of matching countries shown in search results. */
-    maxResults?: number;
-    /** Override the flag URL builder, e.g. `(iso, w) => \`/flags/${iso}.svg\``. */
-    flagUrl?: (iso2: string, width: number) => string;
-    /**
-     * Custom search predicate. Default: substring match on the precomputed `search_key`.
-     * Return `true` to keep the country in results.
-     */
-    searcher?: (query: string, country: CountryOption) => boolean;
-    /**
-     * Provide your own country list (bypasses the REST Countries fetch). Useful when you
-     * already have a curated subset, an i18n'd list, or want to avoid the network call.
-     */
-    countries?: CountryOption[];
-    /** Override the right-side kbd hints. Pass `null` to hide. */
-    kbdOpen?: string | null;
-    kbdClose?: string | null;
-};
+declare type __VLS_Props_9 = ExtendedProps;
 
 declare type __VLS_PublicProps = {
     'open'?: boolean;
-} & __VLS_Props_5;
+} & __VLS_Props_6;
 
 declare type __VLS_PublicProps_2 = {
     'phone'?: string;
-    'country'?: string;
-} & __VLS_Props_8;
+    'country'?: number | null;
+} & __VLS_Props_9;
 
 declare type __VLS_PublicProps_3 = {
     'selected'?: string;
-} & __VLS_Props_9;
+} & __VLS_Props_10;
 
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -744,7 +752,7 @@ export declare const ADrawer: __VLS_WithTemplateSlots_5<typeof __VLS_component_5
 
 export declare const ADrawerContent: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
 
-export declare const ADrawerOverlay: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export declare const ADrawerOverlay: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const ADrawerTrigger: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
@@ -754,6 +762,8 @@ export declare const APopover: __VLS_WithTemplateSlots_2<typeof __VLS_component_
 
 export declare const APopoverContent: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
+export declare const APopoverOverlay: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 export declare const APopoverTrigger: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
 export declare const AResponsivePopover: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
@@ -782,7 +792,11 @@ export declare interface ATellInputProps {
      * timezone, then `navigator.language`, finally `defaultCountry`.
      */
     detectCountry?: DetectionStrategy;
-    /** Fallback ISO2 when detection fails or is disabled. */
+    /**
+     * Initial country. Accepts either an ISO2 code (`'EG'`) or a dial-digit string
+     * (`'20'`, `'+20'`). When set, the picker is visible at mount with this country
+     * pre-selected — overrides the hidden-until-detected default.
+     */
     defaultCountry?: string;
     /** Override the IP geolocation endpoint. Must return JSON with `country_code` or `country`. */
     ipEndpoint?: string;
@@ -792,6 +806,19 @@ export declare interface ATellInputProps {
     loadingText?: string;
     /** Error labels keyed by reason. Each gets a sensible English default. */
     errorMessages?: Partial<Record<PhoneValidationReason, string>>;
+    /**
+     * When true, the country picker is hidden until a leading dial code is detected in the
+     * phone input. Every keystroke runs a longest-prefix match against known dial codes; on
+     * first match the picker reveals with that country and the matched dial digits are
+     * stripped from `phone`. Skips the onMount IP/timezone/locale detection chain.
+     */
+    detectFromInput?: boolean;
+    /**
+     * Debounce window (ms) for `detectFromInput` detection. Each keystroke schedules the
+     * libphonenumber parse + lookup; bursts of typing/paste collapse into a single call.
+     * Clearing the input is not debounced — the picker hides immediately. Default 150ms.
+     */
+    detectDebounceMs?: number;
 }
 
 /** Alias for the shared `Size` scale — kept for backwards-friendly naming. */