@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/recipes/inputs/Search.svelte

@@ -1,102 +1,102 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { SearchOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    value?: unknown;
-    placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
-    disabled?: boolean;
-    id?: string;
-    name?: string;
-    class?: string;
-    oninput?: (event: Event) => void;
-    onchange?: (event: Event) => void;
-    onkeydown?: (event: KeyboardEvent) => void;
-    onkeyup?: (event: KeyboardEvent) => void;
-    onfocus?: (event: FocusEvent) => void;
-    onblur?: (event: FocusEvent) => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  // API compatible with flowbite-svelte Search
-  let {
-    value = $bindable(""),
-    placeholder = "Search",
-    size = "lg",
-    disabled = false,
-    id = "",
-    name = "",
-    class: className = "",
-    oninput,
-    onchange,
-    onkeydown,
-    onkeyup,
-    onfocus,
-    onblur,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const sizes = {
-    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
-    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
-    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
-  };
-
-  let sizeConfig = $derived(sizes[size] || sizes.lg);
-
-  function handleInput(event: Event) {
-    value = (event.target as HTMLInputElement).value;
-    oninput?.(event);
-  }
-
-  function handleChange(event: Event) {
-    onchange?.(event);
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    onkeydown?.(event);
-  }
-
-  function handleKeyup(event: KeyboardEvent) {
-    onkeyup?.(event);
-  }
-
-  function handleFocus(event: FocusEvent) {
-    onfocus?.(event);
-  }
-
-  function handleBlur(event: FocusEvent) {
-    onblur?.(event);
-  }
-</script>
-
-<div class="relative w-full {sizeConfig.wrapper} {className}">
-  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
-  </div>
-  <input
-    type="search"
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onkeydown={handleKeydown}
-    onkeyup={handleKeyup}
-    onfocus={handleFocus}
-    onblur={handleBlur}
-    {...restProps}
-  />
-  {#if children}
-    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
-      {@render children()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { SearchOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
+
+  interface Props {
+    value?: unknown;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  // API compatible with flowbite-svelte Search
+  let {
+    value = $bindable(""),
+    placeholder = "Search",
+    size = "lg",
+    disabled = false,
+    id = "",
+    name = "",
+    class: className = "",
+    oninput,
+    onchange,
+    onkeydown,
+    onkeyup,
+    onfocus,
+    onblur,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const sizes = {
+    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
+  };
+
+  let sizeConfig = $derived(sizes[size] || sizes.lg);
+
+  function handleInput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    oninput?.(event);
+  }
+
+  function handleChange(event: Event) {
+    onchange?.(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    onkeydown?.(event);
+  }
+
+  function handleKeyup(event: KeyboardEvent) {
+    onkeyup?.(event);
+  }
+
+  function handleFocus(event: FocusEvent) {
+    onfocus?.(event);
+  }
+
+  function handleBlur(event: FocusEvent) {
+    onblur?.(event);
+  }
+</script>
+
+<div class="relative w-full {sizeConfig.wrapper} {className}">
+  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
+  </div>
+  <input
+    type="search"
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onkeydown={handleKeydown}
+    onkeyup={handleKeyup}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    {...restProps}
+  />
+  {#if children}
+    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
+      {@render children()}
+    </div>
+  {/if}
+</div>

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

@@ -1,7 +1,8 @@
-// Composite input components - built on primitives
-export { default as MultiSelect } from './MultiSelect.svelte';
-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 Search } from './Search.svelte';
+// Composite input components - built on primitives
+export { default as MultiSelect } from './MultiSelect.svelte';
+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"}