[CDX-327] Pass callbacks to ProductCard

spec/components/Carousel/Carousel.test.tsx

@@ -596,4 +596,43 @@ describe('Carousel component', () => {
       expect(carousel).toBeInTheDocument();
     });
   });
+
+  describe('itemCallbacks', () => {
+    test('calls onProductClick when product card is clicked', () => {
+      const onProductClick = vi.fn();
+      render(<CioCarousel items={mockProducts} itemCallbacks={{ onProductClick }} />);
+
+      const productCard = screen.getByText('Product 1').closest('.cio-product-card')!;
+      fireEvent.click(productCard);
+      expect(onProductClick).toHaveBeenCalledWith(mockProducts[0], 0);
+    });
+
+    test('calls onAddToCart when add to cart button is clicked', () => {
+      const onAddToCart = vi.fn();
+      render(<CioCarousel items={mockProducts} itemCallbacks={{ onAddToCart }} />);
+
+      const buttons = screen.getAllByText('Add to Cart');
+      fireEvent.click(buttons[0]);
+      expect(onAddToCart).toHaveBeenCalledWith(expect.any(Object), mockProducts[0], 0);
+    });
+
+    test('calls onAddToWishlist when wishlist button is clicked', () => {
+      const onAddToWishlist = vi.fn();
+      render(<CioCarousel items={mockProducts} itemCallbacks={{ onAddToWishlist }} />);
+
+      const wishlistButtons = screen.getAllByLabelText(/add to wishlist/i);
+      fireEvent.click(wishlistButtons[0]);
+      expect(onAddToWishlist).toHaveBeenCalledWith(expect.any(Object), mockProducts[0], 0);
+    });
+
+    test('does not throw when itemCallbacks is not provided', () => {
+      expect(() => {
+        render(<CioCarousel items={mockProducts} />);
+
+        // Without callbacks, clicking should not throw (buttons won't exist)
+        const productCard = screen.getByText('Product 1').closest('.cio-product-card')!;
+        fireEvent.click(productCard);
+      }).not.toThrow();
+    });
+  });
 });

src/components/carousel.tsx

@@ -181,7 +181,8 @@ function CarouselBase<T = Product>({
 }
 
 function Carousel<T = Product>(props: CarouselOpts<T>) {
-  const { children, items, componentOverrides, ...rest } = props;
+  const { children, items, componentOverrides, itemCallbacks, ...rest } = props;
+  const { onProductClick, onAddToCart, onAddToWishlist } = itemCallbacks || {};
   const { autoPlay, slidesToScroll, orientation, loop, responsive } = rest;
 
   const renderProps: CarouselRenderProps<T> = {
@@ -225,6 +226,11 @@ function Carousel<T = Product>(props: CarouselOpts<T>) {
                   <ProductCard
                     product={product}
                     className='w-full h-full'
+                    onProductClick={onProductClick ? () => onProductClick(item, index) : undefined}
+                    onAddToCart={onAddToCart ? (e) => onAddToCart(e, item, index) : undefined}
+                    onAddToWishlist={
+                      onAddToWishlist ? (e) => onAddToWishlist(e, item, index) : undefined
+                    }
                     componentOverrides={componentOverrides?.item?.productCard}
                   />
                 </CarouselItem>

src/types/carouselTypes.ts

@@ -73,8 +73,15 @@ export type CarouselOverrides<T = Product> = ComponentOverrideProps<CarouselRend
   next?: ComponentOverrideProps<CarouselRenderProps<T>>;
 };
 
+export type CarouselItemCallbacks<T = Product> = {
+  onProductClick?: (item: T, index: number) => void;
+  onAddToCart?: (e: React.MouseEvent, item: T, index: number) => void;
+  onAddToWishlist?: (e: React.MouseEvent, item: T, index: number) => void;
+};
+
 export type CarouselOpts<T = Product> = CarouselRenderProps<T> &
   IncludeComponentOverrides<CarouselOverrides<T>> &
   Omit<ComponentProps<'div'>, 'children'> & {
     children?: RenderPropsChildren<CarouselRenderProps<T>>;
+    itemCallbacks?: CarouselItemCallbacks<T>;
   };