# إطار العيّنة

> عيّنة حيّة فوق رابط إلى صفحتها، في شبكة تفصل بينها خطوط رفيعة. يتلوّن الإطار عند تمرير المؤشر فوقه وحين يكون التركيز داخله.

الصفحة: https://ritla.app/ar/ui/specimen-frame

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add specimen-frame
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/specimen-frame
```

الاعتماديات: `@phosphor-icons/react`

## الاستخدام

```tsx
import { SpecimenFrame, SpecimenGrid } from "@/components/ui/specimen-frame";

<SpecimenGrid>
  <SpecimenFrame title="Phone number" href="/docs/components/phone-input">
    <PhoneInput label="Phone number" defaultCountry="SA" />
  </SpecimenFrame>
</SpecimenGrid>
```

## أمثلة

### عمودان وعدد فردي من الإطارات

مع `columns={2}`: تبقى الخطوط بين الإطارات رفيعة، والخانة الفارغة لا ترسم شيئًا.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/specimen-frame-two-columns

## مرجع الخصائص

### `SpecimenGrid`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `columns` | `2 \| 3` | `3` | عدد الأعمدة من `lg`. عمود واحد على الهاتف، وعمودان من `md`. |
| `children` | `ReactNode` | لا يوجد | إطارات `SpecimenFrame`. |

### `SpecimenFrame`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `title` | `ReactNode` | لا يوجد | اسم المكوّن في رابط أسفل الإطار. |
| `href` | `string` | لا يوجد | وجهة الرابط: صفحة المكوّن. |
| `render` | `ReactElement` | لا يوجد | رابط التوجيه (`<Link>`) بمظهر رابط الإطار، بدل `href`. |
| `children` | `ReactNode` | لا يوجد | العيّنة الحيّة. |

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

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: إلى عناصر العيّنة، ثم إلى رابط الإطار.

ARIA:

- الرابط يحمل اسم المكوّن، فقائمة روابط قارئ الشاشة تقرأ «رقم الهاتف» لا «اعرض المزيد».
- السهم زخرفي ومخفي عن قارئ الشاشة.

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

ينعكس:

- الإطارات تبدأ من اليمين، وخط الفصل على الجهة اليسرى من كل إطار.
- سهم الرابط يشير إلى اليسار.

لا ينعكس:

- العيّنة نفسها: كلٌّ يتبع قواعده، فحقل الهاتف يبقى من اليسار إلى اليمين.

الأرقام: لا أرقام يكتبها الإطار بنفسه؛ العيّنات تتبع إعداد الأرقام.

الخط العربي: الرابط `body-14` بوزن Medium.