kitzo 2.1.20 → 2.1.22

package/README.md

@@ -26,7 +26,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.1.20/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.1.22/dist/kitzo.umd.min.js"></script>
 ```
 
 > Vanilla: Attach this script tag in the html head tag and you are good to go.
@@ -248,7 +248,22 @@ function App() {
       <h1>Tooltip api</h1>
 
       <div>
-        <Tooltip content="Tooltip" position="top" offset="10" hideOnTouch={true}>
+        <Tooltip
+          content="Tooltip"
+          tooltipOptions={{
+            offset: 10,
+            smartHover: true,
+          }}
+          animate={{
+            duration: 120,
+            startDelay: 400,
+            endDelay: 50,
+          }}
+          style={{
+            '--arrow-size': 6,
+            '--arrow-color': 'red'
+          }}
+        >
           <button>Hover me</button>
         </Tooltip>
       </div>

package/dist/react/react.esm.js

@@ -552,9 +552,21 @@ function ToastContainer(props) {
   }));
 }
 
-const tooltipStyles = `
+// import './style.css';
+const tooltipStyles = `/* Default styling */
+.kitzo-react-tooltip-root {
+  --bg-clr: hsl(0, 0%, 15%);
+  --text-clr: hsl(0, 0%, 95%);
+
+  @media (prefers-color-scheme: dark) {
+    --bg-clr: hsl(0, 0%, 95%);
+    --text-clr: hsl(0, 0%, 15%);
+  }
+}
+
 .kitzo-react-tooltip-content-default-style {
   font-family:
+    inherit,
     system-ui,
     -apple-system,
     BlinkMacSystemFont,
@@ -567,84 +579,184 @@ const tooltipStyles = `
     'Helvetica Neue',
     sans-serif;
   font-size: 0.875rem;
-  background-color: hsl(0, 0%, 15%);
-  color: hsl(0, 0%, 95%);
+  background-color: var(--bg-clr);
+  color: var(--text-clr);
   padding-block: 0.25rem;
   padding-inline: 0.5rem;
   border-radius: 0.325rem;
-
-  @media (prefers-color-scheme: dark) {
-    background-color: hsl(0, 0%, 95%);
-    color: hsl(0, 0%, 15%);
-  }
 }
 
+/* Tooltip positioning */
 .kitzo-react-tooltip-wrapper {
-  --tooltip-transition-delay: calc(var(--delay) * 1ms);
-  transition:
-    transform 110ms var(--tooltip-transition-delay),
-    opacity 110ms var(--tooltip-transition-delay);
+  --tooltip-offset: calc(var(--offset) * 1px + 1px);
+}
+/* Top */
+.kitzo-react-tooltip-wrapper.top {
+  bottom: 100%;
+  padding-block-end: var(--tooltip-offset);
 }
-
 .kitzo-react-tooltip-wrapper.top {
-  --tooltip-offset: calc(var(--offset) * 1px);
-
-  bottom: calc(var(--tooltip-offset) + 100%);
   left: 50%;
-  transform: translateX(-50%) translateY(0) scale(0.8);
-  opacity: 0;
-  transform-origin: bottom;
+  translate: -50% 0;
+}
+.kitzo-react-tooltip-wrapper.top.start {
+  left: 0;
+  translate: 0 0;
+}
+.kitzo-react-tooltip-wrapper.top.end {
+  right: 0;
+  translate: 0 0;
 }
 
+/* Right */
+.kitzo-react-tooltip-wrapper.right {
+  left: 100%;
+  padding-inline-start: var(--tooltip-offset);
+}
 .kitzo-react-tooltip-wrapper.right {
-  --tooltip-offset: calc(var(--offset) * 1px);
-
-  left: calc(var(--tooltip-offset) + 100%);
   top: 50%;
-  transform: translateX(0) translateY(-50%) scale(0.8);
-  opacity: 0;
-  transform-origin: left;
+  translate: 0 -50%;
+}
+.kitzo-react-tooltip-wrapper.right.start {
+  top: 0;
+  translate: 0 0;
+}
+.kitzo-react-tooltip-wrapper.right.end {
+  top: 100%;
+  translate: 0 -100%;
 }
 
+/* Bottom */
+.kitzo-react-tooltip-wrapper.bottom {
+  top: 100%;
+  padding-block-start: var(--tooltip-offset);
+}
 .kitzo-react-tooltip-wrapper.bottom {
-  --tooltip-offset: calc(var(--offset) * 1px);
-
-  top: calc(var(--tooltip-offset) + 100%);
   left: 50%;
-  transform: translateX(-50%) translateY(0) scale(0.8);
-  opacity: 0;
-  transform-origin: top;
+  translate: -50% 0;
+}
+.kitzo-react-tooltip-wrapper.bottom.start {
+  left: 0;
+  translate: 0 0;
+}
+.kitzo-react-tooltip-wrapper.bottom.end {
+  left: 100%;
+  translate: -100% 0;
 }
 
+/* Left */
+.kitzo-react-tooltip-wrapper.left {
+  right: 100%;
+  padding-inline-end: var(--tooltip-offset);
+}
 .kitzo-react-tooltip-wrapper.left {
-  --tooltip-offset: calc(var(--offset) * 1px);
-
-  right: calc(var(--tooltip-offset) + 100%);
   top: 50%;
-  transform: translateX(0) translateY(-50%) scale(0.8);
+  translate: 0 -50%;
+}
+.kitzo-react-tooltip-wrapper.left.start {
+  top: 0;
+  translate: 0 0;
+}
+.kitzo-react-tooltip-wrapper.left.end {
+  top: 100%;
+  translate: 0 -100%;
+}
+
+/* Tooltip transitions */
+.kitzo-react-tooltip-root.animate-tooltip {
+  --transition-startDuration: calc(var(--startDuration) * 1ms);
+  --transition-endDuration: calc(var(--endDuration) * 1ms);
+  --transition-startDelay: calc(var(--startDelay) * 1ms);
+  --transition-endDelay: calc(var(--endDelay) * 1ms);
+
+  .kitzo-react-tooltip-content {
+    transition:
+      transform var(--transition-endDuration) var(--transition-endDelay),
+      opacity var(--transition-endDuration) var(--transition-endDelay);
+  }
+}
+
+.kitzo-react-tooltip-content {
+  transform: scale(0.8);
   opacity: 0;
+}
+
+.kitzo-react-tooltip-content.top {
+  transform-origin: bottom;
+}
+.kitzo-react-tooltip-content.right {
+  transform-origin: left;
+}
+.kitzo-react-tooltip-content.bottom {
+  transform-origin: top;
+}
+.kitzo-react-tooltip-content.left {
   transform-origin: right;
 }
 
-.kitzo-react-tooltip-root:hover {
-  .kitzo-react-tooltip-wrapper.top {
-    transform: translateX(-50%) translateY(0) scale(1);
-    opacity: 1;
+.kitzo-react-tooltip-root.animate-tooltip:hover {
+  .kitzo-react-tooltip-content {
+    transition:
+      transform var(--transition-startDuration) var(--transition-startDelay),
+      opacity var(--transition-startDuration) var(--transition-startDelay);
   }
-  .kitzo-react-tooltip-wrapper.right {
-    transform: translateX(0) translateY(-50%) scale(1);
+}
+.kitzo-react-tooltip-root:hover {
+  .kitzo-react-tooltip-content {
+    transform: scale(1);
     opacity: 1;
   }
-  .kitzo-react-tooltip-wrapper.bottom {
-    transform: translateX(-50%) translateY(0) scale(1);
-    opacity: 1;
+}
+
+/* smart hover persistence feature */
+.kitzo-react-tooltip-root {
+  .kitzo-react-tooltip-wrapper {
+    pointer-events: none;
   }
-  .kitzo-react-tooltip-wrapper.left {
-    transform: translateX(0) translateY(-50%) scale(1);
-    opacity: 1;
+}
+.kitzo-react-tooltip-root.smart-hover:hover {
+  .kitzo-react-tooltip-wrapper {
+    pointer-events: all;
   }
 }
-`;
+
+/* Arrow */
+.kitzo-react-tooltip-content.tooltip-arrow {
+  --effective-size: calc(var(--arrow-size, 6) * 1px);
+  --effective-color: var(--arrow-color, var(--bg-clr));
+
+  position: relative;
+}
+.kitzo-react-tooltip-content.tooltip-arrow::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  border: var(--effective-size) solid transparent;
+}
+.kitzo-react-tooltip-content.tooltip-arrow.top::before {
+  left: 50%;
+  translate: -50% 0;
+  top: calc(100% - 1px);
+  border-top: var(--effective-size) solid var(--effective-color);
+}
+.kitzo-react-tooltip-content.tooltip-arrow.right::before {
+  top: 50%;
+  translate: 0 -50%;
+  right: calc(100% - 1px);
+  border-right: var(--effective-size) solid var(--effective-color);
+}
+.kitzo-react-tooltip-content.tooltip-arrow.bottom::before {
+  left: 50%;
+  translate: -50% 0;
+  bottom: calc(100% - 1px);
+  border-bottom: var(--effective-size) solid var(--effective-color);
+}
+.kitzo-react-tooltip-content.tooltip-arrow.left::before {
+  top: 50%;
+  translate: 0 -50%;
+  left: calc(100% - 1px);
+  border-left: var(--effective-size) solid var(--effective-color);
+}`;
 (() => {
   if (!document.getElementById('kitzo-react-tooltip-styles')) {
     const styleTag = document.createElement('style');
@@ -653,52 +765,91 @@ const tooltipStyles = `
     document.head.appendChild(styleTag);
   }
 })();
-const allowedPositions = ['top', 'right', 'bottom', 'left'];
-function getPositionBasedClassName(position) {
-  let defaultClass = 'kitzo-react-tooltip-wrapper';
-  if (allowedPositions.includes(position)) {
-    return defaultClass + ' ' + position;
+const allowedPositions = ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'];
+function getPositionClass(position = '') {
+  const allowedPos = allowedPositions.find(p => p === position);
+  if (!allowedPos) return 'top';
+  if (allowedPos.includes('-')) {
+    const [dir, state] = allowedPos.split('-');
+    return `${dir} ${state}`;
   } else {
-    return defaultClass + ' ' + 'top';
+    return allowedPos;
   }
 }
+function getAnimationProperties(animation) {
+  const effectiveStartDelay = animation?.startDelay;
+  const effectiveEndDelay = animation?.endDelay;
+  const effectiveDelay = animation?.delay ?? 0;
+  const effectiveStartDuration = animation?.startDuration;
+  const effectiveEndDuration = animation?.endDuration;
+  const effectiveDuration = animation?.duration ?? 110;
+  return {
+    startDelay: effectiveStartDelay ?? effectiveDelay,
+    endDelay: effectiveEndDelay ?? effectiveDelay,
+    startDuration: effectiveStartDuration ?? effectiveDuration,
+    endDuration: effectiveEndDuration ?? effectiveDuration
+  };
+}
 function Tooltip({
-  content = 'Tooltip',
+  content,
   tooltipOptions = {},
+  animation = true,
+  style = {},
   children
 }) {
+  const isTouch = window.matchMedia('(pointer: coarse)').matches;
+  if (isTouch && finalOptions.hideOnTouch) return children;
+  if (typeof content === 'string') {
+    if (!content.trim()) throw new Error('kitzo/react: tooltip content is required');
+  } else if (!content) {
+    throw new Error('kitzo/react: tooltip content is required');
+  }
+  // Define options
   const {
     position = 'top',
     offset = 8,
     hideOnTouch = true,
-    delay = 0
+    arrow = true,
+    smartHover = true
   } = tooltipOptions ?? {};
   const finalOptions = {
     position: typeof position === 'string' ? position.trim().toLowerCase() : 'top',
     offset: !isNaN(Number(offset)) ? Number(offset) : 8,
-    delay: !isNaN(Number(delay)) ? Number(delay) : 0,
+    arrow: typeof arrow === 'boolean' ? arrow : true,
+    smartHover: typeof smartHover === 'boolean' ? smartHover : true,
     hideOnTouch: typeof hideOnTouch === 'boolean' ? hideOnTouch : true
   };
-  const isTouch = window.matchMedia('(pointer: coarse)').matches;
-  if (isTouch && finalOptions.hideOnTouch) return children;
+  const positionClass = getPositionClass(finalOptions.position);
+
+  // Define animations
+  const animationEnabled = animation ? true : false;
+  const animationObj = animation === true ? {} : animation;
+  const finalAnimationProperties = getAnimationProperties(animationObj);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'relative',
       width: 'fit-content',
       '--offset': Math.max(0, finalOptions.offset),
-      '--delay': Math.max(0, finalOptions.delay)
+      '--startDuration': Math.max(0, finalAnimationProperties.startDuration),
+      '--endDuration': Math.max(0, finalAnimationProperties.endDuration),
+      '--startDelay': Math.max(0, finalAnimationProperties.startDelay),
+      '--endDelay': Math.max(0, finalAnimationProperties.endDelay),
+      '--arrow-color': style?.['--arrow-color'],
+      '--arrow-size': style?.['--arrow-size']
     },
-    className: "kitzo-react-tooltip-root"
+    className: `kitzo-react-tooltip-root ${finalOptions.smartHover ? 'smart-hover' : ''} ${animationEnabled ? 'animate-tooltip' : ''}`
   }, children, /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
-      pointerEvents: 'none'
+      whiteSpace: typeof content === 'string' ? 'nowrap' : 'normal'
     },
     tabIndex: -1,
-    className: getPositionBasedClassName(finalOptions.position)
+    className: `kitzo-react-tooltip-wrapper ${positionClass}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `kitzo-react-tooltip-content ${positionClass} ${finalOptions.arrow ? 'tooltip-arrow' : ''}`
   }, 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)));
+  }, content) : /*#__PURE__*/React.createElement(React.Fragment, null, content))));
 }
 
 export { ToastContainer, Tooltip, toast };

package/dist/react/types/tooltip.d.ts

@@ -2,29 +2,64 @@ import type { JSX, PropsWithChildren, ReactNode } from 'react';
 
 type TooltipOptions = {
   /**
-   * Default position: 'top'
+   * @default 'top'
    */
-  position?: 'top' | 'right' | 'bottom' | 'left';
+  position?:
+    | 'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left'
+    | 'left-end';
   /**
-   * Default offset: 8
+   * @default 8
    */
   offset?: number;
   /**
-   * Default delay: 0
+   * Enables “Smart Hover Persistence”, allowing the tooltip to remain open
+   * while the cursor moves between the trigger and the tooltip.
+   *
+   * @default true
    */
-  delay?: number;
+  smartHover?: boolean;
   /**
-   * Default hideOnTouch: true
+   * @default true true
    */
   hideOnTouch?: boolean;
 };
 
+type AnimationOptions = {
+  /**
+   * @default 110ms
+   */
+  duration?: number;
+  startDuration?: number;
+  endDuration?: number;
+  delay?: number;
+  startDelay?: number;
+  endDelay?: number;
+};
+type TooltipAnimation = boolean | AnimationOptions;
+
+type TooltipStyles = {
+  '--arrow-size'?: number;
+  '--arrow-color'?: string;
+};
+
 type TooltipCoreProps = {
   /**
    * content is necessary
    */
-  content: ReactNode;
+  content: string | ReactNode;
   tooltipOptions?: TooltipOptions;
+  animation?: TooltipAnimation;
+  style?: TooltipStyles;
 };
 
 type TooltipProps = PropsWithChildren<TooltipCoreProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.1.20",
+  "version": "2.1.22",
   "description": "A lightweight JavaScript & React UI micro-library.",
   "type": "module",
   "main": "./dist/vanilla/vanilla.umd.js",