@juanzbdev/tooltip-react 0.0.0 → 1.0.0

package/README.md

@@ -1,75 +1,88 @@
-# React + TypeScript + Vite
+# @juanzbdev/tooltip-react
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Un componente de Tooltip para React moderno, ligero, fluido y altamente personalizable.
 
-Currently, two official plugins are available:
+Desarrollado con las mejores prácticas: animaciones fluidas (fade-in / fade-out), acoplamiento perfecto de bordes, y soporte total para Tailwind CSS o CSS puro.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Características
 
-## React Compiler
+- **Animaciones fluidas**: Transiciones suaves de entrada y salida gracias al manejo avanzado del ciclo de vida en React.
+- **Bordes Dinámicos**: La flecha del tooltip hereda dinámicamente el grosor y color del borde, fusionándose como una sola pieza (gracias al uso inteligente de `drop-shadow`).
+- **Agnóstico al CSS**: Estilos neutros por defecto. Úsalo como lienzo en blanco con Tailwind CSS o tus propios estilos en línea.
+- **Portales de React**: Renderizado seguro fuera de la jerarquía del DOM para evitar problemas con `overflow: hidden` o `z-index`.
+- **Cero dependencias pesadas**: Construido nativamente sobre React.
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Instalación
 
-## Expanding the ESLint configuration
+Puedes instalarlo utilizando tu gestor de paquetes favorito:
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```bash
+npm install @juanzbdev/tooltip-react
+```
+
+```bash
+pnpm add @juanzbdev/tooltip-react
+```
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+```bash
+yarn add @juanzbdev/tooltip-react
+```
+
+## Uso Básico
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+1. Importa el componente y sus estilos CSS.
+2. Envuelve el elemento que disparará el tooltip.
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```tsx
+import { Tooltip } from "@juanzbdev/tooltip-react";
+// ¡Importante importar el CSS para los estilos base!
+import "@juanzbdev/tooltip-react/style.css";
 
+export default function App() {
+  return (
+    <div style={{ padding: "50px" }}>
+      <Tooltip label="¡Hola, soy un tooltip!" position="top">
+        <button>Pasa el mouse sobre mí</button>
+      </Tooltip>
+    </div>
+  );
+}
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Personalización (Tailwind / CSS)
+
+El componente está diseñado para ser moldeable. Puedes sobreescribir completamente su apariencia usando la prop `className` (ideal para **Tailwind CSS**) o la prop `style`.
 
+```tsx
+<Tooltip
+  label="Tooltip verde y redondeado"
+  position="right"
+  style={{
+    backgroundColor: "#10b981",
+    borderColor: "#059669",
+    borderRadius: "12px",
+  }}
+>
+  <button>Hover me</button>
+</Tooltip>
 ```
+
+_¡Magia!: La flecha heredará automáticamente el color de fondo y del borde, adaptándose perfectamente a tu diseño sin que tengas que hacer trucos adicionales._
+
+## Props (API)
+
+| Prop                 | Tipo                                     | Por defecto                 | Descripción                                                                                   |
+| -------------------- | ---------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------- |
+| `label` **(\*)**     | `ReactNode`                              | `-`                         | El texto o componente que se mostrará dentro del tooltip.                                     |
+| `children` **(\*)**  | `ReactNode`                              | `-`                         | El elemento (ej. botón) sobre el cual se hará hover para mostrar el tooltip.                  |
+| `position`           | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'`                     | La dirección hacia donde aparecerá el tooltip.                                                |
+| `showArrow`          | `boolean`                                | `true`                      | Muestra u oculta la flecha del tooltip.                                                       |
+| `disabled`           | `boolean`                                | `false`                     | Desactiva temporalmente el tooltip para que no se muestre al hacer hover.                     |
+| `delayHide`          | `number`                                 | `0`                         | Retardo en milisegundos (ms) que el tooltip esperará antes de desaparecer al quitar el mouse. |
+| `className`          | `string`                                 | `""`                        | Clases CSS adicionales (ej. Tailwind) para la caja del tooltip.                               |
+| `style`              | `CSSProperties`                          | `{}`                        | Estilos en línea para personalizar la caja del tooltip.                                       |
+| `containerClassName` | `string`                                 | `"react-tooltip-container"` | Clase CSS para el contenedor que envuelve a los `children`.                                   |
+
+## Licencia
+
+MIT

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@juanzbdev/tooltip-react",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "main": "./dist/tooltip-react.umd.js",
   "module": "./dist/tooltip-react.es.js",
   "types": "./dist/tooltip-react.es.d.ts",
   "style": "./dist/tooltip-react.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/juanzb/tooltip-react.git"
+  },
   "exports": {
     ".": {
       "types": "./dist/tooltip-react.es.d.ts",