@alikhalilll/ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,1009 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { ClassValue } from 'clsx';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { DialogContentProps } from 'reka-ui';
+import { DialogOverlayProps } from 'reka-ui';
+import { DrawerRootProps } from 'vaul-vue';
+import { DrawerTriggerProps } from 'vaul-vue';
+import { FocusOutsideEvent } from 'reka-ui';
+import { HTMLAttributes } from 'vue';
+import { PointerDownOutsideEvent } from 'reka-ui';
+import { PopoverContentProps } from 'reka-ui';
+import { PopoverRootProps } from 'reka-ui';
+import { PopoverTriggerProps } from 'reka-ui';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { VariantProps } from 'class-variance-authority';
+
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (payload: string | number) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+"onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+}>, {
+size: Size;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_10: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {
+sideOffset: number;
+align: "start" | "center" | "end";
+overlay: boolean;
+breakpoint: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_11: DefineComponent<__VLS_PublicProps_2, {
+validation: ComputedRef<PhoneValidationResult>;
+required: ComputedRef<PhoneRequiredInfo | null>;
+selectedDialCode: ComputedRef<string | null>;
+validationState: ComputedRef<"error" | "idle" | "valid">;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:phone": (value: string) => any;
+"update:country": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
+"onUpdate:phone"?: ((value: string) => any) | undefined;
+"onUpdate:country"?: ((value: string) => any) | undefined;
+}>, {
+size: ATellInputSize;
+placeholder: string;
+ipEndpoint: string;
+defaultCountry: string;
+detectCountry: DetectionStrategy;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_12: DefineComponent<__VLS_PublicProps_3, {
+open: Ref<boolean, boolean>;
+setOpen: (v: boolean) => boolean;
+search: Ref<string, string>;
+setSearch: (v: string) => string;
+selectedCountry: ComputedRef<CountryOption<RestCountry> | null>;
+selectCountry: typeof selectCountry;
+countries: ComputedRef<CountryOption<RestCountry>[]>;
+recents: Ref<string[], string[]>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:selected": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_3> & Readonly<{
+"onUpdate:selected"?: ((value: string) => any) | undefined;
+}>, {
+size: Size;
+searchPlaceholder: string;
+emptyText: string;
+loadingText: string;
+suggestedLabel: string;
+allCountriesLabel: string;
+suggestedLimit: number;
+maxResults: number;
+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<{}>, {
+width: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_2: DefineComponent<PopoverRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:open": (value: boolean) => any;
+}, string, PublicProps, Readonly<PopoverRootProps> & Readonly<{
+"onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+modal: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_3: DefineComponent<PopoverTriggerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PopoverTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_4: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, 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_2> & Readonly<{
+onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
+onFocusOutside?: ((event: FocusOutsideEvent) => any) | undefined;
+onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
+onOpenAutoFocus?: ((event: Event) => any) | undefined;
+onCloseAutoFocus?: ((event: Event) => any) | undefined;
+}>, {
+sideOffset: number;
+align: "start" | "center" | "end";
+overlay: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_5: DefineComponent<DrawerRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:open": (open: boolean) => any;
+animationEnd: (open: boolean) => any;
+drag: (percentageDragged: number) => any;
+release: (open: boolean) => any;
+close: () => any;
+"update:activeSnapPoint": (val: string | number) => any;
+}, string, PublicProps, Readonly<DrawerRootProps> & Readonly<{
+"onUpdate:open"?: ((open: boolean) => any) | undefined;
+onAnimationEnd?: ((open: boolean) => any) | undefined;
+onDrag?: ((percentageDragged: number) => any) | undefined;
+onRelease?: ((open: boolean) => any) | undefined;
+onClose?: (() => any) | undefined;
+"onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+}>, {
+shouldScaleBackground: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+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, {
+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<{
+onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
+onFocusOutside?: ((event: FocusOutsideEvent) => any) | undefined;
+onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
+onOpenAutoFocus?: ((event: Event) => any) | undefined;
+onCloseAutoFocus?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_8: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:open": (value: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+"onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+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<{}>, {
+breakpoint: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_Props = {
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes['class'];
+    /** Classes for the inner &lt;input&gt; element (useful when prefix/suffix are present). */
+    inputClass?: HTMLAttributes['class'];
+    /** Classes for the prefix wrapper. */
+    prefixClass?: HTMLAttributes['class'];
+    /** Classes for the suffix wrapper. */
+    suffixClass?: HTMLAttributes['class'];
+    size?: Size;
+};
+
+declare type __VLS_Props_10 = {
+    /** 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. */
+    width?: number;
+    /** Optional explicit URL override. When set, `iso2` / `width` / `flagUrl` are ignored. */
+    src?: string | null;
+    /** Function `(iso2, width) => string` — fully replace the URL builder. */
+    flagUrl?: FlagUrlBuilder;
+    alt?: string;
+    class?: HTMLAttributes['class'];
+};
+
+declare type __VLS_Props_2 = PopoverContentProps & {
+    class?: HTMLAttributes['class'];
+    /** Render a dimmed, clickable backdrop behind the popover. Pair with `<APopover modal>`. */
+    overlay?: boolean;
+    overlayClass?: HTMLAttributes['class'];
+};
+
+declare type __VLS_Props_3 = DialogContentProps & {
+    class?: HTMLAttributes['class'];
+};
+
+declare type __VLS_Props_4 = DialogOverlayProps & {
+    class?: HTMLAttributes['class'];
+};
+
+declare type __VLS_Props_5 = {
+    /** CSS media query for the desktop break. Below this width we render a vaul drawer. */
+    breakpoint?: string;
+    /**
+     * When true, the popover (desktop) locks page scroll, traps focus, and renders an overlay.
+     * The drawer (mobile) is always modal-like (vaul-vue ships its own overlay + scroll-lock).
+     */
+    modal?: boolean;
+};
+
+declare type __VLS_Props_6 = {
+    breakpoint?: string;
+    asChild?: boolean;
+};
+
+declare type __VLS_Props_7 = {
+    breakpoint?: string;
+    /** Classes applied on both branches. Avoid width / inset classes here. */
+    class?: HTMLAttributes['class'];
+    /** Classes applied only when the popover (desktop) branch is rendered. */
+    popoverClass?: HTMLAttributes['class'];
+    /** Classes applied only when the drawer (mobile) branch is rendered. */
+    drawerClass?: HTMLAttributes['class'];
+    /**
+     * Render the dimmed overlay on the desktop popover branch. Defaults to `false` — popovers
+     * on desktop are non-modal-looking by convention. The mobile drawer always has its own
+     * overlay (vaul-vue's `DrawerOverlay`) regardless of this prop.
+     */
+    overlay?: boolean;
+    align?: 'start' | 'center' | 'end';
+    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_PublicProps = {
+    'open'?: boolean;
+} & __VLS_Props_5;
+
+declare type __VLS_PublicProps_2 = {
+    'phone'?: string;
+    'country'?: string;
+} & __VLS_Props_8;
+
+declare type __VLS_PublicProps_3 = {
+    'selected'?: string;
+} & __VLS_Props_9;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Content rendered inside the input's border, left of the field. */
+        prefix?: () => unknown;
+        /** Content rendered inside the input's border, right of the field. */
+        suffix?: () => unknown;
+    }> & {
+        /** Content rendered inside the input's border, left of the field. */
+        prefix?: () => unknown;
+        /** Content rendered inside the input's border, right of the field. */
+        suffix?: () => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_10(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_11(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Content before the country select trigger (e.g. an icon). */
+        prefix?: () => unknown;
+        /** Content between the input and the validation icons. */
+        suffix?: (props: {
+            validationState: "idle" | "valid" | "error";
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Replace the green check shown when the number validates. */
+        'valid-icon'?: () => unknown;
+        /** Replace the warning icon shown when the number fails validation. */
+        'error-icon'?: (props: {
+            reason: string;
+        }) => unknown;
+        /** Replace the dim helper line shown below the input when empty. */
+        hint?: (props: {
+            country: string;
+            formatHint: string;
+            example: string | null;
+        }) => unknown;
+        /** Replace the error message rendered when invalid. */
+        error?: (props: {
+            message: string;
+            reason: string;
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the chevron. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Forwarded — replace any flag rendering. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Forwarded — replace each country list row. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Forwarded — section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Forwarded — search bar. */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        loading?: () => unknown;
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+    }> & {
+        /** Content before the country select trigger (e.g. an icon). */
+        prefix?: () => unknown;
+        /** Content between the input and the validation icons. */
+        suffix?: (props: {
+            validationState: "idle" | "valid" | "error";
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Replace the green check shown when the number validates. */
+        'valid-icon'?: () => unknown;
+        /** Replace the warning icon shown when the number fails validation. */
+        'error-icon'?: (props: {
+            reason: string;
+        }) => unknown;
+        /** Replace the dim helper line shown below the input when empty. */
+        hint?: (props: {
+            country: string;
+            formatHint: string;
+            example: string | null;
+        }) => unknown;
+        /** Replace the error message rendered when invalid. */
+        error?: (props: {
+            message: string;
+            reason: string;
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the chevron. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Forwarded — replace any flag rendering. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Forwarded — replace each country list row. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Forwarded — section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Forwarded — search bar. */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        loading?: () => unknown;
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_12(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Replace the entire country picker trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Replace the chevron icon. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Replace just the flag rendered in the trigger and items. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Replace the entire search bar (input + icon + kbd). */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        /** Replace the search-bar leading icon. */
+        'search-icon'?: () => unknown;
+        /** Replace the loading state. */
+        loading?: () => unknown;
+        /** Replace the empty/no-results state. */
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+        /** Replace a section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Replace each country list row. Default render still available via &lt;ACountrySelectItem /&gt;. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Replace just the right-side check icon for the selected row. */
+        'item-check'?: (props: {
+            country: CountryOption;
+        }) => unknown;
+    }> & {
+        /** Replace the entire country picker trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Replace the chevron icon. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Replace just the flag rendered in the trigger and items. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Replace the entire search bar (input + icon + kbd). */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        /** Replace the search-bar leading icon. */
+        'search-icon'?: () => unknown;
+        /** Replace the loading state. */
+        loading?: () => unknown;
+        /** Replace the empty/no-results state. */
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+        /** Replace a section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Replace each country list row. Default render still available via &lt;ACountrySelectItem /&gt;. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Replace just the right-side check icon for the selected row. */
+        'item-check'?: (props: {
+            country: CountryOption;
+        }) => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_13(): {
+    attrs: Partial<{}>;
+    slots: {
+        empty?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            open: boolean;
+            close: () => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_4(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_8(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            isDesktop: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_9(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_10 = ReturnType<typeof __VLS_template_10>;
+
+declare type __VLS_TemplateResult_11 = ReturnType<typeof __VLS_template_11>;
+
+declare type __VLS_TemplateResult_12 = ReturnType<typeof __VLS_template_12>;
+
+declare type __VLS_TemplateResult_13 = ReturnType<typeof __VLS_template_13>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+
+declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
+
+declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
+
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
+declare type __VLS_TemplateResult_8 = ReturnType<typeof __VLS_template_8>;
+
+declare type __VLS_TemplateResult_9 = ReturnType<typeof __VLS_template_9>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_10<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_11<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_12<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_13<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_4<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_5<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_8<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_9<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const ACountryFlag: __VLS_WithTemplateSlots_13<typeof __VLS_component_13, __VLS_TemplateResult_13["slots"]>;
+
+export declare const ACountrySelect: __VLS_WithTemplateSlots_12<typeof __VLS_component_12, __VLS_TemplateResult_12["slots"]>;
+
+export declare const ADrawer: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+
+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 ADrawerTrigger: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+
+export declare const AInput: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare const APopover: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export declare const APopoverContent: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+
+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"]>;
+
+export declare const AResponsivePopoverContent: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
+
+export declare const AResponsivePopoverTrigger: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
+
+export declare const ATellInput: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
+
+export declare interface ATellInputProps {
+    class?: HTMLAttributes['class'];
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: ATellInputSize;
+    /**
+     * Whitelist of allowed dial-digit codes (no `+`), e.g. `['20', '966']`.
+     * Countries outside this list are still shown in the picker but rendered as disabled.
+     */
+    allowedDialCodes?: string[];
+    /** Show validation error text beneath the input when invalid. */
+    showValidation?: boolean;
+    /**
+     * Country auto-detect strategy. Defaults to `'auto'` — try IP geolocation first, then
+     * timezone, then `navigator.language`, finally `defaultCountry`.
+     */
+    detectCountry?: DetectionStrategy;
+    /** Fallback ISO2 when detection fails or is disabled. */
+    defaultCountry?: string;
+    /** Override the IP geolocation endpoint. Must return JSON with `country_code` or `country`. */
+    ipEndpoint?: string;
+    /** Localized strings for the country picker UI. */
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    /** Error labels keyed by reason. Each gets a sensible English default. */
+    errorMessages?: Partial<Record<PhoneValidationReason, string>>;
+}
+
+/** Alias for the shared `Size` scale — kept for backwards-friendly naming. */
+export declare type ATellInputSize = Size;
+
+export declare type ATellInputVariants = VariantProps<typeof aTellInputVariants>;
+
+export declare const aTellInputVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare function cn(...inputs: ClassValue[]): string;
+
+/** Tailwind height utility per size. md uses an arbitrary value because 43px isn't on the spacing scale. */
+export declare const controlHeight: Record<Size, string>;
+
+/** Pixel values exposed so non-template code (icons, ResizeObserver, etc.) can read the height. */
+export declare const controlHeightPx: Record<Size, number>;
+
+export declare const controlPaddingX: Record<Size, string>;
+
+export declare const controlTextSize: Record<Size, string>;
+
+export declare interface CountryOption<T = RestCountry> {
+    /** Display label, e.g. "Egypt (+20)". */
+    label: string;
+    /** Stable unique ID — the ISO 3166-1 alpha-2 code, e.g. "EG". */
+    value: string;
+    /** Precomputed normalized string for fast substring search. */
+    search_key: string;
+    raw_data: {
+        iso2: string;
+        dial_code: string;
+        dial_digits: string;
+        name: string;
+        flag: string | null;
+        source: 'restcountries' | 'fallback';
+        original: T;
+    };
+}
+
+export declare const DEFAULT_ERROR_MESSAGES: Record<PhoneValidationReason, string>;
+
+export declare const DEFAULT_SIZE: Size;
+
+/**
+ * Default flag URL builder — flagcdn.com hosts PNG flags at multiple widths and is
+ * generous with caching + no API key required. Swap via the `flagUrl` prop on
+ * ATellInput / ACountrySelect / ACountryFlag to use any other source.
+ */
+export declare function defaultFlagUrl(iso2: string, width?: number): string;
+
+/**
+ * Imperative API. Use this when you want to call detection from outside Vue (e.g. inside a
+ * non-component composable, server middleware, or unit test).
+ */
+export declare function detectCountry(opts?: DetectCountryOptions): Promise<string>;
+
+export declare interface DetectCountryOptions {
+    /**
+     * - `'auto'` — try IP geolocation first, then timezone, then `navigator.language`, then default.
+     * - `'locale'` — skip the network call, use timezone + locale only.
+     * - `'none'` — return `defaultCountry` immediately.
+     */
+    strategy?: DetectionStrategy;
+    /** Endpoint returning a JSON body with a `country_code` (or `country`) field. */
+    ipEndpoint?: string;
+    /** Fallback ISO2 used when every step fails. */
+    defaultCountry?: string;
+    /** Abort the IP request after this many ms. */
+    timeoutMs?: number;
+    /** Persist the resolved country in sessionStorage so re-mounts within the session skip detection. */
+    cache?: boolean;
+}
+
+export declare type DetectionStrategy = 'auto' | 'locale' | 'none';
+
+declare interface ExtendedProps extends ATellInputProps {
+    /** Override the flag URL builder, forwarded to ACountrySelect. */
+    flagUrl?: (iso2: string, width: number) => string;
+    /** Custom search predicate, forwarded to ACountrySelect. */
+    searcher?: (query: string, country: CountryOption) => boolean;
+    /** Provide your own country list, forwarded to ACountrySelect. */
+    countries?: CountryOption[];
+    /**
+     * Fully custom country detection. When provided, this function runs in place of the
+     * built-in chain — `detectCountry`-style options are still honored but the function
+     * receives them and is free to ignore them.
+     */
+    detector?: (options: DetectCountryOptions) => Promise<string | null | undefined>;
+    /** Forwarded to ACountrySelect: classes for the popover content surface. */
+    contentClass?: string;
+    popoverClass?: string;
+    drawerClass?: string;
+    /** Classes for the inner phone field input element. */
+    inputClass?: string;
+    /** Classes for the outer wrapper that holds country select + input. */
+    fieldClass?: string;
+    /** Classes for the helper hint line. */
+    hintClass?: string;
+    /** Classes for the error message line. */
+    errorClass?: string;
+}
+
+export declare type FlagUrlBuilder = (iso2: string, width: number) => string;
+
+export declare interface PhoneRequiredInfo {
+    iso2: string;
+    dial_code: string;
+    /** Empty by default — consumer passes a placeholder via the component prop. */
+    placeholder: string;
+    example_national: string;
+    example_e164: string;
+    national_number_length: {
+        min: number | null;
+        max: number | null;
+    };
+    format_hint: string;
+}
+
+export declare type PhoneValidationReason = 'missing_country' | 'country_not_supported' | 'phone_has_non_digits' | 'too_short' | 'too_long' | 'invalid_phone' | 'parse_failed';
+
+export declare interface PhoneValidationResult {
+    ok: boolean;
+    reason: PhoneValidationReason | null;
+    country: {
+        iso2: string;
+        dial_code: string;
+    } | null;
+    phone: {
+        raw: string | null;
+        digits: string;
+    };
+    full_phone: string | null;
+    required: PhoneRequiredInfo | null;
+    details?: Record<string, unknown>;
+}
+
+export declare interface RestCountry {
+    name?: {
+        common?: string;
+    };
+    cca2?: string;
+    idd?: {
+        root?: string;
+        suffixes?: string[];
+    };
+    flags?: {
+        png?: string;
+        svg?: string;
+    };
+}
+
+declare function selectCountry(option: CountryOption): void;
+
+/**
+ * Shared size scale for every interactive UI component in @alikhalilll/ui.
+ *
+ *   xs = 28px · sm = 36px · md = 43px (default) · lg = 52px · xl = 60px
+ *
+ * Use the {@link controlHeight}, {@link controlPaddingX}, {@link controlTextSize}
+ * maps when building a CVA variant so every component stays in lockstep.
+ */
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const SIZES: readonly Size[];
+
+/**
+ * Reactive wrapper. Kicks off detection in `onMounted` so SSR renders an empty value and the
+ * client patches in the real country once resolved.
+ */
+export declare function useCountryDetection(opts?: DetectCountryOptions): UseCountryDetectionReturn;
+
+export declare interface UseCountryDetectionReturn {
+    /** Resolved ISO2 code. Initially `null` until detection completes. */
+    country: Ref<string | null>;
+    /** True while detection is in flight. */
+    isLoading: Ref<boolean>;
+    /** Manually re-run detection (e.g. after the user changes their VPN). */
+    refresh: () => Promise<string>;
+}
+
+export declare function usePhoneValidation(): UsePhoneValidationReturn;
+
+export declare interface UsePhoneValidationReturn {
+    countries: Ref<CountryOption[]>;
+    isCountriesLoading: Ref<boolean>;
+    getCountries(options?: {
+        force?: boolean;
+    }): Promise<CountryOption[]>;
+    searchCountries(keyword: string, limit?: number): CountryOption[];
+    getCountryByValue(value: string): CountryOption | null;
+    getCountriesByDial(dial: string): CountryOption[];
+    getRequiredInfo(country: {
+        iso2: string;
+        dial_code?: string;
+    }): PhoneRequiredInfo | null;
+    validate(input: ValidateArgs): PhoneValidationResult;
+}
+
+export declare type ValidateArgs = {
+    country: {
+        iso2: string;
+        dial_code?: string;
+    } | null | undefined;
+    phone?: undefined;
+} | {
+    country: {
+        iso2: string;
+        dial_code?: string;
+    } | null | undefined;
+    phone: string | null;
+};
+
+export { }