@a4ui/core 0.8.0 → 0.9.0

package/dist/commerce.js

@@ -0,0 +1,281 @@
+import { insert as n, createComponent as u, memo as T, effect as f, className as b, template as s, delegateEvents as C, setAttribute as $ } from "solid-js/web";
+import { Show as v, For as w } from "solid-js";
+import { B as S, c as h, C as E, R as F, a as k, b as I } from "./Checkbox-CC3EGilW.js";
+import { Minus as N, Plus as R, Trash2 as U } from "lucide-solid";
+var j = /* @__PURE__ */ s('<span class="text-muted-foreground line-through">'), q = /* @__PURE__ */ s("<div><span>");
+const M = {
+  sm: "text-sm",
+  md: "text-lg",
+  lg: "text-2xl"
+};
+function A(e) {
+  const r = (c) => new Intl.NumberFormat(e.locale ?? "en-US", {
+    style: "currency",
+    currency: e.currency ?? "USD"
+  }).format(c), a = () => (e.compareAt ?? 0) > e.amount, t = () => Math.round((1 - e.amount / e.compareAt) * 100);
+  return (() => {
+    var c = q(), d = c.firstChild;
+    return n(d, () => r(e.amount)), n(c, u(v, {
+      get when() {
+        return a();
+      },
+      get children() {
+        return [(() => {
+          var i = j();
+          return n(i, () => r(e.compareAt)), i;
+        })(), u(S, {
+          tone: "danger",
+          get children() {
+            return ["-", T(() => t()), "%"];
+          }
+        })];
+      }
+    }), null), f((i) => {
+      var l = h("inline-flex items-center gap-2", e.class), m = h("font-bold text-foreground", M[e.size ?? "md"]);
+      return l !== i.e && b(c, i.e = l), m !== i.t && b(d, i.t = m), i;
+    }, {
+      e: void 0,
+      t: void 0
+    }), c;
+  })();
+}
+var P = /* @__PURE__ */ s('<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 D(e) {
+  const r = () => e.min ?? 0, a = () => e.max ?? Number.MAX_SAFE_INTEGER, t = (i) => Math.min(a(), Math.max(r(), i)), c = () => e.onChange(t(e.value - 1)), d = () => e.onChange(t(e.value + 1));
+  return (() => {
+    var i = P(), l = i.firstChild, m = l.nextSibling, g = m.nextSibling;
+    return l.$$click = c, n(l, u(N, {
+      class: "h-4 w-4"
+    })), n(m, () => e.value), g.$$click = d, n(g, u(R, {
+      class: "h-4 w-4"
+    })), f((o) => {
+      var x = h("inline-flex items-stretch rounded-md border border-input", e.class), _ = e.disabled || e.value <= r(), y = e.disabled || e.value >= a();
+      return x !== o.e && b(i, o.e = x), _ !== o.t && (l.disabled = o.t = _), y !== o.a && (g.disabled = o.a = y), o;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), i;
+  })();
+}
+C(["click"]);
+var z = /* @__PURE__ */ s('<div class="relative aspect-square overflow-hidden rounded-lg bg-muted"><img loading=lazy class="h-full w-full object-cover">', !0, !1, !1), B = /* @__PURE__ */ s('<div class="mt-3 space-y-2"><p class="line-clamp-1 font-medium text-foreground">');
+function ee(e) {
+  return u(E, {
+    get class() {
+      return h("overflow-hidden p-4", e.class);
+    },
+    get children() {
+      return [(() => {
+        var r = z(), a = r.firstChild;
+        return n(r, u(v, {
+          get when() {
+            return e.badge;
+          },
+          get children() {
+            return u(S, {
+              class: "absolute left-2 top-2",
+              get children() {
+                return e.badge;
+              }
+            });
+          }
+        }), null), f((t) => {
+          var c = e.image, d = e.title;
+          return c !== t.e && $(a, "src", t.e = c), d !== t.t && $(a, "alt", t.t = d), t;
+        }, {
+          e: void 0,
+          t: void 0
+        }), r;
+      })(), (() => {
+        var r = B(), a = r.firstChild;
+        return n(a, () => e.title), n(r, u(v, {
+          get when() {
+            return e.rating !== void 0;
+          },
+          get children() {
+            return u(F, {
+              get value() {
+                return e.rating;
+              },
+              readonly: !0,
+              max: 5
+            });
+          }
+        }), null), n(r, u(A, {
+          get amount() {
+            return e.price;
+          },
+          get compareAt() {
+            return e.compareAt;
+          },
+          get currency() {
+            return e.currency;
+          },
+          get locale() {
+            return e.locale;
+          }
+        }), null), n(r, u(v, {
+          get when() {
+            return e.onAddToCart;
+          },
+          get children() {
+            return u(k, {
+              class: "w-full",
+              onClick: () => {
+                var t;
+                return (t = e.onAddToCart) == null ? void 0 : t.call(e);
+              },
+              children: "Add to cart"
+            });
+          }
+        }), null), r;
+      })()];
+    }
+  });
+}
+var G = /* @__PURE__ */ s("<div>");
+function te(e) {
+  return (() => {
+    var r = G();
+    return n(r, () => e.children), f(() => b(r, h("grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", e.class))), r;
+  })();
+}
+var L = /* @__PURE__ */ s('<img class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover">'), Q = /* @__PURE__ */ s('<button type=button aria-label="Remove item"class="text-muted-foreground hover:text-foreground">'), O = /* @__PURE__ */ s('<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 ne(e) {
+  const r = () => e.price * e.quantity, a = (t) => new Intl.NumberFormat(e.locale ?? "en-US", {
+    style: "currency",
+    currency: e.currency ?? "USD"
+  }).format(t);
+  return (() => {
+    var t = O(), c = t.firstChild, d = c.firstChild, i = c.nextSibling;
+    return n(t, u(v, {
+      get when() {
+        return e.image;
+      },
+      get children() {
+        var l = L();
+        return f((m) => {
+          var g = e.image, o = e.title;
+          return g !== m.e && $(l, "src", m.e = g), o !== m.t && $(l, "alt", m.t = o), m;
+        }, {
+          e: void 0,
+          t: void 0
+        }), l;
+      }
+    }), c), n(d, () => e.title), n(c, u(A, {
+      get amount() {
+        return e.price;
+      },
+      get currency() {
+        return e.currency;
+      },
+      get locale() {
+        return e.locale;
+      },
+      size: "sm"
+    }), null), n(t, u(D, {
+      get value() {
+        return e.quantity;
+      },
+      onChange: (l) => {
+        var m;
+        return (m = e.onQuantityChange) == null ? void 0 : m.call(e, l);
+      },
+      min: 1
+    }), i), n(i, () => a(r())), n(t, u(v, {
+      get when() {
+        return e.onRemove;
+      },
+      get children() {
+        var l = Q();
+        return l.$$click = () => {
+          var m;
+          return (m = e.onRemove) == null ? void 0 : m.call(e);
+        }, n(l, u(U, {
+          class: "h-4 w-4"
+        })), l;
+      }
+    }), null), f(() => b(t, h("flex flex-wrap items-center gap-4", e.class))), t;
+  })();
+}
+C(["click"]);
+var X = /* @__PURE__ */ s('<div><div class="my-3 border-t border-border"></div><div class="flex items-center justify-between text-base font-bold text-foreground"><span>Total</span><span class=tabular-nums>'), Z = /* @__PURE__ */ s('<div class="flex items-center justify-between py-1 text-sm"><span class=text-muted-foreground></span><span class="tabular-nums text-foreground">');
+function le(e) {
+  const r = (a) => new Intl.NumberFormat(e.locale ?? "en-US", {
+    style: "currency",
+    currency: e.currency ?? "USD"
+  }).format(a);
+  return (() => {
+    var a = X(), t = a.firstChild, c = t.nextSibling, d = c.firstChild, i = d.nextSibling;
+    return n(a, u(w, {
+      get each() {
+        return e.lines;
+      },
+      children: (l) => (() => {
+        var m = Z(), g = m.firstChild, o = g.nextSibling;
+        return n(g, () => l.label), n(o, () => r(l.amount)), m;
+      })()
+    }), t), n(i, () => r(e.total)), n(a, u(v, {
+      get when() {
+        return e.onCheckout;
+      },
+      get children() {
+        return u(k, {
+          class: "mt-4 w-full",
+          onClick: () => {
+            var l;
+            return (l = e.onCheckout) == null ? void 0 : l.call(e);
+          },
+          get children() {
+            return e.checkoutLabel ?? "Checkout";
+          }
+        });
+      }
+    }), null), f(() => b(a, h("rounded-xl border border-border bg-card p-5", e.class))), a;
+  })();
+}
+var H = /* @__PURE__ */ s('<div><p class="text-sm font-semibold text-foreground"></p><div class=space-y-1.5>'), J = /* @__PURE__ */ s('<span class="text-xs text-muted-foreground">'), K = /* @__PURE__ */ s('<div class="flex items-center justify-between gap-2">');
+function re(e) {
+  const r = (a, t) => {
+    const c = e.selected.slice(), d = c.indexOf(a);
+    t ? d === -1 && c.push(a) : d !== -1 && c.splice(d, 1), e.onChange(c);
+  };
+  return (() => {
+    var a = H(), t = a.firstChild, c = t.nextSibling;
+    return n(t, () => e.title), n(c, u(w, {
+      get each() {
+        return e.options;
+      },
+      children: (d) => (() => {
+        var i = K();
+        return n(i, u(I, {
+          get checked() {
+            return e.selected.includes(d.value);
+          },
+          onChange: (l) => r(d.value, l),
+          get label() {
+            return d.label;
+          }
+        }), null), n(i, u(v, {
+          get when() {
+            return d.count != null;
+          },
+          get children() {
+            var l = J();
+            return n(l, () => d.count), l;
+          }
+        }), null), i;
+      })()
+    })), f(() => b(a, h("space-y-2", e.class))), a;
+  })();
+}
+export {
+  ne as CartLine,
+  le as CartSummary,
+  re as FilterGroup,
+  A as PriceTag,
+  ee as ProductCard,
+  te as ProductGrid,
+  D as QuantityStepper
+};

package/dist/elements.css

@@ -1505,6 +1505,10 @@ html.calm .tile-glass {
   margin-left: auto;
   margin-right: auto;
 }
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
 .-ml-2 {
   margin-left: -0.5rem;
 }
@@ -1538,6 +1542,12 @@ html.calm .tile-glass {
 .mt-6 {
   margin-top: 1.5rem;
 }
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
 .block {
   display: block;
 }
@@ -1568,6 +1578,9 @@ html.calm .tile-glass {
 .hidden {
   display: none;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
 .size-3 {
   width: 0.75rem;
   height: 0.75rem;
@@ -1617,6 +1630,9 @@ html.calm .tile-glass {
 .h-64 {
   height: 16rem;
 }
+.h-7 {
+  height: 1.75rem;
+}
 .h-8 {
   height: 2rem;
 }
@@ -1641,6 +1657,9 @@ html.calm .tile-glass {
 .max-h-48 {
   max-height: 12rem;
 }
+.max-h-56 {
+  max-height: 14rem;
+}
 .max-h-60 {
   max-height: 15rem;
 }
@@ -1701,6 +1720,9 @@ html.calm .tile-glass {
 .w-4 {
   width: 1rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-48 {
   width: 12rem;
 }
@@ -1713,6 +1735,9 @@ html.calm .tile-glass {
 .w-6 {
   width: 1.5rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-72 {
   width: 18rem;
 }
@@ -1743,15 +1768,30 @@ html.calm .tile-glass {
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-32 {
+  min-width: 8rem;
+}
 .min-w-4 {
   min-width: 1rem;
 }
+.min-w-40 {
+  min-width: 10rem;
+}
 .min-w-\[1\.5rem\] {
   min-width: 1.5rem;
 }
 .min-w-\[10rem\] {
   min-width: 10rem;
 }
+.min-w-\[2\.5rem\] {
+  min-width: 2.5rem;
+}
+.min-w-\[4rem\] {
+  min-width: 4rem;
+}
+.min-w-\[8rem\] {
+  min-width: 8rem;
+}
 .max-w-\[520px\] {
   max-width: 520px;
 }
@@ -1861,6 +1901,12 @@ html.calm .tile-glass {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
@@ -1931,11 +1977,21 @@ html.calm .tile-glass {
   margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
 }
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2137,6 +2193,9 @@ html.calm .tile-glass {
 .bg-primary\/15 {
   background-color: hsl(var(--primary) / 0.15);
 }
+.bg-primary\/20 {
+  background-color: hsl(var(--primary) / 0.2);
+}
 .bg-primary\/25 {
   background-color: hsl(var(--primary) / 0.25);
 }
@@ -2297,6 +2356,9 @@ html.calm .tile-glass {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pl-1 {
+  padding-left: 0.25rem;
+}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2490,6 +2552,9 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: rgb(2 132 199 / var(--tw-text-opacity, 1));
 }
+.line-through {
+  text-decoration-line: line-through;
+}
 .accent-foreground {
   accent-color: hsl(var(--foreground) / 1);
 }
@@ -2894,6 +2959,12 @@ html.calm .tile-glass {
     padding-right: 1.5rem;
   }
 }
+@media (min-width: 1024px) {
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
   display: none;
 }