@a4ui/core 0.19.0 → 0.21.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.
Files changed (12) hide show
  1. package/dist/elements.css +76 -1
  2. package/dist/full.css +76 -1
  3. package/dist/index.d.ts +3 -1
  4. package/dist/index.js +2379 -2177
  5. package/dist/layout/Aurora.d.ts +25 -0
  6. package/dist/styles.css +15 -0
  7. package/dist/ui/Configurator.d.ts +76 -0
  8. package/package.json +1 -1
  9. package/preset.js +3 -1
  10. package/src/index.ts +10 -1
  11. package/src/layout/Aurora.tsx +66 -0
  12. package/src/ui/Configurator.tsx +215 -0
package/dist/elements.css CHANGED
@@ -229,6 +229,21 @@ body {
229
229
  animation: list-row-in 0.35s both ease-out;
230
230
  }
231
231
 
232
+ /* Aurora — slow ambient drift for the blurred backdrop blobs (opt-in via
233
+ <Aurora animated>). Held still under reduced motion by the global rule below. */
234
+ @keyframes aurora-drift {
235
+ 0%,
236
+ 100% {
237
+ transform: translate3d(0, 0, 0) scale(1);
238
+ }
239
+ 50% {
240
+ transform: translate3d(3%, -3%, 0) scale(1.08);
241
+ }
242
+ }
243
+ .aurora-drift {
244
+ animation: aurora-drift 18s ease-in-out infinite;
245
+ }
246
+
232
247
  /* Table row enter/exit fade. */
233
248
  .row-enter-active,
234
249
  .row-exit-active {
@@ -1351,7 +1366,7 @@ video {
1351
1366
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease;
1352
1367
  }
1353
1368
  [data-theme='light'] .card {
1354
- background: hsl(var(--card) / 0.72);
1369
+ background: hsl(var(--card) / 0.6);
1355
1370
  border: 1px solid hsl(var(--border));
1356
1371
  }
1357
1372
  .card.glow-edge::before {
@@ -1504,9 +1519,15 @@ html.calm .tile-glass {
1504
1519
  .-bottom-6 {
1505
1520
  bottom: -1.5rem;
1506
1521
  }
1522
+ .-left-40 {
1523
+ left: -10rem;
1524
+ }
1507
1525
  .-right-1 {
1508
1526
  right: -0.25rem;
1509
1527
  }
1528
+ .-right-32 {
1529
+ right: -8rem;
1530
+ }
1510
1531
  .-right-9 {
1511
1532
  right: -2.25rem;
1512
1533
  }
@@ -1519,6 +1540,9 @@ html.calm .tile-glass {
1519
1540
  .-top-3 {
1520
1541
  top: -0.75rem;
1521
1542
  }
1543
+ .-top-32 {
1544
+ top: -8rem;
1545
+ }
1522
1546
  .bottom-0 {
1523
1547
  bottom: 0px;
1524
1548
  }
@@ -1531,9 +1555,15 @@ html.calm .tile-glass {
1531
1555
  .bottom-6 {
1532
1556
  bottom: 1.5rem;
1533
1557
  }
1558
+ .bottom-\[-10\%\] {
1559
+ bottom: -10%;
1560
+ }
1534
1561
  .left-0 {
1535
1562
  left: 0px;
1536
1563
  }
1564
+ .left-1\/3 {
1565
+ left: 33.333333%;
1566
+ }
1537
1567
  .left-2 {
1538
1568
  left: 0.5rem;
1539
1569
  }
@@ -1567,6 +1597,9 @@ html.calm .tile-glass {
1567
1597
  .top-1\/2 {
1568
1598
  top: 50%;
1569
1599
  }
1600
+ .top-1\/4 {
1601
+ top: 25%;
1602
+ }
1570
1603
  .top-2 {
1571
1604
  top: 0.5rem;
1572
1605
  }
@@ -1582,6 +1615,9 @@ html.calm .tile-glass {
1582
1615
  .isolate {
1583
1616
  isolation: isolate;
1584
1617
  }
1618
+ .-z-10 {
1619
+ z-index: -10;
1620
+ }
1585
1621
  .z-0 {
1586
1622
  z-index: 0;
1587
1623
  }
@@ -1640,6 +1676,9 @@ html.calm .tile-glass {
1640
1676
  .mb-2 {
1641
1677
  margin-bottom: 0.5rem;
1642
1678
  }
1679
+ .ml-1 {
1680
+ margin-left: 0.25rem;
1681
+ }
1643
1682
  .ml-4 {
1644
1683
  margin-left: 1rem;
1645
1684
  }
@@ -1779,6 +1818,15 @@ html.calm .tile-glass {
1779
1818
  .h-\[1em\] {
1780
1819
  height: 1em;
1781
1820
  }
1821
+ .h-\[36rem\] {
1822
+ height: 36rem;
1823
+ }
1824
+ .h-\[38rem\] {
1825
+ height: 38rem;
1826
+ }
1827
+ .h-\[40rem\] {
1828
+ height: 40rem;
1829
+ }
1782
1830
  .h-\[65vh\] {
1783
1831
  height: 65vh;
1784
1832
  }
@@ -1908,6 +1956,15 @@ html.calm .tile-glass {
1908
1956
  .w-\[18px\] {
1909
1957
  width: 18px;
1910
1958
  }
1959
+ .w-\[36rem\] {
1960
+ width: 36rem;
1961
+ }
1962
+ .w-\[38rem\] {
1963
+ width: 38rem;
1964
+ }
1965
+ .w-\[40rem\] {
1966
+ width: 40rem;
1967
+ }
1911
1968
  .w-fit {
1912
1969
  width: fit-content;
1913
1970
  }
@@ -2211,6 +2268,11 @@ html.calm .tile-glass {
2211
2268
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2212
2269
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2213
2270
  }
2271
+ .space-y-6 > :not([hidden]) ~ :not([hidden]) {
2272
+ --tw-space-y-reverse: 0;
2273
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
2274
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
2275
+ }
2214
2276
  .divide-x > :not([hidden]) ~ :not([hidden]) {
2215
2277
  --tw-divide-x-reverse: 0;
2216
2278
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -2851,6 +2913,9 @@ html.calm .tile-glass {
2851
2913
  .opacity-60 {
2852
2914
  opacity: 0.6;
2853
2915
  }
2916
+ .opacity-70 {
2917
+ opacity: 0.7;
2918
+ }
2854
2919
  .opacity-75 {
2855
2920
  opacity: 0.75;
2856
2921
  }
@@ -2945,6 +3010,10 @@ html.calm .tile-glass {
2945
3010
  --tw-blur: blur(8px);
2946
3011
  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);
2947
3012
  }
3013
+ .blur-3xl {
3014
+ --tw-blur: blur(64px);
3015
+ 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);
3016
+ }
2948
3017
  .blur-lg {
2949
3018
  --tw-blur: blur(16px);
2950
3019
  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);
@@ -3350,6 +3419,12 @@ html.calm .tile-glass {
3350
3419
  line-height: 1.5rem;
3351
3420
  }
3352
3421
  }
3422
+ @media (min-width: 768px) {
3423
+
3424
+ .md\:grid-cols-2 {
3425
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3426
+ }
3427
+ }
3353
3428
  @media (min-width: 1024px) {
3354
3429
 
3355
3430
  .lg\:grid-cols-3 {
package/dist/full.css CHANGED
@@ -229,6 +229,21 @@ body {
229
229
  animation: list-row-in 0.35s both ease-out;
230
230
  }
231
231
 
232
+ /* Aurora — slow ambient drift for the blurred backdrop blobs (opt-in via
233
+ <Aurora animated>). Held still under reduced motion by the global rule below. */
234
+ @keyframes aurora-drift {
235
+ 0%,
236
+ 100% {
237
+ transform: translate3d(0, 0, 0) scale(1);
238
+ }
239
+ 50% {
240
+ transform: translate3d(3%, -3%, 0) scale(1.08);
241
+ }
242
+ }
243
+ .aurora-drift {
244
+ animation: aurora-drift 18s ease-in-out infinite;
245
+ }
246
+
232
247
  /* Table row enter/exit fade. */
233
248
  .row-enter-active,
234
249
  .row-exit-active {
@@ -1351,7 +1366,7 @@ video {
1351
1366
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease;
1352
1367
  }
1353
1368
  [data-theme='light'] .card {
1354
- background: hsl(var(--card) / 0.72);
1369
+ background: hsl(var(--card) / 0.6);
1355
1370
  border: 1px solid hsl(var(--border));
1356
1371
  }
1357
1372
  .card.glow-edge::before {
@@ -1504,9 +1519,15 @@ html.calm .tile-glass {
1504
1519
  .-bottom-6 {
1505
1520
  bottom: -1.5rem;
1506
1521
  }
1522
+ .-left-40 {
1523
+ left: -10rem;
1524
+ }
1507
1525
  .-right-1 {
1508
1526
  right: -0.25rem;
1509
1527
  }
1528
+ .-right-32 {
1529
+ right: -8rem;
1530
+ }
1510
1531
  .-right-9 {
1511
1532
  right: -2.25rem;
1512
1533
  }
@@ -1519,6 +1540,9 @@ html.calm .tile-glass {
1519
1540
  .-top-3 {
1520
1541
  top: -0.75rem;
1521
1542
  }
1543
+ .-top-32 {
1544
+ top: -8rem;
1545
+ }
1522
1546
  .bottom-0 {
1523
1547
  bottom: 0px;
1524
1548
  }
@@ -1531,9 +1555,15 @@ html.calm .tile-glass {
1531
1555
  .bottom-6 {
1532
1556
  bottom: 1.5rem;
1533
1557
  }
1558
+ .bottom-\[-10\%\] {
1559
+ bottom: -10%;
1560
+ }
1534
1561
  .left-0 {
1535
1562
  left: 0px;
1536
1563
  }
1564
+ .left-1\/3 {
1565
+ left: 33.333333%;
1566
+ }
1537
1567
  .left-2 {
1538
1568
  left: 0.5rem;
1539
1569
  }
@@ -1567,6 +1597,9 @@ html.calm .tile-glass {
1567
1597
  .top-1\/2 {
1568
1598
  top: 50%;
1569
1599
  }
1600
+ .top-1\/4 {
1601
+ top: 25%;
1602
+ }
1570
1603
  .top-2 {
1571
1604
  top: 0.5rem;
1572
1605
  }
@@ -1582,6 +1615,9 @@ html.calm .tile-glass {
1582
1615
  .isolate {
1583
1616
  isolation: isolate;
1584
1617
  }
1618
+ .-z-10 {
1619
+ z-index: -10;
1620
+ }
1585
1621
  .z-0 {
1586
1622
  z-index: 0;
1587
1623
  }
@@ -1640,6 +1676,9 @@ html.calm .tile-glass {
1640
1676
  .mb-2 {
1641
1677
  margin-bottom: 0.5rem;
1642
1678
  }
1679
+ .ml-1 {
1680
+ margin-left: 0.25rem;
1681
+ }
1643
1682
  .ml-4 {
1644
1683
  margin-left: 1rem;
1645
1684
  }
@@ -1779,6 +1818,15 @@ html.calm .tile-glass {
1779
1818
  .h-\[1em\] {
1780
1819
  height: 1em;
1781
1820
  }
1821
+ .h-\[36rem\] {
1822
+ height: 36rem;
1823
+ }
1824
+ .h-\[38rem\] {
1825
+ height: 38rem;
1826
+ }
1827
+ .h-\[40rem\] {
1828
+ height: 40rem;
1829
+ }
1782
1830
  .h-\[65vh\] {
1783
1831
  height: 65vh;
1784
1832
  }
@@ -1908,6 +1956,15 @@ html.calm .tile-glass {
1908
1956
  .w-\[18px\] {
1909
1957
  width: 18px;
1910
1958
  }
1959
+ .w-\[36rem\] {
1960
+ width: 36rem;
1961
+ }
1962
+ .w-\[38rem\] {
1963
+ width: 38rem;
1964
+ }
1965
+ .w-\[40rem\] {
1966
+ width: 40rem;
1967
+ }
1911
1968
  .w-fit {
1912
1969
  width: fit-content;
1913
1970
  }
@@ -2211,6 +2268,11 @@ html.calm .tile-glass {
2211
2268
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2212
2269
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2213
2270
  }
2271
+ .space-y-6 > :not([hidden]) ~ :not([hidden]) {
2272
+ --tw-space-y-reverse: 0;
2273
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
2274
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
2275
+ }
2214
2276
  .divide-x > :not([hidden]) ~ :not([hidden]) {
2215
2277
  --tw-divide-x-reverse: 0;
2216
2278
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -2851,6 +2913,9 @@ html.calm .tile-glass {
2851
2913
  .opacity-60 {
2852
2914
  opacity: 0.6;
2853
2915
  }
2916
+ .opacity-70 {
2917
+ opacity: 0.7;
2918
+ }
2854
2919
  .opacity-75 {
2855
2920
  opacity: 0.75;
2856
2921
  }
@@ -2945,6 +3010,10 @@ html.calm .tile-glass {
2945
3010
  --tw-blur: blur(8px);
2946
3011
  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);
2947
3012
  }
3013
+ .blur-3xl {
3014
+ --tw-blur: blur(64px);
3015
+ 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);
3016
+ }
2948
3017
  .blur-lg {
2949
3018
  --tw-blur: blur(16px);
2950
3019
  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);
@@ -3350,6 +3419,12 @@ html.calm .tile-glass {
3350
3419
  line-height: 1.5rem;
3351
3420
  }
3352
3421
  }
3422
+ @media (min-width: 768px) {
3423
+
3424
+ .md\:grid-cols-2 {
3425
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3426
+ }
3427
+ }
3353
3428
  @media (min-width: 1024px) {
3354
3429
 
3355
3430
  .lg\:grid-cols-3 {
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const A4UI_VERSION = "0.19.0";
1
+ export declare const A4UI_VERSION = "0.21.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';
@@ -58,6 +58,7 @@ export { Timeline, type TimelineItem, type TimelineTone, type TimelineProps } fr
58
58
  export { Rating, type RatingProps } from './ui/Rating';
59
59
  export { PricingTable, type PricingTier, type PricingPeriod } from './ui/PricingTable';
60
60
  export { BeforeAfter, type BeforeAfterProps } from './ui/BeforeAfter';
61
+ export { Configurator, type ConfiguratorProps, type ConfiguratorGroup, type ConfiguratorState, type ConfiguratorOption, type ConfiguratorItem, } from './ui/Configurator';
61
62
  export { Empty, type EmptyProps } from './ui/Empty';
62
63
  export { Calendar, type CalendarProps } from './ui/Calendar';
63
64
  export { Tree, type TreeNode, type TreeProps } from './ui/Tree';
@@ -115,6 +116,7 @@ export { GradientText, type GradientTextProps } from './ui/GradientText';
115
116
  export { flyToCart, type FlyToCartOptions } from './lib/flyToCart';
116
117
  export { AppShell } from './layout/AppShell';
117
118
  export { SpaceBackground } from './layout/SpaceBackground';
119
+ export { Aurora, type AuroraProps } from './layout/Aurora';
118
120
  export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery';
119
121
  export { SnowScenery } from './layout/SnowScenery';
120
122
  export { ChristmasBackground } from './layout/ChristmasBackground';