{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-profile-settings-card-shadcnui",
  "type": "registry:component",
  "title": "Glass Profile Settings Card",
  "description": "Glassmorphic profile settings form with avatar upload, bio, and notification preferences",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/forms/glass-profile-settings.tsx",
      "content": "\"use client\";\n\nimport { Avatar } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { UploadCloud } from \"lucide-react\";\nimport { FormEvent, useState } from \"react\";\n\nexport function GlassProfileSettingsCard() {\n  const shouldReduceMotion = useReducedMotion();\n  const [notifications, setNotifications] = useState(true);\n  const [newsletter, setNewsletter] = useState(false);\n  const [bio, setBio] = useState(\n    \"Designing expressive interfaces that feel alive.\"\n  );\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n  };\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 16 }}\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-3xl rounded-3xl overflow-hidden border border-border/60 bg-card/85 p-8 backdrop-blur-xl sm:p-12 relative\"\n      aria-labelledby=\"glass-profile-settings-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-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <div className=\"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            Profile\n          </div>\n          <h1\n            id=\"glass-profile-settings-title\"\n            className=\"mt-3 text-2xl font-semibold text-foreground sm:text-3xl\"\n          >\n            Profile settings\n          </h1>\n          <p className=\"mt-2 text-sm text-muted-foreground\">\n            Update your avatar, personal details, and notification preferences.\n          </p>\n        </div>\n        <Badge className=\"group gap-2 rounded-full border border-border/60 bg-white/5 px-4 py-2 text-muted-foreground transition-colors duration-300 hover:border-primary/60 hover:bg-primary/15 hover:text-primary\">\n          <span className=\"h-2 w-2 rounded-full bg-primary\" aria-hidden />\n          Auto-save enabled\n        </Badge>\n      </div>\n\n      <form className=\"grid gap-8 sm:grid-cols-5\" onSubmit={handleSubmit}>\n        <div className=\"sm:col-span-2\">\n          <div className=\"flex flex-col items-center gap-4 rounded-2xl border border-border/60 bg-background/40 p-6 backdrop-blur\">\n            <Avatar className=\"h-24 w-24 border border-border/60\">\n              <span className=\"flex h-full w-full items-center justify-center rounded-full bg-primary/20 text-lg font-semibold text-primary\">\n                AP\n              </span>\n            </Avatar>\n            <div className=\"text-center\">\n              <p className=\"text-sm font-medium text-foreground\">Alex Parker</p>\n              <p className=\"text-xs text-muted-foreground\">\n                Lead Product Designer\n              </p>\n            </div>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              className=\"rounded-full border-border/60 bg-white/5 px-4 py-2 text-sm text-foreground\"\n            >\n              <UploadCloud className=\"mr-2 h-4 w-4\" />\n              Update avatar\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"space-y-6 sm:col-span-3\">\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"profile-first-name\">First name</Label>\n              <Input\n                id=\"profile-first-name\"\n                defaultValue=\"Alex\"\n                className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n                autoComplete=\"given-name\"\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"profile-last-name\">Last name</Label>\n              <Input\n                id=\"profile-last-name\"\n                defaultValue=\"Parker\"\n                className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n                autoComplete=\"family-name\"\n              />\n            </div>\n          </div>\n\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"profile-email\">Email address</Label>\n              <Input\n                id=\"profile-email\"\n                type=\"email\"\n                defaultValue=\"alex.parker@example.com\"\n                className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n                autoComplete=\"email\"\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"profile-phone\">Phone number</Label>\n              <Input\n                id=\"profile-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n                className=\"h-11 rounded-2xl border-border/60 bg-background/60 px-4\"\n                autoComplete=\"tel\"\n              />\n            </div>\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"profile-bio\">Bio</Label>\n            <Textarea\n              id=\"profile-bio\"\n              value={bio}\n              onChange={(event) => setBio(event.target.value)}\n              rows={4}\n              className=\"rounded-2xl border-border/60 bg-background/60 px-4 py-3 text-sm\"\n              placeholder=\"Tell us about your role, interests, or current focus.\"\n            />\n            <p className=\"text-right text-xs text-muted-foreground\">\n              {bio.length}/160 characters\n            </p>\n          </div>\n\n          <div className=\"rounded-2xl border border-border/60 bg-background/40 p-5 backdrop-blur\">\n            <h2 className=\"text-sm font-medium text-foreground\">\n              Notifications\n            </h2>\n            <p className=\"mb-4 text-xs text-muted-foreground\">\n              Choose the updates you want to receive about your workspace.\n            </p>\n            <div className=\"space-y-3\">\n              <label className=\"flex items-center justify-between gap-3 text-sm text-muted-foreground\">\n                Enable notifications\n                <Switch\n                  checked={notifications}\n                  onCheckedChange={setNotifications}\n                />\n              </label>\n              <label className=\"flex items-center justify-between gap-3 text-sm text-muted-foreground\">\n                Subscribe to newsletter\n                <Switch checked={newsletter} onCheckedChange={setNewsletter} />\n              </label>\n            </div>\n          </div>\n\n          <div className=\"flex flex-col gap-3 sm:flex-row sm:justify-end\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              className=\"rounded-full border-border/60 bg-white/5 px-6 py-3 text-sm text-muted-foreground hover:text-primary\"\n              onClick={() => window.location.reload()}\n            >\n              Reset changes\n            </Button>\n            <Button\n              type=\"submit\"\n              className=\"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\"\n            >\n              Save settings\n            </Button>\n          </div>\n        </div>\n      </form>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-profile-settings-card-shadcnui.tsx"
    }
  ]
}