@instockng/storefront-ui 1.0.107 → 1.0.108

package/dist/index15.mjs

@@ -1,166 +1,101 @@
 'use client';
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { useState as w } from "react";
-import { BadgeCheck as C } from "lucide-react";
-import { cn as o, formatCurrency as g, calculateDiscountedPrice as u, getDiscountPercent as f } from "./index30.mjs";
-const S = ({
-  qty: l,
-  selectedVariant: i,
-  quantity: s,
-  onQuantityChange: c,
-  effectivePrice: n,
-  quantityDiscounts: r,
-  showBestValue: d = !1
-}) => {
-  const e = !!i;
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      onClick: () => e && c(l),
-      className: o(
-        "border-2 rounded-xl transition-all flex items-center justify-center p-3",
-        e ? s === l ? "border-green-500 bg-green-50 shadow-md cursor-pointer hover:scale-105" : "border-gray-200 bg-white hover:border-gray-300 cursor-pointer hover:scale-105" : "border-gray-300 bg-gray-100 cursor-not-allowed opacity-50",
-        d && e && "relative"
-      ),
-      children: [
-        d && e && /* @__PURE__ */ t("div", { className: "absolute -top-3 left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ t("div", { className: "bg-orange-500 text-white text-xs px-3 py-1 rounded-full font-semibold whitespace-nowrap", children: "Best Value" }) }),
-        /* @__PURE__ */ a("div", { className: "text-center", children: [
-          /* @__PURE__ */ a("div", { className: o("text-lg font-bold", e ? "text-gray-900" : "text-gray-500"), children: [
-            "BUY ",
-            l
-          ] }),
-          l > 1 && /* @__PURE__ */ t("div", { className: o(
-            "text-sm font-bold inline-block bg-[#F54927] text-white px-1 rounded-full line-through mb-1",
-            e ? "text-gray-500" : "text-gray-400"
-          ), children: g(n * l) }),
-          /* @__PURE__ */ t("div", { className: o("text-lg md:text-2xl font-bold", e ? "text-green-600" : "text-gray-400"), children: g(u(n, l, r)) }),
-          l > 1 && e ? /* @__PURE__ */ a("div", { className: "bg-orange-500 text-white text-sm px-2 py-1 rounded-md font-semibold mb-2", children: [
-            "Save ",
-            f(l, r),
-            "%"
-          ] }) : e ? null : /* @__PURE__ */ t("div", { className: "text-xs text-red-500 mt-1", children: "Out of Stock" })
-        ] })
-      ]
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { Package as g, Trash2 as p } from "lucide-react";
+import { cn as N, formatCurrency as h } from "./index30.mjs";
+import { useCart as w } from "./index3.mjs";
+import { useState as f, useCallback as y } from "react";
+function U({
+  item: e,
+  className: b,
+  disabled: r = !1
+}) {
+  const [i, n] = f(!1), [s, c] = f(!1), { removeItem: o, updateItem: d } = w(), m = y(async (l) => {
+    if (!(l <= 0)) {
+      c(!0);
+      try {
+        await d(e.id, l);
+      } catch (v) {
+        console.error("Failed to update item quantity:", v);
+      }
+      c(!1);
     }
-  );
-}, j = ({
-  selectedVariant: l,
-  quantity: i,
-  onQuantityChange: s,
-  effectivePrice: c,
-  quantityDiscounts: n
-}) => {
-  const [r, d] = w(2), e = !!l, b = i === r, p = (h) => {
-    h.stopPropagation();
-    const x = r + 1;
-    d(x), e && s(x);
-  }, y = (h) => {
-    if (h.stopPropagation(), r > 2) {
-      const x = r - 1;
-      d(x), e && s(x);
+  }, [e.id, d]), x = y(async () => {
+    n(!0);
+    try {
+      await o(e.id);
+    } catch (l) {
+      console.error("Failed to remove item:", l);
     }
-  }, v = () => {
-    e && s(r);
-  }, m = f(r, n), N = u(c, r, n);
-  return /* @__PURE__ */ a(
+    n(!1);
+  }, [e.id, o]), u = e.variant.thumbnailUrl ?? e.variant.product.thumbnailUrl;
+  return /* @__PURE__ */ t(
     "div",
     {
-      onClick: v,
-      className: o(
-        "border-2 rounded-xl transition-all flex flex-col items-center justify-center p-3 relative",
-        e ? b ? "border-green-500 bg-green-50 shadow-md cursor-pointer hover:scale-105" : "border-gray-200 bg-white hover:border-gray-300 cursor-pointer hover:scale-105" : "border-gray-300 bg-gray-100 cursor-not-allowed opacity-50"
+      className: N(
+        "flex gap-3 transition-opacity",
+        (r || i || s) && "opacity-50",
+        b
       ),
       children: [
-        /* @__PURE__ */ t(
-          "button",
+        /* @__PURE__ */ a("div", { className: "h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-gray-100", children: u ? /* @__PURE__ */ a(
+          "img",
           {
-            onClick: y,
-            disabled: !e || r <= 2,
-            className: o(
-              "absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center text-lg font-bold transition-colors",
-              !e || r <= 2 ? "bg-gray-200 text-gray-400 cursor-not-allowed" : "bg-gray-300 text-gray-700 hover:bg-gray-400"
-            ),
-            children: "-"
+            src: u,
+            alt: e.variant.product.name,
+            className: "h-full w-full object-cover"
           }
-        ),
-        /* @__PURE__ */ t(
-          "button",
-          {
-            onClick: p,
-            disabled: !e,
-            className: o(
-              "absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center text-lg font-bold transition-colors",
-              e ? "bg-gray-300 text-gray-700 hover:bg-gray-400" : "bg-gray-200 text-gray-400 cursor-not-allowed"
-            ),
-            children: "+"
-          }
-        ),
-        /* @__PURE__ */ a("div", { className: "text-center w-full", children: [
-          /* @__PURE__ */ a("div", { className: o("text-lg font-bold", e ? "text-gray-900" : "text-gray-500"), children: [
-            "BUY ",
-            r
-          ] }),
-          /* @__PURE__ */ a("div", { className: "flex items-center justify-center gap-2", children: [
-            r > 1 && !!m && /* @__PURE__ */ t("div", { className: o(
-              "text-base md:text-lg font-bold line-through",
-              e ? "text-[#DC143C]" : "text-gray-400"
-            ), children: g(c * r) }),
-            /* @__PURE__ */ t("div", { className: o("text-lg md:text-2xl font-bold", e ? "text-green-600" : "text-gray-400"), children: g(N) })
-          ] }),
-          r > 1 && e ? !!m && /* @__PURE__ */ a("div", { className: "absolute top-[-30px] right-0 2xl:right-[-30px] h-[60px] w-[60px] flex items-center justify-center", children: [
-            /* @__PURE__ */ a("span", { className: "text-white font-bold z-[5] relative leading-4", children: [
-              m,
-              "%",
-              /* @__PURE__ */ t("br", {}),
-              "off"
+        ) : /* @__PURE__ */ a("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ a(g, { className: "h-6 w-6 text-gray-400" }) }) }),
+        /* @__PURE__ */ t("div", { className: "flex flex-1 flex-col justify-between py-1", children: [
+          /* @__PURE__ */ a("div", { children: /* @__PURE__ */ t("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ t("div", { className: "flex-1", children: [
+              /* @__PURE__ */ a("h3", { className: "text-base font-semibold leading-tight", children: e.variant.product.name }),
+              e.variant.name && /* @__PURE__ */ a("p", { className: "mt-0.5 text-sm text-gray-600", children: e.variant.name })
+            ] }),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                onClick: x,
+                disabled: r || i,
+                className: "text-gray-400 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50",
+                "aria-label": "Remove item",
+                children: /* @__PURE__ */ a(p, { className: "h-5 w-5" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ t("div", { className: "flex items-center justify-between mt-2", children: [
+            /* @__PURE__ */ t("div", { className: "inline-flex items-center overflow-hidden rounded-full bg-gray-200 text-gray-700", children: [
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  "aria-label": "Decrease quantity",
+                  onClick: () => m(e.quantity - 1),
+                  disabled: r || e.quantity <= 1 || s,
+                  className: "flex h-8 w-8 items-center justify-center transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50",
+                  children: "−"
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: "px-3 text-base font-medium select-none", children: e.quantity }),
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  "aria-label": "Increase quantity",
+                  onClick: () => m(e.quantity + 1),
+                  disabled: r || s,
+                  className: "flex h-8 w-8 items-center justify-center transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50",
+                  children: "+"
+                }
+              )
             ] }),
-            /* @__PURE__ */ t(C, { className: "animate-spin-slow w-full h-full z-[2] inset-0 absolute fill-accent-500 text-accent-500" })
-          ] }) : e ? null : /* @__PURE__ */ t("div", { className: "text-xs text-red-500 mt-1", children: "Out of Stock" })
+            /* @__PURE__ */ t("div", { className: "text-right", children: [
+              /* @__PURE__ */ a("p", { className: "text-base font-medium", children: h(e.subtotal) }),
+              e.basePrice !== e.finalPrice && /* @__PURE__ */ a("p", { className: "text-xs text-[#DC143C] line-through", children: h(e.basePrice * e.quantity) })
+            ] })
+          ] })
         ] })
       ]
     }
   );
-};
-function P({
-  selectedVariant: l,
-  quantity: i,
-  onQuantityChange: s,
-  effectivePrice: c,
-  quantityDiscounts: n
-}) {
-  return /* @__PURE__ */ a("div", { className: "flex flex-col space-y-2", children: [
-    /* @__PURE__ */ t("span", { className: "text-sm font-medium", children: "Choose Quantity:" }),
-    /* @__PURE__ */ a("div", { className: "relative", children: [
-      !l && /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-white/80 z-10 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ a("div", { className: "text-center p-4", children: [
-        /* @__PURE__ */ t("div", { className: "text-lg font-semibold text-gray-700 mb-2", children: "Select a variant first" }),
-        /* @__PURE__ */ t("div", { className: "text-sm text-gray-500", children: "Choose a product variant above to see quantity options" })
-      ] }) }),
-      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ t(
-          S,
-          {
-            qty: 1,
-            selectedVariant: l,
-            quantity: i,
-            onQuantityChange: s,
-            effectivePrice: c,
-            quantityDiscounts: n
-          }
-        ),
-        /* @__PURE__ */ t(
-          j,
-          {
-            selectedVariant: l,
-            quantity: i,
-            onQuantityChange: s,
-            effectivePrice: c,
-            quantityDiscounts: n
-          }
-        )
-      ] })
-    ] })
-  ] });
 }
 export {
-  P as QuantitySelector
+  U as CartItem
 };

package/dist/index151.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { __exports as r } from "./index223.mjs";
+import { __exports as r } from "./index165.mjs";
 var c;
 function b() {
   return c ? r : (c = 1, function(n) {

package/dist/index153.mjs

@@ -1,6 +1,6 @@
 'use client';
-import f from "./index94.mjs";
-import d from "./index232.mjs";
+import f from "./index89.mjs";
+import d from "./index224.mjs";
 function l(e) {
   return encodeURIComponent(e).replace(/%3A/gi, ":").replace(/%24/g, "$").replace(/%2C/gi, ",").replace(/%20/g, "+");
 }

package/dist/index154.mjs

@@ -1,5 +1,5 @@
 'use client';
-import n from "./index94.mjs";
+import n from "./index89.mjs";
 class a {
   constructor() {
     this.handlers = [];

package/dist/index155.mjs

@@ -1,10 +1,10 @@
 'use client';
-import r from "./index233.mjs";
-import p from "./index102.mjs";
-import l from "./index98.mjs";
-import m from "./index100.mjs";
-import a from "./index108.mjs";
-import o from "./index109.mjs";
+import r from "./index225.mjs";
+import p from "./index97.mjs";
+import l from "./index93.mjs";
+import m from "./index95.mjs";
+import a from "./index103.mjs";
+import o from "./index104.mjs";
 function d(e) {
   if (e.cancelToken && e.cancelToken.throwIfRequested(), e.signal && e.signal.aborted)
     throw new m(null, e);

package/dist/index156.mjs

@@ -1,6 +1,6 @@
 'use client';
-import r from "./index234.mjs";
-import f from "./index235.mjs";
+import r from "./index226.mjs";
+import f from "./index227.mjs";
 function u(l, i, t) {
   let o = !r(i);
   return l && (o || t == !1) ? f(l, i) : i;

package/dist/index157.mjs

@@ -1,6 +1,6 @@
 'use client';
-import { VERSION as w } from "./index103.mjs";
-import s from "./index105.mjs";
+import { VERSION as w } from "./index98.mjs";
+import s from "./index100.mjs";
 const l = {};
 ["object", "boolean", "number", "function", "string", "symbol"].forEach((n, t) => {
   l[n] = function(o) {

package/dist/index159.mjs

@@ -1,6 +1,6 @@
 'use client';
-import s from "./index94.mjs";
-import f from "./index104.mjs";
+import s from "./index89.mjs";
+import f from "./index99.mjs";
 import r from "./index160.mjs";
 function d(o, i) {
   return f(o, new r.classes.URLSearchParams(), {