@oalacea/chaosui 0.1.0 → 0.5.0

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef, InputHTMLAttributes } from 'react';
+
+export interface CyberInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple';
+  label?: string;
+  error?: string;
+}
+
+const variantStyles = {
+  cyan: 'focus:border-cyan-400 focus:shadow-[0_0_10px_rgba(0,240,255,0.3)]',
+  pink: 'focus:border-fuchsia-500 focus:shadow-[0_0_10px_rgba(255,0,255,0.3)]',
+  green: 'focus:border-emerald-400 focus:shadow-[0_0_10px_rgba(0,255,136,0.3)]',
+  purple: 'focus:border-purple-500 focus:shadow-[0_0_10px_rgba(168,85,247,0.3)]',
+};
+
+const labelColors = {
+  cyan: 'text-cyan-400',
+  pink: 'text-fuchsia-500',
+  green: 'text-emerald-400',
+  purple: 'text-purple-500',
+};
+
+export const CyberInput = forwardRef<HTMLInputElement, CyberInputProps>(
+  ({ variant = 'cyan', label, error, className = '', ...props }, ref) => {
+    return (
+      <div className={`flex flex-col gap-2 ${className}`}>
+        {label && (
+          <label className={`font-['Rajdhani',sans-serif] text-xs font-semibold uppercase tracking-widest ${labelColors[variant]}`}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={`
+            w-full px-4 py-3
+            font-['Share_Tech_Mono',monospace] text-sm text-white
+            bg-black/50 border border-white/10
+            outline-none transition-all duration-300
+            placeholder:text-white/30
+            ${error ? 'border-rose-500 focus:border-rose-500' : variantStyles[variant]}
+          `}
+          {...props}
+        />
+        {error && (
+          <span className="font-['Share_Tech_Mono',monospace] text-xs text-rose-500">{error}</span>
+        )}
+      </div>
+    );
+  }
+);
+
+CyberInput.displayName = 'CyberInput';
+export default CyberInput;

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

@@ -0,0 +1,102 @@
+.loader {
+  --loader-color: #00f0ff;
+  --loader-size: 2.5rem;
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cyan { --loader-color: #00f0ff; }
+.pink { --loader-color: #ff00ff; }
+.green { --loader-color: #00ff88; }
+.purple { --loader-color: #a855f7; }
+
+.sm { --loader-size: 1.5rem; }
+.md { --loader-size: 2.5rem; }
+.lg { --loader-size: 4rem; }
+
+/* Spinner */
+.spinner {
+  width: var(--loader-size);
+  height: var(--loader-size);
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--loader-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  box-shadow: 0 0 10px var(--loader-color);
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Dots */
+.dots {
+  gap: 0.5rem;
+}
+
+.dot {
+  width: calc(var(--loader-size) / 4);
+  height: calc(var(--loader-size) / 4);
+  background: var(--loader-color);
+  border-radius: 50%;
+  animation: dot-bounce 1.4s ease-in-out infinite;
+  box-shadow: 0 0 10px var(--loader-color);
+}
+
+.dot:nth-child(1) { animation-delay: 0s; }
+.dot:nth-child(2) { animation-delay: 0.2s; }
+.dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dot-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Bars */
+.bars {
+  gap: 0.25rem;
+  height: var(--loader-size);
+}
+
+.bar {
+  width: calc(var(--loader-size) / 6);
+  height: 100%;
+  background: var(--loader-color);
+  animation: bar-stretch 1.2s ease-in-out infinite;
+  box-shadow: 0 0 8px var(--loader-color);
+}
+
+.bar:nth-child(1) { animation-delay: 0s; }
+.bar:nth-child(2) { animation-delay: 0.1s; }
+.bar:nth-child(3) { animation-delay: 0.2s; }
+.bar:nth-child(4) { animation-delay: 0.3s; }
+
+@keyframes bar-stretch {
+  0%, 40%, 100% { transform: scaleY(0.4); }
+  20% { transform: scaleY(1); }
+}
+
+/* Pulse */
+.pulse {
+  width: var(--loader-size);
+  height: var(--loader-size);
+  background: var(--loader-color);
+  border-radius: 50%;
+  animation: pulse-grow 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-grow {
+  0% { transform: scale(0.5); opacity: 1; }
+  100% { transform: scale(1.5); opacity: 0; }
+}
+
+/* Hexagon */
+.hexagon {
+  width: var(--loader-size);
+  height: var(--loader-size);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  background: conic-gradient(from 0deg, var(--loader-color), transparent);
+  animation: spin 1.5s linear infinite;
+}

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;