@antadesign/anta 0.1.1-dev.1 → 0.1.1-dev.2

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.
package/NOTICES.md ADDED
@@ -0,0 +1,279 @@
1
+ # Third-party notices
2
+
3
+ The Anta design system bundles icons derived from third-party
4
+ projects. Their original copyright and license texts are reproduced
5
+ below as required by those licenses.
6
+
7
+ ---
8
+
9
+ ## Lucide Icons
10
+
11
+ A subset of the icons shipped under `dist/elements/a-icon.shapes.css`
12
+ (and the source SVGs in `src/elements/icons/`) are derived from
13
+ [Lucide](https://lucide.dev/) and are distributed under the ISC
14
+ license:
15
+
16
+ ```
17
+ ISC License
18
+
19
+ Copyright (c) 2026 Lucide Icons and Contributors
20
+
21
+ Permission to use, copy, modify, and/or distribute this software for any
22
+ purpose with or without fee is hereby granted, provided that the above
23
+ copyright notice and this permission notice appear in all copies.
24
+
25
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
26
+ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
27
+ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
28
+ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
29
+ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
30
+ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
31
+ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
32
+ ```
33
+
34
+ ---
35
+
36
+ ## Feather Icons
37
+
38
+ A further subset of the Lucide icons listed above is itself derived
39
+ from the [Feather](https://feathericons.com/) project and falls under
40
+ the MIT license. Per Lucide's NOTICES file, the affected icons are:
41
+
42
+ > airplay, alert-circle, alert-octagon, alert-triangle, aperture,
43
+ > arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down,
44
+ > arrow-left-circle, arrow-left, arrow-right-circle, arrow-right,
45
+ > arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign,
46
+ > calendar, cast, check, chevron-down, chevron-left, chevron-right,
47
+ > chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up,
48
+ > circle, clipboard, clock, code, columns, command, compass,
49
+ > corner-down-left, corner-down-right, corner-left-down, corner-left-up,
50
+ > corner-right-down, corner-right-up, corner-up-left, corner-up-right,
51
+ > crosshair, database, divide-circle, divide-square, dollar-sign,
52
+ > download, external-link, feather, frown, hash, headphones, help-circle,
53
+ > info, italic, key, layout, life-buoy, link-2, link, loader, lock,
54
+ > log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle,
55
+ > minus-square, minus, monitor, moon, more-horizontal, more-vertical,
56
+ > move, music, navigation-2, navigation, octagon, pause-circle, percent,
57
+ > plus-circle, plus-square, plus, power, radio, rss, search, server,
58
+ > share, shopping-bag, sidebar, smartphone, smile, square, table-2,
59
+ > tablet, target, terminal, trash-2, trash, triangle, tv, type, upload,
60
+ > x-circle, x-octagon, x-square, x, zoom-in, zoom-out
61
+
62
+ ```
63
+ The MIT License (MIT)
64
+
65
+ Copyright (c) 2013-present Cole Bemis
66
+
67
+ Permission is hereby granted, free of charge, to any person obtaining a copy
68
+ of this software and associated documentation files (the "Software"), to deal
69
+ in the Software without restriction, including without limitation the rights
70
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
71
+ copies of the Software, and to permit persons to whom the Software is
72
+ furnished to do so, subject to the following conditions:
73
+
74
+ The above copyright notice and this permission notice shall be included in all
75
+ copies or substantial portions of the Software.
76
+
77
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
78
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
79
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
80
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
81
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
82
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
83
+ SOFTWARE.
84
+ ```
85
+
86
+ ---
87
+
88
+ ## Blueprint.js (Palantir)
89
+
90
+ Some icons shipped under `dist/elements/a-icon.shapes.css` (and the
91
+ source SVGs in `src/elements/icons/`) are derived from
92
+ [Blueprint](https://github.com/palantir/blueprint), Copyright Palantir
93
+ Technologies, Inc. Blueprint is licensed under the Apache License,
94
+ Version 2.0; the full text is reproduced below.
95
+
96
+ ```
97
+ Apache License
98
+ Version 2.0, January 2004
99
+ http://www.apache.org/licenses/
100
+
101
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
102
+
103
+ 1. Definitions.
104
+
105
+ "License" shall mean the terms and conditions for use, reproduction,
106
+ and distribution as defined by Sections 1 through 9 of this document.
107
+
108
+ "Licensor" shall mean the copyright owner or entity authorized by
109
+ the copyright owner that is granting the License.
110
+
111
+ "Legal Entity" shall mean the union of the acting entity and all
112
+ other entities that control, are controlled by, or are under common
113
+ control with that entity. For the purposes of this definition,
114
+ "control" means (i) the power, direct or indirect, to cause the
115
+ direction or management of such entity, whether by contract or
116
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
117
+ outstanding shares, or (iii) beneficial ownership of such entity.
118
+
119
+ "You" (or "Your") shall mean an individual or Legal Entity
120
+ exercising permissions granted by this License.
121
+
122
+ "Source" form shall mean the preferred form for making modifications,
123
+ including but not limited to software source code, documentation
124
+ source, and configuration files.
125
+
126
+ "Object" form shall mean any form resulting from mechanical
127
+ transformation or translation of a Source form, including but
128
+ not limited to compiled object code, generated documentation,
129
+ and conversions to other media types.
130
+
131
+ "Work" shall mean the work of authorship, whether in Source or
132
+ Object form, made available under the License, as indicated by a
133
+ copyright notice that is included in or attached to the work
134
+ (an example is provided in the Appendix below).
135
+
136
+ "Derivative Works" shall mean any work, whether in Source or Object
137
+ form, that is based on (or derived from) the Work and for which the
138
+ editorial revisions, annotations, elaborations, or other modifications
139
+ represent, as a whole, an original work of authorship. For the purposes
140
+ of this License, Derivative Works shall not include works that remain
141
+ separable from, or merely link (or bind by name) to the interfaces of,
142
+ the Work and Derivative Works thereof.
143
+
144
+ "Contribution" shall mean any work of authorship, including
145
+ the original version of the Work and any modifications or additions
146
+ to that Work or Derivative Works thereof, that is intentionally
147
+ submitted to Licensor for inclusion in the Work by the copyright owner
148
+ or by an individual or Legal Entity authorized to submit on behalf of
149
+ the copyright owner. For the purposes of this definition, "submitted"
150
+ means any form of electronic, verbal, or written communication sent
151
+ to the Licensor or its representatives, including but not limited to
152
+ communication on electronic mailing lists, source code control systems,
153
+ and issue tracking systems that are managed by, or on behalf of, the
154
+ Licensor for the purpose of discussing and improving the Work, but
155
+ excluding communication that is conspicuously marked or otherwise
156
+ designated in writing by the copyright owner as "Not a Contribution."
157
+
158
+ "Contributor" shall mean Licensor and any individual or Legal Entity
159
+ on behalf of whom a Contribution has been received by Licensor and
160
+ subsequently incorporated within the Work.
161
+
162
+ 2. Grant of Copyright License. Subject to the terms and conditions of
163
+ this License, each Contributor hereby grants to You a perpetual,
164
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
165
+ copyright license to reproduce, prepare Derivative Works of,
166
+ publicly display, publicly perform, sublicense, and distribute the
167
+ Work and such Derivative Works in Source or Object form.
168
+
169
+ 3. Grant of Patent License. Subject to the terms and conditions of
170
+ this License, each Contributor hereby grants to You a perpetual,
171
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
172
+ (except as stated in this section) patent license to make, have made,
173
+ use, offer to sell, sell, import, and otherwise transfer the Work,
174
+ where such license applies only to those patent claims licensable
175
+ by such Contributor that are necessarily infringed by their
176
+ Contribution(s) alone or by combination of their Contribution(s)
177
+ with the Work to which such Contribution(s) was submitted. If You
178
+ institute patent litigation against any entity (including a
179
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
180
+ or a Contribution incorporated within the Work constitutes direct
181
+ or contributory patent infringement, then any patent licenses
182
+ granted to You under this License for that Work shall terminate
183
+ as of the date such litigation is filed.
184
+
185
+ 4. Redistribution. You may reproduce and distribute copies of the
186
+ Work or Derivative Works thereof in any medium, with or without
187
+ modifications, and in Source or Object form, provided that You
188
+ meet the following conditions:
189
+
190
+ (a) You must give any other recipients of the Work or
191
+ Derivative Works a copy of this License; and
192
+
193
+ (b) You must cause any modified files to carry prominent notices
194
+ stating that You changed the files; and
195
+
196
+ (c) You must retain, in the Source form of any Derivative Works
197
+ that You distribute, all copyright, patent, trademark, and
198
+ attribution notices from the Source form of the Work,
199
+ excluding those notices that do not pertain to any part of
200
+ the Derivative Works; and
201
+
202
+ (d) If the Work includes a "NOTICE" text file as part of its
203
+ distribution, then any Derivative Works that You distribute must
204
+ include a readable copy of the attribution notices contained
205
+ within such NOTICE file, excluding those notices that do not
206
+ pertain to any part of the Derivative Works, in at least one
207
+ of the following places: within a NOTICE text file distributed
208
+ as part of the Derivative Works; within the Source form or
209
+ documentation, if provided along with the Derivative Works; or,
210
+ within a display generated by the Derivative Works, if and
211
+ wherever such third-party notices normally appear. The contents
212
+ of the NOTICE file are for informational purposes only and
213
+ do not modify the License. You may add Your own attribution
214
+ notices within Derivative Works that You distribute, alongside
215
+ or as an addendum to the NOTICE text from the Work, provided
216
+ that such additional attribution notices cannot be construed
217
+ as modifying the License.
218
+
219
+ You may add Your own copyright statement to Your modifications and
220
+ may provide additional or different license terms and conditions
221
+ for use, reproduction, or distribution of Your modifications, or
222
+ for any such Derivative Works as a whole, provided Your use,
223
+ reproduction, and distribution of the Work otherwise complies with
224
+ the conditions stated in this License.
225
+
226
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
227
+ any Contribution intentionally submitted for inclusion in the Work
228
+ by You to the Licensor shall be under the terms and conditions of
229
+ this License, without any additional terms or conditions.
230
+ Notwithstanding the above, nothing herein shall supersede or modify
231
+ the terms of any separate license agreement you may have executed
232
+ with Licensor regarding such Contributions.
233
+
234
+ 6. Trademarks. This License does not grant permission to use the trade
235
+ names, trademarks, service marks, or product names of the Licensor,
236
+ except as required for reasonable and customary use in describing the
237
+ origin of the Work and reproducing the content of the NOTICE file.
238
+
239
+ 7. Disclaimer of Warranty. Unless required by applicable law or
240
+ agreed to in writing, Licensor provides the Work (and each
241
+ Contributor provides its Contributions) on an "AS IS" BASIS,
242
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
243
+ implied, including, without limitation, any warranties or conditions
244
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
245
+ PARTICULAR PURPOSE. You are solely responsible for determining the
246
+ appropriateness of using or redistributing the Work and assume any
247
+ risks associated with Your exercise of permissions under this License.
248
+
249
+ 8. Limitation of Liability. In no event and under no legal theory,
250
+ whether in tort (including negligence), contract, or otherwise,
251
+ unless required by applicable law (such as deliberate and grossly
252
+ negligent acts) or agreed to in writing, shall any Contributor be
253
+ liable to You for damages, including any direct, indirect, special,
254
+ incidental, or consequential damages of any character arising as a
255
+ result of this License or out of the use or inability to use the
256
+ Work (including but not limited to damages for loss of goodwill,
257
+ work stoppage, computer failure or malfunction, or any and all
258
+ other commercial damages or losses), even if such Contributor
259
+ has been advised of the possibility of such damages.
260
+
261
+ 9. Accepting Warranty or Additional Liability. While redistributing
262
+ the Work or Derivative Works thereof, You may choose to offer,
263
+ and charge a fee for, acceptance of support, warranty, indemnity,
264
+ or other liability obligations and/or rights consistent with this
265
+ License. However, in accepting such obligations, You may act only
266
+ on Your own behalf and on Your sole responsibility, not on behalf
267
+ of any other Contributor, and only if You agree to indemnify,
268
+ defend, and hold each Contributor harmless for any liability
269
+ incurred by, or claims asserted against, such Contributor by reason
270
+ of your accepting any such warranty or additional liability.
271
+
272
+ END OF TERMS AND CONDITIONS
273
+ ```
274
+
275
+ Some of the Blueprint-derived SVGs in this package have been modified
276
+ (stripped of the original `width`/`height` attributes, recolored to use
277
+ `currentColor`, and renamed to follow Anta's icon-naming conventions);
278
+ these modifications are themselves released under the Apache License,
279
+ Version 2.0.
package/README.md CHANGED
@@ -1,54 +1,120 @@
1
- # Anta
1
+ # @antadesign/anta
2
2
 
3
- Portable UI component library. Framework-agnostic web components with JSX wrappers that work in React, Preact, or any custom JSX runtime.
3
+ <a href="https://antithesis.com" target="_blank" rel="noopener noreferrer">Antithesis</a> design system, **Anta**, has three layers: global CSS tokens, framework-agnostic web components that work with plain HTML, and JSX wrappers for React and Preact.
4
4
 
5
- ## Usage
5
+ The Antithesis SaaS has an unusual architecture: most of its UI code runs inside a Worker thread, driven by a custom reactive engine that powers Antithesis notebooks. To keep state in sync between the Worker and the UI thread, Anta's web components must be **fully declarative** — they never mutate their own attributes (any internal state changes happen inside Shadow DOM, invisible to the outer document). A self-mutating attribute would break the Worker↔UI sync.
6
6
 
7
- ### React
7
+ This constraint shapes the architecture: the web components carry the core styling and the occasional browser-API call (e.g. `getBoundingClientRect()`) without imposing a framework. Majority of web components are stateless. The React/Preact wrappers exist for dynamic state and conditional rendering.
8
+
9
+ ## Installation
10
+
11
+ `@antadesign/anta` is an NPM package, so you can `npm install @antadesign/anta` or do that with `pnpm` / `bun`.
8
12
 
9
- Works out of the box no configuration needed.
13
+ Since Anta is in active development we suggest using the latest dev version: `"@antadesign/anta": "dev"` in your `package.json`. For production builds we suggest pinning to a stable version from npm.
14
+
15
+ ### Usage
10
16
 
11
17
  ```tsx
12
- import { Progress } from 'anta'
18
+ import { Progress } from '@antadesign/anta'
19
+ import '@antadesign/anta/elements' // registers <a-progress> custom element
20
+
21
+ <Progress value={42} label="uploaded.." hint="3 of 7" />
22
+ ```
23
+
24
+ ## Registering elements
25
+
26
+ The JSX wrappers (React components) as `Progress` render custom DOM elements as `<a-progress>`. The custom elements themselves must be registered with the browser **before** they appear in the DOM, and registration only works where `HTMLElement` exists — i.e. the UI thread of a real browser. **Node.js (SSR) and Worker threads don't have `HTMLElement`**, so the import is harmless in those environments: it does nothing — registration is skipped silently and the class uses a stand-in base instead of crashing — though it might extend your worker's bundle size a bit.
27
+
28
+ ```ts
29
+ import '@antadesign/anta/elements' // auto-registers all elements
30
+ ```
31
+
32
+ The cleanest pattern is a **static, synchronous import at your app's entry file** — outside any component, outside any hook:
13
33
 
14
- <Progress value={42} max={100} tone="info" />
34
+ ```ts
35
+ // src/main.tsx (or wherever your root render lives)
36
+ import '@antadesign/anta/elements'
37
+ import { createRoot } from 'react-dom/client'
38
+ import App from './App'
39
+ createRoot(document.getElementById('root')!).render(<App />)
15
40
  ```
16
41
 
17
- ### Preact (compat mode)
42
+ Bundlers resolve this at module-init time, so by the time any component renders an `<a-progress>`, the custom element class is already registered — there's no flash of un-upgraded elements.
43
+
44
+ > **Why not `useEffect(() => import('@antadesign/anta/elements'), [])`?**
45
+ >
46
+ > `useEffect` fires after paint, and the dynamic `import()` itself is asynchronous. In practice the browser paints unregistered custom elements (which collapse to nothing) for a few hundred milliseconds before the upgrade catches up. `useLayoutEffect` doesn't help either: the async import still resolves after paint, and `useLayoutEffect` warns during SSR hydration. A static import at the entry file avoids all of this.
47
+
48
+ Where to put the static import depends on the runtime:
49
+
50
+ **Plain HTML / static sites** — put it in a `<script type="module">` tag in the document head. That's client-side by default.
51
+
52
+ **SSR frameworks (Astro, Next.js)** — register from a script that the framework only ships to the client. In Astro: `<script>import '@antadesign/anta/elements'</script>` (Astro `<script>` tags are client-side by default). In Next.js: a top-level `import` in a Client Component file (the one with `'use client'` at the top) — that file is only bundled into the client chunk, so the import never reaches Node.
53
+
54
+ **React / Preact apps where the UI runs in a Worker thread (the Antithesis setup)** — register the elements in your UI-thread bootstrap code, the script that owns the real DOM. The Worker won't have `HTMLElement`, so the import must not run there.
18
55
 
19
- If your project aliases `react` → `preact/compat`, anta works with no extra setup — same as React.
56
+ ## Framework setup
20
57
 
21
- ### Preact (no compat)
58
+ ### React
59
+
60
+ Works out of the box.
61
+
62
+ ### Preact with compat
63
+
64
+ If your bundler aliases `react` → `preact/compat`, anta works automatically — no extra setup.
65
+
66
+ ### Preact without compat
22
67
 
23
68
  Call `configure()` before rendering any anta components:
24
69
 
25
70
  ```ts
26
- import { configure } from 'anta'
71
+ import { configure } from '@antadesign/anta'
27
72
  import { h, Fragment } from 'preact'
28
-
29
73
  configure(h, Fragment)
30
74
  ```
31
75
 
32
- ### Custom JSX runtime
76
+ ### Raw web components (no JSX)
33
77
 
34
- Pass any `h(type, props, ...children)` function:
78
+ ```html
79
+ <link rel="stylesheet" href="@antadesign/anta/elements/a-progress.css">
80
+ <script type="module">
81
+ import '@antadesign/anta/elements'
82
+ </script>
35
83
 
36
- ```ts
37
- import { configure } from 'anta'
38
- configure(myH, myFragment)
84
+ <a-progress value="42" max="100" tone="info"></a-progress>
39
85
  ```
40
86
 
41
- ## Web components
87
+ ## Dark mode
42
88
 
43
- Anta components are built on custom elements with shadow DOM. Import `anta/elements` to auto-register them, or use individual register functions:
89
+ Add the `dark` class to any ancestor element:
90
+
91
+ ```html
92
+ <div class="dark">
93
+ <Progress value={50} />
94
+ </div>
95
+ ```
96
+
97
+ ## Fonts
98
+
99
+ Anta is designed with a customized version of <a href="https://typetype.org/fonts/tt-interphases-pro" target="_blank" rel="noopener noreferrer">TT Interphases Pro</a> in mind, but it doesn't ship any font binaries. Components reference families through the `--sans-serif` and `--monospace` CSS variables and fall back to native system stacks when no font is registered.
100
+
101
+ Anta sets `font-size: 15px` on `:root` (so `1rem = 15px`), intentionally diverging from the browser default of 16px to match Antithesis's information-dense layouts. This is applied via `@antadesign/anta/anta_global_tokens.css`:
44
102
 
45
103
  ```ts
46
- import 'anta/elements' // auto-register all
47
- import { register_a_progress } from 'anta/elements' // one at a time
104
+ import '@antadesign/anta/anta_global_tokens.css'
48
105
  ```
49
106
 
50
- Raw web components work without JSX:
107
+ To use the Antithesis fonts, register your own `@font-face` declarations and override the variables:
51
108
 
52
- ```html
53
- <a-progress value="42" max="100" tone="info"></a-progress>
109
+ ```css
110
+ @font-face {
111
+ font-family: "Antithesis sans";
112
+ src: url("/path/to/your/sans.woff2") format("woff2");
113
+ /* ... */
114
+ }
115
+
116
+ :root {
117
+ --sans-serif: "Antithesis sans", sans-serif;
118
+ --monospace: "Antithesis mono", monospace;
119
+ }
54
120
  ```