@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/shopping-carts/shopping-cart-1.tsx

@@ -0,0 +1,291 @@
+import { Minus, MoveRight, Package, Plus, Shield, ShoppingBag, Store, Trash2, CreditCard } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Separator } from '../../../ui/separator'
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '../../../ui/card'
+import { ShoppingCart1SpinningCounter } from './shopping-cart-1-spinning-counter'
+import { cn } from '../../../lib/utils'
+
+export interface ShoppingCart1CartItem {
+  id: string
+  name: string
+  color: string
+  size: string
+  price: number
+  originalPrice: number
+  quantity: number
+  image: string
+  estimatedDelivery: string
+}
+
+export interface ShoppingCart1Shipping {
+  freeThreshold?: number
+  cost?: number
+}
+
+export interface ShoppingCart1Props {
+  items: ShoppingCart1CartItem[]
+  shipping?: ShoppingCart1Shipping
+  title?: string
+  itemCountLabel?: (count: number) => string
+  emptyTitle?: string
+  emptyDescription?: string
+  continueShoppingLabel?: string
+  removeItemLabel?: (name: string) => string
+  decreaseQuantityLabel?: (name: string) => string
+  increaseQuantityLabel?: (name: string) => string
+  estimatedDeliveryLabel?: string
+  orderSummaryLabel?: string
+  subtotalLabel?: string
+  shippingLabel?: string
+  freeShippingLabel?: string
+  youSaveLabel?: string
+  totalLabel?: string
+  taxNoteLabel?: string
+  checkoutLabel?: string
+  securePaymentLabel?: string
+  secureCheckoutLabel?: string
+  secureCheckoutDescription?: string
+  onUpdateQuantity?: (id: string, quantity: number) => void
+  onRemoveItem?: (id: string) => void
+  onCheckout?: () => void
+  onContinueShopping?: () => void
+}
+
+export function ShoppingCart1({
+  items,
+  shipping,
+  title = 'Tu carrito de compras',
+  itemCountLabel = (count) => `${count} ${count === 1 ? 'artículo' : 'artículos'} en tu carrito`,
+  emptyTitle = 'Tu carrito está vacío',
+  emptyDescription = 'Agrega productos para empezar',
+  continueShoppingLabel = 'Seguir comprando',
+  removeItemLabel = (name) => `Quitar ${name}`,
+  decreaseQuantityLabel = (name) => `Disminuir cantidad de ${name}`,
+  increaseQuantityLabel = (name) => `Aumentar cantidad de ${name}`,
+  estimatedDeliveryLabel = 'Entrega estimada',
+  orderSummaryLabel = 'Resumen del pedido',
+  subtotalLabel = 'Subtotal',
+  shippingLabel = 'Envío',
+  freeShippingLabel = 'Gratis',
+  youSaveLabel = 'Ahorras',
+  totalLabel = 'Total',
+  taxNoteLabel = 'incluye IVA si corresponde',
+  checkoutLabel = 'Finalizar compra',
+  securePaymentLabel = 'Pago seguro con cifrado SSL',
+  secureCheckoutLabel = 'Pago seguro',
+  secureCheckoutDescription = 'Tu información de pago está cifrada y protegida.',
+  onUpdateQuantity,
+  onRemoveItem,
+  onCheckout,
+  onContinueShopping,
+}: ShoppingCart1Props) {
+  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 freeThreshold = shipping?.freeThreshold ?? Infinity
+  const shippingCost = shipping?.cost ?? 0
+  const shippingTotal = subtotal >= freeThreshold ? 0 : shippingCost
+  const total = subtotal + shippingTotal
+
+  const changeQuantity = (id: string, quantity: number, delta: number) => {
+    onUpdateQuantity?.(id, Math.max(1, quantity + delta))
+  }
+
+  return (
+    <div className='mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8'>
+      <div className='mb-8 flex flex-col gap-2 text-center'>
+        <h1 className='text-3xl font-bold tracking-tight sm:text-4xl'>{title}</h1>
+        <p className='text-muted-foreground'>
+          {itemCountLabel(items.length)} •{' '}
+          <span className='text-foreground font-semibold'>${subtotal.toFixed(2)}</span>
+        </p>
+      </div>
+
+      <div className='flex flex-col gap-8 lg:flex-row'>
+        <div className='flex flex-1 flex-col gap-6'>
+          {items.length === 0 ? (
+            <Card className='border-dashed'>
+              <CardContent className='flex flex-col items-center justify-center py-12 text-center'>
+                <ShoppingBag className='text-muted-foreground/50 mb-4 size-12' />
+                <h3 className='text-lg font-medium'>{emptyTitle}</h3>
+                <p className='text-muted-foreground mt-1 text-sm'>{emptyDescription}</p>
+                <Button
+                  className='mt-4 h-9 cursor-pointer px-4 py-2'
+                  variant='outline'
+                  onClick={onContinueShopping}
+                >
+                  {continueShoppingLabel}
+                </Button>
+              </CardContent>
+            </Card>
+          ) : (
+            items.map(item => (
+              <Card key={item.id} className='gap-0 overflow-hidden py-0'>
+                <div className='flex flex-col sm:flex-row'>
+                  <div className='relative h-auto w-full sm:w-40'>
+                    <img
+                      src={item.image || undefined}
+                      alt={item.name}
+                      className='h-36 w-full object-cover object-center'
+                    />
+                  </div>
+
+                  <div className='flex-1 p-4'>
+                    <div className='flex items-start justify-between'>
+                      <div>
+                        <h3 className='text-foreground text-lg font-medium'>{item.name}</h3>
+                        <p className='text-muted-foreground mt-1 text-sm'>
+                          {item.color} {item.size ? `• ${item.size}` : ''}
+                        </p>
+                      </div>
+                      <Button
+                        variant='ghost'
+                        size='icon'
+                        className='size-8 cursor-pointer text-muted-foreground hover:bg-destructive/10 hover:text-destructive'
+                        onClick={onRemoveItem ? () => onRemoveItem(item.id) : undefined}
+                        aria-label={removeItemLabel(item.name)}
+                      >
+                        <Trash2 />
+                      </Button>
+                    </div>
+
+                    <div className='mt-4 flex items-center justify-between'>
+                      <div className='flex items-center gap-2'>
+                        <Button
+                          variant='outline'
+                          size='icon'
+                          className='size-8 cursor-pointer'
+                          onClick={
+                            onUpdateQuantity
+                              ? () => changeQuantity(item.id, item.quantity, -1)
+                              : undefined
+                          }
+                          disabled={item.quantity <= 1}
+                          aria-label={decreaseQuantityLabel(item.name)}
+                        >
+                          <Minus />
+                        </Button>
+                        <span className='w-8 text-center text-sm font-medium'>{item.quantity}</span>
+                        <Button
+                          variant='outline'
+                          size='icon'
+                          className='size-8 cursor-pointer'
+                          onClick={
+                            onUpdateQuantity
+                              ? () => changeQuantity(item.id, item.quantity, 1)
+                              : undefined
+                          }
+                          aria-label={increaseQuantityLabel(item.name)}
+                        >
+                          <Plus />
+                        </Button>
+                      </div>
+
+                      <div className='text-end'>
+                        <p className='text-lg font-semibold'>${(item.price * item.quantity).toFixed(2)}</p>
+                        {item.originalPrice > item.price && (
+                          <p className='text-muted-foreground text-xs line-through'>
+                            ${item.originalPrice.toFixed(2)}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <CardFooter className='bg-muted/20 border-t px-4 !py-2'>
+                  <div className='text-muted-foreground flex items-center text-sm'>
+                    <Package className='me-2 size-4' />
+                    <span>{estimatedDeliveryLabel}: {item.estimatedDelivery}</span>
+                  </div>
+                </CardFooter>
+              </Card>
+            ))
+          )}
+        </div>
+
+        <div className='flex w-full flex-col gap-4 lg:w-96'>
+          <Card className='sticky top-4 gap-0'>
+            <CardHeader className='pb-4'>
+              <CardTitle className='text-xl'>{orderSummaryLabel}</CardTitle>
+            </CardHeader>
+            <CardContent className='flex flex-col gap-4'>
+              <div className='flex flex-col gap-3'>
+                <div className='flex justify-between text-sm'>
+                  <span className='text-muted-foreground'>{subtotalLabel}</span>
+                  <span>${subtotal.toFixed(2)}</span>
+                </div>
+                <div className='flex justify-between text-sm'>
+                  <span className='text-muted-foreground'>{shippingLabel}</span>
+                  <span className={cn(shippingTotal === 0 && 'text-success')}>
+                    {shippingTotal === 0 ? freeShippingLabel : `$${shippingTotal.toFixed(2)}`}
+                  </span>
+                </div>
+                {savings > 0 && (
+                  <div className='flex justify-between text-sm font-medium'>
+                    <span>{youSaveLabel}</span>
+                    <span>-${savings.toFixed(2)}</span>
+                  </div>
+                )}
+              </div>
+
+              <Separator className='my-2' />
+
+              <div className='flex items-center justify-between text-base font-medium'>
+                <span>{totalLabel}</span>
+                <div className='text-end'>
+                  <p className='text-xl font-bold'>
+                    <ShoppingCart1SpinningCounter value={total} decimals={2} prefix='$' />
+                  </p>
+                  <p className='text-muted-foreground text-xs'>{taxNoteLabel}</p>
+                </div>
+              </div>
+
+              <Button
+                size='lg'
+                className='mt-4 h-10 w-full cursor-pointer px-8 text-base font-medium'
+                disabled={items.length === 0}
+                onClick={onCheckout}
+              >
+                <ShoppingBag data-icon='inline-start' />
+                {checkoutLabel}
+              </Button>
+
+              <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
+                <CreditCard className='size-3.5' />
+                <span>{securePaymentLabel}</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className='border-dashed py-4'>
+            <CardContent className='px-4'>
+              <div className='flex items-start gap-3'>
+                <div className='flex size-10 items-center justify-center rounded-full bg-warning/10 text-warning'>
+                  <Shield className='size-5' />
+                </div>
+                <div>
+                  <h4 className='font-medium'>{secureCheckoutLabel}</h4>
+                  <p className='text-muted-foreground mt-1 text-xs'>
+                    {secureCheckoutDescription}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Button
+            variant='outline'
+            className='h-9 w-full cursor-pointer px-4 py-2'
+            onClick={onContinueShopping}
+          >
+            <Store data-icon='inline-start' />
+            {continueShoppingLabel}
+            <MoveRight data-icon='inline-end' />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ShoppingCart1

package/src/blocks/e-commerce/shopping-carts/shopping-cart-2-item-row.tsx

@@ -0,0 +1,110 @@
+import { Heart, Minus, Plus, Trash2 } from 'lucide-react'
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Separator } from '../../../ui/separator'
+import type { ShoppingCart2Item } from './shopping-cart-2'
+
+export interface ShoppingCart2ItemRowProps {
+  item: ShoppingCart2Item
+  isLast: boolean
+  onRemove?: (id: string) => void
+  onQuantityChange?: (id: string, quantity: number) => void
+  onAddToWishlist?: (item: ShoppingCart2Item) => void
+}
+
+export function ShoppingCart2ItemRow({
+  item,
+  isLast,
+  onRemove,
+  onQuantityChange,
+  onAddToWishlist,
+}: ShoppingCart2ItemRowProps) {
+  const formatPrice = (value: number) => `$${value.toFixed(2)}`
+
+  return (
+    <div>
+      <div className='flex flex-col sm:flex-row sm:items-start gap-4'>
+        <img src={item.image || undefined} alt={item.name} className='w-20 h-20 rounded-lg object-cover shrink-0 sm:w-20 sm:h-20' />
+
+        <div className='flex-1 flex flex-col gap-3 min-w-0'>
+          <div className='flex items-start justify-between gap-2'>
+            <div className='flex-1 min-w-0'>
+              <h3 className='line-clamp-2 font-medium'>{item.name}</h3>
+              {item.brand ? <p className='text-muted-foreground text-sm'>{item.brand}</p> : null}
+              <div className='text-muted-foreground mt-1 flex gap-3 text-sm flex-wrap'>
+                {item.color ? <span className='whitespace-nowrap'>Color: {item.color}</span> : null}
+                {item.size ? <span className='whitespace-nowrap'>Talla: {item.size}</span> : null}
+              </div>
+            </div>
+            <Button
+              variant='ghost'
+              size='sm'
+              onClick={onRemove ? () => onRemove(item.id) : undefined}
+              className='h-8 shrink-0 px-3 text-xs cursor-pointer text-destructive'
+              aria-label={`Quitar ${item.name}`}
+            >
+              <Trash2 />
+            </Button>
+          </div>
+
+          <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2'>
+            <div className='flex items-center gap-2 flex-wrap'>
+              <span className='font-semibold text-base'>{formatPrice(item.price)}</span>
+              {item.originalPrice ? (
+                <span className='text-muted-foreground text-sm line-through'>
+                  {formatPrice(item.originalPrice)}
+                </span>
+              ) : null}
+              {item.originalPrice ? (
+                <Badge variant='destructive' className='rounded-sm px-2 py-0.5 font-semibold text-xs'>
+                  Ahorra {formatPrice(item.originalPrice - item.price)}
+                </Badge>
+              ) : null}
+            </div>
+
+            <div className='flex items-center gap-2 justify-between sm:justify-end'>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='h-8 cursor-pointer px-2 text-xs'
+                onClick={onAddToWishlist ? () => onAddToWishlist(item) : undefined}
+                aria-label={`Añadir ${item.name} a la lista de deseos`}
+              >
+                <Heart className='size-4' />
+              </Button>
+              <div className='flex items-center rounded-md border'>
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  className='h-8 cursor-pointer px-2 text-xs'
+                  onClick={
+                    onQuantityChange ? () => onQuantityChange(item.id, item.quantity - 1) : undefined
+                  }
+                  disabled={item.quantity <= 1}
+                  aria-label={`Disminuir cantidad de ${item.name}`}
+                >
+                  <Minus className='size-4' />
+                </Button>
+                <span className='min-w-[2rem] px-2 py-1 text-center text-sm'>{item.quantity}</span>
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  className='h-8 cursor-pointer px-2 text-xs'
+                  onClick={
+                    onQuantityChange ? () => onQuantityChange(item.id, item.quantity + 1) : undefined
+                  }
+                  aria-label={`Aumentar cantidad de ${item.name}`}
+                >
+                  <Plus className='size-4' />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {!isLast ? <Separator className='mt-6' /> : null}
+    </div>
+  )
+}
+
+export default ShoppingCart2ItemRow

package/src/blocks/e-commerce/shopping-carts/shopping-cart-2-recommendations.tsx

@@ -0,0 +1,51 @@
+import { Card, CardContent } from '../../../ui/card'
+import { cn } from '../../../lib/utils'
+import type { ShoppingCart2Recommendation } from './shopping-cart-2'
+
+export interface ShoppingCart2RecommendationsProps {
+  recommendations: ShoppingCart2Recommendation[]
+  title?: string
+  onRecommendationClick?: (product: ShoppingCart2Recommendation) => void
+}
+
+export function ShoppingCart2Recommendations({
+  recommendations,
+  title = 'También te puede gustar',
+  onRecommendationClick,
+}: ShoppingCart2RecommendationsProps) {
+  if (recommendations.length === 0) return null
+
+  const formatPrice = (value: number) => `$${value.toFixed(2)}`
+
+  return (
+    <div className='mt-12'>
+      <h3 className='mb-4 text-lg font-semibold'>{title}</h3>
+      <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+        {recommendations.map(product => (
+          <Card
+            key={product.id}
+            className={cn(
+              'group py-0 transition-shadow',
+              onRecommendationClick && 'cursor-pointer hover:shadow-md'
+            )}
+            onClick={onRecommendationClick ? () => onRecommendationClick(product) : undefined}
+          >
+            <CardContent className='p-4'>
+              <div className='mb-3 aspect-square overflow-hidden'>
+                <img
+                  src={product.image || undefined}
+                  alt={product.name}
+                  className='size-full rounded-md object-cover'
+                />
+              </div>
+              <h4 className='mb-1 line-clamp-2 text-sm font-medium'>{product.name}</h4>
+              <p className='text-sm font-semibold'>{formatPrice(product.price)}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ShoppingCart2Recommendations

package/src/blocks/e-commerce/shopping-carts/shopping-cart-2-spinning-counter.tsx

@@ -0,0 +1,146 @@
+'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 ShoppingCart2SpinningCounterProps = {
+  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 ShoppingCart2SpinningCounter({ value, decimals = 0, prefix, className, digitClassName }: ShoppingCart2SpinningCounterProps) {
+  const safeValue = Math.max(0, value)
+  const formatted = safeValue.toFixed(decimals)
+  const chars = formatted.split('')
+  const containerRef = useRef<HTMLSpanElement>(null)
+  const isFirstRender = useRef(true)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const strips = Array.from(container.querySelectorAll<HTMLElement>('[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 (
+    <span className='relative inline-flex items-center'>
+      <span className='sr-only'>{prefix}{formatted}</span>
+      <span
+        ref={containerRef}
+        className={cn('inline-flex items-center font-[inherit] tabular-nums', className)}
+        style={{ height: CELL_SIZE }}
+        aria-hidden='true'
+      >
+        {prefix ? (
+          <span className={digitClassName} style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}>
+            {prefix}
+          </span>
+        ) : null}
+        {chars.map((char, index) => {
+          if (!/\d/.test(char)) {
+            return (
+              <span
+                key={index}
+                className={digitClassName}
+                style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}
+              >
+                {char}
+              </span>
+            )
+          }
+
+          return (
+            <span
+              key={index}
+              className='relative inline-block overflow-hidden'
+              style={{
+                height: CELL_SIZE,
+                maskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
+                WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
+              }}
+            >
+              <span data-reel-strip data-digit={char} className='flex flex-col will-change-[transform,filter]'>
+                {REEL_DIGITS.map((cellDigit, cellIndex) => (
+                  <span
+                    key={cellIndex}
+                    className={cn('flex items-center justify-center', digitClassName)}
+                    style={{ height: CELL_SIZE }}
+                  >
+                    {cellDigit}
+                  </span>
+                ))}
+              </span>
+            </span>
+          )
+        })}
+      </span>
+    </span>
+  )
+}
+
+export default ShoppingCart2SpinningCounter