@virastack/password 1.0.2 → 1.1.0

package/dist/index.d.cts

@@ -0,0 +1,201 @@
+import React, { ReactNode } from 'react';
+
+/**
+ * Generates the input type based on visibility.
+ */
+declare const getInputType: (isVisible: boolean) => "text" | "password";
+/**
+ * Generates ARIA attributes for the toggle button.
+ */
+declare const getButtonAriaAttributes: (isVisible: boolean, inputId: string, label?: string) => {
+    'aria-label': string;
+    'aria-pressed': boolean;
+    'aria-controls': string;
+    type: "button";
+};
+/**
+ * Generates ARIA attributes for the input field.
+ */
+interface InputAriaAttributes {
+    'aria-invalid'?: boolean;
+    'aria-describedby'?: string;
+}
+declare const getInputAriaAttributes: (isInvalid?: boolean, describedBy?: string) => InputAriaAttributes;
+
+/** Error keys. Map them to messages in your own i18n. */
+type PasswordIssue = "password.tooShort" | "password.tooLong" | "password.noLowercase" | "password.noUppercase" | "password.noDigit" | "password.noSymbol" | "password.common" | "password.blocked" | "password.repetitive" | "password.containsPersonalInfo" | "password.mismatch";
+type StrengthScore = 0 | 1 | 2 | 3 | 4;
+type StrengthLevel = "weak" | "fair" | "good" | "strong";
+interface PasswordChecks {
+    minLength: boolean;
+    maxLength: boolean;
+    notCommon: boolean;
+    notBlocked: boolean;
+    notRepetitive: boolean;
+    notPersonal: boolean;
+    /** Only present when the policy requires the character class. */
+    lowercase?: boolean;
+    uppercase?: boolean;
+    digit?: boolean;
+    symbol?: boolean;
+}
+interface StrengthResult {
+    /** 0–1 fail the policy, 2–4 pass it. */
+    score: StrengthScore;
+    level: StrengthLevel;
+    /** Characters (Unicode code points) after NFKC normalization, without zero-width characters. */
+    length: number;
+    /** No issues. */
+    valid: boolean;
+    checks: PasswordChecks;
+    issues: PasswordIssue[];
+}
+interface EvaluateOptions {
+    /** Values the password must not contain, e.g. the user's email and name. Non-strings are ignored. */
+    forbidden?: readonly unknown[];
+}
+interface CharacterRequirements {
+    lowercase?: boolean;
+    uppercase?: boolean;
+    digit?: boolean;
+    symbol?: boolean;
+}
+type PolicyPreset = "nist" | "legacy";
+interface Policy {
+    readonly preset: PolicyPreset;
+    readonly minLength: number;
+    readonly maxLength: number;
+    readonly require: Readonly<Required<CharacterRequirements>>;
+    readonly blockCommon: boolean;
+    readonly blockRepetitive: boolean;
+    readonly blocklist: readonly string[];
+    readonly minTokenLength: number;
+    /** The engine travels with the policy, so the hook does not import it. */
+    readonly evaluate: (password: string, options?: EvaluateOptions) => StrengthResult;
+}
+
+type ViraPasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    ref?: React.Ref<HTMLInputElement>;
+};
+interface UseViraPasswordOptions {
+    /**
+     * Initial visibility state of the password.
+     * @default false
+     */
+    defaultVisible?: boolean;
+    /**
+     * Controlled visibility. Pair it with `onVisibleChange`.
+     */
+    visible?: boolean;
+    /**
+     * Called with the next visibility whenever it changes, including automatic hiding.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Hide the password when its form is submitted or reset, so password managers see a password field.
+     * @default true
+     */
+    hideOnSubmit?: boolean;
+    /**
+     * Hide the password when focus leaves the input and the toggle, or the browser tab is hidden.
+     * @default false
+     */
+    hideOnBlur?: boolean;
+    /**
+     * `autoComplete` for the input. `false` leaves the attribute out.
+     * @default "new-password" with `policy` or `matchWith`, otherwise "current-password"
+     */
+    autoComplete?: string | false;
+    /**
+     * A policy from `definePolicy()` in `@virastack/password/strength`. Enables `strength` and `issues`.
+     */
+    policy?: Policy;
+    /**
+     * Values the password must not contain, e.g. the user's email and name.
+     */
+    forbidden?: readonly unknown[];
+    /**
+     * The password this field must repeat, e.g. `watch("password")` on a confirm field.
+     * Enables `matches` and the `password.mismatch` key.
+     */
+    matchWith?: string;
+    /**
+     * The current value, e.g. `watch("password")`. Without it the hook follows typing in the input,
+     * which misses `reset(values)` and `setValue()` from a form library.
+     */
+    value?: string;
+    /**
+     * Custom icons for show/hide states.
+     */
+    icons?: {
+        show: ReactNode;
+        hide: ReactNode;
+    };
+    /**
+     * Whether the input is disabled.
+     * If true, the toggle button will also be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only.
+     * If true, the toggle button will be disabled.
+     */
+    readOnly?: boolean;
+    /**
+     * ID for the input element. If not provided, a random ID will be generated.
+     */
+    id?: string;
+    /**
+     * Props to be merged with the generated input props, e.g. `register("password")`.
+     */
+    inputProps?: ViraPasswordInputProps;
+    /**
+     * Props to be merged with the generated button props.
+     */
+    btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+interface UseViraPasswordResult {
+    inputProps: ViraPasswordInputProps;
+    btnProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    isVisible: boolean;
+    /** Caps Lock is on while the input has focus. */
+    capsLock: boolean;
+    toggle: () => void;
+    setVisible: (visible: boolean) => void;
+    /** Result of the policy for the current value; `null` without a policy. */
+    strength: StrengthResult | null;
+    /** Spread on the element that shows the strength, so screen readers announce it. */
+    strengthProps: ViraPasswordStrengthProps;
+    /** With `matchWith`: whether the value repeats it; `null` while the field is empty or without `matchWith`. */
+    matches: boolean | null;
+    /** Error keys for the current value. */
+    issues: PasswordIssue[];
+    /** A validation rule for React Hook Form: `register("password", pw.rule)`. Returns the first error key. */
+    rule: ViraPasswordRule;
+}
+interface ViraPasswordStrengthProps {
+    id: string;
+    role: 'status';
+    'aria-live': 'polite';
+    'aria-atomic': true;
+}
+interface ViraPasswordRule {
+    validate: (value: unknown) => true | PasswordIssue;
+}
+/**
+ * Combines refs into one callback ref. Supports React 19 ref cleanup functions.
+ */
+declare const composeRefs: <T>(...refs: (React.Ref<T> | undefined)[]) => React.RefCallback<T>;
+/**
+ * A utility to merge event handlers, class names, `aria-describedby` and refs.
+ * Later props win; handlers run in order.
+ */
+declare function mergeProps<T extends object>(...args: (T | undefined)[]): T;
+declare function mergeProps<A extends object, B extends object>(a: A | undefined, b: B | undefined): Omit<A, keyof B> & B;
+declare const useViraPassword: (options?: UseViraPasswordOptions) => UseViraPasswordResult;
+
+declare const EyeIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
+declare const EyeOffIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
+
+export { EyeIcon, EyeOffIcon, composeRefs, getButtonAriaAttributes, getInputAriaAttributes, getInputType, mergeProps, useViraPassword };
+export type { InputAriaAttributes, UseViraPasswordOptions, UseViraPasswordResult, ViraPasswordInputProps, ViraPasswordRule, ViraPasswordStrengthProps };

package/dist/index.d.mts

@@ -16,14 +16,114 @@ declare const getButtonAriaAttributes: (isVisible: boolean, inputId: string, lab
 /**
  * Generates ARIA attributes for the input field.
  */
-declare const getInputAriaAttributes: (isInvalid?: boolean, describedBy?: string) => Record<string, any>;
+interface InputAriaAttributes {
+    'aria-invalid'?: boolean;
+    'aria-describedby'?: string;
+}
+declare const getInputAriaAttributes: (isInvalid?: boolean, describedBy?: string) => InputAriaAttributes;
+
+/** Error keys. Map them to messages in your own i18n. */
+type PasswordIssue = "password.tooShort" | "password.tooLong" | "password.noLowercase" | "password.noUppercase" | "password.noDigit" | "password.noSymbol" | "password.common" | "password.blocked" | "password.repetitive" | "password.containsPersonalInfo" | "password.mismatch";
+type StrengthScore = 0 | 1 | 2 | 3 | 4;
+type StrengthLevel = "weak" | "fair" | "good" | "strong";
+interface PasswordChecks {
+    minLength: boolean;
+    maxLength: boolean;
+    notCommon: boolean;
+    notBlocked: boolean;
+    notRepetitive: boolean;
+    notPersonal: boolean;
+    /** Only present when the policy requires the character class. */
+    lowercase?: boolean;
+    uppercase?: boolean;
+    digit?: boolean;
+    symbol?: boolean;
+}
+interface StrengthResult {
+    /** 0–1 fail the policy, 2–4 pass it. */
+    score: StrengthScore;
+    level: StrengthLevel;
+    /** Characters (Unicode code points) after NFKC normalization, without zero-width characters. */
+    length: number;
+    /** No issues. */
+    valid: boolean;
+    checks: PasswordChecks;
+    issues: PasswordIssue[];
+}
+interface EvaluateOptions {
+    /** Values the password must not contain, e.g. the user's email and name. Non-strings are ignored. */
+    forbidden?: readonly unknown[];
+}
+interface CharacterRequirements {
+    lowercase?: boolean;
+    uppercase?: boolean;
+    digit?: boolean;
+    symbol?: boolean;
+}
+type PolicyPreset = "nist" | "legacy";
+interface Policy {
+    readonly preset: PolicyPreset;
+    readonly minLength: number;
+    readonly maxLength: number;
+    readonly require: Readonly<Required<CharacterRequirements>>;
+    readonly blockCommon: boolean;
+    readonly blockRepetitive: boolean;
+    readonly blocklist: readonly string[];
+    readonly minTokenLength: number;
+    /** The engine travels with the policy, so the hook does not import it. */
+    readonly evaluate: (password: string, options?: EvaluateOptions) => StrengthResult;
+}
 
+type ViraPasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    ref?: React.Ref<HTMLInputElement>;
+};
 interface UseViraPasswordOptions {
     /**
      * Initial visibility state of the password.
      * @default false
      */
     defaultVisible?: boolean;
+    /**
+     * Controlled visibility. Pair it with `onVisibleChange`.
+     */
+    visible?: boolean;
+    /**
+     * Called with the next visibility whenever it changes, including automatic hiding.
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * Hide the password when its form is submitted or reset, so password managers see a password field.
+     * @default true
+     */
+    hideOnSubmit?: boolean;
+    /**
+     * Hide the password when focus leaves the input and the toggle, or the browser tab is hidden.
+     * @default false
+     */
+    hideOnBlur?: boolean;
+    /**
+     * `autoComplete` for the input. `false` leaves the attribute out.
+     * @default "new-password" with `policy` or `matchWith`, otherwise "current-password"
+     */
+    autoComplete?: string | false;
+    /**
+     * A policy from `definePolicy()` in `@virastack/password/strength`. Enables `strength` and `issues`.
+     */
+    policy?: Policy;
+    /**
+     * Values the password must not contain, e.g. the user's email and name.
+     */
+    forbidden?: readonly unknown[];
+    /**
+     * The password this field must repeat, e.g. `watch("password")` on a confirm field.
+     * Enables `matches` and the `password.mismatch` key.
+     */
+    matchWith?: string;
+    /**
+     * The current value, e.g. `watch("password")`. Without it the hook follows typing in the input,
+     * which misses `reset(values)` and `setValue()` from a form library.
+     */
+    value?: string;
     /**
      * Custom icons for show/hide states.
      */
@@ -46,28 +146,56 @@ interface UseViraPasswordOptions {
      */
     id?: string;
     /**
-     * Props to be merged with the generated input props.
+     * Props to be merged with the generated input props, e.g. `register("password")`.
      */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputProps?: ViraPasswordInputProps;
     /**
      * Props to be merged with the generated button props.
      */
     btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
 interface UseViraPasswordResult {
-    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    inputProps: ViraPasswordInputProps;
     btnProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
     isVisible: boolean;
+    /** Caps Lock is on while the input has focus. */
+    capsLock: boolean;
     toggle: () => void;
     setVisible: (visible: boolean) => void;
+    /** Result of the policy for the current value; `null` without a policy. */
+    strength: StrengthResult | null;
+    /** Spread on the element that shows the strength, so screen readers announce it. */
+    strengthProps: ViraPasswordStrengthProps;
+    /** With `matchWith`: whether the value repeats it; `null` while the field is empty or without `matchWith`. */
+    matches: boolean | null;
+    /** Error keys for the current value. */
+    issues: PasswordIssue[];
+    /** A validation rule for React Hook Form: `register("password", pw.rule)`. Returns the first error key. */
+    rule: ViraPasswordRule;
+}
+interface ViraPasswordStrengthProps {
+    id: string;
+    role: 'status';
+    'aria-live': 'polite';
+    'aria-atomic': true;
 }
+interface ViraPasswordRule {
+    validate: (value: unknown) => true | PasswordIssue;
+}
+/**
+ * Combines refs into one callback ref. Supports React 19 ref cleanup functions.
+ */
+declare const composeRefs: <T>(...refs: (React.Ref<T> | undefined)[]) => React.RefCallback<T>;
 /**
- * A utility to merge event handlers and other props.
+ * A utility to merge event handlers, class names, `aria-describedby` and refs.
+ * Later props win; handlers run in order.
  */
-declare const mergeProps: <T extends Record<string, any>>(...args: (T | undefined)[]) => T;
+declare function mergeProps<T extends object>(...args: (T | undefined)[]): T;
+declare function mergeProps<A extends object, B extends object>(a: A | undefined, b: B | undefined): Omit<A, keyof B> & B;
 declare const useViraPassword: (options?: UseViraPasswordOptions) => UseViraPasswordResult;
 
 declare const EyeIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
 declare const EyeOffIcon: (props: React.SVGProps<SVGSVGElement>) => React.ReactSVGElement;
 
-export { EyeIcon, EyeOffIcon, type UseViraPasswordOptions, type UseViraPasswordResult, getButtonAriaAttributes, getInputAriaAttributes, getInputType, mergeProps, useViraPassword };
+export { EyeIcon, EyeOffIcon, composeRefs, getButtonAriaAttributes, getInputAriaAttributes, getInputType, mergeProps, useViraPassword };
+export type { InputAriaAttributes, UseViraPasswordOptions, UseViraPasswordResult, ViraPasswordInputProps, ViraPasswordRule, ViraPasswordStrengthProps };

package/dist/index.mjs

@@ -1,5 +1,4 @@
 "use client";
-import React, { useState, useId, useCallback } from 'react';
 
 // src/core/logic.ts
 var getInputType = (isVisible) => {
@@ -23,6 +22,13 @@ var getInputAriaAttributes = (isInvalid, describedBy) => {
   }
   return attrs;
 };
+
+// src/react/useViraPassword.ts
+import React2, { useState, useId, useCallback, useEffect, useRef } from "react";
+import { flushSync } from "react-dom";
+
+// src/icons/index.ts
+import React from "react";
 var EyeIcon = (props) => React.createElement(
   "svg",
   {
@@ -61,30 +67,56 @@ var EyeOffIcon = (props) => React.createElement(
 );
 
 // src/react/useViraPassword.ts
-var mergeProps = (...args) => {
+var setRef = (ref, value) => {
+  if (typeof ref === "function") return ref(value);
+  if (ref) ref.current = value;
+};
+var composeRefs = (...refs) => (node) => {
+  const cleanups = refs.map((ref) => setRef(ref, node));
+  if (!cleanups.some((cleanup) => typeof cleanup === "function")) return;
+  return () => {
+    refs.forEach((ref, i) => {
+      const cleanup = cleanups[i];
+      if (typeof cleanup === "function") cleanup();
+      else setRef(ref, null);
+    });
+  };
+};
+function mergeProps(...args) {
   const result = {};
   for (const props of args) {
     if (!props) continue;
-    for (const key in props) {
-      const val = props[key];
+    for (const [key, val] of Object.entries(props)) {
       const existing = result[key];
       if (key.startsWith("on") && typeof val === "function" && typeof existing === "function") {
         result[key] = (...args2) => {
           existing(...args2);
           val(...args2);
         };
-      } else if (key === "className" && typeof val === "string" && typeof existing === "string") {
+      } else if ((key === "className" || key === "aria-describedby") && typeof val === "string" && typeof existing === "string") {
         result[key] = [existing, val].filter(Boolean).join(" ");
+      } else if (key === "ref" && existing && val) {
+        result[key] = composeRefs(existing, val);
       } else {
         result[key] = val;
       }
     }
   }
   return result;
-};
+}
+var sameText = (a, b) => a.normalize("NFKC") === b.normalize("NFKC");
 var useViraPassword = (options = {}) => {
   const {
     defaultVisible = false,
+    visible: controlledVisible,
+    onVisibleChange,
+    hideOnSubmit = true,
+    hideOnBlur = false,
+    autoComplete,
+    policy,
+    forbidden,
+    matchWith,
+    value: providedValue,
     icons,
     disabled = false,
     readOnly = false,
@@ -92,28 +124,157 @@ var useViraPassword = (options = {}) => {
     inputProps: userInputProps,
     btnProps: userBtnProps
   } = options;
-  const [isVisible, setIsVisible] = useState(defaultVisible);
+  const [uncontrolledVisible, setUncontrolledVisible] = useState(defaultVisible);
+  const [capsLock, setCapsLock] = useState(false);
+  const userValue = userInputProps?.value;
+  const checksValue = policy !== void 0 || matchWith !== void 0;
+  const tracksValue = checksValue && providedValue === void 0 && typeof userValue !== "string";
+  const [typed, setTyped] = useState(() => {
+    const initial = userInputProps?.defaultValue;
+    return typeof initial === "string" ? initial : "";
+  });
+  const value = providedValue ?? (typeof userValue === "string" ? userValue : typed);
+  const isVisible = controlledVisible ?? uncontrolledVisible;
   const generatedId = useId();
-  const inputId = providedId || `virapassword-input-${generatedId}`;
+  const inputId = typeof userInputProps?.id === "string" && userInputProps.id || providedId || `virapassword-input-${generatedId}`;
+  const latest = useRef({ isVisible, controlled: controlledVisible !== void 0, onVisibleChange, policy, forbidden, matchWith, hideOnBlur, tracksValue });
+  latest.current = { isVisible, controlled: controlledVisible !== void 0, onVisibleChange, policy, forbidden, matchWith, hideOnBlur, tracksValue };
+  const pointerPress = useRef(null);
+  const getInput = useCallback(() => {
+    const element = typeof document === "undefined" ? null : document.getElementById(inputId);
+    return element instanceof HTMLInputElement ? element : null;
+  }, [inputId]);
+  const commit = useCallback((next) => {
+    const current = latest.current;
+    if (next === current.isVisible) return;
+    if (!current.controlled) setUncontrolledVisible(next);
+    current.onVisibleChange?.(next);
+  }, []);
   const toggle = useCallback(() => {
     if (disabled || readOnly) return;
-    setIsVisible((prev) => !prev);
-  }, [disabled, readOnly]);
+    commit(!latest.current.isVisible);
+  }, [disabled, readOnly, commit]);
   const setVisible = useCallback((visible) => {
     if (disabled || readOnly) return;
-    setIsVisible(visible);
-  }, [disabled, readOnly]);
-  const showIcon = icons?.show ?? React.createElement(EyeIcon);
-  const hideIcon = icons?.hide ?? React.createElement(EyeOffIcon);
+    commit(visible);
+  }, [disabled, readOnly, commit]);
+  const hide = useCallback(() => commit(false), [commit]);
+  useEffect(() => {
+    if (!hideOnSubmit) return;
+    const isOwnForm = (event) => {
+      const form = getInput()?.form;
+      return form != null && event.target === form;
+    };
+    const onSubmit = (event) => {
+      if (isOwnForm(event) && latest.current.isVisible) flushSync(hide);
+    };
+    const onReset = (event) => {
+      if (isOwnForm(event) && !event.defaultPrevented) hide();
+    };
+    document.addEventListener("submit", onSubmit, true);
+    document.addEventListener("reset", onReset);
+    return () => {
+      document.removeEventListener("submit", onSubmit, true);
+      document.removeEventListener("reset", onReset);
+    };
+  }, [hideOnSubmit, getInput, hide]);
+  useEffect(() => {
+    if (!tracksValue) return;
+    const onReset = (event) => {
+      const input = getInput();
+      if (input?.form && event.target === input.form) setTimeout(() => setTyped(input.value));
+    };
+    document.addEventListener("reset", onReset);
+    return () => document.removeEventListener("reset", onReset);
+  }, [tracksValue, getInput]);
+  useEffect(() => {
+    if (!hideOnBlur) return;
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "hidden") hide();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", onVisibilityChange);
+  }, [hideOnBlur, hide]);
+  const hideOnFocusLeave = useCallback((next) => {
+    if (!latest.current.hideOnBlur || pointerPress.current) return;
+    if (next instanceof Element && (next.id === inputId || next.getAttribute("aria-controls") === inputId)) return;
+    hide();
+  }, [inputId, hide]);
+  useEffect(() => {
+    const isInput = (target) => target instanceof HTMLInputElement && target.id === inputId;
+    const onKey = (event) => {
+      if (isInput(event.target)) setCapsLock(event.getModifierState?.("CapsLock") ?? false);
+    };
+    const onFocusOut = (event) => {
+      if (!isInput(event.target)) return;
+      setCapsLock(false);
+      hideOnFocusLeave(event.relatedTarget);
+    };
+    const onInput = (event) => {
+      if (latest.current.tracksValue && isInput(event.target)) setTyped(event.target.value);
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("keyup", onKey, true);
+    document.addEventListener("focusout", onFocusOut, true);
+    document.addEventListener("input", onInput, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("keyup", onKey, true);
+      document.removeEventListener("focusout", onFocusOut, true);
+      document.removeEventListener("input", onInput, true);
+    };
+  }, [inputId, hideOnFocusLeave]);
+  const strength = policy ? policy.evaluate(value, { forbidden }) : null;
+  const matches = matchWith === void 0 || value === "" ? null : sameText(value, matchWith);
+  const issues = strength ? [...strength.issues] : [];
+  if (matches === false) issues.push("password.mismatch");
+  const strengthId = `${inputId}-strength`;
+  const [rule] = useState(() => ({
+    validate: (input) => {
+      const { policy: currentPolicy, forbidden: currentForbidden, matchWith: currentMatch } = latest.current;
+      const text = typeof input === "string" ? input : "";
+      const result = currentPolicy?.evaluate(text, { forbidden: currentForbidden });
+      if (result && !result.valid) return result.issues[0];
+      if (currentMatch !== void 0 && !sameText(text, currentMatch)) return "password.mismatch";
+      return true;
+    }
+  }));
+  const showIcon = icons?.show ?? React2.createElement(EyeIcon);
+  const hideIcon = icons?.hide ?? React2.createElement(EyeOffIcon);
   const baseInputProps = {
     id: inputId,
     type: getInputType(isVisible),
     disabled,
     readOnly,
-    ...getInputAriaAttributes()
+    ...autoComplete === false ? {} : { autoComplete: autoComplete ?? (checksValue ? "new-password" : "current-password") },
+    spellCheck: false,
+    autoCorrect: "off",
+    autoCapitalize: "off",
+    ...getInputAriaAttributes(void 0, policy ? strengthId : void 0)
   };
   const baseBtnProps = {
-    onClick: toggle,
+    onPointerDown: () => {
+      const input = getInput();
+      const press = { start: input?.selectionStart ?? null, end: input?.selectionEnd ?? null };
+      pointerPress.current = press;
+      window.addEventListener("pointerup", () => setTimeout(() => {
+        if (pointerPress.current === press) pointerPress.current = null;
+      }), { once: true });
+    },
+    onPointerCancel: () => {
+      pointerPress.current = null;
+    },
+    onClick: () => {
+      const press = pointerPress.current;
+      pointerPress.current = null;
+      flushSync(toggle);
+      if (!press || disabled || readOnly) return;
+      const input = getInput();
+      if (!input) return;
+      input.focus();
+      if (press.start !== null && press.end !== null) input.setSelectionRange(press.start, press.end);
+    },
+    onBlur: (event) => hideOnFocusLeave(event.relatedTarget),
     disabled: disabled || readOnly,
     children: isVisible ? hideIcon : showIcon,
     ...getButtonAriaAttributes(isVisible, inputId)
@@ -124,11 +285,24 @@ var useViraPassword = (options = {}) => {
     inputProps: mergedInputProps,
     btnProps: mergedBtnProps,
     isVisible,
+    capsLock,
     toggle,
-    setVisible
+    setVisible,
+    strength,
+    matches,
+    strengthProps: { id: strengthId, role: "status", "aria-live": "polite", "aria-atomic": true },
+    issues,
+    rule
   };
 };
-
-export { EyeIcon, EyeOffIcon, getButtonAriaAttributes, getInputAriaAttributes, getInputType, mergeProps, useViraPassword };
-//# sourceMappingURL=index.mjs.map
+export {
+  EyeIcon,
+  EyeOffIcon,
+  composeRefs,
+  getButtonAriaAttributes,
+  getInputAriaAttributes,
+  getInputType,
+  mergeProps,
+  useViraPassword
+};
 //# sourceMappingURL=index.mjs.map