@getmicdrop/svelte-components 5.5.5 → 5.6.1

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

@@ -1,117 +1,117 @@
-<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";
-
-    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("");
-    let timer = $state<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
-    $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);
-
-    // Compute score based on password length and strength
-    $effect(() => {
-        score = debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1);
-    });
-
-    // Map score to display text and color
-    $effect(() => {
-        strengthText =
-            score === 0
-                ? "Too weak"
-                : score === 1
-                  ? "Weak"
-                  : score === 2
-                    ? "Good"
-                    : score === 3
-                      ? "Strong"
-                      : "";
-    });
-
-    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-green-600");
-
-    $effect(() => {
-        textColor = score <= 1 ? "text-red-600" : "text-green-600";
-    });
-
-    // Calculate how many bars to fill (1-3)
-    let filledBars = $derived(score === 0 ? 1 : score === 1 ? 2 : score >= 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";
+
+    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("");
+    let timer = $state<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
+    $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);
+
+    // Compute score based on password length and strength
+    $effect(() => {
+        score = debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1);
+    });
+
+    // Map score to display text and color
+    $effect(() => {
+        strengthText =
+            score === 0
+                ? "Too weak"
+                : score === 1
+                  ? "Weak"
+                  : score === 2
+                    ? "Good"
+                    : score === 3
+                      ? "Strong"
+                      : "";
+    });
+
+    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-green-600");
+
+    $effect(() => {
+        textColor = score <= 1 ? "text-red-600" : "text-green-600";
+    });
+
+    // Calculate how many bars to fill (1-3)
+    let filledBars = $derived(score === 0 ? 1 : score === 1 ? 2 : score >= 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/PlaceAutocomplete/PlaceAutocomplete.spec.js

@@ -8,18 +8,23 @@ const mockAutocompleteSuggestion = {
   fetchAutocompleteSuggestions: vi.fn(),
 };
 
-const mockAutocompleteSessionToken = vi.fn();
+// Vitest 4.x requires class syntax for constructor mocks
+class MockAutocompleteSessionToken {}
 
 const mockLoader = {
   importLibrary: vi.fn().mockResolvedValue({
-    AutocompleteSessionToken: mockAutocompleteSessionToken,
+    AutocompleteSessionToken: MockAutocompleteSessionToken,
     AutocompleteSuggestion: mockAutocompleteSuggestion,
   }),
 };
 
-// Mock the Google Maps Loader
+// Mock the Google Maps Loader - Vitest 4.x requires class syntax
 vi.mock('@googlemaps/js-api-loader', () => ({
-  Loader: vi.fn().mockImplementation(() => mockLoader),
+  Loader: class MockLoader {
+    constructor() {
+      this.importLibrary = mockLoader.importLibrary;
+    }
+  },
 }));
 
 // Mock config

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

@@ -1,82 +1,82 @@
-<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>
+<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">
@@ -95,19 +95,19 @@
           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>
-
+          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 -->
@@ -118,17 +118,17 @@
       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>
+      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 -->
@@ -148,23 +148,23 @@
           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>
+          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>

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

@@ -4,6 +4,7 @@
   import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
   import { typography } from '../../../tokens/typography';
   const { Loader } = GMaps;
+/** 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 {
     fetchFields?: string[];
@@ -12,7 +13,7 @@
     region?: string;
     autocomplete?: string;
     initialValue?: string;
-    onResponse?: (data: any) => void;
+    onResponse?: (data: PlaceData) => void;
     onError?: (error: string) => void;
     mode?: 'full' | 'cityState';
     animateFocus?: boolean;
@@ -39,16 +40,16 @@
   let containerRef: HTMLDivElement;
   let currentSuggestion = $state(-1);
   let title = $state('');
-  let results = $state<any[]>([]);
-  let token: any;
+  let results = $state<SearchResult[]>([]);
+  let token: AutocompleteSessionToken | undefined;
   let loader: GMaps.Loader;
-  let placesApi: { [key: string]: any } = {};
+  let placesApi: Partial<PlacesApiInterface> = {};
 
   let request = $state<{
     input: string;
     language: string;
     region: string;
-    sessionToken: any;
+    sessionToken: AutocompleteSessionToken | string;
   }>({
     input: (() => initialValue)(),
     language: (() => language)(),
@@ -94,13 +95,13 @@
 
     try {
       const { suggestions } =
-        await placesApi.AutocompleteSuggestion.fetchAutocompleteSuggestions(
+        await placesApi.AutocompleteSuggestion!.fetchAutocompleteSuggestions(
           request
         );
 
       if (mode === 'cityState') {
         results = suggestions
-          .filter((s: any) => {
+          .filter((s: AutocompleteSuggestion) => {
             const types = s.placePrediction.types || [];
 
             // Accept cities (locality) and city-level neighborhoods (sublocality)
@@ -112,7 +113,7 @@
                 type === 'sublocality_level_1'
             );
           })
-          .map((s: any) => {
+          .map((s: AutocompleteSuggestion) => {
             let displayText = s.placePrediction.text.toString();
 
             // Format as "City, State" (first two parts)
@@ -128,22 +129,23 @@
             };
           });
       } else {
-        results = suggestions.map((s: any) => ({
+        results = suggestions.map((s: AutocompleteSuggestion) => ({
           to_place: s.placePrediction.toPlace(),
           text: s.placePrediction.text.toString(),
         }));
       }
-    } catch (e: any) {
+    } catch (e: unknown) {
+      const error = e as { name?: string; message?: string };
       onError(
-        (e.name || 'An error occurred') +
+        (error.name || 'An error occurred') +
           ' - ' +
-          (e.message || 'see console for details.')
+          (error.message || 'see console for details.')
       );
     }
   };
 
   const onPlaceSelected = async (
-    place: any,
+    place: PlaceObject,
     originalText?: string
   ): Promise<void> => {
     results = [];
@@ -157,11 +159,12 @@
       request.input = originalText || placeData.text || '';
       title = originalText || placeData.text || '';
       onResponse(placeData);
-    } catch (e: any) {
+    } catch (e: unknown) {
+      const error = e as { name?: string; message?: string };
       onError(
-        (e.name || 'An error occurred') +
+        (error.name || 'An error occurred') +
           ' - ' +
-          (e.message || 'error fetching place details')
+          (error.message || 'error fetching place details')
       );
     }
 
@@ -170,16 +173,17 @@
     }, 100);
   };
 
-  const refreshToken = async (req: any) => {
+  const refreshToken = async (req: AutocompleteRequest) => {
     try {
-      token = new placesApi.AutocompleteSessionToken();
+      token = new placesApi.AutocompleteSessionToken!();
       req.sessionToken = token;
       return req;
-    } catch (e: any) {
+    } catch (e: unknown) {
+      const error = e as { name?: string; message?: string };
       onError(
-        (e.name || 'An error occurred') +
+        (error.name || 'An error occurred') +
           ' - ' +
-          (e.message || 'error fetch token')
+          (error.message || 'error fetch token')
       );
       return req;
     }
@@ -253,13 +257,14 @@
           await loader.importLibrary('places');
         placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
         placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
-        token = new placesApi.AutocompleteSessionToken();
+        token = new placesApi.AutocompleteSessionToken!();
         request.sessionToken = token;
-      } catch (e: any) {
+      } catch (e: unknown) {
+      const error = e as { name?: string; message?: string };
         onError(
-          (e.name || 'An error occurred') +
+          (error.name || 'An error occurred') +
             ' - ' +
-            (e.message || 'Error loading Google Maps API')
+            (error.message || 'Error loading Google Maps API')
         );
       }
     };