منتقي الوقت

نافذة منبثقة لاختيار الوقت بأعمدة قابلة للتمرير للساعات والدقائق، مع عمود ص/م في نظام 12 ساعة. استخدمه اختصارًا بجانب حقل إدخال الوقت.

npx sdaia-ui@latest add time-picker

الاستخدام

import { TimePicker } from "@/components/ui/TimePicker"

<TimePicker title="Select time" value={time} onApply={setTime} onCancel={close} />

الساعات والدقائق وص/م، مع عنوان وتذييل الإلغاء والتطبيق.

جارٍ تحميل العرض التوضيحي: time-picker-default

الساعات والدقائق فقط. استخدم نظام 24 ساعة في شاشات التشغيل والتدقيق والتقارير.

جارٍ تحميل العرض التوضيحي: time-picker-24-hour

أخفِ العنوان في التخطيطات الضيقة؛ يبقى الوقت المحدد في الرأس.

جارٍ تحميل العرض التوضيحي: time-picker-no-title

يُطبَّق كل اختيار فورًا عبر onChange (بفواصل 15 دقيقة هنا).

جارٍ تحميل العرض التوضيحي: time-picker-no-footer

تنعكس الأعمدة والتسميات وتبقى الأرقام من اليسار إلى اليمين.

جارٍ تحميل العرض التوضيحي: time-picker-rtl

الخاصية	النوع	القيمة الافتراضية	مطلوبة
format	"12-hour" \| "24-hour"	"12-hour"	اختيارية
value	TimeValue \| null	—	اختيارية
defaultValue	TimeValue \| null	null	اختيارية
onChange	(value: TimeValue) => void	—	اختيارية
onApply	(value: TimeValue) => void	—	اختيارية
onCancel	() => void	—	اختيارية
title	string	—	اختيارية
footer	boolean	true	اختيارية
minuteStep	number	5	اختيارية
autoFocus	boolean	false	اختيارية
labels	Partial<TimePickerLabels>	—	اختيارية
dir	"ltr" \| "rtl"	—	اختيارية

كل عمود قائمة اختيار (الساعات، الدقائق، ص/م) بنقطة Tab واحدة: Tab ينقل بين الأعمدة، والأسهم أعلى/أسفل تغيّر الاختيار داخل العمود، وHome/End للطرفين، وPageUp/PageDown لخمسة خيارات.
Enter يطبّق الوقت وEscape يلغي؛ وفي حقل إدخال الوقت يعيد كلاهما التركيز إلى الحقل.
يظهر الخيار المحدد بالتعبئة والوزن إضافة إلى اللون، وللخيار المركَّز عليه حلقة 2px بلون Border/border-focus.
تتمرر الأعمدة ذاتيًا لإبقاء الاختيار ظاهرًا دون تمرير الصفحة.
أزرار التذييل من مكوّن الزر بمساحة نقر 24 بكسل.

تحتفظ البطاقة بعرضها في Figma (300 بكسل مع ص/م و260 بكسل دونه) وتتقلص مع الحاوية إذا ضاقت.
الحشو والفواصل تستخدم رموز المسافات المتجاوبة.