{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "cart-drawer", "title": "Cart Drawer", "type": "registry:block", "description": "Shopping cart drawer & full cart page view featuring free shipping progress meter, interactive line items with quantity steppers and variant tags, promo code application, order summary with tax & shipping calculation, trust badges, and empty state.", "categories": [ "commerce", "ecommerce" ], "files": [ { "path": "packages/elements-lit/src/blocks/cart-drawer/cart-drawer.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { Leaf, Lock, Minus, Plus, RotateCcw, ShieldCheck, ShoppingBag, Tag, Trash2, Truck, X } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/progress/progress'\nimport '../../components/separator/separator'\n\nexport interface CartItem {\n id: string\n name: string\n variant: string\n price: number\n originalPrice?: number\n qty: number\n inStock?: boolean\n image: string\n}\n\nconst DEFAULT_ITEMS: CartItem[] = [\n {\n id: 'item-1',\n name: 'Aero Minimalist Runner',\n variant: 'Size: 10.5 · Color: Matte Black',\n price: 120,\n originalPrice: 140,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-2',\n name: 'Technical Shell Parka',\n variant: 'Size: L · Color: Mineral Gray',\n price: 95,\n originalPrice: 110,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=300&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-3',\n name: 'Minimalist Leather Cardholder',\n variant: 'Size: Slim · Color: Saddle Brown',\n price: 70,\n originalPrice: 85,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=300&auto=format&fit=crop&q=80',\n },\n]\n\n/**\n * — the registry CartDrawer block as a web component.\n *\n * Class strings are React's CartDrawer verbatim. React state (useState) becomes\n * { state: true } fields; `items` is a property (attribute: false — set it from\n * JS, like the demo's empty-cart story does). `onCheckout` (items, total) /\n * `onContinueShopping` / `onClose` / `onUpdateQuantity` (id, qty) /\n * `onRemoveItem` (id) / `onApplyPromo` (code) / `onRemovePromo` become\n * `checkout` / `continue-shopping` / `close` / `update-quantity` /\n * `remove-item` / `apply-promo` / `remove-promo` CustomEvents (bubbles,\n * composed; payloads in `detail`). React's `promoError` state is never set by\n * the source (every non-empty code succeeds) so it is not ported.\n */\nexport class UipCartDrawer extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n variant: { reflect: true },\n currency: {},\n freeShippingThreshold: { type: Number, attribute: 'free-shipping-threshold' },\n taxRate: { type: Number, attribute: 'tax-rate' },\n initialPromoCode: { attribute: 'initial-promo-code' },\n items: { attribute: false },\n cartItems: { state: true },\n promoCodeInput: { state: true },\n appliedPromo: { state: true },\n promoDiscount: { state: true },\n promoSuccess: { state: true },\n }\n\n variant: 'drawer' | 'page' = 'drawer'\n currency = 'USD'\n freeShippingThreshold = 300\n taxRate = 0.08\n initialPromoCode = ''\n items: CartItem[] = DEFAULT_ITEMS\n\n private cartItems: CartItem[] = []\n private promoCodeInput = ''\n private appliedPromo = ''\n private promoDiscount = 0\n private promoSuccess = ''\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'cart-drawer')\n }\n\n willUpdate(changed: Map) {\n if (changed.has('items')) {\n this.cartItems = (this.items ?? []).map((item) => ({ ...item }))\n }\n if (changed.has('initialPromoCode')) {\n this.appliedPromo = this.initialPromoCode\n this.promoDiscount = this.initialPromoCode ? 20 : 0\n }\n }\n\n private get totalItemsCount() {\n return this.cartItems.reduce((acc, item) => acc + item.qty, 0)\n }\n\n private get subtotal() {\n return this.cartItems.reduce((acc, item) => acc + item.price * item.qty, 0)\n }\n\n private get isFreeShippingUnlocked() {\n return this.subtotal >= this.freeShippingThreshold && this.cartItems.length > 0\n }\n\n private get amountAwayFromFreeShipping() {\n return Math.max(0, this.freeShippingThreshold - this.subtotal)\n }\n\n private get shippingProgress() {\n if (this.cartItems.length === 0) return 0\n return Math.min(100, Math.round((this.subtotal / this.freeShippingThreshold) * 100))\n }\n\n private get shippingFee() {\n if (this.cartItems.length === 0) return 0\n return this.isFreeShippingUnlocked ? 0 : 15\n }\n\n private get discountedSubtotal() {\n return Math.max(0, this.subtotal - this.promoDiscount)\n }\n\n private get estimatedTax() {\n if (this.cartItems.length === 0) return 0\n return Number((this.discountedSubtotal * this.taxRate).toFixed(2))\n }\n\n private get total() {\n if (this.cartItems.length === 0) return 0\n return Number((this.discountedSubtotal + this.shippingFee + this.estimatedTax).toFixed(2))\n }\n\n private formatCurrency(amount: number) {\n try {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: this.currency,\n minimumFractionDigits: 2,\n }).format(amount)\n } catch {\n return `$${amount.toFixed(2)}`\n }\n }\n\n private updateQuantity(id: string, delta: number) {\n const next: CartItem[] = []\n for (const item of this.cartItems) {\n if (item.id !== id) {\n next.push(item)\n continue\n }\n const newQty = item.qty + delta\n if (newQty <= 0) {\n this.dispatchEvent(new CustomEvent('remove-item', { detail: { id }, bubbles: true, composed: true }))\n continue\n }\n this.dispatchEvent(new CustomEvent('update-quantity', { detail: { id, qty: newQty }, bubbles: true, composed: true }))\n next.push({ ...item, qty: newQty })\n }\n this.cartItems = next\n }\n\n private removeItem(id: string) {\n this.cartItems = this.cartItems.filter((item) => item.id !== id)\n this.dispatchEvent(new CustomEvent('remove-item', { detail: { id }, bubbles: true, composed: true }))\n }\n\n private handleApplyPromo() {\n this.promoSuccess = ''\n const trimmed = this.promoCodeInput.trim().toUpperCase()\n if (!trimmed) return\n if (trimmed === 'SUMMER20' || trimmed === 'SAVE20') {\n this.appliedPromo = trimmed\n this.promoDiscount = 20\n this.promoSuccess = '$20.00 coupon discount applied!'\n } else if (trimmed === 'SAVE10') {\n this.appliedPromo = trimmed\n this.promoDiscount = 10\n this.promoSuccess = '$10.00 coupon discount applied!'\n } else {\n this.appliedPromo = trimmed\n this.promoDiscount = 15\n this.promoSuccess = 'Promo code applied!'\n }\n this.promoCodeInput = ''\n this.dispatchEvent(new CustomEvent('apply-promo', { detail: { code: trimmed }, bubbles: true, composed: true }))\n }\n\n private handleRemovePromo() {\n this.appliedPromo = ''\n this.promoDiscount = 0\n this.promoSuccess = ''\n this.dispatchEvent(new CustomEvent('remove-promo', { bubbles: true, composed: true }))\n }\n\n private handleCheckout() {\n this.dispatchEvent(\n new CustomEvent('checkout', {\n detail: { items: this.cartItems.map((i) => ({ ...i })), total: this.total },\n bubbles: true,\n composed: true,\n }),\n )\n }\n\n private resetCart() {\n this.cartItems = DEFAULT_ITEMS.map((item) => ({ ...item }))\n }\n\n private renderPromoRow(placeholder: string) {\n if (this.appliedPromo) {\n return html`
\n
\n ${icon(Tag, 'tag', 'text-primary size-3.5')}\n ${this.appliedPromo}\n -${this.formatCurrency(this.promoDiscount)}\n
\n this.handleRemovePromo()}\n >\n ${icon(X, 'x', 'size-3.5')}\n \n
`\n }\n return html`
\n {\n this.promoCodeInput = (e.target as UipInput).value ?? ''\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n this.handleApplyPromo()\n }\n }}\n >\n this.handleApplyPromo()}\n >\n Apply\n \n
`\n }\n\n private renderCostRows(page: boolean) {\n return html`
\n
\n Subtotal\n ${this.formatCurrency(this.subtotal)}\n
\n ${this.promoDiscount > 0\n ? html`
\n Coupon (${this.appliedPromo})\n -${this.formatCurrency(this.promoDiscount)}\n
`\n : nothing}\n
\n Estimated Shipping\n ${this.shippingFee === 0\n ? html`Free`\n : html`${this.formatCurrency(this.shippingFee)}`}\n
\n
\n ${page ? 'Estimated Tax (8%)' : 'Estimated Tax'}\n ${this.formatCurrency(this.estimatedTax)}\n
\n \n ${page\n ? html`
\n Total\n ${this.formatCurrency(this.total)}\n
`\n : html`
\n Total\n ${this.formatCurrency(this.total)}\n
`}\n
`\n }\n\n render() {\n return html`\n
\n ${this.variant === 'drawer' ? this.renderDrawer() : this.renderPage()}\n
\n `\n }\n\n private renderDrawer() {\n return html`\n
\n
\n

Shopping Cart

\n ${this.totalItemsCount > 0\n ? html`${this.totalItemsCount}`\n : nothing}\n
\n this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))}\n >\n ${icon(X, 'x', 'size-4')}\n \n
\n\n ${this.cartItems.length > 0\n ? html`
\n
\n ${this.isFreeShippingUnlocked\n ? html`\n ${icon(Truck, 'truck', 'size-3.5')} You've unlocked Free Express Shipping!\n `\n : html`\n 🎉 You're\n ${this.formatCurrency(this.amountAwayFromFreeShipping)}\n away from Free Shipping!\n `}\n ${this.shippingProgress}%\n
\n \n
`\n : nothing}\n\n
\n ${this.cartItems.length === 0\n ? html`
\n
\n ${icon(ShoppingBag, 'shopping-bag', 'size-7 stroke-[1.5]')}\n
\n

Your cart is empty

\n

\n Looks like you haven't added any products to your cart yet. Explore our latest items!\n

\n this.resetCart()}>\n ${icon(ShoppingBag, 'shopping-bag', 'size-3.5')} Explore Products\n \n
`\n : html`
\n
    \n ${this.cartItems.map(\n (item) => html`
  • \n
    \n ${item.name}\n
    \n
    \n
    \n
    \n

    ${item.name}

    \n this.removeItem(item.id)}\n >\n ${icon(Trash2, 'trash-2', 'size-3.5')}\n \n
    \n

    ${item.variant}

    \n
    \n \n In stock\n
    \n
    \n
    \n
    \n this.updateQuantity(item.id, -1)}\n >\n ${icon(Minus, 'minus', 'size-3')}\n \n ${item.qty}\n this.updateQuantity(item.id, 1)}\n >\n ${icon(Plus, 'plus', 'size-3')}\n \n
    \n
    \n ${item.originalPrice\n ? html`${this.formatCurrency(item.originalPrice * item.qty)}`\n : nothing}\n ${this.formatCurrency(item.price * item.qty)}\n
    \n
    \n
    \n
    • `,\n )}\n
\n \n
\n ${this.renderPromoRow('Promo code (e.g. SUMMER20)')}\n ${this.promoSuccess\n ? html`

${this.promoSuccess}

`\n : nothing}\n
\n
`}\n
\n\n ${this.cartItems.length > 0\n ? html`
\n ${this.renderCostRows(false)}\n
\n this.handleCheckout()}>\n ${icon(Lock, 'lock', 'size-3.5')} Proceed to Checkout\n \n this.dispatchEvent(new CustomEvent('continue-shopping', { bubbles: true, composed: true }))}\n >\n Continue Shopping\n \n
\n
\n
\n ${icon(RotateCcw, 'rotate-ccw', 'size-3.5')}\n 30-day returns\n
\n
\n ${icon(ShieldCheck, 'shield-check', 'size-3.5')}\n 256-bit secure\n
\n
\n ${icon(Leaf, 'leaf', 'size-3.5')}\n Carbon neutral\n
\n
\n
`\n : nothing}\n `\n }\n\n private renderPage() {\n return html`
\n
\n
\n

Shopping Cart

\n

Review your selected items and calculate shipping before checkout.

\n
\n ${this.totalItemsCount > 0\n ? html`${this.totalItemsCount} items in cart`\n : nothing}\n
\n\n ${this.cartItems.length > 0\n ? html`
\n
\n
\n ${this.isFreeShippingUnlocked\n ? html`${icon(Truck, 'truck', 'text-primary size-4')}\n You've unlocked Free Express Shipping on this order!`\n : html`\n 🎉 You're\n ${this.formatCurrency(this.amountAwayFromFreeShipping)}\n away from Free Shipping!\n `}\n
\n ${this.shippingProgress}% completed\n
\n \n
`\n : nothing}\n\n ${this.cartItems.length === 0\n ? html`
\n
\n ${icon(ShoppingBag, 'shopping-bag', 'size-8 stroke-[1.5]')}\n
\n

Your cart is currently empty

\n

\n Before you proceed to checkout you must add some products to your shopping cart.\n

\n this.resetCart()}>\n ${icon(ShoppingBag, 'shopping-bag', 'size-4')} Explore Products\n \n
`\n : html`
\n
\n
\n ${this.cartItems.map(\n (item) => html`
\n
\n
\n ${item.name}\n
\n
\n

${item.name}

\n

${item.variant}

\n
\n \n In stock\n \n · ${this.formatCurrency(item.price)} each\n \n
\n
\n
\n
\n
\n this.updateQuantity(item.id, -1)}\n >\n ${icon(Minus, 'minus', 'size-3.5')}\n \n ${item.qty}\n this.updateQuantity(item.id, 1)}\n >\n ${icon(Plus, 'plus', 'size-3.5')}\n \n
\n
\n ${item.originalPrice\n ? html`${this.formatCurrency(item.originalPrice * item.qty)}`\n : nothing}\n ${this.formatCurrency(item.price * item.qty)}\n
\n this.removeItem(item.id)}\n >\n ${icon(Trash2, 'trash-2', 'size-4')}\n \n
\n
`,\n )}\n
\n\n
\n
\n
\n ${icon(RotateCcw, 'rotate-ccw', 'size-4')}\n
\n
\n

Free 30-Day Returns

\n

Hassle-free return policy

\n
\n
\n
\n
\n ${icon(ShieldCheck, 'shield-check', 'size-4')}\n
\n
\n

256-Bit SSL Security

\n

Bank-grade data encryption

\n
\n
\n
\n
\n ${icon(Leaf, 'leaf', 'size-4')}\n
\n
\n

Carbon Neutral

\n

Offset delivery emissions

\n
\n
\n
\n
\n\n
\n
\n

Order Summary

\n
\n \n ${this.renderPromoRow('Enter code (SUMMER20)')}\n
\n \n ${this.renderCostRows(true)}\n this.handleCheckout()}>\n ${icon(Lock, 'lock', 'size-4')} Proceed to Checkout\n \n this.dispatchEvent(new CustomEvent('continue-shopping', { bubbles: true, composed: true }))}\n >\n Continue Shopping\n \n
\n
\n
`}\n
`\n }\n}\n\ncustomElements.get('uip-cart-drawer') || customElements.define('uip-cart-drawer', UipCartDrawer)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-cart-drawer': UipCartDrawer\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/cart-drawer/cart-drawer.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/progress.json", "https://uipkge.dev/r/lit/separator.json" ] }