@a4ui/core 0.16.0 → 0.17.0

package/dist/commerce.js

@@ -1,7 +1,7 @@
-import { insert as n, createComponent as c, memo as A, effect as v, className as b, template as o, delegateEvents as y, setAttribute as x } from "solid-js/web";
-import { Show as g, For as C } from "solid-js";
+import { insert as n, createComponent as i, memo as A, effect as v, className as b, template as o, delegateEvents as y, setAttribute as x } from "solid-js/web";
+import { Show as s, For as C } from "solid-js";
 import { c as h } from "./cn-B6yFEsav.js";
-import { B as T, C as N, R as E, a as S, b as I } from "./Checkbox-B5Gb3h5J.js";
+import { B as T, C as N, R as E, a as S, b as I } from "./Checkbox-DMx0y81E.js";
 import { Minus as R, Plus as F, Trash2 as U } from "lucide-solid";
 var j = /* @__PURE__ */ o('<span class="text-muted-foreground line-through">'), q = /* @__PURE__ */ o("<div><span>");
 const B = {
@@ -16,24 +16,24 @@ function k(e) {
   }).format(u), l = () => (e.compareAt ?? 0) > e.amount, t = () => Math.round((1 - e.amount / e.compareAt) * 100);
   return (() => {
     var u = q(), d = u.firstChild;
-    return n(d, () => r(e.amount)), n(u, c(g, {
+    return n(d, () => r(e.amount)), n(u, i(s, {
       get when() {
         return l();
       },
       get children() {
         return [(() => {
-          var i = j();
-          return n(i, () => r(e.compareAt)), i;
-        })(), c(T, {
+          var c = j();
+          return n(c, () => r(e.compareAt)), c;
+        })(), i(T, {
           tone: "danger",
           get children() {
             return ["-", A(() => t()), "%"];
           }
         })];
       }
-    }), null), v((i) => {
+    }), null), v((c) => {
       var a = h("inline-flex items-center gap-2", e.class), m = h("font-bold text-foreground", B[e.size ?? "md"]);
-      return a !== i.e && b(u, i.e = a), m !== i.t && b(d, i.t = m), i;
+      return a !== c.e && b(u, c.e = a), m !== c.t && b(d, c.t = m), c;
     }, {
       e: void 0,
       t: void 0
@@ -42,21 +42,21 @@ function k(e) {
 }
 var M = /* @__PURE__ */ o('<div><button type=button aria-label="Decrease quantity"class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40"></button><span class="grid min-w-[2.5rem] place-items-center tabular-nums"></span><button type=button aria-label="Increase quantity"class="grid h-8 w-8 place-items-center hover:bg-muted disabled:opacity-40">');
 function P(e) {
-  const r = () => e.min ?? 0, l = () => e.max ?? Number.MAX_SAFE_INTEGER, t = (i) => Math.min(l(), Math.max(r(), i)), u = () => e.onChange(t(e.value - 1)), d = () => e.onChange(t(e.value + 1));
+  const r = () => e.min ?? 0, l = () => e.max ?? Number.MAX_SAFE_INTEGER, t = (c) => Math.min(l(), Math.max(r(), c)), u = () => e.onChange(t(e.value - 1)), d = () => e.onChange(t(e.value + 1));
   return (() => {
-    var i = M(), a = i.firstChild, m = a.nextSibling, f = m.nextSibling;
-    return a.$$click = u, n(a, c(R, {
+    var c = M(), a = c.firstChild, m = a.nextSibling, f = m.nextSibling;
+    return a.$$click = u, n(a, i(R, {
       class: "h-4 w-4"
-    })), n(m, () => e.value), f.$$click = d, n(f, c(F, {
+    })), n(m, () => e.value), f.$$click = d, n(f, i(F, {
       class: "h-4 w-4"
-    })), v((s) => {
+    })), v((g) => {
       var $ = h("inline-flex items-stretch rounded-md border border-input", e.class), _ = e.disabled || e.value <= r(), w = e.disabled || e.value >= l();
-      return $ !== s.e && b(i, s.e = $), _ !== s.t && (a.disabled = s.t = _), w !== s.a && (f.disabled = s.a = w), s;
+      return $ !== g.e && b(c, g.e = $), _ !== g.t && (a.disabled = g.t = _), w !== g.a && (f.disabled = g.a = w), g;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), i;
+    }), c;
   })();
 }
 y(["click"]);
@@ -72,16 +72,22 @@ function X(e, r) {
   return /sale|off|%|deal/.test(l) ? "sale" : /new/.test(l) ? "new" : "featured";
 }
 function ue(e) {
-  return c(N, {
+  return i(N, {
     glass: !0,
     glow: !0,
+    get tilt() {
+      return e.tilt;
+    },
+    get spotlight() {
+      return e.spotlight;
+    },
     get class() {
       return h("flex h-full flex-col overflow-hidden p-4", e.class);
     },
     get children() {
       return [(() => {
         var r = L(), l = r.firstChild;
-        return n(r, c(g, {
+        return n(r, i(s, {
           get when() {
             return e.badge;
           },
@@ -98,7 +104,7 @@ function ue(e) {
         }), r;
       })(), (() => {
         var r = O(), l = r.firstChild;
-        return n(r, c(g, {
+        return n(r, i(s, {
           get when() {
             return e.brand;
           },
@@ -106,7 +112,7 @@ function ue(e) {
             var t = z();
             return n(t, () => e.brand), t;
           }
-        }), l), n(l, () => e.title), n(r, c(g, {
+        }), l), n(l, () => e.title), n(r, i(s, {
           get when() {
             return e.category;
           },
@@ -114,12 +120,12 @@ function ue(e) {
             var t = G();
             return n(t, () => e.category), t;
           }
-        }), null), n(r, c(g, {
+        }), null), n(r, i(s, {
           get when() {
             return e.rating !== void 0;
           },
           get children() {
-            return c(E, {
+            return i(E, {
               get value() {
                 return e.rating;
               },
@@ -127,7 +133,7 @@ function ue(e) {
               max: 5
             });
           }
-        }), null), n(r, c(k, {
+        }), null), n(r, i(k, {
           get amount() {
             return e.price;
           },
@@ -140,12 +146,12 @@ function ue(e) {
           get locale() {
             return e.locale;
           }
-        }), null), n(r, c(g, {
+        }), null), n(r, i(s, {
           get when() {
             return e.onAddToCart;
           },
           get children() {
-            return c(S, {
+            return i(S, {
               class: "mt-auto w-full",
               onClick: () => {
                 var t;
@@ -160,35 +166,35 @@ function ue(e) {
   });
 }
 var Z = /* @__PURE__ */ o("<div>");
-function ce(e) {
+function ie(e) {
   return (() => {
     var r = Z();
     return n(r, () => e.children), v(() => b(r, h("grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", e.class))), r;
   })();
 }
 var H = /* @__PURE__ */ o('<img class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover">'), J = /* @__PURE__ */ o('<button type=button aria-label="Remove item"class="text-muted-foreground hover:text-foreground">'), K = /* @__PURE__ */ o('<div><div class="min-w-[8rem] flex-1"><p class="line-clamp-1 font-medium text-foreground"></p></div><span class="min-w-[4rem] text-right font-medium tabular-nums text-foreground">');
-function ie(e) {
+function ce(e) {
   const r = () => e.price * e.quantity, l = (t) => new Intl.NumberFormat(e.locale ?? "en-US", {
     style: "currency",
     currency: e.currency ?? "USD"
   }).format(t);
   return (() => {
-    var t = K(), u = t.firstChild, d = u.firstChild, i = u.nextSibling;
-    return n(t, c(g, {
+    var t = K(), u = t.firstChild, d = u.firstChild, c = u.nextSibling;
+    return n(t, i(s, {
       get when() {
         return e.image;
       },
       get children() {
         var a = H();
         return v((m) => {
-          var f = e.image, s = e.title;
-          return f !== m.e && x(a, "src", m.e = f), s !== m.t && x(a, "alt", m.t = s), m;
+          var f = e.image, g = e.title;
+          return f !== m.e && x(a, "src", m.e = f), g !== m.t && x(a, "alt", m.t = g), m;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), u), n(d, () => e.title), n(u, c(k, {
+    }), u), n(d, () => e.title), n(u, i(k, {
       get amount() {
         return e.price;
       },
@@ -199,7 +205,7 @@ function ie(e) {
         return e.locale;
       },
       size: "sm"
-    }), null), n(t, c(P, {
+    }), null), n(t, i(P, {
       get value() {
         return e.quantity;
       },
@@ -208,7 +214,7 @@ function ie(e) {
         return (m = e.onQuantityChange) == null ? void 0 : m.call(e, a);
       },
       min: 1
-    }), i), n(i, () => l(r())), n(t, c(g, {
+    }), c), n(c, () => l(r())), n(t, i(s, {
       get when() {
         return e.onRemove;
       },
@@ -217,7 +223,7 @@ function ie(e) {
         return a.$$click = () => {
           var m;
           return (m = e.onRemove) == null ? void 0 : m.call(e);
-        }, n(a, c(U, {
+        }, n(a, i(U, {
           class: "h-4 w-4"
         })), a;
       }
@@ -232,21 +238,21 @@ function de(e) {
     currency: e.currency ?? "USD"
   }).format(l);
   return (() => {
-    var l = V(), t = l.firstChild, u = t.nextSibling, d = u.firstChild, i = d.nextSibling;
-    return n(l, c(C, {
+    var l = V(), t = l.firstChild, u = t.nextSibling, d = u.firstChild, c = d.nextSibling;
+    return n(l, i(C, {
       get each() {
         return e.lines;
       },
       children: (a) => (() => {
-        var m = W(), f = m.firstChild, s = f.nextSibling;
-        return n(f, () => a.label), n(s, () => r(a.amount)), m;
+        var m = W(), f = m.firstChild, g = f.nextSibling;
+        return n(f, () => a.label), n(g, () => r(a.amount)), m;
       })()
-    }), t), n(i, () => r(e.total)), n(l, c(g, {
+    }), t), n(c, () => r(e.total)), n(l, i(s, {
       get when() {
         return e.onCheckout;
       },
       get children() {
-        return c(S, {
+        return i(S, {
           class: "mt-4 w-full",
           onClick: () => {
             var a;
@@ -268,13 +274,13 @@ function me(e) {
   };
   return (() => {
     var l = Y(), t = l.firstChild, u = t.nextSibling;
-    return n(t, () => e.title), n(u, c(C, {
+    return n(t, () => e.title), n(u, i(C, {
       get each() {
         return e.options;
       },
       children: (d) => (() => {
-        var i = ee();
-        return n(i, c(I, {
+        var c = ee();
+        return n(c, i(I, {
           get checked() {
             return e.selected.includes(d.value);
           },
@@ -282,7 +288,7 @@ function me(e) {
           get label() {
             return d.label;
           }
-        }), null), n(i, c(g, {
+        }), null), n(c, i(s, {
           get when() {
             return d.count != null;
           },
@@ -290,17 +296,17 @@ function me(e) {
             var a = p();
             return n(a, () => d.count), a;
           }
-        }), null), i;
+        }), null), c;
       })()
     })), v(() => b(l, h("space-y-2", e.class))), l;
   })();
 }
 export {
-  ie as CartLine,
+  ce as CartLine,
   de as CartSummary,
   me as FilterGroup,
   k as PriceTag,
   ue as ProductCard,
-  ce as ProductGrid,
+  ie as ProductGrid,
   P as QuantityStepper
 };

package/dist/elements.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 {
@@ -1935,9 +2001,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% {
@@ -1974,6 +2055,10 @@ html.calm .tile-glass {
 .cursor-zoom-in {
   cursor: zoom-in;
 }
+.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 +2083,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;
 }
@@ -2801,6 +2892,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);
@@ -2841,6 +2936,16 @@ html.calm .tile-glass {
   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);
@@ -3075,6 +3180,12 @@ 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\:grid-cols-2 {