{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-verification-code-card-shadcnui",
  "type": "registry:component",
  "title": "Glass Verification Code Card",
  "description": "Verification code entry with glassmorphic inputs, status messaging, and reduced-motion support",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/forms/glass-verification-code.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { FormEvent, useMemo, useState } from \"react\";\n\nconst CODE_LENGTH = 6;\n\nexport function GlassVerificationCodeCard() {\n  const shouldReduceMotion = useReducedMotion();\n  const [code, setCode] = useState(Array<string>(CODE_LENGTH).fill(\"\"));\n  const [status, setStatus] = useState<\"idle\" | \"verified\" | \"error\">(\"idle\");\n\n  const handleChange = (value: string, index: number) => {\n    const sanitized = value.replace(/\\D/g, \"\").slice(-1);\n    setCode((prev) => {\n      const updated = [...prev];\n      updated[index] = sanitized;\n      return updated;\n    });\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const hasEmpty = code.some((digit) => digit.trim().length === 0);\n    setStatus(hasEmpty ? \"error\" : \"verified\");\n  };\n\n  const combinedCode = useMemo(() => code.join(\"\"), [code]);\n\n  const resetCode = () => {\n    setCode(Array<string>(CODE_LENGTH).fill(\"\"));\n    setStatus(\"idle\");\n  };\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 18 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{\n        duration: 0.45,\n        ease: shouldReduceMotion ? \"linear\" : [0.16, 1, 0.3, 1],\n      }}\n      className=\"group w-full max-w-md rounded-3xl overflow-hidden border border-border/60 bg-card/85 p-8 backdrop-blur-xl sm:p-10 relative\"\n      aria-labelledby=\"glass-verification-title\"\n    >\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\"\n      />\n      <div className=\"mb-8 text-center\">\n        <div className=\"mx-auto inline-flex items-center gap-2 rounded-full border border-border/60 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.28em] text-muted-foreground\">\n          Verify Email\n        </div>\n        <h1\n          id=\"glass-verification-title\"\n          className=\"mt-3 text-2xl font-semibold text-foreground sm:text-3xl\"\n        >\n          Enter verification code\n        </h1>\n        <p className=\"mt-2 text-sm text-muted-foreground\">\n          We sent a 6-digit code to your inbox. Enter it below to confirm your\n          email.\n        </p>\n      </div>\n\n      <form className=\"space-y-6\" onSubmit={handleSubmit}>\n        <div className=\"flex justify-between gap-2\">\n          {code.map((digit, index) => (\n            <Input\n              key={index}\n              type=\"text\"\n              inputMode=\"numeric\"\n              pattern=\"[0-9]*\"\n              maxLength={1}\n              value={digit}\n              onChange={(event) => handleChange(event.target.value, index)}\n              className=\"h-14 w-full rounded-2xl border-border/60 bg-background/60 text-center text-lg font-semibold\"\n              aria-label={`Verification digit ${index + 1}`}\n            />\n          ))}\n        </div>\n\n        <Button\n          type=\"submit\"\n          className=\"w-full rounded-full bg-primary px-6 py-3 text-primary-foreground shadow-[0_18px_55px_-30px_rgba(79,70,229,0.75)] transition-transform duration-300 hover:-translate-y-1\"\n        >\n          Verify code\n        </Button>\n      </form>\n\n      <motion.p\n        role=\"status\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: status === \"verified\" ? 1 : 0 }}\n        className=\"mt-6 text-center text-xs text-primary/80\"\n      >\n        Verification successful! Redirecting you now.\n      </motion.p>\n      <motion.p\n        role=\"status\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: status === \"error\" ? 1 : 0 }}\n        className=\"mt-6 text-center text-xs text-rose-400/80\"\n      >\n        Please fill every digit before verifying.\n      </motion.p>\n\n      <div className=\"mt-6 flex items-center justify-between text-xs text-muted-foreground\">\n        <button\n          type=\"button\"\n          className=\"text-primary underline-offset-4 hover:underline\"\n          onClick={resetCode}\n        >\n          Resend code\n        </button>\n        <span aria-live=\"polite\">Code: {combinedCode || \"______\"}</span>\n      </div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-verification-code-card-shadcnui.tsx"
    }
  ]
}