@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,141 @@
+'use client'
+
+import * as React from 'react'
+import { Star } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Card, CardContent, CardHeader, CardFooter, CardTitle } from '../../../ui/card'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from '../../../ui/carousel'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+import { Button } from '../../../ui/button'
+
+export interface Testimonial1Item {
+  id: string
+  name: string
+  role: string
+  avatar: string
+  content: string
+  rating: number
+}
+
+export interface Testimonial1Props {
+  items: Testimonial1Item[]
+  title?: string
+  prevLabel?: string
+  nextLabel?: string
+  slideAriaLabel?: string
+}
+
+function RatingStars({ rating }: { rating: number }) {
+  return (
+    <div className='flex items-center gap-1'>
+      {[...Array(5)].map((_, index) => (
+        <Star
+          key={index}
+          className={cn('size-4', index < Math.floor(rating) ? 'fill-foreground' : 'fill-none')}
+        />
+      ))}
+      <span className='text-muted-foreground ms-2 text-sm'>({rating})</span>
+    </div>
+  )
+}
+
+export function Testimonial1({
+  items,
+  title = 'Lo que dicen nuestros clientes',
+  prevLabel = 'Anterior',
+  nextLabel = 'Siguiente',
+  slideAriaLabel = 'Ir a la diapositiva {n}',
+}: Testimonial1Props) {
+  const [api, setApi] = React.useState<CarouselApi | null>(null)
+  const [current, setCurrent] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!api) return
+
+    const onSelect = () => {
+      setCurrent(api.selectedScrollSnap())
+    }
+
+    api.on('select', onSelect)
+    return () => {
+      api.off('select', onSelect)
+    }
+  }, [api])
+
+  return (
+    <section className='py-12 lg:py-20'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <header className='mb-16 text-center'>
+          <h2 className='text-3xl font-bold text-balance md:text-4xl'>{title}</h2>
+        </header>
+
+        <Carousel className='w-full' setApi={setApi} opts={{ align: 'start', loop: true }}>
+          <CarouselContent className='-ml-1'>
+            {items.map(testimonial => (
+              <CarouselItem
+                key={testimonial.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'>
+                    <div className='flex items-center gap-4'>
+                      <Avatar className='bg-muted size-12'>
+                        <AvatarImage src={testimonial.avatar || undefined} alt={testimonial.name} className='size-12' />
+                        <AvatarFallback className='bg-card'>{testimonial.name[0]}</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <CardTitle className='text-foreground font-semibold'>{testimonial.name}</CardTitle>
+                        <p className='text-muted-foreground text-sm'>{testimonial.role}</p>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent className='px-6'>
+                    <p className='text-muted-foreground text-base'>{testimonial.content}</p>
+                  </CardContent>
+                  <CardFooter className='bg-transparent border-t-0 px-6 pb-6'>
+                    <RatingStars rating={testimonial.rating} />
+                  </CardFooter>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious
+            variant='outline'
+            className='hidden cursor-pointer lg:flex'
+            aria-label={prevLabel}
+          />
+          <CarouselNext
+            variant='outline'
+            className='hidden cursor-pointer lg:flex'
+            aria-label={nextLabel}
+          />
+          <div className='mt-8 flex items-center justify-center gap-2'>
+            {items.map((_, index) => (
+              <Button
+                variant='ghost'
+                key={index}
+                onClick={() => api?.scrollTo(index)}
+                className={cn(
+                  'h-9 px-4 py-2',
+                  'size-2 cursor-pointer rounded-full !p-0 transition-all',
+                  current === index ? 'bg-foreground w-6' : 'bg-muted',
+                )}
+                aria-label={slideAriaLabel.replace('{n}', String(index + 1))}
+                aria-current={current === index ? 'true' : 'false'}
+              />
+            ))}
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonial1

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

@@ -0,0 +1,108 @@
+import { Quote } from 'lucide-react'
+import { Card, CardContent, CardHeader } from '../../../ui/card'
+import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
+
+export interface Testimonial2Item {
+  id: string
+  name: string
+  role: string
+  avatar: string
+  content: string
+}
+
+export interface Testimonial2Props {
+  items: Testimonial2Item[]
+  title?: string
+  description?: string
+}
+
+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(n => n[0])
+    .join('')
+}
+
+export function Testimonial2({
+  items,
+  title = 'Con la confianza de quienes construyen',
+  description,
+}: Testimonial2Props) {
+  /** El diseño bento consume exactamente 4 tarjetas: la primera ocupa la celda
+   * grande (lg:row-span-2) y las tres restantes completan la cuadrícula. */
+  const bentoItems = items.slice(0, 4)
+
+  return (
+    <section className='py-12 md:py-16'>
+      <div className='mx-auto w-full max-w-7xl flex flex-col gap-8 px-4 sm:px-6 lg:px-8 md:gap-16'>
+        <div className='relative z-10 mx-auto max-w-4xl flex flex-col gap-6 text-center md:gap-12'>
+          <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>
+          )}
+        </div>
+
+        <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2'>
+          {bentoItems.map((testimonial, index) => (
+            <Card key={testimonial.id} className={bentoGridClasses[index]}>
+              {index === 0 && (
+                <CardHeader className='pb-6'>
+                  <div className='flex items-center justify-start'>
+                    <Quote className='text-muted-foreground/30 size-16 rotate-180' />
+                  </div>
+                </CardHeader>
+              )}
+              <CardContent className={contentClasses[index]}>
+                <blockquote className='grid h-full grid-rows-[1fr_auto] gap-6'>
+                  <p className={textClasses[index]}>{testimonial.content}</p>
+
+                  <div className='grid grid-cols-[auto_1fr] items-center gap-3'>
+                    <Avatar className='bg-muted size-12'>
+                      <AvatarImage
+                        src={testimonial.avatar || undefined}
+                        alt={testimonial.name}
+                        height='400'
+                        width='400'
+                        loading='lazy'
+                      />
+                      <AvatarFallback>{initials(testimonial.name)}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <cite className='text-sm font-medium not-italic'>{testimonial.name}</cite>
+                      <span className='text-muted-foreground block text-sm'>{testimonial.role}</span>
+                    </div>
+                  </div>
+                </blockquote>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonial2

package/src/blocks/shared/reaction-toggle.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import { useEffect, useRef, useState, type ComponentType } from 'react'
+
+import { cn } from '../../lib/utils'
+
+const PARTICLE_COUNT = 8
+
+const STYLE_MARKER = 'data-reaction-toggle-keyframes'
+const STYLES = `
+@keyframes reaction-toggle-pop {
+  0% { transform: scale(1); }
+  30% { transform: scale(0.82); }
+  100% { transform: scale(1); }
+}
+@keyframes reaction-toggle-burst {
+  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
+  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }
+  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }
+}
+.reaction-toggle-pop {
+  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
+}
+.reaction-toggle-burst {
+  animation-name: reaction-toggle-burst;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reaction-toggle-pop,
+  .reaction-toggle-burst { animation: none !important; }
+}
+`
+
+function useReactionToggleStyles() {
+  useEffect(() => {
+    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return
+
+    const style = document.createElement('style')
+    style.setAttribute(STYLE_MARKER, '')
+    style.textContent = STYLES
+    document.head.append(style)
+  }, [])
+}
+
+type ReactionIconProps = {
+  className?: string
+}
+
+type Particle = {
+  rx: number
+  ry: number
+  duration: number
+  delay: number
+  size: number
+}
+
+function buildParticles(): Particle[] {
+  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {
+    const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4
+    const dist = 16 + Math.random() * 10
+
+    return {
+      rx: Math.round(Math.cos(angle) * dist * 10) / 10,
+      ry: Math.round(Math.sin(angle) * dist * 10) / 10,
+      duration: Math.round(500 + Math.random() * 200),
+      delay: Math.round(Math.random() * 60),
+      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100,
+    }
+  })
+}
+
+type ReactionToggleProps = {
+  active: boolean
+  icon: ComponentType<ReactionIconProps>
+  className?: string
+  iconClassName?: string
+  activeColorClassName?: string
+}
+
+export function ReactionToggle({
+  active,
+  icon: Icon,
+  className,
+  iconClassName,
+  activeColorClassName = 'text-primary',
+}: ReactionToggleProps) {
+  const [isBursting, setIsBursting] = useState(false)
+  const wasActive = useRef(active)
+  const particlesRef = useRef<Particle[]>(buildParticles())
+
+  useReactionToggleStyles()
+
+  useEffect(() => {
+    if (active && !wasActive.current) {
+      particlesRef.current = buildParticles()
+      setIsBursting(true)
+      const timeout = setTimeout(() => setIsBursting(false), 700)
+      wasActive.current = active
+      return () => clearTimeout(timeout)
+    }
+
+    wasActive.current = active
+  }, [active])
+
+  return (
+    <span className={cn('relative inline-flex', className)}>
+      <span className={cn('inline-flex', active && 'reaction-toggle-pop')}>
+        <Icon
+          className={cn(
+            'transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]',
+            active ? cn('fill-current', activeColorClassName) : 'fill-transparent',
+            iconClassName
+          )}
+        />
+      </span>
+
+      {isBursting && (
+        <span
+          aria-hidden='true'
+          className={cn('pointer-events-none absolute top-1/2 left-1/2 size-0', activeColorClassName)}
+        >
+          {particlesRef.current.map((particle, index) => (
+            <i
+              key={index}
+              className='reaction-toggle-burst absolute rounded-full bg-current opacity-0'
+              style={
+                {
+                  '--rx': `${particle.rx}px`,
+                  '--ry': `${particle.ry}px`,
+                  animationDuration: `${particle.duration}ms`,
+                  animationDelay: `${particle.delay}ms`,
+                  width: `${2.5 * particle.size}px`,
+                  height: `${2.5 * particle.size}px`,
+                  left: `${-1.25 * particle.size}px`,
+                  top: `${-1.25 * particle.size}px`,
+                } as React.CSSProperties
+              }
+            />
+          ))}
+        </span>
+      )}
+    </span>
+  )
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/index.ts

@@ -0,0 +1,200 @@
+export { cn } from './lib/utils'
+export type { CTA } from './lib/types'
+
+export { Badge, badgeVariants } from './ui/badge'
+export { Button, buttonVariants } from './ui/button'
+export { Avatar, AvatarImage, AvatarFallback } from './ui/avatar'
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  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 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 Feature1 } from './blocks/marketing/features/feature-1'
+export { default as Feature2 } from './blocks/marketing/features/feature-2'
+export { default as Testimonial1 } from './blocks/marketing/testimonials/testimonial-1'
+export { default as Testimonial2 } from './blocks/marketing/testimonials/testimonial-2'
+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'
+export type { FaqBlock1Props, FaqItem } from './blocks/marketing/faq/faq-block-1'
+export type { Feature1Props, Feature1Item } from './blocks/marketing/features/feature-1'
+export type { Feature2Props, Feature2Item } from './blocks/marketing/features/feature-2'
+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 { 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 type {
+  FooterSection4Props,
+  FooterSection4Contact,
+  FooterSection4Link,
+  FooterSection4LinkColumn,
+  FooterSection4SocialIcon,
+  FooterSection4SocialLink,
+} from './blocks/marketing/footers/footer-section-4'
+export { default as ProductCard1 } from './blocks/e-commerce/product-list/product-card-1'
+export { default as ProductCard2 } from './blocks/e-commerce/product-list/product-card-2'
+export { default as ProductCard3 } from './blocks/e-commerce/product-list/product-card-3'
+export { default as ProductCard5 } from './blocks/e-commerce/product-list/product-card-5'
+export { default as ProductOverview1 } from './blocks/e-commerce/product-overview/product-overview-1'
+export { default as ProductOverview2 } from './blocks/e-commerce/product-overview/product-overview-2'
+export { default as ProductOverview5 } from './blocks/e-commerce/product-overview/product-overview-5'
+export type { ProductOverview2Props, ProductOverview2Product } from './blocks/e-commerce/product-overview/product-overview-2'
+export type { ProductOverview5Props, ProductOverview5Product, ProductOverview5Review } from './blocks/e-commerce/product-overview/product-overview-5'
+export { default as ProductQuickView } from './blocks/e-commerce/product-overview/product-quick-view'
+export { default as ReviewRating1 } from './blocks/e-commerce/reviews/review-rating-1'
+export type { ReviewRating1Review } from './blocks/e-commerce/reviews/review-rating-1'
+export { default as ReviewRating2 } from './blocks/e-commerce/reviews/review-rating-2'
+export { default as ProductCategory1 } from './blocks/e-commerce/product-categories/product-category-1'
+export type {
+  ProductCategory1Category,
+  ProductCategory1CategoryIcon,
+  ProductCategory1Props,
+} from './blocks/e-commerce/product-categories/product-category-1'
+export { default as ProductCategory2 } from './blocks/e-commerce/product-categories/product-category-2'
+export type { ProductCategory2Category, ProductCategory2Props } from './blocks/e-commerce/product-categories/product-category-2'
+export { default as ProductCategory4 } from './blocks/e-commerce/product-categories/product-category-4'
+export { default as ProductCategory5 } from './blocks/e-commerce/product-categories/product-category-5'
+export { MegaMenu, megaMenuPropsSchema } from './blocks/e-commerce/navigation/mega-menu'
+export type { MegaMenuProps } from './blocks/e-commerce/navigation/mega-menu'
+export { MobileCategoryDrawer, mobileCategoryDrawerPropsSchema } from './blocks/e-commerce/navigation/mobile-category-drawer'
+export type { MobileCategoryDrawerProps } from './blocks/e-commerce/navigation/mobile-category-drawer'
+export { CategoryIcon, categoryIconNameSchema, categoryIconPropsSchema } from './blocks/e-commerce/navigation/category-icon'
+export type { CategoryIconName, CategoryIconProps } from './blocks/e-commerce/navigation/category-icon'
+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 { default as CategoryFilter2 } from './blocks/e-commerce/category-filters/category-filter-2'
+export type {
+  FilterProduct,
+  CategoryFilter2Props,
+  CategoryFilter2Category,
+  CategoryFilter2Color,
+  CategoryFilter2PriceRange,
+  CategoryFilter2SortOption,
+  CategoryFilter2Filters,
+} 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'
+export { default as ShoppingCart1 } from './blocks/e-commerce/shopping-carts/shopping-cart-1'
+export { default as ShoppingCart2 } from './blocks/e-commerce/shopping-carts/shopping-cart-2'
+export { default as ShoppingCart4 } from './blocks/e-commerce/shopping-carts/shopping-cart-4'
+export { default as ShoppingCart3 } from './blocks/e-commerce/shopping-carts/shopping-cart-3'
+export type { ShoppingCart3Props, ShoppingCart3CartItem } from './blocks/e-commerce/shopping-carts/shopping-cart-3'
+export type { ShoppingCart2Props, ShoppingCart2Item } from './blocks/e-commerce/shopping-carts/shopping-cart-2'
+export type { ShoppingCart4Props, ShoppingCart4Item } from './blocks/e-commerce/shopping-carts/shopping-cart-4'
+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 type {
+  CheckoutForm1Props,
+  CheckoutForm1FormData,
+  CheckoutForm1FieldErrors,
+  CheckoutForm1FieldDescriptions,
+  CheckoutForm1ChangeHandler,
+  CheckoutForm1OrderSummary,
+  CheckoutForm1OrderSummaryItem,
+  CheckoutForm1CountryOption,
+} 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'
+export type {
+  CheckoutConfirmationProps,
+  FulfilmentStage,
+  FulfilmentStageDetail,
+  Order,
+  OrderLine,
+  OrderAddress,
+  OrderTotals,
+} from './blocks/e-commerce/checkout-forms/checkout-confirmation'
+export type { CheckoutFieldError, CheckoutFieldErrors } from './blocks/e-commerce/checkout-forms/checkout-form-types'
+export { default as OrderHistory1 } from './blocks/e-commerce/order-history/order-history-1'
+export { default as OrderHistory2 } from './blocks/e-commerce/order-history/order-history-2'
+export { default as StorefrontHero1 } from './blocks/e-commerce/storefront-hero/storefront-hero-1'
+export type {
+  FeaturedProduct,
+  StorefrontHero1Props,
+} from './blocks/e-commerce/storefront-hero/storefront-hero-1'
+export { default as StorefrontHero2 } from './blocks/e-commerce/storefront-hero/storefront-hero-2'
+export { default as StorefrontHero5 } from './blocks/e-commerce/storefront-hero/storefront-hero-5'
+export { default as StorefrontHero6 } from './blocks/e-commerce/storefront-hero/storefront-hero-6'
+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 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 { 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'
+
+// Spec-driven storefront contracts (Zod serializable subset, obeys @thorprovider/types)
+export type { CanonMoney, CanonProduct } from './lib/contracts'
+export { PRODUCT_IMAGE_FALLBACK } from './lib/contracts'
+export {
+  buttonPropsSchema,
+  storeContainer1PropsSchema,
+  productCard1PropsSchema,
+  shoppingCart4PropsSchema,
+  navbar4PropsSchema,
+  paymentMethodSchema,
+  cardProductSchema,
+  cartItemSchema,
+  promotionSchema,
+  storeCategorySchema,
+  utilityLinkSchema,
+  navCartItemSchema,
+  storeUserSchema,
+  accountMenuItemSchema,
+} from './lib/contracts'
+export type {
+  ButtonSpecProps,
+  StoreContainer1SpecProps,
+  ProductCard1SpecProps,
+  ShoppingCart4SpecProps,
+  Navbar4SpecProps,
+  CardProduct,
+  CartItem,
+  Promotion,
+  StoreCategory,
+  UtilityLink,
+  NavCartItem,
+  StoreUser,
+  AccountMenuItem,
+} from './lib/contracts'

package/src/lib/contracts.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { storeCategorySchema } from './contracts'
+
+describe('storeCategorySchema', () => {
+  it('accepts flat categories (additive backward compatibility)', () => {
+    const result = storeCategorySchema.safeParse({ label: 'Herramientas', href: '/categorias/herramientas' })
+    expect(result.success).toBe(true)
+  })
+
+  it('accepts a three-level category tree', () => {
+    const result = storeCategorySchema.safeParse({
+      label: 'Mobile Devices',
+      href: '/categorias/mobile-devices-l1',
+      children: [
+        {
+          label: 'Smartphones',
+          href: '/categorias/smartphones',
+          children: [
+            { label: 'Flagship Phones', href: '/categorias/flagship-phones' },
+            { label: 'Mid-Range Phones', href: '/categorias/mid-range-phones' },
+          ],
+        },
+      ],
+    })
+    expect(result.success).toBe(true)
+  })
+
+  it('rejects categories missing label or href', () => {
+    expect(storeCategorySchema.safeParse({ label: 'Solo', href: '/categorias/x', children: [{}] }).success).toBe(false)
+    expect(storeCategorySchema.safeParse({}).success).toBe(false)
+  })
+})