# لوحتا الأسعار

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

الصفحة: https://ritla.app/ar/ui/pricing-pair

## التثبيت

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

```bash
npx ritla add pricing-pair
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/pricing-pair
```

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

## الاستخدام

```tsx
import { PricingFeatures, PricingPair, PricingPanel, PricingPlan, PricingPlans } from "@/components/ui/pricing-pair";

<PricingPair>
  <PricingPanel tone="brand" eyebrow="One-time purchase" title="Card kit">
    <PricingFeatures items={["Card designs, lifetime updates", "A license key for your team"]} />
  </PricingPanel>
  <PricingPanel eyebrow="Monthly subscription" title="Accounts">
    <PricingPlans label="Account plans">
      {plans.map((p) => <PricingPlan key={p.id} name={p.name} amount={p.amount} currency="USD" period="/mo" description={p.text} />)}
    </PricingPlans>
  </PricingPanel>
</PricingPair>
```

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

### `PricingPair`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `children` | `ReactNode` | لا يوجد | لوحتا `PricingPanel`: ما يُشترى مرة واحدة، ثم ما يُشترك فيه. |

### `PricingPanel`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `eyebrow` | `ReactNode` | لا يوجد | التسمية الصغيرة فوق العنوان. بأحرف كبيرة في الإنجليزية، وبلا تباعد بين الحروف في العربية. |
| `title` | `ReactNode` | لا يوجد | اسم المنتج، ويظهر عنوانًا للوحة. |
| `headingLevel` | `2 \| 3 \| 4` | `3` | مستوى العنوان تحت عنوان القسم. |
| `tone` | `"default" \| "brand"` | `"default"` | `brand` يضع اللوحة على الشريط السماوي. |

### `PricingPlan`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `name` | `ReactNode` | لا يوجد | اسم الخطة. |
| `amount` | `number` | لا يوجد | المبلغ من بيانات أسعارك؛ لا يُكتب أي مبلغ داخل المكوّن. |
| `currency` | `string` | لا يوجد | رمز ISO 4217 من بياناتك (`USD` أو `SAR`). |
| `period` | `ReactNode` | لا يوجد | بعد المبلغ بخط أصغر («شهريًا»). اتركه فارغًا للخطة المجانية. |
| `description` | `ReactNode` | لا يوجد | ما تشمله الخطة، في سطر. |

### `PricingPlans`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `label` | `string` | لا يوجد | اسم القائمة لقارئ الشاشة («خطط الحساب»). |

### `PricingFeatures`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `items` | `ReactNode[]` | لا يوجد | ما تشمله، سطر لكل بند. |

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

ARIA:

- كل لوحة `section` بعنوان، والخطط قائمة باسم `label`، والمزايا قائمة.
- المبلغ وعملته وحدة معزولة، فلا يتبدّل ترتيبهما داخل النص العربي.

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

ينعكس:

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

لا ينعكس:

- علامة الصح لا تنعكس، والمبلغ يبقى بترتيب لغته.

الأرقام: الأسعار بالأرقام الغربية (`123`) دائمًا في اللغتين، مهما كان إعداد الأرقام، لتطابق صفحة إتمام الشراء. العملة من بياناتك.

الخط العربي: العنوان `body-20` بوزن Medium، والمبلغ `heading-32`، والتسمية `label-12` في الإنجليزية و`label-14` في العربية.

النص ثنائي الاتجاه: المبلغ معزول؛ أسماء المنتجات اللاتينية تُعزل داخل النص العربي.