PasswordStrength

import { useState } from "react";
import { Input, PasswordStrength } from "@nexera-ui/react";

function rate(password: string): PasswordStrengthLevel {
  if (password.length === 0) return "empty";
  if (password.length < 6) return "weak";
  if (password.length < 9) return "fair";
  if (password.length < 12) return "good";
  return "strong";
}

export function WithPasswordField() {
  const [password, setPassword] = useState("");
  return (
    <div className="flex flex-col gap-2">
      <Input
        label="New password"
        type="password"
        autoComplete="new-password"
        value={password}
        onChange={setPassword}
      />
      <PasswordStrength strength={rate(password)} />
    </div>
  );
}

import { PasswordStrength } from "@nexera-ui/react";

export function LongLabelAndRightToLeft() {
  return (
    <div className="flex flex-col gap-6">
      <PasswordStrength
        strength="fair"
        labels={{
          fair: "Fair password: add a number, a symbol and a few more characters to make it stronger",
        }}
      />
      <div dir="rtl" lang="ar">
        <PasswordStrength
          strength="good"
          aria-label="قوة كلمة المرور"
          labels={{ good: "كلمة مرور جيدة" }}
        />
      </div>
    </div>
  );
}