@moontra/moonui 3.0.1 → 3.2.0

package/src/components/ui/__tests__/rating.test.tsx

@@ -0,0 +1,218 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Rating, ratingVariants } from '../rating'
+
+describe('Rating Component', () => {
+  describe('Rendering', () => {
+    it('renders a radiogroup with the default aria-label', () => {
+      render(<Rating />)
+      const group = screen.getByRole('radiogroup')
+      expect(group).toBeInTheDocument()
+      expect(group).toHaveAttribute('aria-label', 'Rating')
+    })
+
+    it('renders the default number of stars (5)', () => {
+      const { container } = render(<Rating />)
+      const stars = container.querySelectorAll('[data-slot="rating-star"]')
+      expect(stars).toHaveLength(5)
+    })
+
+    it('renders a custom number of stars via max', () => {
+      const { container } = render(<Rating max={10} />)
+      const stars = container.querySelectorAll('[data-slot="rating-star"]')
+      expect(stars).toHaveLength(10)
+    })
+
+    it('renders one radio option per star in full precision', () => {
+      render(<Rating max={5} />)
+      expect(screen.getAllByRole('radio')).toHaveLength(5)
+    })
+
+    it('renders two radio options per star in half precision', () => {
+      render(<Rating max={5} precision="half" />)
+      expect(screen.getAllByRole('radio')).toHaveLength(10)
+    })
+
+    it('applies a custom className to the root', () => {
+      render(<Rating className="custom-rating" aria-label="Score" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('custom-rating')
+    })
+
+    it('respects a user-provided aria-label', () => {
+      render(<Rating aria-label="Product rating" />)
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label', 'Product rating')
+    })
+
+    it('forwards ref to the root div', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Rating ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(Rating.displayName).toBe('Rating')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('applies default (md) size gap', () => {
+      render(<Rating />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-1')
+    })
+
+    it('applies sm size gap', () => {
+      render(<Rating size="sm" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-0.5')
+    })
+
+    it('applies lg size gap', () => {
+      render(<Rating size="lg" />)
+      expect(screen.getByRole('radiogroup')).toHaveClass('gap-1.5')
+    })
+
+    it('exposes ratingVariants helper', () => {
+      expect(typeof ratingVariants).toBe('function')
+      expect(ratingVariants({ size: 'lg' })).toContain('gap-1.5')
+    })
+  })
+
+  describe('Interaction', () => {
+    it('calls onValueChange with the clicked star value', () => {
+      const onValueChange = jest.fn()
+      render(<Rating onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '3 stars' }))
+      expect(onValueChange).toHaveBeenCalledWith(3)
+    })
+
+    it('uses singular label for the first star', () => {
+      const onValueChange = jest.fn()
+      render(<Rating onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '1 star' }))
+      expect(onValueChange).toHaveBeenCalledWith(1)
+    })
+
+    it('updates uncontrolled value on click (defaultValue)', () => {
+      render(<Rating defaultValue={2} />)
+      // 2 stars initially checked
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'true')
+      fireEvent.click(screen.getByRole('radio', { name: '4 stars' }))
+      expect(screen.getByRole('radio', { name: '4 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('supports half precision selection', () => {
+      const onValueChange = jest.fn()
+      render(<Rating precision="half" onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '2.5 stars' }))
+      expect(onValueChange).toHaveBeenCalledWith(2.5)
+    })
+  })
+
+  describe('Controlled behavior', () => {
+    it('reflects the controlled value prop', () => {
+      render(<Rating value={4} />)
+      expect(screen.getByRole('radio', { name: '4 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '3 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+
+    it('does not change the controlled value internally on click but fires callback', () => {
+      const onValueChange = jest.fn()
+      render(<Rating value={2} onValueChange={onValueChange} />)
+      fireEvent.click(screen.getByRole('radio', { name: '5 stars' }))
+      // callback fired
+      expect(onValueChange).toHaveBeenCalledWith(5)
+      // but the displayed selection stays controlled at 2
+      expect(screen.getByRole('radio', { name: '2 stars' })).toHaveAttribute('aria-checked', 'true')
+      expect(screen.getByRole('radio', { name: '5 stars' })).toHaveAttribute('aria-checked', 'false')
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('increments value with ArrowRight', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(4)
+    })
+
+    it('decrements value with ArrowLeft', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowLeft' })
+      expect(onValueChange).toHaveBeenCalledWith(2)
+    })
+
+    it('sets minimum with Home and maximum with End', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} onValueChange={onValueChange} />)
+      const group = screen.getByRole('radiogroup')
+      fireEvent.keyDown(group, { key: 'Home' })
+      expect(onValueChange).toHaveBeenCalledWith(1)
+      fireEvent.keyDown(group, { key: 'End' })
+      expect(onValueChange).toHaveBeenCalledWith(5)
+    })
+
+    it('clamps at max on ArrowRight', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={5} onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(5)
+    })
+
+    it('steps by 0.5 in half precision', () => {
+      const onValueChange = jest.fn()
+      render(<Rating defaultValue={3} precision="half" onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).toHaveBeenCalledWith(3.5)
+    })
+
+    it('is focusable when interactive', () => {
+      render(<Rating />)
+      expect(screen.getByRole('radiogroup')).toHaveAttribute('tabindex', '0')
+    })
+  })
+
+  describe('ReadOnly mode', () => {
+    it('marks the group as aria-readonly and non-focusable', () => {
+      render(<Rating value={3} readOnly />)
+      const group = screen.getByRole('radiogroup')
+      expect(group).toHaveAttribute('aria-readonly', 'true')
+      expect(group).not.toHaveAttribute('tabindex')
+    })
+
+    it('renders no interactive radio options', () => {
+      render(<Rating value={3} readOnly />)
+      expect(screen.queryAllByRole('radio')).toHaveLength(0)
+    })
+
+    it('does not respond to keyboard input', () => {
+      const onValueChange = jest.fn()
+      render(<Rating value={3} readOnly onValueChange={onValueChange} />)
+      fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowRight' })
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+
+    it('still renders the star visuals', () => {
+      const { container } = render(<Rating value={3} readOnly />)
+      expect(container.querySelectorAll('[data-slot="rating-star"]')).toHaveLength(5)
+    })
+  })
+
+  describe('Custom icon', () => {
+    it('renders a custom icon instead of the default Star', () => {
+      const CustomIcon = <svg data-testid="custom-icon" />
+      const { container } = render(<Rating icon={CustomIcon} max={3} />)
+      // Both empty and filled layers per star -> 2 icons per star
+      expect(container.querySelectorAll('[data-testid="custom-icon"]').length).toBeGreaterThanOrEqual(3)
+    })
+  })
+
+  describe('HTML attributes', () => {
+    it('passes through arbitrary HTML attributes', () => {
+      render(<Rating data-testid="my-rating" id="rating-1" />)
+      const group = screen.getByTestId('my-rating')
+      expect(group).toHaveAttribute('id', 'rating-1')
+    })
+  })
+})

package/src/components/ui/__tests__/spinner.test.tsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Spinner, spinnerVariants } from '../spinner'
+
+describe('Spinner Component', () => {
+  describe('Rendering', () => {
+    it('renders correctly with default props', () => {
+      render(<Spinner data-testid="spinner" />)
+      const spinner = screen.getByTestId('spinner')
+      expect(spinner).toBeInTheDocument()
+    })
+
+    it('applies custom className', () => {
+      render(<Spinner className="custom-spinner" data-testid="spinner" />)
+      expect(screen.getByTestId('spinner')).toHaveClass('custom-spinner')
+    })
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Spinner ref={ref} />)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('maintains displayName', () => {
+      expect(Spinner.displayName).toBe('Spinner')
+    })
+
+    it('passes through HTML attributes', () => {
+      render(<Spinner data-testid="spinner" id="loader-1" />)
+      expect(screen.getByTestId('spinner')).toHaveAttribute('id', 'loader-1')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="status"', () => {
+      render(<Spinner />)
+      expect(screen.getByRole('status')).toBeInTheDocument()
+    })
+
+    it('has aria-live="polite"', () => {
+      render(<Spinner />)
+      expect(screen.getByRole('status')).toHaveAttribute('aria-live', 'polite')
+    })
+
+    it('renders default accessible label "Loading" visually hidden', () => {
+      render(<Spinner />)
+      const label = screen.getByText('Loading')
+      expect(label).toBeInTheDocument()
+      expect(label).toHaveClass('sr-only')
+    })
+
+    it('contains the sr-only label inside the status region', () => {
+      render(<Spinner />)
+      const status = screen.getByRole('status')
+      expect(status).toContainElement(screen.getByText('Loading'))
+    })
+
+    it('renders a custom label', () => {
+      render(<Spinner label="Yükleniyor" />)
+      const label = screen.getByText('Yükleniyor')
+      expect(label).toHaveClass('sr-only')
+      expect(screen.queryByText('Loading')).not.toBeInTheDocument()
+    })
+
+    it('marks the visual indicator as aria-hidden', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveAttribute('aria-hidden', 'true')
+    })
+  })
+
+  describe('Animation & reduced motion', () => {
+    it('applies animate-spin to the default ring', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('span[aria-hidden="true"]')
+      expect(ring).toHaveClass('animate-spin')
+    })
+
+    it('disables animation under prefers-reduced-motion', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('span[aria-hidden="true"]')
+      expect(ring).toHaveClass('motion-reduce:animate-none')
+    })
+  })
+
+  describe('Size variants', () => {
+    it('applies md size classes by default', () => {
+      render(<Spinner />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-6', 'w-6')
+    })
+
+    it('applies sm size classes', () => {
+      render(<Spinner size="sm" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-4', 'w-4')
+    })
+
+    it('applies lg size classes', () => {
+      render(<Spinner size="lg" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-8', 'w-8')
+    })
+
+    it('applies xl size classes', () => {
+      render(<Spinner size="xl" />)
+      const ring = screen.getByRole('status').querySelector('.animate-spin')
+      expect(ring).toHaveClass('h-10', 'w-10')
+    })
+
+    it('spinnerVariants generates size classes directly', () => {
+      expect(spinnerVariants({ size: 'sm' })).toContain('h-4')
+      expect(spinnerVariants({ size: 'xl' })).toContain('h-10')
+    })
+  })
+
+  describe('Dots variant', () => {
+    it('renders three dots and no ring', () => {
+      render(<Spinner variant="dots" />)
+      const status = screen.getByRole('status')
+      expect(status.querySelector('.animate-spin')).not.toBeInTheDocument()
+      const dots = status.querySelectorAll('.animate-bounce')
+      expect(dots).toHaveLength(3)
+    })
+
+    it('keeps the sr-only label in dots variant', () => {
+      render(<Spinner variant="dots" label="Please wait" />)
+      const status = screen.getByRole('status')
+      const label = screen.getByText('Please wait')
+      expect(label).toHaveClass('sr-only')
+      expect(status).toContainElement(label)
+    })
+
+    it('disables dot animation under prefers-reduced-motion', () => {
+      render(<Spinner variant="dots" />)
+      const dot = screen.getByRole('status').querySelector('.animate-bounce')
+      expect(dot).toHaveClass('motion-reduce:animate-none')
+    })
+  })
+})

package/src/components/ui/carousel.tsx

@@ -0,0 +1,324 @@
+"use client"
+
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+
+/**
+ * Premium Carousel Component
+ *
+ * Embla Carousel tabanlı, erişilebilir ve esnek carousel bileşeni.
+ * Yatay/dikey yön desteği, klavye navigasyonu ve plugin (autoplay vb.) desteği sunar.
+ */
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Embla carousel seçenekleri (loop, align, axis vb.) */
+  opts?: CarouselOptions;
+  /** Embla plugin listesi (ör. autoplay) */
+  plugins?: CarouselPlugin;
+  /** Kaydırma yönü */
+  orientation?: "horizontal" | "vertical";
+  /** Embla API'sine dışarıdan erişmek için callback */
+  setApi?: (api: CarouselApi) => void;
+}
+
+interface CarouselContextProps
+  extends Pick<CarouselProps, "opts" | "plugins" | "setApi"> {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: "horizontal" | "vertical";
+}
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+/**
+ * Carousel context hook'u — Carousel alt bileşenlerinin embla API'sine
+ * ve yön bilgisine erişmesini sağlar.
+ */
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Carousel Root
+ * -----------------------------------------------------------------------------------------------*/
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Yön bilgisi opts.axis ile de verilebilir — orientation prop'u öncelikli
+    const resolvedOrientation =
+      orientation || (opts?.axis === "y" ? "vertical" : "horizontal");
+
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: resolvedOrientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    // Embla "select" olayında ileri/geri butonlarının durumunu güncelle
+    const onSelect = React.useCallback((emblaApi: CarouselApi) => {
+      if (!emblaApi) return;
+      setCanScrollPrev(emblaApi.canScrollPrev());
+      setCanScrollNext(emblaApi.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    // Klavye navigasyonu: yatayda sol/sağ, dikeyde yukarı/aşağı ok tuşları
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const prevKey =
+          resolvedOrientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        const nextKey =
+          resolvedOrientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+
+        if (event.key === prevKey) {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === nextKey) {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [resolvedOrientation, scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) return;
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) return;
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api.off("reInit", onSelect);
+        api.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api,
+          opts,
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+          orientation: resolvedOrientation,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("moonui-theme", "relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselContent
+ * -----------------------------------------------------------------------------------------------*/
+const carouselContentVariants = cva("flex", {
+  variants: {
+    orientation: {
+      horizontal: "-ml-4",
+      vertical: "-mt-4 flex-col",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export interface CarouselContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof carouselContentVariants>, "orientation"> {}
+
+const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(carouselContentVariants({ orientation }), className)}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselItem
+ * -----------------------------------------------------------------------------------------------*/
+const carouselItemVariants = cva("min-w-0 shrink-0 grow-0 basis-full", {
+  variants: {
+    orientation: {
+      horizontal: "pl-4",
+      vertical: "pt-4",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export interface CarouselItemProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Omit<VariantProps<typeof carouselItemVariants>, "orientation"> {}
+
+const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(carouselItemVariants({ orientation }), className)}
+        {...props}
+      />
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselPrevious
+ * -----------------------------------------------------------------------------------------------*/
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon-sm", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      rounded="full"
+      className={cn(
+        "absolute",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+/* -------------------------------------------------------------------------------------------------
+ * CarouselNext
+ * -----------------------------------------------------------------------------------------------*/
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon-sm", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      rounded="full"
+      className={cn(
+        "absolute",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" aria-hidden="true" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  type CarouselApi,
+  type CarouselOptions,
+  type CarouselPlugin,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+  carouselContentVariants,
+  carouselItemVariants,
+};