@elmqeddem/react-avatar 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface AvatarProps {
+    name?: string;
+    size?: number;
+    content?: string | ReactNode;
+}
+declare const Avatar: ({ name, size, content, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface AvatarProps {
+    name?: string;
+    size?: number;
+    content?: string | ReactNode;
+}
+declare const Avatar: ({ name, size, content, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+export { Avatar };

package/dist/index.js

@@ -0,0 +1,77 @@
+"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, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Avatar.tsx
+var import_react = require("react");
+var import_string_to_color = require("@marko19907/string-to-color");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Avatar = ({
+  name = "",
+  size = 40,
+  content
+}) => {
+  const bgColor = (0, import_string_to_color.generateColor)(name || "default", {
+    saturation: 70,
+    lightness: 94
+  });
+  const textColor = (0, import_string_to_color.generateColor)(name || "default", {
+    saturation: 70,
+    lightness: 60
+  });
+  const initials = name ? name.split(" ").map((w) => {
+    var _a;
+    return (_a = w[0]) == null ? void 0 : _a.toUpperCase();
+  }).slice(0, 2).join("") : "";
+  const renderContent = content ? typeof content === "string" ? content : (0, import_react.isValidElement)(content) ? (0, import_react.cloneElement)(content, {
+    size: size * 0.5,
+    // auto scale icon
+    strokeWidth: 2
+    // Lucide icons look better
+  }) : null : initials;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        backgroundColor: bgColor,
+        color: textColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        fontWeight: "400",
+        fontSize: size * 0.45,
+        userSelect: "none"
+      },
+      children: renderContent
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/index.mjs

@@ -0,0 +1,50 @@
+// src/Avatar.tsx
+import { isValidElement, cloneElement } from "react";
+import { generateColor } from "@marko19907/string-to-color";
+import { jsx } from "react/jsx-runtime";
+var Avatar = ({
+  name = "",
+  size = 40,
+  content
+}) => {
+  const bgColor = generateColor(name || "default", {
+    saturation: 70,
+    lightness: 94
+  });
+  const textColor = generateColor(name || "default", {
+    saturation: 70,
+    lightness: 60
+  });
+  const initials = name ? name.split(" ").map((w) => {
+    var _a;
+    return (_a = w[0]) == null ? void 0 : _a.toUpperCase();
+  }).slice(0, 2).join("") : "";
+  const renderContent = content ? typeof content === "string" ? content : isValidElement(content) ? cloneElement(content, {
+    size: size * 0.5,
+    // auto scale icon
+    strokeWidth: 2
+    // Lucide icons look better
+  }) : null : initials;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        backgroundColor: bgColor,
+        color: textColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        fontWeight: "400",
+        fontSize: size * 0.45,
+        userSelect: "none"
+      },
+      children: renderContent
+    }
+  );
+};
+export {
+  Avatar
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@elmqeddem/react-avatar",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format esm,cjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@marko19907/string-to-color": "^1.0.1",
+    "lucide-react": "^0.562.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/src/Avatar.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode, isValidElement, cloneElement, ReactElement } from "react";
+import { generateColor } from "@marko19907/string-to-color";
+
+interface AvatarProps {
+  name?: string;
+  size?: number;
+  content?: string | ReactNode ; 
+}
+
+export const Avatar = ({
+  name = "",
+  size = 40,
+  content,
+}: AvatarProps) => {
+  const bgColor = generateColor(name || "default", {
+    saturation: 70,
+    lightness: 94,
+  });
+
+  const textColor = generateColor(name || "default", {
+    saturation: 70,
+    lightness: 60,
+  });
+
+  const initials = name
+    ? name
+        .split(" ")
+        .map(w => w[0]?.toUpperCase())
+        .slice(0, 2)
+        .join("")
+    : "";
+
+  const renderContent = content
+    ? typeof content === "string"
+      ? content
+      : isValidElement(content)
+      ? cloneElement(content as ReactElement<any>, {
+          size: size * 0.5, // auto scale icon
+          strokeWidth: 2,   // Lucide icons look better
+        })
+      : null
+    : initials;
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: bgColor,
+        color: textColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        fontWeight: "400",
+        fontSize: size * 0.45,
+        userSelect: "none",
+      }}
+    >
+      {renderContent}
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { Avatar } from "./Avatar";

package/src/types/string-to-color.d.ts

@@ -0,0 +1,9 @@
+declare module "@marko19907/string-to-color" {
+    interface GenerateColorOptions {
+      saturation?: number;
+      lightness?: number;
+    }
+  
+    export function generateColor(str: string, options?: GenerateColorOptions): string;
+  }
+  

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "target": "ES2018",
+      "module": "ESNext",
+      "jsx": "react-jsx", 
+      "moduleResolution": "bundler",
+      "declaration": true,
+      "outDir": "dist",
+      "strict": true,
+      "skipLibCheck": true,
+      "allowSyntheticDefaultImports": true,
+      "esModuleInterop": true
+    },
+    "include": ["src"]
+  }
+