kitzo 2.0.0 → 2.0.1

package/README.md

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

package/dist/react.esm.js

@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect, useState, useEffect } from 'react';
+import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
 
 const listeners = new Set();
 let isStyleAdded = false;
@@ -187,7 +187,7 @@ function toastStyles() {
 `;
 }
 function addToast(toast) {
-  listeners.forEach(callback => {
+  listeners.forEach((callback) => {
     callback(toast);
   });
 }
@@ -203,159 +203,222 @@ function subscribe(callback) {
 }
 function success(text = 'Toast success', options = {}) {
   const id = Date.now();
-  options = Object.assign({
-    duration: 2000,
-    id
-  }, options);
+  options = Object.assign(
+    {
+      duration: 2000,
+      id,
+    },
+    options
+  );
   addToast({
     type: 'success',
     text,
-    options
+    options,
   });
 }
 function error(text = 'Toast denied', options = {}) {
   const id = Date.now();
-  options = Object.assign({
-    duration: 2000,
-    id
-  }, options);
+  options = Object.assign(
+    {
+      duration: 2000,
+      id,
+    },
+    options
+  );
   addToast({
     type: 'error',
     text,
-    options
+    options,
   });
 }
 function promise(callback, msgs = {}, options = {}) {
   const id = Date.now();
-  options = Object.assign({
-    duration: 2000,
-    id
-  }, options);
-  msgs = Object.assign({
-    loading: 'Saving...',
-    success: 'Success',
-    error: 'Something went wrong'
-  }, msgs);
+  options = Object.assign(
+    {
+      duration: 2000,
+      id,
+    },
+    options
+  );
+  msgs = Object.assign(
+    {
+      loading: 'Saving...',
+      success: 'Success',
+      error: 'Something went wrong',
+    },
+    msgs
+  );
   addToast({
     type: 'loading',
     text: msgs.loading,
     options: {
       ...options,
       duration: Infinity,
-      id
-    }
+      id,
+    },
   });
-  callback.then(res => {
-    const successMsg = typeof msgs.success === 'function' ? msgs.success(res) : msgs.success;
-    addToast({
-      type: 'success',
-      text: successMsg,
-      options
-    });
-    return res;
-  }).catch(err => {
-    const normalizedError = err instanceof Error ? err : new Error(String(err));
-    const errorMsg = typeof msgs.error === 'function' ? msgs.error(normalizedError) : msgs.error;
-    addToast({
-      type: 'error',
-      text: errorMsg,
-      options
+  callback
+    .then((res) => {
+      const successMsg = typeof msgs.success === 'function' ? msgs.success(res) : msgs.success;
+      addToast({
+        type: 'success',
+        text: successMsg,
+        options,
+      });
+      return res;
+    })
+    .catch((err) => {
+      const normalizedError = err instanceof Error ? err : new Error(String(err));
+      const errorMsg = typeof msgs.error === 'function' ? msgs.error(normalizedError) : msgs.error;
+      addToast({
+        type: 'error',
+        text: errorMsg,
+        options,
+      });
+      return Promise.reject(normalizedError);
     });
-    return Promise.reject(normalizedError);
-  });
 }
 
 function SuccessSvg() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "svg-container success"
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M20 6 9 17l-5-5"
-  })));
+  return /*#__PURE__*/ React.createElement(
+    'div',
+    {
+      className: 'svg-container success',
+    },
+    /*#__PURE__*/ React.createElement(
+      'svg',
+      {
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      },
+      /*#__PURE__*/ React.createElement('path', {
+        d: 'M20 6 9 17l-5-5',
+      })
+    )
+  );
 }
 function ErrorSvg() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "svg-container error"
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18 6 6 18"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "m6 6 12 12"
-  })));
+  return /*#__PURE__*/ React.createElement(
+    'div',
+    {
+      className: 'svg-container error',
+    },
+    /*#__PURE__*/ React.createElement(
+      'svg',
+      {
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      },
+      /*#__PURE__*/ React.createElement('path', {
+        d: 'M18 6 6 18',
+      }),
+      /*#__PURE__*/ React.createElement('path', {
+        d: 'm6 6 12 12',
+      })
+    )
+  );
 }
 function LoadingSvg() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "promise-svg-container"
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M21 12a9 9 0 1 1-6.219-8.56"
-  })));
+  return /*#__PURE__*/ React.createElement(
+    'div',
+    {
+      className: 'promise-svg-container',
+    },
+    /*#__PURE__*/ React.createElement(
+      'svg',
+      {
+        xmlns: 'http://www.w3.org/2000/svg',
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: '2',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      },
+      /*#__PURE__*/ React.createElement('path', {
+        d: 'M21 12a9 9 0 1 1-6.219-8.56',
+      })
+    )
+  );
 }
 
 const GAP = 10;
-function Toast({
-  toast,
-  setToasts,
-  position
-}) {
+function Toast({ toast, setToasts, position }) {
   const ref = useRef(null);
   useLayoutEffect(() => {
     if (!ref.current) return;
     const h = ref.current.getBoundingClientRect().height;
-    setToasts(prev => prev.map(t => t.options.id === toast.id ? t : {
-      ...t,
-      offset: t.offset + h + GAP
-    }));
+    setToasts((prev) =>
+      prev.map((t) =>
+        t.options.id === toast.id
+          ? t
+          : {
+              ...t,
+              offset: t.offset + h + GAP,
+            }
+      )
+    );
   }, [setToasts, toast.id]);
   if (position.includes('bottom')) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(
+      'div',
+      {
+        ref: ref,
+        className: 'toast',
+        style: {
+          transform: `translateY(-${toast.offset}px)`,
+          ...getToastPosition(position),
+        },
+      },
+      /*#__PURE__*/ React.createElement(
+        'div',
+        {
+          className: `toast-content-bottom ${toast.leaving ? 'exit' : ''}`,
+        },
+        toast.type === 'loading' && /*#__PURE__*/ React.createElement(LoadingSvg, null),
+        toast.type === 'success' && /*#__PURE__*/ React.createElement(SuccessSvg, null),
+        toast.type === 'error' && /*#__PURE__*/ React.createElement(ErrorSvg, null),
+        /*#__PURE__*/ React.createElement('span', null, toast.text)
+      )
+    );
+  }
+  return /*#__PURE__*/ React.createElement(
+    'div',
+    {
       ref: ref,
-      className: "toast",
+      className: 'toast',
       style: {
-        transform: `translateY(-${toast.offset}px)`,
-        ...getToastPosition(position)
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `toast-content-bottom ${toast.leaving ? 'exit' : ''}`
-    }, toast.type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), toast.type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), toast.type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null), /*#__PURE__*/React.createElement("span", null, toast.text)));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "toast",
-    style: {
-      transform: `translateY(${toast.offset}px)`,
-      ...getToastPosition(position)
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `toast-content ${toast.leaving ? 'exit' : ''}`
-  }, toast.type === 'loading' && /*#__PURE__*/React.createElement(LoadingSvg, null), toast.type === 'success' && /*#__PURE__*/React.createElement(SuccessSvg, null), toast.type === 'error' && /*#__PURE__*/React.createElement(ErrorSvg, null), /*#__PURE__*/React.createElement("span", null, toast.text)));
+        transform: `translateY(${toast.offset}px)`,
+        ...getToastPosition(position),
+      },
+    },
+    /*#__PURE__*/ React.createElement(
+      'div',
+      {
+        className: `toast-content ${toast.leaving ? 'exit' : ''}`,
+      },
+      toast.type === 'loading' && /*#__PURE__*/ React.createElement(LoadingSvg, null),
+      toast.type === 'success' && /*#__PURE__*/ React.createElement(SuccessSvg, null),
+      toast.type === 'error' && /*#__PURE__*/ React.createElement(ErrorSvg, null),
+      /*#__PURE__*/ React.createElement('span', null, toast.text)
+    )
+  );
 }
 function getToastPosition(position) {
   const isLeft = position.includes('left');
@@ -365,7 +428,7 @@ function getToastPosition(position) {
     width: 'calc(100% - 2rem)',
     pointerEvents: 'none',
     transition: 'transform 230ms',
-    display: 'flex'
+    display: 'flex',
   };
   if (position.includes('top')) {
     styles.top = '1rem';
@@ -380,67 +443,87 @@ function getToastPosition(position) {
 
 const EXIT_ANIM_MS = 300;
 function ToastContainer(props) {
-  props = Object.assign({
-    position: 'top-center'
-  }, props);
-  const {
-    position
-  } = props;
+  props = Object.assign(
+    {
+      position: 'top-center',
+    },
+    props
+  );
+  const { position } = props;
   const [toasts, setToasts] = useState([]);
   useEffect(() => {
-    const unsub = subscribe(toast => {
+    const unsub = subscribe((toast) => {
       const duration = toast.options.duration;
       const id = toast.options.id;
-      setToasts(prev => {
-        const exists = prev.some(t => t.options.id === id);
+      setToasts((prev) => {
+        const exists = prev.some((t) => t.options.id === id);
         if (exists) {
-          return prev.map(t => t.options.id === id ? {
-            ...t,
-            ...toast
-          } : t);
+          return prev.map((t) =>
+            t.options.id === id
+              ? {
+                  ...t,
+                  ...toast,
+                }
+              : t
+          );
         }
-        return [{
-          id,
-          ...toast,
-          offset: 0,
-          leaving: false
-        }, ...prev];
+        return [
+          {
+            id,
+            ...toast,
+            offset: 0,
+            leaving: false,
+          },
+          ...prev,
+        ];
       });
       if (toast.type !== 'loading') {
         setTimeout(() => {
-          setToasts(prev => prev.map(t => t.options.id === id ? {
-            ...t,
-            leaving: true
-          } : t));
+          setToasts((prev) =>
+            prev.map((t) =>
+              t.options.id === id
+                ? {
+                    ...t,
+                    leaving: true,
+                  }
+                : t
+            )
+          );
         }, Math.max(0, duration - EXIT_ANIM_MS));
         setTimeout(() => {
-          setToasts(prev => prev.filter(t => t.options.id !== id));
+          setToasts((prev) => prev.filter((t) => t.options.id !== id));
         }, duration);
       }
     });
     return () => unsub();
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'fixed',
-      inset: 0,
-      zIndex: 100000000,
-      pointerEvents: 'none',
-      fontFamily: 'inherit',
-      padding: '1rem'
-    }
-  }, toasts.map(t => /*#__PURE__*/React.createElement(Toast, {
-    key: t.options.id,
-    toast: t,
-    setToasts: setToasts,
-    position: position
-  })));
+  return /*#__PURE__*/ React.createElement(
+    'div',
+    {
+      style: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 100000000,
+        pointerEvents: 'none',
+        fontFamily: 'inherit',
+        padding: '1rem',
+      },
+    },
+    toasts.map((t) =>
+      /*#__PURE__*/ React.createElement(Toast, {
+        key: t.options.id,
+        toast: t,
+        setToasts: setToasts,
+        position: position,
+      })
+    )
+  );
 }
 
 const toast = {
   success,
   error,
-  promise
+  promise,
 };
 
 export { ToastContainer, toast };

package/package.json

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