kitzo 1.0.3 → 1.0.5

package/README.md

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

package/dist/kitzo.d.ts

@@ -77,4 +77,4 @@ export function kitzoCopy(
   }
 ): void;
 
-export function debounce<Args extends any[]>(fn: (...args: Args) => any, delay?: number): (...args: Args) => void;
+export function kitzoDebounce<Args extends any[]>(fn: (...args: Args) => any, delay?: number): (...args: Args) => void;

package/dist/kitzo.esm.js

@@ -64,7 +64,7 @@ const copyConfigMap = new WeakMap();
 const allowedEvents = ['click', 'dblclick', 'contextmenu', 'mouseup', 'touchend'];
 const attachedEvents = new Set();
 
-function copy(element, config = {}) {
+function kitzoCopy(element, config = {}) {
   config = Object.assign(
     {
       doc: '',
@@ -102,18 +102,18 @@ function copy(element, config = {}) {
 
   const allButtons = getButtons(element);
   if (!allButtons) {
-    console.error('No elements found for zeroCopy');
+    console.error('No elements found for kitzoCopy');
     return;
   }
 
   if (!allowedEvents.includes(event)) {
-    console.warn(`[zeroCopy] "${event}" is not allowed. Defaulting to "click".`);
+    console.warn(`[kitzoCopy] "${event}" is not allowed. Defaulting to "click".`);
   }
 
   const safeEvent = allowedEvents.includes(event) ? event : 'click';
 
   allButtons.forEach((btn) => {
-    btn.setAttribute('data-zero-copy', 'true');
+    btn.setAttribute('data-kitzo-copy', 'true');
 
     copyConfigMap.set(btn, {
       doc,
@@ -123,7 +123,7 @@ function copy(element, config = {}) {
 
   if (!attachedEvents.has(safeEvent)) {
     document.addEventListener(safeEvent, (e) => {
-      const btn = e.target.closest('[data-zero-copy]');
+      const btn = e.target.closest('[data-kitzo-copy]');
       if (!btn) return;
 
       const { doc, event } = copyConfigMap.get(btn);
@@ -135,7 +135,7 @@ function copy(element, config = {}) {
   }
 }
 
-function debounce(fn, delay = 300) {
+function kitzoDebounce(fn, delay = 300) {
   let timer;
 
   return (...args) => {
@@ -145,12 +145,12 @@ function debounce(fn, delay = 300) {
 }
 
 function rippleStyles() {
-  return `.zero-ripple {
+  return `.kitzo-ripple {
   position: relative;
   overflow: hidden;
 }
 
-.zero-ripples {
+.kitzo-ripples {
   display: block;
   position: absolute;
   top: 0;
@@ -165,7 +165,7 @@ function rippleStyles() {
   pointer-events: none;
 }
 
-.zero-ripples.expand {
+.kitzo-ripples.expand {
   animation: expand-ripple var(--ripples-duration) linear forwards;
 }
 
@@ -186,7 +186,7 @@ function rippleStyles() {
 //! Ripple effect
 let rippleListenerAdded = false;
 
-function ripple(element, config = {}) {
+function kitzoRipple(element, config = {}) {
   if (!element) {
     console.error('A button element/selector is expected');
     return;
@@ -208,20 +208,20 @@ function ripple(element, config = {}) {
 
   const allButtons = getButtons(element);
   if (!allButtons) {
-    console.error('No elements found for zeroRipple');
+    console.error('No elements found for kitzoRipple');
     return;
   }
   allButtons.forEach((btn) => {
-    btn.classList.add('zero-ripple');
-    btn.setAttribute('data-zero-ripple', 'true');
+    btn.classList.add('kitzo-ripple');
+    btn.setAttribute('data-kitzo-ripple', 'true');
   });
 
   if (!rippleListenerAdded) {
     document.addEventListener('mousedown', (e) => {
-      const btn = e.target.closest('[data-zero-ripple]');
+      const btn = e.target.closest('[data-kitzo-ripple]');
       if (btn) {
         const span = document.createElement('span');
-        span.className = 'zero-ripples';
+        span.className = 'kitzo-ripples';
         btn.appendChild(span);
 
         const { left, top, width } = btn.getBoundingClientRect();
@@ -256,7 +256,7 @@ function tooltipStyles() {
   }
 }
 
-.zero-tooltip {
+.kitzo-tooltip {
   --tooltip-arrow-clr: var(--tooltip-bg-clr);
 
   box-sizing: border-box;
@@ -282,42 +282,42 @@ function tooltipStyles() {
   pointer-events: none;
 }
 
-.zero-tooltip.show {
+.kitzo-tooltip.show {
   opacity: 1 !important;
 }
 
-.zero-tooltip-top::before,
-.zero-tooltip-right::before,
-.zero-tooltip-bottom::before,
-.zero-tooltip-left::before {
+.kitzo-tooltip-top::before,
+.kitzo-tooltip-right::before,
+.kitzo-tooltip-bottom::before,
+.kitzo-tooltip-left::before {
 
   content: '';
   position: absolute;
   border: 6px solid;
 }
 
-.zero-tooltip-top::before {
+.kitzo-tooltip-top::before {
   top: calc(100% - 1px);
   left: 50%;
   translate: -50% 0;
   border-color: var(--tooltip-arrow-clr) transparent transparent transparent;
 }
 
-.zero-tooltip-right::before {
+.kitzo-tooltip-right::before {
   top: 50%;
   right: calc(100% - 1px);
   translate: 0 -50%;
   border-color: transparent var(--tooltip-arrow-clr) transparent transparent;
 }
 
-.zero-tooltip-bottom::before {
+.kitzo-tooltip-bottom::before {
   bottom: calc(100% - 1px);
   left: 50%;
   translate: -50% 0;
   border-color: transparent transparent var(--tooltip-arrow-clr) transparent;
 }
 
-.zero-tooltip-left::before {
+.kitzo-tooltip-left::before {
   left: calc(100% - 1px);
   top: 50%;
   translate: 0 -50%;
@@ -330,7 +330,7 @@ let tooltipDiv;
 let tooltipListenerAdded = false;
 const tooltipConfigMap = new WeakMap();
 
-function tooltip(element, config = {}) {
+function kitzoTooltip(element, config = {}) {
   if (window.matchMedia('(pointer: coarse)').matches) return;
 
   if (!element) {
@@ -354,20 +354,20 @@ function tooltip(element, config = {}) {
 
   const allButtons = getButtons(element);
   if (!allButtons) {
-    console.error('No elements found for zeroTooltip');
+    console.error('No elements found for kitzoTooltip');
     return;
   }
 
   const disAllowedStyles = ['top', 'left', 'right', 'bottom', 'position', 'zIndex', 'opacity', 'transform', 'translate', 'scale', 'rotate', 'perspective'];
   for (const key of disAllowedStyles) {
     if (key in config.style) {
-      console.warn(`[zeroTooltip] "${key}" style is managed internally and will be ignored.`);
+      console.warn(`[kitzoTooltip] "${key}" style is managed internally and will be ignored.`);
       delete config.style[key];
     }
   }
 
   allButtons.forEach((btn) => {
-    btn.setAttribute('data-zero-tooltip', true);
+    btn.setAttribute('data-kitzo-tooltip', true);
     tooltipConfigMap.set(btn, config);
   });
 
@@ -409,7 +409,7 @@ function tooltip(element, config = {}) {
 
   if (!tooltipListenerAdded) {
     document.addEventListener('mouseover', (e) => {
-      const btn = e.target.closest('[data-zero-tooltip]');
+      const btn = e.target.closest('[data-kitzo-tooltip]');
       if (btn) {
         const { tooltip, direction, offset, customClass, style, arrow } = tooltipConfigMap.get(btn);
 
@@ -424,7 +424,7 @@ function tooltip(element, config = {}) {
 
         const isArrowOn = arrow === 'on';
         tooltipDiv.textContent = tooltip;
-        tooltipDiv.className = `zero-tooltip ${isArrowOn ? `zero-tooltip-${direction}` : ''} ${customClass.trim() ? customClass : ''}`;
+        tooltipDiv.className = `kitzo-tooltip ${isArrowOn ? `kitzo-tooltip-${direction}` : ''} ${customClass.trim() ? customClass : ''}`;
 
         if (isArrowOn) {
           const color = getComputedStyle(tooltipDiv).backgroundColor;
@@ -441,7 +441,7 @@ function tooltip(element, config = {}) {
     });
 
     document.addEventListener('mouseout', (e) => {
-      const btn = e.target.closest('[data-zero-tooltip]');
+      const btn = e.target.closest('[data-kitzo-tooltip]');
       if (btn) {
         tooltipDiv.classList.remove('show');
       }
@@ -451,4 +451,4 @@ function tooltip(element, config = {}) {
   }
 }
 
-export { copy, debounce, ripple, tooltip };
+export { kitzoCopy, kitzoDebounce, kitzoRipple, kitzoTooltip };

package/dist/kitzo.umd.js

@@ -108,18 +108,18 @@
 
     const allButtons = getButtons(element);
     if (!allButtons) {
-      console.error('No elements found for zeroCopy');
+      console.error('No elements found for kitzoCopy');
       return;
     }
 
     if (!allowedEvents.includes(event)) {
-      console.warn(`[zeroCopy] "${event}" is not allowed. Defaulting to "click".`);
+      console.warn(`[kitzoCopy] "${event}" is not allowed. Defaulting to "click".`);
     }
 
     const safeEvent = allowedEvents.includes(event) ? event : 'click';
 
     allButtons.forEach((btn) => {
-      btn.setAttribute('data-zero-copy', 'true');
+      btn.setAttribute('data-kitzo-copy', 'true');
 
       copyConfigMap.set(btn, {
         doc,
@@ -129,7 +129,7 @@
 
     if (!attachedEvents.has(safeEvent)) {
       document.addEventListener(safeEvent, (e) => {
-        const btn = e.target.closest('[data-zero-copy]');
+        const btn = e.target.closest('[data-kitzo-copy]');
         if (!btn) return;
 
         const { doc, event } = copyConfigMap.get(btn);
@@ -151,12 +151,12 @@
   }
 
   function rippleStyles() {
-    return `.zero-ripple {
+    return `.kitzo-ripple {
   position: relative;
   overflow: hidden;
 }
 
-.zero-ripples {
+.kitzo-ripples {
   display: block;
   position: absolute;
   top: 0;
@@ -171,7 +171,7 @@
   pointer-events: none;
 }
 
-.zero-ripples.expand {
+.kitzo-ripples.expand {
   animation: expand-ripple var(--ripples-duration) linear forwards;
 }
 
@@ -214,20 +214,20 @@
 
     const allButtons = getButtons(element);
     if (!allButtons) {
-      console.error('No elements found for zeroRipple');
+      console.error('No elements found for kitzoRipple');
       return;
     }
     allButtons.forEach((btn) => {
-      btn.classList.add('zero-ripple');
-      btn.setAttribute('data-zero-ripple', 'true');
+      btn.classList.add('kitzo-ripple');
+      btn.setAttribute('data-kitzo-ripple', 'true');
     });
 
     if (!rippleListenerAdded) {
       document.addEventListener('mousedown', (e) => {
-        const btn = e.target.closest('[data-zero-ripple]');
+        const btn = e.target.closest('[data-kitzo-ripple]');
         if (btn) {
           const span = document.createElement('span');
-          span.className = 'zero-ripples';
+          span.className = 'kitzo-ripples';
           btn.appendChild(span);
 
           const { left, top, width } = btn.getBoundingClientRect();
@@ -262,7 +262,7 @@
   }
 }
 
-.zero-tooltip {
+.kitzo-tooltip {
   --tooltip-arrow-clr: var(--tooltip-bg-clr);
 
   box-sizing: border-box;
@@ -288,42 +288,42 @@
   pointer-events: none;
 }
 
-.zero-tooltip.show {
+.kitzo-tooltip.show {
   opacity: 1 !important;
 }
 
-.zero-tooltip-top::before,
-.zero-tooltip-right::before,
-.zero-tooltip-bottom::before,
-.zero-tooltip-left::before {
+.kitzo-tooltip-top::before,
+.kitzo-tooltip-right::before,
+.kitzo-tooltip-bottom::before,
+.kitzo-tooltip-left::before {
 
   content: '';
   position: absolute;
   border: 6px solid;
 }
 
-.zero-tooltip-top::before {
+.kitzo-tooltip-top::before {
   top: calc(100% - 1px);
   left: 50%;
   translate: -50% 0;
   border-color: var(--tooltip-arrow-clr) transparent transparent transparent;
 }
 
-.zero-tooltip-right::before {
+.kitzo-tooltip-right::before {
   top: 50%;
   right: calc(100% - 1px);
   translate: 0 -50%;
   border-color: transparent var(--tooltip-arrow-clr) transparent transparent;
 }
 
-.zero-tooltip-bottom::before {
+.kitzo-tooltip-bottom::before {
   bottom: calc(100% - 1px);
   left: 50%;
   translate: -50% 0;
   border-color: transparent transparent var(--tooltip-arrow-clr) transparent;
 }
 
-.zero-tooltip-left::before {
+.kitzo-tooltip-left::before {
   left: calc(100% - 1px);
   top: 50%;
   translate: 0 -50%;
@@ -360,20 +360,20 @@
 
     const allButtons = getButtons(element);
     if (!allButtons) {
-      console.error('No elements found for zeroTooltip');
+      console.error('No elements found for kitzoTooltip');
       return;
     }
 
     const disAllowedStyles = ['top', 'left', 'right', 'bottom', 'position', 'zIndex', 'opacity', 'transform', 'translate', 'scale', 'rotate', 'perspective'];
     for (const key of disAllowedStyles) {
       if (key in config.style) {
-        console.warn(`[zeroTooltip] "${key}" style is managed internally and will be ignored.`);
+        console.warn(`[kitzoTooltip] "${key}" style is managed internally and will be ignored.`);
         delete config.style[key];
       }
     }
 
     allButtons.forEach((btn) => {
-      btn.setAttribute('data-zero-tooltip', true);
+      btn.setAttribute('data-kitzo-tooltip', true);
       tooltipConfigMap.set(btn, config);
     });
 
@@ -415,7 +415,7 @@
 
     if (!tooltipListenerAdded) {
       document.addEventListener('mouseover', (e) => {
-        const btn = e.target.closest('[data-zero-tooltip]');
+        const btn = e.target.closest('[data-kitzo-tooltip]');
         if (btn) {
           const { tooltip, direction, offset, customClass, style, arrow } = tooltipConfigMap.get(btn);
 
@@ -430,7 +430,7 @@
 
           const isArrowOn = arrow === 'on';
           tooltipDiv.textContent = tooltip;
-          tooltipDiv.className = `zero-tooltip ${isArrowOn ? `zero-tooltip-${direction}` : ''} ${customClass.trim() ? customClass : ''}`;
+          tooltipDiv.className = `kitzo-tooltip ${isArrowOn ? `kitzo-tooltip-${direction}` : ''} ${customClass.trim() ? customClass : ''}`;
 
           if (isArrowOn) {
             const color = getComputedStyle(tooltipDiv).backgroundColor;
@@ -447,7 +447,7 @@
       });
 
       document.addEventListener('mouseout', (e) => {
-        const btn = e.target.closest('[data-zero-tooltip]');
+        const btn = e.target.closest('[data-kitzo-tooltip]');
         if (btn) {
           tooltipDiv.classList.remove('show');
         }
@@ -457,9 +457,9 @@
     }
   }
 
-  exports.kitzoCopy = copy;
-  exports.kitzoDebounce = debounce;
-  exports.kitzoRipple = ripple;
-  exports.kitzoTooltip = tooltip;
+  exports.copy = copy;
+  exports.debounce = debounce;
+  exports.ripple = ripple;
+  exports.tooltip = tooltip;
 
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",