Strength meter

"use client"

import * as React from "react"
import { Field } from "@/components/candor/ui/field"
import { Input } from "@/components/candor/ui/input"
import { StrengthMeter, type StrengthScore } from "@/components/candor/ui/strength-meter"

// The score is the app's, from its estimator; here a stand-in by length and kinds of character, and the basis says so.
// A real app passes zxcvbn's score and says "zxcvbn's estimate".
const estimate = (text: string): StrengthScore | null => {
  if (!text) return null
  const kinds = [/[a-z]/, /[A-Z]/, /\d/, /[^\w]/].filter((r) => r.test(text)).length
  return Math.max(0, Math.min(4, Math.floor(text.length / 4) + kinds - 2)) as StrengthScore
}

export default function Example() {
  const [password, setPassword] = React.useState("")
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Field label="New password">
        <Input type="password" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </Field>
      <StrengthMeter score={estimate(password)} basis="this example's length and character check" />
    </div>
  )
}