{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-order-summary-baseui",
  "type": "registry:component",
  "title": "Glass Order Summary",
  "description": "Glassmorphism order summary card with item list and checkout button (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/cards/baseui/glass-order-summary-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 { ArrowRight, CreditCard, ShoppingBag } from \"lucide-react\";\n\ninterface OrderItem {\n  id: string;\n  name: string;\n  price: number;\n  image: string;\n  quantity: number;\n  variant?: string;\n}\n\ninterface GlassOrderSummaryBaseUIProps {\n  items?: OrderItem[];\n  subtotal?: number;\n  tax?: number;\n  shipping?: number;\n  total?: number;\n  className?: string;\n}\n\nconst defaultItems: OrderItem[] = [\n  {\n    id: \"1\",\n    name: \"Premium Icon Pack\",\n    price: 29.0,\n    image:\n      \"https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=100&q=80\",\n    quantity: 1,\n    variant: \"Pro License\",\n  },\n  {\n    id: \"2\",\n    name: \"UI Design Kit\",\n    price: 49.0,\n    image:\n      \"https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=100&q=80\",\n    quantity: 1,\n    variant: \"Dark Mode\",\n  },\n];\n\nexport function GlassOrderSummaryBaseUI({\n  items = defaultItems,\n  subtotal = 78.0,\n  tax = 7.8,\n  shipping = 0,\n  total = 85.8,\n  className,\n}: GlassOrderSummaryBaseUIProps) {\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 flex items-center gap-2\">\n            <div className=\"flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary\">\n              <ShoppingBag className=\"h-4 w-4\" />\n            </div>\n            <h3 className=\"text-lg font-semibold text-foreground\">\n              Order Summary\n            </h3>\n          </div>\n\n          <div className=\"space-y-4\">\n            {items.map((item) => (\n              <motion.div\n                key={item.id}\n                initial={{ opacity: 0, x: -10 }}\n                animate={{ opacity: 1, x: 0 }}\n                className=\"flex items-center gap-4 rounded-lg p-2 transition-colors hover:bg-background/40\"\n              >\n                <div className=\"h-12 w-12 overflow-hidden rounded-md border border-border/50 bg-background/50\">\n                  <img\n                    src={item.image}\n                    alt={item.name}\n                    className=\"h-full w-full object-cover\"\n                  />\n                </div>\n                <div className=\"flex-1\">\n                  <h4 className=\"text-sm font-medium text-foreground\">\n                    {item.name}\n                  </h4>\n                  <p className=\"text-xs text-muted-foreground\">\n                    {item.variant}\n                  </p>\n                </div>\n                <div className=\"text-right\">\n                  <p className=\"text-sm font-medium text-foreground\">\n                    ${item.price.toFixed(2)}\n                  </p>\n                  <p className=\"text-xs text-muted-foreground\">\n                    x{item.quantity}\n                  </p>\n                </div>\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Separator replacement */}\n          <div className=\"my-6 h-px w-full bg-border/50\" />\n\n          <div className=\"space-y-2 text-sm\">\n            <div className=\"flex justify-between text-muted-foreground\">\n              <span>Subtotal</span>\n              <span>${subtotal.toFixed(2)}</span>\n            </div>\n            <div className=\"flex justify-between text-muted-foreground\">\n              <span>Tax</span>\n              <span>${tax.toFixed(2)}</span>\n            </div>\n            {shipping > 0 && (\n              <div className=\"flex justify-between text-muted-foreground\">\n                <span>Shipping</span>\n                <span>${shipping.toFixed(2)}</span>\n              </div>\n            )}\n            <div className=\"mt-4 flex justify-between text-base font-semibold text-foreground\">\n              <span>Total</span>\n              <span>${total.toFixed(2)}</span>\n            </div>\n          </div>\n\n          <NativeButton\n            variant=\"default\"\n            size=\"lg\"\n            glow\n            className=\"mt-6 w-full\"\n          >\n            <CreditCard className=\"h-4 w-4\" />\n            Pay Now\n            <ArrowRight className=\"h-4 w-4\" />\n          </NativeButton>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/glass-order-summary-baseui.tsx"
    }
  ]
}