kitzo 2.1.28 → 2.1.30

package/README.md

@@ -2,20 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/kitzo)](https://www.npmjs.com/package/kitzo)
 
-### A lightweight library of Vanilla js and React js
-
-##### [Vanilla js](#quick-usage-overview-vanilla-js)
-
-- Copy on click
-- Tooltip on mouseover
-- Ripple effect on mousedown
-- Debounce function
-- Hover clip-path effect
-
-##### [React js](#react)
-
-- React Toast notifications
-- Tooltip wrapper component
+### A lightweight React micro-utility.
 
 #### Install
 
@@ -23,134 +10,24 @@
 npm i kitzo
 ```
 
-or
-
-```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.1.28/dist/kitzo.umd.min.js"></script>
-```
-
-> Vanilla: Attach this script tag in the html head tag and you are good to go.
-
----
-
-#### API links
-
-- **Vanilla**: [copy](#copy-api), [Tooltip](#tooltip-api), [Ripple](#ripple-api), [Debounce](#debounce-api), [Clippath](#clippath-api), [Get type](#typecheck-api)
-- **React**: [Toast](#react-toast-api-usage), [Tooltip](#react-tooltip-api)
-
-#### Vanilla APIs
-
-```javascript
-// NPM usage
-import kitzo from 'kitzo';
-
-kitzo.copy();
-kitzo.tooltip();
-kitzo.ripple();
-kitzo.debounce();
-kitzo.clippath();
-kitzo.getType();
-```
-
-> Use a modern build tool. **vite** - recommended
-
-##### Copy API:
-
-```javascript
-kitzo.copy(doc);
-```
-
-> Copy functionality on call.
-
-##### Tooltip API:
-
-```javascript
-kitzo.tooltip(selectors | element | NodeList, {
-  tooltip: string,
-  direction: 'top' | 'right' | 'bottom' | 'left',
-  arrow: 'on' | 'off',
-  offset: number,
-  customClass: string,
-  style: object,
-});
-```
-
-> Attach minimal tooltips to buttons for clean, helpful hover hints.
-
-##### Ripple API:
-
-```javascript
-kitzo.ripple(selectors | element | NodeList, {
-  opacity: number,
-  duration: number,
-  color: string,
-  size: number,
-});
-```
-
-> Adds a lightweight, clean ripple effect to your elements on click.
-
-##### 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);
-});
-```
-
-> Debounce on every call of function.
-
-##### Clippath API:
-
-```javascript
-kitzo.clippath(selectors | element | NodeList, {
-  textOption: null | { selector: string, value: string | number },
-  clippathSize: string | number,
-  smooth: boolean,
-  class: string,
-  style: object,
-});
-```
-
-##### TypeCheck API:
-
-```javascript
-kitzo.getType(type);
+#### React APIs
 
-const data = [];
-console.log(kitzo.getType(data)); // 'array'
+```jsx
+import { ToastContainer, toast, Tooltip, useDebounce, useWindowSize } from 'kitzo';
 ```
 
----
-
-## React
-
-#### Install
+> You can import only what you need.
 
-```bash
-npm i kitzo
-```
+#### UI
 
-#### React APIs
-
-```jsx
-import { ToastContainer, toast, Tooltip, ... } from 'kitzo/react';
-```
+- Toast message
+- Tooltip
 
 ##### Toast API:
 
 ```jsx
-import { toast } from 'kitzo/react';
+import { toast } from 'kitzo';
+import MyCustomComponent from './MyCustomComponent';
 
 toast.success('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });
 toast.error('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });
@@ -183,7 +60,7 @@ toast.custom("string");
 ##### React Toast API Usage
 
 ```jsx
-import { ToastContainer, toast } from 'kitzo/react';
+import { ToastContainer, toast } from 'kitzo';
 
 function App() {
   function fakePromise() {
@@ -228,7 +105,7 @@ function App() {
       <button onClick={promiseToast}>Promise</button>
       <button onClick={customToast}>Custom Toast</button>
 
-      {/* Toast container must needed */}
+      {/* Toast container must be placed */}
       <ToastContainer />
     </div>
   );
@@ -237,10 +114,10 @@ function App() {
 
 > Each toast can have its own position. default position is `top-center`.
 
-##### React Tooltip API:
+##### React Tooltip API usage:
 
 ```jsx
-import { Tooltip } from 'kitzo/react';
+import { Tooltip } from 'kitzo';
 
 function App() {
   return (
@@ -261,7 +138,7 @@ function App() {
           }}
           style={{
             '--arrow-size': 6,
-            '--arrow-color': 'red'
+            '--arrow-color': 'red',
           }}
         >
           <button>Hover me</button>
@@ -273,3 +150,86 @@ function App() {
 ```
 
 > You can provide your own custom jsx element as `content`. e.g. `content={<div>Custom tooltip</div>}`
+
+---
+
+### Hooks
+
+- useDebounce
+- useWindowSize
+
+#### useDebounce usage:
+
+```jsx
+import { useDebounce } from 'kitzo';
+
+function App() {
+  const [value, setValue] = useState('');
+  const debouncedValue = useDebounce(value, 500);
+
+  return (
+    <div>
+      <input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <p>Debounced value: {debouncedValue}</p>
+    </div>
+  );
+}
+```
+
+#### useWindowSize usage:
+
+```jsx
+import { useWindowSize } from 'kitzo';
+
+function App() {
+  const { screenWidth, screenHeight } = useWindowSize({ delay: 100 });
+
+  return (
+    <div>
+      <p>Window width: {width}</p>
+      <p>Window height: {height}</p>
+    </div>
+  );
+}
+```
+
+---
+
+### Functions
+
+- copy _(Copy text to clipboard)_
+
+#### copy usage:
+```jsx
+import { copy } from 'kitzo/fns';
+import { ToastContainer, toast } from 'kitzo';
+
+// copy(text: string): Promise<void>;
+
+function App() {
+  async function copyText(text) {
+    try {
+      await copy(text);
+      toast.success('Copied to clipboard');
+    } catch (err) {
+      console.error(err);
+      toast.error('Failed to copy to clipboard');
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={() => copyText('hello world')}>Copy text</button>
+      <ToastContainer />
+    </div>
+  );
+}
+
+// or just
+copy('hello world');
+```
+
+> Use `copy` function to copy text to clipboard.

package/dist/functions/index.js

@@ -0,0 +1,36 @@
+//! Copy function
+function legacyCopy(text) {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+}
+
+async function writeToClipboard(text) {
+  if (!navigator.clipboard?.writeText) {
+    legacyCopy(text);
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (err) {
+    legacyCopy(text);
+    console.error(err);
+  }
+}
+
+async function copy(doc) {
+  if (doc == null) throw new Error('[kitzo/copy] expected a value to copy, got null or undefined.');
+
+  const text =
+    typeof doc === 'string' || typeof doc === 'number' ? String(doc) : JSON.stringify(doc);
+
+  await writeToClipboard(text);
+}
+
+export { copy };
+//# sourceMappingURL=index.js.map

package/dist/functions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/kitzo/functions/copy.js"],"sourcesContent":["//! Copy function\r\nfunction legacyCopy(text) {\r\n  const textarea = document.createElement('textarea');\r\n  textarea.value = text;\r\n\r\n  document.body.appendChild(textarea);\r\n  textarea.select();\r\n  document.execCommand('copy');\r\n  document.body.removeChild(textarea);\r\n}\r\n\r\nasync function writeToClipboard(text) {\r\n  if (!navigator.clipboard?.writeText) {\r\n    legacyCopy(text);\r\n    return;\r\n  }\r\n\r\n  try {\r\n    await navigator.clipboard.writeText(text);\r\n  } catch (err) {\r\n    legacyCopy(text);\r\n    console.error(err);\r\n  }\r\n}\r\n\r\nexport default async function copy(doc) {\r\n  if (doc == null) throw new Error('[kitzo/copy] expected a value to copy, got null or undefined.');\r\n\r\n  const text =\r\n    typeof doc === 'string' || typeof doc === 'number' ? String(doc) : JSON.stringify(doc);\r\n\r\n  await writeToClipboard(text);\r\n}\r\n"],"names":[],"mappings":"AAAA;AACA,SAAS,UAAU,CAAC,IAAI,EAAE;AAC1B,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACtD,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;AACxB;AACA,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACtC,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC;AACpB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAC/B,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC;AACD;AACA,eAAe,gBAAgB,CAAC,IAAI,EAAE;AACtC,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,EAAE;AACvC,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;AACrB,IAAI,OAAO;AACX,EAAE,CAAC;AACH;AACA,EAAE,IAAI;AACN,IAAI,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC9C,EAAE,CAAC,CAAC,OAAO,GAAG,EAAE;AAChB,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;AACrB,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACvB,EAAE,CAAC;AACH,CAAC;AACD;AACe,eAAe,IAAI,CAAC,GAAG,EAAE;AACxC,EAAE,IAAI,GAAG,IAAI,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC,CAAC;AACpG;AACA,EAAE,MAAM,IAAI;AACZ,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;AAC3F;AACA,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC/B;;;;"}