@oalacea/chaosui 0.4.0 → 0.5.0

package/components/text/terminal-output/css/terminal-output.module.css

@@ -0,0 +1,203 @@
+.container {
+  font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
+  background: #0a0a0a;
+  border: 1px solid #222;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* Header bar */
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: #111;
+  border-bottom: 1px solid #222;
+}
+
+.dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.dot.red { background: #ff5f56; }
+.dot.yellow { background: #ffbd2e; }
+.dot.green { background: #27c93f; }
+
+.title {
+  font-size: 0.75rem;
+  color: #666;
+  margin-left: auto;
+  letter-spacing: 0.05em;
+}
+
+/* Content area */
+.content {
+  padding: 1rem;
+  max-height: 400px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #333 #0a0a0a;
+}
+
+.content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: #0a0a0a;
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 3px;
+}
+
+/* Lines */
+.line {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+  line-height: 1.5;
+  font-size: 0.875rem;
+}
+
+.prompt {
+  color: #00ff00;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.command {
+  color: #fafafa;
+}
+
+.output {
+  color: #888;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Line types */
+.line.error .output { color: #ff0040; }
+.line.success .output { color: #00ff00; }
+.line.warning .output { color: #ffaa00; }
+.line.info .output { color: #00ffff; }
+
+/* Typing animation */
+.typing .command::after {
+  content: '█';
+  animation: blink 1s step-end infinite;
+  margin-left: 2px;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* Animated output */
+.animated .line {
+  opacity: 0;
+  animation: lineIn 0.3s forwards;
+}
+
+@keyframes lineIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Variants */
+.hacker {
+  border-color: #00ff00;
+}
+
+.hacker .header {
+  background: #001100;
+  border-color: #00ff0040;
+}
+
+.hacker .prompt { color: #00ff00; }
+.hacker .command { color: #00ff00; }
+.hacker .output { color: #00aa00; }
+
+.blood {
+  border-color: #ff0040;
+}
+
+.blood .header {
+  background: #110000;
+  border-color: #ff004040;
+}
+
+.blood .prompt { color: #ff0040; }
+.blood .command { color: #ff6666; }
+.blood .output { color: #aa4444; }
+
+.cyber {
+  border-color: #00ffff;
+}
+
+.cyber .header {
+  background: #001111;
+  border-color: #00ffff40;
+}
+
+.cyber .prompt { color: #00ffff; }
+.cyber .command { color: #88ffff; }
+.cyber .output { color: #00aaaa; }
+
+/* Scanlines overlay */
+.scanlines::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.1) 2px,
+    rgba(0, 0, 0, 0.1) 4px
+  );
+  pointer-events: none;
+}
+
+/* Glowing effect */
+.glowing .prompt,
+.glowing .command {
+  text-shadow: 0 0 5px currentColor;
+}
+
+/* Input line */
+.inputLine {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid #222;
+}
+
+.input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #fafafa;
+  font-family: inherit;
+  font-size: 0.875rem;
+  outline: none;
+  caret-color: #00ff00;
+}
+
+.input::placeholder {
+  color: #444;
+}

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

@@ -0,0 +1,174 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+
+export interface TerminalLine {
+  type: 'command' | 'output' | 'error' | 'success' | 'warning' | 'info';
+  content: string;
+  prompt?: string;
+  delay?: number;
+}
+
+export interface TerminalOutputProps extends HTMLAttributes<HTMLDivElement> {
+  lines: TerminalLine[];
+  prompt?: string;
+  variant?: 'default' | 'hacker' | 'blood' | 'cyber';
+  showHeader?: boolean;
+  title?: string;
+  animated?: boolean;
+  animationDelay?: number;
+  typingCursor?: boolean;
+  scanlines?: boolean;
+  glowing?: boolean;
+  showInput?: boolean;
+  inputPlaceholder?: string;
+  onCommand?: (command: string) => void;
+  autoScroll?: boolean;
+}
+
+const variantStyles = {
+  default: { border: 'border-gray-800', header: 'bg-gray-900', prompt: 'text-green-400', command: 'text-gray-100', output: 'text-gray-500' },
+  hacker: { border: 'border-green-500', header: 'bg-green-950', prompt: 'text-green-400', command: 'text-green-400', output: 'text-green-700' },
+  blood: { border: 'border-rose-500', header: 'bg-rose-950', prompt: 'text-rose-500', command: 'text-rose-300', output: 'text-rose-700' },
+  cyber: { border: 'border-cyan-500', header: 'bg-cyan-950', prompt: 'text-cyan-400', command: 'text-cyan-200', output: 'text-cyan-700' },
+};
+
+const typeColors = { error: 'text-rose-500', success: 'text-green-400', warning: 'text-amber-500', info: 'text-cyan-400' };
+
+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);
+    const styles = variantStyles[variant];
+
+    useEffect(() => {
+      if (animated) {
+        setVisibleLines(0);
+        let index = 0;
+        
+        const showLine = () => {
+          if (index < lines.length) {
+            const line = lines[index];
+            setTimeout(() => {
+              setVisibleLines(index + 1);
+              index++;
+              showLine();
+            }, line.delay ?? animationDelay);
+          }
+        };
+        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('');
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={`font-mono bg-[#0a0a0a] border ${styles.border} rounded overflow-hidden relative ${
+          scanlines ? 'after:absolute after:inset-0 after:bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.1)_2px,rgba(0,0,0,0.1)_4px)] after:pointer-events-none' : ''
+        } ${className}`}
+        {...props}
+      >
+        {showHeader && (
+          <div className={`flex items-center gap-2 px-4 py-3 ${styles.header} border-b border-gray-800`}>
+            <div className="flex gap-1.5">
+              <span className="w-3 h-3 rounded-full bg-red-500" />
+              <span className="w-3 h-3 rounded-full bg-yellow-500" />
+              <span className="w-3 h-3 rounded-full bg-green-500" />
+            </div>
+            <span className="ml-auto text-xs text-gray-600 tracking-wide">{title}</span>
+          </div>
+        )}
+        
+        <div ref={contentRef} className="p-4 max-h-[400px] overflow-y-auto scrollbar-thin scrollbar-track-[#0a0a0a] scrollbar-thumb-gray-700">
+          {lines.slice(0, visibleLines).map((line, i) => {
+            const isLastCommand = i === visibleLines - 1 && line.type === 'command' && typingCursor;
+            const outputColor = line.type !== 'command' && line.type !== 'output' ? typeColors[line.type] : styles.output;
+
+            return (
+              <div
+                key={i}
+                className={`flex gap-2 mb-1 leading-relaxed text-sm ${animated ? 'animate-[fadeInUp_0.3s_ease-out_forwards]' : ''}`}
+                style={animated ? { animationDelay: `${i * 50}ms`, opacity: 0 } : undefined}
+              >
+                {line.type === 'command' ? (
+                  <>
+                    <span className={`${styles.prompt} whitespace-nowrap select-none ${glowing ? 'drop-shadow-[0_0_5px_currentColor]' : ''}`}>
+                      {line.prompt || prompt}
+                    </span>
+                    <span className={`${styles.command} ${glowing ? 'drop-shadow-[0_0_5px_currentColor]' : ''}`}>
+                      {line.content}
+                      {isLastCommand && <span className="animate-pulse ml-0.5">█</span>}
+                    </span>
+                  </>
+                ) : (
+                  <span className={`${outputColor} whitespace-pre-wrap break-all`}>{line.content}</span>
+                )}
+              </div>
+            );
+          })}
+          
+          {showInput && (
+            <form onSubmit={handleSubmit} className="flex gap-2 mt-2 pt-2 border-t border-gray-800">
+              <span className={`${styles.prompt} ${glowing ? 'drop-shadow-[0_0_5px_currentColor]' : ''}`}>{prompt}</span>
+              <input
+                type="text"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                placeholder={inputPlaceholder}
+                className="flex-1 bg-transparent border-none text-gray-100 text-sm outline-none caret-green-400 placeholder:text-gray-700"
+                autoFocus
+              />
+            </form>
+          )}
+        </div>
+        
+        <style>{`
+          @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(5px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+        `}</style>
+      </div>
+    );
+  }
+);
+
+TerminalOutput.displayName = 'TerminalOutput';
+export default TerminalOutput;

package/components/text/typing-text/css/index.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useCallback } from 'react';
+import styles from './typing-text.module.css';
+
+export interface TypingTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+  /** Text to type out */
+  text: string;
+  /** Typing speed in ms per character */
+  speed?: number;
+  /** Delay before starting in ms */
+  delay?: number;
+  /** Show cursor */
+  showCursor?: boolean;
+  /** Cursor style */
+  cursorStyle?: 'block' | 'line' | 'underscore';
+  /** Visual variant */
+  variant?: 'default' | 'terminal' | 'hacker' | 'cyber' | 'ghost';
+  /** Loop the animation */
+  loop?: boolean;
+  /** Pause between loops in ms */
+  loopDelay?: number;
+  /** Delete speed when looping */
+  deleteSpeed?: number;
+  /** Callback when typing completes */
+  onComplete?: () => void;
+}
+
+export const TypingText = forwardRef<HTMLSpanElement, TypingTextProps>(
+  (
+    {
+      text,
+      speed = 50,
+      delay = 0,
+      showCursor = true,
+      cursorStyle = 'block',
+      variant = 'default',
+      loop = false,
+      loopDelay = 2000,
+      deleteSpeed = 30,
+      onComplete,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [displayText, setDisplayText] = useState('');
+    const [isTyping, setIsTyping] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const typeText = useCallback(() => {
+      setIsTyping(true);
+      let index = 0;
+      
+      const typeInterval = setInterval(() => {
+        if (index < text.length) {
+          setDisplayText(text.slice(0, index + 1));
+          index++;
+        } else {
+          clearInterval(typeInterval);
+          setIsTyping(false);
+          
+          if (loop) {
+            setTimeout(() => {
+              setIsDeleting(true);
+              let deleteIndex = text.length;
+              
+              const deleteInterval = setInterval(() => {
+                if (deleteIndex > 0) {
+                  setDisplayText(text.slice(0, deleteIndex - 1));
+                  deleteIndex--;
+                } else {
+                  clearInterval(deleteInterval);
+                  setIsDeleting(false);
+                  setTimeout(typeText, delay);
+                }
+              }, deleteSpeed);
+            }, loopDelay);
+          } else {
+            onComplete?.();
+          }
+        }
+      }, speed);
+
+      return () => clearInterval(typeInterval);
+    }, [text, speed, loop, loopDelay, deleteSpeed, delay, onComplete]);
+
+    useEffect(() => {
+      const timeout = setTimeout(typeText, delay);
+      return () => clearTimeout(timeout);
+    }, [typeText, delay]);
+
+    const containerClasses = [
+      styles.container,
+      variant !== 'default' && styles[variant],
+      className
+    ].filter(Boolean).join(' ');
+
+    const cursorClasses = [
+      styles.cursor,
+      styles[cursorStyle],
+      !isTyping && !isDeleting && !loop && styles.cursorHidden
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span ref={ref} className={containerClasses} {...props}>
+        <span className={styles.text}>{displayText}</span>
+        {showCursor && <span className={cursorClasses} />}
+      </span>
+    );
+  }
+);
+
+TypingText.displayName = 'TypingText';
+export default TypingText;

package/components/text/typing-text/css/typing-text.module.css

@@ -0,0 +1,84 @@
+.container {
+  display: inline-block;
+  font-family: 'Courier New', 'Monaco', monospace;
+  position: relative;
+}
+
+.text {
+  display: inline;
+  white-space: pre-wrap;
+}
+
+.cursor {
+  display: inline-block;
+  width: 0.6em;
+  height: 1.1em;
+  background: currentColor;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: blink 1s step-end infinite;
+}
+
+.cursor.block {
+  width: 0.6em;
+}
+
+.cursor.line {
+  width: 2px;
+}
+
+.cursor.underscore {
+  width: 0.6em;
+  height: 2px;
+  vertical-align: baseline;
+}
+
+.cursorHidden {
+  opacity: 0;
+}
+
+/* Variants */
+.terminal {
+  color: #00ff00;
+  text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff0080;
+}
+
+.terminal .cursor {
+  background: #00ff00;
+  box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff0080;
+}
+
+.hacker {
+  color: #ff0040;
+  text-shadow: 0 0 5px #ff0040, 0 0 15px #ff004080;
+}
+
+.hacker .cursor {
+  background: #ff0040;
+  box-shadow: 0 0 5px #ff0040;
+}
+
+.cyber {
+  color: #00ffff;
+  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff80;
+}
+
+.cyber .cursor {
+  background: #00ffff;
+  box-shadow: 0 0 5px #00ffff;
+}
+
+.ghost {
+  color: #888;
+  opacity: 0.8;
+}
+
+.ghost .cursor {
+  background: #888;
+  animation: blink 2s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}

package/components/text/typing-text/tailwind/index.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useCallback } from 'react';
+
+export interface TypingTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+  text: string;
+  speed?: number;
+  delay?: number;
+  showCursor?: boolean;
+  cursorStyle?: 'block' | 'line' | 'underscore';
+  variant?: 'default' | 'terminal' | 'hacker' | 'cyber' | 'ghost';
+  loop?: boolean;
+  loopDelay?: number;
+  deleteSpeed?: number;
+  onComplete?: () => void;
+}
+
+const variantStyles = {
+  default: '',
+  terminal: 'text-green-400 drop-shadow-[0_0_5px_#00ff00]',
+  hacker: 'text-rose-500 drop-shadow-[0_0_5px_#ff0040]',
+  cyber: 'text-cyan-400 drop-shadow-[0_0_5px_#00ffff]',
+  ghost: 'text-gray-500 opacity-80',
+};
+
+const cursorVariants = {
+  default: 'bg-current',
+  terminal: 'bg-green-400 shadow-[0_0_5px_#00ff00]',
+  hacker: 'bg-rose-500 shadow-[0_0_5px_#ff0040]',
+  cyber: 'bg-cyan-400 shadow-[0_0_5px_#00ffff]',
+  ghost: 'bg-gray-500',
+};
+
+const cursorSizes = {
+  block: 'w-[0.6em] h-[1.1em]',
+  line: 'w-0.5 h-[1.1em]',
+  underscore: 'w-[0.6em] h-0.5',
+};
+
+export const TypingText = forwardRef<HTMLSpanElement, TypingTextProps>(
+  (
+    {
+      text,
+      speed = 50,
+      delay = 0,
+      showCursor = true,
+      cursorStyle = 'block',
+      variant = 'default',
+      loop = false,
+      loopDelay = 2000,
+      deleteSpeed = 30,
+      onComplete,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const [displayText, setDisplayText] = useState('');
+    const [isTyping, setIsTyping] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const typeText = useCallback(() => {
+      setIsTyping(true);
+      let index = 0;
+      
+      const typeInterval = setInterval(() => {
+        if (index < text.length) {
+          setDisplayText(text.slice(0, index + 1));
+          index++;
+        } else {
+          clearInterval(typeInterval);
+          setIsTyping(false);
+          
+          if (loop) {
+            setTimeout(() => {
+              setIsDeleting(true);
+              let deleteIndex = text.length;
+              
+              const deleteInterval = setInterval(() => {
+                if (deleteIndex > 0) {
+                  setDisplayText(text.slice(0, deleteIndex - 1));
+                  deleteIndex--;
+                } else {
+                  clearInterval(deleteInterval);
+                  setIsDeleting(false);
+                  setTimeout(typeText, delay);
+                }
+              }, deleteSpeed);
+            }, loopDelay);
+          } else {
+            onComplete?.();
+          }
+        }
+      }, speed);
+
+      return () => clearInterval(typeInterval);
+    }, [text, speed, loop, loopDelay, deleteSpeed, delay, onComplete]);
+
+    useEffect(() => {
+      const timeout = setTimeout(typeText, delay);
+      return () => clearTimeout(timeout);
+    }, [typeText, delay]);
+
+    const showBlinkingCursor = isTyping || isDeleting || loop;
+
+    return (
+      <span
+        ref={ref}
+        className={`inline-block font-mono ${variantStyles[variant]} ${className}`}
+        {...props}
+      >
+        <span className="whitespace-pre-wrap">{displayText}</span>
+        {showCursor && (
+          <span
+            className={`inline-block ml-0.5 align-text-bottom ${cursorSizes[cursorStyle]} ${cursorVariants[variant]} ${
+              showBlinkingCursor ? 'animate-pulse' : 'opacity-0'
+            }`}
+          />
+        )}
+      </span>
+    );
+  }
+);
+
+TypingText.displayName = 'TypingText';
+export default TypingText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oalacea/chaosui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Glitch, noise, and distortion components for React. Copy-paste like shadcn.",
   "type": "module",
   "bin": {