ApiKeyField

Developer settings field for API keys / tokens — masked by default with reveal, copy, and rotate slots.

#Default usage

<ApiKeyField
  label="Server key"
  lastFour="abcd"
  status="active"
  value="sk_live_super_secret_token_abcd"
/>

#Import

import { ApiKeyField, type ApiKeyStatus } from "@froggdesign/enter-ui-react";

#Accessibility

Reveal toggles a button with switching aria-label (Reveal API key ↔ Hide API key). Copy uses the standard CopyButton. The masked value carries an explicit aria-label so the code element is announced as such.

#API

• value: full secret. Held out of the DOM until Reveal is pressed.
• maskedValue: optional masked display string. Falls back to ••••••••<lastFour>.
• lastFour, createdAt, expiresAt: meta slots.
• status: "active" | "expired" | "revoked" — applies a status-aware border.
• actions: trailing slot for Rotate / Revoke buttons.
• disabled: disables Reveal and Copy.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.