kitzo 2.0.33 → 2.1.0

package/README.md

@@ -15,6 +15,7 @@
 ##### [React js](#react)
 
 - React Toast notifications
+- Tooltip wrapper component
 
 #### Install
 
@@ -25,23 +26,17 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.33/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.1.1/dist/kitzo.umd.min.js"></script>
 ```
 
-> Attach this script tag in the html head tag and you are good to go.
+> Vanilla: Attach this script tag in the html head tag and you are good to go.
 
 ---
 
-#### Quick usage overview: Vanilla js
+#### API links
 
-| [API](#vanilla-apis)                |
-| ----------------------------------- |
-| [`kitzo.copy()`](#copy-api)         |
-| [`kitzo.tooltip()`](#tooltip-api)   |
-| [`kitzo.ripple()`](#ripple-api)     |
-| [`kitzo.debounce()`](#debounce-api) |
-| [`kitzo.clippath()`](#clippath-api) |
-| [`kitzo.getType()`](#typecheck-api) |
+- **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
 
@@ -149,7 +144,7 @@ npm i kitzo
 #### React APIs
 
 ```jsx
-import { ToastContainer, toast, ... } from 'kitzo/react';
+import { ToastContainer, toast, Tooltip, ... } from 'kitzo/react';
 ```
 
 ##### Toast API:
@@ -185,8 +180,7 @@ toast.custom((dismiss) => (
 toast.custom("string");
 ```
 
-##### Toast API Usage
-
+##### React Toast API Usage
 
 ```jsx
 import { ToastContainer, toast } from 'kitzo/react';
@@ -240,4 +234,27 @@ function App() {
   );
 }
 ```
-> Each toast can have its own position, but if you specify a position on `<ToastContainer />`, that position will apply to all toasts.
+
+> Each toast can have its own position. default position is `top-center`.
+
+##### React Tooltip API:
+
+```jsx
+import { Tooltip } from 'kitzo/react';
+
+function App() {
+  return (
+    <div>
+      <h1>Tooltip api</h1>
+
+      <div>
+        <Tooltip content="Tooltip" position="top" offset="10">
+          <button>Hover me</button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
+```
+
+> what short description about this api need to written here bro?

package/dist/react.d.ts

@@ -1,15 +1,17 @@
-import React from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
+// Toast API types declaration
 export interface ToastOptions {
   position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
   duration?: number;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   showIcon?: boolean;
 }
 
-export type CustomContent = string | React.ReactNode | ((dismiss: () => void) => React.ReactNode);
+export type CustomContent = string | ReactNode | ((dismiss: () => void) => ReactNode);
 
 export interface ToastAPI {
+  (text?: string, options?: ToastOptions): void;
   success(text?: string, options?: ToastOptions): void;
   error(text?: string, options?: ToastOptions): void;
   promise<T>(
@@ -26,4 +28,13 @@ export interface ToastAPI {
 
 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 }): void;
+export declare function ToastContainer(props: { position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; gap?: number }): JSX.Element;
+
+// Tooltip API types declaration
+export interface TooltipProps {
+  content: string | ReactNode;
+  position?: 'top' | 'right' | 'bottom' | 'left';
+  offset?: number;
+}
+
+export declare function Tooltip(props: TooltipProps): JSX.Element;

package/dist/react.esm.js

@@ -185,26 +185,25 @@ function toastStyles() {
 `;
 }
 const listeners = new Set();
-let isStyleAdded = false;
+let isStyleAdded$1 = false;
 function addToast(toast) {
   listeners.forEach(callback => {
     callback(toast);
   });
 }
 function subscribe(callback) {
-  if (!isStyleAdded) {
+  if (!isStyleAdded$1) {
     const styleTag = document.createElement('style');
     styleTag.textContent = toastStyles();
     document.head.appendChild(styleTag);
-    isStyleAdded = true;
+    isStyleAdded$1 = true;
   }
   listeners.add(callback);
   return () => listeners.delete(callback);
 }
-function success(text = 'Toast success', options = {}) {
+function toast(text = 'Toast message', options = {}) {
   const id = Date.now();
   options = Object.assign({
-    position: 'top-center',
     duration: 2000,
     id,
     style: {},
@@ -216,10 +215,23 @@ function success(text = 'Toast success', options = {}) {
     options
   });
 }
-function error(text = 'Toast denied', options = {}) {
+toast.success = (text = 'Toast success', options = {}) => {
+  const id = Date.now();
+  options = Object.assign({
+    duration: 2000,
+    id,
+    style: {},
+    showIcon: true
+  }, options);
+  addToast({
+    type: 'success',
+    text,
+    options
+  });
+};
+toast.error = (text = 'Toast denied', options = {}) => {
   const id = Date.now();
   options = Object.assign({
-    position: 'top-center',
     duration: 2000,
     id,
     style: {},
@@ -230,11 +242,10 @@ function error(text = 'Toast denied', options = {}) {
     text,
     options
   });
-}
-function promise(callback, msgs = {}, options = {}) {
+};
+toast.promise = (callback, msgs = {}, options = {}) => {
   const id = Date.now();
   options = Object.assign({
-    position: 'top-center',
     duration: 2000,
     id,
     style: {},
@@ -272,11 +283,10 @@ function promise(callback, msgs = {}, options = {}) {
     });
     return Promise.reject(normalizedError);
   });
-}
-function custom(render, options = {}) {
+};
+toast.custom = (render, options = {}) => {
   const id = Date.now();
   options = Object.assign({
-    position: 'top-center',
     duration: 3000,
     id,
     exitDelay: 50
@@ -287,7 +297,7 @@ function custom(render, options = {}) {
     options
   });
   return id;
-}
+};
 function dismiss(id, exitDelay) {
   addToast({
     type: 'dismiss',
@@ -428,6 +438,7 @@ function getToastPosition(position) {
 
 function ToastContainer(props) {
   props = Object.assign({
+    position: 'top-center',
     gap: 8
   }, props);
   const {
@@ -519,25 +530,8 @@ function ToastContainer(props) {
       fontFamily: 'inherit',
       boxSizing: 'border-box'
     }
-  }, position ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      inset: 0,
-      display: 'grid',
-      padding: '1rem'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'relative'
-    }
-  }, toasts.map(toast => /*#__PURE__*/React.createElement(Toast, {
-    key: toast.options.id,
-    toast: toast,
-    setToasts: setToasts,
-    position: position,
-    gap: typeof gap === 'string' ? isNaN(+gap) ? 8 : +gap : gap
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, positions.map(pos => {
-    const group = toasts.filter(t => t.options.position === pos);
+  }, positions.map(pos => {
+    const group = toasts.filter(t => (t.options.position || position || 'top-center') === pos);
     if (!group.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       key: pos,
@@ -558,14 +552,141 @@ function ToastContainer(props) {
       position: pos,
       gap: typeof gap === 'string' ? isNaN(+gap) ? 8 : +gap : gap
     }))));
-  })));
+  }));
 }
 
-const toast = {
-  success,
-  error,
-  promise,
-  custom
-};
+const tooltipStyles = `
+.kitzo-react-tooltip-content-default-style {
+  font-family: sans-serif;
+  font-size: 0.875rem;
+  background-color: hsl(0, 0%, 15%);
+  color: hsl(0, 0%, 95%);
+  padding-block: 8px;
+  padding-inline: 10px;
+  border-radius: 0.325rem;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: hsl(0, 0%, 95%);
+    color: hsl(0, 0%, 15%);
+  }
+}
+
+.kitzo-react-tooltip-wrapper {
+  transition-duration: 120ms, 50ms;
+  transition-property: scale opacity;
+}
+
+.kitzo-react-tooltip-wrapper.top {
+  --tooltip-offset: calc(var(--offset) * 1px);
+
+  bottom: calc(var(--tooltip-offset) + 100%);
+  left: 50%;
+  translate: -50% 0;
+  scale: 0.7;
+  opacity: 0;
+  transform-origin: bottom;
+}
+
+.kitzo-react-tooltip-wrapper.right {
+  --tooltip-offset: calc(var(--offset) * 1px);
+
+  left: calc(var(--tooltip-offset) + 100%);
+  top: 50%;
+  translate: 0 -50%;
+  scale: 0.7;
+  opacity: 0;
+  transform-origin: left;
+}
+
+.kitzo-react-tooltip-wrapper.bottom {
+  --tooltip-offset: calc(var(--offset) * 1px);
+
+  top: calc(var(--tooltip-offset) + 100%);
+  left: 50%;
+  translate: -50% 0;
+  scale: 0.7;
+  opacity: 0;
+  transform-origin: top;
+}
+
+.kitzo-react-tooltip-wrapper.left {
+  --tooltip-offset: calc(var(--offset) * 1px);
+
+  right: calc(var(--tooltip-offset) + 100%);
+  top: 50%;
+  translate: 0 -50%;
+  scale: 0.7;
+  opacity: 0;
+  transform-origin: right;
+}
+
+.kitzo-react-tooltip-root:hover {
+  .kitzo-react-tooltip-wrapper.top {
+    scale: 1;
+    opacity: 1;
+  }
+  .kitzo-react-tooltip-wrapper.right {
+    scale: 1;
+    opacity: 1;
+  }
+  .kitzo-react-tooltip-wrapper.bottom {
+    scale: 1;
+    opacity: 1;
+  }
+  .kitzo-react-tooltip-wrapper.left {
+    scale: 1;
+    opacity: 1;
+  }
+}
+`;
+(() => {
+  if (!document.getElementById('kitzo-react-tooltip-styles')) {
+    const styleTag = document.createElement('style');
+    styleTag.id = 'kitzo-react-tooltip-styles';
+    styleTag.textContent = tooltipStyles;
+    document.head.appendChild(styleTag);
+    isStyleAdded = true;
+  }
+})();
+function getPositionBasedClassName(position) {
+  let defaultClass = 'kitzo-react-tooltip-wrapper';
+  const allowedPositions = ['top', 'right', 'bottom', 'left'];
+  if (allowedPositions.includes(position)) {
+    return defaultClass + ' ' + position;
+  } else {
+    return defaultClass + ' ' + 'top';
+  }
+}
+function Tooltip({
+  content = 'Tooltip',
+  position = '',
+  offset = 8,
+  children
+}) {
+  // sanitize props
+  if (typeof position !== 'string') {
+    console.warn(`[kitzo/react]: Tooltip position ignored due to invalid data type.`);
+    position = 'top';
+  }
+  if (isNaN(Number(offset))) offset = 8;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      width: 'fit-content',
+      '--offset': Math.max(0, offset)
+    },
+    className: "kitzo-react-tooltip-root"
+  }, children, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      textWrap: 'nowrap',
+      pointerEvents: 'none'
+    },
+    tabIndex: -1,
+    className: getPositionBasedClassName(position.trim().toLowerCase())
+  }, typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/React.createElement("div", {
+    className: "kitzo-react-tooltip-content-default-style"
+  }, content) : /*#__PURE__*/React.createElement(React.Fragment, null, content)));
+}
 
-export { ToastContainer, toast };
+export { ToastContainer, Tooltip, toast };

package/package.json

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