@getmicdrop/svelte-components 5.17.4 → 5.18.0

package/dist/recipes/inputs/PhoneInput.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { safeSlide } from "../../utils/transitions.js";
+  import { cubicOut } from "svelte/easing";
+  import { ExclamationCircleOutline } from "../../primitives/Icons";
+  import { typography } from "../../tokens/typography";
+  import { formInputSizes } from "../../tokens/sizing";
+  import CountrySelector from "./phoneInput/CountrySelector.svelte";
+  import { COUNTRIES, getCountry, type Country } from "./phoneInput/countryData";
+  import {
+    parseStoredPhone,
+    formatAsYouType,
+    toE164,
+    isValidE164,
+  } from "../../utils/phoneUtils";
+  import type { CountryCode } from "libphonenumber-js/min";
+
+  const defaultLabels = {
+    searchPlaceholder: 'Search countries...',
+    noResults: 'No countries found',
+    countrySelector: 'Select country',
+    suggested: 'Suggested',
+    allCountries: 'All countries',
+    optional: '(optional)',
+  };
+
+  interface Props {
+    value?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    optional?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    errorText?: string;
+    helperText?: string;
+    color?: 'base' | 'red';
+    controlled?: boolean;
+    buttonText?: string | null;
+    buttonDisabled?: boolean;
+    onButtonClick?: ((value: string) => void) | null;
+    defaultCountry?: string;
+    labels?: Partial<typeof defaultLabels>;
+    onchange?: (detail: { value: string; country: string; isValid: boolean }) => void;
+    animateFocus?: boolean;
+    statusText?: string;
+    statusType?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = $bindable(''),
+    label = '',
+    id = '',
+    name = '',
+    placeholder = '',
+    required = false,
+    disabled = false,
+    optional = false,
+    size = 'md',
+    errorText = '',
+    helperText = '',
+    color = 'base',
+    controlled = false,
+    buttonText = null,
+    buttonDisabled = false,
+    onButtonClick = null,
+    defaultCountry = 'US',
+    labels: userLabels = {},
+    onchange,
+    animateFocus = true,
+    statusText = '',
+    statusType = '',
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Internal state
+  let selectedCountry = $state<Country>(getCountry(defaultCountry) || COUNTRIES.find((c) => c.code === 'US')!);
+  let nationalDigits = $state('');
+  let displayValue = $state('');
+  let inputElement = $state<HTMLInputElement | null>(null);
+  let hasInitialized = $state(false);
+
+  let hasError = $derived(color === 'red' || Boolean(errorText));
+  let sizeClass = $derived(formInputSizes[size] || formInputSizes.md);
+  let shouldAnimate = $derived(animateFocus && !disabled);
+
+  // Parse incoming value on mount or when value changes externally
+  $effect(() => {
+    const currentValue = value;
+    if (!hasInitialized || currentValue !== lastEmittedValue) {
+      parseIncomingValue(currentValue);
+      hasInitialized = true;
+    }
+  });
+
+  let lastEmittedValue = '';
+
+  function parseIncomingValue(incoming: string) {
+    if (!incoming) {
+      nationalDigits = '';
+      displayValue = '';
+      return;
+    }
+
+    const parsed = parseStoredPhone(incoming);
+    if (parsed) {
+      const country = getCountry(parsed.countryCode);
+      if (country) {
+        selectedCountry = country;
+      }
+      nationalDigits = parsed.nationalNumber;
+      displayValue = formatAsYouType(parsed.countryCode as CountryCode, parsed.nationalNumber);
+    } else {
+      // Can't parse — treat as raw digits
+      nationalDigits = incoming.replace(/\D/g, '');
+      displayValue = nationalDigits;
+    }
+  }
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const raw = target.value.replace(/\D/g, '');
+    nationalDigits = raw;
+
+    // Format as-you-type
+    const formatted = formatAsYouType(selectedCountry.code as CountryCode, raw);
+    displayValue = formatted;
+    target.value = formatted;
+
+    // Compute E.164 and emit
+    const e164 = toE164(selectedCountry.code as CountryCode, raw);
+    lastEmittedValue = e164;
+    value = e164;
+
+    const valid = e164 ? isValidE164(e164) : false;
+    onchange?.({ value: e164, country: selectedCountry.code, isValid: valid });
+  }
+
+  function handleCountryChange() {
+    // Re-format existing digits for new country
+    displayValue = formatAsYouType(selectedCountry.code as CountryCode, nationalDigits);
+
+    // Recalculate E.164
+    const e164 = toE164(selectedCountry.code as CountryCode, nationalDigits);
+    lastEmittedValue = e164;
+    value = e164;
+
+    const valid = e164 ? isValidE164(e164) : false;
+    onchange?.({ value: e164, country: selectedCountry.code, isValid: valid });
+
+    // Focus the input after country change
+    inputElement?.focus();
+  }
+
+  // Watch for country changes from the selector
+  $effect(() => {
+    // Trigger on selectedCountry change (read it to create dependency)
+    const _code = selectedCountry.code;
+    if (hasInitialized && nationalDigits) {
+      handleCountryChange();
+    }
+  });
+
+  function handleButtonClick() {
+    if (typeof onButtonClick === 'function') {
+      onButtonClick(value);
+    }
+  }
+
+  export function focus() {
+    inputElement?.focus();
+  }
+
+  export function clear() {
+    nationalDigits = '';
+    displayValue = '';
+    value = '';
+    lastEmittedValue = '';
+  }
+</script>
+
+<div class="flex flex-col gap-2" {...restProps}>
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label for={id} class={`${typography.label} leading-tight sm:leading-none`}>
+        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+      </label>
+      {#if statusText}
+        <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
+      {/if}
+      {#if optional}
+        <span class={typography.smMuted}>{labels.optional}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="relative w-full">
+    <div class="flex items-stretch w-full">
+      <CountrySelector
+        bind:country={selectedCountry}
+        {disabled}
+        {size}
+        labels={{
+          searchPlaceholder: labels.searchPlaceholder,
+          noResults: labels.noResults,
+          countrySelector: labels.countrySelector,
+          suggested: labels.suggested,
+          allCountries: labels.allCountries,
+        }}
+      />
+
+      <div class="relative flex-1 flex items-center">
+        <input
+          bind:this={inputElement}
+          {id}
+          type="tel"
+          {name}
+          {placeholder}
+          value={displayValue}
+          oninput={handleInput}
+          inputmode="tel"
+          autocomplete="tel"
+          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border border-l-0 rounded-r-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {controlled && (buttonText) ? 'pr-20' : ''} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          required={false}
+          {disabled}
+          aria-required={required}
+        />
+
+        {#if controlled && buttonText}
+          <button
+            type="button"
+            onclick={handleButtonClick}
+            disabled={buttonDisabled}
+            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || errorText ? 'mb-7' : ''}"
+          >
+            <span class="text-sm font-medium">{buttonText}</span>
+          </button>
+        {/if}
+      </div>
+    </div>
+
+    {#if errorText}
+      <div transition:safeSlide={{ duration: 300, easing: cubicOut }} class="flex items-start gap-1.5 mt-2" role="alert" aria-live="assertive">
+        <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
+        <p class={typography.error}>{errorText}</p>
+      </div>
+    {:else if helperText}
+      <div class={`mt-2 flex items-center ${typography.xsMuted} opacity-65`}>
+        <span>{helperText}</span>
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/recipes/inputs/PhoneInput.svelte.d.ts

@@ -0,0 +1,42 @@
+declare const PhoneInput: import("svelte").Component<{
+    [key: string]: unknown;
+    value?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    optional?: boolean;
+    size?: "sm" | "md" | "lg";
+    errorText?: string;
+    helperText?: string;
+    color?: "base" | "red";
+    controlled?: boolean;
+    buttonText?: string | null;
+    buttonDisabled?: boolean;
+    onButtonClick?: ((value: string) => void) | null;
+    defaultCountry?: string;
+    labels?: Partial<{
+        searchPlaceholder: string;
+        noResults: string;
+        countrySelector: string;
+        suggested: string;
+        allCountries: string;
+        optional: string;
+    }>;
+    onchange?: (detail: {
+        value: string;
+        country: string;
+        isValid: boolean;
+    }) => void;
+    animateFocus?: boolean;
+    statusText?: string;
+    statusType?: string;
+}, {
+    focus: () => void;
+    clear: () => void;
+}, "value">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;
+//# sourceMappingURL=PhoneInput.svelte.d.ts.map

package/dist/recipes/inputs/PhoneInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PhoneInput.svelte.ts"],"names":[],"mappings":"AA2PA,QAAA,MAAM,UAAU;;YAlNJ,MAAM;YACN,MAAM;SACT,MAAM;WACJ,MAAM;kBACC,MAAM;eACT,OAAO;eACP,OAAO;eACP,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;gBACb,MAAM;iBACL,MAAM;YACX,MAAM,GAAG,KAAK;iBACT,OAAO;iBACP,MAAM,GAAG,IAAI;qBACT,OAAO;oBACR,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;qBAC/B,MAAM;aACd,OAAO;;;;;;;MAAsB;eAC3B,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;mBAClE,OAAO;iBACT,MAAM;iBACN,MAAM;;;;WA6LiC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/recipes/inputs/index.d.ts

@@ -3,5 +3,6 @@ export { default as OTPInput } from "./OTPInput.svelte";
 export { default as PasswordInput } from "./PasswordInput.svelte";
 export { default as PasswordStrengthIndicator } from "./PasswordStrengthIndicator/PasswordStrengthIndicator.svelte";
 export { default as PlaceAutocomplete } from "./PlaceAutocomplete/PlaceAutocomplete.svelte";
+export { default as PhoneInput } from "./PhoneInput.svelte";
 export { default as Search } from "./Search.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/recipes/inputs/index.js

@@ -4,4 +4,5 @@ export { default as OTPInput } from './OTPInput.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
 export { default as PlaceAutocomplete } from './PlaceAutocomplete/PlaceAutocomplete.svelte';
+export { default as PhoneInput } from './PhoneInput.svelte';
 export { default as Search } from './Search.svelte';

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import { ChevronDownOutline } from "../../../primitives/Icons";
+  import { portal as portalAction } from "../../../utils/portal.js";
+  import { typography } from "../../../tokens/typography";
+  import { bloom } from "../../../utils/transitions.js";
+  import { COUNTRIES, getSuggestedCountries, type Country } from "./countryData";
+
+  interface Props {
+    country?: Country;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: {
+      searchPlaceholder?: string;
+      noResults?: string;
+      countrySelector?: string;
+      suggested?: string;
+      allCountries?: string;
+    };
+  }
+
+  const defaultLabels = {
+    searchPlaceholder: 'Search countries...',
+    noResults: 'No countries found',
+    countrySelector: 'Select country',
+    suggested: 'Suggested',
+    allCountries: 'All countries',
+  };
+
+  let {
+    country = $bindable(COUNTRIES.find((c) => c.code === 'US')!),
+    disabled = false,
+    size = "md",
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let isOpen = $state(false);
+  let searchQuery = $state('');
+  let triggerElement = $state<HTMLButtonElement | null>(null);
+  let dropdownElement = $state<HTMLDivElement | null>(null);
+  let searchInputElement = $state<HTMLInputElement | null>(null);
+  let focusedIndex = $state(-1);
+  let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
+
+  const instanceId = Math.random().toString(36).substring(2, 9);
+  const suggestedCountries = getSuggestedCountries();
+
+  let filteredCountries = $derived.by(() => {
+    if (!searchQuery) return COUNTRIES;
+    const q = searchQuery.toLowerCase();
+    return COUNTRIES.filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) ||
+        c.dialCode.includes(q) ||
+        c.code.toLowerCase().includes(q)
+    );
+  });
+
+  let showSuggested = $derived(!searchQuery);
+
+  // Build flat list of visible items for keyboard nav
+  let flatItems = $derived.by(() => {
+    const items: Country[] = [];
+    if (showSuggested) {
+      items.push(...suggestedCountries);
+    }
+    items.push(...filteredCountries);
+    return items;
+  });
+
+  const sizeMap = {
+    sm: 'h-9 px-2 text-sm gap-1',
+    md: 'h-10 px-2.5 text-sm gap-1.5',
+    lg: 'h-12 px-3 text-base gap-2',
+  } as const;
+
+  let sizeClass = $derived(sizeMap[size] || sizeMap.md);
+
+  function updateDropdownPosition() {
+    if (!triggerElement) return;
+    const rect = triggerElement.getBoundingClientRect();
+    dropdownPosition = {
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: Math.max(280, rect.width),
+    };
+  }
+
+  async function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      searchQuery = '';
+      focusedIndex = -1;
+      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
+      await tick();
+      updateDropdownPosition();
+      searchInputElement?.focus();
+    }
+  }
+
+  function handleOtherSelectOpened(event: Event) {
+    const customEvent = event as CustomEvent<{ instanceId: string }>;
+    if (customEvent.detail.instanceId !== instanceId && isOpen) {
+      close();
+    }
+  }
+
+  function close() {
+    isOpen = false;
+    searchQuery = '';
+    focusedIndex = -1;
+  }
+
+  function selectCountry(c: Country) {
+    country = c;
+    close();
+    triggerElement?.focus();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (isOpen && focusedIndex >= 0 && focusedIndex < flatItems.length) {
+          selectCountry(flatItems[focusedIndex]);
+        } else if (!isOpen) {
+          toggle();
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          toggle();
+        } else {
+          focusedIndex = Math.min(focusedIndex + 1, flatItems.length - 1);
+          scrollToFocused();
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) {
+          focusedIndex = Math.max(focusedIndex - 1, 0);
+          scrollToFocused();
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        triggerElement?.focus();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  }
+
+  function scrollToFocused() {
+    tick().then(() => {
+      const el = dropdownElement?.querySelector(`[data-index="${focusedIndex}"]`);
+      el?.scrollIntoView({ block: 'nearest' });
+    });
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (!isOpen) return;
+    const target = event.target as Node;
+    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(target);
+    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(target);
+    if (clickedOutsideTrigger && clickedOutsideDropdown) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    window.addEventListener("select-opened", handleOtherSelectOpened);
+    window.addEventListener("scroll", updateDropdownPosition, true);
+    window.addEventListener("resize", updateDropdownPosition);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      window.removeEventListener("select-opened", handleOtherSelectOpened);
+      window.removeEventListener("scroll", updateDropdownPosition, true);
+      window.removeEventListener("resize", updateDropdownPosition);
+    };
+  });
+
+  let itemIndex = 0;
+  function resetIndex() {
+    itemIndex = 0;
+  }
+  function nextIndex() {
+    return itemIndex++;
+  }
+</script>
+
+<div class="relative shrink-0">
+  <button
+    type="button"
+    bind:this={triggerElement}
+    class="flex items-center {sizeClass} bg-gray-50 dark:bg-gray-800 border border-r-0 rounded-l-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={labels.countrySelector}
+    onclick={toggle}
+    onkeydown={handleKeydown}
+  >
+    <span class="text-lg leading-none">{country.flag}</span>
+    <span class={`${typography.sm} whitespace-nowrap`}>{country.dialCode}</span>
+    <ChevronDownOutline class="w-3 h-3 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+  </button>
+
+  {#if isOpen}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
+      bind:this={dropdownElement}
+      use:portalAction
+      class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
+      style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
+      role="listbox"
+      tabindex="-1"
+      aria-label={labels.countrySelector}
+      transition:bloom={{ origin: "top left" }}
+    >
+      <!-- Search -->
+      <div class="p-2 border-b border-gray-200 dark:border-gray-600">
+        <input
+          bind:this={searchInputElement}
+          type="text"
+          class="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800 {typography.sm} placeholder-gray-400 dark:placeholder-gray-500"
+          placeholder={labels.searchPlaceholder}
+          bind:value={searchQuery}
+          onkeydown={handleKeydown}
+        />
+      </div>
+
+      <!-- List -->
+      <div class="max-h-60 overflow-y-auto py-1">
+        {resetIndex()}
+
+        {#if showSuggested}
+          <div class="px-3 py-1.5">
+            <span class="text-xs font-semibold uppercase tracking-wider {typography.textMuted}">{labels.suggested}</span>
+          </div>
+          {#each suggestedCountries as c}
+            {@const idx = nextIndex()}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <li
+              class="flex items-center gap-3 px-3 py-2 cursor-pointer {typography.sm} transition-colors {c.code === country.code ? 'bg-blue-50 dark:bg-blue-900/30' : ''} {idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
+              role="option"
+              aria-selected={c.code === country.code}
+              data-index={idx}
+              onclick={() => selectCountry(c)}
+              onmouseenter={() => (focusedIndex = idx)}
+            >
+              <span class="text-lg leading-none">{c.flag}</span>
+              <span class="flex-1">{c.name}</span>
+              <span class={typography.textMuted}>{c.dialCode}</span>
+            </li>
+          {/each}
+
+          <div class="border-t border-gray-200 dark:border-gray-600 mx-3 my-1"></div>
+          <div class="px-3 py-1.5">
+            <span class="text-xs font-semibold uppercase tracking-wider {typography.textMuted}">{labels.allCountries}</span>
+          </div>
+        {/if}
+
+        {#each filteredCountries as c}
+          {@const idx = nextIndex()}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            class="flex items-center gap-3 px-3 py-2 cursor-pointer {typography.sm} transition-colors {c.code === country.code ? 'bg-blue-50 dark:bg-blue-900/30' : ''} {idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
+            role="option"
+            aria-selected={c.code === country.code}
+            data-index={idx}
+            onclick={() => selectCountry(c)}
+            onmouseenter={() => (focusedIndex = idx)}
+          >
+            <span class="text-lg leading-none">{c.flag}</span>
+            <span class="flex-1">{c.name}</span>
+            <span class={typography.textMuted}>{c.dialCode}</span>
+          </li>
+        {:else}
+          <div class="px-3 py-4 text-center {typography.textMuted}">
+            {labels.noResults}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Country } from "./countryData";
+interface Props {
+    country?: Country;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: {
+        searchPlaceholder?: string;
+        noResults?: string;
+        countrySelector?: string;
+        suggested?: string;
+        allCountries?: string;
+    };
+}
+declare const CountrySelector: import("svelte").Component<Props, {}, "country">;
+type CountrySelector = ReturnType<typeof CountrySelector>;
+export default CountrySelector;
+//# sourceMappingURL=CountrySelector.svelte.d.ts.map

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelector.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/phoneInput/CountrySelector.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAAoC,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAG7E,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAyPH,QAAA,MAAM,eAAe,kDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/recipes/inputs/phoneInput/countryData.d.ts

@@ -0,0 +1,20 @@
+export interface Country {
+    /** ISO 3166-1 alpha-2 code */
+    code: string;
+    /** Display name */
+    name: string;
+    /** Dial code with + prefix */
+    dialCode: string;
+    /** Emoji flag */
+    flag: string;
+    /** Priority for shared dial codes (lower = higher priority) */
+    priority?: number;
+}
+/** Countries pinned to the top of the selector */
+export declare const SUGGESTED_CODES: string[];
+export declare const COUNTRIES: Country[];
+/** Get a country by ISO code */
+export declare function getCountry(code: string): Country | undefined;
+/** Get the suggested countries (pinned to top of selector) */
+export declare function getSuggestedCountries(): Country[];
+//# sourceMappingURL=countryData.d.ts.map

package/dist/recipes/inputs/phoneInput/countryData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countryData.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/phoneInput/countryData.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,kDAAkD;AAClD,eAAO,MAAM,eAAe,UAAiC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,OAAO,EAwM9B,CAAC;AAEF,gCAAgC;AAChC,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAE5D;AAED,8DAA8D;AAC9D,wBAAgB,qBAAqB,IAAI,OAAO,EAAE,CAEjD"}

package/dist/recipes/inputs/phoneInput/countryData.js

@@ -0,0 +1,211 @@
+/** Countries pinned to the top of the selector */
+export const SUGGESTED_CODES = ['US', 'CA', 'GB', 'MX', 'AU'];
+export const COUNTRIES = [
+    { code: 'AF', name: 'Afghanistan', dialCode: '+93', flag: '🇦🇫' },
+    { code: 'AL', name: 'Albania', dialCode: '+355', flag: '🇦🇱' },
+    { code: 'DZ', name: 'Algeria', dialCode: '+213', flag: '🇩🇿' },
+    { code: 'AD', name: 'Andorra', dialCode: '+376', flag: '🇦🇩' },
+    { code: 'AO', name: 'Angola', dialCode: '+244', flag: '🇦🇴' },
+    { code: 'AG', name: 'Antigua and Barbuda', dialCode: '+1268', flag: '🇦🇬' },
+    { code: 'AR', name: 'Argentina', dialCode: '+54', flag: '🇦🇷' },
+    { code: 'AM', name: 'Armenia', dialCode: '+374', flag: '🇦🇲' },
+    { code: 'AU', name: 'Australia', dialCode: '+61', flag: '🇦🇺' },
+    { code: 'AT', name: 'Austria', dialCode: '+43', flag: '🇦🇹' },
+    { code: 'AZ', name: 'Azerbaijan', dialCode: '+994', flag: '🇦🇿' },
+    { code: 'BS', name: 'Bahamas', dialCode: '+1242', flag: '🇧🇸' },
+    { code: 'BH', name: 'Bahrain', dialCode: '+973', flag: '🇧🇭' },
+    { code: 'BD', name: 'Bangladesh', dialCode: '+880', flag: '🇧🇩' },
+    { code: 'BB', name: 'Barbados', dialCode: '+1246', flag: '🇧🇧' },
+    { code: 'BY', name: 'Belarus', dialCode: '+375', flag: '🇧🇾' },
+    { code: 'BE', name: 'Belgium', dialCode: '+32', flag: '🇧🇪' },
+    { code: 'BZ', name: 'Belize', dialCode: '+501', flag: '🇧🇿' },
+    { code: 'BJ', name: 'Benin', dialCode: '+229', flag: '🇧🇯' },
+    { code: 'BT', name: 'Bhutan', dialCode: '+975', flag: '🇧🇹' },
+    { code: 'BO', name: 'Bolivia', dialCode: '+591', flag: '🇧🇴' },
+    { code: 'BA', name: 'Bosnia and Herzegovina', dialCode: '+387', flag: '🇧🇦' },
+    { code: 'BW', name: 'Botswana', dialCode: '+267', flag: '🇧🇼' },
+    { code: 'BR', name: 'Brazil', dialCode: '+55', flag: '🇧🇷' },
+    { code: 'BN', name: 'Brunei', dialCode: '+673', flag: '🇧🇳' },
+    { code: 'BG', name: 'Bulgaria', dialCode: '+359', flag: '🇧🇬' },
+    { code: 'BF', name: 'Burkina Faso', dialCode: '+226', flag: '🇧🇫' },
+    { code: 'BI', name: 'Burundi', dialCode: '+257', flag: '🇧🇮' },
+    { code: 'CV', name: 'Cabo Verde', dialCode: '+238', flag: '🇨🇻' },
+    { code: 'KH', name: 'Cambodia', dialCode: '+855', flag: '🇰🇭' },
+    { code: 'CM', name: 'Cameroon', dialCode: '+237', flag: '🇨🇲' },
+    { code: 'CA', name: 'Canada', dialCode: '+1', flag: '🇨🇦', priority: 1 },
+    { code: 'CF', name: 'Central African Republic', dialCode: '+236', flag: '🇨🇫' },
+    { code: 'TD', name: 'Chad', dialCode: '+235', flag: '🇹🇩' },
+    { code: 'CL', name: 'Chile', dialCode: '+56', flag: '🇨🇱' },
+    { code: 'CN', name: 'China', dialCode: '+86', flag: '🇨🇳' },
+    { code: 'CO', name: 'Colombia', dialCode: '+57', flag: '🇨🇴' },
+    { code: 'KM', name: 'Comoros', dialCode: '+269', flag: '🇰🇲' },
+    { code: 'CG', name: 'Congo', dialCode: '+242', flag: '🇨🇬' },
+    { code: 'CD', name: 'Congo (DRC)', dialCode: '+243', flag: '🇨🇩' },
+    { code: 'CR', name: 'Costa Rica', dialCode: '+506', flag: '🇨🇷' },
+    { code: 'CI', name: "Côte d'Ivoire", dialCode: '+225', flag: '🇨🇮' },
+    { code: 'HR', name: 'Croatia', dialCode: '+385', flag: '🇭🇷' },
+    { code: 'CU', name: 'Cuba', dialCode: '+53', flag: '🇨🇺' },
+    { code: 'CY', name: 'Cyprus', dialCode: '+357', flag: '🇨🇾' },
+    { code: 'CZ', name: 'Czech Republic', dialCode: '+420', flag: '🇨🇿' },
+    { code: 'DK', name: 'Denmark', dialCode: '+45', flag: '🇩🇰' },
+    { code: 'DJ', name: 'Djibouti', dialCode: '+253', flag: '🇩🇯' },
+    { code: 'DM', name: 'Dominica', dialCode: '+1767', flag: '🇩🇲' },
+    { code: 'DO', name: 'Dominican Republic', dialCode: '+1809', flag: '🇩🇴' },
+    { code: 'EC', name: 'Ecuador', dialCode: '+593', flag: '🇪🇨' },
+    { code: 'EG', name: 'Egypt', dialCode: '+20', flag: '🇪🇬' },
+    { code: 'SV', name: 'El Salvador', dialCode: '+503', flag: '🇸🇻' },
+    { code: 'GQ', name: 'Equatorial Guinea', dialCode: '+240', flag: '🇬🇶' },
+    { code: 'ER', name: 'Eritrea', dialCode: '+291', flag: '🇪🇷' },
+    { code: 'EE', name: 'Estonia', dialCode: '+372', flag: '🇪🇪' },
+    { code: 'SZ', name: 'Eswatini', dialCode: '+268', flag: '🇸🇿' },
+    { code: 'ET', name: 'Ethiopia', dialCode: '+251', flag: '🇪🇹' },
+    { code: 'FJ', name: 'Fiji', dialCode: '+679', flag: '🇫🇯' },
+    { code: 'FI', name: 'Finland', dialCode: '+358', flag: '🇫🇮' },
+    { code: 'FR', name: 'France', dialCode: '+33', flag: '🇫🇷' },
+    { code: 'GA', name: 'Gabon', dialCode: '+241', flag: '🇬🇦' },
+    { code: 'GM', name: 'Gambia', dialCode: '+220', flag: '🇬🇲' },
+    { code: 'GE', name: 'Georgia', dialCode: '+995', flag: '🇬🇪' },
+    { code: 'DE', name: 'Germany', dialCode: '+49', flag: '🇩🇪' },
+    { code: 'GH', name: 'Ghana', dialCode: '+233', flag: '🇬🇭' },
+    { code: 'GR', name: 'Greece', dialCode: '+30', flag: '🇬🇷' },
+    { code: 'GD', name: 'Grenada', dialCode: '+1473', flag: '🇬🇩' },
+    { code: 'GT', name: 'Guatemala', dialCode: '+502', flag: '🇬🇹' },
+    { code: 'GN', name: 'Guinea', dialCode: '+224', flag: '🇬🇳' },
+    { code: 'GW', name: 'Guinea-Bissau', dialCode: '+245', flag: '🇬🇼' },
+    { code: 'GY', name: 'Guyana', dialCode: '+592', flag: '🇬🇾' },
+    { code: 'HT', name: 'Haiti', dialCode: '+509', flag: '🇭🇹' },
+    { code: 'HN', name: 'Honduras', dialCode: '+504', flag: '🇭🇳' },
+    { code: 'HK', name: 'Hong Kong', dialCode: '+852', flag: '🇭🇰' },
+    { code: 'HU', name: 'Hungary', dialCode: '+36', flag: '🇭🇺' },
+    { code: 'IS', name: 'Iceland', dialCode: '+354', flag: '🇮🇸' },
+    { code: 'IN', name: 'India', dialCode: '+91', flag: '🇮🇳' },
+    { code: 'ID', name: 'Indonesia', dialCode: '+62', flag: '🇮🇩' },
+    { code: 'IR', name: 'Iran', dialCode: '+98', flag: '🇮🇷' },
+    { code: 'IQ', name: 'Iraq', dialCode: '+964', flag: '🇮🇶' },
+    { code: 'IE', name: 'Ireland', dialCode: '+353', flag: '🇮🇪' },
+    { code: 'IL', name: 'Israel', dialCode: '+972', flag: '🇮🇱' },
+    { code: 'IT', name: 'Italy', dialCode: '+39', flag: '🇮🇹' },
+    { code: 'JM', name: 'Jamaica', dialCode: '+1876', flag: '🇯🇲' },
+    { code: 'JP', name: 'Japan', dialCode: '+81', flag: '🇯🇵' },
+    { code: 'JO', name: 'Jordan', dialCode: '+962', flag: '🇯🇴' },
+    { code: 'KZ', name: 'Kazakhstan', dialCode: '+7', flag: '🇰🇿', priority: 1 },
+    { code: 'KE', name: 'Kenya', dialCode: '+254', flag: '🇰🇪' },
+    { code: 'KI', name: 'Kiribati', dialCode: '+686', flag: '🇰🇮' },
+    { code: 'KP', name: 'North Korea', dialCode: '+850', flag: '🇰🇵' },
+    { code: 'KR', name: 'South Korea', dialCode: '+82', flag: '🇰🇷' },
+    { code: 'KW', name: 'Kuwait', dialCode: '+965', flag: '🇰🇼' },
+    { code: 'KG', name: 'Kyrgyzstan', dialCode: '+996', flag: '🇰🇬' },
+    { code: 'LA', name: 'Laos', dialCode: '+856', flag: '🇱🇦' },
+    { code: 'LV', name: 'Latvia', dialCode: '+371', flag: '🇱🇻' },
+    { code: 'LB', name: 'Lebanon', dialCode: '+961', flag: '🇱🇧' },
+    { code: 'LS', name: 'Lesotho', dialCode: '+266', flag: '🇱🇸' },
+    { code: 'LR', name: 'Liberia', dialCode: '+231', flag: '🇱🇷' },
+    { code: 'LY', name: 'Libya', dialCode: '+218', flag: '🇱🇾' },
+    { code: 'LI', name: 'Liechtenstein', dialCode: '+423', flag: '🇱🇮' },
+    { code: 'LT', name: 'Lithuania', dialCode: '+370', flag: '🇱🇹' },
+    { code: 'LU', name: 'Luxembourg', dialCode: '+352', flag: '🇱🇺' },
+    { code: 'MO', name: 'Macao', dialCode: '+853', flag: '🇲🇴' },
+    { code: 'MG', name: 'Madagascar', dialCode: '+261', flag: '🇲🇬' },
+    { code: 'MW', name: 'Malawi', dialCode: '+265', flag: '🇲🇼' },
+    { code: 'MY', name: 'Malaysia', dialCode: '+60', flag: '🇲🇾' },
+    { code: 'MV', name: 'Maldives', dialCode: '+960', flag: '🇲🇻' },
+    { code: 'ML', name: 'Mali', dialCode: '+223', flag: '🇲🇱' },
+    { code: 'MT', name: 'Malta', dialCode: '+356', flag: '🇲🇹' },
+    { code: 'MH', name: 'Marshall Islands', dialCode: '+692', flag: '🇲🇭' },
+    { code: 'MR', name: 'Mauritania', dialCode: '+222', flag: '🇲🇷' },
+    { code: 'MU', name: 'Mauritius', dialCode: '+230', flag: '🇲🇺' },
+    { code: 'MX', name: 'Mexico', dialCode: '+52', flag: '🇲🇽' },
+    { code: 'FM', name: 'Micronesia', dialCode: '+691', flag: '🇫🇲' },
+    { code: 'MD', name: 'Moldova', dialCode: '+373', flag: '🇲🇩' },
+    { code: 'MC', name: 'Monaco', dialCode: '+377', flag: '🇲🇨' },
+    { code: 'MN', name: 'Mongolia', dialCode: '+976', flag: '🇲🇳' },
+    { code: 'ME', name: 'Montenegro', dialCode: '+382', flag: '🇲🇪' },
+    { code: 'MA', name: 'Morocco', dialCode: '+212', flag: '🇲🇦' },
+    { code: 'MZ', name: 'Mozambique', dialCode: '+258', flag: '🇲🇿' },
+    { code: 'MM', name: 'Myanmar', dialCode: '+95', flag: '🇲🇲' },
+    { code: 'NA', name: 'Namibia', dialCode: '+264', flag: '🇳🇦' },
+    { code: 'NR', name: 'Nauru', dialCode: '+674', flag: '🇳🇷' },
+    { code: 'NP', name: 'Nepal', dialCode: '+977', flag: '🇳🇵' },
+    { code: 'NL', name: 'Netherlands', dialCode: '+31', flag: '🇳🇱' },
+    { code: 'NZ', name: 'New Zealand', dialCode: '+64', flag: '🇳🇿' },
+    { code: 'NI', name: 'Nicaragua', dialCode: '+505', flag: '🇳🇮' },
+    { code: 'NE', name: 'Niger', dialCode: '+227', flag: '🇳🇪' },
+    { code: 'NG', name: 'Nigeria', dialCode: '+234', flag: '🇳🇬' },
+    { code: 'MK', name: 'North Macedonia', dialCode: '+389', flag: '🇲🇰' },
+    { code: 'NO', name: 'Norway', dialCode: '+47', flag: '🇳🇴' },
+    { code: 'OM', name: 'Oman', dialCode: '+968', flag: '🇴🇲' },
+    { code: 'PK', name: 'Pakistan', dialCode: '+92', flag: '🇵🇰' },
+    { code: 'PW', name: 'Palau', dialCode: '+680', flag: '🇵🇼' },
+    { code: 'PS', name: 'Palestine', dialCode: '+970', flag: '🇵🇸' },
+    { code: 'PA', name: 'Panama', dialCode: '+507', flag: '🇵🇦' },
+    { code: 'PG', name: 'Papua New Guinea', dialCode: '+675', flag: '🇵🇬' },
+    { code: 'PY', name: 'Paraguay', dialCode: '+595', flag: '🇵🇾' },
+    { code: 'PE', name: 'Peru', dialCode: '+51', flag: '🇵🇪' },
+    { code: 'PH', name: 'Philippines', dialCode: '+63', flag: '🇵🇭' },
+    { code: 'PL', name: 'Poland', dialCode: '+48', flag: '🇵🇱' },
+    { code: 'PT', name: 'Portugal', dialCode: '+351', flag: '🇵🇹' },
+    { code: 'PR', name: 'Puerto Rico', dialCode: '+1787', flag: '🇵🇷' },
+    { code: 'QA', name: 'Qatar', dialCode: '+974', flag: '🇶🇦' },
+    { code: 'RO', name: 'Romania', dialCode: '+40', flag: '🇷🇴' },
+    { code: 'RU', name: 'Russia', dialCode: '+7', flag: '🇷🇺', priority: 0 },
+    { code: 'RW', name: 'Rwanda', dialCode: '+250', flag: '🇷🇼' },
+    { code: 'KN', name: 'Saint Kitts and Nevis', dialCode: '+1869', flag: '🇰🇳' },
+    { code: 'LC', name: 'Saint Lucia', dialCode: '+1758', flag: '🇱🇨' },
+    { code: 'VC', name: 'Saint Vincent and the Grenadines', dialCode: '+1784', flag: '🇻🇨' },
+    { code: 'WS', name: 'Samoa', dialCode: '+685', flag: '🇼🇸' },
+    { code: 'SM', name: 'San Marino', dialCode: '+378', flag: '🇸🇲' },
+    { code: 'ST', name: 'São Tomé and Príncipe', dialCode: '+239', flag: '🇸🇹' },
+    { code: 'SA', name: 'Saudi Arabia', dialCode: '+966', flag: '🇸🇦' },
+    { code: 'SN', name: 'Senegal', dialCode: '+221', flag: '🇸🇳' },
+    { code: 'RS', name: 'Serbia', dialCode: '+381', flag: '🇷🇸' },
+    { code: 'SC', name: 'Seychelles', dialCode: '+248', flag: '🇸🇨' },
+    { code: 'SL', name: 'Sierra Leone', dialCode: '+232', flag: '🇸🇱' },
+    { code: 'SG', name: 'Singapore', dialCode: '+65', flag: '🇸🇬' },
+    { code: 'SK', name: 'Slovakia', dialCode: '+421', flag: '🇸🇰' },
+    { code: 'SI', name: 'Slovenia', dialCode: '+386', flag: '🇸🇮' },
+    { code: 'SB', name: 'Solomon Islands', dialCode: '+677', flag: '🇸🇧' },
+    { code: 'SO', name: 'Somalia', dialCode: '+252', flag: '🇸🇴' },
+    { code: 'ZA', name: 'South Africa', dialCode: '+27', flag: '🇿🇦' },
+    { code: 'SS', name: 'South Sudan', dialCode: '+211', flag: '🇸🇸' },
+    { code: 'ES', name: 'Spain', dialCode: '+34', flag: '🇪🇸' },
+    { code: 'LK', name: 'Sri Lanka', dialCode: '+94', flag: '🇱🇰' },
+    { code: 'SD', name: 'Sudan', dialCode: '+249', flag: '🇸🇩' },
+    { code: 'SR', name: 'Suriname', dialCode: '+597', flag: '🇸🇷' },
+    { code: 'SE', name: 'Sweden', dialCode: '+46', flag: '🇸🇪' },
+    { code: 'CH', name: 'Switzerland', dialCode: '+41', flag: '🇨🇭' },
+    { code: 'SY', name: 'Syria', dialCode: '+963', flag: '🇸🇾' },
+    { code: 'TW', name: 'Taiwan', dialCode: '+886', flag: '🇹🇼' },
+    { code: 'TJ', name: 'Tajikistan', dialCode: '+992', flag: '🇹🇯' },
+    { code: 'TZ', name: 'Tanzania', dialCode: '+255', flag: '🇹🇿' },
+    { code: 'TH', name: 'Thailand', dialCode: '+66', flag: '🇹🇭' },
+    { code: 'TL', name: 'Timor-Leste', dialCode: '+670', flag: '🇹🇱' },
+    { code: 'TG', name: 'Togo', dialCode: '+228', flag: '🇹🇬' },
+    { code: 'TO', name: 'Tonga', dialCode: '+676', flag: '🇹🇴' },
+    { code: 'TT', name: 'Trinidad and Tobago', dialCode: '+1868', flag: '🇹🇹' },
+    { code: 'TN', name: 'Tunisia', dialCode: '+216', flag: '🇹🇳' },
+    { code: 'TR', name: 'Turkey', dialCode: '+90', flag: '🇹🇷' },
+    { code: 'TM', name: 'Turkmenistan', dialCode: '+993', flag: '🇹🇲' },
+    { code: 'TV', name: 'Tuvalu', dialCode: '+688', flag: '🇹🇻' },
+    { code: 'UG', name: 'Uganda', dialCode: '+256', flag: '🇺🇬' },
+    { code: 'UA', name: 'Ukraine', dialCode: '+380', flag: '🇺🇦' },
+    { code: 'AE', name: 'United Arab Emirates', dialCode: '+971', flag: '🇦🇪' },
+    { code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: '🇬🇧' },
+    { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸', priority: 0 },
+    { code: 'UY', name: 'Uruguay', dialCode: '+598', flag: '🇺🇾' },
+    { code: 'UZ', name: 'Uzbekistan', dialCode: '+998', flag: '🇺🇿' },
+    { code: 'VU', name: 'Vanuatu', dialCode: '+678', flag: '🇻🇺' },
+    { code: 'VA', name: 'Vatican City', dialCode: '+379', flag: '🇻🇦' },
+    { code: 'VE', name: 'Venezuela', dialCode: '+58', flag: '🇻🇪' },
+    { code: 'VN', name: 'Vietnam', dialCode: '+84', flag: '🇻🇳' },
+    { code: 'YE', name: 'Yemen', dialCode: '+967', flag: '🇾🇪' },
+    { code: 'ZM', name: 'Zambia', dialCode: '+260', flag: '🇿🇲' },
+    { code: 'ZW', name: 'Zimbabwe', dialCode: '+263', flag: '🇿🇼' },
+];
+/** Get a country by ISO code */
+export function getCountry(code) {
+    return COUNTRIES.find((c) => c.code === code);
+}
+/** Get the suggested countries (pinned to top of selector) */
+export function getSuggestedCountries() {
+    return SUGGESTED_CODES.map((code) => COUNTRIES.find((c) => c.code === code)).filter(Boolean);
+}

package/dist/utils/phoneUtils.d.ts

@@ -0,0 +1,35 @@
+import type { CountryCode } from 'libphonenumber-js/min';
+export interface ParsedPhone {
+    countryCode: CountryCode;
+    nationalNumber: string;
+}
+/**
+ * Parse an E.164 string or bare 10-digit US number into country + national number.
+ * Returns null if unparseable.
+ */
+export declare function parseStoredPhone(value: string): ParsedPhone | null;
+/**
+ * Format digits for display using the country's national format.
+ * e.g. formatNational('US', '5551234567') → '(555) 123-4567'
+ */
+export declare function formatNational(isoCode: CountryCode, digits: string): string;
+/**
+ * Format digits as-you-type for live input formatting.
+ * e.g. formatAsYouType('US', '555123') → '(555) 123'
+ */
+export declare function formatAsYouType(isoCode: CountryCode, digits: string): string;
+/**
+ * Combine country code + national digits into E.164.
+ * e.g. toE164('US', '5551234567') → '+15551234567'
+ */
+export declare function toE164(isoCode: CountryCode, digits: string): string;
+/**
+ * Validate a complete E.164 number.
+ */
+export declare function isValidE164(value: string): boolean;
+/**
+ * Backward-compat: normalize bare 10-digit US numbers to E.164.
+ * Already-E.164 numbers pass through unchanged.
+ */
+export declare function normalizeIncoming(value: string): string;
+//# sourceMappingURL=phoneUtils.d.ts.map

package/dist/utils/phoneUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phoneUtils.d.ts","sourceRoot":"","sources":["../../src/lib/utils/phoneUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CA4BlE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAK3E;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAI5E;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAWnE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAQlD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOvD"}

package/dist/utils/phoneUtils.js

@@ -0,0 +1,104 @@
+import { AsYouType, parsePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js/min';
+/**
+ * Parse an E.164 string or bare 10-digit US number into country + national number.
+ * Returns null if unparseable.
+ */
+export function parseStoredPhone(value) {
+    if (!value)
+        return null;
+    // Bare 10-digit US number (legacy format)
+    const digits = value.replace(/\D/g, '');
+    if (digits.length === 10 && !value.startsWith('+')) {
+        return { countryCode: 'US', nationalNumber: digits };
+    }
+    // E.164 or other formatted number
+    try {
+        const parsed = parsePhoneNumber(value);
+        if (parsed && parsed.country) {
+            return {
+                countryCode: parsed.country,
+                nationalNumber: parsed.nationalNumber
+            };
+        }
+    }
+    catch {
+        // Fall through
+    }
+    // +1 with 10 digits but parsePhoneNumber didn't resolve country (US/CA ambiguity)
+    if (value.startsWith('+1') && digits.length === 11) {
+        return { countryCode: 'US', nationalNumber: digits.slice(1) };
+    }
+    return null;
+}
+/**
+ * Format digits for display using the country's national format.
+ * e.g. formatNational('US', '5551234567') → '(555) 123-4567'
+ */
+export function formatNational(isoCode, digits) {
+    if (!digits)
+        return '';
+    const formatter = new AsYouType(isoCode);
+    formatter.input(digits);
+    return formatter.getNumber()?.formatNational() ?? formatter.getNumber()?.number ?? digits;
+}
+/**
+ * Format digits as-you-type for live input formatting.
+ * e.g. formatAsYouType('US', '555123') → '(555) 123'
+ */
+export function formatAsYouType(isoCode, digits) {
+    if (!digits)
+        return '';
+    const formatter = new AsYouType(isoCode);
+    return formatter.input(digits);
+}
+/**
+ * Combine country code + national digits into E.164.
+ * e.g. toE164('US', '5551234567') → '+15551234567'
+ */
+export function toE164(isoCode, digits) {
+    if (!digits)
+        return '';
+    const clean = digits.replace(/\D/g, '');
+    if (!clean)
+        return '';
+    try {
+        const parsed = parsePhoneNumber(clean, isoCode);
+        if (parsed)
+            return parsed.format('E.164');
+    }
+    catch {
+        // Fall through
+    }
+    return '';
+}
+/**
+ * Validate a complete E.164 number.
+ */
+export function isValidE164(value) {
+    if (!value)
+        return false;
+    if (!value.startsWith('+'))
+        return false;
+    try {
+        return isValidPhoneNumber(value);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Backward-compat: normalize bare 10-digit US numbers to E.164.
+ * Already-E.164 numbers pass through unchanged.
+ */
+export function normalizeIncoming(value) {
+    if (!value)
+        return '';
+    if (value.startsWith('+'))
+        return value;
+    const digits = value.replace(/\D/g, '');
+    if (digits.length === 10)
+        return `+1${digits}`;
+    if (digits.length === 11 && digits.startsWith('1'))
+        return `+${digits}`;
+    return value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.17.4",
+  "version": "5.18.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -107,6 +107,10 @@
     "./utils/imageValidation": {
       "import": "./dist/utils/imageValidation.js"
     },
+    "./utils/phoneUtils": {
+      "types": "./dist/utils/phoneUtils.d.ts",
+      "import": "./dist/utils/phoneUtils.js"
+    },
     "./utils/portal": {
       "import": "./dist/utils/portal.js"
     },
@@ -227,6 +231,7 @@
     "filepond-plugin-image-exif-orientation": "^1.0.11",
     "filepond-plugin-image-preview": "^4.6.12",
     "jwt-decode": "^4.0.0",
+    "libphonenumber-js": "^1.12.38",
     "sortablejs": "^1.15.6",
     "svelte-easy-crop": "^5.0.0",
     "svelte-filepond": "^0.2.2",