@a4ui/core 0.12.0 → 0.13.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.
Files changed (32) hide show
  1. package/README.md +44 -11
  2. package/dist/elements.css +82 -9
  3. package/dist/full.css +82 -9
  4. package/dist/index.d.ts +13 -1
  5. package/dist/index.js +3367 -2489
  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 +139 -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
  }
@@ -1703,6 +1731,9 @@ html.calm .tile-glass {
1703
1731
  .max-h-96 {
1704
1732
  max-height: 24rem;
1705
1733
  }
1734
+ .max-h-\[60vh\] {
1735
+ max-height: 60vh;
1736
+ }
1706
1737
  .max-h-\[85vh\] {
1707
1738
  max-height: 85vh;
1708
1739
  }
@@ -1727,6 +1758,9 @@ html.calm .tile-glass {
1727
1758
  .w-1\.5 {
1728
1759
  width: 0.375rem;
1729
1760
  }
1761
+ .w-1\/2 {
1762
+ width: 50%;
1763
+ }
1730
1764
  .w-10 {
1731
1765
  width: 2.5rem;
1732
1766
  }
@@ -1790,6 +1824,9 @@ html.calm .tile-glass {
1790
1824
  .w-\[0\.62em\] {
1791
1825
  width: 0.62em;
1792
1826
  }
1827
+ .w-\[12\.5\%\] {
1828
+ width: 12.5%;
1829
+ }
1793
1830
  .w-\[18px\] {
1794
1831
  width: 18px;
1795
1832
  }
@@ -1856,12 +1893,24 @@ html.calm .tile-glass {
1856
1893
  .flex-1 {
1857
1894
  flex: 1 1 0%;
1858
1895
  }
1896
+ .shrink {
1897
+ flex-shrink: 1;
1898
+ }
1859
1899
  .shrink-0 {
1860
1900
  flex-shrink: 0;
1861
1901
  }
1902
+ .grow {
1903
+ flex-grow: 1;
1904
+ }
1862
1905
  .border-collapse {
1863
1906
  border-collapse: collapse;
1864
1907
  }
1908
+ .origin-left {
1909
+ transform-origin: left;
1910
+ }
1911
+ .origin-top {
1912
+ transform-origin: top;
1913
+ }
1865
1914
  .-translate-x-1\/2 {
1866
1915
  --tw-translate-x: -50%;
1867
1916
  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 +1919,6 @@ html.calm .tile-glass {
1870
1919
  --tw-translate-y: -50%;
1871
1920
  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
1921
  }
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
1922
  .-rotate-90 {
1878
1923
  --tw-rotate: -90deg;
1879
1924
  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 +2046,9 @@ html.calm .tile-glass {
2001
2046
  .gap-2 {
2002
2047
  gap: 0.5rem;
2003
2048
  }
2049
+ .gap-2\.5 {
2050
+ gap: 0.625rem;
2051
+ }
2004
2052
  .gap-3 {
2005
2053
  gap: 0.75rem;
2006
2054
  }
@@ -2079,6 +2127,9 @@ html.calm .tile-glass {
2079
2127
  .rounded {
2080
2128
  border-radius: 0.25rem;
2081
2129
  }
2130
+ .rounded-2xl {
2131
+ border-radius: 1rem;
2132
+ }
2082
2133
  .rounded-full {
2083
2134
  border-radius: 9999px;
2084
2135
  }
@@ -2211,6 +2262,9 @@ html.calm .tile-glass {
2211
2262
  --tw-bg-opacity: 1;
2212
2263
  background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
2213
2264
  }
2265
+ .bg-current {
2266
+ background-color: currentColor;
2267
+ }
2214
2268
  .bg-destructive {
2215
2269
  --tw-bg-opacity: 1;
2216
2270
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
@@ -2218,6 +2272,9 @@ html.calm .tile-glass {
2218
2272
  .bg-destructive\/10 {
2219
2273
  background-color: hsl(var(--destructive) / 0.1);
2220
2274
  }
2275
+ .bg-destructive\/15 {
2276
+ background-color: hsl(var(--destructive) / 0.15);
2277
+ }
2221
2278
  .bg-emerald-500 {
2222
2279
  --tw-bg-opacity: 1;
2223
2280
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -2228,6 +2285,9 @@ html.calm .tile-glass {
2228
2285
  .bg-emerald-500\/15 {
2229
2286
  background-color: rgb(16 185 129 / 0.15);
2230
2287
  }
2288
+ .bg-green-500\/15 {
2289
+ background-color: rgb(34 197 94 / 0.15);
2290
+ }
2231
2291
  .bg-input {
2232
2292
  --tw-bg-opacity: 1;
2233
2293
  background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
@@ -2236,6 +2296,9 @@ html.calm .tile-glass {
2236
2296
  --tw-bg-opacity: 1;
2237
2297
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
2238
2298
  }
2299
+ .bg-muted\/80 {
2300
+ background-color: hsl(var(--muted) / 0.8);
2301
+ }
2239
2302
  .bg-primary {
2240
2303
  --tw-bg-opacity: 1;
2241
2304
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
@@ -2555,6 +2618,9 @@ html.calm .tile-glass {
2555
2618
  --tw-text-opacity: 1;
2556
2619
  color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
2557
2620
  }
2621
+ .text-current {
2622
+ color: currentColor;
2623
+ }
2558
2624
  .text-destructive {
2559
2625
  --tw-text-opacity: 1;
2560
2626
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
@@ -2575,6 +2641,10 @@ html.calm .tile-glass {
2575
2641
  --tw-text-opacity: 1;
2576
2642
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
2577
2643
  }
2644
+ .text-green-600 {
2645
+ --tw-text-opacity: 1;
2646
+ color: rgb(22 163 74 / var(--tw-text-opacity, 1));
2647
+ }
2578
2648
  .text-muted-foreground {
2579
2649
  --tw-text-opacity: 1;
2580
2650
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -2622,9 +2692,6 @@ html.calm .tile-glass {
2622
2692
  .accent-primary {
2623
2693
  accent-color: hsl(var(--primary) / 1);
2624
2694
  }
2625
- .opacity-100 {
2626
- opacity: 1;
2627
- }
2628
2695
  .opacity-25 {
2629
2696
  opacity: 0.25;
2630
2697
  }
@@ -2768,8 +2835,8 @@ html.calm .tile-glass {
2768
2835
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2769
2836
  transition-duration: 150ms;
2770
2837
  }
2771
- .transition-\[opacity\2c transform\] {
2772
- transition-property: opacity,transform;
2838
+ .transition-\[transform\2c opacity\] {
2839
+ transition-property: transform,opacity;
2773
2840
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2774
2841
  transition-duration: 150ms;
2775
2842
  }
@@ -2799,6 +2866,9 @@ html.calm .tile-glass {
2799
2866
  .duration-200 {
2800
2867
  transition-duration: 200ms;
2801
2868
  }
2869
+ .duration-300 {
2870
+ transition-duration: 300ms;
2871
+ }
2802
2872
  .duration-500 {
2803
2873
  transition-duration: 500ms;
2804
2874
  }
@@ -2808,6 +2878,9 @@ html.calm .tile-glass {
2808
2878
  .ease-out {
2809
2879
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2810
2880
  }
2881
+ .will-change-transform {
2882
+ will-change: transform;
2883
+ }
2811
2884
  .placeholder\:text-muted-foreground::placeholder {
2812
2885
  --tw-text-opacity: 1;
2813
2886
  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
  }
@@ -1703,6 +1731,9 @@ html.calm .tile-glass {
1703
1731
  .max-h-96 {
1704
1732
  max-height: 24rem;
1705
1733
  }
1734
+ .max-h-\[60vh\] {
1735
+ max-height: 60vh;
1736
+ }
1706
1737
  .max-h-\[85vh\] {
1707
1738
  max-height: 85vh;
1708
1739
  }
@@ -1727,6 +1758,9 @@ html.calm .tile-glass {
1727
1758
  .w-1\.5 {
1728
1759
  width: 0.375rem;
1729
1760
  }
1761
+ .w-1\/2 {
1762
+ width: 50%;
1763
+ }
1730
1764
  .w-10 {
1731
1765
  width: 2.5rem;
1732
1766
  }
@@ -1790,6 +1824,9 @@ html.calm .tile-glass {
1790
1824
  .w-\[0\.62em\] {
1791
1825
  width: 0.62em;
1792
1826
  }
1827
+ .w-\[12\.5\%\] {
1828
+ width: 12.5%;
1829
+ }
1793
1830
  .w-\[18px\] {
1794
1831
  width: 18px;
1795
1832
  }
@@ -1856,12 +1893,24 @@ html.calm .tile-glass {
1856
1893
  .flex-1 {
1857
1894
  flex: 1 1 0%;
1858
1895
  }
1896
+ .shrink {
1897
+ flex-shrink: 1;
1898
+ }
1859
1899
  .shrink-0 {
1860
1900
  flex-shrink: 0;
1861
1901
  }
1902
+ .grow {
1903
+ flex-grow: 1;
1904
+ }
1862
1905
  .border-collapse {
1863
1906
  border-collapse: collapse;
1864
1907
  }
1908
+ .origin-left {
1909
+ transform-origin: left;
1910
+ }
1911
+ .origin-top {
1912
+ transform-origin: top;
1913
+ }
1865
1914
  .-translate-x-1\/2 {
1866
1915
  --tw-translate-x: -50%;
1867
1916
  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 +1919,6 @@ html.calm .tile-glass {
1870
1919
  --tw-translate-y: -50%;
1871
1920
  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
1921
  }
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
1922
  .-rotate-90 {
1878
1923
  --tw-rotate: -90deg;
1879
1924
  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 +2046,9 @@ html.calm .tile-glass {
2001
2046
  .gap-2 {
2002
2047
  gap: 0.5rem;
2003
2048
  }
2049
+ .gap-2\.5 {
2050
+ gap: 0.625rem;
2051
+ }
2004
2052
  .gap-3 {
2005
2053
  gap: 0.75rem;
2006
2054
  }
@@ -2079,6 +2127,9 @@ html.calm .tile-glass {
2079
2127
  .rounded {
2080
2128
  border-radius: 0.25rem;
2081
2129
  }
2130
+ .rounded-2xl {
2131
+ border-radius: 1rem;
2132
+ }
2082
2133
  .rounded-full {
2083
2134
  border-radius: 9999px;
2084
2135
  }
@@ -2211,6 +2262,9 @@ html.calm .tile-glass {
2211
2262
  --tw-bg-opacity: 1;
2212
2263
  background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
2213
2264
  }
2265
+ .bg-current {
2266
+ background-color: currentColor;
2267
+ }
2214
2268
  .bg-destructive {
2215
2269
  --tw-bg-opacity: 1;
2216
2270
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
@@ -2218,6 +2272,9 @@ html.calm .tile-glass {
2218
2272
  .bg-destructive\/10 {
2219
2273
  background-color: hsl(var(--destructive) / 0.1);
2220
2274
  }
2275
+ .bg-destructive\/15 {
2276
+ background-color: hsl(var(--destructive) / 0.15);
2277
+ }
2221
2278
  .bg-emerald-500 {
2222
2279
  --tw-bg-opacity: 1;
2223
2280
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -2228,6 +2285,9 @@ html.calm .tile-glass {
2228
2285
  .bg-emerald-500\/15 {
2229
2286
  background-color: rgb(16 185 129 / 0.15);
2230
2287
  }
2288
+ .bg-green-500\/15 {
2289
+ background-color: rgb(34 197 94 / 0.15);
2290
+ }
2231
2291
  .bg-input {
2232
2292
  --tw-bg-opacity: 1;
2233
2293
  background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
@@ -2236,6 +2296,9 @@ html.calm .tile-glass {
2236
2296
  --tw-bg-opacity: 1;
2237
2297
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
2238
2298
  }
2299
+ .bg-muted\/80 {
2300
+ background-color: hsl(var(--muted) / 0.8);
2301
+ }
2239
2302
  .bg-primary {
2240
2303
  --tw-bg-opacity: 1;
2241
2304
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
@@ -2555,6 +2618,9 @@ html.calm .tile-glass {
2555
2618
  --tw-text-opacity: 1;
2556
2619
  color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
2557
2620
  }
2621
+ .text-current {
2622
+ color: currentColor;
2623
+ }
2558
2624
  .text-destructive {
2559
2625
  --tw-text-opacity: 1;
2560
2626
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
@@ -2575,6 +2641,10 @@ html.calm .tile-glass {
2575
2641
  --tw-text-opacity: 1;
2576
2642
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
2577
2643
  }
2644
+ .text-green-600 {
2645
+ --tw-text-opacity: 1;
2646
+ color: rgb(22 163 74 / var(--tw-text-opacity, 1));
2647
+ }
2578
2648
  .text-muted-foreground {
2579
2649
  --tw-text-opacity: 1;
2580
2650
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -2622,9 +2692,6 @@ html.calm .tile-glass {
2622
2692
  .accent-primary {
2623
2693
  accent-color: hsl(var(--primary) / 1);
2624
2694
  }
2625
- .opacity-100 {
2626
- opacity: 1;
2627
- }
2628
2695
  .opacity-25 {
2629
2696
  opacity: 0.25;
2630
2697
  }
@@ -2768,8 +2835,8 @@ html.calm .tile-glass {
2768
2835
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2769
2836
  transition-duration: 150ms;
2770
2837
  }
2771
- .transition-\[opacity\2c transform\] {
2772
- transition-property: opacity,transform;
2838
+ .transition-\[transform\2c opacity\] {
2839
+ transition-property: transform,opacity;
2773
2840
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2774
2841
  transition-duration: 150ms;
2775
2842
  }
@@ -2799,6 +2866,9 @@ html.calm .tile-glass {
2799
2866
  .duration-200 {
2800
2867
  transition-duration: 200ms;
2801
2868
  }
2869
+ .duration-300 {
2870
+ transition-duration: 300ms;
2871
+ }
2802
2872
  .duration-500 {
2803
2873
  transition-duration: 500ms;
2804
2874
  }
@@ -2808,6 +2878,9 @@ html.calm .tile-glass {
2808
2878
  .ease-out {
2809
2879
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2810
2880
  }
2881
+ .will-change-transform {
2882
+ will-change: transform;
2883
+ }
2811
2884
  .placeholder\:text-muted-foreground::placeholder {
2812
2885
  --tw-text-opacity: 1;
2813
2886
  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.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';
@@ -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';