react-simple-initials 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Winston Almeida  Jr.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# React Simple Initials
+
+[![NPM Version](https://img.shields.io/npm/v/react-simple-initials.svg)](https://www.npmjs.com/package/react-simple-initials)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/react-simple-initials)](https://bundlephobia.com/package/react-simple-initials)
+
+Um componente React minimalista, elegante e ultraleve para gerar avatares coloridos baseados nas iniciais do usuário. Perfeito para painéis, listas de contatos e comentários onde o usuário ainda não enviou uma foto de perfil.
+
+---
+
+## Funcionalidades
+
+- **Zero Dependências:** Sem bibliotecas de imagens pesadas; usa apenas CSS e HTML puro.
+- **Cores Determinísticas:** O fundo do avatar é calculado com base no tamanho do nome. O mesmo nome sempre terá a mesma cor.
+- **Altamente Customizável:** Adapta-se automaticamente à fonte do seu projeto, ou permite customização total de tamanho e cor.
+- **Suporte a TypeScript & SSR:** Funciona perfeitamente com Next.js, Vite, Remix e Create React App.
+
+## Instalação
+
+Você pode instalar usando o seu gerenciador de pacotes favorito:
+
+npm install react-simple-initials
+
+## Como usar
+
+A configuração é instantânea. Basta importar o componente e passar o nome desejado:
+
+import React from 'react';
+import InitialsAvatar from 'react-simple-initials';
+
+export default function App() {
+return (
+
+<div style={{ display: 'flex', gap: '16px' }}>
+<InitialsAvatar nome="Visitante" />
+<InitialsAvatar nome="Maria Silva" tamanho={60} />
+<InitialsAvatar nome="João" tamanho={80} corTexto="#FFF" fonte="Arial, sans-serif" />
+</div>
+);
+}
+
+## Propriedades (API)
+
+O componente aceita as seguintes propriedades (props) para você customizar como preferir:
+
+| Propriedade | Tipo   | Padrão    | Descrição                                                                                          |
+| :---------- | :----- | :-------- | :------------------------------------------------------------------------------------------------- |
+| nome        | string | "?"       | O nome do usuário. A primeira letra será extraída e capitalizada automaticamente.                  |
+| tamanho     | number | 40        | O diâmetro do avatar (largura e altura) em pixels. O tamanho da fonte se ajusta proporcionalmente. |
+| fonte       | string | "inherit" | A família da fonte. Por padrão, herda a fonte do elemento pai.                                     |
+| corTexto    | string | "#FFFFFF" | A cor da letra exibida no centro do avatar.                                                        |
+
+## Contribuindo
+
+Contribuições são super bem-vindas! Se você encontrou um bug ou tem uma ideia para uma nova funcionalidade:
+
+1. Faça um Fork do projeto
+2. Crie sua branch de funcionalidade (git checkout -b feature/MinhaNovaFeature)
+3. Faça o commit das suas alterações (git commit -m 'feat: Adiciona nova paleta de cores')
+4. Faça o push para a branch (git push origin feature/MinhaNovaFeature)
+5. Abra um Pull Request
+
+## Licença
+
+Este projeto está licenciado sob a Licença MIT.

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-simple-initials",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Um componente React minimalista para avatares com iniciais do nome.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup src/index.jsx --format cjs,esm"
+    "build": "tsup src/index.tsx --format cjs,esm --dts"
   },
   "keywords": [
     "react",
@@ -19,6 +20,7 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
+    "@types/react": "^19.2.14",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }

package/src/{index.jsx → index.tsx}

@@ -1,4 +1,9 @@
-import React from "react";
+interface InitialsAvatarProps {
+  nome?: string;
+  tamanho?: number;
+  fonte?: string;
+  corTexto?: string;
+}
 
 const FUNDOS = [
   "#EF4444",
@@ -16,7 +21,7 @@ export default function InitialsAvatar({
   tamanho = 40,
   fonte = "inherit",
   corTexto = "#FFFFFF",
-}) {
+}: InitialsAvatarProps) {
   const tamanhoNome = nome.length;
   const FundoEscolhido = FUNDOS[tamanhoNome % FUNDOS.length];
   const inicial = nome.trim().charAt(0).toUpperCase();

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/dist/index.js

@@ -1,75 +0,0 @@
-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/index.jsx
-var index_exports = {};
-__export(index_exports, {
-  default: () => InitialsAvatar
-});
-module.exports = __toCommonJS(index_exports);
-var import_react = __toESM(require("react"));
-var FUNDOS = [
-  "#EF4444",
-  "#F97316",
-  "#EAB308",
-  "#22C55E",
-  "#3B82F6",
-  "#A855F7",
-  "#EC4899",
-  "#64748B"
-];
-function InitialsAvatar({
-  nome = "?",
-  tamanho = 40,
-  fonte = "inherit",
-  corTexto = "#FFFFFF"
-}) {
-  const tamanhoNome = nome.length;
-  const FundoEscolhido = FUNDOS[tamanhoNome % FUNDOS.length];
-  const inicial = nome.trim().charAt(0).toUpperCase();
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      style: {
-        width: tamanho,
-        height: tamanho,
-        backgroundColor: FundoEscolhido,
-        color: corTexto,
-        fontFamily: fonte,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: "50%",
-        fontSize: tamanho / 2.2,
-        fontWeight: "bold",
-        userSelect: "none"
-      }
-    },
-    inicial
-  );
-}

package/dist/index.mjs

@@ -1,45 +0,0 @@
-// src/index.jsx
-import React from "react";
-var FUNDOS = [
-  "#EF4444",
-  "#F97316",
-  "#EAB308",
-  "#22C55E",
-  "#3B82F6",
-  "#A855F7",
-  "#EC4899",
-  "#64748B"
-];
-function InitialsAvatar({
-  nome = "?",
-  tamanho = 40,
-  fonte = "inherit",
-  corTexto = "#FFFFFF"
-}) {
-  const tamanhoNome = nome.length;
-  const FundoEscolhido = FUNDOS[tamanhoNome % FUNDOS.length];
-  const inicial = nome.trim().charAt(0).toUpperCase();
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        width: tamanho,
-        height: tamanho,
-        backgroundColor: FundoEscolhido,
-        color: corTexto,
-        fontFamily: fonte,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: "50%",
-        fontSize: tamanho / 2.2,
-        fontWeight: "bold",
-        userSelect: "none"
-      }
-    },
-    inicial
-  );
-}
-export {
-  InitialsAvatar as default
-};