البناء · جديد

بيانات البطاقة

رقم البطاقة وتاريخ الانتهاء ورمز الأمان في مجموعة واحدة، تُنسَّق أثناء الكتابة وتملؤها المتصفحات والمحافظ.

المعاينة

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

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

npx shadcn@latest add @ritla/card-details

الاعتماديات التي يضيفها: @base-ui/react

import { CardDetails } from "@/components/ui/card-details";

<CardDetails label="Card details" onValueChange={(card, { brand, complete }) => setCard(card)} />

errorPart يحدد الجزء الخاطئ (number أو expiry أو cvc)، والرسالة تحت المجموعة.

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		خاصية Label.
`value / defaultValue`	`{ number, expiry, cvc }`		القيم (الرقم بلا مسافات، والتاريخ MM/YY).
`onValueChange`	`(card, { brand, complete }) => void`		مع كل تغيير: الشبكة (visa، mastercard…) واكتمال البيانات مع فحص Luhn.
`error / errorPart`	`ReactNode / "number" \| "expiry" \| "cvc"`		خاصيتا State = Error وField. بدون `errorPart` تُعلَّم الأجزاء الثلاثة.
`partLabels`	`{ number?, expiry?, cvc? }`		أسماء الأجزاء لقارئ الشاشة. الافتراضي بلغة الصفحة.
`names`	`{ number?, expiry?, cvc? }`	`cc-number, cc-exp, cc-csc`	أسماء الحقول في النموذج.
`required / helperText / disabled`	`…`		كما في حقل الإدخال.

الخاصية	النوع	الافتراضي	الوصف
`cardBrand(number)`	`CardBrand`		الشبكة من أول الأرقام. بطاقات مدى مشتركة مع Visa أو Mastercard وتُقرأ كذلك.
`isValidCardNumber(number)`	`boolean`		فحص Luhn والطول.

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

المفتاح	ما يفعله
`Tab`	الرقم، ثم التاريخ، ثم الرمز.

المجموعة role="group" باسم التسمية، ولكل جزء اسم («رقم البطاقة»، «تاريخ الانتهاء (شهر/سنة)»، «رمز الأمان») بلغة الصفحة.
autocomplete ‏cc-number وcc-exp وcc-csc لتعبئة المتصفح والمحفظة، وinputmode="numeric".
الجزء الخاطئ يحمل aria-invalid، والرسالة مرتبطة بالأجزاء كلها.

المجموعة من اليسار إلى اليمين كما تُطبع البطاقة: الرقم أعلى، والتاريخ يسارًا والرمز يمينًا، في العربية أيضًا.

الأرقام: الأرقام العربية والفارسية المكتوبة تُحفظ 0-9، وتظهر بأرقام غربية كما على البطاقة.
الخط العربي: label-16 كبقية الحقول.