@a4ui/core 0.27.0 → 0.29.0

package/README.md

@@ -186,17 +186,17 @@ mode switch — a theme recolors underneath either mode.
 **[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
 full list):
 
-| Category       | Representative components                                                                                                                                                                                                                                                                                          |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch`                                                                                                                                                                        |
-| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`, `SlashMenu`                                                                                                                                                                                                                    |
-| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `DataView`, `CalendarHeatmap`                                                                                                             |
-| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`                                                                                                                                                                                                            |
-| Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                                               |
-| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail`                                                                                                                                                                        |
-| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                                                              |
-| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                                                   |
-| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `StreamingText`, `PageTransition`, `flyToCart` |
+| Category       | Representative components                                                                                                                                                                                                                                                                                                                         |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch`                                                                                                                                                                                                       |
+| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`, `SlashMenu`                                                                                                                                                                                                                                                   |
+| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `DataView`, `BalanceCard`, `TransactionFeed`, `KpiBlock`, `BlockEditor`, `CalendarHeatmap`                                                                               |
+| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`, `Spaces`, `SideRail`                                                                                                                                                                                                                     |
+| Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                                                                              |
+| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail`                                                                                                                                                                                                       |
+| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                                                                                             |
+| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                                                                                  |
+| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `StreamingText`, `PageTransition`, `ScrollScene`, `StickyReveal`, `flyToCart` |
 
 Domain-specific sets ship as **subpath entries** so the base package stays lean —
 e.g. commerce and chart components import from their own paths:

package/dist/elements.css

@@ -1481,6 +1481,17 @@ html.calm .tile-glass {
     background: hsl(var(--card) / 0.97);
   }
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1522,6 +1533,10 @@ html.calm .tile-glass {
   top: 0px;
   bottom: 0px;
 }
+.inset-y-1 {
+  top: 0.25rem;
+  bottom: 0.25rem;
+}
 .-bottom-6 {
   bottom: -1.5rem;
 }
@@ -1531,6 +1546,9 @@ html.calm .tile-glass {
 .-right-1 {
   right: -0.25rem;
 }
+.-right-2 {
+  right: -0.5rem;
+}
 .-right-32 {
   right: -8rem;
 }
@@ -1543,6 +1561,9 @@ html.calm .tile-glass {
 .-top-1\.5 {
   top: -0.375rem;
 }
+.-top-2 {
+  top: -0.5rem;
+}
 .-top-3 {
   top: -0.75rem;
 }
@@ -1700,6 +1721,9 @@ html.calm .tile-glass {
 .ml-auto {
   margin-left: auto;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -1863,6 +1887,9 @@ html.calm .tile-glass {
 .h-px {
   height: 1px;
 }
+.h-screen {
+  height: 100vh;
+}
 .max-h-10 {
   max-height: 2.5rem;
 }
@@ -1941,6 +1968,9 @@ html.calm .tile-glass {
 .w-2 {
   width: 0.5rem;
 }
+.w-20 {
+  width: 5rem;
+}
 .w-3 {
   width: 0.75rem;
 }
@@ -2696,6 +2726,9 @@ html.calm .tile-glass {
 .p-1 {
   padding: 0.25rem;
 }
+.p-10 {
+  padding: 2.5rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -2782,6 +2815,10 @@ html.calm .tile-glass {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
 .py-20 {
   padding-top: 5rem;
   padding-bottom: 5rem;
@@ -3000,6 +3037,10 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity, 1));
 }
+.text-emerald-400 {
+  --tw-text-opacity: 1;
+  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
+}
 .text-emerald-500 {
   --tw-text-opacity: 1;
   color: rgb(16 185 129 / var(--tw-text-opacity, 1));
@@ -3086,6 +3127,9 @@ html.calm .tile-glass {
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-25 {
   opacity: 0.25;
 }
@@ -3481,6 +3525,9 @@ html.calm .tile-glass {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
 }
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3533,6 +3580,11 @@ html.calm .tile-glass {
   --tw-scale-y: 0.97;
   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));
 }
+.active\:scale-\[0\.98\]:active {
+  --tw-scale-x: 0.98;
+  --tw-scale-y: 0.98;
+  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));
+}
 .active\:cursor-grabbing:active {
   cursor: grabbing;
 }
@@ -3548,6 +3600,9 @@ html.calm .tile-glass {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.group\/block:hover .group-hover\/block\:opacity-100 {
+  opacity: 1;
+}
 .group:focus-visible .group-focus-visible\:ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3644,6 +3699,17 @@ html.calm .tile-glass {
 }
 @media (min-width: 640px) {
 
+  .sm\:not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
   .sm\:block {
     display: block;
   }

package/dist/full.css

@@ -1481,6 +1481,17 @@ html.calm .tile-glass {
     background: hsl(var(--card) / 0.97);
   }
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1522,6 +1533,10 @@ html.calm .tile-glass {
   top: 0px;
   bottom: 0px;
 }
+.inset-y-1 {
+  top: 0.25rem;
+  bottom: 0.25rem;
+}
 .-bottom-6 {
   bottom: -1.5rem;
 }
@@ -1531,6 +1546,9 @@ html.calm .tile-glass {
 .-right-1 {
   right: -0.25rem;
 }
+.-right-2 {
+  right: -0.5rem;
+}
 .-right-32 {
   right: -8rem;
 }
@@ -1543,6 +1561,9 @@ html.calm .tile-glass {
 .-top-1\.5 {
   top: -0.375rem;
 }
+.-top-2 {
+  top: -0.5rem;
+}
 .-top-3 {
   top: -0.75rem;
 }
@@ -1700,6 +1721,9 @@ html.calm .tile-glass {
 .ml-auto {
   margin-left: auto;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -1863,6 +1887,9 @@ html.calm .tile-glass {
 .h-px {
   height: 1px;
 }
+.h-screen {
+  height: 100vh;
+}
 .max-h-10 {
   max-height: 2.5rem;
 }
@@ -1941,6 +1968,9 @@ html.calm .tile-glass {
 .w-2 {
   width: 0.5rem;
 }
+.w-20 {
+  width: 5rem;
+}
 .w-3 {
   width: 0.75rem;
 }
@@ -2696,6 +2726,9 @@ html.calm .tile-glass {
 .p-1 {
   padding: 0.25rem;
 }
+.p-10 {
+  padding: 2.5rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -2782,6 +2815,10 @@ html.calm .tile-glass {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
 .py-20 {
   padding-top: 5rem;
   padding-bottom: 5rem;
@@ -3000,6 +3037,10 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity, 1));
 }
+.text-emerald-400 {
+  --tw-text-opacity: 1;
+  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
+}
 .text-emerald-500 {
   --tw-text-opacity: 1;
   color: rgb(16 185 129 / var(--tw-text-opacity, 1));
@@ -3086,6 +3127,9 @@ html.calm .tile-glass {
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-25 {
   opacity: 0.25;
 }
@@ -3481,6 +3525,9 @@ html.calm .tile-glass {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
 }
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3533,6 +3580,11 @@ html.calm .tile-glass {
   --tw-scale-y: 0.97;
   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));
 }
+.active\:scale-\[0\.98\]:active {
+  --tw-scale-x: 0.98;
+  --tw-scale-y: 0.98;
+  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));
+}
 .active\:cursor-grabbing:active {
   cursor: grabbing;
 }
@@ -3548,6 +3600,9 @@ html.calm .tile-glass {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.group\/block:hover .group-hover\/block\:opacity-100 {
+  opacity: 1;
+}
 .group:focus-visible .group-focus-visible\:ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3644,6 +3699,17 @@ html.calm .tile-glass {
 }
 @media (min-width: 640px) {
 
+  .sm\:not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
   .sm\:block {
     display: block;
   }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.27.0";
+export declare const A4UI_VERSION = "0.29.0";
 export { cn } from './lib/cn';
 export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
 export { useEffects, isCalm, setEffects } from './lib/effects';
@@ -118,6 +118,15 @@ export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/
 export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './ui/MasterDetail';
 export { SlashMenu, type SlashMenuProps, type SlashItem } from './ui/SlashMenu';
 export { DataView, type DataViewProps, type DataViewColumn, type DataViewMode } from './ui/DataView';
+export { ScrollScene, type ScrollSceneProps } from './ui/ScrollScene';
+export { StickyReveal, type StickyRevealProps } from './ui/StickyReveal';
+export { BalanceCard, type BalanceCardProps } from './ui/BalanceCard';
+export { TransactionFeed, type TransactionFeedProps, type Transaction } from './ui/TransactionFeed';
+export { KpiBlock, type KpiBlockProps } from './ui/KpiBlock';
+export { MoneyActionButton, type MoneyActionButtonProps, type MoneyActionKind } from './ui/MoneyActionButton';
+export { Spaces, type SpacesProps, type Space } from './ui/Spaces';
+export { SideRail, type SideRailProps, type SideRailItem } from './ui/SideRail';
+export { BlockEditor, type BlockEditorProps, type EditorBlock, type BlockTypeOption } from './ui/BlockEditor';
 export { ScrambleText, type ScrambleTextProps } from './ui/ScrambleText';
 export { TextReveal, type TextRevealProps } from './ui/TextReveal';
 export { HoldToConfirm, type HoldToConfirmProps } from './ui/HoldToConfirm';