@nexa-stack/framework 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/README.md +5 -7
  2. package/bin/nexa.ts +25 -11
  3. package/docs/UI_RULES.md +19 -0
  4. package/package.json +4 -15
  5. package/packages/core/src/app.ts +1 -1
  6. package/public/admin-assets/nexa.umd.js +80 -0
  7. package/public/admin.html +6 -4
  8. package/public/app.html +19 -0
  9. package/public/index.html +22 -66
  10. package/public/assets/blog-CGOdzgkO.js +0 -1
  11. package/public/assets/blog-ML7LFtff.js +0 -1
  12. package/public/assets/components-B_D1ccvJ.js +0 -50
  13. package/public/assets/components-C67m2tNE.js +0 -1
  14. package/public/assets/components-DCNIrNdJ.js +0 -50
  15. package/public/assets/components-DZ9oc9zI.js +0 -1
  16. package/public/assets/contact-CAfovn36.js +0 -1
  17. package/public/assets/contact-bMUqmce3.js +0 -1
  18. package/public/assets/docs-B92Otuxs.js +0 -20
  19. package/public/assets/docs-BGOHuCe3.js +0 -20
  20. package/public/assets/docs-BUkg7Pd2.css +0 -1
  21. package/public/assets/echarts-mount-DdBiYEc1.js +0 -19
  22. package/public/assets/echarts-mount-kJrXh_za.js +0 -19
  23. package/public/assets/echarts-nexa-BsAEVjT0.js +0 -1
  24. package/public/assets/integration-BNpFB3SL.js +0 -1
  25. package/public/assets/integration-Br6tmvWh.js +0 -1
  26. package/public/assets/integration-D7vdPco_.js +0 -1
  27. package/public/assets/main-BBkehs0N.js +0 -1
  28. package/public/assets/main-Cx_-Fq0O.css +0 -1
  29. package/public/assets/main-ny0uOGg1.js +0 -1
  30. package/public/assets/src-B4_Kaae6.css +0 -1
  31. package/public/assets/src-BfdoaLcc.js +0 -1
  32. package/public/assets/src-D__MdyFu.js +0 -1
  33. package/public/cards/README.md +0 -17
  34. package/public/cards/bloom.jpg +0 -0
  35. package/public/compare.html +0 -66
  36. package/public/docs.html +0 -315
  37. package/public/favicon.svg +0 -11
  38. package/public/nexa-hero-sculpture-1280.png +0 -0
  39. package/public/nexa-hero-sculpture-640.png +0 -0
  40. package/public/nexa-hero-sculpture-960.png +0 -0
  41. package/public/nexa-hero-sculpture.png +0 -0
  42. package/public/nexa-hero-sculpture.webp +0 -0
  43. package/public/nexa-mark-24.png +0 -0
  44. package/public/nexa-mark-256.png +0 -0
  45. package/public/nexa-mark-32.png +0 -0
  46. package/public/nexa-mark-40.png +0 -0
  47. package/public/nexa-mark-48.png +0 -0
  48. package/public/nexa-mark-512.png +0 -0
  49. package/public/nexa-mark-64.png +0 -0
  50. package/public/nexa-mark-96.png +0 -0
  51. package/public/nexa-mark-apple.png +0 -0
  52. package/public/nexa-mark-product-256.png +0 -0
  53. package/public/nexa-mark-product.png +0 -0
  54. package/public/nexa-mark-source.png +0 -0
  55. package/public/nexa-mark-trim.png +0 -0
  56. package/public/nexa-mark.png +0 -0
  57. package/public/nexa-mark.webp +0 -0
  58. package/public/nexa-palette-vision.png +0 -0
  59. package/public/nexa-wordmark.png +0 -0
  60. package/public/nexa-wordmark.webp +0 -0
  61. package/public/og.png +0 -0
  62. package/public/site/about.html +0 -101
  63. package/public/site/blog.html +0 -87
  64. package/public/site/components.html +0 -251
  65. package/public/site/contact.html +0 -72
  66. package/public/site/docs/buttons.html +0 -157
  67. package/public/site/docs/cards.html +0 -159
  68. package/public/site/docs/colors.html +0 -216
  69. package/public/site/docs/commands.html +0 -170
  70. package/public/site/docs/data.html +0 -122
  71. package/public/site/docs/feedback.html +0 -111
  72. package/public/site/docs/forms.html +0 -117
  73. package/public/site/docs/icons.html +0 -125
  74. package/public/site/docs/index.html +0 -82
  75. package/public/site/docs/installation.html +0 -83
  76. package/public/site/docs/layout.html +0 -116
  77. package/public/site/docs/media.html +0 -96
  78. package/public/site/docs/navigation.html +0 -122
  79. package/public/site/docs/overlays.html +0 -95
  80. package/public/site/docs/pickers.html +0 -126
  81. package/public/site/docs/sections.html +0 -111
  82. package/public/site/docs/typography.html +0 -97
  83. package/public/site/docs/usage.html +0 -76
  84. package/public/site/features.html +0 -107
  85. package/public/site/index.html +0 -117
  86. package/public/site/integration.html +0 -43
  87. package/public/site/pricing.html +0 -87
  88. package/ui/cards/README.md +0 -17
  89. package/ui/cards/bloom.jpg +0 -0
  90. package/ui/echarts-mount-DWNKcqeo.js +0 -22945
  91. package/ui/echarts-nexa-BY8eW9ug.js +0 -456
  92. package/ui/favicon.svg +0 -11
  93. package/ui/nexa-hero-sculpture-1280.png +0 -0
  94. package/ui/nexa-hero-sculpture-640.png +0 -0
  95. package/ui/nexa-hero-sculpture-960.png +0 -0
  96. package/ui/nexa-hero-sculpture.png +0 -0
  97. package/ui/nexa-hero-sculpture.webp +0 -0
  98. package/ui/nexa-mark-24.png +0 -0
  99. package/ui/nexa-mark-256.png +0 -0
  100. package/ui/nexa-mark-32.png +0 -0
  101. package/ui/nexa-mark-40.png +0 -0
  102. package/ui/nexa-mark-48.png +0 -0
  103. package/ui/nexa-mark-512.png +0 -0
  104. package/ui/nexa-mark-64.png +0 -0
  105. package/ui/nexa-mark-96.png +0 -0
  106. package/ui/nexa-mark-apple.png +0 -0
  107. package/ui/nexa-mark-product-256.png +0 -0
  108. package/ui/nexa-mark-product.png +0 -0
  109. package/ui/nexa-mark-source.png +0 -0
  110. package/ui/nexa-mark-trim.png +0 -0
  111. package/ui/nexa-mark.png +0 -0
  112. package/ui/nexa-mark.webp +0 -0
  113. package/ui/nexa-palette-vision.png +0 -0
  114. package/ui/nexa-wordmark.png +0 -0
  115. package/ui/nexa-wordmark.webp +0 -0
  116. package/ui/nexa.js +0 -2971
  117. package/ui/nexa.umd.js +0 -80
  118. package/ui/og.png +0 -0
  119. package/ui/types/components/art.d.ts +0 -11
  120. package/ui/types/components/card-layouts.d.ts +0 -11
  121. package/ui/types/components/card.d.ts +0 -11
  122. package/ui/types/components/charts.d.ts +0 -7
  123. package/ui/types/components/extra.d.ts +0 -2
  124. package/ui/types/components/helpers.d.ts +0 -18
  125. package/ui/types/components/icons.d.ts +0 -24
  126. package/ui/types/components/index.d.ts +0 -2
  127. package/ui/types/components/pickers.d.ts +0 -8
  128. package/ui/types/components/structure.d.ts +0 -2
  129. package/ui/types/core/behaviors.d.ts +0 -2
  130. package/ui/types/core/brand-assets.d.ts +0 -44
  131. package/ui/types/core/colormap.d.ts +0 -49
  132. package/ui/types/core/echarts-mount.d.ts +0 -5
  133. package/ui/types/core/echarts-nexa.d.ts +0 -71
  134. package/ui/types/core/parser.d.ts +0 -11
  135. package/ui/types/core/registry.d.ts +0 -13
  136. package/ui/types/core/renderer.d.ts +0 -14
  137. package/ui/types/core/schema.d.ts +0 -8
  138. package/ui/types/core/toast.d.ts +0 -11
  139. package/ui/types/core/validate.d.ts +0 -1
  140. package/ui/types/index.d.ts +0 -50
  141. /package/{ui → public/admin-assets}/nexa.css +0 -0
@@ -1,251 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Nexa — Component Library</title>
7
- <link rel="icon" href="/favicon.svg" type="image/svg+xml">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
11
- <style>
12
- .lib{max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,48px)}
13
- .lib h1{margin:0 0 8px;font:800 clamp(28px,4vw,40px)/1.1 Inter,sans-serif;color:#0B1220}
14
- .lib>p{margin:0 0 24px;color:#5B6478;font:15px/1.6 Inter,sans-serif;max-width:72ch}
15
- .toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
16
- .toc a{font:600 12px/1 Inter,sans-serif;padding:7px 12px;border-radius:999px;background:#eef3ff;color:#2a4a8a;text-decoration:none;transition:transform .15s,box-shadow .15s}
17
- .toc a:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(46,158,255,.14)}
18
- .block{
19
- margin-bottom:22px;
20
- background:linear-gradient(165deg,#fff 0%,#f8fbff 55%,#f6f3ff 100%);
21
- border:1px solid rgba(46,158,255,.12);border-radius:20px;
22
- padding:22px 24px;box-shadow:0 14px 40px rgba(15,23,42,.05);
23
- }
24
- .block h2{margin:0 0 4px;font:800 17px/1.2 Inter,sans-serif;color:#0B1220}
25
- .block>p{margin:0 0 14px;color:#5B6478;font:13px/1.5 Inter,sans-serif}
26
- .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
27
- .col{display:flex;flex-direction:column;gap:12px}
28
- .grid-2{display:grid;gap:16px;grid-template-columns:1fr 1fr}
29
- .grid-3{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
30
- .card-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
31
- @media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
32
- code{font:600 12px/1.4 ui-monospace,Consolas,monospace;background:#eef3ff;padding:2px 6px;border-radius:6px;color:#2a4a8a}
33
- .toast-demo{display:grid;gap:14px;grid-template-columns:1fr auto;align-items:start}
34
- @media(max-width:700px){.toast-demo{grid-template-columns:1fr}}
35
- .figure-hero{
36
- margin:0 auto;max-width:820px;
37
- }
38
- .figure-hero .nexa-host.nexa-figure,
39
- .figure-hero figure{
40
- width:100%;
41
- }
42
- </style>
43
- <script type="module" crossorigin src="/assets/components-DZ9oc9zI.js"></script>
44
- <link rel="modulepreload" crossorigin href="/assets/components-B_D1ccvJ.js">
45
- <link rel="modulepreload" crossorigin href="/assets/main-ny0uOGg1.js">
46
- <link rel="modulepreload" crossorigin href="/assets/src-BfdoaLcc.js">
47
- <link rel="stylesheet" crossorigin href="/assets/main-Cx_-Fq0O.css">
48
- <link rel="stylesheet" crossorigin href="/assets/src-B4_Kaae6.css">
49
- </head>
50
- <body nexa="luxury light brand font-inter essential">
51
-
52
- <header
53
- nexa="header vision dock"
54
- logo-href="/site/index.html"
55
- links="Home|/site/index.html,Components|/site/components.html,Features|/site/features.html,Pricing|/site/pricing.html,About|/site/about.html,Blog|/site/blog.html,Contact|/site/contact.html"
56
- cta="Start free"
57
- cta-href="/site/pricing.html"></header>
58
-
59
- <main class="lib">
60
- <h1>Nexa Component Library</h1>
61
- <p>Live widgets with brand motion (<code>essential</code>), card models, and unified toast styling — same markup for preview and <code>nexa.toast()</code>.</p>
62
-
63
- <nav class="toc" aria-label="Sections">
64
- <a href="#cards">Cards</a>
65
- <a href="#controls">Controls</a>
66
- <a href="#forms">Forms</a>
67
- <a href="#pickers">Pickers</a>
68
- <a href="#feedback">Feedback</a>
69
- <a href="#figure">Figure</a>
70
- <a href="#layers">Layers</a>
71
- <a href="#data">Data</a>
72
- <a href="#structure">Structure</a>
73
- <a href="#media">Media</a>
74
- <a href="#blocks">Blocks</a>
75
- </nav>
76
-
77
- <section class="block" id="cards">
78
- <h2>Cards — motion models</h2>
79
- <p><code>card glow</code> · <code>card lift</code> · <code>card tilt</code> · <code>card aurora</code> · <code>card shine</code></p>
80
- <div class="card-row">
81
- <article nexa="card glow" badge="GLOW" title="Glow hover" text="Soft scale + brand shadow on hover."></article>
82
- <article nexa="card lift" badge="LIFT" title="Lift hover" text="Rises with depth — pricing/feature style."></article>
83
- <article nexa="card tilt" badge="TILT" title="3D tilt" text="Move the pointer — perspective tilt."></article>
84
- <article nexa="card aurora glass" badge="AURORA" title="Aurora loop" text="Gradient background animation."></article>
85
- <article nexa="card shine" badge="SHINE" title="Shine sweep" text="Light sweep across the surface."></article>
86
- <article nexa="card icon glow" badge="ICON" title="Icon layout" text="Gradient icon tile + motion."></article>
87
- </div>
88
- </section>
89
-
90
- <section class="block" id="controls">
91
- <h2>Controls</h2>
92
- <p><code>btn</code> · <code>badge</code> · <code>dropdown</code> · <code>button-group</code> · <code>switch</code></p>
93
- <div class="row">
94
- <button nexa="btn primary pill">Primary</button>
95
- <button nexa="btn outline">Outline</button>
96
- <button nexa="btn ghost">Ghost</button>
97
- <span nexa="badge">NEW</span>
98
- <span nexa="ico bold" name="sparkles"></span>
99
- </div>
100
- <div class="row" style="margin-top:14px">
101
- <div nexa="dropdown" label="Actions" items="Edit,Duplicate,Archive"></div>
102
- <div nexa="button-group" buttons="Save,Preview,Publish"></div>
103
- <div nexa="switch checked" label="Notifications"></div>
104
- </div>
105
- </section>
106
-
107
- <section class="block" id="forms">
108
- <h2>Forms</h2>
109
- <p><code>form validate</code> · <code>field</code> · <code>select</code> · <code>textarea</code></p>
110
- <form nexa="form validate" id="demo-form" style="max-width:420px">
111
- <div nexa="field email float required" name="email" label="Email"></div>
112
- <div nexa="select" name="plan" label="Plan" options="Starter,Pro,Studio"></div>
113
- <div nexa="textarea" name="msg" label="Message" rows="3"></div>
114
- <button nexa="btn primary pill block" type="submit">Validate</button>
115
- </form>
116
- </section>
117
-
118
- <section class="block" id="pickers">
119
- <h2>Pickers</h2>
120
- <p><code>datepicker</code> · <code>timepicker</code> · <code>autocomplete</code> · <code>rating</code> · <code>stepper</code> · <code>chips</code></p>
121
- <div class="grid-2">
122
- <div nexa="datepicker" label="Date" value="2026-08-28"></div>
123
- <div nexa="timepicker" label="Time" value="14:30" step="15"></div>
124
- </div>
125
- <div style="margin-top:14px" nexa="autocomplete" label="Framework" placeholder="Search…" options="Nexa,Bootstrap,Material,Tailwind"></div>
126
- <div class="grid-3" style="margin-top:14px">
127
- <div nexa="rating" value="4" max="5"></div>
128
- <div nexa="stepper" items="Account,Project,Launch" current="2"></div>
129
- <div nexa="chips" items="HTML,CSS,TypeScript"></div>
130
- </div>
131
- </section>
132
-
133
- <section class="block" id="feedback">
134
- <h2>Feedback</h2>
135
- <p><code>alert</code> · <code>progress</code> · <code>spinner</code> · <code>skeleton</code> · <code>toast</code> + <code>nexa.toast()</code></p>
136
- <div class="col">
137
- <div nexa="alert success" title="Success" text="Changes saved."></div>
138
- <div nexa="alert warning" title="Warning" text="Check settings before continuing."></div>
139
- <div nexa="progress" label="Upload" value="72"></div>
140
- <div class="row">
141
- <div nexa="spinner"></div>
142
- <div nexa="skeleton lines-3"></div>
143
- </div>
144
- </div>
145
- <div class="toast-demo" style="margin-top:16px">
146
- <div>
147
- <p style="margin:0 0 10px;font:600 12px/1.4 Inter,sans-serif;color:#5B6478">Static preview (same markup as API):</p>
148
- <div nexa="toast success" text="Saved successfully"></div>
149
- </div>
150
- <div class="col">
151
- <button nexa="btn outline" type="button" id="toast-one">Show toast</button>
152
- <button nexa="btn primary pill" type="button" id="toast-queue">Toast queue (3)</button>
153
- </div>
154
- </div>
155
- </section>
156
-
157
- <section class="block" id="figure">
158
- <h2>Figure — bloom asset</h2>
159
- <p>Same image already used on this page — centered mid-layout for review. Local: <code>/cards/bloom.jpg</code></p>
160
- <div class="figure-hero">
161
- <figure nexa="figure ratio-16x9"
162
- image="/cards/bloom.jpg"
163
- caption="Bloom · 16:9"></figure>
164
- </div>
165
- </section>
166
-
167
- <section class="block" id="layers">
168
- <h2>Layers</h2>
169
- <p><code>modal</code> · <code>sheet</code> · <code>offcanvas</code> · <code>popover</code> · <code>tooltip</code></p>
170
- <div class="row">
171
- <button nexa="btn primary" data-modal-open="demo-modal">Modal</button>
172
- <button nexa="btn outline" data-sheet-open="demo-sheet">Sheet</button>
173
- <button nexa="btn ghost" data-offcanvas-open="demo-oc">Offcanvas</button>
174
- <div nexa="popover" label="Info" text="Popover content"></div>
175
- <span nexa="tooltip" label="?" text="Tooltip help"></span>
176
- </div>
177
- <div id="demo-modal" nexa="modal" title="Confirm" text="Proceed with this action?" cta="OK" cancel="Cancel"></div>
178
- <div id="demo-sheet" nexa="sheet" title="Quick settings" text="Bottom sheet content." cta="Done"></div>
179
- <div id="demo-oc" nexa="offcanvas" title="Side panel" text="Offcanvas navigation."></div>
180
- </section>
181
-
182
- <section class="block" id="data">
183
- <h2>Data &amp; Charts</h2>
184
- <p><code>table</code> · <code>stat</code> · <code>chart pro</code></p>
185
- <div nexa="table striped hover"
186
- headers="Name|Plan|Status|Amount"
187
- rows="Loay|Pro|Active|$19;Sara|Free|Pending|$0;Omar|Team|Active|$49"></div>
188
- <div nexa="stat" style="margin-top:14px" stats="Users|12.4k;Revenue|$48k;Uptime|99.9%;NPS|72"></div>
189
- <div class="grid-2" style="margin-top:14px">
190
- <div nexa="chart bar pro" title="Growth" data="Jan|42;Feb|58;Mar|71;Apr|88"></div>
191
- <div nexa="chart donut pro" title="Mix" data="Pro|48;Studio|27;Starter|25"></div>
192
- </div>
193
- </section>
194
-
195
- <section class="block" id="structure">
196
- <h2>Structure</h2>
197
- <p><code>tree</code> · <code>timeline</code> · <code>transfer</code> · <code>tabs</code> · <code>accordion</code></p>
198
- <div class="grid-2">
199
- <div nexa="tree" items="src/core/parser.ts,src/components/pickers.ts,docs/PICKERS.md"></div>
200
- <div nexa="timeline" items="Launch|Today|Library page live.;Pickers|Week|Date, time, AC.;Structure|Shipped|Tree, TL, transfer."></div>
201
- </div>
202
- <div style="margin-top:14px" nexa="transfer"
203
- source="Dashboard,Billing,Team,API,Logs"
204
- target="Team,API"
205
- left-label="Available"
206
- right-label="Selected"></div>
207
- <div class="grid-2" style="margin-top:14px">
208
- <div nexa="tabs pills" tabs="One|First panel.;Two|Second panel.;Three|Third panel."></div>
209
- <div nexa="accordion" items="What is Nexa?|Command-first UI engine.;Need React?|No — Vanilla TS.;Docs?|See docs/ folder."></div>
210
- </div>
211
- </section>
212
-
213
- <section class="block" id="media">
214
- <h2>Media &amp; Nav</h2>
215
- <p><code>avatar</code> · <code>carousel</code> · <code>breadcrumb</code> · <code>pagination</code></p>
216
- <div class="grid-2">
217
- <div class="row">
218
- <div nexa="avatar male" name="Alex"></div>
219
- <div nexa="avatar" name="NX"></div>
220
- </div>
221
- <div nexa="carousel autoplay" interval="3500"
222
- slides="One|First slide.;Two|Second slide.;Three|Third slide."></div>
223
- </div>
224
- <div class="row" style="margin-top:14px">
225
- <nav nexa="breadcrumb" items="Home,Components,Library"></nav>
226
- <nav nexa="pagination" pages="5" current="2"></nav>
227
- </div>
228
- </section>
229
-
230
- <section class="block" id="blocks">
231
- <h2>Page blocks</h2>
232
- <p><code>auth compact</code> · <code>checkout compact</code> · <code>posts compact</code></p>
233
- <div nexa="posts compact cards-3"
234
- title="Blog preview"
235
- items="Color Map|One hex themes the site.|Aug 28;Pickers|Date, time, autocomplete.|Aug 25;Launch|Component library.|Aug 22"></div>
236
- <div class="grid-2" style="margin-top:18px">
237
- <div nexa="auth compact" title="Welcome back" subtitle="Sign in to continue."></div>
238
- <div nexa="checkout compact" title="Checkout" plan="Pro" total="$19"></div>
239
- </div>
240
- </section>
241
- </main>
242
-
243
- <footer
244
- nexa="footer dark"
245
- logo="Nexa"
246
- logo-image="/nexa-mark.png"
247
- logo-href="/site/index.html"
248
- copy="© 2026 Nexa Framework"></footer>
249
-
250
- </body>
251
- </html>
@@ -1,72 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Nexa — Contact</title>
7
- <link rel="icon" href="/favicon.svg" type="image/svg+xml">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
11
- <script type="module" crossorigin src="/assets/contact-CAfovn36.js"></script>
12
- <link rel="modulepreload" crossorigin href="/assets/components-B_D1ccvJ.js">
13
- <link rel="modulepreload" crossorigin href="/assets/main-ny0uOGg1.js">
14
- <link rel="modulepreload" crossorigin href="/assets/src-BfdoaLcc.js">
15
- <link rel="stylesheet" crossorigin href="/assets/main-Cx_-Fq0O.css">
16
- <link rel="stylesheet" crossorigin href="/assets/src-B4_Kaae6.css">
17
- </head>
18
- <body nexa="luxury light brand font-inter essential">
19
-
20
- <header
21
- nexa="header vision dock"
22
- logo-href="/site/index.html"
23
- links="Home|/site/index.html,Components|/site/components.html,Features|/site/features.html,Pricing|/site/pricing.html,About|/site/about.html,Blog|/site/blog.html,Contact|/site/contact.html"
24
- cta="Start free"
25
- cta-href="/site/pricing.html"></header>
26
-
27
- <section
28
- nexa="hero minimal centered"
29
- eyebrow="CONTACT"
30
- title="We are|here to help"
31
- text="Questions about Nexa, Enterprise, or partnerships — send a message and we will reply within one business day."
32
- cta="Email us"
33
- cta-href="mailto:hello@nexa.dev"></section>
34
-
35
- <div nexa="container">
36
- <div nexa="grid cols-2 gap-large" style="padding-block:clamp(40px,6vw,72px);align-items:start">
37
-
38
- <form nexa="form validate" id="contact-form">
39
- <span nexa="badge">Contact</span>
40
- <div nexa="alert info" title="Send a message" text="Required fields are marked with *"></div>
41
- <div nexa="field text float required" name="name" label="Full name"></div>
42
- <div nexa="field email float required" name="email" label="Email" hint="We never share it"></div>
43
- <div nexa="select required" name="topic" label="Topic" options="General,Enterprise,Partnership,Support"></div>
44
- <div nexa="textarea required" name="message" label="Message" rows="5" placeholder="How can we help?"></div>
45
- <div nexa="switch checked" label="Send me Nexa updates"></div>
46
- <button nexa="primary block pill shadow" type="submit">Send message</button>
47
- </form>
48
-
49
- <div nexa="stack gap-large">
50
- <div nexa="stat" stats="Response time|<24h;Languages|EN + AR;Support|Pro+"></div>
51
- <div nexa="chip removable">Enterprise</div>
52
- <div nexa="chips" items="Slack,Email,GitHub"></div>
53
- <nav nexa="breadcrumb" items="Home,Contact,Form"></nav>
54
- <figure nexa="figure ratio-16x9"
55
- image="https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&q=80"
56
- caption="Remote-first — global team"></figure>
57
- </div>
58
-
59
- </div>
60
- </div>
61
-
62
- <section
63
- nexa="cta bold"
64
- eyebrow="OR TRY IT"
65
- title="Explore|Nexa now."
66
- cta="See widgets"
67
- cta-href="/site/features.html"></section>
68
-
69
- <footer nexa="footer dark simple" logo="Nexa" logo-href="/site/index.html" copy="© 2026 Nexa Framework · hello@nexa.dev"></footer>
70
-
71
- </body>
72
- </html>
@@ -1,157 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Buttons - Nexa Docs</title>
7
- <link rel="icon" href="/favicon.svg" type="image/svg+xml">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
11
- <style>
12
- /* Inline boot: hide chrome until docs.ts adds .doc-ready (stops HTML flicker) */
13
- html:not(.doc-ready) body.doc-body > .doc-shell,
14
- html:not(.doc-ready) body.doc-body > .nexa-host { opacity: 0; }
15
- html { background: #F7F9FC; }
16
- </style>
17
- <script type="module" crossorigin src="/assets/components-B_D1ccvJ.js"></script>
18
- <script type="module" crossorigin src="/assets/docs-BGOHuCe3.js"></script>
19
- <link rel="stylesheet" crossorigin href="/assets/docs-BUkg7Pd2.css">
20
- </head>
21
- <body class="doc-body" nexa="luxury light brand font-inter essential">
22
-
23
- <header
24
- nexa="header vision dock"
25
- logo-href="/site/index.html"
26
- links="Docs|/site/docs/index.html,Home|/site/index.html,Components|/site/components.html,Features|/site/features.html,Pricing|/site/pricing.html,About|/site/about.html,Blog|/site/blog.html,Contact|/site/contact.html"
27
- cta="Start free"
28
- cta-href="/site/pricing.html"></header>
29
-
30
- <div class="doc-progress" data-doc-progress></div>
31
- <div class="doc-shell">
32
- <button class="doc-menu-toggle" type="button" data-doc-menu aria-expanded="false" aria-controls="doc-side">Browse docs <span>⌄</span></button>
33
- <aside class="doc-side" id="doc-side" data-doc-side></aside>
34
- <main class="doc-main">
35
- <div class="doc-crumb"><a href="/site/docs/index.html">Documentation</a><span>/</span><span>Buttons</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Buttons</h1><p class="doc-lead"><code>btn</code> / <code>button</code>, groups, dropdown, close, and badge.</p></div>
38
- <button type="button" class="doc-search" data-doc-search aria-label="Search documentation"><span>Search docs</span><kbd>⌘ K</kbd></button>
39
- </div>
40
-
41
-
42
- <h3>Variants</h3>
43
- <p>Primary actions and quieter alternatives.</p>
44
- <div class="doc-example">
45
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button</code></span><span class="doc-opt-tag"><code>btn</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">blue</span><span class="doc-opt is-mod">purple</span><span class="doc-opt is-mod">gold</span><span class="doc-opt is-mod">green</span><span class="doc-opt is-mod">orange</span><span class="doc-opt is-mod">black</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">small</span><span class="doc-opt is-mod">medium</span><span class="doc-opt is-mod">large</span><span class="doc-opt is-mod">compact</span><span class="doc-opt is-mod">sm</span><span class="doc-opt is-mod">block</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">loading</span><span class="doc-opt is-mod">round</span><span class="doc-opt is-mod">rounded</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">sharp</span><span class="doc-opt is-mod">shadow</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">strong</span><span class="doc-opt is-mod">s</span><span class="doc-opt is-more">+1 · <a href="/site/docs/commands.html">all →</a></span></div></div>
46
- <div class="doc-preview">
47
- <div class="doc-demo"><span class="doc-demo-label">primary</span><button nexa="btn primary">Primary</button></div>
48
- <div class="doc-demo"><span class="doc-demo-label">outline</span><button nexa="btn outline">Outline</button></div>
49
- <div class="doc-demo"><span class="doc-demo-label">ghost</span><button nexa="btn ghost">Ghost</button></div>
50
- <div class="doc-demo"><span class="doc-demo-label">danger</span><button nexa="btn danger">Danger</button></div>
51
- </div>
52
- <div class="doc-code">
53
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-tones">Copy</button></div>
54
- <pre><code id="btn-tones">&lt;button nexa="btn primary"&gt;Primary&lt;/button&gt;
55
- &lt;button nexa="btn outline"&gt;Outline&lt;/button&gt;
56
- &lt;button nexa="btn ghost"&gt;Ghost&lt;/button&gt;
57
- &lt;button nexa="btn danger"&gt;Danger&lt;/button&gt;</code></pre>
58
- </div>
59
- </div>
60
-
61
- <h3>Brand colors</h3>
62
- <p>Color modifiers on buttons.</p>
63
- <div class="doc-example">
64
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button</code></span><span class="doc-opt-tag"><code>btn</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">blue</span><span class="doc-opt is-mod">purple</span><span class="doc-opt is-mod">gold</span><span class="doc-opt is-mod">green</span><span class="doc-opt is-mod">orange</span><span class="doc-opt is-mod">black</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">small</span><span class="doc-opt is-mod">medium</span><span class="doc-opt is-mod">large</span><span class="doc-opt is-mod">compact</span><span class="doc-opt is-mod">sm</span><span class="doc-opt is-mod">block</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">loading</span><span class="doc-opt is-mod">round</span><span class="doc-opt is-mod">rounded</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">sharp</span><span class="doc-opt is-mod">shadow</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">strong</span><span class="doc-opt is-mod">s</span><span class="doc-opt is-more">+1 · <a href="/site/docs/commands.html">all →</a></span></div></div>
65
- <div class="doc-preview">
66
- <div class="doc-demo"><span class="doc-demo-label">blue</span><button nexa="btn blue">Blue</button></div>
67
- <div class="doc-demo"><span class="doc-demo-label">purple</span><button nexa="btn purple">Purple</button></div>
68
- <div class="doc-demo"><span class="doc-demo-label">gold</span><button nexa="btn gold">Gold</button></div>
69
- <div class="doc-demo"><span class="doc-demo-label">green</span><button nexa="btn green">Green</button></div>
70
- <div class="doc-demo"><span class="doc-demo-label">orange</span><button nexa="btn orange">Orange</button></div>
71
- <div class="doc-demo"><span class="doc-demo-label">black</span><button nexa="btn black">Black</button></div>
72
- </div>
73
- <div class="doc-code">
74
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-colors">Copy</button></div>
75
- <pre><code id="btn-colors">&lt;button nexa="btn blue"&gt;Blue&lt;/button&gt;
76
- &lt;button nexa="btn purple"&gt;Purple&lt;/button&gt;
77
- &lt;button nexa="btn gold"&gt;Gold&lt;/button&gt;
78
- &lt;button nexa="btn green"&gt;Green&lt;/button&gt;
79
- &lt;button nexa="btn orange"&gt;Orange&lt;/button&gt;
80
- &lt;button nexa="btn black"&gt;Black&lt;/button&gt;</code></pre>
81
- </div>
82
- </div>
83
-
84
- <h3>Shape & size</h3>
85
-
86
- <div class="doc-example">
87
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button</code></span><span class="doc-opt-tag"><code>btn</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">blue</span><span class="doc-opt is-mod">purple</span><span class="doc-opt is-mod">gold</span><span class="doc-opt is-mod">green</span><span class="doc-opt is-mod">orange</span><span class="doc-opt is-mod">black</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">small</span><span class="doc-opt is-mod">medium</span><span class="doc-opt is-mod">large</span><span class="doc-opt is-mod">compact</span><span class="doc-opt is-mod">sm</span><span class="doc-opt is-mod">block</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">loading</span><span class="doc-opt is-mod">round</span><span class="doc-opt is-mod">rounded</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">sharp</span><span class="doc-opt is-mod">shadow</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">strong</span><span class="doc-opt is-mod">s</span><span class="doc-opt is-more">+1 · <a href="/site/docs/commands.html">all →</a></span></div></div>
88
- <div class="doc-preview">
89
- <div class="doc-demo"><span class="doc-demo-label">pill</span><button nexa="btn primary pill">Start free</button></div>
90
- <div class="doc-demo"><span class="doc-demo-label">sm</span><button nexa="btn primary sm">Small</button></div>
91
- <div class="doc-demo"><span class="doc-demo-label">large</span><button nexa="btn primary large">Large</button></div>
92
- <div class="doc-demo"><span class="doc-demo-label">block</span><button nexa="btn primary block" style="min-width:160px">Block</button></div>
93
- </div>
94
- <div class="doc-code">
95
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-shape">Copy</button></div>
96
- <pre><code id="btn-shape">&lt;button nexa="btn primary pill"&gt;Start free&lt;/button&gt;
97
- &lt;button nexa="btn primary sm"&gt;Small&lt;/button&gt;
98
- &lt;button nexa="btn primary large"&gt;Large&lt;/button&gt;
99
- &lt;button nexa="btn primary block"&gt;Block&lt;/button&gt;</code></pre>
100
- </div>
101
- </div>
102
-
103
- <h3>Button group</h3>
104
-
105
- <div class="doc-example">
106
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>button-group</code></span><span class="doc-opt-tag"><code>btn-group</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">vertical</span></div></div>
107
- <div class="doc-preview">
108
- <div class="doc-demo"><span class="doc-demo-label">horizontal</span><div nexa="button-group" buttons="Save,Cancel,Delete"></div></div>
109
- <div class="doc-demo"><span class="doc-demo-label">vertical</span><div nexa="button-group vertical" buttons="Draft,Publish" variants="outline,primary"></div></div>
110
- </div>
111
- <div class="doc-code">
112
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-group">Copy</button></div>
113
- <pre><code id="btn-group">&lt;div nexa="button-group" buttons="Save,Cancel,Delete"&gt;&lt;/div&gt;
114
- &lt;div nexa="button-group vertical" buttons="Draft,Publish" variants="outline,primary"&gt;&lt;/div&gt;</code></pre>
115
- </div>
116
- </div>
117
-
118
- <h3>Dropdown</h3>
119
-
120
- <div class="doc-example">
121
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>dropdown</code></span><span class="doc-opt-tag"><code>drop</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">open</span><span class="doc-opt is-mod">end</span></div></div>
122
- <div class="doc-preview">
123
- <div class="doc-demo"><span class="doc-demo-label">default</span><div nexa="dropdown" label="Menu" items="Profile,Settings,Log out"></div></div>
124
- <div class="doc-demo"><span class="doc-demo-label">primary end</span><div nexa="dropdown primary end" label="Account" items="Billing|/billing,Team|/team,—,Sign out||danger"></div></div>
125
- </div>
126
- <div class="doc-code">
127
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-drop">Copy</button></div>
128
- <pre><code id="btn-drop">&lt;div nexa="dropdown" label="Menu" items="Profile,Settings,Log out"&gt;&lt;/div&gt;
129
- &lt;div nexa="dropdown primary end" label="Account" items="Billing|/billing,Team|/team,—,Sign out||danger"&gt;&lt;/div&gt;</code></pre>
130
- </div>
131
- </div>
132
-
133
- <h3>Close & badge</h3>
134
-
135
- <div class="doc-example">
136
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>close</code></span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>badge</code></span><span class="doc-opt is-mod">primary</span><span class="doc-opt is-mod">secondary</span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">ghost</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">pill</span><span class="doc-opt is-mod">dot</span></div></div>
137
- <div class="doc-preview">
138
- <div class="doc-demo"><span class="doc-demo-label">close</span><button nexa="close"></button></div>
139
- <div class="doc-demo"><span class="doc-demo-label">badge</span><span nexa="badge">NEW</span></div>
140
- <div class="doc-demo"><span class="doc-demo-label">badge</span><span nexa="badge">Pro</span></div>
141
- </div>
142
- <div class="doc-code">
143
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="btn-misc">Copy</button></div>
144
- <pre><code id="btn-misc">&lt;button nexa="close"&gt;&lt;/button&gt;
145
- &lt;span nexa="badge"&gt;NEW&lt;/span&gt;
146
- &lt;span nexa="badge"&gt;Pro&lt;/span&gt;</code></pre>
147
- </div>
148
- </div>
149
- </main>
150
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
151
- </div>
152
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
153
- <div class="doc-search-box"><span aria-hidden="true">⌕</span><input data-doc-search-input type="search" placeholder="Search pages and components" autocomplete="off"><kbd>Esc</kbd></div>
154
- <div class="doc-search-results" data-doc-search-results></div>
155
- </dialog>
156
- </body>
157
- </html>