@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/recipes/inputs/PhoneInput.svelte

@@ -1,254 +1,254 @@
-<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...',
-    noResults: 'No countries found',
-    countrySelector: 'Select country',
-    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,
-        }}
-      />
-
-      <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>
+<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...',
+    noResults: 'No countries found',
+    countrySelector: 'Select country',
+    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,
+        }}
+      />
+
+      <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>