{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-checkout-card-shadcnui",
  "type": "registry:component",
  "title": "Glass Checkout Card",
  "description": "Glassmorphism checkout card with payment method selector and input fields",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/cards/shadcnui/glass-checkout-card.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { Calendar, CreditCard, Lock } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface GlassCheckoutCardProps {\n  amount?: number;\n  className?: string;\n}\n\nexport function GlassCheckoutCard({\n  amount = 85.8,\n  className,\n}: GlassCheckoutCardProps) {\n  const [paymentMethod, setPaymentMethod] = useState(\"card\");\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4 }}\n      className={cn(\"w-full max-w-[400px]\", className)}\n    >\n      <Card className=\"group relative overflow-hidden rounded-2xl border-border/50 bg-card/80 backdrop-blur-md transition-all duration-300 hover:border-primary/50 hover:shadow-xl hover:shadow-primary/10\">\n        <div className=\"p-6\">\n          <div className=\"mb-6\">\n            <h3 className=\"text-lg font-semibold text-foreground\">\n              Payment Details\n            </h3>\n            <p className=\"text-sm text-muted-foreground\">\n              Complete your purchase securely\n            </p>\n          </div>\n\n          {/* Payment Methods */}\n          <div className=\"mb-6 grid grid-cols-3 gap-2\">\n            {[\"card\", \"paypal\", \"apple\"].map((method) => (\n              <button\n                key={method}\n                onClick={() => setPaymentMethod(method)}\n                className={cn(\n                  \"flex h-12 items-center justify-center rounded-lg border border-border/50 bg-background/50 transition-all hover:bg-background/80\",\n                  paymentMethod === method &&\n                    \"border-primary bg-primary/10 text-primary\"\n                )}\n              >\n                {method === \"card\" && <CreditCard className=\"h-5 w-5\" />}\n                {method === \"paypal\" && (\n                  <span className=\"font-bold italic\">Pay</span>\n                )}\n                {method === \"apple\" && (\n                  <span className=\"font-semibold\">Pay</span>\n                )}\n              </button>\n            ))}\n          </div>\n\n          <div className=\"space-y-4\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"cardNumber\">Card Number</Label>\n              <div className=\"relative\">\n                <Input\n                  id=\"cardNumber\"\n                  placeholder=\"0000 0000 0000 0000\"\n                  className=\"border-border/50 bg-background/50 pl-10 backdrop-blur-sm focus:border-primary/50 focus:bg-background/80\"\n                />\n                <CreditCard className=\"absolute left-3 top-2.5 h-4 w-4 text-muted-foreground\" />\n              </div>\n            </div>\n\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"expiry\">Expiry Date</Label>\n                <div className=\"relative\">\n                  <Input\n                    id=\"expiry\"\n                    placeholder=\"MM/YY\"\n                    className=\"border-border/50 bg-background/50 pl-10 backdrop-blur-sm focus:border-primary/50 focus:bg-background/80\"\n                  />\n                  <Calendar className=\"absolute left-3 top-2.5 h-4 w-4 text-muted-foreground\" />\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"cvc\">CVC</Label>\n                <div className=\"relative\">\n                  <Input\n                    id=\"cvc\"\n                    placeholder=\"123\"\n                    className=\"border-border/50 bg-background/50 pl-10 backdrop-blur-sm focus:border-primary/50 focus:bg-background/80\"\n                  />\n                  <Lock className=\"absolute left-3 top-2.5 h-4 w-4 text-muted-foreground\" />\n                </div>\n              </div>\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"name\">Cardholder Name</Label>\n              <Input\n                id=\"name\"\n                placeholder=\"John Doe\"\n                className=\"border-border/50 bg-background/50 backdrop-blur-sm focus:border-primary/50 focus:bg-background/80\"\n              />\n            </div>\n          </div>\n\n          <Button className=\"mt-6 w-full bg-primary text-primary-foreground shadow-lg shadow-primary/20 transition-all hover:shadow-primary/40\">\n            Pay ${amount.toFixed(2)}\n          </Button>\n\n          <p className=\"mt-4 text-center text-xs text-muted-foreground\">\n            <Lock className=\"inline-block h-3 w-3 mr-1\" />\n            Payments are secure and encrypted\n          </p>\n        </div>\n      </Card>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-checkout-card-shadcnui.tsx"
    }
  ]
}