@create-lft-app/nextjs 3.2.0 → 3.3.0

package/template/src/components/ui/motion.tsx

@@ -1,197 +1,197 @@
-'use client'
-
-import { motion, type HTMLMotionProps, type Variants } from 'framer-motion'
-import { forwardRef } from 'react'
-
-// Variantes de animación reutilizables
-export const fadeIn: Variants = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1 },
-}
-
-export const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0 },
-}
-
-export const fadeInDown: Variants = {
-  hidden: { opacity: 0, y: -20 },
-  visible: { opacity: 1, y: 0 },
-}
-
-export const fadeInLeft: Variants = {
-  hidden: { opacity: 0, x: -20 },
-  visible: { opacity: 1, x: 0 },
-}
-
-export const fadeInRight: Variants = {
-  hidden: { opacity: 0, x: 20 },
-  visible: { opacity: 1, x: 0 },
-}
-
-export const scaleIn: Variants = {
-  hidden: { opacity: 0, scale: 0.95 },
-  visible: { opacity: 1, scale: 1 },
-}
-
-export const slideInFromBottom: Variants = {
-  hidden: { y: '100%' },
-  visible: { y: 0 },
-}
-
-export const slideInFromTop: Variants = {
-  hidden: { y: '-100%' },
-  visible: { y: 0 },
-}
-
-export const staggerContainer: Variants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.1,
-    },
-  },
-}
-
-export const staggerItem: Variants = {
-  hidden: { opacity: 0, y: 20 },
-  visible: { opacity: 1, y: 0 },
-}
-
-// Transiciones predefinidas
-export const springTransition = {
-  type: 'spring',
-  stiffness: 300,
-  damping: 30,
-}
-
-export const easeTransition = {
-  duration: 0.3,
-  ease: [0.25, 0.1, 0.25, 1],
-}
-
-export const smoothTransition = {
-  duration: 0.4,
-  ease: 'easeInOut',
-}
-
-// Componentes de animación base
-export const MotionDiv = motion.div
-export const MotionSpan = motion.span
-export const MotionButton = motion.button
-export const MotionUl = motion.ul
-export const MotionLi = motion.li
-export const MotionNav = motion.nav
-export const MotionSection = motion.section
-export const MotionArticle = motion.article
-export const MotionHeader = motion.header
-export const MotionFooter = motion.footer
-export const MotionMain = motion.main
-export const MotionAside = motion.aside
-
-// Componente FadeIn genérico
-interface FadeInProps extends HTMLMotionProps<'div'> {
-  direction?: 'up' | 'down' | 'left' | 'right' | 'none'
-  delay?: number
-  duration?: number
-}
-
-export const FadeIn = forwardRef<HTMLDivElement, FadeInProps>(
-  ({ children, direction = 'up', delay = 0, duration = 0.4, ...props }, ref) => {
-    const variants: Record<string, Variants> = {
-      up: fadeInUp,
-      down: fadeInDown,
-      left: fadeInLeft,
-      right: fadeInRight,
-      none: fadeIn,
-    }
-
-    return (
-      <motion.div
-        ref={ref}
-        initial="hidden"
-        animate="visible"
-        variants={variants[direction]}
-        transition={{ duration, delay, ease: 'easeOut' }}
-        {...props}
-      >
-        {children}
-      </motion.div>
-    )
-  }
-)
-FadeIn.displayName = 'FadeIn'
-
-// Componente ScaleIn
-interface ScaleInProps extends HTMLMotionProps<'div'> {
-  delay?: number
-  duration?: number
-}
-
-export const ScaleIn = forwardRef<HTMLDivElement, ScaleInProps>(
-  ({ children, delay = 0, duration = 0.3, ...props }, ref) => {
-    return (
-      <motion.div
-        ref={ref}
-        initial="hidden"
-        animate="visible"
-        variants={scaleIn}
-        transition={{ duration, delay, ...springTransition }}
-        {...props}
-      >
-        {children}
-      </motion.div>
-    )
-  }
-)
-ScaleIn.displayName = 'ScaleIn'
-
-// Componente para listas con stagger
-interface StaggerListProps extends HTMLMotionProps<'ul'> {
-  staggerDelay?: number
-}
-
-export const StaggerList = forwardRef<HTMLUListElement, StaggerListProps>(
-  ({ children, staggerDelay = 0.1, ...props }, ref) => {
-    return (
-      <motion.ul
-        ref={ref}
-        initial="hidden"
-        animate="visible"
-        variants={{
-          hidden: { opacity: 0 },
-          visible: {
-            opacity: 1,
-            transition: {
-              staggerChildren: staggerDelay,
-            },
-          },
-        }}
-        {...props}
-      >
-        {children}
-      </motion.ul>
-    )
-  }
-)
-StaggerList.displayName = 'StaggerList'
-
-export const StaggerItem = forwardRef<HTMLLIElement, HTMLMotionProps<'li'>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <motion.li
-        ref={ref}
-        variants={staggerItem}
-        transition={easeTransition}
-        {...props}
-      >
-        {children}
-      </motion.li>
-    )
-  }
-)
-StaggerItem.displayName = 'StaggerItem'
-
-// Componente de presencia animada para entradas/salidas
-export { AnimatePresence } from 'framer-motion'
+'use client'
+
+import { motion, type HTMLMotionProps, type Variants } from 'framer-motion'
+import { forwardRef } from 'react'
+
+// Variantes de animación reutilizables
+export const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+}
+
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+}
+
+export const fadeInDown: Variants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: { opacity: 1, y: 0 },
+}
+
+export const fadeInLeft: Variants = {
+  hidden: { opacity: 0, x: -20 },
+  visible: { opacity: 1, x: 0 },
+}
+
+export const fadeInRight: Variants = {
+  hidden: { opacity: 0, x: 20 },
+  visible: { opacity: 1, x: 0 },
+}
+
+export const scaleIn: Variants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: { opacity: 1, scale: 1 },
+}
+
+export const slideInFromBottom: Variants = {
+  hidden: { y: '100%' },
+  visible: { y: 0 },
+}
+
+export const slideInFromTop: Variants = {
+  hidden: { y: '-100%' },
+  visible: { y: 0 },
+}
+
+export const staggerContainer: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+}
+
+export const staggerItem: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+}
+
+// Transiciones predefinidas
+export const springTransition = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 30,
+}
+
+export const easeTransition = {
+  duration: 0.3,
+  ease: [0.25, 0.1, 0.25, 1],
+}
+
+export const smoothTransition = {
+  duration: 0.4,
+  ease: 'easeInOut',
+}
+
+// Componentes de animación base
+export const MotionDiv = motion.div
+export const MotionSpan = motion.span
+export const MotionButton = motion.button
+export const MotionUl = motion.ul
+export const MotionLi = motion.li
+export const MotionNav = motion.nav
+export const MotionSection = motion.section
+export const MotionArticle = motion.article
+export const MotionHeader = motion.header
+export const MotionFooter = motion.footer
+export const MotionMain = motion.main
+export const MotionAside = motion.aside
+
+// Componente FadeIn genérico
+interface FadeInProps extends HTMLMotionProps<'div'> {
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none'
+  delay?: number
+  duration?: number
+}
+
+export const FadeIn = forwardRef<HTMLDivElement, FadeInProps>(
+  ({ children, direction = 'up', delay = 0, duration = 0.4, ...props }, ref) => {
+    const variants: Record<string, Variants> = {
+      up: fadeInUp,
+      down: fadeInDown,
+      left: fadeInLeft,
+      right: fadeInRight,
+      none: fadeIn,
+    }
+
+    return (
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate="visible"
+        variants={variants[direction]}
+        transition={{ duration, delay, ease: 'easeOut' }}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+FadeIn.displayName = 'FadeIn'
+
+// Componente ScaleIn
+interface ScaleInProps extends HTMLMotionProps<'div'> {
+  delay?: number
+  duration?: number
+}
+
+export const ScaleIn = forwardRef<HTMLDivElement, ScaleInProps>(
+  ({ children, delay = 0, duration = 0.3, ...props }, ref) => {
+    return (
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate="visible"
+        variants={scaleIn}
+        transition={{ duration, delay, ...springTransition }}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+ScaleIn.displayName = 'ScaleIn'
+
+// Componente para listas con stagger
+interface StaggerListProps extends HTMLMotionProps<'ul'> {
+  staggerDelay?: number
+}
+
+export const StaggerList = forwardRef<HTMLUListElement, StaggerListProps>(
+  ({ children, staggerDelay = 0.1, ...props }, ref) => {
+    return (
+      <motion.ul
+        ref={ref}
+        initial="hidden"
+        animate="visible"
+        variants={{
+          hidden: { opacity: 0 },
+          visible: {
+            opacity: 1,
+            transition: {
+              staggerChildren: staggerDelay,
+            },
+          },
+        }}
+        {...props}
+      >
+        {children}
+      </motion.ul>
+    )
+  }
+)
+StaggerList.displayName = 'StaggerList'
+
+export const StaggerItem = forwardRef<HTMLLIElement, HTMLMotionProps<'li'>>(
+  ({ children, ...props }, ref) => {
+    return (
+      <motion.li
+        ref={ref}
+        variants={staggerItem}
+        transition={easeTransition}
+        {...props}
+      >
+        {children}
+      </motion.li>
+    )
+  }
+)
+StaggerItem.displayName = 'StaggerItem'
+
+// Componente de presencia animada para entradas/salidas
+export { AnimatePresence } from 'framer-motion'