@a4ui/core 0.14.0 β†’ 0.15.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.
Files changed (17) hide show
  1. package/README.md +51 -30
  2. package/dist/elements.css +6 -0
  3. package/dist/full.css +6 -0
  4. package/dist/index.d.ts +6 -1
  5. package/dist/index.js +1650 -1505
  6. package/dist/ui/GradientText.d.ts +25 -0
  7. package/dist/ui/Magnetic.d.ts +22 -0
  8. package/dist/ui/ScrollProgress.d.ts +20 -0
  9. package/dist/ui/Spotlight.d.ts +23 -0
  10. package/dist/ui/TiltCard.d.ts +21 -0
  11. package/package.json +3 -1
  12. package/src/index.ts +6 -1
  13. package/src/ui/GradientText.tsx +69 -0
  14. package/src/ui/Magnetic.tsx +73 -0
  15. package/src/ui/ScrollProgress.tsx +61 -0
  16. package/src/ui/Spotlight.tsx +83 -0
  17. package/src/ui/TiltCard.tsx +80 -0
package/README.md CHANGED
@@ -12,13 +12,14 @@
12
12
  [![minzipped size](https://img.shields.io/bundlephobia/minzip/@a4ui/core.svg)](https://bundlephobia.com/package/@a4ui/core)
13
13
 
14
14
  Accessible SolidJS **Spatial Glass** component library β€” 75+ components,
15
- layouts, runtime themes, a motion system, and framework-agnostic Web
16
- Components. Named after the 4 people in the Rivera family. πŸ™‚
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. πŸ™‚
17
18
 
18
19
  [![A4ui analytics example β€” stats, ring progress, meters, timeline and glass cards on the starfield backdrop](https://a4ui.pages.dev/showcase-analytics.png)](https://a4ui.pages.dev/#/examples/analytics)
19
20
 
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
+ **πŸ“š Docs & live examples:** https://a4ui.pages.dev/ Β· **πŸ”’ Stability:**
22
+ [STABILITY.md](./STABILITY.md) Β· **⬆️ Upgrading:** [MIGRATION.md](./MIGRATION.md)
22
23
 
23
24
  Three layers, one identity:
24
25
 
@@ -84,6 +85,25 @@ own precompiled CSS too.)
84
85
  Dark is the default; add `data-theme="light"` on `<html>` (or use the exported
85
86
  `toggleTheme()` / `<ThemeToggle />`) for the light palette.
86
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
+
87
107
  ## Bundle size & mounting (partial vs full)
88
108
 
89
109
  A4ui is **tree-shakeable** β€” `sideEffects` is `["**/*.css"]`, so the only thing
@@ -98,17 +118,17 @@ import { Button, Card } from '@a4ui/core' // just these two
98
118
  Approximate **gzipped** weights (measured on 0.13.0; JS excludes the `solid-js`,
99
119
  `@kobalte/core`, `lucide-solid` and `motion` externals your app already has):
100
120
 
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. |
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`, `Magnetic`, `TiltCard`, `ScrollProgress`, `GradientText`, `SpeedDial`, or the `flyToCart`/`animate`/`createCountUp` helpers). CSS-only ones (`LoadingDots`, `NowPlaying`, `Typewriter`, `Spotlight`) and static UIs never load it. |
112
132
 
113
133
  **Performance note (Lighthouse / Cloudflare):** because `motion` is external and
114
134
  everything is tree-shaken, a page that uses only static components ships ~10–15 kB
@@ -118,10 +138,11 @@ path (or behind `motionReduced`) and the design system stays Lighthouse-friendly
118
138
 
119
139
  **Install footprint (dev-time, not your bundle):** `npm i @a4ui/core solid-js`
120
140
  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.
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.
125
146
 
126
147
  ## Customization
127
148
 
@@ -165,17 +186,17 @@ mode switch β€” a theme recolors underneath either mode.
165
186
  **[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
166
187
  full list):
167
188
 
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` |
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`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
179
200
 
180
201
  Domain-specific sets ship as **subpath entries** so the base package stays lean β€”
181
202
  e.g. commerce and chart components import from their own paths:
package/dist/elements.css CHANGED
@@ -2379,6 +2379,9 @@ html.calm .tile-glass {
2379
2379
  .p-6 {
2380
2380
  padding: 1.5rem;
2381
2381
  }
2382
+ .p-8 {
2383
+ padding: 2rem;
2384
+ }
2382
2385
  .px-0\.5 {
2383
2386
  padding-left: 0.125rem;
2384
2387
  padding-right: 0.125rem;
@@ -2692,6 +2695,9 @@ html.calm .tile-glass {
2692
2695
  .accent-primary {
2693
2696
  accent-color: hsl(var(--primary) / 1);
2694
2697
  }
2698
+ .opacity-0 {
2699
+ opacity: 0;
2700
+ }
2695
2701
  .opacity-25 {
2696
2702
  opacity: 0.25;
2697
2703
  }
package/dist/full.css CHANGED
@@ -2379,6 +2379,9 @@ html.calm .tile-glass {
2379
2379
  .p-6 {
2380
2380
  padding: 1.5rem;
2381
2381
  }
2382
+ .p-8 {
2383
+ padding: 2rem;
2384
+ }
2382
2385
  .px-0\.5 {
2383
2386
  padding-left: 0.125rem;
2384
2387
  padding-right: 0.125rem;
@@ -2692,6 +2695,9 @@ html.calm .tile-glass {
2692
2695
  .accent-primary {
2693
2696
  accent-color: hsl(var(--primary) / 1);
2694
2697
  }
2698
+ .opacity-0 {
2699
+ opacity: 0;
2700
+ }
2695
2701
  .opacity-25 {
2696
2702
  opacity: 0.25;
2697
2703
  }
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const A4UI_VERSION = "0.14.0";
1
+ export declare const A4UI_VERSION = "0.15.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';
@@ -105,6 +105,11 @@ export { NowPlaying, type NowPlayingProps } from './ui/NowPlaying';
105
105
  export { Expandable, type ExpandableProps } from './ui/Expandable';
106
106
  export { Typewriter, type TypewriterProps } from './ui/Typewriter';
107
107
  export { Ripple, type RippleProps } from './ui/Ripple';
108
+ export { Magnetic, type MagneticProps } from './ui/Magnetic';
109
+ export { TiltCard, type TiltCardProps } from './ui/TiltCard';
110
+ export { Spotlight, type SpotlightProps } from './ui/Spotlight';
111
+ export { ScrollProgress, type ScrollProgressProps } from './ui/ScrollProgress';
112
+ export { GradientText, type GradientTextProps } from './ui/GradientText';
108
113
  export { flyToCart, type FlyToCartOptions } from './lib/flyToCart';
109
114
  export { AppShell } from './layout/AppShell';
110
115
  export { SpaceBackground } from './layout/SpaceBackground';