@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -1,342 +0,0 @@
-'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

@@ -1,146 +0,0 @@
-'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