@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/marketing/footers/footer-section.test.tsx

@@ -1,46 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { FooterSection, type FooterSectionProps } from './footer-section'
-
-const presentations = ['brand-columns', 'newsletter-grid', 'contact'] as const
-
-const sharedProps = {
-  brandName: 'Thor Provider',
-  brandDescription: 'Repuestos y soluciones para talleres.',
-  linkColumns: [
-    {
-      title: 'Repuestos',
-      links: [{ label: 'Catálogo de repuestos', href: '/repuestos' }],
-    },
-  ],
-  copyright: '© 2026 Thor Provider',
-} satisfies Omit<FooterSectionProps, 'presentation'>
-
-describe('FooterSection', () => {
-  it('rejects a missing presentation instead of silently choosing a layout', () => {
-    expect(() =>
-      render(
-        <FooterSection
-          {...sharedProps}
-          presentation={undefined as unknown as FooterSectionProps['presentation']}
-        />,
-      ),
-    ).toThrow(/presentation/i)
-  })
-
-  it.each(presentations)(
-    'renders the shared page-level footer responsibilities for %s',
-    (presentation) => {
-      render(<FooterSection {...sharedProps} presentation={presentation} />)
-
-      expect(screen.getByRole('contentinfo')).toBeTruthy()
-      expect(screen.getByText('Thor Provider')).toBeTruthy()
-      expect(screen.getByText('Repuestos y soluciones para talleres.')).toBeTruthy()
-      expect(screen.getByText('Repuestos')).toBeTruthy()
-      expect(screen.getByText('Catálogo de repuestos')).toBeTruthy()
-      expect(screen.getByText('© 2026 Thor Provider')).toBeTruthy()
-    },
-  )
-})

package/src/blocks/marketing/footers/footer-section.tsx

@@ -1,532 +0,0 @@
-'use client'
-
-import { useId, useState, type FormEvent, type ReactNode } from 'react'
-import { ArrowRight, type LucideIcon } from 'lucide-react'
-import { cn } from '../../../lib/utils'
-import { Button } from '../../../ui/button'
-import { Input } from '../../../ui/input'
-
-export type FooterPresentation = 'brand-columns' | 'newsletter-grid' | 'contact'
-export type FooterLinkBehavior = 'host' | 'native'
-
-export interface FooterBrandAccent {
-  text: string
-  className?: string
-}
-
-export interface FooterLink {
-  label: string
-  href?: string
-}
-
-export interface FooterLinkColumn {
-  title: string
-  links: FooterLink[]
-}
-
-export interface FooterSocialLink {
-  label: string
-  href?: string
-  icon: string
-  ariaLabel?: string
-}
-
-export interface FooterNewsletter {
-  title?: string
-  placeholder?: string
-  buttonLabel: string
-}
-
-export interface FooterContactItem {
-  label: string
-  href?: string
-}
-
-export interface FooterContact {
-  heading?: string
-  address?: FooterContactItem
-  phone?: FooterContactItem
-  email?: FooterContactItem
-}
-
-export interface FooterSectionProps {
-  presentation: FooterPresentation
-  brandName: string
-  linkColumns: FooterLinkColumn[]
-  brandAccent?: FooterBrandAccent
-  brandDescription?: string
-  newsletter?: FooterNewsletter
-  contact?: FooterContact
-  legalLinks?: FooterLink[]
-  socialLinks?: FooterSocialLink[]
-  copyright?: string
-  logo?: ReactNode
-  socialIcons?: Record<string, LucideIcon>
-  className?: string
-  linkBehavior?: FooterLinkBehavior
-  socialLinkBehavior?: FooterLinkBehavior
-  onNewsletterSubmit?: (email: string) => void
-  onLinkClick?: (link: FooterLink) => void
-  onSocialClick?: (label: string) => void
-}
-
-const footerPresentations: readonly FooterPresentation[] = [
-  'brand-columns',
-  'newsletter-grid',
-  'contact',
-]
-
-function DefaultFooterMark() {
-  return (
-    <svg
-      aria-hidden="true"
-      className="size-8 shrink-0 text-primary"
-      viewBox="0 0 32 32"
-      fill="none"
-    >
-      <path
-        d="M4 5h6v18h17M7 11h18l-4 8H7V11Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-      <circle cx="11" cy="27" r="1.5" fill="currentColor" />
-      <circle cx="23" cy="27" r="1.5" fill="currentColor" />
-    </svg>
-  )
-}
-
-function FooterBrand({
-  brandName,
-  brandAccent,
-  brandDescription,
-  logo,
-}: Pick<
-  FooterSectionProps,
-  'brandName' | 'brandAccent' | 'brandDescription' | 'logo'
->) {
-  const accent = brandAccent?.text ?? ''
-  const hasTrailingAccent = Boolean(accent && brandName.endsWith(accent))
-  const brandPrefix = hasTrailingAccent
-    ? brandName.slice(0, brandName.length - accent.length)
-    : brandName
-
-  return (
-    <div className="flex max-w-sm flex-col gap-4">
-      <div className="flex items-center gap-3">
-        {logo ?? <DefaultFooterMark />}
-        <h2 className="text-2xl font-bold text-balance">
-          {brandPrefix}
-          {hasTrailingAccent ? (
-            <span className={cn('text-primary', brandAccent?.className)}>
-              {accent}
-            </span>
-          ) : null}
-        </h2>
-      </div>
-      {brandDescription ? (
-        <p className="text-muted-foreground text-sm leading-relaxed text-balance">
-          {brandDescription}
-        </p>
-      ) : null}
-    </div>
-  )
-}
-
-function FooterContactDetails({ contact }: { contact?: FooterContact }) {
-  if (!contact) return null
-
-  const items = [contact.address, contact.phone, contact.email].filter(
-    (item): item is FooterContactItem => Boolean(item),
-  )
-
-  if (items.length === 0 && !contact.heading) return null
-
-  return (
-    <address className="not-italic">
-      {contact.heading ? (
-        <h3 className="mb-4 text-base font-semibold text-balance">
-          {contact.heading}
-        </h3>
-      ) : null}
-      <ul className="flex flex-col gap-3">
-        {items.map((item) => (
-          <li key={JSON.stringify([item.label, item.href ?? null])}>
-            {item.href ? (
-              <a
-                href={item.href}
-                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-              >
-                {item.label}
-              </a>
-            ) : (
-              <span className="text-muted-foreground text-sm">
-                {item.label}
-              </span>
-            )}
-          </li>
-        ))}
-      </ul>
-    </address>
-  )
-}
-
-function assertUniqueKeys<T>(
-  items: readonly T[],
-  getTuple: (item: T) => readonly (string | null)[],
-  listName: string,
-) {
-  const keys = new Set<string>()
-
-  for (const item of items) {
-    const key = JSON.stringify(getTuple(item))
-
-    if (typeof key !== 'string') {
-      throw new Error(`FooterSection could not derive a ${listName} key.`)
-    }
-
-    if (keys.has(key)) {
-      throw new Error(`FooterSection ${listName} keys must be unique.`)
-    }
-
-    keys.add(key)
-  }
-}
-
-function FooterNewsletterForm({
-  newsletter,
-  onSubmit,
-}: {
-  newsletter: FooterNewsletter
-  onSubmit?: (email: string) => void
-}) {
-  const [email, setEmail] = useState('')
-  const inputId = useId()
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    if (!onSubmit) return
-
-    onSubmit(email)
-  }
-
-  return (
-    <section aria-label={newsletter.title ?? 'Newsletter'} className="w-full">
-      {newsletter.title ? (
-        <h3 className="mb-4 text-base font-semibold text-balance">
-          {newsletter.title}
-        </h3>
-      ) : null}
-      <form className="flex w-full max-w-xl gap-2" onSubmit={handleSubmit}>
-        <label htmlFor={inputId} className="sr-only">
-          {newsletter.placeholder ?? newsletter.title ?? newsletter.buttonLabel}
-        </label>
-        <Input
-          id={inputId}
-          type="email"
-          autoComplete="email"
-          placeholder={newsletter.placeholder}
-          value={email}
-          onChange={(event) => setEmail(event.currentTarget.value)}
-          disabled={!onSubmit}
-        />
-        <Button type="submit" disabled={!onSubmit}>
-          {newsletter.buttonLabel}
-          <ArrowRight aria-hidden="true" />
-        </Button>
-      </form>
-    </section>
-  )
-}
-
-function FooterSocialLinks({
-  socialLinks,
-  socialIcons,
-  onSocialClick,
-  socialLinkBehavior,
-}: {
-  socialLinks?: FooterSocialLink[]
-  socialIcons?: Record<string, LucideIcon>
-  onSocialClick?: (label: string) => void
-  socialLinkBehavior: FooterLinkBehavior
-}) {
-  if (!socialLinks || socialLinks.length === 0) return null
-
-  return (
-    <nav aria-label="Social media">
-      <ul className="flex flex-wrap items-center gap-3">
-        {socialLinks.map((social) => {
-          const Icon = socialIcons?.[social.icon]
-          const content = Icon ? (
-            <>
-              <Icon aria-hidden="true" className="size-5" />
-              <span className="sr-only">{social.label}</span>
-            </>
-          ) : (
-            social.label
-          )
-
-          return (
-            <li key={JSON.stringify([social.label, social.href ?? null, social.icon])}>
-              {social.href &&
-              (socialLinkBehavior === 'native' || onSocialClick) ? (
-                <a
-                  href={social.href}
-                  aria-label={social.ariaLabel ?? social.label}
-                  onClick={(event) => {
-                    if (socialLinkBehavior === 'host') {
-                      event.preventDefault()
-                    }
-                    onSocialClick?.(social.label)
-                  }}
-                  className="inline-flex min-h-10 min-w-10 items-center justify-center rounded-full bg-accent p-2 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden"
-                >
-                  {content}
-                </a>
-              ) : (
-                <span className="text-muted-foreground text-sm">{content}</span>
-              )}
-            </li>
-          )
-        })}
-      </ul>
-    </nav>
-  )
-}
-
-function FooterLegalLinks({
-  links,
-  onLinkClick,
-  linkBehavior,
-}: {
-  links?: FooterLink[]
-  onLinkClick?: (link: FooterLink) => void
-  linkBehavior: FooterLinkBehavior
-}) {
-  if (!links || links.length === 0) return null
-
-  return (
-    <nav aria-label="Legal information">
-      <ul className="flex flex-wrap gap-x-5 gap-y-2">
-        {links.map((link) => (
-          <li key={JSON.stringify([link.label, link.href ?? null])}>
-            {link.href && (linkBehavior === 'native' || onLinkClick) ? (
-              <a
-                href={link.href}
-                onClick={(event) => {
-                  if (linkBehavior === 'host') {
-                    event.preventDefault()
-                  }
-                  onLinkClick?.(link)
-                }}
-                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-              >
-                {link.label}
-              </a>
-            ) : (
-              <span className="text-muted-foreground text-sm">
-                {link.label}
-              </span>
-            )}
-          </li>
-        ))}
-      </ul>
-    </nav>
-  )
-}
-
-function FooterLinkColumns({
-  columns,
-  onLinkClick,
-  linkBehavior,
-  className,
-}: {
-  columns: FooterLinkColumn[]
-  onLinkClick?: (link: FooterLink) => void
-  linkBehavior: FooterLinkBehavior
-  className?: string
-}) {
-  if (columns.length === 0) return null
-
-  return (
-    <div className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2', className)}>
-      {columns.map((column) => (
-        <nav key={JSON.stringify([column.title])} aria-label={column.title}>
-          <h3 className="mb-4 text-base font-semibold text-balance">
-            {column.title}
-          </h3>
-          <ul className="flex flex-col gap-3">
-            {column.links.map((link) => (
-              <li key={JSON.stringify([link.label, link.href ?? null])}>
-                {link.href && (linkBehavior === 'native' || onLinkClick) ? (
-                  <a
-                    href={link.href}
-                    onClick={(event) => {
-                      if (linkBehavior === 'host') {
-                        event.preventDefault()
-                      }
-                      onLinkClick?.(link)
-                    }}
-                    className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm text-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
-                  >
-                    {link.label}
-                  </a>
-                ) : (
-                  <span className="text-muted-foreground text-sm">
-                    {link.label}
-                  </span>
-                )}
-              </li>
-            ))}
-          </ul>
-        </nav>
-      ))}
-    </div>
-  )
-}
-
-export function FooterSection({
-  presentation,
-  brandName,
-  brandAccent,
-  brandDescription,
-  linkColumns,
-  newsletter,
-  contact,
-  legalLinks,
-  socialLinks,
-  socialIcons,
-  copyright,
-  logo,
-  className,
-  onNewsletterSubmit,
-  onLinkClick,
-  onSocialClick,
-  linkBehavior = 'host',
-  socialLinkBehavior = 'host',
-}: FooterSectionProps) {
-  if (!footerPresentations.includes(presentation)) {
-    throw new Error(
-      `FooterSection requires a supported presentation; received ${String(presentation)}.`,
-    )
-  }
-
-  assertUniqueKeys(linkColumns, (column) => [column.title], 'column')
-
-  for (const column of linkColumns) {
-    assertUniqueKeys(
-      column.links,
-      (link) => [link.label, link.href ?? null],
-      'link',
-    )
-  }
-
-  assertUniqueKeys(
-    legalLinks ?? [],
-    (link) => [link.label, link.href ?? null],
-    'legal link',
-  )
-  assertUniqueKeys(
-    socialLinks ?? [],
-    (social) => [social.label, social.href ?? null, social.icon],
-    'social',
-  )
-
-  const brand = (
-    <FooterBrand
-      brandName={brandName}
-      brandAccent={brandAccent}
-      brandDescription={brandDescription}
-      logo={logo}
-    />
-  )
-  const columns = (
-    <FooterLinkColumns
-      columns={linkColumns}
-      onLinkClick={onLinkClick}
-      linkBehavior={linkBehavior}
-    />
-  )
-  const contactDetails = <FooterContactDetails contact={contact} />
-  const newsletterForm = newsletter ? (
-    <FooterNewsletterForm
-      newsletter={newsletter}
-      onSubmit={onNewsletterSubmit}
-    />
-  ) : null
-  const legal = (
-    <FooterLegalLinks
-      links={legalLinks}
-      onLinkClick={onLinkClick}
-      linkBehavior={linkBehavior}
-    />
-  )
-  const socials = (
-    <FooterSocialLinks
-      socialLinks={socialLinks}
-      socialIcons={socialIcons}
-      onSocialClick={onSocialClick}
-      socialLinkBehavior={socialLinkBehavior}
-    />
-  )
-
-  return (
-    <footer
-      role="contentinfo"
-      aria-label={`${brandName} footer`}
-      className={cn(
-        'w-full border-t border-border bg-background text-foreground',
-        className,
-      )}
-    >
-      <div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
-        {presentation === 'brand-columns' ? (
-          <div className="grid gap-12 md:grid-cols-[minmax(0,1fr)_2fr]">
-            <div className="flex flex-col gap-8">
-              {brand}
-              {newsletterForm}
-              {contactDetails}
-            </div>
-            <div className="flex flex-col gap-8">
-              {columns}
-              {legal}
-            </div>
-          </div>
-        ) : null}
-
-        {presentation === 'newsletter-grid' ? (
-          <div className="flex flex-col gap-12">
-            <div className="grid gap-8 border-b border-border pb-10 md:grid-cols-[minmax(0,1fr)_2fr] md:items-end">
-              {brand}
-              {contactDetails}
-            </div>
-            {newsletterForm}
-            {columns}
-            {legal}
-          </div>
-        ) : null}
-
-        {presentation === 'contact' ? (
-          <div className="grid gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_2fr]">
-            {brand}
-            {contactDetails}
-            <div className="flex flex-col gap-8">
-              {newsletterForm}
-              {columns}
-              {legal}
-            </div>
-          </div>
-        ) : null}
-
-        {socials ? <div className="mt-10">{socials}</div> : null}
-
-        {copyright ? (
-          <div className="mt-10 border-t border-border pt-6">
-            <p className="text-muted-foreground text-sm">{copyright}</p>
-          </div>
-        ) : null}
-      </div>
-    </footer>
-  )
-}

package/src/blocks/marketing/hero-sections/avatar-group.tsx

@@ -1,86 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useState } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * @title Avatar group
- * @description Overlapping avatar stack whose neighbours lift with a distance falloff on hover.
- *
- * Adapted from Transitions.dev "Avatar group hover".
- *
- * A dock, not a switch. Lifting only the hovered item makes the row twitch — one element jumps
- * while the rest sit rigid — so the response falls off with distance: the neighbour rises about
- * half as far, the next barely at all. The falloff is what makes the row read as one soft object.
- *
- * The return is deliberately springier than the approach: a strong overshoot curve on the way back
- * reads as elastic rather than mechanical.
- */
-const LIFT = -4
-const FALLOFF = 0.45
-const ACTIVE_SCALE = 1.05
-const DURATION = 320
-const EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)'
-const EASE_OUT = 'cubic-bezier(0.34, 3.85, 0.64, 1)'
-
-export function AvatarGroup({
-  children,
-  className,
-  overlap = '-ml-2',
-}: {
-  children: React.ReactNode
-  className?: string
-  /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */
-  overlap?: string
-}) {
-  const items = React.Children.toArray(children)
-  const [activeIndex, setActiveIndex] = useState<number | null>(null)
-  const [reducedMotion, setReducedMotion] = useState(false)
-
-  useEffect(() => {
-    const query = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const sync = () => setReducedMotion(query.matches)
-
-    sync()
-    query.addEventListener('change', sync)
-    return () => query.removeEventListener('change', sync)
-  }, [])
-
-  const itemStyle = (index: number): React.CSSProperties | undefined => {
-    if (reducedMotion) {
-      return undefined
-    }
-
-    const isActive = index === activeIndex
-    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex)
-
-    return {
-      // translateY before scale, so scaling never amplifies the lift distance.
-      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
-      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
-      willChange: 'transform',
-      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.
-      zIndex: isActive ? 1 : undefined,
-    }
-  }
-
-  return (
-    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>
-      {items.map((child, index) => (
-        <div
-          // eslint-disable-next-line react/no-array-index-key -- position is the identity here
-          key={index}
-          className={cn('relative', index > 0 && overlap)}
-          style={itemStyle(index)}
-          onMouseEnter={() => setActiveIndex(index)}
-        >
-          {child}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default AvatarGroup