use-password-policy 1.0.5 → 2.0.0

package/README.md

@@ -1,75 +1,204 @@
-## usePasswordPolicy Hook
+# use-password-policy
 
-This React hook simplifies password policy enforcement in your application. It provides a flexible and customizable way to validate passwords against various criteria, ensuring strong password security.
+[![npm version](https://img.shields.io/npm/v/use-password-policy.svg)](https://www.npmjs.com/package/use-password-policy)
+[![npm downloads](https://img.shields.io/npm/dm/use-password-policy.svg)](https://www.npmjs.com/package/use-password-policy)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
 
-Features:
-- Built-in Policies: Enforces common password complexity requirements like minimum length, case sensitivity, digit inclusion, and special characters.
+A powerful, lightweight, and fully customizable solution for real-time password strength validation in React. Comes with a flexible hook and a zero-config, all-in-one UI component.
 
-- Custom Policies: Define your own validation checks using regular expressions or custom functions for even more granular control.
+---
 
-- Configurable Defaults: Specify a default configuration for common policies, or override them with custom settings.
+### [➡️ View Live Demo & Playground](https://rahulpatwa1303.github.io/use-password-policy/)
 
-Installation:
+*(Replace this with your final GitHub Pages URL)*
 
-```
+
+*(**Action Needed:** Record a GIF of your awesome demo and replace this link!)*
+
+---
+
+## ✨ Why `use-password-policy`?
+
+-   **🚀 Two Ways to Use:** Get full control with the `usePasswordPolicy` hook, or get running in seconds with the drop-in `<PasswordPolicyInput />` component.
+-   **🔧 Fully Customizable:** Easily configure policies like min-length, character requirements, and even add your own complex rules with custom functions or regex.
+-   **💅 Zero-Config Styling:** The UI component works out-of-the-box with self-contained styles, but is easily overridable.
+-   **✅ Rich & Reactive Feedback:** Provides a simple `isValid` boolean, a detailed `policyState` object, and a `strengthScore` to easily build any UI you can imagine.
+-   **♿ Accessibility First:** The component is designed with accessibility in mind, ready to be paired with a `<label>`.
+-   **📦 Tiny & Performant:** Zero dependencies and built with performance in mind, using `useMemo` to prevent unnecessary recalculations.
+
+## 💾 Installation
+
+```bash
 npm install use-password-policy
+# or
+yarn add use-password-policy
+```
+
+## 🚀 Usage
+
+You have two great ways to implement password validation.
+
+### 1. The Easy Way: `<PasswordPolicyInput />` Component
+
+For maximum speed, drop the component directly into your form. It includes the input, strength meter, and requirements list all-in-one.
+
+```tsx
+import { PasswordPolicyInput } from 'use-password-policy';
+
+function MyForm() {
+  const [isValid, setIsValid] = useState(false);
+
+  return (
+    <form>
+      <label htmlFor="signup-password">Create a Password</label>
+      <PasswordPolicyInput
+        id="signup-password"
+        name="password"
+        placeholder="Enter a secure password..."
+        onPasswordChange={(_, validation) => {
+          setIsValid(validation.isValid);
+        }}
+        policyOptions={{ minLength: 8, numberCheck: true, specialCharCheck: true }}
+      />
+      <button type="submit" disabled={!isValid}>
+        Sign Up
+      </button>
+    </form>
+  );
+}
 ```
 
-Usage:
-
-```javascript
-
-import { usePasswordPolicy } from './use-password-policy';
-function MyComponent() {
-	const [password, setPassword] = useState('');
-	const policy = usePasswordPolicy({
-						password,
-						config: { minLength: 12 },
-						customPolicies: [{ name: 'noRepeatedChars', regex: /^(?!.*(.)\1)/ },],});
-	const isPasswordValid = Object.values(policy).every(check => check);
-	
-	return (
-		<form>
-			<input
-				type="password"
-				value={password}
-				onChange={e => setPassword(e.target.value)}
-			/>
-		{isPasswordValid ? (
-			<p>Password is strong!</p>
-		) : (
-			<ul>
-				{Object.entries(policy).map(([key, value]) => (
-				<li key={key}>{!value && key.replace(/([A-Z])/g, ' $1')}</li>
-				))}
-			</ul>
-			)}
-		</form>
-	);
+### 2. The Powerful Way: `usePasswordPolicy` Hook
+
+For complete control over your UI, use the hook and build your own components.
+
+```tsx
+import { usePasswordPolicy } from 'use-password-policy';
+
+function MyCustomForm() {
+  const [password, setPassword] = useState('');
+  const { isValid, strengthLabel, policyState } = usePasswordPolicy({
+    password: password,
+    minLength: 10,
+    uppercaseCheck: true,
+    customRules: [{ name: 'noSpaces', test: (p) => !/\\s/.test(p) }],
+  });
+
+  return (
+    <form>
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <div>Strength: {strengthLabel}</div>
+      <ul>
+        {Object.entries(policyState).map(([rule, passed]) => (
+          <li key={rule} style={{ color: passed ? 'green' : 'red' }}>
+            {rule}
+          </li>
+        ))}
+      </ul>
+      <button type="submit" disabled={!isValid}>
+        Submit
+      </button>
+    </form>
+  );
 }
 ```
 
-**Props:**
+## 📖 API Reference
+
+### `<PasswordPolicyInput />` Props
+
+| Prop                   | Type                                                       | Default | Description                                                               |
+| ---------------------- | ---------------------------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `policyOptions`        | `PasswordPolicyOptions`                                    | `{}`    | Same options as the `usePasswordPolicy` hook to control validation logic. |
+| `onPasswordChange`     | `(password: string, validation: HookReturnValue) => void`  | `null`  | Callback fired on change, providing the password and full validation state. |
+| `showStrengthMeter`    | `boolean`                                                  | `true`  | Toggles the visibility of the strength meter bar.                         |
+| `showRequirementsList` | `boolean`                                                  | `true`  | Toggles the visibility of the pass/fail requirements list.              |
+| `showToggleButton`     | `boolean`                                                  | `true`  | Toggles the visibility of the show/hide password button.                  |
+| `...restInputProps`    | `React.InputHTMLAttributes`                                |         | All other standard input props (`id`, `name`, `placeholder`, etc.) are passed to the `<input>`. |
 
-| Prop Name              | Type                        | Description                                                                                | Default Value              |
-| ---------------------- | --------------------------- | ------------------------------------------------------------------------------------------ | -------------------------- |
-| `password`             | string                      | The password to be validated.                                                              | Required                   |
-| `config`               | object (optional)           | An object overriding default configuration for built-in policies.                          |                            |
-| - `minLength`          | number                      | Minimum password length                                                                    | 8                          |
-| - `uppercaseCharRegex` | RegExp                      | Regular expression for uppercase characters                                                | /[A-Z]/                    |
-| - `digitRegex`         | RegExp                      | Regular expression for digits                                                              | /\d/                       |
-| - `specialCharRegex`   | RegExp                      | Regular expression for special characters                                                  | /[!@#$%^&*()_+-=[]{};':"\| |
-| `customPolicies`       | array of objects (optional) | An array of custom policies to enforce.                                                    |                            |
-| - `name`               | string                      | Name of the custom policy for clarity in feedback.                                         |                            |
-| - `regex`              | RegExp (optional)           | Regular expression for custom validation.                                                  |                            |
-| - `checkFunction`      | function (optional)         | A function taking the password as an argument and returning true/false for a custom check. |                            |
+<br/>
+
+### `usePasswordPolicy` Hook
+
+#### Options (`PasswordPolicyOptions`)
+
+| Prop                   | Type           | Default    | Description                                                 |
+| ---------------------- | -------------- | ---------- | ----------------------------------------------------------- |
+| `password`             | `string`       | `''`       | The password string to validate.                            |
+| `minLength`            | `number`       | `8`        | Minimum password length.                                    |
+| `lowercaseCheck`       | `boolean`      | `true`     | Requires at least one lowercase letter.                     |
+| `uppercaseCheck`       | `boolean`      | `true`     | Requires at least one uppercase letter.                     |
+| `numberCheck`          | `boolean`      | `true`     | Requires at least one number.                               |
+| `specialCharCheck`     | `boolean`      | `true`     | Requires at least one special character.                    |
+| `customRules`          | `PolicyRule[]` | `[]`       | An array of custom validation rules.                        |
+
+#### Return Value (`HookReturnValue`)
+
+| Key             | Type                                                         | Description                                                               |
+| --------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| `isValid`       | `boolean`                                                    | `true` only if all active policies are met.                               |
+| `strengthScore` | `number`                                                     | The number of policies that have passed.                                  |
+| `strengthLabel` | `'Very Weak' \| 'Weak' \| 'Medium' \| 'Strong' \| 'Very Strong'` | A human-readable strength label.                                          |
+| `policyState`   | `object`                                                     | An object with boolean flags for each active policy (`{ minLength: true, uppercase: false, ... }`). |
+
+## 🎨 Customizing Styles
+
+The `<PasswordPolicyInput />` component is built with `styled-components` for complete style isolation and easy customization. You have two primary ways to apply your own styles:
+
+### 1. Theming with `styled()`
+
+For deep customization, wrap the component with `styled()` from `styled-components`. You can easily change the theme by overriding the internal CSS variables, or target any internal element for specific changes.
+
+```jsx
+import styled from 'styled-components';
+import { PasswordPolicyInput } from 'use-password-policy';
+
+const MyStyledInput = styled(PasswordPolicyInput)`
+  /* Override theme variables */
+  --rpp-accent: #ff6347; // Use a tomato red accent
+
+  /* Override specific elements */
+  input {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+`;
+
+// Then use <MyStyledInput /> in your app!
+```
+
+**Available CSS Variables for Theming:**
+
+| Variable          | Default    | Description                        |
+| ----------------- | ---------- | ---------------------------------- |
+| `--rpp-accent`    | `#646cff`  | Accent color for focus, buttons.   |
+| `--rpp-success`   | `#27ae60`  | Color for passed requirements.     |
+| `--rpp-danger`    | `#c0392b`  | Color for failed requirements.     |
+| `--rpp-weak`      | `#f39c12`  | Strength meter color for weak.     |
+| `--rpp-medium`    | `#d35400`  | Strength meter color for medium.   |
+| `--rpp-bg`        | `#f9f9f9`  | Component's background color.      |
+| `--rpp-border`    | `#e0e0e0`  | Component's border color.          |
+| `--rpp-text`      | `#333`     | Component's main text color.       |
+
+### 2. Applying Custom Class Names
+
+To apply layout styles (like margins or flex properties), simply pass a `className`. This works perfectly with utility-class frameworks like Tailwind CSS.
+
+```jsx
+import { PasswordPolicyInput } from 'use-password-policy';
+
+// Example with Tailwind CSS or a custom utility class
+<PasswordPolicyInput className="mb-4 w-full" />
+```
 
-**Return Value:**
+## ❤️ Contributing
 
-An object containing boolean values for each policy check (built-in and custom). Use `Object.values(policy).every(check => check)` to determine if all policies are satisfied.
+Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/rahulpatwa1303/use-password-policy/issues).
 
-**Benefits:**
+## 📄 License
 
-- **Improved Security:** Enforces strong passwords, reducing the risk of brute-force attacks and data breaches.
-- **Enhanced User Experience:** Provides clear feedback to users on password strength, guiding them towards creating secure passwords.
-- **Customization:** Adapts to your specific security requirements through configurable defaults and custom policies.
+This project is [MIT](https://github.com/rahulpatwa1303/use-password-policy/blob/main/LICENSE) licensed.

package/dist/index.d.mts

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+
+interface PolicyRule {
+    name: string;
+    optionsKey?: keyof PasswordPolicyOptions;
+    test: (password: string, options: Required<PasswordPolicyOptions>) => boolean;
+}
+interface PasswordPolicyOptions {
+    password?: string;
+    minLength?: number;
+    lowercaseCheck?: boolean;
+    uppercaseCheck?: boolean;
+    numberCheck?: boolean;
+    specialCharCheck?: boolean;
+    customRules?: PolicyRule[];
+    lowercaseRegex?: RegExp;
+    uppercaseRegex?: RegExp;
+    numberRegex?: RegExp;
+    specialCharRegex?: RegExp;
+}
+interface PasswordPolicyState {
+    [key: string]: boolean;
+}
+interface HookReturnValue {
+    password?: string;
+    isValid: boolean;
+    strengthScore: number;
+    strengthLabel: 'Very Weak' | 'Weak' | 'Medium' | 'Strong' | 'Very Strong';
+    policyState: PasswordPolicyState;
+}
+
+declare const usePasswordPolicy: (options?: PasswordPolicyOptions) => HookReturnValue;
+
+interface PasswordPolicyInputProps extends React.ComponentPropsWithoutRef<'input'> {
+    policyOptions?: PasswordPolicyOptions;
+    onPasswordChange?: (password: string, validation: HookReturnValue) => void;
+    showStrengthMeter?: boolean;
+    showRequirementsList?: boolean;
+    showToggleButton?: boolean;
+}
+declare const PasswordPolicyInput: FC<PasswordPolicyInputProps>;
+
+export { type HookReturnValue, PasswordPolicyInput, type PasswordPolicyInputProps, type PasswordPolicyOptions, type PasswordPolicyState, type PolicyRule, usePasswordPolicy };

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+
+interface PolicyRule {
+    name: string;
+    optionsKey?: keyof PasswordPolicyOptions;
+    test: (password: string, options: Required<PasswordPolicyOptions>) => boolean;
+}
+interface PasswordPolicyOptions {
+    password?: string;
+    minLength?: number;
+    lowercaseCheck?: boolean;
+    uppercaseCheck?: boolean;
+    numberCheck?: boolean;
+    specialCharCheck?: boolean;
+    customRules?: PolicyRule[];
+    lowercaseRegex?: RegExp;
+    uppercaseRegex?: RegExp;
+    numberRegex?: RegExp;
+    specialCharRegex?: RegExp;
+}
+interface PasswordPolicyState {
+    [key: string]: boolean;
+}
+interface HookReturnValue {
+    password?: string;
+    isValid: boolean;
+    strengthScore: number;
+    strengthLabel: 'Very Weak' | 'Weak' | 'Medium' | 'Strong' | 'Very Strong';
+    policyState: PasswordPolicyState;
+}
+
+declare const usePasswordPolicy: (options?: PasswordPolicyOptions) => HookReturnValue;
+
+interface PasswordPolicyInputProps extends React.ComponentPropsWithoutRef<'input'> {
+    policyOptions?: PasswordPolicyOptions;
+    onPasswordChange?: (password: string, validation: HookReturnValue) => void;
+    showStrengthMeter?: boolean;
+    showRequirementsList?: boolean;
+    showToggleButton?: boolean;
+}
+declare const PasswordPolicyInput: FC<PasswordPolicyInputProps>;
+
+export { type HookReturnValue, PasswordPolicyInput, type PasswordPolicyInputProps, type PasswordPolicyOptions, type PasswordPolicyState, type PolicyRule, usePasswordPolicy };

package/dist/index.js

@@ -0,0 +1,278 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PasswordPolicyInput: () => PasswordPolicyInput,
+  usePasswordPolicy: () => usePasswordPolicy
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-password-policy.ts
+var import_react = require("react");
+var DEFAULT_POLICIES = [
+  {
+    name: "minLength",
+    optionsKey: "minLength",
+    test: (password, options) => password.length >= options.minLength
+  },
+  {
+    name: "uppercase",
+    optionsKey: "uppercaseCheck",
+    test: (password, options) => options.uppercaseRegex.test(password)
+  },
+  {
+    name: "lowercase",
+    optionsKey: "lowercaseCheck",
+    test: (password, options) => options.lowercaseRegex.test(password)
+  },
+  {
+    name: "number",
+    optionsKey: "numberCheck",
+    test: (password, options) => options.numberRegex.test(password)
+  },
+  {
+    name: "specialChar",
+    optionsKey: "specialCharCheck",
+    test: (password, options) => options.specialCharRegex.test(password)
+  }
+];
+var DEFAULT_OPTIONS = {
+  minLength: 8,
+  lowercaseCheck: true,
+  uppercaseCheck: true,
+  numberCheck: true,
+  specialCharCheck: true,
+  customRules: [],
+  lowercaseRegex: /[a-z]/,
+  uppercaseRegex: /[A-Z]/,
+  numberRegex: /\d/,
+  specialCharRegex: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/
+};
+var usePasswordPolicy = (options = {}) => {
+  const { password = "" } = options;
+  const mergedOptions = (0, import_react.useMemo)(
+    () => ({ ...DEFAULT_OPTIONS, ...options }),
+    [options]
+  );
+  const activePolicies = (0, import_react.useMemo)(() => {
+    const activeDefaultPolicies = DEFAULT_POLICIES.filter(
+      (policy) => policy.optionsKey && mergedOptions[policy.optionsKey]
+    );
+    return [...activeDefaultPolicies, ...mergedOptions.customRules];
+  }, [mergedOptions]);
+  const policyState = (0, import_react.useMemo)(() => {
+    const state = {};
+    for (const policy of activePolicies) {
+      state[policy.name] = policy.test(password, mergedOptions);
+    }
+    return state;
+  }, [password, activePolicies, mergedOptions]);
+  const { score, label, isValid } = (0, import_react.useMemo)(() => {
+    const passedPolicies = Object.values(policyState).filter(Boolean);
+    const score2 = passedPolicies.length;
+    const totalPolicies = activePolicies.length;
+    const strengthPercentage = totalPolicies > 0 ? score2 / totalPolicies : 0;
+    let label2 = "Very Weak";
+    if (strengthPercentage >= 1) {
+      label2 = "Very Strong";
+    } else if (strengthPercentage >= 0.75) {
+      label2 = "Strong";
+    } else if (strengthPercentage >= 0.5) {
+      label2 = "Medium";
+    } else if (strengthPercentage > 0) {
+      label2 = "Weak";
+    }
+    return {
+      score: score2,
+      label: label2,
+      isValid: score2 === totalPolicies && totalPolicies > 0
+    };
+  }, [policyState, activePolicies]);
+  return {
+    password,
+    policyState,
+    isValid,
+    strengthScore: score,
+    strengthLabel: label
+  };
+};
+
+// src/PasswordPolicyInput.tsx
+var import_react2 = require("react");
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var STRENGTH_COLOR_MAP = {
+  "Very Weak": "var(--rpp-weak)",
+  "Weak": "var(--rpp-weak)",
+  "Medium": "var(--rpp-medium)",
+  "Strong": "var(--rpp-success)",
+  "Very Strong": "var(--rpp-success)"
+};
+var Container = import_styled_components.default.div`
+  /* CSS variables define the component's internal theme */
+  --rpp-accent: #646cff;
+  --rpp-success: #27ae60;
+  --rpp-danger: #c0392b;
+  --rpp-weak: #f39c12;
+  --rpp-medium: #d35400;
+  --rpp-bg: #f9f9f9;
+  --rpp-border: #e0e0e0;
+  --rpp-text: #333;
+  
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+var InputWrapper = import_styled_components.default.div`
+  position: relative;
+`;
+var Input = import_styled_components.default.input`
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--rpp-border);
+  border-radius: 6px;
+  font-size: 1rem;
+  
+  &:focus {
+    border-color: var(--rpp-accent);
+    outline: none;
+  }
+`;
+var ToggleButton = import_styled_components.default.button`
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: #888;
+  display: flex;
+  align-items: center;
+`;
+var StrengthMeter = import_styled_components.default.div`
+  display: flex;
+  gap: 0.25rem;
+  height: 6px;
+`;
+var StrengthMeterSegment = import_styled_components.default.div`
+  flex: 1;
+  background-color: var(--rpp-border);
+  border-radius: 3px;
+  transition: background-color 0.3s;
+  
+  ${({ isFilled, strengthLabel }) => (
+  // FIX: Explicitly type props
+  isFilled && import_styled_components.css`
+      background-color: ${STRENGTH_COLOR_MAP[strengthLabel]};
+    `
+)}
+`;
+var RequirementsList = import_styled_components.default.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+`;
+var RequirementItem = import_styled_components.default.li`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: color 0.2s;
+  /* FIX: Explicitly type props */
+  color: ${({ passed }) => passed ? "var(--rpp-success)" : "var(--rpp-danger)"};
+`;
+var EyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOffIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+] });
+var PasswordPolicyInput = ({
+  policyOptions,
+  onPasswordChange,
+  showStrengthMeter = true,
+  showRequirementsList = true,
+  showToggleButton = true,
+  className,
+  ...restInputProps
+}) => {
+  const [password, setPassword] = (0, import_react2.useState)("");
+  const [showPassword, setShowPassword] = (0, import_react2.useState)(false);
+  const validation = usePasswordPolicy({ ...policyOptions, password });
+  const { policyState, strengthScore, strengthLabel } = validation;
+  (0, import_react2.useEffect)(() => {
+    onPasswordChange?.(password, validation);
+  }, [password, validation, onPasswordChange]);
+  const formatPolicyName = (name) => name.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Input,
+        {
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: handlePasswordChange,
+          ...restInputProps
+        }
+      ),
+      showToggleButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleButton, { type: "button", onClick: () => setShowPassword(!showPassword), children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeIcon, {}) })
+    ] }),
+    showStrengthMeter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StrengthMeter, { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StrengthMeterSegment,
+      {
+        isFilled: strengthScore > index,
+        strengthLabel
+      },
+      index
+    )) }),
+    showRequirementsList && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequirementsList, { children: Object.entries(policyState).map(([name, passed]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RequirementItem, { passed, children: [
+      passed ? "\u2713" : "\u2717",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatPolicyName(name) })
+    ] }, name)) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PasswordPolicyInput,
+  usePasswordPolicy
+});

package/dist/index.mjs

@@ -0,0 +1,240 @@
+// src/use-password-policy.ts
+import { useMemo } from "react";
+var DEFAULT_POLICIES = [
+  {
+    name: "minLength",
+    optionsKey: "minLength",
+    test: (password, options) => password.length >= options.minLength
+  },
+  {
+    name: "uppercase",
+    optionsKey: "uppercaseCheck",
+    test: (password, options) => options.uppercaseRegex.test(password)
+  },
+  {
+    name: "lowercase",
+    optionsKey: "lowercaseCheck",
+    test: (password, options) => options.lowercaseRegex.test(password)
+  },
+  {
+    name: "number",
+    optionsKey: "numberCheck",
+    test: (password, options) => options.numberRegex.test(password)
+  },
+  {
+    name: "specialChar",
+    optionsKey: "specialCharCheck",
+    test: (password, options) => options.specialCharRegex.test(password)
+  }
+];
+var DEFAULT_OPTIONS = {
+  minLength: 8,
+  lowercaseCheck: true,
+  uppercaseCheck: true,
+  numberCheck: true,
+  specialCharCheck: true,
+  customRules: [],
+  lowercaseRegex: /[a-z]/,
+  uppercaseRegex: /[A-Z]/,
+  numberRegex: /\d/,
+  specialCharRegex: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/
+};
+var usePasswordPolicy = (options = {}) => {
+  const { password = "" } = options;
+  const mergedOptions = useMemo(
+    () => ({ ...DEFAULT_OPTIONS, ...options }),
+    [options]
+  );
+  const activePolicies = useMemo(() => {
+    const activeDefaultPolicies = DEFAULT_POLICIES.filter(
+      (policy) => policy.optionsKey && mergedOptions[policy.optionsKey]
+    );
+    return [...activeDefaultPolicies, ...mergedOptions.customRules];
+  }, [mergedOptions]);
+  const policyState = useMemo(() => {
+    const state = {};
+    for (const policy of activePolicies) {
+      state[policy.name] = policy.test(password, mergedOptions);
+    }
+    return state;
+  }, [password, activePolicies, mergedOptions]);
+  const { score, label, isValid } = useMemo(() => {
+    const passedPolicies = Object.values(policyState).filter(Boolean);
+    const score2 = passedPolicies.length;
+    const totalPolicies = activePolicies.length;
+    const strengthPercentage = totalPolicies > 0 ? score2 / totalPolicies : 0;
+    let label2 = "Very Weak";
+    if (strengthPercentage >= 1) {
+      label2 = "Very Strong";
+    } else if (strengthPercentage >= 0.75) {
+      label2 = "Strong";
+    } else if (strengthPercentage >= 0.5) {
+      label2 = "Medium";
+    } else if (strengthPercentage > 0) {
+      label2 = "Weak";
+    }
+    return {
+      score: score2,
+      label: label2,
+      isValid: score2 === totalPolicies && totalPolicies > 0
+    };
+  }, [policyState, activePolicies]);
+  return {
+    password,
+    policyState,
+    isValid,
+    strengthScore: score,
+    strengthLabel: label
+  };
+};
+
+// src/PasswordPolicyInput.tsx
+import { useState, useEffect } from "react";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STRENGTH_COLOR_MAP = {
+  "Very Weak": "var(--rpp-weak)",
+  "Weak": "var(--rpp-weak)",
+  "Medium": "var(--rpp-medium)",
+  "Strong": "var(--rpp-success)",
+  "Very Strong": "var(--rpp-success)"
+};
+var Container = styled.div`
+  /* CSS variables define the component's internal theme */
+  --rpp-accent: #646cff;
+  --rpp-success: #27ae60;
+  --rpp-danger: #c0392b;
+  --rpp-weak: #f39c12;
+  --rpp-medium: #d35400;
+  --rpp-bg: #f9f9f9;
+  --rpp-border: #e0e0e0;
+  --rpp-text: #333;
+  
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+var InputWrapper = styled.div`
+  position: relative;
+`;
+var Input = styled.input`
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--rpp-border);
+  border-radius: 6px;
+  font-size: 1rem;
+  
+  &:focus {
+    border-color: var(--rpp-accent);
+    outline: none;
+  }
+`;
+var ToggleButton = styled.button`
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: #888;
+  display: flex;
+  align-items: center;
+`;
+var StrengthMeter = styled.div`
+  display: flex;
+  gap: 0.25rem;
+  height: 6px;
+`;
+var StrengthMeterSegment = styled.div`
+  flex: 1;
+  background-color: var(--rpp-border);
+  border-radius: 3px;
+  transition: background-color 0.3s;
+  
+  ${({ isFilled, strengthLabel }) => (
+  // FIX: Explicitly type props
+  isFilled && css`
+      background-color: ${STRENGTH_COLOR_MAP[strengthLabel]};
+    `
+)}
+`;
+var RequirementsList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+`;
+var RequirementItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: color 0.2s;
+  /* FIX: Explicitly type props */
+  color: ${({ passed }) => passed ? "var(--rpp-success)" : "var(--rpp-danger)"};
+`;
+var EyeIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOffIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+  /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+] });
+var PasswordPolicyInput = ({
+  policyOptions,
+  onPasswordChange,
+  showStrengthMeter = true,
+  showRequirementsList = true,
+  showToggleButton = true,
+  className,
+  ...restInputProps
+}) => {
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const validation = usePasswordPolicy({ ...policyOptions, password });
+  const { policyState, strengthScore, strengthLabel } = validation;
+  useEffect(() => {
+    onPasswordChange?.(password, validation);
+  }, [password, validation, onPasswordChange]);
+  const formatPolicyName = (name) => name.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
+  return /* @__PURE__ */ jsxs(Container, { className, children: [
+    /* @__PURE__ */ jsxs(InputWrapper, { children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: showPassword ? "text" : "password",
+          value: password,
+          onChange: handlePasswordChange,
+          ...restInputProps
+        }
+      ),
+      showToggleButton && /* @__PURE__ */ jsx(ToggleButton, { type: "button", onClick: () => setShowPassword(!showPassword), children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {}) })
+    ] }),
+    showStrengthMeter && /* @__PURE__ */ jsx(StrengthMeter, { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx(
+      StrengthMeterSegment,
+      {
+        isFilled: strengthScore > index,
+        strengthLabel
+      },
+      index
+    )) }),
+    showRequirementsList && /* @__PURE__ */ jsx(RequirementsList, { children: Object.entries(policyState).map(([name, passed]) => /* @__PURE__ */ jsxs(RequirementItem, { passed, children: [
+      passed ? "\u2713" : "\u2717",
+      /* @__PURE__ */ jsx("span", { children: formatPolicyName(name) })
+    ] }, name)) })
+  ] });
+};
+export {
+  PasswordPolicyInput,
+  usePasswordPolicy
+};

package/package.json

@@ -1,29 +1,46 @@
 {
   "name": "use-password-policy",
-  "version": "1.0.5",
-  "description": "",
-  "main": "use-password-policy.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "version": "2.0.0",
+  "private": false, 
+  "description": "A simple, lightweight, and customizable React hook for real-time password strength validation.",
+  "license": "MIT",
+  "author": "Rahul Patwa <rahul.y2j@gmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/rahulpatwa1303/use-password-policy.git"
   },
   "keywords": [
-    "password",
-    "password-policy",
-    "hooks",
-    "react"
+    "react", "hook", "password", "password-policy", "validation", "form",
+    "typescript", "password-strength", "component", "react-component"
+  ],
+  "homepage": "https://rahulpatwa1303.github.io/use-password-policy/",
+  "bugs": { "url": "https://github.com/rahulpatwa1303/use-password-policy/issues" },
+  
+  "workspaces": [
+    "demo"
   ],
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/rahulpatwa1303/use-password-policy/issues"
+
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [ "dist" ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && npx tsup src/index.ts --format cjs,esm --dts",
+    "dev": "npm run build -- --watch",
+    "prepublishOnly": "npm run build",
+    "deploy:demo": "npm run build && cd demo && npm install && npm run deploy"
   },
-  "homepage": "https://github.com/rahulpatwa1303/use-password-policy#readme",
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": ">=16.8.0",
+    "styled-components": ">=5"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/styled-components": "^5.1.34",
+    "react": "^18.2.0",
+    "styled-components": "^6.1.11",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
   }
-}
+}

package/Type.ts

@@ -1,14 +0,0 @@
-export interface CustomPolicy {
-  name: string; // Name of the policy (e.g., "SymbolCheck")
-  regex?: RegExp; // Regular expression for the check (optional)
-  checkFunction?: (password: string) => boolean; // Custom check function (optional)
-  message?: string; // Error message if the check fails (optional)
-}
-
-export interface StateObjects {
-  [key: string]: boolean;
-}
-
-export interface DefaultConfig {
-  [key: string]: boolean | RegExp | string | number;
-}

package/use-password-policy.ts

@@ -1,112 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { CustomPolicy, StateObjects, DefaultConfig } from "./Type";
-
-export const usePasswordPolicy = ({
-  password,
-  config,
-  customPolicies = [],
-  useDefaultConfig = true,
-}: {
-  password: string;
-  config?: {};
-  customPolicies?: CustomPolicy[];
-  useDefaultConfig?: boolean;
-}) => {
-  const defaultConfig: DefaultConfig = {
-    caseCheck: true,
-    lengthCheck: true,
-    digitCheck: true,
-    specialCharCheck: true,
-    minLength: 8,
-    uppercaseCharRegex: /[A-Z]/,
-    digitRegex: /\d/,
-    specialCharRegex: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/,
-  };
-
-  const merged = useMemo(() => mergedConfig(defaultConfig, config), []);
-
-  function mergedConfig(defaultConfig: {}, config: any) {
-    if (useDefaultConfig) {
-      return { ...defaultConfig, ...config };
-    } else {
-      return { ...config };
-    }
-  }
-
-  const [policy, setPolicy] = useState<StateObjects>(() => {
-    if (useDefaultConfig) {
-      const defaultStates: StateObjects = {
-        caseCheck: false,
-        lengthCheck: false,
-        digitCheck: false,
-        specialCharCheck: false,
-      };
-      const safeConfig: StateObjects = config || {};
-
-      Object.entries(defaultStates).map(([key]) => {
-        if (safeConfig.hasOwnProperty(key) && safeConfig[key] === false) {
-          delete defaultStates[key];
-          delete defaultConfig[key];
-        }
-      });
-      return {
-        ...defaultStates,
-        ...customPolicies.reduce(
-          (acc, policy: { name: string }) => ({
-            ...acc,
-            [policy?.name]: false,
-          }),
-          {}
-        ),
-      };
-    } else
-      return {
-        ...customPolicies.reduce(
-          (acc, policy: { name: string }) => ({
-            ...acc,
-            [policy?.name]: false,
-          }),
-          {}
-        ),
-      };
-  });
-
-  const evaluateChecks = () => {
-    const newPolicy: StateObjects = { ...policy };
-    const policyKeys = Object.keys(policy);
-
-    if (useDefaultConfig) {
-      policyKeys.forEach((key) => {
-        if (merged.hasOwnProperty(key) && policy.hasOwnProperty(key)) {
-          const checkFunction = {
-            caseCheck: () => RegExp(merged.uppercaseCharRegex).test(password),
-            lengthCheck: () => password.length >= merged.minLength,
-            digitCheck: () => RegExp(merged.digitRegex).test(password),
-            specialCharCheck: () =>
-              RegExp(merged.specialCharRegex).test(password),
-          }[key];
-
-          if (checkFunction) {
-            newPolicy[key] = merged[key] && checkFunction();
-          }
-        }
-      });
-    }
-
-    customPolicies.forEach((customPolicy: CustomPolicy) => {
-      const name: string = customPolicy?.name;
-      if (customPolicy?.regex) {
-        newPolicy[name] = customPolicy.regex.test(password);
-      } else if (customPolicy?.checkFunction) {
-        newPolicy[name] = customPolicy.checkFunction(password);
-      }
-    });
-
-    setPolicy(newPolicy);
-  };
-
-  useEffect(() => {
-    evaluateChecks();
-  }, [password]);
-  return policy;
-};