@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.tsx

@@ -1,371 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-import { Minus, Plus, ShoppingBag } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from '../../../ui/empty'
-import { Separator } from '../../../ui/separator'
-import { SheetClose } from '../../../ui/sheet'
-import type { Money } from '@thorprovider/types'
-import { formatMoney } from '../../../lib/money'
-
-export interface CartItem {
-  /** Backend cart line-item id — the stable identity for update/removal. */
-  id: string
-  name: string
-  variant?: string
-  price: number
-  qty: number
-  /** Optional; an absent image is omitted rather than serialized as `""`. */
-  image?: string
-  /**
-   * Canonical backend line amount. Required for truthful rendering in
-   * `canonical` mode; when absent/invalid the line shows the unavailable
-   * label rather than a numeric fallback.
-   */
-  lineTotal?: Money
-}
-
-export type CartSheetState = 'idle' | 'pending' | 'error'
-
-export interface Navbar4CartSheetProps {
-  items: CartItem[]
-  /**
-   * Quantity DELTA for a backend cart line-item id. The boundary converts the
-   * delta into an absolute quantity against the authoritative current line
-   * quantity before mutating the cart.
-   */
-  onQtyChange: (id: string, delta: number) => void
-  /** Remove the backend cart line-item id. */
-  onRemove: (id: string) => void
-  /** Authoritative backend subtotal. Preferred over any local line math. */
-  subtotal?: Money
-  /** Shown when an authoritative subtotal is supplied but absent/malformed. */
-  subtotalUnavailableLabel?: string
-  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
-  formatMoney?: (money: Money) => string
-  /** @deprecated legacy numeric formatter; ignored when `subtotal` is supplied. */
-  formatPrice?: (value: number) => string
-  onCheckout?: () => void
-  onViewCart?: () => void
-  /**
-   * Backend-authoritative rendering. When `true`, each line amount comes from
-   * the item's canonical `lineTotal` Money and the sheet never recomputes
-   * `price * qty`. When omitted/false, legacy numeric rendering is preserved
-   * for standalone consumers.
-   */
-  canonical?: boolean
-  /** Shown in `canonical` mode when a line amount is missing or malformed. */
-  lineUnavailableLabel?: string
-  /** Cart read/mutation lifecycle. Pending retains confirmed lines; error is recoverable. */
-  state?: CartSheetState
-  /** Message shown when `state` is `error`. */
-  errorLabel?: string
-  /** Label for the recovery action in the error state. */
-  retryLabel?: string
-  /** Recovery action invoked from the error state. */
-  onRetry?: () => void
-  /** Label shown while `state` is `pending`. */
-  pendingLabel?: string
-  /** When `true`, the checkout action is suppressed (checkout not installed). */
-  checkoutUnavailable?: boolean
-  /** When `true`, the checkout action is disabled (cart not ready / invalid amounts). */
-  checkoutDisabled?: boolean
-  /** When `true`, the review action is suppressed (cart view not installed). */
-  viewCartUnavailable?: boolean
-}
-
-const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
-
-/** Approximate Transitions.dev `delete-with-smoky-dissolve` for list rows (Pro effect). */
-const smokyExit = {
-  opacity: 0,
-  y: 10,
-  scale: 0.96,
-  filter: 'blur(8px)',
-  transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] as const },
-}
-
-/**
- * Transitions.dev `texts-reveal`: lines rise from below with blur, staggered.
- * Exit is a quiet in-place fade — no Y return, no reverse stagger.
- */
-const revealEase = [0.22, 1, 0.36, 1] as const
-const revealHidden = { opacity: 0, y: 12, filter: 'blur(3px)' }
-const revealShown = { opacity: 1, y: 0, filter: 'blur(0px)' }
-const revealExit = { opacity: 0, y: 0, filter: 'blur(0px)', transition: { duration: 0.2, ease: 'easeOut' as const } }
-
-export function Navbar4CartSheet({
-  items,
-  onQtyChange,
-  onRemove,
-  subtotal: subtotalProp,
-  subtotalUnavailableLabel = '—',
-  formatMoney: formatMoneyProp,
-  formatPrice,
-  onCheckout,
-  onViewCart,
-  canonical = false,
-  lineUnavailableLabel = '—',
-  state = 'idle',
-  errorLabel = 'No se pudo actualizar el carrito.',
-  retryLabel = 'Reintentar',
-  onRetry,
-  pendingLabel = 'Actualizando el carrito…',
-  checkoutUnavailable = false,
-  checkoutDisabled = false,
-  viewCartUnavailable = false,
-}: Navbar4CartSheetProps) {
-  const reduceMotion = useReducedMotion()
-  const format = formatPrice ?? (value => usdFormatter.format(value))
-  const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
-  const authoritativeSubtotal = subtotalProp !== undefined ? formatMoney(subtotalProp, formatMoneyProp) : null
-  const isEmpty = items.length === 0
-  const isPending = state === 'pending'
-  const isError = state === 'error'
-  /** Wait for the last cart row's exit before revealing empty copy. */
-  const [showEmpty, setShowEmpty] = useState(isEmpty)
-
-  useEffect(() => {
-    if (!isEmpty) {
-      setShowEmpty(false)
-    }
-  }, [isEmpty])
-
-  const lineAmount = (item: CartItem): string => {
-    if (canonical) {
-      if (item.lineTotal === undefined) {
-        return lineUnavailableLabel
-      }
-      return formatMoney(item.lineTotal, formatMoneyProp) ?? lineUnavailableLabel
-    }
-    return format(item.price * item.qty)
-  }
-
-  // A confirmed empty cart is only claimed when no read/mutation is in flight
-  // and no read error is outstanding; otherwise the sheet shows loading/error.
-  const showConfirmedEmpty = showEmpty && !isPending && !isError
-  const mutationsDisabled = isPending
-
-  return (
-    <>
-      <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
-        {isPending ? (
-          <p
-            role='status'
-            aria-live='polite'
-            className='border-border text-muted-foreground border-b px-4 py-2 text-sm'
-          >
-            {pendingLabel}
-          </p>
-        ) : null}
-        {isError ? (
-          <div
-            role='alert'
-            className='border-border flex items-center justify-between gap-2 border-b px-4 py-2 text-sm'
-          >
-            <span className='text-destructive'>{errorLabel}</span>
-            {onRetry ? (
-              <Button variant='ghost' size='sm' onClick={onRetry}>
-                {retryLabel}
-              </Button>
-            ) : null}
-          </div>
-        ) : null}
-        <ul className='flex-1 overflow-y-auto px-4'>
-          <AnimatePresence
-            initial={false}
-            mode='popLayout'
-            onExitComplete={() => {
-              if (items.length === 0) {
-                setShowEmpty(true)
-              }
-            }}
-          >
-            {items.map(item => (
-              <motion.li
-                key={item.id}
-                layout={!reduceMotion}
-                initial={reduceMotion ? false : { opacity: 0, y: 8, filter: 'blur(4px)' }}
-                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
-                exit={reduceMotion ? { opacity: 0 } : smokyExit}
-                transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
-                className='border-border flex gap-4 border-b py-4 last:border-b-0'
-                style={{ willChange: 'transform, opacity, filter' }}
-              >
-                {item.image ? (
-                  <img
-                    src={item.image || undefined}
-                    alt=''
-                    width={80}
-                    height={96}
-                    className='bg-muted size-20 shrink-0 rounded-md object-cover'
-                  />
-                ) : (
-                  <div aria-hidden='true' className='bg-muted size-20 shrink-0 rounded-md' />
-                )}
-                <div className='flex min-w-0 flex-1 flex-col'>
-                  <div className='flex items-start justify-between gap-2'>
-                    <div className='min-w-0'>
-                      <p className='truncate text-sm font-medium'>{item.name}</p>
-                      {item.variant ? (
-                        <p className='text-muted-foreground text-sm'>{item.variant}</p>
-                      ) : null}
-                    </div>
-                    <p className='text-sm font-medium'>{lineAmount(item)}</p>
-                  </div>
-
-                  <div className='mt-auto flex items-center justify-between pt-2'>
-                    <div className='border-border flex items-center rounded-md border'>
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        className='size-8 rounded-r-none'
-                        aria-label={`Decrease quantity, ${item.name}`}
-                        disabled={mutationsDisabled}
-                        onClick={() => onQtyChange(item.id, -1)}
-                      >
-                        <Minus />
-                      </Button>
-                      <span className='w-8 text-center text-sm tabular-nums'>{item.qty}</span>
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        className='size-8 rounded-l-none'
-                        aria-label={`Increase quantity, ${item.name}`}
-                        disabled={mutationsDisabled}
-                        onClick={() => onQtyChange(item.id, 1)}
-                      >
-                        <Plus />
-                      </Button>
-                    </div>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      className='text-muted-foreground hover:text-foreground'
-                      aria-label={`Remove ${item.name} from cart`}
-                      disabled={mutationsDisabled}
-                      onClick={() => onRemove(item.id)}
-                    >
-                      Remove
-                    </Button>
-                  </div>
-                </div>
-              </motion.li>
-            ))}
-          </AnimatePresence>
-        </ul>
-
-        <AnimatePresence>
-          {showConfirmedEmpty ? (
-            <motion.div
-              key='empty'
-              initial={false}
-              exit={reduceMotion ? { opacity: 0 } : revealExit}
-              className='absolute inset-0'
-            >
-              <Empty className='h-full border-0'>
-                <EmptyHeader>
-                  <motion.div
-                    initial={reduceMotion ? false : revealHidden}
-                    animate={revealShown}
-                    transition={
-                      reduceMotion
-                        ? { duration: 0 }
-                        : { duration: 0.5, ease: revealEase, delay: 0 }
-                    }
-                    style={{ willChange: 'transform, opacity, filter' }}
-                  >
-                    <EmptyMedia variant='icon'>
-                      <ShoppingBag aria-hidden='true' />
-                    </EmptyMedia>
-                  </motion.div>
-                  <motion.div
-                    initial={reduceMotion ? false : revealHidden}
-                    animate={revealShown}
-                    transition={
-                      reduceMotion
-                        ? { duration: 0 }
-                        : { duration: 0.5, ease: revealEase, delay: 0.04 }
-                    }
-                    style={{ willChange: 'transform, opacity, filter' }}
-                  >
-                    <EmptyTitle>Your cart is empty</EmptyTitle>
-                  </motion.div>
-                  <motion.div
-                    initial={reduceMotion ? false : revealHidden}
-                    animate={revealShown}
-                    transition={
-                      reduceMotion
-                        ? { duration: 0 }
-                        : { duration: 0.5, ease: revealEase, delay: 0.08 }
-                    }
-                    style={{ willChange: 'transform, opacity, filter' }}
-                  >
-                    <EmptyDescription>Once you add something it will show up here.</EmptyDescription>
-                  </motion.div>
-                </EmptyHeader>
-                <motion.div
-                  initial={reduceMotion ? false : revealHidden}
-                  animate={revealShown}
-                  transition={
-                    reduceMotion
-                      ? { duration: 0 }
-                      : { duration: 0.5, ease: revealEase, delay: 0.12 }
-                  }
-                  style={{ willChange: 'transform, opacity, filter' }}
-                >
-                  <EmptyContent>
-                    <SheetClose asChild>
-                      <Button>Continue shopping</Button>
-                    </SheetClose>
-                  </EmptyContent>
-                </motion.div>
-              </Empty>
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
-      </div>
-
-      {!isEmpty ? (
-        <div className='flex flex-col gap-4 p-4'>
-          <Separator />
-          <div className='flex items-center justify-between text-sm'>
-            <span className='text-muted-foreground'>Subtotal</span>
-            <span className='font-medium tabular-nums'>
-              {canonical || subtotalProp !== undefined
-                ? authoritativeSubtotal ?? subtotalUnavailableLabel
-                : format(localSubtotal)}
-            </span>
-          </div>
-          <p className='text-muted-foreground text-xs'>Shipping and taxes are calculated at checkout.</p>
-          <div className='flex flex-col gap-2'>
-            {checkoutUnavailable ? null : (
-              <Button
-                className='w-full'
-                disabled={checkoutDisabled || isPending}
-                onClick={onCheckout}
-              >
-                Checkout
-              </Button>
-            )}
-            {viewCartUnavailable ? null : (
-              <Button variant='ghost' className='w-full' onClick={onViewCart}>
-                View cart
-              </Button>
-            )}
-          </div>
-        </div>
-      ) : null}
-    </>
-  )
-}

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

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

@@ -1,104 +0,0 @@
-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>
-  )
-}