@alikhalilll/ui 1.2.1 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/README.md +68 -45
  2. package/dist/assets/styles.css +2 -74
  3. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs +113 -0
  4. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs.map +1 -0
  5. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs +1606 -0
  6. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D4odgAna.mjs.map +1 -0
  7. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs +241 -0
  8. package/dist/chunks/useEventScrollLock-BcP8fg-L.mjs.map +1 -0
  9. package/dist/entries/drawer/components/ADrawer.vue.d.ts +27 -0
  10. package/dist/entries/drawer/components/ADrawer.vue.d.ts.map +1 -0
  11. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts +29 -0
  12. package/dist/entries/drawer/components/ADrawerContent.vue.d.ts.map +1 -0
  13. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts +9 -0
  14. package/dist/entries/drawer/components/ADrawerOverlay.vue.d.ts.map +1 -0
  15. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts +11 -0
  16. package/dist/entries/drawer/components/ADrawerTrigger.vue.d.ts.map +1 -0
  17. package/dist/entries/drawer/index.d.ts +5 -0
  18. package/dist/entries/drawer/index.d.ts.map +1 -0
  19. package/dist/entries/input/components/AInput.vue.d.ts +32 -0
  20. package/dist/entries/input/components/AInput.vue.d.ts.map +1 -0
  21. package/dist/entries/input/index.d.ts +2 -0
  22. package/dist/entries/input/index.d.ts.map +1 -0
  23. package/dist/entries/popover/components/APopover.vue.d.ts +20 -0
  24. package/dist/entries/popover/components/APopover.vue.d.ts.map +1 -0
  25. package/dist/entries/popover/components/APopoverContent.vue.d.ts +44 -0
  26. package/dist/entries/popover/components/APopoverContent.vue.d.ts.map +1 -0
  27. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts +17 -0
  28. package/dist/entries/popover/components/APopoverOverlay.vue.d.ts.map +1 -0
  29. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts +11 -0
  30. package/dist/entries/popover/components/APopoverTrigger.vue.d.ts.map +1 -0
  31. package/dist/entries/popover/composables/useEventScrollLock.d.ts +21 -0
  32. package/dist/entries/popover/composables/useEventScrollLock.d.ts.map +1 -0
  33. package/dist/entries/popover/index.d.ts +6 -0
  34. package/dist/entries/popover/index.d.ts.map +1 -0
  35. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts +46 -0
  36. package/dist/entries/responsive-popover/components/AResponsivePopover.vue.d.ts.map +1 -0
  37. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts +35 -0
  38. package/dist/entries/responsive-popover/components/AResponsivePopoverContent.vue.d.ts.map +1 -0
  39. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts +16 -0
  40. package/dist/entries/responsive-popover/components/AResponsivePopoverTrigger.vue.d.ts.map +1 -0
  41. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts +10 -0
  42. package/dist/entries/responsive-popover/composables/useResponsivePopoverContext.d.ts.map +1 -0
  43. package/dist/entries/responsive-popover/index.d.ts +4 -0
  44. package/dist/entries/responsive-popover/index.d.ts.map +1 -0
  45. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts +26 -0
  46. package/dist/entries/tell-input/components/ACountryFlag.vue.d.ts.map +1 -0
  47. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts +136 -0
  48. package/dist/entries/tell-input/components/ACountrySelect.vue.d.ts.map +1 -0
  49. package/dist/entries/tell-input/components/ATellInput.vue.d.ts +141 -0
  50. package/dist/entries/tell-input/components/ATellInput.vue.d.ts.map +1 -0
  51. package/dist/entries/tell-input/composables/useCountryDetection.d.ts +44 -0
  52. package/dist/entries/tell-input/composables/useCountryDetection.d.ts.map +1 -0
  53. package/dist/entries/tell-input/composables/useCountryMatching.d.ts +44 -0
  54. package/dist/entries/tell-input/composables/useCountryMatching.d.ts.map +1 -0
  55. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts +110 -0
  56. package/dist/entries/tell-input/composables/usePhoneValidation.d.ts.map +1 -0
  57. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts +67 -0
  58. package/dist/entries/tell-input/composables/useTellInputValidation.d.ts.map +1 -0
  59. package/dist/entries/tell-input/composables/useTypingPhase.d.ts +50 -0
  60. package/dist/entries/tell-input/composables/useTypingPhase.d.ts.map +1 -0
  61. package/dist/entries/tell-input/index.d.ts +12 -0
  62. package/dist/entries/tell-input/index.d.ts.map +1 -0
  63. package/dist/entries/tell-input/utils/digits.d.ts +22 -0
  64. package/dist/entries/tell-input/utils/digits.d.ts.map +1 -0
  65. package/dist/entries/tell-input/utils/flag-url.d.ts +8 -0
  66. package/dist/entries/tell-input/utils/flag-url.d.ts.map +1 -0
  67. package/dist/entries/tell-input/utils/types.d.ts +120 -0
  68. package/dist/entries/tell-input/utils/types.d.ts.map +1 -0
  69. package/dist/index.d.ts +7 -1139
  70. package/dist/index.d.ts.map +1 -0
  71. package/dist/index.mjs +39 -33
  72. package/dist/popover.mjs +5 -4
  73. package/dist/responsive-popover.mjs +1 -1
  74. package/dist/tell-input.mjs +14 -9
  75. package/dist/utils/cn.d.ts +3 -0
  76. package/dist/utils/cn.d.ts.map +1 -0
  77. package/dist/utils/index.d.ts +3 -0
  78. package/dist/utils/index.d.ts.map +1 -0
  79. package/dist/{utils.d.ts → utils/sizes.d.ts} +18 -29
  80. package/dist/utils/sizes.d.ts.map +1 -0
  81. package/package.json +14 -10
  82. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-CjiJ12DR.mjs +0 -132
  83. package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-CjiJ12DR.mjs.map +0 -1
  84. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-5YbO6FdM.mjs +0 -92
  85. package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-5YbO6FdM.mjs.map +0 -1
  86. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs +0 -1489
  87. package/dist/chunks/ATellInput.vue_vue_type_script_setup_true_lang-D7hPj1g1.mjs.map +0 -1
  88. package/dist/drawer.d.ts +0 -116
  89. package/dist/input.d.ts +0 -65
  90. package/dist/popover.d.ts +0 -117
  91. package/dist/responsive-popover.d.ts +0 -124
  92. package/dist/tell-input.d.ts +0 -740
@@ -1,740 +0,0 @@
1
- import { ClassProp } from 'class-variance-authority/types';
2
- import { ComponentOptionsMixin } from 'vue';
3
- import { ComponentProvideOptions } from 'vue';
4
- import { ComputedRef } from 'vue';
5
- import { DefineComponent } from 'vue';
6
- import { HTMLAttributes } from 'vue';
7
- import { PublicProps } from 'vue';
8
- import { Ref } from 'vue';
9
- import { VariantProps } from 'class-variance-authority';
10
-
11
- declare const __VLS_component: DefineComponent<__VLS_PublicProps, {
12
- validation: ComputedRef<PhoneValidationResult>;
13
- required: ComputedRef<PhoneRequiredInfo | null>;
14
- selectedDialCode: ComputedRef<string | null>;
15
- validationState: ComputedRef<"error" | "idle" | "valid">;
16
- }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
17
- "update:phone": (value: string) => any;
18
- "update:country": (value: number | null) => any;
19
- }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
20
- "onUpdate:phone"?: ((value: string) => any) | undefined;
21
- "onUpdate:country"?: ((value: number | null) => any) | undefined;
22
- }>, {
23
- size: ATellInputSize;
24
- placeholder: string;
25
- ipEndpoint: string;
26
- defaultCountry: string;
27
- showValidationIcon: boolean;
28
- detectCountry: DetectionStrategy;
29
- detectFromInput: boolean;
30
- detectDebounceMs: number;
31
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
32
-
33
- declare const __VLS_component_2: DefineComponent<__VLS_PublicProps_2, {
34
- open: Ref<boolean, boolean>;
35
- setOpen: (v: boolean) => boolean;
36
- search: Ref<string, string>;
37
- setSearch: (v: string) => string;
38
- selectedCountry: ComputedRef<CountryOption<RestCountry> | null>;
39
- selectCountry: typeof selectCountry;
40
- countries: ComputedRef<CountryOption<RestCountry>[]>;
41
- recents: Ref<string[], string[]>;
42
- }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
43
- "update:selected": (value: string) => any;
44
- }, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
45
- "onUpdate:selected"?: ((value: string) => any) | undefined;
46
- }>, {
47
- size: Size;
48
- searchPlaceholder: string;
49
- emptyText: string;
50
- loadingText: string;
51
- suggestedLabel: string;
52
- allCountriesLabel: string;
53
- countryLabel: string;
54
- selectCountryLabel: string;
55
- suggestedLimit: number;
56
- maxResults: number;
57
- kbdOpen: string | null;
58
- kbdClose: string | null;
59
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
60
-
61
- declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
62
- width: number;
63
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
64
-
65
- declare type __VLS_Props = ExtendedProps;
66
-
67
- declare type __VLS_Props_2 = {
68
- class?: HTMLAttributes['class'];
69
- triggerClass?: HTMLAttributes['class'];
70
- contentClass?: HTMLAttributes['class'];
71
- popoverClass?: HTMLAttributes['class'];
72
- drawerClass?: HTMLAttributes['class'];
73
- searchPlaceholder?: string;
74
- emptyText?: string;
75
- loadingText?: string;
76
- suggestedLabel?: string;
77
- allCountriesLabel?: string;
78
- /** ISO2 codes that are selectable. Others are listed but disabled. */
79
- allowedDialCodes?: string[];
80
- disabled?: boolean;
81
- /** Drives the trigger button padding + text size. Matches ATellInput's `size`. */
82
- size?: Size;
83
- /** Max items rendered under the "Suggested" header (current + recents, deduped). */
84
- suggestedLimit?: number;
85
- /** Cap the number of matching countries shown in search results. */
86
- maxResults?: number;
87
- /** Override the flag URL builder, e.g. `(iso, w) => \`/flags/${iso}.svg\``. */
88
- flagUrl?: (iso2: string, width: number) => string;
89
- /**
90
- * Custom search predicate. Default: substring match on the precomputed `search_key`.
91
- * Return `true` to keep the country in results.
92
- */
93
- searcher?: (query: string, country: CountryOption) => boolean;
94
- /**
95
- * Provide your own country list (bypasses the REST Countries fetch). Useful when you
96
- * already have a curated subset, an i18n'd list, or want to avoid the network call.
97
- */
98
- countries?: CountryOption[];
99
- /** Override the right-side kbd hints. Pass `null` to hide. */
100
- kbdOpen?: string | null;
101
- kbdClose?: string | null;
102
- /** BCP-47 locale — country names render localized via `Intl.DisplayNames`. */
103
- locale?: string;
104
- /** Prefix of the trigger's `aria-label` when a country is selected, e.g. `"Country"`. */
105
- countryLabel?: string;
106
- /** Trigger's `aria-label` when no country is selected. */
107
- selectCountryLabel?: string;
108
- };
109
-
110
- declare type __VLS_Props_3 = {
111
- /** ISO 3166-1 alpha-2 country code, case-insensitive. */
112
- iso2: string;
113
- /** Pixel width served by flagcdn. 40 is crisp at retina up to ~24px wide. */
114
- width?: number;
115
- /** Optional explicit URL override. When set, `iso2` / `width` / `flagUrl` are ignored. */
116
- src?: string | null;
117
- /** Function `(iso2, width) => string` — fully replace the URL builder. */
118
- flagUrl?: FlagUrlBuilder;
119
- alt?: string;
120
- class?: HTMLAttributes['class'];
121
- };
122
-
123
- declare type __VLS_PublicProps = {
124
- 'phone'?: string;
125
- 'country'?: number | null;
126
- } & __VLS_Props;
127
-
128
- declare type __VLS_PublicProps_2 = {
129
- 'selected'?: string;
130
- } & __VLS_Props_2;
131
-
132
- declare function __VLS_template(): {
133
- attrs: Partial<{}>;
134
- slots: Readonly<{
135
- /** Content before the country select trigger (e.g. an icon). */
136
- prefix?: () => unknown;
137
- /** Content between the input and the validation icons. */
138
- suffix?: (props: {
139
- validationState: "idle" | "valid" | "error";
140
- validation: PhoneValidationResult;
141
- }) => unknown;
142
- /** Replace the green check shown when the number validates. */
143
- 'valid-icon'?: () => unknown;
144
- /** Replace the warning icon shown when the number fails validation. */
145
- 'error-icon'?: (props: {
146
- reason: string;
147
- }) => unknown;
148
- /** Replace the dim helper line shown below the input when empty. */
149
- hint?: (props: {
150
- country: string;
151
- formatHint: string;
152
- example: string | null;
153
- }) => unknown;
154
- /** Replace the error message rendered when invalid. */
155
- error?: (props: {
156
- message: string;
157
- reason: string;
158
- validation: PhoneValidationResult;
159
- }) => unknown;
160
- /** Forwarded to ACountrySelect — replace the trigger button. */
161
- trigger?: (props: {
162
- selectedCountry: CountryOption | null;
163
- open: boolean;
164
- sizeClasses: string;
165
- }) => unknown;
166
- /** Forwarded to ACountrySelect — replace the chevron. */
167
- chevron?: (props: {
168
- open: boolean;
169
- }) => unknown;
170
- /** Forwarded — replace any flag rendering. */
171
- flag?: (props: {
172
- country: CountryOption;
173
- context: "trigger" | "item";
174
- }) => unknown;
175
- /** Forwarded — replace each country list row. */
176
- item?: (props: {
177
- country: CountryOption;
178
- selected: boolean;
179
- disabled: boolean;
180
- select: () => void;
181
- }) => unknown;
182
- /** Forwarded — section header. */
183
- 'group-header'?: (props: {
184
- label: string;
185
- group: "suggested" | "all";
186
- }) => unknown;
187
- /** Forwarded — search bar. */
188
- search?: (props: {
189
- value: string;
190
- setValue: (v: string) => void;
191
- isSearching: boolean;
192
- }) => unknown;
193
- loading?: () => unknown;
194
- empty?: (props: {
195
- query: string;
196
- }) => unknown;
197
- }> & {
198
- /** Content before the country select trigger (e.g. an icon). */
199
- prefix?: () => unknown;
200
- /** Content between the input and the validation icons. */
201
- suffix?: (props: {
202
- validationState: "idle" | "valid" | "error";
203
- validation: PhoneValidationResult;
204
- }) => unknown;
205
- /** Replace the green check shown when the number validates. */
206
- 'valid-icon'?: () => unknown;
207
- /** Replace the warning icon shown when the number fails validation. */
208
- 'error-icon'?: (props: {
209
- reason: string;
210
- }) => unknown;
211
- /** Replace the dim helper line shown below the input when empty. */
212
- hint?: (props: {
213
- country: string;
214
- formatHint: string;
215
- example: string | null;
216
- }) => unknown;
217
- /** Replace the error message rendered when invalid. */
218
- error?: (props: {
219
- message: string;
220
- reason: string;
221
- validation: PhoneValidationResult;
222
- }) => unknown;
223
- /** Forwarded to ACountrySelect — replace the trigger button. */
224
- trigger?: (props: {
225
- selectedCountry: CountryOption | null;
226
- open: boolean;
227
- sizeClasses: string;
228
- }) => unknown;
229
- /** Forwarded to ACountrySelect — replace the chevron. */
230
- chevron?: (props: {
231
- open: boolean;
232
- }) => unknown;
233
- /** Forwarded — replace any flag rendering. */
234
- flag?: (props: {
235
- country: CountryOption;
236
- context: "trigger" | "item";
237
- }) => unknown;
238
- /** Forwarded — replace each country list row. */
239
- item?: (props: {
240
- country: CountryOption;
241
- selected: boolean;
242
- disabled: boolean;
243
- select: () => void;
244
- }) => unknown;
245
- /** Forwarded — section header. */
246
- 'group-header'?: (props: {
247
- label: string;
248
- group: "suggested" | "all";
249
- }) => unknown;
250
- /** Forwarded — search bar. */
251
- search?: (props: {
252
- value: string;
253
- setValue: (v: string) => void;
254
- isSearching: boolean;
255
- }) => unknown;
256
- loading?: () => unknown;
257
- empty?: (props: {
258
- query: string;
259
- }) => unknown;
260
- };
261
- refs: {};
262
- rootEl: HTMLDivElement;
263
- };
264
-
265
- declare function __VLS_template_2(): {
266
- attrs: Partial<{}>;
267
- slots: Readonly<{
268
- /** Replace the entire country picker trigger button. */
269
- trigger?: (props: {
270
- selectedCountry: CountryOption | null;
271
- open: boolean;
272
- sizeClasses: string;
273
- }) => unknown;
274
- /** Replace the chevron icon. */
275
- chevron?: (props: {
276
- open: boolean;
277
- }) => unknown;
278
- /** Replace just the flag rendered in the trigger and items. */
279
- flag?: (props: {
280
- country: CountryOption;
281
- context: "trigger" | "item";
282
- }) => unknown;
283
- /** Replace the entire search bar (input + icon + kbd). */
284
- search?: (props: {
285
- value: string;
286
- setValue: (v: string) => void;
287
- isSearching: boolean;
288
- }) => unknown;
289
- /** Replace the search-bar leading icon. */
290
- 'search-icon'?: () => unknown;
291
- /** Replace the loading state. */
292
- loading?: () => unknown;
293
- /** Replace the empty/no-results state. */
294
- empty?: (props: {
295
- query: string;
296
- }) => unknown;
297
- /** Replace a section header. */
298
- 'group-header'?: (props: {
299
- label: string;
300
- group: "suggested" | "all";
301
- }) => unknown;
302
- /** Replace each country list row. Default render still available via &lt;ACountrySelectItem /&gt;. */
303
- item?: (props: {
304
- country: CountryOption;
305
- selected: boolean;
306
- disabled: boolean;
307
- select: () => void;
308
- }) => unknown;
309
- /** Replace just the right-side check icon for the selected row. */
310
- 'item-check'?: (props: {
311
- country: CountryOption;
312
- }) => unknown;
313
- }> & {
314
- /** Replace the entire country picker trigger button. */
315
- trigger?: (props: {
316
- selectedCountry: CountryOption | null;
317
- open: boolean;
318
- sizeClasses: string;
319
- }) => unknown;
320
- /** Replace the chevron icon. */
321
- chevron?: (props: {
322
- open: boolean;
323
- }) => unknown;
324
- /** Replace just the flag rendered in the trigger and items. */
325
- flag?: (props: {
326
- country: CountryOption;
327
- context: "trigger" | "item";
328
- }) => unknown;
329
- /** Replace the entire search bar (input + icon + kbd). */
330
- search?: (props: {
331
- value: string;
332
- setValue: (v: string) => void;
333
- isSearching: boolean;
334
- }) => unknown;
335
- /** Replace the search-bar leading icon. */
336
- 'search-icon'?: () => unknown;
337
- /** Replace the loading state. */
338
- loading?: () => unknown;
339
- /** Replace the empty/no-results state. */
340
- empty?: (props: {
341
- query: string;
342
- }) => unknown;
343
- /** Replace a section header. */
344
- 'group-header'?: (props: {
345
- label: string;
346
- group: "suggested" | "all";
347
- }) => unknown;
348
- /** Replace each country list row. Default render still available via &lt;ACountrySelectItem /&gt;. */
349
- item?: (props: {
350
- country: CountryOption;
351
- selected: boolean;
352
- disabled: boolean;
353
- select: () => void;
354
- }) => unknown;
355
- /** Replace just the right-side check icon for the selected row. */
356
- 'item-check'?: (props: {
357
- country: CountryOption;
358
- }) => unknown;
359
- };
360
- refs: {};
361
- rootEl: any;
362
- };
363
-
364
- declare function __VLS_template_3(): {
365
- attrs: Partial<{}>;
366
- slots: {
367
- empty?(_: {}): any;
368
- };
369
- refs: {};
370
- rootEl: any;
371
- };
372
-
373
- declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
374
-
375
- declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
376
-
377
- declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
378
-
379
- declare type __VLS_WithTemplateSlots<T, S> = T & {
380
- new (): {
381
- $slots: S;
382
- };
383
- };
384
-
385
- declare type __VLS_WithTemplateSlots_2<T, S> = T & {
386
- new (): {
387
- $slots: S;
388
- };
389
- };
390
-
391
- declare type __VLS_WithTemplateSlots_3<T, S> = T & {
392
- new (): {
393
- $slots: S;
394
- };
395
- };
396
-
397
- export declare const ACountryFlag: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
398
-
399
- export declare const ACountrySelect: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
400
-
401
- export declare const ATellInput: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
402
-
403
- /** Text direction for the field. `'auto'` (or omitting the prop) inherits from the
404
- * nearest `[dir]` ancestor / `<html dir>`; `'ltr'` / `'rtl'` force it. */
405
- export declare type ATellInputDir = 'ltr' | 'rtl' | 'auto';
406
-
407
- export declare interface ATellInputProps {
408
- class?: HTMLAttributes['class'];
409
- placeholder?: string;
410
- disabled?: boolean;
411
- loading?: boolean;
412
- size?: ATellInputSize;
413
- /**
414
- * Text direction. Omit (or pass `'auto'`) to inherit from the page — RTL pages get an
415
- * RTL field automatically. Pass `'ltr'` / `'rtl'` to force it.
416
- */
417
- dir?: ATellInputDir;
418
- /**
419
- * BCP-47 locale (e.g. `'ar'`, `'fr'`). When set, country names render localized via
420
- * `Intl.DisplayNames` and the format hint uses the locale's numerals.
421
- */
422
- locale?: string;
423
- /**
424
- * Localized UI strings. A single bag covering the picker, validation errors, and a11y
425
- * labels. Individual props (`searchPlaceholder`, `emptyText`, `loadingText`,
426
- * `errorMessages`) take precedence over the matching `messages` key when both are set.
427
- */
428
- messages?: TellInputMessagesInput;
429
- /**
430
- * Whitelist of allowed dial-digit codes (no `+`), e.g. `['20', '966']`.
431
- * Countries outside this list are still shown in the picker but rendered as disabled.
432
- */
433
- allowedDialCodes?: string[];
434
- /** Light up the field's validation styling — coloured border + ring on the input and the
435
- * error message line below — when the number is valid / invalid. Default `false`, so the
436
- * field stays neutral and validation surfacing is left to the consumer (via the
437
- * `validation` ref exposure). */
438
- showValidation?: boolean;
439
- /** Show the green check / red alert icon at the end of the field. Default `false`; opt
440
- * in with `true`. Independent of `showValidation` — you can show the icon without the
441
- * coloured field, or vice versa. The slots `#valid-icon` / `#error-icon` still apply. */
442
- showValidationIcon?: boolean;
443
- /**
444
- * Country auto-detect strategy. Defaults to `'auto'` — try IP geolocation first, then
445
- * timezone, then `navigator.language`, finally `defaultCountry`.
446
- */
447
- detectCountry?: DetectionStrategy;
448
- /**
449
- * Initial country. Accepts either an ISO2 code (`'EG'`) or a dial-digit string
450
- * (`'20'`, `'+20'`). When set, the picker is visible at mount with this country
451
- * pre-selected — overrides the hidden-until-detected default.
452
- */
453
- defaultCountry?: string;
454
- /** Override the IP geolocation endpoint. Must return JSON with `country_code` or `country`. */
455
- ipEndpoint?: string;
456
- /** Localized strings for the country picker UI. */
457
- searchPlaceholder?: string;
458
- emptyText?: string;
459
- loadingText?: string;
460
- /** Error labels keyed by reason. Each gets a sensible English default. */
461
- errorMessages?: Partial<Record<PhoneValidationReason, string>>;
462
- /**
463
- * When true, the country picker is hidden until a leading dial code is detected in the
464
- * phone input. Every keystroke runs a longest-prefix match against known dial codes; on
465
- * first match the picker reveals with that country and the matched dial digits are
466
- * stripped from `phone`. Skips the onMount IP/timezone/locale detection chain.
467
- */
468
- detectFromInput?: boolean;
469
- /**
470
- * Debounce window (ms) for `detectFromInput` detection. Each keystroke schedules the
471
- * libphonenumber parse + lookup; bursts of typing/paste collapse into a single call.
472
- * Clearing the input is not debounced — the picker hides immediately. Default 150ms.
473
- */
474
- detectDebounceMs?: number;
475
- }
476
-
477
- /** Alias for the shared `Size` scale — kept for backwards-friendly naming. */
478
- export declare type ATellInputSize = Size;
479
-
480
- export declare type ATellInputVariants = VariantProps<typeof aTellInputVariants>;
481
-
482
- export declare const aTellInputVariants: (props?: ({
483
- size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
484
- } & ClassProp) | undefined) => string;
485
-
486
- export declare interface CountryOption<T = RestCountry> {
487
- /** Display label, e.g. "Egypt (+20)". */
488
- label: string;
489
- /** Stable unique ID — the ISO 3166-1 alpha-2 code, e.g. "EG". */
490
- value: string;
491
- /** Precomputed normalized string for fast substring search. */
492
- search_key: string;
493
- raw_data: {
494
- iso2: string;
495
- dial_code: string;
496
- dial_digits: string;
497
- name: string;
498
- flag: string | null;
499
- source: 'restcountries' | 'fallback';
500
- original: T;
501
- };
502
- }
503
-
504
- export declare const DEFAULT_ERROR_MESSAGES: Record<PhoneValidationReason, string>;
505
-
506
- /** English defaults for every {@link TellInputMessages} key. */
507
- export declare const DEFAULT_MESSAGES: TellInputMessages;
508
-
509
- /**
510
- * Default flag URL builder — flagcdn.com hosts PNG flags at multiple widths and is
511
- * generous with caching + no API key required. Swap via the `flagUrl` prop on
512
- * ATellInput / ACountrySelect / ACountryFlag to use any other source.
513
- */
514
- export declare function defaultFlagUrl(iso2: string, width?: number): string;
515
-
516
- /**
517
- * Imperative API. Use this when you want to call detection from outside Vue (e.g. inside a
518
- * non-component composable, server middleware, or unit test).
519
- */
520
- export declare function detectCountry(opts?: DetectCountryOptions): Promise<string>;
521
-
522
- export declare interface DetectCountryOptions {
523
- /**
524
- * - `'auto'` — try IP geolocation first, then timezone, then `navigator.language`, then default.
525
- * - `'locale'` — skip the network call, use timezone + locale only.
526
- * - `'none'` — return `defaultCountry` immediately.
527
- */
528
- strategy?: DetectionStrategy;
529
- /** Endpoint returning a JSON body with a `country_code` (or `country`) field. */
530
- ipEndpoint?: string;
531
- /** Fallback ISO2 used when every step fails. */
532
- defaultCountry?: string;
533
- /** Abort the IP request after this many ms. */
534
- timeoutMs?: number;
535
- /** Persist the resolved country in sessionStorage so re-mounts within the session skip detection. */
536
- cache?: boolean;
537
- }
538
-
539
- export declare type DetectionStrategy = 'auto' | 'locale' | 'none';
540
-
541
- declare interface ExtendedProps extends ATellInputProps {
542
- /** Override the flag URL builder, forwarded to ACountrySelect. */
543
- flagUrl?: (iso2: string, width: number) => string;
544
- /** Custom search predicate, forwarded to ACountrySelect. */
545
- searcher?: (query: string, country: CountryOption) => boolean;
546
- /** Provide your own country list, forwarded to ACountrySelect. */
547
- countries?: CountryOption[];
548
- /**
549
- * Fully custom country detection. When provided, this function runs in place of the
550
- * built-in chain — `detectCountry`-style options are still honored but the function
551
- * receives them and is free to ignore them.
552
- */
553
- detector?: (options: DetectCountryOptions) => Promise<string | null | undefined>;
554
- /** Forwarded to ACountrySelect: classes for the popover content surface. */
555
- contentClass?: string;
556
- popoverClass?: string;
557
- drawerClass?: string;
558
- /** Classes for the inner phone field input element. */
559
- inputClass?: string;
560
- /** Classes for the outer wrapper that holds country select + input. */
561
- fieldClass?: string;
562
- /** Classes for the helper hint line. */
563
- hintClass?: string;
564
- /** Classes for the error message line. */
565
- errorClass?: string;
566
- }
567
-
568
- export declare type FlagUrlBuilder = (iso2: string, width: number) => string;
569
-
570
- /**
571
- * Base code points of contiguous decimal-digit blocks. Each block runs `base`‥`base+9`
572
- * for digit `0`‥`9`, so the ASCII digit is `codePoint - base`. Add a script by appending
573
- * one entry here.
574
- */
575
- export declare const LOCALE_DIGIT_RANGES: {
576
- name: string;
577
- base: number;
578
- }[];
579
-
580
- /**
581
- * Return a copy of the country list with display names localized to `locale` via
582
- * `Intl.DisplayNames`. `search_key` is rebuilt (keeping the English name too) so search
583
- * still matches either spelling. Unknown locales / regions fall back to the English name.
584
- */
585
- export declare function localizeCountries(list: CountryOption[], locale?: string): CountryOption[];
586
-
587
- /**
588
- * Replace any supported non-ASCII decimal digit with its ASCII equivalent. Every other
589
- * character (spaces, `+`, separators, letters) is left untouched — callers still run their
590
- * own `\D` cleanup afterwards.
591
- */
592
- export declare function normalizeDigits(input: string): string;
593
-
594
- export declare interface PhoneRequiredInfo {
595
- iso2: string;
596
- dial_code: string;
597
- /** Empty by default — consumer passes a placeholder via the component prop. */
598
- placeholder: string;
599
- example_national: string;
600
- example_e164: string;
601
- national_number_length: {
602
- min: number | null;
603
- max: number | null;
604
- };
605
- format_hint: string;
606
- }
607
-
608
- export declare type PhoneValidationReason = 'missing_country' | 'country_not_supported' | 'phone_has_non_digits' | 'too_short' | 'too_long' | 'invalid_phone' | 'parse_failed';
609
-
610
- export declare interface PhoneValidationResult {
611
- ok: boolean;
612
- reason: PhoneValidationReason | null;
613
- country: {
614
- iso2: string;
615
- dial_code: string;
616
- } | null;
617
- phone: {
618
- raw: string | null;
619
- digits: string;
620
- };
621
- full_phone: string | null;
622
- required: PhoneRequiredInfo | null;
623
- details?: Record<string, unknown>;
624
- }
625
-
626
- /**
627
- * Merge a partial `messages` override onto the English defaults. Used internally by
628
- * `ATellInput` to resolve a complete {@link TellInputMessages} object.
629
- */
630
- export declare function resolveMessages(input?: TellInputMessagesInput): TellInputMessages;
631
-
632
- export declare interface RestCountry {
633
- name?: {
634
- common?: string;
635
- };
636
- cca2?: string;
637
- idd?: {
638
- root?: string;
639
- suffixes?: string[];
640
- };
641
- flags?: {
642
- png?: string;
643
- svg?: string;
644
- };
645
- }
646
-
647
- declare function selectCountry(option: CountryOption): void;
648
-
649
- /**
650
- * Shared size scale for every interactive UI component in @alikhalilll/ui.
651
- *
652
- * xs = 28px · sm = 36px · md = 43px (default) · lg = 52px · xl = 60px
653
- *
654
- * Use the {@link controlHeight}, {@link controlPaddingX}, {@link controlTextSize}
655
- * maps when building a CVA variant so every component stays in lockstep.
656
- */
657
- declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
658
-
659
- /**
660
- * Every user-facing string in the tell-input UI, bundled so a consumer can localize the
661
- * component in one prop. Each key has an English default in {@link DEFAULT_MESSAGES}.
662
- */
663
- export declare interface TellInputMessages {
664
- /** Placeholder of the country-picker search box. */
665
- searchPlaceholder: string;
666
- /** Shown when a search yields no countries. */
667
- emptyText: string;
668
- /** Shown while the country list is loading. */
669
- loadingText: string;
670
- /** Header of the "Suggested" group (current + recent picks). */
671
- suggestedLabel: string;
672
- /** Header of the full country list. */
673
- allCountriesLabel: string;
674
- /** Validation error text, keyed by reason. */
675
- errorMessages: Record<PhoneValidationReason, string>;
676
- /** Prefix of the country trigger's `aria-label`, e.g. `"Country: Egypt"`. */
677
- countryLabel: string;
678
- /** `aria-label` of the country trigger when no country is selected. */
679
- selectCountryLabel: string;
680
- /** `aria-label` of the phone input element. */
681
- phoneInputLabel: string;
682
- }
683
-
684
- /** Partial override shape for the `messages` prop — every key (and every error reason) is optional. */
685
- export declare type TellInputMessagesInput = Partial<Omit<TellInputMessages, 'errorMessages'>> & {
686
- errorMessages?: Partial<Record<PhoneValidationReason, string>>;
687
- };
688
-
689
- /**
690
- * Reactive wrapper. Kicks off detection in `onMounted` so SSR renders an empty value and the
691
- * client patches in the real country once resolved.
692
- */
693
- export declare function useCountryDetection(opts?: DetectCountryOptions): UseCountryDetectionReturn;
694
-
695
- export declare interface UseCountryDetectionReturn {
696
- /** Resolved ISO2 code. Initially `null` until detection completes. */
697
- country: Ref<string | null>;
698
- /** True while detection is in flight. */
699
- isLoading: Ref<boolean>;
700
- /** Manually re-run detection (e.g. after the user changes their VPN). */
701
- refresh: () => Promise<string>;
702
- }
703
-
704
- export declare function usePhoneValidation(): UsePhoneValidationReturn;
705
-
706
- export declare interface UsePhoneValidationReturn {
707
- countries: Ref<CountryOption[]>;
708
- isCountriesLoading: Ref<boolean>;
709
- getCountries(options?: {
710
- force?: boolean;
711
- }): Promise<CountryOption[]>;
712
- searchCountries(keyword: string, limit?: number): CountryOption[];
713
- getCountryByValue(value: string): CountryOption | null;
714
- getCountriesByDial(dial: string): CountryOption[];
715
- getRequiredInfo(country: {
716
- iso2: string;
717
- dial_code?: string;
718
- }, locale?: string): PhoneRequiredInfo | null;
719
- validate(input: ValidateArgs): PhoneValidationResult;
720
- }
721
-
722
- export declare type ValidateArgs = {
723
- country: {
724
- iso2: string;
725
- dial_code?: string;
726
- } | null | undefined;
727
- phone?: undefined;
728
- /** BCP-47 locale — localizes the numerals in the returned `required.format_hint`. */
729
- locale?: string;
730
- } | {
731
- country: {
732
- iso2: string;
733
- dial_code?: string;
734
- } | null | undefined;
735
- phone: string | null;
736
- /** BCP-47 locale — localizes the numerals in the returned `required.format_hint`. */
737
- locale?: string;
738
- };
739
-
740
- export { }