@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte

@@ -1,131 +1,131 @@
-<script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { passwordStrength } from "check-password-strength";
-    import { safeSlide } from "../../../utils/transitions.js";
-    import { cubicOut } from "svelte/easing";
-    import { untrack } from "svelte";
-
-    interface Props {
-      password?: string;
-      strengthText?: string;
-      score?: number;
-      textColor?: string;
-      children?: Snippet;
-    }
-
-    let {
-      password = "",
-      strengthText = $bindable(""),
-      score = $bindable(-1),
-      textColor = $bindable(""),
-      children,
-    }: Props = $props();
-
-    let debouncedPassword = $state("");
-    // Use a plain variable for timer to avoid reactive dependency
-    let timer: ReturnType<typeof setTimeout> | undefined;
-
-    const customOptions = [
-        {
-            id: 0,
-            value: "Too weak",
-            minDiversity: 0,
-            minLength: 0,
-        },
-        {
-            id: 1,
-            value: "Weak",
-            minDiversity: 1,
-            minLength: 6,
-        },
-        {
-            id: 2,
-            value: "Good",
-            minDiversity: 2,
-            minLength: 8,
-        },
-        {
-            id: 3,
-            value: "Strong",
-            minDiversity: 3,
-            minLength: 10,
-        },
-    ] as const;
-
-    // Debounce password updates - timer is not reactive to avoid dependency cycle
-    $effect(() => {
-        clearTimeout(timer);
-        if (password.length === 0) {
-            debouncedPassword = "";
-        } else {
-            timer = setTimeout(() => {
-                debouncedPassword = password;
-            }, 400); // 400ms delay as requested
-        }
-        return () => clearTimeout(timer);
-    });
-
-    let strength = $derived(debouncedPassword
-        ? passwordStrength(debouncedPassword, customOptions as any)
-        : null);
-
-    // Derive score based on password length and strength
-    let computedScore = $derived(debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1));
-
-    // Sync computed values to bindable props using effects with untrack
-    $effect(() => {
-        const newScore = computedScore;
-        if (untrack(() => score) !== newScore) {
-            score = newScore;
-        }
-    });
-
-    // Derive text and color from computedScore (not from bindable score)
-    let computedStrengthText = $derived(
-        computedScore === 0 ? "Too weak" :
-        computedScore === 1 ? "Weak" :
-        computedScore === 2 ? "Good" :
-        computedScore === 3 ? "Strong" : ""
-    );
-
-    let computedTextColor = $derived(computedScore <= 1 ? "text-red-600" : "text-green-600");
-
-    $effect(() => {
-        const newText = computedStrengthText;
-        if (untrack(() => strengthText) !== newText) {
-            strengthText = newText;
-        }
-    });
-
-    let strengthColor = $derived(computedScore <= 1 ? "bg-red-600" : "bg-green-600");
-
-    $effect(() => {
-        const newColor = computedTextColor;
-        if (untrack(() => textColor) !== newColor) {
-            textColor = newColor;
-        }
-    });
-
-    // Calculate how many bars to fill (1-3)
-    let filledBars = $derived(computedScore === 0 ? 1 : computedScore === 1 ? 2 : computedScore >= 2 ? 3 : 0);
-</script>
-
-{#if debouncedPassword.length > 0}
-    <div
-        transition:safeSlide={{ duration: 600, easing: cubicOut }}
-        class="pt-2 space-y-2"
-    >
-        <!-- 3 segment bars -->
-        <div class="flex gap-1.5">
-            {#each [0, 1, 2] as barIndex}
-                <div
-                    class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
-                    filledBars
-                        ? strengthColor
-                        : 'bg-gray-200 dark:bg-gray-700'}"
-                ></div>
-            {/each}
-        </div>
-        {@render children?.()}
-    </div>
-{/if}
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { passwordStrength } from "check-password-strength";
+    import { safeSlide } from "../../../utils/transitions.js";
+    import { cubicOut } from "svelte/easing";
+    import { untrack } from "svelte";
+
+    interface Props {
+      password?: string;
+      strengthText?: string;
+      score?: number;
+      textColor?: string;
+      children?: Snippet;
+    }
+
+    let {
+      password = "",
+      strengthText = $bindable(""),
+      score = $bindable(-1),
+      textColor = $bindable(""),
+      children,
+    }: Props = $props();
+
+    let debouncedPassword = $state("");
+    // Use a plain variable for timer to avoid reactive dependency
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    const customOptions = [
+        {
+            id: 0,
+            value: "Too weak",
+            minDiversity: 0,
+            minLength: 0,
+        },
+        {
+            id: 1,
+            value: "Weak",
+            minDiversity: 1,
+            minLength: 6,
+        },
+        {
+            id: 2,
+            value: "Good",
+            minDiversity: 2,
+            minLength: 8,
+        },
+        {
+            id: 3,
+            value: "Strong",
+            minDiversity: 3,
+            minLength: 10,
+        },
+    ] as const;
+
+    // Debounce password updates - timer is not reactive to avoid dependency cycle
+    $effect(() => {
+        clearTimeout(timer);
+        if (password.length === 0) {
+            debouncedPassword = "";
+        } else {
+            timer = setTimeout(() => {
+                debouncedPassword = password;
+            }, 400); // 400ms delay as requested
+        }
+        return () => clearTimeout(timer);
+    });
+
+    let strength = $derived(debouncedPassword
+        ? passwordStrength(debouncedPassword, customOptions as any)
+        : null);
+
+    // Derive score based on password length and strength
+    let computedScore = $derived(debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1));
+
+    // Sync computed values to bindable props using effects with untrack
+    $effect(() => {
+        const newScore = computedScore;
+        if (untrack(() => score) !== newScore) {
+            score = newScore;
+        }
+    });
+
+    // Derive text and color from computedScore (not from bindable score)
+    let computedStrengthText = $derived(
+        computedScore === 0 ? "Too weak" :
+        computedScore === 1 ? "Weak" :
+        computedScore === 2 ? "Good" :
+        computedScore === 3 ? "Strong" : ""
+    );
+
+    let computedTextColor = $derived(computedScore <= 1 ? "text-red-600" : "text-green-600");
+
+    $effect(() => {
+        const newText = computedStrengthText;
+        if (untrack(() => strengthText) !== newText) {
+            strengthText = newText;
+        }
+    });
+
+    let strengthColor = $derived(computedScore <= 1 ? "bg-red-600" : "bg-green-600");
+
+    $effect(() => {
+        const newColor = computedTextColor;
+        if (untrack(() => textColor) !== newColor) {
+            textColor = newColor;
+        }
+    });
+
+    // Calculate how many bars to fill (1-3)
+    let filledBars = $derived(computedScore === 0 ? 1 : computedScore === 1 ? 2 : computedScore >= 2 ? 3 : 0);
+</script>
+
+{#if debouncedPassword.length > 0}
+    <div
+        transition:safeSlide={{ duration: 600, easing: cubicOut }}
+        class="pt-2 space-y-2"
+    >
+        <!-- 3 segment bars -->
+        <div class="flex gap-1.5">
+            {#each [0, 1, 2] as barIndex}
+                <div
+                    class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
+                    filledBars
+                        ? strengthColor
+                        : 'bg-gray-200 dark:bg-gray-700'}"
+                ></div>
+            {/each}
+        </div>
+        {@render children?.()}
+    </div>
+{/if}

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"}