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

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/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Antithesis
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
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,142 @@
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 '@antadesign/anta/tokens.css' // CSS custom properties (colors, sizes, fonts)
19
+ import '@antadesign/anta/reset.css' // small reset + Anta's typography opinions
20
+ import '@antadesign/anta/elements' // registers <a-progress> et al.
21
+ import { Progress } from '@antadesign/anta'
13
22
 
14
- <Progress value={42} max={100} tone="info" />
23
+ <Progress value={42} label="uploaded.." hint="3 of 7" />
15
24
  ```
16
25
 
17
- ### Preact (compat mode)
26
+ ### What you import (and why)
18
27
 
19
- If your project aliases `react` `preact/compat`, anta works with no extra setup same as React.
28
+ Anta exposes four independent imports. Tokens + elements + the JSX layer are the minimum to render a styled component; the reset is recommended but skippable.
20
29
 
21
- ### Preact (no compat)
30
+ | Import | Provides | Skip if… |
31
+ |---|---|---|
32
+ | `@antadesign/anta/tokens.css` | The CSS custom properties — `--bg-base`, `--text-1…5`, `--border-1…5`, the `.dark`-ancestor toggling, the base `font-size: 15px`. Also declares the `@layer base, anta, components, utilities;` cascade order. | You're applying your own design tokens at the same variable names. |
33
+ | `@antadesign/anta/reset.css` | Modern small reset (box-sizing, margin reset, replaced-element block, form-control font inheritance, text-wrap defaults) plus Anta's typography opinions for `h1-h6`, `strong`, `ul / ol / menu`, `a` / link states. Lives in `@layer anta`. | You already have a reset and don't want Anta's typography defaults. |
34
+ | `@antadesign/anta/elements` | Side-effect import that registers `<a-progress>`, `<a-text>`, `<a-icon>` as custom elements *and* attaches their per-element CSS (also in `@layer anta`). | You're rendering Anta only on the server (no DOM) and never hydrating. |
35
+ | `@antadesign/anta` | The JSX wrappers (`Progress`, `Text`, `Icon`) — typed React/Preact components that emit `<a-*>` tags. | You're writing the `<a-*>` elements by hand and don't need a JSX layer. |
22
36
 
23
- Call `configure()` before rendering any anta components:
37
+ The chain matters: the per-element CSS that ships with `/elements` references variables like `var(--text-1)` and `var(--bg-base)`. Those variables are *only defined* by `tokens.css`. Skip the tokens import and the components render with whatever the surrounding cascade provides — usually nothing styled at all.
24
38
 
25
- ```ts
26
- import { configure } from 'anta'
27
- import { h, Fragment } from 'preact'
39
+ ### Cascade layers
28
40
 
29
- configure(h, Fragment)
41
+ Anta's reset and element CSS live in `@layer anta`. `tokens.css` pre-declares an order of `@layer base, anta, components, utilities;`, which keeps Anta's defaults above any preflight resets (Tailwind's `@layer base`, Normalize, etc.) while letting your own `@layer components` rules and utility-class frameworks like Tailwind (`@layer utilities`) override Anta when you ask them to.
42
+
43
+ If you need a different order, declare it in your *own* CSS file that loads **before** `tokens.css`. The first mention of each layer name fixes its position:
44
+
45
+ ```css
46
+ /* your global.css, loaded before anta */
47
+ @layer reset, anta, my-components, utilities;
30
48
  ```
31
49
 
32
- ### Custom JSX runtime
50
+ CSS custom properties (the `:root { --… }` declarations in `tokens.css`) stay unlayered so they take effect everywhere unconditionally.
51
+
52
+ ## Registering elements
33
53
 
34
- Pass any `h(type, props, ...children)` function:
54
+ 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.
35
55
 
36
56
  ```ts
37
- import { configure } from 'anta'
38
- configure(myH, myFragment)
57
+ import '@antadesign/anta/elements' // auto-registers all elements
39
58
  ```
40
59
 
41
- ## Web components
60
+ The cleanest pattern is a **static, synchronous import at your app's entry file** — outside any component, outside any hook:
61
+
62
+ ```ts
63
+ // src/main.tsx (or wherever your root render lives)
64
+ import '@antadesign/anta/elements'
65
+ import { createRoot } from 'react-dom/client'
66
+ import App from './App'
67
+ createRoot(document.getElementById('root')!).render(<App />)
68
+ ```
69
+
70
+ 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.
71
+
72
+ > **Why not `useEffect(() => import('@antadesign/anta/elements'), [])`?**
73
+ >
74
+ > `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.
75
+
76
+ Where to put the static import depends on the runtime:
77
+
78
+ **Plain HTML / static sites** — put it in a `<script type="module">` tag in the document head. That's client-side by default.
79
+
80
+ **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.
81
+
82
+ **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.
83
+
84
+ ## Framework setup
42
85
 
43
- Anta components are built on custom elements with shadow DOM. Import `anta/elements` to auto-register them, or use individual register functions:
86
+ ### React
87
+
88
+ Works out of the box.
89
+
90
+ ### Preact with compat
91
+
92
+ If your bundler aliases `react` → `preact/compat`, anta works automatically — no extra setup.
93
+
94
+ ### Preact without compat
95
+
96
+ Call `configure()` before rendering any anta components:
44
97
 
45
98
  ```ts
46
- import 'anta/elements' // auto-register all
47
- import { register_a_progress } from 'anta/elements' // one at a time
99
+ import { configure } from '@antadesign/anta'
100
+ import { h, Fragment } from 'preact'
101
+ configure(h, Fragment)
48
102
  ```
49
103
 
50
- Raw web components work without JSX:
104
+ ### Raw web components (no JSX)
51
105
 
52
106
  ```html
107
+ <link rel="stylesheet" href="@antadesign/anta/elements/a-progress.css">
108
+ <script type="module">
109
+ import '@antadesign/anta/elements'
110
+ </script>
111
+
53
112
  <a-progress value="42" max="100" tone="info"></a-progress>
54
113
  ```
114
+
115
+ ## Dark mode
116
+
117
+ Add the `dark` class to any ancestor element:
118
+
119
+ ```html
120
+ <div class="dark">
121
+ <Progress value={50} />
122
+ </div>
123
+ ```
124
+
125
+ ## Fonts
126
+
127
+ 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. The base size is `font-size: 15px` on `:root` (so `1rem = 15px`), intentionally diverging from the browser default of 16px to match Antithesis's information-dense layouts — both the variables and the base size live in `tokens.css`.
128
+
129
+ To use the Antithesis fonts, register your own `@font-face` declarations and override the variables:
130
+
131
+ ```css
132
+ @font-face {
133
+ font-family: "Antithesis sans";
134
+ src: url("/path/to/your/sans.woff2") format("woff2");
135
+ /* ... */
136
+ }
137
+
138
+ :root {
139
+ --sans-serif: "Antithesis sans", sans-serif;
140
+ --monospace: "Antithesis mono", monospace;
141
+ }
142
+ ```
@@ -1 +1,9 @@
1
1
  export declare function hasChildren(children: React.ReactNode): boolean;
2
+ /**
3
+ * `HTMLElement` in browsers, a noop class in Node/Worker environments.
4
+ * Use this as the base for custom element classes so importing the
5
+ * module in a non-DOM environment doesn't throw on `extends HTMLElement`.
6
+ * Instantiation in non-DOM environments still fails, but no consumer
7
+ * should be doing that.
8
+ */
9
+ export declare const HTMLElementBase: typeof HTMLElement;
@@ -1,6 +1,9 @@
1
1
  function hasChildren(children) {
2
2
  return Array.isArray(children) ? children.length > 0 : children != null;
3
3
  }
4
+ const HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
5
+ };
4
6
  export {
7
+ HTMLElementBase,
5
8
  hasChildren
6
9
  };
@@ -0,0 +1,40 @@
1
+ import type { BaseProps } from "../general_types";
2
+ import type { IconShape } from '../elements/a-icon.shapes';
3
+ export interface IconProps extends BaseProps {
4
+ /** Which icon to render. The set of valid shapes comes from Anta's
5
+ * built-in icons plus any consumer-generated shapes (via the
6
+ * `IconShapes` interface module augmentation). */
7
+ shape: IconShape;
8
+ /** Width and height in pixels. Defaults to `16`. */
9
+ size?: number;
10
+ /** Accessible name for the icon. When set, the wrapper exposes
11
+ * `role="img"` and `aria-label={label}` so screen readers announce
12
+ * the icon. When omitted (the default), the icon is treated as
13
+ * decorative — `aria-hidden="true"` is applied so it doesn't add
14
+ * noise alongside neighbouring text. */
15
+ label?: string;
16
+ }
17
+ /**
18
+ * Renders an `<a-icon>` web component. Color follows `currentColor`;
19
+ * size is set via the `size` prop (defaults to 16).
20
+ *
21
+ * Requires `@antadesign/anta/elements` to be imported (client-side only)
22
+ * to register the underlying custom element and load the icon
23
+ * stylesheets.
24
+ *
25
+ * @example Decorative icon paired with text — no label needed
26
+ * ```tsx
27
+ * <button>
28
+ * <Icon shape="trash" />
29
+ * Delete
30
+ * </button>
31
+ * ```
32
+ *
33
+ * @example Meaningful icon-only control — pass a label
34
+ * ```tsx
35
+ * <button aria-label="Delete">
36
+ * <Icon shape="trash" label="Delete" />
37
+ * </button>
38
+ * ```
39
+ */
40
+ export declare const Icon: ({ shape, size, label, className, style, ...rest }: IconProps) => any;
@@ -0,0 +1,18 @@
1
+ import { jsx } from "@antadesign/anta/jsx-runtime";
2
+ const Icon = ({ shape, size, label, className, style, ...rest }) => {
3
+ const sizedStyle = size != null ? { ...style, ["--icon-size"]: `${size}px` } : style;
4
+ const a11y = label != null ? { role: "img", "aria-label": label } : { "aria-hidden": "true" };
5
+ return /* @__PURE__ */ jsx(
6
+ "a-icon",
7
+ {
8
+ shape,
9
+ class: className,
10
+ style: sizedStyle,
11
+ ...a11y,
12
+ ...rest
13
+ }
14
+ );
15
+ };
16
+ export {
17
+ Icon
18
+ };
@@ -1,12 +1,41 @@
1
1
  import type { BaseProps } from "../general_types";
2
- interface ProgressProps extends BaseProps {
3
- /** Current progress. Negative values are clamped to 0. */
2
+ export interface ProgressProps extends BaseProps {
3
+ /** Current progress value. Negative values are clamped to 0. */
4
4
  value: number;
5
- /** Upper bound of the range. Defaults to 100. Negative values are clamped to 0. */
5
+ /** Upper bound of the range. Defaults to 100. */
6
6
  max?: number;
7
+ /** Color variant. `'info'` applies a blue tint. */
7
8
  tone?: 'neutral' | 'info';
9
+ /** Text label displayed after the percentage. */
8
10
  label?: string;
11
+ /** Right-aligned hint text (e.g. "3 of 7"). */
9
12
  hint?: string;
10
13
  }
14
+ /**
15
+ * Progress indicator for displaying task completion.
16
+ *
17
+ * Renders an `<a-progress>` web component with an optional label area
18
+ * showing percentage, text label, and hint.
19
+ *
20
+ * Requires `@antadesign/anta/elements` to be imported (client-side only)
21
+ * to register the underlying custom element.
22
+ *
23
+ * @example Basic usage
24
+ * ```tsx
25
+ * import { Progress } from '@antadesign/anta'
26
+ * import '@antadesign/anta/elements'
27
+ *
28
+ * <Progress value={60} />
29
+ * ```
30
+ *
31
+ * @example With label and hint
32
+ * ```tsx
33
+ * <Progress value={42} label="Uploading files..." hint="3 of 7" />
34
+ * ```
35
+ *
36
+ * @example Info tone
37
+ * ```tsx
38
+ * <Progress value={75} tone="info" label="Processing" />
39
+ * ```
40
+ */
11
41
  export declare const Progress: ({ value, max, tone, label, hint, className, children, ...rest }: ProgressProps) => any;
12
- export {};
@@ -2,12 +2,17 @@ import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
2
2
  import { hasChildren } from "../anta_helpers";
3
3
  const Progress = ({ value, max = 100, tone, label, hint, className, children, ...rest }) => {
4
4
  const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, value / max * 100))) : 0;
5
+ const ariaLabel = [label, `${percent}%`, hint].filter(Boolean).join(" \xB7 ") || void 0;
5
6
  return /* @__PURE__ */ jsx(
6
7
  "a-progress",
7
8
  {
8
9
  value,
9
10
  max,
10
11
  tone,
12
+ role: "progressbar",
13
+ "aria-valuenow": value,
14
+ "aria-valuemax": max,
15
+ "aria-label": ariaLabel,
11
16
  class: className,
12
17
  ...rest,
13
18
  children: hasChildren(children) ? children : /* @__PURE__ */ jsxs("a-progress-label", { children: [
@@ -0,0 +1,42 @@
1
+ import type { BaseProps } from "../general_types";
2
+ export interface TextProps extends BaseProps {
3
+ /** Visual priority. Maps to text-1..text-5. Defaults to 'primary' (text-1). */
4
+ priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
5
+ /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
6
+ tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
7
+ /** Render as inline-block instead of the default block element. */
8
+ inline?: boolean;
9
+ /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
10
+ * single line; any integer ≥ 2 clamps to that many lines. Uses the
11
+ * `-webkit-line-clamp` technique, supported in all major browsers
12
+ * (Firefox 68+, Chrome, Safari, Edge). */
13
+ truncate?: boolean | number;
14
+ /** Show a fade hint and chevron over the truncated text and let the
15
+ * user expand it by clicking the chevron region or pressing Enter
16
+ * while the chevron has keyboard focus. Only takes effect together
17
+ * with `truncate`. */
18
+ expandable?: boolean;
19
+ }
20
+ /**
21
+ * Block-level text container with priority and tone support.
22
+ *
23
+ * Renders an `<a-text>` web component that scopes its descendants'
24
+ * color hierarchy. Links nested inside follow the design system's
25
+ * priority-aware link styling. Pass `inline` for an inline-block
26
+ * variant, `truncate` for ellipsis truncation, and `expandable`
27
+ * (combined with `truncate`) to let the user reveal the full text.
28
+ *
29
+ * Requires `@antadesign/anta/elements` to be imported (client-side only)
30
+ * to register the underlying custom element.
31
+ *
32
+ * @example Basic usage
33
+ * ```tsx
34
+ * <Text priority="secondary">Secondary emphasis</Text>
35
+ * ```
36
+ *
37
+ * @example Expandable truncated text
38
+ * ```tsx
39
+ * <Text truncate={3} expandable>…long paragraph…</Text>
40
+ * ```
41
+ */
42
+ export declare const Text: ({ priority, tone, inline, truncate, expandable, className, style, children, ...rest }: TextProps) => any;