@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,342 @@
+'use client'
+
+import { ArrowRight, Clock, Heart, Minus, Plus, ShoppingBag, Trash2 } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { CheckboxCheck } from '../checkout-forms/checkbox-check'
+import { Separator } from '../../../ui/separator'
+import { Badge } from '../../../ui/badge'
+import { Progress } from '../../../ui/progress'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { ShoppingCart3SpinningCounter } from './shopping-cart-3-spinning-counter'
+import { cn } from '../../../lib/utils'
+
+export type ShoppingCart3Tag = 'Limited Edition' | 'Best Seller' | 'New Arrival'
+
+export interface ShoppingCart3CartItem {
+  id: string
+  name: string
+  color: string
+  size: string
+  price: number
+  originalPrice: number
+  quantity: number
+  image: string
+  selected: boolean
+  tag: ShoppingCart3Tag
+  estimatedDelivery: string
+}
+
+export interface ShoppingCart3Feature {
+  icon: LucideIcon
+  title: string
+  description: string
+}
+
+export interface ShoppingCart3Props {
+  items: ShoppingCart3CartItem[]
+  freeShippingThreshold?: number
+  features?: ShoppingCart3Feature[]
+  title?: string
+  itemCountLabel?: (count: number) => string
+  selectAllLabel?: string
+  saveForLaterLabel?: 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
+  freeShippingProgressLabel?: (remaining: number) => string
+  freeShippingReachedLabel?: string
+  tagLabels?: Partial<Record<ShoppingCart3Tag, string>>
+  onUpdateQuantity?: (id: string, quantity: number) => void
+  onRemoveItem?: (id: string) => void
+  onCheckout?: () => void
+  onSaveForLater?: (ids: string[]) => void
+  onToggleSelect?: (id: string, selected: boolean) => void
+}
+
+const DEFAULT_TAG_LABELS: Record<ShoppingCart3Tag, string> = {
+  'Limited Edition': 'Edición limitada',
+  'Best Seller': 'Más vendido',
+  'New Arrival': 'Nuevo ingreso',
+}
+
+export function ShoppingCart3({
+  items,
+  freeShippingThreshold,
+  features,
+  title = 'Tu carrito de compras',
+  itemCountLabel = (count) => `${count} ${count === 1 ? 'artículo' : 'artículos'} en tu carrito`,
+  selectAllLabel = 'Seleccionar todo',
+  saveForLaterLabel = 'Guardar para después',
+  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',
+  freeShippingProgressLabel = (remaining) =>
+    `Agrega $${remaining.toFixed(2)} más para obtener envío gratis`,
+  freeShippingReachedLabel = '¡Ahorra con envío gratis!',
+  tagLabels,
+  onUpdateQuantity,
+  onRemoveItem,
+  onCheckout,
+  onSaveForLater,
+  onToggleSelect,
+}: ShoppingCart3Props) {
+  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 shippingTotal: number = 0
+  const total = subtotal + shippingTotal
+
+  const allSelected = items.length > 0 && items.every((item) => item.selected)
+  const selectedIds = items.filter((item) => item.selected).map((item) => item.id)
+  const resolveTag = (tag: ShoppingCart3Tag) => (tagLabels ? (tagLabels[tag] ?? tag) : tag)
+  const freeShippingProgress =
+    freeShippingThreshold != null ? Math.min(100, (subtotal / freeShippingThreshold) * 100) : 0
+
+  return (
+    <section className='bg-background py-8'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <header className='mb-6 text-center'>
+          <h1 className='text-2xl font-semibold text-balance md:text-3xl'>{title}</h1>
+          <p className='text-muted-foreground mt-1 text-sm'>{itemCountLabel(items.length)}</p>
+        </header>
+
+        <div className='flex flex-col gap-6 lg:flex-row lg:gap-8'>
+          {/* Cart Items Section */}
+          <section className='flex-1 flex flex-col gap-4'>
+            <div className='flex min-h-8 items-center justify-between px-4'>
+              <div className='flex items-center gap-2'>
+                <CheckboxCheck
+                  checked={allSelected}
+                  onCheckedChange={() => items.forEach((item) => onToggleSelect?.(item.id, !allSelected))}
+                  className='size-4'
+                  disabled={!onToggleSelect}
+                  id='select-all'
+                />
+                <label htmlFor='select-all' className='text-sm font-medium'>
+                  {selectAllLabel}
+                </label>
+              </div>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='h-8 cursor-pointer text-sm'
+                disabled={selectedIds.length === 0}
+                onClick={onSaveForLater ? () => onSaveForLater(selectedIds) : undefined}
+              >
+                <Heart data-icon='inline-start' />
+                {saveForLaterLabel}
+              </Button>
+            </div>
+
+            <div className='flex flex-col gap-4'>
+              {items.map((item) => (
+                <div
+                  key={item.id}
+                  className='rounded-lg transition-all'
+                  onClick={onToggleSelect ? () => onToggleSelect(item.id, !item.selected) : undefined}
+                >
+                  <Card className={cn('overflow-hidden transition-all', item.selected ? 'shadow-md' : 'shadow-none')}>
+                    <CardContent className='flex items-start gap-4' onClick={(e) => e.stopPropagation()}>
+                      <div onClick={(e) => e.stopPropagation()}>
+                        <CheckboxCheck
+                          checked={item.selected}
+                          onCheckedChange={() => onToggleSelect?.(item.id, !item.selected)}
+                          className='mt-1 size-4'
+                          disabled={!onToggleSelect}
+                        />
+                      </div>
+
+                      <div className='flex flex-1 gap-4'>
+                        <div className='relative aspect-square size-20 overflow-hidden rounded-md border sm:size-24'>
+                          <img src={item.image || undefined} alt={item.name} className='size-full object-cover' />
+                        </div>
+
+                        <div className='flex flex-1 flex-col'>
+                          <div className='flex items-start justify-between'>
+                            <div>
+                              <CardTitle className='text-base text-balance'>{item.name}</CardTitle>
+                              <div className='text-muted-foreground mt-1 flex gap-2 text-xs'>
+                                <span>{item.color}</span>
+                                {item.size ? (
+                                  <>
+                                    <span>•</span>
+                                    <span>{item.size}</span>
+                                  </>
+                                ) : null}
+                              </div>
+                            </div>
+                            <Badge variant='secondary' className='h-5.5 rounded-sm px-2.5 text-xs font-semibold'>
+                              {resolveTag(item.tag)}
+                            </Badge>
+                          </div>
+
+                          <div className='mt-2 flex items-center gap-2'>
+                            <span className='text-base font-medium'>${item.price.toFixed(2)}</span>
+                            {item.originalPrice > item.price ? (
+                              <span className='text-muted-foreground text-sm line-through'>
+                                ${item.originalPrice.toFixed(2)}
+                              </span>
+                            ) : null}
+                          </div>
+                          <div className='mt-2 flex flex-wrap items-end justify-between gap-2'>
+                            <p className='text-muted-foreground text-xs'>
+                              <Clock className='me-1 inline-block size-3' />
+                              {estimatedDeliveryLabel}: {item.estimatedDelivery}
+                            </p>
+
+                            <div className='ms-auto flex items-center justify-end gap-4 max-md:ms-0'>
+                              <div className='flex items-center gap-2'>
+                                <Button
+                                  variant='outline'
+                                  size='icon'
+                                  className='size-8 cursor-pointer rounded'
+                                  onClick={
+                                    onUpdateQuantity
+                                      ? () => onUpdateQuantity(item.id, Math.max(1, item.quantity - 1))
+                                      : undefined
+                                  }
+                                  disabled={item.quantity <= 1}
+                                  aria-label={decreaseQuantityLabel(item.name)}
+                                >
+                                  <Minus />
+                                </Button>
+                                <span className='w-6 text-center text-sm'>{item.quantity}</span>
+                                <Button
+                                  variant='outline'
+                                  size='icon'
+                                  className='size-8 cursor-pointer rounded'
+                                  onClick={
+                                    onUpdateQuantity
+                                      ? () => onUpdateQuantity(item.id, item.quantity + 1)
+                                      : undefined
+                                  }
+                                  aria-label={increaseQuantityLabel(item.name)}
+                                >
+                                  <Plus />
+                                </Button>
+                              </div>
+                              <Button
+                                variant='ghost'
+                                size='icon'
+                                className='size-8 cursor-pointer rounded-sm 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>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Summary Section */}
+          <aside className='w-full lg:w-[380px]'>
+            <div className='sticky top-8 flex flex-col gap-4'>
+              {freeShippingThreshold != null ? (
+                <Card className='py-4'>
+                  <CardContent className='px-4'>
+                    {subtotal < freeShippingThreshold ? (
+                      <p className='text-xs'>{freeShippingProgressLabel(freeShippingThreshold - subtotal)}</p>
+                    ) : (
+                      <p className='text-xs font-medium'>{freeShippingReachedLabel}</p>
+                    )}
+                    <Progress value={subtotal < freeShippingThreshold ? freeShippingProgress : 100} className='mt-2 h-1.5' />
+                  </CardContent>
+                </Card>
+              ) : null}
+
+              <Card className='gap-4 py-4'>
+                <CardHeader className='px-4'>
+                  <CardTitle className='text-lg'>{orderSummaryLabel}</CardTitle>
+                </CardHeader>
+                <CardContent className='flex flex-col gap-3 px-4'>
+                  <div className='flex justify-between text-sm'>
+                    <span className='text-muted-foreground'>{subtotalLabel}</span>
+                    <span className='font-medium'>${subtotal.toFixed(2)}</span>
+                  </div>
+                  <div className='flex justify-between text-sm'>
+                    <span className='text-muted-foreground'>{shippingLabel}</span>
+                    <span className='font-medium'>
+                      {shippingTotal === 0 ? freeShippingLabel : `$${shippingTotal.toFixed(2)}`}
+                    </span>
+                  </div>
+                  {savings > 0 && (
+                    <div className='flex justify-between text-sm'>
+                      <span>{youSaveLabel}</span>
+                      <span className='font-medium'>-${savings.toFixed(2)}</span>
+                    </div>
+                  )}
+                  <Separator />
+                  <div className='flex justify-between text-base font-medium'>
+                    <span>{totalLabel}</span>
+                    <span>
+                      <ShoppingCart3SpinningCounter value={total} decimals={2} prefix='$' />
+                    </span>
+                  </div>
+
+                  <Button
+                    className='mt-4 h-8 w-full cursor-pointer px-3 text-xs'
+                    size='sm'
+                    onClick={onCheckout}
+                  >
+                    <ShoppingBag data-icon='inline-start' />
+                    {checkoutLabel}
+                    <ArrowRight data-icon='inline-end' />
+                  </Button>
+
+                  <p className='text-muted-foreground text-center text-xs'>{securePaymentLabel}</p>
+                </CardContent>
+              </Card>
+
+              {features && features.length > 0 ? (
+                <div className='grid grid-cols-1 gap-3'>
+                  {features.map((feature, index) => (
+                    <Card key={index} className='py-3'>
+                      <CardContent className='flex items-center gap-3 px-3'>
+                        <div className='bg-secondary rounded-full p-1.5'>
+                          <feature.icon className='size-4' />
+                        </div>
+                        <div>
+                          <h3 className='text-sm font-medium'>{feature.title}</h3>
+                          <p className='text-muted-foreground text-xs'>{feature.description}</p>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </aside>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ShoppingCart3

package/src/blocks/e-commerce/shopping-carts/shopping-cart-4-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 ShoppingCart4SpinningCounterProps = {
+  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 ShoppingCart4SpinningCounter({ value, decimals = 0, prefix, className, digitClassName }: ShoppingCart4SpinningCounterProps) {
+  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 ShoppingCart4SpinningCounter