@oalacea/chaosui 0.1.0 → 0.5.0

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  size?: 'sm' | 'md' | 'lg';
+  showValue?: boolean;
+}
+
+const variantStyles = {
+  cyan: { bg: 'bg-cyan-400', text: 'text-cyan-400', glow: 'shadow-[0_0_10px_#00f0ff]' },
+  pink: { bg: 'bg-fuchsia-500', text: 'text-fuchsia-500', glow: 'shadow-[0_0_10px_#ff00ff]' },
+  green: { bg: 'bg-emerald-400', text: 'text-emerald-400', glow: 'shadow-[0_0_10px_#00ff88]' },
+  purple: { bg: 'bg-purple-500', text: 'text-purple-500', glow: 'shadow-[0_0_10px_#a855f7]' },
+};
+
+const sizeStyles = { sm: 'h-1', md: 'h-2', lg: 'h-3' };
+
+export const NeonProgress = forwardRef<HTMLDivElement, NeonProgressProps>(
+  ({ value, max = 100, variant = 'cyan', size = 'md', showValue = false, className = '', ...props }, ref) => {
+    const percentage = Math.min((value / max) * 100, 100);
+    const styles = variantStyles[variant];
+    
+    return (
+      <div ref={ref} className={`flex items-center gap-3 ${className}`} {...props}>
+        <div className={`relative flex-1 ${sizeStyles[size]} bg-white/10 rounded-full overflow-hidden`}>
+          <div 
+            className={`h-full ${styles.bg} ${styles.glow} rounded-full transition-all duration-500 ease-out`}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+        {showValue && (
+          <span className={`font-['Orbitron',sans-serif] text-xs font-bold ${styles.text} min-w-[40px] text-right`}>
+            {Math.round(percentage)}%
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonProgress.displayName = 'NeonProgress';
+export default NeonProgress;

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-tabs.module.css';
+
+export interface NeonTab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface NeonTabsProps extends HTMLAttributes<HTMLDivElement> {
+  tabs: NeonTab[];
+  activeTab: string;
+  onChange: (tabId: string) => void;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+}
+
+export const NeonTabs = forwardRef<HTMLDivElement, NeonTabsProps>(
+  ({ tabs, activeTab, onChange, variant = 'cyan', className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={`${styles.tabs} ${styles[variant]} ${className || ''}`} role="tablist" {...props}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            className={`${styles.tab} ${activeTab === tab.id ? styles.active : ''}`}
+            onClick={() => onChange(tab.id)}
+          >
+            {tab.icon && <span className={styles.icon}>{tab.icon}</span>}
+            <span className={styles.label}>{tab.label}</span>
+          </button>
+        ))}
+      </div>
+    );
+  }
+);
+
+NeonTabs.displayName = 'NeonTabs';
+export default NeonTabs;

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

@@ -0,0 +1,45 @@
+.tabs {
+  --tabs-color: #00f0ff;
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.cyan { --tabs-color: #00f0ff; }
+.pink { --tabs-color: #ff00ff; }
+.green { --tabs-color: #00ff88; }
+.purple { --tabs-color: #a855f7; }
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: rgba(255, 255, 255, 0.5);
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.tab:hover {
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.active {
+  color: var(--tabs-color);
+  background: rgba(0, 240, 255, 0.1);
+  border-color: var(--tabs-color);
+  box-shadow: 0 0 10px var(--tabs-color), inset 0 0 10px rgba(0, 240, 255, 0.1);
+}
+
+.icon { font-size: 0.875rem; }
+.label { white-space: nowrap; }

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonTab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface NeonTabsProps extends HTMLAttributes<HTMLDivElement> {
+  tabs: NeonTab[];
+  activeTab: string;
+  onChange: (tabId: string) => void;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+}
+
+const variantStyles = {
+  cyan: { active: 'text-cyan-400 bg-cyan-400/10 border-cyan-400 shadow-[0_0_10px_#00f0ff]' },
+  pink: { active: 'text-fuchsia-500 bg-fuchsia-500/10 border-fuchsia-500 shadow-[0_0_10px_#ff00ff]' },
+  green: { active: 'text-emerald-400 bg-emerald-400/10 border-emerald-400 shadow-[0_0_10px_#00ff88]' },
+  purple: { active: 'text-purple-500 bg-purple-500/10 border-purple-500 shadow-[0_0_10px_#a855f7]' },
+};
+
+export const NeonTabs = forwardRef<HTMLDivElement, NeonTabsProps>(
+  ({ tabs, activeTab, onChange, variant = 'cyan', className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    return (
+      <div ref={ref} className={`flex gap-1 p-1 bg-black/50 border border-white/10 ${className}`} role="tablist" {...props}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            className={`
+              flex items-center gap-2 px-5 py-2.5
+              font-['Orbitron',sans-serif] text-xs font-semibold uppercase tracking-wide
+              border transition-all duration-300 cursor-pointer
+              ${activeTab === tab.id ? colors.active : 'text-white/50 bg-transparent border-transparent hover:text-white/80 hover:bg-white/5'}
+            `}
+            onClick={() => onChange(tab.id)}
+          >
+            {tab.icon && <span className="text-sm">{tab.icon}</span>}
+            <span className="whitespace-nowrap">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+    );
+  }
+);
+
+NeonTabs.displayName = 'NeonTabs';
+export default NeonTabs;

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/ascii-art/css/ascii-art.module.css

@@ -0,0 +1,173 @@
+.container {
+  display: block;
+  font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
+  white-space: pre;
+  line-height: 1.2;
+  letter-spacing: 0;
+  overflow-x: auto;
+}
+
+/* Size variants */
+.xs { font-size: 0.5rem; }
+.sm { font-size: 0.65rem; }
+.md { font-size: 0.8rem; }
+.lg { font-size: 1rem; }
+.xl { font-size: 1.25rem; }
+
+/* Color variants */
+.blood {
+  color: #ff0040;
+  text-shadow: 0 0 5px #ff004080;
+}
+
+.cyber {
+  color: #00ffff;
+  text-shadow: 0 0 5px #00ffff80;
+}
+
+.matrix {
+  color: #00ff00;
+  text-shadow: 0 0 5px #00ff0080;
+}
+
+.amber {
+  color: #ffaa00;
+  text-shadow: 0 0 5px #ffaa0080;
+}
+
+.ghost {
+  color: #666;
+  opacity: 0.7;
+}
+
+.gradient {
+  background: linear-gradient(180deg, #ff0040 0%, #00ffff 50%, #00ff00 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Animation variants */
+.typing {
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typeIn 2s steps(40, end) forwards;
+}
+
+@keyframes typeIn {
+  from { max-width: 0; }
+  to { max-width: 100%; }
+}
+
+.reveal .line {
+  opacity: 0;
+  animation: lineReveal 0.5s forwards;
+}
+
+@keyframes lineReveal {
+  from { opacity: 0; transform: translateX(-10px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.glitch {
+  position: relative;
+}
+
+.glitch::before,
+.glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.glitch::before {
+  color: #ff0040;
+  animation: asciiGlitch1 3s infinite;
+  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+}
+
+.glitch::after {
+  color: #00ffff;
+  animation: asciiGlitch2 3s infinite;
+  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+}
+
+@keyframes asciiGlitch1 {
+  0%, 90%, 100% { transform: translate(0); opacity: 0; }
+  92% { transform: translate(-2px, 0); opacity: 0.8; }
+  94% { transform: translate(2px, 0); opacity: 0.8; }
+}
+
+@keyframes asciiGlitch2 {
+  0%, 90%, 100% { transform: translate(0); opacity: 0; }
+  93% { transform: translate(2px, 0); opacity: 0.8; }
+  95% { transform: translate(-2px, 0); opacity: 0.8; }
+}
+
+/* Scanline effect */
+.scanlines {
+  position: relative;
+}
+
+.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;
+}
+
+/* Border styles */
+.bordered {
+  border: 1px solid currentColor;
+  padding: 1rem;
+  position: relative;
+}
+
+.bordered::before {
+  content: '┌' attr(data-title) '┐';
+  position: absolute;
+  top: -0.6em;
+  left: 1rem;
+  background: inherit;
+  padding: 0 0.5rem;
+  font-size: 0.8em;
+}
+
+/* Flicker effect */
+.flicker {
+  animation: asciiFlicker 0.15s infinite;
+}
+
+@keyframes asciiFlicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
+
+/* Pulse effect */
+.pulse {
+  animation: asciiPulse 2s ease-in-out infinite;
+}
+
+@keyframes asciiPulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+/* Line container for reveal animation */
+.line {
+  display: block;
+}

package/components/text/ascii-art/css/index.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState } from 'react';
+import styles from './ascii-art.module.css';
+
+export interface AsciiArtProps extends HTMLAttributes<HTMLPreElement> {
+  /** ASCII art content (multi-line string) */
+  children: string;
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Color variant */
+  variant?: 'default' | 'blood' | 'cyber' | 'matrix' | 'amber' | 'ghost' | 'gradient';
+  /** Animation effect */
+  animation?: 'none' | 'typing' | 'reveal' | 'glitch' | 'flicker' | 'pulse';
+  /** Show scanlines overlay */
+  scanlines?: boolean;
+  /** Show border */
+  bordered?: boolean;
+  /** Border title */
+  title?: string;
+  /** Delay between lines for reveal animation (ms) */
+  revealDelay?: number;
+  /** Custom color */
+  color?: string;
+}
+
+export const AsciiArt = forwardRef<HTMLPreElement, AsciiArtProps>(
+  (
+    {
+      children,
+      size = 'md',
+      variant = 'default',
+      animation = 'none',
+      scanlines = false,
+      bordered = false,
+      title,
+      revealDelay = 100,
+      color,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [revealedLines, setRevealedLines] = useState<number>(0);
+    const lines = children.split('\n');
+
+    useEffect(() => {
+      if (animation === 'reveal') {
+        setRevealedLines(0);
+        let lineIndex = 0;
+        
+        const interval = setInterval(() => {
+          if (lineIndex < lines.length) {
+            setRevealedLines(lineIndex + 1);
+            lineIndex++;
+          } else {
+            clearInterval(interval);
+          }
+        }, revealDelay);
+
+        return () => clearInterval(interval);
+      }
+    }, [animation, lines.length, revealDelay, children]);
+
+    const containerClasses = [
+      styles.container,
+      styles[size],
+      variant !== 'default' && styles[variant],
+      animation !== 'none' && styles[animation],
+      scanlines && styles.scanlines,
+      bordered && styles.bordered,
+      className
+    ].filter(Boolean).join(' ');
+
+    const renderContent = () => {
+      if (animation === 'reveal') {
+        return lines.map((line, i) => (
+          <span
+            key={i}
+            className={styles.line}
+            style={{
+              opacity: i < revealedLines ? 1 : 0,
+              animationDelay: `${i * revealDelay}ms`,
+              transform: i < revealedLines ? 'translateX(0)' : 'translateX(-10px)',
+              transition: 'opacity 0.3s ease, transform 0.3s ease',
+            }}
+          >
+            {line}
+            {'\n'}
+          </span>
+        ));
+      }
+      return children;
+    };
+
+    return (
+      <pre
+        ref={ref}
+        className={containerClasses}
+        style={{ 
+          color: color,
+          ...style 
+        }}
+        data-text={animation === 'glitch' ? children : undefined}
+        data-title={bordered ? title : undefined}
+        {...props}
+      >
+        {renderContent()}
+      </pre>
+    );
+  }
+);
+
+AsciiArt.displayName = 'AsciiArt';
+export default AsciiArt;