@thorprovider/blocks 0.1.0

package/src/blocks/marketing/navbars/navbar-4-like-button.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import { useReducedMotion } from 'motion/react'
+
+import { Button } from '../../../ui/button'
+import { cn } from '../../../lib/utils'
+
+const PARTICLE_COUNT = 8
+const PARTICLE_DIST = 20
+
+export interface Navbar4LikeButtonProps {
+  liked?: boolean
+  onLikedChange?: (liked: boolean) => void
+  className?: string
+  'aria-label'?: string
+}
+
+/**
+ * Heart like control — Transitions.dev `like-button`:
+ * fill + spring pop on an HTML wrapper (never the SVG) + 8-dot particle burst.
+ */
+export function Navbar4LikeButton({
+  liked: likedProp,
+  onLikedChange,
+  className,
+  'aria-label': ariaLabel,
+}: Navbar4LikeButtonProps) {
+  const [uncontrolledLiked, setUncontrolledLiked] = useState(false)
+  const [bursting, setBursting] = useState(false)
+  const particlesRef = useRef<HTMLSpanElement>(null)
+  const reduceMotion = useReducedMotion()
+
+  const liked = likedProp ?? uncontrolledLiked
+
+  const setLiked = (next: boolean) => {
+    onLikedChange?.(next)
+    if (likedProp === undefined) {
+      setUncontrolledLiked(next)
+    }
+  }
+
+  const seedParticles = () => {
+    const dots = particlesRef.current?.querySelectorAll<HTMLElement>('i')
+    if (!dots) {
+      return
+    }
+
+    dots.forEach((dot, index) => {
+      const angle = (360 / PARTICLE_COUNT) * index + (Math.random() * 2 - 1) * 16
+      const mag = PARTICLE_DIST * (0.68 + Math.random() * 0.5)
+      const rad = (angle * Math.PI) / 180
+      dot.style.setProperty('--px', `${(Math.cos(rad) * mag).toFixed(2)}px`)
+      dot.style.setProperty('--py', `${(Math.sin(rad) * mag).toFixed(2)}px`)
+      dot.style.setProperty('--pdur', `${Math.round(600 * (0.78 + Math.random() * 0.44))}ms`)
+      dot.style.setProperty('--pdelay', `${Math.round(Math.random() * 70)}ms`)
+      dot.style.setProperty('--p-end-scale', (0.35 + Math.random() * 0.4).toFixed(2))
+      dot.style.setProperty('--psize', (0.6 + Math.random() * 0.8).toFixed(2))
+    })
+  }
+
+  const toggle = () => {
+    if (liked) {
+      setLiked(false)
+      setBursting(false)
+      return
+    }
+
+    setLiked(true)
+    if (reduceMotion) {
+      return
+    }
+
+    setBursting(false)
+    seedParticles()
+    requestAnimationFrame(() => setBursting(true))
+  }
+
+  return (
+    <Button
+      type='button'
+      variant='ghost'
+      size='icon'
+      className={cn(
+        'navbar-4-like bg-background/80 relative size-8 cursor-pointer overflow-visible rounded-full p-0 backdrop-blur-xs',
+        className,
+      )}
+      data-liked={liked ? 'true' : 'false'}
+      data-bursting={bursting ? 'true' : 'false'}
+      aria-pressed={liked}
+      aria-label={ariaLabel ?? (liked ? 'Remove from wishlist' : 'Add to wishlist')}
+      onClick={toggle}
+    >
+      <span
+        className={cn(
+          'navbar-4-like-icon inline-flex size-4 items-center justify-center',
+          liked && !reduceMotion && 'navbar-4-like-icon--pop',
+        )}
+      >
+        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' aria-hidden='true'>
+          <path
+            d='M7.99511 3.42388C6.66221 1.8656 4.4395 1.44643 2.76947 2.87334C1.09944 4.30026 0.86432 6.68598 2.17581 8.3736C3.26622 9.77674 6.56619 12.7361 7.64774 13.6939C7.76874 13.801 7.82925 13.8546 7.89982 13.8757C7.96141 13.8941 8.02881 13.8941 8.0904 13.8757C8.16097 13.8546 8.22147 13.801 8.34248 13.6939C9.42403 12.7361 12.724 9.77674 13.8144 8.3736C15.1259 6.68598 14.9195 4.28525 13.2207 2.87334C11.522 1.46144 9.32801 1.8656 7.99511 3.42388Z'
+            className='navbar-4-like-path'
+            stroke='currentColor'
+            strokeWidth='1.5'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      </span>
+      <span ref={particlesRef} className='navbar-4-like-particles' aria-hidden='true'>
+        {Array.from({ length: PARTICLE_COUNT }, (_, index) => (
+          <i key={index} />
+        ))}
+      </span>
+
+      <style>{`
+        .navbar-4-like {
+          --like-color: oklch(0.6 0.24 15);
+          color: var(--foreground);
+        }
+        .navbar-4-like[data-liked='true'] {
+          color: var(--like-color);
+        }
+        .navbar-4-like-path {
+          fill: transparent;
+          stroke: currentColor;
+          transition: fill 150ms cubic-bezier(0.22, 1, 0.36, 1), stroke 150ms cubic-bezier(0.22, 1, 0.36, 1);
+        }
+        .navbar-4-like[data-liked='true'] .navbar-4-like-path {
+          fill: currentColor;
+        }
+        .navbar-4-like-icon--pop {
+          animation: navbar-4-like-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
+        }
+        @keyframes navbar-4-like-pop {
+          0% { transform: scale(1); }
+          30% { transform: scale(0.82); }
+          100% { transform: scale(1); }
+        }
+        .navbar-4-like-particles {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 0;
+          height: 0;
+          pointer-events: none;
+          color: var(--like-color);
+        }
+        .navbar-4-like-particles i {
+          position: absolute;
+          left: calc(2.5px * var(--psize, 1) / -2);
+          top: calc(2.5px * var(--psize, 1) / -2);
+          width: calc(2.5px * var(--psize, 1));
+          height: calc(2.5px * var(--psize, 1));
+          border-radius: 50%;
+          background: currentColor;
+          opacity: 0;
+        }
+        @keyframes navbar-4-like-burst {
+          0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
+          20% { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1); }
+          100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)); }
+        }
+        .navbar-4-like[data-bursting='true'] .navbar-4-like-particles i {
+          animation: navbar-4-like-burst var(--pdur, 600ms) ease-out var(--pdelay, 0ms) forwards;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .navbar-4-like-icon--pop,
+          .navbar-4-like-particles i {
+            animation: none !important;
+          }
+        }
+      `}</style>
+    </Button>
+  )
+}

package/src/blocks/marketing/navbars/navbar-4-mobile-nav.tsx

@@ -0,0 +1,104 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion'
+import { Separator } from '../../../ui/separator'
+import { SheetClose } from '../../../ui/sheet'
+import { cn } from '../../../lib/utils'
+
+export interface StoreCategory {
+  label: string
+  href: string
+  /** Rendered as an accordion inside the mobile sheet; omit for a flat link. */
+  children?: { label: string; href: string }[]
+  /** Styles the link with `text-destructive` — reserve it for one entry. */
+  emphasis?: boolean
+}
+
+export interface UtilityLink {
+  label: string
+  href: string
+}
+
+export interface Navbar4MobileNavProps {
+  storeCategories: StoreCategory[]
+  utilityLinks: UtilityLink[]
+  /** When provided, an extra "Account" link is appended after the utility links. */
+  accountHref?: string
+}
+
+export function Navbar4MobileNav({
+  storeCategories,
+  utilityLinks,
+  accountHref,
+}: Navbar4MobileNavProps) {
+  return (
+    <nav aria-label='Store' className='px-2 py-2'>
+      <Accordion type='multiple'>
+        {storeCategories.map(category =>
+          category.children ? (
+            <AccordionItem key={category.href} value={category.href} className='border-none'>
+              <AccordionTrigger className='px-3 py-3 text-base font-medium hover:no-underline'>
+                {category.label}
+              </AccordionTrigger>
+              <AccordionContent className='pb-1'>
+                <ul className='flex flex-col'>
+                  {category.children.map(child => (
+                    <li key={child.href}>
+                      <SheetClose asChild>
+                        <a
+                          href={child.href}
+                          className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'
+                        >
+                          {child.label}
+                        </a>
+                      </SheetClose>
+                    </li>
+                  ))}
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+          ) : (
+            <SheetClose key={category.href} asChild>
+              <a
+                href={category.href}
+                className={cn(
+                  'hover:bg-accent block rounded-md px-3 py-3 text-base font-medium transition-colors duration-150',
+                  category.emphasis && 'text-destructive',
+                )}
+              >
+                {category.label}
+              </a>
+            </SheetClose>
+          ),
+        )}
+      </Accordion>
+
+      <Separator className='my-2' />
+
+      <ul className='flex flex-col'>
+        {utilityLinks.map(link => (
+          <li key={link.href}>
+            <SheetClose asChild>
+              <a
+                href={link.href}
+                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'
+              >
+                {link.label}
+              </a>
+            </SheetClose>
+          </li>
+        ))}
+        {accountHref ? (
+          <li>
+            <SheetClose asChild>
+              <a
+                href={accountHref}
+                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'
+              >
+                Account
+              </a>
+            </SheetClose>
+          </li>
+        ) : null}
+      </ul>
+    </nav>
+  )
+}

package/src/blocks/marketing/navbars/navbar-4-product-grid.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import type { JSX } from 'react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { Flame, ShoppingBag, Sparkles, Star, Trophy } from 'lucide-react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Card, CardContent } from '../../../ui/card'
+import { cn } from '../../../lib/utils'
+
+import { Navbar4LikeButton } from './navbar-4-like-button'
+
+export interface CatalogProduct {
+  id: string
+  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 Navbar4ProductGridProps {
+  products: CatalogProduct[]
+  searchQuery: string
+  /** When omitted, the section heading is hidden. */
+  heading?: string
+  currencySymbol?: string
+  onAddToCart?: (product: CatalogProduct) => void
+}
+
+const filterEase = [0.22, 1, 0.36, 1] as const
+
+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 Navbar4ProductCardProps {
+  product: CatalogProduct
+  currencySymbol?: string
+  onAddToCart?: (product: CatalogProduct) => void
+}
+
+function Navbar4ProductCard({
+  product,
+  currencySymbol = '$',
+  onAddToCart,
+}: Navbar4ProductCardProps) {
+  const badgeStyle = product.badge ? badgeStyles[product.badge.variant] || badgeStyles.new : null
+
+  return (
+    <Card className='relative overflow-hidden rounded-md py-0 shadow-none transition-shadow hover:shadow-md'>
+      <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(
+                  'flex h-auto items-center gap-1 px-2 py-1 font-semibold text-white backdrop-blur-xs',
+                  badgeStyle.bg,
+                )}
+              >
+                {badgeStyle.icon}
+                <span className='text-xs font-medium'>{product.badge.text}</span>
+              </Badge>
+            </div>
+          ) : null}
+
+          {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>
+              ) : null}
+            </div>
+          ) : null}
+
+          <Navbar4LikeButton className='absolute end-2 top-2 z-20' />
+        </div>
+
+        <div className='flex flex-col gap-3 p-4'>
+          <div className='flex flex-col gap-1.5'>
+            <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-destructive text-sm'>Only few items left!</p> : null}
+
+          <Button className='w-full' onClick={onAddToCart ? () => onAddToCart(product) : undefined}>
+            <ShoppingBag data-icon='inline-start' />
+            Add to cart
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function Navbar4ProductGrid({
+  products,
+  searchQuery,
+  heading,
+  currencySymbol,
+  onAddToCart,
+}: Navbar4ProductGridProps) {
+  const reduceMotion = useReducedMotion()
+  const query = searchQuery.trim().toLowerCase()
+  const filtered = query
+    ? products.filter(
+        product =>
+          product.title.toLowerCase().includes(query) || product.subtitle.toLowerCase().includes(query),
+      )
+    : products
+
+  return (
+    <section aria-label='Featured products' className='mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8'>
+      <div className='mb-6 flex items-end justify-between gap-4'>
+        <div>
+          {heading ? (
+            <h2 className='text-lg font-semibold tracking-tight'>{heading}</h2>
+          ) : null}
+          <p className='text-muted-foreground text-sm'>
+            {query
+              ? `${filtered.length} ${filtered.length === 1 ? 'result' : 'results'} for “${searchQuery.trim()}”`
+              : 'Shop the latest pieces — add anything to your bag.'}
+          </p>
+        </div>
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className='border-border bg-muted/30 flex min-h-64 items-center justify-center rounded-xl border border-dashed px-6 text-center'>
+          <div>
+            <p className='font-medium'>No products match your search</p>
+            <p className='text-muted-foreground mt-1 text-sm'>Try a different keyword or clear the search.</p>
+          </div>
+        </div>
+      ) : (
+        <motion.ul
+          layout
+          className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'
+          transition={{ duration: 0.28, ease: filterEase }}
+        >
+          <AnimatePresence mode='popLayout'>
+            {filtered.map(product => (
+              <motion.li
+                key={product.id}
+                layout={!reduceMotion}
+                initial={reduceMotion ? false : { opacity: 0, y: 12, scale: 0.97 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={
+                  reduceMotion
+                    ? undefined
+                    : {
+                        opacity: 0,
+                        y: -8,
+                        scale: 0.98,
+                        filter: 'blur(4px)',
+                        transition: { duration: 0.2, ease: 'easeIn' },
+                      }
+                }
+                transition={{ duration: 0.28, ease: filterEase }}
+              >
+                <Navbar4ProductCard
+                  product={product}
+                  currencySymbol={currencySymbol}
+                  onAddToCart={onAddToCart}
+                />
+              </motion.li>
+            ))}
+          </AnimatePresence>
+        </motion.ul>
+      )}
+    </section>
+  )
+}

package/src/blocks/marketing/navbars/navbar-4-search-bar.tsx

@@ -0,0 +1,52 @@
+import { Search } from 'lucide-react'
+
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../../../ui/input-group'
+
+export interface Navbar4SearchBarProps {
+  value: string
+  onValueChange: (value: string) => void
+  onDismiss?: () => void
+  id?: string
+}
+
+export function Navbar4SearchBar({
+  value,
+  onValueChange,
+  onDismiss,
+  id = 'store-search',
+}: Navbar4SearchBarProps) {
+  return (
+    <form
+      role='search'
+      onSubmit={event => event.preventDefault()}
+      className='w-full'
+      onKeyDown={event => {
+        if (event.key === 'Escape') {
+          if (value) {
+            onValueChange('')
+            return
+          }
+          onDismiss?.()
+        }
+      }}
+    >
+      <label htmlFor={id} className='sr-only'>
+        Search products
+      </label>
+      <InputGroup className='bg-muted/40 h-9 w-full rounded-full border-transparent shadow-none has-[[data-slot=input-group-control]:focus-visible]:bg-background'>
+        <InputGroupAddon>
+          <Search aria-hidden='true' className='text-muted-foreground size-4' />
+        </InputGroupAddon>
+        <InputGroupInput
+          id={id}
+          type='search'
+          autoComplete='off'
+          placeholder='Search products'
+          value={value}
+          onChange={event => onValueChange(event.target.value)}
+          className='rounded-full'
+        />
+      </InputGroup>
+    </form>
+  )
+}