@oalacea/chaosui 0.4.0 → 0.5.1

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

@@ -0,0 +1,129 @@
+/* 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;
+}
+
+/* Animated arrow */
+.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; }
+}
+
+/* Variant: blood/red */
+.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);
+}
+
+/* Variant: minimal */
+.variantMinimal .track {
+  width: 1px;
+  height: 60px;
+}
+
+.variantMinimal .thumb {
+  width: 3px;
+  height: 10px;
+  left: -1px;
+}
+
+.variantMinimal .text {
+  display: none;
+}
+
+/* Left position */
+.positionLeft {
+  left: 0;
+  right: auto;
+}
+
+.positionLeft .text {
+  transform: rotate(0deg);
+}
+
+/* Percentage display */
+.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);
+}
+
+/* Pulse effect on scroll */
+.thumbPulsing {
+  animation: thumbPulse 0.5s ease-out;
+}
+
+@keyframes thumbPulse {
+  0% { box-shadow: 0 0 10px currentColor; }
+  50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
+  100% { box-shadow: 0 0 10px currentColor; }
+}

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState } from 'react';
+
+export interface ScrollIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  text?: string;
+  showArrow?: boolean;
+  showPercentage?: boolean;
+  variant?: 'default' | 'blood' | 'minimal';
+  position?: 'right' | 'left';
+  trackHeight?: number;
+}
+
+const variantStyles: Record<string, { track: string; thumb: string; text: string }> = {
+  default: {
+    track: 'bg-stone-700',
+    thumb: 'bg-amber-500 shadow-[0_0_10px_rgba(201,162,39,0.3)]',
+    text: 'text-stone-500',
+  },
+  blood: {
+    track: 'bg-red-500/20',
+    thumb: 'bg-red-500 shadow-[0_0_10px_rgba(255,0,64,0.5)]',
+    text: 'text-gray-500',
+  },
+  minimal: {
+    track: 'bg-stone-700',
+    thumb: 'bg-amber-500',
+    text: 'text-stone-500',
+  },
+};
+
+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 colors = variantStyles[variant];
+    const thumbTop = (scrollProgress / 100) * (trackHeight - 20);
+    const isMinimal = variant === 'minimal';
+
+    return (
+      <div 
+        ref={ref} 
+        className={`
+          fixed top-0 bottom-0 w-[60px] flex items-center justify-center z-50
+          ${position === 'left' ? 'left-0' : 'right-0'}
+          ${className || ''}
+        `} 
+        {...props}
+      >
+        <div className="flex flex-col items-center gap-4">
+          {showArrow && (
+            <span className={`animate-bounce ${variant === 'blood' ? 'text-red-500' : 'text-amber-500'}`}>
+              ↓
+            </span>
+          )}
+          
+          <div 
+            className={`relative rounded-sm ${isMinimal ? 'w-px' : 'w-0.5'} ${colors.track}`}
+            style={{ height: trackHeight }}
+          >
+            <div 
+              className={`
+                absolute rounded transition-all duration-300
+                ${isMinimal ? 'w-[3px] h-[10px] -left-px' : 'w-1.5 h-5 -left-0.5'}
+                ${colors.thumb}
+              `}
+              style={{ top: thumbTop }}
+            />
+          </div>
+          
+          {text && !isMinimal && (
+            <span className={`
+              [writing-mode:vertical-rl] text-[0.5rem] tracking-[0.4em] uppercase font-serif
+              ${position === 'left' ? '' : 'rotate-180'}
+              ${colors.text}
+            `}>
+              {text}
+            </span>
+          )}
+          
+          {showPercentage && (
+            <span className={`font-mono text-[0.6rem] ${variant === 'blood' ? 'text-red-500' : 'text-amber-500'}`}>
+              {Math.round(scrollProgress)}%
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+ScrollIndicator.displayName = 'ScrollIndicator';
+export default ScrollIndicator;

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

@@ -0,0 +1,69 @@
+'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/navigation/vertical-nav/css/vertical-nav.module.css

@@ -0,0 +1,117 @@
+/* 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);
+}
+
+/* Variants */
+.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);
+}
+
+/* Size variants */
+.sizeCompact {
+  width: 50px;
+  padding: 1rem 0;
+}
+
+.sizeCompact .glyph {
+  width: 30px;
+  height: 30px;
+  font-size: 0.8rem;
+}
+
+.sizeCompact .rune {
+  font-size: 1rem;
+}

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

@@ -0,0 +1,91 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
+
+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 baseClasses = `
+      w-10 h-10 flex items-center justify-center font-display text-base
+      border transition-all duration-300 relative group
+      ${active 
+        ? 'text-amber-500 border-amber-500 shadow-[0_0_15px_rgba(201,162,39,0.3)]' 
+        : 'text-stone-500 border-stone-700 hover:text-amber-500 hover:border-amber-500 hover:bg-amber-500/10'
+      }
+    `;
+
+    const labelEl = label && (
+      <span className="absolute left-[60px] text-[0.6rem] tracking-[0.3em] text-stone-500 uppercase whitespace-nowrap opacity-0 -translate-x-2 transition-all group-hover:opacity-100 group-hover:translate-x-0">
+        {label}
+      </span>
+    );
+
+    if (href) {
+      return (
+        <a ref={ref} href={href} className={baseClasses} onClick={onClick} {...props}>
+          {glyph}
+          {labelEl}
+        </a>
+      );
+    }
+    return (
+      <button className={baseClasses} onClick={onClick} {...props}>
+        {glyph}
+        {labelEl}
+      </button>
+    );
+  }
+);
+
+VerticalNavItem.displayName = 'VerticalNavItem';
+
+export const VerticalNav = forwardRef<HTMLElement, VerticalNavProps>(
+  ({ items, runeTop = 'ᛟ', runeBottom = 'ᛞ', variant = 'default', size = 'default', children, className, ...props }, ref) => {
+    const navClasses = `
+      fixed left-0 top-0 bottom-0 z-50 flex flex-col items-center justify-between
+      ${size === 'compact' ? 'w-[50px] py-4' : 'w-20 py-8'}
+      ${variant === 'dark' 
+        ? 'bg-gradient-to-r from-black to-transparent border-r border-red-500' 
+        : 'bg-gradient-to-r from-stone-900 to-transparent border-r border-stone-700'
+      }
+      ${className || ''}
+    `;
+
+    const runeClasses = `
+      text-2xl animate-pulse
+      ${variant === 'dark' ? 'text-red-500' : 'text-amber-700'}
+    `;
+
+    return (
+      <nav ref={ref} className={navClasses} {...props}>
+        <div className={runeClasses}>{runeTop}</div>
+        <div className="flex flex-col gap-12">
+          {items?.map((item, i) => (
+            <VerticalNavItem key={i} {...item} />
+          ))}
+          {children}
+        </div>
+        <div className={runeClasses}>{runeBottom}</div>
+      </nav>
+    );
+  }
+);
+
+VerticalNav.displayName = 'VerticalNav';
+export default VerticalNav;

package/package.json

@@ -1,38 +1,13 @@
 {
   "name": "@oalacea/chaosui",
-  "version": "0.4.0",
-  "description": "Glitch, noise, and distortion components for React. Copy-paste like shadcn.",
+  "version": "0.5.1",
+  "description": "Glitch, noise, and distortion UI components",
   "type": "module",
-  "bin": {
-    "chaos-ui": "./bin/cli.js",
-    "chaosui": "./bin/cli.js"
-  },
-  "files": [
-    "bin",
-    "components"
-  ],
-  "keywords": [
-    "react",
-    "components",
-    "glitch",
-    "noise",
-    "distortion",
-    "ui",
-    "effects",
-    "css",
-    "animation"
-  ],
-  "author": "Oalacea",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Pamacea/chaos.git"
-  },
-  "homepage": "https://github.com/Pamacea/chaos",
-  "dependencies": {
-    "commander": "^12.0.0",
-    "picocolors": "^1.0.0",
-    "prompts": "^2.4.2",
-    "fs-extra": "^11.2.0"
+  "exports": {
+    "./text/*": "./text/*/index.tsx",
+    "./overlays/*": "./overlays/*/index.tsx",
+    "./buttons/*": "./buttons/*/index.tsx",
+    "./effects/*": "./effects/*/index.tsx",
+    "./backgrounds/*": "./backgrounds/*/index.tsx"
   }
 }