kitzo 1.0.0

package/README.md

@@ -0,0 +1,168 @@
+# zero-kitzo
+
+[![npm](https://img.shields.io/npm/v/kitzo)](https://www.npmjs.com/package/kitzo)
+
+### A lightweight tool
+
+Current features
+
+- Copy on click
+- Tooltip on mouseover
+- Ripple effect on mousedown
+- Debounce function
+
+#### Install
+
+```bash
+npm i kitzo
+```
+
+> or
+
+```javascript
+<script src="https://cdn.jsdelivr.net/npm/kitzo@1.0.0/dist/kitzo.umd.min.js"></script>
+```
+
+---
+
+#### Quick usage overview
+
+| [NPM](#npm-usage)                | [CDN](#cdn-usage)  |
+| -------------------------------- | ------------------ |
+| [`kitzoCopy()`](#copy-api-1)     | `kitzo.copy()`     |
+| [`kitzoTooltip()`](#tooltip-api) | `kitzo.tooltip()`  |
+| [`kitzoRipple()`](#ripple-api)   | `kitzo.ripple()`   |
+| [`kitzoDebounce()`](#debounce)   | `kitzo.debounce()` |
+
+#### NPM usage
+
+```javascript
+import { kitzoCopy, kitzoTooltip, kitzoRipple } from 'kitzo';
+```
+
+> Use a modern build tool. **vite** - recommended
+
+##### Copy API:
+
+```javascript
+kitzoCopy(selector | element, {
+  doc: string,
+  event: 'click' | 'dblclick' | 'contextmenu' | 'mouseup' | 'touchend',
+});
+```
+
+> Instantly adds click-to-copy functionality to buttons, reliably and with fallback.
+
+##### Tooltip API:
+
+```javascript
+kitzoTooltip(selectors | element | NodeList, {
+  tooltip: string,
+  direction: 'top' | 'right' | 'bottom' | 'left',
+  arrow: 'on' | 'off',
+  offset: number,
+  customClass: string,
+  style: {},
+});
+```
+
+> Attach minimal tooltips to buttons for clean, helpful hover hints.
+
+##### Ripple API:
+
+```javascript
+kitzoRipple(selectors | element | NodeList, {
+  opacity: number,
+  duration: number,
+  color: string,
+  size: number | null,
+});
+```
+
+> Adds a lightweight, clean ripple effect to your buttons on click.
+
+##### Debounce API:
+
+```javascript
+kitzoDebounce(callback, delayInMilliseconds);
+```
+
+```javascript
+// Log only after typing stops for 500ms
+const logSearch = kitzoDebounce((text) => {
+  console.log("Searching for:", text);
+}, 500);
+
+// Attach to input
+document.querySelector("#search").addEventListener("input", (e) => {
+  logSearch(e.target.value);
+});
+```
+
+> Debounce on every call of function.
+
+---
+
+#### CDN usage
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/kitzo@1.0.0/dist/kitzo.umd.min.js"></script>
+```
+
+> Attach this script tag in the html head tag and you are good to go.
+
+```javascript
+kitzo.copy();
+kitzo.tooltip();
+kitzo.ripple();
+```
+
+##### Copy API:
+
+```javascript
+kitzo.copy(selectors | element, {
+  doc: string,
+  event: 'click' | 'dblclick' | 'contextmenu' | 'mouseup' | 'touchend',
+});
+```
+
+##### Tooltip API:
+
+```javascript
+kitzo.tooltip(selectors | element | NodeList, {
+  tooltip: string,
+  direction: 'top' | 'right' | 'bottom' | 'left',
+  arrow: 'on' | 'off',
+  offset: number,
+  customClass: string,
+  style: {},
+});
+```
+
+##### Ripple API:
+
+```javascript
+kitzo.ripple(selectors | element | NodeList, {
+  opacity: number,
+  duration: number,
+  color: string,
+  size: number | null,
+});
+```
+
+##### Debounce API:
+
+```javascript
+kitzo.debounce(callback, delayInMilliseconds);
+```
+```javascript
+// Log only after typing stops for 500ms
+const logSearch = kitzo.debounce((text) => {
+  console.log("Searching for:", text);
+}, 500);
+
+// Attach to input
+document.querySelector("#search").addEventListener("input", (e) => {
+  logSearch(e.target.value);
+});
+```

package/dist/kitzo.esm.js

@@ -0,0 +1,454 @@
+//! Helper functions
+function getButtons(element) {
+  if (typeof element === 'string') {
+    return document.querySelectorAll(element);
+  }
+  if (element instanceof Element) {
+    return [element];
+  }
+  if (element instanceof NodeList || element instanceof HTMLCollection) {
+    return element;
+  }
+}
+
+// Add style tags
+let tooltipStyleAdded = false;
+let rippleStyleAdded = false;
+
+function addStyleTag(styles) {
+  const style = document.createElement('style');
+  style.innerHTML = styles;
+  document.head.appendChild(style);
+}
+
+function addStyleTagToHtmlHead(type, styles) {
+  if (type === 'tooltip' && !tooltipStyleAdded) {
+    addStyleTag(styles);
+    tooltipStyleAdded = true;
+  }
+  if (type === 'ripple' && !rippleStyleAdded) {
+    addStyleTag(styles);
+    rippleStyleAdded = true;
+  }
+}
+
+//! Copy function
+function legecyCopy(docs) {
+  try {
+    const textarea = document.createElement('textarea');
+    textarea.value = docs;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+  } catch (error) {
+    alert('Couldn’t copy automatically. Please copy manually.');
+    console.error(error);
+  }
+}
+
+async function copyText(docs) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    try {
+      await navigator.clipboard.writeText(docs);
+    } catch (error) {
+      legecyCopy(docs);
+      console.error(error);
+    }
+  } else {
+    legecyCopy(docs);
+  }
+}
+
+const copyConfigMap = new WeakMap();
+const allowedEvents = ['click', 'dblclick', 'contextmenu', 'mouseup', 'touchend'];
+const attachedEvents = new Set();
+
+function copy(element, config = {}) {
+  config = Object.assign(
+    {
+      doc: '',
+      event: 'click',
+    },
+    config
+  );
+
+  const { doc, event } = config;
+
+  if (!element) {
+    console.error('A button element/selector is expected');
+    return;
+  }
+
+  if (!doc) {
+    console.error('doc cannot be empty');
+    return;
+  }
+
+  if (typeof doc !== 'string') {
+    console.error('Doc should be in string format');
+    return;
+  }
+
+  if (typeof event !== 'string') {
+    console.error('Only strings are allowed as events');
+    return;
+  }
+
+  if (!event.trim()) {
+    console.error('event cannot be empty');
+    return;
+  }
+
+  const allButtons = getButtons(element);
+  if (!allButtons) {
+    console.error('No elements found for zeroCopy');
+    return;
+  }
+
+  if (!allowedEvents.includes(event)) {
+    console.warn(`[zeroCopy] "${event}" is not allowed. Defaulting to "click".`);
+  }
+
+  const safeEvent = allowedEvents.includes(event) ? event : 'click';
+
+  allButtons.forEach((btn) => {
+    btn.setAttribute('data-zero-copy', 'true');
+
+    copyConfigMap.set(btn, {
+      doc,
+      event: safeEvent,
+    });
+  });
+
+  if (!attachedEvents.has(safeEvent)) {
+    document.addEventListener(safeEvent, (e) => {
+      const btn = e.target.closest('[data-zero-copy]');
+      if (!btn) return;
+
+      const { doc, event } = copyConfigMap.get(btn);
+      if (event && event === safeEvent) {
+        copyText(doc);
+      }
+    });
+    attachedEvents.add(safeEvent);
+  }
+}
+
+function debounce(fn, delay = 300) {
+  let timer;
+
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delay);
+  };
+}
+
+function rippleStyles() {
+  return `.zero-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.zero-ripples {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  background-color: var(--ripples-color);
+  z-index: 5;
+  border-radius: 50%;
+  opacity: 1;
+  pointer-events: none;
+}
+
+.zero-ripples.expand {
+  animation: expand-ripple var(--ripples-duration) linear forwards;
+}
+
+@keyframes expand-ripple {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: var(--ripples-opacity);
+  }
+  100% {
+    width: var(--ripples-size);
+    height: var(--ripples-size);
+    opacity: 0;
+  }
+}`;
+}
+
+//! Ripple effect
+let rippleListenerAdded = false;
+
+function ripple(element, config = {}) {
+  if (!element) {
+    console.error('A button element/selector is expected');
+    return;
+  }
+
+  addStyleTagToHtmlHead('ripple', rippleStyles());
+
+  config = Object.assign(
+    {
+      opacity: 0.5,
+      duration: 1,
+      color: 'white',
+      size: null,
+    },
+    config
+  );
+
+  const { opacity, color, duration, size } = config;
+
+  const allButtons = getButtons(element);
+  if (!allButtons) {
+    console.error('No elements found for zeroRipple');
+    return;
+  }
+  allButtons.forEach((btn) => {
+    btn.classList.add('zero-ripple');
+    btn.setAttribute('data-zero-ripple', 'true');
+  });
+
+  if (!rippleListenerAdded) {
+    document.addEventListener('mousedown', (e) => {
+      const btn = e.target.closest('[data-zero-ripple]');
+      if (btn) {
+        const span = document.createElement('span');
+        span.className = 'zero-ripples';
+        btn.appendChild(span);
+
+        const { left, top, width } = btn.getBoundingClientRect();
+        span.style.left = e.clientX - left + 'px';
+        span.style.top = e.clientY - top + 'px';
+
+        btn.style.setProperty('--ripples-opacity', opacity);
+        btn.style.setProperty('--ripples-duration', duration + 's');
+        btn.style.setProperty('--ripples-size', `${size || width * 2}px`);
+        btn.style.setProperty('--ripples-color', color);
+
+        span.classList.add('expand');
+
+        span.addEventListener('animationend', () => span.remove());
+      }
+    });
+
+    rippleListenerAdded = true;
+  }
+}
+
+function tooltipStyles() {
+  return `:root {
+  --tooltip-bg-clr: hsl(0, 0%, 10%);
+  --tooltip-text-clr: hsl(0, 0%, 90%);
+  }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --tooltip-bg-clr: hsl(0, 0%, 95%);
+    --tooltip-text-clr: hsl(0, 0%, 10%);
+  }
+}
+
+.zero-tooltip {
+  --tooltip-arrow-clr: var(--tooltip-bg-clr);
+
+  box-sizing: border-box;
+  font-family: inherit;
+  text-align: center;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+
+  background-color: var(--tooltip-bg-clr);
+  color: var(--tooltip-text-clr);
+  padding-block: 0.325rem;
+  padding-inline: 0.625rem;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px hsla(235, 0%, 0%, 0.25);
+
+  opacity: 0 !important;
+
+  transition: opacity 200ms;
+  transition-delay: 100ms;
+  pointer-events: none;
+}
+
+.zero-tooltip.show {
+  opacity: 1 !important;
+}
+
+.zero-tooltip-top::before,
+.zero-tooltip-right::before,
+.zero-tooltip-bottom::before,
+.zero-tooltip-left::before {
+
+  content: '';
+  position: absolute;
+  border: 6px solid;
+}
+
+.zero-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 {
+  top: 50%;
+  right: calc(100% - 1px);
+  translate: 0 -50%;
+  border-color: transparent var(--tooltip-arrow-clr) transparent transparent;
+}
+
+.zero-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 {
+  left: calc(100% - 1px);
+  top: 50%;
+  translate: 0 -50%;
+  border-color: transparent transparent transparent var(--tooltip-arrow-clr);
+}`;
+}
+
+//! Tooltip
+let tooltipDiv;
+let tooltipListenerAdded = false;
+const tooltipConfigMap = new WeakMap();
+
+function tooltip(element, config = {}) {
+  if (window.matchMedia('(pointer: coarse)').matches) return;
+
+  if (!element) {
+    console.error('A button element/selector is expected');
+    return;
+  }
+
+  addStyleTagToHtmlHead('tooltip', tooltipStyles());
+
+  config = Object.assign(
+    {
+      tooltip: 'Tool tip',
+      direction: 'bottom',
+      arrow: 'off',
+      offset: 10,
+      customClass: '',
+      style: {},
+    },
+    config
+  );
+
+  const allButtons = getButtons(element);
+  if (!allButtons) {
+    console.error('No elements found for zeroTooltip');
+    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.`);
+      delete config.style[key];
+    }
+  }
+
+  allButtons.forEach((btn) => {
+    btn.setAttribute('data-zero-tooltip', true);
+    tooltipConfigMap.set(btn, config);
+  });
+
+  if (!tooltipDiv) {
+    tooltipDiv = document.createElement('div');
+    tooltipDiv.style.opacity = '0';
+    document.body.appendChild(tooltipDiv);
+  }
+
+  function getPosition(btn, dir, offset) {
+    const { width, height, top, left } = btn.getBoundingClientRect();
+    let posX;
+    let posY;
+
+    if (dir === 'top') {
+      posX = left + width / 2 - tooltipDiv.offsetWidth / 2;
+      posY = top - tooltipDiv.offsetHeight - offset;
+      return { posX, posY };
+    }
+
+    if (dir === 'right') {
+      posX = left + width + offset;
+      posY = top + height / 2 - tooltipDiv.offsetHeight / 2;
+      return { posX, posY };
+    }
+
+    if (dir === 'bottom') {
+      posX = left + width / 2 - tooltipDiv.offsetWidth / 2;
+      posY = top + height + offset;
+      return { posX, posY };
+    }
+
+    if (dir === 'left') {
+      posX = left - tooltipDiv.offsetWidth - offset;
+      posY = top + height / 2 - tooltipDiv.offsetHeight / 2;
+      return { posX, posY };
+    }
+  }
+
+  if (!tooltipListenerAdded) {
+    document.addEventListener('mouseover', (e) => {
+      const btn = e.target.closest('[data-zero-tooltip]');
+      if (btn) {
+        const { tooltip, direction, offset, customClass, style, arrow } = tooltipConfigMap.get(btn);
+
+        tooltipDiv.removeAttribute('style');
+        Object.assign(tooltipDiv.style, {
+          position: 'fixed',
+          top: '0px',
+          left: '0px',
+          zIndex: '999999',
+          ...style,
+        });
+
+        const isArrowOn = arrow === 'on';
+        tooltipDiv.textContent = tooltip;
+        tooltipDiv.className = `zero-tooltip ${isArrowOn ? `zero-tooltip-${direction}` : ''} ${customClass.trim() ? customClass : ''}`;
+
+        if (isArrowOn) {
+          const color = getComputedStyle(tooltipDiv).backgroundColor;
+          tooltipDiv.style.setProperty('--tooltip-arrow-clr', color);
+        }
+
+        const { posX, posY } = getPosition(btn, direction, offset);
+        tooltipDiv.style.transform = `translate(${posX}px, ${posY}px)`;
+
+        requestAnimationFrame(() => {
+          tooltipDiv.classList.add('show');
+        });
+      }
+    });
+
+    document.addEventListener('mouseout', (e) => {
+      const btn = e.target.closest('[data-zero-tooltip]');
+      if (btn) {
+        tooltipDiv.classList.remove('show');
+      }
+    });
+
+    tooltipListenerAdded = true;
+  }
+}
+
+export { copy, debounce, ripple, tooltip };

package/dist/kitzo.umd.js

@@ -0,0 +1,465 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.kitzo = {}));
+})(this, (function (exports) { 'use strict';
+
+  //! Helper functions
+  function getButtons(element) {
+    if (typeof element === 'string') {
+      return document.querySelectorAll(element);
+    }
+    if (element instanceof Element) {
+      return [element];
+    }
+    if (element instanceof NodeList || element instanceof HTMLCollection) {
+      return element;
+    }
+  }
+
+  // Add style tags
+  let tooltipStyleAdded = false;
+  let rippleStyleAdded = false;
+
+  function addStyleTag(styles) {
+    const style = document.createElement('style');
+    style.innerHTML = styles;
+    document.head.appendChild(style);
+  }
+
+  function addStyleTagToHtmlHead(type, styles) {
+    if (type === 'tooltip' && !tooltipStyleAdded) {
+      addStyleTag(styles);
+      tooltipStyleAdded = true;
+    }
+    if (type === 'ripple' && !rippleStyleAdded) {
+      addStyleTag(styles);
+      rippleStyleAdded = true;
+    }
+  }
+
+  //! Copy function
+  function legecyCopy(docs) {
+    try {
+      const textarea = document.createElement('textarea');
+      textarea.value = docs;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+    } catch (error) {
+      alert('Couldn’t copy automatically. Please copy manually.');
+      console.error(error);
+    }
+  }
+
+  async function copyText(docs) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      try {
+        await navigator.clipboard.writeText(docs);
+      } catch (error) {
+        legecyCopy(docs);
+        console.error(error);
+      }
+    } else {
+      legecyCopy(docs);
+    }
+  }
+
+  const copyConfigMap = new WeakMap();
+  const allowedEvents = ['click', 'dblclick', 'contextmenu', 'mouseup', 'touchend'];
+  const attachedEvents = new Set();
+
+  function copy(element, config = {}) {
+    config = Object.assign(
+      {
+        doc: '',
+        event: 'click',
+      },
+      config
+    );
+
+    const { doc, event } = config;
+
+    if (!element) {
+      console.error('A button element/selector is expected');
+      return;
+    }
+
+    if (!doc) {
+      console.error('doc cannot be empty');
+      return;
+    }
+
+    if (typeof doc !== 'string') {
+      console.error('Doc should be in string format');
+      return;
+    }
+
+    if (typeof event !== 'string') {
+      console.error('Only strings are allowed as events');
+      return;
+    }
+
+    if (!event.trim()) {
+      console.error('event cannot be empty');
+      return;
+    }
+
+    const allButtons = getButtons(element);
+    if (!allButtons) {
+      console.error('No elements found for zeroCopy');
+      return;
+    }
+
+    if (!allowedEvents.includes(event)) {
+      console.warn(`[zeroCopy] "${event}" is not allowed. Defaulting to "click".`);
+    }
+
+    const safeEvent = allowedEvents.includes(event) ? event : 'click';
+
+    allButtons.forEach((btn) => {
+      btn.setAttribute('data-zero-copy', 'true');
+
+      copyConfigMap.set(btn, {
+        doc,
+        event: safeEvent,
+      });
+    });
+
+    if (!attachedEvents.has(safeEvent)) {
+      document.addEventListener(safeEvent, (e) => {
+        const btn = e.target.closest('[data-zero-copy]');
+        if (!btn) return;
+
+        const { doc, event } = copyConfigMap.get(btn);
+        if (event && event === safeEvent) {
+          copyText(doc);
+        }
+      });
+      attachedEvents.add(safeEvent);
+    }
+  }
+
+  function debounce(fn, delay = 300) {
+    let timer;
+
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => fn(...args), delay);
+    };
+  }
+
+  function rippleStyles() {
+    return `.zero-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.zero-ripples {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  width: 0;
+  height: 0;
+  background-color: var(--ripples-color);
+  z-index: 5;
+  border-radius: 50%;
+  opacity: 1;
+  pointer-events: none;
+}
+
+.zero-ripples.expand {
+  animation: expand-ripple var(--ripples-duration) linear forwards;
+}
+
+@keyframes expand-ripple {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: var(--ripples-opacity);
+  }
+  100% {
+    width: var(--ripples-size);
+    height: var(--ripples-size);
+    opacity: 0;
+  }
+}`;
+  }
+
+  //! Ripple effect
+  let rippleListenerAdded = false;
+
+  function ripple(element, config = {}) {
+    if (!element) {
+      console.error('A button element/selector is expected');
+      return;
+    }
+
+    addStyleTagToHtmlHead('ripple', rippleStyles());
+
+    config = Object.assign(
+      {
+        opacity: 0.5,
+        duration: 1,
+        color: 'white',
+        size: null,
+      },
+      config
+    );
+
+    const { opacity, color, duration, size } = config;
+
+    const allButtons = getButtons(element);
+    if (!allButtons) {
+      console.error('No elements found for zeroRipple');
+      return;
+    }
+    allButtons.forEach((btn) => {
+      btn.classList.add('zero-ripple');
+      btn.setAttribute('data-zero-ripple', 'true');
+    });
+
+    if (!rippleListenerAdded) {
+      document.addEventListener('mousedown', (e) => {
+        const btn = e.target.closest('[data-zero-ripple]');
+        if (btn) {
+          const span = document.createElement('span');
+          span.className = 'zero-ripples';
+          btn.appendChild(span);
+
+          const { left, top, width } = btn.getBoundingClientRect();
+          span.style.left = e.clientX - left + 'px';
+          span.style.top = e.clientY - top + 'px';
+
+          btn.style.setProperty('--ripples-opacity', opacity);
+          btn.style.setProperty('--ripples-duration', duration + 's');
+          btn.style.setProperty('--ripples-size', `${size || width * 2}px`);
+          btn.style.setProperty('--ripples-color', color);
+
+          span.classList.add('expand');
+
+          span.addEventListener('animationend', () => span.remove());
+        }
+      });
+
+      rippleListenerAdded = true;
+    }
+  }
+
+  function tooltipStyles() {
+    return `:root {
+  --tooltip-bg-clr: hsl(0, 0%, 10%);
+  --tooltip-text-clr: hsl(0, 0%, 90%);
+  }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --tooltip-bg-clr: hsl(0, 0%, 95%);
+    --tooltip-text-clr: hsl(0, 0%, 10%);
+  }
+}
+
+.zero-tooltip {
+  --tooltip-arrow-clr: var(--tooltip-bg-clr);
+
+  box-sizing: border-box;
+  font-family: inherit;
+  text-align: center;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+
+  background-color: var(--tooltip-bg-clr);
+  color: var(--tooltip-text-clr);
+  padding-block: 0.325rem;
+  padding-inline: 0.625rem;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px hsla(235, 0%, 0%, 0.25);
+
+  opacity: 0 !important;
+
+  transition: opacity 200ms;
+  transition-delay: 100ms;
+  pointer-events: none;
+}
+
+.zero-tooltip.show {
+  opacity: 1 !important;
+}
+
+.zero-tooltip-top::before,
+.zero-tooltip-right::before,
+.zero-tooltip-bottom::before,
+.zero-tooltip-left::before {
+
+  content: '';
+  position: absolute;
+  border: 6px solid;
+}
+
+.zero-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 {
+  top: 50%;
+  right: calc(100% - 1px);
+  translate: 0 -50%;
+  border-color: transparent var(--tooltip-arrow-clr) transparent transparent;
+}
+
+.zero-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 {
+  left: calc(100% - 1px);
+  top: 50%;
+  translate: 0 -50%;
+  border-color: transparent transparent transparent var(--tooltip-arrow-clr);
+}`;
+  }
+
+  //! Tooltip
+  let tooltipDiv;
+  let tooltipListenerAdded = false;
+  const tooltipConfigMap = new WeakMap();
+
+  function tooltip(element, config = {}) {
+    if (window.matchMedia('(pointer: coarse)').matches) return;
+
+    if (!element) {
+      console.error('A button element/selector is expected');
+      return;
+    }
+
+    addStyleTagToHtmlHead('tooltip', tooltipStyles());
+
+    config = Object.assign(
+      {
+        tooltip: 'Tool tip',
+        direction: 'bottom',
+        arrow: 'off',
+        offset: 10,
+        customClass: '',
+        style: {},
+      },
+      config
+    );
+
+    const allButtons = getButtons(element);
+    if (!allButtons) {
+      console.error('No elements found for zeroTooltip');
+      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.`);
+        delete config.style[key];
+      }
+    }
+
+    allButtons.forEach((btn) => {
+      btn.setAttribute('data-zero-tooltip', true);
+      tooltipConfigMap.set(btn, config);
+    });
+
+    if (!tooltipDiv) {
+      tooltipDiv = document.createElement('div');
+      tooltipDiv.style.opacity = '0';
+      document.body.appendChild(tooltipDiv);
+    }
+
+    function getPosition(btn, dir, offset) {
+      const { width, height, top, left } = btn.getBoundingClientRect();
+      let posX;
+      let posY;
+
+      if (dir === 'top') {
+        posX = left + width / 2 - tooltipDiv.offsetWidth / 2;
+        posY = top - tooltipDiv.offsetHeight - offset;
+        return { posX, posY };
+      }
+
+      if (dir === 'right') {
+        posX = left + width + offset;
+        posY = top + height / 2 - tooltipDiv.offsetHeight / 2;
+        return { posX, posY };
+      }
+
+      if (dir === 'bottom') {
+        posX = left + width / 2 - tooltipDiv.offsetWidth / 2;
+        posY = top + height + offset;
+        return { posX, posY };
+      }
+
+      if (dir === 'left') {
+        posX = left - tooltipDiv.offsetWidth - offset;
+        posY = top + height / 2 - tooltipDiv.offsetHeight / 2;
+        return { posX, posY };
+      }
+    }
+
+    if (!tooltipListenerAdded) {
+      document.addEventListener('mouseover', (e) => {
+        const btn = e.target.closest('[data-zero-tooltip]');
+        if (btn) {
+          const { tooltip, direction, offset, customClass, style, arrow } = tooltipConfigMap.get(btn);
+
+          tooltipDiv.removeAttribute('style');
+          Object.assign(tooltipDiv.style, {
+            position: 'fixed',
+            top: '0px',
+            left: '0px',
+            zIndex: '999999',
+            ...style,
+          });
+
+          const isArrowOn = arrow === 'on';
+          tooltipDiv.textContent = tooltip;
+          tooltipDiv.className = `zero-tooltip ${isArrowOn ? `zero-tooltip-${direction}` : ''} ${customClass.trim() ? customClass : ''}`;
+
+          if (isArrowOn) {
+            const color = getComputedStyle(tooltipDiv).backgroundColor;
+            tooltipDiv.style.setProperty('--tooltip-arrow-clr', color);
+          }
+
+          const { posX, posY } = getPosition(btn, direction, offset);
+          tooltipDiv.style.transform = `translate(${posX}px, ${posY}px)`;
+
+          requestAnimationFrame(() => {
+            tooltipDiv.classList.add('show');
+          });
+        }
+      });
+
+      document.addEventListener('mouseout', (e) => {
+        const btn = e.target.closest('[data-zero-tooltip]');
+        if (btn) {
+          tooltipDiv.classList.remove('show');
+        }
+      });
+
+      tooltipListenerAdded = true;
+    }
+  }
+
+  exports.kitzoCopy = copy;
+  exports.kitzoDebounce = debounce;
+  exports.kitzoRipple = ripple;
+  exports.kitzoTooltip = tooltip;
+
+}));

package/dist/zero-kitzo.d.ts

@@ -0,0 +1,80 @@
+export function kitzoTooltip(
+  element: string | Element | NodeListOf<Element> | HTMLCollection,
+  config?: {
+    /**
+     * The tooltip text to display (default: "Tool tip")
+     */
+    tooltip?: string;
+
+    /**
+     * Direction where tooltip appears: 'top', 'right', 'bottom', or 'left' (default: 'bottom')
+     */
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+
+    /**
+     * Show an arrow pointing to the target ('on' or 'off', default: 'off')
+     */
+    arrow?: 'on' | 'off';
+
+    /**
+     * Distance in pixels between the tooltip and the target element (default: 10)
+     */
+    offset?: number;
+
+    /**
+     * Optional custom class to add to the tooltip (for styling)
+     */
+    customClass?: string;
+
+    /**
+     * Inline styles to apply (excluding top, left, right, bottom, position, zIndex, opacity, transform, translate, scale, rotate, perspective)
+     */
+    style?: Partial<CSSStyleDeclaration>;
+  }
+): void;
+
+export function kitzoRipple(
+  element: string | Element | NodeListOf<Element> | HTMLCollection,
+  config?: {
+    /**
+     * Ripple opacity (0 to 1). Default: 0.5
+     */
+    opacity?: number;
+    /**
+     * Animation duration in seconds ('s'). Default: 1
+     */
+    duration?: number;
+    /**
+     * Ripple color (CSS color). Default: 'white'
+     */
+    color?: string;
+    /**
+     * Ripple size in pixels ('px'). If null, auto-scales based on button size. Default: null
+     */
+    size?: number | null;
+  }
+): void;
+
+export function kitzoCopy(
+  element: string | Element | NodeListOf<Element>,
+  config: {
+    /**
+     * The text to be copied to the clipboard.
+     * Must be a non-empty string.
+     */
+    doc?: string;
+
+    /**
+     * The DOM event that triggers the copy action.
+     * Only the following events are allowed:
+     * - 'click' (default)
+     * - 'dblclick'
+     * - 'contextmenu'
+     * - 'mouseup'
+     * - 'touchend'
+     */
+    event?: 'click' | 'dblclick' | 'contextmenu' | 'mouseup' | 'touchend';
+  }
+): void;
+
+export function debounce<Args extends any[]>(fn: (...args: Args) => any, delay?: number): (...args: Args) => void;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "kitzo",
+  "version": "1.0.0",
+  "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"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup -c",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "tooltip",
+    "ripple",
+    "copy-button",
+    "micro-library",
+    "modular",
+    "ui",
+    "javascript",
+    "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": "^4.46.2",
+    "vite": "^7.0.4"
+  }
+}