@getmicdrop/svelte-components 5.5.4 → 5.6.0

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { passwordStrength } from "check-password-strength";
+
+    interface Props {
+      password?: string;
+      children?: Snippet;
+    }
+
+    let {
+      password = "",
+      children,
+    }: Props = $props();
+
+    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;
+
+    // No debouncing - directly use password for testing
+    let strength = $derived(password
+        ? passwordStrength(password, customOptions as any)
+        : null);
+
+    // Compute score based on password length and strength
+    let score = $derived(password.length > 12 ? 3 : (strength?.id ?? -1));
+
+    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-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 password.length > 0}
+    <div 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/TestWrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    password?: string;
+    children?: Snippet;
+}
+declare const TestWrapper: import("svelte").Component<Props, {}, "">;
+type TestWrapper = ReturnType<typeof TestWrapper>;
+export default TestWrapper;
+//# sourceMappingURL=TestWrapper.svelte.d.ts.map

package/dist/recipes/inputs/PasswordStrengthIndicator/TestWrapper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/TestWrapper.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIlC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqEL,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}