@oalacea/chaosui 0.1.0 → 0.5.0

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonAlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const variantStyles = {
+  info: 'border-cyan-400 shadow-[0_0_10px_rgba(0,240,255,0.2)] [&_.title]:text-cyan-400',
+  success: 'border-emerald-400 shadow-[0_0_10px_rgba(0,255,136,0.2)] [&_.title]:text-emerald-400',
+  warning: 'border-amber-400 shadow-[0_0_10px_rgba(255,170,0,0.2)] [&_.title]:text-amber-400',
+  error: 'border-rose-500 shadow-[0_0_10px_rgba(255,0,64,0.2)] [&_.title]:text-rose-500',
+};
+
+export const NeonAlert = forwardRef<HTMLDivElement, NeonAlertProps>(
+  ({ children, variant = 'info', title, dismissible = false, onDismiss, className = '', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={`
+          flex items-start gap-3 p-4
+          bg-black/50 border border-l-4
+          animate-[slideIn_0.3s_ease-out]
+          ${variantStyles[variant]}
+          ${className}
+        `}
+        {...props}
+      >
+        <div className="flex-1 min-w-0">
+          {title && (
+            <div className="title mb-1 font-['Orbitron',sans-serif] text-[13px] font-bold uppercase tracking-wide">
+              {title}
+            </div>
+          )}
+          <div className="font-['Rajdhani',sans-serif] text-sm text-white/80 leading-relaxed">
+            {children}
+          </div>
+        </div>
+        {dismissible && (
+          <button
+            className="flex-shrink-0 px-2 py-1 text-sm text-white/50 hover:text-white bg-transparent border-none cursor-pointer transition-colors"
+            onClick={onDismiss}
+            aria-label="Dismiss"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonAlert.displayName = 'NeonAlert';
+export default NeonAlert;

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

@@ -0,0 +1,49 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-badge.module.css';
+
+export interface NeonBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  /** Badge size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Continuous pulse animation */
+  pulse?: boolean;
+  /** Outline style instead of filled */
+  outline?: boolean;
+}
+
+export const NeonBadge = forwardRef<HTMLSpanElement, NeonBadgeProps>(
+  (
+    {
+      children,
+      variant = 'cyan',
+      size = 'md',
+      pulse = false,
+      outline = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.badge,
+      styles[variant],
+      styles[size],
+      pulse && styles.pulse,
+      outline && styles.outline,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span ref={ref} className={classes} {...props}>
+        {children}
+      </span>
+    );
+  }
+);
+
+NeonBadge.displayName = 'NeonBadge';
+
+export default NeonBadge;

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

@@ -0,0 +1,53 @@
+.badge {
+  --neon-color: #00f0ff;
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.75rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: hsl(var(--background, 0 0% 4%));
+  background: var(--neon-color);
+  border-radius: 2px;
+  box-shadow: 0 0 10px var(--neon-color);
+}
+
+/* Variants */
+.cyan { --neon-color: #00f0ff; }
+.pink { --neon-color: #ff00ff; }
+.green { --neon-color: #00ff88; }
+.purple { --neon-color: #a855f7; }
+.red { --neon-color: #ff0040; }
+.yellow { --neon-color: #ffff00; }
+
+/* Sizes */
+.sm {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.5625rem;
+}
+
+.lg {
+  padding: 0.375rem 1rem;
+  font-size: 0.8125rem;
+}
+
+/* Outline variant */
+.outline {
+  color: var(--neon-color);
+  background: transparent;
+  border: 1px solid var(--neon-color);
+}
+
+/* Pulse animation */
+.pulse {
+  animation: badge-pulse 2s ease-in-out infinite;
+}
+
+@keyframes badge-pulse {
+  0%, 100% { box-shadow: 0 0 5px var(--neon-color); }
+  50% { box-shadow: 0 0 20px var(--neon-color), 0 0 30px var(--neon-color); }
+}

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  size?: 'sm' | 'md' | 'lg';
+  pulse?: boolean;
+  outline?: boolean;
+}
+
+const variantStyles = {
+  cyan: { solid: 'bg-cyan-400 shadow-[0_0_10px_#00f0ff]', outline: 'text-cyan-400 border-cyan-400' },
+  pink: { solid: 'bg-fuchsia-500 shadow-[0_0_10px_#ff00ff]', outline: 'text-fuchsia-500 border-fuchsia-500' },
+  green: { solid: 'bg-emerald-400 shadow-[0_0_10px_#00ff88]', outline: 'text-emerald-400 border-emerald-400' },
+  purple: { solid: 'bg-purple-500 shadow-[0_0_10px_#a855f7]', outline: 'text-purple-500 border-purple-500' },
+  red: { solid: 'bg-rose-500 shadow-[0_0_10px_#ff0040]', outline: 'text-rose-500 border-rose-500' },
+  yellow: { solid: 'bg-yellow-400 shadow-[0_0_10px_#ffff00]', outline: 'text-yellow-400 border-yellow-400' },
+};
+
+const sizeStyles = {
+  sm: 'px-2 py-0.5 text-[9px]',
+  md: 'px-3 py-1 text-[11px]',
+  lg: 'px-4 py-1.5 text-[13px]',
+};
+
+export const NeonBadge = forwardRef<HTMLSpanElement, NeonBadgeProps>(
+  ({ children, variant = 'cyan', size = 'md', pulse = false, outline = false, className = '', ...props }, ref) => {
+    const colors = variantStyles[variant];
+    return (
+      <span
+        ref={ref}
+        className={`
+          inline-flex items-center justify-center
+          font-['Orbitron',sans-serif] font-bold uppercase tracking-wide rounded-sm
+          ${sizeStyles[size]}
+          ${outline ? `bg-transparent border ${colors.outline}` : `text-[#0a0a0f] ${colors.solid}`}
+          ${pulse ? 'animate-pulse' : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+NeonBadge.displayName = 'NeonBadge';
+export default NeonBadge;

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+import styles from './neon-button.module.css';
+
+export interface NeonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Continuous glow pulse animation */
+  glowing?: boolean;
+  /** Animated gradient border */
+  animated?: boolean;
+  /** Cut corner style */
+  cut?: boolean;
+}
+
+export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
+  (
+    {
+      children,
+      variant = 'cyan',
+      size = 'md',
+      glowing = false,
+      animated = false,
+      cut = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = [
+      styles.button,
+      styles[variant],
+      styles[size],
+      glowing && styles.glowing,
+      animated && styles.animated,
+      cut && styles.cut,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <button ref={ref} className={classes} {...props}>
+        <span className={styles.text}>{children}</span>
+        <span className={styles.glow} aria-hidden="true" />
+      </button>
+    );
+  }
+);
+
+NeonButton.displayName = 'NeonButton';
+
+export default NeonButton;

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

@@ -0,0 +1,114 @@
+.button {
+  --neon-color: #00f0ff;
+  --neon-glow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color), 0 0 40px var(--neon-color);
+  
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 2rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.125em;
+  color: var(--neon-color);
+  background: transparent;
+  border: 2px solid var(--neon-color);
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.button:hover {
+  background: var(--neon-color);
+  color: hsl(var(--background, 0 0% 4%));
+  box-shadow: var(--neon-glow);
+}
+
+.button:active {
+  transform: scale(0.98);
+}
+
+/* Variants */
+.cyan { --neon-color: #00f0ff; }
+.pink { --neon-color: #ff00ff; }
+.green { --neon-color: #00ff88; }
+.purple { --neon-color: #a855f7; }
+.red { --neon-color: #ff0040; }
+.yellow { --neon-color: #ffff00; }
+
+/* Sizes */
+.sm {
+  padding: 0.5rem 1.25rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.0625em;
+}
+
+.lg {
+  padding: 1rem 3rem;
+  font-size: 1rem;
+  letter-spacing: 0.1875em;
+}
+
+/* Glowing animation */
+.glowing {
+  animation: neon-pulse 2s ease-in-out infinite;
+}
+
+@keyframes neon-pulse {
+  0%, 100% { box-shadow: 0 0 5px var(--neon-color); }
+  50% { box-shadow: var(--neon-glow); }
+}
+
+/* Animated gradient border */
+.animated {
+  border: none;
+  background: 
+    linear-gradient(hsl(var(--background, 0 0% 4%)), hsl(var(--background, 0 0% 4%))) padding-box,
+    linear-gradient(90deg, #00f0ff, #ff00ff, #00f0ff) border-box;
+  border: 2px solid transparent;
+  background-size: 100% 100%, 200% 100%;
+  animation: border-flow 3s linear infinite;
+}
+
+.animated:hover {
+  background: 
+    linear-gradient(90deg, #00f0ff, #ff00ff) padding-box,
+    linear-gradient(90deg, #00f0ff, #ff00ff, #00f0ff) border-box;
+  color: hsl(var(--background, 0 0% 4%));
+}
+
+@keyframes border-flow {
+  0% { background-position: 0 0, 0% 50%; }
+  100% { background-position: 0 0, 200% 50%; }
+}
+
+/* Cut corners */
+.cut {
+  clip-path: polygon(
+    0 0, calc(100% - 12px) 0, 100% 12px,
+    100% 100%, 12px 100%, 0 calc(100% - 12px)
+  );
+}
+
+/* Glow sweep element */
+.glow {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, var(--neon-color), transparent);
+  opacity: 0.3;
+  transition: left 0.5s ease;
+}
+
+.button:hover .glow {
+  left: 100%;
+}
+
+.text {
+  position: relative;
+  z-index: 1;
+}

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+
+export interface NeonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'red' | 'yellow';
+  size?: 'sm' | 'md' | 'lg';
+  glowing?: boolean;
+}
+
+const variantStyles = {
+  cyan: 'text-cyan-400 border-cyan-400 hover:bg-cyan-400 hover:shadow-[0_0_20px_#00f0ff,0_0_40px_#00f0ff]',
+  pink: 'text-fuchsia-500 border-fuchsia-500 hover:bg-fuchsia-500 hover:shadow-[0_0_20px_#ff00ff,0_0_40px_#ff00ff]',
+  green: 'text-emerald-400 border-emerald-400 hover:bg-emerald-400 hover:shadow-[0_0_20px_#00ff88,0_0_40px_#00ff88]',
+  purple: 'text-purple-500 border-purple-500 hover:bg-purple-500 hover:shadow-[0_0_20px_#a855f7,0_0_40px_#a855f7]',
+  red: 'text-rose-500 border-rose-500 hover:bg-rose-500 hover:shadow-[0_0_20px_#ff0040,0_0_40px_#ff0040]',
+  yellow: 'text-yellow-400 border-yellow-400 hover:bg-yellow-400 hover:shadow-[0_0_20px_#ffff00,0_0_40px_#ffff00]',
+};
+
+const sizeStyles = {
+  sm: 'px-5 py-2 text-xs tracking-wide',
+  md: 'px-8 py-3 text-sm tracking-wider',
+  lg: 'px-12 py-4 text-base tracking-widest',
+};
+
+export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
+  ({ children, variant = 'cyan', size = 'md', glowing = false, className = '', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={`
+          relative inline-flex items-center justify-center
+          font-['Orbitron',sans-serif] font-bold uppercase
+          bg-transparent border-2 cursor-pointer overflow-hidden
+          transition-all duration-300 ease-out
+          hover:text-[#0a0a0f] active:scale-[0.98]
+          ${variantStyles[variant]}
+          ${sizeStyles[size]}
+          ${glowing ? 'animate-pulse' : ''}
+          ${className}
+        `}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+NeonButton.displayName = 'NeonButton';
+export default NeonButton;

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-divider.module.css';
+
+export interface NeonDividerProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'gradient';
+  animated?: boolean;
+  text?: string;
+}
+
+export const NeonDivider = forwardRef<HTMLDivElement, NeonDividerProps>(
+  ({ variant = 'cyan', animated = false, text, className, ...props }, ref) => {
+    const classes = [styles.divider, styles[variant], animated && styles.animated, className].filter(Boolean).join(' ');
+    return (
+      <div ref={ref} className={classes} {...props}>
+        <span className={styles.line} />
+        {text && <span className={styles.text}>{text}</span>}
+        <span className={styles.line} />
+      </div>
+    );
+  }
+);
+
+NeonDivider.displayName = 'NeonDivider';
+export default NeonDivider;

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

@@ -0,0 +1,43 @@
+.divider {
+  --divider-color: #00f0ff;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.cyan { --divider-color: #00f0ff; }
+.pink { --divider-color: #ff00ff; }
+.green { --divider-color: #00ff88; }
+.purple { --divider-color: #a855f7; }
+
+.line {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--divider-color), transparent);
+  box-shadow: 0 0 8px var(--divider-color);
+}
+
+.gradient .line {
+  height: 2px;
+  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff88);
+}
+
+.text {
+  flex-shrink: 0;
+  padding: 0 0.5rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1875em;
+  color: var(--divider-color);
+}
+
+.animated .line {
+  animation: divider-pulse 2s ease-in-out infinite;
+}
+
+@keyframes divider-pulse {
+  0%, 100% { box-shadow: 0 0 5px var(--divider-color); }
+  50% { box-shadow: 0 0 15px var(--divider-color); }
+}

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

@@ -0,0 +1,36 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface NeonDividerProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'gradient';
+  text?: string;
+}
+
+const variantStyles = {
+  cyan: { line: 'from-transparent via-cyan-400 to-transparent shadow-[0_0_8px_#00f0ff]', text: 'text-cyan-400' },
+  pink: { line: 'from-transparent via-fuchsia-500 to-transparent shadow-[0_0_8px_#ff00ff]', text: 'text-fuchsia-500' },
+  green: { line: 'from-transparent via-emerald-400 to-transparent shadow-[0_0_8px_#00ff88]', text: 'text-emerald-400' },
+  purple: { line: 'from-transparent via-purple-500 to-transparent shadow-[0_0_8px_#a855f7]', text: 'text-purple-500' },
+  gradient: { line: 'from-cyan-400 via-fuchsia-500 to-emerald-400', text: 'text-white' },
+};
+
+export const NeonDivider = forwardRef<HTMLDivElement, NeonDividerProps>(
+  ({ variant = 'cyan', text, className = '', ...props }, ref) => {
+    const styles = variantStyles[variant];
+    return (
+      <div ref={ref} className={`flex items-center gap-4 ${className}`} {...props}>
+        <span className={`flex-1 h-px bg-gradient-to-r ${styles.line}`} />
+        {text && (
+          <span className={`flex-shrink-0 px-2 font-['Orbitron',sans-serif] text-[11px] font-semibold uppercase tracking-widest ${styles.text}`}>
+            {text}
+          </span>
+        )}
+        <span className={`flex-1 h-px bg-gradient-to-r ${styles.line}`} />
+      </div>
+    );
+  }
+);
+
+NeonDivider.displayName = 'NeonDivider';
+export default NeonDivider;

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

@@ -0,0 +1,65 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-progress.module.css';
+
+export interface NeonProgressProps extends HTMLAttributes<HTMLDivElement> {
+  /** Current progress value */
+  value: number;
+  /** Maximum value */
+  max?: number;
+  /** Neon color variant */
+  variant?: 'cyan' | 'pink' | 'green' | 'purple' | 'rainbow';
+  /** Bar size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Shimmer animation */
+  animated?: boolean;
+  /** Show percentage value */
+  showValue?: boolean;
+}
+
+export const NeonProgress = forwardRef<HTMLDivElement, NeonProgressProps>(
+  (
+    {
+      value,
+      max = 100,
+      variant = 'cyan',
+      size = 'md',
+      animated = true,
+      showValue = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const percentage = Math.min((value / max) * 100, 100);
+
+    return (
+      <div 
+        ref={ref} 
+        className={`${styles.container} ${className || ''}`}
+        {...props}
+      >
+        <div className={`${styles.track} ${styles[size]}`}>
+          <div 
+            className={`${styles.bar} ${styles[variant]} ${animated ? styles.animated : ''}`}
+            style={{ width: `${percentage}%` }}
+          />
+          <div 
+            className={styles.glow}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+        {showValue && (
+          <span className={`${styles.value} ${styles[variant]}`}>
+            {Math.round(percentage)}%
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonProgress.displayName = 'NeonProgress';
+
+export default NeonProgress;

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

@@ -0,0 +1,88 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.track {
+  position: relative;
+  flex: 1;
+  height: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.sm { height: 0.25rem; }
+.md { height: 0.5rem; }
+.lg { height: 0.75rem; }
+
+.bar {
+  --progress-color: #00f0ff;
+  height: 100%;
+  background: var(--progress-color);
+  border-radius: 0.25rem;
+  transition: width 0.5s ease;
+}
+
+/* Variants */
+.cyan { --progress-color: #00f0ff; }
+.pink { --progress-color: #ff00ff; }
+.green { --progress-color: #00ff88; }
+.purple { --progress-color: #a855f7; }
+
+.rainbow {
+  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff88, #00f0ff);
+  background-size: 200% 100%;
+  animation: rainbow-shift 3s linear infinite;
+}
+
+@keyframes rainbow-shift {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+
+/* Shimmer animation */
+.animated {
+  position: relative;
+  overflow: hidden;
+}
+
+.animated::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+/* Glow effect */
+.glow {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 1.25rem;
+  background: var(--progress-color, #00f0ff);
+  filter: blur(0.5rem);
+  opacity: 0.5;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* Value display */
+.value {
+  font-family: var(--font-display, 'Orbitron', monospace);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--progress-color, #00f0ff);
+  min-width: 2.5rem;
+  text-align: right;
+}