@oalacea/chaosui 0.5.0 → 0.5.1

package/{components/navigation/scroll-indicator → navigation/scroll-indicator/css}/index.tsx

@@ -15,6 +15,7 @@ export interface ScrollIndicatorProps extends HTMLAttributes<HTMLDivElement> {
 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 = () => {
@@ -22,14 +23,19 @@ export const ScrollIndicator = forwardRef<HTMLDivElement, ScrollIndicatorProps>(
         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();
+      handleScroll(); // Initial call
+      
       return () => window.removeEventListener('scroll', handleScroll);
     }, []);
 
-    const thumbTop = (scrollProgress / 100) * (trackHeight - 20);
+    const thumbTop = (scrollProgress / 100) * (trackHeight - 20); // 20 = thumb height
 
     const containerClasses = [
       styles.container,
@@ -43,11 +49,19 @@ export const ScrollIndicator = forwardRef<HTMLDivElement, ScrollIndicatorProps>(
       <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 
+              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>}
+          
+          {showPercentage && (
+            <span className={styles.percentage}>{Math.round(scrollProgress)}%</span>
+          )}
         </div>
       </div>
     );

package/{components/navigation/scroll-indicator → navigation/scroll-indicator/css}/scroll-indicator.module.css

@@ -49,6 +49,7 @@
   text-transform: uppercase;
 }
 
+/* Animated arrow */
 .arrow {
   animation: bounce 2s ease-in-out infinite;
   color: var(--chaos-gold, #c9a227);
@@ -60,18 +61,51 @@
   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); }
+/* 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 .track { width: 1px; height: 60px; }
-.variantMinimal .thumb { width: 3px; height: 10px; left: -1px; }
-.variantMinimal .text { display: none; }
+.variantMinimal .text {
+  display: none;
+}
 
-.positionLeft { left: 0; right: auto; }
-.positionLeft .text { transform: rotate(0deg); }
+/* 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;
@@ -79,4 +113,17 @@
   margin-top: 0.5rem;
 }
 
-.variantBlood .percentage { color: var(--chaos-blood, #ff0040); }
+.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/{components/navigation/vertical-nav → navigation/vertical-nav/css}/index.tsx

@@ -25,9 +25,17 @@ export const VerticalNavItem = forwardRef<HTMLAnchorElement, VerticalNavItemProp
     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 (
+        <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>;
+    return (
+      <button className={classes} data-label={label} onClick={onClick} {...props}>
+        {glyph}
+      </button>
+    );
   }
 );
 
@@ -46,7 +54,9 @@ export const VerticalNav = forwardRef<HTMLElement, VerticalNavProps>(
       <nav ref={ref} className={classes} {...props}>
         <div className={styles.rune}>{runeTop}</div>
         <div className={styles.items}>
-          {items?.map((item, i) => <VerticalNavItem key={i} {...item} />)}
+          {items?.map((item, i) => (
+            <VerticalNavItem key={i} {...item} />
+          ))}
           {children}
         </div>
         <div className={styles.rune}>{runeBottom}</div>

package/{components/navigation/vertical-nav → navigation/vertical-nav/css}/vertical-nav.module.css

@@ -80,19 +80,38 @@
   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 .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; }
+/* 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.5.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"
   }
 }