{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-field",
  "type": "registry:ui",
  "title": "Password Field",
  "description": "iOS 26 liquid-glass password input with animated strength bar, validation checklist, and one-click generation.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/password-field.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\n/* ── sound ── */\nlet _a: AudioContext, _b: AudioBuffer;\nconst tick = () => {\n  if (typeof window === \"undefined\") return;\n  if (!_a) {\n    _a = new AudioContext();\n    _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate);\n    const d = _b.getChannelData(0);\n    for (let i = 0; i < d.length; i++)\n      d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4;\n  }\n  const s = _a.createBufferSource();\n  s.buffer = _b;\n  const g = _a.createGain();\n  g.gain.value = 0.08;\n  s.connect(g).connect(_a.destination);\n  s.start();\n};\n\n/* ── theme ── */\nconst CSS = `\n.pf{\n  --pf-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --pf-border:rgba(0,0,0,0.06);\n  --pf-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8);\n  --pf-dim:rgba(0,0,0,0.42);\n  --pf-mid:rgba(0,0,0,0.55);\n  --pf-hi:rgba(0,0,0,0.88);\n  --pf-focus:rgba(0,0,0,0.12);\n  --pf-sep:rgba(0,0,0,0.06);\n  --pf-btn:rgba(0,0,0,0.03);\n  --pf-btn-h:rgba(0,0,0,0.07);\n  --pf-btn-border:rgba(0,0,0,0.06);\n  --pf-track:rgba(0,0,0,0.06);\n  --pf-weak:rgba(239,68,68,0.7);\n  --pf-medium:rgba(234,179,8,0.7);\n  --pf-strong:rgba(59,130,246,0.7);\n  --pf-max:rgba(34,197,94,0.7);\n  --pf-ok:rgba(34,197,94,0.8);\n  --pf-fail:rgba(0,0,0,0.2)\n}\n.dark .pf,[data-theme=\"dark\"] .pf{\n  --pf-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --pf-border:rgba(255,255,255,0.07);\n  --pf-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --pf-dim:rgba(255,255,255,0.28);\n  --pf-mid:rgba(255,255,255,0.5);\n  --pf-hi:rgba(255,255,255,0.88);\n  --pf-focus:rgba(255,255,255,0.12);\n  --pf-sep:rgba(255,255,255,0.06);\n  --pf-btn:rgba(255,255,255,0.03);\n  --pf-btn-h:rgba(255,255,255,0.07);\n  --pf-btn-border:rgba(255,255,255,0.06);\n  --pf-track:rgba(255,255,255,0.06);\n  --pf-weak:rgba(248,113,113,0.8);\n  --pf-medium:rgba(250,204,21,0.8);\n  --pf-strong:rgba(96,165,250,0.8);\n  --pf-max:rgba(74,222,128,0.8);\n  --pf-ok:rgba(74,222,128,0.9);\n  --pf-fail:rgba(255,255,255,0.15)\n}`;\n\n/* ── helpers ── */\nconst CHECKS = [\n  { label: \"8+ characters\", test: (v: string) => v.length >= 8 },\n  { label: \"Uppercase\", test: (v: string) => /[A-Z]/.test(v) },\n  { label: \"Number\", test: (v: string) => /\\d/.test(v) },\n  {\n    label: \"Special char\",\n    test: (v: string) => /[!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.<>/?]/.test(v),\n  },\n];\n\nconst STRENGTH_COLORS = [\n  \"var(--pf-track)\",\n  \"var(--pf-weak)\",\n  \"var(--pf-medium)\",\n  \"var(--pf-strong)\",\n  \"var(--pf-max)\",\n];\n\nconst STRENGTH_LABELS = [\"\", \"Weak\", \"Fair\", \"Strong\", \"Very strong\"];\n\nconst CHARSET =\n  \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*\";\n\n/* ── types ── */\nexport interface PasswordFieldProps {\n  label?: string;\n  placeholder?: string;\n  showChecklist?: boolean;\n  allowGenerate?: boolean;\n  onChange?: (value: string) => void;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\n/* ── component ── */\nexport default function PasswordField({\n  label = \"Password\",\n  placeholder = \"Enter password\",\n  showChecklist = true,\n  allowGenerate = true,\n  onChange,\n  sound = true,\n  style,\n}: PasswordFieldProps) {\n  const [value, setValue] = React.useState(\"\");\n  const [visible, setVisible] = React.useState(false);\n  const [focused, setFocused] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const results = CHECKS.map((c) => c.test(value));\n  const passed = results.filter(Boolean).length;\n\n  const toggleVisibility = () => {\n    setVisible((v) => !v);\n    if (sound) tick();\n  };\n\n  const generate = () => {\n    let pw = \"\";\n    for (let i = 0; i < 16; i++)\n      pw += CHARSET[Math.floor(Math.random() * CHARSET.length)];\n    setValue(pw);\n    onChange?.(pw);\n    if (sound) tick();\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.div\n        className=\"pf\"\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}\n        style={{\n          display: \"inline-flex\",\n          flexDirection: \"column\",\n          gap: 0,\n          borderRadius: 14,\n          background: \"var(--pf-glass)\",\n          border: \"1px solid var(--pf-border)\",\n          boxShadow: \"var(--pf-shadow)\",\n          backdropFilter: \"blur(24px)\",\n          WebkitBackdropFilter: \"blur(24px)\",\n          overflow: \"hidden\",\n          width: 340,\n          ...style,\n        }}\n      >\n        {/* input row */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            padding: \"0 4px 0 16px\",\n            borderBottom: value ? `1px solid var(--pf-sep)` : \"none\",\n          }}\n        >\n          {/* label + input */}\n          <div style={{ flex: 1, position: \"relative\" }}>\n            <span\n              style={{\n                position: \"absolute\",\n                left: 0,\n                top: value || focused ? 8 : \"50%\",\n                transform: value || focused ? \"none\" : \"translateY(-50%)\",\n                fontSize: value || focused ? 10 : 14,\n                fontWeight: 500,\n                color: \"var(--pf-dim)\",\n                transition: \"all 0.2s\",\n                pointerEvents: \"none\",\n                userSelect: \"none\",\n              }}\n            >\n              {label}\n            </span>\n            <input\n              ref={inputRef}\n              type={visible ? \"text\" : \"password\"}\n              value={value}\n              onChange={(e) => {\n                setValue(e.target.value);\n                onChange?.(e.target.value);\n              }}\n              onFocus={() => setFocused(true)}\n              onBlur={() => setFocused(false)}\n              placeholder={focused ? placeholder : \"\"}\n              style={{\n                width: \"100%\",\n                height: 52,\n                paddingTop: value || focused ? 16 : 0,\n                background: \"transparent\",\n                border: \"none\",\n                outline: \"none\",\n                fontSize: 15,\n                fontWeight: 500,\n                color: \"var(--pf-hi)\",\n              }}\n            />\n          </div>\n\n          {/* eye toggle */}\n          <motion.button\n            onClick={toggleVisibility}\n            whileTap={{ scale: 0.85 }}\n            style={{\n              width: 36,\n              height: 36,\n              borderRadius: 8,\n              border: \"none\",\n              background: \"transparent\",\n              cursor: \"pointer\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              color: \"var(--pf-mid)\",\n              transition: \"color 0.15s\",\n              flexShrink: 0,\n            }}\n          >\n            <AnimatePresence mode=\"wait\">\n              {visible ? (\n                <motion.svg\n                  key=\"off\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.5}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <path d=\"M2 2l12 12\" />\n                  <path d=\"M6.5 6.5a2 2 0 002.8 2.8\" />\n                  <path d=\"M3.6 3.6C2.2 4.8 1 6.4 1 8c0 0 3 5 7 5 1.3 0 2.4-.4 3.4-1\" />\n                  <path d=\"M11 5c1.3 1 2.6 2.4 3 3 0 0-3 5-7 5\" />\n                </motion.svg>\n              ) : (\n                <motion.svg\n                  key=\"on\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  width={16}\n                  height={16}\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={1.5}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <path d=\"M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z\" />\n                  <circle cx=\"8\" cy=\"8\" r=\"2\" />\n                </motion.svg>\n              )}\n            </AnimatePresence>\n          </motion.button>\n\n          {/* generate button */}\n          {allowGenerate && (\n            <motion.button\n              onClick={generate}\n              whileTap={{ scale: 0.85 }}\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: 8,\n                border: \"none\",\n                background: \"transparent\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                color: \"var(--pf-mid)\",\n                transition: \"color 0.15s\",\n                flexShrink: 0,\n              }}\n            >\n              <svg\n                width={14}\n                height={14}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M12 4.5a5.5 5.5 0 10.5 5.5\" />\n                <path d=\"M12 4.5V1.5\" />\n                <path d=\"M12 4.5h3\" />\n              </svg>\n            </motion.button>\n          )}\n        </div>\n\n        {/* strength bar */}\n        {value && (\n          <div style={{ padding: \"10px 16px\" }}>\n            <div\n              style={{\n                display: \"flex\",\n                gap: 3,\n                marginBottom: 6,\n              }}\n            >\n              {Array.from({ length: 4 }, (_, i) => (\n                <motion.div\n                  key={i}\n                  animate={{\n                    backgroundColor:\n                      i < passed ? STRENGTH_COLORS[passed] : \"var(--pf-track)\",\n                  }}\n                  transition={{ duration: 0.3 }}\n                  style={{\n                    flex: 1,\n                    height: 3,\n                    borderRadius: 1.5,\n                    background: \"var(--pf-track)\",\n                  }}\n                />\n              ))}\n            </div>\n            <span\n              style={{\n                fontSize: 11,\n                fontWeight: 500,\n                color: \"var(--pf-dim)\",\n              }}\n            >\n              {STRENGTH_LABELS[passed]}\n            </span>\n          </div>\n        )}\n\n        {/* checklist */}\n        {showChecklist && value && (\n          <>\n            <div style={{ height: 1, background: \"var(--pf-sep)\" }} />\n            <div\n              style={{\n                padding: \"10px 16px\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 6,\n              }}\n            >\n              {CHECKS.map((check, i) => (\n                <div\n                  key={i}\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 8,\n                    fontSize: 12,\n                    color: results[i] ? \"var(--pf-ok)\" : \"var(--pf-dim)\",\n                    transition: \"color 0.2s\",\n                  }}\n                >\n                  <svg\n                    width={12}\n                    height={12}\n                    viewBox=\"0 0 16 16\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={2}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  >\n                    {results[i] ? (\n                      <path d=\"M3 8.5l3.5 3.5L13 5\" />\n                    ) : (\n                      <circle cx=\"8\" cy=\"8\" r=\"5\" />\n                    )}\n                  </svg>\n                  <span>{check.label}</span>\n                </div>\n              ))}\n            </div>\n          </>\n        )}\n      </motion.div>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/password-field.tsx"
    }
  ]
}