@oalacea/chaosui 0.4.0 → 0.5.1

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

@@ -0,0 +1,152 @@
+/* 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);
+}
+
+/* Label on hover */
+.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);
+}
+
+/* Connector line between dots */
+.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%);
+}
+
+/* Variant: gold/medieval */
+.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);
+}
+
+/* Variant: minimal */
+.variantMinimal .dot {
+  width: 8px;
+  height: 8px;
+  border-width: 1px;
+}
+
+/* Horizontal variant */
+.horizontal {
+  flex-direction: row;
+  top: auto;
+  bottom: 2rem;
+  right: 50%;
+  transform: translateX(50%);
+}
+
+.horizontal .label {
+  right: 50%;
+  top: auto;
+  bottom: 100%;
+  transform: translateX(50%);
+  padding-right: 0;
+  padding-bottom: 0.5rem;
+}
+
+.horizontal.withConnector .dot:not(:last-child)::after {
+  top: 50%;
+  left: 100%;
+  width: 1.5rem;
+  height: 1px;
+  transform: translateY(-50%);
+}

package/navigation/progress-dots/tailwind/index.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface ProgressDotItem {
+  id: string;
+  label?: string;
+  href?: string;
+}
+
+export interface ProgressDotsProps extends HTMLAttributes<HTMLDivElement> {
+  items: ProgressDotItem[];
+  activeId?: string;
+  variant?: 'default' | 'gold' | 'minimal';
+  direction?: 'vertical' | 'horizontal';
+  showConnector?: boolean;
+  onDotClick?: (id: string) => void;
+}
+
+const variantColors: Record<string, { border: string; active: string; shadow: string }> = {
+  default: { border: 'border-gray-600', active: 'border-red-500 shadow-[0_0_10px_rgba(255,0,64,0.5)]', shadow: 'bg-red-500' },
+  gold: { border: 'border-amber-700', active: 'border-amber-500 shadow-[0_0_10px_rgba(201,162,39,0.5)]', shadow: 'bg-amber-500' },
+  minimal: { border: 'border-gray-600', active: 'border-red-500', shadow: 'bg-red-500' },
+};
+
+export const ProgressDots = forwardRef<HTMLDivElement, ProgressDotsProps>(
+  ({ items, activeId, variant = 'default', direction = 'vertical', showConnector = false, onDotClick, className, ...props }, ref) => {
+    const colors = variantColors[variant];
+    
+    const containerClasses = `
+      fixed z-50 flex gap-6
+      ${direction === 'vertical' 
+        ? 'right-8 top-1/2 -translate-y-1/2 flex-col' 
+        : 'bottom-8 left-1/2 -translate-x-1/2 flex-row'
+      }
+      ${className || ''}
+    `;
+
+    const handleClick = (id: string, href?: string) => {
+      if (onDotClick) onDotClick(id);
+      if (href) {
+        const el = document.querySelector(href);
+        el?.scrollIntoView({ behavior: 'smooth' });
+      }
+    };
+
+    return (
+      <div ref={ref} className={containerClasses} {...props}>
+        {items.map((item) => {
+          const isActive = activeId === item.id;
+          const dotSize = variant === 'minimal' ? 'w-2 h-2 border' : 'w-3 h-3 border-2';
+          
+          return (
+            <button
+              key={item.id}
+              className={`
+                ${dotSize} rounded-full bg-transparent cursor-pointer transition-all relative group
+                ${isActive ? colors.active : `${colors.border} hover:border-red-500`}
+              `}
+              onClick={() => handleClick(item.id, item.href)}
+              aria-label={item.label || `Go to section ${item.id}`}
+            >
+              {/* Inner dot */}
+              <span className={`
+                absolute inset-[2px] rounded-full transition-transform
+                ${colors.shadow}
+                ${isActive ? 'scale-100' : 'scale-0 group-hover:scale-50'}
+              `} />
+              
+              {/* Label */}
+              {item.label && (
+                <span className={`
+                  absolute whitespace-nowrap text-[0.6rem] tracking-[0.2em] uppercase font-mono
+                  transition-opacity
+                  ${direction === 'vertical' 
+                    ? 'right-full top-1/2 -translate-y-1/2 pr-4' 
+                    : 'bottom-full left-1/2 -translate-x-1/2 pb-2'
+                  }
+                  ${isActive ? 'opacity-100 text-red-500' : 'opacity-0 group-hover:opacity-100 text-gray-500'}
+                `}>
+                  {item.label}
+                </span>
+              )}
+              
+              {/* Connector */}
+              {showConnector && (
+                <span className={`
+                  absolute bg-gray-700
+                  ${direction === 'vertical' 
+                    ? 'top-full left-1/2 -translate-x-1/2 w-px h-6' 
+                    : 'left-full top-1/2 -translate-y-1/2 h-px w-6'
+                  }
+                  last:hidden
+                `} />
+              )}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+ProgressDots.displayName = 'ProgressDots';
+export default ProgressDots;

package/navigation/scattered-nav/css/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/navigation/scattered-nav/css/scattered-nav.module.css

@@ -0,0 +1,121 @@
+/* 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);
+}
+
+/* Scattered positions - each item slightly offset */
+.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 variant */
+.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;
+  position: relative;
+}
+
+.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 item */
+.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 indicator */
+.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 item */
+.blink {
+  animation: blink 1s step-start infinite;
+  color: var(--chaos-blood, #ff0040);
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+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;
+}
+
+const scatteredClasses: Record<number, string> = {
+  1: 'translate-y-[3px]',
+  2: '-rotate-2 border-l border-red-500',
+  3: '-translate-y-[2px] rotate-1',
+  4: '-translate-x-[3px]',
+  5: 'rotate-[1.5deg] translate-y-[1px]',
+};
+
+const variantClasses: Record<string, string> = {
+  default: 'text-gray-500 hover:bg-red-500 hover:text-black',
+  logo: 'bg-red-500 text-black font-display text-xl px-6',
+  corrupt: 'font-mono text-red-500 text-[0.6rem] opacity-50 animate-pulse',
+  status: 'ml-auto bg-black/30 px-6 text-[0.6rem]',
+  blink: 'text-red-500 animate-pulse',
+};
+
+export const ScatteredNavItem = forwardRef<HTMLAnchorElement | HTMLDivElement, ScatteredNavItemProps>(
+  ({ href, children, variant = 'default', scattered, glitchText, ...props }, ref) => {
+    const classes = `
+      flex items-center justify-center px-4 h-full text-[0.7rem] tracking-widest uppercase
+      font-mono border-r border-white/10 transition-all
+      ${variantClasses[variant]}
+      ${scattered ? scatteredClasses[scattered] : ''}
+    `;
+
+    const content = variant === 'status' ? (
+      <>
+        <span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse mr-2" />
+        {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={`fixed top-0 left-0 right-0 z-50 h-[60px] bg-black border-b border-red-500 flex items-center px-4 ${className || ''}`} 
+        {...props}
+      >
+        {items?.map((item, i) => (
+          <ScatteredNavItem key={i} {...item} />
+        ))}
+        {children}
+      </nav>
+    );
+  }
+);
+
+ScatteredNav.displayName = 'ScatteredNav';
+export default ScatteredNav;

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

@@ -0,0 +1,72 @@
+'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);
+    const [isPulsing, setIsPulsing] = useState(false);
+
+    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)));
+        
+        // Trigger pulse effect
+        setIsPulsing(true);
+        setTimeout(() => setIsPulsing(false), 500);
+      };
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+      handleScroll(); // Initial call
+      
+      return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const thumbTop = (scrollProgress / 100) * (trackHeight - 20); // 20 = thumb height
+
+    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} ${isPulsing ? styles.thumbPulsing : ''}`}
+              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;