@a4ui/core 0.26.0 → 0.28.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`                                                                                                                                                                                                                                 |
-| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `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`, `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;
 }
@@ -1508,6 +1519,9 @@ html.calm .tile-glass {
 .sticky {
   position: sticky;
 }
+.-inset-\[15\%\] {
+  inset: -15%;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -1519,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;
 }
@@ -1528,6 +1546,9 @@ html.calm .tile-glass {
 .-right-1 {
   right: -0.25rem;
 }
+.-right-2 {
+  right: -0.5rem;
+}
 .-right-32 {
   right: -8rem;
 }
@@ -1540,6 +1561,9 @@ html.calm .tile-glass {
 .-top-1\.5 {
   top: -0.375rem;
 }
+.-top-2 {
+  top: -0.5rem;
+}
 .-top-3 {
   top: -0.75rem;
 }
@@ -1860,6 +1884,9 @@ html.calm .tile-glass {
 .h-px {
   height: 1px;
 }
+.h-screen {
+  height: 100vh;
+}
 .max-h-10 {
   max-height: 2.5rem;
 }
@@ -1875,6 +1902,9 @@ html.calm .tile-glass {
 .max-h-64 {
   max-height: 16rem;
 }
+.max-h-72 {
+  max-height: 18rem;
+}
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1935,6 +1965,9 @@ html.calm .tile-glass {
 .w-2 {
   width: 0.5rem;
 }
+.w-20 {
+  width: 5rem;
+}
 .w-3 {
   width: 0.75rem;
 }
@@ -2031,6 +2064,9 @@ html.calm .tile-glass {
 .min-w-56 {
   min-width: 14rem;
 }
+.min-w-64 {
+  min-width: 16rem;
+}
 .min-w-\[1\.1em\] {
   min-width: 1.1em;
 }
@@ -2687,6 +2723,9 @@ html.calm .tile-glass {
 .p-1 {
   padding: 0.25rem;
 }
+.p-10 {
+  padding: 2.5rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -2773,6 +2812,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;
@@ -2991,6 +3034,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));
@@ -3077,6 +3124,9 @@ html.calm .tile-glass {
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-25 {
   opacity: 0.25;
 }
@@ -3183,6 +3233,10 @@ html.calm .tile-glass {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.blur-2xl {
+  --tw-blur: blur(40px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .blur-3xl {
   --tw-blur: blur(64px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3520,6 +3574,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;
 }
@@ -3631,6 +3690,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;
 }
@@ -1508,6 +1519,9 @@ html.calm .tile-glass {
 .sticky {
   position: sticky;
 }
+.-inset-\[15\%\] {
+  inset: -15%;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -1519,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;
 }
@@ -1528,6 +1546,9 @@ html.calm .tile-glass {
 .-right-1 {
   right: -0.25rem;
 }
+.-right-2 {
+  right: -0.5rem;
+}
 .-right-32 {
   right: -8rem;
 }
@@ -1540,6 +1561,9 @@ html.calm .tile-glass {
 .-top-1\.5 {
   top: -0.375rem;
 }
+.-top-2 {
+  top: -0.5rem;
+}
 .-top-3 {
   top: -0.75rem;
 }
@@ -1860,6 +1884,9 @@ html.calm .tile-glass {
 .h-px {
   height: 1px;
 }
+.h-screen {
+  height: 100vh;
+}
 .max-h-10 {
   max-height: 2.5rem;
 }
@@ -1875,6 +1902,9 @@ html.calm .tile-glass {
 .max-h-64 {
   max-height: 16rem;
 }
+.max-h-72 {
+  max-height: 18rem;
+}
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1935,6 +1965,9 @@ html.calm .tile-glass {
 .w-2 {
   width: 0.5rem;
 }
+.w-20 {
+  width: 5rem;
+}
 .w-3 {
   width: 0.75rem;
 }
@@ -2031,6 +2064,9 @@ html.calm .tile-glass {
 .min-w-56 {
   min-width: 14rem;
 }
+.min-w-64 {
+  min-width: 16rem;
+}
 .min-w-\[1\.1em\] {
   min-width: 1.1em;
 }
@@ -2687,6 +2723,9 @@ html.calm .tile-glass {
 .p-1 {
   padding: 0.25rem;
 }
+.p-10 {
+  padding: 2.5rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -2773,6 +2812,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;
@@ -2991,6 +3034,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));
@@ -3077,6 +3124,9 @@ html.calm .tile-glass {
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-25 {
   opacity: 0.25;
 }
@@ -3183,6 +3233,10 @@ html.calm .tile-glass {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.blur-2xl {
+  --tw-blur: blur(40px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .blur-3xl {
   --tw-blur: blur(64px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3520,6 +3574,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;
 }
@@ -3631,6 +3690,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.26.0";
+export declare const A4UI_VERSION = "0.28.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';
@@ -8,6 +8,7 @@ export { remeasureAfterLayout } from './lib/virtual';
 export { createOptimistic } from './lib/createOptimistic';
 export { startViewTransition } from './lib/viewTransition';
 export { EASE, SPRING, type EaseName, type SpringName } from './lib/easing';
+export { createLinkedSelection, type LinkedSelection } from './lib/createLinkedSelection';
 export { Accordion, type AccordionItem } from './ui/Accordion';
 export { Badge, type BadgeTone } from './ui/Badge';
 export { Button, type ButtonVariant } from './ui/Button';
@@ -115,6 +116,16 @@ export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs';
 export { PillSearch, type PillSearchProps, type PillField } from './ui/PillSearch';
 export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/CategoryStrip';
 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 { ScrambleText, type ScrambleTextProps } from './ui/ScrambleText';
 export { TextReveal, type TextRevealProps } from './ui/TextReveal';
 export { HoldToConfirm, type HoldToConfirmProps } from './ui/HoldToConfirm';