@getmicdrop/svelte-components 5.18.0 → 5.19.0

package/dist/recipes/inputs/PasswordInput.svelte

@@ -1,121 +1,130 @@
-<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';
+
+  const defaultLabels = {
+    passwordStrength: 'Password strength:',
+  };
+
+  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;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  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,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // 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}">
+        {labels.passwordStrength} {strengthText}
+      </p>
+    </PasswordStrengthIndicator>
+  {/if}
+</div>

package/dist/recipes/inputs/PasswordInput.svelte.d.ts

@@ -1,4 +1,4 @@
-interface Props {
+declare const PasswordInput: import("svelte").Component<{
     /** Password value */
     value?: string;
     /** Label text */
@@ -20,7 +20,7 @@ interface Props {
     /** Show password strength indicator */
     showStrength?: boolean;
     /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     /** Minimum password length */
     minlength?: number | null;
     /** Maximum password length */
@@ -34,8 +34,11 @@ interface Props {
     oninput?: (value: string) => void;
     onblur?: () => void;
     onfocus?: () => void;
-}
-declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
+    /** Override user-visible strings */
+    labels?: Partial<{
+        passwordStrength: string;
+    }>;
+}, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;
 //# sourceMappingURL=PasswordInput.svelte.d.ts.map

package/dist/recipes/inputs/PasswordInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAsBE,UAAU,KAAK;IACb,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiDH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PasswordInput.svelte.ts"],"names":[],"mappings":"AAoHA,QAAA,MAAM,aAAa;IArFf,qBAAqB;YACb,MAAM;IACd,iBAAiB;YACT,MAAM;IACd,uBAAuB;kBACT,MAAM;IACpB,2BAA2B;WACpB,MAAM;IACb,yBAAyB;SACpB,MAAM;IACX,oCAAoC;eACzB,OAAO;IAClB,oCAAoC;eACzB,OAAO;IAClB,+BAA+B;YACvB,MAAM;IACd,kCAAkC;WAC3B,MAAM;IACb,uCAAuC;mBACxB,OAAO;IACtB,mBAAmB;WACZ,IAAI,GAAG,IAAI,GAAG,IAAI;IACzB,8BAA8B;gBAClB,MAAM,GAAG,IAAI;IACzB,8BAA8B;gBAClB,MAAM,GAAG,IAAI;IACzB,6BAA6B;mBACd,MAAM;IACrB,iDAAiD;yBAC5B,OAAO;IAC5B,2CAA2C;YACnC,MAAM;cAEJ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACxB,MAAM,IAAI;cACT,MAAM,IAAI;IACpB,oCAAoC;aAC3B,OAAO;;MAAsB;eAgDiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -1,131 +1,142 @@
-<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}
+<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";
+
+    const defaultLabels = {
+      tooWeak: 'Too weak',
+      weak: 'Weak',
+      good: 'Good',
+      strong: 'Strong',
+    };
+
+    interface Props {
+      password?: string;
+      strengthText?: string;
+      score?: number;
+      textColor?: string;
+      children?: Snippet;
+      labels?: Partial<typeof defaultLabels>;
+    }
+
+    let {
+      password = "",
+      strengthText = $bindable(""),
+      score = $bindable(-1),
+      textColor = $bindable(""),
+      children,
+      labels: userLabels = {},
+    }: Props = $props();
+
+    let labels = $derived({ ...defaultLabels, ...userLabels });
+
+    let debouncedPassword = $state("");
+    // Use a plain variable for timer to avoid reactive dependency
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    let customOptions = $derived([
+        {
+            id: 0,
+            value: labels.tooWeak,
+            minDiversity: 0,
+            minLength: 0,
+        },
+        {
+            id: 1,
+            value: labels.weak,
+            minDiversity: 1,
+            minLength: 6,
+        },
+        {
+            id: 2,
+            value: labels.good,
+            minDiversity: 2,
+            minLength: 8,
+        },
+        {
+            id: 3,
+            value: labels.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 ? labels.tooWeak :
+        computedScore === 1 ? labels.weak :
+        computedScore === 2 ? labels.good :
+        computedScore === 3 ? labels.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

@@ -1,12 +1,17 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const PasswordStrengthIndicator: import("svelte").Component<{
     password?: string;
     strengthText?: string;
     score?: number;
     textColor?: string;
     children?: Snippet;
-}
-declare const PasswordStrengthIndicator: import("svelte").Component<Props, {}, "textColor" | "strengthText" | "score">;
+    labels?: Partial<{
+        tooWeak: string;
+        weak: string;
+        good: string;
+        strong: string;
+    }>;
+}, {}, "textColor" | "strengthText" | "score">;
 type PasswordStrengthIndicator = ReturnType<typeof PasswordStrengthIndicator>;
 export default PasswordStrengthIndicator;
 //# sourceMappingURL=PasswordStrengthIndicator.svelte.d.ts.map

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;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"}
+{"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;AAkJtC,QAAA,MAAM,yBAAyB;eA7Hd,MAAM;mBACF,MAAM;YACb,MAAM;gBACF,MAAM;eACP,OAAO;aACT,OAAO;;;;;MAAsB;8CAwH2B,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}