@a4ui/core 0.17.0 → 0.18.0

package/dist/{Checkbox-DMx0y81E.js → Checkbox-BZjX1GMG.js}

@@ -390,9 +390,9 @@ export {
   Se as c,
   Fe as d,
   Le as e,
-  Ee as f,
-  De as g,
-  Pe as h,
+  De as f,
+  Pe as g,
+  Ee as h,
   Me as i,
   V as j,
   H as k,

package/dist/commerce/createCart.d.ts

@@ -0,0 +1,53 @@
+import { Accessor } from 'solid-js';
+export interface CartProduct {
+    id: string | number;
+    price: number;
+}
+export interface CartEntry<T extends CartProduct> {
+    product: T;
+    qty: number;
+}
+export interface Cart<T extends CartProduct> {
+    /** Reactive list of cart entries. */
+    items: Accessor<CartEntry<T>[]>;
+    /** Add a product, or increment its `qty` if it's already in the cart. */
+    add: (product: T, qty?: number) => void;
+    /** Remove a product from the cart by id. */
+    remove: (id: T['id']) => void;
+    /** Set a product's quantity. `qty <= 0` removes the entry. */
+    setQty: (id: T['id'], qty: number) => void;
+    /** Empty the cart. */
+    clear: () => void;
+    /** Total number of units across all entries. */
+    count: () => number;
+    /** Sum of `price * qty` across all entries. */
+    subtotal: () => number;
+    /** Whether a product with this id is currently in the cart. */
+    has: (id: T['id']) => boolean;
+}
+/**
+ * Create a signal-backed shopping cart store, generic over the product type.
+ * `count()` and `subtotal()` are memoized and stay in sync with `items()`.
+ *
+ * @example
+ * ```ts
+ * interface Product extends CartProduct {
+ *   id: string
+ *   price: number
+ *   title: string
+ * }
+ *
+ * const cart = createCart<Product>()
+ *
+ * cart.add({ id: 'sku-1', price: 29.99, title: 'Wireless Mouse' })
+ * cart.add({ id: 'sku-1', price: 29.99, title: 'Wireless Mouse' }) // qty -> 2
+ * cart.setQty('sku-1', 3)
+ *
+ * cart.count()    // 3
+ * cart.subtotal() // 89.97
+ *
+ * cart.remove('sku-1')
+ * cart.has('sku-1') // false
+ * ```
+ */
+export declare function createCart<T extends CartProduct>(initial?: CartEntry<T>[]): Cart<T>;

package/dist/commerce/index.d.ts

@@ -5,3 +5,4 @@ export { ProductGrid, type ProductGridProps } from './ProductGrid';
 export { CartLine, type CartLineProps } from './CartLine';
 export { CartSummary, type CartSummaryProps, type CartSummaryItem } from './CartSummary';
 export { FilterGroup, type FilterGroupProps, type FacetOption } from './FilterGroup';
+export { createCart, type Cart, type CartProduct, type CartEntry } from './createCart';

package/dist/commerce.js

@@ -1,78 +1,78 @@
-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-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 = {
+import { insert as l, createComponent as d, memo as I, effect as b, className as $, template as g, delegateEvents as S, setAttribute as y } from "solid-js/web";
+import { Show as h, For as k, createSignal as N, createMemo as C } from "solid-js";
+import { c as x } from "./cn-B6yFEsav.js";
+import { B as q, C as E, R, a as A, b as F } from "./Checkbox-BZjX1GMG.js";
+import { Minus as M, Plus as P, Trash2 as U } from "lucide-solid";
+var j = /* @__PURE__ */ g('<span class="text-muted-foreground line-through">'), B = /* @__PURE__ */ g("<div><span>");
+const D = {
   sm: "text-sm",
   md: "text-lg",
   lg: "text-2xl"
 };
-function k(e) {
-  const r = (u) => new Intl.NumberFormat(e.locale ?? "en-US", {
+function T(e) {
+  const n = (a) => new Intl.NumberFormat(e.locale ?? "en-US", {
     style: "currency",
     currency: e.currency ?? "USD"
-  }).format(u), l = () => (e.compareAt ?? 0) > e.amount, t = () => Math.round((1 - e.amount / e.compareAt) * 100);
+  }).format(a), r = () => (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, i(s, {
+    var a = B(), o = a.firstChild;
+    return l(o, () => n(e.amount)), l(a, d(h, {
       get when() {
-        return l();
+        return r();
       },
       get children() {
         return [(() => {
-          var c = j();
-          return n(c, () => r(e.compareAt)), c;
-        })(), i(T, {
+          var u = j();
+          return l(u, () => n(e.compareAt)), u;
+        })(), d(q, {
           tone: "danger",
           get children() {
-            return ["-", A(() => t()), "%"];
+            return ["-", I(() => t()), "%"];
           }
         })];
       }
-    }), 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 !== c.e && b(u, c.e = a), m !== c.t && b(d, c.t = m), c;
+    }), null), b((u) => {
+      var c = x("inline-flex items-center gap-2", e.class), s = x("font-bold text-foreground", D[e.size ?? "md"]);
+      return c !== u.e && $(a, u.e = c), s !== u.t && $(o, u.t = s), u;
     }, {
       e: void 0,
       t: void 0
-    }), u;
+    }), a;
   })();
 }
-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 = (c) => Math.min(l(), Math.max(r(), c)), u = () => e.onChange(t(e.value - 1)), d = () => e.onChange(t(e.value + 1));
+var L = /* @__PURE__ */ g('<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 z(e) {
+  const n = () => e.min ?? 0, r = () => e.max ?? Number.MAX_SAFE_INTEGER, t = (u) => Math.min(r(), Math.max(n(), u)), a = () => e.onChange(t(e.value - 1)), o = () => e.onChange(t(e.value + 1));
   return (() => {
-    var c = M(), a = c.firstChild, m = a.nextSibling, f = m.nextSibling;
-    return a.$$click = u, n(a, i(R, {
+    var u = L(), c = u.firstChild, s = c.nextSibling, f = s.nextSibling;
+    return c.$$click = a, l(c, d(M, {
       class: "h-4 w-4"
-    })), n(m, () => e.value), f.$$click = d, n(f, i(F, {
+    })), l(s, () => e.value), f.$$click = o, l(f, d(P, {
       class: "h-4 w-4"
-    })), 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 $ !== g.e && b(c, g.e = $), _ !== g.t && (a.disabled = g.t = _), w !== g.a && (f.disabled = g.a = w), g;
+    })), b((i) => {
+      var m = x("inline-flex items-stretch rounded-md border border-input", e.class), v = e.disabled || e.value <= n(), _ = e.disabled || e.value >= r();
+      return m !== i.e && $(u, i.e = m), v !== i.t && (c.disabled = i.t = v), _ !== i.a && (f.disabled = i.a = _), i;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), c;
+    }), u;
   })();
 }
-y(["click"]);
-var D = /* @__PURE__ */ o("<span>"), L = /* @__PURE__ */ o('<div class="relative aspect-square overflow-hidden rounded-lg bg-muted"><img loading=lazy class="h-full w-full object-cover">', !0, !1, !1), z = /* @__PURE__ */ o('<span class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">'), G = /* @__PURE__ */ o('<span class="w-fit rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">'), O = /* @__PURE__ */ o('<div class="mt-3 flex flex-1 flex-col gap-1.5"><p class="line-clamp-1 font-medium text-foreground">');
-const Q = {
+S(["click"]);
+var G = /* @__PURE__ */ g("<span>"), O = /* @__PURE__ */ g('<div class="relative aspect-square overflow-hidden rounded-lg bg-muted"><img loading=lazy class="h-full w-full object-cover">', !0, !1, !1), Q = /* @__PURE__ */ g('<span class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">'), X = /* @__PURE__ */ g('<span class="w-fit rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">'), Z = /* @__PURE__ */ g('<div class="mt-3 flex flex-1 flex-col gap-1.5"><p class="line-clamp-1 font-medium text-foreground">');
+const H = {
   sale: "bg-destructive text-destructive-foreground",
   new: "bg-primary text-primary-foreground",
   featured: "bg-accent text-accent-foreground"
 };
-function X(e, r) {
-  if (r) return r;
-  const l = (e ?? "").toLowerCase();
-  return /sale|off|%|deal/.test(l) ? "sale" : /new/.test(l) ? "new" : "featured";
+function J(e, n) {
+  if (n) return n;
+  const r = (e ?? "").toLowerCase();
+  return /sale|off|%|deal/.test(r) ? "sale" : /new/.test(r) ? "new" : "featured";
 }
-function ue(e) {
-  return i(N, {
+function de(e) {
+  return d(E, {
     glass: !0,
     glow: !0,
     get tilt() {
@@ -82,50 +82,50 @@ function ue(e) {
       return e.spotlight;
     },
     get class() {
-      return h("flex h-full flex-col overflow-hidden p-4", e.class);
+      return x("flex h-full flex-col overflow-hidden p-4", e.class);
     },
     get children() {
       return [(() => {
-        var r = L(), l = r.firstChild;
-        return n(r, i(s, {
+        var n = O(), r = n.firstChild;
+        return l(n, d(h, {
           get when() {
             return e.badge;
           },
           get children() {
-            var t = D();
-            return n(t, () => e.badge), v(() => b(t, h("absolute -right-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md", Q[X(e.badge, e.badgeTone)]))), t;
+            var t = G();
+            return l(t, () => e.badge), b(() => $(t, x("absolute -right-9 top-3.5 w-32 rotate-45 py-1 text-center text-[11px] font-semibold uppercase tracking-wide shadow-md", H[J(e.badge, e.badgeTone)]))), t;
           }
-        }), null), v((t) => {
-          var u = e.image, d = e.title;
-          return u !== t.e && x(l, "src", t.e = u), d !== t.t && x(l, "alt", t.t = d), t;
+        }), null), b((t) => {
+          var a = e.image, o = e.title;
+          return a !== t.e && y(r, "src", t.e = a), o !== t.t && y(r, "alt", t.t = o), t;
         }, {
           e: void 0,
           t: void 0
-        }), r;
+        }), n;
       })(), (() => {
-        var r = O(), l = r.firstChild;
-        return n(r, i(s, {
+        var n = Z(), r = n.firstChild;
+        return l(n, d(h, {
           get when() {
             return e.brand;
           },
           get children() {
-            var t = z();
-            return n(t, () => e.brand), t;
+            var t = Q();
+            return l(t, () => e.brand), t;
           }
-        }), l), n(l, () => e.title), n(r, i(s, {
+        }), r), l(r, () => e.title), l(n, d(h, {
           get when() {
             return e.category;
           },
           get children() {
-            var t = G();
-            return n(t, () => e.category), t;
+            var t = X();
+            return l(t, () => e.category), t;
           }
-        }), null), n(r, i(s, {
+        }), null), l(n, d(h, {
           get when() {
             return e.rating !== void 0;
           },
           get children() {
-            return i(E, {
+            return d(R, {
               get value() {
                 return e.rating;
               },
@@ -133,7 +133,7 @@ function ue(e) {
               max: 5
             });
           }
-        }), null), n(r, i(k, {
+        }), null), l(n, d(T, {
           get amount() {
             return e.price;
           },
@@ -146,55 +146,55 @@ function ue(e) {
           get locale() {
             return e.locale;
           }
-        }), null), n(r, i(s, {
+        }), null), l(n, d(h, {
           get when() {
             return e.onAddToCart;
           },
           get children() {
-            return i(S, {
+            return d(A, {
               class: "mt-auto w-full",
-              onClick: () => {
-                var t;
-                return (t = e.onAddToCart) == null ? void 0 : t.call(e);
+              onClick: (t) => {
+                var a;
+                t.stopPropagation(), (a = e.onAddToCart) == null || a.call(e);
               },
               children: "Add to cart"
             });
           }
-        }), null), r;
+        }), null), n;
       })()];
     }
   });
 }
-var Z = /* @__PURE__ */ o("<div>");
-function ie(e) {
+var K = /* @__PURE__ */ g("<div>");
+function oe(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 n = K();
+    return l(n, () => e.children), b(() => $(n, x("grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", e.class))), n;
   })();
 }
-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 ce(e) {
-  const r = () => e.price * e.quantity, l = (t) => new Intl.NumberFormat(e.locale ?? "en-US", {
+var V = /* @__PURE__ */ g('<img class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover">'), W = /* @__PURE__ */ g('<button type=button aria-label="Remove item"class="text-muted-foreground hover:text-foreground">'), Y = /* @__PURE__ */ g('<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 se(e) {
+  const n = () => e.price * e.quantity, r = (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, c = u.nextSibling;
-    return n(t, i(s, {
+    var t = Y(), a = t.firstChild, o = a.firstChild, u = a.nextSibling;
+    return l(t, d(h, {
       get when() {
         return e.image;
       },
       get children() {
-        var a = H();
-        return v((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;
+        var c = V();
+        return b((s) => {
+          var f = e.image, i = e.title;
+          return f !== s.e && y(c, "src", s.e = f), i !== s.t && y(c, "alt", s.t = i), s;
         }, {
           e: void 0,
           t: void 0
-        }), a;
+        }), c;
       }
-    }), u), n(d, () => e.title), n(u, i(k, {
+    }), a), l(o, () => e.title), l(a, d(T, {
       get amount() {
         return e.price;
       },
@@ -205,108 +205,129 @@ function ce(e) {
         return e.locale;
       },
       size: "sm"
-    }), null), n(t, i(P, {
+    }), null), l(t, d(z, {
       get value() {
         return e.quantity;
       },
-      onChange: (a) => {
-        var m;
-        return (m = e.onQuantityChange) == null ? void 0 : m.call(e, a);
+      onChange: (c) => {
+        var s;
+        return (s = e.onQuantityChange) == null ? void 0 : s.call(e, c);
       },
       min: 1
-    }), c), n(c, () => l(r())), n(t, i(s, {
+    }), u), l(u, () => r(n())), l(t, d(h, {
       get when() {
         return e.onRemove;
       },
       get children() {
-        var a = J();
-        return a.$$click = () => {
-          var m;
-          return (m = e.onRemove) == null ? void 0 : m.call(e);
-        }, n(a, i(U, {
+        var c = W();
+        return c.$$click = () => {
+          var s;
+          return (s = e.onRemove) == null ? void 0 : s.call(e);
+        }, l(c, d(U, {
           class: "h-4 w-4"
-        })), a;
+        })), c;
       }
-    }), null), v(() => b(t, h("flex flex-wrap items-center gap-4", e.class))), t;
+    }), null), b(() => $(t, x("flex flex-wrap items-center gap-4", e.class))), t;
   })();
 }
-y(["click"]);
-var V = /* @__PURE__ */ o('<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>'), W = /* @__PURE__ */ o('<div class="flex items-center justify-between py-1 text-sm"><span class=text-muted-foreground></span><span class="tabular-nums text-foreground">');
-function de(e) {
-  const r = (l) => new Intl.NumberFormat(e.locale ?? "en-US", {
+S(["click"]);
+var p = /* @__PURE__ */ g('<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>'), ee = /* @__PURE__ */ g('<div class="flex items-center justify-between py-1 text-sm"><span class=text-muted-foreground></span><span class="tabular-nums text-foreground">');
+function me(e) {
+  const n = (r) => new Intl.NumberFormat(e.locale ?? "en-US", {
     style: "currency",
     currency: e.currency ?? "USD"
-  }).format(l);
+  }).format(r);
   return (() => {
-    var l = V(), t = l.firstChild, u = t.nextSibling, d = u.firstChild, c = d.nextSibling;
-    return n(l, i(C, {
+    var r = p(), t = r.firstChild, a = t.nextSibling, o = a.firstChild, u = o.nextSibling;
+    return l(r, d(k, {
       get each() {
         return e.lines;
       },
-      children: (a) => (() => {
-        var m = W(), f = m.firstChild, g = f.nextSibling;
-        return n(f, () => a.label), n(g, () => r(a.amount)), m;
+      children: (c) => (() => {
+        var s = ee(), f = s.firstChild, i = f.nextSibling;
+        return l(f, () => c.label), l(i, () => n(c.amount)), s;
       })()
-    }), t), n(c, () => r(e.total)), n(l, i(s, {
+    }), t), l(u, () => n(e.total)), l(r, d(h, {
       get when() {
         return e.onCheckout;
       },
       get children() {
-        return i(S, {
+        return d(A, {
           class: "mt-4 w-full",
           onClick: () => {
-            var a;
-            return (a = e.onCheckout) == null ? void 0 : a.call(e);
+            var c;
+            return (c = e.onCheckout) == null ? void 0 : c.call(e);
           },
           get children() {
             return e.checkoutLabel ?? "Checkout";
           }
         });
       }
-    }), null), v(() => b(l, h("card glow-edge rounded-xl p-5 text-card-foreground", e.class))), l;
+    }), null), b(() => $(r, x("card glow-edge rounded-xl p-5 text-card-foreground", e.class))), r;
   })();
 }
-var Y = /* @__PURE__ */ o('<div><p class="text-sm font-semibold text-foreground"></p><div class=space-y-1.5>'), p = /* @__PURE__ */ o('<span class="text-xs text-muted-foreground">'), ee = /* @__PURE__ */ o('<div class="flex items-center justify-between gap-2">');
-function me(e) {
-  const r = (l, t) => {
-    const u = e.selected.slice(), d = u.indexOf(l);
-    t ? d === -1 && u.push(l) : d !== -1 && u.splice(d, 1), e.onChange(u);
+var te = /* @__PURE__ */ g('<div><p class="text-sm font-semibold text-foreground"></p><div class=space-y-1.5>'), ne = /* @__PURE__ */ g('<span class="text-xs text-muted-foreground">'), re = /* @__PURE__ */ g('<div class="flex items-center justify-between gap-2">');
+function ge(e) {
+  const n = (r, t) => {
+    const a = e.selected.slice(), o = a.indexOf(r);
+    t ? o === -1 && a.push(r) : o !== -1 && a.splice(o, 1), e.onChange(a);
   };
   return (() => {
-    var l = Y(), t = l.firstChild, u = t.nextSibling;
-    return n(t, () => e.title), n(u, i(C, {
+    var r = te(), t = r.firstChild, a = t.nextSibling;
+    return l(t, () => e.title), l(a, d(k, {
       get each() {
         return e.options;
       },
-      children: (d) => (() => {
-        var c = ee();
-        return n(c, i(I, {
+      children: (o) => (() => {
+        var u = re();
+        return l(u, d(F, {
           get checked() {
-            return e.selected.includes(d.value);
+            return e.selected.includes(o.value);
           },
-          onChange: (a) => r(d.value, a),
+          onChange: (c) => n(o.value, c),
           get label() {
-            return d.label;
+            return o.label;
           }
-        }), null), n(c, i(s, {
+        }), null), l(u, d(h, {
           get when() {
-            return d.count != null;
+            return o.count != null;
           },
           get children() {
-            var a = p();
-            return n(a, () => d.count), a;
+            var c = ne();
+            return l(c, () => o.count), c;
           }
-        }), null), c;
+        }), null), u;
       })()
-    })), v(() => b(l, h("space-y-2", e.class))), l;
+    })), b(() => $(r, x("space-y-2", e.class))), r;
   })();
 }
+function fe(e = []) {
+  const [n, r] = N(e), t = (i, m = 1) => {
+    r((v) => v.find((w) => w.product.id === i.id) ? v.map(
+      (w) => w.product.id === i.id ? { ...w, qty: w.qty + m } : w
+    ) : [...v, { product: i, qty: m }]);
+  }, a = (i) => {
+    r((m) => m.filter((v) => v.product.id !== i));
+  }, o = (i, m) => {
+    if (m <= 0) {
+      a(i);
+      return;
+    }
+    r((v) => v.map((_) => _.product.id === i ? { ..._, qty: m } : _));
+  }, u = () => {
+    r([]);
+  }, c = C(() => n().reduce((i, m) => i + m.qty, 0)), s = C(
+    () => n().reduce((i, m) => i + m.product.price * m.qty, 0)
+  );
+  return { items: n, add: t, remove: a, setQty: o, clear: u, count: c, subtotal: s, has: (i) => n().some((m) => m.product.id === i) };
+}
 export {
-  ce as CartLine,
-  de as CartSummary,
-  me as FilterGroup,
-  k as PriceTag,
-  ue as ProductCard,
-  ie as ProductGrid,
-  P as QuantityStepper
+  se as CartLine,
+  me as CartSummary,
+  ge as FilterGroup,
+  T as PriceTag,
+  de as ProductCard,
+  oe as ProductGrid,
+  z as QuantityStepper,
+  fe as createCart
 };