@shopify/shop-minis-react/dist/components/commerce/merchant-card.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { jsxs as i, jsx as r, Fragment as x } from "react/jsx-runtime";
import * as C from "react";
import { cva as N } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
import { useShopNavigation as y } from "../../hooks/navigation/useShopNavigation.js";
import { cn as o } from "../../lib/utils.js";
import { Touchable as M } from "../atoms/touchable.js";
import b from "../../node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
import { Root as I } from "../../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 R = N(
  "relative w-full aspect-square overflow-hidden rounded-xl border border-grayscale-l20 bg-grayscale-l0 flex flex-col",
  {
    variants: {
      touchable: {
        true: "cursor-pointer",
        false: ""
      }
    },
    defaultVariants: {
      touchable: !0
    }
  }
);
function j(e) {
  return e >= 1e6 ? `${Math.floor(e / 1e5) / 10}M` : e >= 1e3 ? `${Math.floor(e / 1e3)}K` : e.toString();
}
function S(e) {
  return Math.round(e * 10) / 10;
}
function d({
  className: e,
  touchable: a = !0,
  asChild: t = !1,
  onPress: n,
  ...l
}) {
  const c = /* @__PURE__ */ r(
    t ? I : "div",
    {
      className: o(R({ touchable: a }), e),
      ...l
    }
  );
  return a && n ? /* @__PURE__ */ r(
    M,
    {
      onClick: n,
      whileTap: { opacity: 0.7 },
      transition: {
        opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
      },
      children: c
    }
  ) : c;
}
function m({
  className: e,
  ...a
}) {
  return /* @__PURE__ */ r(
    "div",
    {
      "data-slot": "merchant-card-image-container",
      className: o("relative overflow-hidden w-full flex-grow", e),
      ...a
    }
  );
}
function f({
  className: e,
  src: a,
  alt: t,
  ...n
}) {
  return a ? /* @__PURE__ */ r(
    "img",
    {
      "data-slot": "merchant-card-image",
      src: a,
      alt: t,
      className: o("w-full h-full object-cover", e),
      ...n
    }
  ) : /* @__PURE__ */ r("div", { className: "w-full h-full bg-grayscale-l10" });
}
function u({
  className: e,
  src: a,
  alt: t,
  ...n
}) {
  return /* @__PURE__ */ r(
    "div",
    {
      "data-slot": "merchant-card-logo",
      className: o(
        "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
        "w-14 h-14 rounded-xl",
        "flex items-center justify-center overflow-hidden",
        e
      ),
      ...n,
      children: a ? /* @__PURE__ */ r("img", { src: a, alt: t, className: "w-full h-full object-cover" }) : /* @__PURE__ */ r("div", { className: "w-full h-full bg-grayscale-l20" })
    }
  );
}
function h({ className: e, ...a }) {
  return /* @__PURE__ */ r(
    "div",
    {
      "data-slot": "merchant-card-info",
      className: o("p-3 space-y-1 flex-shrink-0", e),
      ...a
    }
  );
}
function g({
  className: e,
  children: a,
  ...t
}) {
  return /* @__PURE__ */ r(
    "h3",
    {
      "data-slot": "merchant-card-name",
      className: o(
        "text-sm font-medium text-grayscale-d100",
        "truncate overflow-hidden whitespace-nowrap text-ellipsis",
        e
      ),
      ...t,
      children: a
    }
  );
}
function p({
  className: e,
  rating: a,
  reviewCount: t,
  ...n
}) {
  return !a || !t ? null : /* @__PURE__ */ i(
    "div",
    {
      "data-slot": "merchant-card-rating",
      className: o(
        "flex items-center gap-1 text-sm text-grayscale-d100",
        e
      ),
      ...n,
      children: [
        /* @__PURE__ */ r(b, { className: "h-3.5 w-3.5 fill-current" }),
        /* @__PURE__ */ i(x, { children: [
          S(a),
          " (",
          j(t),
          ")"
        ] })
      ]
    }
  );
}
function q({ shop: e, touchable: a = !0 }) {
  const { navigateToShop: t } = y(), {
    id: n,
    name: l,
    logoImage: s,
    reviewAnalytics: { averageRating: c, reviewCount: v }
  } = e, w = C.useCallback(() => {
    a && t({ shopId: n });
  }, [t, n, a]);
  return /* @__PURE__ */ i(d, { touchable: a, onPress: w, children: [
    /* @__PURE__ */ i(m, { children: [
      /* @__PURE__ */ r(f, { src: void 0, alt: `${l} featured image` }),
      /* @__PURE__ */ r(u, { src: s?.url, alt: `${l} logo` })
    ] }),
    /* @__PURE__ */ i(h, { children: [
      /* @__PURE__ */ r(g, { children: l }),
      /* @__PURE__ */ r(p, { rating: c, reviewCount: v })
    ] })
  ] });
}
const z = Object.assign(d, {
  ImageContainer: m,
  Image: f,
  Logo: u,
  Info: h,
  Name: g,
  Rating: p
});
export {
  q as MerchantCard,
  f as MerchantCardImage,
  m as MerchantCardImageContainer,
  h as MerchantCardInfo,
  u as MerchantCardLogo,
  g as MerchantCardName,
  z as MerchantCardPrimitive,
  p as MerchantCardRating,
  d as MerchantCardRoot
};
//# sourceMappingURL=merchant-card.js.map