🎯 UI Hooks

Hooks livianos para UI components usando CSS animations y JavaScript vainilla.

📦 Estructura

🎨 Animations hooks

Hooks para microanimaciones y transiciones.

📝 Forms hooks

Hooks para manejo de formularios y validación.

🎨 Animation Hooks

useFadeIn

Animación de entrada con desvanecimiento.

import { useFadeIn } from 'roaming-studios-ui/hooks/animations';

const { elementRef, className } = useFadeIn({ 
  trigger: true, 
  duration: 300, 
  direction: 'up' 
});
<Text ref={elementRef} className={className}>Animated text</Text>

useSlideIn

Animación de entrada con deslizamiento.

import { useSlideIn } from 'roaming-studios-ui/hooks/animations';

const { elementRef, className } = useSlideIn({ 
  trigger: true, 
  direction: 'left', 
  distance: 20 
});
<Card ref={elementRef} className={className}>Slide in content</Card>

useAnimateOnScroll

Activa animación cuando el elemento entra en el viewport.

import { useAnimateOnScroll } from 'roaming-studios-ui/hooks/animations';

const { elementRef, isVisible, className } = useAnimateOnScroll({ 
  threshold: 0.2,
  animation: 'fade-in',
  direction: 'up'
});
<Text ref={elementRef} className={className}>Animates when visible</Text>

useHover

Microinteracciones en hover.

import { useHover } from 'roaming-studios-ui/hooks/animations';

const { elementRef, isHovered, style } = useHover({ 
  scale: 1.05, 
  lift: 4 
});
<Card ref={elementRef} style={style}>Hover me</Card>

📝 Form Hooks

useFormField

Manejo de estado y validación para campos de formulario.

import { useFormField } from 'roaming-studios-ui/hooks/forms';

const { value, error, handleChange, handleBlur } = useFormField({
  initialValue: '',
  validate: (value) => value.length < 3 ? 'Too short' : undefined
});

<Input
  value={value}
  onChange={(e) => handleChange(e.target.value)}
  onBlur={handleBlur}
  error={error}
/>

🎨 CSS requerido

Agregar estas animaciones al CSS global:

/* Fade in animations */
.animate-fade-in-wrapper {
  --fade-duration: 300ms;
  --fade-delay: 0ms;
}

.animate-fade-in {
  animation: fadeIn var(--fade-duration) ease-out var(--fade-delay) forwards;
}

@keyframes fadeIn {
  from { 
    opacity: 0;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in animations */
.animate-slide-in-wrapper {
  --slide-duration: 400ms;
  --slide-delay: 0ms;
  --slide-distance: 30px;
}

.animate-slide-in {
  animation: slideIn var(--slide-duration) ease-out var(--slide-delay) forwards;
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateX(var(--slide-distance));
  }
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

/* Direction variants */
.animate-fade-in-down { transform: translateY(-10px); }
.animate-fade-in-up { transform: translateY(10px); }
.animate-fade-in-left { transform: translateX(10px); }
.animate-fade-in-right { transform: translateX(-10px); }

.animate-slide-in-left { transform: translateX(var(--slide-distance)); }
.animate-slide-in-right { transform: translateX(calc(var(--slide-distance) * -1)); }
.animate-slide-in-up { transform: translateY(var(--slide-distance)); }
.animate-slide-in-down { transform: translateY(calc(var(--slide-distance) * -1)); }

🚀 Características

• ✅ Ultra liviano - < 1KB JavaScript total
• ✅ CSS animations - Hardware acceleration
• ✅ Performance - IntersectionObserver para scroll
• ✅ Componible - Usar solo lo que necesitas
• ✅ TypeScript - Full type safety
• ✅ Flexible - Props configurables

📋 Uso en componentes

import { useFadeIn, useAnimateOnScroll } from 'roaming-studios-ui/hooks';

const MyComponent = () => {
  const { elementRef, className } = useFadeIn({ duration: 500 });
  
  return (
    <Text ref={elementRef} className={className}>
      Animated content
    </Text>
  );
};

🎯 Principios

• Simple sobre complejo - CSS animations > librerías pesadas
• Opt-in - Solo se carga si se usa
• Performance first - GPU acceleration cuando es posible
• Agnóstico - Funciona con cualquier componente