{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-grid",
  "title": "Product Grid",
  "description": "Responsive grid of product cards with loading skeletons and an empty state.",
  "dependencies": [
    "@channel3/sdk"
  ],
  "registryDependencies": [
    "empty",
    "https://ui.trychannel3.com/r/product-card.json"
  ],
  "files": [
    {
      "path": "registry/default/components/product-grid.tsx",
      "content": "import * as React from \"react\";\nimport type { OptionValue, Product } from \"@channel3/sdk/resources\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from \"@/components/ui/empty\";\nimport { ProductCard, ProductCardSkeleton } from \"@/registry/default/components/product-card\";\n\nexport interface ProductGridProps extends Omit<React.ComponentProps<\"div\">, \"onSelect\"> {\n  products: ReadonlyArray<Product>;\n  getHref?: (product: Product) => string;\n  onSelect?: (product: Product) => void;\n  onPreload?: (product: Product) => void;\n  onSelectVariant?: (product: Product, value: OptionValue) => void;\n  showSwatches?: boolean;\n  loading?: boolean;\n  skeletonCount?: number;\n  emptyState?: React.ReactNode;\n  locale?: string;\n}\n\nconst PRIORITY_COUNT = 4;\n\nexport function ProductGrid({\n  products,\n  getHref,\n  onSelect,\n  onPreload,\n  onSelectVariant,\n  showSwatches = true,\n  loading = false,\n  skeletonCount = 8,\n  emptyState,\n  locale,\n  className,\n  ...props\n}: ProductGridProps) {\n  const gridClass = cn(\n    \"grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4\",\n    className,\n  );\n\n  if (loading) {\n    return (\n      <div data-slot=\"product-grid\" className={gridClass} {...props}>\n        {Array.from({ length: skeletonCount }, (_, index) => (\n          <ProductCardSkeleton key={index} />\n        ))}\n      </div>\n    );\n  }\n\n  if (products.length === 0) {\n    return (\n      <div data-slot=\"product-grid\" {...props}>\n        {emptyState ?? (\n          <Empty>\n            <EmptyHeader>\n              <EmptyTitle>No products found</EmptyTitle>\n              <EmptyDescription>Try a different search or adjust your filters.</EmptyDescription>\n            </EmptyHeader>\n          </Empty>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div data-slot=\"product-grid\" className={gridClass} {...props}>\n      {products.map((product, index) => (\n        <ProductCard\n          key={product.id}\n          product={product}\n          href={getHref?.(product)}\n          onSelect={onSelect}\n          onPreload={onPreload}\n          onSelectVariant={onSelectVariant ? (value) => onSelectVariant(product, value) : undefined}\n          showSwatches={showSwatches}\n          priority={index < PRIORITY_COUNT}\n          locale={locale}\n        />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}