@trail-ui/react/dist/image/image.js

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/image/image.tsx
var image_exports = {};
__export(image_exports, {
  Image: () => _Image
});
module.exports = __toCommonJS(image_exports);
var import_hooks = require("@trail-ui/hooks");
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
function Image(props, ref) {
  const variantProps = (0, import_theme.filterVariantProps)(props, import_theme.image.variantKeys);
  const {
    as,
    src,
    srcSet,
    sizes,
    crossOrigin,
    className,
    classNames,
    isLoading: isLoadingProp,
    fallbackSrc,
    disableSkeleton = !!fallbackSrc,
    loading,
    removeWrapper,
    onLoad,
    onError,
    ...otherProps
  } = props;
  const Component = as || "img";
  const imageStatus = (0, import_hooks.useImage)({
    src,
    srcSet,
    sizes,
    crossOrigin,
    loading,
    onLoad,
    onError,
    ignoreFallback: false
  });
  const isImgLoaded = imageStatus === "loaded" && !isLoadingProp;
  const isLoading = imageStatus === "loading" || isLoadingProp;
  const isZoomed = props.isZoomed;
  const showFallback = (!src || !isImgLoaded) && !!fallbackSrc;
  const showSkeleton = isLoading && !disableSkeleton;
  const { w } = (0, import_react.useMemo)(() => {
    return {
      w: props.width ? typeof props.width === "number" ? `${props.width}px` : props.width : "fit-content"
    };
  }, [props == null ? void 0 : props.width]);
  const slots = (0, import_react.useMemo)(
    () => (0, import_theme.image)({
      ...variantProps,
      showSkeleton
    }),
    [showSkeleton, variantProps]
  );
  const imgStyles = (0, import_shared_utils.clsx)(className, classNames == null ? void 0 : classNames.img);
  const img = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    Component,
    {
      ref,
      className: slots.img({ class: imgStyles }),
      src,
      srcSet,
      sizes,
      crossOrigin,
      "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
      ...otherProps
    }
  );
  if (removeWrapper) {
    return img;
  }
  const zoomed = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.zoomedWrapper({ class: classNames == null ? void 0 : classNames.zoomedWrapper }), children: img });
  if (isZoomed || !disableSkeleton || fallbackSrc) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
        style: {
          maxWidth: w,
          backgroundImage: showFallback ? `url(${fallbackSrc})` : void 0
        },
        children: isZoomed ? zoomed : img
      }
    );
  }
  return img;
}
var _Image = (0, import_react.forwardRef)(Image);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Image
});