@oalacea/chaosui 0.4.0 → 0.5.1

package/text/rotate-text/css/rotate-text.module.css

@@ -0,0 +1,162 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  overflow: hidden;
+}
+
+.static {
+  display: inline;
+}
+
+.rotator {
+  display: inline-block;
+  position: relative;
+  height: 1.2em;
+  overflow: hidden;
+}
+
+.word {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
+}
+
+.word.active {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.word.exit {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+/* Direction variants */
+.up .word { transform: translateY(100%); }
+.up .word.active { transform: translateY(0); }
+.up .word.exit { transform: translateY(-100%); }
+
+.down .word { transform: translateY(-100%); }
+.down .word.active { transform: translateY(0); }
+.down .word.exit { transform: translateY(100%); }
+
+.left .word { transform: translateX(100%); }
+.left .word.active { transform: translateX(0); }
+.left .word.exit { transform: translateX(-100%); }
+
+.right .word { transform: translateX(-100%); }
+.right .word.active { transform: translateX(0); }
+.right .word.exit { transform: translateX(100%); }
+
+/* Flip variant */
+.flip .word {
+  transform: rotateX(90deg);
+  transform-origin: bottom;
+}
+
+.flip .word.active {
+  transform: rotateX(0deg);
+}
+
+.flip .word.exit {
+  transform: rotateX(-90deg);
+  transform-origin: top;
+}
+
+/* Fade variant */
+.fade .word {
+  transform: none;
+  opacity: 0;
+}
+
+.fade .word.active {
+  opacity: 1;
+}
+
+.fade .word.exit {
+  opacity: 0;
+}
+
+/* Zoom variant */
+.zoom .word {
+  transform: scale(0);
+  opacity: 0;
+}
+
+.zoom .word.active {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.zoom .word.exit {
+  transform: scale(2);
+  opacity: 0;
+}
+
+/* Blur variant */
+.blur .word {
+  transform: translateY(50%);
+  opacity: 0;
+  filter: blur(10px);
+}
+
+.blur .word.active {
+  transform: translateY(0);
+  opacity: 1;
+  filter: blur(0);
+}
+
+.blur .word.exit {
+  transform: translateY(-50%);
+  opacity: 0;
+  filter: blur(10px);
+}
+
+/* Color variants */
+.highlight .word.active {
+  color: var(--highlight-color, #ff0040);
+  text-shadow: 0 0 10px var(--highlight-color, #ff0040);
+}
+
+/* Styling variants */
+.underline .word.active {
+  text-decoration: underline;
+  text-decoration-color: var(--highlight-color, #ff0040);
+  text-underline-offset: 4px;
+}
+
+.bracket::before,
+.bracket::after {
+  color: var(--bracket-color, #666);
+}
+
+.bracket::before { content: '['; margin-right: 0.25em; }
+.bracket::after { content: ']'; margin-left: 0.25em; }
+
+/* Speed variants */
+.fast .word { transition-duration: 0.3s; }
+.slow .word { transition-duration: 0.8s; }
+
+/* Hover pause */
+.pauseOnHover:hover .word {
+  animation-play-state: paused;
+}
+
+/* Cursor indicator */
+.cursor::after {
+  content: '|';
+  display: inline-block;
+  margin-left: 2px;
+  animation: cursorBlink 1s step-end infinite;
+}
+
+@keyframes cursorBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}

package/text/rotate-text/tailwind/index.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef, useCallback } from 'react';
+
+export interface RotateTextProps extends HTMLAttributes<HTMLSpanElement> {
+  prefix?: string;
+  suffix?: string;
+  words: string[];
+  animation?: 'up' | 'down' | 'left' | 'right' | 'flip' | 'fade' | 'zoom' | 'blur';
+  duration?: number;
+  speed?: 'fast' | 'normal' | 'slow';
+  highlight?: boolean;
+  highlightColor?: string;
+  underline?: boolean;
+  bracket?: boolean;
+  bracketColor?: string;
+  pauseOnHover?: boolean;
+  cursor?: boolean;
+  onChange?: (word: string, index: number) => void;
+}
+
+const speedDurations = { fast: 'duration-300', normal: 'duration-500', slow: 'duration-700' };
+
+const getTransform = (animation: string, state: 'hidden' | 'active' | 'exit') => {
+  const transforms: Record<string, Record<string, string>> = {
+    up: { hidden: 'translate-y-full opacity-0', active: 'translate-y-0 opacity-100', exit: '-translate-y-full opacity-0' },
+    down: { hidden: '-translate-y-full opacity-0', active: 'translate-y-0 opacity-100', exit: 'translate-y-full opacity-0' },
+    left: { hidden: 'translate-x-full opacity-0', active: 'translate-x-0 opacity-100', exit: '-translate-x-full opacity-0' },
+    right: { hidden: '-translate-x-full opacity-0', active: 'translate-x-0 opacity-100', exit: 'translate-x-full opacity-0' },
+    fade: { hidden: 'opacity-0', active: 'opacity-100', exit: 'opacity-0' },
+    zoom: { hidden: 'scale-0 opacity-0', active: 'scale-100 opacity-100', exit: 'scale-150 opacity-0' },
+    blur: { hidden: 'translate-y-1/2 opacity-0 blur-sm', active: 'translate-y-0 opacity-100 blur-0', exit: '-translate-y-1/2 opacity-0 blur-sm' },
+    flip: { hidden: 'rotateX-90 opacity-0', active: 'rotateX-0 opacity-100', exit: '-rotateX-90 opacity-0' },
+  };
+  return transforms[animation]?.[state] || '';
+};
+
+export const RotateText = forwardRef<HTMLSpanElement, RotateTextProps>(
+  (
+    {
+      prefix,
+      suffix,
+      words,
+      animation = 'up',
+      duration = 2000,
+      speed = 'normal',
+      highlight = false,
+      highlightColor = '#ff0040',
+      underline = false,
+      bracket = false,
+      bracketColor = '#666',
+      pauseOnHover = false,
+      cursor = false,
+      onChange,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [exitIndex, setExitIndex] = useState<number | null>(null);
+    const intervalRef = useRef<NodeJS.Timeout>();
+    const isPaused = useRef(false);
+
+    const maxWidth = Math.max(...words.map(w => w.length));
+
+    const rotate = useCallback(() => {
+      if (isPaused.current) return;
+      
+      setExitIndex(currentIndex);
+      const nextIndex = (currentIndex + 1) % words.length;
+      setCurrentIndex(nextIndex);
+      onChange?.(words[nextIndex], nextIndex);
+      
+      setTimeout(() => setExitIndex(null), 500);
+    }, [currentIndex, words, onChange]);
+
+    useEffect(() => {
+      intervalRef.current = setInterval(rotate, duration);
+      return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
+    }, [rotate, duration]);
+
+    const handleMouseEnter = () => { if (pauseOnHover) isPaused.current = true; };
+    const handleMouseLeave = () => { if (pauseOnHover) isPaused.current = false; };
+
+    return (
+      <span
+        ref={ref}
+        className={`inline-flex items-center gap-2 ${className}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {prefix && <span>{prefix}</span>}
+        {bracket && <span style={{ color: bracketColor }}>[</span>}
+        <span 
+          className="relative inline-block overflow-hidden"
+          style={{ width: `${maxWidth}ch`, height: '1.2em' }}
+        >
+          {words.map((word, i) => {
+            const isActive = i === currentIndex;
+            const isExit = i === exitIndex;
+            const state = isActive ? 'active' : isExit ? 'exit' : 'hidden';
+            
+            return (
+              <span
+                key={i}
+                className={`absolute top-0 left-0 w-full transition-all ease-out ${speedDurations[speed]} ${getTransform(animation, state)} ${
+                  isActive && highlight ? 'drop-shadow-lg' : ''
+                } ${isActive && underline ? 'underline underline-offset-4' : ''}`}
+                style={isActive && highlight ? { color: highlightColor, textShadow: `0 0 10px ${highlightColor}` } : undefined}
+              >
+                {word}
+              </span>
+            );
+          })}
+        </span>
+        {bracket && <span style={{ color: bracketColor }}>]</span>}
+        {suffix && <span>{suffix}</span>}
+        {cursor && <span className="animate-pulse">|</span>}
+      </span>
+    );
+  }
+);
+
+RotateText.displayName = 'RotateText';
+export default RotateText;

package/text/strike-reveal/css/index.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+import styles from './strike-reveal.module.css';
+
+export interface StrikeRevealProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Original text to strike through */
+  children: string;
+  /** Text to reveal after strike */
+  revealText?: string;
+  /** Visual variant */
+  variant?: 'permanent' | 'crossout' | 'redacted' | 'censored' | 'glitch';
+  /** Color variant */
+  color?: 'default' | 'blood' | 'cyber' | 'acid' | 'void';
+  /** Trigger mode */
+  trigger?: 'auto' | 'hover' | 'scroll' | 'click';
+  /** Delay before animation (ms) */
+  delay?: number;
+  /** Double strike line */
+  double?: boolean;
+  /** Custom strike color */
+  strikeColor?: string;
+  /** Callback when reveal completes */
+  onReveal?: () => void;
+}
+
+export const StrikeReveal = forwardRef<HTMLSpanElement, StrikeRevealProps>(
+  (
+    {
+      children,
+      revealText,
+      variant = 'permanent',
+      color = 'default',
+      trigger = 'auto',
+      delay = 0,
+      double = false,
+      strikeColor,
+      onReveal,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [isActive, setIsActive] = useState(false);
+    const containerRef = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+      if (trigger === 'auto') {
+        const timeout = setTimeout(() => {
+          setIsActive(true);
+          setTimeout(() => onReveal?.(), 700);
+        }, delay);
+        return () => clearTimeout(timeout);
+      }
+
+      if (trigger === 'scroll') {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting) {
+              setTimeout(() => {
+                setIsActive(true);
+                setTimeout(() => onReveal?.(), 700);
+              }, delay);
+            }
+          },
+          { threshold: 0.5 }
+        );
+
+        if (containerRef.current) {
+          observer.observe(containerRef.current);
+        }
+
+        return () => observer.disconnect();
+      }
+    }, [trigger, delay, onReveal]);
+
+    const handleClick = () => {
+      if (trigger === 'click') {
+        setIsActive(true);
+        setTimeout(() => onReveal?.(), 700);
+      }
+    };
+
+    const containerClasses = [
+      styles.container,
+      styles[variant],
+      color !== 'default' && styles[color],
+      double && styles.double,
+      trigger === 'hover' && styles.hover,
+      isActive && styles.active,
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLSpanElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={containerClasses}
+        style={{ 
+          '--strike-color': strikeColor,
+          '--delay': `${delay}ms`,
+          ...style 
+        } as React.CSSProperties}
+        onClick={handleClick}
+        {...props}
+      >
+        <span className={styles.text}>
+          {children}
+          <span className={styles.strike} />
+        </span>
+        {revealText && (
+          <span className={styles.revealed}>{revealText}</span>
+        )}
+      </span>
+    );
+  }
+);
+
+StrikeReveal.displayName = 'StrikeReveal';
+export default StrikeReveal;

package/text/strike-reveal/css/strike-reveal.module.css

@@ -0,0 +1,139 @@
+.container {
+  position: relative;
+  display: inline-block;
+}
+
+.text {
+  position: relative;
+  display: inline;
+}
+
+/* Strike line */
+.strike {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 0;
+  height: 2px;
+  background: currentColor;
+  transform: translateY(-50%);
+  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.container.active .strike {
+  width: 100%;
+}
+
+/* Hidden text that reveals */
+.revealed {
+  display: block;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+  transition-delay: 0.3s;
+  margin-top: 0.5em;
+}
+
+.container.active .revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Variant: strikethrough stays */
+.permanent .strike {
+  background: var(--strike-color, #ff0040);
+}
+
+.permanent.active .text {
+  opacity: 0.5;
+}
+
+/* Variant: text fades then reveals */
+.crossout .text {
+  transition: opacity 0.3s ease;
+}
+
+.crossout.active .text {
+  opacity: 0.3;
+}
+
+/* Variant: redacted style */
+.redacted .strike {
+  height: 1em;
+  background: var(--strike-color, #0a0a0a);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.redacted.active .text {
+  color: transparent;
+}
+
+/* Variant: censored with bars */
+.censored {
+  position: relative;
+}
+
+.censored .strike {
+  height: 100%;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--strike-color, #0a0a0a) 0px,
+    var(--strike-color, #0a0a0a) 8px,
+    transparent 8px,
+    transparent 12px
+  );
+  top: 0;
+  transform: none;
+}
+
+/* Variant: glitch strike */
+.glitch .strike {
+  background: var(--strike-color, #ff0040);
+  animation: none;
+}
+
+.glitch.active .strike {
+  animation: glitchStrike 0.5s ease forwards;
+}
+
+@keyframes glitchStrike {
+  0% { width: 0; transform: translateY(-50%); }
+  30% { width: 110%; transform: translateY(-50%) translateX(-5%); }
+  50% { width: 95%; transform: translateY(-50%) translateX(3%); }
+  70% { width: 102%; transform: translateY(-50%) translateX(-2%); }
+  100% { width: 100%; transform: translateY(-50%); }
+}
+
+/* Colors */
+.blood .strike { background: #ff0040; }
+.cyber .strike { background: #00ffff; }
+.acid .strike { background: #aaff00; }
+.void .strike { background: #0a0a0a; }
+
+/* Hover trigger */
+.hover:hover .strike {
+  width: 100%;
+}
+
+.hover:hover .revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Animation on scroll */
+.scroll .strike {
+  transition-delay: var(--delay, 0ms);
+}
+
+/* Double strike */
+.double .strike::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  width: 100%;
+  height: 2px;
+  background: inherit;
+  opacity: 0.5;
+}

package/text/strike-reveal/tailwind/index.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+
+export interface StrikeRevealProps extends HTMLAttributes<HTMLSpanElement> {
+  children: string;
+  revealText?: string;
+  variant?: 'permanent' | 'crossout' | 'redacted' | 'censored' | 'glitch';
+  color?: 'default' | 'blood' | 'cyber' | 'acid' | 'void';
+  trigger?: 'auto' | 'hover' | 'scroll' | 'click';
+  delay?: number;
+  double?: boolean;
+  strikeColor?: string;
+  onReveal?: () => void;
+}
+
+const colorStyles = {
+  default: 'bg-current',
+  blood: 'bg-rose-500',
+  cyber: 'bg-cyan-400',
+  acid: 'bg-lime-400',
+  void: 'bg-[#0a0a0a]',
+};
+
+export const StrikeReveal = forwardRef<HTMLSpanElement, StrikeRevealProps>(
+  (
+    {
+      children,
+      revealText,
+      variant = 'permanent',
+      color = 'default',
+      trigger = 'auto',
+      delay = 0,
+      double = false,
+      strikeColor,
+      onReveal,
+      className = '',
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [isActive, setIsActive] = useState(false);
+    const containerRef = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+      if (trigger === 'auto') {
+        const timeout = setTimeout(() => {
+          setIsActive(true);
+          setTimeout(() => onReveal?.(), 700);
+        }, delay);
+        return () => clearTimeout(timeout);
+      }
+
+      if (trigger === 'scroll') {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting) {
+              setTimeout(() => {
+                setIsActive(true);
+                setTimeout(() => onReveal?.(), 700);
+              }, delay);
+            }
+          },
+          { threshold: 0.5 }
+        );
+
+        if (containerRef.current) observer.observe(containerRef.current);
+        return () => observer.disconnect();
+      }
+    }, [trigger, delay, onReveal]);
+
+    const handleClick = () => {
+      if (trigger === 'click') {
+        setIsActive(true);
+        setTimeout(() => onReveal?.(), 700);
+      }
+    };
+
+    const handleMouseEnter = () => {
+      if (trigger === 'hover') setIsActive(true);
+    };
+
+    const handleMouseLeave = () => {
+      if (trigger === 'hover') setIsActive(false);
+    };
+
+    const strikeHeight = variant === 'redacted' ? 'h-[1em]' : variant === 'censored' ? 'h-full' : 'h-0.5';
+    const bgStyle = strikeColor ? { backgroundColor: strikeColor } : undefined;
+
+    return (
+      <span
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLSpanElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={`relative inline-block ${className}`}
+        style={style}
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <span className={`relative inline ${isActive && variant === 'crossout' ? 'opacity-30' : ''} ${isActive && variant === 'redacted' ? 'text-transparent' : ''} transition-opacity duration-300`}>
+          {children}
+          <span
+            className={`absolute left-0 top-1/2 -translate-y-1/2 ${strikeHeight} ${colorStyles[color]} transition-all duration-400 ease-out ${
+              isActive ? 'w-full' : 'w-0'
+            }`}
+            style={bgStyle}
+          />
+          {double && (
+            <span
+              className={`absolute left-0 top-1/2 translate-y-0.5 h-0.5 ${colorStyles[color]} opacity-50 transition-all duration-400 ease-out ${
+                isActive ? 'w-full' : 'w-0'
+              }`}
+              style={bgStyle}
+            />
+          )}
+        </span>
+        {revealText && (
+          <span
+            className={`block mt-2 transition-all duration-400 ease-out ${
+              isActive ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
+            }`}
+            style={{ transitionDelay: '300ms' }}
+          >
+            {revealText}
+          </span>
+        )}
+      </span>
+    );
+  }
+);
+
+StrikeReveal.displayName = 'StrikeReveal';
+export default StrikeReveal;