@a4ui/core 0.14.1 → 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.
- package/README.md +22 -22
- package/dist/elements.css +6 -0
- package/dist/full.css +6 -0
- package/dist/index.d.ts +6 -1
- package/dist/index.js +1650 -1505
- package/dist/ui/GradientText.d.ts +25 -0
- package/dist/ui/Magnetic.d.ts +22 -0
- package/dist/ui/ScrollProgress.d.ts +20 -0
- package/dist/ui/Spotlight.d.ts +23 -0
- package/dist/ui/TiltCard.d.ts +21 -0
- package/package.json +2 -1
- package/src/index.ts +6 -1
- package/src/ui/GradientText.tsx +69 -0
- package/src/ui/Magnetic.tsx +73 -0
- package/src/ui/ScrollProgress.tsx +61 -0
- package/src/ui/Spotlight.tsx +83 -0
- package/src/ui/TiltCard.tsx +80 -0
package/README.md
CHANGED
|
@@ -118,17 +118,17 @@ import { Button, Card } from '@a4ui/core' // just these two
|
|
|
118
118
|
Approximate **gzipped** weights (measured on 0.13.0; JS excludes the `solid-js`,
|
|
119
119
|
`@kobalte/core`, `lucide-solid` and `motion` externals your app already has):
|
|
120
120
|
|
|
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. |
|
|
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. |
|
|
132
132
|
|
|
133
133
|
**Performance note (Lighthouse / Cloudflare):** because `motion` is external and
|
|
134
134
|
everything is tree-shaken, a page that uses only static components ships ~10–15 kB
|
|
@@ -186,17 +186,17 @@ mode switch — a theme recolors underneath either mode.
|
|
|
186
186
|
**[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
|
|
187
187
|
full list):
|
|
188
188
|
|
|
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` |
|
|
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` |
|
|
200
200
|
|
|
201
201
|
Domain-specific sets ship as **subpath entries** so the base package stays lean —
|
|
202
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.
|
|
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';
|