pass-strength-indicator 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Samuel Prigent
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,191 @@
+# shadcn-password-strength
+
+A customizable password strength indicator component for React with multi-language support
+
+[![npm version](https://img.shields.io/npm/v/shadcn-password-strength.svg)](https://www.npmjs.com/package/shadcn-password-strength)
+[![license](https://img.shields.io/npm/l/shadcn-password-strength.svg)](https://github.com/SamuelPrigent/shadcn-password-strength/blob/main/LICENSE)
+
+## Features
+
+- **13 languages** supported: English, French, Spanish, German, Portuguese, Italian, Dutch, Polish, Swedish, Ukrainian, Chinese, Japanese, Korean
+- **Flexible display**: Show 0-5 validation rules, or bar-only mode
+- **Configurable strength levels**: 3, 4, or 5 bars
+- **Email pattern detection**: Prevents users from using parts of their email in passwords
+- **Forbidden words**: Block specific words from being used
+- **shadcn/ui integration**: Uses your own Input/Label components for consistent styling
+- **Dark mode** support out of the box
+- **Fully typed** with TypeScript
+
+## Installation
+
+```bash
+# 1. Install shadcn/ui components (if not already installed)
+npx shadcn@latest add input label
+
+# 2. Install the package
+npm install pass-strength-indicator
+```
+
+## Quick Start
+
+```tsx
+import { useState } from "react";
+import { PasswordStrength } from "pass-strength-indicator";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function PasswordForm() {
+  const [password, setPassword] = useState("");
+
+  return (
+    <PasswordStrength
+      value={password}
+      onChange={setPassword}
+      InputComponent={Input}
+      LabelComponent={Label}
+    />
+  );
+}
+```
+
+## Examples
+
+### Bar Only Mode
+
+Set `maxRules={0}` to hide validation rules and show only the strength bar:
+
+```tsx
+<PasswordStrength
+  value={password}
+  onChange={setPassword}
+  maxRules={0}
+  InputComponent={Input}
+  LabelComponent={Label}
+/>
+```
+
+### Multi-language Support
+
+Available locales: `en`, `fr`, `es`, `de`, `pt`, `it`, `nl`, `pl`, `sv`, `uk`, `zh`, `ja`, `ko`
+
+```tsx
+<PasswordStrength
+  value={password}
+  onChange={setPassword}
+  locale="de"
+  InputComponent={Input}
+  LabelComponent={Label}
+/>
+```
+
+### Email Pattern Detection
+
+Prevents users from including any 4+ consecutive characters from their email:
+
+```tsx
+<PasswordStrength
+  value={password}
+  onChange={setPassword}
+  email="johndoe@example.com"
+  InputComponent={Input}
+  LabelComponent={Label}
+/>
+```
+
+### Custom Number of Bars
+
+Choose between 3, 4, or 5 strength bars:
+
+```tsx
+<PasswordStrength
+  value={password}
+  onChange={setPassword}
+  barsNumber={3}
+  InputComponent={Input}
+  LabelComponent={Label}
+/>
+```
+
+### Full Configuration
+
+```tsx
+<PasswordStrength
+  value={password}
+  onChange={setPassword}
+  locale="fr"
+  barsNumber={5}
+  maxRules={3}
+  email="user@example.com"
+  forbiddenWords={["password", "company"]}
+  InputComponent={Input}
+  LabelComponent={Label}
+/>
+```
+
+## Props
+
+### Required
+
+| Prop       | Type                      | Description     |
+| ---------- | ------------------------- | --------------- |
+| `value`    | `string`                  | Password value  |
+| `onChange` | `(value: string) => void` | Change callback |
+
+### Shadcn Components
+
+| Prop             | Type        | Description                     |
+| ---------------- | ----------- | ------------------------------- |
+| `InputComponent` | `Component` | Your Input from @/components/ui |
+| `LabelComponent` | `Component` | Your Label from @/components/ui |
+
+### Package Customization
+
+| Prop          | Type                          | Default | Description                                                   |
+| ------------- | ----------------------------- | ------- | ------------------------------------------------------------- |
+| `locale`      | `"en" \| "fr" \| ... \| "ko"` | `"en"`  | Language (en, fr, es, de, pt, it, nl, pl, sv, uk, zh, ja, ko) |
+| `barsNumber`  | `3 \| 4 \| 5`                 | `5`     | Number of strength indicator bars                             |
+| `maxRules`    | `number`                      | `2`     | Max validation rules shown (0 = bar only)                     |
+| `placeholder` | `string`                      | -       | Input placeholder text                                        |
+| `label`       | `string`                      | -       | Input label text                                              |
+
+### Validation
+
+| Prop             | Type       | Description                                     |
+| ---------------- | ---------- | ----------------------------------------------- |
+| `email`          | `string`   | Detects 4+ consecutive chars from email         |
+| `forbiddenWords` | `string[]` | Words that cannot be in the password (-2 score) |
+
+### Visibility Toggle
+
+| Prop                   | Type      | Default | Description                                 |
+| ---------------------- | --------- | ------- | ------------------------------------------- |
+| `showToggleVisibility` | `boolean` | `true`  | Show/hide password visibility toggle button |
+| `toggleTabIndex`       | `number`  | `-1`    | Tab index for the visibility toggle button  |
+
+### Styling
+
+| Prop             | Type     | Description                                 |
+| ---------------- | -------- | ------------------------------------------- |
+| `className`      | `string` | Additional class name for the container     |
+| `barClassName`   | `string` | Additional class name for the strength bars |
+| `inputClassName` | `string` | Additional class name for the input field   |
+
+## Password Rules
+
+The component validates passwords against these rules:
+
+1. **Minimum length**: At least 12 characters
+2. **Uppercase**: At least one uppercase letter
+3. **Lowercase**: At least one lowercase letter
+4. **Number**: At least one digit
+5. **Special character**: At least one special character
+6. **No email pattern** (optional): No 4+ consecutive characters from email
+7. **No forbidden words** (optional): None of the specified forbidden words
+
+## Documentation
+
+For full documentation and live examples, visit the [documentation site](https://shadcn-password-strength.vercel.app).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,94 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Locale = "en" | "fr" | "es" | "de" | "pt" | "it" | "nl" | "pl" | "sv" | "uk" | "zh" | "ja" | "ko";
+type StrengthLevel = "veryWeak" | "weak" | "soso" | "good" | "strong";
+interface PasswordRule {
+    id: string;
+    test: (password: string, options?: RuleOptions) => boolean;
+}
+interface RuleOptions {
+    email?: string;
+    forbiddenWords?: string[];
+}
+interface PasswordStrengthResult {
+    score: number;
+    level: StrengthLevel;
+    passedRules: string[];
+    failedRules: string[];
+    percentage: number;
+}
+interface PasswordStrengthProps {
+    /** Current password value */
+    value: string;
+    /** Language for labels and messages */
+    locale?: Locale;
+    /** Number of strength bars (3, 4, or 5) */
+    barsNumber?: 3 | 4 | 5;
+    /** Maximum number of rules to display (0 = no rules, just bar) */
+    maxRules?: number;
+    /** Email to check password doesn't contain it */
+    email?: string;
+    /** Additional words that should not be in the password */
+    forbiddenWords?: string[];
+    /** Additional class name for the container */
+    className?: string;
+    /** Additional class name for the strength bars */
+    barClassName?: string;
+    /** Visual bar mode variant */
+    barMode?: "default" | "rounded";
+}
+
+declare function PasswordStrength({ value, locale, barsNumber, maxRules, email, forbiddenWords, className, barClassName, barMode, }: PasswordStrengthProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Maps a strength level to the number of active bars
+ */
+declare function levelToActiveBars(level: StrengthLevel, totalBars: 3 | 4 | 5): number;
+interface UsePasswordStrengthOptions {
+    barsNumber?: 3 | 4 | 5;
+    email?: string;
+    forbiddenWords?: string[];
+}
+declare function usePasswordStrength(password: string, options?: UsePasswordStrengthOptions): PasswordStrengthResult;
+
+interface Translation {
+    levels: Record<StrengthLevel, string>;
+    passwordMustInclude: string;
+    passwordStrength: string;
+    rules: {
+        minLength: string;
+        uppercase: string;
+        lowercase: string;
+        number: string;
+        special: string;
+        noEmail: string;
+        noForbiddenWords: string;
+    };
+    placeholder: string;
+    label: string;
+}
+
+/**
+ * Charge une traduction de manière asynchrone (lazy loading)
+ * Retourne la traduction en cache si déjà chargée
+ */
+declare function loadTranslation(locale: string): Promise<Translation>;
+/**
+ * Obtient une traduction de manière synchrone (depuis le cache ou fallback)
+ * Utilisé pour le rendu initial avant que la traduction async soit chargée
+ */
+declare function getTranslationSync(locale: string): Translation;
+/**
+ * Précharge une traduction (utile pour optimiser le chargement)
+ */
+declare function preloadTranslation(locale: string): void;
+
+declare const defaultRules: PasswordRule[];
+declare const optionalRules: PasswordRule[];
+declare function evaluatePassword(password: string, options?: RuleOptions): {
+    passedRules: string[];
+    failedRules: string[];
+    score: number;
+};
+
+export { type Locale, type PasswordRule, PasswordStrength, type PasswordStrengthProps, type PasswordStrengthResult, type RuleOptions, type StrengthLevel, type Translation, PasswordStrength as default, defaultRules, evaluatePassword, getTranslationSync, levelToActiveBars, loadTranslation, optionalRules, preloadTranslation, usePasswordStrength };

package/dist/index.d.ts

@@ -0,0 +1,94 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Locale = "en" | "fr" | "es" | "de" | "pt" | "it" | "nl" | "pl" | "sv" | "uk" | "zh" | "ja" | "ko";
+type StrengthLevel = "veryWeak" | "weak" | "soso" | "good" | "strong";
+interface PasswordRule {
+    id: string;
+    test: (password: string, options?: RuleOptions) => boolean;
+}
+interface RuleOptions {
+    email?: string;
+    forbiddenWords?: string[];
+}
+interface PasswordStrengthResult {
+    score: number;
+    level: StrengthLevel;
+    passedRules: string[];
+    failedRules: string[];
+    percentage: number;
+}
+interface PasswordStrengthProps {
+    /** Current password value */
+    value: string;
+    /** Language for labels and messages */
+    locale?: Locale;
+    /** Number of strength bars (3, 4, or 5) */
+    barsNumber?: 3 | 4 | 5;
+    /** Maximum number of rules to display (0 = no rules, just bar) */
+    maxRules?: number;
+    /** Email to check password doesn't contain it */
+    email?: string;
+    /** Additional words that should not be in the password */
+    forbiddenWords?: string[];
+    /** Additional class name for the container */
+    className?: string;
+    /** Additional class name for the strength bars */
+    barClassName?: string;
+    /** Visual bar mode variant */
+    barMode?: "default" | "rounded";
+}
+
+declare function PasswordStrength({ value, locale, barsNumber, maxRules, email, forbiddenWords, className, barClassName, barMode, }: PasswordStrengthProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Maps a strength level to the number of active bars
+ */
+declare function levelToActiveBars(level: StrengthLevel, totalBars: 3 | 4 | 5): number;
+interface UsePasswordStrengthOptions {
+    barsNumber?: 3 | 4 | 5;
+    email?: string;
+    forbiddenWords?: string[];
+}
+declare function usePasswordStrength(password: string, options?: UsePasswordStrengthOptions): PasswordStrengthResult;
+
+interface Translation {
+    levels: Record<StrengthLevel, string>;
+    passwordMustInclude: string;
+    passwordStrength: string;
+    rules: {
+        minLength: string;
+        uppercase: string;
+        lowercase: string;
+        number: string;
+        special: string;
+        noEmail: string;
+        noForbiddenWords: string;
+    };
+    placeholder: string;
+    label: string;
+}
+
+/**
+ * Charge une traduction de manière asynchrone (lazy loading)
+ * Retourne la traduction en cache si déjà chargée
+ */
+declare function loadTranslation(locale: string): Promise<Translation>;
+/**
+ * Obtient une traduction de manière synchrone (depuis le cache ou fallback)
+ * Utilisé pour le rendu initial avant que la traduction async soit chargée
+ */
+declare function getTranslationSync(locale: string): Translation;
+/**
+ * Précharge une traduction (utile pour optimiser le chargement)
+ */
+declare function preloadTranslation(locale: string): void;
+
+declare const defaultRules: PasswordRule[];
+declare const optionalRules: PasswordRule[];
+declare function evaluatePassword(password: string, options?: RuleOptions): {
+    passedRules: string[];
+    failedRules: string[];
+    score: number;
+};
+
+export { type Locale, type PasswordRule, PasswordStrength, type PasswordStrengthProps, type PasswordStrengthResult, type RuleOptions, type StrengthLevel, type Translation, PasswordStrength as default, defaultRules, evaluatePassword, getTranslationSync, levelToActiveBars, loadTranslation, optionalRules, preloadTranslation, usePasswordStrength };