funuicss 3.9.6 → 3.9.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.6",
+  "version": "3.9.7",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/tooltip/ToolTip.js

@@ -112,6 +112,188 @@ function ToolTip(_a) {
             children && children !== text ? children : null),
         isBrowser && usePortal && text && isVisible && (0, react_dom_1.createPortal)(React.createElement("div", { className: "tip tip-".concat(tip), style: tooltipStyle }, text), document.body)));
 }
+// 'use client';
+// import * as React from 'react';
+// import { createPortal } from 'react-dom';
+// interface ToolTipProps {
+//   funcss?: string;
+//   children?: React.ReactNode;
+//   content?: React.ReactNode;
+//   message?: React.ReactNode;
+//   animation?: string;
+//   duration?: number;
+//   tip?: 'top' | 'bottom' | 'left' | 'right';
+//   usePortal?: boolean;
+// }
+// export default function ToolTip({ 
+//   funcss, 
+//   children, 
+//   content, 
+//   message, 
+//   animation, 
+//   duration, 
+//   tip = 'top',
+//   usePortal = true,
+//   ...rest 
+// }: ToolTipProps) {
+//   const [isVisible, setIsVisible] = React.useState(false);
+//   const [coords, setCoords] = React.useState({ x: 0, y: 0 });
+//   const [isMounted, setIsMounted] = React.useState(false);
+//   const triggerRef = React.useRef<HTMLSpanElement>(null);
+//   const tooltipRef = React.useRef<HTMLDivElement>(null);
+//   const portalContainerRef = React.useRef<HTMLDivElement | null>(null);
+//   const text = message || content || children;
+//   const updateTooltipPosition = React.useCallback(() => {
+//     if (!triggerRef.current || !isMounted) return;
+//     const rect = triggerRef.current.getBoundingClientRect();
+//     const scrollX = window.scrollX;
+//     const scrollY = window.scrollY;
+//     let x = rect.left + (rect.width / 2);
+//     let y = rect.top;
+//     if (tip === 'bottom') {
+//       y = rect.bottom;
+//     } else if (tip === 'left') {
+//       x = rect.left;
+//       y = rect.top + (rect.height / 2);
+//     } else if (tip === 'right') {
+//       x = rect.right;
+//       y = rect.top + (rect.height / 2);
+//     }
+//     setCoords({ 
+//       x: x + scrollX, 
+//       y: y + scrollY 
+//     });
+//   }, [tip, isMounted]);
+//   const handleMouseEnter = () => {
+//     if (!isMounted) setIsMounted(true);
+//     requestAnimationFrame(() => {
+//       updateTooltipPosition();
+//       setIsVisible(true);
+//     });
+//   };
+//   const handleMouseLeave = () => {
+//     setIsVisible(false);
+//     // Don't immediately unmount, let the transition finish
+//     setTimeout(() => {
+//       if (!isVisible) {
+//         setIsMounted(false);
+//       }
+//     }, 200); // Match the transition duration
+//   };
+//   // Handle scroll and resize to update position
+//   React.useEffect(() => {
+//     if (!isVisible || !usePortal || !isMounted) return;
+//     const handleScrollResize = () => {
+//       updateTooltipPosition();
+//     };
+//     window.addEventListener('scroll', handleScrollResize, { passive: true });
+//     window.addEventListener('resize', handleScrollResize);
+//     return () => {
+//       window.removeEventListener('scroll', handleScrollResize);
+//       window.removeEventListener('resize', handleScrollResize);
+//     };
+//   }, [isVisible, usePortal, updateTooltipPosition, isMounted]);
+//   // Update position when tooltip becomes visible
+//   React.useEffect(() => {
+//     if (isVisible && usePortal && isMounted) {
+//       updateTooltipPosition();
+//     }
+//   }, [isVisible, usePortal, updateTooltipPosition, isMounted]);
+//   // Create a stable portal container
+//   React.useEffect(() => {
+//     if (usePortal && isMounted && !portalContainerRef.current && typeof document !== 'undefined') {
+//       const container = document.createElement('div');
+//       container.id = `tooltip-portal-${Date.now()}`;
+//       document.body.appendChild(container);
+//       portalContainerRef.current = container;
+//     }
+//     return () => {
+//       if (portalContainerRef.current && portalContainerRef.current.parentNode) {
+//         portalContainerRef.current.parentNode.removeChild(portalContainerRef.current);
+//       }
+//     };
+//   }, [usePortal, isMounted]);
+//   const tooltipStyle: React.CSSProperties = {
+//     position: 'fixed',
+//     top: `${coords.y}px`,
+//     left: `${coords.x}px`,
+//     zIndex: 9999,
+//     opacity: isVisible ? 1 : 0,
+//     transition: 'opacity 0.2s ease',
+//     pointerEvents: 'none',
+//     transform: tip === 'top' ? 'translate(-50%, -100%)' :
+//                tip === 'bottom' ? 'translate(-50%, 0)' :
+//                tip === 'left' ? 'translate(-100%, -50%)' :
+//                'translate(0, -50%)',
+//     visibility: isVisible ? 'visible' : 'hidden',
+//   };
+//   const nonPortalTooltipStyle: React.CSSProperties = {
+//     position: 'absolute',
+//     zIndex: 9999,
+//     opacity: isVisible ? 1 : 0,
+//     transition: 'opacity 0.2s ease',
+//     pointerEvents: 'none',
+//     visibility: isVisible ? 'visible' : 'hidden',
+//     whiteSpace: 'nowrap',
+//   };
+//   // Apply positioning for non-portal tooltips
+//   if (!usePortal) {
+//     if (tip === 'top') {
+//       nonPortalTooltipStyle.bottom = '100%';
+//       nonPortalTooltipStyle.left = '50%';
+//       nonPortalTooltipStyle.transform = 'translateX(-50%)';
+//     } else if (tip === 'bottom') {
+//       nonPortalTooltipStyle.top = '100%';
+//       nonPortalTooltipStyle.left = '50%';
+//       nonPortalTooltipStyle.transform = 'translateX(-50%)';
+//     } else if (tip === 'left') {
+//       nonPortalTooltipStyle.right = '100%';
+//       nonPortalTooltipStyle.top = '50%';
+//       nonPortalTooltipStyle.transform = 'translateY(-50%)';
+//     } else if (tip === 'right') {
+//       nonPortalTooltipStyle.left = '100%';
+//       nonPortalTooltipStyle.top = '50%';
+//       nonPortalTooltipStyle.transform = 'translateY(-50%)';
+//     }
+//   }
+//   // Render portal tooltip
+//   let portalTooltip = null;
+//   if (typeof document !== 'undefined' && usePortal && isMounted && text && portalContainerRef.current) {
+//     portalTooltip = createPortal(
+//       <div 
+//         className={`tip tip-${tip}`} 
+//         style={tooltipStyle}
+//         ref={tooltipRef}
+//       >
+//         {text}
+//       </div>,
+//       portalContainerRef.current
+//     );
+//   }
+//   return (
+//     <>
+//       <span
+//         ref={triggerRef}
+//         className={`tooltip ${funcss || ''}`}
+//         onMouseEnter={handleMouseEnter}
+//         onMouseLeave={handleMouseLeave}
+//         style={{ position: 'relative', display: 'inline-block' }}
+//         {...rest}
+//       >
+//         {!usePortal && text && (
+//           <div 
+//             className={`tip tip-${tip}`} 
+//             style={nonPortalTooltipStyle}
+//           >
+//             {text}
+//           </div>
+//         )}
+//         {children && children !== text ? children : null}
+//       </span>
+//       {portalTooltip}
+//     </>
+//   );
+// }
 // import * as React from 'react';
 // import Tip from './Tip';
 // interface ToolTipProps {

package/ui/video/Video.d.ts

@@ -28,6 +28,9 @@ interface VideoProps {
     loop?: boolean;
     muted?: boolean;
     seekAmount?: number;
+    preload?: 'none' | 'metadata' | 'auto';
+    preloadStrategy?: 'conservative' | 'moderate' | 'aggressive';
+    bufferThreshold?: number;
     funcss?: string;
     containerCss?: string;
     videoCss?: string;
@@ -47,5 +50,5 @@ interface VideoProps {
     volumeStyle?: 'slider' | 'compact' | 'hover';
     variant?: string;
 }
-export default function Video({ src, poster, onDuration, onEnded, isPause, spacebarPlay, className, autoPlay, showControls, showPlayPause, showProgress, showVolume, showTime, showFullscreen, showDownload, showSeekButtons, playIcon, pauseIcon, fullscreenIcon, downloadIcon, volumeIcon, muteIcon, rewindIcon, forwardIcon, hideControlsDelay, loop, muted, seekAmount, funcss, containerCss, videoCss, controlsCss, progressCss, progressBarCss, timeCss, playCss, pauseCss, volumeCss, fullscreenCss, downloadCss, rewindCss, forwardCss, buttonCss, volumeStyle, style, variant, ...rest }: VideoProps): React.JSX.Element;
+export default function Video({ src, poster, onDuration, onEnded, isPause, spacebarPlay, className, autoPlay, showControls, showPlayPause, showProgress, showVolume, showTime, showFullscreen, showDownload, showSeekButtons, playIcon, pauseIcon, fullscreenIcon, downloadIcon, volumeIcon, muteIcon, rewindIcon, forwardIcon, hideControlsDelay, loop, muted, seekAmount, preload, preloadStrategy, bufferThreshold, funcss, containerCss, videoCss, controlsCss, progressCss, progressBarCss, timeCss, playCss, pauseCss, volumeCss, fullscreenCss, downloadCss, rewindCss, forwardCss, buttonCss, volumeStyle, style, variant, ...rest }: VideoProps): React.JSX.Element;
 export {};