{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-recommendations",
  "title": "Product Recommendations",
  "description": "Lazy \"you might also like\" carousel for a PDP: defers the findSimilar fetch until it scrolls into view and hides itself when empty.",
  "dependencies": [
    "@channel3/sdk"
  ],
  "registryDependencies": [
    "https://ui.trychannel3.com/r/product-carousel.json",
    "https://ui.trychannel3.com/r/use-product-recommendations.json"
  ],
  "files": [
    {
      "path": "registry/default/components/product-recommendations.tsx",
      "content": "import * as React from \"react\";\nimport type { OptionValue, Product, SearchFilters } from \"@channel3/sdk/resources\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ProductCarousel } from \"@/registry/default/components/product-carousel\";\nimport {\n  type SimilarFetcher,\n  useProductRecommendations,\n} from \"@/registry/default/hooks/use-product-recommendations\";\n\nexport interface ProductRecommendationsProps\n  extends Omit<React.ComponentProps<\"section\">, \"onSelect\" | \"title\"> {\n  productId: string | undefined;\n  /** Server-side fetcher wrapping `client.products.findSimilar`. */\n  fetchSimilar: SimilarFetcher;\n  title?: React.ReactNode;\n  limit?: number;\n  filters?: SearchFilters;\n  eager?: boolean;\n  enabled?: boolean;\n  skeletonCount?: number;\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  locale?: string;\n}\n\nexport function ProductRecommendations({\n  productId,\n  fetchSimilar,\n  title = \"You might also like\",\n  limit = 12,\n  filters,\n  eager = false,\n  enabled = true,\n  skeletonCount = 6,\n  getHref,\n  onSelect,\n  onPreload,\n  onSelectVariant,\n  showSwatches,\n  locale,\n  className,\n  ...props\n}: ProductRecommendationsProps) {\n  const { ref, products, isLoading, hasLoaded } = useProductRecommendations({\n    productId,\n    fetchSimilar,\n    limit,\n    filters,\n    eager,\n    enabled,\n  });\n\n  if (hasLoaded && products.length === 0) {\n    return null;\n  }\n\n  return (\n    <section ref={ref} data-slot=\"product-recommendations\" className={cn(\"w-full\", className)} {...props}>\n      <ProductCarousel\n        title={title}\n        products={products}\n        loading={isLoading && products.length === 0}\n        skeletonCount={skeletonCount}\n        getHref={getHref}\n        onSelect={onSelect}\n        onPreload={onPreload}\n        onSelectVariant={onSelectVariant}\n        showSwatches={showSwatches}\n        locale={locale}\n      />\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}