@a4ui/core 0.16.0 → 0.18.0

package/dist/full.css

@@ -163,6 +163,72 @@ body {
   animation: toast-out 0.18s ease-in;
 }
 
+/* Skeleton shimmer — a light band sweeping across the placeholder (opt-in
+   alternative to the default pulse). The band color is token-driven so it reads
+   on every theme; the sweep is a pure CSS animation (no engine). */
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.skeleton-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.08), transparent);
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+/* Accordion open/close — animate the panel height using Kobalte's measured
+   `--kb-accordion-content-height` var (presence keyed off data-expanded/closed,
+   animationend-driven like Modal). Engine-free. */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-accordion-content-height);
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--kb-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.accordion-content {
+  overflow: hidden;
+}
+.accordion-content[data-expanded] {
+  animation: accordion-down 0.2s ease-out;
+}
+.accordion-content[data-closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+
+/* List stagger — rows fade/slide in on mount, delayed per index (set inline as
+   `animation-delay`). Opt-in via <List stagger>. */
+@keyframes list-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.list-row-stagger {
+  animation: list-row-in 0.35s both ease-out;
+}
+
 /* Table row enter/exit fade. */
 .row-enter-active,
 .row-exit-active {
@@ -1450,9 +1516,15 @@ html.calm .tile-glass {
 .-top-1\.5 {
   top: -0.375rem;
 }
+.-top-3 {
+  top: -0.75rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-3 {
+  bottom: 0.75rem;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -1465,6 +1537,9 @@ html.calm .tile-glass {
 .left-2 {
   left: 0.5rem;
 }
+.left-3 {
+  left: 0.75rem;
+}
 .left-6 {
   left: 1.5rem;
 }
@@ -1634,6 +1709,9 @@ html.calm .tile-glass {
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
 .size-3 {
   width: 0.75rem;
   height: 0.75rem;
@@ -1872,12 +1950,27 @@ html.calm .tile-glass {
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
+.max-w-2xl {
+  max-width: 42rem;
+}
+.max-w-4xl {
+  max-width: 56rem;
+}
+.max-w-6xl {
+  max-width: 72rem;
+}
+.max-w-7xl {
+  max-width: 80rem;
+}
 .max-w-\[520px\] {
   max-width: 520px;
 }
 .max-w-\[90vw\] {
   max-width: 90vw;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1887,6 +1980,9 @@ html.calm .tile-glass {
 .max-w-sm {
   max-width: 24rem;
 }
+.max-w-xl {
+  max-width: 36rem;
+}
 .max-w-xs {
   max-width: 20rem;
 }
@@ -1935,9 +2031,24 @@ html.calm .tile-glass {
   --tw-rotate: 90deg;
   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));
 }
+.scale-\[1\.03\] {
+  --tw-scale-x: 1.03;
+  --tw-scale-y: 1.03;
+  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));
+}
 .transform {
   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));
 }
+@keyframes ping {
+
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
 @keyframes pulse {
 
   50% {
@@ -1959,6 +2070,9 @@ html.calm .tile-glass {
 .cursor-col-resize {
   cursor: col-resize;
 }
+.cursor-ew-resize {
+  cursor: ew-resize;
+}
 .cursor-grab {
   cursor: grab;
 }
@@ -1974,6 +2088,13 @@ html.calm .tile-glass {
 .cursor-zoom-in {
   cursor: zoom-in;
 }
+.touch-none {
+  touch-action: none;
+}
+.touch-pan-y {
+  --tw-pan-y: pan-y;
+  touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
 .select-none {
   user-select: none;
 }
@@ -1998,6 +2119,12 @@ html.calm .tile-glass {
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
+.grid-rows-\[0fr\] {
+  grid-template-rows: 0fr;
+}
+.grid-rows-\[1fr\] {
+  grid-template-rows: 1fr;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -2058,6 +2185,9 @@ html.calm .tile-glass {
 .gap-6 {
   gap: 1.5rem;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .gap-x-6 {
   column-gap: 1.5rem;
 }
@@ -2296,6 +2426,12 @@ html.calm .tile-glass {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
 }
+.bg-muted\/30 {
+  background-color: hsl(var(--muted) / 0.3);
+}
+.bg-muted\/40 {
+  background-color: hsl(var(--muted) / 0.4);
+}
 .bg-muted\/80 {
   background-color: hsl(var(--muted) / 0.8);
 }
@@ -2442,6 +2578,10 @@ html.calm .tile-glass {
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
+.py-14 {
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2525,6 +2665,10 @@ html.calm .tile-glass {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -2801,6 +2945,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-lg {
+  --tw-blur: blur(16px);
+  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);
+}
 .brightness-110 {
   --tw-brightness: brightness(1.1);
   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);
@@ -2836,11 +2984,31 @@ html.calm .tile-glass {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[background-color\2c transform\] {
+  transition-property: background-color,transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-\[clip-path\] {
+  transition-property: clip-path;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-\[color\2c background-color\2c transform\] {
   transition-property: color,background-color,transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[filter\2c transform\] {
+  transition-property: filter,transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.transition-\[grid-template-rows\] {
+  transition-property: grid-template-rows;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-\[transform\2c opacity\] {
   transition-property: transform,opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2891,6 +3059,41 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
 }
+.before\:pointer-events-none::before {
+  content: var(--tw-content);
+  pointer-events: none;
+}
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+.before\:inset-y-0::before {
+  content: var(--tw-content);
+  top: 0px;
+  bottom: 0px;
+}
+.before\:left-1\/2::before {
+  content: var(--tw-content);
+  left: 50%;
+}
+.before\:w-px::before {
+  content: var(--tw-content);
+  width: 1px;
+}
+.before\:-translate-x-1\/2::before {
+  content: var(--tw-content);
+  --tw-translate-x: -50%;
+  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));
+}
+.before\:bg-background::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
+}
+.before\:content-\[\'\'\]::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
 .last\:flex-none:last-child {
   flex: none;
 }
@@ -2919,6 +3122,9 @@ html.calm .tile-glass {
 .hover\:border-ring\/60:hover {
   border-color: hsl(var(--ring) / 0.6);
 }
+.hover\:bg-accent\/90:hover {
+  background-color: hsl(var(--accent) / 0.9);
+}
 .hover\:bg-muted:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
@@ -3022,6 +3228,21 @@ html.calm .tile-glass {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.group:focus-visible .group-focus-visible\:ring-primary {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: hsl(var(--primary) / var(--tw-ring-opacity, 1));
+}
+.group:focus-visible .group-focus-visible\:ring-offset-2 {
+  --tw-ring-offset-width: 2px;
+}
+.group:focus-visible .group-focus-visible\:ring-offset-background {
+  --tw-ring-offset-color: hsl(var(--background) / 1);
+}
 .group[open] .group-\[\[open\]\]\:rotate-90 {
   --tw-rotate: 90deg;
   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));
@@ -3075,8 +3296,18 @@ html.calm .tile-glass {
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
+@media (prefers-reduced-motion: reduce) {
+
+  .motion-reduce\:transition-none {
+    transition-property: none;
+  }
+}
 @media (min-width: 640px) {
 
+  .sm\:block {
+    display: block;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3101,13 +3332,26 @@ html.calm .tile-glass {
     justify-content: space-between;
   }
 
+  .sm\:gap-3 {
+    gap: 0.75rem;
+  }
+
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
+
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 @media (min-width: 1024px) {
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.16.0";
+export declare const A4UI_VERSION = "0.18.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';
@@ -56,6 +56,8 @@ export { Carousel, type CarouselProps } from './ui/Carousel';
 export { Stepper, type StepItem, type StepperProps } from './ui/Stepper';
 export { Timeline, type TimelineItem, type TimelineTone, type TimelineProps } from './ui/Timeline';
 export { Rating, type RatingProps } from './ui/Rating';
+export { PricingTable, type PricingTier, type PricingPeriod } from './ui/PricingTable';
+export { BeforeAfter, type BeforeAfterProps } from './ui/BeforeAfter';
 export { Empty, type EmptyProps } from './ui/Empty';
 export { Calendar, type CalendarProps } from './ui/Calendar';
 export { Tree, type TreeNode, type TreeProps } from './ui/Tree';
@@ -119,4 +121,6 @@ export { ChristmasBackground } from './layout/ChristmasBackground';
 export { ThemeToggle } from './layout/ThemeToggle';
 export { EffectsToggle } from './layout/EffectsToggle';
 export { NavGroup } from './layout/NavGroup';
+export { Section, type SectionWidth, type SectionPad } from './layout/Section';
+export { ActionBar, type ActionBarProps, type ActionBarPosition } from './layout/ActionBar';
 export { themes, space, dino, doctor, scientist, soccer, snow, christmas, activeTheme, selectTheme, applyThemeDefinition, initTheme, themeToCss, themeToJson, TOKEN_ORDER, type ThemeDefinition, type Palette, } from './themes';