Patrones de Animación UI para React

"use client"
import { motion } from "motion/react"
import { springs, motionTokens } from "@/lib/motion-tokens"

// NutriTrack: botón "Guardar plan de comidas"
export function SavePlanButton({ onClick, loading }: SavePlanButtonProps) {
  return (
    <motion.button
      onClick={onClick}
      disabled={loading}
      whileHover={{ scale: motionTokens.scale.pop }}
      whileTap={{ scale: motionTokens.scale.press }}
      transition={springs.snappy}
      className="btn-primary"
    >
      {loading ? "Guardando…" : "Guardar plan"}
    </motion.button>
  )
}

"use client"
import { motion, AnimatePresence } from "motion/react"
import { motionTokens, springs } from "@/lib/motion-tokens"

const container = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,  // Regla 5: entre 0.05–0.10
      delayChildren: 0.1,
    },
  },
}

const item = {
  hidden:  { opacity: 0, y: motionTokens.distance.md },
  visible: { opacity: 1, y: 0, transition: springs.gentle },
}

export function PatientList({ patients, onRemove }) {
  return (
    <motion.ul variants={container} initial="hidden" animate="visible">
      <AnimatePresence mode="popLayout">
        {patients.map((p) => (
          <motion.li key={p.id} variants={item} exit={safe.exit}>
            <PatientCard {...p} onRemove={() => onRemove(p.id)} />
          </motion.li>
        ))}
      </AnimatePresence>
    </motion.ul>
  )
}

"use client"
import { motion, AnimatePresence } from "motion/react"
import { motionTokens, springs } from "@/lib/motion-tokens"

// mode="sync" → toasts se solapan durante la transición (correcto)
<AnimatePresence mode="sync">
  {toasts.map((t) => (
    <motion.div
      key={t.id}  // Regla 1: key siempre
      layout
      initial={{ opacity: 0, x: motionTokens.distance.xl, scale: motionTokens.scale.subtle }}
      animate={{ opacity: 1, x: 0, scale: 1 }}
      exit={{ opacity: 0, x: motionTokens.distance.xl, scale: motionTokens.scale.subtle }}
      transition={springs.snappy}  // Regla 8: usa tokens, no números
    />
  ))}
</AnimatePresence>

// Reglas 1, 2, 6: AnimatePresence + key + exit + accesibilidad
<AnimatePresence>
  {isOpen && <DeletePlanModal key="delete-modal" />}
</AnimatePresence>

export function DeletePlanModal({ onClose, onConfirm }) {
  // focus trap + Escape → onClose (Regla 6)
  return (
    <>
      <motion.div className="fixed inset-0 bg-black/50"
        initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
        onClick={onClose} />
      <motion.div
        role="dialog" aria-modal="true"
        initial={{ opacity: 0, scale: motionTokens.scale.press, y: motionTokens.distance.sm }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: motionTokens.scale.press, y: motionTokens.distance.sm }}
        transition={springs.gentle}
      />
    </>
  )
}

export function MacrosDayCard({ title, macros }) {
  const [expanded, setExpanded] = useState(false)
  return (
    <motion.div layout onClick={() => setExpanded(!expanded)}>
      {"/* layout='position' evita que el texto refluya animado */"}
      <motion.h2 layout="position">{title}</motion.h2>

      <AnimatePresence>
        {expanded && (
          <motion.div
            key="macros-body"  // Regla 1
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}  // Regla 2
            transition={{ duration: motionTokens.duration.fast }}
          >
            <MacrosBreakdown data={macros} />
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

// components/page-transition.tsx
"use client"
import { motion, AnimatePresence } from "motion/react"
import { usePathname } from "next/navigation"
import { motionTokens } from "@/lib/motion-tokens"

const variants = {
  initial: { opacity: 0, y: motionTokens.distance.sm },
  enter:   { opacity: 1, y: 0 },
  exit:    { opacity: 0, y: -motionTokens.distance.sm },
}

export function PageTransition({ children }) {
  const pathname = usePathname()
  return (
    // mode="wait": exit termina ANTES de que entre la nueva página (Regla 3)
    <AnimatePresence mode="wait">
      <motion.div
        key={pathname}
        variants={variants}
        initial="initial" animate="enter" exit="exit"
        transition={{
          duration: motionTokens.duration.normal,
          ease: motionTokens.easing.smooth,
        }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )
}

"use client"
import { motion } from "motion/react"
import { motionTokens, springs } from "@/lib/motion-tokens"

// Tarjetas de estadísticas semanales — se revelan al hacer scroll
{weeklyStats.map((stat, i) => (
  <motion.div
    key={stat.id}
    initial={{ opacity: 0, y: motionTokens.distance.lg }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: "-80px" }}  // Regla 7
    transition={{
      duration: motionTokens.duration.slow,
      ease: motionTokens.easing.smooth,
      delay: i * 0.08,
    }}
  />
))}

"use client"
import { motion, useScroll } from "motion/react"

// Barra de progreso en el informe semanal de NutriTrack
export function ScrollProgress() {
  const { scrollYProgress } = useScroll()
  return (
    <motion.div
      className="fixed top-0 left-0 h-1 bg-indigo-500 origin-left w-full"
      style={{ scaleX: scrollYProgress }}
    />
  )
}

// Uso: importar en el layout del informe semanal
// <ScrollProgress />  — se coloca fuera del contenido principal