@a4ui/core 0.27.0 → 0.28.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 +11 -11
- package/dist/elements.css +57 -0
- package/dist/full.css +57 -0
- package/dist/index.d.ts +9 -1
- package/dist/index.js +2779 -2332
- package/dist/ui/BalanceCard.d.ts +24 -0
- package/dist/ui/KpiBlock.d.ts +22 -0
- package/dist/ui/MoneyActionButton.d.ts +22 -0
- package/dist/ui/ScrollScene.d.ts +25 -0
- package/dist/ui/SideRail.d.ts +39 -0
- package/dist/ui/Spaces.d.ts +31 -0
- package/dist/ui/StickyReveal.d.ts +24 -0
- package/dist/ui/TransactionFeed.d.ts +40 -0
- package/package.json +1 -1
- package/src/index.ts +11 -1
- package/src/ui/BalanceCard.tsx +68 -0
- package/src/ui/KpiBlock.tsx +58 -0
- package/src/ui/MoneyActionButton.tsx +54 -0
- package/src/ui/ScrollScene.tsx +70 -0
- package/src/ui/SideRail.tsx +120 -0
- package/src/ui/Spaces.tsx +139 -0
- package/src/ui/StickyReveal.tsx +103 -0
- package/src/ui/TransactionFeed.tsx +130 -0
package/README.md
CHANGED
|
@@ -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`, `PromptComposer`, `InlineSelect`, `PillSearch`
|
|
192
|
-
| Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`, `SlashMenu`
|
|
193
|
-
| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `DataView`, `CalendarHeatmap`
|
|
194
|
-
| Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`
|
|
195
|
-
| Feedback | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`
|
|
196
|
-
| Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail`
|
|
197
|
-
| Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`
|
|
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`, `StreamingText`, `PageTransition`, `flyToCart` |
|
|
189
|
+
| Category | Representative components |
|
|
190
|
+
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
191
|
+
| Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch` |
|
|
192
|
+
| Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`, `SlashMenu` |
|
|
193
|
+
| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `DataView`, `BalanceCard`, `TransactionFeed`, `KpiBlock`, `CalendarHeatmap` |
|
|
194
|
+
| Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`, `Spaces`, `SideRail` |
|
|
195
|
+
| Feedback | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
|
|
196
|
+
| Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail` |
|
|
197
|
+
| Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale` |
|
|
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`, `StreamingText`, `PageTransition`, `ScrollScene`, `StickyReveal`, `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
|
@@ -1481,6 +1481,17 @@ html.calm .tile-glass {
|
|
|
1481
1481
|
background: hsl(var(--card) / 0.97);
|
|
1482
1482
|
}
|
|
1483
1483
|
}
|
|
1484
|
+
.sr-only {
|
|
1485
|
+
position: absolute;
|
|
1486
|
+
width: 1px;
|
|
1487
|
+
height: 1px;
|
|
1488
|
+
padding: 0;
|
|
1489
|
+
margin: -1px;
|
|
1490
|
+
overflow: hidden;
|
|
1491
|
+
clip: rect(0, 0, 0, 0);
|
|
1492
|
+
white-space: nowrap;
|
|
1493
|
+
border-width: 0;
|
|
1494
|
+
}
|
|
1484
1495
|
.pointer-events-none {
|
|
1485
1496
|
pointer-events: none;
|
|
1486
1497
|
}
|
|
@@ -1522,6 +1533,10 @@ html.calm .tile-glass {
|
|
|
1522
1533
|
top: 0px;
|
|
1523
1534
|
bottom: 0px;
|
|
1524
1535
|
}
|
|
1536
|
+
.inset-y-1 {
|
|
1537
|
+
top: 0.25rem;
|
|
1538
|
+
bottom: 0.25rem;
|
|
1539
|
+
}
|
|
1525
1540
|
.-bottom-6 {
|
|
1526
1541
|
bottom: -1.5rem;
|
|
1527
1542
|
}
|
|
@@ -1531,6 +1546,9 @@ html.calm .tile-glass {
|
|
|
1531
1546
|
.-right-1 {
|
|
1532
1547
|
right: -0.25rem;
|
|
1533
1548
|
}
|
|
1549
|
+
.-right-2 {
|
|
1550
|
+
right: -0.5rem;
|
|
1551
|
+
}
|
|
1534
1552
|
.-right-32 {
|
|
1535
1553
|
right: -8rem;
|
|
1536
1554
|
}
|
|
@@ -1543,6 +1561,9 @@ html.calm .tile-glass {
|
|
|
1543
1561
|
.-top-1\.5 {
|
|
1544
1562
|
top: -0.375rem;
|
|
1545
1563
|
}
|
|
1564
|
+
.-top-2 {
|
|
1565
|
+
top: -0.5rem;
|
|
1566
|
+
}
|
|
1546
1567
|
.-top-3 {
|
|
1547
1568
|
top: -0.75rem;
|
|
1548
1569
|
}
|
|
@@ -1863,6 +1884,9 @@ html.calm .tile-glass {
|
|
|
1863
1884
|
.h-px {
|
|
1864
1885
|
height: 1px;
|
|
1865
1886
|
}
|
|
1887
|
+
.h-screen {
|
|
1888
|
+
height: 100vh;
|
|
1889
|
+
}
|
|
1866
1890
|
.max-h-10 {
|
|
1867
1891
|
max-height: 2.5rem;
|
|
1868
1892
|
}
|
|
@@ -1941,6 +1965,9 @@ html.calm .tile-glass {
|
|
|
1941
1965
|
.w-2 {
|
|
1942
1966
|
width: 0.5rem;
|
|
1943
1967
|
}
|
|
1968
|
+
.w-20 {
|
|
1969
|
+
width: 5rem;
|
|
1970
|
+
}
|
|
1944
1971
|
.w-3 {
|
|
1945
1972
|
width: 0.75rem;
|
|
1946
1973
|
}
|
|
@@ -2696,6 +2723,9 @@ html.calm .tile-glass {
|
|
|
2696
2723
|
.p-1 {
|
|
2697
2724
|
padding: 0.25rem;
|
|
2698
2725
|
}
|
|
2726
|
+
.p-10 {
|
|
2727
|
+
padding: 2.5rem;
|
|
2728
|
+
}
|
|
2699
2729
|
.p-2 {
|
|
2700
2730
|
padding: 0.5rem;
|
|
2701
2731
|
}
|
|
@@ -2782,6 +2812,10 @@ html.calm .tile-glass {
|
|
|
2782
2812
|
padding-top: 0.5rem;
|
|
2783
2813
|
padding-bottom: 0.5rem;
|
|
2784
2814
|
}
|
|
2815
|
+
.py-2\.5 {
|
|
2816
|
+
padding-top: 0.625rem;
|
|
2817
|
+
padding-bottom: 0.625rem;
|
|
2818
|
+
}
|
|
2785
2819
|
.py-20 {
|
|
2786
2820
|
padding-top: 5rem;
|
|
2787
2821
|
padding-bottom: 5rem;
|
|
@@ -3000,6 +3034,10 @@ html.calm .tile-glass {
|
|
|
3000
3034
|
--tw-text-opacity: 1;
|
|
3001
3035
|
color: rgb(110 231 183 / var(--tw-text-opacity, 1));
|
|
3002
3036
|
}
|
|
3037
|
+
.text-emerald-400 {
|
|
3038
|
+
--tw-text-opacity: 1;
|
|
3039
|
+
color: rgb(52 211 153 / var(--tw-text-opacity, 1));
|
|
3040
|
+
}
|
|
3003
3041
|
.text-emerald-500 {
|
|
3004
3042
|
--tw-text-opacity: 1;
|
|
3005
3043
|
color: rgb(16 185 129 / var(--tw-text-opacity, 1));
|
|
@@ -3086,6 +3124,9 @@ html.calm .tile-glass {
|
|
|
3086
3124
|
.opacity-0 {
|
|
3087
3125
|
opacity: 0;
|
|
3088
3126
|
}
|
|
3127
|
+
.opacity-100 {
|
|
3128
|
+
opacity: 1;
|
|
3129
|
+
}
|
|
3089
3130
|
.opacity-25 {
|
|
3090
3131
|
opacity: 0.25;
|
|
3091
3132
|
}
|
|
@@ -3533,6 +3574,11 @@ html.calm .tile-glass {
|
|
|
3533
3574
|
--tw-scale-y: 0.97;
|
|
3534
3575
|
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));
|
|
3535
3576
|
}
|
|
3577
|
+
.active\:scale-\[0\.98\]:active {
|
|
3578
|
+
--tw-scale-x: 0.98;
|
|
3579
|
+
--tw-scale-y: 0.98;
|
|
3580
|
+
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));
|
|
3581
|
+
}
|
|
3536
3582
|
.active\:cursor-grabbing:active {
|
|
3537
3583
|
cursor: grabbing;
|
|
3538
3584
|
}
|
|
@@ -3644,6 +3690,17 @@ html.calm .tile-glass {
|
|
|
3644
3690
|
}
|
|
3645
3691
|
@media (min-width: 640px) {
|
|
3646
3692
|
|
|
3693
|
+
.sm\:not-sr-only {
|
|
3694
|
+
position: static;
|
|
3695
|
+
width: auto;
|
|
3696
|
+
height: auto;
|
|
3697
|
+
padding: 0;
|
|
3698
|
+
margin: 0;
|
|
3699
|
+
overflow: visible;
|
|
3700
|
+
clip: auto;
|
|
3701
|
+
white-space: normal;
|
|
3702
|
+
}
|
|
3703
|
+
|
|
3647
3704
|
.sm\:block {
|
|
3648
3705
|
display: block;
|
|
3649
3706
|
}
|
package/dist/full.css
CHANGED
|
@@ -1481,6 +1481,17 @@ html.calm .tile-glass {
|
|
|
1481
1481
|
background: hsl(var(--card) / 0.97);
|
|
1482
1482
|
}
|
|
1483
1483
|
}
|
|
1484
|
+
.sr-only {
|
|
1485
|
+
position: absolute;
|
|
1486
|
+
width: 1px;
|
|
1487
|
+
height: 1px;
|
|
1488
|
+
padding: 0;
|
|
1489
|
+
margin: -1px;
|
|
1490
|
+
overflow: hidden;
|
|
1491
|
+
clip: rect(0, 0, 0, 0);
|
|
1492
|
+
white-space: nowrap;
|
|
1493
|
+
border-width: 0;
|
|
1494
|
+
}
|
|
1484
1495
|
.pointer-events-none {
|
|
1485
1496
|
pointer-events: none;
|
|
1486
1497
|
}
|
|
@@ -1522,6 +1533,10 @@ html.calm .tile-glass {
|
|
|
1522
1533
|
top: 0px;
|
|
1523
1534
|
bottom: 0px;
|
|
1524
1535
|
}
|
|
1536
|
+
.inset-y-1 {
|
|
1537
|
+
top: 0.25rem;
|
|
1538
|
+
bottom: 0.25rem;
|
|
1539
|
+
}
|
|
1525
1540
|
.-bottom-6 {
|
|
1526
1541
|
bottom: -1.5rem;
|
|
1527
1542
|
}
|
|
@@ -1531,6 +1546,9 @@ html.calm .tile-glass {
|
|
|
1531
1546
|
.-right-1 {
|
|
1532
1547
|
right: -0.25rem;
|
|
1533
1548
|
}
|
|
1549
|
+
.-right-2 {
|
|
1550
|
+
right: -0.5rem;
|
|
1551
|
+
}
|
|
1534
1552
|
.-right-32 {
|
|
1535
1553
|
right: -8rem;
|
|
1536
1554
|
}
|
|
@@ -1543,6 +1561,9 @@ html.calm .tile-glass {
|
|
|
1543
1561
|
.-top-1\.5 {
|
|
1544
1562
|
top: -0.375rem;
|
|
1545
1563
|
}
|
|
1564
|
+
.-top-2 {
|
|
1565
|
+
top: -0.5rem;
|
|
1566
|
+
}
|
|
1546
1567
|
.-top-3 {
|
|
1547
1568
|
top: -0.75rem;
|
|
1548
1569
|
}
|
|
@@ -1863,6 +1884,9 @@ html.calm .tile-glass {
|
|
|
1863
1884
|
.h-px {
|
|
1864
1885
|
height: 1px;
|
|
1865
1886
|
}
|
|
1887
|
+
.h-screen {
|
|
1888
|
+
height: 100vh;
|
|
1889
|
+
}
|
|
1866
1890
|
.max-h-10 {
|
|
1867
1891
|
max-height: 2.5rem;
|
|
1868
1892
|
}
|
|
@@ -1941,6 +1965,9 @@ html.calm .tile-glass {
|
|
|
1941
1965
|
.w-2 {
|
|
1942
1966
|
width: 0.5rem;
|
|
1943
1967
|
}
|
|
1968
|
+
.w-20 {
|
|
1969
|
+
width: 5rem;
|
|
1970
|
+
}
|
|
1944
1971
|
.w-3 {
|
|
1945
1972
|
width: 0.75rem;
|
|
1946
1973
|
}
|
|
@@ -2696,6 +2723,9 @@ html.calm .tile-glass {
|
|
|
2696
2723
|
.p-1 {
|
|
2697
2724
|
padding: 0.25rem;
|
|
2698
2725
|
}
|
|
2726
|
+
.p-10 {
|
|
2727
|
+
padding: 2.5rem;
|
|
2728
|
+
}
|
|
2699
2729
|
.p-2 {
|
|
2700
2730
|
padding: 0.5rem;
|
|
2701
2731
|
}
|
|
@@ -2782,6 +2812,10 @@ html.calm .tile-glass {
|
|
|
2782
2812
|
padding-top: 0.5rem;
|
|
2783
2813
|
padding-bottom: 0.5rem;
|
|
2784
2814
|
}
|
|
2815
|
+
.py-2\.5 {
|
|
2816
|
+
padding-top: 0.625rem;
|
|
2817
|
+
padding-bottom: 0.625rem;
|
|
2818
|
+
}
|
|
2785
2819
|
.py-20 {
|
|
2786
2820
|
padding-top: 5rem;
|
|
2787
2821
|
padding-bottom: 5rem;
|
|
@@ -3000,6 +3034,10 @@ html.calm .tile-glass {
|
|
|
3000
3034
|
--tw-text-opacity: 1;
|
|
3001
3035
|
color: rgb(110 231 183 / var(--tw-text-opacity, 1));
|
|
3002
3036
|
}
|
|
3037
|
+
.text-emerald-400 {
|
|
3038
|
+
--tw-text-opacity: 1;
|
|
3039
|
+
color: rgb(52 211 153 / var(--tw-text-opacity, 1));
|
|
3040
|
+
}
|
|
3003
3041
|
.text-emerald-500 {
|
|
3004
3042
|
--tw-text-opacity: 1;
|
|
3005
3043
|
color: rgb(16 185 129 / var(--tw-text-opacity, 1));
|
|
@@ -3086,6 +3124,9 @@ html.calm .tile-glass {
|
|
|
3086
3124
|
.opacity-0 {
|
|
3087
3125
|
opacity: 0;
|
|
3088
3126
|
}
|
|
3127
|
+
.opacity-100 {
|
|
3128
|
+
opacity: 1;
|
|
3129
|
+
}
|
|
3089
3130
|
.opacity-25 {
|
|
3090
3131
|
opacity: 0.25;
|
|
3091
3132
|
}
|
|
@@ -3533,6 +3574,11 @@ html.calm .tile-glass {
|
|
|
3533
3574
|
--tw-scale-y: 0.97;
|
|
3534
3575
|
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));
|
|
3535
3576
|
}
|
|
3577
|
+
.active\:scale-\[0\.98\]:active {
|
|
3578
|
+
--tw-scale-x: 0.98;
|
|
3579
|
+
--tw-scale-y: 0.98;
|
|
3580
|
+
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));
|
|
3581
|
+
}
|
|
3536
3582
|
.active\:cursor-grabbing:active {
|
|
3537
3583
|
cursor: grabbing;
|
|
3538
3584
|
}
|
|
@@ -3644,6 +3690,17 @@ html.calm .tile-glass {
|
|
|
3644
3690
|
}
|
|
3645
3691
|
@media (min-width: 640px) {
|
|
3646
3692
|
|
|
3693
|
+
.sm\:not-sr-only {
|
|
3694
|
+
position: static;
|
|
3695
|
+
width: auto;
|
|
3696
|
+
height: auto;
|
|
3697
|
+
padding: 0;
|
|
3698
|
+
margin: 0;
|
|
3699
|
+
overflow: visible;
|
|
3700
|
+
clip: auto;
|
|
3701
|
+
white-space: normal;
|
|
3702
|
+
}
|
|
3703
|
+
|
|
3647
3704
|
.sm\:block {
|
|
3648
3705
|
display: block;
|
|
3649
3706
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const A4UI_VERSION = "0.
|
|
1
|
+
export declare const A4UI_VERSION = "0.28.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';
|
|
@@ -118,6 +118,14 @@ export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/
|
|
|
118
118
|
export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './ui/MasterDetail';
|
|
119
119
|
export { SlashMenu, type SlashMenuProps, type SlashItem } from './ui/SlashMenu';
|
|
120
120
|
export { DataView, type DataViewProps, type DataViewColumn, type DataViewMode } from './ui/DataView';
|
|
121
|
+
export { ScrollScene, type ScrollSceneProps } from './ui/ScrollScene';
|
|
122
|
+
export { StickyReveal, type StickyRevealProps } from './ui/StickyReveal';
|
|
123
|
+
export { BalanceCard, type BalanceCardProps } from './ui/BalanceCard';
|
|
124
|
+
export { TransactionFeed, type TransactionFeedProps, type Transaction } from './ui/TransactionFeed';
|
|
125
|
+
export { KpiBlock, type KpiBlockProps } from './ui/KpiBlock';
|
|
126
|
+
export { MoneyActionButton, type MoneyActionButtonProps, type MoneyActionKind } from './ui/MoneyActionButton';
|
|
127
|
+
export { Spaces, type SpacesProps, type Space } from './ui/Spaces';
|
|
128
|
+
export { SideRail, type SideRailProps, type SideRailItem } from './ui/SideRail';
|
|
121
129
|
export { ScrambleText, type ScrambleTextProps } from './ui/ScrambleText';
|
|
122
130
|
export { TextReveal, type TextRevealProps } from './ui/TextReveal';
|
|
123
131
|
export { HoldToConfirm, type HoldToConfirmProps } from './ui/HoldToConfirm';
|