@getmicdrop/svelte-components 5.17.4 → 5.19.0

package/dist/recipes/inputs/PhoneInput.svelte

@@ -0,0 +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>

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

@@ -0,0 +1,40 @@
+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;
+        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":"AAuPA,QAAA,MAAM,UAAU;;YAhNJ,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;;;;WA2LiC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte

@@ -1,170 +1,170 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/PlaceAutocomplete",
-    component: PlaceAutocomplete,
-    argTypes: {
-      placeholder: { control: "text" },
-      initialValue: { control: "text" },
-      mode: { control: "select", options: ["full", "cityState"] },
-      language: { control: "text" },
-      region: { control: "text" },
-      onResponse: { action: "response" },
-      onError: { action: "error" },
-    },
-  });
-
-  function handleResponse(data) {
-    console.log("Place selected:", data);
-    alert(`Selected: ${JSON.stringify(data, null, 2)}`);
-  }
-
-  function handleError(error) {
-    console.error("Error:", error);
-    alert(`Error: ${error}`);
-  }
-
-</script>
-
-
-<Story
-  name="Default Full Address"
-  args={{
-    placeholder: "Search for location...",
-    mode: "full",
-    onResponse: handleResponse,
-    onError: handleError
-  }}
-/>
-
-<Story name="City State Only">
-  <div style="max-width: 500px; margin: 0 auto;">
-    <PlaceAutocomplete
-      placeholder="Search for city, state..."
-      mode="cityState"
-      onResponse={handleResponse}
-      onError={handleError}
-    />
-  </div>
-</Story>
-
-<Story name="With Initial Value">
-  <div style="max-width: 500px; margin: 0 auto;">
-    <PlaceAutocomplete
-      placeholder="Search for location..."
-      initialValue="New York, NY"
-      mode="cityState"
-      onResponse={handleResponse}
-      onError={handleError}
-    />
-  </div>
-</Story>
-
-<Story name="Custom Placeholder">
-  <div style="max-width: 500px; margin: 0 auto;">
-    <PlaceAutocomplete
-      placeholder="Where is your venue located?"
-      mode="full"
-      onResponse={handleResponse}
-      onError={handleError}
-    />
-  </div>
-</Story>
-
-<Story name="In Form Context">
-  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
-    <h2 class="text-2xl font-bold mb-6">Event Location</h2>
-    <div class="space-y-4">
-      <div>
-        <label for="venue-name" class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-          Venue Name
-        </label>
-        <input
-          id="venue-name"
-          type="text"
-          placeholder="Enter venue name"
-          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
-        />
-      </div>
-      <div>
-        <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-          Venue Location
-        </label>
-        <PlaceAutocomplete
-          placeholder="Search for venue location..."
-          mode="full"
-          onResponse={handleResponse}
-          onError={handleError}
-        />
-      </div>
-      <button class="px-4 py-2 bg-primary text-white rounded-lg">
-        Save Location
-      </button>
-    </div>
-  </div>
-</Story>
-
-<Story name="Performer Location">
-  <div style="max-width: 500px; margin: 0 auto;">
-    <!-- svelte-ignore a11y_label_has_associated_control -->
-    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-      Your Home Base
-    </label>
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
-      Let venues know where you're based
-    </p>
-    <PlaceAutocomplete
-      placeholder="Enter your city and state..."
-      mode="cityState"
-      onResponse={handleResponse}
-      onError={handleError}
-    />
-  </div>
-</Story>
-
-<Story name="Multiple Locations">
-  <div style="max-width: 700px; margin: 0 auto; padding: 20px;">
-    <h2 class="text-xl font-bold mb-6">Tour Locations</h2>
-    <div class="space-y-6">
-      <div>
-        <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-          Starting City
-        </label>
-        <PlaceAutocomplete
-          placeholder="Where will you start?"
-          mode="cityState"
-          onResponse={handleResponse}
-          onError={handleError}
-        />
-      </div>
-      <div>
-        <!-- svelte-ignore a11y_label_has_associated_control -->
-        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-          Destination City
-        </label>
-        <PlaceAutocomplete
-          placeholder="Where will you end?"
-          mode="cityState"
-          onResponse={handleResponse}
-          onError={handleError}
-        />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Compact Layout">
-  <div style="max-width: 350px; margin: 0 auto;">
-    <PlaceAutocomplete
-      placeholder="City..."
-      mode="cityState"
-      onResponse={handleResponse}
-      onError={handleError}
-    />
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/PlaceAutocomplete",
+    component: PlaceAutocomplete,
+    argTypes: {
+      placeholder: { control: "text" },
+      initialValue: { control: "text" },
+      mode: { control: "select", options: ["full", "cityState"] },
+      language: { control: "text" },
+      region: { control: "text" },
+      onResponse: { action: "response" },
+      onError: { action: "error" },
+    },
+  });
+
+  function handleResponse(data) {
+    console.log("Place selected:", data);
+    alert(`Selected: ${JSON.stringify(data, null, 2)}`);
+  }
+
+  function handleError(error) {
+    console.error("Error:", error);
+    alert(`Error: ${error}`);
+  }
+
+</script>
+
+
+<Story
+  name="Default Full Address"
+  args={{
+    placeholder: "Search for location...",
+    mode: "full",
+    onResponse: handleResponse,
+    onError: handleError
+  }}
+/>
+
+<Story name="City State Only">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Search for city, state..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="With Initial Value">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Search for location..."
+      initialValue="New York, NY"
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="Custom Placeholder">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Where is your venue located?"
+      mode="full"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="In Form Context">
+  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+    <h2 class="text-2xl font-bold mb-6">Event Location</h2>
+    <div class="space-y-4">
+      <div>
+        <label for="venue-name" class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Venue Name
+        </label>
+        <input
+          id="venue-name"
+          type="text"
+          placeholder="Enter venue name"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div>
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Venue Location
+        </label>
+        <PlaceAutocomplete
+          placeholder="Search for venue location..."
+          mode="full"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+      <button class="px-4 py-2 bg-primary text-white rounded-lg">
+        Save Location
+      </button>
+    </div>
+  </div>
+</Story>
+
+<Story name="Performer Location">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <!-- svelte-ignore a11y_label_has_associated_control -->
+    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+      Your Home Base
+    </label>
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
+      Let venues know where you're based
+    </p>
+    <PlaceAutocomplete
+      placeholder="Enter your city and state..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="Multiple Locations">
+  <div style="max-width: 700px; margin: 0 auto; padding: 20px;">
+    <h2 class="text-xl font-bold mb-6">Tour Locations</h2>
+    <div class="space-y-6">
+      <div>
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Starting City
+        </label>
+        <PlaceAutocomplete
+          placeholder="Where will you start?"
+          mode="cityState"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+      <div>
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Destination City
+        </label>
+        <PlaceAutocomplete
+          placeholder="Where will you end?"
+          mode="cityState"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Compact Layout">
+  <div style="max-width: 350px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="City..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>