منتقي الإعدادات المحلية

التثبيت

npx shadcn@latest add @babelize/locale-picker

الاستخدام

import { LocalePicker } from "@/components/ui/locale-picker";

<LocalePicker
  regions={["IN", "US", "GB", "DE", "JP"]} // your ISO 3166-1 alpha-2 regions
  defaultValue="en-IN"
  onValueChange={(locale) => console.log("Selected locale:", locale)}
  label="english" // native, english
  variant="outline" // outline, ghost, secondary
  size="default" // sm, default, lg
/>

الخصائص

القيمة المحددة وسم BCP 47 كامل: جزء المنطقة فيه هو المنطقة المختارة، ويبقى جزء اللغة سليمًا عند تغيير المنطقة. اختيار ألمانيا من en-IN ينتج en-DE؛ واختيارها من fr-JP ينتج fr-DE.

القيم الافتراضية المشتقة

تشتق بطاقة الملخص كل شيء من الإعدادات المحلية المحددة عبر Intl — دون بيانات مضمّنة تتجاوز جدول ISO 4217 الاحتياطي لرمز العملة:

تعرض المناطق التي لا تملك ربطًا بعملة شرطةً طويلة بدلًا من التخمين.

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

تتبع النافذة المنبثقة نمط combobox في WAI-ARIA: يبقى التركيز في حقل البحث، الذي يُعرض كـ role="combobox"، ويُعلَن عن الخيار المميّز عبر aria-activedescendant.

الميزات

• القيم الافتراضية المشتقة — العملة وتنسيق التاريخ وتنسيق الأرقام وأول يوم في الأسبوع، تُحسب مباشرة عبر Intl
• قائمة منسدلة مع بحث — صفِّ المناطق حسب الاسم الإنجليزي أو الاسم المترجم أو رمز المنطقة، مع زر مسح
• الحركة — تتلاشى النافذة المنبثقة وتنزلق عبر motion/react، مع احترام prefers-reduced-motion، وتغادر شجرة إمكانية الوصول عند إغلاقها
• يراعي RTL — يعكس الاتجاه للإعدادات المحلية من نوع RTL (ar وhe وfa وur) عبر dir على الجذر
• متاح عبر لوحة المفاتيح — التنقل بمفاتيح الأسهم وHome / End وEnter وEscape
• تسميات ARIA — حقل البحث role="combobox" مع aria-activedescendant، إضافةً إلى aria-expanded وaria-haspopup وaria-selected
• منسّق برموز shadcn — bg-popover وborder-input وbg-accent وغيرها، فيرث سمتك؛ ويأتي الوضع الداكن من الرموز
• قابل للتخصيص — أزرار variant / size إضافةً إلى classNames لكل جزء (LocalePickerClassNames مُصدَّر من ملف التصدير الرئيسي)، مع أيقونات lucide-react في كل مكان
• متحكَّم به أو غير متحكَّم به — value / defaultValue / onValueChange

أمثلة

متحكَّم به

<LocalePicker regions={["IN", "US", "GB", "DE", "JP"]} value={locale} onValueChange={setLocale} />

أسماء المناطق الأصلية

<LocalePicker regions={["IN", "US", "GB", "DE", "JP"]} defaultValue="de-DE" label="native" />

عند تحديد de-DE، يقرأ الزر المُشغّل "Deutschland" وتقرأ الخيارات "Vereinigte Staaten" و"Vereinigtes Königreich"، وهكذا.

نصوص الواجهة المترجمة

تكون النصوص النائبة للبحث وحالة الفراغ وتسميات إمكانية الوصول وتسميات صفوف الملخص بالإنجليزية افتراضيًا. مرّر labels لترجمتها — وأي مفتاح تتركه يحتفظ بقيمته الإنجليزية الافتراضية. وتظل الخاصيتان searchPlaceholder وemptyMessage تعملان، وتتغلبان على labels عند ضبطهما معًا.

"use client";

import { LocalePicker } from "@/components/ui/locale-picker";

export default function App() {
  return (
    <LocalePicker
      regions={["IN", "US", "GB", "DE", "JP"]}
      defaultValue="en-IN"
      labels={{
        searchPlaceholder: "Rechercher une région…",
        searchLabel: "Rechercher une région",
        clearSearch: "Effacer la recherche",
        emptyMessage: "Aucune région trouvée.",
        listbox: "Choisir la région",
        current: (name) => `Région actuelle : ${name}`,
        currency: "Devise",
        dateFormat: "Format de date",
        numberFormat: "Format de nombre",
        weekStart: "La semaine commence le",
      }}
    />
  );
}

الاعتماديات

يستخدم هذا المكوّن:

• clsx وtailwind-merge (مُضمّنة كاعتماديات)
• lucide-react (الأيقونات)
• motion (حركة النافذة المنبثقة)

الاعتماديات النظيرة:

• react >= 18
• react-dom >= 18
• tailwindcss >= 3

الإسناد

من إنشاء ujwalbajaj.