@shopify/shop-minis-react 0.0.32 → 0.0.34

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

@@ -1,188 +1,204 @@
-import { jsx as e, jsxs as i, Fragment as w } from "react/jsx-runtime";
-import * as d from "react";
-import { cva as F } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { useShopNavigation as O } from "../../hooks/navigation/useShopNavigation.js";
-import { cn as l } from "../../lib/utils.js";
-import { isDarkColor as N } from "../../utils/colors.js";
-import { ThumbhashImage as H } from "../atoms/thumbhash-image.js";
-import { Touchable as P } from "../atoms/touchable.js";
-import { getFeaturedImages as V, extractBrandTheme as q, normalizeRating as L, formatReviewCount as U } from "../../utils/merchant-card.js";
-import E from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
-import { Root as G } 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 J = F(
-  "relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200",
-  {
-    variants: {
-      touchable: {
-        true: "cursor-pointer",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      touchable: !0
-    }
-  }
+import { jsx as e, jsxs as u, Fragment as p } from "react/jsx-runtime";
+import { useCallback as w, useMemo as f, createContext as N, useContext as y } from "react";
+import { useShopNavigation as T } from "../../hooks/navigation/useShopNavigation.js";
+import { cn as c } from "../../lib/utils.js";
+import { isDarkColor as b } from "../../utils/colors.js";
+import { Image as k } from "../atoms/image.js";
+import { Touchable as I } from "../atoms/touchable.js";
+import { extractBrandTheme as M, normalizeRating as z, formatReviewCount as j, getFeaturedImages as D } from "../../utils/merchant-card.js";
+import S from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
+const C = N(
+  void 0
 );
-function C({
-  className: t,
-  touchable: a = !0,
-  asChild: r = !1,
-  onPress: o,
-  ...n
+function i() {
+  const a = y(C);
+  if (!a)
+    throw new Error(
+      "useMerchantCardContext must be used within a MerchantCardProvider"
+    );
+  return a;
+}
+function B({
+  className: a,
+  ...r
 }) {
-  const m = /* @__PURE__ */ e(
-    r ? G : "div",
+  const { touchable: t, cardTheme: n, onClick: o } = i(), l = /* @__PURE__ */ e(
+    "div",
     {
-      className: l(J({ touchable: a }), t),
-      ...n
+      style: {
+        backgroundColor: n.backgroundColor
+      },
+      className: c(
+        "relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square",
+        a
+      ),
+      ...r
     }
   );
-  return a && o ? /* @__PURE__ */ e(
-    P,
+  return t && o ? /* @__PURE__ */ e(
+    I,
     {
       onClick: o,
       whileTap: { opacity: 0.7 },
       transition: {
         opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
       },
-      children: m
+      children: l
     }
-  ) : m;
+  ) : l;
 }
-function y({
-  className: t,
-  ...a
-}) {
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      "data-slot": "merchant-card-image-container",
-      className: l("relative overflow-hidden w-full flex-grow", t),
-      ...a
-    }
-  );
-}
-function g({
-  className: t,
-  src: a,
-  alt: r,
-  thumbhash: o,
-  ...n
+function v({
+  className: a,
+  src: r,
+  alt: t,
+  thumbhash: n,
+  ...o
 }) {
-  return a ? o ? /* @__PURE__ */ e(
-    H,
+  return r ? n ? /* @__PURE__ */ e(
+    k,
     {
       "data-slot": "merchant-card-image",
-      src: a,
-      alt: r,
-      thumbhash: o,
-      className: l("w-full h-full object-cover", t),
-      ...n
+      src: r,
+      alt: t,
+      thumbhash: n,
+      className: c(a),
+      ...o
     }
   ) : /* @__PURE__ */ e(
     "img",
     {
       "data-slot": "merchant-card-image",
-      src: a,
-      alt: r,
-      className: l("w-full h-full object-cover", t),
-      ...n
+      src: r,
+      alt: t,
+      className: c("size-full object-cover", a),
+      ...o
     }
   ) : /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-100" });
 }
-function v({
-  className: t,
-  src: a,
-  alt: r,
-  shopName: o,
-  ...n
-}) {
+function x({ className: a, ...r }) {
+  const { shop: t } = i(), { name: n, visualTheme: o } = t, l = o?.brandSettings?.colors?.logoAverage, d = o?.brandSettings?.colors?.logoDominant, m = l || d, h = f(
+    () => m && b(m) ? "bg-white" : "bg-gray-800",
+    [m]
+  ), s = o?.logoImage?.url, g = `${n} logo`;
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "merchant-card-logo",
-      className: l(
+      className: c(
         "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10",
         "w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm",
         "flex items-center justify-center overflow-hidden",
-        t
+        h,
+        a
       ),
-      ...n,
-      children: a ? /* @__PURE__ */ e("img", { src: a, alt: r, className: "w-full h-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-200 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-gray-600 font-semibold text-lg", children: o?.slice(0, 1) }) })
+      ...r,
+      children: s ? /* @__PURE__ */ e(
+        "img",
+        {
+          src: s,
+          alt: g,
+          className: "w-full h-full object-cover"
+        }
+      ) : /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-200 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-gray-600 font-semibold text-lg", children: n?.slice(0, 1) }) })
     }
   );
 }
-function k({ className: t, ...a }) {
+function R({ className: a, ...r }) {
+  const { cardTheme: t } = i(), o = f(() => t.backgroundColor !== "white" && b(t.backgroundColor), [t.backgroundColor]) ? "text-primary-foreground" : "text-foreground";
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "merchant-card-info",
-      className: l(
-        "p-3 space-y-2 flex-shrink-0 flex items-center justify-between",
-        t
+      className: c(
+        "p-3 flex-shrink-0 flex flex-col min-w-0",
+        o,
+        a
       ),
-      ...a
+      ...r
     }
   );
 }
-function I({
-  className: t,
-  children: a,
-  ...r
+function $({
+  className: a,
+  children: r,
+  ...t
 }) {
+  const { shop: n } = i(), { name: o } = n, l = r ?? o;
   return /* @__PURE__ */ e(
     "h3",
     {
       "data-slot": "merchant-card-name",
-      className: l(
-        "text-sm font-medium text-grayscale-d100",
-        "truncate overflow-hidden whitespace-nowrap text-ellipsis",
-        t
-      ),
-      ...r,
-      children: a
+      className: c("text-sm font-medium truncate", a),
+      ...t,
+      children: l
     }
   );
 }
-function M({
-  className: t,
-  rating: a,
-  reviewCount: r,
-  ...o
+function A({
+  className: a,
+  ...r
 }) {
-  return !a || !r ? null : /* @__PURE__ */ i(
+  const { shop: t } = i(), {
+    reviewAnalytics: { averageRating: n, reviewCount: o }
+  } = t;
+  return !n || !o ? null : /* @__PURE__ */ u(
     "div",
     {
       "data-slot": "merchant-card-rating",
-      className: l("flex items-center gap-1 text-xs", t),
-      ...o,
+      className: c("flex items-center gap-1 text-xs", a),
+      ...r,
       children: [
-        /* @__PURE__ */ e(E, { className: "h-3 w-3 fill-current" }),
-        /* @__PURE__ */ i("span", { className: "text-xs", children: [
-          L(a),
+        /* @__PURE__ */ e(S, { className: "h-3 w-3 fill-current" }),
+        /* @__PURE__ */ u("span", { className: "text-xs", children: [
+          z(n),
           " (",
-          U(r),
+          j(o),
           ")"
         ] })
       ]
     }
   );
 }
-function j({
-  shop: t,
-  cardTheme: a,
-  logoBackgroundClassName: r
-}) {
-  const o = t.visualTheme?.brandSettings?.headerTheme?.wordmark;
-  return /* @__PURE__ */ i("div", { className: "size-full relative", children: [
-    a.type === "coverImage" && /* @__PURE__ */ i(w, { children: [
+function F({ withLogo: a = !1 }) {
+  const { shop: r, cardTheme: t, featuredImagesLimit: n } = i(), { visualTheme: o } = r, l = f(
+    () => D(o, n),
+    [o, n]
+  ), d = l?.length ?? 0;
+  return /* @__PURE__ */ u("div", { className: "w-full h-full bg-muted relative flex flex-wrap overflow-hidden", children: [
+    a && /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ e(x, {}) }),
+    (() => {
+      if (d > 0) {
+        const h = d === 2 ? "h-full" : "h-1/2";
+        return l?.map((s, g) => /* @__PURE__ */ e("div", { className: `z-0 w-1/2 ${h}`, children: /* @__PURE__ */ e(
+          v,
+          {
+            src: s.url,
+            alt: s.altText ?? void 0,
+            thumbhash: s.thumbhash ?? void 0,
+            className: "aspect-square"
+          }
+        ) }, s.url || g));
+      } else if (t.type === "coverImage")
+        return /* @__PURE__ */ e(
+          v,
+          {
+            src: t.coverImageUrl,
+            thumbhash: t.coverImageThumbhash
+          }
+        );
+    })()
+  ] });
+}
+function H({ withLogo: a = !1 }) {
+  const { shop: r, cardTheme: t } = i(), n = r.visualTheme?.brandSettings?.headerTheme?.wordmark;
+  return /* @__PURE__ */ u("div", { className: "size-full relative", children: [
+    t.type === "coverImage" && /* @__PURE__ */ u(p, { children: [
       /* @__PURE__ */ e(
-        g,
+        v,
         {
-          src: a.coverImageUrl,
-          alt: t.name,
-          thumbhash: a.coverImageThumbhash ?? void 0,
-          className: "size-full"
+          src: t.coverImageUrl,
+          alt: r.name,
+          thumbhash: t.coverImageThumbhash ?? void 0
         }
       ),
       /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[1] bg-black/20" }),
@@ -191,146 +207,73 @@ function j({
         {
           className: "absolute bottom-0 z-[1] size-full",
           style: {
-            background: `linear-gradient(to top, ${a.backgroundColor} 0%, ${a.backgroundColor}00 40%)`
+            background: `linear-gradient(to top, ${t.backgroundColor} 0%, ${t.backgroundColor}00 40%)`
           }
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[1] flex items-center justify-center", children: o ? /* @__PURE__ */ e(
+    a && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-[1] flex items-center justify-center", children: n ? /* @__PURE__ */ e(
       "img",
       {
-        src: o.url,
-        alt: o.altText || t.name,
+        src: n.url,
+        alt: n.altText || r.name,
         className: "max-h-16 min-h-10 max-w-28 object-contain",
         "data-testid": "store-data-wordmark"
       }
-    ) : /* @__PURE__ */ e(
-      v,
-      {
-        src: t.visualTheme?.logoImage?.url,
-        alt: `${t.name} logo`,
-        shopName: t.name,
-        className: r
-      }
-    ) })
+    ) : /* @__PURE__ */ e(x, {}) })
   ] });
 }
-function oe({
-  shop: t,
-  touchable: a = !0,
-  fixedHeight: r = !1,
-  featuredImagesLimit: o = 4
+function U({
+  isDefault: a,
+  withLogo: r,
+  className: t,
+  ...n
 }) {
-  const { navigateToShop: n } = O(), {
-    id: f,
-    name: m,
-    reviewAnalytics: { averageRating: T, reviewCount: z },
-    visualTheme: s
-  } = t, S = d.useCallback(() => {
-    a && n({ shopId: f });
-  }, [n, f, a]), b = d.useMemo(
-    () => V(s, o),
-    [s, o]
-  ), R = b?.length ?? 0, B = s?.brandSettings?.colors?.logoAverage, D = s?.brandSettings?.colors?.logoDominant, h = B || D, x = d.useMemo(
-    () => h && N(h) ? "bg-white" : "bg-gray-800",
-    [h]
-  ), c = d.useMemo(
-    () => q(s?.brandSettings),
-    [s?.brandSettings]
-  ), p = d.useMemo(() => c.backgroundColor !== "white" && N(c.backgroundColor), [c.backgroundColor]) ? "text-primary-foreground" : "text-foreground", $ = c.type === "coverImage" || c.type === "brandColor";
-  return /* @__PURE__ */ e("div", { className: l("flex", r ? "" : "aspect-square"), children: /* @__PURE__ */ i(
-    C,
+  const { cardTheme: o } = i(), l = o.type === "coverImage" || o.type === "brandColor";
+  return /* @__PURE__ */ e(
+    "div",
     {
-      touchable: a,
-      onPress: S,
-      style: {
-        backgroundColor: c.backgroundColor
-      },
-      children: [
-        /* @__PURE__ */ e(
-          y,
-          {
-            className: l(
-              "relative overflow-hidden w-full",
-              r ? "h-[120px]" : "flex-1"
-            ),
-            children: $ ? /* @__PURE__ */ e(
-              j,
-              {
-                shop: t,
-                cardTheme: c,
-                logoBackgroundClassName: x
-              }
-            ) : /* @__PURE__ */ i(w, { children: [
-              /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ e(
-                v,
-                {
-                  src: s?.logoImage?.url,
-                  alt: `${m} logo`,
-                  shopName: m,
-                  className: x,
-                  "data-testid": "merchant-logo"
-                }
-              ) }),
-              R > 0 ? b?.map((u, A) => /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "z-0 flex h-full flex-1",
-                  children: /* @__PURE__ */ e(
-                    g,
-                    {
-                      src: u.url,
-                      alt: u.altText || "",
-                      thumbhash: u.thumbhash ?? void 0
-                    }
-                  )
-                },
-                u.url || A
-              )) : /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "h-20 bg-gray-100",
-                  "data-testid": "image-fallback"
-                }
-              )
-            ] })
-          }
-        ),
-        /* @__PURE__ */ e(k, { className: "flex items-center justify-between p-3", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-start gap-2", children: /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ e(
-            I,
-            {
-              className: l(
-                "line-clamp-1 overflow-hidden text-ellipsis",
-                p
-              ),
-              children: m
-            }
-          ),
-          /* @__PURE__ */ e(
-            M,
-            {
-              rating: T,
-              reviewCount: z,
-              className: p
-            }
-          )
-        ] }) }) })
-      ]
+      className: c("relative overflow-hidden flex-1 flex-wrap", t),
+      ...n,
+      children: l && !a ? /* @__PURE__ */ e(H, { withLogo: r }) : /* @__PURE__ */ e(F, { withLogo: r })
     }
-  ) });
+  );
+}
+function Q({
+  shop: a,
+  touchable: r = !0,
+  featuredImagesLimit: t = 4,
+  children: n
+}) {
+  const { navigateToShop: o } = T(), { id: l, visualTheme: d } = a, m = w(() => {
+    r && o({ shopId: l });
+  }, [o, l, r]), h = f(
+    () => M(d?.brandSettings),
+    [d?.brandSettings]
+  ), s = f(
+    () => ({
+      shop: a,
+      cardTheme: h,
+      touchable: r,
+      featuredImagesLimit: t,
+      onClick: m
+    }),
+    [a, h, r, t, m]
+  );
+  return /* @__PURE__ */ e(C.Provider, { value: s, children: n ?? /* @__PURE__ */ u(B, { children: [
+    /* @__PURE__ */ e(U, { withLogo: !0 }),
+    /* @__PURE__ */ u(R, { children: [
+      /* @__PURE__ */ e($, {}),
+      /* @__PURE__ */ e(A, {})
+    ] })
+  ] }) });
 }
-const le = Object.assign(C, {
-  ImageContainer: y,
-  Image: g,
-  Logo: v,
-  Info: k,
-  Name: I,
-  Rating: M,
-  BrandedHeader: j
-});
 export {
-  oe as MerchantCard,
-  le as MerchantCardPrimitive
+  Q as MerchantCard,
+  B as MerchantCardContainer,
+  U as MerchantCardHeader,
+  R as MerchantCardInfo,
+  $ as MerchantCardName,
+  A as MerchantCardRating
 };
 //# sourceMappingURL=merchant-card.js.map

package/dist/components/commerce/merchant-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Star} from 'lucide-react'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {\n  type ExtractedBrandTheme,\n  extractBrandTheme,\n  formatReviewCount,\n  getFeaturedImages,\n  normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {ThumbhashImage} from '../atoms/thumbhash-image'\nimport {Touchable} from '../atoms/touchable'\n\nconst merchantCardVariants = cva(\n  'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200',\n  {\n    variants: {\n      touchable: {\n        true: 'cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      touchable: true,\n    },\n  }\n)\n\nexport interface MerchantCardRootProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof merchantCardVariants> {\n  touchable?: boolean\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction MerchantCardRoot({\n  className,\n  touchable = true,\n  asChild = false,\n  onPress,\n  ...props\n}: MerchantCardRootProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div'\n\n  const content = (\n    <Comp\n      className={cn(merchantCardVariants({touchable}), className)}\n      {...props}\n    />\n  )\n\n  if (touchable && onPress) {\n    return (\n      <Touchable\n        onClick={onPress}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"merchant-card-image-container\"\n      className={cn('relative overflow-hidden w-full flex-grow', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  thumbhash?: string\n}) {\n  if (!src) {\n    return <div className=\"w-full h-full bg-gray-100\" />\n  }\n\n  if (thumbhash) {\n    return (\n      <ThumbhashImage\n        data-slot=\"merchant-card-image\"\n        src={src}\n        alt={alt}\n        thumbhash={thumbhash}\n        className={cn('w-full h-full object-cover', className)}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('w-full h-full object-cover', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardLogo({\n  className,\n  src,\n  alt,\n  shopName,\n  ...props\n}: React.ComponentProps<'div'> & {\n  src?: string\n  alt?: string\n  shopName?: string\n}) {\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',\n        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\n        'flex items-center justify-center overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        <img src={src} alt={alt} className=\"w-full h-full object-cover\" />\n      ) : (\n        <div className=\"w-full h-full bg-gray-200 flex items-center justify-center\">\n          <span className=\"text-gray-600 font-semibold text-lg\">\n            {shopName?.slice(0, 1)}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn(\n        'p-3 space-y-2 flex-shrink-0 flex items-center justify-between',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn(\n        'text-sm font-medium text-grayscale-d100',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n  rating,\n  reviewCount,\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  if (!rating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn('flex items-center gap-1 text-xs', className)}\n      {...props}\n    >\n      <Star className=\"h-3 w-3 fill-current\" />\n      <span className=\"text-xs\">\n        {normalizeRating(rating)} ({formatReviewCount(reviewCount)})\n      </span>\n    </div>\n  )\n}\n\nfunction MerchantCardBrandedHeader({\n  shop,\n  cardTheme,\n  logoBackgroundClassName,\n}: {\n  shop: Shop\n  cardTheme: ExtractedBrandTheme\n  logoBackgroundClassName?: string\n}) {\n  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n  return (\n    <div className=\"size-full relative\">\n      {cardTheme.type === 'coverImage' && (\n        <>\n          <MerchantCardImage\n            src={cardTheme.coverImageUrl}\n            alt={shop.name}\n            thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n            className=\"size-full\"\n          />\n\n          <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n          <div\n            className=\"absolute bottom-0 z-[1] size-full\"\n            style={{\n              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n            }}\n          />\n        </>\n      )}\n\n      <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n        {wordmarkImage ? (\n          <img\n            src={wordmarkImage.url}\n            alt={wordmarkImage.altText || shop.name}\n            className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n            data-testid=\"store-data-wordmark\"\n          />\n        ) : (\n          <MerchantCardLogo\n            src={shop.visualTheme?.logoImage?.url}\n            alt={`${shop.name} logo`}\n            shopName={shop.name}\n            className={logoBackgroundClassName}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n  fixedHeight?: boolean\n  featuredImagesLimit?: number\n}\n\nfunction MerchantCard({\n  shop,\n  touchable = true,\n  fixedHeight = false,\n  featuredImagesLimit = 4,\n}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {\n    id,\n    name,\n    reviewAnalytics: {averageRating, reviewCount},\n    visualTheme,\n  } = shop\n\n  const handlePress = React.useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  const featuredImages = React.useMemo(\n    () => getFeaturedImages(visualTheme, featuredImagesLimit),\n    [visualTheme, featuredImagesLimit]\n  )\n\n  const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n  const logoColor = logoAverageColor || logoDominantColor\n\n  const logoBackgroundClassName = React.useMemo(\n    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n    [logoColor]\n  )\n\n  const cardTheme = React.useMemo(\n    () => extractBrandTheme(visualTheme?.brandSettings),\n    [visualTheme?.brandSettings]\n  )\n\n  const isDarkTheme = React.useMemo(() => {\n    return (\n      cardTheme.backgroundColor !== 'white' &&\n      isDarkColor(cardTheme.backgroundColor)\n    )\n  }, [cardTheme.backgroundColor])\n\n  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n  const hasBrandedHeader =\n    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n  return (\n    <div className={cn('flex', fixedHeight ? '' : 'aspect-square')}>\n      <MerchantCardRoot\n        touchable={touchable}\n        onPress={handlePress}\n        style={{\n          backgroundColor: cardTheme.backgroundColor,\n        }}\n      >\n        <MerchantCardImageContainer\n          className={cn(\n            'relative overflow-hidden w-full',\n            fixedHeight ? 'h-[120px]' : 'flex-1'\n          )}\n        >\n          {hasBrandedHeader ? (\n            <MerchantCardBrandedHeader\n              shop={shop}\n              cardTheme={cardTheme}\n              logoBackgroundClassName={logoBackgroundClassName}\n            />\n          ) : (\n            <>\n              <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n                <MerchantCardLogo\n                  src={visualTheme?.logoImage?.url}\n                  alt={`${name} logo`}\n                  shopName={name}\n                  className={logoBackgroundClassName}\n                  data-testid=\"merchant-logo\"\n                />\n              </div>\n\n              {numberOfFeaturedImages > 0 ? (\n                featuredImages?.map((image, index) => (\n                  <div\n                    className=\"z-0 flex h-full flex-1\"\n                    key={image.url || index}\n                  >\n                    <MerchantCardImage\n                      src={image.url}\n                      alt={image.altText || ''}\n                      thumbhash={image.thumbhash ?? undefined}\n                    />\n                  </div>\n                ))\n              ) : (\n                <div\n                  className=\"h-20 bg-gray-100\"\n                  data-testid=\"image-fallback\"\n                />\n              )}\n            </>\n          )}\n        </MerchantCardImageContainer>\n\n        <MerchantCardInfo className=\"flex items-center justify-between p-3\">\n          <div className=\"flex flex-col items-start gap-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              <MerchantCardName\n                className={cn(\n                  'line-clamp-1 overflow-hidden text-ellipsis',\n                  textColor\n                )}\n              >\n                {name}\n              </MerchantCardName>\n\n              <MerchantCardRating\n                rating={averageRating}\n                reviewCount={reviewCount}\n                className={textColor}\n              />\n            </div>\n          </div>\n        </MerchantCardInfo>\n      </MerchantCardRoot>\n    </div>\n  )\n}\n\nexport const MerchantCardPrimitive = Object.assign(MerchantCardRoot, {\n  ImageContainer: MerchantCardImageContainer,\n  Image: MerchantCardImage,\n  Logo: MerchantCardLogo,\n  Info: MerchantCardInfo,\n  Name: MerchantCardName,\n  Rating: MerchantCardRating,\n  BrandedHeader: MerchantCardBrandedHeader,\n})\n\nexport {MerchantCard}\n"],"names":["merchantCardVariants","cva","MerchantCardRoot","className","touchable","asChild","onPress","props","content","jsx","SlotPrimitive.Slot","cn","Touchable","MerchantCardImageContainer","MerchantCardImage","src","alt","thumbhash","ThumbhashImage","MerchantCardLogo","shopName","MerchantCardInfo","MerchantCardName","children","MerchantCardRating","rating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardBrandedHeader","shop","cardTheme","logoBackgroundClassName","wordmarkImage","Fragment","MerchantCard","fixedHeight","featuredImagesLimit","navigateToShop","useShopNavigation","id","name","averageRating","visualTheme","handlePress","React","featuredImages","getFeaturedImages","numberOfFeaturedImages","logoAverageColor","logoDominantColor","logoColor","isDarkColor","extractBrandTheme","textColor","hasBrandedHeader","image","index","MerchantCardPrimitive"],"mappings":"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"}
+{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useCallback, useContext, useMemo} from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {Star} from 'lucide-react'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {\n  type ExtractedBrandTheme,\n  extractBrandTheme,\n  formatReviewCount,\n  getFeaturedImages,\n  normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {Image} from '../atoms/image'\nimport {Touchable} from '../atoms/touchable'\n\ninterface MerchantCardContextValue {\n  // Core data\n  shop: Shop\n\n  // Derived data\n  cardTheme: ExtractedBrandTheme\n\n  // UI configuration\n  touchable: boolean\n  featuredImagesLimit: number\n\n  // Actions\n  onClick: () => void\n}\n\nconst MerchantCardContext = createContext<MerchantCardContextValue | undefined>(\n  undefined\n)\n\nfunction useMerchantCardContext() {\n  const context = useContext(MerchantCardContext)\n  if (!context) {\n    throw new Error(\n      'useMerchantCardContext must be used within a MerchantCardProvider'\n    )\n  }\n  return context\n}\n\nfunction MerchantCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, cardTheme, onClick} = useMerchantCardContext()\n\n  const content = (\n    <div\n      style={{\n        backgroundColor: cardTheme.backgroundColor,\n      }}\n      className={cn(\n        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square',\n\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  thumbhash?: string\n}) {\n  if (!src) {\n    return <div className=\"w-full h-full bg-gray-100\" />\n  }\n\n  if (thumbhash) {\n    return (\n      <Image\n        data-slot=\"merchant-card-image\"\n        src={src}\n        alt={alt}\n        thumbhash={thumbhash}\n        className={cn(className)}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('size-full object-cover', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardLogo({className, ...props}: React.ComponentProps<'div'>) {\n  const {shop} = useMerchantCardContext()\n  const {name, visualTheme} = shop\n\n  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n  const logoColor = logoAverageColor || logoDominantColor\n\n  const logoBackgroundClassName = useMemo(\n    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n    [logoColor]\n  )\n\n  const logoUrl = visualTheme?.logoImage?.url\n  const altText = `${name} logo`\n\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',\n        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\n        'flex items-center justify-center overflow-hidden',\n        logoBackgroundClassName,\n        className\n      )}\n      {...props}\n    >\n      {logoUrl ? (\n        <img\n          src={logoUrl}\n          alt={altText}\n          className=\"w-full h-full object-cover\"\n        />\n      ) : (\n        <div className=\"w-full h-full bg-gray-200 flex items-center justify-center\">\n          <span className=\"text-gray-600 font-semibold text-lg\">\n            {name?.slice(0, 1)}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isDarkTheme = useMemo(() => {\n    return (\n      cardTheme.backgroundColor !== 'white' &&\n      isDarkColor(cardTheme.backgroundColor)\n    )\n  }, [cardTheme.backgroundColor])\n\n  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn(\n        'p-3 flex-shrink-0 flex flex-col min-w-0',\n        textColor,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {shop} = useMerchantCardContext()\n  const {name} = shop\n  const nameContent = children ?? name\n\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn('text-sm font-medium truncate', className)}\n      {...props}\n    >\n      {nameContent}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  const {shop} = useMerchantCardContext()\n\n  const {\n    reviewAnalytics: {averageRating, reviewCount},\n  } = shop\n\n  if (!averageRating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn('flex items-center gap-1 text-xs', className)}\n      {...props}\n    >\n      <Star className=\"h-3 w-3 fill-current\" />\n      <span className=\"text-xs\">\n        {normalizeRating(averageRating)} ({formatReviewCount(reviewCount)})\n      </span>\n    </div>\n  )\n}\n\nfunction MerchantCardDefaultHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme, featuredImagesLimit} = useMerchantCardContext()\n  const {visualTheme} = shop\n\n  const featuredImages = useMemo(\n    () => getFeaturedImages(visualTheme, featuredImagesLimit),\n    [visualTheme, featuredImagesLimit]\n  )\n\n  const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n  const displayDefaultCover = () => {\n    if (numberOfFeaturedImages > 0) {\n      const heightClass = numberOfFeaturedImages === 2 ? 'h-full' : 'h-1/2'\n      return featuredImages?.map((image, index) => (\n        <div className={`z-0 w-1/2 ${heightClass}`} key={image.url || index}>\n          <MerchantCardImage\n            src={image.url}\n            alt={image.altText ?? undefined}\n            thumbhash={image.thumbhash ?? undefined}\n            className=\"aspect-square\"\n          />\n        </div>\n      ))\n    } else if (cardTheme.type === 'coverImage') {\n      return (\n        <MerchantCardImage\n          src={cardTheme.coverImageUrl}\n          thumbhash={cardTheme.coverImageThumbhash}\n        />\n      )\n    }\n  }\n\n  return (\n    <div className=\"w-full h-full bg-muted relative flex flex-wrap overflow-hidden\">\n      {withLogo && (\n        <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n          <MerchantCardLogo />\n        </div>\n      )}\n\n      {displayDefaultCover()}\n    </div>\n  )\n}\n\nfunction MerchantCardBrandedHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme} = useMerchantCardContext()\n  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n  return (\n    <div className=\"size-full relative\">\n      {cardTheme.type === 'coverImage' && (\n        <>\n          <MerchantCardImage\n            src={cardTheme.coverImageUrl}\n            alt={shop.name}\n            thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n          />\n\n          <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n          <div\n            className=\"absolute bottom-0 z-[1] size-full\"\n            style={{\n              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n            }}\n          />\n        </>\n      )}\n\n      {withLogo && (\n        <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n          {wordmarkImage ? (\n            <img\n              src={wordmarkImage.url}\n              alt={wordmarkImage.altText || shop.name}\n              className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n              data-testid=\"store-data-wordmark\"\n            />\n          ) : (\n            <MerchantCardLogo />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\ninterface MerchantCardHeaderProps {\n  isDefault?: boolean\n  withLogo?: boolean\n}\n\nfunction MerchantCardHeader({\n  isDefault,\n  withLogo,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & MerchantCardHeaderProps) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isBranded =\n    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n  return (\n    <div\n      className={cn('relative overflow-hidden flex-1 flex-wrap', className)}\n      {...props}\n    >\n      {isBranded && !isDefault ? (\n        <MerchantCardBrandedHeader withLogo={withLogo} />\n      ) : (\n        <MerchantCardDefaultHeader withLogo={withLogo} />\n      )}\n    </div>\n  )\n}\n\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n  featuredImagesLimit?: number\n  children?: React.ReactNode\n}\n\nfunction MerchantCard({\n  shop,\n  touchable = true,\n  featuredImagesLimit = 4,\n  children,\n}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {id, visualTheme} = shop\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  const cardTheme = useMemo(\n    () => extractBrandTheme(visualTheme?.brandSettings),\n    [visualTheme?.brandSettings]\n  )\n\n  const contextValue = useMemo<MerchantCardContextValue>(\n    () => ({\n      shop,\n      cardTheme,\n      touchable,\n      featuredImagesLimit,\n      onClick: handleClick,\n    }),\n    [shop, cardTheme, touchable, featuredImagesLimit, handleClick]\n  )\n\n  return (\n    <MerchantCardContext.Provider value={contextValue}>\n      {children ?? (\n        <MerchantCardContainer>\n          <MerchantCardHeader withLogo />\n          <MerchantCardInfo>\n            <MerchantCardName />\n            <MerchantCardRating />\n          </MerchantCardInfo>\n        </MerchantCardContainer>\n      )}\n    </MerchantCardContext.Provider>\n  )\n}\n\nexport {\n  MerchantCard,\n  MerchantCardContainer,\n  MerchantCardHeader,\n  MerchantCardInfo,\n  MerchantCardName,\n  MerchantCardRating,\n}\n"],"names":["MerchantCardContext","createContext","useMerchantCardContext","context","useContext","MerchantCardContainer","className","props","touchable","cardTheme","onClick","content","jsx","cn","Touchable","MerchantCardImage","src","alt","thumbhash","Image","MerchantCardLogo","shop","name","visualTheme","logoAverageColor","logoDominantColor","logoColor","logoBackgroundClassName","useMemo","isDarkColor","logoUrl","altText","MerchantCardInfo","textColor","MerchantCardName","children","nameContent","MerchantCardRating","averageRating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardDefaultHeader","withLogo","featuredImagesLimit","featuredImages","getFeaturedImages","numberOfFeaturedImages","heightClass","image","index","MerchantCardBrandedHeader","wordmarkImage","Fragment","MerchantCardHeader","isDefault","isBranded","MerchantCard","navigateToShop","useShopNavigation","id","handleClick","useCallback","extractBrandTheme","contextValue"],"mappings":"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"}