@a4ui/core 0.17.0 → 0.18.0

package/dist/elements.css

@@ -1516,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;
 }
@@ -1531,6 +1537,9 @@ html.calm .tile-glass {
 .left-2 {
   left: 0.5rem;
 }
+.left-3 {
+  left: 0.75rem;
+}
 .left-6 {
   left: 1.5rem;
 }
@@ -1700,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;
@@ -1938,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;
 }
@@ -1953,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;
 }
@@ -2040,6 +2070,9 @@ html.calm .tile-glass {
 .cursor-col-resize {
   cursor: col-resize;
 }
+.cursor-ew-resize {
+  cursor: ew-resize;
+}
 .cursor-grab {
   cursor: grab;
 }
@@ -2055,6 +2088,9 @@ 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);
@@ -2149,6 +2185,9 @@ html.calm .tile-glass {
 .gap-6 {
   gap: 1.5rem;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .gap-x-6 {
   column-gap: 1.5rem;
 }
@@ -2387,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);
 }
@@ -2533,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;
@@ -2616,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;
@@ -2931,6 +2984,16 @@ 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);
@@ -2996,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;
 }
@@ -3024,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));
@@ -3127,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));
@@ -3188,6 +3304,10 @@ html.calm .tile-glass {
 }
 @media (min-width: 640px) {
 
+  .sm\:block {
+    display: block;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3212,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/full.css

@@ -1516,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;
 }
@@ -1531,6 +1537,9 @@ html.calm .tile-glass {
 .left-2 {
   left: 0.5rem;
 }
+.left-3 {
+  left: 0.75rem;
+}
 .left-6 {
   left: 1.5rem;
 }
@@ -1700,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;
@@ -1938,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;
 }
@@ -1953,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;
 }
@@ -2040,6 +2070,9 @@ html.calm .tile-glass {
 .cursor-col-resize {
   cursor: col-resize;
 }
+.cursor-ew-resize {
+  cursor: ew-resize;
+}
 .cursor-grab {
   cursor: grab;
 }
@@ -2055,6 +2088,9 @@ 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);
@@ -2149,6 +2185,9 @@ html.calm .tile-glass {
 .gap-6 {
   gap: 1.5rem;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .gap-x-6 {
   column-gap: 1.5rem;
 }
@@ -2387,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);
 }
@@ -2533,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;
@@ -2616,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;
@@ -2931,6 +2984,16 @@ 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);
@@ -2996,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;
 }
@@ -3024,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));
@@ -3127,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));
@@ -3188,6 +3304,10 @@ html.calm .tile-glass {
 }
 @media (min-width: 640px) {
 
+  .sm\:block {
+    display: block;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3212,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.17.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';