Stiffness

import { Switch } from '@base-ui/react/switch';
import { motion, type HTMLMotionProps } from 'motion/react';

// How hard the spring pulls toward its target. 500 snaps a small knob into
// place; try 150 to feel a loose, slow pull. Damping keeps it from bouncing.
const STIFFNESS = 500;
const DAMPING = 32;

export function AutosaveSwitch() {
  return (
    <label className='flex items-center gap-3 text-sm font-medium'>
      <Switch.Root
        defaultChecked
        className='flex h-6 w-11 rounded-full bg-muted p-0.5 transition-colors data-checked:bg-primary'
      >
        <Switch.Thumb
          className='size-5 rounded-full bg-background shadow-sm'
          render={(props, state) => (
            <motion.span
              {...(props as HTMLMotionProps<'span'>)}
              initial={false}
              animate={{ x: state.checked ? 20 : 0 }}
              transition={{
                type: 'spring',
                stiffness: STIFFNESS,
                damping: DAMPING
              }}
            />
          )}
        />
      </Switch.Root>
      Autosave
    </label>
  );
}