@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/category-filters/category-filter-4-sidebar.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import type {
+  CategoryFilter4Facets,
+  CategoryFilter4FilterState,
+} from './category-filter-4'
+import { CategoryFilter4Fields } from './category-filter-4-fields'
+
+interface CategoryFilter4SidebarProps {
+  filters: CategoryFilter4FilterState
+  onChange: (next: CategoryFilter4FilterState) => void
+  countWith: (partial: Partial<CategoryFilter4FilterState>) => number
+  facets: CategoryFilter4Facets
+  colourNames: Record<string, string>
+  modelTypeLabel?: string
+  rangeLabel?: string
+  frameSizeLabel?: string
+  colourLabel?: string
+  featuresLabel?: string
+}
+
+export function CategoryFilter4Sidebar({
+  filters,
+  onChange,
+  countWith,
+  facets,
+  colourNames,
+  modelTypeLabel,
+  rangeLabel,
+  frameSizeLabel,
+  colourLabel,
+  featuresLabel,
+}: CategoryFilter4SidebarProps) {
+  return (
+    <aside className="w-70 shrink-0">
+      <CategoryFilter4Fields
+        filters={filters}
+        onChange={onChange}
+        countWith={countWith}
+        facets={facets}
+        colourNames={colourNames}
+        modelTypeLabel={modelTypeLabel}
+        rangeLabel={rangeLabel}
+        frameSizeLabel={frameSizeLabel}
+        colourLabel={colourLabel}
+        featuresLabel={featuresLabel}
+      />
+    </aside>
+  )
+}
+
+export default CategoryFilter4Sidebar

package/src/blocks/e-commerce/category-filters/category-filter-4-sort-sheet.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../../ui/drawer'
+import { Label } from '../../../ui/label'
+import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
+import type { CategoryFilter4SortOption } from './category-filter-4'
+
+interface CategoryFilter4SortSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  sort: string
+  onSortChange: (value: string) => void
+  sortOptions: CategoryFilter4SortOption[]
+  sortByLabel?: string
+}
+
+export function CategoryFilter4SortSheet({
+  open,
+  onOpenChange,
+  sort,
+  onSortChange,
+  sortOptions,
+  sortByLabel = 'Ordenar por',
+}: CategoryFilter4SortSheetProps) {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>{sortByLabel}</DrawerTitle>
+        </DrawerHeader>
+        <div className="px-4 pb-6">
+          <RadioGroup
+            value={sort}
+            onValueChange={value => {
+              if (typeof value === 'string') {
+                onSortChange(value)
+                onOpenChange(false)
+              }
+            }}
+            className="gap-3"
+          >
+            {sortOptions.map(option => (
+              <div key={option.value} className="flex items-center gap-2">
+                <RadioGroupItem value={option.value} id={`sort-${option.value}`} />
+                <Label htmlFor={`sort-${option.value}`} className="min-h-11 font-normal">
+                  {option.label}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default CategoryFilter4SortSheet

package/src/blocks/e-commerce/category-filters/category-filter-4-state.ts

@@ -0,0 +1,68 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import type {
+  CategoryFilter4Facets,
+  CategoryFilter4FilterState,
+  CategoryFilter4Product,
+  CategoryFilter4RangeBand,
+} from './category-filter-4'
+
+export function emptyFilters(maxPrice: number): CategoryFilter4FilterState {
+  return {
+    modelTypes: [],
+    priceMax: maxPrice,
+    rangeBands: [],
+    frameSizes: [],
+    colourways: [],
+    features: [],
+  }
+}
+
+function matchesFilters(
+  product: CategoryFilter4Product,
+  filters: CategoryFilter4FilterState,
+  rangeBands: CategoryFilter4RangeBand[]
+): boolean {
+  if (filters.modelTypes.length > 0 && !filters.modelTypes.includes(product.modelType)) return false
+  if (product.price > filters.priceMax) return false
+  if (filters.rangeBands.length > 0) {
+    const inBand = filters.rangeBands.some(value => {
+      const band = rangeBands.find(b => b.value === value)
+      return band && product.rangeKm >= band.min && product.rangeKm < band.max
+    })
+    if (!inBand) return false
+  }
+  if (filters.frameSizes.length > 0 && !filters.frameSizes.includes(product.frameSize)) return false
+  if (filters.colourways.length > 0 && !filters.colourways.includes(product.colourway)) return false
+  if (filters.features.length > 0 && !filters.features.every(f => product.features.includes(f))) return false
+  return true
+}
+
+/** The shared filter hook — counts are derived from the catalogue by this
+ * predicate, never typed, so an option count can never disagree with the grid. */
+export function useCategoryFilter4State(
+  products: CategoryFilter4Product[],
+  facets: CategoryFilter4Facets,
+  maxPrice: number
+) {
+  const [filters, setFilters] = useState<CategoryFilter4FilterState>(() => emptyFilters(maxPrice))
+  const [sort, setSort] = useState(() => facets.sortOptions[0]?.value ?? 'newest')
+
+  const filtered = useMemo(() => {
+    const matches = products.filter(product => matchesFilters(product, filters, facets.rangeBands))
+    const sorted = [...matches]
+    if (sort === 'price-asc') sorted.sort((a, b) => a.price - b.price)
+    if (sort === 'price-desc') sorted.sort((a, b) => b.price - a.price)
+    if (sort === 'range') sorted.sort((a, b) => b.rangeKm - a.rangeKm)
+    if (sort === 'rating') sorted.sort((a, b) => b.rating - a.rating)
+    return sorted
+  }, [products, filters, sort, facets.rangeBands])
+
+  function countWith(partial: Partial<CategoryFilter4FilterState>): number {
+    const next = { ...filters, ...partial }
+    return products.filter(product => matchesFilters(product, next, facets.rangeBands)).length
+  }
+
+  return { filters, setFilters, sort, setSort, filtered, countWith }
+}

package/src/blocks/e-commerce/category-filters/category-filter-4.tsx

@@ -0,0 +1,298 @@
+'use client'
+
+import { useState } from 'react'
+import { SlidersHorizontal } from 'lucide-react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from '../../../ui/empty'
+
+import { CategoryFilter4ChipRail } from './category-filter-4-chip-rail'
+import { CategoryFilter4Drawer } from './category-filter-4-drawer'
+import { CategoryFilter4Sidebar } from './category-filter-4-sidebar'
+import { CategoryFilter4SortSheet } from './category-filter-4-sort-sheet'
+import { emptyFilters, useCategoryFilter4State } from './category-filter-4-state'
+
+export interface CategoryFilter4SortOption {
+  value: string
+  label: string
+}
+
+export interface CategoryFilter4FacetOption {
+  value: string
+  label: string
+}
+
+export interface CategoryFilter4RangeBand {
+  value: string
+  label: string
+  min: number
+  max: number
+}
+
+export interface CategoryFilter4Facets {
+  sortOptions: CategoryFilter4SortOption[]
+  frameSizes: string[]
+  modelTypes: CategoryFilter4FacetOption[]
+  rangeBands: CategoryFilter4RangeBand[]
+  featureOptions: CategoryFilter4FacetOption[]
+}
+
+export interface CategoryFilter4FilterState {
+  modelTypes: string[]
+  priceMax: number
+  rangeBands: string[]
+  frameSizes: string[]
+  colourways: string[]
+  features: string[]
+}
+
+export interface CategoryFilter4Product {
+  id: string
+  name: string
+  modelType: string
+  price: number
+  rangeKm: number
+  frameSize: string
+  colourway: string
+  features: string[]
+  rating: number
+}
+
+export interface CategoryFilter4Props {
+  products: CategoryFilter4Product[]
+  facets: CategoryFilter4Facets
+  colourNames: Record<string, string>
+  fallbackImage: string
+  maxPrice: number
+  filtersLabel?: string
+  sortLabel?: string
+  sortByLabel?: string
+  modelTypeLabel?: string
+  rangeLabel?: string
+  frameSizeLabel?: string
+  colourLabel?: string
+  featuresLabel?: string
+  resultsCountLabel?: (count: number) => string
+  clearAllLabel?: string
+  showResultsLabel?: (count: number) => string
+  noResultsLabel?: string
+  noResultsTitle?: string
+  noResultsDescription?: string
+  noResultsCtaLabel?: string
+  onFiltersChange?: (filters: CategoryFilter4FilterState) => void
+  onSortChange?: (sort: string) => void
+  onProductSelect?: (product: CategoryFilter4Product) => void
+}
+
+function activeFilterCount(
+  filters: CategoryFilter4FilterState,
+  empty: CategoryFilter4FilterState
+): number {
+  return (
+    filters.modelTypes.length +
+    filters.rangeBands.length +
+    filters.frameSizes.length +
+    filters.colourways.length +
+    filters.features.length +
+    (filters.priceMax < empty.priceMax ? 1 : 0)
+  )
+}
+
+export function CategoryFilter4({
+  products,
+  facets,
+  colourNames,
+  fallbackImage,
+  maxPrice,
+  filtersLabel = 'Filtros',
+  sortLabel = 'Ordenar',
+  sortByLabel = 'Ordenar por',
+  modelTypeLabel = 'Tipo de modelo',
+  rangeLabel = 'Autonomía',
+  frameSizeLabel = 'Talla de cuadro',
+  colourLabel = 'Color',
+  featuresLabel = 'Características',
+  resultsCountLabel = count => `${count} ${count === 1 ? 'producto' : 'productos'}`,
+  clearAllLabel = 'Borrar todos',
+  showResultsLabel = count => `Mostrar ${count} ${count === 1 ? 'producto' : 'productos'}`,
+  noResultsLabel = 'Sin coincidencias',
+  noResultsTitle = 'No hay productos que coincidan con estos filtros',
+  noResultsDescription = 'Prueba a relajar alguno de los filtros aplicados.',
+  noResultsCtaLabel = 'Borrar todos los filtros',
+  onFiltersChange,
+  onSortChange,
+  onProductSelect,
+}: CategoryFilter4Props) {
+  const empty = emptyFilters(maxPrice)
+  const { filters, setFilters, sort, setSort, filtered, countWith } = useCategoryFilter4State(
+    products,
+    facets,
+    maxPrice
+  )
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [sortOpen, setSortOpen] = useState(false)
+
+  const handleFiltersChange = (next: CategoryFilter4FilterState) => {
+    setFilters(next)
+    onFiltersChange?.(next)
+  }
+
+  const handleSortChange = (next: string) => {
+    setSort(next)
+    onSortChange?.(next)
+  }
+
+  const count = activeFilterCount(filters, empty)
+  const selectedSortLabel = facets.sortOptions.find(option => option.value === sort)?.label ?? sortByLabel
+
+  return (
+    <div className="w-full">
+      <div className="bg-background/95 sticky top-0 z-10 flex items-center justify-between gap-2 border-b px-4 py-2 backdrop-blur sm:px-6 lg:hidden">
+        <Button variant="outline" size="sm" onClick={() => setDrawerOpen(true)}>
+          <SlidersHorizontal className="size-3.5" />
+          {filtersLabel}
+          {count > 0 ? <Badge className="ml-1 size-4 justify-center rounded-full p-0 text-[10px]">{count}</Badge> : null}
+        </Button>
+        <Button variant="ghost" size="sm" onClick={() => setSortOpen(true)}>
+          {sortLabel}: {selectedSortLabel}
+        </Button>
+        <span aria-live="polite" className="text-muted-foreground text-xs tabular-nums">
+          {resultsCountLabel(filtered.length)}
+        </span>
+      </div>
+
+      <div className="px-4 py-2 sm:px-6 lg:hidden">
+        <CategoryFilter4ChipRail
+          filters={filters}
+          onChange={handleFiltersChange}
+          empty={empty}
+          clearAllLabel={clearAllLabel}
+        />
+      </div>
+
+      <div className="flex gap-8 px-4 py-6 sm:px-6">
+        <div className="hidden lg:block">
+          <CategoryFilter4Sidebar
+            filters={filters}
+            onChange={handleFiltersChange}
+            countWith={countWith}
+            facets={facets}
+            colourNames={colourNames}
+            modelTypeLabel={modelTypeLabel}
+            rangeLabel={rangeLabel}
+            frameSizeLabel={frameSizeLabel}
+            colourLabel={colourLabel}
+            featuresLabel={featuresLabel}
+          />
+        </div>
+
+        <div className="flex-1">
+          <div className="hidden items-center justify-between gap-2 lg:flex">
+            <CategoryFilter4ChipRail
+              filters={filters}
+              onChange={setFilters}
+              empty={empty}
+              clearAllLabel={clearAllLabel}
+            />
+            <span aria-live="polite" className="text-muted-foreground text-xs tabular-nums">
+              {resultsCountLabel(filtered.length)}
+            </span>
+          </div>
+
+          {filtered.length === 0 ? (
+            <Empty className="mt-6">
+              <EmptyHeader>
+                <EmptyTitle>{noResultsTitle}</EmptyTitle>
+                <EmptyDescription>{noResultsDescription}</EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent>
+                <Button size="sm" onClick={() => handleFiltersChange(empty)}>
+                  {noResultsCtaLabel}
+                </Button>
+              </EmptyContent>
+            </Empty>
+          ) : (
+            <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3">
+              {filtered.map(product => {
+                const card = (
+                  <>
+                    {/*
+                      An empty grey square told the reader nothing and made a filtered grid look
+                      broken rather than filtered. The alt is empty on purpose: the name and price
+                      directly beneath already carry everything the picture would say.
+                    */}
+                    <img
+                      src={fallbackImage || undefined}
+                      alt=""
+                      loading="lazy"
+                      decoding="async"
+                      className="bg-muted aspect-square w-full rounded-lg object-cover"
+                    />
+                    <p className="text-sm font-medium">{product.name}</p>
+                    <p className="text-muted-foreground text-xs tabular-nums">
+                      ${product.price.toLocaleString()} · {product.rangeKm} km
+                    </p>
+                  </>
+                )
+
+                return onProductSelect ? (
+                  <button
+                    key={product.id}
+                    type="button"
+                    onClick={() => onProductSelect(product)}
+                    className="flex cursor-pointer flex-col gap-1.5 text-left"
+                  >
+                    {card}
+                  </button>
+                ) : (
+                  <div key={product.id} className="flex flex-col gap-1.5">
+                    {card}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <CategoryFilter4Drawer
+        open={drawerOpen}
+        onOpenChange={setDrawerOpen}
+        filters={filters}
+        onChange={handleFiltersChange}
+        countWith={countWith}
+        resultCount={filtered.length}
+        empty={empty}
+        facets={facets}
+        colourNames={colourNames}
+        filtersLabel={filtersLabel}
+        modelTypeLabel={modelTypeLabel}
+        rangeLabel={rangeLabel}
+        frameSizeLabel={frameSizeLabel}
+        colourLabel={colourLabel}
+        featuresLabel={featuresLabel}
+        clearAllLabel={clearAllLabel}
+        showResultsLabel={showResultsLabel}
+        noResultsLabel={noResultsLabel}
+        noResultsDescription={noResultsDescription}
+      />
+      <CategoryFilter4SortSheet
+        open={sortOpen}
+        onOpenChange={setSortOpen}
+        sort={sort}
+        onSortChange={handleSortChange}
+        sortOptions={facets.sortOptions}
+        sortByLabel={sortByLabel}
+      />
+    </div>
+  )
+}
+
+export default CategoryFilter4

package/src/blocks/e-commerce/checkout-forms/card-formatting.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import { formatCardNumber, formatExpiryDate } from './card-formatting'
+
+describe('formatCardNumber', () => {
+  it('strips non-digit characters', () => {
+    expect(formatCardNumber('4242 4242 4242 4242')).toBe('4242 4242 4242 4242')
+  })
+
+  it('groups digits in blocks of four', () => {
+    expect(formatCardNumber('4242424242424242')).toBe('4242 4242 4242 4242')
+  })
+
+  it('caps at sixteen digits', () => {
+    expect(formatCardNumber('42424242424242421234')).toBe('4242 4242 4242 4242')
+  })
+
+  it('does not add a trailing group separator', () => {
+    expect(formatCardNumber('42424242')).toBe('4242 4242')
+  })
+
+  it('returns an empty string for no input', () => {
+    expect(formatCardNumber('')).toBe('')
+  })
+})
+
+describe('formatExpiryDate', () => {
+  it('masks two-digit months without a slash', () => {
+    expect(formatExpiryDate('12')).toBe('12')
+  })
+
+  it('masks MM/YY once a third digit is typed', () => {
+    expect(formatExpiryDate('122')).toBe('12/2')
+    expect(formatExpiryDate('1226')).toBe('12/26')
+  })
+
+  it('strips non-digit characters', () => {
+    expect(formatExpiryDate('12/26')).toBe('12/26')
+  })
+
+  it('caps at four digits', () => {
+    expect(formatExpiryDate('12261234')).toBe('12/26')
+  })
+
+  it('returns an empty string for no input', () => {
+    expect(formatExpiryDate('')).toBe('')
+  })
+})

package/src/blocks/e-commerce/checkout-forms/card-formatting.ts

@@ -0,0 +1,9 @@
+export function formatCardNumber(value: string, maxDigits = 16): string {
+  const digits = value.replace(/\D/g, '').slice(0, maxDigits)
+  return digits.replace(/(\d{4})(?=\d)/g, '$1 ')
+}
+
+export function formatExpiryDate(value: string, maxDigits = 4): string {
+  const digits = value.replace(/\D/g, '').slice(0, maxDigits)
+  return digits.length > 2 ? `${digits.slice(0, 2)}/${digits.slice(2)}` : digits
+}

package/src/blocks/e-commerce/checkout-forms/checkbox-check.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useLayoutEffect, useRef, useState } from 'react'
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
+
+import { cn } from '../../../lib/utils'
+
+const BOX_MS = 150
+const DRAW_MS = 350
+const UNCHECK_MS = 150
+const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'
+
+export function CheckboxCheck({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props) {
+  const pathRef = useRef<SVGPathElement>(null)
+  const [length, setLength] = useState(15)
+
+  useLayoutEffect(() => {
+    const path = pathRef.current
+    if (path) {
+      setLength(Math.ceil(path.getTotalLength()))
+    }
+  }, [])
+
+  const mark = indeterminate ? 'M2.12 5.08H8.47' : 'M1.69 5.08L3.81 7.2L8.47 2.54'
+
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+        'motion-reduce:transition-none',
+        className
+      )}
+      style={{ transition: `background-color ${BOX_MS}ms ${EASE}, border-color ${BOX_MS}ms ${EASE}` }}
+      indeterminate={indeterminate}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        keepMounted
+        data-slot="checkbox-indicator"
+        className={cn(
+          'grid size-3.5 place-content-center text-current',
+          '[&_path]:[transition:stroke-dashoffset_var(--check-uncheck)_var(--check-ease)]',
+          '[&_path]:[stroke-dashoffset:var(--check-len)]',
+          'data-checked:[&_path]:[stroke-dashoffset:0]',
+          'data-checked:[&_path]:[transition-duration:var(--check-draw)]',
+          'motion-reduce:[&_path]:transition-none'
+        )}
+        style={
+          {
+            '--check-len': length,
+            '--check-draw': `${DRAW_MS}ms`,
+            '--check-uncheck': `${UNCHECK_MS}ms`,
+            '--check-ease': EASE,
+          } as React.CSSProperties
+        }
+      >
+        <svg viewBox="0 0 10.1668 10.1668" fill="none" aria-hidden className="size-full overflow-visible">
+          <path
+            ref={pathRef}
+            d={mark}
+            stroke="currentColor"
+            strokeWidth={0.9}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ strokeDasharray: length }}
+          />
+        </svg>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export default CheckboxCheck