@thorprovider/blocks 0.1.3 → 1.0.0

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

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

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

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

@@ -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 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