{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-input-shadcnui",
  "type": "registry:component",
  "title": "Password Input",
  "description": "Password input with toggle visibility and strength indicator",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/inputs/password-input.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Eye, EyeOff } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function PasswordInput() {\n  const [showPassword, setShowPassword] = useState(false);\n  const [password, setPassword] = useState(\"\");\n\n  return (\n    <div className=\"w-full max-w-sm\">\n      <label className=\"mb-2 block text-sm font-medium\">Password</label>\n      <div className=\"relative\">\n        <motion.input\n          type={showPassword ? \"text\" : \"password\"}\n          value={password}\n          onChange={(e) => setPassword(e.target.value)}\n          className=\"w-full rounded-lg border  bg-[var(--card-bg)] px-4 py-2 pr-12 text-sm focus:outline-none focus:ring-2 focus:ring-accent\"\n          placeholder=\"Enter your password\"\n          autoComplete=\"off\"\n          name=\"password-demo\"\n          whileFocus={{ scale: 1.01 }}\n          transition={{ duration: 0.2 }}\n        />\n        <motion.button\n          type=\"button\"\n          onClick={() => setShowPassword(!showPassword)}\n          className=\"absolute right-3 top-0 bottom-0 -translate-y-1/2 text-[var(--foreground)]/60 hover:text-[var(--foreground)]\"\n          whileHover={{ scale: 1.1 }}\n          whileTap={{ scale: 0.95 }}\n        >\n          <AnimatePresence mode=\"wait\">\n            {showPassword ? (\n              <motion.div\n                key=\"eye-off\"\n                initial={{ opacity: 0, rotate: -90 }}\n                animate={{ opacity: 1, rotate: 0 }}\n                exit={{ opacity: 0, rotate: 90 }}\n                transition={{ duration: 0.2 }}\n              >\n                <EyeOff className=\"h-5 w-5\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"eye\"\n                initial={{ opacity: 0, rotate: -90 }}\n                animate={{ opacity: 1, rotate: 0 }}\n                exit={{ opacity: 0, rotate: 90 }}\n                transition={{ duration: 0.2 }}\n              >\n                <Eye className=\"h-5 w-5\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </motion.button>\n      </div>\n      {password && (\n        <motion.div\n          initial={{ opacity: 0, height: 0 }}\n          animate={{ opacity: 1, height: \"auto\" }}\n          className=\"mt-2\"\n        >\n          <div className=\"flex gap-1\">\n            {[0, 1, 2, 3].map((i) => (\n              <motion.div\n                key={i}\n                initial={{ scaleX: 0 }}\n                animate={{\n                  scaleX: password.length > i * 3 ? 1 : 0,\n                }}\n                className=\"h-1 flex-1 rounded-full bg-accent\"\n                style={{ originX: 0 }}\n                transition={{ delay: i * 0.1 }}\n              />\n            ))}\n          </div>\n          <motion.p\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            className=\"mt-1 text-xs text-[var(--foreground)]/60\"\n          >\n            Password strength:{\" \"}\n            {password.length < 4\n              ? \"Weak\"\n              : password.length < 8\n                ? \"Medium\"\n                : \"Strong\"}\n          </motion.p>\n        </motion.div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/password-input-shadcnui.tsx"
    }
  ]
}