المكوّنات

العرض الدوّار

مجموعة شرائح تُعرض خطوة خطوة: عروض وتعريف بالتطبيق وأبرز المزايا. الأسهم تنقل شريحة، والنقاط تبيّن الموضع.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/carousel

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { Carousel, CarouselSlide } from "@/components/ui/carousel";

<Carousel title="Offers for you">
  <CarouselSlide icon={CoinsIcon} title="Cashback on groceries" description="Get 5% back at partner stores this month." />
  <CarouselSlide icon={AirplaneIcon} title="Travel insurance" description="Covered on every trip you pay with Kanz." />
</Carousel>

أمثلة

شريحة واحدة

‏type="single" للتعريف بالتطبيق: شريحة بعرض كامل، والسهمان حول النقاط.

شرائح فيها روابط

‏Tab يمرّ على الروابط بالترتيب، والمسار يتمرّر ليبقى الرابط المركّز عليه ظاهرًا.

مرجع الخصائص

Carousel

الخاصية	النوع	الافتراضي	الوصف
`type`	`"cards" \| "single"`	`"cards"`	خاصية Type.
`title`	`ReactNode`		عنوان البطاقات بجانب الأسهم، واسم العرض.
`label`	`string`		اسم العرض لقارئ الشاشة إن لم يكن هناك عنوان نصي.
`children`	`CarouselSlide[]`		الشرائح: خمس أو أقل، والأهم أولًا.

CarouselSlide

الخاصية	النوع	الوصف
`icon`	`IconComponent`	للبطاقات: أيقونة في دائرة `brand/faint`.
`artwork`	`ReactNode`	للشريحة الواحدة: محتوى لوحة الرسم بارتفاع 180px.
`title / description`	`ReactNode`	خاصيتا Heading وBody.
`children`	`ReactNode`	ما بعد النص: رابط أو زر.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى السهمين ثم المسار ثم النقاط والروابط داخل الشرائح.
`EnterSpace`	على سهم: شريحة واحدة. على نقطة: تلك الشريحة.
`ArrowLeftArrowRight`	على المسار: تمرير أصلي.

ARIA

العرض منطقة لها اسم (aria-roledescription «عرض دوّار»)، وكل شريحة مجموعة اسمها «2 من 4».
السهمان «الشريحة السابقة» و«الشريحة التالية»، ويتعطلان عند الطرفين. النقاط أزرار «انتقل إلى الشريحة 2».
التنقل بالأزرار يُعلن بلطف («الشريحة 2 من 4»). لا تشغيل تلقائي.

ملاحظات العربية والاتجاه

ينعكس

الشرائح تبدأ من اليمين، والنقطة النشطة على اليمين.
السهم المتجه يمينًا يعود إلى الشريحة السابقة، والسحب يتبع اتجاه القراءة.
الأيقونات الاتجاهية في الرسوم (الطائرة الورقية) تنعكس.

لا ينعكس

الأيقونات غير الاتجاهية (العملات، الحصالة) لا تنعكس.

الأرقام: أسماء الشرائح والنسب في النص تتبع إعداد الأرقام.
الخط العربي: العنوان label-16 Semibold، والنص label-14.
النص ثنائي الاتجاه: ‏Kanz يعتمد التمرير الأصلي، فيتولى المتصفح اتجاه التمرير بالعربية دون حسابات يدوية.