{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gravatar-email-input",
  "type": "registry:ui",
  "title": "Gravatar Email Input",
  "description": "iOS 26 liquid-glass email input with live Gravatar avatar preview and smooth fade-in.",
  "dependencies": [
    "motion",
    "md5"
  ],
  "files": [
    {
      "path": "registry/ruixenui/gravatar-email-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport md5 from \"md5\";\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.ge{\n  --ge-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --ge-border:rgba(0,0,0,0.06);\n  --ge-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  --ge-dim:rgba(0,0,0,0.42);\n  --ge-mid:rgba(0,0,0,0.55);\n  --ge-hi:rgba(0,0,0,0.88);\n  --ge-focus:rgba(0,0,0,0.12);\n  --ge-avatar:rgba(0,0,0,0.04);\n  --ge-avatar-border:rgba(0,0,0,0.06)\n}\n.dark .ge,[data-theme=\"dark\"] .ge{\n  --ge-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --ge-border:rgba(255,255,255,0.07);\n  --ge-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --ge-dim:rgba(255,255,255,0.28);\n  --ge-mid:rgba(255,255,255,0.5);\n  --ge-hi:rgba(255,255,255,0.88);\n  --ge-focus:rgba(255,255,255,0.12);\n  --ge-avatar:rgba(255,255,255,0.04);\n  --ge-avatar-border:rgba(255,255,255,0.06)\n}`;\n\n/* ── types ── */\ninterface GravatarEmailInputProps {\n  label?: string;\n  placeholder?: string;\n  initialValue?: string;\n  hint?: string;\n  onChange?: (email: string) => void;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\n/* ── component ── */\nexport default function GravatarEmailInput({\n  label = \"Email\",\n  placeholder = \"you@example.com\",\n  initialValue = \"\",\n  hint,\n  onChange,\n  sound = true,\n  style,\n}: GravatarEmailInputProps) {\n  const [email, setEmail] = React.useState(initialValue);\n  const [focused, setFocused] = React.useState(false);\n  const [avatarLoaded, setAvatarLoaded] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const avatarUrl = React.useMemo(() => {\n    if (!email.includes(\"@\")) return null;\n    const hash = md5(email.trim().toLowerCase());\n    return `https://www.gravatar.com/avatar/${hash}?d=identicon&s=48`;\n  }, [email]);\n\n  React.useEffect(() => {\n    setAvatarLoaded(false);\n  }, [avatarUrl]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value;\n    setEmail(val);\n    onChange?.(val);\n  };\n\n  const handleFocus = () => {\n    setFocused(true);\n    if (sound) tick();\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.div\n        className=\"ge\"\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: 6,\n          ...style,\n        }}\n      >\n        {label && (\n          <span\n            style={{\n              fontSize: 11,\n              fontWeight: 500,\n              letterSpacing: \"0.06em\",\n              textTransform: \"uppercase\" as const,\n              color: \"var(--ge-dim)\",\n              userSelect: \"none\" as const,\n              paddingLeft: 4,\n            }}\n          >\n            {label}\n          </span>\n        )}\n\n        {/* glass field */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 12,\n            padding: \"0 14px\",\n            borderRadius: 12,\n            background: \"var(--ge-glass)\",\n            border: `1px solid ${focused ? \"var(--ge-focus)\" : \"var(--ge-border)\"}`,\n            boxShadow: \"var(--ge-shadow)\",\n            backdropFilter: \"blur(24px)\",\n            WebkitBackdropFilter: \"blur(24px)\",\n            transition: \"border-color 0.2s\",\n            cursor: \"text\",\n          }}\n          onClick={() => inputRef.current?.focus()}\n        >\n          {/* avatar */}\n          <div\n            style={{\n              width: 28,\n              height: 28,\n              borderRadius: 14,\n              background: \"var(--ge-avatar)\",\n              border: \"1px solid var(--ge-avatar-border)\",\n              overflow: \"hidden\",\n              flexShrink: 0,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n            }}\n          >\n            {avatarUrl ? (\n              <img\n                src={avatarUrl}\n                alt=\"\"\n                width={28}\n                height={28}\n                style={{\n                  width: 28,\n                  height: 28,\n                  borderRadius: 14,\n                  opacity: avatarLoaded ? 1 : 0,\n                  transition: \"opacity 0.3s\",\n                }}\n                onLoad={() => setAvatarLoaded(true)}\n                onError={() => setAvatarLoaded(false)}\n              />\n            ) : (\n              <svg\n                width={14}\n                height={14}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"var(--ge-dim)\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <circle cx=\"8\" cy=\"6\" r=\"3\" />\n                <path d=\"M2.5 14c0-2.8 2.5-4.5 5.5-4.5s5.5 1.7 5.5 4.5\" />\n              </svg>\n            )}\n          </div>\n\n          {/* input */}\n          <input\n            ref={inputRef}\n            type=\"email\"\n            value={email}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={() => setFocused(false)}\n            placeholder={placeholder}\n            style={{\n              flex: 1,\n              height: 48,\n              background: \"transparent\",\n              border: \"none\",\n              outline: \"none\",\n              fontSize: 14,\n              color: \"var(--ge-hi)\",\n            }}\n          />\n        </div>\n\n        {hint && (\n          <span\n            style={{\n              fontSize: 11,\n              color: \"var(--ge-dim)\",\n              paddingLeft: 4,\n            }}\n          >\n            {hint}\n          </span>\n        )}\n      </motion.div>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/gravatar-email-input.tsx"
    }
  ]
}