@instockng/storefront-ui 1.0.17 → 1.0.19

package/dist/index7.mjs

@@ -1,101 +1,113 @@
 'use client';
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { Package as v, Trash2 as p } from "lucide-react";
-import { cn as g, formatCurrency as m } from "./index17.mjs";
-import { useCart as N } from "./index3.mjs";
-import { useState as h, useCallback as f } from "react";
-function I({
-  item: e,
-  className: y,
-  disabled: r = !1
+import { jsxs as s, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { Card as P, CardContent as S, CardFooter as j } from "./index14.mjs";
+import { Button as I } from "./index13.mjs";
+import { Badge as p } from "./index15.mjs";
+import { Package as O, ShoppingCart as q } from "lucide-react";
+import { cn as g, formatCurrency as h } from "./index19.mjs";
+function D({
+  product: r,
+  onAddToCart: o,
+  showStock: b = !0,
+  className: x,
+  imageClassName: N,
+  disableAddToCart: v = !1,
+  isAddingToCart: n = !1,
+  onClick: i
 }) {
-  const [i, n] = h(!1), [s, c] = h(!1), { removeItem: o, updateItem: d } = N(), u = f(async (l) => {
-    if (!(l <= 0)) {
-      c(!0);
-      try {
-        await d(e.id, l);
-      } catch (x) {
-        console.error("Failed to update item quantity:", x);
-      }
-      c(!1);
-    }
-  }, [e.id, d]), b = f(async () => {
-    n(!0);
-    try {
-      await o(e.id);
-    } catch (l) {
-      console.error("Failed to remove item:", l);
-    }
-    n(!1);
-  }, [e.id, o]);
-  return /* @__PURE__ */ t(
-    "div",
+  var d;
+  const [c, y] = f(
+    ((d = r.variants[0]) == null ? void 0 : d.id) || ""
+  ), [m, k] = f(1), a = r.variants.find((e) => e.id === c), C = r.variants.length > 1, l = a ? a.stock === void 0 || a.stock > 0 : !1, w = (e) => {
+    e.stopPropagation(), a && o && o(a.id, m);
+  };
+  return /* @__PURE__ */ s(
+    P,
     {
       className: g(
-        "flex gap-3 transition-opacity",
-        (r || i || s) && "opacity-50",
-        y
+        "group overflow-hidden transition-all hover:shadow-lg",
+        i && "cursor-pointer",
+        x
       ),
+      onClick: i,
       children: [
-        /* @__PURE__ */ a("div", { className: "h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-gray-100", children: e.variant.product.thumbnailUrl ? /* @__PURE__ */ a(
-          "img",
-          {
-            src: e.variant.product.thumbnailUrl,
-            alt: e.variant.product.name,
-            className: "h-full w-full object-cover"
-          }
-        ) : /* @__PURE__ */ a("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ a(v, { 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",
+        /* @__PURE__ */ s("div", { className: "relative aspect-square overflow-hidden bg-gray-100", children: [
+          r.imageUrl ? /* @__PURE__ */ t(
+            "img",
+            {
+              src: r.imageUrl,
+              alt: r.name,
+              className: g(
+                "h-full w-full object-cover transition-transform group-hover:scale-105",
+                N
+              )
+            }
+          ) : /* @__PURE__ */ t("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ t(O, { className: "h-16 w-16 text-gray-400" }) }),
+          !l && /* @__PURE__ */ t(p, { className: "absolute right-2 top-2 bg-red-600", children: "Out of Stock" }),
+          b && l && (a == null ? void 0 : a.stock) !== void 0 && a.stock < 10 && /* @__PURE__ */ s(p, { className: "absolute right-2 top-2 bg-orange-600", children: [
+            "Only ",
+            a.stock,
+            " left"
+          ] })
+        ] }),
+        /* @__PURE__ */ s(S, { className: "p-4", children: [
+          /* @__PURE__ */ t("h3", { className: "mb-1 font-semibold line-clamp-2", children: r.name }),
+          r.description && /* @__PURE__ */ t("p", { className: "mb-2 text-sm text-gray-600 line-clamp-2", children: r.description }),
+          C && /* @__PURE__ */ s("div", { className: "mb-3", children: [
+            /* @__PURE__ */ t("label", { className: "mb-1 block text-xs font-medium text-gray-700", children: "Select Option" }),
+            /* @__PURE__ */ t(
+              "select",
               {
-                onClick: b,
-                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" })
+                value: c,
+                onChange: (e) => {
+                  e.stopPropagation(), y(e.target.value);
+                },
+                className: "w-full rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500",
+                onClick: (e) => e.stopPropagation(),
+                children: r.variants.map((e) => /* @__PURE__ */ s("option", { value: e.id, children: [
+                  e.name,
+                  " - ",
+                  h(e.price)
+                ] }, e.id))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", { className: "mb-3 text-2xl font-bold text-blue-600", children: a && h(a.price) }),
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ t("label", { className: "text-xs font-medium text-gray-700", children: "Qty:" }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "number",
+                min: "1",
+                max: (a == null ? void 0 : a.stock) || 999,
+                value: m,
+                onChange: (e) => {
+                  e.stopPropagation(), k(Math.max(1, parseInt(e.target.value) || 1));
+                },
+                onClick: (e) => e.stopPropagation(),
+                className: "w-20 rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
               }
             )
-          ] }) }),
-          /* @__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: () => u(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: () => u(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("div", { className: "text-right", children: [
-              /* @__PURE__ */ a("p", { className: "text-base font-medium", children: m(e.subtotal) }),
-              e.basePrice !== e.finalPrice && /* @__PURE__ */ a("p", { className: "text-xs text-[#DC143C] line-through", children: m(e.basePrice * e.quantity) })
-            ] })
           ] })
-        ] })
+        ] }),
+        /* @__PURE__ */ t(j, { className: "p-4 pt-0", children: /* @__PURE__ */ t(
+          I,
+          {
+            onClick: w,
+            disabled: v || !l || n,
+            className: "w-full",
+            children: n ? /* @__PURE__ */ t(u, { children: "Adding..." }) : /* @__PURE__ */ s(u, { children: [
+              /* @__PURE__ */ t(q, { className: "mr-2 h-4 w-4" }),
+              "Add to Cart"
+            ] })
+          }
+        ) })
       ]
     }
   );
 }
 export {
-  I as CartItem
+  D as ProductCard
 };