react-simple-initials 1.0.1 → 1.0.3

package/README.md

@@ -2,63 +2,90 @@
 
 [![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)
+[![License](https://img.shields.io/npm/l/react-simple-initials.svg)](https://github.com/seu-usuario/react-simple-initials/blob/main/LICENSE)
 
-Um componente React minimalista, elegante e ultraleve (menos de 5kB) 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.
+Um componente React funcional, minimalista e ultraleve para gerar avatares baseados nas iniciais do usuário. Ideal para interfaces que necessitam de um fallback visual elegante quando a foto de perfil não está disponível.
 
 ---
 
 ## 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.
+- **Zero Dependencias:** Construido apenas com React e CSS inline, garantindo um bundle size reduzido.
+- **Cores Deterministicas:** O fundo do avatar e gerado algoritmicamente com base no nome fornecido. O mesmo nome sempre resultara na mesma cor.
+- **Escalabilidade:** O tamanho da fonte e do container se ajustam proporcionalmente atraves da prop de tamanho.
+- **Pronto para Producao:** Suporte nativo a TypeScript e compatibilidade com SSR (Next.js, Remix) e ferramentas modernas como Vite.
 
-## Instalação
+---
+
+## Instalacao
+
+Instale o pacote utilizando o seu gerenciador de preferencia:
 
-Você pode instalar usando o seu gerenciador de pacotes favorito:
+```bash
+npm react-simple-initials
+# or
+yarn react-simple-initials
+# or
+pnpm react-simple-initials
+```
 
-npm install react-simple-initials
+---
 
 ## Como usar
 
-A configuração é instantânea. Basta importar o componente e passar o nome desejado:
+Importe o componente e passe a propriedade obrigatoria nome. O componente cuidara do restante.
+
+```typescript
+import InitialsAvatar from "react-simple-initials";
+
+export default function Page() {
+  return (
+    <div className="flex gap-4 items-centrer">
 
-import React from 'react';
-import InitialsAvatar from 'react-simple-initials';
+      {/* Exemplo Padrao (40px) */}
+      <InitialsAvatar nome="Visitante" />
 
-export default function App() {
-return (
+      {/* Tamanho Customizado */}
+      <InitialsAvatar nome="Maria Silva" tamanho={60} />
 
-<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>
-);
+      {/* Customizacao de Estilo */}
+      <InitialsAvatar
+        nome="Joao"
+        tamanho={80}
+        corTexto="#FFFFFF"
+        fonte="Arial, sans-serif"
+      />
+    </div>
+  );
 }
 
+```
+
+---
+
 ## Propriedades (API)
 
-O componente aceita as seguintes propriedades (props) para você customizar como preferir:
+| Propriedade  | Tipo   | Padrao    | Descricao                                                                         |
+| :----------- | :----- | :-------- | :-------------------------------------------------------------------------------- |
+| **nome**     | string | "?"       | O nome do usuario. A primeira letra sera extraida e capitalizada automaticamente. |
+| **tamanho**  | number | 40        | O diametro do avatar em pixels.                                                   |
+| **fonte**    | string | "inherit" | Define a familia da fonte (ex: "Inter, sans-serif").                              |
+| **corTexto** | string | "#FFFFFF" | Define a cor da letra central do avatar.                                          |
 
-| 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:
+Pull requests sao bem-vindos. Para mudancas maiores, abra uma issue primeiro para discutir o que voce gostaria de mudar.
 
 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)
+2. Crie sua branch de funcionalidade (git checkout -b feature/NovaFeature)
+3. Commit suas alterações (git commit -m 'feat: Adiciona nova funcionalidade')
+4. Push para a branch (git push origin feature/NovaFeature)
 5. Abra um Pull Request
 
-## Licença
+---
+
+## Licenca
 
-Este projeto está licenciado sob a Licença MIT.
+Este projeto esta sob a licenca MIT.

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface InitialsAvatarProps {
+    nome?: string;
+    tamanho?: number;
+    fonte?: string;
+    corTexto?: string;
+}
+declare function InitialsAvatar({ nome, tamanho, fonte, corTexto, }: InitialsAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { InitialsAvatar as default };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface InitialsAvatarProps {
+    nome?: string;
+    tamanho?: number;
+    fonte?: string;
+    corTexto?: string;
+}
+declare function InitialsAvatar({ nome, tamanho, fonte, corTexto, }: InitialsAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { InitialsAvatar as default };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var h=(n,t)=>{for(var i in t)r(n,i,{get:t[i],enumerable:!0})},u=(n,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of f(t))!g.call(n,e)&&e!==i&&r(n,e,{get:()=>t[e],enumerable:!(o=d(t,e))||o.enumerable});return n};var p=n=>u(r({},"__esModule",{value:!0}),n);var A={};h(A,{default:()=>a});module.exports=p(A);var l=require("react/jsx-runtime"),s=["#EF4444","#F97316","#EAB308","#22C55E","#3B82F6","#A855F7","#EC4899","#64748B"];function a({nome:n="?",tamanho:t=40,fonte:i="inherit",corTexto:o="#FFFFFF"}){let e=n.length,c=s[e%s.length],F=n.trim().charAt(0).toUpperCase();return(0,l.jsx)("div",{style:{width:t,height:t,backgroundColor:c,color:o,fontFamily:i,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",fontSize:t/2.2,fontWeight:"bold",userSelect:"none"},children:F})}

package/dist/index.mjs

@@ -0,0 +1 @@
+import{jsx as c}from"react/jsx-runtime";var e=["#EF4444","#F97316","#EAB308","#22C55E","#3B82F6","#A855F7","#EC4899","#64748B"];function l({nome:n="?",tamanho:t=40,fonte:i="inherit",corTexto:o="#FFFFFF"}){let r=n.length,s=e[r%e.length],a=n.trim().charAt(0).toUpperCase();return c("div",{style:{width:t,height:t,backgroundColor:s,color:o,fontFamily:i,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",fontSize:t/2.2,fontWeight:"bold",userSelect:"none"},children:a})}export{l as default};

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "react-simple-initials",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Um componente React minimalista para avatares com iniciais do nome.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "build": "tsup src/index.jsx --format cjs,esm"
+    "build": "tsup src/index.tsx --format cjs,esm --dts --minify",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "react",
@@ -16,10 +23,15 @@
   "author": "WinstonAjr",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.7.0"
   }
 }

package/.github/workflows/publish.yml

@@ -1,32 +0,0 @@
-name: Publicar no NPM
-
-on:
-  workflow_dispatch:
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-
-    steps:
-      - name: Baixar o código
-        uses: actions/checkout@v4
-
-      - name: Configurar o Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Instalar dependências
-        run: npm install
-
-      - name: Construir o projeto
-        run: npm run build
-
-      - name: Publicar no NPM
-        run: npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/src/index.jsx

@@ -1,42 +0,0 @@
-const FUNDOS = [
-  "#EF4444",
-  "#F97316",
-  "#EAB308",
-  "#22C55E",
-  "#3B82F6",
-  "#A855F7",
-  "#EC4899",
-  "#64748B",
-];
-
-export default 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 (
-    <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}
-    </div>
-  );
-}