@juanzbdev/tooltip-react 1.0.0 → 1.0.2

package/README.md

@@ -30,13 +30,11 @@ yarn add @juanzbdev/tooltip-react
 
 ## Uso Básico
 
-1. Importa el componente y sus estilos CSS.
+1. Importa el componente (¡los estilos se inyectan automáticamente!).
 2. Envuelve el elemento que disparará el tooltip.
 
 ```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 (

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface ITooltipProps {
+    /** The content to display in the tooltip */
+    children: ReactNode;
+    /** The content to display in the tooltip */
+    label: ReactNode;
+    /** The position of the tooltip */
+    position?: "top" | "bottom" | "left" | "right";
+    /** Show the arrow on the tooltip */
+    showArrow?: boolean;
+    /** Disable the tooltip */
+    disabled?: boolean;
+    /** Tailwind classes to override defaults */
+    className?: string;
+    /** Pure CSS inline styles */
+    style?: CSSProperties;
+    /** Delay in milliseconds before hiding the tooltip */
+    delayHide?: number;
+    /** Tailwind classes to override defaults */
+    containerClassName?: string;
+}
+export declare function Tooltip({ children, label, position, showArrow, disabled, className, style, containerClassName, delayHide, }: ITooltipProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './components/Tooltip';

package/dist/tooltip-react.es.d.ts

@@ -1 +1,2 @@
+export * from './index.js'
 export {}

package/dist/tooltip-react.es.js

@@ -1,3 +1,4 @@
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.react-tooltip-base{color:#f9fafb;filter:drop-shadow(0 10px 15px #00000026);white-space:nowrap;z-index:9999;pointer-events:none;background-color:#1f2937;border:1px solid #374151;padding:.5rem .75rem;font-size:.75rem;font-weight:700;transition:opacity .2s ease-in-out;position:fixed}.react-tooltip-arrow{background-color:inherit;border-color:inherit;border-style:inherit;border-radius:2px;width:12px;height:12px;position:absolute}.react-tooltip-arrow.top{border-bottom-width:inherit;border-right-width:inherit;bottom:-6.5px;left:50%;transform:translate(-50%)rotate(45deg);border-top-width:0!important;border-left-width:0!important}.react-tooltip-arrow.bottom{border-top-width:inherit;border-left-width:inherit;top:-6.5px;left:50%;transform:translate(-50%)rotate(45deg);border-bottom-width:0!important;border-right-width:0!important}.react-tooltip-arrow.left{border-top-width:inherit;border-right-width:inherit;top:50%;right:-6.5px;transform:translateY(-50%)rotate(45deg);border-bottom-width:0!important;border-left-width:0!important}.react-tooltip-arrow.right{border-bottom-width:inherit;border-left-width:inherit;top:50%;left:-6.5px;transform:translateY(-50%)rotate(45deg);border-top-width:0!important;border-right-width:0!important}.react-tooltip-container{justify-content:center;align-items:center;display:inline-flex}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
 import { useEffect as e, useRef as t, useState as n } from "react";
 import { createPortal as r } from "react-dom";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";

package/dist/tooltip-react.umd.js

@@ -1 +1,2 @@
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.react-tooltip-base{color:#f9fafb;filter:drop-shadow(0 10px 15px #00000026);white-space:nowrap;z-index:9999;pointer-events:none;background-color:#1f2937;border:1px solid #374151;padding:.5rem .75rem;font-size:.75rem;font-weight:700;transition:opacity .2s ease-in-out;position:fixed}.react-tooltip-arrow{background-color:inherit;border-color:inherit;border-style:inherit;border-radius:2px;width:12px;height:12px;position:absolute}.react-tooltip-arrow.top{border-bottom-width:inherit;border-right-width:inherit;bottom:-6.5px;left:50%;transform:translate(-50%)rotate(45deg);border-top-width:0!important;border-left-width:0!important}.react-tooltip-arrow.bottom{border-top-width:inherit;border-left-width:inherit;top:-6.5px;left:50%;transform:translate(-50%)rotate(45deg);border-bottom-width:0!important;border-right-width:0!important}.react-tooltip-arrow.left{border-top-width:inherit;border-right-width:inherit;top:50%;right:-6.5px;transform:translateY(-50%)rotate(45deg);border-bottom-width:0!important;border-left-width:0!important}.react-tooltip-arrow.right{border-bottom-width:inherit;border-left-width:inherit;top:50%;left:-6.5px;transform:translateY(-50%)rotate(45deg);border-top-width:0!important;border-right-width:0!important}.react-tooltip-container{justify-content:center;align-items:center;display:inline-flex}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
 (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.TooltipReact={},e.React,e.ReactDOM,e.react_jsx_runtime))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function i({children:e,label:i,position:a=`top`,showArrow:o=!0,disabled:s=!1,className:c=``,style:l={},containerClassName:u=`react-tooltip-container`,delayHide:d=0}){let[f,p]=(0,t.useState)(!1),[m,h]=(0,t.useState)(!1),[g,_]=(0,t.useState)({top:-9999,left:-9999}),v=(0,t.useRef)(null),y=(0,t.useRef)(null),b=(0,t.useRef)(null),x=(0,t.useRef)(null),S=()=>{s||(b.current&&clearTimeout(b.current),x.current&&clearTimeout(x.current),p(!0),setTimeout(()=>{h(!0)},10))},C=()=>{b.current&&clearTimeout(b.current),x.current&&clearTimeout(x.current),b.current=setTimeout(()=>{h(!1),x.current=setTimeout(()=>{p(!1),_({top:-9999,left:-9999})},200)},d)};(0,t.useEffect)(()=>()=>{b.current&&clearTimeout(b.current),x.current&&clearTimeout(x.current)},[]);let w=()=>{if(!v.current||!y.current)return;let e=v.current.getBoundingClientRect(),t=y.current.getBoundingClientRect(),n=0,r=0;switch(a){case`top`:n=e.top-t.height-8,r=e.left+e.width/2-t.width/2;break;case`bottom`:n=e.bottom+8,r=e.left+e.width/2-t.width/2;break;case`left`:n=e.top+e.height/2-t.height/2,r=e.left-t.width-8;break;case`right`:n=e.top+e.height/2-t.height/2,r=e.right+8;break}_({top:n,left:r})};(0,t.useEffect)(()=>{if(f&&!s)return w(),window.addEventListener(`scroll`,w,!0),window.addEventListener(`resize`,w),()=>{window.removeEventListener(`scroll`,w,!0),window.removeEventListener(`resize`,w)}},[f,s,a]),(0,t.useEffect)(()=>{s&&C()},[s]);let T={top:`top`,bottom:`bottom`,left:`left`,right:`right`};return(0,r.jsxs)(`div`,{ref:v,className:u,onMouseEnter:S,onMouseLeave:C,onFocus:S,onBlur:C,children:[e,f&&!s&&(0,n.createPortal)((0,r.jsxs)(`div`,{ref:y,className:`react-tooltip-base ${c}`,style:{...l,top:g.top,left:g.left,opacity:g.top===-9999?0:+!!m},children:[i,o&&(0,r.jsx)(`div`,{className:`react-tooltip-arrow ${T[a]}`})]}),document.body)]})}e.Tooltip=i});

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@juanzbdev/tooltip-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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"
@@ -15,8 +14,7 @@
       "types": "./dist/tooltip-react.es.d.ts",
       "import": "./dist/tooltip-react.es.js",
       "require": "./dist/tooltip-react.umd.js"
-    },
-    "./style.css": "./dist/tooltip-react.css"
+    }
   },
   "files": [
     "dist"
@@ -44,6 +42,7 @@
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.61.0",
     "vite": "^8.1.0",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
     "vite-plugin-dts": "^5.0.3"
   }
 }

package/dist/tooltip-react.css

@@ -1,2 +0,0 @@
-.react-tooltip-base{color:#f9fafb;filter:drop-shadow(0 10px 15px #00000026);white-space:nowrap;z-index:9999;pointer-events:none;background-color:#1f2937;border:1px solid #374151;padding:.5rem .75rem;font-size:.75rem;font-weight:700;transition:opacity .2s ease-in-out;position:fixed}.react-tooltip-arrow{background-color:inherit;border-color:inherit;border-style:inherit;border-radius:2px;width:12px;height:12px;position:absolute}.react-tooltip-arrow.top{border-bottom-width:inherit;border-right-width:inherit;bottom:-6.5px;left:50%;transform:translate(-50%)rotate(45deg);border-top-width:0!important;border-left-width:0!important}.react-tooltip-arrow.bottom{border-top-width:inherit;border-left-width:inherit;top:-6.5px;left:50%;transform:translate(-50%)rotate(45deg);border-bottom-width:0!important;border-right-width:0!important}.react-tooltip-arrow.left{border-top-width:inherit;border-right-width:inherit;top:50%;right:-6.5px;transform:translateY(-50%)rotate(45deg);border-bottom-width:0!important;border-left-width:0!important}.react-tooltip-arrow.right{border-bottom-width:inherit;border-left-width:inherit;top:50%;left:-6.5px;transform:translateY(-50%)rotate(45deg);border-top-width:0!important;border-right-width:0!important}.react-tooltip-container{justify-content:center;align-items:center;display:inline-flex}
-/*$vite$:1*/