NYX/docs/docs.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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nyx · Documentation</title>
<meta name="description" content="Documentation for Nyx — components, usage, and live examples." />
<link rel="canonical" href="https://fadyehabamer.github.io/NYX/docs/docs.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="Nyx · Documentation" />
<meta property="og:description" content="Documentation for Nyx — components, usage, and live examples." />
<meta property="og:url" content="https://fadyehabamer.github.io/NYX/docs/docs.html" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ar_AR" />
<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="Nyx — dark-native CSS & JS design system with Luminous Depth, full RTL and Arabic typography" />
<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="Nyx — dark-native CSS & JS design system with Luminous Depth, full RTL and Arabic typography" />
<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&family=Aref+Ruqaa:wght@400;700&family=Lalezar&display=swap" rel="stylesheet" />
<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="Open navigation">☰</button>
    <a class="docs-logo" href="../index.html"><img src="../assets/logo-white.png" alt="Nyx" width="75" height="22" /></a>
    <div class="docs-navlinks hide-sm">
      <a href="docs.html" class="active">Docs</a>
      <a href="../index.html">Home</a>
      <a href="docs.ar.html">العربية</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="Open command palette">
      <span class="nyx-search-icon" aria-hidden="true">⌕</span>
      <input type="text" placeholder="Search docs…" aria-label="Search docs" 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="Toggle light/dark theme" title="Toggle theme">◐</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">Star</span></a>
  </div>
</nav>

<!-- ===================== DOCS SHELL ===================== -->
<div class="docs-grid">
  <aside class="docs-side" id="docsSide" aria-label="Component navigation"><!-- built by docs.js --></aside>
  <main class="docs-main" id="docsMain"><!-- routed page --></main>
  <aside class="docs-toc" id="docsToc" aria-label="On this page"><!-- built by docs.js --></aside>
</div>
<div class="docs-backdrop" id="docsBackdrop"></div>

<!-- ===================== SHARED OVERLAY INSTANCES (referenced by pages) ===================== -->
<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">Invite teammates</h3>
      <button class="nyx-btn nyx-btn-icon nyx-btn-ghost" aria-label="Close" data-nyx-dismiss>✕</button>
    </div>
    <p class="nyx-muted" style="margin-bottom:var(--nyx-s4)">Send an invite link — they will join your workspace instantly.</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="Email" /></div>
    <div class="nyx-flex nyx-justify-between nyx-gap-3">
      <button class="nyx-btn nyx-btn-ghost" data-nyx-dismiss>Cancel</button>
      <button class="nyx-btn nyx-btn-primary" onclick="Nyx.toast('Invite sent ✓','success');Nyx.closeAll()">Send invite</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">Notifications</h3>
    <button class="nyx-btn nyx-btn-icon nyx-btn-ghost" aria-label="Close" data-nyx-dismiss>✕</button>
  </div>
  <div class="nyx-stack">
    <div class="nyx-alert nyx-alert-info"><span class="nyx-alert-icon">✦</span><div>New comment on <strong>Roadmap</strong>.</div></div>
    <div class="nyx-alert nyx-alert-success"><span class="nyx-alert-icon">✓</span><div>Deploy <strong>#482</strong> succeeded.</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">Filters</h3>
    <button class="nyx-close" aria-label="Close" data-nyx-dismiss>✕</button>
  </div>
  <div class="nyx-stack">
    <label class="nyx-checkbox"><input type="checkbox" checked><span class="nyx-box"></span> Active</label>
    <label class="nyx-checkbox"><input type="checkbox"><span class="nyx-box"></span> Archived</label>
    <label class="nyx-checkbox"><input type="checkbox"><span class="nyx-box"></span> Draft</label>
  </div>
</aside>

<div class="nyx-command-palette" id="commandPalette" role="dialog" aria-modal="true" aria-label="Command palette">
  <div class="nyx-cp-box">
    <div class="nyx-cp-input"><span class="nyx-search-icon">⌕</span><input placeholder="Jump to a component…" aria-label="Command search" /><span class="nyx-command">esc</span></div>
    <div class="nyx-cp-list">
      <a class="nyx-cp-item" href="#/buttons">⚡ Buttons</a>
      <a class="nyx-cp-item" href="#/cards">🃏 Cards</a>
      <a class="nyx-cp-item" href="#/inputs">📝 Forms</a>
      <a class="nyx-cp-item" href="#/tables">📊 Tables &amp; Data</a>
      <a class="nyx-cp-item" href="#/modal">🪟 Modal</a>
      <a class="nyx-cp-item" href="#/spotlight">✦ Spotlight</a>
    </div>
  </div>
</div>

<aside class="nyx-sheet" id="docSheet" role="dialog" aria-modal="true" aria-label="Quick actions">
  <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">Quick actions</h3>
    <button class="nyx-btn nyx-btn-icon nyx-btn-ghost" aria-label="Close" data-nyx-dismiss>✕</button>
  </div>
  <div class="nyx-list-group">
    <a class="nyx-list-item">✎ Edit item</a>
    <a class="nyx-list-item">⧉ Duplicate</a>
    <a class="nyx-list-item">↗ Share link</a>
  </div>
</aside>

<script src="../nyx.js"></script>
<script src="docs.js"></script>
</body>
</html>