A new password and its rules

// apps/docs/examples/ui/password-input.tsx'use client';
import {useState} from 'react';
import {PasswordInput} from '@workspace/active-ui/components/composed/password-input';import {PasswordStrengthIndicator} from '@workspace/active-ui/components/composed/password-strength-indicator';import {  Field,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';
// The rules are the application's: the indicator only shows them.function criteriaFor(password: string) {  return [    {id: 'length', label: 'At least 12 characters', met: password.length >= 12},    {id: 'digit', label: 'A digit', met: /\d/.test(password)},    {      id: 'case',      label: 'An upper-case and a lower-case letter',      met: /[a-z]/.test(password) && /[A-Z]/.test(password),    },  ];}
/** * A new password with a button to show it, and the rules it has to meet. * Type to see the bar and the rules change; when every rule is met, one * confirmation replaces the list. */export default function PasswordInputExample() {  const [password, setPassword] = useState('');  return (    <Field className="w-full max-w-sm">      <FieldLabel htmlFor="new-password">New password</FieldLabel>      <PasswordInput        id="new-password"        autoComplete="new-password"        value={password}        onChange={(event) => setPassword(event.target.value)}        ariaLabelShowPassword="Show password"        ariaLabelHidePassword="Hide password"        aria-describedby="new-password-rules"      />      <PasswordStrengthIndicator        id="new-password-rules"        criteria={criteriaFor(password)}        compliantLabel="The password meets every rule."        criterionMetLabel="met"        criterionUnmetLabel="not met"      />    </Field>  );}