{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-account-settings-card-shadcnui",
  "type": "registry:component",
  "title": "Glass Account Settings Card",
  "description": "Account management card with subscription overview and billing actions in glassmorphic style",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/forms/glass-account-settings.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { Check } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst planFeatures = [\n  \"Unlimited projects\",\n  \"Priority support\",\n  \"Early access to labs\",\n];\n\nexport function GlassAccountSettingsCard() {\n  const shouldReduceMotion = useReducedMotion();\n  const [autoRenew, setAutoRenew] = useState(true);\n  const [productUpdates, setProductUpdates] = useState(false);\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-4xl rounded-3xl overflow-hidden border border-border/60 bg-card/85 p-8 backdrop-blur-xl sm:p-12 relative\"\n      aria-labelledby=\"glass-account-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            Create Account\n          </div>\n          <h1\n            id=\"glass-account-title\"\n            className=\"mt-3 text-2xl font-semibold text-foreground sm:text-3xl\"\n          >\n            Manage your account settings and subscription\n          </h1>\n          <p className=\"mt-2 text-sm text-muted-foreground\">\n            Update personal details, control notifications, and manage your\n            current plan in one place.\n          </p>\n        </div>\n        <Badge className=\"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          Pro\n        </Badge>\n      </div>\n\n      <div className=\"grid gap-8 lg:grid-cols-[2fr_3fr]\">\n        <div className=\"space-y-6\">\n          <div className=\"rounded-2xl border border-border/60 bg-background/45 p-6 backdrop-blur\">\n            <h2 className=\"text-sm font-medium text-foreground\">Security</h2>\n            <p className=\"mb-4 text-xs text-muted-foreground\">\n              Control how you access your account.\n            </p>\n            <div className=\"space-y-4 text-sm text-muted-foreground\">\n              <div className=\"space-y-1\">\n                <Label className=\"text-sm font-medium text-foreground\">\n                  Email\n                </Label>\n                <p>alex.parker@example.com</p>\n              </div>\n              <div className=\"space-y-1\">\n                <Label className=\"text-sm font-medium text-foreground\">\n                  Two-factor authentication\n                </Label>\n                <Button\n                  variant=\"outline\"\n                  className=\"rounded-full border-border/60 px-4 py-2 text-xs\"\n                >\n                  Manage 2FA\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"rounded-2xl border border-border/60 bg-background/45 p-6 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              Decide what updates reach your inbox.\n            </p>\n            <div className=\"space-y-4 text-sm text-muted-foreground\">\n              <label className=\"flex items-center justify-between gap-3\">\n                Auto-renew subscription\n                <Switch checked={autoRenew} onCheckedChange={setAutoRenew} />\n              </label>\n              <label className=\"flex items-center justify-between gap-3\">\n                Product update emails\n                <Switch\n                  checked={productUpdates}\n                  onCheckedChange={setProductUpdates}\n                />\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"space-y-6\">\n          <div className=\"rounded-2xl border border-border/60 bg-background/45 p-6 backdrop-blur\">\n            <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n              <div>\n                <h2 className=\"text-sm font-medium text-foreground\">\n                  Current plan\n                </h2>\n                <p className=\"text-xs text-muted-foreground\">\n                  Workspace Pro - billed yearly\n                </p>\n              </div>\n              <div className=\"text-right\">\n                <span className=\"text-2xl font-semibold text-foreground\">\n                  $24\n                </span>\n                <p className=\"text-xs text-muted-foreground\">\n                  per user / month\n                </p>\n              </div>\n            </div>\n\n            <div className=\"mt-5 space-y-3 text-sm text-muted-foreground\">\n              {planFeatures.map((feature) => (\n                <p key={feature} className=\"flex items-center gap-2\">\n                  <span className=\"flex h-5 w-5 items-center justify-center rounded-full border border-border/60 bg-primary/10 text-primary\">\n                    <Check className=\"h-3 w-3\" aria-hidden />\n                  </span>\n                  {feature}\n                </p>\n              ))}\n            </div>\n\n            <div className=\"mt-6 flex flex-col gap-3 sm:flex-row\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                className=\"flex-1 rounded-full border-border/60 bg-white/5 px-6 py-3 text-sm text-muted-foreground hover:text-primary\"\n              >\n                Cancel subscription\n              </Button>\n              <Button\n                type=\"button\"\n                className=\"flex-1 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                Manage plan\n              </Button>\n            </div>\n          </div>\n\n          <div className=\"rounded-2xl border border-border/60 bg-background/45 p-6 backdrop-blur\">\n            <h2 className=\"text-sm font-medium text-foreground\">Billing</h2>\n            <p className=\"mb-4 text-xs text-muted-foreground\">\n              Download invoices or update payment details.\n            </p>\n            <div className=\"flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row\">\n              <Button\n                variant=\"outline\"\n                className=\"flex-1 rounded-full border-border/60 px-6 py-3 text-sm text-muted-foreground hover:text-primary\"\n              >\n                View invoices\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"flex-1 rounded-full border-border/60 px-6 py-3 text-sm text-muted-foreground hover:text-primary\"\n              >\n                Update payment method\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-account-settings-card-shadcnui.tsx"
    }
  ]
}