@oalacea/chaosui 0.4.0 → 0.5.0

package/components/text/strike-reveal/css/index.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+import styles from './strike-reveal.module.css';
+
+export interface StrikeRevealProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Original text to strike through */
+  children: string;
+  /** Text to reveal after strike */
+  revealText?: string;
+  /** Visual variant */
+  variant?: 'permanent' | 'crossout' | 'redacted' | 'censored' | 'glitch';
+  /** Color variant */
+  color?: 'default' | 'blood' | 'cyber' | 'acid' | 'void';
+  /** Trigger mode */
+  trigger?: 'auto' | 'hover' | 'scroll' | 'click';
+  /** Delay before animation (ms) */
+  delay?: number;
+  /** Double strike line */
+  double?: boolean;
+  /** Custom strike color */
+  strikeColor?: string;
+  /** Callback when reveal completes */
+  onReveal?: () => void;
+}
+
+export const StrikeReveal = forwardRef<HTMLSpanElement, StrikeRevealProps>(
+  (
+    {
+      children,
+      revealText,
+      variant = 'permanent',
+      color = 'default',
+      trigger = 'auto',
+      delay = 0,
+      double = false,
+      strikeColor,
+      onReveal,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [isActive, setIsActive] = useState(false);
+    const containerRef = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+      if (trigger === 'auto') {
+        const timeout = setTimeout(() => {
+          setIsActive(true);
+          setTimeout(() => onReveal?.(), 700);
+        }, delay);
+        return () => clearTimeout(timeout);
+      }
+
+      if (trigger === 'scroll') {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting) {
+              setTimeout(() => {
+                setIsActive(true);
+                setTimeout(() => onReveal?.(), 700);
+              }, delay);
+            }
+          },
+          { threshold: 0.5 }
+        );
+
+        if (containerRef.current) {
+          observer.observe(containerRef.current);
+        }
+
+        return () => observer.disconnect();
+      }
+    }, [trigger, delay, onReveal]);
+
+    const handleClick = () => {
+      if (trigger === 'click') {
+        setIsActive(true);
+        setTimeout(() => onReveal?.(), 700);
+      }
+    };
+
+    const containerClasses = [
+      styles.container,
+      styles[variant],
+      color !== 'default' && styles[color],
+      double && styles.double,
+      trigger === 'hover' && styles.hover,
+      isActive && styles.active,
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLSpanElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={containerClasses}
+        style={{ 
+          '--strike-color': strikeColor,
+          '--delay': `${delay}ms`,
+          ...style 
+        } as React.CSSProperties}
+        onClick={handleClick}
+        {...props}
+      >
+        <span className={styles.text}>
+          {children}
+          <span className={styles.strike} />
+        </span>
+        {revealText && (
+          <span className={styles.revealed}>{revealText}</span>
+        )}
+      </span>
+    );
+  }
+);
+
+StrikeReveal.displayName = 'StrikeReveal';
+export default StrikeReveal;

package/components/text/strike-reveal/css/strike-reveal.module.css

@@ -0,0 +1,139 @@
+.container {
+  position: relative;
+  display: inline-block;
+}
+
+.text {
+  position: relative;
+  display: inline;
+}
+
+/* Strike line */
+.strike {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 0;
+  height: 2px;
+  background: currentColor;
+  transform: translateY(-50%);
+  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.container.active .strike {
+  width: 100%;
+}
+
+/* Hidden text that reveals */
+.revealed {
+  display: block;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+  transition-delay: 0.3s;
+  margin-top: 0.5em;
+}
+
+.container.active .revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Variant: strikethrough stays */
+.permanent .strike {
+  background: var(--strike-color, #ff0040);
+}
+
+.permanent.active .text {
+  opacity: 0.5;
+}
+
+/* Variant: text fades then reveals */
+.crossout .text {
+  transition: opacity 0.3s ease;
+}
+
+.crossout.active .text {
+  opacity: 0.3;
+}
+
+/* Variant: redacted style */
+.redacted .strike {
+  height: 1em;
+  background: var(--strike-color, #0a0a0a);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.redacted.active .text {
+  color: transparent;
+}
+
+/* Variant: censored with bars */
+.censored {
+  position: relative;
+}
+
+.censored .strike {
+  height: 100%;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--strike-color, #0a0a0a) 0px,
+    var(--strike-color, #0a0a0a) 8px,
+    transparent 8px,
+    transparent 12px
+  );
+  top: 0;
+  transform: none;
+}
+
+/* Variant: glitch strike */
+.glitch .strike {
+  background: var(--strike-color, #ff0040);
+  animation: none;
+}
+
+.glitch.active .strike {
+  animation: glitchStrike 0.5s ease forwards;
+}
+
+@keyframes glitchStrike {
+  0% { width: 0; transform: translateY(-50%); }
+  30% { width: 110%; transform: translateY(-50%) translateX(-5%); }
+  50% { width: 95%; transform: translateY(-50%) translateX(3%); }
+  70% { width: 102%; transform: translateY(-50%) translateX(-2%); }
+  100% { width: 100%; transform: translateY(-50%); }
+}
+
+/* Colors */
+.blood .strike { background: #ff0040; }
+.cyber .strike { background: #00ffff; }
+.acid .strike { background: #aaff00; }
+.void .strike { background: #0a0a0a; }
+
+/* Hover trigger */
+.hover:hover .strike {
+  width: 100%;
+}
+
+.hover:hover .revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Animation on scroll */
+.scroll .strike {
+  transition-delay: var(--delay, 0ms);
+}
+
+/* Double strike */
+.double .strike::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  width: 100%;
+  height: 2px;
+  background: inherit;
+  opacity: 0.5;
+}

package/components/text/strike-reveal/tailwind/index.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+
+export interface StrikeRevealProps extends HTMLAttributes<HTMLSpanElement> {
+  children: string;
+  revealText?: string;
+  variant?: 'permanent' | 'crossout' | 'redacted' | 'censored' | 'glitch';
+  color?: 'default' | 'blood' | 'cyber' | 'acid' | 'void';
+  trigger?: 'auto' | 'hover' | 'scroll' | 'click';
+  delay?: number;
+  double?: boolean;
+  strikeColor?: string;
+  onReveal?: () => void;
+}
+
+const colorStyles = {
+  default: 'bg-current',
+  blood: 'bg-rose-500',
+  cyber: 'bg-cyan-400',
+  acid: 'bg-lime-400',
+  void: 'bg-[#0a0a0a]',
+};
+
+export const StrikeReveal = forwardRef<HTMLSpanElement, StrikeRevealProps>(
+  (
+    {
+      children,
+      revealText,
+      variant = 'permanent',
+      color = 'default',
+      trigger = 'auto',
+      delay = 0,
+      double = false,
+      strikeColor,
+      onReveal,
+      className = '',
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [isActive, setIsActive] = useState(false);
+    const containerRef = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+      if (trigger === 'auto') {
+        const timeout = setTimeout(() => {
+          setIsActive(true);
+          setTimeout(() => onReveal?.(), 700);
+        }, delay);
+        return () => clearTimeout(timeout);
+      }
+
+      if (trigger === 'scroll') {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting) {
+              setTimeout(() => {
+                setIsActive(true);
+                setTimeout(() => onReveal?.(), 700);
+              }, delay);
+            }
+          },
+          { threshold: 0.5 }
+        );
+
+        if (containerRef.current) observer.observe(containerRef.current);
+        return () => observer.disconnect();
+      }
+    }, [trigger, delay, onReveal]);
+
+    const handleClick = () => {
+      if (trigger === 'click') {
+        setIsActive(true);
+        setTimeout(() => onReveal?.(), 700);
+      }
+    };
+
+    const handleMouseEnter = () => {
+      if (trigger === 'hover') setIsActive(true);
+    };
+
+    const handleMouseLeave = () => {
+      if (trigger === 'hover') setIsActive(false);
+    };
+
+    const strikeHeight = variant === 'redacted' ? 'h-[1em]' : variant === 'censored' ? 'h-full' : 'h-0.5';
+    const bgStyle = strikeColor ? { backgroundColor: strikeColor } : undefined;
+
+    return (
+      <span
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLSpanElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={`relative inline-block ${className}`}
+        style={style}
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <span className={`relative inline ${isActive && variant === 'crossout' ? 'opacity-30' : ''} ${isActive && variant === 'redacted' ? 'text-transparent' : ''} transition-opacity duration-300`}>
+          {children}
+          <span
+            className={`absolute left-0 top-1/2 -translate-y-1/2 ${strikeHeight} ${colorStyles[color]} transition-all duration-400 ease-out ${
+              isActive ? 'w-full' : 'w-0'
+            }`}
+            style={bgStyle}
+          />
+          {double && (
+            <span
+              className={`absolute left-0 top-1/2 translate-y-0.5 h-0.5 ${colorStyles[color]} opacity-50 transition-all duration-400 ease-out ${
+                isActive ? 'w-full' : 'w-0'
+              }`}
+              style={bgStyle}
+            />
+          )}
+        </span>
+        {revealText && (
+          <span
+            className={`block mt-2 transition-all duration-400 ease-out ${
+              isActive ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
+            }`}
+            style={{ transitionDelay: '300ms' }}
+          >
+            {revealText}
+          </span>
+        )}
+      </span>
+    );
+  }
+);
+
+StrikeReveal.displayName = 'StrikeReveal';
+export default StrikeReveal;

package/components/text/terminal-output/css/index.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+import styles from './terminal-output.module.css';
+
+export interface TerminalLine {
+  type: 'command' | 'output' | 'error' | 'success' | 'warning' | 'info';
+  content: string;
+  prompt?: string;
+  delay?: number;
+}
+
+export interface TerminalOutputProps extends HTMLAttributes<HTMLDivElement> {
+  /** Lines to display */
+  lines: TerminalLine[];
+  /** Default prompt string */
+  prompt?: string;
+  /** Visual variant */
+  variant?: 'default' | 'hacker' | 'blood' | 'cyber';
+  /** Show window header with dots */
+  showHeader?: boolean;
+  /** Window title */
+  title?: string;
+  /** Animate lines appearing */
+  animated?: boolean;
+  /** Base delay between animated lines (ms) */
+  animationDelay?: number;
+  /** Show typing cursor on last command */
+  typingCursor?: boolean;
+  /** Enable scanlines overlay */
+  scanlines?: boolean;
+  /** Enable glow effect */
+  glowing?: boolean;
+  /** Show interactive input */
+  showInput?: boolean;
+  /** Input placeholder */
+  inputPlaceholder?: string;
+  /** Callback when command is submitted */
+  onCommand?: (command: string) => void;
+  /** Auto-scroll to bottom */
+  autoScroll?: boolean;
+}
+
+export const TerminalOutput = forwardRef<HTMLDivElement, TerminalOutputProps>(
+  (
+    {
+      lines,
+      prompt = '❯',
+      variant = 'default',
+      showHeader = true,
+      title = 'terminal',
+      animated = false,
+      animationDelay = 100,
+      typingCursor = false,
+      scanlines = false,
+      glowing = false,
+      showInput = false,
+      inputPlaceholder = 'Type a command...',
+      onCommand,
+      autoScroll = true,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [visibleLines, setVisibleLines] = useState<number>(animated ? 0 : lines.length);
+    const [inputValue, setInputValue] = useState('');
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (animated) {
+        setVisibleLines(0);
+        let index = 0;
+        
+        const showLine = () => {
+          if (index < lines.length) {
+            const line = lines[index];
+            const delay = line.delay ?? animationDelay;
+            
+            setTimeout(() => {
+              setVisibleLines(index + 1);
+              index++;
+              showLine();
+            }, delay);
+          }
+        };
+        
+        showLine();
+      } else {
+        setVisibleLines(lines.length);
+      }
+    }, [lines, animated, animationDelay]);
+
+    useEffect(() => {
+      if (autoScroll && contentRef.current) {
+        contentRef.current.scrollTop = contentRef.current.scrollHeight;
+      }
+    }, [visibleLines, autoScroll]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      if (inputValue.trim()) {
+        onCommand?.(inputValue);
+        setInputValue('');
+      }
+    };
+
+    const containerClasses = [
+      styles.container,
+      styles[variant],
+      animated && styles.animated,
+      scanlines && styles.scanlines,
+      glowing && styles.glowing,
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        {showHeader && (
+          <div className={styles.header}>
+            <div className={styles.dots}>
+              <span className={`${styles.dot} ${styles.red}`} />
+              <span className={`${styles.dot} ${styles.yellow}`} />
+              <span className={`${styles.dot} ${styles.green}`} />
+            </div>
+            <span className={styles.title}>{title}</span>
+          </div>
+        )}
+        
+        <div ref={contentRef} className={styles.content}>
+          {lines.slice(0, visibleLines).map((line, i) => {
+            const isLastCommand = i === visibleLines - 1 && line.type === 'command' && typingCursor;
+            const lineClasses = [
+              styles.line,
+              line.type !== 'command' && line.type !== 'output' && styles[line.type]
+            ].filter(Boolean).join(' ');
+
+            return (
+              <div
+                key={i}
+                className={lineClasses}
+                style={animated ? { animationDelay: `${i * 50}ms` } : undefined}
+              >
+                {line.type === 'command' && (
+                  <>
+                    <span className={styles.prompt}>{line.prompt || prompt}</span>
+                    <span className={`${styles.command} ${isLastCommand ? styles.typing : ''}`}>
+                      {line.content}
+                    </span>
+                  </>
+                )}
+                {line.type !== 'command' && (
+                  <span className={styles.output}>{line.content}</span>
+                )}
+              </div>
+            );
+          })}
+          
+          {showInput && (
+            <form onSubmit={handleSubmit} className={styles.inputLine}>
+              <span className={styles.prompt}>{prompt}</span>
+              <input
+                type="text"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                placeholder={inputPlaceholder}
+                className={styles.input}
+                autoFocus
+              />
+            </form>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+TerminalOutput.displayName = 'TerminalOutput';
+export default TerminalOutput;