@djangocfg/ui-nextjs 2.1.56 → 2.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.56",
+  "version": "2.1.58",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.56",
-    "@djangocfg/ui-core": "^2.1.56",
+    "@djangocfg/api": "^2.1.58",
+    "@djangocfg/ui-core": "^2.1.58",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -106,7 +106,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.56",
+    "@djangocfg/typescript-config": "^2.1.58",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/animations/MouseFollower.tsx

@@ -0,0 +1,355 @@
+'use client';
+
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+export type MouseFollowerVariant =
+  | 'glow'
+  | 'spotlight'
+  | 'gradient-blob'
+  | 'ring'
+  | 'trail';
+
+interface MouseFollowerProps {
+  /** Visual style of the follower */
+  variant?: MouseFollowerVariant;
+  /** Size of the effect in pixels */
+  size?: number;
+  /** Color - can be CSS color or 'primary' to use theme */
+  color?: string;
+  /** Smoothness of following (0.05 = very smooth, 0.3 = snappy) */
+  smoothness?: number;
+  /** Opacity of the effect (0-1) */
+  opacity?: number;
+  /** Blur amount for glow effects */
+  blur?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+  /** Additional className for the container */
+  className?: string;
+  /** Whether to show on mobile (touch devices) */
+  showOnMobile?: boolean;
+  /** Disable the effect */
+  disabled?: boolean;
+}
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+const blurMap = {
+  sm: 'blur-sm',
+  md: 'blur-md',
+  lg: 'blur-lg',
+  xl: 'blur-xl',
+  '2xl': 'blur-2xl',
+  '3xl': 'blur-3xl',
+};
+
+export const MouseFollower: React.FC<MouseFollowerProps> = ({
+  variant = 'glow',
+  size = 300,
+  color = 'primary',
+  smoothness = 0.1,
+  opacity = 0.3,
+  blur = '2xl',
+  className,
+  showOnMobile = false,
+  disabled = false,
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const positionRef = useRef<Position>({ x: 0, y: 0 });
+  const targetRef = useRef<Position>({ x: 0, y: 0 });
+  const elementRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef<number>(0);
+
+  // Resolve color
+  const resolvedColor = useMemo(() => {
+    if (color === 'primary') return 'hsl(var(--primary))';
+    if (color === 'secondary') return 'hsl(var(--secondary))';
+    if (color === 'accent') return 'hsl(var(--accent))';
+    return color;
+  }, [color]);
+
+  // Check if mobile
+  useEffect(() => {
+    setMounted(true);
+    const checkMobile = () => {
+      setIsMobile('ontouchstart' in window || navigator.maxTouchPoints > 0);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  // Animation loop with lerp
+  const animate = useCallback(() => {
+    const dx = targetRef.current.x - positionRef.current.x;
+    const dy = targetRef.current.y - positionRef.current.y;
+
+    positionRef.current.x += dx * smoothness;
+    positionRef.current.y += dy * smoothness;
+
+    if (elementRef.current) {
+      elementRef.current.style.transform = `translate(${positionRef.current.x - size / 2}px, ${positionRef.current.y - size / 2}px)`;
+    }
+
+    rafRef.current = requestAnimationFrame(animate);
+  }, [smoothness, size]);
+
+  // Mouse move handler
+  useEffect(() => {
+    if (disabled || !mounted) return;
+    if (isMobile && !showOnMobile) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      targetRef.current = { x: e.clientX, y: e.clientY };
+      if (!isVisible) setIsVisible(true);
+    };
+
+    const handleMouseLeave = () => {
+      setIsVisible(false);
+    };
+
+    const handleMouseEnter = () => {
+      setIsVisible(true);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseleave', handleMouseLeave);
+    document.addEventListener('mouseenter', handleMouseEnter);
+
+    rafRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseleave', handleMouseLeave);
+      document.removeEventListener('mouseenter', handleMouseEnter);
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [disabled, mounted, isMobile, showOnMobile, animate, isVisible]);
+
+  if (!mounted || disabled) return null;
+  if (isMobile && !showOnMobile) return null;
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 pointer-events-none overflow-hidden z-0',
+        className
+      )}
+    >
+      <div
+        ref={elementRef}
+        className={cn(
+          'absolute top-0 left-0 transition-opacity duration-300',
+          isVisible ? 'opacity-100' : 'opacity-0'
+        )}
+        style={{ width: size, height: size }}
+      >
+        {variant === 'glow' && (
+          <GlowEffect
+            size={size}
+            color={resolvedColor}
+            opacity={opacity}
+            blur={blurMap[blur]}
+          />
+        )}
+
+        {variant === 'spotlight' && (
+          <SpotlightEffect
+            size={size}
+            color={resolvedColor}
+            opacity={opacity}
+            blur={blurMap[blur]}
+          />
+        )}
+
+        {variant === 'gradient-blob' && (
+          <GradientBlobEffect
+            size={size}
+            color={resolvedColor}
+            opacity={opacity}
+            blur={blurMap[blur]}
+          />
+        )}
+
+        {variant === 'ring' && (
+          <RingEffect
+            size={size}
+            color={resolvedColor}
+            opacity={opacity}
+          />
+        )}
+
+        {variant === 'trail' && (
+          <TrailEffect
+            size={size}
+            color={resolvedColor}
+            opacity={opacity}
+            blur={blurMap[blur]}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+// =============================================================================
+// Effect Variants
+// =============================================================================
+
+interface EffectProps {
+  size: number;
+  color: string;
+  opacity: number;
+  blur?: string;
+}
+
+const GlowEffect: React.FC<EffectProps> = ({ size, color, opacity, blur }) => (
+  <div
+    className={cn('w-full h-full rounded-full', blur)}
+    style={{
+      background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+      opacity,
+    }}
+  />
+);
+
+const SpotlightEffect: React.FC<EffectProps> = ({ size, color, opacity, blur }) => (
+  <>
+    {/* Main spotlight cone */}
+    <div
+      className={cn('absolute inset-0', blur)}
+      style={{
+        background: `conic-gradient(from 180deg at 50% 50%,
+          transparent 0deg,
+          ${color} 150deg,
+          ${color} 210deg,
+          transparent 360deg
+        )`,
+        opacity: opacity * 0.6,
+      }}
+    />
+    {/* Center glow */}
+    <div
+      className={cn('absolute rounded-full', blur)}
+      style={{
+        width: '40%',
+        height: '40%',
+        top: '30%',
+        left: '30%',
+        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+        opacity,
+      }}
+    />
+  </>
+);
+
+const GradientBlobEffect: React.FC<EffectProps> = ({ size, color, opacity, blur }) => (
+  <>
+    {/* Animated blob shape */}
+    <div
+      className={cn('w-full h-full', blur)}
+      style={{
+        background: `radial-gradient(ellipse 60% 40% at 50% 50%, ${color} 0%, transparent 70%)`,
+        opacity,
+        animation: 'blob-morph 8s ease-in-out infinite',
+      }}
+    />
+    {/* Secondary blob */}
+    <div
+      className={cn('absolute inset-0', blur)}
+      style={{
+        background: `radial-gradient(ellipse 40% 60% at 50% 50%, ${color} 0%, transparent 60%)`,
+        opacity: opacity * 0.5,
+        animation: 'blob-morph 8s ease-in-out infinite reverse',
+        animationDelay: '-4s',
+      }}
+    />
+    <style>{`
+      @keyframes blob-morph {
+        0%, 100% { transform: scale(1) rotate(0deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+        25% { transform: scale(1.1) rotate(90deg); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
+        50% { transform: scale(0.9) rotate(180deg); border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
+        75% { transform: scale(1.05) rotate(270deg); border-radius: 60% 40% 50% 40% / 70% 30% 50% 60%; }
+      }
+    `}</style>
+  </>
+);
+
+const RingEffect: React.FC<EffectProps> = ({ size, color, opacity }) => (
+  <>
+    {/* Outer ring */}
+    <div
+      className="absolute inset-0 rounded-full"
+      style={{
+        border: `2px solid ${color}`,
+        opacity: opacity * 0.3,
+      }}
+    />
+    {/* Middle ring */}
+    <div
+      className="absolute rounded-full"
+      style={{
+        inset: '15%',
+        border: `2px solid ${color}`,
+        opacity: opacity * 0.5,
+        animation: 'ring-pulse 2s ease-in-out infinite',
+      }}
+    />
+    {/* Inner ring */}
+    <div
+      className="absolute rounded-full"
+      style={{
+        inset: '30%',
+        border: `2px solid ${color}`,
+        opacity: opacity * 0.7,
+        animation: 'ring-pulse 2s ease-in-out infinite',
+        animationDelay: '-1s',
+      }}
+    />
+    {/* Center dot */}
+    <div
+      className="absolute rounded-full"
+      style={{
+        width: '8px',
+        height: '8px',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        background: color,
+        opacity,
+      }}
+    />
+    <style>{`
+      @keyframes ring-pulse {
+        0%, 100% { opacity: 0.3; transform: scale(1); }
+        50% { opacity: 0.7; transform: scale(1.05); }
+      }
+    `}</style>
+  </>
+);
+
+const TrailEffect: React.FC<EffectProps> = ({ size, color, opacity, blur }) => (
+  <>
+    {/* Multiple trailing circles */}
+    {Array.from({ length: 5 }).map((_, i) => (
+      <div
+        key={i}
+        className={cn('absolute rounded-full', blur)}
+        style={{
+          width: `${100 - i * 15}%`,
+          height: `${100 - i * 15}%`,
+          top: `${i * 7.5}%`,
+          left: `${i * 7.5}%`,
+          background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+          opacity: opacity * (1 - i * 0.15),
+          transition: `transform ${0.1 + i * 0.05}s ease-out`,
+        }}
+      />
+    ))}
+  </>
+);

package/src/animations/index.ts

@@ -1,2 +1,5 @@
 export { AnimatedBackground } from './AnimatedBackground';
 export type { BackgroundVariant } from './AnimatedBackground';
+
+export { MouseFollower } from './MouseFollower';
+export type { MouseFollowerVariant } from './MouseFollower';

package/src/tools/VideoPlayer/NativePlayer.tsx

@@ -0,0 +1,141 @@
+/**
+ * NativePlayer - Lightweight native HTML5 video player
+ * For demo videos, background videos, autoplay loop muted scenarios
+ * Use VideoPlayer (Vidstack) for full-featured player with controls
+ */
+
+'use client';
+
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { Preloader, AspectRatio } from '@djangocfg/ui-core';
+
+import type { NativePlayerProps, NativePlayerRef } from './types';
+
+export const NativePlayer = forwardRef<NativePlayerRef, NativePlayerProps>(
+  (
+    {
+      src,
+      poster,
+      aspectRatio = 16 / 9,
+      autoPlay = true,
+      muted = true,
+      loop = true,
+      playsInline = true,
+      preload = 'auto',
+      controls = false,
+      disableContextMenu = true,
+      showPreloader = true,
+      preloaderTimeout = 5000,
+      className,
+      videoClassName,
+      preloaderClassName,
+      onLoadStart,
+      onCanPlay,
+      onPlaying,
+      onEnded,
+      onError,
+    },
+    ref
+  ) => {
+    const [isLoading, setIsLoading] = useState(showPreloader);
+    const videoRef = useRef<HTMLVideoElement>(null);
+
+    // Expose video element methods via ref
+    useImperativeHandle(ref, () => ({
+      play: () => videoRef.current?.play(),
+      pause: () => videoRef.current?.pause(),
+      get currentTime() {
+        return videoRef.current?.currentTime ?? 0;
+      },
+      set currentTime(time: number) {
+        if (videoRef.current) videoRef.current.currentTime = time;
+      },
+      get paused() {
+        return videoRef.current?.paused ?? true;
+      },
+      get element() {
+        return videoRef.current;
+      },
+    }));
+
+    useEffect(() => {
+      if (!showPreloader) return;
+
+      const video = videoRef.current;
+      if (!video) return;
+
+      // Check if video is already loaded (readyState >= HAVE_FUTURE_DATA)
+      if (video.readyState >= 3) {
+        setIsLoading(false);
+        return;
+      }
+
+      const hideLoader = () => setIsLoading(false);
+
+      // Listen to multiple events for better browser support
+      video.addEventListener('canplay', hideLoader);
+      video.addEventListener('loadeddata', hideLoader);
+      video.addEventListener('playing', hideLoader);
+
+      // Fallback: hide loader after timeout even if video fails (shows poster instead)
+      const timeout = setTimeout(hideLoader, preloaderTimeout);
+
+      return () => {
+        video.removeEventListener('canplay', hideLoader);
+        video.removeEventListener('loadeddata', hideLoader);
+        video.removeEventListener('playing', hideLoader);
+        clearTimeout(timeout);
+      };
+    }, [showPreloader, preloaderTimeout]);
+
+    const handleContextMenu = (e: React.MouseEvent) => {
+      if (disableContextMenu) {
+        e.preventDefault();
+      }
+    };
+
+    return (
+      <div className={cn('relative overflow-hidden', className)}>
+        <AspectRatio ratio={aspectRatio}>
+          {/* Preloader */}
+          {showPreloader && isLoading && (
+            <div
+              className={cn(
+                'absolute inset-0 flex items-center justify-center bg-muted/30 backdrop-blur-sm z-10',
+                preloaderClassName
+              )}
+            >
+              <Preloader size="lg" spinnerClassName="text-white" />
+            </div>
+          )}
+
+          {/* Video */}
+          <video
+            ref={videoRef}
+            className={cn('w-full h-full object-cover', videoClassName)}
+            autoPlay={autoPlay}
+            muted={muted}
+            loop={loop}
+            playsInline={playsInline}
+            preload={preload}
+            controls={controls}
+            poster={poster}
+            onContextMenu={handleContextMenu}
+            onLoadStart={onLoadStart}
+            onCanPlay={onCanPlay}
+            onPlaying={onPlaying}
+            onEnded={onEnded}
+            onError={onError}
+          >
+            <source src={src} type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        </AspectRatio>
+      </div>
+    );
+  }
+);
+
+NativePlayer.displayName = 'NativePlayer';

package/src/tools/VideoPlayer/index.ts

@@ -4,6 +4,13 @@
  */
 
 export { VideoPlayer, VideoUrlError } from './VideoPlayer';
+export { NativePlayer } from './NativePlayer';
 export { VideoControls } from './VideoControls';
-export type { VideoSource, VideoPlayerProps, VideoPlayerRef } from './types';
+export type {
+  VideoSource,
+  VideoPlayerProps,
+  VideoPlayerRef,
+  NativePlayerProps,
+  NativePlayerRef,
+} from './types';
 

package/src/tools/VideoPlayer/types.ts

@@ -60,3 +60,59 @@ export interface VideoPlayerRef {
   exitFullscreen: () => void;
 }
 
+/**
+ * NativePlayer Types - Lightweight HTML5 video player
+ */
+
+export interface NativePlayerProps {
+  /** Video source URL (MP4, WebM) */
+  src: string;
+  /** Poster/thumbnail image URL */
+  poster?: string;
+  /** Aspect ratio (default: 16/9) */
+  aspectRatio?: number;
+  /** Auto-play video (default: true) */
+  autoPlay?: boolean;
+  /** Mute video (default: true) */
+  muted?: boolean;
+  /** Loop video (default: true) */
+  loop?: boolean;
+  /** Play video inline on mobile (default: true) */
+  playsInline?: boolean;
+  /** Preload strategy (default: 'auto') */
+  preload?: 'auto' | 'metadata' | 'none';
+  /** Show native browser controls (default: false) */
+  controls?: boolean;
+  /** Disable right-click context menu (default: true) */
+  disableContextMenu?: boolean;
+  /** Show preloader while video loads (default: true) */
+  showPreloader?: boolean;
+  /** Preloader timeout in ms - hide even if not loaded (default: 5000) */
+  preloaderTimeout?: number;
+  /** Container className */
+  className?: string;
+  /** Video element className */
+  videoClassName?: string;
+  /** Preloader overlay className */
+  preloaderClassName?: string;
+  /** Event callbacks */
+  onLoadStart?: () => void;
+  onCanPlay?: () => void;
+  onPlaying?: () => void;
+  onEnded?: () => void;
+  onError?: (e: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
+}
+
+export interface NativePlayerRef {
+  /** Play video */
+  play: () => Promise<void> | undefined;
+  /** Pause video */
+  pause: () => void;
+  /** Current playback time in seconds */
+  currentTime: number;
+  /** Whether video is paused */
+  paused: boolean;
+  /** Direct access to video element */
+  element: HTMLVideoElement | null;
+}
+

package/src/tools/index.ts

@@ -39,5 +39,11 @@ export { default as OpenapiViewer } from './OpenapiViewer';
 export type { PlaygroundConfig, SchemaSource, PlaygroundProps } from './OpenapiViewer';
 
 // Export VideoPlayer
-export { VideoPlayer, VideoUrlError, VideoControls } from './VideoPlayer';
-export type { VideoSource, VideoPlayerProps, VideoPlayerRef } from './VideoPlayer';
+export { VideoPlayer, VideoUrlError, VideoControls, NativePlayer } from './VideoPlayer';
+export type {
+  VideoSource,
+  VideoPlayerProps,
+  VideoPlayerRef,
+  NativePlayerProps,
+  NativePlayerRef,
+} from './VideoPlayer';