kitzo 2.0.26 → 2.0.28

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.26/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.28/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.
@@ -41,6 +41,7 @@ or
 | [`kitzo.ripple()`](#ripple-api)     |
 | [`kitzo.debounce()`](#debounce-api) |
 | [`kitzo.clippath()`](#clippath-api) |
+| [`kitzo.getType()`](#typecheck-api) |
 
 #### Vanilla APIs
 
@@ -53,6 +54,7 @@ kitzo.tooltip();
 kitzo.ripple();
 kitzo.debounce();
 kitzo.clippath();
+kitzo.getType();
 ```
 
 > Use a modern build tool. **vite** - recommended
@@ -125,6 +127,15 @@ kitzo.clippath(selectors | element | NodeList, {
 });
 ```
 
+##### TypeCheck API:
+
+```javascript
+kitzo.getType(type);
+
+const data = [];
+console.log(kitzo.getType(data)); // 'array'
+```
+
 ---
 
 ## React
@@ -146,17 +157,32 @@ import { ToastContainer, toast, ... } from 'kitzo/react';
 ```jsx
 import { toast } from 'kitzo/react';
 
-toast.success('toast message', {});
-toast.error('toast message', {});
+toast.success('toast message', { duration: 2000, style: {}, showIcon: true });
+toast.error('toast message', { duration: 2000, style: {}, showIcon: true });
+
 toast.promise(
-  promise(),
+  promise(), // call a function that returns promise
   {
     loading: 'Saving...',
-    success: 'Saved',
-    error: 'Error occured',
+    success: 'Saved' | (response) => 'Saved',
+    error: 'Error occured' | (error) => 'Error occured',
   },
-  { duration: 2000 }
+  { duration: 2000, style: {}, showIcon: true },
 );
+
+// JSX element
+toast.custom(<MyCustomComponent />, { duration: 2000 });
+
+// Function that receives a dismiss handler
+toast.custom((dismiss) => (
+  <div>
+    <span>Custom toast message</span>
+    <button onClick={dismiss}>Close</button>
+  </div>
+), { duration: 3000 | Infinity });
+
+// (and optionally)
+toast.custom("string");
 ```
 
 ##### Toast API Usage
@@ -169,29 +195,42 @@ function App() {
     return new Promise((resolved, rejected) => {
       setTimeout(() => {
         Math.random() > 0.5 ? resolved('resolved') : rejected('rejected');
-      }, 2000)
-    })
+      }, 2000);
+    });
+  }
+
+  function promiseToast() {
+    toast.promise(
+      fakePromise(),
+      {
+        loading: 'Saving data...',
+        success: 'Data saved',
+        error: 'Failed saving data',
+      },
+      { duration: 2500 },
+    );
+  }
+
+  function customToast() {
+    toast.custom(
+      (dismiss) => (
+        <div>
+          <span>Funtion that return jsx</span>
+          <button onClick={dismiss}>Close</button>
+        </div>
+      ),
+      {
+        duration: 2000,
+      },
+    );
   }
 
   return (
     <div>
       <button onClick={() => toast.success('✅ Success toast message')}>Succes</button>
       <button onClick={() => toast.error('❌ Error toast message')}>Error</button>
-      <button
-        onClick={() => {
-          toast.promise(
-            fakePromise(),
-            {
-              loading: 'Saving data...',
-              success: 'Data saved',
-              error: 'Failed saving data',
-            },
-            { duration: 2500 }
-          );
-        }}
-      >
-        Promise
-      </button>
+      <button onClick={promiseToast}>Promise</button>
+      <button onClick={customToast}>Custom Toast</button>
 
       {/* Toast container must needed */}
       <ToastContainer position="top-center" />

package/dist/kitzo.esm.js

@@ -568,6 +568,22 @@ function clippath(element, config = {}) {
   }
 }
 
-const kitzo = { copy, debounce, ripple, tooltip, clippath };
+function getType(value) {
+  if (value === null) return 'null';
+
+  if (Array.isArray(value)) return 'array';
+
+  if (value instanceof Date) return 'date';
+
+  if (value instanceof RegExp) return 'regexp';
+
+  if (typeof value === 'object') return 'object';
+
+  return typeof value;
+}
+
+// button effects
+
+const kitzo = { copy, debounce, ripple, tooltip, clippath, getType };
 
-export { clippath, copy, debounce, kitzo as default, ripple, tooltip };
+export { clippath, copy, debounce, kitzo as default, getType, ripple, tooltip };

package/dist/kitzo.umd.js

@@ -574,7 +574,23 @@
     }
   }
 
-  const kitzo = { copy, debounce, ripple, tooltip, clippath };
+  function getType(value) {
+    if (value === null) return 'null';
+
+    if (Array.isArray(value)) return 'array';
+
+    if (value instanceof Date) return 'date';
+
+    if (value instanceof RegExp) return 'regexp';
+
+    if (typeof value === 'object') return 'object';
+
+    return typeof value;
+  }
+
+  // button effects
+
+  const kitzo = { copy, debounce, ripple, tooltip, clippath, getType };
 
   return kitzo;
 

package/dist/react.d.ts

@@ -1,9 +1,13 @@
+import React from 'react';
+
 export interface ToastOptions {
   duration?: number;
   style?: React.CSSProperties;
   showIcon?: boolean;
 }
 
+export type CustomContent = string | React.ReactNode | ((dismiss: () => void) => React.ReactNode);
+
 export interface ToastAPI {
   success(text?: string, options?: ToastOptions): void;
   error(text?: string, options?: ToastOptions): void;
@@ -14,12 +18,11 @@ export interface ToastAPI {
       success?: string | ((res: T) => string);
       error?: string | ((err: Error) => string);
     },
-    options?: ToastOptions
+    options?: ToastOptions,
   ): Promise<T>;
+  custom(content: CustomContent, options?: { duration?: number | Infinity; }): void;
 }
 
 export declare const toast: ToastAPI;
-export declare function ToastContainer(props: {
-  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-  gap?: number;
-}): JSX.Element;
+
+export declare function ToastContainer(props: { position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; gap?: number }): JSX.Element;

package/package.json

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