@maelstrom-futurism/tooltip 0.9.0 → 0.9.2

package/dist/Tooltip.d.ts

@@ -1,10 +1,13 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { SerializedStyles } from '@emotion/react';
 interface TooltipProps {
-    content: React.ReactNode;
-    children: React.ReactNode;
+    content: ReactNode;
+    children: ReactNode;
     position?: 'top' | 'bottom' | 'left' | 'right';
     trigger?: 'hover' | 'click';
+    css?: SerializedStyles | SerializedStyles[];
+    className?: string;
 }
-declare const Tooltip: ({ content, children, position, trigger, }: TooltipProps) => ReactNode;
+declare const Tooltip: ({ content, children, position, trigger, css, className, }: TooltipProps) => ReactNode;
 export default Tooltip;
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,UAAU,YAAY;IAClB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,OAAO,GAAI,2CAKd,YAAY,KAAG,SAsCjB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIlD,UAAU,YAAY;IACpB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,GAAG,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,GAAI,2DAOd,YAAY,KAAG,SAkCjB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Tooltip.js

@@ -1,30 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useTheme } from '@maelstrom-futurism/core';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import * as tooltipStyles from './Tooltip.styles';
-const Tooltip = ({ content, children, position = 'top', trigger = 'hover', }) => {
-    const theme = useTheme();
-    const containerRef = useRef(null);
-    const toggleTooltip = (visible) => {
-        if (visible) {
-            containerRef.current.style.display = 'block';
-        }
-        else {
-            containerRef.current.style.display = 'none';
-        }
-    };
+const Tooltip = ({ content, children, position = 'top', trigger = 'hover', css, className, }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const tooltipRef = useRef(null);
     useEffect(() => {
-        if (trigger === 'click') {
-            const handleClickOutside = (event) => {
-                if (containerRef.current && !containerRef.current.contains(event.target)) {
-                    toggleTooltip(false);
-                }
-            };
-            document.addEventListener('click', handleClickOutside);
-            return () => document.removeEventListener('click', handleClickOutside);
-        }
+        if (trigger !== 'click')
+            return;
+        const handleClickOutside = (event) => {
+            if (tooltipRef.current && !tooltipRef.current.contains(event.target)) {
+                setIsVisible(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
     }, [trigger]);
-    return (_jsxs("div", { style: { position: 'relative', display: 'inline-block' }, onMouseEnter: () => trigger === 'hover' && toggleTooltip(true), onMouseLeave: () => trigger === 'hover' && toggleTooltip(false), children: [children, _jsx("div", { ref: containerRef, style: { display: "none" }, css: [tooltipStyles.getBase(theme), tooltipStyles[position]], children: content })] }));
+    return (_jsxs("div", { style: { position: 'relative', display: 'inline-block' }, onMouseEnter: () => trigger === 'hover' && setIsVisible(true), onMouseLeave: () => trigger === 'hover' && setIsVisible(false), onClick: () => trigger === 'click' && setIsVisible(v => !v), children: [children, _jsx("div", { ref: tooltipRef, onClick: e => e.stopPropagation(), css: [tooltipStyles.base, tooltipStyles[position], isVisible && tooltipStyles.visible, css], className: className, children: content })] }));
 };
 export default Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAc,EAAE,MAAM,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AASlD,MAAM,OAAO,GAAG,CAAC,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,OAAO,GACN,EAAa,EAAE;IAC1B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,CAAC,OAAgB,EAAE,EAAE;QACvC,IAAI,OAAO,EAAE,CAAC;YACV,YAAY,CAAC,OAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,CAAC;aAAM,CAAC;YACJ,YAAY,CAAC,OAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACjD,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;YACtB,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;gBAC7C,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;oBAC/E,aAAa,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC;YACL,CAAC,CAAC;YACF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;YACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC3E,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAGd,OAAO,CACH,eACI,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,EACxD,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,OAAO,IAAI,aAAa,CAAC,IAAI,CAAC,EAC9D,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,OAAO,IAAI,aAAa,CAAC,KAAK,CAAC,aAE9D,QAAQ,EAET,cAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,YAC3G,OAAO,GACN,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAWlD,MAAM,OAAO,GAAG,CAAC,EACf,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,OAAO,EACjB,GAAG,EACH,SAAS,GACI,EAAa,EAAE;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,OAAO;YAAE,OAAO;QAChC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC7E,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,eACE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,EACxD,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,EAC7D,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,OAAO,IAAI,YAAY,CAAC,KAAK,CAAC,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAE1D,QAAQ,EAET,cACE,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACjC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,SAAS,IAAI,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,EAC3F,SAAS,EAAE,SAAS,YAEnB,OAAO,GACJ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Tooltip.styles.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@maelstrom-futurism/core';
-export declare const getBase: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const base: import("@emotion/react").SerializedStyles;
+export declare const visible: import("@emotion/react").SerializedStyles;
 export declare const top: import("@emotion/react").SerializedStyles;
 export declare const bottom: import("@emotion/react").SerializedStyles;
 export declare const left: import("@emotion/react").SerializedStyles;

package/dist/Tooltip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../src/Tooltip.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,8CASnC,CAAC;AAEF,eAAO,MAAM,GAAG,2CAKf,CAAC;AAEF,eAAO,MAAM,MAAM,2CAKlB,CAAC;AAGF,eAAO,MAAM,IAAI,2CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,2CAKjB,CAAC"}
+{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../src/Tooltip.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,IAAI,2CAahB,CAAC;AAEF,eAAO,MAAM,OAAO,2CAInB,CAAC;AAEF,eAAO,MAAM,GAAG,2CAsBf,CAAC;AAEF,eAAO,MAAM,MAAM,2CAsBlB,CAAC;AAEF,eAAO,MAAM,IAAI,2CAsBhB,CAAC;AAEF,eAAO,MAAM,KAAK,2CAsBjB,CAAC"}

package/dist/Tooltip.styles.js

@@ -1,36 +1,119 @@
 import { css } from '@emotion/react';
-export const getBase = (theme) => css `
+const arrowBase = `
+    content: '';
     position: absolute;
-    background-color: ${theme.color("content")};
-    color: ${theme.color("textColor")};
+    border-style: solid;
+    border-color: transparent;
+`;
+export const base = css `
+    position: absolute;
+    background-color: var(--mf-content);
+    color: var(--mf-text);
     padding: 12px;
-    border: 1px solid ${theme.color("borderMuted")};
-    border-radius: ${theme.borderRadius};
-    z-index: 1000;
+    border: 1px solid var(--mf-border-muted);
+    border-radius: var(--mf-radius-card);
+    z-index: var(--mf-z-high);
     min-width: 200px;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity var(--mf-dur-fast) ease, visibility var(--mf-dur-fast) ease;
+`;
+export const visible = css `
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
 `;
 export const top = css `
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
     margin-bottom: 8px;
+
+    &::before {
+        ${arrowBase}
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 8px 8px 0;
+        border-top-color: var(--mf-border-muted);
+    }
+    &::after {
+        ${arrowBase}
+        bottom: -7px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 7px 7px 0;
+        border-top-color: var(--mf-content);
+    }
 `;
 export const bottom = css `
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     margin-top: 8px;
+
+    &::before {
+        ${arrowBase}
+        top: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 0 8px 8px;
+        border-bottom-color: var(--mf-border-muted);
+    }
+    &::after {
+        ${arrowBase}
+        top: -7px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 0 7px 7px;
+        border-bottom-color: var(--mf-content);
+    }
 `;
 export const left = css `
     right: 100%;
     top: 50%;
     transform: translateY(-50%);
     margin-right: 8px;
+
+    &::before {
+        ${arrowBase}
+        right: -8px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-width: 8px 0 8px 8px;
+        border-left-color: var(--mf-border-muted);
+    }
+    &::after {
+        ${arrowBase}
+        right: -7px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-width: 7px 0 7px 7px;
+        border-left-color: var(--mf-content);
+    }
 `;
 export const right = css `
     left: 100%;
     top: 50%;
     transform: translateY(-50%);
     margin-left: 8px;
+
+    &::before {
+        ${arrowBase}
+        left: -8px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-width: 8px 8px 8px 0;
+        border-right-color: var(--mf-border-muted);
+    }
+    &::after {
+        ${arrowBase}
+        left: -7px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-width: 7px 7px 7px 0;
+        border-right-color: var(--mf-content);
+    }
 `;
 //# sourceMappingURL=Tooltip.styles.js.map

package/dist/Tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.js","sourceRoot":"","sources":["../src/Tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAGrC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEpB,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;aACjC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;;wBAEb,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC;qBAC7B,KAAK,CAAC,YAAY;;;CAGtC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CAAA;;;;;CAKrB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC;AAGF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;CAKvB,CAAC"}
+{"version":3,"file":"Tooltip.styles.js","sourceRoot":"","sources":["../src/Tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,MAAM,SAAS,GAAG;;;;;CAKjB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAatB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAA;;;;CAIzB,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CAAA;;;;;;;UAOZ,SAAS;;;;;;;;UAQT,SAAS;;;;;;;CAOlB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;UAOf,SAAS;;;;;;;;UAQT,SAAS;;;;;;;CAOlB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;UAOb,SAAS;;;;;;;;UAQT,SAAS;;;;;;;CAOlB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;UAOd,SAAS;;;;;;;;UAQT,SAAS;;;;;;;CAOlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maelstrom-futurism/tooltip",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Simple popup tooltip",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,6 +19,8 @@
     "build": "tsc",
     "test": "vitest run --coverage",
     "test:dev": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "prepublishOnly": "npm run build"
   },
   "author": "Dawson Goodell <dawsong@osmstudios.com>",
@@ -30,11 +32,11 @@
     "directory": "packages/tooltip"
   },
   "dependencies": {
-    "@maelstrom-futurism/core": "^0.9.0"
+    "@maelstrom-futurism/core": "^0.9.2"
   },
   "peerDependences": {
     "react": ">= 18.0.0",
     "react-dom": ">= 18.0.0"
   },
-  "gitHead": "5034af01ee5ea4d23abc4b678e0c66c73bae417a"
+  "gitHead": "839026702c7b52490406b7ac80860b4877805658"
 }