@avyn/initials-avatar 1.0.0

package/dist/chunk-PMFHYTR7.js

@@ -0,0 +1,153 @@
+// src/index.ts
+var DEFAULT_SIZE = 96;
+var DEFAULT_FONT_FAMILY = '"Segoe UI", Arial, sans-serif';
+function getInitials(name) {
+  const cleaned = (name ?? "").trim();
+  if (!cleaned) return "?";
+  const parts = cleaned.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) {
+    const [firstChar, secondChar] = [...parts[0]].filter(Boolean);
+    return (firstChar ?? "").toUpperCase() + (secondChar ?? "").toUpperCase();
+  }
+  const first = parts[0]?.[0] ?? "";
+  const last = parts[parts.length - 1]?.[0] ?? "";
+  return `${first}${last}`.toUpperCase();
+}
+function createAvatarSvg(name, options = {}) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const backgroundColor = options.backgroundColor ?? stringToColor(name);
+  const fontColor = options.fontColor ?? "#ffffff";
+  const fontSize = options.fontSize ?? Math.round(size * 0.42);
+  const fontFamily = options.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const borderWidth = options.borderWidth ?? 0;
+  const borderColor = options.borderColor ?? "transparent";
+  const borderRadius = clamp(options.borderRadius ?? size * 0.2, 0, size / 2);
+  const fontWeight = options.bold ? 700 : 600;
+  const initials = (options.initialsOverride ?? getInitials(name)).slice(0, 3);
+  const ariaLabel = name && name.trim().length > 0 ? name.trim() : "Avatar";
+  return [
+    '<svg xmlns="http://www.w3.org/2000/svg" role="img"',
+    ` width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"`,
+    ` aria-label="${escapeXml(ariaLabel)}">`,
+    `<rect width="${size}" height="${size}" fill="${escapeXml(backgroundColor)}"`,
+    ` stroke="${escapeXml(borderColor)}" stroke-width="${borderWidth}"`,
+    ` rx="${borderRadius}" ry="${borderRadius}"/>`,
+    `<text x="50%" y="50%" fill="${escapeXml(fontColor)}"`,
+    ` font-family="${escapeXml(fontFamily)}" font-size="${fontSize}"`,
+    ` font-weight="${fontWeight}" text-anchor="middle"`,
+    ' dominant-baseline="central">',
+    `${escapeXml(initials)}`,
+    "</text>",
+    "</svg>"
+  ].join("");
+}
+function createAvatarDataUri(name, options = {}) {
+  const svg = createAvatarSvg(name, options);
+  const encoded = toBase64(svg);
+  return `data:image/svg+xml;base64,${encoded}`;
+}
+function createAvatar(name, options = {}) {
+  const svg = createAvatarSvg(name, options);
+  const dataUri = createAvatarDataUri(name, options);
+  return { svg, dataUri };
+}
+function createHttpResponse(name, options = {}) {
+  return {
+    contentType: "image/svg+xml",
+    body: createAvatarSvg(name, options)
+  };
+}
+function sendExpressAvatar(res, name, options = {}, handlerOptions = {}) {
+  const payload = createHttpResponse(name, options);
+  res.setHeader?.("Content-Type", payload.contentType);
+  if (handlerOptions.cacheControl) res.setHeader?.("Cache-Control", handlerOptions.cacheControl);
+  res.send(payload.body);
+}
+function sendFastifyAvatar(reply, name, options = {}, handlerOptions = {}) {
+  const payload = createHttpResponse(name, options);
+  reply.header?.("Content-Type", payload.contentType);
+  if (handlerOptions.cacheControl) reply.header?.("Cache-Control", handlerOptions.cacheControl);
+  reply.send(payload.body);
+}
+function sendNestAvatar(res, name, options = {}, handlerOptions = {}) {
+  const payload = createHttpResponse(name, options);
+  const set = res.header ?? res.setHeader;
+  set?.call(res, "Content-Type", payload.contentType);
+  if (handlerOptions.cacheControl) set?.call(res, "Cache-Control", handlerOptions.cacheControl);
+  res.send(payload.body);
+}
+function createExpressHandler(handlerOptions = {}) {
+  return (req, res) => {
+    const name = resolveNameFromRequest(req, handlerOptions) ?? "User";
+    sendExpressAvatar(res, name, handlerOptions.avatarOptions, handlerOptions);
+  };
+}
+function createFastifyHandler(handlerOptions = {}) {
+  return (req, reply) => {
+    const name = resolveNameFromRequest(req, handlerOptions) ?? "User";
+    sendFastifyAvatar(reply, name, handlerOptions.avatarOptions, handlerOptions);
+  };
+}
+function createNestHandler(handlerOptions = {}) {
+  return (req, res) => {
+    const name = resolveNameFromRequest(req, handlerOptions) ?? "User";
+    sendNestAvatar(res, name, handlerOptions.avatarOptions, handlerOptions);
+  };
+}
+function resolveNameFromRequest(req, handlerOptions) {
+  if (handlerOptions.resolveName) return handlerOptions.resolveName(req);
+  const key = handlerOptions.nameKey ?? "name";
+  const record = req;
+  const maybeQuery = record?.query?.[key];
+  const maybeBody = record?.body?.[key];
+  const maybeParams = record?.params?.[key];
+  const candidate = [maybeQuery, maybeBody, maybeParams].find((value) => typeof value === "string" && value.trim().length > 0);
+  if (typeof candidate === "string") return candidate;
+  return void 0;
+}
+function clamp(value, min, max) {
+  if (Number.isNaN(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function stringToColor(input) {
+  const value = (input ?? "").trim();
+  if (!value) return "#444444";
+  let hash = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash &= hash;
+  }
+  const hue = Math.abs(hash) % 360;
+  const saturation = 65;
+  const lightness = 55;
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+function toBase64(svg) {
+  const globalRef = typeof globalThis !== "undefined" ? globalThis : void 0;
+  const bufferCtor = globalRef && globalRef.Buffer;
+  if (bufferCtor) {
+    return bufferCtor.from(svg, "utf8").toString("base64");
+  }
+  const btoaFn = globalRef && globalRef.btoa;
+  if (btoaFn) {
+    return btoaFn(unescape(encodeURIComponent(svg)));
+  }
+  throw new Error("No base64 encoder available in this environment.");
+}
+
+export {
+  getInitials,
+  createAvatarSvg,
+  createAvatarDataUri,
+  createAvatar,
+  createHttpResponse,
+  sendExpressAvatar,
+  sendFastifyAvatar,
+  sendNestAvatar,
+  createExpressHandler,
+  createFastifyHandler,
+  createNestHandler
+};

package/dist/index.cjs

@@ -0,0 +1,187 @@
+"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.ts
+var index_exports = {};
+__export(index_exports, {
+  createAvatar: () => createAvatar,
+  createAvatarDataUri: () => createAvatarDataUri,
+  createAvatarSvg: () => createAvatarSvg,
+  createExpressHandler: () => createExpressHandler,
+  createFastifyHandler: () => createFastifyHandler,
+  createHttpResponse: () => createHttpResponse,
+  createNestHandler: () => createNestHandler,
+  getInitials: () => getInitials,
+  sendExpressAvatar: () => sendExpressAvatar,
+  sendFastifyAvatar: () => sendFastifyAvatar,
+  sendNestAvatar: () => sendNestAvatar
+});
+module.exports = __toCommonJS(index_exports);
+var DEFAULT_SIZE = 96;
+var DEFAULT_FONT_FAMILY = '"Segoe UI", Arial, sans-serif';
+function getInitials(name) {
+  const cleaned = (name ?? "").trim();
+  if (!cleaned) return "?";
+  const parts = cleaned.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) {
+    const [firstChar, secondChar] = [...parts[0]].filter(Boolean);
+    return (firstChar ?? "").toUpperCase() + (secondChar ?? "").toUpperCase();
+  }
+  const first = parts[0]?.[0] ?? "";
+  const last = parts[parts.length - 1]?.[0] ?? "";
+  return `${first}${last}`.toUpperCase();
+}
+function createAvatarSvg(name, options = {}) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const backgroundColor = options.backgroundColor ?? stringToColor(name);
+  const fontColor = options.fontColor ?? "#ffffff";
+  const fontSize = options.fontSize ?? Math.round(size * 0.42);
+  const fontFamily = options.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const borderWidth = options.borderWidth ?? 0;
+  const borderColor = options.borderColor ?? "transparent";
+  const borderRadius = clamp(options.borderRadius ?? size * 0.2, 0, size / 2);
+  const fontWeight = options.bold ? 700 : 600;
+  const initials = (options.initialsOverride ?? getInitials(name)).slice(0, 3);
+  const ariaLabel = name && name.trim().length > 0 ? name.trim() : "Avatar";
+  return [
+    '<svg xmlns="http://www.w3.org/2000/svg" role="img"',
+    ` width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"`,
+    ` aria-label="${escapeXml(ariaLabel)}">`,
+    `<rect width="${size}" height="${size}" fill="${escapeXml(backgroundColor)}"`,
+    ` stroke="${escapeXml(borderColor)}" stroke-width="${borderWidth}"`,
+    ` rx="${borderRadius}" ry="${borderRadius}"/>`,
+    `<text x="50%" y="50%" fill="${escapeXml(fontColor)}"`,
+    ` font-family="${escapeXml(fontFamily)}" font-size="${fontSize}"`,
+    ` font-weight="${fontWeight}" text-anchor="middle"`,
+    ' dominant-baseline="central">',
+    `${escapeXml(initials)}`,
+    "</text>",
+    "</svg>"
+  ].join("");
+}
+function createAvatarDataUri(name, options = {}) {
+  const svg = createAvatarSvg(name, options);
+  const encoded = toBase64(svg);
+  return `data:image/svg+xml;base64,${encoded}`;
+}
+function createAvatar(name, options = {}) {
+  const svg = createAvatarSvg(name, options);
+  const dataUri = createAvatarDataUri(name, options);
+  return { svg, dataUri };
+}
+function createHttpResponse(name, options = {}) {
+  return {
+    contentType: "image/svg+xml",
+    body: createAvatarSvg(name, options)
+  };
+}
+function sendExpressAvatar(res, name, options = {}, handlerOptions = {}) {
+  const payload = createHttpResponse(name, options);
+  res.setHeader?.("Content-Type", payload.contentType);
+  if (handlerOptions.cacheControl) res.setHeader?.("Cache-Control", handlerOptions.cacheControl);
+  res.send(payload.body);
+}
+function sendFastifyAvatar(reply, name, options = {}, handlerOptions = {}) {
+  const payload = createHttpResponse(name, options);
+  reply.header?.("Content-Type", payload.contentType);
+  if (handlerOptions.cacheControl) reply.header?.("Cache-Control", handlerOptions.cacheControl);
+  reply.send(payload.body);
+}
+function sendNestAvatar(res, name, options = {}, handlerOptions = {}) {
+  const payload = createHttpResponse(name, options);
+  const set = res.header ?? res.setHeader;
+  set?.call(res, "Content-Type", payload.contentType);
+  if (handlerOptions.cacheControl) set?.call(res, "Cache-Control", handlerOptions.cacheControl);
+  res.send(payload.body);
+}
+function createExpressHandler(handlerOptions = {}) {
+  return (req, res) => {
+    const name = resolveNameFromRequest(req, handlerOptions) ?? "User";
+    sendExpressAvatar(res, name, handlerOptions.avatarOptions, handlerOptions);
+  };
+}
+function createFastifyHandler(handlerOptions = {}) {
+  return (req, reply) => {
+    const name = resolveNameFromRequest(req, handlerOptions) ?? "User";
+    sendFastifyAvatar(reply, name, handlerOptions.avatarOptions, handlerOptions);
+  };
+}
+function createNestHandler(handlerOptions = {}) {
+  return (req, res) => {
+    const name = resolveNameFromRequest(req, handlerOptions) ?? "User";
+    sendNestAvatar(res, name, handlerOptions.avatarOptions, handlerOptions);
+  };
+}
+function resolveNameFromRequest(req, handlerOptions) {
+  if (handlerOptions.resolveName) return handlerOptions.resolveName(req);
+  const key = handlerOptions.nameKey ?? "name";
+  const record = req;
+  const maybeQuery = record?.query?.[key];
+  const maybeBody = record?.body?.[key];
+  const maybeParams = record?.params?.[key];
+  const candidate = [maybeQuery, maybeBody, maybeParams].find((value) => typeof value === "string" && value.trim().length > 0);
+  if (typeof candidate === "string") return candidate;
+  return void 0;
+}
+function clamp(value, min, max) {
+  if (Number.isNaN(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function stringToColor(input) {
+  const value = (input ?? "").trim();
+  if (!value) return "#444444";
+  let hash = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash &= hash;
+  }
+  const hue = Math.abs(hash) % 360;
+  const saturation = 65;
+  const lightness = 55;
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+function toBase64(svg) {
+  const globalRef = typeof globalThis !== "undefined" ? globalThis : void 0;
+  const bufferCtor = globalRef && globalRef.Buffer;
+  if (bufferCtor) {
+    return bufferCtor.from(svg, "utf8").toString("base64");
+  }
+  const btoaFn = globalRef && globalRef.btoa;
+  if (btoaFn) {
+    return btoaFn(unescape(encodeURIComponent(svg)));
+  }
+  throw new Error("No base64 encoder available in this environment.");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createAvatar,
+  createAvatarDataUri,
+  createAvatarSvg,
+  createExpressHandler,
+  createFastifyHandler,
+  createHttpResponse,
+  createNestHandler,
+  getInitials,
+  sendExpressAvatar,
+  sendFastifyAvatar,
+  sendNestAvatar
+});

package/dist/index.d.cts

@@ -0,0 +1,65 @@
+type AvatarOptions = {
+    /** Overall square size in pixels */
+    size?: number;
+    /** Background color (hex, rgb, hsl). Falls back to deterministic color from the name */
+    backgroundColor?: string;
+    /** Text color */
+    fontColor?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font family string */
+    fontFamily?: string;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Border color */
+    borderColor?: string;
+    /** Corner radius in pixels */
+    borderRadius?: number;
+    /** Render bold text */
+    bold?: boolean;
+    /** Explicit initials override */
+    initialsOverride?: string;
+};
+type AvatarPayload = {
+    svg: string;
+    dataUri: string;
+};
+type ExpressResponseLike = {
+    setHeader?: (name: string, value: string) => unknown;
+    send: (body: unknown) => unknown;
+};
+type FastifyReplyLike = {
+    header?: (name: string, value: string) => unknown;
+    send: (body: unknown) => unknown;
+};
+type NestResponseLike = {
+    setHeader?: (name: string, value: string) => unknown;
+    header?: (name: string, value: string) => unknown;
+    send: (body: unknown) => unknown;
+};
+type HandlerOptions = {
+    /** Query/body key to read the name from when no resolver is provided */
+    nameKey?: string;
+    /** Custom resolver to derive the display name */
+    resolveName?: (req: unknown) => string | undefined;
+    /** Avatar rendering options */
+    avatarOptions?: AvatarOptions;
+    /** Optional cache control header value */
+    cacheControl?: string;
+};
+declare function getInitials(name: string): string;
+declare function createAvatarSvg(name: string, options?: AvatarOptions): string;
+declare function createAvatarDataUri(name: string, options?: AvatarOptions): string;
+declare function createAvatar(name: string, options?: AvatarOptions): AvatarPayload;
+declare function createHttpResponse(name: string, options?: AvatarOptions): {
+    contentType: string;
+    body: string;
+};
+declare function sendExpressAvatar(res: ExpressResponseLike, name: string, options?: AvatarOptions, handlerOptions?: Omit<HandlerOptions, 'avatarOptions'>): void;
+declare function sendFastifyAvatar(reply: FastifyReplyLike, name: string, options?: AvatarOptions, handlerOptions?: Omit<HandlerOptions, 'avatarOptions'>): void;
+declare function sendNestAvatar(res: NestResponseLike, name: string, options?: AvatarOptions, handlerOptions?: Omit<HandlerOptions, 'avatarOptions'>): void;
+declare function createExpressHandler(handlerOptions?: HandlerOptions): (req: unknown, res: ExpressResponseLike) => void;
+declare function createFastifyHandler(handlerOptions?: HandlerOptions): (req: unknown, reply: FastifyReplyLike) => void;
+declare function createNestHandler(handlerOptions?: HandlerOptions): (req: unknown, res: NestResponseLike) => void;
+
+export { type AvatarOptions, type AvatarPayload, type ExpressResponseLike, type FastifyReplyLike, type HandlerOptions, type NestResponseLike, createAvatar, createAvatarDataUri, createAvatarSvg, createExpressHandler, createFastifyHandler, createHttpResponse, createNestHandler, getInitials, sendExpressAvatar, sendFastifyAvatar, sendNestAvatar };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+type AvatarOptions = {
+    /** Overall square size in pixels */
+    size?: number;
+    /** Background color (hex, rgb, hsl). Falls back to deterministic color from the name */
+    backgroundColor?: string;
+    /** Text color */
+    fontColor?: string;
+    /** Font size in pixels */
+    fontSize?: number;
+    /** Font family string */
+    fontFamily?: string;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Border color */
+    borderColor?: string;
+    /** Corner radius in pixels */
+    borderRadius?: number;
+    /** Render bold text */
+    bold?: boolean;
+    /** Explicit initials override */
+    initialsOverride?: string;
+};
+type AvatarPayload = {
+    svg: string;
+    dataUri: string;
+};
+type ExpressResponseLike = {
+    setHeader?: (name: string, value: string) => unknown;
+    send: (body: unknown) => unknown;
+};
+type FastifyReplyLike = {
+    header?: (name: string, value: string) => unknown;
+    send: (body: unknown) => unknown;
+};
+type NestResponseLike = {
+    setHeader?: (name: string, value: string) => unknown;
+    header?: (name: string, value: string) => unknown;
+    send: (body: unknown) => unknown;
+};
+type HandlerOptions = {
+    /** Query/body key to read the name from when no resolver is provided */
+    nameKey?: string;
+    /** Custom resolver to derive the display name */
+    resolveName?: (req: unknown) => string | undefined;
+    /** Avatar rendering options */
+    avatarOptions?: AvatarOptions;
+    /** Optional cache control header value */
+    cacheControl?: string;
+};
+declare function getInitials(name: string): string;
+declare function createAvatarSvg(name: string, options?: AvatarOptions): string;
+declare function createAvatarDataUri(name: string, options?: AvatarOptions): string;
+declare function createAvatar(name: string, options?: AvatarOptions): AvatarPayload;
+declare function createHttpResponse(name: string, options?: AvatarOptions): {
+    contentType: string;
+    body: string;
+};
+declare function sendExpressAvatar(res: ExpressResponseLike, name: string, options?: AvatarOptions, handlerOptions?: Omit<HandlerOptions, 'avatarOptions'>): void;
+declare function sendFastifyAvatar(reply: FastifyReplyLike, name: string, options?: AvatarOptions, handlerOptions?: Omit<HandlerOptions, 'avatarOptions'>): void;
+declare function sendNestAvatar(res: NestResponseLike, name: string, options?: AvatarOptions, handlerOptions?: Omit<HandlerOptions, 'avatarOptions'>): void;
+declare function createExpressHandler(handlerOptions?: HandlerOptions): (req: unknown, res: ExpressResponseLike) => void;
+declare function createFastifyHandler(handlerOptions?: HandlerOptions): (req: unknown, reply: FastifyReplyLike) => void;
+declare function createNestHandler(handlerOptions?: HandlerOptions): (req: unknown, res: NestResponseLike) => void;
+
+export { type AvatarOptions, type AvatarPayload, type ExpressResponseLike, type FastifyReplyLike, type HandlerOptions, type NestResponseLike, createAvatar, createAvatarDataUri, createAvatarSvg, createExpressHandler, createFastifyHandler, createHttpResponse, createNestHandler, getInitials, sendExpressAvatar, sendFastifyAvatar, sendNestAvatar };

package/dist/index.js

@@ -0,0 +1,26 @@
+import {
+  createAvatar,
+  createAvatarDataUri,
+  createAvatarSvg,
+  createExpressHandler,
+  createFastifyHandler,
+  createHttpResponse,
+  createNestHandler,
+  getInitials,
+  sendExpressAvatar,
+  sendFastifyAvatar,
+  sendNestAvatar
+} from "./chunk-PMFHYTR7.js";
+export {
+  createAvatar,
+  createAvatarDataUri,
+  createAvatarSvg,
+  createExpressHandler,
+  createFastifyHandler,
+  createHttpResponse,
+  createNestHandler,
+  getInitials,
+  sendExpressAvatar,
+  sendFastifyAvatar,
+  sendNestAvatar
+};

package/dist/react.cjs

@@ -0,0 +1,160 @@
+"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/react.tsx
+var react_exports = {};
+__export(react_exports, {
+  InitialsAvatar: () => InitialsAvatar,
+  default: () => react_default
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+
+// src/index.ts
+var DEFAULT_SIZE = 96;
+var DEFAULT_FONT_FAMILY = '"Segoe UI", Arial, sans-serif';
+function getInitials(name) {
+  const cleaned = (name ?? "").trim();
+  if (!cleaned) return "?";
+  const parts = cleaned.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) {
+    const [firstChar, secondChar] = [...parts[0]].filter(Boolean);
+    return (firstChar ?? "").toUpperCase() + (secondChar ?? "").toUpperCase();
+  }
+  const first = parts[0]?.[0] ?? "";
+  const last = parts[parts.length - 1]?.[0] ?? "";
+  return `${first}${last}`.toUpperCase();
+}
+function createAvatarSvg(name, options = {}) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const backgroundColor = options.backgroundColor ?? stringToColor(name);
+  const fontColor = options.fontColor ?? "#ffffff";
+  const fontSize = options.fontSize ?? Math.round(size * 0.42);
+  const fontFamily = options.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const borderWidth = options.borderWidth ?? 0;
+  const borderColor = options.borderColor ?? "transparent";
+  const borderRadius = clamp(options.borderRadius ?? size * 0.2, 0, size / 2);
+  const fontWeight = options.bold ? 700 : 600;
+  const initials = (options.initialsOverride ?? getInitials(name)).slice(0, 3);
+  const ariaLabel = name && name.trim().length > 0 ? name.trim() : "Avatar";
+  return [
+    '<svg xmlns="http://www.w3.org/2000/svg" role="img"',
+    ` width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"`,
+    ` aria-label="${escapeXml(ariaLabel)}">`,
+    `<rect width="${size}" height="${size}" fill="${escapeXml(backgroundColor)}"`,
+    ` stroke="${escapeXml(borderColor)}" stroke-width="${borderWidth}"`,
+    ` rx="${borderRadius}" ry="${borderRadius}"/>`,
+    `<text x="50%" y="50%" fill="${escapeXml(fontColor)}"`,
+    ` font-family="${escapeXml(fontFamily)}" font-size="${fontSize}"`,
+    ` font-weight="${fontWeight}" text-anchor="middle"`,
+    ' dominant-baseline="central">',
+    `${escapeXml(initials)}`,
+    "</text>",
+    "</svg>"
+  ].join("");
+}
+function createAvatarDataUri(name, options = {}) {
+  const svg = createAvatarSvg(name, options);
+  const encoded = toBase64(svg);
+  return `data:image/svg+xml;base64,${encoded}`;
+}
+function clamp(value, min, max) {
+  if (Number.isNaN(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function stringToColor(input) {
+  const value = (input ?? "").trim();
+  if (!value) return "#444444";
+  let hash = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash &= hash;
+  }
+  const hue = Math.abs(hash) % 360;
+  const saturation = 65;
+  const lightness = 55;
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+function toBase64(svg) {
+  const globalRef = typeof globalThis !== "undefined" ? globalThis : void 0;
+  const bufferCtor = globalRef && globalRef.Buffer;
+  if (bufferCtor) {
+    return bufferCtor.from(svg, "utf8").toString("base64");
+  }
+  const btoaFn = globalRef && globalRef.btoa;
+  if (btoaFn) {
+    return btoaFn(unescape(encodeURIComponent(svg)));
+  }
+  throw new Error("No base64 encoder available in this environment.");
+}
+
+// src/react.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_SIZE2 = 96;
+var InitialsAvatar = ({
+  name,
+  alt,
+  as = "img",
+  className,
+  style,
+  title,
+  imgProps,
+  svgProps,
+  ...avatarOptions
+}) => {
+  const size = avatarOptions.size ?? DEFAULT_SIZE2;
+  const memoKey = (0, import_react.useMemo)(() => JSON.stringify(avatarOptions), [avatarOptions]);
+  const dataUri = (0, import_react.useMemo)(() => createAvatarDataUri(name, avatarOptions), [name, memoKey]);
+  const svgMarkup = (0, import_react.useMemo)(() => createAvatarSvg(name, avatarOptions), [name, memoKey]);
+  const fallbackAlt = alt ?? `Avatar for ${name || 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 react_default = InitialsAvatar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InitialsAvatar
+});

package/dist/react.d.cts

@@ -0,0 +1,16 @@
+import React, { CSSProperties, ImgHTMLAttributes, HTMLAttributes } from 'react';
+import { AvatarOptions } from './index.cjs';
+
+type InitialsAvatarProps = AvatarOptions & {
+    name: string;
+    alt?: string;
+    as?: 'img' | 'svg';
+    className?: string;
+    style?: CSSProperties;
+    title?: string;
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'title'>;
+    svgProps?: Omit<HTMLAttributes<HTMLSpanElement>, 'dangerouslySetInnerHTML'>;
+};
+declare const InitialsAvatar: React.FC<InitialsAvatarProps>;
+
+export { AvatarOptions, InitialsAvatar, type InitialsAvatarProps, InitialsAvatar as default };

package/dist/react.d.ts

@@ -0,0 +1,16 @@
+import React, { CSSProperties, ImgHTMLAttributes, HTMLAttributes } from 'react';
+import { AvatarOptions } from './index.js';
+
+type InitialsAvatarProps = AvatarOptions & {
+    name: string;
+    alt?: string;
+    as?: 'img' | 'svg';
+    className?: string;
+    style?: CSSProperties;
+    title?: string;
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'title'>;
+    svgProps?: Omit<HTMLAttributes<HTMLSpanElement>, 'dangerouslySetInnerHTML'>;
+};
+declare const InitialsAvatar: React.FC<InitialsAvatarProps>;
+
+export { AvatarOptions, InitialsAvatar, type InitialsAvatarProps, InitialsAvatar as default };

package/dist/react.js

@@ -0,0 +1,58 @@
+import {
+  createAvatarDataUri,
+  createAvatarSvg,
+  getInitials
+} from "./chunk-PMFHYTR7.js";
+
+// src/react.tsx
+import { useMemo } from "react";
+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 react_default = InitialsAvatar;
+export {
+  InitialsAvatar,
+  react_default as default
+};

package/dist/vue.cjs

@@ -0,0 +1,179 @@
+"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/vue.ts
+var vue_exports = {};
+__export(vue_exports, {
+  InitialsAvatar: () => InitialsAvatar,
+  InitialsAvatarPlugin: () => InitialsAvatarPlugin,
+  default: () => vue_default
+});
+module.exports = __toCommonJS(vue_exports);
+var import_vue = require("vue");
+
+// src/index.ts
+var DEFAULT_SIZE = 96;
+var DEFAULT_FONT_FAMILY = '"Segoe UI", Arial, sans-serif';
+function getInitials(name) {
+  const cleaned = (name ?? "").trim();
+  if (!cleaned) return "?";
+  const parts = cleaned.split(/\s+/).filter(Boolean);
+  if (parts.length === 1) {
+    const [firstChar, secondChar] = [...parts[0]].filter(Boolean);
+    return (firstChar ?? "").toUpperCase() + (secondChar ?? "").toUpperCase();
+  }
+  const first = parts[0]?.[0] ?? "";
+  const last = parts[parts.length - 1]?.[0] ?? "";
+  return `${first}${last}`.toUpperCase();
+}
+function createAvatarSvg(name, options = {}) {
+  const size = options.size ?? DEFAULT_SIZE;
+  const backgroundColor = options.backgroundColor ?? stringToColor(name);
+  const fontColor = options.fontColor ?? "#ffffff";
+  const fontSize = options.fontSize ?? Math.round(size * 0.42);
+  const fontFamily = options.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const borderWidth = options.borderWidth ?? 0;
+  const borderColor = options.borderColor ?? "transparent";
+  const borderRadius = clamp(options.borderRadius ?? size * 0.2, 0, size / 2);
+  const fontWeight = options.bold ? 700 : 600;
+  const initials = (options.initialsOverride ?? getInitials(name)).slice(0, 3);
+  const ariaLabel = name && name.trim().length > 0 ? name.trim() : "Avatar";
+  return [
+    '<svg xmlns="http://www.w3.org/2000/svg" role="img"',
+    ` width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"`,
+    ` aria-label="${escapeXml(ariaLabel)}">`,
+    `<rect width="${size}" height="${size}" fill="${escapeXml(backgroundColor)}"`,
+    ` stroke="${escapeXml(borderColor)}" stroke-width="${borderWidth}"`,
+    ` rx="${borderRadius}" ry="${borderRadius}"/>`,
+    `<text x="50%" y="50%" fill="${escapeXml(fontColor)}"`,
+    ` font-family="${escapeXml(fontFamily)}" font-size="${fontSize}"`,
+    ` font-weight="${fontWeight}" text-anchor="middle"`,
+    ' dominant-baseline="central">',
+    `${escapeXml(initials)}`,
+    "</text>",
+    "</svg>"
+  ].join("");
+}
+function createAvatarDataUri(name, options = {}) {
+  const svg = createAvatarSvg(name, options);
+  const encoded = toBase64(svg);
+  return `data:image/svg+xml;base64,${encoded}`;
+}
+function clamp(value, min, max) {
+  if (Number.isNaN(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function stringToColor(input) {
+  const value = (input ?? "").trim();
+  if (!value) return "#444444";
+  let hash = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash &= hash;
+  }
+  const hue = Math.abs(hash) % 360;
+  const saturation = 65;
+  const lightness = 55;
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+function toBase64(svg) {
+  const globalRef = typeof globalThis !== "undefined" ? globalThis : void 0;
+  const bufferCtor = globalRef && globalRef.Buffer;
+  if (bufferCtor) {
+    return bufferCtor.from(svg, "utf8").toString("base64");
+  }
+  const btoaFn = globalRef && globalRef.btoa;
+  if (btoaFn) {
+    return btoaFn(unescape(encodeURIComponent(svg)));
+  }
+  throw new Error("No base64 encoder available in this environment.");
+}
+
+// src/vue.ts
+var DEFAULT_SIZE2 = 96;
+var InitialsAvatar = (0, import_vue.defineComponent)({
+  name: "InitialsAvatar",
+  props: {
+    name: { type: String, required: true },
+    alt: { type: String, default: void 0 },
+    as: { type: String, default: "img" },
+    title: { type: String, default: void 0 },
+    size: { type: Number, default: void 0 },
+    backgroundColor: { type: String, default: void 0 },
+    fontColor: { type: String, default: void 0 },
+    fontSize: { type: Number, default: void 0 },
+    fontFamily: { type: String, default: void 0 },
+    borderWidth: { type: Number, default: void 0 },
+    borderColor: { type: String, default: void 0 },
+    borderRadius: { type: Number, default: void 0 },
+    bold: { type: Boolean, default: void 0 },
+    initialsOverride: { type: String, default: void 0 }
+  },
+  setup(props, { attrs }) {
+    const avatarOptions = (0, import_vue.computed)(() => ({
+      size: props.size,
+      backgroundColor: props.backgroundColor,
+      fontColor: props.fontColor,
+      fontSize: props.fontSize,
+      fontFamily: props.fontFamily,
+      borderWidth: props.borderWidth,
+      borderColor: props.borderColor,
+      borderRadius: props.borderRadius,
+      bold: props.bold,
+      initialsOverride: props.initialsOverride
+    }));
+    const dataUri = (0, import_vue.computed)(() => createAvatarDataUri(props.name, avatarOptions.value));
+    const svgMarkup = (0, import_vue.computed)(() => createAvatarSvg(props.name, avatarOptions.value));
+    const sizeValue = (0, import_vue.computed)(() => props.size ?? DEFAULT_SIZE2);
+    const altText = (0, import_vue.computed)(() => props.alt ?? `Avatar for ${props.name || getInitials(props.name)}`);
+    return () => {
+      if (props.as === "svg") {
+        return (0, import_vue.h)("span", {
+          ...attrs,
+          innerHTML: svgMarkup.value,
+          role: "img",
+          "aria-label": altText.value,
+          title: props.title
+        });
+      }
+      return (0, import_vue.h)("img", {
+        ...attrs,
+        src: dataUri.value,
+        width: sizeValue.value,
+        height: sizeValue.value,
+        alt: altText.value,
+        title: props.title
+      });
+    };
+  }
+});
+var InitialsAvatarPlugin = {
+  install(app) {
+    app.component("InitialsAvatar", InitialsAvatar);
+  }
+};
+var vue_default = InitialsAvatar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InitialsAvatar,
+  InitialsAvatarPlugin
+});

package/dist/vue.d.cts

@@ -0,0 +1,146 @@
+import * as vue from 'vue';
+import { PropType, App } from 'vue';
+import { AvatarOptions } from './index.cjs';
+
+type InitialsAvatarProps = AvatarOptions & {
+    name: string;
+    alt?: string;
+    as?: 'img' | 'svg';
+    title?: string;
+};
+declare const InitialsAvatar: vue.DefineComponent<vue.ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"img" | "svg">;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    fontFamily: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderRadius: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    bold: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    initialsOverride: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"img" | "svg">;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    fontFamily: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderRadius: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    bold: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    initialsOverride: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    alt: string;
+    as: "img" | "svg";
+    title: string;
+    size: number;
+    backgroundColor: string;
+    fontColor: string;
+    fontSize: number;
+    fontFamily: string;
+    borderWidth: number;
+    borderColor: string;
+    borderRadius: number;
+    bold: boolean;
+    initialsOverride: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const InitialsAvatarPlugin: {
+    install(app: App): void;
+};
+
+export { AvatarOptions, InitialsAvatar, InitialsAvatarPlugin, type InitialsAvatarProps, InitialsAvatar as default };

package/dist/vue.d.ts

@@ -0,0 +1,146 @@
+import * as vue from 'vue';
+import { PropType, App } from 'vue';
+import { AvatarOptions } from './index.js';
+
+type InitialsAvatarProps = AvatarOptions & {
+    name: string;
+    alt?: string;
+    as?: 'img' | 'svg';
+    title?: string;
+};
+declare const InitialsAvatar: vue.DefineComponent<vue.ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"img" | "svg">;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    fontFamily: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderRadius: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    bold: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    initialsOverride: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"img" | "svg">;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fontSize: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    fontFamily: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    borderRadius: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    bold: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    initialsOverride: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    alt: string;
+    as: "img" | "svg";
+    title: string;
+    size: number;
+    backgroundColor: string;
+    fontColor: string;
+    fontSize: number;
+    fontFamily: string;
+    borderWidth: number;
+    borderColor: string;
+    borderRadius: number;
+    bold: boolean;
+    initialsOverride: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const InitialsAvatarPlugin: {
+    install(app: App): void;
+};
+
+export { AvatarOptions, InitialsAvatar, InitialsAvatarPlugin, type InitialsAvatarProps, InitialsAvatar as default };

package/dist/vue.js

@@ -0,0 +1,76 @@
+import {
+  createAvatarDataUri,
+  createAvatarSvg,
+  getInitials
+} from "./chunk-PMFHYTR7.js";
+
+// src/vue.ts
+import { computed, defineComponent, h } from "vue";
+var DEFAULT_SIZE = 96;
+var InitialsAvatar = defineComponent({
+  name: "InitialsAvatar",
+  props: {
+    name: { type: String, required: true },
+    alt: { type: String, default: void 0 },
+    as: { type: String, default: "img" },
+    title: { type: String, default: void 0 },
+    size: { type: Number, default: void 0 },
+    backgroundColor: { type: String, default: void 0 },
+    fontColor: { type: String, default: void 0 },
+    fontSize: { type: Number, default: void 0 },
+    fontFamily: { type: String, default: void 0 },
+    borderWidth: { type: Number, default: void 0 },
+    borderColor: { type: String, default: void 0 },
+    borderRadius: { type: Number, default: void 0 },
+    bold: { type: Boolean, default: void 0 },
+    initialsOverride: { type: String, default: void 0 }
+  },
+  setup(props, { attrs }) {
+    const avatarOptions = computed(() => ({
+      size: props.size,
+      backgroundColor: props.backgroundColor,
+      fontColor: props.fontColor,
+      fontSize: props.fontSize,
+      fontFamily: props.fontFamily,
+      borderWidth: props.borderWidth,
+      borderColor: props.borderColor,
+      borderRadius: props.borderRadius,
+      bold: props.bold,
+      initialsOverride: props.initialsOverride
+    }));
+    const dataUri = computed(() => createAvatarDataUri(props.name, avatarOptions.value));
+    const svgMarkup = computed(() => createAvatarSvg(props.name, avatarOptions.value));
+    const sizeValue = computed(() => props.size ?? DEFAULT_SIZE);
+    const altText = computed(() => props.alt ?? `Avatar for ${props.name || getInitials(props.name)}`);
+    return () => {
+      if (props.as === "svg") {
+        return h("span", {
+          ...attrs,
+          innerHTML: svgMarkup.value,
+          role: "img",
+          "aria-label": altText.value,
+          title: props.title
+        });
+      }
+      return h("img", {
+        ...attrs,
+        src: dataUri.value,
+        width: sizeValue.value,
+        height: sizeValue.value,
+        alt: altText.value,
+        title: props.title
+      });
+    };
+  }
+});
+var InitialsAvatarPlugin = {
+  install(app) {
+    app.component("InitialsAvatar", InitialsAvatar);
+  }
+};
+var vue_default = InitialsAvatar;
+export {
+  InitialsAvatar,
+  InitialsAvatarPlugin,
+  vue_default as default
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@avyn/initials-avatar",
+  "version": "1.0.0",
+  "description": "Framework-agnostic SVG initials avatar generator",
+  "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"
+    },
+    "./react": {
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.cjs",
+      "types": "./dist/react.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue.mjs",
+      "require": "./dist/vue.cjs",
+      "types": "./dist/vue.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/react.tsx src/vue.ts --format esm,cjs --dts --clean"
+  },
+  "keywords": [
+    "avatar",
+    "initials",
+    "svg",
+    "node",
+    "browser",
+    "ssr"
+  ],
+  "author": "@avyn",
+  "license": "MIT",
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "vue": { "optional": true }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "tsup": "^8.2.4",
+    "typescript": "^5.6.3",
+    "vue": "^3.5.13"
+  }
+}