@oalacea/chaosui 0.4.0 → 0.5.0

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

@@ -0,0 +1,129 @@
+.container {
+  position: relative;
+  display: block;
+}
+
+.word {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  margin-right: 0.25em;
+}
+
+.wordInner {
+  display: inline-block;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
+}
+
+.word.visible .wordInner {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Direction variants */
+.fromBottom .wordInner { transform: translateY(100%); }
+.fromTop .wordInner { transform: translateY(-100%); }
+.fromLeft .wordInner { transform: translateX(-100%); }
+.fromRight .wordInner { transform: translateX(100%); }
+
+.fromBottom.visible .wordInner,
+.fromTop.visible .wordInner { transform: translateY(0); }
+.fromLeft.visible .wordInner,
+.fromRight.visible .wordInner { transform: translateX(0); }
+
+/* Blur variant */
+.blur .wordInner {
+  filter: blur(10px);
+}
+
+.blur.visible .wordInner {
+  filter: blur(0);
+}
+
+/* Scale variant */
+.scale .wordInner {
+  transform: translateY(100%) scale(0.8);
+}
+
+.scale.visible .wordInner {
+  transform: translateY(0) scale(1);
+}
+
+/* Rotate variant */
+.rotate .wordInner {
+  transform: translateY(100%) rotateX(90deg);
+  transform-origin: bottom;
+}
+
+.rotate.visible .wordInner {
+  transform: translateY(0) rotateX(0deg);
+}
+
+/* Split char mode */
+.char {
+  display: inline-block;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
+}
+
+.char.visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Line mode */
+.line {
+  display: block;
+  overflow: hidden;
+  margin-bottom: 0.1em;
+}
+
+.lineInner {
+  display: block;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
+}
+
+.line.visible .lineInner {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Highlight effect */
+.highlight {
+  position: relative;
+}
+
+.highlight::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 30%;
+  background: var(--highlight-color, #ff0040);
+  opacity: 0.3;
+  z-index: -1;
+  transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
+}
+
+.highlight.visible::after {
+  width: 100%;
+}
+
+/* Speed variants */
+.fast .wordInner,
+.fast .char,
+.fast .lineInner {
+  transition-duration: 0.3s;
+}
+
+.slow .wordInner,
+.slow .char,
+.slow .lineInner {
+  transition-duration: 1s;
+}

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

@@ -0,0 +1,135 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+
+export interface RevealTextProps extends HTMLAttributes<HTMLDivElement> {
+  children: string;
+  splitBy?: 'word' | 'char' | 'line';
+  direction?: 'fromBottom' | 'fromTop' | 'fromLeft' | 'fromRight';
+  effect?: 'none' | 'blur' | 'scale' | 'rotate';
+  stagger?: number;
+  speed?: 'fast' | 'normal' | 'slow';
+  threshold?: number;
+  once?: boolean;
+  highlight?: boolean;
+  highlightColor?: string;
+  immediate?: boolean;
+}
+
+const speedDurations = { fast: 'duration-300', normal: 'duration-500', slow: 'duration-1000' };
+
+const hiddenTransforms = {
+  fromBottom: 'translate-y-full',
+  fromTop: '-translate-y-full',
+  fromLeft: '-translate-x-full',
+  fromRight: 'translate-x-full',
+};
+
+export const RevealText = forwardRef<HTMLDivElement, RevealTextProps>(
+  (
+    {
+      children,
+      splitBy = 'word',
+      direction = 'fromBottom',
+      effect = 'none',
+      stagger = 50,
+      speed = 'normal',
+      threshold = 0.2,
+      once = true,
+      highlight = false,
+      highlightColor = '#ff0040',
+      immediate = false,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const [visibleIndices, setVisibleIndices] = useState<Set<number>>(new Set());
+    const containerRef = useRef<HTMLDivElement>(null);
+    const hasAnimated = useRef(false);
+
+    const elements = splitBy === 'line' 
+      ? children.split('\n') 
+      : splitBy === 'char' 
+        ? children.split('') 
+        : children.split(' ');
+
+    useEffect(() => {
+      if (immediate) {
+        elements.forEach((_, i) => {
+          setTimeout(() => {
+            setVisibleIndices(prev => new Set(prev).add(i));
+          }, i * stagger);
+        });
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting && (!once || !hasAnimated.current)) {
+            hasAnimated.current = true;
+            elements.forEach((_, i) => {
+              setTimeout(() => {
+                setVisibleIndices(prev => new Set(prev).add(i));
+              }, i * stagger);
+            });
+          } else if (!entry.isIntersecting && !once) {
+            setVisibleIndices(new Set());
+          }
+        },
+        { threshold }
+      );
+
+      if (containerRef.current) observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }, [elements, stagger, threshold, once, immediate]);
+
+    const renderElement = (text: string, index: number) => {
+      const isVisible = visibleIndices.has(index);
+      const duration = speedDurations[speed];
+      
+      const baseClasses = `inline-block overflow-hidden ${splitBy === 'line' ? 'block mb-1' : 'mr-1'}`;
+      const innerBase = `inline-block transition-all ease-out ${duration}`;
+      const hiddenState = `${hiddenTransforms[direction]} opacity-0 ${effect === 'blur' ? 'blur-sm' : ''} ${effect === 'scale' ? 'scale-75' : ''}`;
+      const visibleState = 'translate-y-0 translate-x-0 opacity-100 blur-0 scale-100';
+
+      return (
+        <span key={index} className={`${baseClasses} ${highlight ? 'relative' : ''}`}>
+          <span
+            className={`${innerBase} ${isVisible ? visibleState : hiddenState}`}
+            style={{ transitionDelay: `${index * stagger}ms` }}
+          >
+            {text === ' ' ? '\u00A0' : text}
+          </span>
+          {highlight && (
+            <span
+              className={`absolute bottom-0 left-0 h-[30%] -z-10 transition-all ${duration} opacity-30`}
+              style={{
+                backgroundColor: highlightColor,
+                width: isVisible ? '100%' : '0%',
+                transitionDelay: `${index * stagger + 200}ms`,
+              }}
+            />
+          )}
+        </span>
+      );
+    };
+
+    return (
+      <div
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={`relative ${className}`}
+        {...props}
+      >
+        {elements.map(renderElement)}
+      </div>
+    );
+  }
+);
+
+RevealText.displayName = 'RevealText';
+export default RevealText;

package/components/text/rotate-text/css/index.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef, useCallback } from 'react';
+import styles from './rotate-text.module.css';
+
+export interface RotateTextProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Static text before rotating words */
+  prefix?: string;
+  /** Static text after rotating words */
+  suffix?: string;
+  /** Words to rotate through */
+  words: string[];
+  /** Rotation direction/animation */
+  animation?: 'up' | 'down' | 'left' | 'right' | 'flip' | 'fade' | 'zoom' | 'blur';
+  /** Duration each word is shown (ms) */
+  duration?: number;
+  /** Animation speed */
+  speed?: 'fast' | 'normal' | 'slow';
+  /** Highlight active word */
+  highlight?: boolean;
+  /** Highlight color */
+  highlightColor?: string;
+  /** Show underline on active */
+  underline?: boolean;
+  /** Show brackets around rotator */
+  bracket?: boolean;
+  /** Bracket color */
+  bracketColor?: string;
+  /** Pause on hover */
+  pauseOnHover?: boolean;
+  /** Show typing cursor */
+  cursor?: boolean;
+  /** Callback when word changes */
+  onChange?: (word: string, index: number) => void;
+}
+
+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,
+      style,
+      ...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;
+    };
+
+    const containerClasses = [
+      styles.container,
+      styles[animation],
+      styles[speed],
+      highlight && styles.highlight,
+      underline && styles.underline,
+      bracket && styles.bracket,
+      pauseOnHover && styles.pauseOnHover,
+      cursor && styles.cursor,
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span
+        ref={ref}
+        className={containerClasses}
+        style={{
+          '--highlight-color': highlightColor,
+          '--bracket-color': bracketColor,
+          ...style
+        } as React.CSSProperties}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {prefix && <span className={styles.static}>{prefix} </span>}
+        <span 
+          className={styles.rotator}
+          style={{ width: `${maxWidth}ch` }}
+        >
+          {words.map((word, i) => (
+            <span
+              key={i}
+              className={`${styles.word} ${i === currentIndex ? styles.active : ''} ${i === exitIndex ? styles.exit : ''}`}
+            >
+              {word}
+            </span>
+          ))}
+        </span>
+        {suffix && <span className={styles.static}> {suffix}</span>}
+      </span>
+    );
+  }
+);
+
+RotateText.displayName = 'RotateText';
+export default RotateText;

package/components/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/components/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;