50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2542,'use client' import { useState } from 'react' import { Trash2, Minus, Plus, ShoppingBag, Package, Shield, CreditCard, Store, MoveRight } from 'lucide-react' import { Button } from '@/components/ui/button' import { Separator } from '@/components/ui/separator' import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card' import { ShoppingCart1SpinningCounter } from './shopping-cart-1-spinning-counter' import { cn } from '@/lib/utils' import { cartData, type CartItem } from "@/components/data/shopping-cart-1-data" export function ShoppingCart1() { const [items, setItems] = useState(cartData.items) const [isRemoving, setIsRemoving] = useState(null) const updateQuantity = (id: string, increment: boolean) => { setItems(currentItems => currentItems.map(item => item.id === id ? { ...item, quantity: Math.max(1, item.quantity + (increment ? 1 : -1)) } : item, ), ) } const removeItem = (id: string) => { setIsRemoving(id) setTimeout(() => { setItems(currentItems => currentItems.filter(item => item.id !== id)) setIsRemoving(null) }, 300) } const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0) const savings = items.reduce((sum, item) => sum + (item.originalPrice - item.price) * item.quantity, 0) const shipping = subtotal >= cartData.shipping.freeThreshold ? 0 : cartData.shipping.cost const total = subtotal + shipping return (

Your Shopping Cart

{items.length} {items.length === 1 ? 'item' : 'items'} in your cart •{' '} ${subtotal.toFixed(2)}

{/* Cart Items */} {items.length === 0 ? (

Your cart is empty

Add some items to get started

) : ( items.map(item => (

{item.name}

{item.color} {item.size && `• ${item.size}`}

{item.quantity}

${(item.price * item.quantity).toFixed(2)}

{item.originalPrice > item.price && (

${item.originalPrice.toFixed(2)}

)}

Estimated delivery: {item.estimatedDelivery}

)) )}

{/* Order Summary */}

Order Summary

Subtotal ${subtotal.toFixed(2)}

Shipping {shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`}

{savings > 0 && (

You Save -${savings.toFixed(2)}

)}

Total

including VAT, if applicable

Secure payment with SSL encryption

Secure Checkout

Your payment information is encrypted and secure.

) } export default ShoppingCart1 53:T1429,'use client' import { useEffect, useRef } from 'react' import { cn } from '@/lib/utils' /** * Spinning counter: each digit is a clipped vertical reel of 0-9 cells that * spins forward and lands on the target digit. Adapted from Transitions.dev * "Spinning counter" (26-spinning-counter.md), re-tuned for cart totals: * one loop instead of several, and a snappier duration so rapid +/- clicks * don't queue up sluggish animations. The spec's directional SVG blur is * approximated here with a CSS `filter: blur()` transition for simplicity. * * Non-digit characters (currency symbol, decimal point, thousands separator) * render as static text so only the digits spin. */ const CELL_SIZE = 20 // px const DURATION = 450 // ms const STAGGER = 60 // ms per column const SPINS = 1 // extra full loops before landing const SPIN_BLUR = 2 // px const REEL_DIGITS = Array.from({ length: (SPINS + 1) * 10 }, (_, i) => i % 10) type ShoppingCart1SpinningCounterProps = { value: number /** Fixed decimal places to format the value with, e.g. 2 for currency. */ decimals?: number /** Static text rendered before the formatted value, e.g. '$'. */ prefix?: string className?: string digitClassName?: string } export function ShoppingCart1SpinningCounter({ value, decimals = 0, prefix, className, digitClassName }: ShoppingCart1SpinningCounterProps) { const safeValue = Math.max(0, value) const formatted = safeValue.toFixed(decimals) const chars = formatted.split('') const containerRef = useRef(null) const isFirstRender = useRef(true) useEffect(() => { const container = containerRef.current if (!container) return const strips = Array.from(container.querySelectorAll('[data-reel-strip]')) const timeouts: number[] = [] const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches strips.forEach((strip, index) => { const digit = Number(strip.dataset.digit) const delay = (strips.length - 1 - index) * STAGGER if (isFirstRender.current || !strip.dataset.initialized || prefersReducedMotion) { strip.style.transition = 'none' strip.style.transform = `translateY(-${digit * CELL_SIZE}px)` strip.style.filter = 'blur(0px)' strip.dataset.initialized = 'true' void strip.offsetHeight return } const landingIndex = SPINS * 10 + digit strip.style.transition = `transform ${DURATION}ms cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms, filter ${DURATION}ms ease-out ${delay}ms` strip.style.transform = `translateY(-${landingIndex * CELL_SIZE}px)` strip.style.filter = `blur(${SPIN_BLUR}px)` const settleTimeout = window.setTimeout(() => { strip.style.filter = 'blur(0px)' }, delay + 30) const resetTimeout = window.setTimeout(() => { strip.style.transition = 'none' strip.style.transform = `translateY(-${digit * CELL_SIZE}px)` void strip.offsetHeight }, delay + DURATION + 30) timeouts.push(settleTimeout, resetTimeout) }) isFirstRender.current = false return () => { timeouts.forEach(window.clearTimeout) } }, [formatted]) return ( {prefix}{formatted} {prefix ? ( {prefix} ) : null} {chars.map((char, index) => { if (!/\d/.test(char)) { return ( {char} ) } return ( {REEL_DIGITS.map((cellDigit, cellIndex) => ( {cellDigit} ))} ) })} ) } export default ShoppingCart1SpinningCounter 54:T5eb,export interface CartItem { id: string name: string color: string size: string price: number originalPrice: number quantity: number image: string estimatedDelivery: string } export interface CartData { items: CartItem[] shipping: { freeThreshold: number message: string cost: number } } export const cartData: CartData = { items: [ { id: '1', name: 'Premium Wool Cardigan', color: 'Sage Green', size: 'M', price: 129.99, originalPrice: 159.99, quantity: 1, image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/premium-wool-sweater.800w.b234d4.avif', estimatedDelivery: '2-4 business days', }, { id: '2', name: 'Designer Leather Bag', color: 'Vintage Brown', size: 'One Size', price: 299.99, originalPrice: 349.99, quantity: 1, image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/designer-leather-bag.800w.b43230.avif', estimatedDelivery: '3-5 business days', }, { id: '3', name: 'Smart Watch Pro', color: 'Space Grey', size: 'One Size', price: 199.99, originalPrice: 249.99, quantity: 1, image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/accessories.800w.900f12.avif', estimatedDelivery: '1-3 business days', }, ], shipping: { freeThreshold: 500, message: 'Free shipping on orders over $500', cost: 15.99, }, }4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@shadcnstore","registryDependencies":["button","card","separator"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"storage/app/registry-sources/e-commerce/shopping-carts/shopping-cart-1/page.tsx","content":"import { ShoppingCart1 } from \"@/components/blocks/e-commerce/shopping-carts/shopping-cart-1/components/shopping-cart-1\"\n\nexport default function Page() {\n return (\n

\n \n

\n )\n}\n","type":"registry:page","target":"app/shopping-cart-1/page.tsx"},{"path":"storage/app/registry-sources/e-commerce/shopping-carts/shopping-cart-1/shopping-cart-1.tsx","content":"$52","type":"registry:component","target":"@components/shopping-cart-1.tsx"},{"path":"storage/app/registry-sources/e-commerce/shopping-carts/shopping-cart-1/shopping-cart-1-spinning-counter.tsx","content":"$53","type":"registry:component","target":"@components/shopping-cart-1-spinning-counter.tsx"},{"path":"storage/app/registry-sources/e-commerce/shopping-carts/shopping-cart-1/shopping-cart-1-data.ts","content":"$54","type":"registry:lib","target":"@components/data/shopping-cart-1-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]