@oalacea/chaosui 0.4.0 → 0.5.1

package/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/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/bin/cli.js

@@ -1,278 +0,0 @@
-#!/usr/bin/env node
-
-import { Command } from 'commander';
-import pc from 'picocolors';
-import prompts from 'prompts';
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const COMPONENTS_DIR = path.join(__dirname, '..', 'components');
-
-// Component registry
-const COMPONENTS = {
-  // Overlays
-  'noise-overlay': { category: 'overlays', description: 'SVG fractal noise texture overlay', status: 'ready' },
-  'scanlines': { category: 'overlays', description: 'CRT-style horizontal scanlines', status: 'ready' },
-  'vignette': { category: 'overlays', description: 'Dark edges radial gradient', status: 'ready' },
-  'static-flicker': { category: 'overlays', description: 'Animated noise with flicker effect', status: 'ready' },
-  
-  // Text effects
-  'glitch-text': { category: 'text', description: 'RGB split glitch text effect', status: 'ready' },
-  'flicker-text': { category: 'text', description: 'Text that flickers randomly', status: 'ready' },
-  'distortion-text': { category: 'text', description: 'Wave/shake/skew/blur text effects', status: 'ready' },
-  'falling-text': { category: 'text', description: 'Letters falling in cascade', status: 'ready' },
-  
-  // Buttons
-  'glitch-button': { category: 'buttons', description: 'Button with glitch hover effect', status: 'ready' },
-  'chaos-button': { category: 'buttons', description: 'Chaotic animated button with debris', status: 'ready' },
-  
-  // Backgrounds
-  'noise-canvas': { category: 'backgrounds', description: 'Animated noise canvas background', status: 'ready' },
-  'light-beams': { category: 'backgrounds', description: 'Vertical colored light beams', status: 'ready' },
-  'glow-orbs': { category: 'backgrounds', description: 'Floating blurred orbs', status: 'ready' },
-  'particle-field': { category: 'backgrounds', description: 'Drifting particle background', status: 'ready' },
-  
-  // Effects
-  'warning-tape': { category: 'effects', description: 'Scrolling warning tape banner', status: 'ready' },
-  'cursor-follower': { category: 'effects', description: 'Custom cursor with trail', status: 'ready' },
-  'screen-distortion': { category: 'effects', description: 'Full screen distortion effect', status: 'ready' },
-  'glowing-border': { category: 'effects', description: 'Glowing border container with pulse', status: 'ready' },
-  
-  // Neon components
-  'neon-button': { category: 'neon', description: 'Button with neon glow effect', status: 'ready' },
-  'neon-badge': { category: 'neon', description: 'Luminous status badges', status: 'ready' },
-  'neon-progress': { category: 'neon', description: 'Glowing progress bar with shimmer', status: 'ready' },
-  'neon-toggle': { category: 'neon', description: 'On/off switch with neon glow', status: 'ready' },
-  'neon-alert': { category: 'neon', description: 'Alert notifications with neon style', status: 'ready' },
-  'neon-tabs': { category: 'neon', description: 'Tab navigation with glow effect', status: 'ready' },
-  'neon-divider': { category: 'neon', description: 'Luminous section dividers', status: 'ready' },
-  
-  // Cyber components
-  'cyber-input': { category: 'cyber', description: 'Input with animated border glow', status: 'ready' },
-  'cyber-loader': { category: 'cyber', description: 'Futuristic spinners and loaders', status: 'ready' },
-  'cyber-modal': { category: 'cyber', description: 'Modal with scanlines and glow', status: 'ready' },
-  'cyber-avatar': { category: 'cyber', description: 'Avatar with neon border and status', status: 'ready' },
-  'cyber-slider': { category: 'cyber', description: 'Slider with neon track and thumb', status: 'ready' },
-  'cyber-tooltip': { category: 'cyber', description: 'Terminal-style tooltips', status: 'ready' },
-  
-  // Layout components
-  'hologram-card': { category: 'layout', description: 'Holographic card with scanlines', status: 'ready' },
-  'data-grid': { category: 'layout', description: 'Terminal-style data table', status: 'ready' },
-  
-  // Navigation
-  'hexagon-menu': { category: 'navigation', description: 'Honeycomb hexagon menu', status: 'ready' },
-  
-  // Effects (new)
-  'glitch-image': { category: 'effects', description: 'Image with RGB glitch on hover', status: 'ready' },
-};
-
-const program = new Command();
-
-program
-  .name('chaos-ui')
-  .description('Add glitch & noise components to your project')
-  .version('0.1.0');
-
-// LIST command
-program
-  .command('list')
-  .description('List all available components')
-  .action(() => {
-    console.log(pc.bold('\n🗡️  Chaos UI Components\n'));
-    
-    const categories = {};
-    for (const [name, info] of Object.entries(COMPONENTS)) {
-      if (!categories[info.category]) categories[info.category] = [];
-      categories[info.category].push({ name, ...info });
-    }
-    
-    for (const [category, components] of Object.entries(categories)) {
-      console.log(pc.cyan(`  ${category}/`));
-      for (const comp of components) {
-        console.log(`    ${pc.white(comp.name.padEnd(20))} ${pc.dim(comp.description)}`);
-      }
-      console.log();
-    }
-  });
-
-// ADD command
-program
-  .command('add [component]')
-  .description('Add a component to your project')
-  .option('-d, --dir <path>', 'Target directory', './components/chaos')
-  .option('-v, --variant <type>', 'Styling variant: css or tailwind', 'css')
-  .option('-y, --yes', 'Skip confirmation')
-  .action(async (componentName, options) => {
-    const variant = options.variant.toLowerCase();
-    if (!['css', 'tailwind'].includes(variant)) {
-      console.log(pc.red(`\n✗ Invalid variant "${variant}". Use 'css' or 'tailwind'.\n`));
-      return;
-    }
-
-    // If no component specified, show interactive picker
-    if (!componentName) {
-      const choices = Object.entries(COMPONENTS).map(([name, info]) => ({
-        title: name,
-        description: info.description,
-        value: name,
-      }));
-      
-      const response = await prompts([
-        {
-          type: 'autocomplete',
-          name: 'component',
-          message: 'Which component?',
-          choices,
-          suggest: (input, choices) => 
-            choices.filter(c => c.title.includes(input) || c.description.toLowerCase().includes(input.toLowerCase()))
-        },
-        {
-          type: 'select',
-          name: 'variant',
-          message: 'Styling variant?',
-          choices: [
-            { title: 'CSS Modules', value: 'css' },
-            { title: 'Tailwind', value: 'tailwind' },
-          ],
-          initial: variant === 'tailwind' ? 1 : 0,
-        }
-      ]);
-      
-      if (!response.component) {
-        console.log(pc.dim('Cancelled.'));
-        return;
-      }
-      componentName = response.component;
-      options.variant = response.variant || variant;
-    }
-    
-    // Validate component exists
-    if (!COMPONENTS[componentName]) {
-      console.log(pc.red(`\n✗ Component "${componentName}" not found.`));
-      console.log(pc.dim(`  Run ${pc.white('chaos-ui list')} to see available components.\n`));
-      return;
-    }
-    
-    const info = COMPONENTS[componentName];
-    const baseDir = path.join(COMPONENTS_DIR, info.category, componentName);
-    
-    // Check if component has variant subdirs or is legacy (flat structure)
-    const variantDir = path.join(baseDir, options.variant);
-    const hasVariants = fs.existsSync(path.join(baseDir, 'css')) || fs.existsSync(path.join(baseDir, 'tailwind'));
-    const sourceDir = hasVariants ? variantDir : baseDir;
-    const targetDir = path.resolve(options.dir, info.category);
-    
-    // Check source exists
-    if (!fs.existsSync(sourceDir)) {
-      if (hasVariants) {
-        console.log(pc.yellow(`\n⚠ Variant "${options.variant}" not available for "${componentName}".`));
-        const available = [];
-        if (fs.existsSync(path.join(baseDir, 'css'))) available.push('css');
-        if (fs.existsSync(path.join(baseDir, 'tailwind'))) available.push('tailwind');
-        console.log(pc.dim(`  Available variants: ${available.join(', ')}\n`));
-      } else {
-        console.log(pc.yellow(`\n⚠ Component "${componentName}" is not yet implemented.`));
-        console.log(pc.dim('  Coming soon!\n'));
-      }
-      return;
-    }
-    
-    // Confirm
-    if (!options.yes) {
-      const variantLabel = hasVariants ? ` (${pc.magenta(options.variant)})` : '';
-      const confirm = await prompts({
-        type: 'confirm',
-        name: 'value',
-        message: `Add ${pc.cyan(componentName)}${variantLabel} to ${pc.dim(targetDir)}?`,
-        initial: true,
-      });
-      
-      if (!confirm.value) {
-        console.log(pc.dim('Cancelled.'));
-        return;
-      }
-    }
-    
-    // Copy files
-    try {
-      await fs.ensureDir(targetDir);
-      await fs.copy(sourceDir, path.join(targetDir, componentName));
-      
-      console.log(pc.green(`\n✓ Added ${componentName}`) + (hasVariants ? pc.magenta(` (${options.variant})`) : ''));
-      console.log(pc.dim(`  → ${path.join(targetDir, componentName)}\n`));
-      
-      // Show usage hint
-      const pascalName = componentName
-        .split('-')
-        .map(s => s.charAt(0).toUpperCase() + s.slice(1))
-        .join('');
-      
-      console.log(pc.dim('  Import:'));
-      console.log(pc.white(`  import { ${pascalName} } from './components/chaos/${info.category}/${componentName}';\n`));
-      
-    } catch (err) {
-      console.log(pc.red(`\n✗ Failed to add component: ${err.message}\n`));
-    }
-  });
-
-// INIT command
-program
-  .command('init')
-  .description('Initialize chaos-ui in your project')
-  .action(async () => {
-    console.log(pc.bold('\n🗡️  Initializing Chaos UI...\n'));
-    
-    const response = await prompts([
-      {
-        type: 'select',
-        name: 'framework',
-        message: 'Framework?',
-        choices: [
-          { title: 'React', value: 'react' },
-          { title: 'Vue', value: 'vue' },
-          { title: 'Vanilla (HTML/CSS/JS)', value: 'vanilla' },
-        ],
-      },
-      {
-        type: 'select',
-        name: 'styling',
-        message: 'Styling?',
-        choices: [
-          { title: 'CSS Modules', value: 'css-modules' },
-          { title: 'Plain CSS', value: 'css' },
-          { title: 'Tailwind (with CSS vars)', value: 'tailwind' },
-        ],
-      },
-      {
-        type: 'text',
-        name: 'dir',
-        message: 'Components directory?',
-        initial: './components/chaos',
-      },
-    ]);
-    
-    if (!response.framework) {
-      console.log(pc.dim('Cancelled.'));
-      return;
-    }
-    
-    // Create config file
-    const config = {
-      framework: response.framework,
-      styling: response.styling,
-      componentsDir: response.dir,
-    };
-    
-    await fs.writeJson('./chaos-ui.json', config, { spaces: 2 });
-    await fs.ensureDir(response.dir);
-    
-    console.log(pc.green('\n✓ Initialized!'));
-    console.log(pc.dim(`  Config: ${pc.white('./chaos-ui.json')}`));
-    console.log(pc.dim(`  Components: ${pc.white(response.dir)}\n`));
-    console.log(pc.dim(`  Run ${pc.white('chaos-ui add <component>')} to add components.\n`));
-  });
-
-program.parse();

package/components/backgrounds/light-beams/index.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './light-beams.module.css';
-
-export interface LightBeamsProps extends HTMLAttributes<HTMLDivElement> {
-  /** Array of beam colors */
-  colors?: string[];
-  /** Number of beams */
-  count?: number;
-  /** Beam width in pixels */
-  beamWidth?: number;
-  /** Beam opacity (0-1) */
-  opacity?: number;
-  /** Animation duration range [min, max] in seconds */
-  durationRange?: [number, number];
-  /** Fixed or absolute positioning */
-  position?: 'fixed' | 'absolute';
-}
-
-export const LightBeams = forwardRef<HTMLDivElement, LightBeamsProps>(
-  (
-    {
-      colors = ['#7c3aed', '#06b6d4', '#ec4899', '#10b981', '#f59e0b'],
-      count = 5,
-      beamWidth = 2,
-      opacity = 0.15,
-      durationRange = [15, 25],
-      position = 'fixed',
-      className,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const beams = Array.from({ length: count }, (_, i) => {
-      const duration = durationRange[0] + Math.random() * (durationRange[1] - durationRange[0]);
-      const delay = Math.random() * -duration;
-      const color = colors[i % colors.length];
-      const positionX = ((i + 1) / (count + 1)) * 100;
-
-      return {
-        id: i,
-        duration,
-        delay,
-        color,
-        positionX,
-      };
-    });
-
-    return (
-      <div
-        ref={ref}
-        className={`${styles.container} ${className || ''}`}
-        style={{ position, ...style }}
-        aria-hidden="true"
-        {...props}
-      >
-        {beams.map((beam) => (
-          <div
-            key={beam.id}
-            className={styles.beam}
-            style={{
-              left: `${beam.positionX}%`,
-              width: beamWidth,
-              background: `linear-gradient(180deg, transparent, ${beam.color}, transparent)`,
-              opacity,
-              animationDuration: `${beam.duration}s`,
-              animationDelay: `${beam.delay}s`,
-            }}
-          />
-        ))}
-      </div>
-    );
-  }
-);
-
-LightBeams.displayName = 'LightBeams';
-
-export default LightBeams;

package/components/backgrounds/light-beams/light-beams.module.css

@@ -1,27 +0,0 @@
-.container {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.beam {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  filter: blur(1px);
-  animation: beam-move 20s ease-in-out infinite;
-}
-
-@keyframes beam-move {
-  0%, 100% {
-    transform: translateX(-50px) skewX(-5deg);
-    opacity: 0.1;
-  }
-  50% {
-    transform: translateX(50px) skewX(5deg);
-    opacity: 0.2;
-  }
-}

package/components/navigation/hexagon-menu/css/hexagon-menu.module.css

@@ -1,55 +0,0 @@
-.menu {
-  --hex-color: #00f0ff;
-  --hex-size: 5rem;
-  --hex-offset: 2.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  justify-content: center;
-}
-
-.cyan { --hex-color: #00f0ff; }
-.pink { --hex-color: #ff00ff; }
-.green { --hex-color: #00ff88; }
-.purple { --hex-color: #a855f7; }
-
-.sm { --hex-size: 3.75rem; --hex-offset: 1.875rem; }
-.md { --hex-size: 5rem; --hex-offset: 2.5rem; }
-.lg { --hex-size: 6.25rem; --hex-offset: 3.125rem; }
-
-.item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: var(--hex-size);
-  height: calc(var(--hex-size) * 1.1547);
-  padding: 0.5rem;
-  background: rgba(0, 0, 0, 0.6);
-  border: 2px solid var(--hex-color);
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.item:hover {
-  background: rgba(0, 240, 255, 0.2);
-  box-shadow: 0 0 20px var(--hex-color);
-  transform: scale(1.1);
-}
-
-.icon {
-  font-size: calc(var(--hex-size) / 3);
-  color: var(--hex-color);
-  margin-bottom: 0.25rem;
-}
-
-.label {
-  font-family: var(--font-display, 'Orbitron', sans-serif);
-  font-size: 0.5625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.0625em;
-  color: rgba(255, 255, 255, 0.9);
-  text-align: center;
-}

package/components/navigation/hexagon-menu/css/index.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './hexagon-menu.module.css';
-
-export interface HexagonMenuItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  onClick?: () => void;
-}
-
-export interface HexagonMenuProps extends HTMLAttributes<HTMLElement> {
-  items: HexagonMenuItem[];
-  variant?: 'cyan' | 'pink' | 'green' | 'purple';
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export const HexagonMenu = forwardRef<HTMLElement, HexagonMenuProps>(
-  ({ items, variant = 'cyan', size = 'md', className, ...props }, ref) => {
-    return (
-      <nav ref={ref} className={`${styles.menu} ${styles[variant]} ${styles[size]} ${className || ''}`} {...props}>
-        {items.map((item, i) => (
-          <button key={item.id} className={styles.item} onClick={item.onClick} style={{ marginTop: i % 2 === 1 ? 'var(--hex-offset)' : 0 }}>
-            {item.icon && <span className={styles.icon}>{item.icon}</span>}
-            <span className={styles.label}>{item.label}</span>
-          </button>
-        ))}
-      </nav>
-    );
-  }
-);
-
-HexagonMenu.displayName = 'HexagonMenu';
-export default HexagonMenu;