{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-grid",
  "title": "Product Grid",
  "description": "Responsive product grid with loading skeletons and an empty state.",
  "registryDependencies": [
    "https://lumo-www.vercel.app/r/lib.json",
    "https://lumo-www.vercel.app/r/product-card.json"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/product-grid.tsx",
      "content": "import * as React from \"react\"\r\nimport type { Product } from \"@/lib/lumo/types\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ProductCard, type ProductCardProps } from \"@/components/lumo/product-card\"\r\n\r\nexport interface ProductGridProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  products: Product[]\r\n  loading?: boolean\r\n  loadingCount?: number\r\n  columns?: 2 | 3 | 4\r\n  emptyState?: React.ReactNode\r\n  onAddToCart?: ProductCardProps[\"onAddToCart\"]\r\n  onQuickView?: ProductCardProps[\"onQuickView\"]\r\n  onToggleWishlist?: ProductCardProps[\"onToggleWishlist\"]\r\n  isInWishlist?: (product: Product) => boolean\r\n  locale?: string\r\n}\r\n\r\nconst columnClass: Record<NonNullable<ProductGridProps[\"columns\"]>, string> = {\r\n  2: \"sm:grid-cols-2\",\r\n  3: \"sm:grid-cols-2 lg:grid-cols-3\",\r\n  4: \"sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\",\r\n}\r\n\r\nfunction ProductCardSkeleton() {\r\n  return (\r\n    <div className=\"flex flex-col overflow-hidden rounded-lg border bg-card\">\r\n      <div className=\"aspect-square animate-pulse bg-muted\" />\r\n      <div className=\"flex flex-col gap-2 p-4\">\r\n        <div className=\"h-4 w-3/4 animate-pulse rounded bg-muted\" />\r\n        <div className=\"h-4 w-1/3 animate-pulse rounded bg-muted\" />\r\n        <div className=\"mt-2 h-6 w-1/2 animate-pulse rounded bg-muted\" />\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nconst ProductGrid = React.forwardRef<HTMLDivElement, ProductGridProps>(\r\n  (\r\n    {\r\n      className,\r\n      products,\r\n      loading = false,\r\n      loadingCount = 8,\r\n      columns = 4,\r\n      emptyState,\r\n      onAddToCart,\r\n      onQuickView,\r\n      onToggleWishlist,\r\n      isInWishlist,\r\n      locale,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const gridClass = cn(\"grid grid-cols-1 gap-6\", columnClass[columns], className)\r\n\r\n    if (loading) {\r\n      return (\r\n        <div ref={ref} className={gridClass} {...props}>\r\n          {Array.from({ length: loadingCount }, (_, i) => (\r\n            <ProductCardSkeleton key={i} />\r\n          ))}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    if (products.length === 0) {\r\n      return (\r\n        <div\r\n          ref={ref}\r\n          className={cn(\"flex items-center justify-center py-16\", className)}\r\n          {...props}\r\n        >\r\n          {emptyState ?? (\r\n            <p className=\"text-center text-sm text-muted-foreground\">No products found.</p>\r\n          )}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    return (\r\n      <div ref={ref} className={gridClass} {...props}>\r\n        {products.map((product) => (\r\n          <ProductCard\r\n            key={product.id}\r\n            product={product}\r\n            onAddToCart={onAddToCart}\r\n            onQuickView={onQuickView}\r\n            onToggleWishlist={onToggleWishlist}\r\n            isInWishlist={isInWishlist?.(product)}\r\n            locale={locale}\r\n          />\r\n        ))}\r\n      </div>\r\n    )\r\n  }\r\n)\r\nProductGrid.displayName = \"ProductGrid\"\r\n\r\nexport { ProductGrid }\r\n",
      "type": "registry:ui",
      "target": "components/lumo/product-grid.tsx"
    }
  ],
  "type": "registry:ui"
}