@a4ui/core 0.13.1 β 0.14.0
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 +48 -38
- 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 +14 -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,15 +1,13 @@
|
|
|
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
|
|
|
@@ -17,7 +15,10 @@ Accessible SolidJS **Spatial Glass** component library β 75+ components,
|
|
|
17
15
|
layouts, runtime themes, a motion system, and framework-agnostic Web
|
|
18
16
|
Components. Named after the 4 people in the Rivera family. π
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
[](https://a4ui.pages.dev/#/examples/analytics)
|
|
19
|
+
|
|
20
|
+
**π Docs & live examples:** https://a4ui.pages.dev/ Β· **π API stability &
|
|
21
|
+
versioning:** [STABILITY.md](./STABILITY.md) (what's stable vs experimental preβ1.0)
|
|
21
22
|
|
|
22
23
|
Three layers, one identity:
|
|
23
24
|
|
|
@@ -35,10 +36,12 @@ npm install @a4ui/core
|
|
|
35
36
|
|
|
36
37
|
Peer dependency: `solid-js` (>= 1.9).
|
|
37
38
|
|
|
38
|
-
**Starting fresh?** Scaffold a preconfigured Solid + Vite +
|
|
39
|
+
**Starting fresh?** Scaffold a preconfigured Solid + Vite + A4ui app (with or
|
|
40
|
+
without Tailwind):
|
|
39
41
|
|
|
40
42
|
```bash
|
|
41
|
-
|
|
43
|
+
npm create a4ui@latest my-app
|
|
44
|
+
# then: cd my-app && npm install && npm run dev
|
|
42
45
|
```
|
|
43
46
|
|
|
44
47
|
## Use
|
|
@@ -95,17 +98,17 @@ import { Button, Card } from '@a4ui/core' // just these two
|
|
|
95
98
|
Approximate **gzipped** weights (measured on 0.13.0; JS excludes the `solid-js`,
|
|
96
99
|
`@kobalte/core`, `lucide-solid` and `motion` externals your app already has):
|
|
97
100
|
|
|
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. |
|
|
101
|
+
| Part | gzip | Notes |
|
|
102
|
+
| ----------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
+
| **First component** (e.g. `Button` + the `cn` helper) | ~10β11 kB | One-time baseline (includes `tailwind-merge`). Shared by every component. |
|
|
104
|
+
| **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. |
|
|
105
|
+
| **Whole barrel** (`@a4ui/core`, all 75+ used) | ~53.0 kB | Only if you literally import everything β the realistic ceiling. |
|
|
106
|
+
| `@a4ui/core/commerce` | ~3.0 kB | ProductCard, CartSummary, PriceTag⦠|
|
|
107
|
+
| `@a4ui/core/charts` | ~2.5 kB | Sparkline, BarChart, DonutChart (native SVG). |
|
|
108
|
+
| `@a4ui/core/styles.css` | ~5.3 kB | Tokens + motion keyframes (needs the Tailwind preset for utilities). |
|
|
109
|
+
| `@a4ui/core/full.css` | ~14.1 kB | Every utility precompiled β for **no-Tailwind** apps. With Tailwind, your own purge ships far less. |
|
|
110
|
+
| `@a4ui/core/elements` (Web Components) | ~63.9 kB JS + ~14 kB CSS | Self-contained (Solid + motion compiled in). For React/Vue/vanilla. |
|
|
111
|
+
| `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
112
|
|
|
110
113
|
**Performance note (Lighthouse / Cloudflare):** because `motion` is external and
|
|
111
114
|
everything is tree-shaken, a page that uses only static components ships ~10β15 kB
|
|
@@ -113,6 +116,13 @@ of A4ui JS + your purged CSS β the animation engine is loaded lazily and share
|
|
|
113
116
|
only when an animated component is on the page. Keep animations off the critical
|
|
114
117
|
path (or behind `motionReduced`) and the design system stays Lighthouse-friendly.
|
|
115
118
|
|
|
119
|
+
**Install footprint (dev-time, not your bundle):** `npm i @a4ui/core solid-js`
|
|
120
|
+
in an empty project pulls ~36 packages, **~105 MB** on disk, **0 vulnerabilities**.
|
|
121
|
+
Most of that (~76 MB) is **`lucide-solid`**, which ships every icon as its own
|
|
122
|
+
module β but your **shipped bundle** only ever includes the handful of icons a
|
|
123
|
+
component you import actually uses (tree-shaking). The disk size is `node_modules`
|
|
124
|
+
only; it does not reach your users.
|
|
125
|
+
|
|
116
126
|
## Customization
|
|
117
127
|
|
|
118
128
|
Colors, radius and fonts are driven by CSS variables (the `@a4ui/core/preset`
|
|
@@ -143,7 +153,7 @@ initTheme() // once at startup β restores the saved theme (or Space)
|
|
|
143
153
|
selectTheme('dino') // switch by name; also accepts a ThemeDefinition
|
|
144
154
|
```
|
|
145
155
|
|
|
146
|
-
Build your own in the **[docs](https://
|
|
156
|
+
Build your own in the **[docs](https://a4ui.pages.dev/)** β open the βοΈ
|
|
147
157
|
theme-settings drawer (top bar), pick a color for any token and the whole site
|
|
148
158
|
recolors live, then copy the exported CSS or JSON and apply it as a
|
|
149
159
|
`ThemeDefinition`. This is separate from the light/dark `setTheme`/`toggleTheme`
|
|
@@ -152,20 +162,20 @@ mode switch β a theme recolors underneath either mode.
|
|
|
152
162
|
## Components
|
|
153
163
|
|
|
154
164
|
75+ components across nine categories (this is a sample β see the
|
|
155
|
-
**[docs site](https://
|
|
165
|
+
**[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
|
|
156
166
|
full list):
|
|
157
167
|
|
|
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` |
|
|
168
|
+
| Category | Representative components |
|
|
169
|
+
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
170
|
+
| Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput` |
|
|
171
|
+
| Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
|
|
172
|
+
| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap` |
|
|
173
|
+
| Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
|
|
174
|
+
| Feedback | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
|
|
175
|
+
| Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup` |
|
|
176
|
+
| Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup` |
|
|
177
|
+
| Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
|
|
178
|
+
| Motion | `ScrambleText`, `TextReveal`, `Typewriter`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `Ripple`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
|
|
169
179
|
|
|
170
180
|
Domain-specific sets ship as **subpath entries** so the base package stays lean β
|
|
171
181
|
e.g. commerce and chart components import from their own paths:
|
|
@@ -198,8 +208,8 @@ A4ui is a **SolidJS** library. It works natively in **Vite + Solid**,
|
|
|
198
208
|
(`@a4ui/core/elements` β Solid is compiled in, no Solid toolchain needed):
|
|
199
209
|
|
|
200
210
|
```html
|
|
201
|
-
<link rel="stylesheet" href="
|
|
202
|
-
<script type="module" src="
|
|
211
|
+
<link rel="stylesheet" href="https://unpkg.com/@a4ui/core/dist/elements.css" />
|
|
212
|
+
<script type="module" src="https://unpkg.com/@a4ui/core/dist/elements.js"></script>
|
|
203
213
|
<a4-button variant="primary" label="Save"></a4-button>
|
|
204
214
|
```
|
|
205
215
|
|
|
@@ -224,7 +234,7 @@ ships **in the package**, so it works from `node_modules` without visiting the d
|
|
|
224
234
|
shipped `.d.ts` (`node_modules/@a4ui/core/dist/index.d.ts`), so editor
|
|
225
235
|
autocomplete and agents get the props and usage inline.
|
|
226
236
|
- **`llms.txt`** β a machine-readable summary of every component:
|
|
227
|
-
https://
|
|
237
|
+
https://a4ui.pages.dev/llms.txt
|
|
228
238
|
|
|
229
239
|
Drop this into your project's `AGENTS.md` / `CLAUDE.md` to prime your agent:
|
|
230
240
|
|
|
@@ -232,7 +242,7 @@ Drop this into your project's `AGENTS.md` / `CLAUDE.md` to prime your agent:
|
|
|
232
242
|
> named exports from `@a4ui/core`; import `@a4ui/core/styles.css` once in the app
|
|
233
243
|
> entry; add `@a4ui/core/preset` to `tailwind.config` (optional). Props are typed
|
|
234
244
|
> with JSDoc/`@example` in the package's `.d.ts`. Full component list:
|
|
235
|
-
> https://
|
|
245
|
+
> https://a4ui.pages.dev/llms.txt
|
|
236
246
|
|
|
237
247
|
## Develop
|
|
238
248
|
|
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.0";
|
|
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';
|