@a4ui/core 0.12.0 → 0.13.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 (32) hide show
  1. package/README.md +44 -11
  2. package/dist/elements.css +79 -9
  3. package/dist/full.css +79 -9
  4. package/dist/index.d.ts +13 -1
  5. package/dist/index.js +3392 -2537
  6. package/dist/lib/flyToCart.d.ts +25 -0
  7. package/dist/ui/Curtain.d.ts +44 -0
  8. package/dist/ui/Expandable.d.ts +34 -0
  9. package/dist/ui/FillText.d.ts +18 -0
  10. package/dist/ui/HoldToConfirm.d.ts +24 -0
  11. package/dist/ui/LoadingDots.d.ts +20 -0
  12. package/dist/ui/MultiStateBadge.d.ts +23 -0
  13. package/dist/ui/NotificationStack.d.ts +32 -0
  14. package/dist/ui/NowPlaying.d.ts +21 -0
  15. package/dist/ui/Parallax.d.ts +21 -0
  16. package/dist/ui/ScrambleText.d.ts +22 -0
  17. package/dist/ui/TextReveal.d.ts +23 -0
  18. package/package.json +1 -1
  19. package/src/index.ts +21 -1
  20. package/src/lib/flyToCart.ts +103 -0
  21. package/src/ui/Curtain.tsx +348 -0
  22. package/src/ui/Expandable.tsx +229 -0
  23. package/src/ui/FillText.tsx +63 -0
  24. package/src/ui/HoldToConfirm.tsx +141 -0
  25. package/src/ui/LoadingDots.tsx +75 -0
  26. package/src/ui/MultiStateBadge.tsx +93 -0
  27. package/src/ui/NotificationStack.tsx +104 -0
  28. package/src/ui/NowPlaying.tsx +100 -0
  29. package/src/ui/Parallax.tsx +51 -0
  30. package/src/ui/ScrambleText.tsx +95 -0
  31. package/src/ui/SpeedDial.tsx +12 -2
  32. package/src/ui/TextReveal.tsx +93 -0
package/README.md CHANGED
@@ -81,6 +81,38 @@ own precompiled CSS too.)
81
81
  Dark is the default; add `data-theme="light"` on `<html>` (or use the exported
82
82
  `toggleTheme()` / `<ThemeToggle />`) for the light palette.
83
83
 
84
+ ## Bundle size & mounting (partial vs full)
85
+
86
+ A4ui is **tree-shakeable** — `sideEffects` is `["**/*.css"]`, so the only thing
87
+ that lands in your bundle is what you actually `import`. You never pay for the
88
+ 75+ components you don't use, and adding components to the library **doesn't grow
89
+ your app**. Import à la carte:
90
+
91
+ ```tsx
92
+ import { Button, Card } from '@a4ui/core' // just these two
93
+ ```
94
+
95
+ Approximate **gzipped** weights (measured on 0.13.0; JS excludes the `solid-js`,
96
+ `@kobalte/core`, `lucide-solid` and `motion` externals your app already has):
97
+
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
+ | **Each additional component** | ~0.1–0.5 kB | `Button` alone 10.7 kB → `Button + Card + Badge + Input` 11.1 kB. |
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. |
109
+
110
+ **Performance note (Lighthouse / Cloudflare):** because `motion` is external and
111
+ everything is tree-shaken, a page that uses only static components ships ~10–15 kB
112
+ of A4ui JS + your purged CSS — the animation engine is loaded lazily and shared
113
+ only when an animated component is on the page. Keep animations off the critical
114
+ path (or behind `motionReduced`) and the design system stays Lighthouse-friendly.
115
+
84
116
  ## Customization
85
117
 
86
118
  Colors, radius and fonts are driven by CSS variables (the `@a4ui/core/preset`
@@ -119,20 +151,21 @@ mode switch — a theme recolors underneath either mode.
119
151
 
120
152
  ## Components
121
153
 
122
- 90+ components across eight categories (this is a sample — see the
154
+ 75+ components across nine categories (this is a sample — see the
123
155
  **[docs site](https://a4uikit.github.io/a4ui/)** or `src/index.ts` for the
124
156
  full list):
125
157
 
126
- | Category | Representative components |
127
- | -------------- | ----------------------------------------------------------------------------------------------------- |
128
- | Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput` |
129
- | Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
130
- | Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap` |
131
- | Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
132
- | Feedback | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
133
- | Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup` |
134
- | Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup` |
135
- | Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
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` |
136
169
 
137
170
  Domain-specific sets ship as **subpath entries** so the base package stays lean —
138
171
  e.g. commerce and chart components import from their own paths:
package/dist/elements.css CHANGED
@@ -1431,6 +1431,10 @@ html.calm .tile-glass {
1431
1431
  left: 0px;
1432
1432
  right: 0px;
1433
1433
  }
1434
+ .inset-y-0 {
1435
+ top: 0px;
1436
+ bottom: 0px;
1437
+ }
1434
1438
  .-bottom-6 {
1435
1439
  bottom: -1.5rem;
1436
1440
  }
@@ -1455,6 +1459,9 @@ html.calm .tile-glass {
1455
1459
  .bottom-6 {
1456
1460
  bottom: 1.5rem;
1457
1461
  }
1462
+ .left-0 {
1463
+ left: 0px;
1464
+ }
1458
1465
  .left-2 {
1459
1466
  left: 0.5rem;
1460
1467
  }
@@ -1464,9 +1471,15 @@ html.calm .tile-glass {
1464
1471
  .left-\[calc\(0\.5rem\+0\.375rem\)\] {
1465
1472
  left: calc(0.5rem + 0.375rem);
1466
1473
  }
1474
+ .right-0 {
1475
+ right: 0px;
1476
+ }
1467
1477
  .right-2 {
1468
1478
  right: 0.5rem;
1469
1479
  }
1480
+ .right-3 {
1481
+ right: 0.75rem;
1482
+ }
1470
1483
  .right-4 {
1471
1484
  right: 1rem;
1472
1485
  }
@@ -1515,6 +1528,12 @@ html.calm .tile-glass {
1515
1528
  .z-\[1\] {
1516
1529
  z-index: 1;
1517
1530
  }
1531
+ .z-\[9998\] {
1532
+ z-index: 9998;
1533
+ }
1534
+ .z-\[9999\] {
1535
+ z-index: 9999;
1536
+ }
1518
1537
  .m-0 {
1519
1538
  margin: 0px;
1520
1539
  }
@@ -1576,6 +1595,12 @@ html.calm .tile-glass {
1576
1595
  -webkit-box-orient: vertical;
1577
1596
  -webkit-line-clamp: 1;
1578
1597
  }
1598
+ .line-clamp-2 {
1599
+ overflow: hidden;
1600
+ display: -webkit-box;
1601
+ -webkit-box-orient: vertical;
1602
+ -webkit-line-clamp: 2;
1603
+ }
1579
1604
  .block {
1580
1605
  display: block;
1581
1606
  }
@@ -1667,6 +1692,9 @@ html.calm .tile-glass {
1667
1692
  .h-9 {
1668
1693
  height: 2.25rem;
1669
1694
  }
1695
+ .h-\[12\.5\%\] {
1696
+ height: 12.5%;
1697
+ }
1670
1698
  .h-\[18px\] {
1671
1699
  height: 18px;
1672
1700
  }
@@ -1727,6 +1755,9 @@ html.calm .tile-glass {
1727
1755
  .w-1\.5 {
1728
1756
  width: 0.375rem;
1729
1757
  }
1758
+ .w-1\/2 {
1759
+ width: 50%;
1760
+ }
1730
1761
  .w-10 {
1731
1762
  width: 2.5rem;
1732
1763
  }
@@ -1790,6 +1821,9 @@ html.calm .tile-glass {
1790
1821
  .w-\[0\.62em\] {
1791
1822
  width: 0.62em;
1792
1823
  }
1824
+ .w-\[12\.5\%\] {
1825
+ width: 12.5%;
1826
+ }
1793
1827
  .w-\[18px\] {
1794
1828
  width: 18px;
1795
1829
  }
@@ -1856,12 +1890,24 @@ html.calm .tile-glass {
1856
1890
  .flex-1 {
1857
1891
  flex: 1 1 0%;
1858
1892
  }
1893
+ .shrink {
1894
+ flex-shrink: 1;
1895
+ }
1859
1896
  .shrink-0 {
1860
1897
  flex-shrink: 0;
1861
1898
  }
1899
+ .grow {
1900
+ flex-grow: 1;
1901
+ }
1862
1902
  .border-collapse {
1863
1903
  border-collapse: collapse;
1864
1904
  }
1905
+ .origin-left {
1906
+ transform-origin: left;
1907
+ }
1908
+ .origin-top {
1909
+ transform-origin: top;
1910
+ }
1865
1911
  .-translate-x-1\/2 {
1866
1912
  --tw-translate-x: -50%;
1867
1913
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1870,10 +1916,6 @@ html.calm .tile-glass {
1870
1916
  --tw-translate-y: -50%;
1871
1917
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1872
1918
  }
1873
- .translate-y-0 {
1874
- --tw-translate-y: 0px;
1875
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1876
- }
1877
1919
  .-rotate-90 {
1878
1920
  --tw-rotate: -90deg;
1879
1921
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2001,6 +2043,9 @@ html.calm .tile-glass {
2001
2043
  .gap-2 {
2002
2044
  gap: 0.5rem;
2003
2045
  }
2046
+ .gap-2\.5 {
2047
+ gap: 0.625rem;
2048
+ }
2004
2049
  .gap-3 {
2005
2050
  gap: 0.75rem;
2006
2051
  }
@@ -2079,6 +2124,9 @@ html.calm .tile-glass {
2079
2124
  .rounded {
2080
2125
  border-radius: 0.25rem;
2081
2126
  }
2127
+ .rounded-2xl {
2128
+ border-radius: 1rem;
2129
+ }
2082
2130
  .rounded-full {
2083
2131
  border-radius: 9999px;
2084
2132
  }
@@ -2211,6 +2259,9 @@ html.calm .tile-glass {
2211
2259
  --tw-bg-opacity: 1;
2212
2260
  background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
2213
2261
  }
2262
+ .bg-current {
2263
+ background-color: currentColor;
2264
+ }
2214
2265
  .bg-destructive {
2215
2266
  --tw-bg-opacity: 1;
2216
2267
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
@@ -2218,6 +2269,9 @@ html.calm .tile-glass {
2218
2269
  .bg-destructive\/10 {
2219
2270
  background-color: hsl(var(--destructive) / 0.1);
2220
2271
  }
2272
+ .bg-destructive\/15 {
2273
+ background-color: hsl(var(--destructive) / 0.15);
2274
+ }
2221
2275
  .bg-emerald-500 {
2222
2276
  --tw-bg-opacity: 1;
2223
2277
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -2228,6 +2282,9 @@ html.calm .tile-glass {
2228
2282
  .bg-emerald-500\/15 {
2229
2283
  background-color: rgb(16 185 129 / 0.15);
2230
2284
  }
2285
+ .bg-green-500\/15 {
2286
+ background-color: rgb(34 197 94 / 0.15);
2287
+ }
2231
2288
  .bg-input {
2232
2289
  --tw-bg-opacity: 1;
2233
2290
  background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
@@ -2236,6 +2293,9 @@ html.calm .tile-glass {
2236
2293
  --tw-bg-opacity: 1;
2237
2294
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
2238
2295
  }
2296
+ .bg-muted\/80 {
2297
+ background-color: hsl(var(--muted) / 0.8);
2298
+ }
2239
2299
  .bg-primary {
2240
2300
  --tw-bg-opacity: 1;
2241
2301
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
@@ -2555,6 +2615,9 @@ html.calm .tile-glass {
2555
2615
  --tw-text-opacity: 1;
2556
2616
  color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
2557
2617
  }
2618
+ .text-current {
2619
+ color: currentColor;
2620
+ }
2558
2621
  .text-destructive {
2559
2622
  --tw-text-opacity: 1;
2560
2623
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
@@ -2575,6 +2638,10 @@ html.calm .tile-glass {
2575
2638
  --tw-text-opacity: 1;
2576
2639
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
2577
2640
  }
2641
+ .text-green-600 {
2642
+ --tw-text-opacity: 1;
2643
+ color: rgb(22 163 74 / var(--tw-text-opacity, 1));
2644
+ }
2578
2645
  .text-muted-foreground {
2579
2646
  --tw-text-opacity: 1;
2580
2647
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -2622,9 +2689,6 @@ html.calm .tile-glass {
2622
2689
  .accent-primary {
2623
2690
  accent-color: hsl(var(--primary) / 1);
2624
2691
  }
2625
- .opacity-100 {
2626
- opacity: 1;
2627
- }
2628
2692
  .opacity-25 {
2629
2693
  opacity: 0.25;
2630
2694
  }
@@ -2768,8 +2832,8 @@ html.calm .tile-glass {
2768
2832
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2769
2833
  transition-duration: 150ms;
2770
2834
  }
2771
- .transition-\[opacity\2c transform\] {
2772
- transition-property: opacity,transform;
2835
+ .transition-\[transform\2c opacity\] {
2836
+ transition-property: transform,opacity;
2773
2837
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2774
2838
  transition-duration: 150ms;
2775
2839
  }
@@ -2799,6 +2863,9 @@ html.calm .tile-glass {
2799
2863
  .duration-200 {
2800
2864
  transition-duration: 200ms;
2801
2865
  }
2866
+ .duration-300 {
2867
+ transition-duration: 300ms;
2868
+ }
2802
2869
  .duration-500 {
2803
2870
  transition-duration: 500ms;
2804
2871
  }
@@ -2808,6 +2875,9 @@ html.calm .tile-glass {
2808
2875
  .ease-out {
2809
2876
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2810
2877
  }
2878
+ .will-change-transform {
2879
+ will-change: transform;
2880
+ }
2811
2881
  .placeholder\:text-muted-foreground::placeholder {
2812
2882
  --tw-text-opacity: 1;
2813
2883
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
package/dist/full.css CHANGED
@@ -1431,6 +1431,10 @@ html.calm .tile-glass {
1431
1431
  left: 0px;
1432
1432
  right: 0px;
1433
1433
  }
1434
+ .inset-y-0 {
1435
+ top: 0px;
1436
+ bottom: 0px;
1437
+ }
1434
1438
  .-bottom-6 {
1435
1439
  bottom: -1.5rem;
1436
1440
  }
@@ -1455,6 +1459,9 @@ html.calm .tile-glass {
1455
1459
  .bottom-6 {
1456
1460
  bottom: 1.5rem;
1457
1461
  }
1462
+ .left-0 {
1463
+ left: 0px;
1464
+ }
1458
1465
  .left-2 {
1459
1466
  left: 0.5rem;
1460
1467
  }
@@ -1464,9 +1471,15 @@ html.calm .tile-glass {
1464
1471
  .left-\[calc\(0\.5rem\+0\.375rem\)\] {
1465
1472
  left: calc(0.5rem + 0.375rem);
1466
1473
  }
1474
+ .right-0 {
1475
+ right: 0px;
1476
+ }
1467
1477
  .right-2 {
1468
1478
  right: 0.5rem;
1469
1479
  }
1480
+ .right-3 {
1481
+ right: 0.75rem;
1482
+ }
1470
1483
  .right-4 {
1471
1484
  right: 1rem;
1472
1485
  }
@@ -1515,6 +1528,12 @@ html.calm .tile-glass {
1515
1528
  .z-\[1\] {
1516
1529
  z-index: 1;
1517
1530
  }
1531
+ .z-\[9998\] {
1532
+ z-index: 9998;
1533
+ }
1534
+ .z-\[9999\] {
1535
+ z-index: 9999;
1536
+ }
1518
1537
  .m-0 {
1519
1538
  margin: 0px;
1520
1539
  }
@@ -1576,6 +1595,12 @@ html.calm .tile-glass {
1576
1595
  -webkit-box-orient: vertical;
1577
1596
  -webkit-line-clamp: 1;
1578
1597
  }
1598
+ .line-clamp-2 {
1599
+ overflow: hidden;
1600
+ display: -webkit-box;
1601
+ -webkit-box-orient: vertical;
1602
+ -webkit-line-clamp: 2;
1603
+ }
1579
1604
  .block {
1580
1605
  display: block;
1581
1606
  }
@@ -1667,6 +1692,9 @@ html.calm .tile-glass {
1667
1692
  .h-9 {
1668
1693
  height: 2.25rem;
1669
1694
  }
1695
+ .h-\[12\.5\%\] {
1696
+ height: 12.5%;
1697
+ }
1670
1698
  .h-\[18px\] {
1671
1699
  height: 18px;
1672
1700
  }
@@ -1727,6 +1755,9 @@ html.calm .tile-glass {
1727
1755
  .w-1\.5 {
1728
1756
  width: 0.375rem;
1729
1757
  }
1758
+ .w-1\/2 {
1759
+ width: 50%;
1760
+ }
1730
1761
  .w-10 {
1731
1762
  width: 2.5rem;
1732
1763
  }
@@ -1790,6 +1821,9 @@ html.calm .tile-glass {
1790
1821
  .w-\[0\.62em\] {
1791
1822
  width: 0.62em;
1792
1823
  }
1824
+ .w-\[12\.5\%\] {
1825
+ width: 12.5%;
1826
+ }
1793
1827
  .w-\[18px\] {
1794
1828
  width: 18px;
1795
1829
  }
@@ -1856,12 +1890,24 @@ html.calm .tile-glass {
1856
1890
  .flex-1 {
1857
1891
  flex: 1 1 0%;
1858
1892
  }
1893
+ .shrink {
1894
+ flex-shrink: 1;
1895
+ }
1859
1896
  .shrink-0 {
1860
1897
  flex-shrink: 0;
1861
1898
  }
1899
+ .grow {
1900
+ flex-grow: 1;
1901
+ }
1862
1902
  .border-collapse {
1863
1903
  border-collapse: collapse;
1864
1904
  }
1905
+ .origin-left {
1906
+ transform-origin: left;
1907
+ }
1908
+ .origin-top {
1909
+ transform-origin: top;
1910
+ }
1865
1911
  .-translate-x-1\/2 {
1866
1912
  --tw-translate-x: -50%;
1867
1913
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1870,10 +1916,6 @@ html.calm .tile-glass {
1870
1916
  --tw-translate-y: -50%;
1871
1917
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1872
1918
  }
1873
- .translate-y-0 {
1874
- --tw-translate-y: 0px;
1875
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1876
- }
1877
1919
  .-rotate-90 {
1878
1920
  --tw-rotate: -90deg;
1879
1921
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2001,6 +2043,9 @@ html.calm .tile-glass {
2001
2043
  .gap-2 {
2002
2044
  gap: 0.5rem;
2003
2045
  }
2046
+ .gap-2\.5 {
2047
+ gap: 0.625rem;
2048
+ }
2004
2049
  .gap-3 {
2005
2050
  gap: 0.75rem;
2006
2051
  }
@@ -2079,6 +2124,9 @@ html.calm .tile-glass {
2079
2124
  .rounded {
2080
2125
  border-radius: 0.25rem;
2081
2126
  }
2127
+ .rounded-2xl {
2128
+ border-radius: 1rem;
2129
+ }
2082
2130
  .rounded-full {
2083
2131
  border-radius: 9999px;
2084
2132
  }
@@ -2211,6 +2259,9 @@ html.calm .tile-glass {
2211
2259
  --tw-bg-opacity: 1;
2212
2260
  background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
2213
2261
  }
2262
+ .bg-current {
2263
+ background-color: currentColor;
2264
+ }
2214
2265
  .bg-destructive {
2215
2266
  --tw-bg-opacity: 1;
2216
2267
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
@@ -2218,6 +2269,9 @@ html.calm .tile-glass {
2218
2269
  .bg-destructive\/10 {
2219
2270
  background-color: hsl(var(--destructive) / 0.1);
2220
2271
  }
2272
+ .bg-destructive\/15 {
2273
+ background-color: hsl(var(--destructive) / 0.15);
2274
+ }
2221
2275
  .bg-emerald-500 {
2222
2276
  --tw-bg-opacity: 1;
2223
2277
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -2228,6 +2282,9 @@ html.calm .tile-glass {
2228
2282
  .bg-emerald-500\/15 {
2229
2283
  background-color: rgb(16 185 129 / 0.15);
2230
2284
  }
2285
+ .bg-green-500\/15 {
2286
+ background-color: rgb(34 197 94 / 0.15);
2287
+ }
2231
2288
  .bg-input {
2232
2289
  --tw-bg-opacity: 1;
2233
2290
  background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
@@ -2236,6 +2293,9 @@ html.calm .tile-glass {
2236
2293
  --tw-bg-opacity: 1;
2237
2294
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
2238
2295
  }
2296
+ .bg-muted\/80 {
2297
+ background-color: hsl(var(--muted) / 0.8);
2298
+ }
2239
2299
  .bg-primary {
2240
2300
  --tw-bg-opacity: 1;
2241
2301
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
@@ -2555,6 +2615,9 @@ html.calm .tile-glass {
2555
2615
  --tw-text-opacity: 1;
2556
2616
  color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
2557
2617
  }
2618
+ .text-current {
2619
+ color: currentColor;
2620
+ }
2558
2621
  .text-destructive {
2559
2622
  --tw-text-opacity: 1;
2560
2623
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
@@ -2575,6 +2638,10 @@ html.calm .tile-glass {
2575
2638
  --tw-text-opacity: 1;
2576
2639
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
2577
2640
  }
2641
+ .text-green-600 {
2642
+ --tw-text-opacity: 1;
2643
+ color: rgb(22 163 74 / var(--tw-text-opacity, 1));
2644
+ }
2578
2645
  .text-muted-foreground {
2579
2646
  --tw-text-opacity: 1;
2580
2647
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -2622,9 +2689,6 @@ html.calm .tile-glass {
2622
2689
  .accent-primary {
2623
2690
  accent-color: hsl(var(--primary) / 1);
2624
2691
  }
2625
- .opacity-100 {
2626
- opacity: 1;
2627
- }
2628
2692
  .opacity-25 {
2629
2693
  opacity: 0.25;
2630
2694
  }
@@ -2768,8 +2832,8 @@ html.calm .tile-glass {
2768
2832
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2769
2833
  transition-duration: 150ms;
2770
2834
  }
2771
- .transition-\[opacity\2c transform\] {
2772
- transition-property: opacity,transform;
2835
+ .transition-\[transform\2c opacity\] {
2836
+ transition-property: transform,opacity;
2773
2837
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2774
2838
  transition-duration: 150ms;
2775
2839
  }
@@ -2799,6 +2863,9 @@ html.calm .tile-glass {
2799
2863
  .duration-200 {
2800
2864
  transition-duration: 200ms;
2801
2865
  }
2866
+ .duration-300 {
2867
+ transition-duration: 300ms;
2868
+ }
2802
2869
  .duration-500 {
2803
2870
  transition-duration: 500ms;
2804
2871
  }
@@ -2808,6 +2875,9 @@ html.calm .tile-glass {
2808
2875
  .ease-out {
2809
2876
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2810
2877
  }
2878
+ .will-change-transform {
2879
+ will-change: transform;
2880
+ }
2811
2881
  .placeholder\:text-muted-foreground::placeholder {
2812
2882
  --tw-text-opacity: 1;
2813
2883
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const A4UI_VERSION = "0.12.0";
1
+ export declare const A4UI_VERSION = "0.13.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';
@@ -92,6 +92,18 @@ export { CalendarHeatmap, type HeatmapValue, type CalendarHeatmapProps } from '.
92
92
  export { Portal, type PortalProps } from './ui/Portal';
93
93
  export { Sortable, type SortableProps } from './ui/Sortable';
94
94
  export { Clock, type ClockProps } from './ui/Clock';
95
+ export { ScrambleText, type ScrambleTextProps } from './ui/ScrambleText';
96
+ export { TextReveal, type TextRevealProps } from './ui/TextReveal';
97
+ export { HoldToConfirm, type HoldToConfirmProps } from './ui/HoldToConfirm';
98
+ export { LoadingDots, type LoadingDotsProps } from './ui/LoadingDots';
99
+ export { Curtain, type CurtainProps, type CurtainVariant } from './ui/Curtain';
100
+ export { Parallax, type ParallaxProps } from './ui/Parallax';
101
+ export { FillText, type FillTextProps } from './ui/FillText';
102
+ export { NotificationStack, type NotificationStackProps, type StackNotification, } from './ui/NotificationStack';
103
+ export { MultiStateBadge, type MultiStateBadgeProps, type BadgeState } from './ui/MultiStateBadge';
104
+ export { NowPlaying, type NowPlayingProps } from './ui/NowPlaying';
105
+ export { Expandable, type ExpandableProps } from './ui/Expandable';
106
+ export { flyToCart, type FlyToCartOptions } from './lib/flyToCart';
95
107
  export { AppShell } from './layout/AppShell';
96
108
  export { SpaceBackground } from './layout/SpaceBackground';
97
109
  export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery';