@shopify/shop-minis-react/dist/components/atoms/image.js

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

import { jsxs as y, jsx as m } from "react/jsx-runtime";
import { memo as I, useState as b, useEffect as f, useMemo as d, useCallback as N } from "react";
import { cn as r } from "../../lib/utils.js";
import { getThumbhashBlobURL as k, getResizedImageUrl as w } from "../../utils/image.js";
const C = I(function(h) {
  const {
    src: l,
    file: s,
    thumbhash: c,
    onLoad: u,
    className: L,
    style: U,
    aspectRatio: t = "auto",
    objectFit: p = "contain",
    ...R
  } = h, [i, g] = b(!1), [a, n] = b(null);
  f(() => {
    if (!s) {
      n(null);
      return;
    }
    const o = URL.createObjectURL(s);
    return n(o), () => {
      URL.revokeObjectURL(o);
    };
  }, [s]);
  const e = d(
    () => k(c ?? void 0),
    [c]
  );
  f(() => () => {
    e && URL.revokeObjectURL(e);
  }, [e]);
  const j = N(
    (o) => {
      g(!0), u?.(o);
    },
    [u]
  ), v = d(() => a || w(l), [a, l]);
  return /* @__PURE__ */ y(
    "div",
    {
      className: r("relative w-full", L),
      style: {
        ...U,
        ...t !== "auto" && { aspectRatio: t }
      },
      children: [
        e && !i && /* @__PURE__ */ m(
          "img",
          {
            className: r(
              t === "auto" ? "w-full h-auto" : "absolute inset-0 size-full",
              "object-cover"
            ),
            src: e,
            "aria-hidden": "true"
          }
        ),
        /* @__PURE__ */ m(
          "img",
          {
            className: r(
              t === "auto" ? "opacity-0 w-full h-auto" : "absolute inset-0 opacity-0 size-full",
              `object-${p}`,
              i && "opacity-100"
            ),
            src: v,
            onLoad: j,
            ...R
          }
        )
      ]
    }
  );
});
export {
  C as Image
};
//# sourceMappingURL=image.js.map