{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-sign-up-card-shadcnui",
  "type": "registry:component",
  "title": "Glass Sign-Up Card",
  "description": "Glassmorphic sign-up flow with social providers, email fields, and terms checkbox",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/forms/glass-sign-up.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { Chrome, Github, Twitter } from \"lucide-react\";\nimport { FormEvent, useState } from \"react\";\n\nconst socialProviders = [\n  { name: \"Google\", icon: Chrome },\n  { name: \"Twitter\", icon: Twitter },\n  { name: \"GitHub\", icon: Github },\n];\n\nexport function GlassSignUpCard() {\n  const shouldReduceMotion = useReducedMotion();\n  const [acceptedTerms, setAcceptedTerms] = useState(false);\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\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 rounded-3xl overflow-hidden border border-border/60 bg-card/85 p-8 backdrop-blur-xl sm:p-12 relative\"\n      aria-labelledby=\"glass-sign-up-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          Sign Up\n        </div>\n        <h1\n          id=\"glass-sign-up-title\"\n          className=\"mt-3 text-2xl font-semibold text-foreground sm:text-3xl\"\n        >\n          Create your account\n        </h1>\n        <p className=\"mt-2 text-sm text-muted-foreground\">\n          Start building expressive interfaces. Choose a provider or sign up\n          with email.\n        </p>\n      </div>\n\n      <div className=\"mb-8 grid gap-3 sm:grid-cols-3\">\n        {socialProviders.map((provider) => (\n          <Button\n            key={provider.name}\n            variant=\"outline\"\n            className=\"flex items-center justify-center gap-2 rounded-full border-border/60 bg-card/70 text-sm text-foreground transition-transform duration-300 hover:-translate-y-1 hover:text-primary\"\n            aria-label={`Continue with ${provider.name}`}\n          >\n            <provider.icon className=\"h-4 w-4\" aria-hidden />\n            <span className=\"hidden sm:inline\">{provider.name}</span>\n          </Button>\n        ))}\n      </div>\n\n      <div className=\"mb-6 flex items-center gap-3\">\n        <div className=\"h-px flex-1 bg-border/70\" />\n        <span className=\"text-xs uppercase tracking-[0.34em] text-muted-foreground\">\n          or\n        </span>\n        <div className=\"h-px flex-1 bg-border/70\" />\n      </div>\n\n      <form className=\"grid gap-6 sm:grid-cols-2\" onSubmit={handleSubmit}>\n        <div className=\"space-y-2 sm:col-span-1\">\n          <Label htmlFor=\"first-name\">First name</Label>\n          <Input\n            id=\"first-name\"\n            name=\"firstName\"\n            placeholder=\"Alex\"\n            autoComplete=\"given-name\"\n            required\n            className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n          />\n        </div>\n        <div className=\"space-y-2 sm:col-span-1\">\n          <Label htmlFor=\"last-name\">Last name</Label>\n          <Input\n            id=\"last-name\"\n            name=\"lastName\"\n            placeholder=\"Johnson\"\n            autoComplete=\"family-name\"\n            required\n            className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n          />\n        </div>\n        <div className=\"space-y-2 sm:col-span-2\">\n          <Label htmlFor=\"sign-up-email\">Email address</Label>\n          <Input\n            id=\"sign-up-email\"\n            type=\"email\"\n            placeholder=\"you@example.com\"\n            autoComplete=\"email\"\n            required\n            className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n          />\n        </div>\n        <div className=\"space-y-2 sm:col-span-1\">\n          <Label htmlFor=\"sign-up-password\">Password</Label>\n          <Input\n            id=\"sign-up-password\"\n            type=\"password\"\n            placeholder=\"Create a password\"\n            autoComplete=\"new-password\"\n            required\n            className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n          />\n        </div>\n        <div className=\"space-y-2 sm:col-span-1\">\n          <Label htmlFor=\"sign-up-confirm-password\">Confirm password</Label>\n          <Input\n            id=\"sign-up-confirm-password\"\n            type=\"password\"\n            placeholder=\"Repeat password\"\n            autoComplete=\"new-password\"\n            required\n            className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n          />\n        </div>\n\n        <div className=\"sm:col-span-2\">\n          <label className=\"flex items-start gap-3 text-sm text-muted-foreground\">\n            <Checkbox\n              id=\"sign-up-terms\"\n              checked={acceptedTerms}\n              onCheckedChange={(checked) => setAcceptedTerms(Boolean(checked))}\n            />\n            <span>\n              I agree to the{\" \"}\n              <button\n                type=\"button\"\n                className=\"text-primary underline-offset-4 hover:underline\"\n              >\n                terms of service\n              </button>{\" \"}\n              and{\" \"}\n              <button\n                type=\"button\"\n                className=\"text-primary underline-offset-4 hover:underline\"\n              >\n                privacy policy\n              </button>\n              .\n            </span>\n          </label>\n        </div>\n\n        <div className=\"sm:col-span-2\">\n          <Button\n            type=\"submit\"\n            disabled={!acceptedTerms}\n            className=\"w-full rounded-full bg-primary px-6 py-3 text-primary-foreground shadow-[0_20px_60px_-30px_rgba(79,70,229,0.75)] transition-transform duration-300 hover:-translate-y-1 disabled:cursor-not-allowed disabled:opacity-60\"\n          >\n            Create account\n          </Button>\n        </div>\n      </form>\n\n      <p className=\"mt-6 text-center text-xs text-muted-foreground\">\n        Already have an account?{\" \"}\n        <button\n          type=\"button\"\n          className=\"text-primary underline-offset-4 hover:underline\"\n        >\n          Sign in\n        </button>\n      </p>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-sign-up-card-shadcnui.tsx"
    }
  ]
}