@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/product-overview/product-overview-2.tsx

@@ -0,0 +1,272 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '../../../ui/button'
+import { cn } from '../../../lib/utils'
+import { Heart, ShoppingBag, Truck, Star, Check } from 'lucide-react'
+import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../../../ui/carousel'
+import { ReactionToggle } from '../../shared/reaction-toggle'
+
+export interface ProductOverview2ProductImage {
+  src: string
+  alt: string
+}
+
+export interface ProductOverview2ProductColor {
+  name: string
+  value: string
+}
+
+export interface ProductOverview2ProductSize {
+  eu: number
+  uk: number
+  us: number
+}
+
+export interface ProductOverview2Product {
+  id: string
+  brand: string
+  name: string
+  sku: string
+  price: number
+  currency: string
+  rating: number
+  reviews: number
+  images: ProductOverview2ProductImage[]
+  sizes: ProductOverview2ProductSize[]
+  colors: ProductOverview2ProductColor[]
+}
+
+export interface ProductOverview2Props {
+  product: ProductOverview2Product
+  sizesLabel?: string
+  colorLabel?: string
+  reviewsLabel?: string
+  addToCartLabel?: string
+  removeFromWishlistLabel?: string
+  addToWishlistLabel?: string
+  sizeGuideLabel?: string
+  freeDeliveryLabel?: string
+  onAddToCart?: (product: ProductOverview2Product) => void
+  onToggleWishlist?: (product: ProductOverview2Product, isWishlisted: boolean) => void
+}
+
+export default function ProductOverview2({
+  product,
+  sizesLabel = 'Tallas',
+  colorLabel = 'Color',
+  reviewsLabel = 'Reseñas',
+  addToCartLabel = 'Agregar al carrito',
+  removeFromWishlistLabel = 'Quitar de favoritos',
+  addToWishlistLabel = 'Agregar a favoritos',
+  sizeGuideLabel = 'Guía de tallas',
+  freeDeliveryLabel = 'Envío gratis en pedidos superiores a $30.00',
+  onAddToCart,
+  onToggleWishlist,
+}: ProductOverview2Props) {
+  const [selectedImage, setSelectedImage] = useState(0)
+  const [selectedSize, setSelectedSize] = useState<number | null>(product.sizes[1]?.eu ?? null)
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+  const [isWishlisted, setIsWishlisted] = useState(false)
+  const [sizeType, setSizeType] = useState<'eu' | 'uk' | 'us'>('eu')
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
+
+  useEffect(() => {
+    if (!carouselApi) return
+
+    // Set carousel to the selected image
+    carouselApi.scrollTo(selectedImage)
+
+    // Update selected image when carousel changes
+    const handleSelect = () => {
+      const currentIndex = carouselApi.selectedScrollSnap()
+      setSelectedImage(currentIndex)
+    }
+
+    carouselApi.on('select', handleSelect)
+    return () => {
+      carouselApi.off('select', handleSelect)
+    }
+  }, [carouselApi, selectedImage])
+
+  return (
+    <section className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+      <div className='grid grid-cols-1 gap-8 py-4 md:py-6 lg:grid-cols-2 lg:py-12'>
+        {/* Product Gallery */}
+        <div className='flex flex-col gap-4'>
+          {/* Main Image - Carousel */}
+          <Carousel setApi={setCarouselApi} className='w-full'>
+            <CarouselContent>
+              {product.images.map((image, index) => (
+                <CarouselItem key={index}>
+                  <div className='flex h-130 w-full items-center justify-center overflow-hidden rounded-lg bg-muted'>
+                    <img src={image.src || undefined} alt={image.alt} className='h-full w-full object-cover' />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+
+          {/* Thumbnails */}
+          <div className='flex flex-wrap gap-4'>
+            {product.images.map((image, index) => (
+              <button
+                type='button'
+                key={index}
+                onClick={() => setSelectedImage(index)}
+                aria-label={`Mostrar imagen ${index + 1} de ${product.name}`}
+                className='aspect-square size-16 cursor-pointer'
+              >
+                <img
+                  src={image.src || undefined}
+                  alt={image.alt}
+                  className={cn(
+                    'size-full cursor-pointer rounded-md object-cover ring-offset-2 transition-all',
+                    selectedImage === index ? 'ring-foreground ring-2' : '',
+                  )}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Product Details */}
+        <div className='flex flex-col gap-6'>
+          {/* Product Header */}
+          <header className='flex flex-col gap-4'>
+            <div className='flex items-center'>
+              <Button variant='ghost' size='icon' className='bg-primary size-6 scale-75 cursor-pointer rounded-full'>
+                <Check className='text-primary-foreground size-4' />
+              </Button>
+              <span className='ms-2 font-medium'>{product.brand}</span>
+              <span className='text-muted-foreground ms-auto'>{product.sku}</span>
+            </div>
+            <h1 className='text-xl font-bold text-balance xl:text-3xl'>{product.name}</h1>
+
+            {/* Ratings */}
+            <div className='flex items-center gap-2'>
+              <div className='flex'>
+                {[...Array(5)].map((_, i) => (
+                  <Star
+                    key={i}
+                    className={cn(
+                      'size-5',
+                      i < product.rating ? 'fill-foreground text-foreground' : 'text-muted-foreground',
+                    )}
+                  />
+                ))}
+              </div>
+              <span className='text-muted-foreground text-sm'>
+                {product.reviews} {reviewsLabel}
+              </span>
+            </div>
+          </header>
+
+          {/* Price */}
+          <p className='text-4xl font-bold'>
+            {product.currency}
+            {product.price.toFixed(2)}
+          </p>
+          {/* Color Selection */}
+          <div>
+            <div className='mb-4 flex items-center text-sm'>
+              <span className='font-medium'>{colorLabel}:</span>
+              <span className='text-muted-foreground ms-1'>{selectedColor.name}</span>
+            </div>
+            <div className='flex gap-3'>
+              {product.colors.map(color => (
+                <Button
+                  key={color.name}
+                  onClick={() => setSelectedColor(color)}
+                  className={cn(
+                    'h-9 px-4 py-2',
+                    'ring-offset-background size-8 cursor-pointer rounded-sm ring-offset-2 transition-all',
+                    selectedColor.name === color.name && 'ring-foreground ring-2',
+                    selectedColor.name !== color.name &&
+                      ['Black', 'White'].includes(color.name) &&
+                      'outline-muted outline-solid',
+                  )}
+                  style={{ backgroundColor: color.value }}
+                  aria-label={`Seleccionar color ${color.name}`}
+                  aria-selected={selectedColor.name === color.name}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Size Selection */}
+          <div>
+            <div className='mb-4 flex items-center justify-between'>
+              <div className='flex items-center'>
+                <span className='me-4 text-sm font-medium'>{sizesLabel}</span>
+                <div className='border-input flex rounded-sm border p-1'>
+                  {['eu', 'uk', 'us'].map(type => (
+                    <Button
+                      key={type}
+                      variant='ghost'
+                      size='sm'
+                      onClick={() => setSizeType(type as 'eu' | 'uk' | 'us')}
+                      className={cn(
+                        'cursor-pointer rounded-sm px-2 text-xs',
+                        sizeType === type && 'bg-secondary text-secondary-foreground',
+                      )}
+                      aria-label={`Seleccionar talla ${type.toUpperCase()}`}
+                      aria-selected={sizeType === type}
+                    >
+                      {type.toUpperCase()}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+              <Button variant='ghost' className='h-9 px-4 py-2 text-primary cursor-pointer text-sm hover:underline'>
+                {sizeGuideLabel}
+              </Button>
+            </div>
+            <div className='grid grid-cols-4 gap-2 xl:grid-cols-5'>
+              {product.sizes.map(size => (
+                <Button
+                  key={size.eu}
+                  variant={selectedSize === size.eu ? 'secondary' : 'outline'}
+                  onClick={() => setSelectedSize(size.eu)}
+                  className='h-12 cursor-pointer rounded-full shadow-none'
+                >
+                  {sizeType === 'eu' ? size.eu : sizeType === 'uk' ? size.uk : size.us}
+                </Button>
+              ))}
+            </div>
+          </div>
+          {/* Add to Cart */}
+          <div>
+            <div className='mb-4 flex gap-4'>
+              <Button
+                className='h-12 flex-1 cursor-pointer rounded-md'
+                size='lg'
+                onClick={onAddToCart ? () => onAddToCart(product) : undefined}
+              >
+                <ShoppingBag />
+                {addToCartLabel}
+              </Button>
+              <Button
+                variant='outline'
+                size='icon'
+                className='border-input size-12 cursor-pointer rounded-md transition-colors'
+                onClick={() => {
+                  const next = !isWishlisted
+                  setIsWishlisted(next)
+                  onToggleWishlist?.(product, next)
+                }}
+                aria-label={isWishlisted ? removeFromWishlistLabel : addToWishlistLabel}
+              >
+                <ReactionToggle active={isWishlisted} icon={Heart} iconClassName='size-5' activeColorClassName='text-primary' />
+              </Button>
+            </div>
+            <div className='text-muted-foreground flex items-center justify-center gap-2 text-sm'>
+              <Truck className='size-4' />
+              <span>{freeDeliveryLabel}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/blocks/e-commerce/product-overview/product-overview-5-gallery.tsx

@@ -0,0 +1,59 @@
+import { Camera } from 'lucide-react'
+import { Badge } from '../../../ui/badge'
+import { cn } from '../../../lib/utils'
+
+import type { ProductOverview5Product } from './product-overview-5'
+
+export interface ProductOverview5GalleryProps {
+  product: ProductOverview5Product
+  badgeLabel?: string
+  selectedImage: number
+  onSelectImage: (index: number) => void
+  photosLabel?: string
+}
+
+export function ProductOverview5Gallery({
+  product,
+  badgeLabel,
+  selectedImage,
+  onSelectImage,
+  photosLabel = 'fotos',
+}: ProductOverview5GalleryProps) {
+  return (
+    <div>
+      <div className='bg-muted relative aspect-square overflow-hidden rounded-xl'>
+        <img src={product.mainImages[selectedImage] || undefined} alt={product.name} className='size-full object-cover' />
+        {badgeLabel && (
+          <Badge className='px-2.5 py-0.5 font-semibold absolute top-4 left-4'>
+            {badgeLabel}
+          </Badge>
+        )}
+        <div className='absolute right-4 bottom-4 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur-sm'>
+          <Camera className='mr-1 inline size-4' />
+          {product.mainImages.length} {photosLabel}
+        </div>
+      </div>
+
+      {product.mainImages.length > 1 && (
+        <div className='mt-4 flex gap-3 overflow-x-auto pb-2'>
+          {product.mainImages.map((image, index) => (
+            <button
+              type='button'
+              key={index}
+              onClick={() => onSelectImage(index)}
+              className={cn(
+                'relative aspect-square size-20 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 transition-all',
+                selectedImage === index ? 'border-primary ring-primary/20 shadow-md ring-2' : 'border-muted hover:border-muted-foreground/50',
+              )}
+              aria-label={`Mostrar imagen ${index + 1} de ${product.name}`}
+            >
+              <img src={image || undefined} alt={`${product.name} ${index + 1}`} className='size-full object-cover' />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ProductOverview5Gallery

package/src/blocks/e-commerce/product-overview/product-overview-5-lightbox-tab.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { useState } from 'react'
+import { ChevronLeft, ChevronRight, X } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Card, CardContent } from '../../../ui/card'
+import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '../../../ui/dialog'
+import { cn } from '../../../lib/utils'
+
+import type { ProductOverview5Product } from './product-overview-5'
+
+export interface ProductOverview5LightboxTabProps {
+  product: ProductOverview5Product
+  galleryLabel?: string
+  ofCounterLabel?: string
+}
+
+export function ProductOverview5LightboxTab({
+  product,
+  galleryLabel = 'Galería',
+  ofCounterLabel = '{current} de {total}',
+}: ProductOverview5LightboxTabProps) {
+  const [modalImageIndex, setModalImageIndex] = useState(0)
+
+  const nextImage = () => setModalImageIndex(prev => (prev + 1) % product.galleryImages.length)
+  const prevImage = () => setModalImageIndex(prev => (prev - 1 + product.galleryImages.length) % product.galleryImages.length)
+
+  return (
+    <Card className='border shadow-none'>
+      <CardContent className='p-8 py-0'>
+        <h3 className='mb-6 text-xl font-semibold text-balance'>{galleryLabel}</h3>
+        <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
+          {product.galleryImages.map((image, index) => (
+            <Dialog key={index}>
+              <DialogTrigger asChild>
+                <button
+                  type='button'
+                  className='block aspect-square cursor-pointer overflow-hidden rounded-xl'
+                  onClick={() => setModalImageIndex(index)}
+                >
+                  <img src={image || undefined} alt={`${product.name} ${index + 1}`} className='size-full object-cover' />
+                </button>
+              </DialogTrigger>
+              <DialogContent className='max-w-4xl border-0 bg-transparent p-0' showCloseButton={false}>
+                <DialogTitle className='sr-only'>Imagen de galería {modalImageIndex + 1}</DialogTitle>
+                <div className='relative'>
+                  <img
+                    src={product.galleryImages[modalImageIndex] || undefined}
+                    alt={`${product.name} ${modalImageIndex + 1}`}
+                    className='max-h-[80vh] w-full object-contain'
+                  />
+                  <DialogClose className='absolute top-4 right-4 rounded-full bg-black/20 p-2 text-white transition-colors hover:bg-black/30'>
+                    <X className='size-4' />
+                  </DialogClose>
+
+                  {product.galleryImages.length > 1 && (
+                    <>
+                      <Button
+                        variant='ghost'
+                        size='icon'
+                        className='size-9 absolute top-1/2 left-4 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
+                        onClick={prevImage}
+                      >
+                        <ChevronLeft className='size-4' />
+                      </Button>
+                      <Button
+                        variant='ghost'
+                        size='icon'
+                        className='size-9 absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
+                        onClick={nextImage}
+                      >
+                        <ChevronRight className='size-4' />
+                      </Button>
+                    </>
+                  )}
+
+                  <div className='absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2'>
+                    {product.galleryImages.map((_, idx) => (
+                      <button
+                        type='button'
+                        key={idx}
+                        aria-label={`Mostrar imagen ${idx + 1}`}
+                        className={cn('size-2 rounded-full transition-colors', idx === modalImageIndex ? 'bg-white' : 'bg-white/50')}
+                        onClick={() => setModalImageIndex(idx)}
+                      />
+                    ))}
+                  </div>
+
+                  <div className='absolute right-4 bottom-4 rounded-full bg-black/20 px-3 py-1 text-sm text-white'>
+                    {ofCounterLabel
+                      .replace('{current}', String(modalImageIndex + 1))
+                      .replace('{total}', String(product.galleryImages.length))}
+                  </div>
+                </div>
+              </DialogContent>
+            </Dialog>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ProductOverview5LightboxTab

package/src/blocks/e-commerce/product-overview/product-overview-5-reviews-tab.tsx

@@ -0,0 +1,82 @@
+import { Star } from 'lucide-react'
+import { Card, CardContent } from '../../../ui/card'
+import { Progress } from '../../../ui/progress'
+
+import type { ProductOverview5Product } from './product-overview-5'
+
+export interface ProductOverview5ReviewsTabProps {
+  product: ProductOverview5Product
+  basedOnReviewsLabel?: string
+  foundHelpfulLabel?: string
+}
+
+function renderStars(rating: number) {
+  return Array.from({ length: 5 }, (_, i) => (
+    <Star key={i} className={`size-4 ${i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''}`} />
+  ))
+}
+
+function formatDate(dateString: string) {
+  return new Date(dateString).toLocaleDateString('es-ES', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+export function ProductOverview5ReviewsTab({
+  product,
+  basedOnReviewsLabel = 'Basado en {count} reseñas',
+  foundHelpfulLabel = '{count} personas encontraron esto útil',
+}: ProductOverview5ReviewsTabProps) {
+  return (
+    <div className='flex flex-col gap-6'>
+      <Card className='border shadow-none'>
+        <CardContent className='p-8 py-0'>
+          <div className='flex flex-col items-start gap-8 md:flex-row md:items-center'>
+            <div className='text-center'>
+              <div className='text-4xl font-bold'>{product.rating}</div>
+              <div className='mt-2 flex justify-center'>{renderStars(product.rating)}</div>
+              <div className='text-muted-foreground mt-2 text-sm'>
+                {basedOnReviewsLabel.replace('{count}', String(product.userReviews.length))}
+              </div>
+            </div>
+            <div className='flex-1'>
+              {[5, 4, 3, 2, 1].map(stars => {
+                const count = product.userReviews.filter(review => Math.floor(review.rating) === stars).length
+                const percentage = (count / product.userReviews.length) * 100
+                return (
+                  <div key={stars} className='mb-3 flex items-center gap-3'>
+                    <span className='w-8 text-sm font-medium'>{stars}★</span>
+                    <Progress value={percentage} className='h-2 flex-1 rounded-full' />
+                    <span className='text-muted-foreground w-8 text-sm'>{count}</span>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className='flex flex-col gap-4'>
+        {product.userReviews.map(review => (
+          <Card key={review.id} className='border shadow-none'>
+            <CardContent className='p-6 py-0'>
+              <div className='mb-4 flex items-start justify-between'>
+                <div>
+                  <div className='text-sm font-medium'>{review.author}</div>
+                  <div className='mt-2 flex items-center gap-2'>
+                    <div className='flex'>{renderStars(review.rating)}</div>
+                    <span className='text-muted-foreground text-sm'>{formatDate(review.date)}</span>
+                  </div>
+                </div>
+              </div>
+              <p className='text-muted-foreground mb-3 text-sm leading-relaxed'>{review.comment}</p>
+              <div className='text-muted-foreground text-xs'>
+                {foundHelpfulLabel.replace('{count}', String(review.helpful))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ProductOverview5ReviewsTab

package/src/blocks/e-commerce/product-overview/product-overview-5-tabs.tsx

@@ -0,0 +1,69 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+
+import { cn } from '../../../lib/utils'
+
+/**
+ * The full tab set this block renders on.
+ *
+ * The block's classes target Base UI state attributes (`data-active:bg-transparent` on the
+ * triggers), the indicator reads Base UI positioning CSS variables (`--active-tab-*`), and the
+ * content fade relies on Base UI unmounting the inactive panel - so the whole tabs area runs on
+ * Base UI rather than the Radix-backed shadcn `tabs`. It lives here rather than in the shared ui
+ * `tabs` so the block installs standalone: the shadcn `tabs` component you get from the registry
+ * has no indicator or fading panel.
+ */
+export function ProductOverview5Tabs(props: TabsPrimitive.Root.Props) {
+  return <TabsPrimitive.Root data-slot='tabs' {...props} />
+}
+
+export function ProductOverview5TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  return <TabsPrimitive.List data-slot='tabs-list' className={className} {...props} />
+}
+
+/**
+ * Base UI's tab button carries no layout of its own, so the inline-flex centring that the
+ * Radix-backed shadcn trigger used to supply is re-stated here.
+ */
+export function ProductOverview5TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot='tabs-trigger'
+      className={cn('relative inline-flex items-center justify-center whitespace-nowrap', className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Panel with a fade-in on every switch. Base UI unmounts the inactive panel by default, so each
+ * activation is a fresh mount - `animate-in` plays automatically without needing a transition-state
+ * data attribute to gate it.
+ */
+export function ProductOverview5TabsContentFade({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      className={cn('animate-in fade-in-0 duration-200 motion-reduce:animate-none', className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Sliding pill that tracks the active trigger. Render as the first child of TabsList, and pair
+ * with `data-active:bg-transparent` on the triggers so their own active background doesn't double
+ * up with the pill.
+ */
+export function ProductOverview5TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
+  return (
+    <TabsPrimitive.Indicator
+      data-slot='tabs-indicator'
+      className={cn(
+        'absolute z-0 rounded-md bg-background shadow-sm transition-[left,top,width,height] duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] dark:bg-input/30',
+        'left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)',
+        'motion-reduce:transition-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}