@supermousejs/text 2.3.0 → 2.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @supermousejs/text
 
-Displays a contextual text label next to the cursor when hovering interactive elements.
+Injects contextual text bubbles near the cursor on interaction. Works like a tooltip.
 
 ## Installation
 
@@ -8,27 +8,26 @@ Displays a contextual text label next to the cursor when hovering interactive el
 pnpm add @supermousejs/text
 ```
 
-## Usage
+## Text
+
+Injects contextual text bubbles near the cursor on interaction. Works like a tooltip.
+
+### Usage
 
 ```ts
 import { Supermouse } from "@supermousejs/core";
 import { Text } from "@supermousejs/text";
-
 const app = new Supermouse();
-
-app.use(
-  Text({
-    offset: [20, 20], // X, Y offset from cursor
-    duration: 200 // Fade duration
-  })
-);
+app.use(Text({ duration: 200 }));
 ```
 
-**HTML:**
+### Options
 
-```html
-<button data-supermouse-text="Click Me">Hover Here</button>
-```
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | 'supermouse-text' | CSS class added to container. |
+| offset | [number, number] | [0, 24] | X/Y offset from cursor. |
+| duration | number | 200 | Fade transition time in ms. |
 
 ## Documentation
 

package/dist/index.mjs

@@ -1,29 +1,29 @@
-import { definePlugin as f, dom as e, Easings as p, Layers as u } from "@supermousejs/utils";
+import { definePlugin as l, dom as e, Easings as u, Layers as x } from "@supermousejs/utils";
 const y = (s = {}) => {
-  const r = s.className || "supermouse-text", [c, i] = s.offset || [0, 24], l = s.duration || 200;
-  let a;
-  return f(
+  const r = s.className || "supermouse-text", [c, i] = s.offset || [0, 24], d = s.duration || 200;
+  let o;
+  return l(
     {
       name: "text",
       selector: "[data-supermouse-text]",
       create: () => {
         const t = e.createActor("div");
-        return e.applyStyles(t, {
-          zIndex: u.OVERLAY,
+        return e.css(t, {
+          zIndex: x.OVERLAY,
           opacity: "0",
-          transition: `opacity ${l}ms ${p.SMOOTH}`,
+          transition: `opacity ${d}ms ${u.SMOOTH}`,
           whiteSpace: "nowrap",
           pointerEvents: "none"
-        }), t.classList.add(...r.split(" ").filter(Boolean)), a = document.createElement("span"), t.appendChild(a), e.setTransform(t, -100, -100), t;
+        }), t.classList.add(...r.split(" ").filter(Boolean)), o = document.createElement("span"), t.appendChild(o), e.setTransform(t, -100, -100), t;
       },
-      update: (t, o) => {
+      update: (t, a) => {
         const n = t.state.interaction.text;
         if (t.state.isHover && n) {
-          a.innerText = n, e.setStyle(o, "opacity", "1");
-          const { x: d, y: m } = t.state.smooth;
-          e.setTransform(o, d + c, m + i);
+          o.innerText = n, e.css(a, { opacity: "1" });
+          const { x: m, y: f } = t.state.smooth;
+          e.setTransform(a, m + c, f + i);
         } else
-          e.setStyle(o, "opacity", "0");
+          e.css(a, { opacity: "0" });
       }
     },
     s

package/dist/index.umd.js

@@ -1 +1 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.SupermouseText={},o.SupermouseUtils))})(this,(function(o,e){"use strict";const d=(s={})=>{const i=s.className||"supermouse-text",[c,m]=s.offset||[0,24],f=s.duration||200;let n;return e.definePlugin({name:"text",selector:"[data-supermouse-text]",create:()=>{const t=e.dom.createActor("div");return e.dom.applyStyles(t,{zIndex:e.Layers.OVERLAY,opacity:"0",transition:`opacity ${f}ms ${e.Easings.SMOOTH}`,whiteSpace:"nowrap",pointerEvents:"none"}),t.classList.add(...i.split(" ").filter(Boolean)),n=document.createElement("span"),t.appendChild(n),e.dom.setTransform(t,-100,-100),t},update:(t,r)=>{const a=t.state.interaction.text;if(t.state.isHover&&a){n.innerText=a,e.dom.setStyle(r,"opacity","1");const{x:u,y:p}=t.state.smooth;e.dom.setTransform(r,u+c,p+m)}else e.dom.setStyle(r,"opacity","0")}},s)};o.Text=d,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.SupermouseText={},s.SupermouseUtils))})(this,(function(s,e){"use strict";const d=(o={})=>{const i=o.className||"supermouse-text",[c,m]=o.offset||[0,24],f=o.duration||200;let n;return e.definePlugin({name:"text",selector:"[data-supermouse-text]",create:()=>{const t=e.dom.createActor("div");return e.dom.css(t,{zIndex:e.Layers.OVERLAY,opacity:"0",transition:`opacity ${f}ms ${e.Easings.SMOOTH}`,whiteSpace:"nowrap",pointerEvents:"none"}),t.classList.add(...i.split(" ").filter(Boolean)),n=document.createElement("span"),t.appendChild(n),e.dom.setTransform(t,-100,-100),t},update:(t,r)=>{const a=t.state.interaction.text;if(t.state.isHover&&a){n.innerText=a,e.dom.css(r,{opacity:"1"});const{x:u,y:p}=t.state.smooth;e.dom.setTransform(r,u+c,p+m)}else e.dom.css(r,{opacity:"0"})}},o)};s.Text=d,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@supermousejs/text",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "author": "O.S David",
   "url": "https://github.com/Whitestar14/supermouse-js",
+  "description": "Injects contextual text bubbles near the cursor on interaction. Works like a tooltip.",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.3.0"
+    "@supermousejs/utils": "2.4.0"
   },
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "peerDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "repository": {
     "type": "git",

package/CHANGELOG.md

@@ -1,90 +0,0 @@
-# @supermousejs/text
-
-## 2.3.0
-
-### Patch Changes
-
-- Updated dependencies [f6f44b2]
-  - @supermousejs/core@2.2.0
-  - @supermousejs/utils@2.3.0
-
-## 2.2.0
-
-### Patch Changes
-
-- 6d70c18: remove legacy package and update supermouse domain in readme
-- 14fb5b6: Updated tsconfig to be reference-compliant with core, utils and zoetrope when required
-- Updated dependencies [6d70c18]
-- Updated dependencies [2590af3]
-- Updated dependencies [14fb5b6]
-- Updated dependencies [9fe1a7b]
-- Updated dependencies [9fa6ece]
-  - @supermousejs/core@2.1.0
-  - @supermousejs/utils@2.2.0
-
-## 2.1.1
-
-### Patch Changes
-
-- 67f771b: Add relevant npm metadata to package.json file
-- Updated dependencies [67f771b]
-  - @supermousejs/utils@2.1.1
-  - @supermousejs/core@2.0.5
-
-## 2.1.0
-
-### Minor Changes
-
-- 0a1652d: fixed build architecture and updated plugin metadata
-
-### Patch Changes
-
-- Updated dependencies [0a1652d]
-  - @supermousejs/utils@2.1.0
-
-## 2.0.4
-
-### Patch Changes
-
-- 993dc67: Updated supemousejs packages with proper author, license and url descriptors to repo
-- Updated dependencies [993dc67]
-  - @supermousejs/utils@2.0.4
-  - @supermousejs/core@2.0.4
-
-## 2.0.3
-
-### Patch Changes
-
-- Updated dependencies
-  - @supermousejs/core@2.0.3
-  - @supermousejs/utils@2.0.3
-
-## 2.0.2
-
-### Patch Changes
-
-- ae219a0: Update READMEs with correct link to documentation
-- Updated dependencies [ae219a0]
-  - @supermousejs/utils@2.0.2
-  - @supermousejs/core@2.0.2
-
-## 2.0.1
-
-### Patch Changes
-
-- Add minimal README.md files to packages
-- Updated dependencies
-  - @supermousejs/utils@2.0.1
-  - @supermousejs/core@2.0.1
-
-## 2.0.0
-
-### Major Changes
-
-- Initial v2.0.0 release
-
-### Patch Changes
-
-- Updated dependencies
-  - @supermousejs/utils@2.0.0
-  - @supermousejs/core@2.0.0

package/meta.json

@@ -1,32 +0,0 @@
-{
-  "id": "text",
-  "name": "Text",
-  "package": "@supermousejs/text",
-  "description": "Injects contextual text bubbles near the cursor on interaction.",
-  "code": "app.use(Text({ font: 'Mono' }));",
-  "recipeId": "text-cursor",
-  "icon": "text",
-  "options": [
-    {
-      "name": "className",
-      "type": "string",
-      "default": "'supermouse-text'",
-      "description": "CSS class added to container.",
-      "reactive": false
-    },
-    {
-      "name": "offset",
-      "type": "[number, number]",
-      "default": "[0, 24]",
-      "description": "X/Y offset from cursor.",
-      "reactive": false
-    },
-    {
-      "name": "duration",
-      "type": "number",
-      "default": "200",
-      "description": "Fade transition time in ms.",
-      "reactive": false
-    }
-  ]
-}

package/src/index.ts

@@ -1,62 +0,0 @@
-import type { Supermouse } from "@supermousejs/core";
-import { definePlugin, dom, Layers, Easings } from "@supermousejs/utils";
-
-export interface TextOptions {
-  name?: string;
-  isEnabled?: boolean;
-  className?: string;
-  offset?: [number, number];
-  duration?: number;
-}
-
-export const Text = (options: TextOptions = {}) => {
-  const className = options.className || "supermouse-text";
-  const [offX, offY] = options.offset || [0, 24];
-  const duration = options.duration || 200;
-
-  let textNode: HTMLSpanElement;
-
-  return definePlugin<HTMLDivElement, TextOptions>(
-    {
-      name: "text",
-      selector: "[data-supermouse-text]",
-
-      create: () => {
-        const el = dom.createActor("div") as HTMLDivElement;
-
-        dom.applyStyles(el, {
-          zIndex: Layers.OVERLAY,
-          opacity: "0",
-          transition: `opacity ${duration}ms ${Easings.SMOOTH}`,
-          whiteSpace: "nowrap",
-          pointerEvents: "none"
-        });
-
-        if (className) {
-          el.classList.add(...className.split(" ").filter(Boolean));
-        }
-
-        textNode = document.createElement("span");
-        el.appendChild(textNode);
-
-        dom.setTransform(el, -100, -100);
-        return el;
-      },
-
-      update: (app: Supermouse, el: HTMLDivElement) => {
-        const text = app.state.interaction.text;
-
-        if (app.state.isHover && text) {
-          textNode.innerText = text;
-          dom.setStyle(el, "opacity", "1");
-
-          const { x, y } = app.state.smooth;
-          dom.setTransform(el, x + offX, y + offY);
-        } else {
-          dom.setStyle(el, "opacity", "0");
-        }
-      }
-    },
-    options
-  );
-};

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.plugin.json",
-  "include": ["src"]
-}

package/vite.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-import path from "path";
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, "src/index.ts"),
-      name: "SupermouseText",
-      fileName: (format) => (format === "es" ? "index.mjs" : "index.umd.js")
-    },
-    rollupOptions: {
-      external: ["@supermousejs/core", "@supermousejs/utils"],
-      output: {
-        globals: {
-          "@supermousejs/core": "SupermouseCore",
-          "@supermousejs/utils": "SupermouseUtils"
-        }
-      }
-    }
-  },
-  plugins: [dts({ rollupTypes: true })]
-});