@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
package/public/site/docs/commands.html DELETED
@@ -1,170 +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>Commands reference - 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>Commands reference</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Commands reference</h1><p class="doc-lead">Every Nexa component is one attribute: <code>nexa="component [modifiers…]"</code>. Props are plain HTML attributes. Below: how parsing works, then the full catalog.</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>Anatomy of a command</h2>
43
-
44
- <div class="doc-example">
45
- <div class="doc-preview is-stack"><p style="margin:0;font-family:ui-monospace,monospace;font-size:.86rem;color:#334155"><b>nexa</b>="<b>hero</b> <b>vision split</b>"<br>title="…" cta-href="…"</p></div>
46
- <div class="doc-code">
47
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="anat">Copy</button></div>
48
- <pre><code id="anat">&lt;section nexa="hero vision split" component + modifiers
49
- title="Modern|interfaces" prop (HTML attribute)
50
- cta="Docs" cta-href="/docs"&gt; more props&lt;/section&gt;</code></pre>
51
- </div>
52
- </div>
53
- <table class="doc-table">
54
- <thead><tr><th>Part</th><th>Where</th><th>Example</th></tr></thead>
55
- <tbody>
56
- <tr><td>Component</td><td>first token of <code>nexa</code></td><td><code>hero</code>, <code>card</code>, <code>btn</code></td></tr>
57
- <tr><td>Modifiers</td><td>rest of <code>nexa</code> tokens</td><td><code>vision split</code>, <code>primary pill</code></td></tr>
58
- <tr><td>Props</td><td>HTML attributes</td><td><code>title</code>, <code>items</code>, <code>image</code></td></tr>
59
- </tbody>
60
- </table>
61
-
62
-
63
- <h2>Modifiers vs props</h2>
64
-
65
- <ul>
66
- <li><b>Modifiers</b> — style/behavior switches inside <code>nexa="…"</code>. Order does not matter: <code>primary pill</code> = <code>pill primary</code>.</li>
67
- <li><b>Props</b> — real HTML attributes carrying data: <code>title</code>, <code>text</code>, <code>items</code>, <code>options</code>, <code>value</code>, <code>label</code>, <code>image</code>, <code>href</code>.</li>
68
- </ul>
69
-
70
-
71
- <h2>Aliases — type less</h2>
72
-
73
- <p>The parser expands these before rendering, so <code>btn</code> and <code>button</code> are identical.</p>
74
- <table class="doc-table">
75
- <thead><tr><th>Alias</th><th>Expands to</th><th>Alias</th><th>Expands to</th></tr></thead>
76
- <tbody>
77
- <tr><td><code>btn</code></td><td><code>button</code></td><td><code>hdr / foot</code></td><td><code>header / footer</code></td></tr>
78
- <tr><td><code>c</code></td><td><code>card</code></td><td><code>feat / price / quote</code></td><td><code>features / pricing / testimonials</code></td></tr>
79
- <tr><td><code>drop / menu / dd</code></td><td><code>dropdown</code></td><td><code>date / dp</code></td><td><code>datepicker</code></td></tr>
80
- <tr><td><code>time / tp</code></td><td><code>timepicker</code></td><td><code>ac / combo</code></td><td><code>autocomplete</code></td></tr>
81
- <tr><td><code>stats / tbl / posts</code></td><td><code>stat / table / posts</code></td><td><code>grp / igroup / bs</code></td><td><code>button-group / input-group / sheet</code></td></tr>
82
- </tbody>
83
- </table>
84
- <p>Modifier shortcuts: <code>s</code>→shadow · <code>s-soft</code>→shadow+soft · <code>s-strong</code>→shadow+strong · <code>g</code>→glass · <code>r</code>→round · <code>p</code>→pill · <code>sm</code>→small+compact · <code>lg</code>→large+tall · <code>e</code>→end · <code>prod</code>→product (card) · <code>user</code>→profile.</p>
85
-
86
-
87
- <h2>Key = value props</h2>
88
-
89
- <p>Any <code>key=value</code> token becomes an HTML attribute on the host element. Anything not a known modifier or alias is treated as a label (used by <code>btn</code>, <code>chip</code>, <code>fab</code>).</p>
90
-
91
-
92
- <h2>Delimited list props</h2>
93
-
94
- <table class="doc-table">
95
- <thead><tr><th>Prop</th><th>Format</th><th>Example</th></tr></thead>
96
- <tbody>
97
- <tr><td><code>items / options</code></td><td><code>a,b,c</code></td><td><code>items="Home,Docs,Pricing"</code></td></tr>
98
- <tr><td>Pairs (<code>tabs</code>, <code>accordion</code>, <code>stat</code>)</td><td><code>head|body ; head|body</code></td><td><code>tabs="A|One;B|Two"</code></td></tr>
99
- <tr><td>Rows (<code>table</code>)</td><td><code>h|h|h ; c|c|c</code></td><td><code>rows="Ada|Admin|On;Lin|Ed|Off"</code></td></tr>
100
- <tr><td>Tree paths</td><td><code>A/B , C/D</code></td><td><code>items="Apps/Dash,Docs/API"</code></td></tr>
101
- </tbody>
102
- </table>
103
- <p>Tip: <code>|</code> inside <code>title</code> forces a line break (e.g. <code>title="Modern|interfaces"</code>).</p>
104
-
105
-
106
- <h2>Theme & color commands</h2>
107
-
108
- <p>On <code>&lt;body&gt;</code> (or via <code>renderPage</code>) these set the whole UI; they are not components.</p>
109
- <table class="doc-table">
110
- <thead><tr><th>Command</th><th>What it does</th></tr></thead>
111
- <tbody>
112
- <tr><td><code>luxury / modern / minimal</code></td><td>Theme family</td></tr>
113
- <tr><td><code>blue / violet / azure / gold / emerald / coral / …</code></td><td>Hue family</td></tr>
114
- <tr><td><code>map pink</code> · <code>map #2E9EFF</code> · <code>map:my-brand</code></td><td>Build brand scale from preset / hex / saved map</td></tr>
115
- <tr><td><code>font-inter / font-dm / font-geist</code></td><td>Font family</td></tr>
116
- </tbody>
117
- </table>
118
-
119
-
120
- <h2>Options on every example</h2>
121
-
122
- <p>Throughout these docs, each live preview is tagged with its <span class="doc-opt is-mod" style="position:static">modifiers</span> and <span class="doc-opt is-prop" style="position:static">props</span> — generated from the same schema that builds the catalog below.</p>
123
-
124
- <h3>Same source → page + catalog</h3>
125
- <p>The strip above and the row below are derived from one SCHEMA entry.</p>
126
- <div class="doc-example">
127
- <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>card</code></span><span class="doc-opt-tag"><code>c</code></span><span class="doc-opt is-mod">plain</span><span class="doc-opt is-mod">bordered</span><span class="doc-opt is-mod">elevated</span><span class="doc-opt is-mod">glass</span><span class="doc-opt is-mod">horizontal</span><span class="doc-opt is-mod">square</span><span class="doc-opt is-mod">interactive</span><span class="doc-opt is-mod">media</span><span class="doc-opt is-mod">icon</span><span class="doc-opt is-mod">metric</span><span class="doc-opt is-mod">profile</span><span class="doc-opt is-mod">cover</span><span class="doc-opt is-mod">product</span><span class="doc-opt is-mod">video</span><span class="doc-opt is-mod">event</span><span class="doc-opt is-mod">promo</span><span class="doc-opt is-mod">pricing</span><span class="doc-opt is-mod">analytics</span><span class="doc-opt is-mod">quote</span><span class="doc-opt is-mod">tasks</span><span class="doc-opt is-mod">feature</span><span class="doc-opt is-mod">soft</span><span class="doc-opt is-mod">fade</span><span class="doc-opt is-mod">slide</span><span class="doc-opt is-mod">zoom</span><span class="doc-opt is-mod">bounce</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">glow</span><span class="doc-opt is-more">+9 · <a href="/site/docs/commands.html">all →</a></span></div><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>
128
- <div class="doc-preview">
129
- <div class="doc-demo"><span class="doc-demo-label">button</span><button nexa="btn primary pill">Start free</button></div>
130
- <div class="doc-demo"><span class="doc-demo-label">card</span><article nexa="card cover" title="Cover" text="Full bleed." image="/cards/bloom.jpg" style="width:200px"></article></div>
131
- <div class="doc-demo"><span class="doc-demo-label">tabs</span><div nexa="tabs" tabs="Overview|Ship faster.;API|Commands and props." style="min-width:240px"></div></div>
132
- </div>
133
- <div class="doc-code">
134
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="cmd-strip-demo">Copy</button></div>
135
- <pre><code id="cmd-strip-demo">&lt;button nexa="btn primary pill"&gt;Start free&lt;/button&gt;
136
- &lt;article nexa="card cover" title="Cover" text="Full bleed." image="/cards/bloom.jpg" style="width:200px"&gt;&lt;/article&gt;
137
- &lt;div nexa="tabs" tabs="Overview|Ship faster.;API|Commands and props." style="min-width:240px"&gt;&lt;/div&gt;</code></pre>
138
- </div>
139
- </div>
140
-
141
-
142
- <h2>Full component catalog</h2>
143
-
144
- <p>Every component, its registered alias, and what it does.</p>
145
- <table class="doc-table doc-ref">
146
- <thead><tr><th>Command</th><th>Alias</th><th>Does</th></tr></thead>
147
- <tbody>
148
- <tr><td colspan="3" class="doc-ref-group">Getting started</td></tr>
149
- <tr><td><code>button</code></td><td><code>btn</code></td><td>Modifiers: primary, secondary, outline, ghost, danger, blue</td></tr><tr><td><code>card</code></td><td><code>c</code></td><td>Modifiers: plain, bordered, elevated, glass, horizontal, square</td></tr><tr><td><code>footer</code></td><td><code>foot</code></td><td>Modifiers: dark, mega, simple, light</td></tr><tr><td><code>header</code></td><td><code>hdr</code></td><td>Modifiers: simple, vision, float, bar, dock, mega</td></tr><tr><td><code>hero</code></td><td>—</td><td>Modifiers: centered, split, image-left, image-right, minimal, vision</td></tr>
150
- <tr><td colspan="3" class="doc-ref-group">Layout & sections</td></tr>
151
- <tr><td><code>auth</code></td><td>—</td><td>Modifiers: compact</td></tr><tr><td><code>checkout</code></td><td>—</td><td>Modifiers: compact</td></tr><tr><td><code>container</code></td><td>—</td><td>Modifiers: narrow</td></tr><tr><td><code>cta</code></td><td><code>banner</code></td><td>Modifiers: bold</td></tr><tr><td><code>features</code></td><td><code>feat</code></td><td>Modifiers: cards-1, cards-2, cards-3, cards-4</td></tr><tr><td><code>grid</code></td><td>—</td><td>Modifiers: square, landscape, gap-none, gap-small, gap-medium, gap-large</td></tr><tr><td><code>logos</code></td><td>—</td><td>Modifiers: dark, light, mono, bordered, muted</td></tr><tr><td><code>posts</code></td><td><code>post</code></td><td>Modifiers: cards-1, cards-2, cards-3, cards-4, compact</td></tr><tr><td><code>stack</code></td><td>—</td><td>Modifiers: gap-none, gap-small, gap-medium, gap-large</td></tr><tr><td><code>testimonials</code></td><td><code>quote</code></td><td>Modifiers: featured</td></tr>
152
- <tr><td colspan="3" class="doc-ref-group">Forms & pickers</td></tr>
153
- <tr><td><code>autocomplete</code></td><td><code>ac</code></td><td>Modifiers: required, disabled</td></tr><tr><td><code>chip</code></td><td>—</td><td>Modifiers: outline, active, removable, x</td></tr><tr><td><code>chips</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>datepicker</code></td><td><code>date</code></td><td>Modifiers: required, disabled</td></tr><tr><td><code>fab</code></td><td>—</td><td>Modifiers: extended, bottom-start</td></tr><tr><td><code>field</code></td><td>—</td><td>Modifiers: text, email, password, number, date, file</td></tr><tr><td><code>form</code></td><td>—</td><td>Modifiers: validate</td></tr><tr><td><code>input-group</code></td><td><code>igroup</code></td><td>Modifiers: text, email, password, search, tel, url</td></tr><tr><td><code>rating</code></td><td><code>stars</code></td><td>Modifiers: readonly, static</td></tr><tr><td><code>select</code></td><td>—</td><td>Modifiers: required, disabled, float</td></tr><tr><td><code>stepper</code></td><td><code>steps</code></td><td>Modifiers: —</td></tr><tr><td><code>switch</code></td><td>—</td><td>Modifiers: checked, disabled</td></tr><tr><td><code>textarea</code></td><td>—</td><td>Modifiers: required, disabled, float</td></tr><tr><td><code>timepicker</code></td><td><code>time</code></td><td>Modifiers: required, disabled</td></tr>
154
- <tr><td colspan="3" class="doc-ref-group">Navigation & feedback</td></tr>
155
- <tr><td><code>accordion</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>alert</code></td><td>—</td><td>Modifiers: success, warning, danger, info</td></tr><tr><td><code>breadcrumb</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>collapse</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>nav</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>navbar</code></td><td>—</td><td>Modifiers: fixed, dark, light</td></tr><tr><td><code>pagination</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>progress</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>scrollspy</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>skeleton</code></td><td><code>placeholder</code></td><td>Modifiers: card, avatar, lines-1, lines-2, lines-3, lines-4</td></tr><tr><td><code>spinner</code></td><td>—</td><td>Modifiers: small, large, sm, lg</td></tr><tr><td><code>tabs</code></td><td>—</td><td>Modifiers: pills, segmented</td></tr><tr><td><code>toast</code></td><td>—</td><td>Modifiers: success, warning, danger, info</td></tr>
156
- <tr><td colspan="3" class="doc-ref-group">Overlays & data</td></tr>
157
- <tr><td><code>button-group</code></td><td><code>btn-group</code></td><td>Modifiers: primary, secondary, outline, ghost, danger, vertical</td></tr><tr><td><code>chart</code></td><td><code>graphs</code></td><td>Modifiers: bar, line, area, donut, pie, spark</td></tr><tr><td><code>dropdown</code></td><td><code>drop</code></td><td>Modifiers: primary, ghost, open, end</td></tr><tr><td><code>input</code></td><td>—</td><td>Modifiers: text, email, password, number, search, tel</td></tr><tr><td><code>list</code></td><td>—</td><td>Modifiers: ordered</td></tr><tr><td><code>list-group</code></td><td>—</td><td>Modifiers: flush</td></tr><tr><td><code>modal</code></td><td>—</td><td>Modifiers: open</td></tr><tr><td><code>offcanvas</code></td><td>—</td><td>Modifiers: left, right, open</td></tr><tr><td><code>popover</code></td><td>—</td><td>Modifiers: open</td></tr><tr><td><code>sheet</code></td><td>—</td><td>Modifiers: open</td></tr><tr><td><code>stat</code></td><td><code>stats</code></td><td>Modifiers: —</td></tr><tr><td><code>table</code></td><td><code>tbl</code></td><td>Modifiers: striped, hover, compact</td></tr><tr><td><code>timeline</code></td><td><code>tl</code></td><td>Modifiers: compact</td></tr><tr><td><code>tooltip</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>transfer</code></td><td><code>xfer</code></td><td>Modifiers: —</td></tr><tr><td><code>tree</code></td><td>—</td><td>Modifiers: —</td></tr>
158
- <tr><td colspan="3" class="doc-ref-group">Media & icons</td></tr>
159
- <tr><td><code>avatar</code></td><td>—</td><td>Modifiers: male, user, small, large, sm, lg</td></tr><tr><td><code>badge</code></td><td>—</td><td>Modifiers: primary, secondary, outline, ghost, danger, soft</td></tr><tr><td><code>carousel</code></td><td>—</td><td>Modifiers: autoplay, auto</td></tr><tr><td><code>close</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>divider</code></td><td>—</td><td>Modifiers: —</td></tr><tr><td><code>figure</code></td><td>—</td><td>Modifiers: ratio-1x1, ratio-4x3, ratio-16x9, ratio-21x9</td></tr><tr><td><code>ico</code></td><td>—</td><td>Modifiers: regular, bold, thin, fill, filled, solid</td></tr></tbody>
160
- </table>
161
- <p>Missing something? Components are registered in <code>src/components/index.ts</code> → <code>registerPrototypeComponents</code>.</p>
162
- </main>
163
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
164
- </div>
165
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
166
- <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>
167
- <div class="doc-search-results" data-doc-search-results></div>
168
- </dialog>
169
- </body>
170
- </html>
package/public/site/docs/data.html DELETED
@@ -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>Data - 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>Data</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Data</h1><p class="doc-lead">Table, chart, stat, list, list-group, tree, timeline, transfer.</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>Table</h3>
43
-
44
- <div class="doc-example">
45
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>table</code></span><span class="doc-opt-tag"><code>tbl</code></span><span class="doc-opt is-mod">striped</span><span class="doc-opt is-mod">hover</span><span class="doc-opt is-mod">compact</span></div></div>
46
- <div class="doc-preview">
47
- <div class="doc-demo"><span class="doc-demo-label">striped hover</span><div nexa="table striped hover" headers="Name|Role|Status" rows="Ada|Admin|Active;Lin|Editor|Away" style="min-width:280px"></div></div>
48
- </div>
49
- <div class="doc-code">
50
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="data-table">Copy</button></div>
51
- <pre><code id="data-table">&lt;div nexa="table striped hover" headers="Name|Role|Status" rows="Ada|Admin|Active;Lin|Editor|Away"&gt;&lt;/div&gt;</code></pre>
52
- </div>
53
- </div>
54
-
55
- <h3>Chart & stat</h3>
56
-
57
- <div class="doc-example">
58
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>chart</code></span><span class="doc-opt-tag"><code>graphs</code></span><span class="doc-opt is-mod">bar</span><span class="doc-opt is-mod">line</span><span class="doc-opt is-mod">area</span><span class="doc-opt is-mod">donut</span><span class="doc-opt is-mod">pie</span><span class="doc-opt is-mod">spark</span><span class="doc-opt is-mod">sparkline</span><span class="doc-opt is-mod">css</span><span class="doc-opt is-mod">pro</span><span class="doc-opt is-mod">static</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>stat</code></span><span class="doc-opt-tag"><code>stats</code></span></div></div>
59
- <div class="doc-preview">
60
- <div class="doc-demo"><span class="doc-demo-label">bar</span><div nexa="chart bar" title="Visits" data="Mon|12;Tue|18;Wed|9" style="min-width:220px;min-height:140px"></div></div>
61
- <div class="doc-demo"><span class="doc-demo-label">stat</span><div nexa="stat" stats="Users|12k;NPS|72" style="min-width:200px"></div></div>
62
- </div>
63
- <div class="doc-code">
64
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="data-chart">Copy</button></div>
65
- <pre><code id="data-chart">&lt;div nexa="chart bar" title="Visits" data="Mon|12;Tue|18;Wed|9"&gt;&lt;/div&gt;
66
- &lt;div nexa="stat" stats="Users|12k;NPS|72"&gt;&lt;/div&gt;</code></pre>
67
- </div>
68
- </div>
69
-
70
- <h3>List & list-group</h3>
71
-
72
- <div class="doc-example">
73
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>list</code></span><span class="doc-opt is-mod">ordered</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>list-group</code></span><span class="doc-opt is-mod">flush</span></div></div>
74
- <div class="doc-preview">
75
- <div class="doc-demo"><span class="doc-demo-label">list</span><div nexa="list" items="Install,Mount,Ship"></div></div>
76
- <div class="doc-demo"><span class="doc-demo-label">list-group</span><div nexa="list-group" items="Home|active;Settings|badge 3;Billing" style="min-width:180px"></div></div>
77
- </div>
78
- <div class="doc-code">
79
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="data-lists">Copy</button></div>
80
- <pre><code id="data-lists">&lt;div nexa="list" items="Install,Mount,Ship"&gt;&lt;/div&gt;
81
- &lt;div nexa="list-group" items="Home|active;Settings|badge 3;Billing"&gt;&lt;/div&gt;</code></pre>
82
- </div>
83
- </div>
84
-
85
- <h3>Tree & timeline</h3>
86
- <p>Hierarchy and events — equal panels side by side.</p>
87
- <div class="doc-example">
88
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>tree</code></span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>timeline</code></span><span class="doc-opt-tag"><code>tl</code></span><span class="doc-opt is-mod">compact</span></div></div>
89
- <div class="doc-preview is-pair">
90
- <div class="doc-demo"><span class="doc-demo-label">tree</span><div class="doc-panel"><div nexa="tree" items="Apps/Dashboard,Docs/API,Docs/Cards"></div></div></div>
91
- <div class="doc-demo"><span class="doc-demo-label">timeline</span><div class="doc-panel"><div nexa="timeline" items="Launch|Today|Docs live.;Pickers|Week|Date & time."></div></div></div>
92
- </div>
93
- <div class="doc-code">
94
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="data-tree">Copy</button></div>
95
- <pre><code id="data-tree">&lt;div nexa="tree" items="Apps/Dashboard,Docs/API,Docs/Cards"&gt;&lt;/div&gt;
96
- &lt;div nexa="timeline" items="Launch|Today|Docs live.;Pickers|Week|Date &amp; time."&gt;&lt;/div&gt;</code></pre>
97
- </div>
98
- </div>
99
-
100
- <h3>Transfer</h3>
101
- <p>Move items between Available and Selected.</p>
102
- <div class="doc-example">
103
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>transfer</code></span><span class="doc-opt-tag"><code>xfer</code></span></div></div>
104
- <div class="doc-preview is-stack">
105
- <div class="doc-demo"><span class="doc-demo-label">transfer</span><div class="doc-panel" style="width:100%"><div nexa="transfer" source="Alpha,Beta,Gamma,Delta" target="Beta" left-label="Available" right-label="Selected"></div></div></div>
106
- </div>
107
- <div class="doc-code">
108
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="data-xfer">Copy</button></div>
109
- <pre><code id="data-xfer">&lt;div nexa="transfer"
110
- source="Alpha,Beta,Gamma,Delta"
111
- target="Beta"&gt;&lt;/div&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>
package/public/site/docs/feedback.html DELETED
@@ -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>Feedback - 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>Feedback</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Feedback</h1><p class="doc-lead">Alert, toast, progress, spinner, and skeleton.</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>Alert</h3>
43
-
44
- <div class="doc-example">
45
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>alert</code></span><span class="doc-opt is-mod">success</span><span class="doc-opt is-mod">warning</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">info</span></div></div>
46
- <div class="doc-preview">
47
- <div class="doc-demo"><span class="doc-demo-label">info</span><div nexa="alert info" title="Heads up" text="Something changed." style="min-width:200px"></div></div>
48
- <div class="doc-demo"><span class="doc-demo-label">success</span><div nexa="alert success" title="Saved" text="Your settings updated." style="min-width:200px"></div></div>
49
- </div>
50
- <div class="doc-code">
51
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="fb-alert">Copy</button></div>
52
- <pre><code id="fb-alert">&lt;div nexa="alert info" title="Heads up" text="Something changed."&gt;&lt;/div&gt;
53
- &lt;div nexa="alert success" title="Saved" text="Your settings updated."&gt;&lt;/div&gt;</code></pre>
54
- </div>
55
- </div>
56
-
57
- <h3>Toast</h3>
58
-
59
- <div class="doc-example">
60
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>toast</code></span><span class="doc-opt is-mod">success</span><span class="doc-opt is-mod">warning</span><span class="doc-opt is-mod">danger</span><span class="doc-opt is-mod">info</span></div></div>
61
- <div class="doc-preview">
62
- <div class="doc-demo"><span class="doc-demo-label">success</span><div nexa="toast success" text="Saved"></div></div>
63
- <div class="doc-demo"><span class="doc-demo-label">danger</span><div nexa="toast danger" text="Failed"></div></div>
64
- </div>
65
- <div class="doc-code">
66
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="fb-toast">Copy</button></div>
67
- <pre><code id="fb-toast">&lt;div nexa="toast success" text="Saved"&gt;&lt;/div&gt;
68
- &lt;div nexa="toast danger" text="Failed"&gt;&lt;/div&gt;</code></pre>
69
- </div>
70
- </div>
71
-
72
- <h3>Progress & spinner</h3>
73
-
74
- <div class="doc-example">
75
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>progress</code></span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>spinner</code></span><span class="doc-opt is-mod">small</span><span class="doc-opt is-mod">large</span><span class="doc-opt is-mod">sm</span><span class="doc-opt is-mod">lg</span></div></div>
76
- <div class="doc-preview">
77
- <div class="doc-demo"><span class="doc-demo-label">progress</span><div nexa="progress" value="42" label="Upload" style="min-width:180px"></div></div>
78
- <div class="doc-demo"><span class="doc-demo-label">spinner</span><div nexa="spinner"></div></div>
79
- <div class="doc-demo"><span class="doc-demo-label">large</span><div nexa="spinner large"></div></div>
80
- </div>
81
- <div class="doc-code">
82
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="fb-prog">Copy</button></div>
83
- <pre><code id="fb-prog">&lt;div nexa="progress" value="42" label="Upload"&gt;&lt;/div&gt;
84
- &lt;div nexa="spinner"&gt;&lt;/div&gt;
85
- &lt;div nexa="spinner large"&gt;&lt;/div&gt;</code></pre>
86
- </div>
87
- </div>
88
-
89
- <h3>Skeleton</h3>
90
-
91
- <div class="doc-example">
92
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>skeleton</code></span><span class="doc-opt-tag"><code>placeholder</code></span><span class="doc-opt is-mod">card</span><span class="doc-opt is-mod">avatar</span><span class="doc-opt is-mod">lines-1</span><span class="doc-opt is-mod">lines-2</span><span class="doc-opt is-mod">lines-3</span><span class="doc-opt is-mod">lines-4</span><span class="doc-opt is-mod">lines-5</span></div></div>
93
- <div class="doc-preview">
94
- <div class="doc-demo"><span class="doc-demo-label">lines-3</span><div nexa="skeleton lines-3" style="min-width:200px"></div></div>
95
- <div class="doc-demo"><span class="doc-demo-label">card</span><div nexa="skeleton card" style="min-width:200px"></div></div>
96
- </div>
97
- <div class="doc-code">
98
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="fb-skel">Copy</button></div>
99
- <pre><code id="fb-skel">&lt;div nexa="skeleton lines-3"&gt;&lt;/div&gt;
100
- &lt;div nexa="skeleton card"&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>
package/public/site/docs/forms.html DELETED
@@ -1,117 +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>Forms - 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>Forms</span></div>
36
- <div class="doc-page-head">
37
- <div><h1>Forms</h1><p class="doc-lead">Fields, select, textarea, input-group, switch, and form host.</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>Field</h3>
43
-
44
- <div class="doc-example">
45
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>field</code></span><span class="doc-opt is-mod">text</span><span class="doc-opt is-mod">email</span><span class="doc-opt is-mod">password</span><span class="doc-opt is-mod">number</span><span class="doc-opt is-mod">date</span><span class="doc-opt is-mod">file</span><span class="doc-opt is-mod">search</span><span class="doc-opt is-mod">tel</span><span class="doc-opt is-mod">url</span><span class="doc-opt is-mod">color</span><span class="doc-opt is-mod">range</span><span class="doc-opt is-mod">checkbox</span><span class="doc-opt is-mod">radio</span><span class="doc-opt is-mod">hidden</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">required</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">readonly</span><span class="doc-opt is-mod">error</span><span class="doc-opt is-mod">success</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">checked</span></div></div>
46
- <div class="doc-preview">
47
- <div class="doc-demo"><span class="doc-demo-label">text</span><div nexa="field" label="Name" style="min-width:180px"></div></div>
48
- <div class="doc-demo"><span class="doc-demo-label">email float</span><div nexa="field email float" label="Email" style="min-width:180px"></div></div>
49
- <div class="doc-demo"><span class="doc-demo-label">checkbox</span><div nexa="field checkbox" label="Remember me"></div></div>
50
- </div>
51
- <div class="doc-code">
52
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="form-fields">Copy</button></div>
53
- <pre><code id="form-fields">&lt;div nexa="field" label="Name"&gt;&lt;/div&gt;
54
- &lt;div nexa="field email float" label="Email"&gt;&lt;/div&gt;
55
- &lt;div nexa="field checkbox" label="Remember me"&gt;&lt;/div&gt;</code></pre>
56
- </div>
57
- </div>
58
-
59
- <h3>Select & textarea</h3>
60
-
61
- <div class="doc-example">
62
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>select</code></span><span class="doc-opt is-mod">required</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">float</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>textarea</code></span><span class="doc-opt is-mod">required</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">float</span></div></div>
63
- <div class="doc-preview">
64
- <div class="doc-demo"><span class="doc-demo-label">select</span><div nexa="select" label="Plan" options="Starter,Pro,Team" style="min-width:180px"></div></div>
65
- <div class="doc-demo"><span class="doc-demo-label">textarea</span><div nexa="textarea float" label="Message" style="min-width:220px"></div></div>
66
- </div>
67
- <div class="doc-code">
68
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="form-select">Copy</button></div>
69
- <pre><code id="form-select">&lt;div nexa="select" label="Plan" options="Starter,Pro,Team"&gt;&lt;/div&gt;
70
- &lt;div nexa="textarea float" label="Message"&gt;&lt;/div&gt;</code></pre>
71
- </div>
72
- </div>
73
-
74
- <h3>Input group & switch</h3>
75
-
76
- <div class="doc-example">
77
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>input-group</code></span><span class="doc-opt-tag"><code>igroup</code></span><span class="doc-opt is-mod">text</span><span class="doc-opt is-mod">email</span><span class="doc-opt is-mod">password</span><span class="doc-opt is-mod">search</span><span class="doc-opt is-mod">tel</span><span class="doc-opt is-mod">url</span><span class="doc-opt is-mod">number</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>switch</code></span><span class="doc-opt is-mod">checked</span><span class="doc-opt is-mod">disabled</span></div></div>
78
- <div class="doc-preview">
79
- <div class="doc-demo"><span class="doc-demo-label">input-group</span><div nexa="input-group email" prefix="@" suffix=".com" style="min-width:220px"></div></div>
80
- <div class="doc-demo"><span class="doc-demo-label">switch</span><div nexa="switch checked" label="Notifications"></div></div>
81
- </div>
82
- <div class="doc-code">
83
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="form-ig">Copy</button></div>
84
- <pre><code id="form-ig">&lt;div nexa="input-group email" prefix="@" suffix=".com"&gt;&lt;/div&gt;
85
- &lt;div nexa="switch checked" label="Notifications"&gt;&lt;/div&gt;</code></pre>
86
- </div>
87
- </div>
88
-
89
- <h3>Form</h3>
90
-
91
- <div class="doc-example">
92
- <div class="doc-opts-wrap"><div class="doc-opts"><span class="doc-opt-cmd"><code>form</code></span><span class="doc-opt is-mod">validate</span></div><div class="doc-opts"><span class="doc-opt-cmd"><code>field</code></span><span class="doc-opt is-mod">text</span><span class="doc-opt is-mod">email</span><span class="doc-opt is-mod">password</span><span class="doc-opt is-mod">number</span><span class="doc-opt is-mod">date</span><span class="doc-opt is-mod">file</span><span class="doc-opt is-mod">search</span><span class="doc-opt is-mod">tel</span><span class="doc-opt is-mod">url</span><span class="doc-opt is-mod">color</span><span class="doc-opt is-mod">range</span><span class="doc-opt is-mod">checkbox</span><span class="doc-opt is-mod">radio</span><span class="doc-opt is-mod">hidden</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">required</span><span class="doc-opt is-mod">disabled</span><span class="doc-opt is-mod">readonly</span><span class="doc-opt is-mod">error</span><span class="doc-opt is-mod">success</span><span class="doc-opt is-mod">float</span><span class="doc-opt is-mod">checked</span></div><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>
93
- <div class="doc-preview is-stack">
94
- <form nexa="form validate" style="width:100%;max-width:360px;display:grid;gap:12px">
95
- <div nexa="field email float required" label="Email"></div>
96
- <div nexa="field password float required" label="Password"></div>
97
- <button nexa="btn primary pill block" type="submit">Sign in</button>
98
- </form>
99
- </div>
100
- <div class="doc-code">
101
- <div class="doc-code-bar"><button type="button" class="doc-copy" data-copy="form-host">Copy</button></div>
102
- <pre><code id="form-host">&lt;form nexa="form validate"&gt;
103
- &lt;div nexa="field email float required" label="Email"&gt;&lt;/div&gt;
104
- &lt;div nexa="field password float required" label="Password"&gt;&lt;/div&gt;
105
- &lt;button nexa="btn primary pill block" type="submit"&gt;Sign in&lt;/button&gt;
106
- &lt;/form&gt;</code></pre>
107
- </div>
108
- </div>
109
- </main>
110
- <aside class="doc-outline" data-doc-outline aria-label="On this page"></aside>
111
- </div>
112
- <dialog class="doc-search-dialog" data-doc-dialog aria-label="Search documentation">
113
- <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>
114
- <div class="doc-search-results" data-doc-search-results></div>
115
- </dialog>
116
- </body>
117
- </html>