@oalacea/chaosui 0.1.0 → 0.4.0

package/components/neon/neon-toggle/css/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+import styles from './neon-toggle.module.css';
+
+export interface NeonToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  /** Current checked state */
+  checked: boolean;
+  /** Change callback */
+  onChange: (checked: boolean) => void;
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  /** Toggle size */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const NeonToggle = forwardRef<HTMLButtonElement, NeonToggleProps>(
+  (
+    {
+      checked,
+      onChange,
+      variant = 'cyan',
+      size = 'md',
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.toggle,
+      styles[variant],
+      styles[size],
+      checked && styles.checked,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        className={classes}
+        onClick={() => !disabled && onChange(!checked)}
+        {...props}
+      >
+        <span className={styles.track} />
+        <span className={styles.thumb} />
+      </button>
+    );
+  }
+);
+
+NeonToggle.displayName = 'NeonToggle';
+
+export default NeonToggle;

package/components/neon/neon-toggle/css/neon-toggle.module.css

@@ -0,0 +1,79 @@
+.toggle {
+  --toggle-color: #00f0ff;
+  --toggle-width: 3.25rem;
+  --toggle-height: 1.75rem;
+  --thumb-size: 1.25rem;
+  
+  position: relative;
+  width: var(--toggle-width);
+  height: var(--toggle-height);
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+/* Sizes */
+.sm {
+  --toggle-width: 2.5rem;
+  --toggle-height: 1.375rem;
+  --thumb-size: 1rem;
+}
+
+.lg {
+  --toggle-width: 4rem;
+  --toggle-height: 2.125rem;
+  --thumb-size: 1.625rem;
+}
+
+/* Variants */
+.cyan { --toggle-color: #00f0ff; }
+.pink { --toggle-color: #ff00ff; }
+.green { --toggle-color: #00ff88; }
+.purple { --toggle-color: #a855f7; }
+
+.track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--toggle-height);
+  transition: all 0.3s ease;
+}
+
+.checked .track {
+  background: rgba(0, 240, 255, 0.2);
+  border-color: var(--toggle-color);
+  box-shadow: 0 0 10px var(--toggle-color), inset 0 0 10px rgba(0, 240, 255, 0.1);
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  left: 0.25rem;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: #666;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: all 0.3s ease;
+}
+
+.checked .thumb {
+  left: calc(100% - var(--thumb-size) - 0.25rem);
+  background: var(--toggle-color);
+  box-shadow: 0 0 10px var(--toggle-color), 0 0 20px var(--toggle-color);
+}
+
+.toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toggle:focus-visible .track {
+  outline: 2px solid var(--toggle-color);
+  outline-offset: 2px;
+}

package/components/neon/neon-toggle/tailwind/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+
+export interface NeonToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeStyles = {
+  sm: { track: 'w-10 h-5', thumb: 'w-4 h-4', translate: 'translate-x-5' },
+  md: { track: 'w-[52px] h-7', thumb: 'w-5 h-5', translate: 'translate-x-6' },
+  lg: { track: 'w-16 h-8', thumb: 'w-6 h-6', translate: 'translate-x-8' },
+};
+
+const variantStyles = {
+  cyan: { active: 'bg-cyan-400/20 border-cyan-400 shadow-[0_0_10px_#00f0ff]', thumb: 'bg-cyan-400 shadow-[0_0_10px_#00f0ff]' },
+  pink: { active: 'bg-fuchsia-500/20 border-fuchsia-500 shadow-[0_0_10px_#ff00ff]', thumb: 'bg-fuchsia-500 shadow-[0_0_10px_#ff00ff]' },
+  green: { active: 'bg-emerald-400/20 border-emerald-400 shadow-[0_0_10px_#00ff88]', thumb: 'bg-emerald-400 shadow-[0_0_10px_#00ff88]' },
+  purple: { active: 'bg-purple-500/20 border-purple-500 shadow-[0_0_10px_#a855f7]', thumb: 'bg-purple-500 shadow-[0_0_10px_#a855f7]' },
+};
+
+export const NeonToggle = forwardRef<HTMLButtonElement, NeonToggleProps>(
+  ({ checked, onChange, variant = 'cyan', size = 'md', disabled = false, className = '', ...props }, ref) => {
+    const sizes = sizeStyles[size];
+    const colors = variantStyles[variant];
+    
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        className={`
+          relative ${sizes.track} rounded-full border transition-all duration-300
+          ${checked ? colors.active : 'bg-white/10 border-white/20'}
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          ${className}
+        `}
+        onClick={() => !disabled && onChange(!checked)}
+        {...props}
+      >
+        <span className={`
+          absolute top-1/2 left-1 -translate-y-1/2
+          ${sizes.thumb} rounded-full transition-all duration-300
+          ${checked ? `${sizes.translate} ${colors.thumb}` : 'bg-gray-500'}
+        `} />
+      </button>
+    );
+  }
+);
+
+NeonToggle.displayName = 'NeonToggle';
+export default NeonToggle;

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

@@ -1,8 +1,8 @@
 .glitch {
   position: relative;
   display: inline-block;
-  --glitch-color: #ff0040;
-  --glitch-color-alt: #00ffff;
+  --glitch-color: hsl(var(--primary, 347 100% 50%));
+  --glitch-color-alt: hsl(var(--secondary, 180 100% 50%));
 }
 
 .glitch::before,

package/package.json

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

package/components/glow-orbs/glow-orbs.module.css

@@ -1,31 +0,0 @@
-.container {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.orb {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0.3;
-  transform: translate(-50%, -50%);
-  animation: float 20s ease-in-out infinite;
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translate(-50%, -50%) translate(0, 0);
-  }
-  25% {
-    transform: translate(-50%, -50%) translate(30px, -40px);
-  }
-  50% {
-    transform: translate(-50%, -50%) translate(-20px, 20px);
-  }
-  75% {
-    transform: translate(-50%, -50%) translate(40px, 30px);
-  }
-}

package/components/glow-orbs/index.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes } from 'react';
-import styles from './glow-orbs.module.css';
-
-export interface GlowOrbsProps extends HTMLAttributes<HTMLDivElement> {
-  /** Array of orb colors (will cycle through) */
-  colors?: string[];
-  /** Number of orbs */
-  count?: number;
-  /** Orb size range [min, max] in pixels */
-  sizeRange?: [number, number];
-  /** Blur amount in pixels */
-  blur?: number;
-  /** Animation duration range [min, max] in seconds */
-  durationRange?: [number, number];
-  /** Fixed or absolute positioning */
-  position?: 'fixed' | 'absolute';
-}
-
-export const GlowOrbs = forwardRef<HTMLDivElement, GlowOrbsProps>(
-  (
-    {
-      colors = ['#7c3aed', '#06b6d4', '#ec4899', '#10b981'],
-      count = 5,
-      sizeRange = [100, 300],
-      blur = 80,
-      durationRange = [15, 25],
-      position = 'fixed',
-      className,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    // Generate random orbs
-    const orbs = Array.from({ length: count }, (_, i) => {
-      const size = sizeRange[0] + Math.random() * (sizeRange[1] - sizeRange[0]);
-      const duration = durationRange[0] + Math.random() * (durationRange[1] - durationRange[0]);
-      const delay = Math.random() * -duration;
-      const color = colors[i % colors.length];
-      const startX = Math.random() * 100;
-      const startY = Math.random() * 100;
-
-      return {
-        id: i,
-        size,
-        duration,
-        delay,
-        color,
-        startX,
-        startY,
-      };
-    });
-
-    return (
-      <div
-        ref={ref}
-        className={`${styles.container} ${className || ''}`}
-        style={{ position, ...style }}
-        aria-hidden="true"
-        {...props}
-      >
-        {orbs.map((orb) => (
-          <div
-            key={orb.id}
-            className={styles.orb}
-            style={{
-              width: orb.size,
-              height: orb.size,
-              background: orb.color,
-              filter: `blur(${blur}px)`,
-              left: `${orb.startX}%`,
-              top: `${orb.startY}%`,
-              animationDuration: `${orb.duration}s`,
-              animationDelay: `${orb.delay}s`,
-            }}
-          />
-        ))}
-      </div>
-    );
-  }
-);
-
-GlowOrbs.displayName = 'GlowOrbs';
-
-export default GlowOrbs;

package/components/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/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/noise-canvas/index.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import { useEffect, useRef, forwardRef, HTMLAttributes } from 'react';
-import styles from './noise-canvas.module.css';
-
-export interface NoiseCanvasProps extends HTMLAttributes<HTMLCanvasElement> {
-  /** Noise opacity (0-1) */
-  opacity?: number;
-  /** Animation speed (fps) */
-  fps?: number;
-  /** Noise intensity (0-255) */
-  intensity?: number;
-  /** Monochrome or colored noise */
-  monochrome?: boolean;
-  /** Fixed or absolute positioning */
-  position?: 'fixed' | 'absolute';
-}
-
-export const NoiseCanvas = forwardRef<HTMLCanvasElement, NoiseCanvasProps>(
-  (
-    {
-      opacity = 0.05,
-      fps = 24,
-      intensity = 50,
-      monochrome = true,
-      position = 'fixed',
-      className,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const animationRef = useRef<number>();
-
-    useEffect(() => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return;
-
-      const resize = () => {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-      };
-
-      resize();
-      window.addEventListener('resize', resize);
-
-      let lastFrame = 0;
-      const frameInterval = 1000 / fps;
-
-      const render = (timestamp: number) => {
-        if (timestamp - lastFrame >= frameInterval) {
-          const imageData = ctx.createImageData(canvas.width, canvas.height);
-          const data = imageData.data;
-
-          for (let i = 0; i < data.length; i += 4) {
-            const value = Math.random() * intensity;
-            
-            if (monochrome) {
-              data[i] = value;
-              data[i + 1] = value;
-              data[i + 2] = value;
-            } else {
-              data[i] = Math.random() * intensity;
-              data[i + 1] = Math.random() * intensity;
-              data[i + 2] = Math.random() * intensity;
-            }
-            data[i + 3] = 255;
-          }
-
-          ctx.putImageData(imageData, 0, 0);
-          lastFrame = timestamp;
-        }
-
-        animationRef.current = requestAnimationFrame(render);
-      };
-
-      animationRef.current = requestAnimationFrame(render);
-
-      return () => {
-        window.removeEventListener('resize', resize);
-        if (animationRef.current) {
-          cancelAnimationFrame(animationRef.current);
-        }
-      };
-    }, [fps, intensity, monochrome]);
-
-    return (
-      <canvas
-        ref={(node) => {
-          (canvasRef as React.MutableRefObject<HTMLCanvasElement | null>).current = node;
-          if (typeof ref === 'function') ref(node);
-          else if (ref) ref.current = node;
-        }}
-        className={`${styles.canvas} ${className || ''}`}
-        style={{
-          position,
-          opacity,
-          ...style,
-        }}
-        aria-hidden="true"
-        {...props}
-      />
-    );
-  }
-);
-
-NoiseCanvas.displayName = 'NoiseCanvas';
-
-export default NoiseCanvas;

package/components/noise-canvas/noise-canvas.module.css

@@ -1,8 +0,0 @@
-.canvas {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 9999;
-  mix-blend-mode: overlay;
-}

package/components/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@chaos/components",
-  "version": "0.1.0",
-  "description": "Glitch, noise, and distortion UI components",
-  "type": "module",
-  "exports": {
-    "./text/*": "./text/*/index.tsx",
-    "./overlays/*": "./overlays/*/index.tsx",
-    "./buttons/*": "./buttons/*/index.tsx",
-    "./effects/*": "./effects/*/index.tsx",
-    "./backgrounds/*": "./backgrounds/*/index.tsx"
-  }
-}

package/components/particle-field/index.tsx

@@ -1,81 +0,0 @@
-'use client';
-
-import { forwardRef, HTMLAttributes, useMemo } from 'react';
-import styles from './particle-field.module.css';
-
-export interface ParticleFieldProps extends HTMLAttributes<HTMLDivElement> {
-  /** Number of particles */
-  count?: number;
-  /** Particle color */
-  color?: string;
-  /** Particle size range [min, max] in pixels */
-  sizeRange?: [number, number];
-  /** Animation duration range [min, max] in seconds */
-  durationRange?: [number, number];
-  /** Particle opacity */
-  opacity?: number;
-  /** Fixed or absolute positioning */
-  position?: 'fixed' | 'absolute';
-}
-
-export const ParticleField = forwardRef<HTMLDivElement, ParticleFieldProps>(
-  (
-    {
-      count = 50,
-      color = '#ffffff',
-      sizeRange = [1, 3],
-      durationRange = [10, 20],
-      opacity = 0.5,
-      position = 'fixed',
-      className,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const particles = useMemo(() => {
-      return Array.from({ length: count }, (_, i) => {
-        const size = sizeRange[0] + Math.random() * (sizeRange[1] - sizeRange[0]);
-        const duration = durationRange[0] + Math.random() * (durationRange[1] - durationRange[0]);
-        const delay = Math.random() * -duration;
-        const startX = Math.random() * 100;
-        const startY = Math.random() * 100;
-        const drift = (Math.random() - 0.5) * 100;
-
-        return { id: i, size, duration, delay, startX, startY, drift };
-      });
-    }, [count, sizeRange, durationRange]);
-
-    return (
-      <div
-        ref={ref}
-        className={`${styles.container} ${className || ''}`}
-        style={{ position, ...style }}
-        aria-hidden="true"
-        {...props}
-      >
-        {particles.map((p) => (
-          <div
-            key={p.id}
-            className={styles.particle}
-            style={{
-              width: p.size,
-              height: p.size,
-              backgroundColor: color,
-              opacity,
-              left: `${p.startX}%`,
-              top: `${p.startY}%`,
-              animationDuration: `${p.duration}s`,
-              animationDelay: `${p.delay}s`,
-              '--drift': `${p.drift}px`,
-            } as React.CSSProperties}
-          />
-        ))}
-      </div>
-    );
-  }
-);
-
-ParticleField.displayName = 'ParticleField';
-
-export default ParticleField;

package/components/particle-field/particle-field.module.css

@@ -1,31 +0,0 @@
-.container {
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.particle {
-  position: absolute;
-  border-radius: 50%;
-  animation: drift linear infinite;
-}
-
-@keyframes drift {
-  0% {
-    transform: translate(0, 0);
-    opacity: 0;
-  }
-  10% {
-    opacity: var(--opacity, 0.5);
-  }
-  90% {
-    opacity: var(--opacity, 0.5);
-  }
-  100% {
-    transform: translate(var(--drift, 50px), -100vh);
-    opacity: 0;
-  }
-}