@getmicdrop/svelte-components 5.5.1 → 5.5.4

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.js

@@ -1,173 +1,173 @@
-import { render, screen, waitFor } from "@testing-library/svelte";
-import { expect, describe, test, vi } from "vitest";
-import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
-
-// Debounce delay + buffer
-const DEBOUNCE_WAIT = 500;
-
-function setupTest(args = {}) {
-  const { component, container } = render(PasswordStrengthIndicator, {
-    props: {
-      password: "",
-      ...args,
-    },
-  });
-  return { component, container };
-}
-
-describe("PasswordStrengthIndicator Component Tests", () => {
-  test("Does not render when password is empty", () => {
-    const { container } = setupTest({ password: "" });
-    const indicator = container.querySelector(".pt-2");
-    expect(indicator).not.toBeInTheDocument();
-  });
-
-  test("Renders after debounce when password has value", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const indicator = container.querySelector(".pt-2");
-        expect(indicator).toBeInTheDocument();
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has three strength bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for weak password", async () => {
-    const { container } = setupTest({ password: "ab" });
-    await waitFor(
-      () => {
-        // At least one bar should be filled with a color
-        const coloredBars = container.querySelectorAll(
-          ".bg-red-600, .bg-green-600"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for good password", async () => {
-    const { container } = setupTest({ password: "Abc12345" });
-    await waitFor(
-      () => {
-        // All 3 bars should be filled for a good password
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Exports score prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    // Score should be accessible
-    expect(component).toBeDefined();
-  });
-
-  test("Exports strengthText prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Exports textColor prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Uses danger color for weak passwords", async () => {
-    const { container } = setupTest({ password: "weak" });
-    await waitFor(
-      () => {
-        const dangerBars = container.querySelectorAll(".bg-red-600");
-        expect(dangerBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Uses success color for good/strong passwords", async () => {
-    const { container } = setupTest({ password: "StrongP@ss123" });
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has transition animation classes on bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-        bars.forEach((bar) => {
-          expect(bar).toHaveClass("transition-colors");
-          expect(bar).toHaveClass("duration-300");
-        });
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Very long password shows strong indicator", async () => {
-    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
-
-describe("Password Strength Scoring", () => {
-  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Weak password shows danger color bars", async () => {
-    const { container } = setupTest({ password: "abcdef" });
-    await waitFor(
-      () => {
-        const coloredBars = container.querySelectorAll(
-          ".bg-red-600, .bg-green-600"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
+import { render, screen, waitFor } from "@testing-library/svelte";
+import { expect, describe, test, vi } from "vitest";
+import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
+
+// Debounce delay + buffer
+const DEBOUNCE_WAIT = 500;
+
+function setupTest(args = {}) {
+  const { component, container } = render(PasswordStrengthIndicator, {
+    props: {
+      password: "",
+      ...args,
+    },
+  });
+  return { component, container };
+}
+
+describe("PasswordStrengthIndicator Component Tests", () => {
+  test("Does not render when password is empty", () => {
+    const { container } = setupTest({ password: "" });
+    const indicator = container.querySelector(".pt-2");
+    expect(indicator).not.toBeInTheDocument();
+  });
+
+  test("Renders after debounce when password has value", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const indicator = container.querySelector(".pt-2");
+        expect(indicator).toBeInTheDocument();
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has three strength bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for weak password", async () => {
+    const { container } = setupTest({ password: "ab" });
+    await waitFor(
+      () => {
+        // At least one bar should be filled with a color
+        const coloredBars = container.querySelectorAll(
+          ".bg-red-600, .bg-green-600"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for good password", async () => {
+    const { container } = setupTest({ password: "Abc12345" });
+    await waitFor(
+      () => {
+        // All 3 bars should be filled for a good password
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Exports score prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    // Score should be accessible
+    expect(component).toBeDefined();
+  });
+
+  test("Exports strengthText prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Exports textColor prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Uses danger color for weak passwords", async () => {
+    const { container } = setupTest({ password: "weak" });
+    await waitFor(
+      () => {
+        const dangerBars = container.querySelectorAll(".bg-red-600");
+        expect(dangerBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Uses success color for good/strong passwords", async () => {
+    const { container } = setupTest({ password: "StrongP@ss123" });
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has transition animation classes on bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+        bars.forEach((bar) => {
+          expect(bar).toHaveClass("transition-colors");
+          expect(bar).toHaveClass("duration-300");
+        });
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Very long password shows strong indicator", async () => {
+    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});
+
+describe("Password Strength Scoring", () => {
+  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-green-600");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Weak password shows danger color bars", async () => {
+    const { container } = setupTest({ password: "abcdef" });
+    await waitFor(
+      () => {
+        const coloredBars = container.querySelectorAll(
+          ".bg-red-600, .bg-green-600"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import { passwordStrength } from "check-password-strength";
-    import { slide } from "svelte/transition";
+    import { safeSlide } from "../../../utils/transitions.js";
     import { cubicOut } from "svelte/easing";
 
     interface Props {
@@ -19,7 +19,7 @@
       textColor = $bindable(""),
       children,
     }: Props = $props();
-
+
     let debouncedPassword = $state("");
     let timer = $state<ReturnType<typeof setTimeout> | undefined>();
 
@@ -66,43 +66,43 @@
     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:slide={{ duration: 600, easing: cubicOut }}
-        class="pt-2 space-y-2"
-    >
-        <!-- 3 segment bars -->
-        <div class="flex gap-1.5">
+
+    // 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 <
@@ -111,7 +111,7 @@
                         : 'bg-gray-200 dark:bg-gray-700'}"
                 ></div>
             {/each}
-        </div>
-        {@render children?.()}
-    </div>
-{/if}
+        </div>
+        {@render children?.()}
+    </div>
+{/if}