@getmicdrop/svelte-components 5.18.0 → 5.18.2

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

@@ -4,6 +4,15 @@
   import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
   import { typography } from '../../../tokens/typography';
   import { bloom } from '../../../utils/transitions.js';
+
+  const defaultLabels = {
+    anErrorOccurred: 'An error occurred',
+    seeConsoleForDetails: 'see console for details.',
+    errorFetchingPlaceDetails: 'error fetching place details',
+    errorFetchToken: 'error fetch token',
+    errorLoadingGoogleMapsApi: 'Error loading Google Maps API',
+    googleMapsApiKeyRequired: 'Google Maps API key is required',
+  };
 /** Google Places API address component */  interface AddressComponent {    longText: string;    shortText: string;    types: string[];  }  /** Google Places API response data */  interface PlaceData {    formattedAddress?: string;    addressComponents?: AddressComponent[];    text?: string;    [key: string]: unknown;  }  /** Google Places autocomplete suggestion */  interface AutocompleteSuggestion {    placePrediction: {      types: string[];      text: { toString(): string };      toPlace(): PlaceObject;    };  }  /** Google Places place object */  interface PlaceObject {    fetchFields(options: { fields: string[] }): Promise<void>;    toJSON(): PlaceData;  }  /** Google Places API interface */  interface PlacesApiInterface {    AutocompleteSessionToken: new () => AutocompleteSessionToken;    AutocompleteSuggestion: {      fetchAutocompleteSuggestions(request: AutocompleteRequest): Promise<{ suggestions: AutocompleteSuggestion[] }>;    };  }  /** Google Places autocomplete session token */  interface AutocompleteSessionToken {}  /** Autocomplete request parameters */  interface AutocompleteRequest {    input: string;    language: string;    region: string;    sessionToken: AutocompleteSessionToken | string;  }  /** Search result item */  interface SearchResult {    to_place: PlaceObject;    text: string;    originalText?: string;  }
 
   interface Props {
@@ -18,6 +27,7 @@
     mode?: 'full' | 'cityState';
     animateFocus?: boolean;
     disabled?: boolean;
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -32,8 +42,11 @@
     mode = 'full',
     animateFocus = true,
     disabled = false,
+    labels: userLabels = {},
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let shouldAnimate = $derived(animateFocus && !disabled);
 
   let inputRef: HTMLInputElement;
@@ -131,9 +144,9 @@
     } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
       onError(
-        (error.name || 'An error occurred') +
+        (error.name || labels.anErrorOccurred) +
           ' - ' +
-          (error.message || 'see console for details.')
+          (error.message || labels.seeConsoleForDetails)
       );
     }
   };
@@ -156,9 +169,9 @@
     } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
       onError(
-        (error.name || 'An error occurred') +
+        (error.name || labels.anErrorOccurred) +
           ' - ' +
-          (error.message || 'error fetching place details')
+          (error.message || labels.errorFetchingPlaceDetails)
       );
     }
 
@@ -175,9 +188,9 @@
     } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
       onError(
-        (error.name || 'An error occurred') +
+        (error.name || labels.anErrorOccurred) +
           ' - ' +
-          (error.message || 'error fetch token')
+          (error.message || labels.errorFetchToken)
       );
       return req;
     }
@@ -236,7 +249,7 @@
     // Initialize Google Maps API
     const initGoogleMaps = async () => {
       if (!PUBLIC_GOOGLE_MAPS_API_KEY) {
-        onError('Google Maps API key is required');
+        onError(labels.googleMapsApiKeyRequired);
         return;
       }
 
@@ -255,9 +268,9 @@
       } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
         onError(
-          (error.name || 'An error occurred') +
+          (error.name || labels.anErrorOccurred) +
             ' - ' +
-            (error.message || 'Error loading Google Maps API')
+            (error.message || labels.errorLoadingGoogleMapsApi)
         );
       }
     };

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

@@ -1,28 +1,33 @@
-/** Google Places API address component */ interface AddressComponent {
-    longText: string;
-    shortText: string;
-    types: string[];
-}
-/** Google Places API response data */ interface PlaceData {
-    formattedAddress?: string;
-    addressComponents?: AddressComponent[];
-    text?: string;
-    [key: string]: unknown;
-}
-interface Props {
+declare const PlaceAutocomplete: import("svelte").Component<{
     fetchFields?: string[];
     placeholder?: string;
     language?: string;
     region?: string;
     autocomplete?: string;
     initialValue?: string;
-    onResponse?: (data: PlaceData) => void;
+    onResponse?: (data: {
+        [key: string]: unknown;
+        formattedAddress?: string;
+        addressComponents?: {
+            longText: string;
+            shortText: string;
+            types: string[];
+        }[];
+        text?: string;
+    }) => void;
     onError?: (error: string) => void;
-    mode?: 'full' | 'cityState';
+    mode?: "full" | "cityState";
     animateFocus?: boolean;
     disabled?: boolean;
-}
-declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "placeholder">;
+    labels?: Partial<{
+        anErrorOccurred: string;
+        seeConsoleForDetails: string;
+        errorFetchingPlaceDetails: string;
+        errorFetchToken: string;
+        errorLoadingGoogleMapsApi: string;
+        googleMapsApiKeyRequired: string;
+    }>;
+}, {}, "placeholder">;
 type PlaceAutocomplete = ReturnType<typeof PlaceAutocomplete>;
 export default PlaceAutocomplete;
 //# sourceMappingURL=PlaceAutocomplete.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AASA,0CAA0C,CAAE,UAAU,gBAAgB;IAAM,QAAQ,EAAE,MAAM,CAAC;IAAI,SAAS,EAAE,MAAM,CAAC;IAAI,KAAK,EAAE,MAAM,EAAE,CAAC;CAAG;AACzI,sCAAsC,CAAE,UAAU,SAAS;IAAM,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAI,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAAI,IAAI,CAAC,EAAE,MAAM,CAAC;IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAAG;AAMrL,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8SH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AA8UA,QAAA,MAAM,iBAAiB;kBAnTL,MAAM,EAAE;kBACR,MAAM;eACT,MAAM;aACR,MAAM;mBACA,MAAM;mBACN,MAAM;iBACR,CAAC,IAAI;;2BATkM,MAAM;4BAAyB;sBAArK,MAAM;uBAAgB,MAAM;mBAAY,MAAM,EAAE;WAAuI;eAAY,MAAM;KAS1P,KAAK,IAAI;cAC5B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;WAC1B,MAAM,GAAG,WAAW;mBACZ,OAAO;eACX,OAAO;aACT,OAAO;;;;;;;MAAsB;qBAwSqB,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.svelte

@@ -3,6 +3,10 @@
   import { SearchOutline } from "../../primitives/Icons";
   import { typography } from '../../tokens/typography';
 
+  const defaultLabels = {
+    placeholder: 'Search',
+  };
+
   interface Props {
     value?: unknown;
     placeholder?: string;
@@ -18,13 +22,14 @@
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
     [key: string]: unknown;
   }
 
   // API compatible with flowbite-svelte Search
   let {
     value = $bindable(""),
-    placeholder = "Search",
+    placeholder = undefined,
     size = "lg",
     disabled = false,
     id = "",
@@ -37,9 +42,12 @@
     onfocus,
     onblur,
     children,
+    labels: userLabels = {},
     ...restProps
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   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" },
@@ -82,7 +90,7 @@
     type="search"
     {id}
     {name}
-    {placeholder}
+    placeholder={placeholder ?? labels.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

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

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const Search: import("svelte").Component<{
+    [key: string]: unknown;
     value?: unknown;
     placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     disabled?: boolean;
     id?: string;
     name?: string;
@@ -14,9 +15,10 @@ interface Props {
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     children?: Snippet;
-    [key: string]: unknown;
-}
-declare const Search: import("svelte").Component<Props, {}, "value">;
+    labels?: Partial<{
+        placeholder: string;
+    }>;
+}, {}, "value">;
 type Search = ReturnType<typeof Search>;
 export default Search;
 //# sourceMappingURL=Search.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA0EH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAsGtC,QAAA,MAAM,MAAM;;YAxFA,OAAO;kBACD,MAAM;WACb,IAAI,GAAG,IAAI,GAAG,IAAI;eACd,OAAO;SACb,MAAM;WACJ,MAAM;YACL,MAAM;cACJ,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;eACrB,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;gBACrB,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI;cAChC,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI;cAC9B,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;aAC5B,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;eACzB,OAAO;aACT,OAAO;;MAAsB;eA0EU,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -1,10 +1,9 @@
 <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";
+  import { COUNTRIES, type Country } from "./countryData";
 
   interface Props {
     country?: Country;
@@ -14,17 +13,13 @@
       searchPlaceholder?: string;
       noResults?: string;
       countrySelector?: string;
-      suggested?: string;
-      allCountries?: string;
     };
   }
 
   const defaultLabels = {
-    searchPlaceholder: 'Search countries...',
+    searchPlaceholder: 'Search...',
     noResults: 'No countries found',
     countrySelector: 'Select country',
-    suggested: 'Suggested',
-    allCountries: 'All countries',
   };
 
   let {
@@ -45,7 +40,6 @@
   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;
@@ -58,18 +52,6 @@
     );
   });
 
-  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',
@@ -126,8 +108,8 @@
     switch (event.key) {
       case "Enter":
         event.preventDefault();
-        if (isOpen && focusedIndex >= 0 && focusedIndex < flatItems.length) {
-          selectCountry(flatItems[focusedIndex]);
+        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
+          selectCountry(filteredCountries[focusedIndex]);
         } else if (!isOpen) {
           toggle();
         }
@@ -137,7 +119,7 @@
         if (!isOpen) {
           toggle();
         } else {
-          focusedIndex = Math.min(focusedIndex + 1, flatItems.length - 1);
+          focusedIndex = Math.min(focusedIndex + 1, filteredCountries.length - 1);
           scrollToFocused();
         }
         break;
@@ -189,14 +171,6 @@
       window.removeEventListener("resize", updateDropdownPosition);
     };
   });
-
-  let itemIndex = 0;
-  function resetIndex() {
-    itemIndex = 0;
-  }
-  function nextIndex() {
-    return itemIndex++;
-  }
 </script>
 
 <div class="relative shrink-0">
@@ -220,7 +194,6 @@
     <!-- 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"
@@ -233,7 +206,7 @@
         <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"
+          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 text-gray-900 dark:text-white focus:outline-hidden focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-400 dark:placeholder-gray-500"
           placeholder={labels.searchPlaceholder}
           bind:value={searchQuery}
           onkeydown={handleKeydown}
@@ -242,40 +215,10 @@
 
       <!-- 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()}
+        {#each filteredCountries as c, idx}
           <!-- 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'}"
+            class={`flex items-center gap-3 px-3 py-2 cursor-pointer ${typography.sm} transition-colors ${c.code === country.code ? '' : typography.textMuted} ${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}
@@ -287,7 +230,7 @@
             <span class={typography.textMuted}>{c.dialCode}</span>
           </li>
         {:else}
-          <div class="px-3 py-4 text-center {typography.textMuted}">
+          <div class={`px-3 py-4 text-center ${typography.textMuted}`}>
             {labels.noResults}
           </div>
         {/each}

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

@@ -7,8 +7,6 @@ interface Props {
         searchPlaceholder?: string;
         noResults?: string;
         countrySelector?: string;
-        suggested?: string;
-        allCountries?: string;
     };
 }
 declare const CountrySelector: import("svelte").Component<Props, {}, "country">;

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

@@ -1 +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"}
+{"version":3,"file":"CountrySelector.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/phoneInput/CountrySelector.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAGtD,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;KAC1B,CAAC;CACH;AA0MH,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

@@ -10,8 +10,6 @@ export interface Country {
     /** 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;

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

@@ -1 +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"}
+{"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,eAAO,MAAM,SAAS,EAAE,OAAO,EAwM9B,CAAC;AAEF,gCAAgC;AAChC,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAE5D;AAKD,8DAA8D;AAC9D,wBAAgB,qBAAqB,IAAI,OAAO,EAAE,CAEjD"}

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

@@ -1,6 +1,5 @@
-/** Countries pinned to the top of the selector */
-export const SUGGESTED_CODES = ['US', 'CA', 'GB', 'MX', 'AU'];
 export const COUNTRIES = [
+    { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸', priority: 0 },
     { code: 'AF', name: 'Afghanistan', dialCode: '+93', flag: '🇦🇫' },
     { code: 'AL', name: 'Albania', dialCode: '+355', flag: '🇦🇱' },
     { code: 'DZ', name: 'Algeria', dialCode: '+213', flag: '🇩🇿' },
@@ -190,7 +189,6 @@ export const COUNTRIES = [
     { 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: '🇻🇺' },
@@ -205,6 +203,8 @@ export const COUNTRIES = [
 export function getCountry(code) {
     return COUNTRIES.find((c) => c.code === code);
 }
+/** Country codes pinned to top of the country selector */
+const SUGGESTED_CODES = ['US', 'CA', 'GB', 'AU'];
 /** 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/recipes/modals/AlertModal.svelte

@@ -19,6 +19,10 @@
   import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
   import { typography } from '../../tokens/typography';
 
+  const defaultLabels = {
+    ok: 'OK',
+  };
+
   let {
     /** Whether the modal is visible */
     open = $bindable(false),
@@ -29,7 +33,7 @@
     /** Alert message */
     message = '',
     /** Button text */
-    buttonText = 'OK',
+    buttonText = undefined,
     /** Auto-close delay in milliseconds (0 to disable) */
     autoClose = 0,
     /** Modal size */
@@ -37,8 +41,13 @@
     /** Callbacks */
     onclose,
     onconfirm,
+    /** Override user-visible strings */
+    labels: userLabels = {},
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+  let effectiveButtonText = $derived(buttonText ?? labels.ok);
+
   // Variant styles
   const variantStyles = {
     success: {
@@ -123,7 +132,7 @@
         variant={styles.button}
         onclick={handleConfirm}
       >
-        {buttonText}
+        {effectiveButtonText}
       </Button>
     </div>
   {/snippet}

package/dist/recipes/modals/AlertModal.svelte.d.ts

@@ -8,21 +8,23 @@ declare const AlertModal: import("svelte").Component<{
     variant?: string;
     title?: string;
     message?: string;
-    buttonText?: string;
+    buttonText?: any;
     autoClose?: number;
     size?: string;
     onclose: any;
     onconfirm: any;
+    labels?: Record<string, any>;
 }, {}, "open">;
 type $$ComponentProps = {
     open?: boolean;
     variant?: string;
     title?: string;
     message?: string;
-    buttonText?: string;
+    buttonText?: any;
     autoClose?: number;
     size?: string;
     onclose: any;
     onconfirm: any;
+    labels?: Record<string, any>;
 };
 //# sourceMappingURL=AlertModal.svelte.d.ts.map

package/dist/recipes/modals/AlertModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.svelte.js"],"names":[],"mappings":";;;;;AA0IA;WA5G4B,OAAO;cAAY,MAAM;YAAU,MAAM;cAAY,MAAM;iBAAe,MAAM;gBAAc,MAAM;WAAS,MAAM;aAAW,GAAG;eAAa,GAAG;eA4GpH;wBA5GtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"AlertModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.svelte.js"],"names":[],"mappings":";;;;;AAmJA;WAjH4B,OAAO;cAAY,MAAM;YAAU,MAAM;cAAY,MAAM;iBAAe,GAAG;gBAAc,MAAM;WAAS,MAAM;aAAW,GAAG;eAAa,GAAG;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;eAiH/I;wBAjHtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -5,6 +5,10 @@
   import { typography } from '../../tokens/typography';
   import { triggerHaptic } from '../../utils/haptic.js';
 
+  const defaultLabels = {
+    close: 'Close',
+  };
+
   let {
     open = $bindable(false),
     size = "md",
@@ -25,9 +29,12 @@
     onconfirm,
     oncancel,
     onclose,
+    labels: userLabels = {},
     ...restProps
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let resolvedIcon = $derived(customIcon || icon);
 
   let resolvedActions = $derived(actions.length > 0 ? actions : buildActionsFromProps());
@@ -113,7 +120,7 @@
       {#if closeBtn}
         <div class="flex justify-end -mt-2 -mr-2 mb-2">
           <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
-            <img src={Cancel} alt="Close" class="w-5 h-5" />
+            <img src={Cancel} alt={labels.close} class="w-5 h-5" />
           </Button>
         </div>
       {/if}

package/dist/recipes/modals/ConfirmationModal.svelte.d.ts

@@ -22,6 +22,7 @@ declare const ConfirmationModal: import("svelte").Component<{
     onconfirm: any;
     oncancel: any;
     onclose: any;
+    labels?: Record<string, any>;
 } & Record<string, any>, {}, "open">;
 type $$ComponentProps = {
     open?: boolean;
@@ -42,5 +43,6 @@ type $$ComponentProps = {
     onconfirm: any;
     oncancel: any;
     onclose: any;
+    labels?: Record<string, any>;
 } & Record<string, any>;
 //# sourceMappingURL=ConfirmationModal.svelte.d.ts.map

package/dist/recipes/modals/ConfirmationModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;AAuKA;WAvJ4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;cAAY,GAAG,EAAE;WAAS,GAAG;iBAAe,GAAG;eAAa,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;cAAY,MAAM;cAAY,OAAO;eAAa,OAAO;aAAW,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;qCAuJnS;wBAvJ7C;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;AA8KA;WA1J4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;cAAY,GAAG,EAAE;WAAS,GAAG;iBAAe,GAAG;eAAa,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;cAAY,MAAM;cAAY,OAAO;eAAa,OAAO;aAAW,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;qCA0JjU;wBA1J7C;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}