@shopify/shop-minis-react 0.0.30 → 0.0.32

package/dist/_virtual/index10.js

@@ -1,5 +1,5 @@
-var r = {};
+var e = { exports: {} };
 export {
-  r as __exports
+  e as __module
 };
 //# sourceMappingURL=index10.js.map

package/dist/_virtual/index2.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../shop-minis-react/node_modules/.pnpm/color@4.2.3/node_modules/color/index.js";
-var t = /* @__PURE__ */ o();
-const l = /* @__PURE__ */ r(t);
+import { __require as o } from "../shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js";
+var t = o();
+const a = /* @__PURE__ */ r(t);
 export {
-  l as default
+  a as default
 };
 //# sourceMappingURL=index2.js.map

package/dist/_virtual/index3.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js";
-var t = o();
-const a = /* @__PURE__ */ r(t);
+import { __require as o } from "../shop-minis-react/node_modules/.pnpm/color@4.2.3/node_modules/color/index.js";
+var t = /* @__PURE__ */ o();
+const l = /* @__PURE__ */ r(t);
 export {
-  a as default
+  l as default
 };
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index5.js

@@ -1,6 +1,5 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
-var i = r();
+var e = { exports: {} };
 export {
-  i as s
+  e as __module
 };
 //# sourceMappingURL=index5.js.map

package/dist/_virtual/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index6.js

@@ -1,5 +1,6 @@
-var e = { exports: {} };
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+var i = r();
 export {
-  e as __module
+  i as l
 };
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index7.js

@@ -1,6 +1,6 @@
-import { __require as r } from "../shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js";
+import { __require as r } from "../shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js";
 var i = r();
 export {
-  i as l
+  i as s
 };
 //# sourceMappingURL=index7.js.map

package/dist/_virtual/index8.js

@@ -1,5 +1,5 @@
-var o = { exports: {} };
+var r = {};
 export {
-  o as __module
+  r as __exports
 };
 //# sourceMappingURL=index8.js.map

package/dist/_virtual/index9.js

@@ -1,5 +1,5 @@
-var e = { exports: {} };
+var o = { exports: {} };
 export {
-  e as __module
+  o as __module
 };
 //# sourceMappingURL=index9.js.map

package/dist/components/commerce/product-card.js

@@ -1,60 +1,42 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import * as g from "react";
-import { useCallback as L } from "react";
-import { cva as q } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { useShopNavigation as E } from "../../hooks/navigation/useShopNavigation.js";
-import { useSavedProductsActions as M } from "../../hooks/user/useSavedProductsActions.js";
-import { formatMoney as U } from "../../lib/formatMoney.js";
-import { cn as c } from "../../lib/utils.js";
-import { FavoriteButton as V } from "../atoms/favorite-button.js";
-import { ProductVariantPrice as D } from "../atoms/product-variant-price.js";
-import { ThumbhashImage as G } from "../atoms/thumbhash-image.js";
-import { Touchable as H } from "../atoms/touchable.js";
-import { Badge as J } from "../ui/badge.js";
-import { Root as K } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
-const Q = q(
-  "relative w-full overflow-hidden rounded-xl border border-gray-200",
-  {
-    variants: {
-      variant: {
-        default: "",
-        priceOverlay: "",
-        compact: ""
-      },
-      touchable: {
-        true: "cursor-pointer",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      touchable: !0
-    }
-  }
-);
-function W({
-  className: o,
-  variant: t,
-  touchable: r = !0,
-  asChild: a = !1,
-  onPress: i,
-  ...d
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import * as N from "react";
+import { useState as F, useCallback as C, useMemo as A, useContext as k } from "react";
+import { useShopNavigation as T } from "../../hooks/navigation/useShopNavigation.js";
+import { useSavedProductsActions as V } from "../../hooks/user/useSavedProductsActions.js";
+import { formatMoney as j } from "../../lib/formatMoney.js";
+import { cn as s } from "../../lib/utils.js";
+import { FavoriteButton as B } from "../atoms/favorite-button.js";
+import { ProductVariantPrice as E } from "../atoms/product-variant-price.js";
+import { ThumbhashImage as O } from "../atoms/thumbhash-image.js";
+import { Touchable as S } from "../atoms/touchable.js";
+import { Badge as z } from "../ui/badge.js";
+const I = N.createContext(void 0);
+function u() {
+  const t = k(I);
+  if (!t)
+    throw new Error(
+      "ProductCard components must be used within a ProductCard provider"
+    );
+  return t;
+}
+function L({
+  className: t,
+  ...e
 }) {
-  const n = /* @__PURE__ */ e(
-    a ? K : "div",
+  const { touchable: r, onClick: a } = u(), n = /* @__PURE__ */ o(
+    "div",
     {
-      className: c(
-        Q({ variant: t, touchable: r }),
-        "border-0",
-        o
+      className: s(
+        "relative w-full overflow-hidden rounded-xl border-0",
+        t
       ),
-      ...d
+      ...e
     }
   );
-  return r && i ? /* @__PURE__ */ e(
-    H,
+  return r && a ? /* @__PURE__ */ o(
+    S,
     {
-      onClick: i,
+      onClick: a,
       whileTap: { opacity: 0.7 },
       transition: {
         opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
@@ -63,218 +45,232 @@ function W({
     }
   ) : n;
 }
-function X({
-  className: o,
-  variant: t = "default",
-  ...r
+function M({
+  className: t,
+  ...e
 }) {
-  return /* @__PURE__ */ e(
+  const { variant: r } = u();
+  return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "product-card-image-container",
-      className: c(
+      className: s(
         // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)
         "flex justify-stretch items-stretch",
         "relative overflow-hidden rounded-xl border border-gray-200",
         "w-full  aspect-square",
-        t === "compact" ? "min-h-[104px]" : "min-h-[134px]",
-        o
+        r === "compact" ? "min-h-[104px]" : "min-h-[134px]",
+        t
       ),
-      ...r
+      ...e
     }
   );
 }
-function Y({
-  className: o,
-  src: t,
-  alt: r,
-  aspectRatio: a,
-  thumbhash: i,
-  ...d
-}) {
-  const s = L(
-    (n) => i ? /* @__PURE__ */ e(
-      G,
+function R({ className: t, ...e }) {
+  const { product: r, selectedProductVariant: a } = u(), n = a?.image || r.featuredImage, i = n?.url, d = n?.altText || r.title, c = r.featuredImage?.thumbhash, p = C(
+    (l) => c ? /* @__PURE__ */ o(
+      O,
       {
         "data-slot": "product-card-image",
-        src: n,
-        alt: r,
-        aspectRatio: a,
-        thumbhash: i,
-        className: c("w-full h-full object-cover", o),
-        ...d
+        src: l,
+        alt: d,
+        aspectRatio: 1,
+        thumbhash: c,
+        className: s("w-full h-full object-cover", t),
+        ...e
       }
-    ) : /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ o(
       "img",
       {
         "data-slot": "product-card-image",
-        src: n,
-        alt: r,
-        className: c("w-full h-full", o),
-        ...d
+        src: l,
+        alt: d,
+        className: s("w-full h-full", t),
+        ...e
       }
     ),
-    [r, a, o, d, i]
+    [d, t, e, c]
   );
-  return /* @__PURE__ */ e("div", { className: "bg-gray-100 flex items-center justify-center w-full h-full", children: t ? s(t) : /* @__PURE__ */ e("div", { className: "text-gray-400 text-sm w-full text-center", children: "No Image" }) });
+  return /* @__PURE__ */ o("div", { className: "bg-gray-100 flex items-center justify-center w-full h-full", children: i ? p(i) : /* @__PURE__ */ o("div", { className: "text-gray-400 text-sm w-full text-center", children: "No Image" }) });
 }
-function k({
-  className: o,
-  position: t = "bottom-left",
-  children: r,
-  ...a
+function w({
+  className: t,
+  position: e = "bottom-left",
+  variant: r,
+  children: a,
+  ...n
 }) {
-  return /* @__PURE__ */ e(
+  const { badgeText: i, badgeVariant: d } = u(), c = a || i;
+  return c ? /* @__PURE__ */ o(
     "div",
     {
-      className: c(
+      className: s(
         "absolute z-10",
-        t === "top-left" ? "top-3 left-3" : "bottom-2 left-2"
+        e === "top-left" ? "top-3 left-3" : "bottom-2 left-2"
       ),
-      children: /* @__PURE__ */ e(
-        J,
+      children: /* @__PURE__ */ o(
+        z,
         {
-          className: c("bg-black/50 text-white rounded", o),
-          ...a,
-          children: r
+          variant: r ?? d ?? "none",
+          className: s(
+            !d && !r && "bg-black/50 text-white border-transparent",
+            "rounded",
+            t
+          ),
+          ...n,
+          children: c
         }
       )
     }
-  );
+  ) : null;
 }
-function Z({
-  className: o,
-  onPress: t,
-  filled: r = !1,
-  ...a
+function q({
+  className: t,
+  ...e
 }) {
-  return /* @__PURE__ */ e("div", { className: c("absolute bottom-3 right-3 z-10", o), ...a, children: /* @__PURE__ */ e(V, { onClick: t, filled: r }) });
+  const { isFavorited: r, onFavoriteToggle: a } = u();
+  return /* @__PURE__ */ o("div", { className: s("absolute bottom-3 right-3 z-10", t), ...e, children: /* @__PURE__ */ o(B, { onClick: a, filled: r }) });
 }
-function _({
-  className: o,
-  variant: t = "default",
-  ...r
-}) {
-  return t !== "default" ? null : /* @__PURE__ */ e(
+function D({ className: t, ...e }) {
+  const { variant: r } = u();
+  return r !== "default" ? null : /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "product-card-info",
-      className: c("px-1 pt-2 pb-0 space-y-1", o),
-      ...r
+      className: s("px-1 pt-2 pb-0 space-y-1", t),
+      ...e
     }
   );
 }
-function $({
-  className: o,
-  children: t,
+function G({
+  className: t,
+  children: e,
   ...r
 }) {
-  return /* @__PURE__ */ e(
+  const { product: a } = u();
+  return /* @__PURE__ */ o(
     "h3",
     {
       "data-slot": "product-card-title",
-      className: c(
+      className: s(
         "text-sm font-medium leading-tight text-gray-900",
         "truncate overflow-hidden whitespace-nowrap text-ellipsis",
-        o
+        t
       ),
       ...r,
-      children: t
+      children: e || a.title
+    }
+  );
+}
+function H({ className: t }) {
+  const { product: e, selectedProductVariant: r } = u(), a = r?.price || e?.price, n = r?.compareAtPrice || e?.compareAtPrice;
+  return /* @__PURE__ */ o(
+    E,
+    {
+      amount: a?.amount || "",
+      currencyCode: a?.currencyCode || "",
+      compareAtPriceAmount: n?.amount,
+      compareAtPriceCurrencyCode: n?.currencyCode,
+      className: t
     }
   );
 }
-function pt({
-  product: o,
-  selectedProductVariant: t,
+function J() {
+  const { product: t, selectedProductVariant: e, variant: r } = u();
+  if (r !== "priceOverlay") return null;
+  const a = e?.price || t.price, n = a?.currencyCode, i = a?.amount;
+  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: j(i, n) });
+}
+function ot({
+  product: t,
+  selectedProductVariant: e,
   variant: r = "default",
   touchable: a = !0,
-  badgeText: i,
-  badgeVariant: d = "secondary",
-  onFavoriteToggled: s
+  badgeText: n,
+  badgeVariant: i,
+  onProductClick: d,
+  onFavoriteToggled: c,
+  children: p
 }) {
-  const { navigateToProduct: n } = E(), { saveProduct: C, unsaveProduct: b } = M(), {
-    id: l,
-    title: x,
-    featuredImage: I,
-    price: j,
-    compareAtPrice: S,
-    isFavorited: B,
-    defaultVariantId: m,
-    shop: f
-  } = o, P = t?.image || I, w = t?.price || j, N = t?.compareAtPrice || S, [p, A] = g.useState(B), h = w?.currencyCode, v = w?.amount, F = P?.url, T = P?.altText || x, O = N?.amount, R = g.useCallback(() => {
-    a && n({
-      productId: l
-    });
-  }, [n, l, a]), z = g.useCallback(async () => {
-    const u = p;
-    A(!u), s?.(!u);
+  const { navigateToProduct: l } = T(), { saveProduct: h, unsaveProduct: g } = V(), [f, P] = F(t.isFavorited), y = C(() => {
+    a && (d?.(), l({
+      productId: t.id
+    }));
+  }, [l, t.id, a, d]), x = C(async () => {
+    const m = f;
+    P(!m), c?.(!m);
     try {
-      u ? await b({
-        productId: l,
-        shopId: f.id,
-        productVariantId: t?.id || m
-      }) : await C({
-        productId: l,
-        shopId: f.id,
-        productVariantId: t?.id || m
+      m ? await g({
+        productId: t.id,
+        shopId: t.shop.id,
+        productVariantId: e?.id || t.defaultVariantId
+      }) : await h({
+        productId: t.id,
+        shopId: t.shop.id,
+        productVariantId: e?.id || t.defaultVariantId
       });
     } catch {
-      A(u), s?.(u);
+      P(m), c?.(m);
     }
   }, [
-    p,
-    l,
-    f.id,
-    t?.id,
-    m,
-    C,
-    b,
-    s
-  ]);
-  return /* @__PURE__ */ y(
-    W,
-    {
+    f,
+    t.id,
+    t.shop.id,
+    t.defaultVariantId,
+    e?.id,
+    h,
+    g,
+    c
+  ]), b = A(
+    () => ({
+      // Core data
+      product: t,
+      selectedProductVariant: e,
+      // UI configuration
       variant: r,
       touchable: a,
-      onPress: R,
-      children: [
-        /* @__PURE__ */ y(X, { variant: r, children: [
-          /* @__PURE__ */ e(
-            Y,
-            {
-              src: F,
-              alt: T,
-              aspectRatio: 1,
-              thumbhash: I?.thumbhash ?? void 0
-            }
-          ),
-          r === "priceOverlay" && h && v && /* @__PURE__ */ e(k, { position: "top-left", children: U(v, h) }),
-          i && /* @__PURE__ */ e(k, { position: "bottom-left", variant: d, children: i }),
-          /* @__PURE__ */ e(
-            Z,
-            {
-              filled: p,
-              onPress: z
-            }
-          )
-        ] }),
-        /* @__PURE__ */ y(_, { variant: r, children: [
-          /* @__PURE__ */ e($, { children: x }),
-          /* @__PURE__ */ e(
-            D,
-            {
-              amount: v,
-              currencyCode: h,
-              compareAtPriceAmount: O,
-              compareAtPriceCurrencyCode: N?.currencyCode
-            }
-          )
-        ] })
-      ]
-    }
+      badgeText: n,
+      badgeVariant: i,
+      // State
+      isFavorited: f,
+      // Actions
+      onClick: y,
+      onFavoriteToggle: x
+    }),
+    [
+      t,
+      e,
+      r,
+      a,
+      n,
+      i,
+      f,
+      y,
+      x
+    ]
   );
+  return /* @__PURE__ */ o(I.Provider, { value: b, children: p ?? /* @__PURE__ */ v(L, { children: [
+    /* @__PURE__ */ v(M, { children: [
+      /* @__PURE__ */ o(R, {}),
+      r === "priceOverlay" && /* @__PURE__ */ o(J, {}),
+      /* @__PURE__ */ o(w, {}),
+      /* @__PURE__ */ o(q, {})
+    ] }),
+    r === "default" && /* @__PURE__ */ v(D, { children: [
+      /* @__PURE__ */ o(G, {}),
+      /* @__PURE__ */ o(H, {})
+    ] })
+  ] }) });
 }
 export {
-  pt as ProductCard
+  ot as ProductCard,
+  w as ProductCardBadge,
+  L as ProductCardContainer,
+  q as ProductCardFavoriteButton,
+  R as ProductCardImage,
+  M as ProductCardImageContainer,
+  D as ProductCardInfo,
+  H as ProductCardPrice,
+  G as ProductCardTitle
 };
 //# sourceMappingURL=product-card.js.map