diff --git a/.prettierignore b/.prettierignore index e206b0f..cfaca94 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,11 +4,3 @@ dist .source .vercel CHANGELOG.md -# Written by `babelize translate` from the English pages and .babelize/local/docs-lock.json -content/docs/**/*.es.mdx -content/docs/**/*.ja.mdx -content/docs/**/*.ar.mdx -content/docs/**/meta.es.json -content/docs/**/meta.ja.json -content/docs/**/meta.ar.json -.babelize/local/docs-lock.json diff --git a/content/docs/components/index.ar.mdx b/content/docs/components/index.ar.mdx index 07a53e5..dcb4a96 100644 --- a/content/docs/components/index.ar.mdx +++ b/content/docs/components/index.ar.mdx @@ -7,41 +7,41 @@ description: مجموعة شاملة من مكوّنات واجهة التوطي مكوّنات احترافية لمبدّل اللغة مصممة لتحديد الإعدادات المحلية بسلاسة في جميع أجزاء تطبيقك. -| المكوّن | الوصف | -| ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -| **[مبدّل اللغة](/docs/components/language-switchers/language-switcher)** | قائمة منسدلة متكاملة الميزات مع البحث والأعلام ودعم RTL | +| المكوّن | الوصف | +| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | +| **[مبدّل اللغة](/docs/components/language-switchers/language-switcher)** | قائمة منسدلة متكاملة الميزات مع البحث والأعلام ودعم RTL | | **[كبسولة مبدّل اللغة](/docs/components/language-switchers/language-switcher-pill)** | أداة اختيار متحركة بأسلوب الكبسولة مع التنقل بلوحة المفاتيح ودعم RTL | ### منتقيات الإعدادات المحلية [#locale-pickers] اختر منطقة واطّلع على القيم الافتراضية للإعدادات المحلية المرتبطة بها، لصفحات الإعدادات وتدفقات الإعداد الأولي. -| المكوّن | الوصف | -| ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | +| المكوّن | الوصف | +| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | **[منتقي الإعدادات المحلية](/docs/components/locale-pickers/locale-picker)** | منتقي المناطق مع القيم الافتراضية المشتقة للعملة والتاريخ والأرقام وبداية الأسبوع، مع البحث | ### حقل إدخال الهاتف [#phone-input] حقل إدخال أرقام الهواتف الدولية مع محدّد الدولة والبحث عن رمز الاتصال. -| المكوّن | الوصف | -| ------------------------------------------------------ | -------------------------------------------------------------------- | +| المكوّن | الوصف | +| ----------------------------------------------------------- | ------------------------------------------------------- | | **[حقل إدخال الهاتف](/docs/components/inputs/phone-input)** | محدّد الدولة مع الأعلام ورموز الاتصال والبحث في 50 دولة | ### التنقل [#navigation] شريط تنقل متكامل الميزات مع دعم مدمج للتوطين. -| المكوّن | الوصف | -| ------------------------------------------------ | ------------------------------------------------------------------------ | +| المكوّن | الوصف | +| ------------------------------------------------ | -------------------------------------------------------------------------------- | | **[NavBar](/docs/components/navigation/navbar)** | شريط تنقل متجاوب مع محدّد اللغة وقائمة الجوال وزر دعوة لاتخاذ إجراء ورابط GitHub | ### الترجمة [#translation] عروض ترجمة جنبًا إلى جنب لمقارنة النص المصدر والنص الهدف وتحريرهما. -| المكوّن | الوصف | -| ------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| المكوّن | الوصف | +| ------------------------------------------------------------------- | ------------------------------------------------------------- | | **[أداة الترجمة](/docs/components/translation/translation-widget)** | لوحة هدف قابلة للتحرير، وتخطيط يراعي RTL، وتنسيق claymorphism | --- diff --git a/content/docs/components/index.es.mdx b/content/docs/components/index.es.mdx index f970a33..b313954 100644 --- a/content/docs/components/index.es.mdx +++ b/content/docs/components/index.es.mdx @@ -7,41 +7,41 @@ description: Colección completa de componentes de interfaz de localización par Componentes profesionales de selector de idioma, diseñados para una selección de configuración regional fluida en toda tu aplicación. -| Componente | Descripción | -| ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -| **[Selector de idioma](/docs/components/language-switchers/language-switcher)** | Desplegable completo con búsqueda, banderas y compatibilidad con RTL | +| Componente | Descripción | +| ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| **[Selector de idioma](/docs/components/language-switchers/language-switcher)** | Desplegable completo con búsqueda, banderas y compatibilidad con RTL | | **[Selector de idioma en píldora](/docs/components/language-switchers/language-switcher-pill)** | Selector animado en estilo píldora con navegación por teclado y compatibilidad con RTL | ### Selectores de configuración regional [#locale-pickers] Elige una región y consulta los valores predeterminados de configuración regional que la acompañan, para páginas de ajustes y flujos de incorporación. -| Componente | Descripción | -| ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | +| Componente | Descripción | +| --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | **[Selector de configuración regional](/docs/components/locale-pickers/locale-picker)** | Selector de región con moneda, fecha, número y primer día de la semana derivados, además de búsqueda | ### Entrada de teléfono [#phone-input] Campo internacional para números de teléfono con selector de país y búsqueda de prefijos telefónicos. -| Componente | Descripción | -| ------------------------------------------------------ | -------------------------------------------------------------------- | +| Componente | Descripción | +| -------------------------------------------------------------- | ----------------------------------------------------------------------------- | | **[Entrada de teléfono](/docs/components/inputs/phone-input)** | Selector de país con banderas, prefijos telefónicos y búsqueda para 50 países | ### Navegación [#navigation] Barra de navegación completa con soporte de localización integrado. -| Componente | Descripción | -| ------------------------------------------------ | ------------------------------------------------------------------------ | +| Componente | Descripción | +| ------------------------------------------------ | ------------------------------------------------------------------------------------ | | **[NavBar](/docs/components/navigation/navbar)** | Navegación adaptable con selector de idioma, menú móvil, botón CTA y enlace a GitHub | ### Traducción [#translation] Vistas de traducción lado a lado para comparar y editar el texto de origen y de destino. -| Componente | Descripción | -| ------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| Componente | Descripción | +| --------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | **[Widget de traducción](/docs/components/translation/translation-widget)** | Panel de destino editable, diseño compatible con RTL y estilo claymorphism | --- diff --git a/content/docs/components/index.ja.mdx b/content/docs/components/index.ja.mdx index 7cb4a60..4e9ee37 100644 --- a/content/docs/components/index.ja.mdx +++ b/content/docs/components/index.ja.mdx @@ -7,41 +7,41 @@ description: React 向けのローカライゼーション UI コンポーネン アプリケーション全体でシームレスにロケールを選択できるように設計された、本格的な言語スイッチャーコンポーネントです。 -| コンポーネント | 説明 | -| ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -| **[言語スイッチャー](/docs/components/language-switchers/language-switcher)** | 検索、国旗、RTL サポートを備えた高機能なドロップダウン | +| コンポーネント | 説明 | +| --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| **[言語スイッチャー](/docs/components/language-switchers/language-switcher)** | 検索、国旗、RTL サポートを備えた高機能なドロップダウン | | **[言語スイッチャー Pill](/docs/components/language-switchers/language-switcher-pill)** | キーボード操作と RTL サポートに対応した、アニメーション付きのピル型セレクターです | ### ロケールピッカー [#locale-pickers] 地域を選択すると、それに対応するロケールのデフォルト値を取得できます。設定ページやオンボーディングの流れに使用できます。 -| コンポーネント | 説明 | -| ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | +| コンポーネント | 説明 | +| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | **[ロケールピッカー](/docs/components/locale-pickers/locale-picker)** | 通貨、日付、数値、週の開始曜日のデフォルト値を地域から導出する、検索付きの地域ピッカー | ### Phone Input [#phone-input] 国コードセレクターと国番号検索を備えた、国際電話番号の入力コンポーネントです。 -| コンポーネント | 説明 | -| ------------------------------------------------------ | -------------------------------------------------------------------- | +| コンポーネント | 説明 | +| ------------------------------------------------------ | ------------------------------------------------------- | | **[Phone Input](/docs/components/inputs/phone-input)** | 50 か国に対応した、国旗・国番号・検索付きの国セレクター | ### ナビゲーション [#navigation] ローカライゼーションに標準で対応した、高機能なナビゲーションバーです。 -| コンポーネント | 説明 | -| ------------------------------------------------ | ------------------------------------------------------------------------ | +| コンポーネント | 説明 | +| ------------------------------------------------ | ---------------------------------------------------------------------------------------- | | **[NavBar](/docs/components/navigation/navbar)** | 言語セレクター、モバイルメニュー、CTA、GitHub リンクを備えたレスポンシブなナビゲーション | ### 翻訳 [#translation] 原文と訳文を並べて比較・編集できる翻訳ビューです。 -| コンポーネント | 説明 | -| ------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| コンポーネント | 説明 | +| ----------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | **[翻訳ウィジェット](/docs/components/translation/translation-widget)** | 編集可能な訳文パネル、RTL に対応したレイアウト、クレイモーフィズムのスタイル | --- diff --git a/content/docs/components/inputs/meta.ar.json b/content/docs/components/inputs/meta.ar.json index 6795949..a4652dc 100644 --- a/content/docs/components/inputs/meta.ar.json +++ b/content/docs/components/inputs/meta.ar.json @@ -1,7 +1,5 @@ { "title": "حقول الإدخال", "icon": "TextCursorInput", - "pages": [ - "phone-input" - ] + "pages": ["phone-input"] } diff --git a/content/docs/components/inputs/meta.es.json b/content/docs/components/inputs/meta.es.json index d16128c..9b4182e 100644 --- a/content/docs/components/inputs/meta.es.json +++ b/content/docs/components/inputs/meta.es.json @@ -1,7 +1,5 @@ { "title": "Campos de entrada", "icon": "TextCursorInput", - "pages": [ - "phone-input" - ] + "pages": ["phone-input"] } diff --git a/content/docs/components/inputs/meta.ja.json b/content/docs/components/inputs/meta.ja.json index 3ef503e..d7a7473 100644 --- a/content/docs/components/inputs/meta.ja.json +++ b/content/docs/components/inputs/meta.ja.json @@ -1,7 +1,5 @@ { "title": "入力", "icon": "TextCursorInput", - "pages": [ - "phone-input" - ] + "pages": ["phone-input"] } diff --git a/content/docs/components/inputs/phone-input.ar.mdx b/content/docs/components/inputs/phone-input.ar.mdx index 2ef5248..9fe52f7 100644 --- a/content/docs/components/inputs/phone-input.ar.mdx +++ b/content/docs/components/inputs/phone-input.ar.mdx @@ -130,40 +130,40 @@ export function PhoneField() { ## الخصائص [#props] -| الخاصية | النوع | مطلوب | الوصف | -| ------------------- | ------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- | -| `value` | `string` | لا | رقم الهاتف — مرّره للتحكم في المكوّن | -| `defaultValue` | `string` | لا | رقم الهاتف الأولي عند عدم التحكم | -| `onValueChange` | `(phone: string, country: Country) => void` | لا | دالة استدعاء عند تغيّر رقم الهاتف أو الدولة | -| `country` | `string` | لا | رمز الدولة المحدد (ISO 3166-1 alpha-2) — مرّره للتحكم في الدولة | -| `onCountryChange` | `(country: Country) => void` | لا | دالة استدعاء عند تغيّر الدولة المحددة — من القائمة أو من اكتشاف رمز الاتصال | -| `defaultCountry` | `string` | لا | رمز الدولة الأولي عند عدم التحكم (ISO 3166-1 alpha-2، مثل `"US"`، `"GB"`، `"IN"`؛ الافتراضي: `"US"`) | -| `countries` | `Country[]` | لا | الدول المعروضة، بترتيب العرض (الافتراضي: `COUNTRIES`) | -| `placeholder` | `string` | لا | النص النائب | -| `disabled` | `boolean` | لا | تعطيل حقل الإدخال | -| `showFlags` | `boolean` | لا | إظهار علم الدولة بجانب رمز الاتصال (الافتراضي: `true`) | -| `size` | `"sm" \| "default" \| "lg"` | لا | ارتفاع الحقل (الافتراضي: `"default"`) | -| `align` | `"start" \| "end"` | لا | الحافة التي تصطف القائمة معها في الحقل (الافتراضي: `"start"`) | -| `side` | `"top" \| "bottom"` | لا | الجانب المفضل للقائمة؛ يتبدّل عند عدم وجود مساحة (الافتراضي: `"bottom"`) | -| `searchPlaceholder` | `string` | لا | النص النائب لبحث الدول (الافتراضي: `"Search countries..."`) | -| `emptyMessage` | `ReactNode` | لا | يُعرض عندما لا يطابق البحث أي نتيجة (الافتراضي: `"No countries found."`) | -| `labels` | `Partial` | لا | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | -| `displayLocale` | `string` | لا | الإعدادات المحلية لأسماء الدول، مثل `"fr"` (الافتراضي: الأسماء الإنجليزية) | -| `maxHeight` | `number \| string` | لا | أقصى ارتفاع لقائمة الدول القابلة للتمرير (الافتراضي: `"15rem"`) | -| `label` | `string` | لا | تسمية إمكانية الوصول للحقل | -| `className` | `string` | لا | الأصناف الخاصة بالغلاف الجذري | -| `classNames` | `PhoneInputClassNames` | لا | أصناف لكل جزء: `root`، `field`، `trigger`، `input`، `content`، `search`، `list`، `item`، `empty` | +| الخاصية | النوع | مطلوب | الوصف | +| ------------------- | ------------------------------------------- | ----- | ---------------------------------------------------------------------------------------------------- | +| `value` | `string` | لا | رقم الهاتف — مرّره للتحكم في المكوّن | +| `defaultValue` | `string` | لا | رقم الهاتف الأولي عند عدم التحكم | +| `onValueChange` | `(phone: string, country: Country) => void` | لا | دالة استدعاء عند تغيّر رقم الهاتف أو الدولة | +| `country` | `string` | لا | رمز الدولة المحدد (ISO 3166-1 alpha-2) — مرّره للتحكم في الدولة | +| `onCountryChange` | `(country: Country) => void` | لا | دالة استدعاء عند تغيّر الدولة المحددة — من القائمة أو من اكتشاف رمز الاتصال | +| `defaultCountry` | `string` | لا | رمز الدولة الأولي عند عدم التحكم (ISO 3166-1 alpha-2، مثل `"US"`، `"GB"`، `"IN"`؛ الافتراضي: `"US"`) | +| `countries` | `Country[]` | لا | الدول المعروضة، بترتيب العرض (الافتراضي: `COUNTRIES`) | +| `placeholder` | `string` | لا | النص النائب | +| `disabled` | `boolean` | لا | تعطيل حقل الإدخال | +| `showFlags` | `boolean` | لا | إظهار علم الدولة بجانب رمز الاتصال (الافتراضي: `true`) | +| `size` | `"sm" \| "default" \| "lg"` | لا | ارتفاع الحقل (الافتراضي: `"default"`) | +| `align` | `"start" \| "end"` | لا | الحافة التي تصطف القائمة معها في الحقل (الافتراضي: `"start"`) | +| `side` | `"top" \| "bottom"` | لا | الجانب المفضل للقائمة؛ يتبدّل عند عدم وجود مساحة (الافتراضي: `"bottom"`) | +| `searchPlaceholder` | `string` | لا | النص النائب لبحث الدول (الافتراضي: `"Search countries..."`) | +| `emptyMessage` | `ReactNode` | لا | يُعرض عندما لا يطابق البحث أي نتيجة (الافتراضي: `"No countries found."`) | +| `labels` | `Partial` | لا | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | +| `displayLocale` | `string` | لا | الإعدادات المحلية لأسماء الدول، مثل `"fr"` (الافتراضي: الأسماء الإنجليزية) | +| `maxHeight` | `number \| string` | لا | أقصى ارتفاع لقائمة الدول القابلة للتمرير (الافتراضي: `"15rem"`) | +| `label` | `string` | لا | تسمية إمكانية الوصول للحقل | +| `className` | `string` | لا | الأصناف الخاصة بالغلاف الجذري | +| `classNames` | `PhoneInputClassNames` | لا | أصناف لكل جزء: `root`، `field`، `trigger`، `input`، `content`، `search`، `list`، `item`، `empty` | أي خاصية أخرى — `name`، `required`، `autoComplete`، `aria-invalid`، `data-*` — تُمرَّر إلى العنصر الأساسي ``، ويُعاد توجيه المرجع إليه، فيعمل المكوّن داخل نموذج HTML عادي. ضبط `aria-invalid` يجعل الحقل كله أحمر، مطابقًا لـ `Input` في shadcn. ### كائن الدولة [#country-object] -| الخاصية | النوع | الوصف | -| ---------- | -------- | ----------------------------------------------------- | +| الخاصية | النوع | الوصف | +| ---------- | -------- | --------------------------------------------------- | | `code` | `string` | رمز ISO 3166-1 alpha-2 (مثل `"US"`، `"GB"`، `"IN"`) | -| `dialCode` | `string` | رمز الاتصال (مثل `"+1"`، `"+44"`، `"+91"`) | +| `dialCode` | `string` | رمز الاتصال (مثل `"+1"`، `"+44"`، `"+91"`) | | `name` | `string` | اسم الدولة | -| `flag` | `string` | علم الدولة (emoji) | +| `flag` | `string` | علم الدولة (emoji) | ## أمثلة [#examples] @@ -311,28 +311,28 @@ export default function App() { } ``` -| المفتاح | الافتراضي | يُستخدم في | -| ------------------- | ----------------------- | ----------------------------- | -| `trigger` | `"Select country"` | تسمية زر فتح قائمة الدول | -| `searchPlaceholder` | `"Search countries..."` | النص النائب لحقل البحث | -| `searchLabel` | `"Search countries"` | تسمية إمكانية الوصول لحقل البحث | -| `clearSearch` | `"Clear search"` | تسمية إمكانية الوصول لزر المسح | -| `emptyMessage` | `"No countries found."` | يُعرض عند عدم وجود تطابق | +| المفتاح | الافتراضي | يُستخدم في | +| ------------------- | ----------------------- | --------------------------------- | +| `trigger` | `"Select country"` | تسمية زر فتح قائمة الدول | +| `searchPlaceholder` | `"Search countries..."` | النص النائب لحقل البحث | +| `searchLabel` | `"Search countries"` | تسمية إمكانية الوصول لحقل البحث | +| `clearSearch` | `"Clear search"` | تسمية إمكانية الوصول لزر المسح | +| `emptyMessage` | `"No countries found."` | يُعرض عند عدم وجود تطابق | | `listbox` | `"Select country"` | تسمية إمكانية الوصول لقائمة الدول | ## دعم لوحة المفاتيح [#keyboard-support] تتبع قائمة الدول نمط combobox في WAI-ARIA: يبقى التركيز في حقل البحث، الذي يُعرض كـ `role="combobox"`، ويُعلَن عن الدولة المميّزة عبر `aria-activedescendant`. -| المفتاح | الإجراء | -| -------------------------------- | --------------------------------------------------------------------- | -| `Enter`، `Space`، أو النقر | افتح قائمة الدول من زر العلم | -| `ArrowDown` / `ArrowUp` (مغلقة) | افتح مع تمييز أول دولة / آخر دولة | -| `ArrowDown` / `ArrowUp` | انقل التمييز، مع الالتفاف عند الطرفين | -| `Home` / `End` | مميّز أول دولة / آخر دولة | -| `Enter` | اختر الدولة المميّزة؛ ينتقل التركيز إلى حقل الرقم | -| `Escape` | أغلق القائمة وأعد التركيز إلى زر العلم | -| الكتابة | صفِّ حسب الاسم أو الرمز أو رمز الاتصال؛ يبدأ التمييز من الأعلى مجددًا | +| المفتاح | الإجراء | +| ------------------------------- | --------------------------------------------------------------------- | +| `Enter`، `Space`، أو النقر | افتح قائمة الدول من زر العلم | +| `ArrowDown` / `ArrowUp` (مغلقة) | افتح مع تمييز أول دولة / آخر دولة | +| `ArrowDown` / `ArrowUp` | انقل التمييز، مع الالتفاف عند الطرفين | +| `Home` / `End` | مميّز أول دولة / آخر دولة | +| `Enter` | اختر الدولة المميّزة؛ ينتقل التركيز إلى حقل الرقم | +| `Escape` | أغلق القائمة وأعد التركيز إلى زر العلم | +| الكتابة | صفِّ حسب الاسم أو الرمز أو رمز الاتصال؛ يبدأ التمييز من الأعلى مجددًا | يبقى التمييز على الصف الذي ظهر فيه عند فتح القائمة — وتتمرر القائمة أسفله، كالقائمة الأصلية — ولا تتمرر الصفحة نفسها أبدًا. مرّر `maxHeight` لتغيير ارتفاع قائمة الدول قبل أن تبدأ بالتمرير. @@ -352,18 +352,18 @@ export default function App() { يأتي الحقل مع 50 دولة محمّلة مسبقًا. استخدم بحث القائمة المنسدلة للعثور على أي دولة بالاسم أو رمز الاتصال. تشمل القائمة الكاملة: -| الدولة | الرمز | رمز الاتصال | العلم | -| -------------------------------------- | ---- | --------- | ---- | -| الولايات المتحدة | `US` | `+1` | 🇺🇸 | -| المملكة المتحدة | `GB` | `+44` | 🇬🇧 | -| كندا | `CA` | `+1` | 🇨🇦 | -| أستراليا | `AU` | `+61` | 🇦🇺 | -| الهند | `IN` | `+91` | 🇮🇳 | -| ألمانيا | `DE` | `+49` | 🇩🇪 | -| فرنسا | `FR` | `+33` | 🇫🇷 | -| اليابان | `JP` | `+81` | 🇯🇵 | -| البرازيل | `BR` | `+55` | 🇧🇷 | -| كوريا الجنوبية | `KR` | `+82` | 🇰🇷 | +| الدولة | الرمز | رمز الاتصال | العلم | +| ----------------------------------------- | ----- | ----------- | ----- | +| الولايات المتحدة | `US` | `+1` | 🇺🇸 | +| المملكة المتحدة | `GB` | `+44` | 🇬🇧 | +| كندا | `CA` | `+1` | 🇨🇦 | +| أستراليا | `AU` | `+61` | 🇦🇺 | +| الهند | `IN` | `+91` | 🇮🇳 | +| ألمانيا | `DE` | `+49` | 🇩🇪 | +| فرنسا | `FR` | `+33` | 🇫🇷 | +| اليابان | `JP` | `+81` | 🇯🇵 | +| البرازيل | `BR` | `+55` | 🇧🇷 | +| كوريا الجنوبية | `KR` | `+82` | 🇰🇷 | | ...و40 دولة أخرى عبر بحث القائمة المنسدلة | ## الاعتماديات [#dependencies] diff --git a/content/docs/components/inputs/phone-input.es.mdx b/content/docs/components/inputs/phone-input.es.mdx index 2392e47..579f613 100644 --- a/content/docs/components/inputs/phone-input.es.mdx +++ b/content/docs/components/inputs/phone-input.es.mdx @@ -130,40 +130,40 @@ Escribe o pega un número que empiece por `+` y el componente cambiará el país ## Props [#props] -| Prop | Tipo | Obligatorio | Descripción | -| ------------------- | ------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- | -| `value` | `string` | No | Número de teléfono: pásalo para controlar el componente | -| `defaultValue` | `string` | No | Número de teléfono inicial cuando no está controlado | -| `onValueChange` | `(phone: string, country: Country) => void` | No | Callback que se ejecuta cuando cambia el número de teléfono o el país | -| `country` | `string` | No | Código de país seleccionado (ISO 3166-1 alpha-2): pásalo para controlar el país | -| `onCountryChange` | `(country: Country) => void` | No | Callback que se ejecuta cuando cambia el país seleccionado, ya sea desde el menú o por la detección del prefijo | -| `defaultCountry` | `string` | No | Código de país inicial cuando no está controlado (ISO 3166-1 alpha-2, p. ej. `"US"`, `"GB"`, `"IN"`; predeterminado: `"US"`) | -| `countries` | `Country[]` | No | Países ofrecidos, en orden de visualización (predeterminado: `COUNTRIES`) | -| `placeholder` | `string` | No | Texto de marcador de posición | -| `disabled` | `boolean` | No | Desactiva el campo | -| `showFlags` | `boolean` | No | Muestra la bandera del país junto al prefijo telefónico (predeterminado: `true`) | -| `size` | `"sm" \| "default" \| "lg"` | No | Altura del campo (predeterminado: `"default"`) | -| `align` | `"start" \| "end"` | No | Borde del campo con el que se alinea el menú (predeterminado: `"start"`) | -| `side` | `"top" \| "bottom"` | No | Lado preferido del menú; cambia de lado si no hay espacio (predeterminado: `"bottom"`) | -| `searchPlaceholder` | `string` | No | Marcador de posición para la búsqueda de países (predeterminado: `"Search countries..."`) | -| `emptyMessage` | `ReactNode` | No | Se muestra cuando la búsqueda no coincide con nada (predeterminado: `"No countries found."`) | -| `labels` | `Partial` | No | Sustituye el texto de interfaz en inglés integrado (consulta más abajo) | -| `displayLocale` | `string` | No | Configuración regional para los nombres de países, p. ej. `"fr"` (predeterminado: nombres en inglés) | -| `maxHeight` | `number \| string` | No | Altura máxima de la lista de países con desplazamiento (predeterminado: `"15rem"`) | -| `label` | `string` | No | Etiqueta accesible para el campo | -| `className` | `string` | No | Clases para el contenedor raíz | -| `classNames` | `PhoneInputClassNames` | No | Clases por parte: `root`, `field`, `trigger`, `input`, `content`, `search`, `list`, `item`, `empty` | +| Prop | Tipo | Obligatorio | Descripción | +| ------------------- | ------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------- | +| `value` | `string` | No | Número de teléfono: pásalo para controlar el componente | +| `defaultValue` | `string` | No | Número de teléfono inicial cuando no está controlado | +| `onValueChange` | `(phone: string, country: Country) => void` | No | Callback que se ejecuta cuando cambia el número de teléfono o el país | +| `country` | `string` | No | Código de país seleccionado (ISO 3166-1 alpha-2): pásalo para controlar el país | +| `onCountryChange` | `(country: Country) => void` | No | Callback que se ejecuta cuando cambia el país seleccionado, ya sea desde el menú o por la detección del prefijo | +| `defaultCountry` | `string` | No | Código de país inicial cuando no está controlado (ISO 3166-1 alpha-2, p. ej. `"US"`, `"GB"`, `"IN"`; predeterminado: `"US"`) | +| `countries` | `Country[]` | No | Países ofrecidos, en orden de visualización (predeterminado: `COUNTRIES`) | +| `placeholder` | `string` | No | Texto de marcador de posición | +| `disabled` | `boolean` | No | Desactiva el campo | +| `showFlags` | `boolean` | No | Muestra la bandera del país junto al prefijo telefónico (predeterminado: `true`) | +| `size` | `"sm" \| "default" \| "lg"` | No | Altura del campo (predeterminado: `"default"`) | +| `align` | `"start" \| "end"` | No | Borde del campo con el que se alinea el menú (predeterminado: `"start"`) | +| `side` | `"top" \| "bottom"` | No | Lado preferido del menú; cambia de lado si no hay espacio (predeterminado: `"bottom"`) | +| `searchPlaceholder` | `string` | No | Marcador de posición para la búsqueda de países (predeterminado: `"Search countries..."`) | +| `emptyMessage` | `ReactNode` | No | Se muestra cuando la búsqueda no coincide con nada (predeterminado: `"No countries found."`) | +| `labels` | `Partial` | No | Sustituye el texto de interfaz en inglés integrado (consulta más abajo) | +| `displayLocale` | `string` | No | Configuración regional para los nombres de países, p. ej. `"fr"` (predeterminado: nombres en inglés) | +| `maxHeight` | `number \| string` | No | Altura máxima de la lista de países con desplazamiento (predeterminado: `"15rem"`) | +| `label` | `string` | No | Etiqueta accesible para el campo | +| `className` | `string` | No | Clases para el contenedor raíz | +| `classNames` | `PhoneInputClassNames` | No | Clases por parte: `root`, `field`, `trigger`, `input`, `content`, `search`, `list`, `item`, `empty` | Cualquier otra prop — `name`, `required`, `autoComplete`, `aria-invalid`, `data-*` — se pasa al `` subyacente, y la ref se reenvía a él, así que el componente funciona dentro de un formulario HTML normal. Si estableces `aria-invalid`, todo el campo se vuelve rojo, igual que `Input` de shadcn. ### Objeto de país [#country-object] -| Propiedad | Tipo | Descripción | -| ---------- | -------- | ----------------------------------------------------- | +| Propiedad | Tipo | Descripción | +| ---------- | -------- | --------------------------------------------------------- | | `code` | `string` | Código ISO 3166-1 alpha-2 (p. ej. `"US"`, `"GB"`, `"IN"`) | -| `dialCode` | `string` | Prefijo telefónico (p. ej. `"+1"`, `"+44"`, `"+91"`) | -| `name` | `string` | Nombre del país | -| `flag` | `string` | Emoji de bandera | +| `dialCode` | `string` | Prefijo telefónico (p. ej. `"+1"`, `"+44"`, `"+91"`) | +| `name` | `string` | Nombre del país | +| `flag` | `string` | Emoji de bandera | ## Ejemplos [#examples] @@ -311,28 +311,28 @@ export default function App() { } ``` -| Clave | Predeterminado | Se usa para | -| ------------------- | ----------------------- | ----------------------------- | -| `trigger` | `"Select country"` | Etiqueta del disparador de país | -| `searchPlaceholder` | `"Search countries..."` | Marcador de posición del campo de búsqueda | -| `searchLabel` | `"Search countries"` | Etiqueta accesible del campo de búsqueda | -| `clearSearch` | `"Clear search"` | Etiqueta accesible del botón de borrar | -| `emptyMessage` | `"No countries found."` | Se muestra cuando nada coincide | -| `listbox` | `"Select country"` | Etiqueta accesible de la lista de países | +| Clave | Predeterminado | Se usa para | +| ------------------- | ----------------------- | ------------------------------------------ | +| `trigger` | `"Select country"` | Etiqueta del disparador de país | +| `searchPlaceholder` | `"Search countries..."` | Marcador de posición del campo de búsqueda | +| `searchLabel` | `"Search countries"` | Etiqueta accesible del campo de búsqueda | +| `clearSearch` | `"Clear search"` | Etiqueta accesible del botón de borrar | +| `emptyMessage` | `"No countries found."` | Se muestra cuando nada coincide | +| `listbox` | `"Select country"` | Etiqueta accesible de la lista de países | ## Soporte de teclado [#keyboard-support] El menú de países sigue el patrón combobox de WAI-ARIA: el foco permanece en el campo de búsqueda, que se expone como `role="combobox"`, y el país resaltado se anuncia mediante `aria-activedescendant`. -| Clave | Acción | -| -------------------------------- | --------------------------------------------------------------------- | -| `Enter`, `Space` o clic | Abre el menú de países desde el disparador de bandera | -| `ArrowDown` / `ArrowUp` (cerrado) | Abre con el primer / último país resaltado | -| `ArrowDown` / `ArrowUp` | Mueve el resaltado, dando la vuelta en ambos extremos | -| `Home` / `End` | Resalta el primer / último país | -| `Enter` | Selecciona el país resaltado; el foco pasa al campo de número | -| `Escape` | Cierra el menú y devuelve el foco al disparador de bandera | -| Escritura | Filtra por nombre, código o prefijo telefónico; el resaltado vuelve al principio | +| Clave | Acción | +| --------------------------------- | -------------------------------------------------------------------------------- | +| `Enter`, `Space` o clic | Abre el menú de países desde el disparador de bandera | +| `ArrowDown` / `ArrowUp` (cerrado) | Abre con el primer / último país resaltado | +| `ArrowDown` / `ArrowUp` | Mueve el resaltado, dando la vuelta en ambos extremos | +| `Home` / `End` | Resalta el primer / último país | +| `Enter` | Selecciona el país resaltado; el foco pasa al campo de número | +| `Escape` | Cierra el menú y devuelve el foco al disparador de bandera | +| Escritura | Filtra por nombre, código o prefijo telefónico; el resaltado vuelve al principio | El resaltado se mantiene en la fila en la que apareció al abrir el menú: la lista se desplaza por debajo, como un menú nativo, y la página nunca se desplaza. Pasa `maxHeight` para cambiar la altura de la lista de países antes de que empiece a desplazarse. @@ -352,18 +352,18 @@ El resaltado se mantiene en la fila en la que apareció al abrir el menú: la li El campo incluye 50 países precargados. Usa la búsqueda del desplegable para encontrar cualquier país por nombre o prefijo telefónico. La lista completa incluye: -| País | Código | Prefijo telefónico | Bandera | -| -------------------------------------- | ---- | --------- | ---- | -| Estados Unidos | `US` | `+1` | 🇺🇸 | -| Reino Unido | `GB` | `+44` | 🇬🇧 | -| Canadá | `CA` | `+1` | 🇨🇦 | -| Australia | `AU` | `+61` | 🇦🇺 | -| India | `IN` | `+91` | 🇮🇳 | -| Alemania | `DE` | `+49` | 🇩🇪 | -| Francia | `FR` | `+33` | 🇫🇷 | -| Japón | `JP` | `+81` | 🇯🇵 | -| Brasil | `BR` | `+55` | 🇧🇷 | -| Corea del Sur | `KR` | `+82` | 🇰🇷 | +| País | Código | Prefijo telefónico | Bandera | +| ------------------------------------------------ | ------ | ------------------ | ------- | +| Estados Unidos | `US` | `+1` | 🇺🇸 | +| Reino Unido | `GB` | `+44` | 🇬🇧 | +| Canadá | `CA` | `+1` | 🇨🇦 | +| Australia | `AU` | `+61` | 🇦🇺 | +| India | `IN` | `+91` | 🇮🇳 | +| Alemania | `DE` | `+49` | 🇩🇪 | +| Francia | `FR` | `+33` | 🇫🇷 | +| Japón | `JP` | `+81` | 🇯🇵 | +| Brasil | `BR` | `+55` | 🇧🇷 | +| Corea del Sur | `KR` | `+82` | 🇰🇷 | | ...y 40 más mediante la búsqueda del desplegable | ## Dependencias [#dependencies] diff --git a/content/docs/components/inputs/phone-input.ja.mdx b/content/docs/components/inputs/phone-input.ja.mdx index 63ab05d..ee37792 100644 --- a/content/docs/components/inputs/phone-input.ja.mdx +++ b/content/docs/components/inputs/phone-input.ja.mdx @@ -130,39 +130,39 @@ export function PhoneField() { ## Props [#props] -| Prop | 型 | 必須 | 説明 | -| ------------------- | ------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- | -| `value` | `string` | いいえ | 電話番号。コンポーネントを制御するにはこの値を渡します | -| `defaultValue` | `string` | いいえ | 非制御時の初期電話番号 | -| `onValueChange` | `(phone: string, country: Country) => void` | いいえ | 電話番号または国が変更されたときのコールバック | -| `country` | `string` | いいえ | 選択中の国コード（ISO 3166-1 alpha-2）。国を制御するにはこの値を渡します | -| `onCountryChange` | `(country: Country) => void` | いいえ | 選択中の国が変更されたときのコールバック（メニューからの選択と国番号による自動検出の両方を含みます） | -| `defaultCountry` | `string` | いいえ | 非制御時の初期国コード（ISO 3166-1 alpha-2。例: `"US"`、`"GB"`、`"IN"`。デフォルト: `"US"`） | -| `countries` | `Country[]` | いいえ | 提供する国を表示順で指定します（デフォルト: `COUNTRIES`） | -| `placeholder` | `string` | いいえ | プレースホルダーテキスト | -| `disabled` | `boolean` | いいえ | 入力を無効にします | -| `showFlags` | `boolean` | いいえ | 国番号の横に国旗を表示します（デフォルト: `true`） | -| `size` | `"sm" \| "default" \| "lg"` | いいえ | フィールドの高さ（デフォルト: `"default"`） | -| `align` | `"start" \| "end"` | いいえ | メニューを揃えるフィールドの辺（デフォルト: `"start"`） | -| `side` | `"top" \| "bottom"` | いいえ | 優先するメニューの表示側。スペースがない場合は反転します（デフォルト: `"bottom"`） | -| `searchPlaceholder` | `string` | いいえ | 国の検索欄のプレースホルダー（デフォルト: `"Search countries..."`） | -| `emptyMessage` | `ReactNode` | いいえ | 検索に一致する項目がない場合に表示されます（デフォルト: `"No countries found."`） | -| `labels` | `Partial` | いいえ | 組み込みの英語 UI テキストを上書きします（下記参照） | -| `displayLocale` | `string` | いいえ | 国名のロケール。例: `"fr"`（デフォルト: 英語名） | -| `maxHeight` | `number \| string` | いいえ | スクロールする国一覧の最大の高さ（デフォルト: `"15rem"`） | -| `label` | `string` | いいえ | 入力欄のアクセシブルなラベル | -| `className` | `string` | いいえ | ルートラッパーのクラス | -| `classNames` | `PhoneInputClassNames` | いいえ | パーツごとのクラス: `root`、`field`、`trigger`、`input`、`content`、`search`、`list`、`item`、`empty` | +| Prop | 型 | 必須 | 説明 | +| ------------------- | ------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------- | +| `value` | `string` | いいえ | 電話番号。コンポーネントを制御するにはこの値を渡します | +| `defaultValue` | `string` | いいえ | 非制御時の初期電話番号 | +| `onValueChange` | `(phone: string, country: Country) => void` | いいえ | 電話番号または国が変更されたときのコールバック | +| `country` | `string` | いいえ | 選択中の国コード（ISO 3166-1 alpha-2）。国を制御するにはこの値を渡します | +| `onCountryChange` | `(country: Country) => void` | いいえ | 選択中の国が変更されたときのコールバック（メニューからの選択と国番号による自動検出の両方を含みます） | +| `defaultCountry` | `string` | いいえ | 非制御時の初期国コード（ISO 3166-1 alpha-2。例: `"US"`、`"GB"`、`"IN"`。デフォルト: `"US"`） | +| `countries` | `Country[]` | いいえ | 提供する国を表示順で指定します（デフォルト: `COUNTRIES`） | +| `placeholder` | `string` | いいえ | プレースホルダーテキスト | +| `disabled` | `boolean` | いいえ | 入力を無効にします | +| `showFlags` | `boolean` | いいえ | 国番号の横に国旗を表示します（デフォルト: `true`） | +| `size` | `"sm" \| "default" \| "lg"` | いいえ | フィールドの高さ（デフォルト: `"default"`） | +| `align` | `"start" \| "end"` | いいえ | メニューを揃えるフィールドの辺（デフォルト: `"start"`） | +| `side` | `"top" \| "bottom"` | いいえ | 優先するメニューの表示側。スペースがない場合は反転します（デフォルト: `"bottom"`） | +| `searchPlaceholder` | `string` | いいえ | 国の検索欄のプレースホルダー（デフォルト: `"Search countries..."`） | +| `emptyMessage` | `ReactNode` | いいえ | 検索に一致する項目がない場合に表示されます（デフォルト: `"No countries found."`） | +| `labels` | `Partial` | いいえ | 組み込みの英語 UI テキストを上書きします（下記参照） | +| `displayLocale` | `string` | いいえ | 国名のロケール。例: `"fr"`（デフォルト: 英語名） | +| `maxHeight` | `number \| string` | いいえ | スクロールする国一覧の最大の高さ（デフォルト: `"15rem"`） | +| `label` | `string` | いいえ | 入力欄のアクセシブルなラベル | +| `className` | `string` | いいえ | ルートラッパーのクラス | +| `classNames` | `PhoneInputClassNames` | いいえ | パーツごとのクラス: `root`、`field`、`trigger`、`input`、`content`、`search`、`list`、`item`、`empty` | それ以外の prop（`name`、`required`、`autoComplete`、`aria-invalid`、`data-*`）は、内部の `` にスプレッドされ、ref も転送されます。 そのため、プレーンな HTML フォーム内でも動作します。 `aria-invalid` を設定するとフィールド全体が赤くなり、shadcn の `Input` と同じ挙動になります。 ### Country オブジェクト [#country-object] -| プロパティ | 型 | 説明 | -| ---------- | -------- | ----------------------------------------------------- | +| プロパティ | 型 | 説明 | +| ---------- | -------- | ------------------------------------------------------- | | `code` | `string` | ISO 3166-1 alpha-2 コード（例: `"US"`、`"GB"`、`"IN"`） | -| `dialCode` | `string` | 国番号（例: `"+1"`、`"+44"`、`"+91"`） | -| `name` | `string` | 国名 | +| `dialCode` | `string` | 国番号（例: `"+1"`、`"+44"`、`"+91"`） | +| `name` | `string` | 国名 | | `flag` | `string` | 国旗の絵文字 | ## 使用例 [#examples] @@ -311,28 +311,28 @@ export default function App() { } ``` -| キー | デフォルト | 用途 | -| ------------------- | ----------------------- | ----------------------------- | -| `trigger` | `"Select country"` | 国のトリガーラベル | -| `searchPlaceholder` | `"Search countries..."` | 検索欄のプレースホルダー | -| `searchLabel` | `"Search countries"` | 検索欄のアクセシブルなラベル | +| キー | デフォルト | 用途 | +| ------------------- | ----------------------- | ---------------------------------- | +| `trigger` | `"Select country"` | 国のトリガーラベル | +| `searchPlaceholder` | `"Search countries..."` | 検索欄のプレースホルダー | +| `searchLabel` | `"Search countries"` | 検索欄のアクセシブルなラベル | | `clearSearch` | `"Clear search"` | クリアボタンのアクセシブルなラベル | -| `emptyMessage` | `"No countries found."` | 一致する項目がない場合に表示 | -| `listbox` | `"Select country"` | 国一覧のアクセシブルなラベル | +| `emptyMessage` | `"No countries found."` | 一致する項目がない場合に表示 | +| `listbox` | `"Select country"` | 国一覧のアクセシブルなラベル | ## キーボード操作 [#keyboard-support] 国メニューは WAI-ARIA のコンボボックスパターンに従います。 フォーカスは検索欄に留まり、検索欄は `role="combobox"` として公開されます。 ハイライトされた国は `aria-activedescendant` を通じて読み上げられます。 -| キー | 操作 | -| -------------------------------- | --------------------------------------------------------------------- | -| `Enter`、`Space`、またはクリック | 国旗のトリガーから国メニューを開きます | -| `ArrowDown` / `ArrowUp`（閉じている状態） | 最初または最後の国がハイライトされた状態で開きます | -| `ArrowDown` / `ArrowUp` | ハイライトを移動します。両端で循環します | -| `Home` / `End` | 最初または最後の国をハイライトします | -| `Enter` | ハイライトされた国を選択します。フォーカスは番号欄に移動します | -| `Escape` | メニューを閉じ、フォーカスを国旗のトリガーに戻します | -| 入力 | 名前、コード、国番号で絞り込みます。ハイライトは先頭に戻ります | +| キー | 操作 | +| ----------------------------------------- | -------------------------------------------------------------- | +| `Enter`、`Space`、またはクリック | 国旗のトリガーから国メニューを開きます | +| `ArrowDown` / `ArrowUp`（閉じている状態） | 最初または最後の国がハイライトされた状態で開きます | +| `ArrowDown` / `ArrowUp` | ハイライトを移動します。両端で循環します | +| `Home` / `End` | 最初または最後の国をハイライトします | +| `Enter` | ハイライトされた国を選択します。フォーカスは番号欄に移動します | +| `Escape` | メニューを閉じ、フォーカスを国旗のトリガーに戻します | +| 入力 | 名前、コード、国番号で絞り込みます。ハイライトは先頭に戻ります | ハイライトは、メニューを開いたときに表示されていた行に留まります。 ネイティブのメニューのように、一覧はその下でスクロールします。 ページ自体はスクロールしません。 `maxHeight` を渡すと、スクロールが始まるまでの国一覧の高さを変更できます。 @@ -352,18 +352,18 @@ export default function App() { この入力欄には 50 か国があらかじめ読み込まれています。ドロップダウン検索を使うと、国名または国番号で任意の国を探せます。対象の国は次のとおりです: -| 国 | コード | 国番号 | 国旗 | -| -------------------------------------- | ---- | --------- | ---- | -| アメリカ合衆国 | `US` | `+1` | 🇺🇸 | -| イギリス | `GB` | `+44` | 🇬🇧 | -| カナダ | `CA` | `+1` | 🇨🇦 | -| オーストラリア | `AU` | `+61` | 🇦🇺 | -| インド | `IN` | `+91` | 🇮🇳 | -| ドイツ | `DE` | `+49` | 🇩🇪 | -| フランス | `FR` | `+33` | 🇫🇷 | -| 日本 | `JP` | `+81` | 🇯🇵 | -| ブラジル | `BR` | `+55` | 🇧🇷 | -| 韓国 | `KR` | `+82` | 🇰🇷 | +| 国 | コード | 国番号 | 国旗 | +| ------------------------------------------------------ | ------ | ------ | ---- | +| アメリカ合衆国 | `US` | `+1` | 🇺🇸 | +| イギリス | `GB` | `+44` | 🇬🇧 | +| カナダ | `CA` | `+1` | 🇨🇦 | +| オーストラリア | `AU` | `+61` | 🇦🇺 | +| インド | `IN` | `+91` | 🇮🇳 | +| ドイツ | `DE` | `+49` | 🇩🇪 | +| フランス | `FR` | `+33` | 🇫🇷 | +| 日本 | `JP` | `+81` | 🇯🇵 | +| ブラジル | `BR` | `+55` | 🇧🇷 | +| 韓国 | `KR` | `+82` | 🇰🇷 | | ……ほか 40 か国はドロップダウン検索からご覧いただけます | ## 依存関係 [#dependencies] diff --git a/content/docs/components/language-switchers/language-switcher-pill.ar.mdx b/content/docs/components/language-switchers/language-switcher-pill.ar.mdx index 89a2a7a..4965357 100644 --- a/content/docs/components/language-switchers/language-switcher-pill.ar.mdx +++ b/content/docs/components/language-switchers/language-switcher-pill.ar.mdx @@ -115,19 +115,19 @@ export function LocalePill() { ## الخصائص [#props] -| الخاصية | النوع | مطلوب | الوصف | -| ---------------- | -------------------------------- | -------- | ----------------------------------------------------------------------------- | -| `locales` | `Locale[]` | نعم | مصفوفة الإعدادات المحلية المتاحة — `code` فقط مطلوب | -| `locale` | `string` | لا | رمز الإعدادات المحلية المحدد — مرّره للتحكم في المكوّن | -| `defaultLocale` | `string` | لا | رمز الإعدادات المحلية المحدد الأولي عند عدم التحكم (الافتراضي: رمز أول إعدادات محلية) | -| `onLocaleChange` | `(code: string) => void` | لا | دالة استدعاء عند تغيّر الإعدادات المحلية المحددة | -| `variant` | `"default" \| "outline"` | لا | مسار مقسّم خافت أو مسار بإطار (الافتراضي: `"default"`) | -| `size` | `"sm" \| "default" \| "lg"` | لا | حجم الكبسولة (الافتراضي: `"default"`) | -| `showFlags` | `boolean` | لا | إظهار علم emoji لكل إعدادات محلية قبل تسميتها (الافتراضي: `false`) | -| `disabled` | `boolean` | لا | تعطيل كل الكبسولات | -| `aria-label` | `string` | لا | تسمية إمكانية الوصول لمجموعة الأزرار (الافتراضي: `"Select language"`) | -| `classNames` | `LanguageSwitcherPillClassNames` | لا | تجاوزات الأصناف لكل جزء — انظر أدناه | -| `className` | `string` | لا | أصناف CSS إضافية لحاوية الكبسولات | +| الخاصية | النوع | مطلوب | الوصف | +| ---------------- | -------------------------------- | ----- | ------------------------------------------------------------------------------------- | +| `locales` | `Locale[]` | نعم | مصفوفة الإعدادات المحلية المتاحة — `code` فقط مطلوب | +| `locale` | `string` | لا | رمز الإعدادات المحلية المحدد — مرّره للتحكم في المكوّن | +| `defaultLocale` | `string` | لا | رمز الإعدادات المحلية المحدد الأولي عند عدم التحكم (الافتراضي: رمز أول إعدادات محلية) | +| `onLocaleChange` | `(code: string) => void` | لا | دالة استدعاء عند تغيّر الإعدادات المحلية المحددة | +| `variant` | `"default" \| "outline"` | لا | مسار مقسّم خافت أو مسار بإطار (الافتراضي: `"default"`) | +| `size` | `"sm" \| "default" \| "lg"` | لا | حجم الكبسولة (الافتراضي: `"default"`) | +| `showFlags` | `boolean` | لا | إظهار علم emoji لكل إعدادات محلية قبل تسميتها (الافتراضي: `false`) | +| `disabled` | `boolean` | لا | تعطيل كل الكبسولات | +| `aria-label` | `string` | لا | تسمية إمكانية الوصول لمجموعة الأزرار (الافتراضي: `"Select language"`) | +| `classNames` | `LanguageSwitcherPillClassNames` | لا | تجاوزات الأصناف لكل جزء — انظر أدناه | +| `className` | `string` | لا | أصناف CSS إضافية لحاوية الكبسولات | تُمرَّر خصائص `div` المتبقية إلى العنصر الجذري. @@ -135,13 +135,13 @@ export function LocalePill() { يأخذ كل جزء أصنافه الخاصة، وتُدمج بعد القيم الافتراضية، فتستطيع إعادة تنسيق جزء واحد دون تعديل المكوّن نفسه: -| الفتحة | العنصر | -| ------------ | --------------------------------------------- | -| `root` | المسار الذي يحوي كل الكبسولات | -| `item` | كل كبسولة إعدادات محلية | -| `activeItem` | الكبسولة المحددة فقط | +| الفتحة | العنصر | +| ------------ | ----------------------------------------- | +| `root` | المسار الذي يحوي كل الكبسولات | +| `item` | كل كبسولة إعدادات محلية | +| `activeItem` | الكبسولة المحددة فقط | | `indicator` | المؤشر المتحرك بنظام الزنبرك خلف الكبسولة | -| `flag` | العلم المعروض عند ضبط `showFlags` | +| `flag` | العلم المعروض عند ضبط `showFlags` | ```tsx void` | No | Callback que se ejecuta cuando cambia la configuración regional seleccionada | -| `variant` | `"default" \| "outline"` | No | Riel segmentado sin borde o con borde (predeterminado: `"default"`) | -| `size` | `"sm" \| "default" \| "lg"` | No | Tamaño de la píldora (predeterminado: `"default"`) | -| `showFlags` | `boolean` | No | Muestra el emoji de bandera de cada configuración regional antes de su etiqueta (predeterminado: `false`) | -| `disabled` | `boolean` | No | Desactiva todas las píldoras | -| `aria-label` | `string` | No | Etiqueta accesible del grupo de radio (predeterminado: `"Select language"`) | -| `classNames` | `LanguageSwitcherPillClassNames` | No | Sustituciones de clases por parte; consulta más abajo | -| `className` | `string` | No | Clases CSS adicionales para el contenedor de píldoras | +| Prop | Tipo | Obligatorio | Descripción | +| ---------------- | -------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `locales` | `Locale[]` | Sí | Array de configuraciones regionales disponibles; solo `code` es obligatorio | +| `locale` | `string` | No | Código de configuración regional seleccionado: pásalo para controlar el componente | +| `defaultLocale` | `string` | No | Código de configuración regional inicial cuando no está controlado (predeterminado: código de la primera configuración regional) | +| `onLocaleChange` | `(code: string) => void` | No | Callback que se ejecuta cuando cambia la configuración regional seleccionada | +| `variant` | `"default" \| "outline"` | No | Riel segmentado sin borde o con borde (predeterminado: `"default"`) | +| `size` | `"sm" \| "default" \| "lg"` | No | Tamaño de la píldora (predeterminado: `"default"`) | +| `showFlags` | `boolean` | No | Muestra el emoji de bandera de cada configuración regional antes de su etiqueta (predeterminado: `false`) | +| `disabled` | `boolean` | No | Desactiva todas las píldoras | +| `aria-label` | `string` | No | Etiqueta accesible del grupo de radio (predeterminado: `"Select language"`) | +| `classNames` | `LanguageSwitcherPillClassNames` | No | Sustituciones de clases por parte; consulta más abajo | +| `className` | `string` | No | Clases CSS adicionales para el contenedor de píldoras | El resto de las props de `div` se reenvían al elemento raíz. @@ -135,13 +135,13 @@ El resto de las props de `div` se reenvían al elemento raíz. Cada parte admite sus propias clases, que se combinan después de los valores predeterminados, para que puedas cambiar el estilo de una pieza sin bifurcar el componente: -| Slot | Elemento | -| ------------ | --------------------------------------------- | -| `root` | El riel que contiene todas las píldoras | -| `item` | Cada píldora de configuración regional | -| `activeItem` | Solo la píldora seleccionada | +| Slot | Elemento | +| ------------ | ---------------------------------------------------------- | +| `root` | El riel que contiene todas las píldoras | +| `item` | Cada píldora de configuración regional | +| `activeItem` | Solo la píldora seleccionada | | `indicator` | El indicador con animación de resorte detrás de la píldora | -| `flag` | La bandera que se muestra cuando `showFlags` está definido | +| `flag` | La bandera que se muestra cuando `showFlags` está definido | ```tsx void` | いいえ | 選択中のロケールが変更されたときのコールバック | -| `variant` | `"default" \| "outline"` | いいえ | 控えめなセグメント型トラックまたは枠付きトラック（デフォルト: `"default"`） | -| `size` | `"sm" \| "default" \| "lg"` | いいえ | Pill のサイズ（デフォルト: `"default"`） | -| `showFlags` | `boolean` | いいえ | 各ロケールのラベルの前に国旗の絵文字を表示します（デフォルト: `false`） | -| `disabled` | `boolean` | いいえ | すべての Pill を無効にします | -| `aria-label` | `string` | いいえ | ラジオグループのアクセシブルなラベル（デフォルト: `"Select language"`） | -| `classNames` | `LanguageSwitcherPillClassNames` | いいえ | パーツごとのクラス上書き。詳しくは下記を参照してください | -| `className` | `string` | いいえ | Pill コンテナーに追加する CSS クラス | +| Prop | 型 | 必須 | 説明 | +| ---------------- | -------------------------------- | ------ | --------------------------------------------------------------------------- | +| `locales` | `Locale[]` | はい | 利用可能なロケールの配列です。必須なのは `code` のみです | +| `locale` | `string` | いいえ | 選択中のロケールコード。コンポーネントを制御するにはこの値を渡します | +| `defaultLocale` | `string` | いいえ | 非制御時の初期選択ロケールコード（デフォルト: 最初のロケールのコード） | +| `onLocaleChange` | `(code: string) => void` | いいえ | 選択中のロケールが変更されたときのコールバック | +| `variant` | `"default" \| "outline"` | いいえ | 控えめなセグメント型トラックまたは枠付きトラック（デフォルト: `"default"`） | +| `size` | `"sm" \| "default" \| "lg"` | いいえ | Pill のサイズ（デフォルト: `"default"`） | +| `showFlags` | `boolean` | いいえ | 各ロケールのラベルの前に国旗の絵文字を表示します（デフォルト: `false`） | +| `disabled` | `boolean` | いいえ | すべての Pill を無効にします | +| `aria-label` | `string` | いいえ | ラジオグループのアクセシブルなラベル（デフォルト: `"Select language"`） | +| `classNames` | `LanguageSwitcherPillClassNames` | いいえ | パーツごとのクラス上書き。詳しくは下記を参照してください | +| `className` | `string` | いいえ | Pill コンテナーに追加する CSS クラス | 残りの `div` props はルート要素に転送されます。 @@ -135,13 +135,13 @@ export function LocalePill() { 各パーツは独自のクラスを指定でき、デフォルトのクラスの後にマージされます。 そのため、コンポーネントをフォークしなくても、一部分だけスタイルを変更できます: -| スロット | 要素 | -| ------------ | --------------------------------------------- | -| `root` | すべての Pill を保持するトラック | -| `item` | 各ロケールの Pill | -| `activeItem` | 選択中の Pill のみ | +| スロット | 要素 | +| ------------ | --------------------------------------------------------- | +| `root` | すべての Pill を保持するトラック | +| `item` | 各ロケールの Pill | +| `activeItem` | 選択中の Pill のみ | | `indicator` | Pill の背後にあるスプリングアニメーションのインジケーター | -| `flag` | `showFlags` が設定されているときに表示される国旗 | +| `flag` | `showFlags` が設定されているときに表示される国旗 | ```tsx void` | لا | دالة استدعاء عند تغيّر الإعدادات المحلية | -| `label` | `"native" \| "english"` | لا | عرض التسميات باللغة الأصلية أو الإنجليزية (الافتراضي: `"english"`) | -| `showFlags` | `boolean` | لا | إظهار أعلام emoji (الافتراضي: `false`) | -| `maxHeight` | `number \| string` | لا | أقصى ارتفاع لقائمة الخيارات القابلة للتمرير (الافتراضي: `"15rem"`) | -| `showCode` | `boolean` | لا | إظهار رمز الإعدادات المحلية بجانب كل خيار (الافتراضي: `false`) | -| `variant` | `"outline" \| "ghost" \| "secondary"` | لا | نمط الزر المُشغّل (الافتراضي: `"outline"`) | -| `size` | `"sm" \| "default" \| "lg"` | لا | حجم الزر المُشغّل (الافتراضي: `"default"`) | -| `align` | `"start" \| "end"` | لا | الحافة التي تصطف القائمة معها في الزر المُشغّل (الافتراضي: `"start"`) | -| `side` | `"top" \| "bottom"` | لا | الجانب المفضل للقائمة؛ يتبدّل عند عدم وجود مساحة (الافتراضي: `"bottom"`) | -| `searchable` | `boolean` | لا | إظهار حقل البحث (الافتراضي: `true`) | -| `searchPlaceholder` | `string` | لا | النص النائب للبحث (الافتراضي: `"Search languages..."`) | -| `emptyMessage` | `ReactNode` | لا | يُعرض عندما لا يطابق البحث أي نتيجة (الافتراضي: `"No languages found."`) | -| `labels` | `Partial` | لا | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | -| `disabled` | `boolean` | لا | تعطيل الزر المُشغّل | -| `renderOption` | `(locale, state) => ReactNode` | لا | استبدال محتوى كل صف خيار؛ يحوي `state` على `selected` و`active` و`label` و`flag` | -| `classNames` | `LanguageSwitcherClassNames` | لا | أصناف لكل جزء: `trigger`، `content`، `search`، `list`، `item`، `empty` | -| `className` | `string` | لا | أصناف CSS إضافية على الجذر | +| الخاصية | النوع | مطلوب | الوصف | +| ------------------- | ------------------------------------- | ----- | -------------------------------------------------------------------------------- | +| `locales` | `Locale[]` | نعم | مصفوفة الإعدادات المحلية المتاحة — `code` فقط مطلوب | +| `value` | `string` | لا | رمز الإعدادات المحلية المحدد — مرّره للتحكم في المكوّن | +| `defaultValue` | `string` | لا | رمز الإعدادات المحلية المحدد الأولي (الافتراضي: رمز أول إعدادات محلية) | +| `onValueChange` | `(code: string) => void` | لا | دالة استدعاء عند تغيّر الإعدادات المحلية | +| `label` | `"native" \| "english"` | لا | عرض التسميات باللغة الأصلية أو الإنجليزية (الافتراضي: `"english"`) | +| `showFlags` | `boolean` | لا | إظهار أعلام emoji (الافتراضي: `false`) | +| `maxHeight` | `number \| string` | لا | أقصى ارتفاع لقائمة الخيارات القابلة للتمرير (الافتراضي: `"15rem"`) | +| `showCode` | `boolean` | لا | إظهار رمز الإعدادات المحلية بجانب كل خيار (الافتراضي: `false`) | +| `variant` | `"outline" \| "ghost" \| "secondary"` | لا | نمط الزر المُشغّل (الافتراضي: `"outline"`) | +| `size` | `"sm" \| "default" \| "lg"` | لا | حجم الزر المُشغّل (الافتراضي: `"default"`) | +| `align` | `"start" \| "end"` | لا | الحافة التي تصطف القائمة معها في الزر المُشغّل (الافتراضي: `"start"`) | +| `side` | `"top" \| "bottom"` | لا | الجانب المفضل للقائمة؛ يتبدّل عند عدم وجود مساحة (الافتراضي: `"bottom"`) | +| `searchable` | `boolean` | لا | إظهار حقل البحث (الافتراضي: `true`) | +| `searchPlaceholder` | `string` | لا | النص النائب للبحث (الافتراضي: `"Search languages..."`) | +| `emptyMessage` | `ReactNode` | لا | يُعرض عندما لا يطابق البحث أي نتيجة (الافتراضي: `"No languages found."`) | +| `labels` | `Partial` | لا | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | +| `disabled` | `boolean` | لا | تعطيل الزر المُشغّل | +| `renderOption` | `(locale, state) => ReactNode` | لا | استبدال محتوى كل صف خيار؛ يحوي `state` على `selected` و`active` و`label` و`flag` | +| `classNames` | `LanguageSwitcherClassNames` | لا | أصناف لكل جزء: `trigger`، `content`، `search`، `list`، `item`، `empty` | +| `className` | `string` | لا | أصناف CSS إضافية على الجذر | ### كائن الإعدادات المحلية [#locale-object] -| الخاصية | النوع | الوصف | -| -------- | --------- | -------------------------------------------------------------------------- | -| `code` | `string` | رمز ISO 639-1 / BCP 47 (مثل `"en"`، `"fr-FR"`، `"ar-SA"`) — **مطلوب** | -| `label` | `string` | تجاوز اسم العرض (يُحدَّد تلقائيًا من الجدول المدمج عند الحذف) | -| `flag` | `string` | تجاوز علم emoji (يُكتشف تلقائيًا من الرمز عند الحذف) | -| `rtl` | `boolean` | تجاوز RTL (يُكتشف تلقائيًا من الرمز عند الحذف) | +| الخاصية | النوع | الوصف | +| ------- | --------- | --------------------------------------------------------------------- | +| `code` | `string` | رمز ISO 639-1 / BCP 47 (مثل `"en"`، `"fr-FR"`، `"ar-SA"`) — **مطلوب** | +| `label` | `string` | تجاوز اسم العرض (يُحدَّد تلقائيًا من الجدول المدمج عند الحذف) | +| `flag` | `string` | تجاوز علم emoji (يُكتشف تلقائيًا من الرمز عند الحذف) | +| `rtl` | `boolean` | تجاوز RTL (يُكتشف تلقائيًا من الرمز عند الحذف) | ## أمثلة [#examples] @@ -295,28 +295,28 @@ export default function App() { } ``` -| المفتاح | الافتراضي | يُستخدم في | -| ------------------- | --------------------------------------- | ----------------------------- | -| `searchPlaceholder` | `"Search languages..."` | النص النائب لحقل البحث | -| `searchLabel` | `"Search languages"` | تسمية إمكانية الوصول لحقل البحث | -| `clearSearch` | `"Clear search"` | تسمية إمكانية الوصول لزر المسح | -| `emptyMessage` | `"No languages found."` | يُعرض عند عدم وجود تطابق | -| `listbox` | `"Select language"` | تسمية إمكانية الوصول لقائمة الخيارات | -| `current` | `(name) => "Current language: " + name` | تسمية إمكانية الوصول للزر المُشغّل | +| المفتاح | الافتراضي | يُستخدم في | +| ------------------- | --------------------------------------- | ------------------------------------ | +| `searchPlaceholder` | `"Search languages..."` | النص النائب لحقل البحث | +| `searchLabel` | `"Search languages"` | تسمية إمكانية الوصول لحقل البحث | +| `clearSearch` | `"Clear search"` | تسمية إمكانية الوصول لزر المسح | +| `emptyMessage` | `"No languages found."` | يُعرض عند عدم وجود تطابق | +| `listbox` | `"Select language"` | تسمية إمكانية الوصول لقائمة الخيارات | +| `current` | `(name) => "Current language: " + name` | تسمية إمكانية الوصول للزر المُشغّل | ## دعم لوحة المفاتيح [#keyboard-support] تتبع النافذة المنبثقة نمط combobox في WAI-ARIA: يبقى التركيز في حقل البحث، الذي يُعرض كـ `role="combobox"`، ويُعلَن عن الخيار المميّز عبر `aria-activedescendant`. -| المفتاح | الإجراء | -| -------------------------------- | ------------------------------------------------------------- | -| `Enter`، `Space`، أو النقر | افتح النافذة المنبثقة من الزر المُشغّل | -| `ArrowDown` / `ArrowUp` (مغلقة) | افتح مع تمييز أول إعدادات محلية / آخرها | -| `ArrowDown` / `ArrowUp` | انقل التمييز، مع الالتفاف عند الطرفين | -| `Home` / `End` | مميّز أول إعدادات محلية / آخرها | -| `Enter` | اختر الإعدادات المحلية المميّزة وأعد التركيز إلى الزر المُشغّل | -| `Escape` | أغلق النافذة المنبثقة وأعد التركيز إلى الزر المُشغّل | -| الكتابة | صفِّ حسب الاسم أو الرمز؛ يبدأ التمييز من الأعلى مجددًا | +| المفتاح | الإجراء | +| ------------------------------- | -------------------------------------------------------------- | +| `Enter`، `Space`، أو النقر | افتح النافذة المنبثقة من الزر المُشغّل | +| `ArrowDown` / `ArrowUp` (مغلقة) | افتح مع تمييز أول إعدادات محلية / آخرها | +| `ArrowDown` / `ArrowUp` | انقل التمييز، مع الالتفاف عند الطرفين | +| `Home` / `End` | مميّز أول إعدادات محلية / آخرها | +| `Enter` | اختر الإعدادات المحلية المميّزة وأعد التركيز إلى الزر المُشغّل | +| `Escape` | أغلق النافذة المنبثقة وأعد التركيز إلى الزر المُشغّل | +| الكتابة | صفِّ حسب الاسم أو الرمز؛ يبدأ التمييز من الأعلى مجددًا | يبقى التمييز على الصف الذي ظهر فيه عند فتح القائمة — وتتمرر القائمة أسفله، كالقائمة الأصلية — ولا تتمرر الصفحة نفسها أبدًا. مرّر `maxHeight` لتغيير ارتفاع القائمة قبل أن تبدأ بالتمرير. @@ -334,79 +334,79 @@ export default function App() { تُكتشف التسميات والأعلام تلقائيًا من رمز اللغة. مرّر الرمز فقط: -| الرمز | اللغة | العلم | RTL | -| ---- | ---------------- | ---- | --- | -| `en` | English | 🇺🇸 | | -| `fr` | Français | 🇫🇷 | | -| `es` | Español | 🇪🇸 | | -| `de` | Deutsch | 🇩🇪 | | -| `ja` | 日本語 | 🇯🇵 | | -| `ko` | 한국어 | 🇰🇷 | | -| `zh` | 中文 | 🇨🇳 | | -| `ar` | العربية | 🇸🇦 | ✓ | -| `pt` | Português | 🇧🇷 | | -| `it` | Italiano | 🇮🇹 | | -| `nl` | Nederlands | 🇳🇱 | | -| `ru` | Русский | 🇷🇺 | | -| `pl` | Polski | 🇵🇱 | | -| `tr` | Türkçe | 🇹🇷 | | -| `vi` | Tiếng Việt | 🇻🇳 | | -| `th` | ไทย | 🇹🇭 | | -| `id` | Bahasa Indonesia | 🇮🇩 | | -| `hi` | हिन्दी | 🇮🇳 | | -| `bn` | বাংলা | 🇧🇩 | | -| `uk` | Українська | 🇺🇦 | | -| `cs` | Čeština | 🇨🇿 | | -| `sv` | Svenska | 🇸🇪 | | -| `da` | Dansk | 🇩🇰 | | -| `fi` | Suomi | 🇫🇮 | | -| `no` | Norsk | 🇳🇴 | | -| `el` | Ελληνικά | 🇬🇷 | | -| `he` | עברית | 🇮🇱 | ✓ | -| `fa` | فارسی | 🇮🇷 | ✓ | -| `ro` | Română | 🇷🇴 | | -| `hu` | Magyar | 🇭🇺 | | -| `sk` | Slovenčina | 🇸🇰 | | -| `bg` | Български | 🇧🇬 | | -| `hr` | Hrvatski | 🇭🇷 | | -| `sr` | Српски | 🇷🇸 | | -| `sl` | Slovenščina | 🇸🇮 | | -| `lt` | Lietuvių | 🇱🇹 | | -| `lv` | Latviešu | 🇱🇻 | | -| `et` | Eesti | 🇪🇪 | | -| `ga` | Gaeilge | 🇮🇪 | | -| `ca` | Català | 🇪🇸 | | -| `is` | Íslenska | 🇮🇸 | | -| `sw` | Kiswahili | 🇹🇿 | | -| `am` | አማርኛ | 🇪🇹 | | -| `ne` | नेपाली | 🇳🇵 | | -| `si` | සිංහල | 🇱🇰 | | -| `my` | မြန်မာ | 🇲🇲 | | -| `km` | ខ្មែរ | 🇰🇭 | | -| `lo` | ລາວ | 🇱🇦 | | -| `ka` | ქართული | 🇬🇪 | | -| `hy` | Հայերեն | 🇦🇲 | | -| `kk` | Қазақ | 🇰🇿 | | -| `uz` | Oʻzbek | 🇺🇿 | | -| `mn` | Монгол | 🇲🇳 | | -| `ur` | اردو | 🇵🇰 | ✓ | -| `ml` | മലയാളം | 🇮🇳 | | -| `ta` | தமிழ் | 🇮🇳 | | -| `te` | తెలుగు | 🇮🇳 | | -| `kn` | ಕನ್ನಡ | 🇮🇳 | | -| `mr` | मराठी | 🇮🇳 | | -| `gu` | ગુજરાતી | 🇮🇳 | | -| `pa` | ਪੰਜਾਬੀ | 🇮🇳 | | -| `yo` | Yorùbá | 🇳🇬 | | -| `ig` | Igbo | 🇳🇬 | | -| `zu` | isiZulu | 🇿🇦 | | -| `af` | Afrikaans | 🇿🇦 | | -| `ha` | Hausa | 🇳🇬 | | -| `tl` | Filipino | 🇵🇭 | | -| `mi` | Te Reo Māori | 🇳🇿 | | -| `sm` | Gagana Samoa | 🇼🇸 | | -| `to` | Lea Faka-Tonga | 🇹🇴 | | -| `eo` | Esperanto | 🌐 | | +| الرمز | اللغة | العلم | RTL | +| ----- | ---------------- | ----- | --- | +| `en` | English | 🇺🇸 | | +| `fr` | Français | 🇫🇷 | | +| `es` | Español | 🇪🇸 | | +| `de` | Deutsch | 🇩🇪 | | +| `ja` | 日本語 | 🇯🇵 | | +| `ko` | 한국어 | 🇰🇷 | | +| `zh` | 中文 | 🇨🇳 | | +| `ar` | العربية | 🇸🇦 | ✓ | +| `pt` | Português | 🇧🇷 | | +| `it` | Italiano | 🇮🇹 | | +| `nl` | Nederlands | 🇳🇱 | | +| `ru` | Русский | 🇷🇺 | | +| `pl` | Polski | 🇵🇱 | | +| `tr` | Türkçe | 🇹🇷 | | +| `vi` | Tiếng Việt | 🇻🇳 | | +| `th` | ไทย | 🇹🇭 | | +| `id` | Bahasa Indonesia | 🇮🇩 | | +| `hi` | हिन्दी | 🇮🇳 | | +| `bn` | বাংলা | 🇧🇩 | | +| `uk` | Українська | 🇺🇦 | | +| `cs` | Čeština | 🇨🇿 | | +| `sv` | Svenska | 🇸🇪 | | +| `da` | Dansk | 🇩🇰 | | +| `fi` | Suomi | 🇫🇮 | | +| `no` | Norsk | 🇳🇴 | | +| `el` | Ελληνικά | 🇬🇷 | | +| `he` | עברית | 🇮🇱 | ✓ | +| `fa` | فارسی | 🇮🇷 | ✓ | +| `ro` | Română | 🇷🇴 | | +| `hu` | Magyar | 🇭🇺 | | +| `sk` | Slovenčina | 🇸🇰 | | +| `bg` | Български | 🇧🇬 | | +| `hr` | Hrvatski | 🇭🇷 | | +| `sr` | Српски | 🇷🇸 | | +| `sl` | Slovenščina | 🇸🇮 | | +| `lt` | Lietuvių | 🇱🇹 | | +| `lv` | Latviešu | 🇱🇻 | | +| `et` | Eesti | 🇪🇪 | | +| `ga` | Gaeilge | 🇮🇪 | | +| `ca` | Català | 🇪🇸 | | +| `is` | Íslenska | 🇮🇸 | | +| `sw` | Kiswahili | 🇹🇿 | | +| `am` | አማርኛ | 🇪🇹 | | +| `ne` | नेपाली | 🇳🇵 | | +| `si` | සිංහල | 🇱🇰 | | +| `my` | မြန်မာ | 🇲🇲 | | +| `km` | ខ្មែរ | 🇰🇭 | | +| `lo` | ລາວ | 🇱🇦 | | +| `ka` | ქართული | 🇬🇪 | | +| `hy` | Հայերեն | 🇦🇲 | | +| `kk` | Қазақ | 🇰🇿 | | +| `uz` | Oʻzbek | 🇺🇿 | | +| `mn` | Монгол | 🇲🇳 | | +| `ur` | اردو | 🇵🇰 | ✓ | +| `ml` | മലയാളം | 🇮🇳 | | +| `ta` | தமிழ் | 🇮🇳 | | +| `te` | తెలుగు | 🇮🇳 | | +| `kn` | ಕನ್ನಡ | 🇮🇳 | | +| `mr` | मराठी | 🇮🇳 | | +| `gu` | ગુજરાતી | 🇮🇳 | | +| `pa` | ਪੰਜਾਬੀ | 🇮🇳 | | +| `yo` | Yorùbá | 🇳🇬 | | +| `ig` | Igbo | 🇳🇬 | | +| `zu` | isiZulu | 🇿🇦 | | +| `af` | Afrikaans | 🇿🇦 | | +| `ha` | Hausa | 🇳🇬 | | +| `tl` | Filipino | 🇵🇭 | | +| `mi` | Te Reo Māori | 🇳🇿 | | +| `sm` | Gagana Samoa | 🇼🇸 | | +| `to` | Lea Faka-Tonga | 🇹🇴 | | +| `eo` | Esperanto | 🌐 | | تحتاج لغة غير مدرجة؟ مرّر `label` و`flag` مخصصين للتجاوز: diff --git a/content/docs/components/language-switchers/language-switcher.es.mdx b/content/docs/components/language-switchers/language-switcher.es.mdx index 3e93300..a073a1e 100644 --- a/content/docs/components/language-switchers/language-switcher.es.mdx +++ b/content/docs/components/language-switchers/language-switcher.es.mdx @@ -113,37 +113,37 @@ export function LocaleSwitcher() { ## Props [#props] -| Prop | Tipo | Obligatorio | Descripción | -| ------------------- | ------------------------------------- | -------- | ------------------------------------------------------------------------------------ | -| `locales` | `Locale[]` | Sí | Array de configuraciones regionales disponibles; solo `code` es obligatorio | -| `value` | `string` | No | Código de configuración regional seleccionado: pásalo para controlar el componente | -| `defaultValue` | `string` | No | Código de idioma seleccionado inicialmente (predeterminado: código del primer idioma) | -| `onValueChange` | `(code: string) => void` | No | Callback que se ejecuta cuando cambia la configuración regional | -| `label` | `"native" \| "english"` | No | Etiquetas visibles en el idioma nativo o en inglés (predeterminado: `"english"`) | -| `showFlags` | `boolean` | No | Muestra los emojis de bandera (predeterminado: `false`) | -| `maxHeight` | `number \| string` | No | Altura máxima de la lista de opciones con desplazamiento (predeterminado: `"15rem"`) | -| `showCode` | `boolean` | No | Muestra el código de configuración regional junto a cada opción (predeterminado: `false`) | -| `variant` | `"outline" \| "ghost" \| "secondary"` | No | Estilo del disparador (predeterminado: `"outline"`) | -| `size` | `"sm" \| "default" \| "lg"` | No | Tamaño del disparador (predeterminado: `"default"`) | -| `align` | `"start" \| "end"` | No | Borde del disparador con el que se alinea el menú (predeterminado: `"start"`) | -| `side` | `"top" \| "bottom"` | No | Lado preferido del menú; cambia de lado si no hay espacio (predeterminado: `"bottom"`) | -| `searchable` | `boolean` | No | Muestra el campo de búsqueda (predeterminado: `true`) | -| `searchPlaceholder` | `string` | No | Marcador de posición de la búsqueda (predeterminado: `"Search languages..."`) | -| `emptyMessage` | `ReactNode` | No | Se muestra cuando la búsqueda no coincide con nada (predeterminado: `"No languages found."`) | -| `labels` | `Partial` | No | Sustituye el texto de interfaz en inglés integrado (consulta más abajo) | -| `disabled` | `boolean` | No | Desactiva el disparador | -| `renderOption` | `(locale, state) => ReactNode` | No | Sustituye el contenido de cada fila de opción; `state` tiene `selected`, `active`, `label`, `flag` | -| `classNames` | `LanguageSwitcherClassNames` | No | Clases por parte: `trigger`, `content`, `search`, `list`, `item`, `empty` | -| `className` | `string` | No | Clases CSS adicionales en la raíz | +| Prop | Tipo | Obligatorio | Descripción | +| ------------------- | ------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | +| `locales` | `Locale[]` | Sí | Array de configuraciones regionales disponibles; solo `code` es obligatorio | +| `value` | `string` | No | Código de configuración regional seleccionado: pásalo para controlar el componente | +| `defaultValue` | `string` | No | Código de idioma seleccionado inicialmente (predeterminado: código del primer idioma) | +| `onValueChange` | `(code: string) => void` | No | Callback que se ejecuta cuando cambia la configuración regional | +| `label` | `"native" \| "english"` | No | Etiquetas visibles en el idioma nativo o en inglés (predeterminado: `"english"`) | +| `showFlags` | `boolean` | No | Muestra los emojis de bandera (predeterminado: `false`) | +| `maxHeight` | `number \| string` | No | Altura máxima de la lista de opciones con desplazamiento (predeterminado: `"15rem"`) | +| `showCode` | `boolean` | No | Muestra el código de configuración regional junto a cada opción (predeterminado: `false`) | +| `variant` | `"outline" \| "ghost" \| "secondary"` | No | Estilo del disparador (predeterminado: `"outline"`) | +| `size` | `"sm" \| "default" \| "lg"` | No | Tamaño del disparador (predeterminado: `"default"`) | +| `align` | `"start" \| "end"` | No | Borde del disparador con el que se alinea el menú (predeterminado: `"start"`) | +| `side` | `"top" \| "bottom"` | No | Lado preferido del menú; cambia de lado si no hay espacio (predeterminado: `"bottom"`) | +| `searchable` | `boolean` | No | Muestra el campo de búsqueda (predeterminado: `true`) | +| `searchPlaceholder` | `string` | No | Marcador de posición de la búsqueda (predeterminado: `"Search languages..."`) | +| `emptyMessage` | `ReactNode` | No | Se muestra cuando la búsqueda no coincide con nada (predeterminado: `"No languages found."`) | +| `labels` | `Partial` | No | Sustituye el texto de interfaz en inglés integrado (consulta más abajo) | +| `disabled` | `boolean` | No | Desactiva el disparador | +| `renderOption` | `(locale, state) => ReactNode` | No | Sustituye el contenido de cada fila de opción; `state` tiene `selected`, `active`, `label`, `flag` | +| `classNames` | `LanguageSwitcherClassNames` | No | Clases por parte: `trigger`, `content`, `search`, `list`, `item`, `empty` | +| `className` | `string` | No | Clases CSS adicionales en la raíz | ### Objeto de configuración regional [#locale-object] -| Propiedad | Tipo | Descripción | -| -------- | --------- | -------------------------------------------------------------------------- | -| `code` | `string` | Código ISO 639-1 / BCP 47 (p. ej. `"en"`, `"fr-FR"`, `"ar-SA"`) — **obligatorio** | -| `label` | `string` | Nombre visible personalizado (se resuelve automáticamente desde la asignación integrada si se omite) | -| `flag` | `string` | Emoji de bandera personalizado (se detecta automáticamente desde el código si se omite) | -| `rtl` | `boolean` | Sustitución de RTL (se detecta automáticamente desde el código si se omite) | +| Propiedad | Tipo | Descripción | +| --------- | --------- | ---------------------------------------------------------------------------------------------------- | +| `code` | `string` | Código ISO 639-1 / BCP 47 (p. ej. `"en"`, `"fr-FR"`, `"ar-SA"`) — **obligatorio** | +| `label` | `string` | Nombre visible personalizado (se resuelve automáticamente desde la asignación integrada si se omite) | +| `flag` | `string` | Emoji de bandera personalizado (se detecta automáticamente desde el código si se omite) | +| `rtl` | `boolean` | Sustitución de RTL (se detecta automáticamente desde el código si se omite) | ## Ejemplos [#examples] @@ -295,28 +295,28 @@ export default function App() { } ``` -| Clave | Predeterminado | Se usa para | -| ------------------- | --------------------------------------- | ----------------------------- | -| `searchPlaceholder` | `"Search languages..."` | Marcador de posición del campo de búsqueda | -| `searchLabel` | `"Search languages"` | Etiqueta accesible del campo de búsqueda | -| `clearSearch` | `"Clear search"` | Etiqueta accesible del botón de borrar | -| `emptyMessage` | `"No languages found."` | Se muestra cuando nada coincide | -| `listbox` | `"Select language"` | Etiqueta accesible de la lista de opciones | -| `current` | `(name) => "Current language: " + name` | Etiqueta accesible del disparador | +| Clave | Predeterminado | Se usa para | +| ------------------- | --------------------------------------- | ------------------------------------------ | +| `searchPlaceholder` | `"Search languages..."` | Marcador de posición del campo de búsqueda | +| `searchLabel` | `"Search languages"` | Etiqueta accesible del campo de búsqueda | +| `clearSearch` | `"Clear search"` | Etiqueta accesible del botón de borrar | +| `emptyMessage` | `"No languages found."` | Se muestra cuando nada coincide | +| `listbox` | `"Select language"` | Etiqueta accesible de la lista de opciones | +| `current` | `(name) => "Current language: " + name` | Etiqueta accesible del disparador | ## Soporte de teclado [#keyboard-support] El popup sigue el patrón combobox de WAI-ARIA: el foco permanece en el campo de búsqueda, que se expone como `role="combobox"`, y la opción resaltada se anuncia mediante `aria-activedescendant`. -| Clave | Acción | -| -------------------------------- | ------------------------------------------------------------- | -| `Enter`, `Space` o clic | Abre el popup desde el disparador | -| `ArrowDown` / `ArrowUp` (cerrado) | Abre con la primera / última configuración regional resaltada | -| `ArrowDown` / `ArrowUp` | Mueve el resaltado, dando la vuelta en ambos extremos | -| `Home` / `End` | Resalta la primera / última configuración regional | -| `Enter` | Selecciona la configuración regional resaltada y devuelve el foco al disparador | -| `Escape` | Cierra el popup y devuelve el foco al disparador | -| Escritura | Filtra por nombre o código; el resaltado vuelve al principio | +| Clave | Acción | +| --------------------------------- | ------------------------------------------------------------------------------- | +| `Enter`, `Space` o clic | Abre el popup desde el disparador | +| `ArrowDown` / `ArrowUp` (cerrado) | Abre con la primera / última configuración regional resaltada | +| `ArrowDown` / `ArrowUp` | Mueve el resaltado, dando la vuelta en ambos extremos | +| `Home` / `End` | Resalta la primera / última configuración regional | +| `Enter` | Selecciona la configuración regional resaltada y devuelve el foco al disparador | +| `Escape` | Cierra el popup y devuelve el foco al disparador | +| Escritura | Filtra por nombre o código; el resaltado vuelve al principio | El resaltado se mantiene en la fila en la que apareció al abrir el menú: la lista se desplaza por debajo, como un menú nativo, y la página nunca se desplaza. Pasa `maxHeight` para cambiar la altura de la lista antes de que empiece a desplazarse. @@ -334,79 +334,79 @@ El resaltado se mantiene en la fila en la que apareció al abrir el menú: la li Las etiquetas y banderas se detectan automáticamente a partir del código de idioma. Pasa solo el código: -| Código | Idioma | Bandera | RTL | -| ---- | ---------------- | ---- | --- | -| `en` | English | 🇺🇸 | | -| `fr` | Français | 🇫🇷 | | -| `es` | Español | 🇪🇸 | | -| `de` | Deutsch | 🇩🇪 | | -| `ja` | 日本語 | 🇯🇵 | | -| `ko` | 한국어 | 🇰🇷 | | -| `zh` | 中文 | 🇨🇳 | | -| `ar` | العربية | 🇸🇦 | ✓ | -| `pt` | Português | 🇧🇷 | | -| `it` | Italiano | 🇮🇹 | | -| `nl` | Nederlands | 🇳🇱 | | -| `ru` | Русский | 🇷🇺 | | -| `pl` | Polski | 🇵🇱 | | -| `tr` | Türkçe | 🇹🇷 | | -| `vi` | Tiếng Việt | 🇻🇳 | | -| `th` | ไทย | 🇹🇭 | | -| `id` | Bahasa Indonesia | 🇮🇩 | | -| `hi` | हिन्दी | 🇮🇳 | | -| `bn` | বাংলা | 🇧🇩 | | -| `uk` | Українська | 🇺🇦 | | -| `cs` | Čeština | 🇨🇿 | | -| `sv` | Svenska | 🇸🇪 | | -| `da` | Dansk | 🇩🇰 | | -| `fi` | Suomi | 🇫🇮 | | -| `no` | Norsk | 🇳🇴 | | -| `el` | Ελληνικά | 🇬🇷 | | -| `he` | עברית | 🇮🇱 | ✓ | -| `fa` | فارسی | 🇮🇷 | ✓ | -| `ro` | Română | 🇷🇴 | | -| `hu` | Magyar | 🇭🇺 | | -| `sk` | Slovenčina | 🇸🇰 | | -| `bg` | Български | 🇧🇬 | | -| `hr` | Hrvatski | 🇭🇷 | | -| `sr` | Српски | 🇷🇸 | | -| `sl` | Slovenščina | 🇸🇮 | | -| `lt` | Lietuvių | 🇱🇹 | | -| `lv` | Latviešu | 🇱🇻 | | -| `et` | Eesti | 🇪🇪 | | -| `ga` | Gaeilge | 🇮🇪 | | -| `ca` | Català | 🇪🇸 | | -| `is` | Íslenska | 🇮🇸 | | -| `sw` | Kiswahili | 🇹🇿 | | -| `am` | አማርኛ | 🇪🇹 | | -| `ne` | नेपाली | 🇳🇵 | | -| `si` | සිංහල | 🇱🇰 | | -| `my` | မြန်မာ | 🇲🇲 | | -| `km` | ខ្មែរ | 🇰🇭 | | -| `lo` | ລາວ | 🇱🇦 | | -| `ka` | ქართული | 🇬🇪 | | -| `hy` | Հայերեն | 🇦🇲 | | -| `kk` | Қазақ | 🇰🇿 | | -| `uz` | Oʻzbek | 🇺🇿 | | -| `mn` | Монгол | 🇲🇳 | | -| `ur` | اردو | 🇵🇰 | ✓ | -| `ml` | മലയാളം | 🇮🇳 | | -| `ta` | தமிழ் | 🇮🇳 | | -| `te` | తెలుగు | 🇮🇳 | | -| `kn` | ಕನ್ನಡ | 🇮🇳 | | -| `mr` | मराठी | 🇮🇳 | | -| `gu` | ગુજરાતી | 🇮🇳 | | -| `pa` | ਪੰਜਾਬੀ | 🇮🇳 | | -| `yo` | Yorùbá | 🇳🇬 | | -| `ig` | Igbo | 🇳🇬 | | -| `zu` | isiZulu | 🇿🇦 | | -| `af` | Afrikaans | 🇿🇦 | | -| `ha` | Hausa | 🇳🇬 | | -| `tl` | Filipino | 🇵🇭 | | -| `mi` | Te Reo Māori | 🇳🇿 | | -| `sm` | Gagana Samoa | 🇼🇸 | | -| `to` | Lea Faka-Tonga | 🇹🇴 | | -| `eo` | Esperanto | 🌐 | | +| Código | Idioma | Bandera | RTL | +| ------ | ---------------- | ------- | --- | +| `en` | English | 🇺🇸 | | +| `fr` | Français | 🇫🇷 | | +| `es` | Español | 🇪🇸 | | +| `de` | Deutsch | 🇩🇪 | | +| `ja` | 日本語 | 🇯🇵 | | +| `ko` | 한국어 | 🇰🇷 | | +| `zh` | 中文 | 🇨🇳 | | +| `ar` | العربية | 🇸🇦 | ✓ | +| `pt` | Português | 🇧🇷 | | +| `it` | Italiano | 🇮🇹 | | +| `nl` | Nederlands | 🇳🇱 | | +| `ru` | Русский | 🇷🇺 | | +| `pl` | Polski | 🇵🇱 | | +| `tr` | Türkçe | 🇹🇷 | | +| `vi` | Tiếng Việt | 🇻🇳 | | +| `th` | ไทย | 🇹🇭 | | +| `id` | Bahasa Indonesia | 🇮🇩 | | +| `hi` | हिन्दी | 🇮🇳 | | +| `bn` | বাংলা | 🇧🇩 | | +| `uk` | Українська | 🇺🇦 | | +| `cs` | Čeština | 🇨🇿 | | +| `sv` | Svenska | 🇸🇪 | | +| `da` | Dansk | 🇩🇰 | | +| `fi` | Suomi | 🇫🇮 | | +| `no` | Norsk | 🇳🇴 | | +| `el` | Ελληνικά | 🇬🇷 | | +| `he` | עברית | 🇮🇱 | ✓ | +| `fa` | فارسی | 🇮🇷 | ✓ | +| `ro` | Română | 🇷🇴 | | +| `hu` | Magyar | 🇭🇺 | | +| `sk` | Slovenčina | 🇸🇰 | | +| `bg` | Български | 🇧🇬 | | +| `hr` | Hrvatski | 🇭🇷 | | +| `sr` | Српски | 🇷🇸 | | +| `sl` | Slovenščina | 🇸🇮 | | +| `lt` | Lietuvių | 🇱🇹 | | +| `lv` | Latviešu | 🇱🇻 | | +| `et` | Eesti | 🇪🇪 | | +| `ga` | Gaeilge | 🇮🇪 | | +| `ca` | Català | 🇪🇸 | | +| `is` | Íslenska | 🇮🇸 | | +| `sw` | Kiswahili | 🇹🇿 | | +| `am` | አማርኛ | 🇪🇹 | | +| `ne` | नेपाली | 🇳🇵 | | +| `si` | සිංහල | 🇱🇰 | | +| `my` | မြန်မာ | 🇲🇲 | | +| `km` | ខ្មែរ | 🇰🇭 | | +| `lo` | ລາວ | 🇱🇦 | | +| `ka` | ქართული | 🇬🇪 | | +| `hy` | Հայերեն | 🇦🇲 | | +| `kk` | Қазақ | 🇰🇿 | | +| `uz` | Oʻzbek | 🇺🇿 | | +| `mn` | Монгол | 🇲🇳 | | +| `ur` | اردو | 🇵🇰 | ✓ | +| `ml` | മലയാളം | 🇮🇳 | | +| `ta` | தமிழ் | 🇮🇳 | | +| `te` | తెలుగు | 🇮🇳 | | +| `kn` | ಕನ್ನಡ | 🇮🇳 | | +| `mr` | मराठी | 🇮🇳 | | +| `gu` | ગુજરાતી | 🇮🇳 | | +| `pa` | ਪੰਜਾਬੀ | 🇮🇳 | | +| `yo` | Yorùbá | 🇳🇬 | | +| `ig` | Igbo | 🇳🇬 | | +| `zu` | isiZulu | 🇿🇦 | | +| `af` | Afrikaans | 🇿🇦 | | +| `ha` | Hausa | 🇳🇬 | | +| `tl` | Filipino | 🇵🇭 | | +| `mi` | Te Reo Māori | 🇳🇿 | | +| `sm` | Gagana Samoa | 🇼🇸 | | +| `to` | Lea Faka-Tonga | 🇹🇴 | | +| `eo` | Esperanto | 🌐 | | ¿Necesitas un idioma que no aparece? Pasa un `label` y un `flag` personalizados para sustituirlo: diff --git a/content/docs/components/language-switchers/language-switcher.ja.mdx b/content/docs/components/language-switchers/language-switcher.ja.mdx index 0de49e3..64826e9 100644 --- a/content/docs/components/language-switchers/language-switcher.ja.mdx +++ b/content/docs/components/language-switchers/language-switcher.ja.mdx @@ -113,37 +113,37 @@ export function LocaleSwitcher() { ## Props [#props] -| Prop | 型 | 必須 | 説明 | -| ------------------- | ------------------------------------- | -------- | ------------------------------------------------------------------------------------ | -| `locales` | `Locale[]` | はい | 利用可能なロケールの配列です。必須なのは `code` のみです | -| `value` | `string` | いいえ | 選択中のロケールコード。コンポーネントを制御するにはこの値を渡します | -| `defaultValue` | `string` | いいえ | 初期選択ロケールコード（デフォルト: 最初のロケールのコード） | -| `onValueChange` | `(code: string) => void` | いいえ | ロケールが変更されたときのコールバック | -| `label` | `"native" \| "english"` | いいえ | 表示ラベルをネイティブ言語または英語で表示します（デフォルト: `"english"`） | -| `showFlags` | `boolean` | いいえ | 国旗の絵文字を表示します（デフォルト: `false`） | -| `maxHeight` | `number \| string` | いいえ | スクロールする選択肢一覧の最大の高さ（デフォルト: `"15rem"`） | -| `showCode` | `boolean` | いいえ | 各選択肢の横にロケールコードを表示します（デフォルト: `false`） | -| `variant` | `"outline" \| "ghost" \| "secondary"` | いいえ | トリガーのスタイル（デフォルト: `"outline"`） | -| `size` | `"sm" \| "default" \| "lg"` | いいえ | トリガーのサイズ（デフォルト: `"default"`） | -| `align` | `"start" \| "end"` | いいえ | メニューを揃えるトリガーの辺（デフォルト: `"start"`） | -| `side` | `"top" \| "bottom"` | いいえ | 優先するメニューの表示側。スペースがない場合は反転します（デフォルト: `"bottom"`） | -| `searchable` | `boolean` | いいえ | 検索欄を表示します（デフォルト: `true`） | -| `searchPlaceholder` | `string` | いいえ | 検索欄のプレースホルダー（デフォルト: `"Search languages..."`） | -| `emptyMessage` | `ReactNode` | いいえ | 検索に一致する項目がない場合に表示されます（デフォルト: `"No languages found."`） | -| `labels` | `Partial` | いいえ | 組み込みの英語 UI テキストを上書きします（下記参照） | -| `disabled` | `boolean` | いいえ | トリガーを無効にします | -| `renderOption` | `(locale, state) => ReactNode` | いいえ | 各選択肢の行の内容を置き換えます。`state` には `selected`、`active`、`label`、`flag` があります | -| `classNames` | `LanguageSwitcherClassNames` | いいえ | パーツごとのクラス: `trigger`、`content`、`search`、`list`、`item`、`empty` | -| `className` | `string` | いいえ | ルートに追加する CSS クラス | +| Prop | 型 | 必須 | 説明 | +| ------------------- | ------------------------------------- | ------ | ----------------------------------------------------------------------------------------------- | +| `locales` | `Locale[]` | はい | 利用可能なロケールの配列です。必須なのは `code` のみです | +| `value` | `string` | いいえ | 選択中のロケールコード。コンポーネントを制御するにはこの値を渡します | +| `defaultValue` | `string` | いいえ | 初期選択ロケールコード（デフォルト: 最初のロケールのコード） | +| `onValueChange` | `(code: string) => void` | いいえ | ロケールが変更されたときのコールバック | +| `label` | `"native" \| "english"` | いいえ | 表示ラベルをネイティブ言語または英語で表示します（デフォルト: `"english"`） | +| `showFlags` | `boolean` | いいえ | 国旗の絵文字を表示します（デフォルト: `false`） | +| `maxHeight` | `number \| string` | いいえ | スクロールする選択肢一覧の最大の高さ（デフォルト: `"15rem"`） | +| `showCode` | `boolean` | いいえ | 各選択肢の横にロケールコードを表示します（デフォルト: `false`） | +| `variant` | `"outline" \| "ghost" \| "secondary"` | いいえ | トリガーのスタイル（デフォルト: `"outline"`） | +| `size` | `"sm" \| "default" \| "lg"` | いいえ | トリガーのサイズ（デフォルト: `"default"`） | +| `align` | `"start" \| "end"` | いいえ | メニューを揃えるトリガーの辺（デフォルト: `"start"`） | +| `side` | `"top" \| "bottom"` | いいえ | 優先するメニューの表示側。スペースがない場合は反転します（デフォルト: `"bottom"`） | +| `searchable` | `boolean` | いいえ | 検索欄を表示します（デフォルト: `true`） | +| `searchPlaceholder` | `string` | いいえ | 検索欄のプレースホルダー（デフォルト: `"Search languages..."`） | +| `emptyMessage` | `ReactNode` | いいえ | 検索に一致する項目がない場合に表示されます（デフォルト: `"No languages found."`） | +| `labels` | `Partial` | いいえ | 組み込みの英語 UI テキストを上書きします（下記参照） | +| `disabled` | `boolean` | いいえ | トリガーを無効にします | +| `renderOption` | `(locale, state) => ReactNode` | いいえ | 各選択肢の行の内容を置き換えます。`state` には `selected`、`active`、`label`、`flag` があります | +| `classNames` | `LanguageSwitcherClassNames` | いいえ | パーツごとのクラス: `trigger`、`content`、`search`、`list`、`item`、`empty` | +| `className` | `string` | いいえ | ルートに追加する CSS クラス | ### Locale オブジェクト [#locale-object] -| プロパティ | 型 | 説明 | -| -------- | --------- | -------------------------------------------------------------------------- | -| `code` | `string` | ISO 639-1 / BCP 47 コード（例: `"en"`、`"fr-FR"`、`"ar-SA"`）— **必須** | -| `label` | `string` | 表示名を上書きします（省略時は組み込みのマッピングから自動で解決されます） | -| `flag` | `string` | 国旗の絵文字を上書きします（省略時はコードから自動検出されます） | -| `rtl` | `boolean` | RTL を上書きします（省略時はコードから自動検出されます） | +| プロパティ | 型 | 説明 | +| ---------- | --------- | -------------------------------------------------------------------------- | +| `code` | `string` | ISO 639-1 / BCP 47 コード（例: `"en"`、`"fr-FR"`、`"ar-SA"`）— **必須** | +| `label` | `string` | 表示名を上書きします（省略時は組み込みのマッピングから自動で解決されます） | +| `flag` | `string` | 国旗の絵文字を上書きします（省略時はコードから自動検出されます） | +| `rtl` | `boolean` | RTL を上書きします（省略時はコードから自動検出されます） | ## 使用例 [#examples] @@ -295,28 +295,28 @@ export default function App() { } ``` -| キー | デフォルト | 用途 | -| ------------------- | --------------------------------------- | ----------------------------- | -| `searchPlaceholder` | `"Search languages..."` | 検索欄のプレースホルダー | -| `searchLabel` | `"Search languages"` | 検索欄のアクセシブルなラベル | +| キー | デフォルト | 用途 | +| ------------------- | --------------------------------------- | ---------------------------------- | +| `searchPlaceholder` | `"Search languages..."` | 検索欄のプレースホルダー | +| `searchLabel` | `"Search languages"` | 検索欄のアクセシブルなラベル | | `clearSearch` | `"Clear search"` | クリアボタンのアクセシブルなラベル | -| `emptyMessage` | `"No languages found."` | 一致する項目がない場合に表示 | -| `listbox` | `"Select language"` | 選択肢一覧のアクセシブルなラベル | -| `current` | `(name) => "Current language: " + name` | トリガーのアクセシブルなラベル | +| `emptyMessage` | `"No languages found."` | 一致する項目がない場合に表示 | +| `listbox` | `"Select language"` | 選択肢一覧のアクセシブルなラベル | +| `current` | `(name) => "Current language: " + name` | トリガーのアクセシブルなラベル | ## キーボード操作 [#keyboard-support] ポップアップは WAI-ARIA のコンボボックスパターンに従います。 フォーカスは検索欄に留まり、検索欄は `role="combobox"` として公開されます。 ハイライトされた選択肢は `aria-activedescendant` を通じて読み上げられます。 -| キー | 操作 | -| -------------------------------- | ------------------------------------------------------------- | -| `Enter`、`Space`、またはクリック | トリガーからポップアップを開きます | -| `ArrowDown` / `ArrowUp`（閉じている状態） | 最初または最後のロケールがハイライトされた状態で開きます | -| `ArrowDown` / `ArrowUp` | ハイライトを移動します。両端で循環します | -| `Home` / `End` | 最初または最後のロケールをハイライトします | -| `Enter` | ハイライトされたロケールを選択し、フォーカスをトリガーに戻します | -| `Escape` | ポップアップを閉じ、フォーカスをトリガーに戻します | -| 入力 | 名前またはコードで絞り込みます。ハイライトは先頭に戻ります | +| キー | 操作 | +| ----------------------------------------- | ---------------------------------------------------------------- | +| `Enter`、`Space`、またはクリック | トリガーからポップアップを開きます | +| `ArrowDown` / `ArrowUp`（閉じている状態） | 最初または最後のロケールがハイライトされた状態で開きます | +| `ArrowDown` / `ArrowUp` | ハイライトを移動します。両端で循環します | +| `Home` / `End` | 最初または最後のロケールをハイライトします | +| `Enter` | ハイライトされたロケールを選択し、フォーカスをトリガーに戻します | +| `Escape` | ポップアップを閉じ、フォーカスをトリガーに戻します | +| 入力 | 名前またはコードで絞り込みます。ハイライトは先頭に戻ります | ハイライトは、メニューを開いたときに表示されていた行に留まります。 ネイティブのメニューのように、一覧はその下でスクロールします。 ページ自体はスクロールしません。`maxHeight` を渡すと、スクロールが始まるまでの一覧の高さを変更できます。 @@ -334,79 +334,79 @@ export default function App() { ラベルと国旗は言語コードから自動検出されます。コードだけを渡してください: -| コード | 言語 | 国旗 | RTL | -| ---- | ---------------- | ---- | --- | -| `en` | English | 🇺🇸 | | -| `fr` | Français | 🇫🇷 | | -| `es` | Español | 🇪🇸 | | -| `de` | Deutsch | 🇩🇪 | | -| `ja` | 日本語 | 🇯🇵 | | -| `ko` | 한국어 | 🇰🇷 | | -| `zh` | 中文 | 🇨🇳 | | -| `ar` | العربية | 🇸🇦 | ✓ | -| `pt` | Português | 🇧🇷 | | -| `it` | Italiano | 🇮🇹 | | -| `nl` | Nederlands | 🇳🇱 | | -| `ru` | Русский | 🇷🇺 | | -| `pl` | Polski | 🇵🇱 | | -| `tr` | Türkçe | 🇹🇷 | | -| `vi` | Tiếng Việt | 🇻🇳 | | -| `th` | ไทย | 🇹🇭 | | -| `id` | Bahasa Indonesia | 🇮🇩 | | -| `hi` | हिन्दी | 🇮🇳 | | -| `bn` | বাংলা | 🇧🇩 | | -| `uk` | Українська | 🇺🇦 | | -| `cs` | Čeština | 🇨🇿 | | -| `sv` | Svenska | 🇸🇪 | | -| `da` | Dansk | 🇩🇰 | | -| `fi` | Suomi | 🇫🇮 | | -| `no` | Norsk | 🇳🇴 | | -| `el` | Ελληνικά | 🇬🇷 | | -| `he` | עברית | 🇮🇱 | ✓ | -| `fa` | فارسی | 🇮🇷 | ✓ | -| `ro` | Română | 🇷🇴 | | -| `hu` | Magyar | 🇭🇺 | | -| `sk` | Slovenčina | 🇸🇰 | | -| `bg` | Български | 🇧🇬 | | -| `hr` | Hrvatski | 🇭🇷 | | -| `sr` | Српски | 🇷🇸 | | -| `sl` | Slovenščina | 🇸🇮 | | -| `lt` | Lietuvių | 🇱🇹 | | -| `lv` | Latviešu | 🇱🇻 | | -| `et` | Eesti | 🇪🇪 | | -| `ga` | Gaeilge | 🇮🇪 | | -| `ca` | Català | 🇪🇸 | | -| `is` | Íslenska | 🇮🇸 | | -| `sw` | Kiswahili | 🇹🇿 | | -| `am` | አማርኛ | 🇪🇹 | | -| `ne` | नेपाली | 🇳🇵 | | -| `si` | සිංහල | 🇱🇰 | | -| `my` | မြန်မာ | 🇲🇲 | | -| `km` | ខ្មែរ | 🇰🇭 | | -| `lo` | ລາວ | 🇱🇦 | | -| `ka` | ქართული | 🇬🇪 | | -| `hy` | Հայերեն | 🇦🇲 | | -| `kk` | Қазақ | 🇰🇿 | | -| `uz` | Oʻzbek | 🇺🇿 | | -| `mn` | Монгол | 🇲🇳 | | -| `ur` | اردو | 🇵🇰 | ✓ | -| `ml` | മലയാളം | 🇮🇳 | | -| `ta` | தமிழ் | 🇮🇳 | | -| `te` | తెలుగు | 🇮🇳 | | -| `kn` | ಕನ್ನಡ | 🇮🇳 | | -| `mr` | मराठी | 🇮🇳 | | -| `gu` | ગુજરાતી | 🇮🇳 | | -| `pa` | ਪੰਜਾਬੀ | 🇮🇳 | | -| `yo` | Yorùbá | 🇳🇬 | | -| `ig` | Igbo | 🇳🇬 | | -| `zu` | isiZulu | 🇿🇦 | | -| `af` | Afrikaans | 🇿🇦 | | -| `ha` | Hausa | 🇳🇬 | | -| `tl` | Filipino | 🇵🇭 | | -| `mi` | Te Reo Māori | 🇳🇿 | | -| `sm` | Gagana Samoa | 🇼🇸 | | -| `to` | Lea Faka-Tonga | 🇹🇴 | | -| `eo` | Esperanto | 🌐 | | +| コード | 言語 | 国旗 | RTL | +| ------ | ---------------- | ---- | --- | +| `en` | English | 🇺🇸 | | +| `fr` | Français | 🇫🇷 | | +| `es` | Español | 🇪🇸 | | +| `de` | Deutsch | 🇩🇪 | | +| `ja` | 日本語 | 🇯🇵 | | +| `ko` | 한국어 | 🇰🇷 | | +| `zh` | 中文 | 🇨🇳 | | +| `ar` | العربية | 🇸🇦 | ✓ | +| `pt` | Português | 🇧🇷 | | +| `it` | Italiano | 🇮🇹 | | +| `nl` | Nederlands | 🇳🇱 | | +| `ru` | Русский | 🇷🇺 | | +| `pl` | Polski | 🇵🇱 | | +| `tr` | Türkçe | 🇹🇷 | | +| `vi` | Tiếng Việt | 🇻🇳 | | +| `th` | ไทย | 🇹🇭 | | +| `id` | Bahasa Indonesia | 🇮🇩 | | +| `hi` | हिन्दी | 🇮🇳 | | +| `bn` | বাংলা | 🇧🇩 | | +| `uk` | Українська | 🇺🇦 | | +| `cs` | Čeština | 🇨🇿 | | +| `sv` | Svenska | 🇸🇪 | | +| `da` | Dansk | 🇩🇰 | | +| `fi` | Suomi | 🇫🇮 | | +| `no` | Norsk | 🇳🇴 | | +| `el` | Ελληνικά | 🇬🇷 | | +| `he` | עברית | 🇮🇱 | ✓ | +| `fa` | فارسی | 🇮🇷 | ✓ | +| `ro` | Română | 🇷🇴 | | +| `hu` | Magyar | 🇭🇺 | | +| `sk` | Slovenčina | 🇸🇰 | | +| `bg` | Български | 🇧🇬 | | +| `hr` | Hrvatski | 🇭🇷 | | +| `sr` | Српски | 🇷🇸 | | +| `sl` | Slovenščina | 🇸🇮 | | +| `lt` | Lietuvių | 🇱🇹 | | +| `lv` | Latviešu | 🇱🇻 | | +| `et` | Eesti | 🇪🇪 | | +| `ga` | Gaeilge | 🇮🇪 | | +| `ca` | Català | 🇪🇸 | | +| `is` | Íslenska | 🇮🇸 | | +| `sw` | Kiswahili | 🇹🇿 | | +| `am` | አማርኛ | 🇪🇹 | | +| `ne` | नेपाली | 🇳🇵 | | +| `si` | සිංහල | 🇱🇰 | | +| `my` | မြန်မာ | 🇲🇲 | | +| `km` | ខ្មែរ | 🇰🇭 | | +| `lo` | ລາວ | 🇱🇦 | | +| `ka` | ქართული | 🇬🇪 | | +| `hy` | Հայերեն | 🇦🇲 | | +| `kk` | Қазақ | 🇰🇿 | | +| `uz` | Oʻzbek | 🇺🇿 | | +| `mn` | Монгол | 🇲🇳 | | +| `ur` | اردو | 🇵🇰 | ✓ | +| `ml` | മലയാളം | 🇮🇳 | | +| `ta` | தமிழ் | 🇮🇳 | | +| `te` | తెలుగు | 🇮🇳 | | +| `kn` | ಕನ್ನಡ | 🇮🇳 | | +| `mr` | मराठी | 🇮🇳 | | +| `gu` | ગુજરાતી | 🇮🇳 | | +| `pa` | ਪੰਜਾਬੀ | 🇮🇳 | | +| `yo` | Yorùbá | 🇳🇬 | | +| `ig` | Igbo | 🇳🇬 | | +| `zu` | isiZulu | 🇿🇦 | | +| `af` | Afrikaans | 🇿🇦 | | +| `ha` | Hausa | 🇳🇬 | | +| `tl` | Filipino | 🇵🇭 | | +| `mi` | Te Reo Māori | 🇳🇿 | | +| `sm` | Gagana Samoa | 🇼🇸 | | +| `to` | Lea Faka-Tonga | 🇹🇴 | | +| `eo` | Esperanto | 🌐 | | 一覧にない言語が必要ですか？ カスタムの `label` と `flag` を渡して上書きします: diff --git a/content/docs/components/language-switchers/meta.ar.json b/content/docs/components/language-switchers/meta.ar.json index ef09036..d3d4ce0 100644 --- a/content/docs/components/language-switchers/meta.ar.json +++ b/content/docs/components/language-switchers/meta.ar.json @@ -1,8 +1,5 @@ { "title": "مبدّلات اللغة", "icon": "Globe", - "pages": [ - "language-switcher", - "language-switcher-pill" - ] + "pages": ["language-switcher", "language-switcher-pill"] } diff --git a/content/docs/components/language-switchers/meta.es.json b/content/docs/components/language-switchers/meta.es.json index 663698e..727792d 100644 --- a/content/docs/components/language-switchers/meta.es.json +++ b/content/docs/components/language-switchers/meta.es.json @@ -1,8 +1,5 @@ { "title": "Selectores de idioma", "icon": "Globe", - "pages": [ - "language-switcher", - "language-switcher-pill" - ] + "pages": ["language-switcher", "language-switcher-pill"] } diff --git a/content/docs/components/language-switchers/meta.ja.json b/content/docs/components/language-switchers/meta.ja.json index 0c9dd9c..8e86537 100644 --- a/content/docs/components/language-switchers/meta.ja.json +++ b/content/docs/components/language-switchers/meta.ja.json @@ -1,8 +1,5 @@ { "title": "言語スイッチャー", "icon": "Globe", - "pages": [ - "language-switcher", - "language-switcher-pill" - ] + "pages": ["language-switcher", "language-switcher-pill"] } diff --git a/content/docs/components/locale-pickers/locale-picker.ar.mdx b/content/docs/components/locale-pickers/locale-picker.ar.mdx index bfadf03..33ff22e 100644 --- a/content/docs/components/locale-pickers/locale-picker.ar.mdx +++ b/content/docs/components/locale-pickers/locale-picker.ar.mdx @@ -105,27 +105,27 @@ import { LocalePicker } from "@/components/ui/locale-picker"; ## الخصائص [#props] -| الخاصية | النوع | مطلوب | الافتراضي | الوصف | -| ------------------- | ------------------------------------- | -------- | --------------------- | ------------------------------------------------------------------------------------ | -| `regions` | `string[]` | نعم | — | المناطق المتاحة للاختيار، برموز ISO 3166-1 alpha-2 | -| `value` | `string` | لا | — | الإعدادات المحلية المحددة (BCP 47) — مرّرها للتحكم في المكوّن | -| `defaultValue` | `string` | لا | `en-` | الإعدادات المحلية المحددة الأولية عند عدم التحكم | -| `onValueChange` | `(locale: string) => void` | لا | — | دالة استدعاء عند تغيّر المنطقة — تستقبل وسم BCP 47 الجديد | -| `label` | `"native" \| "english"` | لا | `"english"` | أسماء المناطق بالإنجليزية، أو مترجمة إلى الإعدادات المحلية المحددة | -| `showFlags` | `boolean` | لا | `true` | إظهار علم emoji للمنطقة بجانب اسمها | -| `maxHeight` | `number \| string` | لا | `"15rem"` | أقصى ارتفاع لقائمة الخيارات القابلة للتمرير قبل أن تبدأ بالتمرير | -| `variant` | `"outline" \| "ghost" \| "secondary"` | لا | `"outline"` | نمط الزر المُشغّل | -| `size` | `"sm" \| "default" \| "lg"` | لا | `"default"` | حجم الزر المُشغّل | -| `align` | `"start" \| "end"` | لا | `"start"` | الحافة التي تصطف النافذة المنبثقة معها في الزر المُشغّل | -| `side` | `"top" \| "bottom"` | لا | `"bottom"` | الجانب المفضل للنافذة المنبثقة — يتبدّل عند عدم وجود مساحة في منفذ العرض | -| `searchable` | `boolean` | لا | `true` | إظهار حقل البحث | -| `searchPlaceholder` | `string` | لا | `"Search regions..."` | النص النائب لحقل البحث | -| `emptyMessage` | `React.ReactNode` | لا | `"No results"` | المحتوى المعروض عندما لا يطابق البحث أي نتيجة | -| `disabled` | `boolean` | لا | `false` | تعطيل الزر المُشغّل | -| `showSummary` | `boolean` | لا | `true` | إظهار بطاقة ملخص القيم الافتراضية المشتقة للإعدادات المحلية | -| `labels` | `Partial` | لا | — | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | -| `classNames` | `LocalePickerClassNames` | لا | — | أصناف لكل جزء: `trigger`، `content`، `search`، `list`، `item`، `empty`، `summary` | -| `className` | `string` | لا | — | أصناف CSS إضافية | +| الخاصية | النوع | مطلوب | الافتراضي | الوصف | +| ------------------- | ------------------------------------- | ----- | --------------------- | --------------------------------------------------------------------------------- | +| `regions` | `string[]` | نعم | — | المناطق المتاحة للاختيار، برموز ISO 3166-1 alpha-2 | +| `value` | `string` | لا | — | الإعدادات المحلية المحددة (BCP 47) — مرّرها للتحكم في المكوّن | +| `defaultValue` | `string` | لا | `en-` | الإعدادات المحلية المحددة الأولية عند عدم التحكم | +| `onValueChange` | `(locale: string) => void` | لا | — | دالة استدعاء عند تغيّر المنطقة — تستقبل وسم BCP 47 الجديد | +| `label` | `"native" \| "english"` | لا | `"english"` | أسماء المناطق بالإنجليزية، أو مترجمة إلى الإعدادات المحلية المحددة | +| `showFlags` | `boolean` | لا | `true` | إظهار علم emoji للمنطقة بجانب اسمها | +| `maxHeight` | `number \| string` | لا | `"15rem"` | أقصى ارتفاع لقائمة الخيارات القابلة للتمرير قبل أن تبدأ بالتمرير | +| `variant` | `"outline" \| "ghost" \| "secondary"` | لا | `"outline"` | نمط الزر المُشغّل | +| `size` | `"sm" \| "default" \| "lg"` | لا | `"default"` | حجم الزر المُشغّل | +| `align` | `"start" \| "end"` | لا | `"start"` | الحافة التي تصطف النافذة المنبثقة معها في الزر المُشغّل | +| `side` | `"top" \| "bottom"` | لا | `"bottom"` | الجانب المفضل للنافذة المنبثقة — يتبدّل عند عدم وجود مساحة في منفذ العرض | +| `searchable` | `boolean` | لا | `true` | إظهار حقل البحث | +| `searchPlaceholder` | `string` | لا | `"Search regions..."` | النص النائب لحقل البحث | +| `emptyMessage` | `React.ReactNode` | لا | `"No results"` | المحتوى المعروض عندما لا يطابق البحث أي نتيجة | +| `disabled` | `boolean` | لا | `false` | تعطيل الزر المُشغّل | +| `showSummary` | `boolean` | لا | `true` | إظهار بطاقة ملخص القيم الافتراضية المشتقة للإعدادات المحلية | +| `labels` | `Partial` | لا | — | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | +| `classNames` | `LocalePickerClassNames` | لا | — | أصناف لكل جزء: `trigger`، `content`، `search`، `list`، `item`، `empty`، `summary` | +| `className` | `string` | لا | — | أصناف CSS إضافية | القيمة المحددة وسم BCP 47 كامل: جزء **المنطقة** فيه هو المنطقة المختارة، ويبقى جزء **اللغة** سليمًا عند تغيير المنطقة. اختيار ألمانيا من `en-IN` ينتج `en-DE`؛ واختيارها من `fr-JP` ينتج `fr-DE`. @@ -133,12 +133,12 @@ import { LocalePicker } from "@/components/ui/locale-picker"; تشتق بطاقة الملخص كل شيء من الإعدادات المحلية المحددة عبر `Intl` — دون بيانات مضمّنة تتجاوز جدول ISO 4217 الاحتياطي لرمز العملة: -| الصف | المصدر | -| -------------- | -------------------------------------------------------------------------------- | -| العملة | المنطقة ← رمز ISO 4217، مع معاينة بـ `Intl.NumberFormat` (`style: "currency"`) | -| تنسيق التاريخ | `Intl.DateTimeFormat` (`dateStyle: "medium"`) بتاريخ عيّنة ثابت | -| تنسيق الأرقام | `Intl.NumberFormat` بمبلغ عيّنة ثابت | -| يبدأ الأسبوع يوم | `Intl.Locale#getWeekInfo()` حيثما توفر، مع احتياط إقليمي | +| الصف | المصدر | +| ---------------- | ------------------------------------------------------------------------------ | +| العملة | المنطقة ← رمز ISO 4217، مع معاينة بـ `Intl.NumberFormat` (`style: "currency"`) | +| تنسيق التاريخ | `Intl.DateTimeFormat` (`dateStyle: "medium"`) بتاريخ عيّنة ثابت | +| تنسيق الأرقام | `Intl.NumberFormat` بمبلغ عيّنة ثابت | +| يبدأ الأسبوع يوم | `Intl.Locale#getWeekInfo()` حيثما توفر، مع احتياط إقليمي | تعرض المناطق التي لا تملك ربطًا بعملة شرطةً طويلة بدلًا من التخمين. @@ -146,15 +146,15 @@ import { LocalePicker } from "@/components/ui/locale-picker"; تتبع النافذة المنبثقة نمط combobox في WAI-ARIA: يبقى التركيز في حقل البحث، الذي يُعرض كـ `role="combobox"`، ويُعلَن عن الخيار المميّز عبر `aria-activedescendant`. -| المفتاح | الإجراء | -| -------------------------------- | ------------------------------------------------------------- | -| `Enter`، `Space`، أو النقر | افتح النافذة المنبثقة من الزر المُشغّل | -| `ArrowDown` / `ArrowUp` (مغلقة) | افتح مع تمييز أول منطقة / آخرها | -| `ArrowDown` / `ArrowUp` | انقل التمييز، مع الالتفاف عند الطرفين | -| `Home` / `End` | مميّز أول منطقة / آخرها | -| `Enter` | اختر المنطقة المميّزة وأعد التركيز إلى الزر المُشغّل | -| `Escape` | أغلق النافذة المنبثقة وأعد التركيز إلى الزر المُشغّل | -| الكتابة | صفِّ حسب الاسم أو الرمز؛ يبدأ التمييز من الأعلى مجددًا | +| المفتاح | الإجراء | +| ------------------------------- | ------------------------------------------------------ | +| `Enter`، `Space`، أو النقر | افتح النافذة المنبثقة من الزر المُشغّل | +| `ArrowDown` / `ArrowUp` (مغلقة) | افتح مع تمييز أول منطقة / آخرها | +| `ArrowDown` / `ArrowUp` | انقل التمييز، مع الالتفاف عند الطرفين | +| `Home` / `End` | مميّز أول منطقة / آخرها | +| `Enter` | اختر المنطقة المميّزة وأعد التركيز إلى الزر المُشغّل | +| `Escape` | أغلق النافذة المنبثقة وأعد التركيز إلى الزر المُشغّل | +| الكتابة | صفِّ حسب الاسم أو الرمز؛ يبدأ التمييز من الأعلى مجددًا | ## الميزات [#features] diff --git a/content/docs/components/locale-pickers/locale-picker.es.mdx b/content/docs/components/locale-pickers/locale-picker.es.mdx index bc5f324..3b2a7e7 100644 --- a/content/docs/components/locale-pickers/locale-picker.es.mdx +++ b/content/docs/components/locale-pickers/locale-picker.es.mdx @@ -105,27 +105,27 @@ import { LocalePicker } from "@/components/ui/locale-picker"; ## Props [#props] -| Prop | Tipo | Obligatorio | Predeterminado | Descripción | -| ------------------- | ------------------------------------- | -------- | --------------------- | ------------------------------------------------------------------------------------ | -| `regions` | `string[]` | Sí | — | Regiones entre las que elegir, en códigos ISO 3166-1 alpha-2 | -| `value` | `string` | No | — | Configuración regional seleccionada (BCP 47): pásala para controlar el componente | -| `defaultValue` | `string` | No | `en-` | Configuración regional inicial cuando no está controlada | -| `onValueChange` | `(locale: string) => void` | No | — | Callback que se ejecuta cuando cambia la región; recibe la nueva etiqueta BCP 47 | -| `label` | `"native" \| "english"` | No | `"english"` | Nombres de región en inglés o localizados según la configuración regional seleccionada | -| `showFlags` | `boolean` | No | `true` | Muestra el emoji de bandera de la región junto a su nombre | -| `maxHeight` | `number \| string` | No | `"15rem"` | Altura máxima de la lista de opciones antes de que aparezca el desplazamiento | -| `variant` | `"outline" \| "ghost" \| "secondary"` | No | `"outline"` | Estilo del disparador | -| `size` | `"sm" \| "default" \| "lg"` | No | `"default"` | Tamaño del disparador | -| `align` | `"start" \| "end"` | No | `"start"` | Borde del disparador con el que se alinea el popup | -| `side` | `"top" \| "bottom"` | No | `"bottom"` | Lado preferido del popup; cambia de lado si el viewport no tiene espacio | -| `searchable` | `boolean` | No | `true` | Muestra el campo de búsqueda | -| `searchPlaceholder` | `string` | No | `"Search regions..."` | Marcador de posición del campo de búsqueda | -| `emptyMessage` | `React.ReactNode` | No | `"No results"` | Contenido que se muestra cuando la búsqueda no coincide con nada | -| `disabled` | `boolean` | No | `false` | Desactiva el disparador | -| `showSummary` | `boolean` | No | `true` | Muestra la tarjeta de resumen de los valores predeterminados derivados de la configuración regional | -| `labels` | `Partial` | No | — | Sustituye el texto de interfaz en inglés integrado (consulta más abajo) | -| `classNames` | `LocalePickerClassNames` | No | — | Clases por parte: `trigger`, `content`, `search`, `list`, `item`, `empty`, `summary` | -| `className` | `string` | No | — | Clases CSS adicionales | +| Prop | Tipo | Obligatorio | Predeterminado | Descripción | +| ------------------- | ------------------------------------- | ----------- | --------------------- | --------------------------------------------------------------------------------------------------- | +| `regions` | `string[]` | Sí | — | Regiones entre las que elegir, en códigos ISO 3166-1 alpha-2 | +| `value` | `string` | No | — | Configuración regional seleccionada (BCP 47): pásala para controlar el componente | +| `defaultValue` | `string` | No | `en-` | Configuración regional inicial cuando no está controlada | +| `onValueChange` | `(locale: string) => void` | No | — | Callback que se ejecuta cuando cambia la región; recibe la nueva etiqueta BCP 47 | +| `label` | `"native" \| "english"` | No | `"english"` | Nombres de región en inglés o localizados según la configuración regional seleccionada | +| `showFlags` | `boolean` | No | `true` | Muestra el emoji de bandera de la región junto a su nombre | +| `maxHeight` | `number \| string` | No | `"15rem"` | Altura máxima de la lista de opciones antes de que aparezca el desplazamiento | +| `variant` | `"outline" \| "ghost" \| "secondary"` | No | `"outline"` | Estilo del disparador | +| `size` | `"sm" \| "default" \| "lg"` | No | `"default"` | Tamaño del disparador | +| `align` | `"start" \| "end"` | No | `"start"` | Borde del disparador con el que se alinea el popup | +| `side` | `"top" \| "bottom"` | No | `"bottom"` | Lado preferido del popup; cambia de lado si el viewport no tiene espacio | +| `searchable` | `boolean` | No | `true` | Muestra el campo de búsqueda | +| `searchPlaceholder` | `string` | No | `"Search regions..."` | Marcador de posición del campo de búsqueda | +| `emptyMessage` | `React.ReactNode` | No | `"No results"` | Contenido que se muestra cuando la búsqueda no coincide con nada | +| `disabled` | `boolean` | No | `false` | Desactiva el disparador | +| `showSummary` | `boolean` | No | `true` | Muestra la tarjeta de resumen de los valores predeterminados derivados de la configuración regional | +| `labels` | `Partial` | No | — | Sustituye el texto de interfaz en inglés integrado (consulta más abajo) | +| `classNames` | `LocalePickerClassNames` | No | — | Clases por parte: `trigger`, `content`, `search`, `list`, `item`, `empty`, `summary` | +| `className` | `string` | No | — | Clases CSS adicionales | El valor seleccionado es una etiqueta BCP 47 completa: su subetiqueta **de región** es la región elegida, y su subetiqueta **de idioma** se mantiene al cambiar de región. Elegir Alemania desde `en-IN` da como resultado `en-DE`; elegirla desde `fr-JP` da como resultado `fr-DE`. @@ -133,12 +133,12 @@ El valor seleccionado es una etiqueta BCP 47 completa: su subetiqueta **de regi La tarjeta de resumen deriva todo de la configuración regional seleccionada mediante `Intl`; no incluye más datos que una tabla de reserva de códigos ISO 4217 para el código de moneda: -| Fila | Origen | -| -------------- | -------------------------------------------------------------------------------- | -| Moneda | Región → código ISO 4217, con vista previa mediante `Intl.NumberFormat` (`style: "currency"`) | -| Formato de fecha | `Intl.DateTimeFormat` (`dateStyle: "medium"`) con una fecha de ejemplo fija | -| Formato de número | `Intl.NumberFormat` con un importe de ejemplo fijo | -| La semana empieza el | `Intl.Locale#getWeekInfo()` cuando está disponible, con un valor regional de reserva | +| Fila | Origen | +| -------------------- | --------------------------------------------------------------------------------------------- | +| Moneda | Región → código ISO 4217, con vista previa mediante `Intl.NumberFormat` (`style: "currency"`) | +| Formato de fecha | `Intl.DateTimeFormat` (`dateStyle: "medium"`) con una fecha de ejemplo fija | +| Formato de número | `Intl.NumberFormat` con un importe de ejemplo fijo | +| La semana empieza el | `Intl.Locale#getWeekInfo()` cuando está disponible, con un valor regional de reserva | Las regiones sin asignación de moneda muestran un guion largo en lugar de una suposición. @@ -146,15 +146,15 @@ Las regiones sin asignación de moneda muestran un guion largo en lugar de una s El popup sigue el patrón combobox de WAI-ARIA: el foco permanece en el campo de búsqueda, que se expone como `role="combobox"`, y la opción resaltada se anuncia mediante `aria-activedescendant`. -| Clave | Acción | -| -------------------------------- | ------------------------------------------------------------- | -| `Enter`, `Space` o clic | Abre el popup desde el disparador | -| `ArrowDown` / `ArrowUp` (cerrado) | Abre con la primera / última región resaltada | -| `ArrowDown` / `ArrowUp` | Mueve el resaltado, dando la vuelta en ambos extremos | -| `Home` / `End` | Resalta la primera / última región | -| `Enter` | Selecciona la región resaltada y devuelve el foco al disparador | -| `Escape` | Cierra el popup y devuelve el foco al disparador | -| Escritura | Filtra por nombre o código; el resaltado vuelve al principio | +| Clave | Acción | +| --------------------------------- | --------------------------------------------------------------- | +| `Enter`, `Space` o clic | Abre el popup desde el disparador | +| `ArrowDown` / `ArrowUp` (cerrado) | Abre con la primera / última región resaltada | +| `ArrowDown` / `ArrowUp` | Mueve el resaltado, dando la vuelta en ambos extremos | +| `Home` / `End` | Resalta la primera / última región | +| `Enter` | Selecciona la región resaltada y devuelve el foco al disparador | +| `Escape` | Cierra el popup y devuelve el foco al disparador | +| Escritura | Filtra por nombre o código; el resaltado vuelve al principio | ## Características [#features] diff --git a/content/docs/components/locale-pickers/locale-picker.ja.mdx b/content/docs/components/locale-pickers/locale-picker.ja.mdx index d2449bc..4b13027 100644 --- a/content/docs/components/locale-pickers/locale-picker.ja.mdx +++ b/content/docs/components/locale-pickers/locale-picker.ja.mdx @@ -105,27 +105,27 @@ import { LocalePicker } from "@/components/ui/locale-picker"; ## Props [#props] -| Prop | 型 | 必須 | デフォルト | 説明 | -| ------------------- | ------------------------------------- | -------- | --------------------- | ------------------------------------------------------------------------------------ | -| `regions` | `string[]` | はい | — | 選択できる地域。ISO 3166-1 alpha-2 コードで指定します | -| `value` | `string` | いいえ | — | 選択中のロケール（BCP 47）。コンポーネントを制御するにはこの値を渡します | -| `defaultValue` | `string` | いいえ | `en-` | 非制御時の初期選択ロケール | -| `onValueChange` | `(locale: string) => void` | いいえ | — | 地域が変更されたときのコールバック。新しい BCP 47 タグを受け取ります | -| `label` | `"native" \| "english"` | いいえ | `"english"` | 地域名を英語で表示するか、選択中のロケールに合わせてローカライズして表示します | -| `showFlags` | `boolean` | いいえ | `true` | 地域名の横に国旗の絵文字を表示します | -| `maxHeight` | `number \| string` | いいえ | `"15rem"` | スクロールが始まるまでの、スクロールする選択肢一覧の最大の高さ | -| `variant` | `"outline" \| "ghost" \| "secondary"` | いいえ | `"outline"` | トリガーのスタイル | -| `size` | `"sm" \| "default" \| "lg"` | いいえ | `"default"` | トリガーのサイズ | -| `align` | `"start" \| "end"` | いいえ | `"start"` | ポップアップを揃えるトリガーの辺 | -| `side` | `"top" \| "bottom"` | いいえ | `"bottom"` | ポップアップの優先表示側。ビューポートに十分なスペースがない場合は反転します | -| `searchable` | `boolean` | いいえ | `true` | 検索欄を表示します | -| `searchPlaceholder` | `string` | いいえ | `"Search regions..."` | 検索欄のプレースホルダー | -| `emptyMessage` | `React.ReactNode` | いいえ | `"No results"` | 検索に一致する項目がない場合に表示される内容 | -| `disabled` | `boolean` | いいえ | `false` | トリガーを無効にします | -| `showSummary` | `boolean` | いいえ | `true` | 導出されたロケールのデフォルト値のサマリーカードを表示します | -| `labels` | `Partial` | いいえ | — | 組み込みの英語 UI テキストを上書きします（下記参照） | -| `classNames` | `LocalePickerClassNames` | いいえ | — | パーツごとのクラス: `trigger`、`content`、`search`、`list`、`item`、`empty`、`summary` | -| `className` | `string` | いいえ | — | 追加の CSS クラス | +| Prop | 型 | 必須 | デフォルト | 説明 | +| ------------------- | ------------------------------------- | ------ | --------------------- | -------------------------------------------------------------------------------------- | +| `regions` | `string[]` | はい | — | 選択できる地域。ISO 3166-1 alpha-2 コードで指定します | +| `value` | `string` | いいえ | — | 選択中のロケール（BCP 47）。コンポーネントを制御するにはこの値を渡します | +| `defaultValue` | `string` | いいえ | `en-` | 非制御時の初期選択ロケール | +| `onValueChange` | `(locale: string) => void` | いいえ | — | 地域が変更されたときのコールバック。新しい BCP 47 タグを受け取ります | +| `label` | `"native" \| "english"` | いいえ | `"english"` | 地域名を英語で表示するか、選択中のロケールに合わせてローカライズして表示します | +| `showFlags` | `boolean` | いいえ | `true` | 地域名の横に国旗の絵文字を表示します | +| `maxHeight` | `number \| string` | いいえ | `"15rem"` | スクロールが始まるまでの、スクロールする選択肢一覧の最大の高さ | +| `variant` | `"outline" \| "ghost" \| "secondary"` | いいえ | `"outline"` | トリガーのスタイル | +| `size` | `"sm" \| "default" \| "lg"` | いいえ | `"default"` | トリガーのサイズ | +| `align` | `"start" \| "end"` | いいえ | `"start"` | ポップアップを揃えるトリガーの辺 | +| `side` | `"top" \| "bottom"` | いいえ | `"bottom"` | ポップアップの優先表示側。ビューポートに十分なスペースがない場合は反転します | +| `searchable` | `boolean` | いいえ | `true` | 検索欄を表示します | +| `searchPlaceholder` | `string` | いいえ | `"Search regions..."` | 検索欄のプレースホルダー | +| `emptyMessage` | `React.ReactNode` | いいえ | `"No results"` | 検索に一致する項目がない場合に表示される内容 | +| `disabled` | `boolean` | いいえ | `false` | トリガーを無効にします | +| `showSummary` | `boolean` | いいえ | `true` | 導出されたロケールのデフォルト値のサマリーカードを表示します | +| `labels` | `Partial` | いいえ | — | 組み込みの英語 UI テキストを上書きします（下記参照） | +| `classNames` | `LocalePickerClassNames` | いいえ | — | パーツごとのクラス: `trigger`、`content`、`search`、`list`、`item`、`empty`、`summary` | +| `className` | `string` | いいえ | — | 追加の CSS クラス | 選択された値は完全な BCP 47 タグです。 その **地域** サブタグは選んだ地域になり、**言語** サブタグは地域を変更しても保持されます。 `en-IN` からドイツを選ぶと `en-DE` になり、`fr-JP` から選ぶと `fr-DE` になります。 @@ -133,12 +133,12 @@ import { LocalePicker } from "@/components/ui/locale-picker"; サマリーカードは、選択中のロケールから `Intl` を通じてすべての値を導出します。 通貨コードには ISO 4217 のフォールバックテーブルのみを同梱しており、それ以外のデータは同梱していません: -| 行 | 取得元 | -| -------------- | -------------------------------------------------------------------------------- | -| 通貨 | 地域 → ISO 4217 コード。`Intl.NumberFormat`（`style: "currency"`）でプレビュー | -| 日付の書式 | 固定のサンプル日付における `Intl.DateTimeFormat`（`dateStyle: "medium"`） | -| 数値の書式 | 固定のサンプル金額における `Intl.NumberFormat` | -| 週の開始曜日 | 利用可能な場合は `Intl.Locale#getWeekInfo()`、それ以外は地域のフォールバック | +| 行 | 取得元 | +| ------------ | ------------------------------------------------------------------------------ | +| 通貨 | 地域 → ISO 4217 コード。`Intl.NumberFormat`（`style: "currency"`）でプレビュー | +| 日付の書式 | 固定のサンプル日付における `Intl.DateTimeFormat`（`dateStyle: "medium"`） | +| 数値の書式 | 固定のサンプル金額における `Intl.NumberFormat` | +| 週の開始曜日 | 利用可能な場合は `Intl.Locale#getWeekInfo()`、それ以外は地域のフォールバック | 通貨の対応付けがない地域では、推測せずにダッシュ（—）を表示します。 @@ -146,15 +146,15 @@ import { LocalePicker } from "@/components/ui/locale-picker"; ポップアップは WAI-ARIA のコンボボックスパターンに従います。 フォーカスは検索欄に留まり、検索欄は `role="combobox"` として公開されます。 ハイライトされた選択肢は `aria-activedescendant` を通じて読み上げられます。 -| キー | 操作 | -| -------------------------------- | ------------------------------------------------------------- | -| `Enter`、`Space`、またはクリック | トリガーからポップアップを開きます | -| `ArrowDown` / `ArrowUp`（閉じている状態） | 最初または最後の地域がハイライトされた状態で開きます | -| `ArrowDown` / `ArrowUp` | ハイライトを移動します。両端で循環します | -| `Home` / `End` | 最初または最後の地域をハイライトします | -| `Enter` | ハイライトされた地域を選択し、フォーカスをトリガーに戻します | -| `Escape` | ポップアップを閉じ、フォーカスをトリガーに戻します | -| 入力 | 名前またはコードで絞り込みます。ハイライトは先頭に戻ります | +| キー | 操作 | +| ----------------------------------------- | ------------------------------------------------------------ | +| `Enter`、`Space`、またはクリック | トリガーからポップアップを開きます | +| `ArrowDown` / `ArrowUp`（閉じている状態） | 最初または最後の地域がハイライトされた状態で開きます | +| `ArrowDown` / `ArrowUp` | ハイライトを移動します。両端で循環します | +| `Home` / `End` | 最初または最後の地域をハイライトします | +| `Enter` | ハイライトされた地域を選択し、フォーカスをトリガーに戻します | +| `Escape` | ポップアップを閉じ、フォーカスをトリガーに戻します | +| 入力 | 名前またはコードで絞り込みます。ハイライトは先頭に戻ります | ## 機能 [#features] diff --git a/content/docs/components/locale-pickers/meta.ar.json b/content/docs/components/locale-pickers/meta.ar.json index 47396c5..d36bd2a 100644 --- a/content/docs/components/locale-pickers/meta.ar.json +++ b/content/docs/components/locale-pickers/meta.ar.json @@ -1,8 +1,6 @@ { "title": "منتقيات الإعدادات المحلية", "icon": "MapPin", - "pages": [ - "locale-picker" - ], + "pages": ["locale-picker"], "collapsible": false } diff --git a/content/docs/components/locale-pickers/meta.es.json b/content/docs/components/locale-pickers/meta.es.json index 9e1624e..c0ea557 100644 --- a/content/docs/components/locale-pickers/meta.es.json +++ b/content/docs/components/locale-pickers/meta.es.json @@ -1,8 +1,6 @@ { "title": "Selectores de configuración regional", "icon": "MapPin", - "pages": [ - "locale-picker" - ], + "pages": ["locale-picker"], "collapsible": false } diff --git a/content/docs/components/locale-pickers/meta.ja.json b/content/docs/components/locale-pickers/meta.ja.json index 9920cf5..fbd17a2 100644 --- a/content/docs/components/locale-pickers/meta.ja.json +++ b/content/docs/components/locale-pickers/meta.ja.json @@ -1,8 +1,6 @@ { "title": "ロケールピッカー", "icon": "MapPin", - "pages": [ - "locale-picker" - ], + "pages": ["locale-picker"], "collapsible": false } diff --git a/content/docs/components/meta.ar.json b/content/docs/components/meta.ar.json index 574544d..df95ca1 100644 --- a/content/docs/components/meta.ar.json +++ b/content/docs/components/meta.ar.json @@ -1,11 +1,4 @@ { "title": "المكوّنات", - "pages": [ - "index", - "language-switchers", - "locale-pickers", - "navigation", - "inputs", - "translation" - ] + "pages": ["index", "language-switchers", "locale-pickers", "navigation", "inputs", "translation"] } diff --git a/content/docs/components/meta.es.json b/content/docs/components/meta.es.json index 12e5e45..a948e03 100644 --- a/content/docs/components/meta.es.json +++ b/content/docs/components/meta.es.json @@ -1,11 +1,4 @@ { "title": "Componentes", - "pages": [ - "index", - "language-switchers", - "locale-pickers", - "navigation", - "inputs", - "translation" - ] + "pages": ["index", "language-switchers", "locale-pickers", "navigation", "inputs", "translation"] } diff --git a/content/docs/components/meta.ja.json b/content/docs/components/meta.ja.json index 0277c49..255db0e 100644 --- a/content/docs/components/meta.ja.json +++ b/content/docs/components/meta.ja.json @@ -1,11 +1,4 @@ { "title": "コンポーネント", - "pages": [ - "index", - "language-switchers", - "locale-pickers", - "navigation", - "inputs", - "translation" - ] + "pages": ["index", "language-switchers", "locale-pickers", "navigation", "inputs", "translation"] } diff --git a/content/docs/components/navigation/meta.ar.json b/content/docs/components/navigation/meta.ar.json index c671d0d..6a66f09 100644 --- a/content/docs/components/navigation/meta.ar.json +++ b/content/docs/components/navigation/meta.ar.json @@ -1,7 +1,5 @@ { "title": "التنقل", "icon": "PanelTop", - "pages": [ - "navbar" - ] + "pages": ["navbar"] } diff --git a/content/docs/components/navigation/meta.es.json b/content/docs/components/navigation/meta.es.json index 144bc17..b59eab5 100644 --- a/content/docs/components/navigation/meta.es.json +++ b/content/docs/components/navigation/meta.es.json @@ -1,7 +1,5 @@ { "title": "Navegación", "icon": "PanelTop", - "pages": [ - "navbar" - ] + "pages": ["navbar"] } diff --git a/content/docs/components/navigation/meta.ja.json b/content/docs/components/navigation/meta.ja.json index 06b10f6..e69d901 100644 --- a/content/docs/components/navigation/meta.ja.json +++ b/content/docs/components/navigation/meta.ja.json @@ -1,7 +1,5 @@ { "title": "ナビゲーション", "icon": "PanelTop", - "pages": [ - "navbar" - ] + "pages": ["navbar"] } diff --git a/content/docs/components/navigation/navbar.ar.mdx b/content/docs/components/navigation/navbar.ar.mdx index c706765..1391682 100644 --- a/content/docs/components/navigation/navbar.ar.mdx +++ b/content/docs/components/navigation/navbar.ar.mdx @@ -120,26 +120,26 @@ export function SiteNav() { ## الخصائص [#props] -| الخاصية | النوع | مطلوب | الوصف | -| --------------- | --------------------------------- | -------- | ----------------------------------------------------------------------------- | -| `logo` | `React.ReactNode` | لا | عنصر الشعار (يُعرض قبل روابط التنقل) | -| `links` | `NavLink[]` | لا | روابط التنقل | -| `activeHref` | `string` | لا | `href` للصفحة الحالية — يحصل على `aria-current` وتمييز | -| `locales` | `Locale[]` | لا | الإعدادات المحلية المتاحة لمحدّد اللغة | -| `value` | `string` | لا | رمز الإعدادات المحلية المحدد — مرّره للتحكم في المكوّن | -| `defaultValue` | `string` | لا | رمز الإعدادات المحلية الأولي عند عدم التحكم (الافتراضي: أول إعدادات محلية) | -| `onValueChange` | `(code: string) => void` | لا | دالة استدعاء عند تغيّر الإعدادات المحلية | -| `cta` | `{ label: string; href: string }` | لا | زر الإجراء الرئيسي | -| `showGitHub` | `boolean` | لا | يعرض زر أيقونة GitHub. يحتاج إلى `githubUrl`، وبدونه لا يُعرض شيء | -| `githubUrl` | `string` | لا | عنوان URL كامل، أو اختصار `"owner"` / `"owner/repo"` لـ github.com | -| `sticky` | `boolean` | لا | يجعل شريط التنقل ثابتًا في أعلى الصفحة (القيمة الافتراضية: `true`) | -| `variant` | `"default" \| "floating"` | لا | شريط بعرض كامل أو بطاقة عائمة داخلية (القيمة الافتراضية: `"default"`) | -| `showFlags` | `boolean` | لا | يعرض الأعلام في مبدّل اللغة (القيمة الافتراضية: `true`) | -| `maxHeight` | `number \| string` | لا | أقصى ارتفاع لقائمة اللغات القابلة للتمرير (القيمة الافتراضية: `"15rem"`) | -| `linkComponent` | `React.ElementType` | لا | المكوّن المستخدم للروابط الداخلية (القيمة الافتراضية: `"a"`) | -| `labels` | `Partial` | لا | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | -| `classNames` | `NavBarClassNames` | لا | تجاوزات الأصناف لكل جزء (انظر أدناه) | -| `className` | `string` | لا | أصناف CSS إضافية | +| الخاصية | النوع | مطلوب | الوصف | +| --------------- | --------------------------------- | ----- | -------------------------------------------------------------------------- | +| `logo` | `React.ReactNode` | لا | عنصر الشعار (يُعرض قبل روابط التنقل) | +| `links` | `NavLink[]` | لا | روابط التنقل | +| `activeHref` | `string` | لا | `href` للصفحة الحالية — يحصل على `aria-current` وتمييز | +| `locales` | `Locale[]` | لا | الإعدادات المحلية المتاحة لمحدّد اللغة | +| `value` | `string` | لا | رمز الإعدادات المحلية المحدد — مرّره للتحكم في المكوّن | +| `defaultValue` | `string` | لا | رمز الإعدادات المحلية الأولي عند عدم التحكم (الافتراضي: أول إعدادات محلية) | +| `onValueChange` | `(code: string) => void` | لا | دالة استدعاء عند تغيّر الإعدادات المحلية | +| `cta` | `{ label: string; href: string }` | لا | زر الإجراء الرئيسي | +| `showGitHub` | `boolean` | لا | يعرض زر أيقونة GitHub. يحتاج إلى `githubUrl`، وبدونه لا يُعرض شيء | +| `githubUrl` | `string` | لا | عنوان URL كامل، أو اختصار `"owner"` / `"owner/repo"` لـ github.com | +| `sticky` | `boolean` | لا | يجعل شريط التنقل ثابتًا في أعلى الصفحة (القيمة الافتراضية: `true`) | +| `variant` | `"default" \| "floating"` | لا | شريط بعرض كامل أو بطاقة عائمة داخلية (القيمة الافتراضية: `"default"`) | +| `showFlags` | `boolean` | لا | يعرض الأعلام في مبدّل اللغة (القيمة الافتراضية: `true`) | +| `maxHeight` | `number \| string` | لا | أقصى ارتفاع لقائمة اللغات القابلة للتمرير (القيمة الافتراضية: `"15rem"`) | +| `linkComponent` | `React.ElementType` | لا | المكوّن المستخدم للروابط الداخلية (القيمة الافتراضية: `"a"`) | +| `labels` | `Partial` | لا | تجاوز نصوص الواجهة الإنجليزية المدمجة (انظر أدناه) | +| `classNames` | `NavBarClassNames` | لا | تجاوزات الأصناف لكل جزء (انظر أدناه) | +| `className` | `string` | لا | أصناف CSS إضافية | أي خاصية أخرى تُمرَّر إلى عنصر `