@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.
- package/README.md +44 -11
- package/dist/elements.css +79 -9
- package/dist/full.css +79 -9
- package/dist/index.d.ts +13 -1
- package/dist/index.js +3392 -2537
- package/dist/lib/flyToCart.d.ts +25 -0
- package/dist/ui/Curtain.d.ts +44 -0
- package/dist/ui/Expandable.d.ts +34 -0
- package/dist/ui/FillText.d.ts +18 -0
- package/dist/ui/HoldToConfirm.d.ts +24 -0
- package/dist/ui/LoadingDots.d.ts +20 -0
- package/dist/ui/MultiStateBadge.d.ts +23 -0
- package/dist/ui/NotificationStack.d.ts +32 -0
- package/dist/ui/NowPlaying.d.ts +21 -0
- package/dist/ui/Parallax.d.ts +21 -0
- package/dist/ui/ScrambleText.d.ts +22 -0
- package/dist/ui/TextReveal.d.ts +23 -0
- package/package.json +1 -1
- package/src/index.ts +21 -1
- package/src/lib/flyToCart.ts +103 -0
- package/src/ui/Curtain.tsx +348 -0
- package/src/ui/Expandable.tsx +229 -0
- package/src/ui/FillText.tsx +63 -0
- package/src/ui/HoldToConfirm.tsx +141 -0
- package/src/ui/LoadingDots.tsx +75 -0
- package/src/ui/MultiStateBadge.tsx +93 -0
- package/src/ui/NotificationStack.tsx +104 -0
- package/src/ui/NowPlaying.tsx +100 -0
- package/src/ui/Parallax.tsx +51 -0
- package/src/ui/ScrambleText.tsx +95 -0
- package/src/ui/SpeedDial.tsx +12 -2
- 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
|
-
|
|
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-\[
|
|
2772
|
-
transition-property: opacity
|
|
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-\[
|
|
2772
|
-
transition-property: opacity
|
|
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.
|
|
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';
|