@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/product-list/product-card-3-reaction-toggle.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { useEffect, useRef, useState, type ComponentType } from 'react'
+
+import { cn } from '../../../lib/utils'
+
+const PARTICLE_COUNT = 8
+
+/**
+ * The pop/burst keyframes travel with the component instead of living in the
+ * app's stylesheet, so this file is self-contained: drop it in and the
+ * animation works with no Tailwind config or global CSS to copy over.
+ * Injected once per page, guarded by the marker attribute.
+ */
+const STYLE_MARKER = 'data-reaction-toggle-keyframes'
+const STYLES = `
+@keyframes reaction-toggle-pop {
+  0% { transform: scale(1); }
+  30% { transform: scale(0.82); }
+  100% { transform: scale(1); }
+}
+@keyframes reaction-toggle-burst {
+  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
+  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }
+  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }
+}
+.reaction-toggle-pop {
+  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
+}
+.reaction-toggle-burst {
+  animation-name: reaction-toggle-burst;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reaction-toggle-pop,
+  .reaction-toggle-burst { animation: none !important; }
+}
+`
+
+function useReactionToggleStyles() {
+  useEffect(() => {
+    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return
+
+    const style = document.createElement('style')
+    style.setAttribute(STYLE_MARKER, '')
+    style.textContent = STYLES
+    document.head.append(style)
+  }, [])
+}
+
+type ReactionIconProps = {
+  className?: string
+}
+
+type Particle = {
+  rx: number
+  ry: number
+  duration: number
+  delay: number
+  size: number
+}
+
+function buildParticles(): Particle[] {
+  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {
+    const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4
+    const dist = 16 + Math.random() * 10
+
+    return {
+      rx: Math.round(Math.cos(angle) * dist * 10) / 10,
+      ry: Math.round(Math.sin(angle) * dist * 10) / 10,
+      duration: Math.round(500 + Math.random() * 200),
+      delay: Math.round(Math.random() * 60),
+      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100,
+    }
+  })
+}
+
+type ReactionToggleProps = {
+  /** Whether the reaction is currently active (liked/helpful/etc). */
+  active: boolean
+  /** Icon component to render, e.g. `Heart` or `ThumbsUp` from lucide-react. */
+  icon: ComponentType<ReactionIconProps>
+  /** Wrapper class - sizing/positioning of the whole control. */
+  className?: string
+  /** Class applied to the icon itself (e.g. `size-5`). */
+  iconClassName?: string
+  /**
+   * Tailwind color class (e.g. `text-primary`, `text-destructive`) applied to the
+   * icon and particles while active. Drives `fill-current`/`bg-current`, so it
+   * stays in sync with the design system instead of a hardcoded brand color.
+   */
+  activeColorClassName?: string
+}
+
+/**
+ * Heart/thumbs-up style reaction control: the icon pops with an overshoot scale
+ * and sprinkles 8 particles outward the moment it becomes active.
+ */
+export function ProductCard3ReactionToggle({
+  active,
+  icon: Icon,
+  className,
+  iconClassName,
+  activeColorClassName = 'text-primary',
+}: ReactionToggleProps) {
+  const [isBursting, setIsBursting] = useState(false)
+  const wasActive = useRef(active)
+  const particlesRef = useRef<Particle[]>(buildParticles())
+
+  useReactionToggleStyles()
+
+  useEffect(() => {
+    if (active && !wasActive.current) {
+      particlesRef.current = buildParticles()
+      setIsBursting(true)
+      const timeout = setTimeout(() => setIsBursting(false), 700)
+      wasActive.current = active
+      return () => clearTimeout(timeout)
+    }
+
+    wasActive.current = active
+  }, [active])
+
+  return (
+    <span className={cn('relative inline-flex', className)}>
+      <span className={cn('inline-flex', active && 'reaction-toggle-pop')}>
+        <Icon
+          className={cn(
+            'transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]',
+            active ? cn('fill-current', activeColorClassName) : 'fill-transparent',
+            iconClassName
+          )}
+        />
+      </span>
+
+      {isBursting && (
+        <span
+          aria-hidden='true'
+          className={cn('pointer-events-none absolute top-1/2 left-1/2 size-0', activeColorClassName)}
+        >
+          {particlesRef.current.map((particle, index) => (
+            <i
+              key={index}
+              className='reaction-toggle-burst absolute rounded-full bg-current opacity-0'
+              style={
+                {
+                  '--rx': `${particle.rx}px`,
+                  '--ry': `${particle.ry}px`,
+                  animationDuration: `${particle.duration}ms`,
+                  animationDelay: `${particle.delay}ms`,
+                  width: `${2.5 * particle.size}px`,
+                  height: `${2.5 * particle.size}px`,
+                  left: `${-1.25 * particle.size}px`,
+                  top: `${-1.25 * particle.size}px`,
+                } as React.CSSProperties
+              }
+            />
+          ))}
+        </span>
+      )}
+    </span>
+  )
+}
+
+export default ProductCard3ReactionToggle

package/src/blocks/e-commerce/product-list/product-card-3.tsx

@@ -0,0 +1,215 @@
+'use client'
+
+import { useState, type JSX } from 'react'
+import { Heart, Star, Sparkles, Flame, Trophy, GalleryHorizontalEnd } from 'lucide-react'
+
+import { cn } from '../../../lib/utils'
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Card, CardContent } from '../../../ui/card'
+import { ProductCard3ReactionToggle } from './product-card-3-reaction-toggle'
+
+export interface ProductCard3Product {
+  id: string | number
+  title: string
+  subtitle: string
+  image: string
+  price: number
+  originalPrice: number
+  rating: number
+  reviewCount: number
+  discountPercentage: number
+  isLowStock?: boolean
+  badge?: {
+    text: string
+    variant: 'trending' | 'bestseller' | 'new'
+  }
+}
+
+export interface ProductCard3Props {
+  products: ProductCard3Product[]
+  currencySymbol?: string
+  onViewSimilar?: (product: ProductCard3Product) => void
+  onToggleWishlist?: (product: ProductCard3Product) => void
+  onProductClick?: (product: ProductCard3Product) => void
+}
+
+interface BadgeStyle {
+  bg: string
+  icon: JSX.Element | null
+}
+
+const badgeStyles: Record<string, BadgeStyle> = {
+  trending: {
+    bg: 'bg-black',
+    icon: <Flame className='size-3' />,
+  },
+  bestseller: {
+    bg: 'bg-black',
+    icon: <Trophy className='size-3' />,
+  },
+  new: {
+    bg: 'bg-black',
+    icon: <Sparkles className='size-3' />,
+  },
+}
+
+interface ProductCardProps {
+  product: ProductCard3Product
+  className?: string
+  currencySymbol?: string
+  onViewSimilar?: (product: ProductCard3Product) => void
+  onToggleWishlist?: (product: ProductCard3Product) => void
+  onProductClick?: (product: ProductCard3Product) => void
+}
+
+function ProductCard({
+  product,
+  className,
+  currencySymbol = '$',
+  onViewSimilar,
+  onToggleWishlist,
+  onProductClick,
+}: ProductCardProps) {
+  const [isWishlisted, setIsWishlisted] = useState(false)
+
+  const badgeStyle = product.badge ? badgeStyles[product.badge.variant] || badgeStyles.new : null
+
+  /**
+   * The heart stays in uncontrolled per-card state only when no callback is
+   * given; with onToggleWishlist the parent owns the wishlist state.
+   */
+  const handleToggleWishlist = () => {
+    if (onToggleWishlist) {
+      onToggleWishlist(product)
+      return
+    }
+    setIsWishlisted(prev => !prev)
+  }
+
+  return (
+    <Card
+      className={cn(
+        'relative overflow-hidden rounded-md py-0 shadow-none transition-all hover:shadow-md',
+        onProductClick && 'cursor-pointer',
+        className,
+      )}
+      onClick={onProductClick ? () => onProductClick(product) : undefined}
+    >
+      <CardContent className='px-0'>
+        <div className='relative aspect-square w-full overflow-hidden'>
+          <img src={product.image || undefined} alt={product.title} className='size-full object-cover' loading='lazy' />
+
+          {product.badge && badgeStyle && (
+            <div className='absolute start-2 top-2 z-20'>
+              <Badge className={cn('h-auto font-semibold flex items-center gap-1 px-2 py-1 text-white backdrop-blur-xs', badgeStyle.bg)}>
+                {badgeStyle.icon}
+                <span className='text-xs font-medium'>{product.badge.text}</span>
+              </Badge>
+            </div>
+          )}
+
+          {product.rating > 0 && (
+            <div className='bg-background/80 absolute start-2 bottom-2 z-10 flex items-center gap-1 rounded-md border px-2 py-1 text-sm backdrop-blur-xs'>
+              <Star className='fill-foreground text-foreground size-4' />
+              <span>{product.rating}</span>
+              {product.reviewCount > 0 && (
+                <span className='text-muted-foreground'>
+                  | {product.reviewCount >= 1000 ? `${(product.reviewCount / 1000).toFixed(1)}k` : product.reviewCount}
+                </span>
+              )}
+            </div>
+          )}
+
+          <div className='absolute end-2 bottom-2 z-10'>
+            <Button
+              variant='ghost'
+              size='sm'
+              className="h-8 px-3 text-xs group bg-background/80 hover:bg-background size-8 cursor-pointer overflow-hidden rounded-full p-0 shadow-xs backdrop-blur-xs transition-all duration-200 hover:w-[130px]"
+              aria-label='Ver productos similares'
+              onClick={
+                onViewSimilar
+                  ? (e) => {
+                      e.stopPropagation()
+                      onViewSimilar(product)
+                    }
+                  : undefined
+              }
+            >
+              <GalleryHorizontalEnd className='absolute start-2 size-4 shrink-0' />
+              <span className='ms-6 text-xs whitespace-nowrap opacity-0 group-hover:opacity-100'>Ver similares</span>
+            </Button>
+          </div>
+
+          <Button
+            variant='ghost'
+            size='icon'
+            className="bg-background/80 absolute end-2 top-2 z-20 size-8 cursor-pointer rounded-full p-0 backdrop-blur-xs"
+            onClick={(e) => {
+              e.stopPropagation()
+              handleToggleWishlist()
+            }}
+            aria-label={isWishlisted ? 'Quitar de favoritos' : 'Añadir a favoritos'}
+          >
+            <ProductCard3ReactionToggle
+              active={isWishlisted}
+              icon={Heart}
+              iconClassName={cn('size-4', !isWishlisted && 'text-muted-foreground hover:text-destructive')}
+              activeColorClassName='text-destructive'
+            />
+          </Button>
+        </div>
+
+        <div className='p-4'>
+          <div className='flex flex-col gap-2'>
+            <h3 className='font-medium text-balance'>{product.title}</h3>
+            <p className='text-muted-foreground text-sm text-balance'>{product.subtitle}</p>
+          </div>
+
+          <div className='flex items-center gap-2'>
+            <span className='font-semibold'>
+              {currencySymbol}
+              {product.price}
+            </span>
+            <span className='text-muted-foreground text-sm line-through'>
+              {currencySymbol}
+              {product.originalPrice}
+            </span>
+            <span className='text-sm'>({product.discountPercentage}% OFF)</span>
+          </div>
+
+          {product.isLowStock && <p className='text-sm text-destructive'>¡Solo quedan pocas unidades!</p>}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function ProductCard3({
+  products,
+  currencySymbol = '$',
+  onViewSimilar,
+  onToggleWishlist,
+  onProductClick,
+}: ProductCard3Props) {
+  return (
+    <section className='py-12'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
+          {products.map(product => (
+            <ProductCard
+              key={product.id}
+              product={product}
+              currencySymbol={currencySymbol}
+              onViewSimilar={onViewSimilar}
+              onToggleWishlist={onToggleWishlist}
+              onProductClick={onProductClick}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ProductCard3

package/src/blocks/e-commerce/product-list/product-card-5-checkbox-check.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useLayoutEffect, useRef, useState } from 'react'
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
+
+import { cn } from '../../../lib/utils'
+
+/**
+ * Animated checkbox whose tick draws on with a stroke path instead of appearing instantly.
+ *
+ * A drop-in replacement for `ui/checkbox`: same props, same look at rest. Two things make the
+ * draw work, and both are easy to get wrong:
+ *
+ * 1. The indicator uses `keepMounted`. Base UI unmounts it when unchecked, and an element that
+ *    was never in the DOM cannot transition — the tick would still pop.
+ * 2. `--check-len` is measured from the real path with `getTotalLength()` rather than hard-coded.
+ *    A guessed dash length either over-draws (a visible tail) or under-draws (a clipped tick),
+ *    and it drifts the moment the icon or the box size changes.
+ *
+ * Transitioning the offset (rather than animating it) means an uncheck mid-draw reverses cleanly
+ * from wherever it had got to, instead of jumping to the end and restarting.
+ */
+const BOX_MS = 150
+const DRAW_MS = 350
+const UNCHECK_MS = 150
+const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'
+
+export function CheckboxCheck({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props) {
+  const pathRef = useRef<SVGPathElement>(null)
+  const [length, setLength] = useState(15)
+
+  useLayoutEffect(() => {
+    const path = pathRef.current
+    if (path) {
+      setLength(Math.ceil(path.getTotalLength()))
+    }
+  }, [])
+
+  // A partial selection draws a dash, not a tick: a full tick for "some of these are selected"
+  // reads as "all of them". The tick is lucide's `Check`/`Minus` rescaled from their 24-unit
+  // viewBox into this 10.17-unit one (×0.4236), so the painted weight matches every static tick.
+  const mark = indeterminate ? 'M2.12 5.08H8.47' : 'M1.69 5.08L3.81 7.2L8.47 2.54'
+
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+        'motion-reduce:transition-none',
+        className
+      )}
+      style={{ transition: `background-color ${BOX_MS}ms ${EASE}, border-color ${BOX_MS}ms ${EASE}` }}
+      indeterminate={indeterminate}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        keepMounted
+        data-slot="checkbox-indicator"
+        className={cn(
+          'grid size-3.5 place-content-center text-current',
+          // Offset the full dash length at rest, none when checked. Driving it from the
+          // indicator's own data-checked keeps the two durations asymmetric: the draw is slower
+          // and deliberate, the erase is quick.
+          // The transition lives in a class, not inline: an inline `transition` beats any
+          // stylesheet rule, so the slower draw duration below could never take effect.
+          '[&_path]:[transition:stroke-dashoffset_var(--check-uncheck)_var(--check-ease)]',
+          '[&_path]:[stroke-dashoffset:var(--check-len)]',
+          'data-checked:[&_path]:[stroke-dashoffset:0]',
+          'data-checked:[&_path]:[transition-duration:var(--check-draw)]',
+          'motion-reduce:[&_path]:transition-none'
+        )}
+        style={
+          {
+            '--check-len': length,
+            '--check-draw': `${DRAW_MS}ms`,
+            '--check-uncheck': `${UNCHECK_MS}ms`,
+            '--check-ease': EASE,
+          } as React.CSSProperties
+        }
+      >
+        <svg viewBox="0 0 10.1668 10.1668" fill="none" aria-hidden className="size-full overflow-visible">
+          <path
+            ref={pathRef}
+            d={mark}
+            stroke="currentColor"
+            // 2 in lucide's 24-unit box, rescaled: the same painted weight as every static tick.
+            strokeWidth={0.9}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ strokeDasharray: length }}
+          />
+        </svg>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export default CheckboxCheck

package/src/blocks/e-commerce/product-list/product-card-5-reaction-toggle.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import { useEffect, useRef, useState, type ComponentType } from 'react'
+
+import { cn } from '../../../lib/utils'
+
+const PARTICLE_COUNT = 8
+
+/**
+ * The pop/burst keyframes travel with the component instead of living in the
+ * app's stylesheet, so this file is self-contained: drop it in and the
+ * animation works with no Tailwind config or global CSS to copy over.
+ * Injected once per page, guarded by the marker attribute.
+ *
+ * The marker and the keyframe names deliberately match `product-card-3`'s copy of this
+ * component. Blocks install into one flat directory, so a buyer who takes both gets two files
+ * with identical styles — and because the guard is on the marker rather than on the file, the
+ * second one finds the first's `<style>` already there and injects nothing.
+ */
+const STYLE_MARKER = 'data-reaction-toggle-keyframes'
+const STYLES = `
+@keyframes reaction-toggle-pop {
+  0% { transform: scale(1); }
+  30% { transform: scale(0.82); }
+  100% { transform: scale(1); }
+}
+@keyframes reaction-toggle-burst {
+  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
+  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }
+  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }
+}
+.reaction-toggle-pop {
+  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
+}
+.reaction-toggle-burst {
+  animation-name: reaction-toggle-burst;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reaction-toggle-pop,
+  .reaction-toggle-burst { animation: none !important; }
+}
+`
+
+function useReactionToggleStyles() {
+  useEffect(() => {
+    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return
+
+    const style = document.createElement('style')
+    style.setAttribute(STYLE_MARKER, '')
+    style.textContent = STYLES
+    document.head.append(style)
+  }, [])
+}
+
+type ReactionIconProps = {
+  className?: string
+}
+
+type Particle = {
+  rx: number
+  ry: number
+  duration: number
+  delay: number
+  size: number
+}
+
+function buildParticles(): Particle[] {
+  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {
+    const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4
+    const dist = 16 + Math.random() * 10
+
+    return {
+      rx: Math.round(Math.cos(angle) * dist * 10) / 10,
+      ry: Math.round(Math.sin(angle) * dist * 10) / 10,
+      duration: Math.round(500 + Math.random() * 200),
+      delay: Math.round(Math.random() * 60),
+      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100,
+    }
+  })
+}
+
+type ReactionToggleProps = {
+  /** Whether the reaction is currently active (liked/helpful/etc). */
+  active: boolean
+  /** Icon component to render, e.g. `Heart` or `ThumbsUp` from lucide-react. */
+  icon: ComponentType<ReactionIconProps>
+  /** Wrapper class - sizing/positioning of the whole control. */
+  className?: string
+  /** Class applied to the icon itself (e.g. `size-5`). */
+  iconClassName?: string
+  /**
+   * Tailwind color class (e.g. `text-primary`, `text-destructive`) applied to the
+   * icon and particles while active. Drives `fill-current`/`bg-current`, so it
+   * stays in sync with the design system instead of a hardcoded brand color.
+   */
+  activeColorClassName?: string
+}
+
+/**
+ * Heart/thumbs-up style reaction control: the icon pops with an overshoot scale
+ * and sprinkles 8 particles outward the moment it becomes active.
+ */
+export function ProductCard5ReactionToggle({
+  active,
+  icon: Icon,
+  className,
+  iconClassName,
+  activeColorClassName = 'text-primary',
+}: ReactionToggleProps) {
+  const [isBursting, setIsBursting] = useState(false)
+  const wasActive = useRef(active)
+  const particlesRef = useRef<Particle[]>(buildParticles())
+
+  useReactionToggleStyles()
+
+  useEffect(() => {
+    if (active && !wasActive.current) {
+      particlesRef.current = buildParticles()
+      setIsBursting(true)
+      const timeout = setTimeout(() => setIsBursting(false), 700)
+      wasActive.current = active
+      return () => clearTimeout(timeout)
+    }
+
+    wasActive.current = active
+  }, [active])
+
+  return (
+    <span className={cn('relative inline-flex', className)}>
+      <span className={cn('inline-flex', active && 'reaction-toggle-pop')}>
+        <Icon
+          className={cn(
+            'transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]',
+            active ? cn('fill-current', activeColorClassName) : 'fill-transparent',
+            iconClassName
+          )}
+        />
+      </span>
+
+      {isBursting && (
+        <span
+          aria-hidden='true'
+          className={cn('pointer-events-none absolute top-1/2 left-1/2 size-0', activeColorClassName)}
+        >
+          {particlesRef.current.map((particle, index) => (
+            <i
+              key={index}
+              className='reaction-toggle-burst absolute rounded-full bg-current opacity-0'
+              style={
+                {
+                  '--rx': `${particle.rx}px`,
+                  '--ry': `${particle.ry}px`,
+                  animationDuration: `${particle.duration}ms`,
+                  animationDelay: `${particle.delay}ms`,
+                  width: `${2.5 * particle.size}px`,
+                  height: `${2.5 * particle.size}px`,
+                  left: `${-1.25 * particle.size}px`,
+                  top: `${-1.25 * particle.size}px`,
+                } as React.CSSProperties
+              }
+            />
+          ))}
+        </span>
+      )}
+    </span>
+  )
+}
+
+export default ProductCard5ReactionToggle