Direction-aware transition

import { useState } from 'react';
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';

const steps = [
  { title: 'Create your account', text: 'Start with your work email.' },
  { title: 'Name your workspace', text: 'Your teammates will see this name.' },
  { title: 'Invite your team', text: 'Add people now or any time later.' }
];

const DISTANCE = 40;

// direction is 1 going forward and -1 going back.
const slide = {
  enter: (direction: number) => ({ x: direction * DISTANCE, opacity: 0 }),
  center: { x: 0, opacity: 1 },
  exit: (direction: number) => ({ x: direction * -DISTANCE, opacity: 0 })
};

export function SignupSteps() {
  const [[step, direction], setStep] = useState([0, 1]);
  const reduceMotion = useReducedMotion();
  // Later steps sit on the left in right-to-left layouts; reduced motion keeps only the fade.
  const rtl = document.documentElement.dir === 'rtl';
  const custom = reduceMotion ? 0 : rtl ? -direction : direction;
  const current = steps[step]!;
  const last = step === steps.length - 1;
  const go = (next: number) => setStep([next, next > step ? 1 : -1]);

  return (
    <div className='relative w-80 overflow-hidden rounded-2xl border bg-background p-6'>
      {/* The leaving step needs the new direction too, so pass it to AnimatePresence. */}
      <AnimatePresence mode='popLayout' initial={false} custom={custom}>
        <motion.div
          key={step}
          custom={custom}
          variants={slide}
          initial='enter'
          animate='center'
          exit='exit'
          transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
        >
          <h3 className='font-semibold'>{current.title}</h3>
          <p className='mt-1 text-sm text-muted-foreground'>{current.text}</p>
        </motion.div>
      </AnimatePresence>
      <div className='mt-6 flex justify-between text-sm font-medium *:rounded-full *:border *:px-4 *:py-2 *:disabled:opacity-40'>
        <button
          type='button'
          disabled={step === 0}
          onClick={() => go(step - 1)}
        >
          Back
        </button>
        <button type='button' disabled={last} onClick={() => go(step + 1)}>
          Next
        </button>
      </div>
    </div>
  );
}