کاروسل (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'