@envive-ai/react-toolkit-v3 0.3.14 → 0.3.15-beta.0

package/src/components/Popover/__tests__/Popover.test.tsx

@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Popover, PopoverTrigger, PopoverContent } from '../Popover';
+
+describe('Popover', () => {
+  it('should render the trigger', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open Popover</PopoverTrigger>
+        <PopoverContent>Popover content</PopoverContent>
+      </Popover>,
+    );
+    expect(screen.getByText('Open Popover')).toBeInTheDocument();
+  });
+
+  it('should open popover when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Popover content here</PopoverContent>
+      </Popover>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(screen.getByText('Popover content here')).toBeInTheDocument();
+  });
+
+  it('should not show content initially', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Hidden content</PopoverContent>
+      </Popover>,
+    );
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
+  });
+
+  it('should support controlled open state', () => {
+    render(
+      <Popover open>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Controlled content</PopoverContent>
+      </Popover>,
+    );
+    expect(screen.getByText('Controlled content')).toBeInTheDocument();
+  });
+
+  it('should forward ref to PopoverContent', async () => {
+    const user = userEvent.setup();
+    let refValue: HTMLDivElement | null = null;
+    const ref = (node: HTMLDivElement | null) => {
+      refValue = node;
+    };
+
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent ref={ref}>Content</PopoverContent>
+      </Popover>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    expect(refValue).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it('should apply custom className to content', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent className="envive-tw-w-96" data-testid="popover-content">
+          Content
+        </PopoverContent>
+      </Popover>,
+    );
+
+    await user.click(screen.getByText('Open'));
+    const content = screen.getByTestId('popover-content');
+    expect(content).toHaveClass('envive-tw-w-96');
+  });
+
+  it('should close when clicking trigger again', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Toggle</PopoverTrigger>
+        <PopoverContent>Popover content</PopoverContent>
+      </Popover>,
+    );
+
+    await user.click(screen.getByText('Toggle'));
+    expect(screen.getByText('Popover content')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Toggle'));
+    expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+  });
+});

package/src/components/Popover/index.ts

@@ -0,0 +1,7 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './Popover';
+export type {
+  PopoverProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+  PopoverAnchorProps,
+} from './types/index';

package/src/components/Popover/types/index.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+export type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
+
+export type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
+
+export type PopoverAnchorProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>;
+
+export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;

package/src/components/Progress/CircularProgress.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+
+export interface CircularProgressProps extends React.SVGAttributes<SVGSVGElement> {
+  size?: number;
+  thickness?: number;
+  color?: string;
+}
+
+const CircularProgress = React.forwardRef<SVGSVGElement, CircularProgressProps>(
+  ({ className, size = 40, thickness = 3.6, color, style, ...props }, ref) => {
+    const radius = (size - thickness) / 2;
+    const circumference = 2 * Math.PI * radius;
+
+    return (
+      <svg
+        ref={ref}
+        className={cn('envive-tw-animate-spin envive-tw-text-primary', className)}
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        fill="none"
+        style={{ color, ...style }}
+        role="progressbar"
+        {...props}
+      >
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="currentColor"
+          strokeWidth={thickness}
+          strokeDasharray={`${circumference * 0.75} ${circumference * 0.25}`}
+          strokeLinecap="round"
+          opacity={0.25}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="currentColor"
+          strokeWidth={thickness}
+          strokeDasharray={`${circumference * 0.75} ${circumference * 0.25}`}
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  },
+);
+
+CircularProgress.displayName = 'CircularProgress';
+
+export { CircularProgress };

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cn } from '../../lib/utils.js';
+import type { ProgressProps } from './types/index.js';
+
+const Progress = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  ProgressProps & { indeterminate?: boolean }
+>(({ className, value, indeterminate, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'envive-tw-relative envive-tw-h-4 envive-tw-w-full envive-tw-overflow-hidden envive-tw-rounded-full envive-tw-bg-secondary',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(
+        'envive-tw-h-full envive-tw-w-full envive-tw-flex-1 envive-tw-bg-primary envive-tw-transition-all',
+        indeterminate &&
+          'envive-tw-animate-[progress-indeterminate_1.5s_ease-in-out_infinite] envive-tw-w-1/3',
+      )}
+      style={
+        indeterminate ? undefined : { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    />
+  </ProgressPrimitive.Root>
+));
+
+Progress.displayName = 'Progress';
+
+export { Progress };

package/src/components/Progress/__tests__/Progress.test.tsx

@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Progress } from '../Progress';
+
+describe('Progress', () => {
+  it('should render a progress bar', () => {
+    render(<Progress value={50} />);
+    const progress = screen.getByRole('progressbar');
+    expect(progress).toBeInTheDocument();
+  });
+
+  it('should apply progress bar styling', () => {
+    render(<Progress value={50} />);
+    const progress = screen.getByRole('progressbar');
+    expect(progress).toHaveClass('envive-tw-relative');
+    expect(progress).toHaveClass('envive-tw-h-4');
+    expect(progress).toHaveClass('envive-tw-w-full');
+    expect(progress).toHaveClass('envive-tw-overflow-hidden');
+    expect(progress).toHaveClass('envive-tw-rounded-full');
+    expect(progress).toHaveClass('envive-tw-bg-secondary');
+  });
+
+  it('should render an indicator child', () => {
+    render(<Progress value={60} />);
+    const progress = screen.getByRole('progressbar');
+    const indicator = progress.firstChild as HTMLElement;
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveClass('envive-tw-bg-primary');
+    expect(indicator).toHaveClass('envive-tw-transition-all');
+  });
+
+  it('should set indicator transform based on value', () => {
+    render(<Progress value={60} />);
+    const progress = screen.getByRole('progressbar');
+    const indicator = progress.firstChild as HTMLElement;
+    expect(indicator.style.transform).toBe('translateX(-40%)');
+  });
+
+  it('should handle 0 value with full negative transform', () => {
+    render(<Progress value={0} />);
+    const progress = screen.getByRole('progressbar');
+    const indicator = progress.firstChild as HTMLElement;
+    expect(indicator.style.transform).toBe('translateX(-100%)');
+  });
+
+  it('should handle 100 value with no negative transform', () => {
+    render(<Progress value={100} />);
+    const progress = screen.getByRole('progressbar');
+    const indicator = progress.firstChild as HTMLElement;
+    expect(indicator.style.transform).toBe('translateX(-0%)');
+  });
+
+  it('should forward ref', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Progress ref={ref} value={50} />);
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+  });
+
+  it('should merge custom className', () => {
+    render(<Progress value={50} className="envive-tw-h-2" />);
+    const progress = screen.getByRole('progressbar');
+    expect(progress).toHaveClass('envive-tw-h-2');
+  });
+
+  it('should render without value prop', () => {
+    render(<Progress />);
+    const progress = screen.getByRole('progressbar');
+    expect(progress).toBeInTheDocument();
+  });
+});

package/src/components/Progress/index.ts

@@ -0,0 +1,4 @@
+export { Progress } from './Progress';
+export { CircularProgress } from './CircularProgress';
+export type { ProgressProps } from './types';
+export type { CircularProgressProps } from './CircularProgress';

package/src/components/Progress/types/index.ts

@@ -0,0 +1,4 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+export interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {}

package/src/components/PromptButton/PromptButton.tsx

@@ -1,12 +1,12 @@
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
 import classNames from 'classnames';
 import { Theme } from '../../../tokens/theme/theme';
+import { resolveTheme } from '../utils/resolveTheme';
 import { PromptButtonComponents } from './components';
+import { useGetBoldTextProperties } from './hooks/useGetBoldTextProperties';
+import { useGetVariantColorsProperties } from './hooks/useGetVariantColorsProperties';
 import { PromptButtonProps } from './types';
 import { shouldShowIcon } from './utils/functions';
-import { useGetVariantColorsProperties } from './hooks/useGetVariantColorsProperties';
-import { useGetBoldTextProperties } from './hooks/useGetBoldTextProperties';
-import { resolveTheme } from '../utils/resolveTheme';
 
 export const PromptButton = ({
   label: labelProp,
@@ -20,6 +20,12 @@ export const PromptButton = ({
   theme = Theme.GLOBAL_CUSTOM,
   bold = false,
   onClick,
+  onHover,
+  onFocus,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
   ariaLabel,
   ariaDescribedBy,
 }: PromptButtonProps) => {
@@ -73,6 +79,12 @@ export const PromptButton = ({
       isLoading={isLoading}
       loadingComponent={<PromptButtonComponents.Loading />}
       onClick={onClick}
+      onHover={onHover}
+      onFocus={onFocus}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
       icon={icon}
       label={label}
       ariaLabel={ariaLabel ?? labelProp}

package/src/components/PromptButton/__tests__/PromptButton.test.tsx

@@ -244,6 +244,88 @@ describe('PromptButton', () => {
     });
   });
 
+  describe('Pointer and touch handlers', () => {
+    it('should call onMouseDown when mouse button is pressed', () => {
+      const handleMouseDown = vi.fn();
+      render(
+        <PromptButton
+          label="Mouse down"
+          variant={PromptButtonVariant.LIGHT}
+          onMouseDown={handleMouseDown}
+        />,
+      );
+      const button = screen.getByRole('button');
+      fireEvent.mouseDown(button);
+      expect(handleMouseDown).toHaveBeenCalledTimes(1);
+      expect(handleMouseDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'mousedown',
+          target: button,
+        }),
+      );
+    });
+
+    it('should call onMouseUp when mouse button is released', () => {
+      const handleMouseUp = vi.fn();
+      render(
+        <PromptButton
+          label="Mouse up"
+          variant={PromptButtonVariant.LIGHT}
+          onMouseUp={handleMouseUp}
+        />,
+      );
+      const button = screen.getByRole('button');
+      fireEvent.mouseUp(button);
+      expect(handleMouseUp).toHaveBeenCalledTimes(1);
+      expect(handleMouseUp).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'mouseup',
+          target: button,
+        }),
+      );
+    });
+
+    it('should call onTouchStart when touch interaction starts', () => {
+      const handleTouchStart = vi.fn();
+      render(
+        <PromptButton
+          label="Touch start"
+          variant={PromptButtonVariant.LIGHT}
+          onTouchStart={handleTouchStart}
+        />,
+      );
+      const button = screen.getByRole('button');
+      fireEvent.touchStart(button);
+      expect(handleTouchStart).toHaveBeenCalledTimes(1);
+      expect(handleTouchStart).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'touchstart',
+          target: button,
+        }),
+      );
+    });
+
+    it('should call onTouchEnd when touch interaction ends', () => {
+      const handleTouchEnd = vi.fn();
+      render(
+        <PromptButton
+          label="Touch end"
+          variant={PromptButtonVariant.LIGHT}
+          onTouchEnd={handleTouchEnd}
+        />,
+      );
+      const button = screen.getByRole('button');
+      fireEvent.touchEnd(button);
+      expect(handleTouchEnd).toHaveBeenCalledTimes(1);
+      expect(handleTouchEnd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'touchend',
+          target: button,
+        }),
+      );
+    });
+  });
+
   describe('Accessibility', () => {
     it('should apply aria-label when provided', () => {
       render(
@@ -281,6 +363,38 @@ describe('PromptButton', () => {
       expect(button).not.toHaveAttribute('aria-busy', 'true');
     });
 
+    it('should apply aria-describedby when ariaDescribedBy is provided', () => {
+      render(
+        <PromptButton
+          label="Test"
+          variant={PromptButtonVariant.LIGHT}
+          ariaDescribedBy="description-id"
+        />,
+      );
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-describedby', 'description-id');
+    });
+
+    it('should call onHover when button is hovered', () => {
+      const handleHover = vi.fn();
+      render(
+        <PromptButton
+          label="Hover me"
+          variant={PromptButtonVariant.LIGHT}
+          onHover={handleHover}
+        />,
+      );
+      const button = screen.getByRole('button');
+      fireEvent.mouseOver(button);
+      expect(handleHover).toHaveBeenCalledTimes(1);
+      expect(handleHover).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'mouseover',
+          target: button,
+        }),
+      );
+    });
+
     it('should apply aria-disabled when disabled', () => {
       render(
         <PromptButton

package/src/components/PromptButton/components/Layout.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { useGetLayoutBaseProperties } from '../hooks/useGetLayoutBaseProperties';
 import { Stack } from '../../Stack';
+import { useGetLayoutBaseProperties } from '../hooks/useGetLayoutBaseProperties';
 
 type LayoutProps = {
   icon: React.ReactNode;
@@ -13,6 +13,12 @@ type LayoutProps = {
   isLoading?: boolean;
   loadingComponent: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onHover?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  onTouchStart?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  onTouchEnd?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  onMouseUp?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   ariaLabel?: string;
   ariaDescribedBy?: string;
 };
@@ -28,6 +34,12 @@ export const Layout = ({
   isLoading = false,
   loadingComponent,
   onClick,
+  onHover,
+  onFocus,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
   ariaLabel,
   ariaDescribedBy,
 }: LayoutProps): React.ReactNode => {
@@ -52,6 +64,12 @@ export const Layout = ({
       style={style}
       disabled={disabled || isLoading}
       onClick={onClick}
+      onMouseOver={onHover}
+      onFocus={onFocus}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+      onMouseUp={onMouseUp}
       type="button"
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
@@ -65,6 +83,7 @@ export const Layout = ({
           direction="row"
           gap="2"
           align="center"
+          className="envive-tw-pointer-events-none"
         >
           {icon}
           {label}

package/src/components/PromptButton/types/index.ts

@@ -56,6 +56,37 @@ export type PromptButtonProps = {
    * When provided, the component renders as a `<button>` element instead of a `<div>`.
    */
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Callback function invoked when the button is hovered.
+   * Triggered on pointer hover events over the rendered button element.
+   */
+  onHover?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Callback function invoked when the button receives focus.
+   * Useful for tracking focus events from keyboard navigation or programmatic focus.
+   */
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  /**
+   * Callback function invoked when a touch interaction starts on the button.
+   * Useful for tracking touch-only interactions on mobile and tablet devices.
+   */
+  onTouchStart?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  /**
+   * Callback function invoked when a touch interaction ends on the button.
+   * Can be used to distinguish completed touch interactions from cancelled ones.
+   */
+  onTouchEnd?: (event: React.TouchEvent<HTMLButtonElement>) => void;
+  /**
+   * Callback function invoked when the mouse button is released over the button.
+   * Useful for tracking completed click interactions separately from `onClick`.
+   */
+  onMouseUp?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on the button.
+   * Useful for tracking press-and-hold behavior or interaction start events.
+   */
+  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * Accessible label for the button, used by screen readers.
    * If not provided, the button's `label` prop will be used as the accessible name.

package/src/components/PromptCarousel/PromptCarousel.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useRef } from 'react';
 import { useScrollContainer } from 'react-indiana-drag-scroll';
 import { Theme } from '../../../tokens/theme/theme';
+import { Container } from '../Container';
 import { PromptButton, PromptButtonVariant } from '../PromptButton';
+import { Stack } from '../Stack';
+import { resolveTheme } from '../utils/resolveTheme';
 import { useCheckIsMobile } from '../utils/useCheckIsMobile';
-import { AnimationSpeed, PromptCarouselProps, PromptCarouselRows } from './types/types';
 import { useCarouselButtons, useCoordinatedScrollAnimation, useScrollSync } from './hooks';
-import { Container } from '../Container';
+import { AnimationSpeed, PromptCarouselProps, PromptCarouselRows } from './types/types';
 import { isAnimated, removeSpaces, shouldShowTwoRows } from './utils/functions';
-import { resolveTheme } from '../utils/resolveTheme';
-import { Stack } from '../Stack';
 
 export const PromptCarousel = ({
   id,
@@ -21,6 +21,13 @@ export const PromptCarousel = ({
   promptButtonType = PromptButtonVariant.LIGHT,
   boldFirstButton = false,
   handleButtonClick,
+  handleButtonHover,
+  handleButtonFocus,
+  handleButtonMouseUp,
+  handleButtonMouseDown,
+  handleButtonTouchStart,
+  handleButtonTouchEnd,
+  handleButtonDrag,
   promptCarouselRows = PromptCarouselRows.ALWAYS_ONE,
   animationSpeed = AnimationSpeed.NONE,
   'aria-label': ariaLabel,
@@ -33,11 +40,19 @@ export const PromptCarousel = ({
   const shouldShowTwoRowsValue = shouldShowTwoRows(promptCarouselRows, isMobile);
   const finalTheme = resolveTheme(theme);
 
-  const { ref: dragScrollRef1 } = useScrollContainer();
-  const { ref: dragScrollRef2 } = useScrollContainer();
   const scrollContainerRef1 = useRef<HTMLDivElement>(null);
   const scrollContainerRef2 = useRef<HTMLDivElement>(null);
 
+  const { ref: dragScrollRef1 } = useScrollContainer({
+    mouseScroll: true,
+    onStartScroll: handleButtonDrag,
+  });
+
+  const { ref: dragScrollRef2 } = useScrollContainer({
+    mouseScroll: true,
+    onStartScroll: handleButtonDrag,
+  });
+
   const setRef1 = useCallback(
     (el: HTMLDivElement | null) => {
       if (typeof dragScrollRef1 === 'function') dragScrollRef1(el);
@@ -95,6 +110,12 @@ export const PromptCarousel = ({
             isLoading={isLoading}
             bold={boldFirstButton && index === 0 && duplicateIndex === 0}
             onClick={() => handleButtonClick?.(text)}
+            onHover={() => handleButtonHover?.(text)}
+            onFocus={() => handleButtonFocus?.(text)}
+            onMouseDown={() => handleButtonMouseDown?.(text)}
+            onMouseUp={() => handleButtonMouseUp?.(text)}
+            onTouchStart={() => handleButtonTouchStart?.(text)}
+            onTouchEnd={() => handleButtonTouchEnd?.(text)}
           />
         </div>
       );

package/src/components/PromptCarousel/__tests__/PromptCarousel.test.tsx

@@ -131,6 +131,46 @@ describe('PromptCarousel', () => {
       expect(handleButtonClick).toHaveBeenCalledWith('Click me');
     });
 
+    it('should call handleButtonHover when button is hovered', () => {
+      const handleButtonHover = vi.fn();
+      render(
+        <PromptCarousel
+          id="test-carousel"
+          promptButtonTexts={['Hover me']}
+          handleButtonClick={vi.fn()}
+          handleButtonHover={handleButtonHover}
+        />,
+      );
+
+      const button = screen.getByText('Hover me');
+      fireEvent.mouseOver(button);
+      expect(handleButtonHover).toHaveBeenCalledTimes(1);
+      expect(handleButtonHover).toHaveBeenCalledWith('Hover me');
+    });
+
+    it('should call handleButtonHover with correct text for each button', () => {
+      const handleButtonHover = vi.fn();
+      const buttonTexts = ['First', 'Second', 'Third'];
+      render(
+        <PromptCarousel
+          id="test-carousel"
+          promptButtonTexts={buttonTexts}
+          handleButtonClick={vi.fn()}
+          handleButtonHover={handleButtonHover}
+        />,
+      );
+
+      for (const text of buttonTexts) {
+        const button = screen.getByText(text);
+        fireEvent.mouseOver(button);
+      }
+
+      expect(handleButtonHover).toHaveBeenCalledTimes(3);
+      expect(handleButtonHover).toHaveBeenNthCalledWith(1, 'First');
+      expect(handleButtonHover).toHaveBeenNthCalledWith(2, 'Second');
+      expect(handleButtonHover).toHaveBeenNthCalledWith(3, 'Third');
+    });
+
     it('should call handleButtonClick with correct text for each button', () => {
       const handleButtonClick = vi.fn();
       const buttonTexts = ['First', 'Second', 'Third'];