react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/chunks/Badge-CHkR__dT.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsxs as t, jsx as d } from "react/jsx-runtime";
+function r({ variant: e = "default", dot: a = !1, pulse: s = !1, className: l, children: o, ...n }) {
+  return /* @__PURE__ */ t("span", { ...n, className: ["badge", `badge--${e}`, l].filter(Boolean).join(" "), children: [
+    a && /* @__PURE__ */ d("span", { className: ["badge__dot", s && "badge__dot--pulse"].filter(Boolean).join(" ") }),
+    o
+  ] });
+}
+export {
+  r as B
+};

package/dist/chunks/CartPageList-DvsbjjCi.js

@@ -0,0 +1,331 @@
+"use client";
+import { jsx as e, Fragment as G, jsxs as t } from "react/jsx-runtime";
+import { useRef as Q, useEffect as V } from "react";
+import { f as j, c as J, p as Y } from "./cart-store-u-ScUvte.js";
+function z(i, n) {
+  var A;
+  const o = Array.from(i.querySelectorAll("[data-product]"));
+  o.forEach((d, h) => {
+    d.dataset.index === void 0 && (d.dataset.index = String(h));
+  });
+  let r = 0;
+  for (const d of o) {
+    const h = d.dataset, y = (h.colors || "").split(",").filter(Boolean), k = (!n.categories.length || n.categories.includes(h.category || "")) && Number(h.price) <= n.maxPrice && Number(h.rating || 0) >= n.minRating && (!n.inStockOnly || h.stock === "in") && (!n.colors.length || n.colors.some((c) => y.includes(c))), O = d.parentElement === i ? d : d.closest(`#${CSS.escape(i.id)} > *`) ?? d;
+    O.hidden = !k, k && r++;
+  }
+  const b = o.map((d) => ({ card: d, item: d.parentElement === i ? d : d.closest(`#${CSS.escape(i.id)} > *`) ?? d }));
+  b.sort((d, h) => {
+    const y = d.card.dataset, k = h.card.dataset;
+    switch (n.sort) {
+      case "price-asc":
+        return Number(y.price) - Number(k.price);
+      case "price-desc":
+        return Number(k.price) - Number(y.price);
+      case "rating":
+        return Number(k.rating) - Number(y.rating);
+      case "name":
+        return (y.name || "").localeCompare(k.name || "");
+      default:
+        return Number(y.index) - Number(k.index);
+    }
+  }), i.append(...b.map((d) => d.item));
+  const _ = (A = i.parentElement) == null ? void 0 : A.querySelector("[data-product-empty]");
+  return _ && (_.hidden = r > 0), document.querySelectorAll(`[data-result-count="${i.id}"]`).forEach((d) => {
+    d.textContent = String(r);
+  }), r;
+}
+function K(i) {
+  const n = new URL(window.location.href);
+  i.categories.length ? n.searchParams.set("category", i.categories.join(",")) : n.searchParams.delete("category"), i.sort && i.sort !== "featured" ? n.searchParams.set("sort", i.sort) : n.searchParams.delete("sort"), window.history.replaceState(null, "", n);
+}
+function H(...i) {
+  const n = [], o = (r) => {
+    if (r) {
+      if (typeof r == "string" || typeof r == "number") n.push(String(r));
+      else if (Array.isArray(r)) r.forEach(o);
+      else if (typeof r == "object")
+        for (const [b, _] of Object.entries(r)) _ && n.push(b);
+    }
+  };
+  return i.forEach(o), n.join(" ");
+}
+function X(i) {
+  const n = {};
+  for (const o of String(i ?? "").split(";")) {
+    const r = o.indexOf(":");
+    if (r < 0) continue;
+    const b = o.slice(0, r).trim();
+    b && (n[b.startsWith("--") ? b : b.replace(/-([a-z])/g, (_, A) => A.toUpperCase())] = o.slice(r + 1).trim());
+  }
+  return n;
+}
+function ne({
+  target: i = "product-grid",
+  categories: n = [
+    { id: "clothing", name: "Clothing", count: 5 },
+    { id: "shoes", name: "Shoes", count: 2 },
+    { id: "bags", name: "Bags", count: 2 },
+    { id: "objects", name: "Objects", count: 3 }
+  ],
+  selected: o = [],
+  maxPrice: r = 400,
+  colors: b = [
+    { name: "Oat", hex: "#d9cbb3" },
+    { name: "Ink", hex: "#22252b" },
+    { name: "Rust", hex: "#9c3d1c" },
+    { name: "Sage", hex: "#8a9a7b" }
+  ],
+  total: _ = 0,
+  allLabel: A = "All",
+  countLabel: d = "products",
+  currency: h = "EUR",
+  locale: y = "en-GB",
+  sticky: k = !0,
+  variant: O = "line",
+  id: c = "filter-bar",
+  className: x = ""
+}) {
+  const $ = { currency: h, locale: y }, w = Q(!1);
+  return V(() => {
+    w.current || (w.current = !0, document.querySelectorAll("[data-filter-bar]:not([data-bound])").forEach((l) => {
+      var p;
+      l.dataset.bound = "";
+      const L = document.getElementById(l.dataset.target || "");
+      if (!L) return;
+      const T = L, M = Array.from(l.querySelectorAll("[data-chip]")), q = l.querySelector("[data-panel]"), B = l.querySelector("[data-refine]"), P = l.querySelector("[data-sort]"), W = l.querySelector("[data-active]"), F = l.querySelector("[data-price-out]"), D = q.elements.namedItem("max"), m = { currency: l.dataset.currency, locale: l.dataset.locale }, U = new URLSearchParams(window.location.search);
+      let f = (U.get("category") || "").split(",").filter(Boolean);
+      f.length || (f = M.filter((s) => s.dataset.chip && s.getAttribute("aria-pressed") === "true").map((s) => s.dataset.chip)), U.get("sort") && (P.value = U.get("sort"));
+      function a() {
+        const s = new FormData(q), u = Number(s.get("max")), g = s.getAll("color"), E = s.get("stock") === "in";
+        M.forEach((N) => {
+          const I = N.dataset.chip;
+          N.setAttribute("aria-pressed", String(I ? f.includes(I) : f.length === 0));
+        }), z(T, { categories: f, colors: g, maxPrice: u, minRating: 0, inStockOnly: E, sort: P.value }), K({ categories: f, sort: P.value }), F && (F.textContent = j(u, m));
+        const R = g.length + (E ? 1 : 0) + (u < Number(D.max) ? 1 : 0);
+        W.hidden = R === 0, W.textContent = String(R);
+      }
+      M.forEach((s) => s.addEventListener("click", () => {
+        const u = s.dataset.chip;
+        u ? f = f.includes(u) ? f.filter((g) => g !== u) : [...f, u] : f = [], a();
+      }));
+      const S = (s) => {
+        q.hidden = !s, B.setAttribute("aria-expanded", String(s));
+      };
+      B.addEventListener("click", () => S(q.hidden)), (p = l.querySelector("[data-close]")) == null || p.addEventListener("click", () => {
+        S(!1), B.focus();
+      }), l.addEventListener("keydown", (s) => {
+        s.key === "Escape" && !q.hidden && (S(!1), B.focus());
+      }), q.addEventListener("input", a), q.addEventListener("reset", () => window.setTimeout(a, 0)), P.addEventListener("change", a), a();
+    }));
+  }, []), /* @__PURE__ */ e(G, { children: /* @__PURE__ */ t("div", { className: H(["fbar", `fbar--${O}`, { "fbar--sticky": k }, x]), "data-filter-bar": !0, "data-target": i, "data-currency": h, "data-locale": y, "data-rk-aeb6ec": "", children: [
+    /* @__PURE__ */ t("div", { className: "fbar__row", "data-rk-aeb6ec": "", children: [
+      /* @__PURE__ */ t("div", { className: "fbar__chips", role: "group", "aria-label": "Categories", "data-rk-aeb6ec": "", children: [
+        /* @__PURE__ */ e("button", { type: "button", className: "fbar__chip", "data-chip": "", "aria-pressed": o.length === 0 ? "true" : "false", "data-rk-aeb6ec": "", children: A }),
+        n.map((l, L) => /* @__PURE__ */ t("button", { type: "button", className: "fbar__chip", "data-chip": l.id, "aria-pressed": o.includes(l.id) ? "true" : "false", "data-rk-aeb6ec": "", children: [
+          l.name,
+          l.count !== void 0 && /* @__PURE__ */ e("sup", { "data-rk-aeb6ec": "", children: l.count })
+        ] }, L))
+      ] }),
+      /* @__PURE__ */ t("div", { className: "fbar__tools", "data-rk-aeb6ec": "", children: [
+        /* @__PURE__ */ t("p", { className: "fbar__count", "aria-live": "polite", "data-rk-aeb6ec": "", children: [
+          /* @__PURE__ */ e("span", { "data-result-count": i, "data-rk-aeb6ec": "", children: _ }),
+          " ",
+          d
+        ] }),
+        /* @__PURE__ */ t("button", { type: "button", className: "fbar__refine", "aria-expanded": "false", "aria-controls": `${c}-panel`, "data-refine": !0, "data-rk-aeb6ec": "", children: [
+          /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", "data-rk-aeb6ec": "", children: [
+            /* @__PURE__ */ e("path", { d: "M4 7h10M18 7h2M4 17h4M12 17h8", "data-rk-aeb6ec": "" }),
+            /* @__PURE__ */ e("circle", { cx: "16", cy: "7", r: "2", "data-rk-aeb6ec": "" }),
+            /* @__PURE__ */ e("circle", { cx: "10", cy: "17", r: "2", "data-rk-aeb6ec": "" })
+          ] }),
+          "Refine ",
+          /* @__PURE__ */ e("span", { className: "fbar__badge", "data-active": !0, hidden: !0, "data-rk-aeb6ec": "" })
+        ] }),
+        /* @__PURE__ */ t("label", { className: "fbar__sort", "data-rk-aeb6ec": "", children: [
+          /* @__PURE__ */ e("span", { className: "sr-only", "data-rk-aeb6ec": "", children: "Sort by" }),
+          /* @__PURE__ */ t("select", { "data-sort": !0, "data-rk-aeb6ec": "", children: [
+            /* @__PURE__ */ e("option", { value: "featured", "data-rk-aeb6ec": "", children: "Featured" }),
+            /* @__PURE__ */ e("option", { value: "price-asc", "data-rk-aeb6ec": "", children: "Price, low to high" }),
+            /* @__PURE__ */ e("option", { value: "price-desc", "data-rk-aeb6ec": "", children: "Price, high to low" }),
+            /* @__PURE__ */ e("option", { value: "name", "data-rk-aeb6ec": "", children: "Alphabetical" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("form", { className: "fbar__panel", id: `${c}-panel`, hidden: !0, "data-panel": !0, "aria-label": "Refine products", "data-rk-aeb6ec": "", children: [
+      /* @__PURE__ */ t("fieldset", { "data-rk-aeb6ec": "", children: [
+        /* @__PURE__ */ e("legend", { "data-rk-aeb6ec": "", children: "Price" }),
+        /* @__PURE__ */ t("label", { className: "fbar__range", "data-rk-aeb6ec": "", children: [
+          /* @__PURE__ */ t("span", { "data-rk-aeb6ec": "", children: [
+            "Up to ",
+            /* @__PURE__ */ e("output", { "data-price-out": !0, "data-rk-aeb6ec": "", children: j(r, $) })
+          ] }),
+          /* @__PURE__ */ e("input", { type: "range", name: "max", min: "0", max: r, step: "5", defaultValue: r, "aria-label": "Maximum price", "data-rk-aeb6ec": "" })
+        ] })
+      ] }),
+      b.length > 0 && /* @__PURE__ */ t("fieldset", { "data-rk-aeb6ec": "", children: [
+        /* @__PURE__ */ e("legend", { "data-rk-aeb6ec": "", children: "Colour" }),
+        /* @__PURE__ */ e("div", { className: "fbar__colors", "data-rk-aeb6ec": "", children: b.map((l, L) => /* @__PURE__ */ t("label", { className: "fbar__color", style: X(`--sw: ${l.hex}`), "data-rk-aeb6ec": "", children: [
+          /* @__PURE__ */ e("input", { type: "checkbox", name: "color", defaultValue: l.name.toLowerCase(), "data-rk-aeb6ec": "" }),
+          /* @__PURE__ */ e("span", { "aria-hidden": "true", "data-rk-aeb6ec": "" }),
+          l.name
+        ] }, L)) })
+      ] }),
+      /* @__PURE__ */ t("fieldset", { "data-rk-aeb6ec": "", children: [
+        /* @__PURE__ */ e("legend", { "data-rk-aeb6ec": "", children: "Availability" }),
+        /* @__PURE__ */ t("label", { className: "fbar__check", "data-rk-aeb6ec": "", children: [
+          /* @__PURE__ */ e("input", { type: "checkbox", name: "stock", defaultValue: "in", "data-rk-aeb6ec": "" }),
+          " ",
+          /* @__PURE__ */ e("span", { "data-rk-aeb6ec": "", children: "In stock only" })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "fbar__panel-actions", "data-rk-aeb6ec": "", children: [
+        /* @__PURE__ */ e("button", { type: "reset", className: "fbar__link", "data-rk-aeb6ec": "", children: "Clear filters" }),
+        /* @__PURE__ */ e("button", { type: "button", className: "fbar__done", "data-close": !0, "data-rk-aeb6ec": "", children: "Show results" })
+      ] })
+    ] })
+  ] }) });
+}
+function Z(...i) {
+  const n = [], o = (r) => {
+    if (r) {
+      if (typeof r == "string" || typeof r == "number") n.push(String(r));
+      else if (Array.isArray(r)) r.forEach(o);
+      else if (typeof r == "object")
+        for (const [b, _] of Object.entries(r)) _ && n.push(b);
+    }
+  };
+  return i.forEach(o), n.join(" ");
+}
+function ce({
+  cartKey: i = "ack-cart",
+  title: n = "Your bag",
+  checkoutHref: o = "#",
+  continueHref: r = "#",
+  freeShippingThreshold: b = 150,
+  shippingFlat: _ = 8,
+  currency: A = "EUR",
+  locale: d = "en-GB",
+  demoItems: h = [],
+  variant: y = "editorial",
+  className: k = ""
+}) {
+  const O = Q(!1);
+  return V(() => {
+    O.current || (O.current = !0, document.querySelectorAll("[data-bag]:not([data-bound])").forEach((c) => {
+      c.dataset.bound = "";
+      const x = J(c.dataset.key), $ = { currency: c.dataset.currency, locale: c.dataset.locale }, w = Number(c.dataset.free) || 0, l = Number(c.dataset.ship) || 0, L = c.querySelector("[data-lines]"), T = c.querySelector("[data-empty]"), M = c.querySelector("[data-summary]"), q = c.querySelector(".bag__cols"), B = c.querySelector("[data-note-wrap]"), P = c.querySelector("[data-note]"), W = c.querySelector("#bag-title"), F = (a) => c.querySelector(`[data-t="${a}"]`), D = `${x.key}:note`;
+      if (c.dataset.seed)
+        try {
+          x.seed(JSON.parse(c.dataset.seed));
+        } catch {
+        }
+      try {
+        P.value = window.localStorage.getItem(D) || "";
+      } catch {
+      }
+      P.addEventListener("input", () => {
+        try {
+          window.localStorage.setItem(D, P.value);
+        } catch {
+        }
+      });
+      const m = (a, S, p) => {
+        const s = document.createElement(a);
+        return s.className = S, p !== void 0 && (s.textContent = p), s;
+      };
+      function U(a, S, p) {
+        const s = m("li", "bag-line"), u = m("div", "bag-line__media");
+        u.style.setProperty("--h", String(a.hue ?? 30)), u.innerHTML = a.image ? `<img src="${encodeURI(a.image)}" alt="">` : `<svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${Y(a.icon)}</svg>`;
+        const g = m("div", "bag-line__info");
+        g.append(m("p", "bag-line__name", a.name)), a.variant && g.append(m("p", "bag-line__meta", a.variant)), g.append(m("p", "bag-line__unit", j(a.price, $)));
+        const E = m("button", "bag-line__remove", "Remove");
+        E.type = "button", E.setAttribute("aria-label", `Remove ${a.name}`), E.addEventListener("click", () => {
+          const C = p[S + 1] ?? p[S - 1];
+          x.remove(a.id), ((C ? c.querySelector(`[aria-label="Remove ${CSS.escape(C.name)}"]`) : null) ?? W).focus();
+        }), g.append(E);
+        const R = m("div", "bag-line__qty"), N = m("button", "bag-line__step", "−");
+        N.type = "button", N.setAttribute("aria-label", `Decrease quantity of ${a.name}`), N.addEventListener("click", () => x.setQty(a.id, a.qty - 1));
+        const I = m("span", "bag-line__count", String(a.qty)), v = m("button", "bag-line__step", "+");
+        return v.type = "button", v.setAttribute("aria-label", `Increase quantity of ${a.name}`), v.addEventListener("click", () => x.setQty(a.id, a.qty + 1)), R.append(N, I, v), s.append(u, g, R, m("p", "bag-line__total", j(a.price * a.qty, $))), s;
+      }
+      function f() {
+        var N, I;
+        const a = x.items(), S = (N = document.activeElement) == null ? void 0 : N.getAttribute("aria-label");
+        L.replaceChildren(...a.map((v, C) => U(v, C, a)));
+        const p = a.length > 0;
+        T.hidden = p, M.hidden = !p, q.hidden = !p, B.hidden = !p;
+        const s = a.reduce((v, C) => v + C.qty, 0);
+        c.querySelector("[data-count]").textContent = p ? `(${s})` : "";
+        const u = a.reduce((v, C) => v + C.qty * C.price, 0), g = !p || w > 0 && u >= w ? 0 : l;
+        F("subtotal").textContent = j(u, $), F("shipping").textContent = g === 0 ? "Free" : j(g, $), F("total").textContent = j(u + g, $);
+        const E = c.querySelector("[data-ship-wrap]");
+        E.hidden = w <= 0;
+        const R = Math.max(0, w - u);
+        c.querySelector("[data-ship-text]").textContent = R > 0 ? `${j(R, $)} away from free shipping` : "Free shipping unlocked", c.querySelector("[data-ship-bar]").style.width = `${w ? Math.min(100, u / w * 100) : 100}%`, S && !c.contains(document.activeElement) && ((I = c.querySelector(`[aria-label="${CSS.escape(S)}"]`)) == null || I.focus());
+      }
+      f(), x.subscribe(f);
+    }));
+  }, []), /* @__PURE__ */ e(G, { children: /* @__PURE__ */ t("section", { className: Z(["bag", `bag--${y}`, k]), "aria-labelledby": "bag-title", "data-bag": !0, "data-key": i, "data-currency": A, "data-locale": d, "data-free": b, "data-ship": _, "data-seed": h.length ? JSON.stringify(h) : void 0, "data-rk-48a7b8": "", children: [
+    /* @__PURE__ */ t("header", { className: "bag__head", "data-rk-48a7b8": "", children: [
+      /* @__PURE__ */ t("h1", { className: "bag__title", id: "bag-title", tabIndex: -1, "data-rk-48a7b8": "", children: [
+        n,
+        " ",
+        /* @__PURE__ */ e("sup", { "data-count": !0, "data-rk-48a7b8": "" })
+      ] }),
+      /* @__PURE__ */ e("a", { className: "bag__continue", href: r, "data-rk-48a7b8": "", children: "← Continue shopping" })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "bag__layout", "data-rk-48a7b8": "", children: [
+      /* @__PURE__ */ t("div", { className: "bag__main", "data-rk-48a7b8": "", children: [
+        /* @__PURE__ */ t("div", { className: "bag__cols", "aria-hidden": "true", "data-rk-48a7b8": "", children: [
+          /* @__PURE__ */ e("span", { "data-rk-48a7b8": "", children: "Item" }),
+          /* @__PURE__ */ e("span", { "data-rk-48a7b8": "", children: "Quantity" }),
+          /* @__PURE__ */ e("span", { "data-rk-48a7b8": "", children: "Total" })
+        ] }),
+        /* @__PURE__ */ e("ul", { className: "bag__lines", "data-lines": !0, "aria-label": "Items in your bag", "data-rk-48a7b8": "" }),
+        /* @__PURE__ */ t("div", { className: "bag__empty", "data-empty": !0, hidden: !0, "data-rk-48a7b8": "", children: [
+          /* @__PURE__ */ e("p", { className: "bag__empty-title", "data-rk-48a7b8": "", children: "Your bag is empty." }),
+          /* @__PURE__ */ e("p", { "data-rk-48a7b8": "", children: "Pieces you add will wait here for you." }),
+          /* @__PURE__ */ e("a", { className: "bag__btn", href: r, "data-rk-48a7b8": "", children: "Discover the collection" })
+        ] }),
+        /* @__PURE__ */ t("details", { className: "bag__note", "data-note-wrap": !0, "data-rk-48a7b8": "", children: [
+          /* @__PURE__ */ e("summary", { "data-rk-48a7b8": "", children: "Add a gift note" }),
+          /* @__PURE__ */ e("label", { className: "sr-only", htmlFor: "bag-note", "data-rk-48a7b8": "", children: "Gift note" }),
+          /* @__PURE__ */ e("textarea", { id: "bag-note", rows: 3, maxLength: 200, placeholder: "Write a short message — we'll print it on a card.", "data-note": !0, "data-rk-48a7b8": "" })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("aside", { className: "bag__summary", "aria-label": "Order summary", "data-summary": !0, "data-rk-48a7b8": "", children: [
+        /* @__PURE__ */ t("div", { className: "bag__ship", "data-ship-wrap": !0, "data-rk-48a7b8": "", children: [
+          /* @__PURE__ */ e("p", { "data-ship-text": !0, "data-rk-48a7b8": "" }),
+          /* @__PURE__ */ e("div", { className: "bag__ship-bar", "aria-hidden": "true", "data-rk-48a7b8": "", children: /* @__PURE__ */ e("span", { "data-ship-bar": !0, "data-rk-48a7b8": "" }) })
+        ] }),
+        /* @__PURE__ */ t("dl", { className: "bag__totals", "aria-live": "polite", "data-rk-48a7b8": "", children: [
+          /* @__PURE__ */ t("div", { "data-rk-48a7b8": "", children: [
+            /* @__PURE__ */ e("dt", { "data-rk-48a7b8": "", children: "Subtotal" }),
+            /* @__PURE__ */ e("dd", { "data-t": "subtotal", "data-rk-48a7b8": "", children: "—" })
+          ] }),
+          /* @__PURE__ */ t("div", { "data-rk-48a7b8": "", children: [
+            /* @__PURE__ */ e("dt", { "data-rk-48a7b8": "", children: "Shipping" }),
+            /* @__PURE__ */ e("dd", { "data-t": "shipping", "data-rk-48a7b8": "", children: "—" })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "bag__total", "data-rk-48a7b8": "", children: [
+            /* @__PURE__ */ e("dt", { "data-rk-48a7b8": "", children: "Estimated total" }),
+            /* @__PURE__ */ e("dd", { "data-t": "total", "data-rk-48a7b8": "", children: "—" })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "bag__taxes", "data-rk-48a7b8": "", children: "Taxes included. Discount codes are applied at checkout." }),
+        /* @__PURE__ */ e("a", { className: "bag__btn bag__btn--block", href: o, "data-checkout": !0, "data-rk-48a7b8": "", children: "Checkout" }),
+        /* @__PURE__ */ t("ul", { className: "bag__assurance", "data-rk-48a7b8": "", children: [
+          /* @__PURE__ */ e("li", { "data-rk-48a7b8": "", children: "Free returns within 30 days" }),
+          /* @__PURE__ */ e("li", { "data-rk-48a7b8": "", children: "Secure payment · Cards, PayPal, Apple Pay" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  ce as C,
+  ne as F,
+  z as a,
+  K as s
+};