@oalacea/chaosui 0.5.0 → 0.5.1

package/navigation/brutal-nav/css/brutal-nav.module.css

@@ -0,0 +1,178 @@
+/* brutal-nav - Nav brutaliste chaotique avec status */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: var(--chaos-void, #0a0a0a);
+  border-bottom: 3px solid var(--chaos-blood, #ff0040);
+  font-family: var(--chaos-font-mono, 'Space Mono', monospace);
+}
+
+.inner {
+  display: flex;
+  align-items: stretch;
+  height: 60px;
+}
+
+.brand {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+  font-family: var(--chaos-font-display, 'Bebas Neue', sans-serif);
+  font-size: 1.5rem;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.links {
+  display: flex;
+  flex: 1;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--chaos-bone-dark, #888);
+  text-decoration: none;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+  transition: all 0.15s;
+}
+
+.link:hover {
+  background: var(--chaos-blood, #ff0040);
+  color: var(--chaos-void, #0a0a0a);
+}
+
+.linkActive {
+  background: rgba(255, 0, 64, 0.1);
+  color: var(--chaos-blood, #ff0040);
+}
+
+.linkActive::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--chaos-blood, #ff0040);
+}
+
+/* Status section */
+.status {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 0 2rem;
+  background: rgba(0, 0, 0, 0.5);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.statusItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.statusLabel {
+  font-size: 0.5rem;
+  color: var(--chaos-bone-dark, #666);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.statusValue {
+  font-size: 0.7rem;
+  color: var(--chaos-blood, #ff0040);
+  font-weight: bold;
+}
+
+.statusOnline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.dotOnline { background: #00ff00; box-shadow: 0 0 10px #00ff00; }
+.dotOffline { background: #ff0040; }
+.dotWarning { background: #ffaa00; animation: blink 0.5s infinite; }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+/* Glitch brand effect */
+.brandGlitch {
+  position: relative;
+}
+
+.brandGlitch::before,
+.brandGlitch::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.brandGlitch::before {
+  animation: glitch1 0.3s infinite;
+  color: cyan;
+  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+  z-index: -1;
+}
+
+.brandGlitch::after {
+  animation: glitch2 0.3s infinite;
+  color: yellow;
+  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+  z-index: -1;
+}
+
+@keyframes glitch1 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(2px, -2px); }
+}
+
+@keyframes glitch2 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(2px, -2px); }
+  40% { transform: translate(-2px, 2px); }
+}
+
+/* Brutal border variants */
+.variantHeavy {
+  border-bottom-width: 5px;
+}
+
+.variantHeavy .brand {
+  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
+  padding-right: 3rem;
+}
+
+.variantDouble {
+  border-bottom: 2px solid var(--chaos-blood, #ff0040);
+  box-shadow: 0 4px 0 0 var(--chaos-blood, #ff0040);
+}

package/{components/navigation/brutal-nav → navigation/brutal-nav/css}/index.tsx

@@ -17,6 +17,7 @@ export interface BrutalNavStatusProps {
 
 export interface BrutalNavProps extends HTMLAttributes<HTMLElement> {
   brand: string;
+  brandGlitch?: boolean;
   links?: BrutalNavLinkProps[];
   statusItems?: BrutalNavStatusProps[];
   variant?: 'default' | 'heavy' | 'double';
@@ -24,7 +25,7 @@ export interface BrutalNavProps extends HTMLAttributes<HTMLElement> {
 }
 
 export const BrutalNav = forwardRef<HTMLElement, BrutalNavProps>(
-  ({ brand, links, statusItems, variant = 'default', children, className, ...props }, ref) => {
+  ({ brand, brandGlitch, links, statusItems, variant = 'default', children, className, ...props }, ref) => {
     const navClasses = [
       styles.nav,
       variant === 'heavy' && styles.variantHeavy,
@@ -35,11 +36,19 @@ export const BrutalNav = forwardRef<HTMLElement, BrutalNavProps>(
     return (
       <nav ref={ref} className={navClasses} {...props}>
         <div className={styles.inner}>
-          <div className={styles.brand}>{brand}</div>
+          <div className={styles.brand}>
+            {brandGlitch ? (
+              <span className={styles.brandGlitch} data-text={brand}>{brand}</span>
+            ) : brand}
+          </div>
           
           <div className={styles.links}>
             {links?.map((link, i) => (
-              <a key={i} href={link.href} className={`${styles.link} ${link.active ? styles.linkActive : ''}`}>
+              <a 
+                key={i} 
+                href={link.href} 
+                className={`${styles.link} ${link.active ? styles.linkActive : ''}`}
+              >
                 {link.children}
               </a>
             ))}

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

@@ -0,0 +1,95 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+export interface BrutalNavLinkProps {
+  href: string;
+  children: ReactNode;
+  active?: boolean;
+}
+
+export interface BrutalNavStatusProps {
+  label: string;
+  value: string;
+  status?: 'online' | 'offline' | 'warning';
+}
+
+export interface BrutalNavProps extends HTMLAttributes<HTMLElement> {
+  brand: string;
+  brandGlitch?: boolean;
+  links?: BrutalNavLinkProps[];
+  statusItems?: BrutalNavStatusProps[];
+  variant?: 'default' | 'heavy' | 'double';
+  children?: ReactNode;
+}
+
+const dotClasses: Record<string, string> = {
+  online: 'bg-green-500 shadow-[0_0_10px_#00ff00]',
+  offline: 'bg-red-500',
+  warning: 'bg-amber-500 animate-pulse',
+};
+
+export const BrutalNav = forwardRef<HTMLElement, BrutalNavProps>(
+  ({ brand, brandGlitch, links, statusItems, variant = 'default', children, className, ...props }, ref) => {
+    const navClasses = `
+      fixed top-0 left-0 right-0 z-50 bg-black font-mono
+      ${variant === 'heavy' ? 'border-b-[5px] border-red-500' : ''}
+      ${variant === 'double' ? 'border-b-2 border-red-500 shadow-[0_4px_0_0_#ff0040]' : ''}
+      ${variant === 'default' ? 'border-b-[3px] border-red-500' : ''}
+      ${className || ''}
+    `;
+
+    return (
+      <nav ref={ref} className={navClasses} {...props}>
+        <div className="flex items-stretch h-[60px]">
+          <div className={`
+            bg-red-500 text-black font-display text-2xl px-8 flex items-center 
+            tracking-wider uppercase
+            ${variant === 'heavy' ? 'clip-path-[polygon(0_0,100%_0,90%_100%,0_100%)] pr-12' : ''}
+          `}>
+            {brand}
+          </div>
+          
+          <div className="flex flex-1">
+            {links?.map((link, i) => (
+              <a 
+                key={i} 
+                href={link.href} 
+                className={`
+                  flex items-center px-6 text-xs tracking-[0.15em] uppercase
+                  border-r border-white/10 transition-all
+                  ${link.active 
+                    ? 'bg-red-500/10 text-red-500 relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-red-500' 
+                    : 'text-gray-500 hover:bg-red-500 hover:text-black'
+                  }
+                `}
+              >
+                {link.children}
+              </a>
+            ))}
+            {children}
+          </div>
+
+          {statusItems && statusItems.length > 0 && (
+            <div className="ml-auto flex items-center gap-8 px-8 bg-black/50 border-l border-white/10">
+              {statusItems.map((item, i) => (
+                <div key={i} className="flex flex-col gap-0.5">
+                  <span className="text-[0.5rem] text-gray-600 tracking-[0.2em] uppercase">{item.label}</span>
+                  <span className="flex items-center gap-2">
+                    {item.status && (
+                      <span className={`w-2 h-2 rounded-full ${dotClasses[item.status]} animate-pulse`} />
+                    )}
+                    <span className="text-xs text-red-500 font-bold">{item.value}</span>
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </nav>
+    );
+  }
+);
+
+BrutalNav.displayName = 'BrutalNav';
+export default BrutalNav;

package/{components/navigation/progress-dots → navigation/progress-dots/css}/index.tsx

@@ -30,8 +30,13 @@ export const ProgressDots = forwardRef<HTMLDivElement, ProgressDotsProps>(
     ].filter(Boolean).join(' ');
 
     const handleClick = (id: string, href?: string) => {
-      if (onDotClick) onDotClick(id);
-      if (href) document.querySelector(href)?.scrollIntoView({ behavior: 'smooth' });
+      if (onDotClick) {
+        onDotClick(id);
+      }
+      if (href) {
+        const el = document.querySelector(href);
+        el?.scrollIntoView({ behavior: 'smooth' });
+      }
     };
 
     return (

package/{components/navigation/progress-dots → navigation/progress-dots/css}/progress-dots.module.css

@@ -31,17 +31,29 @@
   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); }
+.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); }
+.dotActive::before {
+  transform: scale(1);
+  background: var(--chaos-blood, #ff0040);
+}
 
-.dotWithLabel { position: relative; }
+/* Label on hover */
+.dotWithLabel {
+  position: relative;
+}
 
 .label {
   position: absolute;
@@ -59,9 +71,16 @@
   font-family: var(--chaos-font-mono, monospace);
 }
 
-.dot:hover .label { opacity: 1; }
-.dotActive .label { opacity: 1; color: var(--chaos-blood, #ff0040); }
+.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;
@@ -73,15 +92,40 @@
   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); }
+/* 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);
+}
 
-.variantMinimal .dot { width: 8px; height: 8px; border-width: 1px; }
+.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;
@@ -89,3 +133,20 @@
   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/{components/navigation/scattered-nav → navigation/scattered-nav/css}/scattered-nav.module.css

@@ -34,21 +34,26 @@
   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 {
+  position: relative;
+}
 
 .glitch::before {
   content: attr(data-text);
@@ -67,6 +72,7 @@
   75% { clip-path: inset(60% 0 20% 0); }
 }
 
+/* Corrupt item */
 .corrupt {
   font-family: var(--chaos-font-mono, monospace);
   color: var(--chaos-blood, #ff0040);
@@ -80,6 +86,7 @@
   92%, 94%, 96% { opacity: 0; }
 }
 
+/* Status indicator */
 .status {
   margin-left: auto;
   gap: 0.5rem;
@@ -103,6 +110,7 @@
   50% { opacity: 0.5; transform: scale(0.8); }
 }
 
+/* Blink item */
 .blink {
   animation: blink 1s step-start infinite;
   color: var(--chaos-blood, #ff0040);

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;