{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-checkout-card-baseui",
  "type": "registry:component",
  "title": "Glass Checkout Card",
  "description": "Glassmorphism checkout card with payment method selector and input fields (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/cards/baseui/glass-checkout-card-baseui.tsx",
      "content": "\"use client\";\n\nimport { NativeButton } from \"../../native/baseui/native-button-baseui\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { Calendar, CreditCard, Lock } from \"lucide-react\";\nimport { useState } from \"react\";\n\ninterface GlassCheckoutCardBaseUIProps {\n  amount?: number;\n  className?: string;\n}\n\nexport function GlassCheckoutCardBaseUI({\n  amount = 85.8,\n  className,\n}: GlassCheckoutCardBaseUIProps) {\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 replacement */}\n      <div className=\"group relative overflow-hidden rounded-2xl border border-border/50 bg-card/30 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 replacement */}\n              <label\n                htmlFor=\"cardNumber\"\n                className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                Card Number\n              </label>\n              <div className=\"relative\">\n                {/* Input replacement */}\n                <input\n                  id=\"cardNumber\"\n                  type=\"text\"\n                  placeholder=\"0000 0000 0000 0000\"\n                  className=\"flex h-10 w-full rounded-md border border-border/50 bg-background/50 px-3 py-2 pl-10 text-sm backdrop-blur-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\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\n                  htmlFor=\"expiry\"\n                  className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                >\n                  Expiry Date\n                </label>\n                <div className=\"relative\">\n                  <input\n                    id=\"expiry\"\n                    type=\"text\"\n                    placeholder=\"MM/YY\"\n                    className=\"flex h-10 w-full rounded-md border border-border/50 bg-background/50 px-3 py-2 pl-10 text-sm backdrop-blur-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\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\n                  htmlFor=\"cvc\"\n                  className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                >\n                  CVC\n                </label>\n                <div className=\"relative\">\n                  <input\n                    id=\"cvc\"\n                    type=\"text\"\n                    placeholder=\"123\"\n                    className=\"flex h-10 w-full rounded-md border border-border/50 bg-background/50 px-3 py-2 pl-10 text-sm backdrop-blur-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\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\n                htmlFor=\"name\"\n                className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                Cardholder Name\n              </label>\n              <input\n                id=\"name\"\n                type=\"text\"\n                placeholder=\"John Doe\"\n                className=\"flex h-10 w-full rounded-md border border-border/50 bg-background/50 px-3 py-2 text-sm backdrop-blur-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n              />\n            </div>\n          </div>\n\n          <NativeButton\n            variant=\"default\"\n            size=\"lg\"\n            glow\n            className=\"mt-6 w-full\"\n          >\n            Pay ${amount.toFixed(2)}\n          </NativeButton>\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      </div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-checkout-card-baseui.tsx"
    }
  ]
}