@avyn/initials-avatar-react 1.0.0

package/dist/index.cjs

@@ -0,0 +1,78 @@
+"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/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  InitialsAvatar: () => InitialsAvatar,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_initials_avatar = require("@avyn/initials-avatar");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_SIZE = 96;
+var InitialsAvatar = ({
+  name,
+  alt,
+  as = "img",
+  className,
+  style,
+  title,
+  imgProps,
+  svgProps,
+  ...avatarOptions
+}) => {
+  const size = avatarOptions.size ?? DEFAULT_SIZE;
+  const memoKey = (0, import_react.useMemo)(() => JSON.stringify(avatarOptions), [avatarOptions]);
+  const dataUri = (0, import_react.useMemo)(() => (0, import_initials_avatar.createAvatarDataUri)(name, avatarOptions), [name, memoKey]);
+  const svgMarkup = (0, import_react.useMemo)(() => (0, import_initials_avatar.createAvatarSvg)(name, avatarOptions), [name, memoKey]);
+  const fallbackAlt = alt ?? `Avatar for ${name || (0, import_initials_avatar.getInitials)(name)}`;
+  if (as === "svg") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className,
+        style,
+        dangerouslySetInnerHTML: { __html: svgMarkup },
+        "aria-label": fallbackAlt,
+        role: "img",
+        ...svgProps
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      src: dataUri,
+      width: size,
+      height: size,
+      alt: fallbackAlt,
+      className,
+      style,
+      title,
+      ...imgProps
+    }
+  );
+};
+var index_default = InitialsAvatar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InitialsAvatar
+});

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import React, { CSSProperties, ImgHTMLAttributes, HTMLAttributes } from 'react';
+import { AvatarOptions } from '@avyn/initials-avatar';
+export { AvatarOptions } from '@avyn/initials-avatar';
+
+type InitialsAvatarProps = AvatarOptions & {
+    /** Name used to derive initials */
+    name: string;
+    /** Accessible alternative text; falls back to the provided name */
+    alt?: string;
+    /** Render as <img> (default) or inline <svg> */
+    as?: 'img' | 'svg';
+    /** Optional CSS class */
+    className?: string;
+    /** Optional style object */
+    style?: CSSProperties;
+    /** Optional title attribute */
+    title?: string;
+    /** Extra props passed to the underlying <img> element */
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'title'>;
+    /** Extra props passed to the inline <span> wrapper */
+    svgProps?: Omit<HTMLAttributes<HTMLSpanElement>, 'dangerouslySetInnerHTML'>;
+};
+declare const InitialsAvatar: React.FC<InitialsAvatarProps>;
+
+export { InitialsAvatar, type InitialsAvatarProps, InitialsAvatar as default };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import React, { CSSProperties, ImgHTMLAttributes, HTMLAttributes } from 'react';
+import { AvatarOptions } from '@avyn/initials-avatar';
+export { AvatarOptions } from '@avyn/initials-avatar';
+
+type InitialsAvatarProps = AvatarOptions & {
+    /** Name used to derive initials */
+    name: string;
+    /** Accessible alternative text; falls back to the provided name */
+    alt?: string;
+    /** Render as <img> (default) or inline <svg> */
+    as?: 'img' | 'svg';
+    /** Optional CSS class */
+    className?: string;
+    /** Optional style object */
+    style?: CSSProperties;
+    /** Optional title attribute */
+    title?: string;
+    /** Extra props passed to the underlying <img> element */
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'title'>;
+    /** Extra props passed to the inline <span> wrapper */
+    svgProps?: Omit<HTMLAttributes<HTMLSpanElement>, 'dangerouslySetInnerHTML'>;
+};
+declare const InitialsAvatar: React.FC<InitialsAvatarProps>;
+
+export { InitialsAvatar, type InitialsAvatarProps, InitialsAvatar as default };

package/dist/index.js

@@ -0,0 +1,53 @@
+// src/index.tsx
+import { useMemo } from "react";
+import { createAvatarDataUri, createAvatarSvg, getInitials } from "@avyn/initials-avatar";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_SIZE = 96;
+var InitialsAvatar = ({
+  name,
+  alt,
+  as = "img",
+  className,
+  style,
+  title,
+  imgProps,
+  svgProps,
+  ...avatarOptions
+}) => {
+  const size = avatarOptions.size ?? DEFAULT_SIZE;
+  const memoKey = useMemo(() => JSON.stringify(avatarOptions), [avatarOptions]);
+  const dataUri = useMemo(() => createAvatarDataUri(name, avatarOptions), [name, memoKey]);
+  const svgMarkup = useMemo(() => createAvatarSvg(name, avatarOptions), [name, memoKey]);
+  const fallbackAlt = alt ?? `Avatar for ${name || getInitials(name)}`;
+  if (as === "svg") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className,
+        style,
+        dangerouslySetInnerHTML: { __html: svgMarkup },
+        "aria-label": fallbackAlt,
+        role: "img",
+        ...svgProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: dataUri,
+      width: size,
+      height: size,
+      alt: fallbackAlt,
+      className,
+      style,
+      title,
+      ...imgProps
+    }
+  );
+};
+var index_default = InitialsAvatar;
+export {
+  InitialsAvatar,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@avyn/initials-avatar-react",
+  "version": "1.0.0",
+  "description": "React component wrapper for @avyn/initials-avatar",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --clean"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@avyn/initials-avatar": "1.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.2.4",
+    "typescript": "^5.6.3"
+  },
+  "sideEffects": false,
+  "author": "@avyn",
+  "license": "MIT"
+}