@djangocfg/ui-nextjs 2.1.319 → 2.1.321

package/src/animations/MouseFollower.tsx

@@ -1,355 +0,0 @@
-'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: _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: _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: _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: _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: _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,5 +0,0 @@
-export { AnimatedBackground } from './AnimatedBackground';
-export type { BackgroundVariant } from './AnimatedBackground';
-
-export { MouseFollower } from './MouseFollower';
-export type { MouseFollowerVariant } from './MouseFollower';

package/src/blocks/ArticleCard.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-
-import {
-    Badge, ButtonLink, Card, CardContent, CardDescription, CardHeader, CardTitle
-} from '@djangocfg/ui-core/components';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-export type ArticleType = 'security' | 'release' | 'announcement' | 'feature';
-
-interface ArticleCardProps {
-  title: string;
-  description?: string;
-  date: string;
-  type: ArticleType;
-  href: string;
-  author?: string;
-  tags?: string[];
-  featured?: boolean;
-  className?: string;
-}
-
-const typeConfig: Record<ArticleType, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline'; icon: string }> = {
-  security: { label: 'Security', variant: 'destructive', icon: '🛡️' },
-  release: { label: 'Release', variant: 'default', icon: '📦' },
-  announcement: { label: 'Announcement', variant: 'secondary', icon: '📢' },
-  feature: { label: 'Feature', variant: 'outline', icon: '✨' },
-};
-
-export const ArticleCard: React.FC<ArticleCardProps> = ({
-  title,
-  description,
-  date,
-  type,
-  href,
-  author,
-  tags,
-  featured = false,
-  className,
-}) => {
-  const config = typeConfig[type];
-  const formattedDate = moment(date).format('MMMM D, YYYY');
-
-  return (
-    <Card className={cn(
-      'group relative overflow-hidden transition-all duration-200 hover:shadow-lg',
-      featured && 'border-primary/50 bg-primary/5',
-      className
-    )}>
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between gap-2 mb-2">
-          <div className="flex items-center gap-2">
-            <span className="text-lg">{config.icon}</span>
-            <Badge variant={config.variant}>{config.label}</Badge>
-          </div>
-          <time className="text-sm text-muted-foreground">{formattedDate}</time>
-        </div>
-        <CardTitle className="text-xl group-hover:text-primary transition-colors line-clamp-2">
-          <a href={href} className="hover:underline">
-            {title}
-          </a>
-        </CardTitle>
-        {description && (
-          <CardDescription className="line-clamp-2 mt-2">
-            {description}
-          </CardDescription>
-        )}
-      </CardHeader>
-
-      <CardContent className="pt-0">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            {author && (
-              <span className="text-sm text-muted-foreground">by {author}</span>
-            )}
-            {tags && tags.length > 0 && (
-              <div className="flex gap-1">
-                {tags.slice(0, 2).map((tag) => (
-                  <Badge key={tag} variant="outline" className="text-xs">
-                    {tag}
-                  </Badge>
-                ))}
-              </div>
-            )}
-          </div>
-          <ButtonLink href={href} variant="ghost" size="sm">
-            Read more →
-          </ButtonLink>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};

package/src/blocks/ArticleList.tsx

@@ -1,96 +0,0 @@
-import React, { useMemo } from 'react';
-import moment from 'moment';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { ArticleCard, ArticleType } from './ArticleCard';
-
-export interface Article {
-  title: string;
-  description?: string;
-  date: string;
-  type: ArticleType;
-  href: string;
-  author?: string;
-  tags?: string[];
-  featured?: boolean;
-}
-
-interface ArticleListProps {
-  articles: Article[];
-  title?: string;
-  description?: string;
-  showFeatured?: boolean;
-  columns?: 1 | 2 | 3;
-  className?: string;
-}
-
-export const ArticleList: React.FC<ArticleListProps> = ({
-  articles,
-  title,
-  description,
-  showFeatured = true,
-  columns = 2,
-  className,
-}) => {
-  // Sort by date, newest first, and separate featured/regular articles
-  const { featuredArticles, regularArticles } = useMemo(() => {
-    const sorted = [...articles].sort(
-      (a, b) => moment(b.date).valueOf() - moment(a.date).valueOf()
-    );
-    return {
-      featuredArticles: showFeatured ? sorted.filter((a) => a.featured) : [],
-      regularArticles: showFeatured ? sorted.filter((a) => !a.featured) : sorted,
-    };
-  }, [articles, showFeatured]);
-
-  const gridCols = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-  };
-
-  return (
-    <section className={cn('py-8', className)}>
-      {(title || description) && (
-        <div className="mb-8">
-          {title && (
-            <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
-          )}
-          {description && (
-            <p className="mt-2 text-lg text-muted-foreground">{description}</p>
-          )}
-        </div>
-      )}
-
-      {/* Featured Articles */}
-      {featuredArticles.length > 0 && (
-        <div className="mb-8">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
-            Featured
-          </h3>
-          <div className="grid gap-4">
-            {featuredArticles.map((article, index) => (
-              <ArticleCard key={index} {...article} featured />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Regular Articles */}
-      {regularArticles.length > 0 && (
-        <div className={cn('grid gap-4', gridCols[columns])}>
-          {regularArticles.map((article, index) => (
-            <ArticleCard key={index} {...article} />
-          ))}
-        </div>
-      )}
-
-      {articles.length === 0 && (
-        <div className="text-center py-12 text-muted-foreground">
-          No articles yet. Check back soon!
-        </div>
-      )}
-    </section>
-  );
-};

package/src/blocks/CTASection.tsx

@@ -1,136 +0,0 @@
-"use client"
-
-import Link from 'next/link';
-import React from 'react';
-
-import { Button } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-interface CTAButton {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-  size?: 'default' | 'sm' | 'lg' | 'icon';
-}
-
-interface CTASectionProps {
-  title: string;
-  subtitle?: string;
-  primaryCTA?: CTAButton;
-  secondaryCTA?: CTAButton;
-  background?: 'default' | 'muted' | 'primary' | 'gradient';
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export const CTASection: React.FC<CTASectionProps> = ({
-  title,
-  subtitle,
-  primaryCTA,
-  secondaryCTA,
-  background = 'default',
-  className,
-  children
-}) => {
-  // Simple Tailwind 4 classes - no custom utilities
-  const backgroundClasses = {
-    default: 'bg-background',
-    muted: 'bg-muted/30',
-    primary: 'bg-primary/5',
-    gradient: 'bg-gradient-to-b from-background via-primary/5 to-background',
-  };
-
-  return (
-    <section
-      className={cn(
-        'relative py-16 sm:py-20 md:py-24 lg:py-32',
-        backgroundClasses[background],
-        className
-      )}
-    >
-      {/* Simple decorative background - using only Tailwind classes */}
-      {background === 'gradient' && (
-        <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none" aria-hidden="true">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl aspect-square bg-primary/10 rounded-full blur-3xl" />
-        </div>
-      )}
-
-      <div className="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center space-y-6 sm:space-y-8">
-          {/* Title */}
-          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
-            {title}
-          </h2>
-
-          {/* Subtitle */}
-          {subtitle && (
-            <p className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-              {subtitle}
-            </p>
-          )}
-
-          {/* CTA Buttons */}
-          {(primaryCTA || secondaryCTA) && (
-            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center pt-4">
-              {primaryCTA && (
-                primaryCTA.onClick ? (
-                  <Button
-                    onClick={primaryCTA.onClick}
-                    variant={primaryCTA.variant || 'default'}
-                    size={primaryCTA.size || 'lg'}
-                    className="w-full sm:w-auto"
-                  >
-                    {primaryCTA.label}
-                  </Button>
-                ) : (
-                  <Button
-                    asChild
-                    variant={primaryCTA.variant || 'default'}
-                    size={primaryCTA.size || 'lg'}
-                    className="w-full sm:w-auto"
-                  >
-                    <Link href={primaryCTA.href || '#'}>
-                      {primaryCTA.label}
-                    </Link>
-                  </Button>
-                )
-              )}
-
-              {secondaryCTA && (
-                secondaryCTA.onClick ? (
-                  <Button
-                    onClick={secondaryCTA.onClick}
-                    variant={secondaryCTA.variant || 'outline'}
-                    size={secondaryCTA.size || 'lg'}
-                    className="w-full sm:w-auto"
-                  >
-                    {secondaryCTA.label}
-                  </Button>
-                ) : (
-                  <Button
-                    asChild
-                    variant={secondaryCTA.variant || 'outline'}
-                    size={secondaryCTA.size || 'lg'}
-                    className="w-full sm:w-auto"
-                  >
-                    <Link href={secondaryCTA.href || '#'}>
-                      {secondaryCTA.label}
-                    </Link>
-                  </Button>
-                )
-              )}
-            </div>
-          )}
-
-          {/* Optional children content */}
-          {children && (
-            <div className="pt-8 sm:pt-12">
-              {children}
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-};