@oalacea/chaosui 0.1.0 → 0.5.0

package/components/navigation/progress-dots/progress-dots.module.css

@@ -0,0 +1,91 @@
+/* progress-dots - Indicateur de section (dots) */
+.container {
+  position: fixed;
+  right: 2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: transparent;
+  border: 2px solid var(--chaos-bone-dark, #666);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.dot::before {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  background: var(--chaos-bone-dark, #666);
+  transform: scale(0);
+  transition: transform 0.3s ease;
+}
+
+.dot:hover { border-color: var(--chaos-blood, #ff0040); }
+.dot:hover::before { transform: scale(0.5); background: var(--chaos-blood, #ff0040); }
+
+.dotActive {
+  border-color: var(--chaos-blood, #ff0040);
+  box-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
+}
+
+.dotActive::before { transform: scale(1); background: var(--chaos-blood, #ff0040); }
+
+.dotWithLabel { position: relative; }
+
+.label {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 1rem;
+  font-size: 0.6rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--chaos-bone-dark, #666);
+  opacity: 0;
+  transition: all 0.3s;
+  white-space: nowrap;
+  font-family: var(--chaos-font-mono, monospace);
+}
+
+.dot:hover .label { opacity: 1; }
+.dotActive .label { opacity: 1; color: var(--chaos-blood, #ff0040); }
+
+.withConnector .dot:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 1px;
+  height: 1.5rem;
+  background: var(--chaos-bone-dark, #333);
+  transform: translateX(-50%);
+}
+
+.variantGold .dot { border-color: var(--chaos-gold-dark, #8b7017); }
+.variantGold .dot:hover { border-color: var(--chaos-gold, #c9a227); }
+.variantGold .dot:hover::before { background: var(--chaos-gold, #c9a227); }
+.variantGold .dotActive { border-color: var(--chaos-gold, #c9a227); box-shadow: 0 0 10px rgba(201, 162, 39, 0.5); }
+.variantGold .dotActive::before { background: var(--chaos-gold, #c9a227); }
+.variantGold .dotActive .label { color: var(--chaos-gold, #c9a227); }
+
+.variantMinimal .dot { width: 8px; height: 8px; border-width: 1px; }
+
+.horizontal {
+  flex-direction: row;
+  top: auto;
+  bottom: 2rem;
+  right: 50%;
+  transform: translateX(50%);
+}

package/components/navigation/scattered-nav/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './scattered-nav.module.css';
+
+export interface ScatteredNavItemProps {
+  href?: string;
+  children: ReactNode;
+  variant?: 'default' | 'logo' | 'corrupt' | 'status' | 'blink';
+  scattered?: 1 | 2 | 3 | 4 | 5;
+  glitchText?: string;
+}
+
+export interface ScatteredNavProps extends HTMLAttributes<HTMLElement> {
+  items?: ScatteredNavItemProps[];
+  children?: ReactNode;
+}
+
+export const ScatteredNavItem = forwardRef<HTMLAnchorElement | HTMLDivElement, ScatteredNavItemProps>(
+  ({ href, children, variant = 'default', scattered, glitchText, ...props }, ref) => {
+    const classes = [
+      styles.item,
+      variant === 'logo' && styles.logo,
+      variant === 'corrupt' && styles.corrupt,
+      variant === 'status' && styles.status,
+      variant === 'blink' && styles.blink,
+      scattered && styles[`scattered${scattered}`],
+    ].filter(Boolean).join(' ');
+
+    const content = glitchText ? (
+      <span className={styles.glitch} data-text={glitchText}>{children}</span>
+    ) : variant === 'status' ? (
+      <><span className={styles.statusDot} />{children}</>
+    ) : children;
+
+    if (href) {
+      return <a ref={ref as any} href={href} className={classes} {...props}>{content}</a>;
+    }
+    return <div ref={ref as any} className={classes} {...props}>{content}</div>;
+  }
+);
+
+ScatteredNavItem.displayName = 'ScatteredNavItem';
+
+export const ScatteredNav = forwardRef<HTMLElement, ScatteredNavProps>(
+  ({ items, children, className, ...props }, ref) => {
+    return (
+      <nav ref={ref} className={`${styles.nav} ${className || ''}`} {...props}>
+        {items?.map((item, i) => (
+          <ScatteredNavItem key={i} {...item} />
+        ))}
+        {children}
+      </nav>
+    );
+  }
+);
+
+ScatteredNav.displayName = 'ScatteredNav';
+export default ScatteredNav;

package/components/navigation/scattered-nav/scattered-nav.module.css

@@ -0,0 +1,113 @@
+/* scattered-nav - Nav éclatée/fragments positionnés aléatoirement */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  height: 60px;
+  background: var(--chaos-void, #0a0a0a);
+  border-bottom: 1px solid var(--chaos-blood, #ff0040);
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  height: 100%;
+  font-size: 0.7rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.2s;
+  color: var(--chaos-bone-dark, #888);
+  text-decoration: none;
+}
+
+.item:hover {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.scattered1 { transform: translateY(3px); }
+.scattered2 { transform: rotate(-2deg); border-left: 1px solid var(--chaos-blood, #ff0040); }
+.scattered3 { transform: translateY(-2px) rotate(1deg); }
+.scattered4 { transform: translateX(-3px); }
+.scattered5 { transform: rotate(1.5deg) translateY(1px); }
+
+.logo {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.3rem;
+  padding: 0 1.5rem;
+}
+
+.glitch { position: relative; }
+
+.glitch::before {
+  content: attr(data-text);
+  position: absolute;
+  left: 2px;
+  top: 0;
+  color: var(--chaos-bone, #e8e8e8);
+  opacity: 0.5;
+  animation: navGlitch 0.3s infinite;
+}
+
+@keyframes navGlitch {
+  0%, 100% { clip-path: inset(0 0 80% 0); }
+  25% { clip-path: inset(20% 0 60% 0); }
+  50% { clip-path: inset(40% 0 40% 0); }
+  75% { clip-path: inset(60% 0 20% 0); }
+}
+
+.corrupt {
+  font-family: var(--chaos-font-mono, monospace);
+  color: var(--chaos-blood, #ff0040);
+  font-size: 0.6rem;
+  opacity: 0.5;
+  animation: flickerText 3s infinite;
+}
+
+@keyframes flickerText {
+  0%, 90%, 100% { opacity: 0.5; }
+  92%, 94%, 96% { opacity: 0; }
+}
+
+.status {
+  margin-left: auto;
+  gap: 0.5rem;
+  font-size: 0.6rem;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 0 1.5rem;
+}
+
+.statusDot {
+  width: 6px;
+  height: 6px;
+  background: var(--chaos-blood, #ff0040);
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+.blink {
+  animation: blink 1s step-start infinite;
+  color: var(--chaos-blood, #ff0040);
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}

package/components/navigation/scroll-indicator/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState } from 'react';
+import styles from './scroll-indicator.module.css';
+
+export interface ScrollIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  text?: string;
+  showArrow?: boolean;
+  showPercentage?: boolean;
+  variant?: 'default' | 'blood' | 'minimal';
+  position?: 'right' | 'left';
+  trackHeight?: number;
+}
+
+export const ScrollIndicator = forwardRef<HTMLDivElement, ScrollIndicatorProps>(
+  ({ text = 'SCROLL', showArrow = false, showPercentage = false, variant = 'default', position = 'right', trackHeight = 100, className, ...props }, ref) => {
+    const [scrollProgress, setScrollProgress] = useState(0);
+
+    useEffect(() => {
+      const handleScroll = () => {
+        const scrollTop = window.scrollY;
+        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+        setScrollProgress(Math.min(100, Math.max(0, progress)));
+      };
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+      handleScroll();
+      return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const thumbTop = (scrollProgress / 100) * (trackHeight - 20);
+
+    const containerClasses = [
+      styles.container,
+      variant === 'blood' && styles.variantBlood,
+      variant === 'minimal' && styles.variantMinimal,
+      position === 'left' && styles.positionLeft,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        <div className={styles.inner}>
+          {showArrow && <span className={styles.arrow}>↓</span>}
+          <div className={styles.track} style={{ height: trackHeight }}>
+            <div className={styles.thumb} style={{ top: thumbTop }} />
+          </div>
+          {text && <span className={styles.text}>{text}</span>}
+          {showPercentage && <span className={styles.percentage}>{Math.round(scrollProgress)}%</span>}
+        </div>
+      </div>
+    );
+  }
+);
+
+ScrollIndicator.displayName = 'ScrollIndicator';
+export default ScrollIndicator;

package/components/navigation/scroll-indicator/scroll-indicator.module.css

@@ -0,0 +1,82 @@
+/* scroll-indicator - Indicateur de scroll vertical avec texte */
+.container {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.track {
+  width: 2px;
+  height: 100px;
+  background: var(--chaos-iron, #2a2820);
+  position: relative;
+  border-radius: 1px;
+}
+
+.thumb {
+  width: 6px;
+  height: 20px;
+  background: var(--chaos-gold, #c9a227);
+  position: absolute;
+  left: -2px;
+  top: 0;
+  border-radius: 3px;
+  transition: top 0.3s ease-out;
+  box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
+}
+
+.text {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  font-family: var(--chaos-font-serif, 'Cinzel', serif);
+  font-size: 0.5rem;
+  letter-spacing: 0.4em;
+  color: var(--chaos-bone-dark, #9a8b6f);
+  transform: rotate(180deg);
+  text-transform: uppercase;
+}
+
+.arrow {
+  animation: bounce 2s ease-in-out infinite;
+  color: var(--chaos-gold, #c9a227);
+  font-size: 0.8rem;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(5px); opacity: 0.5; }
+}
+
+.variantBlood .track { background: rgba(255, 0, 64, 0.2); }
+.variantBlood .thumb { background: var(--chaos-blood, #ff0040); box-shadow: 0 0 10px rgba(255, 0, 64, 0.5); }
+.variantBlood .text { color: var(--chaos-bone-dark, #666); }
+.variantBlood .arrow { color: var(--chaos-blood, #ff0040); }
+
+.variantMinimal .track { width: 1px; height: 60px; }
+.variantMinimal .thumb { width: 3px; height: 10px; left: -1px; }
+.variantMinimal .text { display: none; }
+
+.positionLeft { left: 0; right: auto; }
+.positionLeft .text { transform: rotate(0deg); }
+
+.percentage {
+  font-family: var(--chaos-font-mono, monospace);
+  font-size: 0.6rem;
+  color: var(--chaos-gold, #c9a227);
+  margin-top: 0.5rem;
+}
+
+.variantBlood .percentage { color: var(--chaos-blood, #ff0040); }

package/components/navigation/vertical-nav/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import styles from './vertical-nav.module.css';
+
+export interface VerticalNavItemProps {
+  href?: string;
+  glyph: string;
+  label?: string;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export interface VerticalNavProps extends HTMLAttributes<HTMLElement> {
+  items?: VerticalNavItemProps[];
+  runeTop?: string;
+  runeBottom?: string;
+  variant?: 'default' | 'dark';
+  size?: 'default' | 'compact';
+  children?: ReactNode;
+}
+
+export const VerticalNavItem = forwardRef<HTMLAnchorElement, VerticalNavItemProps>(
+  ({ href, glyph, label, active, onClick, ...props }, ref) => {
+    const classes = [styles.glyph, active && styles.glyphActive].filter(Boolean).join(' ');
+    
+    if (href) {
+      return <a ref={ref} href={href} className={classes} data-label={label} onClick={onClick} {...props}>{glyph}</a>;
+    }
+    return <button className={classes} data-label={label} onClick={onClick} {...props}>{glyph}</button>;
+  }
+);
+
+VerticalNavItem.displayName = 'VerticalNavItem';
+
+export const VerticalNav = forwardRef<HTMLElement, VerticalNavProps>(
+  ({ items, runeTop = 'ᛟ', runeBottom = 'ᛞ', variant = 'default', size = 'default', children, className, ...props }, ref) => {
+    const classes = [
+      styles.nav,
+      variant === 'dark' && styles.variantDark,
+      size === 'compact' && styles.sizeCompact,
+      className,
+    ].filter(Boolean).join(' ');
+
+    return (
+      <nav ref={ref} className={classes} {...props}>
+        <div className={styles.rune}>{runeTop}</div>
+        <div className={styles.items}>
+          {items?.map((item, i) => <VerticalNavItem key={i} {...item} />)}
+          {children}
+        </div>
+        <div className={styles.rune}>{runeBottom}</div>
+      </nav>
+    );
+  }
+);
+
+VerticalNav.displayName = 'VerticalNav';
+export default VerticalNav;

package/components/navigation/vertical-nav/vertical-nav.module.css

@@ -0,0 +1,98 @@
+/* vertical-nav - Nav latérale avec glyphes/runes */
+.nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 80px;
+  background: linear-gradient(to right, var(--chaos-obsidian, #121210) 0%, transparent 100%);
+  border-right: 1px solid var(--chaos-iron, #2a2820);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 0;
+  z-index: 100;
+}
+
+.rune {
+  font-size: 1.5rem;
+  color: var(--chaos-gold-dark, #8b7017);
+  opacity: 0.5;
+  animation: runeGlow 4s ease-in-out infinite;
+}
+
+@keyframes runeGlow {
+  0%, 100% { opacity: 0.3; text-shadow: none; }
+  50% { opacity: 0.8; text-shadow: 0 0 10px var(--chaos-gold, #c9a227); }
+}
+
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.glyph {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--chaos-font-display, 'Cinzel Decorative', serif);
+  font-size: 1rem;
+  color: var(--chaos-bone-dark, #9a8b6f);
+  text-decoration: none;
+  border: 1px solid var(--chaos-iron, #2a2820);
+  position: relative;
+  transition: all 0.4s;
+}
+
+.glyph::before {
+  content: attr(data-label);
+  position: absolute;
+  left: 60px;
+  font-family: var(--chaos-font-serif, 'Cinzel', serif);
+  font-size: 0.6rem;
+  letter-spacing: 0.3em;
+  color: var(--chaos-bone-dark, #9a8b6f);
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: all 0.3s;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+
+.glyph:hover {
+  color: var(--chaos-gold, #c9a227);
+  border-color: var(--chaos-gold, #c9a227);
+  background: rgba(201, 162, 39, 0.1);
+}
+
+.glyph:hover::before {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.glyphActive {
+  color: var(--chaos-gold, #c9a227);
+  border-color: var(--chaos-gold, #c9a227);
+  box-shadow: 0 0 15px rgba(201, 162, 39, 0.3);
+}
+
+.variantDark {
+  background: linear-gradient(to right, var(--chaos-void, #0a0a0a) 0%, transparent 100%);
+  border-right-color: var(--chaos-blood, #ff0040);
+}
+
+.variantDark .rune { color: var(--chaos-blood, #ff0040); }
+.variantDark .glyph { border-color: rgba(255, 0, 64, 0.3); }
+.variantDark .glyph:hover {
+  color: var(--chaos-blood, #ff0040);
+  border-color: var(--chaos-blood, #ff0040);
+  background: rgba(255, 0, 64, 0.1);
+}
+
+.sizeCompact { width: 50px; padding: 1rem 0; }
+.sizeCompact .glyph { width: 30px; height: 30px; font-size: 0.8rem; }
+.sizeCompact .rune { font-size: 1rem; }

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './neon-alert.module.css';
+
+export interface NeonAlertProps extends HTMLAttributes<HTMLDivElement> {
+  /** Alert type */
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  /** Alert title */
+  title?: string;
+  /** Dismissible with close button */
+  dismissible?: boolean;
+  /** Close callback */
+  onDismiss?: () => void;
+}
+
+export const NeonAlert = forwardRef<HTMLDivElement, NeonAlertProps>(
+  (
+    {
+      children,
+      variant = 'info',
+      title,
+      dismissible = false,
+      onDismiss,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div 
+        ref={ref} 
+        className={`${styles.alert} ${styles[variant]} ${className || ''}`}
+        role="alert"
+        {...props}
+      >
+        <div className={styles.content}>
+          {title && <div className={styles.title}>{title}</div>}
+          <div className={styles.message}>{children}</div>
+        </div>
+        {dismissible && (
+          <button className={styles.dismiss} onClick={onDismiss} aria-label="Dismiss">
+            ✕
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+NeonAlert.displayName = 'NeonAlert';
+
+export default NeonAlert;

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

@@ -0,0 +1,60 @@
+.alert {
+  --alert-color: #00f0ff;
+  
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--alert-color);
+  border-left: 4px solid var(--alert-color);
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
+  animation: alert-slide 0.3s ease-out;
+}
+
+@keyframes alert-slide {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.info { --alert-color: #00f0ff; }
+.success { --alert-color: #00ff88; }
+.warning { --alert-color: #ffaa00; }
+.error { --alert-color: #ff0040; }
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  margin-bottom: 0.25rem;
+  font-family: var(--font-display, 'Orbitron', sans-serif);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.0625em;
+  color: var(--alert-color);
+}
+
+.message {
+  font-family: var(--font-body, 'Rajdhani', sans-serif);
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.5;
+}
+
+.dismiss {
+  flex-shrink: 0;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.dismiss:hover {
+  color: var(--alert-color);
+}