@vela-ui/react/dist/components/avatar.js

Vela UI React components

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/avatar.tsx
var avatar_exports = {};
__export(avatar_exports, {
  Avatar: () => Avatar,
  AvatarFallback: () => AvatarFallback,
  AvatarImage: () => AvatarImage
});
module.exports = __toCommonJS(avatar_exports);
var import_react2 = __toESM(require("react"));
var import_tailwind_variants = require("tailwind-variants");

// src/hooks/use-callback-ref.ts
var import_react = require("react");
function useCallbackRef(callback, deps = []) {
  const callbackRef = (0, import_react.useRef)(() => {
    throw new Error("Cannot call an event handler while rendering.");
  });
  (0, import_react.useInsertionEffect)(() => {
    callbackRef.current = callback;
  });
  return (0, import_react.useCallback)((...args) => {
    var _a;
    return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
  }, deps);
}

// src/hooks/use-is-hydrated.ts
var React = __toESM(require("react"));
function useIsHydrated() {
  const subscribe = () => () => {
  };
  return React.useSyncExternalStore(
    subscribe,
    () => true,
    () => false
  );
}

// src/lib/context.ts
var React2 = __toESM(require("react"));
function createContext2(options = {}) {
  const {
    strict = true,
    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
    name
  } = options;
  const Context = React2.createContext(void 0);
  Context.displayName = name;
  function useContext2() {
    var _a;
    const context = React2.useContext(Context);
    if (!context && strict) {
      const error = new Error(errorMessage);
      error.name = "ContextError";
      (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext2);
      throw error;
    }
    return context;
  }
  return [Context.Provider, useContext2, Context];
}

// src/components/avatar.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var avatarVariants = (0, import_tailwind_variants.tv)({
  slots: {
    root: "relative inline-flex shrink-0 overflow-hidden",
    image: "aspect-square size-full",
    fallback: "bg-muted flex size-full items-center justify-center select-none"
  },
  variants: {
    size: {
      sm: { root: "size-8" },
      md: { root: "size-10" },
      lg: { root: "size-12" }
    },
    shape: {
      circle: { root: "rounded-full" },
      square: { root: "rounded-sm" }
    }
  },
  defaultVariants: {
    size: "md",
    shape: "circle"
  }
});
var { root, image, fallback } = avatarVariants();
var [AvatarProvider, useAvatarContext] = createContext2({
  name: "AvatarContext"
});
function Avatar({ className, shape, size, ...props }) {
  const [imageLoadingStatus, setImageLoadingStatus] = import_react2.default.useState("idle");
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    AvatarProvider,
    {
      value: {
        shape,
        size,
        imageLoadingStatus,
        onImageLoadingStatusChange: setImageLoadingStatus
      },
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-slot": "avatar", className: root({ className, shape, size }), ...props })
    }
  );
}
function AvatarImage({
  src,
  className,
  onLoadingStatusChange = () => {
  },
  ...props
}) {
  const context = useAvatarContext();
  const imageLoadingStatus = useImageLoadingStatus(src, props);
  const handleLoadingStatusChange = useCallbackRef((status) => {
    onLoadingStatusChange(status);
    context.onImageLoadingStatusChange(status);
  });
  (0, import_react2.useLayoutEffect)(() => {
    if (imageLoadingStatus !== "idle") {
      handleLoadingStatusChange(imageLoadingStatus);
    }
  }, [imageLoadingStatus, handleLoadingStatusChange]);
  return imageLoadingStatus === "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { "data-slot": "avatar-image", className: image({ className }), src, ...props }) : null;
}
function AvatarFallback({ className, delayMs, ...props }) {
  const context = useAvatarContext();
  const [canRender, setCanRender] = (0, import_react2.useState)(delayMs === void 0);
  (0, import_react2.useEffect)(() => {
    if (delayMs !== void 0) {
      const timerId = window.setTimeout(() => setCanRender(true), delayMs);
      return () => window.clearTimeout(timerId);
    }
  }, [delayMs]);
  return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-slot": "avatar-fallback", className: fallback({ className }), ...props }) : null;
}
function resolveLoadingStatus(image2, src) {
  if (!image2) {
    return "idle";
  }
  if (!src) {
    return "error";
  }
  if (image2.src !== src) {
    image2.src = src;
  }
  return image2.complete && image2.naturalWidth > 0 ? "loaded" : "loading";
}
function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
  const isHydrated = useIsHydrated();
  const imageRef = import_react2.default.useRef(null);
  const image2 = (() => {
    if (!isHydrated) return null;
    if (!imageRef.current) {
      imageRef.current = new window.Image();
    }
    return imageRef.current;
  })();
  const [loadingStatus, setLoadingStatus] = import_react2.default.useState(
    () => resolveLoadingStatus(image2, src)
  );
  (0, import_react2.useLayoutEffect)(() => {
    setLoadingStatus(resolveLoadingStatus(image2, src));
  }, [image2, src]);
  (0, import_react2.useLayoutEffect)(() => {
    const updateStatus = (status) => () => {
      setLoadingStatus(status);
    };
    if (!image2) return;
    const handleLoad = updateStatus("loaded");
    const handleError = updateStatus("error");
    image2.addEventListener("load", handleLoad);
    image2.addEventListener("error", handleError);
    if (referrerPolicy) {
      image2.referrerPolicy = referrerPolicy;
    }
    if (typeof crossOrigin === "string") {
      image2.crossOrigin = crossOrigin;
    }
    return () => {
      image2.removeEventListener("load", handleLoad);
      image2.removeEventListener("error", handleError);
    };
  }, [image2, crossOrigin, referrerPolicy]);
  return loadingStatus;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Avatar,
  AvatarFallback,
  AvatarImage
});