kitzo 1.1.6 → 2.0.0

package/README.md

@@ -2,9 +2,9 @@
 
 [![npm](https://img.shields.io/npm/v/kitzo)](https://www.npmjs.com/package/kitzo)
 
-### A lightweight tool
+### A lightweight library of Vanilla js and React js
 
-Current features
+##### [Vanilla js](#quick-usage-overview-vanilla-js)
 
 - Copy on click
 - Tooltip on mouseover
@@ -12,6 +12,10 @@ Current features
 - Debounce function
 - Hover clip-path effect
 
+##### [React js](#react)
+
+- React Toast notifications
+
 #### Install
 
 ```bash
@@ -21,17 +25,16 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@1.1.6/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.0/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.
 
 ---
 
-#### Quick usage overview
-
+#### Quick usage overview: Vanilla js
 
-| [API](#apis)                        |
+| [API](#vanilla-apis)                |
 | ----------------------------------- |
 | [`kitzo.copy()`](#copy-api)         |
 | [`kitzo.tooltip()`](#tooltip-api)   |
@@ -39,7 +42,8 @@ or
 | [`kitzo.debounce()`](#debounce-api) |
 | [`kitzo.clippath()`](#clippath-api) |
 
-#### APIs
+#### Vanilla APIs
+
 ```javascript
 // NPM usage
 import kitzo from 'kitzo';
@@ -122,3 +126,78 @@ kitzo.clippath(selectors | element | NodeList, {
   style: object,
 });
 ```
+
+---
+
+## React
+
+#### Install
+
+```bash
+npm i kitzo
+```
+
+#### React APIs
+
+```jsx
+import { ToastContainer, toast, ... } from 'kitzo/react';
+```
+
+##### Toast API:
+
+```jsx
+import { toast } from 'kitzo/react';
+
+toast.success('toast message', {});
+toast.error('toast message', {});
+toast.promise(
+  promise(),
+  {
+    loading: 'Saving...',
+    success: 'Saved',
+    error: 'Error occured',
+  },
+  { duration: 2000 }
+);
+```
+
+##### Toast API Usage
+
+```jsx
+import { ToastContainer, toast } from 'kitzo/react';
+
+function App() {
+  function fakePromise() {
+    return new Promise((resolved, rejected) => {
+      setTimeout(() => {
+        Math.random() > 0.5 ? resolved('resolved') : rejected('rejected');
+      }, 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>
+
+      {/* Toast container must needed */}
+      <ToastContainer position="top-center" />
+    </div>
+  );
+}
+```

package/dist/kitzo.esm.js

@@ -215,7 +215,6 @@ function ripple(element, config = {}) {
     btn.setAttribute('data-kitzo-ripple', true);
     rippleConfigMap.set(btn, config);
     const { position, overflow } = window.getComputedStyle(btn);
-    console.log(position, overflow);
     if (position === 'static') {
       btn.style.position = 'relative';
     }

package/dist/kitzo.umd.js

@@ -221,7 +221,6 @@
       btn.setAttribute('data-kitzo-ripple', true);
       rippleConfigMap.set(btn, config);
       const { position, overflow } = window.getComputedStyle(btn);
-      console.log(position, overflow);
       if (position === 'static') {
         btn.style.position = 'relative';
       }

package/dist/react.d.ts

@@ -0,0 +1,20 @@
+export interface ToastOptions {
+  duration?: number;
+}
+
+export interface ToastAPI {
+  success(text?: string, options?: ToastOptions): void;
+  error(text?: string, options?: ToastOptions): void;
+  promise<T>(
+    callback: Promise<T>,
+    msgs?: {
+      loading?: string;
+      success?: string | ((res: T) => string);
+      error?: string | ((err: Error) => string);
+    },
+    options?: ToastOptions
+  ): Promise<T>;
+}
+
+export declare const toast: ToastAPI;
+export declare function ToastContainer(props: { position?: string }): JSX.Element;

package/dist/react.esm.js

@@ -0,0 +1,446 @@
+import { useRef, useLayoutEffect, useState, useEffect } from 'react';
+
+const listeners = new Set();
+let isStyleAdded = false;
+function toastStyles() {
+  return `@layer base {
+  .toast-content,
+  .toast-content-bottom {
+    font-size: 0.925rem;
+  }
+}
+
+.toast-content,
+.toast-content-bottom {
+  pointer-events: all;
+  padding-inline: 0.625rem 0.825rem;
+  padding-block: 0.625rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: white;
+  border-radius: 0.5525rem;
+  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.3);
+}
+
+.toast-content {
+  animation: slide-in 230ms forwards;
+}
+.toast-content.exit {
+  animation: slide-out 110ms forwards;
+}
+
+.toast-content-bottom {
+  animation: bottom-slide-in 230ms forwards;
+}
+.toast-content-bottom.exit {
+  animation: bottom-slide-out 110ms forwards;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    translate: 0 -100%;
+    scale: 0.7;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    translate: 0 -100%;
+    scale: 0.7;
+  }
+}
+
+@keyframes bottom-slide-in {
+  from {
+    opacity: 0;
+    translate: 0 100%;
+    scale: 0.7;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+}
+
+@keyframes bottom-slide-out {
+  from {
+    opacity: 1;
+    translate: 0 0;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    translate: 0 100%;
+    scale: 0.7;
+  }
+}
+
+.svg-container {
+  display: grid;
+  place-items: center;
+  border-radius: 10rem;
+  background-color: #61d345;
+  color: white;
+  height: 20px;
+  width: 20px;
+  position: relative;
+  overflow: hidden;
+
+  scale: 1.1;
+  animation: svg-container-animation 400ms ease-in-out forwards;
+
+  svg {
+    width: 14px;
+    height: 14px;
+    stroke-width: 4px;
+    display: inline-block;
+  }
+}
+
+.svg-container.success {
+  background-color: #61d345;
+}
+.svg-container.error {
+  background-color: #ff4b4b;
+
+  svg {
+    scale: 0;
+    animation: error-svg-zoom-in 170ms 130ms forwards;
+  }
+}
+
+.svg-container.success::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  border-radius: 10rem;
+  background-color: #61d345;
+  animation: success-container-before-animation 250ms 150ms forwards;
+}
+
+@keyframes svg-container-animation {
+  0% {
+    scale: 1;
+  }
+  50% {
+    scale: 1.15;
+  }
+  100% {
+    scale: 1;
+  }
+}
+
+@keyframes success-container-before-animation {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: 100% -50%;
+  }
+}
+
+@keyframes error-svg-zoom-in {
+  from {
+    scale: 0;
+  }
+  to {
+    scale: 1;
+  }
+}
+
+.promise-svg-container {
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+  color: #474747;
+
+  svg {
+    width: 14px;
+    height: 14px;
+    stroke-width: 3px;
+    display: inline-block;
+    animation: rotate-infinity 1000ms infinite linear;
+  }
+}
+
+@keyframes rotate-infinity {
+  to {
+    rotate: 360deg;
+  }
+}
+`;
+}
+function addToast(toast) {
+  listeners.forEach(callback => {
+    callback(toast);
+  });
+}
+function subscribe(callback) {
+  if (!isStyleAdded) {
+    const styleTag = document.createElement('style');
+    styleTag.textContent = toastStyles();
+    document.head.appendChild(styleTag);
+    isStyleAdded = true;
+  }
+  listeners.add(callback);
+  return () => listeners.delete(callback);
+}
+function success(text = 'Toast success', options = {}) {
+  const id = Date.now();
+  options = Object.assign({
+    duration: 2000,
+    id
+  }, options);
+  addToast({
+    type: 'success',
+    text,
+    options
+  });
+}
+function error(text = 'Toast denied', options = {}) {
+  const id = Date.now();
+  options = Object.assign({
+    duration: 2000,
+    id
+  }, options);
+  addToast({
+    type: 'error',
+    text,
+    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);
+  addToast({
+    type: 'loading',
+    text: msgs.loading,
+    options: {
+      ...options,
+      duration: Infinity,
+      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
+    });
+    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"
+  })));
+}
+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"
+  })));
+}
+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"
+  })));
+}
+
+const GAP = 10;
+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, toast.id]);
+  if (position.includes('bottom')) {
+    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",
+    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)));
+}
+function getToastPosition(position) {
+  const isLeft = position.includes('left');
+  const isRight = position.includes('right');
+  const styles = {
+    position: 'absolute',
+    width: 'calc(100% - 2rem)',
+    pointerEvents: 'none',
+    transition: 'transform 230ms',
+    display: 'flex'
+  };
+  if (position.includes('top')) {
+    styles.top = '1rem';
+    styles.justifyContent = isLeft ? 'flex-start' : isRight ? 'flex-end' : 'center';
+  }
+  if (position.includes('bottom')) {
+    styles.bottom = '1rem';
+    styles.justifyContent = isLeft ? 'flex-start' : isRight ? 'flex-end' : 'center';
+  }
+  return styles;
+}
+
+const EXIT_ANIM_MS = 300;
+function ToastContainer(props) {
+  props = Object.assign({
+    position: 'top-center'
+  }, props);
+  const {
+    position
+  } = props;
+  const [toasts, setToasts] = useState([]);
+  useEffect(() => {
+    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);
+        if (exists) {
+          return prev.map(t => t.options.id === id ? {
+            ...t,
+            ...toast
+          } : t);
+        }
+        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));
+        }, Math.max(0, duration - EXIT_ANIM_MS));
+        setTimeout(() => {
+          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
+  })));
+}
+
+const toast = {
+  success,
+  error,
+  promise
+};
+
+export { ToastContainer, toast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "1.1.6",
+  "version": "2.0.0",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",
@@ -9,6 +9,10 @@
       "import": "./dist/kitzo.esm.js",
       "require": "./dist/kitzo.umd.js",
       "types": "./dist/kitzo.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react.esm.js",
+      "types": "./dist/react.d.ts"
     }
   },
   "files": [
@@ -27,6 +31,7 @@
     "modular",
     "ui",
     "javascript",
+    "react",
     "kitzo"
   ],
   "author": "Riyad",
@@ -37,7 +42,19 @@
   },
   "homepage": "https://github.com/riyad-96/kitzo#readme",
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-react": "^7.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@vitejs/plugin-react": "^5.0.4",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rollup": "^4.46.2",
     "vite": "^7.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
   }
 }