NYX/docs/docs.ar.html at main · fadyehabamer/NYX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="ar" dir="rtl" data-theme="dark" data-font="thmanyah">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>نيكس · التوثيق</title>
<meta name="description" content="توثيق نيكس — المكوّنات والاستخدام وأمثلة حيّة. أول مكتبة CSS مبنية للمطوّرين العرب." />
<link rel="canonical" href="https://fadyehabamer.github.io/NYX/docs/docs.ar.html" />
<link rel="alternate" hreflang="en" href="https://fadyehabamer.github.io/NYX/docs/docs.html" />
<link rel="alternate" hreflang="ar" href="https://fadyehabamer.github.io/NYX/docs/docs.ar.html" />
<link rel="alternate" hreflang="x-default" href="https://fadyehabamer.github.io/NYX/docs/docs.html" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Nyx" />
<meta property="og:title" content="نيكس · التوثيق" />
<meta property="og:description" content="توثيق نيكس — المكوّنات والاستخدام وأمثلة حيّة. أول مكتبة CSS مبنية للمطوّرين العرب." />
<meta property="og:url" content="https://fadyehabamer.github.io/NYX/docs/docs.ar.html" />
<meta property="og:locale" content="ar_AR" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:image" content="https://fadyehabamer.github.io/NYX/assets/og-image.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="نيكس — نظام تصميم CSS وJS داكن بطابع العمق المضيء، مع دعم كامل للعربية وRTL" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://fadyehabamer.github.io/NYX/assets/og-image.png" />
<meta name="twitter:image:alt" content="نيكس — نظام تصميم CSS وJS داكن بطابع العمق المضيء، مع دعم كامل للعربية وRTL" />
<link rel="icon" href="../assets/favicon.svg" type="image/svg+xml" />
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16.png" />
<link rel="apple-touch-icon" href="../assets/apple-touch-icon.png" />
<meta name="theme-color" content="#0b0b0f" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="../fonts/thmanyah.css" />
<link rel="stylesheet" href="../nyx.css" />
<link rel="stylesheet" href="docs.css" />
</head>
<body class="nyx nyx-reset">

<!-- ===================== NAVBAR ===================== -->
<nav class="nyx-navbar">
  <div class="nyx-flex nyx-items-center nyx-gap-4">
    <button class="nyx-btn nyx-btn-icon nyx-btn-ghost docs-menu-btn" id="docsMenuBtn" aria-label="فتح القائمة">☰</button>
    <a class="docs-logo" href="../index.ar.html"><img src="../assets/logo-white.png" alt="نيكس" width="75" height="22" /></a>
    <div class="docs-navlinks hide-sm">
      <a href="docs.ar.html" class="active">التوثيق</a>
      <a href="../index.ar.html">الرئيسية</a>
      <a href="docs.html">EN</a>
    </div>
  </div>
  <div class="nyx-flex nyx-items-center nyx-gap-3">
    <div class="nyx-search hide-sm" role="button" tabindex="0" data-nyx-toggle="command" aria-label="فتح لوحة الأوامر">
      <span class="nyx-search-icon" aria-hidden="true">⌕</span>
      <input type="text" placeholder="ابحث في التوثيق…" aria-label="بحث" tabindex="-1" readonly />
      <span class="nyx-command">⌘K</span>
    </div>
    <span class="nyx-badge nyx-badge-info hide-sm">v1.1.0</span>
    <button class="nyx-btn nyx-btn-icon nyx-btn-ghost" onclick="Nyx.toggleTheme()" aria-label="تبديل السمة" title="تبديل السمة">◐</button>
    <a class="nyx-btn nyx-btn-glass nyx-btn-sm" href="https://github.com/fadyehabamer/NYX" target="_blank" rel="noopener" aria-label="نجمة على GitHub">★ <span class="hide-sm">نجمة</span></a>
  </div>
</nav>

<div class="nyx-container" style="padding-block:var(--nyx-s3) 0">
  <div class="nyx-banner"><span class="nyx-badge nyx-badge-info">عربي</span> أوّل مكتبة CSS مبنية للمطوّرين العرب — بدعم RTL كامل وخطوط عربية. <a href="../index.ar.html" class="nyx-gradient-text" style="font-weight:600">الصفحة الرئيسية ←</a></div>
</div>

<!-- ===================== DOCS SHELL ===================== -->
<div class="docs-grid">
  <aside class="docs-side" id="docsSide" aria-label="تنقّل المكوّنات"></aside>
  <main class="docs-main" id="docsMain"></main>
  <aside class="docs-toc" id="docsToc" aria-label="في هذه الصفحة"></aside>
</div>
<div class="docs-backdrop" id="docsBackdrop"></div>

<!-- ===================== SHARED OVERLAY INSTANCES ===================== -->
<div class="nyx-modal" id="docModal" role="dialog" aria-modal="true" aria-labelledby="docModalTitle">
  <div class="nyx-modal-box">
    <div class="nyx-flex nyx-items-center nyx-justify-between" style="margin-bottom:var(--nyx-s4)">
      <h3 class="nyx-h3" id="docModalTitle">دعوة الزملاء</h3>
      <button class="nyx-close" aria-label="إغلاق" data-nyx-dismiss>✕</button>
    </div>
    <p class="nyx-muted" style="margin-bottom:var(--nyx-s4)">أرسل رابط دعوة — وسينضمّون إلى مساحة عملك فوراً.</p>
    <div class="nyx-input-group" style="margin-bottom:var(--nyx-s4)"><span class="nyx-addon">✉</span><input class="nyx-input" placeholder="name@team.com" aria-label="البريد الإلكتروني" /></div>
    <div class="nyx-flex nyx-justify-between nyx-gap-3">
      <button class="nyx-btn nyx-btn-ghost" data-nyx-dismiss>إلغاء</button>
      <button class="nyx-btn nyx-btn-primary" onclick="Nyx.toast('تم إرسال الدعوة ✓','success');Nyx.closeAll()">إرسال الدعوة</button>
    </div>
  </div>
</div>

<aside class="nyx-drawer" id="docDrawer" role="dialog" aria-modal="true" aria-labelledby="docDrawerTitle">
  <div class="nyx-flex nyx-items-center nyx-justify-between" style="margin-bottom:var(--nyx-s5)">
    <h3 class="nyx-h3" id="docDrawerTitle">الإشعارات</h3>
    <button class="nyx-close" aria-label="إغلاق" data-nyx-dismiss>✕</button>
  </div>
  <div class="nyx-stack">
    <div class="nyx-alert nyx-alert-info"><span class="nyx-alert-icon">✦</span><div>تعليق جديد على <strong>خارطة الطريق</strong>.</div></div>
    <div class="nyx-alert nyx-alert-success"><span class="nyx-alert-icon">✓</span><div>نجح النشر <strong>#482</strong>.</div></div>
  </div>
</aside>

<aside class="nyx-drawer nyx-drawer-left" id="docDrawerLeft" role="dialog" aria-modal="true" aria-labelledby="docDrawerLeftTitle">
  <div class="nyx-flex nyx-items-center nyx-justify-between" style="margin-bottom:var(--nyx-s5)">
    <h3 class="nyx-h3" id="docDrawerLeftTitle">المرشّحات</h3>
    <button class="nyx-close" aria-label="إغلاق" data-nyx-dismiss>✕</button>
  </div>
  <div class="nyx-stack">
    <label class="nyx-checkbox"><input type="checkbox" checked><span class="nyx-box"></span> نشط</label>
    <label class="nyx-checkbox"><input type="checkbox"><span class="nyx-box"></span> مؤرشف</label>
    <label class="nyx-checkbox"><input type="checkbox"><span class="nyx-box"></span> مسودّة</label>
  </div>
</aside>

<div class="nyx-command-palette" id="commandPalette" role="dialog" aria-modal="true" aria-label="لوحة الأوامر">
  <div class="nyx-cp-box">
    <div class="nyx-cp-input"><span class="nyx-search-icon">⌕</span><input placeholder="انتقل إلى مكوّن…" aria-label="بحث الأوامر" /><span class="nyx-command">esc</span></div>
    <div class="nyx-cp-list">
      <a class="nyx-cp-item" href="#/buttons">⚡ الأزرار</a>
      <a class="nyx-cp-item" href="#/cards">🃏 البطاقات</a>
      <a class="nyx-cp-item" href="#/inputs">📝 النماذج</a>
      <a class="nyx-cp-item" href="#/big-type">🅰 الخط الكبير</a>
      <a class="nyx-cp-item" href="#/rtl">↔ دعم RTL</a>
    </div>
  </div>
</div>

<aside class="nyx-sheet" id="docSheet" role="dialog" aria-modal="true" aria-label="إجراءات سريعة">
  <div class="nyx-sheet-grip"></div>
  <div class="nyx-flex nyx-items-center nyx-justify-between" style="margin-bottom:var(--nyx-s4)">
    <h3 class="nyx-h3">إجراءات سريعة</h3>
    <button class="nyx-btn nyx-btn-icon nyx-btn-ghost" aria-label="إغلاق" data-nyx-dismiss>✕</button>
  </div>
  <div class="nyx-list-group">
    <a class="nyx-list-item">✎ تعديل</a>
    <a class="nyx-list-item">⧉ تكرار</a>
    <a class="nyx-list-item">↗ مشاركة الرابط</a>
  </div>
</aside>

<script src="../nyx.js"></script>
<script>document.documentElement.setAttribute('dir', 'rtl'); document.documentElement.setAttribute('lang', 'ar');</script>
<script src="docs.ar.js"></script>
<script src="docs.js"></script>
</body>
</html>