@a4ui/core 0.17.0 → 0.19.0

package/dist/Checkbox-DIzLQltI.js

@@ -0,0 +1,431 @@
+import { spread as v, mergeProps as y, insert as f, createComponent as p, template as m, effect as h, className as $, use as x, delegateEvents as k, setAttribute as C } from "solid-js/web";
+import { splitProps as b, Show as S, createSignal as _, createEffect as K, untrack as F, onCleanup as E, onMount as L, For as B } from "solid-js";
+import { c as g } from "./cn-B6yFEsav.js";
+import { animate as R, inView as Q } from "motion";
+import { Star as D } from "lucide-solid";
+var q = /* @__PURE__ */ m('<span class="relative flex h-1.5 w-1.5"aria-hidden=true><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75"></span><span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current">'), J = /* @__PURE__ */ m("<span>");
+const W = {
+  neutral: "bg-muted text-muted-foreground ring-border",
+  success: "bg-emerald-500/15 text-emerald-600 ring-emerald-500/30",
+  warning: "bg-amber-500/15 text-amber-600 ring-amber-500/30",
+  danger: "bg-rose-500/15 text-rose-600 ring-rose-500/30",
+  info: "bg-sky-500/15 text-sky-600 ring-sky-500/30"
+}, Z = "badge inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset whitespace-nowrap";
+function _e(t) {
+  const [e, n] = b(t, ["tone", "class", "children", "pulse"]);
+  return (() => {
+    var r = J();
+    return v(r, y({
+      get class() {
+        return g(Z, W[e.tone ?? "neutral"], e.class);
+      }
+    }, n), !1, !0), f(r, p(S, {
+      get when() {
+        return e.pulse;
+      },
+      get children() {
+        return q();
+      }
+    }), null), f(r, () => e.children, null), r;
+  })();
+}
+const I = "a4ui-effects";
+function Y() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function ee() {
+  var e;
+  try {
+    if (new URLSearchParams(window.location.search).get("calm") === "1") return !1;
+  } catch {
+  }
+  const t = (e = Y()) == null ? void 0 : e.getItem(I);
+  return t === null ? !0 : t === "1";
+}
+function N(t) {
+  typeof document > "u" || document.documentElement.classList.toggle("calm", !t);
+}
+const U = ee();
+N(U);
+const [z, te] = _(U);
+function Ee() {
+  return z;
+}
+function re() {
+  return !z();
+}
+function Ce(t) {
+  var e;
+  (e = Y()) == null || e.setItem(I, t ? "1" : "0"), N(t), te(t);
+}
+const ne = "(prefers-reduced-motion: reduce)";
+function ae() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(ne).matches;
+}
+const X = "a4ui-motion-forced";
+function j() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+var P;
+const [M, oe] = _(((P = j()) == null ? void 0 : P.getItem(X)) === "1");
+typeof document < "u" && document.documentElement.classList.toggle("force-motion", F(M));
+function ke() {
+  return M;
+}
+function Se(t) {
+  var e;
+  (e = j()) == null || e.setItem(X, t ? "1" : "0"), typeof document < "u" && document.documentElement.classList.toggle("force-motion", t), oe(t);
+}
+function w() {
+  return re() || ae() && !M();
+}
+function Le(t, e = 600) {
+  const [n, r] = _(0);
+  let o;
+  return K(() => {
+    const a = t();
+    if (o == null || o.stop(), w()) {
+      r(a);
+      return;
+    }
+    const i = F(n);
+    i !== a && (o = R(i, a, {
+      duration: e / 1e3,
+      ease: "easeOut",
+      onUpdate: (u) => r(u)
+    }));
+  }), E(() => o == null ? void 0 : o.stop()), n;
+}
+function Re(t, e = {}) {
+  w() || R(
+    t,
+    { opacity: [0, 1], y: [e.y ?? 8, 0] },
+    { duration: e.duration ?? 0.32, delay: e.delay ?? 0, ease: "easeOut" }
+  );
+}
+function Me(t, e = {}) {
+  if (w()) return () => {
+  };
+  t.style.opacity = "0";
+  let n = !1;
+  return Q(
+    t,
+    () => {
+      n || (n = !0, R(
+        t,
+        { opacity: [0, 1], y: [e.y ?? 16, 0] },
+        { duration: e.duration ?? 0.5, ease: "easeOut" }
+      ));
+    },
+    { amount: e.amount ?? 0.2 }
+  );
+}
+var ie = /* @__PURE__ */ m("<span>");
+function G(t, e, n = {}) {
+  if (w()) return;
+  const r = t.getBoundingClientRect(), o = e.clientX - r.left, a = e.clientY - r.top, i = 2 * Math.max(Math.hypot(o, a), Math.hypot(r.width - o, a), Math.hypot(o, r.height - a), Math.hypot(r.width - o, r.height - a)), u = document.createElement("span");
+  u.setAttribute("aria-hidden", "true"), Object.assign(u.style, {
+    position: "absolute",
+    left: `${o}px`,
+    top: `${a}px`,
+    width: `${i}px`,
+    height: `${i}px`,
+    borderRadius: "9999px",
+    background: n.color ?? "currentColor",
+    pointerEvents: "none",
+    transform: "translate(-50%,-50%) scale(0)"
+  }), t.appendChild(u);
+  const s = u.animate([{
+    transform: "translate(-50%,-50%) scale(0)",
+    opacity: String(n.opacity ?? 0.3)
+  }, {
+    transform: "translate(-50%,-50%) scale(1)",
+    opacity: "0"
+  }], {
+    duration: 600,
+    easing: "ease-out"
+  }), l = () => u.remove();
+  s.finished.then(l).catch(l);
+}
+function Ae(t) {
+  let e;
+  const n = (r) => {
+    e && G(e, r, {
+      color: t.color,
+      opacity: t.opacity
+    });
+  };
+  return (() => {
+    var r = ie();
+    r.$$pointerdown = n;
+    var o = e;
+    return typeof o == "function" ? x(o, r) : e = r, f(r, () => t.children), h(() => $(r, g("relative inline-block overflow-hidden", t.class))), r;
+  })();
+}
+k(["pointerdown"]);
+var le = /* @__PURE__ */ m("<a>"), se = /* @__PURE__ */ m("<button>");
+const ce = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "bg-muted text-foreground hover:bg-muted/70",
+  outline: "border border-border bg-transparent text-foreground hover:bg-muted",
+  ghost: "bg-transparent text-foreground hover:bg-muted"
+}, ue = "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-[color,background-color,transform] duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50";
+function Oe(t) {
+  const [e, n] = b(t, ["variant", "class", "type", "children", "ripple", "onPointerDown", "href", "target", "rel"]), r = () => g(ue, ce[e.variant ?? "primary"], e.ripple && "relative overflow-hidden", e.class), o = (a) => {
+    e.ripple && G(a.currentTarget, a, {
+      opacity: 0.35
+    });
+    const i = e.onPointerDown;
+    typeof i == "function" ? i(a) : i && i[0](i[1], a);
+  };
+  return p(S, {
+    get when() {
+      return e.href !== void 0;
+    },
+    get fallback() {
+      return (() => {
+        var a = se();
+        return a.$$pointerdown = o, v(a, y({
+          get type() {
+            return e.type ?? "button";
+          },
+          get class() {
+            return r();
+          }
+        }, n), !1, !0), f(a, () => e.children), a;
+      })();
+    },
+    get children() {
+      var a = le();
+      return a.$$pointerdown = o, v(a, y({
+        get href() {
+          return e.href;
+        },
+        get target() {
+          return e.target;
+        },
+        get rel() {
+          return e.rel;
+        },
+        get class() {
+          return r();
+        }
+      }, n), !1, !0), f(a, () => e.children), a;
+    }
+  });
+}
+k(["pointerdown"]);
+var de = /* @__PURE__ */ m("<div>");
+function V(t, e = {}) {
+  if (w()) return () => {
+  };
+  const n = document.createElement("span");
+  n.setAttribute("aria-hidden", "true"), n.className = "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300", t.appendChild(n);
+  const r = e.size ?? 180, o = e.color ?? "hsl(var(--primary))", a = (l, c) => {
+    n.style.background = `radial-gradient(${r}px circle at ${l}px ${c}px, color-mix(in srgb, ${o} 30%, transparent), transparent 70%)`;
+  }, i = (l) => {
+    const c = t.getBoundingClientRect();
+    a(l.clientX - c.left, l.clientY - c.top);
+  }, u = () => {
+    n.style.opacity = "1";
+  }, s = () => {
+    n.style.opacity = "0";
+  };
+  return t.addEventListener("pointermove", i), t.addEventListener("pointerenter", u), t.addEventListener("pointerleave", s), () => {
+    t.removeEventListener("pointermove", i), t.removeEventListener("pointerenter", u), t.removeEventListener("pointerleave", s), n.remove();
+  };
+}
+function Te(t) {
+  let e;
+  return L(() => {
+    const n = V(e, {
+      color: t.color,
+      size: t.size
+    });
+    E(n);
+  }), (() => {
+    var n = de(), r = e;
+    return typeof r == "function" ? x(r, n) : e = n, f(n, () => t.children), h(() => $(n, g("relative overflow-hidden", t.class))), n;
+  })();
+}
+var fe = /* @__PURE__ */ m("<div style=perspective:800px><div style=transform-style:preserve-3d>");
+function H(t, e, n = {}) {
+  if (w()) return () => {
+  };
+  e.style.willChange = "transform";
+  const r = (a) => {
+    const i = t.getBoundingClientRect(), u = (a.clientX - i.left) / i.width - 0.5, s = (a.clientY - i.top) / i.height - 0.5, l = n.max ?? 10;
+    e.style.transition = "transform 0.15s ease-out", e.style.transform = `perspective(800px) rotateX(${(s * -2 * l).toFixed(2)}deg) rotateY(${(u * 2 * l).toFixed(2)}deg) scale(1.02)`;
+  }, o = () => {
+    e.style.transition = "transform 0.4s ease", e.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)";
+  };
+  return t.addEventListener("pointermove", r), t.addEventListener("pointerleave", o), () => {
+    t.removeEventListener("pointermove", r), t.removeEventListener("pointerleave", o), e.style.transform = "", e.style.transition = "", e.style.willChange = "";
+  };
+}
+function Be(t) {
+  let e, n;
+  return L(() => {
+    const r = H(e, n, {
+      max: t.max
+    });
+    E(r);
+  }), (() => {
+    var r = fe(), o = r.firstChild, a = e;
+    typeof a == "function" ? x(a, r) : e = r;
+    var i = n;
+    return typeof i == "function" ? x(i, o) : n = o, f(o, () => t.children), h(() => $(r, g("inline-block", t.class))), r;
+  })();
+}
+var A = /* @__PURE__ */ m("<div>"), ge = /* @__PURE__ */ m("<h2>");
+function De(t) {
+  const [e, n] = b(t, ["class", "children", "glass", "glow", "tilt", "spotlight"]), r = () => (e.glow ?? e.glass) === !0;
+  let o;
+  return L(() => {
+    const a = [e.tilt && o ? H(o, o) : null, e.spotlight && o ? V(o) : null].filter((i) => i !== null);
+    E(() => a.forEach((i) => i()));
+  }), (() => {
+    var a = A(), i = o;
+    return typeof i == "function" ? x(i, a) : o = a, v(a, y({
+      get class() {
+        return g(e.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", r() && "glow-edge", e.spotlight && "relative overflow-hidden", e.tilt && "will-change-transform", e.class);
+      }
+    }, n), !1, !0), f(a, () => e.children), a;
+  })();
+}
+function Pe(t) {
+  const [e, n] = b(t, ["class", "children"]);
+  return (() => {
+    var r = A();
+    return v(r, y({
+      get class() {
+        return g("flex flex-col space-y-1.5 p-6", e.class);
+      }
+    }, n), !1, !0), f(r, () => e.children), r;
+  })();
+}
+function Fe(t) {
+  const [e, n] = b(t, ["class", "children"]);
+  return (() => {
+    var r = ge();
+    return v(r, y({
+      get class() {
+        return g("text-lg font-semibold leading-none tracking-tight", e.class);
+      }
+    }, n), !1, !0), f(r, () => e.children), r;
+  })();
+}
+function Ie(t) {
+  const [e, n] = b(t, ["class", "children"]);
+  return (() => {
+    var r = A();
+    return v(r, y({
+      get class() {
+        return g("p-6 pt-0", e.class);
+      }
+    }, n), !1, !0), f(r, () => e.children), r;
+  })();
+}
+var me = /* @__PURE__ */ m("<div role=radiogroup>"), he = /* @__PURE__ */ m("<div role=img>"), pe = /* @__PURE__ */ m('<button type=button role=radio class="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40">');
+function Ye(t) {
+  const [e, n] = _(0), r = () => t.max ?? 5, o = () => Array.from({
+    length: r()
+  }, (s, l) => l + 1), a = () => e() > 0 ? e() : t.value, i = (s) => {
+    var l;
+    t.readonly || (l = t.onChange) == null || l.call(t, s);
+  }, u = (s) => g("h-5 w-5 transition-colors", s <= a() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
+  return p(S, {
+    get when() {
+      return !t.readonly;
+    },
+    get fallback() {
+      return (() => {
+        var s = he();
+        return f(s, p(B, {
+          get each() {
+            return o();
+          },
+          children: (l) => p(D, {
+            get class() {
+              return u(l);
+            },
+            "aria-hidden": "true"
+          })
+        })), h((l) => {
+          var c = g("inline-flex items-center gap-1", t.class), d = `Rating ${t.value} of ${r()}`;
+          return c !== l.e && $(s, l.e = c), d !== l.t && C(s, "aria-label", l.t = d), l;
+        }, {
+          e: void 0,
+          t: void 0
+        }), s;
+      })();
+    },
+    get children() {
+      var s = me();
+      return s.addEventListener("mouseleave", () => n(0)), f(s, p(B, {
+        get each() {
+          return o();
+        },
+        children: (l) => (() => {
+          var c = pe();
+          return c.$$keydown = (d) => {
+            d.key === "ArrowRight" || d.key === "ArrowUp" ? (d.preventDefault(), i(Math.min(t.value + 1, r()))) : (d.key === "ArrowLeft" || d.key === "ArrowDown") && (d.preventDefault(), i(Math.max(t.value - 1, 0)));
+          }, c.$$click = () => i(l), c.addEventListener("blur", () => n(0)), c.addEventListener("focus", () => n(l)), c.addEventListener("mouseenter", () => n(l)), f(c, p(D, {
+            get class() {
+              return u(l);
+            },
+            "aria-hidden": "true"
+          })), h((d) => {
+            var O = t.value === l, T = `Rate ${l} of ${r()}`;
+            return O !== d.e && C(c, "aria-checked", d.e = O), T !== d.t && C(c, "aria-label", d.t = T), d;
+          }, {
+            e: void 0,
+            t: void 0
+          }), c;
+        })()
+      })), h(() => $(s, g("inline-flex items-center gap-1", t.class))), s;
+    }
+  });
+}
+k(["click", "keydown"]);
+var ve = /* @__PURE__ */ m('<label><input type=checkbox class="h-4 w-4 rounded border-input accent-primary">');
+function Ne(t) {
+  return (() => {
+    var e = ve(), n = e.firstChild;
+    return n.addEventListener("change", (r) => t.onChange(r.currentTarget.checked)), f(e, () => t.label, null), h(() => $(e, g("inline-flex items-center gap-2 text-sm text-foreground", t.class))), h(() => n.checked = t.checked), e;
+  })();
+}
+export {
+  _e as B,
+  De as C,
+  Ye as R,
+  Te as S,
+  Be as T,
+  Oe as a,
+  Ne as b,
+  Le as c,
+  Ie as d,
+  Re as e,
+  Pe as f,
+  Fe as g,
+  Ce as h,
+  Ae as i,
+  V as j,
+  H as k,
+  re as l,
+  w as m,
+  Se as n,
+  ke as o,
+  ae as p,
+  Me as r,
+  G as s,
+  Ee as u
+};

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';