Campo de contraseña.

<div class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-password-field="true"><label for="password-field-0">Contraseña</label><div class="ui-password-row"><input class="input" id="password-field-0" type="password" autoComplete="current-password" aria-describedby="password-field-0-help" required=""/><button class="btn btn--secondary" type="button" aria-controls="password-field-0" aria-pressed="false">Mostrar</button></div><small id="password-field-0-help">Es la misma contraseña que usas en los demás productos de la Compañía.</small></div>

<div class="ui-sample ui-auth-fragment border border-slate-300 bg-white p-4 text-slate-950" data-auth-source="cis-auth-authentik" data-password-field="true"><label for="password-field-0">Contraseña</label><div class="ui-password-row"><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="password-field-0" type="password" autoComplete="current-password" aria-describedby="password-field-0-help" required=""/><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-controls="password-field-0" aria-pressed="false">Mostrar</button></div><small class="text-sm text-slate-600" id="password-field-0-help">Es la misma contraseña que usas en los demás productos de la Compañía.</small></div>

import type { ChangeEventHandler, MouseEventHandler } from "react";

export interface PasswordFieldProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo; la ayuda usa `${id}-help`. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** `current-password` para entrar; `new-password` para crear o cambiar la contraseña. */
  autoComplete?: "current-password" | "new-password";
  required?: boolean;
  /** Valor inicial de un campo no controlado. */
  defaultValue?: string;
  /** Valor de un campo controlado; va junto con `onChange`. */
  value?: string;
  /** Se llama en cada cambio, con o sin `value`. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto de ayuda bajo el campo; sólo reglas que el servidor exige. */
  help?: string;
  /** Muestra la contraseña en texto plano y marca el botón como presionado. */
  passwordVisible?: boolean;
  /** Texto del botón mientras la contraseña está oculta. */
  showLabel?: string;
  /** Texto del botón mientras la contraseña está visible. */
  hideLabel?: string;
  /** Se llama al pulsar el botón de mostrar u ocultar; el estado vuelve por `passwordVisible`. */
  onToggle?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Campo de contraseña con botón para mostrarla u ocultarla, para iniciar sesión o definir una contraseña nueva.
 *
 * Sin estado interno: `passwordVisible` decide si el campo es `text` o `password` y el valor de `aria-pressed`.
 *
 * @example <PasswordField id="clave" name="password" />
 * @example <PasswordField id="clave-nueva" autoComplete="new-password" help="Doce caracteres o más." passwordVisible={claveVisible} onToggle={alternar} />
 */
export function PasswordField({
  label = "Contraseña",
  id = "password-field-0",
  name,
  autoComplete = "current-password",
  required = true,
  defaultValue,
  value,
  onChange,
  help = "Es la misma contraseña que usas en los demás productos de la Compañía.",
  passwordVisible = false,
  showLabel = "Mostrar",
  hideLabel = "Ocultar",
  onToggle,
  className,
}: PasswordFieldProps) {
  const helpId = help ? `${id}-help` : undefined;
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <div className={["ui-auth-fragment", className].filter(Boolean).join(" ")} data-auth-source="cis-auth-authentik" data-password-field>
      <label htmlFor={id}>{label}</label>
      <div className="ui-password-row">
        <input
          className="input"
          id={id}
          name={name}
          type={passwordVisible ? "text" : "password"}
          autoComplete={autoComplete}
          aria-describedby={helpId}
          required={required}
          {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue, onChange })}
        />
        <button className="btn btn--secondary" type="button" aria-controls={id} aria-pressed={passwordVisible ? "true" : "false"} onClick={onToggle}>
          {passwordVisible ? hideLabel : showLabel}
        </button>
      </div>
      {help ? <small id={helpId}>{help}</small> : null}
    </div>
  );
}