@alikhalilll/a-tel-input 1.0.1

package/src/composables/useTypingPhase.ts

@@ -0,0 +1,88 @@
+import { ref, readonly, type ComputedRef, type Ref } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+
+/**
+ * Typing-phase state machine for the tel input.
+ *
+ * Owns the three reactive flags that drive the "is the user still typing?" UX:
+ *
+ * - `isDetecting` — true while the debounce window is in flight (user is mid-burst or
+ *   has just paused). Drives the loading spinner in the picker slot.
+ * - `hasFinishedTyping` — false from the moment a key lands until the debounce settles.
+ *   Gates validation visibility, so error/success states only appear once the user pauses.
+ * - `detectionAttempted` — flips true the first time the debounce fires on non-empty
+ *   input. Used by the consumer to keep the country picker visible after a failed
+ *   detection (so the user can pick manually instead of being stranded).
+ *
+ * Design notes:
+ *
+ * - The composable is pure state — it does not know about country detection, phone
+ *   numbers, or libphonenumber. The consumer wires the `onSettle` callback to whatever
+ *   "what to do when typing pauses" logic is appropriate (typically: try to detect a
+ *   country from the current digits, mark a detection attempt, and apply the match).
+ *
+ * - `markDetectionAttempt()` is exposed separately so the caller controls *when* the
+ *   "keep the picker visible" flag flips — not every settle triggers a real attempt
+ *   (e.g. when input is empty or the user already picked a country manually).
+ *
+ * - Refs are exposed `readonly` so external code can't bypass the state machine; all
+ *   transitions go through the exposed actions.
+ */
+export interface UseTypingPhaseOptions {
+  /** Debounce window in ms. Reactive so consumers can change `detectDebounceMs` at runtime. */
+  debounceMs: ComputedRef<number>;
+  /** Fired when the debounce timer settles. Runs regardless of input state — use this
+   *  to clear loading UI, then perform any pause-triggered work (e.g. detection). */
+  onSettle?: () => void;
+}
+
+export interface UseTypingPhaseReturn {
+  isDetecting: Readonly<Ref<boolean>>;
+  hasFinishedTyping: Readonly<Ref<boolean>>;
+  detectionAttempted: Readonly<Ref<boolean>>;
+  /** Call from the input handler on every keystroke that produces non-empty input. */
+  markTyping: () => void;
+  /** Flip `detectionAttempted` to true. Call from within the `onSettle` callback when
+   *  a real detection attempt is about to run — so the picker stays visible after even
+   *  a failed match. */
+  markDetectionAttempt: () => void;
+  /** Reset all three flags to defaults. Call when the input is cleared. */
+  reset: () => void;
+}
+
+export function useTypingPhase(opts: UseTypingPhaseOptions): UseTypingPhaseReturn {
+  const isDetecting = ref(false);
+  const hasFinishedTyping = ref(true);
+  const detectionAttempted = ref(false);
+
+  const settle = useDebounceFn(() => {
+    isDetecting.value = false;
+    hasFinishedTyping.value = true;
+    opts.onSettle?.();
+  }, opts.debounceMs);
+
+  function markTyping() {
+    isDetecting.value = true;
+    hasFinishedTyping.value = false;
+    settle();
+  }
+
+  function markDetectionAttempt() {
+    detectionAttempted.value = true;
+  }
+
+  function reset() {
+    isDetecting.value = false;
+    hasFinishedTyping.value = true;
+    detectionAttempted.value = false;
+  }
+
+  return {
+    isDetecting: readonly(isDetecting),
+    hasFinishedTyping: readonly(hasFinishedTyping),
+    detectionAttempted: readonly(detectionAttempted),
+    markTyping,
+    markDetectionAttempt,
+    reset,
+  };
+}

package/src/icons/AlertCircleIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+    <line x1="12" y1="16" x2="12.01" y2="16" />
+  </svg>
+</template>

package/src/icons/CheckCircleIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </svg>
+</template>

package/src/icons/CheckIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+</template>

package/src/icons/ChevronDownIcon.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+</template>

package/src/icons/SearchIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+</template>

package/src/icons/SpinnerIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    class="a-tel-input-icon-spinner"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </svg>
+</template>
+
+<style>
+@keyframes a-tel-input-icon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.a-tel-input-icon-spinner {
+  animation: a-tel-input-icon-spin 1s linear infinite;
+  transform-origin: center;
+}
+</style>

package/src/icons/index.ts

@@ -0,0 +1,6 @@
+export { default as CheckIcon } from './CheckIcon.vue';
+export { default as CheckCircleIcon } from './CheckCircleIcon.vue';
+export { default as AlertCircleIcon } from './AlertCircleIcon.vue';
+export { default as SpinnerIcon } from './SpinnerIcon.vue';
+export { default as ChevronDownIcon } from './ChevronDownIcon.vue';
+export { default as SearchIcon } from './SearchIcon.vue';

package/src/index.ts

@@ -0,0 +1,36 @@
+// Components
+export { default as ATelInput } from './components/ATelInput.vue';
+export { default as ACountrySelect } from './components/ACountrySelect.vue';
+export { default as ACountryFlag } from './components/ACountryFlag.vue';
+
+// Types, variants, defaults
+export {
+  aTelInputVariants,
+  DEFAULT_ERROR_MESSAGES,
+  DEFAULT_MESSAGES,
+  resolveMessages,
+  type ATelInputProps,
+  type ATelInputSlots,
+  type ATelInputEmits,
+  type ATelInputSize,
+  type ATelInputVariants,
+  type ATelInputDir,
+  type ACountrySelectProps,
+  type ACountrySelectSlots,
+  type ACountrySelectEmits,
+  type ACountryFlagProps,
+  type ACountryFlagSlots,
+  type TelInputMessages,
+  type TelInputMessagesInput,
+} from './types';
+export { defaultFlagUrl, type FlagUrlBuilder } from './utils/flag-url';
+
+// i18n — alternative-numeral normalization
+export { normalizeDigits, LOCALE_DIGIT_RANGES } from './utils/digits';
+
+// Composables — co-located with the components since they're tel-input specific.
+export * from './composables/usePhoneValidation';
+export * from './composables/useCountryDetection';
+export * from './composables/useCountryMatching';
+export * from './composables/useTypingPhase';
+export * from './composables/useTelInputValidation';

package/src/nuxt/index.ts

@@ -0,0 +1,37 @@
+import { defineNuxtModule, addComponent } from '@nuxt/kit';
+import type { NuxtModule } from '@nuxt/schema';
+
+/**
+ * `@alikhalilll/a-tel-input/nuxt` — registers the tel-input components for Nuxt
+ * auto-import. The country picker renders a-popover/a-drawer, so also import
+ * their stylesheets plus a-ui-base tokens and a-tel-input styles.
+ */
+
+export interface ModuleOptions {
+  prefix?: string;
+}
+
+const COMPONENTS: Record<string, string> = {
+  ATelInput: '@alikhalilll/a-tel-input',
+  ACountrySelect: '@alikhalilll/a-tel-input',
+  ACountryFlag: '@alikhalilll/a-tel-input',
+};
+
+const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@alikhalilll/a-tel-input',
+    configKey: 'aTelInput',
+    compatibility: { nuxt: '>=3.0.0' },
+  },
+  defaults: { prefix: '' },
+  setup(opts) {
+    const prefix = opts.prefix ?? '';
+    for (const [exportName, from] of Object.entries(COMPONENTS)) {
+      const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;
+      const registeredName = `${prefix}${prefix ? baseName : exportName}`;
+      addComponent({ name: registeredName, export: exportName, filePath: from });
+    }
+  },
+});
+
+export default module;

package/src/resolver/index.ts

@@ -0,0 +1,29 @@
+import type { ComponentResolver } from 'unplugin-vue-components';
+
+/**
+ * `@alikhalilll/a-tel-input/resolver` — auto-import resolver for non-Nuxt
+ * Vite/Webpack consumers via `unplugin-vue-components`.
+ */
+
+export interface ResolverOptions {
+  prefix?: string;
+}
+
+const COMPONENT_TO_ENTRY: Record<string, string> = {
+  ATelInput: '@alikhalilll/a-tel-input',
+  ACountrySelect: '@alikhalilll/a-tel-input',
+  ACountryFlag: '@alikhalilll/a-tel-input',
+};
+
+export default function ATelInputResolver(opts: ResolverOptions = {}): ComponentResolver {
+  const prefix = opts.prefix ?? '';
+  return {
+    type: 'component',
+    resolve(name) {
+      const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+      const from = COMPONENT_TO_ENTRY[bare];
+      if (!from) return;
+      return { name: bare, from };
+    },
+  };
+}