@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,122 +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>Navigation - 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>Navigation</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Navigation</h1><p class="doc-lead">Nav, navbar, tabs, accordion, breadcrumb, pagination, scrollspy, collapse.</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>Nav & navbar</h3>
43
-
44
- <div class="doc-example">
45
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>nav</code></span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>navbar</code></span><span class="doc-opt is-mod">fixed</span><span class="doc-opt is-mod">dark</span><span class="doc-opt is-mod">light</span></div></div>
46
- <div class="doc-preview is-stack">
47
- <div class="doc-demo"><span class="doc-demo-label">nav</span><nav nexa="nav" links="Home,Docs,Pricing"></nav></div>
48
- <div class="doc-demo"><span class="doc-demo-label">navbar</span><nav nexa="navbar" logo="Nexa" links="Docs,Blog" cta="Start"></nav></div>
49
- </div>
50
- <div class="doc-code">
51
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="nav-basic">Copy</button></div>
52
- <pre><code id="nav-basic">&lt;nav nexa="nav" links="Home,Docs,Pricing"&gt;&lt;/nav&gt;
53
- &lt;nav nexa="navbar" logo="Nexa" links="Docs,Blog" cta="Start"&gt;&lt;/nav&gt;</code></pre>
54
- </div>
55
- </div>
56
-
57
- <h3>Tabs</h3>
58
-
59
- <div class="doc-example">
60
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>tabs</code></span><span class="doc-opt is-mod">pills</span><span class="doc-opt is-mod">segmented</span></div></div>
61
- <div class="doc-preview">
62
- <div class="doc-demo"><span class="doc-demo-label">default</span><div nexa="tabs" tabs="Overview|Ship faster.;API|Commands and props.;Billing|Plans and invoices." style="min-width:280px"></div></div>
63
- <div class="doc-demo"><span class="doc-demo-label">pills</span><div nexa="tabs pills" tabs="Day|Busy.;Week|Steady.;Month|Growth." style="min-width:240px"></div></div>
64
- </div>
65
- <div class="doc-code">
66
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="nav-tabs">Copy</button></div>
67
- <pre><code id="nav-tabs">&lt;div nexa="tabs" tabs="Overview|Ship faster.;API|Commands and props.;Billing|Plans and invoices."&gt;&lt;/div&gt;
68
- &lt;div nexa="tabs pills" tabs="Day|Busy.;Week|Steady.;Month|Growth."&gt;&lt;/div&gt;</code></pre>
69
- </div>
70
- </div>
71
-
72
- <h3>Accordion & collapse</h3>
73
-
74
- <div class="doc-example">
75
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>accordion</code></span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>collapse</code></span></div></div>
76
- <div class="doc-preview">
77
- <div class="doc-demo"><span class="doc-demo-label">accordion</span><div nexa="accordion" items="What is Nexa?|A command UI engine.;Who is it for?|Teams shipping Vanilla UIs." style="min-width:260px"></div></div>
78
- <div class="doc-demo"><span class="doc-demo-label">collapse</span><div nexa="collapse" title="Details" text="Extra content stays collapsed until opened." style="min-width:220px"></div></div>
79
- </div>
80
- <div class="doc-code">
81
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="nav-acc">Copy</button></div>
82
- <pre><code id="nav-acc">&lt;div nexa="accordion" items="What is Nexa?|A command UI engine.;Who is it for?|Teams shipping Vanilla UIs."&gt;&lt;/div&gt;
83
- &lt;div nexa="collapse" title="Details" text="Extra content stays collapsed until opened."&gt;&lt;/div&gt;</code></pre>
84
- </div>
85
- </div>
86
-
87
- <h3>Breadcrumb & pagination</h3>
88
-
89
- <div class="doc-example">
90
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>breadcrumb</code></span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>pagination</code></span></div></div>
91
- <div class="doc-preview">
92
- <div class="doc-demo"><span class="doc-demo-label">breadcrumb</span><nav nexa="breadcrumb" items="Home,Docs,Buttons"></nav></div>
93
- <div class="doc-demo"><span class="doc-demo-label">pagination</span><nav nexa="pagination" pages="5" current="2"></nav></div>
94
- </div>
95
- <div class="doc-code">
96
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="nav-crumb">Copy</button></div>
97
- <pre><code id="nav-crumb">&lt;nav nexa="breadcrumb" items="Home,Docs,Buttons"&gt;&lt;/nav&gt;
98
- &lt;nav nexa="pagination" pages="5" current="2"&gt;&lt;/nav&gt;</code></pre>
99
- </div>
100
- </div>
101
-
102
- <h3>Scrollspy</h3>
103
-
104
- <div class="doc-example">
105
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>scrollspy</code></span></div></div>
106
- <div class="doc-preview">
107
- <div class="doc-demo"><span class="doc-demo-label">scrollspy</span><nav nexa="scrollspy" items="#doc-a|Alpha;#doc-b|Beta"></nav><div id="doc-a" style="height:8px"></div><div id="doc-b" style="height:8px"></div></div>
108
- </div>
109
- <div class="doc-code">
110
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="nav-spy">Copy</button></div>
111
- <pre><code id="nav-spy">&lt;nav nexa="scrollspy" items="#doc-a|Alpha;#doc-b|Beta"&gt;&lt;/nav&gt;</code></pre>
112
- </div>
113
- </div>
114
- </main>
115
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
116
- </div>
117
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
118
- <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>
119
- <div class="doc-search-results" data-doc-search-results></div>
120
- </dialog>
121
- </body>
122
- </html>
@@ -1,95 +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>Overlays - 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>Overlays</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Overlays</h1><p class="doc-lead">Modal, sheet, offcanvas, popover, and tooltip.</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>Modal & sheet</h3>
43
-
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 class="doc-opts"><span class="doc-opt-cmd"><code>modal</code></span><span class="doc-opt is-mod">open</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>sheet</code></span><span class="doc-opt is-mod">open</span></div></div>
46
- <div class="doc-preview">
47
- <div class="doc-demo"><span class="doc-demo-label">openers</span><button nexa="btn primary" data-modal-open="doc-m1">Open modal</button><button nexa="btn outline" data-sheet-open="doc-s1">Open sheet</button><div id="doc-m1" nexa="modal" title="Confirm" text="Apply these changes?" cta="Confirm" cancel="Cancel"></div><div id="doc-s1" nexa="sheet" title="Filters" text="Narrow the list." cta="Apply" cancel="Close"></div></div>
48
- </div>
49
- <div class="doc-code">
50
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="ov-modal">Copy</button></div>
51
- <pre><code id="ov-modal">&lt;button nexa="btn primary" data-modal-open="doc-m1"&gt;Open modal&lt;/button&gt;
52
- &lt;div id="doc-m1" nexa="modal" title="Confirm" text="Apply these changes?" cta="Confirm" cancel="Cancel"&gt;&lt;/div&gt;
53
-
54
- &lt;button nexa="btn outline" data-sheet-open="doc-s1"&gt;Open sheet&lt;/button&gt;
55
- &lt;div id="doc-s1" nexa="sheet" title="Filters" text="Narrow the list." cta="Apply" cancel="Close"&gt;&lt;/div&gt;</code></pre>
56
- </div>
57
- </div>
58
-
59
- <h3>Offcanvas</h3>
60
-
61
- <div class="doc-example">
62
- <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 class="doc-opts"><span class="doc-opt-cmd"><code>offcanvas</code></span><span class="doc-opt is-mod">left</span><span class="doc-opt is-mod">right</span><span class="doc-opt is-mod">open</span></div></div>
63
- <div class="doc-preview">
64
- <div class="doc-demo"><span class="doc-demo-label">offcanvas</span><button nexa="btn outline" data-offcanvas-open="doc-oc">Menu</button><div id="doc-oc" nexa="offcanvas" title="Menu" text="Navigation panel."></div></div>
65
- </div>
66
- <div class="doc-code">
67
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="ov-off">Copy</button></div>
68
- <pre><code id="ov-off">&lt;button nexa="btn outline" data-offcanvas-open="doc-oc"&gt;Menu&lt;/button&gt;
69
- &lt;div id="doc-oc" nexa="offcanvas" title="Menu" text="Navigation panel."&gt;&lt;/div&gt;</code></pre>
70
- </div>
71
- </div>
72
-
73
- <h3>Popover & tooltip</h3>
74
-
75
- <div class="doc-example">
76
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>popover</code></span><span class="doc-opt is-mod">open</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>tooltip</code></span></div></div>
77
- <div class="doc-preview">
78
- <div class="doc-demo"><span class="doc-demo-label">popover</span><div nexa="popover" label="Info" text="Extra context for this control."></div></div>
79
- <div class="doc-demo"><span class="doc-demo-label">tooltip</span><span nexa="tooltip" label="?" text="Helpful tip"></span></div>
80
- </div>
81
- <div class="doc-code">
82
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="ov-pop">Copy</button></div>
83
- <pre><code id="ov-pop">&lt;div nexa="popover" label="Info" text="Extra context for this control."&gt;&lt;/div&gt;
84
- &lt;span nexa="tooltip" label="?" text="Helpful tip"&gt;&lt;/span&gt;</code></pre>
85
- </div>
86
- </div>
87
- </main>
88
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
89
- </div>
90
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
91
- <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>
92
- <div class="doc-search-results" data-doc-search-results></div>
93
- </dialog>
94
- </body>
95
- </html>
@@ -1,126 +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>Pickers - 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>Pickers</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Pickers</h1><p class="doc-lead">Date, time, autocomplete, chips, rating, stepper, fab.</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>Date & time</h3>
43
-
44
- <div class="doc-example">
45
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>datepicker</code></span><span class="doc-opt-tag"><code>date</code></span><span class="doc-opt is-mod">required</span><span class="doc-opt is-mod">disabled</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>timepicker</code></span><span class="doc-opt-tag"><code>time</code></span><span class="doc-opt is-mod">required</span><span class="doc-opt is-mod">disabled</span></div></div>
46
- <div class="doc-preview">
47
- <div class="doc-demo"><span class="doc-demo-label">datepicker</span><div nexa="datepicker" label="Date" style="min-width:180px"></div></div>
48
- <div class="doc-demo"><span class="doc-demo-label">timepicker</span><div nexa="timepicker" label="Time" value="14:30" step="15" style="min-width:180px"></div></div>
49
- </div>
50
- <div class="doc-code">
51
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="pk-dt">Copy</button></div>
52
- <pre><code id="pk-dt">&lt;div nexa="datepicker" label="Date"&gt;&lt;/div&gt;
53
- &lt;div nexa="timepicker" label="Time" value="14:30" step="15"&gt;&lt;/div&gt;</code></pre>
54
- </div>
55
- </div>
56
-
57
- <h3>Autocomplete</h3>
58
-
59
- <div class="doc-example">
60
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>autocomplete</code></span><span class="doc-opt-tag"><code>ac</code></span><span class="doc-opt is-mod">required</span><span class="doc-opt is-mod">disabled</span></div></div>
61
- <div class="doc-preview">
62
- <div class="doc-demo"><span class="doc-demo-label">cities</span><div nexa="autocomplete" label="City" options="Paris,London,Dubai,Tokyo" style="min-width:220px"></div></div>
63
- </div>
64
- <div class="doc-code">
65
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="pk-auto">Copy</button></div>
66
- <pre><code id="pk-auto">&lt;div nexa="autocomplete" label="City" options="Paris,London,Dubai,Tokyo"&gt;&lt;/div&gt;</code></pre>
67
- </div>
68
- </div>
69
-
70
- <h3>Chip & chips</h3>
71
-
72
- <div class="doc-example">
73
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>chip</code></span><span class="doc-opt is-mod">outline</span><span class="doc-opt is-mod">active</span><span class="doc-opt is-mod">removable</span><span class="doc-opt is-mod">x</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>chips</code></span></div></div>
74
- <div class="doc-preview">
75
- <div class="doc-demo"><span class="doc-demo-label">chip</span><div nexa="chip">Design</div></div>
76
- <div class="doc-demo"><span class="doc-demo-label">active</span><div nexa="chip active">Active</div></div>
77
- <div class="doc-demo"><span class="doc-demo-label">outline</span><div nexa="chip outline">Outline</div></div>
78
- <div class="doc-demo"><span class="doc-demo-label">chips</span><div nexa="chips" items="React,Vue,Svelte"></div></div>
79
- </div>
80
- <div class="doc-code">
81
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="pk-chip">Copy</button></div>
82
- <pre><code id="pk-chip">&lt;div nexa="chip"&gt;Design&lt;/div&gt;
83
- &lt;div nexa="chip active"&gt;Active&lt;/div&gt;
84
- &lt;div nexa="chip outline"&gt;Outline&lt;/div&gt;
85
- &lt;div nexa="chips" items="React,Vue,Svelte"&gt;&lt;/div&gt;</code></pre>
86
- </div>
87
- </div>
88
-
89
- <h3>Rating & stepper</h3>
90
-
91
- <div class="doc-example">
92
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>rating</code></span><span class="doc-opt-tag"><code>stars</code></span><span class="doc-opt is-mod">readonly</span><span class="doc-opt is-mod">static</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>stepper</code></span><span class="doc-opt-tag"><code>steps</code></span></div></div>
93
- <div class="doc-preview">
94
- <div class="doc-demo"><span class="doc-demo-label">rating</span><div nexa="rating" value="4" max="5"></div></div>
95
- <div class="doc-demo"><span class="doc-demo-label">stepper</span><div nexa="stepper" items="Cart,Pay,Done" active="2"></div></div>
96
- </div>
97
- <div class="doc-code">
98
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="pk-rate">Copy</button></div>
99
- <pre><code id="pk-rate">&lt;div nexa="rating" value="4" max="5"&gt;&lt;/div&gt;
100
- &lt;div nexa="stepper" items="Cart,Pay,Done" active="2"&gt;&lt;/div&gt;</code></pre>
101
- </div>
102
- </div>
103
-
104
- <h3>FAB</h3>
105
-
106
- <div class="doc-example">
107
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>fab</code></span><span class="doc-opt is-mod">extended</span><span class="doc-opt is-mod">bottom-start</span></div></div>
108
- <div class="doc-preview">
109
- <div class="doc-demo"><span class="doc-demo-label">fab</span><div nexa="fab" label="+"></div></div>
110
- <div class="doc-demo"><span class="doc-demo-label">extended</span><div nexa="fab extended" label="Compose"></div></div>
111
- </div>
112
- <div class="doc-code">
113
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="pk-fab">Copy</button></div>
114
- <pre><code id="pk-fab">&lt;div nexa="fab" label="+"&gt;&lt;/div&gt;
115
- &lt;div nexa="fab extended" label="Compose"&gt;&lt;/div&gt;</code></pre>
116
- </div>
117
- </div>
118
- </main>
119
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
120
- </div>
121
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
122
- <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>
123
- <div class="doc-search-results" data-doc-search-results></div>
124
- </dialog>
125
- </body>
126
- </html>
@@ -1,111 +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>Page sections - 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>Page sections</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Page sections</h1><p class="doc-lead">Features, logos, pricing, testimonials, CTA, posts, auth, checkout.</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>Features & logos</h3>
43
-
44
- <div class="doc-example">
45
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>logos</code></span><span class="doc-opt is-mod">dark</span><span class="doc-opt is-mod">light</span><span class="doc-opt is-mod">mono</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">muted</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>features</code></span><span class="doc-opt-tag"><code>feat</code></span><span class="doc-opt is-mod">cards-1</span><span class="doc-opt is-mod">cards-2</span><span class="doc-opt is-mod">cards-3</span><span class="doc-opt is-mod">cards-4</span></div></div>
46
- <div class="doc-preview is-stack">
47
- <section nexa="logos" brands="Acme,Globex,Umbrella,Stark" style="width:100%"></section>
48
- <section nexa="features cards-3" eyebrow="CAPABILITIES" title="Built-in blocks" items="01|Commands|Short nexa strings.;02|Theme|Brand tokens.;03|Docs|Live previews." style="width:100%"></section>
49
- </div>
50
- <div class="doc-code">
51
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="sec-feat">Copy</button></div>
52
- <pre><code id="sec-feat">&lt;section nexa="logos" brands="Acme,Globex,Umbrella,Stark"&gt;&lt;/section&gt;
53
- &lt;section nexa="features cards-3"
54
- items="01|Commands|Short nexa strings.;02|Theme|Brand tokens.;03|Docs|Live previews."&gt;&lt;/section&gt;</code></pre>
55
- </div>
56
- </div>
57
-
58
- <h3>Pricing & CTA</h3>
59
-
60
- <div class="doc-example">
61
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>cta</code></span><span class="doc-opt-tag"><code>banner</code></span><span class="doc-opt is-mod">bold</span></div></div>
62
- <div class="doc-preview is-stack">
63
- <section nexa="pricing" eyebrow="PLANS" title="Simple pricing" popular="1" plans="Starter|$0|Hobby|Commands,Docs|Start;Pro|$29|Teams|Everything,Support|Upgrade" style="width:100%"></section>
64
- <section nexa="cta bold" title="Ready|to ship." cta="Start free" cta-href="/site/pricing.html" style="width:100%"></section>
65
- </div>
66
- <div class="doc-code">
67
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="sec-price">Copy</button></div>
68
- <pre><code id="sec-price">&lt;section nexa="pricing" popular="1"
69
- plans="Starter|$0|Hobby;Pro|$29|Teams"&gt;&lt;/section&gt;
70
- &lt;section nexa="cta bold" cta="Start free" cta-href="/site/pricing.html"&gt;&lt;/section&gt;</code></pre>
71
- </div>
72
- </div>
73
-
74
- <h3>Testimonials & posts</h3>
75
-
76
- <div class="doc-example">
77
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>testimonials</code></span><span class="doc-opt-tag"><code>quote</code></span><span class="doc-opt is-mod">featured</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>posts</code></span><span class="doc-opt-tag"><code>post</code></span><span class="doc-opt is-mod">cards-1</span><span class="doc-opt is-mod">cards-2</span><span class="doc-opt is-mod">cards-3</span><span class="doc-opt is-mod">cards-4</span><span class="doc-opt is-mod">compact</span></div></div>
78
- <div class="doc-preview is-stack">
79
- <section nexa="testimonials featured" eyebrow="LOVE" quote="I described the page in minutes." name="Alex" role="Founder" style="width:100%"></section>
80
- <div nexa="posts cards-2 compact" title="From the blog" items="Ship docs|Live previews.|Mar 1;Card layouts|Fifteen variants.|Mar 8" style="width:100%"></div>
81
- </div>
82
- <div class="doc-code">
83
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="sec-social">Copy</button></div>
84
- <pre><code id="sec-social">&lt;section nexa="testimonials featured" eyebrow="LOVE" quote="I described the page in minutes." name="Alex" role="Founder"&gt;&lt;/section&gt;
85
- &lt;div nexa="posts cards-2 compact" title="From the blog" items="Ship docs|Live previews.|Mar 1;Card layouts|Fifteen variants.|Mar 8"&gt;&lt;/div&gt;</code></pre>
86
- </div>
87
- </div>
88
-
89
- <h3>Auth & checkout</h3>
90
-
91
- <div class="doc-example">
92
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>auth</code></span><span class="doc-opt is-mod">compact</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>checkout</code></span><span class="doc-opt is-mod">compact</span></div></div>
93
- <div class="doc-preview">
94
- <div class="doc-demo"><span class="doc-demo-label">auth</span><div nexa="auth compact" title="Sign in" subtitle="Welcome back" style="min-width:260px"></div></div>
95
- <div class="doc-demo"><span class="doc-demo-label">checkout</span><div nexa="checkout compact" title="Checkout" plan="Pro" total="$29" period="/mo" style="min-width:260px"></div></div>
96
- </div>
97
- <div class="doc-code">
98
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="sec-auth">Copy</button></div>
99
- <pre><code id="sec-auth">&lt;div nexa="auth compact" title="Sign in" subtitle="Welcome back"&gt;&lt;/div&gt;
100
- &lt;div nexa="checkout compact" title="Checkout" plan="Pro" total="$29" period="/mo"&gt;&lt;/div&gt;</code></pre>
101
- </div>
102
- </div>
103
- </main>
104
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
105
- </div>
106
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
107
- <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>
108
- <div class="doc-search-results" data-doc-search-results></div>
109
- </dialog>
110
- </body>
111
- </html>
@@ -1,97 +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>Typography - 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>Typography</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Typography</h1><p class="doc-lead">Fonts are body modifiers. Default is system UI; switch with <code>font-inter</code>, <code>font-geist</code>, or <code>font-dm</code>.</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
- <h2>Font presets</h2>
43
-
44
-
45
- <h3>Switch fonts</h3>
46
-
47
- <div class="doc-example">
48
-
49
- <div class="doc-preview">
50
- <div class="doc-demo"><span class="doc-demo-label">font-inter</span><div class="nexa-font-inter doc-type-sample"><p class="doc-type-hero">Inter display</p><p class="doc-type-body">Body copy for product UI.</p></div></div>
51
- <div class="doc-demo"><span class="doc-demo-label">font-dm</span><div class="nexa-font-dm doc-type-sample"><p class="doc-type-hero">DM Sans display</p><p class="doc-type-body">Body copy for product UI.</p></div></div>
52
- <div class="doc-demo"><span class="doc-demo-label">font-system</span><div class="nexa-font-system doc-type-sample"><p class="doc-type-hero">System display</p><p class="doc-type-body">Segoe / system stack.</p></div></div>
53
- </div>
54
- <div class="doc-code">
55
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="type-fonts">Copy</button></div>
56
- <pre><code id="type-fonts">&lt;body nexa="luxury light brand font-inter essential"&gt;
57
- &lt;body nexa="luxury light brand font-dm essential"&gt;
58
- &lt;body nexa="luxury light brand font-system essential"&gt;
59
- &lt;body nexa="luxury light brand font-geist essential"&gt;</code></pre>
60
- </div>
61
- </div>
62
-
63
- <h2>Tokens</h2>
64
-
65
- <table class="doc-table">
66
- <thead><tr><th>CSS variable</th><th>Role</th></tr></thead>
67
- <tbody>
68
- <tr><td><code>--nexa-font-sans</code></td><td>UI / body</td></tr>
69
- <tr><td><code>--nexa-font-display</code></td><td>Headings / hero</td></tr>
70
- <tr><td><code>--nexa-font-button</code></td><td>Buttons &amp; CTAs</td></tr>
71
- <tr><td><code>--nexa-font-mono</code></td><td>Code &amp; labels</td></tr>
72
- </tbody>
73
- </table>
74
- <p>Load the webfont yourself (Google Fonts, self-host). Nexa only sets the CSS family names.</p>
75
-
76
- <h3>Load Inter</h3>
77
-
78
- <div class="doc-example">
79
-
80
- <div class="doc-preview is-stack">
81
- <p style="margin:0;color:#5B6478;font-size:.92rem">Link Inter once in <code>&lt;head&gt;</code>, then set <code>font-inter</code> on body.</p>
82
- </div>
83
- <div class="doc-code">
84
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="type-load">Copy</button></div>
85
- <pre><code id="type-load">&lt;link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"&gt;
86
- &lt;body nexa="luxury light brand font-inter essential"&gt;</code></pre>
87
- </div>
88
- </div>
89
- </main>
90
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
91
- </div>
92
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
93
- <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>
94
- <div class="doc-search-results" data-doc-search-results></div>
95
- </dialog>
96
- </body>
97
- </html>