@thorprovider/blocks 1.0.0 → 3.0.0

package/dist/blocks/e-commerce/category-filters/category-listing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/category-filters/category-listing.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useState, type ReactNode } from 'react'\nimport { Search, SlidersHorizontal, X } from 'lucide-react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../../ui/drawer'\nimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from '../../../ui/empty'\nimport { Input } from '../../../ui/input'\nimport { Label } from '../../../ui/label'\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from '../../../ui/pagination'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../../ui/sheet'\nimport { Skeleton } from '../../../ui/skeleton'\nimport { cn } from '../../../lib/utils'\nimport type { ProductPresentation } from '../../../lib/contracts'\n\nimport { ProductCard } from '../product-list/product-card'\n\nimport { CategoryListingFilterFields } from './category-listing-filter-fields'\n\n/** The bounded presentation surface. The data contract and callbacks are identical. */\nexport type CategoryListingPresentation = 'sidebar' | 'toolbar'\n\nexport interface CategoryListingOption {\n  id: string\n  label: string\n}\n\nexport interface CategoryListingPriceRange {\n  min: number\n  max: number\n  step: number\n}\n\nexport interface CategoryListingSortOption {\n  value: string\n  label: string\n}\n\n/**\n * A provider-backed facet value. `count` is rendered only when it is a real\n * non-negative number — a true zero is preserved, never recomputed or summed.\n */\nexport interface CategoryListingFacetOption {\n  value: string\n  label: string\n  count?: number\n}\n\n/**\n * A generic facet group. The block never derives sector-specific fields\n * (frame size, colourway, range…) and never invents groups or options.\n */\nexport interface CategoryListingFacetGroup {\n  id: string\n  label: string\n  options: CategoryListingFacetOption[]\n}\n\n/** The absolute canonical filter set emitted upward. */\nexport interface CategoryListingFilters {\n  categories: string[]\n  collections: string[]\n  priceRange?: [number, number]\n  facets?: Record<string, string[]>\n}\n\n/**\n * A typed catalog-query error the listing renders for repair. It mirrors the\n * runtime boundary error: `fields` names the exact raw parameters to remove and\n * `feature` is present only for `unmounted-capability`. The block never builds a\n * host URL — it emits the fields through `onRepair`.\n */\nexport interface CategoryListingQueryError {\n  code: 'invalid-query' | 'unsupported-query' | 'unmounted-capability'\n  /** Exact raw URL parameter names that must be removed to repair the query. */\n  fields: string[]\n  message?: string\n  feature?: 'catalog-search' | 'category-filters'\n}\n\n/**\n * The observable listing status. The host derives it from the URL boundary and\n * the provider outcome; the block only renders it. Distinct states stay\n * distinct — a valid empty result is never shown as an error and a raw failure\n * is never swallowed as empty.\n */\nexport type CategoryListingStatus =\n  | { state: 'loading' }\n  | { state: 'ready' }\n  | { state: 'empty' }\n  | { state: 'invalid-query'; error: CategoryListingQueryError }\n  | { state: 'unsupported-query'; error: CategoryListingQueryError }\n  | { state: 'unmounted-capability'; error: CategoryListingQueryError }\n  | { state: 'error'; message?: string }\n\n/** The kind of canonical filter an active chip represents. */\nexport type CategoryListingActiveFilterKind =\n  | 'text'\n  | 'category'\n  | 'collection'\n  | 'price'\n  | 'attribute'\n\n/**\n * A removable active-filter chip. Built only from the actual canonical query:\n * `params` are the raw URL parameter names carrying the filter and `value` is\n * the specific list value to drop.\n */\nexport interface CategoryListingActiveFilter {\n  /** Stable identity for React keys and removal callbacks. */\n  id: string\n  kind: CategoryListingActiveFilterKind\n  /** Human-readable label shown on the chip. */\n  label: string\n  /** Raw URL parameter names that carry this filter. */\n  params: string[]\n  /** The specific list value this chip removes; absent for scalar filters. */\n  value?: string\n}\n\nexport interface CategoryListingProps {\n  /** Bounded presentation option; defaults to `sidebar`. */\n  presentation?: CategoryListingPresentation\n\n  /** Exactly the provider-paged products for the current page. Never re-paginated. */\n  products: ProductPresentation[]\n  pagination: (number | string)[]\n\n  // ── Controlled canonical-query values ─────────────────────────────────────\n  // The listing owns no private query state: these values are authoritative and\n  // every interaction reports the absolute next value through a callback.\n  searchValue: string\n  selectedCategories: string[]\n  selectedCollections: string[]\n  selectedSort: string\n  selectedPage: number\n  selectedPageSize: number\n  selectedPriceRange?: [number, number]\n  selectedFacets?: Record<string, string[]>\n\n  // ── Provider-declared option sets ─────────────────────────────────────────\n  categories?: CategoryListingOption[]\n  collections?: CategoryListingOption[]\n  sortOptions?: CategoryListingSortOption[]\n  /**\n   * Real backend-provided price range only. When absent the price control is\n   * omitted; the block never falls back to a fabricated `0..1000` default.\n   */\n  priceRange?: CategoryListingPriceRange\n  /** Generic provider-backed facet groups; a group renders only when non-empty. */\n  facets?: CategoryListingFacetGroup[]\n  viewOptions?: number[]\n\n  // ── Per-control visibility (selected from installed features) ─────────────\n  showSearch: boolean\n  showFilters: boolean\n  showSort: boolean\n  /** Price remains gated on a real `priceRange` even when this is true. */\n  showPrice?: boolean\n\n  // ── Observable listing states + active-filter chips ───────────────────────\n  status: CategoryListingStatus\n  activeFilters: CategoryListingActiveFilter[]\n\n  // ── Copy ──────────────────────────────────────────────────────────────────\n  filtersTitle?: string\n  applyFiltersLabel?: string\n  selectedText?: string\n  clearAllLabel?: string\n  priceRangeTitle?: string\n  minLabel?: string\n  maxLabel?: string\n  categoriesTitle?: string\n  collectionsTitle?: string\n  sortTitle?: string\n  viewLabel?: string\n  viewPlaceholder?: string\n  sortPlaceholder?: string\n  productsTitle?: string\n  currentLabel?: string\n  searchLabel?: string\n  searchPlaceholder?: string\n  loadingLabel?: string\n  emptyTitle?: string\n  emptyDescription?: string\n  clearFiltersLabel?: string\n  invalidQueryTitle?: string\n  unsupportedQueryTitle?: string\n  unmountedCapabilityTitle?: string\n  errorTitle?: string\n  errorDescription?: string\n  repairLabel?: string\n  retryLabel?: string\n  activeFiltersTitle?: string\n  removeFilterLabel?: string\n\n  // ── Emit-only callbacks: the block never fetches or rewrites the URL ─────\n  onProductClick?: (product: ProductPresentation) => void\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  onSortChange?: (sort: string) => void\n  onFilterChange?: (next: CategoryListingFilters) => void\n  onSearchChange?: (value: string) => void\n  /** Empty-state clear: drops the active filters but never base scope/sort/pageSize. */\n  onClearFilters?: () => void\n  /** Invalid/unsupported/unmounted repair: receives the exact bad fields to remove. */\n  onRepair?: (remove: string[]) => void\n  /** Query/network failure retry: preserves the current query/input. */\n  onRetry?: () => void\n  /** Removes a single active-filter chip. */\n  onRemoveFilter?: (filter: CategoryListingActiveFilter) => void\n}\n\nconst DEFAULT_VIEW_OPTIONS = [10, 25, 50, 100]\n\n/**\n * Pure selection reducer shared by checkbox handlers. Exported so the emitted\n * contract is unit-testable without a DOM (this package's tests render with\n * `react-dom/server`).\n */\nexport function toggleFilterValue(\n  current: readonly string[],\n  value: string,\n  checked: boolean,\n): string[] {\n  return checked ? [...current, value] : current.filter(candidate => candidate !== value)\n}\n\n/** Assemble the typed absolute filter change emitted upward. */\nexport function buildFilterChange(input: {\n  categories: string[]\n  collections: string[]\n  priceRange?: [number, number]\n  facets?: Record<string, string[]>\n}): CategoryListingFilters {\n  const change: CategoryListingFilters = {\n    categories: input.categories,\n    collections: input.collections,\n  }\n  if (input.priceRange) change.priceRange = input.priceRange\n  if (input.facets) change.facets = input.facets\n  return change\n}\n\n/**\n * Reconcile the controlled search draft with the URL-backed `searchValue`.\n *\n * The URL is authoritative, but it only updates after an async server\n * navigation. Binding the input directly to that lagging prop makes React reset\n * it to the previous server value on every re-render, so fast typing loses every\n * character but the last. This pure function keeps a local draft authoritative\n * while the shopper is typing and adopts an external `searchValue`\n * (navigation / reload / back-forward) only when no uncommitted edit is pending.\n */\nexport function reconcileSearchDraft(input: {\n  searchValue?: string\n  prevSearchValue?: string\n  draft: string\n}): { draft: string; prevSearchValue?: string } | null {\n  const { searchValue, prevSearchValue, draft } = input\n  if (searchValue === undefined || searchValue === prevSearchValue) return null\n  const clean = prevSearchValue === undefined || draft === prevSearchValue\n  return { draft: clean ? searchValue : draft, prevSearchValue: searchValue }\n}\n\nexport interface CategoryListingStatusViewProps {\n  status: CategoryListingStatus\n  activeFilters?: CategoryListingActiveFilter[]\n  activeFiltersTitle?: string\n  removeFilterLabel?: string\n  loadingLabel?: string\n  emptyTitle?: string\n  emptyDescription?: string\n  clearFiltersLabel?: string\n  invalidQueryTitle?: string\n  unsupportedQueryTitle?: string\n  unmountedCapabilityTitle?: string\n  errorTitle?: string\n  errorDescription?: string\n  repairLabel?: string\n  retryLabel?: string\n  onClearFilters?: () => void\n  onRepair?: (remove: string[]) => void\n  onRetry?: () => void\n  onRemoveFilter?: (filter: CategoryListingActiveFilter) => void\n}\n\n/** Human-readable description naming the exact offending parameters. */\nfunction describeQueryError(\n  error: CategoryListingQueryError,\n  state: 'invalid-query' | 'unsupported-query' | 'unmounted-capability',\n): string {\n  const fields = error.fields.join(', ')\n  if (state === 'unmounted-capability' && error.feature) {\n    return `${fields} pertenece a la función «${error.feature}», que no está instalada.`\n  }\n  return error.message ?? `Parámetros: ${fields}`\n}\n\n/**\n * Hooks-free presentation of the observable listing states and the removable\n * active-filter chips. Kept separate from `CategoryListing` so the interaction\n * contract (clear / repair / retry / chip removal) is testable by invoking the\n * rendered handlers without a DOM. It renders no products and performs no fetch.\n */\nexport function CategoryListingStatusView({\n  status,\n  activeFilters = [],\n  activeFiltersTitle = 'Filtros activos',\n  removeFilterLabel = 'Quitar filtro',\n  loadingLabel = 'Cargando productos',\n  emptyTitle = 'Sin resultados',\n  emptyDescription = 'Ningún producto coincide con los filtros activos.',\n  clearFiltersLabel = 'Limpiar filtros',\n  invalidQueryTitle = 'Consulta no válida',\n  unsupportedQueryTitle = 'Filtro no disponible',\n  unmountedCapabilityTitle = 'Función no disponible',\n  errorTitle = 'No se pudieron cargar los productos',\n  errorDescription = 'Inténtalo de nuevo.',\n  repairLabel = 'Corregir búsqueda',\n  retryLabel = 'Reintentar',\n  onClearFilters,\n  onRepair,\n  onRetry,\n  onRemoveFilter,\n}: CategoryListingStatusViewProps) {\n  const chips =\n    activeFilters.length > 0 ? (\n      <div role='group' aria-label={activeFiltersTitle} className='flex flex-wrap items-center gap-2'>\n        {activeFilters.map(filter => (\n          <Badge key={filter.id} variant='secondary' className='gap-1 pr-1'>\n            <span>{filter.label}</span>\n            <Button\n              type='button'\n              variant='ghost'\n              size='icon-xs'\n              className='size-4 cursor-pointer rounded-full'\n              aria-label={`${removeFilterLabel}: ${filter.label}`}\n              data-action='remove-filter'\n              data-filter-id={filter.id}\n              onClick={() => onRemoveFilter?.(filter)}\n            >\n              <X aria-hidden='true' />\n            </Button>\n          </Badge>\n        ))}\n      </div>\n    ) : null\n\n  if (status.state === 'ready') return chips\n\n  let body: ReactNode\n  switch (status.state) {\n    case 'loading':\n      body = (\n        <div role='status' aria-live='polite' aria-busy='true' className='flex flex-col gap-4'>\n          <span className='sr-only'>{loadingLabel}</span>\n          <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>\n            {Array.from({ length: 6 }, (_, index) => (\n              <div key={index} className='flex flex-col gap-2'>\n                <Skeleton className='aspect-3/4 w-full rounded-lg' />\n                <Skeleton className='h-4 w-3/4' />\n                <Skeleton className='h-4 w-1/3' />\n              </div>\n            ))}\n          </div>\n        </div>\n      )\n      break\n    case 'empty':\n      body = (\n        <Empty role='status'>\n          <EmptyHeader>\n            <EmptyTitle>{emptyTitle}</EmptyTitle>\n            <EmptyDescription>{emptyDescription}</EmptyDescription>\n          </EmptyHeader>\n          {onClearFilters ? (\n            <EmptyContent>\n              <Button type='button' variant='outline' data-action='clear-filters' onClick={() => onClearFilters()}>\n                {clearFiltersLabel}\n              </Button>\n            </EmptyContent>\n          ) : null}\n        </Empty>\n      )\n      break\n    case 'invalid-query':\n    case 'unsupported-query':\n    case 'unmounted-capability':\n      body = (\n        <Empty role='alert'>\n          <EmptyHeader>\n            <EmptyTitle>\n              {status.state === 'invalid-query'\n                ? invalidQueryTitle\n                : status.state === 'unsupported-query'\n                  ? unsupportedQueryTitle\n                  : unmountedCapabilityTitle}\n            </EmptyTitle>\n            <EmptyDescription>{describeQueryError(status.error, status.state)}</EmptyDescription>\n          </EmptyHeader>\n          {onRepair ? (\n            <EmptyContent>\n              <Button\n                type='button'\n                variant='outline'\n                data-action='repair'\n                onClick={() => onRepair(status.error.fields)}\n              >\n                {repairLabel}\n              </Button>\n            </EmptyContent>\n          ) : null}\n        </Empty>\n      )\n      break\n    case 'error':\n      body = (\n        <Empty role='alert'>\n          <EmptyHeader>\n            <EmptyTitle>{errorTitle}</EmptyTitle>\n            <EmptyDescription>{status.message ?? errorDescription}</EmptyDescription>\n          </EmptyHeader>\n          {onRetry ? (\n            <EmptyContent>\n              <Button type='button' variant='default' data-action='retry' onClick={() => onRetry()}>\n                {retryLabel}\n              </Button>\n            </EmptyContent>\n          ) : null}\n        </Empty>\n      )\n      break\n  }\n\n  return (\n    <div className='flex flex-col gap-4'>\n      {chips}\n      {body}\n    </div>\n  )\n}\n\nexport function CategoryListing({\n  presentation = 'sidebar',\n  products,\n  pagination,\n  searchValue,\n  selectedCategories,\n  selectedCollections,\n  selectedSort,\n  selectedPage,\n  selectedPageSize,\n  selectedPriceRange,\n  selectedFacets = {},\n  categories = [],\n  collections = [],\n  sortOptions = [],\n  priceRange: priceRangeConfig,\n  facets = [],\n  viewOptions = DEFAULT_VIEW_OPTIONS,\n  showSearch,\n  showFilters,\n  showSort,\n  showPrice = true,\n  status,\n  activeFilters,\n  filtersTitle = 'Filtros',\n  applyFiltersLabel = 'Aplicar filtros',\n  selectedText = 'Filtros',\n  clearAllLabel = 'Restablecer',\n  priceRangeTitle = 'Rango de precio',\n  minLabel = 'Mínimo',\n  maxLabel = 'Máximo',\n  categoriesTitle = 'Categoría',\n  collectionsTitle = 'Colección',\n  sortTitle = 'Ordenar por',\n  viewLabel = 'Ver',\n  viewPlaceholder = 'Seleccionar',\n  sortPlaceholder = 'Ordenar por',\n  productsTitle = 'Productos',\n  currentLabel = '(actual)',\n  searchLabel = 'Buscar',\n  searchPlaceholder = 'Buscar',\n  loadingLabel,\n  emptyTitle,\n  emptyDescription,\n  clearFiltersLabel,\n  invalidQueryTitle,\n  unsupportedQueryTitle,\n  unmountedCapabilityTitle,\n  errorTitle,\n  errorDescription,\n  repairLabel,\n  retryLabel,\n  activeFiltersTitle,\n  removeFilterLabel,\n  onProductClick,\n  onPageChange,\n  onPageSizeChange,\n  onSortChange,\n  onFilterChange,\n  onSearchChange,\n  onClearFilters,\n  onRepair,\n  onRetry,\n  onRemoveFilter,\n}: CategoryListingProps) {\n  const searchInputId = useId()\n  const [draftSearch, setDraftSearch] = useState(searchValue)\n  const [prevSearchValue, setPrevSearchValue] = useState<string | undefined>(searchValue)\n  const [isSheetOpen, setIsSheetOpen] = useState(false)\n  const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false)\n  const [isSortDrawerOpen, setIsSortDrawerOpen] = useState(false)\n\n  const reconciledSearch = reconcileSearchDraft({ searchValue, prevSearchValue, draft: draftSearch })\n  if (reconciledSearch) {\n    setPrevSearchValue(reconciledSearch.prevSearchValue)\n    if (reconciledSearch.draft !== draftSearch) setDraftSearch(reconciledSearch.draft)\n  }\n\n  // The desktop surface owns the filters; close every mobile overlay when the\n  // viewport crosses into the desktop layout.\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(min-width: 1024px)')\n    const handleChange = (event: MediaQueryListEvent) => {\n      if (event.matches) {\n        setIsSheetOpen(false)\n        setIsFilterDrawerOpen(false)\n        setIsSortDrawerOpen(false)\n      }\n    }\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [])\n\n  const priceRangeValue: [number, number] = priceRangeConfig\n    ? (selectedPriceRange ?? [priceRangeConfig.min, priceRangeConfig.max])\n    : [0, 0]\n\n  const emitFilters = (overrides: Partial<CategoryListingFilters> = {}) => {\n    onFilterChange?.(\n      buildFilterChange({\n        categories: selectedCategories,\n        collections: selectedCollections,\n        ...(priceRangeConfig ? { priceRange: priceRangeValue } : {}),\n        facets: selectedFacets,\n        ...overrides,\n      }),\n    )\n  }\n\n  const handleCategoryChange = (category: string, checked: boolean) => {\n    emitFilters({ categories: toggleFilterValue(selectedCategories, category, checked) })\n  }\n\n  const handleCollectionChange = (collection: string, checked: boolean) => {\n    emitFilters({ collections: toggleFilterValue(selectedCollections, collection, checked) })\n  }\n\n  const handleFacetChange = (group: CategoryListingFacetGroup, value: string, checked: boolean) => {\n    const current = selectedFacets[group.id] ?? []\n    const nextValues = toggleFilterValue(current, value, checked)\n    const nextFacets: Record<string, string[]> = { ...selectedFacets }\n    if (nextValues.length > 0) nextFacets[group.id] = nextValues\n    else delete nextFacets[group.id]\n    emitFilters({ facets: nextFacets })\n  }\n\n  const handlePriceChange = (next: [number, number]) => {\n    emitFilters({ priceRange: next })\n  }\n\n  const handleClearAll = () => {\n    emitFilters({\n      categories: [],\n      collections: [],\n      ...(priceRangeConfig ? { priceRange: [priceRangeConfig.min, priceRangeConfig.max] as [number, number] } : {}),\n      facets: {},\n    })\n  }\n\n  const handlePageSizeChange = (size: number) => {\n    if (Number.isFinite(size)) onPageSizeChange?.(size)\n  }\n\n  const handlePageChange = (page: number | string) => {\n    if (page === '...') return\n    const numeric = Number(page)\n    if (Number.isFinite(numeric)) onPageChange?.(numeric)\n  }\n\n  const handleSortChange = (sort: string) => {\n    onSortChange?.(sort)\n  }\n\n  const handleSearchChange = (text: string) => {\n    setDraftSearch(text)\n    onSearchChange?.(text)\n  }\n\n  const fields = (\n    <CategoryListingFilterFields\n      selectedText={selectedText}\n      clearAllLabel={clearAllLabel}\n      priceRangeTitle={priceRangeTitle}\n      priceRange={priceRangeValue}\n      priceRangeConfig={showPrice ? priceRangeConfig : undefined}\n      minLabel={minLabel}\n      maxLabel={maxLabel}\n      onPriceChange={handlePriceChange}\n      categoriesTitle={categoriesTitle}\n      categories={categories}\n      selectedCategories={selectedCategories}\n      onCategoryChange={handleCategoryChange}\n      collectionsTitle={collectionsTitle}\n      collections={collections}\n      selectedCollections={selectedCollections}\n      onCollectionChange={handleCollectionChange}\n      facets={facets}\n      selectedFacets={selectedFacets}\n      onFacetChange={handleFacetChange}\n      onClearAll={handleClearAll}\n    />\n  )\n\n  const sortControl = (ariaLabel: string) =>\n    showSort && sortOptions.length > 0 ? (\n      <Select value={selectedSort} onValueChange={handleSortChange}>\n        <SelectTrigger className='h-8 w-[180px]' aria-label={ariaLabel}>\n          <SelectValue placeholder={sortPlaceholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {sortOptions.map(option => (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    ) : null\n\n  const searchControl = showSearch ? (\n    <div className='relative w-full sm:w-64'>\n      <label htmlFor={searchInputId} className='sr-only'>\n        {searchLabel}\n      </label>\n      <Search\n        aria-hidden='true'\n        className='text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2'\n      />\n      <Input\n        id={searchInputId}\n        type='search'\n        value={draftSearch}\n        onChange={event => handleSearchChange(event.target.value)}\n        placeholder={searchPlaceholder}\n        aria-label={searchLabel}\n        className='h-8 pl-8'\n      />\n    </div>\n  ) : null\n\n  const pageSizeControl =\n    viewOptions.length > 0 ? (\n      <div className='hidden items-center gap-2 sm:flex'>\n        <span className='text-sm'>{viewLabel}</span>\n        <Select\n          value={String(selectedPageSize)}\n          onValueChange={value => {\n            const option = viewOptions.find(candidate => String(candidate) === value)\n            handlePageSizeChange(option ?? Number(value))\n          }}\n        >\n          <SelectTrigger className='h-8 w-[100px]' aria-label={viewLabel}>\n            <SelectValue placeholder={viewPlaceholder} />\n          </SelectTrigger>\n          <SelectContent>\n            {viewOptions.map(option => (\n              <SelectItem key={option} value={String(option)}>\n                {option}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    ) : null\n\n  const statusView = (\n    <CategoryListingStatusView\n      status={status}\n      activeFilters={activeFilters}\n      loadingLabel={loadingLabel}\n      emptyTitle={emptyTitle}\n      emptyDescription={emptyDescription}\n      clearFiltersLabel={clearFiltersLabel}\n      invalidQueryTitle={invalidQueryTitle}\n      unsupportedQueryTitle={unsupportedQueryTitle}\n      unmountedCapabilityTitle={unmountedCapabilityTitle}\n      errorTitle={errorTitle}\n      errorDescription={errorDescription}\n      repairLabel={repairLabel}\n      retryLabel={retryLabel}\n      activeFiltersTitle={activeFiltersTitle}\n      removeFilterLabel={removeFilterLabel}\n      onClearFilters={onClearFilters}\n      onRepair={onRepair}\n      onRetry={onRetry}\n      onRemoveFilter={onRemoveFilter}\n    />\n  )\n\n  const results =\n    status.state === 'ready' ? (\n      <section aria-labelledby='products-heading' className='flex flex-col gap-6'>\n        <h2 id='products-heading' className='sr-only'>\n          {productsTitle}\n        </h2>\n        <ul\n          data-slot='category-listing-products'\n          className={cn(\n            'grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6',\n            presentation === 'sidebar' ? 'lg:grid-cols-3' : 'lg:grid-cols-4',\n          )}\n        >\n          {products.map(product => (\n            <li key={product.id}>\n              <ProductCard\n                item={product}\n                presentation='minimal'\n                hideAddToCart\n                onProductClick={onProductClick}\n              />\n            </li>\n          ))}\n        </ul>\n\n        {pagination.length > 0 ? (\n          <Pagination aria-label='Paginación'>\n            <PaginationContent>\n              {pagination.map((page, index) =>\n                page === '...' ? (\n                  <PaginationEllipsis key={`${page}-${index}`} />\n                ) : (\n                  <PaginationItem key={page}>\n                    <Button\n                      type='button'\n                      variant={selectedPage === page ? 'outline' : 'ghost'}\n                      size='icon'\n                      data-slot='pagination-link'\n                      data-active={selectedPage === page}\n                      aria-current={selectedPage === page ? 'page' : undefined}\n                      className='size-8 cursor-pointer p-0'\n                      onClick={() => handlePageChange(page)}\n                    >\n                      {page}\n                      {selectedPage === page && <span className='sr-only'>{currentLabel}</span>}\n                    </Button>\n                  </PaginationItem>\n                ),\n              )}\n            </PaginationContent>\n          </Pagination>\n        ) : null}\n      </section>\n    ) : null\n\n  return (\n    <div className='mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8'>\n      <div className={cn('flex flex-col gap-8', presentation === 'sidebar' && 'lg:flex-row')}>\n        {presentation === 'sidebar' && showFilters ? (\n          <aside className='hidden w-full flex-none lg:block lg:w-72'>\n            <div className='max-h-100vh sticky top-4 overflow-y-auto'>\n              <div className='flex flex-col gap-6 pb-6'>{fields}</div>\n            </div>\n          </aside>\n        ) : null}\n\n        <main className='flex min-w-0 flex-1 flex-col gap-6'>\n          {presentation === 'toolbar' ? (\n            <>\n              <div className='bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-10 -mx-4 flex items-center gap-2 border-b px-4 py-2 backdrop-blur lg:hidden'>\n                {showFilters ? (\n                  <Button\n                    type='button'\n                    variant='outline'\n                    size='sm'\n                    className='h-9 flex-1 cursor-pointer justify-start'\n                    onClick={() => setIsFilterDrawerOpen(true)}\n                  >\n                    <SlidersHorizontal aria-hidden='true' />\n                    {filtersTitle}\n                    {activeFilters.length > 0 ? (\n                      <Badge variant='secondary' className='ms-auto'>\n                        {activeFilters.length}\n                      </Badge>\n                    ) : null}\n                  </Button>\n                ) : null}\n                {showSort && sortOptions.length > 0 ? (\n                  <Button\n                    type='button'\n                    variant='outline'\n                    size='sm'\n                    className='h-9 cursor-pointer'\n                    aria-label={sortTitle}\n                    onClick={() => setIsSortDrawerOpen(true)}\n                  >\n                    {sortTitle}\n                  </Button>\n                ) : null}\n              </div>\n\n              <div className='hidden items-center gap-3 lg:flex'>\n                {showFilters ? (\n                  <Button\n                    type='button'\n                    variant='outline'\n                    size='sm'\n                    className='h-8 cursor-pointer'\n                    onClick={() => setIsFilterDrawerOpen(true)}\n                  >\n                    <SlidersHorizontal aria-hidden='true' />\n                    {filtersTitle}\n                    {activeFilters.length > 0 ? (\n                      <Badge variant='secondary'>{activeFilters.length}</Badge>\n                    ) : null}\n                  </Button>\n                ) : null}\n                <div className='ms-auto'>{sortControl(sortTitle)}</div>\n              </div>\n            </>\n          ) : null}\n\n          <div className='flex flex-wrap items-center justify-between gap-4'>\n            <div className='flex flex-1 items-center gap-4'>\n              {presentation === 'sidebar' && showFilters ? (\n                <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>\n                  <SheetTrigger asChild>\n                    <Button\n                      variant='outline'\n                      size='sm'\n                      className='h-8 cursor-pointer px-3 text-xs lg:hidden'\n                    >\n                      <SlidersHorizontal aria-hidden='true' />\n                      {filtersTitle}\n                    </Button>\n                  </SheetTrigger>\n                  <SheetContent side='left' className='w-full p-0 sm:w-[380px] lg:hidden'>\n                    <SheetHeader className='border-b px-6 py-4'>\n                      <SheetTitle className='text-lg'>{filtersTitle}</SheetTitle>\n                    </SheetHeader>\n                    <div className='h-[calc(100vh-4rem)] overflow-y-auto p-6'>\n                      <div className='flex flex-col gap-6'>{fields}</div>\n                    </div>\n                  </SheetContent>\n                </Sheet>\n              ) : null}\n              {searchControl}\n              {pageSizeControl}\n            </div>\n            {presentation === 'sidebar' ? (\n              <div className='flex items-center gap-4'>{sortControl(sortPlaceholder)}</div>\n            ) : null}\n          </div>\n\n          {statusView}\n          {results}\n        </main>\n      </div>\n\n      {presentation === 'toolbar' && showFilters ? (\n        <Drawer open={isFilterDrawerOpen} onOpenChange={setIsFilterDrawerOpen}>\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{filtersTitle}</DrawerTitle>\n            </DrawerHeader>\n            <div className='min-h-0 flex-1 overflow-y-auto px-4'>{fields}</div>\n            <div className='flex items-center gap-2 border-t p-4 pb-[max(1rem,env(safe-area-inset-bottom))]'>\n              <Button type='button' variant='ghost' onClick={handleClearAll}>\n                {clearAllLabel}\n              </Button>\n              <Button type='button' className='flex-1' onClick={() => setIsFilterDrawerOpen(false)}>\n                {applyFiltersLabel}\n              </Button>\n            </div>\n          </DrawerContent>\n        </Drawer>\n      ) : null}\n\n      {presentation === 'toolbar' && showSort && sortOptions.length > 0 ? (\n        <Drawer open={isSortDrawerOpen} onOpenChange={setIsSortDrawerOpen}>\n          <DrawerContent>\n            <DrawerHeader>\n              <DrawerTitle>{sortTitle}</DrawerTitle>\n            </DrawerHeader>\n            <div className='px-4 pb-6'>\n              <RadioGroup\n                value={selectedSort}\n                onValueChange={value => {\n                  if (typeof value === 'string') {\n                    handleSortChange(value)\n                    setIsSortDrawerOpen(false)\n                  }\n                }}\n                className='gap-3'\n              >\n                {sortOptions.map(option => (\n                  <div key={option.value} className='flex items-center gap-2'>\n                    <RadioGroupItem value={option.value} id={`listing-sort-${option.value}`} />\n                    <Label htmlFor={`listing-sort-${option.value}`} className='min-h-11 font-normal'>\n                      {option.label}\n                    </Label>\n                  </div>\n                ))}\n              </RadioGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n      ) : null}\n    </div>\n  )\n}\n\nexport default CategoryListing\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkbox-check.d.ts

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+export declare function CheckboxCheck({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props): import("react").JSX.Element;
+export default CheckboxCheck;
+//# sourceMappingURL=checkbox-check.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkbox-check.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-check.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkbox-check.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AASvE,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,+BA2DjG;AAED,eAAe,aAAa,CAAA"}

package/dist/blocks/e-commerce/checkout-forms/checkbox-check.js

@@ -0,0 +1,97 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkbox_check_exports = {};
+__export(checkbox_check_exports, {
+  CheckboxCheck: () => CheckboxCheck,
+  default: () => checkbox_check_default
+});
+module.exports = __toCommonJS(checkbox_check_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_checkbox = require("@base-ui/react/checkbox");
+var import_utils = require("../../../lib/utils.js");
+const BOX_MS = 150;
+const DRAW_MS = 350;
+const UNCHECK_MS = 150;
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+function CheckboxCheck({ className, indeterminate, ...props }) {
+  const pathRef = (0, import_react.useRef)(null);
+  const [length, setLength] = (0, import_react.useState)(15);
+  (0, import_react.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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_checkbox.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: (0, import_utils.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,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_checkbox.Checkbox.Indicator,
+        {
+          keepMounted: true,
+          "data-slot": "checkbox-indicator",
+          className: (0, import_utils.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
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 10.1668 10.1668", fill: "none", "aria-hidden": true, className: "size-full overflow-visible", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              ref: pathRef,
+              d: mark,
+              stroke: "currentColor",
+              strokeWidth: 0.9,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { strokeDasharray: length }
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+var checkbox_check_default = CheckboxCheck;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxCheck
+});
+//# sourceMappingURL=checkbox-check.js.map

package/dist/blocks/e-commerce/checkout-forms/checkbox-check.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkbox-check.tsx"],"sourcesContent":["'use client'\n\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\n\nimport { cn } from '../../../lib/utils'\n\nconst BOX_MS = 150\nconst DRAW_MS = 350\nconst UNCHECK_MS = 150\nconst EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'\n\nexport function CheckboxCheck({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props) {\n  const pathRef = useRef<SVGPathElement>(null)\n  const [length, setLength] = useState(15)\n\n  useLayoutEffect(() => {\n    const path = pathRef.current\n    if (path) {\n      setLength(Math.ceil(path.getTotalLength()))\n    }\n  }, [])\n\n  const mark = indeterminate ? 'M2.12 5.08H8.47' : 'M1.69 5.08L3.81 7.2L8.47 2.54'\n\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        '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',\n        'motion-reduce:transition-none',\n        className\n      )}\n      style={{ transition: `background-color ${BOX_MS}ms ${EASE}, border-color ${BOX_MS}ms ${EASE}` }}\n      indeterminate={indeterminate}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        keepMounted\n        data-slot=\"checkbox-indicator\"\n        className={cn(\n          'grid size-3.5 place-content-center text-current',\n          '[&_path]:[transition:stroke-dashoffset_var(--check-uncheck)_var(--check-ease)]',\n          '[&_path]:[stroke-dashoffset:var(--check-len)]',\n          'data-checked:[&_path]:[stroke-dashoffset:0]',\n          'data-checked:[&_path]:[transition-duration:var(--check-draw)]',\n          'motion-reduce:[&_path]:transition-none'\n        )}\n        style={\n          {\n            '--check-len': length,\n            '--check-draw': `${DRAW_MS}ms`,\n            '--check-uncheck': `${UNCHECK_MS}ms`,\n            '--check-ease': EASE,\n          } as React.CSSProperties\n        }\n      >\n        <svg viewBox=\"0 0 10.1668 10.1668\" fill=\"none\" aria-hidden className=\"size-full overflow-visible\">\n          <path\n            ref={pathRef}\n            d={mark}\n            stroke=\"currentColor\"\n            strokeWidth={0.9}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            style={{ strokeDasharray: length }}\n          />\n        </svg>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport default CheckboxCheck"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DU;AAxDV,mBAAkD;AAClD,sBAA8C;AAE9C,mBAAmB;AAEnB,MAAM,SAAS;AACf,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,OAAO;AAEN,SAAS,cAAc,EAAE,WAAW,eAAe,GAAG,MAAM,GAAiC;AAClG,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,EAAE;AAEvC,oCAAgB,MAAM;AACpB,UAAM,OAAO,QAAQ;AACrB,QAAI,MAAM;AACR,gBAAU,KAAK,KAAK,KAAK,eAAe,CAAC,CAAC;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,gBAAgB,oBAAoB;AAEjD,SACE;AAAA,IAAC,gBAAAA,SAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,YAAY,oBAAoB,MAAM,MAAM,IAAI,kBAAkB,MAAM,MAAM,IAAI,GAAG;AAAA,MAC9F;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,gBAAAA,SAAkB;AAAA,QAAlB;AAAA,UACC,aAAW;AAAA,UACX,aAAU;AAAA,UACV,eAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,OACE;AAAA,YACE,eAAe;AAAA,YACf,gBAAgB,GAAG,OAAO;AAAA,YAC1B,mBAAmB,GAAG,UAAU;AAAA,YAChC,gBAAgB;AAAA,UAClB;AAAA,UAGF,sDAAC,SAAI,SAAQ,uBAAsB,MAAK,QAAO,eAAW,MAAC,WAAU,8BACnE;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,GAAG;AAAA,cACH,QAAO;AAAA,cACP,aAAa;AAAA,cACb,eAAc;AAAA,cACd,gBAAe;AAAA,cACf,OAAO,EAAE,iBAAiB,OAAO;AAAA;AAAA,UACnC,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;","names":["CheckboxPrimitive"]}

package/dist/blocks/e-commerce/checkout-forms/checkbox-check.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cn } from "../../../lib/utils.mjs";
+const BOX_MS = 150;
+const DRAW_MS = 350;
+const UNCHECK_MS = 150;
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+function CheckboxCheck({ className, indeterminate, ...props }) {
+  const pathRef = useRef(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 /* @__PURE__ */ jsx(
+    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,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Indicator,
+        {
+          keepMounted: true,
+          "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
+          },
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10.1668 10.1668", fill: "none", "aria-hidden": true, className: "size-full overflow-visible", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              ref: pathRef,
+              d: mark,
+              stroke: "currentColor",
+              strokeWidth: 0.9,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { strokeDasharray: length }
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+var checkbox_check_default = CheckboxCheck;
+export {
+  CheckboxCheck,
+  checkbox_check_default as default
+};
+//# sourceMappingURL=checkbox-check.mjs.map

package/dist/blocks/e-commerce/checkout-forms/checkbox-check.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkbox-check.tsx"],"sourcesContent":["'use client'\n\nimport { useLayoutEffect, useRef, useState } from 'react'\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\n\nimport { cn } from '../../../lib/utils'\n\nconst BOX_MS = 150\nconst DRAW_MS = 350\nconst UNCHECK_MS = 150\nconst EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'\n\nexport function CheckboxCheck({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props) {\n  const pathRef = useRef<SVGPathElement>(null)\n  const [length, setLength] = useState(15)\n\n  useLayoutEffect(() => {\n    const path = pathRef.current\n    if (path) {\n      setLength(Math.ceil(path.getTotalLength()))\n    }\n  }, [])\n\n  const mark = indeterminate ? 'M2.12 5.08H8.47' : 'M1.69 5.08L3.81 7.2L8.47 2.54'\n\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        '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',\n        'motion-reduce:transition-none',\n        className\n      )}\n      style={{ transition: `background-color ${BOX_MS}ms ${EASE}, border-color ${BOX_MS}ms ${EASE}` }}\n      indeterminate={indeterminate}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        keepMounted\n        data-slot=\"checkbox-indicator\"\n        className={cn(\n          'grid size-3.5 place-content-center text-current',\n          '[&_path]:[transition:stroke-dashoffset_var(--check-uncheck)_var(--check-ease)]',\n          '[&_path]:[stroke-dashoffset:var(--check-len)]',\n          'data-checked:[&_path]:[stroke-dashoffset:0]',\n          'data-checked:[&_path]:[transition-duration:var(--check-draw)]',\n          'motion-reduce:[&_path]:transition-none'\n        )}\n        style={\n          {\n            '--check-len': length,\n            '--check-draw': `${DRAW_MS}ms`,\n            '--check-uncheck': `${UNCHECK_MS}ms`,\n            '--check-ease': EASE,\n          } as React.CSSProperties\n        }\n      >\n        <svg viewBox=\"0 0 10.1668 10.1668\" fill=\"none\" aria-hidden className=\"size-full overflow-visible\">\n          <path\n            ref={pathRef}\n            d={mark}\n            stroke=\"currentColor\"\n            strokeWidth={0.9}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            style={{ strokeDasharray: length }}\n          />\n        </svg>\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport default CheckboxCheck"],"mappings":";AA0DU;AAxDV,SAAS,iBAAiB,QAAQ,gBAAgB;AAClD,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAEnB,MAAM,SAAS;AACf,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,OAAO;AAEN,SAAS,cAAc,EAAE,WAAW,eAAe,GAAG,MAAM,GAAiC;AAClG,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,kBAAgB,MAAM;AACpB,UAAM,OAAO,QAAQ;AACrB,QAAI,MAAM;AACR,gBAAU,KAAK,KAAK,KAAK,eAAe,CAAC,CAAC;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,gBAAgB,oBAAoB;AAEjD,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,YAAY,oBAAoB,MAAM,MAAM,IAAI,kBAAkB,MAAM,MAAM,IAAI,GAAG;AAAA,MAC9F;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAW;AAAA,UACX,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,OACE;AAAA,YACE,eAAe;AAAA,YACf,gBAAgB,GAAG,OAAO;AAAA,YAC1B,mBAAmB,GAAG,UAAU;AAAA,YAChC,gBAAgB;AAAA,UAClB;AAAA,UAGF,8BAAC,SAAI,SAAQ,uBAAsB,MAAK,QAAO,eAAW,MAAC,WAAU,8BACnE;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,GAAG;AAAA,cACH,QAAO;AAAA,cACP,aAAa;AAAA,cACb,eAAc;AAAA,cACd,gBAAe;AAAA,cACf,OAAO,EAAE,iBAAiB,OAAO;AAAA;AAAA,UACnC,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.d.ts

@@ -0,0 +1,41 @@
+import type { FulfilmentStage, FulfilmentStageDetail } from './checkout-confirmation';
+interface CheckoutConfirmationFulfilmentProgressProps {
+    order: {
+        currentStage?: FulfilmentStage;
+        estimatedDelivery?: string | null;
+        trackingHref?: string;
+    };
+    /** Ordered by `Object.keys(fulfilmentDetails)` from the orchestrator. */
+    stages: FulfilmentStageDetail[];
+    progressLabel?: string;
+    estimatedDeliveryLabel?: string;
+    currentStageLabel?: string;
+    inProgressLabel?: string;
+    expectedByLabel?: string;
+    completedLabel?: string;
+    statusLabel?: string;
+    locationLabel?: string;
+    trackOrderLabel?: string;
+    /** Kept for API symmetry with the orchestrator; the fulfilment card renders no prices. */
+    formatPrice?: (value: number) => string;
+}
+/**
+ * The four fulfilment stages, as tabs that actually open.
+ *
+ * This was a static `<ol>` that looked exactly like a tab strip — four labels with an underline
+ * under each — and did nothing when pressed. A control that looks pressable and is not is worse
+ * than no control: the reader tries it, nothing happens, and they conclude the page is broken
+ * rather than that the row was decoration.
+ *
+ * So it is a real `Tabs`, and each stage opens the one thing a reader on this screen wants that
+ * the label alone cannot give them: when it happened, where, and what it means. Radix Tabs
+ * supplies roving focus, arrow-key movement and the tab/panel wiring; a row of buttons with a
+ * `useState` would have to fake all three.
+ *
+ * Every stage is reachable, including ones still ahead — a reader is entitled to look at what
+ * "Delivered" will mean before it happens. What a future stage does not get is a fabricated
+ * timestamp; it says what it is waiting for instead.
+ */
+export declare function CheckoutConfirmationFulfilmentProgress({ order, stages, progressLabel, estimatedDeliveryLabel, currentStageLabel, inProgressLabel, expectedByLabel, completedLabel, statusLabel, locationLabel, trackOrderLabel, }: CheckoutConfirmationFulfilmentProgressProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=checkout-confirmation-fulfilment-progress.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-confirmation-fulfilment-progress.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAerF,UAAU,2CAA2C;IACnD,KAAK,EAAE;QACL,YAAY,CAAC,EAAE,eAAe,CAAA;QAC9B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACjC,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,yEAAyE;IACzE,MAAM,EAAE,qBAAqB,EAAE,CAAA;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACxC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sCAAsC,CAAC,EACrD,KAAK,EACL,MAAM,EACN,aAA0B,EAC1B,sBAA2C,EAC3C,iBAAkC,EAClC,eAA4B,EAC5B,eAAkC,EAClC,cAA6B,EAC7B,WAAsB,EACtB,aAA2B,EAC3B,eAAsC,GACvC,EAAE,2CAA2C,+BAyH7C"}

package/dist/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.js

@@ -0,0 +1,115 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkout_confirmation_fulfilment_progress_exports = {};
+__export(checkout_confirmation_fulfilment_progress_exports, {
+  CheckoutConfirmationFulfilmentProgress: () => CheckoutConfirmationFulfilmentProgress
+});
+module.exports = __toCommonJS(checkout_confirmation_fulfilment_progress_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_tabs = require("../../../ui/tabs.js");
+var import_utils = require("../../../lib/utils.js");
+const longDate = new Intl.DateTimeFormat("en-US", { dateStyle: "long" });
+const stampDate = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "medium",
+  timeStyle: "short"
+});
+const STAGE_LABELS = {
+  Confirmed: "Confirmado",
+  Packed: "Empaquetado",
+  Shipped: "Enviado",
+  Delivered: "Entregado"
+};
+function CheckoutConfirmationFulfilmentProgress({
+  order,
+  stages,
+  progressLabel = "Progreso",
+  estimatedDeliveryLabel = "Entrega estimada",
+  currentStageLabel = "Etapa actual",
+  inProgressLabel = "En curso",
+  expectedByLabel = "Se espera para",
+  completedLabel = "Completada",
+  statusLabel = "Estado",
+  locationLabel = "Ubicaci\xF3n",
+  trackOrderLabel = "Seguir este pedido"
+}) {
+  const currentIndex = order.currentStage ? stages.findIndex((stage) => stage.stage === order.currentStage) : -1;
+  const [selected, setSelected] = (0, import_react.useState)(order.currentStage ?? stages[0]?.stage ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { className: "mt-10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardTitle, { className: "flex flex-wrap items-center justify-between gap-2 text-base", children: [
+      progressLabel,
+      order.estimatedDelivery ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm font-normal", children: `${estimatedDeliveryLabel} ${longDate.format(new Date(order.estimatedDelivery))}` }) : null
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.Tabs, { value: selected, onValueChange: (value) => setSelected(String(value)), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tabs.TabsList, { variant: "line", className: "h-auto! w-full justify-start gap-2 overflow-x-auto p-0 pb-2", children: stages.map((stage, index) => {
+          const done = index <= currentIndex;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsTrigger, { value: stage.stage, className: "h-auto flex-1 justify-start gap-2 px-1 py-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: (0, import_utils.cn)(
+                  "flex size-6 shrink-0 items-center justify-center rounded-full text-xs",
+                  done ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                ),
+                children: done ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "size-3.5" }) : index + 1
+              }
+            ),
+            STAGE_LABELS[stage.stage],
+            index === currentIndex ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: currentStageLabel }) : null,
+            index === currentIndex ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "bg-primary size-1.5 shrink-0 rounded-full" }) : null
+          ] }, stage.stage);
+        }) }),
+        stages.map((detail, index) => {
+          const done = index <= currentIndex;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tabs.TabsContent, { value: detail.stage, className: "pt-4", children: [
+            index === currentIndex ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-primary mb-2 text-xs font-medium tracking-[0.12em] uppercase", children: currentStageLabel }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm", children: detail.summary }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", { className: "text-muted-foreground mt-3 flex flex-col gap-1.5 text-sm sm:flex-row sm:gap-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { className: "sr-only", children: detail.at ? completedLabel : statusLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Clock, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "tabular-nums", children: detail.at ? stampDate.format(new Date(detail.at)) : done ? inProgressLabel : order.estimatedDelivery ? `${expectedByLabel} ${longDate.format(new Date(order.estimatedDelivery))}` : null })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { className: "sr-only", children: locationLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MapPin, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: detail.location })
+              ] })
+            ] })
+          ] }, detail.stage);
+        })
+      ] }),
+      order.trackingHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { className: "mt-6 w-full sm:w-auto", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: order.trackingHref, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Truck, {}),
+        trackOrderLabel
+      ] }) }) : null
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckoutConfirmationFulfilmentProgress
+});
+//# sourceMappingURL=checkout-confirmation-fulfilment-progress.js.map

package/dist/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { Check, Clock, MapPin, Truck } from 'lucide-react'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../ui/tabs'\nimport { cn } from '../../../lib/utils'\nimport type { FulfilmentStage, FulfilmentStageDetail } from './checkout-confirmation'\n\nconst longDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' })\nconst stampDate = new Intl.DateTimeFormat('en-US', {\n  dateStyle: 'medium',\n  timeStyle: 'short',\n})\n\nconst STAGE_LABELS: Record<FulfilmentStage, string> = {\n  Confirmed: 'Confirmado',\n  Packed: 'Empaquetado',\n  Shipped: 'Enviado',\n  Delivered: 'Entregado',\n}\n\ninterface CheckoutConfirmationFulfilmentProgressProps {\n  order: {\n    currentStage?: FulfilmentStage\n    estimatedDelivery?: string | null\n    trackingHref?: string\n  }\n  /** Ordered by `Object.keys(fulfilmentDetails)` from the orchestrator. */\n  stages: FulfilmentStageDetail[]\n  progressLabel?: string\n  estimatedDeliveryLabel?: string\n  currentStageLabel?: string\n  inProgressLabel?: string\n  expectedByLabel?: string\n  completedLabel?: string\n  statusLabel?: string\n  locationLabel?: string\n  trackOrderLabel?: string\n  /** Kept for API symmetry with the orchestrator; the fulfilment card renders no prices. */\n  formatPrice?: (value: number) => string\n}\n\n/**\n * The four fulfilment stages, as tabs that actually open.\n *\n * This was a static `<ol>` that looked exactly like a tab strip — four labels with an underline\n * under each — and did nothing when pressed. A control that looks pressable and is not is worse\n * than no control: the reader tries it, nothing happens, and they conclude the page is broken\n * rather than that the row was decoration.\n *\n * So it is a real `Tabs`, and each stage opens the one thing a reader on this screen wants that\n * the label alone cannot give them: when it happened, where, and what it means. Radix Tabs\n * supplies roving focus, arrow-key movement and the tab/panel wiring; a row of buttons with a\n * `useState` would have to fake all three.\n *\n * Every stage is reachable, including ones still ahead — a reader is entitled to look at what\n * \"Delivered\" will mean before it happens. What a future stage does not get is a fabricated\n * timestamp; it says what it is waiting for instead.\n */\nexport function CheckoutConfirmationFulfilmentProgress({\n  order,\n  stages,\n  progressLabel = 'Progreso',\n  estimatedDeliveryLabel = 'Entrega estimada',\n  currentStageLabel = 'Etapa actual',\n  inProgressLabel = 'En curso',\n  expectedByLabel = 'Se espera para',\n  completedLabel = 'Completada',\n  statusLabel = 'Estado',\n  locationLabel = 'Ubicación',\n  trackOrderLabel = 'Seguir este pedido',\n}: CheckoutConfirmationFulfilmentProgressProps) {\n  const currentIndex = order.currentStage\n    ? stages.findIndex(stage => stage.stage === order.currentStage)\n    : -1\n  const [selected, setSelected] = useState<string>(order.currentStage ?? stages[0]?.stage ?? '')\n\n  return (\n    <Card className='mt-10'>\n      <CardHeader>\n        <CardTitle className='flex flex-wrap items-center justify-between gap-2 text-base'>\n          {progressLabel}\n          {order.estimatedDelivery ? (\n            <span className='text-muted-foreground text-sm font-normal'>\n              {`${estimatedDeliveryLabel} ${longDate.format(new Date(order.estimatedDelivery))}`}\n            </span>\n          ) : null}\n        </CardTitle>\n      </CardHeader>\n\n      <CardContent>\n        <Tabs value={selected} onValueChange={value => setSelected(String(value))}>\n          {/*\n            `variant='line'` because these are stages along a route, not a segmented control —\n            the underline reads as progress in a way a filled pill does not.\n\n            `h-auto!` because `TabsList` pins itself to `h-8` through a\n            `group-data-horizontal/tabs:` variant, which a plain `h-auto` cannot outrank and\n            tailwind-merge does not treat as the same utility. Left alone it clipped the 24px\n            stage markers. The list scrolls rather than wrapping on a narrow screen, so the four\n            stages stay in one order.\n\n            `pb-2` is load-bearing, not spacing. `TabsTrigger` draws its active underline at\n            `bottom-[-5px]`, i.e. outside its own box, and CSS forces an axis to `auto` when the\n            other one is not `visible` — so asking for `overflow-x-auto` silently made the\n            vertical axis scrollable too, and those 7px of underline became a stray vertical\n            scrollbar beside the tabs at every width. The padding puts the underline back inside\n            the box, which leaves nothing to scroll.\n          */}\n          <TabsList variant='line' className='h-auto! w-full justify-start gap-2 overflow-x-auto p-0 pb-2'>\n            {stages.map((stage, index) => {\n              const done = index <= currentIndex\n\n              return (\n                <TabsTrigger key={stage.stage} value={stage.stage} className='h-auto flex-1 justify-start gap-2 px-1 py-2'>\n                  <span\n                    aria-hidden='true'\n                    className={cn(\n                      'flex size-6 shrink-0 items-center justify-center rounded-full text-xs',\n                      done ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'\n                    )}\n                  >\n                    {done ? <Check className='size-3.5' /> : index + 1}\n                  </span>\n                  {STAGE_LABELS[stage.stage]}\n                  {/*\n                    The stage the order is actually at, marked on the strip itself. Without it\n                    the only sign of \"where we are\" would be whichever tab happens to be open,\n                    which changes the moment the reader looks at another one.\n                  */}\n                  {index === currentIndex ? <span className='sr-only'>{currentStageLabel}</span> : null}\n                  {index === currentIndex ? (\n                    <span aria-hidden='true' className='bg-primary size-1.5 shrink-0 rounded-full' />\n                  ) : null}\n                </TabsTrigger>\n              )\n            })}\n          </TabsList>\n\n          {stages.map((detail, index) => {\n            const done = index <= currentIndex\n\n            return (\n              <TabsContent key={detail.stage} value={detail.stage} className='pt-4'>\n                {index === currentIndex ? (\n                  <p className='text-primary mb-2 text-xs font-medium tracking-[0.12em] uppercase'>\n                    {currentStageLabel}\n                  </p>\n                ) : null}\n                <p className='text-sm'>{detail.summary}</p>\n\n                <dl className='text-muted-foreground mt-3 flex flex-col gap-1.5 text-sm sm:flex-row sm:gap-6'>\n                  <div className='flex items-center gap-2'>\n                    <dt className='sr-only'>{detail.at ? completedLabel : statusLabel}</dt>\n                    <Clock className='size-4 shrink-0' aria-hidden='true' />\n                    <dd className='tabular-nums'>\n                      {detail.at\n                        ? stampDate.format(new Date(detail.at))\n                        : done\n                          ? inProgressLabel\n                          : order.estimatedDelivery\n                            ? `${expectedByLabel} ${longDate.format(new Date(order.estimatedDelivery))}`\n                            : null}\n                    </dd>\n                  </div>\n\n                  <div className='flex items-center gap-2'>\n                    <dt className='sr-only'>{locationLabel}</dt>\n                    <MapPin className='size-4 shrink-0' aria-hidden='true' />\n                    <dd>{detail.location}</dd>\n                  </div>\n                </dl>\n              </TabsContent>\n            )\n          })}\n        </Tabs>\n\n        {/*\n          Render as an anchor through Radix `asChild` when a real tracking URL exists; with no\n          href the button is omitted rather than pointing at a fabricated destination.\n        */}\n        {order.trackingHref ? (\n          <Button className='mt-6 w-full sm:w-auto' asChild>\n            <a href={order.trackingHref}>\n              <Truck />\n              {trackOrderLabel}\n            </a>\n          </Button>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkFQ;AAhFR,mBAAyB;AACzB,0BAA4C;AAC5C,oBAAuB;AACvB,kBAAyD;AACzD,kBAAyD;AACzD,mBAAmB;AAGnB,MAAM,WAAW,IAAI,KAAK,eAAe,SAAS,EAAE,WAAW,OAAO,CAAC;AACvE,MAAM,YAAY,IAAI,KAAK,eAAe,SAAS;AAAA,EACjD,WAAW;AAAA,EACX,WAAW;AACb,CAAC;AAED,MAAM,eAAgD;AAAA,EACpD,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AACb;AAwCO,SAAS,uCAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AACpB,GAAgD;AAC9C,QAAM,eAAe,MAAM,eACvB,OAAO,UAAU,WAAS,MAAM,UAAU,MAAM,YAAY,IAC5D;AACJ,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAiB,MAAM,gBAAgB,OAAO,CAAC,GAAG,SAAS,EAAE;AAE7F,SACE,6CAAC,oBAAK,WAAU,SACd;AAAA,gDAAC,0BACC,uDAAC,yBAAU,WAAU,+DAClB;AAAA;AAAA,MACA,MAAM,oBACL,4CAAC,UAAK,WAAU,6CACb,aAAG,sBAAsB,IAAI,SAAS,OAAO,IAAI,KAAK,MAAM,iBAAiB,CAAC,CAAC,IAClF,IACE;AAAA,OACN,GACF;AAAA,IAEA,6CAAC,2BACC;AAAA,mDAAC,oBAAK,OAAO,UAAU,eAAe,WAAS,YAAY,OAAO,KAAK,CAAC,GAkBtE;AAAA,oDAAC,wBAAS,SAAQ,QAAO,WAAU,+DAChC,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,gBAAM,OAAO,SAAS;AAEtB,iBACE,6CAAC,2BAA8B,OAAO,MAAM,OAAO,WAAU,+CAC3D;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,eAAW;AAAA,kBACT;AAAA,kBACA,OAAO,uCAAuC;AAAA,gBAChD;AAAA,gBAEC,iBAAO,4CAAC,6BAAM,WAAU,YAAW,IAAK,QAAQ;AAAA;AAAA,YACnD;AAAA,YACC,aAAa,MAAM,KAAK;AAAA,YAMxB,UAAU,eAAe,4CAAC,UAAK,WAAU,WAAW,6BAAkB,IAAU;AAAA,YAChF,UAAU,eACT,4CAAC,UAAK,eAAY,QAAO,WAAU,6CAA4C,IAC7E;AAAA,eAnBY,MAAM,KAoBxB;AAAA,QAEJ,CAAC,GACH;AAAA,QAEC,OAAO,IAAI,CAAC,QAAQ,UAAU;AAC7B,gBAAM,OAAO,SAAS;AAEtB,iBACE,6CAAC,2BAA+B,OAAO,OAAO,OAAO,WAAU,QAC5D;AAAA,sBAAU,eACT,4CAAC,OAAE,WAAU,qEACV,6BACH,IACE;AAAA,YACJ,4CAAC,OAAE,WAAU,WAAW,iBAAO,SAAQ;AAAA,YAEvC,6CAAC,QAAG,WAAU,iFACZ;AAAA,2DAAC,SAAI,WAAU,2BACb;AAAA,4DAAC,QAAG,WAAU,WAAW,iBAAO,KAAK,iBAAiB,aAAY;AAAA,gBAClE,4CAAC,6BAAM,WAAU,mBAAkB,eAAY,QAAO;AAAA,gBACtD,4CAAC,QAAG,WAAU,gBACX,iBAAO,KACJ,UAAU,OAAO,IAAI,KAAK,OAAO,EAAE,CAAC,IACpC,OACE,kBACA,MAAM,oBACJ,GAAG,eAAe,IAAI,SAAS,OAAO,IAAI,KAAK,MAAM,iBAAiB,CAAC,CAAC,KACxE,MACV;AAAA,iBACF;AAAA,cAEA,6CAAC,SAAI,WAAU,2BACb;AAAA,4DAAC,QAAG,WAAU,WAAW,yBAAc;AAAA,gBACvC,4CAAC,8BAAO,WAAU,mBAAkB,eAAY,QAAO;AAAA,gBACvD,4CAAC,QAAI,iBAAO,UAAS;AAAA,iBACvB;AAAA,eACF;AAAA,eA5BgB,OAAO,KA6BzB;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA,MAMC,MAAM,eACL,4CAAC,wBAAO,WAAU,yBAAwB,SAAO,MAC/C,uDAAC,OAAE,MAAM,MAAM,cACb;AAAA,oDAAC,6BAAM;AAAA,QACN;AAAA,SACH,GACF,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.mjs

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Check, Clock, MapPin, Truck } from "lucide-react";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/card.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/tabs.mjs";
+import { cn } from "../../../lib/utils.mjs";
+const longDate = new Intl.DateTimeFormat("en-US", { dateStyle: "long" });
+const stampDate = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "medium",
+  timeStyle: "short"
+});
+const STAGE_LABELS = {
+  Confirmed: "Confirmado",
+  Packed: "Empaquetado",
+  Shipped: "Enviado",
+  Delivered: "Entregado"
+};
+function CheckoutConfirmationFulfilmentProgress({
+  order,
+  stages,
+  progressLabel = "Progreso",
+  estimatedDeliveryLabel = "Entrega estimada",
+  currentStageLabel = "Etapa actual",
+  inProgressLabel = "En curso",
+  expectedByLabel = "Se espera para",
+  completedLabel = "Completada",
+  statusLabel = "Estado",
+  locationLabel = "Ubicaci\xF3n",
+  trackOrderLabel = "Seguir este pedido"
+}) {
+  const currentIndex = order.currentStage ? stages.findIndex((stage) => stage.stage === order.currentStage) : -1;
+  const [selected, setSelected] = useState(order.currentStage ?? stages[0]?.stage ?? "");
+  return /* @__PURE__ */ jsxs(Card, { className: "mt-10", children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex flex-wrap items-center justify-between gap-2 text-base", children: [
+      progressLabel,
+      order.estimatedDelivery ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm font-normal", children: `${estimatedDeliveryLabel} ${longDate.format(new Date(order.estimatedDelivery))}` }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsxs(Tabs, { value: selected, onValueChange: (value) => setSelected(String(value)), children: [
+        /* @__PURE__ */ jsx(TabsList, { variant: "line", className: "h-auto! w-full justify-start gap-2 overflow-x-auto p-0 pb-2", children: stages.map((stage, index) => {
+          const done = index <= currentIndex;
+          return /* @__PURE__ */ jsxs(TabsTrigger, { value: stage.stage, className: "h-auto flex-1 justify-start gap-2 px-1 py-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "flex size-6 shrink-0 items-center justify-center rounded-full text-xs",
+                  done ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                ),
+                children: done ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : index + 1
+              }
+            ),
+            STAGE_LABELS[stage.stage],
+            index === currentIndex ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: currentStageLabel }) : null,
+            index === currentIndex ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bg-primary size-1.5 shrink-0 rounded-full" }) : null
+          ] }, stage.stage);
+        }) }),
+        stages.map((detail, index) => {
+          const done = index <= currentIndex;
+          return /* @__PURE__ */ jsxs(TabsContent, { value: detail.stage, className: "pt-4", children: [
+            index === currentIndex ? /* @__PURE__ */ jsx("p", { className: "text-primary mb-2 text-xs font-medium tracking-[0.12em] uppercase", children: currentStageLabel }) : null,
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: detail.summary }),
+            /* @__PURE__ */ jsxs("dl", { className: "text-muted-foreground mt-3 flex flex-col gap-1.5 text-sm sm:flex-row sm:gap-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("dt", { className: "sr-only", children: detail.at ? completedLabel : statusLabel }),
+                /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("dd", { className: "tabular-nums", children: detail.at ? stampDate.format(new Date(detail.at)) : done ? inProgressLabel : order.estimatedDelivery ? `${expectedByLabel} ${longDate.format(new Date(order.estimatedDelivery))}` : null })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("dt", { className: "sr-only", children: locationLabel }),
+                /* @__PURE__ */ jsx(MapPin, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("dd", { children: detail.location })
+              ] })
+            ] })
+          ] }, detail.stage);
+        })
+      ] }),
+      order.trackingHref ? /* @__PURE__ */ jsx(Button, { className: "mt-6 w-full sm:w-auto", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: order.trackingHref, children: [
+        /* @__PURE__ */ jsx(Truck, {}),
+        trackOrderLabel
+      ] }) }) : null
+    ] })
+  ] });
+}
+export {
+  CheckoutConfirmationFulfilmentProgress
+};
+//# sourceMappingURL=checkout-confirmation-fulfilment-progress.mjs.map