@oalacea/chaosui 0.1.0 → 0.4.0

package/components/cyber/cyber-loader/css/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './cyber-loader.module.css';
+
+export interface CyberLoaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Loader style */
+  variant?: 'spinner' | 'dots' | 'bars' | 'pulse' | 'hexagon';
+  /** Neon color */
+  color?: 'cyan' | 'pink' | 'green' | 'purple';
+  /** Loader size */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const CyberLoader = forwardRef<HTMLDivElement, CyberLoaderProps>(
+  (
+    {
+      variant = 'spinner',
+      color = 'cyan',
+      size = 'md',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.loader,
+      styles[variant],
+      styles[color],
+      styles[size],
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={classes} {...props}>
+        {variant === 'dots' && (
+          <>
+            <span className={styles.dot} />
+            <span className={styles.dot} />
+            <span className={styles.dot} />
+          </>
+        )}
+        {variant === 'bars' && (
+          <>
+            <span className={styles.bar} />
+            <span className={styles.bar} />
+            <span className={styles.bar} />
+            <span className={styles.bar} />
+          </>
+        )}
+      </div>
+    );
+  }
+);
+
+CyberLoader.displayName = 'CyberLoader';
+
+export default CyberLoader;

package/components/cyber/cyber-loader/tailwind/index.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface CyberLoaderProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'spinner' | 'dots' | 'bars';
+  color?: 'cyan' | 'pink' | 'green' | 'purple';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const colorStyles = {
+  cyan: { bg: 'bg-cyan-400', border: 'border-t-cyan-400', shadow: 'shadow-[0_0_10px_#00f0ff]' },
+  pink: { bg: 'bg-fuchsia-500', border: 'border-t-fuchsia-500', shadow: 'shadow-[0_0_10px_#ff00ff]' },
+  green: { bg: 'bg-emerald-400', border: 'border-t-emerald-400', shadow: 'shadow-[0_0_10px_#00ff88]' },
+  purple: { bg: 'bg-purple-500', border: 'border-t-purple-500', shadow: 'shadow-[0_0_10px_#a855f7]' },
+};
+
+const sizeStyles = { sm: 'w-6 h-6', md: 'w-10 h-10', lg: 'w-16 h-16' };
+
+export const CyberLoader = forwardRef<HTMLDivElement, CyberLoaderProps>(
+  ({ variant = 'spinner', color = 'cyan', size = 'md', className = '', ...props }, ref) => {
+    const colors = colorStyles[color];
+    
+    if (variant === 'spinner') {
+      return (
+        <div
+          ref={ref}
+          className={`${sizeStyles[size]} rounded-full border-[3px] border-white/10 ${colors.border} ${colors.shadow} animate-spin ${className}`}
+          {...props}
+        />
+      );
+    }
+    
+    if (variant === 'dots') {
+      return (
+        <div ref={ref} className={`inline-flex items-center gap-2 ${className}`} {...props}>
+          {[0, 1, 2].map((i) => (
+            <span
+              key={i}
+              className={`w-2.5 h-2.5 rounded-full ${colors.bg} ${colors.shadow} animate-[bounce_1.4s_ease-in-out_infinite]`}
+              style={{ animationDelay: `${i * 0.2}s` }}
+            />
+          ))}
+        </div>
+      );
+    }
+    
+    return (
+      <div ref={ref} className={`inline-flex items-end gap-1 h-10 ${className}`} {...props}>
+        {[0, 1, 2, 3].map((i) => (
+          <span
+            key={i}
+            className={`w-1.5 h-full ${colors.bg} ${colors.shadow} animate-[pulse_1.2s_ease-in-out_infinite]`}
+            style={{ animationDelay: `${i * 0.1}s` }}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+
+CyberLoader.displayName = 'CyberLoader';
+export default CyberLoader;

package/components/cyber/cyber-modal/css/cyber-modal.module.css

@@ -0,0 +1,124 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  animation: overlay-fade 0.2s ease-out;
+}
+
+@keyframes overlay-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.modal {
+  --modal-color: #00f0ff;
+  
+  position: relative;
+  width: 100%;
+  max-height: 90vh;
+  background: hsl(var(--background, 0 0% 4%));
+  border: 2px solid var(--modal-color);
+  box-shadow: 
+    0 0 20px var(--modal-color),
+    inset 0 0 20px rgba(0, 240, 255, 0.05);
+  overflow: hidden;
+  animation: modal-appear 0.3s ease-out;
+}
+
+@keyframes modal-appear {
+  from { opacity: 0; transform: scale(0.9) translateY(-20px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.cyan { --modal-color: #00f0ff; }
+.pink { --modal-color: #ff00ff; }
+.green { --modal-color: #00ff88; }
+.red { --modal-color: #ff0040; }
+
+.sm { max-width: 25rem; }
+.md { max-width: 37.5rem; }
+.lg { max-width: 56.25rem; }
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  background: rgba(0, 240, 255, 0.1);
+  border-bottom: 1px solid var(--modal-color);
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.125em;
+  color: var(--modal-color);
+}
+
+.close {
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.5);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.close:hover {
+  color: var(--modal-color);
+}
+
+.content {
+  padding: 1.25rem;
+  max-height: calc(90vh - 3.75rem);
+  overflow-y: auto;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.scanlines {
+  position: absolute;
+  inset: 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;
+  z-index: 10;
+}
+
+/* Corner decorations */
+.modal::before,
+.modal::after {
+  content: '';
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--modal-color);
+}
+
+.modal::before {
+  top: -2px;
+  left: -2px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.modal::after {
+  bottom: -2px;
+  right: -2px;
+  border-left: none;
+  border-top: none;
+}

package/components/cyber/cyber-modal/css/index.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect } from 'react';
+import styles from './cyber-modal.module.css';
+
+export interface CyberModalProps extends HTMLAttributes<HTMLDivElement> {
+  /** Modal open state */
+  isOpen: boolean;
+  /** Close callback */
+  onClose: () => void;
+  /** Modal title */
+  title?: string;
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'red';
+  /** Modal size */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const CyberModal = forwardRef<HTMLDivElement, CyberModalProps>(
+  (
+    {
+      isOpen,
+      onClose,
+      title,
+      variant = 'cyan',
+      size = 'md',
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    useEffect(() => {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') onClose();
+      };
+      if (isOpen) {
+        document.addEventListener('keydown', handleEscape);
+        document.body.style.overflow = 'hidden';
+      }
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+        document.body.style.overflow = '';
+      };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+      <div className={styles.overlay} onClick={onClose}>
+        <div
+          ref={ref}
+          className={`${styles.modal} ${styles[variant]} ${styles[size]} ${className || ''}`}
+          onClick={(e) => e.stopPropagation()}
+          role="dialog"
+          aria-modal="true"
+          {...props}
+        >
+          <div className={styles.header}>
+            {title && <h2 className={styles.title}>{title}</h2>}
+            <button className={styles.close} onClick={onClose} aria-label="Close">
+              ✕
+            </button>
+          </div>
+          <div className={styles.content}>{children}</div>
+          <div className={styles.scanlines} />
+        </div>
+      </div>
+    );
+  }
+);
+
+CyberModal.displayName = 'CyberModal';
+
+export default CyberModal;

package/components/cyber/cyber-modal/tailwind/index.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect } from 'react';
+
+export interface CyberModalProps extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  variant?: 'cyan' | 'pink' | 'green' | 'red';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const variantStyles = {
+  cyan: 'border-cyan-400 shadow-[0_0_20px_#00f0ff]',
+  pink: 'border-fuchsia-500 shadow-[0_0_20px_#ff00ff]',
+  green: 'border-emerald-400 shadow-[0_0_20px_#00ff88]',
+  red: 'border-rose-500 shadow-[0_0_20px_#ff0040]',
+};
+
+const titleColors = {
+  cyan: 'text-cyan-400 bg-cyan-400/10 border-cyan-400',
+  pink: 'text-fuchsia-500 bg-fuchsia-500/10 border-fuchsia-500',
+  green: 'text-emerald-400 bg-emerald-400/10 border-emerald-400',
+  red: 'text-rose-500 bg-rose-500/10 border-rose-500',
+};
+
+const sizeStyles = { sm: 'max-w-[400px]', md: 'max-w-[600px]', lg: 'max-w-[900px]' };
+
+export const CyberModal = forwardRef<HTMLDivElement, CyberModalProps>(
+  ({ isOpen, onClose, title, variant = 'cyan', size = 'md', children, className = '', ...props }, ref) => {
+    useEffect(() => {
+      const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+      if (isOpen) {
+        document.addEventListener('keydown', handleEscape);
+        document.body.style.overflow = 'hidden';
+      }
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+        document.body.style.overflow = '';
+      };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+      <div
+        className="fixed inset-0 flex items-center justify-center p-5 bg-black/80 backdrop-blur-sm z-[1000] animate-[fadeIn_0.2s]"
+        onClick={onClose}
+      >
+        <div
+          ref={ref}
+          className={`
+            relative w-full ${sizeStyles[size]} max-h-[90vh]
+            bg-[#0a0a0f] border-2 ${variantStyles[variant]}
+            overflow-hidden animate-[scaleIn_0.3s_ease-out]
+            ${className}
+          `}
+          onClick={(e) => e.stopPropagation()}
+          role="dialog"
+          aria-modal="true"
+          {...props}
+        >
+          <div className={`flex items-center justify-between px-5 py-4 border-b ${titleColors[variant]}`}>
+            {title && (
+              <h2 className="m-0 font-['Orbitron',sans-serif] text-sm font-bold uppercase tracking-widest">
+                {title}
+              </h2>
+            )}
+            <button
+              className="px-2 py-1 text-white/50 hover:text-white bg-transparent border-none cursor-pointer transition-colors"
+              onClick={onClose}
+              aria-label="Close"
+            >
+              ✕
+            </button>
+          </div>
+          <div className="p-5 max-h-[calc(90vh-60px)] overflow-y-auto text-white/80">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+CyberModal.displayName = 'CyberModal';
+export default CyberModal;

package/components/cyber/cyber-slider/css/cyber-slider.module.css

@@ -0,0 +1,61 @@
+.slider {
+  --slider-color: #00f0ff;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.cyan { --slider-color: #00f0ff; }
+.pink { --slider-color: #ff00ff; }
+.green { --slider-color: #00ff88; }
+.purple { --slider-color: #a855f7; }
+
+.track {
+  position: relative;
+  flex: 1;
+  height: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--slider-color);
+  box-shadow: 0 0 10px var(--slider-color);
+  pointer-events: none;
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  background: var(--slider-color);
+  border: 2px solid hsl(var(--background, 0 0% 4%));
+  transform: translate(-50%, -50%) rotate(45deg);
+  box-shadow: 0 0 10px var(--slider-color);
+  pointer-events: none;
+}
+
+.value {
+  min-width: 2.5rem;
+  font-family: var(--font-display, 'Orbitron', monospace);
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--slider-color);
+  text-align: right;
+}

package/components/cyber/cyber-slider/css/index.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './cyber-slider.module.css';
+
+export interface CyberSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  showValue?: boolean;
+}
+
+export const CyberSlider = forwardRef<HTMLDivElement, CyberSliderProps>(
+  ({ value, onChange, min = 0, max = 100, step = 1, variant = 'cyan', showValue = false, className, ...props }, ref) => {
+    const percentage = ((value - min) / (max - min)) * 100;
+    return (
+      <div ref={ref} className={`${styles.slider} ${styles[variant]} ${className || ''}`} {...props}>
+        <div className={styles.track}>
+          <div className={styles.fill} style={{ width: `${percentage}%` }} />
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className={styles.input}
+          />
+          <div className={styles.thumb} style={{ left: `${percentage}%` }} />
+        </div>
+        {showValue && <span className={styles.value}>{value}</span>}
+      </div>
+    );
+  }
+);
+
+CyberSlider.displayName = 'CyberSlider';
+export default CyberSlider;

package/components/cyber/cyber-slider/tailwind/index.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface CyberSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  showValue?: boolean;
+}
+
+const variantStyles = {
+  cyan: { fill: 'bg-cyan-400 shadow-[0_0_10px_#00f0ff]', text: 'text-cyan-400' },
+  pink: { fill: 'bg-fuchsia-500 shadow-[0_0_10px_#ff00ff]', text: 'text-fuchsia-500' },
+  green: { fill: 'bg-emerald-400 shadow-[0_0_10px_#00ff88]', text: 'text-emerald-400' },
+  purple: { fill: 'bg-purple-500 shadow-[0_0_10px_#a855f7]', text: 'text-purple-500' },
+};
+
+export const CyberSlider = forwardRef<HTMLDivElement, CyberSliderProps>(
+  ({ value, onChange, min = 0, max = 100, step = 1, variant = 'cyan', showValue = false, className = '', ...props }, ref) => {
+    const percentage = ((value - min) / (max - min)) * 100;
+    const colors = variantStyles[variant];
+    return (
+      <div ref={ref} className={`flex items-center gap-3 ${className}`} {...props}>
+        <div className="relative flex-1 h-2 bg-white/10 border border-white/20">
+          <div className={`absolute top-0 left-0 h-full ${colors.fill}`} style={{ width: `${percentage}%` }} />
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          />
+          <div
+            className={`absolute top-1/2 w-4 h-4 ${colors.fill} border-2 border-[#0a0a0f] pointer-events-none`}
+            style={{ left: `${percentage}%`, transform: 'translate(-50%, -50%) rotate(45deg)' }}
+          />
+        </div>
+        {showValue && <span className={`min-w-[40px] font-['Orbitron',sans-serif] text-sm font-bold ${colors.text} text-right`}>{value}</span>}
+      </div>
+    );
+  }
+);
+
+CyberSlider.displayName = 'CyberSlider';
+export default CyberSlider;

package/components/cyber/cyber-tooltip/css/cyber-tooltip.module.css

@@ -0,0 +1,67 @@
+.tooltip {
+  --tooltip-color: #00f0ff;
+  position: relative;
+  display: inline-block;
+}
+
+.cyan { --tooltip-color: #00f0ff; }
+.pink { --tooltip-color: #ff00ff; }
+.green { --tooltip-color: #00ff88; }
+
+.content {
+  position: absolute;
+  z-index: 100;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-mono, 'Share Tech Mono', monospace);
+  font-size: 0.75rem;
+  color: #fff;
+  background: rgba(10, 10, 15, 0.95);
+  border: 1px solid var(--tooltip-color);
+  box-shadow: 0 0 10px var(--tooltip-color);
+  white-space: nowrap;
+  animation: tooltip-appear 0.2s ease-out;
+}
+
+@keyframes tooltip-appear {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.top .content {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+.bottom .content {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+.arrow {
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: rgba(10, 10, 15, 0.95);
+  border: 1px solid var(--tooltip-color);
+  transform: rotate(45deg);
+}
+
+.top .arrow {
+  bottom: -0.3rem;
+  left: 50%;
+  margin-left: -0.25rem;
+  border-top: none;
+  border-left: none;
+}
+
+.bottom .arrow {
+  top: -0.3rem;
+  left: 50%;
+  margin-left: -0.25rem;
+  border-bottom: none;
+  border-right: none;
+}

package/components/cyber/cyber-tooltip/css/index.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useState } from 'react';
+import styles from './cyber-tooltip.module.css';
+
+export interface CyberTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  content: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  variant?: 'cyan' | 'pink' | 'green';
+}
+
+export const CyberTooltip = forwardRef<HTMLDivElement, CyberTooltipProps>(
+  ({ children, content, position = 'top', variant = 'cyan', className, ...props }, ref) => {
+    const [visible, setVisible] = useState(false);
+    return (
+      <div
+        ref={ref}
+        className={`${styles.tooltip} ${styles[position]} ${styles[variant]} ${className || ''}`}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        {...props}
+      >
+        {children}
+        {visible && (
+          <div className={styles.content}>
+            <span className={styles.arrow} />
+            {content}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+CyberTooltip.displayName = 'CyberTooltip';
+export default CyberTooltip;