@getmicdrop/svelte-components 5.9.6 → 5.10.1

package/dist/recipes/inputs/PasswordInput.svelte

@@ -1,121 +1,121 @@
-<script lang="ts">
-  /**
-   * PasswordInput - Password field with show/hide toggle and strength indicator
-   *
-   * Combines Input (password type) with PasswordStrengthIndicator for
-   * a complete password entry experience.
-   *
-   * @example
-   * <PasswordInput
-   *   label="New Password"
-   *   bind:value={password}
-   *   showStrength
-   *   error={$errors.password}
-   *   required
-   * />
-   */
-  import Input from '../../primitives/Input/Input.svelte';
-  import PasswordStrengthIndicator from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
-
-  interface Props {
-    /** Password value */
-    value?: string;
-    /** Label text */
-    label?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Input name attribute */
-    name?: string;
-    /** Input id attribute */
-    id?: string;
-    /** Whether the field is required */
-    required?: boolean;
-    /** Whether the field is disabled */
-    disabled?: boolean;
-    /** Error message to display */
-    error?: string;
-    /** Hint text shown below input */
-    hint?: string;
-    /** Show password strength indicator */
-    showStrength?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Minimum password length */
-    minlength?: number | null;
-    /** Maximum password length */
-    maxlength?: number | null;
-    /** Autocomplete attribute */
-    autocomplete?: string;
-    /** Whether to show the password toggle button */
-    showPasswordToggle?: boolean;
-    /** Additional class for the wrapper div */
-    class?: string;
-    // Optional callbacks (matching Input component signatures)
-    oninput?: (value: string) => void;
-    onblur?: () => void;
-    onfocus?: () => void;
-  }
-
-  let {
-    value = $bindable(''),
-    label = '',
-    placeholder = '',
-    name = '',
-    id = '',
-    required = false,
-    disabled = false,
-    error = '',
-    hint = '',
-    showStrength = false,
-    size = 'md',
-    minlength = null,
-    maxlength = null,
-    autocomplete = 'new-password',
-    showPasswordToggle = true,
-    class: className = '',
-    oninput,
-    onblur,
-    onfocus,
-  }: Props = $props();
-
-  // Password strength tracking
-  let strengthScore = $state(-1);
-  let strengthText = $state('');
-  let strengthColor = $state('');
-</script>
-
-<div class={className}>
-  <Input
-    type="password"
-    {id}
-    {name}
-    {placeholder}
-    {label}
-    {required}
-    {disabled}
-    {size}
-    {minlength}
-    {maxlength}
-    {autocomplete}
-    {showPasswordToggle}
-    errorText={error}
-    hintText={hint}
-    bind:value
-    oninputchange={oninput}
-    {onblur}
-    {onfocus}
-  />
-
-  {#if showStrength && value}
-    <PasswordStrengthIndicator
-      password={value}
-      bind:score={strengthScore}
-      bind:strengthText
-      bind:textColor={strengthColor}
-    >
-      <p class="text-xs {strengthColor}">
-        Password strength: {strengthText}
-      </p>
-    </PasswordStrengthIndicator>
-  {/if}
-</div>
+<script lang="ts">
+  /**
+   * PasswordInput - Password field with show/hide toggle and strength indicator
+   *
+   * Combines Input (password type) with PasswordStrengthIndicator for
+   * a complete password entry experience.
+   *
+   * @example
+   * <PasswordInput
+   *   label="New Password"
+   *   bind:value={password}
+   *   showStrength
+   *   error={$errors.password}
+   *   required
+   * />
+   */
+  import Input from '../../primitives/Input/Input.svelte';
+  import PasswordStrengthIndicator from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
+
+  interface Props {
+    /** Password value */
+    value?: string;
+    /** Label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Hint text shown below input */
+    hint?: string;
+    /** Show password strength indicator */
+    showStrength?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Minimum password length */
+    minlength?: number | null;
+    /** Maximum password length */
+    maxlength?: number | null;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Whether to show the password toggle button */
+    showPasswordToggle?: boolean;
+    /** Additional class for the wrapper div */
+    class?: string;
+    // Optional callbacks (matching Input component signatures)
+    oninput?: (value: string) => void;
+    onblur?: () => void;
+    onfocus?: () => void;
+  }
+
+  let {
+    value = $bindable(''),
+    label = '',
+    placeholder = '',
+    name = '',
+    id = '',
+    required = false,
+    disabled = false,
+    error = '',
+    hint = '',
+    showStrength = false,
+    size = 'md',
+    minlength = null,
+    maxlength = null,
+    autocomplete = 'new-password',
+    showPasswordToggle = true,
+    class: className = '',
+    oninput,
+    onblur,
+    onfocus,
+  }: Props = $props();
+
+  // Password strength tracking
+  let strengthScore = $state(-1);
+  let strengthText = $state('');
+  let strengthColor = $state('');
+</script>
+
+<div class={className}>
+  <Input
+    type="password"
+    {id}
+    {name}
+    {placeholder}
+    {label}
+    {required}
+    {disabled}
+    {size}
+    {minlength}
+    {maxlength}
+    {autocomplete}
+    {showPasswordToggle}
+    errorText={error}
+    hintText={hint}
+    bind:value
+    oninputchange={oninput}
+    {onblur}
+    {onfocus}
+  />
+
+  {#if showStrength && value}
+    <PasswordStrengthIndicator
+      password={value}
+      bind:score={strengthScore}
+      bind:strengthText
+      bind:textColor={strengthColor}
+    >
+      <p class="text-xs {strengthColor}">
+        Password strength: {strengthText}
+      </p>
+    </PasswordStrengthIndicator>
+  {/if}
+</div>

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}