کاروسل (Carousel)

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@parto-system-design/ui';

export default function MyComponent() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>اسلاید 1</CarouselItem>
        <CarouselItem>اسلاید 2</CarouselItem>
        <CarouselItem>اسلاید 3</CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

<Carousel
  opts={{
    align: "start",
  }}
  className="w-full max-w-sm"
>
  <CarouselContent>
    {Array.from({ length: 5 }).map((_, index) => (
      <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
        <div className="p-1">
          کارت {index + 1}
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

<Carousel orientation="vertical" className="w-full max-w-xs">
  <CarouselContent className="-mt-1 h-[200px]">
    {Array.from({ length: 5 }).map((_, index) => (
      <CarouselItem key={index} className="pt-1 md:basis-1/2">
        <div className="p-1">
          کارت {index + 1}
        </div>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

// استفاده از جهت صفحه (پیش‌فرض)
<Carousel>...</Carousel>

// تنظیم دستی جهت
<Carousel dir="rtl">...</Carousel>
<Carousel dir="ltr">...</Carousel>

import { useCarousel } from '@parto-system-design/ui';

const { api, direction } = useCarousel();

// دسترسی به متدهای کاروسل
api?.scrollNext();
api?.scrollPrev();
api?.scrollTo(index);

// دسترسی به جهت فعلی
console.log(direction); // 'rtl' یا 'ltr'