@thorprovider/blocks 1.0.0 → 2.0.0

package/src/blocks/marketing/testimonials/testimonial-section.test.tsx

@@ -0,0 +1,171 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as blockExports from '../../../index'
+import { TestimonialSection, type TestimonialSectionProps } from './testimonial-section'
+
+beforeAll(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+  window.matchMedia = (query: string) =>
+    ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => true,
+    }) as MediaQueryList
+
+  window.IntersectionObserver = class {
+    disconnect() {}
+
+    observe() {}
+
+    takeRecords() {
+      return []
+    }
+
+    unobserve() {}
+  } as unknown as typeof IntersectionObserver
+
+  window.ResizeObserver = class {
+    disconnect() {}
+
+    observe() {}
+
+    unobserve() {}
+  } as unknown as typeof ResizeObserver
+})
+
+const renderToHtml = (props: TestimonialSectionProps) =>
+  renderToStaticMarkup(<TestimonialSection {...props} />)
+
+describe('TestimonialSection — shared content', () => {
+  it('is the only public testimonial component export', () => {
+    expect(blockExports.TestimonialSection).toBe(TestimonialSection)
+    expect('Testimonial1' in blockExports).toBe(false)
+    expect('Testimonial2' in blockExports).toBe(false)
+  })
+
+  it('renders supplied testimonial identity, quote, and optional attribution', () => {
+    const html = renderToHtml({
+      presentation: 'bento',
+      items: [
+        {
+          id: 't-1',
+          name: 'Rosa Díaz',
+          role: 'Propietaria de taller',
+          avatar: '/rosa.png',
+          content: 'El servicio es excelente.',
+          rating: 4,
+        },
+      ],
+    })
+
+    expect(html).toContain('Rosa Díaz')
+    expect(html).toContain('Propietaria de taller')
+    expect(html).toContain('El servicio es excelente.')
+    expect(html).toContain('aria-label="4 out of 5 stars"')
+    expect(html).not.toContain('src=""')
+  })
+
+  it('does not invent absent attribution or emit an empty image source', () => {
+    const html = renderToHtml({
+      presentation: 'bento',
+      items: [{ id: 't-1', name: 'Rosa Díaz', content: 'El servicio es excelente.' }],
+    })
+
+    expect(html).toContain('Rosa Díaz')
+    expect(html).toContain('El servicio es excelente.')
+    expect(html).not.toContain('src=""')
+    expect(html).not.toContain('rating')
+    expect(html).not.toContain('Propietaria')
+  })
+
+  it('renders no section or controls when the collection is empty', () => {
+    expect(
+      renderToHtml({
+        presentation: 'carousel',
+        items: [],
+        carouselLabels: { previous: 'Prev', next: 'Next', slide: 'Slide {n}' },
+      }),
+    ).toBe('')
+  })
+
+  it('supports host-provided carousel labels', () => {
+    const html = renderToHtml({
+      presentation: 'carousel',
+      items: [{ id: 't-1', name: 'Rosa Díaz', content: 'El servicio es excelente.' }],
+      carouselLabels: {
+        previous: 'Testimonio anterior',
+        next: 'Testimonio siguiente',
+        slide: 'Ir al testimonio {n}',
+      },
+    })
+
+    expect(html).toContain('aria-label="Testimonio anterior"')
+    expect(html).toContain('aria-label="Testimonio siguiente"')
+    expect(html).toContain('aria-label="Ir al testimonio 1"')
+  })
+
+  it.each([1, 2, 3])('renders every bento entry when the collection has %i items', count => {
+    const items = Array.from({ length: count }, (_, index) => ({
+      id: `t-${index + 1}`,
+      name: `Cliente ${index + 1}`,
+      content: `Cita ${index + 1}`,
+    }))
+
+    render(<TestimonialSection presentation='bento' items={items} />)
+
+    for (const item of items) {
+      expect(screen.getByText(item.content)).toBeTruthy()
+    }
+  })
+
+  it('renders every bento entry when the collection has more than four items', () => {
+    const items = Array.from({ length: 6 }, (_, index) => ({
+      id: `t-${index + 1}`,
+      name: `Cliente ${index + 1}`,
+      content: `Cita ${index + 1}`,
+    }))
+
+    render(<TestimonialSection presentation='bento' items={items} />)
+
+    for (const item of items) {
+      expect(screen.getByText(item.content)).toBeTruthy()
+    }
+  })
+
+  it('lets keyboard users select carousel entries with localized controls', async () => {
+    const user = userEvent.setup()
+    render(
+      <TestimonialSection
+        presentation='carousel'
+        items={[
+          { id: 't-1', name: 'Cliente 1', content: 'Cita 1' },
+          { id: 't-2', name: 'Cliente 2', content: 'Cita 2' },
+          { id: 't-3', name: 'Cliente 3', content: 'Cita 3' },
+        ]}
+        carouselLabels={{
+          previous: 'Testimonio anterior',
+          next: 'Testimonio siguiente',
+          slide: 'Ir al testimonio {n}',
+        }}
+      />,
+    )
+
+    const lastSlide = screen.getByRole('button', { name: 'Ir al testimonio 3' })
+    while (document.activeElement !== lastSlide) {
+      await user.tab()
+    }
+    await user.keyboard('{Enter}')
+
+    expect(lastSlide.getAttribute('aria-current')).toBe('true')
+    expect(screen.getByText('Cita 3')).toBeTruthy()
+  })
+})

package/src/blocks/marketing/testimonials/testimonial-section.tsx

@@ -0,0 +1,237 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Quote, Star } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '../../../ui/carousel'
+
+export interface TestimonialItem {
+  id: string
+  name: string
+  content: string
+  role?: string
+  avatar?: string
+  rating?: number
+}
+
+export interface TestimonialCarouselLabels {
+  previous: string
+  next: string
+  slide: string
+}
+
+interface TestimonialSectionBaseProps {
+  items: TestimonialItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+export type TestimonialSectionProps = TestimonialSectionBaseProps &
+  (
+    | {
+        presentation: 'carousel'
+        carouselLabels: TestimonialCarouselLabels
+      }
+    | {
+        presentation: 'bento'
+        carouselLabels?: never
+      }
+  )
+
+const bentoGridClasses = [
+  'grid grid-rows-[auto_1fr] gap-8 ring-1 ring-foreground/10 sm:p-6 md:col-span-2 lg:col-span-2 lg:row-span-2 shadow-sm',
+  'ring-1 ring-foreground/10 md:col-span-2 lg:col-span-2 py-6 shadow-sm',
+  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
+  'pt-0 ring-1 ring-foreground/10 lg:col-span-1 shadow-sm',
+]
+
+const contentClasses = ['', 'h-full px-6', 'h-full pt-6 px-6', 'h-full pt-6 px-6']
+const textClasses = ['text-xl text-balance', 'text-base text-balance', 'text-base text-balance', 'text-base text-balance']
+
+function initials(name: string) {
+  return name
+    .split(' ')
+    .map(part => part[0])
+    .join('')
+}
+
+function Rating({ value }: { value: number }) {
+  return (
+    <div className='flex items-center gap-1' aria-label={`${value} out of 5 stars`}>
+      {Array.from({ length: 5 }, (_, index) => (
+        <Star
+          key={index}
+          aria-hidden='true'
+          className={cn('size-4', index < Math.floor(value) ? 'fill-foreground' : 'fill-none')}
+        />
+      ))}
+      <span className='text-muted-foreground ms-2 text-sm'>{value}</span>
+    </div>
+  )
+}
+
+function TestimonialAttribution({ item }: { item: TestimonialItem }) {
+  return (
+    <div className='grid grid-cols-[auto_1fr] items-center gap-3'>
+      <Avatar className='bg-muted size-12'>
+        {item.avatar && <AvatarImage src={item.avatar || undefined} alt={item.name} loading='lazy' />}
+        <AvatarFallback>{initials(item.name)}</AvatarFallback>
+      </Avatar>
+      <div>
+        <cite className='text-sm font-medium not-italic'>{item.name}</cite>
+        {item.role && <span className='text-muted-foreground block text-sm'>{item.role}</span>}
+      </div>
+    </div>
+  )
+}
+
+function BentoPresentation({
+  items,
+  title,
+  description,
+  className,
+}: TestimonialSectionBaseProps) {
+  return (
+    <section className={cn('py-12 md:py-16', className)}>
+      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 md:gap-16 lg:px-8'>
+        {(title || description) && (
+          <header className='relative z-10 mx-auto flex w-full max-w-4xl flex-col gap-6 text-center md:gap-12'>
+            {title && <h2 className='text-4xl font-medium max-lg:text-balance lg:text-5xl'>{title}</h2>}
+            {description && (
+              <p className='text-muted-foreground mx-auto max-w-2xl max-lg:text-balance'>
+                {description}
+              </p>
+            )}
+          </header>
+        )}
+
+        <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2'>
+          {items.map((item, index) => {
+            const tileIndex = index % bentoGridClasses.length
+
+            return (
+              <Card key={item.id} className={bentoGridClasses[tileIndex]}>
+                {tileIndex === 0 && (
+                  <CardHeader className='pb-6'>
+                    <div className='flex items-center justify-start'>
+                      <Quote className='text-muted-foreground/30 size-16 rotate-180' aria-hidden='true' />
+                    </div>
+                  </CardHeader>
+                )}
+                <CardContent className={contentClasses[tileIndex]}>
+                  <blockquote className='grid h-full grid-rows-[1fr_auto] gap-6'>
+                    <p className={textClasses[tileIndex]}>{item.content}</p>
+                    <TestimonialAttribution item={item} />
+                    {item.rating !== undefined && <Rating value={item.rating} />}
+                  </blockquote>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function CarouselPresentation({
+  items,
+  title,
+  description,
+  className,
+  carouselLabels,
+}: TestimonialSectionBaseProps & {
+  carouselLabels: TestimonialCarouselLabels
+}) {
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
+  const [selectedSlide, setSelectedSlide] = useState(0)
+
+  useEffect(() => {
+    if (!carouselApi) return
+
+    const updateSelectedSlide = () => setSelectedSlide(carouselApi.selectedScrollSnap())
+    updateSelectedSlide()
+    carouselApi.on('select', updateSelectedSlide)
+    carouselApi.on('reInit', updateSelectedSlide)
+
+    return () => {
+      carouselApi.off('select', updateSelectedSlide)
+      carouselApi.off('reInit', updateSelectedSlide)
+    }
+  }, [carouselApi])
+
+  return (
+    <section className={cn('py-12 lg:py-20', className)}>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {(title || description) && (
+          <header className='mb-12 text-center md:mb-16'>
+            {title && <h2 className='text-3xl font-bold text-balance md:text-4xl'>{title}</h2>}
+            {description && <p className='text-muted-foreground mx-auto mt-4 max-w-2xl'>{description}</p>}
+          </header>
+        )}
+
+        <Carousel
+          className='w-full'
+          opts={{ align: 'start', loop: true }}
+          setApi={setCarouselApi}
+          aria-label={title}
+        >
+          <CarouselContent className='-ml-1'>
+            {items.map(item => (
+              <CarouselItem key={item.id} className='basis-full px-4 last:pe-0 sm:basis-1/2 lg:basis-1/3'>
+                <Card className='h-full overflow-hidden border border-border py-6'>
+                  <CardHeader className='gap-0 px-6'>
+                    <TestimonialAttribution item={item} />
+                  </CardHeader>
+                  <CardContent className='px-6'>
+                    <blockquote className='text-muted-foreground text-base'>{item.content}</blockquote>
+                    {item.rating !== undefined && <Rating value={item.rating} />}
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className='cursor-pointer' aria-label={carouselLabels.previous} />
+          <CarouselNext className='cursor-pointer' aria-label={carouselLabels.next} />
+        </Carousel>
+        <div className='mt-6 flex justify-center gap-2'>
+          {items.map((item, index) => (
+            <button
+              key={item.id}
+              type='button'
+              className={cn(
+                'size-2 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                selectedSlide === index ? 'bg-foreground' : 'bg-muted-foreground/40',
+              )}
+              aria-label={carouselLabels.slide.replace('{n}', String(index + 1))}
+              aria-current={selectedSlide === index ? 'true' : undefined}
+              onClick={() => carouselApi?.scrollTo(index)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function TestimonialSection(props: TestimonialSectionProps) {
+  if (props.items.length === 0) return null
+
+  if (props.presentation === 'carousel') {
+    return <CarouselPresentation {...props} />
+  }
+
+  return <BentoPresentation {...props} />
+}
+
+export default TestimonialSection

package/src/index.ts

@@ -16,16 +16,13 @@ export {
   CardContent,
 } from './ui/card'
 
-export { default as Navbar1 } from './blocks/marketing/navbars/navbar-1'
-export { default as Navbar2 } from './blocks/marketing/navbars/navbar-2'
-export { default as Navbar3 } from './blocks/marketing/navbars/navbar-3'
-export { default as Navbar4 } from './blocks/marketing/navbars/navbar-4'
+export { default as Navbar } from './blocks/marketing/navbars/navbar'
+export { default as StorefrontNavbar } from './blocks/e-commerce/navigation/storefront-navbar'
 export { default as Banner1 } from './blocks/marketing/banners/banner-1'
 export { default as HeroSection1 } from './blocks/marketing/hero-sections/hero-section-1'
 export { default as CtaSection1 } from './blocks/marketing/cta/cta-section-1'
 export { default as Feature } from './blocks/marketing/features/feature'
-export { default as Testimonial1 } from './blocks/marketing/testimonials/testimonial-1'
-export { default as Testimonial2 } from './blocks/marketing/testimonials/testimonial-2'
+export { TestimonialSection } from './blocks/marketing/testimonials/testimonial-section'
 export { default as FaqBlock1 } from './blocks/marketing/faq/faq-block-1'
 export { default as PricingSection1 } from './blocks/marketing/pricing/pricing-section-1'
 export type { CtaSection1Props } from './blocks/marketing/cta/cta-section-1'
@@ -38,22 +35,37 @@ export type {
 export type { LogoCloud1Props, LogoCloud1Platform } from './blocks/marketing/logo-clouds/logo-cloud-1'
 export type { PricingSection1Props, PricingTier } from './blocks/marketing/pricing/pricing-section-1'
 export type { Statistic1Props, StatisticItem } from './blocks/marketing/statistics/statistic-1'
-export type { Testimonial1Props, Testimonial1Item } from './blocks/marketing/testimonials/testimonial-1'
-export type { Testimonial2Props, Testimonial2Item } from './blocks/marketing/testimonials/testimonial-2'
+export type {
+  TestimonialItem,
+  TestimonialCarouselLabels,
+  TestimonialSectionProps,
+} from './blocks/marketing/testimonials/testimonial-section'
 export { default as Statistic1 } from './blocks/marketing/statistics/statistic-1'
 export { default as LogoCloud1 } from './blocks/marketing/logo-clouds/logo-cloud-1'
-export { default as FooterSection1 } from './blocks/marketing/footers/footer-section-1'
-export { default as FooterSection3 } from './blocks/marketing/footers/footer-section-3'
-export type { FooterSection3Props, FooterLinkColumn, FooterLink, SocialLink } from './blocks/marketing/footers/footer-section-3'
-export { default as FooterSection4 } from './blocks/marketing/footers/footer-section-4'
+export { FooterSection } from './blocks/marketing/footers/footer-section'
+export type {
+  FooterBrandAccent,
+  FooterContact,
+  FooterContactItem,
+  FooterLink as CanonicalFooterLink,
+  FooterLinkBehavior,
+  FooterLinkColumn as CanonicalFooterLinkColumn,
+  FooterNewsletter,
+  FooterPresentation,
+  FooterSectionProps,
+  FooterSocialLink,
+} from './blocks/marketing/footers/footer-section'
 export type {
-  FooterSection4Props,
-  FooterSection4Contact,
-  FooterSection4Link,
-  FooterSection4LinkColumn,
-  FooterSection4SocialIcon,
-  FooterSection4SocialLink,
-} from './blocks/marketing/footers/footer-section-4'
+  NavbarFeatured,
+  NavbarGroup,
+  NavbarIcon,
+  NavbarIconMap,
+  NavbarItem,
+  NavbarLink,
+  NavbarPresentation,
+  NavbarProps,
+} from './blocks/marketing/navbars/navbar'
+export type { StorefrontNavbarProps } from './blocks/e-commerce/navigation/storefront-navbar'
 export { ProductCard } from './blocks/e-commerce/product-list/product-card'
 export type {
   ProductCardProps,
@@ -107,31 +119,22 @@ export { MobileBottomNav, mobileBottomNavItemSchema, mobileBottomNavPropsSchema
 export type { MobileBottomNavItem, MobileBottomNavProps } from './blocks/e-commerce/navigation/mobile-bottom-nav'
 export { menuItemSchema, collectionItemSchema } from './lib/types/menu'
 export type { MenuItem, CollectionItem } from './lib/types/menu'
-export { default as CategoryFilter1 } from './blocks/e-commerce/category-filters/category-filter-1'
+export { CategoryListing, CategoryListingStatusView, buildFilterChange, reconcileSearchDraft, toggleFilterValue } from './blocks/e-commerce/category-filters/category-listing'
 export type {
-  CategoryFilter1Category,
-  CategoryFilter1PriceRange,
-  CategoryFilter1SortOption,
-} from './blocks/e-commerce/category-filters/category-filter-1'
-export { default as CategoryFilter2 } from './blocks/e-commerce/category-filters/category-filter-2'
-export { CategoryFilter2StatusView } from './blocks/e-commerce/category-filters/category-filter-2'
-export type {
-  FilterProduct,
-  CategoryFilter2Props,
-  CategoryFilter2Category,
-  CategoryFilter2Collection,
-  CategoryFilter2Color,
-  CategoryFilter2PriceRange,
-  CategoryFilter2SortOption,
-  CategoryFilter2Filters,
-  CategoryFilter2Status,
-  CategoryFilter2StatusViewProps,
-  CategoryFilter2QueryError,
-  CategoryFilter2ActiveFilter,
-  CategoryFilter2ActiveFilterKind,
-} from './blocks/e-commerce/category-filters/category-filter-2'
-export { default as CategoryFilter4 } from './blocks/e-commerce/category-filters/category-filter-4'
-export type { CategoryFilter4Props, CategoryFilter4Product, CategoryFilter4Facets } from './blocks/e-commerce/category-filters/category-filter-4'
+  CategoryListingActiveFilter,
+  CategoryListingActiveFilterKind,
+  CategoryListingFacetGroup,
+  CategoryListingFacetOption,
+  CategoryListingFilters,
+  CategoryListingOption,
+  CategoryListingPresentation,
+  CategoryListingPriceRange,
+  CategoryListingProps,
+  CategoryListingQueryError,
+  CategoryListingSortOption,
+  CategoryListingStatus,
+  CategoryListingStatusViewProps,
+} from './blocks/e-commerce/category-filters/category-listing'
 export { default as ShoppingCart } from './blocks/e-commerce/shopping-carts/shopping-cart'
 export type {
   ShoppingCartProps,
@@ -141,38 +144,24 @@ export type {
 } from './blocks/e-commerce/shopping-carts/shopping-cart'
 export { default as StoreContainer1 } from './blocks/e-commerce/store-containers/store-container-1'
 export type { StoreContainer1Props } from './blocks/e-commerce/store-containers/store-container-1'
-export { default as CheckoutForm1 } from './blocks/e-commerce/checkout-forms/checkout-form-1'
-export { default as CheckoutForm2 } from './blocks/e-commerce/checkout-forms/checkout-form-2'
-export { default as CheckoutForm3 } from './blocks/e-commerce/checkout-forms/checkout-form-3'
-export { default as CheckoutConfirmation } from './blocks/e-commerce/checkout-forms/checkout-confirmation'
+export { default as Checkout } from './blocks/e-commerce/checkout-forms/checkout'
 export type {
-  CheckoutForm1Props,
-  CheckoutForm1FormData,
-  CheckoutForm1FieldErrors,
-  CheckoutForm1FieldDescriptions,
-  CheckoutForm1ChangeHandler,
-  CheckoutForm1OrderSummary,
-  CheckoutForm1OrderSummaryItem,
-  CheckoutForm1CountryOption,
-  CheckoutForm1ShippingOption,
-  CheckoutForm1Totals,
-  CheckoutForm1TotalsState,
-} from './blocks/e-commerce/checkout-forms/checkout-form-1'
-export type {
-  CheckoutForm2Props,
-  CheckoutForm2Item,
-  CheckoutForm2Data,
-  CheckoutForm2FieldErrors,
-  CheckoutForm2FieldDescriptions,
-  CheckoutForm2Totals,
-} from './blocks/e-commerce/checkout-forms/checkout-form-2'
-export type {
-  CheckoutForm3Props,
-  CheckoutForm3CartItem,
-  CheckoutForm3FormData,
-  CheckoutForm3ShippingMethod,
-  CheckoutForm3CountryOption,
-} from './blocks/e-commerce/checkout-forms/checkout-form-3'
+  CheckoutProps,
+  CheckoutValues,
+  CheckoutPresentation,
+  CheckoutStepId,
+  CheckoutLabels,
+  CheckoutValuesFieldErrors,
+  CheckoutFieldDescriptions,
+  CheckoutChangeHandler,
+  CheckoutOrderSummary,
+  CheckoutOrderLine,
+  CheckoutTotals,
+  CheckoutTotalsState,
+  CheckoutCountryOption,
+  CheckoutShippingOption,
+} from './blocks/e-commerce/checkout-forms/checkout'
+export { default as CheckoutConfirmation } from './blocks/e-commerce/checkout-forms/checkout-confirmation'
 export type {
   CheckoutConfirmationProps,
   FulfilmentStage,
@@ -198,13 +187,11 @@ export type {
   StorefrontHeroProps,
 } from './blocks/e-commerce/storefront-hero/storefront-hero'
 export { default as AppShell1 } from './blocks/application/app-shells/app-shell-1'
-export { default as LoginPage1 } from './blocks/application/login-forms/login-page-1'
-export { default as LoginPage2 } from './blocks/application/login-forms/login-page-2'
+export { default as LoginPage } from './blocks/application/login-forms/login-page'
 export { default as SignUpPage1 } from './blocks/application/signup-forms/signup-page-1'
 export { default as ForgotPasswordPage1 } from './blocks/application/password-recovery/forgot-password-page-1'
 export { default as Verify1 } from './blocks/application/verification/verify-1'
-export type { LoginPage1Props, LoginPage1FormData, LoginPage1SocialButton } from './blocks/application/login-forms/login-page-1'
-export type { LoginPage2Props, LoginPage2SocialButton } from './blocks/application/login-forms/login-page-2'
+export type { LoginPageProps, LoginPageFormData, LoginPageProvider } from './blocks/application/login-forms/login-page'
 export type { SignUpPage1Props, SignUpPage1Data, SignUpPage1SocialButton } from './blocks/application/signup-forms/signup-page-1'
 export type { ForgotPasswordPage1Props } from './blocks/application/password-recovery/forgot-password-page-1'
 export type { Verify1Props } from './blocks/application/verification/verify-1'
@@ -235,7 +222,13 @@ export {
   shoppingCartPropsSchema,
   shoppingCartItemSchema,
   shoppingCartSuggestionSchema,
-  navbar4PropsSchema,
+  navbarPresentationSchema,
+  navbarItemSchema,
+  navbarGroupSchema,
+  navbarLinkSchema,
+  navbarFeaturedSchema,
+  navbarPropsSchema,
+  storefrontNavbarPropsSchema,
   paymentMethodSchema,
   cardProductSchema,
   cartItemSchema,
@@ -266,7 +259,13 @@ export type {
   ShoppingCartItem,
   ShoppingCartSuggestion,
   ShoppingCartSpecProps,
-  Navbar4SpecProps,
+  NavbarPresentationSpec,
+  NavbarItemSpec,
+  NavbarGroupSpec,
+  NavbarLinkSpec,
+  NavbarFeaturedSpec,
+  NavbarSpecProps,
+  StorefrontNavbarSpecProps,
   CardProduct,
   CartItem,
   Promotion,
@@ -282,4 +281,4 @@ export type {
   ProductCategorySpecProps,
   CategoryCardSpecProps,
   CategoryGridSpecProps,
-} from './lib/contracts'
+} from './lib/contracts'

package/src/lib/contracts-curated.test.ts

@@ -10,7 +10,7 @@ import {
   logoAccentSchema,
   moneySchema,
   navCartItemSchema,
-  navbar4PropsSchema,
+  storefrontNavbarPropsSchema,
   productOverviewPropsSchema,
   shoppingCartPropsSchema,
 } from './contracts'
@@ -113,12 +113,12 @@ describe('optional brand seams — present, omitted, invalid', () => {
       utilityLinks: [],
       logoText: 'ElectroCuba',
     }
-    const parsed = navbar4PropsSchema.parse(base)
+    const parsed = storefrontNavbarPropsSchema.parse(base)
     expect(parsed.logoAccent).toBeUndefined()
   })
 
   it('accepts navbar props with the accent present', () => {
-    const parsed = navbar4PropsSchema.parse({
+    const parsed = storefrontNavbarPropsSchema.parse({
       storeCategories: [],
       shippingNote: 'Catálogo en línea',
       utilityLinks: [],
@@ -135,8 +135,8 @@ describe('optional brand seams — present, omitted, invalid', () => {
       utilityLinks: [],
       logoText: 'My Shop',
     }
-    expect(navbar4PropsSchema.parse(base).className).toBeUndefined()
-    expect(navbar4PropsSchema.parse({ ...base, className: 'bg-brand-nav text-brand-nav-foreground' }).className).toBe(
+    expect(storefrontNavbarPropsSchema.parse(base).className).toBeUndefined()
+    expect(storefrontNavbarPropsSchema.parse({ ...base, className: 'bg-brand-nav text-brand-nav-foreground' }).className).toBe(
       'bg-brand-nav text-brand-nav-foreground',
     )
   })