@a4ui/core 0.13.1 β 0.14.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.
- package/README.md +71 -40
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1721 -1598
- package/dist/ui/Ripple.d.ts +25 -0
- package/dist/ui/Typewriter.d.ts +28 -0
- package/package.json +15 -6
- package/src/index.ts +3 -1
- package/src/ui/Ripple.tsx +119 -0
- package/src/ui/Typewriter.tsx +149 -0
- package/src/elements.tsx +0 -167
- package/src/styles/space.css +0 -510
- package/src/styles/tokens.css +0 -213
package/README.md
CHANGED
|
@@ -1,23 +1,25 @@
|
|
|
1
1
|
# A4ui
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
[](https://a4ui.pages.dev/)
|
|
6
4
|
|
|
7
5
|
[](https://www.npmjs.com/package/@a4ui/core)
|
|
8
6
|
[](./LICENSE)
|
|
9
|
-
[](https://
|
|
10
|
-
[](https://
|
|
11
|
-
[](https://
|
|
12
|
-
[](https://
|
|
7
|
+
[](https://a4ui.pages.dev/lighthouse.html)
|
|
8
|
+
[](https://a4ui.pages.dev/lighthouse.html)
|
|
9
|
+
[](https://a4ui.pages.dev/lighthouse.html)
|
|
10
|
+
[](https://a4ui.pages.dev/lighthouse.html)
|
|
13
11
|
[](https://www.npmjs.com/package/@a4ui/core)
|
|
14
12
|
[](https://bundlephobia.com/package/@a4ui/core)
|
|
15
13
|
|
|
16
14
|
Accessible SolidJS **Spatial Glass** component library β 75+ components,
|
|
17
|
-
layouts, runtime themes, a motion system,
|
|
18
|
-
Components. Named after the 4 people in the Rivera
|
|
15
|
+
layouts, runtime themes, a motion system, **1500+ icons** (lucide), and
|
|
16
|
+
framework-agnostic Web Components. Named after the 4 people in the Rivera
|
|
17
|
+
family. π
|
|
18
|
+
|
|
19
|
+
[](https://a4ui.pages.dev/#/examples/analytics)
|
|
19
20
|
|
|
20
|
-
**π Docs & live examples:** https://
|
|
21
|
+
**π Docs & live examples:** https://a4ui.pages.dev/ Β· **π Stability:**
|
|
22
|
+
[STABILITY.md](./STABILITY.md) Β· **β¬οΈ Upgrading:** [MIGRATION.md](./MIGRATION.md)
|
|
21
23
|
|
|
22
24
|
Three layers, one identity:
|
|
23
25
|
|
|
@@ -35,10 +37,12 @@ npm install @a4ui/core
|
|
|
35
37
|
|
|
36
38
|
Peer dependency: `solid-js` (>= 1.9).
|
|
37
39
|
|
|
38
|
-
**Starting fresh?** Scaffold a preconfigured Solid + Vite +
|
|
40
|
+
**Starting fresh?** Scaffold a preconfigured Solid + Vite + A4ui app (with or
|
|
41
|
+
without Tailwind):
|
|
39
42
|
|
|
40
43
|
```bash
|
|
41
|
-
|
|
44
|
+
npm create a4ui@latest my-app
|
|
45
|
+
# then: cd my-app && npm install && npm run dev
|
|
42
46
|
```
|
|
43
47
|
|
|
44
48
|
## Use
|
|
@@ -81,6 +85,25 @@ own precompiled CSS too.)
|
|
|
81
85
|
Dark is the default; add `data-theme="light"` on `<html>` (or use the exported
|
|
82
86
|
`toggleTheme()` / `<ThemeToggle />`) for the light palette.
|
|
83
87
|
|
|
88
|
+
## Icons
|
|
89
|
+
|
|
90
|
+
A4ui depends on **[lucide-solid](https://lucide.dev)**, so its **1500+ icons**
|
|
91
|
+
are ready to use β no extra install. Import any icon and drop it in; size it with
|
|
92
|
+
`h-`/`w-` and color it with `text-*`. It's **tree-shakeable**: importing one icon
|
|
93
|
+
ships **only that icon** (~0.3 kB), never the whole set.
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import { Heart, Star, Rocket } from 'lucide-solid'
|
|
97
|
+
import { Button } from '@a4ui/core'
|
|
98
|
+
|
|
99
|
+
;<Star class="h-5 w-5 text-primary" />
|
|
100
|
+
;<Button>
|
|
101
|
+
<Rocket class="h-4 w-4" /> Launch
|
|
102
|
+
</Button>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Browse the full set at [lucide.dev/icons](https://lucide.dev/icons).
|
|
106
|
+
|
|
84
107
|
## Bundle size & mounting (partial vs full)
|
|
85
108
|
|
|
86
109
|
A4ui is **tree-shakeable** β `sideEffects` is `["**/*.css"]`, so the only thing
|
|
@@ -95,17 +118,17 @@ import { Button, Card } from '@a4ui/core' // just these two
|
|
|
95
118
|
Approximate **gzipped** weights (measured on 0.13.0; JS excludes the `solid-js`,
|
|
96
119
|
`@kobalte/core`, `lucide-solid` and `motion` externals your app already has):
|
|
97
120
|
|
|
98
|
-
| Part | gzip | Notes
|
|
99
|
-
| ----------------------------------------------------- | ------------------------ |
|
|
100
|
-
| **First component** (e.g. `Button` + the `cn` helper) | ~10β11 kB | One-time baseline (includes `tailwind-merge`). Shared by every component.
|
|
101
|
-
| **
|
|
102
|
-
| **Whole barrel** (`@a4ui/core`, all 75+ used) | ~53.0 kB | Only if you literally import everything β the realistic ceiling.
|
|
103
|
-
| `@a4ui/core/commerce` | ~3.0 kB | ProductCard, CartSummary, PriceTagβ¦
|
|
104
|
-
| `@a4ui/core/charts` | ~2.5 kB | Sparkline, BarChart, DonutChart (native SVG).
|
|
105
|
-
| `@a4ui/core/styles.css` | ~5.3 kB | Tokens + motion keyframes (needs the Tailwind preset for utilities).
|
|
106
|
-
| `@a4ui/core/full.css` | ~14.1 kB | Every utility precompiled β for **no-Tailwind** apps. With Tailwind, your own purge ships far less.
|
|
107
|
-
| `@a4ui/core/elements` (Web Components) | ~63.9 kB JS + ~14 kB CSS | Self-contained (Solid + motion compiled in). For React/Vue/vanilla.
|
|
108
|
-
| `motion` (the animation engine) | ~45 kB | **External / opt-in** β pulled in **only** if you import an animated component (`Stat`, `HoldToConfirm`, `Curtain`, `Parallax`, `ScrambleText`, `FillText`, `TextReveal`, `NotificationStack`, `MultiStateBadge`, `Expandable`, `SpeedDial`, or the `flyToCart`/`animate`/`createCountUp` helpers). CSS-only ones (`LoadingDots`, `NowPlaying`) and static UIs never load it. |
|
|
121
|
+
| Part | gzip | Notes |
|
|
122
|
+
| ----------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
123
|
+
| **First component** (e.g. `Button` + the `cn` helper) | ~10β11 kB | One-time baseline (includes `tailwind-merge`). Shared by every component. |
|
|
124
|
+
| **Typical extra primitive** | ~0.1β0.5 kB | `Button` alone 10.7 kB β `Button + Card + Badge + Input` 11.1 kB. Heavier ones (`DataGrid`, `Calendar`, `Combobox`, `Tour`) cost more via their Kobalte/behavior deps. |
|
|
125
|
+
| **Whole barrel** (`@a4ui/core`, all 75+ used) | ~53.0 kB | Only if you literally import everything β the realistic ceiling. |
|
|
126
|
+
| `@a4ui/core/commerce` | ~3.0 kB | ProductCard, CartSummary, PriceTag⦠|
|
|
127
|
+
| `@a4ui/core/charts` | ~2.5 kB | Sparkline, BarChart, DonutChart (native SVG). |
|
|
128
|
+
| `@a4ui/core/styles.css` | ~5.3 kB | Tokens + motion keyframes (needs the Tailwind preset for utilities). |
|
|
129
|
+
| `@a4ui/core/full.css` | ~14.1 kB | Every utility precompiled β for **no-Tailwind** apps. With Tailwind, your own purge ships far less. |
|
|
130
|
+
| `@a4ui/core/elements` (Web Components) | ~63.9 kB JS + ~14 kB CSS | Self-contained (Solid + motion compiled in). For React/Vue/vanilla. |
|
|
131
|
+
| `motion` (the animation engine) | ~45 kB | **External / opt-in** β pulled in **only** if you import an animated component (`Stat`, `HoldToConfirm`, `Curtain`, `Parallax`, `ScrambleText`, `FillText`, `TextReveal`, `NotificationStack`, `MultiStateBadge`, `Expandable`, `Ripple`, `SpeedDial`, or the `flyToCart`/`animate`/`createCountUp` helpers). CSS-only ones (`LoadingDots`, `NowPlaying`, `Typewriter`) and static UIs never load it. |
|
|
109
132
|
|
|
110
133
|
**Performance note (Lighthouse / Cloudflare):** because `motion` is external and
|
|
111
134
|
everything is tree-shaken, a page that uses only static components ships ~10β15 kB
|
|
@@ -113,6 +136,14 @@ of A4ui JS + your purged CSS β the animation engine is loaded lazily and share
|
|
|
113
136
|
only when an animated component is on the page. Keep animations off the critical
|
|
114
137
|
path (or behind `motionReduced`) and the design system stays Lighthouse-friendly.
|
|
115
138
|
|
|
139
|
+
**Install footprint (dev-time, not your bundle):** `npm i @a4ui/core solid-js`
|
|
140
|
+
in an empty project pulls ~36 packages, **~105 MB** on disk, **0 vulnerabilities**.
|
|
141
|
+
Most of that (~76 MB) is **`lucide-solid`** β which is also a **perk**: A4ui
|
|
142
|
+
bundles it, so **1500+ icons are ready to use** with no extra install (see
|
|
143
|
+
[Icons](#icons)). It ships every icon as its own module, but tree-shaking means
|
|
144
|
+
only the icons you actually use reach your bundle β the disk size is
|
|
145
|
+
`node_modules` only and never reaches your users.
|
|
146
|
+
|
|
116
147
|
## Customization
|
|
117
148
|
|
|
118
149
|
Colors, radius and fonts are driven by CSS variables (the `@a4ui/core/preset`
|
|
@@ -143,7 +174,7 @@ initTheme() // once at startup β restores the saved theme (or Space)
|
|
|
143
174
|
selectTheme('dino') // switch by name; also accepts a ThemeDefinition
|
|
144
175
|
```
|
|
145
176
|
|
|
146
|
-
Build your own in the **[docs](https://
|
|
177
|
+
Build your own in the **[docs](https://a4ui.pages.dev/)** β open the βοΈ
|
|
147
178
|
theme-settings drawer (top bar), pick a color for any token and the whole site
|
|
148
179
|
recolors live, then copy the exported CSS or JSON and apply it as a
|
|
149
180
|
`ThemeDefinition`. This is separate from the light/dark `setTheme`/`toggleTheme`
|
|
@@ -152,20 +183,20 @@ mode switch β a theme recolors underneath either mode.
|
|
|
152
183
|
## Components
|
|
153
184
|
|
|
154
185
|
75+ components across nine categories (this is a sample β see the
|
|
155
|
-
**[docs site](https://
|
|
186
|
+
**[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
|
|
156
187
|
full list):
|
|
157
188
|
|
|
158
|
-
| Category | Representative components
|
|
159
|
-
| -------------- |
|
|
160
|
-
| Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`
|
|
161
|
-
| Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`
|
|
162
|
-
| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap`
|
|
163
|
-
| Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`
|
|
164
|
-
| Feedback | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`
|
|
165
|
-
| Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`
|
|
166
|
-
| Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`
|
|
167
|
-
| Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)
|
|
168
|
-
| Motion | `ScrambleText`, `TextReveal`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
|
|
189
|
+
| Category | Representative components |
|
|
190
|
+
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
191
|
+
| Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput` |
|
|
192
|
+
| Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
|
|
193
|
+
| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap` |
|
|
194
|
+
| Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
|
|
195
|
+
| Feedback | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
|
|
196
|
+
| Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup` |
|
|
197
|
+
| Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup` |
|
|
198
|
+
| Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
|
|
199
|
+
| Motion | `ScrambleText`, `TextReveal`, `Typewriter`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `Ripple`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
|
|
169
200
|
|
|
170
201
|
Domain-specific sets ship as **subpath entries** so the base package stays lean β
|
|
171
202
|
e.g. commerce and chart components import from their own paths:
|
|
@@ -198,8 +229,8 @@ A4ui is a **SolidJS** library. It works natively in **Vite + Solid**,
|
|
|
198
229
|
(`@a4ui/core/elements` β Solid is compiled in, no Solid toolchain needed):
|
|
199
230
|
|
|
200
231
|
```html
|
|
201
|
-
<link rel="stylesheet" href="
|
|
202
|
-
<script type="module" src="
|
|
232
|
+
<link rel="stylesheet" href="https://unpkg.com/@a4ui/core/dist/elements.css" />
|
|
233
|
+
<script type="module" src="https://unpkg.com/@a4ui/core/dist/elements.js"></script>
|
|
203
234
|
<a4-button variant="primary" label="Save"></a4-button>
|
|
204
235
|
```
|
|
205
236
|
|
|
@@ -224,7 +255,7 @@ ships **in the package**, so it works from `node_modules` without visiting the d
|
|
|
224
255
|
shipped `.d.ts` (`node_modules/@a4ui/core/dist/index.d.ts`), so editor
|
|
225
256
|
autocomplete and agents get the props and usage inline.
|
|
226
257
|
- **`llms.txt`** β a machine-readable summary of every component:
|
|
227
|
-
https://
|
|
258
|
+
https://a4ui.pages.dev/llms.txt
|
|
228
259
|
|
|
229
260
|
Drop this into your project's `AGENTS.md` / `CLAUDE.md` to prime your agent:
|
|
230
261
|
|
|
@@ -232,7 +263,7 @@ Drop this into your project's `AGENTS.md` / `CLAUDE.md` to prime your agent:
|
|
|
232
263
|
> named exports from `@a4ui/core`; import `@a4ui/core/styles.css` once in the app
|
|
233
264
|
> entry; add `@a4ui/core/preset` to `tailwind.config` (optional). Props are typed
|
|
234
265
|
> with JSDoc/`@example` in the package's `.d.ts`. Full component list:
|
|
235
|
-
> https://
|
|
266
|
+
> https://a4ui.pages.dev/llms.txt
|
|
236
267
|
|
|
237
268
|
## Develop
|
|
238
269
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const A4UI_VERSION = "0.
|
|
1
|
+
export declare const A4UI_VERSION = "0.14.1";
|
|
2
2
|
export { cn } from './lib/cn';
|
|
3
3
|
export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
|
|
4
4
|
export { useEffects, isCalm, setEffects } from './lib/effects';
|
|
@@ -103,6 +103,8 @@ export { NotificationStack, type NotificationStackProps, type StackNotification,
|
|
|
103
103
|
export { MultiStateBadge, type MultiStateBadgeProps, type BadgeState } from './ui/MultiStateBadge';
|
|
104
104
|
export { NowPlaying, type NowPlayingProps } from './ui/NowPlaying';
|
|
105
105
|
export { Expandable, type ExpandableProps } from './ui/Expandable';
|
|
106
|
+
export { Typewriter, type TypewriterProps } from './ui/Typewriter';
|
|
107
|
+
export { Ripple, type RippleProps } from './ui/Ripple';
|
|
106
108
|
export { flyToCart, type FlyToCartOptions } from './lib/flyToCart';
|
|
107
109
|
export { AppShell } from './layout/AppShell';
|
|
108
110
|
export { SpaceBackground } from './layout/SpaceBackground';
|