{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "password-strength-indicator",
  "type": "registry:ui",
  "title": "Interactive Entropy Password Input",
  "description": "Real-time security entropy calculation with multi-tier colored meter and requirement checklist.",
  "category": "forms",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "forms",
    "password",
    "input",
    "entropy",
    "security"
  ],
  "files": [
    {
      "path": "registry/forms/password-strength-indicator/password-strength-indicator.tsx",
      "type": "registry:ui",
      "target": "components/ui/password-strength-indicator.tsx",
      "content": "import React, { useState } from 'react'\nimport { Check, X, Eye, EyeSlash, LockKey } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\nexport interface PasswordStrengthIndicatorProps {\n  className?: string\n}\n\nexport const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps> = ({ className }) => {\n  const [password, setPassword] = useState('')\n  const [show, setShow] = useState(false)\n\n  const hasLength = password.length >= 8\n  const hasUpper = /[A-Z]/.test(password)\n  const hasNumber = /[0-9]/.test(password)\n  const hasSpecial = /[^A-Za-z0-9]/.test(password)\n\n  const score = [hasLength, hasUpper, hasNumber, hasSpecial].filter(Boolean).length\n\n  const strengthLabels = ['Empty', 'Weak', 'Moderate', 'Strong', 'Cryptographic']\n  const strengthColors = ['bg-zinc-800', 'bg-rose-500', 'bg-amber-500', 'bg-blue-500', 'bg-emerald-500']\n\n  return (\n    <div className={cn('w-full max-w-sm rounded-3xl border border-white/10 bg-zinc-950 p-5 font-mono text-xs text-white shadow-2xl', className)}>\n      <div className=\"flex items-center justify-between text-zinc-400 pb-2 border-b border-white/5 mb-3\">\n        <span className=\"text-[10px] uppercase tracking-widest\">SECURITY TELEMETRY</span>\n        <span className=\"text-zinc-500 text-[10px]\">ENTROPY METER</span>\n      </div>\n\n      <div className=\"relative flex items-center\">\n        <LockKey size={16} className=\"absolute left-3 text-zinc-500\" />\n        <input\n          type={show ? 'text' : 'password'}\n          value={password}\n          onChange={(e) => setPassword(e.target.value)}\n          placeholder=\"Enter secret token...\"\n          className=\"w-full rounded-xl border border-white/10 bg-zinc-900/80 py-2.5 pl-9 pr-10 text-xs text-white placeholder-zinc-600 focus:outline-none focus:border-white/30\"\n        />\n        <button\n          type=\"button\"\n          onClick={() => setShow(!show)}\n          className=\"absolute right-3 text-zinc-400 hover:text-white\"\n        >\n          {show ? <EyeSlash size={16} /> : <Eye size={16} />}\n        </button>\n      </div>\n\n      {/* Strength Bars */}\n      <div className=\"mt-3 flex gap-1.5 h-1.5 w-full\">\n        {[0, 1, 2, 3].map((idx) => (\n          <div\n            key={idx}\n            className={`h-full flex-1 rounded-full transition-all duration-300 ${\n              score > idx ? strengthColors[score] : 'bg-zinc-800'\n            }`}\n          />\n        ))}\n      </div>\n\n      <div className=\"mt-2 flex items-center justify-between text-[10px]\">\n        <span className=\"text-zinc-500\">Security Strength:</span>\n        <span className={score === 4 ? 'text-emerald-400 font-bold' : 'text-zinc-300'}>\n          {strengthLabels[score]}\n        </span>\n      </div>\n\n      {/* Rules Grid */}\n      <div className=\"mt-4 grid grid-cols-2 gap-2 text-[10px]\">\n        <div className={`flex items-center gap-1.5 ${hasLength ? 'text-emerald-400' : 'text-zinc-500'}`}>\n          {hasLength ? <Check size={12} weight=\"bold\" /> : <X size={12} />}\n          <span>8+ Characters</span>\n        </div>\n        <div className={`flex items-center gap-1.5 ${hasUpper ? 'text-emerald-400' : 'text-zinc-500'}`}>\n          {hasUpper ? <Check size={12} weight=\"bold\" /> : <X size={12} />}\n          <span>Uppercase [A-Z]</span>\n        </div>\n        <div className={`flex items-center gap-1.5 ${hasNumber ? 'text-emerald-400' : 'text-zinc-500'}`}>\n          {hasNumber ? <Check size={12} weight=\"bold\" /> : <X size={12} />}\n          <span>Numeric [0-9]</span>\n        </div>\n        <div className={`flex items-center gap-1.5 ${hasSpecial ? 'text-emerald-400' : 'text-zinc-500'}`}>\n          {hasSpecial ? <Check size={12} weight=\"bold\" /> : <X size={12} />}\n          <span>Symbol [!@#]</span>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}