funuicss 2.7.16 → 3.0.0

package/ui/theme/themes.ts

@@ -1,154 +0,0 @@
-// components/ThemeProvider/themes.ts
-
-export const colorVarsToDarken = [
-  '--primary50', '--primary100', '--primary200', '--primary300', '--primary400',
-  '--secondary50', '--secondary100', '--secondary200', '--secondary300', '--secondary400',
-  '--accent50', '--accent100', '--accent200', '--accent300', '--accent400',
-];
-
-export const darkerDefaults = {
-  '--success50': '#c1dbc7',
-  '--success100': '#b0d1b3',
-  '--success200': '#92bb97',
-  '--success300': '#6aa375',
-  '--success400': '#3f864e',
-
-  '--warning50': '#e6dcd4',
-  '--warning100': '#e6d1bb',
-  '--warning200': '#e2b783',
-  '--warning300': '#e09b59',
-  '--warning400': '#d57627',
-
-  '--info50': '#c1d3e6',
-  '--info100': '#b3c8e0',
-  '--info200': '#91b3d4',
-  '--info300': '#5a9bcb',
-  '--info400': '#2f85c3',
-
-  '--error50': '#e6cfcf',
-  '--error100': '#e6bebe',
-  '--error200': '#e29e9e',
-  '--error300': '#da7373',
-  '--error400': '#cc4646',
-};
-
-export const themes = {
-  light: {
-    '--page-bg': '#FFFFFF',
-    '--text-color': '#000000',
-  },
-  dark: {
-    '--page-bg': '#1E1E1E',
-    '--text-color': '#FFFFFF',
-    '--raiseThemes': 'rgba(32, 32, 32, 0.5)',
-    '--raiseOpaque': 'rgba(32, 32, 32, 0.8)',
-    '--borderColor': '#4a4a4a',
-    '--borderRgb': '74, 74, 74',
-    '--lighter': '#2a2a2a',
-    '--linkColor': '#9ab',
-    '--cardBg': '#1e1e1e',
-    '--card': `4px 4px 6px #141414, -4px -4px 6px #272727`,
-    ...darkerDefaults,
-  },
-  'dark-blue': {
-    '--page-bg': '#0d1b2a',
-    '--text-color': '#f0f4f8',
-    '--text-muted': '#a9bcd0',
-    '--raiseThemes': 'rgba(13, 27, 42, 0.5)',
-    '--raiseOpaque': 'rgba(13, 27, 42, 0.8)',
-    '--borderColor': '#1e3249',
-    '--borderRgb': '30, 50, 73',
-    '--lighter': '#1b2c3f',
-    '--linkColor': '#56ccf2',
-    '--accent': '#66d9ef',
-    '--cardBg': '#0d1b2a',
-    '--card': `4px 4px 6px #08121d, -4px -4px 6px #15273b`,
-    ...darkerDefaults,
-  },
-  'light-gray': {
-    '--page-bg': '#e8e8e8',
-    '--text-color': '#2a2a2a',
-    '--text-muted': '#777777',
-    '--raiseThemes': 'rgba(255, 255, 255, 0.6)',
-    '--raiseOpaque': 'rgba(255, 255, 255, 0.94)',
-    '--borderColor': '#d0d0d0',
-    '--borderRgb': '208, 208, 208',
-    '--lighter': '#f4f4f4',
-    '--linkColor': '#202020',
-    '--accent': '#4a90e2',
-    '--cardBg': '#e8e8e8',
-    '--card': `8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff`,
-  },
-  'pastel-green': {
-    '--page-bg': '#e6f5ea',
-    '--text-color': '#2f4f4f',
-    '--text-muted': '#5a7d7d',
-    '--raiseThemes': 'rgba(230, 245, 234, 0.6)',
-    '--raiseOpaque': 'rgba(230, 245, 234, 0.9)',
-    '--borderColor': '#b5d3c5',
-    '--borderRgb': '181, 211, 197',
-    '--lighter': '#f1faf3',
-    '--linkColor': '#4caf50',
-    '--accent': '#81c784',
-    '--cardBg': '#e6f5ea',
-    '--card': `6px 6px 12px #cde3d5, -6px -6px 12px #ffffff`,
-  },
-  'warm-orange': {
-    '--page-bg': '#fff3e0',
-    '--text-color': '#4e342e',
-    '--text-muted': '#8d6e63',
-    '--raiseThemes': 'rgba(255, 243, 224, 0.6)',
-    '--raiseOpaque': 'rgba(255, 243, 224, 0.94)',
-    '--borderColor': '#ffccbc',
-    '--borderRgb': '255, 204, 188',
-    '--lighter': '#ffecb3',
-    '--linkColor': '#ff7043',
-    '--accent': '#ff8a65',
-    '--cardBg': '#fff3e0',
-    '--card': `6px 6px 14px #e0c7b3, -6px -6px 14px #ffffff`,
-  },
-  'frosted-glass': {
-    '--page-bg': 'rgba(255, 255, 255, 0.75)',
-    '--text-color': '#111',
-    '--text-muted': '#666',
-    '--raiseThemes': 'rgba(255, 255, 255, 0.4)',
-    '--raiseOpaque': 'rgba(255, 255, 255, 0.9)',
-    '--borderColor': '#ccc',
-    '--borderRgb': '204, 204, 204',
-    '--lighter': '#fafafa',
-    '--linkColor': '#0099cc',
-    '--accent': '#00c2ff',
-    '--cardBg': 'rgba(255, 255, 255, 0.6)',
-    '--card': `4px 4px 10px rgba(0, 0, 0, 0.05), -4px -4px 10px rgba(255, 255, 255, 0.5)`,
-  },
-  'midnight-purple': {
-    '--page-bg': '#1a1333',
-    '--text-color': '#e0e0ff',
-    '--text-muted': '#b39ddb',
-    '--raiseThemes': 'rgba(26, 19, 51, 0.5)',
-    '--raiseOpaque': 'rgba(26, 19, 51, 0.85)',
-    '--borderColor': '#443a66',
-    '--borderRgb': '68, 58, 102',
-    '--lighter': '#241b3f',
-    '--linkColor': '#d1c4e9',
-    '--accent': '#9575cd',
-    '--cardBg': '#1a1333',
-    '--card': `4px 4px 8px #120c26, -4px -4px 8px #221a40`,
-    ...darkerDefaults,
-  },
-  'cyber-metal': {
-    '--page-bg': '#0f1115',
-    '--text-color': '#d0d0d0',
-    '--text-muted': '#888',
-    '--raiseThemes': 'rgba(15, 17, 21, 0.4)',
-    '--raiseOpaque': 'rgba(15, 17, 21, 0.85)',
-    '--borderColor': '#2a2a2a',
-    '--borderRgb': '42, 42, 42',
-    '--lighter': '#1a1a1a',
-    '--linkColor': '#00ffe0',
-    '--accent': '#39ff14',
-    '--cardBg': '#0f1115',
-    '--card': `6px 6px 12px #050607, -6px -6px 12px #1c1f25`,
-    ...darkerDefaults,
-  }
-};

package/ui/tooltip/Tip.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-interface TipProps {
-  tip: string;
-  funcss?: string;
-  children?: React.ReactNode;
-  content?: React.ReactNode;
-  message?: React.ReactNode;
-  animation?: string;
-  duration?: number;
-} 
-
-export default function Tip({
-  tip,
-  funcss,
-  children,
-  content,
-  message,
-  animation,
-  duration,
-  ...rest
-}: TipProps) {
-  const text = message || content || children;
-  return (
-    <span
-      className={`tip-${tip} tip ${funcss ? funcss : ''}`}
-      style={{ animation: ` ${duration ? duration : 0}s ${animation ? animation : ''}`}}
-      {...rest}
-    >
-      {text}
-      
-    </span>
-  );
-}

package/ui/tooltip/ToolTip.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import Tip from './Tip';
-
-interface ToolTipProps {
-  funcss?: string;
-  children?: React.ReactNode;
-}
-
-export default function ToolTip({ funcss, children, ...rest }: ToolTipProps) {
-
-  return (
-    <span
- 
-      className={`tooltip ${funcss ?? ''}`}
-      {...rest}
-    >
-      {children}
-    </span>
-  );
-}

package/ui/video/Video.tsx

@@ -1,348 +0,0 @@
-
-'use client';
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import {
-  PiCornersOut,
-  PiFastForward,
-  PiPause,
-  PiPlay,
-  PiRewind,
-  PiSpeakerLow,
-} from 'react-icons/pi';
-import { IoCloudDownloadOutline } from 'react-icons/io5';
-import Text from '../text/Text';
-import RowFlex from '../specials/RowFlex';
-import ToolTip from '../tooltip/ToolTip';
-import Circle from '../specials/Circle';
-import Tip from '../tooltip/Tip';
-import Image from 'next/image';
-
-import { formatTime, getBufferedPercent } from './videoFunctions';
-import { handleKeyDown } from './videoShortcuts';
-
-interface VideoProps {
-  src: string;
-  poster?: string;
-  onDuration?: (duration: number) => void;
-  isPause?: boolean;
-  spacebarPlay?: boolean;
-  className?: string;
-  autoPlay?: boolean;
-}
-
-export default function Video({ src, poster, onDuration, isPause, className, autoPlay , spacebarPlay = true, ...rest }: VideoProps) {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const animationFrameRef = useRef<number | null>(null);
-
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [volume, setVolume] = useState(1);
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [showVolume, setShowVolume] = useState(false);
-  const [isMouseMoving, setIsMouseMoving] = useState(true);
-  const [hasStarted, setHasStarted] = useState(false);
-
-
-
-  const handleVideoEnd = () => {
-  setIsPlaying(false);
-  setCurrentTime(duration); // optional
-};
-
-useEffect(() => {
-  const video = videoRef.current;
-  if (!video) return;
-
-  video.addEventListener('ended', handleVideoEnd);
-  return () => {
-    video.removeEventListener('ended', handleVideoEnd);
-  };
-}, [duration]);
-
-
-const playVideo = () => {
-  const video = videoRef.current;
-  if (video) {
-    // ✅ if video ended, reset it to start
-    if (video.currentTime === video.duration) {
-      video.currentTime = 0;
-    }
-
-    video.play().then(() => {
-      setIsPlaying(true);
-      setHasStarted(true);
-    }).catch(() => {});
-  }
-};
-
-const pauseVideo = () => {
-  const video = videoRef.current;
-  if (video && !video.paused) {
-    video.pause();
-    setIsPlaying(false);
-  }
-};
-
-
-
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => handleKeyDown(e, isPlaying, playVideo, pauseVideo, spacebarPlay);
-    document.addEventListener('keydown', handleKey);
-    return () => document.removeEventListener('keydown', handleKey);
-  }, [isPlaying]);
-
-  const handlePlayPauseToggle = () => {
-    isPlaying ? pauseVideo() : playVideo();
-  };
-
-  const handleRewind = () => {
-    const video = videoRef.current;
-    if (video) video.currentTime = Math.max(video.currentTime - 10, 0);
-  };
-
-  const handleForward = () => {
-    const video = videoRef.current;
-    if (video) video.currentTime = Math.min(video.currentTime + 10, duration);
-  };
-
-  const handleToggleFullScreen = () => {
-    const element = containerRef.current;
-    if (!element) return;
-    if (!document.fullscreenElement) {
-      element.requestFullscreen?.();
-    } else {
-      document.exitFullscreen?.();
-    }
-  };
-
-  const updateCurrentTime = useCallback(() => {
-    const video = videoRef.current;
-    if (video) {
-      setCurrentTime(video.currentTime);
-      animationFrameRef.current = requestAnimationFrame(updateCurrentTime);
-    }
-  }, []);
-
-const handleLoadedMetadata = () => {
-  const video = videoRef.current;
-  if (video) {
-    setDuration(video.duration || 0);
-    onDuration?.(video.duration);
-    if (autoPlay) {
-      video.play().then(() => {
-        setIsPlaying(true); // ✅ update UI state
-        setHasStarted(true);
-      }).catch(() => {});
-    }
-  }
-};
-
-
-useEffect(() => {
-  if (autoPlay && videoRef.current) {
-    videoRef.current.muted = true; // ✅ important for autoplay to work
-    videoRef.current.play().then(() => {
-      setIsPlaying(true);
-      setHasStarted(true);
-    }).catch((err) => {
-      console.warn('Autoplay failed', err);
-    });
-  }
-}, [autoPlay]);
-
-
-  const handleProgressBarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTime = parseFloat(e.target.value);
-    if (videoRef.current) {
-      videoRef.current.currentTime = newTime;
-    }
-    setCurrentTime(newTime);
-  };
-
-  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if(videoRef.current){
-      videoRef.current.muted = false; 
-    }
-    const newVolume = parseFloat(e.target.value);
-    setVolume(newVolume);
-    if (videoRef.current) videoRef.current.volume = newVolume;
-  };
-
-  useEffect(() => {
-    if (autoPlay && videoRef.current) {
-      const playPromise = videoRef.current.play();
-      if (playPromise !== undefined) {
-        playPromise.catch(() => {});
-      }
-    }
-  }, [autoPlay]);
-
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.volume = volume;
-    }
-  }, [volume]);
-
-  useEffect(() => {
-    if (isPause) pauseVideo();
-  }, [isPause]);
-
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      setIsFullScreen(!!document.fullscreenElement);
-    };
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
-  }, []);
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    const handleMouseMove = (e: MouseEvent | TouchEvent) => {
-      if (containerRef.current?.contains(e.target as Node)) {
-        setIsMouseMoving(true);
-        clearTimeout(timer);
-        timer = setTimeout(() => setIsMouseMoving(false), 2000);
-      }
-    };
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('touchstart', handleMouseMove);
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('touchstart', handleMouseMove);
-      clearTimeout(timer);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isPlaying) {
-      animationFrameRef.current = requestAnimationFrame(updateCurrentTime);
-    } else if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-    return () => {
-      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
-    };
-  }, [isPlaying, updateCurrentTime]);
-
-  useEffect(() => {
-    return () => {
-      pauseVideo();
-    };
-  }, []);
-
-
-  useEffect(() => {
-  const video = videoRef.current;
-  if (!video) return;
-
-  const onEnd = () => {
-    setIsPlaying(false);
-  };
-
-  video.addEventListener('ended', onEnd);
-  return () => video.removeEventListener('ended', onEnd);
-}, []);
-
-
-  return (
-    <div ref={containerRef} className={`video_container fit ${className || ''}`} id="fun_video_container">
-      {poster && !hasStarted && !isPlaying && (
-        <div
-          style={{ backgroundImage: `url(${poster})` }}
-          className="video_poster"
-        />
-      )}
-      <video
-        ref={videoRef}
-        preload="auto"
-        src={src}
-        className="video_player fit min-w-200"
-        onClick={handlePlayPauseToggle}
-        onLoadedMetadata={handleLoadedMetadata}
-        playsInline
-        controls={false}
-        {...rest}
-      />
-
-      <div className={`video_controls ${isMouseMoving ? 'show_controls' : 'hide_controls'}`}>
-        <div className="w-80-p center animated fade-in">
-          <RowFlex gap={0.3} funcss='mb-2' alignItems="center">
-           <div className='video_time'>
-             <Text text={formatTime(currentTime)} funcss='m-0' size="sm"  />
-           </div>
-            <div className="col width-100-p">
-              <input
-                type="range"
-                min={0}
-                max={duration}
-                value={currentTime}
-                onChange={handleProgressBarChange}
-                className="width-100-p videoSlider styled-slider m-0"
-                aria-label="Progress bar"
-                style={{ '--progress': `${(currentTime / duration) * 100}` } as React.CSSProperties}
-              />
-            </div>
-            <div className="video_time">
-            <Text text={`${formatTime(duration - currentTime)}`} funcss='m-0' size="sm"  />
-            </div>
-          </RowFlex>
-        </div>
-
-        <div className="center-play-icon animated fade-in" onClick={handlePlayPauseToggle}>
-          <div className='play-button'>
-            {isPlaying ? <PiPause size={30} /> : <PiPlay size={30} />}
-          </div>
-        </div>
-
-        <RowFlex funcss='animated slide-up' gap={1} justify="center">
-          <RowFlex gap={0.5}>
-            <ToolTip>
-              <Circle bordered size={2} onClick={handleRewind}><PiRewind /></Circle>
-              <Tip tip="top" animation="ScaleUp" duration={0.5} content="10 sec Back" />
-            </ToolTip>
-
-            <ToolTip>
-              <Circle bordered size={2} onClick={handleForward}><PiFastForward /></Circle>
-              <Tip tip="top" animation="ScaleUp" duration={0.5} content="10 sec Forward" />
-            </ToolTip>
-
-            <div onMouseEnter={() => setShowVolume(true)} onMouseLeave={() => setShowVolume(false)}>
-              <RowFlex>
-                <Circle bordered size={2}><PiSpeakerLow /></Circle>
-                {showVolume && (
-                  <input
-                    type="range"
-                    min={0}
-                    max={1}
-                    step={0.01}
-                    value={volume}
-                    onChange={handleVolumeChange}
-                    className="width-100 max-w-50 animated slide-right"
-                    style={{ height: '3px', marginLeft: 8 }}
-                    aria-label="Volume"
-                  />
-                )}
-              </RowFlex>
-            </div>
-          </RowFlex>
-
-          <RowFlex gap={0.3}>
-            <ToolTip>
-              <Circle bordered size={2} onClick={handleToggleFullScreen}><PiCornersOut /></Circle>
-              <Tip tip="top" animation="ScaleUp" duration={0.5} content="Expand" />
-            </ToolTip>
-
-            <ToolTip>
-              <Circle bordered size={2} onClick={() => window.open(src || '', '_blank')}>
-                <IoCloudDownloadOutline />
-              </Circle>
-              <Tip tip="top" animation="ScaleUp" duration={0.5} content="Download" />
-            </ToolTip>
-          </RowFlex>
-        </RowFlex>
-      </div>
-    </div>
-  );
-}

package/ui/video/videoFunctions.tsx

@@ -1,19 +0,0 @@
-// videoFunctions.tsx
-import { MutableRefObject } from 'react';
-
-export const formatTime = (time: number): string => {
-  if (isNaN(time)) return '00:00';
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60);
-  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-};
-
-export const getBufferedPercent = (
-  videoRef: MutableRefObject<HTMLVideoElement | null>,
-  duration: number
-): number => {
-  const video = videoRef.current;
-  if (!video || video.buffered.length === 0) return 0;
-  const end = video.buffered.end(video.buffered.length - 1);
-  return (end / duration) * 100;
-};

package/ui/video/videoShortcuts.ts

@@ -1,13 +0,0 @@
-// videoShortcuts.ts
-export const handleKeyDown = (
-  e: KeyboardEvent,
-  isPlaying: boolean,
-  playVideo: () => void,
-  pauseVideo: () => void ,
-  spacebarPlay?: boolean
-) => {
-  if (e.key === ' ' && spacebarPlay) {
-    e.preventDefault();
-    isPlaying ? pauseVideo() : playVideo();
-  }
-};