@oalacea/chaosui 0.4.0 → 0.5.1

package/text/countdown-display/css/index.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+import styles from './countdown-display.module.css';
+
+export interface CountdownDisplayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Target date/time or duration in seconds */
+  target: Date | number;
+  /** Display format */
+  format?: 'full' | 'hms' | 'ms' | 'dhms';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Visual variant */
+  variant?: 'default' | 'minimal' | 'neon' | 'brutal' | 'glitch';
+  /** Accent color */
+  accentColor?: string;
+  /** Show labels under numbers */
+  showLabels?: boolean;
+  /** Compact mode (less spacing) */
+  compact?: boolean;
+  /** Enable flip animation */
+  flip?: boolean;
+  /** Urgent mode threshold (seconds) - when to show urgency effect */
+  urgentThreshold?: number;
+  /** Callback when countdown reaches zero */
+  onComplete?: () => void;
+  /** Labels customization */
+  labels?: {
+    days?: string;
+    hours?: string;
+    minutes?: string;
+    seconds?: string;
+  };
+}
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+export const CountdownDisplay = forwardRef<HTMLDivElement, CountdownDisplayProps>(
+  (
+    {
+      target,
+      format = 'hms',
+      size = 'md',
+      variant = 'default',
+      accentColor = '#ff0040',
+      showLabels = true,
+      compact = false,
+      flip = false,
+      urgentThreshold = 60,
+      onComplete,
+      labels = {},
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+    const [isUrgent, setIsUrgent] = useState(false);
+    const [changing, setChanging] = useState<string[]>([]);
+    const prevValues = useRef<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+    const completedRef = useRef(false);
+
+    const defaultLabels = {
+      days: labels.days || 'DAYS',
+      hours: labels.hours || 'HOURS',
+      minutes: labels.minutes || 'MIN',
+      seconds: labels.seconds || 'SEC',
+    };
+
+    useEffect(() => {
+      const calculateTimeLeft = (): TimeLeft => {
+        let totalSeconds: number;
+        
+        if (target instanceof Date) {
+          totalSeconds = Math.max(0, Math.floor((target.getTime() - Date.now()) / 1000));
+        } else {
+          totalSeconds = Math.max(0, target);
+        }
+
+        return {
+          days: Math.floor(totalSeconds / (24 * 60 * 60)),
+          hours: Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60)),
+          minutes: Math.floor((totalSeconds % (60 * 60)) / 60),
+          seconds: totalSeconds % 60,
+        };
+      };
+
+      const tick = () => {
+        const newTime = calculateTimeLeft();
+        const totalSeconds = newTime.days * 86400 + newTime.hours * 3600 + newTime.minutes * 60 + newTime.seconds;
+        
+        // Detect changes for flip animation
+        if (flip) {
+          const changed: string[] = [];
+          if (newTime.days !== prevValues.current.days) changed.push('days');
+          if (newTime.hours !== prevValues.current.hours) changed.push('hours');
+          if (newTime.minutes !== prevValues.current.minutes) changed.push('minutes');
+          if (newTime.seconds !== prevValues.current.seconds) changed.push('seconds');
+          setChanging(changed);
+          setTimeout(() => setChanging([]), 300);
+        }
+
+        prevValues.current = newTime;
+        setTimeLeft(newTime);
+        setIsUrgent(totalSeconds <= urgentThreshold && totalSeconds > 0);
+
+        if (totalSeconds === 0 && !completedRef.current) {
+          completedRef.current = true;
+          onComplete?.();
+        }
+      };
+
+      tick();
+      const interval = setInterval(tick, 1000);
+      return () => clearInterval(interval);
+    }, [target, urgentThreshold, flip, onComplete]);
+
+    const pad = (num: number) => String(num).padStart(2, '0');
+
+    const containerClasses = [
+      styles.container,
+      styles[size],
+      styles[variant],
+      flip && styles.flip,
+      isUrgent && styles.urgent,
+      !showLabels && styles.hideLabels,
+      compact && styles.compact,
+      className
+    ].filter(Boolean).join(' ');
+
+    const renderBlock = (value: number, label: string, key: string) => (
+      <div className={styles.block} key={key}>
+        <span 
+          className={`${styles.value} ${changing.includes(key) ? styles.changing : ''}`}
+          data-value={pad(value)}
+        >
+          {pad(value)}
+        </span>
+        {showLabels && <span className={styles.label}>{label}</span>}
+      </div>
+    );
+
+    const renderSeparator = (key: number) => (
+      <span className={styles.separator} key={`sep-${key}`}>:</span>
+    );
+
+    const renderBlocks = () => {
+      const blocks = [];
+
+      if (format === 'dhms' || format === 'full') {
+        blocks.push(renderBlock(timeLeft.days, defaultLabels.days, 'days'));
+        blocks.push(renderSeparator(1));
+      }
+
+      if (format !== 'ms') {
+        blocks.push(renderBlock(timeLeft.hours, defaultLabels.hours, 'hours'));
+        blocks.push(renderSeparator(2));
+      }
+
+      blocks.push(renderBlock(timeLeft.minutes, defaultLabels.minutes, 'minutes'));
+      blocks.push(renderSeparator(3));
+      blocks.push(renderBlock(timeLeft.seconds, defaultLabels.seconds, 'seconds'));
+
+      return blocks;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={containerClasses}
+        style={{ 
+          '--accent-color': accentColor,
+          ...style 
+        } as React.CSSProperties}
+        {...props}
+      >
+        {renderBlocks()}
+      </div>
+    );
+  }
+);
+
+CountdownDisplay.displayName = 'CountdownDisplay';
+export default CountdownDisplay;

package/text/countdown-display/tailwind/index.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+
+export interface CountdownDisplayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  target: Date | number;
+  format?: 'full' | 'hms' | 'ms' | 'dhms';
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'minimal' | 'neon' | 'brutal' | 'glitch';
+  accentColor?: string;
+  showLabels?: boolean;
+  compact?: boolean;
+  flip?: boolean;
+  urgentThreshold?: number;
+  onComplete?: () => void;
+  labels?: { days?: string; hours?: string; minutes?: string; seconds?: string; };
+}
+
+interface TimeLeft { days: number; hours: number; minutes: number; seconds: number; }
+
+const sizeClasses = {
+  sm: { value: 'text-3xl md:text-5xl', separator: 'text-xl md:text-3xl', label: 'text-[0.5rem]' },
+  md: { value: 'text-5xl md:text-7xl', separator: 'text-3xl md:text-5xl', label: 'text-[0.6rem]' },
+  lg: { value: 'text-7xl md:text-9xl', separator: 'text-5xl md:text-7xl', label: 'text-[0.7rem]' },
+};
+
+export const CountdownDisplay = forwardRef<HTMLDivElement, CountdownDisplayProps>(
+  (
+    {
+      target,
+      format = 'hms',
+      size = 'md',
+      variant = 'default',
+      accentColor = '#ff0040',
+      showLabels = true,
+      compact = false,
+      flip = false,
+      urgentThreshold = 60,
+      onComplete,
+      labels = {},
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+    const [isUrgent, setIsUrgent] = useState(false);
+    const completedRef = useRef(false);
+
+    const defaultLabels = {
+      days: labels.days || 'DAYS', hours: labels.hours || 'HOURS',
+      minutes: labels.minutes || 'MIN', seconds: labels.seconds || 'SEC',
+    };
+
+    useEffect(() => {
+      const calculateTimeLeft = (): TimeLeft => {
+        let totalSeconds: number;
+        if (target instanceof Date) {
+          totalSeconds = Math.max(0, Math.floor((target.getTime() - Date.now()) / 1000));
+        } else {
+          totalSeconds = Math.max(0, target);
+        }
+        return {
+          days: Math.floor(totalSeconds / 86400),
+          hours: Math.floor((totalSeconds % 86400) / 3600),
+          minutes: Math.floor((totalSeconds % 3600) / 60),
+          seconds: totalSeconds % 60,
+        };
+      };
+
+      const tick = () => {
+        const newTime = calculateTimeLeft();
+        const totalSeconds = newTime.days * 86400 + newTime.hours * 3600 + newTime.minutes * 60 + newTime.seconds;
+        setTimeLeft(newTime);
+        setIsUrgent(totalSeconds <= urgentThreshold && totalSeconds > 0);
+        if (totalSeconds === 0 && !completedRef.current) {
+          completedRef.current = true;
+          onComplete?.();
+        }
+      };
+
+      tick();
+      const interval = setInterval(tick, 1000);
+      return () => clearInterval(interval);
+    }, [target, urgentThreshold, onComplete]);
+
+    const pad = (num: number) => String(num).padStart(2, '0');
+    const { value: valueClass, separator: sepClass, label: labelClass } = sizeClasses[size];
+
+    const getValueStyle = () => {
+      switch (variant) {
+        case 'neon':
+          return { color: accentColor, textShadow: `0 0 10px ${accentColor}, 0 0 20px ${accentColor}, 0 0 40px ${accentColor}` };
+        case 'brutal':
+          return { background: accentColor, color: '#0a0a0a', padding: '0 0.25em', WebkitTextFillColor: '#0a0a0a' };
+        case 'minimal':
+          return { color: '#fafafa' };
+        default:
+          return { background: 'linear-gradient(180deg, #fafafa 0%, #888 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' };
+      }
+    };
+
+    const renderBlock = (value: number, label: string) => (
+      <div className="flex flex-col items-center relative">
+        <span
+          className={`${valueClass} font-extrabold leading-none tracking-tight ${isUrgent ? 'animate-pulse' : ''}`}
+          style={getValueStyle()}
+        >
+          {pad(value)}
+        </span>
+        {showLabels && (
+          <span className={`${labelClass} tracking-[0.3em] text-gray-600 mt-2 uppercase font-normal`}>
+            {label}
+          </span>
+        )}
+      </div>
+    );
+
+    const renderSeparator = (key: number) => (
+      <span
+        key={`sep-${key}`}
+        className={`${sepClass} font-extrabold text-gray-700 animate-pulse self-start mt-2`}
+        style={variant === 'neon' ? { color: accentColor, textShadow: `0 0 10px ${accentColor}` } : undefined}
+      >
+        :
+      </span>
+    );
+
+    const blocks = [];
+    if (format === 'dhms' || format === 'full') {
+      blocks.push(<div key="days">{renderBlock(timeLeft.days, defaultLabels.days)}</div>);
+      blocks.push(renderSeparator(1));
+    }
+    if (format !== 'ms') {
+      blocks.push(<div key="hours">{renderBlock(timeLeft.hours, defaultLabels.hours)}</div>);
+      blocks.push(renderSeparator(2));
+    }
+    blocks.push(<div key="minutes">{renderBlock(timeLeft.minutes, defaultLabels.minutes)}</div>);
+    blocks.push(renderSeparator(3));
+    blocks.push(<div key="seconds">{renderBlock(timeLeft.seconds, defaultLabels.seconds)}</div>);
+
+    return (
+      <div
+        ref={ref}
+        className={`flex items-center justify-center ${compact ? 'gap-2' : 'gap-4 md:gap-8'} font-sans ${className}`}
+        {...props}
+      >
+        {blocks}
+      </div>
+    );
+  }
+);
+
+CountdownDisplay.displayName = 'CountdownDisplay';
+export default CountdownDisplay;

package/text/giant-layers/css/giant-layers.module.css

@@ -0,0 +1,156 @@
+.container {
+  position: relative;
+  display: inline-block;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.layer {
+  display: block;
+  position: relative;
+}
+
+.layer:not(:first-child) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+/* Base layer styling */
+.base {
+  background: linear-gradient(180deg, #fafafa 0%, #888 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Shadow layers */
+.shadow1 {
+  transform: translate(4px, 4px);
+  z-index: -1;
+  opacity: 0.5;
+  background: linear-gradient(180deg, #ff0040 0%, #ff004080 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.shadow2 {
+  transform: translate(8px, 8px);
+  z-index: -2;
+  opacity: 0.3;
+  background: linear-gradient(180deg, #ff0040 0%, #ff004040 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.shadow3 {
+  transform: translate(12px, 12px);
+  z-index: -3;
+  opacity: 0.15;
+  background: linear-gradient(180deg, #ff0040 0%, #ff004020 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Variants */
+.blood .shadow1,
+.blood .shadow2,
+.blood .shadow3 {
+  background: linear-gradient(180deg, #ff0040 0%, transparent 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.cyber .shadow1 { background: linear-gradient(180deg, #00ffff 0%, transparent 100%); -webkit-background-clip: text; background-clip: text; }
+.cyber .shadow2 { background: linear-gradient(180deg, #ff00ff 0%, transparent 100%); -webkit-background-clip: text; background-clip: text; }
+.cyber .shadow3 { background: linear-gradient(180deg, #00ff00 0%, transparent 100%); -webkit-background-clip: text; background-clip: text; }
+
+.mono .base,
+.mono .shadow1,
+.mono .shadow2,
+.mono .shadow3 {
+  background: none;
+  -webkit-text-fill-color: currentColor;
+}
+.mono .shadow1 { color: #666; }
+.mono .shadow2 { color: #444; }
+.mono .shadow3 { color: #222; }
+
+.neon .base {
+  color: #fff;
+  -webkit-text-fill-color: #fff;
+  text-shadow: 0 0 10px #ff0040, 0 0 20px #ff0040, 0 0 40px #ff0040;
+}
+.neon .shadow1,
+.neon .shadow2,
+.neon .shadow3 {
+  opacity: 0;
+}
+
+/* Animated variant */
+.animated .shadow1 {
+  animation: layerFloat1 3s ease-in-out infinite;
+}
+
+.animated .shadow2 {
+  animation: layerFloat2 4s ease-in-out infinite;
+}
+
+.animated .shadow3 {
+  animation: layerFloat3 5s ease-in-out infinite;
+}
+
+@keyframes layerFloat1 {
+  0%, 100% { transform: translate(4px, 4px); }
+  50% { transform: translate(6px, 6px); }
+}
+
+@keyframes layerFloat2 {
+  0%, 100% { transform: translate(8px, 8px); }
+  50% { transform: translate(12px, 10px); }
+}
+
+@keyframes layerFloat3 {
+  0%, 100% { transform: translate(12px, 12px); }
+  50% { transform: translate(16px, 14px); }
+}
+
+/* Hover effect */
+.hover:hover .shadow1 {
+  transform: translate(8px, 8px);
+  transition: transform 0.3s ease;
+}
+
+.hover:hover .shadow2 {
+  transform: translate(16px, 16px);
+  transition: transform 0.3s ease;
+}
+
+.hover:hover .shadow3 {
+  transform: translate(24px, 24px);
+  transition: transform 0.3s ease;
+}
+
+/* Sizes */
+.sm { font-size: clamp(2rem, 8vw, 4rem); }
+.md { font-size: clamp(4rem, 15vw, 8rem); }
+.lg { font-size: clamp(6rem, 20vw, 12rem); }
+.xl { font-size: clamp(8rem, 25vw, 18rem); }
+
+/* Offset directions */
+.diagonal .shadow1 { transform: translate(4px, 4px); }
+.diagonal .shadow2 { transform: translate(8px, 8px); }
+.diagonal .shadow3 { transform: translate(12px, 12px); }
+
+.horizontal .shadow1 { transform: translateX(4px); }
+.horizontal .shadow2 { transform: translateX(8px); }
+.horizontal .shadow3 { transform: translateX(12px); }
+
+.vertical .shadow1 { transform: translateY(4px); }
+.vertical .shadow2 { transform: translateY(8px); }
+.vertical .shadow3 { transform: translateY(12px); }

package/text/giant-layers/css/index.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './giant-layers.module.css';
+
+export interface GiantLayersProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Text to display */
+  children: string;
+  /** Number of shadow layers (1-3) */
+  layers?: 1 | 2 | 3;
+  /** Size preset */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Visual variant */
+  variant?: 'blood' | 'cyber' | 'mono' | 'neon';
+  /** Shadow offset direction */
+  direction?: 'diagonal' | 'horizontal' | 'vertical';
+  /** Animate layers */
+  animated?: boolean;
+  /** Expand on hover */
+  hover?: boolean;
+  /** Custom layer colors */
+  layerColors?: [string, string?, string?];
+}
+
+export const GiantLayers = forwardRef<HTMLSpanElement, GiantLayersProps>(
+  (
+    {
+      children,
+      layers = 3,
+      size = 'lg',
+      variant = 'blood',
+      direction = 'diagonal',
+      animated = false,
+      hover = false,
+      layerColors,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const containerClasses = [
+      styles.container,
+      styles[size],
+      styles[variant],
+      styles[direction],
+      animated && styles.animated,
+      hover && styles.hover,
+      className
+    ].filter(Boolean).join(' ');
+
+    const getLayerStyle = (index: number) => {
+      if (layerColors && layerColors[index]) {
+        return {
+          background: `linear-gradient(180deg, ${layerColors[index]} 0%, transparent 100%)`,
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          backgroundClip: 'text',
+        };
+      }
+      return undefined;
+    };
+
+    return (
+      <span
+        ref={ref}
+        className={containerClasses}
+        style={style}
+        {...props}
+      >
+        {/* Shadow layers */}
+        {layers >= 3 && (
+          <span className={`${styles.layer} ${styles.shadow3}`} style={getLayerStyle(2)} aria-hidden>
+            {children}
+          </span>
+        )}
+        {layers >= 2 && (
+          <span className={`${styles.layer} ${styles.shadow2}`} style={getLayerStyle(1)} aria-hidden>
+            {children}
+          </span>
+        )}
+        {layers >= 1 && (
+          <span className={`${styles.layer} ${styles.shadow1}`} style={getLayerStyle(0)} aria-hidden>
+            {children}
+          </span>
+        )}
+        {/* Base layer */}
+        <span className={`${styles.layer} ${styles.base}`}>
+          {children}
+        </span>
+      </span>
+    );
+  }
+);
+
+GiantLayers.displayName = 'GiantLayers';
+export default GiantLayers;

package/text/giant-layers/tailwind/index.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface GiantLayersProps extends HTMLAttributes<HTMLSpanElement> {
+  children: string;
+  layers?: 1 | 2 | 3;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'blood' | 'cyber' | 'mono' | 'neon';
+  direction?: 'diagonal' | 'horizontal' | 'vertical';
+  animated?: boolean;
+  hover?: boolean;
+  layerColors?: [string, string?, string?];
+}
+
+const sizeClasses = {
+  sm: 'text-4xl md:text-6xl',
+  md: 'text-6xl md:text-8xl',
+  lg: 'text-7xl md:text-9xl',
+  xl: 'text-8xl md:text-[12rem]',
+};
+
+const variantStyles = {
+  blood: {
+    base: 'bg-gradient-to-b from-white to-gray-500 bg-clip-text text-transparent',
+    shadow: 'text-rose-500',
+  },
+  cyber: {
+    base: 'bg-gradient-to-b from-white to-gray-500 bg-clip-text text-transparent',
+    shadow: 'text-cyan-400',
+  },
+  mono: {
+    base: 'text-white',
+    shadow: 'text-gray-600',
+  },
+  neon: {
+    base: 'text-white drop-shadow-[0_0_10px_#ff0040] drop-shadow-[0_0_20px_#ff0040]',
+    shadow: 'text-transparent',
+  },
+};
+
+const getOffset = (direction: string, layer: number) => {
+  const px = (layer + 1) * 4;
+  switch (direction) {
+    case 'horizontal': return { transform: `translateX(${px}px)` };
+    case 'vertical': return { transform: `translateY(${px}px)` };
+    default: return { transform: `translate(${px}px, ${px}px)` };
+  }
+};
+
+export const GiantLayers = forwardRef<HTMLSpanElement, GiantLayersProps>(
+  (
+    {
+      children,
+      layers = 3,
+      size = 'lg',
+      variant = 'blood',
+      direction = 'diagonal',
+      animated = false,
+      hover = false,
+      layerColors,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const { base, shadow } = variantStyles[variant];
+    const opacities = [0.5, 0.3, 0.15];
+
+    return (
+      <span
+        ref={ref}
+        className={`relative inline-block font-extrabold leading-none tracking-tight ${sizeClasses[size]} ${
+          hover ? 'group' : ''
+        } ${className}`}
+        {...props}
+      >
+        {/* Shadow layers */}
+        {[...Array(layers)].map((_, i) => {
+          const layerIndex = layers - 1 - i;
+          const colorStyle = layerColors?.[layerIndex] 
+            ? { color: layerColors[layerIndex] }
+            : undefined;
+          
+          return (
+            <span
+              key={i}
+              className={`absolute top-0 left-0 pointer-events-none ${shadow} ${
+                animated ? 'animate-pulse' : ''
+              } ${hover ? 'transition-transform duration-300 group-hover:translate-x-6 group-hover:translate-y-6' : ''}`}
+              style={{
+                ...getOffset(direction, layerIndex),
+                opacity: opacities[layerIndex],
+                zIndex: -(layerIndex + 1),
+                ...colorStyle,
+              }}
+              aria-hidden
+            >
+              {children}
+            </span>
+          );
+        })}
+        {/* Base layer */}
+        <span className={`relative ${base}`}>{children}</span>
+      </span>
+    );
+  }
+);
+
+GiantLayers.displayName = 'GiantLayers';
+export default GiantLayers;