@pwd-meter/react 2.0.0

package/dist/index.cjs

@@ -0,0 +1,162 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PasswordInput: () => PasswordInput,
+  PasswordStrengthMeter: () => PasswordStrengthMeter,
+  usePasswordGenerator: () => usePasswordGenerator,
+  usePasswordStrength: () => usePasswordStrength
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PasswordStrengthMeter.tsx
+var import_core2 = require("@pwd-meter/core");
+var import_react2 = require("react");
+
+// src/usePasswordStrength.ts
+var import_react = require("react");
+var import_core = require("@pwd-meter/core");
+function usePasswordStrength(password, options = {}) {
+  const { checkPwned = false, debounceMs = 400, hibp } = options;
+  const base = (0, import_react.useMemo)(() => (0, import_core.analyzePassword)(password), [password]);
+  const [result, setResult] = (0, import_react.useState)(base);
+  (0, import_react.useEffect)(() => {
+    if (!checkPwned || !password) {
+      setResult(base);
+      return;
+    }
+    let cancelled = false;
+    setResult({ ...base, pwnedCheckPending: true });
+    const timer = window.setTimeout(async () => {
+      const next = await (0, import_core.analyzePasswordAsync)(password, { checkPwned: true, hibp });
+      if (!cancelled) {
+        setResult(next);
+      }
+    }, debounceMs);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [password, base, checkPwned, debounceMs, hibp]);
+  return result;
+}
+function usePasswordGenerator(defaultOptions) {
+  return (0, import_react.useMemo)(
+    () => ({
+      generate: (options) => (0, import_core.generateSecurePassword)({ ...defaultOptions, ...options })
+    }),
+    [defaultOptions]
+  );
+}
+
+// src/PasswordStrengthMeter.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function PasswordStrengthMeter({
+  password,
+  result: externalResult,
+  showSuggestions = true,
+  showChecks = false,
+  checkPwned = false,
+  hibpOptions,
+  className = ""
+}) {
+  const ownsAnalysis = externalResult === void 0;
+  const internalResult = usePasswordStrength(ownsAnalysis ? password : "", {
+    checkPwned: ownsAnalysis ? checkPwned : false,
+    hibp: ownsAnalysis ? hibpOptions : void 0
+  });
+  const result = externalResult ?? internalResult;
+  const width = password ? `${(result.score + 1) / 5 * 100}%` : "0%";
+  const color = (0, import_core2.getStrengthColor)(result.label);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `ps-meter ${className}`.trim(), "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ps-meter__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ps-meter__bar", style: { width, backgroundColor: color } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ps-meter__message", children: (0, import_core2.getStrengthMessage)(result) }),
+    result.crackTimeDisplay && password && !result.isPwned && !result.pwnedCheckPending && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "ps-meter__meta", children: [
+      "Estimated crack time: ",
+      result.crackTimeDisplay
+    ] }),
+    showChecks && password && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "ps-meter__checks", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-pass": result.checks.length, children: "At least 12 characters" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-pass": result.checks.lowercase, children: "Lowercase letter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-pass": result.checks.uppercase, children: "Uppercase letter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-pass": result.checks.number, children: "Number" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-pass": result.checks.symbol, children: "Symbol" })
+    ] }),
+    showSuggestions && (result.feedback.warning || result.feedback.suggestions.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ps-meter__feedback", children: [
+      result.feedback.warning && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ps-meter__warning", children: result.feedback.warning }),
+      result.feedback.suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: result.feedback.suggestions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: item }, item)) })
+    ] })
+  ] });
+}
+function PasswordInput({
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Enter password",
+  showMeter = true,
+  showGenerate = true,
+  checkPwned = false,
+  hibpOptions,
+  generateOptions,
+  className = "",
+  inputClassName = ""
+}) {
+  const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultValue);
+  const currentValue = value ?? internalValue;
+  const setValue = (next) => {
+    if (value === void 0) setInternalValue(next);
+    onChange?.(next);
+  };
+  const result = usePasswordStrength(currentValue, { checkPwned, hibp: hibpOptions });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `ps-input ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ps-input__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "password",
+          className: `ps-input__field ${inputClassName}`.trim(),
+          value: currentValue,
+          placeholder,
+          onChange: (event) => setValue(event.target.value),
+          "aria-describedby": "password-strength-message"
+        }
+      ),
+      showGenerate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "ps-input__generate",
+          onClick: () => setValue((0, import_core2.generateSecurePassword)(generateOptions)),
+          children: "Generate"
+        }
+      )
+    ] }),
+    showMeter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasswordStrengthMeter, { password: currentValue, result }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: "password-strength-message", className: "ps-sr-only", children: (0, import_core2.getStrengthMessage)(result) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PasswordInput,
+  PasswordStrengthMeter,
+  usePasswordGenerator,
+  usePasswordStrength
+});

package/dist/index.d.cts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { AnalyzePasswordOptions, GeneratePasswordOptions, PasswordStrengthResult } from '@pwd-meter/core';
+export { AnalyzePasswordOptions, GeneratePasswordOptions, HibpOptions, PasswordStrengthResult, PwnedPasswordResult, StrengthLabel } from '@pwd-meter/core';
+
+type UsePasswordStrengthOptions = AnalyzePasswordOptions & {
+    debounceMs?: number;
+};
+declare function usePasswordStrength(password: string, options?: UsePasswordStrengthOptions): PasswordStrengthResult;
+declare function usePasswordGenerator(defaultOptions?: GeneratePasswordOptions): {
+    generate: (options?: GeneratePasswordOptions) => string;
+};
+
+type PasswordStrengthMeterProps = {
+    password: string;
+    result?: PasswordStrengthResult;
+    showSuggestions?: boolean;
+    showChecks?: boolean;
+    checkPwned?: boolean;
+    hibpOptions?: UsePasswordStrengthOptions["hibp"];
+    className?: string;
+};
+declare function PasswordStrengthMeter({ password, result: externalResult, showSuggestions, showChecks, checkPwned, hibpOptions, className, }: PasswordStrengthMeterProps): react.JSX.Element;
+type PasswordInputProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    showMeter?: boolean;
+    showGenerate?: boolean;
+    checkPwned?: boolean;
+    hibpOptions?: UsePasswordStrengthOptions["hibp"];
+    generateOptions?: GeneratePasswordOptions;
+    className?: string;
+    inputClassName?: string;
+};
+declare function PasswordInput({ value, defaultValue, onChange, placeholder, showMeter, showGenerate, checkPwned, hibpOptions, generateOptions, className, inputClassName, }: PasswordInputProps): react.JSX.Element;
+
+export { PasswordInput, type PasswordInputProps, PasswordStrengthMeter, type PasswordStrengthMeterProps, type UsePasswordStrengthOptions, usePasswordGenerator, usePasswordStrength };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { AnalyzePasswordOptions, GeneratePasswordOptions, PasswordStrengthResult } from '@pwd-meter/core';
+export { AnalyzePasswordOptions, GeneratePasswordOptions, HibpOptions, PasswordStrengthResult, PwnedPasswordResult, StrengthLabel } from '@pwd-meter/core';
+
+type UsePasswordStrengthOptions = AnalyzePasswordOptions & {
+    debounceMs?: number;
+};
+declare function usePasswordStrength(password: string, options?: UsePasswordStrengthOptions): PasswordStrengthResult;
+declare function usePasswordGenerator(defaultOptions?: GeneratePasswordOptions): {
+    generate: (options?: GeneratePasswordOptions) => string;
+};
+
+type PasswordStrengthMeterProps = {
+    password: string;
+    result?: PasswordStrengthResult;
+    showSuggestions?: boolean;
+    showChecks?: boolean;
+    checkPwned?: boolean;
+    hibpOptions?: UsePasswordStrengthOptions["hibp"];
+    className?: string;
+};
+declare function PasswordStrengthMeter({ password, result: externalResult, showSuggestions, showChecks, checkPwned, hibpOptions, className, }: PasswordStrengthMeterProps): react.JSX.Element;
+type PasswordInputProps = {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    showMeter?: boolean;
+    showGenerate?: boolean;
+    checkPwned?: boolean;
+    hibpOptions?: UsePasswordStrengthOptions["hibp"];
+    generateOptions?: GeneratePasswordOptions;
+    className?: string;
+    inputClassName?: string;
+};
+declare function PasswordInput({ value, defaultValue, onChange, placeholder, showMeter, showGenerate, checkPwned, hibpOptions, generateOptions, className, inputClassName, }: PasswordInputProps): react.JSX.Element;
+
+export { PasswordInput, type PasswordInputProps, PasswordStrengthMeter, type PasswordStrengthMeterProps, type UsePasswordStrengthOptions, usePasswordGenerator, usePasswordStrength };

package/dist/index.js

@@ -0,0 +1,141 @@
+// src/PasswordStrengthMeter.tsx
+import {
+  generateSecurePassword as generateSecurePassword2,
+  getStrengthColor,
+  getStrengthMessage
+} from "@pwd-meter/core";
+import { useState as useState2 } from "react";
+
+// src/usePasswordStrength.ts
+import { useEffect, useMemo, useState } from "react";
+import {
+  analyzePassword,
+  analyzePasswordAsync,
+  checkPwnedPassword,
+  generateSecurePassword
+} from "@pwd-meter/core";
+function usePasswordStrength(password, options = {}) {
+  const { checkPwned = false, debounceMs = 400, hibp } = options;
+  const base = useMemo(() => analyzePassword(password), [password]);
+  const [result, setResult] = useState(base);
+  useEffect(() => {
+    if (!checkPwned || !password) {
+      setResult(base);
+      return;
+    }
+    let cancelled = false;
+    setResult({ ...base, pwnedCheckPending: true });
+    const timer = window.setTimeout(async () => {
+      const next = await analyzePasswordAsync(password, { checkPwned: true, hibp });
+      if (!cancelled) {
+        setResult(next);
+      }
+    }, debounceMs);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [password, base, checkPwned, debounceMs, hibp]);
+  return result;
+}
+function usePasswordGenerator(defaultOptions) {
+  return useMemo(
+    () => ({
+      generate: (options) => generateSecurePassword({ ...defaultOptions, ...options })
+    }),
+    [defaultOptions]
+  );
+}
+
+// src/PasswordStrengthMeter.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PasswordStrengthMeter({
+  password,
+  result: externalResult,
+  showSuggestions = true,
+  showChecks = false,
+  checkPwned = false,
+  hibpOptions,
+  className = ""
+}) {
+  const ownsAnalysis = externalResult === void 0;
+  const internalResult = usePasswordStrength(ownsAnalysis ? password : "", {
+    checkPwned: ownsAnalysis ? checkPwned : false,
+    hibp: ownsAnalysis ? hibpOptions : void 0
+  });
+  const result = externalResult ?? internalResult;
+  const width = password ? `${(result.score + 1) / 5 * 100}%` : "0%";
+  const color = getStrengthColor(result.label);
+  return /* @__PURE__ */ jsxs("div", { className: `ps-meter ${className}`.trim(), "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx("div", { className: "ps-meter__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ps-meter__bar", style: { width, backgroundColor: color } }) }),
+    /* @__PURE__ */ jsx("p", { className: "ps-meter__message", children: getStrengthMessage(result) }),
+    result.crackTimeDisplay && password && !result.isPwned && !result.pwnedCheckPending && /* @__PURE__ */ jsxs("p", { className: "ps-meter__meta", children: [
+      "Estimated crack time: ",
+      result.crackTimeDisplay
+    ] }),
+    showChecks && password && /* @__PURE__ */ jsxs("ul", { className: "ps-meter__checks", children: [
+      /* @__PURE__ */ jsx("li", { "data-pass": result.checks.length, children: "At least 12 characters" }),
+      /* @__PURE__ */ jsx("li", { "data-pass": result.checks.lowercase, children: "Lowercase letter" }),
+      /* @__PURE__ */ jsx("li", { "data-pass": result.checks.uppercase, children: "Uppercase letter" }),
+      /* @__PURE__ */ jsx("li", { "data-pass": result.checks.number, children: "Number" }),
+      /* @__PURE__ */ jsx("li", { "data-pass": result.checks.symbol, children: "Symbol" })
+    ] }),
+    showSuggestions && (result.feedback.warning || result.feedback.suggestions.length > 0) && /* @__PURE__ */ jsxs("div", { className: "ps-meter__feedback", children: [
+      result.feedback.warning && /* @__PURE__ */ jsx("p", { className: "ps-meter__warning", children: result.feedback.warning }),
+      result.feedback.suggestions.length > 0 && /* @__PURE__ */ jsx("ul", { children: result.feedback.suggestions.map((item) => /* @__PURE__ */ jsx("li", { children: item }, item)) })
+    ] })
+  ] });
+}
+function PasswordInput({
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Enter password",
+  showMeter = true,
+  showGenerate = true,
+  checkPwned = false,
+  hibpOptions,
+  generateOptions,
+  className = "",
+  inputClassName = ""
+}) {
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const currentValue = value ?? internalValue;
+  const setValue = (next) => {
+    if (value === void 0) setInternalValue(next);
+    onChange?.(next);
+  };
+  const result = usePasswordStrength(currentValue, { checkPwned, hibp: hibpOptions });
+  return /* @__PURE__ */ jsxs("div", { className: `ps-input ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-input__row", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "password",
+          className: `ps-input__field ${inputClassName}`.trim(),
+          value: currentValue,
+          placeholder,
+          onChange: (event) => setValue(event.target.value),
+          "aria-describedby": "password-strength-message"
+        }
+      ),
+      showGenerate && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-input__generate",
+          onClick: () => setValue(generateSecurePassword2(generateOptions)),
+          children: "Generate"
+        }
+      )
+    ] }),
+    showMeter && /* @__PURE__ */ jsx(PasswordStrengthMeter, { password: currentValue, result }),
+    /* @__PURE__ */ jsx("span", { id: "password-strength-message", className: "ps-sr-only", children: getStrengthMessage(result) })
+  ] });
+}
+export {
+  PasswordInput,
+  PasswordStrengthMeter,
+  usePasswordGenerator,
+  usePasswordStrength
+};

package/dist/styles.css

@@ -0,0 +1,82 @@
+.ps-meter,
+.ps-input {
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  color: #0f172a;
+}
+
+.ps-input__row {
+  display: flex;
+  gap: 8px;
+}
+
+.ps-input__field {
+  flex: 1;
+  min-height: 42px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 0 12px;
+}
+
+.ps-input__generate {
+  min-height: 42px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 14px;
+  color: #fff;
+  background: #2563eb;
+  cursor: pointer;
+}
+
+.ps-meter {
+  margin-top: 10px;
+}
+
+.ps-meter__track {
+  height: 8px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  overflow: hidden;
+}
+
+.ps-meter__bar {
+  height: 100%;
+  border-radius: inherit;
+  transition: width 0.2s ease, background-color 0.2s ease;
+}
+
+.ps-meter__message {
+  margin: 8px 0 0;
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.ps-meter__meta,
+.ps-meter__warning,
+.ps-meter__feedback {
+  margin: 6px 0 0;
+  color: #475569;
+  font-size: 0.86rem;
+}
+
+.ps-meter__checks {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  color: #64748b;
+  font-size: 0.84rem;
+}
+
+.ps-meter__checks li[data-pass="true"] {
+  color: #15803d;
+}
+
+.ps-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@pwd-meter/react",
+  "version": "2.0.0",
+  "description": "React hook and UI components for password strength checking.",
+  "license": "MIT",
+  "author": "Alen Joy <alenjoy333@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alenjoy333/Password-Strength-Checker.git",
+    "directory": "packages/react"
+  },
+  "keywords": ["password", "react", "hook", "security"],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": ["dist"],
+  "sideEffects": ["**/*.css"],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean && cp src/styles.css dist/styles.css",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@pwd-meter/core": "2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "react": "^19.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
+  }
+}