kitzo 2.0.24 → 2.0.26

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.24/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.26/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.

package/dist/kitzo.esm.js

@@ -455,7 +455,7 @@ function clippath(element, config = {}) {
       class: '',
       style: {},
     },
-    config
+    config,
   );
 
   const allButtons = getButtons(element);
@@ -494,22 +494,32 @@ function clippath(element, config = {}) {
         const { textOption, clippathSize, smooth, style } = clippathConfigMap.get(btn);
 
         const { top, left, width, height } = btn.getBoundingClientRect();
+
         const cloned = btn.cloneNode(true);
         cloned.className = cloned.className + ` ${clippathConfigMap.get(btn).class}`;
         cloned.removeAttribute('data-kitzo-clippath');
         cloned.setAttribute('data-temp-clippath-el', true);
-        Object.assign(cloned.style, {
-          backgroundColor: '#01c2b8',
-          color: 'white',
-          fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
-          ...style,
-        });
+
+        setTimeout(() => {
+          const fontFamily = window.getComputedStyle(btn).fontFamily;
+          Object.assign(cloned.style, {
+            backgroundColor: '#01c2b8',
+            color: 'white',
+            fontFamily,
+            margin: 0,
+            width: '100%',
+            ...style,
+          });
+        }, 0);
 
         if (textOption && textOption instanceof Object) {
-          const target = cloned.querySelector(textOption.selector);
-          if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
-            target.textContent = textOption.value;
-          }
+          requestAnimationFrame(() => {
+            const target = typeof textOption.selector === 'string' ? clippathDiv.querySelector(textOption.selector.trim() ? textOption.selector.trim() : cloned.tagName) : cloned;
+
+            if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
+              target.textContent = textOption.value;
+            }
+          });
         }
 
         clippathDiv.style.width = `${width}px`;
@@ -523,6 +533,7 @@ function clippath(element, config = {}) {
         });
       }
     });
+
     document.addEventListener('mouseout', (e) => {
       const btn = e.target.closest('[data-kitzo-clippath]');
       if (btn) {
@@ -532,7 +543,7 @@ function clippath(element, config = {}) {
           () => {
             clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
           },
-          smooth ? 150 : 150
+          smooth ? 150 : 150,
         );
       }
     });
@@ -546,8 +557,10 @@ function clippath(element, config = {}) {
         const x = e.clientX - left;
         const y = e.clientY - top;
 
-        clippathDiv.style.setProperty('--kitzo-clippath-pos-x', `${x}px`);
-        clippathDiv.style.setProperty('--kitzo-clippath-pos-y', `${y}px`);
+        requestAnimationFrame(() => {
+          clippathDiv.style.setProperty('--kitzo-clippath-pos-x', `${x}px`);
+          clippathDiv.style.setProperty('--kitzo-clippath-pos-y', `${y}px`);
+        });
       }
     });
 

package/dist/kitzo.umd.js

@@ -461,7 +461,7 @@
         class: '',
         style: {},
       },
-      config
+      config,
     );
 
     const allButtons = getButtons(element);
@@ -500,22 +500,32 @@
           const { textOption, clippathSize, smooth, style } = clippathConfigMap.get(btn);
 
           const { top, left, width, height } = btn.getBoundingClientRect();
+
           const cloned = btn.cloneNode(true);
           cloned.className = cloned.className + ` ${clippathConfigMap.get(btn).class}`;
           cloned.removeAttribute('data-kitzo-clippath');
           cloned.setAttribute('data-temp-clippath-el', true);
-          Object.assign(cloned.style, {
-            backgroundColor: '#01c2b8',
-            color: 'white',
-            fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
-            ...style,
-          });
+
+          setTimeout(() => {
+            const fontFamily = window.getComputedStyle(btn).fontFamily;
+            Object.assign(cloned.style, {
+              backgroundColor: '#01c2b8',
+              color: 'white',
+              fontFamily,
+              margin: 0,
+              width: '100%',
+              ...style,
+            });
+          }, 0);
 
           if (textOption && textOption instanceof Object) {
-            const target = cloned.querySelector(textOption.selector);
-            if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
-              target.textContent = textOption.value;
-            }
+            requestAnimationFrame(() => {
+              const target = typeof textOption.selector === 'string' ? clippathDiv.querySelector(textOption.selector.trim() ? textOption.selector.trim() : cloned.tagName) : cloned;
+
+              if (target && (typeof textOption.value === 'string' || typeof textOption.value === 'number')) {
+                target.textContent = textOption.value;
+              }
+            });
           }
 
           clippathDiv.style.width = `${width}px`;
@@ -529,6 +539,7 @@
           });
         }
       });
+
       document.addEventListener('mouseout', (e) => {
         const btn = e.target.closest('[data-kitzo-clippath]');
         if (btn) {
@@ -538,7 +549,7 @@
             () => {
               clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
             },
-            smooth ? 150 : 150
+            smooth ? 150 : 150,
           );
         }
       });
@@ -552,8 +563,10 @@
           const x = e.clientX - left;
           const y = e.clientY - top;
 
-          clippathDiv.style.setProperty('--kitzo-clippath-pos-x', `${x}px`);
-          clippathDiv.style.setProperty('--kitzo-clippath-pos-y', `${y}px`);
+          requestAnimationFrame(() => {
+            clippathDiv.style.setProperty('--kitzo-clippath-pos-x', `${x}px`);
+            clippathDiv.style.setProperty('--kitzo-clippath-pos-y', `${y}px`);
+          });
         }
       });
 

package/package.json

@@ -1,60 +1,61 @@
-{
-  "name": "kitzo",
-  "version": "2.0.24",
-  "description": "A lightweight JavaScript UI micro-library.",
-  "type": "module",
-  "main": "./dist/kitzo.umd.js",
-  "exports": {
-    ".": {
-      "import": "./dist/kitzo.esm.js",
-      "require": "./dist/kitzo.umd.js",
-      "types": "./dist/kitzo.d.ts"
-    },
-    "./react": {
-      "import": "./dist/react.esm.js",
-      "types": "./dist/react.d.ts"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "rollup -c",
-    "preview": "vite preview"
-  },
-  "keywords": [
-    "tooltip",
-    "ripple",
-    "copy-button",
-    "micro-library",
-    "modular",
-    "ui",
-    "javascript",
-    "react",
-    "kitzo"
-  ],
-  "author": "Riyad",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/riyad-96/kitzo"
-  },
-  "homepage": "https://github.com/riyad-96/kitzo#readme",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@babel/core": "^7.28.4",
-    "@babel/preset-react": "^7.27.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@vitejs/plugin-react": "^5.0.4",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "rollup": "^4.46.2",
-    "vite": "^7.0.4"
-  },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
-  }
-}
+{
+  "name": "kitzo",
+  "version": "2.0.26",
+  "description": "A lightweight JavaScript UI micro-library.",
+  "type": "module",
+  "main": "./dist/kitzo.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/kitzo.esm.js",
+      "require": "./dist/kitzo.umd.js",
+      "types": "./dist/kitzo.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react.esm.js",
+      "types": "./dist/react.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup -c",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "tooltip",
+    "ripple",
+    "copy-button",
+    "micro-library",
+    "modular",
+    "ui",
+    "javascript",
+    "react",
+    "kitzo"
+  ],
+  "author": "Riyad",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/riyad-96/kitzo"
+  },
+  "homepage": "https://github.com/riyad-96/kitzo#readme",
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/preset-react": "^7.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@vitejs/plugin-react": "^5.0.4",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "rollup": "^4.46.2",
+    "vite": "^7.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  }
+}