@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/marketing/navbars/navbar-3.tsx

@@ -1,303 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState, type ComponentProps, type Ref } from 'react'
-import { Menu } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import { Separator } from '../../../ui/separator'
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '../../../ui/sheet'
-import { cn } from '../../../lib/utils'
-import type { CTA } from '../../../lib/types'
-
-export interface NavLink {
-  label: string
-  href?: string
-}
-
-export interface Navbar3Props {
-  navLinks: NavLink[]
-  /** Brand text shown next to the logo mark. */
-  logoText: string
-  logoHref?: string
-  /** Current path used to highlight the active nav link. */
-  currentPath?: string
-  /** Sign-in action. Rendered as a link when `href` is set, otherwise as a button. */
-  signIn?: CTA
-  /** Primary call-to-action. Rendered as a link when `href` is set, otherwise as a button. */
-  cta?: CTA
-  /**
-   * When `true` (default), the header condenses into a floating rounded pill once scrolled.
-   * Set to `false` for a plain solid bar instead of the condensing pill.
-   */
-  floatingPill?: boolean
-  /** Fired when the sign-in button (no `href`) is clicked. */
-  onSignIn?: () => void
-  /** Fired when the CTA button (no `href`) is clicked. */
-  onCtaClick?: () => void
-}
-
-/**
- * Composition contract
- * --------------------
- * The header is `fixed`, so the first section of the page must clear it with `pt-16`,
- * and `html { scroll-padding-top: 4rem }` keeps in-page anchors from landing underneath it.
- *
- * Set `floatingPill` to false for a plain solid bar on scroll instead of the condensing pill.
- */
-function Logo({ text, href }: { text: string; href?: string }) {
-  const className =
-    'focus-visible:ring-ring flex items-center gap-2 rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'
-
-  const content = (
-    <>
-      <svg viewBox='0 0 32 32' aria-hidden='true' className='text-primary size-7' fill='none' xmlns='http://www.w3.org/2000/svg'>
-        <path
-          d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-          fill='currentColor'
-        />
-        <path
-          d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-          fill='currentColor'
-        />
-        <path
-          d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-          fill='currentColor'
-        />
-        <path
-          d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-          fill='currentColor'
-        />
-        <path
-          d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-          fill='currentColor'
-        />
-        <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
-        <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
-        <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
-        <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
-      </svg>
-      <span className='text-base font-semibold tracking-tight'>{text}</span>
-    </>
-  )
-
-  if (!href) {
-    return <span className={className}>{content}</span>
-  }
-
-  return (
-    <a href={href} className={className}>
-      {content}
-    </a>
-  )
-}
-
-function ActionButton({
-  cta,
-  onClick,
-  variant,
-  className,
-  rounded,
-  ref,
-}: {
-  cta: CTA
-  onClick?: () => void
-  variant?: ComponentProps<typeof Button>['variant']
-  className?: string
-  rounded?: boolean
-  ref?: Ref<HTMLButtonElement>
-}) {
-  const classes = cn(rounded && 'rounded-full', className)
-
-  if (cta.href && !onClick) {
-    return (
-      <Button variant={variant} size='sm' className={classes} asChild ref={ref}>
-        <a href={cta.href}>{cta.label}</a>
-      </Button>
-    )
-  }
-
-  return (
-    <Button variant={variant} size='sm' className={classes} onClick={onClick} ref={ref}>
-      {cta.label}
-    </Button>
-  )
-}
-
-export function Navbar3({
-  navLinks,
-  logoText,
-  logoHref,
-  currentPath,
-  signIn,
-  cta,
-  floatingPill = true,
-  onSignIn,
-  onCtaClick,
-}: Navbar3Props) {
-  const sentinelRef = useRef<HTMLDivElement>(null)
-  const [scrolled, setScrolled] = useState(false)
-  const [open, setOpen] = useState(false)
-
-  /**
-   * Scroll detection:
-   * - Inside the store preview the scroller is an overflow ancestor (not the viewport).
-   *   IntersectionObserver + an out-of-flow sentinel is unreliable there, so use scrollTop.
-   * - On a normal page, an IntersectionObserver on the 8px sentinel gives hysteresis without
-   *   flickering at a hard `scrollY > 8` threshold.
-   */
-  useEffect(() => {
-    const sentinel = sentinelRef.current
-    if (!sentinel) {
-      return
-    }
-
-    let scrollParent: HTMLElement | null = null
-    let ancestor: HTMLElement | null = sentinel.parentElement
-    while (ancestor) {
-      const { overflowY } = getComputedStyle(ancestor)
-      if (
-        (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
-        ancestor.scrollHeight > ancestor.clientHeight + 1
-      ) {
-        scrollParent = ancestor
-        break
-      }
-      ancestor = ancestor.parentElement
-    }
-
-    if (scrollParent) {
-      const scroller = scrollParent
-      const update = () => setScrolled(scroller.scrollTop > 8)
-      update()
-      scroller.addEventListener('scroll', update, { passive: true })
-      return () => scroller.removeEventListener('scroll', update)
-    }
-
-    const observer = new IntersectionObserver(([entry]) => setScrolled(!entry.isIntersecting), {
-      threshold: 0,
-    })
-
-    observer.observe(sentinel)
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <>
-      {/*
-        Absolute + out of flow: keeps an 8px hysteresis target for the observer
-        without painting a blank strip under the transparent (unscrolled) header.
-      */}
-      <div
-        ref={sentinelRef}
-        aria-hidden='true'
-        className='pointer-events-none absolute inset-x-0 top-0 h-2'
-      />
-
-      <header className='fixed inset-x-0 top-0 z-50'>
-        <div
-          className={cn(
-            'mx-auto flex h-14 items-center justify-between gap-4 transition-all duration-300 ease-out motion-reduce:transition-none',
-            scrolled
-              ? floatingPill
-                ? 'border-border/60 bg-background/80 mt-3 max-w-5xl rounded-full border px-4 shadow-sm backdrop-blur-md sm:px-5'
-                : 'border-border/60 bg-background/90 max-w-full border-b px-4 backdrop-blur-md sm:px-6 lg:px-8'
-              : 'max-w-7xl border border-transparent px-4 sm:px-6 lg:px-8'
-          )}
-        >
-          <Logo text={logoText} href={logoHref} />
-
-          <nav aria-label='Main' className='hidden lg:block'>
-            <ul className='flex items-center gap-1'>
-              {navLinks.map(link => {
-                const isActive = link.href !== undefined && link.href === currentPath
-                const className = cn(
-                  'hover:text-foreground focus-visible:ring-ring rounded-full px-3 py-2 text-sm font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
-                  isActive ? 'text-foreground' : 'text-muted-foreground'
-                )
-
-                return (
-                  <li key={link.label}>
-                    {link.href ? (
-                      <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
-                        {link.label}
-                      </a>
-                    ) : (
-                      <span className={className}>{link.label}</span>
-                    )}
-                  </li>
-                )
-              })}
-            </ul>
-          </nav>
-
-          <div className='hidden items-center gap-2 lg:flex'>
-            {signIn && <ActionButton cta={signIn} onClick={onSignIn} variant='ghost' />}
-            {cta && <ActionButton cta={cta} onClick={onCtaClick} rounded={floatingPill} />}
-          </div>
-
-          <Sheet open={open} onOpenChange={setOpen}>
-            <SheetTrigger asChild>
-              <Button variant='ghost' size='icon' aria-label='Open menu' className='lg:hidden'>
-                <Menu />
-              </Button>
-            </SheetTrigger>
-            <SheetContent side='right' className='w-full max-w-xs p-0'>
-              <SheetHeader className='border-border border-b'>
-                <SheetTitle className='text-left text-base'>Menu</SheetTitle>
-              </SheetHeader>
-
-              <nav aria-label='Mobile' className='flex flex-col px-2 py-2'>
-                {navLinks.map(link => {
-                  const isActive = link.href !== undefined && link.href === currentPath
-                  const className = cn(
-                    'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md px-3 py-3 text-base font-medium transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:outline-none',
-                    isActive ? 'text-foreground' : 'text-muted-foreground'
-                  )
-
-                  return (
-                    <SheetClose key={link.label} asChild>
-                      {link.href ? (
-                        <a href={link.href} aria-current={isActive ? 'page' : undefined} className={className}>
-                          {link.label}
-                        </a>
-                      ) : (
-                        <button type='button' className={className}>
-                          {link.label}
-                        </button>
-                      )}
-                    </SheetClose>
-                  )
-                })}
-              </nav>
-
-              <div className='mt-auto flex flex-col gap-4 p-4'>
-                <Separator />
-                <div className='flex flex-col gap-2'>
-                  {signIn && (
-                    <SheetClose asChild>
-                      <ActionButton cta={signIn} onClick={onSignIn} variant='outline' className='w-full' />
-                    </SheetClose>
-                  )}
-                  {cta && (
-                    <SheetClose asChild>
-                      <ActionButton cta={cta} onClick={onCtaClick} className='w-full' />
-                    </SheetClose>
-                  )}
-                </div>
-              </div>
-            </SheetContent>
-          </Sheet>
-        </div>
-      </header>
-    </>
-  )
-}
-
-export default Navbar3

package/src/blocks/marketing/navbars/navbar-4-account-menu.test.tsx

@@ -1,38 +0,0 @@
-import { Children, isValidElement, type ReactNode } from 'react'
-import { describe, expect, it } from 'vitest'
-import { Navbar4AccountMenu } from './navbar-4-account-menu'
-import { DropdownMenuItem } from '../../../ui/dropdown-menu'
-
-// Inspect the block-owned menu items without mounting Radix's browser portal.
-function menuItems(node: ReactNode): Record<string, unknown>[] {
-  return Children.toArray(node).flatMap(child => {
-    if (!isValidElement<{ children?: ReactNode }>(child)) return []
-    return [
-      ...(child.type === DropdownMenuItem ? [child.props as Record<string, unknown>] : []),
-      ...menuItems(child.props.children),
-    ]
-  })
-}
-
-const user = { name: 'Ada', email: 'ada@example.test', initials: 'A' }
-
-describe('Navbar4AccountMenu consumer actions', () => {
-  it('omits help and sign-out when no consumer actions exist', () => {
-    expect(menuItems(Navbar4AccountMenu({ user }))).toEqual([])
-  })
-
-  it('dispatches sign-out to its consumer', () => {
-    let calls = 0
-    const [item] = menuItems(Navbar4AccountMenu({ user, onSignOut: () => { calls++ } }))
-    ;(item.onSelect as () => void)()
-    expect(calls).toBe(1)
-  })
-
-  it('rejects further sign-out selection while the consumer is pending', () => {
-    let calls = 0
-    const [item] = menuItems(Navbar4AccountMenu({ user, pending: true, onSignOut: () => { calls++ } }))
-    expect(item.disabled).toBe(true)
-    ;(item.onSelect as () => void)()
-    expect(calls).toBe(0)
-  })
-})

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>
-  )
-}