@instockng/storefront-ui 1.0.107 → 1.0.108

package/dist/index118.mjs

@@ -1,14 +1,14 @@
 'use client';
-import { __module as L } from "./index173.mjs";
-import "./index88.mjs";
+import { __module as L } from "./index174.mjs";
+import "./index107.mjs";
 import { __require as K } from "./index115.mjs";
 import F from "react/jsx-runtime";
 import J from "react-dom";
 import N from "react";
-import { __require as B } from "./index174.mjs";
-import { __require as D } from "./index175.mjs";
-import { __require as G } from "./index170.mjs";
-import { __exports as Q } from "./index93.mjs";
+import { __require as B } from "./index175.mjs";
+import { __require as D } from "./index176.mjs";
+import { __require as G } from "./index171.mjs";
+import { __exports as Q } from "./index112.mjs";
 var w;
 function ie() {
   return w ? L.exports : (w = 1, function(x, o) {

package/dist/index119.mjs

@@ -1,7 +1,7 @@
 'use client';
-import { __exports as r } from "./index176.mjs";
-import { __require as m } from "./index177.mjs";
-import { __require as l } from "./index178.mjs";
+import { __exports as r } from "./index177.mjs";
+import { __require as m } from "./index178.mjs";
+import { __require as l } from "./index179.mjs";
 var i;
 function p() {
   return i ? r : (i = 1, function(t) {

package/dist/index12.mjs

@@ -1,134 +1,199 @@
 'use client';
-import { jsx as i, jsxs as s, Fragment as f } from "react/jsx-runtime";
+import { jsxs as a, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { useState as f, useRef as V } from "react";
+import { ChevronLeft as U, ChevronRight as z } from "lucide-react";
+import { Switch as G } from "./index51.mjs";
+import { Badge as T } from "./index26.mjs";
+import { cn as P, formatCurrency as k } from "./index30.mjs";
+import { VariantPickerModal as _ } from "./index14.mjs";
 import "./index31.mjs";
-import { useGetCartRecommendations as U } from "./index43.mjs";
 import "@tanstack/react-query";
+import { useGetProductAddOns as $ } from "./index45.mjs";
 import { useCart as q } from "./index3.mjs";
-import { cn as p, formatCurrency as z } from "./index30.mjs";
-import { Button as B } from "./index24.mjs";
-import { Loader2 as b, Package as D, ShoppingCart as E } from "lucide-react";
-import { useState as r, useEffect as G } from "react";
-import { VariantPickerModal as H } from "./index13.mjs";
-function _({
-  limit: P,
-  className: C
+function le({
+  slug: g,
+  products: x,
+  onToggle: u,
+  selectedProductIds: A,
+  onProductClick: H,
+  className: p,
+  title: j = "Popular add-ons",
+  limit: D = 6
 }) {
-  const { cart: o, addItem: k } = q(), { data: c, isLoading: I, error: A } = U(o == null ? void 0 : o.id, P), [j, h] = r([]), [F, u] = r([]), [V, g] = r([]), [L, x] = r([]), [v, m] = r(null), [M, w] = r(!1);
-  if (G(() => {
-    x([]), u([]), g([]);
-  }, [c]), !o)
-    return null;
-  if (I)
-    return /* @__PURE__ */ i("div", { className: "py-6", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ i(b, { className: "h-6 w-6 animate-spin text-accent-500" }) }) });
-  const a = c == null ? void 0 : c.filter(
-    (e) => !L.includes(e.id)
-  );
-  if (A || !a || a.length === 0)
-    return null;
-  const N = async (e, t) => {
-    h((n) => [...n, e.id]);
-    try {
-      await k(e.slug, e.name, t.price, t.sku, 1), u((n) => [...n, e.id]), setTimeout(() => {
-        g((n) => [...n, e.id]);
-      }, 500), setTimeout(() => {
-        x((n) => [...n, e.id]);
-      }, 1e3);
-    } finally {
-      h((n) => n.filter((l) => l !== e.id));
+  const { cart: s, addItem: v, removeItem: I } = q(), { data: M, isLoading: N } = $(g || "", D, {
+    enabled: !!g && !x
+  }), c = x || M || [], W = A || c.filter((e) => s == null ? void 0 : s.items.some(
+    (n) => e.variants.some((r) => r.id === n.variant.id)
+  )).map((e) => e.id), [y, m] = f(null), [B, b] = f(!1), F = async (e, n) => {
+    if (u) {
+      u(e, n);
+      return;
     }
-  }, T = (e) => {
-    if (e.variants.length > 1) {
+    if (n && e.variants.length > 1) {
       m(e);
       return;
     }
-    const t = e.variants[0];
-    t && N(e, t);
-  }, S = async (e, t) => {
-    w(!0);
+    const r = e.variants[0];
+    if (r)
+      if (n)
+        await v(
+          e.slug,
+          e.name,
+          r.price,
+          r.sku,
+          1
+        );
+      else {
+        const l = s == null ? void 0 : s.items.find(
+          (i) => e.variants.some((d) => d.id === i.variant.id)
+        );
+        l && await I(l.id);
+      }
+  }, S = async (e, n) => {
+    b(!0);
     try {
-      const n = a.find((d) => d.id === e.id), l = n == null ? void 0 : n.variants.find((d) => d.id === t.id);
-      n && l && await N(n, l), m(null);
+      await v(
+        e.slug,
+        e.name,
+        n.price,
+        n.sku,
+        1
+      ), m(null);
     } finally {
-      w(!1);
+      b(!1);
+    }
+  }, o = V(null), [L, O] = f(0), E = () => {
+    if (o.current) {
+      const { scrollLeft: e, scrollWidth: n, clientWidth: r } = o.current, l = e / (n - r);
+      O(l || 0);
+    }
+  }, w = (e) => {
+    if (o.current) {
+      const { clientWidth: n } = o.current, r = n * 0.9;
+      o.current.scrollBy({
+        left: e === "left" ? -r : r,
+        behavior: "smooth"
+      });
     }
   };
-  return /* @__PURE__ */ s(f, { children: [
-    /* @__PURE__ */ s("div", { className: p("pt-2", C), children: [
-      /* @__PURE__ */ i("div", { className: "mb-2 px-4", children: /* @__PURE__ */ i("h3", { className: "text-lg font-semibold text-gray-900", children: "Frequently bought together" }) }),
-      /* @__PURE__ */ i("div", { className: "overflow-x-auto", children: /* @__PURE__ */ s("div", { className: "flex gap-4 pb-2 transition-all duration-500", children: [
-        /* @__PURE__ */ i("div", { className: "flex-shrink-0 w-1" }),
-        a == null ? void 0 : a.map((e) => {
-          const t = e.variants[0];
-          if (!t) return null;
-          const n = j.includes(e.id), l = F.includes(e.id), d = V.includes(e.id);
-          return /* @__PURE__ */ i(
+  return (!c || c.length === 0) && !N ? null : N ? /* @__PURE__ */ a("div", { className: P("w-full py-8 space-y-4 animate-pulse", p), style: { maxWidth: "calc(100vw - calc(var(--spacing) * 7))" }, children: [
+    /* @__PURE__ */ t("div", { className: "h-4 w-32 bg-gray-200 rounded px-1 mb-6" }),
+    /* @__PURE__ */ a("div", { className: "flex gap-4 overflow-x-hidden", children: [
+      /* @__PURE__ */ t("div", { className: "min-w-[90%] h-[90px] bg-gray-100 rounded-[2rem]" }),
+      /* @__PURE__ */ t("div", { className: "min-w-[90%] h-[90px] bg-gray-100 rounded-[2rem]" })
+    ] })
+  ] }) : /* @__PURE__ */ a(C, { children: [
+    /* @__PURE__ */ a("div", { className: p, children: [
+      /* @__PURE__ */ t("div", { className: "px-1 mb-3", children: /* @__PURE__ */ t("h3", { className: "text-lg font-bold tracking-tight text-gray-900", children: j }) }),
+      /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ t(
+        "div",
+        {
+          ref: o,
+          onScroll: E,
+          className: "flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory px-1",
+          style: { scrollbarWidth: "none", msOverflowStyle: "none", maxWidth: "calc(100vw - calc(var(--spacing) * 7))" },
+          children: c.map((e) => {
+            const n = W.includes(e.id), r = e.variants[0], l = (r == null ? void 0 : r.price) || 0, i = e.compareAtPrice || r.compareAtPrice, d = i && i > l, R = d ? Math.round((i - l) / i * 100) : 0;
+            return /* @__PURE__ */ a(
+              "div",
+              {
+                className: "relative flex min-w-[90%] md:min-w-[420px] snap-start items-center gap-4 rounded-xl bg-[#EBEBEB] p-3 transition-all",
+                children: [
+                  /* @__PURE__ */ a(
+                    "a",
+                    {
+                      href: `/product/${e.slug}`,
+                      className: "flex flex-1 items-center gap-4 min-w-0",
+                      children: [
+                        /* @__PURE__ */ t("div", { className: "h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl bg-white/40 flex items-center justify-center", children: e.thumbnailUrl ? /* @__PURE__ */ t(
+                          "img",
+                          {
+                            src: e.thumbnailUrl,
+                            alt: e.name,
+                            className: "h-full w-full object-cover",
+                            loading: "lazy"
+                          }
+                        ) : /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center text-[10px] text-gray-400", children: "No Img" }) }),
+                        /* @__PURE__ */ a("div", { className: "flex flex-1 flex-col justify-center min-w-0", children: [
+                          /* @__PURE__ */ t("h4", { className: "text-md font-bold text-[#333] truncate pr-2", title: e.name, children: e.name }),
+                          e.addonDescription && /* @__PURE__ */ t("p", { className: "text-[11px] text-gray-500 line-clamp-3 italic mb-1", children: e.addonDescription }),
+                          /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mt-1", children: [
+                            /* @__PURE__ */ t("span", { className: "text-md font-bold text-[#333]", children: k(l) }),
+                            d && /* @__PURE__ */ a(C, { children: [
+                              /* @__PURE__ */ t("span", { className: "text-sm text-[#DC143C] line-through", children: k(i) }),
+                              /* @__PURE__ */ a(T, { className: "bg-[#DC143C]/10 hover:bg-[#DC143C]/20 text-[#DC143C] border-none text-[10px] font-bold px-2 py-0.5 rounded-lg uppercase tracking-tight", children: [
+                                R,
+                                "% OFF"
+                              ] })
+                            ] })
+                          ] })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: "pl-2", onClick: (h) => h.stopPropagation(), children: /* @__PURE__ */ t(
+                    G,
+                    {
+                      checked: n,
+                      onCheckedChange: (h) => F(e, h),
+                      className: "scale-125"
+                    }
+                  ) })
+                ]
+              },
+              e.id
+            );
+          })
+        }
+      ) }),
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2 mt-2", children: [
+        /* @__PURE__ */ t("div", { className: "flex gap-1.5 focus:outline-none", children: Array.from({ length: Math.min(c.length, 6) }).map((e, n) => {
+          const r = Math.round(L * (Math.min(c.length, 6) - 1)) === n;
+          return /* @__PURE__ */ t(
             "div",
             {
-              className: p(
-                "flex flex-row flex-shrink-0 w-64 h-24 bg-white border border-gray-300 rounded-lg overflow-hidden transition-all duration-500",
-                l && "opacity-0 blur-sm scale-95 pointer-events-none",
-                d && "w-0 h-0 mr-[-1rem] overflow-hidden"
-              ),
-              children: /* @__PURE__ */ s(
-                "a",
-                {
-                  href: `/product/${e.slug}`,
-                  className: "flex flex-row flex-1 hover:bg-gray-50 transition-colors",
-                  children: [
-                    /* @__PURE__ */ i("div", { className: "relative w-20 h-full flex-shrink-0 bg-gray-100", children: e.thumbnailUrl ? /* @__PURE__ */ i(
-                      "img",
-                      {
-                        src: e.thumbnailUrl,
-                        alt: e.name,
-                        className: "w-full h-full object-cover"
-                      }
-                    ) : /* @__PURE__ */ i("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ i(D, { className: "h-8 w-8 text-gray-300" }) }) }),
-                    /* @__PURE__ */ s("div", { className: "p-2 flex flex-col flex-1 justify-between", children: [
-                      /* @__PURE__ */ s("div", { children: [
-                        /* @__PURE__ */ i("h4", { className: "text-xs font-medium text-gray-900 line-clamp-2 leading-tight", children: e.name }),
-                        /* @__PURE__ */ i("p", { className: "text-xs font-semibold text-accent-600 mt-0.5", children: z(t.price) })
-                      ] }),
-                      /* @__PURE__ */ i(
-                        B,
-                        {
-                          size: "sm",
-                          onClick: (y) => {
-                            y.preventDefault(), y.stopPropagation(), T(e);
-                          },
-                          disabled: n,
-                          className: "w-full bg-accent-500 hover:bg-accent-600 text-white text-xs h-6 mt-1",
-                          children: n ? /* @__PURE__ */ s(f, { children: [
-                            /* @__PURE__ */ i(b, { className: "h-3 w-3 animate-spin" }),
-                            "Adding..."
-                          ] }) : /* @__PURE__ */ s(f, { children: [
-                            /* @__PURE__ */ i(E, { className: "h-3 w-3" }),
-                            "Add"
-                          ] })
-                        }
-                      )
-                    ] })
-                  ]
-                }
+              className: P(
+                "h-2 w-2 rounded-full transition-all duration-300",
+                r ? "bg-gray-600 scale-110" : "bg-gray-300"
               )
             },
-            e.id
+            n
           );
-        }),
-        /* @__PURE__ */ i("div", { className: "flex-shrink-0 w-1" })
-      ] }) })
+        }) }),
+        /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => w("left"),
+              className: "text-gray-400 hover:text-gray-900 transition-colors",
+              "aria-label": "Previous",
+              children: /* @__PURE__ */ t(U, { className: "h-6 w-6 stroke-[2.5px]" })
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => w("right"),
+              className: "text-gray-400 hover:text-gray-900 transition-colors",
+              "aria-label": "Next",
+              children: /* @__PURE__ */ t(z, { className: "h-6 w-6 stroke-[2.5px]" })
+            }
+          )
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ i(
-      H,
+    /* @__PURE__ */ t(
+      _,
       {
-        isOpen: !!v,
+        isOpen: !!y,
         onClose: () => m(null),
-        product: v,
+        product: y,
         onConfirm: S,
-        isLoading: M
+        isLoading: B
       }
     )
   ] });
 }
 export {
-  _ as RecommendedProducts
+  le as ProductAddOns
 };

package/dist/index120.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as t } from "./index179.mjs";
+import { __exports as t } from "./index180.mjs";
 var i;
 function s() {
   return i ? t : (i = 1, function(o) {

package/dist/index121.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as u } from "./index180.mjs";
+import { __exports as u } from "./index181.mjs";
 var f;
 function m() {
   return f ? u : (f = 1, function(i) {

package/dist/index122.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as a } from "./index181.mjs";
+import { __exports as a } from "./index182.mjs";
 var g;
 function j() {
   return g ? a : (g = 1, function(u) {

package/dist/index123.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { __exports as t } from "./index182.mjs";
-import { __require as c } from "./index183.mjs";
+import { __exports as t } from "./index183.mjs";
+import { __require as c } from "./index184.mjs";
 var i;
 function p() {
   return i ? t : (i = 1, function(r) {

package/dist/index124.mjs

@@ -1,7 +1,7 @@
 'use client';
-import { __exports as i } from "./index184.mjs";
+import { __exports as i } from "./index185.mjs";
 import { __require as U } from "./index122.mjs";
-import { __require as _ } from "./index185.mjs";
+import { __require as _ } from "./index186.mjs";
 var s;
 function q() {
   return s ? i : (s = 1, function(n) {

package/dist/index125.mjs

@@ -1,7 +1,7 @@
 'use client';
-import { __exports as f } from "./index186.mjs";
-import { __require as z } from "./index187.mjs";
-import { __require as A } from "./index188.mjs";
+import { __exports as f } from "./index187.mjs";
+import { __require as z } from "./index188.mjs";
+import { __require as A } from "./index189.mjs";
 import { __require as F } from "./index116.mjs";
 import { __require as O } from "./index120.mjs";
 import { __require as U } from "./index133.mjs";

package/dist/index126.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as n } from "./index189.mjs";
+import { __exports as n } from "./index190.mjs";
 import { __require as l } from "./index122.mjs";
 var s;
 function q() {

package/dist/index127.mjs

@@ -1,8 +1,8 @@
 'use client';
-import { __exports as p } from "./index190.mjs";
+import { __exports as p } from "./index191.mjs";
 import { __require as I } from "./index146.mjs";
-import { __require as q } from "./index183.mjs";
-import { __require as v } from "./index191.mjs";
+import { __require as q } from "./index184.mjs";
+import { __require as v } from "./index192.mjs";
 import { __require as O } from "./index116.mjs";
 var N;
 function w() {

package/dist/index128.mjs

@@ -1,7 +1,7 @@
 'use client';
-import { __exports as c } from "./index192.mjs";
+import { __exports as c } from "./index193.mjs";
 import { __require as y } from "./index115.mjs";
-import { __require as U } from "./index185.mjs";
+import { __require as U } from "./index186.mjs";
 var l;
 function x() {
   return l ? c : (l = 1, function(h) {

package/dist/index129.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { __module as u } from "./index193.mjs";
-import { __require as c } from "./index194.mjs";
+import { __module as u } from "./index194.mjs";
+import { __require as c } from "./index195.mjs";
 var a;
 function d() {
   return a ? u.exports : (a = 1, function(o, e) {