@getmicdrop/svelte-components 5.10.1 → 5.10.3

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

@@ -1,117 +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";
-
-    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";
+    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/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMlC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6GL,QAAA,MAAM,yBAAyB,+EAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOlC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2HL,QAAA,MAAM,yBAAyB,+EAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

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>