{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-carousel",
  "title": "Product Carousel",
  "description": "Horizontally scrollable row of product cards with nav controls (e.g. \"More like this\").",
  "dependencies": [
    "@channel3/sdk"
  ],
  "registryDependencies": [
    "carousel",
    "https://ui.trychannel3.com/r/product-card.json"
  ],
  "files": [
    {
      "path": "registry/default/components/product-carousel.tsx",
      "content": "import * as React from \"react\";\nimport type { OptionValue, Product } from \"@channel3/sdk/resources\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\nimport { ProductCard, ProductCardSkeleton } from \"@/registry/default/components/product-card\";\n\nexport interface ProductCarouselProps extends Omit<React.ComponentProps<\"div\">, \"onSelect\" | \"title\"> {\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  title?: React.ReactNode;\n  loading?: boolean;\n  skeletonCount?: number;\n  locale?: string;\n  itemClassName?: string;\n  priorityCount?: number;\n}\n\nconst ITEM_BASIS = \"basis-1/2 sm:basis-1/2 md:basis-1/3 lg:basis-1/4\";\nconst NAV_CLASS = \"static size-8 translate-x-0 translate-y-0\";\n\nexport function ProductCarousel({\n  products,\n  getHref,\n  onSelect,\n  onPreload,\n  onSelectVariant,\n  showSwatches = true,\n  title,\n  loading = false,\n  skeletonCount = 8,\n  locale,\n  itemClassName = ITEM_BASIS,\n  priorityCount = 4,\n  className,\n  ...props\n}: ProductCarouselProps) {\n  const isEmpty = !loading && products.length === 0;\n  if (isEmpty) {\n    return null;\n  }\n\n  return (\n    <Carousel opts={{ align: \"start\" }} className={cn(\"w-full\", className)} {...props}>\n      <div className=\"mb-3 flex items-center justify-between gap-2\">\n        <div className=\"text-base font-medium\">{title}</div>\n        <div className=\"flex gap-2\">\n          <CarouselPrevious className={NAV_CLASS} />\n          <CarouselNext className={NAV_CLASS} />\n        </div>\n      </div>\n      <CarouselContent>\n        {loading\n          ? Array.from({ length: skeletonCount }, (_, index) => (\n              <CarouselItem key={index} className={itemClassName}>\n                <ProductCardSkeleton />\n              </CarouselItem>\n            ))\n          : products.map((product, index) => (\n              <CarouselItem key={product.id} className={itemClassName}>\n                <ProductCard\n                  product={product}\n                  href={getHref?.(product)}\n                  onSelect={onSelect}\n                  onPreload={onPreload}\n                  onSelectVariant={\n                    onSelectVariant ? (value) => onSelectVariant(product, value) : undefined\n                  }\n                  showSwatches={showSwatches}\n                  priority={index < priorityCount}\n                  locale={locale}\n                />\n              </CarouselItem>\n            ))}\n      </CarouselContent>\n    </Carousel>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}